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

Merge pull request #541 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-09-30 18:08:44 +02:00
committed by GitHub
parent 2f218e30fd 284968ad54
commit 541ea89cd7
19 changed files with 168 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6 -5
View File
@@ -76,7 +76,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `defaultZoom`: default: `1` - `defaultZoom`: default: `1`
- `defaultPosition`: default: `[0, 0]` - `defaultPosition`: default: `[0, 0]`
- `snapToGrid`: default: `false` - `snapToGrid`: default: `false`
- `snapGrid`: [x, y] array - default: `[16, 16]` - `snapGrid`: [x, y] array - default: `[15, 15]`
- `onlyRenderVisibleNodes`: default: `true` - `onlyRenderVisibleNodes`: default: `true`
- `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent) - `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent)
@@ -118,7 +118,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
#### Element Customization #### Element Customization
- `nodeTypes`: object with [node types](#node-types--custom-nodes) - `nodeTypes`: object with [node types](#node-types--custom-nodes)
- `edgeTypes`: object with [edge types](#edge-types--custom-edges) - `edgeTypes`: object with [edge types](#edge-types--custom-edges)
- `arrowHeadColor`: default: `#bbb` - `arrowHeadColor`: default: `#b1b1b7`
#### Connection Line Options #### Connection Line Options
- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep` - `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
@@ -405,9 +405,9 @@ const FlowWithBackground = () => (
### Prop Types ### Prop Types
- `variant`: string - has to be 'dots' or 'lines' - default: `dots` - `variant`: string - has to be 'dots' or 'lines' - default: `dots`
- `gap`: number - the gap between the dots or lines - default: `16` - `gap`: number - the gap between the dots or lines - default: `15`
- `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5` - `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
- `color`: string - the color of the dots or lines - default: `#999` for dots, `#eee` for lines - `color`: string - the color of the dots or lines - default: `#81818a` for dots, `#eee` for lines
- `style`: css properties - `style`: css properties
- `className`: additional class name - `className`: additional class name
@@ -437,6 +437,7 @@ const FlowWithMiniMap = () => (
### Prop Types ### Prop Types
- `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node. - `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node.
- `nodeStrokeColor`: string or function - If you pass a color as a string all nodes will get that stroke color. If you pass a function you can return a color depending on the passed node.
- `nodeBorderRadius`: number - `nodeBorderRadius`: number
- `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map - `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map
- `maskColor`: string - `maskColor`: string
@@ -543,7 +544,7 @@ The React Flow wrapper has the className `react-flow`. If you want to change the
You could achieve the same effect by passing a style prop to the `ReactFlow` component: You could achieve the same effect by passing a style prop to the `ReactFlow` component:
```javascript ```javascript
const style = { background: 'red', width: '100%' height: '300px' }; const style = { background: 'red', height: '300px' };
const FlowWithRedBg = ( const FlowWithRedBg = (
<ReactFlow <ReactFlow
cypress/integration/flow/basic.spec.js
+2 -2
View File
@@ -25,7 +25,7 @@ describe('Basic Flow Rendering', () => {
}); });
it('selects an edge by click', () => { it('selects an edge by click', () => {
cy.get('.react-flow__edge:first').click().should('have.class', 'selected'); cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
}); });
it('deselects edge', () => { it('deselects edge', () => {
@@ -71,7 +71,7 @@ describe('Basic Flow Rendering', () => {
}); });
it('selects an edge', () => { it('selects an edge', () => {
cy.get('.react-flow__edge:first').click().should('have.class', 'selected'); cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
}); });
it('drags a node', () => { it('drags a node', () => {
cypress/integration/flow/interaction.spec.js
+1 -1
View File
@@ -93,7 +93,7 @@ describe('Interaction Flow Rendering', () => {
}); });
it('selects an edge by click', () => { it('selects an edge by click', () => {
cy.get('.react-flow__edge:first').click().should('have.class', 'selected'); cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
}); });
it('toggles connectable mode', () => { it('toggles connectable mode', () => {
example/src/CustomNode/ColorSelectorNode.js
+3 -3
View File
@@ -8,15 +8,15 @@ export default memo(({ data }) => {
<Handle <Handle
type="target" type="target"
position="left" position="left"
style={{ background: '#fff' }} style={{ background: '#555' }}
onConnect={(params) => console.log('handle onConnect', params)} onConnect={(params) => console.log('handle onConnect', params)}
/> />
<div> <div>
Custom Color Picker Node: <strong>{data.color}</strong> Custom Color Picker Node: <strong>{data.color}</strong>
</div> </div>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} /> <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
<Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} /> <Handle type="source" position="right" id="a" style={{ top: 10, background: '#555' }} />
<Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} /> <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#555' }} />
</> </>
); );
}); });
example/src/CustomNode/index.js
+9 -4
View File
@@ -8,7 +8,7 @@ const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInsta
const onNodeDragStop = (event, node) => console.log('drag stop', node); const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element); const onElementClick = (event, element) => console.log('click', element);
const initBgColor = '#f0e742'; const initBgColor = '#1A192B';
const connectionLineStyle = { stroke: '#fff' }; const connectionLineStyle = { stroke: '#fff' };
const snapGrid = [16, 16]; const snapGrid = [16, 16];
@@ -78,12 +78,17 @@ const CustomNodeFlow = () => {
connectionLineStyle={connectionLineStyle} connectionLineStyle={connectionLineStyle}
snapToGrid={true} snapToGrid={true}
snapGrid={snapGrid} snapGrid={snapGrid}
defaultZoom={1.5}
> >
<MiniMap <MiniMap
nodeColor={(n) => { nodeStrokeColor={(n) => {
if (n.type === 'input') return 'blue'; if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor; if (n.type === 'selectorNode') return bgColor;
if (n.type === 'output') return 'green'; if (n.type === 'output') return '#ff0072';
}}
nodeColor={(n) => {
if (n.type === 'selectorNode') return bgColor;
return '#fff';
}} }}
/> />
<Controls /> <Controls />
example/src/Horizontal/index.js
+16 -2
View File
@@ -26,8 +26,22 @@ const initialElements = [
{ id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } }, { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
{ id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } }, { id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
{ id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } }, { id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
{ id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } }, {
{ id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } }, id: '7',
type: 'output',
sourcePosition: 'right',
targetPosition: 'left',
data: { label: 'Node 7' },
position: { x: 750, y: 50 },
},
{
id: '8',
type: 'output',
sourcePosition: 'right',
targetPosition: 'left',
data: { label: 'Node 8' },
position: { x: 750, y: 300 },
},
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }, { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
{ id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true }, { id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true },
example/src/Overview/index.js
+11 -5
View File
@@ -54,7 +54,7 @@ const initialElements = [
), ),
}, },
position: { x: 400, y: 100 }, position: { x: 400, y: 100 },
style: { background: '#eee', color: '#222', border: '1px solid #bbb', width: 180 }, style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
}, },
{ {
id: '4', id: '4',
@@ -139,14 +139,20 @@ const OverviewFlow = () => {
snapGrid={snapGrid} snapGrid={snapGrid}
> >
<MiniMap <MiniMap
nodeColor={(n) => { nodeStrokeColor={(n) => {
if (n.style?.background) return n.style.background; if (n.style?.background) return n.style.background;
if (n.type === 'input') return '#9999ff'; if (n.type === 'input') return '#0041d0';
if (n.type === 'output') return '#79c9b7'; if (n.type === 'output') return '#ff0072';
if (n.type === 'default') return '#ff6060'; if (n.type === 'default') return '#1a192b';
return '#eee'; return '#eee';
}} }}
nodeColor={(n) => {
if (n.style?.background) return n.style.background;
return '#fff';
}}
borderRadius={2}
/> />
<Controls /> <Controls />
<Background color="#aaa" gap={16} /> <Background color="#aaa" gap={16} />
example/src/index.css
+8 -4
View File
@@ -138,18 +138,22 @@ nav a.active:before {
} }
.react-flow__node.dark-node { .react-flow__node.dark-node {
background: #333; background: #0041d0;
color: #f8f8f8; color: #f8f8f8;
} }
.react-flow__node-selectorNode { .react-flow__node-selectorNode {
font-size: 12px; font-size: 12px;
background: #eee; background: #f0f2f3;
border: 1px solid #555; border: 1px solid 555;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
} }
.react-flow__node-selectorNode .react-flow__handle {
border-color: #f0f2f3;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
nav { nav {
position: relative; position: relative;
@@ -176,4 +180,4 @@ nav a.active:before {
.overview-example__add { .overview-example__add {
display: block; display: block;
} }
} }
package-lock.json
Generated
+6 -6
View File
@@ -11241,9 +11241,9 @@
} }
}, },
"rollup": { "rollup": {
"version": "2.27.1", "version": "2.28.2",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.27.1.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.28.2.tgz",
"integrity": "sha512-GiWHQvnmMgBktSpY/1+nrGpwPsTw4b9P28og2uedfeq4JZ16rzAmnQ5Pm/E0/BEmDNia1ZbY7+qu3nBgNa19Hg==", "integrity": "sha512-8txbsFBFLmm9Xdt4ByTOGa9Muonmc8MfNjnGAR8U8scJlF1ZW7AgNZa7aqBXaKtlvnYP/ab++fQIq9dB9NWUbg==",
"dev": true, "dev": true,
"requires": { "requires": {
"fsevents": "~2.1.2" "fsevents": "~2.1.2"
@@ -11570,9 +11570,9 @@
} }
}, },
"rollup-plugin-typescript2": { "rollup-plugin-typescript2": {
"version": "0.27.2", "version": "0.27.3",
"resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.2.tgz", "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.27.3.tgz",
"integrity": "sha512-zarMH2F8oT/NO6p20gl/jkts+WxyzOlhOIUwUU/EDx5e6ewdDPS/flwLj5XFuijUCr64bZwqKuRVwCPdXXYefQ==", "integrity": "sha512-gmYPIFmALj9D3Ga1ZbTZAKTXq1JKlTQBtj299DXhqYz9cL3g/AQfUvbb2UhH+Nf++cCq941W2Mv7UcrcgLzJJg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@rollup/pluginutils": "^3.1.0", "@rollup/pluginutils": "^3.1.0",
package.json
+2 -2
View File
@@ -52,7 +52,7 @@
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"release-it": "^14.0.3", "release-it": "^14.0.3",
"rollup": "^2.27.1", "rollup": "^2.28.2",
"rollup-plugin-babel": "^4.4.0", "rollup-plugin-babel": "^4.4.0",
"rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-commonjs": "^10.1.0",
@@ -63,7 +63,7 @@
"rollup-plugin-replace": "^2.2.0", "rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.4", "rollup-plugin-serve": "^1.0.4",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.27.2", "rollup-plugin-typescript2": "^0.27.3",
"rollup-plugin-uglify": "^6.0.4", "rollup-plugin-uglify": "^6.0.4",
"start-server-and-test": "^1.11.4", "start-server-and-test": "^1.11.4",
"typescript": "^4.0.3" "typescript": "^4.0.3"
src/additional-components/Background/index.tsx
+2 -2
View File
@@ -15,13 +15,13 @@ interface BackgroundProps extends HTMLAttributes<SVGElement> {
} }
const defaultColors = { const defaultColors = {
[BackgroundVariant.Dots]: '#999', [BackgroundVariant.Dots]: '#81818a',
[BackgroundVariant.Lines]: '#eee', [BackgroundVariant.Lines]: '#eee',
}; };
const Background = ({ const Background = ({
variant = BackgroundVariant.Dots, variant = BackgroundVariant.Dots,
gap = 24, gap = 15,
size = 0.5, size = 0.5,
color, color,
style, style,
src/additional-components/MiniMap/MiniMapNode.tsx
+6 -3
View File
@@ -6,13 +6,14 @@ interface MiniMapNodeProps {
y: number; y: number;
width: number; width: number;
height: number; height: number;
color: string;
className: string;
borderRadius: number; borderRadius: number;
className: string;
color: string;
strokeColor: string;
style?: CSSProperties; style?: CSSProperties;
} }
const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => { const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className, borderRadius }: MiniMapNodeProps) => {
const { background, backgroundColor } = style || {}; const { background, backgroundColor } = style || {};
const fill = (color || background || backgroundColor) as string; const fill = (color || background || backgroundColor) as string;
@@ -26,6 +27,8 @@ const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadiu
width={width} width={width}
height={height} height={height}
fill={fill} fill={fill}
stroke={strokeColor}
strokeWidth={2}
/> />
); );
}; };
src/additional-components/MiniMap/index.tsx
+9 -3
View File
@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> { interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
nodeColor?: string | StringFunc; nodeColor?: string | StringFunc;
nodeStrokeColor?: string | StringFunc;
nodeClassName?: string | StringFunc; nodeClassName?: string | StringFunc;
nodeBorderRadius?: number; nodeBorderRadius?: number;
maskColor?: string; maskColor?: string;
@@ -21,12 +22,13 @@ const defaultWidth = 200;
const defaultHeight = 150; const defaultHeight = 150;
const MiniMap = ({ const MiniMap = ({
style = { backgroundColor: '#f8f8f8' }, style = { backgroundColor: '#fff' },
className, className,
nodeColor = '#ddd', nodeStrokeColor = '#555',
nodeColor = '#fff',
nodeClassName = '', nodeClassName = '',
nodeBorderRadius = 5, nodeBorderRadius = 5,
maskColor = 'rgba(10, 10, 10, .25)', maskColor = '#F0F2F3',
}: MiniMapProps) => { }: MiniMapProps) => {
const containerWidth = useStoreState((s) => s.width); const containerWidth = useStoreState((s) => s.width);
const containerHeight = useStoreState((s) => s.height); const containerHeight = useStoreState((s) => s.height);
@@ -37,6 +39,9 @@ const MiniMap = ({
const elementWidth = (style.width || defaultWidth)! as number; const elementWidth = (style.width || defaultWidth)! as number;
const elementHeight = (style.height || defaultHeight)! as number; const elementHeight = (style.height || defaultHeight)! as number;
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc; const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
const nodeStrokeColorFunc = (nodeStrokeColor instanceof Function
? nodeStrokeColor
: () => nodeStrokeColor) as StringFunc;
const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc; const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
const hasNodes = nodes && nodes.length; const hasNodes = nodes && nodes.length;
const bb = getRectOfNodes(nodes); const bb = getRectOfNodes(nodes);
@@ -79,6 +84,7 @@ const MiniMap = ({
className={nodeClassNameFunc(node)} className={nodeClassNameFunc(node)}
color={nodeColorFunc(node)} color={nodeColorFunc(node)}
borderRadius={nodeBorderRadius} borderRadius={nodeBorderRadius}
strokeColor={nodeStrokeColorFunc(node)}
/> />
))} ))}
<path <path
src/container/GraphView/index.tsx
+3 -10
View File
@@ -188,6 +188,9 @@ const GraphView = ({
zoomOnScroll, zoomOnScroll,
zoomOnDoubleClick, zoomOnDoubleClick,
paneMoveable, paneMoveable,
defaultPosition,
defaultZoom,
translateExtent,
}); });
useEffect(() => { useEffect(() => {
@@ -205,16 +208,6 @@ const GraphView = ({
}); });
} }
const initialTransform = {
x: defaultPosition[0],
y: defaultPosition[1],
k: defaultZoom,
};
if (initialTransform.x !== 0 || initialTransform.y !== 0 || initialTransform.k !== 1) {
setInitTransform(initialTransform);
}
isInitialised.current = true; isInitialised.current = true;
} }
}, [d3Initialised, onLoad]); }, [d3Initialised, onLoad]);
src/container/NodeRenderer/index.tsx
+1
View File
@@ -83,6 +83,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
const nodesDraggable = useStoreState((s) => s.nodesDraggable); const nodesDraggable = useStoreState((s) => s.nodesDraggable);
const nodesConnectable = useStoreState((s) => s.nodesConnectable); const nodesConnectable = useStoreState((s) => s.nodesConnectable);
const elementsSelectable = useStoreState((s) => s.elementsSelectable); const elementsSelectable = useStoreState((s) => s.elementsSelectable);
const transformStyle = { const transformStyle = {
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`, transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
}; };
src/container/ReactFlow/index.tsx
+4 -4
View File
@@ -142,8 +142,8 @@ const ReactFlow = ({
onPaneScroll, onPaneScroll,
onPaneContextMenu, onPaneContextMenu,
}: ReactFlowProps) => { }: ReactFlowProps) => {
const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []); const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypes]);
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypes]);
const reactFlowClasses = cc(['react-flow', className]); const reactFlowClasses = cc(['react-flow', className]);
return ( return (
@@ -224,7 +224,7 @@ ReactFlow.defaultProps = {
deleteKeyCode: 8, deleteKeyCode: 8,
selectionKeyCode: 16, selectionKeyCode: 16,
snapToGrid: false, snapToGrid: false,
snapGrid: [16, 16], snapGrid: [15, 15],
onlyRenderVisibleNodes: true, onlyRenderVisibleNodes: true,
nodesDraggable: true, nodesDraggable: true,
nodesConnectable: true, nodesConnectable: true,
@@ -235,7 +235,7 @@ ReactFlow.defaultProps = {
maxZoom: 2, maxZoom: 2,
defaultZoom: 1, defaultZoom: 1,
defaultPosition: [0, 0], defaultPosition: [0, 0],
arrowHeadColor: '#bbb', arrowHeadColor: '#b1b1b7',
zoomOnScroll: true, zoomOnScroll: true,
zoomOnDoubleClick: true, zoomOnDoubleClick: true,
}; };
src/hooks/useD3Zoom.ts
+8 -2
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, MutableRefObject } from 'react'; import { useEffect, useRef, MutableRefObject } from 'react';
import { useStoreState, useStoreActions } from '../store/hooks'; import { useStoreState, useStoreActions } from '../store/hooks';
import { FlowTransform } from '../types'; import { FlowTransform, TranslateExtent } from '../types';
interface UseD3ZoomParams { interface UseD3ZoomParams {
zoomPane: MutableRefObject<Element | null>; zoomPane: MutableRefObject<Element | null>;
@@ -9,6 +9,9 @@ interface UseD3ZoomParams {
zoomOnScroll: boolean; zoomOnScroll: boolean;
zoomOnDoubleClick: boolean; zoomOnDoubleClick: boolean;
paneMoveable: boolean; paneMoveable: boolean;
defaultPosition: [number, number];
defaultZoom: number;
translateExtent?: TranslateExtent;
onMove?: (flowTransform?: FlowTransform) => void; onMove?: (flowTransform?: FlowTransform) => void;
onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void;
onMoveEnd?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void;
@@ -34,6 +37,9 @@ export default ({
zoomOnDoubleClick, zoomOnDoubleClick,
selectionKeyPressed, selectionKeyPressed,
paneMoveable, paneMoveable,
defaultPosition,
defaultZoom,
translateExtent,
}: UseD3ZoomParams): void => { }: UseD3ZoomParams): void => {
const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 }); const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 });
const d3Zoom = useStoreState((s) => s.d3Zoom); const d3Zoom = useStoreState((s) => s.d3Zoom);
@@ -43,7 +49,7 @@ export default ({
useEffect(() => { useEffect(() => {
if (zoomPane.current) { if (zoomPane.current) {
initD3(zoomPane.current); initD3({ zoomPane: zoomPane.current, defaultPosition, defaultZoom, translateExtent });
} }
}, []); }, []);
src/store/index.ts
+20 -4
View File
@@ -51,6 +51,12 @@ type SetSnapGrid = {
snapGrid: [number, number]; snapGrid: [number, number];
}; };
type InitD3 = {
zoomPane: Element;
defaultPosition: [number, number];
defaultZoom: number;
translateExtent?: TranslateExtent;
};
export interface StoreModel { export interface StoreModel {
width: number; width: number;
height: number; height: number;
@@ -116,7 +122,7 @@ export interface StoreModel {
updateSize: Action<StoreModel, Dimensions>; updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, Element>; initD3: Action<StoreModel, InitD3>;
setMinMaxZoom: Action<StoreModel, SetMinMaxZoom>; setMinMaxZoom: Action<StoreModel, SetMinMaxZoom>;
@@ -369,11 +375,21 @@ export const storeModel: StoreModel = {
state.height = size.height || 500; state.height = size.height || 500;
}), }),
initD3: action((state, zoomPaneNode) => { initD3: action((state, { zoomPane, defaultPosition, defaultZoom, translateExtent }) => {
const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]).translateExtent(state.translateExtent); const currentTranslateExtent = typeof translateExtent !== 'undefined' ? translateExtent : state.translateExtent;
const d3ZoomInstance = zoom().scaleExtent([state.minZoom, state.maxZoom]).translateExtent(currentTranslateExtent);
const selection = select(zoomPane).call(d3ZoomInstance);
const selection = select(zoomPaneNode).call(d3ZoomInstance); const clampedX = clamp(defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
const clampedY = clamp(defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
const clampedZoom = clamp(defaultZoom, state.minZoom, state.maxZoom);
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
selection.property('__zoom', updatedTransform);
state.transform[0] = clampedX;
state.transform[1] = clampedY;
state.transform[2] = clampedZoom;
state.d3Zoom = d3ZoomInstance; state.d3Zoom = d3ZoomInstance;
state.d3Selection = selection; state.d3Selection = selection;
state.d3Initialised = true; state.d3Initialised = true;
src/style.css
+51 -23
View File
@@ -62,12 +62,12 @@
.react-flow__edge-path { .react-flow__edge-path {
fill: none; fill: none;
stroke: #bbb; stroke: #b1b1b7;
stroke-width: 1.5; stroke-width: 1;
} }
.react-flow__edge-text { .react-flow__edge-text {
font-size: 12px; font-size: 10px;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
@@ -87,8 +87,8 @@
.react-flow__connection-path { .react-flow__connection-path {
fill: none; fill: none;
stroke: #ddd; stroke: #b1b1b7;
stroke-width: 1.5; stroke-width: 1;
} }
.react-flow__nodes { .react-flow__nodes {
@@ -117,32 +117,58 @@
font-size: 12px; font-size: 12px;
color: #222; color: #222;
text-align: center; text-align: center;
border-width: 1px;
border-style: solid;
} }
.react-flow__node-default.selectable, .react-flow__node-default.selectable,
.react-flow__node-input.selectable, .react-flow__node-input.selectable,
.react-flow__node-output.selectable { .react-flow__node-output.selectable {
&.selected,
&.selected:hover {
box-shadow: 0 0 0 1px #333;
}
&:hover { &:hover {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
} }
} }
.react-flow__node-input { .react-flow__node-input {
background: #9999ff; background: #fff;
border-color: #0041d0;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #0041d0;
}
.react-flow__handle {
background: #0041d0;
}
} }
.react-flow__node-default { .react-flow__node-default {
background: #ff6060; background: #fff;
border-color: #1a192b;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #1a192b;
}
.react-flow__handle {
background: #1a192b;
}
} }
.react-flow__node-output { .react-flow__node-output {
background: #79c9b7; background: #fff;
border-color: #ff0072;
&.selected,
&.selected:hover {
box-shadow: 0 0 0 0.5px #ff0072;
}
.react-flow__handle {
background: #ff0072;
}
} }
.react-flow__nodesselection { .react-flow__nodesselection {
@@ -165,10 +191,12 @@
.react-flow__handle { .react-flow__handle {
position: absolute; position: absolute;
width: 10px; width: 6px;
height: 8px; height: 6px;
background: rgba(255, 255, 255, 0.4); background: #555;
border: 1px solid white;
pointer-events: none; pointer-events: none;
border-radius: 100%;
&.connectable { &.connectable {
pointer-events: all; pointer-events: all;
@@ -179,24 +207,24 @@
.react-flow__handle-bottom { .react-flow__handle-bottom {
top: auto; top: auto;
left: 50%; left: 50%;
bottom: 0; bottom: -4px;
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.react-flow__handle-top { .react-flow__handle-top {
left: 50%; left: 50%;
top: 0; top: -4px;
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
.react-flow__handle-left { .react-flow__handle-left {
top: 50%; top: 50%;
left: 0; left: -4px;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.react-flow__handle-right { .react-flow__handle-right {
right: 0; right: -4px;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
} }