refactor(editor): remove global types in edgeless (#10092)

Closes: [BS-2553](https://linear.app/affine-design/issue/BS-2553/remove-global-types-in-edgeless)

blocksuite/blocks/src/root-block/edgeless/clipboard/clipboard.ts

@@ -6,7 +6,7 @@ import {
   SurfaceGroupLikeModel,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import type { Connection } from '@blocksuite/affine-model';
+import type { Connection, ShapeElementModel } from '@blocksuite/affine-model';
 import {
   BookmarkStyles,
   DEFAULT_NOTE_HEIGHT,
@@ -40,8 +40,10 @@ import type {
 } from '@blocksuite/block-std';
 import {
   compareLayer,
+  type GfxBlockElementModel,
   type GfxCompatibleProps,
   type GfxModel,
+  type GfxPrimitiveElementModel,
   type SerializedElement,
   SortOrder,
 } from '@blocksuite/block-std/gfx';
@@ -313,7 +315,7 @@ export class EdgelessClipboardController extends PageClipboard {
           .get(EmbedOptionProvider)
           .getEmbedBlockOptions(url);
         if (embedOptions) {
-          flavour = embedOptions.flavour as BlockSuite.EdgelessModelKeys;
+          flavour = embedOptions.flavour;
           style = embedOptions.styles[0];
         }
       }
@@ -605,7 +607,7 @@ export class EdgelessClipboardController extends PageClipboard {
       segment: 'toolbar',
       type: clipboardData.type as string,
     });
-    const element = this.crud.getElementById(id) as BlockSuite.SurfaceModel;
+    const element = this.crud.getElementById(id) as GfxPrimitiveElementModel;
     assertExists(element);
     return element;
   }
@@ -882,8 +884,8 @@ export class EdgelessClipboardController extends PageClipboard {
   private async _edgelessToCanvas(
     edgeless: EdgelessRootBlockComponent,
     bound: IBound,
-    nodes?: BlockSuite.EdgelessBlockModelType[],
-    canvasElements: BlockSuite.SurfaceModel[] = [],
+    nodes?: GfxBlockElementModel[],
+    canvasElements: GfxPrimitiveElementModel[] = [],
     {
       background,
       padding = IMAGE_PADDING,
@@ -961,7 +963,7 @@ export class EdgelessClipboardController extends PageClipboard {
     };
 
     const _drawTopLevelBlock = async (
-      block: BlockSuite.EdgelessBlockModelType,
+      block: GfxBlockElementModel,
       isInFrame = false
     ) => {
       const blockComponent = this.std.view.getBlock(block.id);
@@ -992,19 +994,19 @@ export class EdgelessClipboardController extends PageClipboard {
       nodes ??
       (edgeless.service.gfx.getElementsByBound(bound, {
         type: 'block',
-      }) as BlockSuite.EdgelessBlockModelType[]);
+      }) as GfxBlockElementModel[]);
     for (const nodeElement of nodeElements) {
       await _drawTopLevelBlock(nodeElement);
 
       if (matchModels(nodeElement, [FrameBlockModel])) {
-        const blocksInsideFrame: BlockSuite.EdgelessBlockModelType[] = [];
+        const blocksInsideFrame: GfxBlockElementModel[] = [];
         this.edgeless.service.frame
           .getElementsInFrameBound(nodeElement, false)
           .forEach(ele => {
             if (isTopLevelBlock(ele)) {
-              blocksInsideFrame.push(ele as BlockSuite.EdgelessBlockModelType);
+              blocksInsideFrame.push(ele as GfxBlockElementModel);
             } else {
-              canvasElements.push(ele as BlockSuite.SurfaceModel);
+              canvasElements.push(ele as GfxPrimitiveElementModel);
             }
           });
 
@@ -1245,8 +1247,8 @@ export class EdgelessClipboardController extends PageClipboard {
       ),
     };
 
-    const blockModels: BlockSuite.EdgelessBlockModelType[] = [];
-    const canvasElements: BlockSuite.SurfaceModel[] = [];
+    const blockModels: GfxBlockElementModel[] = [];
+    const canvasElements: GfxPrimitiveElementModel[] = [];
     const allElements: GfxModel[] = [];
 
     for (const data of elementsRawData) {
@@ -1283,7 +1285,7 @@ export class EdgelessClipboardController extends PageClipboard {
         const block = this.doc.getBlock(newId);
         if (!block) continue;
 
-        assertType<BlockSuite.EdgelessBlockModelType>(block.model);
+        assertType<GfxBlockElementModel>(block.model);
         blockModels.push(block.model);
         allElements.push(block.model);
         context.oldToNewIdMap.set(oldId, newId);
@@ -1343,8 +1345,8 @@ export class EdgelessClipboardController extends PageClipboard {
   }
 
   async toCanvas(
-    blocks: BlockSuite.EdgelessBlockModelType[],
-    shapes: BlockSuite.SurfaceModel[],
+    blocks: GfxBlockElementModel[],
+    shapes: ShapeElementModel[],
     options?: CanvasExportOptions
   ) {
     blocks.sort(compareLayer);

blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts

@@ -43,6 +43,7 @@ import {
   GfxControllerIdentifier,
   GfxExtensionIdentifier,
   type GfxModel,
+  type GfxPrimitiveElementModel,
 } from '@blocksuite/block-std/gfx';
 import type {
   Disposable,
@@ -891,7 +892,7 @@ export class EdgelessSelectedRectWidget extends WidgetComponent<
         areAllConnectors = false;
         areAllShapes = false;
       } else {
-        assertType<BlockSuite.SurfaceElementModel>(element);
+        assertType<GfxPrimitiveElementModel>(element);
         if (element.type === CanvasElementType.CONNECTOR) {
           const connector = element as ConnectorElementModel;
           areAllIndependentConnectors &&= !(

blocksuite/blocks/src/root-block/edgeless/edgeless-keyboard.ts

@@ -23,6 +23,7 @@ import { matchModels } from '@blocksuite/affine-shared/utils';
 import { SurfaceSelection, TextSelection } from '@blocksuite/block-std';
 import {
   GfxBlockElementModel,
+  type GfxPrimitiveElementModel,
   type GfxToolsMap,
   type GfxToolsOption,
   isGfxGroupCompatibleModel,
@@ -573,7 +574,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       const node = mindmapNodes[0];
       const mindmap = node.group as MindmapElementModel;
       const nodeDirection = mindmap.getLayoutDir(node.id);
-      let targetNode: BlockSuite.SurfaceElementModel | null = null;
+      let targetNode: GfxPrimitiveElementModel | null = null;
 
       switch (key) {
         case 'ArrowUp':

blocksuite/blocks/src/root-block/edgeless/frame-manager.ts

@@ -491,11 +491,7 @@ export function getBlocksInFrameBound(
   if (!surface) return [];
 
   return (
-    getNotesInFrameBound(
-      doc,
-      model,
-      fullyContained
-    ) as BlockSuite.EdgelessBlockModelType[]
+    getNotesInFrameBound(doc, model, fullyContained) as GfxBlockElementModel[]
   ).concat(
     surface.children.filter(ele => {
       if (ele.id === model.id) return false;
@@ -507,6 +503,6 @@ export function getBlocksInFrameBound(
       }
 
       return false;
-    }) as BlockSuite.EdgelessBlockModelType[]
+    }) as GfxBlockElementModel[]
   );
 }

blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool-ext/mind-map-ext/mind-map-ext.ts

@@ -14,6 +14,7 @@ import {
 import type { PointerEventState } from '@blocksuite/block-std';
 import {
   type GfxModel,
+  type GfxPrimitiveElementModel,
   isGfxGroupCompatibleModel,
 } from '@blocksuite/block-std/gfx';
 import type { Bound, IVec } from '@blocksuite/global/utils';
@@ -352,7 +353,7 @@ export class MindMapExt extends DefaultToolExt {
   ) {
     const OPACITY = 0.3;
     const updatedNodes = new Set<
-      BlockSuite.SurfaceElementModel | LocalConnectorElementModel
+      GfxPrimitiveElementModel | LocalConnectorElementModel
     >();
     const traverse = (node: MindmapNode, parent: MindmapNode | null) => {
       node.element.opacity = OPACITY;

blocksuite/blocks/src/root-block/edgeless/middlewares/base.ts

@@ -11,7 +11,7 @@ export class EditPropsMiddlewareBuilder extends SurfaceMiddlewareBuilder {
   middleware: SurfaceMiddleware = ctx => {
     if (ctx.type === 'beforeAdd') {
       const { type, props } = ctx.payload;
-      const key = getLastPropsKey(type as BlockSuite.EdgelessModelKeys, props);
+      const key = getLastPropsKey(type, props);
       const nProps = key
         ? this.std.get(EditPropsStore).applyLastProps(key, ctx.payload.props)
         : null;

blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts

@@ -6,6 +6,7 @@ import type {
   FrameBlockProps,
   ImageBlockModel,
   NoteBlockModel,
+  ShapeElementModel,
 } from '@blocksuite/affine-model';
 import { getElementsWithoutGroup } from '@blocksuite/affine-shared/utils';
 import {
@@ -72,7 +73,7 @@ export const splitElements = (elements: GfxModel[]) => {
       return 'shapes';
     }) as {
       notes: NoteBlockModel[];
-      shapes: BlockSuite.SurfaceModel[];
+      shapes: ShapeElementModel[];
       frames: FrameBlockModel[];
       images: ImageBlockModel[];
       edgelessTexts: EdgelessTextBlockModel[];

blocksuite/blocks/src/root-block/edgeless/utils/clone-utils.ts

@@ -15,6 +15,7 @@ import {
   getTopElements,
   GfxBlockElementModel,
   type GfxModel,
+  type GfxPrimitiveElementModel,
   isGfxGroupCompatibleModel,
   type SerializedElement,
 } from '@blocksuite/block-std/gfx';
@@ -225,7 +226,7 @@ export function mapMindmapIds(
 }
 
 export function getElementProps(
-  element: BlockSuite.SurfaceModel,
+  element: GfxPrimitiveElementModel,
   ids: Map<string, string>
 ) {
   if (element instanceof ConnectorElementModel) {

blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts

@@ -29,6 +29,8 @@ import {
   FontWeight,
   resolveColor,
   ShapeElementModel,
+  type SurfaceTextModel,
+  type SurfaceTextModelMap,
   TextAlign,
   TextElementModel,
   type TextStyleProps,
@@ -76,14 +78,14 @@ const TEXT_ALIGN_CHOOSE: [TextAlign, () => TemplateResult<1>][] = [
 ] as const;
 
 function countByField<K extends keyof Omit<TextStyleProps, 'color'>>(
-  elements: BlockSuite.EdgelessTextModelType[],
+  elements: SurfaceTextModel[],
   field: K
 ) {
   return countBy(elements, element => extractField(element, field));
 }
 
 function extractField<K extends keyof Omit<TextStyleProps, 'color'>>(
-  element: BlockSuite.EdgelessTextModelType,
+  element: SurfaceTextModel,
   field: K
 ) {
   //TODO: It's not a very good handling method.
@@ -101,23 +103,23 @@ function extractField<K extends keyof Omit<TextStyleProps, 'color'>>(
 }
 
 function getMostCommonValue<K extends keyof Omit<TextStyleProps, 'color'>>(
-  elements: BlockSuite.EdgelessTextModelType[],
+  elements: SurfaceTextModel[],
   field: K
 ) {
   const values = countByField(elements, field);
   return maxBy(Object.entries(values), ([_k, count]) => count);
 }
 
-function getMostCommonAlign(elements: BlockSuite.EdgelessTextModelType[]) {
+function getMostCommonAlign(elements: SurfaceTextModel[]) {
   const max = getMostCommonValue(elements, 'textAlign');
   return max ? (max[0] as TextAlign) : TextAlign.Left;
 }
 
 function getMostCommonColor(
-  elements: BlockSuite.EdgelessTextModelType[],
+  elements: SurfaceTextModel[],
   colorScheme: ColorScheme
 ): string {
-  const colors = countBy(elements, (ele: BlockSuite.EdgelessTextModelType) => {
+  const colors = countBy(elements, (ele: SurfaceTextModel) => {
     const color =
       ele instanceof ConnectorElementModel ? ele.labelStyle.color : ele.color;
     return resolveColor(color, colorScheme);
@@ -128,28 +130,28 @@ function getMostCommonColor(
     : resolveColor(DefaultTheme.textColor, colorScheme);
 }
 
-function getMostCommonFontFamily(elements: BlockSuite.EdgelessTextModelType[]) {
+function getMostCommonFontFamily(elements: SurfaceTextModel[]) {
   const max = getMostCommonValue(elements, 'fontFamily');
   return max ? (max[0] as FontFamily) : FontFamily.Inter;
 }
 
-function getMostCommonFontSize(elements: BlockSuite.EdgelessTextModelType[]) {
+function getMostCommonFontSize(elements: SurfaceTextModel[]) {
   const max = getMostCommonValue(elements, 'fontSize');
   return max ? Number(max[0]) : FONT_SIZE_LIST[0].value;
 }
 
-function getMostCommonFontStyle(elements: BlockSuite.EdgelessTextModelType[]) {
+function getMostCommonFontStyle(elements: SurfaceTextModel[]) {
   const max = getMostCommonValue(elements, 'fontStyle');
   return max ? (max[0] as FontStyle) : FontStyle.Normal;
 }
 
-function getMostCommonFontWeight(elements: BlockSuite.EdgelessTextModelType[]) {
+function getMostCommonFontWeight(elements: SurfaceTextModel[]) {
   const max = getMostCommonValue(elements, 'fontWeight');
   return max ? (max[0] as FontWeight) : FontWeight.Regular;
 }
 
 function buildProps(
-  element: BlockSuite.EdgelessTextModelType,
+  element: SurfaceTextModel,
   props: { [K in keyof TextStyleProps]?: TextStyleProps[K] }
 ) {
   if (element instanceof ConnectorElementModel) {
@@ -236,9 +238,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
     });
   };
 
-  private readonly _updateElementBound = (
-    element: BlockSuite.EdgelessTextModelType
-  ) => {
+  private readonly _updateElementBound = (element: SurfaceTextModel) => {
     const elementType = this.elementType;
     if (elementType === 'text' && element instanceof TextElementModel) {
       // the change of font family will change the bound of the text
@@ -506,10 +506,10 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
   accessor edgeless!: EdgelessRootBlockComponent;
 
   @property({ attribute: false })
-  accessor elements!: BlockSuite.EdgelessTextModelType[];
+  accessor elements!: SurfaceTextModel[];
 
   @property({ attribute: false })
-  accessor elementType!: BlockSuite.EdgelessTextModelKeyType;
+  accessor elementType!: keyof SurfaceTextModelMap;
 
   @query('edgeless-color-picker-button.text-color')
   accessor textColorButton!: EdgelessColorPickerButton;

blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts

@@ -178,7 +178,7 @@ export class EdgelessElementToolbarWidget extends WidgetComponent<
         return 'edgelessText';
       }
 
-      return (model as BlockSuite.SurfaceElementModel).type;
+      return model.type;
     });
     return result as CategorizedElements;
   }