seat-editor 3.3.36 → 3.3.37

package/dist/app/constant.d.ts

@@ -274,8 +274,10 @@ export declare const test4: ({
     seatCount: number;
     uuid_table: string;
     gapTags: number;
+    status?: undefined;
     properties?: undefined;
 } | {
+    status: string;
     properties: {
         x: number;
         y: number;
@@ -288,6 +290,7 @@ export declare const test4: ({
         width: number;
         height: number;
         gapTags: number;
+        status: string;
         labels: {
             x: number;
             y: number;

package/dist/app/constant.js

@@ -3436,6 +3436,7 @@ export const test4 = [
         gapTags: 20,
     },
     {
+        status: "hold",
         properties: {
             x: 400,
             y: 20,
@@ -3448,6 +3449,7 @@ export const test4 = [
             width: 100,
             height: 100,
             gapTags: 20, //gap antara tags secara vertical,
+            status: "hold",
             labels: [
                 {
                     x: 0,

package/dist/app/only-view/page.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LayerView from "../../features/view-only-3";
 import { useState, useRef } from "react";
-// import { data4, test4, test1 } from "../constant";
+import { data4 } from "../constant";
 import { ChairIcon } from "./chair";
 import { UserIcon } from "./user";
 import { Modal } from "antd";
@@ -165,7 +165,7 @@ const TouchScrollDetect = () => {
         return (_jsx(Modal, { open: open, onCancel: () => setOpen(false), width: 700, title: "Preview Board", centered: true, footer: null, children: _jsx("div", { className: "flex flex-col p-4 h-[500px] overflow-auto", children: _jsx(JsonView, { value: table }) }) }));
     };
     const testData = [];
-    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4" }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "is_hold", privilegedTags: [
+    return (_jsxs("div", { className: "w-full h-screen border-2 border-black overflow-auto", id: "scroll-container", children: [renderModal(), _jsxs("div", { className: "flex", children: [_jsx("div", { className: "h-screen bg-gray-500 w-1/3", children: _jsx("div", { className: "p-4", children: data4.map((item, index) => (_jsx(Card, Object.assign({}, item), index))) }) }), _jsxs("div", { className: "h-screen w-2/3 relative", children: [_jsxs("div", { className: "absolute top-1 right-1  flex gap-4 z-[10]", children: [_jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomIn(), children: "+" }), _jsx("button", { className: "p-4 bg-gray-400", onClick: () => handleZoomOut(), children: "-" })] }), _jsx(LayerView, { refs: refLayer, statusKey: "is_hold", privilegedTags: [
                                     {
                                         key: "table",
                                         items: ["text", "icon"],
@@ -176,7 +176,7 @@ const TouchScrollDetect = () => {
                                     },
                                 ], defaultBackground: "#000000", mappingKey: "properties", componentProps: testData === null || testData === void 0 ? void 0 : testData.map((item) => {
                                     return {
-                                        properties: item === null || item === void 0 ? void 0 : item.properties,
+                                        properties: item,
                                         test: item === null || item === void 0 ? void 0 : item.test,
                                     };
                                 }), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {

package/dist/features/view-only-2/index.d.ts

@@ -1,19 +1,89 @@
-export interface LayerViewProps {
-    componentProps?: any[];
-    extraComponentProps?: any[];
-    onCurrentStateChange?: (state: any) => void;
-    onSelectComponent?: (component: any) => void;
+import React, { CSSProperties, SVGAttributes } from "react";
+import { ReactZoomPanPinchRef, ReactZoomPanPinchProps, ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";
+import { PropertiesProps } from "../../dto/table";
+import { EventHandleType } from "../../dto/event-handler";
+export type TableGhost = {
+    table: PropertiesProps;
+    event: EventHandleType;
+};
+export type TableMatchKey = {
+    key: string | number;
+    properties?: PropertiesProps;
+    className?: string;
+};
+export type TableMatchEvent = {
+    event: EventHandleType;
+    properties: PropertiesProps;
+};
+export type ComponentProps<T = undefined> = T extends undefined ? PropertiesProps : Omit<PropertiesProps, keyof T> & T;
+export type OnCurrentStateChange<TMeta = undefined> = ({ components, extraComponents, background, boundingBox, }: {
+    components: ComponentProps<TMeta>[];
+    extraComponents: ComponentProps[];
+    background: string;
+    boundingBox: PropertiesProps | null;
+}) => void;
+export type TransformProps = React.ForwardRefExoticComponent<Omit<ReactZoomPanPinchProps, "ref"> & React.RefAttributes<ReactZoomPanPinchContentRef>>;
+export type RefLayerView = {
+    svgRef: SVGSVGElement;
+    transformRef: ReactZoomPanPinchRef;
+    containerRef: HTMLDivElement;
+    tableGhost: SVGGElement;
+    hoverUnderghost: ComponentProps;
+};
+export type TypeActionProps<TMeta = undefined> = {
+    targetTable: ComponentProps<TMeta>;
+    sourceTable: ComponentProps<TMeta>;
+};
+export interface LayerViewProps<TMeta = undefined> {
+    componentProps?: ComponentProps<TMeta>[];
+    extraComponentProps?: ComponentProps[];
+    onCurrentStateChange?: OnCurrentStateChange;
+    onSelectComponent?: (component: ComponentProps<TMeta>) => void;
     mappingKey?: string;
-    selectedTableColor?: string;
-    colorMatchKey?: {
-        color: string;
-        key: string;
-    }[];
+    tableMatchKey?: TableMatchKey[];
+    eventMatchTable?: TableMatchEvent[];
     statusKey: string;
     defaultBackground?: string;
-    transformProps?: any;
-    containerProps?: any;
-    svgProps?: any;
+    transformProps?: ReactZoomPanPinchProps;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
+    svgProps?: SVGAttributes<SVGSVGElement>;
+    ghostAttributes?: SVGAttributes<SVGGElement>;
+    iconTags?: {
+        icon: React.JSX.Element;
+        key: string;
+    }[];
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
+    tooltipProps?: {
+        className?: string;
+        style?: CSSProperties;
+        minWidth?: number;
+        children: React.ReactNode;
+    };
+    dragTableBlockKey?: {
+        key: string;
+        value: string | number | null;
+    }[];
+    onRightClick?: (e: MouseEvent, component: ComponentProps<TMeta>) => void;
+    allowTooltip?: boolean;
+    onDrop?: (e: React.MouseEvent<SVGSVGElement>, component: TypeActionProps<TMeta>) => void;
+    onSwitch?: (e: MouseEvent, component: TypeActionProps<TMeta>) => void;
+    refs?: React.ForwardedRef<RefLayerView>;
+    viewStyles?: {
+        paddingTop?: number;
+        paddingLeft?: number;
+        paddingRight?: number;
+        paddingBottom?: number;
+    };
+    disabled?: boolean;
+    loadingRender?: {
+        state: boolean;
+        element: React.JSX.Element;
+    };
+    defaultBoundingBox?: PropertiesProps;
+    viewOnly?: boolean;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;

package/dist/features/view-only-2/index.js

@@ -1,24 +1,69 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useImperativeHandle, } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import Layers from "../../components/layer";
+import Layers from "../../components/layer-v4";
+import { getTranslate } from "../board-v3/utils";
+import { Spin } from "antd";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = 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 { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    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 });
+        }
+        // check in null
+        const isEmptyComponents = (componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) === 0;
+        const isEmptyExtraComponents = (extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) === 0;
+        // const isEmptyBoundingBox = boundingBox === null;
+        if (isEmptyComponents) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: [],
+            });
+            setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
+        }
+        if (isEmptyExtraComponents) {
+            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({
@@ -32,120 +77,154 @@ const LayerView = (props) => {
                 payload: defaultBackground,
             });
         }
-    }, [componentProps, extraComponentProps, defaultBackground]);
+        // if(boundingBoxProps) {
+        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]);
     useEffect(() => {
         onCurrentStateChange &&
             onCurrentStateChange({
                 components: componentsEditor,
                 extraComponents: extraComponentsEditor,
+                background: backgroundColor,
+                boundingBox: boundingBoxProps,
+            });
+    }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
+    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;
             });
-    }, [componentsEditor, extraComponentsEditor]);
-    const handleSelectComponent = (items) => {
+        }
+        if (type === "get" && dataParams) {
+            const mapped = mappingKey ? dataParams[mappingKey] : undefined;
+            data = mapped !== undefined ? mapped : dataParams;
+        }
+        return data;
+    };
+    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 === (items === null || items === void 0 ? void 0 : items.id);
+                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);
+            return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
         });
-        onSelectComponent && onSelectComponent(find);
-        setSelectedTable(find);
+        const rightClick = e.button === 2;
+        const click = e.button === 0;
+        onRightClick && rightClick && onRightClick(e, find);
+        onSelectComponent && !rightClick && onSelectComponent(find);
+        const seletedTable = mappingKey ? find[mappingKey] : find;
+        setSelectedTable(seletedTable);
     };
     const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        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((_) => {
-            var _a, _b, _c, _d;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_, i) => {
             let values = mappingKey ? _[mappingKey] : _;
             if (!values)
                 return;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
-                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 ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+            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 ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
-                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 ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
-                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) {
+                minX = minX > 10 ? minX - 10 : minX;
+                minY = minY > 10 ? minY - 10 : minY;
+                maxX = maxX + 10;
+                maxY = maxY + 10;
             }
         });
         extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
-            var _a, _b;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+            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 ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
-                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, point) => Math.min(min, point.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, point) => Math.min(min, point.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, point) => Math.max(max, point.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, point) => Math.max(max, point.y), -Infinity));
             }
         });
         let backgroundHasOne = false;
         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"))) {
             backgroundHasOne = true;
+            // console.log({ backgroundHasOne },"shini")
             minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
             minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
             maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
             maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
         }
-        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 &&
-            ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
-            minX = minX - minX * 0.5;
-            minY = minY - minY * 0.5;
-        }
-        const hasBoundingBox = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+        const hasBoundingBox = boundingBoxProps;
+        // const paddingY =
+        //   maxY * (props?.viewStyles?.paddingY || 0) +
+        //   minY * (props?.viewStyles?.paddingY || 0);
+        // const paddingX =
+        //   maxX * (props?.viewStyles?.paddingX || 0) +
+        //   minX * (props?.viewStyles?.paddingX || 0);
         if (hasBoundingBox) {
-            const findBoundingBox = extraComponentsEditor.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+            hasBoundingBoxRef.current = true;
             return {
-                minX: findBoundingBox.x,
-                minY: findBoundingBox.y,
-                width: findBoundingBox.width,
-                height: findBoundingBox.height,
+                minX: boundingBoxProps.x,
+                minY: boundingBoxProps.y,
+                width: boundingBoxProps.width,
+                height: boundingBoxProps.height,
             };
         }
