@lincle/react-web-base 0.0.1

package/dist/Path/lines/generateCurve.d.ts

@@ -0,0 +1,17 @@
+import { type Coordinates, type Line } from './types';
+export declare const curveHorizontal: (rx1: number, ry1: number, rx2: number, ry2: number, center?: boolean) => Line;
+export declare const curveVertical: (rx1: number, ry1: number, rx2: number, ry2: number, center?: boolean) => Line;
+declare const _default: (source: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, target: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, center?: boolean) => Coordinates;
+export default _default;

package/dist/Path/lines/generateCurve.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.curveVertical = exports.curveHorizontal = void 0;
+const generatePoints_1 = __importDefault(require("./generatePoints"));
+const bezier_js_1 = require("bezier-js");
+const curveHorizontal = (rx1, ry1, rx2, ry2, center) => {
+    const x1 = Math.round(rx1);
+    const y1 = Math.round(ry1);
+    const x2 = Math.round(rx2);
+    const y2 = Math.round(ry2);
+    const d = [];
+    const mx = Math.round(x1 + (x2 - x1) / 2);
+    const c = center ?
+        new bezier_js_1.Bezier(x1, y1, mx, y1, mx, y2, x2, y2).compute(0.5) :
+        undefined;
+    d.push('M', x1, y1);
+    d.push('C', mx, y1, mx, y2, x2, y2);
+    return {
+        center: c,
+        path: d.join(' ')
+    };
+};
+exports.curveHorizontal = curveHorizontal;
+const curveVertical = (rx1, ry1, rx2, ry2, center) => {
+    const x1 = Math.round(rx1);
+    const y1 = Math.round(ry1);
+    const x2 = Math.round(rx2);
+    const y2 = Math.round(ry2);
+    const d = [];
+    const my = Math.round(y1 + (y2 - y1) / 2);
+    const c = center ?
+        new bezier_js_1.Bezier(x1, y1, x1, my, x2, my, x2, y2).compute(0.5) :
+        undefined;
+    d.push('M', x1, y1);
+    d.push('C', x1, my, x2, my, x2, y2);
+    return {
+        center: c,
+        path: d.join(' ')
+    };
+};
+exports.curveVertical = curveVertical;
+exports.default = (source, target, center) => {
+    const { orientation, source: sourcePoints, target: targetPoints } = (0, generatePoints_1.default)(source, target);
+    return Object.assign(Object.assign({}, (orientation === 'horizontal' ?
+        (0, exports.curveHorizontal)(sourcePoints.x, sourcePoints.y, targetPoints.x, targetPoints.y, center) :
+        (0, exports.curveVertical)(sourcePoints.x, sourcePoints.y, targetPoints.x, targetPoints.y, center))), { source: sourcePoints, target: targetPoints });
+};

package/dist/Path/lines/generateDirect.d.ts

@@ -0,0 +1,16 @@
+import { type Coordinates, type Line } from './types';
+export declare const direct: (rx1: number, ry1: number, rx2: number, ry2: number, center?: boolean) => Line;
+declare const _default: (source: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, target: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, center?: boolean) => Coordinates;
+export default _default;

package/dist/Path/lines/generateDirect.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.direct = void 0;
+const generatePoints_1 = __importDefault(require("./generatePoints"));
+const direct = (rx1, ry1, rx2, ry2, center) => {
+    const x1 = Math.round(rx1);
+    const y1 = Math.round(ry1);
+    const x2 = Math.round(rx2);
+    const y2 = Math.round(ry2);
+    const cx = Math.round((x2 + x1) / 2);
+    const cy = Math.round((y2 + y1) / 2);
+    const d = [];
+    d.push('M', x1, y1);
+    d.push('L', x2, y2);
+    return {
+        center: center ?
+            {
+                x: cx,
+                y: cy
+            } :
+            undefined,
+        path: d.join(' ')
+    };
+};
+exports.direct = direct;
+exports.default = (source, target, center) => {
+    const { source: sourcePoints, target: targetPoints } = (0, generatePoints_1.default)(source, target);
+    return Object.assign(Object.assign({}, (0, exports.direct)(sourcePoints.x, sourcePoints.y, targetPoints.x, targetPoints.y, center)), { source: sourcePoints, target: targetPoints });
+};

