react-dag-editor - npm Package Compare versions

Comparing version 0.2.5 to 0.3.5

index.d.ts

@@ -20,5 +20,4 @@ export * from "./lib/components";
 export * from "./lib/models/event";
-export * from "./lib/models/config/GraphConfig";
 export * from "./lib/models/config/GraphConfigBuilder";
 export * from "./lib/models/config/types";
 export * from "./lib/createGraphState";

lib/components/Graph/IGraphProps.d.ts

 import * as React from "react";
+import { RenderNodeAnchors } from "../NodeAnchors";
 import { TGetPositionFromEvent } from "../../controllers";
@@ -105,2 +106,6 @@ import { IEvent } from "../../models/event";
     onEvent?(event: IEvent<NodeData, EdgeData, PortData>): void;
+    /**
+     * Custom render function for node anchors which can resize node
+     */
+    renderNodeAnchors?: RenderNodeAnchors;
 }
@@ -107,0 +112,0 @@ export interface IGraphClasses {

lib/components/GraphNodeParts.d.ts

 import * as React from "react";
 import { NodeModel } from "../models/NodeModel";
 import { IGraphNodeCommonProps } from "./GraphNode";
+import { RenderNodeAnchors } from "./NodeAnchors";
 import { IGraphOneNodePortsProps } from "./GraphOneNodePorts";
@@ -8,4 +9,5 @@ export interface IGraphNodePartsProps extends Required<Omit<IGraphNodeCommonProps, "viewport">>, Omit<IGraphOneNodePortsProps, "viewport"> {
     isNodeResizable: boolean;
+    renderNodeAnchors?: RenderNodeAnchors;
 }
-declare const GraphNodePartsMemo: React.MemoExoticComponent<({ node, isNodeResizable, ...commonProps }: IGraphNodePartsProps) => JSX.Element | null>;
+declare const GraphNodePartsMemo: React.MemoExoticComponent<({ node, isNodeResizable, renderNodeAnchors, ...commonProps }: IGraphNodePartsProps) => JSX.Element | null>;
 export { GraphNodePartsMemo as GraphNodeParts };

lib/components/index.d.ts

@@ -10,1 +10,2 @@ export * from "./ReactDagEditor";
 export * from "./GridBackground";
+export * from "./NodeAnchors";

lib/hooks/index.d.ts

@@ -15,1 +15,3 @@ export * from "./useContextMenuConfigContext";
 export * from "./useBackgroundRect";
+export * from "./context";
+export * from "./useGetMouseDownOnAnchor";

lib/models/canvas.d.ts

@@ -11,3 +11,2 @@ import { ICanvasEdge } from "./edge";
     stroke?: string;
-    shape?: string;
 }
