orcasvn-react-diagrams 0.1.65 → 0.1.66

package/dist/cjs/index.js

@@ -484,7 +484,7 @@ function generateUniqueId() {
 }
 
 var Element$2 = /** @class */ (function () {
-    function Element(id, x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
+    function Element(id, x, y, width, height, selectable, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.positionAnchor = exports.PositioningAnchor.TopLeft;
         this._childrenElements = [];
@@ -497,6 +497,7 @@ var Element$2 = /** @class */ (function () {
         this._id = id || generateUniqueId();
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
+        this.selectable = selectable === undefined ? true : selectable;
         this.cssClass = cssClass;
         this.renderShape = renderShape;
         this.texts = texts;
@@ -7722,27 +7723,27 @@ var SelectionFrame = function (props) {
             setHeight(propHeight);
         }
     }, [objectY, propHeight]);
-    var _c = React.useState(objectX !== null && objectX !== void 0 ? objectX : 0), curX = _c[0], setCurX = _c[1];
-    var _d = React.useState(objectY !== null && objectY !== void 0 ? objectY : 0), curY = _d[0], setCurY = _d[1];
-    React.useEffect(function () {
-        if (objectX) {
-            setCurX(objectX);
-        }
-    }, [objectX]);
-    React.useEffect(function () {
-        if (objectY) {
-            setCurY(objectY);
-        }
-    }, [objectY]);
+    // const [curX, setCurX] = React.useState<number>(objectX ?? 0)
+    // const [curY, setCurY] = React.useState<number>(objectY ?? 0)
+    // useEffect(() => {
+    //     if (objectX) {
+    //         setCurX(objectX);
+    //     }
+    // }, [objectX]);
+    // useEffect(() => {
+    //     if (objectY) {
+    //         setCurY(objectY);
+    //     }
+    // }, [objectY]);
     var framePadding = propFramePadding || 0;
     var r = 5;
-    var _e = React.useState(draggingByDefault || false), draggingRect = _e[0], setDraggingRect = _e[1];
-    var _f = React.useState(false), draggingCircle = _f[0], setDraggingCircle = _f[1];
-    var _g = React.useState(0), startX = _g[0], setStartX = _g[1];
-    var _h = React.useState(0), startY = _h[0], setStartY = _h[1];
-    var _j = React.useState(0), xFromMouse = _j[0], setXFromMouse = _j[1];
-    var _k = React.useState(0), yFromMouse = _k[0], setYFromMouse = _k[1];
-    var _l = React.useState(0), lastMoveTime = _l[0], setLastMoveTime = _l[1];
+    var _c = React.useState(draggingByDefault || false), draggingRect = _c[0], setDraggingRect = _c[1];
+    var _d = React.useState(false), draggingCircle = _d[0], setDraggingCircle = _d[1];
+    var _e = React.useState(0), startX = _e[0], setStartX = _e[1];
+    var _f = React.useState(0), startY = _f[0], setStartY = _f[1];
+    var _g = React.useState(0), xFromMouse = _g[0], setXFromMouse = _g[1];
+    var _h = React.useState(0), yFromMouse = _h[0], setYFromMouse = _h[1];
+    var _j = React.useState(0), lastMoveTime = _j[0], setLastMoveTime = _j[1];
     // const { onStartDraggingElement } = useContext(paperEventEmitterContext);
     // useEffect(() => {
     //     const { off } = onStartDraggingElement((element) => {
@@ -7766,8 +7767,8 @@ var SelectionFrame = function (props) {
             setStartX(event.clientX);
             setStartY(event.clientY);
             var mousePosition = getMousePosition(event);
-            var xFromMouse_1 = (curX || 0) - mousePosition.x;
-            var yFromMouse_1 = (curY || 0) - mousePosition.y;
+            var xFromMouse_1 = (objectX || 0) - mousePosition.x;
+            var yFromMouse_1 = (objectY || 0) - mousePosition.y;
             setXFromMouse(xFromMouse_1);
             setYFromMouse(yFromMouse_1);
         }
@@ -7786,8 +7787,8 @@ var SelectionFrame = function (props) {
             var newX = mousePosition.x + xFromMouse;
             var newY = mousePosition.y + yFromMouse;
             if (propOnMove) {
-                setCurX(newX);
-                setCurY(newY);
+                // setCurX(newX)
+                // setCurY(newY)
                 propOnMove(newX, newY);
                 setLastMoveTime(Date.now());
                 setStartX(mouseEvent.clientX);
@@ -7838,8 +7839,8 @@ var SelectionFrame = function (props) {
                 // setStartX(mouseEvent.clientX);
                 // setStartY(mouseEvent.clientY);
                 setLastMoveTime(Date.now());
-                var newWidth = mousePosition.x - curX;
-                var newHeight = mousePosition.y - curY;
+                var newWidth = mousePosition.x - objectX;
+                var newHeight = mousePosition.y - objectY;
                 if (propResizability.keepRatio) {
                     var ratio = Math.max(Math.abs(newWidth / width), Math.abs(newHeight / height));
                     newWidth = newWidth > 0 ? ratio * width : -ratio * width;
@@ -7880,7 +7881,7 @@ var SelectionFrame = function (props) {
             //logging the end of the circle handle mouse move
             logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
         };
-    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, objectX, objectY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -9475,17 +9476,18 @@ function convertElementsToTree(elements) {
     return parsedElementsInTree;
 }
 var Paper = function (props) {
-    var _a = React.useState([]), elements = _a[0], setElements = _a[1];
-    var _b = React.useState([]), elementsInTree = _b[0], setElementsInTree = _b[1];
-    var _c = React.useState(), selectedElement = _c[0], setSelectedElement = _c[1];
-    var _d = React.useState(false), autoEnabledDraggingSelectedElement = _d[0], setAutoEnabledDraggingSelectedElement = _d[1];
-    var _e = React.useState([]), links = _e[0], setLinks = _e[1];
-    var _f = React.useState(), selectedLink = _f[0], setSelectedLink = _f[1];
-    var _g = React.useState(null), tempLink = _g[0], setTempLink = _g[1];
-    var _h = React.useState([]), texts = _h[0], setTexts = _h[1];
-    var _j = React.useState(), selectedText = _j[0], setSelectedText = _j[1];
-    var _k = React.useState(null), selectedElementSVG = _k[0], setSelectedElementSVG = _k[1];
-    var _l = React.useState(false), mouseDownedOnPaper = _l[0], setMouseDownedOnPaper = _l[1];
+    var _a, _b;
+    var _c = React.useState([]), elements = _c[0], setElements = _c[1];
+    var _d = React.useState([]), elementsInTree = _d[0], setElementsInTree = _d[1];
+    var _e = React.useState(), selectedElement = _e[0], setSelectedElement = _e[1];
+    var _f = React.useState(false), autoEnabledDraggingSelectedElement = _f[0], setAutoEnabledDraggingSelectedElement = _f[1];
+    var _g = React.useState([]), links = _g[0], setLinks = _g[1];
+    var _h = React.useState(), selectedLink = _h[0], setSelectedLink = _h[1];
+    var _j = React.useState(null), tempLink = _j[0], setTempLink = _j[1];
+    var _k = React.useState([]), texts = _k[0], setTexts = _k[1];
+    var _l = React.useState(), selectedText = _l[0], setSelectedText = _l[1];
+    var _m = React.useState(null), selectedElementSVG = _m[0], setSelectedElementSVG = _m[1];
+    var _o = React.useState(false), mouseDownedOnPaper = _o[0], setMouseDownedOnPaper = _o[1];
     var paperEventEmitter = React.useContext(paperEventEmitterContext);
     var zoom = useZoomContext().zoom;
     var zoomRef = React.useRef(zoom);
@@ -9495,8 +9497,8 @@ var Paper = function (props) {
     var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
-    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, (_a = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _a === void 0 ? void 0 : _a.x, (_b = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _b === void 0 ? void 0 : _b.y, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     React.useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
@@ -10167,8 +10169,9 @@ var Paper = function (props) {
         }
         else {
             var element = elementsRef.current.find(function (e) { return e.id === elementId; });
-            setSelectedElementSVG(ref);
-            if (element) {
+            // Select the element only if it is selectable
+            if (element && element.selectable) {
+                setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 setAutoEnabledDraggingSelectedElement(false);
                 paperEventEmitter.emitElementSelected(element);
@@ -10236,7 +10239,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, onPortContextMenu: handlePortContextMenu, 
+            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, selectable: element.selectable, 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: manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -10271,6 +10274,13 @@ var Paper = function (props) {
                                 x: newX,
                                 y: newY
                             };
+                            //Call onElementMoving to check if the element should be moved or not
+                            if (onElementMoving) {
+                                var isSkip = onElementMoving(selectedElement, paperPosition);
+                                if (!isSkip) {
+                                    return;
+                                }
+                            }
                             logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(paperPosition)));
                             //Adjust position of element if it should move as a port on parent port area
                             if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
@@ -10327,7 +10337,7 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged, onElementMoving]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -10459,6 +10469,12 @@ var Editor = function (_a) {
         }
         return null;
     }, [editorContext]);
+    var handleOnElementMoving = React.useCallback(function (element, newPaperPosition) {
+        if (editorContext.onElementMovingHandler) {
+            return editorContext.onElementMovingHandler(element, newPaperPosition);
+        }
+        return true;
+    }, [editorContext]);
     var handleOnCreatingPortByLinking = React.useCallback(function (sourceElement, sourcePort, targetElement, position) {
         if (editorContext.onCreatingPortByLinkingHandler) {
             return editorContext.onCreatingPortByLinkingHandler(sourceElement, sourcePort, targetElement, position);
@@ -10479,7 +10495,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, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.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, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;

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

@@ -41,6 +41,7 @@ interface PaperProps {
     manuallyTriggerRenderPortHandler: (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;
+    onElementMoving?: (element: IElement, newPaperPosition: IPosition) => boolean;
     manuallySelectElementHandler?: (callback: (element: IElement | null) => void) => (() => void);
     manuallyTriggerDraggingElementHandler?: (callback: (element: IElement) => void) => (() => void);
     manuallyTriggerStartedLinkingHandler?: (callback: (sourceElement: IElement, sourcePort: IPort) => void) => (() => void);

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

@@ -7,5 +7,5 @@ export default class DiamondElement extends Element {
     resizability: IResizability;
     get size(): ISize;
     set size(value: ISize);
-    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[]);
+    constructor(x: number, y: number, width: number, height: number, selectable?: boolean, cssClass?: string, texts?: IText[], ports?: IPort[]);
 }

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

@@ -7,5 +7,5 @@ import IPosition from '../models/position';
 export default class RectangularFrameElement extends Element {
     resizability: IResizability;
     defaultPortSize?: number | undefined;
-    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[], textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
+    constructor(x: number, y: number, width: number, height: number, selectable?: boolean, cssClass?: string, texts?: IText[], ports?: IPort[], textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
 }

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

@@ -13,6 +13,7 @@ export default interface IEditorContext {
     configuration: IEditorConfiguration;
     onCreatingPortByLinkingHandler?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLinkHandler?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
+    onElementMovingHandler?: (element: IElement, newPaperPosition: IPosition) => boolean;
     onPaperClicked: (callback: (paperPosition: IPosition) => void) => (() => void);
     onPaperMouseMoved: (callback: (paperPosition: IPosition) => void) => (() => void);
     onPaperMouseUp: (callback: (paperPosition: IPosition) => void) => (() => void);

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

@@ -13,6 +13,7 @@ export default interface IElement {
     position: IPosition;
     positionAnchor?: PositioningAnchor;
     size: ISize;
+    selectable?: boolean;
     moveAsPortOnParent?: boolean;
     /**
      * @deprecated This property is deprecated and will be removed in future versions.

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

@@ -12,6 +12,7 @@ interface IElementProps {
     y: number;
     width: number;
     height: number;
+    selectable?: boolean;
     cssClass?: string;
     renderShape?: (props: IElementProps) => JSX.Element;
     children?: React.ReactNode;

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

@@ -15,6 +15,7 @@ export declare class EditorContext implements IEditorContext {
     private _configuration;
     onCreatingPortByLinkingHandler?: ((sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null) | undefined;
     onCreatingLinkHandler?: ((sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null) | undefined;
+    onElementMovingHandler?: (element: IElement, newPaperPosition: IPosition) => boolean;
     constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[], configuration?: IEditorConfiguration);
     private addEventListener;
     get elements(): IElement[];

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

@@ -17,6 +17,7 @@ export default class Element implements IElement {
     protected _size: ISize;
     private _parentElement?;
     private _childrenElements;
+    selectable?: boolean | undefined;
     cssClass?: string;
     moveAsPortOnParent?: boolean | undefined;
     /**
@@ -37,7 +38,7 @@ export default class Element implements IElement {
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
-    constructor(id: string | null, 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?: IElement, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
+    constructor(id: string | null, x: number, y: number, width: number, height: number, selectable?: boolean, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: IElement, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

package/dist/esm/index.js

@@ -480,7 +480,7 @@ function generateUniqueId() {
 }
 
 var Element$2 = /** @class */ (function () {
-    function Element(id, x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
+    function Element(id, x, y, width, height, selectable, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.positionAnchor = PositioningAnchor.TopLeft;
         this._childrenElements = [];
@@ -493,6 +493,7 @@ var Element$2 = /** @class */ (function () {
         this._id = id || generateUniqueId();
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
+        this.selectable = selectable === undefined ? true : selectable;
         this.cssClass = cssClass;
         this.renderShape = renderShape;
         this.texts = texts;
@@ -7718,27 +7719,27 @@ var SelectionFrame = function (props) {
             setHeight(propHeight);
         }
     }, [objectY, propHeight]);
-    var _c = React.useState(objectX !== null && objectX !== void 0 ? objectX : 0), curX = _c[0], setCurX = _c[1];
-    var _d = React.useState(objectY !== null && objectY !== void 0 ? objectY : 0), curY = _d[0], setCurY = _d[1];
-    useEffect(function () {
-        if (objectX) {
-            setCurX(objectX);
-        }
-    }, [objectX]);
-    useEffect(function () {
-        if (objectY) {
-            setCurY(objectY);
-        }
-    }, [objectY]);
+    // const [curX, setCurX] = React.useState<number>(objectX ?? 0)
+    // const [curY, setCurY] = React.useState<number>(objectY ?? 0)
+    // useEffect(() => {
+    //     if (objectX) {
+    //         setCurX(objectX);
+    //     }
+    // }, [objectX]);
+    // useEffect(() => {
+    //     if (objectY) {
+    //         setCurY(objectY);
+    //     }
+    // }, [objectY]);
     var framePadding = propFramePadding || 0;
     var r = 5;
-    var _e = React.useState(draggingByDefault || false), draggingRect = _e[0], setDraggingRect = _e[1];
-    var _f = React.useState(false), draggingCircle = _f[0], setDraggingCircle = _f[1];
-    var _g = React.useState(0), startX = _g[0], setStartX = _g[1];
-    var _h = React.useState(0), startY = _h[0], setStartY = _h[1];
-    var _j = useState(0), xFromMouse = _j[0], setXFromMouse = _j[1];
-    var _k = useState(0), yFromMouse = _k[0], setYFromMouse = _k[1];
-    var _l = React.useState(0), lastMoveTime = _l[0], setLastMoveTime = _l[1];
+    var _c = React.useState(draggingByDefault || false), draggingRect = _c[0], setDraggingRect = _c[1];
+    var _d = React.useState(false), draggingCircle = _d[0], setDraggingCircle = _d[1];
+    var _e = React.useState(0), startX = _e[0], setStartX = _e[1];
+    var _f = React.useState(0), startY = _f[0], setStartY = _f[1];
+    var _g = useState(0), xFromMouse = _g[0], setXFromMouse = _g[1];
+    var _h = useState(0), yFromMouse = _h[0], setYFromMouse = _h[1];
+    var _j = React.useState(0), lastMoveTime = _j[0], setLastMoveTime = _j[1];
     // const { onStartDraggingElement } = useContext(paperEventEmitterContext);
     // useEffect(() => {
     //     const { off } = onStartDraggingElement((element) => {
@@ -7762,8 +7763,8 @@ var SelectionFrame = function (props) {
             setStartX(event.clientX);
             setStartY(event.clientY);
             var mousePosition = getMousePosition(event);
-            var xFromMouse_1 = (curX || 0) - mousePosition.x;
-            var yFromMouse_1 = (curY || 0) - mousePosition.y;
+            var xFromMouse_1 = (objectX || 0) - mousePosition.x;
+            var yFromMouse_1 = (objectY || 0) - mousePosition.y;
             setXFromMouse(xFromMouse_1);
             setYFromMouse(yFromMouse_1);
         }
@@ -7782,8 +7783,8 @@ var SelectionFrame = function (props) {
             var newX = mousePosition.x + xFromMouse;
             var newY = mousePosition.y + yFromMouse;
             if (propOnMove) {
-                setCurX(newX);
-                setCurY(newY);
+                // setCurX(newX)
+                // setCurY(newY)
                 propOnMove(newX, newY);
                 setLastMoveTime(Date.now());
                 setStartX(mouseEvent.clientX);
@@ -7834,8 +7835,8 @@ var SelectionFrame = function (props) {
                 // setStartX(mouseEvent.clientX);
                 // setStartY(mouseEvent.clientY);
                 setLastMoveTime(Date.now());
-                var newWidth = mousePosition.x - curX;
-                var newHeight = mousePosition.y - curY;
+                var newWidth = mousePosition.x - objectX;
+                var newHeight = mousePosition.y - objectY;
                 if (propResizability.keepRatio) {
                     var ratio = Math.max(Math.abs(newWidth / width), Math.abs(newHeight / height));
                     newWidth = newWidth > 0 ? ratio * width : -ratio * width;
@@ -7876,7 +7877,7 @@ var SelectionFrame = function (props) {
             //logging the end of the circle handle mouse move
             logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
         };
-    }, [draggingCircle, width, height, curX, curY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
+    }, [draggingCircle, width, height, objectX, objectY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
@@ -9471,17 +9472,18 @@ function convertElementsToTree(elements) {
     return parsedElementsInTree;
 }
 var Paper = function (props) {
-    var _a = React.useState([]), elements = _a[0], setElements = _a[1];
-    var _b = React.useState([]), elementsInTree = _b[0], setElementsInTree = _b[1];
-    var _c = React.useState(), selectedElement = _c[0], setSelectedElement = _c[1];
-    var _d = React.useState(false), autoEnabledDraggingSelectedElement = _d[0], setAutoEnabledDraggingSelectedElement = _d[1];
-    var _e = useState([]), links = _e[0], setLinks = _e[1];
-    var _f = useState(), selectedLink = _f[0], setSelectedLink = _f[1];
-    var _g = useState(null), tempLink = _g[0], setTempLink = _g[1];
-    var _h = useState([]), texts = _h[0], setTexts = _h[1];
-    var _j = useState(), selectedText = _j[0], setSelectedText = _j[1];
-    var _k = useState(null), selectedElementSVG = _k[0], setSelectedElementSVG = _k[1];
-    var _l = React.useState(false), mouseDownedOnPaper = _l[0], setMouseDownedOnPaper = _l[1];
+    var _a, _b;
+    var _c = React.useState([]), elements = _c[0], setElements = _c[1];
+    var _d = React.useState([]), elementsInTree = _d[0], setElementsInTree = _d[1];
+    var _e = React.useState(), selectedElement = _e[0], setSelectedElement = _e[1];
+    var _f = React.useState(false), autoEnabledDraggingSelectedElement = _f[0], setAutoEnabledDraggingSelectedElement = _f[1];
+    var _g = useState([]), links = _g[0], setLinks = _g[1];
+    var _h = useState(), selectedLink = _h[0], setSelectedLink = _h[1];
+    var _j = useState(null), tempLink = _j[0], setTempLink = _j[1];
+    var _k = useState([]), texts = _k[0], setTexts = _k[1];
+    var _l = useState(), selectedText = _l[0], setSelectedText = _l[1];
+    var _m = useState(null), selectedElementSVG = _m[0], setSelectedElementSVG = _m[1];
+    var _o = React.useState(false), mouseDownedOnPaper = _o[0], setMouseDownedOnPaper = _o[1];
     var paperEventEmitter = useContext(paperEventEmitterContext);
     var zoom = useZoomContext().zoom;
     var zoomRef = useRef(zoom);
@@ -9491,8 +9493,8 @@ var Paper = function (props) {
     var linksRef = useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    var selectedElementAbsPosition = useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
-    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    var selectedElementAbsPosition = useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement, (_a = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _a === void 0 ? void 0 : _a.x, (_b = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.position) === null || _b === void 0 ? void 0 : _b.y, selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size]);
+    var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onPortsChanged = props.onPortsChanged, onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     useEffect(function () {
         zoomRef.current = zoom;
     }, [zoom]);
@@ -10163,8 +10165,9 @@ var Paper = function (props) {
         }
         else {
             var element = elementsRef.current.find(function (e) { return e.id === elementId; });
-            setSelectedElementSVG(ref);
-            if (element) {
+            // Select the element only if it is selectable
+            if (element && element.selectable) {
+                setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 setAutoEnabledDraggingSelectedElement(false);
                 paperEventEmitter.emitElementSelected(element);
@@ -10232,7 +10235,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, onPortContextMenu: handlePortContextMenu, 
+            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, selectable: element.selectable, 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: manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -10267,6 +10270,13 @@ var Paper = function (props) {
                                 x: newX,
                                 y: newY
                             };
+                            //Call onElementMoving to check if the element should be moved or not
+                            if (onElementMoving) {
+                                var isSkip = onElementMoving(selectedElement, paperPosition);
+                                if (!isSkip) {
+                                    return;
+                                }
+                            }
                             logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(paperPosition)));
                             //Adjust position of element if it should move as a port on parent port area
                             if (selectedElement.moveAsPortOnParent && selectedElement.parentElement) {
@@ -10323,7 +10333,7 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged]);
+    }, [manuallyTriggerRenderPortHandler, handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, selectedElement, selectedElementSVG, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, zoom, autoEnabledDraggingSelectedElement, elements, getChildOfElement, paperEventEmitter, onElementResized, onElementsChanged, onElementMoved, onElementMouseDown, onElementMouseUp, onLinksChanged, onElementMoving]);
     var ElementsInTree = useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -10455,6 +10465,12 @@ var Editor = function (_a) {
         }
         return null;
     }, [editorContext]);
+    var handleOnElementMoving = useCallback(function (element, newPaperPosition) {
+        if (editorContext.onElementMovingHandler) {
+            return editorContext.onElementMovingHandler(element, newPaperPosition);
+        }
+        return true;
+    }, [editorContext]);
     var handleOnCreatingPortByLinking = useCallback(function (sourceElement, sourcePort, targetElement, position) {
         if (editorContext.onCreatingPortByLinkingHandler) {
             return editorContext.onCreatingPortByLinkingHandler(sourceElement, sourcePort, targetElement, position);
@@ -10475,7 +10491,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, onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.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, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.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, automationAddPointsToLink, 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 };