orcasvn-react-diagrams 0.1.57 → 0.1.59

package/dist/cjs/index.js

@@ -817,6 +817,8 @@ var EVENT_ELEMENT_MOUSE_MOVE = 'elementMouseMove';
 var EVENT_ELEMENT_MOUSE_LEAVE = 'elementMouseLeave';
 var EVENT_ELEMENT_MOUSE_UP = 'elementMouseUp';
 var EVENT_ELEMENT_MOUSE_DOWN = 'elementMouseDown';
+var EVENT_MANUALLY_SELECT_ELEMENT = 'manuallySelectElement';
+var EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT = 'manuallyTriggerDraggingElement';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
@@ -1071,6 +1073,18 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onManuallyTriggerRenderPort = 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) {
+        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) {
+        return this.addEventListener(EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT, callback);
+    };
     return EditorContext;
 }());
 
@@ -1215,6 +1229,7 @@ var EVENT_NAME = {
     ELEMENT_DELETED: 'element_deleted',
     ELEMENT_SELECTED: 'element_selected',
     COMMAND_RENDER_ELEMENT: 'command_render_element',
+    START_DRAGGING_ELEMENT: 'start_dragging_element',
     //PORT
     PORT_MOUSE_DOWN: 'port_mouse_down',
     PORT_MOUSE_UP: 'port_mouse_up',
@@ -7599,10 +7614,71 @@ var getRotatedSVGBBox = function (svgElement) {
     }
 };
 
