orcasvn-react-diagrams 0.1.12 → 0.1.14

package/dist/cjs/index.js

@@ -954,6 +954,8 @@ var EVENT_NAME = {
     //ELEMENT LINK
     ELEMENT_LINK_STARTED: 'element_link_started',
     ELEMENT_LINK_ENDED: 'element_link_ended',
+    //TEXT
+    TEXT_SELECTED: 'text_selected',
 };
 //ELEMENT
 //export const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
@@ -1304,6 +1306,18 @@ var onPortSelected = function (callback) {
         off: off
     };
 };
+var emitTextSelected = function (text) {
+    eventEmitter.emit(EVENT_NAME.TEXT_SELECTED, text);
+};
+var onTextSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.TEXT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.TEXT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
 var paperEventEmitterContext = React$1.createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
@@ -1334,6 +1348,8 @@ var paperEventEmitterContext = React$1.createContext({
     onElementLinkStarted: onElementLinkStarted,
     emitElementLinkEnded: emitElementLinkEnded,
     onElementLinkEnded: onElementLinkEnded,
+    emitTextSelected: emitTextSelected,
+    onTextSelected: onTextSelected,
 });
 
 var Text = React$1.forwardRef(function (_a, ref) {
@@ -1341,7 +1357,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
     var _c = React$1.useState(false), isSelected = _c[0], setIsSelected = _c[1];
     var _d = React$1.useState(false), isEditing = _d[0], setIsEditing = _d[1];
     var svgRef = React$1.useRef();
-    var onPaperClicked = React$1.useContext(paperEventEmitterContext).onPaperClicked;
+    var _e = React$1.useContext(paperEventEmitterContext), onPaperClicked = _e.onPaperClicked, emitTextSelected = _e.emitTextSelected, onPortSelected = _e.onPortSelected, onElementSelected = _e.onElementSelected, onTextSelected = _e.onTextSelected;
     React$1.useEffect(function () {
         var paperClickListener = onPaperClicked(function (ev) {
             var _a;
@@ -1351,8 +1367,25 @@ var Text = React$1.forwardRef(function (_a, ref) {
                 setIsEditing(false);
             }
         });
+        var portSelectedListener = onPortSelected(function (port) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var elementSelectedListener = onElementSelected(function (element) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var textSelectedListener = onTextSelected(function (text) {
+            if (text.id !== id) {
+                setIsSelected(false);
+                setIsEditing(false);
+            }
+        });
         return function () {
             paperClickListener.off();
+            portSelectedListener.off();
+            elementSelectedListener.off();
+            textSelectedListener.off();
         };
     }, []);
     //Handle click on svg element
@@ -1373,6 +1406,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
         };
         setIsSelected(true);
         onSelected && onSelected(text);
+        emitTextSelected(text);
     };
     var handleChangeText = function (ev) {
         onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
@@ -7409,7 +7443,7 @@ var IElementLink = function (_a) {
         current: null,
     }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
     var _p = React$1.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var onPaperClicked = React$1.useContext(paperEventEmitterContext).onPaperClicked;
+    var _q = React$1.useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
     var pathRef = React$1.useRef(null);
     var labelRef = React$1.useRef(null);
     var sourceLabelRef = React$1.useRef(null);
@@ -7426,6 +7460,18 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
+    React$1.useEffect(function () {
+        var elementSelectedListener = onElementSelected(function () {
+            setSelectedLabelRef({
+                current: null,
+            });
+            setIsSelectedLink(false);
+            onDeselected === null || onDeselected === void 0 ? void 0 : onDeselected();
+        });
+        return function () {
+            elementSelectedListener.off();
+        };
+    }, []);
     React$1.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined);
@@ -7647,11 +7693,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 +8977,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() });
@@ -8999,6 +9055,15 @@ var Element = function (props) {
             portSelectedListener.off();
         };
     }, []);
+    //Listen text is selected
+    React$1.useEffect(function () {
+        var textSelectedListener = _paperEventEmitterContext.onTextSelected(function (text) {
+            setSelectedPort(undefined);
+        });
+        return function () {
+            textSelectedListener.off();
+        };
+    }, []);
     //Listen another element is selected
     React$1.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
@@ -9303,7 +9368,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)
@@ -9569,6 +9634,28 @@ var Paper = function (props) {
         var parsedElementsInTree = convertElementsToTree(elements);
         setElementsInTree(parsedElementsInTree);
     };
