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
index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>🌊 Vue Flow</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
src/components/Edges/Edge.vue
+3 -1
View File
@@ -99,6 +99,7 @@ const targetNodeHandles = computed(() =>
const sourceHandle = computed(() => { const sourceHandle = computed(() => {
if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null) 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 targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom)) const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
@@ -115,6 +116,7 @@ const edgePos = computed(() =>
targetPosition.value, targetPosition.value,
), ),
) )
const elementsSelectable = computed(() => store.elementsSelectable)
</script> </script>
<template> <template>
<g <g
@@ -125,7 +127,7 @@ const edgePos = computed(() =>
{ {
selected: isSelected, selected: isSelected,
animated: props.edge.animated, animated: props.edge.animated,
inactive: !store.elementsSelectable, inactive: !elementsSelectable,
updating, updating,
}, },
props.edge.class, props.edge.class,
src/components/Nodes/Node.vue
+3 -12
View File
@@ -26,6 +26,7 @@ const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => props.node.selectable ?? store.elementsSelectable) const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
const draggable = computed(() => props.node.draggable ?? store.nodesDraggable) const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
const connectable = computed(() => props.node.connectable ?? store.nodesConnectable) const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
const scale = computed(() => store.transform[2])
const onMouseEnterHandler = () => const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node })) props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -117,17 +118,7 @@ onMounted(() => {
}), }),
) )
watch( watch([props.node.type, props.node.sourcePosition, props.node.targetPosition], () => {
() => props.node.type,
() => {
store.updateNodeDimensions({
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
},
)
watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
nextTick(() => { nextTick(() => {
store.updateNodeDimensions({ store.updateNodeDimensions({
id: props.node.id, id: props.node.id,
@@ -143,7 +134,7 @@ onMounted(() => {
<DraggableCore <DraggableCore
cancel=".nodrag" cancel=".nodrag"
:disabled="!draggable" :disabled="!draggable"
:scale="store.transform[2]" :scale="scale"
:grid="props.snapGrid" :grid="props.snapGrid"
:enable-user-select-hack="false" :enable-user-select-hack="false"
@start="onDragStart" @start="onDragStart"
src/container/EdgeRenderer/EdgeRenderer.vue
+4 -2
View File
@@ -28,11 +28,13 @@ const connectionLineVisible = computed(
() => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType), () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
) )
const edges = computed(() => store.edges.filter((edge) => !edge.isHidden)) 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> </script>
<template> <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" /> <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"> <template v-for="edge of edges" :key="edge.id">
<Edge <Edge
:edge="edge" :edge="edge"
src/container/Flow/Flow.vue
-1
View File
@@ -118,7 +118,6 @@ const store = useStore(props)
const hooks = useHooks(emit) const hooks = useHooks(emit)
const init = (opts: typeof props) => { const init = (opts: typeof props) => {
store.$state = { ...store.$state, ...opts }
store.setElements(opts.elements) store.setElements(opts.elements)
store.setMinZoom(opts.minZoom) store.setMinZoom(opts.minZoom)
store.setMaxZoom(opts.maxZoom) store.setMaxZoom(opts.maxZoom)
src/container/NodeRenderer/NodeRenderer.vue
+6 -6
View File
@@ -33,6 +33,8 @@ const nodes = computed(() => {
return n.filter((node) => !node.isHidden) 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 type = (node: TNode) => {
const nodeType = node.type || 'default' const nodeType = node.type || 'default'
@@ -42,19 +44,17 @@ const type = (node: TNode) => {
} }
return type return type
} }
const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id === nodeId)
</script> </script>
<template> <template>
<div <div class="vue-flow__nodes" :style="{ transform }">
class="vue-flow__nodes"
:style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
>
<template v-for="node of nodes" :key="node.id"> <template v-for="node of nodes" :key="node.id">
<Node <Node
:node="node" :node="node"
:type="type(node)" :type="type(node)"
:snap-grid="store.snapToGrid ? store.snapGrid : undefined" :snap-grid="snapGrid"
:select-nodes-on-drag="props.selectNodesOnDrag" :select-nodes-on-drag="props.selectNodesOnDrag"
:selected="store.selectedElements?.some(({ id }) => id === node.id)" :selected="selected(node.id)"
> >
<template #default="nodeProps"> <template #default="nodeProps">
<slot :name="`node-${node.type}`" v-bind="nodeProps"></slot> <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
src/container/ZoomPane/ZoomPane.vue
+5 -2
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 transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)) const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
const d3Selection = ref() const d3Selection = ref()
store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
until(zoomPaneEl) until(zoomPaneEl)
.toBeTruthy() .toBeTruthy()
@@ -185,8 +186,10 @@ store.dimensions = {
height: height.value, height: height.value,
} }
watch(width, (val) => (store.dimensions.width = val)) watch([width, height], ([newWidth, newHeight]) => {
watch(height, (val) => (store.dimensions.height = val)) store.dimensions.width = newWidth
store.dimensions.height = newHeight
})
watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom])) watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper() const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()