-
-
Notifications
You must be signed in to change notification settings - Fork 209
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update: Flow instance provides update node internals func
* Rename onLoadParams to FlowInstance * Pass update node internals to instance
- Loading branch information
1 parent
cd32f14
commit babcbd0
Showing
23 changed files
with
149 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<script lang="ts" setup> | ||
import { CSSProperties } from 'vue' | ||
import { Handle, Position, NodeProps } from '~/index' | ||
interface CustomNodeProps extends NodeProps { | ||
data: any | ||
} | ||
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' } | ||
const props = defineProps<CustomNodeProps>() | ||
</script> | ||
<template> | ||
<div :style="nodeStyles"> | ||
<Handle type="target" :position="Position.Left" /> | ||
<div>output handle count: {{ props.data.handleCount }}</div> | ||
<Handle | ||
v-for="i of props.data.handleCount" | ||
:id="`handle-${i}`" | ||
:key="`handle-${i}`" | ||
type="source" | ||
:position="Position.Right" | ||
:style="{ top: 10 * i + props.data.handlePosition * 10 }" | ||
/> | ||
</div> | ||
</template> |
77 changes: 77 additions & 0 deletions
77
examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
<script lang="ts" setup> | ||
import { CSSProperties } from 'vue' | ||
import CustomNode from './CustomNode.vue' | ||
import Flow, { | ||
NodeType, | ||
addEdge, | ||
useZoomPanHelper, | ||
Node, | ||
Elements, | ||
Connection, | ||
Edge, | ||
ElementId, | ||
Position, | ||
isEdge, | ||
FlowInstance, | ||
} from '~/index' | ||
const initialHandleCount = 1 | ||
const initialElements: Elements = [ | ||
{ | ||
id: '1', | ||
type: 'custom', | ||
data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 }, | ||
position: { x: 250, y: 5 }, | ||
}, | ||
] as Elements | ||
const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 } | ||
const nodeTypes: Record<string, NodeType> = { | ||
custom: CustomNode as NodeType, | ||
} | ||
let id = 5 | ||
const getId = (): ElementId => `${id++}` | ||
const elements = ref<Elements>(initialElements) | ||
const flowInstance = ref<FlowInstance>() | ||
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value)) | ||
const { project } = useZoomPanHelper() | ||
const onPaneClick = (evt: MouseEvent) => | ||
(elements.value = elements.value.concat({ | ||
id: getId(), | ||
position: project({ x: evt.clientX, y: evt.clientY - 40 }), | ||
data: { label: 'new node' }, | ||
targetPosition: Position.Left, | ||
sourcePosition: Position.Right, | ||
} as Node)) | ||
const toggleHandleCount = () => | ||
(elements.value = elements.value.map((el) => { | ||
if (isEdge(el)) { | ||
return el | ||
} | ||
return { ...el, data: { ...el.data, handleCount: el.data?.handleCount === 1 ? 2 : 1 } } | ||
})) | ||
const toggleHandlePosition = () => | ||
(elements.value = elements.value.map((el) => { | ||
if (isEdge(el)) return el | ||
return { ...el, data: { ...el.data, handlePosition: el.data?.handlePosition === 0 ? 1 : 0 } } | ||
})) | ||
const onLoad = (instance: FlowInstance) => (flowInstance.value = instance) | ||
</script> | ||
<template> | ||
<Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad"> | ||
<div :style="buttonWrapperStyles"> | ||
<button @click="toggleHandleCount">toggle handle count</button> | ||
<button @click="toggleHandlePosition">toggle handle position</button> | ||
<button @click="() => flowInstance.updateNodeInternals('1')">update node internals</button> | ||
</div> | ||
</Flow> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,10 @@ | ||
import { ElementId, UpdateNodeInternals } from '~/types' | ||
import useStore from '~/composables/useStore' | ||
import { ElementId, FlowStore, UpdateNodeInternals } from '~/types' | ||
|
||
export default (): UpdateNodeInternals => { | ||
const store = useStore() | ||
|
||
return (id: ElementId) => { | ||
export default (store: FlowStore): UpdateNodeInternals => | ||
(id: ElementId) => { | ||
const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`) | ||
|
||
if (nodeElement) { | ||
store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]) | ||
store.updateNodeDimensions({ id, nodeElement, forceUpdate: true }) | ||
} | ||
} | ||
} |
Oops, something went wrong.