@activecollab/components 2.0.398 → 2.0.399

package/dist/esm/presentation/whiteboard/canvasElements.js

@@ -0,0 +1,746 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { CARD_PREVIEW_HEIGHT, SHAPE_DEFAULT_SIZES, isShapeTool } from "./bottomDock";
+import { CANVAS_ELEMENTS, PostitFormattingToolbar, ResizeHandles, ShapeFormattingToolbar, StyledCanvasElement, StyledCanvasLayer, StyledSticky, defaultShapeState, gridLevel, renderShapeBody, snapValue, stickyGradient } from "./elements";
+import { FILE_DEFAULT_WIDTH, FileElement, binaryFrom, describeFile, revokeThumbnail } from "./fileElement";
+import { CARD_DRAW_THRESHOLD, LINK_DEFAULT_WIDTH, LinkElement, StyledLinkDraft, StyledShapePreview, clampCardWidth, isValidLinkUrl, shapePreviewGlyph } from "./linkElement";
+
+/**
+ * A card is full of its own controls — the URL field, the display toggle, the
+ * retry button, the toolbar. A mousedown on any of them selects the element but
+ * must not start a board drag.
+ *
+ * The resize grip needs no entry here: the shipped handle calls
+ * `preventDefault()` on pointerdown, which suppresses the compatibility mouse
+ * events entirely, so a grip press never reaches this at all.
+ */
+export const NO_DRAG_SELECTOR = "a, button, input, textarea, [data-no-drag]";
+
+/**
+ * …except a control that IS the whole card.
+ *
+ * A placeholder is one big button filling its card, so treating it as a control
+ * left no surface to grab and the card could not be moved at all. Marked
+ * drag-through, it does both: moving the pointer drags the card, and releasing
+ * without moving is still a click that opens the editor or the file picker.
+ * (Atlassian's rule — make a handle draggable, not the whole element — assumes
+ * the element has some non-interactive surface. This one has none.)
+ */
+export const DRAG_THROUGH_SELECTOR = "[data-drag-through]";
+/* The canvas elements + selection state. The rounded rectangle starts
+   selected; clicking an element selects it, clicking the canvas deselects,
+   Delete on the shape toolbar removes the element. Toolbar submenus really
+   edit the per-element state. Elements are draggable, and snap to the grid
+   when the board's Snap to Grid setting is on.
+
+   Link elements are created here too — by drawing a box with the Link tool
+   armed, or by pasting a URL onto the canvas. */
+export const CanvasElements = _ref => {
+  let gridSize = _ref.gridSize,
+    snapToGrid = _ref.snapToGrid,
+    activeTool = _ref.activeTool,
+    onToolUsed = _ref.onToolUsed,
+    selectedId = _ref.selectedId,
+    setSelectedId = _ref.onSelectedIdChange,
+    positions = _ref.positions,
+    setPositions = _ref.setPositions,
+    shapes = _ref.shapes,
+    setShapes = _ref.setShapes,
+    stickyStyle = _ref.stickyStyle,
+    setStickyStyle = _ref.setStickyStyle,
+    links = _ref.links,
+    setLinks = _ref.setLinks,
+    files = _ref.files,
+    setFiles = _ref.setFiles,
+    createdShapes = _ref.createdShapes,
+    setCreatedShapes = _ref.setCreatedShapes,
+    sizes = _ref.sizes,
+    rotations = _ref.rotations,
+    locks = _ref.locks,
+    setLocks = _ref.setLocks;
+  const toggleLock = id => setLocks(current => {
+    var _current$id;
+    return _extends({}, current, {
+      [id]: !((_current$id = current[id]) != null ? _current$id : false)
+    });
+  });
+  const _useState = useState([]),
+    removedIds = _useState[0],
+    setRemovedIds = _useState[1];
+  const _useState2 = useState(null),
+    autoEditId = _useState2[0],
+    setAutoEditId = _useState2[1];
+  const _useState3 = useState(null),
+    autoOpenId = _useState3[0],
+    setAutoOpenId = _useState3[1];
+  const _useState4 = useState(null),
+    draft = _useState4[0],
+    setDraft = _useState4[1];
+  // The active drag and the live snap step are held in refs so the document
+  // listeners stay stable and always read the current Board Settings.
+  const dragRef = useRef(null);
+  const snapStepRef = useRef(null);
+  snapStepRef.current = snapToGrid ? gridLevel(gridSize).snapStep : null;
+  /* Set once a press turns into a move, so the click that ends the gesture can
+     be swallowed before it reaches a drag-through control. */
+  const suppressClickRef = useRef(false);
+
+  /* Runs in the capture phase, so it can stop the click before the placeholder
+     button underneath ever sees it. It must stay a no-op otherwise — stopping
+     propagation on the way down would keep every ordinary click from reaching
+     the control it was aimed at. */
+  const handleElementClickCapture = useCallback(event => {
+    if (!suppressClickRef.current) {
+      return;
+    }
+    suppressClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const handleDragMove = useCallback(event => {
+    const drag = dragRef.current;
+    if (!drag) {
+      return;
+    }
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (!drag.moved && Math.abs(dx) + Math.abs(dy) < 3) {
+      return;
+    }
+    // Past the threshold this gesture is a move, so the click it ends with must
+    // not also activate whatever was under the pointer.
+    drag.moved = true;
+    suppressClickRef.current = true;
+    const step = snapStepRef.current;
+    const x = snapValue(drag.originX + dx, step);
+    const y = snapValue(drag.originY + dy, step);
+    setPositions(current => _extends({}, current, {
+      [drag.id]: {
+        x,
+        y
+      }
+    }));
+  }, [setPositions]);
+  const handleDragEnd = useCallback(() => {
+    dragRef.current = null;
+    window.removeEventListener("mousemove", handleDragMove);
+    window.removeEventListener("mouseup", handleDragEnd);
+  }, [handleDragMove]);
+
+  /* A native HTML5 drag (an <img>, a text selection) swallows the mouseup this
+     drag ends on, which would leave the element following the pointer with no
+     button held. Ending the board drag on `dragstart` closes that hole; the
+     cover's media is also marked undraggable in the design system, so the case
+     should not arise from a card in the first place. */
+  useEffect(() => {
+    const handleNativeDragStart = event => {
+      event.preventDefault();
+      handleDragEnd();
+    };
+    window.addEventListener("dragstart", handleNativeDragStart);
+    return () => window.removeEventListener("dragstart", handleNativeDragStart);
+  }, [handleDragEnd]);
+  const handleElementMouseDown = useCallback((event, id) => {
+    if (event.button !== 0) {
+      return;
+    }
+
+    // An armed tool owns the canvas: let the press through to the layer so a
+    // box can be drawn over an existing element instead of moving it.
+    if (activeToolRef.current !== "select") {
+      return;
+    }
+    event.stopPropagation();
+    setSelectedId(id);
+
+    // A fresh press starts a fresh gesture: whatever the last one decided
+    // about swallowing its click no longer applies.
+    suppressClickRef.current = false;
+    const target = event.target;
+    if (target.closest(NO_DRAG_SELECTOR) && !target.closest(DRAG_THROUGH_SELECTOR)) {
+      return;
+    }
+    const origin = positions[id];
+    dragRef.current = {
+      id,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: origin.x,
+      originY: origin.y,
+      moved: false
+    };
+    window.addEventListener("mousemove", handleDragMove);
+    window.addEventListener("mouseup", handleDragEnd);
+  }, [positions, handleDragMove, handleDragEnd, setSelectedId]);
+  const updateShape = useCallback((id, partial) => setShapes(current => _extends({}, current, {
+    [id]: _extends({}, current[id], partial)
+  })), [setShapes]);
+  const handleDelete = useCallback(() => {
+    setSelectedId(current => {
+      if (current) {
+        setRemovedIds(removed => [...removed, current]);
+      }
+      return null;
+    });
+  }, [setSelectedId]);
+
+  /* ---- link elements ------------------------------------------------ */
+
+  const layerRef = useRef(null);
+  const linkCounterRef = useRef(0);
+  // Where a pasted card lands: the pointer's last canvas position.
+  const pointerRef = useRef({
+    x: 160,
+    y: 160
+  });
+  /* The width each live resize gesture started from. The grip reports deltas
+     measured from the gesture START and brackets the stream with
+     `onResizeStart` / `onResizeCommit`, so this is a snapshot taken when a
+     gesture opens and dropped when it closes — not a running accumulator. That
+     is what lets a slow, few-pixels-at-a-time drag keep growing: the delta
+     itself grows, so it crosses grid lines instead of rounding each hop away.
+     Having a defined gesture end also means nothing is ever left over to make
+     the next gesture jump. */
+  const resizeStartRef = useRef({});
+
+  // Mirrors so the stable document/window handlers always read current state.
+  const activeToolRef = useRef(activeTool);
+  activeToolRef.current = activeTool;
+  const linksRef = useRef(links);
+  linksRef.current = links;
+  const filesRef = useRef(files);
+  filesRef.current = files;
+  const canvasPoint = useCallback((clientX, clientY) => {
+    var _layerRef$current, _rect$left, _rect$top;
+    const rect = (_layerRef$current = layerRef.current) == null ? void 0 : _layerRef$current.getBoundingClientRect();
+    return {
+      x: clientX - ((_rect$left = rect == null ? void 0 : rect.left) != null ? _rect$left : 0),
+      y: clientY - ((_rect$top = rect == null ? void 0 : rect.top) != null ? _rect$top : 0)
+    };
+  }, []);
+
+  /* ---- shape elements ------------------------------------------------ */
+
+  const shapeCounterRef = useRef(0);
+
+  /* Create a shape element. A plain click drops the tool's default size at the
+     (snapped) point; a real drag creates the drawn box. */
+  const addShape = useCallback((point, tool, size) => {
+    shapeCounterRef.current += 1;
+    const id = "shape-created-" + shapeCounterRef.current;
+    const step = snapStepRef.current;
+    setPositions(current => _extends({}, current, {
+      [id]: {
+        x: snapValue(point.x, step),
+        y: snapValue(point.y, step)
+      }
+    }));
+    setShapes(current => _extends({}, current, {
+      [id]: defaultShapeState(tool)
+    }));
+    setCreatedShapes(current => [...current, {
+      id,
+      kind: "shape",
+      initialType: tool,
+      x: point.x,
+      y: point.y,
+      width: size.width,
+      height: size.height
+    }]);
+    setSelectedId(id);
+  }, [setPositions, setShapes, setCreatedShapes, setSelectedId]);
+
+  /* Create a link element. `url` null lands a placeholder (the draw gesture);
+     a URL goes straight to the unfurl (the paste gesture, where the address is
+     already known). */
+  const addLink = useCallback((point, width, url) => {
+    linkCounterRef.current += 1;
+    const id = "link-" + linkCounterRef.current;
+    const step = snapStepRef.current;
+    setPositions(current => _extends({}, current, {
+      [id]: {
+        x: snapValue(point.x, step),
+        y: snapValue(point.y, step)
+      }
+    }));
+    setLinks(current => [...current, {
+      id,
+      width: clampCardWidth(width),
+      url
+    }]);
+    setSelectedId(id);
+    setAutoEditId(url == null ? id : null);
+  }, [setSelectedId, setPositions, setLinks]);
+  const commitLinkUrl = useCallback((id, url) => {
+    setLinks(current => current.map(link => link.id === id ? _extends({}, link, {
+      url
+    }) : link));
+  }, [setLinks]);
+  const deleteLink = useCallback(id => {
+    setLinks(current => current.filter(link => link.id !== id));
+    delete resizeStartRef.current[id];
+    setSelectedId(null);
+  }, [setSelectedId, setLinks]);
+
+  /* ---- file elements ------------------------------------------------ */
+
+  const fileCounterRef = useRef(0);
+
+  /* Create a file element. `file` null lands a placeholder and opens the picker
+     (the draw gesture); a file goes straight to the upload (the paste and drop
+     gestures, where the bytes are already in hand). */
+  const addFile = useCallback((point, width, file) => {
+    fileCounterRef.current += 1;
+    const id = "file-" + fileCounterRef.current;
+    const step = snapStepRef.current;
+
+    /* `describeFile` allocates an object URL, so it must run HERE and not
+       inside the updater: a state updater has to be pure, and a double-invoked
+       one would mint a second URL that nothing holds a reference to and that
+       therefore could never be revoked. */
+    const described = file ? describeFile(file) : null;
+    setPositions(current => _extends({}, current, {
+      [id]: {
+        x: snapValue(point.x, step),
+        y: snapValue(point.y, step)
+      }
+    }));
+    setFiles(current => [...current, {
+      id,
+      width: clampCardWidth(width),
+      file: described
+    }]);
+    setSelectedId(id);
+    setAutoOpenId(file == null ? id : null);
+  }, [setSelectedId, setPositions, setFiles]);
+  const attachFile = useCallback((id, picked) => {
+    var _filesRef$current$fin, _filesRef$current$fin2;
+    const described = describeFile(picked);
+    // Replacing a file releases the one it replaces.
+    revokeThumbnail((_filesRef$current$fin = (_filesRef$current$fin2 = filesRef.current.find(entry => entry.id === id)) == null ? void 0 : _filesRef$current$fin2.file) != null ? _filesRef$current$fin : null);
+    setFiles(current => current.map(entry => entry.id === id ? _extends({}, entry, {
+      file: described
+    }) : entry));
+  }, [setFiles]);
+
+  /* Cancelling an upload keeps the card and drops the file, so the placeholder
+     is what you land back on — the same place Esc leaves you. */
+  const detachFile = useCallback(id => {
+    var _filesRef$current$fin3, _filesRef$current$fin4;
+    revokeThumbnail((_filesRef$current$fin3 = (_filesRef$current$fin4 = filesRef.current.find(entry => entry.id === id)) == null ? void 0 : _filesRef$current$fin4.file) != null ? _filesRef$current$fin3 : null);
+    setFiles(current => current.map(entry => entry.id === id ? _extends({}, entry, {
+      file: null
+    }) : entry));
+    setAutoOpenId(null);
+  }, [setFiles]);
+  const deleteFile = useCallback(id => {
+    var _filesRef$current$fin5, _filesRef$current$fin6;
+    revokeThumbnail((_filesRef$current$fin5 = (_filesRef$current$fin6 = filesRef.current.find(entry => entry.id === id)) == null ? void 0 : _filesRef$current$fin6.file) != null ? _filesRef$current$fin5 : null);
+    setFiles(current => current.filter(entry => entry.id !== id));
+    delete resizeStartRef.current[id];
+    setSelectedId(null);
+  }, [setSelectedId, setFiles]);
+  const resizeFile = useCallback((id, dx) => {
+    const from = resizeStartRef.current[id];
+    if (from == null) {
+      return;
+    }
+    const width = clampCardWidth(snapValue(from + dx, snapStepRef.current));
+    setFiles(all => all.map(entry => entry.id === id ? _extends({}, entry, {
+      width
+    }) : entry));
+  }, [setFiles]);
+
+  // Object URLs outlive React, so release every one still held on unmount.
+  useEffect(() => () => filesRef.current.forEach(entry => revokeThumbnail(entry.file)), []);
+
+  /* The gesture brackets. `beginResize` snapshots the width the gesture opened
+     on; `endResize` is where a real board would push its single undo entry, the
+     previews before it being live feedback only (spec §7e). */
+  const beginResize = useCallback((id, width) => {
+    resizeStartRef.current[id] = width;
+  }, []);
+  const endResize = useCallback(id => {
+    delete resizeStartRef.current[id];
+  }, []);
+
+  /* Width-only resize: the card reports the delta from the gesture start, the
+     board decides what it means — clamp to the link bounds, then land on the
+     board grid. Resolving against the snapshot rather than the last value makes
+     this idempotent, so a double-invoked updater cannot count a delta twice. */
+  const resizeLink = useCallback((id, dx) => {
+    const from = resizeStartRef.current[id];
+    if (from == null) {
+      return;
+    }
+    const width = clampCardWidth(snapValue(from + dx, snapStepRef.current));
+    setLinks(all => all.map(link => link.id === id ? _extends({}, link, {
+      width
+    }) : link));
+  }, [setLinks]);
+
+  /* ---- draw-to-place ------------------------------------------------ */
+
+  const drawRef = useRef(null);
+  /* A completed draw is followed by a click on the canvas layer, whose job is
+     to deselect — which would drop the selection off the card just created.
+     This swallows exactly that one click. */
+  const drawEndedRef = useRef(false);
+  const handleDrawMove = useCallback(event => {
+    const origin = drawRef.current;
+    if (!origin) {
+      return;
+    }
+    const point = canvasPoint(event.clientX, event.clientY);
+    setDraft({
+      x: Math.min(origin.x, point.x),
+      y: Math.min(origin.y, point.y),
+      width: Math.abs(point.x - origin.x),
+      height: Math.abs(point.y - origin.y),
+      tool: origin.tool
+    });
+  }, [canvasPoint]);
+  const handleDrawEnd = useCallback(event => {
+    const origin = drawRef.current;
+    drawRef.current = null;
+    window.removeEventListener("mousemove", handleDrawMove);
+    window.removeEventListener("mouseup", handleDrawEnd);
+    setDraft(null);
+    if (!origin) {
+      return;
+    }
+
+    // Swallow the click that follows this mouseup, so the layer's deselect
+    // does not drop the selection off the card we are about to create. The
+    // click may never arrive (a release over the dock retargets it), so it
+    // expires on a timer rather than waiting to be consumed.
+    drawEndedRef.current = true;
+    window.setTimeout(() => {
+      drawEndedRef.current = false;
+    }, 0);
+    const point = canvasPoint(event.clientX, event.clientY);
+    const width = Math.abs(point.x - origin.x);
+    const height = Math.abs(point.y - origin.y);
+    // A click (or a nudge) means "default element here"; a real drag sets
+    // the size.
+    const drawn = Math.max(width, height) >= CARD_DRAW_THRESHOLD;
+    const at = drawn ? {
+      x: Math.min(origin.x, point.x),
+      y: Math.min(origin.y, point.y)
+    } : origin;
+    if (isShapeTool(origin.tool)) {
+      addShape(at, origin.tool, drawn ? {
+        width,
+        height
+      } : SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if (origin.tool === "file") {
+      addFile(at, drawn ? width : FILE_DEFAULT_WIDTH, null);
+    } else {
+      addLink(at, drawn ? width : LINK_DEFAULT_WIDTH, null);
+    }
+    onToolUsed();
+  }, [addFile, addLink, addShape, canvasPoint, handleDrawMove, onToolUsed]);
+  const handleLayerMouseDown = useCallback(event => {
+    const tool = activeToolRef.current;
+    if (event.button !== 0 || tool === "select") {
+      return;
+    }
+
+    // Without this the draw drag also runs the browser's text selection and
+    // highlights everything it sweeps across.
+    event.preventDefault();
+    const point = canvasPoint(event.clientX, event.clientY);
+    // The tool is captured with the gesture: disarming mid-drag must not
+    // change what the release creates.
+    drawRef.current = _extends({}, point, {
+      tool
+    });
+    setHoverPoint(null);
+    setDraft(_extends({}, point, {
+      width: 0,
+      height: 0,
+      tool
+    }));
+    window.addEventListener("mousemove", handleDrawMove);
+    window.addEventListener("mouseup", handleDrawEnd);
+  }, [canvasPoint, handleDrawMove, handleDrawEnd]);
+
+  /* Where the armed tool's hover preview sits — cleared while a draw gesture
+     runs (the rubber band takes over) and whenever the tool disarms. */
+  const _useState5 = useState(null),
+    hoverPoint = _useState5[0],
+    setHoverPoint = _useState5[1];
+  useEffect(() => {
+    if (activeTool === "select") {
+      setHoverPoint(null);
+    }
+  }, [activeTool]);
+  const handleLayerMouseMove = useCallback(event => {
+    pointerRef.current = canvasPoint(event.clientX, event.clientY);
+    if (activeTool !== "select" && !drawRef.current) {
+      setHoverPoint(pointerRef.current);
+    }
+  }, [activeTool, canvasPoint]);
+  const handleLayerMouseLeave = useCallback(() => {
+    setHoverPoint(null);
+  }, []);
+  const handleLayerClick = useCallback(() => {
+    if (drawEndedRef.current) {
+      drawEndedRef.current = false;
+      return;
+    }
+    setSelectedId(null);
+  }, [setSelectedId]);
+
+  /* ---- drop-to-place ------------------------------------------------ */
+
+  /**
+   * The whole board is a drop target, which the dock hint already promises.
+   *
+   * This also has to exist for safety, not just for the feature: a file dropped
+   * anywhere the app does not handle makes the browser NAVIGATE to it, throwing
+   * the board away. So the document swallows every file drag, and a drop on the
+   * canvas lands a card at the pointer.
+   */
+  useEffect(() => {
+    const isFileDrag = event => {
+      var _event$dataTransfer$t, _event$dataTransfer;
+      return Array.from((_event$dataTransfer$t = (_event$dataTransfer = event.dataTransfer) == null ? void 0 : _event$dataTransfer.types) != null ? _event$dataTransfer$t : []).includes("Files");
+    };
+    const handleDragOver = event => {
+      if (!isFileDrag(event)) {
+        return;
+      }
+      // Both of these are required: without the dragover default prevented the
+      // drop event never fires at all.
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+    };
+    const handleDrop = event => {
+      if (!isFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      const target = event.target;
+      // A drop onto an empty placeholder is that card's own business.
+      if (target != null && target.closest("[data-file-dropzone]")) {
+        return;
+      }
+      const dropped = binaryFrom(event.dataTransfer);
+      if (!dropped) {
+        return;
+      }
+      addFile(canvasPoint(event.clientX, event.clientY), FILE_DEFAULT_WIDTH, dropped);
+      onToolUsed();
+    };
+    document.addEventListener("dragover", handleDragOver);
+    document.addEventListener("drop", handleDrop);
+    return () => {
+      document.removeEventListener("dragover", handleDragOver);
+      document.removeEventListener("drop", handleDrop);
+    };
+  }, [addFile, canvasPoint, onToolUsed]);
+
+  /* ---- paste-to-place ----------------------------------------------- */
+
+  useEffect(() => {
+    const handlePaste = event => {
+      var _layerRef$current2, _event$clipboardData$, _event$clipboardData;
+      /* Only the board may claim a paste, and two different things can take it
+         away: a focused field keeps its own paste (the card's URL editor is
+         INSIDE the canvas, so "on the board" is not sufficient), and a dialog
+         keeps its own too — otherwise pasting with Add Users open would quietly
+         drop a card behind the modal. With nothing focused the target is
+         <body>, which is the board's own case. */
+      const target = event.target;
+      if (target != null && target.closest("input, textarea, [contenteditable='true']")) {
+        return;
+      }
+      const onTheBoard = target === document.body || target != null && ((_layerRef$current2 = layerRef.current) == null ? void 0 : _layerRef$current2.contains(target)) === true;
+      if (!onTheBoard) {
+        return;
+      }
+
+      /* Binary wins over text. A screenshot or a copied file carries both — the
+         bytes as an item and often a filename as text — and the bytes are the
+         thing the user meant. Only once there is nothing binary do we read the
+         clipboard as a URL. */
+      const binary = binaryFrom(event.clipboardData);
+      if (binary) {
+        event.preventDefault();
+        // The bytes are in hand, so the card skips the placeholder and the
+        // picker: it goes straight to uploading them.
+        addFile(pointerRef.current, FILE_DEFAULT_WIDTH, binary);
+        onToolUsed();
+        return;
+      }
+      const text = (_event$clipboardData$ = (_event$clipboardData = event.clipboardData) == null ? void 0 : _event$clipboardData.getData("text/plain")) != null ? _event$clipboardData$ : "";
+      if (!isValidLinkUrl(text)) {
+        return;
+      }
+      event.preventDefault();
+      // The address is already known, so this card skips the placeholder and
+      // the editor: it drops straight into the unfurl.
+      addLink(pointerRef.current, LINK_DEFAULT_WIDTH, text.trim());
+      onToolUsed();
+    };
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, [addFile, addLink, onToolUsed]);
+  return /*#__PURE__*/React.createElement(StyledCanvasLayer, {
+    ref: layerRef,
+    className: activeTool === "select" ? undefined : "drawing",
+    onClick: handleLayerClick,
+    onMouseDown: handleLayerMouseDown,
+    onMouseMove: handleLayerMouseMove,
+    onMouseLeave: handleLayerMouseLeave
+  }, [...CANVAS_ELEMENTS, ...createdShapes].filter(element => !removedIds.includes(element.id)).map(element => {
+    var _sizes$element$id$wid, _sizes$element$id, _sizes$element$id$hei, _sizes$element$id2, _rotations$element$id, _locks$element$id, _locks$element$id2;
+    const selected = element.id === selectedId;
+    const shape = element.kind === "shape" ? shapes[element.id] : null;
+    const width = (_sizes$element$id$wid = (_sizes$element$id = sizes[element.id]) == null ? void 0 : _sizes$element$id.width) != null ? _sizes$element$id$wid : element.width;
+    const height = (_sizes$element$id$hei = (_sizes$element$id2 = sizes[element.id]) == null ? void 0 : _sizes$element$id2.height) != null ? _sizes$element$id$hei : element.height;
+    const rotation = (_rotations$element$id = rotations[element.id]) != null ? _rotations$element$id : 0;
+    return /*#__PURE__*/React.createElement(StyledCanvasElement, {
+      key: element.id,
+      className: selected ? "selected" : undefined,
+      style: {
+        left: positions[element.id].x,
+        top: positions[element.id].y,
+        width,
+        height,
+        transform: rotation ? "rotate(" + rotation + "deg)" : undefined
+      },
+      onMouseDown: event => handleElementMouseDown(event, element.id),
+      onClick: event => event.stopPropagation()
+    }, shape ? renderShapeBody(element, shape, width, height) : null, element.kind === "sticky" ? /*#__PURE__*/React.createElement(StyledSticky, {
+      style: {
+        background: stickyGradient(stickyStyle.color, stickyStyle.fillOpacity),
+        color: stickyStyle.textColor,
+        fontSize: stickyStyle.fontSize,
+        fontWeight: stickyStyle.bold ? "bold" : "normal",
+        fontStyle: stickyStyle.italic ? "italic" : "normal",
+        textDecoration: [stickyStyle.underline ? "underline" : "", stickyStyle.strikethrough ? "line-through" : ""].filter(Boolean).join(" ") || undefined,
+        textAlign: stickyStyle.align
+      }
+    }, "Retro: what went well?") : null, selected && shape ? /*#__PURE__*/React.createElement(ShapeFormattingToolbar, {
+      element: shape,
+      onUpdate: partial => updateShape(element.id, partial),
+      onDelete: handleDelete,
+      locked: (_locks$element$id = locks[element.id]) != null ? _locks$element$id : false,
+      onToggleLock: () => toggleLock(element.id)
+    }) : null, selected && element.kind === "sticky" ? /*#__PURE__*/React.createElement(PostitFormattingToolbar, {
+      value: stickyStyle,
+      onChange: setStickyStyle,
+      onDelete: handleDelete,
+      locked: (_locks$element$id2 = locks[element.id]) != null ? _locks$element$id2 : false,
+      onToggleLock: () => toggleLock(element.id)
+    }) : null, selected ? /*#__PURE__*/React.createElement(ResizeHandles, null) : null);
+  }), links.map(link => {
+    var _positions$link$id$x, _positions$link$id, _positions$link$id$y, _positions$link$id2;
+    const selected = link.id === selectedId;
+    return /*#__PURE__*/React.createElement(StyledCanvasElement, {
+      key: link.id,
+      className: selected ? "is-card selected" : "is-card",
+      style: {
+        left: (_positions$link$id$x = (_positions$link$id = positions[link.id]) == null ? void 0 : _positions$link$id.x) != null ? _positions$link$id$x : 0,
+        top: (_positions$link$id$y = (_positions$link$id2 = positions[link.id]) == null ? void 0 : _positions$link$id2.y) != null ? _positions$link$id$y : 0,
+        width: link.width
+      },
+      onMouseDown: event => handleElementMouseDown(event, link.id),
+      onClickCapture: handleElementClickCapture,
+      onClick: event => event.stopPropagation()
+    }, /*#__PURE__*/React.createElement(LinkElement, {
+      element: link,
+      selected: selected,
+      autoEdit: link.id === autoEditId,
+      onCommitUrl: url => commitLinkUrl(link.id, url),
+      resize: {
+        onResizeStart: () => beginResize(link.id, link.width),
+        onResizeDelta: dx => resizeLink(link.id, dx),
+        onResizeCommit: () => endResize(link.id)
+      },
+      onDelete: () => deleteLink(link.id)
+    }));
+  }), files.map(entry => {
+    var _positions$entry$id$x, _positions$entry$id, _positions$entry$id$y, _positions$entry$id2;
+    const selected = entry.id === selectedId;
+    return /*#__PURE__*/React.createElement(StyledCanvasElement, {
+      key: entry.id,
+      className: selected ? "is-card selected" : "is-card",
+      style: {
+        left: (_positions$entry$id$x = (_positions$entry$id = positions[entry.id]) == null ? void 0 : _positions$entry$id.x) != null ? _positions$entry$id$x : 0,
+        top: (_positions$entry$id$y = (_positions$entry$id2 = positions[entry.id]) == null ? void 0 : _positions$entry$id2.y) != null ? _positions$entry$id$y : 0,
+        width: entry.width
+      },
+      onMouseDown: event => handleElementMouseDown(event, entry.id),
+      onClickCapture: handleElementClickCapture,
+      onClick: event => event.stopPropagation()
+    }, /*#__PURE__*/React.createElement(FileElement, {
+      element: entry,
+      selected: selected,
+      autoOpen: entry.id === autoOpenId,
+      onPickFile: picked => attachFile(entry.id, picked),
+      resize: {
+        onResizeStart: () => beginResize(entry.id, entry.width),
+        onResizeDelta: dx => resizeFile(entry.id, dx),
+        onResizeCommit: () => endResize(entry.id)
+      },
+      onCancel: () => detachFile(entry.id),
+      onDelete: () => deleteFile(entry.id)
+    }));
+  }), draft && !isShapeTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledLinkDraft, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, 1),
+      height: Math.max(draft.height, 1)
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "draft-width"
+  }, "W", " ", draft.width >= CARD_DRAW_THRESHOLD ? clampCardWidth(draft.width) : draft.tool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && isShapeTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledShapePreview, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, 1),
+      height: Math.max(draft.height, 1)
+    }
+  }, shapePreviewGlyph(draft.tool, Math.max(draft.width, 1), Math.max(draft.height, 1))) : null, hoverPoint && !draft && activeTool !== "select" ? (() => {
+    const step = snapStepRef.current;
+    const at = {
+      x: snapValue(hoverPoint.x, step),
+      y: snapValue(hoverPoint.y, step)
+    };
+    if (isShapeTool(activeTool)) {
+      const size = SHAPE_DEFAULT_SIZES[activeTool];
+      return /*#__PURE__*/React.createElement(StyledShapePreview, {
+        style: _extends({
+          left: at.x,
+          top: at.y
+        }, size)
+      }, shapePreviewGlyph(activeTool, size.width, size.height));
+    }
+    const width = activeTool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH;
+    return /*#__PURE__*/React.createElement(StyledShapePreview, {
+      style: {
+        left: at.x,
+        top: at.y,
+        width,
+        height: CARD_PREVIEW_HEIGHT
+      }
+    }, /*#__PURE__*/React.createElement("svg", {
+      width: "100%",
+      height: "100%"
+    }, /*#__PURE__*/React.createElement("rect", {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      rx: 8,
+      ry: 8
+    })));
+  })() : null);
+};
+//# sourceMappingURL=canvasElements.js.map