@lincle/react-web-base 0.4.0-next.2 → 0.4.0-next.3

package/README.md

@@ -84,7 +84,7 @@ 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 => {
+const App: FunctionComponent = () => {
   return (
     <div className="App">
       <Graph id="SimpleDiagram" key="1" nodeHeight={50} nodeWidth={50}>

package/dist/components/Edge/index.d.ts

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

package/dist/components/Edge/index.js

@@ -1,40 +1,62 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Edge = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../shared");
-const Path_1 = __importDefault(require("../Path"));
 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)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
-    const edgeSubscriber = (_b = (0, react_1.useContext)(shared_1.GraphContext)) === null || _b === void 0 ? void 0 : _b.edgeSubscriber;
-    const defaultLine = (_d = (_c = (0, react_1.useContext)(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)();
+const Edge = ({ children, className, dash, id: edgeId, line, markerEnd, markerStart, sourceId, targetId }) => {
+    var _a, _b;
+    const updateEdge = (0, shared_1.useUpdateEdge)();
+    const removeEdge = (0, shared_1.useRemoveEdge)();
+    const edge = (0, shared_1.useEdge)(edgeId);
     (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);
+            if (removeEdge) {
+                removeEdge(edgeId);
+            }
         };
     }, []);
-    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);
+    (0, react_1.useEffect)(() => {
+        if (updateEdge) {
+            updateEdge(edgeId, {
+                className,
+                dash,
+                line,
+                markerEnd,
+                markerStart,
+                sourceId,
+                targetId
+            });
         }
-        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;
+        return () => {
+            if (removeEdge) {
+                removeEdge(edgeId);
+            }
+        };
+    }, [
+        className,
+        dash,
+        edgeId,
+        line,
+        markerEnd,
+        markerStart,
+        removeEdge,
+        sourceId,
+        targetId,
+        updateEdge
+    ]);
+    const style = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return {
+            left: (_a = edge === null || edge === void 0 ? void 0 : edge.center) === null || _a === void 0 ? void 0 : _a.x,
+            position: 'absolute',
+            top: (_b = edge === null || edge === void 0 ? void 0 : edge.center) === null || _b === void 0 ? void 0 : _b.y
+        };
+    }, [
+        (_a = edge === null || edge === void 0 ? void 0 : edge.center) === null || _a === void 0 ? void 0 : _a.x,
+        (_b = edge === null || edge === void 0 ? void 0 : edge.center) === null || _b === void 0 ? void 0 : _b.y
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: children }));
 };
+exports.Edge = Edge;
 Edge.displayName = 'LincleEdge';
-exports.default = Edge;

package/dist/components/Edges/Marker.d.ts

@@ -0,0 +1,3 @@
+import { type FunctionComponent } from 'react';
+declare const Marker: FunctionComponent<{}>;
+export default Marker;

