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

package/dist/components/Interaction/index.js

@@ -0,0 +1,202 @@
+"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_map_interaction_1 = require("react-map-interaction");
+const CLICK_TIME = 500;
+const PRESS_TIME = 350;
+const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
+    const { givenMode, onMode } = (0, react_1.useContext)(shared_1.ModeContext);
+    const { onNodeSelect } = (0, react_1.useContext)(shared_1.NodeContext);
+    const { disablePan, disableScale, maxScale, minScale } = (0, react_1.useContext)(shared_1.TransformContext);
+    const { onScale, scale } = (0, react_1.useContext)(shared_1.ScaleContext);
+    const { onTranslate, translate } = (0, react_1.useContext)(shared_1.TranslateContext);
+    const clickTimeout = (0, react_1.useRef)();
+    const pressTimeout = (0, react_1.useRef)();
+    const keypress = (0, react_1.useRef)(false);
+    const privateMode = (0, react_1.useRef)(givenMode);
+    const handleMode = (0, react_1.useCallback)((mode) => {
+        if (onMode &&
+            privateMode.current !== mode) {
+            privateMode.current = mode;
+            onMode(mode);
+        }
+    }, [
+        onMode
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (givenMode) {
+            return () => {
+            };
+        }
+        const onKeyDown = (event) => {
+            keypress.current = true;
+            if (event.shiftKey) {
+                handleMode('pull');
+            }
+            else if (event.ctrlKey) {
+                handleMode('select');
+            }
+        };
+        const onKeyUp = (event) => {
+            keypress.current = false;
+            if (!event.shiftKey) {
+                handleMode('move');
+            }
+            else if (!event.ctrlKey) {
+                handleMode('move');
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return () => {
+            keypress.current = false;
+            if (clickTimeout.current) {
+                clearTimeout(clickTimeout.current);
+            }
+            if (pressTimeout.current) {
+                clearTimeout(pressTimeout.current);
+            }
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+        };
+    }, [
+        givenMode,
+        handleMode
+    ]);
+    const defaultTranslation = (0, react_1.useMemo)(() => {
+        return {
+            x: Math.round(translate.x),
+            y: Math.round(translate.y)
+        };
+    }, []);
+    const handleChange = (0, react_1.useCallback)(({ scale: z, translation: { x, y } }) => {
+        if (pressTimeout.current) {
+            clearTimeout(pressTimeout.current);
+            pressTimeout.current = undefined;
+        }
+        if (clickTimeout.current) {
+            clearTimeout(clickTimeout.current);
+            clickTimeout.current = undefined;
+        }
+        if (onTranslate) {
+            onTranslate({
+                x,
+                y
+            });
+        }
+        if (onScale) {
+            onScale(z);
+        }
+    }, [
+        onScale,
+        onTranslate
+    ]);
+    const handlePressStart = (0, react_1.useCallback)(() => {
+        if (!givenMode &&
+            onNodeSelect &&
+            !clickTimeout.current) {
+            pressTimeout.current = setTimeout(() => {
+                pressTimeout.current = undefined;
+                handleMode('select');
+            }, PRESS_TIME);
+        }
+    }, [
+        givenMode,
+        handleMode,
+        onNodeSelect
+    ]);
+    const handleTapStart = (0, react_1.useCallback)(() => {
+        if (!givenMode) {
+            if (clickTimeout.current) {
+                clearTimeout(clickTimeout.current);
+                clickTimeout.current = setTimeout(() => {
+                    clickTimeout.current = undefined;
+                    handleMode('pull');
+                }, PRESS_TIME);
+            }
+            else {
+                clickTimeout.current = setTimeout(() => {
+                    clickTimeout.current = undefined;
+                }, CLICK_TIME);
+            }
+        }
+    }, [
+        givenMode,
+        handleMode
+    ]);
+    const handleTapEnd = (0, react_1.useCallback)(() => {
+        if (!givenMode) {
+            if (pressTimeout.current) {
+                clearTimeout(pressTimeout.current);
+                pressTimeout.current = undefined;
+            }
+            handleMode('move');
+        }
+    }, [
+        givenMode,
+        handleMode
+    ]);
+    const handleMouseDown = (0, react_1.useCallback)((event) => {
+        if (onMouseDown) {
+            onMouseDown(event);
+        }
+    }, [
+        onMouseDown
+    ]);
+    const handleMouseUp = (0, react_1.useCallback)((event) => {
+        if (onMouseUp) {
+            onMouseUp(event);
+        }
+    }, [
+        onMouseUp
+    ]);
+    const handleTouchStart = (0, react_1.useCallback)((event) => {
+        if (keypress.current === false) {
+            handlePressStart();
+            handleTapStart();
+        }
+        if (onTouchStart) {
+            onTouchStart(event);
+        }
+    }, [
+        handlePressStart,
+        handleTapStart,
+        onTouchStart
+    ]);
+    const handleTouchEnd = (0, react_1.useCallback)((event) => {
+        if (keypress.current === false) {
+            handleTapEnd();
+        }
+        if (onTouchEnd) {
+            onTouchEnd(event);
+        }
+    }, [
+        handleTapEnd,
+        onTouchEnd
+    ]);
+    const transform = (0, react_1.useMemo)(() => {
+        return {
+            scale,
+            translation: translate
+        };
+    }, [
+        scale,
+        translate
+    ]);
+    const style = (0, react_1.useMemo)(() => {
+        const { x, y } = translate;
+        return {
+            transform: `translateX(${x}px) translateY(${y}px) scale(${scale}) translateZ(0)`
+        };
+    }, [
+        scale,
+        translate
+    ]);
+    return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: disablePan, disableZoom: disableScale, 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 }) }));
+        } }));
+};
+Interaction.displayName = 'LincleInteractiveInteraction';
+exports.default = Interaction;

