seat-editor 3.3.43 → 3.3.45

package/dist/app/constant.d.ts

@@ -224,60 +224,67 @@ export declare const test1: {
     sections: any;
 }[];
 export declare const test4: ({
-    x: number;
-    y: number;
-    id: number;
-    fill: string;
-    tags: ({
-        gap: string;
-        key: string;
-        items: ({
-            type: string;
-            value: string;
-            fontSize: number;
+    status: string;
+    rsvp: number;
+    properties: {
+        x: number;
+        y: number;
+        id: number;
+        fill: string;
+        tags: ({
+            gap: string;
+            key: string;
+            items: ({
+                type: string;
+                value: string;
+                fontSize: number;
+            } | {
+                type: string;
+                value: string;
+                fontSize?: undefined;
+            })[];
+            direction: string;
+            offsetY?: undefined;
+            offsetX?: undefined;
         } | {
-            type: string;
-            value: string;
-            fontSize?: undefined;
+            gap: string;
+            key: string;
+            items: ({
+                type: string;
+                value: string;
+                fontSize: number;
+            } | {
+                type: string;
+                value: string;
+                fontSize?: undefined;
+            })[];
+            direction: string;
+            offsetY: number;
+            offsetX: number;
         })[];
-        direction: string;
-        offsetY?: undefined;
-        offsetX?: undefined;
-    } | {
-        gap: string;
-        key: string;
-        items: ({
-            type: string;
-            value: string;
+        shape: string;
+        width: number;
+        height: number;
+        labels: {
+            x: number;
+            y: number;
+            label: string;
             fontSize: number;
-        } | {
-            type: string;
-            value: string;
-            fontSize?: undefined;
-        })[];
-        direction: string;
-        offsetY: number;
-        offsetX: number;
-    })[];
-    shape: string;
-    width: number;
-    height: number;
-    labels: {
-        x: number;
-        y: number;
-        label: string;
-        fontSize: number;
-        fontColor: string;
-    }[];
-    opacity: number;
-    rotation: number;
-    seatCount: number;
-    uuid_table: string;
-    gapTags: number;
-    status?: undefined;
-    properties?: undefined;
+            fontColor: string;
+        }[];
+        opacity: number;
+        rotation: number;
+        seatCount: number;
+        uuid_table: string;
+        gapTags: number;
+        stroke?: undefined;
+        strokeWidth?: undefined;
+        text?: undefined;
+        status?: undefined;
+    };
 } | {
     status: string;
+    rsvp: number;
     properties: {
         x: number;
         y: number;
@@ -331,21 +338,8 @@ export declare const test4: ({
         opacity: number;
         rotation: number;
         seatCount: number;
+        uuid_table?: undefined;
     };
-    x?: undefined;
-    y?: undefined;
-    id?: undefined;
-    fill?: undefined;
-    tags?: undefined;
-    shape?: undefined;
-    width?: undefined;
-    height?: undefined;
-    labels?: undefined;
-    opacity?: undefined;
-    rotation?: undefined;
-    seatCount?: undefined;
-    uuid_table?: undefined;
-    gapTags?: undefined;
 })[];
 export declare const data4: ({
     uuid_table: string;

package/dist/app/constant.js

@@ -3364,79 +3364,84 @@ export const test1 = [
 ];
 export const test4 = [
     {
-        x: 359.7921676635742,
-        y: 109.07066345214844,
-        id: 1753965738978,
-        fill: "#bca16a",
-        tags: [
-            {
-                gap: "5",
-                key: "table",
-                items: [
-                    {
-                        type: "text",
-                        value: "VIP 1",
-                        fontSize: 10,
-                    },
-                    {
-                        type: "icon",
-                        value: "chair",
-                    },
-                ],
-                direction: "column",
-            },
-            {
-                gap: "8",
-                key: "pax",
-                items: [
-                    {
-                        type: "text",
-                        value: "8/2",
-                        fontSize: 10,
-                    },
-                    {
-                        type: "icon",
-                        value: "user",
-                    },
-                ],
-                direction: "flex",
-                offsetY: 1,
-                offsetX: 3,
-            },
-            {
-                gap: "2",
-                key: "rsvp_time",
-                items: [
-                    {
-                        type: "text",
-                        value: "17:30",
-                    },
-                ],
-                direction: "column",
-                offsetY: 1,
-                offsetX: 3,
-            },
-        ],
-        shape: "square",
-        width: 50,
-        height: 80,
-        labels: [
-            {
-                x: 0,
-                y: 4,
-                label: "V 1",
-                fontSize: 12,
-                fontColor: "#0d0c0c",
-            },
-        ],
-        opacity: 0.5,
-        rotation: 0,
-        seatCount: 0,
-        uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
-        gapTags: 20,
+        status: "nulls",
+        rsvp: 0,
+        properties: {
+            x: 359.7921676635742,
+            y: 109.07066345214844,
+            id: 1753965738978,
+            fill: "#bca16a",
+            tags: [
+                {
+                    gap: "5",
+                    key: "table",
+                    items: [
+                        {
+                            type: "text",
+                            value: "VIP 1",
+                            fontSize: 10,
+                        },
+                        {
+                            type: "icon",
+                            value: "chair",
+                        },
+                    ],
+                    direction: "column",
+                },
+                {
+                    gap: "8",
+                    key: "pax",
+                    items: [
+                        {
+                            type: "text",
+                            value: "8/2",
+                            fontSize: 10,
+                        },
+                        {
+                            type: "icon",
+                            value: "user",
+                        },
+                    ],
+                    direction: "flex",
+                    offsetY: 1,
+                    offsetX: 3,
+                },
+                {
+                    gap: "2",
+                    key: "rsvp_time",
+                    items: [
+                        {
+                            type: "text",
+                            value: "17:30",
+                        },
+                    ],
+                    direction: "column",
+                    offsetY: 1,
+                    offsetX: 3,
+                },
+            ],
+            shape: "square",
+            width: 50,
+            height: 80,
+            labels: [
+                {
+                    x: 0,
+                    y: 4,
+                    label: "V 1",
+                    fontSize: 12,
+                    fontColor: "#0d0c0c",
+                },
+            ],
+            opacity: 0.5,
+            rotation: 0,
+            seatCount: 0,
+            uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
+            gapTags: 20,
+        }
     },
     {
-        status: "hold",
+        status: "aduhhh",
+        rsvp: 1,
         properties: {
             x: 400,
             y: 20,

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

@@ -174,21 +174,18 @@ const TouchScrollDetect = () => {
                                         key: "rsvp_time",
                                         items: ["text", "icon"],
                                     },
-                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: testData === null || testData === void 0 ? void 0 : testData.map((item) => {
-                                    return {
-                                        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) => {
+                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: [], onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
                                     handleSelectTable(component);
-                                }, 
-                                // dragTableBlockKey={[
-                                //   {
-                                //     key: "is_lock",
-                                //     value: 1,
-                                //   },
-                                // ]}
-                                tableMatchKey: [
+                                }, dragTableBlockKey: [
+                                    {
+                                        key: "status",
+                                        value: null,
+                                    },
+                                    {
+                                        key: "rsvp",
+                                        value: 1
+                                    }
+                                ], tableMatchKey: [
                                     {
                                         key: 0,
                                         properties: { fill: "white" },
@@ -221,6 +218,6 @@ const TouchScrollDetect = () => {
                                     },
                                 ], viewStyles: {
                                     paddingTop: 200,
-                                }, disabled: false, transformProps: {} })] })] })] }));
+                                }, transformProps: {} })] })] })] }));
 };
 export default TouchScrollDetect;

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

