seat-editor 3.4.4 → 3.4.5

package/dist/app/constant.d.ts

@@ -347,11 +347,12 @@ export declare const data4: ({
         x: number;
         y: number;
         labels: {
+            label: string;
+            fontColor: string;
             x: number;
             y: number;
-            label: string;
             fontSize: number;
-            fontColor: string;
+            rotation: number;
         }[];
         id: string;
         stroke: string;
@@ -418,19 +419,14 @@ export declare const data4: ({
         })[];
         opacity: number;
         rotation: number;
-        seatCount: number;
         openSpace: number;
         seatFill: string;
-        seatPositions: {
-            top: number;
-            bottom: number;
-            left: number;
-            right: number;
-        };
         radius?: undefined;
+        seatCount?: undefined;
     };
 } | {
     status: number;
+    capacity: number;
     properties: {
         x: number;
         y: number;
@@ -512,19 +508,19 @@ export declare const data4: ({
             offsetX?: undefined;
             offsetY?: undefined;
         })[];
-        seatPositions: {
-            top: number;
-            bottom: number;
-            left: number;
-            right: number;
-        };
         opacity: number;
         rotation: number;
-        seatCount: number;
-        labels?: undefined;
+        labels: {
+            label: string;
+            fontColor: string;
+            x: number;
+            y: number;
+            fontSize: number;
+            rotation: number;
+        }[];
+        seatCount?: undefined;
     };
     uuid_table?: undefined;
-    capacity?: undefined;
 } | {
     properties: {
         x: number;
@@ -580,7 +576,6 @@ export declare const data4: ({
         seatCount: number;
         openSpace?: undefined;
         seatFill?: undefined;
-        seatPositions?: undefined;
         radius?: undefined;
     };
     uuid_table?: undefined;

package/dist/app/constant.js

@@ -3437,7 +3437,7 @@ export const test4 = [
             seatCount: 0,
             uuid_table: "d088bba0-e990-410e-aea9-08548175a0b9",
             gapTags: 20,
-        }
+        },
     },
     {
         status: 1,
@@ -3527,17 +3527,18 @@ export const data4 = [
     {
         uuid_table: "axxxxx",
         status: 0,
-        capacity: 5,
+        capacity: 4,
         properties: {
             x: 500,
             y: 520,
             labels: [
                 {
+                    label: "3",
+                    fontColor: "#000000",
                     x: 0,
-                    y: 27,
-                    label: "New Table 5",
+                    y: 0,
                     fontSize: 12,
-                    fontColor: "#0d0c0c",
+                    rotation: 0,
                 },
             ],
             id: "1761194669729132000",
@@ -3613,15 +3614,15 @@ export const data4 = [
             ],
             opacity: 1,
             rotation: 0,
-            seatCount: 10,
+            // seatCount: 10,
             openSpace: 0.3,
             seatFill: "#ed8989",
-            seatPositions: {
-                top: 3,
-                bottom: 3,
-                left: 3,
-                right: 3,
-            },
+            // seatPositions: {
+            //   top: 3,
+            //   bottom: 3,
+            //   left: 3,
+            //   right: 3,
+            // },
         },
     },
     // {
@@ -3881,6 +3882,7 @@ export const data4 = [
     // },
     {
         status: 2,
+        capacity: 4,
         properties: {
             x: 100,
             y: 100,
@@ -3959,15 +3961,25 @@ export const data4 = [
                     gap: 2,
                 },
             ],
-            seatPositions: {
-                top: 1,
-                bottom: 1,
-                left: 1,
-                right: 1,
-            },
+            // seatPositions: {
+            //   top: 1,
+            //   bottom: 1,
+            //   left: 1,
+            //   right: 1,
+            // },
             opacity: 1,
             rotation: 0,
-            seatCount: 6,
+            labels: [
+                {
+                    label: "3",
+                    fontColor: "#000000",
+                    x: 0,
+                    y: 0,
+                    fontSize: 12,
+                    rotation: 0,
+                },
+            ],
+            // seatCount: 6,
         },
     },
     {
@@ -5569,7 +5581,7 @@ export const dummyExtra6 = [
     {
         x: 100,
         y: 100,
-        id: '1754137739279',
+        id: "1754137739279",
         src: "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1754137739126863915_BOI Reg.png",
         fill: "red",
         // image:

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

@@ -174,7 +174,7 @@ const TouchScrollDetect = () => {
                                         key: "rsvp_time",
                                         items: ["text", "icon"],
                                     },
-                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: [], onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
+                                ], defaultBackground: "#000000", mappingKey: "properties", componentProps: [], onDoubleClick: (data) => console.log(data), onDrop: (e, data) => handleDrop(e, data), onSwitch: (e, data) => handleSwitch(e, data), extraComponentProps: [], onSelectComponent: (component) => {
                                     handleSelectTable(component);
                                 }, dragTableBlockKey: [
                                     {
@@ -216,8 +216,10 @@ const TouchScrollDetect = () => {
                                         icon: _jsx(UserIcon, {}),
                                         key: "user",
                                     },
-                                ], viewStyles: {
-                                    paddingTop: 200,
-                                }, transformProps: {} })] })] })] }));
+                                ], 
+                                // viewStyles={{
+                                //   paddingTop: 10,
+                                // }}
+                                transformProps: {} })] })] })] }));
 };
 export default TouchScrollDetect;

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

