@activecollab/components/dist/esm/presentation/whiteboard/canvasElements.js

ActiveCollab Components

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";
import { PLACEHOLDER_MIN_HEIGHT, PLACEHOLDER_MIN_WIDTH, ProjectElementNode, ProjectElementPicker, RESOLVE_MS, StyledProjectDraft, StyledProjectElementBox, isProjectTool, projectCardWidth } from "./projectElements";

/**
 * 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 => {
  var _projectElements$find;
  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,
    projectElements = _ref.projectElements,
    setProjectElements = _ref.setProjectElements,
    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]);

  /**
   * The press a limited card gets instead of the one every other element gets.
   *
   * It selects — the Inspector still has something to say about it — and stops
   * there: no drag is armed, because a viewer who cannot see what a card points
   * at has no business moving it for the people who can. Gating at the call
   * site rather than inside `handleElementMouseDown` leaves the normal drag
   * path exactly as it was.
   */
  const handleLimitedMouseDown = useCallback((event, id) => {
    if (event.button !== 0 || activeToolRef.current !== "select") {
      return;
    }
    event.stopPropagation();
    setSelectedId(id);
  }, [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]);

  /* ---- project / task elements --------------------------------------- */

  const projectCounterRef = useRef(0);
  /* The placeholder the centred picker is currently answering for. This one
     stays local: it is a half-finished GESTURE, not board content, so nothing
     outside the canvas has any use for it. The elements themselves are lifted
     to the scene (see props) exactly like links and files, because the
     Inspector reads and edits them. */
  const _useState5 = useState(null),
    pickerFor = _useState5[0],
    setPickerFor = _useState5[1];
  /* Pending "resolving" flashes, so unmounting never leaves a timer behind
     that sets state on a component that is gone. */
  const resolveTimersRef = useRef([]);
  useEffect(() => () => resolveTimersRef.current.forEach(timer => window.clearTimeout(timer)), []);

  /* Create a placeholder and open its picker. The drawn box is what the card
     lands in; the picker supplies what the card actually says. */
  const addProjectElement = useCallback((point, size, kind) => {
    projectCounterRef.current += 1;
    const id = kind + "-element-" + projectCounterRef.current;
    const step = snapStepRef.current;
    setPositions(current => _extends({}, current, {
      [id]: {
        x: snapValue(point.x, step),
        y: snapValue(point.y, step)
      }
    }));
    setProjectElements(current => [...current, {
      id,
      kind,
      width: size.width,
      height: size.height,
      status: "placeholder",
      project: null,
      task: null
    }]);
    setSelectedId(id);
    setPickerFor(id);
  }, [setPositions, setProjectElements, setSelectedId]);

  /* The picker answered. The card keeps the placeholder's top-left and flashes
     a skeleton while the "backend" fills the details in — the same two-phase
     honesty the file card's upload / preparing pair has. */
  const resolveProjectElement = useCallback((id, project, task) => {
    setPickerFor(null);
    setProjectElements(current => current.map(entry => entry.id === id ? _extends({}, entry, {
      status: "resolving",
      project,
      task
    }) : entry));
    const timer = window.setTimeout(() => {
      setProjectElements(current => current.map(entry => entry.id === id ? _extends({}, entry, {
        status: "resolved",
        /* The card takes its natural width HERE rather than the
           renderer deriving it, so from this moment on there is a
           single stored width for the canvas, the drag and the
           Inspector's Width field to agree on. */
        width: projectCardWidth(entry.kind)
      }) : entry));
    }, RESOLVE_MS);
    resolveTimersRef.current.push(timer);
  }, [setProjectElements]);

  /* Esc, or a click on the overlay. The placeholder was only ever the first
     half of the gesture, so cancelling throws it away rather than leaving a
     blank card on the board. */
  const cancelProjectElement = useCallback(id => {
    setPickerFor(null);
    setProjectElements(current => current.filter(entry => entry.id !== id));
    setSelectedId(selected => selected === id ? null : selected);
  }, [setProjectElements, setSelectedId]);
  const pickerElement = (_projectElements$find = projectElements.find(entry => entry.id === pickerFor)) != null ? _projectElements$find : null;

  /* ---- 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 (isProjectTool(origin.tool)) {
      /* Both dimensions matter here (a project card is not auto-height the
         way a link is), and a card smaller than the minimum could not hold
         its own contents — so the drawn box is clamped, not honoured. */
      addProjectElement(at, {
        width: Math.max(PLACEHOLDER_MIN_WIDTH, Math.round(width)),
        height: Math.max(PLACEHOLDER_MIN_HEIGHT, Math.round(height))
      }, 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, addProjectElement, 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 _useState6 = useState(null),
    hoverPoint = _useState6[0],
    setHoverPoint = _useState6[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)
    }));
  }), projectElements.map(entry => {
    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4;
    const selected = entry.id === selectedId;
    return /*#__PURE__*/React.createElement(StyledProjectElementBox, {
      key: entry.id,
      className: [selected ? "selected" : "", entry.limited ? "limited" : "",
      /* A resolved card is a StackedCard, and the shell draws its own
         ring — so the box stands down, exactly as it does for the link
         and file cards. The placeholder, the resolving flash and the
         limited card are not StackedCards and keep the box's ring. */
      entry.status === "resolved" && !entry.limited ? "is-card" : ""].filter(Boolean).join(" "),
      style: {
        left: (_positions$entry$id$x2 = (_positions$entry$id3 = positions[entry.id]) == null ? void 0 : _positions$entry$id3.x) != null ? _positions$entry$id$x2 : 0,
        top: (_positions$entry$id$y2 = (_positions$entry$id4 = positions[entry.id]) == null ? void 0 : _positions$entry$id4.y) != null ? _positions$entry$id$y2 : 0,
        width: entry.width,
        /* Only the placeholder box is measured in both directions; the
           resolved card is auto-height like every other card here. */
        height: entry.status === "resolved" ? undefined : entry.height
      },
      onMouseDown: event => entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id),
      onClickCapture: handleElementClickCapture,
      onClick: event => event.stopPropagation()
    }, /*#__PURE__*/React.createElement(ProjectElementNode, {
      element: entry,
      selected: selected
    }));
  }), draft && !isShapeTool(draft.tool) && !isProjectTool(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 && isProjectTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledProjectDraft, {
    style: {
      left: draft.x,
      top: draft.y,
      width: Math.max(draft.width, PLACEHOLDER_MIN_WIDTH),
      height: Math.max(draft.height, PLACEHOLDER_MIN_HEIGHT)
    }
  }) : 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));
    }
    if (isProjectTool(activeTool)) {
      return /*#__PURE__*/React.createElement(StyledProjectDraft, {
        style: {
          left: at.x,
          top: at.y,
          width: PLACEHOLDER_MIN_WIDTH,
          height: PLACEHOLDER_MIN_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, pickerElement ? /*#__PURE__*/React.createElement(ProjectElementPicker, {
    kind: pickerElement.kind,
    onSelectProject: project => resolveProjectElement(pickerElement.id, project, null),
    onSelectTask: (project, task) => resolveProjectElement(pickerElement.id, project, task),
    onCancel: () => cancelProjectElement(pickerElement.id)
  }) : null);
};
//# sourceMappingURL=canvasElements.js.map