alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-04-26 10:15:39 +02:00
committed by Braks
parent 980916d193
commit a3f27fd901
3 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite/src/NodeResizer/NodeResizerExample.vue
+5
View File
@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
import ResizableNode from './ResizableNode.vue' import ResizableNode from './ResizableNode.vue'
import ResizableNodeSelected from './ResizableNodeSelected.vue'
const elements = ref([ const elements = ref([
{ {
@@ -39,5 +40,9 @@ const elements = ref([
<template #node-resizable="resizableNodeProps"> <template #node-resizable="resizableNodeProps">
<ResizableNode :label="resizableNodeProps.label" /> <ResizableNode :label="resizableNodeProps.label" />
</template> </template>
<template #node-resizableSelected="resizableNodeProps">
<ResizableNodeSelected :label="resizableNodeProps.label" :selected="resizableNodeProps.selected" />
</template>
</VueFlow> </VueFlow>
</template> </template>
examples/vite/src/NodeResizer/ResizableNodeSelected.vue
+14
View File
@@ -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
+39 -37
View File
@@ -28,42 +28,44 @@ export default {
</script> </script>
<template> <template>
<ResizeControl <template v-if="isVisible">
v-for="c of lineControls" <ResizeControl
:key="c" v-for="c of lineControls"
:class="lineClassName" :key="c"
:style="lineStyle" :class="lineClassName"
:node-id="nodeId" :style="lineStyle"
:position="c" :node-id="nodeId"
:variant="ResizeControlVariant.Line" :position="c"
:keep-aspect-ratio="keepAspectRatio" :variant="ResizeControlVariant.Line"
:color="color" :keep-aspect-ratio="keepAspectRatio"
:min-width="minWidth" :color="color"
:min-height="minHeight" :min-width="minWidth"
:max-width="maxWidth" :min-height="minHeight"
:max-height="maxHeight" :max-width="maxWidth"
:should-resize="shouldResize" :max-height="maxHeight"
@resize-start="emits('resizeStart', $event)" :should-resize="shouldResize"
@resize="emits('resize', $event)" @resize-start="emits('resizeStart', $event)"
@resize-end="emits('resizeEnd', $event)" @resize="emits('resize', $event)"
/> @resize-end="emits('resizeEnd', $event)"
/>
<ResizeControl <ResizeControl
v-for="c of handleControls" v-for="c of handleControls"
:key="c" :key="c"
:class="lineClassName" :class="lineClassName"
:style="lineStyle" :style="lineStyle"
:node-id="nodeId" :node-id="nodeId"
:position="c" :position="c"
:color="color" :color="color"
:min-width="minWidth" :min-width="minWidth"
:min-height="minHeight" :min-height="minHeight"
:max-width="maxWidth" :max-width="maxWidth"
:max-height="maxHeight" :max-height="maxHeight"
:should-resize="shouldResize" :should-resize="shouldResize"
:keep-aspect-ratio="keepAspectRatio" :keep-aspect-ratio="keepAspectRatio"
@resize-start="emits('resizeStart', $event)" @resize-start="emits('resizeStart', $event)"
@resize="emits('resize', $event)" @resize="emits('resize', $event)"
@resize-end="emits('resizeEnd', $event)" @resize-end="emits('resizeEnd', $event)"
/> />
</template>
</template> </template>