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

update: dont render nodes, edges if dimensions dont return a truthy value

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-20 03:18:09 +01:00
parent 68b7d99a9c
commit 2b87d53c10
4 changed files with 73 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/EdgeRenderer.vue
-6
View File
@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { CSSProperties } from 'vue' import { CSSProperties } from 'vue'
import { invoke } from '@vueuse/core'
import { ConnectionLineType } from '../../types' import { ConnectionLineType } from '../../types'
import { useStore } from '../../composables' import { useStore } from '../../composables'
import Edge from '../../components/Edges/Edge.vue' import Edge from '../../components/Edges/Edge.vue'
@@ -23,11 +22,6 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
const store = useStore() const store = useStore()
invoke(async () => {
await until(store.getNodes).toMatch((y) => y && y.length > 0)
await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
})
const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId)) const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
const connectionLineVisible = computed( const connectionLineVisible = computed(
() => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType), () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
src/container/NodeRenderer/NodeRenderer.vue
+13 -20
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { invoke } from '@vueuse/core'
import { useStore } from '../../composables' import { useStore } from '../../composables'
import Node from '../../components/Nodes/Node.vue' import Node from '../../components/Nodes/Node.vue'
@@ -13,27 +12,21 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
const store = useStore() const store = useStore()
invoke(async () => {
await until(store.getNodes).toMatch((y) => y && y.length > 0)
await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
})
const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`) 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 snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
</script> </script>
<template> <template>
<Suspense> <div class="vue-flow__nodes" :style="{ transform }">
<div class="vue-flow__nodes" :style="{ transform }"> <Node
<Node v-for="node of store.getNodes"
v-for="node of store.getNodes" :key="node.id"
:key="node.id" :node="node"
:node="node" :snap-grid="snapGrid"
:snap-grid="snapGrid" :select-nodes-on-drag="props.selectNodesOnDrag"
:select-nodes-on-drag="props.selectNodesOnDrag" >
> <template #default="nodeProps">
<template #default="nodeProps"> <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
<slot :name="`node-${node.type}`" v-bind="nodeProps"></slot> </template>
</template> </Node>
</Node> </div>
</div>
</Suspense>
</template> </template>
src/container/VueFlow/VueFlow.vue
+42 -45
View File
@@ -127,7 +127,6 @@ const init = (state: FlowState) => {
} }
onBeforeUnmount(() => store?.$dispose()) onBeforeUnmount(() => store?.$dispose())
onMounted(() => init(options))
watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true }) watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
watch( watch(
() => store.elements, () => store.elements,
@@ -147,54 +146,52 @@ watch(
}, },
{ flush: 'pre', deep: true }, { flush: 'pre', deep: true },
) )
invoke(async () => await until(store.elements).toMatch((y) => y.length > 0)) init(options)
</script> </script>
<template> <template>
<div class="vue-flow"> <div class="vue-flow">
<Suspense> <ZoomPane
<ZoomPane :selection-key-code="store.selectionKeyCode"
:selection-key-code="store.selectionKeyCode" :zoom-activation-key-code="store.zoomActivationKeyCode"
:zoom-activation-key-code="store.zoomActivationKeyCode" :default-zoom="store.defaultZoom"
:default-zoom="store.defaultZoom" :default-position="store.defaultPosition"
:default-position="store.defaultPosition" :zoom-on-scroll="store.zoomOnScroll"
:zoom-on-scroll="store.zoomOnScroll" :zoom-on-pinch="store.zoomOnPinch"
:zoom-on-pinch="store.zoomOnPinch" :zoom-on-double-click="store.zoomOnDoubleClick"
:zoom-on-double-click="store.zoomOnDoubleClick" :pan-on-scroll="store.panOnScroll"
:pan-on-scroll="store.panOnScroll" :pan-on-scroll-speed="store.panOnScrollSpeed"
:pan-on-scroll-speed="store.panOnScrollSpeed" :pan-on-scroll-mode="store.panOnScrollMode"
:pan-on-scroll-mode="store.panOnScrollMode" :pane-moveable="store.paneMoveable"
:pane-moveable="store.paneMoveable" >
> <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
<template #default="zoomPaneProps"> <SelectionPane
<SelectionPane :delete-key-code="store.deleteKeyCode"
:delete-key-code="store.deleteKeyCode" :multi-selection-key-code="store.multiSelectionKeyCode"
:multi-selection-key-code="store.multiSelectionKeyCode" :selection-key-code="store.selectionKeyCode"
:selection-key-code="store.selectionKeyCode" >
<NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
<template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
<slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
</template>
</NodeRenderer>
<EdgeRenderer
:connection-line-type="store.connectionLineType"
:connection-line-style="store.connectionLineStyle"
:arrow-head-color="store.arrowHeadColor"
:marker-end-id="store.markerEndId"
> >
<NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag"> <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
<template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps"> <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
<slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot> </template>
</template> <template #custom-connection-line="customConnectionLineProps">
</NodeRenderer> <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
<EdgeRenderer </template>
:connection-line-type="store.connectionLineType" </EdgeRenderer>
:connection-line-style="store.connectionLineStyle" </SelectionPane>
:arrow-head-color="store.arrowHeadColor" <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
:marker-end-id="store.markerEndId" </template>
> </ZoomPane>
<template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps"> <slot v-bind="{ store }"></slot>
<slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
</template>
<template #custom-connection-line="customConnectionLineProps">
<slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
</template>
</EdgeRenderer>
</SelectionPane>
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
</template>
</ZoomPane>
</Suspense>
<slot v-bind="{ ...props, store }"></slot>
</div> </div>
</template> </template>
<style> <style>
src/container/ZoomPane/ZoomPane.vue
+18 -22
View File
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
paneMoveable: true, paneMoveable: true,
}) })
const store = useStore() const store = useStore()
const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null) const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean => const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -185,22 +184,19 @@ store.dimensions = {
invoke(async () => { invoke(async () => {
await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy() await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
await until(store.elements).toMatch((y) => y.length > 0) const instance: FlowInstance = {
await nextTick(() => { fitView: (params = { padding: 0.1 }) => fitView(params),
const instance: FlowInstance = { zoomIn,
fitView: (params = { padding: 0.1 }) => fitView(params), zoomOut,
zoomIn, zoomTo,
zoomOut, setTransform,
zoomTo, project: onLoadProject(store),
setTransform, getElements: onLoadGetElements(store),
project: onLoadProject(store), toObject: onLoadToObject(store),
getElements: onLoadGetElements(store), }
toObject: onLoadToObject(store), store.hooks.load.trigger(instance)
} store.isReady = true
store.hooks.load.trigger(instance) store.instance = instance
store.isReady = true
store.instance = instance
})
}) })
watch( watch(
@@ -223,8 +219,8 @@ watch(
) )
</script> </script>
<template> <template>
<Suspense> <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
<div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane"> <Suspense>
<slot <slot
v-bind="{ v-bind="{
transform, transform,
@@ -235,7 +231,7 @@ watch(
setTransform, setTransform,
fitView, fitView,
}" }"
></slot> />
</div> </Suspense>
</Suspense> </div>
</template> </template>