orcasvn-react-diagrams 0.1.55 → 0.1.57

package/dist/cjs/index.js

@@ -808,6 +808,7 @@ var EVENT_PORT_MOUSE_DOWN = 'portMouseDown';
 var EVENT_PORT_MOUSE_UP = 'portMouseUp';
 var EVENT_PORT_MOVED = 'portMoved';
 var EVENT_PORT_SELECTED = 'portSelected';
+var EVENT_PORT_CONTEXT_MENU = 'portContextMenu';
 var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
 var EVENT_ELEMENT_MOVED = 'elementMoved';
 var EVENT_ELEMENT_RESIZED = 'elementResized';
@@ -981,6 +982,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onPortSelectedHandler = function (port, element) {
         this._eventEmitter.emit(EVENT_PORT_SELECTED, port, element);
     };
+    EditorContext.prototype.onPortContextMenu = function (callback) {
+        return this.addEventListener(EVENT_PORT_CONTEXT_MENU, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onPortContextMenuHandler = function (port, element, mouseEvent) {
+        this._eventEmitter.emit(EVENT_PORT_CONTEXT_MENU, port, element, mouseEvent);
+    };
     EditorContext.prototype.onElementContextMenu = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_CONTEXT_MENU, callback);
     };
@@ -7688,8 +7696,9 @@ var SelectionFrame = function (props) {
     var circleHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingRect) {
-            setStartX(event.clientX);
-            setStartY(event.clientY);
+            // const paperPosition = getMousePosition(event);
+            // setStartX(paperPosition.x);
+            // setStartY(paperPosition.y);
             setDraggingCircle(true);
         }
     };
@@ -7705,24 +7714,30 @@ var SelectionFrame = function (props) {
         var circleHandleMouseMove = function (event) {
             var mouseEvent = event;
             if (draggingCircle) {
-                var offsetX = mouseEvent.clientX - startX;
-                var offsetY = mouseEvent.clientY - startY;
+                var mousePosition = getMousePosition(mouseEvent);
+                // let offsetX = mouseEvent.clientX - startX;
+                // let offsetY = mouseEvent.clientY - startY;
                 if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
                     return;
                 }
-                setStartX(mouseEvent.clientX);
-                setStartY(mouseEvent.clientY);
+                // setStartX(mouseEvent.clientX);
+                // setStartY(mouseEvent.clientY);
                 setLastMoveTime(Date.now());
-                var newWidth = width;
-                var newHeight = height;
+                var newWidth = mousePosition.x - curX;
+                var newHeight = mousePosition.y - curY;
                 if (propResizability.keepRatio) {
-                    var resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
-                    var increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
-                    offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
-                    offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
-                }
-                newWidth += offsetX;
-                newHeight += offsetY;
+                    var ratio = Math.max(Math.abs(newWidth / width), Math.abs(newHeight / height));
+                    newWidth = newWidth > 0 ? ratio * width : -ratio * width;
+                    newHeight = newHeight > 0 ? ratio * height : -ratio * height;
+                }
+                // if (propResizability.keepRatio) {
+                //     let resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
+                //     const increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
+                //     offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
+                //     offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
+                // }
+                // newWidth += offsetX;
+                // newHeight += offsetY;
                 if (newWidth < MIN_ELEMENT_SIZE) {
                     newWidth = MIN_ELEMENT_SIZE;
                 }
@@ -8280,7 +8295,7 @@ var Text = React.forwardRef(function (_a, ref) {
 var Text$1 = React.memo(Text);
 
 var Port1 = React.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, parentAbsolutePosition = props.parentAbsolutePosition, 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, 
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, parentAbsolutePosition = props.parentAbsolutePosition, 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, onContextMenu = props.onContextMenu, 
     // onManuallyTriggerRenderHandler,
     renderShape = props.renderShape, children = props.children;
     var textRef = React.useRef(null);
@@ -8307,7 +8322,7 @@ var Port1 = React.forwardRef(function (props, ref) {
             return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle }), children));
         }
         else {
-            return React.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: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(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" }, children);
+            return React.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: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, onContextMenu: function (e) { return onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
         }
     }, [props]);
     return (React.createElement(React.Fragment, null,
@@ -8658,7 +8673,7 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
 });
 
 var Element = React.forwardRef(function (props, forwardedRef) {
-    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, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, 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, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu; props.onPortsChanged;
     var _a = React.useState(), selectedPort = _a[0], setSelectedPort = _a[1];
     var _b = React.useState(), hoveredPort = _b[0], setHoveredPort = _b[1];
     var _c = React.useState([]), ports = _c[0], setPorts = _c[1];
@@ -8746,24 +8761,39 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
             setSelectedPort(undefined);
         });
