50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
|
|
import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants';
|
|
|
|
export default {
|
|
debouncedResize: null,
|
|
sidebarMutationObserver: null,
|
|
data() {
|
|
return {
|
|
graphLeftPadding: 0,
|
|
graphRightPadding: 0,
|
|
};
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.$options.debouncedResize);
|
|
|
|
if (this.$options.sidebarMutationObserver) {
|
|
this.$options.sidebarMutationObserver.disconnect();
|
|
}
|
|
},
|
|
created() {
|
|
this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding);
|
|
window.addEventListener('resize', this.$options.debouncedResize);
|
|
},
|
|
mounted() {
|
|
this.setGraphPadding();
|
|
|
|
this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange);
|
|
this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), {
|
|
attributes: true,
|
|
childList: false,
|
|
subtree: false,
|
|
});
|
|
},
|
|
methods: {
|
|
setGraphPadding() {
|
|
// only add padding to main graph (not inline upstream/downstream graphs)
|
|
if (this.type && this.type !== 'main') return;
|
|
|
|
const container = document.querySelector('.js-pipeline-container');
|
|
if (!container) return;
|
|
|
|
this.graphLeftPadding = container.offsetLeft;
|
|
this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth;
|
|
},
|
|
handleLayoutChange() {
|
|
// wait until animations finish, then recalculate padding
|
|
window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY);
|
|
},
|
|
},
|
|
};
|