@lincle/react-shared 0.0.1 → 0.4.0-next.2

package/LICENSE.md

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+import type EdgeSubscriber from './utils/EdgeSubscriber';
+import type NodePositions from './utils/NodePositions';
+import { type ReactElement, type ReactNode } from 'react';
+export type Line = 'curve' | 'direct' | 'step';
+export type Shape = 'oval' | 'rectangle';
+export type EdgeNodeProps = {
+    height: number;
+    id: number | string;
+    shape: Shape;
+    width: number;
+    x: number;
+    y: number;
+};
+declare const defaultSettings: {
+    edgeFrequency: number;
+    grid: [number, number];
+    height: number;
+    line: Line;
+    nodeFrequency: number;
+    shape: Shape;
+    width: number;
+};
+export type Size = {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+};
+export type NodesDimensions = {
+    [key: string]: Dimensions;
+};
+export type Dimensions = {
+    height: number;
+    id: number | string;
+    shape: Shape;
+    width: number;
+    x: number;
+    y: number;
+};
+export type GraphContextProps = {
+    defaultSettings: Omit<typeof defaultSettings, 'grid'>;
+    diagramId: number | string;
+    edgeSubscriber: EdgeSubscriber;
+    nodePositions: NodePositions;
+};
+export type GridType = [
+    number,
+    number
+];
+export type GridContextProps = GridType;
+export { defaultSettings };
+export type EdgeProps = {
+    children?: ReactNode;
+    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;
+    diagramId?: number | string;
+    id: number | string;
+    line?: Line;
+    markerEnd?: string;
+    markerStart?: string;
+    source?: EdgeNodeProps;
+    target?: EdgeNodeProps;
+};
+export type NodeProps = {
+    children?: ReactElement | ReactElement[];
+    height?: number;
+    id: number | string;
+    ref?: React.MutableRefObject<HTMLDivElement | null> | ((instance: HTMLDivElement | null) => void) | null;
+    shape?: Shape;
+    track?: boolean;
+    width?: number;
+    x?: number;
+    y?: number;
+};
+export type NodesProps = {
+    children: Array<ReactElement<NodeProps>> | ReactElement<NodeProps>;
+};
+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 GraphContextsProps = Omit<GraphProps, 'children'> & {
+    children: ReactElement<GraphProps> | ReactNode | ReactNode[];
+};
+export { default as EdgeSubscriber } from './utils/EdgeSubscriber';
+export { default as GraphContext } from './utils/GraphContext';
+export { default as GridContext } from './utils/GridContext';
+export { default as NodePositions } from './utils/NodePositions';
+export { default as generateOrigins } from './utils/Path/generateOrigins';

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOrigins = exports.NodePositions = exports.GridContext = exports.GraphContext = exports.EdgeSubscriber = exports.defaultSettings = void 0;
+const defaultSettings_1 = __importDefault(require("./utils/defaultSettings"));
+const defaultSettings = defaultSettings_1.default;
+exports.defaultSettings = defaultSettings;
+var EdgeSubscriber_1 = require("./utils/EdgeSubscriber");
+Object.defineProperty(exports, "EdgeSubscriber", { enumerable: true, get: function () { return __importDefault(EdgeSubscriber_1).default; } });
+var GraphContext_1 = require("./utils/GraphContext");
+Object.defineProperty(exports, "GraphContext", { enumerable: true, get: function () { return __importDefault(GraphContext_1).default; } });
+var GridContext_1 = require("./utils/GridContext");
+Object.defineProperty(exports, "GridContext", { enumerable: true, get: function () { return __importDefault(GridContext_1).default; } });
+var NodePositions_1 = require("./utils/NodePositions");
+Object.defineProperty(exports, "NodePositions", { enumerable: true, get: function () { return __importDefault(NodePositions_1).default; } });
+var generateOrigins_1 = require("./utils/Path/generateOrigins");
+Object.defineProperty(exports, "generateOrigins", { enumerable: true, get: function () { return __importDefault(generateOrigins_1).default; } });

package/dist/utils/EdgeSubscriber.d.ts

@@ -0,0 +1,15 @@
+import { type EdgeNodeProps } from '..';
+declare class EdgeSubscriber {
+    private frequency;
+    constructor(frequency?: number);
+    getFrequency: () => number;
+    setFrequency: (frequency: number) => number;
+    private nodes;
+    private propsCache;
+    register: <T>(edgeId: number | string, nodeId: number | string, updateFn: (update: T) => void) => EdgeNodeProps;
+    unregister: (edgeId: number | string, nodeId: number | string) => void;
+    private readonly updateEdges;
+    private throttleUpdates;
+    update: (props: EdgeNodeProps) => void;
+}
+export default EdgeSubscriber;

