orcasvn-react-diagrams 0.1.26 → 0.1.28

package/dist/cjs/index.js

@@ -442,7 +442,6 @@ function generateUniqueId() {
     return v4();
 }
 
-var MANUALLY_TRIGGER_RENDER$1 = 'manuallyTriggerRender';
 var Element$2 = /** @class */ (function () {
     function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
@@ -467,27 +466,26 @@ var Element$2 = /** @class */ (function () {
         this.textsPlaceHolderFlexStyle = textsPlaceHolderFlexStyle;
         this.textsPlaceHolderFlexboxPosition = textsPlaceHolderFlexboxPosition;
     }
-    Element.prototype.manuallyTriggerRender = function () {
-        //TODO: Implement this
-        this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER$1);
-    };
-    Element.prototype.manuallyTriggerRenderHandler = function (callback) {
-        var _this = this;
-        //TODO: Implement this
-        this._eventEmitter.on(MANUALLY_TRIGGER_RENDER$1, callback);
-        var canceller = function () {
-            _this._eventEmitter.off(MANUALLY_TRIGGER_RENDER$1, callback);
-        };
-        return canceller;
-    };
-    Element.prototype.manuallyTriggerRenderPort = function (portId) {
-        //TODO: Implement this
-        var port = this.getPort(portId);
-        if (port) {
-            port.manuallyTriggerRender();
-        }
-    };
     Object.defineProperty(Element.prototype, "id", {
+        // public manuallyTriggerRender() {
+        //     //TODO: Implement this
+        //     this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER);
+        // }
+        // public manuallyTriggerRenderHandler(callback: () => void) {
+        //     //TODO: Implement this
+        //     this._eventEmitter.on(MANUALLY_TRIGGER_RENDER, callback);
+        //     const canceller = () => {
+        //         this._eventEmitter.off(MANUALLY_TRIGGER_RENDER, callback);
+        //     }
+        //     return canceller;
+        // }
+        // public manuallyTriggerRenderPort(portId: string) {
+        //     //TODO: Implement this
+        //     const port = this.getPort(portId);
+        //     if (port) {
+        //         port.manuallyTriggerRender();
+        //     }
+        // }
         get: function () {
             return this._id;
         },
@@ -672,7 +670,6 @@ var CustomShape = React$1.forwardRef(function (props, ref) {
     return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
 });
 
-var MANUALLY_TRIGGER_RENDER = 'manuallyTriggerRender';
 var Port$1 = /** @class */ (function () {
     function Port(x, y, label, shapeRenderer, width, height) {
         var _this = this;
@@ -703,18 +700,6 @@ var Port$1 = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Port.prototype.manuallyTriggerRender = function () {
-        //TODO: Implement this
-        this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER);
-    };
-    Port.prototype.manuallyTriggerRenderHandler = function (callback) {
-        var _this = this;
-        this._eventEmitter.on(MANUALLY_TRIGGER_RENDER, callback);
-        var canceller = function () {
-            _this._eventEmitter.off(MANUALLY_TRIGGER_RENDER, callback);
-        };
-        return canceller;
-    };
     return Port;
 }());
 
@@ -779,6 +764,9 @@ var Text$2 = /** @class */ (function () {
     return Text;
 }());
 
+var EVENT_MANUALLY_RENDER_ELEMENT = 'manuallyRenderElement';
+var EVENT_MANUALLY_RENDER_PORT = 'manuallyRenderPort';
+var EVENT_EDITOR_CONTEXT_UPDATED = 'editorContextUpdated';
 var EVENT_PAPER_CLICKED = 'paperClicked';
 var EVENT_PAPER_MOUSE_MOVED = 'paperMouseMoved';
 var EVENT_PAPER_MOUSE_DOWN = 'paperMouseDown';
@@ -793,6 +781,15 @@ var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
     function EditorContext(elements, links, texts) {
+        var _this = this;
+        /** @internal */
+        this.onEditorContextUpdated = function (callback) {
+            _this._eventEmitter.on(EVENT_EDITOR_CONTEXT_UPDATED, callback);
+            var off = function () {
+                _this._eventEmitter.off(EVENT_EDITOR_CONTEXT_UPDATED, callback);
+            };
+            return off;
+        };
         this._elements = elements;
         this._links = links;
         this._texts = texts;
@@ -832,27 +829,33 @@ var EditorContext = /** @class */ (function () {
     };
     EditorContext.prototype.addElement = function (element) {
         this._elements = __spreadArray(__spreadArray([], this._elements, true), [element], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeElement = function (elementId) {
         this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.getLink = function (linkId) {
         return this._links.find(function (l) { return l.id === linkId; });
     };
     EditorContext.prototype.addLink = function (link) {
         this._links = __spreadArray(__spreadArray([], this._links, true), [link], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeLink = function (linkId) {
         this._links = this._links.filter(function (l) { return l.id !== linkId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.getText = function (textId) {
         return this._texts.find(function (t) { return t.id === textId; });
     };
     EditorContext.prototype.addText = function (text) {
         this._texts = __spreadArray(__spreadArray([], this._texts, true), [text], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeText = function (textId) {
         this._texts = this._texts.filter(function (t) { return t.id !== textId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.onPaperClicked = function (callback) {
         return this.addEventListener(EVENT_PAPER_CLICKED, callback);
@@ -939,22 +942,16 @@ var EditorContext = /** @class */ (function () {
         this._eventEmitter.emit(EVENT_TEXT_SELECTED, text);
     };
     EditorContext.prototype.triggerRenderElement = function (elementId) {
-        //TODO: to be implemented
-        var element = this.getElement(elementId);
-        if (element) {
-            element.manuallyTriggerRender();
-        }
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENT, elementId);
+    };
+    EditorContext.prototype.onManuallyTriggerRenderElement = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
-        var _a;
-        //TODO: to be implemented
-        var element = this.getElement(elementId);
-        if (element) {
-            var port = (_a = element.ports) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.id === portId; });
-            if (port) {
-                port.manuallyTriggerRender();
-            }
-        }
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
+    };
+    EditorContext.prototype.onManuallyTriggerRenderPort = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_PORT, callback);
     };
     return EditorContext;
 }());
@@ -1646,17 +1643,19 @@ var Text = React$1.forwardRef(function (_a, ref) {
 var Text$1 = React$1.memo(Text);
 
 var Port1 = React$1.forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, onManuallyTriggerRenderHandler = props.onManuallyTriggerRenderHandler, renderShape = props.renderShape;
-    var _a = React$1.useState(false); _a[0]; var setUpdated = _a[1];
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, 
+    // onManuallyTriggerRenderHandler,
+    renderShape = props.renderShape;
+    var _a = React$1.useState(false); _a[0]; _a[1];
     var textRef = React$1.useRef(null);
-    React$1.useEffect(function () {
-        var off = onManuallyTriggerRenderHandler === null || onManuallyTriggerRenderHandler === void 0 ? void 0 : onManuallyTriggerRenderHandler(function () {
-            setUpdated(function (prev) { return !prev; });
-        });
-        return function () {
-            off === null || off === void 0 ? void 0 : off();
-        };
-    }, []);
+    // useEffect(() => {
+    //     const off = onManuallyTriggerRenderHandler?.(() => {
+    //         setUpdated(prev => !prev);
+    //     });
+    //     return () => {
+    //         off?.();
+    //     }
+    // }, [])
     var rotationAngle = React$1.useMemo(function () {
         if (!calculateRotationAngle)
             return 0;
@@ -7414,6 +7413,44 @@ var findNearestPosition = function (listPositions, targetPosition) {
     }
     return nearestPoint;
 };
+/**
+ * From one point find projected Point on the line segment.
+ * @param position
+ * @param linePoints
+ * @returns
+ */
+var findNearestPointOnSegment = function (position, linePoints) {
+    var beginPosition = linePoints[0], endPosition = linePoints[1];
+    var point = Flatten$1.point(position.x, position.y);
+    var segment = Flatten$1.segment(Flatten$1.point(beginPosition.x, beginPosition.y), Flatten$1.point(endPosition.x, endPosition.y));
+    var _a = point.distanceTo(segment); _a[0]; var segmentFromPointToSegment = _a[1];
+    return {
+        x: segmentFromPointToSegment.pe.x,
+        y: segmentFromPointToSegment.pe.y
+    };
+};
+/**
+ * From 1 point find projected Point on the line segments so that the distance between 2 points is shortest.
+ * @param position
+ * @param lines
+ * @returns
+ */
+var findNearestProjectedPoint = function (position, lines) {
+    var possiblePoints = lines.map(function (p) { return findNearestPointOnSegment(position, p); });
+    var nearestPoint = findNearestPosition(possiblePoints, position);
+    return nearestPoint;
+};
+/**
+ * Check if a point is inside a polygon
+ * @param position
+ * @param polygonPoints
+ * @returns
+ */
+var checkPointContainsPolygon = function (position, polygonPoints) {
+    var polygon = new Flatten$1.Polygon();
+    polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
+    return polygon.contains(Flatten$1.point(position.x, position.y));
+};
 /**
  * @param ele : IElement
  * @returns Flatten.Polygon
@@ -9153,34 +9190,42 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b, _c;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onManuallyTriggerRenderHandler = props.onManuallyTriggerRenderHandler, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _d = React$1.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
     var _e = React$1.useState(), hoveredPort = _e[0], setHoveredPort = _e[1];
     var _f = React$1.useState((_a = props.ports) !== null && _a !== void 0 ? _a : []), ports = _f[0], setPorts = _f[1];
     var _g = React$1.useState(false), someElementLinkStarted = _g[0], setSomeElementLinkStarted = _g[1];
     var _h = React$1.useState(), potentialPortPosition = _h[0], setPotentialPortPosition = _h[1];
-    var _j = React$1.useState(false); _j[0]; var setUpdated = _j[1];
+    var _j = React$1.useState(false); _j[0]; _j[1];
     var _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
     var elementRef = React$1.useRef(null);
     var elementLinkStarted = React$1.useRef();
     var portsRef = React$1.useRef(ports);
+    React$1.useEffect(function () {
+        return function () {
+            var _a;
+            console.log('un mount', (_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content);
+        };
+    }, []);
     //Listen to manually trigger render event
     React$1.useEffect(function () {
-        var off = onManuallyTriggerRenderHandler === null || onManuallyTriggerRenderHandler === void 0 ? void 0 : onManuallyTriggerRenderHandler(function () {
-            console.log('Manually trigger render element', id);
-            setUpdated(function (prev) { return !prev; });
+        var off = props.onManuallyTriggerRenderPort(function (portId, elementId) {
+            if (elementId !== id)
+                return;
+            console.log('onManuallyTriggerRenderPort', id);
+            setPorts(function (prev) { return __spreadArray([], prev, true); });
         });
         return function () {
-            off === null || off === void 0 ? void 0 : off();
+            off();
         };
-    }, []);
+    }, [props.onManuallyTriggerRenderPort]);
     //Update portsRef when ports changed
     React$1.useEffect(function () {
         portsRef.current = ports;
     }, [ports]);
     React$1.useEffect(function () {
         var _a;
-        console.info('Rendering Element ' + id + ' with text ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content));
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
     });
     //Listen a new port is created, after add new port to ports state
     React$1.useEffect(function () {
@@ -9298,29 +9343,6 @@ var Element = function (props) {
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
     }, [_paperEventEmitterContext]);
-    //From one point find another point on the line segment so that the distance between the two points is the shortest.
-    var findNearestPointOnSegment = function (position, linePoints) {
-        var beginPosition = linePoints[0], endPosition = linePoints[1];
-        var point = Flatten$1.point(position.x, position.y);
-        var segment = Flatten$1.segment(Flatten$1.point(beginPosition.x, beginPosition.y), Flatten$1.point(endPosition.x, endPosition.y));
-        var _a = point.distanceTo(segment); _a[0]; var segmentFromPointToSegment = _a[1];
-        return {
-            x: segmentFromPointToSegment.pe.x,
-            y: segmentFromPointToSegment.pe.y
-        };
-    };
-    //From 1 point find another point on the line segment so that the distance between 2 points is shortest.
-    var findNearestProjectedPoint = function (position, linePositions) {
-        var possiblePoints = linePositions.map(function (p) { return findNearestPointOnSegment(position, p); });
-        var nearestPoint = findNearestPosition(possiblePoints, position);
-        return nearestPoint;
-    };
-    //Check if a point is inside a polygon
-    var checkPointContainsPolygon = function (position, polygonPoints) {
-        var polygon = new Flatten$1.Polygon();
-        polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
-        return polygon.contains(Flatten$1.point(position.x, position.y));
-    };
     //Normalize a point so that it can lie exactly on an area
     var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
         var lines = moveableAreas.filter(function (area) { return area.length === 2; });
@@ -9625,14 +9647,16 @@ var Element = function (props) {
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React$1.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             return React$1.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, 
                 // rotation={rotatePort(p)}
                 calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, 
                 // onMouseEnter={() => {
                 //     if (someElementLinkStarted) setHoveredPort(p)
                 // }}
-                onMouseLeave: handlePortMouseLeave, onManuallyTriggerRenderHandler: (_g = p.manuallyTriggerRenderHandler) === null || _g === void 0 ? void 0 : _g.bind(p), renderShape: p.renderShape });
+                onMouseLeave: handlePortMouseLeave, 
+                // onManuallyTriggerRenderHandler={p.manuallyTriggerRenderHandler?.bind(p)}
+                renderShape: p.renderShape });
         }),
         React$1.createElement(Flexbox$1, { className: textsPlaceHolderClassName, style: textsPlaceHolderFlexStyle, x: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.x, y: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.y }, texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
             var _a, _b;
@@ -9870,17 +9894,16 @@ function convertElementsToTree(elements) {
     return parsedElementsInTree;
 }
 var Paper = function (props) {
-    var _a;
-    var _b = React$1.useState(props.elements), elements = _b[0], setElements = _b[1];
-    var _c = React$1.useState([]), elementsInTree = _c[0], setElementsInTree = _c[1];
-    var _d = React$1.useState(), selectedElement = _d[0], setSelectedElement = _d[1];
-    var _e = React$1.useState((_a = props.links) !== null && _a !== void 0 ? _a : []), links = _e[0], setLinks = _e[1];
-    var _f = React$1.useState(), selectedLink = _f[0], setSelectedLink = _f[1];
-    var _g = React$1.useState(null), tempLink = _g[0], setTempLink = _g[1];
-    var _h = React$1.useState(props.texts), texts = _h[0], setTexts = _h[1];
-    var _j = React$1.useState(), selectedText = _j[0], setSelectedText = _j[1];
-    var _k = React$1.useState(null), selectedElementSVG = _k[0], setSelectedElementSVG = _k[1];
-    var _l = React$1.useState(false), mouseDownedOnPaper = _l[0], setMouseDownedOnPaper = _l[1];
+    var _a = React$1.useState([]), elements = _a[0], setElements = _a[1];
+    var _b = React$1.useState([]), elementsInTree = _b[0], setElementsInTree = _b[1];
+    var _c = React$1.useState(), selectedElement = _c[0], setSelectedElement = _c[1];
+    var _d = React$1.useState([]), links = _d[0], setLinks = _d[1];
+    var _e = React$1.useState(), selectedLink = _e[0], setSelectedLink = _e[1];
+    var _f = React$1.useState(null), tempLink = _f[0], setTempLink = _f[1];
+    var _g = React$1.useState([]), texts = _g[0], setTexts = _g[1];
+    var _h = React$1.useState(), selectedText = _h[0], setSelectedText = _h[1];
+    var _j = React$1.useState(null), selectedElementSVG = _j[0], setSelectedElementSVG = _j[1];
+    var _k = React$1.useState(false), mouseDownedOnPaper = _k[0], setMouseDownedOnPaper = _k[1];
     var paperEventEmitter = React$1.useContext(paperEventEmitterContext);
     var paperContainerRef = React$1.useRef(null);
     var tempLinkRef = React$1.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
@@ -9889,6 +9912,24 @@ var Paper = function (props) {
     React$1.useEffect(function () {
         console.log('Render Paper');
     });
+    React$1.useEffect(function () {
+        setElements(props.elements);
+    }, [props.elements]);
+    React$1.useEffect(function () {
+        setLinks(props.links || []);
+    }, [props.links]);
+    React$1.useEffect(function () {
+        setTexts(props.texts);
+    }, [props.texts]);
+    React$1.useEffect(function () {
+        var off = props.onManuallyTriggerRenderElement(function (elementId) {
+            console.log('onManuallyTriggerRenderElement');
+            setElements(function (prev) { return __spreadArray([], prev, true); });
+        });
+        return function () {
+            off();
+        };
+    }, [props.onManuallyTriggerRenderElement]);
     //Cache elements to avoid re-render when elements changed
     React$1.useEffect(function () {
         elementsRef.current = elements;
@@ -10473,15 +10514,21 @@ var Paper = function (props) {
         }
     }, [props.onElementContextMenu, handleElementClicked]);
     var renderElementInTree = React$1.useCallback(function (element) {
-        var _a, _b, _c;
+        var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         console.log("Render element ".concat(element.id));
         return (React$1.createElement("g", { key: element.id },
             React$1.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderHandler: (_c = element.manuallyTriggerRenderHandler) === null || _c === void 0 ? void 0 : _c.bind(element), textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange]);
+    React$1.useEffect(function () {
+        console.log('elementsInTree');
+    }, [elementsInTree]);
+    React$1.useEffect(function () {
+        console.log('renderElementInTree');
+    }, [renderElementInTree]);
     var ElementsInTree = React$1.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -10513,14 +10560,39 @@ var Paper = function (props) {
 };
 var Paper$1 = React$1.memo(Paper);
 
-function Editor(_a) {
+var Editor = function (_a) {
     var editorContext = _a.editorContext, width = _a.width, height = _a.height;
+    var _b = React$1.useState([]), elements = _b[0], setElements = _b[1];
+    var _c = React$1.useState([]), links = _c[0], setLinks = _c[1];
+    var _d = React$1.useState([]), texts = _d[0], setTexts = _d[1];
     if (!width) {
         width = 3000;
     }
     if (!height) {
         height = 3000;
     }
+    var setEditorStates = React$1.useCallback(function (ctx) {
+        setElements(__spreadArray([], ctx.elements, true));
+        setLinks(__spreadArray([], ctx.links, true));
+        setTexts(__spreadArray([], ctx.texts, true));
+    }, []);
+    React$1.useEffect(function () {
+        if (editorContext) {
+            setEditorStates(editorContext);
+        }
+    }, [editorContext, setEditorStates]);
+    React$1.useEffect(function () {
+        var offs = [];
+        if (editorContext) {
+            offs.push(editorContext.onEditorContextUpdated(function () {
+                console.log("onEditorContextUpdated");
+                setEditorStates(editorContext);
+            }));
+        }
+        return function () {
+            offs.forEach(function (off) { return off(); });
+        };
+    }, [editorContext, setEditorStates]);
     var handlePaperClicked = React$1.useCallback(function (position) {
         editorContext.onPaperClickedHandler(position);
     }, [editorContext]);
@@ -10569,10 +10641,8 @@ function Editor(_a) {
     var handlePaperMouseUp = React$1.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    if (editorContext)
-        return (React$1.createElement(Paper$1, { size: { width: width, height: height }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown }));
-    return null;
-}
+    return (React$1.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
+};
 
 exports.CircleRC = Circle;
 exports.CrescentRC = Crescent;

package/dist/cjs/types/components/editor.d.ts

@@ -5,5 +5,5 @@ interface IEditorProps {
     width?: number;
     height?: number;
 }
-export default function Editor({ editorContext, width, height }: IEditorProps): React.JSX.Element | null;
-export {};
+declare const Editor: React.FC<IEditorProps>;
+export default Editor;

package/dist/cjs/types/components/paper.d.ts

@@ -25,6 +25,8 @@ interface PaperProps {
     onElementSelected?: (element: IElement) => void;
     onLinkSelected?: (link: IElementLink) => void;
     onTextSelected?: (text: IText) => void;
+    onManuallyTriggerRenderElement: (callback: (elementId: string) => void) => () => void;
+    onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => () => void;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
 }

package/dist/cjs/types/models/IEditorContext.d.ts

@@ -34,4 +34,6 @@ export default interface IEditorContext {
     removeText(textId: string): void;
     triggerRenderElement(elementId: string): void;
     triggerRenderPort(portId: string, elementId: string): void;
+    onManuallyTriggerRenderElement: (callback: (elementId: string) => void) => (() => void);
+    onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => (() => void);
 }

package/dist/cjs/types/models/IElement.d.ts

@@ -26,13 +26,10 @@ export default interface IElement {
     defaultPortSize?: number;
     parentElement?: IElement;
     onParentChanged?: (callback: (oldParent?: IElement, newParent?: IElement) => void) => (() => void);
-    manuallyTriggerRender: () => void;
     addPort: (newPort: IPort) => void;
     onAddedPort: (callback: (newPort: IPort) => void) => (() => void);
     deletePort: (id: string) => void;
     onDeletedPort: (callback: (id: string) => void) => (() => void);
-    manuallyTriggerRenderPort: (portId: string) => void;
-    manuallyTriggerRenderHandler?: (callback: () => void) => (() => void);
     textsPlaceHolderClassName?: string;
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;

package/dist/cjs/types/models/IElementProps.d.ts

@@ -35,7 +35,7 @@ interface IElementProps {
     onMouseUp?: (event: React.MouseEvent) => void;
     onMouseUpAtLinkedPortPlaceholder?: (link: IElementLink, position: IPosition, targetElementId: string) => void;
     onTextUpdated?: (elmentId: string, textId: string, newTextContent: string) => void;
-    onManuallyTriggerRenderHandler?: (callback: () => void) => () => void;
+    onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => () => void;
     textsPlaceHolderClassName?: string;
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;

package/dist/cjs/types/models/IPort.d.ts

@@ -9,6 +9,4 @@ export default interface IPort {
     size?: ISize;
     label?: IText;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
-    manuallyTriggerRender: () => void;
-    manuallyTriggerRenderHandler?: (callback: () => void) => () => void;
 }

package/dist/cjs/types/models/IPortProps.d.ts

@@ -25,5 +25,4 @@ export interface IPortProps {
     onPortLabelContentChanged?: (ev: React.ChangeEvent, newValue: string, portId: string) => void;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
     calculateRotationAngle?: (x: number, y: number) => number;
-    onManuallyTriggerRenderHandler?: (callback: () => void) => () => void;
 }

package/dist/cjs/types/models/implementations/EditorContext.d.ts

@@ -40,5 +40,7 @@ export declare class EditorContext implements IEditorContext {
     onLinkSelected(callback: (link: IElementLink) => void): () => void;
     onTextSelected(callback: (text: IText) => void): () => void;
     triggerRenderElement(elementId: string): void;
+    onManuallyTriggerRenderElement(callback: (elementId: string) => void): () => void;
     triggerRenderPort(portId: string, elementId: string): void;
+    onManuallyTriggerRenderPort(callback: (portId: string, elementId: string) => void): () => void;
 }

package/dist/cjs/types/models/implementations/Element.d.ts

@@ -34,9 +34,6 @@ export default class Element implements IElement {
     textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
     constructor(x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: Element, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
-    manuallyTriggerRender(): void;
-    manuallyTriggerRenderHandler(callback: () => void): () => void;
-    manuallyTriggerRenderPort(portId: string): void;
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

package/dist/cjs/types/models/implementations/Port.d.ts

@@ -18,6 +18,4 @@ export default class Port implements IPort {
         positioningAnchor?: IPosition;
     }, width?: number, height?: number);
     get id(): string;
-    manuallyTriggerRender(): void;
-    manuallyTriggerRenderHandler(callback: () => void): () => void;
 }

package/dist/cjs/types/utils/positionUtil.d.ts

@@ -11,6 +11,27 @@ export declare function removeDuplicatePosition<T extends IPosition>(positions:
  *  Find the closest point from a list of points to the destination point
 */
 export declare const findNearestPosition: (listPositions: IPosition[], targetPosition: IPosition) => IPosition;
+/**
+ * From one point find projected Point on the line segment.
+ * @param position
+ * @param linePoints
+ * @returns
+ */
+export declare const findNearestPointOnSegment: (position: IPosition, linePoints: IPosition[]) => IPosition;
+/**
+ * From 1 point find projected Point on the line segments so that the distance between 2 points is shortest.
+ * @param position
+ * @param lines
+ * @returns
+ */
+export declare const findNearestProjectedPoint: (position: IPosition, lines: IPosition[][]) => IPosition;
+/**
+ * Check if a point is inside a polygon
+ * @param position
+ * @param polygonPoints
+ * @returns
+ */
+export declare const checkPointContainsPolygon: (position: IPosition, polygonPoints: IPosition[]) => boolean;
 /**
  * @param ele : IElement
  * @returns Flatten.Polygon