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

Graph Prop: isInteractive (#56)

Browse Source 
* feat(props): add isInteractive

* refactor(selection): dont allow if not interactive

* feat(renderer): add class if is interactive

* chore(inactive): add tests

* refactor(inactive): no connection line, no edge selection

closes #49
This commit is contained in:
Moritz
2019-10-23 18:42:17 +02:00
committed by GitHub
parent cf4bd7199a
commit 873fb50b19
28 changed files with 2528 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/index.tsx
+6 -10
View File
@@ -10,6 +10,7 @@ interface ConnectionLineProps {
connectionLineType?: string | null;
nodes: Node[];
transform: Transform;
isInteractive: boolean;
connectionLineStyle?: SVGAttributes<{}>;
className?: string;
}
@@ -23,6 +24,7 @@ export default ({
nodes = [],
className,
transform,
isInteractive,
}: ConnectionLineProps) => {
const [sourceNode, setSourceNode] = useState<Node | null>(null);
const hasHandleId = connectionSourceId.includes('__');
@@ -35,23 +37,17 @@ export default ({
setSourceNode(nextSourceNode);
}, []);
if (!sourceNode) {
if (!sourceNode || !isInteractive) {
return null;
}
const edgeClasses: string = cx('react-flow__edge', 'connection', className);
const sourceHandle = handleId
? sourceNode.__rg.handleBounds.source.find(
(d: HandleElement) => d.id === handleId
)
? sourceNode.__rg.handleBounds.source.find((d: HandleElement) => d.id === handleId)
: sourceNode.__rg.handleBounds.source[0];
const sourceHandleX = sourceHandle
? sourceHandle.x + sourceHandle.width / 2
: sourceNode.__rg.width / 2;
const sourceHandleY = sourceHandle
? sourceHandle.y + sourceHandle.height / 2
: sourceNode.__rg.height;
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
const sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceHandleY;
src/components/Edges/wrapEdge.tsx
+3 -11
View File
@@ -13,23 +13,15 @@ interface EdgeWrapperProps {
onClick: (edge: Edge) => void;
animated: boolean;
selected: boolean;
isInteractive: boolean;
}
export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
const EdgeWrapper = memo(
({
id,
source,
target,
type,
animated,
selected,
onClick,
...rest
}: EdgeWrapperProps) => {
({ id, source, target, type, animated, selected, onClick, isInteractive, ...rest }: EdgeWrapperProps) => {
const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt: MouseEvent): void => {
if (isInputDOMNode(evt)) {
if (isInputDOMNode(evt) || !isInteractive) {
return;
}
src/components/Nodes/wrapNode.tsx
+12 -72
View File
@@ -1,11 +1,4 @@
import React, {
useEffect,
useRef,
useState,
memo,
ComponentType,
CSSProperties,
} from 'react';
import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
import { DraggableCore, DraggableEvent } from 'react-draggable';
import cx from 'classnames';
import { ResizeObserver } from 'resize-observer';
@@ -21,21 +14,9 @@ import {
Transform,
ElementId,
NodeComponentProps,
WrapNodeProps,
} from '../../types';
interface WrapNodeProps {
id: ElementId;
type: string;
data: any;
selected: boolean;
transform: Transform;
xPos: number;
yPos: number;
onClick: (node: Node) => void | undefined;
onNodeDragStop: (node: Node) => void;
style?: CSSProperties;
}
const isHandle = (evt: MouseEvent | DraggableEvent) => {
const target = evt.target as HTMLElement;
@@ -65,17 +46,13 @@ const getHandleBounds = (
const bounds = handle.getBoundingClientRect();
const dimensions = getDimensions(handle);
const nodeIdAttr = handle.getAttribute('data-nodeid');
const handlePosition = (handle.getAttribute(
'data-handlepos'
) as unknown) as Position;
const handlePosition = (handle.getAttribute('data-handlepos') as unknown) as Position;
const nodeIdSplitted = nodeIdAttr ? nodeIdAttr.split('__') : null;
let handleId = null;
if (nodeIdSplitted) {
handleId = (nodeIdSplitted.length
? nodeIdSplitted[1]
: nodeIdSplitted) as string;
handleId = (nodeIdSplitted.length ? nodeIdSplitted[1] : nodeIdSplitted) as string;
}
return {
@@ -171,6 +148,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onClick,
onNodeDragStop,
style,
isInteractive,
}: WrapNodeProps) => {
const nodeElement = useRef<HTMLDivElement>(null);
const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -192,18 +170,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
const bounds = nodeElement.current.getBoundingClientRect();
const dimensions = getDimensions(nodeElement.current);
const handleBounds = {
source: getHandleBounds(
'.source',
nodeElement.current,
bounds,
storeState.transform[2]
),
target: getHandleBounds(
'.target',
nodeElement.current,
bounds,
storeState.transform[2]
),
source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2]),
};
store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
};
@@ -232,43 +200,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return (
<DraggableCore
onStart={evt =>
onStart(
evt as MouseEvent,
onClick,
id,
type,
data,
setOffset,
transform,
position
)
}
onDrag={evt =>
onDrag(evt as MouseEvent, setDragging, id, offset, transform)
}
onStop={() =>
onStop(
onNodeDragStop,
isDragging,
setDragging,
id,
type,
position,
data
)
}
onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
scale={transform[2]}
disabled={!isInteractive}
>
<div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
style={style}
selected={selected}
/>
<NodeComponent id={id} data={data} type={type} style={style} selected={selected} />
</Provider>
</div>
</DraggableCore>
src/components/UserSelection/index.tsx
+11 -7
View File
@@ -3,6 +3,10 @@ import React, { useEffect, useRef, useState, memo } from 'react';
import { useStoreActions } from '../../store/hooks';
import { SelectionRect } from '../../types';
type UserSelectionProps = {
isInteractive: boolean;
};
const initialRect: SelectionRect = {
startX: 0,
startY: 0,
@@ -27,13 +31,17 @@ function getMousePosition(evt: MouseEvent) {
};
}
export default memo(() => {
export default memo(({ isInteractive }: UserSelectionProps) => {
const selectionPane = useRef<HTMLDivElement>(null);
const [rect, setRect] = useState(initialRect);
const setSelection = useStoreActions(a => a.setSelection);
const updateSelection = useStoreActions(a => a.updateSelection);
const setNodesSelection = useStoreActions(a => a.setNodesSelection);
if (!isInteractive) {
return null;
}
useEffect(() => {
function onMouseDown(evt: MouseEvent): void {
const mousePos = getMousePosition(evt);
@@ -70,12 +78,8 @@ export default memo(() => {
...currentRect,
x: negativeX ? mousePos.x : currentRect.x,
y: negativeY ? mousePos.y : currentRect.y,
width: negativeX
? currentRect.startX - mousePos.x
: mousePos.x - currentRect.startX,
height: negativeY
? currentRect.startY - mousePos.y
: mousePos.y - currentRect.startY,
width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX,
height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY,
};
updateSelection(nextRect);
src/container/EdgeRenderer/index.tsx
+21 -4
View File
@@ -113,7 +113,13 @@ function getEdgePositions(
};
}
function renderEdge(edge: Edge, props: EdgeRendererProps, nodes: Node[], selectedElements: Elements) {
function renderEdge(
edge: Edge,
props: EdgeRendererProps,
nodes: Node[],
selectedElements: Elements,
isInteractive: boolean
) {
const [sourceId, sourceHandleId] = edge.source.split('__');
const [targetId, targetHandleId] = edge.target.split('__');
@@ -128,7 +134,7 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, nodes: Node[], selecte
throw new Error(`couldn't create edge for target id: ${targetId}`);
}
if (!sourceNode.__rg.width || !sourceNode.__rg.height) {
if (!sourceNode.__rg.width || !sourceNode.__rg.height) {
return null;
}
@@ -171,6 +177,7 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, nodes: Node[], selecte
targetY={targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
isInteractive={isInteractive}
/>
);
}
@@ -183,7 +190,16 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
connectionSourceId,
connectionPosition: { x, y },
selectedElements,
} = useStoreState(s => s);
isInteractive,
} = useStoreState(s => ({
transform: s.transform,
edges: s.edges,
nodes: s.nodes,
connectionSourceId: s.connectionSourceId,
connectionPosition: s.connectionPosition,
selectedElements: s.selectedElements,
isInteractive: s.isInteractive,
}));
const { width, height, connectionLineStyle, connectionLineType } = props;
@@ -197,7 +213,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
return (
<svg width={width} height={height} className="react-flow__edges">
<g transform={transformStyle}>
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements))}
{edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, isInteractive))}
{connectionSourceId && (
<ConnectionLine
nodes={nodes}
@@ -207,6 +223,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
transform={transform}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
isInteractive={isInteractive}
/>
)}
</g>
src/container/GraphView/index.tsx
+17 -25
View File
@@ -1,4 +1,5 @@
import React, { useEffect, useRef, memo, SVGAttributes } from 'react';
import classnames from 'classnames';
import { useStoreState, useStoreActions } from '../../store/hooks';
import NodeRenderer from '../NodeRenderer';
@@ -12,13 +13,7 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
import useElementUpdater from '../../hooks/useElementUpdater';
import { getDimensions } from '../../utils';
import { fitView, zoomIn, zoomOut } from '../../utils/graph';
import {
Elements,
NodeTypesType,
EdgeTypesType,
GridType,
OnLoadFunc,
} from '../../types';
import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
export interface GraphViewProps {
elements: Elements;
@@ -40,7 +35,8 @@ export interface GraphViewProps {
backgroundType: GridType;
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
}
const GraphView = memo(
@@ -64,7 +60,8 @@ const GraphView = memo(
onConnect,
snapToGrid,
snapGrid,
onlyRenderVisibleNodes
onlyRenderVisibleNodes,
isInteractive,
}: GraphViewProps) => {
const zoomPane = useRef<HTMLDivElement>(null);
const rendererNode = useRef<HTMLDivElement>(null);
@@ -77,13 +74,12 @@ const GraphView = memo(
nodesSelectionActive: s.nodesSelectionActive,
}));
const updateSize = useStoreActions(actions => actions.updateSize);
const setNodesSelection = useStoreActions(
actions => actions.setNodesSelection
);
const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
const setOnConnect = useStoreActions(a => a.setOnConnect);
const setSnapGrid = useStoreActions(actions => actions.setSnapGrid);
const setInteractive = useStoreActions(actions => actions.setInteractive);
const selectionKeyPressed = useKeyPress(selectionKeyCode);
const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
const onZoomPaneClick = () => setNodesSelection({ isActive: false });
@@ -122,17 +118,17 @@ const GraphView = memo(
setSnapGrid({ snapToGrid, snapGrid });
}, [snapToGrid]);
useEffect(() => {
setInteractive(isInteractive);
}, [isInteractive]);
useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
useElementUpdater(elements);
return (
<div className="react-flow__renderer" ref={rendererNode}>
<div className={rendererClasses} ref={rendererNode}>
{showBackground && (
<BackgroundGrid
gap={backgroundGap}
color={backgroundColor}
backgroundType={backgroundType}
/>
<BackgroundGrid gap={backgroundGap} color={backgroundColor} backgroundType={backgroundType} />
)}
<NodeRenderer
nodeTypes={nodeTypes}
@@ -148,13 +144,9 @@ const GraphView = memo(
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
/>
{selectionKeyPressed && <UserSelection />}
{selectionKeyPressed && <UserSelection isInteractive={isInteractive} />}
{state.nodesSelectionActive && <NodesSelection />}
<div
className="react-flow__zoompane"
onClick={onZoomPaneClick}
ref={zoomPane}
/>
<div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
</div>
);
}
src/container/NodeRenderer/index.tsx
+22 -6
View File
@@ -2,7 +2,7 @@ import React, { memo, ComponentType } from 'react';
import { useStoreState } from '../../store/hooks';
import { getNodesInside } from '../../utils/graph';
import { Node, Transform, NodeTypesType, NodeComponentProps, Elements } from '../../types';
import { Node, Transform, NodeTypesType, WrapNodeProps, Elements } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypesType;
@@ -11,9 +11,15 @@ interface NodeRendererProps {
onlyRenderVisibleNodes?: boolean;
}
function renderNode(node: Node, props: NodeRendererProps, transform: Transform, selectedElements: Elements) {
function renderNode(
node: Node,
props: NodeRendererProps,
transform: Transform,
selectedElements: Elements,
isInteractive: boolean
) {
const nodeType = node.type || 'default';
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
if (!props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
}
@@ -33,23 +39,33 @@ function renderNode(node: Node, props: NodeRendererProps, transform: Transform,
transform={transform}
selected={isSelected}
style={node.style}
isInteractive={isInteractive}
/>
);
}
const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
const { nodes, transform, selectedElements, width, height } = useStoreState(s => s);
const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState(s => ({
nodes: s.nodes,
transform: s.transform,
selectedElements: s.selectedElements,
width: s.width,
height: s.height,
isInteractive: s.isInteractive,
}));
const [tx, ty, tScale] = transform;
const transformStyle = {
transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
};
const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true) : nodes;
const renderNodes = onlyRenderVisibleNodes
? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true)
: nodes;
return (
<div className="react-flow__nodes" style={transformStyle}>
{renderNodes.map(node => renderNode(node, props, transform, selectedElements))}
{renderNodes.map(node => renderNode(node, props, transform, selectedElements, isInteractive))}
</div>
);
});
src/container/ReactFlow/index.tsx
+9 -12
View File
@@ -18,18 +18,11 @@ import StraightEdge from '../../components/Edges/StraightEdge';
import StepEdge from '../../components/Edges/StepEdge';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import store from '../../store';
import {
Elements,
NodeTypesType,
EdgeTypesType,
GridType,
OnLoadFunc,
} from '../../types';
import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';
import '../../style.css';
export interface ReactFlowProps
extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad'> {
elements: Elements;
onElementClick: () => void;
onElementsRemove: (elements: Elements) => void;
@@ -49,7 +42,8 @@ export interface ReactFlowProps
backgroundType: GridType;
snapToGrid: boolean;
snapGrid: [number, number];
onlyRenderVisibleNodes: boolean
onlyRenderVisibleNodes: boolean;
isInteractive: boolean;
}
const ReactFlow = ({
@@ -74,7 +68,8 @@ const ReactFlow = ({
backgroundColor,
snapToGrid,
snapGrid,
onlyRenderVisibleNodes
onlyRenderVisibleNodes,
isInteractive,
}: ReactFlowProps) => {
const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -103,6 +98,7 @@ const ReactFlow = ({
snapToGrid={snapToGrid}
snapGrid={snapGrid}
onlyRenderVisibleNodes={onlyRenderVisibleNodes}
isInteractive={isInteractive}
/>
{children}
</StoreProvider>
@@ -139,7 +135,8 @@ ReactFlow.defaultProps = {
backgroundType: GridType.Dots,
snapToGrid: false,
snapGrid: [16, 16],
onlyRenderVisibleNodes: true
onlyRenderVisibleNodes: true,
isInteractive: true,
};
export default ReactFlow;
src/hooks/useD3Zoom.ts
+2 -9
View File
@@ -9,11 +9,7 @@ const d3ZoomInstance = d3Zoom
.scaleExtent([0.5, 2])
.filter(() => !event.button);
export default (
zoomPane: MutableRefObject<Element | null>,
onMove: () => void,
shiftPressed: boolean
): void => {
export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void, shiftPressed: boolean): void => {
const state = useStoreState(s => ({
transform: s.transform,
d3Selection: s.d3Selection,
@@ -35,10 +31,7 @@ export default (
d3ZoomInstance.on('zoom', null);
} else {
d3ZoomInstance.on('zoom', () => {
if (
event.sourceEvent &&
event.sourceEvent.target !== zoomPane.current
) {
if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
return;
}
src/store/index.ts
+17 -29
View File
@@ -2,11 +2,7 @@ import { createStore, Action, action } from 'easy-peasy';
import isEqual from 'fast-deep-equal';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import {
getNodesInside,
getConnectedEdges,
getRectOfNodes,
} from '../utils/graph';
import { getNodesInside, getConnectedEdges, getRectOfNodes } from '../utils/graph';
import {
ElementId,
Elements,
@@ -80,6 +76,8 @@ export interface StoreModel {
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: OnConnectFunc;
setOnConnect: Action<StoreModel, OnConnectFunc>;
@@ -111,6 +109,8 @@ export interface StoreModel {
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, ElementId | null>;
setInteractive: Action<StoreModel, boolean>;
}
const storeModel: StoreModel = {
@@ -136,6 +136,8 @@ const storeModel: StoreModel = {
snapGrid: [16, 16],
snapToGrid: true,
isInteractive: true,
onConnect: () => {},
setOnConnect: action((state, onConnect) => {
@@ -195,11 +197,7 @@ const storeModel: StoreModel = {
return;
}
const selectedNodes = getNodesInside(
state.nodes,
selection,
state.transform
);
const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
if (!selectedNodes.length) {
state.nodesSelectionActive = false;
@@ -218,35 +216,21 @@ const storeModel: StoreModel = {
setSelectedElements: action((state, elements) => {
const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
const selectedElementsUpdated = !isEqual(
selectedElementsArr,
state.selectedElements
);
const selectedElements = selectedElementsUpdated
? selectedElementsArr
: state.selectedElements;
const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements);
const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
state.selectedElements = selectedElements;
}),
updateSelection: action((state, selection) => {
const selectedNodes = getNodesInside(
state.nodes,
selection,
state.transform
);
const selectedNodes = getNodesInside(state.nodes, selection, state.transform);
const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
const nextSelectedElements = [...selectedNodes, ...selectedEdges];
const selectedElementsUpdated = !isEqual(
nextSelectedElements,
state.selectedElements
);
const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
state.selection = selection;
state.selectedElements = selectedElementsUpdated
? nextSelectedElements
: state.selectedElements;
state.selectedElements = selectedElementsUpdated ? nextSelectedElements : state.selectedElements;
}),
updateTransform: action((state, transform) => {
@@ -276,6 +260,10 @@ const storeModel: StoreModel = {
state.snapToGrid = snapToGrid;
state.snapGrid = snapGrid;
}),
setInteractive: action((state, isInteractive) => {
state.isInteractive = isInteractive;
}),
};
const store = createStore(storeModel);
src/style.css
+17 -8
View File
@@ -67,7 +67,9 @@
}
@keyframes dashdraw {
from {stroke-dashoffset: 10}
from {
stroke-dashoffset: 10;
}
}
.react-flow__nodes {
@@ -79,21 +81,30 @@
transform-origin: 0 0;
}
.is-interactive {
.react-flow__node {
cursor: grab;
&:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
}
}
.react-flow__handle {
cursor: crosshair;
}
}
.react-flow__node {
position: absolute;
color: #222;
font-family: sans-serif;
font-size: 12px;
text-align: center;
cursor: grab;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
&:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
}
&.selected > * {
box-shadow: 0 0 0 2px #555;
}
@@ -104,7 +115,6 @@
width: 10px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
cursor: crosshair;
&.bottom {
top: auto;
@@ -123,7 +133,6 @@
top: 50%;
left: 0;
transform: translate(0, -50%);
}
&.right {
src/types/index.ts
+14
View File
@@ -99,6 +99,20 @@ export interface NodeComponentProps {
style?: CSSProperties;
}
export interface WrapNodeProps {
id: ElementId;
type: string;
data: any;
selected: boolean;
transform: Transform;
xPos: number;
yPos: number;
isInteractive: boolean;
onClick: (node: Node) => void | undefined;
onNodeDragStop: (node: Node) => void;
style?: CSSProperties;
}
export type FitViewParams = {
padding: number;
};