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

refactor(store): rename param of setState

Browse Source 
* newState -> opts

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 3b448100d6
commit f8cf71cfb8
2 changed files with 39 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/VueFlow/VueFlow.vue
+3 -28
View File
@@ -63,44 +63,19 @@ interface FlowProps extends FlowOptions {
const props = withDefaults(defineProps<FlowProps>(), { const props = withDefaults(defineProps<FlowProps>(), {
modelValue: () => [], modelValue: () => [],
edgeTypes: () => [],
nodeTypes: () => [],
connectionMode: ConnectionMode.Loose,
connectionLineType: ConnectionLineType.Bezier,
selectionKeyCode: 'Shift',
multiSelectionKeyCode: 'Meta',
zoomActivationKeyCode: 'Meta',
deleteKeyCode: 'Backspace',
snapToGrid: false, snapToGrid: false,
snapGrid: () => [15, 15],
onlyRenderVisibleElements: false, onlyRenderVisibleElements: false,
edgesUpdatable: false, edgesUpdatable: false,
nodesConnectable: true, nodesConnectable: true,
nodesDraggable: true, nodesDraggable: true,
elementsSelectable: true, elementsSelectable: true,
selectNodesOnDrag: true, selectNodesOnDrag: true,
minZoom: 0.5,
maxZoom: 2,
defaultZoom: 1,
defaultPosition: () => [0, 0],
translateExtent: () => [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
nodeExtent: () => [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
arrowHeadColor: '#b1b1b7',
preventScrolling: true, preventScrolling: true,
zoomOnScroll: true, zoomOnScroll: true,
zoomOnPinch: true, zoomOnPinch: true,
zoomOnDoubleClick: true, zoomOnDoubleClick: true,
panOnScroll: false, panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true, paneMoveable: true,
edgeUpdaterRadius: 10,
}) })
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)
@@ -231,9 +206,9 @@ export default {
</ZoomPane> </ZoomPane>
</Renderer> </Renderer>
</template> </template>
<template v-if="store.loading" #fallback> <template #fallback>
<slot v-if="!store.isReady" name="loading-indicator"> <slot name="loading-indicator">
<LoadingIndicator :label="store.loading"> <LoadingIndicator v-if="store.loading && store.loading !== '' && !store.isReady" :label="store.loading">
<slot name="loading-label" /> <slot name="loading-label" />
</LoadingIndicator> </LoadingIndicator>
</slot> </slot>
src/store/actions.ts
+36 -37
View File
@@ -104,49 +104,48 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
const addElements: FlowActions['addElements'] = (elements: Elements) => { const addElements: FlowActions['addElements'] = (elements: Elements) => {
setElements(elements, false) setElements(elements, false)
} }
const setState: FlowActions['setState'] = (newState) => { const setState: FlowActions['setState'] = (opts) => {
if (typeof newState.loading !== 'undefined') state.loading = newState.loading if (typeof opts.loading !== 'undefined') state.loading = opts.loading
if (typeof newState.panOnScroll !== 'undefined') state.panOnScroll = newState.panOnScroll if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
if (typeof newState.panOnScrollMode !== 'undefined') state.panOnScrollMode = newState.panOnScrollMode if (typeof opts.panOnScrollMode !== 'undefined') state.panOnScrollMode = opts.panOnScrollMode
if (typeof newState.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = newState.panOnScrollSpeed if (typeof opts.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = opts.panOnScrollSpeed
if (typeof newState.paneMoveable !== 'undefined') state.paneMoveable = newState.paneMoveable if (typeof opts.paneMoveable !== 'undefined') state.paneMoveable = opts.paneMoveable
if (typeof newState.zoomOnScroll !== 'undefined') state.zoomOnScroll = newState.zoomOnScroll if (typeof opts.zoomOnScroll !== 'undefined') state.zoomOnScroll = opts.zoomOnScroll
if (typeof newState.preventScrolling !== 'undefined') state.preventScrolling = newState.preventScrolling if (typeof opts.preventScrolling !== 'undefined') state.preventScrolling = opts.preventScrolling
if (typeof newState.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = newState.zoomOnDoubleClick if (typeof opts.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = opts.zoomOnDoubleClick
if (typeof newState.zoomOnPinch !== 'undefined') state.zoomOnPinch = newState.zoomOnPinch if (typeof opts.zoomOnPinch !== 'undefined') state.zoomOnPinch = opts.zoomOnPinch
if (typeof newState.defaultZoom !== 'undefined') state.defaultZoom = newState.defaultZoom if (typeof opts.defaultZoom !== 'undefined') state.defaultZoom = opts.defaultZoom
if (typeof newState.defaultPosition !== 'undefined') state.defaultPosition = newState.defaultPosition if (typeof opts.defaultPosition !== 'undefined') state.defaultPosition = opts.defaultPosition
if (typeof newState.edgeTypes !== 'undefined') state.edgeTypes = newState.edgeTypes if (typeof opts.edgeTypes !== 'undefined') state.edgeTypes = opts.edgeTypes
if (typeof newState.nodeTypes !== 'undefined') state.nodeTypes = newState.nodeTypes if (typeof opts.nodeTypes !== 'undefined') state.nodeTypes = opts.nodeTypes
if (typeof newState.storageKey !== 'undefined') state.storageKey = newState.storageKey if (typeof opts.storageKey !== 'undefined') state.storageKey = opts.storageKey
if (typeof newState.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = newState.edgeUpdaterRadius if (typeof opts.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = opts.edgeUpdaterRadius
if (typeof newState.elementsSelectable !== 'undefined') state.elementsSelectable = newState.elementsSelectable if (typeof opts.elementsSelectable !== 'undefined') state.elementsSelectable = opts.elementsSelectable
if (typeof newState.onlyRenderVisibleElements !== 'undefined') if (typeof opts.onlyRenderVisibleElements !== 'undefined') state.onlyRenderVisibleElements = opts.onlyRenderVisibleElements
state.onlyRenderVisibleElements = newState.onlyRenderVisibleElements if (typeof opts.edgesUpdatable !== 'undefined') state.edgesUpdatable = opts.edgesUpdatable
if (typeof newState.edgesUpdatable !== 'undefined') state.edgesUpdatable = newState.edgesUpdatable if (typeof opts.nodesConnectable !== 'undefined') state.nodesConnectable = opts.nodesConnectable
if (typeof newState.nodesConnectable !== 'undefined') state.nodesConnectable = newState.nodesConnectable if (typeof opts.nodesDraggable !== 'undefined') state.nodesDraggable = opts.nodesDraggable
if (typeof newState.nodesDraggable !== 'undefined') state.nodesDraggable = newState.nodesDraggable if (typeof opts.arrowHeadColor !== 'undefined') state.arrowHeadColor = opts.arrowHeadColor
if (typeof newState.arrowHeadColor !== 'undefined') state.arrowHeadColor = newState.arrowHeadColor if (typeof opts.markerEndId !== 'undefined') state.markerEndId = opts.markerEndId
if (typeof newState.markerEndId !== 'undefined') state.markerEndId = newState.markerEndId if (typeof opts.deleteKeyCode !== 'undefined') state.deleteKeyCode = opts.deleteKeyCode
if (typeof newState.deleteKeyCode !== 'undefined') state.deleteKeyCode = newState.deleteKeyCode if (typeof opts.selectionKeyCode !== 'undefined') state.selectionKeyCode = opts.selectionKeyCode
if (typeof newState.selectionKeyCode !== 'undefined') state.selectionKeyCode = newState.selectionKeyCode if (typeof opts.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = opts.zoomActivationKeyCode
if (typeof newState.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = newState.zoomActivationKeyCode if (typeof opts.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = opts.multiSelectionKeyCode
if (typeof newState.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = newState.multiSelectionKeyCode if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
if (typeof newState.snapToGrid !== 'undefined') state.snapToGrid = newState.snapToGrid if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
if (typeof newState.snapGrid !== 'undefined') state.snapGrid = newState.snapGrid if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
if (typeof newState.nodeExtent !== 'undefined') state.nodeExtent = newState.nodeExtent
if (!state.isReady) if (!state.isReady)
until(() => state.d3Zoom) until(() => state.d3Zoom)
.not.toBeUndefined() .not.toBeUndefined()
.then(() => { .then(() => {
if (typeof newState.maxZoom !== 'undefined') setMaxZoom(newState.maxZoom) if (typeof opts.maxZoom !== 'undefined') setMaxZoom(opts.maxZoom)
if (typeof newState.minZoom !== 'undefined') setMinZoom(newState.minZoom) if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
if (typeof newState.translateExtent !== 'undefined') setTranslateExtent(newState.translateExtent) if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
}) })
else { else {
if (typeof newState.maxZoom !== 'undefined') setMaxZoom(newState.maxZoom) if (typeof opts.maxZoom !== 'undefined') setMaxZoom(opts.maxZoom)
if (typeof newState.minZoom !== 'undefined') setMinZoom(newState.minZoom) if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
if (typeof newState.translateExtent !== 'undefined') setTranslateExtent(newState.translateExtent) if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
} }
} }
return { return {