update

src/modules/editor/components/CompUI/basicUI/Container/component.tsx

@@ -15,16 +15,14 @@ export const Component = defineComponent({
     const { children } = useCompData(props.compId);
     return () => (
       <View compId={props.compId}>
-        <div>
-          {children.default?.map((compId) => {
-            const compItem = helper.findComp(compId) as DesignComp;
-            const Comp =
-              controls.compUICtrl.state.components.get(compItem.compKey)
-                ?.Component || CompUI.Container.Component;
+        {children.default?.map((compId) => {
+          const compItem = helper.findComp(compId) as DesignComp;
+          const Comp =
+            controls.compUICtrl.state.components.get(compItem.compKey)
+              ?.Component || CompUI.Container.Component;
 
-            return <Comp key={compItem.id} compId={compItem.id} />;
-          })}
-        </div>
+          return <Comp key={compItem.id} compId={compItem.id} />;
+        })}
       </View>
     );
   },

src/modules/editor/components/CompUI/basicUI/Container/index.ts

@@ -4,7 +4,7 @@ import { createCompHooks } from "../../defines/createCompHooks";
 export { Component } from "./component";
 
 export const options = {
-  name: "容器",
+  name: "图层",
   thumbnail: require("@/modules/editor/assets/icons/container.svg"),
 };
 

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -20,7 +20,9 @@ export default defineUI({
       currTabType: "senior",
       basicComps() {
         return Array.from(compUICtrl.state.components.values()).filter(
-          (item) => item.compType === "basic" && item.compKey !== "Page"
+          (item) =>
+            item.compType === "basic" &&
+            !["Page", "Container", "Group"].includes(item.compKey)
         );
       },
       currComps() {

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

@@ -1,5 +1,5 @@
 import { Dict_Imgs } from "@/dict";
-import { eachValuesAndPathsDeep, mapValuesDeep } from "@/utils";
+import { eachValuesAndPathsDeep } from "@/utils";
 import { PageListController } from "@queenjs/controllers";
 import { set } from "lodash";
 import { nanoid } from "nanoid";

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

@@ -1,7 +1,6 @@
 import hotkeys from "hotkeys-js";
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
-import { GroupActionCtrl } from "./GroupCtrl";
 
 type IHotKeyItem = {
   hotKey: string;
@@ -56,11 +55,8 @@ 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/objects/DesignTemp/creates/Matrix.ts → src/modules/editor/controllers/TransferCtrl/Matrix.ts

@@ -448,31 +448,3 @@ export class Matrix {
   //     this.context.setTransform(this.a, this.b, this.c, this.d, this.e, this.f);
   // }
 }
-
-//streamCard 0, 0, 750, 800
-
-// const item1 = document.createElement("div");
-// //child1.style.transform  200, 200
-
-// const item2 = document.createElement("div");
-// //child1.style.transform  300, 200
-
-// const parentDiv = document.createElement("div");
-// //child1.style.transform  200,200 widht 0
-
-// const parentMtx = new Matrix(parentDiv);
-// const parentInverMtx = parentMtx.getInverse();
-
-// //group
-// const item1Mtx = new Matrix(item1);
-// item1Mtx.multipy(parentInverMtx);
-
-// item1Mtx.appy();
-// parentDiv.append(item1);
-
-// //ungroup
-// const item1Mtx1 = new Matrix(item1);
-// const parentMtx2 = new Matrix(parentDiv);
-
-// item1Mtx1.multipy(parentMtx2);
-// item1Mtx1.appy();

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

@@ -2,7 +2,9 @@ import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
 import { EditorModule } from "../../module";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { Matrix } from "./Matrix";
 import * as transforms from "./transforms";
+import { GroupActionCtrl } from "./GroupCtrl";
 
 type TransHandle = (this: TransferCtrl, e: MouseEvent) => void;
 
@@ -20,6 +22,8 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
   currObserver?: MutationObserver;
   transforms = transforms;
 
+  groupCtrl = new GroupActionCtrl(this.module);
+
   transEvent = {
     startX: 0,
     startY: 0,
@@ -41,6 +45,8 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
   });
 
   init(pageEl: HTMLElement) {
+    this.groupCtrl.init();
+
     this.currComp = this.module.store.currComp;
     this.compEl = this.currComp.$el;
     this.pageEl = pageEl;
@@ -104,11 +110,12 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
 
   initStyle() {
     if (!this.compEl) return;
-    
+
     const rect = this.compEl.getBoundingClientRect();
     const pageRect = this.pageEl.getBoundingClientRect();
 
-    const transform = getTransform(this.compEl);
+    const matrix = new Matrix();
+    matrix.setFormDiv(this.compEl);
 
     this.transferStyle.width = this.compEl.clientWidth + "px";
     this.transferStyle.height = this.compEl.clientHeight + "px";
@@ -121,7 +128,7 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
         translateY: "-50%",
       };
     }
-    this.transferStyle.transform.rotate = transform.rotate;
+    this.transferStyle.transform.rotate = matrix.getRotate() + "deg";
     this.transferStyle.transform.translateY =
       "-" + this.compEl.clientHeight / 2 + "px";
   }
@@ -133,39 +140,8 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
   }
 
   destroy() {
+    this.groupCtrl.destroy();
     this.currObserver?.disconnect();
     this.resetStyle();
   }
 }
-
-export function getTransform(el: HTMLElement) {
-  const st = getComputedStyle(el, null);
-  const tr =
-    st.getPropertyValue("-webkit-transform") ||
-    st.getPropertyValue("-moz-transform") ||
-    st.getPropertyValue("-ms-transform") ||
-    st.getPropertyValue("-o-transform") ||
-    st.getPropertyValue("transform") ||
-    "FAIL";
-
-  // console.error("Matrix: " + tr);
-
-  if (tr == "none")
-    return {
-      rotate: "0deg",
-    };
-
-  // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
-
-  const values = tr.split("(")[1].split(")")[0].split(",");
-  // console.error("values: ", values);
-  const a: any = values[0];
-  const b: any = values[1];
-  const c: any = values[2];
-  const d: any = values[3];
-
-  const angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
-  return {
-    rotate: `${angle}deg`,
-  };
-}

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

@@ -2,7 +2,7 @@ import { cloneDeep, pick, set } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { Matrix } from "../../objects/DesignTemp/creates/Matrix";
+import { Matrix } from "../../controllers/TransferCtrl/Matrix";
 import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
@@ -209,7 +209,7 @@ export const editActions = EditorModule.action({
     set(comp, path, value);
   },
 
-  // 设置组件显示隐藏
+  // 设置组件浮动
   setCompPosition(comp: DesignComp) {
     comp.layout.position =
       comp.layout.position === "absolute" ? undefined : "absolute";

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -7,9 +7,9 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   const style: any = {};
   const transform: any = {};
 
-  if (layout.alignSelf) {
-    style.alignSelf = layout.alignSelf;
-  }
+  // if (layout.alignSelf) {
+  //   style.alignSelf = layout.alignSelf;
+  // }
   if (layout.visible === false) {
     style.display = "none";
   }
@@ -18,8 +18,12 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
     style["zIndex"] = layout.zIndex;
   }
 
-  if (layout.margin) {
-    style.margin = layout.margin;
+  // if (layout.margin) {
+  //   style.margin = layout.margin;
+  // }
+
+  if (layout.padding) {
+    style.padding = layout.padding;
   }
 
   if (layout.mask) {
@@ -41,10 +45,6 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
     }
   }
 
-  if (layout.padding) {
-    style.padding = layout.padding;
-  }
-
   if (layout.size) {
     const [w, h] = layout.size;
     if (w) style.width = designToNaturalSize(w);

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

@@ -3,7 +3,7 @@ import { ICompToolbars, toolbars } from "./default";
 export const CompToolbars: ICompToolbars = {
   default: [
     toolbars.parentComp,
-    toolbars.position,
+    // toolbars.position,
     toolbars.layerUp,
     toolbars.layerDown,
     toolbars.clearTransform,