+    //Listen text is selected
+    React$1.useEffect(function () {
+        var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
+            setSelectedElement(undefined);
+            setSelectedElementSVG(null);
+            setSelectedLink(undefined);
+        });
+        return function () {
+            textSelectedListener.off();
+        };
+    }, []);
+    //Listen port is selected
+    React$1.useEffect(function () {
+        var portSelectedListener = paperEventEmitter.onPortSelected(function (port) {
+            setSelectedElement(undefined);
+            setSelectedElementSVG(null);
+            setSelectedLink(undefined);
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
     React$1.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         var parentChangedCancelers = elements.map(function (element) {
@@ -9618,6 +9705,7 @@ var Paper = function (props) {
                 setElements(function (prev) { return prev.filter(function (e) { return !deletedElementIds_1.includes(e.id); }); });
                 setLinks(function (prevLinks) { return prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); }); });
                 setSelectedElement(undefined);
+                setSelectedElementSVG(null);
             }
         });
         return function () {
@@ -10033,16 +10121,30 @@ var Paper = function (props) {
             });
         });
     };
+    var handleElementClicked = function (id, e, ref, element) {
+        e.stopPropagation();
+        if (tempLink) {
+            //Clear tempLink
+            setTempLink(undefined);
+            paperEventEmitter.emitElementLinkEnded();
+        }
+        else {
+            setSelectedElementSVG(ref);
+            setSelectedElement(element);
+            paperEventEmitter.emitElementSelected(element);
+        }
+        setMouseDownedOnPaper(false);
+    };
     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 +10179,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/contexts/paperEventEmitterContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import EventEmitter from "eventemitter3";
-import { onCommandDeleteSelectedHandler, OnElementLinkEnded, OnElementLinkStarted, onElementMovedHandler, onElementResizedHandler, OnElementSelected, onPortMouseDownHandler, onPortMouseUpHandler, onPortMovedHandler, OnPortSelected } from "../models/callbackTypes";
+import { onCommandDeleteSelectedHandler, OnElementLinkEnded, OnElementLinkStarted, onElementMovedHandler, onElementResizedHandler, OnElementSelected, onPortMouseDownHandler, onPortMouseUpHandler, onPortMovedHandler, OnPortSelected, OnTextSelected } from "../models/callbackTypes";
 interface IEventListenerReturn {
     off: () => void;
 }
@@ -34,6 +34,8 @@ interface IPaperEventContext {
     onElementLinkStarted: (callback: OnElementLinkStarted) => IEventListenerReturn;
     emitElementLinkEnded: OnElementLinkEnded;
     onElementLinkEnded: (callback: OnElementLinkEnded) => IEventListenerReturn;
+    emitTextSelected: OnTextSelected;
+    onTextSelected: (callback: OnTextSelected) => IEventListenerReturn;
 }
 export declare const paperEventEmitterContext: React.Context<IPaperEventContext>;
 export {};

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/callbackTypes.d.ts

@@ -2,6 +2,7 @@
 import IElement from "./IElement";
 import IElementLink from "./IElementLink";
 import IPort from "./IPort";
+import IText from "./IText";
 import IPosition from "./position";
 import ISize from "./size";
 export type onPortMovedHandler = (port: IPort, elementId: string, oldPosition: IPosition, newPosition: IPosition) => void;
@@ -14,3 +15,4 @@ export type onCommandDeleteSelectedHandler = () => void;
 export type OnElementLinkStarted = (elementLink: IElementLink) => void;
 export type OnElementLinkEnded = (elementLink?: IElementLink) => void;
 export type OnPortSelected = (port: IPort, elementId: string) => void;
+export type OnTextSelected = (text: IText) => void;

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/cjs/types/utils/constants.d.ts

@@ -17,6 +17,7 @@ export declare const EVENT_NAME: {
     COMMAND_DELETE_SELECTED_TEXT: string;
     ELEMENT_LINK_STARTED: string;
     ELEMENT_LINK_ENDED: string;
+    TEXT_SELECTED: string;
 };
 export declare const MIN_DISTANCE_BETWEEN_KNOTS_ON_LINK = 30;
 export declare const MAX_LINK_KNOT_COUNT = 10;

package/dist/esm/index.js

@@ -950,6 +950,8 @@ var EVENT_NAME = {
     //ELEMENT LINK
     ELEMENT_LINK_STARTED: 'element_link_started',
     ELEMENT_LINK_ENDED: 'element_link_ended',
+    //TEXT
+    TEXT_SELECTED: 'text_selected',
 };
 //ELEMENT
 //export const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
@@ -1300,6 +1302,18 @@ var onPortSelected = function (callback) {
         off: off
     };
 };
+var emitTextSelected = function (text) {
+    eventEmitter.emit(EVENT_NAME.TEXT_SELECTED, text);
+};
+var onTextSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.TEXT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.TEXT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
 var paperEventEmitterContext = createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
