@formicoidea/labre-core 0.42.0 → 0.45.0

package/dist/_pkgs/affine-widget-edgeless-toolbar/selection-pane/selection-pane-tool.js

@@ -0,0 +1,82 @@
+import { SelectionPaneModel, selectionPaneCommands, } from '../../affine-block-surface/index.js';
+import { SelectionPaneProvider, translateKey, } from '../../affine-shared/services/index.js';
+import { menu } from '../../affine-components/context-menu/index.js';
+import { SignalWatcher } from '../../global/lit/index.js';
+import { runCommand } from '../../std/index.js';
+import { LayerIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+import { QuickToolExtension } from '../extension/index.js';
+import { QuickToolMixin } from '../mixins/index.js';
+import { SELECTION_PANE_TITLE } from '../translations.js';
+export const SELECTION_PANE_TOOL_BUTTON = 'edgeless-selection-pane-tool-button';
+/**
+ * The button and its "more tools" entry both run `canvas.selectionPane.toggle`
+ * rather than calling the seam, so `SelectionPaneOpened` is emitted in ONE
+ * place whichever surface opened the pane.
+ */
+function toggleSelectionPane(std) {
+    const toggle = selectionPaneCommands.find(command => command.id === 'canvas.selectionPane.toggle');
+    if (!toggle)
+        return;
+    runCommand(std, toggle, {
+        surface: 'contextual-toolbar',
+        source: 'toolbar:general',
+    });
+}
+/**
+ * The edgeless toolbar's entry to the selection pane: a quick tool, placed and
+ * styled like the undo and frame ones. An action, not a tool mode, so `type`
+ * is empty; it reads as active while the library's own pane is open.
+ */
+export class EdgelessSelectionPaneToolButton extends QuickToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.type = [];
+    }
+    static { this.styles = css `
+    .selection-pane-icon,
+    .selection-pane-icon > svg {
+      width: 24px;
+      height: 24px;
+    }
+  `; }
+    _onClick() {
+        toggleSelectionPane(this.edgeless.std);
+    }
+    render() {
+        const { std } = this.edgeless;
+        const open = std.getOptional(SelectionPaneModel)?.open$.value ?? false;
+        return html `<edgeless-tool-icon-button
+      .iconContainerPadding="${6}"
+      .tooltip="${translateKey(std, ...SELECTION_PANE_TITLE)}"
+      .tooltipOffset=${17}
+      .active=${open}
+      class="edgeless-selection-pane-tool-button"
+      data-testid="selection-pane-tool-button"
+      @click=${this._onClick}
+    >
+      <span class="selection-pane-icon">${LayerIcon()}</span>
+    </edgeless-tool-icon-button>`;
+    }
+}
+/**
+ * Shown only while `SelectionPaneProvider` answers: `SelectionPaneExtension(null)`
+ * removes the button with the pane, because a control that opens nothing is a
+ * lie. Not hidden on a read-only document — the pane is how a reader finds
+ * what is on it.
+ *
+ * The `menu` entry is what the toolbar moves into its "more tools" menu when a
+ * narrow editor leaves no room for the button; a quick tool without one is
+ * dropped there, which is how the pane once went missing below ~800 px.
+ */
+export const selectionPaneQuickTool = QuickToolExtension('selection-pane', ({ block }) => ({
+    content: html `<edgeless-selection-pane-tool-button
+      .edgeless=${block}
+    ></edgeless-selection-pane-tool-button>`,
+    menu: menu.action({
+        name: translateKey(block.std, ...SELECTION_PANE_TITLE),
+        prefix: LayerIcon(),
+        select: () => toggleSelectionPane(block.std),
+    }),
+    enable: !!block.std.getOptional(SelectionPaneProvider),
+}));

package/dist/_pkgs/affine-widget-edgeless-toolbar/selection-pane/selection-pane-widget.d.ts

