@operato/board 10.22.0 → 10.24.0

package/dist/src/modeller/selection-toolbar.js

@@ -0,0 +1,402 @@
+import { __decorate } from "tslib";
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { css, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { EditToolbar } from './edit-toolbar.js';
+/**
+ * The contextual toolbar: a small floating bar that sits just above whatever is selected and
+ * shows only the verbs that apply to it.
+ *
+ * ## Why
+ *
+ * Almost everything in the old 28-icon top toolbar is a verb about the selection - cut, align,
+ * distribute, order, group, font size. A verb about the selection belongs next to the selection,
+ * and only while there is one. With those gone, the top row keeps the handful of verbs about the
+ * board itself (undo, redo, fit, preview, fullscreen, panel), see EditToolbar's `compact`.
+ *
+ * ## What it shows
+ *
+ *   one shape        cut · copy · paste · delete │ forward · backward │ (text) A+ · A-
+ *                    │ ungroup when it is a group │ style copy · databind copy
+ *   two shapes       align (6) │ front · back │ group │ delete
+ *   three or more    + distribute (2)
+ *
+ * The root and layers never get a bar; a 3D board keeps the full top toolbar (its gizmo tools
+ * are not selection verbs in the same sense) and this bar stays out of the way.
+ *
+ * ## Where it sits
+ *
+ * Above the union of the selected shapes' screen boxes, centred, clamped to the canvas, and
+ * flipped below the selection when there is no room above. Screen boxes come from the scene:
+ * a shape's own corners → its root coordinates (`transcoordC2S` then the root's scale and
+ * translate) → canvas pixels (the root's scale and translate again), so rotation and nesting
+ * are both honoured. The position is refreshed on animation frames while a selection exists,
+ * which keeps the bar glued to a shape being dragged or a canvas being zoomed without wiring
+ * into every scene event.
+ *
+ * It reuses EditToolbar's handlers by inheritance, so every verb here is exactly the one the
+ * keyboard shortcut runs.
+ */
+export class SelectionToolbar extends EditToolbar {
+    constructor() {
+        super(...arguments);
+        /*
+         * floating: just above the selection, follows it, steps aside for a drag.
+         * docked: pinned top-centre of the canvas while something is selected - never over a handle,
+         * never over a neighbour, never moving under the hand. Same verbs either way.
+         */
+        this.placement = 'floating';
+        this._left = 0;
+        this._top = 0;
+        this._visible = false;
+        this._frame = 0;
+        this._lastKey = '';
+        /*
+         * One frame at a time. The next frame is booked before the work, so a shape that throws while
+         * it is mid-change (being removed, undone, re-parented) costs one frame, not the loop.
+         */
+        this._tick = () => {
+            this._frame = requestAnimationFrame(this._tick);
+            try {
+                this._place();
+            }
+            catch (e) {
+                /* stale selection; the next frame sees the settled scene */
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._tick();
+        /*
+         * Frames are the steady follow; these are the nudges. A throttled tab (background pane,
+         * battery saver) can starve animation frames, and the bar must still land after a click,
+         * a drag, a wheel zoom or a resize.
+         */
+        const host = this.anchor || this.parentElement;
+        const nudge = () => this._place();
+        const events = ['pointerup', 'pointermove', 'wheel', 'keyup'];
+        events.forEach(name => host === null || host === void 0 ? void 0 : host.addEventListener(name, nudge, { passive: true }));
+        window.addEventListener('resize', nudge);
+        /* Step aside for a drag that starts on the canvas (not on the bar itself). */
+        const down = (e) => {
+            if (!e.composedPath().includes(this))
+                this.toggleAttribute('dragging', true);
+        };
+        const up = () => this.toggleAttribute('dragging', false);
+        host === null || host === void 0 ? void 0 : host.addEventListener('pointerdown', down, { passive: true });
+        window.addEventListener('pointerup', up, { passive: true });
+        window.addEventListener('pointercancel', up, { passive: true });
+        this._hostListeners = () => {
+            events.forEach(name => host === null || host === void 0 ? void 0 : host.removeEventListener(name, nudge));
+            window.removeEventListener('resize', nudge);
+            host === null || host === void 0 ? void 0 : host.removeEventListener('pointerdown', down);
+            window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
+        };
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        cancelAnimationFrame(this._frame);
+        (_a = this._hostListeners) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    firstUpdated() {
+        /* The base wires the clipboard listener the paste verb reads from; keep it. */
+        super.firstUpdated();
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('_visible')) {
+            this.toggleAttribute('shown', this._visible);
+        }
+        if (changes.has('selected') || changes.has('scene')) {
+            /* The bar's width depends on what is selected; measure after it has rendered. */
+            this._lastKey = '';
+            requestAnimationFrame(() => this._place());
+            setTimeout(() => this._place(), 50);
+        }
+    }
+    render() {
+        const selected = this.selected || [];
+        const count = selected.length;
+        const one = count === 1;
+        const many = count > 1;
+        const text = one && !!selected[0].hasTextProperty;
+        const group = one && selected[0].get('type') === 'group';
+        if (!this._visible) {
+            return html ``;
+        }
+        return html `
+      <div bar style="left:${this._left}px;top:${this._top}px;position:absolute">
+        ${one
+            ? html `
+              ${this.button('content_cut', 'cut', () => this.onTapCut())}
+              ${this.button('content_copy', 'copy', () => this.onTapCopy())}
+              ${this.button('content_paste', 'paste', () => this.onTapPaste())}
+              <i></i>
+              ${this.button('flip_to_front', 'bring forward', () => this.onTapZorder('forward'))}
+              ${this.button('flip_to_back', 'send backward', () => this.onTapZorder('backward'))}
+              ${text
+                ? html `<i></i>
+                    ${this.button('text_increase', 'increase font size', () => this.onTapFontIncrease(undefined))}
+                    ${this.button('text_decrease', 'decrease font size', () => this.onTapFontDecrease(undefined))}`
+                : nothing}
+              ${group ? html `<i></i>${this.button('deselect', 'ungroup', () => this.onTapUngroup())}` : nothing}
+              <i></i>
+              ${this.button('format_paint', 'copy style to…', () => this.onStartStylePasteMode())}
+              ${this.button('data_object', 'copy data binding to…', () => this.onStartDatabindPasteMode())}
+            `
+            : nothing}
+        ${many
+            ? html `
+              ${this.button('align_horizontal_left', 'align left', () => this.onTapAlign('left'))}
+              ${this.button('align_horizontal_center', 'align center', () => this.onTapAlign('center'))}
+              ${this.button('align_horizontal_right', 'align right', () => this.onTapAlign('right'))}
+              ${this.button('align_vertical_top', 'align top', () => this.onTapAlign('top'))}
+              ${this.button('align_vertical_center', 'align middle', () => this.onTapAlign('middle'))}
+              ${this.button('align_vertical_bottom', 'align bottom', () => this.onTapAlign('bottom'))}
+              ${count > 2
+                ? html `<i></i>
+                    ${this.button('horizontal_distribute', 'distribute horizontally', () => this.onTapDistribute('HORIZONTAL'))}
+                    ${this.button('vertical_distribute', 'distribute vertically', () => this.onTapDistribute('VERTICAL'))}`
+                : nothing}
+              <i></i>
+              ${this.button('flip_to_front', 'bring to front', () => this.onTapZorder('front'))}
+              ${this.button('flip_to_back', 'send to back', () => this.onTapZorder('back'))}
+              <i></i>
+              ${this.button('select_all', 'group', () => this.onTapGroup())}
+              ${this.button('content_copy', 'copy', () => this.onTapCopy())}
+            `
+            : nothing}
+        <i></i>
+        ${this.button('delete', 'delete', () => this.onTapDelete(), true)}
+      </div>
+    `;
+    }
+    button(icon, title, handler, danger = false) {
+        return html `
+      <button
+        title=${title}
+        ?danger=${danger}
+        @mousedown=${(e) => e.preventDefault()}
+        @click=${(e) => {
+            e.stopPropagation();
+            handler();
+        }}
+      >
+        <md-icon>${icon}</md-icon>
+      </button>
+    `;
+    }
+    _place() {
+        var _a;
+        /* A popup or dialog owns the screen while it is open; the bar must not show through it. */
+        const box = SelectionToolbar._overlayOpen() ? null : this._selectionBox();
+        if (!box) {
+            if (this._visible) {
+                this._visible = false;
+                this._lastKey = '';
+            }
+            return;
+        }
+        const host = this.anchor || this.parentElement;
+        const hostRect = host.getBoundingClientRect();
+        const BAR_HEIGHT = 36;
+        if (this.placement === 'docked') {
+            const key = `docked:${Math.round(hostRect.width)}`;
+            if (key === this._lastKey && this._visible)
+                return;
+            this._lastKey = key;
+            this._left = hostRect.width / 2;
+            this._top = 8;
+            this._visible = true;
+            this.toggleAttribute('below', false);
+            return;
+        }
+        /* Enough clearance for the top resize handle and the rotate handle that sits above it. */
+        const GAP = 26;
+        let left = (box.left + box.right) / 2 - hostRect.left;
+        let top = box.top - hostRect.top - BAR_HEIGHT - GAP;
+        let below = false;
+        /* Not enough room above: sit below the selection instead of on top of it. */
+        if (top < 8) {
+            top = box.bottom - hostRect.top + GAP;
+            below = true;
+        }
+        const barWidth = ((_a = this.renderRoot.querySelector('[bar]')) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 240;
+        left = Math.max(barWidth / 2 + 4, Math.min(hostRect.width - barWidth / 2 - 4, left));
+        top = Math.max(4, Math.min(hostRect.height - BAR_HEIGHT - 4, top));
+        const key = `${Math.round(left)}:${Math.round(top)}:${below}`;
+        if (key === this._lastKey && this._visible) {
+            return;
+        }
+        this._lastKey = key;
+        this._left = left;
+        this._top = top;
+        this._visible = true;
+        this.toggleAttribute('below', below);
+    }
+    /* The union of the selected shapes' boxes, in viewport pixels; null when there is no bar to show. */
+    /* The shell mounts popups inside its header bar's shadow tree, so a plain query never sees them. */
+    static _overlayOpen() {
+        var _a, _b, _c;
+        const q = 'ox-floating-overlay, ox-popup, md-dialog[open]';
+        const app = document.querySelector('things-app');
+        const bar = (_a = app === null || app === void 0 ? void 0 : app.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ox-header-bar');
+        return !!(document.querySelector(q) || ((_b = app === null || app === void 0 ? void 0 : app.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(q)) || ((_c = bar === null || bar === void 0 ? void 0 : bar.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(q)));
+    }
+    _selectionBox() {
+        var _a, _b;
+        const scene = this.scene;
+        const root = scene === null || scene === void 0 ? void 0 : scene.root;
+        const selected = (this.selected || []);
+        if (!(root === null || root === void 0 ? void 0 : root.element) || !selected.length) {
+            return null;
+        }
+        /* Only 2D boards; and never the root or a layer. */
+        if ((_b = (_a = scene.model_layer) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.threed) {
+            return null;
+        }
+        const scale = root.get('scale') || { x: 1, y: 1 };
+        const translate = root.get('translate') || { x: 0, y: 0 };
+        const canvas = root.element.getBoundingClientRect();
+        let left = Infinity;
+        let top = Infinity;
+        let right = -Infinity;
+        let bottom = -Infinity;
+        for (const component of selected) {
+            const c = component;
+            if (!c || (typeof c.isRootModel === 'function' && c.isRootModel()) || (typeof c.isLayer === 'function' && c.isLayer())) {
+                return null;
+            }
+            const b = c.bounds;
+            if (!b)
+                continue;
+            const corners = [
+                [b.left, b.top],
+                [b.left + b.width, b.top],
+                [b.left + b.width, b.top + b.height],
+                [b.left, b.top + b.height]
+            ];
+            for (const [x, y] of corners) {
+                const p = c.transcoordC2S(x, y);
+                /* to root coordinates, then to canvas pixels */
+                const rx = p.x * scale.x + translate.x;
+                const ry = p.y * scale.y + translate.y;
+                const sx = rx * scale.x + translate.x + canvas.left;
+                const sy = ry * scale.y + translate.y + canvas.top;
+                left = Math.min(left, sx);
+                top = Math.min(top, sy);
+                right = Math.max(right, sx);
+                bottom = Math.max(bottom, sy);
+            }
+        }
+        if (!Number.isFinite(left)) {
+            return null;
+        }
+        return { left, top, right, bottom };
+    }
+}
+SelectionToolbar.styles = [
+    css `
+      :host {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 20;
+        display: none;
+        pointer-events: none;
+      }
+
+      :host([shown]) {
+        display: block;
+      }
+
+      /* While the pointer is down on the canvas the floating bar steps aside; nothing must sit
+       * between the hand and a handle. It fades rather than pops so the eye is not pulled. */
+      :host([dragging]:not([placement='docked'])) [bar] {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.08s ease-out;
+      }
+
+      [bar] {
+        transition: opacity 0.12s ease-out;
+      }
+
+      [bar] {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 3px;
+        border-radius: 8px;
+        background: var(--selection-toolbar-background, var(--md-sys-color-surface-container-highest));
+        color: var(--md-sys-color-on-surface-variant);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+        pointer-events: auto;
+        white-space: nowrap;
+        transform: translateX(-50%);
+      }
+
+      :host([below]) [bar] {
+        transform: translateX(-50%);
+      }
+
+      [bar] button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: 0;
+        border-radius: 6px;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      [bar] button:hover {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      [bar] button[danger]:hover {
+        background: var(--md-sys-color-error-container, #f9dedc);
+        color: var(--md-sys-color-on-error-container, #410e0b);
+      }
+
+      [bar] button md-icon {
+        --md-icon-size: 18px;
+        font-variation-settings: 'wght' 400;
+      }
+
+      [bar] i {
+        width: 1px;
+        height: 18px;
+        margin: 0 3px;
+        background: var(--md-sys-color-outline-variant);
+      }
+    `
+];
+__decorate([
+    property({ attribute: false })
+], SelectionToolbar.prototype, "anchor", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SelectionToolbar.prototype, "placement", void 0);
+__decorate([
+    state()
+], SelectionToolbar.prototype, "_left", void 0);
+__decorate([
+    state()
+], SelectionToolbar.prototype, "_top", void 0);
+__decorate([
+    state()
+], SelectionToolbar.prototype, "_visible", void 0);
+//# sourceMappingURL=selection-toolbar.js.map

package/dist/src/modeller/selection-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-toolbar.js","sourceRoot":"","sources":["../../../src/modeller/selection-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing, PropertyValues } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { Component } from '@hatiolab/things-scene'\n\nimport { EditToolbar } from './edit-toolbar.js'\n\n/**\n * The contextual toolbar: a small floating bar that sits just above whatever is selected and\n * shows only the verbs that apply to it.\n *\n * ## Why\n *\n * Almost everything in the old 28-icon top toolbar is a verb about the selection - cut, align,\n * distribute, order, group, font size. A verb about the selection belongs next to the selection,\n * and only while there is one. With those gone, the top row keeps the handful of verbs about the\n * board itself (undo, redo, fit, preview, fullscreen, panel), see EditToolbar's `compact`.\n *\n * ## What it shows\n *\n *   one shape        cut · copy · paste · delete │ forward · backward │ (text) A+ · A-\n *                    │ ungroup when it is a group │ style copy · databind copy\n *   two shapes       align (6) │ front · back │ group │ delete\n *   three or more    + distribute (2)\n *\n * The root and layers never get a bar; a 3D board keeps the full top toolbar (its gizmo tools\n * are not selection verbs in the same sense) and this bar stays out of the way.\n *\n * ## Where it sits\n *\n * Above the union of the selected shapes' screen boxes, centred, clamped to the canvas, and\n * flipped below the selection when there is no room above. Screen boxes come from the scene:\n * a shape's own corners → its root coordinates (`transcoordC2S` then the root's scale and\n * translate) → canvas pixels (the root's scale and translate again), so rotation and nesting\n * are both honoured. The position is refreshed on animation frames while a selection exists,\n * which keeps the bar glued to a shape being dragged or a canvas being zoomed without wiring\n * into every scene event.\n *\n * It reuses EditToolbar's handlers by inheritance, so every verb here is exactly the one the\n * keyboard shortcut runs.\n */\nexport class SelectionToolbar extends EditToolbar {\n  static styles = [\n    css`\n      :host {\n        position: absolute;\n        left: 0;\n        top: 0;\n        z-index: 20;\n        display: none;\n        pointer-events: none;\n      }\n\n      :host([shown]) {\n        display: block;\n      }\n\n      /* While the pointer is down on the canvas the floating bar steps aside; nothing must sit\n       * between the hand and a handle. It fades rather than pops so the eye is not pulled. */\n      :host([dragging]:not([placement='docked'])) [bar] {\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 0.08s ease-out;\n      }\n\n      [bar] {\n        transition: opacity 0.12s ease-out;\n      }\n\n      [bar] {\n        display: flex;\n        align-items: center;\n        gap: 2px;\n        padding: 3px;\n        border-radius: 8px;\n        background: var(--selection-toolbar-background, var(--md-sys-color-surface-container-highest));\n        color: var(--md-sys-color-on-surface-variant);\n        border: 1px solid var(--md-sys-color-outline-variant);\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);\n        pointer-events: auto;\n        white-space: nowrap;\n        transform: translateX(-50%);\n      }\n\n      :host([below]) [bar] {\n        transform: translateX(-50%);\n      }\n\n      [bar] button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 28px;\n        height: 28px;\n        padding: 0;\n        border: 0;\n        border-radius: 6px;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n      }\n\n      [bar] button:hover {\n        background: var(--md-sys-color-secondary-container);\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      [bar] button[danger]:hover {\n        background: var(--md-sys-color-error-container, #f9dedc);\n        color: var(--md-sys-color-on-error-container, #410e0b);\n      }\n\n      [bar] button md-icon {\n        --md-icon-size: 18px;\n        font-variation-settings: 'wght' 400;\n      }\n\n      [bar] i {\n        width: 1px;\n        height: 18px;\n        margin: 0 3px;\n        background: var(--md-sys-color-outline-variant);\n      }\n    `\n  ]\n\n  /* The element whose box the bar is positioned in (the scene wrap); defaults to the parent. */\n  @property({ attribute: false }) anchor?: HTMLElement\n  /*\n   * floating: just above the selection, follows it, steps aside for a drag.\n   * docked: pinned top-centre of the canvas while something is selected - never over a handle,\n   * never over a neighbour, never moving under the hand. Same verbs either way.\n   */\n  @property({ type: String, reflect: true }) placement: 'floating' | 'docked' = 'floating'\n\n  @state() private _left = 0\n  @state() private _top = 0\n  @state() private _visible = false\n\n  private _frame = 0\n  private _lastKey = ''\n\n  private _hostListeners?: () => void\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._tick()\n\n    /*\n     * Frames are the steady follow; these are the nudges. A throttled tab (background pane,\n     * battery saver) can starve animation frames, and the bar must still land after a click,\n     * a drag, a wheel zoom or a resize.\n     */\n    const host = this.anchor || (this.parentElement as HTMLElement)\n    const nudge = () => this._place()\n    const events = ['pointerup', 'pointermove', 'wheel', 'keyup']\n    events.forEach(name => host?.addEventListener(name, nudge, { passive: true }))\n    window.addEventListener('resize', nudge)\n\n    /* Step aside for a drag that starts on the canvas (not on the bar itself). */\n    const down = (e: Event) => {\n      if (!e.composedPath().includes(this)) this.toggleAttribute('dragging', true)\n    }\n    const up = () => this.toggleAttribute('dragging', false)\n    host?.addEventListener('pointerdown', down, { passive: true })\n    window.addEventListener('pointerup', up, { passive: true })\n    window.addEventListener('pointercancel', up, { passive: true })\n\n    this._hostListeners = () => {\n      events.forEach(name => host?.removeEventListener(name, nudge))\n      window.removeEventListener('resize', nudge)\n      host?.removeEventListener('pointerdown', down)\n      window.removeEventListener('pointerup', up)\n      window.removeEventListener('pointercancel', up)\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    cancelAnimationFrame(this._frame)\n    this._hostListeners?.()\n  }\n\n  firstUpdated() {\n    /* The base wires the clipboard listener the paste verb reads from; keep it. */\n    super.firstUpdated()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    super.updated(changes)\n\n    if ((changes as Map<string, unknown>).has('_visible')) {\n      this.toggleAttribute('shown', this._visible)\n    }\n\n    if (changes.has('selected') || changes.has('scene')) {\n      /* The bar's width depends on what is selected; measure after it has rendered. */\n      this._lastKey = ''\n      requestAnimationFrame(() => this._place())\n      setTimeout(() => this._place(), 50)\n    }\n  }\n\n  render() {\n    const selected = this.selected || []\n    const count = selected.length\n    const one = count === 1\n    const many = count > 1\n    const text = one && !!(selected[0] as any).hasTextProperty\n    const group = one && selected[0].get('type') === 'group'\n\n    if (!this._visible) {\n      return html``\n    }\n\n    return html`\n      <div bar style=\"left:${this._left}px;top:${this._top}px;position:absolute\">\n        ${one\n          ? html`\n              ${this.button('content_cut', 'cut', () => this.onTapCut())}\n              ${this.button('content_copy', 'copy', () => this.onTapCopy())}\n              ${this.button('content_paste', 'paste', () => this.onTapPaste())}\n              <i></i>\n              ${this.button('flip_to_front', 'bring forward', () => this.onTapZorder('forward'))}\n              ${this.button('flip_to_back', 'send backward', () => this.onTapZorder('backward'))}\n              ${text\n                ? html`<i></i>\n                    ${this.button('text_increase', 'increase font size', () => this.onTapFontIncrease(undefined as any))}\n                    ${this.button('text_decrease', 'decrease font size', () => this.onTapFontDecrease(undefined as any))}`\n                : nothing}\n              ${group ? html`<i></i>${this.button('deselect', 'ungroup', () => this.onTapUngroup())}` : nothing}\n              <i></i>\n              ${this.button('format_paint', 'copy style to…', () => this.onStartStylePasteMode())}\n              ${this.button('data_object', 'copy data binding to…', () => this.onStartDatabindPasteMode())}\n            `\n          : nothing}\n        ${many\n          ? html`\n              ${this.button('align_horizontal_left', 'align left', () => this.onTapAlign('left'))}\n              ${this.button('align_horizontal_center', 'align center', () => this.onTapAlign('center'))}\n              ${this.button('align_horizontal_right', 'align right', () => this.onTapAlign('right'))}\n              ${this.button('align_vertical_top', 'align top', () => this.onTapAlign('top'))}\n              ${this.button('align_vertical_center', 'align middle', () => this.onTapAlign('middle'))}\n              ${this.button('align_vertical_bottom', 'align bottom', () => this.onTapAlign('bottom'))}\n              ${count > 2\n                ? html`<i></i>\n                    ${this.button('horizontal_distribute', 'distribute horizontally', () => this.onTapDistribute('HORIZONTAL'))}\n                    ${this.button('vertical_distribute', 'distribute vertically', () => this.onTapDistribute('VERTICAL'))}`\n                : nothing}\n              <i></i>\n              ${this.button('flip_to_front', 'bring to front', () => this.onTapZorder('front'))}\n              ${this.button('flip_to_back', 'send to back', () => this.onTapZorder('back'))}\n              <i></i>\n              ${this.button('select_all', 'group', () => this.onTapGroup())}\n              ${this.button('content_copy', 'copy', () => this.onTapCopy())}\n            `\n          : nothing}\n        <i></i>\n        ${this.button('delete', 'delete', () => this.onTapDelete(), true)}\n      </div>\n    `\n  }\n\n  private button(icon: string, title: string, handler: () => void, danger = false) {\n    return html`\n      <button\n        title=${title}\n        ?danger=${danger}\n        @mousedown=${(e: Event) => e.preventDefault()}\n        @click=${(e: Event) => {\n          e.stopPropagation()\n          handler()\n        }}\n      >\n        <md-icon>${icon}</md-icon>\n      </button>\n    `\n  }\n\n  /*\n   * One frame at a time. The next frame is booked before the work, so a shape that throws while\n   * it is mid-change (being removed, undone, re-parented) costs one frame, not the loop.\n   */\n  private _tick = () => {\n    this._frame = requestAnimationFrame(this._tick)\n\n    try {\n      this._place()\n    } catch (e) {\n      /* stale selection; the next frame sees the settled scene */\n    }\n  }\n\n  private _place() {\n    /* A popup or dialog owns the screen while it is open; the bar must not show through it. */\n    const box = SelectionToolbar._overlayOpen() ? null : this._selectionBox()\n\n    if (!box) {\n      if (this._visible) {\n        this._visible = false\n        this._lastKey = ''\n      }\n      return\n    }\n\n    const host = this.anchor || (this.parentElement as HTMLElement)\n    const hostRect = host.getBoundingClientRect()\n    const BAR_HEIGHT = 36\n\n    if (this.placement === 'docked') {\n      const key = `docked:${Math.round(hostRect.width)}`\n      if (key === this._lastKey && this._visible) return\n      this._lastKey = key\n      this._left = hostRect.width / 2\n      this._top = 8\n      this._visible = true\n      this.toggleAttribute('below', false)\n      return\n    }\n    /* Enough clearance for the top resize handle and the rotate handle that sits above it. */\n    const GAP = 26\n\n    let left = (box.left + box.right) / 2 - hostRect.left\n    let top = box.top - hostRect.top - BAR_HEIGHT - GAP\n    let below = false\n\n    /* Not enough room above: sit below the selection instead of on top of it. */\n    if (top < 8) {\n      top = box.bottom - hostRect.top + GAP\n      below = true\n    }\n\n    const barWidth = (this.renderRoot.querySelector('[bar]') as HTMLElement)?.offsetWidth || 240\n    left = Math.max(barWidth / 2 + 4, Math.min(hostRect.width - barWidth / 2 - 4, left))\n    top = Math.max(4, Math.min(hostRect.height - BAR_HEIGHT - 4, top))\n\n    const key = `${Math.round(left)}:${Math.round(top)}:${below}`\n    if (key === this._lastKey && this._visible) {\n      return\n    }\n\n    this._lastKey = key\n    this._left = left\n    this._top = top\n    this._visible = true\n    this.toggleAttribute('below', below)\n  }\n\n  /* The union of the selected shapes' boxes, in viewport pixels; null when there is no bar to show. */\n  /* The shell mounts popups inside its header bar's shadow tree, so a plain query never sees them. */\n  private static _overlayOpen(): boolean {\n    const q = 'ox-floating-overlay, ox-popup, md-dialog[open]'\n    const app = document.querySelector('things-app')\n    const bar = app?.shadowRoot?.querySelector('ox-header-bar')\n    return !!(document.querySelector(q) || app?.shadowRoot?.querySelector(q) || bar?.shadowRoot?.querySelector(q))\n  }\n\n  private _selectionBox(): { left: number; top: number; right: number; bottom: number } | null {\n    const scene: any = this.scene\n    const root = scene?.root\n    const selected = (this.selected || []) as Component[]\n\n    if (!root?.element || !selected.length) {\n      return null\n    }\n\n    /* Only 2D boards; and never the root or a layer. */\n    if (scene.model_layer?.model?.threed) {\n      return null\n    }\n\n    const scale = root.get('scale') || { x: 1, y: 1 }\n    const translate = root.get('translate') || { x: 0, y: 0 }\n    const canvas = root.element.getBoundingClientRect()\n\n    let left = Infinity\n    let top = Infinity\n    let right = -Infinity\n    let bottom = -Infinity\n\n    for (const component of selected) {\n      const c: any = component\n      if (!c || (typeof c.isRootModel === 'function' && c.isRootModel()) || (typeof c.isLayer === 'function' && c.isLayer())) {\n        return null\n      }\n\n      const b = c.bounds\n      if (!b) continue\n\n      const corners = [\n        [b.left, b.top],\n        [b.left + b.width, b.top],\n        [b.left + b.width, b.top + b.height],\n        [b.left, b.top + b.height]\n      ]\n\n      for (const [x, y] of corners) {\n        const p = c.transcoordC2S(x, y)\n        /* to root coordinates, then to canvas pixels */\n        const rx = p.x * scale.x + translate.x\n        const ry = p.y * scale.y + translate.y\n        const sx = rx * scale.x + translate.x + canvas.left\n        const sy = ry * scale.y + translate.y + canvas.top\n\n        left = Math.min(left, sx)\n        top = Math.min(top, sy)\n        right = Math.max(right, sx)\n        bottom = Math.max(bottom, sy)\n      }\n    }\n\n    if (!Number.isFinite(left)) {\n      return null\n    }\n\n    return { left, top, right, bottom }\n  }\n}\n"]}

package/dist/src/ox-board-modeller.d.ts

@@ -11,6 +11,7 @@ import { LitElement, PropertyValues } from 'lit';
 import { LoadTracker, Scene, SceneMode } from '@hatiolab/things-scene';
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js';
 import { EditToolbar } from './modeller/edit-toolbar.js';
+import { SelectionToolbar } from './modeller/selection-toolbar.js';
 import { PropertySidebar } from './modeller/property-sidebar.js';
 import { ComponentGroup, ComponentTemplate } from './types.js';
 declare const BoardModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
@@ -27,6 +28,8 @@ export declare class BoardModeller extends BoardModeller_base {
     mode: SceneMode;
     provider: any;
     hideProperty: boolean;
+    contextualToolbar: boolean;
+    contextualToolbarPlacement: 'floating' | 'docked';
     overlay: string;
     scene?: Scene;
     loadTracker?: LoadTracker;
@@ -41,6 +44,7 @@ export declare class BoardModeller extends BoardModeller_base {
     constructor();
     static get scopedElements(): {
         'edit-toolbar': typeof EditToolbar;
+        'selection-toolbar': typeof SelectionToolbar;
         'property-sidebar': typeof PropertySidebar;
         'component-toolbar': typeof ComponentToolbar;
     };

package/dist/src/ox-board-modeller.js

@@ -19,6 +19,7 @@ import { i18next } from '@operato/i18n';
 import { isMacOS, togglefullscreen } from '@operato/utils';
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar.js';
 import { EditToolbar } from './modeller/edit-toolbar.js';
+import { SelectionToolbar } from './modeller/selection-toolbar.js';
 import { PropertySidebar } from './modeller/property-sidebar.js';
 const MACOS = isMacOS();
 const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href;
@@ -65,6 +66,12 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
         this.mode = SCENE_MODE.EDIT;
         this.provider = null;
         this.hideProperty = false;
+        /* Selection verbs float next to the selection (SelectionToolbar) and the top bar keeps only
+         * the board verbs. Set false to get the old one-row-of-everything toolbar back. */
+        this.contextualToolbar = true;
+        /* Where the contextual bar lives when it is on: floating by the selection, or docked at the
+         * top of the canvas. */
+        this.contextualToolbarPlacement = 'floating';
         this.overlay = '';
         this.componentGroupList = [];
         this.fonts = [];
@@ -93,6 +100,7 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
     static get scopedElements() {
         return {
             'edit-toolbar': EditToolbar,
+            'selection-toolbar': SelectionToolbar,
             'property-sidebar': PropertySidebar,
             'component-toolbar': ComponentToolbar
         };
@@ -102,6 +110,7 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
       <edit-toolbar
         .scene=${this.scene}
         .selected=${this.selected}
+        .compact=${this.contextualToolbar}
         @hide-property-changed=${(e) => (this.hideProperty = e.detail.value)}
         @open-preview=${() => this.preview()}
         @open-data-binding=${() => this.openDataBinding()}
@@ -167,6 +176,14 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
             <ox-scene-handler type="paste-handler"></ox-scene-handler>
           </ox-scene-viewer>
 
+          ${this.contextualToolbar
+            ? html `<selection-toolbar
+                .scene=${this.scene}
+                .selected=${this.selected}
+                .placement=${this.contextualToolbarPlacement}
+              ></selection-toolbar>`
+            : ''}
+
           <md-fab @click=${() => this.onTapSave()} title="save">
             <md-icon slot="icon">save</md-icon>
           </md-fab>
@@ -175,6 +192,7 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
         <property-sidebar
           .scene=${this.scene}
           .selected=${this.selected}
+          .heading=${this.boardName}
           .collapsed=${this.hideProperty}
           .fonts=${this.fonts}
           .propertyEditor=${this.propertyEditor}
@@ -487,6 +505,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], BoardModeller.prototype, "hideProperty", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardModeller.prototype, "contextualToolbar", void 0);
+__decorate([
+    property({ type: String })
+], BoardModeller.prototype, "contextualToolbarPlacement", void 0);
 __decorate([
     property({ type: String })
 ], BoardModeller.prototype, "overlay", void 0);