feat(editor): command for ungroup and group (#11116)

blocksuite/affine/gfx/group/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-gfx-group",
+  "description": "Gfx group for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
+    "@blocksuite/store": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

blocksuite/affine/gfx/group/src/command/group-api.ts

@@ -0,0 +1,137 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  type GroupElementModel,
+  MindmapElementModel,
+} from '@blocksuite/affine-model';
+import type { Command } from '@blocksuite/block-std';
+import {
+  GfxControllerIdentifier,
+  type GfxModel,
+} from '@blocksuite/block-std/gfx';
+
+export const createGroupCommand: Command<
+  { elements: GfxModel[] | string[] },
+  { groupId: string }
+> = (ctx, next) => {
+  const { std, elements } = ctx;
+  const gfx = std.get(GfxControllerIdentifier);
+  const crud = std.get(EdgelessCRUDIdentifier);
+
+  const groups = gfx.layer.canvasElements.filter(
+    el => el.type === 'group'
+  ) as GroupElementModel[];
+  const groupId = crud.addElement('group', {
+    children: elements.reduce(
+      (pre, el) => {
+        const id = typeof el === 'string' ? el : el.id;
+        pre[id] = true;
+        return pre;
+      },
+      {} as Record<string, true>
+    ),
+    title: `Group ${groups.length + 1}`,
+  });
+  if (!groupId) {
+    return;
+  }
+
+  next({ groupId });
+};
+
+export const createGroupFromSelectedCommand: Command<
+  {},
+  { groupId: string }
+> = (ctx, next) => {
+  const { std } = ctx;
+  const gfx = std.get(GfxControllerIdentifier);
+  const { selection, surface } = gfx;
+
+  if (!surface) {
+    return;
+  }
+
+  if (
+    selection.selectedElements.length === 0 ||
+    !selection.selectedElements.every(
+      element =>
+        element.group === selection.firstElement.group &&
+        !(element.group instanceof MindmapElementModel)
+    )
+  ) {
+    return;
+  }
+
+  const parent = selection.firstElement.group as GroupElementModel;
+
+  if (parent !== null) {
+    selection.selectedElements.forEach(element => {
+      // oxlint-disable-next-line unicorn/prefer-dom-node-remove
+      parent.removeChild(element);
+    });
+  }
+
+  const [_, result] = std.command.exec(createGroupCommand, {
+    elements: selection.selectedElements,
+  });
+  if (!result.groupId) {
+    return;
+  }
+  const group = surface.getElementById(result.groupId);
+
+  if (parent !== null && group) {
+    parent.addChild(group);
+  }
+
+  selection.set({
+    editing: false,
+    elements: [result.groupId],
+  });
+
+  next({ groupId: result.groupId });
+};
+
+export const ungroupCommand: Command<{ group: GroupElementModel }, {}> = (
+  ctx,
+  next
+) => {
+  const { std, group } = ctx;
+  const gfx = std.get(GfxControllerIdentifier);
+  const { selection } = gfx;
+  const parent = group.group as GroupElementModel;
+  const elements = group.childElements;
+
+  if (group instanceof MindmapElementModel) {
+    return;
+  }
+
+  if (parent !== null) {
+    // oxlint-disable-next-line unicorn/prefer-dom-node-remove
+    parent.removeChild(group);
+  }
+
+  elements.forEach(element => {
+    // oxlint-disable-next-line unicorn/prefer-dom-node-remove
+    group.removeChild(element);
+  });
+
+  // keep relative index order of group children after ungroup
+  elements
+    .sort((a, b) => gfx.layer.compare(a, b))
+    .forEach(element => {
+      std.store.transact(() => {
+        element.index = gfx.layer.generateIndex();
+      });
+    });
+
+  if (parent !== null) {
+    elements.forEach(element => {
+      parent.addChild(element);
+    });
+  }
+
+  selection.set({
+    editing: false,
+    elements: elements.map(ele => ele.id),
+  });
+  next();
+};

blocksuite/affine/gfx/group/src/command/index.ts

@@ -0,0 +1 @@
+export * from './group-api';

blocksuite/affine/gfx/group/src/effects.ts

@@ -0,0 +1,14 @@
+import { EdgelessGroupTitleEditor } from './text/edgeless-group-title-editor';
+
+export function effects() {
+  customElements.define(
+    'edgeless-group-title-editor',
+    EdgelessGroupTitleEditor
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-group-title-editor': EdgelessGroupTitleEditor;
+  }
+}

