refactor(core): rename core pkg dir to core
This commit is contained in:
braks
@@ -0,0 +1,246 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CSSProperties, EffectScope } from 'vue'
|
||||
import EdgeWrapper from '../../components/Edges/Wrapper'
|
||||
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
|
||||
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
|
||||
import { connectionExists, groupEdgesByZLevel } from '../../utils'
|
||||
import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
|
||||
import { Slots } from '../../context'
|
||||
import MarkerDefinitions from './MarkerDefinitions.vue'
|
||||
|
||||
const slots = inject(Slots)
|
||||
|
||||
const {
|
||||
emits,
|
||||
connectionMode,
|
||||
edgeUpdaterRadius,
|
||||
onPaneReady,
|
||||
connectionStartHandle,
|
||||
nodesConnectable,
|
||||
edgesUpdatable,
|
||||
elementsSelectable,
|
||||
getSelectedNodes,
|
||||
nodesSelectionActive,
|
||||
getNode,
|
||||
getNodes,
|
||||
getEdges,
|
||||
getEdgeTypes,
|
||||
addSelectedEdges,
|
||||
noPanClassName,
|
||||
elevateEdgesOnSelect,
|
||||
} = $(useVueFlow())
|
||||
|
||||
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
|
||||
|
||||
const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
|
||||
|
||||
const updating = ref<string>()
|
||||
|
||||
const sourceNode = $(
|
||||
controlledComputed(
|
||||
() => connectionStartHandle?.nodeId,
|
||||
() => {
|
||||
if (connectionStartHandle?.nodeId) return getNode(connectionStartHandle.nodeId)
|
||||
return false
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
const connectionLineVisible = $(
|
||||
controlledComputed(
|
||||
() => connectionStartHandle?.nodeId,
|
||||
() =>
|
||||
!!(
|
||||
sourceNode &&
|
||||
(typeof sourceNode.connectable === 'undefined' ? nodesConnectable : sourceNode.connectable) &&
|
||||
connectionStartHandle?.nodeId &&
|
||||
connectionStartHandle?.type
|
||||
),
|
||||
),
|
||||
)
|
||||
|
||||
const hooks = $ref<Record<string, ReturnType<typeof useEdgeHooks>>>({})
|
||||
|
||||
let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
|
||||
|
||||
let scope: EffectScope | null = effectScope()
|
||||
|
||||
onPaneReady(() => {
|
||||
if (!scope) scope = effectScope()
|
||||
|
||||
scope.run(() => {
|
||||
watch(
|
||||
[$$(getSelectedNodes), $$(getEdges)],
|
||||
() => {
|
||||
getEdges.forEach((edge) => {
|
||||
if (hooks[edge.id]) return
|
||||
hooks[edge.id] = useEdgeHooks(edge, emits)
|
||||
})
|
||||
|
||||
if (elevateEdgesOnSelect) {
|
||||
nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
|
||||
} else {
|
||||
groups = [
|
||||
{
|
||||
isMaxLevel: true,
|
||||
edges: getEdges,
|
||||
level: 0,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scope?.stop()
|
||||
scope = null
|
||||
})
|
||||
|
||||
const getType = (type?: string, template?: GraphEdge['template']) => {
|
||||
const name = type || 'default'
|
||||
let edgeType = template ?? getEdgeTypes[name]
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
if (typeof edgeType === 'string') {
|
||||
if (instance) {
|
||||
const components = Object.keys(instance.appContext.components)
|
||||
if (components && components.includes(name)) {
|
||||
edgeType = resolveComponent(name, false) as EdgeComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
if (edgeType && typeof edgeType !== 'string') return edgeType
|
||||
|
||||
const slot = slots?.[`edge-${name}`]
|
||||
if (!slot?.({})) {
|
||||
console.warn(`[vueflow]: Edge type "${type}" not found and no edge-slot detected. Using fallback type "default".`)
|
||||
return false
|
||||
}
|
||||
|
||||
return slot
|
||||
}
|
||||
|
||||
const onEdgeClick = (event: MouseEvent, edge: GraphEdge) => {
|
||||
const data = { event, edge }
|
||||
if (selectable(edge.selectable)) {
|
||||
$$(nodesSelectionActive).value = false
|
||||
|
||||
addSelectedEdges([edge])
|
||||
}
|
||||
hooks[edge.id].emit.click(data)
|
||||
}
|
||||
|
||||
const onEdgeContextMenu = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.contextMenu({ event, edge })
|
||||
|
||||
const onDoubleClick = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.doubleClick({ event, edge })
|
||||
|
||||
const onEdgeMouseEnter = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseEnter({ event, edge })
|
||||
|
||||
const onEdgeMouseMove = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseMove({ event, edge })
|
||||
|
||||
const onEdgeMouseLeave = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseLeave({ event, edge })
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent, edge: GraphEdge) => {
|
||||
updating.value = edge.id
|
||||
handleEdgeUpdater(event, edge, true)
|
||||
}
|
||||
|
||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent, edge: GraphEdge) => {
|
||||
updating.value = edge.id
|
||||
handleEdgeUpdater(event, edge, false)
|
||||
}
|
||||
|
||||
const { onMouseDown } = useHandle()
|
||||
|
||||
const handleEdgeUpdater = (event: MouseEvent, edge: GraphEdge, isSourceHandle: boolean) => {
|
||||
const nodeId = isSourceHandle ? edge.target : edge.source
|
||||
const handleId = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
|
||||
|
||||
hooks[edge.id].emit.updateStart({ event, edge })
|
||||
|
||||
onMouseDown(
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
isSourceHandle,
|
||||
undefined,
|
||||
isSourceHandle ? 'target' : 'source',
|
||||
(connection) => {
|
||||
if (!connectionExists(connection, getEdges)) hooks[edge.id].emit.update({ edge, connection })
|
||||
},
|
||||
() => {
|
||||
hooks[edge.id].emit.updateEnd({ event, edge })
|
||||
updating.value = ''
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const getClass = (edge: GraphEdge) => {
|
||||
const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
|
||||
return [noPanClassName, extraClass]
|
||||
}
|
||||
|
||||
const getStyle = (edge: GraphEdge) => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Edges',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
|
||||
<MarkerDefinitions v-if="group.isMaxLevel" />
|
||||
<g>
|
||||
<EdgeWrapper
|
||||
v-for="edge of group.edges"
|
||||
:id="edge.id"
|
||||
:key="edge.id"
|
||||
:type="getType(edge.type, edge.template)"
|
||||
:name="edge.type || 'default'"
|
||||
:source="edge.source"
|
||||
:target="edge.target"
|
||||
:target-handle-id="edge.targetHandle"
|
||||
:source-handle-id="edge.sourceHandle"
|
||||
:source-node="getNode(edge.source)"
|
||||
:target-node="getNode(edge.target)"
|
||||
:label="edge.label"
|
||||
:data="edge.data"
|
||||
:events="{ ...edge.events, ...hooks[edge.id].on }"
|
||||
:animated="edge.animated"
|
||||
:selectable="selectable(edge.selectable)"
|
||||
:selected="edge.selected"
|
||||
:updatable="updatable(edge.updatable)"
|
||||
:updating="edge.id === updating"
|
||||
:label-style="edge.labelStyle"
|
||||
:label-show-bg="edge.labelShowBg"
|
||||
:label-bg-style="edge.labelBgStyle"
|
||||
:label-bg-padding="edge.labelBgPadding"
|
||||
:label-bg-border-radius="edge.labelBgBorderRadius"
|
||||
:connection-mode="connectionMode"
|
||||
:edge-updater-radius="edgeUpdaterRadius"
|
||||
:marker-end="edge.markerEnd"
|
||||
:marker-start="edge.markerStart"
|
||||
:style="getStyle(edge)"
|
||||
:class="getClass(edge)"
|
||||
@click="onEdgeClick($event, edge)"
|
||||
@dblclick="onDoubleClick($event, edge)"
|
||||
@contextmenu="onEdgeContextMenu($event, edge)"
|
||||
@mouseenter="onEdgeMouseEnter($event, edge)"
|
||||
@mousemove="onEdgeMouseMove($event, edge)"
|
||||
@mouseleave="onEdgeMouseLeave($event, edge)"
|
||||
@source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
|
||||
@target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
|
||||
<ConnectionLine :source-node="sourceNode" />
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts" setup>
|
||||
import { MarkerType } from '../../types/edge'
|
||||
import type { MarkerProps } from '../../types/edge'
|
||||
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
width = 12.5,
|
||||
height = 12.5,
|
||||
markerUnits = 'strokeWidth',
|
||||
orient = 'auto-start-reverse',
|
||||
strokeWidth = 1,
|
||||
color = 'none',
|
||||
} = defineProps<MarkerProps>()
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'MarkerType',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<marker
|
||||
:id="id"
|
||||
class="vue-flow__arrowhead"
|
||||
viewBox="-10 -10 20 20"
|
||||
refX="0"
|
||||
refY="0"
|
||||
:markerWidth="`${width}`"
|
||||
:markerHeight="`${height}`"
|
||||
:markerUnits="markerUnits"
|
||||
:orient="orient"
|
||||
>
|
||||
<polyline
|
||||
v-if="type === MarkerType.ArrowClosed"
|
||||
:stroke="color"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
:stroke-width="strokeWidth"
|
||||
:fill="color"
|
||||
points="-5,-4 0,0 -5,4 -5,-4"
|
||||
/>
|
||||
<polyline
|
||||
v-if="type === MarkerType.Arrow"
|
||||
:stroke="color"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
:stroke-width="strokeWidth"
|
||||
fill="none"
|
||||
points="-5,-4 0,0 -5,4"
|
||||
/>
|
||||
</marker>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVueFlow } from '../../composables'
|
||||
import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types/edge'
|
||||
import { getMarkerId } from '../../utils'
|
||||
import Marker from './Marker.vue'
|
||||
|
||||
const { edges, connectionLineOptions, defaultMarkerColor: defaultColor } = $(useVueFlow())
|
||||
|
||||
const markers = computed(() => {
|
||||
const ids: string[] = []
|
||||
const markers: MarkerProps[] = []
|
||||
|
||||
const createMarkers = (marker?: EdgeMarkerType) => {
|
||||
if (marker) {
|
||||
const markerId = getMarkerId(marker)
|
||||
if (!ids.includes(markerId)) {
|
||||
if (typeof marker === 'object') markers.push({ ...marker, id: markerId, color: marker.color || defaultColor })
|
||||
else markers.push({ id: markerId, color: defaultColor, type: marker as MarkerType })
|
||||
ids.push(markerId)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
;[connectionLineOptions.markerEnd, connectionLineOptions.markerStart].forEach(createMarkers)
|
||||
|
||||
edges.reduce<MarkerProps[]>((markers, edge) => {
|
||||
;[edge.markerStart, edge.markerEnd].forEach(createMarkers)
|
||||
return markers.sort((a, b) => a.id.localeCompare(b.id))
|
||||
}, markers)
|
||||
|
||||
return markers
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'MarkerDefinitions',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<defs>
|
||||
<Marker
|
||||
v-for="marker of markers"
|
||||
:id="marker.id"
|
||||
:key="marker.id"
|
||||
:type="marker.type"
|
||||
:color="marker.color"
|
||||
:width="marker.width"
|
||||
:height="marker.height"
|
||||
:markerUnits="marker.markerUnits"
|
||||
:stroke-width="marker.strokeWidth"
|
||||
:orient="marker.orient"
|
||||
/>
|
||||
</defs>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script lang="ts" setup>
|
||||
import { NodeWrapper } from '../../components'
|
||||
import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
|
||||
import { useVueFlow } from '../../composables'
|
||||
import { Slots } from '../../context'
|
||||
|
||||
const slots = inject(Slots)
|
||||
|
||||
const {
|
||||
nodesDraggable,
|
||||
elementsSelectable,
|
||||
nodesConnectable,
|
||||
noPanClassName,
|
||||
snapToGrid,
|
||||
snapGrid,
|
||||
getNode,
|
||||
getNodes,
|
||||
getNodeTypes,
|
||||
updateNodeDimensions,
|
||||
} = $(useVueFlow())
|
||||
|
||||
const draggable = (d?: boolean) => (typeof d === 'undefined' ? nodesDraggable : d)
|
||||
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
|
||||
const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
|
||||
|
||||
const resizeObserver = ref<ResizeObserver>()
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver.value = new ResizeObserver((entries) => {
|
||||
const updates = entries.map((entry: ResizeObserverEntry) => ({
|
||||
id: entry.target.getAttribute('data-id') as string,
|
||||
nodeElement: entry.target as HTMLDivElement,
|
||||
forceUpdate: true,
|
||||
}))
|
||||
|
||||
updateNodeDimensions(updates)
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => resizeObserver.value?.disconnect())
|
||||
|
||||
const getType = (type?: string, template?: GraphNode['template']) => {
|
||||
const name = type || 'default'
|
||||
let nodeType = template ?? getNodeTypes[name]
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
if (typeof nodeType === 'string') {
|
||||
if (instance) {
|
||||
const components = Object.keys(instance.appContext.components)
|
||||
if (components && components.includes(name)) {
|
||||
nodeType = resolveComponent(name, false) as NodeComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
if (typeof nodeType !== 'string') return nodeType
|
||||
|
||||
const slot = slots?.[`node-${name}`]
|
||||
if (!slot?.({})) {
|
||||
console.warn(`[vueflow]: Node type "${type}" not found and no node-slot detected. Using fallback type "default".`)
|
||||
return false
|
||||
}
|
||||
|
||||
return slot
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Nodes',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vue-flow__nodes vue-flow__container">
|
||||
<template v-if="resizeObserver">
|
||||
<NodeWrapper
|
||||
v-for="node of getNodes"
|
||||
:id="node.id"
|
||||
:key="node.id"
|
||||
:resize-observer="resizeObserver"
|
||||
:type="getType(node.type, node.template)"
|
||||
:name="node.type || 'default'"
|
||||
:draggable="draggable(node.draggable)"
|
||||
:selectable="selectable(node.selectable)"
|
||||
:connectable="connectable(node.connectable)"
|
||||
:node="node"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script lang="ts" setup>
|
||||
import type { GraphNode } from '../../types'
|
||||
import { useKeyPress, useVueFlow } from '../../composables'
|
||||
import { NodesSelection, UserSelection } from '../../components'
|
||||
|
||||
const {
|
||||
id,
|
||||
deleteKeyCode,
|
||||
selectionKeyCode,
|
||||
multiSelectionKeyCode,
|
||||
emits,
|
||||
nodesSelectionActive,
|
||||
userSelectionActive,
|
||||
multiSelectionActive,
|
||||
elementsSelectable,
|
||||
getNodes,
|
||||
getSelectedEdges,
|
||||
removeSelectedElements,
|
||||
removeNodes,
|
||||
removeEdges,
|
||||
} = useVueFlow()
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
emits.paneClick(event)
|
||||
nodesSelectionActive.value = false
|
||||
|
||||
removeSelectedElements()
|
||||
}
|
||||
|
||||
const onContextMenu = (event: MouseEvent) => emits.paneContextMenu(event)
|
||||
|
||||
const onWheel = (event: WheelEvent) => emits.paneScroll(event)
|
||||
|
||||
const onMouseEnter = (event: MouseEvent) => emits.paneMouseEnter(event)
|
||||
|
||||
const onMouseLeave = (event: MouseEvent) => emits.paneMouseLeave(event)
|
||||
|
||||
const onMouseMove = (event: MouseEvent) => emits.paneMouseMove(event)
|
||||
|
||||
useKeyPress(deleteKeyCode, (keyPressed) => {
|
||||
if (!keyPressed) return
|
||||
|
||||
const nodesToRemove = getNodes.value.reduce<GraphNode[]>((res, node) => {
|
||||
if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) {
|
||||
res.push(node)
|
||||
} else if (node.selected) {
|
||||
res.push(node)
|
||||
}
|
||||
|
||||
return res
|
||||
}, [])
|
||||
|
||||
if (nodesToRemove || getSelectedEdges.value) {
|
||||
if (getSelectedEdges.value.length > 0) {
|
||||
removeEdges(getSelectedEdges.value)
|
||||
}
|
||||
|
||||
if (nodesToRemove.length > 0) {
|
||||
removeNodes(nodesToRemove)
|
||||
}
|
||||
|
||||
nodesSelectionActive.value = false
|
||||
|
||||
removeSelectedElements()
|
||||
}
|
||||
})
|
||||
|
||||
useKeyPress(multiSelectionKeyCode, (keyPressed) => {
|
||||
multiSelectionActive.value = keyPressed
|
||||
})
|
||||
|
||||
const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => {
|
||||
if (userSelectionActive.value && keyPressed) return
|
||||
|
||||
userSelectionActive.value = keyPressed && elementsSelectable.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'SelectionPane',
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
|
||||
<NodesSelection v-if="nodesSelectionActive" :key="`nodes-selection-${id}`" />
|
||||
<div
|
||||
:key="`pane-${id}`"
|
||||
class="vue-flow__pane vue-flow__container"
|
||||
@click="onClick"
|
||||
@contextmenu="onContextMenu"
|
||||
@wheel="onWheel"
|
||||
@mouseenter="onMouseEnter"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseleave="onMouseLeave"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script lang="ts" setup>
|
||||
import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
|
||||
import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
|
||||
import { useVueFlow, useWindow } from '../../composables'
|
||||
import type { Dimensions } from '../../types'
|
||||
|
||||
const { id, viewport, dimensions, fitViewOnInit, emits, fitView, ...rest } = useVueFlow()
|
||||
|
||||
const untilDimensions = async (dim: Dimensions) => {
|
||||
// if ssr we can't wait for dimensions, they'll never really exist
|
||||
const window = useWindow()
|
||||
if ('screen' in window) {
|
||||
// wait until viewport dimensions has been established
|
||||
await until(dim).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
let ready = $ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
// wait until proper dimensions have been established, otherwise fitView will have wrong bounds when called at paneReady
|
||||
await untilDimensions(dimensions.value)
|
||||
|
||||
// hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
|
||||
ready = true
|
||||
|
||||
emits.paneReady({
|
||||
id,
|
||||
viewport,
|
||||
dimensions,
|
||||
fitViewOnInit,
|
||||
fitView,
|
||||
emits,
|
||||
...rest,
|
||||
})
|
||||
|
||||
fitViewOnInit?.value && fitView()
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Transform',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:key="`transform-${id}`"
|
||||
class="vue-flow__transformationpane vue-flow__container"
|
||||
:style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
|
||||
>
|
||||
<EdgeRenderer />
|
||||
<NodeRenderer />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
|
||||
import { zoom, zoomIdentity } from 'd3-zoom'
|
||||
import { pointer, select } from 'd3-selection'
|
||||
import type { ViewpaneTransform } from '../../types'
|
||||
import { PanOnScrollMode } from '../../types'
|
||||
import { useKeyPress, useVueFlow, useWindow } from '../../composables'
|
||||
import { clamp, clampPosition, getDimensions } from '../../utils'
|
||||
import SelectionPane from '../SelectionPane/SelectionPane.vue'
|
||||
import Transform from './Transform.vue'
|
||||
|
||||
const {
|
||||
id,
|
||||
minZoom,
|
||||
maxZoom,
|
||||
defaultZoom,
|
||||
defaultPosition,
|
||||
translateExtent,
|
||||
dimensions,
|
||||
zoomActivationKeyCode,
|
||||
selectionKeyCode,
|
||||
panOnScroll,
|
||||
panOnScrollMode,
|
||||
panOnScrollSpeed,
|
||||
panOnDrag,
|
||||
zoomOnDoubleClick,
|
||||
zoomOnPinch,
|
||||
zoomOnScroll,
|
||||
preventScrolling,
|
||||
noWheelClassName,
|
||||
noPanClassName,
|
||||
setState,
|
||||
emits,
|
||||
} = $(useVueFlow())
|
||||
|
||||
const viewportEl = templateRef<HTMLDivElement>('viewport', null)
|
||||
|
||||
let isZoomingOrPanning = $ref(false)
|
||||
|
||||
const viewChanged = (prevTransform: ViewpaneTransform, eventTransform: ZoomTransform): boolean =>
|
||||
(prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
|
||||
(prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
|
||||
(prevTransform.zoom !== eventTransform.k && !isNaN(eventTransform.k))
|
||||
|
||||
const eventToFlowTransform = (eventTransform: ZoomTransform): ViewpaneTransform => ({
|
||||
x: eventTransform.x,
|
||||
y: eventTransform.y,
|
||||
zoom: eventTransform.k,
|
||||
})
|
||||
|
||||
const isWrappedWithClass = (event: Event, className: string | undefined) => (event.target as Element).closest(`.${className}`)
|
||||
|
||||
const clampedZoom = clamp(defaultZoom, minZoom, maxZoom)
|
||||
|
||||
let transform = $ref({
|
||||
...clampPosition({ x: defaultPosition[0], y: defaultPosition[1] }, translateExtent),
|
||||
zoom: clampedZoom,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
useResizeObserver(viewportEl, () => {
|
||||
if (!viewportEl.value) return
|
||||
|
||||
const { width, height } = getDimensions(viewportEl.value)
|
||||
dimensions.width = width
|
||||
dimensions.height = height
|
||||
})
|
||||
|
||||
const window = useWindow()
|
||||
useEventListener(window, 'resize', () => {
|
||||
if (!viewportEl.value) return
|
||||
|
||||
const { width, height } = getDimensions(viewportEl.value)
|
||||
dimensions.width = width
|
||||
dimensions.height = height
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent)
|
||||
const d3Selection = select(viewportEl.value).call(d3Zoom)
|
||||
const d3ZoomHandler = d3Selection.on('wheel.zoom')
|
||||
|
||||
const updatedTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom)
|
||||
d3Zoom.transform(d3Selection, updatedTransform)
|
||||
|
||||
setState({
|
||||
d3Zoom,
|
||||
d3Selection,
|
||||
d3ZoomHandler,
|
||||
viewport: { x: updatedTransform.x, y: updatedTransform.y, zoom: updatedTransform.k },
|
||||
viewportRef: viewportEl.value,
|
||||
})
|
||||
|
||||
const onKeyPress = (keyPress: boolean) => {
|
||||
if (keyPress && !isZoomingOrPanning) {
|
||||
d3Zoom.on('zoom', null)
|
||||
} else if (!keyPress) {
|
||||
d3Zoom.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
setState({ viewport: { x: event.transform.x, y: event.transform.y, zoom: event.transform.k } })
|
||||
const flowTransform = eventToFlowTransform(event.transform)
|
||||
emits.move({ event, flowTransform })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const selectionKeyPressed = useKeyPress(selectionKeyCode, onKeyPress)
|
||||
// initialize
|
||||
onKeyPress(false)
|
||||
|
||||
const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
|
||||
|
||||
d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
isZoomingOrPanning = true
|
||||
|
||||
const flowTransform = eventToFlowTransform(event.transform)
|
||||
transform = flowTransform
|
||||
emits.moveStart({ event, flowTransform })
|
||||
})
|
||||
|
||||
d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
isZoomingOrPanning = false
|
||||
|
||||
if (viewChanged(transform, event.transform)) {
|
||||
const flowTransform = eventToFlowTransform(event.transform)
|
||||
transform = flowTransform
|
||||
emits.moveEnd({ event, flowTransform })
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (panOnScroll && !zoomKeyPressed.value) {
|
||||
d3Selection
|
||||
.on('wheel', (event: WheelEvent) => {
|
||||
if (isWrappedWithClass(event, noWheelClassName?.value)) {
|
||||
return false
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
event.stopImmediatePropagation()
|
||||
|
||||
const currentZoom = d3Selection.property('__zoom').k || 1
|
||||
|
||||
if (event.ctrlKey && zoomOnPinch) {
|
||||
const point = pointer(event)
|
||||
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
|
||||
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
|
||||
const zoom = currentZoom * 2 ** pinchDelta
|
||||
d3Zoom.scaleTo(d3Selection, zoom, point)
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// increase scroll speed in firefox
|
||||
// firefox: deltaMode === 1; chrome: deltaMode === 0
|
||||
const deltaNormalize = event.deltaMode === 1 ? 20 : 1
|
||||
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
|
||||
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
|
||||
|
||||
d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
|
||||
})
|
||||
.on('wheel.zoom', null)
|
||||
} else if (typeof d3ZoomHandler !== 'undefined') {
|
||||
d3Selection
|
||||
.on('wheel', (event: WheelEvent) => {
|
||||
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName?.value)) {
|
||||
return null
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
})
|
||||
.on('wheel.zoom', d3ZoomHandler)
|
||||
}
|
||||
})
|
||||
|
||||
d3Zoom.filter((event: MouseEvent) => {
|
||||
const zoomScroll = zoomKeyPressed.value || zoomOnScroll
|
||||
const pinchZoom = zoomOnPinch && event.ctrlKey
|
||||
|
||||
// if all interactions are disabled, we prevent all zoom events
|
||||
if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
|
||||
|
||||
// during a selection we prevent all other interactions
|
||||
if (selectionKeyPressed.value && !selectionKeyCode !== true) return false
|
||||
|
||||
// if zoom on double click is disabled, we prevent the double click event
|
||||
if (!zoomOnDoubleClick && event.type === 'dblclick') return false
|
||||
|
||||
// if the target element is inside an element with the nowheel class, we prevent zooming
|
||||
if (isWrappedWithClass(event, noWheelClassName as any) && event.type === 'wheel') return false
|
||||
|
||||
// if the target element is inside an element with the nopan class, we prevent panning
|
||||
if (isWrappedWithClass(event, noPanClassName as any) && event.type !== 'wheel') return false
|
||||
|
||||
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
|
||||
|
||||
// when there is no scroll handling enabled, we prevent all wheel events
|
||||
if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
|
||||
|
||||
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
|
||||
if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
|
||||
|
||||
// default filter for d3-zoom
|
||||
return (!event.ctrlKey || event.type === 'wheel') && !event.button
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Viewport',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="viewport" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
|
||||
<Transform>
|
||||
<slot />
|
||||
</Transform>
|
||||
<SelectionPane />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,173 @@
|
||||
<script lang="ts" setup>
|
||||
import type { D3ZoomEvent } from 'd3-zoom'
|
||||
import Viewport from '../Viewport/Viewport.vue'
|
||||
import { useHooks } from '../../store'
|
||||
import { useVueFlow } from '../../composables'
|
||||
import type { FlowElements, FlowProps } from '../../types/flow'
|
||||
import { Slots } from '../../context'
|
||||
import type {
|
||||
Connection,
|
||||
EdgeChange,
|
||||
EdgeMouseEvent,
|
||||
EdgeUpdateEvent,
|
||||
GraphEdge,
|
||||
GraphNode,
|
||||
NodeChange,
|
||||
NodeDragEvent,
|
||||
NodeMouseEvent,
|
||||
OnConnectStartParams,
|
||||
ViewpaneTransform,
|
||||
VueFlowStore,
|
||||
} from '../../types'
|
||||
import useWatch from './watch'
|
||||
|
||||
const props = withDefaults(defineProps<FlowProps>(), {
|
||||
snapToGrid: undefined,
|
||||
onlyRenderVisibleElements: undefined,
|
||||
edgesUpdatable: undefined,
|
||||
nodesConnectable: undefined,
|
||||
nodesDraggable: undefined,
|
||||
elementsSelectable: undefined,
|
||||
selectNodesOnDrag: undefined,
|
||||
preventScrolling: undefined,
|
||||
zoomOnScroll: undefined,
|
||||
zoomOnPinch: undefined,
|
||||
zoomOnDoubleClick: undefined,
|
||||
panOnScroll: undefined,
|
||||
panOnDrag: undefined,
|
||||
applyDefault: undefined,
|
||||
fitViewOnInit: undefined,
|
||||
connectOnClick: undefined,
|
||||
connectionLineStyle: undefined,
|
||||
autoConnect: undefined,
|
||||
elevateEdgesOnSelect: undefined,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'nodesChange', changes: NodeChange[]): void
|
||||
(event: 'edgesChange', changes: EdgeChange[]): void
|
||||
(event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
|
||||
(event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
|
||||
(event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
|
||||
(event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
|
||||
(event: 'connect', connectionEvent: Connection): void
|
||||
(
|
||||
event: 'connectStart',
|
||||
connectionEvent: {
|
||||
event?: MouseEvent
|
||||
} & OnConnectStartParams,
|
||||
): void
|
||||
(event: 'connectEnd', connectionEvent?: MouseEvent): void
|
||||
(event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
||||
(event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
||||
(event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
||||
(event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
|
||||
(event: 'selectionDrag', selectionEvent: NodeDragEvent): void
|
||||
(event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
|
||||
(event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
|
||||
(event: 'paneReady', paneEvent: VueFlowStore): void
|
||||
(event: 'paneScroll', paneEvent: WheelEvent | undefined): void
|
||||
(event: 'paneClick', paneEvent: MouseEvent): void
|
||||
(event: 'paneContextMenu', paneEvent: MouseEvent): void
|
||||
(event: 'paneMouseEnter', paneEvent: MouseEvent): void
|
||||
(event: 'paneMouseMove', paneEvent: MouseEvent): void
|
||||
(event: 'paneMouseLeave', paneEvent: MouseEvent): void
|
||||
(event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
|
||||
(event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
|
||||
(event: 'updateNodeInternals'): void
|
||||
|
||||
/** v-model event definitions */
|
||||
(event: 'update:modelValue', value: FlowElements): void
|
||||
(event: 'update:nodes', value: GraphNode[]): void
|
||||
(event: 'update:edges', value: GraphEdge[]): void
|
||||
}>()
|
||||
|
||||
const modelValue = useVModel(props, 'modelValue', emit)
|
||||
const modelNodes = useVModel(props, 'nodes', emit)
|
||||
const modelEdges = useVModel(props, 'edges', emit)
|
||||
|
||||
const { vueFlowRef, id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
|
||||
|
||||
const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
|
||||
vueFlowRef,
|
||||
id,
|
||||
hooks,
|
||||
getNodeTypes,
|
||||
getEdgeTypes,
|
||||
$reset,
|
||||
...rest,
|
||||
})
|
||||
|
||||
const el = ref<HTMLDivElement>()
|
||||
|
||||
onUnmounted(() => {
|
||||
dispose()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
vueFlowRef.value = el.value!
|
||||
})
|
||||
|
||||
useHooks(emit, hooks)
|
||||
|
||||
provide(Slots, useSlots())
|
||||
|
||||
defineExpose<VueFlowStore>({
|
||||
vueFlowRef,
|
||||
id,
|
||||
hooks,
|
||||
getNodeTypes,
|
||||
getEdgeTypes,
|
||||
$reset,
|
||||
...rest,
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'VueFlow',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="el" class="vue-flow">
|
||||
<Viewport>
|
||||
<template #nodes>
|
||||
<template v-for="nodeName of Object.keys(getNodeTypes)">
|
||||
<slot :name="`node-${nodeName}`" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #edges>
|
||||
<template v-for="edgeName of Object.keys(getEdgeTypes)">
|
||||
<slot :name="`edge-${edgeName}`" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #connection-name>
|
||||
<slot name="connection-line" />
|
||||
</template>
|
||||
|
||||
<slot name="zoom-pane" />
|
||||
</Viewport>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,300 @@
|
||||
import type { ToRefs } from 'vue'
|
||||
import type { WatchPausableReturn } from '@vueuse/core'
|
||||
import { isFunction } from '@vueuse/core'
|
||||
import type { Connection, FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
|
||||
|
||||
const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
|
||||
|
||||
export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {
|
||||
const scope = effectScope()
|
||||
|
||||
scope.run(() => {
|
||||
const watchModelValue = () => {
|
||||
scope.run(() => {
|
||||
let pauseModel: WatchPausableReturn
|
||||
let pauseStore: WatchPausableReturn
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
pauseModel = watchPausable(
|
||||
[models.modelValue, () => models.modelValue?.value?.length],
|
||||
([v]) => {
|
||||
if (v && Array.isArray(v)) {
|
||||
if (pauseStore) pauseStore.pause()
|
||||
if (pauseModel) pauseModel.pause()
|
||||
|
||||
store.setElements(v)
|
||||
|
||||
pauseStore = watchPausable(
|
||||
[store.edges, store.nodes, () => store.edges.value.length, () => store.nodes.value.length],
|
||||
([e, n]) => {
|
||||
if (pauseModel) pauseModel.pause()
|
||||
const val = [...(n as GraphNode[]), ...(e as GraphEdge[])]
|
||||
if (val.length) models.modelValue!.value = val
|
||||
|
||||
nextTick(() => {
|
||||
if (pauseModel) pauseModel.resume()
|
||||
})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
nextTick(() => {
|
||||
if (pauseStore) pauseStore.resume()
|
||||
if (pauseModel) pauseModel.resume()
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: !!(models.modelValue && models.modelValue.value) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchNodesValue = () => {
|
||||
scope.run(() => {
|
||||
let pauseModel: WatchPausableReturn
|
||||
let pauseStore: WatchPausableReturn
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
pauseModel = watchPausable(
|
||||
[models.nodes, () => models.nodes?.value?.length],
|
||||
async ([v]) => {
|
||||
if (v && Array.isArray(v)) {
|
||||
if (pauseStore) pauseStore.pause()
|
||||
if (pauseModel) pauseModel.pause()
|
||||
|
||||
store.setNodes(v)
|
||||
|
||||
pauseStore = watchPausable(
|
||||
() => store.nodes.value.length,
|
||||
() => {
|
||||
if (store.nodes.value.length) models.nodes!.value = [...store.nodes.value]
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
nextTick(() => {
|
||||
if (pauseStore) pauseStore.resume()
|
||||
if (pauseModel) pauseModel.resume()
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: !!(models.nodes && models.nodes.value) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchEdgesValue = () => {
|
||||
scope.run(() => {
|
||||
let pauseModel: WatchPausableReturn
|
||||
let pauseStore: WatchPausableReturn
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
pauseModel = watchPausable(
|
||||
[models.edges, () => models.edges?.value?.length],
|
||||
async ([v]) => {
|
||||
if (v && Array.isArray(v)) {
|
||||
if (pauseStore) pauseStore.pause()
|
||||
if (pauseModel) pauseModel.pause()
|
||||
|
||||
store.setEdges(v)
|
||||
|
||||
pauseStore = watchPausable(
|
||||
() => store.edges.value.length,
|
||||
() => {
|
||||
if (store.edges.value.length) models.edges!.value = [...store.edges.value]
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
nextTick(() => {
|
||||
if (pauseStore) pauseStore.resume()
|
||||
if (pauseModel) pauseModel.resume()
|
||||
})
|
||||
}
|
||||
},
|
||||
{ immediate: !!(models.edges && models.edges.value) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchMaxZoom = () => {
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => props.maxZoom,
|
||||
() => {
|
||||
if (props.maxZoom && isDef(props.maxZoom)) {
|
||||
store.setMaxZoom(props.maxZoom)
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.maxZoom) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchMinZoom = () => {
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => props.minZoom,
|
||||
() => {
|
||||
if (props.minZoom && isDef(props.minZoom)) {
|
||||
store.setMinZoom(props.minZoom)
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.minZoom) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchTranslateExtent = () => {
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => props.translateExtent,
|
||||
() => {
|
||||
if (props.translateExtent && isDef(props.translateExtent)) {
|
||||
store.setTranslateExtent(props.translateExtent)
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.translateExtent) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchNodeExtent = () => {
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => props.nodeExtent,
|
||||
() => {
|
||||
if (props.nodeExtent && isDef(props.nodeExtent)) {
|
||||
store.setNodeExtent(props.nodeExtent)
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.nodeExtent) },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchApplyDefault = () => {
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => props.applyDefault,
|
||||
() => {
|
||||
if (isDef(props.applyDefault)) {
|
||||
store.applyDefault.value = props.applyDefault
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.applyDefault) },
|
||||
)
|
||||
|
||||
watch(
|
||||
store.applyDefault,
|
||||
(_, __, onCleanup) => {
|
||||
if (store.applyDefault.value) {
|
||||
store.onNodesChange(store.applyNodeChanges)
|
||||
store.onEdgesChange(store.applyEdgeChanges)
|
||||
} else {
|
||||
store.hooks.value.nodesChange.off(store.applyNodeChanges)
|
||||
store.hooks.value.edgesChange.off(store.applyEdgeChanges)
|
||||
}
|
||||
|
||||
onCleanup(() => {
|
||||
store.hooks.value.nodesChange.off(store.applyNodeChanges)
|
||||
store.hooks.value.edgesChange.off(store.applyEdgeChanges)
|
||||
})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchAutoConnect = () => {
|
||||
scope.run(() => {
|
||||
const autoConnector = async (params: Connection) => {
|
||||
let connection: boolean | Connection = params
|
||||
|
||||
if (isFunction(props.autoConnect)) {
|
||||
connection = await props.autoConnect(params)
|
||||
}
|
||||
|
||||
if (connection !== false) {
|
||||
store.addEdges([connection])
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.autoConnect,
|
||||
() => {
|
||||
if (isDef(props.autoConnect)) {
|
||||
store.autoConnect.value = props.autoConnect
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(props.autoConnect) },
|
||||
)
|
||||
|
||||
watch(
|
||||
store.autoConnect,
|
||||
(autoConnectEnabled, _, onCleanup) => {
|
||||
if (autoConnectEnabled) {
|
||||
store.onConnect(autoConnector)
|
||||
} else {
|
||||
store.hooks.value.connect.off(autoConnector)
|
||||
}
|
||||
|
||||
onCleanup(() => {
|
||||
store.hooks.value.connect.off(autoConnector)
|
||||
})
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const watchRest = () => {
|
||||
const skip: (keyof typeof props)[] = [
|
||||
'id',
|
||||
'modelValue',
|
||||
'translateExtent',
|
||||
'nodeExtent',
|
||||
'edges',
|
||||
'nodes',
|
||||
'maxZoom',
|
||||
'minZoom',
|
||||
'applyDefault',
|
||||
'autoConnect',
|
||||
]
|
||||
|
||||
Object.keys(props).forEach((prop) => {
|
||||
if (!skip.includes(prop as keyof typeof props)) {
|
||||
const model = toRef(props, prop as keyof typeof props)
|
||||
const storedValue = store[prop as keyof typeof store] as typeof model
|
||||
|
||||
scope.run(() => {
|
||||
watch(
|
||||
model,
|
||||
() => {
|
||||
if (isDef(model)) {
|
||||
storedValue.value = model.value
|
||||
}
|
||||
},
|
||||
{ immediate: isDef(model) },
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
;[
|
||||
watchModelValue,
|
||||
watchNodesValue,
|
||||
watchEdgesValue,
|
||||
watchMinZoom,
|
||||
watchMaxZoom,
|
||||
watchTranslateExtent,
|
||||
watchNodeExtent,
|
||||
watchApplyDefault,
|
||||
watchAutoConnect,
|
||||
watchRest,
|
||||
].forEach((watch) => watch())
|
||||
})
|
||||
|
||||
return () => scope.stop()
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export { default as VueFlow } from './VueFlow/VueFlow.vue'
|
||||
export { default as EdgeRenderer } from './EdgeRenderer/EdgeRenderer.vue'
|
||||
export { default as Marker } from './EdgeRenderer/Marker.vue'
|
||||
export { default as MarkerDefinitions } from './EdgeRenderer/MarkerDefinitions.vue'
|
||||
export { default as NodeRenderer } from './NodeRenderer/NodeRenderer.vue'
|
||||
export { default as Viewport } from './Viewport/Viewport.vue'
|
||||
export { default as SelectionPane } from './SelectionPane/SelectionPane.vue'
|
||||
Reference in New Issue
Block a user