@@ -198,21 +198,18 @@ const TouchScrollDetect = () => {
                 key: "rsvp_time",
                 items: ["text", "icon"],
             },
-        ]} 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,
-                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) => {
+        ]} defaultBackground="#000000" mappingKey="properties" componentProps={[]} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
-        }} 
-    // dragTableBlockKey={[
-    //   {
-    //     key: "is_lock",
-    //     value: 1,
-    //   },
-    // ]}
-    tableMatchKey={[
+        }} dragTableBlockKey={[
+            {
+                key: "status",
+                value: null,
+            },
+            {
+                key: "rsvp",
+                value: 1
+            }
+        ]} tableMatchKey={[
             {
                 key: 0,
                 properties: { fill: "white" },
@@ -245,7 +242,7 @@ const TouchScrollDetect = () => {
             },
         ]} viewStyles={{
             paddingTop: 200,
-        }} disabled={false} transformProps={{}}/>
+        }} transformProps={{}}/>
         </div>
       </div>
     </div>);

package/dist/components/layer-v4/index.js

@@ -280,7 +280,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0,0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, fill: fill, rx: radius }, omit(item, ["x", "y", "label", "points", "tags"]), commonProps), `${id}-rect`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, pointerEvents: "none", children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0,0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, fill: fill, rx: radius }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps), `${id}-rect`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, pointerEvents: "none", children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -331,7 +331,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: [" ", _jsxs("g", { transform: `rotate(${-rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, fill: fill }, commonProps, omit(item, ["x", "y", "label", "points", "tags"])), id), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: [" ", _jsxs("g", { transform: `rotate(${-rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: Math.min(height, width) / 2, fill: fill }, commonProps, omit(item, ["x", "y", "label", "points", "tags", "seatCount"])), id), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                         var _a, _b, _c, _d, _e, _f, _g;
                                         const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                         const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -398,7 +398,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d;
                                     return (_jsx("text", { x: width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
                                 }) }))] }) }, id));
