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

Merge pull request #398 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-08-04 10:46:21 +02:00
committed by GitHub
parent f0285f419e 94497090d3
commit 3a5d4f54db
9 changed files with 38 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -12,7 +12,7 @@ React Flow is a library for building node-based graphs. You can easily implement
- [Options](#options-1)
- [Node Types & Custom Nodes](#node-types--custom-nodes)
- [Handle Component](#handle-component)
- [Edges](#nodes)
- [Edges](#edges)
- [Options](#options)
- [Edge Types & Custom Edges](#edge-types--custom-edges)
- [Components](#components)

5
cypress.json
View File

@@ -1,5 +1,6 @@
{
"baseUrl": "http://localhost:3000",
"viewportWidth": 1280,
"viewportHeight": 720
}
"viewportHeight": 720,
"video": false
}

4
package.json
View File

@@ -18,7 +18,7 @@
"build:example": "npm install && npm run build && cd example && npm install && npm run build",
"cy:open": "cypress open",
"cypress": "npm run dev:wait cy:open",
"test:chrome": "cypress run --browser chrome",
"test:chrome": "cypress run --browser chrome --headless",
"test:firefox": "cypress run --browser firefox",
"test:all": "npm run test:chrome && npm run test:firefox",
"test": "npm run dev:wait test:chrome",
@@ -74,4 +74,4 @@
"files": [
"dist"
]
}
}

4
src/components/Nodes/wrapNode.tsx
View File

@@ -95,8 +95,8 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr
const dragEvt = getMouseEvent(evt);
const scaledClient = {
x: dragEvt.clientX * (1 / transform[2]),
y: dragEvt.clientY * (1 / transform[2]),
x: dragEvt.clientX / transform[2],
y: dragEvt.clientY / transform[2],
};
setDragging(true);

24
src/components/NodesSelection/index.tsx
View File

@@ -30,16 +30,16 @@ function getStartPositions(nodes: Node[]): StartPositions {
export default () => {
const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
const [startPositions, setStartPositions] = useState<StartPositions>({});
const [tX, tY, tScale] = useStoreState((s) => s.transform);
const selectedNodesBbox = useStoreState((s) => s.selectedNodesBbox);
const selectedElements = useStoreState((s) => s.selectedElements);
const snapToGrid = useStoreState((s) => s.snapToGrid);
const snapGrid = useStoreState((s) => s.snapGrid);
const nodes = useStoreState((s) => s.nodes);
const updateNodePos = useStoreActions((a) => a.updateNodePos);
const [tX, tY, tScale] = useStoreState((state) => state.transform);
const selectedNodesBbox = useStoreState((state) => state.selectedNodesBbox);
const selectedElements = useStoreState((state) => state.selectedElements);
const snapToGrid = useStoreState((state) => state.snapToGrid);
const snapGrid = useStoreState((state) => state.snapGrid);
const nodes = useStoreState((state) => state.nodes);
const updateNodePos = useStoreActions((actions) => actions.updateNodePos);
const position = selectedNodesBbox;
const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
if (!selectedElements) {
@@ -51,8 +51,8 @@ export default () => {
x: evt.clientX / tScale,
y: evt.clientY / tScale,
};
const offsetX: number = scaledClient.x - position.x - tX;
const offsetY: number = scaledClient.y - position.y - tY;
const offsetX: number = scaledClient.x - selectedNodesBbox.x - tX;
const offsetY: number = scaledClient.y - selectedNodesBbox.y - tY;
const selectedNodes = selectedElements
? selectedElements
.filter(isNode)
@@ -76,8 +76,8 @@ export default () => {
if (selectedElements) {
selectedElements.filter(isNode).forEach((node) => {
const pos: XYPosition = {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tX,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - tY,
x: startPositions[node.id].x + scaledClient.x - selectedNodesBbox.x - offset.x - tX,
y: startPositions[node.id].y + scaledClient.y - selectedNodesBbox.y - offset.y - tY,
};
updateNodePos({ id: node.id, pos });

4
src/container/EdgeRenderer/index.tsx
View File

@@ -155,9 +155,7 @@ function renderEdge(
targetPosition
);
const isSelected = selectedElements
? (selectedElements as Edge[]).some((elm) => isEdge(elm) && elm.source === sourceId && elm.target === targetId)
: false;
const isSelected = selectedElements ? selectedElements.some((elm) => isEdge(elm) && elm.id === edge.id) : false;
return (
<EdgeComponent

4
src/container/GraphView/index.tsx
View File

@@ -112,7 +112,7 @@ const GraphView = ({
const rendererNode = useRef<HTMLDivElement>(null);
const d3Initialised = useStoreState((state) => state.d3Initialised);
const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
@@ -127,7 +127,7 @@ const GraphView = ({
const onZoomPaneClick = useCallback(() => {
onPaneClick?.();
setNodesSelection({ isActive: false });
unsetNodesSelection();
}, [onPaneClick]);
useResizeHandler(rendererNode);

8
src/hooks/useGlobalKeyHandler.ts
View File

@@ -11,10 +11,10 @@ interface HookParams {
}
export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
const selectedElements = useStoreState((s) => s.selectedElements);
const edges = useStoreState((s) => s.edges);
const selectedElements = useStoreState((state) => state.selectedElements);
const edges = useStoreState((state) => state.edges);
const setNodesSelection = useStoreActions((a) => a.setNodesSelection);
const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
const deleteKeyPressed = useKeyPress(deleteKeyCode);
useEffect(() => {
@@ -29,7 +29,7 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
}
onElementsRemove(elementsToRemove);
setNodesSelection({ isActive: false });
unsetNodesSelection();
}
}, [deleteKeyPressed]);
};

49
src/store/index.ts
View File

@@ -38,11 +38,6 @@ type NodeDimensionUpdate = {
nodeElement: HTMLDivElement;
};
type SelectionUpdate = {
isActive: boolean;
selection?: SelectionRect;
};
type SetMinMaxZoom = {
minZoom: number;
maxZoom: number;
@@ -72,7 +67,6 @@ export interface StoreModel {
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
userSelectionRect: SelectionRect;
@@ -105,7 +99,7 @@ export interface StoreModel {
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
unsetNodesSelection: Action<StoreModel>;
setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
@@ -159,7 +153,6 @@ export const storeModel: StoreModel = {
nodesSelectionActive: false,
selectionActive: false,
selection: null,
userSelectionRect: {
startX: 0,
@@ -198,7 +191,6 @@ export const storeModel: StoreModel = {
}),
updateNodeDimensions: action((state, { id, nodeElement }) => {
const bounds = nodeElement.getBoundingClientRect();
const dimensions = getDimensions(nodeElement);
const matchingNode = state.nodes.find((n) => n.id === id);
@@ -210,6 +202,7 @@ export const storeModel: StoreModel = {
return;
}
const bounds = nodeElement.getBoundingClientRect();
const handleBounds = {
source: getHandleBounds('.source', nodeElement, bounds, state.transform[2]),
target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]),
@@ -231,7 +224,6 @@ export const storeModel: StoreModel = {
if (state.snapToGrid) {
const [gridSizeX, gridSizeY] = state.snapGrid;
position = {
x: gridSizeX * Math.round(pos.x / gridSizeX),
y: gridSizeY * Math.round(pos.y / gridSizeY),
@@ -281,7 +273,6 @@ export const storeModel: StoreModel = {
const nextSelectedElements = [...selectedNodes, ...selectedEdges];
const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
state.selection = nextRect;
state.userSelectionRect = nextRect;
if (selectedElementsUpdated) {
@@ -303,7 +294,6 @@ export const storeModel: StoreModel = {
const selectedNodesBbox = getRectOfNodes(selectedNodes);
state.selection = state.userSelectionRect;
state.nodesSelectionActive = true;
state.selectedNodesBbox = selectedNodesBbox;
@@ -315,27 +305,9 @@ export const storeModel: StoreModel = {
state.selectionActive = isActive;
}),
setNodesSelection: action((state, { isActive, selection }) => {
if (!isActive || typeof selection === 'undefined') {
state.nodesSelectionActive = false;
state.selectedElements = null;
return;
}
const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
if (!selectedNodes.length) {
state.nodesSelectionActive = false;
state.selectedElements = null;
return;
}
const selectedNodesBbox = getRectOfNodes(selectedNodes);
state.selection = selection;
state.nodesSelectionActive = true;
state.selectedNodesBbox = selectedNodesBbox;
unsetNodesSelection: action((state) => {
state.nodesSelectionActive = false;
state.selectedElements = null;
}),
setSelectedElements: action((state, elements) => {
@@ -424,19 +396,20 @@ export const storeModel: StoreModel = {
fitView: action((state, payload = { padding: 0.1 }) => {
const { padding } = payload;
const { nodes, width, height, d3Selection, d3Zoom } = state;
const { nodes, width, height, d3Selection, minZoom, maxZoom } = state;
if (!d3Selection || !d3Zoom || !nodes.length) {
if (!d3Selection || !nodes.length) {
return;
}
const bounds = getRectOfNodes(nodes);
const maxBoundsSize = Math.max(bounds.width, bounds.height);
const k = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding);
const zoom = Math.min(width, height) / (maxBoundsSize + maxBoundsSize * padding);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const transform = [width / 2 - boundsCenterX * k, height / 2 - boundsCenterY * k];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(k);
const transform = [width / 2 - boundsCenterX * clampedZoom, height / 2 - boundsCenterY * clampedZoom];
const fittedTransform = zoomIdentity.translate(transform[0], transform[1]).scale(clampedZoom);
// we need to sync the d3 zoom transform with the fitted transform
d3Selection.property('__zoom', fittedTransform);