orcasvn-react-diagrams 0.1.79 → 0.1.81

package/dist/cjs/index.js

@@ -943,10 +943,17 @@ var EditorContext = /** @class */ (function () {
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
         this.onElementAddedHandler(element);
     };
-    EditorContext.prototype.removeElement = function (elementId, parentElementId) {
+    EditorContext.prototype.removeElement = function (elementId) {
+        //find parent element id
+        var element = this.getElement(elementId);
+        var parentElement = element === null || element === void 0 ? void 0 : element.parentElement;
         this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
+        //remove from parent element if parentElementId is provided
+        if (parentElement) {
+            parentElement.childrenElements = parentElement.childrenElements.filter(function (e) { return e.id !== elementId; });
+        }
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
-        this.onElementRemovedHandler(elementId, parentElementId);
+        this.onElementRemovedHandler(elementId, parentElement === null || parentElement === void 0 ? void 0 : parentElement.id);
     };
     EditorContext.prototype.getLink = function (linkId) {
         return this._links.find(function (l) { return l.id === linkId; });
@@ -8856,6 +8863,14 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
     return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
+var transformPositionToAnchoredPosition = function (position, elementSize, anchor) {
+    var anchoredPosition = { x: position.x, y: position.y };
+    if (anchor === exports.PositioningAnchor.Center) {
+        anchoredPosition.x = position.x - elementSize.width / 2;
+        anchoredPosition.y = position.y - elementSize.height / 2;
+    }
+    return anchoredPosition;
+};
 var Element = React.forwardRef(function (props, forwardedRef) {
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
     // const elementObj = props.element;
@@ -8863,7 +8878,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     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];
+    var _b = React.useState(__assign({}, transformPositionToAnchoredPosition(props.element.position, props.element.size, props.element.positionAnchor || exports.PositioningAnchor.TopLeft))), position = _b[0], setPosition = _b[1];
     //state for size
     var _c = React.useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
     var _d = React.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
@@ -8917,7 +8932,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             portsRef.current = newState;
             return newState;
         });
-    }, [normalizePortPosition]);
+    }, [normalizePortPosition, onPortMoved, id, _paperEventEmitterContext]);
     // useLayoutEffect(() => {
     //     if (!hasNormalizedPortPositions.current && elementRef.current) {
     //         handlePortsState(portsRef.current);
@@ -8942,9 +8957,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //update element position
     var updateElementPosition = React.useCallback(function (newPosition) {
-        setPosition({ x: newPosition.x, y: newPosition.y });
+        var newPositionAdjusted = transformPositionToAnchoredPosition(newPosition, { width: size.width, height: size.height }, props.element.positionAnchor || exports.PositioningAnchor.TopLeft);
+        setPosition(newPositionAdjusted);
         props.element.position = { x: newPosition.x, y: newPosition.y };
-    }, [props.element]);
+    }, [props.element, size.width, size.height]);
     //update element size
     var updateElementSize = React.useCallback(function (newSize) {
         setSize({ width: newSize.width, height: newSize.height });
@@ -10511,7 +10527,7 @@ var Paper = function (props) {
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id, "-").concat(element.version), element: element, 
                 //id={element.id}
-                //ref={(refDOM) => element.DOM = refDOM}
+                ref: function (refDOM) { return element.DOM = refDOM; }, 
                 //height={element.size.height}
                 //width={element.size.width}
                 //x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}

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

@@ -30,7 +30,7 @@ export declare class EditorContext implements IEditorContext {
     get configuration(): IEditorConfiguration;
     getElement(elementId: string): IElement | undefined;
     addElement(element: IElement): void;
-    removeElement(elementId: string, parentElementId?: string): void;
+    removeElement(elementId: string): void;
     getLink(linkId: string): IElementLink | undefined;
     addLink(link: IElementLink): void;
     removeLink(linkId: string): void;

package/dist/esm/index.js

@@ -939,10 +939,17 @@ var EditorContext = /** @class */ (function () {
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
         this.onElementAddedHandler(element);
     };
-    EditorContext.prototype.removeElement = function (elementId, parentElementId) {
+    EditorContext.prototype.removeElement = function (elementId) {
+        //find parent element id
+        var element = this.getElement(elementId);
+        var parentElement = element === null || element === void 0 ? void 0 : element.parentElement;
         this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
+        //remove from parent element if parentElementId is provided
+        if (parentElement) {
+            parentElement.childrenElements = parentElement.childrenElements.filter(function (e) { return e.id !== elementId; });
+        }
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
-        this.onElementRemovedHandler(elementId, parentElementId);
+        this.onElementRemovedHandler(elementId, parentElement === null || parentElement === void 0 ? void 0 : parentElement.id);
     };
     EditorContext.prototype.getLink = function (linkId) {
         return this._links.find(function (l) { return l.id === linkId; });
@@ -8852,6 +8859,14 @@ var ElementWrapper = forwardRef(function (_a, ref) {
     return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
+var transformPositionToAnchoredPosition = function (position, elementSize, anchor) {
+    var anchoredPosition = { x: position.x, y: position.y };
+    if (anchor === PositioningAnchor.Center) {
+        anchoredPosition.x = position.x - elementSize.width / 2;
+        anchoredPosition.y = position.y - elementSize.height / 2;
+    }
+    return anchoredPosition;
+};
 var Element = forwardRef(function (props, forwardedRef) {
     var _paperEventEmitterContext = useContext(paperEventEmitterContext);
     // const elementObj = props.element;
@@ -8859,7 +8874,7 @@ var Element = forwardRef(function (props, forwardedRef) {
     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 = useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
+    var _b = useState(__assign({}, transformPositionToAnchoredPosition(props.element.position, props.element.size, props.element.positionAnchor || PositioningAnchor.TopLeft))), position = _b[0], setPosition = _b[1];
     //state for size
     var _c = useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
     var _d = useState(), selectedPort = _d[0], setSelectedPort = _d[1];
@@ -8913,7 +8928,7 @@ var Element = forwardRef(function (props, forwardedRef) {
             portsRef.current = newState;
             return newState;
         });
-    }, [normalizePortPosition]);
+    }, [normalizePortPosition, onPortMoved, id, _paperEventEmitterContext]);
     // useLayoutEffect(() => {
     //     if (!hasNormalizedPortPositions.current && elementRef.current) {
     //         handlePortsState(portsRef.current);
@@ -8938,9 +8953,10 @@ var Element = forwardRef(function (props, forwardedRef) {
     var elementAbsPosition = useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //update element position
     var updateElementPosition = useCallback(function (newPosition) {
-        setPosition({ x: newPosition.x, y: newPosition.y });
+        var newPositionAdjusted = transformPositionToAnchoredPosition(newPosition, { width: size.width, height: size.height }, props.element.positionAnchor || PositioningAnchor.TopLeft);
+        setPosition(newPositionAdjusted);
         props.element.position = { x: newPosition.x, y: newPosition.y };
-    }, [props.element]);
+    }, [props.element, size.width, size.height]);
     //update element size
     var updateElementSize = useCallback(function (newSize) {
         setSize({ width: newSize.width, height: newSize.height });
@@ -10507,7 +10523,7 @@ var Paper = function (props) {
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id, "-").concat(element.version), element: element, 
                 //id={element.id}
-                //ref={(refDOM) => element.DOM = refDOM}
+                ref: function (refDOM) { return element.DOM = refDOM; }, 
                 //height={element.size.height}
                 //width={element.size.width}
                 //x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}