orcasvn-react-diagrams 0.1.45 → 0.1.47

package/dist/cjs/index.js

@@ -808,6 +808,7 @@ var EVENT_ELEMENT_SELECTED = 'elementSelected';
 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_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
@@ -1014,6 +1015,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onElementMouseUpHandler = function (ev, element) {
         this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_UP, ev, element);
     };
+    EditorContext.prototype.onElementMouseDown = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_MOUSE_DOWN, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementMouseDownHandler = function (ev, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_DOWN, ev, element);
+    };
     EditorContext.prototype.onLinkSelected = function (callback) {
         return this.addEventListener(EVENT_LINK_SELECTED, callback);
     };
@@ -1203,7 +1211,7 @@ var SelectionFrame = function (props) {
     var _a, _b;
     var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
+    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;
     var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
     var _c = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _c[0], setWidth = _c[1];
     var _d = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _d[0], setHeight = _d[1];
@@ -1239,6 +1247,9 @@ var SelectionFrame = function (props) {
             setXFromMouse(xFromMouse_1);
             setYFromMouse(yFromMouse_1);
         }
+        if (propOnMouseDown) {
+            propOnMouseDown(event);
+        }
     };
     var rectHandleMouseMove = React.useCallback(function (event) {
         var mouseEvent = event;
@@ -1333,7 +1344,7 @@ var SelectionFrame = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown, onMouseUp: propOnMouseUp }),
         propResizability.enabled ?
             (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
@@ -8359,10 +8370,11 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = React.forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, cssClass = _a.cssClass, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
-    var handleMouseDown = function (ev) {
-        ev.stopPropagation();
-    };
+    // const handleMouseDown = (ev: React.MouseEvent<SVGElement>) => {
+    //     ev.stopPropagation();
+    //     onMouseDown?.(ev);
+    // }
+    var x = _a.x, y = _a.y, cssClass = _a.cssClass, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown;
     var handleClick = function (ev) {
         if (ev.type === 'click') {
             if (onClick)
@@ -8373,12 +8385,12 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
                 onContextMenu(ev);
         }
     };
-    return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 var Element = React.forwardRef(function (props, forwardedRef) {
     var _a, _b;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = React.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = React.useState(), hoveredPort = _d[0], setHoveredPort = _d[1];
     var _e = React.useState([]), ports = _e[0], setPorts = _e[1];
@@ -8679,6 +8691,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             setPotentialPortPosition(undefined);
         }
     }
+    var handleElementMouseDown = function (ev) {
+        ev.stopPropagation();
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev, id);
+    };
     var handleElementMouseUp = function (ev) {
         ev.stopPropagation();
         onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
@@ -8780,7 +8796,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             keepRatio: false
         },
     });
