@lincle/react-web-interactive 0.4.0-next.17 → 0.4.0-next.18

package/dist/{components → cjs/components}/Node/PullNode/index.js

@@ -1,22 +1,20 @@
-"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_draggable_1 = require("react-draggable");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDiagramId, useNodePositions, useOnNodeEdgeDrop, useScale, useSetConnection } from '../../../shared';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { DraggableCore } from 'react-draggable';
 const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape = 'oval', sourceId, style, width = 0, x = 0, y = 0 }) => {
-    const diagramId = (0, shared_1.useDiagramId)();
-    const nodePositions = (0, shared_1.useNodePositions)();
-    const setConnection = (0, shared_1.useSetConnection)(sourceId);
-    const onNodeEdgeDrop = (0, shared_1.useOnNodeEdgeDrop)();
-    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
-    const scale = (0, shared_1.useScale)();
-    (0, react_1.useEffect)(() => {
+    const diagramId = useDiagramId();
+    const nodePositions = useNodePositions();
+    const setConnection = useSetConnection(sourceId);
+    const onNodeEdgeDrop = useOnNodeEdgeDrop();
+    const onEdgeDrop = givenOnEdgeDrop ?? onNodeEdgeDrop;
+    const scale = useScale();
+    useEffect(() => {
         return () => {
             setConnection();
         };
     }, []);
-    const handleStart = (0, react_1.useCallback)((event) => {
+    const handleStart = useCallback((event) => {
         event.stopPropagation();
         if (!disabled &&
             onStart) {
@@ -26,8 +24,7 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
         disabled,
         onStart
     ]);
-    const handleDrag = (0, react_1.useCallback)((event, data) => {
-        var _a, _b;
+    const handleDrag = useCallback((event, data) => {
         event.stopPropagation();
         if (!disabled) {
             setConnection({
@@ -45,8 +42,8 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
                     id: sourceId,
                     shape,
                     width: 0,
-                    x: (_a = data.x) !== null && _a !== void 0 ? _a : 0,
-                    y: (_b = data.y) !== null && _b !== void 0 ? _b : 0
+                    x: data.x ?? 0,
+                    y: data.y ?? 0
                 }
             });
             if (onDrag) {
@@ -65,7 +62,7 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
         x,
         y
     ]);
-    const handleStop = (0, react_1.useCallback)((event, data) => {
+    const handleStop = useCallback((event, data) => {
         event.stopPropagation();
         setConnection();
         if (onStop) {
@@ -87,10 +84,18 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
         setConnection,
         sourceId
     ]);
-    const viewStyle = (0, react_1.useMemo)(() => {
-        return Object.assign({ borderRadius: shape === 'oval' ?
+    const viewStyle = useMemo(() => {
+        return {
+            borderRadius: shape === 'oval' ?
                 50 :
-                undefined, height, left: x, position: 'absolute', top: y, width }, style);
+                undefined,
+            height,
+            left: x,
+            position: 'absolute',
+            top: y,
+            width,
+            ...style
+        };
     }, [
         height,
         shape,
@@ -99,10 +104,11 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
         x,
         y
     ]);
-    const nodeRef = (0, react_1.useRef)(null);
+    const nodeRef = useRef(null);
     return diagramId ?
-        (0, jsx_runtime_1.jsx)(react_draggable_1.DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: (0, jsx_runtime_1.jsx)("div", { className: className, ref: nodeRef, style: viewStyle }) }) :
+        _jsx(DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: _jsx("div", { className: className, ref: nodeRef, style: viewStyle }) }) :
         null;
 };
 PullNode.displayName = 'LincleInteractivePullNode';
-exports.default = PullNode;
+export default PullNode;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Node/PullNode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Node/PullNode/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Node/index.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useMode, useModeGiven, useMove, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, usePull, useSnap } from '../../shared';
+import MoveNode from './MoveNode';
+import PullNode from './PullNode';
+import { useCallback, useMemo, useRef } from 'react';
+const emptySnap = [
+    1,
+    1
+];
+const Node = ({ children, height: givenHeight, id, line: givenLine, mode: givenMode, move: givenMove, onDrag, onEdgeDrop: givenOnEdgeDrop, onSelect: givenOnSelect, onStart, onStop, pull: givenPull, shape: givenShape, style, width: givenWidth, x, y }) => {
+    const defaultHeight = useDefaultNodeHeight();
+    const defaultLine = useDefaultLine();
+    const defaultShape = useDefaultShape();
+    const defaultWidth = useDefaultNodeWidth();
+    const snap = useSnap();
+    const [snapX = 1, snapY = 1] = snap && Array.isArray(snap) ?
+        snap :
+        emptySnap;
+    const graphMode = useMode();
+    const graphGivenMode = useModeGiven();
+    const mode = givenMode ?? graphGivenMode ?? graphMode;
+    const graphMove = useMove();
+    const graphPull = usePull();
+    const onNodeDrag = useOnNodeDrag();
+    const onNodeEdgeDrop = useOnNodeEdgeDrop();
+    const onNodeSelect = useOnNodeSelect();
+    const onNodeStart = useOnNodeStart();
+    const onNodeStop = useOnNodeStop();
+    const move = givenMove ?? graphMove;
+    const pull = givenPull ?? graphPull;
+    const onEdgeDrop = givenOnEdgeDrop ?? onNodeEdgeDrop;
+    const onSelect = givenOnSelect ?? onNodeSelect;
+    const pullPosition = useRef({
+        x,
+        y
+    });
+    const { height, line, shape, width } = useMemo(() => {
+        return {
+            height: givenHeight ?? defaultHeight,
+            line: givenLine ?? defaultLine,
+            shape: givenShape ?? defaultShape,
+            width: givenWidth ?? defaultWidth
+        };
+    }, [
+        defaultHeight,
+        defaultLine,
+        defaultShape,
+        defaultWidth,
+        givenHeight,
+        givenLine,
+        givenShape,
+        givenWidth
+    ]);
+    const handleOnStart = useCallback((event) => {
+        if (onStart) {
+            onStart(event);
+        }
+        else if (onNodeStart) {
+            onNodeStart(event, id);
+        }
+    }, [
+        id,
+        onNodeStart,
+        onStart
+    ]);
+    const handleOnDrag = useCallback((event, data) => {
+        if (onDrag) {
+            onDrag(event, data);
+        }
+        else if (onNodeDrag) {
+            onNodeDrag(event, id, data);
+        }
+    }, [
+        id,
+        onDrag,
+        onNodeDrag
+    ]);
+    const handleOnStop = useCallback((event, data) => {
+        if (onStop) {
+            onStop(event, data);
+        }
+        else if (onNodeStop) {
+            onNodeStop(event, id, data);
+        }
+    }, [
+        id,
+        onNodeStop,
+        onStop
+    ]);
+    const handleMoveStart = useCallback((event) => {
+        handleOnStart(event);
+    }, [
+        handleOnStart
+    ]);
+    const handleMoveDrag = useCallback((event, data, position) => {
+        pullPosition.current = {
+            x: position.x,
+            y: position.y
+        };
+        handleOnDrag(event, data);
+    }, [
+        handleOnDrag
+    ]);
+    const handleMoveStop = useCallback((event, data) => {
+        handleOnStop(event, data);
+    }, [
+        handleOnStop
+    ]);
+    const pullNode = useMemo(() => {
+        return mode === 'pull' && pull ?
+            _jsx(PullNode, { height: height, line: line, mode: mode, onEdgeDrop: onEdgeDrop, shape: shape, sourceId: id, style: style, width: width, x: pullPosition.current.x, y: pullPosition.current.y }) :
+            null;
+    }, [
+        mode
+    ]);
+    const snapper = useMemo(() => {
+        return {
+            x: Math.ceil((x ?? 0) / snapX) * snapX,
+            y: Math.ceil((y ?? 0) / snapY) * snapY
+        };
+    }, [
+        snapX,
+        snapY,
+        x,
+        y
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(MoveNode, { disabled: mode === 'pull' ?
+                    true :
+                    !move, height: height, id: id, mode: mode, onDrag: handleMoveDrag, onSelect: onSelect, onStart: handleMoveStart, onStop: handleMoveStop, shape: shape, snap: snap, style: style, width: width, x: snapper.x, y: snapper.y, children: children }), pullNode] }));
+};
+Node.displayName = 'LincleInteractiveNode';
+export { Node };
+export { default as MoveNode } from './MoveNode';
+export { default as PullNode } from './PullNode';
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Node/index.tsx"],"names":[],"mappings":"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"}

package/dist/{components → cjs/components}/Nodes/Interaction/index.js

@@ -1,22 +1,20 @@
-"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");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModeGiven, useOnMode, useScale, useTranslate } from '../../../shared';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 const Interaction = ({ children }) => {
-    const scale = (0, shared_1.useScale)();
-    const translate = (0, shared_1.useTranslate)();
-    const givenMode = (0, shared_1.useModeGiven)();
-    const onMode = (0, shared_1.useOnMode)();
-    const keypress = (0, react_1.useRef)(false);
-    const handleMode = (0, react_1.useCallback)((changedMode) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    const givenMode = useModeGiven();
+    const onMode = useOnMode();
+    const keypress = useRef(false);
+    const handleMode = useCallback((changedMode) => {
         if (onMode) {
             onMode(changedMode);
         }
     }, [
         onMode
     ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (givenMode) {
             return () => {
             };
@@ -50,7 +48,7 @@ const Interaction = ({ children }) => {
         givenMode,
         handleMode
     ]);
-    const style = (0, react_1.useMemo)(() => {
+    const style = useMemo(() => {
         const { x, y } = translate;
         return {
             transform: `translateX(${x / scale}px) translateY(${y / scale}px)`,
@@ -60,7 +58,8 @@ const Interaction = ({ children }) => {
         scale,
         translate
     ]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
+    return (_jsx("div", { className: 'lincle-interactive-graph', children: _jsx("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
 };
 Interaction.displayName = 'LincleInteractiveInteraction';
-exports.default = Interaction;
+export default Interaction;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Nodes/Interaction/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Nodes/Interaction/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,YAAY,EACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAGL,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,GAAiD,CAAC,EACjE,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAAqB,EAAE,EAAE;QACxB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,WAAW,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD;QACE,MAAM;KACP,CACF,CAAC;IAEF,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,GAAS,EAAE;YAElB,CAAC,CAAC;QACJ,CAAC;QAED,MAAM,SAAS,GAAG,CAChB,KAAoB,EACd,EAAE;YACR,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YAExB,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnB,UAAU,CAAC,MAAM,CAAC,CAAC;YACrB,CAAC;iBAAM,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBACzB,UAAU,CAAC,QAAQ,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,KAAoB,EACd,EAAE;YACR,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;YAEzB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACpB,UAAU,CAAC,MAAM,CAAC,CAAC;YACrB,CAAC;iBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAC1B,UAAU,CAAC,MAAM,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CACrB,SAAS,EACT,SAAS,CACV,CAAC;QAEF,MAAM,CAAC,gBAAgB,CACrB,OAAO,EACP,OAAO,CACR,CAAC;QAEF,OAAO,GAAS,EAAE;YAChB,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;YAEzB,MAAM,CAAC,mBAAmB,CACxB,SAAS,EACT,SAAS,CACV,CAAC;YAEF,MAAM,CAAC,mBAAmB,CACxB,OAAO,EACP,OAAO,CACR,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,EACD;QACE,SAAS;QACT,UAAU;KACX,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE;QACH,MAAM,EACJ,CAAC,EACD,CAAC,EACF,GAAG,SAAS,CAAC;QAEd,OAAO;YAEL,SAAS,EAAE,cAAc,CAAC,GAAG,KAAK,kBAAkB,CAAC,GAAG,KAAK,KAAK;YAElE,IAAI,EAAE,KAAK;SACZ,CAAC;IACJ,CAAC,EACD;QACE,KAAK;QACL,SAAS;KACV,CACF,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAC,0BAA0B,YAEpC,cACE,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE,KAAK,YAEX,QAAQ,GACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,8BAA8B,CAAC;AAEzD,eAAe,WAAW,CAAC"}

package/dist/cjs/components/Nodes/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Nodes as BaseNodes } from '../../base';
+import Interaction from './Interaction';
+const Nodes = ({ children, ...props }) => {
+    return (_jsx(Interaction, { children: _jsx(BaseNodes, { ...props, children: children }) }));
+};
+Nodes.displayName = 'LincleInteractiveNodes';
+export { Nodes };
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Nodes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Nodes/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,IAAI,SAAS,EACnB,MAAM,YAAY,CAAC;AAIpB,OAAO,WAAW,MAAM,eAAe,CAAC;AAKxC,MAAM,KAAK,GAAkC,CAAC,EAC5C,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,WAAW,cACV,KAAC,SAAS,OACJ,KAAK,YAER,QAAQ,GACC,GACA,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAE7C,OAAO,EACL,KAAK,EACN,CAAC"}

package/dist/cjs/components/index.js

@@ -0,0 +1,6 @@
+export * from './Edge';
+export * from './Edges';
+export * from './Graph';
+export * from './Node';
+export * from './Nodes';
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './shared';
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/dist/cjs/shared.js

@@ -0,0 +1,3 @@
+export { 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';
+//# sourceMappingURL=shared.js.map

package/dist/cjs/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/shared.ts"],"names":[],"mappings":"AAmHA,OAAO,EASL,SAAS,EACT,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,aAAa,EACb,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,OAAO,EACR,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,KAAK,IAAI,SAAS,EACnB,MAAM,wBAAwB,CAAC"}

package/dist/esm/base.js

@@ -0,0 +1,2 @@
+export { Edge, Edges, Graph, Grid, Node, Nodes, Path } from '@lincle/react-web-base';
+//# sourceMappingURL=base.js.map

package/dist/esm/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/base.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACL,MAAM,wBAAwB,CAAC"}

package/dist/esm/components/Edge/Path/index.js

@@ -0,0 +1,2 @@
+export { Path as default } from '../../../base';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Edge/Path/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Edge/Path/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,IAAI,OAAO,EAChB,MAAM,eAAe,CAAC"}

package/dist/esm/components/Edge/index.js

@@ -0,0 +1,3 @@
+export { Edge } from '../../base';
+export { default as Path } from './Path';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Edge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Edge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,OAAO,IAAI,IAAI,EAChB,MAAM,QAAQ,CAAC"}

package/dist/esm/components/Edges/Connections/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useConnections } from '../../../shared';
+import { Path } from '../../Edge';
+import { useMemo } from 'react';
+const Connections = ({ scale = 1, translate = {
+    x: 0,
+    y: 0
+} }) => {
+    const connections = useConnections();
+    const paths = useMemo(() => {
+        return Object.keys(connections).map((sourceId) => {
+            const { line, source, target } = connections[sourceId] ?? {};
+            if (!source ||
+                !target) {
+                return null;
+            }
+            return (_jsx(Path, { edgeId: sourceId + 'temp', isConnecting: {
+                    x: target.x,
+                    y: target.y
+                }, line: line, source: source, target: target }, sourceId));
+        });
+    }, [
+        connections
+    ]);
+    const style = useMemo(() => {
+        const tx = translate.x;
+        const ty = translate.y;
+        const tz = scale;
+        const transform = `translateX(${tx}px) translateY(${ty}px) scale(${tz})`;
+        return {
+            transform,
+            transformOrigin: 'top left',
+            zIndex: 1
+        };
+    }, [
+        translate.x,
+        translate.y,
+        scale
+    ]);
+    return (_jsx("svg", { className: 'lincle-base-edges', style: style, children: paths }));
+};
+Connections.displayName = 'LincleInteractiveConnections';
+export default Connections;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Edges/Connections/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Edges/Connections/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,cAAc,EACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,IAAI,EACL,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,GAAG,CAAC,EACT,SAAS,GAAG;IACV,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,EACF,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE;QACH,OAAO,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CACjC,CACE,QAAQ,EACR,EAAE;YACF,MAAM,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACP,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YAEhC,IACE,CAAC,MAAM;gBACP,CAAC,MAAM,EACP,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC;YAED,OAAO,CACL,KAAC,IAAI,IACH,MAAM,EAAE,QAAQ,GAAG,MAAM,EACzB,YAAY,EAAE;oBACZ,CAAC,EAAE,MAAM,CAAC,CAAC;oBACX,CAAC,EAAE,MAAM,CAAC,CAAC;iBACZ,EAED,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,IAHT,QAAQ,CAIb,CACH,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE;QACH,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC;QACvB,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC;QACvB,MAAM,EAAE,GAAG,KAAK,CAAC;QAEjB,MAAM,SAAS,GAAG,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,GAAG,CAAC;QAEzE,OAAO;YACL,SAAS;YACT,eAAe,EAAE,UAAU;YAC3B,MAAM,EAAE,CAAC;SACV,CAAC;IACJ,CAAC,EACD;QACE,SAAS,CAAC,CAAC;QACX,SAAS,CAAC,CAAC;QACX,KAAK;KACN,CACF,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE,KAAK,YAEX,KAAK,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,8BAA8B,CAAC;AAEzD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edges as BaseEdges } from '../../base';
+import { useScale, useTranslate } from '../../shared';
+import Connections from './Connections';
+const Edges = ({ children, ...props }) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdges, { scale: scale, translate: translate, ...props, children: children }), _jsx(Connections, { scale: scale, translate: translate })] }));
+};
+Edges.displayName = 'LincleInteractiveEdges';
+export { Edges };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Edges/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Edges/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,IAAI,SAAS,EACnB,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,QAAQ,EACR,YAAY,EACb,MAAM,cAAc,CAAC;AACtB,OAAO,WAAW,MAAM,eAAe,CAAC;AAKxC,MAAM,KAAK,GAAkC,CAAC,EAC5C,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,8BACE,KAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,KAChB,KAAK,YAER,QAAQ,GACC,EACZ,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,GACpB,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAE7C,OAAO,EACL,KAAK,EACN,CAAC"}

package/dist/esm/components/Graph/Grid/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid as GridBase } from '../../../base';
+import { useMode, useScale, useTranslate } from '../../../shared';
+import { useMemo } from 'react';
+const WIDTH = 0.4;
+const Grid = ({ children }) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    const mode = useMode();
+    const line = useMemo(() => {
+        const t1 = 1 + scale;
+        const t2 = 4 * scale;
+        return (_jsx("line", { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t1, y2: t2 }));
+    }, [
+        scale
+    ]);
+    const plus = useMemo(() => {
+        const t1 = scale;
+        const t2 = 4 * scale;
+        return (_jsxs(_Fragment, { children: [_jsx("line", { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t2, y2: t2 }), _jsx("line", { stroke: 'black', strokeWidth: WIDTH, x1: t2, x2: t2, y1: t1, y2: t2 })] }));
+    }, [
+        scale
+    ]);
+    const circle = useMemo(() => {
+        const t2 = 4 * scale;
+        return (_jsx("circle", { cx: t2, cy: t2, fill: 'black', r: WIDTH }));
+    }, [
+        scale
+    ]);
+    const child = useMemo(() => {
+        if (!children) {
+            switch (mode) {
+                case 'move': {
+                    return circle;
+                }
+                case 'pull': {
+                    return line;
+                }
+                case 'select': {
+                    return plus;
+                }
+            }
+        }
+        return children;
+    }, [
+        children,
+        circle,
+        line,
+        mode,
+        plus
+    ]);
+    return (_jsx(GridBase, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: child }));
+};
+Grid.displayName = 'LincleInteractiveGrid';
+export default Grid;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Graph/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Graph/Grid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,IAAI,QAAQ,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,OAAO,EACP,QAAQ,EACR,YAAY,EACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,KAAK,GAAG,GAAG,CAAC;AAElB,MAAM,IAAI,GAAiC,CAAC,EAC1C,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE;QACH,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;QACrB,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;QAErB,OAAO,CACL,eACE,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,GACN,CACH,CAAC;IACJ,CAAC,EACD;QACE,KAAK;KACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE;QACH,MAAM,EAAE,GAAG,KAAK,CAAC;QACjB,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;QAErB,OAAO,CACL,8BACE,eACE,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,GACN,EACF,eACE,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,KAAK,EAClB,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,GACN,IACD,CACJ,CAAC;IACJ,CAAC,EACD;QACE,KAAK;KACN,CACF,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;QACH,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;QAErB,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,CAAC,EAAE,KAAK,GACR,CACH,CAAC;IACJ,CAAC,EACD;QACE,KAAK;KACN,CACF,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAEnB,GAAG,EAAE;QACH,IAAI,CAAC,QAAQ,EAAE,CAAC;YAEd,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM,CAAC,CAAC,CAAC;oBACZ,OAAO,MAAM,CAAC;gBAChB,CAAC;gBAED,KAAK,MAAM,CAAC,CAAC,CAAC;oBACZ,OAAO,IAAI,CAAC;gBACd,CAAC;gBAED,KAAK,QAAQ,CAAC,CAAC,CAAC;oBACd,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,QAAQ,CAAC;IAClB,CAAC,EACD;QACE,QAAQ;QACR,MAAM;QACN,IAAI;QACJ,IAAI;QACJ,IAAI;KACL,CACF,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,CAAC,CAAC,EACpB,OAAO,EAAE,SAAS,CAAC,CAAC,YAEnB,KAAK,GACG,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAE3C,eAAe,IAAI,CAAC"}

package/dist/esm/components/Graph/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GraphBase, Providers } from '../../shared';
+import Interaction from '../Interaction';
+import Grid from './Grid';
+const Graph = ({ children, edgeFrequency, grid, id, line, maxScale, minScale, mode, move, nodeFrequency, nodeHeight, nodeWidth, onNodeDrag, onNodeEdgeDrop, onNodeSelect, onNodeStart, onNodeStop, onScale, onTranslate, pan, pull, scale, shape, showGrid, snap, translate, zoom }) => {
+    if (!id) {
+        console.error('No ID provided to @lincle/interactive Graph!');
+        return null;
+    }
+    const gird = showGrid === false ?
+        null :
+        _jsx(Grid, {});
+    return (_jsx(GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: _jsxs(Providers, { maxScale: maxScale, minScale: minScale, mode: mode, move: move, onNodeDrag: onNodeDrag, onNodeEdgeDrop: onNodeEdgeDrop, onNodeSelect: onNodeSelect, onNodeStart: onNodeStart, onNodeStop: onNodeStop, onScale: onScale, onTranslate: onTranslate, pan: pan, pull: pull, scale: scale, snap: snap, translate: translate, zoom: zoom, children: [gird, _jsx(Interaction, {}), children] }) }));
+};
+Graph.displayName = 'LincleInteractiveGraph';
+export { Graph };
+export { default as Grid } from './Grid';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Graph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Graph/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,MAAM,QAAQ,CAAC;AAK1B,MAAM,KAAK,GAAkC,CAAC,EAC5C,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,EACX,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,EACH,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,IAAI,EACL,EAAE,EAAE;IACH,IACE,CAAC,EAAE,EACH,CAAC;QAED,OAAO,CAAC,KAAK,CAAC,8CAA8C,CAAC,CAAC;QAE9D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,IAAI,GAAG,QAAQ,KAAK,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,CAAC;QACN,KAAC,IAAI,KAAG,CAAC;IAEX,OAAO,CACL,KAAC,SAAS,IACR,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,YAEf,MAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,aAET,IAAI,EACL,KAAC,WAAW,KAAG,EACd,QAAQ,IACC,GACF,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAE7C,OAAO,EACL,KAAK,EACN,CAAC;AAEF,OAAO,EACL,OAAO,IAAI,IAAI,EAChB,MAAM,QAAQ,CAAC"}