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

package/dist/components/Pull/index.js

@@ -0,0 +1,153 @@
+"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);

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+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 { default as Pull } from './Pull';

package/dist/components/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pull = 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; } });
+var Pull_1 = require("./Pull");
+Object.defineProperty(exports, "Pull", { enumerable: true, get: function () { return __importDefault(Pull_1).default; } });

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './shared';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+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 });
+__exportStar(require("./components"), exports);
+__exportStar(require("./shared"), exports);

package/dist/shared.d.ts

@@ -0,0 +1,48 @@
+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';
+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;
+    onSelect?: () => void;
+    onStart?: (event: DraggableEvent) => void;
+    onStop?: (event: DraggableEvent, data: DraggableData) => void;
+};
+export type GraphNodeControlProps = {
+    onNodeDrag?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
+    onNodeSelect?: (nodeId: number | string) => void;
+    onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
+    onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
+};
+export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
+    className?: string;
+    style?: {
+        pull?: CSSProperties;
+    };
+};
+export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
+    className?: string;
+    style?: {
+        node?: CSSProperties;
+        pull?: CSSProperties;
+    };
+};
+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 MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
+    readonly onDrag?: (event: DraggableEvent, data: DraggableData, position: Position) => void;
+};

package/dist/shared.js

@@ -0,0 +1,18 @@
+"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;
+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; } });

package/dist/styles.g.css

@@ -0,0 +1,162 @@
+/* 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;
+	cursor: cell;
+	touch-action: none;
+	user-select: none;
+}
+
+.lincle-interactive-graph:active {
+	cursor: all-scroll;
+}
+
+.lincle-interactive-transform {
+	transform-origin: 0 0;
+	will-change: transform;
+	backface-visibility: hidden;
+}
+
+/* Pull */
+
+.lincle-interactive-drag {
+	position: absolute;
+	z-index: 1;
+	transform-origin: 0 0;
+	cursor: grab;
+	will-change: transform;
+}
+
+.lincle-interactive-moved {
+	width: 200px;
+	height: 200px;
+	margin: -100px 0 0 -100px;
+}
+
+.lincle-interactive-drag:active {
+	cursor: grabbing;
+}
+
+.lincle-interactive-drag + svg {
+	position: absolute;
+	overflow: visible;
+	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;
+}
+
+@keyframes lincle-interactive-dash {
+	to {
+		stroke-dashoffset: 1000;
+	}
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+	"name": "@lincle/react-web-interactive",
+	"title": "lincle react web interactive",
+	"license": "LGPL-3.0-or-later",
+	"version": "0.4.0-next.1",
+	"private": false,
+	"description": "A 'reactive' React node and edge generator",
+	"author": "wallzero @wallzeroblog (http://wallzero.com)",
+	"contributors": [
+		{
+			"name": "Connor Schlesiger",
+			"email": "connor@schlesiger.ca",
+			"position": "Initial and Lead Developer"
+		}
+	],
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist/",
+		"COPYING.md",
+		"COPYING.LESSER.md"
+	],
+	"homepage": "https://gitlab.com//tree/master/packages/react-web-interactive/",
+	"repository": {
+		"type": "git",
+		"url": "https://gitlab.com/.git"
+	},
+	"bugs": {
+		"url": "https://gitlab.com//issues"
+	},
+	"scripts": {
+		"build": "run-s clean:dist build:prod build:styles",
+		"build:prod": "tsc -p ./tsconfig.json",
+		"build:watch": "run-s clean:dist build:prod build:styles build:watch:tsc",
+		"build:watch:tsc": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
+		"build:styles": "ncp src/styles.g.css dist/styles.g.css",
+		"----------------------------------------------------------------": "",
+		"build:prod:config": "",
+		"---------------------------------------------------------------": "",
+		"lint": "run-p lint:es",
+		"lint:es": "eslint --resolve-plugins-relative-to . 'src/**/*.[jt]s?(x)' --ignore-pattern 'src/**/*.(d.ts|json)'",
+		"clean": "run-s clean:dist clean:node_modules",
+		"clean:node_modules": "rimraf node_modules yarn.lock package-lock.json",
+		"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",
+		"@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",
+		"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"
+	},
+	"dependencies": {
+		"@lincle/react-interactive-shared": "^0.0.1",
+		"@lincle/react-shared": "^0.0.1",
+		"@lincle/react-web-base": "^0.0.1",
+		"react-draggable": "^4.4.6",
+		"react-map-interaction": "^2.1.0"
+	},
+	"peerDependencies": {
+		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+		"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+	},
+	"keywords": [
+		"library",
+		"lincle",
+		"typescript",
+		"react",
+		"reactjs",
+		"react-dom",
+		"react-web",
+		"reactive",
+		"react-draggable",
+		"interactive",
+		"graph",
+		"diagram",
+		"dag",
+		"acyclical graph",
+		"cyclical graph",
+		"dragndrop",
+		"drag"
+	]
+}