From 59d4942d9b72c34699302ca151312452c65c6c47 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Sat, 26 Apr 2025 11:27:13 +0000 Subject: [PATCH] feat(editor): slash menu and toolbar widget extensions (#12002) Closes: BS-3226 Closes: BS-3227 Closes: BS-3228 Closes: BS-3229 ## Summary by CodeRabbit - **New Features** - Introduced new view extensions for remote selection, scroll anchoring, slash menu, and toolbar widgets, enhancing customization and integration capabilities. - **Refactor** - Updated export paths and module structure for widget-related packages to improve modularity and accessibility. - Reorganized internal dependencies and removed redundant widget imports from core block packages. - Refactored edgeless-related widgets and components to use a standardized scope interface for improved context and state management. - Centralized graphics controller access and slot management through standardized context objects. - **Chores** - Added and updated dependencies to streamline extension loading and workspace management. --- blocksuite/affine/all/package.json | 12 +++-- .../affine/all/src/extensions/effects.ts | 9 ---- blocksuite/affine/all/src/extensions/view.ts | 8 +++ .../index.ts} | 0 .../all/src/widgets/remote-selection/view.ts | 1 + .../index.ts} | 0 .../all/src/widgets/scroll-anchoring/view.ts | 1 + .../{slash-menu.ts => slash-menu/index.ts} | 0 .../affine/all/src/widgets/slash-menu/view.ts | 1 + .../widgets/{toolbar.ts => toolbar/index.ts} | 0 .../affine/all/src/widgets/toolbar/view.ts | 1 + blocksuite/affine/blocks/frame/src/effects.ts | 10 ++++ .../src/present/navigator-bg-widget.ts} | 0 blocksuite/affine/blocks/frame/src/view.ts | 2 + blocksuite/affine/blocks/root/package.json | 2 - .../blocks/root/src/common-specs/index.ts | 8 --- .../rects/edgeless-dragging-area-rect.ts | 18 +++---- .../root/src/edgeless/edgeless-root-spec.ts | 4 -- blocksuite/affine/blocks/root/src/effects.ts | 11 ---- .../widgets/edgeless-zoom-toolbar/index.ts | 20 ++++---- .../zoom-bar-toggle-button.ts | 16 +++--- .../edgeless-zoom-toolbar/zoom-toolbar.ts | 51 ++++++++++--------- blocksuite/affine/blocks/root/tsconfig.json | 2 - .../widgets/remote-selection/package.json | 4 +- .../widgets/remote-selection/src/view.ts | 27 ++++++++++ .../widgets/remote-selection/tsconfig.json | 1 + .../widgets/scroll-anchoring/package.json | 4 +- .../widgets/scroll-anchoring/src/view.ts | 21 ++++++++ .../widgets/scroll-anchoring/tsconfig.json | 1 + .../affine/widgets/slash-menu/package.json | 4 +- .../affine/widgets/slash-menu/src/view.ts | 21 ++++++++ .../affine/widgets/slash-menu/tsconfig.json | 1 + .../affine/widgets/toolbar/package.json | 4 +- blocksuite/affine/widgets/toolbar/src/view.ts | 21 ++++++++ .../affine/widgets/toolbar/tsconfig.json | 1 + tools/utils/src/workspace.gen.ts | 6 ++- yarn.lock | 6 ++- 37 files changed, 200 insertions(+), 99 deletions(-) rename blocksuite/affine/all/src/widgets/{remote-selection.ts => remote-selection/index.ts} (100%) create mode 100644 blocksuite/affine/all/src/widgets/remote-selection/view.ts rename blocksuite/affine/all/src/widgets/{scroll-anchoring.ts => scroll-anchoring/index.ts} (100%) create mode 100644 blocksuite/affine/all/src/widgets/scroll-anchoring/view.ts rename blocksuite/affine/all/src/widgets/{slash-menu.ts => slash-menu/index.ts} (100%) create mode 100644 blocksuite/affine/all/src/widgets/slash-menu/view.ts rename blocksuite/affine/all/src/widgets/{toolbar.ts => toolbar/index.ts} (100%) create mode 100644 blocksuite/affine/all/src/widgets/toolbar/view.ts rename blocksuite/affine/blocks/{root/src/widgets/edgeless-navigator-bg/index.ts => frame/src/present/navigator-bg-widget.ts} (100%) create mode 100644 blocksuite/affine/widgets/remote-selection/src/view.ts create mode 100644 blocksuite/affine/widgets/scroll-anchoring/src/view.ts create mode 100644 blocksuite/affine/widgets/slash-menu/src/view.ts create mode 100644 blocksuite/affine/widgets/toolbar/src/view.ts diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json index 1e60a4fda6..e60ab4da32 100644 --- a/blocksuite/affine/all/package.json +++ b/blocksuite/affine/all/package.json @@ -172,10 +172,14 @@ "./widgets/frame-title/view": "./src/widgets/frame-title/view.ts", "./widgets/linked-doc": "./src/widgets/linked-doc/index.ts", "./widgets/linked-doc/view": "./src/widgets/linked-doc/view.ts", - "./widgets/remote-selection": "./src/widgets/remote-selection.ts", - "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts", - "./widgets/slash-menu": "./src/widgets/slash-menu.ts", - "./widgets/toolbar": "./src/widgets/toolbar.ts", + "./widgets/remote-selection": "./src/widgets/remote-selection/index.ts", + "./widgets/remote-selection/view": "./src/widgets/remote-selection/view.ts", + "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring/index.ts", + "./widgets/scroll-anchoring/view": "./src/widgets/scroll-anchoring/view.ts", + "./widgets/slash-menu": "./src/widgets/slash-menu/index.ts", + "./widgets/slash-menu/view": "./src/widgets/slash-menu/view.ts", + "./widgets/toolbar": "./src/widgets/toolbar/index.ts", + "./widgets/toolbar/view": "./src/widgets/toolbar/view.ts", "./widgets/keyboard-toolbar": "./src/widgets/keyboard-toolbar/index.ts", "./widgets/keyboard-toolbar/view": "./src/widgets/keyboard-toolbar/view.ts", "./fragments/doc-title": "./src/fragments/doc-title.ts", diff --git a/blocksuite/affine/all/src/extensions/effects.ts b/blocksuite/affine/all/src/extensions/effects.ts index 3eddaad75b..d5ee1b0979 100644 --- a/blocksuite/affine/all/src/extensions/effects.ts +++ b/blocksuite/affine/all/src/extensions/effects.ts @@ -29,10 +29,6 @@ import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment- import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects'; import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects'; import { effects as richTextEffects } from '@blocksuite/affine-rich-text/effects'; -import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects'; -import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects'; -import { effects as widgetSlashMenuEffects } from '@blocksuite/affine-widget-slash-menu/effects'; -import { effects as widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects'; import { effects as dataViewEffects } from '@blocksuite/data-view/effects'; import { effects as stdEffects } from '@blocksuite/std/effects'; @@ -65,11 +61,6 @@ export function effects() { componentEdgelessShapeColorPickerEffects(); componentOpenDocDropdownMenuEffects(); - widgetScrollAnchoringEffects(); - widgetRemoteSelectionEffects(); - widgetSlashMenuEffects(); - widgetToolbarEffects(); - fragmentDocTitleEffects(); fragmentFramePanelEffects(); fragmentOutlineEffects(); diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts index f319ca8cd0..960ff7480d 100644 --- a/blocksuite/affine/all/src/extensions/view.ts +++ b/blocksuite/affine/all/src/extensions/view.ts @@ -36,6 +36,10 @@ import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless 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'; +import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-selection/view'; +import { ScrollAnchoringViewExtension } from '@blocksuite/affine-widget-scroll-anchoring/view'; +import { SlashMenuViewExtension } from '@blocksuite/affine-widget-slash-menu/view'; +import { ToolbarViewExtension } from '@blocksuite/affine-widget-toolbar/view'; import { MigratingViewExtension } from './migrating-view'; @@ -87,5 +91,9 @@ export function getInternalViewExtensions() { FrameTitleViewExtension, KeyboardToolbarViewExtension, LinkedDocViewExtension, + RemoteSelectionViewExtension, + ScrollAnchoringViewExtension, + SlashMenuViewExtension, + ToolbarViewExtension, ]; } diff --git a/blocksuite/affine/all/src/widgets/remote-selection.ts b/blocksuite/affine/all/src/widgets/remote-selection/index.ts similarity index 100% rename from blocksuite/affine/all/src/widgets/remote-selection.ts rename to blocksuite/affine/all/src/widgets/remote-selection/index.ts diff --git a/blocksuite/affine/all/src/widgets/remote-selection/view.ts b/blocksuite/affine/all/src/widgets/remote-selection/view.ts new file mode 100644 index 0000000000..1ccd6fd869 --- /dev/null +++ b/blocksuite/affine/all/src/widgets/remote-selection/view.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-remote-selection/view'; diff --git a/blocksuite/affine/all/src/widgets/scroll-anchoring.ts b/blocksuite/affine/all/src/widgets/scroll-anchoring/index.ts similarity index 100% rename from blocksuite/affine/all/src/widgets/scroll-anchoring.ts rename to blocksuite/affine/all/src/widgets/scroll-anchoring/index.ts diff --git a/blocksuite/affine/all/src/widgets/scroll-anchoring/view.ts b/blocksuite/affine/all/src/widgets/scroll-anchoring/view.ts new file mode 100644 index 0000000000..3474abf263 --- /dev/null +++ b/blocksuite/affine/all/src/widgets/scroll-anchoring/view.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-scroll-anchoring/view'; diff --git a/blocksuite/affine/all/src/widgets/slash-menu.ts b/blocksuite/affine/all/src/widgets/slash-menu/index.ts similarity index 100% rename from blocksuite/affine/all/src/widgets/slash-menu.ts rename to blocksuite/affine/all/src/widgets/slash-menu/index.ts diff --git a/blocksuite/affine/all/src/widgets/slash-menu/view.ts b/blocksuite/affine/all/src/widgets/slash-menu/view.ts new file mode 100644 index 0000000000..00d3f98aa6 --- /dev/null +++ b/blocksuite/affine/all/src/widgets/slash-menu/view.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-slash-menu/view'; diff --git a/blocksuite/affine/all/src/widgets/toolbar.ts b/blocksuite/affine/all/src/widgets/toolbar/index.ts similarity index 100% rename from blocksuite/affine/all/src/widgets/toolbar.ts rename to blocksuite/affine/all/src/widgets/toolbar/index.ts diff --git a/blocksuite/affine/all/src/widgets/toolbar/view.ts b/blocksuite/affine/all/src/widgets/toolbar/view.ts new file mode 100644 index 0000000000..07199d52b5 --- /dev/null +++ b/blocksuite/affine/all/src/widgets/toolbar/view.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-widget-toolbar/view'; diff --git a/blocksuite/affine/blocks/frame/src/effects.ts b/blocksuite/affine/blocks/frame/src/effects.ts index ec5ce9746b..7376b1d7d1 100644 --- a/blocksuite/affine/blocks/frame/src/effects.ts +++ b/blocksuite/affine/blocks/frame/src/effects.ts @@ -3,6 +3,10 @@ import { PresentationToolbar } from './edgeless-toolbar/presentation-toolbar'; import { FrameBlockComponent } from './frame-block'; import { EdgelessFrameOrderButton } from './present/frame-order-button'; import { EdgelessFrameOrderMenu } from './present/frame-order-menu'; +import { + EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET, + EdgelessNavigatorBlackBackgroundWidget, +} from './present/navigator-bg-widget'; import { EdgelessNavigatorSettingButton } from './present/navigator-setting-button'; import { EdgelessPresentButton } from './present/present-button'; @@ -21,6 +25,11 @@ export function effects() { ); customElements.define('edgeless-present-button', EdgelessPresentButton); customElements.define('presentation-toolbar', PresentationToolbar); + // Navigation components + customElements.define( + EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET, + EdgelessNavigatorBlackBackgroundWidget + ); } declare global { @@ -33,5 +42,6 @@ declare global { 'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton; 'edgeless-present-button': EdgelessPresentButton; 'presentation-toolbar': PresentationToolbar; + 'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget; } } diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts b/blocksuite/affine/blocks/frame/src/present/navigator-bg-widget.ts similarity index 100% rename from blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts rename to blocksuite/affine/blocks/frame/src/present/navigator-bg-widget.ts diff --git a/blocksuite/affine/blocks/frame/src/view.ts b/blocksuite/affine/blocks/frame/src/view.ts index ee8b466d4a..9bc596b320 100644 --- a/blocksuite/affine/blocks/frame/src/view.ts +++ b/blocksuite/affine/blocks/frame/src/view.ts @@ -9,6 +9,7 @@ import { FrameHighlightManager } from './frame-highlight-manager'; import { FrameBlockSpec } from './frame-spec'; import { FrameTool } from './frame-tool'; import { frameToolbarExtension } from './frame-toolbar'; +import { edgelessNavigatorBgWidget } from './present/navigator-bg-widget'; import { PresentTool } from './preset-tool'; export class FrameViewExtension extends ViewExtensionProvider { @@ -28,6 +29,7 @@ export class FrameViewExtension extends ViewExtensionProvider { context.register(PresentTool); context.register(frameQuickTool); context.register(frameToolbarExtension); + context.register(edgelessNavigatorBgWidget); } } } diff --git a/blocksuite/affine/blocks/root/package.json b/blocksuite/affine/blocks/root/package.json index 98373b9de9..ae879858ca 100644 --- a/blocksuite/affine/blocks/root/package.json +++ b/blocksuite/affine/blocks/root/package.json @@ -34,8 +34,6 @@ "@blocksuite/affine-rich-text": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*", - "@blocksuite/affine-widget-remote-selection": "workspace:*", - "@blocksuite/affine-widget-scroll-anchoring": "workspace:*", "@blocksuite/affine-widget-slash-menu": "workspace:*", "@blocksuite/affine-widget-toolbar": "workspace:*", "@blocksuite/data-view": "workspace:*", diff --git a/blocksuite/affine/blocks/root/src/common-specs/index.ts b/blocksuite/affine/blocks/root/src/common-specs/index.ts index 84657de6e6..0350e6a3fa 100644 --- a/blocksuite/affine/blocks/root/src/common-specs/index.ts +++ b/blocksuite/affine/blocks/root/src/common-specs/index.ts @@ -10,10 +10,6 @@ import { ToolbarModuleExtension, ToolbarRegistryExtension, } from '@blocksuite/affine-shared/services'; -import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection'; -import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring'; -import { SlashMenuExtension } from '@blocksuite/affine-widget-slash-menu'; -import { toolbarWidget } from '@blocksuite/affine-widget-toolbar'; import { BlockFlavourIdentifier, FlavourExtension } from '@blocksuite/std'; import type { ExtensionType } from '@blocksuite/store'; @@ -35,11 +31,7 @@ export const CommonSpecs: ExtensionType[] = [ AutoClearSelectionService, ...RootBlockAdapterExtensions, ...clipboardConfigs, - SlashMenuExtension, - docRemoteSelectionWidget, viewportOverlayWidget, - scrollAnchoringWidget, - toolbarWidget, fallbackKeymap, ToolbarModuleExtension({ diff --git a/blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts b/blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts index 3bd1857c2d..12c601bb69 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts +++ b/blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts @@ -1,10 +1,10 @@ import type { RootBlockModel } from '@blocksuite/affine-model'; import { WidgetComponent } from '@blocksuite/std'; +import { GfxControllerIdentifier } from '@blocksuite/std/gfx'; import { cssVarV2 } from '@toeverything/theme/v2'; import { css, html, nothing, unsafeCSS } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; -import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js'; import { DefaultModeDragType, DefaultTool, @@ -12,10 +12,7 @@ import { export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect'; -export class EdgelessDraggingAreaRectWidget extends WidgetComponent< - RootBlockModel, - EdgelessRootBlockComponent -> { +export class EdgelessDraggingAreaRectWidget extends WidgetComponent { static override styles = css` .affine-edgeless-dragging-area { position: absolute; @@ -34,12 +31,13 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent< } `; + get gfx() { + return this.std.get(GfxControllerIdentifier); + } + override render() { - if (!this.block) { - return nothing; - } - const rect = this.block.gfx.tool.draggingViewArea$.value; - const tool = this.block.gfx.tool.currentTool$.value; + const rect = this.gfx.tool.draggingViewArea$.value; + const tool = this.gfx.tool.currentTool$.value; if ( rect.w === 0 || 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 a86c30f9e9..ae4e1f7c8e 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts +++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts @@ -15,7 +15,6 @@ import { EdgelessClipboardFrameConfig } from '@blocksuite/affine-block-frame'; import { EdgelessClipboardImageConfig } from '@blocksuite/affine-block-image'; import { EdgelessClipboardNoteConfig } from '@blocksuite/affine-block-note'; import { ViewportElementExtension } from '@blocksuite/affine-shared/services'; -import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection'; import { BlockViewExtension, LifeCycleWatcher, @@ -26,7 +25,6 @@ import type { ExtensionType } from '@blocksuite/store'; import { literal, unsafeStatic } from 'lit/static-html.js'; import { CommonSpecs } from '../common-specs/index.js'; -import { edgelessNavigatorBgWidget } from '../widgets/edgeless-navigator-bg/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'; @@ -94,11 +92,9 @@ const EdgelessCommonExtension: ExtensionType[] = [ export const EdgelessRootBlockSpec: ExtensionType[] = [ ...EdgelessCommonExtension, BlockViewExtension('affine:page', literal`affine-edgeless-root`), - edgelessRemoteSelectionWidget, edgelessZoomToolbarWidget, edgelessDraggingAreaWidget, noteSlicerWidget, - edgelessNavigatorBgWidget, edgelessSelectedRectWidget, EdgelessClipboardController, ]; diff --git a/blocksuite/affine/blocks/root/src/effects.ts b/blocksuite/affine/blocks/root/src/effects.ts index 4abbea7a99..9386196d7b 100644 --- a/blocksuite/affine/blocks/root/src/effects.ts +++ b/blocksuite/affine/blocks/root/src/effects.ts @@ -22,10 +22,6 @@ import { PageRootBlockComponent, PreviewRootBlockComponent, } from './index.js'; -import { - EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET, - EdgelessNavigatorBlackBackgroundWidget, -} from './widgets/edgeless-navigator-bg/index.js'; import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET, AffineEdgelessZoomToolbarWidget, @@ -104,12 +100,6 @@ function registerMiscComponents() { // Note and template components customElements.define(NOTE_SLICER_WIDGET, NoteSlicer); - // Navigation components - customElements.define( - EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET, - EdgelessNavigatorBlackBackgroundWidget - ); - // Dragging area components customElements.define( EDGELESS_DRAGGING_AREA_WIDGET, @@ -128,7 +118,6 @@ declare global { 'edgeless-auto-complete-panel': EdgelessAutoCompletePanel; 'edgeless-auto-complete': EdgelessAutoComplete; 'note-slicer': NoteSlicer; - 'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget; 'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget; 'edgeless-selected-rect': EdgelessSelectedRectWidget; 'edgeless-slide-menu': EdgelessSlideMenu; diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts index 74d6701a8e..dd5ccf4ace 100644 --- a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts +++ b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts @@ -1,19 +1,15 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import type { RootBlockModel } from '@blocksuite/affine-model'; import { WidgetComponent } 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 type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; - export const AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET = 'affine-edgeless-zoom-toolbar-widget'; -export class AffineEdgelessZoomToolbarWidget extends WidgetComponent< - RootBlockModel, - EdgelessRootBlockComponent -> { +export class AffineEdgelessZoomToolbarWidget extends WidgetComponent { static override styles = css` :host { position: absolute; @@ -43,12 +39,16 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent< return this.block; } + get gfx() { + return this.std.get(GfxControllerIdentifier); + } + override connectedCallback() { super.connectedCallback(); this.disposables.add( effect(() => { - const currentTool = this.edgeless?.gfx.tool.currentToolName$.value; + const currentTool = this.gfx.tool.currentToolName$.value; if (currentTool !== 'frameNavigator') { this._hide = false; @@ -77,10 +77,8 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent< } return html` - - + + `; } diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts index 2e5cbb956b..231dcd3735 100644 --- a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts +++ b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts @@ -1,13 +1,13 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { createLitPortal } from '@blocksuite/affine-components/portal'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/lit'; import { MoreHorizontalIcon } from '@blocksuite/icons/lit'; +import type { BlockStdScope } from '@blocksuite/std'; import { offset } from '@floating-ui/dom'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; -import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; - export class ZoomBarToggleButton extends WithDisposable(LitElement) { static override styles = css` :host { @@ -33,6 +33,10 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) { } } + private get _slots() { + return this.std.get(EdgelessLegacySlotIdentifier); + } + private _toggleZoomMenu() { if (this._abortController && !this._abortController.signal.aborted) { this._closeZoomMenu(); @@ -45,7 +49,7 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) { }); createLitPortal({ template: html``, container: this._toggleButton, @@ -69,14 +73,14 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) { override firstUpdated() { const { disposables } = this; disposables.add( - this.edgeless.slots.readonlyUpdated.subscribe(() => { + this._slots.readonlyUpdated.subscribe(() => { this.requestUpdate(); }) ); } override render() { - if (this.edgeless.doc.readonly) { + if (this.std.store.readonly) { return nothing; } @@ -105,5 +109,5 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) { private accessor _toggleButton!: HTMLElement; @property({ attribute: false }) - accessor edgeless!: EdgelessRootBlockComponent; + accessor std!: BlockStdScope; } diff --git a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts index 71e5a00b89..8286eb298f 100644 --- a/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts +++ b/blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts @@ -1,13 +1,19 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { stopPropagation } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/lit'; import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit'; -import { ZOOM_STEP } from '@blocksuite/std/gfx'; +import type { BlockStdScope } from '@blocksuite/std'; +import { + GfxControllerIdentifier, + ZOOM_MAX, + ZOOM_MIN, + ZOOM_STEP, +} from '@blocksuite/std/gfx'; import { effect } from '@preact/signals-core'; import { baseTheme } from '@toeverything/theme'; import { css, html, LitElement, nothing, unsafeCSS } from 'lit'; import { property } from 'lit/decorators.js'; - -import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; +import clamp from 'lodash-es/clamp'; export class EdgelessZoomToolbar extends WithDisposable(LitElement) { static override styles = css` @@ -79,26 +85,30 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { } `; - get edgelessService() { - return this.edgeless.service; + get slots() { + return this.std.get(EdgelessLegacySlotIdentifier); } get gfx() { - return this.edgeless.gfx; + return this.std.get(GfxControllerIdentifier); } get edgelessTool() { - return this.edgeless.gfx.tool.currentToolOption$.peek(); + return this.gfx.tool.currentToolOption$.peek(); } get locked() { - return this.edgelessService.locked; + return this.viewport.locked; } get viewport() { - return this.edgelessService.viewport; + return this.gfx.viewport; } + setZoomByStep = (step: number) => { + this.viewport.smoothZoom(clamp(this.zoom + step, ZOOM_MIN, ZOOM_MAX)); + }; + get zoom() { if (!this.viewport) { console.error('Something went wrong, viewport is not available'); @@ -107,11 +117,6 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { return this.viewport.zoom; } - constructor(edgeless: EdgelessRootBlockComponent) { - super(); - this.edgeless = edgeless; - } - private _isVerticalBar() { return this.layout === 'vertical'; } @@ -121,7 +126,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { this.disposables.add( effect(() => { - this.edgeless.gfx.tool.currentToolName$.value; + this.gfx.tool.currentToolName$.value; this.requestUpdate(); }) ); @@ -130,19 +135,17 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { override firstUpdated() { const { disposables } = this; disposables.add( - this.edgeless.service.viewport.viewportUpdated.subscribe(() => - this.requestUpdate() - ) + this.viewport.viewportUpdated.subscribe(() => this.requestUpdate()) ); disposables.add( - this.edgeless.slots.readonlyUpdated.subscribe(() => { + this.slots.readonlyUpdated.subscribe(() => { this.requestUpdate(); }) ); } override render() { - if (this.edgeless.doc.readonly) { + if (this.std.store.readonly) { return nothing; } @@ -173,7 +176,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { .tooltip=${'Zoom out'} .tipPosition=${this._isVerticalBar() ? 'right' : 'top'} .arrow=${!this._isVerticalBar()} - @click=${() => this.edgelessService.setZoomByStep(-ZOOM_STEP)} + @click=${() => this.setZoomByStep(-ZOOM_STEP)} .iconContainerPadding=${4} .iconSize=${'24px'} .disabled=${locked} @@ -191,7 +194,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { .tooltip=${'Zoom in'} .tipPosition=${this._isVerticalBar() ? 'right' : 'top'} .arrow=${!this._isVerticalBar()} - @click=${() => this.edgelessService.setZoomByStep(ZOOM_STEP)} + @click=${() => this.setZoomByStep(ZOOM_STEP)} .iconContainerPadding=${4} .iconSize=${'24px'} .disabled=${locked} @@ -203,8 +206,8 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) { } @property({ attribute: false }) - accessor edgeless: EdgelessRootBlockComponent; + accessor layout: 'horizontal' | 'vertical' = 'horizontal'; @property({ attribute: false }) - accessor layout: 'horizontal' | 'vertical' = 'horizontal'; + accessor std!: BlockStdScope; } diff --git a/blocksuite/affine/blocks/root/tsconfig.json b/blocksuite/affine/blocks/root/tsconfig.json index 8fd44d52c0..8004e7c23a 100644 --- a/blocksuite/affine/blocks/root/tsconfig.json +++ b/blocksuite/affine/blocks/root/tsconfig.json @@ -31,8 +31,6 @@ { "path": "../../rich-text" }, { "path": "../../shared" }, { "path": "../../widgets/edgeless-toolbar" }, - { "path": "../../widgets/remote-selection" }, - { "path": "../../widgets/scroll-anchoring" }, { "path": "../../widgets/slash-menu" }, { "path": "../../widgets/toolbar" }, { "path": "../../data-view" }, diff --git a/blocksuite/affine/widgets/remote-selection/package.json b/blocksuite/affine/widgets/remote-selection/package.json index 272b772d3d..d9e2f0be6c 100644 --- a/blocksuite/affine/widgets/remote-selection/package.json +++ b/blocksuite/affine/widgets/remote-selection/package.json @@ -12,6 +12,7 @@ "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:*", @@ -26,7 +27,8 @@ }, "exports": { ".": "./src/index.ts", - "./effects": "./src/effects.ts" + "./effects": "./src/effects.ts", + "./view": "./src/view.ts" }, "files": [ "src", diff --git a/blocksuite/affine/widgets/remote-selection/src/view.ts b/blocksuite/affine/widgets/remote-selection/src/view.ts new file mode 100644 index 0000000000..a5670972bb --- /dev/null +++ b/blocksuite/affine/widgets/remote-selection/src/view.ts @@ -0,0 +1,27 @@ +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine-ext-loader'; + +import { effects } from './effects'; +import { + docRemoteSelectionWidget, + edgelessRemoteSelectionWidget, +} from './index'; + +export class RemoteSelectionViewExtension extends ViewExtensionProvider { + override name = 'affine-remote-selection-widget'; + + override effect() { + super.effect(); + effects(); + } + + override setup(context: ViewExtensionContext) { + super.setup(context); + context.register(docRemoteSelectionWidget); + if (context.scope === 'edgeless') { + context.register(edgelessRemoteSelectionWidget); + } + } +} diff --git a/blocksuite/affine/widgets/remote-selection/tsconfig.json b/blocksuite/affine/widgets/remote-selection/tsconfig.json index 15b96d287f..e0af3b05c3 100644 --- a/blocksuite/affine/widgets/remote-selection/tsconfig.json +++ b/blocksuite/affine/widgets/remote-selection/tsconfig.json @@ -9,6 +9,7 @@ "references": [ { "path": "../../blocks/surface" }, { "path": "../../components" }, + { "path": "../../ext-loader" }, { "path": "../../model" }, { "path": "../../shared" }, { "path": "../../../framework/global" }, diff --git a/blocksuite/affine/widgets/scroll-anchoring/package.json b/blocksuite/affine/widgets/scroll-anchoring/package.json index 8ac1ff0f03..730cd4e9b9 100644 --- a/blocksuite/affine/widgets/scroll-anchoring/package.json +++ b/blocksuite/affine/widgets/scroll-anchoring/package.json @@ -10,6 +10,7 @@ "author": "toeverything", "license": "MIT", "dependencies": { + "@blocksuite/affine-ext-loader": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/global": "workspace:*", @@ -21,7 +22,8 @@ }, "exports": { ".": "./src/index.ts", - "./effects": "./src/effects.ts" + "./effects": "./src/effects.ts", + "./view": "./src/view.ts" }, "files": [ "src", diff --git a/blocksuite/affine/widgets/scroll-anchoring/src/view.ts b/blocksuite/affine/widgets/scroll-anchoring/src/view.ts new file mode 100644 index 0000000000..1e3c2543da --- /dev/null +++ b/blocksuite/affine/widgets/scroll-anchoring/src/view.ts @@ -0,0 +1,21 @@ +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine-ext-loader'; + +import { effects } from './effects'; +import { scrollAnchoringWidget } from './index'; + +export class ScrollAnchoringViewExtension extends ViewExtensionProvider { + override name = 'affine-scroll-anchoring-widget'; + + override effect() { + super.effect(); + effects(); + } + + override setup(context: ViewExtensionContext) { + super.setup(context); + context.register(scrollAnchoringWidget); + } +} diff --git a/blocksuite/affine/widgets/scroll-anchoring/tsconfig.json b/blocksuite/affine/widgets/scroll-anchoring/tsconfig.json index 88bc41212d..277f30f1a2 100644 --- a/blocksuite/affine/widgets/scroll-anchoring/tsconfig.json +++ b/blocksuite/affine/widgets/scroll-anchoring/tsconfig.json @@ -7,6 +7,7 @@ }, "include": ["./src"], "references": [ + { "path": "../../ext-loader" }, { "path": "../../model" }, { "path": "../../shared" }, { "path": "../../../framework/global" }, diff --git a/blocksuite/affine/widgets/slash-menu/package.json b/blocksuite/affine/widgets/slash-menu/package.json index 9791aa1c0d..2416978ace 100644 --- a/blocksuite/affine/widgets/slash-menu/package.json +++ b/blocksuite/affine/widgets/slash-menu/package.json @@ -11,6 +11,7 @@ "license": "MIT", "dependencies": { "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-ext-loader": "workspace:*", "@blocksuite/affine-rich-text": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/global": "workspace:*", @@ -27,7 +28,8 @@ }, "exports": { ".": "./src/index.ts", - "./effects": "./src/effects.ts" + "./effects": "./src/effects.ts", + "./view": "./src/view.ts" }, "files": [ "src", diff --git a/blocksuite/affine/widgets/slash-menu/src/view.ts b/blocksuite/affine/widgets/slash-menu/src/view.ts new file mode 100644 index 0000000000..ff717e49b6 --- /dev/null +++ b/blocksuite/affine/widgets/slash-menu/src/view.ts @@ -0,0 +1,21 @@ +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine-ext-loader'; + +import { effects } from './effects'; +import { SlashMenuExtension } from './extensions'; + +export class SlashMenuViewExtension extends ViewExtensionProvider { + override name = 'affine-slash-menu-widget'; + + override effect() { + super.effect(); + effects(); + } + + override setup(context: ViewExtensionContext) { + super.setup(context); + context.register(SlashMenuExtension); + } +} diff --git a/blocksuite/affine/widgets/slash-menu/tsconfig.json b/blocksuite/affine/widgets/slash-menu/tsconfig.json index 0b35973cdd..3ed19011de 100644 --- a/blocksuite/affine/widgets/slash-menu/tsconfig.json +++ b/blocksuite/affine/widgets/slash-menu/tsconfig.json @@ -8,6 +8,7 @@ "include": ["./src"], "references": [ { "path": "../../components" }, + { "path": "../../ext-loader" }, { "path": "../../rich-text" }, { "path": "../../shared" }, { "path": "../../../framework/global" }, diff --git a/blocksuite/affine/widgets/toolbar/package.json b/blocksuite/affine/widgets/toolbar/package.json index aa498babf8..ab65581a19 100644 --- a/blocksuite/affine/widgets/toolbar/package.json +++ b/blocksuite/affine/widgets/toolbar/package.json @@ -14,6 +14,7 @@ "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-block-table": "workspace:*", "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-ext-loader": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/global": "workspace:*", @@ -29,7 +30,8 @@ }, "exports": { ".": "./src/index.ts", - "./effects": "./src/effects.ts" + "./effects": "./src/effects.ts", + "./view": "./src/view.ts" }, "files": [ "src", diff --git a/blocksuite/affine/widgets/toolbar/src/view.ts b/blocksuite/affine/widgets/toolbar/src/view.ts new file mode 100644 index 0000000000..21ae72b400 --- /dev/null +++ b/blocksuite/affine/widgets/toolbar/src/view.ts @@ -0,0 +1,21 @@ +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine-ext-loader'; + +import { toolbarWidget } from '.'; +import { effects } from './effects'; + +export class ToolbarViewExtension extends ViewExtensionProvider { + override name = 'affine-toolbar-widget'; + + override effect() { + super.effect(); + effects(); + } + + override setup(context: ViewExtensionContext) { + super.setup(context); + context.register(toolbarWidget); + } +} diff --git a/blocksuite/affine/widgets/toolbar/tsconfig.json b/blocksuite/affine/widgets/toolbar/tsconfig.json index 025ba43f54..56f02ed4a5 100644 --- a/blocksuite/affine/widgets/toolbar/tsconfig.json +++ b/blocksuite/affine/widgets/toolbar/tsconfig.json @@ -11,6 +11,7 @@ { "path": "../../blocks/surface" }, { "path": "../../blocks/table" }, { "path": "../../components" }, + { "path": "../../ext-loader" }, { "path": "../../model" }, { "path": "../../shared" }, { "path": "../../../framework/global" }, diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 8a6713c3f7..7a24d8b874 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -344,8 +344,6 @@ export const PackageList = [ 'blocksuite/affine/rich-text', 'blocksuite/affine/shared', 'blocksuite/affine/widgets/edgeless-toolbar', - 'blocksuite/affine/widgets/remote-selection', - 'blocksuite/affine/widgets/scroll-anchoring', 'blocksuite/affine/widgets/slash-menu', 'blocksuite/affine/widgets/toolbar', 'blocksuite/affine/data-view', @@ -859,6 +857,7 @@ export const PackageList = [ workspaceDependencies: [ 'blocksuite/affine/blocks/surface', 'blocksuite/affine/components', + 'blocksuite/affine/ext-loader', 'blocksuite/affine/model', 'blocksuite/affine/shared', 'blocksuite/framework/global', @@ -869,6 +868,7 @@ export const PackageList = [ location: 'blocksuite/affine/widgets/scroll-anchoring', name: '@blocksuite/affine-widget-scroll-anchoring', workspaceDependencies: [ + 'blocksuite/affine/ext-loader', 'blocksuite/affine/model', 'blocksuite/affine/shared', 'blocksuite/framework/global', @@ -880,6 +880,7 @@ export const PackageList = [ name: '@blocksuite/affine-widget-slash-menu', workspaceDependencies: [ 'blocksuite/affine/components', + 'blocksuite/affine/ext-loader', 'blocksuite/affine/rich-text', 'blocksuite/affine/shared', 'blocksuite/framework/global', @@ -895,6 +896,7 @@ export const PackageList = [ 'blocksuite/affine/blocks/surface', 'blocksuite/affine/blocks/table', 'blocksuite/affine/components', + 'blocksuite/affine/ext-loader', 'blocksuite/affine/model', 'blocksuite/affine/shared', 'blocksuite/framework/global', diff --git a/yarn.lock b/yarn.lock index 64229c2ef6..da6c582d30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2860,8 +2860,6 @@ __metadata: "@blocksuite/affine-rich-text": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*" - "@blocksuite/affine-widget-remote-selection": "workspace:*" - "@blocksuite/affine-widget-scroll-anchoring": "workspace:*" "@blocksuite/affine-widget-slash-menu": "workspace:*" "@blocksuite/affine-widget-toolbar": "workspace:*" "@blocksuite/data-view": "workspace:*" @@ -3792,6 +3790,7 @@ __metadata: 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:*" @@ -3810,6 +3809,7 @@ __metadata: version: 0.0.0-use.local resolution: "@blocksuite/affine-widget-scroll-anchoring@workspace:blocksuite/affine/widgets/scroll-anchoring" dependencies: + "@blocksuite/affine-ext-loader": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/global": "workspace:*" @@ -3826,6 +3826,7 @@ __metadata: resolution: "@blocksuite/affine-widget-slash-menu@workspace:blocksuite/affine/widgets/slash-menu" dependencies: "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-ext-loader": "workspace:*" "@blocksuite/affine-rich-text": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/global": "workspace:*" @@ -3850,6 +3851,7 @@ __metadata: "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-block-table": "workspace:*" "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-ext-loader": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/global": "workspace:*"