package/dist/Path/lines/generatePoints.d.ts

@@ -0,0 +1,15 @@
+import { type Points } from './types';
+declare const _default: (source: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, target: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}) => Points;
+export default _default;

package/dist/Path/lines/generatePoints.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = (source, target) => {
+    const sx = Math.round(source.x);
+    const sy = Math.round(source.y);
+    const tx = Math.round(target.x);
+    const ty = Math.round(target.y);
+    const halfTargetWidth = Math.round(target.width / 2);
+    const halfTargetHeight = Math.round(target.height / 2);
+    const halfSourceWidth = Math.round(source.width / 2);
+    const halfSourceHeight = Math.round(source.height / 2);
+    const sourceAngle = Math.atan2(tx + halfTargetWidth - (sx + halfSourceWidth), ty + halfTargetHeight - (sy + halfSourceHeight));
+    const targetAngle = Math.atan2(sx + halfSourceWidth - (tx + halfTargetWidth), sy + halfSourceHeight - (ty + halfTargetHeight));
+    const sourceEdgeX = Math.sin(sourceAngle) * halfSourceWidth + halfSourceWidth;
+    const sourceEdgeY = Math.cos(sourceAngle) * halfSourceHeight + halfSourceHeight;
+    const targetEdgeX = Math.sin(targetAngle) * halfTargetWidth + halfTargetWidth;
+    const targetEdgeY = Math.cos(targetAngle) * halfTargetHeight + halfTargetHeight;
+    const sourceDX = sx + sourceEdgeX - tx - targetEdgeX;
+    const sourceDY = sy + sourceEdgeY - ty - targetEdgeY;
+    const sourceROR = sourceDX / sourceDY;
+    let orientation;
+    let targetPoints = {
+        x: sourceEdgeX,
+        y: sourceEdgeY
+    };
+    if (sourceROR < 1 && sourceROR > -1) {
+        orientation = 'vertical';
+        if (sourceDY > 0) {
+            targetPoints = {
+                x: sx + sourceEdgeX,
+                y: sy + (source.shape === 'oval' ?
+                    sourceEdgeY :
+                    0)
+            };
+        }
+        else {
+            targetPoints = {
+                x: sx + sourceEdgeX,
+                y: sy + (source.shape === 'oval' ?
+                    sourceEdgeY :
+                    source.height)
+            };
+        }
+    }
+    else {
+        orientation = 'horizontal';
+        if (sourceDX > 0) {
+            targetPoints = {
+                x: sx + (source.shape === 'oval' ?
+                    sourceEdgeX :
+                    0),
+                y: sy + sourceEdgeY
+            };
+        }
+        else {
+            targetPoints = {
+                x: sx + (source.shape === 'oval' ?
+                    sourceEdgeX :
+                    source.width),
+                y: sy + sourceEdgeY
+            };
+        }
+    }
+    const targetDX = tx - targetEdgeX - sx - sourceEdgeX;
+    const targetDY = ty - targetEdgeY - sy - sourceEdgeY;
+    let sourcePoints = {
+        x: targetEdgeX,
+        y: targetEdgeY
+    };
+    if (orientation === 'vertical') {
+        if (targetDY > 0) {
+            sourcePoints = {
+                x: tx + targetEdgeX,
+                y: ty + (target.shape === 'oval' ?
+                    targetEdgeY :
+                    0)
+            };
+        }
+        else {
+            sourcePoints = {
+                x: tx + targetEdgeX,
+                y: ty + (target.shape === 'oval' ?
+                    targetEdgeY :
+                    target.height)
+            };
+        }
+    }
+    else {
+        if (targetDX > 0) {
+            sourcePoints = {
+                x: tx + (target.shape === 'oval' ?
+                    targetEdgeX :
+                    0),
+                y: ty + targetEdgeY
+            };
+        }
+        else {
+            sourcePoints = {
+                x: tx + (target.shape === 'oval' ?
+                    targetEdgeX :
+                    target.width),
+                y: ty + targetEdgeY
+            };
+        }
+    }
+    return {
+        orientation,
+        source: sourcePoints,
+        target: targetPoints
+    };
+};