package/dist/components/Node/MoveNode/index.d.ts

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

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

@@ -0,0 +1,164 @@
+"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 react_draggable_1 = require("react-draggable");
+const PRESS_TIME = 500;
+const emptySnap = [
+    1,
+    1
+];
+const MoveNode = ({ children, className, disabled, height, id, mode, onDrag, onSelect, onStart, onStop, shape, snap, style, width, x, y }) => {
+    const { scale } = (0, react_1.useContext)(shared_1.ScaleContext);
+    const [snapX, snapY] = snap !== null && snap !== void 0 ? snap : emptySnap;
+    const [position, setPosition] = (0, react_1.useState)({
+        x,
+        y
+    });
+    const mouseDown = (0, react_1.useRef)(false);
+    const initialPos = (0, react_1.useRef)(position);
+    if (!mouseDown.current && (x !== initialPos.current.x ||
+        y !== initialPos.current.y) && (x !== position.x ||
+        y !== position.y)) {
+        setPosition({
+            x,
+            y
+        });
+    }
+    const pos = (0, react_1.useRef)(position);
+    const snapped = (0, react_1.useRef)(position);
+    snapped.current = position;
+    const moved = (0, react_1.useRef)(false);
+    const press = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (press.current) {
+                clearTimeout(press.current);
+            }
+        };
+    }, []);
+    const handleOnSelect = (0, react_1.useCallback)(() => {
+        if (onSelect) {
+            onSelect(id);
+        }
+    }, [
+        id,
+        onSelect
+    ]);
+    const handlePressStart = (0, react_1.useCallback)(() => {
+        if (mode !== 'select' &&
+            !press.current) {
+            press.current = setTimeout(() => {
+                handleOnSelect();
+                press.current = undefined;
+            }, PRESS_TIME);
+        }
+    }, [
+        handleOnSelect,
+        mode
+    ]);
+    const handlePressStop = (0, react_1.useCallback)(() => {
+        if (press.current) {
+            clearTimeout(press.current);
+            press.current = undefined;
+        }
+    }, []);
+    const handleStart = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        mouseDown.current = true;
+        if (onSelect) {
+            handlePressStart();
+        }
+        if (onStart) {
+            onStart(event);
+        }
+    }, [
+        handlePressStart,
+        onSelect,
+        onStart
+    ]);
+    const handleDrag = (0, react_1.useCallback)((event, data) => {
+        event.stopPropagation();
+        const currentX = pos.current.x;
+        const currentY = pos.current.y;
+        if (!disabled &&
+            (currentX || currentX === 0) &&
+            (currentY || currentY === 0)) {
+            if (onSelect) {
+                handlePressStop();
+            }
+            pos.current = {
+                x: currentX + data.deltaX,
+                y: currentY + data.deltaY
+            };
+            const adjustedPosition = {
+                x: Math.floor((currentX + snapX / 2) / snapX) * snapX,
+                y: Math.floor((currentY + snapY / 2) / snapY) * snapY
+            };
+            setPosition(adjustedPosition);
+            if (onDrag) {
+                onDrag(event, Object.assign(Object.assign({}, data), adjustedPosition), snapped.current);
+            }
+            if (moved.current === false) {
+                moved.current = true;
+            }
+        }
+    }, [
+        disabled,
+        handlePressStop,
+        onDrag,
+        onSelect,
+        snapX,
+        snapY
+    ]);
+    const handleStop = (0, react_1.useCallback)((event, data) => {
+        mouseDown.current = false;
+        if (onSelect && !press.current ||
+            mode === 'select' ||
+            moved.current) {
+            event.stopPropagation();
+        }
+        if (!disabled) {
+            if (moved.current === false &&
+                mode === 'select') {
+                handleOnSelect();
+            }
+            if (onSelect) {
+                handlePressStop();
+            }
+            const addX = snapped.current.x || snapped.current.x === 0 ?
+                snapped.current.x + data.deltaX :
+                0;
+            const addY = snapped.current.y || snapped.current.y === 0 ?
+                snapped.current.y + data.deltaY :
+                0;
+            const adjustedPosition = {
+                x: addX - addX % snapX,
+                y: addY - addY % snapY
+            };
+            setPosition({
+                x: adjustedPosition.x,
+                y: adjustedPosition.y
+            });
+            if (onStop) {
+                onStop(event, Object.assign(Object.assign({}, data), adjustedPosition));
+            }
+            moved.current = false;
+        }
+    }, [
+        disabled,
+        handleOnSelect,
+        handlePressStop,
+        mode,
+        onSelect,
+        onStop,
+        snapX,
+        snapY
+    ]);
+    const nodeRef = (0, react_1.useRef)(null);
+    return ((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)(base_1.Node, { className: className, height: height, id: id, ref: nodeRef, shape: shape, style: style, width: width, x: position.x, y: position.y, children: children }) }));
+};
+MoveNode.displayName = 'LincleInteractiveMoveNode';
+exports.default = MoveNode;

