✨Able save points on link and add listener when moving node

src/components/XircuitsApp.ts

@@ -7,6 +7,8 @@ import { ILabShell, JupyterFrontEnd } from '@jupyterlab/application';
 import { CustomDiagramState } from './state/CustomDiagramState'
 import { CustomLinkModel, TriangleLinkModel } from './link/CustomLinkModel';
 import { CustomLinkFactory, TriangleLinkFactory } from './link/CustomLinkFactory';
+import { PointModel } from '@projectstorm/react-diagrams';
+import { Point } from '@projectstorm/geometry';
 
 export class XircuitsApplication {
 
@@ -90,6 +92,8 @@ export class XircuitsApplication {
                                 const newTriangleLink = new TriangleLinkModel();
                                 const sourceNode = tempModel.getNode(link.source);
                                 const targetNode = tempModel.getNode(link.target);
+                                const linkPoints = link.points;
+                                const points = [];
 
                                 const sourcePort = sourceNode.getPortFromID(link.sourcePort);
                                 const sourcePortName = sourcePort.getOptions()['name'];
@@ -113,6 +117,11 @@ export class XircuitsApplication {
                                 }
                                 newLink.setTargetPort(targetPort);
 
+                                // Set points on link if exist
+                                linkPoints.map((point)=> {
+                                        points.push(new PointModel({ link: link, position: new Point(point.x, point.y) }));
+                                })
+                                newLink.setPoints(points);
                                 tempModel.addAll(newLink);
                                 diagramEngine.setModel(tempModel);
                         }

src/components/state/DragDiagramItemsState.ts

@@ -13,23 +13,27 @@ export class DragDiagramItemsState extends MoveItemsState<DiagramEngine> {
       new Action({
         type: InputType.MOUSE_UP,
         fire: event => {
-          const item = this.engine.getMouseElement(event.event as MouseEvent<Element, globalThis.MouseEvent>);
-          if (item instanceof PortModel) {
-            _.forEach(this.initialPositions, position => {
-              if (position.item instanceof PointModel) {
-                const link = position.item.getParent() as LinkModel;
+          try {
+            const item = this.engine.getMouseElement(event.event as MouseEvent<Element, globalThis.MouseEvent>);
+            if (item instanceof PortModel) {
+              _.forEach(this.initialPositions, position => {
+                if (position.item instanceof PointModel) {
+                  const link = position.item.getParent() as LinkModel;
 
-                // only care about the last links
-                if (link.getLastPoint() !== position.item) {
-                  return;
+                  // only care about the last links
+                  if (link.getLastPoint() !== position.item) {
+                    return;
+                  }
+                  if (link.getSourcePort().canLinkToPort(item)) {
+                    link.setTargetPort(item);
+                    item.reportPosition();
+                    this.engine.repaintCanvas();
+                  }
                 }
-                if (link.getSourcePort().canLinkToPort(item)) {
-                  link.setTargetPort(item);
-                  item.reportPosition();
-                  this.engine.repaintCanvas();
-                }
-              }
-            });
+              });
+            }
+          } catch (e) {
+            // No-op
           }
         }
       })

src/components/state/MoveItemsState.ts

@@ -20,6 +20,8 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
       item: BaseModel;
     };
   } = {};
+  initialPosition: Point;
+  finalPosition: Point;
 
   constructor() {
     super({
@@ -51,11 +53,32 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
           }
           element.setSelected(true);
           this.engine.repaintCanvas();
+          this.initialPosition = element['position'];
+        }
+      })
+    );
+
+    this.registerAction(
+      new Action({
+        type: InputType.MOUSE_UP,
+        fire: () => {
+          // When node in the same position, just return
+          if (
+            this.initialPosition.x === this.finalPosition.x &&
+            this.initialPosition.y === this.finalPosition.y
+          ) {
+            return;
+          }
+          this.fireEvent();
         }
       })
     );
   }
 
+  fireEvent = () => {
+		this.engine.fireEvent({}, 'onChange');
+	};
+
   activated(previous: State) {
     super.activated(previous);
     this.initialPositions = {};
@@ -78,6 +101,7 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
 
         const pos = this.initialPositions[item.getID()].point;
         item.setPosition(model.getGridPosition(pos.x + event.virtualDisplacementX), model.getGridPosition(pos.y + event.virtualDisplacementY));
+        this.finalPosition = item.getPosition();
       }
     }
     this.engine.repaintCanvas();