@@ -14,0 +13,0 @@ export interface ICanvasData<NodeData = unknown, EdgeData = unknown, PortData = unknown> {

lib/models/config/GraphConfigBuilder.d.ts

@@ -1,26 +0,17 @@
-import { GraphConfig } from "./GraphConfig";
-import type { IEdgeConfig, IGraphClipboard, IGroupConfig, INodeConfig, IPortConfig } from "./types";
+import { ICanvasGroup } from "../canvas";
+import { ICanvasEdge } from "../edge";
+import { ICanvasNode } from "../node";
+import { ICanvasPort } from "../port";
+import type { IEdgeConfig, IGraphClipboard, IGraphConfig, IGroupConfig, INodeConfig, IPortConfig } from "./types";
 export declare class GraphConfigBuilder<NodeData = unknown, EdgeData = unknown, PortData = unknown> {
-    private defaultEdgeShape;
-    private defaultNodeShape;
-    private defaultPortShape;
-    private defaultGroupShape;
-    private readonly nodeConfigMap;
-    private readonly edgeConfigMap;
-    private readonly portConfigMap;
-    private readonly groupConfigMap;
-    private clipboard;
+    private readonly draft;
     private constructor();
     static default(): GraphConfigBuilder;
-    static from(graphConfig: GraphConfig): GraphConfigBuilder;
-    withDefaultEdgeShape(shape: string): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    withDefaultNodeShape(shape: string): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    withDefaultPortShape(shape: string): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    withDefaultGroupShape(shape: string): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    withClipboard(clipboard: IGraphClipboard<NodeData, EdgeData, PortData>): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    registerNode(name: string, config: INodeConfig<NodeData, PortData>): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    registerEdge(name: string, config: IEdgeConfig<EdgeData>): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    registerPort(name: string, config: IPortConfig<NodeData, EdgeData, PortData>): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    registerGroup(name: string, config: IGroupConfig): GraphConfigBuilder<NodeData, EdgeData, PortData>;
-    build(): GraphConfig;
+    static from(graphConfig: IGraphConfig): GraphConfigBuilder;
+    registerNode(getConfig: (node: ICanvasNode<NodeData, PortData>) => INodeConfig<ICanvasNode<NodeData, PortData>> | undefined): this;
+    registerEdge(getConfig: (edge: ICanvasEdge<EdgeData>) => IEdgeConfig<EdgeData> | undefined): this;
+    registerPort(getConfig: (port: ICanvasPort<PortData>) => IPortConfig<NodeData, EdgeData, PortData> | undefined): this;
+    registerGroup(getConfig: (group: ICanvasGroup) => IGroupConfig | undefined): this;
+    registerClipboard(getClipboard: () => IGraphClipboard<NodeData, EdgeData, PortData>): this;
+    build(): IGraphConfig;
 }

lib/models/config/types.d.ts

 import type * as React from "react";
 import type { ICanvasData, ICanvasGroup } from "../canvas";
+import { ICanvasEdge } from "../edge";
 import type { EdgeModel } from "../EdgeModel";
@@ -22,2 +23,4 @@ import type { IViewport } from "../geometry";
     getMinHeight(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
+    getMaxWidth?(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
+    getMaxHeight?(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
     renderTooltips?(args: INodeDrawArgs<NodeData, PortData>): React.ReactNode;
@@ -66,11 +69,7 @@ }
 export interface IGraphConfig<NodeData = unknown, EdgeData = unknown, PortData = unknown> {
-    readonly defaultNodeShape: string;
-    readonly defaultEdgeShape: string;
-    readonly defaultPortShape: string;
-    readonly defaultGroupShape: string;
-    getNodeConfigByName(name?: string): INodeConfig<NodeData, PortData> | undefined;
-    getEdgeConfigByName(name?: string): IEdgeConfig<EdgeData> | undefined;
-    getPortConfigByName(name?: string): IPortConfig<NodeData, EdgeData, PortData> | undefined;
+    getNodeConfig(node: ICanvasNode<NodeData, PortData>): INodeConfig<ICanvasNode<NodeData, PortData>> | undefined;
+    getEdgeConfig(edge: ICanvasEdge<EdgeData>): IEdgeConfig<EdgeData> | undefined;
+    getPortConfig(port: ICanvasPort<PortData>): IPortConfig<NodeData, EdgeData, PortData> | undefined;
+    getGroupConfig(group: ICanvasGroup): IGroupConfig | undefined;
     getClipboard(): IGraphClipboard<NodeData, EdgeData, PortData>;
-    getGroupConfigByName(name?: string): IGroupConfig | undefined;
 }

lib/models/edge.d.ts

 import type { GraphEdgeStatus } from "./status";
 export interface ICanvasEdge<T = unknown> {
-    readonly shape?: string;
     /**
@@ -5,0 +4,0 @@ * source node id

lib/models/EdgeModel.d.ts

@@ -7,3 +7,2 @@ import { $Complete } from "../utils/complete";
     get id(): string;
-    get shape(): string | undefined;
     get automationId(): string | undefined;
@@ -10,0 +9,0 @@ get source(): string;

lib/models/node.d.ts

 import type { ICanvasPort } from "./port";
 import type { GraphNodeStatus } from "./status";
 export interface ICanvasNode<T = unknown, P = unknown> {
-    readonly shape?: string;
     readonly x: number;
@@ -18,2 +17,3 @@ readonly y: number;
     readonly data?: Readonly<T>;
+    readonly layer?: number;
 }

lib/models/NodeModel.d.ts

@@ -14,3 +14,2 @@ import type { $Complete } from "../utils/complete";
     get status(): GraphNodeStatus | undefined;
-    get shape(): string | undefined;
     get ports(): ReadonlyArray<ICanvasPort<PortData>> | undefined;
@@ -27,2 +26,3 @@ get ariaLabel(): string | undefined;
     get width(): number | undefined;
+    get layer(): number;
     private constructor();
@@ -29,0 +29,0 @@ static fromJSON<N, P>(node: ICanvasNode<N, P>, prev: string | undefined, next: string | undefined): NodeModel<N, P>;

lib/models/port.d.ts

@@ -5,3 +5,2 @@ import type { GraphPortStatus } from "./status";
     readonly name: string;
-    readonly shape?: string;
     readonly status?: GraphPortStatus;
@@ -8,0 +7,0 @@ readonly isInputDisabled?: boolean;

lib/utils/index.d.ts

@@ -1,27 +0,28 @@
-export * from "./getPortPosition";
-export * from "./getNodeConfig";
-export * from "./graphDataUtils";
-export * from "./transformMatrix";
-export * from "./getCurvePathD";
-export * from "./layout";
+export * from "./arrayEquals";
+export * as Bitset from "./bitset";
 export * from "./browsers";
-export * from "./isWithinThreshold";
-export * from "./geometric";
+export * from "./clamp";
+export * from "./debounce";
+export * from "./debug";
+export * from "./diffGraphEdge";
 export * from "./diffGraphNode";
-export * from "./diffGraphEdge";
 export * from "./diffGraphPort";
-export * from "./viewport";
-export * from "./Writable";
+export * from "./empty";
+export * from "./event";
 export * from "./gantt/getCriticalPath";
 export * from "./gantt/getTopoSortingNodes";
+export * from "./geometric";
+export * from "./getCurvePathD";
+export * from "./getNodeConfig";
 export * from "./getOffsetLimit";
-export * from "./event";
+export * from "./getPortPosition";
+export * from "./graphDataUtils";
+export * from "./history";
+export * from "./isWithinThreshold";
+export * from "./layout";
+export * from "./memoize";
+export * from "./stopPropagation";
+export * from "./transformMatrix";
 export * from "./valueOrCallback";
-export * from "./debug";
-export * from "./debounce";
-export * from "./arrayEquals";
-export * from "./empty";
-export * from "./stopPropagation";
-export * from "./clamp";
-export * from "./history";
-export * as Bitset from "./bitset";
+export * from "./viewport";
+export * from "./Writable";

lib/utils/memoize.d.ts

@@ -1,1 +0,1 @@
-export declare function memoize<T extends unknown[], R>(f: (...args: T) => R): (...args: T) => R;
+export declare function memoize<T extends unknown[], R, D>(f: (...args: T) => R, selector?: ((...args: T) => D[]) | D[]): (...args: T) => R;

package.json

@@ -7,4 +7,6 @@ {
   },
-  "version": "0.2.5",
+  "version": "0.3.5",
   "dependencies": {
+    "@fluentui/merge-styles": "^8.2.0",
+    "eventemitter3": "^4.0.7",
     "react-jss": "~10.2.0",
@@ -14,7 +16,2 @@ "toposort": "^1.0.7",
   },
-  "bundledDependencies": [
-    "@fluentui/merge-styles",
-    "eventemitter3",
-    "lodash-es"
-  ],
   "main": "./index.umd.js",
@@ -25,5 +22,4 @@ "module": "./index.esm.js",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "eventemitter3": "^4.0.7"
+    "react-dom": "17.0.2"
   }
 }

src/index.ts

@@ -20,5 +20,4 @@ export * from "./lib/components";
 export * from "./lib/models/event";
-export * from "./lib/models/config/GraphConfig";
 export * from "./lib/models/config/GraphConfigBuilder";
 export * from "./lib/models/config/types";
 export * from "./lib/createGraphState";

src/lib/components/Graph/IGraphProps.ts

 import * as React from "react";
+import { RenderNodeAnchors } from "../NodeAnchors";
 import { TGetPositionFromEvent } from "../../controllers";
@@ -114,2 +115,3 @@ import { IEvent } from "../../models/event";
   ): string | undefined;
+
   /**
@@ -121,2 +123,7 @@ * The events handler function
   onEvent?(event: IEvent<NodeData, EdgeData, PortData>): void;
+
+  /**
+   * Custom render function for node anchors which can resize node
+   */
+  renderNodeAnchors?: RenderNodeAnchors;
 }
@@ -123,0 +130,0 @@

src/lib/components/index.ts

@@ -10,1 +10,2 @@ export * from "./ReactDagEditor";
 export * from "./GridBackground";
+export * from "./NodeAnchors";

src/lib/hooks/index.ts

@@ -15,1 +15,3 @@ export * from "./useContextMenuConfigContext";
 export * from "./useBackgroundRect";
+export * from "./context";
+export * from "./useGetMouseDownOnAnchor";

src/lib/hooks/useSelectBox.ts

@@ -13,3 +13,5 @@ import * as React from "react";
     selectBoxPositionState,
-    { timeout: 100 }
+    {
+      timeout: 100,
+    }
   );
@@ -16,0 +18,0 @@

src/lib/models/canvas.ts

@@ -12,3 +12,2 @@ import { ICanvasEdge } from "./edge";
   stroke?: string;
-  shape?: string;
 }
@@ -15,0 +14,0 @@

src/lib/models/config/GraphConfigBuilder.ts

@@ -8,7 +8,10 @@ import {
 } from "../../built-in";
-import { defaultGroup } from "../../built-in/defaultGroup";
-import { GraphConfig } from "./GraphConfig";
+import { ICanvasGroup } from "../canvas";
+import { ICanvasEdge } from "../edge";
+import { ICanvasNode } from "../node";
+import { ICanvasPort } from "../port";
 import type {
   IEdgeConfig,
   IGraphClipboard,
+  IGraphConfig,
   IGroupConfig,
@@ -24,105 +27,37 @@ INodeConfig,
 > {
-  private defaultEdgeShape: string;
-  private defaultNodeShape: string;
-  private defaultPortShape: string;
-  private defaultGroupShape: string;
-  private readonly nodeConfigMap: Map<string, INodeConfig<NodeData, PortData>>;
-  private readonly edgeConfigMap: Map<string, IEdgeConfig<EdgeData>>;
-  private readonly portConfigMap: Map<
-    string,
-    IPortConfig<NodeData, EdgeData, PortData>
-  >;
-  private readonly groupConfigMap: Map<string, IGroupConfig>;
-  private clipboard: IGraphClipboard<NodeData, EdgeData, PortData>;
+  private readonly draft: IGraphConfig<NodeData, EdgeData, PortData>;
 
-  private constructor(
-    defaultEdgeShape: string,
-    defaultNodeShape: string,
-    defaultPortShape: string,
-    defaultGroupShape: string,
-    nodeConfigMap: Map<string, INodeConfig<NodeData, PortData>>,
-    edgeConfigMap: Map<string, IEdgeConfig<EdgeData>>,
-    portConfigMap: Map<string, IPortConfig<NodeData, EdgeData, PortData>>,
-    groupConfigMap: Map<string, IGroupConfig>,
-    clipboard: IGraphClipboard<NodeData, EdgeData, PortData>
-  ) {
-    this.defaultEdgeShape = defaultEdgeShape;
-    this.defaultNodeShape = defaultNodeShape;
-    this.defaultPortShape = defaultPortShape;
-    this.defaultGroupShape = defaultGroupShape;
-    this.nodeConfigMap = nodeConfigMap;
-    this.edgeConfigMap = edgeConfigMap;
-    this.portConfigMap = portConfigMap;
-    this.groupConfigMap = groupConfigMap;
-    this.clipboard = clipboard;
+  private constructor() {
+    const storage = new DefaultStorage();
+    const defaultClipboard = new DefaultClipboard<NodeData, EdgeData, PortData>(
+      storage
+    );
+    this.draft = {
+      getNodeConfig: () => rect,
+      getEdgeConfig: () => line,
+      getPortConfig: () => defaultPort,
+      getGroupConfig: () => undefined,
+      getClipboard: () => defaultClipboard,
+    };
   }
 
   public static default(): GraphConfigBuilder {
-    return new GraphConfigBuilder(
-      "default",
-      "default",
-      "default",
-      "default",
-      new Map().set("default", rect),
-      new Map().set("default", line),
-      new Map().set("default", defaultPort),
-      new Map().set("default", defaultGroup),
-      new DefaultClipboard(new DefaultStorage())
-    );
+    return new GraphConfigBuilder();
   }
 
-  public static from(graphConfig: GraphConfig): GraphConfigBuilder {
-    return new GraphConfigBuilder(
-      graphConfig.defaultEdgeShape,
-      graphConfig.defaultNodeShape,
-      graphConfig.defaultPortShape,
-      graphConfig.defaultGroupShape,
-      new Map(graphConfig.nodeConfigMap),
-      new Map(graphConfig.edgeConfigMap),
-      new Map(graphConfig.portConfigMap),
-      new Map(graphConfig.groupConfigMap),
-      graphConfig.clipboard
-    );
+  public static from(graphConfig: IGraphConfig): GraphConfigBuilder {
+    return new GraphConfigBuilder()
+      .registerNode(graphConfig.getNodeConfig.bind(graphConfig))
+      .registerEdge(graphConfig.getEdgeConfig.bind(graphConfig))
+      .registerPort(graphConfig.getPortConfig.bind(graphConfig))
+      .registerGroup(graphConfig.getGroupConfig.bind(graphConfig))
+      .registerClipboard(graphConfig.getClipboard.bind(graphConfig));
   }
 
-  public withDefaultEdgeShape(
-    shape: string
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.defaultEdgeShape = shape;
-    return this;
-  }
-
-  public withDefaultNodeShape(
-    shape: string
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.defaultNodeShape = shape;
-    return this;
-  }
-
-  public withDefaultPortShape(
-    shape: string
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.defaultPortShape = shape;
-    return this;
-  }
-
-  public withDefaultGroupShape(
-    shape: string
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.defaultGroupShape = shape;
-    return this;
-  }
-
-  public withClipboard(
-    clipboard: IGraphClipboard<NodeData, EdgeData, PortData>
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.clipboard = clipboard;
-    return this;
-  }
-
   public registerNode(
-    name: string,
-    config: INodeConfig<NodeData, PortData>
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.nodeConfigMap.set(name, config);
+    getConfig: (
+      node: ICanvasNode<NodeData, PortData>
+    ) => INodeConfig<ICanvasNode<NodeData, PortData>> | undefined
+  ): this {
+    this.draft.getNodeConfig = getConfig;
     return this;
@@ -132,6 +67,7 @@ }
   public registerEdge(
-    name: string,
-    config: IEdgeConfig<EdgeData>
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.edgeConfigMap.set(name, config);
+    getConfig: (
+      edge: ICanvasEdge<EdgeData>
+    ) => IEdgeConfig<EdgeData> | undefined
+  ): this {
+    this.draft.getEdgeConfig = getConfig;
     return this;
@@ -141,6 +77,7 @@ }
   public registerPort(
-    name: string,
-    config: IPortConfig<NodeData, EdgeData, PortData>
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.portConfigMap.set(name, config);
+    getConfig: (
+      port: ICanvasPort<PortData>
+    ) => IPortConfig<NodeData, EdgeData, PortData> | undefined
+  ): this {
+    this.draft.getPortConfig = getConfig;
     return this;
@@ -150,22 +87,18 @@ }
   public registerGroup(
-    name: string,
-    config: IGroupConfig
-  ): GraphConfigBuilder<NodeData, EdgeData, PortData> {
-    this.groupConfigMap.set(name, config);
+    getConfig: (group: ICanvasGroup) => IGroupConfig | undefined
+  ): this {
+    this.draft.getGroupConfig = getConfig;
     return this;
   }
 
-  public build(): GraphConfig {
-    return new GraphConfig(
-      this.defaultEdgeShape,
-      this.defaultNodeShape,
-      this.defaultPortShape,
-      this.defaultGroupShape,
-      new Map(this.nodeConfigMap),
-      new Map(this.edgeConfigMap),
-      new Map(this.portConfigMap),
-      new Map(this.groupConfigMap),
-      this.clipboard
-    );
+  public registerClipboard(
+    getClipboard: () => IGraphClipboard<NodeData, EdgeData, PortData>
+  ): this {
+    this.draft.getClipboard = getClipboard;
+    return this;
   }
+
+  public build(): IGraphConfig {
+    return this.draft;
+  }
 }

src/lib/models/config/types.ts

 import type * as React from "react";
 import type { ICanvasData, ICanvasGroup } from "../canvas";
+import { ICanvasEdge } from "../edge";
 import type { EdgeModel } from "../EdgeModel";
@@ -27,2 +28,4 @@ import type { IViewport } from "../geometry";
   getMinHeight(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
+  getMaxWidth?(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
+  getMaxHeight?(rect: Partial<ICanvasNode<NodeData, PortData>>): number;
   renderTooltips?(args: INodeDrawArgs<NodeData, PortData>): React.ReactNode;
@@ -106,15 +109,11 @@ }
 > {
-  readonly defaultNodeShape: string;
-  readonly defaultEdgeShape: string;
-  readonly defaultPortShape: string;
-  readonly defaultGroupShape: string;
-  getNodeConfigByName(
-    name?: string
-  ): INodeConfig<NodeData, PortData> | undefined;
-  getEdgeConfigByName(name?: string): IEdgeConfig<EdgeData> | undefined;
-  getPortConfigByName(
-    name?: string
+  getNodeConfig(
+    node: ICanvasNode<NodeData, PortData>
+  ): INodeConfig<ICanvasNode<NodeData, PortData>> | undefined;
+  getEdgeConfig(edge: ICanvasEdge<EdgeData>): IEdgeConfig<EdgeData> | undefined;
+  getPortConfig(
+    port: ICanvasPort<PortData>
   ): IPortConfig<NodeData, EdgeData, PortData> | undefined;
+  getGroupConfig(group: ICanvasGroup): IGroupConfig | undefined;
   getClipboard(): IGraphClipboard<NodeData, EdgeData, PortData>;
-  getGroupConfigByName(name?: string): IGroupConfig | undefined;
 }

src/lib/models/edge.ts

 import type { GraphEdgeStatus } from "./status";
 
 export interface ICanvasEdge<T = unknown> {
-  readonly shape?: string;
   /**
@@ -6,0 +5,0 @@ * source node id

src/lib/models/EdgeModel.ts

@@ -13,6 +13,2 @@ import { $Complete } from "../utils/complete";
 
-  public get shape(): string | undefined {
-    return this.inner.shape;
-  }
-
   public get automationId(): string | undefined {
@@ -19,0 +15,0 @@ return this.inner.automationId;

src/lib/models/node.ts

@@ -5,3 +5,2 @@ import type { ICanvasPort } from "./port";
 export interface ICanvasNode<T = unknown, P = unknown> {
-  readonly shape?: string;
   readonly x: number;
@@ -20,2 +19,3 @@ readonly y: number;
   readonly data?: Readonly<T>;
+  readonly layer?: number;
 }

src/lib/models/NodeModel.ts

@@ -27,6 +27,2 @@ import { mapCow } from "../utils/array";
 
-  public get shape(): string | undefined {
-    return this.inner.shape;
-  }
-
   public get ports(): ReadonlyArray<ICanvasPort<PortData>> | undefined {
@@ -76,2 +72,6 @@ return this.inner.ports;
 
+  public get layer(): number {
+    return this.inner.layer ?? 0;
+  }
+
   private constructor(
@@ -78,0 +78,0 @@ node: ICanvasNode<NodeData, PortData>,

src/lib/models/port.ts

@@ -6,3 +6,2 @@ import type { GraphPortStatus } from "./status";
   readonly name: string;
-  readonly shape?: string;
   readonly status?: GraphPortStatus;
@@ -9,0 +8,0 @@ readonly isInputDisabled?: boolean;

src/lib/reducers/connectingReducer.ts

@@ -155,3 +155,2 @@ import { v4 as uuid } from "uuid";
             id: uuid(),
-            shape: state.settings.graphConfig.defaultEdgeShape,
             status: GraphEdgeStatus.Default,
@@ -158,0 +157,0 @@ };

src/lib/utils/getNodeConfig.ts

@@ -9,6 +9,6 @@ import type { IGraphConfig, INodeConfig } from "../models/config/types";
 ): INodeConfig | undefined => {
-  const nodeConfig = graphConfig.getNodeConfigByName(node.shape);
+  const nodeConfig = graphConfig.getNodeConfig(node);
 
   if (!nodeConfig) {
-    Debug.warn(`invalid shape in node ${JSON.stringify(node)}`);
+    Debug.warn(`invalid node ${JSON.stringify(node)}`);
 
@@ -15,0 +15,0 @@ return undefined;

src/lib/utils/graphDataUtils.ts

@@ -100,3 +100,3 @@ import type * as React from "react";
 ) => {
-  const portConfig = graphConfig.getPortConfigByName(params.model.shape);
+  const portConfig = graphConfig.getPortConfig(params.model);
   return portConfig ? portConfig.getIsConnectable(params) : false;
@@ -103,0 +103,0 @@ };

src/lib/utils/index.ts

@@ -1,27 +0,28 @@
-export * from "./getPortPosition";
-export * from "./getNodeConfig";
-export * from "./graphDataUtils";
-export * from "./transformMatrix";
-export * from "./getCurvePathD";
-export * from "./layout";
+export * from "./arrayEquals";
+export * as Bitset from "./bitset";
 export * from "./browsers";
-export * from "./isWithinThreshold";
-export * from "./geometric";
+export * from "./clamp";
+export * from "./debounce";
+export * from "./debug";
+export * from "./diffGraphEdge";
 export * from "./diffGraphNode";
-export * from "./diffGraphEdge";
 export * from "./diffGraphPort";
-export * from "./viewport";
-export * from "./Writable";
+export * from "./empty";
+export * from "./event";
 export * from "./gantt/getCriticalPath";
 export * from "./gantt/getTopoSortingNodes";
+export * from "./geometric";
+export * from "./getCurvePathD";
+export * from "./getNodeConfig";
 export * from "./getOffsetLimit";
-export * from "./event";
+export * from "./getPortPosition";
+export * from "./graphDataUtils";
+export * from "./history";
+export * from "./isWithinThreshold";
+export * from "./layout";
+export * from "./memoize";
+export * from "./stopPropagation";
+export * from "./transformMatrix";
 export * from "./valueOrCallback";
-export * from "./debug";
-export * from "./debounce";
-export * from "./arrayEquals";
-export * from "./empty";
-export * from "./stopPropagation";
-export * from "./clamp";
-export * from "./history";
-export * as Bitset from "./bitset";
+export * from "./viewport";
+export * from "./Writable";

src/lib/utils/memoize.ts

@@ -20,12 +20,18 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
-export function memoize<T extends unknown[], R>(
-  f: (...args: T) => R
+export function memoize<T extends unknown[], R, D>(
+  f: (...args: T) => R,
+  selector?: ((...args: T) => D[]) | D[]
 ): (...args: T) => R {
-  let prev: T | undefined;
+  let prev: T | D[] | undefined;
   let value: R | undefined;
   return (...args: T): R => {
-    if (shallowEqual(prev, args)) {
+    const selectedArgs = selector
+      ? Array.isArray(selector)
+        ? selector
+        : selector.apply(undefined, args)
+      : args;
+    if (shallowEqual(prev, selectedArgs)) {
       return value!;
     }
-    prev = args;
+    prev = selectedArgs;
     value = f.apply(undefined, args);
@@ -32,0 +38,0 @@ return value!;

src/stories/data/sample-graph-1.ts

@@ -6,3 +6,3 @@ import { ICanvasData } from "../..";
     {
-      id: "source",
+      id: "source-1",
       name: "source",
@@ -18,6 +18,7 @@ ports: [
       ],
-      data: {},
+      data: {
+        nodeType: "source",
+      },
       x: 100,
       y: 100,
-      shape: "source",
     },
@@ -33,3 +34,5 @@ {
           isOutputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -41,3 +44,5 @@ {
           isOutputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -49,3 +54,5 @@ {
           isInputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -57,9 +64,12 @@ {
           isInputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
       ],
-      data: {},
+      data: {
+        nodeType: "step",
+      },
       x: 100,
       y: 400,
-      shape: "step",
     },
@@ -75,3 +85,5 @@ {
           isOutputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -83,3 +95,5 @@ {
           isOutputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -91,3 +105,5 @@ {
           isInputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
@@ -99,12 +115,46 @@ {
           isInputDisabled: true,
-          shape: "myPort",
+          data: {
+            nodeType: "myPort",
+          },
         },
       ],
-      data: {},
+      data: {
+        nodeType: "step",
+      },
       x: 600,
       y: 400,
-      shape: "step",
     },
+    {
+      id: "step-3",
+      name: "Step at upper layer will cover others",
+      x: 300,
+      y: 200,
+      width: 450,
+      layer: 10,
+      data: {
+        nodeType: "step",
+      },
+    },
+    {
+      id: "source-2",
+      name: "source 2",
+      ports: [],
+      data: {
+        nodeType: "source",
+      },
+      x: 620,
+      y: 180,
+    },
+    {
+      id: "note-1",
+      name: "Double click to see custom anchors",
+      x: 100,
+      y: 200,
+      layer: 11,
+      data: {
+        nodeType: "note",
+      },
+    },
   ],
   edges: [],
 };

src/test/collections/b-tree.test.ts

@@ -1,2 +0,1 @@
-import { range } from "lodash-es";
 import {
@@ -17,2 +16,12 @@ binaryFind,
 
+function range(start: number, end: number, step?: number): number[] {
+  step = step === undefined ? (start < end ? 1 : -1) : step;
+  const size = Math.max(Math.ceil((end - start) / (step || 1)), 0);
+  const result = [];
+  for (let i = 0, x = start; i < size; ++i, x += step) {
+    result.push(x);
+  }
+  return result;
+}
+
 function internal(
@@ -19,0 +28,0 @@ values: Array<readonly [INode<number, number>, number | null]>,

src/test/unit/__data__/sample0.json

@@ -14,3 +14,2 @@ {
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -28,3 +27,2 @@ "label": "Transformation",
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -42,3 +40,2 @@ "label": "Dataset",
           "isOutputDisabled": false,
-          "shape": "default",
           "data": {
@@ -51,3 +48,5 @@ "label": "Transformed dataset",
       ],
-      "shape": "default"
+      "data": {
+        "nodeType": "default"
+      }
     },
@@ -65,3 +64,2 @@ {
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -79,3 +77,2 @@ "label": "Dataset",
           "isOutputDisabled": false,
-          "shape": "default",
           "data": {
@@ -88,3 +85,5 @@ "label": "Results dataset",
       ],
-      "shape": "default"
+      "data": {
+        "nodeType": "default"
+      }
     },
@@ -102,3 +101,2 @@ {
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -116,3 +114,2 @@ "label": "Trained model",
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -130,3 +127,2 @@ "label": "Dataset",
           "isOutputDisabled": false,
-          "shape": "default",
           "data": {
@@ -139,3 +135,5 @@ "label": "Scored dataset",
       ],
-      "shape": "default"
+      "data": {
+        "nodeType": "default"
+      }
     },
@@ -153,3 +151,2 @@ {
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -167,3 +164,2 @@ "label": "Scored dataset",
           "isOutputDisabled": true,
-          "shape": "default",
           "data": {
@@ -181,3 +177,2 @@ "label": "Scored dataset to compare",
           "isOutputDisabled": false,
-          "shape": "default",
           "data": {
@@ -190,3 +185,5 @@ "label": "Evaluation results",
       ],
-      "shape": "default"
+      "data": {
+        "nodeType": "default"
+      }
     },
@@ -197,3 +194,5 @@ {
       "id": "9624b9db",
-      "shape": "default",
+      "data": {
+        "nodeType": "default"
+      },
       "name": "TD-Sample0:_Create_Pipeline_Test-Clean_Missing_Data-Cleaning_transformation-6357c458",
@@ -204,3 +203,2 @@ "ports": [
           "name": "DatasetOutput",
-          "shape": "default",
           "isInputDisabled": true,
@@ -220,3 +218,5 @@ "isOutputDisabled": false,
       "id": "16947e12",
-      "shape": "default",
+      "data": {
+        "nodeType": "default"
+      },
       "name": "MD-Sample0:_Create_Pipeline_Test-Train_Model-Trained_model-bd9cbfed",
@@ -227,3 +227,2 @@ "ports": [
           "name": "DatasetOutput",
-          "shape": "default",
           "isInputDisabled": true,
@@ -243,3 +242,5 @@ "isOutputDisabled": false,
       "id": "88c68150",
-      "shape": "default",
+      "data": {
+        "nodeType": "default"
+      },
       "name": "Automobile price data (Raw)",
@@ -250,3 +251,2 @@ "ports": [
           "name": "DatasetOutput",
-          "shape": "default",
           "isInputDisabled": true,
@@ -266,3 +266,5 @@ "isOutputDisabled": false,
       "name": "Web Service Input",
-      "shape": "default",
+      "data": {
+        "nodeType": "default"
+      },
       "ports": [
@@ -272,3 +274,2 @@ {
           "name": "WebServiceInputData",
-          "shape": "default",
           "isInputDisabled": true,
@@ -290,3 +291,5 @@ "isOutputDisabled": false,
       "id": "wsoutput8",
-      "shape": "default",
+      "data": {
+        "nodeType": "default"
+      },
       "ports": [
@@ -296,3 +299,2 @@ {
           "name": "WebServiceOutputData",
-          "shape": "default",
           "isInputDisabled": false,
@@ -315,4 +317,3 @@ "isOutputDisabled": true,
       "target": "23dbeeb8",
-      "targetPortId": "0",
-      "shape": "default"
+      "targetPortId": "0"
     },
@@ -324,54 +325,47 @@ {
       "target": "wsoutput8",
-      "targetPortId": "0",
-      "shape": "default"
+      "targetPortId": "0"
     },
     {
+      "id": "2",
       "source": "bef7f1e8",
       "sourcePortId": "2",
       "target": "a0e62086",
-      "targetPortId": "1",
-      "id": "2",
-      "shape": "default"
+      "targetPortId": "1"
     },
     {
+      "id": "3",
       "source": "9624b9db",
       "sourcePortId": "0",
       "target": "bef7f1e8",
-      "targetPortId": "0",
-      "id": "3",
-      "shape": "default"
+      "targetPortId": "0"
     },
     {
+      "id": "4",
       "source": "16947e12",
       "sourcePortId": "0",
       "target": "a0e62086",
-      "targetPortId": "0",
-      "id": "4",
-      "shape": "default"
+      "targetPortId": "0"
     },
     {
+      "id": "5",
       "source": "88c68150",
       "sourcePortId": "0",
       "target": "23dbeeb8",
-      "targetPortId": "0",
-      "id": "5",
-      "shape": "default"
+      "targetPortId": "0"
     },
     {
+      "id": "6",
       "source": "23dbeeb8",
       "sourcePortId": "1",
       "target": "bef7f1e8",
-      "targetPortId": "1",
-      "id": "6",
-      "shape": "default"
+      "targetPortId": "1"
     },
     {
+      "id": "7",
       "source": "a0e62086",
       "sourcePortId": "2",
       "target": "3ec23929",
-      "targetPortId": "0",
-      "id": "7",
-      "shape": "default"
+      "targetPortId": "0"
     }
   ]
 }

src/test/utils.ts

@@ -10,3 +10,5 @@ import * as React from "react";
   IGraphConfig,
+  INodeConfig,
   INodeDrawArgs,
+  IPortConfig,
   IPortDrawArgs,
@@ -89,26 +91,30 @@ } from "../index";
 export function getGraphConfig(): IGraphConfig {
+  const defaultNodeConfig: INodeConfig = {
+    render(args: INodeDrawArgs): React.ReactNode {
+      return null;
+    },
+    getMinWidth(rect: ICanvasNode): number {
+      return 280;
+    },
+    getMinHeight(rect: ICanvasNode): number {
+      return 50;
+    },
+  };
+
+  const defaultPortConfig: IPortConfig = {
+    render(args: IPortDrawArgs): React.ReactNode {
+      return null;
+    },
+    renderTooltips(args: Omit<IPortDrawArgs, "setData">): React.ReactNode {
+      return null;
+    },
+    getIsConnectable({ model }: IGetConnectableParams): boolean | undefined {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (model.data as any)?.isConnectable;
+    },
+  };
+
   return GraphConfigBuilder.default()
-    .registerNode("default", {
-      render(args: INodeDrawArgs): React.ReactNode {
-        return null;
-      },
-      getMinWidth(rect: ICanvasNode): number {
-        return 280;
-      },
-      getMinHeight(rect: ICanvasNode): number {
-        return 50;
-      },
-    })
-    .registerPort("default", {
-      render(args: IPortDrawArgs): React.ReactNode {
-        return null;
-      },
-      renderTooltips(args: Omit<IPortDrawArgs, "setData">): React.ReactNode {
-        return null;
-      },
-      getIsConnectable({ model }: IGetConnectableParams): boolean | undefined {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (model.data as any)?.isConnectable;
-      },
-    })
+    .registerNode((_node) => defaultNodeConfig)
+    .registerPort((_port) => defaultPortConfig)
     .build();
@@ -115,0 +121,0 @@ }

stories/components/FeaturesDemo.d.ts

@@ -14,4 +14,4 @@ import * as React from "react";
 export declare const Port: React.FunctionComponent<IPortProps>;
-export declare const graphConfig: import("../..").GraphConfig<unknown, unknown, unknown>;
+export declare const graphConfig: import("../..").IGraphConfig<unknown, unknown, unknown>;
 export declare const FeaturesDemo: React.FC;
 export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of package files

476

increased by2.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1692874

decreased by-5.45%

Dependency count

7

increased by16.67%

Lines of code

50701

decreased by-4.4%

Dependency changes

• + Added@fluentui/merge-styles@^8.2.0

• + Addedeventemitter3@^4.0.7

• + Added@fluentui/merge-styles@8.6.13(transitive)

• + Added@fluentui/set-version@8.2.23(transitive)

• + Addedtslib@2.8.1(transitive)