orcasvn-react-diagrams 0.1.12 → 0.1.13

package/dist/cjs/index.js

@@ -7647,11 +7647,21 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = React$1.forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
+    var x = _a.x, y = _a.y, 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();
     };
-    return (React$1.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    var handleClick = function (ev) {
+        if (ev.type === 'click') {
+            if (onClick)
+                onClick(ev);
+        }
+        else if (ev.type === 'contextmenu') {
+            if (onContextMenu)
+                onContextMenu(ev);
+        }
+    };
+    return (React$1.createElement("svg", { x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 // Calculate the position of the 4 vertices of a rectangle relative to its parent svg
@@ -8921,7 +8931,7 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = React$1.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
@@ -9303,7 +9313,7 @@ var Element = function (props) {
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
-    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp },
+    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, 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; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
@@ -10033,16 +10043,23 @@ var Paper = function (props) {
             });
         });
     };
+    var handleElementClicked = function (id, e, ref, element) {
+        e.stopPropagation();
+        setSelectedElementSVG(ref);
+        setSelectedElement(elements.find(function (e) { return e.id === id; }));
+        setMouseDownedOnPaper(false);
+        paperEventEmitter.emitElementSelected(element);
+    };
     var renderElementInTree = function (element) {
         var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element;
         return (React$1.createElement("g", { key: element.id }, React$1.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: function (id, e, ref) {
-                e.stopPropagation();
-                setSelectedElementSVG(ref);
-                setSelectedElement(element);
-                setMouseDownedOnPaper(false);
-                paperEventEmitter.emitElementSelected(element);
+                handleElementClicked(id, e, ref, element);
+            }, onContextMenu: function (id, e, ref) {
+                var _a;
+                handleElementClicked(id, e, ref, element);
+                (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
             }, 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: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
@@ -10077,7 +10094,7 @@ var Paper = function (props) {
 function Editor(_a) {
     var editorContext = _a.editorContext;
     return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
+        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
 }
 
 exports.CircleRC = Circle;

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

@@ -4,6 +4,7 @@ interface IElementWrapper {
     x?: number;
     y?: number;
     onClick?: (e: React.MouseEvent<SVGElement>) => void;
+    onContextMenu?: (e: React.MouseEvent<SVGElement>) => void;
     children: React.ReactNode;
     portPlaceholders?: SVGElement[];
     ports?: IPort[];

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

@@ -15,6 +15,7 @@ interface PaperProps {
     texts: IPaperText[];
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
     onLinkValidation?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;

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

@@ -22,6 +22,7 @@ interface IElementProps {
     portDirection?: SubObjectDirection;
     defaultPortSize?: number;
     onClick?: (elementId: string, e: React.MouseEvent<SVGElement>, ref: SVGSVGElement | null) => void;
+    onContextMenu?: (elementId: string, e: React.MouseEvent<SVGElement>, ref: SVGSVGElement | null) => void;
     container: Element;
     onResized?: onElementResizedHandler;
     onMoved?: onElementMovedHandler;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import IElement from "../IElement";
 import IElementLink from "../IElementLink";
 import { IPaperText } from "../IText";
@@ -10,6 +11,7 @@ export declare class EditorContext {
     private _texts;
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
     validateLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;

package/dist/esm/index.js

@@ -7643,11 +7643,21 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
+    var x = _a.x, y = _a.y, 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();
     };
-    return (React$1.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    var handleClick = function (ev) {
+        if (ev.type === 'click') {
+            if (onClick)
+                onClick(ev);
+        }
+        else if (ev.type === 'contextmenu') {
+            if (onContextMenu)
+                onContextMenu(ev);
+        }
+    };
+    return (React$1.createElement("svg", { x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 // Calculate the position of the 4 vertices of a rectangle relative to its parent svg
@@ -8917,7 +8927,7 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
@@ -9299,7 +9309,7 @@ var Element = function (props) {
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
-    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp },
+    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, 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; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
@@ -10029,16 +10039,23 @@ var Paper = function (props) {
             });
         });
     };
+    var handleElementClicked = function (id, e, ref, element) {
+        e.stopPropagation();
+        setSelectedElementSVG(ref);
+        setSelectedElement(elements.find(function (e) { return e.id === id; }));
+        setMouseDownedOnPaper(false);
+        paperEventEmitter.emitElementSelected(element);
+    };
     var renderElementInTree = function (element) {
         var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element;
         return (React$1.createElement("g", { key: element.id }, React$1.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: function (id, e, ref) {
-                e.stopPropagation();
-                setSelectedElementSVG(ref);
-                setSelectedElement(element);
-                setMouseDownedOnPaper(false);
-                paperEventEmitter.emitElementSelected(element);
+                handleElementClicked(id, e, ref, element);
+            }, onContextMenu: function (id, e, ref) {
+                var _a;
+                handleElementClicked(id, e, ref, element);
+                (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
             }, 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: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
@@ -10073,7 +10090,7 @@ var Paper = function (props) {
 function Editor(_a) {
     var editorContext = _a.editorContext;
     return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
+        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
 }
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomPortFromJSXElement, CustomPortFromShape, CustomShape as CustomShapeRC, EditorContext, Element$1 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, Editor as default };