@@ -198,7 +198,7 @@ const TouchScrollDetect = () => {
                 key: "rsvp_time",
                 items: ["text", "icon"],
             },
-        ]} defaultBackground="#000000" mappingKey="properties" componentProps={[]} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+        ]} defaultBackground="#000000" mappingKey="properties" componentProps={[]} onDoubleClick={(data) => console.log(data)} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
         }} dragTableBlockKey={[
             {
@@ -240,9 +240,11 @@ const TouchScrollDetect = () => {
                 icon: <UserIcon />,
                 key: "user",
             },
-        ]} viewStyles={{
-            paddingTop: 200,
-        }} transformProps={{}}/>
+        ]} 
+    // viewStyles={{
+    //   paddingTop: 10,
+    // }}
+    transformProps={{}}/>
         </div>
       </div>
     </div>);

package/dist/components/form-tools/label.js

@@ -1,25 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider, } from "antd";
 const SectionLabel = () => {
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Form.Item, { label: "Labels in table", name: "labels", className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { className: "w-full", children: [_jsx(Flex, { gap: 5, className: "w-full flex justify-between", children: _jsx(Form.Item, { name: [field.name, "label"], label: "Text", className: "w-full", children: _jsx(Input, {}) }) }), _jsxs(Flex, { gap: 5, className: "w-full flex justify-between", children: [_jsx(Form.Item, { name: [field.name, "x"], label: "Position X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Position Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Section Labeling" }), _jsx(Divider, { style: { margin: 4 } }), _jsx(Form.Item, { label: "Labels in table", name: "labels", className: "w-full", children: _jsx(Form.List, { name: "labels", children: (fields, { add, remove }) => (_jsxs(_Fragment, { children: [fields.map((field) => (_jsxs("div", { className: "w-full flex-col mb-2", children: [_jsx(Flex, { gap: 5, className: "w-full flex justify-between", children: _jsx(Form.Item, { name: [field.name, "label"], label: "Text", className: "w-full", children: _jsx(Input, {}) }) }), _jsxs(Flex, { gap: 5, className: "w-full flex justify-between", children: [_jsx(Form.Item, { name: [field.name, "x"], label: "Position X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "y"], label: "Position Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: [field.name, "rotation"], label: "Rotation", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
                                                         if (!value)
                                                             return 0;
                                                         const num = Number(value.replace(/\D/g, ""));
                                                         if (Number.isNaN(num))
                                                             return 0;
                                                         return Math.min(360, Math.max(0, num));
-                                                    } }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] })] }, field.key))), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Button
-                                    // type="dashed"
-                                    , { 
+                                                    } }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), fields.length < 2 && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Button
                                         // type="dashed"
-                                        onClick: () => remove(fields.length - 1), className: "w-full", children: "Remove" }), _jsx(Button, { type: "primary", onClick: () => add({
-                                            label: "",
-                                            fontColor: "#000000",
-                                            x: 0,
-                                            y: 0,
-                                            fontSize: 12,
-                                            rotation: 0
-                                        }), className: "w-full", children: "Add" })] })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
+                                        , { 
+                                            // type="dashed"
+                                            onClick: () => remove(fields.indexOf(field)), className: "w-full", children: "Remove" }) }))] }, field.key))), _jsx(Flex, { gap: 2, className: "w-full mt-2", children: _jsx(Button, { type: "primary", onClick: () => add({
+                                        label: "",
+                                        fontColor: "#000000",
+                                        x: 0,
+                                        y: 0,
+                                        fontSize: 12,
+                                        rotation: 0,
+                                    }), className: "w-full", children: "Add" }) })] })) }) }), _jsx("div", { className: "divider-dashed" })] }));
 };
 export default SectionLabel;

