@abreen/tada 1.15.2 → 1.15.4

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.2",
+  "version": "1.15.4",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/slides/index.ts

@@ -9,34 +9,14 @@ interface SlidesPresentDetail {
   slideIndex?: number;
 }
 
-interface AnnotationPoint {
-  x: number;
-  y: number;
-}
-
-interface AnnotationStroke {
-  type: 'stroke';
-  points: AnnotationPoint[];
-}
-
-interface AnnotationErase {
-  type: 'erase';
-  points: AnnotationPoint[];
-  radius: number;
-}
-
-type AnnotationOperation = AnnotationStroke | AnnotationErase;
-
 interface SlideAnnotationState {
   canvas: HTMLCanvasElement;
-  operations: AnnotationOperation[];
   width: number;
   height: number;
   dpr: number;
 }
 
 const FULLSCREEN_STORAGE_KEY = 'slidesFullscreen';
-const ANNOTATION_CANVAS_SELECTOR = '[data-slides-annotations]';
 const ANNOTATION_COLOR = 'blueviolet';
 const ANNOTATION_ERASER_RADIUS = 18;
 const ANNOTATION_ERASER_DIAMETER = ANNOTATION_ERASER_RADIUS * 2;
@@ -151,6 +131,12 @@ export default function mountSlides(window: Window): void | (() => void) {
   );
   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;