+//Automatically add points on the link so that the link does not cross elements, default maximum 10 points
+var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
+    if (limitPoint === void 0) { limitPoint = 10; }
+    if (!eleLink.targetElement || !eleLink.targetPort) {
+        throw new Error("Target element is not found in element link");
+    }
+    var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
+    var absolutePositionOfSourceEle = getAbsolutePosition(sourceElement);
+    var absolutePositionOfTargetEle = getAbsolutePosition(targetElement);
+    var sourcePosition = {
+        x: absolutePositionOfSourceEle.x + sourcePort.position.x,
+        y: absolutePositionOfSourceEle.y + sourcePort.position.y
+    };
+    var targetPosition = {
+        x: absolutePositionOfTargetEle.x + targetPort.position.x,
+        y: absolutePositionOfTargetEle.y + targetPort.position.y
+    };
+    var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
+    var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
+    var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
+        [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
+        [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
+        [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
+        [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
+    ]);
+    var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
+        [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
+        [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
+        [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
+        [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
+    ]);
+    var numberOfPoints = 0;
+    //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
+    function generatePositions(sourcePosition, targetPosition, elements) {
+        var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
+        //If there is no intersection point, then the line connecting the two points does not intersect any element.
+        if (!firstIntersection || limitPoint === numberOfPoints)
+            return [];
+        var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
+        //Calculate to create a replacement point
+        var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
+        if (!replacementPosition) {
+            replacementPosition = {
+                x: nearestIntersection.x,
+                y: nearestIntersection.y
+            };
+        }
+        //Increases the number of points found by 1 
+        numberOfPoints += 1;
+        //Create points with the starting point being the sourcePosition and the ending point being the newly created point
+        var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
+        //Create points with the starting point being the new newly created point and the ending point being the targetPosition
+        var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
+        return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
+    }
+    var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
+    eleLink.points = points;
+    return eleLink;
+};
+
+// import { paperEventEmitterContext } from '../../contexts/paperEventEmitterContext';
 var SelectionFrame = function (props) {
     var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, objectX = props.objectX, objectY = props.objectY, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMouseDown = props.onMouseDown, propOnMouseUp = props.onMouseUp, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor, zoom = props.zoom;
+    propMovingRate = props.movingRate, propOnMouseDown = props.onMouseDown, propOnMouseUp = props.onMouseUp, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, draggingByDefault = props.draggingByDefault, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor, zoom = props.zoom;
     var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
     var _a = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _a[0], setWidth = _a[1];
     var _b = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _b[0], setHeight = _b[1];
@@ -7630,13 +7706,22 @@ var SelectionFrame = function (props) {
     }, [objectY]);
     var framePadding = propFramePadding || 0;
     var r = 5;
-    var _e = React.useState(false), draggingRect = _e[0], setDraggingRect = _e[1];
+    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];
+    // const { onStartDraggingElement } = useContext(paperEventEmitterContext);
+    // useEffect(() => {
+    //     const { off } = onStartDraggingElement((element) => {
+    //         setDraggingRect(true);
+    //     });
+    //     return () => {
+    //         off();
+    //     }
+    // }, [])
     var getMousePosition = function (event) {
         var position = windowsPositionToPaperPosition({
             x: event.clientX,
@@ -9300,65 +9385,6 @@ function useKeyboardCommands(_a) {
     }, [element]);
 }
 
-//Automatically add points on the link so that the link does not cross elements, default maximum 10 points
-var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
-    if (!eleLink.targetElement || !eleLink.targetPort) {
-        throw new Error("Target element is not found in element link");
-    }
-    var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
-    var absolutePositionOfSourceEle = getAbsolutePosition(sourceElement);
-    var absolutePositionOfTargetEle = getAbsolutePosition(targetElement);
-    var sourcePosition = {
-        x: absolutePositionOfSourceEle.x + sourcePort.position.x,
-        y: absolutePositionOfSourceEle.y + sourcePort.position.y
-    };
-    var targetPosition = {
-        x: absolutePositionOfTargetEle.x + targetPort.position.x,
-        y: absolutePositionOfTargetEle.y + targetPort.position.y
-    };
-    var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
-    var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
-    var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
-        [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
-        [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
-        [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
-        [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
-    ]);
-    var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
-        [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
-        [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
-        [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
-        [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
-    ]);
-    var numberOfPoints = 0;
-    //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
-    function generatePositions(sourcePosition, targetPosition, elements) {
-        var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
-        //If there is no intersection point, then the line connecting the two points does not intersect any element.
-        if (!firstIntersection || limitPoint === numberOfPoints)
-            return [];
-        var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
-        //Calculate to create a replacement point
-        var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
-        if (!replacementPosition) {
-            replacementPosition = {
-                x: nearestIntersection.x,
-                y: nearestIntersection.y
-            };
-        }
-        //Increases the number of points found by 1 
-        numberOfPoints += 1;
-        //Create points with the starting point being the sourcePosition and the ending point being the newly created point
-        var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
-        //Create points with the starting point being the new newly created point and the ending point being the targetPosition
-        var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
-        return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
-    }
-    var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
-    eleLink.points = points;
-    return eleLink;
-};
-
 function adjustElementPositionOnParentPortArea(element, toBeAdjustedPosition, isAbsolutePosition) {
     var _a;
     if (isAbsolutePosition === void 0) { isAbsolutePosition = false; }
@@ -9408,13 +9434,14 @@ 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([]), links = _d[0], setLinks = _d[1];
-    var _e = React.useState(), selectedLink = _e[0], setSelectedLink = _e[1];
-    var _f = React.useState(null), tempLink = _f[0], setTempLink = _f[1];
-    var _g = React.useState([]), texts = _g[0], setTexts = _g[1];
-    var _h = React.useState(), selectedText = _h[0], setSelectedText = _h[1];
-    var _j = React.useState(null), selectedElementSVG = _j[0], setSelectedElementSVG = _j[1];
-    var _k = React.useState(false), mouseDownedOnPaper = _k[0], setMouseDownedOnPaper = _k[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 paperEventEmitter = React.useContext(paperEventEmitterContext);
     var zoom = useZoomContext().zoom;
     var zoomRef = React.useRef(zoom);
@@ -9448,6 +9475,26 @@ var Paper = function (props) {
             off();
         };
     }, [props.onManuallyTriggerRenderElement, 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) {
+            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) {
+            var _a;
+            setSelectedElement(element);
+            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, element);
+            setAutoEnabledDraggingSelectedElement(true);
+        }));
+        return function () {
+            offs.forEach(function (off) { return off(); });
+        };
+    }, [props.onManuallySelectElement, props.onManuallyTriggerDraggingElement, props.onElementSelected]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
@@ -10046,6 +10093,7 @@ var Paper = function (props) {
             setSelectedElementSVG(ref);
             if (element) {
                 setSelectedElement(element);
+                setAutoEnabledDraggingSelectedElement(false);
                 paperEventEmitter.emitElementSelected(element);
             }
         }
@@ -10121,10 +10169,10 @@ var Paper = function (props) {
                 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),
                 !!paperContainerRef.current && !!selectedElement && selectedElement.id === element.id &&
-                    React.createElement(SelectionFrame, { container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
+                    React.createElement(SelectionFrame, { key: selectedElement.id, container: paperContainerRef.current, targetSVGElement: selectedElementSVG || undefined, resizability: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.resizability) || {
                             enabled: true,
                             keepRatio: true
-                        }, objectX: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, objectY: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width, height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height, zoom: zoom, 
+                        }, objectX: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x, objectY: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y, width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width, height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height, zoom: zoom, draggingByDefault: autoEnabledDraggingSelectedElement, 
                         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
                         onMouseDown: function (ev) {
                             var _a;
@@ -10210,12 +10258,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 },
@@ -10359,7 +10407,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) }))));
+            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) }))));
 };
 
 exports.CircleRC = Circle;
