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

refactor: perfomance optimisations through less dependency tracking

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-15 11:22:56 +01:00
parent 482a1aa4af
commit 3705a39fa8
7 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>🌊 Vue Flow</title>
</head>
<body>
<div id="root"></div>

4
src/components/Edges/Edge.vue
View File

@@ -99,6 +99,7 @@ const targetNodeHandles = computed(() =>
const sourceHandle = computed(() => {
if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
else return null
})
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -115,6 +116,7 @@ const edgePos = computed(() =>
targetPosition.value,
),
)
const elementsSelectable = computed(() => store.elementsSelectable)
</script>
<template>
<g
@@ -125,7 +127,7 @@ const edgePos = computed(() =>
{
selected: isSelected,
animated: props.edge.animated,
inactive: !store.elementsSelectable,
inactive: !elementsSelectable,
updating,
},
props.edge.class,

15
src/components/Nodes/Node.vue
View File

@@ -26,6 +26,7 @@ const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
const scale = computed(() => store.transform[2])
const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -117,17 +118,7 @@ onMounted(() => {
}),
)
watch(
() => props.node.type,
() => {
store.updateNodeDimensions({
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
},
)
watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
watch([props.node.type, props.node.sourcePosition, props.node.targetPosition], () => {
nextTick(() => {
store.updateNodeDimensions({
id: props.node.id,
@@ -143,7 +134,7 @@ onMounted(() => {
<DraggableCore
cancel=".nodrag"
:disabled="!draggable"
:scale="store.transform[2]"
:scale="scale"
:grid="props.snapGrid"
:enable-user-select-hack="false"
@start="onDragStart"

6
src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -28,11 +28,13 @@ const connectionLineVisible = computed(
() => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
)
const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
const dimensions = computed(() => store.dimensions)
const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
</script>
<template>
<svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
<svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
<MarkerDefinitions :color="props.arrowHeadColor" />
<g :transform="`translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`">
<g :transform="transform">
<template v-for="edge of edges" :key="edge.id">
<Edge
:edge="edge"

1
src/container/Flow/Flow.vue
View File

@@ -118,7 +118,6 @@ const store = useStore(props)
const hooks = useHooks(emit)
const init = (opts: typeof props) => {
store.$state = { ...store.$state, ...opts }
store.setElements(opts.elements)
store.setMinZoom(opts.minZoom)
store.setMaxZoom(opts.maxZoom)

12
src/container/NodeRenderer/NodeRenderer.vue
View File

@@ -33,6 +33,8 @@ const nodes = computed(() => {
return n.filter((node) => !node.isHidden)
})
const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
const type = (node: TNode) => {
const nodeType = node.type || 'default'
@@ -42,19 +44,17 @@ const type = (node: TNode) => {
}
return type
}
const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
</script>
<template>
<div
class="vue-flow__nodes"
:style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
>
<div class="vue-flow__nodes" :style="{ transform }">
<template v-for="node of nodes" :key="node.id">
<Node
:node="node"
:type="type(node)"
:snap-grid="store.snapToGrid ? store.snapGrid : undefined"
:snap-grid="snapGrid"
:select-nodes-on-drag="props.selectNodesOnDrag"
:selected="store.selectedElements?.some(({ id }) => id === node.id)"
:selected="selected(node.id)"
>
<template #default="nodeProps">
<slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>

7
src/container/ZoomPane/ZoomPane.vue
View File

@@ -55,6 +55,7 @@ const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
const d3Selection = ref()
store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
until(zoomPaneEl)
.toBeTruthy()
@@ -185,8 +186,10 @@ store.dimensions = {
height: height.value,
}
watch(width, (val) => (store.dimensions.width = val))
watch(height, (val) => (store.dimensions.height = val))
watch([width, height], ([newWidth, newHeight]) => {
store.dimensions.width = newWidth
store.dimensions.height = newHeight
})
watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()