+        return function () {
+            eventListener.off();
+        };
+    }, []);
+    //Normalize port position
+    var normalizePortPosition = React.useCallback(function (tempNewPosition) {
+        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
+        return newPosition || tempNewPosition;
+    }, [width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current]);
+    React.useEffect(function () {
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
+            var _a;
+            var isChanged = false;
             var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
-                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    isChanged = true;
                     _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
-                return __assign(__assign({}, port), { position: newPosition });
+                port.position = newPosition;
+                return port;
             });
             setPorts(newPorts);
+            if (isChanged) {
+                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+            }
         });
         return function () {
-            eventListener.off();
             eleResizeListener.off();
         };
-    }, [onPortMoved]);
+    }, [onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen creating element link started, ended.
     React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8836,11 +8866,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
     }, []);
-    //Normalize port position
-    var normalizePortPosition = function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
-        return newPosition || tempNewPosition;
-    };
     var handlePortMove = function (newX, newY) {
         if (!selectedPort)
             return;
@@ -8987,6 +9012,14 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         if (someElementLinkStarted)
             setHoveredPort(undefined);
     }, [someElementLinkStarted]);
+    //Handle when context menu is opened on port
+    var handlePortContextMenu = React.useCallback(function (portId, e) {
+        e.preventDefault();
+        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        if (!port)
+            return;
+        onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, id, e);
+    }, [onPortContextMenu, id]);
     //Get rotate angle of port by port direction is defined.
     var rotatePort = React.useCallback(function (x, y) {
         // logger.info('calculating port rotation', x, y)
@@ -9027,7 +9060,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
+    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition]);
     var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -9051,15 +9084,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 : React.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, _h;
-                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, 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={p.manuallyTriggerRenderHandler?.bind(p)}
-                    renderShape: p.renderShape },
+                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, 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, calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, onMouseLeave: handlePortMouseLeave, onContextMenu: handlePortContextMenu, renderShape: p.renderShape },
                     selectedPort && selectedPort.id === p.id && (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.id) !== p.id &&
                         (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_g = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _g === void 0 ? void 0 : _g.current) || undefined, resizability: {
                                 enabled: false,
@@ -10026,6 +10051,14 @@ var Paper = function (props) {
         }
         setMouseDownedOnPaper(false);
     }, [paperEventEmitter]);
