@abreen/tada 1.15.1 → 1.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "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,37 @@ 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;
 
 function isInteractive(
   view: Window & typeof globalThis,
@@ -111,15 +141,39 @@ 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);
+
   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;
+    stroke: AnnotationStroke;
+  } | null = null;
+  let activeEraser: { slide: HTMLElement; erase: AnnotationErase } | 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 +248,12 @@ 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);
+    resizeActiveAnnotationCanvas();
   }
 
   function focusSlide(slide: HTMLElement | undefined): void {
@@ -247,6 +305,9 @@ export default function mountSlides(window: Window): void | (() => void) {
     isPresenting = false;
     activeIndex = -1;
     presentationMode = null;
+    isShiftPressed = false;
+    setAnnotationMode(false);
+    clearAnnotationCanvases();
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.remove('is-presenting');
@@ -289,6 +350,7 @@ export default function mountSlides(window: Window): void | (() => void) {
   function enterPresentation(mode: PresentationMode, slideIndex = 0): void {
     isPresenting = true;
     presentationMode = mode;
+    setAnnotationMode(false);
     hidePresentationControls();
     showPresentationCursor();
     document.body.classList.add('is-presenting');
@@ -428,6 +490,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 +533,405 @@ 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;
+    activeEraser = 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;
+    activeEraser = null;
+
+    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 getSlidePoint(
+    slide: HTMLElement,
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>,
+  ): AnnotationPoint | null {
+    const rect = slide.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      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
+    );
+  }
+
+  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.setAttribute('aria-hidden', 'true');
+    slide.append(canvas);
+
+    const state: SlideAnnotationState = {
+      canvas,
+      operations: [],
+      width: 0,
+      height: 0,
+      dpr: 1,
+    };
+    annotationStates.set(slide, state);
+    resizeAnnotationCanvas(slide, 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);
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+
+    if (state.width === width && state.height === height && state.dpr === dpr) {
+      return;
+    }
+
+    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);
+  }
+
+  function resizeActiveAnnotationCanvas(): void {
+    const slide = getActiveSlide();
+    if (!slide) {
+      return;
+    }
+
+    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);
+      }
+    }
+  }
+
+  function drawAnnotationStroke(
+    ctx: CanvasRenderingContext2D,
+    stroke: AnnotationStroke,
+    state: SlideAnnotationState,
+  ): 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.stroke();
+  }
+
+  function drawAnnotationErase(
+    ctx: CanvasRenderingContext2D,
+    erase: AnnotationErase,
+    state: SlideAnnotationState,
+  ): void {
+    if (erase.points.length === 0) {
+      return;
+    }
+
+    const radius = erase.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.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.delete(slide);
+    }
+    activeAnnotation = null;
+    activeEraser = null;
+  }
+
+  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 || !eventIsInsideSlide(slide, event)) {
+      activeAnnotation = null;
+      return;
+    }
+
+    const point = getSlidePoint(slide, event);
+    if (!point) {
+      return;
+    }
+
+    const state = getAnnotationState(slide);
+    const stroke: AnnotationStroke = { type: 'stroke', points: [point] };
+    state.operations.push(stroke);
+    activeAnnotation = { slide, stroke };
+    drawCurrentAnnotation();
+
+    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;
+    }
+
+    if (!activeAnnotation) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const point = getSlidePoint(activeAnnotation.slide, event);
+    if (!point) {
+      return;
+    }
+
+    activeAnnotation.stroke.points.push(point);
+    drawCurrentAnnotation();
+  }
+
+  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;
+      hideEraserPreview();
+      return;
+    }
+
+    const point = getSlidePoint(slide, event);
+    if (!point) {
+      activeEraser = null;
+      hideEraserPreview();
+      return;
+    }
+
+    event.preventDefault();
+    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 };
+    }
+
+    activeEraser.erase.points.push(point);
+    drawCurrentEraser();
+  }
+
+  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 +974,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 +997,19 @@ 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();
   };
 }

package/src/slides/style.scss

@@ -6,16 +6,54 @@
 }
 
 body.is-presenting {
-  --slides-scale: clamp(150%, 2.6vmin, 200%);
+  --slides-annotation-cursor:
+    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:
+    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-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 * {
+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 header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
@@ -70,6 +108,16 @@ 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;
   }