From 560167e9aecf9065f9dc54e1193b4837fc748be3 Mon Sep 17 00:00:00 2001 From: Owais Jamil Date: Fri, 26 Dec 2025 18:35:48 -0600 Subject: [PATCH] feat: add click to add fallback for stencil palette --- TODO.txt | 12 +++--- apps/web/src/lib/canvas/Canvas.svelte | 27 ++++++++++++-- .../src/lib/components/StencilPalette.svelte | 37 ++++++++++++++----- apps/web/src/lib/components/Toolbar.svelte | 25 +++++++------ 4 files changed, 70 insertions(+), 31 deletions(-) diff --git a/TODO.txt b/TODO.txt index 41a0707..3d56ce9 100644 --- a/TODO.txt +++ b/TODO.txt @@ -135,13 +135,13 @@ S1. Stencil definition format (core) -------------------------------------------------------------------------------- /packages/core/src/stencils: -[ ] Define Stencil: +[x] Define Stencil: - id, name, category, tags[] - preview: { kind: 'svg'|'canvas', data } - spawn: function (atPoint, scale) -> ShapeRecords[] (group) (A stencil can insert 1 shape or a grouped set.) -[ ] Create initial categories: +[x] Create initial categories: - Flowchart: process, decision, terminator, data, document - Diagrams: server, db, queue, user, browser, mobile - UI: button, input, card, modal @@ -154,7 +154,7 @@ S2. Insert UX -------------------------------------------------------------------------------- /apps/web: -[ ] Stencils drawer/palette: +[x] Stencils drawer/palette: - search (name + tags) - category filter - click inserts at viewport center OR @@ -162,9 +162,9 @@ S2. Insert UX [ ] Placement rules: - insert into active layer (if layers exist) - snap to grid if enabled -[ ] Toolbar +[x] Toolbar - Open menu to insert stencils with button to open drawer -[ ] Drawer +[x] Drawer - Stencil selection with search, category filter, and thumbnail previews (DoD): Inserting stencils is faster than drawing shapes manually. @@ -185,7 +185,7 @@ S3. Grouping behavior S4. Preview rendering -------------------------------------------------------------------------------- -[ ] Render stencil previews in the panel: +[x] Render stencil previews in the panel: - small SVG thumbnails (best) & draw to offscreen canvas (DoD): Users can recognize stencils instantly. diff --git a/apps/web/src/lib/canvas/Canvas.svelte b/apps/web/src/lib/canvas/Canvas.svelte index 5f65403..b8e1b08 100644 --- a/apps/web/src/lib/canvas/Canvas.svelte +++ b/apps/web/src/lib/canvas/Canvas.svelte @@ -6,7 +6,7 @@ import StencilPalette from '$lib/components/StencilPalette.svelte'; import { createCanvasController } from './canvas-store.svelte.ts'; import { draggingStencil, endDrag } from '$lib/dnd.svelte'; - import { Camera } from 'inkfinite-core'; + import { Camera, stencils } from 'inkfinite-core'; let canvasEl = $state(null); let textEditorEl = $state(null); @@ -48,15 +48,26 @@ }); function handleDrop(e: DragEvent) { + console.log('[Canvas] Drop event detected', { + clientX: e.clientX, + clientY: e.clientY, + dataTransferTypes: e.dataTransfer?.types + }); e.preventDefault(); const stencil = draggingStencil.current; - if (!stencil || !canvasEl) return; + console.log('[Canvas] Dragging stencil state:', stencil); + + if (!stencil || !canvasEl) { + console.warn('[Canvas] Drop ignored - missing stencil or canvas ref'); + return; + } const rect = canvasEl.getBoundingClientRect(); const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top }; const viewport = c.getViewport(); const world = Camera.screenToWorld(c.store.getState().camera, screen, viewport); + console.log('[Canvas] Inserting stencil at:', world); c.insertStencil(stencil, world); endDrag(); } @@ -64,6 +75,15 @@ function handleStencilsClick() { c.stencilPaletteOpen = !c.stencilPaletteOpen; } + + // TODO: close palette on click? Users might want to add multiple. + function handleInsertStencilAtCenter(stencil: stencils.Stencil) { + console.log('[Canvas] Click insert stencil:', stencil.id); + const viewport = c.getViewport(); + const screen = { x: viewport.width / 2, y: viewport.height / 2 }; + const world = Camera.screenToWorld(c.store.getState().camera, screen, viewport); + c.insertStencil(stencil, world); + }
@@ -191,7 +211,8 @@ {/if} (c.stencilPaletteOpen = false)} /> + onClose={() => (c.stencilPaletteOpen = false)} + onStencilClick={handleInsertStencilAtCenter} />