alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(react/svelte): use nodeLookup

Browse Source
This commit is contained in:
moklick
2023-11-14 15:52:48 +01:00
parent a147a20f6e
commit e798e94275
33 changed files with 166 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/utils/dom.ts
+3 -1
View File
@@ -13,7 +13,6 @@ export function getPointerPosition(
): XYPosition & { xSnapped: number; ySnapped: number } {
const { x, y } = getEventPosition(event);
const pointerPos = pointToRendererPoint({ x, y }, transform);
const { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
// we need the snapped position in order to be able to skip unnecessary drag events
@@ -58,6 +57,9 @@ export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRec
};
};
// The handle bounds are calculated relative to the node element.
// We store them in the internals object of the node in order to avoid
// unnecessary recalculations.
export const getHandleBounds = (
selector: string,
nodeElement: HTMLDivElement,
packages/system/src/utils/edges/general.ts
+3 -3
View File
@@ -33,7 +33,7 @@ export type GroupedEdges<EdgeType extends EdgeBase> = {
export function groupEdgesByZLevel<EdgeType extends EdgeBase>(
edges: EdgeType[],
nodesLookup: Map<string, NodeBase>,
nodeLookup: Map<string, NodeBase>,
elevateEdgesOnSelect = false
): GroupedEdges<EdgeType>[] {
let maxLevel = -1;
@@ -43,8 +43,8 @@ export function groupEdgesByZLevel<EdgeType extends EdgeBase>(
let z = hasZIndex ? edge.zIndex! : 0;
if (elevateEdgesOnSelect) {
const targetNode = nodesLookup.get(edge.target);
const sourceNode = nodesLookup.get(edge.source);
const targetNode = nodeLookup.get(edge.target);
const sourceNode = nodeLookup.get(edge.source);
const edgeOrConnectedNodeSelected = edge.selected || targetNode?.selected || sourceNode?.selected;
const selectedZIndex = Math.max(
sourceNode?.[internalsSymbol]?.z || 0,
packages/system/src/utils/store.ts
+13 -13
View File
@@ -18,21 +18,21 @@ type ParentNodes = Record<string, boolean>;
export function updateAbsolutePositions<NodeType extends NodeBase>(
nodes: NodeType[],
nodesLookup: Map<string, NodeType>,
nodeLookup: Map<string, NodeType>,
nodeOrigin: NodeOrigin = [0, 0],
parentNodes?: ParentNodes
) {
return nodes.map((node) => {
if (node.parentNode && !nodesLookup.has(node.parentNode)) {
if (node.parentNode && !nodeLookup.has(node.parentNode)) {
throw new Error(`Parent node ${node.parentNode} not found`);
}
if (node.parentNode || parentNodes?.[node.id]) {
const parentNode = node.parentNode ? nodesLookup.get(node.parentNode) : null;
const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : null;
const { x, y, z } = calculateXYZPosition(
node,
nodes,
nodesLookup,
nodeLookup,
{
...node.position,
z: node[internalsSymbol]?.z ?? 0,
@@ -64,7 +64,7 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
export function updateNodes<NodeType extends NodeBase>(
nodes: NodeType[],
nodesLookup: Map<string, NodeType>,
nodeLookup: Map<string, NodeType>,
options: UpdateNodesOptions<NodeType> = {
nodeOrigin: [0, 0] as NodeOrigin,
elevateNodesOnSelect: true,
@@ -75,7 +75,7 @@ export function updateNodes<NodeType extends NodeBase>(
const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
const nextNodes = nodes.map((n) => {
const currentStoreNode = nodesLookup.get(n.id);
const currentStoreNode = nodeLookup.get(n.id);
const node: NodeType = {
...options.defaults,
...n,
@@ -98,12 +98,12 @@ export function updateNodes<NodeType extends NodeBase>(
},
});
nodesLookup.set(node.id, node);
nodeLookup.set(node.id, node);
return node;
});
const nodesWithPositions = updateAbsolutePositions(nextNodes, nodesLookup, options.nodeOrigin, parentNodes);
const nodesWithPositions = updateAbsolutePositions(nextNodes, nodeLookup, options.nodeOrigin, parentNodes);
return nodesWithPositions;
}
@@ -111,7 +111,7 @@ export function updateNodes<NodeType extends NodeBase>(
function calculateXYZPosition<NodeType extends NodeBase>(
node: NodeType,
nodes: NodeType[],
nodesLookup: Map<string, NodeType>,
nodeLookup: Map<string, NodeType>,
result: XYZPosition,
nodeOrigin: NodeOrigin
): XYZPosition {
@@ -119,13 +119,13 @@ function calculateXYZPosition<NodeType extends NodeBase>(
return result;
}
const parentNode = nodesLookup.get(node.parentNode)!;
const parentNode = nodeLookup.get(node.parentNode)!;
const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
return calculateXYZPosition(
parentNode,
nodes,
nodesLookup,
nodeLookup,
{
x: (result.x ?? 0) + parentNodePosition.x,
y: (result.y ?? 0) + parentNodePosition.y,
@@ -138,7 +138,7 @@ function calculateXYZPosition<NodeType extends NodeBase>(
export function updateNodeDimensions(
updates: Map<string, NodeDimensionUpdate>,
nodes: NodeBase[],
nodesLookup: Map<string, NodeBase>,
nodeLookup: Map<string, NodeBase>,
domNode: HTMLElement | null,
nodeOrigin?: NodeOrigin,
onUpdate?: (id: string, dimensions: Dimensions) => void
@@ -178,7 +178,7 @@ export function updateNodeDimensions(
},
};
nodesLookup.set(node.id, newNode);
nodeLookup.set(node.id, newNode);
return newNode;
}
packages/system/src/xydrag/XYDrag.ts
+8 -8
View File
@@ -33,7 +33,7 @@ export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBa
type StoreItems = {
nodes: NodeBase[];
nodesLookup: Map<string, NodeBase>;
nodeLookup: Map<string, NodeBase>;
edges: EdgeBase[];
nodeExtent: CoordinateExtent;
snapGrid: SnapGrid;
@@ -104,7 +104,7 @@ export function XYDrag({
function updateNodes({ x, y }: XYPosition) {
const {
nodes,
nodesLookup,
nodeLookup,
nodeExtent,
snapGrid,
snapToGrid,
@@ -169,7 +169,7 @@ export function XYDrag({
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodesLookup,
nodeLookup,
});
onDrag?.(dragEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDrag?.(dragEvent as MouseEvent, currentNode, currentNodes);
@@ -199,7 +199,7 @@ export function XYDrag({
function startDrag(event: UseDragEvent) {
const {
nodes,
nodesLookup,
nodeLookup,
multiSelectionActive,
nodesDraggable,
transform,
@@ -214,7 +214,7 @@ export function XYDrag({
dragStarted = true;
if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {
if (!nodes.find((n) => n.id === nodeId)?.selected) {
if (!nodeLookup.get(nodeId)?.selected) {
// we need to reset selected nodes when selectNodesOnDrag=false
unselectNodesAndEdges();
}
@@ -234,7 +234,7 @@ export function XYDrag({
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodesLookup,
nodeLookup,
});
onDragStart?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDragStart?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
@@ -291,7 +291,7 @@ export function XYDrag({
cancelAnimationFrame(autoPanId);
if (dragItems) {
const { nodesLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
updateNodePositions(dragItems, false, false);
@@ -300,7 +300,7 @@ export function XYDrag({
const [currentNode, currentNodes] = getEventHandlerParams({
nodeId,
dragItems,
nodesLookup,
nodeLookup,
});
onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes);
onNodeOrSelectionDragStop?.(event.sourceEvent as MouseEvent, currentNode, currentNodes);
packages/system/src/xydrag/utils.ts
+3 -3
View File
@@ -75,14 +75,14 @@ export function getDragItems<NodeType extends NodeBase>(
export function getEventHandlerParams<NodeType extends NodeBase>({
nodeId,
dragItems,
nodesLookup,
nodeLookup,
}: {
nodeId?: string;
dragItems: NodeDragItem[];
nodesLookup: Map<string, NodeType>;
nodeLookup: Map<string, NodeType>;
}): [NodeType, NodeType[]] {
const extentedDragItems: NodeType[] = dragItems.map((n) => {
const node = nodesLookup.get(n.id)!;
const node = nodeLookup.get(n.id)!;
return {
...node,