@@ -523,7 +523,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: tableRadius, fill: fill }, omit(item, ["x", "y", "label", "points", "tags"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: width / 2, cy: height / 2, r: tableRadius, fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]), commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -625,7 +625,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotate}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags"]))), renderTags(tags), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotate}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), renderTags(tags), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -731,7 +731,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags"]))), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), _jsx("g", { "data-seat": `${id}-seats`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ d, id }, i) => (_jsx("path", { id: `seat-${id}`, d: d, fill: seatFill, className: item === null || item === void 0 ? void 0 : item.className }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -861,7 +861,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }, onMouseLeave: (e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags"]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                    }, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, rx: radius }, commonProps, { fill: fill }, omit(item, ["x", "y", "label", "points", "tags", "seatCount"]))), _jsx("g", { "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: seats === null || seats === void 0 ? void 0 : seats.map(({ height, width, x, y, id }, i) => (_jsx("rect", { x: x, y: y, id: `seat-${id}`, height: height, width: width, rx: radius / 4, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), renderTags(tags), showLabels && (_jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);

package/dist/features/board-v3/index.d.ts

@@ -13,5 +13,5 @@ interface BoardTemplateProps {
     };
     disabled?: boolean;
 }
-declare const BoardTemplate: ({ refs, loadingRender, disabled }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ refs, loadingRender, disabled, }: BoardTemplateProps) => React.JSX.Element;
 export default BoardTemplate;

package/dist/features/board-v3/index.js

@@ -15,7 +15,7 @@ import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlo
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
@@ -1312,7 +1312,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 let y2 = [];
                 allElementSelectionGroup.forEach((element) => {
                     const activeId = element.id;
-                    const { g, inner, element: el } = getAttributeElement(svg, String(activeId));
+                    const { g, inner, element: el, } = getAttributeElement(svg, String(activeId));
                     const { x, y, width, height } = getGlobalBBox(svg, g);
                     xs.push(x);
                     ys.push(y);
@@ -1547,7 +1547,13 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             });
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
+                            select: false,
+                            move: false,
+                            switch: false,
+                            drop: false,
+                            rightClick: false,
+                        } }), _jsx("div", { className: "flex gap-2 mt-2", children: _jsxs(Radio.Group, { value: isShowTagType, onChange: handleCheckPreview, children: [_jsx(Radio, { value: "default", children: "Default" }), _jsx(Radio, { value: "type-1", children: "Type 1" }), _jsx(Radio, { value: "type-2", children: "Type 2" })] }) })] }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
                         // limitToBounds={true}
                         panning: {
                             disabled: [
@@ -1558,7 +1564,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                                 "table-seat-circle",
                                 "table-seat-square",
                                 "bounding-box",
-                                ""
+                                "",
                             ].includes(activeTool),
                         }, 
                         // centerZoomedOut={true}

package/dist/features/board-v3/index.jsx

@@ -14,7 +14,7 @@ import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlo
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
-const BoardTemplate = ({ refs, loadingRender, disabled = false }) => {
+const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     const dispatch = useAppDispatch();
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const selectedComponentProps = useAppSelector((state) => state.panel.selectedComponent);
@@ -1311,7 +1311,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false }) => {
                 let y2 = [];
                 allElementSelectionGroup.forEach((element) => {
                     const activeId = element.id;
-                    const { g, inner, element: el } = getAttributeElement(svg, String(activeId));
+                    const { g, inner, element: el, } = getAttributeElement(svg, String(activeId));
                     const { x, y, width, height } = getGlobalBBox(svg, g);
                     xs.push(x);
                     ys.push(y);
@@ -1548,7 +1548,13 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false }) => {
     };
     return (<>
       <ModalPreview>
-        <LayerView statusKey="status" loadingRender={loadingRender} disabled={disabled}/>
+        <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
+            select: false,
+            move: false,
+            switch: false,
+            drop: false,
+            rightClick: false,
+        }}/>
         <div className="flex gap-2 mt-2">
           <Radio.Group value={isShowTagType} onChange={handleCheckPreview}>
             <Radio value="default">Default</Radio>
@@ -1575,7 +1581,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false }) => {
                 "table-seat-circle",
                 "table-seat-square",
                 "bounding-box",
-                ""
+                "",
             ].includes(activeTool),
         }} 
     // centerZoomedOut={true}

package/dist/features/package/index.js

