@activecollab/components
Version:
ActiveCollab Components
986 lines (957 loc) • 50 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sameColor = exports.elementTraits = exports.colorName = exports.TYPE_LABEL = exports.TRANSPARENT_OPTION = exports.StyledSegmented = exports.StyledPropRow = exports.StyledPropGroups = exports.StyledPropGroup = exports.StyledInspectorSidebar = exports.StyledInspectorResizer = exports.StyledInspectorHeader = exports.StyledInspectorEmpty = exports.StyledInspectorBody = exports.StyledFieldGrid = exports.StyledControl = exports.StyledCheckboxRow = exports.StyledBody = exports.StyledAutoField = exports.RightInspector = exports.ReadOnlyField = exports.PROJECT_ELEMENT_TRAITS = exports.OptionSelect = exports.NumberField = exports.LIMITED_ELEMENT_TRAITS = exports.ColorPickerField = exports.AutoField = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _elements = require("./elements");
var _fileElement = require("./fileElement");
var _outline = require("./outline");
var _projectElements = require("./projectElements");
var _Checkbox = require("../../components/Checkbox");
var _ChooseV = require("../../components/ChooseV2");
var _Dot = require("../../components/Dot");
var _EditableText = require("../../components/EditableText");
var _IconButton = require("../../components/IconButton");
var _Icons = require("../../components/Icons");
var _Input = require("../../components/Input");
var _Label = require("../../components/Label");
var _Select = require("../../components/Select");
var _SelectTrigger = require("../../components/SelectTrigger");
var _Tooltip = require("../../components/Tooltip");
var _Typography = require("../../components/Typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
/* ------------------------------------------------------------------ */
/* Right Inspector — selected-element properties panel */
/* ------------------------------------------------------------------ */
/* Which right-docked panel is open. Only "inspector" is built here; "comments"
is reserved for the next iteration. */
/* ── Inspector capability traits ──────────────────────────────────────────
The Inspector is TRAIT-DRIVEN: a selected element declares which property
groups it supports, and only those groups render. This is the "interface
with implementation traits" model — the interface is the full set of groups,
and each element kind overrides the flags it does not support (a sticky has
no stroke, and its height is auto because the note grows with its content).
New element kinds slot in by returning their own trait set. */
var elementTraits = exports.elementTraits = function elementTraits(def) {
return def.kind === "sticky" ? {
geometry: true,
fill: true,
fillTransparent: false,
stroke: false,
text: true,
autoHeight: true
} : {
geometry: true,
fill: true,
fillTransparent: true,
stroke: true,
text: true
};
};
/**
* A project / task card's traits. It is the most constrained element on the
* board, and every "false" here is a fact about the card rather than a feature
* that has not been built yet:
*
* fill / stroke / text the card's appearance is the design system's, not
* the board's — recolouring it would make a task look
* like something it is not on another person's screen.
* autoHeight the card is content-sized; only its width is given.
* renamable the title belongs to the task / project record.
*
* Rotation is absent for the same reason it is absent on link and file cards:
* the Geometry group for a card simply does not render one.
*/
var PROJECT_ELEMENT_TRAITS = exports.PROJECT_ELEMENT_TRAITS = {
geometry: true,
fill: false,
stroke: false,
text: false,
autoHeight: true,
renamable: false
};
/**
* A LIMITED-ACCESS card's traits: the project card's, with everything the
* viewer could have changed taken away.
*
* The panel is not empty, and that is deliberate — geometry still renders, so
* the viewer can see that the thing has a position and a size, which is
* precisely the amount that Workload's limited cell exposes (its data shape is
* a quantity and an offset). It simply cannot be edited.
*/
var LIMITED_ELEMENT_TRAITS = exports.LIMITED_ELEMENT_TRAITS = _objectSpread(_objectSpread({}, PROJECT_ELEMENT_TRAITS), {}, {
readOnly: true
});
var TYPE_LABEL = exports.TYPE_LABEL = {
rectangle: "Rectangle",
roundedRectangle: "Rounded Rectangle",
circle: "Circle",
triangle: "Triangle"
};
var sameColor = exports.sameColor = function sameColor(a, b) {
return (a !== null && a !== void 0 ? a : "").toLowerCase() === b.toLowerCase();
};
/* Right dock — mirrors StyledOutlineSidebar but docked on the RIGHT: border on
the left edge, resizer on the left edge. Same 260–780 width band. */
var StyledInspectorSidebar = exports.StyledInspectorSidebar = _styledComponents.default.aside.withConfig({
displayName: "inspector__StyledInspectorSidebar",
componentId: "sc-do334k-0"
})(["flex-shrink:0;position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-left:1px solid var(--selectable);background-color:var(--page-paper-main);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;"]);
/* Grab strip on the LEFT edge, because the panel is docked right — dragging it
left widens. Same token pair as the outline resizer: selectable grey at
rest, the hover token while grabbed. */
var StyledInspectorResizer = exports.StyledInspectorResizer = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledInspectorResizer",
componentId: "sc-do334k-1"
})(["position:absolute;top:0;bottom:0;left:-2px;width:5px;cursor:col-resize;z-index:2;&::after{content:\"\";position:absolute;top:0;bottom:0;left:2px;width:1px;background-color:var(--selectable-active);opacity:0;transition:opacity 150ms ease;}&:hover::after,&.resizing::after{opacity:1;}"]);
var StyledInspectorBody = exports.StyledInspectorBody = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledInspectorBody",
componentId: "sc-do334k-2"
})(["flex:1;overflow-y:auto;display:flex;flex-direction:column;"]);
/* Wraps the property groups. The Properties/Comments switch above does the
separating, so the first group drops its top hairline — no divider directly
under the header, matching the left sidebar. Inner groups keep separators. */
var StyledPropGroups = exports.StyledPropGroups = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledPropGroups",
componentId: "sc-do334k-3"
})(["display:flex;flex-direction:column;> div:first-child{border-top:none;}"]);
var StyledInspectorHeader = exports.StyledInspectorHeader = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledInspectorHeader",
componentId: "sc-do334k-4"
})(["display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;box-sizing:border-box;flex-shrink:0;.inspector-type-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--color-theme-700);}.inspector-type-icon svg{width:20px;height:20px;}.inspector-name{flex:1;min-width:0;}.inspector-name-static{padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]);
/* Empty state — same muted treatment the outline uses for unnamed rows. */
var StyledInspectorEmpty = exports.StyledInspectorEmpty = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledInspectorEmpty",
componentId: "sc-do334k-5"
})(["flex:1;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--color-theme-600);"]);
/* Non-collapsible section: bold title, no chevron / drag handle, separated from
the section above by a hairline. */
var StyledPropGroup = exports.StyledPropGroup = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledPropGroup",
componentId: "sc-do334k-6"
})(["display:flex;flex-direction:column;gap:12px;padding:16px;border-top:1px solid var(--border-primary);.group-title{color:var(--color-theme-800);}"]);
var StyledPropRow = exports.StyledPropRow = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledPropRow",
componentId: "sc-do334k-7"
})(["display:flex;flex-direction:column;gap:4px;"]);
var StyledFieldGrid = exports.StyledFieldGrid = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledFieldGrid",
componentId: "sc-do334k-8"
})(["display:grid;grid-template-columns:1fr 1fr;gap:12px;"]);
/* InputNumber's wrapper is a fixed 360px and SelectTrigger a fixed 300px — both
overflow the narrow dock, so force every inspector control to fill its cell. */
var StyledControl = exports.StyledControl = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledControl",
componentId: "sc-do334k-9"
})(["width:100%;&.disabled{opacity:0.4;pointer-events:none;}.c-input-wrapper{width:100%;}.wb-inspector-trigger{width:100%;}.wb-color-value{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.wb-color-value .wb-transparent-swatch{flex:none;color:var(--color-theme-500);}"]);
/* Locked checkbox row — the DS Checkbox renders only the box, so it is paired
with a Label the way the design system expects. */
var StyledCheckboxRow = exports.StyledCheckboxRow = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledCheckboxRow",
componentId: "sc-do334k-10"
})(["display:flex;align-items:center;gap:8px;"]);
/* The element body is HTML (the API's `body` field). The Inspector renders it
formatted and read-only for now — editing comes later. Raw text needs an
explicit font-family (no global reset), and the child tags get light prose
styling. */
var StyledBody = exports.StyledBody = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledBody",
componentId: "sc-do334k-11"
})(["width:100%;max-height:140px;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--color-theme-800);p{margin:0 0 8px;}p:last-child{margin-bottom:0;}ul,ol{margin:0 0 8px;padding-left:18px;}li{margin:2px 0;}strong{font-weight:600;}em{font-style:italic;}a{color:var(--color-primary);}"]);
/* Read-only "Auto" field for an auto-sized dimension (a sticky's height). */
var StyledAutoField = exports.StyledAutoField = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledAutoField",
componentId: "sc-do334k-12"
})(["height:32px;display:flex;align-items:center;padding:0 8px;box-sizing:border-box;border:1px solid var(--color-theme-400);border-radius:var(--ac-br-8);background-color:var(--color-theme-200);color:var(--color-theme-600);font-size:13px;"]);
var StyledSegmented = exports.StyledSegmented = _styledComponents.default.div.withConfig({
displayName: "inspector__StyledSegmented",
componentId: "sc-do334k-13"
})(["display:flex;gap:4px;svg{display:block;width:16px;height:16px;}"]);
var NumberField = exports.NumberField = function NumberField(_ref) {
var label = _ref.label,
value = _ref.value,
min = _ref.min,
unit = _ref.unit,
onCommit = _ref.onCommit;
return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, label), /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Input.InputNumber, {
className: "wb-inspector-num",
value: value,
decimalLength: 0,
min: min,
update: true,
endAdornment: unit ? /*#__PURE__*/_react.default.createElement(_Input.InputAdornment, {
disablePointerEvents: true
}, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
color: "secondary"
}, unit)) : undefined,
onChange: function onChange(next) {
if (next !== undefined && !Number.isNaN(next)) {
onCommit(Math.round(next));
}
}
})));
};
var AutoField = exports.AutoField = function AutoField(_ref2) {
var label = _ref2.label;
return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, label), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, "Auto"));
};
/* A geometry value the viewer may READ but not change — the same field
`AutoField` and the file card's Size already use, with a real value in it.
Showing the number greyed out is the point: a limited card still has a
position and a size, and those are the only facts about it there are. */
var ReadOnlyField = exports.ReadOnlyField = function ReadOnlyField(_ref3) {
var label = _ref3.label,
value = _ref3.value;
return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, label), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, value));
};
var OptionSelect = exports.OptionSelect = function OptionSelect(_ref4) {
var options = _ref4.options,
value = _ref4.value,
triggerLabel = _ref4.triggerLabel,
_onChange = _ref4.onChange;
return /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Select.Select, {
type: "single",
disableSearch: true,
forceCloseMenu: true,
options: options,
selected: value,
onChange: function onChange(next) {
return _onChange(Array.isArray(next) ? next[0] : next);
},
target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
className: "wb-inspector-trigger"
}, triggerLabel)
}));
};
var TRANSPARENT_OPTION = exports.TRANSPARENT_OPTION = {
id: "transparent",
name: "Transparent",
color: "transparent",
textColor: "transparent"
};
/* The name shown on the color picker's trigger, resolved from the current hex. */
var colorName = exports.colorName = function colorName(hex) {
if (!hex || sameColor(hex, "transparent")) {
return "Transparent";
}
var match = _elements.COLOR_OPTIONS.find(function (option) {
return sameColor(hex, option.color);
});
return match ? match.name : "Custom";
};
/* The regular design-system named-colour picker (the one in the label dialogs):
a Select whose trigger is a Dot + colour name, and whose menu is the standard
dot-and-radio list. Custom colours are deferred. */
var ColorPickerField = exports.ColorPickerField = function ColorPickerField(_ref5) {
var value = _ref5.value,
disabled = _ref5.disabled,
includeTransparent = _ref5.includeTransparent,
onSelect = _ref5.onSelect;
var options = includeTransparent ? [TRANSPARENT_OPTION, ..._elements.COLOR_OPTIONS] : _elements.COLOR_OPTIONS;
var isTransparent = !value || sameColor(value, "transparent");
return /*#__PURE__*/_react.default.createElement(StyledControl, {
className: disabled ? "disabled" : undefined
}, /*#__PURE__*/_react.default.createElement(_Select.Select, {
type: "single",
disableSearch: true,
forceCloseMenu: true,
options: options,
selected: isTransparent ? "transparent" : value,
onChange: function onChange(next) {
return onSelect(String(Array.isArray(next) ? next[0] : next));
},
target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
className: "wb-inspector-trigger"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "wb-color-value"
}, isTransparent ? /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
width: 14,
height: 14,
fill: "currentColor",
className: "wb-transparent-swatch"
}) : /*#__PURE__*/_react.default.createElement(_Dot.Dot, {
color: value,
size: 14
}), colorName(value)))
}));
};
var RightInspector = exports.RightInspector = function RightInspector(_ref6) {
var _sizes$def$id, _positions$def$id, _rotations$def$id, _names$def$id, _shape$align, _BORDER_STYLE_OPTIONS, _BORDER_STYLE_OPTIONS2;
var selectedId = _ref6.selectedId,
positions = _ref6.positions,
setPositions = _ref6.setPositions,
sizes = _ref6.sizes,
setSizes = _ref6.setSizes,
rotations = _ref6.rotations,
setRotations = _ref6.setRotations,
shapes = _ref6.shapes,
setShapes = _ref6.setShapes,
stickyStyle = _ref6.stickyStyle,
setStickyStyle = _ref6.setStickyStyle,
links = _ref6.links,
setLinks = _ref6.setLinks,
files = _ref6.files,
setFiles = _ref6.setFiles,
createdShapes = _ref6.createdShapes,
projectElements = _ref6.projectElements,
setProjectElements = _ref6.setProjectElements,
locks = _ref6.locks,
setLocks = _ref6.setLocks;
var _useState = (0, _react.useState)(_outline.OUTLINE_WIDTH),
_useState2 = _slicedToArray(_useState, 2),
width = _useState2[0],
setWidth = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
resizing = _useState4[0],
setResizing = _useState4[1];
/* Mock only — element display names are not persisted anywhere; they default
to the type label until renamed here. */
var _useState5 = (0, _react.useState)({}),
_useState6 = _slicedToArray(_useState5, 2),
names = _useState6[0],
setNames = _useState6[1];
/* Which inspector tab is showing: the property groups we design, or the
upcoming comments stream (details TBD). */
var _useState7 = (0, _react.useState)("properties"),
_useState8 = _slicedToArray(_useState7, 2),
tab = _useState8[0],
setTab = _useState8[1];
/* Docked right, so the grab strip is on the LEFT edge and dragging left
widens: the delta is subtracted rather than added (see LeftSidebar). */
var startResize = (0, _react.useCallback)(function (event) {
var _event$currentTarget$, _event$currentTarget$2;
event.preventDefault();
var startX = event.clientX;
var startWidth = (_event$currentTarget$ = (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.offsetWidth) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : 0;
var previousUserSelect = document.body.style.userSelect;
setResizing(true);
document.body.style.userSelect = "none";
document.body.style.cursor = "col-resize";
var handleMove = function handleMove(moveEvent) {
var next = startWidth - (moveEvent.clientX - startX);
setWidth(Math.min(_outline.OUTLINE_MAX_WIDTH, Math.max(_outline.OUTLINE_MIN_WIDTH, next)));
};
var _handleUp = function handleUp() {
setResizing(false);
document.body.style.userSelect = previousUserSelect;
document.body.style.cursor = "";
window.removeEventListener("mousemove", handleMove);
window.removeEventListener("mouseup", _handleUp);
};
window.addEventListener("mousemove", handleMove);
window.addEventListener("mouseup", _handleUp);
}, []);
var def = selectedId ? [..._elements.CANVAS_ELEMENTS, ...createdShapes].find(function (element) {
return element.id === selectedId;
}) : undefined;
var linkDef = selectedId ? links.find(function (link) {
return link.id === selectedId;
}) : undefined;
var fileDef = selectedId ? files.find(function (file) {
return file.id === selectedId;
}) : undefined;
var projectDef = selectedId ? projectElements.find(function (entry) {
return entry.id === selectedId;
}) : undefined;
var shell = function shell(content) {
return /*#__PURE__*/_react.default.createElement(StyledInspectorSidebar, {
style: {
width
}
}, /*#__PURE__*/_react.default.createElement(StyledInspectorResizer, {
className: resizing ? "resizing" : "",
onMouseDown: startResize,
role: "separator",
"aria-orientation": "vertical",
"aria-label": "Resize inspector"
}), content);
};
/* Description — inline, multi-line editable text, shown first for every
element kind. */
/* Read-only formatted body (HTML from the API's `body` field). No label; when
the body is empty the field is not rendered at all. No edit yet. */
var renderBody = function renderBody(id) {
var _ELEMENT_BODIES$id;
var html = (_ELEMENT_BODIES$id = _elements.ELEMENT_BODIES[id]) !== null && _ELEMENT_BODIES$id !== void 0 ? _ELEMENT_BODIES$id : "";
if (!html) {
return null;
}
// eslint-disable-next-line react/no-danger
return /*#__PURE__*/_react.default.createElement(StyledBody, {
dangerouslySetInnerHTML: {
__html: html
}
});
};
/* The Locked checkbox — shown for every element kind, toggling a design lock
flag keyed by element id. */
/* `forced` is the limited-access case: the element is locked FOR THIS VIEWER
and the checkbox is the honest place to say so — ticked, and disabled so it
reads as a statement about the element rather than a switch that was left
on. */
var renderLocked = function renderLocked(id) {
var _locks$id;
var forced = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return /*#__PURE__*/_react.default.createElement(StyledCheckboxRow, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
id: "wb-lock-".concat(id),
checked: forced || ((_locks$id = locks[id]) !== null && _locks$id !== void 0 ? _locks$id : false),
disabled: forced,
onChange: function onChange() {
return setLocks(function (current) {
var _current$id;
return _objectSpread(_objectSpread({}, current), {}, {
[id]: !((_current$id = current[id]) !== null && _current$id !== void 0 ? _current$id : false)
});
});
}
}), /*#__PURE__*/_react.default.createElement(_Label.Label, {
htmlFor: "wb-lock-".concat(id),
size: "small",
weight: "regular"
}, "Locked"));
};
/* Geometry for a card (link / file / project / task): X/Y from the shared
positions map, an editable width and an auto height (cards are
content-sized). Cards cannot be rotated, so there is no Rotation field.
`readOnly` keeps the same three values in the same three places and swaps
the inputs for read-only fields — a limited card's geometry is information,
not a control. */
var renderCardGeometry = function renderCardGeometry(id, cardWidth, onWidth) {
var _positions$id;
var readOnly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var cardPosition = (_positions$id = positions[id]) !== null && _positions$id !== void 0 ? _positions$id : {
x: 0,
y: 0
};
return /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold",
className: "group-title"
}, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
label: "X",
value: "".concat(cardPosition.x, " px")
}) : /*#__PURE__*/_react.default.createElement(NumberField, {
label: "X",
unit: "px",
value: cardPosition.x,
onCommit: function onCommit(next) {
return setPositions(function (current) {
var _current$id2;
return _objectSpread(_objectSpread({}, current), {}, {
[id]: _objectSpread(_objectSpread({}, (_current$id2 = current[id]) !== null && _current$id2 !== void 0 ? _current$id2 : {
x: 0,
y: 0
}), {}, {
x: next
})
});
});
}
}), readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
label: "Y",
value: "".concat(cardPosition.y, " px")
}) : /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Y",
unit: "px",
value: cardPosition.y,
onCommit: function onCommit(next) {
return setPositions(function (current) {
var _current$id3;
return _objectSpread(_objectSpread({}, current), {}, {
[id]: _objectSpread(_objectSpread({}, (_current$id3 = current[id]) !== null && _current$id3 !== void 0 ? _current$id3 : {
x: 0,
y: 0
}), {}, {
y: next
})
});
});
}
})), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/_react.default.createElement(ReadOnlyField, {
label: "Width",
value: "".concat(cardWidth, " px")
}) : /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Width",
unit: "px",
value: cardWidth,
min: 1,
onCommit: onWidth
}), /*#__PURE__*/_react.default.createElement(AutoField, {
label: "Height"
})));
};
/* Header + panel switch + body, shared by every element kind — only the
groups inside differ. `renamable` false swaps the live EditableText for
read-only text, for elements whose name is not the board's to change. */
var renderInspectorBody = function renderInspectorBody(icon, headerName, id, groups) {
var renamable = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
return /*#__PURE__*/_react.default.createElement(StyledInspectorBody, null, /*#__PURE__*/_react.default.createElement(StyledInspectorHeader, null, /*#__PURE__*/_react.default.createElement("span", {
className: "inspector-type-icon"
}, icon), /*#__PURE__*/_react.default.createElement("span", {
className: "inspector-name"
}, renamable ? /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
value: headerName,
variant: "Header 3",
weight: "bold",
onSave: function onSave(event) {
return setNames(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
[id]: event.target.value
});
});
},
inputProps: {
maxLength: 120
}
}) : /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
className: "inspector-name-static",
title: headerName
}, headerName))), /*#__PURE__*/_react.default.createElement(_outline.StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(_outline.StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
required: true,
options: [{
id: "properties",
name: "Properties"
}, {
id: "comments",
name: "Comments"
}],
selected: [tab],
onChange: function onChange(selected) {
return setTab(selected[0]);
}
}))), tab === "comments" ? /*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "The comments stream is coming soon.")) : /*#__PURE__*/_react.default.createElement(StyledPropGroups, null, groups));
};
/* Nothing selected. */
if (!def && !linkDef && !fileDef && !projectDef) {
return shell(/*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Select an element to see its properties.")));
}
/* Project / task card — the most constrained element here. Its look is not
the board's to change (no Fill, Stroke or Text), and its title belongs to
the record it shows, so the header is read-only. What is left is what the
board really does own: where the card sits, how wide it is, and whether it
is locked. */
if (projectDef) {
var limited = projectDef.limited === true;
var cardTraits = limited ? LIMITED_ELEMENT_TRAITS : PROJECT_ELEMENT_TRAITS;
return shell(renderInspectorBody(
/* A limited card gets a NEUTRAL icon. The task and project glyphs would
each say which kind of record is behind the card, and the kind is
part of what the viewer is not entitled to. */
limited ? /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, null) : projectDef.kind === "project" ? /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null) : /*#__PURE__*/_react.default.createElement(_Icons.TaskIcon, null), (0, _projectElements.projectElementTitle)(projectDef), projectDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderLocked(projectDef.id, cardTraits.readOnly)), cardTraits.geometry ? renderCardGeometry(projectDef.id, projectDef.width, function (width) {
return setProjectElements(function (current) {
return current.map(function (entry) {
return entry.id === projectDef.id ? _objectSpread(_objectSpread({}, entry), {}, {
width
}) : entry;
});
});
}, cardTraits.readOnly) : null), cardTraits.renamable));
}
/* Link card — its URL plus the shared Locked flag. */
if (linkDef) {
var _names$linkDef$id, _linkDef$url;
return shell(renderInspectorBody(/*#__PURE__*/_react.default.createElement(_Icons.InsertLinkIcon, null), (_names$linkDef$id = names[linkDef.id]) !== null && _names$linkDef$id !== void 0 ? _names$linkDef$id : linkDef.url || "Link", linkDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(linkDef.id), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "URL"), /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
value: (_linkDef$url = linkDef.url) !== null && _linkDef$url !== void 0 ? _linkDef$url : "",
placeholder: "https://\u2026",
onChange: function onChange(event) {
return setLinks(function (current) {
return current.map(function (link) {
return link.id === linkDef.id ? _objectSpread(_objectSpread({}, link), {}, {
url: event.target.value
}) : link;
});
});
}
}))), renderLocked(linkDef.id)), renderCardGeometry(linkDef.id, linkDef.width, function (width) {
return setLinks(function (current) {
return current.map(function (link) {
return link.id === linkDef.id ? _objectSpread(_objectSpread({}, link), {}, {
width
}) : link;
});
});
}))));
}
/* File card — read-only size plus the shared Locked flag. */
if (fileDef) {
var _names$fileDef$id;
return shell(renderInspectorBody(/*#__PURE__*/_react.default.createElement(_Icons.AttachmentIcon, null), (_names$fileDef$id = names[fileDef.id]) !== null && _names$fileDef$id !== void 0 ? _names$fileDef$id : fileDef.file ? "".concat(fileDef.file.base, ".").concat(fileDef.file.extension) : "File", fileDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(fileDef.id), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Size"), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, fileDef.file ? (0, _fileElement.formatFileSize)(fileDef.file.size) : "—")), renderLocked(fileDef.id)), renderCardGeometry(fileDef.id, fileDef.width, function (width) {
return setFiles(function (current) {
return current.map(function (file) {
return file.id === fileDef.id ? _objectSpread(_objectSpread({}, file), {}, {
width
}) : file;
});
});
}))));
}
/* Shape / sticky from here on. */
if (!def) {
return shell(/*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Select an element to see its properties.")));
}
var traits = elementTraits(def);
var shape = def.kind === "shape" ? shapes[def.id] : null;
var size = (_sizes$def$id = sizes[def.id]) !== null && _sizes$def$id !== void 0 ? _sizes$def$id : {
width: def.width,
height: def.height
};
var position = (_positions$def$id = positions[def.id]) !== null && _positions$def$id !== void 0 ? _positions$def$id : {
x: def.x,
y: def.y
};
var rotation = (_rotations$def$id = rotations[def.id]) !== null && _rotations$def$id !== void 0 ? _rotations$def$id : 0;
var typeLabel = shape ? TYPE_LABEL[shape.type] : "Sticky note";
var name = (_names$def$id = names[def.id]) !== null && _names$def$id !== void 0 ? _names$def$id : typeLabel;
var updateShape = function updateShape(partial) {
return setShapes(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: _objectSpread(_objectSpread({}, current[def.id]), partial)
});
});
};
/* Fill is unified across kinds: a shape writes shape.fill, a sticky its note
colour. A transparent colour means no fill. */
var currentFill = shape ? shape.fill : stickyStyle.color;
var currentFillOpacity = shape ? shape.fillOpacity : stickyStyle.fillOpacity;
var setFill = function setFill(color) {
if (shape) {
updateShape({
fill: color
});
} else {
setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
color
}));
}
};
var setFillOpacity = function setFillOpacity(next) {
if (shape) {
updateShape({
fillOpacity: next
});
} else {
setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
fillOpacity: next
}));
}
};
var currentFontSize = shape ? shape.fontSize : stickyStyle.fontSize;
var currentAlign = shape ? (_shape$align = shape.align) !== null && _shape$align !== void 0 ? _shape$align : "left" : stickyStyle.align;
var setFontSize = function setFontSize(next) {
if (shape) {
updateShape({
fontSize: next
});
} else {
setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
fontSize: next
}));
}
};
var setAlign = function setAlign(next) {
if (shape) {
updateShape({
align: next
});
} else {
setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
align: next
}));
}
};
var styleFlags = shape !== null && shape !== void 0 ? shape : stickyStyle;
var toggleStyle = function toggleStyle(key) {
if (shape) {
updateShape({
[key]: !shape[key]
});
} else {
setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
[key]: !stickyStyle[key]
}));
}
};
return shell(renderInspectorBody(shape ? _elements.SHAPE_TYPE_ICON[shape.type] : /*#__PURE__*/_react.default.createElement(_Icons.NoteIcon, null), name, def.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(def.id), shape ? /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Shape"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: ["rectangle", "roundedRectangle", "circle", "triangle"].map(function (shapeType) {
return {
id: shapeType,
name: TYPE_LABEL[shapeType]
};
}),
value: shape.type,
triggerLabel: TYPE_LABEL[shape.type],
onChange: function onChange(next) {
return updateShape({
type: next
});
}
})) : null, renderLocked(def.id)), traits.geometry ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold",
className: "group-title"
}, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
label: "X",
unit: "px",
value: position.x,
onCommit: function onCommit(next) {
return setPositions(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: _objectSpread(_objectSpread({}, current[def.id]), {}, {
x: next
})
});
});
}
}), /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Y",
unit: "px",
value: position.y,
onCommit: function onCommit(next) {
return setPositions(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: _objectSpread(_objectSpread({}, current[def.id]), {}, {
y: next
})
});
});
}
})), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, traits.autoWidth ? /*#__PURE__*/_react.default.createElement(AutoField, {
label: "Width"
}) : /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Width",
unit: "px",
value: size.width,
min: 1,
onCommit: function onCommit(next) {
return setSizes(function (current) {
var _current$def$id$heigh, _current$def$id;
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: {
width: next,
height: (_current$def$id$heigh = (_current$def$id = current[def.id]) === null || _current$def$id === void 0 ? void 0 : _current$def$id.height) !== null && _current$def$id$heigh !== void 0 ? _current$def$id$heigh : def.height
}
});
});
}
}), traits.autoHeight ? /*#__PURE__*/_react.default.createElement(AutoField, {
label: "Height"
}) : /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Height",
unit: "px",
value: size.height,
min: 1,
onCommit: function onCommit(next) {
return setSizes(function (current) {
var _current$def$id$width, _current$def$id2;
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: {
width: (_current$def$id$width = (_current$def$id2 = current[def.id]) === null || _current$def$id2 === void 0 ? void 0 : _current$def$id2.width) !== null && _current$def$id$width !== void 0 ? _current$def$id$width : def.width,
height: next
}
});
});
}
})), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
label: "Rotation",
unit: "\xB0",
value: rotation,
onCommit: function onCommit(next) {
return setRotations(function (current) {
return _objectSpread(_objectSpread({}, current), {}, {
[def.id]: next
});
});
}
}))) : null, traits.fill ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold",
className: "group-title"
}, "Fill"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Color"), /*#__PURE__*/_react.default.createElement(ColorPickerField, {
includeTransparent: traits.fillTransparent,
value: currentFill,
onSelect: setFill
})), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Opacity"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: _elements.OPACITY_OPTIONS.map(function (opacity) {
return {
id: opacity,
name: "".concat(opacity, "%")
};
}),
value: currentFillOpacity,
triggerLabel: "".concat(currentFillOpacity, "%"),
onChange: function onChange(next) {
return setFillOpacity(Number(next));
}
})))) : null, traits.stroke && shape ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold",
className: "group-title"
}, "Stroke"), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Pattern"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
required: true,
options: _elements.BORDER_STYLE_OPTIONS.map(function (option) {
return {
id: option.label,
name: option.label
};
}),
selected: [(_BORDER_STYLE_OPTIONS = (_BORDER_STYLE_OPTIONS2 = _elements.BORDER_STYLE_OPTIONS.find(function (option) {
return option.value === shape.strokeDash;
})) === null || _BORDER_STYLE_OPTIONS2 === void 0 ? void 0 : _BORDER_STYLE_OPTIONS2.label) !== null && _BORDER_STYLE_OPTIONS !== void 0 ? _BORDER_STYLE_OPTIONS : "Solid"],
onChange: function onChange(selected) {
var _BORDER_STYLE_OPTIONS3;
return updateShape({
strokeDash: (_BORDER_STYLE_OPTIONS3 = _elements.BORDER_STYLE_OPTIONS.find(function (option) {
return option.label === selected[0];
})) === null || _BORDER_STYLE_OPTIONS3 === void 0 ? void 0 : _BORDER_STYLE_OPTIONS3.value
});
}
}))), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Thickness"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: _elements.THICKNESS_OPTIONS.map(function (thickness) {
return {
id: thickness,
name: "".concat(thickness, " pt")
};
}),
value: shape.strokeWidth,
triggerLabel: "".concat(shape.strokeWidth, " pt"),
onChange: function onChange(next) {
return updateShape({
strokeWidth: Number(next)
});
}
})), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Color"), /*#__PURE__*/_react.default.createElement(ColorPickerField, {
value: shape.stroke,
onSelect: function onSelect(color) {
return updateShape({
stroke: color
});
}
}))), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Radius"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: _elements.RADIUS_OPTIONS.map(function (radius) {
return {
id: radius,
name: "".concat(radius, " px")
};
}),
value: shape.borderRadius,
triggerLabel: "".concat(shape.borderRadius, " px"),
onChange: function onChange(next) {
return updateShape({
borderRadius: Number(next)
});
}
})), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Opacity"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: _elements.OPACITY_OPTIONS.map(function (opacity) {
return {
id: opacity,
name: "".concat(opacity, "%")
};
}),
value: shape.strokeOpacity,
triggerLabel: "".concat(shape.strokeOpacity, "%"),
onChange: function onChange(next) {
return updateShape({
strokeOpacity: Number(next)
});
}
})))) : null, traits.text ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
weight: "bold",
className: "group-title"
}, "Text"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Style"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, _elements.STYLE_OPTIONS.map(function (option) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
key: option.key,
title: option.label
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
active: styleFlags[option.key],
"aria-label": option.label,
onClick: function onClick() {
return toggleStyle(option.key);
}
}, option.icon));
}))), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Size"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
options: _elements.FONT_SIZE_OPTIONS.map(function (fontSize) {
return {
id: fontSize,
name: "".concat(fontSize, " pt")
};
}),
value: currentFontSize,
triggerLabel: "".concat(currentFontSize, " pt"),
onChange: function onChange(next) {
return setFontSize(Number(next));
}
}))), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
size: "small",
weight: "regular"
}, "Alignment"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, _elements.ALIGN_OPTIONS.map(function (option) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
key: option.value,
title: option.label
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
variant: "text gray",
active: currentAlign === option.value,
"aria-label": option.label,
onClick: function onClick() {
return setAlign(option.value);
}
}, option.icon));
})))) : null)));
};
//# sourceMappingURL=inspector.js.map