orcasvn-react-diagrams 0.1.72 → 0.1.74

package/dist/cjs/index.js

@@ -1351,65 +1351,6 @@ var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
 var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
 var PORT_DEFAULT_SIZE = 20;
 
-var Logger = /** @class */ (function () {
-    function Logger() {
-        this.level = 'info';
-        this.customLogger = null;
-    }
-    Logger.prototype.setLevel = function (level) {
-        this.level = level;
-    };
-    Logger.prototype.setCustomLogger = function (logger) {
-        this.customLogger = logger;
-    };
-    Logger.prototype.log = function (level, message) {
-        var _a;
-        var optionalParams = [];
-        for (var _i = 2; _i < arguments.length; _i++) {
-            optionalParams[_i - 2] = arguments[_i];
-        }
-        var levels = ['error', 'warn', 'info', 'debug'];
-        if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
-            if (this.customLogger) {
-                this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
-            }
-            else {
-                console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
-            }
-        }
-    };
-    Logger.prototype.error = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
-    };
-    Logger.prototype.warn = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
-    };
-    Logger.prototype.info = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
-    };
-    Logger.prototype.debug = function (msg) {
-        var optionalParams = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            optionalParams[_i - 1] = arguments[_i];
-        }
-        this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
-    };
-    return Logger;
-}());
-var logger = new Logger();
-
 /**
  * Created by Alex Bol on 2/18/2017.
  */
@@ -7211,6 +7152,65 @@ var getElementRotationInfo = function (element) {
     return rotationAngle;
 };
 