@@ -161,6 +161,12 @@ const TableEditor = (props) => {
         props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
         loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
     ]);
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative", children: viewOnly ? (_jsx("div", { className: "w-full h-full flex relative", children: _jsx(LayerView, { statusKey: "status", loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [(loading && !isPreview) && (_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(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative", children: viewOnly ? (_jsx("div", { className: "w-full h-full flex relative", children: _jsx(LayerView, { statusKey: "status", loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, actionPrivileged: {
+                        select: false,
+                        move: false,
+                        switch: false,
+                        drop: false,
+                        rightClick: false,
+                    } }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [loading && !isPreview && (_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(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
 };
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -163,9 +163,15 @@ const TableEditor = (props) => {
     return (<>
       <div className="w-full h-screen flex relative">
         {viewOnly ? (<div className="w-full h-full flex relative">
-            <LayerView key={`${viewOnly}`} statusKey="status" loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender}/>
+            <LayerView key={`${viewOnly}`} statusKey="status" loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} actionPrivileged={{
+                select: false,
+                move: false,
+                switch: false,
+                drop: false,
+                rightClick: false,
+            }}/>
           </div>) : (<div key={`${viewOnly}`} className="w-full h-full flex relative">
-            {(loading && !isPreview) && (<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">
+            {loading && !isPreview && (<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>)}
             <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>

package/dist/features/panel/upload-tool.d.ts

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadTool: ({ name, type, action, defaultValue, transform }: UploadToolProps) => import("react").JSX.Element;
+declare const UploadTool: ({ name, type, action, defaultValue, transform, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/panel/upload-tool.js

@@ -16,7 +16,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
-const UploadTool = ({ name, type, action, defaultValue, transform }) => {
+const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     // const src = Form.useWatch("src");
     // const height = Form.useWatch("height");
     // const width = Form.useWatch("width");
@@ -47,7 +47,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
     const widthWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
     const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
     const defaultFormatValue = (width, height, src, id, x, y) => ({
-        id: String(id) || `${Date.now()}`,
+        id: id ? String(id) : `${Date.now()}`,
         x: x || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
         y: y || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
         width: width < 1 ? 200 : width,
@@ -145,6 +145,6 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), _jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }));
+    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), defaultSrc && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
 };
 export default UploadTool;

package/dist/features/panel/upload-tool.jsx

@@ -15,7 +15,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
-const UploadTool = ({ name, type, action, defaultValue, transform }) => {
+const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     // const src = Form.useWatch("src");
     // const height = Form.useWatch("height");
     // const width = Form.useWatch("width");
@@ -168,9 +168,10 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
               </p>
             </>)}
         </Dragger>)}
-
-      <SectionShape allowChangeShape={type === "component"}/>
-      <SectionLabel />
+      {defaultSrc && (<>
+          <SectionShape allowChangeShape={type === "component"}/>
+          <SectionLabel />
+        </>)}
     </Form.Item>);
 };
 export default UploadTool;

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

@@ -77,13 +77,19 @@ export interface LayerViewProps<TMeta = undefined> {
         paddingRight?: number;
         paddingBottom?: number;
     };
-    disabled?: boolean;
     loadingRender?: {
         state: boolean;
         element: React.JSX.Element;
     };
     defaultBoundingBox?: PropertiesProps;
     viewOnly?: boolean;
+    actionPrivileged?: {
+        select: boolean;
+        move: boolean;
+        switch: boolean;
+        drop: boolean;
+        rightClick: boolean;
+    };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

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

@@ -6,7 +6,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, 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);
@@ -132,13 +138,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 };
         }
@@ -196,10 +202,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 {
@@ -210,10 +216,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) => {
@@ -271,7 +277,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") ||
@@ -316,10 +322,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]);
@@ -539,15 +545,24 @@ 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",
         } }, 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: {
+                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: [

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

@@ -5,7 +5,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);
@@ -131,8 +137,8 @@ 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);
     };
@@ -270,7 +276,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") ||
@@ -315,10 +321,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]);
@@ -560,7 +566,7 @@ const LayerView = (props) => {
     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}>

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

@@ -77,13 +77,19 @@ export interface LayerViewProps<TMeta = undefined> {
         paddingRight?: number;
         paddingBottom?: number;
     };
-    disabled?: boolean;
     loadingRender?: {
         state: boolean;
         element: React.JSX.Element;
     };
     defaultBoundingBox?: PropertiesProps;
     viewOnly?: boolean;
+    actionPrivileged?: {
+        select: boolean;
+        move: boolean;
+        switch: boolean;
+        drop: boolean;
+        rightClick: boolean;
+    };
 }
 declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
 export default LayerView;

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

@@ -6,7 +6,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);
@@ -132,8 +138,8 @@ 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);
     };
@@ -271,7 +277,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") ||
@@ -316,10 +322,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]);
@@ -426,8 +432,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" }),
@@ -439,6 +445,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;
@@ -574,18 +581,18 @@ 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",
         }}>
           <svg 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={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}>

package/package.json

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