package/dist/components/Edges/Marker.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../shared");
+const react_1 = require("react");
+const Marker = () => {
+    const id = (0, shared_1.useDiagramId)();
+    const markerId = (0, react_1.useMemo)(() => {
+        return id ?
+            `${id}-` :
+            '';
+    }, []);
+    const arrowId = (0, react_1.useMemo)(() => {
+        return `diagram-${markerId}marker-arrow`;
+    }, [
+        markerId
+    ]);
+    const circleId = (0, react_1.useMemo)(() => {
+        return `diagram-${markerId}marker-circle`;
+    }, [
+        markerId
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("marker", { id: arrowId, 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: circleId, 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' }) })] }));
+};
+Marker.displayName = 'LincleMarker';
+exports.default = Marker;

package/dist/components/{Path/index.d.ts → Edges/Paths/Path/Path.d.ts}

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

package/dist/components/Edges/Paths/Path/Path.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../../shared");
+const react_1 = require("react");
+const Path = ({ center = true, className = '', edgeId, line, markerEnd: givenMarkerEnd, markerStart: givenMarkerStart, source, style: pathStyle = {}, target }) => {
+    const diagramId = (0, shared_1.useDiagramId)();
+    const updateEdge = (0, shared_1.useUpdateEdge)();
+    const origins = (0, react_1.useMemo)(() => {
+        if (source &&
+            target &&
+            line) {
+            const generatedOrigins = (0, shared_1.generateOrigins)(source, target, line, center);
+            return generatedOrigins;
+        }
+        return undefined;
+    }, [
+        center,
+        line,
+        source,
+        target
+    ]);
+    (0, react_1.useEffect)(() => {
+        if ((origins === null || origins === void 0 ? void 0 : origins.center) &&
+            updateEdge) {
+            updateEdge(edgeId, {
+                center: origins.center
+            });
+        }
+    }, [
+        edgeId,
+        origins === null || origins === void 0 ? void 0 : origins.center,
+        updateEdge
+    ]);
+    const markerEnd = (0, react_1.useMemo)(() => {
+        const id = diagramId ?
+            `${diagramId}-` :
+            '';
+        return givenMarkerEnd !== null && givenMarkerEnd !== void 0 ? givenMarkerEnd : `url(#diagram-${id}marker-arrow)`;
+    }, [
+        diagramId,
+        givenMarkerEnd
+    ]);
+    const markerStart = (0, react_1.useMemo)(() => {
+        const id = diagramId ?
+            `${diagramId}-` :
+            '';
+        return givenMarkerStart !== null && givenMarkerStart !== void 0 ? givenMarkerStart : `url(#diagram-${id}marker-circle)`;
+    }, [
+        diagramId,
+        givenMarkerStart
+    ]);
+    return ((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, markerStart: markerStart, style: pathStyle })] }));
+};
+Path.displayName = 'LinclePath';
+exports.default = Path;

package/dist/components/Edges/Paths/Path/index.d.ts

@@ -0,0 +1,5 @@
+import { type EdgeProps } from '../../../../shared';
+import { type FunctionComponent } from 'react';
+declare const RegisterEdge: FunctionComponent<EdgeProps>;
+export default RegisterEdge;
+export { default as Path } from './Path';

package/dist/components/Edges/Paths/Path/index.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../../shared");
+const Path_1 = __importDefault(require("./Path"));
+const react_1 = require("react");
+const RegisterEdge = ({ className = '', dash, id: edgeId, line: givenLine, markerEnd, markerStart, path, sourceId, targetId }) => {
+    const defaultLine = (0, shared_1.useDefaultLine)();
+    const edgeSubscriber = (0, shared_1.useEdgeSubscriber)();
+    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 = (0, react_1.useMemo)(() => {
+        return source ? Object.assign(Object.assign({}, source), { x: source.x, y: source.y }) :
+            undefined;
+    }, [
+        source === null || source === void 0 ? void 0 : source.x,
+        source === null || source === void 0 ? void 0 : source.y
+    ]);
+    const pathTarget = (0, react_1.useMemo)(() => {
+        return target ? Object.assign(Object.assign({}, target), { x: target.x, y: target.y }) :
+            undefined;
+    }, [
+        target === null || target === void 0 ? void 0 : target.x,
+        target === null || target === void 0 ? void 0 : target.y
+    ]);
+    const customPath = (0, react_1.useMemo)(() => {
+        return path ?
+            path(pathSource, pathTarget) :
+            undefined;
+    }, [
+        path,
+        pathSource,
+        pathTarget
+    ]);
+    const generatedClassName = (0, react_1.useMemo)(() => {
+        if (dash === true) {
+            return `${className} lincle-base-edge-dash-on'`;
+        }
+        else if (dash === false) {
+            return `${className} lincle-base-edge-dash-off'`;
+        }
+        else {
+            return '';
+        }
+    }, [
+        className,
+        dash
+    ]);
+    if (source &&
+        target) {
+        return customPath !== null && customPath !== void 0 ? customPath : ((0, jsx_runtime_1.jsx)(Path_1.default, { center: true, className: generatedClassName, edgeId: edgeId, line: line, markerEnd: markerEnd, markerStart: markerStart, source: pathSource, target: pathTarget }));
+    }
+    else {
+        return null;
+    }
+};
+RegisterEdge.displayName = 'LincleRegisterEdge';
+exports.default = RegisterEdge;
+var Path_2 = require("./Path");
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return __importDefault(Path_2).default; } });

