fix: connector should remain the same when its target or source switch to other

shape type (#11369)

Fixes [BS-1431](https://linear.app/affine-design/issue/BS-1431/改变-shape-形状后，connector-丢失)

tests/blocksuite/e2e/edgeless/connector/connector.spec.ts

@@ -9,12 +9,17 @@ import {
   createShapeElement,
   dragBetweenViewCoords,
   edgelessCommonSetup as commonSetup,
+  getConnectorPath,
+  getConnectorPathWithInOut,
   pickColorAtPoints,
   rotateElementByHandle,
+  selectElementInEdgeless,
+  setEdgelessTool,
   Shape,
   toModelCoord,
   toViewCoord,
   triggerComponentToolbarAction,
+  triggerShapeSwitch,
 } from '../../utils/actions/edgeless.js';
 import { pressBackspace, waitNextFrame } from '../../utils/actions/index.js';
 import {
@@ -320,4 +325,56 @@ test.describe('quick connect', () => {
     await page.mouse.move(...point);
     await assertConnectorPath(page, [[50, 100], endpoint]);
   });
+
+  test('the triangle connectors should remain the same when switch to other shape', async ({
+    page,
+  }) => {
+    await commonSetup(page);
+
+    const shape1Id = await createShapeElement(
+      page,
+      [0, 0],
+      [100, 100],
+      Shape.Triangle
+    );
+    const shape2Id = await createShapeElement(
+      page,
+      [200, 0],
+      [300, 100],
+      Shape.Triangle
+    );
+
+    await setEdgelessTool(page, 'connector');
+    await dragBetweenViewCoords(page, [60, 50], [240, 50]);
+
+    {
+      const path = await getConnectorPath(page);
+      // make sure the connector is created
+      expect(path.length).toBeGreaterThan(0);
+    }
+
+    // switch to other shape
+
+    await selectElementInEdgeless(page, [shape1Id]);
+    await triggerShapeSwitch(page, 'Square');
+
+    await selectElementInEdgeless(page, [shape2Id]);
+    await triggerShapeSwitch(page, 'Square');
+
+    await dragBetweenViewCoords(page, [50, 50], [0, 0]);
+
+    await dragBetweenViewCoords(page, [250, 50], [300, 50]);
+
+    {
+      const path = await getConnectorPathWithInOut(page);
+      expect(path.length).toBeGreaterThan(0);
+      path.forEach(point => {
+        [0, 1].forEach(i => {
+          expect(point.in[i]).not.toBeNaN();
+          expect(point.out[i]).not.toBeNaN();
+          expect(point.point[i]).not.toBeNaN();
+        });
+      });
+    }
+  });
 });

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -1082,6 +1082,19 @@ type Action =
   | 'autoArrange'
   | 'autoResize';
 
+export async function triggerShapeSwitch(
+  page: Page,
+  type: 'Square' | 'Ellipse' | 'Diamond' | 'Triangle' | 'Rounded rectangle'
+) {
+  const button = locatorComponentToolbar(page)
+    .getByLabel('Switch shape type')
+    .first();
+  await button.click();
+
+  const shapeButton = locatorComponentToolbar(page).getByLabel(type);
+  await shapeButton.click();
+}
+
 export async function triggerComponentToolbarAction(
   page: Page,
   action: Action
@@ -1598,6 +1611,31 @@ export async function getConnectorPath(page: Page, index = 0): Promise<IVec[]> {
   );
 }
 
+export async function getConnectorPathWithInOut(
+  page: Page,
+  index = 0
+): Promise<
+  {
+    point: IVec;
+    in: IVec;
+    out: IVec;
+  }[]
+> {
+  return page.evaluate(
+    ([index]) => {
+      const container = document.querySelector('affine-edgeless-root');
+      if (!container) throw new Error('container not found');
+      const connectors = container.service.crud.getElementsByType('connector');
+      return connectors[index].absolutePath.map(path => ({
+        point: [path[0], path[1]],
+        in: path.in,
+        out: path.out,
+      }));
+    },
+    [index]
+  );
+}
+
 export async function getEdgelessElementBound(
   page: Page,
   elementId: string