186 lines
4.7 KiB
TypeScript
186 lines
4.7 KiB
TypeScript
export type BackgroundType = 'solid' | 'gradient';
|
|
|
|
export interface SolidBackground {
|
|
color: string;
|
|
}
|
|
|
|
export interface GradientBackground {
|
|
from: string;
|
|
to: string;
|
|
angle: number;
|
|
}
|
|
|
|
export interface Background {
|
|
type: BackgroundType;
|
|
solid: SolidBackground;
|
|
gradient: GradientBackground;
|
|
}
|
|
|
|
export interface Shadow {
|
|
blur: number;
|
|
spread: number;
|
|
color: string;
|
|
}
|
|
|
|
export interface LineHighlight {
|
|
from: number;
|
|
to: number;
|
|
style: 'focus' | 'added' | 'removed';
|
|
}
|
|
|
|
export interface CodeBlockProps {
|
|
code: string;
|
|
language: string;
|
|
theme: CodeThemeId;
|
|
fontFamily: string;
|
|
fontSize: number;
|
|
lineHeight: number;
|
|
lineNumbers: boolean;
|
|
highlights: LineHighlight[];
|
|
padding: number;
|
|
cornerRadius: number;
|
|
shadow: Shadow;
|
|
}
|
|
|
|
export interface TextProps {
|
|
text: string;
|
|
fontFamily: string;
|
|
fontSize: number;
|
|
color: string;
|
|
bold: boolean;
|
|
italic: boolean;
|
|
underline: boolean;
|
|
align: 'left' | 'center' | 'right';
|
|
background: { color: string } | null;
|
|
padding: number;
|
|
cornerRadius: number;
|
|
}
|
|
|
|
export interface ArrowProps {
|
|
style: 'straight' | 'curved';
|
|
color: string;
|
|
thickness: number;
|
|
head: 'filled' | 'outline' | 'none';
|
|
}
|
|
|
|
export type ElementType = 'code' | 'text' | 'arrow';
|
|
|
|
export interface BaseElement {
|
|
id: string;
|
|
type: ElementType;
|
|
x: number;
|
|
y: number;
|
|
rotation: number;
|
|
locked: boolean;
|
|
visible: boolean;
|
|
}
|
|
|
|
export interface CodeElement extends BaseElement {
|
|
type: 'code';
|
|
width: number;
|
|
height: number;
|
|
props: CodeBlockProps;
|
|
}
|
|
|
|
export interface TextElement extends BaseElement {
|
|
type: 'text';
|
|
props: TextProps;
|
|
}
|
|
|
|
export interface ArrowElement extends BaseElement {
|
|
type: 'arrow';
|
|
points: { x: number; y: number }[];
|
|
props: ArrowProps;
|
|
}
|
|
|
|
export type CanvasElement = CodeElement | TextElement | ArrowElement;
|
|
|
|
export interface AspectRatio {
|
|
name: string;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export interface CanvasMeta {
|
|
title: string;
|
|
aspect: string;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export interface Snap {
|
|
version: string;
|
|
meta: CanvasMeta;
|
|
background: Background;
|
|
elements: CanvasElement[];
|
|
}
|
|
|
|
export const ASPECT_RATIOS: AspectRatio[] = [
|
|
{ name: 'Square (1:1)', width: 1080, height: 1080 },
|
|
{ name: '16:9 (1920x1080)', width: 1920, height: 1080 },
|
|
{ name: '16:9 (1600x900)', width: 1600, height: 900 },
|
|
{ name: 'LinkedIn', width: 1200, height: 627 },
|
|
{ name: 'Portrait', width: 1080, height: 1350 },
|
|
{ name: 'Story', width: 1080, height: 1920 },
|
|
];
|
|
|
|
export const CODE_THEMES = [
|
|
// IntelliJ / Android Studio themes (prioritized for Kotlin)
|
|
{ id: 'andromeeda', name: 'Andromeeda', bg: '#23262e' },
|
|
{ id: 'aurora-x', name: 'Aurora X', bg: '#07090f' },
|
|
{ id: 'dark-plus', name: 'Dark+ (VS Code)', bg: '#1e1e1e' },
|
|
{ id: 'dracula', name: 'Dracula', bg: '#282a36' },
|
|
{ id: 'dracula-soft', name: 'Dracula Soft', bg: '#282a36' },
|
|
{ id: 'github-dark', name: 'GitHub Dark', bg: '#0d1117' },
|
|
{ id: 'github-dark-dimmed', name: 'GitHub Dimmed', bg: '#22272e' },
|
|
{ id: 'github-light', name: 'GitHub Light', bg: '#ffffff' },
|
|
{ id: 'light-plus', name: 'Light+ (VS Code)', bg: '#ffffff' },
|
|
{ id: 'material-theme-darker', name: 'Material Darker', bg: '#212121' },
|
|
{ id: 'material-theme-ocean', name: 'Material Ocean', bg: '#0f111a' },
|
|
{ id: 'material-theme-palenight', name: 'Material Palenight', bg: '#292d3e' },
|
|
{ id: 'min-dark', name: 'Min Dark', bg: '#1f1f1f' },
|
|
{ id: 'min-light', name: 'Min Light', bg: '#ffffff' },
|
|
{ id: 'monokai', name: 'Monokai', bg: '#272822' },
|
|
{ id: 'night-owl', name: 'Night Owl', bg: '#011627' },
|
|
{ id: 'nord', name: 'Nord', bg: '#2e3440' },
|
|
{ id: 'one-dark-pro', name: 'One Dark Pro', bg: '#282c34' },
|
|
{ id: 'poimandres', name: 'Poimandres', bg: '#1b1e28' },
|
|
{ id: 'rose-pine', name: 'Rosé Pine', bg: '#191724' },
|
|
{ id: 'rose-pine-moon', name: 'Rosé Pine Moon', bg: '#232136' },
|
|
{ id: 'slack-dark', name: 'Slack Dark', bg: '#222222' },
|
|
{ id: 'solarized-dark', name: 'Solarized Dark', bg: '#002b36' },
|
|
{ id: 'solarized-light', name: 'Solarized Light', bg: '#fdf6e3' },
|
|
{ id: 'tokyo-night', name: 'Tokyo Night', bg: '#1a1b26' },
|
|
{ id: 'vesper', name: 'Vesper', bg: '#101010' },
|
|
{ id: 'vitesse-dark', name: 'Vitesse Dark', bg: '#121212' },
|
|
{ id: 'vitesse-light', name: 'Vitesse Light', bg: '#ffffff' },
|
|
] as const;
|
|
|
|
export type CodeThemeId = typeof CODE_THEMES[number]['id'];
|
|
|
|
export const LANGUAGES = [
|
|
'kotlin',
|
|
'java',
|
|
'typescript',
|
|
'javascript',
|
|
'python',
|
|
'rust',
|
|
'go',
|
|
'swift',
|
|
'dart',
|
|
'html',
|
|
'css',
|
|
'json',
|
|
'xml',
|
|
'yaml',
|
|
'markdown',
|
|
'bash',
|
|
'sql',
|
|
'groovy',
|
|
] as const;
|
|
|
|
export const FONT_FAMILIES = {
|
|
code: ['JetBrains Mono', 'Fira Code', 'Source Code Pro', 'monospace'],
|
|
text: ['Inter', 'Roboto', 'Open Sans', 'sans-serif'],
|
|
};
|