orcasvn-react-diagrams 0.1.3 → 0.1.5

package/dist/cjs/index.js

@@ -441,7 +441,7 @@ function generateUniqueId() {
 }
 
 var Element$1 = /** @class */ (function () {
-    function Element(x, y, width, height, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection) {
+    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
             enabled: true,
@@ -452,6 +452,7 @@ var Element$1 = /** @class */ (function () {
         this._id = generateUniqueId();
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
+        this.cssClass = cssClass;
         this.renderShape = renderShape;
         this.texts = texts;
         this.ports = ports;
@@ -764,7 +765,7 @@ var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
     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)));
+        React.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
 });
 
 var CustomShape = React.forwardRef(function (props, ref) {
@@ -796,7 +797,7 @@ var Circle = React.forwardRef(function (props, ref) {
         s.width = props.width;
     }
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height, ref: ref }),
-        React.createElement("circle", { vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
+        React.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
 });
 
 var Crescent = function (props) {
@@ -814,7 +815,7 @@ var Crescent = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React.createElement("path", { vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
 };
 
 var Rectangle = function (props) {
@@ -834,7 +835,7 @@ var Rectangle = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { height: props.height, width: props.width }),
-        React.createElement("rect", { className: 'rect-border', 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 })));
 };
 
 var RectangularFrame = function (props) {
@@ -858,7 +859,7 @@ var RectangularFrame = function (props) {
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { height: props.height, width: props.width }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-outer-border', 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 }),
         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" })));
 };
@@ -910,7 +911,7 @@ var EVENT_NAME = {
     ELEMENT_LINK_ENDED: 'element_link_ended',
 };
 //ELEMENT
-var ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
+//export const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
 //ELEMENT LINK
 var MIN_DISTANCE_BETWEEN_KNOTS_ON_LINK = 30;
 var MAX_LINK_KNOT_COUNT = 10;
@@ -8595,7 +8596,7 @@ var Paper = function (props) {
         },
         width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width,
         height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height,
-        movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
+        //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
         onMove: function (offsetX, offsetY) {
             if (!selectedElement)
                 return;
@@ -8712,7 +8713,7 @@ var Paper = function (props) {
                 setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 setMouseDownedOnPaper(false);
-            }, container: paperContainerRef.current, renderShape: element.renderShape, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
+            }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
             // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
             onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); } }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };

package/dist/cjs/types/main.d.ts

@@ -1,2 +1,6 @@
 export * from './models';
+export * from './components/shapes';
+export * from './components/ports';
+export * from './components/links';
+export * from './components/texts';
 export { default } from './components/editor';

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

