grediant in a shape

src/pages/editor/store/editorStore.helpers.ts

@@ -55,6 +55,11 @@ export const createInitialPage = (name: string): Page => ({
   guides: [],
   backgroundType: "color",
   backgroundColor: "#ffffff",
+  backgroundGradient: {
+    from: "#ffffff",
+    to: "#e2e8f0",
+    angle: 135,
+  },
   backgroundImageUrl: "",
 });
 
@@ -118,8 +123,8 @@ export const getObjectBounds = (obj: EditorObject) => {
     return { minX, minY, maxX, maxY };
   }
 
-  let w = obj.width || 0;
-  let h = obj.height || 0;
+  const w = obj.width || 0;
+  const h = obj.height || 0;
 
   if (obj.type === "rectangle" && obj.shapeType === "circle") {
     const radius = w / 2;

src/pages/editor/store/editorStore.ts

@@ -46,7 +46,7 @@ export type {
 
 type PageBackgroundSettings = Pick<
   Page,
-  "backgroundType" | "backgroundColor" | "backgroundImageUrl"
+  "backgroundType" | "backgroundColor" | "backgroundGradient" | "backgroundImageUrl"
 >;
 
 type EditorStoreType = {
@@ -191,6 +191,11 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       leftToRightFlip: false,
       backgroundType: 'color',
       backgroundColor: '#ffffff',
+      backgroundGradient: {
+        from: "#ffffff",
+        to: "#e2e8f0",
+        angle: 135,
+      },
       backgroundImageUrl: '',
     },
     updateDocumentSettings: (updates) =>
@@ -836,6 +841,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         guides: [...pageToDuplicate.guides],
         backgroundType: pageToDuplicate.backgroundType,
         backgroundColor: pageToDuplicate.backgroundColor,
+        backgroundGradient: pageToDuplicate.backgroundGradient,
         backgroundImageUrl: pageToDuplicate.backgroundImageUrl,
       };
 
@@ -1009,6 +1015,12 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
           page.backgroundType ?? fallbackSettings.backgroundType ?? "color",
         backgroundColor:
           page.backgroundColor ?? fallbackSettings.backgroundColor ?? "#ffffff",
+        backgroundGradient: page.backgroundGradient ??
+          fallbackSettings.backgroundGradient ?? {
+            from: "#ffffff",
+            to: "#e2e8f0",
+            angle: 135,
+          },
         backgroundImageUrl:
           page.backgroundImageUrl ?? fallbackSettings.backgroundImageUrl ?? "",
       }));

src/pages/editor/store/editorStore.types.ts

@@ -1,4 +1,5 @@
 import type { ShapeType } from "./shapeStore";
+import type { FillType, LinearGradient } from "../utils/gradient";
 
 export type ToolType =
   | "select"
@@ -41,6 +42,8 @@ export type EditorObject = {
   width?: number;
   height?: number;
   fill?: string;
+  fillType?: FillType;
+  gradient?: LinearGradient;
   stroke?: string;
   strokeWidth?: number;
   text?: string;
@@ -82,11 +85,12 @@ export type Page = {
   guides: PageGuide[];
   backgroundType: BackgroundType;
   backgroundColor: string;
+  backgroundGradient?: LinearGradient;
   backgroundImageUrl: string;
 };
 
 export type DisplayStyle = 'single' | 'double';
-export type BackgroundType = 'color' | 'image';
+export type BackgroundType = 'color' | 'gradient' | 'image';
 
 export type DocumentSettings = {
   displayStyle: DisplayStyle;
@@ -95,5 +99,6 @@ export type DocumentSettings = {
   leftToRightFlip: boolean;
   backgroundType: BackgroundType;
   backgroundColor: string;
+  backgroundGradient?: LinearGradient;
   backgroundImageUrl: string;
 };