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

@@ -65,6 +65,7 @@ const toggleclasss = () => {
     @connect="onConnect"
     @node-drag-stop="onNodeDragStop"
     @node-click="onElementClick"
+    @edge-update="log"
     @load="onLoad"
   >
     <MiniMap />

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"

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 {
         }"
       />
     </slot>
-    <g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
+    <g
+      v-if="props.updatable"
+      @mousedown="onEdgeUpdaterSourceMouseDown"
+      @mouseenter="onEdgeUpdaterMouseEnter"
+      @mouseout="onEdgeUpdaterMouseOut"
+    >
       <EdgeAnchor
         :position="sourcePosition"
         :center-x="edgePos.sourceX"
@@ -200,7 +206,12 @@ export default {
         :radius="props.edgeUpdaterRadius"
       />
     </g>
-    <g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
+    <g
+      v-if="props.updatable"
+      @mousedown="onEdgeUpdaterTargetMouseDown"
+      @mouseenter="onEdgeUpdaterMouseEnter"
+      @mouseout="onEdgeUpdaterMouseOut"
+    >
       <EdgeAnchor
         :position="targetPosition"
         :center-x="edgePos.targetX"

src/composables/useHooks.ts

@@ -29,7 +29,6 @@ export const createHooks = (): FlowHooks => ({
   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(),
 })
 

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -34,12 +34,14 @@ interface EdgeRendererProps {
   connectionPosition?: XYPosition
   connectionMode: ConnectionMode
   nodesConnectable?: boolean
+  edgesUpdatable?: boolean
 }
 
 const props = withDefaults(defineProps<EdgeRendererProps>(), {
   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"

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<FlowProps>(), {
   modelValue: () => [],
   connectionMode: ConnectionMode.Loose,
@@ -74,6 +73,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   snapToGrid: false,
   snapGrid: () => [15, 15],
   onlyRenderVisibleElements: false,
+  edgesUpdatable: false,
   nodesConnectable: true,
   nodesDraggable: true,
   elementsSelectable: true,
@@ -102,6 +102,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   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())
 </script>
-<script lang="ts">
-export default {
-  name: 'VueFlow'
-}
-</script>
+
 <template>
   <div class="vue-flow">
     <Transition :key="`vue-flow-transition-${store.$id}`" :name="transitionName">
@@ -222,6 +221,7 @@ export default {
                     :arrow-head-color="store.arrowHeadColor"
                     :marker-end-id="store.markerEndId"
                     :only-render-visible-elements="store.onlyRenderVisibleElements"
+                    :edges-updatable="store.edgesUpdatable"
                   >
                     <template
                       v-for="edgeName of Object.keys(store.getEdgeTypes)"

src/store/stateStore.ts

@@ -201,6 +201,7 @@ export default (id: string, preloadedState: FlowState) => {
         if (typeof state.elementsSelectable !== 'undefined') this.elementsSelectable = state.elementsSelectable
         if (typeof state.onlyRenderVisibleElements !== 'undefined')
           this.onlyRenderVisibleElements = state.onlyRenderVisibleElements
+        if (typeof state.edgesUpdatable !== 'undefined') this.edgesUpdatable = state.edgesUpdatable
         if (typeof state.nodesConnectable !== 'undefined') this.nodesConnectable = state.nodesConnectable
         if (typeof state.nodesDraggable !== 'undefined') this.nodesDraggable = state.nodesDraggable
         if (typeof state.arrowHeadColor !== 'undefined') this.arrowHeadColor = state.arrowHeadColor

src/types/edge.ts

@@ -31,6 +31,7 @@ export interface Edge<T = any> {
   data?: T
   class?: string
   isHidden?: boolean
+  updatable?: boolean
 }
 
 export interface GraphEdge<T = any> extends Edge<T> {

src/types/flow.ts

@@ -126,6 +126,7 @@ export interface FlowOptions {
   snapToGrid?: boolean
   snapGrid?: [number, number]
   onlyRenderVisibleElements?: boolean
+  edgesUpdatable?: boolean
   nodesDraggable?: boolean
   nodesConnectable?: boolean
   elementsSelectable?: boolean

src/types/hooks.ts

@@ -36,7 +36,6 @@ export interface FlowEvents {
   paneScroll: WheelEvent | undefined
   paneClick: MouseEvent
   paneContextMenu: MouseEvent
-  edgeUpdate: { edge: GraphEdge; connection: Connection }
   edgeContextMenu: { event: MouseEvent; edge: GraphEdge }
   edgeMouseEnter: { event: MouseEvent; edge: GraphEdge }
   edgeMouseMove: { event: MouseEvent; edge: GraphEdge }
@@ -44,6 +43,7 @@ export interface FlowEvents {
   edgeDoubleClick: { event: MouseEvent; edge: GraphEdge }
   edgeClick: { event: MouseEvent; edge: GraphEdge }
   edgeUpdateStart: { event: MouseEvent; edge: GraphEdge }
+  edgeUpdate: { edge: GraphEdge; connection: Connection }
   edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge }
 }
 

src/types/store.ts

@@ -58,6 +58,7 @@ export interface FlowState extends Omit<FlowOptions, 'elements'> {
   snapToGrid: boolean
   snapGrid: SnapGrid
 
+  edgesUpdatable: boolean
   nodesDraggable: boolean
   nodesConnectable: boolean
   elementsSelectable: boolean

src/utils/store.ts

@@ -74,6 +74,7 @@ export const initialState = (): FlowState => ({
   snapGrid: [15, 15],
   snapToGrid: false,
 
+  edgesUpdatable: false,
   nodesDraggable: true,
   nodesConnectable: true,
   elementsSelectable: true,