+    var handlePortContextMenu = React.useCallback(function (port, elementId, e) {
+        var _a;
+        e.preventDefault();
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        if (element) {
+            (_a = props.onPortContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, port, element, e);
+        }
+    }, [props.onPortContextMenu]);
     var handleContextMenu = React.useCallback(function (elementId, e, ref) {
         var _a;
         e.preventDefault();
@@ -10083,7 +10116,7 @@ var Paper = function (props) {
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
-            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 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, onPortsChanged: handlePortsChanged, 
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 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, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
                 onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -10261,11 +10294,13 @@ var Editor = function (_a) {
     var handlePortsChanged = React.useCallback(function (ports, element) {
         element.ports = ports;
     }, [editorContext]);
+    var handlePortContextMenu = React.useCallback(function (port, element, event) {
+        editorContext.onPortContextMenuHandler(port, element, event);
+    }, [editorContext]);
     var handleElementContextMenu = React.useCallback(function (element, event) {
         editorContext.onElementContextMenuHandler(element, event);
     }, [editorContext]);
     var handleElementMoved = React.useCallback(function (relativePosition, element) {
-        console.count('SelectionFrame: handleElementMoved');
         editorContext.onElementMovedHandler(relativePosition, element);
     }, [editorContext]);
     var handleElementResized = React.useCallback(function (size, element) {
@@ -10324,7 +10359,7 @@ var Editor = function (_a) {
     }, [editorContext]);
     return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
         React.createElement(ZoomContextProvider, null,
-            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
+            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;

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

@@ -22,6 +22,7 @@ interface PaperProps {
     onPortMoved?: (relativePosition: IPosition, port: IPort, element: IElement) => void;
     onPortSelected?: (port: IPort, element: IElement) => void;
     onPortsChanged: (ports: IPort[], element: IElement) => void;
+    onPortContextMenu?: (port: IPort, element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (relativePosition: IPosition, element: IElement, index: number, paperPosition: IPosition) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;

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

@@ -21,6 +21,7 @@ export default interface IEditorContext {
     onPortMouseUp: (callback: (port: IPort, element: IElement, paperPosition: IPosition) => void) => (() => void);
     onPortMoved: (callback: (position: IPosition, port: IPort, element: IElement) => void) => (() => void);
     onPortSelected: (callback: (port: IPort, element: IElement) => void) => (() => void);
+    onPortContextMenu: (callback: (port: IPort, element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void) => (() => void);
     onElementContextMenu: (callback: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void) => (() => void);
     onElementMoved: (callback: (relativePosition: IPosition, element: IElement) => void) => (() => void);
     onElementResized: (callback: (size: ISize, element: IElement) => void) => (() => void);

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

@@ -35,6 +35,7 @@ interface IElementProps {
     onMouseLeave?: (event: React.MouseEvent, elementId: string) => void;
     onMouseDown?: (event: React.MouseEvent, elementId: string) => void;
     onMouseUp?: (event: React.MouseEvent, elementId: string) => void;
+    onPortContextMenu?: (port: IPort, elementId: string, event: React.MouseEvent<SVGElement>) => void;
     onMouseUpAtLinkedPortPlaceholder?: (link: IElementLink, position: IPosition, targetElementId: string) => void;
     onTextUpdated?: (elmentId: string, textId: string, newTextContent: string) => void;
     onManuallyTriggerRenderPort?: (callback: (portId: string, elementId: string) => void) => () => void;

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

@@ -16,6 +16,7 @@ export interface IPortProps {
     onSelected?: (portId: string, e: React.MouseEvent<SVGElement>, ref?: SVGSVGElement) => void;
     onMouseUp?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
     onMouseDown?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
+    onContextMenu?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
     moveableAreas?: IPosition[][];
     label?: IText;
     onMouseEnter?: (ev: React.MouseEvent) => void;

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

@@ -41,6 +41,7 @@ export declare class EditorContext implements IEditorContext {
     onPortMouseUp(callback: (port: IPort, element: IElement, paperPosition: IPosition) => void): () => void;
     onPortMoved(callback: (position: IPosition, port: IPort, element: IElement) => void): () => void;
     onPortSelected(callback: (port: IPort, element: IElement) => void): () => void;
+    onPortContextMenu(callback: (port: IPort, element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void): () => void;
     onElementContextMenu(callback: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void): () => void;
     onElementMoved(callback: (relativePosition: IPosition, element: IElement) => void): () => void;
     onElementResized(callback: (size: ISize, element: IElement) => void): () => void;

package/dist/esm/index.js

@@ -804,6 +804,7 @@ var EVENT_PORT_MOUSE_DOWN = 'portMouseDown';
 var EVENT_PORT_MOUSE_UP = 'portMouseUp';
 var EVENT_PORT_MOVED = 'portMoved';
 var EVENT_PORT_SELECTED = 'portSelected';
+var EVENT_PORT_CONTEXT_MENU = 'portContextMenu';
 var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
 var EVENT_ELEMENT_MOVED = 'elementMoved';
 var EVENT_ELEMENT_RESIZED = 'elementResized';
@@ -977,6 +978,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onPortSelectedHandler = function (port, element) {
         this._eventEmitter.emit(EVENT_PORT_SELECTED, port, element);
     };
+    EditorContext.prototype.onPortContextMenu = function (callback) {
+        return this.addEventListener(EVENT_PORT_CONTEXT_MENU, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onPortContextMenuHandler = function (port, element, mouseEvent) {
+        this._eventEmitter.emit(EVENT_PORT_CONTEXT_MENU, port, element, mouseEvent);
+    };
     EditorContext.prototype.onElementContextMenu = function (callback) {
         return this.addEventListener(EVENT_ELEMENT_CONTEXT_MENU, callback);
     };
@@ -7684,8 +7692,9 @@ var SelectionFrame = function (props) {
     var circleHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingRect) {
-            setStartX(event.clientX);
-            setStartY(event.clientY);
+            // const paperPosition = getMousePosition(event);
+            // setStartX(paperPosition.x);
+            // setStartY(paperPosition.y);
             setDraggingCircle(true);
         }
     };
@@ -7701,24 +7710,30 @@ var SelectionFrame = function (props) {
         var circleHandleMouseMove = function (event) {
             var mouseEvent = event;
             if (draggingCircle) {
-                var offsetX = mouseEvent.clientX - startX;
-                var offsetY = mouseEvent.clientY - startY;
+                var mousePosition = getMousePosition(mouseEvent);
+                // let offsetX = mouseEvent.clientX - startX;
+                // let offsetY = mouseEvent.clientY - startY;
                 if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
                     return;
                 }
-                setStartX(mouseEvent.clientX);
-                setStartY(mouseEvent.clientY);
+                // setStartX(mouseEvent.clientX);
+                // setStartY(mouseEvent.clientY);
                 setLastMoveTime(Date.now());
-                var newWidth = width;
-                var newHeight = height;
+                var newWidth = mousePosition.x - curX;
+                var newHeight = mousePosition.y - curY;
                 if (propResizability.keepRatio) {
-                    var resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
-                    var increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
-                    offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
-                    offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
-                }
-                newWidth += offsetX;
-                newHeight += offsetY;
+                    var ratio = Math.max(Math.abs(newWidth / width), Math.abs(newHeight / height));
+                    newWidth = newWidth > 0 ? ratio * width : -ratio * width;
+                    newHeight = newHeight > 0 ? ratio * height : -ratio * height;
+                }
+                // if (propResizability.keepRatio) {
+                //     let resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
+                //     const increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
+                //     offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
+                //     offsetY = increasing ? resizingRatio * height : -resizingRatio * height;
+                // }
+                // newWidth += offsetX;
+                // newHeight += offsetY;
                 if (newWidth < MIN_ELEMENT_SIZE) {
                     newWidth = MIN_ELEMENT_SIZE;
                 }
@@ -8276,7 +8291,7 @@ var Text = forwardRef(function (_a, ref) {
 var Text$1 = memo(Text);
 
 var Port1 = 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, parentAbsolutePosition = props.parentAbsolutePosition, 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, 
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, parentAbsolutePosition = props.parentAbsolutePosition, 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, onContextMenu = props.onContextMenu, 
     // onManuallyTriggerRenderHandler,
     renderShape = props.renderShape, children = props.children;
     var textRef = useRef(null);
@@ -8303,7 +8318,7 @@ var Port1 = forwardRef(function (props, ref) {
             return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle }), children));
         }
         else {
-            return React.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: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
+            return React.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: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, onContextMenu: function (e) { return onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(id, e); }, ref: ref, x: x, y: y, positioningAnchor: PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" }, children);
         }
     }, [props]);
     return (React.createElement(React.Fragment, null,
@@ -8654,7 +8669,7 @@ var ElementWrapper = forwardRef(function (_a, ref) {
 });
 
 var Element = forwardRef(function (props, forwardedRef) {
-    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, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, 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, parentAbsolutePosition = props.parentAbsolutePosition, 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated, onPortContextMenu = props.onPortContextMenu; props.onPortsChanged;
     var _a = useState(), selectedPort = _a[0], setSelectedPort = _a[1];
     var _b = useState(), hoveredPort = _b[0], setHoveredPort = _b[1];
     var _c = useState([]), ports = _c[0], setPorts = _c[1];
@@ -8742,24 +8757,39 @@ var Element = forwardRef(function (props, forwardedRef) {
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
             setSelectedPort(undefined);
         });
+        return function () {
+            eventListener.off();
+        };
+    }, []);
+    //Normalize port position
+    var normalizePortPosition = useCallback(function (tempNewPosition) {
+        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
+        return newPosition || tempNewPosition;
+    }, [width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current]);
+    useEffect(function () {
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
+            var _a;
+            var isChanged = false;
             var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
-                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    isChanged = true;
                     _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
-                return __assign(__assign({}, port), { position: newPosition });
+                port.position = newPosition;
+                return port;
             });
             setPorts(newPorts);
+            if (isChanged) {
+                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
+            }
         });
         return function () {
-            eventListener.off();
             eleResizeListener.off();
         };
-    }, [onPortMoved]);
+    }, [onPortMoved, normalizePortPosition, width, height, portMoveableAreas, portSlideRailSVGClassName]);
     //Listen creating element link started, ended.
     useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -8832,11 +8862,6 @@ var Element = forwardRef(function (props, forwardedRef) {
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
     }, []);
-    //Normalize port position
-    var normalizePortPosition = function (tempNewPosition) {
-        var newPosition = correctPortPositionInElement(tempNewPosition, width, height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
-        return newPosition || tempNewPosition;
-    };
     var handlePortMove = function (newX, newY) {
         if (!selectedPort)
             return;
@@ -8983,6 +9008,14 @@ var Element = forwardRef(function (props, forwardedRef) {
         if (someElementLinkStarted)
             setHoveredPort(undefined);
     }, [someElementLinkStarted]);
+    //Handle when context menu is opened on port
+    var handlePortContextMenu = useCallback(function (portId, e) {
+        e.preventDefault();
+        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        if (!port)
+            return;
+        onPortContextMenu === null || onPortContextMenu === void 0 ? void 0 : onPortContextMenu(port, id, e);
+    }, [onPortContextMenu, id]);
     //Get rotate angle of port by port direction is defined.
     var rotatePort = useCallback(function (x, y) {
         // logger.info('calculating port rotation', x, y)
@@ -9023,7 +9056,7 @@ var Element = forwardRef(function (props, forwardedRef) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
+    }, [width, height, portSlideRailSVGClassName, portDirection, getSlideRailSVG, normalizePortPosition]);
     var renderedShape = useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -9047,15 +9080,7 @@ var Element = forwardRef(function (props, forwardedRef) {
                 : React.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, _h;
-                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, 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={p.manuallyTriggerRenderHandler?.bind(p)}
-                    renderShape: p.renderShape },
+                return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, 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, calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, onMouseLeave: handlePortMouseLeave, onContextMenu: handlePortContextMenu, renderShape: p.renderShape },
                     selectedPort && selectedPort.id === p.id && (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.id) !== p.id &&
                         (React.createElement(SelectionFrame, { container: container, targetSVGElement: ((_g = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _g === void 0 ? void 0 : _g.current) || undefined, resizability: {
                                 enabled: false,
@@ -10022,6 +10047,14 @@ var Paper = function (props) {
         }
         setMouseDownedOnPaper(false);
     }, [paperEventEmitter]);
+    var handlePortContextMenu = useCallback(function (port, elementId, e) {
+        var _a;
+        e.preventDefault();
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        if (element) {
+            (_a = props.onPortContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, port, element, e);
+        }
+    }, [props.onPortContextMenu]);
     var handleContextMenu = useCallback(function (elementId, e, ref) {
         var _a;
         e.preventDefault();
@@ -10079,7 +10112,7 @@ var Paper = function (props) {
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
-            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 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, onPortsChanged: handlePortsChanged, 
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 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, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
                 onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -10257,11 +10290,13 @@ var Editor = function (_a) {
     var handlePortsChanged = useCallback(function (ports, element) {
         element.ports = ports;
     }, [editorContext]);
+    var handlePortContextMenu = useCallback(function (port, element, event) {
+        editorContext.onPortContextMenuHandler(port, element, event);
+    }, [editorContext]);
     var handleElementContextMenu = useCallback(function (element, event) {
         editorContext.onElementContextMenuHandler(element, event);
     }, [editorContext]);
     var handleElementMoved = useCallback(function (relativePosition, element) {
-        console.count('SelectionFrame: handleElementMoved');
         editorContext.onElementMovedHandler(relativePosition, element);
     }, [editorContext]);
     var handleElementResized = useCallback(function (size, element) {
@@ -10320,7 +10355,7 @@ var Editor = function (_a) {
     }, [editorContext]);
     return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
         React.createElement(ZoomContextProvider, null,
-            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
+            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
 };
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPointsFromPathData, getPointsFromPathElement, getPortAbsolutePosition, getRectangleCorners, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement, windowsPositionToPaperPosition };