fix(edgeless): selection when all elements are connectors

packages/blocks/src/root-block/edgeless/components/component-toolbar/component-toolbar.ts

@@ -500,7 +500,7 @@ export class EdgelessComponentToolbar extends WithDisposable(LitElement) {
           this._ImageButton(image),
         ].filter(b => !!b && b !== nothing);
 
-    if (elements.length > 1) {
+    if (elements.length > 1 && elements.length !== connector?.length) {
       buttons.unshift(this._Divider());
       buttons.unshift(this._AlignButton());
       buttons.unshift(this._Divider());

packages/blocks/src/root-block/edgeless/components/connector/connector-handle.ts

@@ -23,11 +23,11 @@ export class EdgelessConnectorHandle extends WithDisposable(LitElement) {
       z-index: 10;
       pointer-events: all;
       /**
-             * Fix: pointerEvent stops firing after a short time.
-             * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
-             * up to the one that implements the gesture (in other words, the first containing scrolling element)
-             * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
-             */
+       * Fix: pointerEvent stops firing after a short time.
+       * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
+       * up to the one that implements the gesture (in other words, the first containing scrolling element)
+       * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+       */
       touch-action: none;
     }
     .line-controller-hidden {
@@ -107,12 +107,10 @@ export class EdgelessConnectorHandle extends WithDisposable(LitElement) {
     const { path } = this.connector;
     const zoom = service.viewport.zoom;
     const start = {
-      position: 'absolute',
       left: `${path[0][0] * zoom}px`,
       top: `${path[0][1] * zoom}px`,
     };
     const end = {
-      position: 'absolute',
       left: `${path[path.length - 1][0] * zoom}px`,
       top: `${path[path.length - 1][1] * zoom}px`,
     };

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

@@ -421,11 +421,11 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
   private _selectedRect: SelectedRect = {
     width: 0,
     height: 0,
-    borderWidth: 0,
-    borderStyle: 'solid',
     left: 0,
     top: 0,
     rotate: 0,
+    borderWidth: 0,
+    borderStyle: 'solid',
   };
 
   @state()
@@ -502,6 +502,7 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     const elements = this.selection.elements;
 
     let areAllConnectors = true;
+    let areAllIndependentConnectors = elements.length > 1;
     let areAllShapes = true;
     let areAllTexts = true;
 
@@ -522,8 +523,14 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
         areAllTexts = false;
       } else {
         assertType<ElementModel>(element);
-        if (element.type !== CanvasElementType.CONNECTOR)
+        if (element.type === CanvasElementType.CONNECTOR) {
+          const connector = element as ConnectorElementModel;
+          areAllIndependentConnectors &&= !(
+            connector.source.id || connector.target.id
+          );
+        } else {
           areAllConnectors = false;
+        }
         if (
           element.type !== CanvasElementType.SHAPE &&
           element.type !== CanvasElementType.GROUP
@@ -533,7 +540,14 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
       }
     }
 
-    if (areAllConnectors) return 'none';
+    if (areAllConnectors) {
+      if (areAllIndependentConnectors) {
+        return 'all';
+      } else {
+        return 'none';
+      }
+    }
+
     if (areAllShapes) return 'all';
     if (areAllTexts) return 'edgeAndCorner';
 
@@ -901,13 +915,13 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
     }
 
     this._selectedRect = {
-      width: width,
-      height: height,
-      borderWidth: selection.editing ? 2 : 1,
-      borderStyle: 'solid',
+      width,
+      height,
       left,
       top,
       rotate,
+      borderStyle: 'solid',
+      borderWidth: selection.editing ? 2 : 1,
     };
   }, this);
 
@@ -1113,7 +1127,8 @@ export class EdgelessSelectedRect extends WithDisposable(LitElement) {
         : nothing;
 
     const elementHandle =
-      elements.length > 1
+      elements.length > 1 &&
+      !elements.reduce((p, e) => p && e instanceof ConnectorElementModel, true)
         ? elements.map(element => {
             const [modelX, modelY, w, h] = deserializeXYWH(element.xywh);
             const [x, y] = edgeless.service.viewport.toViewCoord(

packages/blocks/src/root-block/edgeless/edgeless-root-service.ts

@@ -265,6 +265,7 @@ export class EdgelessRootService extends RootService {
 
     const block = this.doc.getBlockById(id);
     if (block) {
+      const block = this.doc.getBlockById(id)!;
       this.editSession.record(block.flavour as EdgelessElementType, props);
       this.doc.updateBlock(block, props);
     }

tests/edgeless/selection.spec.ts

@@ -4,12 +4,17 @@ import * as actions from '../utils/actions/edgeless.js';
 import {
   getNoteBoundBoxInEdgeless,
   setEdgelessTool,
+  Shape,
   switchEditorMode,
+  toModelCoord,
 } from '../utils/actions/edgeless.js';
 import {
   addBasicBrushElement,
+  addBasicConnectorElement,
   addBasicRectShapeElement,
   clickInCenter,
+  createConnectorElement,
+  createShapeElement,
   dragBetweenCoords,
   enterPlaygroundRoom,
   getBoundingRect,
@@ -633,3 +638,81 @@ test('copilot selection rect should appears when drag with meta key pressed', as
   await page.mouse.click(205, 150);
   await expect(page.locator('.copilot-selection-rect')).toBeHidden();
 });
+
+test.describe('select multiple connectors', () => {
+  test('should show single selection rect', async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await switchEditorMode(page);
+    await actions.zoomResetByKeyboard(page);
+
+    await addBasicConnectorElement(
+      page,
+      { x: 100, y: 200 },
+      { x: 300, y: 200 }
+    );
+    await addBasicConnectorElement(
+      page,
+      { x: 100, y: 230 },
+      { x: 300, y: 230 }
+    );
+    await addBasicConnectorElement(
+      page,
+      { x: 100, y: 260 },
+      { x: 300, y: 260 }
+    );
+
+    await dragBetweenCoords(page, { x: 50, y: 50 }, { x: 400, y: 290 });
+    await waitNextFrame(page);
+
+    expect(
+      await page
+        .locator('.affine-edgeless-selected-rect')
+        .locator('.element-handle')
+        .count()
+    ).toBe(0);
+  });
+
+  test('should disable resize when a connector is already connected', async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await switchEditorMode(page);
+    await actions.zoomResetByKeyboard(page);
+
+    const start = await toModelCoord(page, [100, 0]);
+    const end = await toModelCoord(page, [200, 100]);
+    await createShapeElement(page, start, end, Shape.Diamond);
+    const c1 = await toModelCoord(page, [200, 50]);
+    const c2 = await toModelCoord(page, [450, 50]);
+    await createConnectorElement(page, c1, c2);
+
+    await addBasicConnectorElement(
+      page,
+      { x: 250, y: 200 },
+      { x: 450, y: 200 }
+    );
+    await addBasicConnectorElement(
+      page,
+      { x: 250, y: 230 },
+      { x: 450, y: 230 }
+    );
+    await addBasicConnectorElement(
+      page,
+      { x: 250, y: 260 },
+      { x: 450, y: 260 }
+    );
+
+    await dragBetweenCoords(page, { x: 500, y: 20 }, { x: 400, y: 290 });
+    await waitNextFrame(page);
+
+    const selectedRectLocalor = page.locator('.affine-edgeless-selected-rect');
+    expect(await selectedRectLocalor.locator('.element-handle').count()).toBe(
+      0
+    );
+    expect(
+      await selectedRectLocalor.locator('.handle').locator('.resize').count()
+    ).toBe(0);
+  });
+});