From ee3494e01d1cbec96f0efa064e4b65cf729ace83 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Fri, 21 Mar 2025 11:45:33 +0000 Subject: [PATCH] refactor(editor): extract draggable helper of edgeless toolbar (#11068) --- .../src/edgeless/components/toolbar/mindmap/mindmap-menu.ts | 6 ++++-- .../components/toolbar/mindmap/mindmap-tool-button.ts | 6 ++++-- .../edgeless/components/toolbar/shape/shape-draggable.ts | 6 ++++-- .../edgeless/components/toolbar/template/template-panel.ts | 2 +- .../src}/draggable/draggable-element.controller.ts | 5 +++-- .../src}/draggable/event-resolver.ts | 0 .../widgets/widget-edgeless-toolbar/src/draggable/index.ts | 1 + .../src}/draggable/overlay-factory.ts | 0 .../widget-edgeless-toolbar/src}/draggable/types.ts | 0 .../affine/widgets/widget-edgeless-toolbar/src/index.ts | 1 + 10 files changed, 18 insertions(+), 9 deletions(-) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar/common => widgets/widget-edgeless-toolbar/src}/draggable/draggable-element.controller.ts (98%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar/common => widgets/widget-edgeless-toolbar/src}/draggable/event-resolver.ts (100%) create mode 100644 blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/index.ts rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar/common => widgets/widget-edgeless-toolbar/src}/draggable/overlay-factory.ts (100%) rename blocksuite/affine/{blocks/block-root/src/edgeless/components/toolbar/common => widgets/widget-edgeless-toolbar/src}/draggable/types.ts (100%) diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-menu.ts index 8cb8cd08f..70c4851cb 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-menu.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-tool-button.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-tool-button.ts index 36d71f5bf..7b1bf2f48 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mindmap/mindmap-tool-button.ts +++ b/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, diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-draggable.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-draggable.ts index 250e908dd..cae9fac16 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-draggable.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts index 901069fe1..ebea2fad7 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/draggable-element.controller.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts similarity index 98% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/draggable-element.controller.ts rename to blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts index e9498f82b..a18fd50de 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/draggable-element.controller.ts +++ b/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 overlay.element.style.setProperty('--translate-y', `${offsetPos.y}px`); overlay.transitionWrapper.style.transformOrigin = `${ox} ${oy}`; - const shapeName = (elementInfo as ElementInfo).data.name; + const shapeName = (elementInfo as ElementInfo<{ name: ShapeName }>).data + .name; const { fillColor, strokeColor } = edgeless.host.std.get(EditPropsStore).lastProps$.value[ `shape:${shapeName}` diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/event-resolver.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/event-resolver.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/event-resolver.ts rename to blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/event-resolver.ts diff --git a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/index.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/index.ts new file mode 100644 index 000000000..16e1b4537 --- /dev/null +++ b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/index.ts @@ -0,0 +1 @@ +export * from './draggable-element.controller.js'; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/overlay-factory.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/overlay-factory.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/overlay-factory.ts rename to blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/overlay-factory.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/types.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/types.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/draggable/types.ts rename to blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/types.ts diff --git a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/index.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/index.ts index ab698bf5c..1908c4a61 100644 --- a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/index.ts +++ b/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';