package/dist/components/Edges/Paths/index.d.ts

@@ -0,0 +1,5 @@
+import { type FunctionComponent } from 'react';
+declare const Paths: FunctionComponent<PathsProps>;
+export type PathsProps = {};
+export default Paths;
+export { Path } from './Path';

package/dist/components/Edges/Paths/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../shared");
+const Path_1 = __importDefault(require("./Path"));
+const react_1 = require("react");
+const Paths = () => {
+    const edges = (0, shared_1.useEdges)();
+    const paths = (0, react_1.useMemo)(() => {
+        const edgesMap = Object.keys(edges).map((edgeId) => {
+            const { sourceId, targetId } = edges[edgeId];
+            if (sourceId &&
+                targetId) {
+                return ((0, jsx_runtime_1.jsx)(Path_1.default, { id: edgeId, sourceId: sourceId, targetId: targetId }, edgeId));
+            }
+            else {
+                return null;
+            }
+        });
+        return edgesMap;
+    }, [
+        edges
+    ]);
+    return paths;
+};
+Paths.displayName = 'LincleGraph';
+exports.default = Paths;
+var Path_2 = require("./Path");
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return Path_2.Path; } });

package/dist/components/Edges/index.d.ts

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

package/dist/components/Edges/index.js

@@ -1,19 +1,34 @@
 "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.Edges = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const shared_1 = require("../../shared");
+const Marker_1 = __importDefault(require("./Marker"));
+const Paths_1 = __importDefault(require("./Paths"));
 const react_1 = require("react");
-const Edges = ({ children, className = '', dash, style }) => {
-    var _a;
-    const id = (_a = (0, react_1.useContext)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
-    const markerId = (0, react_1.useMemo)(() => {
-        return id ?
-            `${id}-` :
-            '';
+const dashClass = (dash) => {
+    if (dash === true) {
+        return 'lincle-base-edge-dash-all';
+    }
+    else if (dash === false) {
+        return 'lincle-base-edge-dash-none';
+    }
+    else {
+        return '';
+    }
+};
+const Edges = ({ children, className: givenClassName = '', dash, style }) => {
+    const className = (0, react_1.useMemo)(() => {
+        return `lincle-base-edges ${givenClassName} ${dashClass(dash)}`;
     }, [
-        id
+        dash,
+        givenClassName
     ]);
-    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] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: className, style: style, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)(Marker_1.default, {}) }), (0, jsx_runtime_1.jsx)(Paths_1.default, {})] }), children] }));
 };
+exports.Edges = Edges;
 Edges.displayName = 'LincleEdges';
-exports.default = Edges;
+var Paths_2 = require("./Paths");
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return Paths_2.Path; } });

package/dist/components/{Grid → Graph/Grid}/index.d.ts

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