package/dist/components/form-tools/label.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider, } from "antd";
 const SectionLabel = () => {
     return (<div className="py-2">
       <h1 className="heading-s">Section Labeling</h1>
@@ -8,12 +8,11 @@ const SectionLabel = () => {
       <Form.Item label="Labels in table" name={"labels"} className="w-full">
         <Form.List name="labels">
           {(fields, { add, remove }) => (<>
-              {fields.map((field) => (<div key={field.key} className="w-full">
+              {fields.map((field) => (<div key={field.key} className="w-full flex-col mb-2">
                   <Flex gap={5} className="w-full flex justify-between">
                     <Form.Item name={[field.name, "label"]} label="Text" className="w-full">
                       <Input />
                     </Form.Item>
-                   
                   </Flex>
                   <Flex gap={5} className="w-full flex justify-between">
                     <Form.Item name={[field.name, "x"]} label="Position X">
@@ -41,21 +40,29 @@ const SectionLabel = () => {
                       <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                     </Form.Item>
                   </Flex>
+                  {fields.length < 2 && (<Flex gap={2} className="w-full">
+                      <Button 
+                // type="dashed"
+                onClick={() => remove(fields.indexOf(field))} className="w-full">
+                        Remove
+                      </Button>
+                    </Flex>)}
                 </div>))}
-              <Flex gap={2} className="w-full">
-               
-                <Button 
-        // type="dashed"
-        onClick={() => remove(fields.length - 1)} className="w-full">
-                  Remove
-                </Button>
+              <Flex gap={2} className="w-full mt-2">
+                {/* <Button
+              // type="dashed"
+              onClick={() => remove(fields.length - 1)}
+              className="w-full"
+            >
+              Remove
+            </Button> */}
                 <Button type="primary" onClick={() => add({
                 label: "",
                 fontColor: "#000000",
                 x: 0,
                 y: 0,
                 fontSize: 12,
-                rotation: 0
+                rotation: 0,
             })} className="w-full">
                   Add
                 </Button>

package/dist/components/form-tools/shape.js

@@ -72,7 +72,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
                             const num = Number(cleaned);
                             if (Number.isNaN(num))
                                 return null;
-                            return Math.min(0, Math.max(0, num));
+                            return Math.min(100, Math.max(0, num));
                         }, suffix: "%" }) }) })] }));
 };
 export default SectionShape;

package/dist/components/form-tools/shape.jsx

@@ -117,7 +117,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
             const num = Number(cleaned);
             if (Number.isNaN(num))
                 return null;
-            return Math.min(0, Math.max(0, num));
+            return Math.min(100, Math.max(0, num));
         }} suffix="%"/>
         </Form.Item>
       </Flex>

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

