Customizable

[xuhongxu96]

What "Customizable" means?

Users can do easy customization by modifying a config. Users can do deep customization by replace them with their own components.

We want to support both scenarios.

Customizable Parts

• Canvas
  • Context Menu
• Node
  • Content
  • Style
  • Context Menu
• Port
  • Style
  • Label
  • Context Menu
• Handle
  • Style

[xuhongxu96]

Component Style Customization

Node Customization

• Node has different types
• Node contains user defined data
• Node style should be configured per node type

export interface Node<T> {
  layout: IRect;

  title: string;

  input: Port[];
  output: Port[];

  // For customization
  type: string;
  data: T;
}

export interface NodeConfig {
  styles: {
    [type: string]: {
      component: React.Component;
      config: any;
    };
  };
}

DraftEdge Customization

• DraftEdge has different types per node type and port type of the start port.
• DraftEdge can be configured per type

export interface DraftEdgeConfig {
  typeMapFn: (startPort: IPortMeta) => string;
  styles: {
    [type: string]: {
      component: React.Component;
      config: any;
    };
  };
}

Edge Customization

• Edge has different types
• Edge contains user defined data
• Edge style should be configured per edge type

export interface Edge<T> {
  start: NodePort;
  end: NodePort;

  type: string;
  data: T;
}

export interface EdgeConfig {
  styles: {
    [type: string]: {
      component: React.Component;
      config: any;
    };
  };
}

Event Handling Customization

TBD