orcasvn-react-diagrams 0.1.13 → 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);
@@ -9009,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) {
@@ -9579,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) {
@@ -9628,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 () {
@@ -10045,10 +10123,17 @@ var Paper = function (props) {
     };
     var handleElementClicked = function (id, e, ref, element) {
         e.stopPropagation();
-        setSelectedElementSVG(ref);
-        setSelectedElement(elements.find(function (e) { return e.id === id; }));
+        if (tempLink) {
+            //Clear tempLink
+            setTempLink(undefined);
+            paperEventEmitter.emitElementLinkEnded();
+        }
+        else {
+            setSelectedElementSVG(ref);
+            setSelectedElement(element);
+            paperEventEmitter.emitElementSelected(element);
+        }
         setMouseDownedOnPaper(false);
-        paperEventEmitter.emitElementSelected(element);
     };
     var renderElementInTree = function (element) {
         var _a, _b;

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/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/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);
@@ -9005,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) {
@@ -9575,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) {
@@ -9624,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 () {
@@ -10041,10 +10119,17 @@ var Paper = function (props) {
     };
     var handleElementClicked = function (id, e, ref, element) {
         e.stopPropagation();
-        setSelectedElementSVG(ref);
-        setSelectedElement(elements.find(function (e) { return e.id === id; }));
+        if (tempLink) {
+            //Clear tempLink
+            setTempLink(undefined);
+            paperEventEmitter.emitElementLinkEnded();
+        }
+        else {
+            setSelectedElementSVG(ref);
+            setSelectedElement(element);
+            paperEventEmitter.emitElementSelected(element);
+        }
         setMouseDownedOnPaper(false);
-        paperEventEmitter.emitElementSelected(element);
     };
     var renderElementInTree = function (element) {
         var _a, _b;