package/dist/Path/lines/generateStep.d.ts

@@ -0,0 +1,17 @@
+import { type Coordinates, type Line } from './types';
+export declare const stepHorizontal: (rx1: number, ry1: number, rx2: number, ry2: number, center?: boolean) => Line;
+export declare const stepVertical: (rx1: number, ry1: number, rx2: number, ry2: number, center?: boolean) => Line;
+declare const _default: (source: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, target: {
+    height: number;
+    shape: 'oval' | 'rectangle';
+    width: number;
+    x: number;
+    y: number;
+}, center?: boolean) => Coordinates;
+export default _default;

package/dist/Path/lines/generateStep.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepVertical = exports.stepHorizontal = void 0;
+const generatePoints_1 = __importDefault(require("./generatePoints"));
+const stepHorizontal = (rx1, ry1, rx2, ry2, center) => {
+    const x1 = Math.round(rx1);
+    const y1 = Math.round(ry1);
+    const x2 = Math.round(rx2);
+    const y2 = Math.round(ry2);
+    const d = [];
+    const mx = Math.round(x1 + (x2 - x1) / 2);
+    const my = Math.round(y1 + (y2 - y1) / 2);
+    const cx = Math.round((x2 + x1) / 2);
+    const cy = my;
+    d.push('M', x1, y1);
+    d.push('L', mx, y1);
+    d.push('L', mx, y2);
+    d.push('L', x2, y2);
+    return {
+        center: center ?
+            {
+                x: cx,
+                y: cy
+            } :
+            undefined,
+        path: d.join(' ')
+    };
+};
+exports.stepHorizontal = stepHorizontal;
+const stepVertical = (rx1, ry1, rx2, ry2, center) => {
+    const x1 = Math.round(rx1);
+    const y1 = Math.round(ry1);
+    const x2 = Math.round(rx2);
+    const y2 = Math.round(ry2);
+    const d = [];
+    const mx = Math.round(x1 + (x2 - x1) / 2);
+    const my = Math.round(y1 + (y2 - y1) / 2);
+    const cx = mx;
+    const cy = Math.round((y2 + y1) / 2);
+    d.push('M', x1, y1);
+    d.push('L', x1, my);
+    d.push('L', x2, my);
+    d.push('L', x2, y2);
+    return {
+        center: center ?
+            {
+                x: cx,
+                y: cy
+            } :
+            undefined,
+        path: d.join(' ')
+    };
+};
+exports.stepVertical = stepVertical;
+exports.default = (source, target, center) => {
+    const { orientation, source: sourcePoints, target: targetPoints } = (0, generatePoints_1.default)(source, target);
+    return Object.assign(Object.assign({}, (orientation === 'horizontal' ?
+        (0, exports.stepHorizontal)(sourcePoints.x, sourcePoints.y, targetPoints.x, targetPoints.y, center) :
+        (0, exports.stepVertical)(sourcePoints.x, sourcePoints.y, targetPoints.x, targetPoints.y, center))), { source: sourcePoints, target: targetPoints });
+};

package/dist/Path/lines/index.d.ts

@@ -0,0 +1,4 @@
+export { default as generateCurve } from './generateCurve';
+export { default as generateDirect } from './generateDirect';
+export { default as generateStep } from './generateStep';
+export type { Coordinates, Line, Points } from './types';

package/dist/Path/lines/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStep = exports.generateDirect = exports.generateCurve = void 0;
+var generateCurve_1 = require("./generateCurve");
+Object.defineProperty(exports, "generateCurve", { enumerable: true, get: function () { return __importDefault(generateCurve_1).default; } });
+var generateDirect_1 = require("./generateDirect");
+Object.defineProperty(exports, "generateDirect", { enumerable: true, get: function () { return __importDefault(generateDirect_1).default; } });
+var generateStep_1 = require("./generateStep");
+Object.defineProperty(exports, "generateStep", { enumerable: true, get: function () { return __importDefault(generateStep_1).default; } });

