From 468db9f3eb5c92e658a3304881450c6b4e3345b7 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Mon, 28 Apr 2025 14:38:26 +0000 Subject: [PATCH] feat(editor): edgeless zoom toolbar widget extension (#12037) Closes: BS-3363 --- blocksuite/affine/all/package.json | 1 + blocksuite/affine/all/src/extensions/view.ts | 2 + .../widgets/edgeless-zoom-toolbar/index.ts | 1 + .../src/widgets/edgeless-zoom-toolbar/view.ts | 1 + blocksuite/affine/all/tsconfig.json | 1 + .../root/src/edgeless/edgeless-root-spec.ts | 7 ---- blocksuite/affine/blocks/root/src/effects.ts | 18 -------- .../affine/blocks/root/src/widgets/index.ts | 1 - .../edgeless-zoom-toolbar/package.json | 41 +++++++++++++++++++ .../edgeless-zoom-toolbar/src/effects.ts | 15 +++++++ .../edgeless-zoom-toolbar/src}/index.ts | 9 +++- .../widgets/edgeless-zoom-toolbar/src/view.ts | 23 +++++++++++ .../src}/zoom-bar-toggle-button.ts | 0 .../src}/zoom-toolbar.ts | 0 .../edgeless-zoom-toolbar/tsconfig.json | 18 ++++++++ tools/utils/src/workspace.gen.ts | 15 +++++++ tsconfig.json | 1 + yarn.lock | 23 +++++++++++ 18 files changed, 150 insertions(+), 27 deletions(-) create mode 100644 blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/index.ts create mode 100644 blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/view.ts create mode 100644 blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json create mode 100644 blocksuite/affine/widgets/edgeless-zoom-toolbar/src/effects.ts rename blocksuite/affine/{blocks/root/src/widgets/edgeless-zoom-toolbar => widgets/edgeless-zoom-toolbar/src}/index.ts (86%) create mode 100644 blocksuite/affine/widgets/edgeless-zoom-toolbar/src/view.ts rename blocksuite/affine/{blocks/root/src/widgets/edgeless-zoom-toolbar => widgets/edgeless-zoom-toolbar/src}/zoom-bar-toggle-button.ts (100%) rename blocksuite/affine/{blocks/root/src/widgets/edgeless-zoom-toolbar => widgets/edgeless-zoom-toolbar/src}/zoom-toolbar.ts (100%) create mode 100644 blocksuite/affine/widgets/edgeless-zoom-toolbar/tsconfig.json diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json index bac7073e1c..eb5014174b 100644 --- a/blocksuite/affine/all/package.json +++ b/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:*", diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts index 10e6529e51..fd5301db42 100644 --- a/blocksuite/affine/all/src/extensions/view.ts +++ b/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, ]; } diff --git a/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/index.ts b/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/index.ts new file mode 100644 index 0000000000..5271b30fd3 --- /dev/null +++ b/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/index.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-edgeless-zoom-toolbar'; diff --git a/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/view.ts b/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/view.ts new file mode 100644 index 0000000000..a8598bdcdb --- /dev/null +++ b/blocksuite/affine/all/src/widgets/edgeless-zoom-toolbar/view.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-edgeless-zoom-toolbar/view'; diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json index ea711b96c4..c4c25c4ad4 100644 --- a/blocksuite/affine/all/tsconfig.json +++ b/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" }, diff --git a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts index 9c8392c1a9..3678d0aca5 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts +++ b/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, diff --git a/blocksuite/affine/blocks/root/src/effects.ts b/blocksuite/affine/blocks/root/src/effects.ts index b2619f67fe..dd23485f8d 100644 --- a/blocksuite/affine/blocks/root/src/effects.ts +++ b/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; } } diff --git a/blocksuite/affine/blocks/root/src/widgets/index.ts b/blocksuite/affine/blocks/root/src/widgets/index.ts index 76a088a3c8..e1476732c6 100644 --- a/blocksuite/affine/blocks/root/src/widgets/index.ts +++ b/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'; diff --git a/blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json b/blocksuite/affine/widgets/edgeless-zoom-toolbar/package.json new file mode 100644 index 0000000000..ae609e9aac --- /dev/null +++ b/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" +} diff --git a/blocksuite/affine/widgets/edgeless-zoom-toolbar/src/effects.ts b/blocksuite/affine/widgets/edgeless-zoom-toolbar/src/effects.ts new file mode 100644 index 0000000000..23931066af --- /dev/null +++ b/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 + ); +} diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts b/blocksuite/affine/widgets/edgeless-zoom-toolbar/src/index.ts similarity index 86% rename from blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts rename to blocksuite/affine/widgets/edgeless-zoom-toolbar/src/index.ts index dd5ccf4ace..4e5e72188a 100644 --- a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts +++ b/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