orcasvn-react-diagrams 0.1.53 → 0.1.54

package/dist/cjs/index.js

@@ -819,7 +819,7 @@ var EVENT_ELEMENT_MOUSE_DOWN = 'elementMouseDown';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
-    function EditorContext(elements, links, texts) {
+    function EditorContext(elements, links, texts, configuration) {
         var _this = this;
         /** @internal */
         this.onEditorContextUpdated = function (callback) {
@@ -832,6 +832,7 @@ var EditorContext = /** @class */ (function () {
         this._elements = elements;
         this._links = links;
         this._texts = texts;
+        this._configuration = configuration || {};
         this._eventEmitter = new EventEmitter();
     }
     EditorContext.prototype.addEventListener = function (event, callback) {
@@ -872,6 +873,13 @@ var EditorContext = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(EditorContext.prototype, "configuration", {
+        get: function () {
+            return this._configuration;
+        },
+        enumerable: false,
+        configurable: true
+    });
     EditorContext.prototype.getElement = function (elementId) {
         return this._elements.find(function (e) { return e.id === elementId; });
     };
@@ -1110,8 +1118,20 @@ var Rectangle = React.forwardRef(function (props, ref) {
         scaledWidth = scaledWidth / heightRatio;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1133,10 +1153,22 @@ var RectangularFrame = React.forwardRef(function (props, ref) {
     var fw = props.frameColor ? (props.frameWidth || 1) : 0;
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent", strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1714,10 +1746,21 @@ var paperEventEmitterContext = React.createContext({
     onCommandRenderPort: onCommandRenderPort,
 });
 
+var editorConfigurationContext = React.createContext(null);
+var useEditorConfiguration = function () {
+    var context = React.useContext(editorConfigurationContext);
+    if (!context) {
+        throw new Error("useEditorConfiguration must be used within an EditorConfigurationProvider");
+    }
+    return context;
+};
+var EditorConfigurationContextProvider = editorConfigurationContext.Provider;
+
 var Text = React.forwardRef(function (_a, ref) {
     var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.selectable, selectable = _b === void 0 ? true : _b, _c = _a.align, align = _c === void 0 ? exports.TextAlign.left : _c, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
     var _d = React.useState(false), isSelected = _d[0], setIsSelected = _d[1];
     var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var textFontSize = useEditorConfiguration().textFontSize;
     var absolutePosition = React.useMemo(function () {
         var _a, _b;
         return {
@@ -1810,9 +1853,12 @@ var Text = React.forwardRef(function (_a, ref) {
                 return 'left';
         }
     }, [align]);
-    var fontSize = fontSizeProp || TEXT_FONT_SIZE;
+    var fontSize = fontSizeProp || textFontSize || TEXT_FONT_SIZE;
     var borderStyle = border || 'none';
-    return (React.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
+    return (React.createElement("svg", { style: {
+            overflow: "visible",
+            pointerEvents: selectable ? undefined : 'none',
+        }, x: x, y: y, ref: function (node) {
             svgRef.current = node;
             if (typeof ref === 'function') {
                 ref(node);
@@ -9441,13 +9487,13 @@ var Paper = function (props) {
     }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         //if there is a temp link, update the temp target point
         if (tempLink) {
-            var currentTarget = ev.currentTarget;
-            //get offset x,y of the temp target point relative paper container
-            var rect = currentTarget.getBoundingClientRect();
-            var offsetX = ev.clientX - rect.left;
-            var offsetY = ev.clientY - rect.top;
             var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
             var sourcePosition = {
                 x: sourceElementAbsPosition.x + tempLink.sourcePort.position.x,
@@ -9455,19 +9501,24 @@ var Paper = function (props) {
             };
             //reduce the position of offset to the direction of the source point 1 unit to avoid the link to reach the current mouse position
             var tempTargetPosition_1 = {
-                x: offsetX - (offsetX > sourcePosition.x ? 1 : -1),
-                y: offsetY - (offsetY > sourcePosition.y ? 1 : -1)
+                x: xPosOnPaper - (xPosOnPaper > sourcePosition.x ? 1 : -1),
+                y: yPosOnPaper - (yPosOnPaper > sourcePosition.y ? 1 : -1)
             };
             setTempLink(function (prev) { return (__assign(__assign({}, prev), { tempTargetPosition: tempTargetPosition_1 })); });
         }
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseMoved) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseDownOnPaper = function (ev) {
         var _a, _b;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         setMouseDownedOnPaper(true);
         (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
             x: ev.clientX,
@@ -9476,12 +9527,17 @@ var Paper = function (props) {
         paperEventEmitter.emitPaperClicked(ev);
         //broadcast mouse moved position to parent component
         (_b = props.onPaperMouseDown) === null || _b === void 0 ? void 0 : _b.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseUpOnPaper = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
@@ -9498,8 +9554,8 @@ var Paper = function (props) {
         setMouseDownedOnPaper(false);
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handlePathChange = React.useCallback(function (path, id) {
@@ -10146,6 +10202,7 @@ var Editor = function (_a) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
     var handleLinksChanged = React.useCallback(function (links) {
+        console.log(links);
         editorContext.links = links;
     }, [editorContext]);
     var handleTextSelected = React.useCallback(function (text) {
@@ -10167,16 +10224,19 @@ var Editor = function (_a) {
         return null;
     }, [editorContext]);
     var handlePaperMouseMoved = React.useCallback(function (position) {
+        console.log("handlePaperMouseMoved", position);
         editorContext.onPaperMouseMovedHandler(position);
     }, [editorContext]);
     var handlePaperMouseDown = React.useCallback(function (position) {
+        console.log("handlePaperMouseDown", position);
         editorContext.onPaperMouseDownHandler(position);
     }, [editorContext]);
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (React.createElement(ZoomContextProvider, null,
-        React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) })));
+    return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
+        React.createElement(ZoomContextProvider, null,
+            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
 };
 
 exports.CircleRC = Circle;

package/dist/cjs/types/components/shapes/rectangle.d.ts

@@ -4,6 +4,7 @@ interface RectangleProps extends IShape {
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
+    strokeStyle?: string;
 }
 declare const Rectangle: React.ForwardRefExoticComponent<RectangleProps & React.RefAttributes<SVGSVGElement>>;
 export default Rectangle;

package/dist/cjs/types/components/shapes/rectangularFrame.d.ts

@@ -6,6 +6,7 @@ interface RectangularFrameProps extends IShape {
     strokeWidth?: number;
     frameColor?: string;
     frameWidth?: number;
+    strokeStyle?: string;
 }
 declare const RectangularFrame: React.ForwardRefExoticComponent<RectangularFrameProps & React.RefAttributes<SVGSVGElement>>;
 export default RectangularFrame;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IEditorConfiguration } from "../models/IEditorConfiguration";
+export declare const useEditorConfiguration: () => IEditorConfiguration;
+export declare const EditorConfigurationContextProvider: import("react").Provider<IEditorConfiguration | null>;

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

@@ -0,0 +1,3 @@
+export interface IEditorConfiguration {
+    textFontSize?: number;
+}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IEditorConfiguration } from "./IEditorConfiguration";
 import IElement from "./IElement";
 import IElementLink from "./IElementLink";
 import IPort from "./IPort";
@@ -9,6 +10,7 @@ export default interface IEditorContext {
     elements: IElement[];
     links: IElementLink[];
     texts: IPaperText[];
+    configuration: IEditorConfiguration;
     onCreatingPortByLinkingHandler?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLinkHandler?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
     onPaperClicked: (callback: (position: IPosition) => void) => (() => void);

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

@@ -6,14 +6,16 @@ import IPosition from "../position";
 import IPort from "../IPort";
 import ISize from "../size";
 import IEditorContext from "../IEditorContext";
+import { IEditorConfiguration } from "../IEditorConfiguration";
 export declare class EditorContext implements IEditorContext {
     private _elements;
     private _links;
     private _texts;
     private _eventEmitter;
+    private _configuration;
     onCreatingPortByLinkingHandler?: ((sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null) | undefined;
     onCreatingLinkHandler?: ((sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null) | undefined;
-    constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
+    constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[], configuration?: IEditorConfiguration);
     private addEventListener;
     get elements(): IElement[];
     get links(): IElementLink[];
@@ -21,6 +23,7 @@ export declare class EditorContext implements IEditorContext {
     set elements(value: IElement[]);
     set links(value: IElementLink[]);
     set texts(value: IPaperText[]);
+    get configuration(): IEditorConfiguration;
     getElement(elementId: string): IElement | undefined;
     addElement(element: IElement): void;
     removeElement(elementId: string): void;

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

@@ -37,7 +37,7 @@ export default class Element implements IElement {
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
-    constructor(id: string | null, 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);
+    constructor(id: string | null, 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?: IElement, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, useEffect, useState, useCallback, createContext, useRef, useContext, memo, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useMemo, useEffect, useState, useCallback, createContext, useContext, useRef, memo, useLayoutEffect, useImperativeHandle } from 'react';
 import require$$0 from 'react-dom';
 
 var PositioningAnchor;
@@ -815,7 +815,7 @@ var EVENT_ELEMENT_MOUSE_DOWN = 'elementMouseDown';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
-    function EditorContext(elements, links, texts) {
+    function EditorContext(elements, links, texts, configuration) {
         var _this = this;
         /** @internal */
         this.onEditorContextUpdated = function (callback) {
@@ -828,6 +828,7 @@ var EditorContext = /** @class */ (function () {
         this._elements = elements;
         this._links = links;
         this._texts = texts;
+        this._configuration = configuration || {};
         this._eventEmitter = new EventEmitter();
     }
     EditorContext.prototype.addEventListener = function (event, callback) {
@@ -868,6 +869,13 @@ var EditorContext = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(EditorContext.prototype, "configuration", {
+        get: function () {
+            return this._configuration;
+        },
+        enumerable: false,
+        configurable: true
+    });
     EditorContext.prototype.getElement = function (elementId) {
         return this._elements.find(function (e) { return e.id === elementId; });
     };
@@ -1106,8 +1114,20 @@ var Rectangle = forwardRef(function (props, ref) {
         scaledWidth = scaledWidth / heightRatio;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1129,10 +1149,22 @@ var RectangularFrame = forwardRef(function (props, ref) {
     var fw = props.frameColor ? (props.frameWidth || 1) : 0;
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent", strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1710,10 +1742,21 @@ var paperEventEmitterContext = createContext({
     onCommandRenderPort: onCommandRenderPort,
 });
 
+var editorConfigurationContext = createContext(null);
+var useEditorConfiguration = function () {
+    var context = useContext(editorConfigurationContext);
+    if (!context) {
+        throw new Error("useEditorConfiguration must be used within an EditorConfigurationProvider");
+    }
+    return context;
+};
+var EditorConfigurationContextProvider = editorConfigurationContext.Provider;
+
 var Text = forwardRef(function (_a, ref) {
     var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.selectable, selectable = _b === void 0 ? true : _b, _c = _a.align, align = _c === void 0 ? TextAlign.left : _c, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
     var _d = useState(false), isSelected = _d[0], setIsSelected = _d[1];
     var _e = useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var textFontSize = useEditorConfiguration().textFontSize;
     var absolutePosition = useMemo(function () {
         var _a, _b;
         return {
@@ -1806,9 +1849,12 @@ var Text = forwardRef(function (_a, ref) {
                 return 'left';
         }
     }, [align]);
-    var fontSize = fontSizeProp || TEXT_FONT_SIZE;
+    var fontSize = fontSizeProp || textFontSize || TEXT_FONT_SIZE;
     var borderStyle = border || 'none';
-    return (React.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
+    return (React.createElement("svg", { style: {
+            overflow: "visible",
+            pointerEvents: selectable ? undefined : 'none',
+        }, x: x, y: y, ref: function (node) {
             svgRef.current = node;
             if (typeof ref === 'function') {
                 ref(node);
@@ -9437,13 +9483,13 @@ var Paper = function (props) {
     }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         //if there is a temp link, update the temp target point
         if (tempLink) {
-            var currentTarget = ev.currentTarget;
-            //get offset x,y of the temp target point relative paper container
-            var rect = currentTarget.getBoundingClientRect();
-            var offsetX = ev.clientX - rect.left;
-            var offsetY = ev.clientY - rect.top;
             var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
             var sourcePosition = {
                 x: sourceElementAbsPosition.x + tempLink.sourcePort.position.x,
@@ -9451,19 +9497,24 @@ var Paper = function (props) {
             };
             //reduce the position of offset to the direction of the source point 1 unit to avoid the link to reach the current mouse position
             var tempTargetPosition_1 = {
-                x: offsetX - (offsetX > sourcePosition.x ? 1 : -1),
-                y: offsetY - (offsetY > sourcePosition.y ? 1 : -1)
+                x: xPosOnPaper - (xPosOnPaper > sourcePosition.x ? 1 : -1),
+                y: yPosOnPaper - (yPosOnPaper > sourcePosition.y ? 1 : -1)
             };
             setTempLink(function (prev) { return (__assign(__assign({}, prev), { tempTargetPosition: tempTargetPosition_1 })); });
         }
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseMoved) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseDownOnPaper = function (ev) {
         var _a, _b;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         setMouseDownedOnPaper(true);
         (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
             x: ev.clientX,
@@ -9472,12 +9523,17 @@ var Paper = function (props) {
         paperEventEmitter.emitPaperClicked(ev);
         //broadcast mouse moved position to parent component
         (_b = props.onPaperMouseDown) === null || _b === void 0 ? void 0 : _b.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseUpOnPaper = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
@@ -9494,8 +9550,8 @@ var Paper = function (props) {
         setMouseDownedOnPaper(false);
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handlePathChange = useCallback(function (path, id) {
@@ -10142,6 +10198,7 @@ var Editor = function (_a) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
     var handleLinksChanged = useCallback(function (links) {
+        console.log(links);
         editorContext.links = links;
     }, [editorContext]);
     var handleTextSelected = useCallback(function (text) {
@@ -10163,16 +10220,19 @@ var Editor = function (_a) {
         return null;
     }, [editorContext]);
     var handlePaperMouseMoved = useCallback(function (position) {
+        console.log("handlePaperMouseMoved", position);
         editorContext.onPaperMouseMovedHandler(position);
     }, [editorContext]);
     var handlePaperMouseDown = useCallback(function (position) {
+        console.log("handlePaperMouseDown", position);
         editorContext.onPaperMouseDownHandler(position);
     }, [editorContext]);
     var handlePaperMouseUp = useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (React.createElement(ZoomContextProvider, null,
-        React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) })));
+    return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
+        React.createElement(ZoomContextProvider, null,
+            React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }))));
 };
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPointsFromPathData, getPointsFromPathElement, getPortAbsolutePosition, getRectangleCorners, getRelativePosition, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement };