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

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);