orcasvn-react-diagrams 0.1.15 → 0.1.17

package/dist/cjs/index.js

@@ -560,8 +560,100 @@ var Element$1 = /** @class */ (function () {
     return Element;
 }());
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
+    //if direction is provided, rotation is based on direction
+    var rotation = shapeProps.rotation || 0;
+    if (shapeProps.direction) {
+        switch (shapeProps.direction) {
+            case 'left':
+                rotation = -90;
+                break;
+            case 'right':
+                rotation = 90;
+                break;
+            case 'down':
+                rotation = 180;
+                break;
+            default:
+                rotation = 0;
+                break;
+        }
+    }
+    var position = { x: shapeProps.x, y: shapeProps.y };
+    var transformOrigin = "center";
+    if (typeof shapeProps.positioningAnchor === 'object') {
+        position.x = position.x - shapeProps.positioningAnchor.x / 100 * shapeProps.width;
+        position.y = position.y - shapeProps.positioningAnchor.y / 100 * shapeProps.height;
+        transformOrigin = "".concat(shapeProps.positioningAnchor.x, "% ").concat(shapeProps.positioningAnchor.y, "%");
+    }
+    else if (shapeProps.positioningAnchor === exports.PositioningAnchor.Center) {
+        position.x = position.x - shapeProps.width / 2;
+        position.y = position.y - shapeProps.height / 2;
+    }
+    var objectOfAllEventAttributes = React$1.useMemo(function () {
+        var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
+            var k = _a[0]; _a[1];
+            return k.startsWith('on');
+        });
+        return Object.fromEntries(arrayOfAllEventAttributes);
+    }, [shapeProps]);
+    var viewboxWidth = shapeProps.width > shapeProps.height ? 100 : shapeProps.width / shapeProps.height * 100;
+    var viewBoxHeight = shapeProps.height > shapeProps.width ? 100 : shapeProps.height / shapeProps.width * 100;
+    var viewBox = shapeProps.viewBox || "0 0 ".concat(viewboxWidth, " ").concat(viewBoxHeight);
+    return (React$1.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
+        React$1.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
+});
+
+var CustomShape = React$1.forwardRef(function (props, ref) {
+    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
+});
+
 var Port$1 = /** @class */ (function () {
-    function Port(x, y, label, renderShape, width, height) {
+    function Port(x, y, label, shapeRenderer, width, height) {
+        var _this = this;
         this._id = generateUniqueId();
         this.position = { x: x, y: y };
         if (!height) {
@@ -571,7 +663,14 @@ var Port$1 = /** @class */ (function () {
             this.size = { width: width, height: height };
         }
         this.label = label;
-        this.renderShape = renderShape;
+        if (shapeRenderer && shapeRenderer.shape) {
+            this.renderShape = shapeRenderer.shape;
+        }
+        else if (shapeRenderer && shapeRenderer.customShapeWithJSX) {
+            this.renderShape = React$1.forwardRef(function (props, ref) {
+                return (React$1.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapeRenderer.positioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, shapeRenderer.customShapeWithJSX));
+            });
+        }
     }
     Object.defineProperty(Port.prototype, "id", {
         get: function () {
@@ -701,130 +800,6 @@ var EditorContext = /** @class */ (function () {
     return EditorContext;
 }());
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
-    //if direction is provided, rotation is based on direction
-    var rotation = shapeProps.rotation || 0;
-    if (shapeProps.direction) {
-        switch (shapeProps.direction) {
-            case 'left':
-                rotation = -90;
-                break;
-            case 'right':
-                rotation = 90;
-                break;
-            case 'down':
-                rotation = 180;
-                break;
-            default:
-                rotation = 0;
-                break;
-        }
-    }
-    var position = { x: shapeProps.x, y: shapeProps.y };
-    var transformOrigin = "center";
-    if (typeof shapeProps.positioningAnchor === 'object') {
-        position.x = position.x - shapeProps.positioningAnchor.x / 100 * shapeProps.width;
-        position.y = position.y - shapeProps.positioningAnchor.y / 100 * shapeProps.height;
-        transformOrigin = "".concat(shapeProps.positioningAnchor.x, "% ").concat(shapeProps.positioningAnchor.y, "%");
-    }
-    else if (shapeProps.positioningAnchor === exports.PositioningAnchor.Center) {
-        position.x = position.x - shapeProps.width / 2;
-        position.y = position.y - shapeProps.height / 2;
-    }
-    var objectOfAllEventAttributes = React$1.useMemo(function () {
-        var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
-            var k = _a[0]; _a[1];
-            return k.startsWith('on');
-        });
-        return Object.fromEntries(arrayOfAllEventAttributes);
-    }, [shapeProps]);
-    var viewboxWidth = shapeProps.width > shapeProps.height ? 100 : shapeProps.width / shapeProps.height * 100;
-    var viewBoxHeight = shapeProps.height > shapeProps.width ? 100 : shapeProps.height / shapeProps.width * 100;
-    var viewBox = shapeProps.viewBox || "0 0 ".concat(viewboxWidth, " ").concat(viewBoxHeight);
-    return (React$1.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
-        React$1.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
-});
-
-var CustomShape = React$1.forwardRef(function (props, ref) {
-    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
-});
-
-var CustomPortFromJSXElement = /** @class */ (function (_super) {
-    __extends(CustomPortFromJSXElement, _super);
-    function CustomPortFromJSXElement(x, y, renderCustomShape, label, shapePositioningAnchor, width, height) {
-        var _this = _super.call(this, x, y, label, React$1.forwardRef(function (props, ref) {
-            return (React$1.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapePositioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, renderCustomShape));
-        }), width, height) || this;
-        return _this;
-    }
-    return CustomPortFromJSXElement;
-}(Port$1));
-
-var CustomPortFromShape = /** @class */ (function (_super) {
-    __extends(CustomPortFromShape, _super);
-    function CustomPortFromShape(x, y, shape, label, width, height) {
-        return _super.call(this, x, y, label, shape, width, height) || this;
-    }
-    return CustomPortFromShape;
-}(Port$1));
-
 var Circle = React$1.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
@@ -1482,7 +1457,7 @@ 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, calculateRotationAngle = props.calculateRotationAngle, renderShape = props.renderShape;
+    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, renderShape = props.renderShape;
     var textRef = React$1.useRef(null);
     var rotationAngle = React$1.useMemo(function () {
         if (!calculateRotationAngle)
@@ -1500,7 +1475,7 @@ var Port1 = React$1.forwardRef(function (props, ref) {
             return (React$1.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
         }
         else {
-            return React$1.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
+            return React$1.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
         }
     }, [props]);
     return (React$1.createElement(React$1.Fragment, null,
@@ -8979,11 +8954,12 @@ var Element = function (props) {
     var _a, _b, _c;
     var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, 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((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+    var _e = React$1.useState(), hoveredPort = _e[0], setHoveredPort = _e[1];
+    var _f = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _e[0], setPorts = _e[1];
-    var _f = React$1.useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
-    var _g = React$1.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
+    })) !== null && _b !== void 0 ? _b : []), 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 _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
     var elementRef = React$1.useRef(null);
     var elementLinkStarted = React$1.useRef();
@@ -9049,6 +9025,7 @@ var Element = function (props) {
             elementLinkStarted.current = undefined;
             setSomeElementLinkStarted(false);
             setPotentialPortPosition(undefined);
+            setHoveredPort(undefined);
         });
         return function () {
             elementStartedListener.off();
@@ -9187,7 +9164,6 @@ var Element = function (props) {
     };
     //Normalize port position
     var normalizePortPosition = function (tempNewPosition) {
-        console.info('normalizePortPosition', tempNewPosition);
         var newPosition;
         if (portMoveableAreas && portMoveableAreas.length > 0) { //If moveable areas is defined
             newPosition = normalizePortPositionOnMoveableAreas(portMoveableAreas, tempNewPosition);
@@ -9271,6 +9247,11 @@ var Element = function (props) {
     function handleElementMouseMove(ev) {
         //ev.stopPropagation(); //Can't use stopPropagation here, because do not create tempLink
         if (someElementLinkStarted && elementRef.current) {
+            //If an element link is being created, calculate the potential port position when the mouse moves over the element.
+            if (hoveredPort) {
+                setPotentialPortPosition(undefined);
+                return;
+            }
             /* The above code is calculating the relative position of the mouse within a specific
             element on the page. It first gets the bounding rectangle of the element using
             `getBoundingClientRect()` and the bounding box of the element using `getBBox()`. Then,
@@ -9314,7 +9295,7 @@ var Element = function (props) {
     };
     //Get rotate angle of port by port direction is defined.
     var rotatePort = React$1.useCallback(function (x, y) {
-        console.info('calculating port rotation', x, y);
+        // console.info('calculating port rotation', x, y)
         if (!portSlideRailSVGClassName)
             return 0;
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
@@ -9379,6 +9360,14 @@ var Element = function (props) {
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
+    useSelectionFrame({
+        container: container,
+        targetSVGElement: (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref.current) || undefined,
+        resizability: {
+            enabled: false,
+            keepRatio: false
+        },
+    });
     return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
@@ -9388,7 +9377,18 @@ var Element = function (props) {
             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: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
+                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: function () {
+                    if (someElementLinkStarted)
+                        setHoveredPort(p);
+                }, 
+                // onMouseEnter={() => {
+                //     if (someElementLinkStarted) setHoveredPort(p)
+                // }}
+                onMouseLeave: function () {
+                    console.log('onMouseLeave');
+                    if (someElementLinkStarted)
+                        setHoveredPort(undefined);
+                }, 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;
@@ -9648,9 +9648,12 @@ var Paper = function (props) {
     //Listen text is selected
     React$1.useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected text to parent component
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, text);
         });
         return function () {
             textSelectedListener.off();
@@ -9658,10 +9661,16 @@ var Paper = function (props) {
     }, []);
     //Listen port is selected
     React$1.useEffect(function () {
-        var portSelectedListener = paperEventEmitter.onPortSelected(function (port) {
+        var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected port to parent component
+            var element = elements.find(function (e) { return e.id === elementId; });
+            if (element) {
+                (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+            }
         });
         return function () {
             portSelectedListener.off();
@@ -9709,6 +9718,7 @@ var Paper = function (props) {
     };
     //Listen command delete selected for element
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
@@ -9719,30 +9729,44 @@ var Paper = function (props) {
                 setSelectedElementSVG(null);
             }
         });
+        //broadcast selected element to parent component
+        if (selectedElement) {
+            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedElement);
+        }
         return function () {
             listener.off();
         };
     }, [selectedElement]);
     //Listen command delete selected for link
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
                 setSelectedLink(undefined);
             }
         });
+        //broadcast selected link to parent component
+        if (selectedLink) {
+            (_a = props.onLinkSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedLink);
+        }
         return function () {
             listener.off();
         };
     }, [selectedLink]);
     //Listen command delete selected for Text
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
                 setSelectedText(undefined);
             }
         });
+        //broadcast selected text to parent component
+        if (selectedText) {
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedText);
+        }
         return function () {
             listener.off();
         };
@@ -9885,7 +9909,7 @@ var Paper = function (props) {
         if (!newElementLink)
             return null;
         //Automatic bending, if is not defined points
-        if (!newElementLink.points) {
+        if (!newElementLink.points || newElementLink.points.length === 0) {
             newElementLink = automationAddPointsToLink(newElementLink, MAX_LINK_KNOT_COUNT);
         }
         var isValid = true;
@@ -10202,13 +10226,11 @@ var Paper = function (props) {
 function Editor(_a) {
     var editorContext = _a.editorContext;
     return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
+        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onPortSelected: editorContext.onPortSelected, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onElementSelected: editorContext.onElementSelected, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking, onLinkSelected: editorContext.onLinkSelected, onTextSelected: editorContext.onTextSelected })));
 }
 
 exports.CircleRC = Circle;
 exports.CrescentRC = Crescent;
-exports.CustomPortFromJSXElement = CustomPortFromJSXElement;
-exports.CustomPortFromShape = CustomPortFromShape;
 exports.CustomShapeRC = CustomShape;
 exports.EditorContext = EditorContext;
 exports.Element = Element$1;

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

@@ -3,7 +3,7 @@ import IElement from '../models/IElement';
 import IElementLink from '../models/IElementLink';
 import IPosition from '../models/position';
 import IPort from '../models/IPort';
-import { IPaperText } from '../models/IText';
+import IText, { IPaperText } from '../models/IText';
 import ISize from '../models/size';
 interface PaperProps {
     size: {
@@ -15,10 +15,14 @@ interface PaperProps {
     texts: IPaperText[];
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onPortSelected?: (port: IPort, element: IElement) => void;
     onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
+    onElementSelected?: (element: IElement) => void;
     onLinkValidation?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;
+    onLinkSelected?: (link: IElementLink) => void;
+    onTextSelected?: (text: IText) => 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/mocks/port1.d.ts

@@ -1,5 +1,5 @@
 import IText from "../models/IText";
-import { CustomPortFromShape } from '../models/implementations/CustomPortFromShape';
-export declare class CustomPort1 extends CustomPortFromShape {
+import { Port } from '../models';
+export declare class CustomPort1 extends Port {
     constructor(x: number, y: number, label?: IText, width?: number, height?: number);
 }

package/dist/cjs/types/mocks/portIn.d.ts

@@ -1,4 +1,4 @@
-import { CustomPortFromJSXElement } from "../models/implementations/CustomPortFromJSXElement";
-export default class PortIn extends CustomPortFromJSXElement {
+import { Port } from "../models";
+export default class PortIn extends Port {
     constructor(x: number, y: number, width?: number, height?: number);
 }

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

@@ -17,6 +17,9 @@ export interface IPortProps {
     onMouseDown?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
     moveableAreas?: IPosition[][];
     label?: IText;
+    onMouseEnter?: (ev: React.MouseEvent) => void;
+    onMouseLeave?: (ev: React.MouseEvent) => void;
+    onMouseMove?: (ev: React.MouseEvent) => void;
     onPortLabelMoved?: (offsetX: number, offsetY: number) => void;
     onPortLabelResized?: (width: number, height: number) => void;
     onPortLabelContentChanged?: (ev: React.ChangeEvent, newValue: string) => void;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import IElement from "../IElement";
 import IElementLink from "../IElementLink";
-import { IPaperText } from "../IText";
+import IText, { IPaperText } from "../IText";
 import IPosition from "../position";
 import IPort from "../IPort";
 import ISize from "../size";
@@ -11,12 +11,16 @@ export declare class EditorContext {
     private _texts;
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onPortSelected?: (port: IPort, element: IElement) => void;
     onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
+    onElementSelected?: (element: IElement) => void;
     validateLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
+    onLinkSelected?: (link: IElementLink) => void;
+    onTextSelected?: (text: IText) => void;
     constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
     get elements(): IElement[];
     get links(): IElementLink[];

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import IPort from "../IPort";
 import { IPortProps } from "../IPortProps";
 import IText from "../IText";
@@ -10,6 +10,10 @@ export default class Port implements IPort {
     size?: ISize;
     label?: IText;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
-    constructor(x: number, y: number, label?: IText, renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>, width?: number, height?: number);
+    constructor(x: number, y: number, label?: IText, shapeRenderer?: {
+        shape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
+        customShapeWithJSX?: JSX.Element;
+        positioningAnchor?: IPosition;
+    }, width?: number, height?: number);
     get id(): string;
 }

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

@@ -3,6 +3,4 @@ import Port from './Port';
 import ElementLink from './ElementLink';
 import Text from './Text';
 export * from './EditorContext';
-export * from './CustomPortFromJSXElement';
-export * from './CustomPortFromShape';
 export { Element, Port, ElementLink, Text };