orcasvn-react-diagrams 0.1.58 → 0.1.60

package/dist/cjs/index.js

@@ -821,6 +821,7 @@ var EVENT_MANUALLY_SELECT_ELEMENT = 'manuallySelectElement';
 var EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT = 'manuallyTriggerDraggingElement';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
+var EVENT_MANUALLY_TRIGGER_STARTED_LINKING = 'manuallyTriggerStartedLinking';
 var EditorContext = /** @class */ (function () {
     function EditorContext(elements, links, texts, configuration) {
         var _this = this;
@@ -1064,27 +1065,38 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.triggerRenderElement = function (elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENT, elementId);
     };
-    EditorContext.prototype.onManuallyTriggerRenderElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
     };
-    EditorContext.prototype.onManuallyTriggerRenderPort = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderPortHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_PORT, callback);
     };
     EditorContext.prototype.setSelectedElement = function (element) {
         this._eventEmitter.emit(EVENT_MANUALLY_SELECT_ELEMENT, element);
     };
-    EditorContext.prototype.onManuallySelectElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallySelectElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_SELECT_ELEMENT, callback);
     };
     EditorContext.prototype.triggerDraggingElement = function (element) {
         this._eventEmitter.emit(EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT, element);
     };
-    EditorContext.prototype.onManuallyTriggerDraggingElement = function (callback) {
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerDraggingElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT, callback);
     };
+    EditorContext.prototype.triggerStartedLinking = function (sourceElement, sourcePort) {
+        this._eventEmitter.emit(EVENT_MANUALLY_TRIGGER_STARTED_LINKING, sourceElement, sourcePort);
+    };
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerStartedLinkingHandler = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_TRIGGER_STARTED_LINKING, callback);
+    };
     return EditorContext;
 }());
 
