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

feat: Add loading indicator slot and prop

Browse Source 
* While the graph is suspended we open up a loading indicator slot
* a prop option has to be passed to enable the indicator
* add some styles for a default loading text
* move loading event to after store has been initialized *and* zoom pane dimensions are present

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-20 17:33:27 +01:00
parent d335944e56
commit 4e8ff6201a
7 changed files with 81 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Stress/StressExample.vue
+7 -1
View File
@@ -49,7 +49,13 @@ const updateElements = () => {
} }
</script> </script>
<template> <template>
<VueFlow v-model="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect"> <VueFlow
v-model="elements"
:show-loading-indicator="true"
@load="onLoad"
@elementsRemove="onElementsRemove"
@connect="onConnect"
>
<MiniMap /> <MiniMap />
<Controls /> <Controls />
<Background /> <Background />
src/container/VueFlow/VueFlow.vue
+53 -42
View File
@@ -22,7 +22,7 @@ import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue' import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue' import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
import { createHooks, initFlow, useZoomPanHelper } from '../../composables' import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils' import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
export interface FlowProps extends Partial<FlowOptions> { export interface FlowProps extends Partial<FlowOptions> {
id?: string id?: string
@@ -62,6 +62,7 @@ export interface FlowProps extends Partial<FlowOptions> {
zoomOnDoubleClick?: boolean zoomOnDoubleClick?: boolean
edgeUpdaterRadius?: number edgeUpdaterRadius?: number
storageKey?: string storageKey?: string
showLoadingIndicator?: boolean
} }
const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue']) const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
@@ -103,6 +104,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
panOnScrollMode: PanOnScrollMode.Free, panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true, paneMoveable: true,
edgeUpdaterRadius: 10, edgeUpdaterRadius: 10,
showLoadingIndicator: false,
}) })
const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id, props.store) const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id, props.store)
const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit) const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit)
@@ -147,10 +149,13 @@ watch(
}, },
{ flush: 'post', deep: true }, { flush: 'post', deep: true },
) )
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
invoke(async () => { invoke(async () => {
await init(options) await init(options)
store.isReady = true
await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
const instance: FlowInstance = { const instance: FlowInstance = {
fitView: (params = { padding: 0.1 }) => fitView(params), fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn, zoomIn,
@@ -162,53 +167,59 @@ invoke(async () => {
toObject: onLoadToObject(store), toObject: onLoadToObject(store),
} }
store.hooks.load.trigger(instance) store.hooks.load.trigger(instance)
store.isReady = true
store.instance = instance store.instance = instance
}) })
</script> </script>
<template> <template>
<div class="vue-flow"> <div class="vue-flow">
<ZoomPane <Suspense>
:selection-key-code="store.selectionKeyCode" <ZoomPane
:zoom-activation-key-code="store.zoomActivationKeyCode" :selection-key-code="store.selectionKeyCode"
:default-zoom="store.defaultZoom" :zoom-activation-key-code="store.zoomActivationKeyCode"
:default-position="store.defaultPosition" :default-zoom="store.defaultZoom"
:zoom-on-scroll="store.zoomOnScroll" :default-position="store.defaultPosition"
:zoom-on-pinch="store.zoomOnPinch" :zoom-on-scroll="store.zoomOnScroll"
:zoom-on-double-click="store.zoomOnDoubleClick" :zoom-on-pinch="store.zoomOnPinch"
:pan-on-scroll="store.panOnScroll" :zoom-on-double-click="store.zoomOnDoubleClick"
:pan-on-scroll-speed="store.panOnScrollSpeed" :pan-on-scroll="store.panOnScroll"
:pan-on-scroll-mode="store.panOnScrollMode" :pan-on-scroll-speed="store.panOnScrollSpeed"
:pane-moveable="store.paneMoveable" :pan-on-scroll-mode="store.panOnScrollMode"
> :pane-moveable="store.paneMoveable"
<template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps"> >
<SelectionPane <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
:delete-key-code="store.deleteKeyCode" <SelectionPane
:multi-selection-key-code="store.multiSelectionKeyCode" :delete-key-code="store.deleteKeyCode"
:selection-key-code="store.selectionKeyCode" :multi-selection-key-code="store.multiSelectionKeyCode"
> :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"
> >
<template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps"> <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
<slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot> <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
</template> <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
<template #custom-connection-line="customConnectionLineProps"> </template>
<slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot> </NodeRenderer>
</template> <EdgeRenderer
</EdgeRenderer> :connection-line-type="store.connectionLineType"
</SelectionPane> :connection-line-style="store.connectionLineStyle"
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot> :arrow-head-color="store.arrowHeadColor"
:marker-end-id="store.markerEndId"
>
<template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
<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>
<template v-if="store.showLoadingIndicator" #fallback>
<slot name="loading-indicator">
<div class="vue-flow__loading-indicator">Almost ready...</div>
</slot>
</template> </template>
</ZoomPane> </Suspense>
<slot v-bind="{ store }"></slot> <slot v-bind="{ store }"></slot>
</div> </div>
</template> </template>
src/container/ZoomPane/ZoomPane.vue
+10 -14
View File
@@ -2,9 +2,9 @@
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom' import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { get, invoke } from '@vueuse/core' import { get, invoke } from '@vueuse/core'
import { pointer, select } from 'd3-selection' import { pointer, select } from 'd3-selection'
import { FlowInstance, FlowTransform, KeyCode, PanOnScrollMode } from '../../types' import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
import { useKeyPress, useStore, useZoomPanHelper } from '../../composables' import { useKeyPress, useStore } from '../../composables'
import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils' import { clamp } from '../../utils'
interface ZoomPaneProps { interface ZoomPaneProps {
selectionKeyCode?: KeyCode selectionKeyCode?: KeyCode
@@ -181,9 +181,7 @@ store.dimensions = {
height: height.value, height: height.value,
} }
invoke(async () => { await until(() => store.isReady).toBe(true)
await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
})
watch( watch(
[width, height], [width, height],
@@ -206,13 +204,11 @@ watch(
</script> </script>
<template> <template>
<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, dimensions: { width, height },
dimensions: { width, height }, }"
}" />
/>
</Suspense>
</div> </div>
</template> </template>
src/store/stateStore.ts
+2 -2
View File
@@ -64,8 +64,8 @@ export default function flowStore(
workerTerminate('SUCCESS') workerTerminate('SUCCESS')
} }
this.elements = elements this.elements = elements
this.nodes = next.nextNodes this.nodes = next?.nextNodes ?? []
this.edges = next.nextEdges this.edges = next?.nextEdges ?? []
}, },
updateNodeDimensions({ id, nodeElement, forceUpdate }) { updateNodeDimensions({ id, nodeElement, forceUpdate }) {
const i = this.nodes.map((x) => x.id).indexOf(id) const i = this.nodes.map((x) => x.id).indexOf(id)
src/store/utils.ts
+1 -2
View File
@@ -88,8 +88,7 @@ export const initialState = (): FlowState => ({
isReady: false, isReady: false,
hooks: createHooks(), hooks: createHooks(),
storageKey: undefined, showLoadingIndicator: false,
instance: undefined,
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
}) })
src/style.css
+7
View File
@@ -185,3 +185,10 @@
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
} }
.vue-flow__loading-indicator {
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
}
src/types/types.ts
+1
View File
@@ -126,4 +126,5 @@ export interface FlowOptions {
zoomOnDoubleClick?: boolean zoomOnDoubleClick?: boolean
edgeUpdaterRadius?: number edgeUpdaterRadius?: number
storageKey?: string storageKey?: string
showLoadingIndicator?: boolean
} }