package/dist/components/Node/PullNode/index.d.ts

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

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

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../shared");
+const Pull_1 = __importDefault(require("../../Pull"));
+const react_1 = require("react");
+const react_draggable_1 = require("react-draggable");
+const PullNode = ({ className, disabled, height, line, onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape, sourceId, style, width, x, y }) => {
+    var _a, _b;
+    const diagramId = (_a = (0, react_1.useContext)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
+    const nodePositions = (_b = (0, react_1.useContext)(shared_1.GraphContext)) === null || _b === void 0 ? void 0 : _b.nodePositions;
+    const { onEdgeDrop: defaultOnEdgeDrop } = (0, react_1.useContext)(shared_1.NodeContext);
+    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : defaultOnEdgeDrop;
+    const { scale } = (0, react_1.useContext)(shared_1.ScaleContext);
+    const [position, setPosition] = (0, react_1.useState)({
+        x,
+        y
+    });
+    const pos = (0, react_1.useRef)(position);
+    pos.current = position;
+    const handleStart = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (onStart) {
+            onStart(event);
+        }
+    }, [
+        onStart
+    ]);
+    const handleDrag = (0, react_1.useCallback)((event, data) => {
+        event.stopPropagation();
+        if (!disabled) {
+            setPosition({
+                x: data.x,
+                y: data.y
+            });
+            if (onDrag) {
+                onDrag(event, data);
+            }
+        }
+    }, [
+        disabled,
+        onDrag
+    ]);
+    const handleStop = (0, react_1.useCallback)((event, data) => {
+        event.stopPropagation();
+        if (!disabled) {
+            setPosition({
+                x: data.x,
+                y: data.y
+            });
+        }
+        if (onStop) {
+            onStop(event, data);
+        }
+        if (onEdgeDrop &&
+            nodePositions &&
+            position.x &&
+            position.y) {
+            nodePositions.match(position.x, position.y).then((match) => {
+                onEdgeDrop(sourceId, Boolean(match) || match === 0 ?
+                    match :
+                    undefined);
+            }).catch(() => {
+            });
+        }
+        setPosition({
+            x,
+            y
+        });
+    }, [
+        disabled,
+        nodePositions,
+        onEdgeDrop,
+        onStop,
+        position.x,
+        position.y,
+        sourceId,
+        x,
+        y
+    ]);
+    const nodeRef = (0, react_1.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)(Pull_1.default, { className: className, diagramId: diagramId, height: height, line: line, ref: nodeRef, shape: shape, sourceId: sourceId, style: style, width: width, x: position.x, y: position.y }) })) :
+        null;
+};
+PullNode.displayName = 'LincleInteractivePullNode';
+exports.default = PullNode;

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

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

