seat-editor 3.4.8 → 3.5.0

package/dist/features/view-only-5/index.jsx

@@ -0,0 +1,614 @@
+"use client";
+import React, { useEffect, useMemo, useRef, useState, useImperativeHandle, useCallback, } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer-v5";
+import { createTableGhost, getGlobalBBox, } from "../board-v3/utils";
+import { Spin } from "antd";
+import { rotatePoint, renderElements } from "./utils";
+import { useConnectionGraph } from "./use-connection-graph";
+import { ConnectionLayer } from "./connection-layer";
+import { ConnectHandle } from "./connect-handle";
+import { getAttributeElement } from "../board-v3/resize-element";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
+        select: true,
+        move: true,
+        switch: true,
+        drop: true,
+        rightClick: true,
+        double: true,
+    }, isConnectEdge = true, isSelectNode = true, onMakeSelection } = props;
+    const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
+    const tableGhost = useRef(null);
+    const hoverUnderghostId = useRef(null);
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const hasBoundingBoxRef = useRef(false);
+    const [tooltip, setTooltip] = useState({
+        x: 0,
+        y: 0,
+        visible: false,
+    });
+    const isDragging = useRef(false);
+    const [panningGroup, setPanningGroup] = useState(false);
+    const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const dataElementSelectionGroupRef = useRef([]);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps, } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const { loading } = useAppSelector((state) => state.panel);
+    useImperativeHandle(refs, () => ({
+        svgRef: svgRef === null || svgRef === void 0 ? void 0 : svgRef.current,
+        transformRef: transformRef === null || transformRef === void 0 ? void 0 : transformRef.current,
+        containerRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current,
+        tableGhost: tableGhost === null || tableGhost === void 0 ? void 0 : tableGhost.current,
+        hoverUnderghost: originalData({
+            id: hoverUnderghostId === null || hoverUnderghostId === void 0 ? void 0 : hoverUnderghostId.current,
+            type: "find",
+        }),
+    }));
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
+            dispatch({ type: "panel/setLoading", payload: true });
+        }
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) === 0) {
+            dispatch({ type: "board/setNewComponents", payload: [] });
+            setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) === 0) {
+            dispatch({ type: "board/setNewExtraComponents", payload: [] });
+        }
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
+            dispatch({ type: "board/setNewComponents", payload: componentProps });
+            setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+        }
+        if (defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: defaultBackground,
+            });
+        }
+        dispatch({ type: "board/setBoundingBox", payload: defaultBoundingBox });
+        setTimeout(() => {
+            dispatch({ type: "panel/setLoading", payload: false });
+        }, 1000);
+    }, [
+        componentProps,
+        extraComponentProps,
+        defaultBackground,
+        loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
+        props === null || props === void 0 ? void 0 : props.viewOnly,
+        defaultBoundingBox,
+    ]);
+    useEffect(() => {
+        setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
+    }, [privilegedTags]);
+    const originalData = ({ id, type, dataParams, }) => {
+        let data;
+        if (type === "find") {
+            data = componentsEditor.find((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
+                    return item[mappingKey].id == id;
+                return (item === null || item === void 0 ? void 0 : item.id) == id;
+            });
+        }
+        if (type === "get" && dataParams) {
+            const mapped = mappingKey ? dataParams[mappingKey] : undefined;
+            data = mapped !== undefined ? mapped : dataParams;
+        }
+        return data;
+    };
+    const handleDoubleClick = (items, e) => {
+        const find = componentsEditor.find((item) => {
+            var _a;
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
+                return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
+            return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onDoubleClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.double) && onDoubleClick(find);
+        setSelectedTable(mappingKey ? find[mappingKey] : find);
+    };
+    const handleSelectComponent = (items, e) => {
+        const find = componentsEditor.find((item) => {
+            var _a;
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
+                return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
+            return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
+        });
+        const rightClick = e.button === 2;
+        onRightClick &&
+            rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick) &&
+            onRightClick(e, find);
+        onSelectComponent &&
+            !rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select) &&
+            onSelectComponent(find);
+        setSelectedTable(mappingKey ? find[mappingKey] : find);
+    };
+    const boundingBox = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
+            return { minX: 0, minY: 0, width: 500, height: 500 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_, i) => {
+            let values = mappingKey ? _[mappingKey] : _;
+            if (!values)
+                return;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if (i === componentsEditor.length - 1 &&
+                (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
+                const centerX = (minX + maxX) / 2;
+                const centerY = (minY + maxY) / 2;
+                const padding = 20;
+                const width = maxX - minX + padding * 2;
+                const height = maxY - minY + padding * 2;
+                minX = centerX - width / 2;
+                minY = centerY - height / 2;
+                maxX = maxX - minX + padding * 2;
+                maxY = maxY - minY + padding * 2;
+            }
+        });
+        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
+            var _a, _b, _c, _d, _e;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("polygon")) {
+                minX = Math.min(minX, (_b = values === null || values === void 0 ? void 0 : values.points) === null || _b === void 0 ? void 0 : _b.reduce((min, p) => Math.min(min, p.x), Infinity));
+                minY = Math.min(minY, (_c = values === null || values === void 0 ? void 0 : values.points) === null || _c === void 0 ? void 0 : _c.reduce((min, p) => Math.min(min, p.y), Infinity));
+                maxX = Math.max(maxX, (_d = values === null || values === void 0 ? void 0 : values.points) === null || _d === void 0 ? void 0 : _d.reduce((max, p) => Math.max(max, p.x), -Infinity));
+                maxY = Math.max(maxY, (_e = values === null || values === void 0 ? void 0 : values.points) === null || _e === void 0 ? void 0 : _e.reduce((max, p) => Math.max(max, p.y), -Infinity));
+            }
+        });
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
+            ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            minX = extraComponentsEditor[0].x;
+            minY = extraComponentsEditor[0].y;
+            maxX = extraComponentsEditor[0].width;
+            maxY = extraComponentsEditor[0].height;
+        }
+        if (boundingBoxProps) {
+            hasBoundingBoxRef.current = true;
+            return {
+                minX: boundingBoxProps.x - (((_c = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _c === void 0 ? void 0 : _c.paddingLeft) || 0),
+                minY: boundingBoxProps.y - (((_d = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _d === void 0 ? void 0 : _d.paddingTop) || 0),
+                width: boundingBoxProps.width + (((_e = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _e === void 0 ? void 0 : _e.paddingRight) || 0),
+                height: boundingBoxProps.height + (((_f = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _f === void 0 ? void 0 : _f.paddingBottom) || 0),
+            };
+        }
+        return {
+            minX: minX - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
+            minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
+            width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
+            height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
+        };
+    }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
+    const [fingerCount, setFingerCount] = useState(0);
+    useEffect(() => {
+        const container = document.getElementById("workspace");
+        const handleTouchStart = (e) => setFingerCount(e.touches.length);
+        const handleTouchEnd = () => setFingerCount(0);
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    const handleTableEvent = (event, type) => {
+        var _a;
+        event.preventDefault();
+        const elementTarget = event.target;
+        if (!elementTarget)
+            return;
+        const group = elementTarget.closest("g[data-id]");
+        if (!group)
+            return;
+        try {
+            const tableId = JSON.parse(group.getAttribute("data-id") || "{}");
+            const dragEvent = event;
+            const dataTransfer = JSON.parse(((_a = dragEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("application/json")) || "{}");
+            const data = {
+                targetTable: originalData({ id: tableId, type: "find" }),
+                sourceTable: originalData({ dataParams: dataTransfer, type: "get" }),
+            };
+            if (type === "drop")
+                onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
+        }
+        catch (err) {
+            console.error("Invalid data-id JSON:", err);
+        }
+    };
+    const getSvgCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const point = svg.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: transformed.x, y: transformed.y };
+    };
+    const lastClickRef = useRef(0);
+    const clickTimerRef = useRef(null);
+    const ignoreNextRef = useRef(false);
+    const DOUBLE_DELAY = 250;
+    const handlePointerDown = (e) => {
+        var _a;
+        console.log("handlePointerDown", e);
+        const svg = svgRef.current;
+        if (!e.isPrimary || !svg)
+            return;
+        isDragging.current = false;
+        let hasMoved = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const { x, y } = getSvgCoords(e);
+        const targetGroup = e.target.closest("g[data-id]");
+        const { clientX, clientY } = e;
+        const hitPoint = document.elementFromPoint(clientX, clientY);
+        const makeSelection = (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
+        if (makeSelection) {
+            const boxSelection = createTableGhost({
+                x,
+                y,
+                width: 1,
+                height: 1,
+                fill: "transparent",
+                shape: "selection-box",
+                id: "selection-box-ghost",
+            });
+            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(boxSelection);
+        }
+        setPanningGroup(true);
+        // if (!targetGroup) {
+        //   setTooltip((prev) => ({ ...prev, visible: false }));
+        //   return;
+        // }
+        // let ghost = targetGroup.cloneNode(true) as SVGGElement;
+        // const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+        // const allowedDrag =
+        //   (!props?.dragTableBlockKey
+        //     ? true
+        //     : !props?.dragTableBlockKey?.some((_) => {
+        //         const dataRaw: any = originalData({ id: ghostId, type: "find" });
+        //         return _.value === dataRaw?.[_.key];
+        //       })) &&
+        //   actionPrivileged?.move &&
+        //   actionPrivileged?.switch;
+        // if (ghostAttributes) {
+        //   Object.keys(ghostAttributes).forEach((key) =>
+        //     ghost.setAttribute(key, ghostAttributes[key])
+        //   );
+        // }
+        // ghost.setAttribute("opacity", "0.5");
+        // ghost.setAttribute("pointer-events", "none");
+        // ghost.setAttribute("stroke-width", "1");
+        // svg.appendChild(ghost);
+        // tableGhost.current = ghost;
+        // const startBox = getTranslate(targetGroup);
+        // const groupCTM = targetGroup.getCTM();
+        // if (!groupCTM) {
+        //   setTooltip((prev) => ({ ...prev, visible: false }));
+        //   return;
+        // }
+        // const offset = { x: x - startBox.x, y: y - startBox.y };
+        const pointerMoveGhost = (ev) => {
+            // console.log({ makeSelection });
+            // if (allowedDrag) {
+            //   isDragging.current = true;
+            //   const p = svg.createSVGPoint();
+            //   p.x = ev.clientX;
+            //   p.y = ev.clientY;
+            //   const dx = ev.clientX - startX;
+            //   const dy = ev.clientY - startY;
+            //   onPanning(ev);
+            //   if (!hasMoved && Math.sqrt(dx * dx + dy * dy) > 0) {
+            //     hasMoved = true;
+            //   }
+            //   ghost.style.display = "none";
+            //   const elemUnderPointer = document.elementFromPoint(
+            //     ev.clientX,
+            //     ev.clientY
+            //   );
+            //   ghost.style.display = "";
+            //   const hoveredGroup = elemUnderPointer?.closest(
+            //     "g[data-id]"
+            //   ) as SVGGElement | null;
+            //   const dataHoveredGhostId = JSON.parse(
+            //     hoveredGroup?.getAttribute("data-id") || "{}"
+            //   );
+            //   const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
+            //   if (dataHoveredGhostId !== dataGhostId)
+            //     hoverUnderghostId.current = dataHoveredGhostId;
+            //   const posSVG = p.matrixTransform(svg.getScreenCTM()?.inverse());
+            //   ghost.setAttribute(
+            //     "transform",
+            //     `translate(${posSVG.x - offset.x}, ${posSVG.y - offset.y})`
+            //   );
+            // }
+            const pt = svg.createSVGPoint();
+            pt.x = ev.clientX;
+            pt.y = ev.clientY;
+            const pos = pt.matrixTransform(svg.getScreenCTM().inverse());
+            const onMakeSelectionBox = (ev) => {
+                var _a, _b;
+                let selectionBoxGhost = svg.querySelector("#selection-box-ghost");
+                const selX = Math.min(pos.x, x);
+                const selY = Math.min(pos.y, y);
+                const selW = Math.abs(pos.x - x);
+                const selH = Math.abs(pos.y - y);
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("x", String(selX));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("y", String(selY));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("width", String(selW));
+                selectionBoxGhost === null || selectionBoxGhost === void 0 ? void 0 : selectionBoxGhost.setAttribute("height", String(selH));
+                // FIND ALL COMPONENTS INSIDE SELECTION BOX
+                const allGroups = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("g[data-id]");
+                const selLeft = selX;
+                const selTop = selY;
+                const selectedIds = [...allGroups]
+                    .map((g) => JSON === null || JSON === void 0 ? void 0 : JSON.parse((g === null || g === void 0 ? void 0 : g.getAttribute("data-id")) || "{}"))
+                    .filter((d) => {
+                    const { element } = getAttributeElement(svg, d);
+                    const box = getGlobalBBox(svg, element);
+                    return ((box === null || box === void 0 ? void 0 : box.x) < selLeft + selW &&
+                        (box === null || box === void 0 ? void 0 : box.x) + box.width > selLeft &&
+                        (box === null || box === void 0 ? void 0 : box.y) < selTop + selH &&
+                        (box === null || box === void 0 ? void 0 : box.y) + box.height > selTop);
+                })
+                    .map((d) => `${d}`);
+                if (selectedIds.length === 0)
+                    return;
+                const selectedComps = (_b = renderedElements
+                    .filter((c) => selectedIds.map(String).includes(String(c.id)))) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    const { g } = getAttributeElement(svg, String(item.id));
+                    // const { x, y } = getTranslate(g);
+                    const box = getGlobalBBox(svg, g);
+                    return Object.assign(Object.assign({}, item), { 
+                        // x: box.x,
+                        // y: box.y,
+                        width: box.width, height: box.height });
+                });
+                dataElementSelectionGroupRef.current = selectedComps;
+            };
+            if (makeSelection)
+                onMakeSelectionBox(ev);
+        };
+        pointerMoveGhost(e.nativeEvent);
+        const pointerHandleUp = (e) => {
+            var _a, _b;
+            if (targetGroup) {
+                const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                isDragging.current = false;
+                const svgSize = svg.getBoundingClientRect();
+                const relX = e.clientX - svgSize.left;
+                const relY = e.clientY - svgSize.top;
+                const centerX = svgSize.width / 2;
+                const centerY = svgSize.height / 2;
+                const newX = relX > centerX ? relX - widthTooltip : relX;
+                const newY = relY > centerY ? relY : relY;
+                const rightClick = e.button === 2 && !!dataId && allowTooltip;
+                setTooltip({ x: newX / scale, y: newY / scale, visible: rightClick });
+                const findDayaById = originalData({ id: dataId, type: "find" });
+                const now = Date.now();
+                if (ignoreNextRef.current) {
+                    ignoreNextRef.current = false;
+                    return;
+                }
+                const diff = now - lastClickRef.current;
+                if (diff < DOUBLE_DELAY) {
+                    if (clickTimerRef.current) {
+                        handleDoubleClick(findDayaById, e);
+                        clearTimeout(clickTimerRef.current);
+                        clickTimerRef.current = null;
+                    }
+                    ignoreNextRef.current = true;
+                    lastClickRef.current = 0;
+                    return;
+                }
+                lastClickRef.current = now;
+                clickTimerRef.current = window.setTimeout(() => {
+                    handleSelectComponent(findDayaById, e);
+                    clickTimerRef.current = null;
+                }, DOUBLE_DELAY);
+            }
+            if (makeSelection) {
+                const allTableInSelection = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((d) => d.id);
+                const filterTableInSelection = componentProps === null || componentProps === void 0 ? void 0 : componentProps.filter((item) => { var _a, _b; return ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id) && (allTableInSelection === null || allTableInSelection === void 0 ? void 0 : allTableInSelection.includes((_b = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _b === void 0 ? void 0 : _b.id)); });
+                onMakeSelection && onMakeSelection(filterTableInSelection);
+                (_b = svg.querySelector("#selection-box-ghost")) === null || _b === void 0 ? void 0 : _b.remove();
+            }
+            setPanningGroup(false);
+            tableGhost.current = null;
+            isDragging.current = false;
+            window.removeEventListener("pointermove", pointerMoveGhost);
+            window.removeEventListener("pointerup", pointerHandleUp);
+        };
+        window.addEventListener("pointermove", pointerMoveGhost);
+        window.addEventListener("pointerup", pointerHandleUp);
+    };
+    const handleMouseUp = () => {
+        var _a;
+        (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+        tableGhost.current = null;
+    };
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, []);
+    const handlePan = (dx, dy) => {
+        var _a, _b;
+        const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+        const setTransform = (_b = transformRef === null || transformRef === void 0 ? void 0 : transformRef.current) === null || _b === void 0 ? void 0 : _b.setTransform;
+        if (!instance)
+            return;
+        const { bounds } = instance;
+        const { positionX, positionY, scale } = instance.transformState;
+        let x = Math.max(bounds.minPositionX, Math.min(bounds.maxPositionX, positionX + dx));
+        let y = Math.max(bounds.minPositionY, Math.min(bounds.maxPositionY, positionY + dy));
+        setTransform(x, y, scale, 100, "linear");
+    };
+    const getCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const instance = (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.instance;
+        if (!svg || !instance)
+            return null;
+        const { positionX, positionY, scale } = instance.transformState;
+        let clientX, clientY;
+        if ("touches" in e && e.touches.length > 0) {
+            clientX = e.touches[0].clientX;
+            clientY = e.touches[0].clientY;
+        }
+        else if ("clientX" in e) {
+            clientX = e.clientX;
+            clientY = e.clientY;
+        }
+        else
+            return null;
+        const svgRect = svg.getBoundingClientRect();
+        return [
+            (clientX - svgRect.left + positionX) / scale,
+            (clientY - svgRect.top + positionY) / scale,
+            Math.abs(clientX - svgRect.left + positionX - svgRect.width / scale),
+            Math.abs(clientY - svgRect.top + positionY - svgRect.height / scale),
+        ];
+    };
+    const onPanning = (e) => {
+        const coords = getCoords(e);
+        if (!coords)
+            return;
+        const [xLeft, yTop, xRight, yBottom] = coords;
+        const edgeThreshold = 100;
+        const speedPanning = 50;
+        if (scale !== 1) {
+            if (xLeft < edgeThreshold)
+                handlePan(speedPanning, 0);
+            if (xRight < edgeThreshold)
+                handlePan(-speedPanning, 0);
+            if (yTop < edgeThreshold)
+                handlePan(0, speedPanning);
+            if (yBottom < edgeThreshold)
+                handlePan(0, -speedPanning);
+        }
+    };
+    // ─── Node helper ──────────────────────────────────────────────────────────
+    const getNodeById = useCallback((id) => {
+        var _a, _b, _c;
+        const comp = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey]))
+                return item[mappingKey].id == id;
+            return (item === null || item === void 0 ? void 0 : item.id) == id;
+        });
+        if (!comp)
+            return null;
+        const v = mappingKey ? comp[mappingKey] : comp;
+        const w = (_a = v.width) !== null && _a !== void 0 ? _a : 100;
+        const h = (_b = v.height) !== null && _b !== void 0 ? _b : 50;
+        const rotation = (_c = v.rotation) !== null && _c !== void 0 ? _c : 0;
+        const rotated = rotatePoint(w / 2, h / 2, rotation);
+        return {
+            id: String(v.id),
+            x: v.x + rotated.x,
+            y: v.y + rotated.y,
+            width: w,
+            height: h,
+            rotation,
+        };
+    }, [componentsEditor, mappingKey]);
+    // ─── Connection graph ─────────────────────────────────────────────────────
+    const graph = useConnectionGraph({
+        svgRef,
+        getNodeById,
+        onEdgesChange: props.onEdgesChange,
+        keyNode: props.keyNode,
+        mappingKey,
+        tableMatchKey,
+        statusKey,
+    });
+    // ─── Render ───────────────────────────────────────────────────────────────
+    const hasBoundingBox = hasBoundingBoxRef.current;
+    const isValidBoundingBox = Number.isFinite(boundingBox.minX) &&
+        Number.isFinite(boundingBox.minY) &&
+        Number.isFinite(boundingBox.width) &&
+        Number.isFinite(boundingBox.height) &&
+        boundingBox.width > 0 &&
+        boundingBox.height > 0;
+    const viewBox = isValidBoundingBox
+        ? `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`
+        : "0 0 1000 1000";
+    const renderedElements = useMemo(() => renderElements(componentsEditor, mappingKey, tableMatchKey, statusKey), [componentsEditor, mappingKey, tableMatchKey, statusKey]);
+    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }} {...props.containerProps}>
+      {loading && (<div className="absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center">
+          {(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
+        </div>)}
+
+      <TransformWrapper ref={transformRef} disablePadding={true} centerZoomedOut={true} panning={{ disabled: panningGroup, wheelPanning: true }} wheel={{ disabled: false }} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
+        <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }} contentStyle={{ width: "100%", height: "100%" }}>
+          <svg id="workspace" ref={svgRef} width="100%" height="100%" overflow="hidden" viewBox={viewBox} className="h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} onMouseMove={(e) => graph.onMouseMove(e)} onMouseUp={() => graph.onMouseUp()} onClick={(e) => {
+            // if (!graph.draggingAnchor) graph.clearSelection();
+            // if (graph.connecting) graph.cancelConnect();
+        }} style={{
+            background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+            display: "block",
+            touchAction: "none",
+            userSelect: "none",
+        }} {...props.svgProps}>
+            <rect width="100%" height="100%" fill="url(#biggrid)"/>
+
+            {hasBoundingBox && (<defs>
+                <clipPath id="contentCrop">
+                  <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
+                </clipPath>
+              </defs>)}
+
+            <g id="main-layer" clipPath="url(#contentCrop)">
+              <Layers components={[...extraComponentsEditor, ...renderedElements]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
+            </g>
+
+            <ConnectionLayer edges={graph.edges} selectedEdge={graph.selectedEdge} connecting={graph.connecting} draggingAnchor={graph.draggingAnchor} mousePos={graph.mousePos} getNodeById={getNodeById} onSelectEdge={graph.selectEdge} onDeleteEdge={graph.deleteEdge} onStartDragWaypoint={graph.startDragWaypoint} onInsertWaypoint={graph.insertWaypoint} onRemoveWaypoint={graph.removeWaypoint} onStartDragAnchor={graph.startDragAnchor} isConnectEdge={isConnectEdge} selectedNodeId={graph.selectedNode} isSelectNode={isSelectNode}/>
+
+            {renderedElements.map((item) => {
+            var _a, _b, _c, _d;
+            const rotated = rotatePoint(item.width / 2, item.height / 2, (_a = item.rotation) !== null && _a !== void 0 ? _a : 0);
+            return (<ConnectHandle key={item.id} cx={item.x + rotated.x} cy={item.y + rotated.y} width={(_b = item.width) !== null && _b !== void 0 ? _b : 100} height={(_c = item.height) !== null && _c !== void 0 ? _c : 50} rotation={(_d = item.rotation) !== null && _d !== void 0 ? _d : 0} nodeId={String(item.id)} isConnecting={!!graph.connecting} isDraggingAnchor={!!graph.draggingAnchor} onStartConnect={(nodeId, clickPos) => graph.startConnect(nodeId, clickPos)} onEndConnect={(nodeId, clickPos) => {
+                    if (graph.draggingAnchor)
+                        graph.updateAnchor(nodeId, clickPos);
+                    else
+                        graph.endConnect(nodeId, clickPos);
+                }} isConnectEdge={isConnectEdge} onSelectNode={graph.selectNode} isSelectNode={isSelectNode} onSelectEdge={graph.selectEdge} edges={graph.edges}/>);
+        })}
+          </svg>
+
+          {tooltip.visible && (<div className={`seat-editor tooltip-container ${tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className}`} style={Object.assign({ top: tooltip.y, left: tooltip.x, transform: `scale(${1 / scale})`, transformOrigin: "top left", minWidth: widthTooltip + "px" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.style)}>
+              {tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children}
+            </div>)}
+        </TransformComponent>
+      </TransformWrapper>
+    </div>);
+};
+export default LayerView;

