snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/widgets/viewport-overlay/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@blocksuite/affine-widget-viewport-overlay",
+  "description": "Affine viewport overlay widget.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/std": "workspace:*",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/widgets/viewport-overlay/src/effects.ts

@@ -0,0 +1,11 @@
+import {
+  AFFINE_VIEWPORT_OVERLAY_WIDGET,
+  AffineViewportOverlayWidget,
+} from './index';
+
+export function effects() {
+  customElements.define(
+    AFFINE_VIEWPORT_OVERLAY_WIDGET,
+    AffineViewportOverlayWidget
+  );
+}

blocksuite/affine/widgets/viewport-overlay/src/index.ts

@@ -0,0 +1,90 @@
+import type { RootBlockModel } from '@blocksuite/affine-model';
+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';
+
+export class AffineViewportOverlayWidget extends WidgetComponent<RootBlockModel> {
+  static override styles = css`
+    .affine-viewport-overlay-widget {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: transparent;
+      pointer-events: none;
+      z-index: calc(var(--affine-z-index-popover) - 1);
+    }
+
+    .affine-viewport-overlay-widget.lock {
+      pointer-events: auto;
+    }
+  `;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.handleEvent(
+      'dragStart',
+      () => {
+        return this._lockViewport;
+      },
+      { global: true }
+    );
+    this.handleEvent(
+      'pointerDown',
+      () => {
+        return this._lockViewport;
+      },
+      { global: true }
+    );
+    this.handleEvent(
+      'click',
+      () => {
+        return this._lockViewport;
+      },
+      { global: true }
+    );
+  }
+
+  lock() {
+    this._lockViewport = true;
+  }
+
+  override render() {
+    const classes = classMap({
+      'affine-viewport-overlay-widget': true,
+      lock: this._lockViewport,
+    });
+    const style = styleMap({
+      width: `${this._lockViewport ? '100vw' : '0'}`,
+      height: `${this._lockViewport ? '100%' : '0'}`,
+    });
+    return html` <div class=${classes} style=${style}></div> `;
+  }
+
+  toggleLock() {
+    this._lockViewport = !this._lockViewport;
+  }
+
+  unlock() {
+    this._lockViewport = false;
+  }
+
+  @state()
+  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

@@ -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

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