@lincle/react-web-interactive 0.4.0-next.1 → 0.4.0-next.11

package/dist/shared.d.ts

@@ -1,11 +1,10 @@
-import { type DraggableData, type EdgeControlProps, type EdgeProps, type EdgesProps, type Mode, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type NodesProps, type Position, type PullNodeProps as SharedPullNodeProps, type PullProps as SharedPullProps, type ScaleProps, type SnapProps, type TransformProps, type TranslateProps } from '@lincle/react-interactive-shared';
-import { type GraphContextsProps as BaseGraphContextsProps, type GraphProps as BaseGraphProps, type NodeProps as BaseNodeProps } from '@lincle/react-web-base';
-import { type CSSProperties, type MouseEvent, type ReactElement, type ReactNode, type TouchEvent } from 'react';
-export { defaultScale, defaultSettings, disableMove, disablePull, type DraggableData, type EdgeNodeProps, GraphContext, GridContext, type GridProps, ModeContext, type ModeType, NodeContext, type Position, ScaleContext, SnapContext, TransformContext, transformDefaults, TranslateContext, translateDefaults } from '@lincle/react-interactive-shared';
+import { type DraggableData, type EdgeProps, type GraphProps as InteractiveGraphProps, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type Position, type PullNodeProps as SharedPullNodeProps, type PullProps as SharedPullProps } from '@lincle/react-interactive-shared';
+import { type NodeProps as BaseNodeProps } from '@lincle/react-web-base';
+import { type CSSProperties, type MouseEvent, type PropsWithChildren, type TouchEvent } from 'react';
 export type DraggableEvent = MouseEvent | MouseEvent<HTMLElement | SVGElement> | TouchEvent | TouchEvent<HTMLElement | SVGElement>;
 export type NodeControlProps = {
     onDrag?: (event: DraggableEvent, data: DraggableData) => void;
-    onEdgeDrop?: (sourceId: number | string, targetId?: number | string) => void;
+    onEdgeDrop?: (event: DraggableEvent, sourceId: number | string, targetId?: number | string) => void;
     onSelect?: () => void;
     onStart?: (event: DraggableEvent) => void;
     onStop?: (event: DraggableEvent, data: DraggableData) => void;
@@ -30,19 +29,16 @@ export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
     };
 };
 export type NodeProps = SharedNodeProps & BaseNodeProps & NodeControlProps;
-export type NodeContextProps = EdgeControlProps & GraphNodeControlProps;
-export type GraphContextsProps = BaseGraphContextsProps & EdgeControlProps & GraphNodeControlProps & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps;
 export type InteractionControlProps = {
     onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
     onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
     onTouchEnd?: (event: TouchEvent<HTMLDivElement>) => void;
     onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
 };
-export type InteractionProps = InteractionControlProps & Pick<GraphProps, 'children'>;
-export type GraphProps = EdgeControlProps & GraphNodeControlProps & InteractionControlProps & Omit<BaseGraphProps, 'children' | 'id'> & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps & {
-    children?: Array<ReactElement<EdgesProps | NodesProps>> | ReactNode | ReactNode[];
-    id?: number | string;
-};
+export type InteractionProps = PropsWithChildren<{} & InteractionControlProps>;
 export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
     readonly onDrag?: (event: DraggableEvent, data: DraggableData, position: Position) => void;
 };
+export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & InteractionProps & GraphNodeControlProps;
+export { type ConnectionsProps, type DraggableData, type EdgeNodeProps, type EdgesProps, type GridProps, type ModeType, type NodesProps, type Position, Providers, useConnections, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useMaxScale, useMinScale, useMode, useModeGiven, useMove, useNodePositions, useOnMode, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, useOnScale, useOnTranslate, usePan, usePull, useScale, useSetConnection, useSnap, useTranslate, useZoom } from '@lincle/react-interactive-shared';
+export { Graph as GraphBase } from '@lincle/react-web-base';

package/dist/shared.js

