refactore(store)!: Remove transition and loading.transition property
* Tranisitions break testing and are superflous Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
@@ -54,7 +54,7 @@ const updateElements = () => {
|
||||
<template>
|
||||
<VueFlow
|
||||
v-model="elements"
|
||||
:loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }"
|
||||
loading="One moment please..."
|
||||
@load="onLoad"
|
||||
@elementsRemove="onElementsRemove"
|
||||
@connect="onConnect"
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
NodeExtent,
|
||||
NodeTypes,
|
||||
EdgeTypes,
|
||||
Loading,
|
||||
FlowOptions,
|
||||
} from '../../types'
|
||||
import Renderer from '../Renderer/Renderer.vue'
|
||||
@@ -59,7 +58,7 @@ interface FlowProps extends FlowOptions {
|
||||
zoomOnDoubleClick?: boolean
|
||||
edgeUpdaterRadius?: number
|
||||
storageKey?: string
|
||||
loading?: Loading
|
||||
loading?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FlowProps>(), {
|
||||
@@ -102,7 +101,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
|
||||
panOnScrollMode: PanOnScrollMode.Free,
|
||||
paneMoveable: true,
|
||||
edgeUpdaterRadius: 10,
|
||||
loading: false,
|
||||
})
|
||||
const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
|
||||
const store = initFlow(emit, props.id)
|
||||
@@ -136,15 +134,6 @@ until(() => store.isReady)
|
||||
{ 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 lang="ts">
|
||||
export default {
|
||||
@@ -153,105 +142,103 @@ export default {
|
||||
</script>
|
||||
<template>
|
||||
<div class="vue-flow">
|
||||
<Transition :name="transitionName">
|
||||
<Suspense timeout="0">
|
||||
<template #default>
|
||||
<Renderer :key="`renderer-${store.id}`" :elements="elements">
|
||||
<ZoomPane
|
||||
:key="`zoom-pane-${store.id}`"
|
||||
:prevent-scrolling="store.preventScrolling"
|
||||
:selection-key-code="store.selectionKeyCode"
|
||||
:zoom-activation-key-code="store.zoomActivationKeyCode"
|
||||
:default-zoom="store.defaultZoom"
|
||||
:default-position="store.defaultPosition"
|
||||
:zoom-on-scroll="store.zoomOnScroll"
|
||||
:zoom-on-pinch="store.zoomOnPinch"
|
||||
:zoom-on-double-click="store.zoomOnDoubleClick"
|
||||
:pan-on-scroll="store.panOnScroll"
|
||||
:pan-on-scroll-speed="store.panOnScrollSpeed"
|
||||
:pan-on-scroll-mode="store.panOnScrollMode"
|
||||
:pane-moveable="store.paneMoveable"
|
||||
>
|
||||
<template #default="zoomPaneProps">
|
||||
<SelectionPane
|
||||
:key="`selection-pane-${store.id}`"
|
||||
:edges="store.getEdges"
|
||||
:selected-elements="store.selectedElements"
|
||||
:selection-active="store.selectionActive"
|
||||
:nodes-selection-active="store.nodesSelectionActive"
|
||||
<Suspense timeout="0">
|
||||
<template #default>
|
||||
<Renderer :key="`renderer-${store.id}`" :elements="elements">
|
||||
<ZoomPane
|
||||
:key="`zoom-pane-${store.id}`"
|
||||
:prevent-scrolling="store.preventScrolling"
|
||||
:selection-key-code="store.selectionKeyCode"
|
||||
:zoom-activation-key-code="store.zoomActivationKeyCode"
|
||||
:default-zoom="store.defaultZoom"
|
||||
:default-position="store.defaultPosition"
|
||||
:zoom-on-scroll="store.zoomOnScroll"
|
||||
:zoom-on-pinch="store.zoomOnPinch"
|
||||
:zoom-on-double-click="store.zoomOnDoubleClick"
|
||||
:pan-on-scroll="store.panOnScroll"
|
||||
:pan-on-scroll-speed="store.panOnScrollSpeed"
|
||||
:pan-on-scroll-mode="store.panOnScrollMode"
|
||||
:pane-moveable="store.paneMoveable"
|
||||
>
|
||||
<template #default="zoomPaneProps">
|
||||
<SelectionPane
|
||||
:key="`selection-pane-${store.id}`"
|
||||
:edges="store.getEdges"
|
||||
:selected-elements="store.selectedElements"
|
||||
:selection-active="store.selectionActive"
|
||||
: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"
|
||||
:delete-key-code="store.deleteKeyCode"
|
||||
:multi-selection-key-code="store.multiSelectionKeyCode"
|
||||
:selection-key-code="store.selectionKeyCode"
|
||||
:nodes-draggable="store.nodesDraggable"
|
||||
:nodes-connectable="store.nodesConnectable"
|
||||
>
|
||||
<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"
|
||||
:nodes-draggable="store.nodesDraggable"
|
||||
:nodes-connectable="store.nodesConnectable"
|
||||
<template
|
||||
v-for="nodeName of Object.keys(store.getNodeTypes)"
|
||||
#[`node-${nodeName}`]="nodeProps"
|
||||
:key="`node-${nodeName}-${store.id}`"
|
||||
>
|
||||
<template
|
||||
v-for="nodeName of Object.keys(store.getNodeTypes)"
|
||||
#[`node-${nodeName}`]="nodeProps"
|
||||
:key="`node-${nodeName}-${store.id}`"
|
||||
>
|
||||
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
|
||||
</template>
|
||||
</NodeRenderer>
|
||||
<EdgeRenderer
|
||||
:key="`edge-renderer-${store.id}`"
|
||||
:transform="store.transform"
|
||||
:dimensions="store.dimensions"
|
||||
:edges="store.getEdges"
|
||||
:edge-types="store.getEdgeTypes"
|
||||
:nodes="store.getNodes"
|
||||
:selected-elements="store.selectedElements"
|
||||
:elements-selectable="store.elementsSelectable"
|
||||
:connection-node-id="store.connectionNodeId"
|
||||
:connction-handle-id="store.connectionHandleId"
|
||||
:connection-handle-type="store.connectionHandleType"
|
||||
:connection-position="store.connectionPosition"
|
||||
:connection-mode="store.connectionMode"
|
||||
:nodes-connectable="store.nodesConnectable"
|
||||
:connection-line-type="store.connectionLineType"
|
||||
:connection-line-style="store.connectionLineStyle"
|
||||
:arrow-head-color="store.arrowHeadColor"
|
||||
:marker-end-id="store.markerEndId"
|
||||
:only-render-visible-elements="store.onlyRenderVisibleElements"
|
||||
:edges-updatable="store.edgesUpdatable"
|
||||
<slot :name="`node-${nodeName}`" v-bind="nodeProps" />
|
||||
</template>
|
||||
</NodeRenderer>
|
||||
<EdgeRenderer
|
||||
:key="`edge-renderer-${store.id}`"
|
||||
:transform="store.transform"
|
||||
:dimensions="store.dimensions"
|
||||
:edges="store.getEdges"
|
||||
:edge-types="store.getEdgeTypes"
|
||||
:nodes="store.getNodes"
|
||||
:selected-elements="store.selectedElements"
|
||||
:elements-selectable="store.elementsSelectable"
|
||||
:connection-node-id="store.connectionNodeId"
|
||||
:connction-handle-id="store.connectionHandleId"
|
||||
:connection-handle-type="store.connectionHandleType"
|
||||
:connection-position="store.connectionPosition"
|
||||
:connection-mode="store.connectionMode"
|
||||
:nodes-connectable="store.nodesConnectable"
|
||||
:connection-line-type="store.connectionLineType"
|
||||
:connection-line-style="store.connectionLineStyle"
|
||||
:arrow-head-color="store.arrowHeadColor"
|
||||
:marker-end-id="store.markerEndId"
|
||||
:only-render-visible-elements="store.onlyRenderVisibleElements"
|
||||
:edges-updatable="store.edgesUpdatable"
|
||||
>
|
||||
<template
|
||||
v-for="edgeName of Object.keys(store.getEdgeTypes)"
|
||||
#[`edge-${edgeName}`]="edgeProps"
|
||||
:key="`edge-${edgeName}-${store.id}`"
|
||||
>
|
||||
<template
|
||||
v-for="edgeName of Object.keys(store.getEdgeTypes)"
|
||||
#[`edge-${edgeName}`]="edgeProps"
|
||||
:key="`edge-${edgeName}-${store.id}`"
|
||||
>
|
||||
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
|
||||
</template>
|
||||
<template #custom-connection-line="customConnectionLineProps">
|
||||
<slot name="custom-connection-line" v-bind="customConnectionLineProps" />
|
||||
</template>
|
||||
</EdgeRenderer>
|
||||
</SelectionPane>
|
||||
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
|
||||
</template>
|
||||
</ZoomPane>
|
||||
</Renderer>
|
||||
</template>
|
||||
<template v-if="store.loading" #fallback>
|
||||
<slot :key="`loading-indicator-${store.id}`" name="loading-indicator">
|
||||
<LoadingIndicator :key="`default-loading-indicator-${store.id}`" v-bind="store.loading">
|
||||
<slot name="loading-label" />
|
||||
</LoadingIndicator>
|
||||
</slot>
|
||||
</template>
|
||||
</Suspense>
|
||||
</Transition>
|
||||
<slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
|
||||
</template>
|
||||
<template #custom-connection-line="customConnectionLineProps">
|
||||
<slot name="custom-connection-line" v-bind="customConnectionLineProps" />
|
||||
</template>
|
||||
</EdgeRenderer>
|
||||
</SelectionPane>
|
||||
<slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
|
||||
</template>
|
||||
</ZoomPane>
|
||||
</Renderer>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<slot name="loading-indicator">
|
||||
<LoadingIndicator :label="store.loading">
|
||||
<slot name="loading-label" />
|
||||
</LoadingIndicator>
|
||||
</slot>
|
||||
</template>
|
||||
</Suspense>
|
||||
<slot v-bind="store"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+1
-15
@@ -88,20 +88,6 @@ export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
|
||||
export type ProjectFunc = (position: XYPosition) => XYPosition
|
||||
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> = {
|
||||
zoomIn: () => void
|
||||
zoomOut: () => void
|
||||
@@ -151,5 +137,5 @@ export interface FlowOptions {
|
||||
preventScrolling?: boolean
|
||||
edgeUpdaterRadius?: number
|
||||
storageKey?: string
|
||||
loading?: Loading
|
||||
loading?: string
|
||||
}
|
||||
|
||||
+1
-1
@@ -93,7 +93,7 @@ export const initialState = (): FlowState => ({
|
||||
zoomActivationKeyCode: undefined,
|
||||
|
||||
hooks: createHooks(),
|
||||
loading: false,
|
||||
loading: undefined,
|
||||
|
||||
markerEndId: undefined,
|
||||
storageKey: undefined,
|
||||
|
||||
Reference in New Issue
Block a user