Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-24 05:48:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): viewport overlay widget extension (#12035)

Browse Source 
Closes: BS-3360

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new viewport overlay widget, making it available as part of the workspace and enabling its integration into supported pages.

- **Refactor**
  - Updated internal imports and exports to utilize the new viewport overlay widget package.
  - Streamlined widget registration and extension mechanisms for improved modularity.

- **Chores**
  - Added configuration and project references to support the new viewport overlay widget package in the build system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Saul-Mirone
2025-04-28 14:38:26 +00:00
parent d7be1b3424
commit 4e201ede17
19 changed files with 147 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/all/package.json
+3
View File
@@ -64,6 +64,7 @@
"@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
"@blocksuite/affine-widget-slash-menu": "workspace:*",
"@blocksuite/affine-widget-toolbar": "workspace:*",
"@blocksuite/affine-widget-viewport-overlay": "workspace:*",
"@blocksuite/data-view": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/std": "workspace:*",
@@ -184,6 +185,8 @@
"./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",
"./widgets/viewport-overlay": "./src/widgets/viewport-overlay/index.ts",
"./widgets/viewport-overlay/view": "./src/widgets/viewport-overlay/view.ts",
"./fragments/doc-title": "./src/fragments/doc-title.ts",
"./fragments/frame-panel": "./src/fragments/frame-panel.ts",
"./fragments/outline": "./src/fragments/outline.ts",
blocksuite/affine/all/src/extensions/view.ts
+2
View File
@@ -42,6 +42,7 @@ import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-s
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 { ViewportOverlayViewExtension } from '@blocksuite/affine-widget-viewport-overlay/view';
import { MigratingViewExtension } from './migrating-view';
@@ -100,5 +101,6 @@ export function getInternalViewExtensions() {
ScrollAnchoringViewExtension,
SlashMenuViewExtension,
ToolbarViewExtension,
ViewportOverlayViewExtension,
];
}
blocksuite/affine/all/src/widgets/viewport-overlay/index.ts
+1
View File
@@ -0,0 +1 @@
export * from '@blocksuite/affine-widget-viewport-overlay';
blocksuite/affine/all/src/widgets/viewport-overlay/view.ts
+1
View File
@@ -0,0 +1 @@
export * from '@blocksuite/affine-widget-viewport-overlay/view';
blocksuite/affine/all/tsconfig.json
+1
View File
@@ -61,6 +61,7 @@
{ "path": "../widgets/scroll-anchoring" },
{ "path": "../widgets/slash-menu" },
{ "path": "../widgets/toolbar" },
{ "path": "../widgets/viewport-overlay" },
{ "path": "../data-view" },
{ "path": "../../framework/global" },
{ "path": "../../framework/std" },
blocksuite/affine/blocks/root/src/common-specs/index.ts
-4
View File
@@ -7,13 +7,11 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
import { clipboardConfigs } from '../clipboard';
import { builtinToolbarConfig } from '../configs/toolbar';
import { fallbackKeymap } from '../keyboard/keymap';
import { viewportOverlayWidget } from './widgets';
export const CommonSpecs: ExtensionType[] = [
FlavourExtension('affine:page'),
...RootBlockAdapterExtensions,
...clipboardConfigs,
viewportOverlayWidget,
fallbackKeymap,
ToolbarModuleExtension({
@@ -21,5 +19,3 @@ export const CommonSpecs: ExtensionType[] = [
config: builtinToolbarConfig,
}),
];
export * from './widgets';
blocksuite/affine/blocks/root/src/common-specs/widgets.ts
-10
View File
@@ -1,10 +0,0 @@
import { WidgetViewExtension } from '@blocksuite/std';
import { literal, unsafeStatic } from 'lit/static-html.js';
import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';
export const viewportOverlayWidget = WidgetViewExtension(
'affine:page',
AFFINE_VIEWPORT_OVERLAY_WIDGET,
literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
);
blocksuite/affine/blocks/root/src/effects.ts
-8
View File
@@ -31,10 +31,6 @@ import {
AFFINE_PAGE_DRAGGING_AREA_WIDGET,
AffinePageDraggingAreaWidget,
} from './widgets/page-dragging-area/page-dragging-area.js';
import {
AFFINE_VIEWPORT_OVERLAY_WIDGET,
AffineViewportOverlayWidget,
} from './widgets/viewport-overlay/viewport-overlay.js';
export function effects() {
// Register components by category
@@ -59,10 +55,6 @@ function registerWidgets() {
AFFINE_PAGE_DRAGGING_AREA_WIDGET,
AffinePageDraggingAreaWidget
);
customElements.define(
AFFINE_VIEWPORT_OVERLAY_WIDGET,
AffineViewportOverlayWidget
);
customElements.define(
AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
AffineEdgelessZoomToolbarWidget
blocksuite/affine/blocks/root/src/widgets/index.ts
-1
View File
@@ -1,3 +1,2 @@
export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
export * from './viewport-overlay/viewport-overlay.js';
blocksuite/affine/widgets/toolbar/package.json
+1 -8
View File
@@ -39,12 +39,5 @@
"!src/__tests__",
"!dist/__tests__"
],
"version": "0.21.0",
"devDependencies": {
"@types/lodash.groupby": "^4",
"@types/lodash.mergewith": "^4",
"@types/lodash.orderby": "^4",
"@types/lodash.partition": "^4",
"@types/lodash.topairs": "^4"
}
"version": "0.21.0"
}
blocksuite/affine/widgets/viewport-overlay/package.json
+40
View File
@@ -0,0 +1,40 @@
{
"name": "@blocksuite/affine-widget-viewport-overlay",
"description": "Affine viewport overlay widget.",
"type": "module",
"scripts": {
"build": "tsc"
},
"sideEffects": false,
"keywords": [],
"author": "toeverything",
"license": "MIT",
"dependencies": {
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-ext-loader": "workspace:*",
"@blocksuite/affine-model": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/icons": "^2.2.12",
"@blocksuite/std": "workspace:*",
"@floating-ui/dom": "^1.6.13",
"@preact/signals-core": "^1.8.0",
"@toeverything/theme": "^1.1.12",
"@types/lodash-es": "^4.17.12",
"lit": "^3.2.0",
"lodash-es": "^4.17.21",
"rxjs": "^7.8.1"
},
"exports": {
".": "./src/index.ts",
"./effects": "./src/effects.ts",
"./view": "./src/view.ts"
},
"files": [
"src",
"dist",
"!src/__tests__",
"!dist/__tests__"
],
"version": "0.21.0"
}
blocksuite/affine/widgets/viewport-overlay/src/effects.ts
+11
View File
@@ -0,0 +1,11 @@
import {
AFFINE_VIEWPORT_OVERLAY_WIDGET,
AffineViewportOverlayWidget,
} from './index';
export function effects() {
customElements.define(
AFFINE_VIEWPORT_OVERLAY_WIDGET,
AffineViewportOverlayWidget
);
}
blocksuite/affine/blocks/root/src/widgets/viewport-overlay/viewport-overlay.ts → blocksuite/affine/widgets/viewport-overlay/src/index.ts
+8 -1
View File
@@ -1,9 +1,10 @@
import type { RootBlockModel } from '@blocksuite/affine-model';
import { WidgetComponent } from '@blocksuite/std';
import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
import { css, html } from 'lit';
import { state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { literal, unsafeStatic } from 'lit/static-html.js';
export const AFFINE_VIEWPORT_OVERLAY_WIDGET = 'affine-viewport-overlay-widget';
@@ -76,6 +77,12 @@ export class AffineViewportOverlayWidget extends WidgetComponent<RootBlockModel>
private accessor _lockViewport = false;
}
export const viewportOverlayWidget = WidgetViewExtension(
'affine:page',
AFFINE_VIEWPORT_OVERLAY_WIDGET,
literal`${unsafeStatic(AFFINE_VIEWPORT_OVERLAY_WIDGET)}`
);
declare global {
interface HTMLElementTagNameMap {
[AFFINE_VIEWPORT_OVERLAY_WIDGET]: AffineViewportOverlayWidget;
blocksuite/affine/widgets/viewport-overlay/src/view.ts
+21
View File
@@ -0,0 +1,21 @@
import {
type ViewExtensionContext,
ViewExtensionProvider,
} from '@blocksuite/affine-ext-loader';
import { effects } from './effects';
import { viewportOverlayWidget } from './index';
export class ViewportOverlayViewExtension extends ViewExtensionProvider {
override name = 'affine-viewport-overlay-widget';
override effect() {
super.effect();
effects();
}
override setup(context: ViewExtensionContext) {
super.setup(context);
context.register(viewportOverlayWidget);
}
}
blocksuite/affine/widgets/viewport-overlay/tsconfig.json
+17
View File
@@ -0,0 +1,17 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
},
"include": ["./src"],
"references": [
{ "path": "../../components" },
{ "path": "../../ext-loader" },
{ "path": "../../model" },
{ "path": "../../shared" },
{ "path": "../../../framework/global" },
{ "path": "../../../framework/std" }
]
}