@@ -1,18 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.translateDefaults = exports.TranslateContext = exports.transformDefaults = exports.TransformContext = exports.SnapContext = exports.ScaleContext = exports.NodeContext = exports.ModeContext = exports.GridContext = exports.GraphContext = exports.disablePull = exports.disableMove = exports.defaultSettings = exports.defaultScale = void 0;
+exports.GraphBase = exports.useZoom = exports.useTranslate = exports.useSnap = exports.useSetConnection = exports.useScale = exports.usePull = exports.usePan = exports.useOnTranslate = exports.useOnScale = exports.useOnNodeStop = exports.useOnNodeStart = exports.useOnNodeSelect = exports.useOnNodeEdgeDrop = exports.useOnNodeDrag = exports.useOnMode = exports.useNodePositions = exports.useMove = exports.useModeGiven = exports.useMode = exports.useMinScale = exports.useMaxScale = exports.useDiagramId = exports.useDefaultShape = exports.useDefaultNodeWidth = exports.useDefaultNodeHeight = exports.useDefaultLine = exports.useConnections = exports.Providers = void 0;
 var react_interactive_shared_1 = require("@lincle/react-interactive-shared");
-Object.defineProperty(exports, "defaultScale", { enumerable: true, get: function () { return react_interactive_shared_1.defaultScale; } });
-Object.defineProperty(exports, "defaultSettings", { enumerable: true, get: function () { return react_interactive_shared_1.defaultSettings; } });
-Object.defineProperty(exports, "disableMove", { enumerable: true, get: function () { return react_interactive_shared_1.disableMove; } });
-Object.defineProperty(exports, "disablePull", { enumerable: true, get: function () { return react_interactive_shared_1.disablePull; } });
-Object.defineProperty(exports, "GraphContext", { enumerable: true, get: function () { return react_interactive_shared_1.GraphContext; } });
-Object.defineProperty(exports, "GridContext", { enumerable: true, get: function () { return react_interactive_shared_1.GridContext; } });
-Object.defineProperty(exports, "ModeContext", { enumerable: true, get: function () { return react_interactive_shared_1.ModeContext; } });
-Object.defineProperty(exports, "NodeContext", { enumerable: true, get: function () { return react_interactive_shared_1.NodeContext; } });
-Object.defineProperty(exports, "ScaleContext", { enumerable: true, get: function () { return react_interactive_shared_1.ScaleContext; } });
-Object.defineProperty(exports, "SnapContext", { enumerable: true, get: function () { return react_interactive_shared_1.SnapContext; } });
-Object.defineProperty(exports, "TransformContext", { enumerable: true, get: function () { return react_interactive_shared_1.TransformContext; } });
-Object.defineProperty(exports, "transformDefaults", { enumerable: true, get: function () { return react_interactive_shared_1.transformDefaults; } });
-Object.defineProperty(exports, "TranslateContext", { enumerable: true, get: function () { return react_interactive_shared_1.TranslateContext; } });
-Object.defineProperty(exports, "translateDefaults", { enumerable: true, get: function () { return react_interactive_shared_1.translateDefaults; } });
+Object.defineProperty(exports, "Providers", { enumerable: true, get: function () { return react_interactive_shared_1.Providers; } });
+Object.defineProperty(exports, "useConnections", { enumerable: true, get: function () { return react_interactive_shared_1.useConnections; } });
+Object.defineProperty(exports, "useDefaultLine", { enumerable: true, get: function () { return react_interactive_shared_1.useDefaultLine; } });
+Object.defineProperty(exports, "useDefaultNodeHeight", { enumerable: true, get: function () { return react_interactive_shared_1.useDefaultNodeHeight; } });
+Object.defineProperty(exports, "useDefaultNodeWidth", { enumerable: true, get: function () { return react_interactive_shared_1.useDefaultNodeWidth; } });
+Object.defineProperty(exports, "useDefaultShape", { enumerable: true, get: function () { return react_interactive_shared_1.useDefaultShape; } });
+Object.defineProperty(exports, "useDiagramId", { enumerable: true, get: function () { return react_interactive_shared_1.useDiagramId; } });
+Object.defineProperty(exports, "useMaxScale", { enumerable: true, get: function () { return react_interactive_shared_1.useMaxScale; } });
+Object.defineProperty(exports, "useMinScale", { enumerable: true, get: function () { return react_interactive_shared_1.useMinScale; } });
+Object.defineProperty(exports, "useMode", { enumerable: true, get: function () { return react_interactive_shared_1.useMode; } });
+Object.defineProperty(exports, "useModeGiven", { enumerable: true, get: function () { return react_interactive_shared_1.useModeGiven; } });
+Object.defineProperty(exports, "useMove", { enumerable: true, get: function () { return react_interactive_shared_1.useMove; } });
+Object.defineProperty(exports, "useNodePositions", { enumerable: true, get: function () { return react_interactive_shared_1.useNodePositions; } });
+Object.defineProperty(exports, "useOnMode", { enumerable: true, get: function () { return react_interactive_shared_1.useOnMode; } });
+Object.defineProperty(exports, "useOnNodeDrag", { enumerable: true, get: function () { return react_interactive_shared_1.useOnNodeDrag; } });
+Object.defineProperty(exports, "useOnNodeEdgeDrop", { enumerable: true, get: function () { return react_interactive_shared_1.useOnNodeEdgeDrop; } });
+Object.defineProperty(exports, "useOnNodeSelect", { enumerable: true, get: function () { return react_interactive_shared_1.useOnNodeSelect; } });
+Object.defineProperty(exports, "useOnNodeStart", { enumerable: true, get: function () { return react_interactive_shared_1.useOnNodeStart; } });
+Object.defineProperty(exports, "useOnNodeStop", { enumerable: true, get: function () { return react_interactive_shared_1.useOnNodeStop; } });
+Object.defineProperty(exports, "useOnScale", { enumerable: true, get: function () { return react_interactive_shared_1.useOnScale; } });
+Object.defineProperty(exports, "useOnTranslate", { enumerable: true, get: function () { return react_interactive_shared_1.useOnTranslate; } });
+Object.defineProperty(exports, "usePan", { enumerable: true, get: function () { return react_interactive_shared_1.usePan; } });
+Object.defineProperty(exports, "usePull", { enumerable: true, get: function () { return react_interactive_shared_1.usePull; } });
+Object.defineProperty(exports, "useScale", { enumerable: true, get: function () { return react_interactive_shared_1.useScale; } });
+Object.defineProperty(exports, "useSetConnection", { enumerable: true, get: function () { return react_interactive_shared_1.useSetConnection; } });
+Object.defineProperty(exports, "useSnap", { enumerable: true, get: function () { return react_interactive_shared_1.useSnap; } });
+Object.defineProperty(exports, "useTranslate", { enumerable: true, get: function () { return react_interactive_shared_1.useTranslate; } });
+Object.defineProperty(exports, "useZoom", { enumerable: true, get: function () { return react_interactive_shared_1.useZoom; } });
+var react_web_base_1 = require("@lincle/react-web-base");
+Object.defineProperty(exports, "GraphBase", { enumerable: true, get: function () { return react_web_base_1.Graph; } });