@@ -210,14 +210,14 @@ const boardSlice = createSlice({
                     state.pointer -= 1;
                 }
                 const prev = state.historyChanges[state.pointer];
-                state.components = current(prev === null || prev === void 0 ? void 0 : prev.components);
-                state.extraComponents = current(prev === null || prev === void 0 ? void 0 : prev.extraComponents);
+                state.components = prev === null || prev === void 0 ? void 0 : prev.components;
+                state.extraComponents = prev === null || prev === void 0 ? void 0 : prev.extraComponents;
                 state.boundingBox = prev === null || prev === void 0 ? void 0 : prev.boundingBox;
                 state.backgroundColor = prev === null || prev === void 0 ? void 0 : prev.backgroundColor;
             }
             else if (state.pointer === 1) {
-                state.components = current((_b = (_a = state.historyChanges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.components);
-                state.extraComponents = current((_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents);
+                state.components = (_b = (_a = state.historyChanges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.components;
+                state.extraComponents = (_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents;
                 state.boundingBox = (_f = (_e = state.historyChanges) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.boundingBox;
                 state.backgroundColor = (_h = (_g = state.historyChanges) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.backgroundColor;
                 state.pointer = 0;

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

@@ -340,7 +340,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
         const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
-        console.log({ isInitialCreateText, }, isCreateElementRef.current);
+        // console.log({isInitialCreateText,},isCreateElementRef.current)
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -432,7 +432,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
-            console.log("downOutSelectionBox");
+            // console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -854,6 +854,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
                 const svg = svgRef.current;
                 const { g, element, seats, seatGroup } = getAttributeElement(svg, activeId);
+                const isZeroRotate = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) === 0 && !(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape.includes("circle"));
                 const elementSelect = {
                     x: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x,
                     y: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y,
@@ -878,6 +879,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     dy,
                     rotate: 0,
                     handle: resizeSide,
+                    isZeroRotate,
                 });
                 updateSelectionGuides(svg, resultSelection, {
                     vLeft: "v-left",
@@ -890,8 +892,26 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 updateSelectionBox(svg, resultSelection, activeId);
                 const scaleX = resultSelection.width / oldSel.width;
                 const scaleY = resultSelection.height / oldSel.height;
-                const newWidth = elementSelect.width * scaleX;
-                const newHeight = elementSelect.height * scaleY;
+                let newWidth = elementSelect.width * scaleX;
+                let newHeight = elementSelect.height * scaleY;
+                if (isZeroRotate) {
+                    if (resizeSide === "right") {
+                        newWidth = elementSelect.width + dx;
+                        newHeight = elementSelect.height;
+                    }
+                    else if (resizeSide === "bottom") {
+                        newWidth = elementSelect.width;
+                        newHeight = elementSelect.height + dy;
+                    }
+                    else if (resizeSide === "left") {
+                        newWidth = elementSelect.width - dx;
+                        newHeight = elementSelect.height;
+                    }
+                    else if (resizeSide === "top") {
+                        newWidth = elementSelect.width;
+                        newHeight = elementSelect.height - dy;
+                    }
+                }
                 // Jarak relatif element dari pojok kiri atas selection (sebelum resize)
                 const relativeX = elementSelect.x - oldSel.x;
                 const relativeY = elementSelect.y - oldSel.y;

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

@@ -339,7 +339,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
         const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
-        console.log({ isInitialCreateText, }, isCreateElementRef.current);
+        // console.log({isInitialCreateText,},isCreateElementRef.current)
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -431,7 +431,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             hadSelectionRef.current = true;
         }
         if (downOutSelectionBox) {
-            console.log("downOutSelectionBox");
+            // console.log("downOutSelectionBox");
             hadSelectionRef.current = false;
             onMoveSelectionBoxRef.current = false;
             handleUnSelectComponent();
@@ -853,6 +853,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
                 const svg = svgRef.current;
                 const { g, element, seats, seatGroup } = getAttributeElement(svg, activeId);
+                const isZeroRotate = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) === 0 && !(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape.includes("circle"));
                 const elementSelect = {
                     x: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x,
                     y: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y,
@@ -877,6 +878,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     dy,
                     rotate: 0,
                     handle: resizeSide,
+                    isZeroRotate,
                 });
                 updateSelectionGuides(svg, resultSelection, {
                     vLeft: "v-left",
@@ -889,8 +891,26 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 updateSelectionBox(svg, resultSelection, activeId);
                 const scaleX = resultSelection.width / oldSel.width;
                 const scaleY = resultSelection.height / oldSel.height;
-                const newWidth = elementSelect.width * scaleX;
-                const newHeight = elementSelect.height * scaleY;
+                let newWidth = elementSelect.width * scaleX;
+                let newHeight = elementSelect.height * scaleY;
+                if (isZeroRotate) {
+                    if (resizeSide === "right") {
+                        newWidth = elementSelect.width + dx;
+                        newHeight = elementSelect.height;
+                    }
+                    else if (resizeSide === "bottom") {
+                        newWidth = elementSelect.width;
+                        newHeight = elementSelect.height + dy;
+                    }
+                    else if (resizeSide === "left") {
+                        newWidth = elementSelect.width - dx;
+                        newHeight = elementSelect.height;
+                    }
+                    else if (resizeSide === "top") {
+                        newWidth = elementSelect.width;
+                        newHeight = elementSelect.height - dy;
+                    }
+                }
                 // Jarak relatif element dari pojok kiri atas selection (sebelum resize)
                 const relativeX = elementSelect.x - oldSel.x;
                 const relativeY = elementSelect.y - oldSel.y;

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

@@ -9,7 +9,7 @@ export declare const resizeElementSelection: ({ selectionStart, currentSelection
     width: number;
     height: number;
 };
-export declare function resizeBox({ box, dx, dy, rotate, handle }: {
+export declare function resizeBox({ box, dx, dy, rotate, handle, isZeroRotate, }: {
     box: {
         x: number;
         y: number;
@@ -20,6 +20,7 @@ export declare function resizeBox({ box, dx, dy, rotate, handle }: {
     dy: number;
     rotate: number;
     handle: ResizeHandle;
+    isZeroRotate?: boolean;
 }): {
     x: number;
     y: number;

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

@@ -43,7 +43,7 @@ export const resizeElementSelection = ({ selectionStart, currentSelection, rotat
         height,
     };
 };
-export function resizeBox({ box, dx, dy, rotate, handle }) {
+export function resizeBox({ box, dx, dy, rotate, handle, isZeroRotate = false, }) {
     // 1. mouse → local
     const local = toLocalDelta(dx, dy, rotate);
     // 2. scale
@@ -52,11 +52,37 @@ export function resizeBox({ box, dx, dy, rotate, handle }) {
     // 3. anchor
     const { ax, ay } = getAnchor(handle, box);
     // 4. ukuran baru
-    const newWidth = box.width * scale;
-    const newHeight = box.height * scale;
+    let newWidth = box.width * scale;
+    let newHeight = box.height * scale;
     // 5. posisi baru dari anchor
-    const newX = ax - newWidth * ((ax - box.x) / box.width);
-    const newY = ay - newHeight * ((ay - box.y) / box.height);
+    let newX = ax - newWidth * ((ax - box.x) / box.width);
+    let newY = ay - newHeight * ((ay - box.y) / box.height);
+    if (isZeroRotate) {
+        if (handle === "right") {
+            newWidth = box.width + local.x;
+            newHeight = box.height;
+            newX = box.x;
+            newY = box.y;
+        }
+        else if (handle === "left") {
+            newWidth = box.width - local.x;
+            newX = box.x + local.x;
+            newHeight = box.height;
+            newY = box.y;
+        }
+        else if (handle === "bottom") {
+            newHeight = box.height + local.y;
+            newWidth = box.width;
+            newX = box.x;
+            newY = box.y;
+        }
+        else if (handle === "top") {
+            newHeight = box.height - local.y;
+            newY = box.y + local.y;
+            newWidth = box.width;
+            newX = box.x;
+        }
+    }
     return {
         x: newX,
         y: newY,
@@ -366,17 +392,17 @@ export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement,
         start: newElement.y,
         length: newElement.height,
         count: rightCount,
-        radius: r,
+        radius: seatRaidus,
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+        cx: newElement.x + newElement.width + seatRaidus * 0.1,
         cy,
         id: "right",
         d: arcByDirection({
-            cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+            cx: newElement.x + newElement.width + seatRaidus * 0.1,
             cy,
-            r,
+            r: seatRaidus,
             direction: "right",
             fraction: 0.4,
         }),
@@ -466,7 +492,7 @@ export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingHeight,
     });
     const leftSeats = leftYs.map((cy) => ({
-        x: -seatSizeLR.w,
+        x: x - seatSizeLR.w,
         y: cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
@@ -494,7 +520,7 @@ export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        x: width,
+        x: x + width,
         y: cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
@@ -583,22 +609,22 @@ export const resizeSeatRectSquare = ({ seatsPositions, r = 10, openSpace, newEle
         spacing: spacingWidth,
     });
     const topSeats = topXs.map((cx) => ({
-        x: (cx) - seatSizeTB.w / 2,
+        x: cx - seatSizeTB.w / 2,
         y: y - seatSizeTB.h,
         width: seatSizeTB.w,
         height: seatSizeTB.h,
         id: "top",
     }));
     const leftYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: height,
         count: leftCount,
         radius: seatRadius,
         spacing: spacingHeight,
     });
     const leftSeats = leftYs.map((cy) => ({
-        x: -seatSizeLR.w,
-        y: cy - seatSizeLR.h / 2,
+        x: x - seatSizeLR.w,
+        y: y + cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
         id: "left",
@@ -618,15 +644,15 @@ export const resizeSeatRectSquare = ({ seatsPositions, r = 10, openSpace, newEle
         id: "bottom",
     }));
     const rightYs = distributeWithSpacing({
-        start: newElement.y,
+        start: 0,
         length: newElement.height,
         count: rightCount,
         radius: seatRadius,
         spacing: spacingHeight,
     });
     const rightSeats = rightYs.map((cy) => ({
-        x: width,
-        y: cy - seatSizeLR.h / 2,
+        x: x + width,
+        y: y + cy - seatSizeLR.h / 2,
         width: seatSizeLR.w,
         height: seatSizeLR.h,
         id: "right",