fix: drag connector and group element (#10385)

blocksuite/affine/widget-drag-handle/src/middleware/blocks-filter.ts

@@ -1,6 +1,16 @@
 import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
+import type { ConnectorElementModel } from '@blocksuite/affine-model';
 import type { BlockStdScope } from '@blocksuite/block-std';
-import { isGfxGroupCompatibleModel } from '@blocksuite/block-std/gfx';
+import {
+  GfxController,
+  type GfxModel,
+  isGfxGroupCompatibleModel,
+} from '@blocksuite/block-std/gfx';
+import {
+  assertType,
+  type IVec,
+  type SerializedXYWH,
+} from '@blocksuite/global/utils';
 import type { TransformerMiddleware } from '@blocksuite/store';
 
 /**
@@ -18,6 +28,7 @@ export const gfxBlocksFilter = (
   const surface = store.getBlocksByFlavour('affine:surface')[0]
     .model as SurfaceBlockModel;
   const idsToCheck = ids.slice();
+  const gfx = std.get(GfxController);
 
   for (const id of idsToCheck) {
     const blockOrElem = store.getBlock(id)?.model ?? surface.getElementById(id);
@@ -45,5 +56,62 @@ export const gfxBlocksFilter = (
         return;
       }
     });
+
+    slots.afterExport.on(payload => {
+      if (payload.type !== 'block') {
+        return;
+      }
+
+      if (payload.model.flavour === 'affine:surface') {
+        const { snapshot } = payload;
+        const elementsMap = snapshot.props.elements as Record<
+          string,
+          { type: string }
+        >;
+
+        Object.entries(elementsMap).forEach(([elementId, val]) => {
+          if (val.type === 'connector') {
+            assertType<{
+              type: 'connector';
+              source: { position: IVec; id?: string };
+              target: { position: IVec; id?: string };
+              xywh: SerializedXYWH;
+            }>(val);
+
+            const connectorElem = gfx.getElementById(
+              elementId
+            ) as ConnectorElementModel;
+
+            if (!connectorElem) {
+              delete elementsMap[elementId];
+              return;
+            }
+
+            // should be deleted during the import process
+            val.xywh = connectorElem.xywh;
+
+            ['source', 'target'].forEach(key => {
+              const endpoint = val[key as 'source' | 'target'];
+              if (endpoint.id && !selectedIds.has(endpoint.id)) {
+                const endElem = gfx.getElementById(endpoint.id);
+
+                if (!endElem) {
+                  delete elementsMap[elementId];
+                  return;
+                }
+
+                const endElemBound = (endElem as GfxModel).elementBound;
+
+                val[key as 'source' | 'target'] = {
+                  position: endElemBound.getRelativePoint(
+                    endpoint.position ?? [0.5, 0.5]
+                  ),
+                };
+              }
+            });
+          }
+        });
+      }
+    });
   };
 };