@lincle/react-native-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,61 @@
 "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, 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 react_native_1 = require("react-native");
+const Edge = ({ children, 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, {
+                dash,
+                line,
+                markerEnd,
+                markerStart,
+                sourceId,
+                targetId
+            });
         }
-        return ((0, jsx_runtime_1.jsx)(Path_1.default, { diagramId: diagramId, id: edgeId, line: line, markerEnd: markerEnd, markerStart: markerStart, source: pathSource, target: pathTarget, children: children }));
-    }
-    return null;
+        return () => {
+            if (removeEdge) {
+                removeEdge(edgeId);
+            }
+        };
+    }, [
+        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)(react_native_1.View, { 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,29 @@
+"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 react_native_svg_1 = require("react-native-svg");
+const Marker = () => {
+    const id = (0, shared_1.useDiagramId)();
+    const markerId = (0, react_1.useMemo)(() => {
+        return id ?
+            `${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)(react_native_svg_1.Marker, { id: arrowId, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '9', refY: '5', children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'black' }) }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Marker, { id: circleId, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '5', refY: '5', children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: '5', cy: '5', fill: 'black', 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,57 @@
+"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 react_native_svg_1 = require("react-native-svg");
+const Path = ({ center = true, edgeId, line, markerEnd: givenMarkerEnd, markerStart: givenMarkerStart, source, 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)(react_native_svg_1.G, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent', id: diagramId + '1', opacity: 0, pointerEvents: 'auto', stroke: 'black', strokeWidth: 30 }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent', id: diagramId + '2', markerEnd: markerEnd, markerStart: markerStart, stroke: 'black' })] }));
+};
+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,59 @@
+"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 = ({ 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
+    ]);
+    if (source &&
+        target) {
+        return customPath !== null && customPath !== void 0 ? customPath : ((0, jsx_runtime_1.jsx)(Path_1.default, { center: true, 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,5 +1,6 @@
-import { type EdgesProps as EdgesPartialProps } from '../../shared';
+import { type EdgesProps } from '../../shared';
 import { type FunctionComponent } from 'react';
 declare const Edges: FunctionComponent<EdgesProps>;
-export default Edges;
-export type EdgesProps = EdgesPartialProps & {};
+export { Edges };
+export { default as Marker } from './Marker';
+export { Path } from './Paths';

package/dist/components/Edges/index.js

@@ -22,29 +22,55 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path = exports.Marker = 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 react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const styles = {
+const styles = react_native_1.StyleSheet.create({
+    bridges: {
+        bottom: 0,
+        left: 0,
+        overflow: 'visible',
+        pointerEvents: 'box-none',
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
     edges: {
         backfaceVisibility: 'hidden',
         overflow: 'visible',
         zIndex: -1
     }
-};
-const Edges = ({ children }) => {
-    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 Edges = ({ children, scale = 1, translate = {
+    x: 0,
+    y: 0
+} }) => {
+    const { style, transform } = (0, react_1.useMemo)(() => {
+        const tx = translate.x;
+        const ty = translate.y;
+        const tz = scale;
+        return {
+            style: Object.assign(Object.assign({}, styles.bridges), { transform: `translateX(${tx}px) translateY(${ty}px) scale(${tz})`, transformOrigin: 'top left' }),
+            transform: `translate(${tx}, ${ty}) scale(${tz})`
+        };
     }, [
-        id
+        translate.x,
+        translate.y,
+        scale
     ]);
-    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { style: styles.edges, children: [(0, jsx_runtime_1.jsxs)(react_native_svg_1.Defs, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Marker, { id: `diagram-${markerId}marker-arrow`, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '9', refY: '5', children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'black' }) }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Marker, { id: `diagram-${markerId}marker-circle`, markerHeight: '10', markerUnits: 'strokeWidth', markerWidth: '10', orient: 'auto', refX: '5', refY: '5', children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: '5', cy: '5', fill: 'black', r: '3' }) })] }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_svg_1.default, { style: styles.edges, transform: transform, children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsx)(Marker_1.default, {}) }), (0, jsx_runtime_1.jsx)(Paths_1.default, {})] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style, children: children })] }));
 };
+exports.Edges = Edges;
 Edges.displayName = 'LincleEdges';
-exports.default = Edges;
+var Marker_2 = require("./Marker");
+Object.defineProperty(exports, "Marker", { enumerable: true, get: function () { return __importDefault(Marker_2).default; } });
+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

@@ -24,22 +24,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 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 react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
-const styles = {
+const styles = react_native_1.StyleSheet.create({
     grid: {
         height: '100%',
         position: 'absolute',
         width: '100%'
     }
-};
+});
 const SIZE = 0.4;
 const Circle = ((0, jsx_runtime_1.jsx)(react_native_svg_1.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,22 +11,22 @@ 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 react_native_1 = require("react-native");
 const Node = (_a, ref) => {
-    var _b, _c, _d, _e, _f, _g;
+    var _b, _c, _d;
     var { children, height: givenHeight, id: nodeId, shape: givenShape, style: { node: nodeStyle } = {}, track = true, width: givenWidth, x: givenX = 0, y: givenY = 0 } = _a, additionalProperties = __rest(_a, ["children", "height", "id", "shape", "style", "track", "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;
+    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)) {
@@ -129,4 +129,5 @@ const Node = (_a, ref) => {
     return ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ "data-testid": `node-${nodeId}`, 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,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Nodes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Nodes = ({ children }) => {
-    return children;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: 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 ViewStyle } from 'react-native';
 export type EdgeProps = SharedEdgeProps & {
     style?: {
@@ -11,9 +11,13 @@ export type NodeProps = SharedNodeProps & {
     };
 };
 export type PathProps = SharedPathProps & {
-    style?: {
-        center?: ViewStyle;
-        path?: ViewStyle;
+    style?: ViewStyle;
+};
+export type EdgesProps = EdgesPartialProps & {
+    readonly scale?: number;
+    readonly translate?: {
+        x: number;
+        y: number;
     };
 };
-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/package.json

@@ -2,7 +2,7 @@
 	"name": "@lincle/react-native-base",
 	"title": "lincle react native 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)",
@@ -43,19 +43,16 @@
 		"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/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-native": "^0.73.0",
 		"@types/react-test-renderer": "^18.3.0",
 		"cross-env": "^7.0.3",
@@ -64,16 +61,13 @@
 		"ncp": "^2.0.0",
 		"npm-run-all": "^4.1.5",
 		"react": "^18.3.1",
-		"react-native": "^0.74.1",
-		"react-native-svg": "^15.3.0",
+		"react-native": "^0.74.3",
+		"react-native-svg": "^15.4.0",
 		"react-test-renderer": "^18.3.1",
-		"rimraf": "^5.0.7"
+		"rimraf": "^6.0.1"
 	},
 	"dependencies": {
-		"@lincle/react-shared": "^0.4.0-next.2",
-		"bezier-js": "^6.1.4",
-		"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",
@@ -95,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,43 +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 react_native_svg_1 = require("react-native-svg");
-const Path = ({ children, diagramId, line, markerEnd, markerStart, source, style: { center: centerStyle } = {}, 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)(react_native_svg_1.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;
-    }, [
-        children,
-        origins === null || origins === void 0 ? void 0 : origins.center,
-        centerStyle
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_svg_1.G, { children: [(0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent', id: diagramId + '1', opacity: 0, pointerEvents: 'auto', stroke: 'black', strokeWidth: 30 }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: origins === null || origins === void 0 ? void 0 : origins.path, fill: 'transparent', id: diagramId + '2', markerEnd: markerEnd ?
-                            markerEnd :
-                            `url(#diagram-${diagramId ?
-                                `${diagramId}-` :
-                                ''}marker-arrow)`, markerStart: markerStart ?
-                            markerStart :
-                            `url(#diagram-${diagramId ?
-                                `${diagramId}-` :
-                                ''}marker-circle)`, stroke: 'black' })] }), center] }));
-};
-Path.displayName = 'LinclePath';
-exports.default = Path;