refactor(edgeless): extract side effects of edgeless element toolbar (#…

…8828) This PR moves all `edgeless element toolbar` related side effects into a separate file.
toeverything · Nov 29, 2024 · 031f150 · 031f150
1 parent d2af1a1
commit 031f150
Show file tree

Hide file tree

Showing 18 changed files with 113 additions and 181 deletions.
diff --git a/packages/blocks/src/effects.ts b/packages/blocks/src/effects.ts
@@ -213,10 +213,8 @@ import {
   AffinePieMenuWidget,
   AffineSlashMenuWidget,
   AffineSurfaceRefToolbar,
-  EDGELESS_ELEMENT_TOOLBAR_WIDGET,
   EdgelessCopilotToolbarEntry,
   EdgelessCopilotWidget,
-  EdgelessElementToolbarWidget,
   EdgelessRemoteSelectionWidget,
   EdgelessRootBlockComponent,
   EmbedCardToolbar,
@@ -252,26 +250,7 @@ import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from './root-block/widgets/ed
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './root-block/widgets/edgeless-zoom-toolbar/index.js';
 import { ZoomBarToggleButton } from './root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
 import { EdgelessZoomToolbar } from './root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
-import { EdgelessAddFrameButton } from './root-block/widgets/element-toolbar/add-frame-button.js';
-import { EdgelessAddGroupButton } from './root-block/widgets/element-toolbar/add-group-button.js';
-import { EdgelessAlignButton } from './root-block/widgets/element-toolbar/align-button.js';
-import { EdgelessChangeAttachmentButton } from './root-block/widgets/element-toolbar/change-attachment-button.js';
-import { EdgelessChangeBrushButton } from './root-block/widgets/element-toolbar/change-brush-button.js';
-import { EdgelessChangeConnectorButton } from './root-block/widgets/element-toolbar/change-connector-button.js';
-import { EdgelessChangeEmbedCardButton } from './root-block/widgets/element-toolbar/change-embed-card-button.js';
-import { EdgelessChangeFrameButton } from './root-block/widgets/element-toolbar/change-frame-button.js';
-import { EdgelessChangeGroupButton } from './root-block/widgets/element-toolbar/change-group-button.js';
-import { EdgelessChangeImageButton } from './root-block/widgets/element-toolbar/change-image-button.js';
-import {
-  EdgelessChangeMindmapButton,
-  EdgelessChangeMindmapLayoutPanel,
-  EdgelessChangeMindmapStylePanel,
-} from './root-block/widgets/element-toolbar/change-mindmap-button.js';
-import { EdgelessChangeNoteButton } from './root-block/widgets/element-toolbar/change-note-button.js';
-import { EdgelessChangeShapeButton } from './root-block/widgets/element-toolbar/change-shape-button.js';
-import { EdgelessChangeTextMenu } from './root-block/widgets/element-toolbar/change-text-menu.js';
-import { EdgelessMoreButton } from './root-block/widgets/element-toolbar/more-menu/button.js';
-import { EdgelessReleaseFromGroupButton } from './root-block/widgets/element-toolbar/release-from-group-button.js';
+import { effects as widgetEdgelessElementToolbarEffects } from './root-block/widgets/element-toolbar/effects.js';
 import { effects as widgetFrameTitleEffects } from './root-block/widgets/frame-title/effects.js';
 import { AffineImageToolbar } from './root-block/widgets/image-toolbar/components/image-toolbar.js';
 import { AFFINE_IMAGE_TOOLBAR_WIDGET } from './root-block/widgets/image-toolbar/index.js';
@@ -341,6 +320,7 @@ export function effects() {
   widgetMobileToolbarEffects();
   widgetLinkedDocEffects();
   widgetFrameTitleEffects();
+  widgetEdgelessElementToolbarEffects();
 
   customElements.define('affine-database-title', DatabaseTitle);
   customElements.define(
@@ -478,9 +458,6 @@ export function effects() {
     'edgeless-note-senior-button',
     EdgelessNoteSeniorButton
   );
-  customElements.define('edgeless-add-frame-button', EdgelessAddFrameButton);
-  customElements.define('edgeless-add-group-button', EdgelessAddGroupButton);
-  customElements.define('edgeless-align-button', EdgelessAlignButton);
   customElements.define('edgeless-align-panel', EdgelessAlignPanel);
   customElements.define('card-style-panel', CardStylePanel);
   customElements.define(
@@ -491,10 +468,6 @@ export function effects() {
   customElements.define('edgeless-color-panel', EdgelessColorPanel);
   customElements.define('edgeless-text-color-icon', EdgelessTextColorIcon);
   customElements.define('embed-card-create-modal', EmbedCardCreateModal);
-  customElements.define(
-    'edgeless-change-connector-button',
-    EdgelessChangeConnectorButton
-  );
   customElements.define('embed-card-edit-modal', EmbedCardEditModal);
   customElements.define(
     'edgeless-mindmap-tool-button',
@@ -504,10 +477,6 @@ export function effects() {
   customElements.define('edgeless-note-menu', EdgelessNoteMenu);
   customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
   customElements.define('affine-database-link-node', LinkNode);
-  customElements.define(
-    'edgeless-change-frame-button',
-    EdgelessChangeFrameButton
-  );
   customElements.define(
     'edgeless-frame-order-button',
     EdgelessFrameOrderButton
@@ -535,54 +504,22 @@ export function effects() {
     'edgeless-font-weight-and-style-panel',
     EdgelessFontWeightAndStylePanel
   );
-  customElements.define(
-    'edgeless-change-embed-card-button',
-    EdgelessChangeEmbedCardButton
-  );
   customElements.define('edgeless-note-shadow-panel', EdgelessNoteShadowPanel);
   customElements.define('edgeless-templates-panel', EdgelessTemplatePanel);
-  customElements.define(
-    'edgeless-change-group-button',
-    EdgelessChangeGroupButton
-  );
   customElements.define('edgeless-text-menu', EdgelessTextMenu);
-  customElements.define(
-    'edgeless-change-image-button',
-    EdgelessChangeImageButton
-  );
   customElements.define('edgeless-template-button', EdgelessTemplateButton);
   customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
   customElements.define('edgeless-size-panel', EdgelessSizePanel);
   customElements.define('edgeless-scale-panel', EdgelessScalePanel);
   customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
-  customElements.define(
-    'edgeless-change-mindmap-style-panel',
-    EdgelessChangeMindmapStylePanel
-  );
-  customElements.define(
-    'edgeless-change-mindmap-layout-panel',
-    EdgelessChangeMindmapLayoutPanel
-  );
-  customElements.define(
-    'edgeless-change-mindmap-button',
-    EdgelessChangeMindmapButton
-  );
   customElements.define('edgeless-shape-panel', EdgelessShapePanel);
   customElements.define('note-display-mode-panel', NoteDisplayModePanel);
   customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
   customElements.define('frame-preview', FramePreview);
   customElements.define('bookmark-card', BookmarkCard);
-  customElements.define(
-    'edgeless-change-shape-button',
-    EdgelessChangeShapeButton
-  );
   customElements.define('presentation-toolbar', PresentationToolbar);
   customElements.define('edgeless-shape-menu', EdgelessShapeMenu);
   customElements.define('stroke-style-panel', StrokeStylePanel);
-  customElements.define(
-    'edgeless-change-brush-button',
-    EdgelessChangeBrushButton
-  );
   customElements.define('edgeless-shape-tool-button', EdgelessShapeToolButton);
   customElements.define(
     'edgeless-connector-label-editor',
@@ -599,22 +536,8 @@ export function effects() {
     EdgelessGroupTitleEditor
   );
   customElements.define('language-list-button', LanguageListButton);
-  customElements.define('edgeless-change-text-menu', EdgelessChangeTextMenu);
   customElements.define('affine-drag-preview', DragPreview);
-  customElements.define(
-    'edgeless-change-note-button',
-    EdgelessChangeNoteButton
-  );
   customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
-  customElements.define(
-    'edgeless-release-from-group-button',
-    EdgelessReleaseFromGroupButton
-  );
-  customElements.define(
-    'edgeless-change-attachment-button',
-    EdgelessChangeAttachmentButton
-  );
-  customElements.define('edgeless-more-button', EdgelessMoreButton);
   customElements.define('edgeless-shape-style-panel', EdgelessShapeStylePanel);
   customElements.define(
     'edgeless-frame-title-editor',
@@ -654,10 +577,6 @@ export function effects() {
   customElements.define(AFFINE_PIE_MENU_WIDGET, AffinePieMenuWidget);
   customElements.define(AFFINE_EDGELESS_COPILOT_WIDGET, EdgelessCopilotWidget);
 
-  customElements.define(
-    EDGELESS_ELEMENT_TOOLBAR_WIDGET,
-    EdgelessElementToolbarWidget
-  );
   customElements.define(AFFINE_IMAGE_TOOLBAR_WIDGET, AffineImageToolbarWidget);
   customElements.define(AFFINE_SLASH_MENU_WIDGET, AffineSlashMenuWidget);
   customElements.define(

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/add-frame-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/add-frame-button.ts
@@ -46,12 +46,6 @@ export class EdgelessAddFrameButton extends WithDisposable(LitElement) {
   accessor edgeless!: EdgelessRootBlockComponent;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-add-frame-button': EdgelessAddFrameButton;
-  }
-}
-
 export function renderAddFrameButton(
   edgeless: EdgelessRootBlockComponent,
   elements: BlockSuite.EdgelessModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/add-group-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/add-group-button.ts
@@ -37,12 +37,6 @@ export class EdgelessAddGroupButton extends WithDisposable(LitElement) {
   accessor edgeless!: EdgelessRootBlockComponent;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-add-group-button': EdgelessAddGroupButton;
-  }
-}
-
 export function renderAddGroupButton(
   edgeless: EdgelessRootBlockComponent,
   elements: BlockSuite.EdgelessModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/align-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/align-button.ts
@@ -326,12 +326,6 @@ export class EdgelessAlignButton extends WithDisposable(LitElement) {
   accessor edgeless!: EdgelessRootBlockComponent;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-align-button': EdgelessAlignButton;
-  }
-}
-
 export function renderAlignButton(
   edgeless: EdgelessRootBlockComponent,
   elements: BlockSuite.EdgelessModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-attachment-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-attachment-button.ts
@@ -146,12 +146,6 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) {
   accessor model!: AttachmentBlockModel;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-attachment-button': EdgelessChangeAttachmentButton;
-  }
-}
-
 export function renderAttachmentButton(
   edgeless: EdgelessRootBlockComponent,
   attachments?: AttachmentBlockModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
@@ -181,12 +181,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
   accessor elements: BrushElementModel[] = [];
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-brush-button': EdgelessChangeBrushButton;
-  }
-}
-
 export function renderChangeBrushButton(
   edgeless: EdgelessRootBlockComponent,
   elements?: BrushElementModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -609,12 +609,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
   accessor strokeColorButton!: EdgelessColorPickerButton;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-connector-button': EdgelessChangeConnectorButton;
-  }
-}
-
 export function renderConnectorButton(
   edgeless: EdgelessRootBlockComponent,
   elements?: ConnectorElementModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
@@ -698,12 +698,6 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
   accessor quickConnectButton!: TemplateResult<1> | typeof nothing;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-embed-card-button': EdgelessChangeEmbedCardButton;
-  }
-}
-
 export function renderEmbedButton(
   edgeless: EdgelessRootBlockComponent,
   models?: EdgelessChangeEmbedCardButton['model'][],

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-group-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-group-button.ts
@@ -123,12 +123,6 @@ export class EdgelessChangeGroupButton extends WithDisposable(LitElement) {
   accessor groups!: GroupElementModel[];
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-group-button': EdgelessChangeGroupButton;
-  }
-}
-
 export function renderGroupButton(
   edgeless: EdgelessRootBlockComponent,
   groups?: GroupElementModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-image-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-image-button.ts
@@ -72,12 +72,6 @@ export class EdgelessChangeImageButton extends WithDisposable(LitElement) {
   accessor model!: ImageBlockModel;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-image-button': EdgelessChangeImageButton;
-  }
-}
-
 export function renderChangeImageButton(
   edgeless: EdgelessRootBlockComponent,
   images?: ImageBlockModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts
@@ -294,11 +294,3 @@ export function renderMindmapButton(
     </edgeless-change-mindmap-button>
   `;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-mindmap-style-panel': EdgelessChangeMindmapStylePanel;
-    'edgeless-change-mindmap-layout-panel': EdgelessChangeMindmapLayoutPanel;
-    'edgeless-change-mindmap-button': EdgelessChangeMindmapButton;
-  }
-}
diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
@@ -481,12 +481,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
   accessor quickConnectButton!: TemplateResult<1> | typeof nothing;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-note-button': EdgelessChangeNoteButton;
-  }
-}
-
 export function renderNoteButton(
   edgeless: EdgelessRootBlockComponent,
   notes?: NoteBlockModel[],

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
@@ -496,12 +496,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
   accessor fillColorButton!: EdgelessColorPickerButton;
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-shape-button': EdgelessChangeShapeButton;
-  }
-}
-
 export function renderChangeShapeButton(
   edgeless: EdgelessRootBlockComponent,
   elements?: ShapeElementModel[]

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -505,9 +505,3 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
   @query('edgeless-color-picker-button.text-color')
   accessor textColorButton!: EdgelessColorPickerButton;
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-change-text-menu': EdgelessChangeTextMenu;
-  }
-}