chore(core): revert edge renderer & wrapper

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -1,18 +1,21 @@
 import EdgeAnchor from './EdgeAnchor'
-import type { Connection, EdgeComponent, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
+import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
 import { ConnectionMode, Position } from '~/types'
 
 interface Props {
   id: string
   type: EdgeComponent | Function | Object | false
   name: string
+  selectable?: boolean
+  focusable?: boolean
+  updatable?: EdgeUpdatable
   edge: GraphEdge
 }
 
 const EdgeWrapper = defineComponent({
   name: 'Edge',
   compatConfig: { MODE: 3 },
-  props: ['name', 'type', 'id', 'edge'],
+  props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
   setup(props: Props) {
     const {
       id: vueFlowId,
@@ -26,9 +29,6 @@ const EdgeWrapper = defineComponent({
       removeSelectedEdges,
       findEdge,
       findNode,
-      edgesUpdatable,
-      edgesFocusable,
-      elementsSelectable,
     } = useVueFlow()
 
     const hooks = useEdgeHooks(props.edge, emits)
@@ -52,12 +52,6 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
-    const selectable = $computed(() => (typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable))
-
-    const updatable = $computed(() => (typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable))
-
-    const focusable = $computed(() => (typeof edge.focusable === 'undefined' ? edgesFocusable : edge.focusable))
-
     const sourceNode = $computed(() => findNode(edge.source))
 
     const targetNode = $computed(() => findNode(edge.target))
@@ -124,7 +118,7 @@ const EdgeWrapper = defineComponent({
               updating: mouseOver,
               selected: edge.selected,
               animated: edge.animated,
-              inactive: !selectable,
+              inactive: !props.selectable,
             },
           ],
           'onClick': onEdgeClick,
@@ -133,11 +127,11 @@ const EdgeWrapper = defineComponent({
           'onMouseenter': onEdgeMouseEnter,
           'onMousemove': onEdgeMouseMove,
           'onMouseleave': onEdgeMouseLeave,
-          'onKeyDown': focusable ? onKeyDown : undefined,
+          'onKeyDown': props.focusable ? onKeyDown : undefined,
-          'tabIndex': focusable ? 0 : undefined,
+          'tabIndex': props.focusable ? 0 : undefined,
           'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
-          'aria-describedby': focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
+          'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
-          'role': focusable ? 'button' : undefined,
+          'role': props.focusable ? 'button' : undefined,
         },
         [
           updating
@@ -149,7 +143,7 @@ const EdgeWrapper = defineComponent({
                 source: edge.source,
                 target: edge.target,
                 type: edge.type,
-                updatable,
+                updatable: props.updatable,
                 selected: edge.selected,
                 animated: edge.animated,
                 label: edge.label,
@@ -175,7 +169,7 @@ const EdgeWrapper = defineComponent({
               }),
 
           [
-            updatable === 'source' || updatable === true
+            props.updatable === 'source' || props.updatable === true
               ? [
                   h(
                     'g',
@@ -194,7 +188,7 @@ const EdgeWrapper = defineComponent({
                   ),
                 ]
               : null,
-            updatable === 'target' || updatable === true
+            props.updatable === 'target' || props.updatable === true
               ? [
                   h(
                     'g',
@@ -253,7 +247,7 @@ const EdgeWrapper = defineComponent({
 
     function onEdgeClick(event: MouseEvent) {
       const data = { event, edge }
-      if (selectable) {
+      if (props.selectable) {
         nodesSelectionActive.value = false
 
         addSelectedEdges([edge])
@@ -290,7 +284,7 @@ const EdgeWrapper = defineComponent({
     }
 
     function onKeyDown(event: KeyboardEvent) {
-      if (elementSelectionKeys.includes(event.key) && selectable) {
+      if (elementSelectionKeys.includes(event.key) && props.selectable) {
         const unselect = event.key === 'Escape'
 
         if (unselect) {

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import EdgeWrapper from '../../components/Edges/EdgeWrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import type { EdgeComponent, GraphEdge } from '../../types'
+import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 const slots = inject(Slots)
@@ -9,6 +9,9 @@ const slots = inject(Slots)
 const {
   connectionStartHandle,
   nodesConnectable,
+  edgesUpdatable,
+  edgesFocusable,
+  elementsSelectable,
   getSelectedNodes,
   findNode,
   getEdges,
@@ -50,6 +53,10 @@ onBeforeUnmount(() => {
   stop?.()
 })
 
+const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
+const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
+const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
+
 function getType(type?: string, template?: GraphEdge['template']) {
   const name = type || 'default'
   let edgeType = template ?? getEdgeTypes[name]
@@ -93,6 +100,9 @@ export default {
         :edge="edge"
         :type="getType(edge.type, edge.template)"
         :name="edge.type || 'default'"
+        :selectable="selectable(edge.selectable)"
+        :updatable="updatable(edge.updatable)"
+        :focusable="focusable(edge.focusable)"
       />
     </g>
   </svg>