+var Logger = /** @class */ (function () {
+    function Logger() {
+        this.level = 'info';
+        this.customLogger = null;
+    }
+    Logger.prototype.setLevel = function (level) {
+        this.level = level;
+    };
+    Logger.prototype.setCustomLogger = function (logger) {
+        this.customLogger = logger;
+    };
+    Logger.prototype.log = function (level, message) {
+        var _a;
+        var optionalParams = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            optionalParams[_i - 2] = arguments[_i];
+        }
+        var levels = ['error', 'warn', 'info', 'debug'];
+        if (this.level && levels.indexOf(level) <= levels.indexOf(this.level)) {
+            if (this.customLogger) {
+                this.customLogger.apply(this, __spreadArray([level, message], optionalParams, false));
+            }
+            else {
+                console[level] ? (_a = console)[level].apply(_a, __spreadArray([message], optionalParams, false)) : console.log.apply(console, __spreadArray([message], optionalParams, false));
+            }
+        }
+    };
+    Logger.prototype.error = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['error', msg], optionalParams, false));
+    };
+    Logger.prototype.warn = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['warn', msg], optionalParams, false));
+    };
+    Logger.prototype.info = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['info', msg], optionalParams, false));
+    };
+    Logger.prototype.debug = function (msg) {
+        var optionalParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            optionalParams[_i - 1] = arguments[_i];
+        }
+        this.log.apply(this, __spreadArray(['debug', msg], optionalParams, false));
+    };
+    return Logger;
+}());
+var logger = new Logger();
+
 /**
  * Check if position 1 is within the radius r of position 2
  * @returns boolean
@@ -7870,14 +7870,14 @@ var SelectionFrame = function (props) {
         }
     };
     React.useEffect(function () {
-        logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
-            draggingCircle: draggingCircle,
-            startX: startX,
-            startY: startY,
-            width: width,
-            height: height,
-            propMovingRate: propMovingRate
-        });
+        // logger.debug('SelectionFrame: circleHandleMouseDown triggered', {
+        //     draggingCircle,
+        //     startX,
+        //     startY,
+        //     width,
+        //     height,
+        //     propMovingRate
+        // });
         var circleHandleMouseMove = function (event) {
             var mouseEvent = event;
             if (draggingCircle) {
@@ -7925,12 +7925,12 @@ var SelectionFrame = function (props) {
         container.addEventListener('mousemove', circleHandleMouseMove);
         container.addEventListener('mouseup', circleHandleMouseUp);
         //logging the start of the circle handle mouse move
-        logger.debug('SelectionFrame: circleHandleMouseMove started', container);
+        //logger.debug('SelectionFrame: circleHandleMouseMove started', container);
         return function () {
             container.removeEventListener('mousemove', circleHandleMouseMove);
             container.removeEventListener('mouseup', circleHandleMouseUp);
             //logging the end of the circle handle mouse move
-            logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
+            //logger.debug('SelectionFrame: circleHandleMouseMove ended', container);
         };
     }, [draggingCircle, width, height, objectX, objectY, lastMoveTime, propContainer, getMousePosition, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
@@ -8860,7 +8860,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
     // const elementObj = props.element;
     var beingSelected = props.beingSelected, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, onMoving = props.onMoving, onMoved = props.onMoved, onResized = props.onResized, onPortMoved = props.onPortMoved, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onClick = props.onClick, onContextMenu = props.onContextMenu, onPortContextMenu = props.onPortContextMenu, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort, draggingByDefault = props.draggingByDefault, parentDOM = props.parentDOM;
-    var _a = props.element, id = _a.id, cssClass = _a.cssClass, textsPlaceHolderClassName = _a.textsPlaceHolderClassName, portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize, textsPlaceHolderFlexStyle = _a.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = _a.textsPlaceHolderFlexboxPosition, resizability = _a.resizability, renderShape = _a.renderShape;
+    var _a = props.element, id = _a.id, cssClass = _a.cssClass; _a.textsPlaceHolderClassName; var portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize; _a.textsPlaceHolderFlexStyle; _a.textsPlaceHolderFlexboxPosition; var resizability = _a.resizability, renderShape = _a.renderShape;
     var propPorts = props.element.ports;
     //state for position
     var _b = React.useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
@@ -8884,10 +8884,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         var newPosition = correctPortPositionInElement(tempNewPosition, size.width, size.height, portMoveableAreas, portSlideRailSVGClassName, elementRef.current || undefined);
         return newPosition || tempNewPosition;
     }, [size.width, size.height, portMoveableAreas, portSlideRailSVGClassName]);
-    //set port ref when ports state is changed
-    React.useLayoutEffect(function () {
-        portsRef.current = ports;
-    }, [ports]);
     //Handle ports state when propPorts is changed
     var handlePortsState = React.useCallback(function (newPorts) {
         setPorts(function (prev) {
@@ -8903,17 +8899,27 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 }
                 //Handle the case new port is created and the ref of the port is not defined
                 if (!newPortState.ref) {
-                    var newPosition = normalizePortPosition(newPortState.position);
                     // onPortMoved?.(p, id, newPortState.position, newPosition)
                     // _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition)
-                    newPortState.position = newPosition;
                     newPortState.ref = React.createRef();
                 }
+                //if (!newPortState.hasNormalizedPosition && elementRef.current) {
+                var newPosition = normalizePortPosition(newPortState.position);
+                newPortState.position = newPosition;
+                //newPortState.hasNormalizedPosition = true;
+                //}
                 return newPortState;
             });
+            portsRef.current = newState;
             return newState;
         });
     }, [normalizePortPosition]);
+    // useLayoutEffect(() => {
+    //     if (!hasNormalizedPortPositions.current && elementRef.current) {
+    //         handlePortsState(portsRef.current);
+    //         hasNormalizedPortPositions.current = true;
+    //     }
+    // });
     var getParentAbsolutePosition = React.useCallback(function () {
         return props.element.parentElement ? getAbsolutePosition(props.element.parentElement) : undefined;
     }, [props.element.parentElement]);
@@ -8992,29 +8998,29 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             eventListener.off();
         };
     }, [_paperEventEmitterContext]);
-    React.useEffect(function () {
-        //listen element resize to update position of the ports by element size.
-        var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
-            //let isChanged = false;
-            var newPorts = portsRef.current.map(function (port) {
-                var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
-                //Check port moved
-                if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
-                    //isChanged = true;
-                    _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition);
-                }
-                port.position = newPosition;
-                return port;
-            });
-            handlePortsState(newPorts);
-            // if (isChanged) {
-            //     onPortsChanged?.(newPorts, id);
-            // }
-        });
-        return function () {
-            eleResizeListener.off();
-        };
-    }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports]);
+    // useEffect(() => {
+    //     //listen element resize to update position of the ports by element size.
+    //     const eleResizeListener = _paperEventEmitterContext.onElementResized(id, () => {
+    //         //let isChanged = false;
+    //         const newPorts = portsRef.current.map(port => {
+    //             const newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y })
+    //             //Check port moved
+    //             if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
+    //                 //isChanged = true;
+    //                 _paperEventEmitterContext.emitPortMoved(port, id, port.position, newPosition)
+    //             }
+    //             port.position = newPosition;
+    //             return port;
+    //         })
+    //         handlePortsState(newPorts);
+    //         // if (isChanged) {
+    //         //     onPortsChanged?.(newPorts, id);
+    //         // }
+    //     })
+    //     return () => {
+    //         eleResizeListener.off();
+    //     }
+    // }, [_paperEventEmitterContext, id, normalizePortPosition, size, portMoveableAreas, portSlideRailSVGClassName, handlePortsState, props.element.ports])
     //list to port added
     React.useEffect(function () {
         var _a, _b;
@@ -9075,7 +9081,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     }, [_paperEventEmitterContext]);
     var handleSelectedPort = React.useCallback(function (portId, e) {
         e.stopPropagation();
-        logger.debug('Port selected', portId, e);
+        //logger.debug('Port selected', portId, e);
         var port = ports.find(function (p) { return p.id === portId; });
         if (!port)
             return;
@@ -9123,7 +9129,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var handlePortMouseDown = React.useCallback(function (portId, e) {
         e.stopPropagation();
         //log debugger 
-        logger.debug('Port mouse down', portId, e);
+        //logger.debug('Port mouse down', portId, e);
         var port = portsRef.current.find(function (p) { return p.id === portId; });
         if (!port)
             return;
@@ -9329,14 +9335,6 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     //     }
     //     return element;
     // }
-    //Re-render port again after rendered to automation rotate port
-    //Because elementRef.current equals null in first render so automation rotate port is incorrect.
-    //TODO: check if this is still needed -> Still needed
-    // useLayoutEffect(() => {
-    //     if (elementRef.current) {
-    //         handlePortsState(portsRef.current);
-    //     }
-    // }, [handlePortsState])
     //cache render ports
     var renderedPorts = React.useMemo(function () {
         return ports === null || ports === void 0 ? void 0 : ports.map(function (p, index) {
@@ -9361,7 +9359,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
         });
     }, [id, texts, container, elementAbsPosition, handleTextChanged]);
     //log element render
-    logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
+    //logger.debug('Rendering Element', id, position.x, position.y, size.width, size.height, cssClass, portPlaceholderShape, children, container, getParentAbsolutePosition(), textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName, texts, ports, portSlideRailSVGClassName, portMoveableAreas, portDirection, defaultPortSize);
     return (React.createElement(ElementWrapper, { key: "ElementWrapper", ref: elementRef, x: position.x, y: position.y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseDown: handleElementMouseDown, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } }, renderShape === null || renderShape === void 0 ? void 0 :
         renderShape(props),
         !!container && !!beingSelected &&
@@ -10093,7 +10091,6 @@ var Paper = function (props) {
         linksRef.current[updatedLinkIndex].points = points;
     }, []);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
-        var _a;
         var element = elementsState.elements.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
@@ -10134,23 +10131,23 @@ var Paper = function (props) {
             //To avoid re-render
             // setElements(prev => {
             //     const newElements = [...prev]
-            var updatedElement = elementsState.elements.find(function (e) { return e.id === elementId; });
-            if (updatedElement) {
-                updatedElement.ports = (_a = updatedElement.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-                    if (p.id === port.id) {
-                        p.position = newPosition;
-                    }
-                    return p;
-                });
-            }
-            rerenderWhenAnyElementChanged();
+            // const updatedElement = elementsState.elements.find(e => e.id === elementId);
+            // if (updatedElement) {
+            //     updatedElement.ports = updatedElement.ports?.map(p => {
+            //         if (p.id === port.id) {
+            //             p.position = newPosition
+            //         }
+            //         return p
+            //     });
+            // }
+            // rerenderWhenAnyElementChanged();
             //     return newElements
             // });
             if (onPortMoved) {
                 onPortMoved(newPosition, port, element);
             }
         }
-    }, [onPortMoved, elementsState, rerenderWhenAnyElementChanged]);
+    }, [onPortMoved, elementsState]);
     React.useEffect(function () {
         //on port manually trigger render
         var off = manuallyTriggerRenderPortHandler(function (portId, elementId) {