@@ -8437,12 +8449,11 @@ var IElementLink = function (_a) {
     var _g = React.useState(path), pathStr = _g[0], setPathStr = _g[1];
     var _h = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _h[0], setPoints = _h[1];
     var _j = React.useState(false), isDragging = _j[0], setIsDragging = _j[1];
-    var _k = React.useState(), draggingPointIndex = _k[0], setDraggingPointIndex = _k[1];
-    var _l = React.useState({
+    var _k = React.useState({
         current: null,
-    }), selectedLabelRef = _l[0], setSelectedLabelRef = _l[1];
-    var _m = React.useState(false), isSelectedLink = _m[0], setIsSelectedLink = _m[1];
-    var _o = React.useContext(paperEventEmitterContext), onPaperClicked = _o.onPaperClicked, onElementSelected = _o.onElementSelected;
+    }), selectedLabelRef = _k[0], setSelectedLabelRef = _k[1];
+    var _l = React.useState(false), isSelectedLink = _l[0], setIsSelectedLink = _l[1];
+    var _m = React.useContext(paperEventEmitterContext), onPaperClicked = _m.onPaperClicked, onElementSelected = _m.onElementSelected;
     var zoom = useZoomContext().zoom;
     var pathRef = React.useRef(null);
     var labelRef = React.useRef(null);
@@ -8450,27 +8461,18 @@ var IElementLink = function (_a) {
     var targetLabelRef = React.useRef(null);
     var isFirstRender = React.useRef(true);
     var onPointsChangedRef = React.useRef();
-    var lastUpdatedPoints = React.useRef(Date.now());
+    var draggingPointIndexRef = React.useRef(); // Ref to store the index of the point being dragged. No need to store it in state, as it is only used during the drag operation.
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
     var markerStartPosition;
     var markerEndPosition;
     var centerPathPosition = undefined;
-    // Throttle pointsProp updates to avoid excessive renders
+    // Initialize points from props
     React.useEffect(function () {
-        var delay = 100; // 100ms delay
-        var timeoutId = setTimeout(function () {
-            var now = Date.now();
-            if (now - lastUpdatedPoints.current >= delay) {
-                setPoints(pointsProp || []);
-                lastUpdatedPoints.current = now;
-            }
-        }, delay - (Date.now() - lastUpdatedPoints.current));
-        return function () {
-            clearTimeout(timeoutId);
-        };
+        setPoints(pointsProp || []);
         // Use JSON.stringify for deep comparison
     }, [JSON.stringify(pointsProp)]);
+    // Reset selected label when paper is clicked
     React.useEffect(function () {
         var paperClickListener = onPaperClicked(function () {
             setSelectedLabelRef({
@@ -8483,6 +8485,7 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
+    // Reset selected label when an element is selected
     React.useEffect(function () {
         var elementSelectedListener = onElementSelected(function () {
             setSelectedLabelRef({
@@ -8499,6 +8502,7 @@ var IElementLink = function (_a) {
     React.useEffect(function () {
         onPointsChangedRef.current = onPointsChanged;
     }, [onPointsChanged]);
+    // Notify parent component when points change
     React.useEffect(function () {
         var _a;
         if (isFirstRender.current) {
@@ -8506,7 +8510,7 @@ var IElementLink = function (_a) {
             return;
         }
         (_a = onPointsChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onPointsChangedRef, points, id);
-    }, [points]);
+    }, [JSON.stringify(points)]);
     React.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined, false);
@@ -8517,42 +8521,9 @@ var IElementLink = function (_a) {
             return;
         onPathChanged === null || onPathChanged === void 0 ? void 0 : onPathChanged(pathStr, id);
     }, [pathStr, id]);
-    React.useLayoutEffect(function () {
-        //handle when creating and moving point
-        var handleMouseMove = function (ev) {
-            var mouseEvent = ev;
-            if (isDragging && draggingPointIndex !== undefined && container) {
-                var paperPosition_1 = windowsPositionToPaperPosition({
-                    x: mouseEvent.clientX,
-                    y: mouseEvent.clientY
-                }, container, zoom);
-                setPoints(function (prev) {
-                    var temp = __spreadArray([], prev, true);
-                    temp[draggingPointIndex] = paperPosition_1;
-                    return temp;
-                });
-            }
-        };
-        var mouseUp = function () {
-            setDraggingPointIndex(undefined);
-            setIsDragging(false);
-        };
-        container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
-        container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', mouseUp);
-        return function () {
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', mouseUp);
-        };
-    }, [container, isDragging, draggingPointIndex, zoom]);
-    var handleMouseDownOnPath = function (ev) {
-        ev.preventDefault();
-        //add point if click on path
-        setIsDragging(true);
+    var addMovingPoint = function (mouseDownedOnPaperPos, points) {
         //Position of the new point on the path
-        var paperPosition = windowsPositionToPaperPosition({
-            x: ev.clientX,
-            y: ev.clientY
-        }, container, zoom);
+        var paperPosition = mouseDownedOnPaperPos;
         var newPoints = addPointToList(paperPosition, __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false), pathRef.current);
         var pointsWithoutStartEndPoint = newPoints.slice(1, newPoints.length - 1);
         var addedIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
@@ -8595,8 +8566,49 @@ var IElementLink = function (_a) {
         }
         //Find new index of added point
         _draggingPointIndex = pointsWithoutStartEndPoint.findIndex(function (p) { return p.x === paperPosition.x && p.y === paperPosition.y; });
-        setDraggingPointIndex(_draggingPointIndex);
-        setPoints(pointsWithoutStartEndPoint);
+        return {
+            draggingPointIndex: _draggingPointIndex,
+            points: pointsWithoutStartEndPoint,
+        };
+    };
+    React.useEffect(function () {
+        //handle when creating and moving point
+        var handleMouseMove = function (ev) {
+            var mouseEvent = ev;
+            if (isDragging && container) {
+                var paperPosition_1 = windowsPositionToPaperPosition({
+                    x: mouseEvent.clientX,
+                    y: mouseEvent.clientY
+                }, container, zoom);
+                if (draggingPointIndexRef.current !== undefined) { // If dragging a point
+                    setPoints(function (prev) {
+                        var temp = __spreadArray([], prev, true);
+                        temp[draggingPointIndexRef.current] = paperPosition_1;
+                        return temp;
+                    });
+                }
+                else { // If adding a new point
+                    var _a = addMovingPoint(paperPosition_1, points), newDraggingPointIndex = _a.draggingPointIndex, newPoints = _a.points;
+                    draggingPointIndexRef.current = newDraggingPointIndex;
+                    setPoints(newPoints);
+                }
+            }
+        };
+        var mouseUp = function () {
+            draggingPointIndexRef.current = undefined;
+            setIsDragging(false);
+        };
+        container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
+        container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', mouseUp);
+        return function () {
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', mouseUp);
+        };
+    }, [container, isDragging, zoom, points]);
+    var handleMouseDownOnPath = function (ev) {
+        ev.preventDefault();
+        //add point if click on path
+        setIsDragging(true);
     };
     var handleLabelMoved = function (newX, newY) {
         if (!onLabelMoved)
@@ -8826,6 +8838,17 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             })) !== null && _b !== void 0 ? _b : [];
         });
     }, [props.ports]);
+    //Normalize port position when element is resized
+    React.useEffect(function () {
+        var newPorts = portsRef.current.map(function (port) {
+            var newPosition = normalizePortPosition(port.position);
+            onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+            _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
+            port.position = newPosition;
+            return port;
+        });
+        setPorts(newPorts);
+    }, [width, height]);
     //Listen trigger of Delete key, handle delete port is selected
     React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -9465,27 +9488,28 @@ var Paper = function (props) {
         setTexts(props.texts);
     }, [props.texts]);
     React.useEffect(function () {
-        var off = props.onManuallyTriggerRenderElement(function (elementId) {
-            setElements(__spreadArray([], elements, true));
+        var off = props.manuallyTriggerRenderElementHandler(function (elementId) {
+            var newElements = __spreadArray([], elements, true);
+            setElements(newElements);
             if (props.onElementsChanged) {
-                props.onElementsChanged(__spreadArray([], elements, true));
+                props.onElementsChanged(newElements);
             }
         });
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements, selectedElement]);
+    }, [props.manuallyTriggerRenderElementHandler, props.onElementsChanged, elements, selectedElement]);
     React.useEffect(function () {
         var _a, _b;
         var offs = [];
-        offs.push((_a = props.onManuallySelectElement) === null || _a === void 0 ? void 0 : _a.call(props, function (element) {
+        offs.push((_a = props.manuallySelectElementHandler) === null || _a === void 0 ? void 0 : _a.call(props, function (element) {
             var _a;
             setSelectedElement(element || undefined);
             if (element) {
                 (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
             }
         }));
-        offs.push((_b = props.onManuallyTriggerDraggingElement) === null || _b === void 0 ? void 0 : _b.call(props, function (element) {
+        offs.push((_b = props.manuallyTriggerDraggingElementHandler) === null || _b === void 0 ? void 0 : _b.call(props, function (element) {
             var _a;
             setSelectedElement(element);
             (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
@@ -9494,7 +9518,24 @@ var Paper = function (props) {
         return function () {
             offs.forEach(function (off) { return off(); });
         };
-    }, [props.onManuallySelectElement, props.onManuallyTriggerDraggingElement, props.onElementSelected]);
+    }, [props.manuallySelectElementHandler, props.manuallyTriggerDraggingElementHandler, props.onElementSelected]);
+    React.useEffect(function () {
+        if (props.manuallyTriggerStartedLinkingHandler) {
+            var off_1 = props.manuallyTriggerStartedLinkingHandler(function (sourceElement, sourcePort) {
+                var newLink = {
+                    id: generateUniqueId(),
+                    points: [],
+                    sourceElement: sourceElement,
+                    sourcePort: sourcePort,
+                };
+                setTempLink(newLink);
+                paperEventEmitter.emitElementLinkStarted(newLink);
+            });
+            return function () {
+                off_1();
+            };
+        }
+    }, [props.manuallyTriggerStartedLinkingHandler]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
@@ -10166,7 +10207,7 @@ var Paper = function (props) {
         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, 
                 // 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 },
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.manuallyTriggerRenderPortHandler, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
                 !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
                     React.createElement(SelectionFrame, { key: selectedElement.id, container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
@@ -10198,18 +10239,18 @@ var Paper = function (props) {
                                 return;
                             var oldPosition = __assign({}, selectedElement.position);
                             // Relative position to the paper container
-                            var newPosition = {
+                            var paperPosition = {
                                 x: newX,
                                 y: newY
                             };
-                            logger.info("Element ".concat(selectedElement.id, " is dragging to position ").concat(JSON.stringify(newPosition)));
+                            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) {
-                                newPosition = adjustElementPositionOnParentPortArea(selectedElement, newPosition, true);
-                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, true);
+                                paperPosition = adjustElementPositionOnParentPortArea(selectedElement, paperPosition, true);
+                                updateElementPosition(selectedElement, paperPosition.x, paperPosition.y, true);
                             }
                             else {
-                                updateElementPosition(selectedElement, newPosition.x, newPosition.y, false);
+                                updateElementPosition(selectedElement, paperPosition.x, paperPosition.y, false);
                             }
                             //let newElementPosition = updateElementPosition(selectedElement, newPosition.x, newPosition.y, true)
                             var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
@@ -10217,8 +10258,8 @@ var Paper = function (props) {
                             // Start updating the position of links connected to the selected element
                             var childElements = getChildOfElement(selectedElement);
                             var elementIds = __spreadArray(__spreadArray([], childElements.map(function (e) { return e.id; }), true), [selectedElement.id], false);
-                            var offsetX = newPosition.x - oldPosition.x;
-                            var offsetY = newPosition.y - oldPosition.y;
+                            var offsetX = selectedElement.position.x - oldPosition.x;
+                            var offsetY = selectedElement.position.y - oldPosition.y;
                             // Update position of all points of links that are connected to the selected element
                             var newLinks = linksRef.current.map(function (link) {
                                 var isUpdate = elementIds.includes(link.sourceElement.id) && elementIds.includes(link.targetElement.id);
@@ -10235,8 +10276,8 @@ var Paper = function (props) {
                             //Set state to re-render UI with new position
                             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
                             if (props.onElementMoved) {
-                                console.log('onElementMoved', selectedElement.position, newPosition);
-                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, newPosition);
+                                console.log('onElementMoved', selectedElement.position, paperPosition);
+                                props.onElementMoved(selectedElement.position, selectedElement, indexSelectedElement, paperPosition);
                             }
                             paperEventEmitter.emitElementMoved(selectedElement, oldPosition, selectedElement.position);
                             setMouseDownedOnPaper(false);
@@ -10258,12 +10299,12 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [handlePortsChanged, handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition, zoom]);
+    }, [handleElementClicked, handleContextMenu, handleMouseUp, handleMouseDown, handleMouseMove, handleMouseLeave, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handlePortsChanged, handlePortContextMenu, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, props, 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]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
         });
-    }, [elementsInTree, renderElementInTree, selectedElement, zoom]);
+    }, [elementsInTree, renderElementInTree]);
     return (React.createElement("div", { style: { position: "relative" } },
         React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
         React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
@@ -10407,7 +10448,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, 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), onManuallySelectElement: editorContext.onManuallySelectElement.bind(editorContext), onManuallyTriggerDraggingElement: editorContext.onManuallyTriggerDraggingElement.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, 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

@@ -37,12 +37,13 @@ interface PaperProps {
     onLinksChanged?: (links: IElementLink[]) => void;
     onTextSelected?: (text: IText) => void;
     onTextsChanged?: (texts: IPaperText[]) => void;
-    onManuallyTriggerRenderElement: (callback: (elementId: string) => void) => () => void;
-    onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => () => void;
+    manuallyTriggerRenderElementHandler: (callback: (elementId: string) => void) => () => void;
+    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;
-    onManuallySelectElement?: (callback: (element: IElement | null) => void) => (() => void);
-    onManuallyTriggerDraggingElement?: (callback: (element: IElement) => void) => (() => void);
+    manuallySelectElementHandler?: (callback: (element: IElement | null) => void) => (() => void);
+    manuallyTriggerDraggingElementHandler?: (callback: (element: IElement) => void) => (() => void);
+    manuallyTriggerStartedLinkingHandler?: (callback: (sourceElement: IElement, sourcePort: IPort) => void) => (() => void);
 }
 declare const _default: React.NamedExoticComponent<PaperProps>;
 export default _default;

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

@@ -0,0 +1,2 @@
+import { EditorContext } from "../models/implementations/EditorContext";
+export declare const editorContext: EditorContext;

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

@@ -42,11 +42,8 @@ export default interface IEditorContext {
     addText(text: IPaperText): void;
     removeText(textId: string): void;
     setSelectedElement: (element: IElement | null) => void;
-    onManuallySelectElement: (callback: (element: IElement | null) => void) => (() => void);
     triggerDraggingElement: (element: IElement) => void;
-    onManuallyTriggerDraggingElement: (callback: (element: IElement) => void) => (() => void);
     triggerRenderElement(elementId: string): void;
     triggerRenderPort(portId: string, elementId: string): void;
-    onManuallyTriggerRenderElement: (callback: (elementId: string) => void) => (() => void);
-    onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => (() => void);
+    triggerStartedLinking(sourceElement: IElement, sourcePort: IPort): void;
 }

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

@@ -53,11 +53,8 @@ export declare class EditorContext implements IEditorContext {
     onLinkSelected(callback: (link: IElementLink) => void): () => void;
     onTextSelected(callback: (text: IText) => void): () => void;
     triggerRenderElement(elementId: string): void;
-    onManuallyTriggerRenderElement(callback: (elementId: string) => void): () => void;
     triggerRenderPort(portId: string, elementId: string): void;
-    onManuallyTriggerRenderPort(callback: (portId: string, elementId: string) => void): () => void;
     setSelectedElement(element: IElement | null): void;
-    onManuallySelectElement(callback: (element: IElement | null) => void): () => void;
     triggerDraggingElement(element: IElement): void;
-    onManuallyTriggerDraggingElement(callback: (element: IElement) => void): () => void;
+    triggerStartedLinking(sourceElement: IElement, sourcePort: IPort): void;
 }