orcasvn-react-diagrams 0.1.0 → 0.1.2

package/dist/cjs/index.js

@@ -36,135 +36,6 @@ exports.TextAlign = void 0;
     TextAlign[TextAlign["center"] = 2] = "center";
 })(exports.TextAlign || (exports.TextAlign = {}));
 
-var EditorContext = /** @class */ (function () {
-    function EditorContext(elements, links, texts) {
-        this._elements = elements;
-        this._links = links;
-        this._texts = texts;
-    }
-    Object.defineProperty(EditorContext.prototype, "elements", {
-        get: function () {
-            return this._elements;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(EditorContext.prototype, "links", {
-        get: function () {
-            return this._links;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(EditorContext.prototype, "texts", {
-        get: function () {
-            return this._texts;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    EditorContext.prototype.getElement = function (elementId) {
-        return this._elements.find(function (e) { return e.id === elementId; });
-    };
-    EditorContext.prototype.addElement = function (element) {
-        this._elements.push(element);
-    };
-    EditorContext.prototype.removeElement = function (elementId) {
-        this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
-    };
-    EditorContext.prototype.getLink = function (linkId) {
-        return this._links.find(function (l) { return l.id === linkId; });
-    };
-    EditorContext.prototype.addLink = function (link) {
-        this._links.push(link);
-    };
-    EditorContext.prototype.removeLink = function (linkId) {
-        this._links = this._links.filter(function (l) { return l.id !== linkId; });
-    };
-    EditorContext.prototype.getText = function (textId) {
-        return this._texts.find(function (t) { return t.id === textId; });
-    };
-    EditorContext.prototype.addText = function (text) {
-        this._texts.push(text);
-    };
-    EditorContext.prototype.removeText = function (textId) {
-        this._texts = this._texts.filter(function (t) { return t.id !== textId; });
-    };
-    return EditorContext;
-}());
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var Ruler = function (_a) {
-    var squareSize = _a.squareSize, border = _a.border;
-    var numColumns = Math.ceil(3000 / squareSize);
-    var numRows = Math.ceil(3000 / squareSize);
-    var tableWidth = numColumns * squareSize;
-    return (React.createElement("table", { style: { position: 'absolute', zIndex: -1, top: 0, left: 0, borderCollapse: 'collapse', width: tableWidth } },
-        React.createElement("tbody", null, Array.from({ length: numRows }).map(function (_, rowIndex) { return (React.createElement("tr", { key: rowIndex, style: { margin: 0, padding: 0 } }, Array.from({ length: numColumns }).map(function (_, colIndex) { return (React.createElement("td", { key: colIndex, style: {
-                width: squareSize,
-                height: squareSize,
-                border: border,
-                margin: 0,
-                padding: 0,
-                boxSizing: 'border-box',
-                verticalAlign: 'top',
-                position: 'relative',
-                fontSize: 12,
-            } },
-            rowIndex === 0 ? React.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
-            colIndex === 0 ? React.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
-};
-
-var ElementWrapper = React.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 handleMouseDown = function (ev) {
-        ev.stopPropagation();
-    };
-    return (React.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
-});
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -482,35 +353,463 @@ var eventemitter3 = {exports: {}};
 	    this._eventsCount = 0;
 	  }
 
-	  return this;
-	};
+	  return this;
+	};
+
+	//
+	// Alias methods names because people roll like that.
+	//
+	EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+	EventEmitter.prototype.addListener = EventEmitter.prototype.on;
+
+	//
+	// Expose the prefix.
+	//
+	EventEmitter.prefixed = prefix;
+
+	//
+	// Allow `EventEmitter` to be imported as module namespace.
+	//
+	EventEmitter.EventEmitter = EventEmitter;
+
+	//
+	// Expose the module.
+	//
+	{
+	  module.exports = EventEmitter;
+	} 
+} (eventemitter3));
+
+var eventemitter3Exports = eventemitter3.exports;
+var EventEmitter = /*@__PURE__*/getDefaultExportFromCjs(eventemitter3Exports);
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+var byteToHex = [];
+for (var i$1 = 0; i$1 < 256; ++i$1) {
+  byteToHex.push((i$1 + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  //
+  // Note to future-self: No, you can't remove the `toLowerCase()` call.
+  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+
+var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+
+  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+  return unsafeStringify(rnds);
+}
+
+function generateUniqueId() {
+    return v4();
+}
+
+var Element$1 = /** @class */ (function () {
+    function Element(x, y, width, height, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection) {
+        if (portMovealeAreas === void 0) { portMovealeAreas = []; }
+        this.resizability = {
+            enabled: true,
+            keepRatio: false
+        };
+        //internal properties
+        this._eventEmitter = new EventEmitter();
+        this._id = generateUniqueId();
+        this._position = { x: x, y: y };
+        this._size = { width: width, height: height };
+        this.renderShape = renderShape;
+        this.texts = texts;
+        this.ports = ports;
+        this.portMoveableAreas = portMovealeAreas;
+        this.portSlideRailSVGClassName = portSlideRailSVGClassName;
+        this.portDirection = portDirection;
+    }
+    Object.defineProperty(Element.prototype, "id", {
+        get: function () {
+            return this._id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        set: function (value) {
+            this._size = value;
+            if (this.onResized)
+                this.onResized(value.width, value.height);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "position", {
+        get: function () {
+            return this._position;
+        },
+        set: function (value) {
+            this._position = value;
+            if (this.onMoved)
+                this.onMoved(value.x, value.y);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "parentElement", {
+        get: function () {
+            return this._parentElement;
+        },
+        set: function (value) {
+            var oldParent = this._parentElement;
+            this._parentElement = value;
+            this._eventEmitter.emit('parentChanged', oldParent, value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Element.prototype.onParentChanged = function (callback) {
+        var _this = this;
+        this._eventEmitter.on('parentChanged', callback);
+        var canceller = function () {
+            _this._eventEmitter.off('parentChanged', callback);
+        };
+        return canceller;
+    };
+    Element.prototype.addPort = function (newPort) {
+        if (this.ports) {
+            this.ports.push(newPort);
+        }
+        else {
+            this.ports = [newPort];
+        }
+        this._eventEmitter.emit('addedPort', newPort);
+    };
+    Element.prototype.onAddedPort = function (callback) {
+        var _this = this;
+        this._eventEmitter.on('addedPort', callback);
+        var canceller = function () {
+            _this._eventEmitter.off('addedPort', callback);
+        };
+        return canceller;
+    };
+    Element.prototype.deletePort = function (id) {
+        if (!this.ports)
+            return;
+        var index = this.ports.findIndex(function (p) { return p.id === id; });
+        if (index === -1) {
+            throw new Error("Port with id ".concat(id, " is not found"));
+        }
+        this.ports.splice(index, 1);
+        this._eventEmitter.emit('deletedPort', id);
+    };
+    Element.prototype.onDeletedPort = function (callback) {
+        var _this = this;
+        this._eventEmitter.on('deletedPort', callback);
+        var canceller = function () {
+            _this._eventEmitter.off('deletedPort', callback);
+        };
+        return canceller;
+    };
+    Element.prototype.getPort = function (id) {
+        if (!this.ports)
+            return undefined;
+        return this.ports.find(function (p) { return p.id === id; });
+    };
+    return Element;
+}());
+
+var Port$1 = /** @class */ (function () {
+    function Port(x, y, width, height, label, renderShape) {
+        this._id = generateUniqueId();
+        this.position = { x: x, y: y };
+        this.size = { width: width, height: height };
+        this.label = label;
+        this.renderShape = renderShape;
+    }
+    Object.defineProperty(Port.prototype, "id", {
+        get: function () {
+            return this._id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return Port;
+}());
+
+var ElementLink$1 = /** @class */ (function () {
+    function ElementLink(sourceElement, sourcePort, targetElement, targetPort, tempTargetPosition, points, path, markerStart, markerEnd, markerDistanceFromPort, markerSize, label, sourceLabel, targetLabel) {
+        this.id = generateUniqueId();
+        this.sourceElement = sourceElement;
+        this.sourcePort = sourcePort;
+        if (tempTargetPosition) {
+            this.tempTargetPosition = tempTargetPosition;
+        }
+        if (points) {
+            this.points = points;
+        }
+        else {
+            this.points = [];
+        }
+        if (targetElement)
+            this.targetElement = targetElement;
+        if (targetPort)
+            this.targetPort = targetPort;
+        if (path)
+            this.path = path;
+        if (markerStart)
+            this.markerStart = markerStart;
+        if (markerEnd)
+            this.markerEnd = markerEnd;
+        if (markerDistanceFromPort)
+            this.markerDistanceFromPort = markerDistanceFromPort;
+        if (markerSize)
+            this.markerSize = markerSize;
+        if (label)
+            this.label = label;
+        if (sourceLabel)
+            this.sourceLabel = sourceLabel;
+        if (targetLabel)
+            this.targetLabel = targetLabel;
+    }
+    return ElementLink;
+}());
+
+var EditorContext = /** @class */ (function () {
+    function EditorContext(elements, links, texts) {
+        this._elements = elements;
+        this._links = links;
+        this._texts = texts;
+    }
+    Object.defineProperty(EditorContext.prototype, "elements", {
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(EditorContext.prototype, "links", {
+        get: function () {
+            return this._links;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(EditorContext.prototype, "texts", {
+        get: function () {
+            return this._texts;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    EditorContext.prototype.getElement = function (elementId) {
+        return this._elements.find(function (e) { return e.id === elementId; });
+    };
+    EditorContext.prototype.addElement = function (element) {
+        this._elements.push(element);
+    };
+    EditorContext.prototype.removeElement = function (elementId) {
+        this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
+    };
+    EditorContext.prototype.getLink = function (linkId) {
+        return this._links.find(function (l) { return l.id === linkId; });
+    };
+    EditorContext.prototype.addLink = function (link) {
+        this._links.push(link);
+    };
+    EditorContext.prototype.removeLink = function (linkId) {
+        this._links = this._links.filter(function (l) { return l.id !== linkId; });
+    };
+    EditorContext.prototype.getText = function (textId) {
+        return this._texts.find(function (t) { return t.id === textId; });
+    };
+    EditorContext.prototype.addText = function (text) {
+        this._texts.push(text);
+    };
+    EditorContext.prototype.removeText = function (textId) {
+        this._texts = this._texts.filter(function (t) { return t.id !== textId; });
+    };
+    return EditorContext;
+}());
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
-	//
-	// Alias methods names because people roll like that.
-	//
-	EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
-	EventEmitter.prototype.addListener = EventEmitter.prototype.on;
+var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
+    //if direction is provided, rotation is based on direction
+    var rotation = shapeProps.rotation || 0;
+    if (shapeProps.direction) {
+        switch (shapeProps.direction) {
+            case 'left':
+                rotation = -90;
+                break;
+            case 'right':
+                rotation = 90;
+                break;
+            case 'down':
+                rotation = 180;
+                break;
+            default:
+                rotation = 0;
+                break;
+        }
+    }
+    var position = { x: shapeProps.x, y: shapeProps.y };
+    var transformOrigin = "center";
+    if (typeof shapeProps.positioningAnchor === 'object') {
+        position.x = position.x - shapeProps.positioningAnchor.x / 100 * shapeProps.width;
+        position.y = position.y - shapeProps.positioningAnchor.y / 100 * shapeProps.height;
+        transformOrigin = "".concat(shapeProps.positioningAnchor.x, "% ").concat(shapeProps.positioningAnchor.y, "%");
+    }
+    else if (shapeProps.positioningAnchor === exports.PositioningAnchor.Center) {
+        position.x = position.x - shapeProps.width / 2;
+        position.y = position.y - shapeProps.height / 2;
+    }
+    var objectOfAllEventAttributes = React.useMemo(function () {
+        var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
+            var k = _a[0]; _a[1];
+            return k.startsWith('on');
+        });
+        return Object.fromEntries(arrayOfAllEventAttributes);
+    }, [shapeProps]);
+    var viewboxWidth = shapeProps.width > shapeProps.height ? 100 : shapeProps.width / shapeProps.height * 100;
+    var viewBoxHeight = shapeProps.height > shapeProps.width ? 100 : shapeProps.height / shapeProps.width * 100;
+    var viewBox = shapeProps.viewBox || "0 0 ".concat(viewboxWidth, " ").concat(viewBoxHeight);
+    return (React.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
+        React.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
+});
 
-	//
-	// Expose the prefix.
-	//
-	EventEmitter.prefixed = prefix;
+var CustomShape = React.forwardRef(function (props, ref) {
+    return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
+});
 
-	//
-	// Allow `EventEmitter` to be imported as module namespace.
-	//
-	EventEmitter.EventEmitter = EventEmitter;
+var CustomPort = /** @class */ (function (_super) {
+    __extends(CustomPort, _super);
+    function CustomPort(x, y, width, height, renderShape, shapePositioningAnchor, label) {
+        var _this = _super.call(this, x, y, width, height, label, React.forwardRef(function (props, ref) {
+            return (React.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); } }, renderShape));
+        })) || this;
+        return _this;
+    }
+    return CustomPort;
+}(Port$1));
 
-	//
-	// Expose the module.
-	//
-	{
-	  module.exports = EventEmitter;
-	} 
-} (eventemitter3));
+var Ruler = function (_a) {
+    var squareSize = _a.squareSize, border = _a.border;
+    var numColumns = Math.ceil(3000 / squareSize);
+    var numRows = Math.ceil(3000 / squareSize);
+    var tableWidth = numColumns * squareSize;
+    return (React.createElement("table", { style: { position: 'absolute', zIndex: -1, top: 0, left: 0, borderCollapse: 'collapse', width: tableWidth } },
+        React.createElement("tbody", null, Array.from({ length: numRows }).map(function (_, rowIndex) { return (React.createElement("tr", { key: rowIndex, style: { margin: 0, padding: 0 } }, Array.from({ length: numColumns }).map(function (_, colIndex) { return (React.createElement("td", { key: colIndex, style: {
+                width: squareSize,
+                height: squareSize,
+                border: border,
+                margin: 0,
+                padding: 0,
+                boxSizing: 'border-box',
+                verticalAlign: 'top',
+                position: 'relative',
+                fontSize: 12,
+            } },
+            rowIndex === 0 ? React.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
+            colIndex === 0 ? React.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
+};
 
-var eventemitter3Exports = eventemitter3.exports;
-var EventEmitter = /*@__PURE__*/getDefaultExportFromCjs(eventemitter3Exports);
+var ElementWrapper = React.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 handleMouseDown = function (ev) {
+        ev.stopPropagation();
+    };
+    return (React.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+});
 
 var MIN_ELEMENT_SIZE = 20;
 //naming convention: [element type]_[element action]
@@ -6585,13 +6884,13 @@ if (process.env.NODE_ENV === 'production') {
   createRoot = m.createRoot;
   m.hydrateRoot;
 } else {
-  var i$1 = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
   createRoot = function(c, o) {
-    i$1.usingClientEntryPoint = true;
+    i.usingClientEntryPoint = true;
     try {
       return m.createRoot(c, o);
     } finally {
-      i$1.usingClientEntryPoint = false;
+      i.usingClientEntryPoint = false;
     }
   };
 }
@@ -6869,50 +7168,6 @@ var checkPositionOnLine = function (position, line) {
     return _line.contains(point);
 };
 
-var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
-    //if direction is provided, rotation is based on direction
-    var rotation = shapeProps.rotation || 0;
-    if (shapeProps.direction) {
-        switch (shapeProps.direction) {
-            case 'left':
-                rotation = -90;
-                break;
-            case 'right':
-                rotation = 90;
-                break;
-            case 'down':
-                rotation = 180;
-                break;
-            default:
-                rotation = 0;
-                break;
-        }
-    }
-    var position = { x: shapeProps.x, y: shapeProps.y };
-    var transformOrigin = "center";
-    if (typeof shapeProps.positioningAnchor === 'object') {
-        position.x = position.x - shapeProps.positioningAnchor.x / 100 * shapeProps.width;
-        position.y = position.y - shapeProps.positioningAnchor.y / 100 * shapeProps.height;
-        transformOrigin = "".concat(shapeProps.positioningAnchor.x, "% ").concat(shapeProps.positioningAnchor.y, "%");
-    }
-    else if (shapeProps.positioningAnchor === exports.PositioningAnchor.Center) {
-        position.x = position.x - shapeProps.width / 2;
-        position.y = position.y - shapeProps.height / 2;
-    }
-    var objectOfAllEventAttributes = React.useMemo(function () {
-        var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
-            var k = _a[0]; _a[1];
-            return k.startsWith('on');
-        });
-        return Object.fromEntries(arrayOfAllEventAttributes);
-    }, [shapeProps]);
-    var viewboxWidth = shapeProps.width > shapeProps.height ? 100 : shapeProps.width / shapeProps.height * 100;
-    var viewBoxHeight = shapeProps.height > shapeProps.width ? 100 : shapeProps.height / shapeProps.width * 100;
-    var viewBox = shapeProps.viewBox || "0 0 ".concat(viewboxWidth, " ").concat(viewBoxHeight);
-    return (React.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
-        React.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
-});
-
 var Circle = React.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
@@ -7869,63 +8124,6 @@ function useKeyboardCommands(_a) {
     }, [element]);
 }
 
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  //
-  // Note to future-self: No, you can't remove the `toLowerCase()` call.
-  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-  return getRandomValues(rnds8);
-}
-
-var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)();
-
-  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80;
-  return unsafeStringify(rnds);
-}
-
-function generateUniqueId() {
-    return v4();
-}
-
 function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
     function findChildElementsOfNode(elementNodeInTree, possibleChildElements) {
@@ -8487,5 +8685,9 @@ function Editor(_a) {
         React.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 })));
 }
 
+exports.CustomPort = CustomPort;
 exports.EditorContext = EditorContext;
+exports.Element = Element$1;
+exports.ElementLink = ElementLink$1;
+exports.Port = Port$1;
 exports.default = Editor;