refactor(editor): unify directories naming (#11516)

**Directory Structure Changes** - Renamed multiple block-related directories by removing the "block-" prefix: - `block-attachment` → `attachment` - `block-bookmark` → `bookmark` - `block-callout` → `callout` - `block-code` → `code` - `block-data-view` → `data-view` - `block-database` → `database` - `block-divider` → `divider` - `block-edgeless-text` → `edgeless-text` - `block-embed` → `embed`
2026-08-18 18:41:52 +08:00 · 2025-04-07 12:34:40 +00:00
parent e1bd2047c4
commit 1f45cc5dec
893 changed files with 439 additions and 460 deletions
@@ -0,0 +1,107 @@
+import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { Bound } from '@blocksuite/global/gfx';
+import { GfxBlockComponent } from '@blocksuite/std';
+import type { SelectedContext } from '@blocksuite/std/gfx';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this._disposables.add(
+      this.doc.slots.blockUpdated.subscribe(({ type, id }) => {
+        if (id === this.model.id && type === 'update') {
+          this.requestUpdate();
+        }
+      })
+    );
+    this._disposables.add(
+      this.gfx.viewport.viewportUpdated.subscribe(() => {
+        this.requestUpdate();
+      })
+    );
+  }
+
+  /**
+   * Due to potentially very large frame sizes, CSS scaling can cause iOS Safari to crash.
+   * To mitigate this issue, we combine size calculations within the rendering rect.
+   */
+  override getCSSTransform(): string {
+    return '';
+  }
+
+  override getRenderingRect() {
+    const viewport = this.gfx.viewport;
+    const { translateX, translateY, zoom } = viewport;
+    const { xywh, rotate } = this.model;
+    const bound = Bound.deserialize(xywh);
+
+    const scaledX = bound.x * zoom + translateX;
+    const scaledY = bound.y * zoom + translateY;
+
+    return {
+      x: scaledX,
+      y: scaledY,
+      w: bound.w * zoom,
+      h: bound.h * zoom,
+      rotate,
+      zIndex: this.toZIndex(),
+    };
+  }
+
+  override onSelected(context: SelectedContext): void {
+    const { x, y } = context.position;
+
+    if (
+      !context.fallback &&
+      // if the frame is selected by title, then ignore it because the title selection is handled by the title widget
+      (this.model.externalBound?.containsPoint([x, y]) ||
+        // otherwise if the frame has title, then ignore it because in this case the frame cannot be selected by frame body
+        this.model.props.title.length)
+    ) {
+      return;
+    }
+
+    super.onSelected(context);
+  }
+
+  override renderGfxBlock() {
+    const { model, showBorder, std } = this;
+    const backgroundColor = std
+      .get(ThemeProvider)
+      .generateColorProperty(model.props.background, DefaultTheme.transparent);
+    const _isNavigator =
+      this.gfx.tool.currentToolName$.value === 'frameNavigator';
+    const frameIndex = this.gfx.layer.getZIndex(model);
+
+    return html`
+      <div
+        class="affine-frame-container"
+        style=${styleMap({
+          zIndex: `${frameIndex}`,
+          backgroundColor,
+          height: '100%',
+          width: '100%',
+          borderRadius: '2px',
+          border:
+            _isNavigator || !showBorder
+              ? 'none'
+              : `1px solid ${cssVarV2('edgeless/frame/border/default')}`,
+        })}
+      ></div>
+    `;
+  }
+
+  @state()
+  accessor showBorder = true;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-frame': FrameBlockComponent;
+  }
+}