fix(edgeless): mindmap layout for existing model (#8426)

toeverything · Sep 21, 2024 · a15c539 · a15c539
1 parent ef57070
commit a15c539
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 35 deletions.
diff --git a/packages/affine/block-surface/src/element-model/index.ts b/packages/affine/block-surface/src/element-model/index.ts
@@ -2,11 +2,11 @@ import {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
-  MindmapElementModel,
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine-model';
 
+import { LayoutableMindmapElementModel } from '../utils/mindmap/utils.js';
 import { SurfaceElementModel } from './base.js';
 
 export const elementsCtorMap = {
@@ -15,14 +15,14 @@ export const elementsCtorMap = {
   shape: ShapeElementModel,
   brush: BrushElementModel,
   text: TextElementModel,
-  mindmap: MindmapElementModel,
+  mindmap: LayoutableMindmapElementModel,
 };
 
 export {
   BrushElementModel,
   ConnectorElementModel,
   GroupElementModel,
-  MindmapElementModel,
+  LayoutableMindmapElementModel,
   ShapeElementModel,
   SurfaceElementModel,
   TextElementModel,
@@ -43,7 +43,7 @@ export type ElementModelMap = {
   ['connector']: ConnectorElementModel;
   ['text']: TextElementModel;
   ['group']: GroupElementModel;
-  ['mindmap']: MindmapElementModel;
+  ['mindmap']: LayoutableMindmapElementModel;
 };
 
 export function isCanvasElementType(type: string): type is CanvasElementType {

diff --git a/packages/affine/block-surface/src/index.ts b/packages/affine/block-surface/src/index.ts
@@ -88,7 +88,6 @@ import {
   addTree,
   createFromTree,
   detachMindmap,
-  handleLayout,
   hideTargetConnector,
   moveMindMapSubtree,
   showMergeIndicator,
@@ -144,7 +143,6 @@ export const MindmapUtils = {
   addTree,
   createFromTree,
   detachMindmap,
-  handleLayout,
   hideTargetConnector,
   moveMindMapSubtree,
   showMergeIndicator,

diff --git a/packages/affine/block-surface/src/utils/mindmap/layout.ts b/packages/affine/block-surface/src/utils/mindmap/layout.ts
@@ -1,11 +1,11 @@
-import type {
-  MindmapElementModel,
-  MindmapNode,
-  MindmapRoot,
-} from '@blocksuite/affine-model';
 import type { SerializedXYWH } from '@blocksuite/global/utils';
 
-import { LayoutType } from '@blocksuite/affine-model';
+import {
+  LayoutType,
+  type MindmapElementModel,
+  type MindmapNode,
+  type MindmapRoot,
+} from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/utils';
 
 export const NODE_VERTICAL_SPACING = 45;

diff --git a/packages/affine/block-surface/src/utils/mindmap/utils.ts b/packages/affine/block-surface/src/utils/mindmap/utils.ts
@@ -1,7 +1,7 @@
 import {
   applyNodeStyle,
   LayoutType,
-  type MindmapElementModel,
+  MindmapElementModel,
   type MindmapNode,
   type MindmapRoot,
   type MindmapStyle,
@@ -21,6 +21,12 @@ import { ConnectorPathGenerator } from '../../managers/connector-manager.js';
 import { fitContent } from '../../renderer/elements/shape/utils.js';
 import { layout } from './layout.js';
 
+export class LayoutableMindmapElementModel extends MindmapElementModel {
+  override layout() {
+    handleLayout(this, this.tree, true, this.layoutType);
+  }
+}
+
 export function getHoveredArea(
   target: ShapeElementModel,
   position: [number, number],
@@ -410,8 +416,7 @@ export function createFromTree(
     style,
   });
   const mindmap = surface.getElementById(mindmapId) as MindmapElementModel;
-  mindmap.setLayoutHandler(handleLayout);
-  mindmap.layout();
+  handleLayout(mindmap, mindmap.tree, true, mindmap.layoutType);
 
   return mindmap;
 }

diff --git a/packages/affine/model/src/elements/mindmap/mindmap.ts b/packages/affine/model/src/elements/mindmap/mindmap.ts
@@ -693,10 +693,6 @@ export class MindmapElementModel extends GfxGroupLikeElementModel<MindmapElement
     return result as SerializedMindmapElement;
   }
 
-  setLayoutHandler(handler: typeof this._layoutHandler) {
-    this._layoutHandler = handler;
-  }
-
   stashTree(node: MindmapNode | string) {
     const mindNode = typeof node === 'string' ? this.getNode(node) : node;
 

diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts
@@ -11,7 +11,6 @@ import type { IBound } from '@blocksuite/global/utils';
 import {
   type ElementRenderer,
   elementRenderers,
-  MindmapUtils,
   type Overlay,
   type SurfaceBlockModel,
   type SurfaceContext,
@@ -267,12 +266,6 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
       index: props.index ?? this.generateIndex(type),
     };
     const id = this._surface.addElement(nProps);
-
-    if (type === 'mindmap') {
-      const model = this._surface.getElementById(id) as MindmapElementModel;
-      model.setLayoutHandler(MindmapUtils.handleLayout);
-      model.layout();
-    }
     return id;
   }
 

diff --git a/packages/blocks/src/surface-block/mini-mindmap/mindmap-preview.ts b/packages/blocks/src/surface-block/mini-mindmap/mindmap-preview.ts
@@ -1,6 +1,5 @@
 import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
 
-import { MindmapUtils } from '@blocksuite/affine-block-surface';
 import {
   MindmapStyleFour,
   MindmapStyleOne,
@@ -164,11 +163,7 @@ export class MiniMindmapPreview extends WithDisposable(LitElement) {
       children: mindmapNode,
       style: this.mindmapStyle ?? MindmapStyle.FOUR,
     });
-    const mindmap = this.surface.getElementById(
-      this.mindmapId
-    ) as MindmapElementModel;
-    mindmap.setLayoutHandler(MindmapUtils.handleLayout);
-    mindmap.layout();
+    this.surface.getElementById(this.mindmapId) as MindmapElementModel;
 
     const centerPosition = this._mindmap?.tree.element.xywh;
 

diff --git a/packages/presets/src/__tests__/edgeless/group.spec.ts b/packages/presets/src/__tests__/edgeless/group.spec.ts
@@ -4,7 +4,6 @@ import {
   type EdgelessRootBlockComponent,
   type GroupElementModel,
   LayoutType,
-  MindmapUtils,
   NoteDisplayMode,
 } from '@blocksuite/blocks';
 import { DocCollection } from '@blocksuite/store';
@@ -277,8 +276,6 @@ describe('mindmap', () => {
     });
     const mindmap = () =>
       service.getElementById(mindmapId) as MindmapElementModel;
-    mindmap().setLayoutHandler(MindmapUtils.handleLayout);
-    mindmap().layout();
 
     doc.captureSync();
     await wait();