package/dist/Path/lines/types.d.ts

@@ -0,0 +1,34 @@
+export type Line = {
+    center?: {
+        x: number;
+        y: number;
+    };
+    path: string;
+};
+export type Orientation = 'horizontal' | 'vertical';
+export type Points = {
+    orientation: Orientation;
+    source: {
+        x: number;
+        y: number;
+    };
+    target: {
+        x: number;
+        y: number;
+    };
+};
+export type Coordinates = {
+    center?: {
+        x: number;
+        y: number;
+    };
+    path: string;
+    source: {
+        x: number;
+        y: number;
+    };
+    target: {
+        x: number;
+        y: number;
+    };
+};

package/dist/Path/lines/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+import { type EdgeNodeProps } from '@lincle/react-shared';
+import { type CSSProperties, type FunctionComponent, type ReactElement, type ReactNode } from 'react';
+declare const Edge: FunctionComponent<EdgeProps>;
+declare const Edges: FunctionComponent<EdgesProps>;
+declare const Graph: FunctionComponent<GraphProps>;
+declare const GraphContexts: FunctionComponent<GraphContextsProps>;
+declare const Grid: FunctionComponent<GridProps>;
+declare const Node: FunctionComponent<NodeProps>;
+declare const Nodes: FunctionComponent<NodesProps>;
+declare const Path: FunctionComponent<PathProps>;
+export type Line = 'curve' | 'direct' | 'step';
+export type Shape = 'oval' | 'rectangle';
+export type EdgeProps = {
+    children?: ReactNode;
+    className?: string;
+    dash?: Boolean;
+    id: number | string;
+    line?: Line;
+    markerEnd?: string;
+    markerStart?: string;
+    path?: (source?: EdgeNodeProps, target?: EdgeNodeProps, children?: ReactNode) => ReactElement;
+    sourceId: number | string;
+    targetId: number | string;
+};
+export type EdgesProps = {
+    children: Array<ReactElement<EdgeProps>> | ReactElement<EdgeProps>;
+    dash?: Boolean;
+};
+export type PathProps = {
+    children?: ReactNode;
+    className?: string;
+    diagramId?: number | string;
+    id: number | string;
+    line?: Line;
+    markerEnd?: string;
+    markerStart?: string;
+    source?: EdgeNodeProps;
+    target?: EdgeNodeProps;
+};
+export type NodeProps = {
+    children?: ReactElement | ReactElement[];
+    className?: string;
+    height?: number;
+    id: number | string;
+    ref?: React.MutableRefObject<HTMLDivElement | null> | ((instance: HTMLDivElement | null) => void) | null;
+    shape?: Shape;
+    style?: CSSProperties;
+    width?: number;
+    x?: number;
+    y?: number;
+};
+export type NodesProps = {
+    children: Array<ReactElement<NodeProps>> | ReactElement<NodeProps>;
+};
+export type GridType = [
+    number,
+    number
+];
+export type GridContextProps = GridType;
+export type GridProps = {
+    children?: ReactNode;
+    scale?: number;
+    xOffset?: number;
+    yOffset?: number;
+};
+export type GraphProps = {
+    children?: ReactNode | ReactNode[];
+    edgeFrequency?: number;
+    grid?: GridType | false;
+    id: number | string;
+    line?: Line;
+    nodeFrequency?: number;
+    nodeHeight?: number;
+    nodeWidth?: number;
+    shape?: Shape;
+};
+export type Dimensions = {
+    height: number;
+    id: number | string;
+    shape: Shape;
+    width: number;
+    x: number;
+    y: number;
+};
+export type Size = {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+};
+export type NodesDimensions = {
+    [key: string]: Dimensions;
+};
+export type GraphContextsProps = Omit<GraphProps, 'children'> & {
+    children: ReactElement<GraphProps> | ReactNode | ReactNode[];
+};
+export { Edge, Edges, Graph, GraphContexts, Grid, Node, Nodes, Path };