package/dist/components/{Grid → Graph/Grid}/index.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const shared_1 = require("../../shared");
+const shared_1 = require("../../../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)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
-    const [givenGridX, givenGridY] = (0, react_1.useContext)(shared_1.GridContext) || shared_1.defaultSettings.grid;
+    const diagramId = (0, shared_1.useDiagramId)();
+    const [givenGridX, givenGridY] = (0, shared_1.useGrid)() || [
+        1,
+        1
+    ];
     const id = `lincle-grid-${diagramId}`;
     const gridX = (0, react_1.useMemo)(() => {
         return givenGridX * scale;

package/dist/components/Graph/index.d.ts

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

package/dist/components/Graph/index.js

@@ -3,14 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = exports.Graph = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const GraphContexts_1 = __importDefault(require("../GraphContexts"));
-const Graph = ({ children, edgeFrequency, grid, id, line, nodeFrequency, nodeHeight, nodeWidth, shape }) => {
+const shared_1 = require("../../shared");
+const Grid_1 = __importDefault(require("./Grid"));
+const Graph = ({ children, edgeFrequency, grid, id, line, nodeFrequency, nodeHeight, nodeWidth, shape, showGrid }) => {
     if (!id) {
         console.error('No ID provided to @lincle/base Graph!');
         return null;
     }
-    return ((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 }));
+    const gird = showGrid === false ?
+        null :
+        (0, jsx_runtime_1.jsx)(Grid_1.default, {});
+    return ((0, jsx_runtime_1.jsxs)(shared_1.Providers, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, children: [gird, children] }));
 };
+exports.Graph = Graph;
 Graph.displayName = 'LincleGraph';
-exports.default = Graph;
+var Grid_2 = require("./Grid");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_2).default; } });

package/dist/components/Node/index.d.ts

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

package/dist/components/Node/index.js

@@ -11,21 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Node = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../shared");
 const react_1 = require("react");
 const Node = (_a, ref) => {
-    var _b, _c, _d, _e, _f, _g;
-    var { children, className = '', height: givenHeight, id: nodeId, shape: givenShape, style: { node: nodeStyle } = {}, width: givenWidth, x: givenX = 0, y: givenY = 0 } = _a, additionalProperties = __rest(_a, ["children", "className", "height", "id", "shape", "style", "width", "x", "y"]);
-    const graphContext = (0, react_1.useContext)(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;
+    var _b, _c, _d;
+    var { children, className: givenClassName = '', height: givenHeight, id: nodeId, shape: givenShape, style: { node: nodeStyle } = {}, width: givenWidth, x: givenX = 0, y: givenY = 0 } = _a, additionalProperties = __rest(_a, ["children", "className", "height", "id", "shape", "style", "width", "x", "y"]);
+    const defaultHeight = (0, shared_1.useDefaultNodeHeight)();
+    const defaultShape = (0, shared_1.useDefaultShape)();
+    const defaultWidth = (0, shared_1.useDefaultNodeWidth)();
+    const edgeSubscriber = (0, shared_1.useEdgeSubscriber)();
+    const nodePositions = (0, shared_1.useNodePositions)();
+    const height = (_b = givenHeight !== null && givenHeight !== void 0 ? givenHeight : defaultHeight) !== null && _b !== void 0 ? _b : 0;
+    const shape = (_c = givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape) !== null && _c !== void 0 ? _c : 'oval';
+    const width = (_d = givenWidth !== null && givenWidth !== void 0 ? givenWidth : defaultWidth) !== null && _d !== void 0 ? _d : 0;
     const { x, y } = (0, react_1.useMemo)(() => {
         var _a;
         if (!(givenX || givenY)) {
@@ -119,7 +119,21 @@ const Node = (_a, ref) => {
         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 })));
+    const className = (0, react_1.useMemo)(() => {
+        return `${givenClassName} lincle-base-node ${shape === 'oval' ?
+            'lincle-base-node-round' :
+            ''}`;
+    }, [
+        givenClassName,
+        shape
+    ]);
+    const dataTestId = (0, react_1.useMemo)(() => {
+        return `node-${nodeId}`;
+    }, [
+        nodeId
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className, "data-testid": dataTestId, ref: ref, role: 'none', style: adjustedStyle }, additionalProperties, { children: children })));
 };
 Node.displayName = 'LincleNode';
-exports.default = (0, react_1.forwardRef)(Node);
+const refNode = (0, react_1.forwardRef)(Node);
+exports.Node = refNode;

package/dist/components/Nodes/index.d.ts

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

package/dist/components/Nodes/index.js

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

package/dist/components/index.d.ts

