From 007bbabce4c5c7ec5cdf1d27f871ee05b8205fd1 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Thu, 20 Feb 2025 13:06:39 +0000 Subject: [PATCH] refactor: move frame manager and panel to separate packages (#10324) ### TL;DR Moved frame management functionality from `blocksuite/blocks` to `@blocksuite/affine-block-frame` package. ### What changed? - Relocated `frame-manager.ts` from `blocksuite/blocks` to `@blocksuite/affine-block-frame` - Added new dependencies to block-frame package: `@blocksuite/affine-block-surface` and `yjs` - Updated imports across multiple components to reference frame manager from its new location - Moved utility functions `areSetsEqual` and `isFrameBlock` into frame-manager file - Replaced direct EdgelessRootService references with GfxController in frame panel components ### How to test? 1. Verify frame functionality works in edgeless mode 2. Test frame creation, selection, and manipulation 3. Confirm frame navigation and presentation modes operate correctly 4. Check that frame panel and toolbar interactions remain functional ### Why make this change? This refactoring improves code organization by consolidating frame-related functionality into a dedicated package, making the codebase more modular and easier to maintain. It also reduces dependencies between packages and provides clearer boundaries for frame-related features. --- blocksuite/affine/block-frame/package.json | 2 + .../block-frame/src}/frame-manager.ts | 17 +++++-- blocksuite/affine/block-frame/src/index.ts | 1 + blocksuite/affine/block-frame/tsconfig.json | 1 + .../affine/fragment-frame-panel/package.json | 45 +++++++++++++++++++ .../src}/body/frame-panel-body.ts | 37 ++++++++------- .../src}/card/frame-card-title-editor.ts | 3 +- .../src}/card/frame-card-title.ts | 2 +- .../src}/card/frame-card.ts | 3 +- .../fragment-frame-panel/src/effects.ts | 32 +++++++++++++ .../fragment-frame-panel/src}/frame-panel.ts | 0 .../src}/header/frame-panel-header.ts | 30 ++++++------- .../src}/header/frames-setting-menu.ts | 15 +++---- .../affine/fragment-frame-panel/src/index.ts | 2 + .../fragment-frame-panel/src/tool.ts} | 3 +- .../fragment-frame-panel/src}/utils/drag.ts | 3 +- .../affine/fragment-frame-panel/tsconfig.json | 20 +++++++++ blocksuite/blocks/package.json | 1 + .../src/_common/edgeless/frame/consts.ts | 1 - .../src/_specs/preset/edgeless-specs.ts | 12 ++--- blocksuite/blocks/src/effects.ts | 6 ++- blocksuite/blocks/src/index.ts | 6 +-- .../rects/edgeless-selected-rect.ts | 10 ++--- .../toolbar/presentation-toolbar.ts | 6 ++- .../edgeless/edgeless-root-service.ts | 2 +- .../edgeless/gfx-tool/default-tool.ts | 12 ++--- .../edgeless/gfx-tool/frame-tool.ts | 6 ++- .../src/root-block/edgeless/gfx-tool/index.ts | 1 - .../edgeless/utils/clipboard-utils.ts | 6 ++- .../src/root-block/edgeless/utils/misc.ts | 5 --- .../src/root-block/edgeless/utils/query.ts | 5 --- .../element-toolbar/change-frame-button.ts | 2 +- .../widgets/element-toolbar/index.ts | 2 +- .../element-toolbar/more-menu/context.ts | 2 +- .../more-menu/render-linked-doc.ts | 2 +- blocksuite/blocks/tsconfig.json | 1 + blocksuite/presets/src/effects.ts | 33 -------------- .../src/fragments/frame-panel/index.ts | 1 - blocksuite/presets/src/fragments/index.ts | 1 - .../workspace/detail-page/tabs/frame.tsx | 2 +- tools/utils/src/workspace.gen.ts | 18 ++++++++ tsconfig.json | 1 + yarn.lock | 27 +++++++++++ 43 files changed, 252 insertions(+), 135 deletions(-) rename blocksuite/{blocks/src/root-block/edgeless => affine/block-frame/src}/frame-manager.ts (96%) create mode 100644 blocksuite/affine/fragment-frame-panel/package.json rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/body/frame-panel-body.ts (94%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/card/frame-card-title-editor.ts (96%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/card/frame-card-title.ts (98%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/card/frame-card.ts (97%) create mode 100644 blocksuite/affine/fragment-frame-panel/src/effects.ts rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/frame-panel.ts (100%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/header/frame-panel-header.ts (89%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/header/frames-setting-menu.ts (95%) create mode 100644 blocksuite/affine/fragment-frame-panel/src/index.ts rename blocksuite/{blocks/src/root-block/edgeless/gfx-tool/frame-navigator-tool.ts => affine/fragment-frame-panel/src/tool.ts} (83%) rename blocksuite/{presets/src/fragments/frame-panel => affine/fragment-frame-panel/src}/utils/drag.ts (96%) create mode 100644 blocksuite/affine/fragment-frame-panel/tsconfig.json delete mode 100644 blocksuite/blocks/src/_common/edgeless/frame/consts.ts delete mode 100644 blocksuite/blocks/src/root-block/edgeless/utils/misc.ts delete mode 100644 blocksuite/presets/src/fragments/frame-panel/index.ts diff --git a/blocksuite/affine/block-frame/package.json b/blocksuite/affine/block-frame/package.json index 57276752b2..2a38da91b8 100644 --- a/blocksuite/affine/block-frame/package.json +++ b/blocksuite/affine/block-frame/package.json @@ -13,6 +13,7 @@ "author": "toeverything", "license": "MIT", "dependencies": { + "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", @@ -27,6 +28,7 @@ "@types/mdast": "^4.0.4", "lit": "^3.2.0", "minimatch": "^10.0.1", + "yjs": "^13.6.21", "zod": "^3.23.8" }, "exports": { diff --git a/blocksuite/blocks/src/root-block/edgeless/frame-manager.ts b/blocksuite/affine/block-frame/src/frame-manager.ts similarity index 96% rename from blocksuite/blocks/src/root-block/edgeless/frame-manager.ts rename to blocksuite/affine/block-frame/src/frame-manager.ts index 752824718c..24cf5971b3 100644 --- a/blocksuite/blocks/src/root-block/edgeless/frame-manager.ts +++ b/blocksuite/affine/block-frame/src/frame-manager.ts @@ -21,14 +21,13 @@ import { type IVec, type SerializedXYWH, } from '@blocksuite/global/utils'; -import { Text } from '@blocksuite/store'; +import { type BlockModel, Text } from '@blocksuite/store'; import * as Y from 'yjs'; -import { areSetsEqual } from './utils/misc.js'; -import { isFrameBlock } from './utils/query.js'; - const FRAME_PADDING = 40; +export type NavigatorMode = 'fill' | 'fit'; + export class FrameOverlay extends Overlay { static override overlayName: string = 'frame'; @@ -461,3 +460,13 @@ export class EdgelessFrameManager extends GfxExtension { this._disposable.dispose(); } } + +function areSetsEqual(setA: Set, setB: Set) { + if (setA.size !== setB.size) return false; + for (const a of setA) if (!setB.has(a)) return false; + return true; +} + +export function isFrameBlock(element: unknown): element is FrameBlockModel { + return !!element && (element as BlockModel).flavour === 'affine:frame'; +} diff --git a/blocksuite/affine/block-frame/src/index.ts b/blocksuite/affine/block-frame/src/index.ts index ad2526ce10..4adaa45b65 100644 --- a/blocksuite/affine/block-frame/src/index.ts +++ b/blocksuite/affine/block-frame/src/index.ts @@ -1,2 +1,3 @@ export * from './frame-block.js'; +export * from './frame-manager.js'; export * from './frame-spec.js'; diff --git a/blocksuite/affine/block-frame/tsconfig.json b/blocksuite/affine/block-frame/tsconfig.json index 230fca2705..445ea6a4cc 100644 --- a/blocksuite/affine/block-frame/tsconfig.json +++ b/blocksuite/affine/block-frame/tsconfig.json @@ -7,6 +7,7 @@ }, "include": ["./src"], "references": [ + { "path": "../block-surface" }, { "path": "../components" }, { "path": "../model" }, { "path": "../shared" }, diff --git a/blocksuite/affine/fragment-frame-panel/package.json b/blocksuite/affine/fragment-frame-panel/package.json new file mode 100644 index 0000000000..f00ca86277 --- /dev/null +++ b/blocksuite/affine/fragment-frame-panel/package.json @@ -0,0 +1,45 @@ +{ + "name": "@blocksuite/affine-fragment-frame-panel", + "description": "Frame panel fragment for BlockSuite.", + "type": "module", + "scripts": { + "build": "tsc", + "test:unit": "nx vite:test --run --passWithNoTests", + "test:unit:coverage": "nx vite:test --run --coverage", + "test:e2e": "playwright test" + }, + "sideEffects": false, + "keywords": [], + "author": "toeverything", + "license": "MIT", + "dependencies": { + "@blocksuite/affine-block-frame": "workspace:*", + "@blocksuite/affine-block-surface": "workspace:*", + "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-model": "workspace:*", + "@blocksuite/affine-shared": "workspace:*", + "@blocksuite/block-std": "workspace:*", + "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.1", + "@blocksuite/inline": "workspace:*", + "@blocksuite/store": "workspace:*", + "@floating-ui/dom": "^1.6.10", + "@lit/context": "^1.1.2", + "@preact/signals-core": "^1.8.0", + "@toeverything/theme": "^1.1.11", + "lit": "^3.2.0", + "minimatch": "^10.0.1", + "zod": "^3.23.8" + }, + "exports": { + ".": "./src/index.ts", + "./effects": "./src/effects.ts" + }, + "files": [ + "src", + "dist", + "!src/__tests__", + "!dist/__tests__" + ], + "version": "0.19.0" +} diff --git a/blocksuite/presets/src/fragments/frame-panel/body/frame-panel-body.ts b/blocksuite/affine/fragment-frame-panel/src/body/frame-panel-body.ts similarity index 94% rename from blocksuite/presets/src/fragments/frame-panel/body/frame-panel-body.ts rename to blocksuite/affine/fragment-frame-panel/src/body/frame-panel-body.ts index 7597d09e5f..fa6ddeb562 100644 --- a/blocksuite/presets/src/fragments/frame-panel/body/frame-panel-body.ts +++ b/blocksuite/affine/fragment-frame-panel/src/body/frame-panel-body.ts @@ -1,12 +1,14 @@ -import { type EditorHost, ShadowlessElement } from '@blocksuite/block-std'; -import { generateKeyBetweenV2 } from '@blocksuite/block-std/gfx'; +import { EdgelessFrameManager } from '@blocksuite/affine-block-frame'; +import type { FrameBlockModel } from '@blocksuite/affine-model'; import { DocModeProvider, - EdgelessFrameManager, - EdgelessRootService, EditPropsStore, - type FrameBlockModel, -} from '@blocksuite/blocks'; +} from '@blocksuite/affine-shared/services'; +import { type EditorHost, ShadowlessElement } from '@blocksuite/block-std'; +import { + generateKeyBetweenV2, + GfxControllerIdentifier, +} from '@blocksuite/block-std/gfx'; import { Bound, DisposableGroup, @@ -110,7 +112,7 @@ export class FramePanelBody extends SignalWatcher( } this._selected = []; - this._edgelessRootService?.selection.set({ + this._gfx.selection.set({ elements: this._selected, editing: false, }); @@ -126,6 +128,10 @@ export class FramePanelBody extends SignalWatcher( private _lastEdgelessRootId = ''; + private get _gfx() { + return this.editorHost.std.get(GfxControllerIdentifier); + } + private readonly _selectFrame = (e: SelectEvent) => { const { selected, id, multiselect } = e.detail; @@ -138,7 +144,7 @@ export class FramePanelBody extends SignalWatcher( this._selected = [id]; } - this._edgelessRootService?.selection.set({ + this._gfx.selection.set({ elements: this._selected, editing: false, }); @@ -152,10 +158,6 @@ export class FramePanelBody extends SignalWatcher( })); }; - get _edgelessRootService() { - return this.editorHost.std.getOptional(EdgelessRootService); - } - get frames() { const frames = this.editorHost.doc .getBlocksByFlavour('affine:frame') @@ -229,8 +231,9 @@ export class FramePanelBody extends SignalWatcher( private _fitToElement(e: FitViewEvent) { const { block } = e.detail; const bound = Bound.deserialize(block.xywh); + const docModeProvider = this.editorHost.std.get(DocModeProvider); - if (!this._edgelessRootService) { + if (docModeProvider.getEditorMode() !== 'edgeless') { // When click frame card in page mode // Should switch to edgeless mode and set viewport to the frame const viewport = { @@ -242,11 +245,7 @@ export class FramePanelBody extends SignalWatcher( this.editorHost.std.get(EditPropsStore).setStorage('viewport', viewport); this.editorHost.std.get(DocModeProvider).setEditorMode('edgeless'); } else { - this._edgelessRootService.viewport.setViewportByBound( - bound, - this.viewportPadding, - true - ); + this._gfx.viewport.setViewportByBound(bound, this.viewportPadding, true); } } @@ -398,7 +397,7 @@ export class FramePanelBody extends SignalWatcher( this._setDocDisposables(this.editorHost.doc); // after switch to edgeless mode, should update the selection if (this.editorHost.doc.id === this._lastEdgelessRootId) { - this._edgelessRootService?.selection.set({ + this._gfx.selection.set({ elements: this._selected, editing: false, }); diff --git a/blocksuite/presets/src/fragments/frame-panel/card/frame-card-title-editor.ts b/blocksuite/affine/fragment-frame-panel/src/card/frame-card-title-editor.ts similarity index 96% rename from blocksuite/presets/src/fragments/frame-panel/card/frame-card-title-editor.ts rename to blocksuite/affine/fragment-frame-panel/src/card/frame-card-title-editor.ts index 8ae8ce32f3..6e7d80b50d 100644 --- a/blocksuite/presets/src/fragments/frame-panel/card/frame-card-title-editor.ts +++ b/blocksuite/affine/fragment-frame-panel/src/card/frame-card-title-editor.ts @@ -1,5 +1,6 @@ +import type { RichText } from '@blocksuite/affine-components/rich-text'; +import type { FrameBlockModel } from '@blocksuite/affine-model'; import { ShadowlessElement } from '@blocksuite/block-std'; -import type { FrameBlockModel, RichText } from '@blocksuite/blocks'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html } from 'lit'; import { property, query } from 'lit/decorators.js'; diff --git a/blocksuite/presets/src/fragments/frame-panel/card/frame-card-title.ts b/blocksuite/affine/fragment-frame-panel/src/card/frame-card-title.ts similarity index 98% rename from blocksuite/presets/src/fragments/frame-panel/card/frame-card-title.ts rename to blocksuite/affine/fragment-frame-panel/src/card/frame-card-title.ts index 3f01925c93..e57b95774f 100644 --- a/blocksuite/presets/src/fragments/frame-panel/card/frame-card-title.ts +++ b/blocksuite/affine/fragment-frame-panel/src/card/frame-card-title.ts @@ -1,5 +1,5 @@ +import type { FrameBlockModel } from '@blocksuite/affine-model'; import { ShadowlessElement } from '@blocksuite/block-std'; -import type { FrameBlockModel } from '@blocksuite/blocks'; import { DisposableGroup, WithDisposable } from '@blocksuite/global/utils'; import { css, html, type PropertyValues } from 'lit'; import { property, query } from 'lit/decorators.js'; diff --git a/blocksuite/presets/src/fragments/frame-panel/card/frame-card.ts b/blocksuite/affine/fragment-frame-panel/src/card/frame-card.ts similarity index 97% rename from blocksuite/presets/src/fragments/frame-panel/card/frame-card.ts rename to blocksuite/affine/fragment-frame-panel/src/card/frame-card.ts index 636086ffbf..2ef332c73d 100644 --- a/blocksuite/presets/src/fragments/frame-panel/card/frame-card.ts +++ b/blocksuite/affine/fragment-frame-panel/src/card/frame-card.ts @@ -1,5 +1,6 @@ +import type { FrameBlockModel } from '@blocksuite/affine-model'; +import { on, once } from '@blocksuite/affine-shared/utils'; import { ShadowlessElement } from '@blocksuite/block-std'; -import { type FrameBlockModel, on, once } from '@blocksuite/blocks'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, nothing } from 'lit'; import { property, query } from 'lit/decorators.js'; diff --git a/blocksuite/affine/fragment-frame-panel/src/effects.ts b/blocksuite/affine/fragment-frame-panel/src/effects.ts new file mode 100644 index 0000000000..a6ae343a63 --- /dev/null +++ b/blocksuite/affine/fragment-frame-panel/src/effects.ts @@ -0,0 +1,32 @@ +import { + AFFINE_FRAME_PANEL_BODY, + FramePanelBody, +} from './body/frame-panel-body'; +import { AFFINE_FRAME_CARD, FrameCard } from './card/frame-card'; +import { + AFFINE_FRAME_CARD_TITLE, + FrameCardTitle, +} from './card/frame-card-title'; +import { + AFFINE_FRAME_TITLE_EDITOR, + FrameCardTitleEditor, +} from './card/frame-card-title-editor'; +import { AFFINE_FRAME_PANEL, FramePanel } from './frame-panel'; +import { + AFFINE_FRAME_PANEL_HEADER, + FramePanelHeader, +} from './header/frame-panel-header'; +import { + AFFINE_FRAMES_SETTING_MENU, + FramesSettingMenu, +} from './header/frames-setting-menu'; + +export function effects() { + customElements.define(AFFINE_FRAME_PANEL, FramePanel); + customElements.define(AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor); + customElements.define(AFFINE_FRAME_CARD, FrameCard); + customElements.define(AFFINE_FRAME_CARD_TITLE, FrameCardTitle); + customElements.define(AFFINE_FRAME_PANEL_BODY, FramePanelBody); + customElements.define(AFFINE_FRAME_PANEL_HEADER, FramePanelHeader); + customElements.define(AFFINE_FRAMES_SETTING_MENU, FramesSettingMenu); +} diff --git a/blocksuite/presets/src/fragments/frame-panel/frame-panel.ts b/blocksuite/affine/fragment-frame-panel/src/frame-panel.ts similarity index 100% rename from blocksuite/presets/src/fragments/frame-panel/frame-panel.ts rename to blocksuite/affine/fragment-frame-panel/src/frame-panel.ts diff --git a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts b/blocksuite/affine/fragment-frame-panel/src/header/frame-panel-header.ts similarity index 89% rename from blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts rename to blocksuite/affine/fragment-frame-panel/src/header/frame-panel-header.ts index b193910153..ece85ad423 100644 --- a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts +++ b/blocksuite/affine/fragment-frame-panel/src/header/frame-panel-header.ts @@ -1,12 +1,12 @@ -import type { EditorHost } from '@blocksuite/block-std'; +import type { NavigatorMode } from '@blocksuite/affine-block-frame'; +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { - createButtonPopper, DocModeProvider, - EdgelessLegacySlotIdentifier, - EdgelessRootService, EditPropsStore, - type NavigatorMode, -} from '@blocksuite/blocks'; +} from '@blocksuite/affine-shared/services'; +import { createButtonPopper } from '@blocksuite/affine-shared/utils'; +import type { EditorHost } from '@blocksuite/block-std'; +import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; import { DisposableGroup, WithDisposable } from '@blocksuite/global/utils'; import { PresentationIcon, SettingsIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, type PropertyValues } from 'lit'; @@ -112,13 +112,18 @@ export class FramePanelHeader extends WithDisposable(LitElement) { private _edgelessDisposables: DisposableGroup | null = null; + private get _gfx() { + return this.editorHost.std.get(GfxControllerIdentifier); + } + private readonly _enterPresentationMode = () => { - if (!this._edgelessRootService) { + const docModeProvider = this.editorHost.std.get(DocModeProvider); + if (docModeProvider.getEditorMode() !== 'edgeless') { this.editorHost.std.get(DocModeProvider).setEditorMode('edgeless'); } setTimeout(() => { - this._edgelessRootService?.gfx.tool.setTool({ + this._gfx.tool.setTool({ type: 'frameNavigator', mode: this._navigatorMode, }); @@ -132,8 +137,6 @@ export class FramePanelHeader extends WithDisposable(LitElement) { private _navigatorMode: NavigatorMode = 'fit'; private readonly _setEdgelessDisposables = () => { - if (!this._edgelessRootService) return; - const slots = this.editorHost.std.get(EdgelessLegacySlotIdentifier); this._clearEdgelessDisposables(); @@ -145,10 +148,6 @@ export class FramePanelHeader extends WithDisposable(LitElement) { ); }; - private get _edgelessRootService() { - return this.editorHost.std.getOptional(EdgelessRootService); - } - private _tryLoadNavigatorStateLocalRecord() { this._navigatorMode = this.editorHost.std .get(EditPropsStore) @@ -219,7 +218,8 @@ export class FramePanelHeader extends WithDisposable(LitElement) { override updated(_changedProperties: PropertyValues) { if (_changedProperties.has('editorHost')) { - if (this._edgelessRootService) { + const docModeProvider = this.editorHost.std.get(DocModeProvider); + if (docModeProvider.getEditorMode() === 'edgeless') { this._setEdgelessDisposables(); } else { this._clearEdgelessDisposables(); diff --git a/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts b/blocksuite/affine/fragment-frame-panel/src/header/frames-setting-menu.ts similarity index 95% rename from blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts rename to blocksuite/affine/fragment-frame-panel/src/header/frames-setting-menu.ts index f05c5973ed..ef316011ce 100644 --- a/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts +++ b/blocksuite/affine/fragment-frame-panel/src/header/frames-setting-menu.ts @@ -1,9 +1,9 @@ -import type { EditorHost } from '@blocksuite/block-std'; +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { - EdgelessLegacySlotIdentifier, - EdgelessRootService, + DocModeProvider, EditPropsStore, -} from '@blocksuite/blocks'; +} from '@blocksuite/affine-shared/services'; +import type { EditorHost } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; @@ -103,10 +103,6 @@ export class FramesSettingMenu extends WithDisposable(LitElement) { this._editPropsStore.setStorage('presentHideToolbar', this.hideToolbar); }; - private get _edgelessRootService() { - return this.editorHost.std.getOptional(EdgelessRootService); - } - private get _editPropsStore() { return this.editorHost.std.get(EditPropsStore); } @@ -176,7 +172,8 @@ export class FramesSettingMenu extends WithDisposable(LitElement) { override updated(_changedProperties: PropertyValues) { if (_changedProperties.has('editorHost')) { - if (this._edgelessRootService) { + const docModeProvider = this.editorHost.std.get(DocModeProvider); + if (docModeProvider.getEditorMode() === 'edgeless') { this.disposables.add( this.slots.navigatorSettingUpdated.on( ({ blackBackground, hideToolbar }) => { diff --git a/blocksuite/affine/fragment-frame-panel/src/index.ts b/blocksuite/affine/fragment-frame-panel/src/index.ts new file mode 100644 index 0000000000..c4351250d7 --- /dev/null +++ b/blocksuite/affine/fragment-frame-panel/src/index.ts @@ -0,0 +1,2 @@ +export * from './frame-panel'; +export * from './tool'; diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-navigator-tool.ts b/blocksuite/affine/fragment-frame-panel/src/tool.ts similarity index 83% rename from blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-navigator-tool.ts rename to blocksuite/affine/fragment-frame-panel/src/tool.ts index 705a9f18a5..ad411d3fbf 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-navigator-tool.ts +++ b/blocksuite/affine/fragment-frame-panel/src/tool.ts @@ -1,7 +1,6 @@ +import type { NavigatorMode } from '@blocksuite/affine-block-frame'; import { BaseTool } from '@blocksuite/block-std/gfx'; -import type { NavigatorMode } from '../../../_common/edgeless/frame/consts.js'; - type PresentToolOption = { mode?: NavigatorMode; }; diff --git a/blocksuite/presets/src/fragments/frame-panel/utils/drag.ts b/blocksuite/affine/fragment-frame-panel/src/utils/drag.ts similarity index 96% rename from blocksuite/presets/src/fragments/frame-panel/utils/drag.ts rename to blocksuite/affine/fragment-frame-panel/src/utils/drag.ts index 672c317982..1b1e5b62ee 100644 --- a/blocksuite/presets/src/fragments/frame-panel/utils/drag.ts +++ b/blocksuite/affine/fragment-frame-panel/src/utils/drag.ts @@ -1,4 +1,5 @@ -import { type FrameBlockModel, on, once } from '@blocksuite/blocks'; +import type { FrameBlockModel } from '@blocksuite/affine-model'; +import { on, once } from '@blocksuite/affine-shared/utils'; import type { FramePanelBody } from '../body/frame-panel-body.js'; import { FrameCard } from '../card/frame-card.js'; diff --git a/blocksuite/affine/fragment-frame-panel/tsconfig.json b/blocksuite/affine/fragment-frame-panel/tsconfig.json new file mode 100644 index 0000000000..954dff446f --- /dev/null +++ b/blocksuite/affine/fragment-frame-panel/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./dist", + "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo" + }, + "include": ["./src"], + "references": [ + { "path": "../block-frame" }, + { "path": "../block-surface" }, + { "path": "../components" }, + { "path": "../model" }, + { "path": "../shared" }, + { "path": "../../framework/block-std" }, + { "path": "../../framework/global" }, + { "path": "../../framework/inline" }, + { "path": "../../framework/store" } + ] +} diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json index c245f2e634..c4f73c4098 100644 --- a/blocksuite/blocks/package.json +++ b/blocksuite/blocks/package.json @@ -32,6 +32,7 @@ "@blocksuite/affine-block-surface-ref": "workspace:*", "@blocksuite/affine-block-table": "workspace:*", "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-fragment-frame-panel": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/affine-widget-drag-handle": "workspace:*", diff --git a/blocksuite/blocks/src/_common/edgeless/frame/consts.ts b/blocksuite/blocks/src/_common/edgeless/frame/consts.ts deleted file mode 100644 index e029b8bba7..0000000000 --- a/blocksuite/blocks/src/_common/edgeless/frame/consts.ts +++ /dev/null @@ -1 +0,0 @@ -export type NavigatorMode = 'fill' | 'fit'; diff --git a/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts b/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts index f041654f9a..ae39863504 100644 --- a/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts +++ b/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts @@ -1,11 +1,12 @@ -import { ConnectionOverlay } from '@blocksuite/affine-block-surface'; -import type { ExtensionType } from '@blocksuite/store'; - -import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js'; import { EdgelessFrameManager, FrameOverlay, -} from '../../root-block/edgeless/frame-manager.js'; +} from '@blocksuite/affine-block-frame'; +import { ConnectionOverlay } from '@blocksuite/affine-block-surface'; +import { PresentTool } from '@blocksuite/affine-fragment-frame-panel'; +import type { ExtensionType } from '@blocksuite/store'; + +import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js'; import { BrushTool } from '../../root-block/edgeless/gfx-tool/brush-tool.js'; import { ConnectorTool } from '../../root-block/edgeless/gfx-tool/connector-tool.js'; import { CopilotTool } from '../../root-block/edgeless/gfx-tool/copilot-tool.js'; @@ -13,7 +14,6 @@ import { DefaultTool } from '../../root-block/edgeless/gfx-tool/default-tool.js' import { MindMapIndicatorOverlay } from '../../root-block/edgeless/gfx-tool/default-tool-ext/mind-map-ext/indicator-overlay.js'; import { EmptyTool } from '../../root-block/edgeless/gfx-tool/empty-tool.js'; import { EraserTool } from '../../root-block/edgeless/gfx-tool/eraser-tool.js'; -import { PresentTool } from '../../root-block/edgeless/gfx-tool/frame-navigator-tool.js'; import { FrameTool } from '../../root-block/edgeless/gfx-tool/frame-tool.js'; import { LassoTool } from '../../root-block/edgeless/gfx-tool/lasso-tool.js'; import { NoteTool } from '../../root-block/edgeless/gfx-tool/note-tool.js'; diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 840c410398..9b68a5de56 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/blocksuite/blocks/src/effects.ts @@ -33,6 +33,7 @@ import { SmoothCorner } from '@blocksuite/affine-components/smooth-corner'; import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button'; import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch'; import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar'; +import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects'; import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects'; import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects'; import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects'; @@ -185,6 +186,8 @@ export function effects() { stdEffects(); inlineEffects(); + dataViewEffects(); + blockNoteEffects(); blockAttachmentEffects(); blockBookmarkEffects(); @@ -224,7 +227,8 @@ export function effects() { widgetRemoteSelectionEffects(); widgetDragHandleEffects(); widgetEdgelessAutoConnectEffects(); - dataViewEffects(); + + fragmentFramePanelEffects(); customElements.define('affine-page-root', PageRootBlockComponent); customElements.define('affine-preview-root', PreviewRootBlockComponent); diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts index 04f3da59df..7dc6f757b5 100644 --- a/blocksuite/blocks/src/index.ts +++ b/blocksuite/blocks/src/index.ts @@ -7,7 +7,6 @@ import { splitElements } from './root-block/edgeless/utils/clipboard-utils.js'; import { isCanvasElement } from './root-block/edgeless/utils/query.js'; export * from './_common/adapters/index.js'; -export { type NavigatorMode } from './_common/edgeless/frame/consts.js'; export * from './_common/transformers/index.js'; export * from './_specs/index.js'; export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js'; @@ -16,10 +15,6 @@ export type { TemplateCategory, TemplateManager, } from './root-block/edgeless/components/toolbar/template/template-type.js'; -export { - EdgelessFrameManager, - FrameOverlay, -} from './root-block/edgeless/frame-manager.js'; export { CopilotTool } from './root-block/edgeless/gfx-tool/copilot-tool.js'; export * from './root-block/edgeless/gfx-tool/index.js'; export { EditPropsMiddlewareBuilder } from './root-block/edgeless/middlewares/base.js'; @@ -95,6 +90,7 @@ export { ToolbarMoreMenuConfigExtension, Tooltip, } from '@blocksuite/affine-components/toolbar'; +export * from '@blocksuite/affine-fragment-frame-panel'; export * from '@blocksuite/affine-model'; export { AttachmentAdapter, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts b/blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts index 6a1655aabc..02a575429c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts @@ -6,6 +6,11 @@ import { SYNCED_MIN_HEIGHT, SYNCED_MIN_WIDTH, } from '@blocksuite/affine-block-embed'; +import { + type EdgelessFrameManager, + type FrameOverlay, + isFrameBlock, +} from '@blocksuite/affine-block-frame'; import { CanvasElementType, isNoteBlock, @@ -65,10 +70,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js'; -import type { - EdgelessFrameManager, - FrameOverlay, -} from '../../frame-manager.js'; import { AI_CHAT_BLOCK_MAX_HEIGHT, AI_CHAT_BLOCK_MAX_WIDTH, @@ -90,7 +91,6 @@ import { isEmbedLoomBlock, isEmbedSyncedDocBlock, isEmbedYoutubeBlock, - isFrameBlock, isImageBlock, isMindmapNode, } from '../../utils/query.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts index 95fb770b39..d1a056119e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts @@ -1,3 +1,7 @@ +import { + isFrameBlock, + type NavigatorMode, +} from '@blocksuite/affine-block-frame'; import { toast } from '@blocksuite/affine-components/toast'; import type { FrameBlockModel } from '@blocksuite/affine-model'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; @@ -15,9 +19,7 @@ import { cssVar } from '@toeverything/theme'; import { css, html, LitElement, nothing, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; -import type { NavigatorMode } from '../../../../_common/edgeless/frame/consts.js'; import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js'; -import { isFrameBlock } from '../../utils/query.js'; import { launchIntoFullscreen } from '../utils.js'; import { EdgelessToolbarToolMixin } from './mixins/tool.mixin.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts index 9ef50d5314..8229e03356 100644 --- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts +++ b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts @@ -1,3 +1,4 @@ +import type { EdgelessFrameManager } from '@blocksuite/affine-block-frame'; import { EdgelessCRUDIdentifier, EdgelessLegacySlotIdentifier, @@ -36,7 +37,6 @@ import { Bound, getCommonBound } from '@blocksuite/global/utils'; import { effect } from '@preact/signals-core'; import { RootService } from '../root-service.js'; -import type { EdgelessFrameManager } from './frame-manager.js'; import { TemplateJob } from './services/template.js'; import { createInsertPlaceMiddleware, diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts index 969a0467bc..5517c52dc8 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts @@ -1,4 +1,9 @@ import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text'; +import { + type EdgelessFrameManager, + type FrameOverlay, + isFrameBlock, +} from '@blocksuite/affine-block-frame'; import { ConnectorUtils, isNoteBlock, @@ -50,14 +55,9 @@ import { effect } from '@preact/signals-core'; import { isSingleMindMapNode } from '../../../_common/edgeless/mindmap/index.js'; import type { EdgelessRootBlockComponent } from '../edgeless-root-block.js'; -import type { EdgelessFrameManager, FrameOverlay } from '../frame-manager.js'; import { prepareCloneData } from '../utils/clone-utils.js'; import { calPanDelta } from '../utils/panning-utils.js'; -import { - isCanvasElement, - isEdgelessTextBlock, - isFrameBlock, -} from '../utils/query.js'; +import { isCanvasElement, isEdgelessTextBlock } from '../utils/query.js'; import type { EdgelessSnapManager } from '../utils/snap-manager.js'; import { addText, diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-tool.ts index 7da7f9fff0..196fb4c28a 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/frame-tool.ts @@ -1,3 +1,7 @@ +import type { + EdgelessFrameManager, + FrameOverlay, +} from '@blocksuite/affine-block-frame'; import { OverlayIdentifier } from '@blocksuite/affine-block-surface'; import type { FrameBlockModel } from '@blocksuite/affine-model'; import { @@ -15,8 +19,6 @@ import { Bound, Vec } from '@blocksuite/global/utils'; import { Text } from '@blocksuite/store'; import * as Y from 'yjs'; -import type { EdgelessFrameManager, FrameOverlay } from '../frame-manager.js'; - export class FrameTool extends BaseTool { static override toolName = 'frame'; diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/index.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/index.ts index 7704a86f9e..4b22468942 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/index.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/index.ts @@ -4,7 +4,6 @@ export { CopilotTool } from './copilot-tool.js'; export { DefaultTool } from './default-tool.js'; export { EmptyTool } from './empty-tool.js'; export { EraserTool } from './eraser-tool.js'; -export { PresentTool } from './frame-navigator-tool.js'; export { FrameTool } from './frame-tool.js'; export { LassoTool, type LassoToolOption } from './lasso-tool.js'; export { NoteTool, type NoteToolOption } from './note-tool.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts b/blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts index 75bf97c0bb..1cac5f9acf 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts @@ -1,3 +1,7 @@ +import { + EdgelessFrameManager, + isFrameBlock, +} from '@blocksuite/affine-block-frame'; import { isNoteBlock } from '@blocksuite/affine-block-surface'; import type { EdgelessTextBlockModel, @@ -18,12 +22,10 @@ import { getCommonBoundWithRotation, groupBy } from '@blocksuite/global/utils'; import { type BlockSnapshot, BlockSnapshotSchema } from '@blocksuite/store'; import type { EdgelessRootBlockComponent } from '../edgeless-root-block.js'; -import { EdgelessFrameManager } from '../frame-manager.js'; import { getSortedCloneElements, prepareCloneData } from './clone-utils.js'; import { isEdgelessTextBlock, isEmbedSyncedDocBlock, - isFrameBlock, isImageBlock, } from './query.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/misc.ts b/blocksuite/blocks/src/root-block/edgeless/utils/misc.ts deleted file mode 100644 index 9601f3804b..0000000000 --- a/blocksuite/blocks/src/root-block/edgeless/utils/misc.ts +++ /dev/null @@ -1,5 +0,0 @@ -export function areSetsEqual(setA: Set, setB: Set) { - if (setA.size !== setB.size) return false; - for (const a of setA) if (!setB.has(a)) return false; - return true; -} diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/query.ts b/blocksuite/blocks/src/root-block/edgeless/utils/query.ts index fa97b94815..5f4a12ad19 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/query.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/query.ts @@ -12,7 +12,6 @@ import { type EmbedLoomModel, type EmbedSyncedDocModel, type EmbedYoutubeModel, - type FrameBlockModel, type ImageBlockModel, MindmapElementModel, ShapeElementModel, @@ -49,10 +48,6 @@ export function isEdgelessTextBlock( ); } -export function isFrameBlock(element: unknown): element is FrameBlockModel { - return !!element && (element as BlockModel).flavour === 'affine:frame'; -} - export function isImageBlock( element: BlockModel | GfxModel | null ): element is ImageBlockModel { diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts index 268ab4f60e..e889782865 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts @@ -1,3 +1,4 @@ +import type { EdgelessFrameManager } from '@blocksuite/affine-block-frame'; import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; import type { EdgelessColorPickerButton, @@ -36,7 +37,6 @@ import { join } from 'lit/directives/join.js'; import { when } from 'lit/directives/when.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; -import type { EdgelessFrameManager } from '../../edgeless/frame-manager.js'; import { mountFrameTitleEditor } from '../../edgeless/utils/text.js'; function getMostCommonColor( diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts index d6fab2f655..c8a4d0dd5e 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts @@ -1,3 +1,4 @@ +import { isFrameBlock } from '@blocksuite/affine-block-frame'; import { isNoteBlock } from '@blocksuite/affine-block-surface'; import { cloneGroups, @@ -47,7 +48,6 @@ import { isBookmarkBlock, isEdgelessTextBlock, isEmbeddedBlock, - isFrameBlock, isImageBlock, } from '../../edgeless/utils/query.js'; import { renderAddFrameButton } from './add-frame-button.js'; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/context.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/context.ts index 740854a95f..462618e8b8 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/context.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/context.ts @@ -1,3 +1,4 @@ +import { isFrameBlock } from '@blocksuite/affine-block-frame'; import { isNoteBlock, type SurfaceBlockComponent, @@ -18,7 +19,6 @@ import { isEmbeddedLinkBlock, isEmbedLinkedDocBlock, isEmbedSyncedDocBlock, - isFrameBlock, isImageBlock, } from '../../../edgeless/utils/query.js'; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/render-linked-doc.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/render-linked-doc.ts index f0a85c626a..fb9495459d 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/render-linked-doc.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/render-linked-doc.ts @@ -1,3 +1,4 @@ +import { isFrameBlock } from '@blocksuite/affine-block-frame'; import { getSurfaceBlock, isNoteBlock } from '@blocksuite/affine-block-surface'; import type { FrameBlockModel, NoteBlockModel } from '@blocksuite/affine-model'; import { NoteDisplayMode } from '@blocksuite/affine-model'; @@ -12,7 +13,6 @@ import { mapFrameIds, sortEdgelessElements, } from '../../../edgeless/utils/clone-utils.js'; -import { isFrameBlock } from '../../../edgeless/utils/query.js'; function addBlocksToDoc(targetDoc: Store, model: BlockModel, parentId: string) { // Add current block to linked doc diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json index 319631abf2..713345bb05 100644 --- a/blocksuite/blocks/tsconfig.json +++ b/blocksuite/blocks/tsconfig.json @@ -25,6 +25,7 @@ { "path": "../affine/block-surface-ref" }, { "path": "../affine/block-table" }, { "path": "../affine/components" }, + { "path": "../affine/fragment-frame-panel" }, { "path": "../affine/model" }, { "path": "../affine/shared" }, { "path": "../affine/widget-drag-handle" }, diff --git a/blocksuite/presets/src/effects.ts b/blocksuite/presets/src/effects.ts index 6952043bdc..3e9dd2c64d 100644 --- a/blocksuite/presets/src/effects.ts +++ b/blocksuite/presets/src/effects.ts @@ -8,36 +8,10 @@ import { } from './editors/index.js'; import { CommentInput } from './fragments/comment/comment-input.js'; import { - AFFINE_FRAME_PANEL_BODY, - FramePanelBody, -} from './fragments/frame-panel/body/frame-panel-body.js'; -import { - AFFINE_FRAME_CARD, - FrameCard, -} from './fragments/frame-panel/card/frame-card.js'; -import { - AFFINE_FRAME_CARD_TITLE, - FrameCardTitle, -} from './fragments/frame-panel/card/frame-card-title.js'; -import { - AFFINE_FRAME_TITLE_EDITOR, - FrameCardTitleEditor, -} from './fragments/frame-panel/card/frame-card-title-editor.js'; -import { - AFFINE_FRAME_PANEL_HEADER, - FramePanelHeader, -} from './fragments/frame-panel/header/frame-panel-header.js'; -import { - AFFINE_FRAMES_SETTING_MENU, - FramesSettingMenu, -} from './fragments/frame-panel/header/frames-setting-menu.js'; -import { - AFFINE_FRAME_PANEL, AFFINE_MOBILE_OUTLINE_MENU, AFFINE_OUTLINE_PANEL, AFFINE_OUTLINE_VIEWER, CommentPanel, - FramePanel, MobileOutlineMenu, OutlinePanel, OutlineViewer, @@ -74,22 +48,15 @@ export function effects() { AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU, OutlineNotePreviewSettingMenu ); - customElements.define(AFFINE_FRAME_PANEL, FramePanel); customElements.define(AFFINE_OUTLINE_NOTICE, OutlineNotice); customElements.define('comment-panel', CommentPanel); customElements.define(AFFINE_OUTLINE_PANEL, OutlinePanel); customElements.define(AFFINE_OUTLINE_PANEL_HEADER, OutlinePanelHeader); customElements.define('affine-editor-container', AffineEditorContainer); customElements.define(AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard); - customElements.define(AFFINE_FRAME_TITLE_EDITOR, FrameCardTitleEditor); customElements.define('edgeless-editor', EdgelessEditor); - customElements.define(AFFINE_FRAME_CARD, FrameCard); customElements.define(AFFINE_OUTLINE_VIEWER, OutlineViewer); customElements.define(AFFINE_MOBILE_OUTLINE_MENU, MobileOutlineMenu); - customElements.define(AFFINE_FRAME_CARD_TITLE, FrameCardTitle); customElements.define(AFFINE_OUTLINE_BLOCK_PREVIEW, OutlineBlockPreview); - customElements.define(AFFINE_FRAME_PANEL_BODY, FramePanelBody); - customElements.define(AFFINE_FRAME_PANEL_HEADER, FramePanelHeader); customElements.define(AFFINE_OUTLINE_PANEL_BODY, OutlinePanelBody); - customElements.define(AFFINE_FRAMES_SETTING_MENU, FramesSettingMenu); } diff --git a/blocksuite/presets/src/fragments/frame-panel/index.ts b/blocksuite/presets/src/fragments/frame-panel/index.ts deleted file mode 100644 index c0ddb5ee41..0000000000 --- a/blocksuite/presets/src/fragments/frame-panel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './frame-panel.js'; diff --git a/blocksuite/presets/src/fragments/index.ts b/blocksuite/presets/src/fragments/index.ts index 2f78e9f9c9..87d148805e 100644 --- a/blocksuite/presets/src/fragments/index.ts +++ b/blocksuite/presets/src/fragments/index.ts @@ -1,3 +1,2 @@ export * from './comment/index.js'; -export * from './frame-panel/index.js'; export * from './outline/index.js'; diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx index baf94ea5cb..57be5fecf6 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/frame.tsx @@ -1,5 +1,5 @@ +import { FramePanel } from '@blocksuite/affine/blocks'; import type { AffineEditorContainer } from '@blocksuite/affine/presets'; -import { FramePanel } from '@blocksuite/affine/presets'; import { useCallback, useEffect, useRef } from 'react'; import * as styles from './frame.css'; diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index be03638dff..bd4f24cbd3 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -131,6 +131,7 @@ export const PackageList = [ location: 'blocksuite/affine/block-frame', name: '@blocksuite/affine-block-frame', workspaceDependencies: [ + 'blocksuite/affine/block-surface', 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/affine/shared', @@ -273,6 +274,21 @@ export const PackageList = [ 'blocksuite/framework/store', ], }, + { + location: 'blocksuite/affine/fragment-frame-panel', + name: '@blocksuite/affine-fragment-frame-panel', + workspaceDependencies: [ + 'blocksuite/affine/block-frame', + 'blocksuite/affine/block-surface', + 'blocksuite/affine/components', + 'blocksuite/affine/model', + 'blocksuite/affine/shared', + 'blocksuite/framework/block-std', + 'blocksuite/framework/global', + 'blocksuite/framework/inline', + 'blocksuite/framework/store', + ], + }, { location: 'blocksuite/affine/model', name: '@blocksuite/affine-model', @@ -379,6 +395,7 @@ export const PackageList = [ 'blocksuite/affine/block-surface-ref', 'blocksuite/affine/block-table', 'blocksuite/affine/components', + 'blocksuite/affine/fragment-frame-panel', 'blocksuite/affine/model', 'blocksuite/affine/shared', 'blocksuite/affine/widget-drag-handle', @@ -762,6 +779,7 @@ export type PackageName = | '@blocksuite/affine-block-table' | '@blocksuite/affine-components' | '@blocksuite/data-view' + | '@blocksuite/affine-fragment-frame-panel' | '@blocksuite/affine-model' | '@blocksuite/affine-shared' | '@blocksuite/affine-widget-drag-handle' diff --git a/tsconfig.json b/tsconfig.json index 08e1205447..7e51c2a2b4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -70,6 +70,7 @@ { "path": "./blocksuite/affine/block-table" }, { "path": "./blocksuite/affine/components" }, { "path": "./blocksuite/affine/data-view" }, + { "path": "./blocksuite/affine/fragment-frame-panel" }, { "path": "./blocksuite/affine/model" }, { "path": "./blocksuite/affine/shared" }, { "path": "./blocksuite/affine/widget-drag-handle" }, diff --git a/yarn.lock b/yarn.lock index 5924c88a0a..0fa0c5221f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3471,6 +3471,7 @@ __metadata: version: 0.0.0-use.local resolution: "@blocksuite/affine-block-frame@workspace:blocksuite/affine/block-frame" dependencies: + "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" @@ -3485,6 +3486,7 @@ __metadata: "@types/mdast": "npm:^4.0.4" lit: "npm:^3.2.0" minimatch: "npm:^10.0.1" + yjs: "npm:^13.6.21" zod: "npm:^3.23.8" languageName: unknown linkType: soft @@ -3718,6 +3720,30 @@ __metadata: languageName: unknown linkType: soft +"@blocksuite/affine-fragment-frame-panel@workspace:*, @blocksuite/affine-fragment-frame-panel@workspace:blocksuite/affine/fragment-frame-panel": + version: 0.0.0-use.local + resolution: "@blocksuite/affine-fragment-frame-panel@workspace:blocksuite/affine/fragment-frame-panel" + dependencies: + "@blocksuite/affine-block-frame": "workspace:*" + "@blocksuite/affine-block-surface": "workspace:*" + "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-model": "workspace:*" + "@blocksuite/affine-shared": "workspace:*" + "@blocksuite/block-std": "workspace:*" + "@blocksuite/global": "workspace:*" + "@blocksuite/icons": "npm:^2.2.1" + "@blocksuite/inline": "workspace:*" + "@blocksuite/store": "workspace:*" + "@floating-ui/dom": "npm:^1.6.10" + "@lit/context": "npm:^1.1.2" + "@preact/signals-core": "npm:^1.8.0" + "@toeverything/theme": "npm:^1.1.11" + lit: "npm:^3.2.0" + minimatch: "npm:^10.0.1" + zod: "npm:^3.23.8" + languageName: unknown + linkType: soft + "@blocksuite/affine-model@workspace:*, @blocksuite/affine-model@workspace:blocksuite/affine/model": version: 0.0.0-use.local resolution: "@blocksuite/affine-model@workspace:blocksuite/affine/model" @@ -3935,6 +3961,7 @@ __metadata: "@blocksuite/affine-block-surface-ref": "workspace:*" "@blocksuite/affine-block-table": "workspace:*" "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-fragment-frame-panel": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/affine-widget-drag-handle": "workspace:*"