blocksuite/affine/gfx/group/src/index.ts

@@ -0,0 +1,3 @@
+export * from './command';
+export * from './text/text';
+export * from './toolbar/config';

blocksuite/affine/gfx/group/src/text/edgeless-group-title-editor.ts

@@ -0,0 +1,152 @@
+import {
+  GROUP_TITLE_FONT_SIZE,
+  GROUP_TITLE_OFFSET,
+  GROUP_TITLE_PADDING,
+} from '@blocksuite/affine-block-surface';
+import type { GroupElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
+import { type BlockComponent, ShadowlessElement } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/block-std/inline';
+import { Bound } from '@blocksuite/global/gfx';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class EdgelessGroupTitleEditor extends WithDisposable(
+  ShadowlessElement
+) {
+  get inlineEditor() {
+    return this.richText.inlineEditor;
+  }
+
+  get inlineEditorContainer() {
+    return this.inlineEditor?.rootElement;
+  }
+
+  get gfx() {
+    return this.edgeless.std.get(GfxControllerIdentifier);
+  }
+
+  get selection() {
+    return this.gfx.selection;
+  }
+
+  private _unmount() {
+    // dispose in advance to avoid execute `this.remove()` twice
+    this.disposables.dispose();
+    this.group.showTitle = true;
+    this.selection.set({
+      elements: [this.group.id],
+      editing: false,
+    });
+    this.remove();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+  }
+
+  override firstUpdated(): void {
+    const dispatcher = this.edgeless.std.event;
+
+    this.updateComplete
+      .then(() => {
+        if (!this.inlineEditor) return;
+        this.inlineEditor.selectAll();
+
+        this.group.showTitle = false;
+
+        this.inlineEditor.slots.renderComplete.subscribe(() => {
+          this.requestUpdate();
+        });
+
+        this.disposables.add(
+          dispatcher.add('keyDown', ctx => {
+            const state = ctx.get('keyboardState');
+            if (state.raw.key === 'Enter' && !state.raw.isComposing) {
+              this._unmount();
+              return true;
+            }
+            requestAnimationFrame(() => {
+              this.requestUpdate();
+            });
+            return false;
+          })
+        );
+        this.disposables.add(
+          this.gfx.viewport.viewportUpdated.subscribe(() => {
+            this.requestUpdate();
+          })
+        );
+
+        this.disposables.add(dispatcher.add('click', () => true));
+        this.disposables.add(dispatcher.add('doubleClick', () => true));
+
+        if (!this.inlineEditorContainer) return;
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'blur',
+          () => {
+            this._unmount();
+          }
+        );
+      })
+      .catch(console.error);
+  }
+
+  override async getUpdateComplete(): Promise<boolean> {
+    const result = await super.getUpdateComplete();
+    await this.richText?.updateComplete;
+    return result;
+  }
+
+  override render() {
+    if (!this.group.externalXYWH) {
+      console.error('group.externalXYWH is not set');
+      return nothing;
+    }
+    const viewport = this.gfx.viewport;
+    const bound = Bound.deserialize(this.group.externalXYWH);
+    const [x, y] = viewport.toViewCoord(bound.x, bound.y);
+
+    const inlineEditorStyle = styleMap({
+      transformOrigin: 'top left',
+      borderRadius: '2px',
+      width: 'fit-content',
+      maxHeight: '30px',
+      height: 'fit-content',
+      padding: `${GROUP_TITLE_PADDING[1]}px ${GROUP_TITLE_PADDING[0]}px`,
+      fontSize: GROUP_TITLE_FONT_SIZE + 'px',
+      position: 'absolute',
+      left: x + 'px',
+      top: `${y - GROUP_TITLE_OFFSET + 2}px`,
+      minWidth: '8px',
+      fontFamily: 'var(--affine-font-family)',
+      color: 'var(--affine-text-primary-color)',
+      background: 'var(--affine-white-10)',
+      outline: 'none',
+      zIndex: '1',
+      border: `1px solid
+        var(--affine-primary-color)`,
+      boxShadow: 'var(--affine-active-shadow)',
+    });
+    return html`<rich-text
+      .yText=${this.group.title}
+      .enableFormat=${false}
+      .enableAutoScrollHorizontally=${false}
+      style=${inlineEditorStyle}
+    ></rich-text>`;
+  }
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor group!: GroupElementModel;
+
+  @query('rich-text')
+  accessor richText!: RichText;
+}

