update icons

src/assets/icons/components/IconGroup.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconGroup = createIcon(<svg viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>)
+export const IconGroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>)

src/assets/icons/components/IconUngroup.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconUngroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -35,5 +35,6 @@ export * from "./components/IconShape";
 export * from "./components/IconText";
 export * from "./components/IconTpl";
 export * from "./components/IconTransfer";
+export * from "./components/IconUngroup";
 export * from "./components/IconVideo";
 export * from "./components/IconWechat";

src/assets/icons/svg/group.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>

src/assets/icons/svg/ungroup.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>

src/modules/editor/components/TipIcons/index.ts

@@ -13,10 +13,11 @@ import {
   IconRight,
   IconAi,
   IconSave,
+  IconUngroup,
+  IconGroup,
 } from "@/assets/icons";
 import {
   IconCamera,
-  IconClose,
   IconCube,
   IconDelete,
   IconEyeOff,
@@ -94,9 +95,13 @@ export const TipIcons = {
     tips: ["保存为组件"],
   }),
   CancelGroup: createTipIcon({
-    icons: [IconClose],
+    icons: [IconUngroup],
     tips: ["取消打组"],
   }),
+  CreateGroup: createTipIcon({
+    icons: [IconGroup],
+    tips: ["打组"],
+  }),
   Cross: createTipIcon({
     icons: [IconCross],
     tips: ["取消"],

src/modules/editor/module/actions/edit.tsx

@@ -540,8 +540,20 @@ export const editActions = EditorModule.action({
   },
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
-    this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
-    this.store.setCurrComp(groupComp.children.default?.[0] as string);
+    console.log("cancel group");
+    // const childs = groupComp.children.default;
+    // const objC = this.controls.selectCtrl.objContainer as ObjsContainer;
+
+    // objC.parent.children.forEach(o=>{
+    //   const obj = o as CompObject;
+    //   obj.comp.layout.transformMatrix = o.worldTransform.getMatrixStr();
+    // })
+
+    // this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
+
+    // this.store.setCurrComp(groupComp.children.default?.[0] as string);
+
+
   },
 
   createGroupComps() {

src/modules/editor/objects/Toolbars/CompToolbars.ts

@@ -19,5 +19,6 @@ export const CompToolbars: ICompToolbars = {
   MultiSelector: [
     multiSelToolbar.delete,
     toolbars.createGroup,
+    toolbars.cancelGroup,
   ],
 };

src/modules/editor/objects/Toolbars/default.ts

@@ -193,13 +193,17 @@ export const toolbars = createToolbars({
   // 取消打组
   cancelGroup: {
     component: TipIcons.CancelGroup,
+    getVisible(comp) {
+      return comp.compKey == "Group" && this.store.selected.length == 1;
+    },
+    
     onClick(comp) {
       this.actions.cancelGroupComps(comp);
     },
   },
    // 打组
    createGroup: {
-    component: TipIcons.CancelGroup,
+    component: TipIcons.CreateGroup,
     getVisible() {
       return this.store.selected.length > 1;
     },