-    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
+    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
@@ -9622,6 +9638,18 @@ var Paper = function (props) {
         width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width,
         height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height,
         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
+        onMouseDown: function (ev) {
+            var _a;
+            if (selectedElement) {
+                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+            }
+        },
+        onMouseUp: function (ev) {
+            var _a;
+            if (selectedElement) {
+                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+            }
+        },
         onMove: function (newX, newY) {
             if (!selectedElement)
                 return;
@@ -9790,6 +9818,13 @@ var Paper = function (props) {
             (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
         }
     }, [props.onElementMouseUp]);
+    var handleMouseDown = React.useCallback(function (ev, elementId) {
+        var _a;
+        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        if (element) {
+            (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
+        }
+    }, [props.onElementMouseDown]);
     var handleMouseMove = React.useCallback(function (ev, elementId) {
         var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
@@ -9808,7 +9843,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, 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, 
+            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, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
                 onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
@@ -9910,6 +9945,9 @@ var Editor = function (_a) {
     var handleElementMouseMove = React.useCallback(function (ev, element) {
         editorContext.onElementMouseMoveHandler(ev, element);
     }, [editorContext]);
+    var handleElementMouseDown = React.useCallback(function (ev, element) {
+        editorContext.onElementMouseDownHandler(ev, element);
+    }, [editorContext]);
     var handleElementMouseUp = React.useCallback(function (ev, element) {
         editorContext.onElementMouseUpHandler(ev, element);
     }, [editorContext]);
@@ -9949,7 +9987,7 @@ var Editor = function (_a) {
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (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, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, 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) }));
+    return (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, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
 };
 
 exports.CircleRC = Circle;

package/dist/cjs/types/components/elements/elementWrapper.d.ts

@@ -12,6 +12,7 @@ interface IElementWrapper {
     onMouseMove?: (event: React.MouseEvent) => void;
     onMouseLeave?: (event: React.MouseEvent) => void;
     onMouseUp?: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
 }
 declare const ElementWrapper: React.ForwardRefExoticComponent<IElementWrapper & React.RefAttributes<SVGSVGElement>>;
 export default ElementWrapper;

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

@@ -26,6 +26,7 @@ interface PaperProps {
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
     onElementSelected?: (element: IElement) => void;
     onElementDeleted?: (element: IElement) => void;
+    onElementMouseDown?: (ev: React.MouseEvent, element: IElement) => void;
     onElementMouseUp?: (ev: React.MouseEvent, element: IElement) => void;
     onElementMouseMove?: (ev: React.MouseEvent, element: IElement) => void;
     onElementMouseLeave?: (ev: React.MouseEvent, element: IElement) => void;

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

@@ -26,6 +26,7 @@ export default interface IEditorContext {
     onElementMouseLeave: (callback: (ev: React.MouseEvent, element: IElement) => void) => (() => void);
     onElementMouseMove: (callback: (ev: React.MouseEvent, element: IElement) => void) => (() => void);
     onElementMouseUp: (callback: (ev: React.MouseEvent, element: IElement) => void) => (() => void);
+    onElementMouseDown: (callback: (ev: React.MouseEvent, element: IElement) => void) => (() => void);
     onLinkSelected: (callback: (link: IElementLink) => void) => (() => void);
     onTextSelected: (callback: (text: IText) => void) => (() => void);
     getElement(elementId: string): IElement | undefined;

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

@@ -32,6 +32,7 @@ interface IElementProps {
     portPlaceholderShape?: JSX.Element;
     onMouseMove?: (event: React.MouseEvent, elementId: string) => void;
     onMouseLeave?: (event: React.MouseEvent, elementId: string) => void;
+    onMouseDown?: (event: React.MouseEvent, elementId: string) => void;
     onMouseUp?: (event: React.MouseEvent, elementId: string) => void;
     onMouseUpAtLinkedPortPlaceholder?: (link: IElementLink, position: IPosition, targetElementId: string) => void;
     onTextUpdated?: (elmentId: string, textId: string, newTextContent: string) => void;

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

@@ -8,6 +8,8 @@ interface ISelectionFrameProps {
     width?: number;
     height?: number;
     targetSVGElement?: SVGSVGElement;
+    onMouseDown?: (event: React.MouseEvent<SVGRectElement>) => void;
+    onMouseUp?: (event: React.MouseEvent<SVGRectElement>) => void;
     onMove?: (x: number, y: number) => void;
     onResize?: (width: number, height: number) => void;
     resizability: IResizability;

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

@@ -45,6 +45,7 @@ export declare class EditorContext implements IEditorContext {
     onElementMouseMove(callback: (ev: React.MouseEvent, element: IElement) => void): () => void;
     onElementMouseLeave(callback: (ev: React.MouseEvent, element: IElement) => void): () => void;
     onElementMouseUp(callback: (ev: React.MouseEvent, element: IElement) => void): () => void;
+    onElementMouseDown(callback: (ev: React.MouseEvent, element: IElement) => void): () => void;
     onLinkSelected(callback: (link: IElementLink) => void): () => void;
     onTextSelected(callback: (text: IText) => void): () => void;
     triggerRenderElement(elementId: string): void;

package/dist/esm/index.js

@@ -804,6 +804,7 @@ var EVENT_ELEMENT_SELECTED = 'elementSelected';
 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_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
@@ -1010,6 +1011,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onElementMouseUpHandler = function (ev, element) {
         this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_UP, ev, element);
     };
+    EditorContext.prototype.onElementMouseDown = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_MOUSE_DOWN, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementMouseDownHandler = function (ev, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_DOWN, ev, element);
+    };
     EditorContext.prototype.onLinkSelected = function (callback) {
         return this.addEventListener(EVENT_LINK_SELECTED, callback);
     };
@@ -1199,7 +1207,7 @@ var SelectionFrame = function (props) {
     var _a, _b;
     var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
-    propMovingRate = props.movingRate, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
+    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;
     var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
     var _c = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _c[0], setWidth = _c[1];
     var _d = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _d[0], setHeight = _d[1];
@@ -1235,6 +1243,9 @@ var SelectionFrame = function (props) {
             setXFromMouse(xFromMouse_1);
             setYFromMouse(yFromMouse_1);
         }
+        if (propOnMouseDown) {
+            propOnMouseDown(event);
+        }
     };
     var rectHandleMouseMove = useCallback(function (event) {
         var mouseEvent = event;
@@ -1329,7 +1340,7 @@ var SelectionFrame = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown, onMouseUp: propOnMouseUp }),
         propResizability.enabled ?
             (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
@@ -8355,10 +8366,11 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, cssClass = _a.cssClass, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
-    var handleMouseDown = function (ev) {
-        ev.stopPropagation();
-    };
+    // const handleMouseDown = (ev: React.MouseEvent<SVGElement>) => {
+    //     ev.stopPropagation();
+    //     onMouseDown?.(ev);
+    // }
+    var x = _a.x, y = _a.y, cssClass = _a.cssClass, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown;
     var handleClick = function (ev) {
         if (ev.type === 'click') {
             if (onClick)
@@ -8369,12 +8381,12 @@ var ElementWrapper = forwardRef(function (_a, ref) {
                 onContextMenu(ev);
         }
     };
-    return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 var Element = forwardRef(function (props, forwardedRef) {
     var _a, _b;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = useState(), hoveredPort = _d[0], setHoveredPort = _d[1];
     var _e = useState([]), ports = _e[0], setPorts = _e[1];
@@ -8675,6 +8687,10 @@ var Element = forwardRef(function (props, forwardedRef) {
             setPotentialPortPosition(undefined);
         }
     }
+    var handleElementMouseDown = function (ev) {
+        ev.stopPropagation();
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev, id);
+    };
     var handleElementMouseUp = function (ev) {
         ev.stopPropagation();
         onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
@@ -8776,7 +8792,7 @@ var Element = forwardRef(function (props, forwardedRef) {
             keepRatio: false
         },
     });
-    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
+    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
@@ -9618,6 +9634,18 @@ var Paper = function (props) {
         width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width,
         height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height,
         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
+        onMouseDown: function (ev) {
+            var _a;
+            if (selectedElement) {
+                (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+            }
+        },
+        onMouseUp: function (ev) {
+            var _a;
+            if (selectedElement) {
+                (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, selectedElement);
+            }
+        },
         onMove: function (newX, newY) {
             if (!selectedElement)
                 return;
@@ -9786,6 +9814,13 @@ var Paper = function (props) {
             (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
         }
     }, [props.onElementMouseUp]);
+    var handleMouseDown = useCallback(function (ev, elementId) {
+        var _a;
+        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        if (element) {
+            (_a = props.onElementMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
+        }
+    }, [props.onElementMouseDown]);
     var handleMouseMove = useCallback(function (ev, elementId) {
         var _a;
         var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
@@ -9804,7 +9839,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, 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, 
+            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, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
                 onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
@@ -9906,6 +9941,9 @@ var Editor = function (_a) {
     var handleElementMouseMove = useCallback(function (ev, element) {
         editorContext.onElementMouseMoveHandler(ev, element);
     }, [editorContext]);
+    var handleElementMouseDown = useCallback(function (ev, element) {
+        editorContext.onElementMouseDownHandler(ev, element);
+    }, [editorContext]);
     var handleElementMouseUp = useCallback(function (ev, element) {
         editorContext.onElementMouseUpHandler(ev, element);
     }, [editorContext]);
@@ -9945,7 +9983,7 @@ var Editor = function (_a) {
     var handlePaperMouseUp = useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (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, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, 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) }));
+    return (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, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
 };
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPortAbsolutePosition, getRectangleCorners, getRelativePosition, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement };