Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 3x 3x 3x 3x 3x 3x 3x 3x | import { z } from "zod";
import {
DEFAULT_BG,
DEFAULT_FONT_FAMILY,
DEFAULT_FONT_SIZE,
DEFAULT_TEXT_COLOR,
} from "@/lib/constants";
export const ComponentTypeSchema = z.enum([
"Panel",
"Button",
"Label",
"TextField",
"PasswordField",
"TextArea",
"CheckBox",
"RadioButton",
"ComboBox",
"List",
"ProgressBar",
"Slider",
"Spinner",
"Separator",
"MenuBar",
"Menu",
"MenuItem",
"ToolBar",
]);
const OrientationSchema = z.enum(["horizontal", "vertical"]);
const ParentOffsetSchema = z.object({
x: z.number().finite(),
y: z.number().finite(),
});
const PositionSchema = z
.enum(["top", "bottom", "left", "right", "north", "south", "east", "west"])
.transform((position) => {
switch (position) {
case "north":
return "top";
case "south":
return "bottom";
case "west":
return "left";
case "east":
return "right";
default:
return position;
}
});
export const CanvasComponentSchema = z.object({
id: z.string().min(1),
type: ComponentTypeSchema,
variableName: z.string().default(""),
x: z.number().finite(),
y: z.number().finite(),
width: z.number().finite().min(1),
height: z.number().finite().min(1),
text: z.string().default(""),
backgroundColor: z.string().default(DEFAULT_BG),
textColor: z.string().default(DEFAULT_TEXT_COLOR),
fontFamily: z.string().default(DEFAULT_FONT_FAMILY),
fontSize: z.number().finite().min(1).default(DEFAULT_FONT_SIZE),
eventMethodName: z.string().default(""),
selected: z.boolean().optional(),
items: z.array(z.string()).optional(),
value: z.number().finite().optional(),
min: z.number().finite().optional(),
max: z.number().finite().optional(),
orientation: OrientationSchema.optional(),
children: z.array(z.string()).optional(),
parentId: z.string().optional(),
parentOffset: ParentOffsetSchema.optional(),
position: PositionSchema.optional(),
});
export const CanvasStateSchema = z
.object({
components: z.array(CanvasComponentSchema),
className: z.string().min(1).default("MainWindow"),
frameTitle: z.string().optional(),
frameWidth: z.number().finite().min(1).default(800),
frameHeight: z.number().finite().min(1).default(600),
backgroundColor: z.string().optional(),
})
.passthrough();
export const ComponentDefaultsSchema = z
.object({
backgroundColor: z.string(),
textColor: z.string(),
fontFamily: z.string(),
fontSize: z.number().finite().min(1),
})
.passthrough();
export const ConfigDefaultsSchema = z
.object({
defaultBackgroundColor: z.string(),
defaultTextColor: z.string(),
defaultFontFamily: z.string(),
defaultFontSize: z.number().finite().min(1),
components: z.record(z.string(), ComponentDefaultsSchema),
})
.passthrough();
export type ComponentType = z.infer<typeof ComponentTypeSchema>;
export type CanvasComponent = z.infer<typeof CanvasComponentSchema>;
export type CanvasState = z.infer<typeof CanvasStateSchema>;
export type ConfigDefaults = z.infer<typeof ConfigDefaultsSchema>;
|