From 4630f3efc142fe8cf5d41113689036a6d62b15ef Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 26 Nov 2021 11:08:12 +0100 Subject: [PATCH] refactor(edges): Make edge updating optional * add an option to enable edge updating globally * pass an option to an edge to enable updating for a single edge Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- examples/Basic/Basic.vue | 1 + examples/Overview/Overview.vue | 3 +- src/components/Edges/EdgeWrapper.vue | 15 ++++++- src/composables/useHooks.ts | 2 +- src/container/EdgeRenderer/EdgeRenderer.vue | 3 ++ src/container/VueFlow/VueFlow.vue | 44 ++++++++++----------- src/store/stateStore.ts | 1 + src/types/edge.ts | 1 + src/types/flow.ts | 1 + src/types/hooks.ts | 2 +- src/types/store.ts | 1 + src/utils/store.ts | 1 + 12 files changed, 48 insertions(+), 27 deletions(-) diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue index 0814c288..85231994 100644 --- a/examples/Basic/Basic.vue +++ b/examples/Basic/Basic.vue @@ -65,6 +65,7 @@ const toggleclasss = () => { @connect="onConnect" @node-drag-stop="onNodeDragStop" @node-click="onElementClick" + @edge-update="log" @load="onLoad" > diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue index ae51a4c3..adca97c4 100644 --- a/examples/Overview/Overview.vue +++ b/examples/Overview/Overview.vue @@ -143,7 +143,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov :snap-grid="snapGrid" @element-click="onElementClick" @elements-remove="onElementsRemove" - @eonnect="onConnect" + @connect="onConnect" @pane-click="onPaneClick" @pane-scroll="onPaneScroll" @pane-contex-menu="onPaneContextMenu" @@ -158,6 +158,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov @selection-change="onSelectionChange" @move-end="onMoveEnd" @load="onLoad" + @edge-update="onEdgeMouseMove" @edge-context-menu="onEdgeContextMenu" @edge-mouse-enter="onEdgeMouseEnter" @edge-mouse-move="onEdgeMouseMove" diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue index 94707361..032472b3 100644 --- a/src/components/Edges/EdgeWrapper.vue +++ b/src/components/Edges/EdgeWrapper.vue @@ -10,6 +10,7 @@ interface EdgeWrapper { markerEndId?: string edgeUpdaterRadius?: number selectable?: boolean + updatable?: boolean dimensions: Dimensions transform: Transform } @@ -192,7 +193,12 @@ export default { }" /> - + - + ({ paneScroll: createEventHook(), paneClick: createEventHook(), paneContextMenu: createEventHook(), - edgeUpdate: createEventHook(), edgeContextMenu: createEventHook(), edgeMouseEnter: createEventHook(), edgeMouseMove: createEventHook(), @@ -37,6 +36,7 @@ export const createHooks = (): FlowHooks => ({ edgeDoubleClick: createEventHook(), edgeClick: createEventHook(), edgeUpdateStart: createEventHook(), + edgeUpdate: createEventHook(), edgeUpdateEnd: createEventHook(), }) diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue index a296b215..23227d1a 100644 --- a/src/container/EdgeRenderer/EdgeRenderer.vue +++ b/src/container/EdgeRenderer/EdgeRenderer.vue @@ -34,12 +34,14 @@ interface EdgeRendererProps { connectionPosition?: XYPosition connectionMode: ConnectionMode nodesConnectable?: boolean + edgesUpdatable?: boolean } const props = withDefaults(defineProps(), { arrowHeadColor: '#b1b1b7', connectionLineType: ConnectionLineType.Bezier, edgeUpdaterRadius: 10, + handleEdgeUpdate: false, }) const getType = (type?: string) => { @@ -85,6 +87,7 @@ export default { :edge="edge" :component="getType(edge.type)" :selectable="props.elementsSelectable" + :updatable="typeof edge.updatable === 'undefined' ? props.edgesUpdatable : edge.updatable" :edge-updater-radius="props.edgeUpdaterRadius" :dimensions="props.dimensions" :transform="props.transform" diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index 78365da9..cd75676a 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/src/container/VueFlow/VueFlow.vue @@ -37,6 +37,7 @@ interface FlowProps extends FlowOptions { snapToGrid?: boolean snapGrid?: [number, number] onlyRenderVisibleElements?: boolean + edgesUpdatable?: boolean nodesDraggable?: boolean nodesConnectable?: boolean elementsSelectable?: boolean @@ -61,8 +62,6 @@ interface FlowProps extends FlowOptions { loading?: Loading } -const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue']) - const props = withDefaults(defineProps(), { modelValue: () => [], connectionMode: ConnectionMode.Loose, @@ -74,6 +73,7 @@ const props = withDefaults(defineProps(), { snapToGrid: false, snapGrid: () => [15, 15], onlyRenderVisibleElements: false, + edgesUpdatable: false, nodesConnectable: true, nodesDraggable: true, elementsSelectable: true, @@ -102,6 +102,7 @@ const props = withDefaults(defineProps(), { edgeUpdaterRadius: 10, loading: false, }) +const emit = defineEmits([...Object.keys(createHooks()).filter((key) => key !== 'edgeUpdate'), 'update:modelValue']) const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id) const elements = useVModel(props, 'modelValue', emit) const options = Object.assign({}, store.$state, props) @@ -117,21 +118,23 @@ const { pause: pauseModel, resume: resumeModel } = pausableWatch( ) const { pause, resume } = pausableWatch(elements, async (val) => await store.setElements(val), { flush: 'post' }) -until(() => store.isReady).toBe(true).then(() => { - watch( - () => store.elements, - (val) => { - pause() - pauseModel() - elements.value = val - setTimeout(() => { - resume() - resumeModel() - }, 1) - }, - { flush: 'post', deep: true }, - ) -}) +until(() => store.isReady) + .toBe(true) + .then(() => { + watch( + () => store.elements, + (val) => { + pause() + pauseModel() + elements.value = val + setTimeout(() => { + resume() + resumeModel() + }, 1) + }, + { flush: 'post', deep: true }, + ) + }) const transitionName = computed(() => { let name = '' @@ -144,11 +147,7 @@ const transitionName = computed(() => { onBeforeUnmount(() => store?.$dispose()) - +