@@ -1,8 +1,5 @@
-export { default as Edge } from './Edge';
-export { default as Edges } from './Edges';
-export { default as Graph } from './Graph';
-export { default as GraphContexts } from './GraphContexts';
-export { default as Grid } from './Grid';
-export { default as Node } from './Node';
-export { default as Nodes } from './Nodes';
-export { default as Path } from './Path';
+export * from './Edge';
+export * from './Edges';
+export * from './Graph';
+export * from './Node';
+export * from './Nodes';

package/dist/components/index.js

@@ -1,22 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Path = exports.Nodes = exports.Node = exports.Grid = exports.GraphContexts = exports.Graph = exports.Edges = exports.Edge = void 0;
-var Edge_1 = require("./Edge");
-Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return __importDefault(Edge_1).default; } });
-var Edges_1 = require("./Edges");
-Object.defineProperty(exports, "Edges", { enumerable: true, get: function () { return __importDefault(Edges_1).default; } });
-var Graph_1 = require("./Graph");
-Object.defineProperty(exports, "Graph", { enumerable: true, get: function () { return __importDefault(Graph_1).default; } });
-var GraphContexts_1 = require("./GraphContexts");
-Object.defineProperty(exports, "GraphContexts", { enumerable: true, get: function () { return __importDefault(GraphContexts_1).default; } });
-var Grid_1 = require("./Grid");
-Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_1).default; } });
-var Node_1 = require("./Node");
-Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return __importDefault(Node_1).default; } });
-var Nodes_1 = require("./Nodes");
-Object.defineProperty(exports, "Nodes", { enumerable: true, get: function () { return __importDefault(Nodes_1).default; } });
-var Path_1 = require("./Path");
-Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return __importDefault(Path_1).default; } });
+__exportStar(require("./Edge"), exports);
+__exportStar(require("./Edges"), exports);
+__exportStar(require("./Graph"), exports);
+__exportStar(require("./Node"), exports);
+__exportStar(require("./Nodes"), exports);

package/dist/shared.d.ts