blocksuite/affine/gfx/group/src/text/text.ts

@@ -0,0 +1,34 @@
+import type { GroupElementModel } from '@blocksuite/affine-model';
+import type { BlockComponent } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+
+import { EdgelessGroupTitleEditor } from './edgeless-group-title-editor';
+
+export function mountGroupTitleEditor(
+  group: GroupElementModel,
+  edgeless: BlockComponent
+) {
+  const mountElm = edgeless.querySelector('.edgeless-mount-point');
+  if (!mountElm) {
+    throw new BlockSuiteError(
+      ErrorCode.ValueNotExists,
+      "edgeless block's mount point does not exist"
+    );
+  }
+
+  const gfx = edgeless.std.get(GfxControllerIdentifier);
+
+  // @ts-expect-error FIXME: resolve after gfx tool refactor
+  gfx.tool.setTool('default');
+  gfx.selection.set({
+    elements: [group.id],
+    editing: true,
+  });
+
+  const groupEditor = new EdgelessGroupTitleEditor();
+  groupEditor.group = group;
+  groupEditor.edgeless = edgeless;
+
+  mountElm.append(groupEditor);
+}

blocksuite/affine/gfx/group/src/toolbar/config.ts

@@ -0,0 +1,105 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  GroupElementModel,
+  NoteBlockModel,
+  NoteBlockSchema,
+  NoteDisplayMode,
+  SurfaceRefBlockSchema,
+} from '@blocksuite/affine-model';
+import {
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import { getRootBlock } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/gfx';
+import { EditIcon, PageIcon, UngroupIcon } from '@blocksuite/icons/lit';
+
+import { ungroupCommand } from '../command';
+import { mountGroupTitleEditor } from '../text/text';
+
+export const groupToolbarConfig = {
+  actions: [
+    {
+      id: 'a.insert-into-page',
+      label: 'Insert into Page',
+      showLabel: true,
+      tooltip: 'Insert into Page',
+      icon: PageIcon(),
+      when: ctx => ctx.getSurfaceModelsByType(GroupElementModel).length === 1,
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(GroupElementModel);
+        if (!model) return;
+
+        const rootModel = ctx.store.root;
+        if (!rootModel) return;
+
+        const { id: groupId, xywh } = model;
+        let lastNoteId = rootModel.children
+          .filter(
+            note =>
+              matchModels(note, [NoteBlockModel]) &&
+              note.props.displayMode !== NoteDisplayMode.EdgelessOnly
+          )
+          .pop()?.id;
+
+        if (!lastNoteId) {
+          const bounds = Bound.deserialize(xywh);
+          bounds.y += bounds.h;
+          bounds.h = DEFAULT_NOTE_HEIGHT;
+
+          lastNoteId = ctx.store.addBlock(
+            NoteBlockSchema.model.flavour,
+            { xywh: bounds.serialize() },
+            rootModel.id
+          );
+        }
+
+        ctx.store.addBlock(
+          SurfaceRefBlockSchema.model.flavour,
+          { reference: groupId, refFlavour: 'group' },
+          lastNoteId
+        );
+
+        toast(ctx.host, 'Group has been inserted into doc');
+      },
+    },
+    {
+      id: 'b.rename',
+      tooltip: 'Rename',
+      icon: EditIcon(),
+      when: ctx => ctx.getSurfaceModelsByType(GroupElementModel).length === 1,
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(GroupElementModel);
+        if (!model) return;
+
+        const rootBlock = getRootBlock(ctx);
+        if (!rootBlock) return;
+
+        mountGroupTitleEditor(model, rootBlock);
+      },
+    },
+    {
+      id: 'b.ungroup',
+      tooltip: 'Ungroup',
+      icon: UngroupIcon(),
+      run(ctx) {
+        const models = ctx.getSurfaceModelsByType(GroupElementModel);
+        if (!models.length) return;
+
+        for (const model of models) {
+          ctx.command.exec(ungroupCommand, { group: model });
+        }
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(GroupElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const groupToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:group'),
+  config: groupToolbarConfig,
+});

blocksuite/affine/gfx/group/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/store" }
+  ]
+}