jaybe
1737ae172e
- Frame/Layer/Object 스키마(zod) 및 테스트 - 키보드 화살표 nudge 시 8px 스냅 적용 - 마우스 드래그 이동 시 8px 스냅 적용 - Canvas 컴포넌트 초기 버전 및 테스트 추가
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { z } from 'zod'
|
|
|
|
const colorHex = z.string().regex(/^#([0-9a-fA-F]{3}){1,2}$/)
|
|
|
|
const baseObject = z.object({
|
|
id: z.string().min(1),
|
|
x: z.number(),
|
|
y: z.number(),
|
|
width: z.number().positive(),
|
|
height: z.number().positive(),
|
|
rotate: z.number(),
|
|
zIndex: z.number().int().nonnegative(),
|
|
})
|
|
|
|
const textObject = baseObject.extend({
|
|
type: z.literal('text'),
|
|
props: z.object({
|
|
text: z.string(),
|
|
fontSize: z.number().positive(),
|
|
color: colorHex,
|
|
}),
|
|
})
|
|
|
|
const imageObject = baseObject.extend({
|
|
type: z.literal('image'),
|
|
props: z.object({
|
|
src: z.string().min(1),
|
|
alt: z.string().optional().default(''),
|
|
}),
|
|
})
|
|
|
|
const buttonObject = baseObject.extend({
|
|
type: z.literal('button'),
|
|
props: z.object({
|
|
label: z.string().min(1),
|
|
href: z.string().optional().default(''),
|
|
color: colorHex.optional(),
|
|
background: colorHex.optional(),
|
|
}),
|
|
})
|
|
|
|
export const objectSchema = z.discriminatedUnion('type', [textObject, imageObject, buttonObject])
|
|
export type WObject = z.infer<typeof objectSchema>
|
|
|
|
export const layerSchema = z.object({
|
|
id: z.string().min(1),
|
|
name: z.string().min(1),
|
|
visible: z.boolean(),
|
|
locked: z.boolean(),
|
|
objects: z.array(objectSchema),
|
|
})
|
|
|
|
export const frameSchema = z.object({
|
|
id: z.string().min(1),
|
|
width: z.number().positive(),
|
|
height: z.number().positive(),
|
|
background: colorHex,
|
|
layers: z.array(layerSchema),
|
|
})
|
|
export type Frame = z.infer<typeof frameSchema>
|