From 2fdfdedd7b8a8ebb4c7c6b805865a79427f87c46 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Mon, 15 Aug 2022 23:11:58 +0800
Subject: [PATCH] fix:while bord group error (#258)

* fix:while bord group error

* fix:while bord group error

* fix lint
---
 .../board-commands/src/group-shapes.ts        |  2 +-
 .../command-panel/GroupOperation.tsx          | 39 +++++++++++++++++--
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/libs/components/board-commands/src/group-shapes.ts b/libs/components/board-commands/src/group-shapes.ts
index 9ea825313a..0e07e736fa 100644
--- a/libs/components/board-commands/src/group-shapes.ts
+++ b/libs/components/board-commands/src/group-shapes.ts
@@ -100,6 +100,7 @@ export function groupShapes(
 
     afterShapes[groupId] = TLDR.get_shape_util(TDShapeType.Group).create({
         id: groupId,
+        affineId: groupId,
         childIndex: groupChildIndex,
         parentId: groupParentId,
         point: [groupBounds.minX, groupBounds.minY],
@@ -217,7 +218,6 @@ export function groupShapes(
             }
         }
     });
-
     return {
         id: 'group',
         before: {
diff --git a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
index ec9e00e168..47aaaefa95 100644
--- a/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
+++ b/libs/components/board-draw/src/components/command-panel/GroupOperation.tsx
@@ -1,7 +1,8 @@
-import type { TldrawApp } from '@toeverything/components/board-state';
-import type { TDShape } from '@toeverything/components/board-types';
+import { TLDR, TldrawApp } from '@toeverything/components/board-state';
+import { TDShape, TDShapeType } from '@toeverything/components/board-types';
 import { GroupIcon, UngroupIcon } from '@toeverything/components/icons';
 import { IconButton, Tooltip } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
 import { getShapeIds } from './utils';
 
 interface GroupAndUnGroupProps {
@@ -10,8 +11,38 @@ interface GroupAndUnGroupProps {
 }
 
 export const Group = ({ app, shapes }: GroupAndUnGroupProps) => {
-    const group = () => {
-        app.group(getShapeIds(shapes));
+    const group = async () => {
+        let groupShape = await services.api.editorBlock.create({
+            workspace: app.document.id,
+            parentId: app.appState.currentPageId,
+            type: 'shape',
+        });
+        await services.api.editorBlock.update({
+            workspace: groupShape.workspace,
+            id: groupShape.id,
+            properties: {
+                shapeProps: {
+                    value: JSON.stringify(
+                        TLDR.get_shape_util(TDShapeType.Group).create({
+                            id: groupShape.id,
+                            affineId: groupShape.id,
+                            childIndex: 1,
+                            parentId: app.appState.currentPageId,
+                            point: [0, 0],
+                            size: [0, 0],
+                            children: getShapeIds(shapes),
+                            workspace: app.document.id,
+                        })
+                    ),
+                },
+            },
+        });
+
+        app.group(
+            getShapeIds(shapes),
+            groupShape.id,
+            app.appState.currentPageId
+        );
     };
     return (
         <Tooltip content="Group">