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

refactore(store)!: Remove transition and loading.transition property

Browse Source 
* Tranisitions break testing and are superflous

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-04 15:42:18 +01:00
parent 9abc222c14
commit b1f541b63d
4 changed files with 97 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Stress/StressExample.vue
+1 -1
View File
@@ -54,7 +54,7 @@ const updateElements = () => {
<template> <template>
<VueFlow <VueFlow
v-model="elements" v-model="elements"
:loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }" loading="One moment please..."
@load="onLoad" @load="onLoad"
@elementsRemove="onElementsRemove" @elementsRemove="onElementsRemove"
@connect="onConnect" @connect="onConnect"
src/container/VueFlow/VueFlow.vue
+94 -107
View File
@@ -10,7 +10,6 @@ import {
NodeExtent, NodeExtent,
NodeTypes, NodeTypes,
EdgeTypes, EdgeTypes,
Loading,
FlowOptions, FlowOptions,
} from '../../types' } from '../../types'
import Renderer from '../Renderer/Renderer.vue' import Renderer from '../Renderer/Renderer.vue'
@@ -59,7 +58,7 @@ interface FlowProps extends FlowOptions {
zoomOnDoubleClick?: boolean zoomOnDoubleClick?: boolean
edgeUpdaterRadius?: number edgeUpdaterRadius?: number
storageKey?: string storageKey?: string
loading?: Loading loading?: string
} }
const props = withDefaults(defineProps<FlowProps>(), { const props = withDefaults(defineProps<FlowProps>(), {
@@ -102,7 +101,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
panOnScrollMode: PanOnScrollMode.Free, panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true, paneMoveable: true,
edgeUpdaterRadius: 10, edgeUpdaterRadius: 10,
loading: false,
}) })
const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue']) const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
const store = initFlow(emit, props.id) const store = initFlow(emit, props.id)
@@ -136,15 +134,6 @@ until(() => store.isReady)
{ flush: 'post', deep: true }, { flush: 'post', deep: true },
) )
}) })
const transitionName = computed(() => {
let name = ''
if (typeof store.loading === 'object' && store.loading.transition) {
if (typeof store.loading.transition === 'string') name = store.loading.transition
else name = store.loading.transition.name
}
return name
})
</script> </script>
<script lang="ts"> <script lang="ts">
export default { export default {
@@ -153,105 +142,103 @@ export default {
</script> </script>
<template> <template>
<div class="vue-flow"> <div class="vue-flow">
<Transition :name="transitionName"> <Suspense timeout="0">
<Suspense timeout="0"> <template #default>
<template #default> <Renderer :key="`renderer-${store.id}`" :elements="elements">
<Renderer :key="`renderer-${store.id}`" :elements="elements"> <ZoomPane
<ZoomPane :key="`zoom-pane-${store.id}`"
:key="`zoom-pane-${store.id}`" :prevent-scrolling="store.preventScrolling"
:prevent-scrolling="store.preventScrolling" :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 #default="zoomPaneProps">
<template #default="zoomPaneProps"> <SelectionPane
<SelectionPane :key="`selection-pane-${store.id}`"
:key="`selection-pane-${store.id}`" :edges="store.getEdges"
:edges="store.getEdges" :selected-elements="store.selectedElements"
:selected-elements="store.selectedElements" :selection-active="store.selectionActive"
:selection-active="store.selectionActive" :nodes-selection-active="store.nodesSelectionActive"
:nodes-selection-active="store.nodesSelectionActive" :elements-selectable="store.elementsSelectable"
:delete-key-code="store.deleteKeyCode"
:multi-selection-key-code="store.multiSelectionKeyCode"
:selection-key-code="store.selectionKeyCode"
>
<NodeRenderer
:key="`node-renderer-${store.id}`"
:nodes="store.getNodes"
:node-types="store.getNodeTypes"
:snap-to-grid="store.snapToGrid"
:snap-grid="store.snapGrid"
:select-nodes-on-drag="store.selectNodesOnDrag"
:transform="store.transform"
:elements-selectable="store.elementsSelectable" :elements-selectable="store.elementsSelectable"
:delete-key-code="store.deleteKeyCode" :nodes-draggable="store.nodesDraggable"
:multi-selection-key-code="store.multiSelectionKeyCode" :nodes-connectable="store.nodesConnectable"
:selection-key-code="store.selectionKeyCode"
> >
<NodeRenderer <template
:key="`node-renderer-${store.id}`" v-for="nodeName of Object.keys(store.getNodeTypes)"
:nodes="store.getNodes" #[`node-${nodeName}`]="nodeProps"
:node-types="store.getNodeTypes" :key="`node-${nodeName}-${store.id}`"
:snap-to-grid="store.snapToGrid"
:snap-grid="store.snapGrid"
:select-nodes-on-drag="store.selectNodesOnDrag"
:transform="store.transform"
:elements-selectable="store.elementsSelectable"
:nodes-draggable="store.nodesDraggable"
:nodes-connectable="store.nodesConnectable"
> >
<template <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
v-for="nodeName of Object.keys(store.getNodeTypes)" </template>
#[`node-${nodeName}`]="nodeProps" </NodeRenderer>
:key="`node-${nodeName}-${store.id}`" <EdgeRenderer
> :key="`edge-renderer-${store.id}`"
<slot :name="`node-${nodeName}`" v-bind="nodeProps" /> :transform="store.transform"
</template> :dimensions="store.dimensions"
</NodeRenderer> :edges="store.getEdges"
<EdgeRenderer :edge-types="store.getEdgeTypes"
:key="`edge-renderer-${store.id}`" :nodes="store.getNodes"
:transform="store.transform" :selected-elements="store.selectedElements"
:dimensions="store.dimensions" :elements-selectable="store.elementsSelectable"
:edges="store.getEdges" :connection-node-id="store.connectionNodeId"
:edge-types="store.getEdgeTypes" :connction-handle-id="store.connectionHandleId"
:nodes="store.getNodes" :connection-handle-type="store.connectionHandleType"
:selected-elements="store.selectedElements" :connection-position="store.connectionPosition"
:elements-selectable="store.elementsSelectable" :connection-mode="store.connectionMode"
:connection-node-id="store.connectionNodeId" :nodes-connectable="store.nodesConnectable"
:connction-handle-id="store.connectionHandleId" :connection-line-type="store.connectionLineType"
:connection-handle-type="store.connectionHandleType" :connection-line-style="store.connectionLineStyle"
:connection-position="store.connectionPosition" :arrow-head-color="store.arrowHeadColor"
:connection-mode="store.connectionMode" :marker-end-id="store.markerEndId"
:nodes-connectable="store.nodesConnectable" :only-render-visible-elements="store.onlyRenderVisibleElements"
:connection-line-type="store.connectionLineType" :edges-updatable="store.edgesUpdatable"
:connection-line-style="store.connectionLineStyle" >
:arrow-head-color="store.arrowHeadColor" <template
:marker-end-id="store.markerEndId" v-for="edgeName of Object.keys(store.getEdgeTypes)"
:only-render-visible-elements="store.onlyRenderVisibleElements" #[`edge-${edgeName}`]="edgeProps"
:edges-updatable="store.edgesUpdatable" :key="`edge-${edgeName}-${store.id}`"
> >
<template <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
v-for="edgeName of Object.keys(store.getEdgeTypes)" </template>
#[`edge-${edgeName}`]="edgeProps" <template #custom-connection-line="customConnectionLineProps">
:key="`edge-${edgeName}-${store.id}`" <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
> </template>
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" /> </EdgeRenderer>
</template> </SelectionPane>
<template #custom-connection-line="customConnectionLineProps"> <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
<slot name="custom-connection-line" v-bind="customConnectionLineProps" /> </template>
</template> </ZoomPane>
</EdgeRenderer> </Renderer>
</SelectionPane> </template>
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot> <template #fallback>
</template> <slot name="loading-indicator">
</ZoomPane> <LoadingIndicator :label="store.loading">
</Renderer> <slot name="loading-label" />
</template> </LoadingIndicator>
<template v-if="store.loading" #fallback> </slot>
<slot :key="`loading-indicator-${store.id}`" name="loading-indicator"> </template>
<LoadingIndicator :key="`default-loading-indicator-${store.id}`" v-bind="store.loading"> </Suspense>
<slot name="loading-label" />
</LoadingIndicator>
</slot>
</template>
</Suspense>
</Transition>
<slot v-bind="store"></slot> <slot v-bind="store"></slot>
</div> </div>
</template> </template>
src/types/flow.ts
+1 -15
View File
@@ -88,20 +88,6 @@ export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
export type ProjectFunc = (position: XYPosition) => XYPosition export type ProjectFunc = (position: XYPosition) => XYPosition
export type ToObjectFunc<T = any> = () => FlowExportObject<T> export type ToObjectFunc<T = any> = () => FlowExportObject<T>
export type Loading =
| {
label: string
transition?:
| string
| {
name: string
mode: string
}
style: CSSProperties
class: string
}
| boolean
export type FlowInstance<T = any> = { export type FlowInstance<T = any> = {
zoomIn: () => void zoomIn: () => void
zoomOut: () => void zoomOut: () => void
@@ -151,5 +137,5 @@ export interface FlowOptions {
preventScrolling?: boolean preventScrolling?: boolean
edgeUpdaterRadius?: number edgeUpdaterRadius?: number
storageKey?: string storageKey?: string
loading?: Loading loading?: string
} }
src/utils/store.ts
+1 -1
View File
@@ -93,7 +93,7 @@ export const initialState = (): FlowState => ({
zoomActivationKeyCode: undefined, zoomActivationKeyCode: undefined,
hooks: createHooks(), hooks: createHooks(),
loading: false, loading: undefined,
markerEndId: undefined, markerEndId: undefined,
storageKey: undefined, storageKey: undefined,