orcasvn-react-diagrams 0.1.11 → 0.1.13

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,
@@ -7611,11 +7647,21 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = React$1.forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
+    var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
     var handleMouseDown = function (ev) {
         ev.stopPropagation();
     };
-    return (React$1.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    var handleClick = function (ev) {
+        if (ev.type === 'click') {
+            if (onClick)
+                onClick(ev);
+        }
+        else if (ev.type === 'contextmenu') {
+            if (onContextMenu)
+                onContextMenu(ev);
+        }
+    };
+    return (React$1.createElement("svg", { x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 // Calculate the position of the 4 vertices of a rectangle relative to its parent svg
@@ -8885,7 +8931,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, onContextMenu = props.onContextMenu, 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 +8998,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) {
@@ -9246,13 +9313,14 @@ var Element = function (props) {
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
-    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp },
+    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? 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 });
         }),
@@ -9975,16 +10043,24 @@ var Paper = function (props) {
             });
         });
     };
+    var handleElementClicked = function (id, e, ref, element) {
+        e.stopPropagation();
+        setSelectedElementSVG(ref);
+        setSelectedElement(elements.find(function (e) { return e.id === id; }));
+        setMouseDownedOnPaper(false);
+        paperEventEmitter.emitElementSelected(element);
+    };
     var renderElementInTree = function (element) {
         var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element;
         return (React$1.createElement("g", { key: element.id }, React$1.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: function (id, e, ref) {
-                e.stopPropagation();
-                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, 
+                handleElementClicked(id, e, ref, element);
+            }, onContextMenu: function (id, e, ref) {
+                var _a;
+                handleElementClicked(id, e, ref, element);
+                (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
+            }, 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))));
     };
@@ -10018,7 +10094,7 @@ var Paper = function (props) {
 function Editor(_a) {
     var editorContext = _a.editorContext;
     return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
+        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementContextMenu: editorContext.onElementContextMenu, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
 }
 
 exports.CircleRC = Circle;

package/dist/cjs/types/components/elements/elementWrapper.d.ts

@@ -4,6 +4,7 @@ interface IElementWrapper {
     x?: number;
     y?: number;
     onClick?: (e: React.MouseEvent<SVGElement>) => void;
+    onContextMenu?: (e: React.MouseEvent<SVGElement>) => void;
     children: React.ReactNode;
     portPlaceholders?: SVGElement[];
     ports?: IPort[];

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

@@ -15,6 +15,7 @@ interface PaperProps {
     texts: IPaperText[];
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
     onLinkValidation?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;

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

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/EditorContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import IElement from "../IElement";
 import IElementLink from "../IElementLink";
 import { IPaperText } from "../IText";
@@ -10,6 +11,7 @@ export declare class EditorContext {
     private _texts;
     onPaperClicked?: () => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
+    onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;
     validateLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;

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;