seat-editor 3.3.43 → 3.3.44

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

@@ -7,7 +7,13 @@ 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 = true, loadingRender, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, 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
+    } } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -93,7 +99,7 @@ const LayerView = (props) => {
         defaultBackground,
         loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
         props === null || props === void 0 ? void 0 : props.viewOnly,
-        defaultBoundingBox
+        defaultBoundingBox,
     ]);
     useEffect(() => {
         setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
@@ -133,13 +139,13 @@ const LayerView = (props) => {
         });
         const rightClick = e.button === 2;
         const click = e.button === 0;
-        onRightClick && rightClick && onRightClick(e, find);
-        onSelectComponent && !rightClick && onSelectComponent(find);
+        (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);
         const seletedTable = mappingKey ? find[mappingKey] : find;
         setSelectedTable(seletedTable);
     };
     const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
             return { minX: 0, minY: 0, width: 500, height: 500 };
         }
@@ -197,10 +203,10 @@ const LayerView = (props) => {
         if (hasBoundingBox) {
             hasBoundingBoxRef.current = true;
             return {
-                minX: boundingBoxProps.x,
-                minY: boundingBoxProps.y,
-                width: boundingBoxProps.width,
-                height: boundingBoxProps.height,
+                minX: boundingBoxProps.x - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
+                minY: boundingBoxProps.y - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
+                width: boundingBoxProps.width + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
+                height: boundingBoxProps.height + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
             };
         }
         // return {
@@ -211,10 +217,10 @@ const LayerView = (props) => {
         // };
         // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
         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),
+            minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
+            minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
+            width: maxX + (((_o = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _o === void 0 ? void 0 : _o.paddingRight) || 0),
+            height: maxY + (((_p = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _p === void 0 ? void 0 : _p.paddingBottom) || 0),
         };
     }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -272,7 +278,7 @@ const LayerView = (props) => {
             };
             // drop from out layout editor
             if (type === "drop") {
-                onDrop && onDrop(event, data);
+                (onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop)) && onDrop(event, data);
             }
             // cari elemen bentuk (rect / circle / path)
             const shape = group.querySelector("rect") ||
@@ -317,10 +323,10 @@ const LayerView = (props) => {
         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((_) => {
+            : !((_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);
+                return _.value === (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+            }))) && !(actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);
@@ -346,35 +352,35 @@ const LayerView = (props) => {
         };
         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) {
+                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;
                 ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
             }
         };
@@ -427,8 +433,8 @@ const LayerView = (props) => {
             }
             if (isDragging.current && hasMoved && allowedDrag) {
                 // drag between group
+                console.log("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" }),
@@ -440,6 +446,7 @@ const LayerView = (props) => {
                 isDragging.current = false;
                 (_a = tableGhost.current) === null || _a === void 0 ? void 0 : _a.remove();
                 tableGhost.current = null;
+                hoverUnderghostId.current = null;
             }
             setPanningGroup(false);
             tableGhost.current = null;
@@ -540,11 +547,18 @@ const LayerView = (props) => {
         }
     };
     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";
     return (_jsxs("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
             overflow: "auto",
             WebkitOverflowScrolling: "touch",
-            filter: disabled ? "grayscale(100%)" : "none",
-            pointerEvents: disabled ? "none" : "auto",
         } }, 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, {}) })), _jsx(TransformWrapper, Object.assign({ ref: transformRef, 
                 // disabled={fingerCount === 1 && scale === 1}
                 disablePadding: true, centerZoomedOut: true, panning: {
@@ -556,20 +570,20 @@ const LayerView = (props) => {
                         width: "100%",
                         height: "100%",
                         // overflow: "visible",
-                        pointerEvents: disabled ? "none" : "auto",
+                        // pointerEvents: disabled ? "none" : "auto",
                     }, contentStyle: {
                         width: "100%",
                         height: "100%",
-                        pointerEvents: disabled ? "none" : "auto",
+                        // pointerEvents: disabled ? "none" : "auto",
                     }, children: [_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: {
+                            overflow: "hidden", viewBox: viewBox, 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",
+                                // 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: [
+                            } }, 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", clipPath: "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 }))] }) }))] })));

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

@@ -294,7 +294,7 @@ const LayerView = (props) => {
         return { x: transformed.x, y: transformed.y };
     };
     const handlePointerDown = (e) => {
-        var _a;
+        var _a, _b;
         const svg = svgRef.current;
         if (!e.isPrimary)
             return;
@@ -320,6 +320,10 @@ const LayerView = (props) => {
                 const dataRaw = originalData({ id: ghostId, type: "find" });
                 return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
             })) && !disabled;
+        console.log({ allowedDrag }, (_b = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _b === void 0 ? void 0 : _b.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]);

package/dist/provider/redux-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const ReduxProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/provider/store-provider.d.ts

@@ -1,4 +1,4 @@
 export declare const StoreProvider: ({ children, themeColor, }: {
     children: React.ReactNode;
     themeColor?: string;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/package.json

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