@@ -1,4 +1,4 @@
-import { type EdgeProps as SharedEdgeProps, type NodeProps as SharedNodeProps, type PathProps as SharedPathProps } from '@lincle/react-shared';
+import { type EdgeProps as SharedEdgeProps, type EdgesProps as EdgesPartialProps, type NodeProps as SharedNodeProps, type PathProps as SharedPathProps } from '@lincle/react-shared';
 import { type CSSProperties } from 'react';
 export type EdgeProps = SharedEdgeProps & {
     className?: string;
@@ -14,9 +14,10 @@ export type NodeProps = SharedNodeProps & {
 };
 export type PathProps = SharedPathProps & {
     className?: string;
-    style?: {
-        center?: CSSProperties;
-        path?: CSSProperties;
-    };
+    style?: CSSProperties;
+};
+export type EdgesProps = EdgesPartialProps & {
+    readonly className?: string;
+    readonly style?: CSSProperties;
 };
-export { defaultSettings, type EdgeNodeProps, type EdgesProps, EdgeSubscriber, generateOrigins, GraphContext, type GraphContextsProps, type GraphProps, GridContext, type GridProps, type Line, NodePositions, type NodesProps } from '@lincle/react-shared';
+export { type EdgeNodeProps, generateOrigins, type GraphProps, type GridProps, type Line, type NodesProps, Providers, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useEdge, useEdges, useEdgeSubscriber, useGrid, useNodePositions, useRemoveEdge, useUpdateEdge } from '@lincle/react-shared';

package/dist/shared.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NodePositions = exports.GridContext = exports.GraphContext = exports.generateOrigins = exports.EdgeSubscriber = exports.defaultSettings = void 0;
+exports.useUpdateEdge = exports.useRemoveEdge = exports.useNodePositions = exports.useGrid = exports.useEdgeSubscriber = exports.useEdges = exports.useEdge = exports.useDiagramId = exports.useDefaultShape = exports.useDefaultNodeWidth = exports.useDefaultNodeHeight = exports.useDefaultLine = exports.Providers = exports.generateOrigins = void 0;
 var react_shared_1 = require("@lincle/react-shared");
-Object.defineProperty(exports, "defaultSettings", { enumerable: true, get: function () { return react_shared_1.defaultSettings; } });
-Object.defineProperty(exports, "EdgeSubscriber", { enumerable: true, get: function () { return react_shared_1.EdgeSubscriber; } });
 Object.defineProperty(exports, "generateOrigins", { enumerable: true, get: function () { return react_shared_1.generateOrigins; } });
-Object.defineProperty(exports, "GraphContext", { enumerable: true, get: function () { return react_shared_1.GraphContext; } });
-Object.defineProperty(exports, "GridContext", { enumerable: true, get: function () { return react_shared_1.GridContext; } });
-Object.defineProperty(exports, "NodePositions", { enumerable: true, get: function () { return react_shared_1.NodePositions; } });
+Object.defineProperty(exports, "Providers", { enumerable: true, get: function () { return react_shared_1.Providers; } });
+Object.defineProperty(exports, "useDefaultLine", { enumerable: true, get: function () { return react_shared_1.useDefaultLine; } });
+Object.defineProperty(exports, "useDefaultNodeHeight", { enumerable: true, get: function () { return react_shared_1.useDefaultNodeHeight; } });
+Object.defineProperty(exports, "useDefaultNodeWidth", { enumerable: true, get: function () { return react_shared_1.useDefaultNodeWidth; } });
+Object.defineProperty(exports, "useDefaultShape", { enumerable: true, get: function () { return react_shared_1.useDefaultShape; } });
+Object.defineProperty(exports, "useDiagramId", { enumerable: true, get: function () { return react_shared_1.useDiagramId; } });
+Object.defineProperty(exports, "useEdge", { enumerable: true, get: function () { return react_shared_1.useEdge; } });
+Object.defineProperty(exports, "useEdges", { enumerable: true, get: function () { return react_shared_1.useEdges; } });
+Object.defineProperty(exports, "useEdgeSubscriber", { enumerable: true, get: function () { return react_shared_1.useEdgeSubscriber; } });
+Object.defineProperty(exports, "useGrid", { enumerable: true, get: function () { return react_shared_1.useGrid; } });
+Object.defineProperty(exports, "useNodePositions", { enumerable: true, get: function () { return react_shared_1.useNodePositions; } });
+Object.defineProperty(exports, "useRemoveEdge", { enumerable: true, get: function () { return react_shared_1.useRemoveEdge; } });
+Object.defineProperty(exports, "useUpdateEdge", { enumerable: true, get: function () { return react_shared_1.useUpdateEdge; } });

package/dist/styles.g.css

@@ -2,14 +2,10 @@
 
 .lincle-base-edges {
 	position: absolute;
-	z-index: -1;
+	inset: 0;
 	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;
+	filter: drop-shadow(0 3px 6px rgba(0 0 0 / 16%)) drop-shadow(0 3px 6px rgba(0 0 0 23%));
 }
 
 .lincle-base-edges > :not(path) {
@@ -39,6 +35,10 @@
 	transform-origin: 0 0;
 }
 
+.lincle-base-node-round {
+	border-radius: 50%
+}
+
 /* path */
 
 .lincle-base-edge-path {
@@ -71,7 +71,7 @@
 }
 
 .lincle-base-edge-path-border {
-	stroke-width: 30px;
+	stroke-width: 8px;
 	stroke: black;
 	opacity: 0;
 	pointer-events: all;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@lincle/react-web-base",
 	"title": "lincle react web base",
 	"license": "LGPL-3.0-or-later",
-	"version": "0.4.0-next.2",
+	"version": "0.4.0-next.3",
 	"private": false,
 	"description": "A 'reactive' React node and edge generator",
 	"author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -44,19 +44,17 @@
 		"clean:dist": "rimraf dist"
 	},
 	"devDependencies": {
-		"@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",
+		"@digest/eslint-config-jest": "^4.4.3",
+		"@digest/eslint-config-react": "^4.4.3",
+		"@digest/eslint-config-typescript": "^4.4.3",
+		"@digest/jest-junit": "^4.4.3",
+		"@digest/jest-react": "^4.4.3",
+		"@digest/jest-typescript": "^4.4.3",
+		"@digest/stylelint-config": "^4.4.3",
+		"@digest/typescript": "^4.4.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/node": "^20.14.11",
+		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@types/react-test-renderer": "^18.3.0",
 		"cross-env": "^7.0.3",
@@ -67,12 +65,10 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-test-renderer": "^18.3.1",
-		"rimraf": "^5.0.7"
+		"rimraf": "^6.0.1"
 	},
 	"dependencies": {
-		"@lincle/react-shared": "^0.4.0-next.2",
-		"lodash.debounce": "^4.0.8",
-		"lodash.throttle": "^4.1.1"
+		"@lincle/react-shared": "^0.4.0-next.3"
 	},
 	"peerDependencies": {
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
@@ -93,5 +89,5 @@
 		"acyclical graph",
 		"cyclical graph"
 	],
-	"gitHead": "c00bcd56556ee5599505cbeeebfdab06e4a8c552"
+	"gitHead": "0d9cda53a8175e6d2a64d7b3b81828fc98007bfb"
 }

