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

refactor: graph.ts (#47)

Browse Source
This commit is contained in:
AndyLnd
2019-10-22 16:08:45 +02:00
committed by Moritz
parent d84de2954b
commit 59caff6505
1 changed files with 27 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/graph.ts
+27 -43
View File
@@ -31,9 +31,7 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements):
}); });
}; };
function getEdgeId(edgeParams: Edge): ElementId { const getEdgeId = ({ source, target }: Edge): ElementId => `reactflow__edge-${source}-${target}`;
return `reactflow__edge-${edgeParams.source}-${edgeParams.target}`;
}
export const addEdge = (edgeParams: Edge, elements: Elements): Elements => { export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
if (!edgeParams.source || !edgeParams.target) { if (!edgeParams.source || !edgeParams.target) {
@@ -48,20 +46,20 @@ export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
const pointToRendererPoint = ( const pointToRendererPoint = (
{ x, y }: XYPosition, { x, y }: XYPosition,
transform: Transform, [tx, ty, tScale]: Transform,
snapToGrid: boolean, snapToGrid: boolean,
snapGrid: [number, number] [snapX, snapY]: [number, number]
): XYPosition => { ): XYPosition => {
let position: XYPosition = { const position: XYPosition = {
x: (x - transform[0]) * (1 / transform[2]), x: (x - tx) / tScale,
y: (y - transform[1]) * (1 / transform[2]), y: (y - ty) / tScale,
}; };
if (snapToGrid) { if (snapToGrid) {
const transformedGridSizeX = snapGrid[0] * transform[2]; const transformedGridSizeX = snapX * tScale;
const transformedGridSizeY = snapGrid[1] * transform[2]; const transformedGridSizeY = snapY * tScale;
position = { return {
x: transformedGridSizeX * Math.round(position.x / transformedGridSizeX), x: transformedGridSizeX * Math.round(position.x / transformedGridSizeX),
y: transformedGridSizeY * Math.round(position.y / transformedGridSizeY), y: transformedGridSizeY * Math.round(position.y / transformedGridSizeY),
}; };
@@ -137,12 +135,10 @@ export const getRectOfNodes = (nodes: Node[]): Rect => {
return boxToRect(box); return boxToRect(box);
}; };
export const graphPosToZoomedPos = (pos: XYPosition, transform: Transform): XYPosition => { export const graphPosToZoomedPos = ({ x, y }: XYPosition, [tx, ty, tScale]: Transform): XYPosition => ({
return { x: x * tScale + tx,
x: pos.x * transform[2] + transform[0], y: y * tScale + ty,
y: pos.y * transform[2] + transform[1], });
};
};
export const getNodesInside = ( export const getNodesInside = (
nodes: Node[], nodes: Node[],
@@ -172,50 +168,38 @@ export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
const nodeIds = nodes.map(n => n.id); const nodeIds = nodes.map(n => n.id);
return edges.filter(e => { return edges.filter(e => {
const hasSourceHandleId = e.source.includes('__'); const sourceId = e.source.split('__')[0];
const hasTargetHandleId = e.target.includes('__'); const targetId = e.target.split('__')[0];
const sourceId = hasSourceHandleId ? e.source.split('__')[0] : e.source;
const targetId = hasTargetHandleId ? e.target.split('__')[0] : e.target;
return nodeIds.includes(sourceId) || nodeIds.includes(targetId); return nodeIds.includes(sourceId) || nodeIds.includes(targetId);
}); });
}; };
export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => { export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => {
const state = store.getState(); const { nodes, width, height, d3Selection, d3Zoom } = store.getState();
if (!state.d3Selection || !state.d3Zoom) { if (!d3Selection || !d3Zoom) {
return; return;
} }
const bounds = getRectOfNodes(state.nodes); const bounds = getRectOfNodes(nodes);
const maxBoundsSize = Math.max(bounds.width, bounds.height); const maxBoundsSize = Math.max(bounds.width, bounds.height);
const k = Math.min(state.width, state.height) / (maxBoundsSize + maxBoundsSize * padding); const k = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding);
const boundsCenterX = bounds.x + bounds.width / 2; const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2; const boundsCenterY = bounds.y + bounds.height / 2;
const transform = [state.width / 2 - boundsCenterX * k, state.height / 2 - boundsCenterY * k]; const transform = [width / 2 - boundsCenterX * k, height / 2 - boundsCenterY * k];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k); const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
state.d3Selection.call(state.d3Zoom.transform, fittedTransform); d3Selection.call(d3Zoom.transform, fittedTransform);
}; };
export const zoomIn = (): void => { const zoom = (amount: number): void => {
const state = store.getState(); const { d3Zoom, d3Selection, transform } = store.getState();
if (d3Zoom && d3Selection) {
if (!state.d3Zoom || !state.d3Selection) { d3Zoom.scaleTo(d3Selection, transform[2] + amount);
return;
} }
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
}; };
export const zoomOut = (): void => { export const zoomIn = (): void => zoom(0.2);
const state = store.getState();
if (!state.d3Zoom || !state.d3Selection) { export const zoomOut = (): void => zoom(-0.2);
return;
}
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
};