@activecollab/components 2.0.441 → 2.0.442

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

@@ -7,10 +7,13 @@ exports.NO_DRAG_SELECTOR = exports.DRAG_THROUGH_SELECTOR = exports.CanvasElement
 var _react = _interopRequireWildcard(require("react"));
 var _bottomDock = require("./bottomDock");
 var _elements = require("./elements");
+var _entityCardActions = require("./entityCardActions");
 var _fileElement = require("./fileElement");
 var _linkElement = require("./linkElement");
+var _shared = require("../shared");
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; } }
@@ -53,7 +56,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 _projectElements$find, _projectElements$find2, _projectElements$find3;
   var gridSize = _ref.gridSize,
     snapToGrid = _ref.snapToGrid,
     activeTool = _ref.activeTool,
@@ -531,7 +534,8 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         height: size.height,
         status: "placeholder",
         project: null,
-        task: null
+        task: null,
+        person: null
       }];
     });
     setSelectedId(id);
@@ -541,15 +545,13 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
   /* 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) {
+  var resolveProjectElement = (0, _react.useCallback)(function (id, fill) {
     setPickerFor(null);
     setProjectElements(function (current) {
       return current.map(function (entry) {
         return entry.id === id ? _objectSpread(_objectSpread({}, entry), {}, {
-          status: "resolving",
-          project,
-          task
-        }) : entry;
+          status: "resolving"
+        }, fill) : entry;
       });
     });
     var timer = window.setTimeout(function () {
@@ -560,8 +562,10 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
             /* 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)
+               Inspector's Width field to agree on. A person keeps the
+               square that was drawn: the avatar fills whatever circle
+               the gesture made. */
+            width: entry.kind === "person" ? entry.width : (0, _projectElements.projectCardWidth)(entry.kind)
           }) : entry;
         });
       });
@@ -587,6 +591,29 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     return entry.id === pickerFor;
   })) !== null && _projectElements$find !== void 0 ? _projectElements$find : null;
 
+  /* A selected element's Delete, the same removal the link and file cards' own
+     toolbars do: the board element goes, the entity is never touched. */
+  var deleteProjectElement = (0, _react.useCallback)(function (id) {
+    setProjectElements(function (current) {
+      return current.filter(function (entry) {
+        return entry.id !== id;
+      });
+    });
+    setSelectedId(function (selected) {
+      return selected === id ? null : selected;
+    });
+  }, [setProjectElements, setSelectedId]);
+
+  /* Which person's Details dialog is open — keyed off the element id so the
+     element stays the single source of the person it shows. */
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    detailsId = _useState10[0],
+    setDetailsId = _useState10[1];
+  var detailsPerson = (_projectElements$find2 = (_projectElements$find3 = projectElements.find(function (entry) {
+    return entry.id === detailsId;
+  })) === null || _projectElements$find3 === void 0 ? void 0 : _projectElements$find3.person) !== null && _projectElements$find2 !== void 0 ? _projectElements$find2 : null;
+
   /* ---- draw-to-place ------------------------------------------------ */
 
   var drawRef = (0, _react.useRef)(null);
@@ -641,6 +668,14 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         width,
         height
       } : _bottomDock.SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if (origin.tool === "person") {
+      /* A person is a square: the drawn WIDTH is its side, clamped to the
+         person bounds, and a plain click drops the default size. */
+      var side = drawn ? (0, _projectElements.clampPersonSize)(width) : _projectElements.PERSON_DEFAULT_SIZE;
+      addProjectElement(at, {
+        width: side,
+        height: side
+      }, "person");
     } 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
