refactor(editor): extract frame block (#9322)

blocksuite/blocks/src/_specs/group/edgeless.ts

@@ -1,7 +1,7 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import { EdgelessSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { EdgelessSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';

blocksuite/blocks/src/_specs/preset/edgeless-specs.ts

@@ -1,3 +1,4 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import {
   ConnectionOverlay,
   EdgelessSurfaceBlockSpec,
@@ -6,7 +7,6 @@ import { FontLoaderService } from '@blocksuite/affine-shared/services';
 import type { ExtensionType } from '@blocksuite/block-std';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/edgeless-text-spec.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import {

blocksuite/blocks/src/_specs/preset/preview-specs.ts

@@ -1,3 +1,4 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import {
   EdgelessSurfaceBlockSpec,
   PageSurfaceBlockSpec,
@@ -18,7 +19,6 @@ import {
 import { literal } from 'lit/static-html.js';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { PreviewEdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { PageRootService } from '../../root-block/page/page-root-service.js';

blocksuite/blocks/src/effects.ts

@@ -1,6 +1,7 @@
 import { effects as blockAttachmentEffects } from '@blocksuite/affine-block-attachment/effects';
 import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
 import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
+import { effects as blockFrameEffects } from '@blocksuite/affine-block-frame/effects';
 import { effects as blockImageEffects } from '@blocksuite/affine-block-image/effects';
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockNoteEffects } from '@blocksuite/affine-block-note/effects';
@@ -64,7 +65,6 @@ import {
 import { DividerBlockComponent } from './divider-block/index.js';
 import type { insertEdgelessTextCommand } from './edgeless-text-block/commands/insert-edgeless-text.js';
 import { EdgelessTextBlockComponent } from './edgeless-text-block/index.js';
-import { FrameBlockComponent } from './frame-block/index.js';
 import { effects as blockLatexEffects } from './latex-block/effects.js';
 import { LatexBlockComponent } from './latex-block/index.js';
 import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto-complete/auto-complete-panel.js';
@@ -251,6 +251,7 @@ export function effects() {
   blockNoteEffects();
   blockAttachmentEffects();
   blockBookmarkEffects();
+  blockFrameEffects();
   blockListEffects();
   blockParagraphEffects();
   blockEmbedEffects();
@@ -302,7 +303,6 @@ export function effects() {
   customElements.define('affine-preview-root', PreviewRootBlockComponent);
   customElements.define('affine-code', CodeBlockComponent);
   customElements.define('mini-mindmap-preview', MiniMindmapPreview);
-  customElements.define('affine-frame', FrameBlockComponent);
   customElements.define('mini-mindmap-surface-block', MindmapSurfaceBlock);
   customElements.define('affine-data-view', DataViewBlockComponent);
   customElements.define('affine-edgeless-root', EdgelessRootBlockComponent);

blocksuite/blocks/src/frame-block/frame-block.ts

@@ -1,96 +0,0 @@
-import type { FrameBlockModel } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { GfxBlockComponent } from '@blocksuite/block-std';
-import { Bound } from '@blocksuite/global/utils';
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { html } from 'lit';
-import { state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import type { EdgelessRootService } from '../root-block/index.js';
-
-export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
-  get rootService() {
-    return this.std.getService('affine:page') as EdgelessRootService;
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this._disposables.add(
-      this.doc.slots.blockUpdated.on(({ type, id }) => {
-        if (id === this.model.id && type === 'update') {
-          this.requestUpdate();
-        }
-      })
-    );
-    this._disposables.add(
-      this.gfx.viewport.viewportUpdated.on(() => {
-        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 renderGfxBlock() {
-    const { model, showBorder, rootService, std } = this;
-    const backgroundColor = std
-      .get(ThemeProvider)
-      .generateColorProperty(model.background, '--affine-platte-transparent');
-    const _isNavigator =
-      this.gfx.tool.currentToolName$.value === 'frameNavigator';
-    const frameIndex = rootService.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;
-  }
-}

blocksuite/blocks/src/frame-block/frame-spec.ts

@@ -1,6 +0,0 @@
-import { BlockViewExtension, type ExtensionType } from '@blocksuite/block-std';
-import { literal } from 'lit/static-html.js';
-
-export const FrameBlockSpec: ExtensionType[] = [
-  BlockViewExtension('affine:frame', literal`affine-frame`),
-];

blocksuite/blocks/src/frame-block/index.ts

@@ -1,2 +0,0 @@
-export * from './frame-block.js';
-export * from './frame-spec.js';

blocksuite/blocks/src/index.ts

@@ -21,7 +21,6 @@ export * from './data-view-block/index.js';
 export * from './database-block/index.js';
 export * from './divider-block/index.js';
 export * from './edgeless-text-block/index.js';
-export * from './frame-block/index.js';
 export * from './latex-block/index.js';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
@@ -49,6 +48,7 @@ export * from './surface-ref-block/index.js';
 export * from '@blocksuite/affine-block-attachment';
 export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-embed';
+export * from '@blocksuite/affine-block-frame';
 export * from '@blocksuite/affine-block-image';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-note';