@activecollab/components 2.0.397 → 2.0.399

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

@@ -0,0 +1,877 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NO_DRAG_SELECTOR = exports.DRAG_THROUGH_SELECTOR = exports.CanvasElements = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bottomDock = require("./bottomDock");
+var _elements = require("./elements");
+var _fileElement = require("./fileElement");
+var _linkElement = require("./linkElement");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 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.
+ */
+var NO_DRAG_SELECTOR = exports.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.)
+ */
+var DRAG_THROUGH_SELECTOR = exports.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. */
+var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
+  var 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;
+  var toggleLock = function toggleLock(id) {
+    return setLocks(function (current) {
+      var _current$id;
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: !((_current$id = current[id]) !== null && _current$id !== void 0 ? _current$id : false)
+      });
+    });
+  };
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    removedIds = _useState2[0],
+    setRemovedIds = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    autoEditId = _useState4[0],
+    setAutoEditId = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    autoOpenId = _useState6[0],
+    setAutoOpenId = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    draft = _useState8[0],
+    setDraft = _useState8[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.
+  var dragRef = (0, _react.useRef)(null);
+  var snapStepRef = (0, _react.useRef)(null);
+  snapStepRef.current = snapToGrid ? (0, _elements.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. */
+  var suppressClickRef = (0, _react.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. */
+  var handleElementClickCapture = (0, _react.useCallback)(function (event) {
+    if (!suppressClickRef.current) {
+      return;
+    }
+    suppressClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  var handleDragMove = (0, _react.useCallback)(function (event) {
+    var drag = dragRef.current;
+    if (!drag) {
+      return;
+    }
+    var dx = event.clientX - drag.startX;
+    var 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;
+    var step = snapStepRef.current;
+    var x = (0, _elements.snapValue)(drag.originX + dx, step);
+    var y = (0, _elements.snapValue)(drag.originY + dy, step);
+    setPositions(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [drag.id]: {
+          x,
+          y
+        }
+      });
+    });
+  }, [setPositions]);
+  var handleDragEnd = (0, _react.useCallback)(function () {
+    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. */
+  (0, _react.useEffect)(function () {
+    var handleNativeDragStart = function handleNativeDragStart(event) {
+      event.preventDefault();
+      handleDragEnd();
+    };
+    window.addEventListener("dragstart", handleNativeDragStart);
+    return function () {
+      return window.removeEventListener("dragstart", handleNativeDragStart);
+    };
+  }, [handleDragEnd]);
+  var handleElementMouseDown = (0, _react.useCallback)(function (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;
+    var target = event.target;
+    if (target.closest(NO_DRAG_SELECTOR) && !target.closest(DRAG_THROUGH_SELECTOR)) {
+      return;
+    }
+    var 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]);
+  var updateShape = (0, _react.useCallback)(function (id, partial) {
+    return setShapes(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: _objectSpread(_objectSpread({}, current[id]), partial)
+      });
+    });
+  }, [setShapes]);
+  var handleDelete = (0, _react.useCallback)(function () {
+    setSelectedId(function (current) {
+      if (current) {
+        setRemovedIds(function (removed) {
+          return [...removed, current];
+        });
+      }
+      return null;
+    });
+  }, [setSelectedId]);
+
+  /* ---- link elements ------------------------------------------------ */
+
+  var layerRef = (0, _react.useRef)(null);
+  var linkCounterRef = (0, _react.useRef)(0);
+  // Where a pasted card lands: the pointer's last canvas position.
+  var pointerRef = (0, _react.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. */
+  var resizeStartRef = (0, _react.useRef)({});
+
+  // Mirrors so the stable document/window handlers always read current state.
+  var activeToolRef = (0, _react.useRef)(activeTool);
+  activeToolRef.current = activeTool;
+  var linksRef = (0, _react.useRef)(links);
+  linksRef.current = links;
+  var filesRef = (0, _react.useRef)(files);
+  filesRef.current = files;
+  var canvasPoint = (0, _react.useCallback)(function (clientX, clientY) {
+    var _layerRef$current, _rect$left, _rect$top;
+    var rect = (_layerRef$current = layerRef.current) === null || _layerRef$current === void 0 ? void 0 : _layerRef$current.getBoundingClientRect();
+    return {
+      x: clientX - ((_rect$left = rect === null || rect === void 0 ? void 0 : rect.left) !== null && _rect$left !== void 0 ? _rect$left : 0),
+      y: clientY - ((_rect$top = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _rect$top !== void 0 ? _rect$top : 0)
+    };
+  }, []);
+
+  /* ---- shape elements ------------------------------------------------ */
+
+  var shapeCounterRef = (0, _react.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. */
+  var addShape = (0, _react.useCallback)(function (point, tool, size) {
+    shapeCounterRef.current += 1;
+    var id = "shape-created-".concat(shapeCounterRef.current);
+    var step = snapStepRef.current;
+    setPositions(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: {
+          x: (0, _elements.snapValue)(point.x, step),
+          y: (0, _elements.snapValue)(point.y, step)
+        }
+      });
+    });
+    setShapes(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: (0, _elements.defaultShapeState)(tool)
+      });
+    });
+    setCreatedShapes(function (current) {
+      return [...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). */
+  var addLink = (0, _react.useCallback)(function (point, width, url) {
+    linkCounterRef.current += 1;
+    var id = "link-".concat(linkCounterRef.current);
+    var step = snapStepRef.current;
+    setPositions(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: {
+          x: (0, _elements.snapValue)(point.x, step),
+          y: (0, _elements.snapValue)(point.y, step)
+        }
+      });
+    });
+    setLinks(function (current) {
+      return [...current, {
+        id,
+        width: (0, _linkElement.clampCardWidth)(width),
+        url
+      }];
+    });
+    setSelectedId(id);
+    setAutoEditId(url == null ? id : null);
+  }, [setSelectedId, setPositions, setLinks]);
+  var commitLinkUrl = (0, _react.useCallback)(function (id, url) {
+    setLinks(function (current) {
+      return current.map(function (link) {
+        return link.id === id ? _objectSpread(_objectSpread({}, link), {}, {
+          url
+        }) : link;
+      });
+    });
+  }, [setLinks]);
+  var deleteLink = (0, _react.useCallback)(function (id) {
+    setLinks(function (current) {
+      return current.filter(function (link) {
+        return link.id !== id;
+      });
+    });
+    delete resizeStartRef.current[id];
+    setSelectedId(null);
+  }, [setSelectedId, setLinks]);
+
+  /* ---- file elements ------------------------------------------------ */
+
+  var fileCounterRef = (0, _react.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). */
+  var addFile = (0, _react.useCallback)(function (point, width, file) {
+    fileCounterRef.current += 1;
+    var id = "file-".concat(fileCounterRef.current);
+    var 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. */
+    var described = file ? (0, _fileElement.describeFile)(file) : null;
+    setPositions(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [id]: {
+          x: (0, _elements.snapValue)(point.x, step),
+          y: (0, _elements.snapValue)(point.y, step)
+        }
+      });
+    });
+    setFiles(function (current) {
+      return [...current, {
+        id,
+        width: (0, _linkElement.clampCardWidth)(width),
+        file: described
+      }];
+    });
+    setSelectedId(id);
+    setAutoOpenId(file == null ? id : null);
+  }, [setSelectedId, setPositions, setFiles]);
+  var attachFile = (0, _react.useCallback)(function (id, picked) {
+    var _filesRef$current$fin, _filesRef$current$fin2;
+    var described = (0, _fileElement.describeFile)(picked);
+    // Replacing a file releases the one it replaces.
+    (0, _fileElement.revokeThumbnail)((_filesRef$current$fin = (_filesRef$current$fin2 = filesRef.current.find(function (entry) {
+      return entry.id === id;
+    })) === null || _filesRef$current$fin2 === void 0 ? void 0 : _filesRef$current$fin2.file) !== null && _filesRef$current$fin !== void 0 ? _filesRef$current$fin : null);
+    setFiles(function (current) {
+      return current.map(function (entry) {
+        return entry.id === id ? _objectSpread(_objectSpread({}, 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. */
+  var detachFile = (0, _react.useCallback)(function (id) {
+    var _filesRef$current$fin3, _filesRef$current$fin4;
+    (0, _fileElement.revokeThumbnail)((_filesRef$current$fin3 = (_filesRef$current$fin4 = filesRef.current.find(function (entry) {
+      return entry.id === id;
+    })) === null || _filesRef$current$fin4 === void 0 ? void 0 : _filesRef$current$fin4.file) !== null && _filesRef$current$fin3 !== void 0 ? _filesRef$current$fin3 : null);
+    setFiles(function (current) {
+      return current.map(function (entry) {
+        return entry.id === id ? _objectSpread(_objectSpread({}, entry), {}, {
+          file: null
+        }) : entry;
+      });
+    });
+    setAutoOpenId(null);
+  }, [setFiles]);
+  var deleteFile = (0, _react.useCallback)(function (id) {
+    var _filesRef$current$fin5, _filesRef$current$fin6;
+    (0, _fileElement.revokeThumbnail)((_filesRef$current$fin5 = (_filesRef$current$fin6 = filesRef.current.find(function (entry) {
+      return entry.id === id;
+    })) === null || _filesRef$current$fin6 === void 0 ? void 0 : _filesRef$current$fin6.file) !== null && _filesRef$current$fin5 !== void 0 ? _filesRef$current$fin5 : null);
+    setFiles(function (current) {
+      return current.filter(function (entry) {
+        return entry.id !== id;
+      });
+    });
+    delete resizeStartRef.current[id];
+    setSelectedId(null);
+  }, [setSelectedId, setFiles]);
+  var resizeFile = (0, _react.useCallback)(function (id, dx) {
+    var from = resizeStartRef.current[id];
+    if (from == null) {
+      return;
+    }
+    var width = (0, _linkElement.clampCardWidth)((0, _elements.snapValue)(from + dx, snapStepRef.current));
+    setFiles(function (all) {
+      return all.map(function (entry) {
+        return entry.id === id ? _objectSpread(_objectSpread({}, entry), {}, {
+          width
+        }) : entry;
+      });
+    });
+  }, [setFiles]);
+
+  // Object URLs outlive React, so release every one still held on unmount.
+  (0, _react.useEffect)(function () {
+    return function () {
+      return filesRef.current.forEach(function (entry) {
+        return (0, _fileElement.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). */
+  var beginResize = (0, _react.useCallback)(function (id, width) {
+    resizeStartRef.current[id] = width;
+  }, []);
+  var endResize = (0, _react.useCallback)(function (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. */
+  var resizeLink = (0, _react.useCallback)(function (id, dx) {
+    var from = resizeStartRef.current[id];
+    if (from == null) {
+      return;
+    }
+    var width = (0, _linkElement.clampCardWidth)((0, _elements.snapValue)(from + dx, snapStepRef.current));
+    setLinks(function (all) {
+      return all.map(function (link) {
+        return link.id === id ? _objectSpread(_objectSpread({}, link), {}, {
+          width
+        }) : link;
+      });
+    });
+  }, [setLinks]);
+
+  /* ---- draw-to-place ------------------------------------------------ */
+
+  var drawRef = (0, _react.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. */
+  var drawEndedRef = (0, _react.useRef)(false);
+  var handleDrawMove = (0, _react.useCallback)(function (event) {
+    var origin = drawRef.current;
+    if (!origin) {
+      return;
+    }
+    var 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]);
+  var handleDrawEnd = (0, _react.useCallback)(function (event) {
+    var 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(function () {
+      drawEndedRef.current = false;
+    }, 0);
+    var point = canvasPoint(event.clientX, event.clientY);
+    var width = Math.abs(point.x - origin.x);
+    var height = Math.abs(point.y - origin.y);
+    // A click (or a nudge) means "default element here"; a real drag sets
+    // the size.
+    var drawn = Math.max(width, height) >= _linkElement.CARD_DRAW_THRESHOLD;
+    var at = drawn ? {
+      x: Math.min(origin.x, point.x),
+      y: Math.min(origin.y, point.y)
+    } : origin;
+    if ((0, _bottomDock.isShapeTool)(origin.tool)) {
+      addShape(at, origin.tool, drawn ? {
+        width,
+        height
+      } : _bottomDock.SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if (origin.tool === "file") {
+      addFile(at, drawn ? width : _fileElement.FILE_DEFAULT_WIDTH, null);
+    } else {
+      addLink(at, drawn ? width : _linkElement.LINK_DEFAULT_WIDTH, null);
+    }
+    onToolUsed();
+  }, [addFile, addLink, addShape, canvasPoint, handleDrawMove, onToolUsed]);
+  var handleLayerMouseDown = (0, _react.useCallback)(function (event) {
+    var 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();
+    var 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 = _objectSpread(_objectSpread({}, point), {}, {
+      tool
+    });
+    setHoverPoint(null);
+    setDraft(_objectSpread(_objectSpread({}, 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. */
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    hoverPoint = _useState0[0],
+    setHoverPoint = _useState0[1];
+  (0, _react.useEffect)(function () {
+    if (activeTool === "select") {
+      setHoverPoint(null);
+    }
+  }, [activeTool]);
+  var handleLayerMouseMove = (0, _react.useCallback)(function (event) {
+    pointerRef.current = canvasPoint(event.clientX, event.clientY);
+    if (activeTool !== "select" && !drawRef.current) {
+      setHoverPoint(pointerRef.current);
+    }
+  }, [activeTool, canvasPoint]);
+  var handleLayerMouseLeave = (0, _react.useCallback)(function () {
+    setHoverPoint(null);
+  }, []);
+  var handleLayerClick = (0, _react.useCallback)(function () {
+    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.
+   */
+  (0, _react.useEffect)(function () {
+    var isFileDrag = function isFileDrag(event) {
+      var _event$dataTransfer$t, _event$dataTransfer;
+      return Array.from((_event$dataTransfer$t = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.types) !== null && _event$dataTransfer$t !== void 0 ? _event$dataTransfer$t : []).includes("Files");
+    };
+    var handleDragOver = function 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";
+      }
+    };
+    var handleDrop = function handleDrop(event) {
+      if (!isFileDrag(event)) {
+        return;
+      }
+      event.preventDefault();
+      var target = event.target;
+      // A drop onto an empty placeholder is that card's own business.
+      if (target !== null && target !== void 0 && target.closest("[data-file-dropzone]")) {
+        return;
+      }
+      var dropped = (0, _fileElement.binaryFrom)(event.dataTransfer);
+      if (!dropped) {
+        return;
+      }
+      addFile(canvasPoint(event.clientX, event.clientY), _fileElement.FILE_DEFAULT_WIDTH, dropped);
+      onToolUsed();
+    };
+    document.addEventListener("dragover", handleDragOver);
+    document.addEventListener("drop", handleDrop);
+    return function () {
+      document.removeEventListener("dragover", handleDragOver);
+      document.removeEventListener("drop", handleDrop);
+    };
+  }, [addFile, canvasPoint, onToolUsed]);
+
+  /* ---- paste-to-place ----------------------------------------------- */
+
+  (0, _react.useEffect)(function () {
+    var handlePaste = function 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. */
+      var target = event.target;
+      if (target !== null && target !== void 0 && target.closest("input, textarea, [contenteditable='true']")) {
+        return;
+      }
+      var onTheBoard = target === document.body || target != null && ((_layerRef$current2 = layerRef.current) === null || _layerRef$current2 === void 0 ? 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. */
+      var binary = (0, _fileElement.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, _fileElement.FILE_DEFAULT_WIDTH, binary);
+        onToolUsed();
+        return;
+      }
+      var text = (_event$clipboardData$ = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData("text/plain")) !== null && _event$clipboardData$ !== void 0 ? _event$clipboardData$ : "";
+      if (!(0, _linkElement.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, _linkElement.LINK_DEFAULT_WIDTH, text.trim());
+      onToolUsed();
+    };
+    document.addEventListener("paste", handlePaste);
+    return function () {
+      return document.removeEventListener("paste", handlePaste);
+    };
+  }, [addFile, addLink, onToolUsed]);
+  return /*#__PURE__*/_react.default.createElement(_elements.StyledCanvasLayer, {
+    ref: layerRef,
+    className: activeTool === "select" ? undefined : "drawing",
+    onClick: handleLayerClick,
+    onMouseDown: handleLayerMouseDown,
+    onMouseMove: handleLayerMouseMove,
+    onMouseLeave: handleLayerMouseLeave
+  }, [..._elements.CANVAS_ELEMENTS, ...createdShapes].filter(function (element) {
+    return !removedIds.includes(element.id);
+  }).map(function (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;
+    var selected = element.id === selectedId;
+    var shape = element.kind === "shape" ? shapes[element.id] : null;
+    var width = (_sizes$element$id$wid = (_sizes$element$id = sizes[element.id]) === null || _sizes$element$id === void 0 ? void 0 : _sizes$element$id.width) !== null && _sizes$element$id$wid !== void 0 ? _sizes$element$id$wid : element.width;
+    var height = (_sizes$element$id$hei = (_sizes$element$id2 = sizes[element.id]) === null || _sizes$element$id2 === void 0 ? void 0 : _sizes$element$id2.height) !== null && _sizes$element$id$hei !== void 0 ? _sizes$element$id$hei : element.height;
+    var rotation = (_rotations$element$id = rotations[element.id]) !== null && _rotations$element$id !== void 0 ? _rotations$element$id : 0;
+    return /*#__PURE__*/_react.default.createElement(_elements.StyledCanvasElement, {
+      key: element.id,
+      className: selected ? "selected" : undefined,
+      style: {
+        left: positions[element.id].x,
+        top: positions[element.id].y,
+        width,
+        height,
+        transform: rotation ? "rotate(".concat(rotation, "deg)") : undefined
+      },
+      onMouseDown: function onMouseDown(event) {
+        return handleElementMouseDown(event, element.id);
+      },
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, shape ? (0, _elements.renderShapeBody)(element, shape, width, height) : null, element.kind === "sticky" ? /*#__PURE__*/_react.default.createElement(_elements.StyledSticky, {
+      style: {
+        background: (0, _elements.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.default.createElement(_elements.ShapeFormattingToolbar, {
+      element: shape,
+      onUpdate: function onUpdate(partial) {
+        return updateShape(element.id, partial);
+      },
+      onDelete: handleDelete,
+      locked: (_locks$element$id = locks[element.id]) !== null && _locks$element$id !== void 0 ? _locks$element$id : false,
+      onToggleLock: function onToggleLock() {
+        return toggleLock(element.id);
+      }
+    }) : null, selected && element.kind === "sticky" ? /*#__PURE__*/_react.default.createElement(_elements.PostitFormattingToolbar, {
+      value: stickyStyle,
+      onChange: setStickyStyle,
+      onDelete: handleDelete,
+      locked: (_locks$element$id2 = locks[element.id]) !== null && _locks$element$id2 !== void 0 ? _locks$element$id2 : false,
+      onToggleLock: function onToggleLock() {
+        return toggleLock(element.id);
+      }
+    }) : null, selected ? /*#__PURE__*/_react.default.createElement(_elements.ResizeHandles, null) : null);
+  }), links.map(function (link) {
+    var _positions$link$id$x, _positions$link$id, _positions$link$id$y, _positions$link$id2;
+    var selected = link.id === selectedId;
+    return /*#__PURE__*/_react.default.createElement(_elements.StyledCanvasElement, {
+      key: link.id,
+      className: selected ? "is-card selected" : "is-card",
+      style: {
+        left: (_positions$link$id$x = (_positions$link$id = positions[link.id]) === null || _positions$link$id === void 0 ? void 0 : _positions$link$id.x) !== null && _positions$link$id$x !== void 0 ? _positions$link$id$x : 0,
+        top: (_positions$link$id$y = (_positions$link$id2 = positions[link.id]) === null || _positions$link$id2 === void 0 ? void 0 : _positions$link$id2.y) !== null && _positions$link$id$y !== void 0 ? _positions$link$id$y : 0,
+        width: link.width
+      },
+      onMouseDown: function onMouseDown(event) {
+        return handleElementMouseDown(event, link.id);
+      },
+      onClickCapture: handleElementClickCapture,
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_linkElement.LinkElement, {
+      element: link,
+      selected: selected,
+      autoEdit: link.id === autoEditId,
+      onCommitUrl: function onCommitUrl(url) {
+        return commitLinkUrl(link.id, url);
+      },
+      resize: {
+        onResizeStart: function onResizeStart() {
+          return beginResize(link.id, link.width);
+        },
+        onResizeDelta: function onResizeDelta(dx) {
+          return resizeLink(link.id, dx);
+        },
+        onResizeCommit: function onResizeCommit() {
+          return endResize(link.id);
+        }
+      },
+      onDelete: function onDelete() {
+        return deleteLink(link.id);
+      }
+    }));
+  }), files.map(function (entry) {
+    var _positions$entry$id$x, _positions$entry$id, _positions$entry$id$y, _positions$entry$id2;
+    var selected = entry.id === selectedId;
+    return /*#__PURE__*/_react.default.createElement(_elements.StyledCanvasElement, {
+      key: entry.id,
+      className: selected ? "is-card selected" : "is-card",
+      style: {
+        left: (_positions$entry$id$x = (_positions$entry$id = positions[entry.id]) === null || _positions$entry$id === void 0 ? void 0 : _positions$entry$id.x) !== null && _positions$entry$id$x !== void 0 ? _positions$entry$id$x : 0,
+        top: (_positions$entry$id$y = (_positions$entry$id2 = positions[entry.id]) === null || _positions$entry$id2 === void 0 ? void 0 : _positions$entry$id2.y) !== null && _positions$entry$id$y !== void 0 ? _positions$entry$id$y : 0,
+        width: entry.width
+      },
+      onMouseDown: function onMouseDown(event) {
+        return handleElementMouseDown(event, entry.id);
+      },
+      onClickCapture: handleElementClickCapture,
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_fileElement.FileElement, {
+      element: entry,
+      selected: selected,
+      autoOpen: entry.id === autoOpenId,
+      onPickFile: function onPickFile(picked) {
+        return attachFile(entry.id, picked);
+      },
+      resize: {
+        onResizeStart: function onResizeStart() {
+          return beginResize(entry.id, entry.width);
+        },
+        onResizeDelta: function onResizeDelta(dx) {
+          return resizeFile(entry.id, dx);
+        },
+        onResizeCommit: function onResizeCommit() {
+          return endResize(entry.id);
+        }
+      },
+      onCancel: function onCancel() {
+        return detachFile(entry.id);
+      },
+      onDelete: function onDelete() {
+        return deleteFile(entry.id);
+      }
+    }));
+  }), draft && !(0, _bottomDock.isShapeTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledLinkDraft, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, 1),
+      height: Math.max(draft.height, 1)
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "draft-width"
+  }, "W", " ", draft.width >= _linkElement.CARD_DRAW_THRESHOLD ? (0, _linkElement.clampCardWidth)(draft.width) : draft.tool === "file" ? _fileElement.FILE_DEFAULT_WIDTH : _linkElement.LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && (0, _bottomDock.isShapeTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledShapePreview, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, 1),
+      height: Math.max(draft.height, 1)
+    }
+  }, (0, _linkElement.shapePreviewGlyph)(draft.tool, Math.max(draft.width, 1), Math.max(draft.height, 1))) : null, hoverPoint && !draft && activeTool !== "select" ? function () {
+    var step = snapStepRef.current;
+    var at = {
+      x: (0, _elements.snapValue)(hoverPoint.x, step),
+      y: (0, _elements.snapValue)(hoverPoint.y, step)
+    };
+    if ((0, _bottomDock.isShapeTool)(activeTool)) {
+      var size = _bottomDock.SHAPE_DEFAULT_SIZES[activeTool];
+      return /*#__PURE__*/_react.default.createElement(_linkElement.StyledShapePreview, {
+        style: _objectSpread({
+          left: at.x,
+          top: at.y
+        }, size)
+      }, (0, _linkElement.shapePreviewGlyph)(activeTool, size.width, size.height));
+    }
+    var width = activeTool === "file" ? _fileElement.FILE_DEFAULT_WIDTH : _linkElement.LINK_DEFAULT_WIDTH;
+    return /*#__PURE__*/_react.default.createElement(_linkElement.StyledShapePreview, {
+      style: {
+        left: at.x,
+        top: at.y,
+        width,
+        height: _bottomDock.CARD_PREVIEW_HEIGHT
+      }
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      width: "100%",
+      height: "100%"
+    }, /*#__PURE__*/_react.default.createElement("rect", {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      rx: 8,
+      ry: 8
+    })));
+  }() : null);
+};
+//# sourceMappingURL=canvasElements.js.map