@@ -10377,6 +10425,7 @@ exports.ShapeWrapperRC = ShapeWrapper;
 exports.Text = Text$2;
 exports.TextRC = Text$1;
 exports.addPointToList = addPointToList;
+exports.automationAddPointsToLink = automationAddPointsToLink;
 exports.calculateAngleWithOx = calculateAngleWithOx;
 exports.checkPointContainsPolygon = checkPointContainsPolygon;
 exports.checkPositionOnLine = checkPositionOnLine;

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

@@ -41,6 +41,8 @@ interface PaperProps {
     onManuallyTriggerRenderPort: (callback: (portId: string, elementId: string) => void) => () => void;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
+    onManuallySelectElement?: (callback: (element: IElement | null) => void) => (() => void);
+    onManuallyTriggerDraggingElement?: (callback: (element: IElement) => void) => (() => void);
 }
 declare const _default: React.NamedExoticComponent<PaperProps>;
 export default _default;

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

@@ -41,6 +41,10 @@ export default interface IEditorContext {
     getText(textId: string): IPaperText | undefined;
     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);

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

@@ -20,5 +20,6 @@ interface ISelectionFrameProps {
     framePadding?: number;
     strokeWidth?: number;
     zoom: number;
+    draggingByDefault?: boolean;
 }
 export default ISelectionFrameProps;

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

@@ -11,6 +11,7 @@ export type onPortMouseUpHandler = (ev: React.MouseEvent<SVGElement>, port: IPor
 export type onElementMovedHandler = (element: IElement, oldPosition: IPosition, newPosition: IPosition) => void;
 export type onElementResizedHandler = (element: IElement, oldSize: ISize, newSize: ISize) => void;
 export type OnElementSelected = (element: IElement) => void;
+export type OnStartDraggingElement = (element: IElement) => void;
 export type OnCommandRenderElement = (elementId: string) => void;
 export type onCommandDeleteSelectedHandler = () => void;
 export type OnCommandRenderPort = (portId: string, elementId: string) => void;

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

@@ -56,4 +56,8 @@ export declare class EditorContext implements IEditorContext {
     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;
 }

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

@@ -8,6 +8,7 @@ export declare const EVENT_NAME: {
     ELEMENT_DELETED: string;
     ELEMENT_SELECTED: string;
     COMMAND_RENDER_ELEMENT: string;
+    START_DRAGGING_ELEMENT: string;
     PORT_MOUSE_DOWN: string;
     PORT_MOUSE_UP: string;
     PORT_MOVED: string;

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

@@ -5,4 +5,5 @@ export * from './pathUtil';
 export * from './portSlideRailSVGUtil';
 export * from './positionUtil';
 export * from './svgUtil';
+export * from './elementLinkUtil';
 export { generateUniqueId };