@lincle/react-web-base 0.0.1

package/README.md

@@ -0,0 +1,225 @@
+<div align="center">
+	<h1><code>lincle</code>: A <i>reactive</i> React node and edge generator</h1>
+</div>
+
+<div align="center">
+	<a href="https://www.npmjs.org/package/@lincle/react-web-base"><img alt="NPM Version" src="https://img.shields.io/npm/v/@lincle/react-web-base.svg" /></a>
+	<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="License" src="https://img.shields.io/npm/l/@lincle/react-web-base.svg" /></a>
+	<a href="https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle?ref=badge_shield"><img alt="FOSSA Status" src="https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle.svg?type=shield" /></a>
+</div>
+
+<div align="center">
+	<a href="https://github.com/gajus/canonical"><img alt="Canonical Code Style" src="https://img.shields.io/badge/code%20style-canonical-blue.svg" /></a>
+	<a href="https://commitizen.github.io/cz-cli/"><img alt="Commitizen Friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" /></a>
+	<a href="https://gitlab.com/hyper-expanse/semantic-release-gitlab#readme"><img alt="Semantic Release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" /></a>
+</div>
+
+<div align="center">
+	<a href="https://gitlab.com/lincle/lincle/commits/master"><img alt="Build Status" src="https://gitlab.com/lincle/lincle/badges/master/pipeline.svg" /></a>
+	<a href="https://lincle.gitlab.io/lincle/stats/react-web-base/coverage/lcov-report/"><img alt="Coverage Report" src="https://gitlab.com/lincle/lincle/badges/master/coverage.svg" /></a>
+	<a href="https://lincle.gitlab.io/lincle/stats/react-web-base/webpack/"><img alt="Build Analysis" src="https://img.shields.io/badge/webpack-stats-blue.svg" /></a>
+</div>
+
+**lincle** generates a reactive graph.
+
+Please see the various testing [demos](https://lincle.gitlab.io/lincle/) for examples.
+
+If you require an interactive diagram, checkout [`@lincle/interactive`](https://www.npmjs.com/package/react-yad).
+
+## Installation & Setup
+
+Install `@lincle/react-web-base` and the peer dependencies `react`, `react-dom`:
+
+```
+npm install react react-dom @lincle/react-web-base
+```
+
+Also include the provided styles file. For example:
+
+```
+import '@lincle/react-web-base/dist/main.min.css';
+```
+
+## Simple Example
+
+The following example will generate this diagram:
+
+<div align="center">
+	<a href="https://gitlab.com/lincle/lincle/-/raw/master/static/simple.png">
+		<img src="https://gitlab.com/lincle/lincle/-/raw/master/static/simple.png" alt="resulting screenshot of simple example" style="max-width:100%;">
+	</a>
+</div>
+
+> [<h3>CodeSandbox</h4>](https://codesandbox.io/s/react-ag-simple-example-8p38n)
+
+```css
+/* styles.css */
+
+.App {
+	position: absolute;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+}
+
+.node {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: calc(100% - 2px);
+	height: calc(100% - 2px);
+	border: 1px solid black;
+	background-color: white;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.node-oval {
+	border-radius: 50%;
+}
+```
+
+```ts
+import React, { FunctionComponent, ReactElement } from "react";
+import { Edge, Edges, Graph, Node, Nodes } from "@lincle/react-web-base";
+import "@lincle/react-web-base/dist/main.min.css";
+import "./styles.css";
+
+const App: FunctionComponent = (): ReactElement => {
+  return (
+    <div className="App">
+      <Graph id="SimpleDiagram" key="1" nodeHeight={50} nodeWidth={50}>
+        <Nodes>
+          <Node id={1} key={1} x={50} y={50}>
+            <div className="node">Node 1</div>
+          </Node>
+          <Node
+            height={100}
+            id={2}
+            key={2}
+            shape="oval"
+            width={200}
+            x={100}
+            y={150}
+          >
+            <div className="node node-oval">Node 2</div>
+          </Node>
+          <Node id={3} key={3} shape="oval" x={150} y={350}>
+            <div className="node node-oval">Node 3</div>
+          </Node>
+        </Nodes>
+        <Edges>
+          <Edge id={1} key={1} sourceId={1} targetId={2}>
+            <circle fill="white" r="3" stroke="black" strokeWidth={2}>
+              <title>Bridge</title>
+            </circle>
+          </Edge>
+          <Edge id={2} key={2} line="direct" sourceId={2} targetId={3} />
+        </Edges>
+      </Graph>
+    </div>
+  );
+};
+
+export default App;
+
+```
+
+## Component API's
+
+**\***  *bolded parameters are required*
+
+### `<Graph>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| **`id`** | `string \| number` | | The unique ID of the graph |
+| edgeFrequency | `number` | `16` | Frequency of edge updates during node movements (in ms) |
+| grid | `false \| [number, number] ` | `[16, 16]` | The background grid space; false to disable. |
+| line | `"curve" \| "direct" \| "step"` | `"step"` | The default curve for the edges |
+| nodeFrequency | `number` | `500` | Frequency of node movements reported (in ms, aside from edges) |
+| nodeHeight | `number` | `50` | The default height for nodes (in px) |
+| nodeWidth | `number` | `50` | The default width for nodes (in px) |
+| shape | `"oval" \| "rectangle"` | `"rectangle"` | The default shape for nodes |
+
+### `<Nodes>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| *none* |
+
+### `<Node>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| **`id`** | `string \| number` | | The unique ID of the node |
+| x | `number` | `0` | The initial `x` coordinate of the node |
+| y | `number` | `0` | The initial `y` coordinate of the node |
+| <td colspan="3">*The following override the defaults provided by `<Graph />`* |
+| height | `number` | `50` | The node height |
+| shape | `'oval' \| 'rectangle'` | `rectangle` | The shape of the node |
+| width | `number` | `50` | The node width |
+
+### `<Edges>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| dash | `boolean \| undefined` | `undefined` | Whether dash should be enabled. Defaults to hover only. |
+
+### `<Edge>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| **`id`** | `string \| number` | | The unique ID for the edge |
+| dash | `boolean \| undefined` | `undefined` | Whether dash should be enabled. Defaults to hover only. |
+| line | `'curve' \| 'direct' \| 'step'` | `direct` | The line shape (overrides default) and not applicable if custom path generator is used. |
+| markerEnd | `string` | | Passed to the default path generated `<path>` SVG |
+| markerStart | `string` | | Passed to the default path generated `<path>` SVG |
+| path | *path `function` - see below* | | Use to generate a custom path component. |
+| **`sourceId`** | `string \| number` | | ID for the source node |
+| **`targetId`** | `string \| number` | | ID for the target node |
+
+> ***Note**: The child of `<Edge />` is intended to be an element at the center of the path. The child will be inside an `<SVG />` element and should be an SVG type or wrapped in a `<foreignObject />` element. See examples for details.*
+
+### Path `function`
+
+Instead of using the `@lincle/react-web-base` provided edges (`curve`, `line`, & `step`), you may opt to generate your own path component:
+
+```ts
+(
+	source: {
+		height: number,
+		id: string | number,
+		shape: 'oval' | 'rectangle',
+		width: number,
+		x: number,
+		y: number
+	},
+	target: {
+		height: number,
+		id: string | number,
+		shape: 'oval' | 'rectangle',
+		width: number,
+		x: number,
+		y: number
+	},
+	children?: ReactNode
+) => Component<SVG type>
+```
+
+### `<Grid>`
+
+| Parameters | Type | Default | Description |
+|---|---|---|---|
+| children | `SVG` | `<circle>` | The repeated SVG |
+| scale | `number` | `1` | Scales the grid |
+| xOffset | `number` | `0` | Translates the grid left/right |
+| yOffset | `number` | `0` | Translates the grid up/down |
+
+### Contexts
+
+`<Context>`'s can be taken advantage of to extend the functionality of `@lincle/react-web-base`:
+
+| Context | Provides | Description |
+|---|---|---|
+| `<GraphContext>` | `{diagramId: ReactText, nodePosition: NodePositions, edgeSubscriber: EdgeSubscriber, defaultSettings: DefaultSettings}` | Provides the current diagramId and default settings along with classes to subscribe to `<Node>` and `<Edge>` events. |
+| `<GridContext>` | `[number, number]` | Provides the current grid dimensions. |

package/dist/Edge/index.d.ts

@@ -0,0 +1,4 @@
+import { type EdgeProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const Edge: FunctionComponent<EdgeProps>;
+export default Edge;

package/dist/Edge/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Path_1 = __importDefault(require("../Path"));
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const Edge = ({ children, className = '', dash, id: edgeId, line: givenLine, markerEnd, markerStart, path, sourceId, targetId }) => {
+    var _a, _b, _c, _d;
+    const diagramId = (_a = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
+    const edgeSubscriber = (_b = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _b === void 0 ? void 0 : _b.edgeSubscriber;
+    const defaultLine = (_d = (_c = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _c === void 0 ? void 0 : _c.defaultSettings) === null || _d === void 0 ? void 0 : _d.line;
+    const line = givenLine !== null && givenLine !== void 0 ? givenLine : defaultLine;
+    const [source, setSource] = (0, react_1.useState)();
+    const [target, setTarget] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        setSource(edgeSubscriber === null || edgeSubscriber === void 0 ? void 0 : edgeSubscriber.register(edgeId, sourceId, setSource));
+        setTarget(edgeSubscriber === null || edgeSubscriber === void 0 ? void 0 : edgeSubscriber.register(edgeId, targetId, setTarget));
+        return () => {
+            edgeSubscriber === null || edgeSubscriber === void 0 ? void 0 : edgeSubscriber.unregister(edgeId, sourceId);
+            edgeSubscriber === null || edgeSubscriber === void 0 ? void 0 : edgeSubscriber.unregister(edgeId, targetId);
+        };
+    }, []);
+    const pathSource = source ? Object.assign(Object.assign({}, source), { x: source.x, y: source.y }) :
+        undefined;
+    const pathTarget = target ? Object.assign(Object.assign({}, target), { x: target.x, y: target.y }) :
+        undefined;
+    if (source &&
+        target) {
+        if (path) {
+            return path(pathSource, pathTarget, children);
+        }
+        return ((0, jsx_runtime_1.jsx)(Path_1.default, { className: `${className} ${dash === true ? 'lincle-base-edge-dash-on' : dash === false ? 'lincle-base-edge-dash-off' : ''}`, diagramId: diagramId, id: edgeId, line: line, markerEnd: markerEnd, markerStart: markerStart, source: pathSource, target: pathTarget, children: children }));
+    }
+    return null;
+};
+Edge.displayName = 'LincleEdge';
+exports.default = Edge;

package/dist/Edges/index.d.ts

@@ -0,0 +1,8 @@
+import { type EdgesProps as EdgesPartialProps } from '..';
+import { type CSSProperties, type FunctionComponent } from 'react';
+declare const Edges: FunctionComponent<EdgesProps>;
+export default Edges;
+export type EdgesProps = EdgesPartialProps & {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+};

package/dist/Edges/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const Edges = ({ className = '', children, dash, style }) => {
+    var _a;
+    const id = (_a = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
+    const markerId = (0, react_1.useMemo)(() => {
+        return id ?
+            `${id}-` :
+            '';
+    }, [
+        id
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: `lincle-base-edges ${className} ${dash === true ? 'lincle-base-edge-dash-all' : dash === false ? 'lincle-base-edge-dash-none' : ''}`, style: style, children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: `diagram-${markerId}marker-arrow`, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '9', refY: '5', children: (0, jsx_runtime_1.jsx)("path", { className: 'lincle-base-edge-marker-arrow', d: 'M 0 0 L 10 5 L 0 10 z' }) }), (0, jsx_runtime_1.jsx)("marker", { id: `diagram-${markerId}marker-circle`, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '5', refY: '5', children: (0, jsx_runtime_1.jsx)("circle", { className: 'lincle-base-edge-marker-circle', cx: '5', cy: '5', r: '3' }) })] }), children] }));
+};
+Edges.displayName = 'LincleEdges';
+exports.default = Edges;

