feat(editor): edgeless zoom toolbar widget extension (#12037)

Closes: BS-3363

blocksuite/affine/all/package.json

@@ -57,6 +57,7 @@
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-zoom-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
     "@blocksuite/affine-widget-linked-doc": "workspace:*",

blocksuite/affine/all/src/extensions/view.ts

@@ -35,6 +35,7 @@ import { ReferenceViewExtension } from '@blocksuite/affine-inline-reference/view
 import { DragHandleViewExtension } from '@blocksuite/affine-widget-drag-handle/view';
 import { EdgelessAutoConnectViewExtension } from '@blocksuite/affine-widget-edgeless-auto-connect/view';
 import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-toolbar/view';
+import { EdgelessZoomToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-zoom-toolbar/view';
 import { FrameTitleViewExtension } from '@blocksuite/affine-widget-frame-title/view';
 import { KeyboardToolbarViewExtension } from '@blocksuite/affine-widget-keyboard-toolbar/view';
 import { LinkedDocViewExtension } from '@blocksuite/affine-widget-linked-doc/view';
@@ -102,5 +103,6 @@ export function getInternalViewExtensions() {
     SlashMenuViewExtension,
     ToolbarViewExtension,
     ViewportOverlayViewExtension,
+    EdgelessZoomToolbarViewExtension,
   ];
 }

blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-zoom-toolbar';

blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-zoom-toolbar/view';

blocksuite/affine/all/tsconfig.json

@@ -54,6 +54,7 @@
     { "path": "../widgets/drag-handle" },
     { "path": "../widgets/edgeless-auto-connect" },
     { "path": "../widgets/edgeless-toolbar" },
+    { "path": "../widgets/edgeless-zoom-toolbar" },
     { "path": "../widgets/frame-title" },
     { "path": "../widgets/keyboard-toolbar" },
     { "path": "../widgets/linked-doc" },

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

@@ -9,7 +9,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
 import { CommonSpecs } from '../common-specs/index.js';
-import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
 import { EdgelessClipboardController } from './clipboard/clipboard.js';
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
 import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
@@ -17,11 +16,6 @@ import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selec
 import { quickTools } from './components/toolbar/tools.js';
 import { EdgelessRootService } from './edgeless-root-service.js';
 
-export const edgelessZoomToolbarWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
-  literal`${unsafeStatic(AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET)}`
-);
 export const edgelessDraggingAreaWidget = WidgetViewExtension(
   'affine:page',
   EDGELESS_DRAGGING_AREA_WIDGET,
@@ -57,7 +51,6 @@ const EdgelessCommonExtension: ExtensionType[] = [
 export const EdgelessRootBlockSpec: ExtensionType[] = [
   ...EdgelessCommonExtension,
   BlockViewExtension('affine:page', literal`affine-edgeless-root`),
-  edgelessZoomToolbarWidget,
   edgelessDraggingAreaWidget,
   noteSlicerWidget,
   edgelessSelectedRectWidget,

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

@@ -21,12 +21,6 @@ import {
   PageRootBlockComponent,
   PreviewRootBlockComponent,
 } from './index.js';
-import {
-  AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
-  AffineEdgelessZoomToolbarWidget,
-} from './widgets/edgeless-zoom-toolbar/index.js';
-import { ZoomBarToggleButton } from './widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
-import { EdgelessZoomToolbar } from './widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
 import {
   AFFINE_PAGE_DRAGGING_AREA_WIDGET,
   AffinePageDraggingAreaWidget,
@@ -55,10 +49,6 @@ function registerWidgets() {
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
     AffinePageDraggingAreaWidget
   );
-  customElements.define(
-    AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
-    AffineEdgelessZoomToolbarWidget
-  );
 }
 
 function registerEdgelessToolbarComponents() {
@@ -73,10 +63,6 @@ function registerEdgelessToolbarComponents() {
 }
 
 function registerMiscComponents() {
-  // Toolbar and UI components
-  customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
-  customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
-
   // Auto-complete components
   customElements.define(
     'edgeless-auto-complete-panel',
@@ -111,9 +97,5 @@ declare global {
     'toolbar-arrow-up-icon': ToolbarArrowUpIcon;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'affine-page-root': PageRootBlockComponent;
-    'zoom-bar-toggle-button': ZoomBarToggleButton;
-    'edgeless-zoom-toolbar': EdgelessZoomToolbar;
-
-    [AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET]: AffineEdgelessZoomToolbarWidget;
   }
 }

blocksuite/affine/blocks/root/src/widgets/index.ts

@@ -1,2 +1 @@
-export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';

blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@blocksuite/affine-widget-edgeless-zoom-toolbar",
+  "description": "Affine edgeless zoom toolbar widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

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

@@ -0,0 +1,15 @@
+import {
+  AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
+  AffineEdgelessZoomToolbarWidget,
+} from '.';
+import { ZoomBarToggleButton } from './zoom-bar-toggle-button';
+import { EdgelessZoomToolbar } from './zoom-toolbar';
+
+export function effects() {
+  customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
+  customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
+  customElements.define(
+    AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
+    AffineEdgelessZoomToolbarWidget
+  );
+}

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

@@ -1,10 +1,11 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
-import { WidgetComponent } from '@blocksuite/std';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import { effect } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
 
 export const AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET =
   'affine-edgeless-zoom-toolbar-widget';
@@ -85,3 +86,9 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<RootBlockMo
   @state()
   private accessor _hide = false;
 }
+
+export const edgelessZoomToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET)}`
+);

blocksuite/affine/widgets/edgeless-zoom-toolbar/src/view.ts

@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import { edgelessZoomToolbarWidget } from './index';
+
+export class EdgelessZoomToolbarViewExtension extends ViewExtensionProvider {
+  override name = 'affine-edgeless-zoom-toolbar-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (this.isEdgeless(context.scope)) {
+      context.register(edgelessZoomToolbarWidget);
+    }
+  }
+}

blocksuite/affine/widgets/edgeless-zoom-toolbar/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/surface" },
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" }
+  ]
+}