package/dist/components/Node/index.js

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../shared");
+const MoveNode_1 = __importDefault(require("./MoveNode"));
+const PullNode_1 = __importDefault(require("./PullNode"));
+const react_1 = require("react");
+const emptySnap = [
+    1,
+    1
+];
+const Node = ({ children, className = '', disableMove: givenDisableMove, disablePull: givenDisablePull, height: givenHeight, id, line: givenLine, mode: givenMode, onDrag, onEdgeDrop: givenOnEdgeDrop, onSelect: givenOnSelect, onStart, onStop, shape: givenShape, style, width: givenWidth, x, y }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const defaultHeight = (_b = (_a = (0, react_1.useContext)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.defaultSettings) === null || _b === void 0 ? void 0 : _b.height;
+    const defaultLine = (_d = (_c = (0, react_1.useContext)(shared_1.GraphContext)) === null || _c === void 0 ? void 0 : _c.defaultSettings) === null || _d === void 0 ? void 0 : _d.line;
+    const defaultShape = (_f = (_e = (0, react_1.useContext)(shared_1.GraphContext)) === null || _e === void 0 ? void 0 : _e.defaultSettings) === null || _f === void 0 ? void 0 : _f.shape;
+    const defaultWidth = (_h = (_g = (0, react_1.useContext)(shared_1.GraphContext)) === null || _g === void 0 ? void 0 : _g.defaultSettings) === null || _h === void 0 ? void 0 : _h.width;
+    const snap = (0, react_1.useContext)(shared_1.SnapContext);
+    const [snapX, snapY] = snap !== null && snap !== void 0 ? snap : emptySnap;
+    const { disableMove: graphDisableMove, disablePull: graphDisablePull, givenMode: graphGivenMode, mode: graphMode } = (0, react_1.useContext)(shared_1.ModeContext);
+    const mode = (_j = givenMode !== null && givenMode !== void 0 ? givenMode : graphGivenMode) !== null && _j !== void 0 ? _j : graphMode;
+    const { onEdgeDrop: defaultOnEdgeDrop, onNodeDrag, onNodeSelect, onNodeStart, onNodeStop } = (0, react_1.useContext)(shared_1.NodeContext);
+    const disableMove = givenDisableMove !== null && givenDisableMove !== void 0 ? givenDisableMove : graphDisableMove;
+    const disablePull = givenDisablePull !== null && givenDisablePull !== void 0 ? givenDisablePull : graphDisablePull;
+    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : defaultOnEdgeDrop;
+    const onSelect = givenOnSelect !== null && givenOnSelect !== void 0 ? givenOnSelect : onNodeSelect;
+    const pullPosition = (0, react_1.useRef)({
+        x,
+        y
+    });
+    const { height, line, shape, width } = (0, react_1.useMemo)(() => {
+        return {
+            height: givenHeight !== null && givenHeight !== void 0 ? givenHeight : defaultHeight,
+            line: givenLine !== null && givenLine !== void 0 ? givenLine : defaultLine,
+            shape: givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape,
+            width: givenWidth !== null && givenWidth !== void 0 ? givenWidth : defaultWidth
+        };
+    }, [
+        defaultHeight,
+        defaultLine,
+        defaultShape,
+        defaultWidth,
+        givenHeight,
+        givenLine,
+        givenShape,
+        givenWidth
+    ]);
+    const handleOnStart = (0, react_1.useCallback)((event) => {
+        if (onStart) {
+            onStart(event);
+        }
+        else if (onNodeStart) {
+            onNodeStart(event, id);
+        }
+    }, [
+        id,
+        onNodeStart,
+        onStart
+    ]);
+    const handleOnDrag = (0, react_1.useCallback)((event, data) => {
+        if (onDrag) {
+            onDrag(event, data);
+        }
+        else if (onNodeDrag) {
+            onNodeDrag(event, id, data);
+        }
+    }, [
+        id,
+        onDrag,
+        onNodeDrag
+    ]);
+    const handleOnStop = (0, react_1.useCallback)((event, data) => {
+        if (onStop) {
+            onStop(event, data);
+        }
+        else if (onNodeStop) {
+            onNodeStop(event, id, data);
+        }
+    }, [
+        id,
+        onNodeStop,
+        onStop
+    ]);
+    const handleMoveStart = (0, react_1.useCallback)((event) => {
+        handleOnStart(event);
+    }, [
+        handleOnStart
+    ]);
+    const handleMoveDrag = (0, react_1.useCallback)((event, data, position) => {
+        pullPosition.current = {
+            x: position.x,
+            y: position.y
+        };
+        handleOnDrag(event, data);
+    }, [
+        handleOnDrag
+    ]);
+    const handleMoveStop = (0, react_1.useCallback)((event, data) => {
+        handleOnStop(event, data);
+    }, [
+        handleOnStop
+    ]);
+    const pullNode = (0, react_1.useMemo)(() => {
+        return mode === 'pull' && !disablePull ?
+            ((0, jsx_runtime_1.jsx)(PullNode_1.default, { disabled: disablePull !== null && disablePull !== void 0 ? disablePull : mode !== 'pull', 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 test = (0, react_1.useMemo)(() => {
+        return {
+            x: Math.ceil((x !== null && x !== void 0 ? x : 0) / snapX) * snapX,
+            y: Math.ceil((y !== null && y !== void 0 ? y : 0) / snapY) * snapY
+        };
+    }, [
+        snapX,
+        snapY,
+        x,
+        y
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MoveNode_1.default, { className: className, disabled: disableMove !== null && disableMove !== void 0 ? disableMove : mode === 'pull', height: height, id: id, mode: mode, onDrag: handleMoveDrag, onSelect: onSelect, onStart: handleMoveStart, onStop: handleMoveStop, shape: shape, snap: snap, style: style, width: width, x: test.x, y: test.y, children: children }), pullNode] }));
+};
+Node.displayName = 'LincleInteractiveNode';
+exports.default = Node;

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

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

package/dist/components/Nodes/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var base_1 = require("../../base");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return base_1.Nodes; } });

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

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

package/dist/components/Path/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var base_1 = require("../../base");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return base_1.Path; } });

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

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