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

Merge branch 'develop' of github.com:wbkd/react-flow into develop

Browse Source
This commit is contained in:
moklick
2020-08-04 09:55:57 +02:00
parent 6100d02263 6cb3c707bf
commit 051bc8cd73
8 changed files with 37 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
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)
cypress.json
+3 -2
View File
@@ -1,5 +1,6 @@
{
"baseUrl": "http://localhost:3000",
"viewportWidth": 1280,
"viewportHeight": 720
}
"viewportHeight": 720,
"video": false
}
package.json
+2 -2
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"
]
}
}
src/components/Nodes/wrapNode.tsx
+2 -2
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);
src/components/NodesSelection/index.tsx
+12 -12
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 });
src/container/GraphView/index.tsx
+2 -2
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);
src/hooks/useGlobalKeyHandler.ts
+4 -4
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]);
};
src/store/index.ts
+11 -33
View File
@@ -38,11 +38,6 @@ type NodeDimensionUpdate = {
nodeElement: HTMLDivElement;
};
type SelectionUpdate = {
isActive: boolean;
selection?: SelectionRect;
};
type SetMinMaxZoom = {
minZoom: number;
maxZoom: number;
@@ -105,7 +100,7 @@ export interface StoreModel {
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
unsetNodesSelection: Action<StoreModel>;
setSelectedElements: Action<StoreModel, Elements | Node | Edge>;
@@ -198,7 +193,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 +204,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]),
@@ -315,27 +310,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 +401,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);