84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import { type TextAlignType } from "$lib/constants";
|
|
import type { HexColor } from "$lib/types";
|
|
import { STATE_DATA, withPersistence } from "./persisted.svelte";
|
|
|
|
export type TextConfig = {
|
|
fontSize: number;
|
|
fontFamily: string;
|
|
color: HexColor;
|
|
align: TextAlignType;
|
|
paddingX: number;
|
|
offsetY: number;
|
|
};
|
|
|
|
function createState() {
|
|
const defaults: TextConfig = {
|
|
fontSize: 24,
|
|
fontFamily: "Arial",
|
|
color: "#ffffff",
|
|
align: "center",
|
|
paddingX: 10,
|
|
offsetY: 0,
|
|
};
|
|
const state: TextConfig = $state({ ...defaults });
|
|
|
|
return {
|
|
get fontSize() {
|
|
return state.fontSize;
|
|
},
|
|
set fontSize(value: number) {
|
|
state.fontSize = value;
|
|
},
|
|
get fontFamily() {
|
|
return state.fontFamily;
|
|
},
|
|
set fontFamily(fontFamily: string) {
|
|
state.fontFamily = fontFamily;
|
|
},
|
|
get color() {
|
|
return state.color;
|
|
},
|
|
set color(color: HexColor) {
|
|
state.color = color;
|
|
},
|
|
get align() {
|
|
return state.align;
|
|
},
|
|
set align(align: TextAlignType) {
|
|
state.align = align;
|
|
},
|
|
get paddingX() {
|
|
return state.paddingX;
|
|
},
|
|
set paddingX(paddingX: number) {
|
|
state.paddingX = paddingX;
|
|
},
|
|
get offsetY() {
|
|
return state.offsetY;
|
|
},
|
|
set offsetY(offsetY: number) {
|
|
state.offsetY = offsetY;
|
|
},
|
|
get [STATE_DATA]() {
|
|
return {
|
|
fontSize: state.fontSize,
|
|
fontFamily: state.fontFamily,
|
|
color: state.color,
|
|
align: state.align,
|
|
paddingX: state.paddingX,
|
|
offsetY: state.offsetY,
|
|
};
|
|
},
|
|
set [STATE_DATA](newConfig: TextConfig) {
|
|
state.fontSize = newConfig.fontSize;
|
|
state.fontFamily = newConfig.fontFamily;
|
|
state.color = newConfig.color;
|
|
state.align = newConfig.align;
|
|
state.paddingX = newConfig.paddingX;
|
|
state.offsetY = newConfig.offsetY;
|
|
},
|
|
};
|
|
}
|
|
|
|
export const textConfigState = withPersistence("text-config", createState());
|