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

chore(lint): Update eslint rules

Browse Source 
* Remove semi
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 5ed1094dfe
commit 77eac0c12a
74 changed files with 2007 additions and 1827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/configure-store.ts
+91 -91
View File
@@ -1,20 +1,20 @@
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia';
import isEqual from 'fast-deep-equal';
import { Edge, Node, NodeDiffUpdate, RevueFlowState, RevueFlowActions, XYPosition } from '../types';
import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '../utils/graph';
import { clampPosition, getDimensions } from '../utils';
import { getHandleBounds } from '../components/Nodes/utils';
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
import isEqual from 'fast-deep-equal'
import { Edge, Node, NodeDiffUpdate, RevueFlowState, RevueFlowActions, XYPosition } from '../types'
import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '../utils/graph'
import { clampPosition, getDimensions } from '../utils'
import { getHandleBounds } from '../components/Nodes/utils'
type NextElements = {
nextNodes: Node[];
nextEdges: Edge[];
};
const pinia = createPinia();
nextNodes: Node[]
nextEdges: Edge[]
}
const pinia = createPinia()
export default function configureStore(
preloadedState: RevueFlowState
): StoreDefinition<string, RevueFlowState, any, RevueFlowActions> {
setActivePinia(pinia);
setActivePinia(pinia)
return defineStore({
id: 'revue-flow-' + Math.random(),
@@ -24,66 +24,66 @@ export default function configureStore(
getters: {},
actions: {
setElements(elements) {
const propElements = elements;
const propElements = elements
const nextElements: NextElements = {
nextNodes: [],
nextEdges: []
};
}
const { nextNodes, nextEdges } = propElements.reduce((res, propElement): NextElements => {
if (isNode(propElement)) {
const storeNode = this.nodes.find((node) => node.id === propElement.id);
const storeNode = this.nodes.find((node) => node.id === propElement.id)
if (storeNode) {
const updatedNode: Node = {
...storeNode,
...propElement
};
}
if (storeNode.position.x !== propElement.position.x || storeNode.position.y !== propElement.position.y) {
updatedNode.__rf.position = propElement.position;
updatedNode.__rf.position = propElement.position
}
if (typeof propElement.type !== 'undefined' && propElement.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.
// When the type of a node changes it is possible that the number or positions of handles changes too.
updatedNode.__rf.width = null;
updatedNode.__rf.width = null
}
res.nextNodes.push(updatedNode);
res.nextNodes.push(updatedNode)
} else {
res.nextNodes.push(parseNode(propElement, this.nodeExtent));
res.nextNodes.push(parseNode(propElement, this.nodeExtent))
}
} else if (isEdge(propElement)) {
const storeEdge = this.edges.find((se) => se.id === propElement.id);
const storeEdge = this.edges.find((se) => se.id === propElement.id)
if (storeEdge) {
res.nextEdges.push({
...storeEdge,
...propElement
});
})
} else {
res.nextEdges.push(parseEdge(propElement));
res.nextEdges.push(parseEdge(propElement))
}
}
return res;
}, nextElements);
return res
}, nextElements)
this.nodes = nextNodes;
this.edges = nextEdges;
this.nodes = nextNodes
this.edges = nextEdges
},
updateNodeDimensions(updates) {
this.nodes = this.nodes.map((node) => {
const update = updates.find((u) => u.id === node.id);
const update = updates.find((u) => u.id === node.id)
if (update) {
const dimensions = getDimensions(update.nodeElement);
const dimensions = getDimensions(update.nodeElement)
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate);
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || update.forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(update.nodeElement, this.transform[2]);
const handleBounds = getHandleBounds(update.nodeElement, this.transform[2])
return {
...node,
@@ -92,23 +92,23 @@ export default function configureStore(
...dimensions,
handleBounds
}
};
}
}
}
return node;
});
return node
})
},
updateNodePos(payload) {
const { id, pos } = payload;
let position: XYPosition = pos;
const { id, pos } = payload
let position: XYPosition = pos
if (this.snapToGrid) {
const [gridSizeX, gridSizeY] = this.snapGrid;
const [gridSizeX, gridSizeY] = this.snapGrid
position = {
x: gridSizeX * Math.round(pos.x / gridSizeX),
y: gridSizeY * Math.round(pos.y / gridSizeY)
};
}
}
this.nodes = this.nodes.map((node) => {
@@ -119,14 +119,14 @@ export default function configureStore(
...node.__rf,
position
}
};
}
}
return node;
});
return node
})
},
updateNodePosDiff(payload: NodeDiffUpdate) {
const { id, diff, isDragging } = payload;
const { id, diff, isDragging } = payload
this.nodes = this.nodes.map((node) => {
if (id === node.id || this.selectedElements?.find((sNode) => sNode.id === node.id)) {
@@ -136,23 +136,23 @@ export default function configureStore(
...node.__rf,
isDragging
}
};
}
if (diff) {
updatedNode.__rf.position = {
x: node.__rf.position.x + diff.x,
y: node.__rf.position.y + diff.y
};
}
}
return updatedNode;
return updatedNode
}
return node;
});
return node
})
},
setUserSelection(mousePos) {
this.selectionActive = true;
this.selectionActive = true
this.userSelectionRect = {
width: 0,
height: 0,
@@ -161,11 +161,11 @@ export default function configureStore(
x: mousePos.x,
y: mousePos.y,
draw: true
};
}
},
updateUserSelection(mousePos) {
const startX = this.userSelectionRect.startX || 0;
const startY = this.userSelectionRect.startY || 0;
const startX = this.userSelectionRect.startX || 0
const startY = this.userSelectionRect.startY || 0
const nextUserSelectRect: RevueFlowState['userSelectionRect'] = {
...this.userSelectionRect,
@@ -173,59 +173,59 @@ export default function configureStore(
y: mousePos.y < startY ? mousePos.y : this.userSelectionRect.y,
width: Math.abs(mousePos.x - startX),
height: Math.abs(mousePos.y - startY)
};
}
const selectedNodes = getNodesInside(this.nodes, nextUserSelectRect, this.transform);
const selectedEdges = getConnectedEdges(selectedNodes, this.edges);
const selectedNodes = getNodesInside(this.nodes, nextUserSelectRect, this.transform)
const selectedEdges = getConnectedEdges(selectedNodes, this.edges)
const nextSelectedElements = [...selectedNodes, ...selectedEdges];
this.userSelectionRect = nextUserSelectRect;
this.selectedElements = nextSelectedElements;
const nextSelectedElements = [...selectedNodes, ...selectedEdges]
this.userSelectionRect = nextUserSelectRect
this.selectedElements = nextSelectedElements
},
unsetUserSelection() {
const selectedNodes = this.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[];
const selectedNodes = this.selectedElements?.filter((node) => isNode(node) && node.__rf) as Node[]
this.selectionActive = false;
this.userSelectionRect.draw = false;
this.selectionActive = false
this.userSelectionRect.draw = false
if (!selectedNodes || selectedNodes.length === 0) {
this.selectedElements = null;
this.nodesSelectionActive = false;
this.selectedElements = null
this.nodesSelectionActive = false
} else {
this.selectedNodesBbox = getRectOfNodes(selectedNodes);
this.nodesSelectionActive = true;
this.selectedNodesBbox = getRectOfNodes(selectedNodes)
this.nodesSelectionActive = true
}
},
addSelectedElements(elements) {
const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
const selectedElementsUpdated = !isEqual(selectedElementsArr, this.selectedElements);
this.selectedElements = selectedElementsUpdated ? selectedElementsArr : this.selectedElements;
const selectedElementsArr = Array.isArray(elements) ? elements : [elements]
const selectedElementsUpdated = !isEqual(selectedElementsArr, this.selectedElements)
this.selectedElements = selectedElementsUpdated ? selectedElementsArr : this.selectedElements
},
initD3Zoom(payload) {
const { d3Zoom, d3Selection, d3ZoomHandler, transform } = payload;
const { d3Zoom, d3Selection, d3ZoomHandler, transform } = payload
this.d3Zoom = d3Zoom;
this.d3Selection = d3Selection;
this.d3ZoomHandler = d3ZoomHandler;
this.transform = transform;
this.d3Zoom = d3Zoom
this.d3Selection = d3Selection
this.d3ZoomHandler = d3ZoomHandler
this.transform = transform
},
setMinZoom(minZoom) {
this.d3Zoom?.scaleExtent([minZoom, this.maxZoom]);
this.d3Zoom?.scaleExtent([minZoom, this.maxZoom])
this.minZoom = minZoom;
this.minZoom = minZoom
},
setMaxZoom(maxZoom) {
this.d3Zoom?.scaleExtent([this.minZoom, maxZoom]);
this.d3Zoom?.scaleExtent([this.minZoom, maxZoom])
this.maxZoom = maxZoom;
this.maxZoom = maxZoom
},
setTranslateExtent(translateExtent) {
this.d3Zoom?.translateExtent(translateExtent);
this.d3Zoom?.translateExtent(translateExtent)
this.translateExtent = translateExtent;
this.translateExtent = translateExtent
},
setNodeExtent(nodeExtent) {
this.nodeExtent = nodeExtent;
this.nodeExtent = nodeExtent
this.nodes = this.nodes.map((node) => {
return {
...node,
@@ -233,29 +233,29 @@ export default function configureStore(
...node.__rf,
position: clampPosition(node.__rf.position, nodeExtent)
}
};
});
}
})
},
resetSelectedElements() {
this.selectedElements = null;
this.selectedElements = null
},
unsetNodesSelection() {
this.nodesSelectionActive = false;
this.nodesSelectionActive = false
},
updateSize(size) {
this.height = size.height;
this.width = size.width;
this.height = size.height
this.width = size.width
},
setConnectionNodeId(payload) {
this.connectionNodeId = payload.connectionNodeId;
this.connectionHandleId = payload.connectionHandleId;
this.connectionHandleType = payload.connectionHandleType;
this.connectionNodeId = payload.connectionNodeId
this.connectionHandleId = payload.connectionHandleId
this.connectionHandleType = payload.connectionHandleType
},
setInteractive(isInteractive) {
this.nodesDraggable = isInteractive;
this.nodesConnectable = isInteractive;
this.elementsSelectable = isInteractive;
this.nodesDraggable = isInteractive
this.nodesConnectable = isInteractive
this.elementsSelectable = isInteractive
}
}
});
})
}
src/store/index.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { RevueFlowState, ConnectionMode } from '../types';
import { RevueFlowState, ConnectionMode } from '../types'
export const initialState: RevueFlowState = {
width: 0,
@@ -52,4 +52,4 @@ export const initialState: RevueFlowState = {
multiSelectionActive: false,
revueFlowVersion: typeof __REVUE_FLOW_VERSION__ !== 'undefined' ? __REVUE_FLOW_VERSION__ : '-'
};
}