orcasvn-react-diagrams 0.1.14 → 0.1.16

package/dist/cjs/index.js

@@ -8976,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 () {
@@ -9018,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 });
             });
@@ -9637,9 +9648,12 @@ var Paper = function (props) {
     //Listen text is selected
     React$1.useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected text to parent component
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, text);
         });
         return function () {
             textSelectedListener.off();
@@ -9647,10 +9661,16 @@ var Paper = function (props) {
     }, []);
     //Listen port is selected
     React$1.useEffect(function () {
-        var portSelectedListener = paperEventEmitter.onPortSelected(function (port) {
+        var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected port to parent component
+            var element = elements.find(function (e) { return e.id === elementId; });
+            if (element) {
+                (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+            }
         });
         return function () {
             portSelectedListener.off();
@@ -9698,6 +9718,7 @@ var Paper = function (props) {
     };
     //Listen command delete selected for element
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
@@ -9708,30 +9729,44 @@ var Paper = function (props) {
                 setSelectedElementSVG(null);
             }
         });
+        //broadcast selected element to parent component
+        if (selectedElement) {
+            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedElement);
+        }
         return function () {
             listener.off();
         };
     }, [selectedElement]);
     //Listen command delete selected for link
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
                 setSelectedLink(undefined);
             }
         });
+        //broadcast selected link to parent component
+        if (selectedLink) {
+            (_a = props.onLinkSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedLink);
+        }
         return function () {
             listener.off();
         };
     }, [selectedLink]);
     //Listen command delete selected for Text
     React$1.useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
                 setSelectedText(undefined);
             }
         });
+        //broadcast selected text to parent component
+        if (selectedText) {
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedText);
+        }
         return function () {
             listener.off();
         };
@@ -9835,6 +9870,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) {
@@ -10179,7 +10226,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, onElementContextMenu: editorContext.onElementContextMenu, 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, onPortSelected: editorContext.onPortSelected, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onElementSelected: editorContext.onElementSelected, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking, onLinkSelected: editorContext.onLinkSelected, onTextSelected: editorContext.onTextSelected })));
 }
 
 exports.CircleRC = Circle;

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

@@ -3,7 +3,7 @@ import IElement from '../models/IElement';
 import IElementLink from '../models/IElementLink';
 import IPosition from '../models/position';
 import IPort from '../models/IPort';
-import { IPaperText } from '../models/IText';
+import IText, { IPaperText } from '../models/IText';
 import ISize from '../models/size';
 interface PaperProps {
     size: {
@@ -15,10 +15,14 @@ interface PaperProps {
     texts: IPaperText[];
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onPortSelected?: (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;
+    onElementSelected?: (element: IElement) => void;
     onLinkValidation?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;
+    onLinkSelected?: (link: IElementLink) => void;
+    onTextSelected?: (text: IText) => void;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import IElement from "../IElement";
 import IElementLink from "../IElementLink";
-import { IPaperText } from "../IText";
+import IText, { IPaperText } from "../IText";
 import IPosition from "../position";
 import IPort from "../IPort";
 import ISize from "../size";
@@ -11,12 +11,16 @@ export declare class EditorContext {
     private _texts;
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onPortSelected?: (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;
+    onElementSelected?: (element: IElement) => void;
     validateLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
+    onLinkSelected?: (link: IElementLink) => void;
+    onTextSelected?: (text: IText) => void;
     constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
     get elements(): IElement[];
     get links(): IElementLink[];

package/dist/esm/index.js

@@ -8972,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 () {
@@ -9014,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 });
             });
@@ -9633,9 +9644,12 @@ var Paper = function (props) {
     //Listen text is selected
     useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected text to parent component
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, text);
         });
         return function () {
             textSelectedListener.off();
@@ -9643,10 +9657,16 @@ var Paper = function (props) {
     }, []);
     //Listen port is selected
     useEffect(function () {
-        var portSelectedListener = paperEventEmitter.onPortSelected(function (port) {
+        var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
+            var _a;
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
+            //broadcast selected port to parent component
+            var element = elements.find(function (e) { return e.id === elementId; });
+            if (element) {
+                (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+            }
         });
         return function () {
             portSelectedListener.off();
@@ -9694,6 +9714,7 @@ var Paper = function (props) {
     };
     //Listen command delete selected for element
     useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
@@ -9704,30 +9725,44 @@ var Paper = function (props) {
                 setSelectedElementSVG(null);
             }
         });
+        //broadcast selected element to parent component
+        if (selectedElement) {
+            (_a = props.onElementSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedElement);
+        }
         return function () {
             listener.off();
         };
     }, [selectedElement]);
     //Listen command delete selected for link
     useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
                 setSelectedLink(undefined);
             }
         });
+        //broadcast selected link to parent component
+        if (selectedLink) {
+            (_a = props.onLinkSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedLink);
+        }
         return function () {
             listener.off();
         };
     }, [selectedLink]);
     //Listen command delete selected for Text
     useEffect(function () {
+        var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
                 setSelectedText(undefined);
             }
         });
+        //broadcast selected text to parent component
+        if (selectedText) {
+            (_a = props.onTextSelected) === null || _a === void 0 ? void 0 : _a.call(props, selectedText);
+        }
         return function () {
             listener.off();
         };
@@ -9831,6 +9866,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) {
@@ -10175,7 +10222,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, onElementContextMenu: editorContext.onElementContextMenu, 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, onPortSelected: editorContext.onPortSelected, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onElementSelected: editorContext.onElementSelected, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking, onLinkSelected: editorContext.onLinkSelected, onTextSelected: editorContext.onTextSelected })));
 }
 
 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 };