+        // return {
+        //   minX: minX - paddingX - (minX - paddingX) * 0.5,
+        //   minY: minY - paddingY * 2,
+        //   width: maxX + paddingX * 2,
+        //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
+        // };
+        // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
         return {
-            minX: backgroundHasOne ? minX : minX - minX * 0.5,
-            minY: backgroundHasOne ? minY : minY - minY * 0.5,
-            width: maxX,
-            height: maxY,
+            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]);
-    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
-        return elementEditor.map((editorItem, i) => {
-            var _a, _b, _c, _d;
+    }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
+    const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
+        return elementEditor.map((editorItem) => {
             const isUsingMapping = mappingKey &&
                 typeof editorItem[mappingKey] === "object" &&
                 editorItem[mappingKey] !== null;
-            const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
-            if (colorMatchKey) {
-                if (isUsingMapping) {
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
-                }
-                else {
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
-                }
+            let finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+            if (tableMatchKey) {
+                const tableMatch = tableMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]));
+                finalProps = Object.assign(Object.assign(Object.assign({}, finalProps), tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.properties), { className: tableMatch === null || tableMatch === void 0 ? void 0 : tableMatch.className });
             }
             return finalProps;
         });
@@ -171,17 +250,309 @@ const LayerView = (props) => {
             }
         };
     }, []);
