diff --git a/docs/COLOR_AND_FONT_LAYERS_FEATURE.md b/docs/COLOR_AND_FONT_LAYERS_FEATURE.md deleted file mode 100644 index f1108fe..0000000 --- a/docs/COLOR_AND_FONT_LAYERS_FEATURE.md +++ /dev/null @@ -1,222 +0,0 @@ -# Color Fill Layers + Text Font Family Picker - -## Goals -Expand the layer system with **two complementary additions**: - -1. A new `color` layer type — a solid-color rectangle, useful as a tint, background, or accent block. -2. A **font family picker** on existing `text` layers so creators aren't locked into the browser default. - -### Product goals -1. Add visual range without adding a new editor surface — both changes live in the existing layer panel. -2. Stay print-safe: no network-dependent fonts in v1. -3. No migration burden on existing payloads. - -### Non-goals (v1) -- Gradient or pattern fills (color layers are flat fill only). -- Strokes / borders on color layers. -- Google Fonts or any web-fetched fonts. -- Per-character font styling (text layer is one font for the whole block, same as today). -- Drop shadows, blur, or other effects. - ---- - -## Current state - -### Existing layer types -| Type | Fields beyond standard | Where rendered | -|---|---|---| -| `image` | `src`, `fit?` | main canvas, cover preview, disc-sheet preview, jewel preview, disc-design preview | -| `text` | `html`, `fontSize`, `color`, `align`, `bold`, `italic` | same 5 places | - -Standard fields shared by every layer: `id`, `type`, `name`, `target`, `x`, `y`, `w`, `h`, `rotate`, `opacity`, `z`. - -### Existing UI structure -- **Per-target panels** (`renderLayerList`): one collapsible panel per region (page / cover-trim / back / spine / front / disc-top / disc-bottom / jewel-front / jewel-tray / designer-disc). Each has an "Add image" URL input and an "Add text" button. -- **Selected-layer controls** (`#layerControls`): one shared `
` block that conditionally shows `#layerImageControls` for image layers and `#textLayerControls` for text layers via display:block/none. -- **Renderers** in 5 locations: - - `renderLayers()` — main editor canvas - - `renderTemplatePreviewDOM()` — cover preview in the template browser - - `renderDiscSheetPreviewDOM()` — disc sheet preview - - `renderJewelPreviewDOM()` — jewel preview - - `renderDiscPreviewDOM()` — disc-design preview - -Each renderer has the same `if (layer.type === 'text') { … } else if (layer.type === 'image' && layer.src) { … }` shape. - ---- - -## Color layer - -### Data model -```js -{ - id: 'layer-…', - type: 'color', - name: 'Color block', - target: '', - color: '#3b82f6', // hex string, accent blue default - x, y, w, h, // inches, same as image/text - rotate: 0, - opacity: 0.6, // default less than 1 so it reads as a tint - z: -} -``` - -### `addColorLayer(targetOverride)` helper -Sits next to `addImageLayer` / `addTextLayer` in the script. Same pattern: -- Resolve target from override or current `#layerTarget` value. -- Get `bounds = targetBounds(target)`. -- Insert centered, 70%×70% of the target bounds (same as image/text default sizing). - -### Add-button placement -Inside `renderLayerList`'s per-target panel, alongside the existing Add image / Add text controls. Markup roughly: -``` -[ image url input ] [ + Image ] [ + Text ] [ + Color ] -``` -Single inline button — no extra inputs needed at add time (color picker lives on the selected layer). - -### Selected-layer controls -Add a third sub-panel to `#layerControls`: -```html - -``` -Toggled in `updateSelectedLayerControls()` alongside the existing image/text panels. - -The existing **opacity** input applies to all layer types, so users can fine-tune the tint there. - -### Rendering -Each of the 5 render sites gets a new branch: -```js -} else if (layer.type === 'color') { - el.style.background = layer.color || '#000'; -} -``` -Place after the `text` branch, before the `image` branch (or wherever it fits each renderer's existing structure). - -The element already has `opacity`, `transform: rotate(…)`, position, and size set by the shared code. No extra work needed. - -### Defaults (locked in) -- Default color: `#3b82f6` (accent blue — obviously visible against most artwork). -- Default opacity: `0.6` (reads as tint, not as a blocker). -- Selectable / draggable / resizable just like image and text layers. - ---- - -## Text font family picker - -### Data model -Add one field to existing text layers: -```js -{ … , fontFamily: 'Arial, sans-serif' } -``` - -Existing text layers without `fontFamily` continue rendering with the browser default (no migration). - -### Font list (locked in, web-safe only) - -| Label | CSS value | -|---|---| -| System default | `inherit` | -| Sans-serif (Arial) | `Arial, Helvetica, sans-serif` | -| Sans-serif (Helvetica) | `Helvetica, Arial, sans-serif` | -| Sans-serif (Verdana) | `Verdana, Geneva, sans-serif` | -| Sans-serif (Trebuchet) | `"Trebuchet MS", sans-serif` | -| Sans-serif (Tahoma) | `Tahoma, Geneva, sans-serif` | -| Sans-serif (Arial Black) | `"Arial Black", sans-serif` | -| Sans-serif (Impact) | `Impact, "Arial Narrow Bold", sans-serif` | -| Serif (Times) | `"Times New Roman", Times, serif` | -| Serif (Georgia) | `Georgia, serif` | -| Serif (Palatino) | `"Palatino Linotype", "Book Antiqua", Palatino, serif` | -| Monospace (Courier) | `"Courier New", Courier, monospace` | -| Monospace (Consolas) | `Consolas, "Courier New", monospace` | -| Cursive (Comic Sans) | `"Comic Sans MS", "Comic Sans", cursive` | -| Cursive (Brush Script) | `"Brush Script MT", cursive` | - -Each `