replace default element

app/constants/defaultElements.ts

@@ -1,67 +1,26 @@
-import type {
-	ImageElement,
-	ImageElementWithVariables,
-	RectElement,
-	RectElementWithVariables,
-	TextElement,
-	TextElementWithVariables,
+import {
+	defaultImageElement,
+	defaultRectElement,
+	defaultTextElement,
+	type ImageElement,
+	type ImageElementWithVariables,
+	type RectElement,
+	type RectElementWithVariables,
+	type TextElement,
+	type TextElementWithVariables,
 } from "~/stores/elementTypes";
 
 export const defaultElements = {
 	rect: {
-		id: "",
-		type: "rect",
-		x: 0,
-		y: 0,
-		rotate: 0,
-		width: 100,
-		height: 100,
-		backgroundColor: "#e41212",
-		backgroundOpacity: 1,
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
-		borderBottomLeftRadius: 0,
-		borderType: null,
-		borderWidth: null,
-		borderColor: null,
+		...defaultRectElement,
 		variables: [],
-		blur: null,
 	} as RectElementWithVariables,
 	text: {
-		id: "",
-		type: "text",
-		x: 0,
-		y: 0,
-		rotate: 0,
-		width: 100,
-		height: 100,
-		color: "#000000",
-		textColorOpacity: 1,
-		textTransform: "none",
-		fontSize: 28,
-		fontWeight: 400,
-		fontStyle: "normal",
-		fontFamily: "Open Sans",
-		textAlign: "left",
-		content: "Text",
-		lineHeight: 1.5,
+		...defaultTextElement,
 		variables: [],
 	} as TextElementWithVariables,
 	image: {
-		id: "",
-		type: "image",
-		x: 0,
-		y: 0,
-		rotate: 0,
-		width: 100,
-		height: 100,
-		src: null,
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
-		borderBottomLeftRadius: 0,
-		objectFit: "cover",
+		...defaultImageElement,
 		variables: [],
 	} as ImageElementWithVariables,
 };

app/stores/elementTypes.tsx

@@ -6,169 +6,169 @@ export type ElementType = z.infer<typeof ElementType>;
 
 //Base element properties that all elements share
 const BaseElementSchema = z.object({
-	id: z.string(),
-	type: ElementType,
-	x: z.number(),
-	y: z.number(),
-	width: z.number(),
-	height: z.number(),
-	rotate: z.number(),
+  id: z.string(),
+  type: ElementType,
+  x: z.number(),
+  y: z.number(),
+  width: z.number(),
+  height: z.number(),
+  rotate: z.number(),
 });
 
 export const RectElementSchema = BaseElementSchema.merge(
-	z.object({
-		type: z.enum(["rect"]),
-		backgroundColor: z.string(),
-		backgroundOpacity: z.number(),
-		borderTopLeftRadius: z.number(),
-		borderTopRightRadius: z.number(),
-		borderBottomLeftRadius: z.number(),
-		borderBottomRightRadius: z.number(),
-		borderColor: z.string().nullish().default(null),
-		borderWidth: z.number().nullish().default(null),
-		borderType: z.enum(["inside", "outside"]).nullish().default(null),
-		blur: z.number().nullish().default(null),
-	}),
+  z.object({
+    type: z.enum(["rect"]),
+    backgroundColor: z.string(),
+    backgroundOpacity: z.number(),
+    borderTopLeftRadius: z.number(),
+    borderTopRightRadius: z.number(),
+    borderBottomLeftRadius: z.number(),
+    borderBottomRightRadius: z.number(),
+    borderColor: z.string().nullish().default(null),
+    borderWidth: z.number().nullish().default(null),
+    borderType: z.enum(["inside", "outside"]).nullish().default(null),
+    blur: z.number().nullish().default(null),
+  })
 );
 
 export type RectElement = z.infer<typeof RectElementSchema>;
 
 //Text element properties
 export const TextElementSchema = BaseElementSchema.merge(
-	z.object({
-		type: z.literal("text"),
-		content: z.string(),
-		fontSize: z.number(),
-		color: z.string(),
-		textColorOpacity: z.number(),
-		fontFamily: z.string(),
-		fontWeight: z.number(),
-		fontStyle: z.enum(["normal", "italic"]),
-		textAlign: z.enum(["left", "center", "right", "justify"]),
-		textTransform: z.enum(["none", "uppercase", "lowercase", "capitalize"]),
-		lineHeight: z.number(),
-	}),
+  z.object({
+    type: z.literal("text"),
+    content: z.string(),
+    fontSize: z.number(),
+    color: z.string(),
+    textColorOpacity: z.number(),
+    fontFamily: z.string(),
+    fontWeight: z.number(),
+    fontStyle: z.enum(["normal", "italic"]),
+    textAlign: z.enum(["left", "center", "right", "justify"]),
+    textTransform: z.enum(["none", "uppercase", "lowercase", "capitalize"]),
+    lineHeight: z.number(),
+  })
 );
 
 export type TextElement = z.infer<typeof TextElementSchema>;
 
 //Image element properties
 export const ImageElementSchema = BaseElementSchema.merge(
-	z.object({
-		type: z.literal("image"),
-		src: z.string().nullable(),
-		objectFit: z.enum(["fill", "contain", "cover", "none", "scale-down"]),
-		borderTopLeftRadius: z.number(),
-		borderTopRightRadius: z.number(),
-		borderBottomLeftRadius: z.number(),
-		borderBottomRightRadius: z.number(),
-	}),
+  z.object({
+    type: z.literal("image"),
+    src: z.string().nullable(),
+    objectFit: z.enum(["fill", "contain", "cover", "none", "scale-down"]),
+    borderTopLeftRadius: z.number(),
+    borderTopRightRadius: z.number(),
+    borderBottomLeftRadius: z.number(),
+    borderBottomRightRadius: z.number(),
+  })
 );
 
 export type ImageElement = z.infer<typeof ImageElementSchema>;
 
 export const PageElementSchema = BaseElementSchema.merge(
-	z.object({
-		type: z.literal("page"),
-		backgroundColor: z.string(),
-		backgroundOpacity: z.number(),
-	}),
+  z.object({
+    type: z.literal("page"),
+    backgroundColor: z.string(),
+    backgroundOpacity: z.number(),
+  })
 );
 
 export type PageElement = z.infer<typeof PageElementSchema>;
 
 export const Variables = z.object({
-	property: z.string(),
-	name: z.string(),
+  property: z.string(),
+  name: z.string(),
 });
 
 export type Variables = z.infer<typeof Variables>;
 
 export const RectElementWithVariables = RectElementSchema.merge(
-	z.object({
-		variables: z.array(Variables),
-	}),
+  z.object({
+    variables: z.array(Variables),
+  })
 );
 
 export type RectElementWithVariables = z.infer<typeof RectElementWithVariables>;
 
 export const TextElementWithVariables = TextElementSchema.merge(
-	z.object({
-		variables: z.array(Variables),
-	}),
+  z.object({
+    variables: z.array(Variables),
+  })
 );
 export type TextElementWithVariables = z.infer<typeof TextElementWithVariables>;
 
 export const ImageElementWithVariables = ImageElementSchema.merge(
-	z.object({
-		variables: z.array(Variables),
-	}),
+  z.object({
+    variables: z.array(Variables),
+  })
 );
 
 export type ImageElementWithVariables = z.infer<
-	typeof ImageElementWithVariables
+  typeof ImageElementWithVariables
 >;
 
 export const defaultRectElement: RectElement = {
-	id: "",
-	type: "rect",
-	x: 0,
-	y: 0,
-	width: 100,
-	height: 100,
-	rotate: 0,
-	backgroundColor: "#fff",
-	backgroundOpacity: 1,
-	borderTopLeftRadius: 0,
-	borderTopRightRadius: 0,
-	borderBottomLeftRadius: 0,
-	borderBottomRightRadius: 0,
-	borderColor: null,
-	borderWidth: null,
-	borderType: null,
-	blur: null,
+  id: "",
+  type: "rect",
+  x: 0,
+  y: 0,
+  width: 100,
+  height: 100,
+  rotate: 0,
+  backgroundColor: "#ff0000",
+  backgroundOpacity: 1,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderColor: null,
+  borderWidth: null,
+  borderType: null,
+  blur: null,
 };
 
 export const defaultTextElement: TextElement = {
-	id: "",
-	type: "text",
-	x: 0,
-	y: 0,
-	width: 100,
-	height: 100,
-	rotate: 0,
-	content: "Hello world",
-	fontSize: 16,
-	color: "#000",
-	textColorOpacity: 1,
-	fontFamily: "Arial",
-	fontWeight: 400,
-	fontStyle: "normal",
-	textAlign: "left",
-	textTransform: "none",
-	lineHeight: 1.2,
+  id: "",
+  type: "text",
+  x: 0,
+  y: 0,
+  rotate: 0,
+  width: 100,
+  height: 100,
+  color: "#000000",
+  textColorOpacity: 1,
+  textTransform: "none",
+  fontSize: 28,
+  fontWeight: 400,
+  fontStyle: "normal",
+  fontFamily: "Open Sans",
+  textAlign: "left",
+  content: "Text",
+  lineHeight: 1.5,
 };
 
 export const defaultImageElement: ImageElement = {
-	id: "",
-	type: "image",
-	x: 0,
-	y: 0,
-	width: 100,
-	height: 100,
-	rotate: 0,
-	src: "",
-	objectFit: "cover",
-	borderTopLeftRadius: 0,
-	borderTopRightRadius: 0,
-	borderBottomLeftRadius: 0,
-	borderBottomRightRadius: 0,
+  id: "",
+  type: "image",
+  x: 0,
+  y: 0,
+  rotate: 0,
+  width: 100,
+  height: 100,
+  src: null,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  objectFit: "cover",
 };
 
 export const defaultElements = {
-	rect: defaultRectElement,
-	text: defaultTextElement,
-	image: defaultImageElement,
+  rect: defaultRectElement,
+  text: defaultTextElement,
+  image: defaultImageElement,
 };
 
 //Element is type of RectElement, TextElement or ImageElement