@@ -0,0 +1,170 @@
+import { type RootBlockModel } from '../../affine-model/index.js';
+import { WidgetComponent } from '../../std/index.js';
+import { nothing } from 'lit';
+export declare const EDGELESS_SELECTION_PANE_WIDGET = "edgeless-selection-pane-widget";
+/**
+ * The **selection pane** (ADR 0031, stage 2): the canvas elements by z-order,
+ * top first, the library's own panel behind `SelectionPaneProvider`.
+ *
+ * ## Docked like the artefact catalogue
+ *
+ * A full-height column down the left edge of the editor, inside it — the
+ * geometry, layer, zero-width host and wheel capture are the catalogue's, for
+ * the catalogue's reasons (see `artefact-catalogue-widget.ts`). What differs
+ * is the dismissal: the pane is a place you WORK from, its selection mirrors
+ * the canvas both ways, so a click on the canvas does not put it away. × and
+ * Escape (with the pointer or focus in the pane) do.
+ *
+ * ## Rows
+ *
+ * Drawn from `selectionPaneTree(std)` — the same headless tree a host pane
+ * would draw — and labelled at render time ({@link selectionPaneRowLabel}).
+ * A group or a mindmap is a collapsible row; collapse is this panel's state,
+ * never stored. Hover highlights the element on the canvas, click selects it
+ * (shift / ctrl / cmd adds or removes it, like on the canvas), the padlock
+ * locks that row alone, a double-click renames a group or a frame (a frame is
+ * a row at its place in the stack, ADR 0031 amendments), and a drag moves a row
+ * among its siblings. Every write goes through `runCommand`, so the read-only
+ * refusal and the undo step live in one place.
+ */
+export declare class EdgelessSelectionPaneWidget extends WidgetComponent<RootBlockModel> {
+    static styles: import("lit").CSSResult;
+    private accessor _open;
+    /** Group rows the user folded. UI state, never stored. */
+    private accessor _collapsed;
+    /** The frame the list is narrowed to, or `null`. */
+    private accessor _filter;
+    /** The group row being renamed, or `null`. */
+    private accessor _renaming;
+    /** Where the dragged row would land. */
+    private accessor _drop;
+    /** Where the dragged row's ghost is drawn, in the panel's own box. */
+    private accessor _ghost;
+    /** Bumped when the canvas selection changes, so the rows repaint. */
+    private accessor _selectionRevision;
+    private _drag;
+    /** The rows of the last render, top first: what a drag hit-tests. */
+    private _visibleRows;
+    /** The sibling lists before the filter: what a drop is computed in. */
+    private _lists;
+    /** A drag ends with a click on the row it started on; that click is not one. */
+    private _swallowNextClick;
+    get paneOpen(): boolean;
+    private get _gfx();
+    private _setOpen;
+    /** Show the pane. Called through `SelectionPaneProvider` only. */
+    openPanel(): void;
+    /** Put the pane away. Writes nothing but its own state. */
+    readonly closePanel: () => void;
+    private readonly _swallow;
+    private readonly _onHostKeydown;
+    /** Same capture as the catalogue: a wheel over the pane scrolls the pane. */
+    private readonly _onHostWheel;
+    private _wire;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _highlight;
+    private _clearHighlight;
+    private _select;
+    private _run;
+    /**
+     * The visible rows of `nodes` (the tree as filtered), with `full` the tree
+     * before the filter: what tells a layer emptied by the filter from an empty
+     * one.
+     */
+    private _rows;
+    private _toggleCollapsed;
+    private _onRowClick;
+    private _onRowDblClick;
+    /** A layer's name — the default layer's seed while it has no record. */
+    private _layerName;
+    private _onLockClick;
+    /**
+     * Hide this row for this viewer, or show it again. Not refused on a
+     * read-only document: nothing reaches the document (ADR 0031 §8).
+     */
+    private _onEyeClick;
+    /**
+     * The row's menu: the actions that write to the DOCUMENT for every viewer,
+     * kept off the row's quick toggles so they are never one stray click away.
+     * "Hide for everyone" is painted with the theme warning tokens (ADR 0031,
+     * resolved at acceptance). A read-only document offers none of them, so the
+     * menu does not open there.
+     */
+    private _openRowMenu;
+    /**
+     * "Hide for everyone" (or "Show for everyone"), in a row's or a layer's
+     * menu alike: painted with the warning tokens, and written on the element
+     * or on the layer's record (`hidden: true`) depending on the row.
+     */
+    private _hideForEveryoneItem;
+    /**
+     * A layer's menu (ADR 0031 stage 7): "Hide for everyone" — `hidden: true`
+     * on the record, painted with the warning tokens like the element entry —
+     * and "Delete layer", which takes the members with it in one undo step.
+     * The default layer cannot be deleted, so its menu has no such entry.
+     */
+    private _openLayerMenu;
+    private _onRowContextMenu;
+    private _commitRename;
+    private readonly _onRenameKeydown;
+    private _onRowPointerDown;
+    /**
+     * Which model stands for a row in the dragged row's own stack — the stack
+     * `canvas.element.reorder` restacks it in, the models sharing its raw
+     * `group` — or `undefined` for a row outside it. A frame's members paint
+     * together right above the frame, so for a loose element they stand for
+     * their frame. `null` when the dragged row cannot be restacked at all (a
+     * mindmap node moves with its mindmap).
+     */
+    private _stackOf;
+    /** Where a release at `(clientX, clientY)` would land the dragged row. */
+    private _dropAt;
+    private _moveGhost;
+    private readonly _onDocumentPointerMove;
+    /** A canvas row picked up is selected, as the frame panel selects a card. */
+    private _pickUp;
+    private readonly _onDocumentPointerUp;
+    /**
+     * One write per gesture, through the command: `layer` for a drop into a
+     * layer, one `index` for a slot. The command writes nothing when the slot
+     * is where the row already is, and a refused drop never reaches it.
+     */
+    private _commitDrop;
+    private _endDrag;
+    private _renderGhost;
+    private _renderDropIndicator;
+    private _filterName;
+    private _filterWording;
+    private readonly _openFilterMenu;
+    /**
+     * A user layer's row (ADR 0031 §2): its name, renamed in place with a
+     * double-click; a click makes it the active layer; collapsible like a
+     * group (UI state, never stored); dragged among the layers to reorder, and
+     * the drop target of a canvas row dragged onto it. The default layer's row
+     * is drawn the same before it has a record (ADR 0031 amendments): its
+     * rename or "hide for everyone" is what records it.
+     */
+    private _renderLayerRow;
+    /** A row's name, or the field that renames it in place. */
+    private _renderName;
+    /** A row's eye: hide it, or the whole layer, for this viewer only. */
+    private _renderEye;
+    private _renderRow;
+    updated(): void;
+    /**
+     * One header action, in the frame panel's icon button
+     * (`header/frame-panel-header.ts`): a 20px glyph in `edgeless-tool-icon-button`,
+     * secondary until hovered, its tooltip above it, a wash while active.
+     */
+    private _renderHeadButton;
+    /**
+     * "New layer": create it, then open its name for editing — the frame
+     * panel's inline title editor, as a double-click does — so the creation is
+     * unmistakable even under a filter (ADR 0031, amendments).
+     */
+    private readonly _createLayer;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export declare const edgelessSelectionPaneWidget: import("../../store/index.js").ExtensionType;