package/dist/Graph/index.d.ts

@@ -0,0 +1,4 @@
+import { type GraphProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const Graph: FunctionComponent<GraphProps>;
+export default Graph;

package/dist/Graph/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GraphContexts_1 = __importDefault(require("../GraphContexts"));
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const Graph = ({ children, edgeFrequency, grid, id, line, nodeFrequency, nodeHeight, nodeWidth, shape }) => {
+    var _a;
+    const diagramId = (_a = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
+    if (!diagramId && !id) {
+        console.error('No ID provided to @lincle/base Graph!');
+        return null;
+    }
+    return diagramId ?
+        ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })) :
+        ((0, jsx_runtime_1.jsx)(GraphContexts_1.default, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, children: children }));
+};
+Graph.displayName = 'LincleGraph';
+exports.default = Graph;

package/dist/GraphContexts/index.d.ts

@@ -0,0 +1,4 @@
+import { type GraphContextsProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const GraphContexts: FunctionComponent<GraphContextsProps>;
+export default GraphContexts;

package/dist/GraphContexts/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Grid_1 = __importDefault(require("../Grid"));
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const GraphContexts = ({ children, edgeFrequency = react_shared_1.defaultSettings.edgeFrequency, grid = react_shared_1.defaultSettings.grid, id, line = react_shared_1.defaultSettings.line, nodeFrequency = react_shared_1.defaultSettings.nodeFrequency, nodeHeight = react_shared_1.defaultSettings.height, nodeWidth = react_shared_1.defaultSettings.width, shape = react_shared_1.defaultSettings.shape }) => {
+    const diagramId = (0, react_1.useMemo)(() => {
+        return id;
+    }, []);
+    const permanent = (0, react_1.useMemo)(() => {
+        console.log(react_shared_1.EdgeSubscriber);
+        return {
+            diagramId,
+            edgeSubscriber: new react_shared_1.EdgeSubscriber(edgeFrequency),
+            nodePositions: new react_shared_1.NodePositions()
+        };
+    }, []);
+    const provides = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, permanent), { defaultSettings: {
+                edgeFrequency,
+                height: nodeHeight,
+                line,
+                nodeFrequency,
+                shape,
+                width: nodeWidth
+            } });
+    }, [
+        permanent,
+        edgeFrequency,
+        nodeHeight,
+        line,
+        nodeFrequency,
+        shape,
+        nodeWidth
+    ]);
+    const hiddenGrid = grid === false ?
+        children :
+        ((0, jsx_runtime_1.jsxs)(react_shared_1.GridContext.Provider, { value: grid, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, {}), children] }));
+    return ((0, jsx_runtime_1.jsx)(react_shared_1.GraphContext.Provider, { value: provides, children: hiddenGrid }));
+};
+GraphContexts.displayName = 'LincleGraphContexts';
+exports.default = GraphContexts;

