fix(node-resizer): hide resizer when isVisible is false

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

examples/vite/src/NodeResizer/NodeResizerExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow } from '@vue-flow/core'
 import ResizableNode from './ResizableNode.vue'
+import ResizableNodeSelected from './ResizableNodeSelected.vue'
 
 const elements = ref([
   {
@@ -39,5 +40,9 @@ const elements = ref([
     <template #node-resizable="resizableNodeProps">
       <ResizableNode :label="resizableNodeProps.label" />
     </template>
+
+    <template #node-resizableSelected="resizableNodeProps">
+      <ResizableNodeSelected :label="resizableNodeProps.label" :selected="resizableNodeProps.selected" />
+    </template>
   </VueFlow>
 </template>

examples/vite/src/NodeResizer/ResizableNodeSelected.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { NodeResizer } from '@vue-flow/node-resizer'
+
+defineProps(['label', 'selected'])
+</script>
+
+<template>
+  <NodeResizer color="#ff0071" :is-visible="selected" :min-width="100" :min-height="30" />
+
+  <Handle type="target" :position="Position.Left" />
+  <div style="padding: 10px">{{ label }}</div>
+  <Handle type="source" :position="Position.Right" />
+</template>

packages/node-resizer/src/NodeResizer.vue

@@ -28,6 +28,7 @@ export default {
 </script>
 
 <template>
+  <template v-if="isVisible">
     <ResizeControl
       v-for="c of lineControls"
       :key="c"
@@ -67,3 +68,4 @@ export default {
       @resize-end="emits('resizeEnd', $event)"
     />
   </template>
+</template>