round numbers

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -22,6 +22,27 @@ type ObjectSettingsProps = {
     onDelete: (id: string) => void;
 };
 
+const roundNumbersDeep = <T,>(value: T): T => {
+    if (typeof value === "number") {
+        return Math.round(value) as T;
+    }
+
+    if (Array.isArray(value)) {
+        return value.map((item) => roundNumbersDeep(item)) as T;
+    }
+
+    if (value && typeof value === "object") {
+        const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => {
+            acc[key] = roundNumbersDeep(nestedValue);
+            return acc;
+        }, {});
+
+        return roundedObject as T;
+    }
+
+    return value;
+};
+
 const ObjectSettings = ({
     selectedObject,
     pageWidth,
@@ -29,6 +50,12 @@ const ObjectSettings = ({
     onUpdate,
     onDelete,
 }: ObjectSettingsProps) => {
+    const roundedSelectedObject = roundNumbersDeep(selectedObject);
+
+    const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
+        onUpdate(id, roundNumbersDeep(updates));
+    };
+
     return (
         <div className="space-y-4">
             <div className="flex items-center justify-between pb-4">
@@ -44,54 +71,54 @@ const ObjectSettings = ({
             <AlignmentSettings
                 pageWidth={pageWidth}
                 pageHeight={pageHeight}
-                onUpdate={onUpdate}
+                onUpdate={handleRoundedUpdate}
             />
 
             {/* Mask Settings for all objects */}
-            <MaskSettings objectId={selectedObject.id} />
+            <MaskSettings objectId={roundedSelectedObject.id} />
 
-            {selectedObject.type === "text" && <TextInstruction />}
-            {selectedObject.type === "text" && (
-                <TextSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "text" && <TextInstruction />}
+            {roundedSelectedObject.type === "text" && (
+                <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-            {selectedObject.type === "rectangle" && (
-                <ShapeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "rectangle" && (
+                <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-            {(selectedObject.type === "line" || selectedObject.type === "arrow") && (
-                <LineSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow") && (
+                <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-            {selectedObject.type === "image" && (
-                <SizeSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "image" && (
+                <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-            {selectedObject.type === "link" && (
-                <LinkSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "link" && (
+                <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
-            {selectedObject.type === "video" && (
-                <VideoSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "video" && (
+                <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
 
 
-            {(selectedObject.type === "document" || selectedObject.type === "sticker") && (
+            {(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
                 <SizeSettings
-                    selectedObject={selectedObject}
-                    onUpdate={onUpdate}
-                    defaultWidth={selectedObject.type === "document" ? 200 : 100}
-                    defaultHeight={selectedObject.type === "document" ? 250 : 100}
+                    selectedObject={roundedSelectedObject}
+                    onUpdate={handleRoundedUpdate}
+                    defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100}
+                    defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100}
                 />
             )}
 
-            {selectedObject.type === "grid" && (
-                <GridSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            {roundedSelectedObject.type === "grid" && (
+                <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
 
-            <TransformSettings selectedObject={selectedObject} onUpdate={onUpdate} />
+            <TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
         </div>
     );
 };