fix: edge anchor

src/components/Edges/Edge.vue

@@ -87,7 +87,9 @@ const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
 
 const updating = ref<boolean>(false)
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
+
 const onEdgeUpdaterMouseOut = () => (updating.value = false)
+
 const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof getEdgePositions>) => {
   return store.onlyRenderVisibleElements
     ? isEdgeVisible({
@@ -99,14 +101,14 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
       })
     : true
 }
+
 const edgePos = computed(() =>
   getEdgePositions(props.nodes.sourceNode, sourceHandle, sourcePosition, props.nodes.targetNode, targetHandle, targetPosition),
 )
-const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
 </script>
 <template>
   <g
-    v-if="visible"
+    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'revue-flow__edge',
       `revue-flow__edge-${props.type.name || 'default'}`,
@@ -189,9 +191,9 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
     </g>
     <g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
       <EdgeAnchor
-        :position="sourcePosition"
-        :center-x="edgePos.sourceX"
-        :center-y="edgePos.sourceY"
+        :position="targetPosition"
+        :center-x="edgePos.targetX"
+        :center-y="edgePos.targetY"
         :radius="props.edgeUpdaterRadius"
       />
     </g>

src/components/NodesSelection/NodesSelection.vue

@@ -29,16 +29,12 @@ const selectedNodes = computed(() =>
     : [],
 )
 
-const style = computed(() => ({
-  transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
-}))
-
-const innerStyle = computed(() => ({
+const innerStyle = {
   width: `${store.selectedNodesBbox.width}px`,
   height: `${store.selectedNodesBbox.height}px`,
   top: `${store.selectedNodesBbox.y}px`,
   left: `${store.selectedNodesBbox.x}px`,
-}))
+}
 
 const onStart: DraggableEventListener = ({ event }) => {
   hooks.selectionDragStart.trigger({ event, nodes: selectedNodes.value })
@@ -73,7 +69,12 @@ const onContextMenu = (event: MouseEvent) => {
 }
 </script>
 <template>
-  <div class="revue-flow__nodesselection" :style="style">
+  <div
+    class="revue-flow__nodesselection"
+    :style="{
+      transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
+    }"
+  >
     <Draggable
       :scale="store.transform[2]"
       :grid="store.snapToGrid ? store.snapGrid : undefined"

src/components/UserSelection/UserSelection.vue

@@ -8,21 +8,15 @@ const el = templateRef('user-selection', null)
 
 const onMouseDown = (event: MouseEvent) => {
   const mousePos = getMousePosition(event)
-  if (!mousePos) {
-    return
-  }
+  if (!mousePos) return
 
   store.setUserSelection(mousePos)
 }
 
 const onMouseMove = (event: MouseEvent) => {
-  if (!store.selectionActive) {
-    return
-  }
+  if (!store.selectionActive) return
   const mousePos = getMousePosition(event)
-  if (!mousePos) {
-    return
-  }
+  if (!mousePos) return
 
   store.updateUserSelection(mousePos)
 }
@@ -41,17 +35,15 @@ useEventListener(el, 'mousemove', onMouseMove)
 useEventListener(el, 'click', onMouseUp)
 useEventListener(el, 'mouseup', onMouseUp)
 useEventListener(el, 'mouseleave', onMouseLeave)
-
-const userSelectionRect = computed(() => store.userSelectionRect)
 </script>
 <template>
   <div ref="user-selection" class="revue-flow__selectionpane">
     <SelectionRect
-      v-if="userSelectionRect.draw"
-      :width="userSelectionRect.width"
-      :height="userSelectionRect.height"
-      :x="userSelectionRect.x"
-      :y="userSelectionRect.y"
+      v-if="store.userSelectionRect.draw"
+      :width="store.userSelectionRect.width"
+      :height="store.userSelectionRect.height"
+      :x="store.userSelectionRect.x"
+      :y="store.userSelectionRect.y"
     />
   </div>
 </template>