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

develop (#43)

Browse Source 
* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch
This commit is contained in:
Moritz
2019-10-21 20:58:28 +02:00
committed by GitHub
parent ce210eb5dc
commit a793f8c2ff
80 changed files with 2634 additions and 1247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/graph.ts
+127 -70
View File
@@ -1,9 +1,18 @@
import { zoomIdentity } from 'd3-zoom';
import store from '../store';
import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
import {
ElementId,
Node,
Edge,
Elements,
Transform,
XYPosition,
Rect,
FitViewParams,
} from '../types';
export const isEdge = (element: Node | Edge): boolean =>
export const isEdge = (element: Node | Edge): boolean =>
element.hasOwnProperty('source') && element.hasOwnProperty('target');
export const isNode = (element: Node | Edge): boolean =>
@@ -14,14 +23,19 @@ export const getOutgoers = (node: Node, elements: Elements): Elements => {
return [];
}
const outgoerIds = elements.filter((e: Edge) => e.source === node.id).map((e: Edge) => e.target);
const outgoerIds = (elements as Edge[])
.filter(e => e.source === node.id)
.map(e => e.target);
return elements.filter(e => outgoerIds.includes(e.id));
};
export const removeElements = (elementsToRemove: Elements, elements: Elements): Elements => {
export const removeElements = (
elementsToRemove: Elements,
elements: Elements
): Elements => {
const nodeIdsToRemove = elementsToRemove.map(n => n.id);
return elements.filter((element) => {
return elements.filter(element => {
const edgeElement = element as Edge;
return !(
nodeIdsToRemove.includes(element.id) ||
@@ -36,36 +50,45 @@ function getEdgeId(edgeParams: Edge): ElementId {
}
export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
if (!edgeParams.source || !edgeParams.target) {
if (!edgeParams.source || !edgeParams.target) {
throw new Error('Can not create edge. An edge needs a source and a target');
}
return elements.concat({
...edgeParams,
id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams)
id:
typeof edgeParams.id !== 'undefined'
? edgeParams.id
: getEdgeId(edgeParams),
});
}
};
const pointToRendererPoint = ({ x, y }: XYPosition, transform: Transform): XYPosition => {
const pointToRendererPoint = (
{ x, y }: XYPosition,
transform: Transform
): XYPosition => {
const rendererX = (x - transform[0]) * (1 / transform[2]);
const rendererY = (y - transform[1]) * (1 / transform[2]);
return {
x: rendererX,
y: rendererY
y: rendererY,
};
};
export const parseElement = (element: Node | Edge, transform?: Transform): Node | Edge => {
export const parseElement = (
element: Node | Edge,
transform: Transform = [0, 0, 1]
): Node | Edge => {
if (!element.id) {
throw new Error('All elements (nodes and edges) need to have an id.',)
throw new Error('All elements (nodes and edges) need to have an id.');
}
if (isEdge(element)) {
return {
...element,
id: element.id.toString(),
type: element.type || 'default'
type: element.type || 'default',
};
}
@@ -79,76 +102,88 @@ export const parseElement = (element: Node | Edge, transform?: Transform): Node
position: pointToRendererPoint(nodeElement.position, transform),
width: null,
height: null,
handleBounds : {}
}
handleBounds: {},
},
};
};
export const getBoundingBox = (nodes: Node[]): Rect => {
const bbox = nodes.reduce((res, node) => {
const { position } = node.__rg;
const x2 = position.x + node.__rg.width;
const y2 = position.y + node.__rg.height;
const bbox = nodes.reduce(
(res, node) => {
const { position } = node.__rg;
const x2 = position.x + node.__rg.width;
const y2 = position.y + node.__rg.height;
if (position.x < res.minX) {
res.minX = position.x;
if (position.x < res.minX) {
res.minX = position.x;
}
if (x2 > res.maxX) {
res.maxX = x2;
}
if (position.y < res.minY) {
res.minY = position.y;
}
if (y2 > res.maxY) {
res.maxY = y2;
}
return res;
},
{
minX: Number.MAX_VALUE,
minY: Number.MAX_VALUE,
maxX: 0,
maxY: 0,
}
if (x2 > res.maxX) {
res.maxX = x2;
}
if (position.y < res.minY) {
res.minY = position.y;
}
if (y2 > res.maxY) {
res.maxY = y2;
}
return res;
}, {
minX: Number.MAX_VALUE,
minY: Number.MAX_VALUE,
maxX: 0,
maxY: 0
});
);
return {
x: bbox.minX,
y: bbox.minY,
width: bbox.maxX - bbox.minX,
height: bbox.maxY - bbox.minY
height: bbox.maxY - bbox.minY,
};
};
export const graphPosToZoomedPos = (pos: XYPosition, transform: Transform): XYPosition => {
export const graphPosToZoomedPos = (
pos: XYPosition,
transform: Transform
): XYPosition => {
return {
x: (pos.x * transform[2]) + transform[0],
y: (pos.y * transform[2]) + transform[1]
x: pos.x * transform[2] + transform[0],
y: pos.y * transform[2] + transform[1],
};
}
};
export const getNodesInside = (nodes: Node[], bbox: Rect, transform: Transform = [0, 0, 1], partially: boolean = false): Node[] => {
return nodes
.filter(n => {
const bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
y: (bbox.y - transform[1]) * (1 / transform[2])
};
const bboxWidth = bbox.width * (1 / transform[2]);
const bboxHeight = bbox.height * (1 / transform[2]);
const { position, width, height } = n.__rg;
const nodeWidth = partially ? -width : width;
const nodeHeight = partially ? 0 : height;
const offsetX = partially ? width : 0;
const offsetY = partially ? height : 0;
export const getNodesInside = (
nodes: Node[],
bbox: Rect,
transform: Transform = [0, 0, 1],
partially: boolean = false
): Node[] => {
return nodes.filter(n => {
const bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
y: (bbox.y - transform[1]) * (1 / transform[2]),
};
const bboxWidth = bbox.width * (1 / transform[2]);
const bboxHeight = bbox.height * (1 / transform[2]);
const { position, width, height } = n.__rg;
const nodeWidth = partially ? -width : width;
const nodeHeight = partially ? 0 : height;
const offsetX = partially ? width : 0;
const offsetY = partially ? height : 0;
return (
(position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
(position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight))
);
});
return (
position.x + offsetX > bboxPos.x &&
position.x + nodeWidth < bboxPos.x + bboxWidth &&
(position.y + offsetY > bboxPos.y &&
position.y + nodeHeight < bboxPos.y + bboxHeight)
);
});
};
export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
@@ -167,23 +202,45 @@ export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
export const fitView = ({ padding }: FitViewParams = { padding: 0 }): void => {
const state = store.getState();
if (!state.d3Selection || !state.d3Zoom) {
return;
}
const bounds = getBoundingBox(state.nodes);
const maxBoundsSize = Math.max(bounds.width, bounds.height);
const k = Math.min(state.width, state.height) / (maxBoundsSize + (maxBoundsSize * padding));
const boundsCenterX = bounds.x + (bounds.width / 2);
const boundsCenterY = bounds.y + (bounds.height / 2);
const transform = [(state.width / 2) - (boundsCenterX * k), (state.height / 2) - (boundsCenterY * k)];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
const k =
Math.min(state.width, state.height) /
(maxBoundsSize + maxBoundsSize * padding);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const transform = [
state.width / 2 - boundsCenterX * k,
state.height / 2 - boundsCenterY * k,
];
const fittedTransform = zoomIdentity
.translate(transform[0], transform[1])
.scale(k);
state.d3Selection.call(state.d3Zoom.transform, fittedTransform);
};
export const zoomIn = (): void => {
const state = store.getState();
if (!state.d3Zoom || !state.d3Selection) {
return;
}
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] + 0.2);
};
export const zoomOut = (): void => {
const state = store.getState();
if (!state.d3Zoom || !state.d3Selection) {
return;
}
state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
};
src/utils/index.ts
+7 -3
View File
@@ -1,12 +1,16 @@
import { DraggableEvent } from 'react-draggable';
import { MouseEvent as ReactMouseEvent } from 'react';
export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
export const isInputDOMNode = (
e: ReactMouseEvent | DraggableEvent | KeyboardEvent
) => {
const target = e.target as HTMLElement;
return e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
return (
e && target && ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName)
);
};
export const getDimensions = (node: HTMLDivElement) => ({
width: node.offsetWidth,
height: node.offsetHeight
height: node.offsetHeight,
});