orcasvn-react-diagrams 0.1.11 → 0.1.12

package/dist/cjs/index.js

@@ -561,10 +561,15 @@ var Element$1 = /** @class */ (function () {
 }());
 
 var Port$1 = /** @class */ (function () {
-    function Port(x, y, width, height, label, renderShape) {
+    function Port(x, y, label, renderShape, width, height) {
         this._id = generateUniqueId();
         this.position = { x: x, y: y };
-        this.size = { width: width, height: height };
+        if (!height) {
+            height = width;
+        }
+        if (width && height) {
+            this.size = { width: width, height: height };
+        }
         this.label = label;
         this.renderShape = renderShape;
     }
@@ -803,10 +808,10 @@ var CustomShape = React$1.forwardRef(function (props, ref) {
 
 var CustomPortFromJSXElement = /** @class */ (function (_super) {
     __extends(CustomPortFromJSXElement, _super);
-    function CustomPortFromJSXElement(x, y, width, height, renderCustomShape, label, shapePositioningAnchor) {
-        var _this = _super.call(this, x, y, width, height, label, React$1.forwardRef(function (props, ref) {
+    function CustomPortFromJSXElement(x, y, renderCustomShape, label, shapePositioningAnchor, width, height) {
+        var _this = _super.call(this, x, y, label, React$1.forwardRef(function (props, ref) {
             return (React$1.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapePositioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, renderCustomShape));
-        })) || this;
+        }), width, height) || this;
         return _this;
     }
     return CustomPortFromJSXElement;
@@ -814,8 +819,8 @@ var CustomPortFromJSXElement = /** @class */ (function (_super) {
 
 var CustomPortFromShape = /** @class */ (function (_super) {
     __extends(CustomPortFromShape, _super);
-    function CustomPortFromShape(x, y, width, height, shape, label) {
-        return _super.call(this, x, y, width, height, label, shape) || this;
+    function CustomPortFromShape(x, y, shape, label, width, height) {
+        return _super.call(this, x, y, label, shape, width, height) || this;
     }
     return CustomPortFromShape;
 }(Port$1));
@@ -935,10 +940,12 @@ var EVENT_NAME = {
     ELEMENT_DRAGGED: 'element_dragged',
     ELEMENT_RESIZED: 'element_resized',
     ELEMENT_DELETED: 'element_deleted',
+    ELEMENT_SELECTED: 'element_selected',
     //PORT
     PORT_MOUSE_DOWN: 'port_mouse_down',
     PORT_MOUSE_UP: 'port_mouse_up',
     PORT_MOVED: 'port_moved',
+    PORT_SELECTED: 'port_selected',
     //COMMAND
     COMMAND_DELETE_SELECTED_PORT: 'command_delete_selected_port',
     COMMAND_DELETE_SELECTED_LINK: 'command_delete_selected_link',
@@ -969,7 +976,8 @@ var TEXT_MOVING_OFFSET_THRESHOLD = 10;
 var PORT_PLACEHOLDER_DEFAULT_SIZE = 8;
 var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
 var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
-var PORT_MOVING_OFFSET_THRESHOLD = 15;
+var PORT_MOVING_OFFSET_THRESHOLD = 15;
+var PORT_DEFAULT_SIZE = 20;
 
 var SelectionFrame = function (props) {
     var _a;
@@ -1272,6 +1280,30 @@ var onElementLinkEnded = function (callback) {
         off: off
     };
 };
+var emitElementSelected = function (element) {
+    eventEmitter.emit(EVENT_NAME.ELEMENT_SELECTED, element);
+};
+var onElementSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.ELEMENT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.ELEMENT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitPortSelected = function (port, elementId) {
+    eventEmitter.emit(EVENT_NAME.PORT_SELECTED, port, elementId);
+};
+var onPortSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
 var paperEventEmitterContext = React$1.createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
@@ -1282,10 +1314,14 @@ var paperEventEmitterContext = React$1.createContext({
     onPortMouseDown: onPortMouseDown,
     emitPortMoved: emitPortMoved,
     onPortMoved: onPortMoved,
+    emitPortSelected: emitPortSelected,
+    onPortSelected: onPortSelected,
     emitElementMoved: emitElementMoved,
     onElementMoved: onElementMoved,
     emitElementResized: emitElementResized,
     onElementResized: onElementResized,
+    emitElementSelected: emitElementSelected,
+    onElementSelected: onElementSelected,
     emitCommandDeleteSelectedPort: emitCommandDeleteSelectedPort,
     onCommandDeleteSelectedPort: onCommandDeleteSelectedPort,
     emitCommandDeleteSelectedElement: emitCommandDeleteSelectedElement,
@@ -8885,7 +8921,7 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b;
-    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 id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = React$1.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
@@ -8952,9 +8988,30 @@ var Element = function (props) {
             elementEndedListener.off();
         };
     }, []);
+    //Listen another port is selected
+    React$1.useEffect(function () {
+        var portSelectedListener = _paperEventEmitterContext.onPortSelected(function (port, elementId) {
+            if (elementId !== id) {
+                setSelectedPort(undefined);
+            }
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
+    //Listen another element is selected
+    React$1.useEffect(function () {
+        var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
+            setSelectedPort(undefined);
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
     var handleSelectedPort = function (port, e) {
         e.stopPropagation();
         setSelectedPort(port);
+        _paperEventEmitterContext.emitPortSelected(port, id);
     };
     //From one point find another point on the line segment so that the distance between the two points is the shortest.
     var findNearestPointOnSegment = function (position, linePoints) {
@@ -9252,7 +9309,8 @@ var Element = function (props) {
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React$1.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$1.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, 
+            var _a, _b, _c, _d, _e, _f;
+            return React$1.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, 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 });
         }),
@@ -9984,7 +10042,8 @@ var Paper = function (props) {
                 setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 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, 
+                paperEventEmitter.emitElementSelected(element);
+            }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, 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); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };

package/dist/cjs/types/contexts/paperEventEmitterContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import EventEmitter from "eventemitter3";
-import { onCommandDeleteSelectedHandler, OnElementLinkEnded, OnElementLinkStarted, onElementMovedHandler, onElementResizedHandler, onPortMouseDownHandler, onPortMouseUpHandler, onPortMovedHandler } from "../models/callbackTypes";
+import { onCommandDeleteSelectedHandler, OnElementLinkEnded, OnElementLinkStarted, onElementMovedHandler, onElementResizedHandler, OnElementSelected, onPortMouseDownHandler, onPortMouseUpHandler, onPortMovedHandler, OnPortSelected } from "../models/callbackTypes";
 interface IEventListenerReturn {
     off: () => void;
 }
@@ -14,10 +14,14 @@ interface IPaperEventContext {
     onPortMouseDown: (callback: onPortMouseDownHandler) => IEventListenerReturn;
     emitPortMoved: onPortMovedHandler;
     onPortMoved: (callback: onPortMovedHandler) => IEventListenerReturn;
+    emitPortSelected: OnPortSelected;
+    onPortSelected: (callback: OnPortSelected) => IEventListenerReturn;
     emitElementMoved: onElementMovedHandler;
     onElementMoved: (elementId: string, callback: onElementMovedHandler) => IEventListenerReturn;
     emitElementResized: onElementResizedHandler;
     onElementResized: (elementId: string, callback: onElementResizedHandler) => IEventListenerReturn;
+    emitElementSelected: OnElementSelected;
+    onElementSelected: (callback: OnElementSelected) => IEventListenerReturn;
     emitCommandDeleteSelectedPort: onCommandDeleteSelectedHandler;
     onCommandDeleteSelectedPort: (callback: onCommandDeleteSelectedHandler) => IEventListenerReturn;
     emitCommandDeleteSelectedElement: onCommandDeleteSelectedHandler;

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

@@ -1,5 +1,5 @@
 import IText from "../models/IText";
 import { CustomPortFromShape } from '../models/implementations/CustomPortFromShape';
 export declare class CustomPort1 extends CustomPortFromShape {
-    constructor(x: number, y: number, width: number, height: number, label?: IText);
+    constructor(x: number, y: number, label?: IText, width?: number, height?: number);
 }

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

@@ -1,4 +1,4 @@
 import { CustomPortFromJSXElement } from "../models/implementations/CustomPortFromJSXElement";
 export default class PortIn extends CustomPortFromJSXElement {
-    constructor(x: number, y: number, width: number, height: number);
+    constructor(x: number, y: number, width?: number, height?: number);
 }

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

@@ -23,6 +23,7 @@ export default interface IElement {
     portMoveableAreas?: IPosition[][];
     portSlideRailSVGClassName?: string;
     portDirection?: SubObjectDirection;
+    defaultPortSize?: number;
     parentElement?: IElement;
     onParentChanged?: (callback: (oldParent?: IElement, newParent?: IElement) => void) => (() => void);
     addPort: (newPort: IPort) => void;

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

@@ -20,6 +20,7 @@ interface IElementProps {
     portMoveableAreas?: IPosition[][];
     portSlideRailSVGClassName?: string;
     portDirection?: SubObjectDirection;
+    defaultPortSize?: number;
     onClick?: (elementId: string, e: React.MouseEvent<SVGElement>, ref: SVGSVGElement | null) => void;
     container: Element;
     onResized?: onElementResizedHandler;

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

@@ -6,7 +6,7 @@ import ISize from "./size";
 export default interface IPort {
     readonly id: string;
     position: IPosition;
-    size: ISize;
+    size?: ISize;
     label?: IText;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
 }

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

@@ -9,6 +9,8 @@ export type onPortMouseDownHandler = (ev: React.MouseEvent<SVGElement>, port: IP
 export type onPortMouseUpHandler = (ev: React.MouseEvent<SVGElement>, port: IPort, elementId: string) => void;
 export type onElementMovedHandler = (element: IElement, oldPosition: IPosition, newPosition: IPosition) => void;
 export type onElementResizedHandler = (element: IElement, oldSize: ISize, newSize: ISize) => void;
+export type OnElementSelected = (element: IElement) => void;
 export type onCommandDeleteSelectedHandler = () => void;
 export type OnElementLinkStarted = (elementLink: IElementLink) => void;
 export type OnElementLinkEnded = (elementLink?: IElementLink) => void;
+export type OnPortSelected = (port: IPort, elementId: string) => void;

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

@@ -3,5 +3,5 @@ import Port from "./Port";
 import IText from "../IText";
 import IPosition from "../position";
 export declare class CustomPortFromJSXElement extends Port {
-    constructor(x: number, y: number, width: number, height: number, renderCustomShape: JSX.Element, label?: IText, shapePositioningAnchor?: IPosition);
+    constructor(x: number, y: number, renderCustomShape: JSX.Element, label?: IText, shapePositioningAnchor?: IPosition, width?: number, height?: number);
 }

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

@@ -3,5 +3,5 @@ import Port from "./Port";
 import IText from "../IText";
 import { IPortProps } from "../IPortProps";
 export declare class CustomPortFromShape extends Port {
-    constructor(x: number, y: number, width: number, height: number, shape: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>, label?: IText);
+    constructor(x: number, y: number, shape: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>, label?: IText, width?: number, height?: number);
 }

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

@@ -26,6 +26,7 @@ export default class Element implements IElement {
     portMoveableAreas?: IPosition[][];
     portSlideRailSVGClassName?: string;
     portDirection?: SubObjectDirection;
+    defaultPortSize?: number;
     onResized?: ((width: number, height: number) => void) | undefined;
     onMoved?: ((x: number, y: number) => void) | undefined;
     textsPlaceHolderClassName?: string;

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

@@ -7,9 +7,9 @@ import ISize from "../size";
 export default class Port implements IPort {
     private readonly _id;
     position: IPosition;
-    size: ISize;
+    size?: ISize;
     label?: IText;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
-    constructor(x: number, y: number, width: number, height: number, label?: IText, renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>);
+    constructor(x: number, y: number, label?: IText, renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>, width?: number, height?: number);
     get id(): string;
 }

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

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

package/dist/cjs/types/utils/constants.d.ts

@@ -6,9 +6,11 @@ export declare const EVENT_NAME: {
     ELEMENT_DRAGGED: string;
     ELEMENT_RESIZED: string;
     ELEMENT_DELETED: string;
+    ELEMENT_SELECTED: string;
     PORT_MOUSE_DOWN: string;
     PORT_MOUSE_UP: string;
     PORT_MOVED: string;
+    PORT_SELECTED: string;
     COMMAND_DELETE_SELECTED_PORT: string;
     COMMAND_DELETE_SELECTED_LINK: string;
     COMMAND_DELETE_SELECTED_ELEMENT: string;
@@ -45,3 +47,4 @@ export declare const PORT_PLACEHOLDER_DEFAULT_SIZE = 8;
 export declare const PORT_PLACEHOLDER_DEFAULT_STROKE = "green";
 export declare const PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
 export declare const PORT_MOVING_OFFSET_THRESHOLD = 15;
+export declare const PORT_DEFAULT_SIZE = 20;

package/dist/esm/index.js

@@ -557,10 +557,15 @@ var Element$1 = /** @class */ (function () {
 }());
 
 var Port$1 = /** @class */ (function () {
-    function Port(x, y, width, height, label, renderShape) {
+    function Port(x, y, label, renderShape, width, height) {
         this._id = generateUniqueId();
         this.position = { x: x, y: y };
-        this.size = { width: width, height: height };
+        if (!height) {
+            height = width;
+        }
+        if (width && height) {
+            this.size = { width: width, height: height };
+        }
         this.label = label;
         this.renderShape = renderShape;
     }
@@ -799,10 +804,10 @@ var CustomShape = forwardRef(function (props, ref) {
 
 var CustomPortFromJSXElement = /** @class */ (function (_super) {
     __extends(CustomPortFromJSXElement, _super);
-    function CustomPortFromJSXElement(x, y, width, height, renderCustomShape, label, shapePositioningAnchor) {
-        var _this = _super.call(this, x, y, width, height, label, forwardRef(function (props, ref) {
+    function CustomPortFromJSXElement(x, y, renderCustomShape, label, shapePositioningAnchor, width, height) {
+        var _this = _super.call(this, x, y, label, forwardRef(function (props, ref) {
             return (React$1.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapePositioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, renderCustomShape));
-        })) || this;
+        }), width, height) || this;
         return _this;
     }
     return CustomPortFromJSXElement;
@@ -810,8 +815,8 @@ var CustomPortFromJSXElement = /** @class */ (function (_super) {
 
 var CustomPortFromShape = /** @class */ (function (_super) {
     __extends(CustomPortFromShape, _super);
-    function CustomPortFromShape(x, y, width, height, shape, label) {
-        return _super.call(this, x, y, width, height, label, shape) || this;
+    function CustomPortFromShape(x, y, shape, label, width, height) {
+        return _super.call(this, x, y, label, shape, width, height) || this;
     }
     return CustomPortFromShape;
 }(Port$1));
@@ -931,10 +936,12 @@ var EVENT_NAME = {
     ELEMENT_DRAGGED: 'element_dragged',
     ELEMENT_RESIZED: 'element_resized',
     ELEMENT_DELETED: 'element_deleted',
+    ELEMENT_SELECTED: 'element_selected',
     //PORT
     PORT_MOUSE_DOWN: 'port_mouse_down',
     PORT_MOUSE_UP: 'port_mouse_up',
     PORT_MOVED: 'port_moved',
+    PORT_SELECTED: 'port_selected',
     //COMMAND
     COMMAND_DELETE_SELECTED_PORT: 'command_delete_selected_port',
     COMMAND_DELETE_SELECTED_LINK: 'command_delete_selected_link',
@@ -965,7 +972,8 @@ var TEXT_MOVING_OFFSET_THRESHOLD = 10;
 var PORT_PLACEHOLDER_DEFAULT_SIZE = 8;
 var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
 var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
-var PORT_MOVING_OFFSET_THRESHOLD = 15;
+var PORT_MOVING_OFFSET_THRESHOLD = 15;
+var PORT_DEFAULT_SIZE = 20;
 
 var SelectionFrame = function (props) {
     var _a;
@@ -1268,6 +1276,30 @@ var onElementLinkEnded = function (callback) {
         off: off
     };
 };
+var emitElementSelected = function (element) {
+    eventEmitter.emit(EVENT_NAME.ELEMENT_SELECTED, element);
+};
+var onElementSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.ELEMENT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.ELEMENT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
+var emitPortSelected = function (port, elementId) {
+    eventEmitter.emit(EVENT_NAME.PORT_SELECTED, port, elementId);
+};
+var onPortSelected = function (callback) {
+    eventEmitter.on(EVENT_NAME.PORT_SELECTED, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.PORT_SELECTED, callback);
+    };
+    return {
+        off: off
+    };
+};
 var paperEventEmitterContext = createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
@@ -1278,10 +1310,14 @@ var paperEventEmitterContext = createContext({
     onPortMouseDown: onPortMouseDown,
     emitPortMoved: emitPortMoved,
     onPortMoved: onPortMoved,
+    emitPortSelected: emitPortSelected,
+    onPortSelected: onPortSelected,
     emitElementMoved: emitElementMoved,
     onElementMoved: onElementMoved,
     emitElementResized: emitElementResized,
     onElementResized: onElementResized,
+    emitElementSelected: emitElementSelected,
+    onElementSelected: onElementSelected,
     emitCommandDeleteSelectedPort: emitCommandDeleteSelectedPort,
     onCommandDeleteSelectedPort: onCommandDeleteSelectedPort,
     emitCommandDeleteSelectedElement: emitCommandDeleteSelectedElement,
@@ -8881,7 +8917,7 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b;
-    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 id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
         return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
@@ -8948,9 +8984,30 @@ var Element = function (props) {
             elementEndedListener.off();
         };
     }, []);
+    //Listen another port is selected
+    useEffect(function () {
+        var portSelectedListener = _paperEventEmitterContext.onPortSelected(function (port, elementId) {
+            if (elementId !== id) {
+                setSelectedPort(undefined);
+            }
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
+    //Listen another element is selected
+    useEffect(function () {
+        var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
+            setSelectedPort(undefined);
+        });
+        return function () {
+            portSelectedListener.off();
+        };
+    }, []);
     var handleSelectedPort = function (port, e) {
         e.stopPropagation();
         setSelectedPort(port);
+        _paperEventEmitterContext.emitPortSelected(port, id);
     };
     //From one point find another point on the line segment so that the distance between the two points is the shortest.
     var findNearestPointOnSegment = function (position, linePoints) {
@@ -9248,7 +9305,8 @@ var Element = function (props) {
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React$1.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$1.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, 
+            var _a, _b, _c, _d, _e, _f;
+            return React$1.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, 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 });
         }),
@@ -9980,7 +10038,8 @@ var Paper = function (props) {
                 setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 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, 
+                paperEventEmitter.emitElementSelected(element);
+            }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, 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); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };