chore(editor): cleanup dead code (#9904)

blocksuite/affine/block-surface/src/extensions/index.ts

@@ -1,2 +1,3 @@
 export * from './crud-extension';
 export * from './legacy-slot-extension';
+export * from './query';

blocksuite/affine/widget-edgeless-auto-connect/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@blocksuite/affine-widget-edgeless-auto-connect",
+  "description": "Affine edgeless auto connect widget.",
+  "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-note": "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:*",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.7",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}

blocksuite/affine/widget-edgeless-auto-connect/src/effects.ts

@@ -0,0 +1,11 @@
+import {
+  AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
+  EdgelessAutoConnectWidget,
+} from '.';
+
+export function effects() {
+  customElements.define(
+    AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
+    EdgelessAutoConnectWidget
+  );
+}

blocksuite/affine/widget-edgeless-auto-connect/src/index.ts

@@ -1,4 +1,8 @@
-import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  EdgelessCRUDIdentifier,
+  EdgelessLegacySlotIdentifier,
+  isNoteBlock,
+} from '@blocksuite/affine-block-surface';
 import {
   AutoConnectLeftIcon,
   AutoConnectRightIcon,
@@ -18,17 +22,16 @@ import {
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
-import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import {
+  type GfxController,
+  GfxControllerIdentifier,
+} from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
-import type { EdgelessRootService } from '../../edgeless/edgeless-root-service.js';
-import { isNoteBlock } from '../../edgeless/utils/query.js';
-
 const PAGE_VISIBLE_INDEX_LABEL_WIDTH = 44;
 const PAGE_VISIBLE_INDEX_LABEL_HEIGHT = 24;
 const EDGELESS_ONLY_INDEX_LABEL_WIDTH = 24;
@@ -113,11 +116,7 @@ function isAutoConnectElement(element: unknown): element is AutoConnectElement {
 export const AFFINE_EDGELESS_AUTO_CONNECT_WIDGET =
   'affine-edgeless-auto-connect-widget';
 
-export class EdgelessAutoConnectWidget extends WidgetComponent<
+export class EdgelessAutoConnectWidget extends WidgetComponent<RootBlockModel> {
-  RootBlockModel,
-  EdgelessRootBlockComponent,
-  EdgelessRootService
-> {
   static override styles = css`
     .page-visible-index-label {
       box-sizing: border-box;
@@ -174,6 +173,22 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     }
   `;
 
+  private get _gfx(): GfxController {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  private get _crud() {
+    return this.std.get(EdgelessCRUDIdentifier);
+  }
+
+  private get _viewport() {
+    return this._gfx.viewport;
+  }
+
+  private get _selection() {
+    return this._gfx.selection;
+  }
+
   private readonly _updateLabels = () => {
     const service = this.service;
     if (!service.doc.root) return;
@@ -195,7 +210,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
 
       note.children.forEach(model => {
         if (matchFlavours(model, ['affine:surface-ref'])) {
-          const reference = service.crud.getElementById(model.reference);
+          const reference = this._crud.getElementById(model.reference);
 
           if (!isAutoConnectElement(reference)) return;
 
@@ -224,7 +239,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
       _edgelessOnlyNotesSet,
       note => note.id,
       note => {
-        const { viewport } = this.service;
+        const viewport = this._viewport;
         const { zoom } = viewport;
         const bound = Bound.deserialize(note.xywh);
         const [left, right] = viewport.toViewCoord(bound.x, bound.y);
@@ -275,11 +290,11 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
       .map(block => block.model) as SurfaceRefBlockModel[];
 
     const getVisibility = () => {
-      const { selectedElements } = service.selection;
+      const { selectedElements } = this._selection;
 
       if (
         selectedElements.length === 1 &&
-        !service.selection.editing &&
+        !this._selection.editing &&
         (isNoteBlock(selectedElements[0]) ||
           surfaceRefs.some(ref => ref.reference === selectedElements[0].id))
       ) {
@@ -292,7 +307,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     };
 
     this._disposables.add(
-      service.selection.slots.updated.on(() => {
+      this._selection.slots.updated.on(() => {
         getVisibility();
       })
     );
@@ -323,16 +338,19 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
         }
       })
     );
-    this._disposables.add(
+    const surface = this._gfx.surface;
-      service.surface.elementUpdated.on(payload => {
+    if (surface) {
-        if (
+      this._disposables.add(
-          payload.props['xywh'] &&
+        surface.elementUpdated.on(payload => {
-          surfaceRefs.some(ref => ref.reference === payload.id)
+          if (
-        ) {
+            payload.props['xywh'] &&
-          this.requestUpdate();
+            surfaceRefs.some(ref => ref.reference === payload.id)
-        }
+          ) {
-      })
+            this.requestUpdate();
-    );
+          }
+        })
+      );
+    }
   }
 
   private _navigateToNext() {
@@ -341,11 +359,11 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     this._index = this._index + 1;
     const element = elements[this._index];
     const bound = Bound.deserialize(element.xywh);
-    this.service.selection.set({
+    this._selection.set({
       elements: [element.id],
       editing: false,
     });
-    this.service.viewport.setViewportByBound(bound, [80, 80, 80, 80], true);
+    this._viewport.setViewportByBound(bound, [80, 80, 80, 80], true);
   }
 
   private _navigateToPrev() {
@@ -354,15 +372,15 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     this._index = this._index - 1;
     const element = elements[this._index];
     const bound = Bound.deserialize(element.xywh);
-    this.service.selection.set({
+    this._selection.set({
       elements: [element.id],
       editing: false,
     });
-    this.service.viewport.setViewportByBound(bound, [80, 80, 80, 80], true);
+    this._viewport.setViewportByBound(bound, [80, 80, 80, 80], true);
   }
 
   private _NavigatorComponent(elements: AutoConnectElement[]) {
-    const { viewport } = this.service;
+    const viewport = this._viewport;
     const { zoom } = viewport;
     const className = `navigator ${this._index >= 0 ? 'show' : 'hidden'}`;
     const element = elements[this._index];
@@ -405,7 +423,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     elements: AutoConnectElement[],
     counts: number[]
   ) {
-    const { viewport } = this.service;
+    const viewport = this._viewport;
     const { zoom } = viewport;
     let index = 0;
 

blocksuite/affine/widget-edgeless-auto-connect/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../block-note" },
+    { "path": "../block-surface" },
+    { "path": "../components" },
+    { "path": "../model" },
+    { "path": "../shared" },
+    { "path": "../../framework/block-std" },
+    { "path": "../../framework/global" }
+  ]
+}

blocksuite/blocks/package.json

@@ -35,6 +35,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",

blocksuite/blocks/src/effects.ts

@@ -32,6 +32,7 @@ import { effects as componentToggleButtonEffects } from '@blocksuite/affine-comp
 import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
 import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
 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';
 import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
 import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
@@ -152,10 +153,6 @@ import {
   AIPanelGenerating,
   AIPanelInput,
 } from './root-block/widgets/ai-panel/components/index.js';
-import {
-  AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
-  EdgelessAutoConnectWidget,
-} from './root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.js';
 import { EdgelessCopilotPanel } from './root-block/widgets/edgeless-copilot-panel/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './root-block/widgets/edgeless-zoom-toolbar/index.js';
 import { ZoomBarToggleButton } from './root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
@@ -223,6 +220,7 @@ export function effects() {
   widgetEdgelessElementToolbarEffects();
   widgetRemoteSelectionEffects();
   widgetDragHandleEffects();
+  widgetEdgelessAutoConnectEffects();
   dataViewEffects();
 
   customElements.define('affine-page-root', PageRootBlockComponent);
@@ -392,10 +390,6 @@ export function effects() {
     AffineEdgelessZoomToolbarWidget
   );
   customElements.define(AFFINE_SURFACE_REF_TOOLBAR, AffineSurfaceRefToolbar);
-  customElements.define(
-    AFFINE_EDGELESS_AUTO_CONNECT_WIDGET,
-    EdgelessAutoConnectWidget
-  );
   customElements.define(AFFINE_FORMAT_BAR_WIDGET, AffineFormatBarWidget);
 }
 

blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts

@@ -3,6 +3,7 @@ import {
   type ConnectionOverlay,
   ConnectorPathGenerator,
   EdgelessCRUDIdentifier,
+  isNoteBlock,
   Overlay,
   OverlayIdentifier,
   type RoughCanvas,
@@ -44,7 +45,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
-import { isNoteBlock } from '../../utils/query.js';
 import { mountShapeTextEditor } from '../../utils/text.js';
 import type { SelectedRect } from '../rects/edgeless-selected-rect.js';
 import { EdgelessAutoCompletePanel } from './auto-complete-panel.js';

blocksuite/blocks/src/root-block/edgeless/components/note-slicer/index.ts

@@ -1,3 +1,4 @@
+import { isNoteBlock } from '@blocksuite/affine-block-surface';
 import { SmallScissorsIcon } from '@blocksuite/affine-components/icons';
 import { DEFAULT_NOTE_HEIGHT } from '@blocksuite/affine-model';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
@@ -22,7 +23,6 @@ import type {
   NoteBlockModel,
   RootBlockModel,
 } from '../../../../index.js';
-import { isNoteBlock } from '../../utils/query.js';
 
 const DIVIDING_LINE_OFFSET = 4;
 const NEW_NOTE_GAP = 40;

blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts

@@ -8,6 +8,7 @@ import {
 } from '@blocksuite/affine-block-embed';
 import {
   CanvasElementType,
+  isNoteBlock,
   normalizeShapeBound,
   OverlayIdentifier,
   TextUtils,
@@ -91,7 +92,6 @@ import {
   isFrameBlock,
   isImageBlock,
   isMindmapNode,
-  isNoteBlock,
 } from '../../utils/query.js';
 import {
   HandleDirection,

blocksuite/blocks/src/root-block/edgeless/edgeless-keyboard.ts

@@ -1,5 +1,6 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
+import { isNoteBlock } from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
   ConnectorElementModel,
@@ -45,7 +46,7 @@ import {
 } from './utils/consts.js';
 import { deleteElements } from './utils/crud.js';
 import { getNextShapeType } from './utils/hotkey-utils.js';
-import { isCanvasElement, isNoteBlock } from './utils/query.js';
+import { isCanvasElement } from './utils/query.js';
 import {
   mountConnectorLabelEditor,
   mountShapeTextEditor,

blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts

@@ -7,6 +7,7 @@ import {
   ThemeService,
 } from '@blocksuite/affine-shared/services';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
+import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET } from '@blocksuite/affine-widget-edgeless-auto-connect';
 import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
 import {
   AFFINE_DOC_REMOTE_SELECTION_WIDGET,
@@ -25,7 +26,6 @@ import { literal, unsafeStatic } from 'lit/static-html.js';
 
 import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
 import { RootBlockAdapterExtensions } from '../adapters/extension.js';
-import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET } from '../widgets/edgeless-auto-connect/edgeless-auto-connect.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
 import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/index.js';
 import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';

blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts

@@ -1,6 +1,7 @@
 import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
 import {
   ConnectorUtils,
+  isNoteBlock,
   OverlayIdentifier,
 } from '@blocksuite/affine-block-surface';
 import { focusTextModel } from '@blocksuite/affine-components/rich-text';
@@ -56,7 +57,6 @@ import {
   isCanvasElement,
   isEdgelessTextBlock,
   isFrameBlock,
-  isNoteBlock,
 } from '../utils/query.js';
 import type { EdgelessSnapManager } from '../utils/snap-manager.js';
 import {

blocksuite/blocks/src/root-block/edgeless/utils/clipboard-utils.ts

@@ -1,3 +1,4 @@
+import { isNoteBlock } from '@blocksuite/affine-block-surface';
 import type {
   EdgelessTextBlockModel,
   EmbedSyncedDocModel,
@@ -22,7 +23,6 @@ import {
   isEmbedSyncedDocBlock,
   isFrameBlock,
   isImageBlock,
-  isNoteBlock,
 } from './query.js';
 
 const offset = 10;

blocksuite/blocks/src/root-block/edgeless/utils/crud.ts

@@ -1,6 +1,8 @@
+import { isNoteBlock } from '@blocksuite/affine-block-surface';
+
 import type { Connectable } from '../../../_common/utils/index.js';
 import type { EdgelessRootBlockComponent } from '../index.js';
-import { isConnectable, isNoteBlock } from './query.js';
+import { isConnectable } from './query.js';
 
 /**
  * Use deleteElementsV2 instead.

blocksuite/blocks/src/root-block/edgeless/utils/query.ts

@@ -19,7 +19,6 @@ import {
   type FrameBlockModel,
   type ImageBlockModel,
   MindmapElementModel,
-  type NoteBlockModel,
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine-model';
@@ -46,12 +45,6 @@ export function isMindmapNode(
   return element?.group instanceof MindmapElementModel;
 }
 
-export function isNoteBlock(
-  element: BlockModel | BlockSuite.EdgelessModel | null
-): element is NoteBlockModel {
-  return !!element && 'flavour' in element && element.flavour === 'affine:note';
-}
-
 export function isEdgelessTextBlock(
   element: BlockModel | BlockSuite.EdgelessModel | null
 ): element is EdgelessTextBlockModel {

blocksuite/blocks/src/root-block/widgets/element-toolbar/index.ts

@@ -1,4 +1,5 @@
 import type { BuiltInEmbedModel } from '@blocksuite/affine-block-bookmark';
+import { isNoteBlock } from '@blocksuite/affine-block-surface';
 import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
 import {
   cloneGroups,
@@ -47,7 +48,6 @@ import {
   isEmbeddedBlock,
   isFrameBlock,
   isImageBlock,
-  isNoteBlock,
 } from '../../edgeless/utils/query.js';
 import { renderAddFrameButton } from './add-frame-button.js';
 import { renderAddGroupButton } from './add-group-button.js';

blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/context.ts

@@ -1,4 +1,7 @@
-import type { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
+import {
+  isNoteBlock,
+  type SurfaceBlockComponent,
+} from '@blocksuite/affine-block-surface';
 import { MenuContext } from '@blocksuite/affine-components/toolbar';
 import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
 import {
@@ -17,7 +20,6 @@ import {
   isEmbedSyncedDocBlock,
   isFrameBlock,
   isImageBlock,
-  isNoteBlock,
 } from '../../../edgeless/utils/query.js';
 
 export class ElementToolbarMoreMenuContext extends MenuContext {

blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/render-linked-doc.ts

@@ -1,4 +1,4 @@
-import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
+import { getSurfaceBlock, isNoteBlock } from '@blocksuite/affine-block-surface';
 import type { FrameBlockModel, NoteBlockModel } from '@blocksuite/affine-model';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
@@ -12,7 +12,7 @@ import {
   mapFrameIds,
   sortEdgelessElements,
 } from '../../../edgeless/utils/clone-utils.js';
-import { isFrameBlock, isNoteBlock } from '../../../edgeless/utils/query.js';
+import { isFrameBlock } from '../../../edgeless/utils/query.js';
 
 function addBlocksToDoc(targetDoc: Store, model: BlockModel, parentId: string) {
   // Add current block to linked doc

blocksuite/blocks/tsconfig.json

@@ -28,6 +28,7 @@
     { "path": "../affine/model" },
     { "path": "../affine/shared" },
     { "path": "../affine/widget-drag-handle" },
+    { "path": "../affine/widget-edgeless-auto-connect" },
     { "path": "../affine/widget-frame-title" },
     { "path": "../affine/widget-remote-selection" },
     { "path": "../affine/widget-scroll-anchoring" },

blocksuite/playground/apps/_common/components/demo-script.ts

@@ -1,137 +0,0 @@
-export const demoScript = `import * as THREE from "three";
-import {OrbitControls} from "three/addons/controls/OrbitControls.js";
-
-
-let scene = new THREE.Scene();
-let camera = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, 1, 1000);
-camera.position.set(0, 10, 10).setLength(17);
-let renderer = new THREE.WebGLRenderer({antialias: true});
-renderer.setSize(innerWidth, innerHeight);
-document.body.appendChild(renderer.domElement);
-
-window.addEventListener("resize", event => {
-  camera.aspect = innerWidth / innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(innerWidth, innerHeight);
-})
-
-let controls = new OrbitControls(camera, renderer.domElement);
-controls.enableDamping = true;
-
-let gu = {
-  time: {value: 0}
-}
-
-let params = {
-  instanceCount: {value: 10},
-  instanceLength: {value: 1.75},
-  instanceGap: {value: 0.5},
-  profileFactor: {value: 1.5}
-}
-
-let ig = new THREE.InstancedBufferGeometry().copy(new THREE.BoxGeometry(1, 1, 1, 100, 1, 1).translate(0.5, 0, 0));
-ig.instanceCount = params.instanceCount.value;
-
-let m = new THREE.MeshBasicMaterial({
-  vertexColors: true,
-  onBeforeCompile: shader => {
-    shader.uniforms.time = gu.time;
-    shader.uniforms.instanceCount = params.instanceCount;
-    shader.uniforms.instanceLength = params.instanceLength;
-    shader.uniforms.instanceGap = params.instanceGap;
-    shader.uniforms.profileFactor = params.profileFactor;
-    shader.vertexShader = \`
-      uniform float time;
-      
-      uniform float instanceCount;
-      uniform float instanceLength;
-      uniform float instanceGap;
-      
-      uniform float profileFactor;
-      
-      varying float noGrid;
-      
-      mat2 rot(float a){return mat2(cos(a), sin(a), -sin(a), cos(a));}
-      
-      \${shader.vertexShader}
-    \`.replace(
-      \`#include <begin_vertex>\`,
-      \`#include <begin_vertex>
-      
-        float t = time * 0.1;
-        
-        float iID = float(gl_InstanceID);
-        
-        float instanceTotalLength = instanceLength + instanceGap;
-        float instanceFactor = instanceLength / instanceTotalLength;
-        
-        float circleLength = instanceTotalLength * instanceCount;
-        float circleRadius = circleLength / PI2;
-        
-        float partAngle = PI2 / instanceCount;
-        float boxAngle = partAngle * instanceFactor;
-
-        float partTurn = PI / instanceCount;
-        float boxTurn = partTurn * instanceFactor;
-        
-        float startAngle = t + partAngle * iID;
-        float startTurn = t * 0.5 + partTurn * iID;
-        
-        float angleFactor = position.x;
-        
-        float angle = startAngle + boxAngle * angleFactor;
-        float turn = startTurn + boxTurn * angleFactor;
-        
-        vec3 pos = vec3(0, position.y, position.z);
-        pos.yz *= rot(turn);
-        pos.yz *= profileFactor;
-        pos.z += circleRadius;
-        pos.xz *= rot(angle);
-        
-        transformed = pos;
-        float nZ = floor(abs(normal.z) + 0.1);
-        float nX = floor(abs(normal.x) + 0.1);
-        noGrid = 1. - nX;
-        vColor = vec3(nZ == 1. ? 0.1 : nX == 1. ? 0. : 0.01);
-      \`
-    );
-    //console.log(shader.vertexShader);
-    shader.fragmentShader = \`
-      varying float noGrid;
-      
-      float lines(vec2 coord, float thickness){
-        vec2 grid = abs(fract(coord - 0.5) - 0.5) / fwidth(coord) / thickness;
-        float line = min(grid.x, grid.y);
-        return 1.0 - min(line, 1.0);
-      }
-      \${shader.fragmentShader}
-    \`.replace(
-      \`#include <color_fragment>\`,
-      \`#include <color_fragment>
-        
-        float multiply = vColor.r > 0.05 ? 3. : 2.;
-        float edges = lines(vUv, 3.);
-        float grid = min(noGrid, lines(vUv * multiply, 1.));
-        diffuseColor.rgb = mix(diffuseColor.rgb, vec3(1), max(edges, grid));
-      \`
-    )
-    //console.log(shader.fragmentShader)
-  }
-});
-m.defines = {"USE_UV": ""};
-
-let o = new THREE.Mesh(ig, m);
-scene.add(o)
-o.rotation.z = -Math.PI * 0.25;
-
-let clock = new THREE.Clock();
-let t = 0;
-
-renderer.setAnimationLoop(()=>{
-  let dt = clock.getDelta();
-  t += dt;
-  gu.time.value = t;
-  controls.update();
-  renderer.render(scene, camera);
-})
-`;

blocksuite/playground/apps/_common/components/side-panel.ts

@@ -1,49 +0,0 @@
-import { ShadowlessElement } from '@blocksuite/block-std';
-import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('side-panel')
-export class SidePanel extends ShadowlessElement {
-  static override styles = css`
-    side-panel {
-      width: 395px;
-      background-color: var(--affine-background-secondary-color);
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      display: none;
-    }
-  `;
-
-  currentContent: HTMLElement | null = null;
-
-  hideContent() {
-    if (this.currentContent) {
-      this.style.display = 'none';
-      this.currentContent.remove();
-      this.currentContent = null;
-    }
-  }
-
-  protected override render(): unknown {
-    return html``;
-  }
-
-  showContent(ele: HTMLElement) {
-    if (this.currentContent) {
-      this.currentContent.remove();
-    }
-    this.style.display = 'block';
-    this.currentContent = ele;
-    this.append(ele);
-  }
-
-  toggle(ele: HTMLElement) {
-    if (this.currentContent !== ele) {
-      this.showContent(ele);
-    } else {
-      this.hideContent();
-    }
-  }
-}

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -15,7 +15,6 @@ import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/themes/dark.css';
 import './left-side-panel.js';
-import './side-panel.js';
 
 import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -65,7 +64,6 @@ import type { CustomOutlinePanel } from './custom-outline-panel.js';
 import type { CustomOutlineViewer } from './custom-outline-viewer.js';
 import type { DocsPanel } from './docs-panel.js';
 import type { LeftSidePanel } from './left-side-panel.js';
-import type { SidePanel } from './side-panel.js';
 
 const basePath =
   'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.11.2/dist';
@@ -1046,9 +1044,6 @@ export class StarterDebugMenu extends ShadowlessElement {
 
   @property({ attribute: false })
   accessor readonly = false;
-
-  @property({ attribute: false })
-  accessor sidePanel!: SidePanel;
 }
 
 declare global {

blocksuite/playground/apps/_common/mock-services.ts

@@ -1,17 +1,10 @@
-import type {
-  PeekOptions,
-  PeekViewService,
-} from '@blocksuite/affine-components/peek';
-import { PeekViewExtension } from '@blocksuite/affine-components/peek';
 import type { EditorSetting } from '@blocksuite/affine-shared/services';
-import { BlockComponent } from '@blocksuite/block-std';
 import {
   ColorScheme,
   type DocMode,
   type DocModeProvider,
   GeneralSettingSchema,
   type GenerateDocUrlService,
-  matchFlavours,
   type NotificationService,
   type ParseDocUrlService,
   type ReferenceParams,
@@ -22,9 +15,6 @@ import { Slot } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { type Workspace } from '@blocksuite/store';
 import { Signal, signal } from '@preact/signals-core';
-import type { TemplateResult } from 'lit';
-
-import type { AttachmentViewerPanel } from './components/attachment-viewer-panel.js';
 
 function getModeFromStorage() {
   const mapJson = localStorage.getItem('playground:docMode');
@@ -154,37 +144,6 @@ export const themeExtension: ThemeExtension = {
   },
 };
 
-export function mockPeekViewExtension(
-  attachmentViewerPanel: AttachmentViewerPanel
-) {
-  return PeekViewExtension({
-    peek(
-      element: {
-        target: HTMLElement;
-        docId: string;
-        blockIds?: string[];
-        template?: TemplateResult;
-      },
-      options?: PeekOptions
-    ) {
-      const { target } = element;
-
-      if (
-        target instanceof BlockComponent &&
-        matchFlavours(target.model, ['affine:attachment'])
-      ) {
-        attachmentViewerPanel.open(target.model);
-        return Promise.resolve();
-      }
-
-      alert('Peek view not implemented in playground');
-      console.log('peek', element, options);
-
-      return Promise.resolve();
-    },
-  } satisfies PeekViewService);
-}
-
 export function mockGenerateDocUrlService(collection: Workspace) {
   const generateDocUrlService: GenerateDocUrlService = {
     generateDocUrl: (docId: string, params?: ReferenceParams) => {

blocksuite/playground/apps/starter/main.ts

@@ -73,14 +73,6 @@ async function main() {
       }),
     });
 
-    // test if blocksuite can run in a web worker, SEE: tests/worker.spec.ts
-    // window.testWorker = new Worker(
-    //   new URL('./utils/test-worker.ts', import.meta.url),
-    //   {
-    //     type: 'module',
-    //   }
-    // );
-
     return;
   }
 

blocksuite/playground/apps/starter/utils/editor.ts

@@ -23,7 +23,6 @@ import { CustomOutlinePanel } from '../../_common/components/custom-outline-pane
 import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer.js';
 import { DocsPanel } from '../../_common/components/docs-panel.js';
 import { LeftSidePanel } from '../../_common/components/left-side-panel.js';
-import { SidePanel } from '../../_common/components/side-panel.js';
 import { StarterDebugMenu } from '../../_common/components/starter-debug-menu.js';
 import {
   getDocFromUrlParams,
@@ -85,7 +84,6 @@ export async function mountDefaultDocEditor(collection: Workspace) {
         );
       },
     },
-    // mockPeekViewExtension(attachmentViewerPanel),
   ];
 
   const pageSpecs = SpecProvider.getInstance().getSpec('page');
@@ -136,8 +134,6 @@ export async function mountDefaultDocEditor(collection: Workspace) {
   const framePanel = new CustomFramePanel();
   framePanel.editor = editor;
 
-  const sidePanel = new SidePanel();
-
   const leftSidePanel = new LeftSidePanel();
 
   const docsPanel = new DocsPanel();
@@ -152,7 +148,6 @@ export async function mountDefaultDocEditor(collection: Workspace) {
   debugMenu.outlinePanel = outlinePanel;
   debugMenu.outlineViewer = outlineViewer;
   debugMenu.framePanel = framePanel;
-  debugMenu.sidePanel = sidePanel;
   debugMenu.leftSidePanel = leftSidePanel;
   debugMenu.docsPanel = docsPanel;
   debugMenu.commentPanel = commentPanel;
@@ -161,7 +156,6 @@ export async function mountDefaultDocEditor(collection: Workspace) {
   document.body.append(outlinePanel);
   document.body.append(outlineViewer);
   document.body.append(framePanel);
-  document.body.append(sidePanel);
   document.body.append(leftSidePanel);
   document.body.append(debugMenu);
 

blocksuite/playground/apps/starter/utils/test-worker.ts

@@ -1,12 +0,0 @@
-// This file is used to test blocksuite can run in a web worker. SEE: tests/worker.spec.ts
-
-import '@blocksuite/store';
-// import '@blocksuite/block-std'; // seems not working
-import '@blocksuite/blocks/schemas';
-
-globalThis.onmessage = event => {
-  const { data } = event;
-  if (data === 'ping') {
-    postMessage('pong');
-  }
-};

blocksuite/tests-legacy/utils/actions/misc.ts

@@ -157,6 +157,7 @@ async function initEmptyEditor({
             const outlineViewer = document.createElement(
               'custom-outline-viewer'
             );
+            const leftSidePanel = document.createElement('left-side-panel');
             // @ts-expect-error set test editor
             docsPanel.editor = editor;
             // @ts-expect-error set test editor
@@ -177,7 +178,6 @@ async function initEmptyEditor({
             debugMenu.outlineViewer = outlineViewer;
             // @ts-expect-error set test outlinePanel
             debugMenu.outlinePanel = outlinePanel;
-            const leftSidePanel = document.createElement('left-side-panel');
             // @ts-expect-error set test leftSidePanel
             debugMenu.leftSidePanel = leftSidePanel;
             document.body.append(debugMenu);

tools/utils/src/workspace.gen.ts

@@ -312,6 +312,19 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/widget-edgeless-auto-connect',
+    name: '@blocksuite/affine-widget-edgeless-auto-connect',
+    workspaceDependencies: [
+      'blocksuite/affine/block-note',
+      'blocksuite/affine/block-surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/affine/widget-frame-title',
     name: '@blocksuite/affine-widget-frame-title',
@@ -370,6 +383,7 @@ export const PackageList = [
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/affine/widget-drag-handle',
+      'blocksuite/affine/widget-edgeless-auto-connect',
       'blocksuite/affine/widget-frame-title',
       'blocksuite/affine/widget-remote-selection',
       'blocksuite/affine/widget-scroll-anchoring',
@@ -751,6 +765,7 @@ export type PackageName =
   | '@blocksuite/affine-model'
   | '@blocksuite/affine-shared'
   | '@blocksuite/affine-widget-drag-handle'
+  | '@blocksuite/affine-widget-edgeless-auto-connect'
   | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'

tsconfig.json

@@ -73,6 +73,7 @@
     { "path": "./blocksuite/affine/model" },
     { "path": "./blocksuite/affine/shared" },
     { "path": "./blocksuite/affine/widget-drag-handle" },
+    { "path": "./blocksuite/affine/widget-edgeless-auto-connect" },
     { "path": "./blocksuite/affine/widget-frame-title" },
     { "path": "./blocksuite/affine/widget-remote-selection" },
     { "path": "./blocksuite/affine/widget-scroll-anchoring" },

yarn.lock

@@ -3791,6 +3791,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-edgeless-auto-connect@workspace:*, @blocksuite/affine-widget-edgeless-auto-connect@workspace:blocksuite/affine/widget-edgeless-auto-connect":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-edgeless-auto-connect@workspace:blocksuite/affine/widget-edgeless-auto-connect"
+  dependencies:
+    "@blocksuite/affine-block-note": "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:*"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.7"
+    lit: "npm:^3.2.0"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-frame-title@workspace:*, @blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title"
@@ -3903,6 +3920,7 @@ __metadata:
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"