-    return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef }, props.containerProps, { children: _jsx("svg", Object.assign({}, props.svgProps, { 
-            // id="workspace"
-            ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
-                display: "block",
-                pointerEvents: "auto",
-                touchAction: "auto",
-                // touchAction: "pan-y",
-            }, children: _jsx(Layers, { mode: "view", components: [
-                    ...extraComponentsEditor,
-                    ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-                ], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) })));
+    const handleTableEvent = (event, type) => {
+        var _a;
+        event.preventDefault();
+        // cari elemen yg diklik
+        const elementTarget = event.target;
+        if (!elementTarget)
+            return;
+        // cari group data-id terdekat
+        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" }),
+            };
+            // drop from out layout editor
+            if (type === "drop") {
+                onDrop && onDrop(event, data);
+            }
+            // cari elemen bentuk (rect / circle / path)
+            const shape = group.querySelector("rect") ||
+                group.querySelector("circle") ||
+                group.querySelector("path");
+            if (!shape)
+                return;
+        }
+        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 handlePointerDown = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        if (!e.isPrimary)
+            return;
+        if (!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]");
+        if (!targetGroup) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        setPanningGroup(true);
+        // clone element yang diklik
+        let ghost = targetGroup.cloneNode(true);
+        const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+        const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
+            ? true
+            : (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
+                const dataRaw = originalData({ id: ghostId, type: "find" });
+                return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+            })) && (!disabled);
+        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 pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        const startBox = getTranslate(targetGroup);
+        const groupCTM = targetGroup.getCTM();
+        if (!groupCTM) {
+            setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
+            return;
+        }
+        const offset = {
+            x: x - startBox.x,
+            y: y - startBox.y,
+        };
+        const pointerMoveGhost = (ev) => {
+            var _a;
+            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;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            onPanning(ev);
+            if (!hasMoved && distance > 0) {
+                // transformRef?.current?.instance
+                // only move ghost if the mouse has moved more than 5 pixels
+                hasMoved = true;
+                isDragging.current = true;
+            }
+            // ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
+            ghost.style.display = "none";
+            const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
+            ghost.style.display = "";
+            const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
+            const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
+            const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
+            if (dataHoveredGhostId !== dataGhostId) {
+                hoverUnderghostId.current = dataHoveredGhostId;
+            }
+            const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+            // posisi awal ghost di bawah kursor tanpa matrix dulu
+            const newX = posSVG.x - offset.x;
+            const newY = posSVG.y - offset.y;
+            if (allowedDrag) {
+                ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
+            }
+        };
+        // tampilkan ghost di posisi awal
+        pointerMoveGhost(e.nativeEvent);
+        const pointerHandleUp = (e) => {
+            var _a;
+            if (!hasMoved) {
+                const dataId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                isDragging.current = false;
+                const dataGroupEmty = !dataId;
+                // TOOLTIP ACTION
+                const svgSize = svg.getBoundingClientRect();
+                const widthScreeen = svgSize.width;
+                const heightScreen = svgSize.height;
+                const clientX = e.clientX;
+                const clientY = e.clientY;
+                const relX = clientX - svgSize.left;
+                const relY = clientY - svgSize.top;
+                const centerX = widthScreeen / 2;
+                const centerY = heightScreen / 2;
+                let newX = 0;
+                let newY = 0;
+                if (relX > centerX) {
+                    newX = relX - widthTooltip;
+                }
+                else if (relX < centerX) {
+                    newX = relX;
+                }
+                else if (relX === centerX) {
+                    newX = relX;
+                }
+                if (relY > centerY) {
+                    newY = relY;
+                }
+                else if (relY < centerY) {
+                    newY = relY;
+                }
+                else if (relY === centerY) {
+                    newY = relY;
+                }
+                const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
+                setTooltip({
+                    x: newX / scale,
+                    y: newY / scale,
+                    visible: rightClick,
+                });
+                const findDayaById = originalData({ id: dataId, type: "find" });
+                handleSelectComponent(findDayaById, e);
+            }
+            if (isDragging.current && hasMoved && allowedDrag) {
+                // drag between group
+                const dataHoveredGhost = hoverUnderghostId.current;
+                hoverUnderghostId.current = null;
+                const sourceTable = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
+                const data = {
+                    targetTable: originalData({ id: dataHoveredGhost, type: "find" }),
+                    sourceTable: originalData({ id: sourceTable, type: "find" }),
+                };
+                const allowToSwitch = onSwitch && (data === null || data === void 0 ? void 0 : data.sourceTable) && (data === null || data === void 0 ? void 0 : data.targetTable);
+                allowToSwitch && onSwitch(e, data);
+                ghost.remove();
+                isDragging.current = false;
+                (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
+                tableGhost.current = null;
+            }
+            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;
+        // isDragging.current = false;
+        (_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.bounds;
+        const { positionX, positionY, scale } = instance.transformState;
+        let x = positionX + dx;
+        let y = positionY + dy;
+        if (x >= bounds.maxPositionX)
+            x = bounds.maxPositionX;
+        if (y >= bounds.maxPositionY)
+            y = bounds.maxPositionY;
+        if (y <= bounds.minPositionY)
+            y = bounds.minPositionY;
+        if (x <= bounds.minPositionX)
+            x = bounds.minPositionX;
+        setTransform(x, y, scale, 100, "linear");
+    };
+    // const instance = transformRef.current?.instance;
+    // console.log({ instance })
+    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();
+        // const viewBox = svg.viewBox.baseVal;
+        const xLeft = (clientX - svgRect.left + positionX) / scale;
+        const yTop = (clientY - svgRect.top + positionY) / scale;
+        const xRight = clientX - svgRect.left + positionX - svgRect.width / scale;
+        const yBottom = clientY - svgRect.top + positionY - svgRect.height / scale;
+        const minX = svgRect.left + positionX;
+        const minY = svgRect.top + positionY;
+        const maxX = svgRect.right;
+        const maxY = svgRect.bottom;
+        return [
+            xLeft,
+            yTop,
+            Math.abs(xRight),
+            Math.abs(yBottom),
+            minX,
+            minY,
+            maxX,
+            maxY,
+        ];
+    };
+    const onPanning = (e) => {
+        const [xLeft, yTop, xRight, yBottom, minX, minY, maxX, maxY] = getCoords(e);
+        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);
+        }
+    };
+    const hasBoundingBox = hasBoundingBoxRef.current;
+    return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+        } }, props.containerProps, { children: [loading && (_jsx("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", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsxs("svg", Object.assign({ id: "workspace", onContextMenu: (e) => e.preventDefault(), onDrop: (e) => handleTableEvent(e, "drop"), onPointerDown: handlePointerDown, onPointerUp: handleMouseUp, ref: svgRef, width: "100%", height: "100%", 
+                // scale={5}
+                overflow: "hidden", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                    background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+                    display: "block",
+                    pointerEvents: disabled ? "none" : "all",
+                    touchAction: "none",
+                    userSelect: "none",
+                } }, props.svgProps, { children: [hasBoundingBox && (_jsx("defs", { children: _jsx("clipPath", { id: "contentCrop", children: _jsx("rect", { x: boundingBox.minX, y: boundingBox.minY, width: boundingBox.width, height: boundingBox.height }) }) })), _jsx("g", { id: "main-layer", "clip-path": "url(#contentCrop)", children: _jsx(Layers, { components: [
+                                ...extraComponentsEditor,
+                                ...renderElements(componentsEditor, mappingKey, tableMatchKey),
+                            ], selectedTable: selectedTable, iconTags: iconTags, eventMatchTable: eventMatchTable, privilegedTags: privilegedTags }) })] })), tooltip.visible && (_jsx("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), children: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.children }))] })));
 };
 export default LayerView;

package/dist/features/view-only-3/index.js

@@ -7,7 +7,7 @@ import Layers from "../../components/layer-v4";
 import { getTranslate } from "../board-v3/utils";
 import { Spin } from "antd";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled = true, loadingRender, } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -315,12 +315,12 @@ const LayerView = (props) => {
         // clone element yang diklik
         let ghost = targetGroup.cloneNode(true);
         const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
-        const allowedDrag = !(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
+        const allowedDrag = (!(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
             ? true
             : (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
                 const dataRaw = originalData({ id: ghostId, type: "find" });
-                return _.value !== (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
-            });
+                return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+            })) && (!disabled);
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.3.36",
+  "version": "3.3.37",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",