snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/widgets/frame-title/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@blocksuite/affine-widget-frame-title",
+  "description": "Affine frame title widget.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/std": "workspace:*",
+    "@lit/context": "^1.1.2",
+    "@toeverything/theme": "^1.1.23",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/widgets/frame-title/src/affine-frame-title-widget.ts

@@ -0,0 +1,21 @@
+import { type FrameBlockModel } from '@blocksuite/affine-model';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
+import { html } from 'lit';
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+export const AFFINE_FRAME_TITLE_WIDGET = 'affine-frame-title-widget';
+
+export class AffineFrameTitleWidget extends WidgetComponent<FrameBlockModel> {
+  override render() {
+    return html`<affine-frame-title
+      .model=${this.model}
+      data-id=${this.model.id}
+    ></affine-frame-title>`;
+  }
+}
+
+export const frameTitleWidget = WidgetViewExtension(
+  'affine:frame',
+  AFFINE_FRAME_TITLE_WIDGET,
+  literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`
+);

blocksuite/affine/widgets/frame-title/src/edgeless-frame-title-editor.ts

@@ -0,0 +1,185 @@
+import { FrameBlockModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
+import { Bound } from '@blocksuite/global/gfx';
+import { WithDisposable } from '@blocksuite/global/lit';
+import { type BlockComponent, ShadowlessElement } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import {
+  AFFINE_FRAME_TITLE_WIDGET,
+  type AffineFrameTitleWidget,
+} from './affine-frame-title-widget';
+import type { AffineFrameTitle } from './frame-title';
+import { frameTitleStyleVars } from './styles';
+
+export class EdgelessFrameTitleEditor extends WithDisposable(
+  ShadowlessElement
+) {
+  static override styles = css`
+    .frame-title-editor {
+      display: flex;
+      align-items: center;
+      transform-origin: top left;
+      border-radius: 4px;
+      width: fit-content;
+      padding: 0 4px;
+      outline: none;
+      z-index: 1;
+      border: 1px solid var(--affine-primary-color);
+      box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.3);
+      overflow: hidden;
+      font-family: var(--affine-font-family);
+    }
+  `;
+
+  get editorHost() {
+    return this.edgeless.host;
+  }
+
+  get inlineEditor() {
+    return this.richText?.inlineEditor;
+  }
+
+  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.selection.set({
+      elements: [],
+      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.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.inlineEditor.rootElement) return;
+        this.disposables.addFromEvent(
+          this.inlineEditor.rootElement,
+          'blur',
+          () => {
+            this._unmount();
+          }
+        );
+      })
+      .catch(console.error);
+  }
+
+  override async getUpdateComplete(): Promise<boolean> {
+    const result = await super.getUpdateComplete();
+    await this.richText?.updateComplete;
+    return result;
+  }
+
+  override render() {
+    const rootBlockId = this.editorHost.store.root?.id;
+    if (!rootBlockId) return nothing;
+
+    const viewport = this.gfx.viewport;
+    const bound = Bound.deserialize(this.frameModel.xywh);
+    const [x, y] = viewport.toViewCoord(bound.x, bound.y);
+    const isInner = this.gfx.grid.has(
+      this.frameModel.elementBound,
+      true,
+      true,
+      model => model !== this.frameModel && model instanceof FrameBlockModel
+    );
+
+    const frameTitleWidget = this.edgeless.std.view.getWidget(
+      AFFINE_FRAME_TITLE_WIDGET,
+      this.frameModel.id
+    ) as AffineFrameTitleWidget | null;
+
+    if (!frameTitleWidget) return nothing;
+
+    const frameTitle =
+      frameTitleWidget.querySelector<AffineFrameTitle>('affine-frame-title');
+
+    const colors = frameTitle?.colors ?? {
+      background: cssVarV2('edgeless/frame/background/white'),
+      text: 'var(--affine-text-primary-color)',
+    };
+
+    const inlineEditorStyle = styleMap({
+      fontSize: frameTitleStyleVars.fontSize + 'px',
+      position: 'absolute',
+      left: (isInner ? x + 4 : x) + 'px',
+      top: (isInner ? y + 4 : y - (frameTitleStyleVars.height + 8 / 2)) + 'px',
+      minWidth: '8px',
+      height: frameTitleStyleVars.height + 'px',
+      background: colors.background,
+      color: colors.text,
+    });
+
+    const richTextStyle = styleMap({
+      height: 'fit-content',
+    });
+
+    return html`<div class="frame-title-editor" style=${inlineEditorStyle}>
+      <rich-text
+        .yText=${this.frameModel.props.title.yText}
+        .enableFormat=${false}
+        .enableAutoScrollHorizontally=${false}
+        style=${richTextStyle}
+      ></rich-text>
+    </div>`;
+  }
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor frameModel!: FrameBlockModel;
+
+  @query('rich-text')
+  accessor richText: RichText | null = null;
+}

blocksuite/affine/widgets/frame-title/src/effects.ts

@@ -0,0 +1,15 @@
+import {
+  AFFINE_FRAME_TITLE_WIDGET,
+  AffineFrameTitleWidget,
+} from './affine-frame-title-widget.js';
+import { EdgelessFrameTitleEditor } from './edgeless-frame-title-editor.js';
+import { AFFINE_FRAME_TITLE, AffineFrameTitle } from './frame-title.js';
+
+export function effects() {
+  customElements.define(AFFINE_FRAME_TITLE_WIDGET, AffineFrameTitleWidget);
+  customElements.define(AFFINE_FRAME_TITLE, AffineFrameTitle);
+  customElements.define(
+    'edgeless-frame-title-editor',
+    EdgelessFrameTitleEditor
+  );
+}

blocksuite/affine/widgets/frame-title/src/frame-title.ts

@@ -0,0 +1,293 @@
+import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
+import {
+  ColorScheme,
+  FrameBlockModel,
+  isTransparent,
+} from '@blocksuite/affine-model';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { on } from '@blocksuite/affine-shared/utils';
+import { Bound, type SerializedXYWH } from '@blocksuite/global/gfx';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import {
+  type BlockStdScope,
+  PropTypes,
+  requiredProperties,
+  stdContext,
+} from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import { consume } from '@lit/context';
+import { themeToVar } from '@toeverything/theme/v2';
+import { LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+import { mountFrameTitleEditor } from './mount-frame-title-editor.js';
+import { frameTitleStyle, frameTitleStyleVars } from './styles.js';
+
+export const AFFINE_FRAME_TITLE = 'affine-frame-title';
+
+@requiredProperties({
+  model: PropTypes.instanceOf(FrameBlockModel),
+})
+export class AffineFrameTitle extends SignalWatcher(
+  WithDisposable(LitElement)
+) {
+  static override styles = frameTitleStyle;
+
+  private _cachedHeight = 0;
+
+  private _cachedWidth = 0;
+
+  get colors() {
+    let backgroundColor = this.std
+      .get(ThemeProvider)
+      .getColorValue(this.model.props.background, undefined, true);
+    if (isTransparent(backgroundColor)) {
+      backgroundColor = this.std
+        .get(ThemeProvider)
+        .getCssVariableColor(themeToVar('edgeless/frame/background/white'));
+    }
+
+    const { r, g, b, a } = parseStringToRgba(backgroundColor);
+
+    const theme = this.std.get(ThemeProvider).theme;
+    let textColor: string;
+    {
+      let rPrime, gPrime, bPrime;
+      if (theme === ColorScheme.Light) {
+        rPrime = 1 - a + a * r;
+        gPrime = 1 - a + a * g;
+        bPrime = 1 - a + a * b;
+      } else {
+        rPrime = a * r;
+        gPrime = a * g;
+        bPrime = a * b;
+      }
+
+      // light
+      const L = 0.299 * rPrime + 0.587 * gPrime + 0.114 * bPrime;
+      textColor = L > 0.5 ? 'black' : 'white';
+    }
+
+    return {
+      background: backgroundColor,
+      text: textColor,
+    };
+  }
+
+  get doc() {
+    return this.model.store;
+  }
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  private _isInsideFrame() {
+    return this.gfx.grid.has(
+      this.model.elementBound,
+      true,
+      true,
+      model => model !== this.model && model instanceof FrameBlockModel
+    );
+  }
+
+  private _updateFrameTitleSize() {
+    const { _nestedFrame, _zoom: zoom } = this;
+    const { elementBound } = this.model;
+    const width = this._cachedWidth / zoom;
+    const height = this._cachedHeight / zoom;
+
+    const { nestedFrameOffset } = frameTitleStyleVars;
+    if (width && height) {
+      this.model.externalXYWH = `[${
+        elementBound.x + (_nestedFrame ? nestedFrameOffset / zoom : 0)
+      },${
+        elementBound.y +
+        (_nestedFrame
+          ? nestedFrameOffset / zoom
+          : -(height + nestedFrameOffset / zoom))
+      },${width},${height}]`;
+
+      this.gfx.grid.update(this.model);
+    } else {
+      this.model.externalXYWH = undefined;
+    }
+  }
+
+  private _updateStyle() {
+    if (
+      this._frameTitle.length === 0 ||
+      this._editing ||
+      this.gfx.tool.currentToolName$.value === 'frameNavigator'
+    ) {
+      this.style.display = 'none';
+      return;
+    }
+
+    const model = this.model;
+    const bound = Bound.deserialize(model.xywh);
+
+    const { _zoom: zoom } = this;
+    const { nestedFrameOffset, height } = frameTitleStyleVars;
+
+    const nestedFrame = this._nestedFrame;
+    const maxWidth = nestedFrame
+      ? bound.w * zoom - nestedFrameOffset / zoom
+      : bound.w * zoom;
+    const hidden = height / zoom >= bound.h;
+    const transformOperation = [
+      `translate(0%, ${nestedFrame ? 0 : -100}%)`,
+      `translate(${nestedFrame ? nestedFrameOffset : 0}px, ${
+        nestedFrame ? nestedFrameOffset : -nestedFrameOffset
+      }px)`,
+    ];
+
+    this.style.display = '';
+    this.style.setProperty('--bg-color', this.colors.background);
+    this.style.left = '0px';
+    this.style.top = '0px';
+    this.style.display = hidden ? 'none' : 'flex';
+    this.style.transform = transformOperation.join(' ');
+    this.style.maxWidth = `${maxWidth}px`;
+    this.style.transformOrigin = nestedFrame ? 'top left' : 'bottom left';
+    this.style.color = this.colors.text;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const { _disposables, doc, gfx } = this;
+
+    this._nestedFrame = this._isInsideFrame();
+
+    _disposables.add(
+      doc.slots.blockUpdated.subscribe(payload => {
+        if (
+          (payload.type === 'update' &&
+            payload.props.key === 'xywh' &&
+            doc.getBlock(payload.id)?.model instanceof FrameBlockModel) ||
+          (payload.type === 'add' && payload.flavour === 'affine:frame')
+        ) {
+          this._nestedFrame = this._isInsideFrame();
+        }
+
+        if (
+          payload.type === 'delete' &&
+          payload.model instanceof FrameBlockModel &&
+          payload.model !== this.model
+        ) {
+          this._nestedFrame = this._isInsideFrame();
+        }
+      })
+    );
+
+    _disposables.add(
+      this.model.propsUpdated.subscribe(() => {
+        this._xywh = this.model.xywh;
+        this.requestUpdate();
+      })
+    );
+
+    _disposables.add(
+      gfx.selection.slots.updated.subscribe(() => {
+        this._editing =
+          gfx.selection.selectedIds[0] === this.model.id &&
+          gfx.selection.editing;
+      })
+    );
+
+    _disposables.add(
+      gfx.viewport.viewportUpdated.subscribe(({ zoom }) => {
+        this._zoom = zoom;
+        this.requestUpdate();
+      })
+    );
+
+    _disposables.add(
+      on(this, 'dblclick', () => {
+        const edgeless = this.std.view.getBlock(this.std.store.root?.id || '');
+
+        if (edgeless && !this.model.isLocked()) {
+          mountFrameTitleEditor(this.model, edgeless);
+        } else {
+          this.gfx.selection.set({
+            elements: [this.model.id],
+          });
+        }
+      })
+    );
+
+    this._zoom = gfx.viewport.zoom;
+
+    const updateTitle = () => {
+      this._frameTitle = this.model.props.title.toString().trim();
+    };
+    _disposables.add(() => {
+      this.model.props.title.yText.unobserve(updateTitle);
+    });
+    this.model.props.title.yText.observe(updateTitle);
+
+    this._frameTitle = this.model.props.title.toString().trim();
+    this._xywh = this.model.xywh;
+  }
+
+  override firstUpdated() {
+    this._cachedWidth = this.clientWidth;
+    this._cachedHeight = this.clientHeight;
+    this._updateFrameTitleSize();
+  }
+
+  override render() {
+    this._updateStyle();
+    return this._frameTitle;
+  }
+
+  override updated(_changedProperties: Map<string, unknown>) {
+    if (
+      !this.gfx.viewport.viewportBounds.contains(this.model.elementBound) &&
+      !this.gfx.viewport.viewportBounds.isIntersectWithBound(
+        this.model.elementBound
+      )
+    ) {
+      return;
+    }
+
+    let sizeChanged = false;
+    if (
+      this._cachedWidth === 0 ||
+      this._cachedHeight === 0 ||
+      _changedProperties.has('_frameTitle') ||
+      _changedProperties.has('_nestedFrame') ||
+      _changedProperties.has('_xywh') ||
+      _changedProperties.has('_editing')
+    ) {
+      this._cachedWidth = this.clientWidth;
+      this._cachedHeight = this.clientHeight;
+      sizeChanged = true;
+    }
+    if (sizeChanged || _changedProperties.has('_zoom')) {
+      this._updateFrameTitleSize();
+    }
+  }
+
+  @state()
+  private accessor _editing = false;
+
+  @state()
+  private accessor _frameTitle = '';
+
+  @state()
+  private accessor _nestedFrame = false;
+
+  @state()
+  private accessor _xywh: SerializedXYWH | null = null;
+
+  @state()
+  private accessor _zoom = 1;
+
+  @property({ attribute: false })
+  accessor model!: FrameBlockModel;
+
+  @consume({ context: stdContext })
+  accessor std!: BlockStdScope;
+}

blocksuite/affine/widgets/frame-title/src/index.ts

@@ -0,0 +1,4 @@
+export * from './affine-frame-title-widget.js';
+export * from './edgeless-frame-title-editor.js';
+export * from './mount-frame-title-editor.js';
+export * from './styles.js';

blocksuite/affine/widgets/frame-title/src/mount-frame-title-editor.ts

@@ -0,0 +1,34 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { BlockSuiteError } from '@blocksuite/global/exceptions';
+import type { BlockComponent } from '@blocksuite/std';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+
+import { EdgelessFrameTitleEditor } from './edgeless-frame-title-editor';
+
+export function mountFrameTitleEditor(
+  frame: FrameBlockModel,
+  edgeless: BlockComponent
+) {
+  const mountElm = edgeless.querySelector('.edgeless-mount-point');
+  if (!mountElm) {
+    throw new BlockSuiteError(
+      BlockSuiteError.ErrorCode.ValueNotExists,
+      "edgeless block's mount point does not exist"
+    );
+  }
+
+  const gfx = edgeless.std.get(GfxControllerIdentifier);
+
+  gfx.tool.setTool(DefaultTool);
+  gfx.selection.set({
+    elements: [frame.id],
+    editing: true,
+  });
+
+  const frameEditor = new EdgelessFrameTitleEditor();
+  frameEditor.frameModel = frame;
+  frameEditor.edgeless = edgeless;
+
+  mountElm.append(frameEditor);
+}

blocksuite/affine/widgets/frame-title/src/styles.ts

@@ -0,0 +1,35 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { css } from 'lit';
+
+export const frameTitleStyleVars = {
+  nestedFrameOffset: 4,
+  height: 22,
+  fontSize: 14,
+};
+
+export const frameTitleStyle = css`
+  :host {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    border: 1px solid ${unsafeCSSVarV2('edgeless/frame/border/default')};
+    border-radius: 4px;
+    width: fit-content;
+    height: ${frameTitleStyleVars.height}px;
+    padding: 0px 4px;
+    transform-origin: left bottom;
+    background-color: var(--bg-color);
+
+    font-family: var(--affine-font-family);
+    font-size: ${frameTitleStyleVars.fontSize}px;
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :hover {
+    background-color: color-mix(in srgb, var(--bg-color), #000000 7%);
+  }
+`;

blocksuite/affine/widgets/frame-title/src/view.ts

@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { frameTitleWidget } from './affine-frame-title-widget';
+import { effects } from './effects';
+
+export class FrameTitleViewExtension extends ViewExtensionProvider {
+  override name = 'affine-frame-title-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (context.scope === 'edgeless') {
+      context.register(frameTitleWidget);
+    }
+  }
+}

blocksuite/affine/widgets/frame-title/tsconfig.json

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