diff --git a/apps/staged/package.json b/apps/staged/package.json index f44b75049..a6e003cf5 100644 --- a/apps/staged/package.json +++ b/apps/staged/package.json @@ -25,6 +25,8 @@ "@tailwindcss/vite": "^4.3.2", "@tauri-apps/cli": "^2.11.4", "@tsconfig/svelte": "^5.0.8", + "@types/d3-selection": "3.0.11", + "@types/d3-zoom": "3.0.8", "@types/node": "^24.11.0", "bits-ui": "^2.18.1", "clsx": "^2.1.1", @@ -53,6 +55,8 @@ "@tauri-apps/plugin-store": "^2.4.3", "@tauri-apps/plugin-updater": "^2.10.1", "ansi-to-html": "^0.7.2", + "d3-selection": "3.0.0", + "d3-zoom": "3.0.0", "idb-keyval": "^6.2.6", "marked": "^18.0.5", "pikchr-js": "0.1.4", diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css index 5853e7edf..a2ddcd772 100644 --- a/apps/staged/src/app.css +++ b/apps/staged/src/app.css @@ -90,7 +90,8 @@ --ui-danger-bg: rgba(248, 81, 73, 0.1); --ui-selection: rgba(255, 255, 255, 0.08); - --diagram-canvas-bg: #f2edf8; + --diagram-canvas-bg: #ffffff; + --diagram-stage-bg: #f2edf8; --pikchr-ink: #241a2f; --pikchr-surface: #fffaff; --pikchr-muted: #74677f; diff --git a/apps/staged/src/lib/features/notes/NoteModal.svelte b/apps/staged/src/lib/features/notes/NoteModal.svelte index ee4855694..6db0992b1 100644 --- a/apps/staged/src/lib/features/notes/NoteModal.svelte +++ b/apps/staged/src/lib/features/notes/NoteModal.svelte @@ -21,6 +21,11 @@ import { viewport } from '../../shared/viewport.svelte'; import '../../shared/markdown/diagramStyles.css'; import { extractMarkdownDiagramFences } from '../../shared/markdown/diagramFormats'; + import DiagramViewerModal from '../../shared/markdown/DiagramViewerModal.svelte'; + import { + getMarkdownDiagramSvgMarkup, + isMarkdownDiagramActivationKey, + } from '../../shared/markdown/diagramViewer'; import { loadPikchrRenderer, type PikchrRenderer } from '../../shared/markdown/pikchrRendering'; import { noteMarkdownWithTitle, renderNoteMarkdown } from './noteMarkdown'; @@ -65,6 +70,7 @@ let pikchrRendererLoadFailedKey = $state(null); let pikchrRendererLoadFailed = $derived(pikchrRendererLoadFailedKey === pikchrRendererLoadKey); let renderedNoteHtml = $derived(renderNoteMarkdown(noteMarkdown, { pikchrRenderer })); + let diagramViewerSvg = $state(null); // Search state let searchVisible = $state(false); @@ -217,6 +223,26 @@ matchElements[currentMatchIndex].classList.add('search-match-current'); scrollToMatch(matchElements[currentMatchIndex]); } + + function openDiagramViewerFromEvent(event: MouseEvent | KeyboardEvent): boolean { + const svgMarkup = getMarkdownDiagramSvgMarkup(event.target); + if (!svgMarkup) return false; + + event.preventDefault(); + event.stopPropagation(); + diagramViewerSvg = svgMarkup; + return true; + } + + function handleContentClick(event: MouseEvent) { + if (openDiagramViewerFromEvent(event)) return; + handleExternalLinkClick(event); + } + + function handleContentKeydown(event: KeyboardEvent) { + if (!isMarkdownDiagramActivationKey(event)) return; + openDiagramViewerFromEvent(event); + } -
+
{#if noteMarkdown.trim()}
{@html renderedNoteHtml} @@ -355,6 +386,12 @@ + (diagramViewerSvg = null)} +/> + diff --git a/apps/staged/src/lib/shared/markdown/diagramRendering.ts b/apps/staged/src/lib/shared/markdown/diagramRendering.ts index 21e8581e2..ab53a7921 100644 --- a/apps/staged/src/lib/shared/markdown/diagramRendering.ts +++ b/apps/staged/src/lib/shared/markdown/diagramRendering.ts @@ -45,7 +45,7 @@ function withDiagramSourceClass(renderedSource: string, format: MarkdownDiagramF function renderPikchrPreview(renderedSvg: string): string { return [ - '
', + '
', '
', renderedSvg, '
', diff --git a/apps/staged/src/lib/shared/markdown/diagramStyles.css b/apps/staged/src/lib/shared/markdown/diagramStyles.css index de4c6772f..d5bdc582d 100644 --- a/apps/staged/src/lib/shared/markdown/diagramStyles.css +++ b/apps/staged/src/lib/shared/markdown/diagramStyles.css @@ -1,9 +1,53 @@ .markdown-content .markdown-diagram { + position: relative; margin: 0.9em 0; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; background: var(--bg-primary); + cursor: zoom-in; +} + +.markdown-content .markdown-diagram:focus-visible { + outline: 2px solid var(--ui-accent); + outline-offset: 2px; +} + +.markdown-content .markdown-diagram::after { + content: ''; + position: absolute; + top: 8px; + right: 8px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border: 1px solid var(--border-muted); + border-radius: 6px; + background: + linear-gradient(currentColor, currentColor) right 6px top 6px / 8px 1px no-repeat, + linear-gradient(currentColor, currentColor) right 6px top 6px / 1px 8px no-repeat, + linear-gradient(currentColor, currentColor) left 6px bottom 6px / 8px 1px no-repeat, + linear-gradient(currentColor, currentColor) left 6px bottom 6px / 1px 8px no-repeat, + var(--bg-chrome); + color: var(--text-muted); + opacity: 0; + pointer-events: none; + transition: + opacity 0.12s ease, + color 0.12s ease, + border-color 0.12s ease; +} + +.markdown-content .markdown-diagram:hover::after, +.markdown-content .markdown-diagram:focus-visible::after { + opacity: 1; +} + +.markdown-content .markdown-diagram:hover::after { + border-color: var(--text-muted); + color: var(--text-primary); } .markdown-content .markdown-diagram-preview { @@ -11,12 +55,14 @@ justify-content: center; padding: 16px; background: var(--diagram-canvas-bg); - overflow-x: auto; + overflow: hidden; } .markdown-content .markdown-diagram-preview svg { display: block; max-width: 100%; + max-height: min(55vh, 380px); + width: auto; height: auto; } diff --git a/apps/staged/src/lib/shared/markdown/diagramViewer.ts b/apps/staged/src/lib/shared/markdown/diagramViewer.ts new file mode 100644 index 000000000..13ef4e290 --- /dev/null +++ b/apps/staged/src/lib/shared/markdown/diagramViewer.ts @@ -0,0 +1,15 @@ +export function getMarkdownDiagramSvgMarkup(target: EventTarget | null): string | null { + if (!(target instanceof Element)) return null; + + const figure = target.closest('.markdown-diagram'); + if (!figure) return null; + + const svg = figure.querySelector('.markdown-pikchr-svg'); + if (!(svg instanceof SVGSVGElement)) return null; + + return svg.outerHTML; +} + +export function isMarkdownDiagramActivationKey(event: KeyboardEvent): boolean { + return event.key === 'Enter' || event.key === ' '; +} diff --git a/apps/staged/src/lib/shared/markdown/diagramZoom.test.ts b/apps/staged/src/lib/shared/markdown/diagramZoom.test.ts new file mode 100644 index 000000000..cfac0cf4d --- /dev/null +++ b/apps/staged/src/lib/shared/markdown/diagramZoom.test.ts @@ -0,0 +1,104 @@ +// @vitest-environment jsdom +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { createDiagramZoomController, type DiagramZoomController } from './diagramZoom'; + +describe('createDiagramZoomController', () => { + let viewportEl: HTMLDivElement; + let contentEl: HTMLDivElement; + let controller: DiagramZoomController; + let transforms: Array<{ scale: number; offsetX: number; offsetY: number }>; + + beforeEach(() => { + vi.useFakeTimers(); + vi.setSystemTime(new Date('2026-01-01T00:00:00Z')); + + viewportEl = document.createElement('div'); + contentEl = document.createElement('div'); + viewportEl.append(contentEl); + document.body.append(viewportEl); + + Object.defineProperty(viewportEl, 'getBoundingClientRect', { + configurable: true, + value: () => ({ + width: 500, + height: 400, + top: 0, + left: 0, + right: 500, + bottom: 400, + x: 0, + y: 0, + toJSON: () => ({}), + }), + }); + Object.defineProperty(contentEl, 'offsetWidth', { configurable: true, value: 100 }); + Object.defineProperty(contentEl, 'offsetHeight', { configurable: true, value: 100 }); + + transforms = []; + controller = createDiagramZoomController(viewportEl, contentEl, { + minScale: 0.05, + maxScale: 8, + fitPadding: 0, + doubleClickScale: 1.25, + isEnabled: () => true, + onTransform: (transform) => transforms.push(transform), + onDraggingChange: () => {}, + }); + controller.reset(); + }); + + afterEach(() => { + controller.destroy(); + viewportEl.remove(); + vi.useRealTimers(); + }); + + it('zooms once for each repeated double-click pair', () => { + dispatchClick(120, 140); + expect(currentScale()).toBeCloseTo(1); + + vi.advanceTimersByTime(80); + dispatchClick(121, 141); + expect(currentScale()).toBeCloseTo(1.25); + + vi.advanceTimersByTime(80); + dispatchClick(121, 141); + expect(currentScale()).toBeCloseTo(1.25); + + vi.advanceTimersByTime(80); + dispatchClick(122, 142); + expect(currentScale()).toBeCloseTo(1.5625); + }); + + it('does not apply an extra zoom from the native dblclick event', () => { + dispatchClick(120, 140); + vi.advanceTimersByTime(80); + dispatchClick(121, 141); + + viewportEl.dispatchEvent( + new MouseEvent('dblclick', { + bubbles: true, + cancelable: true, + clientX: 121, + clientY: 141, + }) + ); + + expect(currentScale()).toBeCloseTo(1.25); + }); + + function dispatchClick(clientX: number, clientY: number) { + viewportEl.dispatchEvent( + new MouseEvent('click', { + bubbles: true, + cancelable: true, + clientX, + clientY, + }) + ); + } + + function currentScale(): number { + return transforms.at(-1)?.scale ?? 0; + } +}); diff --git a/apps/staged/src/lib/shared/markdown/diagramZoom.ts b/apps/staged/src/lib/shared/markdown/diagramZoom.ts new file mode 100644 index 000000000..f4f10c10d --- /dev/null +++ b/apps/staged/src/lib/shared/markdown/diagramZoom.ts @@ -0,0 +1,188 @@ +import { pointer, select } from 'd3-selection'; +import { zoom, zoomIdentity, zoomTransform, type D3ZoomEvent, type ZoomTransform } from 'd3-zoom'; + +export interface DiagramZoomTransform { + scale: number; + offsetX: number; + offsetY: number; +} + +interface DiagramZoomOptions { + minScale: number; + maxScale: number; + fitPadding: number; + doubleClickScale: number; + isEnabled: () => boolean; + onTransform: (transform: DiagramZoomTransform) => void; + onDraggingChange: (dragging: boolean) => void; +} + +export interface DiagramZoomController { + reset: () => void; + zoomBy: (multiplier: number) => void; + getResetTransform: () => DiagramZoomTransform; + destroy: () => void; +} + +const DOUBLE_CLICK_DELAY_MS = 500; +const DOUBLE_CLICK_DISTANCE_PX = 8; + +export function createDiagramZoomController( + viewportEl: HTMLDivElement, + contentEl: HTMLElement, + options: DiagramZoomOptions +): DiagramZoomController { + const selection = select(viewportEl); + let lastClick: { time: number; x: number; y: number } | null = null; + const behavior = zoom() + .scaleExtent([options.minScale, options.maxScale]) + .extent(() => { + const rect = viewportEl.getBoundingClientRect(); + return [ + [0, 0], + [rect.width, rect.height], + ] satisfies [[number, number], [number, number]]; + }) + .filter((event) => { + if (event.type === 'wheel') { + return options.isEnabled() && (event.ctrlKey || event.metaKey); + } + + return ( + options.isEnabled() && + event.type !== 'dblclick' && + !event.ctrlKey && + !event.metaKey && + !event.button + ); + }) + .on('start', (event: D3ZoomEvent) => { + options.onDraggingChange(event.sourceEvent?.type === 'mousedown'); + }) + .on('zoom', (event: D3ZoomEvent) => { + options.onTransform(toDiagramTransform(event.transform)); + }) + .on('end', () => { + options.onDraggingChange(false); + }); + + selection.call(behavior); + selection.on('dblclick.zoom', null); + selection.on('click.diagram-zoom', (event: MouseEvent) => { + if (!options.isEnabled()) return; + + const now = Date.now(); + const isDoubleClick = + lastClick !== null && + now - lastClick.time <= DOUBLE_CLICK_DELAY_MS && + distanceSquared(lastClick, event) <= DOUBLE_CLICK_DISTANCE_PX * DOUBLE_CLICK_DISTANCE_PX; + + if (!isDoubleClick) { + lastClick = { time: now, x: event.clientX, y: event.clientY }; + return; + } + + lastClick = null; + zoomByAtPointer(event, event.altKey ? 1 / options.doubleClickScale : options.doubleClickScale); + }); + + selection.on('dblclick.diagram-zoom', (event: MouseEvent) => { + if (!options.isEnabled()) return; + + event.preventDefault(); + event.stopPropagation(); + }); + + selection.on('wheel.diagram-pan', (event: WheelEvent) => { + if (!options.isEnabled() || event.ctrlKey || event.metaKey) return; + + event.preventDefault(); + const [deltaX, deltaY] = normalizeWheelDelta(event, viewportEl); + const currentTransform = zoomTransform(viewportEl); + behavior.transform( + selection, + currentTransform.translate(-deltaX / currentTransform.k, -deltaY / currentTransform.k) + ); + }); + + return { + reset: () => { + behavior.transform(selection, getFitTransform(viewportEl, contentEl, options)); + options.onDraggingChange(false); + }, + zoomBy: (multiplier: number) => { + const rect = viewportEl.getBoundingClientRect(); + behavior.scaleBy(selection, multiplier, [rect.width / 2, rect.height / 2]); + }, + getResetTransform: () => toDiagramTransform(getFitTransform(viewportEl, contentEl, options)), + destroy: () => { + selection.on('.zoom', null); + selection.on('.diagram-zoom', null); + selection.on('.diagram-pan', null); + options.onDraggingChange(false); + }, + }; + + function zoomByAtPointer(event: MouseEvent, multiplier: number) { + event.preventDefault(); + event.stopPropagation(); + behavior.scaleBy(selection, multiplier, pointer(event, viewportEl)); + } +} + +function distanceSquared( + a: { x: number; y: number }, + b: { clientX: number; clientY: number } +): number { + const dx = a.x - b.clientX; + const dy = a.y - b.clientY; + return dx * dx + dy * dy; +} + +function getFitTransform( + viewportEl: HTMLDivElement, + contentEl: HTMLElement, + options: DiagramZoomOptions +): ZoomTransform { + const viewportRect = viewportEl.getBoundingClientRect(); + const contentWidth = contentEl.offsetWidth; + const contentHeight = contentEl.offsetHeight; + + if ( + viewportRect.width <= 0 || + viewportRect.height <= 0 || + contentWidth <= 0 || + contentHeight <= 0 + ) { + return zoomIdentity; + } + + const availableWidth = Math.max(1, viewportRect.width - options.fitPadding * 2); + const availableHeight = Math.max(1, viewportRect.height - options.fitPadding * 2); + const fitScale = Math.min(1, availableWidth / contentWidth, availableHeight / contentHeight); + const scale = Math.min(fitScale, options.maxScale); + const offsetX = (viewportRect.width - contentWidth * scale) / 2; + const offsetY = (viewportRect.height - contentHeight * scale) / 2; + + return zoomIdentity.translate(offsetX, offsetY).scale(scale); +} + +function toDiagramTransform(transform: ZoomTransform): DiagramZoomTransform { + return { + scale: transform.k, + offsetX: transform.x, + offsetY: transform.y, + }; +} + +function normalizeWheelDelta(event: WheelEvent, viewportEl: HTMLDivElement): [number, number] { + if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) { + return [event.deltaX * 16, event.deltaY * 16]; + } + + if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) { + return [event.deltaX * viewportEl.clientWidth, event.deltaY * viewportEl.clientHeight]; + } + + return [event.deltaX, event.deltaY]; +} diff --git a/apps/staged/src/lib/shared/markdown/renderMarkdown.test.ts b/apps/staged/src/lib/shared/markdown/renderMarkdown.test.ts index dba3820d0..a89d66574 100644 --- a/apps/staged/src/lib/shared/markdown/renderMarkdown.test.ts +++ b/apps/staged/src/lib/shared/markdown/renderMarkdown.test.ts @@ -34,7 +34,9 @@ describe('renderMarkdown', () => { pikchrRenderer: safePikchrRenderer, }); - expect(html).toContain('
'); + expect(html).toContain( + '
' + ); expect(html).not.toContain('markdown-diagram-caption'); expect(html).toContain( '
' diff --git a/apps/staged/src/lib/theme.test.ts b/apps/staged/src/lib/theme.test.ts index 1a9683f3f..0bcf7c9d0 100644 --- a/apps/staged/src/lib/theme.test.ts +++ b/apps/staged/src/lib/theme.test.ts @@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'; import { createAdaptiveTheme, themeToVarMap } from './theme'; describe('createAdaptiveTheme', () => { - it('exposes a soft themed Pikchr palette for dark chrome', () => { + it('exposes a white Pikchr canvas with a soft themed palette for dark chrome', () => { const vars = themeToVarMap( createAdaptiveTheme('#27212e', '#ffffff', '#91889b', { added: '#3fb950', @@ -12,7 +12,8 @@ describe('createAdaptiveTheme', () => { }) ); - expect(vars['--diagram-canvas-bg']).toBe('#f2edf8'); + expect(vars['--diagram-canvas-bg']).toBe('#ffffff'); + expect(vars['--diagram-stage-bg']).toBe('#f2edf8'); expect(vars['--pikchr-ink']).toBe('#241a2f'); expect(vars['--pikchr-surface']).toBe('#fffaff'); expect(vars['--pikchr-muted']).toBe('#74677f'); @@ -24,7 +25,7 @@ describe('createAdaptiveTheme', () => { expect(vars['--pikchr-yellow']).not.toBe(vars['--pikchr-orange']); }); - it('uses a quiet light Pikchr palette for light chrome', () => { + it('uses a white Pikchr canvas with a quiet light palette for light chrome', () => { const vars = themeToVarMap( createAdaptiveTheme('#ffffff', '#24292e', '#6e7781', { added: '#28a745', @@ -33,7 +34,8 @@ describe('createAdaptiveTheme', () => { }) ); - expect(vars['--diagram-canvas-bg']).toBe('#fbf8ff'); + expect(vars['--diagram-canvas-bg']).toBe('#ffffff'); + expect(vars['--diagram-stage-bg']).toBe('#fbf8ff'); expect(vars['--pikchr-surface']).toBe('#ffffff'); expect(vars['--pikchr-ink']).toBe('#24292e'); expect(vars['--pikchr-blue']).toBe('#81abdd'); diff --git a/apps/staged/src/lib/theme.ts b/apps/staged/src/lib/theme.ts index 4136cd0a3..cc530b487 100644 --- a/apps/staged/src/lib/theme.ts +++ b/apps/staged/src/lib/theme.ts @@ -91,6 +91,7 @@ export interface Theme { // Diagram previews diagram: { canvasBg: string; // Canvas behind rendered diagrams + stageBg: string; // Base fullscreen viewer background outside the canvas pikchrInk: string; // Default Pikchr stroke/text color pikchrSurface: string; // Themed replacement for white Pikchr fills pikchrMuted: string; // Themed replacement for gray/silver Pikchr colors @@ -266,7 +267,8 @@ const CONTRAST_OFFSET = 0.0135; const LIGHT_CHROME_CONTRAST_SCALE = 0.85; const DARK_PIKCHR_PALETTE: Theme['diagram'] = { - canvasBg: '#f2edf8', + canvasBg: '#ffffff', + stageBg: '#f2edf8', pikchrInk: '#241a2f', pikchrSurface: '#fffaff', pikchrMuted: '#74677f', @@ -280,7 +282,8 @@ const DARK_PIKCHR_PALETTE: Theme['diagram'] = { }; const LIGHT_PIKCHR_PALETTE: Theme['diagram'] = { - canvasBg: '#fbf8ff', + canvasBg: '#ffffff', + stageBg: '#fbf8ff', pikchrInk: '#24292e', pikchrSurface: '#ffffff', pikchrMuted: '#6e7781', @@ -607,6 +610,7 @@ export function themeToVarMap(t: Theme): Record { '--ui-selection': t.ui.selection, '--diagram-canvas-bg': t.diagram.canvasBg, + '--diagram-stage-bg': t.diagram.stageBg, '--pikchr-ink': t.diagram.pikchrInk, '--pikchr-surface': t.diagram.pikchrSurface, '--pikchr-muted': t.diagram.pikchrMuted, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b958750a8..548d221c6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -198,6 +198,12 @@ importers: ansi-to-html: specifier: ^0.7.2 version: 0.7.2 + d3-selection: + specifier: 3.0.0 + version: 3.0.0 + d3-zoom: + specifier: 3.0.0 + version: 3.0.0 idb-keyval: specifier: ^6.2.6 version: 6.2.6 @@ -235,6 +241,12 @@ importers: '@tsconfig/svelte': specifier: ^5.0.8 version: 5.0.8 + '@types/d3-selection': + specifier: 3.0.11 + version: 3.0.11 + '@types/d3-zoom': + specifier: 3.0.8 + version: 3.0.8 '@types/node': specifier: ^24.11.0 version: 24.11.0