From a3f27fd901b02ab54fe6dae84ee516789cad5489 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 24 Apr 2023 13:08:35 +0200
Subject: [PATCH] fix(node-resizer): hide resizer when `isVisible` is false

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../src/NodeResizer/NodeResizerExample.vue    |  5 ++
 .../src/NodeResizer/ResizableNodeSelected.vue | 14 ++++
 packages/node-resizer/src/NodeResizer.vue     | 76 ++++++++++---------
 3 files changed, 58 insertions(+), 37 deletions(-)
 create mode 100644 examples/vite/src/NodeResizer/ResizableNodeSelected.vue

diff --git a/examples/vite/src/NodeResizer/NodeResizerExample.vue b/examples/vite/src/NodeResizer/NodeResizerExample.vue
index eb2235db..8138ac79 100644
--- a/examples/vite/src/NodeResizer/NodeResizerExample.vue
+++ b/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>
diff --git a/examples/vite/src/NodeResizer/ResizableNodeSelected.vue b/examples/vite/src/NodeResizer/ResizableNodeSelected.vue
new file mode 100644
index 00000000..85a2bdc9
--- /dev/null
+++ b/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>
diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue
index 6aa03d2b..ae547410 100644
--- a/packages/node-resizer/src/NodeResizer.vue
+++ b/packages/node-resizer/src/NodeResizer.vue
@@ -28,42 +28,44 @@ export default {
 </script>
 
 <template>
-  <ResizeControl
-    v-for="c of lineControls"
-    :key="c"
-    :class="lineClassName"
-    :style="lineStyle"
-    :node-id="nodeId"
-    :position="c"
-    :variant="ResizeControlVariant.Line"
-    :keep-aspect-ratio="keepAspectRatio"
-    :color="color"
-    :min-width="minWidth"
-    :min-height="minHeight"
-    :max-width="maxWidth"
-    :max-height="maxHeight"
-    :should-resize="shouldResize"
-    @resize-start="emits('resizeStart', $event)"
-    @resize="emits('resize', $event)"
-    @resize-end="emits('resizeEnd', $event)"
-  />
+  <template v-if="isVisible">
+    <ResizeControl
+      v-for="c of lineControls"
+      :key="c"
+      :class="lineClassName"
+      :style="lineStyle"
+      :node-id="nodeId"
+      :position="c"
+      :variant="ResizeControlVariant.Line"
+      :keep-aspect-ratio="keepAspectRatio"
+      :color="color"
+      :min-width="minWidth"
+      :min-height="minHeight"
+      :max-width="maxWidth"
+      :max-height="maxHeight"
+      :should-resize="shouldResize"
+      @resize-start="emits('resizeStart', $event)"
+      @resize="emits('resize', $event)"
+      @resize-end="emits('resizeEnd', $event)"
+    />
 
-  <ResizeControl
-    v-for="c of handleControls"
-    :key="c"
-    :class="lineClassName"
-    :style="lineStyle"
-    :node-id="nodeId"
-    :position="c"
-    :color="color"
-    :min-width="minWidth"
-    :min-height="minHeight"
-    :max-width="maxWidth"
-    :max-height="maxHeight"
-    :should-resize="shouldResize"
-    :keep-aspect-ratio="keepAspectRatio"
-    @resize-start="emits('resizeStart', $event)"
-    @resize="emits('resize', $event)"
-    @resize-end="emits('resizeEnd', $event)"
-  />
+    <ResizeControl
+      v-for="c of handleControls"
+      :key="c"
+      :class="lineClassName"
+      :style="lineStyle"
+      :node-id="nodeId"
+      :position="c"
+      :color="color"
+      :min-width="minWidth"
+      :min-height="minHeight"
+      :max-width="maxWidth"
+      :max-height="maxHeight"
+      :should-resize="shouldResize"
+      :keep-aspect-ratio="keepAspectRatio"
+      @resize-start="emits('resizeStart', $event)"
+      @resize="emits('resize', $event)"
+      @resize-end="emits('resizeEnd', $event)"
+    />
+  </template>
 </template>