@@ -683,10 +718,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 _useState1 = (0, _react.useState)(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    hoverPoint = _useState10[0],
-    setHoverPoint = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hoverPoint = _useState12[0],
+    setHoverPoint = _useState12[1];
   (0, _react.useEffect)(function () {
     if (activeTool === "select") {
       setHoverPoint(null);
@@ -953,23 +988,25 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
       }
     }));
   }), projectElements.map(function (entry) {
-    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4;
+    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4, _locks$entry$id;
     var selected = entry.id === selectedId;
     return /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectElementBox, {
       key: entry.id,
-      className: [selected ? "selected" : "", entry.limited ? "limited" : "",
+      className: [selected ? "selected" : "", entry.limited ? "limited" : "", entry.kind === "person" ? "person" : "",
       /* 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(" "),
+         and file cards. The placeholder, the resolving flash, the
+         limited card and the person chip are not StackedCards and keep
+         the box's ring. */
+      entry.status === "resolved" && !entry.limited && entry.kind !== "person" ? "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
+           resolved card is auto-height like every other card here. A
+           person is a fixed square in every state. */
+        height: entry.status === "resolved" && entry.kind !== "person" ? undefined : entry.height
       },
       onMouseDown: function onMouseDown(event) {
         return entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id);
@@ -981,7 +1018,18 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementNode, {
       element: entry,
       selected: selected
-    }));
+    }), selected && entry.kind === "person" && entry.status === "resolved" && !entry.limited && entry.person ? /*#__PURE__*/_react.default.createElement(_entityCardActions.PersonCardToolbar, {
+      onDetails: function onDetails() {
+        return setDetailsId(entry.id);
+      },
+      locked: (_locks$entry$id = locks[entry.id]) !== null && _locks$entry$id !== void 0 ? _locks$entry$id : false,
+      onToggleLock: function onToggleLock() {
+        return toggleLock(entry.id);
+      },
+      onDelete: function onDelete() {
+        return deleteProjectElement(entry.id);
+      }
+    }) : null);
   }), draft && !(0, _bottomDock.isShapeTool)(draft.tool) && !(0, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledLinkDraft, {
     style: {
       left: draft.x,
@@ -991,7 +1039,17 @@ 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, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
+  }, "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 && draft.tool === "person" ? function () {
+    var side = draft.width >= _linkElement.CARD_DRAW_THRESHOLD ? (0, _projectElements.clampPersonSize)(draft.width) : _projectElements.PERSON_DEFAULT_SIZE;
+    return /*#__PURE__*/_react.default.createElement(_projectElements.StyledPersonDraft, {
+      style: {
+        left: draft.x,
+        top: draft.y,
+        width: side,
+        height: side
+      }
+    });
+  }() : null, draft && (0, _projectElements.isProjectTool)(draft.tool) && draft.tool !== "person" ? /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -1020,6 +1078,16 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         }, size)
       }, (0, _linkElement.shapePreviewGlyph)(activeTool, size.width, size.height));
     }
+    if (activeTool === "person") {
+      return /*#__PURE__*/_react.default.createElement(_projectElements.StyledPersonDraft, {
+        style: {
+          left: at.x,
+          top: at.y,
+          width: _projectElements.PERSON_DEFAULT_SIZE,
+          height: _projectElements.PERSON_DEFAULT_SIZE
+        }
+      });
+    }
     if ((0, _projectElements.isProjectTool)(activeTool)) {
       return /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
         style: {
@@ -1049,13 +1117,34 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
       rx: 8,
       ry: 8
     })));
-  }() : null, pickerElement ? /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementPicker, {
+  }() : null, detailsPerson ? /*#__PURE__*/_react.default.createElement(_shared.UserDetailsDialog, _extends({
+    open: true
+  }, (0, _entityCardActions.personDetailsProps)(detailsPerson), {
+    onClose: function onClose() {
+      return setDetailsId(null);
+    }
+  })) : null, pickerElement ? /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementPicker, {
     kind: pickerElement.kind,
     onSelectProject: function onSelectProject(project) {
-      return resolveProjectElement(pickerElement.id, project, null);
+      return resolveProjectElement(pickerElement.id, {
+        project,
+        task: null,
+        person: null
+      });
     },
     onSelectTask: function onSelectTask(project, task) {
-      return resolveProjectElement(pickerElement.id, project, task);
+      return resolveProjectElement(pickerElement.id, {
+        project,
+        task,
+        person: null
+      });
+    },
+    onSelectPerson: function onSelectPerson(person) {
+      return resolveProjectElement(pickerElement.id, {
+        project: null,
+        task: null,
+        person
+      });
     },
     onCancel: function onCancel() {
       return cancelProjectElement(pickerElement.id);