Demo

demo/src/components/FlowDetailForm.tsx

@@ -1,19 +1,23 @@
 import * as React from "react";
 import { withPropsApi } from "../../../src/index";
 import { ICanvasData } from "../../../src/types/flow";
-import { IPropsAPI } from "../../../src/types/propsAPI";
+import { IPropsAPI, IEdgeModel } from "../../../src/types/propsAPI";
 
 interface IProps {
   propsAPI: IPropsAPI;
+  name: string;
 }
 
 import * as Fabric from "office-ui-fabric-react";
-import { StackItem } from "office-ui-fabric-react";
+
 import { IMxCell } from "../../../src/types/mxGraph";
 
 const {
   TextField,
   Stack,
+  StackItem,
+  Label,
+  Text,
 } = Fabric;
 
 export class DetailForm extends React.PureComponent<IProps, { value: string }> {
@@ -31,14 +35,95 @@ export class DetailForm extends React.PureComponent<IProps, { value: string }> {
     this._isEditing = false;
   }
   public render(): React.ReactNode {
+    console.log("render");
+    const { name } = this.props;
     return (
       <Stack >
-        <StackItem>
+        {name === "node" && this.renderNodeDetail()}
+        {name === "edge" && this.renderEdgeDetail()}
+        {name === "port" && this.renderPortDetail()}
+        {name === "canvas" && this.renderCanvasDetail()}
+      </Stack >
+    );
+  }
+
+  public renderNodeDetail = () => {
+    const { propsAPI } = this.props;
+    const model = propsAPI.getCellModel(this.cell);
+    console.log(model);
+    return [
+      (
+        <StackItem key="1">
           <TextField label="label" type="text" placeholder="placeholder" value={this._getInputValue()} onFocus={this.startEditing} onChange={this._onChange} onBlur={this.stopEditing} />
         </StackItem>
-      </Stack >
+      ),
+      (
+        <StackItem key="2">
+          <Label>id</Label>
+          <Text>{model.id}</Text>
+        </StackItem>
+      )
+    ];
+  }
+
+  public renderEdgeDetail = () => {
+    const { propsAPI } = this.props;
+    const model = propsAPI.getCellModel(this.cell);
+    console.log(model);
+    return [
+      (
+        <StackItem key="1">
+          <TextField label="label" type="text" placeholder="placeholder" value={this._getInputValue()} onFocus={this.startEditing} onChange={this._onChange} onBlur={this.stopEditing} />
+        </StackItem>
+      ),
+      (
+        <StackItem key="2">
+          <Label>id</Label>
+          <Text>{model.id}</Text>
+          <Label>source id</Label>
+          <Text> {(model as IEdgeModel).source}</Text>
+          <Label>target id</Label>
+          <Text> {(model as IEdgeModel).target}</Text>
+          <Label>source port id</Label>
+          <Text> {(model as IEdgeModel).sourcePort}</Text>
+          <Label>target port id</Label>
+          <Text> {(model as IEdgeModel).targetPort}</Text>
+        </StackItem>
+      )
+    ];
+  }
+
+  public renderPortDetail = () => {
+    const { propsAPI } = this.props;
+    const model = propsAPI.getCellModel(this.cell);
+    console.log(model);
+    console.log(propsAPI.graph.getTerminalForPort(this.cell, false));
+    console.log(propsAPI.graph.getTerminalForPort(this.cell, true));
+    return [
+      (
+        <StackItem key="1">
+          <TextField label="label" type="text" placeholder="placeholder" value={this._getInputValue()} onFocus={this.startEditing} onChange={this._onChange} onBlur={this.stopEditing} />
+        </StackItem>
+      ),
+      (
+        <StackItem key="2">
+          <Label>id</Label>
+          <Text>{model.id}</Text>
+        </StackItem>
+      )
+    ];
+  }
+
+  public renderCanvasDetail = () => {
+    const { propsAPI } = this.props;
+    console.log(propsAPI);
+    return (
+      <StackItem>
+        {"canvas"}
+      </StackItem>
     );
   }
+
   private readonly _onChange = (event) => {
     this.setState({ value: event.target.value });
   }
@@ -54,7 +139,7 @@ export class DetailForm extends React.PureComponent<IProps, { value: string }> {
     if (!cell) {
       throw new Error("no cell to get value");
     }
-    update(cell, {label: this.state.value});
+    update(cell, { label: this.state.value });
     this._isEditing = false;
   }
   private readonly _getCellValue = () => {

demo/src/components/FlowDetailPanel.tsx

@@ -4,7 +4,6 @@ import {
   EdgePanel,
   NodePanel,
   PortPanel,
-  TextEditor,
 } from "../../../src/index";
 
 import {
@@ -15,13 +14,13 @@ export const FlowDetailPanel = () => {
   return (
     <DetailPanel >
       <NodePanel >
-        <FlowDetailForm />
+        <FlowDetailForm name="node"/>
       </NodePanel>
       <EdgePanel >
-        <FlowDetailForm />
+        <FlowDetailForm name="edge"/>
       </EdgePanel>
       <PortPanel>
-        <FlowDetailForm />
+        <FlowDetailForm name="port"/>
       </PortPanel>
     </DetailPanel>
   );

package.json

@@ -87,6 +87,7 @@
   "dependencies": {
     "@storybook/react": "^5.1.9",
     "eslint": "^6.0.1",
-    "mxgraph-js": "^1.0.1"
+    "mxgraph": "^4.0.4",
+    "office-ui-fabric-react": "^7.28.1"
   }
 }

src/components/Command.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
 import {
   IMenuItemContext,
   MenuItemContext,

src/components/ContextMenu.tsx

@@ -1,11 +1,9 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import * as React from "react";
 
-const {
+import {
   mxEvent,
   mxUtils,
-} = mxGraphJs;
+} from "../mxgraph";
 
 import {
   IMxGraphContext,

src/components/DetailPanel.tsx

@@ -1,11 +1,8 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
-const {
+import {
   mxEvent
-} = mxGraphJs;
+} from "../mxgraph";
 
 import {
   IMxGraphContext,
@@ -28,6 +25,22 @@ export class DetailPanel extends React.PureComponent<{}, { cells?: IMxCell[] }>
 
   }
 
+  // public shouldComponentUpdate(_nextProps: {}, nextState: { cells?: IMxCell[]}): boolean {
+  //   if (this.state.cells && nextState.cells) {
+  //     if (this.state.cells.length === nextState.cells.length) {
+  //       for (let i = 0; i < this.state.cells.length; i += 1) {
+  //         if (this.state.cells[i] !== nextState.cells[i]) {
+  //           return true;
+  //         }
+  //       }
+  //       return false;
+  //     }
+  //     else { return true; }
+  //   } else {
+  //     return this.state.cells !== nextState.cells;
+  //   }
+  // }
+
   public render(): React.ReactNode {
     // console.log("render");
     return (
@@ -40,7 +53,9 @@ export class DetailPanel extends React.PureComponent<{}, { cells?: IMxCell[] }>
             this._setListener(graph);
             this._first = false;
           }
-          const name = this._getName(graph, this.state.cells);
+          const name = this._getName(graph, graph.getSelectionCells());
+          // console.log("render root")
+          // console.log(this.state.cells);
           return (
             <PanelContext.Provider value={{ name, cells: this.state.cells }}>
               <div>
@@ -58,8 +73,6 @@ export class DetailPanel extends React.PureComponent<{}, { cells?: IMxCell[] }>
 
     graph.getSelectionModel()
       .addListener(mxEvent.CHANGE, (_sender, _evt) => {
-        // console.log(_sender, _evt);
-        // console.log(graph.getSelectionCells()[0], graph.getDefaultParent());
         this.setState({ cells: graph.getSelectionCells() });
       });
   }

src/components/Flow.tsx

@@ -3,8 +3,7 @@ import {
   ICanvasData,
 } from "../types/flow";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
+import { mxGraph } from "../mxgraph";
 
 import {
   IMxGraphContext,
@@ -22,10 +21,6 @@ interface IFlowState {
   graph?: IMxGraph;
 }
 
-const {
-  mxGraph,
-} = mxGraphJs;
-
 export class Flow extends React.PureComponent<IFlowProps, IFlowState> {
   private readonly _containerRef = React.createRef<HTMLDivElement>();
   private _setGraph?: (graph: IMxGraph) => void;
@@ -49,7 +44,7 @@ export class Flow extends React.PureComponent<IFlowProps, IFlowState> {
         if (graph) {
           readData(graph, this.props.data);
         }
-        // const Background = require("../../images/grid.gif");
+
         return (
           <div style={{width: "100%", height: "100%", overflow: "scroll"}} className="flow-container" ref={this._containerRef} />
         );

src/components/Item.tsx

@@ -1,11 +1,8 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
-const {
-    mxUtils,
-  } = mxGraphJs;
+import {
+  mxUtils
+} from "../mxgraph";
 
 import {
   IMxGraphContext,
@@ -74,7 +71,7 @@ export class Item extends React.PureComponent<IItemProps>{
 
   private readonly insertNode = (graph: IMxGraph, _evt: PointerEvent, target: IMxCell, x: number, y: number): void => {
     const label = this.props.model && this.props.model.label ? this.props.model.label : "none";
-    // tslint:disable-next-line: newline-per-chained-call
+
     const shape = this.props.shape;
     const tmp = this.props.size ? this.props.size.split("*")
        .map((s) => parseInt(s, 10)) : [100, 70];

src/components/ItemPanel.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
 export class ItemPanel extends React.PureComponent {
   public render(): React.ReactNode {
 

src/components/Minimap.tsx

@@ -1,16 +1,14 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import {
   IMxGraphContext,
   MxGraphContext,
 } from "../context/MxGraphContext";
 import { IMxGraph } from "../types/mxGraph";
 
-const {
+import {
   mxOutline,
-} = mxGraphJs;
+} from "../mxgraph";
 
 interface IMinimapProps {
   width?: string;