package/dist/Grid/index.d.ts

@@ -0,0 +1,4 @@
+import { type GridProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const Grid: FunctionComponent<GridProps>;
+export default Grid;

package/dist/Grid/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const SIZE = 0.4;
+const Circle = ((0, jsx_runtime_1.jsx)("circle", { cx: SIZE, cy: SIZE, fill: 'black', r: SIZE }));
+const Grid = ({ children, scale = 1, xOffset: givenXOffset = 0, yOffset: givenYOffset = 0 }) => {
+    var _a;
+    const diagramId = (_a = (0, react_1.useContext)(react_shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
+    const [givenGridX, givenGridY] = (0, react_1.useContext)(react_shared_1.GridContext) || react_shared_1.defaultSettings.grid;
+    const id = `lincle-grid-${diagramId}`;
+    const gridX = (0, react_1.useMemo)(() => {
+        return givenGridX * scale;
+    }, [
+        givenGridX,
+        scale
+    ]);
+    const gridY = (0, react_1.useMemo)(() => {
+        return givenGridY * scale;
+    }, [
+        givenGridY,
+        scale
+    ]);
+    const xOffset = (0, react_1.useMemo)(() => {
+        return givenXOffset % gridX;
+    }, [
+        gridX,
+        givenXOffset
+    ]);
+    const yOffset = (0, react_1.useMemo)(() => {
+        return givenYOffset % gridY;
+    }, [
+        gridY,
+        givenYOffset
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: 'lincle-base-grid', children: [(0, jsx_runtime_1.jsx)("pattern", { height: gridY, id: id, patternUnits: 'userSpaceOnUse', width: gridX, x: xOffset, y: yOffset, children: children !== null && children !== void 0 ? children : Circle }), (0, jsx_runtime_1.jsx)("rect", { fill: `url(#${id})`, height: '100%', width: '100%', x: '0', y: '0' })] }));
+};
+Grid.displayName = 'LincleGrid';
+exports.default = Grid;

package/dist/Node/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type NodeProps } from '..';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<NodeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Node/index.js

@@ -0,0 +1,125 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_shared_1 = require("@lincle/react-shared");
+const react_1 = require("react");
+const Node = (_a, ref) => {
+    var _b, _c, _d, _e, _f, _g;
+    var { className = '', children, height: givenHeight, id: nodeId, shape: givenShape, style, width: givenWidth, x: givenX = 0, y: givenY = 0 } = _a, additionalProperties = __rest(_a, ["className", "children", "height", "id", "shape", "style", "width", "x", "y"]);
+    const graphContext = (0, react_1.useContext)(react_shared_1.GraphContext);
+    const defaultHeight = (_b = graphContext === null || graphContext === void 0 ? void 0 : graphContext.defaultSettings) === null || _b === void 0 ? void 0 : _b.width;
+    const defaultShape = (_c = graphContext === null || graphContext === void 0 ? void 0 : graphContext.defaultSettings) === null || _c === void 0 ? void 0 : _c.shape;
+    const defaultWidth = (_d = graphContext === null || graphContext === void 0 ? void 0 : graphContext.defaultSettings) === null || _d === void 0 ? void 0 : _d.width;
+    const edgeSubscriber = graphContext === null || graphContext === void 0 ? void 0 : graphContext.edgeSubscriber;
+    const nodePositions = graphContext === null || graphContext === void 0 ? void 0 : graphContext.nodePositions;
+    const height = (_e = givenHeight !== null && givenHeight !== void 0 ? givenHeight : defaultHeight) !== null && _e !== void 0 ? _e : 0;
+    const shape = (_f = givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape) !== null && _f !== void 0 ? _f : 'oval';
+    const width = (_g = givenWidth !== null && givenWidth !== void 0 ? givenWidth : defaultWidth) !== null && _g !== void 0 ? _g : 0;
+    const { x, y } = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!(givenX || givenY)) {
+            const getNumber = /(-?\d+(\.\d+)?)/ug;
+            const [translateX, translateY] = (style === null || style === void 0 ? void 0 : style.transform) ?
+                (_a = style.transform.match(getNumber)) !== null && _a !== void 0 ? _a : [
+                    undefined,
+                    undefined
+                ] :
+                [
+                    undefined,
+                    undefined
+                ];
+            const left = (style === null || style === void 0 ? void 0 : style.left) ?
+                style.left :
+                undefined;
+            const top = (style === null || style === void 0 ? void 0 : style.top) ?
+                style.top :
+                undefined;
+            return {
+                x: Number(translateX) || Number(left) || 0,
+                y: Number(translateY) || Number(top) || 0
+            };
+        }
+        return {
+            x: givenX,
+            y: givenY
+        };
+    }, [
+        givenX,
+        givenY,
+        style
+    ]);
+    (0, react_1.useEffect)(() => {
+        nodePositions === null || nodePositions === void 0 ? void 0 : nodePositions.register({
+            height,
+            id: nodeId,
+            shape,
+            width,
+            x,
+            y
+        });
+        return () => {
+            nodePositions === null || nodePositions === void 0 ? void 0 : nodePositions.unregister(nodeId);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        nodePositions === null || nodePositions === void 0 ? void 0 : nodePositions.update({
+            height,
+            id: nodeId,
+            shape,
+            width,
+            x,
+            y
+        });
+    }, [
+        height,
+        nodeId,
+        nodePositions,
+        shape,
+        width,
+        x,
+        y
+    ]);
+    (0, react_1.useEffect)(() => {
+        edgeSubscriber === null || edgeSubscriber === void 0 ? void 0 : edgeSubscriber.update({
+            height,
+            id: nodeId,
+            shape,
+            width,
+            x,
+            y
+        });
+    }, [
+        edgeSubscriber,
+        nodeId,
+        height,
+        width,
+        x,
+        y,
+        shape
+    ]);
+    const adjustedStyle = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, style), { height, transform: (style === null || style === void 0 ? void 0 : style.transform) ?
+                style.transform :
+                `translate(${x}px, ${y}px) translateZ(0)`, width });
+    }, [
+        style,
+        height,
+        width,
+        x,
+        y
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className} lincle-base-node`, "data-testid": `node-${nodeId}`, ref: ref, role: 'none', style: adjustedStyle }, additionalProperties, { children: children })));
+};
+Node.displayName = 'LincleNode';
+exports.default = (0, react_1.forwardRef)(Node);

package/dist/Nodes/index.d.ts

@@ -0,0 +1,4 @@
+import { type NodesProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const Nodes: FunctionComponent<NodesProps>;
+export default Nodes;

package/dist/Nodes/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Nodes = ({ children }) => {
+    return children;
+};
+Nodes.displayName = 'LincleNodes';
+exports.default = Nodes;

package/dist/Path/generateOrigins.d.ts

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

package/dist/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/Path/index.d.ts

@@ -0,0 +1,4 @@
+import { type PathProps } from '..';
+import { type FunctionComponent } from 'react';
+declare const Path: FunctionComponent<PathProps>;
+export default Path;

package/dist/Path/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const generateOrigins_1 = __importDefault(require("./generateOrigins"));
+const react_1 = require("react");
+const Path = ({ children, diagramId, className = '', line, markerEnd, markerStart, source, target }) => {
+    const hasChildren = Boolean(children);
+    const origins = (0, react_1.useMemo)(() => {
+        if (source &&
+            target &&
+            line) {
+            return (0, generateOrigins_1.default)(source, target, line, hasChildren);
+        }
+        return undefined;
+    }, [
+        hasChildren,
+        line,
+        source,
+        target
+    ]);
+    const center = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (origins === null || origins === void 0 ? void 0 : origins.center) ?
+            ((0, jsx_runtime_1.jsx)("g", { height: '1px', transform: `translate(${(_a = origins === null || origins === void 0 ? void 0 : origins.center) === null || _a === void 0 ? void 0 : _a.x},${(_b = origins === null || origins === void 0 ? void 0 : origins.center) === null || _b === void 0 ? void 0 : _b.y})`, width: '1px', children: children })) :
+            undefined;
+    }, [
+        children,
+        origins === null || origins === void 0 ? void 0 : origins.center
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { className: 'lincle-base-edge-path-border', d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent' }), (0, jsx_runtime_1.jsx)("path", { className: `${className} lincle-base-edge-path`, d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent', markerEnd: markerEnd ?
+                            markerEnd :
+                            `url(#diagram-${diagramId ?
+                                `${diagramId}-` :
+                                ''}marker-arrow)`, markerStart: markerStart ?
+                            markerStart :
+                            `url(#diagram-${diagramId ?
+                                `${diagramId}-` :
+                                ''}marker-circle)` })] }), center] }));
+};
+Path.displayName = 'LinclePath';
+exports.default = Path;