refactor(editor): extract draggable helper of edgeless toolbar (#11068)

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-menu.ts

@@ -5,7 +5,10 @@ import {
   FeatureFlagService,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import {
+  EdgelessDraggableElementController,
+  EdgelessToolbarToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { BlockStdScope } from '@blocksuite/block-std';
 import { modelContext, stdContext } from '@blocksuite/block-std';
 import { ErrorCode } from '@blocksuite/global/exceptions';
@@ -19,7 +22,6 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import type { EdgelessRootBlockComponent } from '../../../index.js';
-import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { getMindMaps, type ToolbarMindmapItem } from './assets.js';
 import { mediaRender, textRender } from './basket-elements.js';
 import { importMindMapIcon, mindmapMenuMediaIcon, textIcon } from './icons.js';

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-tool-button.ts

@@ -8,7 +8,10 @@ import {
   ThemeProvider,
   ViewportElementProvider,
 } from '@blocksuite/affine-shared/services';
-import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import {
+  EdgelessDraggableElementController,
+  EdgelessToolbarToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import type { Bound } from '@blocksuite/global/gfx';
 import { SignalWatcher } from '@blocksuite/global/lit';
@@ -19,7 +22,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { getMindMaps } from './assets.js';
 import {
   type DraggableTool,

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-draggable.ts

@@ -19,7 +19,10 @@ import {
   ThemeProvider,
   ViewportElementProvider,
 } from '@blocksuite/affine-shared/services';
-import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import {
+  EdgelessDraggableElementController,
+  EdgelessToolbarToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import { SignalWatcher } from '@blocksuite/global/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -27,7 +30,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import type { DraggableShape } from './utils.js';
 import { buildVariablesObject } from './utils.js';
 

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts

@@ -10,6 +10,7 @@ import {
   requestConnectedFrame,
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
+import { EdgelessDraggableElementController } from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import type { Bound } from '@blocksuite/global/gfx';
@@ -22,7 +23,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 import { EdgelessRootService } from '../../../edgeless-root-service.js';
-import { EdgelessDraggableElementController } from '../common/draggable/draggable-element.controller.js';
 import { builtInTemplates } from './builtin-templates.js';
 import { defaultPreview, Triangle } from './cards.js';
 import type { Template } from './template-type.js';

blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts

@@ -1,3 +1,4 @@
+import type { ShapeName } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
   ThemeProvider,
@@ -11,7 +12,6 @@ import {
   render,
 } from 'lit';
 
-import type { DraggableShape } from '../../shape/utils.js';
 import {
   type ElementDragEvent,
   mouseResolver,
@@ -131,7 +131,8 @@ export class EdgelessDraggableElementController<T>
     overlay.element.style.setProperty('--translate-y', `${offsetPos.y}px`);
     overlay.transitionWrapper.style.transformOrigin = `${ox} ${oy}`;
 
-    const shapeName = (elementInfo as ElementInfo<DraggableShape>).data.name;
+    const shapeName = (elementInfo as ElementInfo<{ name: ShapeName }>).data
+      .name;
     const { fillColor, strokeColor } =
       edgeless.host.std.get(EditPropsStore).lastProps$.value[
         `shape:${shapeName}`

blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/index.ts

@@ -0,0 +1 @@
+export * from './draggable-element.controller.js';

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

@@ -1,5 +1,6 @@
 export * from './context';
 export * from './create-popper';
+export * from './draggable';
 export * from './edgeless-toolbar';
 export * from './extension';
 export * from './mixins';