package/dist/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = exports.Nodes = exports.Node = exports.Grid = exports.GraphContexts = exports.Graph = exports.Edges = exports.Edge = void 0;
+const Edge_1 = __importDefault(require("./Edge"));
+const Edges_1 = __importDefault(require("./Edges"));
+const Graph_1 = __importDefault(require("./Graph"));
+const GraphContexts_1 = __importDefault(require("./GraphContexts"));
+const Grid_1 = __importDefault(require("./Grid"));
+const Node_1 = __importDefault(require("./Node"));
+const Nodes_1 = __importDefault(require("./Nodes"));
+const Path_1 = __importDefault(require("./Path"));
+const Edge = Edge_1.default;
+exports.Edge = Edge;
+const Edges = Edges_1.default;
+exports.Edges = Edges;
+const Graph = Graph_1.default;
+exports.Graph = Graph;
+const GraphContexts = GraphContexts_1.default;
+exports.GraphContexts = GraphContexts;
+const Grid = Grid_1.default;
+exports.Grid = Grid;
+const Node = Node_1.default;
+exports.Node = Node;
+const Nodes = Nodes_1.default;
+exports.Nodes = Nodes;
+const Path = Path_1.default;
+exports.Path = Path;

package/dist/styles.g.css

@@ -0,0 +1,99 @@
+/* edge */
+
+.lincle-base-edges {
+	position: absolute;
+	z-index: -1;
+	overflow: visible;
+
+	/* width: 1px; */
+
+	/* height: 1px; */
+	filter: drop-shadow(0 3px 6px rgba(0 0 0 / 16%)) drop-shadow(0 3px 6px rgba(0 0 0 23%));
+	backface-visibility: hidden;
+}
+
+.lincle-base-edges > :not(path) {
+	cursor: unset;
+}
+
+.lincle-base-edge-marker-arrow {
+	fill: black;
+}
+
+.lincle-base-edge-marker-circle {
+	fill: black;
+}
+
+/* grid */
+
+.lincle-base-grid {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+/* node */
+
+.lincle-base-node {
+	position: absolute;
+	transform-origin: 0 0;
+}
+
+/* path */
+
+.lincle-base-edge-path {
+	stroke: black;
+}
+
+.lincle-base-edge-path:hover {
+	animation: lincle-base-edgedash 1.5s linear reverse infinite;
+	stroke-dasharray: 5 5;
+}
+
+.lincle-base-edge-dash-all .lincle-base-edge-path {
+	animation: lincle-base-edgedash 1.5s linear reverse infinite;
+	stroke-dasharray: 5 5;
+}
+
+.lincle-base-edge-dash-none .lincle-base-edge-path {
+	animation: none;
+	stroke-dasharray: none;
+}
+
+.lincle-base-edge-dash-on {
+	animation: lincle-base-edgedash 1.5s linear reverse infinite;
+	stroke-dasharray: 5 5;
+}
+
+.lincle-base-edge-dash-off.lincle-base-edge-path:hover {
+	animation: none;
+	stroke-dasharray: none;
+}
+
+.lincle-base-edge-path-border {
+	stroke-width: 30px;
+	stroke: black;
+	opacity: 0;
+	pointer-events: all;
+}
+
+.lincle-base-edge-path-border:hover + .lincle-base-edge-path {
+	animation: lincle-base-edgedash 1.5s linear reverse infinite;
+	stroke-dasharray: 5 5;
+}
+
+.lincle-base-edge-path-border:hover + .lincle-base-edge-dash-off.lincle-base-edge-path {
+	animation: none;
+	stroke-dasharray: none;
+}
+
+.lincle-base-edge-dash-none .lincle-base-edge-path-border:hover + .lincle-base-edge-path {
+	animation: none;
+	stroke-dasharray: none;
+}
+
+@keyframes lincle-base-edgedash {
+	to {
+		stroke-dashoffset: 30;
+	}
+}