search

flowhub / the-graph

SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui
https://flowhub.github.io/the-graph/demo-full.html
MIT License
1.01k stars 180 forks source link

TS typing #619

Open linonetwo opened 12 months ago

linonetwo commented 12 months ago

Giving typescript typing can let developer better understand waht props this react component needs.

Currently, it is hard to embed this react component due to lack of example and typing, thanks.

linonetwo commented 6 months ago

Type that I'm using in src/type.d.ts


declare module 'the-graph' {
  import { Graph, GraphEdge, GraphNode } from 'fbp-graph';
  import { MutableRefObject } from 'react';
  import { Component as NoFloComponent } from 'noflo';
  import { JSONSchema7Type } from 'json-schema';

  export interface ITheGraphEditorContextMenuOptions {
    element: ITheGraphEditor;
    graph: Graph;
    item: Graph | GraphNode | GraphEdge;
    itemKey: 'graph' | 'node' | 'edge';
    /**
     * Keyof this.props.menus
     * For example, `'main'`
     */
    type: string;
    x?: number;
    y?: number;
  }
  export interface ITheGraphProps {
    contextMenu?: contextMenu;
    getEditorRef?: MutableRefObject<ITheGraphEditor | undefined>;
    getMenuDef?: (options: ITheGraphEditorContextMenuOptions) => any;
    graph: Graph;
    height: number | string;
    library?: IFBPLibrary;
    offsetX?: number;
    onEdgeSelection: (edgeID: string, edge: any, toggle: boolean) => void;
    onNodeSelection: (nodeID: string, node: any, toggle: boolean) => void;
    onPanScale: (x: number, y: number, scale: number) => void;
    readonly: boolean;
    width: number | string;
  }
  export interface ITheGraphEditorState {
    height: number;
    maxZoom: number;
    minZoom: number;
    scale: number;
    tooltip: string;
    tooltipVisible: boolean;
    tooltipX: number;
    tooltipY: number;
    trackStartX: number | null;
    trackStartY: number | null;
    width: number;
    x: number;
    y: number;
  }
  /**
   * Things accessible in the-graph/the-graph-app.js
   */
  export interface ITheGraphEditor {
    debounceLibraryRefesh: () => void;
    dirty: boolean;
    focusNode: (node: GraphNode) => void;
    getComponent: (name: string) => void;
    hideContext: () => void;
    lastScale: number;
    lastX: number;
    lastY: number;
    library: IFBPLibrary;
    libraryDirty: boolean;
    pinching: boolean;
    refs: {
      graph?: ITheGraphEditorGraph;
    };
    registerComponent: (definition: NoFloComponent, generated: boolean) => void;
    /**
     * This is undefined, because it is in the-graph/the-graph-graph.js
     * Set the preview bounding rect by drag event
     * In the-graph/the-graph-graph.js
     * ```js
     * appDomNode.addEventListener('mousemove', this.renderPreviewEdge);
     * appDomNode.addEventListener('panmove', this.renderPreviewEdge);
     * appDomNode.addEventListener('tap', this.cancelPreviewEdge);
 */
renderPreviewEdge?: (event: MouseEvent | TouchEvent) => void;
rerender: () => void;
setState: (state: Partial<ITheGraphEditorState>) => void;
showContext: (options: ITheGraphEditorContextMenuOptions) => void;
state: ITheGraphEditorState;
theme: 'dark' | 'light';
triggerAutolayout: () => void;
triggerFit: () => void;
unselectAll: () => void;
zoomFactor: number;
zoomX: number;
zoomY: number;

} export interface ITheGraphEditorGraphState { animatedEdges: GraphEdge[]; displaySelectionGroup: boolean; edgePreview: GraphEdge | null; edgePreviewX: number; edgePreviewY: number; errorNodes: GraphNode[]; forceSelection: boolean; offsetX: number; offsetY: number; selectedEdges: GraphEdge[]; selectedNodes: GraphNode[]; } export interface ITheGraphEditorGraphProps { app: ITheGraphEditor | null; graph: Graph; library: IFBPLibrary; // allows overriding icon of a node nodeIcons: Record<string, string>; offsetX: number; offsetY: number; } export interface ITheGraphEditorGraph { addEdge: Function; cancelPreviewEdge: Function; context: {}; dirty: false; edgeStart: Function; getComponentInfo: Function; getGraphInport: Function; getGraphOutport: Function; getNodeInport: Function; getNodeOutport: Function; getPorts: Function; markDirty: Function; mounted: true; moveGroup: Function; /**

declare module 'the-graph/the-graph/the-graph-autolayout' { import { autolayout } from 'the-graph'; // eslint-disable-next-line unicorn/prefer-export-from export default autolayout; }

declare module 'klayjs-noflo/klay-noflo' { import { Graph } from 'fbp-graph'; export interface IKlayLayoutOptions { direction: string; graph: Graph; options: { algorithm: string; borderSpacing: number; crossMin: string; direction: string; edgeRouting: string; edgeSpacingFactor: number; inLayerSpacingFactor: number; intCoordinates: boolean; layoutHierarchy: boolean; nodeLayering: string; nodePlace: string; spacing: number; }; portInfo: | Record<string, { inports: INoFloProtocolComponentPort[]; outports: INoFloProtocolComponentPort[]; }> | undefined; } export const klayNoflo: { init(options: { onSuccess: (keilerGraph: unknown) => void; workerScript: string }): typeof klayNoflo; layout(options: IKlayLayoutOptions): void; }; }