@lincle/react-web-interactive 0.4.0-next.3 → 0.4.0-next.4

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

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

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

@@ -4,7 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../../shared");
 const Edge_1 = require("../../Edge");
 const react_1 = require("react");
-const Connections = () => {
+const Connections = ({ scale = 1, translate = {
+    x: 0,
+    y: 0
+} }) => {
     const connections = (0, shared_1.useConnections)();
     const paths = (0, react_1.useMemo)(() => {
         return Object.keys(connections).map((sourceId) => {
@@ -14,7 +17,21 @@ const Connections = () => {
     }, [
         connections
     ]);
-    return ((0, jsx_runtime_1.jsx)("svg", { className: 'lincle-interactive-connection', children: paths }));
+    const style = (0, react_1.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'
+        };
+    }, [
+        translate.x,
+        translate.y,
+        scale
+    ]);
+    return ((0, jsx_runtime_1.jsx)("svg", { className: 'lincle-base-edges', style: style, children: paths }));
 };
 Connections.displayName = 'LincleInteractiveConnections';
 exports.default = Connections;

package/dist/components/Edges/index.js

@@ -17,10 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Edges = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const base_1 = require("../../base");
+const shared_1 = require("../../shared");
 const Connections_1 = __importDefault(require("./Connections"));
 const Edges = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsxs)(base_1.Edges, Object.assign({}, props, { children: [children, (0, jsx_runtime_1.jsx)(Connections_1.default, {})] })));
+    const scale = (0, shared_1.useScale)();
+    const translate = (0, shared_1.useTranslate)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(base_1.Edges, Object.assign({ scale: scale, translate: translate }, props, { children: children })), (0, jsx_runtime_1.jsx)(Connections_1.default, { scale: scale, translate: translate })] }));
 };
 exports.Edges = Edges;
 Edges.displayName = 'LincleInteractiveEdges';

package/dist/components/{Interaction → Nodes/Interaction}/index.d.ts

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

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Interaction = void 0;
 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_map_interaction_1 = require("react-map-interaction");
 const CLICK_TIME = 500;
@@ -38,8 +37,8 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
     const graphMode = (0, shared_1.useMode)();
     const givenMode = (0, shared_1.useModeGiven)();
     const onMode = (0, shared_1.useOnMode)();
-    const maxScale = (0, shared_1.useMinScale)();
-    const minScale = (0, shared_1.useMaxScale)();
+    const maxScale = (0, shared_1.useMaxScale)();
+    const minScale = (0, shared_1.useMinScale)();
     const pan = (0, shared_1.usePan)();
     const zoom = (0, shared_1.useZoom)();
     const keypress = (0, react_1.useRef)(false);
@@ -184,9 +183,17 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         scale,
         translate
     ]);
-    return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: () => {
-            return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
-        } }));
+    const child = (0, react_1.useCallback)(() => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
+    }, [
+        children,
+        handleMouseDown,
+        handleMouseUp,
+        handleTouchEnd,
+        handleTouchStart,
+        style
+    ]);
+    return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: child }));
 };
-exports.Interaction = Interaction;
 Interaction.displayName = 'LincleInteractiveInteraction';
+exports.default = Interaction;

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

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

package/dist/components/Nodes/index.js

@@ -1,5 +1,26 @@
 "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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nodes = void 0;
-var base_1 = require("../../base");
-Object.defineProperty(exports, "Nodes", { enumerable: true, get: function () { return base_1.Nodes; } });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("../../base");
+const Interaction_1 = __importDefault(require("./Interaction"));
+const Nodes = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Interaction_1.default, { children: (0, jsx_runtime_1.jsx)(base_1.Nodes, Object.assign({}, props, { children: children })) }));
+};
+exports.Nodes = Nodes;
+Nodes.displayName = 'LincleInteractiveNodes';

package/dist/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './Edge';
 export * from './Edges';
 export * from './Graph';
-export * from './Interaction';
 export * from './Node';
 export * from './Nodes';

package/dist/components/index.js

@@ -17,6 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Edge"), exports);
 __exportStar(require("./Edges"), exports);
 __exportStar(require("./Graph"), exports);
-__exportStar(require("./Interaction"), exports);
 __exportStar(require("./Node"), exports);
 __exportStar(require("./Nodes"), exports);

package/dist/shared.d.ts

@@ -40,5 +40,5 @@ export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveN
     readonly onDrag?: (event: DraggableEvent, data: DraggableData, position: Position) => void;
 };
 export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & InteractionProps & GraphNodeControlProps;
-export { type DraggableData, type EdgeNodeProps, type EdgesProps, type GridProps, type ModeType, 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 { 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/styles.g.css

@@ -1,116 +1,3 @@
-/* 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;
-	pointer-events: none;
-}
-
-.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;
-	pointer-events: none;
-}
-
-.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: 8px;
-	stroke-linecap: square;
-	stroke: black;
-	opacity: 0;
-	pointer-events: all;
-}
-
-.lincle-interactive-drag + svg > path {
-	animation: lincle-interactive-dash 20s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.lincle-base-edge-path-border:hover + path {
-	animation: lincle-base-edgedash 1.5s linear reverse infinite;
-	stroke-dasharray: 5 5;
-}
-
-.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 {
@@ -135,11 +22,6 @@
 
 /* Pull */
 
-.lincle-interactive-connection {
-	position: absolute;
-	overflow: visible;
-}
-
 .lincle-interactive-drag {
 	position: absolute;
 	z-index: 1;

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.3",
+	"version": "0.4.0-next.4",
 	"private": false,
 	"description": "A 'reactive' React node and edge generator",
 	"author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -53,7 +53,7 @@
 		"@digest/stylelint-config": "^4.4.3",
 		"@digest/typescript": "^4.4.3",
 		"@types/jest": "^29.5.12",
-		"@types/node": "^20.14.11",
+		"@types/node": "^22.0.0",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@types/react-test-renderer": "^18.3.0",
@@ -68,9 +68,9 @@
 		"rimraf": "^6.0.1"
 	},
 	"dependencies": {
-		"@lincle/react-interactive-shared": "^0.4.0-next.3",
-		"@lincle/react-shared": "^0.4.0-next.3",
-		"@lincle/react-web-base": "^0.4.0-next.3",
+		"@lincle/react-interactive-shared": "^0.4.0-next.4",
+		"@lincle/react-shared": "^0.4.0-next.4",
+		"@lincle/react-web-base": "^0.4.0-next.4",
 		"react-draggable": "^4.4.6",
 		"react-map-interaction": "^2.1.0"
 	},
@@ -97,5 +97,5 @@
 		"dragndrop",
 		"drag"
 	],
-	"gitHead": "0d9cda53a8175e6d2a64d7b3b81828fc98007bfb"
+	"gitHead": "6bbaaf166913673c8990505ea8de66a0587ce372"
 }