diff --git a/demo/src/components/FlowDetailForm.tsx b/demo/src/components/FlowDetailForm.tsx
index c28c946..12e4ee8 100644
--- a/demo/src/components/FlowDetailForm.tsx
+++ b/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 = () => {
diff --git a/demo/src/components/FlowDetailPanel.tsx b/demo/src/components/FlowDetailPanel.tsx
index a24a855..069910f 100644
--- a/demo/src/components/FlowDetailPanel.tsx
+++ b/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>
   );
diff --git a/package.json b/package.json
index 15da439..2f26f86 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/components/Command.tsx b/src/components/Command.tsx
index 41c1334..354a1d2 100644
--- a/src/components/Command.tsx
+++ b/src/components/Command.tsx
@@ -1,8 +1,5 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
 import {
   IMenuItemContext,
   MenuItemContext,
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 3b1203b..fbcdf12 100644
--- a/src/components/ContextMenu.tsx
+++ b/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,
diff --git a/src/components/DetailPanel.tsx b/src/components/DetailPanel.tsx
index f00cf1f..5c4a1c0 100644
--- a/src/components/DetailPanel.tsx
+++ b/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() });
       });
   }
diff --git a/src/components/Flow.tsx b/src/components/Flow.tsx
index 32b8bb1..d3ce5b5 100644
--- a/src/components/Flow.tsx
+++ b/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} />
         );
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 5165538..b9f4c92 100644
--- a/src/components/Item.tsx
+++ b/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];
diff --git a/src/components/ItemPanel.tsx b/src/components/ItemPanel.tsx
index a052c27..615739e 100644
--- a/src/components/ItemPanel.tsx
+++ b/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 {
 
diff --git a/src/components/Minimap.tsx b/src/components/Minimap.tsx
index bddbc55..2d1fa2f 100644
--- a/src/components/Minimap.tsx
+++ b/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;
diff --git a/src/components/MxGraph.tsx b/src/components/MxGraph.tsx
index 40e7e9a..b493883 100644
--- a/src/components/MxGraph.tsx
+++ b/src/components/MxGraph.tsx
@@ -1,8 +1,4 @@
 import * as React from "react";
-
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
 import {
   ClipboardContext,
 } from "../context/ClipboardContext";
@@ -25,18 +21,18 @@ import {
 } from "../types/mxGraph";
 import { ICustomShape, } from "../types/shapes";
 
-const {
+import {
   mxClient,
-  mxUtils,
+  mxConstants,
   mxEvent,
-  mxGraphModel,
   mxGeometry,
-  mxPoint,
-  mxUndoManager,
+  mxGraphModel,
   mxKeyHandler,
-  mxConstants,
+  mxPoint,
   mxRubberband,
-} = mxGraphJs;
+  mxUndoManager,
+  mxUtils,
+} from "../mxgraph";
 
 (window as IWindow).mxGeometry = mxGeometry;
 (window as IWindow).mxGraphModel = mxGraphModel;
@@ -263,6 +259,18 @@ export class MxGraph extends React.PureComponent<{}, IState> {
   }
 
   private readonly insertEdge = (parent: IMxCell, graph: IMxGraph, edge: ICanvasEdge, source: IMxCell, target: IMxCell): IMxCell => {
+
+    const sourceAnchor = edge.sourceAnchor;
+    const targetAnchor = edge.targetAnchor;
+    if (sourceAnchor !== undefined && targetAnchor !== undefined) {
+      const port1 = graph.getModel()
+        .getChildAt(source, Number(sourceAnchor));
+      const port2 = graph.getModel()
+        .getChildAt(target, Number(targetAnchor));
+      if (port1 && port2) {
+        return graph.insertEdge(parent, edge.id, "", port1, port2);
+      }
+    }
     return graph.insertEdge(parent, edge.id, "", source, target);
   }
 
@@ -286,7 +294,7 @@ export class MxGraph extends React.PureComponent<{}, IState> {
         const target = vertexes.find((v) => v.id === edge.target);
 
         if (source && target) {
-          graph.insertEdge(parent, edge.id, "", source.vertex, target.vertex);
+          this.insertEdge(parent, graph, edge, source.vertex, target.vertex);
         }
       });
     } finally {
@@ -305,7 +313,7 @@ export class MxGraph extends React.PureComponent<{}, IState> {
 
     function updateNodeStyle(state: IMxState, isHover: boolean): void {
       state.style.strokeColor = (isHover) ? "#1976d2" : "grey";
-      state.style.strokeWidth = (isHover) ? 1 : 0;
+      // state.style.strokeWidth = (isHover) ? 2 : 1;
     }
 
     function updateStyle(state: IMxState, isHover: boolean): void {
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 7ffafb2..8d97068 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -4,26 +4,34 @@ import {
   PanelContext,
 } from "../context/PanelContext";
 
-class Panel extends React.PureComponent<{name: string}> {
+class Panel extends React.PureComponent<{ name: string }> {
+  public key?: string;
+
   public render(): React.ReactNode {
+    // console.log("render");
+    // const childrenWithProps = React.Children.map(this.props.children, (child) => React.cloneElement(child, {}))
     return (
       <PanelContext.Consumer>{(value: IPanelContext) => {
         const {
           name, cells,
         } = value;
-
+        this.key = cells && cells.length ? cells[0].id : undefined;
         if (name && cells && name === this.props.name) {
-          return (
-            <div>
-              {this.props.children}
-            </div>
-          );
+          // console.log("render panel", this.props.children);
+          if (React.isValidElement(this.props.children)) {
+            return (
+              <div>
+                {React.cloneElement(this.props.children, {key: this.key, })}
+              </div>
+            );
+          }
         }
         return null;
       }}</PanelContext.Consumer>
 
     );
   }
+
 }
 
 import {
diff --git a/src/components/RegisterCommand.tsx b/src/components/RegisterCommand.tsx
index 9904066..5759152 100644
--- a/src/components/RegisterCommand.tsx
+++ b/src/components/RegisterCommand.tsx
@@ -1,7 +1,5 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import {
   IMxGraphContext,
   MxGraphContext,
diff --git a/src/components/RegisterNode.tsx b/src/components/RegisterNode.tsx
index ac1b723..838ba30 100644
--- a/src/components/RegisterNode.tsx
+++ b/src/components/RegisterNode.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import { IMxGraphContext, MxGraphContext } from "../context/MxGraphContext";
-const {
+import {
   mxCellRenderer,
-  mxRectangleShape,
   mxEllipse,
+  mxRectangleShape,
   mxUtils,
-} = mxGraphJs;
+} from "../mxgraph";
 
 import {
   IConfig,
diff --git a/src/components/ToolCommand.tsx b/src/components/ToolCommand.tsx
index 8cb614a..1a24684 100644
--- a/src/components/ToolCommand.tsx
+++ b/src/components/ToolCommand.tsx
@@ -1,8 +1,5 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
 import { IMxGraphContext, MxGraphContext } from "../context/MxGraphContext";
 
 export class ToolCommand extends React.PureComponent<{ name: string; text?: string }> {
diff --git a/src/components/WithNameProps.tsx b/src/components/WithNameProps.tsx
index b693f12..cea7c12 100644
--- a/src/components/WithNameProps.tsx
+++ b/src/components/WithNameProps.tsx
@@ -1,14 +1,5 @@
 import * as React from "react";
 
-// // tslint:disable-next-line: export-name
-// export function createMenu(MenuComponent, name): React.PureComponent {
-//   return class extends React.PureComponent {
-//     public render(): React.ReactNode {
-//       return <MenuComponent name={name} {...this.props} />;
-//     }
-//   };
-// }
-
 // const withNameProps = <P extends object>(PanelComponent: React.ComponentType<P>, name: string) => {
 //   return (
 //     class WithNameProps extends React.PureComponent<P & WithNameProps> {
diff --git a/src/components/WithPropsApi.tsx b/src/components/WithPropsApi.tsx
index 93df361..5c73fcd 100644
--- a/src/components/WithPropsApi.tsx
+++ b/src/components/WithPropsApi.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import { IMxGraphContext, MxGraphContext } from "../context/MxGraphContext";
+import {
+  mxConstants,
+} from "../mxgraph";
 import { IEdge, IMxCell, } from "../types/mxGraph";
 import {
   ICellModel,
@@ -12,11 +13,6 @@ import {
   IPropsAPI,
   isEdgeModel,
 } from "../types/propsAPI";
-const {
-  mxConstants,
-} = mxGraphJs;
-
-// function isEdge(cell: ImxCell)
 
 // tslint:disable-next-line: export-name no-any
 export const withPropsApi = (WrappedComponent: any) =>
@@ -60,7 +56,6 @@ export const withPropsApi = (WrappedComponent: any) =>
               getCellModel: (cell: IMxCell) => {
                 const geo = graphModel.getGeometry(cell);
                 const style = graph.getCellStyle(cell);
-
                 // tslint:disable-next-line: no-any
                 const cellData: any = {
                   id: cell.id,
@@ -73,6 +68,8 @@ export const withPropsApi = (WrappedComponent: any) =>
                 if (graphModel.isEdge(cell)) {
                   cellData.source = (cell as IEdge).source.id;
                   cellData.target = (cell as IEdge).target.id;
+                  cellData.sourcePort = style.sourcePort;
+                  cellData.targetPort = style.targetPort;
                   return (cellData as IEdgeModel);
                 } else {
                   cellData.x = geo.x;
diff --git a/src/context/ClipboardContext.ts b/src/context/ClipboardContext.ts
index 0fbddd6..37bb249 100644
--- a/src/context/ClipboardContext.ts
+++ b/src/context/ClipboardContext.ts
@@ -1,13 +1,11 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
 import * as React from "react";
-import { IMxCell, IMxGraph } from "../types/mxGraph";
-const {
-  mxUtils,
+import {
   mxClipboard,
-  mxGraphModel,
   mxCodec,
-} = mxGraphJs;
+  mxGraphModel,
+  mxUtils,
+} from "../mxgraph";
+import { IMxCell, IMxGraph } from "../types/mxGraph";
 
 import {
   IClipboardEvent,
diff --git a/src/mxgraph.ts b/src/mxgraph.ts
new file mode 100644
index 0000000..9fe9f20
--- /dev/null
+++ b/src/mxgraph.ts
@@ -0,0 +1,33 @@
+// @ts-ignore
+import mxGraphFactory from "mxgraph";
+// tslint:disable-next-line: export-name
+export const {
+  mxEvent,
+  mxUtils,
+  mxConstraintHandler,
+  mxGraph,
+  mxPoint,
+  mxEllipse,
+  mxConstants,
+  mxConnectionHandler,
+  mxCellState,
+  mxDragSource,
+  mxRectangle,
+  mxOutline,
+  mxClient,
+  mxGraphModel,
+  mxGeometry,
+  mxUndoManager,
+  mxKeyHandler,
+  mxRubberband,
+  mxCellRenderer,
+  mxRectangleShape,
+  mxClipboard,
+  mxCodec,
+  mxEdgeHandler,
+  mxGraphHandler,
+  mxVertexHandler,
+  mxCellMarker,
+  mxCellHighlight,
+  mxGraphView,
+} = new mxGraphFactory();
diff --git a/src/settings/Shapes.ts b/src/settings/Shapes.ts
deleted file mode 100644
index 0aaa0e3..0000000
--- a/src/settings/Shapes.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
-// const {
-//   mxCylinder,
-//   mxUtils,
-//   mxCellRenderer,
-//   mxConstants,
-//   mxStencilRegistry,
-//   mxStencil
-// } = mxGraphJs;
-
-// // tslint:disable-next-line: export-name
-// export function registerShape(): void {
-//   // tslint:disable-next-line: function-name
-//   function BoxShape(): void {
-//     mxCylinder.call(this);
-//   }
-//   mxUtils.extend(BoxShape, mxCylinder);
-//   BoxShape.prototype.extrude = 10;
-//   BoxShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) {
-//     var dy = this.extrude * this.scale;
-//     var dx = this.extrude * this.scale;
-
-//     if (isForeground) {
-//       path.moveTo(0, dy);
-//       path.lineTo(w - dx, dy);
-//       path.lineTo(w, 0);
-//       path.moveTo(w - dx, dy);
-//       path.lineTo(w - dx, h);
-//     } else {
-//       path.moveTo(0, dy);
-//       path.lineTo(dx, 0);
-//       path.lineTo(w, 0);
-//       path.lineTo(w, h - dy);
-//       path.lineTo(w - dx, h);
-//       path.lineTo(0, h);
-//       path.lineTo(0, dy);
-//       path.lineTo(dx, 0);
-//       path.close();
-//     }
-//   };
-//   mxCellRenderer.registerShape('box', BoxShape);
-//   //
-//   // load from xml
-//   const req = mxUtils.load("../../resources/shapes.xml");
-//   const root = req.getDocumentElement();
-//   let shape = root.firstChild;
-//   while (shape) {
-//     if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
-//       mxStencilRegistry.addStencil(shape.getAttribute("name"), new mxStencil(shape));
-//     }
-//     shape = shape.nextSibling;
-//   }
-// }
diff --git a/src/settings/edge.ts b/src/settings/edge.ts
index ef48e02..c770c1b 100644
--- a/src/settings/edge.ts
+++ b/src/settings/edge.ts
@@ -1,16 +1,15 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-import { IMxGraph } from "../types/mxGraph";
-import { IMxPoint, IMxShape } from "../types/shapes";
+
 // import { registerShape } from "./Shapes";
-const {
-  mxEvent,
-  mxConstraintHandler,
-  mxPoint,
+import {
   mxConstants,
+  mxConstraintHandler,
   mxEdgeHandler,
+  mxEvent,
+  mxPoint,
   mxRectangle,
-} = mxGraphJs;
+} from "../mxgraph";
+import { IMxGraph } from "../types/mxGraph";
+import { IMxPoint, IMxShape } from "../types/shapes";
 
 const setSelectionShape = (): void => {
   mxEdgeHandler.prototype.createSelectionShape = function(_points: IMxPoint[]): IMxShape {
@@ -44,12 +43,13 @@ const setSelectionShape = (): void => {
       this.shape.isDashed = this.isSelectionDashed();
       this.shape.stroke = this.getSelectionColor();
       this.shape.fill = this.getSelectionColor();
-      this.shape.strokewidth = this.getSelectionStrokeWidth() / this.shape.scale / this.shape.scale;
+
       this.shape.arrowStrokewidth = this.getSelectionStrokeWidth();
       this.shape.arrowStroke = this.getSelectionColor();
       this.shape.isShadow = false;
       console.log(this.shape);
       this.shape.redraw();
+      console.log(this.shape.style);
     }
 
     if (this.parentHighlight != null) {
diff --git a/src/settings/guide.ts b/src/settings/guide.ts
index 517c314..3e3600b 100644
--- a/src/settings/guide.ts
+++ b/src/settings/guide.ts
@@ -1,10 +1,8 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-import { IMxGraph } from "../types/mxGraph";
-const {
+import {
   mxConstants,
   mxGraphHandler,
-} = mxGraphJs;
+} from "../mxgraph";
+import { IMxGraph } from "../types/mxGraph";
 
 // graph.moveCells(graph.getSelectionCells(), dx, dy);
 
diff --git a/src/settings/init.ts b/src/settings/init.ts
index ef6e397..368a454 100644
--- a/src/settings/init.ts
+++ b/src/settings/init.ts
@@ -1,22 +1,20 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-import { IMxCell, IMxGraph, IMxMouseEvent, IMxState } from "../types/mxGraph";
-import { initEdgeHandle } from "./edge";
-import { initPort } from "./port";
 // import { registerShape } from "./Shapes";
-const {
-  mxEvent,
+import {
+  mxCellState,
+  mxConnectionHandler,
+  mxConstants,
   mxConstraintHandler,
+  mxDragSource,
+  mxEllipse,
+  mxEvent,
   mxGraph,
   mxPoint,
-  mxEllipse,
-  mxConstants,
-  mxConnectionHandler,
-  mxCellState,
-  mxDragSource,
   mxRectangle,
   mxUtils,
-} = mxGraphJs;
+} from "../mxgraph";
+import { IMxCell, IMxGraph, IMxMouseEvent, IMxState } from "../types/mxGraph";
+import { initEdgeHandle } from "./edge";
+import { initPort } from "./port";
 
 function initStyleSheet(graph: IMxGraph): void {
   const edgeStyle = graph.getStylesheet()
diff --git a/src/settings/port.ts b/src/settings/port.ts
index be3e144..68c4438 100644
--- a/src/settings/port.ts
+++ b/src/settings/port.ts
@@ -1,21 +1,18 @@
-// @ts-ignore
-import * as mxGraphJs from "mxgraph-js";
-
-import { IMxCell, IMxGraph, IMxMouseEvent, IMxState } from "../types/mxGraph";
-const {
-  mxGraph,
+import {
+  mxCellHighlight,
+  mxCellMarker,
+  mxClient,
   mxConstants,
   mxEdgeHandler,
-  mxVertexHandler,
-  mxRectangle,
   mxEvent,
-  mxCellMarker,
-  mxCellHighlight,
+  mxGraph,
   mxGraphView,
-  mxClient,
-  mxUtils,
   mxPoint,
-} = mxGraphJs;
+  mxRectangle,
+  mxUtils,
+  mxVertexHandler,
+} from "../mxgraph";
+import { IMxCell, IMxGraph, IMxMouseEvent, IMxState } from "../types/mxGraph";
 
 // tslint:disable
 
@@ -31,6 +28,7 @@ function setPortHandler(_graph: IMxGraph): void {
 
     shape.fill = isPort ? state.style[mxConstants.STYLE_FILLCOLOR] : this.getSelectionColor();
     shape.stroke = this.getSelectionColor();
+    shape.strokewidth = 1 * this.graph.view.scale;
 
     shape.fillOpacity = isPort ? 100 : 20;
     shape.strokeOpacity = 100;
diff --git a/src/types/mxGraph.ts b/src/types/mxGraph.ts
index a6a6d7a..3177724 100644
--- a/src/types/mxGraph.ts
+++ b/src/types/mxGraph.ts
@@ -280,7 +280,7 @@ export interface IMxGraph {
   getTooltipForCell(cell: IMxCell): IMxToolTip;
   getGraphBounds(): void;
   insertVertex(parent: IMxCell, id?: string | null, value?: string, x?: number, y?: number, width?: number, height?: number, style?: string, isRelative?: boolean): IMxCell;
-  insertEdge(parent: IMxCell, id?: string | null, value?: string, source?: IMxCell, target?: IMxCell): IMxCell;
+  insertEdge(parent: IMxCell, id?: string | null, value?: string, source?: IMxCell, target?: IMxCell, style?: string): IMxCell;
   importCells(cells: IMxCell[], x: number, y: number, target: IMxCell): IMxCell[];
   scrollCellToVisible(cells: IMxCell[]): void;
   setSelectionCells(cells: IMxCell[]): void;
@@ -318,7 +318,7 @@ export interface IMxGraph {
   cloneCells(cells: IMxCell[]): IMxCell[];
   // drill down
   isPort(cell: IMxCell): boolean;
-  getTerminalForPort(portCell: IMxCell, isSource: boolean): IMxCell;
+  getTerminalForPort(portCell: IMxCell, source: boolean/* if the cell is source or target port*/): IMxCell;
   zoomIn(): void;
   zoomOut(): void;
   fit(): void;
diff --git a/src/types/propsAPI.ts b/src/types/propsAPI.ts
index 28ac241..8cc69e2 100644
--- a/src/types/propsAPI.ts
+++ b/src/types/propsAPI.ts
@@ -34,6 +34,8 @@ export interface INodeModel extends IBasicModel{
 export interface IEdgeModel extends IBasicModel {
   source: string; // cell id
   target: string; // cell id
+  sourcePort: string; // cell id
+  targetPort: string; // cell id
   id: string;
 }
 
diff --git a/src/types/shapes.ts b/src/types/shapes.ts
index 783093c..847975e 100644
--- a/src/types/shapes.ts
+++ b/src/types/shapes.ts
@@ -18,6 +18,8 @@ export interface IConfig {
   textOpacity?: number; // 0~100
   fontFamily?: string;
   points?: number[][];
+  sourcePort?: number;
+  targetPort?: number;
 }
 
 export interface IShape {