package/dist/utils/EdgeSubscriber.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultSettings_1 = __importDefault(require("./defaultSettings"));
+const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
+const FREQUENCY = defaultSettings_1.default.edgeFrequency;
+class EdgeSubscriber {
+    constructor(frequency = FREQUENCY) {
+        this.getFrequency = () => {
+            return this.frequency;
+        };
+        this.setFrequency = (frequency) => {
+            this.frequency = frequency;
+            return this.frequency;
+        };
+        this.nodes = {};
+        this.propsCache = {};
+        this.register = (edgeId, nodeId, updateFn) => {
+            if (!this.nodes[nodeId]) {
+                this.nodes[nodeId] = {};
+            }
+            this.nodes[nodeId][edgeId] = updateFn;
+            return this.propsCache[nodeId];
+        };
+        this.unregister = (edgeId, nodeId) => {
+            delete this.nodes[nodeId][edgeId];
+            delete this.throttleUpdates[nodeId];
+        };
+        this.updateEdges = (props) => {
+            if (this.nodes[props.id]) {
+                for (const [_edgeId, update] of Object.entries(this.nodes[props.id])) {
+                    update(props);
+                }
+            }
+            this.propsCache[props.id] = props;
+        };
+        this.throttleUpdates = {};
+        this.update = (props) => {
+            const { id } = props;
+            if (!this.throttleUpdates[id]) {
+                this.throttleUpdates[id] = (0, lodash_throttle_1.default)(this.updateEdges, this.frequency, {
+                    trailing: true
+                });
+            }
+            this.throttleUpdates[id](props);
+        };
+        this.frequency = frequency;
+    }
+}
+exports.default = EdgeSubscriber;

package/dist/utils/GraphContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type GraphContextProps } from '..';
+declare const GraphContext: import("react").Context<GraphContextProps | null>;
+export default GraphContext;

package/dist/utils/GraphContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const GraphContext = (0, react_1.createContext)(null);
+GraphContext.displayName = 'LincleGraphContext';
+exports.default = GraphContext;

package/dist/utils/GridContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const GridContext: import("react").Context<import("..").GridType>;
+export default GridContext;

package/dist/utils/GridContext.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultSettings_1 = __importDefault(require("./defaultSettings"));
+const react_1 = require("react");
+const GridContext = (0, react_1.createContext)(defaultSettings_1.default.grid);
+GridContext.displayName = 'LincleInteractiveGridContext';
+exports.default = GridContext;

package/dist/utils/NodePositions.d.ts

@@ -0,0 +1,31 @@
+import { type Dimensions, type NodesDimensions, type Size } from '..';
+declare class NodePositions {
+    private frequency;
+    private subscriptions;
+    getFrequency: () => number;
+    setFrequency: (frequency: number) => number;
+    private nodes;
+    constructor(frequency?: number);
+    subscribe: (id: string, callback: (size?: Size, nodes?: NodesDimensions) => void) => void;
+    unsubscribe: (id: string) => void;
+    register: (node: Dimensions, { maxWait }?: {
+        maxWait?: number | undefined;
+    }) => void;
+    unregister: (id: number | string) => void;
+    private top;
+    private readonly getTop;
+    private right;
+    private readonly getRight;
+    private bottom;
+    private readonly getBottom;
+    private left;
+    private readonly getLeft;
+    private readonly getSize;
+    private readonly privateUpdate;
+    private readonly notify;
+    private debounceUpdates;
+    update: (node: Dimensions) => void;
+    match: (x: number, y: number) => Promise<number | string | undefined>;
+    size: () => Size;
+}
+export default NodePositions;

package/dist/utils/NodePositions.js