@@ -13,6 +13,7 @@ export default interface IElement {
     /**
      * @deprecated This property is deprecated and will be removed in future versions.
      */
+    cssClass?: string;
     reactElement?: React.FC<IElementProps> | React.ComponentClass<IElementProps>;
     renderShape?: (props: IElementProps) => JSX.Element;
     resizability: IResizability;

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

@@ -11,6 +11,7 @@ interface IElementProps {
     y: number;
     width: number;
     height: number;
+    cssClass?: string;
     renderShape?: (props: IElementProps) => JSX.Element;
     children?: React.ReactNode;
     ports?: IPort[];

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

@@ -10,6 +10,8 @@ export default interface IShape extends DOMAttributes<SVGElement>, React.RefAttr
     strokeWidth?: number;
     fill?: string;
     rotation?: number;
+    cssClass?: string;
+    portMoveableAreaCssClass?: string;
     direction?: 'left' | 'right' | 'up' | 'down';
     positioningAnchor?: PositioningAnchor | IPosition;
     onClick?: (e: React.MouseEvent<SVGElement>) => void;

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

@@ -13,6 +13,7 @@ export default class Element implements IElement {
     protected _position: IPosition;
     protected _size: ISize;
     private _parentElement?;
+    cssClass?: string;
     /**
      * @deprecated This property is deprecated and will be removed in future versions.
      */
@@ -27,7 +28,7 @@ export default class Element implements IElement {
     onResized?: ((width: number, height: number) => void) | undefined;
     onMoved?: ((x: number, y: number) => void) | undefined;
     _eventEmitter: EventEmitter;
-    constructor(x: number, y: number, width: number, height: number, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection);
+    constructor(x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection);
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

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

@@ -7,5 +7,5 @@ export default class DiamondElement extends Element {
     resizability: IResizability;
     get size(): ISize;
     set size(value: ISize);
-    constructor(x: number, y: number, width: number, height: number, texts?: IText[], ports?: IPort[]);
+    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[]);
 }

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

@@ -4,5 +4,5 @@ import IPort from "../IPort";
 import IText from "../IText";
 export default class RectangularFrameElement extends Element {
     resizability: IResizability;
-    constructor(x: number, y: number, width: number, height: number, texts?: IText[], ports?: IPort[]);
+    constructor(x: number, y: number, width: number, height: number, cssClass?: string, texts?: IText[], ports?: IPort[]);
 }

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

@@ -16,7 +16,6 @@ export declare const EVENT_NAME: {
     ELEMENT_LINK_STARTED: string;
     ELEMENT_LINK_ENDED: string;
 };
-export declare const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
 export declare const MIN_DISTANCE_BETWEEN_KNOTS_ON_LINK = 30;
 export declare const MAX_LINK_KNOT_COUNT = 10;
 export declare const LINK_MARKER_DISTANCE_FROM_PORT = 20;

package/dist/esm/index.js

@@ -437,7 +437,7 @@ function generateUniqueId() {
 }
 
 var Element$1 = /** @class */ (function () {
-    function Element(x, y, width, height, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection) {
+    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
             enabled: true,
@@ -448,6 +448,7 @@ var Element$1 = /** @class */ (function () {
         this._id = generateUniqueId();
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
+        this.cssClass = cssClass;
         this.renderShape = renderShape;
         this.texts = texts;
         this.ports = ports;
@@ -760,7 +761,7 @@ var ShapeWrapper = forwardRef(function (shapeProps, ref) {
     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)));
+        React.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
 });
 
 var CustomShape = forwardRef(function (props, ref) {
@@ -792,7 +793,7 @@ var Circle = forwardRef(function (props, ref) {
         s.width = props.width;
     }
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height, ref: ref }),
-        React.createElement("circle", { vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
+        React.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
 });
 
 var Crescent = function (props) {
@@ -810,7 +811,7 @@ var Crescent = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React.createElement("path", { vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
 };
 
 var Rectangle = function (props) {
@@ -830,7 +831,7 @@ var Rectangle = function (props) {
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { height: props.height, width: props.width }),
-        React.createElement("rect", { className: 'rect-border', 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 })));
 };
 
 var RectangularFrame = function (props) {
@@ -854,7 +855,7 @@ var RectangularFrame = function (props) {
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { height: props.height, width: props.width }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-outer-border', 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 }),
         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" })));
 };
@@ -906,7 +907,7 @@ var EVENT_NAME = {
     ELEMENT_LINK_ENDED: 'element_link_ended',
 };
 //ELEMENT
-var ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
+//export const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
 //ELEMENT LINK
 var MIN_DISTANCE_BETWEEN_KNOTS_ON_LINK = 30;
 var MAX_LINK_KNOT_COUNT = 10;
@@ -8591,7 +8592,7 @@ var Paper = function (props) {
         },
         width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width,
         height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height,
-        movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
+        //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
         onMove: function (offsetX, offsetY) {
             if (!selectedElement)
                 return;
@@ -8708,7 +8709,7 @@ var Paper = function (props) {
                 setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 setMouseDownedOnPaper(false);
-            }, container: paperContainerRef.current, renderShape: element.renderShape, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
+            }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
             // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
             onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); } }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };