feat(graph): more adjustable interaction closes #329, closes #291

2020-07-13 17:36:15 +02:00
parent 32f6101d37
commit 1d8a9d6d87
21 changed files with 259 additions and 114 deletions
@@ -11,7 +11,7 @@ interface ConnectionLineProps {
  connectionLineType: ConnectionLineType;
  nodes: Node[];
  transform: Transform;
-  isInteractive: boolean;
+  isConnectable: boolean;
  connectionLineStyle?: CSSProperties;
  className?: string;
 }
@@ -26,7 +26,7 @@ export default ({
  nodes = [],
  className,
  transform,
-  isInteractive,
+  isConnectable,
 }: ConnectionLineProps) => {
  const [sourceNode, setSourceNode] = useState<Node | null>(null);
  const hasHandleId = connectionNodeId.includes('__');
@@ -39,7 +39,7 @@ export default ({
    setSourceNode(nextSourceNode);
  }, []);

-  if (!sourceNode || !isInteractive) {
+  if (!sourceNode || !isConnectable) {
    return null;
  }

@@ -17,7 +17,7 @@ interface EdgeWrapperProps {
  onClick?: (edge: Edge) => void;
  animated?: boolean;
  selected: boolean;
-  isInteractive: boolean;
+  elementsSelectable: boolean;
 }

 export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
@@ -30,7 +30,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
      animated,
      selected,
      onClick,
-      isInteractive,
+      elementsSelectable,
      label,
      labelStyle,
      labelShowBg,
@@ -41,10 +41,10 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
      const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
      const edgeGroupStyle: CSSProperties = {
-        pointerEvents: isInteractive ? 'all' : 'none',
+        pointerEvents: elementsSelectable ? 'all' : 'none',
      };
      const onEdgeClick = (): void => {
-        if (!isInteractive) {
+        if (!elementsSelectable) {
          return;
        }

@@ -1,4 +1,5 @@
 import React, { memo, useContext } from 'react';
+import classnames from 'classnames';

 import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
@@ -12,6 +13,7 @@ const Handle = memo(
    position = Position.Top,
    onConnect = () => {},
    isValidConnection = () => true,
+    isConnectable = true,
    style,
    className,
    id,
@@ -24,9 +26,12 @@ const Handle = memo(
      onConnectAction(params);
      onConnect(params);
    };
+    const handleClasses = classnames(className, { connectable: isConnectable });

    return (
      <BaseHandle
+        className={handleClasses}
+        id={id}
        nodeId={nodeId}
        setPosition={setPosition}
        setConnectionNodeId={setConnectionNodeId}
@@ -35,8 +40,6 @@ const Handle = memo(
        position={position}
        isValidConnection={isValidConnection}
        style={style}
-        className={className}
-        id={id}
      />
    );
  }
@@ -3,13 +3,15 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
-  <>
-    <Handle type="target" position={targetPosition} />
-    {data.label}
-    <Handle type="source" position={sourcePosition} />
-  </>
-));
+const DefaultNode = memo(
+  ({ data, isConnectable, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+    <>
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+      {data.label}
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+    </>
+  )
+);

 DefaultNode.displayName = 'DefaultNode';

@@ -3,10 +3,10 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = memo(({ data, isConnectable, sourcePosition = Position.Bottom }: NodeProps) => (
  <>
    {data.label}
-    <Handle type="source" position={sourcePosition} />
+    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
  </>
 ));

@@ -3,9 +3,9 @@ import React, { memo } from 'react';
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

-const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = memo(({ data, isConnectable, targetPosition = Position.Top }: NodeProps) => (
  <>
-    <Handle type="target" position={targetPosition} />
+    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
    {data.label}
  </>
 ));
@@ -1,4 +1,14 @@
-import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties, useMemo, MouseEvent } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  memo,
+  ComponentType,
+  CSSProperties,
+  useMemo,
+  MouseEvent,
+  useCallback,
+} from 'react';
 import { DraggableCore } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
@@ -28,6 +38,7 @@ interface OnDragStartParams {
  type: string;
  data: any;
  selectNodesOnDrag: boolean;
+  isSelectable: boolean;
  setOffset: (pos: XYPosition) => void;
  transform: Transform;
  position: XYPosition;
@@ -46,6 +57,7 @@ const onStart = ({
  transform,
  position,
  setSelectedElements,
+  isSelectable,
 }: OnDragStartParams): false | void => {
  const startEvt = getMouseEvent(evt);

@@ -64,7 +76,7 @@ const onStart = ({
    onNodeDragStart(node);
  }

-  if (selectNodesOnDrag) {
+  if (selectNodesOnDrag && isSelectable) {
    setSelectedElements({ id, type } as Node);
  }
 };
@@ -104,6 +116,7 @@ interface OnDragStopParams {
  position: XYPosition;
  data: any;
  selectNodesOnDrag: boolean;
+  isSelectable: boolean;
  setSelectedElements: (elms: Elements | Node | Edge) => void;
  onNodeDragStop?: (node: Node) => void;
  onClick?: (node: Node) => void;
@@ -117,6 +130,7 @@ const onStop = ({
  isDragging,
  setDragging,
  selectNodesOnDrag,
+  isSelectable,
  onNodeDragStop,
  onClick,
  setSelectedElements,
@@ -127,8 +141,7 @@ const onStop = ({
    position,
    data,
  } as Node;
-
-  if (!isDragging) {
+  if (!isDragging && isSelectable) {
    if (!selectNodesOnDrag) {
      setSelectedElements({ id, type } as Node);
    }
@@ -164,7 +177,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
      onNodeDragStop,
      style,
      className,
-      isInteractive,
+      isDraggable,
+      isSelectable,
+      isConnectable,
      selectNodesOnDrag,
      sourcePosition,
      targetPosition,
@@ -177,7 +192,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
      const [offset, setOffset] = useState({ x: 0, y: 0 });
      const [isDragging, setDragging] = useState(false);
      const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, { selected });
+      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
+        selected,
+        selectable: isSelectable,
+      });
      const node = { id, type, position, data };
      const onMouseEnterHandler = useMemo(() => {
        if (!onMouseEnter || isDragging) {
@@ -211,10 +229,18 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
        return (evt: MouseEvent) => onContextMenu(evt, node);
      }, [onContextMenu]);

+      const onSelectNodeHandler = useCallback(() => {
+        if (!isDraggable && isSelectable) {
+          setSelectedElements({ id, type } as Node);
+        }
+
+        return noop;
+      }, [isSelectable, isDraggable, id, type]);
+
      const nodeStyle: CSSProperties = {
        zIndex: selected ? 10 : 3,
        transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents: isInteractive ? 'all' : 'none',
+        pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
        ...style,
      };

@@ -246,6 +272,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
            onStart({
              evt: evt as MouseEvent,
              selectNodesOnDrag,
+              isSelectable,
              onNodeDragStart,
              id,
              type,
@@ -261,6 +288,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
            onStop({
              onNodeDragStop,
              selectNodesOnDrag,
+              isSelectable,
              onClick,
              isDragging,
              setDragging,
@@ -272,7 +300,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
            })
          }
          scale={transform[2]}
-          disabled={!isInteractive}
+          disabled={!isDraggable}
          cancel=".nodrag"
        >
          <div
@@ -283,6 +311,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
            onMouseMove={onMouseMoveHandler}
            onMouseLeave={onMouseLeaveHandler}
            onContextMenu={onContextMenuHandler}
+            onClick={onSelectNodeHandler}
          >
            <Provider value={id}>
              <NodeComponent
@@ -290,6 +319,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
                data={data}
                type={type}
                selected={selected}
+                isConnectable={isConnectable}
                sourcePosition={sourcePosition}
                targetPosition={targetPosition}
              />
@@ -8,7 +8,6 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
 import { XYPosition } from '../../types';

 type UserSelectionProps = {
-  isInteractive: boolean;
  selectionKeyPressed: boolean;
 };

@@ -45,8 +44,9 @@ const SelectionRect = () => {
  );
 };

-export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps) => {
+export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
  const selectionActive = useStoreState((s) => s.selectionActive);
+  const elementsSelectable = useStoreState((s) => s.elementsSelectable);

  const setUserSelection = useStoreActions((a) => a.setUserSelection);
  const updateUserSelection = useStoreActions((a) => a.updateUserSelection);
@@ -59,7 +59,7 @@ export default memo(({ isInteractive, selectionKeyPressed }: UserSelectionProps)
    }
  }, [selectionKeyPressed]);

-  if (!isInteractive || !renderUserSelectionPane) {
+  if (!elementsSelectable || !renderUserSelectionPane) {
    return null;
  }