orcasvn-react-diagrams 0.1.71 → 0.1.72

package/dist/cjs/index.js

@@ -842,6 +842,7 @@ var Text$2 = /** @class */ (function () {
 }());
 
 var EVENT_MANUALLY_RENDER_ELEMENT = 'manuallyRenderElement';
+var EVENT_MANUALLY_RENDER_ELEMENTS = 'manuallyRenderElements';
 var EVENT_MANUALLY_RENDER_PORT = 'manuallyRenderPort';
 var EVENT_EDITOR_CONTEXT_UPDATED = 'editorContextUpdated';
 var EVENT_PAPER_CLICKED = 'paperClicked';
@@ -1131,6 +1132,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.manuallyTriggerRenderElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
+    EditorContext.prototype.triggerRenderElements = function () {
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENTS);
+    };
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderElementsHandler = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENTS, callback);
+    };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
     };
@@ -9688,13 +9696,13 @@ var Paper = function (props) {
     var zoomRef = React.useRef(zoom);
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = React.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
-    var elementsRef = React.useRef([]); //Cache elements to avoid re-render when elements changed
+    //const elementsRef = useRef<IElementState[]>([]); //Cache elements to avoid re-render when elements changed
     var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
     var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, 
     //onPortsChanged,
-    onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementsHandler = props.manuallyTriggerRenderElementsHandler, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     var handleElementsState = React.useCallback(function (elements) {
         var elementsInTree = convertElementsToTree(elements);
         setElementsState({ elements: __spreadArray([], elements, true), elementsInTree: elementsInTree });
@@ -9715,6 +9723,17 @@ var Paper = function (props) {
     React.useEffect(function () {
         setTexts(__spreadArray([], props.texts, true));
     }, [props.texts]);
+    React.useEffect(function () {
+        var off = manuallyTriggerRenderElementsHandler(function () {
+            elementsState.elements.forEach(function (element) {
+                element.version = (element.version || 0) + 1;
+            });
+            handleElementsState(elementsState.elements);
+        });
+        return function () {
+            off();
+        };
+    }, [elementsState.elements, handleElementsState, manuallyTriggerRenderElementsHandler]);
     React.useEffect(function () {
         var off = manuallyTriggerRenderElementHandler(function (elementId) {
             //find the element
@@ -9839,7 +9858,7 @@ var Paper = function (props) {
     React.useEffect(function () {
         //Listen a new text added, then re-render the element component
         //TODO: to be moved to Element component
-        var addedTextCancelers = elementsRef.current.map(function (element) {
+        var addedTextCancelers = elementsState.elements.map(function (element) {
             var _a;
             return (_a = element.onAddedText) === null || _a === void 0 ? void 0 : _a.call(element, function (newText) {
                 logger.info("A new text has been added to element ".concat(element.id));
@@ -9848,7 +9867,7 @@ var Paper = function (props) {
         });
         // Listen a text deleted, then re-render the element component
         //TODO: to be moved to Element component
-        var deletedTextCancelers = elementsRef.current.map(function (element) {
+        var deletedTextCancelers = elementsState.elements.map(function (element) {
             var _a;
             return (_a = element.onDeletedText) === null || _a === void 0 ? void 0 : _a.call(element, function (deletedTextId) {
                 logger.info("A text has been deleted from element ".concat(element.id));
@@ -10660,7 +10679,7 @@ var Editor = function (_a) {
         React.createElement(ZoomContextProvider, null,
             React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, 
                 //onPortsChanged={handlePortsChanged}
-                onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
+                onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementsHandler: editorContext.manuallyTriggerRenderElementsHandler.bind(editorContext), manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;

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

@@ -36,6 +36,7 @@ interface PaperProps {
     onLinksChanged?: (links: IElementLink[]) => void;
     onTextSelected?: (text: IText) => void;
     onTextsChanged?: (texts: IPaperText[]) => void;
+    manuallyTriggerRenderElementsHandler: (callback: () => void) => () => void;
     manuallyTriggerRenderElementHandler: (callback: (elementId: string) => void) => () => void;
     manuallyTriggerRenderPortHandler: (callback: (portId: string, elementId: string) => void) => () => void;
     onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;

package/dist/cjs/types/mocks/editorContextTriggerRenderElements.d.ts

@@ -0,0 +1,2 @@
+import { EditorContext } from "../models/implementations/EditorContext";
+export declare const editorContextForTriggerRenderElements: EditorContext;

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

@@ -49,6 +49,7 @@ export default interface IEditorContext {
     removeText(textId: string): void;
     setSelectedElement: (element: IElement | null) => void;
     triggerDraggingElement: (element: IElement) => void;
+    triggerRenderElements(): void;
     triggerRenderElement(elementId: string): void;
     triggerRenderPort(portId: string, elementId: string): void;
     triggerStartedLinking(sourceElement: IElement, sourcePort: IPort): void;

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

@@ -59,6 +59,7 @@ export declare class EditorContext implements IEditorContext {
     onLinkSelected(callback: (link: IElementLink) => void): () => void;
     onTextSelected(callback: (text: IText) => void): () => void;
     triggerRenderElement(elementId: string): void;
+    triggerRenderElements(): void;
     triggerRenderPort(portId: string, elementId: string): void;
     setSelectedElement(element: IElement | null): void;
     triggerDraggingElement(element: IElement): void;

package/dist/esm/index.js

@@ -838,6 +838,7 @@ var Text$2 = /** @class */ (function () {
 }());
 
 var EVENT_MANUALLY_RENDER_ELEMENT = 'manuallyRenderElement';
+var EVENT_MANUALLY_RENDER_ELEMENTS = 'manuallyRenderElements';
 var EVENT_MANUALLY_RENDER_PORT = 'manuallyRenderPort';
 var EVENT_EDITOR_CONTEXT_UPDATED = 'editorContextUpdated';
 var EVENT_PAPER_CLICKED = 'paperClicked';
@@ -1127,6 +1128,13 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.manuallyTriggerRenderElementHandler = function (callback) {
         return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
+    EditorContext.prototype.triggerRenderElements = function () {
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENTS);
+    };
+    /** @internal */
+    EditorContext.prototype.manuallyTriggerRenderElementsHandler = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENTS, callback);
+    };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
         this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
     };
@@ -9684,13 +9692,13 @@ var Paper = function (props) {
     var zoomRef = useRef(zoom);
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
-    var elementsRef = useRef([]); //Cache elements to avoid re-render when elements changed
+    //const elementsRef = useRef<IElementState[]>([]); //Cache elements to avoid re-render when elements changed
     var linksRef = useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
     var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, 
     //onPortsChanged,
-    onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
+    onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementsHandler = props.manuallyTriggerRenderElementsHandler, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
     var handleElementsState = useCallback(function (elements) {
         var elementsInTree = convertElementsToTree(elements);
         setElementsState({ elements: __spreadArray([], elements, true), elementsInTree: elementsInTree });
@@ -9711,6 +9719,17 @@ var Paper = function (props) {
     useEffect(function () {
         setTexts(__spreadArray([], props.texts, true));
     }, [props.texts]);
+    useEffect(function () {
+        var off = manuallyTriggerRenderElementsHandler(function () {
+            elementsState.elements.forEach(function (element) {
+                element.version = (element.version || 0) + 1;
+            });
+            handleElementsState(elementsState.elements);
+        });
+        return function () {
+            off();
+        };
+    }, [elementsState.elements, handleElementsState, manuallyTriggerRenderElementsHandler]);
     useEffect(function () {
         var off = manuallyTriggerRenderElementHandler(function (elementId) {
             //find the element
@@ -9835,7 +9854,7 @@ var Paper = function (props) {
     useEffect(function () {
         //Listen a new text added, then re-render the element component
         //TODO: to be moved to Element component
-        var addedTextCancelers = elementsRef.current.map(function (element) {
+        var addedTextCancelers = elementsState.elements.map(function (element) {
             var _a;
             return (_a = element.onAddedText) === null || _a === void 0 ? void 0 : _a.call(element, function (newText) {
                 logger.info("A new text has been added to element ".concat(element.id));
@@ -9844,7 +9863,7 @@ var Paper = function (props) {
         });
         // Listen a text deleted, then re-render the element component
         //TODO: to be moved to Element component
-        var deletedTextCancelers = elementsRef.current.map(function (element) {
+        var deletedTextCancelers = elementsState.elements.map(function (element) {
             var _a;
             return (_a = element.onDeletedText) === null || _a === void 0 ? void 0 : _a.call(element, function (deletedTextId) {
                 logger.info("A text has been deleted from element ".concat(element.id));
@@ -10656,7 +10675,7 @@ var Editor = function (_a) {
         React.createElement(ZoomContextProvider, null,
             React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, 
                 //onPortsChanged={handlePortsChanged}
-                onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
+                onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementsHandler: editorContext.manuallyTriggerRenderElementsHandler.bind(editorContext), manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 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, addPointToList, automationAddPointsToLink, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPointsFromPathData, getPointsFromPathElement, getPortAbsolutePosition, getRectangleCorners, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement, windowsPositionToPaperPosition };