orcasvn-react-diagrams 0.1.13 → 0.1.15

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);
@@ -8930,24 +8976,34 @@ var bundleExports = bundle.exports;
 var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     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) {
+    var _d = React$1.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
+    var _e = 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() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _d[0], setPorts = _d[1];
-    var _e = React$1.useState(false), someElementLinkStarted = _e[0], setSomeElementLinkStarted = _e[1];
-    var _f = React$1.useState(), potentialPortPosition = _f[0], setPotentialPortPosition = _f[1];
+    })) !== null && _b !== void 0 ? _b : []), ports = _e[0], setPorts = _e[1];
+    var _f = React$1.useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
+    var _g = React$1.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
     var _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
     var elementRef = React$1.useRef(null);
     var elementLinkStarted = React$1.useRef();
     //Listen a new port is created, after add new port to ports state
     React$1.useEffect(function () {
-        var _a, _b;
-        setPorts((_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() });
-        })) !== null && _b !== void 0 ? _b : []);
-    }, [props.ports]);
+        setPorts(function (prev) {
+            var _a, _b;
+            return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
+                var _a, _b;
+                var position = p.position;
+                //Handle the case when the port is created.
+                if (!((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.ref)) {
+                    position = normalizePortPosition(position);
+                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, p.position, position);
+                    _paperEventEmitterContext.emitPortMoved(p, id, p.position, position);
+                }
+                return __assign(__assign({}, p), { position: position, id: p.id, ref: ((_b = prev[index]) === null || _b === void 0 ? void 0 : _b.ref) || React$1.createRef() });
+            })) !== null && _b !== void 0 ? _b : [];
+        });
+    }, [(_c = props.ports) === null || _c === void 0 ? void 0 : _c.length]);
     //Listen trigger of Delete key, handle delete port is selected
     React$1.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -8972,6 +9028,7 @@ var Element = function (props) {
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
                     onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
                 return __assign(__assign({}, port), { position: newPosition });
             });
@@ -9009,6 +9066,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 +9645,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 +9716,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 () {
@@ -9757,6 +9846,18 @@ var Paper = function (props) {
             }
             return link;
         }); });
+        //Update port position in element, not re-render
+        setElements(function (prevElements) {
+            var _a;
+            var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
+            prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            return prevElements;
+        });
     };
     //Handle creating a new element link
     var handlePortMouseDown = function (ev, port, elementId) {
@@ -10045,10 +10146,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);
@@ -8926,24 +8972,34 @@ var bundleExports = bundle.exports;
 var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     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) {
+    var _d = useState(), selectedPort = _d[0], setSelectedPort = _d[1];
+    var _e = 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() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _d[0], setPorts = _d[1];
-    var _e = useState(false), someElementLinkStarted = _e[0], setSomeElementLinkStarted = _e[1];
-    var _f = useState(), potentialPortPosition = _f[0], setPotentialPortPosition = _f[1];
+    })) !== null && _b !== void 0 ? _b : []), ports = _e[0], setPorts = _e[1];
+    var _f = useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
+    var _g = useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
     var _paperEventEmitterContext = useContext(paperEventEmitterContext);
     var elementRef = useRef(null);
     var elementLinkStarted = useRef();
     //Listen a new port is created, after add new port to ports state
     useEffect(function () {
-        var _a, _b;
-        setPorts((_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() });
-        })) !== null && _b !== void 0 ? _b : []);
-    }, [props.ports]);
+        setPorts(function (prev) {
+            var _a, _b;
+            return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
+                var _a, _b;
+                var position = p.position;
+                //Handle the case when the port is created.
+                if (!((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.ref)) {
+                    position = normalizePortPosition(position);
+                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, p.position, position);
+                    _paperEventEmitterContext.emitPortMoved(p, id, p.position, position);
+                }
+                return __assign(__assign({}, p), { position: position, id: p.id, ref: ((_b = prev[index]) === null || _b === void 0 ? void 0 : _b.ref) || React$1.createRef() });
+            })) !== null && _b !== void 0 ? _b : [];
+        });
+    }, [(_c = props.ports) === null || _c === void 0 ? void 0 : _c.length]);
     //Listen trigger of Delete key, handle delete port is selected
     useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -8968,6 +9024,7 @@ var Element = function (props) {
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
                     onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(port, id, port.position, newPosition);
+                    _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
                 }
                 return __assign(__assign({}, port), { position: newPosition });
             });
@@ -9005,6 +9062,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 +9641,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 +9712,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 () {
@@ -9753,6 +9842,18 @@ var Paper = function (props) {
             }
             return link;
         }); });
+        //Update port position in element, not re-render
+        setElements(function (prevElements) {
+            var _a;
+            var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
+            prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            return prevElements;
+        });
     };
     //Handle creating a new element link
     var handlePortMouseDown = function (ev, port, elementId) {
@@ -10041,10 +10142,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;