refactor(editor): move mindmap view to mindmap package (#11102)

blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts

@@ -5,6 +5,7 @@ import {
 } from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import { ConnectorTool } from '@blocksuite/affine-gfx-connector';
+import { MindMapIndicatorOverlay } from '@blocksuite/affine-gfx-mindmap';
 import { NoteTool } from '@blocksuite/affine-gfx-note';
 import { ShapeTool } from '@blocksuite/affine-gfx-shape';
 import { TextTool } from '@blocksuite/affine-gfx-text';
@@ -19,7 +20,6 @@ import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { ConnectorFilter } from './element-transform/connector-filter.js';
 import { MindMapDragExtension } from './element-transform/mind-map-drag.js';
 import { SnapExtension } from './element-transform/snap-manager.js';
-import { MindMapIndicatorOverlay } from './element-transform/utils/indicator-overlay.js';
 import { BrushTool } from './gfx-tool/brush-tool.js';
 import { DefaultTool } from './gfx-tool/default-tool.js';
 import { EmptyTool } from './gfx-tool/empty-tool.js';

blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-spec.ts

@@ -1,3 +1,5 @@
+import { ConnectorElementView } from '@blocksuite/affine-gfx-connector';
+import { MindMapView } from '@blocksuite/affine-gfx-mindmap';
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
 import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
 import { edgelessToolbarWidget } from '@blocksuite/affine-widget-edgeless-toolbar';
@@ -59,6 +61,8 @@ const EdgelessCommonExtension: ExtensionType[] = [
   ToolController,
   EdgelessRootService,
   ViewportElementExtension('.affine-edgeless-viewport'),
+  MindMapView,
+  ConnectorElementView,
   ...quickTools,
   ...seniorTools,
 ].flat();

blocksuite/affine/blocks/block-root/src/edgeless/element-transform/mind-map-drag.ts

@@ -1,10 +1,18 @@
 import {
-  MindmapUtils,
-  NODE_HORIZONTAL_SPACING,
-  NODE_VERTICAL_SPACING,
   OverlayIdentifier,
   type SurfaceBlockComponent,
 } from '@blocksuite/affine-block-surface';
+import {
+  containsNode,
+  createFromTree,
+  detachMindmap,
+  findTargetNode,
+  hideNodeConnector,
+  type MindMapIndicatorOverlay,
+  NODE_HORIZONTAL_SPACING,
+  NODE_VERTICAL_SPACING,
+  tryMoveNode,
+} from '@blocksuite/affine-gfx-mindmap';
 import {
   type LayoutType,
   type LocalConnectorElementModel,
@@ -26,7 +34,6 @@ import type { Bound, IVec } from '@blocksuite/global/gfx';
 import { isSingleMindMapNode } from '../utils/mindmap';
 import { isMindmapNode } from '../utils/query';
 import { calculateResponseArea } from './utils/drag-utils';
-import type { MindMapIndicatorOverlay } from './utils/indicator-overlay';
 
 type DragMindMapCtx = {
   mindmap: MindmapElementModel;
@@ -89,7 +96,7 @@ export class MindMapDragExtension extends TransformExtension {
         hoveredCtx?.abort?.();
 
         const hoveredNode = hoveredMindMap
-          ? MindmapUtils.findTargetNode(hoveredMindMap, [x, y])
+          ? findTargetNode(hoveredMindMap, [x, y])
           : null;
 
         hoveredCtx = {
@@ -104,13 +111,9 @@ export class MindMapDragExtension extends TransformExtension {
         if (
           hoveredNode &&
           hoveredMindMap &&
-          !MindmapUtils.containsNode(
-            hoveredMindMap,
-            hoveredNode,
-            dragMindMapCtx.node
-          )
+          !containsNode(hoveredMindMap, hoveredNode, dragMindMapCtx.node)
         ) {
-          const operation = MindmapUtils.tryMoveNode(
+          const operation = tryMoveNode(
             hoveredMindMap,
             hoveredNode,
             dragMindMapCtx.mindmap,
@@ -156,7 +159,7 @@ export class MindMapDragExtension extends TransformExtension {
           } else {
             hoveredCtx.detach = true;
 
-            const reset = (hoveredCtx.abort = MindmapUtils.hideNodeConnector(
+            const reset = (hoveredCtx.abort = hideNodeConnector(
               dragMindMapCtx.mindmap,
               dragMindMapCtx.node
             ));
@@ -183,11 +186,8 @@ export class MindMapDragExtension extends TransformExtension {
                 .serialize();
 
             if (dragMindMapCtx.node !== dragMindMapCtx.mindmap.tree) {
-              MindmapUtils.detachMindmap(
-                dragMindMapCtx.mindmap,
-                dragMindMapCtx.node
-              );
-              const mindmap = MindmapUtils.createFromTree(
+              detachMindmap(dragMindMapCtx.mindmap, dragMindMapCtx.node);
+              const mindmap = createFromTree(
                 dragMindMapCtx.node,
                 dragMindMapCtx.mindmap.style,
                 dragMindMapCtx.mindmap.layoutType,

blocksuite/affine/blocks/block-root/src/edgeless/element-transform/utils/drag-utils.ts

@@ -1,7 +1,7 @@
 import {
   NODE_HORIZONTAL_SPACING,
   NODE_VERTICAL_SPACING,
-} from '@blocksuite/affine-block-surface';
+} from '@blocksuite/affine-gfx-mindmap';
 import {
   LayoutType,
   type MindmapElementModel,

blocksuite/affine/blocks/block-root/src/effects.ts

@@ -11,8 +11,6 @@ import {
   NOTE_SLICER_WIDGET,
   NoteSlicer,
 } from './edgeless/components/note-slicer/index.js';
-import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js';
-import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
 import { EdgelessScalePanel } from './edgeless/components/panel/scale-panel.js';
 import { EdgelessSizePanel } from './edgeless/components/panel/size-panel.js';
 import { StrokeStylePanel } from './edgeless/components/panel/stroke-style-panel.js';
@@ -151,13 +149,8 @@ function registerEdgelessToolbarComponents() {
 }
 
 function registerEdgelessPanelComponents() {
-  customElements.define(
-    'edgeless-font-weight-and-style-panel',
-    EdgelessFontWeightAndStylePanel
-  );
   customElements.define('edgeless-size-panel', EdgelessSizePanel);
   customElements.define('edgeless-scale-panel', EdgelessScalePanel);
-  customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
   customElements.define('stroke-style-panel', StrokeStylePanel);
 }
 
@@ -217,8 +210,6 @@ declare global {
     'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
     'edgeless-auto-complete': EdgelessAutoComplete;
     'note-slicer': NoteSlicer;
-    'edgeless-font-family-panel': EdgelessFontFamilyPanel;
-    'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
     'edgeless-scale-panel': EdgelessScalePanel;
     'edgeless-size-panel': EdgelessSizePanel;
     'stroke-style-panel': StrokeStylePanel;

blocksuite/affine/blocks/block-surface/src/index.ts

@@ -30,7 +30,6 @@ export { fitContent } from './renderer/elements/shape/utils.js';
 export * from './renderer/elements/type.js';
 export { Overlay, OverlayIdentifier } from './renderer/overlay.js';
 export { ToolOverlay } from './renderer/tool-overlay.js';
-export { MindMapView } from './view/mindmap.js';
 import {
   getCursorByCoord,
   getLineHeight,
@@ -49,6 +48,7 @@ export {
   EdgelessSurfaceBlockAdapterExtensions,
   SurfaceBlockAdapterExtensions,
 } from './adapters/index.js';
+export * from './extensions';
 export type { SurfaceContext } from './surface-block.js';
 export { SurfaceBlockComponent } from './surface-block.js';
 export {
@@ -62,25 +62,6 @@ export {
   PageSurfaceBlockSpec,
 } from './surface-spec.js';
 export { SurfaceBlockTransformer } from './surface-transformer.js';
-export { AStarRunner } from './utils/a-star.js';
-export {
-  NODE_FIRST_LEVEL_HORIZONTAL_SPACING,
-  NODE_HORIZONTAL_SPACING,
-  NODE_VERTICAL_SPACING,
-} from './utils/mindmap/layout.js';
-export { RoughCanvas } from './utils/rough/canvas.js';
-
-import {
-  addTree,
-  containsNode,
-  createFromTree,
-  detachMindmap,
-  findTargetNode,
-  hideNodeConnector,
-  moveNode,
-  tryMoveNode,
-} from './utils/mindmap/utils';
-export * from './extensions';
 export {
   addNote,
   addNoteAtPoint,
@@ -91,7 +72,8 @@ export {
   getSurfaceComponent,
   normalizeWheelDeltaY,
 } from './utils';
-export * from './utils/mindmap/style-svg';
+export { AStarRunner } from './utils/a-star.js';
+export { RoughCanvas } from './utils/rough/canvas.js';
 export type { Options } from './utils/rough/core';
 export { sortIndex } from './utils/sort';
 export { updateXYWH } from './utils/update-xywh.js';
@@ -114,15 +96,4 @@ export const TextUtils = {
   isSameFontFamily,
 };
 
-export const MindmapUtils = {
-  addTree,
-  createFromTree,
-  detachMindmap,
-  moveNode,
-  findTargetNode,
-  tryMoveNode,
-  hideNodeConnector,
-  containsNode,
-};
-
 export * from './commands';

blocksuite/affine/blocks/block-surface/src/surface-spec.ts

@@ -12,8 +12,6 @@ import {
 } from './extensions';
 import { ExportManagerExtension } from './extensions/export-manager/export-manager';
 import { SurfaceBlockService } from './surface-service';
-import { ConnectorElementView } from './view/connector';
-import { MindMapView } from './view/mindmap';
 
 const CommonSurfaceBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:surface'),
@@ -23,8 +21,6 @@ const CommonSurfaceBlockSpec: ExtensionType[] = [
   ExportManagerExtension,
 ];
 
-const ElementModelViews = [MindMapView, ConnectorElementView];
-
 export const PageSurfaceBlockSpec: ExtensionType[] = [
   ...CommonSurfaceBlockSpec,
   ...SurfaceBlockAdapterExtensions,
@@ -34,6 +30,5 @@ export const PageSurfaceBlockSpec: ExtensionType[] = [
 export const EdgelessSurfaceBlockSpec: ExtensionType[] = [
   ...CommonSurfaceBlockSpec,
   ...EdgelessSurfaceBlockAdapterExtensions,
-  ...ElementModelViews,
   BlockViewExtension('affine:surface', literal`affine-surface`),
 ];

blocksuite/affine/blocks/block-surface/src/utils/index.ts

@@ -37,4 +37,3 @@ export { addNote, addNoteAtPoint } from './add-note';
 export { getBgGridGap } from './get-bg-grip-gap';
 export { getLastPropsKey } from './get-last-props-key';
 export * from './get-surface-block';
-export * from './mindmap/style-svg.js';

blocksuite/affine/gfx/connector/src/index.ts

@@ -2,3 +2,4 @@ export * from './connector-tool';
 export * from './text';
 export * from './toolbar/config';
 export * from './toolbar/quick-tool';
+export * from './view';

blocksuite/affine/gfx/connector/src/view/index.ts

@@ -0,0 +1 @@
+export * from './view';

blocksuite/affine/gfx/mindmap/src/index.ts

@@ -1 +1,3 @@
+export * from './indicator-overlay';
 export * from './toolbar/config';
+export * from './view';

blocksuite/affine/gfx/mindmap/src/indicator-overlay/index.ts

@@ -1,9 +1,4 @@
-import {
-  NODE_HORIZONTAL_SPACING,
-  NODE_VERTICAL_SPACING,
-  Overlay,
-  PathGenerator,
-} from '@blocksuite/affine-block-surface';
+import { Overlay, PathGenerator } from '@blocksuite/affine-block-surface';
 import {
   ConnectorMode,
   LayoutType,
@@ -21,6 +16,8 @@ import {
 } from '@blocksuite/global/gfx';
 import last from 'lodash-es/last';
 
+import { NODE_HORIZONTAL_SPACING, NODE_VERTICAL_SPACING } from '../view/layout';
+
 export class MindMapIndicatorOverlay extends Overlay {
   static INDICATOR_SIZE = [48, 22];
 

blocksuite/affine/gfx/mindmap/src/toolbar/config.ts

@@ -1,9 +1,3 @@
-import {
-  MindmapStyleFour,
-  MindmapStyleOne,
-  MindmapStyleThree,
-  MindmapStyleTwo,
-} from '@blocksuite/affine-block-surface';
 import {
   LayoutType,
   MindmapElementModel,
@@ -22,6 +16,13 @@ import {
 import { BlockFlavourIdentifier } from '@blocksuite/block-std';
 import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit';
 
+import {
+  MindmapStyleFour,
+  MindmapStyleOne,
+  MindmapStyleThree,
+  MindmapStyleTwo,
+} from '../view';
+
 const MINDMAP_STYLE_LIST = [
   {
     value: MindmapStyle.ONE,

blocksuite/affine/gfx/mindmap/src/view/index.ts

@@ -0,0 +1,4 @@
+export * from './layout';
+export * from './style-svg';
+export * from './utils';
+export * from './view';

blocksuite/affine/gfx/mindmap/src/view/utils.ts

@@ -1,3 +1,4 @@
+import { fitContent } from '@blocksuite/affine-block-surface';
 import {
   applyNodeStyle,
   LayoutType,
@@ -19,7 +20,6 @@ import isEqual from 'lodash-es/isEqual';
 import last from 'lodash-es/last';
 import * as Y from 'yjs';
 
-import { fitContent } from '../../renderer/elements/shape/utils.js';
 import { layout } from './layout.js';
 
 export function getHoveredArea(

blocksuite/affine/gfx/mindmap/src/view/view.ts

@@ -10,7 +10,7 @@ import { requestThrottledConnectedFrame } from '@blocksuite/affine-shared/utils'
 import type { PointerEventState } from '@blocksuite/block-std';
 import { GfxElementModelView } from '@blocksuite/block-std/gfx';
 
-import { handleLayout } from '../utils/mindmap/utils.js';
+import { handleLayout } from './utils.js';
 
 export class MindMapView extends GfxElementModelView<MindmapElementModel> {
   static override type = 'mindmap';

blocksuite/affine/widgets/widget-edgeless-toolbar/src/effects.ts

@@ -4,11 +4,18 @@ import {
   EDGELESS_TOOLBAR_WIDGET,
   EdgelessToolbarWidget,
 } from './edgeless-toolbar';
+import { EdgelessFontFamilyPanel } from './panel/font-family-panel';
+import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel';
 
 export function effects() {
   customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
   customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
   customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
+  customElements.define(
+    'edgeless-font-weight-and-style-panel',
+    EdgelessFontWeightAndStylePanel
+  );
+  customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
 }
 
 declare global {
@@ -16,5 +23,7 @@ declare global {
     'edgeless-tool-icon-button': EdgelessToolIconButton;
     'edgeless-toolbar-button': EdgelessToolbarButton;
     'edgeless-toolbar-widget': EdgelessToolbarWidget;
+    'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
+    'edgeless-font-family-panel': EdgelessFontFamilyPanel;
   }
 }

blocksuite/integration-test/src/__tests__/edgeless/mindmap.spec.ts

@@ -1,4 +1,4 @@
-import type { MindMapView } from '@blocksuite/affine/blocks/surface';
+import type { MindMapView } from '@blocksuite/affine/gfx/mindmap';
 import { LayoutType, type MindmapElementModel } from '@blocksuite/affine-model';
 import type { GfxController } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/gfx';