refactor(editor): gfx text package (#10738)

blocksuite/affine/gfx/text/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@blocksuite/affine-gfx-text",
+  "description": "Gfx text for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-edgeless-text": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.1",
+    "@blocksuite/inline": "workspace:*",
+    "@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",
+    "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/text/src/edgeless-text-editor.ts

@@ -0,0 +1,420 @@
+import {
+  EdgelessCRUDIdentifier,
+  getSurfaceBlock,
+  TextUtils,
+} from '@blocksuite/affine-block-surface';
+import type { TextElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { getSelectedRect } from '@blocksuite/affine-shared/utils';
+import {
+  type BlockStdScope,
+  RANGE_SYNC_EXCLUDE_ATTR,
+  ShadowlessElement,
+  stdContext,
+} from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { Bound, toRadian, Vec } from '@blocksuite/global/gfx';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { consume } from '@lit/context';
+import { css, html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class EdgelessTextEditor extends WithDisposable(ShadowlessElement) {
+  get crud() {
+    return this.std.get(EdgelessCRUDIdentifier);
+  }
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  static BORDER_WIDTH = 1;
+
+  static PADDING_HORIZONTAL = 10;
+
+  static PADDING_VERTICAL = 6;
+
+  static PLACEHOLDER_TEXT = 'Type from here';
+
+  static override styles = css`
+    .edgeless-text-editor {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      transform-origin: left top;
+      font-kerning: none;
+      border: ${EdgelessTextEditor.BORDER_WIDTH}px solid
+        var(--affine-primary-color, #1e96eb);
+      border-radius: 4px;
+      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      padding: ${EdgelessTextEditor.PADDING_VERTICAL}px
+        ${EdgelessTextEditor.PADDING_HORIZONTAL}px;
+      overflow: visible;
+    }
+
+    .edgeless-text-editor .inline-editor {
+      white-space: pre-wrap !important;
+      outline: none;
+    }
+
+    .edgeless-text-editor .inline-editor span {
+      word-break: normal !important;
+      overflow-wrap: anywhere !important;
+    }
+
+    .edgeless-text-editor-placeholder {
+      pointer-events: none;
+      color: var(--affine-text-disable-color);
+      white-space: nowrap;
+    }
+  `;
+
+  private _isComposition = false;
+
+  private _keeping = false;
+
+  private readonly _updateRect = () => {
+    const element = this.element;
+
+    if (!element || !this.inlineEditorContainer) return;
+
+    const newWidth = this.inlineEditorContainer.scrollWidth;
+    const newHeight = this.inlineEditorContainer.scrollHeight;
+    const bound = new Bound(element.x, element.y, newWidth, newHeight);
+    const { x, y, w, h, rotate } = element;
+
+    switch (element.textAlign) {
+      case 'left':
+        {
+          const newPos = this.getCoordsOnLeftAlign(
+            {
+              x,
+              y,
+              w,
+              h,
+              r: toRadian(rotate),
+            },
+            newWidth,
+            newHeight
+          );
+
+          bound.x = newPos.x;
+          bound.y = newPos.y;
+        }
+        break;
+      case 'center':
+        {
+          const newPos = this.getCoordsOnCenterAlign(
+            {
+              x,
+              y,
+              w,
+              h,
+              r: toRadian(rotate),
+            },
+            newWidth,
+            newHeight
+          );
+
+          bound.x = newPos.x;
+          bound.y = newPos.y;
+        }
+        break;
+      case 'right':
+        {
+          const newPos = this.getCoordsOnRightAlign(
+            {
+              x,
+              y,
+              w,
+              h,
+              r: toRadian(rotate),
+            },
+            newWidth,
+            newHeight
+          );
+
+          bound.x = newPos.x;
+          bound.y = newPos.y;
+        }
+        break;
+    }
+
+    this.crud.updateElement(element.id, {
+      xywh: bound.serialize(),
+    });
+  };
+
+  get inlineEditor() {
+    return this.richText.inlineEditor;
+  }
+
+  get inlineEditorContainer() {
+    return this.inlineEditor?.rootElement;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (!this.element) {
+      console.error('text element is not set.');
+      return;
+    }
+
+    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+  }
+
+  override firstUpdated(): void {
+    const element = this.element;
+    const dispatcher = this.std.event;
+    const surface = getSurfaceBlock(this.std.store);
+    if (!surface) {
+      console.error('surface block is not found.');
+      return;
+    }
+
+    this.updateComplete
+      .then(() => {
+        if (!this.inlineEditor) return;
+        this.inlineEditor.slots.renderComplete.on(() => {
+          this._updateRect();
+          this.requestUpdate();
+        });
+
+        this.disposables.add(
+          surface.elementUpdated.on(({ id }) => {
+            if (id === element.id) this.requestUpdate();
+          })
+        );
+
+        this.disposables.add(
+          this.gfx.viewport.viewportUpdated.on(() => {
+            this.requestUpdate();
+          })
+        );
+
+        this.disposables.add(dispatcher.add('click', () => true));
+        this.disposables.add(dispatcher.add('doubleClick', () => true));
+
+        this.disposables.add(() => {
+          element.display = true;
+
+          if (element.text.length === 0) {
+            this.crud.deleteElements([element]);
+          }
+
+          this.gfx.selection.set({
+            elements: [],
+            editing: false,
+          });
+        });
+
+        if (!this.inlineEditorContainer) return;
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'blur',
+          () => !this._keeping && this.remove()
+        );
+
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'compositionstart',
+          () => {
+            this._isComposition = true;
+            this.requestUpdate();
+          }
+        );
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'compositionend',
+          () => {
+            this._isComposition = false;
+            this.requestUpdate();
+          }
+        );
+
+        element.display = false;
+      })
+      .catch(console.error);
+  }
+
+  getContainerOffset() {
+    const { PADDING_VERTICAL, PADDING_HORIZONTAL, BORDER_WIDTH } =
+      EdgelessTextEditor;
+    return `-${PADDING_HORIZONTAL + BORDER_WIDTH}px, -${
+      PADDING_VERTICAL + BORDER_WIDTH
+    }px`;
+  }
+
+  getCoordsOnCenterAlign(
+    rect: { w: number; h: number; r: number; x: number; y: number },
+    w1: number,
+    h1: number
+  ): { x: number; y: number } {
+    const centerX = rect.x + rect.w / 2;
+    const centerY = rect.y + rect.h / 2;
+
+    let deltaXPrime = 0;
+    let deltaYPrime = (-rect.h / 2) * Math.cos(rect.r);
+
+    const vX = centerX + deltaXPrime;
+    const vY = centerY + deltaYPrime;
+
+    deltaXPrime = 0;
+    deltaYPrime = (-h1 / 2) * Math.cos(rect.r);
+
+    const newCenterX = vX - deltaXPrime;
+    const newCenterY = vY - deltaYPrime;
+
+    return { x: newCenterX - w1 / 2, y: newCenterY - h1 / 2 };
+  }
+
+  getCoordsOnLeftAlign(
+    rect: { w: number; h: number; r: number; x: number; y: number },
+    w1: number,
+    h1: number
+  ): { x: number; y: number } {
+    const cX = rect.x + rect.w / 2;
+    const cY = rect.y + rect.h / 2;
+
+    let deltaXPrime =
+      (-rect.w / 2) * Math.cos(rect.r) + (rect.h / 2) * Math.sin(rect.r);
+    let deltaYPrime =
+      (-rect.w / 2) * Math.sin(rect.r) - (rect.h / 2) * Math.cos(rect.r);
+
+    const vX = cX + deltaXPrime;
+    const vY = cY + deltaYPrime;
+
+    deltaXPrime = (-w1 / 2) * Math.cos(rect.r) + (h1 / 2) * Math.sin(rect.r);
+    deltaYPrime = (-w1 / 2) * Math.sin(rect.r) - (h1 / 2) * Math.cos(rect.r);
+
+    const newCenterX = vX - deltaXPrime;
+    const newCenterY = vY - deltaYPrime;
+
+    return { x: newCenterX - w1 / 2, y: newCenterY - h1 / 2 };
+  }
+
+  getCoordsOnRightAlign(
+    rect: { w: number; h: number; r: number; x: number; y: number },
+    w1: number,
+    h1: number
+  ): { x: number; y: number } {
+    const centerX = rect.x + rect.w / 2;
+    const centerY = rect.y + rect.h / 2;
+
+    let deltaXPrime =
+      (rect.w / 2) * Math.cos(rect.r) - (-rect.h / 2) * Math.sin(rect.r);
+    let deltaYPrime =
+      (rect.w / 2) * Math.sin(rect.r) + (-rect.h / 2) * Math.cos(rect.r);
+
+    const vX = centerX + deltaXPrime;
+    const vY = centerY + deltaYPrime;
+
+    deltaXPrime = (w1 / 2) * Math.cos(rect.r) - (-h1 / 2) * Math.sin(rect.r);
+    deltaYPrime = (w1 / 2) * Math.sin(rect.r) + (-h1 / 2) * Math.cos(rect.r);
+
+    const newCenterX = vX - deltaXPrime;
+    const newCenterY = vY - deltaYPrime;
+
+    return { x: newCenterX - w1 / 2, y: newCenterY - h1 / 2 };
+  }
+
+  override async getUpdateComplete(): Promise<boolean> {
+    const result = await super.getUpdateComplete();
+    await this.richText?.updateComplete;
+    return result;
+  }
+
+  getVisualPosition(element: TextElementModel) {
+    const { x, y, w, h, rotate } = element;
+    return Vec.rotWith([x, y], [x + w / 2, y + h / 2], toRadian(rotate));
+  }
+
+  override render() {
+    const {
+      text,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      fontStyle,
+      textAlign,
+      rotate,
+      hasMaxWidth,
+      w,
+    } = this.element;
+    const lineHeight = TextUtils.getLineHeight(
+      fontFamily,
+      fontSize,
+      fontWeight
+    );
+    const rect = getSelectedRect([this.element]);
+
+    const { translateX, translateY, zoom } = this.gfx.viewport;
+    const [visualX, visualY] = this.getVisualPosition(this.element);
+    const containerOffset = this.getContainerOffset();
+    const transformOperation = [
+      `translate(${translateX}px, ${translateY}px)`,
+      `translate(${visualX * zoom}px, ${visualY * zoom}px)`,
+      `scale(${zoom})`,
+      `rotate(${rotate}deg)`,
+      `translate(${containerOffset})`,
+    ];
+
+    const isEmpty = !text.length && !this._isComposition;
+    const color = this.std
+      .get(ThemeProvider)
+      .generateColorProperty(this.element.color, '#000000');
+
+    return html`<div
+      style=${styleMap({
+        transform: transformOperation.join(' '),
+        minWidth: hasMaxWidth ? `${rect.width}px` : 'none',
+        maxWidth: hasMaxWidth ? `${w}px` : 'none',
+        fontFamily: TextUtils.wrapFontFamily(fontFamily),
+        fontSize: `${fontSize}px`,
+        fontWeight,
+        fontStyle,
+        color,
+        textAlign,
+        lineHeight: `${lineHeight}px`,
+        boxSizing: 'content-box',
+      })}
+      class="edgeless-text-editor"
+    >
+      <rich-text
+        .yText=${text}
+        .enableFormat=${false}
+        .enableAutoScrollHorizontally=${false}
+        style=${isEmpty
+          ? styleMap({
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              padding: `${EdgelessTextEditor.PADDING_VERTICAL}px
+        ${EdgelessTextEditor.PADDING_HORIZONTAL}px`,
+            })
+          : nothing}
+      ></rich-text>
+      ${isEmpty
+        ? html`<span class="edgeless-text-editor-placeholder">
+            Type from here
+          </span>`
+        : nothing}
+    </div>`;
+  }
+
+  setKeeping(keeping: boolean) {
+    this._keeping = keeping;
+  }
+
+  @consume({ context: stdContext })
+  accessor std!: BlockStdScope;
+
+  @property({ attribute: false })
+  accessor element!: TextElementModel;
+
+  @query('rich-text')
+  accessor richText!: RichText;
+}

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

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

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

