orcasvn-react-diagrams 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/dist/cjs/index.js +8491 -0
- package/dist/cjs/types/App.d.ts +4 -0
- package/dist/cjs/types/App.test.d.ts +1 -0
- package/dist/cjs/types/components/BBoxDebugger.d.ts +6 -0
- package/dist/cjs/types/components/CloseIcon.d.ts +6 -0
- package/dist/cjs/types/components/LinkDebugger.d.ts +8 -0
- package/dist/cjs/types/components/editor.d.ts +7 -0
- package/dist/cjs/types/components/elementShowbox.d.ts +3 -0
- package/dist/cjs/types/components/elements/dragDropHandlerElement.d.ts +7 -0
- package/dist/cjs/types/components/elements/element.d.ts +4 -0
- package/dist/cjs/types/components/elements/elementWrapper.d.ts +15 -0
- package/dist/cjs/types/components/links/elementLink.d.ts +4 -0
- package/dist/cjs/types/components/links/point.d.ts +11 -0
- package/dist/cjs/types/components/paper.d.ts +25 -0
- package/dist/cjs/types/components/ports/port.d.ts +3 -0
- package/dist/cjs/types/components/shapeShowbox.d.ts +3 -0
- package/dist/cjs/types/components/shapes/circle.d.ts +9 -0
- package/dist/cjs/types/components/shapes/customShape.d.ts +7 -0
- package/dist/cjs/types/components/shapes/halfCircle.d.ts +9 -0
- package/dist/cjs/types/components/shapes/rectangle.d.ts +9 -0
- package/dist/cjs/types/components/shapes/rectangularFrame.d.ts +11 -0
- package/dist/cjs/types/components/shapes/shapeWrapper.d.ts +8 -0
- package/dist/cjs/types/components/svgUtilsShowbox.d.ts +3 -0
- package/dist/cjs/types/components/texts/text.d.ts +4 -0
- package/dist/cjs/types/components/viewControls/ruler.d.ts +7 -0
- package/dist/cjs/types/components/viewControls/selectionFrame.d.ts +4 -0
- package/dist/cjs/types/contexts/paperEventEmitterContext.d.ts +35 -0
- package/dist/cjs/types/hooks/useKeyboardCommands.d.ts +5 -0
- package/dist/cjs/types/hooks/useSelectionFrame.d.ts +6 -0
- package/dist/cjs/types/index.d.ts +2 -0
- package/dist/cjs/types/main.d.ts +2 -0
- package/dist/cjs/types/mocks/editorContext.d.ts +2 -0
- package/dist/cjs/types/mocks/port1.d.ts +5 -0
- package/dist/cjs/types/models/IElement.d.ts +30 -0
- package/dist/cjs/types/models/IElementLink.d.ts +22 -0
- package/dist/cjs/types/models/IElementLinkProps.d.ts +27 -0
- package/dist/cjs/types/models/IElementProps.d.ts +35 -0
- package/dist/cjs/types/models/IElementSelectorProps.d.ts +22 -0
- package/dist/cjs/types/models/IPort.d.ts +12 -0
- package/dist/cjs/types/models/IPortProps.d.ts +24 -0
- package/dist/cjs/types/models/IResizability.d.ts +4 -0
- package/dist/cjs/types/models/IShape.d.ts +16 -0
- package/dist/cjs/types/models/IText.d.ts +15 -0
- package/dist/cjs/types/models/ITextProps.d.ts +19 -0
- package/dist/cjs/types/models/callbackTypes.d.ts +14 -0
- package/dist/cjs/types/models/enums/PositioningAnchor.d.ts +4 -0
- package/dist/cjs/types/models/enums/ResizingDirection.d.ts +10 -0
- package/dist/cjs/types/models/enums/SubObjectDirection.d.ts +4 -0
- package/dist/cjs/types/models/enums/TextAlign.d.ts +5 -0
- package/dist/cjs/types/models/enums/index.d.ts +4 -0
- package/dist/cjs/types/models/implementations/CustomPort.d.ts +7 -0
- package/dist/cjs/types/models/implementations/EditorContext.d.ts +31 -0
- package/dist/cjs/types/models/implementations/Element.d.ts +44 -0
- package/dist/cjs/types/models/implementations/ElementLink.d.ts +24 -0
- package/dist/cjs/types/models/implementations/Port.d.ts +15 -0
- package/dist/cjs/types/models/implementations/diamondElement.d.ts +11 -0
- package/dist/cjs/types/models/implementations/rectangularFrameElement.d.ts +8 -0
- package/dist/cjs/types/models/index.d.ts +18 -0
- package/dist/cjs/types/models/position.d.ts +4 -0
- package/dist/cjs/types/models/size.d.ts +4 -0
- package/dist/cjs/types/reportWebVitals.d.ts +3 -0
- package/dist/cjs/types/setupTests.d.ts +1 -0
- package/dist/cjs/types/utils/constants.d.ts +48 -0
- package/dist/cjs/types/utils/generateUniqueId.d.ts +1 -0
- package/dist/cjs/types/utils/lineUtil.d.ts +3 -0
- package/dist/cjs/types/utils/mathUtil.d.ts +6 -0
- package/dist/cjs/types/utils/pathUtil.d.ts +11 -0
- package/dist/cjs/types/utils/portSlideRailSVGUtil.d.ts +3 -0
- package/dist/cjs/types/utils/positionUtil.d.ts +26 -0
- package/dist/cjs/types/utils/svgUtil.d.ts +3 -0
- package/dist/esm/index.js +8487 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/types/App.d.ts +4 -0
- package/dist/esm/types/App.test.d.ts +1 -0
- package/dist/esm/types/components/BBoxDebugger.d.ts +6 -0
- package/dist/esm/types/components/CloseIcon.d.ts +6 -0
- package/dist/esm/types/components/LinkDebugger.d.ts +8 -0
- package/dist/esm/types/components/editor.d.ts +7 -0
- package/dist/esm/types/components/elementShowbox.d.ts +3 -0
- package/dist/esm/types/components/elements/dragDropHandlerElement.d.ts +7 -0
- package/dist/esm/types/components/elements/element.d.ts +4 -0
- package/dist/esm/types/components/elements/elementWrapper.d.ts +15 -0
- package/dist/esm/types/components/links/elementLink.d.ts +4 -0
- package/dist/esm/types/components/links/point.d.ts +11 -0
- package/dist/esm/types/components/paper.d.ts +25 -0
- package/dist/esm/types/components/ports/port.d.ts +3 -0
- package/dist/esm/types/components/shapeShowbox.d.ts +3 -0
- package/dist/esm/types/components/shapes/circle.d.ts +9 -0
- package/dist/esm/types/components/shapes/customShape.d.ts +7 -0
- package/dist/esm/types/components/shapes/halfCircle.d.ts +9 -0
- package/dist/esm/types/components/shapes/rectangle.d.ts +9 -0
- package/dist/esm/types/components/shapes/rectangularFrame.d.ts +11 -0
- package/dist/esm/types/components/shapes/shapeWrapper.d.ts +8 -0
- package/dist/esm/types/components/svgUtilsShowbox.d.ts +3 -0
- package/dist/esm/types/components/texts/text.d.ts +4 -0
- package/dist/esm/types/components/viewControls/ruler.d.ts +7 -0
- package/dist/esm/types/components/viewControls/selectionFrame.d.ts +4 -0
- package/dist/esm/types/contexts/paperEventEmitterContext.d.ts +35 -0
- package/dist/esm/types/hooks/useKeyboardCommands.d.ts +5 -0
- package/dist/esm/types/hooks/useSelectionFrame.d.ts +6 -0
- package/dist/esm/types/index.d.ts +2 -0
- package/dist/esm/types/main.d.ts +2 -0
- package/dist/esm/types/mocks/editorContext.d.ts +2 -0
- package/dist/esm/types/mocks/port1.d.ts +5 -0
- package/dist/esm/types/models/IElement.d.ts +30 -0
- package/dist/esm/types/models/IElementLink.d.ts +22 -0
- package/dist/esm/types/models/IElementLinkProps.d.ts +27 -0
- package/dist/esm/types/models/IElementProps.d.ts +35 -0
- package/dist/esm/types/models/IElementSelectorProps.d.ts +22 -0
- package/dist/esm/types/models/IPort.d.ts +12 -0
- package/dist/esm/types/models/IPortProps.d.ts +24 -0
- package/dist/esm/types/models/IResizability.d.ts +4 -0
- package/dist/esm/types/models/IShape.d.ts +16 -0
- package/dist/esm/types/models/IText.d.ts +15 -0
- package/dist/esm/types/models/ITextProps.d.ts +19 -0
- package/dist/esm/types/models/callbackTypes.d.ts +14 -0
- package/dist/esm/types/models/enums/PositioningAnchor.d.ts +4 -0
- package/dist/esm/types/models/enums/ResizingDirection.d.ts +10 -0
- package/dist/esm/types/models/enums/SubObjectDirection.d.ts +4 -0
- package/dist/esm/types/models/enums/TextAlign.d.ts +5 -0
- package/dist/esm/types/models/enums/index.d.ts +4 -0
- package/dist/esm/types/models/implementations/CustomPort.d.ts +7 -0
- package/dist/esm/types/models/implementations/EditorContext.d.ts +31 -0
- package/dist/esm/types/models/implementations/Element.d.ts +44 -0
- package/dist/esm/types/models/implementations/ElementLink.d.ts +24 -0
- package/dist/esm/types/models/implementations/Port.d.ts +15 -0
- package/dist/esm/types/models/implementations/diamondElement.d.ts +11 -0
- package/dist/esm/types/models/implementations/rectangularFrameElement.d.ts +8 -0
- package/dist/esm/types/models/index.d.ts +18 -0
- package/dist/esm/types/models/position.d.ts +4 -0
- package/dist/esm/types/models/size.d.ts +4 -0
- package/dist/esm/types/reportWebVitals.d.ts +3 -0
- package/dist/esm/types/setupTests.d.ts +1 -0
- package/dist/esm/types/utils/constants.d.ts +48 -0
- package/dist/esm/types/utils/generateUniqueId.d.ts +1 -0
- package/dist/esm/types/utils/lineUtil.d.ts +3 -0
- package/dist/esm/types/utils/mathUtil.d.ts +6 -0
- package/dist/esm/types/utils/pathUtil.d.ts +11 -0
- package/dist/esm/types/utils/portSlideRailSVGUtil.d.ts +3 -0
- package/dist/esm/types/utils/positionUtil.d.ts +26 -0
- package/dist/esm/types/utils/svgUtil.d.ts +3 -0
- package/dist/index.d.ts +277 -0
- package/package.json +67 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import IElement from "../IElement";
|
|
3
|
+
import IElementProps from "../IElementProps";
|
|
4
|
+
import IPosition from "../position";
|
|
5
|
+
import ISize from "../size";
|
|
6
|
+
import IResizability from "../IResizability";
|
|
7
|
+
import IPort from "../IPort";
|
|
8
|
+
import IText from "../IText";
|
|
9
|
+
import { SubObjectDirection } from "../enums/SubObjectDirection";
|
|
10
|
+
import EventEmitter from "eventemitter3";
|
|
11
|
+
export default class Element implements IElement {
|
|
12
|
+
private readonly _id;
|
|
13
|
+
protected _position: IPosition;
|
|
14
|
+
protected _size: ISize;
|
|
15
|
+
private _parentElement?;
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated This property is deprecated and will be removed in future versions.
|
|
18
|
+
*/
|
|
19
|
+
reactElement?: FC<IElementProps> | React.FC<IElementProps> | React.ComponentClass<IElementProps>;
|
|
20
|
+
renderShape?: (props: IElementProps) => JSX.Element;
|
|
21
|
+
resizability: IResizability;
|
|
22
|
+
ports?: IPort[];
|
|
23
|
+
texts?: IText[];
|
|
24
|
+
portMoveableAreas?: IPosition[][];
|
|
25
|
+
portSlideRailSVGClassName?: string;
|
|
26
|
+
portDirection?: SubObjectDirection;
|
|
27
|
+
onResized?: ((width: number, height: number) => void) | undefined;
|
|
28
|
+
onMoved?: ((x: number, y: number) => void) | undefined;
|
|
29
|
+
_eventEmitter: EventEmitter;
|
|
30
|
+
constructor(x: number, y: number, width: number, height: number, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection);
|
|
31
|
+
get id(): string;
|
|
32
|
+
get size(): ISize;
|
|
33
|
+
set size(value: ISize);
|
|
34
|
+
set position(value: IPosition);
|
|
35
|
+
get position(): IPosition;
|
|
36
|
+
get parentElement(): IElement | undefined;
|
|
37
|
+
set parentElement(value: IElement | undefined);
|
|
38
|
+
onParentChanged(callback: (oldParent?: IElement, newParent?: IElement) => void): () => void;
|
|
39
|
+
addPort(newPort: IPort): void;
|
|
40
|
+
onAddedPort(callback: (newPort: IPort) => void): () => void;
|
|
41
|
+
deletePort(id: string): void;
|
|
42
|
+
onDeletedPort(callback: (id: string) => void): () => void;
|
|
43
|
+
getPort(id: string): IPort | undefined;
|
|
44
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import IElement from "../IElement";
|
|
3
|
+
import IElementLink from "../IElementLink";
|
|
4
|
+
import IPort from "../IPort";
|
|
5
|
+
import IText from "../IText";
|
|
6
|
+
import IPosition from "../position";
|
|
7
|
+
export default class ElementLink implements IElementLink {
|
|
8
|
+
readonly id: string;
|
|
9
|
+
sourceElement: IElement;
|
|
10
|
+
targetElement?: IElement;
|
|
11
|
+
sourcePort: IPort;
|
|
12
|
+
targetPort?: IPort;
|
|
13
|
+
path?: string;
|
|
14
|
+
points: IPosition[];
|
|
15
|
+
tempTargetPosition?: IPosition;
|
|
16
|
+
markerStart?: JSX.Element;
|
|
17
|
+
markerEnd?: JSX.Element;
|
|
18
|
+
markerDistanceFromPort?: number;
|
|
19
|
+
markerSize?: number;
|
|
20
|
+
label?: IText;
|
|
21
|
+
sourceLabel?: IText;
|
|
22
|
+
targetLabel?: IText;
|
|
23
|
+
constructor(sourceElement: IElement, sourcePort: IPort, targetElement: IElement, targetPort: IPort, tempTargetPosition: IPosition, points?: IPosition[]);
|
|
24
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import IPort from "../IPort";
|
|
3
|
+
import { IPortProps } from "../IPortProps";
|
|
4
|
+
import IText from "../IText";
|
|
5
|
+
import IPosition from "../position";
|
|
6
|
+
import ISize from "../size";
|
|
7
|
+
export default class Port implements IPort {
|
|
8
|
+
private readonly _id;
|
|
9
|
+
position: IPosition;
|
|
10
|
+
size: ISize;
|
|
11
|
+
label?: IText;
|
|
12
|
+
renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
|
|
13
|
+
constructor(x: number, y: number, width: number, height: number, label?: IText, renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>);
|
|
14
|
+
get id(): string;
|
|
15
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Element from "./Element";
|
|
2
|
+
import ISize from "../size";
|
|
3
|
+
import IResizability from "../IResizability";
|
|
4
|
+
import IPort from "../IPort";
|
|
5
|
+
import IText from "../IText";
|
|
6
|
+
export default class DiamondElement extends Element {
|
|
7
|
+
resizability: IResizability;
|
|
8
|
+
get size(): ISize;
|
|
9
|
+
set size(value: ISize);
|
|
10
|
+
constructor(x: number, y: number, width: number, height: number, texts?: IText[], ports?: IPort[]);
|
|
11
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import Element from "./Element";
|
|
2
|
+
import IResizability from "../IResizability";
|
|
3
|
+
import IPort from "../IPort";
|
|
4
|
+
import IText from "../IText";
|
|
5
|
+
export default class RectangularFrameElement extends Element {
|
|
6
|
+
resizability: IResizability;
|
|
7
|
+
constructor(x: number, y: number, width: number, height: number, texts?: IText[], ports?: IPort[]);
|
|
8
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type IElement from "./IElement";
|
|
2
|
+
import type IElementLink from "./IElementLink";
|
|
3
|
+
import type IElementLinkProps from "./IElementLinkProps";
|
|
4
|
+
import type IElementProps from "./IElementProps";
|
|
5
|
+
import type IPort from "./IPort";
|
|
6
|
+
import type IPosition from "./position";
|
|
7
|
+
import type IResizability from "./IResizability";
|
|
8
|
+
import type ISelectionFrameProps from "./IElementSelectorProps";
|
|
9
|
+
import type IShape from "./IShape";
|
|
10
|
+
import type ISize from "./size";
|
|
11
|
+
import type IText from "./IText";
|
|
12
|
+
import type ITextProps from "./ITextProps";
|
|
13
|
+
export * from './enums';
|
|
14
|
+
export * from './callbackTypes';
|
|
15
|
+
export * from './implementations/EditorContext';
|
|
16
|
+
export * from './IText';
|
|
17
|
+
export * from './IPortProps';
|
|
18
|
+
export { IElement, IElementLink, IElementLinkProps, IElementProps, IPort, IPosition, IResizability, ISelectionFrameProps, IShape, ISize, IText, ITextProps, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export declare const MIN_ELEMENT_SIZE = 20;
|
|
2
|
+
export declare const EVENT_NAME: {
|
|
3
|
+
PAPER_CLICK: string;
|
|
4
|
+
ELEMENT_MOVED: string;
|
|
5
|
+
ELEMENT_CLICK: string;
|
|
6
|
+
ELEMENT_DRAGGED: string;
|
|
7
|
+
ELEMENT_RESIZED: string;
|
|
8
|
+
ELEMENT_DELETED: string;
|
|
9
|
+
PORT_MOUSE_DOWN: string;
|
|
10
|
+
PORT_MOUSE_UP: string;
|
|
11
|
+
PORT_MOVED: string;
|
|
12
|
+
COMMAND_DELETE_SELECTED_PORT: string;
|
|
13
|
+
COMMAND_DELETE_SELECTED_LINK: string;
|
|
14
|
+
COMMAND_DELETE_SELECTED_ELEMENT: string;
|
|
15
|
+
COMMAND_DELETE_SELECTED_TEXT: string;
|
|
16
|
+
ELEMENT_LINK_STARTED: string;
|
|
17
|
+
ELEMENT_LINK_ENDED: string;
|
|
18
|
+
};
|
|
19
|
+
export declare const ELEMENT_MOVING_OFFSET_THRESHOLD = 10;
|
|
20
|
+
export declare const MIN_DISTANCE_BETWEEN_KNOTS_ON_LINK = 30;
|
|
21
|
+
export declare const MAX_LINK_KNOT_COUNT = 10;
|
|
22
|
+
export declare const LINK_MARKER_DISTANCE_FROM_PORT = 20;
|
|
23
|
+
export declare const LINK_MARKER_SIZE = 20;
|
|
24
|
+
export declare const LINK_CLICKABLE_STROKE_WIDTH = 15;
|
|
25
|
+
export declare const CSS_CLASS_LINK_SELECTED = "link-selected";
|
|
26
|
+
export declare const LINK_DEFAULT_COLOR = "black";
|
|
27
|
+
export declare const LINK_SOURCE_LABEL_POSITION_FROM_SOURCE_PORT: {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
};
|
|
31
|
+
export declare const LINK_TARGET_LABEL_POSITION_FROM_TARGET_PORT: {
|
|
32
|
+
x: number;
|
|
33
|
+
y: number;
|
|
34
|
+
};
|
|
35
|
+
export declare const LINK_LABEL_POSITION_FROM_LINK_MID_POINT: {
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
};
|
|
39
|
+
export declare const PORT_LABEL_POSITION: {
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
};
|
|
43
|
+
export declare const TEXT_FONT_SIZE = 12;
|
|
44
|
+
export declare const TEXT_MOVING_OFFSET_THRESHOLD = 10;
|
|
45
|
+
export declare const PORT_PLACEHOLDER_DEFAULT_SIZE = 8;
|
|
46
|
+
export declare const PORT_PLACEHOLDER_DEFAULT_STROKE = "green";
|
|
47
|
+
export declare const PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
|
|
48
|
+
export declare const PORT_MOVING_OFFSET_THRESHOLD = 15;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function generateUniqueId(): string;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import IPosition from "../models/position";
|
|
2
|
+
declare const diamondEdgeInsideSquare: (squareEdgeSize: number) => number;
|
|
3
|
+
declare function degreeToRadian(degree: number): number;
|
|
4
|
+
declare function getRotatedRectangleCoordinates(actualPoints: IPosition[], centerX: number, centerY: number, angle: number): IPosition[];
|
|
5
|
+
declare function calculateAngleWithOx(pStart: IPosition, pEnd: IPosition): number;
|
|
6
|
+
export { diamondEdgeInsideSquare, degreeToRadian, getRotatedRectangleCoordinates, calculateAngleWithOx, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import IPosition from "../models/position";
|
|
2
|
+
interface IPathCommand {
|
|
3
|
+
type: string;
|
|
4
|
+
values: number[];
|
|
5
|
+
}
|
|
6
|
+
export declare function getCurvePathData(points: IPosition[], smoothing?: number, closed?: boolean): IPathCommand[];
|
|
7
|
+
export declare function pathDataToD(pathData: IPathCommand[], decimals?: number): string;
|
|
8
|
+
export declare function createSmoothPathString(points: IPosition[], smoothing?: number, close?: boolean): string;
|
|
9
|
+
export declare function dist(p1: IPosition, p2: IPosition): number;
|
|
10
|
+
export declare function addPointToList(point: IPosition, listPoints: IPosition[], path: SVGPathElement): IPosition[];
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import Flatten from "flatten-js";
|
|
2
|
+
import IPosition from "../models/position";
|
|
3
|
+
import IElement from "../models/IElement";
|
|
4
|
+
/**
|
|
5
|
+
* Check if position 1 is within the radius r of position 2
|
|
6
|
+
* @returns boolean
|
|
7
|
+
*/
|
|
8
|
+
export declare const checkSamePosition: (p1: IPosition, p2: IPosition, r?: number) => boolean;
|
|
9
|
+
export declare function removeDuplicatePosition<T extends IPosition>(positions: T[]): T[];
|
|
10
|
+
/**
|
|
11
|
+
* Find the closest point from a list of points to the destination point
|
|
12
|
+
*/
|
|
13
|
+
export declare const findNearestPosition: (listPositions: IPosition[], targetPosition: IPosition) => IPosition;
|
|
14
|
+
/**
|
|
15
|
+
* @param ele : IElement
|
|
16
|
+
* @returns Flatten.Polygon
|
|
17
|
+
*/
|
|
18
|
+
export declare const makePolygonOfElement: (ele: IElement) => Flatten.Polygon;
|
|
19
|
+
export declare const getIntersectionPositions: (pointStart: IPosition, pointEnd: IPosition, ele: IElement) => IPosition[];
|
|
20
|
+
export declare const getFirstIntersection: (startPosition: IPosition, endPosition: IPosition, elements: IElement[]) => {
|
|
21
|
+
nearestIntersection: IPosition;
|
|
22
|
+
intersectionPointsList: IPosition[];
|
|
23
|
+
element: IElement;
|
|
24
|
+
} | undefined;
|
|
25
|
+
export declare const generateSubstitutePosition: (intersectedPosition: IPosition, targetPosition: IPosition, ele: IElement) => IPosition;
|
|
26
|
+
export declare const getRelativePosition: (clientPosition: IPosition, relativeElement: Element) => IPosition;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React$1, { DOMAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
declare enum SubObjectDirection {
|
|
5
|
+
Radial = "Radial",
|
|
6
|
+
PerpendicularInward = "PerpendicularInward"
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
declare enum TextAlign {
|
|
10
|
+
left = 0,
|
|
11
|
+
right = 1,
|
|
12
|
+
center = 2
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface IPosition {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface ISize {
|
|
21
|
+
width: number;
|
|
22
|
+
height: number;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface IText {
|
|
26
|
+
id: string;
|
|
27
|
+
content: string;
|
|
28
|
+
size: ISize;
|
|
29
|
+
position?: IPosition;
|
|
30
|
+
align?: TextAlign;
|
|
31
|
+
fontSize?: number;
|
|
32
|
+
border?: string;
|
|
33
|
+
}
|
|
34
|
+
interface IPaperText extends IText {
|
|
35
|
+
position: IPosition;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
interface IPortProps {
|
|
39
|
+
id: string;
|
|
40
|
+
x: number;
|
|
41
|
+
y: number;
|
|
42
|
+
width: number;
|
|
43
|
+
height: number;
|
|
44
|
+
rotation?: number;
|
|
45
|
+
container: Element;
|
|
46
|
+
linkTypes?: string[];
|
|
47
|
+
onConnected?: (portId: string) => void;
|
|
48
|
+
onDisconnected?: (portId: string) => void;
|
|
49
|
+
onSelected?: (portId: string, e: React.MouseEvent<SVGElement>, ref?: SVGSVGElement) => void;
|
|
50
|
+
onMouseUp?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
|
|
51
|
+
onMouseDown?: (portId: string, e: React.MouseEvent<SVGElement>) => void;
|
|
52
|
+
moveableAreas?: IPosition[][];
|
|
53
|
+
label?: IText;
|
|
54
|
+
onPortLabelMoved?: (offsetX: number, offsetY: number) => void;
|
|
55
|
+
onPortLabelResized?: (width: number, height: number) => void;
|
|
56
|
+
onPortLabelContentChanged?: (ev: React.ChangeEvent, newValue: string) => void;
|
|
57
|
+
renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
interface IPort {
|
|
61
|
+
readonly id: string;
|
|
62
|
+
position: IPosition;
|
|
63
|
+
size: ISize;
|
|
64
|
+
label?: IText;
|
|
65
|
+
renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
interface IElementLink {
|
|
69
|
+
readonly id: string;
|
|
70
|
+
sourceElement: IElement;
|
|
71
|
+
targetElement?: IElement;
|
|
72
|
+
sourcePort: IPort;
|
|
73
|
+
targetPort?: IPort;
|
|
74
|
+
path?: string;
|
|
75
|
+
points?: IPosition[];
|
|
76
|
+
tempTargetPosition?: IPosition;
|
|
77
|
+
markerStart?: JSX.Element;
|
|
78
|
+
markerEnd?: JSX.Element;
|
|
79
|
+
markerDistanceFromPort?: number;
|
|
80
|
+
markerSize?: number;
|
|
81
|
+
label?: IText;
|
|
82
|
+
sourceLabel?: IText;
|
|
83
|
+
targetLabel?: IText;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
type onPortMovedHandler = (port: IPort, elementId: string, oldPosition: IPosition, newPosition: IPosition) => void;
|
|
87
|
+
type onPortMouseDownHandler = (ev: React.MouseEvent<SVGElement>, port: IPort, elementId: string) => void;
|
|
88
|
+
type onPortMouseUpHandler = (ev: React.MouseEvent<SVGElement>, port: IPort, elementId: string) => void;
|
|
89
|
+
type onElementMovedHandler = (element: IElement, oldPosition: IPosition, newPosition: IPosition) => void;
|
|
90
|
+
type onElementResizedHandler = (element: IElement, oldSize: ISize, newSize: ISize) => void;
|
|
91
|
+
type onCommandDeleteSelectedHandler = () => void;
|
|
92
|
+
type OnElementLinkStarted = (elementLink: IElementLink) => void;
|
|
93
|
+
type OnElementLinkEnded = (elementLink?: IElementLink) => void;
|
|
94
|
+
|
|
95
|
+
interface IElementProps {
|
|
96
|
+
id: string;
|
|
97
|
+
x: number;
|
|
98
|
+
y: number;
|
|
99
|
+
width: number;
|
|
100
|
+
height: number;
|
|
101
|
+
renderShape?: (props: IElementProps) => JSX.Element;
|
|
102
|
+
children?: React.ReactNode;
|
|
103
|
+
ports?: IPort[];
|
|
104
|
+
texts?: IText[];
|
|
105
|
+
portMoveableAreas?: IPosition[][];
|
|
106
|
+
portSlideRailSVGClassName?: string;
|
|
107
|
+
portDirection?: SubObjectDirection;
|
|
108
|
+
onClick?: (elementId: string, e: React.MouseEvent<SVGElement>, ref: SVGSVGElement | null) => void;
|
|
109
|
+
container: Element;
|
|
110
|
+
onResized?: onElementResizedHandler;
|
|
111
|
+
onMoved?: onElementMovedHandler;
|
|
112
|
+
onPortMoved?: onPortMovedHandler;
|
|
113
|
+
onPortMouseDown?: onPortMouseDownHandler;
|
|
114
|
+
onPortMouseUp?: onPortMouseUpHandler;
|
|
115
|
+
portPlaceholderShape?: JSX.Element;
|
|
116
|
+
onMouseMove?: (event: React.MouseEvent) => void;
|
|
117
|
+
onMouseLeave?: (event: React.MouseEvent) => void;
|
|
118
|
+
onMouseUp?: (event: React.MouseEvent) => void;
|
|
119
|
+
onMouseUpAtLinkedPortPlaceholder?: (link: IElementLink, position: IPosition) => void;
|
|
120
|
+
onTextUpdated?: (textId: string, newTextContent: string) => void;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
interface IResizability {
|
|
124
|
+
enabled: boolean;
|
|
125
|
+
keepRatio: boolean;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
interface IElement {
|
|
129
|
+
readonly id: string;
|
|
130
|
+
position: IPosition;
|
|
131
|
+
size: ISize;
|
|
132
|
+
/**
|
|
133
|
+
* @deprecated This property is deprecated and will be removed in future versions.
|
|
134
|
+
*/
|
|
135
|
+
reactElement?: React.FC<IElementProps> | React.ComponentClass<IElementProps>;
|
|
136
|
+
renderShape?: (props: IElementProps) => JSX.Element;
|
|
137
|
+
resizability: IResizability;
|
|
138
|
+
ports?: IPort[];
|
|
139
|
+
texts?: IText[];
|
|
140
|
+
portMoveableAreas?: IPosition[][];
|
|
141
|
+
portSlideRailSVGClassName?: string;
|
|
142
|
+
portDirection?: SubObjectDirection;
|
|
143
|
+
parentElement?: IElement;
|
|
144
|
+
onParentChanged?: (callback: (oldParent?: IElement, newParent?: IElement) => void) => (() => void);
|
|
145
|
+
addPort: (newPort: IPort) => void;
|
|
146
|
+
onAddedPort: (callback: (newPort: IPort) => void) => (() => void);
|
|
147
|
+
deletePort: (id: string) => void;
|
|
148
|
+
onDeletedPort: (callback: (id: string) => void) => (() => void);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
interface IElementLinkProps {
|
|
152
|
+
id: string;
|
|
153
|
+
stroke?: string;
|
|
154
|
+
strokeWidth?: number;
|
|
155
|
+
sourcePosition: IPosition;
|
|
156
|
+
targetPosition: IPosition;
|
|
157
|
+
label?: IText;
|
|
158
|
+
sourceLabel?: IText;
|
|
159
|
+
targetLabel?: IText;
|
|
160
|
+
onLabelMoved?: (offsetX: number, offsetY: number, labelType: 'middle' | 'source' | 'target') => void;
|
|
161
|
+
onLabelResized?: (width: number, height: number, labelType: 'middle' | 'source' | 'target') => void;
|
|
162
|
+
onLabelContentChanged?: (newValue: string, labelType: 'middle' | 'source' | 'target') => void;
|
|
163
|
+
path?: string;
|
|
164
|
+
points?: IPosition[];
|
|
165
|
+
container?: Element | null;
|
|
166
|
+
markerStart?: JSX.Element;
|
|
167
|
+
markerEnd?: JSX.Element;
|
|
168
|
+
markerDistanceFromPort?: number;
|
|
169
|
+
markerSize?: number;
|
|
170
|
+
onPathChanged?: (path: string, id: string) => void;
|
|
171
|
+
onClickDelete?: (ev: React.MouseEvent) => void;
|
|
172
|
+
onSelected?: () => void;
|
|
173
|
+
onDeselected?: () => void;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
interface IDragDropHandlerElementProps {
|
|
177
|
+
dragging?: boolean;
|
|
178
|
+
onMouseDown: (event: React$1.MouseEvent<SVGElement, MouseEvent>) => void;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
declare enum PositioningAnchor {
|
|
182
|
+
TopLeft = 0,
|
|
183
|
+
Center = 1
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
interface ISelectionFrameProps {
|
|
187
|
+
x?: number;
|
|
188
|
+
y?: number;
|
|
189
|
+
width?: number;
|
|
190
|
+
height?: number;
|
|
191
|
+
targetSVGElement?: SVGSVGElement;
|
|
192
|
+
onMove?: (x: number, y: number) => void;
|
|
193
|
+
onResize?: (width: number, height: number) => void;
|
|
194
|
+
resizability: IResizability;
|
|
195
|
+
movingRate?: number;
|
|
196
|
+
movingOffsetThreshold?: number;
|
|
197
|
+
container: Element;
|
|
198
|
+
anchor?: PositioningAnchor;
|
|
199
|
+
dragDropHandlerElement?: React$1.FC<IDragDropHandlerElementProps>;
|
|
200
|
+
framePadding?: number;
|
|
201
|
+
strokeWidth?: number;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
interface IShape extends DOMAttributes<SVGElement>, React.RefAttributes<SVGSVGElement> {
|
|
205
|
+
x: number;
|
|
206
|
+
y: number;
|
|
207
|
+
width: number;
|
|
208
|
+
height: number;
|
|
209
|
+
stroke?: string;
|
|
210
|
+
strokeWidth?: number;
|
|
211
|
+
fill?: string;
|
|
212
|
+
rotation?: number;
|
|
213
|
+
direction?: 'left' | 'right' | 'up' | 'down';
|
|
214
|
+
positioningAnchor?: PositioningAnchor | IPosition;
|
|
215
|
+
onClick?: (e: React.MouseEvent<SVGElement>) => void;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
interface ITextProps {
|
|
219
|
+
id: string;
|
|
220
|
+
content: string;
|
|
221
|
+
x?: number;
|
|
222
|
+
y?: number;
|
|
223
|
+
height: number;
|
|
224
|
+
width: number;
|
|
225
|
+
align?: TextAlign;
|
|
226
|
+
fontSize?: number;
|
|
227
|
+
border?: string;
|
|
228
|
+
container: Element;
|
|
229
|
+
onSelected?: (text: IText) => void;
|
|
230
|
+
onMoved?: (x: number, y: number) => void;
|
|
231
|
+
onResized?: (width: number, height: number) => void;
|
|
232
|
+
onContentChanged?: (ev: React.ChangeEvent, newValue: string) => void;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
declare enum ResizingDirection {
|
|
236
|
+
TopLeft = 0,
|
|
237
|
+
TopCenter = 1,
|
|
238
|
+
TopRight = 2,
|
|
239
|
+
RightCenter = 3,
|
|
240
|
+
BottomRight = 4,
|
|
241
|
+
BottomCenter = 5,
|
|
242
|
+
BottomLeft = 6,
|
|
243
|
+
LeftCenter = 7
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
declare class EditorContext {
|
|
247
|
+
private _elements;
|
|
248
|
+
private _links;
|
|
249
|
+
private _texts;
|
|
250
|
+
onPaperClicked?: () => void;
|
|
251
|
+
onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
|
|
252
|
+
onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
|
|
253
|
+
onElementResized?: (size: ISize, element: IElement, index: number) => void;
|
|
254
|
+
validateLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => boolean;
|
|
255
|
+
onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
|
|
256
|
+
onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
|
|
257
|
+
constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
|
|
258
|
+
get elements(): IElement[];
|
|
259
|
+
get links(): IElementLink[];
|
|
260
|
+
get texts(): IPaperText[];
|
|
261
|
+
getElement(elementId: string): IElement | undefined;
|
|
262
|
+
addElement(element: IElement): void;
|
|
263
|
+
removeElement(elementId: string): void;
|
|
264
|
+
getLink(linkId: string): IElementLink | undefined;
|
|
265
|
+
addLink(link: IElementLink): void;
|
|
266
|
+
removeLink(linkId: string): void;
|
|
267
|
+
getText(textId: string): IPaperText | undefined;
|
|
268
|
+
addText(text: IPaperText): void;
|
|
269
|
+
removeText(textId: string): void;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
interface IEditorProps {
|
|
273
|
+
editorContext: EditorContext;
|
|
274
|
+
}
|
|
275
|
+
declare function Editor({ editorContext }: IEditorProps): React$1.JSX.Element;
|
|
276
|
+
|
|
277
|
+
export { EditorContext, type IElement, type IElementLink, type IElementLinkProps, type IElementProps, type IPaperText, type IPort, type IPortProps, type IPosition, type IResizability, type ISelectionFrameProps, type IShape, type ISize, type IText, type ITextProps, type OnElementLinkEnded, type OnElementLinkStarted, PositioningAnchor, ResizingDirection, SubObjectDirection, TextAlign, Editor as default, type onCommandDeleteSelectedHandler, type onElementMovedHandler, type onElementResizedHandler, type onPortMouseDownHandler, type onPortMouseUpHandler, type onPortMovedHandler };
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "orcasvn-react-diagrams",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"dependencies": {
|
|
5
|
+
"@types/jest": "^27.5.2",
|
|
6
|
+
"@types/node": "^16.18.101",
|
|
7
|
+
"eventemitter3": "^5.0.1",
|
|
8
|
+
"flatten-js": "^0.6.9",
|
|
9
|
+
"typescript": "^4.9.5",
|
|
10
|
+
"uuid": "^10.0.0",
|
|
11
|
+
"web-vitals": "^2.1.4"
|
|
12
|
+
},
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">=18.17.0 <19.0.0"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"start": "react-scripts start",
|
|
18
|
+
"build": "react-scripts build",
|
|
19
|
+
"test": "react-scripts test",
|
|
20
|
+
"eject": "react-scripts eject",
|
|
21
|
+
"rollup-build-lib": "rollup -c"
|
|
22
|
+
},
|
|
23
|
+
"eslintConfig": {
|
|
24
|
+
"extends": [
|
|
25
|
+
"react-app",
|
|
26
|
+
"react-app/jest"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"browserslist": {
|
|
30
|
+
"production": [
|
|
31
|
+
">0.2%",
|
|
32
|
+
"not dead",
|
|
33
|
+
"not op_mini all"
|
|
34
|
+
],
|
|
35
|
+
"development": [
|
|
36
|
+
"last 1 chrome version",
|
|
37
|
+
"last 1 firefox version",
|
|
38
|
+
"last 1 safari version"
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
"main": "dist/cjs/index.js",
|
|
42
|
+
"module": "dist/esm/index.js",
|
|
43
|
+
"files": [
|
|
44
|
+
"dist"
|
|
45
|
+
],
|
|
46
|
+
"types": "dist/index.d.ts",
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@rollup/plugin-commonjs": "^26.0.1",
|
|
49
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
50
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
51
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
52
|
+
"@testing-library/jest-dom": "^5.17.0",
|
|
53
|
+
"@testing-library/react": "^13.4.0",
|
|
54
|
+
"@testing-library/user-event": "^13.5.0",
|
|
55
|
+
"@types/react": "^18.3.3",
|
|
56
|
+
"@types/react-dom": "^18.3.0",
|
|
57
|
+
"@types/uuid": "^10.0.0",
|
|
58
|
+
"react": "^18.3.1",
|
|
59
|
+
"react-dom": "^18.3.1",
|
|
60
|
+
"react-scripts": "5.0.1",
|
|
61
|
+
"rollup": "^4.21.3",
|
|
62
|
+
"rollup-plugin-dts": "^6.1.1",
|
|
63
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
64
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
65
|
+
"tslib": "^2.7.0"
|
|
66
|
+
}
|
|
67
|
+
}
|