feat(edgeless): new way to add connectors (#5161)

Co-authored-by: regischen <regischen@toeverything.info>

packages/blocks/src/_common/icons/edgeless.ts

@@ -1018,6 +1018,20 @@ export const NoteIcon = html`<svg
   />
 </svg>`;
 
+export const SmallNoteIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="currentColor"
+    d="M5.83329 2.70837C4.56764 2.70837 3.54163 3.73439 3.54163 5.00004V15C3.54163 16.2657 4.56764 17.2917 5.83329 17.2917H14.1666C15.4323 17.2917 16.4583 16.2657 16.4583 15V5.00004C16.4583 3.73439 15.4323 2.70837 14.1666 2.70837H5.83329ZM4.79163 5.00004C4.79163 4.42474 5.258 3.95837 5.83329 3.95837H14.1666C14.7419 3.95837 15.2083 4.42474 15.2083 5.00004V15C15.2083 15.5753 14.7419 16.0417 14.1666 16.0417H5.83329C5.258 16.0417 4.79163 15.5753 4.79163 15V5.00004ZM7.49996 6.04171C7.15478 6.04171 6.87496 6.32153 6.87496 6.66671C6.87496 7.01189 7.15478 7.29171 7.49996 7.29171H10.4166C10.7618 7.29171 11.0416 7.01189 11.0416 6.66671C11.0416 6.32153 10.7618 6.04171 10.4166 6.04171H7.49996ZM6.87496 9.58337C6.87496 9.2382 7.15478 8.95837 7.49996 8.95837H12.5C12.8451 8.95837 13.125 9.2382 13.125 9.58337C13.125 9.92855 12.8451 10.2084 12.5 10.2084H7.49996C7.15478 10.2084 6.87496 9.92855 6.87496 9.58337ZM7.49996 11.875C7.15478 11.875 6.87496 12.1549 6.87496 12.5C6.87496 12.8452 7.15478 13.125 7.49996 13.125H11.6666C12.0118 13.125 12.2916 12.8452 12.2916 12.5C12.2916 12.1549 12.0118 11.875 11.6666 11.875H7.49996Z"
+  />
+</svg>`;
+
 export const FrameIcon = html`
   <svg
     width="20"

packages/blocks/src/_common/utils/types.ts

@@ -138,7 +138,7 @@ export type Selectable = EdgelessElement;
 export type Erasable = EdgelessElement;
 
 export type Connectable =
-  | Exclude<TopLevelBlockModel, FrameBlockModel>
+  | TopLevelBlockModel
   | Exclude<PhasorElement, ConnectorElement | BrushElement>;
 
 export type DefaultTool = {

packages/blocks/src/frame-block/frame-model.ts

@@ -9,6 +9,7 @@ import type {
   HitTestOptions,
   IEdgelessElement,
 } from '../surface-block/elements/edgeless-element.js';
+import { EdgelessSelectableMixin } from '../surface-block/elements/selectable.js';
 import {
   Bound,
   type IVec,
@@ -44,14 +45,15 @@ type Props = {
   index: string;
 };
 
+@EdgelessSelectableMixin
 export class FrameBlockModel
   extends BaseBlockModel<Props>
   implements IEdgelessElement
 {
   override flavour!: EdgelessBlockType.FRAME;
 
   get connectable() {
-    return false;
+    return true;
   }
 
   get batch() {
@@ -79,16 +81,18 @@ export class FrameBlockModel
       Bound.deserialize(this.xywh).points
     );
   }
-  getRelativePointLocation(_: IVec): PointLocation {
-    throw new Error('Function not implemented.');
-  }
+  getRelativePointLocation!: (_: IVec) => PointLocation;
   hitTest(
     x: number,
     y: number,
     _: HitTestOptions,
-    surface: SurfaceBlockComponent
+    surface?: SurfaceBlockComponent
   ): boolean {
-    const block = surface.parentBlockElement.querySelector(
+    const bound = Bound.deserialize(this.xywh);
+    const hit = bound.isPointOnBound([x, y]);
+    if (hit) return true;
+
+    const block = surface?.parentBlockElement.querySelector(
       `[${BLOCK_ID_ATTR}="${this.id}"]`
     ) as FrameBlockComponent;
     if (!block) return false;