@@ -1330,6 +1344,8 @@ var paperEventEmitterContext = createContext({
     onElementLinkStarted: onElementLinkStarted,
     emitElementLinkEnded: emitElementLinkEnded,
     onElementLinkEnded: onElementLinkEnded,
+    emitTextSelected: emitTextSelected,
+    onTextSelected: onTextSelected,
 });
 
 var Text = forwardRef(function (_a, ref) {
@@ -1337,7 +1353,7 @@ var Text = forwardRef(function (_a, ref) {
     var _c = useState(false), isSelected = _c[0], setIsSelected = _c[1];
     var _d = useState(false), isEditing = _d[0], setIsEditing = _d[1];
     var svgRef = useRef();
-    var onPaperClicked = useContext(paperEventEmitterContext).onPaperClicked;
+    var _e = useContext(paperEventEmitterContext), onPaperClicked = _e.onPaperClicked, emitTextSelected = _e.emitTextSelected, onPortSelected = _e.onPortSelected, onElementSelected = _e.onElementSelected, onTextSelected = _e.onTextSelected;
     useEffect(function () {
         var paperClickListener = onPaperClicked(function (ev) {
             var _a;
@@ -1347,8 +1363,25 @@ var Text = forwardRef(function (_a, ref) {
                 setIsEditing(false);
             }
         });
+        var portSelectedListener = onPortSelected(function (port) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var elementSelectedListener = onElementSelected(function (element) {
+            setIsSelected(false);
+            setIsEditing(false);
+        });
+        var textSelectedListener = onTextSelected(function (text) {
+            if (text.id !== id) {
+                setIsSelected(false);
+                setIsEditing(false);
+            }
+        });
         return function () {
             paperClickListener.off();
+            portSelectedListener.off();
+            elementSelectedListener.off();
+            textSelectedListener.off();
         };
     }, []);
     //Handle click on svg element
@@ -1369,6 +1402,7 @@ var Text = forwardRef(function (_a, ref) {
         };
         setIsSelected(true);
         onSelected && onSelected(text);
+        emitTextSelected(text);
     };
     var handleChangeText = function (ev) {
         onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
@@ -7405,7 +7439,7 @@ var IElementLink = function (_a) {
         current: null,
     }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
     var _p = useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var onPaperClicked = useContext(paperEventEmitterContext).onPaperClicked;
+    var _q = useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
     var pathRef = useRef(null);
     var labelRef = useRef(null);
     var sourceLabelRef = useRef(null);
@@ -7422,6 +7456,18 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
+    useEffect(function () {
+        var elementSelectedListener = onElementSelected(function () {
+            setSelectedLabelRef({
+                current: null,
+            });
+            setIsSelectedLink(false);
+            onDeselected === null || onDeselected === void 0 ? void 0 : onDeselected();
+        });
+        return function () {
+            elementSelectedListener.off();
+        };
+    }, []);
     useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined);
@@ -7643,11 +7689,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 +8973,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() });
@@ -8995,6 +9051,15 @@ var Element = function (props) {
             portSelectedListener.off();
         };
     }, []);
+    //Listen text is selected
+    useEffect(function () {
+        var textSelectedListener = _paperEventEmitterContext.onTextSelected(function (text) {
+            setSelectedPort(undefined);
+        });
+        return function () {
+            textSelectedListener.off();
+        };
+    }, []);
     //Listen another element is selected
     useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
@@ -9299,7 +9364,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)
@@ -9565,6 +9630,28 @@ var Paper = function (props) {
         var parsedElementsInTree = convertElementsToTree(elements);
         setElementsInTree(parsedElementsInTree);
     };
+    //Listen text is selected
+    useEffect(function () {
+        var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
+            setSelectedElement(undefined);
+            setSelectedElementSVG(null);
+            setSelectedLink(undefined);
+        });
+        return function () {
+            textSelectedListener.off();
+        };
+    }, []);
+    //Listen port is selected
+    useEffect(function () {
+        var portSelectedListener = paperEventEmitter.onPortSelected(function (port) {
+            setSelectedElement(undefined);
+            setSelectedElementSVG(null);
+            setSelectedLink(undefined);
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
     useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         var parentChangedCancelers = elements.map(function (element) {
@@ -9614,6 +9701,7 @@ var Paper = function (props) {
                 setElements(function (prev) { return prev.filter(function (e) { return !deletedElementIds_1.includes(e.id); }); });
                 setLinks(function (prevLinks) { return prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); }); });
                 setSelectedElement(undefined);
+                setSelectedElementSVG(null);
             }
         });
         return function () {
@@ -10029,16 +10117,30 @@ var Paper = function (props) {
             });
         });
     };
+    var handleElementClicked = function (id, e, ref, element) {
+        e.stopPropagation();
+        if (tempLink) {
+            //Clear tempLink
+            setTempLink(undefined);
+            paperEventEmitter.emitElementLinkEnded();
+        }
+        else {
+            setSelectedElementSVG(ref);
+            setSelectedElement(element);
+            paperEventEmitter.emitElementSelected(element);
+        }
+        setMouseDownedOnPaper(false);
+    };
     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 +10175,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 };