package/dist/components/GraphContexts/index.d.ts

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

package/dist/components/GraphContexts/index.js

@@ -1,45 +0,0 @@
-"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 shared_1 = require("../../shared");
-const Grid_1 = __importDefault(require("../Grid"));
-const react_1 = require("react");
-const GraphContexts = ({ children, edgeFrequency = shared_1.defaultSettings.edgeFrequency, grid = shared_1.defaultSettings.grid, id, line = shared_1.defaultSettings.line, nodeFrequency = shared_1.defaultSettings.nodeFrequency, nodeHeight = shared_1.defaultSettings.height, nodeWidth = shared_1.defaultSettings.width, shape = shared_1.defaultSettings.shape }) => {
-    const diagramId = (0, react_1.useMemo)(() => {
-        return id;
-    }, []);
-    const permanent = (0, react_1.useMemo)(() => {
-        return {
-            diagramId,
-            edgeSubscriber: new shared_1.EdgeSubscriber(edgeFrequency),
-            nodePositions: new shared_1.NodePositions()
-        };
-    }, []);
-    const provides = (0, react_1.useMemo)(() => {
-        return Object.assign(Object.assign({}, permanent), { defaultSettings: {
-                edgeFrequency,
-                height: nodeHeight,
-                line,
-                nodeFrequency,
-                shape,
-                width: nodeWidth
-            } });
-    }, [
-        edgeFrequency,
-        line,
-        nodeFrequency,
-        nodeHeight,
-        nodeWidth,
-        permanent,
-        shape
-    ]);
-    const hiddenGrid = grid === false ?
-        children :
-        ((0, jsx_runtime_1.jsxs)(shared_1.GridContext.Provider, { value: grid, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, {}), children] }));
-    return ((0, jsx_runtime_1.jsx)(shared_1.GraphContext.Provider, { value: provides, children: hiddenGrid }));
-};
-GraphContexts.displayName = 'LincleGraphContexts';
-exports.default = GraphContexts;

package/dist/components/Path/index.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const shared_1 = require("../../shared");
-const react_1 = require("react");
-const Path = ({ children, className = '', diagramId, line, markerEnd, markerStart, source, style: { center: centerStyle, path: pathStyle } = {
-    center: {},
-    path: {}
-}, target }) => {
-    const hasChildren = Boolean(children);
-    const origins = (0, react_1.useMemo)(() => {
-        if (source &&
-            target &&
-            line) {
-            return (0, shared_1.generateOrigins)(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', style: centerStyle, 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;
-    }, [
-        centerStyle,
-        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)`, style: pathStyle })] }), center] }));
-};
-Path.displayName = 'LinclePath';
-exports.default = Path;