Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/controllers/HotKeyCtrl/GroupCtrl.ts

@@ -0,0 +1,23 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+
+export class GroupActionCtrl extends ModuleControl<EditorModule> {
+  init() {
+    document.body.addEventListener("keydown", this.enableGroupMode);
+  }
+  enableGroupMode = (event: KeyboardEvent) => {
+    if (event.key === "Control") {
+      this.store.setGroupMode(true);
+      document.body.addEventListener("keyup", this.disableGroupMode);
+    }
+  };
+  disableGroupMode = (event: KeyboardEvent) => {
+    if (event.key === "Control") {
+      this.store.setGroupMode(false);
+      document.body.removeEventListener("keyup", this.disableGroupMode);
+    }
+  };
+  destroy() {
+    document.body.removeEventListener("keydown", this.enableGroupMode);
+  }
+}

src/modules/editor/controllers/HotKeyCtrl/index.ts

@@ -1,6 +1,7 @@
 import hotkeys from "hotkeys-js";
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
+import { GroupActionCtrl } from "./GroupCtrl";
 
 type IHotKeyItem = {
   hotKey: string;
@@ -55,8 +56,11 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
     },
   ]);
 
+  groupActionCtrl = new GroupActionCtrl(this.module);
+
   init() {
     const { module, hotKeys } = this;
+    this.groupActionCtrl.init();
 
     hotkeys(
       hotKeys.map((d) => d.hotKey).join(","),

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

@@ -7,9 +7,9 @@ import { ICompKeys, Layout } from "../../typings";
 export const editActions = EditorModule.action({
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
- 
-    if (!this.store.currStreamCardId) {//必须选中一个streamCard
-      return
+    if (!this.store.currStreamCardId) {
+      //必须选中一个streamCard
+      return;
     }
 
     if (compKey == "Container") {
@@ -25,12 +25,12 @@ export const editActions = EditorModule.action({
     //   // this.store.pageCompIds.includes(this.store.currComp.id)
     // ) {
 
-      const compId = await this.store.insertCompContainer(
-        compKey,
-        this.store.currStreamCard
-      );
-      this.actions.pickComp(compId);
-      this.actions.setCompPosition(this.store.currComp);
+    const compId = await this.store.insertCompContainer(
+      compKey,
+      this.store.currStreamCard
+    );
+    this.actions.pickComp(compId);
+    this.actions.setCompPosition(this.store.currComp);
     // } else {
     //   compId = await this.store.insertDesignContent(compKey, index);
     //   this.actions.pickComp(compId);
@@ -38,6 +38,10 @@ export const editActions = EditorModule.action({
   },
   // 切换当前组件
   pickComp(compId: string) {
+    if (this.store.groupModeStatus) {
+      this.store.groupIds.push(compId);
+      return;
+    }
     // let nextCompId = compId;
     // if (this.store.isEditPage) {
     //   const comps = this.helper.getCompTrees(compId);
@@ -107,7 +111,7 @@ export const editActions = EditorModule.action({
           comp.compKey
         )?.name,
       });
-  
+
       const data = {
         title,
         thumbnail,

src/modules/editor/module/stores/index.ts

@@ -10,6 +10,9 @@ export const store = EditorModule.store({
     currCompId: "root",
     currStreamCardId: "",
     designData: new DesignTemp(),
+
+    groupModeStatus: false,
+    groupIds: [] as string[],
   }),
   getters: {
     isEditMode(): boolean {
@@ -24,7 +27,7 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
-   
+
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },
@@ -34,9 +37,9 @@ export const store = EditorModule.store({
     pageCompIds(state): string[] {
       return state.designData.compMap.root?.children.default || [];
     },
-    streamCardIds(state):string[] {
+    streamCardIds(state): string[] {
       return state.designData.compMap.root?.children.default || [];
-    }
+    },
   },
   actions: {
     setCompData(id: string, data: any) {
@@ -45,6 +48,13 @@ export const store = EditorModule.store({
     setMode(v: EditorMode) {
       this.store.mode = v;
     },
+    setGroupMode(status: boolean) {
+      this.store.groupModeStatus = status;
+      this.store.groupIds = [];
+      if (this.store.currCompId) {
+        this.store.groupIds.push(this.store.currCompId);
+      }
+    },
     initDesignData(data: Partial<DesignTemp>) {
       this.store.designData = new DesignTemp(data);
     },
@@ -68,44 +78,42 @@ export const store = EditorModule.store({
       return compId;
     },
     setCurrComp(compId: string) {
-      
-
       this.store.currStreamCardId = "";
       this.store.currCompId = compId;
 
-      const find = (objs:string[], id:string):boolean=>{
-        if (!objs || objs.length < 1) return false
+      const find = (objs: string[], id: string): boolean => {
+        if (!objs || objs.length < 1) return false;
 
         if (objs.includes(id)) return true;
-        
+
         let n = objs.length;
         let f = false;
-        while(n--) {
-          f = find(this.store.designData.compMap[objs[n]].children.default as any, id)
+        while (n--) {
+          f = find(
+            this.store.designData.compMap[objs[n]].children.default as any,
+            id
+          );
           if (f) {
-            break
+            break;
           }
         }
         return f;
-      }
-      const ids = this.store.streamCardIds
-      if (ids.indexOf(compId) > - 1) {
+      };
+      const ids = this.store.streamCardIds;
+      if (ids.indexOf(compId) > -1) {
         this.store.currStreamCardId = compId;
       }
       let i = ids.length;
-      while(i--) {
-        const isFind = find(this.store.designData.compMap[ids[i]].children.default as any, compId)
+      while (i--) {
+        const isFind = find(
+          this.store.designData.compMap[ids[i]].children.default as any,
+          compId
+        );
         if (isFind) {
           this.store.currStreamCardId = ids[i];
           break;
         }
       }
-
-      // if (this.store.currStreamCardId != compId) {
-        
-      // }
-
-      console.log("streamCard=>", this.store.currStreamCardId, "compId=>", this.store.currCompId)
     },
 
     deleteComp(compId: string) {
@@ -136,10 +144,6 @@ export const store = EditorModule.store({
       const { pageCompIds } = this.store;
       const [selComp] = pageCompIds.splice(selIndex, 1);
       pageCompIds.splice(targetIndex, 0, selComp);
-      
-      // const currStreamCardId = this.store.currStreamCardId;
-      // this.store.setCurrComp("")
-      // this.store.currStreamCardId = currStreamCardId;
     },
     setTextEditingState(state: boolean) {
       this.store.textEditingState = state;