use child properties if passed from Node function declaration instead… (

#128) * use child properties if passed from Node function declaration instead of parent properties * properties on canvas trumps all * fix last change * remove console
reaviz · Dec 1, 2021 · 2f7ab5e · 2f7ab5e
1 parent 78d60aa
commit 2f7ab5e
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 61 deletions.
diff --git a/src/Canvas.tsx b/src/Canvas.tsx
@@ -495,56 +495,55 @@ const InternalCanvas: FC<CanvasProps & { ref?: Ref<CanvasRef> }> = forwardRef(
   }
 );
 
-export const Canvas: FC<
-  CanvasContainerProps & { ref?: Ref<CanvasRef> }
-> = forwardRef(
-  (
-    {
-      selections = [],
-      readonly = false,
-      fit = false,
-      nodes = [],
-      edges = [],
-      maxHeight = 2000,
-      maxWidth = 2000,
-      direction = 'DOWN',
-      pannable = true,
-      zoom = 1,
-      center = true,
-      zoomable = true,
-      minZoom = -0.5,
-      maxZoom = 1,
-      onNodeLink = () => undefined,
-      onNodeLinkCheck = () => undefined,
-      onLayoutChange = () => undefined,
-      onZoomChange = () => undefined,
-      layoutOptions,
-      ...rest
-    },
-    ref: Ref<CanvasRef>
-  ) => (
-    <CanvasProvider
-      layoutOptions={layoutOptions}
-      nodes={nodes}
-      edges={edges}
-      zoom={zoom}
-      center={center}
-      minZoom={minZoom}
-      maxZoom={maxZoom}
-      fit={fit}
-      maxHeight={maxHeight}
-      maxWidth={maxWidth}
-      direction={direction}
-      pannable={pannable}
-      zoomable={zoomable}
-      readonly={readonly}
-      onLayoutChange={onLayoutChange}
-      selections={selections}
-      onZoomChange={onZoomChange}
-      onNodeLink={onNodeLink}
-      onNodeLinkCheck={onNodeLinkCheck}
-    >
-      <InternalCanvas ref={ref} {...rest} />
-    </CanvasProvider>
-  )
-);
+export const Canvas: FC<CanvasContainerProps & { ref?: Ref<CanvasRef> }> =
+  forwardRef(
+    (
+      {
+        selections = [],
+        readonly = false,
+        fit = false,
+        nodes = [],
+        edges = [],
+        maxHeight = 2000,
+        maxWidth = 2000,
+        direction = 'DOWN',
+        pannable = true,
+        zoom = 1,
+        center = true,
+        zoomable = true,
+        minZoom = -0.5,
+        maxZoom = 1,
+        onNodeLink = () => undefined,
+        onNodeLinkCheck = () => undefined,
+        onLayoutChange = () => undefined,
+        onZoomChange = () => undefined,
+        layoutOptions,
+        ...rest
+      },
+      ref: Ref<CanvasRef>
+    ) => (
+      <CanvasProvider
+        layoutOptions={layoutOptions}
+        nodes={nodes}
+        edges={edges}
+        zoom={zoom}
+        center={center}
+        minZoom={minZoom}
+        maxZoom={maxZoom}
+        fit={fit}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        direction={direction}
+        pannable={pannable}
+        zoomable={zoomable}
+        readonly={readonly}
+        onLayoutChange={onLayoutChange}
+        selections={selections}
+        onZoomChange={onZoomChange}
+        onNodeLink={onNodeLink}
+        onNodeLinkCheck={onNodeLinkCheck}
+      >
+        <InternalCanvas ref={ref} {...rest} />
+      </CanvasProvider>
+    )
+  );
diff --git a/src/symbols/Node/Node.tsx b/src/symbols/Node/Node.tsx
@@ -423,25 +423,49 @@ export const Node: FC<Partial<NodeProps>> = ({
           nodes.map(({ children, ...n }: any) => {
             const element =
               typeof childNode === 'function' ? childNode(n) : childNode;
+            const elementDisabled =
+              element.props?.disabled != null
+                ? element.props.disabled
+                : disabled;
+            const elementAnimated =
+              element.props?.animated != null
+                ? element.props.animated
+                : animated;
+            const elementDraggable =
+              element.props?.draggable != null
+                ? element.props.draggable
+                : draggable;
+            const elementLinkable =
+              element.props?.linkable != null
+                ? element.props.linkable
+                : linkable;
+            const elementSelectable =
+              element.props?.selectable != null
+                ? element.props.selectable
+                : selectable;
+            const elementRemovable =
+              element.props?.removable != null
+                ? element.props.removable
+                : removable;
             return (
               <CloneElement<NodeProps>
                 key={n.id}
                 element={element}
                 id={`${id}-node-${n.id}`}
-                disabled={isDisabled}
+                disabled={elementDisabled}
                 nodes={children}
                 offsetX={newX}
                 offsetY={newY}
-                animated={animated}
+                animated={elementAnimated}
                 children={element.props.children}
                 childNode={childNode}
                 dragCursor={dragCursor}
                 dragType={dragType}
                 childEdge={childEdge}
-                draggable={draggable}
-                linkable={linkable}
-                selectable={selectable}
-                removable={removable}
+                draggable={elementDraggable}
+                linkable={elementLinkable}
+                selectable={elementSelectable}
+                removable={elementRemovable}
                 onDragStart={onDragStart}
                 onDrag={onDrag}
                 onDragEnd={onDragEnd}

diff --git a/stories/Drag.stories.tsx b/stories/Drag.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Canvas } from '../src/Canvas';
-import { Node, Edge, MarkerArrow, Port, Icon, Arrow, Label, Remove, Add } from '../src/symbols';
+import { Node, Edge, MarkerArrow, Port, Icon, Arrow, Label, Remove, Add, NodeProps } from '../src/symbols';
 import { EdgeData, NodeData } from '../src/types';
 import { createEdgeFromNodes, hasLink, removeAndUpsertNodes } from '../src/helpers';
 
@@ -479,7 +479,18 @@ export const NestedNodeRearranging = () => {
       <Canvas
         nodes={nodes}
         edges={edges}
-        node={<Node dragType="node" />}
+        node={(node: NodeProps) => {
+          // Prevent parent nodes with large number of children from dragging, but allow children to drag
+          const children = nodes.filter(n => n.parent && n.parent === node.id);
+          const notDraggable = children.length > 3;
+          return (
+            <Node
+              {...node}
+              dragType="node"
+              draggable={!notDraggable}
+            />
+          );
+        }}
         onNodeLinkCheck={(_event, from: NodeData, to: NodeData) => {
           if (from.id === to.id) {
             return false;