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-24 13:08:35 +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

5
examples/vite/src/NodeResizer/NodeResizerExample.vue
View File

@@ -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>

14
examples/vite/src/NodeResizer/ResizableNodeSelected.vue Normal file
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>