@genexus/diagram-editors 0.5.27 → 0.8.27

package/dist/cjs/{editor-27988eb7.js → editor-386996a2.js}

@@ -92532,7 +92532,7 @@ var CommonStyleTokens;
     CommonStyleTokens.PREVIEW_COLOR = '#5bb2ff';
     CommonStyleTokens.EDGE_SELECTION_COLOR = 'red';
     CommonStyleTokens.HIGHLIGHT_CONNECTION_COLOR = '#ffb754';
-    CommonStyleTokens.GUIDE_COLOR = CommonStyleTokens.PREVIEW_COLOR; // '#ffb754';
+    CommonStyleTokens.GUIDE_COLOR = CommonStyleTokens.PREVIEW_COLOR;
     CommonStyleTokens.GUIDE_STROKE_WIDTH = 2;
     CommonStyleTokens.DROP_TARGET_COLOR = CommonStyleTokens.GUIDE_COLOR;
 })(CommonStyleTokens || (CommonStyleTokens = {}));
@@ -92575,9 +92575,7 @@ mx.mxMarker.addMarker('oval', function (canvas, shape, type, pe, unitX, unitY, s
         }
     };
 });
-// Enables snapping waypoints to terminals (this is useful when managing orthogonal edge segments)
 mx.mxEdgeHandler.prototype.snapToTerminals = true;
-/// Custom functions for SVG direct manipulation
 const _SYM_SVG_GROUPS = Symbol('svgGrpups');
 const svgCanvas = mx.mxSvgCanvas2D.prototype;
 svgCanvas[_SYM_SVG_GROUPS] = [];
@@ -92614,55 +92612,6 @@ svgCanvas.addSvgElement = function (name, attrs = {}) {
     }
     return e;
 };