@@ -0,0 +1,226 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultSettings_1 = __importDefault(require("./defaultSettings"));
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const FREQUENCY = defaultSettings_1.default.nodeFrequency;
+const MAX_WAIT = defaultSettings_1.default.nodeFrequency;
+class NodePositions {
+    constructor(frequency = FREQUENCY) {
+        this.subscriptions = {};
+        this.getFrequency = () => {
+            return this.frequency;
+        };
+        this.setFrequency = (frequency) => {
+            this.frequency = frequency;
+            return this.frequency;
+        };
+        this.nodes = {};
+        this.subscribe = (id, callback) => {
+            this.subscriptions[id] = callback;
+            callback(this.size(), this.nodes);
+        };
+        this.unsubscribe = (id) => {
+            delete this.subscriptions[id];
+        };
+        this.register = (node, { maxWait = MAX_WAIT } = {}) => {
+            this.nodes[node.id] = node;
+            this.debounceUpdates[node.id] = (0, lodash_debounce_1.default)(this.privateUpdate, this.frequency, {
+                maxWait,
+                trailing: true
+            });
+        };
+        this.unregister = (id) => {
+            var _a, _b, _c, _d;
+            delete this.nodes[id];
+            delete this.debounceUpdates[id];
+            if (((_a = this.top) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                this.top = undefined;
+                for (const nodeId of Object.keys(this.nodes)) {
+                    if (!this.top ||
+                        this.nodes[nodeId].y < this.top.y) {
+                        this.top = this.nodes[nodeId];
+                    }
+                }
+            }
+            if (((_b = this.right) === null || _b === void 0 ? void 0 : _b.id) === id) {
+                this.right = undefined;
+                for (const nodeId of Object.keys(this.nodes)) {
+                    if (!this.right ||
+                        this.nodes[nodeId].x + this.nodes[nodeId].height > this.right.x + this.right.width) {
+                        this.right = this.nodes[nodeId];
+                    }
+                }
+            }
+            if (((_c = this.bottom) === null || _c === void 0 ? void 0 : _c.id) === id) {
+                this.bottom = undefined;
+                for (const nodeId of Object.keys(this.nodes)) {
+                    if (!this.bottom ||
+                        this.nodes[nodeId].y + this.nodes[nodeId].height > this.bottom.y + this.bottom.height) {
+                        this.bottom = this.nodes[nodeId];
+                    }
+                }
+            }
+            if (((_d = this.left) === null || _d === void 0 ? void 0 : _d.id) === id) {
+                this.left = undefined;
+                for (const nodeId of Object.keys(this.nodes)) {
+                    if (!this.left ||
+                        this.nodes[nodeId].x < this.left.x) {
+                        this.left = this.nodes[nodeId];
+                    }
+                }
+            }
+            this.notify();
+        };
+        this.getTop = (node) => {
+            if (this.top &&
+                this.top.id === node.id) {
+                if (node.y > this.top.y) {
+                    this.top = node;
+                    for (const id of Object.keys(this.nodes)) {
+                        if (this.top && this.nodes[id].y < this.top.y) {
+                            this.top = this.nodes[id];
+                        }
+                    }
+                }
+                else {
+                    this.top = node;
+                }
+            }
+            else if (!this.top ||
+                node.y < this.top.y) {
+                this.top = node;
+            }
+        };
+        this.getRight = (node) => {
+            const nodeX = node.x + node.width;
+            const rightNodeX = this.right ?
+                this.right.x + this.right.width :
+                undefined;
+            if (this.right &&
+                this.right.id === node.id) {
+                if (!rightNodeX ||
+                    nodeX < rightNodeX) {
+                    this.right = node;
+                    for (const id of Object.keys(this.nodes)) {
+                        if (this.nodes[id].x + this.nodes[id].width > this.right.x + this.right.width) {
+                            this.right = this.nodes[id];
+                        }
+                    }
+                }
+                else {
+                    this.right = node;
+                }
+            }
+            else if (!this.right ||
+                rightNodeX &&
+                    nodeX > rightNodeX) {
+                this.right = node;
+            }
+        };
+        this.getBottom = (node) => {
+            const nodeY = node.y + node.height;
+            const bottomNodeY = this.bottom ?
+                this.bottom.y + this.bottom.height :
+                undefined;
+            if (this.bottom &&
+                this.bottom.id === node.id) {
+                if (!bottomNodeY ||
+                    nodeY < bottomNodeY) {
+                    this.bottom = node;
+                    for (const id of Object.keys(this.nodes)) {
+                        if (this.nodes[id].y + this.nodes[id].height > this.bottom.y + this.bottom.height) {
+                            this.bottom = this.nodes[id];
+                        }
+                    }
+                }
+                else {
+                    this.bottom = node;
+                }
+            }
+            else if (!this.bottom ||
+                bottomNodeY &&
+                    nodeY > bottomNodeY) {
+                this.bottom = node;
+            }
+        };
+        this.getLeft = (node) => {
+            if (this.left &&
+                this.left.id === node.id) {
+                if (node.x > this.left.x) {
+                    this.left = node;
+                    for (const id of Object.keys(this.nodes)) {
+                        if (this.nodes[id].x < this.left.x) {
+                            this.left = this.nodes[id];
+                        }
+                    }
+                }
+                else {
+                    this.left = node;
+                }
+            }
+            else if (!this.left ||
+                node.x < this.left.x) {
+                this.left = node;
+            }
+        };
+        this.getSize = (node) => {
+            this.getTop(node);
+            this.getRight(node);
+            this.getBottom(node);
+            this.getLeft(node);
+        };
+        this.privateUpdate = (node) => {
+            this.register(node);
+            this.getSize(node);
+            this.notify();
+        };
+        this.notify = () => {
+            for (const [_id, update] of Object.entries(this.subscriptions)) {
+                update(this.size(), this.nodes);
+            }
+        };
+        this.debounceUpdates = {};
+        this.update = (node) => {
+            this.debounceUpdates[node.id](node);
+        };
+        this.match = (x, y) => __awaiter(this, void 0, void 0, function* () {
+            const ids = yield Promise.resolve(Object.keys(this.nodes).find((id) => {
+                const node = this.nodes[id];
+                return x > node.x &&
+                    x < node.x + node.width &&
+                    y > node.y &&
+                    y < node.y + node.height;
+            }));
+            return ids ?
+                ids :
+                undefined;
+        });
+        this.size = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+            return {
+                bottom: ((_b = (_a = this.bottom) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = this.bottom) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0),
+                height: (((_f = (_e = this.bottom) === null || _e === void 0 ? void 0 : _e.y) !== null && _f !== void 0 ? _f : 0) +
+                    ((_h = (_g = this.bottom) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : 0)) - ((_k = (_j = this.top) === null || _j === void 0 ? void 0 : _j.y) !== null && _k !== void 0 ? _k : 0),
+                left: (_m = (_l = this.left) === null || _l === void 0 ? void 0 : _l.x) !== null && _m !== void 0 ? _m : 0,
+                right: ((_p = (_o = this.right) === null || _o === void 0 ? void 0 : _o.x) !== null && _p !== void 0 ? _p : 0) + ((_r = (_q = this.right) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : 0),
+                top: (_t = (_s = this.top) === null || _s === void 0 ? void 0 : _s.y) !== null && _t !== void 0 ? _t : 0,
+                width: (((_v = (_u = this.right) === null || _u === void 0 ? void 0 : _u.x) !== null && _v !== void 0 ? _v : 0) +
+                    ((_x = (_w = this.right) === null || _w === void 0 ? void 0 : _w.width) !== null && _x !== void 0 ? _x : 0)) - ((_z = (_y = this.left) === null || _y === void 0 ? void 0 : _y.x) !== null && _z !== void 0 ? _z : 0)
+            };
+        };
+        this.frequency = frequency;
+    }
+}
+exports.default = NodePositions;

package/dist/utils/Path/generateOrigins.d.ts

@@ -0,0 +1,4 @@
+import { type EdgeNodeProps, type Line } from '../..';
+import { type Coordinates } from './lines';
+declare const generateOrigins: (target: EdgeNodeProps, source: EdgeNodeProps, line: Line, center?: boolean) => Coordinates;
+export default generateOrigins;

package/dist/utils/Path/generateOrigins.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lines_1 = require("./lines");
+const generateOrigins = (target, source, line, center) => {
+    switch (line) {
+        case 'curve': {
+            return (0, lines_1.generateCurve)(source, target, center);
+        }
+        case 'direct': {
+            return (0, lines_1.generateDirect)(source, target, center);
+        }
+        case 'step':
+        default: {
+            return (0, lines_1.generateStep)(source, target, center);
+        }
+    }
+};
+exports.default = generateOrigins;

package/dist/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/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/utils/Path/lines/types.js

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

package/dist/utils/defaultSettings.d.ts

@@ -0,0 +1,11 @@
+import { type Line, type Shape } from '..';
+declare const _default: {
+    edgeFrequency: number;
+    grid: [number, number];
+    height: number;
+    line: Line;
+    nodeFrequency: number;
+    shape: Shape;
+    width: number;
+};
+export default _default;

package/dist/utils/defaultSettings.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    edgeFrequency: 16,
+    grid: [
+        16,
+        16
+    ],
+    height: 50,
+    line: 'step',
+    nodeFrequency: 16,
+    shape: 'oval',
+    width: 50
+};

package/dist/utils/round.d.ts

@@ -0,0 +1,2 @@
+declare const round: (coordinate: number, grid: number) => number;
+export default round;

package/dist/utils/round.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const round = (coordinate, grid) => {
+    if (grid === 1) {
+        return Math.round(coordinate);
+    }
+    return Math.round(coordinate / grid) * grid;
+};
+exports.default = round;

package/package.json

@@ -2,7 +2,8 @@
 	"name": "@lincle/react-shared",
 	"title": "lincle react shared",
 	"license": "LGPL-3.0-or-later",
-	"version": "0.0.1",
+	"version": "0.4.0-next.2",
+	"private": false,
 	"description": "Shared library for @lincle",
 	"author": "wallzero @wallzeroblog (http://wallzero.com)",
 	"contributors": [
@@ -19,20 +20,19 @@
 		"COPYING.md",
 		"COPYING.LESSER.md"
 	],
-	"homepage": "https://gitlab.com/lincle/lincle/tree/master/packages/react-shared/",
+	"homepage": "https://gitlab.com/digested/lincle/tree/master/packages/react-shared/",
 	"repository": {
 		"type": "git",
-		"url": "https://gitlab.com/lincle/lincle.git"
+		"url": "https://gitlab.com/digested/lincle.git"
 	},
 	"bugs": {
-		"url": "https://gitlab.com/lincle/lincle/issues"
+		"url": "https://gitlab.com/digested/lincle/issues"
 	},
 	"scripts": {
-		"build": "run-s clean:dist build:prod build:styles",
+		"build": "run-s clean:dist build:prod",
 		"build:prod": "tsc -p ./tsconfig.json",
-		"build:watch": "run-s clean:dist build:prod build:styles build:watch:tsc",
+		"build:watch": "run-s clean:dist build:prod build:watch:tsc",
 		"build:watch:tsc": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
-		"build:styles": "ncp src/styles.g.css dist/styles.g.css",
 		"----------------------------------------------------------------": "",
 		"build:prod:config": "",
 		"---------------------------------------------------------------": "",
@@ -43,31 +43,32 @@
 		"clean:dist": "rimraf dist"
 	},
 	"devDependencies": {
-		"@digest/eslint-config-jest": "^4.2.5",
-		"@digest/eslint-config-react": "^4.2.5",
-		"@digest/eslint-config-typescript": "^4.2.5",
-		"@digest/jest-junit": "^4.2.5",
-		"@digest/jest-react": "^4.2.5",
-		"@digest/jest-typescript": "^4.2.5",
-		"@digest/typescript": "^4.2.5",
-		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.5.4",
-		"@types/lodash.throttle": "^4.1.6",
-		"@types/lodash.debounce": "^4.0.6",
-		"@types/node": "^20.5.9",
-		"@types/react": "^18.2.21",
-		"@types/react-dom": "^18.2.7",
-		"@types/react-test-renderer": "^18.0.1",
+		"@digest/eslint-config-jest": "^4.3.1",
+		"@digest/eslint-config-react": "^4.3.1",
+		"@digest/eslint-config-typescript": "^4.3.1",
+		"@digest/jest-junit": "^4.3.1",
+		"@digest/jest-react": "^4.3.1",
+		"@digest/jest-typescript": "^4.3.1",
+		"@digest/typescript": "^4.3.1",
+		"@types/bezier-js": "^4.1.3",
+		"@types/jest": "^29.5.12",
+		"@types/lodash.debounce": "^4.0.9",
+		"@types/lodash.throttle": "^4.1.9",
+		"@types/node": "^20.12.12",
+		"@types/react": "^18.3.2",
+		"@types/react-dom": "^18.3.0",
+		"@types/react-test-renderer": "^18.3.0",
 		"cross-env": "^7.0.3",
-		"jest-environment-jsdom": "^29.6.2",
+		"jest-environment-jsdom": "^29.7.0",
 		"jest-environment-jsdom-global": "^4.0.0",
 		"ncp": "^2.0.0",
 		"npm-run-all": "^4.1.5",
-		"react": "^18.2.0",
-		"react-test-renderer": "^18.2.0",
-		"rimraf": "^5.0.1"
+		"react": "^18.3.1",
+		"react-test-renderer": "^18.3.1",
+		"rimraf": "^5.0.7"
 	},
 	"dependencies": {
+		"bezier-js": "^6.1.4",
 		"lodash.debounce": "^4.0.8",
 		"lodash.throttle": "^4.1.1"
 	},
@@ -86,5 +87,6 @@
 		"dag",
 		"acyclical graph",
 		"cyclical graph"
-	]
+	],
+	"gitHead": "c00bcd56556ee5599505cbeeebfdab06e4a8c552"
 }