package/dist/features/view-only-5/use-connection-graph.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { EdgeType, NodeType } from "./utils";
+import { DraggingAnchor } from "./connection-layer";
+import { PropertiesProps } from "@/dto/table";
+import { TableMatchKey } from ".";
+export type UseConnectionGraphOptions = {
+    svgRef: React.RefObject<SVGSVGElement>;
+    getNodeById: (id: string) => NodeType | null;
+    onEdgesChange?: (edges: EdgeType[], table: PropertiesProps[]) => void;
+    keyNode?: string;
+    mappingKey?: string;
+    tableMatchKey?: TableMatchKey[];
+    statusKey?: string;
+};
+export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange, keyNode, mappingKey, tableMatchKey, statusKey, }: UseConnectionGraphOptions) => {
+    edges: EdgeType[];
+    setEdges: React.Dispatch<React.SetStateAction<EdgeType[]>>;
+    selectedEdge: string;
+    selectedNode: string;
+    connecting: {
+        fromId: string;
+        fromPos: {
+            x: number;
+            y: number;
+        };
+    };
+    draggingAnchor: DraggingAnchor;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    startConnect: (fromId: string, fromPos: {
+        x: number;
+        y: number;
+    }) => void;
+    endConnect: (toId: string, toPos: {
+        x: number;
+        y: number;
+    }) => void;
+    cancelConnect: () => void;
+    startDragAnchor: (e: React.MouseEvent, edgeId: string, side: "from" | "to") => void;
+    updateAnchor: (targetNodeId: string, newPos: {
+        x: number;
+        y: number;
+    }) => void;
+    cancelDragAnchor: () => void;
+    startDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    insertWaypoint: (e: React.MouseEvent, edgeId: string, insertIndex: number, x: number, y: number) => void;
+    removeWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    selectEdge: (id: string) => void;
+    deleteEdge: (id: string) => void;
+    deleteSelectedEdge: () => void;
+    clearSelection: () => void;
+    onMouseMove: (e: React.MouseEvent<SVGSVGElement>) => void;
+    onMouseUp: () => void;
+    selectNode: (nodeId: string) => void;
+};