@@ -0,0 +1,3 @@
+export * from './edgeless-text-editor';
+export * from './mount-text-editor';
+export * from './tool';

blocksuite/affine/gfx/text/src/mount-text-editor.ts

@@ -0,0 +1,77 @@
+import {
+  CanvasElementType,
+  EdgelessCRUDIdentifier,
+  type IModelCoord,
+  TextUtils,
+} from '@blocksuite/affine-block-surface';
+import { TextElementModel } from '@blocksuite/affine-model';
+import type { BlockComponent, PointerEventState } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/gfx';
+import * as Y from 'yjs';
+
+import { EdgelessTextEditor } from './edgeless-text-editor';
+
+export function mountTextElementEditor(
+  textElement: TextElementModel,
+  edgeless: BlockComponent,
+  focusCoord?: IModelCoord
+) {
+  let cursorIndex = textElement.text.length;
+  if (focusCoord) {
+    cursorIndex = Math.min(
+      TextUtils.getCursorByCoord(textElement, focusCoord),
+      cursorIndex
+    );
+  }
+
+  const textEditor = new EdgelessTextEditor();
+  textEditor.element = textElement;
+
+  edgeless.append(textEditor);
+  textEditor.updateComplete
+    .then(() => {
+      textEditor.inlineEditor?.focusIndex(cursorIndex);
+    })
+    .catch(console.error);
+
+  const gfx = edgeless.std.get(GfxControllerIdentifier);
+
+  // @ts-expect-error TODO: refactor gfx tool
+  gfx.tool.setTool('default');
+  gfx.selection.set({
+    elements: [textElement.id],
+    editing: true,
+  });
+}
+
+/**
+ * @deprecated
+ *
+ * Canvas Text has been deprecated
+ */
+export function addText(edgeless: BlockComponent, event: PointerEventState) {
+  const gfx = edgeless.std.get(GfxControllerIdentifier);
+  const crud = edgeless.std.get(EdgelessCRUDIdentifier);
+  const [x, y] = gfx.viewport.toModelCoord(event.x, event.y);
+  const selected = gfx.getElementByPoint(x, y);
+
+  if (!selected) {
+    const [modelX, modelY] = gfx.viewport.toModelCoord(event.x, event.y);
+
+    const id = edgeless.std
+      .get(EdgelessCRUDIdentifier)
+      .addElement(CanvasElementType.TEXT, {
+        xywh: new Bound(modelX, modelY, 32, 32).serialize(),
+        text: new Y.Text(),
+      });
+    if (!id) return;
+
+    edgeless.doc.captureSync();
+    const textElement = crud.getElementById(id);
+    if (!textElement) return;
+    if (textElement instanceof TextElementModel) {
+      mountTextElementEditor(textElement, edgeless);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
+import type { TextElementModel } from '@blocksuite/affine-model';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import type { PointerEventState } from '@blocksuite/block-std';
+import { BaseTool, type GfxController } from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/gfx';
+import * as Y from 'yjs';
+
+import { mountTextElementEditor } from './mount-text-editor';
+
+function addText(gfx: GfxController, event: PointerEventState) {
+  const [x, y] = gfx.viewport.toModelCoord(event.x, event.y);
+  const selected = gfx.getElementByPoint(x, y);
+
+  if (!selected) {
+    const [modelX, modelY] = gfx.viewport.toModelCoord(event.x, event.y);
+
+    if (!gfx.surface) {
+      return;
+    }
+
+    const id = gfx.surface.addElement({
+      type: 'text',
+      xywh: new Bound(modelX, modelY, 32, 32).serialize(),
+      text: new Y.Text(),
+    });
+    gfx.doc.captureSync();
+    const textElement = gfx.getElementById(id) as TextElementModel;
+    const edgelessView = gfx.std.view.getBlock(gfx.std.store.root!.id);
+    if (!edgelessView) {
+      console.error('edgeless view is not found.');
+      return;
+    }
+    mountTextElementEditor(textElement, edgelessView);
+  }
+}
+
+export class TextTool extends BaseTool {
+  static override toolName: string = 'text';
+
+  override click(e: PointerEventState): void {
+    const textFlag = this.gfx.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_edgeless_text');
+
+    if (textFlag) {
+      const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
+      this.gfx.std.command.exec(insertEdgelessTextCommand, { x, y });
+      // @ts-expect-error TODO: refactor gfx tool
+      this.gfx.tool.setTool('default');
+    } else {
+      addText(this.gfx, e);
+    }
+
+    this.gfx.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+      control: 'canvas:draw',
+      page: 'whiteboard editor',
+      module: 'toolbar',
+      segment: 'toolbar',
+      type: 'text',
+    });
+  }
+}
+
+declare module '@blocksuite/block-std/gfx' {
+  interface GfxToolsMap {
+    text: TextTool;
+  }
+}

blocksuite/affine/gfx/text/tsconfig.json

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