Commit 40db4353 authored by derek-knox's avatar derek-knox Committed by Frederic Caplette

Leverage CSS vs. JS for pipeline padding

- Match class use in graph_component.vue to surrounding approach
- Remove now unused graph width mixin
parent b586add0
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);
},
},
};
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment