orcasvn-react-diagrams 0.1.8 → 0.1.9

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var require$$0 = require('react-dom');
+var Flexbox = require('react-svg-flexbox');
 
 exports.PositioningAnchor = void 0;
 (function (PositioningAnchor) {
@@ -441,7 +442,7 @@ function generateUniqueId() {
 }
 
 var Element$1 = /** @class */ (function () {
-    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement) {
+    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
             enabled: true,
@@ -460,6 +461,9 @@ var Element$1 = /** @class */ (function () {
         this.portSlideRailSVGClassName = portSlideRailSVGClassName;
         this.portDirection = portDirection;
         this.parentElement = parentElement;
+        this.textsPlaceHolderClassName = textsPlaceHolderClassName;
+        this.textsPlaceHolderFlexStyle = textsPlaceHolderFlexStyle;
+        this.textsPlaceHolderFlexboxPosition = textsPlaceHolderFlexboxPosition;
     }
     Object.defineProperty(Element.prototype, "id", {
         get: function () {
@@ -612,13 +616,14 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(content, width, height, x, y, align, fontSize, border) {
+    function Text(content, width, height, x, y, align, fontSize, border, style) {
         this._id = generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
         this.border = border;
         this.size = { width: width, height: height };
+        this.style = style;
         if (x && y) {
             this.position = { x: x, y: y };
         }
@@ -838,7 +843,7 @@ var Crescent = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,50 A50,50 0 1,1 100,50 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
 };
 
 var Rectangle = function (props) {
@@ -1396,9 +1401,14 @@ var Text = React.forwardRef(function (_a, ref) {
 });
 var Text$1 = React.memo(Text);
 
-var Port = React.forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, renderShape = props.renderShape;
+var Port1 = React.forwardRef(function (props, ref) {
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, calculateRotationAngle = props.calculateRotationAngle, renderShape = props.renderShape;
     var textRef = React.useRef(null);
+    var rotationAngle = React.useMemo(function () {
+        if (!calculateRotationAngle)
+            return 0;
+        return calculateRotationAngle(x, y);
+    }, [calculateRotationAngle, x, y]);
     var renderLabel = function (label) {
         var content = label.content, size = label.size;
         var position = label.position || PORT_LABEL_POSITION;
@@ -1407,7 +1417,7 @@ var Port = React.forwardRef(function (props, ref) {
     var renderedShape = React.useMemo(function () {
         if (renderShape) {
             var RenderShape = renderShape;
-            return (React.createElement(RenderShape, __assign({ ref: ref }, props)));
+            return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
         }
         else {
             return React.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
@@ -1416,7 +1426,8 @@ var Port = React.forwardRef(function (props, ref) {
     return (React.createElement(React.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
-});
+});
+var Port = React.memo(Port1);
 
 // Render the svg <path> element
 function getCurvePathData(points, smoothing, closed) {
@@ -7642,7 +7653,7 @@ var checkPositionOnLine = function (position, line) {
 
 var Element = function (props) {
     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, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, onClick = props.onClick, 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 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, onClick = props.onClick, 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 _d = React.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
     var _e = React.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React.createRef() });
@@ -7770,11 +7781,11 @@ var Element = function (props) {
         }
         return coordinates;
     };
-    var getSlideRailSVG = function (portSlideRailSVGClassName) {
+    var getSlideRailSVG = React.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
-    };
+    }, [elementRef.current]);
     var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
@@ -7937,17 +7948,16 @@ var Element = function (props) {
         }
     };
     //Get rotate angle of port by port direction is defined.
-    var rotatePort = React.useCallback(function (port) {
-        console.info('calculating port rotation', port);
+    var rotatePort = React.useCallback(function (x, y) {
+        console.info('calculating port rotation', x, y);
         if (!portSlideRailSVGClassName)
             return 0;
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
             return 0;
         var rotationAngle = 0;
-        port.id; var position = port.position; port.size;
         //Standardize the port position to be in the correct position
-        var normalizedPosition = normalizePortPosition(position);
+        var normalizedPosition = normalizePortPosition({ x: x, y: y });
         switch (portDirection) {
             case exports.SubObjectDirection.Radial:
                 var center = {
@@ -7977,7 +7987,7 @@ var Element = function (props) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection]);
+    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
     var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -7999,6 +8009,8 @@ var Element = function (props) {
             enabled: false,
             keepRatio: false
         },
+        // width: selectedPort?.size.width,
+        // height: selectedPort?.size.height,
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
@@ -8008,12 +8020,14 @@ var Element = function (props) {
             ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
-            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, rotation: rotatePort(p), label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
-        }), texts === null || texts === void 0 ? void 0 :
-        texts.map(function (t, index) {
-            var _a, _b;
-            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, 
+                // rotation={rotatePort(p)}
+                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
         }),
+        React.createElement(Flexbox, { className: textsPlaceHolderClassName, style: textsPlaceHolderFlexStyle, x: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.x, y: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.y }, texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
+            var _a, _b;
+            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+        })),
         children));
 };
 
@@ -8740,7 +8754,7 @@ var Paper = function (props) {
                 setMouseDownedOnPaper(false);
             }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
             // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); } }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };
     return (React.createElement("div", { style: { position: "relative" } },
         React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),

package/dist/cjs/types/components/ports/port.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { IPortProps } from "../../models/IPortProps";
-export declare const Port: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
+export declare const Port: React.MemoExoticComponent<React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>>;

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

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

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { SubObjectDirection } from "./enums/SubObjectDirection";
 import IElementProps from "./IElementProps";
+import IFlexboxType from "./IFlexboxType";
 import IPort from "./IPort";
 import IResizability from "./IResizability";
 import IText from "./IText";
@@ -28,4 +29,7 @@ export default interface IElement {
     onAddedPort: (callback: (newPort: IPort) => void) => (() => void);
     deletePort: (id: string) => void;
     onDeletedPort: (callback: (id: string) => void) => (() => void);
+    textsPlaceHolderClassName?: string;
+    textsPlaceHolderFlexStyle?: IFlexboxType;
+    textsPlaceHolderFlexboxPosition?: IPosition;
 }

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

@@ -2,6 +2,7 @@
 import { onElementMovedHandler, onElementResizedHandler, onPortMouseDownHandler, onPortMouseUpHandler, onPortMovedHandler } from "./callbackTypes";
 import { SubObjectDirection } from "./enums/SubObjectDirection";
 import IElementLink from "./IElementLink";
+import IFlexboxType from "./IFlexboxType";
 import IPort from "./IPort";
 import IText from "./IText";
 import IPosition from "./position";
@@ -32,5 +33,8 @@ interface IElementProps {
     onMouseUp?: (event: React.MouseEvent) => void;
     onMouseUpAtLinkedPortPlaceholder?: (link: IElementLink, position: IPosition) => void;
     onTextUpdated?: (textId: string, newTextContent: string) => void;
+    textsPlaceHolderClassName?: string;
+    textsPlaceHolderFlexStyle?: IFlexboxType;
+    textsPlaceHolderFlexboxPosition?: IPosition;
 }
 export default IElementProps;

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

@@ -0,0 +1,20 @@
+export default interface IFlexboxType {
+    width?: number;
+    height?: number;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexWrap?: 'no-wrap' | 'wrap';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+    alignItems?: 'flex-start' | 'flex-end' | 'center';
+    alignSelf?: 'flex-start' | 'flex-end' | 'center';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch';
+    padding?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    margin?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+}

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

@@ -21,4 +21,5 @@ export interface IPortProps {
     onPortLabelResized?: (width: number, height: number) => void;
     onPortLabelContentChanged?: (ev: React.ChangeEvent, newValue: string) => void;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
+    calculateRotationAngle?: (x: number, y: number) => number;
 }

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

@@ -1,4 +1,5 @@
 import { TextAlign } from "./enums/TextAlign";
+import IFlexboxType from "./IFlexboxType";
 import IPosition from "./position";
 import ISize from "./size";
 export default interface IText {
@@ -9,6 +10,7 @@ export default interface IText {
     align?: TextAlign;
     fontSize?: number;
     border?: string;
+    style?: IFlexboxType;
 }
 export interface IPaperText extends IText {
     position: IPosition;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextAlign } from "./enums/TextAlign";
+import IFlexboxType from "./IFlexboxType";
 import IText from "./IText";
 export default interface ITextProps {
     id: string;
@@ -11,6 +12,7 @@ export default interface ITextProps {
     align?: TextAlign;
     fontSize?: number;
     border?: string;
+    style?: IFlexboxType;
     container: Element;
     onSelected?: (text: IText) => void;
     onMoved?: (x: number, y: number) => void;

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

@@ -8,6 +8,7 @@ import IPort from "../IPort";
 import IText from "../IText";
 import { SubObjectDirection } from "../enums/SubObjectDirection";
 import EventEmitter from "eventemitter3";
+import IFlexboxType from "../IFlexboxType";
 export default class Element implements IElement {
     private readonly _id;
     protected _position: IPosition;
@@ -27,8 +28,11 @@ export default class Element implements IElement {
     portDirection?: SubObjectDirection;
     onResized?: ((width: number, height: number) => void) | undefined;
     onMoved?: ((x: number, y: number) => void) | undefined;
+    textsPlaceHolderClassName?: string;
+    textsPlaceHolderFlexStyle?: IFlexboxType;
+    textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
-    constructor(x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: Element);
+    constructor(x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: Element, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

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

@@ -1,4 +1,5 @@
 import { TextAlign } from "../enums";
+import IFlexboxType from "../IFlexboxType";
 import IText from "../IText";
 import IPosition from "../position";
 import ISize from "../size";
@@ -10,6 +11,7 @@ export default class Text implements IText {
     align?: TextAlign;
     fontSize?: number;
     border?: string;
-    constructor(content: string, width: number, height: number, x?: number, y?: number, align?: TextAlign, fontSize?: number, border?: string);
+    style?: IFlexboxType;
+    constructor(content: string, width: number, height: number, x?: number, y?: number, align?: TextAlign, fontSize?: number, border?: string, style?: IFlexboxType);
     get id(): string;
 }

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

@@ -2,7 +2,9 @@ import Element from "./Element";
 import IResizability from "../IResizability";
 import IPort from "../IPort";
 import IText from "../IText";
+import IFlexboxType from '../IFlexboxType';
+import IPosition from '../position';
 export default class RectangularFrameElement extends Element {
     resizability: IResizability;
-    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[]);
+    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[], textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
 }

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useMemo, useCallback, useEffect, createContext, useState, useRef, useContext, memo, useLayoutEffect } from 'react';
 import require$$0 from 'react-dom';
+import Flexbox from 'react-svg-flexbox';
 
 var PositioningAnchor;
 (function (PositioningAnchor) {
@@ -437,7 +438,7 @@ function generateUniqueId() {
 }
 
 var Element$1 = /** @class */ (function () {
-    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement) {
+    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
             enabled: true,
@@ -456,6 +457,9 @@ var Element$1 = /** @class */ (function () {
         this.portSlideRailSVGClassName = portSlideRailSVGClassName;
         this.portDirection = portDirection;
         this.parentElement = parentElement;
+        this.textsPlaceHolderClassName = textsPlaceHolderClassName;
+        this.textsPlaceHolderFlexStyle = textsPlaceHolderFlexStyle;
+        this.textsPlaceHolderFlexboxPosition = textsPlaceHolderFlexboxPosition;
     }
     Object.defineProperty(Element.prototype, "id", {
         get: function () {
@@ -608,13 +612,14 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(content, width, height, x, y, align, fontSize, border) {
+    function Text(content, width, height, x, y, align, fontSize, border, style) {
         this._id = generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
         this.border = border;
         this.size = { width: width, height: height };
+        this.style = style;
         if (x && y) {
             this.position = { x: x, y: y };
         }
@@ -834,7 +839,7 @@ var Crescent = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,50 A50,50 0 1,1 100,50 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
 };
 
 var Rectangle = function (props) {
@@ -1392,9 +1397,14 @@ var Text = forwardRef(function (_a, ref) {
 });
 var Text$1 = memo(Text);
 
-var Port = forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, renderShape = props.renderShape;
+var Port1 = forwardRef(function (props, ref) {
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, calculateRotationAngle = props.calculateRotationAngle, renderShape = props.renderShape;
     var textRef = useRef(null);
+    var rotationAngle = useMemo(function () {
+        if (!calculateRotationAngle)
+            return 0;
+        return calculateRotationAngle(x, y);
+    }, [calculateRotationAngle, x, y]);
     var renderLabel = function (label) {
         var content = label.content, size = label.size;
         var position = label.position || PORT_LABEL_POSITION;
@@ -1403,7 +1413,7 @@ var Port = forwardRef(function (props, ref) {
     var renderedShape = useMemo(function () {
         if (renderShape) {
             var RenderShape = renderShape;
-            return (React.createElement(RenderShape, __assign({ ref: ref }, props)));
+            return (React.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
         }
         else {
             return React.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
@@ -1412,7 +1422,8 @@ var Port = forwardRef(function (props, ref) {
     return (React.createElement(React.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
-});
+});
+var Port = memo(Port1);
 
 // Render the svg <path> element
 function getCurvePathData(points, smoothing, closed) {
@@ -7638,7 +7649,7 @@ var checkPositionOnLine = function (position, line) {
 
 var Element = function (props) {
     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, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, onClick = props.onClick, 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 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, onClick = props.onClick, 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 _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.createRef() });
@@ -7766,11 +7777,11 @@ var Element = function (props) {
         }
         return coordinates;
     };
-    var getSlideRailSVG = function (portSlideRailSVGClassName) {
+    var getSlideRailSVG = useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
-    };
+    }, [elementRef.current]);
     var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
@@ -7933,17 +7944,16 @@ var Element = function (props) {
         }
     };
     //Get rotate angle of port by port direction is defined.
-    var rotatePort = useCallback(function (port) {
-        console.info('calculating port rotation', port);
+    var rotatePort = useCallback(function (x, y) {
+        console.info('calculating port rotation', x, y);
         if (!portSlideRailSVGClassName)
             return 0;
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
             return 0;
         var rotationAngle = 0;
-        port.id; var position = port.position; port.size;
         //Standardize the port position to be in the correct position
-        var normalizedPosition = normalizePortPosition(position);
+        var normalizedPosition = normalizePortPosition({ x: x, y: y });
         switch (portDirection) {
             case SubObjectDirection.Radial:
                 var center = {
@@ -7973,7 +7983,7 @@ var Element = function (props) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection]);
+    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
     var renderedShape = useMemo(function () {
         if (renderShape)
             return renderShape(props);
@@ -7995,6 +8005,8 @@ var Element = function (props) {
             enabled: false,
             keepRatio: false
         },
+        // width: selectedPort?.size.width,
+        // height: selectedPort?.size.height,
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
@@ -8004,12 +8016,14 @@ var Element = function (props) {
             ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
-            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, rotation: rotatePort(p), label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
-        }), texts === null || texts === void 0 ? void 0 :
-        texts.map(function (t, index) {
-            var _a, _b;
-            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, 
+                // rotation={rotatePort(p)}
+                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
         }),
+        React.createElement(Flexbox, { className: textsPlaceHolderClassName, style: textsPlaceHolderFlexStyle, x: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.x, y: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.y }, texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
+            var _a, _b;
+            return React.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+        })),
         children));
 };
 
@@ -8736,7 +8750,7 @@ var Paper = function (props) {
                 setMouseDownedOnPaper(false);
             }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
             // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); } }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };
     return (React.createElement("div", { style: { position: "relative" } },
         React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),