package/dist/styles.g.css

@@ -1,107 +1,6 @@
-/* edge */
-
-.lincle-base-edges {
-	position: absolute;
-	z-index: -1;
-	overflow: visible;
-
-	/* width: 1px; */
-
-	/* height: 1px; */
-	filter: drop-shadow(0 3px 6px rgba(0 0 0 / 16%)) drop-shadow(0 3px 6px rgba(0 0 0 23%));
-	backface-visibility: hidden;
-}
-
-.lincle-base-edges > :not(path) {
-	cursor: unset;
-}
-
-.lincle-base-edge-marker-arrow {
-	fill: black;
-}
-
-.lincle-base-edge-marker-circle {
-	fill: black;
-}
-
-/* grid */
-
-.lincle-base-grid {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-}
-
-/* node */
-
-.lincle-base-node {
-	position: absolute;
-	transform-origin: 0 0;
-}
-
-/* path */
-
-.lincle-base-edge-path {
-	stroke: black;
-}
-
-.lincle-base-edge-path:hover {
-	animation: lincle-base-edgedash 1.5s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.lincle-base-edge-dash-all .lincle-base-edge-path {
-	animation: lincle-base-edgedash 1.5s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.lincle-base-edge-dash-none .lincle-base-edge-path {
-	animation: none;
-	stroke-dasharray: none;
-}
-
-.lincle-base-edge-dash-on {
-	animation: lincle-base-edgedash 1.5s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.lincle-base-edge-dash-off.lincle-base-edge-path:hover {
-	animation: none;
-	stroke-dasharray: none;
-}
-
-.lincle-base-edge-path-border {
-	stroke-width: 30px;
-	stroke: black;
-	opacity: 0;
-	pointer-events: all;
-}
-
-.lincle-base-edge-path-border:hover + .lincle-base-edge-path {
-	animation: lincle-base-edgedash 1.5s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.lincle-base-edge-path-border:hover + .lincle-base-edge-dash-off.lincle-base-edge-path {
-	animation: none;
-	stroke-dasharray: none;
-}
-
-.lincle-base-edge-dash-none .lincle-base-edge-path-border:hover + .lincle-base-edge-path {
-	animation: none;
-	stroke-dasharray: none;
-}
-
-@keyframes lincle-base-edgedash {
-	to {
-		stroke-dashoffset: 30;
-	}
-}
-
 /* Interaction */
 
 .lincle-interactive-graph {
-	position: relative;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
@@ -114,6 +13,15 @@
 	cursor: all-scroll;
 }
 
+.lincle-interactive-container {
+	position: absolute;
+	inset: 0;
+}
+
+.lincle-interactive-container > div {
+	position: initial !important;
+}
+
 .lincle-interactive-transform {
 	transform-origin: 0 0;
 	will-change: transform;
@@ -146,11 +54,6 @@
 	pointer-events: none;
 }
 
-.lincle-interactive-drag + svg > path {
-	animation: lincle-interactive-dash 20s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
 .lincle-interactive-hidden {
 	opacity: 0;
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@lincle/react-web-interactive",
 	"title": "lincle react web interactive",
 	"license": "LGPL-3.0-or-later",
-	"version": "0.4.0-next.1",
+	"version": "0.4.0-next.11",
 	"private": false,
 	"description": "A 'reactive' React node and edge generator",
 	"author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -20,13 +20,13 @@
 		"COPYING.md",
 		"COPYING.LESSER.md"
 	],
-	"homepage": "https://gitlab.com//tree/master/packages/react-web-interactive/",
+	"homepage": "https://gitlab.com/tree/master/packages/react-web-interactive/",
 	"repository": {
 		"type": "git",
 		"url": "https://gitlab.com/.git"
 	},
 	"bugs": {
-		"url": "https://gitlab.com//issues"
+		"url": "https://gitlab.com/issues"
 	},
 	"scripts": {
 		"build": "run-s clean:dist build:prod build:styles",
@@ -44,35 +44,33 @@
 		"clean:dist": "rimraf dist"
 	},
 	"devDependencies": {
-		"@digest/eslint-config-jest": "^4.3.0",
-		"@digest/eslint-config-react": "^4.3.0",
-		"@digest/eslint-config-typescript": "^4.3.0",
-		"@digest/jest-junit": "^4.3.0",
-		"@digest/jest-react": "^4.3.0",
-		"@digest/jest-typescript": "^4.3.0",
-		"@digest/typescript": "^4.3.0",
-		"@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.throttle": "^4.1.9",
-		"@types/lodash.debounce": "^4.0.9",
-		"@types/node": "^20.12.4",
-		"@types/react": "^18.2.74",
-		"@types/react-dom": "^18.2.24",
-		"@types/react-test-renderer": "^18.0.7",
+		"@types/node": "^22.1.0",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@types/react-test-renderer": "^18.3.0",
 		"cross-env": "^7.0.3",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-environment-jsdom-global": "^4.0.0",
 		"ncp": "^2.0.0",
 		"npm-run-all": "^4.1.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-test-renderer": "^18.2.0",
-		"rimraf": "^5.0.5"
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-test-renderer": "^18.3.1",
+		"rimraf": "^6.0.1"
 	},
 	"dependencies": {
-		"@lincle/react-interactive-shared": "^0.0.1",
-		"@lincle/react-shared": "^0.0.1",
-		"@lincle/react-web-base": "^0.0.1",
+		"@lincle/react-interactive-shared": "^0.4.0-next.11",
+		"@lincle/react-shared": "^0.4.0-next.11",
+		"@lincle/react-web-base": "^0.4.0-next.11",
 		"react-draggable": "^4.4.6",
 		"react-map-interaction": "^2.1.0"
 	},
@@ -98,5 +96,6 @@
 		"cyclical graph",
 		"dragndrop",
 		"drag"
-	]
+	],
+	"gitHead": "9dd90674f5195c828749f2b171eee3dda0cc85b6"
 }

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,167 +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 base_1 = require("../../base");
-const shared_1 = require("../../shared");
-const Grid_1 = __importDefault(require("../Grid"));
-const react_1 = require("react");
-const noGrid = [
-    1,
-    1
-];
-const GraphContexts = ({ children, disableMove = shared_1.disableMove, disablePan = shared_1.transformDefaults.disablePan, disablePull = shared_1.disablePull, disableScale = shared_1.transformDefaults.disableScale, edgeFrequency = shared_1.defaultSettings.edgeFrequency, grid: givenGrid, id, line = shared_1.defaultSettings.line, maxScale = shared_1.transformDefaults.maxScale, minScale = shared_1.transformDefaults.minScale, mode: givenMode, nodeFrequency = shared_1.defaultSettings.nodeFrequency, nodeHeight = shared_1.defaultSettings.height, nodeWidth = shared_1.defaultSettings.width, onEdgeDrop, onNodeDrag, onNodeSelect, onNodeStart, onNodeStop, onScale, onTranslate, scale: givenScale = shared_1.defaultScale, shape = shared_1.defaultSettings.shape, snap, xOffset = shared_1.translateDefaults.x, yOffset = shared_1.translateDefaults.y }) => {
-    const [nodeControls, setNodeControls] = (0, react_1.useState)({
-        onEdgeDrop,
-        onNodeDrag,
-        onNodeSelect,
-        onNodeStart,
-        onNodeStop
-    });
-    const NodeControls = (0, react_1.useMemo)(() => {
-        return {
-            onEdgeDrop,
-            onNodeDrag,
-            onNodeSelect,
-            onNodeStart,
-            onNodeStop,
-            setNodeControls
-        };
-    }, [
-        onEdgeDrop,
-        onNodeDrag,
-        onNodeSelect,
-        onNodeStart,
-        onNodeStop,
-        setNodeControls
-    ]);
-    const transform = (0, react_1.useMemo)(() => {
-        return {
-            disablePan,
-            disableScale,
-            maxScale,
-            minScale
-        };
-    }, [
-        disablePan,
-        disableScale,
-        maxScale,
-        minScale
-    ]);
-    const [mode, setMode] = (0, react_1.useState)(givenMode);
-    const handleMode = (0, react_1.useCallback)((newMode) => {
-        setMode(newMode);
-    }, []);
-    const Mode = (0, react_1.useMemo)(() => {
-        return {
-            disableMove,
-            disablePull,
-            givenMode,
-            mode,
-            onMode: handleMode
-        };
-    }, [
-        disableMove,
-        disablePull,
-        givenMode,
-        handleMode,
-        mode
-    ]);
-    (0, react_1.useEffect)(() => {
-        handleMode(givenMode);
-    }, [
-        givenMode,
-        handleMode
-    ]);
-    const [scale, setScale] = (0, react_1.useState)(givenScale);
-    const handleScale = (0, react_1.useCallback)((newScale) => {
-        if (onScale) {
-            onScale(newScale);
-        }
-        setScale(newScale);
-    }, [
-        onScale
-    ]);
-    const Scale = (0, react_1.useMemo)(() => {
-        return {
-            onScale: handleScale,
-            scale
-        };
-    }, [
-        handleScale,
-        scale
-    ]);
-    (0, react_1.useEffect)(() => {
-        setScale(givenScale);
-    }, [
-        givenScale
-    ]);
-    const [translate, setTranslate] = (0, react_1.useState)({
-        x: xOffset,
-        y: yOffset
-    });
-    const handleTranslate = (0, react_1.useCallback)((newTranslate) => {
-        if (onTranslate) {
-            onTranslate(newTranslate);
-        }
-        setTranslate(newTranslate);
-    }, [
-        onTranslate
-    ]);
-    const Translate = (0, react_1.useMemo)(() => {
-        return {
-            onTranslate: handleTranslate,
-            translate
-        };
-    }, [
-        handleTranslate,
-        translate
-    ]);
-    (0, react_1.useEffect)(() => {
-        setTranslate({
-            x: xOffset,
-            y: yOffset
-        });
-    }, [
-        xOffset,
-        yOffset
-    ]);
-    const grid = (0, react_1.useMemo)(() => {
-        var _a;
-        return (_a = (givenGrid === false ?
-            noGrid :
-            givenGrid)) !== null && _a !== void 0 ? _a : shared_1.defaultSettings.grid;
-    }, [
-        givenGrid
-    ]);
-    const derivedSnap = (0, react_1.useMemo)(() => {
-        if (snap === undefined) {
-            return givenGrid === undefined ?
-                noGrid :
-                grid;
-        }
-        if (snap === false) {
-            return noGrid;
-        }
-        if (snap === true) {
-            return grid;
-        }
-        return snap;
-    }, [
-        givenGrid,
-        grid,
-        snap
-    ]);
-    const hiddenGrid = givenGrid === false ?
-        null :
-        ((0, jsx_runtime_1.jsx)(Grid_1.default, {}));
-    const staticContexts = ((0, jsx_runtime_1.jsx)(shared_1.NodeContext.Provider, { value: NodeControls, children: (0, jsx_runtime_1.jsx)(shared_1.SnapContext.Provider, { value: derivedSnap, children: (0, jsx_runtime_1.jsx)(shared_1.TransformContext.Provider, { value: transform, children: (0, jsx_runtime_1.jsx)(shared_1.ModeContext.Provider, { value: Mode, children: (0, jsx_runtime_1.jsx)(shared_1.ScaleContext.Provider, { value: Scale, children: (0, jsx_runtime_1.jsxs)(shared_1.TranslateContext.Provider, { value: Translate, children: [hiddenGrid, children] }) }) }) }) }) }));
-    const gridContext = givenGrid === false ?
-        staticContexts :
-        ((0, jsx_runtime_1.jsx)(shared_1.GridContext.Provider, { value: givenGrid !== null && givenGrid !== void 0 ? givenGrid : shared_1.defaultSettings.grid, children: staticContexts }));
-    return ((0, jsx_runtime_1.jsx)(base_1.GraphContexts, { edgeFrequency: edgeFrequency, grid: false, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, children: gridContext }));
-};
-GraphContexts.displayName = 'LincleInteractiveGraphContexts';
-exports.default = GraphContexts;

package/dist/components/Grid/index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const base_1 = require("../../base");
-const shared_1 = require("../../shared");
-const react_1 = require("react");
-const Grid = ({ children }) => {
-    const { scale } = (0, react_1.useContext)(shared_1.ScaleContext);
-    const { translate } = (0, react_1.useContext)(shared_1.TranslateContext);
-    return ((0, jsx_runtime_1.jsx)(base_1.Grid, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: children }));
-};
-Grid.displayName = 'LincleInteractiveGrid';
-exports.default = Grid;

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

@@ -1 +0,0 @@
-export { Path as default } from '../../base';

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

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

package/dist/components/Pull/index.js

@@ -1,153 +0,0 @@
-"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 base_1 = require("../../base");
-const shared_1 = require("../../shared");
-const react_1 = require("react");
-const emptyTranslation = [
-    undefined,
-    undefined
-];
-const Pull = (_a, ref) => {
-    var _b, _c, _d, _e, _f, _g;
-    var { className = '', diagramId, height = 0, line: givenLine, markerEnd, markerStart, onDrag, path, shape: givenShape, sourceId, style, width = 0, x: givenX, y: givenY } = _a, additionalProps = __rest(_a, ["className", "diagramId", "height", "line", "markerEnd", "markerStart", "onDrag", "path", "shape", "sourceId", "style", "width", "x", "y"]);
-    const defaultLine = (_c = (_b = (0, react_1.useContext)(shared_1.GraphContext)) === null || _b === void 0 ? void 0 : _b.defaultSettings) === null || _c === void 0 ? void 0 : _c.line;
-    const defaultShape = (_e = (_d = (0, react_1.useContext)(shared_1.GraphContext)) === null || _d === void 0 ? void 0 : _d.defaultSettings) === null || _e === void 0 ? void 0 : _e.shape;
-    const line = (_f = givenLine !== null && givenLine !== void 0 ? givenLine : defaultLine) !== null && _f !== void 0 ? _f : shared_1.defaultSettings.line;
-    const shape = (_g = givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape) !== null && _g !== void 0 ? _g : shared_1.defaultSettings.shape;
-    const { x, y } = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d;
-        if (!(givenX || givenY)) {
-            const getNumber = /(-?\d+(\.\d+)?)/ug;
-            const [translateX, translateY] = ((_a = style === null || style === void 0 ? void 0 : style.pull) === null || _a === void 0 ? void 0 : _a.transform) ?
-                (_b = style.pull.transform.match(getNumber)) !== null && _b !== void 0 ? _b : emptyTranslation :
-                emptyTranslation;
-            const left = ((_c = style === null || style === void 0 ? void 0 : style.pull) === null || _c === void 0 ? void 0 : _c.left) ?
-                style.pull.left :
-                undefined;
-            const top = ((_d = style === null || style === void 0 ? void 0 : style.pull) === null || _d === void 0 ? void 0 : _d.top) ?
-                style.pull.top :
-                undefined;
-            return {
-                x: Number(translateX) || Number(left) || 0,
-                y: Number(translateY) || Number(top) || 0
-            };
-        }
-        return {
-            x: givenX !== null && givenX !== void 0 ? givenX : 0,
-            y: givenY !== null && givenY !== void 0 ? givenY : 0
-        };
-    }, [
-        givenX,
-        givenY,
-        style
-    ]);
-    const start = (0, react_1.useRef)({
-        x,
-        y
-    });
-    const position = (0, react_1.useRef)({
-        moved: false,
-        x,
-        y
-    });
-    position.current = {
-        moved: x !== start.current.x ||
-            y !== start.current.y,
-        x,
-        y
-    };
-    const adjustedStyle = (0, react_1.useMemo)(() => {
-        var _a;
-        const transform = ((_a = style === null || style === void 0 ? void 0 : style.pull) === null || _a === void 0 ? void 0 : _a.transform) ?
-            style.pull.transform :
-            `translate(${x}px, ${y}px)`;
-        return Object.assign(Object.assign(Object.assign({}, style), position.current.moved ?
-            undefined :
-            {
-                height,
-                width
-            }), { transform });
-    }, [
-        height,
-        style,
-        width,
-        x,
-        y
-    ]);
-    const source = (0, react_1.useMemo)(() => {
-        return {
-            height,
-            id: sourceId,
-            shape,
-            width,
-            x: start.current.x,
-            y: start.current.y
-        };
-    }, [
-        height,
-        shape,
-        sourceId,
-        width
-    ]);
-    const target = (0, react_1.useMemo)(() => {
-        return {
-            height: 0,
-            id: '',
-            shape: 'rectangle',
-            width: 0,
-            x,
-            y
-        };
-    }, [
-        x,
-        y
-    ]);
-    const markerId = (0, react_1.useMemo)(() => {
-        return diagramId ?
-            `${diagramId}-` :
-            '';
-    }, [
-        diagramId
-    ]);
-    const svg = (0, react_1.useMemo)(() => {
-        if (position.current.moved) {
-            if (path) {
-                return path('potential', source, target);
-            }
-            return ((0, jsx_runtime_1.jsx)(base_1.Path, { id: 'potential', line: line, markerEnd: markerEnd || diagramId ?
-                    `url(#diagram-${markerId}marker-arrow)` :
-                    undefined, markerStart: markerStart || diagramId ?
-                    `url(#diagram-${markerId}marker-circle)` :
-                    undefined, source: source, target: target }));
-        }
-        return null;
-    }, [
-        diagramId,
-        line,
-        markerEnd,
-        markerId,
-        markerStart,
-        path,
-        source,
-        target
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className} ${position.current.moved ?
-                    'lincle-interactive-moved' :
-                    'lincle-interactive-hidden'} lincle-interactive-drag`, onDrag: onDrag, ref: ref, style: adjustedStyle }, additionalProps)), (0, jsx_runtime_1.jsx)("svg", { className: position.current.moved ?
-                    '' :
-                    'lincle-interactive-hidden', children: svg })] }));
-};
-Pull.displayName = 'LincleInteractivePull';
-exports.default = (0, react_1.forwardRef)(Pull);