@activecollab/components 2.0.440 → 2.0.442

package/dist/esm/presentation/whiteboard/canvasElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AACpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AACvB,OAAO,EAKL,iBAAiB,EASlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YA6lCxB,CAAC"}
+{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,iBAAiB,EAWlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YAitCxB,CAAC"}

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

@@ -2,9 +2,11 @@ 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 { PersonCardToolbar, personDetailsProps } from "./entityCardActions";
 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";
+import { UserDetailsDialog } from "../shared";
+import { PERSON_DEFAULT_SIZE, PLACEHOLDER_MIN_HEIGHT, PLACEHOLDER_MIN_WIDTH, ProjectElementNode, ProjectElementPicker, RESOLVE_MS, StyledPersonDraft, StyledProjectDraft, StyledProjectElementBox, clampPersonSize, isProjectTool, projectCardWidth } from "./projectElements";
 
 /**
  * A card is full of its own controls — the URL field, the display toggle, the
@@ -37,7 +39,7 @@ export const 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. */
 export const CanvasElements = _ref => {
-  var _projectElements$find;
+  var _projectElements$find, _projectElements$find2, _projectElements$find3;
   let gridSize = _ref.gridSize,
     snapToGrid = _ref.snapToGrid,
     activeTool = _ref.activeTool,
@@ -435,7 +437,8 @@ export const CanvasElements = _ref => {
       height: size.height,
       status: "placeholder",
       project: null,
-      task: null
+      task: null,
+      person: null
     }]);
     setSelectedId(id);
     setPickerFor(id);
@@ -444,21 +447,21 @@ export const 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. */
-  const resolveProjectElement = useCallback((id, project, task) => {
+  const resolveProjectElement = useCallback((id, fill) => {
     setPickerFor(null);
     setProjectElements(current => current.map(entry => entry.id === id ? _extends({}, entry, {
-      status: "resolving",
-      project,
-      task
-    }) : entry));
+      status: "resolving"
+    }, fill) : 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)
+           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 : projectCardWidth(entry.kind)
       }) : entry));
     }, RESOLVE_MS);
     resolveTimersRef.current.push(timer);
@@ -474,6 +477,20 @@ export const CanvasElements = _ref => {
   }, [setProjectElements, setSelectedId]);
   const pickerElement = (_projectElements$find = projectElements.find(entry => entry.id === pickerFor)) != null ? _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. */
+  const deleteProjectElement = useCallback(id => {
+    setProjectElements(current => current.filter(entry => entry.id !== id));
+    setSelectedId(selected => 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. */
+  const _useState6 = useState(null),
+    detailsId = _useState6[0],
+    setDetailsId = _useState6[1];
+  const detailsPerson = (_projectElements$find2 = (_projectElements$find3 = projectElements.find(entry => entry.id === detailsId)) == null ? void 0 : _projectElements$find3.person) != null ? _projectElements$find2 : null;
+
   /* ---- draw-to-place ------------------------------------------------ */
 
   const drawRef = useRef(null);
@@ -528,6 +545,14 @@ export const CanvasElements = _ref => {
         width,
         height
       } : 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. */
+      const side = drawn ? clampPersonSize(width) : PERSON_DEFAULT_SIZE;
+      addProjectElement(at, {
+        width: side,
+        height: side
+      }, "person");
     } 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
@@ -570,9 +595,9 @@ export const 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. */
-  const _useState6 = useState(null),
-    hoverPoint = _useState6[0],
-    setHoverPoint = _useState6[1];
+  const _useState7 = useState(null),
+    hoverPoint = _useState7[0],
+    setHoverPoint = _useState7[1];
   useEffect(() => {
     if (activeTool === "select") {
       setHoverPoint(null);
@@ -795,23 +820,25 @@ export const CanvasElements = _ref => {
       onDelete: () => deleteFile(entry.id)
     }));
   }), projectElements.map(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;
     const selected = entry.id === selectedId;
     return /*#__PURE__*/React.createElement(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 ? 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
+           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: event => entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id),
       onClickCapture: handleElementClickCapture,
@@ -819,7 +846,12 @@ export const CanvasElements = _ref => {
     }, /*#__PURE__*/React.createElement(ProjectElementNode, {
       element: entry,
       selected: selected
-    }));
+    }), selected && entry.kind === "person" && entry.status === "resolved" && !entry.limited && entry.person ? /*#__PURE__*/React.createElement(PersonCardToolbar, {
+      onDetails: () => setDetailsId(entry.id),
+      locked: (_locks$entry$id = locks[entry.id]) != null ? _locks$entry$id : false,
+      onToggleLock: () => toggleLock(entry.id),
+      onDelete: () => deleteProjectElement(entry.id)
+    }) : null);
   }), draft && !isShapeTool(draft.tool) && !isProjectTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledLinkDraft, {
     style: {
       left: draft.x,
@@ -829,7 +861,17 @@ export const CanvasElements = _ref => {
     }
   }, /*#__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, {
+  }, "W", " ", draft.width >= CARD_DRAW_THRESHOLD ? clampCardWidth(draft.width) : draft.tool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && draft.tool === "person" ? (() => {
+    const side = draft.width >= CARD_DRAW_THRESHOLD ? clampPersonSize(draft.width) : PERSON_DEFAULT_SIZE;
+    return /*#__PURE__*/React.createElement(StyledPersonDraft, {
+      style: {
+        left: draft.x,
+        top: draft.y,
+        width: side,
+        height: side
+      }
+    });
+  })() : null, draft && isProjectTool(draft.tool) && draft.tool !== "person" ? /*#__PURE__*/React.createElement(StyledProjectDraft, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -858,6 +900,16 @@ export const CanvasElements = _ref => {
         }, size)
       }, shapePreviewGlyph(activeTool, size.width, size.height));
     }
+    if (activeTool === "person") {
+      return /*#__PURE__*/React.createElement(StyledPersonDraft, {
+        style: {
+          left: at.x,
+          top: at.y,
+          width: PERSON_DEFAULT_SIZE,
+          height: PERSON_DEFAULT_SIZE
+        }
+      });
+    }
     if (isProjectTool(activeTool)) {
       return /*#__PURE__*/React.createElement(StyledProjectDraft, {
         style: {
@@ -887,10 +939,27 @@ export const CanvasElements = _ref => {
       rx: 8,
       ry: 8
     })));
-  })() : null, pickerElement ? /*#__PURE__*/React.createElement(ProjectElementPicker, {
+  })() : null, detailsPerson ? /*#__PURE__*/React.createElement(UserDetailsDialog, _extends({
+    open: true
+  }, personDetailsProps(detailsPerson), {
+    onClose: () => setDetailsId(null)
+  })) : null, pickerElement ? /*#__PURE__*/React.createElement(ProjectElementPicker, {
     kind: pickerElement.kind,
-    onSelectProject: project => resolveProjectElement(pickerElement.id, project, null),
-    onSelectTask: (project, task) => resolveProjectElement(pickerElement.id, project, task),
+    onSelectProject: project => resolveProjectElement(pickerElement.id, {
+      project,
+      task: null,
+      person: null
+    }),
+    onSelectTask: (project, task) => resolveProjectElement(pickerElement.id, {
+      project,
+      task,
+      person: null
+    }),
+    onSelectPerson: person => resolveProjectElement(pickerElement.id, {
+      project: null,
+      task: null,
+      person
+    }),
     onCancel: () => cancelProjectElement(pickerElement.id)
   }) : null);
 };