@activecollab/components 2.0.408 → 2.0.409

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

@@ -9,6 +9,7 @@ var _bottomDock = require("./bottomDock");
 var _elements = require("./elements");
 var _fileElement = require("./fileElement");
 var _linkElement = require("./linkElement");
+var _projectElements = require("./projectElements");
 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."); }
@@ -52,6 +53,7 @@ var DRAG_THROUGH_SELECTOR = exports.DRAG_THROUGH_SELECTOR = "[data-drag-through]
    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 _projectElements$find;
   var gridSize = _ref.gridSize,
     snapToGrid = _ref.snapToGrid,
     activeTool = _ref.activeTool,
@@ -68,6 +70,8 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     setLinks = _ref.setLinks,
     files = _ref.files,
     setFiles = _ref.setFiles,
+    projectElements = _ref.projectElements,
+    setProjectElements = _ref.setProjectElements,
     createdShapes = _ref.createdShapes,
     setCreatedShapes = _ref.setCreatedShapes,
     sizes = _ref.sizes,
@@ -198,6 +202,23 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     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.
+   */
+  var handleLimitedMouseDown = (0, _react.useCallback)(function (event, id) {
+    if (event.button !== 0 || activeToolRef.current !== "select") {
+      return;
+    }
+    event.stopPropagation();
+    setSelectedId(id);
+  }, [setSelectedId]);
   var updateShape = (0, _react.useCallback)(function (id, partial) {
     return setShapes(function (current) {
       return _objectSpread(_objectSpread({}, current), {}, {
@@ -465,6 +486,107 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     });
   }, [setLinks]);
 
+  /* ---- project / task elements --------------------------------------- */
+
+  var projectCounterRef = (0, _react.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. */
+  var _useState9 = (0, _react.useState)(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    pickerFor = _useState0[0],
+    setPickerFor = _useState0[1];
+  /* Pending "resolving" flashes, so unmounting never leaves a timer behind
+     that sets state on a component that is gone. */
+  var resolveTimersRef = (0, _react.useRef)([]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return resolveTimersRef.current.forEach(function (timer) {
+        return 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. */
+  var addProjectElement = (0, _react.useCallback)(function (point, size, kind) {
+    projectCounterRef.current += 1;
+    var id = "".concat(kind, "-element-").concat(projectCounterRef.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)
+        }
+      });
+    });
+    setProjectElements(function (current) {
+      return [...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. */
+  var resolveProjectElement = (0, _react.useCallback)(function (id, project, task) {
+    setPickerFor(null);
+    setProjectElements(function (current) {
+      return current.map(function (entry) {
+        return entry.id === id ? _objectSpread(_objectSpread({}, entry), {}, {
+          status: "resolving",
+          project,
+          task
+        }) : entry;
+      });
+    });
+    var timer = window.setTimeout(function () {
+      setProjectElements(function (current) {
+        return current.map(function (entry) {
+          return entry.id === id ? _objectSpread(_objectSpread({}, 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: (0, _projectElements.projectCardWidth)(entry.kind)
+          }) : entry;
+        });
+      });
+    }, _projectElements.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. */
+  var cancelProjectElement = (0, _react.useCallback)(function (id) {
+    setPickerFor(null);
+    setProjectElements(function (current) {
+      return current.filter(function (entry) {
+        return entry.id !== id;
+      });
+    });
+    setSelectedId(function (selected) {
+      return selected === id ? null : selected;
+    });
+  }, [setProjectElements, setSelectedId]);
+  var pickerElement = (_projectElements$find = projectElements.find(function (entry) {
+    return entry.id === pickerFor;
+  })) !== null && _projectElements$find !== void 0 ? _projectElements$find : null;
+
   /* ---- draw-to-place ------------------------------------------------ */
 
   var drawRef = (0, _react.useRef)(null);
@@ -519,13 +641,21 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         width,
         height
       } : _bottomDock.SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if ((0, _projectElements.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(_projectElements.PLACEHOLDER_MIN_WIDTH, Math.round(width)),
+        height: Math.max(_projectElements.PLACEHOLDER_MIN_HEIGHT, Math.round(height))
+      }, 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]);
+  }, [addFile, addLink, addProjectElement, addShape, canvasPoint, handleDrawMove, onToolUsed]);
   var handleLayerMouseDown = (0, _react.useCallback)(function (event) {
     var tool = activeToolRef.current;
     if (event.button !== 0 || tool === "select") {
@@ -553,10 +683,10 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
 
   /* 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];
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    hoverPoint = _useState10[0],
+    setHoverPoint = _useState10[1];
   (0, _react.useEffect)(function () {
     if (activeTool === "select") {
       setHoverPoint(null);
@@ -822,7 +952,37 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         return deleteFile(entry.id);
       }
     }));
-  }), draft && !(0, _bottomDock.isShapeTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledLinkDraft, {
+  }), projectElements.map(function (entry) {
+    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4;
+    var selected = entry.id === selectedId;
+    return /*#__PURE__*/_react.default.createElement(_projectElements.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 || _positions$entry$id3 === void 0 ? void 0 : _positions$entry$id3.x) !== null && _positions$entry$id$x2 !== void 0 ? _positions$entry$id$x2 : 0,
+        top: (_positions$entry$id$y2 = (_positions$entry$id4 = positions[entry.id]) === null || _positions$entry$id4 === void 0 ? void 0 : _positions$entry$id4.y) !== null && _positions$entry$id$y2 !== void 0 ? _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: function onMouseDown(event) {
+        return entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id);
+      },
+      onClickCapture: handleElementClickCapture,
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementNode, {
+      element: entry,
+      selected: selected
+    }));
+  }), draft && !(0, _bottomDock.isShapeTool)(draft.tool) && !(0, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledLinkDraft, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -831,7 +991,14 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     }
   }, /*#__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, {
+  }, "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, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, _projectElements.PLACEHOLDER_MIN_WIDTH),
+      height: Math.max(draft.height, _projectElements.PLACEHOLDER_MIN_HEIGHT)
+    }
+  }) : null, draft && (0, _bottomDock.isShapeTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledShapePreview, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -853,6 +1020,16 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         }, size)
       }, (0, _linkElement.shapePreviewGlyph)(activeTool, size.width, size.height));
     }
+    if ((0, _projectElements.isProjectTool)(activeTool)) {
+      return /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
+        style: {
+          left: at.x,
+          top: at.y,
+          width: _projectElements.PLACEHOLDER_MIN_WIDTH,
+          height: _projectElements.PLACEHOLDER_MIN_HEIGHT
+        }
+      });
+    }
     var width = activeTool === "file" ? _fileElement.FILE_DEFAULT_WIDTH : _linkElement.LINK_DEFAULT_WIDTH;
     return /*#__PURE__*/_react.default.createElement(_linkElement.StyledShapePreview, {
       style: {
@@ -872,6 +1049,17 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
       rx: 8,
       ry: 8
     })));
-  }() : null);
+  }() : null, pickerElement ? /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementPicker, {
+    kind: pickerElement.kind,
+    onSelectProject: function onSelectProject(project) {
+      return resolveProjectElement(pickerElement.id, project, null);
+    },
+    onSelectTask: function onSelectTask(project, task) {
+      return resolveProjectElement(pickerElement.id, project, task);
+    },
+    onCancel: function onCancel() {
+      return cancelProjectElement(pickerElement.id);
+    }
+  }) : null);
 };
 //# sourceMappingURL=canvasElements.js.map