@@ -158,12 +144,12 @@ export default function mountSlides(window: Window): void | (() => void) {
   let isAnnotating = false;
   let isShiftPressed = false;
   let isErasing = false;
+  let isDrivingTrace = false;
   let activeAnnotation: {
     slide: HTMLElement;
-    stroke: AnnotationStroke;
+    previousX: number;
+    previousY: number;
   } | null = null;
-  let activeEraser: { slide: HTMLElement; erase: AnnotationErase } | null =
-    null;
 
   const toolbarStates = new WeakMap<HTMLElement, TraceToolbarState>();
   const slideTabIndexes = new WeakMap<HTMLElement, string | null>();
@@ -249,10 +235,10 @@ export default function mountSlides(window: Window): void | (() => void) {
 
   function setActiveSlide(index: number): void {
     activeAnnotation = null;
-    activeEraser = null;
     hideEraserPreview();
     activeIndex = Math.max(0, Math.min(index, slides.length - 1));
     updateActiveSlide(slides, activeIndex, isPresenting);
+    updateActiveAnnotationCanvas();
     resizeActiveAnnotationCanvas();
   }
 
@@ -308,6 +294,7 @@ export default function mountSlides(window: Window): void | (() => void) {
     isShiftPressed = false;
     setAnnotationMode(false);
     clearAnnotationCanvases();
+    annotationLayer.hidden = true;
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.remove('is-presenting');
@@ -350,6 +337,7 @@ 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();
@@ -387,7 +375,12 @@ export default function mountSlides(window: Window): void | (() => void) {
         continue;
       }
 
-      button.click();
+      isDrivingTrace = true;
+      try {
+        button.click();
+      } finally {
+        isDrivingTrace = false;
+      }
       return true;
     }
 
@@ -540,7 +533,6 @@ export default function mountSlides(window: Window): void | (() => void) {
   function setAnnotationMode(enabled: boolean): void {
     isAnnotating = enabled;
     activeAnnotation = null;
-    activeEraser = null;
     hideEraserPreview();
     document.body.classList.toggle('is-slides-annotating', enabled);
     setEraserMode(enabled && isShiftPressed);
@@ -552,7 +544,6 @@ export default function mountSlides(window: Window): void | (() => void) {
 
   function setEraserMode(enabled: boolean): void {
     isErasing = enabled && isPresenting && isAnnotating;
-    activeEraser = null;
 
     if (isErasing) {
       activeAnnotation = null;
@@ -577,33 +568,24 @@ export default function mountSlides(window: Window): void | (() => void) {
     setAnnotationMode(!isAnnotating);
   }
 
-  function getSlidePoint(
-    slide: HTMLElement,
+  function getViewportPoint(
     event: Pick<PointerEvent, 'clientX' | 'clientY'>,
-  ): AnnotationPoint | null {
-    const rect = slide.getBoundingClientRect();
-    if (rect.width <= 0 || rect.height <= 0) {
+  ): { 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;
     }
 
-    const x = Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
-    const y = Math.min(Math.max(event.clientY - rect.top, 0), rect.height);
-
-    return { x: x / rect.width, y: y / rect.height };
-  }
-
-  function eventIsInsideSlide(
-    slide: HTMLElement,
-    event: Pick<PointerEvent, 'clientX' | 'clientY'>,
-  ): boolean {
-    const rect = slide.getBoundingClientRect();
-
-    return (
-      event.clientX >= rect.left &&
-      event.clientX <= rect.right &&
-      event.clientY >= rect.top &&
-      event.clientY <= rect.bottom
-    );
+    return { x: event.clientX, y: event.clientY };
   }
 
   function getCanvasContext(
@@ -624,41 +606,46 @@ export default function mountSlides(window: Window): void | (() => void) {
 
     const canvas = document.createElement('canvas');
     canvas.dataset.slidesAnnotations = '';
+    canvas.dataset.slideIndex = slide.getAttribute('data-slide-index') ?? '';
     canvas.setAttribute('aria-hidden', 'true');
-    slide.append(canvas);
-
-    const state: SlideAnnotationState = {
-      canvas,
-      operations: [],
-      width: 0,
-      height: 0,
-      dpr: 1,
-    };
+    canvas.hidden = slide !== getActiveSlide();
+    annotationLayer.append(canvas);
+
+    const state: SlideAnnotationState = { canvas, width: 0, height: 0, dpr: 1 };
     annotationStates.set(slide, state);
-    resizeAnnotationCanvas(slide, state);
+    resizeAnnotationCanvas(state);
 
     return state;
   }
 
-  function resizeAnnotationCanvas(
-    slide: HTMLElement,
-    state: SlideAnnotationState,
-  ): void {
-    const rect = slide.getBoundingClientRect();
-    const width = Math.max(1, rect.width);
-    const height = Math.max(1, rect.height);
+  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);
-    redrawAnnotationCanvas(state);
+
+    if (priorCanvas) {
+      getCanvasContext(state.canvas)?.drawImage(priorCanvas, 0, 0);
+    }
   }
 
   function resizeActiveAnnotationCanvas(): void {
@@ -669,124 +656,75 @@ export default function mountSlides(window: Window): void | (() => void) {
 
     const state = annotationStates.get(slide);
     if (state) {
-      resizeAnnotationCanvas(slide, state);
-    }
-  }
-
-  function redrawAnnotationCanvas(state: SlideAnnotationState): void {
-    const ctx = getCanvasContext(state.canvas);
-    if (!ctx) {
-      return;
-    }
-
-    ctx.clearRect(0, 0, state.canvas.width, state.canvas.height);
-
-    for (const operation of state.operations) {
-      if (operation.type === 'stroke') {
-        drawAnnotationStroke(ctx, operation, state);
-      } else {
-        drawAnnotationErase(ctx, operation, state);
-      }
+      resizeAnnotationCanvas(state);
     }
   }
 
   function drawAnnotationStroke(
     ctx: CanvasRenderingContext2D,
-    stroke: AnnotationStroke,
     state: SlideAnnotationState,
+    from: { x: number; y: number },
+    to: { x: number; y: number },
   ): void {
-    if (stroke.points.length === 0) {
-      return;
-    }
-
     ctx.globalCompositeOperation = 'source-over';
     ctx.strokeStyle = ANNOTATION_COLOR;
     ctx.lineWidth = 3 * state.dpr;
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
     ctx.beginPath();
-    const [first] = stroke.points;
-    ctx.moveTo(first.x * state.canvas.width, first.y * state.canvas.height);
-
-    for (const point of stroke.points.slice(1)) {
-      ctx.lineTo(point.x * state.canvas.width, point.y * state.canvas.height);
-    }
-
+    ctx.moveTo(from.x * state.dpr, from.y * state.dpr);
+    ctx.lineTo(to.x * state.dpr, to.y * state.dpr);
     ctx.stroke();
   }
 
-  function drawAnnotationErase(
+  function drawAnnotationDot(
     ctx: CanvasRenderingContext2D,
-    erase: AnnotationErase,
     state: SlideAnnotationState,
+    point: { x: number; y: number },
   ): void {
-    if (erase.points.length === 0) {
-      return;
-    }
+    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();
+  }
 
-    const radius = erase.radius * state.dpr;
+  function drawAnnotationErase(
+    ctx: CanvasRenderingContext2D,
+    state: SlideAnnotationState,
+    point: { x: number; y: number },
+  ): void {
+    const radius = ANNOTATION_ERASER_RADIUS * state.dpr;
     ctx.globalCompositeOperation = 'destination-out';
-    ctx.lineWidth = radius * 2;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    const [first] = erase.points;
-    if (erase.points.length === 1) {
-      ctx.beginPath();
-      ctx.arc(
-        first.x * state.canvas.width,
-        first.y * state.canvas.height,
-        radius,
-        0,
-        Math.PI * 2,
-      );
-      ctx.fill();
-      ctx.globalCompositeOperation = 'source-over';
-      return;
-    }
-
     ctx.beginPath();
-    ctx.moveTo(first.x * state.canvas.width, first.y * state.canvas.height);
-
-    for (const point of erase.points.slice(1)) {
-      ctx.lineTo(point.x * state.canvas.width, point.y * state.canvas.height);
-    }
-
-    ctx.stroke();
+    ctx.arc(point.x * state.dpr, point.y * state.dpr, radius, 0, Math.PI * 2);
+    ctx.fill();
     ctx.globalCompositeOperation = 'source-over';
   }
 
-  function drawCurrentAnnotation(): void {
-    if (!activeAnnotation) {
-      return;
-    }
-
-    const state = getAnnotationState(activeAnnotation.slide);
-    resizeAnnotationCanvas(activeAnnotation.slide, state);
-    redrawAnnotationCanvas(state);
-  }
-
-  function drawCurrentEraser(): void {
-    if (!activeEraser) {
-      return;
-    }
-
-    const state = annotationStates.get(activeEraser.slide);
-    if (!state) {
-      return;
-    }
-
-    resizeAnnotationCanvas(activeEraser.slide, state);
-    redrawAnnotationCanvas(state);
-  }
-
   function clearAnnotationCanvases(): void {
     for (const slide of slides) {
-      slide.querySelector(ANNOTATION_CANVAS_SELECTOR)?.remove();
+      annotationStates.get(slide)?.canvas.remove();
       annotationStates.delete(slide);
     }
     activeAnnotation = null;
-    activeEraser = 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 {
@@ -812,21 +750,23 @@ export default function mountSlides(window: Window): void | (() => void) {
     }
 
     const slide = getActiveSlide();
-    if (!slide || !eventIsInsideSlide(slide, event)) {
+    if (!slide) {
       activeAnnotation = null;
       return;
     }
 
-    const point = getSlidePoint(slide, event);
+    const point = getViewportPoint(event);
     if (!point) {
       return;
     }
 
     const state = getAnnotationState(slide);
-    const stroke: AnnotationStroke = { type: 'stroke', points: [point] };
-    state.operations.push(stroke);
-    activeAnnotation = { slide, stroke };
-    drawCurrentAnnotation();
+    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;
@@ -843,40 +783,51 @@ export default function mountSlides(window: Window): void | (() => void) {
       return;
     }
 
-    if (!activeAnnotation) {
-      return;
-    }
-
     event.preventDefault();
     event.stopPropagation();
 
-    const point = getSlidePoint(activeAnnotation.slide, event);
+    const point = getViewportPoint(event);
     if (!point) {
+      activeAnnotation = null;
       return;
     }
 
-    activeAnnotation.stroke.points.push(point);
-    drawCurrentAnnotation();
+    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 || !eventIsInsideSlide(slide, event)) {
-      activeEraser = null;
-      hideEraserPreview();
-      return;
-    }
-
-    const state = annotationStates.get(slide);
-    if (!state) {
-      activeEraser = null;
+    if (!slide) {
       hideEraserPreview();
       return;
     }
 
-    const point = getSlidePoint(slide, event);
+    const point = getViewportPoint(event);
     if (!point) {
-      activeEraser = null;
       hideEraserPreview();
       return;
     }
@@ -885,18 +836,12 @@ export default function mountSlides(window: Window): void | (() => void) {
     event.stopPropagation();
     showEraserPreview(event);
 
-    if (!activeEraser || activeEraser.slide !== slide) {
-      const erase: AnnotationErase = {
-        type: 'erase',
-        points: [],
-        radius: ANNOTATION_ERASER_RADIUS,
-      };
-      state.operations.push(erase);
-      activeEraser = { slide, erase };
+    const state = getAnnotationState(slide);
+    resizeAnnotationCanvas(state);
+    const ctx = getCanvasContext(state.canvas);
+    if (ctx) {
+      drawAnnotationErase(ctx, state, point);
     }
-
-    activeEraser.erase.points.push(point);
-    drawCurrentEraser();
   }
 
   function handleAnnotationPointerUp(event: PointerEvent): void {
@@ -924,7 +869,7 @@ export default function mountSlides(window: Window): void | (() => void) {
   }
 
   function handleAnnotationClick(event: MouseEvent): void {
-    if (!isPresenting || !isAnnotating) {
+    if (!isPresenting || !isAnnotating || isDrivingTrace) {
       return;
     }
 
@@ -1011,5 +956,6 @@ export default function mountSlides(window: Window): void | (() => void) {
     slidesRoot.removeEventListener('tada:slides-present', handleSlidesPresent);
     overlay.remove();
     eraserPreview.remove();
+    annotationLayer.remove();
   };
 }

package/src/slides/style.scss

@@ -6,14 +6,24 @@
 }
 
 body.is-presenting {
-  --slides-annotation-cursor:
+  --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-eraser-cursor:
+  --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(
@@ -26,6 +36,13 @@ body.is-presenting {
   overflow: 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;
@@ -54,6 +71,25 @@ body.is-presenting [data-slides-eraser-preview] {
   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,
@@ -108,16 +144,6 @@ body.is-presenting .slide {
   background: var(--bg-color);
   transform: translateX(-50%);
 
-  > [data-slides-annotations] {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
   > :first-child {
     margin-top: 0;
   }