-//mx.mxCellHighlight.prototype.drawHighlight = () => {};
-// mx.mxMarker.addMarker('classic', function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
-//    let widthFactor = 2;
-//    // The angle of the forward facing arrow sides against the x axis is
-//    // 26.565 degrees, 1/sin(26.565) = 2.236 / 2 = 1.118 ( / 2 allows for
-//    // only half the strokewidth is processed ).
-//    var endOffsetX = unitX * sw * 1.118;
-//    var endOffsetY = unitY * sw * 1.118;
-//    unitX = unitX * (size + sw);
-//    unitY = unitY * (size + sw);
-//    var pt = pe.clone();
-//    pt.x -= endOffsetX;
-//    pt.y -= endOffsetY;
-//    var f = (type != mx.mxConstants.ARROW_CLASSIC && type != mx.mxConstants.ARROW_CLASSIC_THIN) ? 1 : 3 / 4;
-//    pe.x += -unitX * f - endOffsetX;
-//    pe.y += -unitY * f - endOffsetY;
-//    return function () {
-//       canvas.begin();
-//       canvas.moveTo(pt.x, pt.y);
-//       canvas.lineTo(pt.x - unitX - unitY / widthFactor, pt.y - unitY + unitX / widthFactor);
-//       if (type == mx.mxConstants.ARROW_CLASSIC || type == mx.mxConstants.ARROW_CLASSIC_THIN) {
-//          canvas.lineTo(pt.x - unitX * 3 / 4, pt.y - unitY * 3 / 4);
-//       }
-//       canvas.lineTo(pt.x + unitY / widthFactor - unitX, pt.y - unitY - unitX / widthFactor);
-//       canvas.close();
-//       if (filled) {
-//          canvas.fillAndStroke();
-//       }
-//       else {
-//          canvas.stroke();
-//       }
-//       pt.x -= endOffsetX * 5;
-//       pt.y -= endOffsetY * 5;
-//       canvas.begin();
-//       canvas.moveTo(pt.x, pt.y);
-//       canvas.lineTo(pt.x - unitX - unitY / widthFactor, pt.y - unitY + unitX / widthFactor);
-//       if (type == mx.mxConstants.ARROW_CLASSIC || type == mx.mxConstants.ARROW_CLASSIC_THIN) {
-//          canvas.lineTo(pt.x - unitX * 3 / 4, pt.y - unitY * 3 / 4);
-//       }
-//       canvas.lineTo(pt.x + unitY / widthFactor - unitX, pt.y - unitY - unitX / widthFactor);
-//       canvas.close();
-//       if (filled) {
-//          canvas.fillAndStroke();
-//       }
-//       else {
-//          canvas.stroke();
-//       }
-//    };
-// });
 
 class Cell extends mx.mxCell {
     constructor(descriptor, value, geometry) {
@@ -92721,7 +92670,7 @@ class Cell extends mx.mxCell {
         return Object.assign({}, value);
     }
 }
-Cell.prototype.mxTransient = [...Cell.prototype.mxTransient, '_descriptor']; // We avoid descriptor being deep cloned if the cell clone is deep.
+Cell.prototype.mxTransient = [...Cell.prototype.mxTransient, '_descriptor'];
 
 const _LABEL_ATTR = 'label';
 class CellDescriptor {
@@ -92861,12 +92810,12 @@ class EventConverter {
             let parentGuid = null, slotId;
             if (change.parent) {
                 if (change.parent instanceof Cell) {
-                    let parentElement = change.child.getParentDiagramElement(); // Must always be different than null               
+                    let parentElement = change.child.getParentDiagramElement();
                     parentGuid = parentElement.id;
                     slotId = change.parent.descriptor.slotId;
                 }
                 else
-                    parentGuid = Guid.EMPTY.toString(); // Empty Guid means root default layer (for now only one layer supported)            
+                    parentGuid = Guid.EMPTY.toString();
             }
             return {
                 type: EventType.ChildChange,
@@ -92954,14 +92903,11 @@ class ConnectionHandler extends mx.mxConnectionHandler {
     }
     createMarker() {
         let marker = super.createMarker();
-        // This is to disable the creation of new edges by clicking on potential source vertexes.
-        // let intersects = marker.intersects;
         marker.intersects = mx.mxUtils.bind(this, function (state, evt) {
             if (this.connectImage != null || this.isConnecting()) {
                 return true;
             }
             return false;
-            //return intersects.call(marker, state, evt);
         });
         return marker;
     }
@@ -92984,23 +92930,8 @@ class ConnectionHandler extends mx.mxConnectionHandler {
             let t = this.graph.view.translate;
             let s = this.graph.view.scale;
             let point = new mx.mxPoint(this.currentPoint.x / s - t.x, this.currentPoint.y / s - t.y);
-            geo.x = Math.round(point.x - geo.width / 2); // <GX> This was wrong (panDx should not be substracted because it messes with autopan): geo.x = Math.round(point.x - geo.width / 2 - this.graph.panDx / s);
-            geo.y = Math.round(point.y - geo.height / 2); // <GX> Same as above but with panDy
-            // // Aligns with source if within certain tolerance
-            // let tol = (this as any).getAlignmentTolerance();
-            // if (tol > 0) {
-            //    let sourceState = this.graph.view.getState(source);
-            //    if (sourceState != null) {
-            //       let x = sourceState.x / s - t.x;
-            //       let y = sourceState.y / s - t.y;
-            //       if (Math.abs(x - geo.x) <= tol) {
-            //          geo.x = Math.round(x);
-            //       }
-            //       if (Math.abs(y - geo.y) <= tol) {
-            //          geo.y = Math.round(y);
-            //       }
-            //    }
-            // }
+            geo.x = Math.round(point.x - geo.width / 2);
+            geo.y = Math.round(point.y - geo.height / 2);
         }
         this.currentVertexType = null;
         return clone;
@@ -93037,8 +92968,6 @@ class ConnectionHandler extends mx.mxConnectionHandler {
     }
     connect(source, target, evt, dropTarget) {
         if (target != null || this.isCreateTarget(evt) || this.graph.allowDanglingEdges) {
-            // Uses the common parent of source and target or
-            // the default parent to insert the edge
             var model = this.graph.getModel();
             var terminalInserted = false;
             var edge = null;
@@ -93049,8 +92978,6 @@ class ConnectionHandler extends mx.mxConnectionHandler {
                     if (target != null) {
                         dropTarget = this.graph.getDropTarget([target], evt, dropTarget);
                         terminalInserted = true;
-                        // Disables edges as drop targets if the target cell was created
-                        // FIXME: Should not shift if vertex was aligned (same in Java)
                         if (dropTarget == null || !this.graph.getModel().isEdge(dropTarget)) {
                             var pstate = this.graph.getView().getState(dropTarget);
                             if (pstate != null) {
@@ -93064,7 +92991,7 @@ class ConnectionHandler extends mx.mxConnectionHandler {
                         }
                         this.graph.addCell(target, dropTarget);
                     }
-                    else if (!this.graph.allowDanglingEdges) { // <GX> Minor fix: do not create links if there is no target and allowDanglingEdges is false
+                    else if (!this.graph.allowDanglingEdges) {
                         return;
                     }
                 }
@@ -93078,8 +93005,6 @@ class ConnectionHandler extends mx.mxConnectionHandler {
                         parent = model.getParent(parent);
                     }
                 }
-                // Uses the value of the preview edge state for inserting
-                // the new edge into the graph
                 var value = null;
                 var style = null;
                 if (this.edgeState != null) {
@@ -93088,15 +93013,12 @@ class ConnectionHandler extends mx.mxConnectionHandler {
                 }
                 edge = this.insertEdge(parent, null, value, source, target, style);
                 if (edge != null) {
-                    // Updates the connection constraints
                     this.graph.setConnectionConstraint(edge, source, true, this.sourceConstraint);
                     this.graph.setConnectionConstraint(edge, target, false, this.constraintHandler.currentConstraint);
-                    // Uses geometry of the preview edge state
                     if (this.edgeState != null) {
                         model.setGeometry(edge, this.edgeState.cell.geometry);
                     }
                     var parent = model.getParent(source);
-                    // Inserts edge before source
                     if (this.isInsertBefore(edge, source, target, evt, dropTarget)) {
                         var tmp = source;
                         while (tmp.parent != null && tmp.geometry != null &&
@@ -93107,14 +93029,12 @@ class ConnectionHandler extends mx.mxConnectionHandler {
                             model.add(parent, edge, tmp.parent.getIndex(tmp));
                         }
                     }
-                    // Makes sure the edge has a non-null, relative geometry
                     var geo = model.getGeometry(edge);
                     if (geo == null) {
                         geo = new mx.mxGeometry();
                         geo.relative = true;
                         model.setGeometry(edge, geo);
                     }
-                    // Uses scaled waypoints in geometry
                     if (this.waypoints != null && this.waypoints.length > 0) {
                         var s = this.graph.view.scale;
                         var tr = this.graph.view.translate;
@@ -93139,7 +93059,6 @@ class ConnectionHandler extends mx.mxConnectionHandler {
             }
             catch (e) {
                 mx.mxLog.show();
-                //mx.mxLog.debug(e.message);
             }
             finally {
                 model.endUpdate();
@@ -93235,8 +93154,6 @@ class GraphHandler extends mx.mxGraphHandler {
     shouldRemoveCellsFromParent(parent, cells, evt) {
         return false;
     }
-    // Modify mouseDown and mouseUp event handlers to use Right button clicks only for selction if current target node is not selected.
-    // This is to avoid inteference with context menu management which is done in the host of this component.
     mouseDown(sender, me) {
         let graph = this.graph;
         if (me.getEvent().button === 2) {
@@ -93275,9 +93192,6 @@ class GraphHandler extends mx.mxGraphHandler {
     mouseUp(sender, me) {
         if (me.getEvent().button === 2)
             return;
-        // Some computations for the case when some element is dropped over an edge (only valid for orthogonal edges). Default edge spliting algorithm do not try to align the dropped 
-        // element with the source nor the target element. This tries to fix some of this issue. Basically we check if the drop is on the first or last segment. 
-        // If this condition is met and depending on the case, we align the dropped element with the source or the target element of the edge.
         let self = this;
         let cell = self.cell;
         if (!cell)
@@ -93335,7 +93249,6 @@ class GraphHandler extends mx.mxGraphHandler {
         var graph = self.graph;
         if (!me.isConsumed() && graph.isMouseDown && self.cell != null &&
             self.first != null && self.bounds != null && !self.suspended) {
-            // Stops moving if a multi touch event is received
             if (mx.mxEvent.isMultiTouchEvent(me.getEvent())) {
                 this.reset();
                 return;
@@ -93343,7 +93256,6 @@ class GraphHandler extends mx.mxGraphHandler {
             var delta = this.getDelta(me);
             var tol = graph.tolerance;
             if (self.shape != null || self.livePreviewActive || Math.abs(delta.x) > tol || Math.abs(delta.y) > tol) {
-                // Highlight is used for highlighting drop targets
                 if (self.highlight == null) {
                     self.highlight = new mx.mxCellHighlight(graph, mx.mxConstants.DROP_TARGET_COLOR, 3, undefined);
                 }
@@ -93354,7 +93266,6 @@ class GraphHandler extends mx.mxGraphHandler {
                 var target = null;
                 self.cloning = clone;
                 if (graph.isDropEnabled() && self.highlightEnabled && self.cells.indexOf(cell) < 0) {
-                    // Contains a call to getCellAt to find the cell under the mouse
                     target = graph.getDropTarget(self.cells, me.getEvent(), cell, clone);
                 }
                 var state = graph.getView().getState(target);
@@ -93411,7 +93322,6 @@ class GraphHandler extends mx.mxGraphHandler {
                 if (self.guide != null && hideGuide) {
                     self.guide.hide();
                 }
-                // Constrained movement if shift key is pressed
                 if (graph.isConstrainedEvent(me.getEvent())) {
                     if (Math.abs(delta.x) > Math.abs(delta.y)) {
                         delta.y = 0;
@@ -93428,9 +93338,6 @@ class GraphHandler extends mx.mxGraphHandler {
             }
             this.updateHint(me);
             this.consumeMouseEvent(mx.mxEvent.MOUSE_MOVE, me);
-            // Cancels the bubbling of events to the container so
-            // that the droptarget is not reset due to an mouseMove
-            // fired on the container with no associated state.
             mx.mxEvent.consume(me.getEvent());
         }
         else if ((this.isMoveEnabled() || this.isCloneEnabled()) && self.updateCursor && !me.isConsumed() &&
@@ -93444,8 +93351,6 @@ class GraphHandler extends mx.mxGraphHandler {
                     cursor = mx.mxConstants.CURSOR_MOVABLE_VERTEX;
                 }
             }
-            // Sets the cursor on the original source state under the mouse
-            // instead of the event source state which can be the parent
             if (cursor != null && me.sourceState != null) {
                 me.sourceState.setCursor(cursor);
             }
@@ -93459,8 +93364,6 @@ class PanningHandler extends mx.mxPanningHandler {
         let ctrlDown = navigator.platform === 'MacIntel' ? mx.mxEvent.isMetaDown(evt) : mx.mxEvent.isControlDown(evt);
         return (this.useLeftButtonForPanning && me.getState() == null &&
             mx.mxEvent.isLeftMouseButton(evt)) || (ctrlDown && !mx.mxEvent.isShiftDown(evt));
-        //((mx.mxEvent.isControlDown(evt) || mx.mxEvent.isMetaDown(evt))
-        // || (this.usePopupTrigger && mx.mxEvent.isPopupTrigger(evt))
     }
     ;
 }
@@ -93693,6 +93596,7 @@ const _NAME_REGEX = /([^\d]*)([\d]*)/g;
 class Graph extends mx.mxGraph {
     constructor(options) {
         super(options.container);
+        this.resetEdgesOnMove = true;
         this._editorHelper = options.editorHelper;
         this.dropEnabled = true;
         this.installCellDescriptors(options.cellDescriptors);
@@ -93706,21 +93610,7 @@ class Graph extends mx.mxGraph {
         this.installGlobalStyles(options.globalStyles);
         if (options.bottomPad)
             this.createBottomPad(options.bottomPad);
-        // let createLabel = (<any>mx.mxCellRenderer).prototype.createLabel;
-        // console.log('MXGRAPH COLOC', createLabel, mx.mxCellRenderer.prototype);
-        // (<any>mx.mxCellRenderer).prototype.createLabel = (state, value) => {
-        //    console.log('MXGRAPG label state', state, value);
-        //    let color = mx.mxConstants.STYLE_FONTCOLOR;
-        //    if (color === 'blue')
-        //       mx.mxConstants.STYLE_FONTCOLOR = 'green';
-        //    else
-        //       mx.mxConstants.STYLE_FONTCOLOR = 'blue';
-        //    createLabel.call(mx.mxCellRenderer.prototype, state, value);
-        //    if (state.text)
-        //       console.log('LABEL', state.text, state.text.color);
-        // }
     }
-    //#region Initialization
     installCellDescriptors(descriptors) {
         this._cellDescriptors = new Map();
         if (!descriptors)
@@ -93775,8 +93665,6 @@ class Graph extends mx.mxGraph {
     createCellEditor() {
         return new CellEditor(this);
     }
-    //#endregion
-    //#region Utility Members
     get editorHelper() {
         return this._editorHelper;
     }
@@ -93823,7 +93711,7 @@ class Graph extends mx.mxGraph {
         cell.setVertex(descriptor.isVertex);
         cell.setEdge(descriptor.isEdge);
         cell.setStyle(descriptor.getDefaultStyle());
-        this.setCellValue(cell, (_b = options.value) !== null && _b !== void 0 ? _b : {}); // Set cell value this way so Graph can preprocess value to set other properties like style   
+        this.setCellValue(cell, (_b = options.value) !== null && _b !== void 0 ? _b : {});
         if (options.assignName &&
             descriptor.nameAttribute &&
             descriptor.baseName &&
@@ -93837,8 +93725,25 @@ class Graph extends mx.mxGraph {
         this.getModel().setValue(cell, value);
     }
     setCellGraphicalProperties(cell, props, redraw = true) {
+        var _a;
+        if (cell.isEdge() && (!cell.source || !cell.target))
+            return;
         let pos = this.convertLogicalPointToPixels(cell, { x: props.x, y: props.y });
-        let geo = new mx.mxGeometry(pos.x, pos.y, this.convertLogicalToPixels(cell, props.width), this.convertLogicalToPixels(cell, props.height));
+        let geo = cell.isEdge() ? new mx.mxGeometry() : new mx.mxGeometry(pos.x, pos.y, this.convertLogicalToPixels(cell, props.width), this.convertLogicalToPixels(cell, props.height));
+        let style = cell.getStyle();
+        if (props.fromPoint) {
+            let fromGeo = cell.source.geometry;
+            let fromPos = this.convertPixelsPointToLogical(cell.source, { x: fromGeo.x, y: fromGeo.y });
+            style = mx.mxUtils.setStyle(style, mx.mxConstants.STYLE_EXIT_X, (props.fromPoint.x - fromPos.x) / fromGeo.width);
+            style = mx.mxUtils.setStyle(style, mx.mxConstants.STYLE_EXIT_Y, (props.fromPoint.y - fromPos.y) / fromGeo.height);
+        }
+        if (props.toPoint) {
+            let toGeo = cell.target.geometry;
+            let toPos = this.convertPixelsPointToLogical(cell.source, { x: toGeo.x, y: toGeo.y });
+            style = mx.mxUtils.setStyle(style, mx.mxConstants.STYLE_ENTRY_X, (props.toPoint.x - toPos.x) / toGeo.width);
+            style = mx.mxUtils.setStyle(style, mx.mxConstants.STYLE_ENTRY_Y, (props.toPoint.y - toPos.y) / toGeo.height);
+        }
+        cell.setStyle(style);
         geo.relative = false;
         if (props.points && props.points.length > 0) {
             geo.points = props.points.map(p => {
@@ -93847,8 +93752,19 @@ class Graph extends mx.mxGraph {
             });
         }
         if (props.labelPosition) {
-            let offset = this.convertLogicalPointToPixels(cell, props.labelPosition); //this.convertLogicalOffsetToPixels(cell, props.labelPosition);
-            geo.offset = new mx.mxPoint(offset.x, offset.y);
+            let center;
+            if (cell.isEdge() && cell.source && cell.target) {
+                if (((_a = props.points) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                    center = this._getPointListCenter(props.points);
+                else {
+                    let fromPoint = this._getTerminalLogicalPointFromStyle(cell, true);
+                    let toPoint = this._getTerminalLogicalPointFromStyle(cell, false);
+                    center = this._getPointListCenter([fromPoint, toPoint]);
+                }
+            }
+            else
+                center = { x: props.x + props.width / 2, y: props.y + props.height / 2 };
+            geo.offset = new mx.mxPoint(props.labelPosition.x - center.x, props.labelPosition.y - center.y);
         }
         this.model.setGeometry(cell, geo);
         if (redraw) {
@@ -93861,21 +93777,210 @@ class Graph extends mx.mxGraph {
         let geo = cell.getGeometry();
         let position = geo.x !== undefined && geo.y !== undefined
             ? this.convertPixelsPointToLogical(cell, { x: geo.x, y: geo.y })
+            : undefined;
+        let size = geo.width !== undefined && geo.height !== undefined
+            ? { width: this.convertPixelsToLogical(cell, geo.width), height: this.convertPixelsToLogical(cell, geo.height) }
+            : undefined;
+        let offset = geo.offset && !isNaN(geo.offset.x) && !isNaN(geo.offset.y)
+            ? { x: geo.offset.x, y: geo.offset.y }
+            : undefined;
+        let labelPosition = position && size && offset
+            ? { x: position.x + size.width / 2 + offset.x, y: position.y + size.height / 2 + offset.y }
+            : undefined;
+        let points = geo.points
+            ? geo.points.map(p => this.convertPixelsPointToLogical(cell, p))
             : null;
-        let labelPosition;
-        if (geo.offset && !isNaN(geo.offset.x) && !isNaN(geo.offset.y))
-            labelPosition = this.convertPixelsPointToLogical(cell, geo.offset); //this.convertPixelsOffsetToLogical(cell, geo.offset);
+        let fromPoint, toPoint;
+        let from = cell.source;
+        let to = cell.target;
+        if (cell.isEdge() && from && to) {
+            let edgeCenter;
+            if ((points === null || points === void 0 ? void 0 : points.length) > 0) {
+                let first = this._getTerminalLogicalPoint(from, points[0], true, true);
+                if (first && (first.x !== points[0].x || first.y !== points[0].y)) {
+                    points.unshift(first);
+                }
+                let last = this._getTerminalLogicalPoint(to, points[points.length - 1], true, false);
+                if (last && (last.x !== points[points.length - 1].x || last.y !== points[points.length - 1].y)) {
+                    points.push(last);
+                }
+                this._insertExtraPointsInEdgeForCompatibiityWithGXWin(points);
+                edgeCenter = this._getPointListCenter(points);
+            }
+            else {
+                fromPoint = this._getTerminalLogicalPointFromStyle(cell, true);
+                toPoint = this._getTerminalLogicalPointFromStyle(cell, false);
+                edgeCenter = this._getPointListCenter([fromPoint, toPoint]);
+            }
+            if (offset && edgeCenter)
+                labelPosition = { x: edgeCenter.x + offset.x, y: edgeCenter.y + offset.y };
+        }
         return {
-            x: position.x,
-            y: position.y,
-            width: this.convertPixelsToLogical(cell, geo.width),
-            height: this.convertPixelsToLogical(cell, geo.height),
-            points: geo.points
-                ? geo.points.map(p => this.convertPixelsPointToLogical(cell, p))
-                : null,
-            labelPosition
+            x: position === null || position === void 0 ? void 0 : position.x,
+            y: position === null || position === void 0 ? void 0 : position.y,
+            width: size === null || size === void 0 ? void 0 : size.width,
+            height: size === null || size === void 0 ? void 0 : size.height,
+            points,
+            labelPosition,
+            fromPoint: fromPoint,
+            toPoint: toPoint
         };
     }
+    _insertExtraPointsInEdgeForCompatibiityWithGXWin(points) {
+        if (points.length >= 2) {
+            if (Math.abs(points[0].x - points[1].x) > 10) {
+                if (points[0].x < points[1].x)
+                    points.splice(1, 0, { x: points[0].x + 10, y: points[0].y });
+                else
+                    points.splice(1, 0, { x: points[0].x - 10, y: points[0].y });
+            }
+            if (Math.abs(points[0].y - points[1].y) > 10) {
+                if (points[0].y < points[1].y)
+                    points.splice(1, 0, { x: points[0].x, y: points[0].y + 10 });
+                else
+                    points.splice(1, 0, { x: points[0].x, y: points[0].y - 10 });
+            }
+            let pre = points[points.length - 2];
+            let last = points[points.length - 1];
+            if (Math.abs(pre.x - last.x) > 10) {
+                if (pre.x < last.x)
+                    points.splice(points.length - 1, 0, { x: last.x - 10, y: pre.y });
+                else
+                    points.splice(points.length - 1, 0, { x: last.x + 10, y: pre.y });
+            }
+            if (Math.abs(pre.y - last.y) > 10) {
+                if (pre.y < last.y)
+                    points.splice(points.length - 1, 0, { x: pre.x, y: last.y - 10 });
+                else
+                    points.splice(points.length - 1, 0, { x: pre.x, y: last.y + 10 });
+            }
+        }
+    }
+    _getTerminalLogicalPointFromStyle(edge, from) {
+        let style = this.getCellStyle(edge);
+        let delta;
+        if (from && style[mx.mxConstants.STYLE_EXIT_X] && style[mx.mxConstants.STYLE_EXIT_Y]) {
+            delta = {
+                x: Number.parseFloat(style[mx.mxConstants.STYLE_EXIT_X]),
+                y: Number.parseFloat(style[mx.mxConstants.STYLE_EXIT_Y])
+            };
+        }
+        else if (!from && style[mx.mxConstants.STYLE_ENTRY_X] && style[mx.mxConstants.STYLE_ENTRY_Y]) {
+            delta = {
+                x: Number.parseFloat(style[mx.mxConstants.STYLE_ENTRY_X]),
+                y: Number.parseFloat(style[mx.mxConstants.STYLE_ENTRY_Y])
+            };
+        }
+        let fromGeo = edge.source.getGeometry();
+        let fromBounds = {
+            position: this.convertPixelsPointToLogical(edge.source, { x: fromGeo.x, y: fromGeo.y }),
+            size: { width: this.convertPixelsToLogical(edge.source, fromGeo.width), height: this.convertPixelsToLogical(edge, fromGeo.height) }
+        };
+        let toGeo = edge.target.getGeometry();
+        let toBounds = {
+            position: this.convertPixelsPointToLogical(edge.target, { x: toGeo.x, y: toGeo.y }),
+            size: { width: this.convertPixelsToLogical(edge.target, toGeo.width), height: this.convertPixelsToLogical(edge, toGeo.height) }
+        };
+        if (delta) {
+            let bounds = from ? fromBounds : toBounds;
+            return {
+                x: bounds.position.x + delta.x * bounds.size.width,
+                y: bounds.position.y + delta.y * bounds.size.height
+            };
+        }
+        if (from)
+            return this._getAutoTerminalPoint(fromBounds, toBounds, from);
+        return this._getAutoTerminalPoint(toBounds, fromBounds, from);
+    }
+    _getPointListCenter(points) {
+        let top = { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY };
+        let bottom = { x: Number.NEGATIVE_INFINITY, y: Number.NEGATIVE_INFINITY };
+        for (let point of points) {
+            if (top.x > point.x)
+                top.x = point.x;
+            if (top.y > point.y)
+                top.y = point.y;
+            if (bottom.x < point.x)
+                bottom.x = point.x;
+            if (bottom.y < point.y)
+                bottom.y = point.y;
+        }
+        return {
+            x: top.x + (bottom.x - top.x) / 2,
+            y: top.y + (bottom.y - top.y) / 2,
+        };
+    }
+    _getAutoTerminalPoint(bounds, otherBounds, from) {
+        if (from) {
+            if (bounds.position.y > otherBounds.position.y + otherBounds.size.height) {
+                if (bounds.position.x + bounds.size.width < otherBounds.position.x)
+                    return this._getMiddlePoint(bounds, 'middleRight');
+                if (bounds.position.x > otherBounds.position.x + otherBounds.size.width)
+                    return this._getMiddlePoint(bounds, 'middleLeft');
+                return this._getMiddlePoint(bounds, 'middleTop');
+            }
+            if (bounds.position.x + bounds.size.width < otherBounds.position.x)
+                return this._getMiddlePoint(bounds, 'middleRight');
+            if (bounds.position.x > otherBounds.position.x + otherBounds.size.width)
+                return this._getMiddlePoint(bounds, 'middleLeft');
+            return this._getMiddlePoint(bounds, 'middleBottom');
+        }
+        if (bounds.position.y > otherBounds.position.y + otherBounds.size.height)
+            return this._getMiddlePoint(bounds, 'middleTop');
+        if (bounds.position.y + bounds.size.height < otherBounds.position.y)
+            return this._getMiddlePoint(bounds, 'middleBottom');
+        if (bounds.position.x > otherBounds.position.x + otherBounds.size.width)
+            return this._getMiddlePoint(bounds, 'middleLeft');
+        return this._getMiddlePoint(bounds, 'middleRight');
+    }
+    _getMiddlePoint(bounds, position) {
+        switch (position) {
+            case 'middleTop':
+                return {
+                    x: bounds.position.x + bounds.size.width / 2,
+                    y: bounds.position.y
+                };
+            case 'middleBottom':
+                return {
+                    x: bounds.position.x + bounds.size.width / 2,
+                    y: bounds.position.y + bounds.size.height
+                };
+            case 'middleLeft':
+                return {
+                    x: bounds.position.x,
+                    y: bounds.position.y + bounds.size.height / 2
+                };
+            case 'middleRight':
+                return {
+                    x: bounds.position.x + bounds.size.width,
+                    y: bounds.position.y + bounds.size.height / 2
+                };
+        }
+    }
+    _getTerminalLogicalPoint(terminal, next, orthogonal, from) {
+        let perimeter = this._getPerimeter(terminal);
+        let geo = terminal.getGeometry();
+        if (perimeter && geo) {
+            let mxNext = new mx.mxPoint(next.x, next.y);
+            let location = this.convertPixelsPointToLogical(terminal, { x: geo.x, y: geo.y });
+            let bounds = new mx.mxRectangle(location.x, location.y, geo.width, geo.height);
+            let point = perimeter(bounds, { style: this.getCellStyle(terminal) }, mxNext, orthogonal);
+            if (orthogonal) {
+                let EPSILON = 3;
+                if (Math.abs(next.x - point.x) < EPSILON && Math.abs(next.y - point.y) < EPSILON)
+                    return next;
+            }
+            return point;
+        }
+    }
+    _getPerimeter(cell) {
+        let style = this.getCellStyle(cell);
+        let perimeter = style[mx.mxConstants.STYLE_PERIMETER];
+        if (typeof perimeter === "function")
+            return perimeter;
+        if (typeof perimeter === "string")
+            return mx.mxStyleRegistry.getValue(perimeter);
+    }
     convertLogicalPointToPixels(cell, point) {
         return {
             x: this.convertLogicalToPixels(cell, point.x),
@@ -93946,49 +94051,32 @@ class Graph extends mx.mxGraph {
         }
         return result;
     }
-    //#endregion
-    //#region Customization      
     selectCellForEvent(cell, evt) {
         if (cell instanceof Cell && !cell.descriptor.isDiagramElement)
             cell = cell.getParentDiagramElement();
         return super.selectCellForEvent(cell, evt);
     }
-    // isLabelMovable(cell) {
-    //    return super.isLabelMovable(cell);
-    // }
     getDropTarget(cells, evt, cell, clone) {
         let target = super.getDropTarget(cells, evt, cell, clone);
         if (!target)
             target = this.getDefaultParent();
         return target;
     }
-    // isSwimlane(cell) {
-    //    return true;
-    // }
     isExtendParentsOnAdd(cell) {
         return false;
     }
     isExtendParent(cell) {
         return true;
     }
-    // isExtendParentsOnMove() {
-    //    return true;
-    // }
     isConstrainChild(cell) {
         return true;
     }
-    // isCellFoldable(cell: mxgraph.mxCell, collapse: boolean) {
-    //    return false;
-    // }
     isCellLocked(cell) {
         return false;
     }
     isCellDisconnectable(cell, terminal, source) {
         return true;
     }
-    // isCellMovable(cell: mxgraph.mxCell) {
-    //    return !cell.isEdge();
-    // }
     isCellResizable(cell) {
         if (cell instanceof Cell) {
             let descriptor = cell.descriptor;
@@ -94001,15 +94089,6 @@ class Graph extends mx.mxGraph {
             return true;
         return false;
     }
-    // translateCell(cell, dx, dy) {      
-    //    super.translateCell(cell, dx, dy);
-    // }
-    // moveCells(cells: mxgraph.mxCell[], dx?: number, dy?: number, clone?: boolean, target?: mxgraph.mxCell, evt?: Event, mapping?): mxgraph.mxCell[] {      
-    //    return super.moveCells(cells, dx, dy, clone, target, evt, mapping);
-    // }
-    // isAllowOverlapParent(cell) {
-    //    return true;
-    // }
     convertValueToString(cell) {
         if (cell instanceof Cell) {
             let value = cell.getValue();
@@ -94023,13 +94102,9 @@ class Graph extends mx.mxGraph {
     }
     cellLabelChanged(cell, newValue, autoSize) {
         if (cell instanceof Cell && cell.value && typeof cell.value === 'object') {
-            // Clones the value for correct undo/redo
             let clone = cell.cloneValue();
             clone[cell.descriptor.labelAttribute] = newValue;
             newValue = clone;
-            // let style = cell.getStyle();
-            // mx.mxUtils.setCellStyles(this.getModel(), [cell], mx.mxConstants.STYLE_NOLABEL, 0);
-            //console.log('LABVEL changed', label)
         }
         super.cellLabelChanged(cell, newValue, autoSize);
     }
@@ -94046,8 +94121,6 @@ class Graph extends mx.mxGraph {
         }
         return null;
     }
-    //#endregion
-    //#region Memento state
     getState() {
         return {
             elements: this.getElementsState(this.getDefaultParent().children)
@@ -94128,22 +94201,6 @@ class Graph extends mx.mxGraph {
                 }
             }
         });
-        // setTimeout(() => {
-        //    let queue = states.slice(0);
-        //    while (queue.length > 0) {
-        //       let elementState = queue.shift();
-        //       let element = <Cell>this.model.getCell(elementState.guid);
-        //       if (element.isEdge()) {
-        //          this.setCellGraphicalProperties(element, elementState.graphicalProperties);
-        //       }
-        //       if (elementState.slots) {
-        //          for (let slotState of elementState.slots) {
-        //             for (let childState of slotState.elements)
-        //                queue.push(childState);
-        //          }
-        //       }
-        //    }         
-        // });   
     }
     addElementFromState(state, parent) {
         var _a;
@@ -94171,10 +94228,6 @@ class Graph extends mx.mxGraph {
                     gp.x += offset.width;
                 if (gp.y !== undefined)
                     gp.y += offset.height;
-                // if (gp.labelPosition) {
-                //    gp.labelPosition.x += offset.width;
-                //    gp.labelPosition.y += offset.height;
-                // }
                 if (gp.points) {
                     for (let point of gp.points) {
                         point.x += offset.width;
@@ -94201,19 +94254,14 @@ class Graph extends mx.mxGraph {
         let newGuid = Guid.newInstance().toString();
         guidMap.set(state.guid, newGuid);
         state.guid = newGuid;
-        // let descriptor = this.getCellDescriptor(state.type);
-        // if (descriptor && descriptor.nameAttribute) {
-        //    let name = state.properties[descriptor.nameAttribute];
-        //    state.properties[descriptor.nameAttribute] = this.getNewCellName(name);
-        // }
     }
     setElementDelayedState(cell, state) {
-        // Second pass to allow finishing the construction of the diagram element, setting for example terminal connections
         if (cell.isEdge()) {
             let from = this.model.getCell(state.fromGuid.toString());
             this.model.setTerminal(cell, from, true);
             let to = this.model.getCell(state.toGuid.toString());
             this.model.setTerminal(cell, to, false);
+            this.setCellGraphicalProperties(cell, state.graphicalProperties);
         }
     }
     setSlotState(cell, state) {
@@ -94286,7 +94334,6 @@ class Editor extends mx.mxEventSource {
         mx.mxEvent.disableContextMenu(this.container);
         this.initialize(options);
     }
-    //#region Initialization
     createGraph(options) {
         return new Graph(options);
     }
@@ -94294,11 +94341,6 @@ class Editor extends mx.mxEventSource {
         this.graph.setAllowDanglingEdges(false);
         this.graph.vertexLabelsMovable = true;
         this.graph.resizeContainer = false;
-        // this.graph.ignoreScrollbars = true;
-        // this.graph.translateToScrollPosition = true;
-        // this.graph.extendParents = false;
-        // this.graph.constrainChildren = false;
-        // this.graph.extendParentsOnAdd = false;
         if (options.guides)
             this.installGuides();
         if (options.undoManager)
@@ -94309,7 +94351,6 @@ class Editor extends mx.mxEventSource {
             mx.mxEvent.addListener(this.container, 'dragover', (e) => this.onDragOver(e));
             mx.mxEvent.addListener(this.container, 'drop', (e) => this.onDropOver(e));
         }
-        // Config graph after installing key handler, because otherwise panning conflicts with custom key strokes for Undo/Redo and selection moving
         this.graph.graphHandler.scrollOnMove = !!options.scrollOnMove;
         this.graph.setResizeContainer(!!options.resizeContainer);
         this.graph.setGridEnabled(!!options.grid);
@@ -94334,7 +94375,6 @@ class Editor extends mx.mxEventSource {
         let listener = (_, evt) => this.undoManager.undoableEditHappened(evt.getProperty('edit'));
         this.graph.getModel().addListener(mx.mxEvent.UNDO, listener);
         this.graph.getView().addListener(mx.mxEvent.UNDO, listener);
-        // Keeps the selection state in sync
         let undoHandler = (_, evt) => {
             let changes = evt.getProperty('edit').changes;
             this.graph.setSelectionCells(this.graph.getSelectionCellsForChanges(changes));
@@ -94364,7 +94404,6 @@ class Editor extends mx.mxEventSource {
     }
     installRubberBand() {
         this.rubberBand = new mx.mxRubberband(this.graph);
-        // Modify mouseDown event handlers to ignore Right button clicks to avoid inteference with context menu management which is done in the host of this component.
         const mouseDown = this.rubberBand.mouseDown;
         this.rubberBand.mouseDown = (sender, me) => {
             if (me.getEvent().button === 2) {
@@ -94375,8 +94414,6 @@ class Editor extends mx.mxEventSource {
             mouseDown.call(this.rubberBand, sender, me);
         };
     }
-    //#endregion   
-    //#region Utility Methods
     setProperties(id, props, graphicalProps) {
         this._pauseGraphChangeEvents = true;
         this.undoManager.enabled = false;
@@ -94424,11 +94461,10 @@ class Editor extends mx.mxEventSource {
                 if (json.format === this.clipboardFormat) {
                     let editorGuid = new Guid(json.editorGuid);
                     if (Guid.equals(editorGuid, this._guid)) {
-                        this.graph.addElementsFromState(json.content, this.getParentForPaste(), false, COPY_OFFSET); // If it is a paste in the same editor, apply an offset to positions but do not reassign unique 
-                        // IDs unless an element with the same ID already exists.
+                        this.graph.addElementsFromState(json.content, this.getParentForPaste(), false, COPY_OFFSET);
                     }
                     else
-                        this.graph.addElementsFromState(json.content, this.getParentForPaste(), true); // If it is a paste from another editor, always reassign unique IDs but do not apply any offset to positions.
+                        this.graph.addElementsFromState(json.content, this.getParentForPaste(), true);
                 }
             }
         }
@@ -94457,15 +94493,14 @@ class Editor extends mx.mxEventSource {
             }
         });
     }
-    //#endregion
-    //#region Event Handling   
     onGraphChange(evt) {
         if (this._pauseGraphChangeEvents)
             return;
-        //console.log('Model change', evt);
-        let events = EventConverter.convert(evt, this.graph);
-        if (events.length > 0)
-            this.fireEvent(new mx.mxEventObject(Editor.EVENT_MODEL_CHANGED, 'data', events), this);
+        setTimeout(() => {
+            let events = EventConverter.convert(evt, this.graph);
+            if (events.length > 0)
+                this.fireEvent(new mx.mxEventObject(Editor.EVENT_MODEL_CHANGED, 'data', events), this);
+        }, 100);
     }
     onGraphSelectionChange() {
         let selection = this.graph.getSelectionCells();
@@ -94474,7 +94509,6 @@ class Editor extends mx.mxEventSource {
             if (cell instanceof Cell)
                 data.push(cell.id);
         }
-        //console.log('SEL', selection);
         this.fireEvent(new mx.mxEventObject(Editor.EVENT_SELECTION_CHANGED, 'data', data)), this;
     }
     onUndoRedo(evt) {
@@ -94513,9 +94547,6 @@ class Editor extends mx.mxEventSource {
         }
     }
     async onDropOver(evt) {
-        // console.log('Dop Evt', evt);
-        // console.log(evt.dataTransfer.getData('text'));
-        // console.log(evt.dataTransfer.getData('text2'));
         let type = evt.dataTransfer.getData('text');
         let state = {};
         if (this.graph.editorHelper) {
@@ -94528,7 +94559,6 @@ class Editor extends mx.mxEventSource {
             let cellDescriptor = this.graph.getCellDescriptor(type);
             evt.stopPropagation();
             evt.preventDefault();
-            // Gets drop location point for vertex
             let size = cellDescriptor.size;
             let pt = mx.mxUtils.convertPoint(this.graph.container, mx.mxEvent.getClientX(evt), mx.mxEvent.getClientY(evt));
             let tr = this.graph.view.translate;
@@ -94565,8 +94595,6 @@ class Editor extends mx.mxEventSource {
     getDropTarget(x, y) {
         return null;
     }
-    //#endregion
-    //#region Memento state
     async setState(state) {
         this._pauseGraphChangeEvents = true;
         this.undoManager.enabled = false;
@@ -94587,34 +94615,6 @@ class Editor extends mx.mxEventSource {
 }
 Editor.EVENT_MODEL_CHANGED = 'modelChanged';
 Editor.EVENT_SELECTION_CHANGED = 'selectionChanged';
-// Some ideas for panning with mousewheel (THIS IS NOT WORKING)
-// startX: number;
-//    startY: number;
-// protected subscribeToEvents() {
-//    mx.mxEvent.addListener(this.container, 'mousewheel',  ((evt) => {
-//    this.container.addEventListener('mousewheel', (evt: any) => {
-//       // let pt = mx.mxUtils.convertPoint(this.graph.container, mx.mxEvent.getClientX(evt), mx.mxEvent.getClientY(evt));
-//       // let tr = this.graph.view.translate;
-//       // let scale = this.graph.view.scale;
-//       // let x = pt.x / scale - tr.x;
-//       // let y = pt.y / scale - tr.y;
-//       // if (!this.startX)
-//       //    this.startX = x;
-//       // if (!this.startY)
-//       //    this.startY = y;
-//       //this.graph.panGraph(evt.wheelDeltaX, evt.wheelDeltaY);
-//       this.graph.panGraph(20, 20);
-//       console.log('PAN', evt);
-//       if (evt.stopPropagation) evt.stopPropagation();
-//       if (evt.preventDefault) evt.preventDefault();
-//       if (evt.stopImmediatePropagation) evt.stopImmediatePropagation();
-//       evt.cancelBubble = true;
-//       evt.returnValue = false;
-//       //this.graph.panningManager.panTo(x + evt.deltaX , y + evt.deltaY);
-//       //this.graph.panningHandler.start(new mx.mxMouseEvent(evt, null));
-//       //mx.mxEvent.consume(evt);
-//    });
-// }
 
 exports.Cell = Cell;
 exports.CellDescriptor = CellDescriptor;