@abreen/tada 1.15.1 → 1.15.3

package/README.md

@@ -26,6 +26,9 @@ A static site generator. The successor to Presto.
   * Supports Java and Python source files
   * Renders step-by-step source highlighting, output, and memory diagrams
 - Slides mode: separate content by `---` and present sections as full-screen slides
+  * Click icon near slide titles to start presenting at that slide
+  * Right-click in presentation mode to annotate
+  * Hold Shift while annotating to erase
 - PDF files are copied into `dist/`
   * Text of each PDF page is extracted using `mutool` (if present) and indexed
 - External link handling (special visual treatment for external links)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/question/style.scss

@@ -115,7 +115,7 @@
 .js .question-a-body[data-revealed] {
   cursor: unset;
 
-  @include user-select(text);
+  @include user-select(unset);
 }
 
 .question-multiple-choice {
@@ -185,7 +185,7 @@
   .question-multiple-choice-option {
     cursor: unset;
 
-    @include user-select(text);
+    @include user-select(unset);
 
     &:focus,
     &:focus-visible {

package/src/slides/index.ts

@@ -9,7 +9,17 @@ interface SlidesPresentDetail {
   slideIndex?: number;
 }
 
+interface SlideAnnotationState {
+  canvas: HTMLCanvasElement;
+  width: number;
+  height: number;
+  dpr: number;
+}
+
 const FULLSCREEN_STORAGE_KEY = 'slidesFullscreen';
+const ANNOTATION_COLOR = 'blueviolet';
+const ANNOTATION_ERASER_RADIUS = 18;
+const ANNOTATION_ERASER_DIAMETER = ANNOTATION_ERASER_RADIUS * 2;
 
 function isInteractive(
   view: Window & typeof globalThis,
@@ -111,15 +121,44 @@ export default function mountSlides(window: Window): void | (() => void) {
   overlay.append(closeButton);
   document.body.appendChild(overlay);
 
+  const eraserPreview = document.createElement('div');
+  eraserPreview.hidden = true;
+  eraserPreview.dataset.slidesEraserPreview = '';
+  eraserPreview.setAttribute('aria-hidden', 'true');
+  eraserPreview.style.setProperty(
+    '--slides-eraser-preview-size',
+    `${ANNOTATION_ERASER_DIAMETER}px`,
+  );
+  document.body.appendChild(eraserPreview);
+
+  const annotationLayer = document.createElement('div');
+  annotationLayer.hidden = true;
+  annotationLayer.dataset.slidesAnnotationLayer = '';
+  annotationLayer.setAttribute('aria-hidden', 'true');
+  slidesRoot.append(annotationLayer);
+
   let isPresenting = false;
   let activeIndex = -1;
   let presentationMode: PresentationMode | null = null;
   let isToolbarPinnedVisible = false;
+  let isAnnotating = false;
+  let isShiftPressed = false;
+  let isErasing = false;
+  let activeAnnotation: {
+    slide: HTMLElement;
+    previousX: number;
+    previousY: number;
+  } | null = null;
 
   const toolbarStates = new WeakMap<HTMLElement, TraceToolbarState>();
   const slideTabIndexes = new WeakMap<HTMLElement, string | null>();
+  const annotationStates = new WeakMap<HTMLElement, SlideAnnotationState>();
 
   function hidePresentationCursor(): void {
+    if (isAnnotating) {
+      return;
+    }
+
     document.body.classList.add('is-presentation-cursor-hidden');
   }
 
@@ -194,8 +233,12 @@ export default function mountSlides(window: Window): void | (() => void) {
   }
 
   function setActiveSlide(index: number): void {
+    activeAnnotation = null;
+    hideEraserPreview();
     activeIndex = Math.max(0, Math.min(index, slides.length - 1));
     updateActiveSlide(slides, activeIndex, isPresenting);
+    updateActiveAnnotationCanvas();
+    resizeActiveAnnotationCanvas();
   }
 
   function focusSlide(slide: HTMLElement | undefined): void {
@@ -247,6 +290,10 @@ export default function mountSlides(window: Window): void | (() => void) {
     isPresenting = false;
     activeIndex = -1;
     presentationMode = null;
+    isShiftPressed = false;
+    setAnnotationMode(false);
+    clearAnnotationCanvases();
+    annotationLayer.hidden = true;
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.remove('is-presenting');
@@ -289,6 +336,8 @@ export default function mountSlides(window: Window): void | (() => void) {
   function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
     isPresenting = true;
     presentationMode = mode;
+    annotationLayer.hidden = false;
+    setAnnotationMode(false);
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.add('is-presenting');
@@ -428,6 +477,12 @@ export default function mountSlides(window: Window): void | (() => void) {
       return;
     }
 
+    if (event.key === 'Shift') {
+      isShiftPressed = true;
+      setEraserMode(isAnnotating);
+      return;
+    }
+
     if (
       (event.key === 'ArrowRight' ||
         event.key === 'ArrowLeft' ||
@@ -465,6 +520,357 @@ export default function mountSlides(window: Window): void | (() => void) {
     move(1);
   }
 
+  function getActiveSlide(): HTMLElement | null {
+    return activeIndex >= 0 ? (slides[activeIndex] ?? null) : null;
+  }
+
+  function setAnnotationMode(enabled: boolean): void {
+    isAnnotating = enabled;
+    activeAnnotation = null;
+    hideEraserPreview();
+    document.body.classList.toggle('is-slides-annotating', enabled);
+    setEraserMode(enabled && isShiftPressed);
+
+    if (enabled) {
+      showPresentationCursor();
+    }
+  }
+
+  function setEraserMode(enabled: boolean): void {
+    isErasing = enabled && isPresenting && isAnnotating;
+
+    if (isErasing) {
+      activeAnnotation = null;
+    } else {
+      hideEraserPreview();
+    }
+
+    document.body.classList.toggle('is-slides-erasing', isErasing);
+  }
+
+  function hideEraserPreview(): void {
+    eraserPreview.hidden = true;
+  }
+
+  function showEraserPreview(event: PointerEvent): void {
+    eraserPreview.hidden = false;
+    eraserPreview.style.left = `${event.clientX}px`;
+    eraserPreview.style.top = `${event.clientY}px`;
+  }
+
+  function toggleAnnotationMode(): void {
+    setAnnotationMode(!isAnnotating);
+  }
+
+  function getViewportPoint(
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>,
+  ): { x: number; y: number } | null {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    if (
+      width <= 0 ||
+      height <= 0 ||
+      event.clientX < 0 ||
+      event.clientX > width ||
+      event.clientY < 0 ||
+      event.clientY > height
+    ) {
+      return null;
+    }
+
+    return { x: event.clientX, y: event.clientY };
+  }
+
+  function getCanvasContext(
+    canvas: HTMLCanvasElement,
+  ): CanvasRenderingContext2D | null {
+    try {
+      return canvas.getContext('2d');
+    } catch {
+      return null;
+    }
+  }
+
+  function getAnnotationState(slide: HTMLElement): SlideAnnotationState {
+    const existing = annotationStates.get(slide);
+    if (existing) {
+      return existing;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.dataset.slidesAnnotations = '';
+    canvas.dataset.slideIndex = slide.getAttribute('data-slide-index') ?? '';
+    canvas.setAttribute('aria-hidden', 'true');
+    canvas.hidden = slide !== getActiveSlide();
+    annotationLayer.append(canvas);
+
+    const state: SlideAnnotationState = { canvas, width: 0, height: 0, dpr: 1 };
+    annotationStates.set(slide, state);
+    resizeAnnotationCanvas(state);
+
+    return state;
+  }
+
+  function resizeAnnotationCanvas(state: SlideAnnotationState): void {
+    const width = Math.max(1, window.innerWidth);
+    const height = Math.max(1, window.innerHeight);
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+
+    if (state.width === width && state.height === height && state.dpr === dpr) {
+      return;
+    }
+
+    const priorCanvas =
+      state.canvas.width > 0 && state.canvas.height > 0
+        ? document.createElement('canvas')
+        : null;
+    if (priorCanvas) {
+      priorCanvas.width = state.canvas.width;
+      priorCanvas.height = state.canvas.height;
+      priorCanvas.getContext('2d')?.drawImage(state.canvas, 0, 0);
+    }
+
+    state.width = width;
+    state.height = height;
+    state.dpr = dpr;
+    state.canvas.width = Math.round(width * dpr);
+    state.canvas.height = Math.round(height * dpr);
+
+    if (priorCanvas) {
+      getCanvasContext(state.canvas)?.drawImage(priorCanvas, 0, 0);
+    }
+  }
+
+  function resizeActiveAnnotationCanvas(): void {
+    const slide = getActiveSlide();
+    if (!slide) {
+      return;
+    }
+
+    const state = annotationStates.get(slide);
+    if (state) {
+      resizeAnnotationCanvas(state);
+    }
+  }
+
+  function drawAnnotationStroke(
+    ctx: CanvasRenderingContext2D,
+    state: SlideAnnotationState,
+    from: { x: number; y: number },
+    to: { x: number; y: number },
+  ): void {
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.strokeStyle = ANNOTATION_COLOR;
+    ctx.lineWidth = 3 * state.dpr;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    ctx.moveTo(from.x * state.dpr, from.y * state.dpr);
+    ctx.lineTo(to.x * state.dpr, to.y * state.dpr);
+    ctx.stroke();
+  }
+
+  function drawAnnotationDot(
+    ctx: CanvasRenderingContext2D,
+    state: SlideAnnotationState,
+    point: { x: number; y: number },
+  ): void {
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = ANNOTATION_COLOR;
+    ctx.beginPath();
+    ctx.arc(
+      point.x * state.dpr,
+      point.y * state.dpr,
+      1.5 * state.dpr,
+      0,
+      Math.PI * 2,
+    );
+    ctx.fill();
+  }
+
+  function drawAnnotationErase(
+    ctx: CanvasRenderingContext2D,
+    state: SlideAnnotationState,
+    point: { x: number; y: number },
+  ): void {
+    const radius = ANNOTATION_ERASER_RADIUS * state.dpr;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.beginPath();
+    ctx.arc(point.x * state.dpr, point.y * state.dpr, radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  function clearAnnotationCanvases(): void {
+    for (const slide of slides) {
+      annotationStates.get(slide)?.canvas.remove();
+      annotationStates.delete(slide);
+    }
+    activeAnnotation = null;
+    hideEraserPreview();
+  }
+
+  function updateActiveAnnotationCanvas(): void {
+    const activeSlide = getActiveSlide();
+    for (const slide of slides) {
+      const state = annotationStates.get(slide);
+      if (state) {
+        state.canvas.hidden = slide !== activeSlide;
+      }
+    }
+  }
+
+  function handleAnnotationContextMenu(event: MouseEvent): void {
+    if (!isPresenting) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    toggleAnnotationMode();
+  }
+
+  function handleAnnotationPointerDown(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating || event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (isErasing) {
+      return;
+    }
+
+    const slide = getActiveSlide();
+    if (!slide) {
+      activeAnnotation = null;
+      return;
+    }
+
+    const point = getViewportPoint(event);
+    if (!point) {
+      return;
+    }
+
+    const state = getAnnotationState(slide);
+    resizeAnnotationCanvas(state);
+    const ctx = getCanvasContext(state.canvas);
+    if (ctx) {
+      drawAnnotationDot(ctx, state, point);
+    }
+    activeAnnotation = { slide, previousX: point.x, previousY: point.y };
+
+    const target =
+      event.target instanceof domView.Element ? event.target : slide;
+    target.setPointerCapture?.(event.pointerId);
+  }
+
+  function handleAnnotationPointerMove(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating) {
+      return;
+    }
+
+    if (isErasing) {
+      handleAnnotationEraseMove(event);
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const point = getViewportPoint(event);
+    if (!point) {
+      activeAnnotation = null;
+      return;
+    }
+
+    if (!activeAnnotation) {
+      if ((event.buttons & 1) !== 1) {
+        return;
+      }
+      const slide = getActiveSlide();
+      if (!slide) {
+        return;
+      }
+      activeAnnotation = { slide, previousX: point.x, previousY: point.y };
+      return;
+    }
+
+    const state = getAnnotationState(activeAnnotation.slide);
+    resizeAnnotationCanvas(state);
+    const ctx = getCanvasContext(state.canvas);
+    if (ctx) {
+      drawAnnotationStroke(
+        ctx,
+        state,
+        { x: activeAnnotation.previousX, y: activeAnnotation.previousY },
+        point,
+      );
+    }
+    activeAnnotation.previousX = point.x;
+    activeAnnotation.previousY = point.y;
+  }
+
+  function handleAnnotationEraseMove(event: PointerEvent): void {
+    const slide = getActiveSlide();
+    if (!slide) {
+      hideEraserPreview();
+      return;
+    }
+
+    const point = getViewportPoint(event);
+    if (!point) {
+      hideEraserPreview();
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    showEraserPreview(event);
+
+    const state = getAnnotationState(slide);
+    resizeAnnotationCanvas(state);
+    const ctx = getCanvasContext(state.canvas);
+    if (ctx) {
+      drawAnnotationErase(ctx, state, point);
+    }
+  }
+
+  function handleAnnotationPointerUp(event: PointerEvent): void {
+    if (!isPresenting || !isAnnotating || !activeAnnotation) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    activeAnnotation = null;
+  }
+
+  function handleKeyup(event: KeyboardEvent): void {
+    if (event.key !== 'Shift') {
+      return;
+    }
+
+    isShiftPressed = false;
+    setEraserMode(false);
+  }
+
+  function handleWindowBlur(): void {
+    isShiftPressed = false;
+    setEraserMode(false);
+  }
+
+  function handleAnnotationClick(event: MouseEvent): void {
+    if (!isPresenting || !isAnnotating) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   function handleMouseMove(event: MouseEvent): void {
     if (!isPresenting) {
       return;
@@ -507,8 +913,17 @@ export default function mountSlides(window: Window): void | (() => void) {
   closeButton.addEventListener('click', handleCloseClick);
   document.addEventListener('fullscreenchange', handleFullscreenChange);
   window.addEventListener('keydown', handleKeydown);
+  window.addEventListener('keyup', handleKeyup);
+  window.addEventListener('blur', handleWindowBlur);
   window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('resize', resizeActiveAnnotationCanvas);
+  window.addEventListener('pointermove', handleAnnotationPointerMove);
+  window.addEventListener('pointerup', handleAnnotationPointerUp);
+  window.addEventListener('pointercancel', handleAnnotationPointerUp);
+  slidesRoot.addEventListener('click', handleAnnotationClick, true);
   slidesRoot.addEventListener('click', handleSlideClick);
+  slidesRoot.addEventListener('contextmenu', handleAnnotationContextMenu);
+  slidesRoot.addEventListener('pointerdown', handleAnnotationPointerDown);
   slidesRoot.addEventListener('tada:slides-present', handleSlidesPresent);
 
   return () => {
@@ -521,9 +936,20 @@ export default function mountSlides(window: Window): void | (() => void) {
     closeButton.removeEventListener('click', handleCloseClick);
     document.removeEventListener('fullscreenchange', handleFullscreenChange);
     window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('keyup', handleKeyup);
+    window.removeEventListener('blur', handleWindowBlur);
     window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('resize', resizeActiveAnnotationCanvas);
+    window.removeEventListener('pointermove', handleAnnotationPointerMove);
+    window.removeEventListener('pointerup', handleAnnotationPointerUp);
+    window.removeEventListener('pointercancel', handleAnnotationPointerUp);
+    slidesRoot.removeEventListener('click', handleAnnotationClick, true);
     slidesRoot.removeEventListener('click', handleSlideClick);
+    slidesRoot.removeEventListener('contextmenu', handleAnnotationContextMenu);
+    slidesRoot.removeEventListener('pointerdown', handleAnnotationPointerDown);
     slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
     overlay.remove();
+    eraserPreview.remove();
+    annotationLayer.remove();
   };
 }

package/src/slides/style.scss

@@ -6,16 +6,90 @@
 }
 
 body.is-presenting {
-  --slides-scale: clamp(150%, 2.6vmin, 200%);
+  --slides-annotation-cursor-light:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      6 18,
+    crosshair;
+  --slides-annotation-cursor-dark:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='black' stroke='white' stroke-width='1.5'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      6 18,
+    crosshair;
+  --slides-annotation-cursor: var(--slides-annotation-cursor-light);
+  --slides-eraser-cursor-light:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      12 12,
+    cell;
+  --slides-eraser-cursor-dark:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+      12 12,
+    cell;
+  --slides-eraser-cursor: var(--slides-eraser-cursor-light);
+  --slides-scale: max(
+    100%,
+    min(
+      clamp(150%, 2.8vmin, 200%),
+      calc((100vw - var(--gap) - var(--gap)) / 35),
+      calc(100vh / 26.25)
+    )
+  );
 
   overflow: hidden;
 }
 
-body.is-presenting.is-presentation-cursor-hidden,
-body.is-presenting.is-presentation-cursor-hidden * {
+@media (prefers-color-scheme: dark) {
+  body.is-presenting {
+    --slides-annotation-cursor: var(--slides-annotation-cursor-dark);
+    --slides-eraser-cursor: var(--slides-eraser-cursor-dark);
+  }
+}
+
+body.is-presenting.is-presentation-cursor-hidden:not(.is-slides-annotating),
+body.is-presenting.is-presentation-cursor-hidden:not(.is-slides-annotating) * {
   cursor: none !important;
 }
 
+body.is-presenting.is-slides-annotating .slide-deck,
+body.is-presenting.is-slides-annotating .slide-deck * {
+  cursor: var(--slides-annotation-cursor) !important;
+}
+
+body.is-presenting.is-slides-annotating.is-slides-erasing .slide-deck,
+body.is-presenting.is-slides-annotating.is-slides-erasing .slide-deck * {
+  cursor: var(--slides-eraser-cursor) !important;
+}
+
+body.is-presenting [data-slides-eraser-preview] {
+  position: fixed;
+  z-index: 1002;
+  box-sizing: border-box;
+  width: var(--slides-eraser-preview-size, 36px);
+  height: var(--slides-eraser-preview-size, 36px);
+  pointer-events: none;
+  background: transparent;
+  border: 2px solid var(--bg2-color);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+body.is-presenting [data-slides-annotation-layer] {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+  pointer-events: none;
+
+  > [data-slides-annotations] {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  > [data-slides-annotations][hidden] {
+    display: none;
+  }
+}
+
 body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,