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

src/hooks/initAuthDef.ts

@@ -9,7 +9,7 @@ export function initAuthDef() {
       },
       key: "queentreesku3d",
       loginPath: "/login",
-      loginJumpPath: "/workbench",
+      loginJumpPath: "/",
       logoutJumpPath: "/login",
 
       needCompanyLogin: false,

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -1,14 +1,13 @@
+import { IconRotate } from "@/assets/icons";
 import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, onUnmounted } from "vue";
 import { useEditor } from "../../../..";
-import { IconMove, IconRotate } from "@/assets/icons";
-import { parseTransform } from "@/modules/editor/objects/DesignTemp/creates/createCompStyle";
 
 export const Transfer = defineComponent({
   setup() {
     const editor = useEditor();
-    const { store, controls, helper } = editor;
+    const { controls, helper } = editor;
     const { transferCtrl } = controls;
     const { transferStyle } = transferCtrl;
 
@@ -23,7 +22,7 @@ export const Transfer = defineComponent({
 
     onUnmounted(() => {
       transferCtrl.destroy();
-      console.log("transferCtrl.destroy========================")
+      // console.log("transferCtrl.destroy========================");
     });
 
     return () => {
@@ -34,74 +33,84 @@ export const Transfer = defineComponent({
       // const showTransfer =
       //   store.isEditComp || store.pageCompIds.includes(comp.id);
       const showTransfer = true;
-      const styleTransform = parseTransform(transferStyle.transform);
 
       return (
         transferStyle.width && (
           <div
-            class="transfer absolute"
+            class="absolute transfer"
             style={{
               top: transferStyle.top,
               left: transferStyle.left,
               width: transferStyle.width,
-              transform: styleTransform,
-              transformOrigin: "left",
+              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
             }}
           >
+            {showTransfer && (
+              <div class={toolbarStyle}>
+                {toolbarOpts.map((item) => {
+                  return item.getVisible.call(editor, comp) ? (
+                    <item.component
+                      class="p-4px"
+                      value={item.getValue?.(comp)}
+                      onClick={() => item.onClick.call(editor, comp)}
+                    />
+                  ) : null;
+                })}
+              </div>
+            )}
             <div
-              class={borderStyle}
               style={{
-                width: transferStyle.width,
-                height: transferStyle.height,
+                transform: `rotate(${transferStyle.transform.rotate})`,
+                transformOrigin: `center ${
+                  parseInt(transferStyle.height.split("px")[0]) / 2
+                }px`,
               }}
-            />
+            >
+              <div
+                class={borderStyle}
+                style={{
+                  width: transferStyle.width,
+                  height: transferStyle.height,
+                }}
+              />
+
+              {showTransfer && (
+                <>
+                  <div
+                    class={resizeStyle}
+                    style={{ marginBottom: "-" + transferStyle.height }}
+                    onMousedown={(e) =>
+                      transferCtrl.mousedown(
+                        e,
+                        comp.compKey === "Image" ? "resizeXY" : "scale"
+                      )
+                    }
+                  />
 
-            {showTransfer && (
-              <>
-                <div
-                  class={resizeStyle}
-                  style={{ marginBottom: "-" + transferStyle.height }}
-                  onMousedown={(e) =>
-                    transferCtrl.mousedown(
-                      e,
-                      comp.compKey === "Image" ? "resizeXY" : "scale"
-                    )
-                  }
-                />
-                <div class={toolbarStyle}>
-                  {toolbarOpts.map((item) => {
-                    return item.getVisible.call(editor, comp) ? (
-                      <item.component
-                        class="p-4px"
-                        value={item.getValue?.(comp)}
-                        onClick={() => item.onClick.call(editor, comp)}
-                      />
-                    ) : null;
-                  })}
-                </div>
-                <div
-                  class={transformBtnsStyle}
-                  style={{ marginBottom: "-" + transferStyle.height }}
-                >
                   <div
-                    class={transBtnStyle}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
+                    class={transformBtnsStyle}
+                    style={{ marginBottom: "-" + transferStyle.height }}
                   >
-                    <IconRotate />
+                    <div
+                      class={transBtnStyle}
+                      onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
+                    >
+                      <IconRotate />
+                    </div>
                   </div>
-                </div>
-                <div
-                  class={resizeHeightBtnCls}
-                  style={{ top: transferStyle.height }}
-                  onMousedown={(e) => transferCtrl.mousedown(e, "resizeY")}
-                />
-                <div
-                  class={resizeWidthBtnCls}
-                  style={{ top: parseInt(transferStyle.height) / 2 + "px" }}
-                  onMousedown={(e) => transferCtrl.mousedown(e, "resizeX")}
-                />
-              </>
-            )}
+                  <div
+                    class={resizeHeightBtnCls}
+                    style={{ top: transferStyle.height }}
+                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeY")}
+                  />
+                  <div
+                    class={resizeWidthBtnCls}
+                    style={{ top: parseInt(transferStyle.height) / 2 + "px" }}
+                    onMousedown={(e) => transferCtrl.mousedown(e, "resizeX")}
+                  />
+                </>
+              )}
+            </div>
           </div>
         )
       );
@@ -170,7 +179,7 @@ const toolbarStyle = css`
   position: absolute;
   top: 0;
   left: 50%;
-  transform: translate(-50%, -40px);
+  transform: translate(-50%, -60px);
   z-index: 999;
 `;
 

src/modules/editor/components/CompUI/basicUI/Transfer/streamCard.tsx

@@ -1,9 +1,8 @@
+import { IconResizeY } from "@/assets/icons";
+import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, onUnmounted } from "vue";
 import { useEditor } from "../../../..";
-import { IconMove, IconClear, IconAdd, IconResizeY } from "@/assets/icons";
-import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
-import { parseTransform } from "@/modules/editor/objects/DesignTemp/creates/createCompStyle";
 
 export const StreamCardTransfer = defineComponent({
   setup() {
@@ -28,8 +27,6 @@ export const StreamCardTransfer = defineComponent({
     return () => {
       const transferStyle = streamCardTransferCtrl.transferStyle;
 
-      const styleTransform = parseTransform(transferStyle.transform);
-
       return (
         transferStyle.width && (
           <div
@@ -38,7 +35,7 @@ export const StreamCardTransfer = defineComponent({
               top: transferStyle.top,
               left: transferStyle.left,
               width: transferStyle.width,
-              transform: styleTransform,
+              transform: `translateX(${transferStyle.transform.translateX}) translateY(${transferStyle.transform.translateY})`,
             }}
           >
             <div

src/modules/editor/components/CompUI/customUI/Texts/Text1/component.tsx

@@ -42,7 +42,7 @@ export const Component = createUIComp({
               compId={d.label}
               class={
                 value.showBackground
-                  ? "text relative z-1 py-0.08rem px-0.1rem text-white"
+                  ? "text relative z-0 py-0.08rem px-0.1rem text-white"
                   : "text-secondary"
               }
               style={{

src/modules/editor/components/Viewport/Content/index.tsx

@@ -88,14 +88,14 @@ export default defineUI({
                       >
                         {children}
                       </Container>
+                      {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId + streamCardIndex} />}
+
                       {store.currCompId &&
                        store.currStreamCardId &&
-                        store.currCompId !== "root" &&
-                        !store.textEditingState &&
-                        store.currCompId !== store.currStreamCardId && 
-                        !state.draging && <Transfer key={store.currCompId + streamCardIndex} />}
-
-                      {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId + streamCardIndex} />}
+                       store.currCompId !== "root" &&
+                       !store.textEditingState &&
+                       store.currCompId !== store.currStreamCardId && 
+                       !state.draging && <Transfer key={store.currCompId + streamCardIndex} />}
                     </>
                   );
                 },

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

@@ -2,8 +2,8 @@ import { cloneDeep, pick, set } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { ICompKeys, Layout } from "../../typings";
 import { Matrix } from "../../objects/DesignTemp/creates/Matrix";
+import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
@@ -331,32 +331,47 @@ export const editActions = EditorModule.action({
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
     const { helper } = this;
-    const groupIds = groupComp.children.default as string[];
+    const groupChildIds = groupComp.children.default as string[];
 
     const parentComp = helper.findParentComp(groupComp.id) as DesignComp;
 
     const parentMatrix = new Matrix();
 
-    groupIds.forEach((id) => {
+    groupChildIds.forEach((id) => {
       const comp = helper.findComp(id) as DesignComp;
 
-      parentMatrix.setFormDiv(parentComp.$el);
+      parentMatrix.setFormDiv(groupComp.$el);
+      const originArr = window.getComputedStyle(groupComp.$el).transformOrigin.split(" ").map(parseFloat);
+
+      const porigin = new Matrix();
+      porigin.translate(originArr[0], originArr[1])
+      const invOrigin = new Matrix();
+      invOrigin.translate(-originArr[0], -originArr[1])
+
+      const childOrigArr = window.getComputedStyle(comp.$el).transformOrigin.split(" ").map(parseFloat);
+      const corigin = new Matrix();
+      corigin.translate(childOrigArr[0], childOrigArr[1])
+      const cinvOrigin = new Matrix();
+      cinvOrigin.translate(-childOrigArr[0], -childOrigArr[1])
+
 
-      const compMatrix = new Matrix();
-      compMatrix.setFormDiv(comp.$el);
-      compMatrix.multipy(parentMatrix);
+      const childMatrix = new Matrix();
+      childMatrix.setFormDiv(comp.$el);
+    
+      const result = cinvOrigin.multipy(porigin).multipy(parentMatrix).multipy(invOrigin).multipy(corigin).multipy(childMatrix);
+      
 
       comp.layout.transform || (comp.layout.transform = {});
-      comp.layout.transform.x = helper.pxToDesignSize(compMatrix.getX());
-      comp.layout.transform.y = helper.pxToDesignSize(compMatrix.getY());
-      comp.layout.transform.s = compMatrix.getScale();
-      comp.layout.transform.r = compMatrix.getRotate();
+      comp.layout.transform.x = helper.pxToDesignSize(result.getX());
+      comp.layout.transform.y = helper.pxToDesignSize(result.getY());
+      comp.layout.transform.s = result.getScale();
+      comp.layout.transform.r = result.getRotate();
     });
 
     const childIds = [...(parentComp.children.default as string[])];
 
     const groupIndex = childIds.findIndex((id) => groupComp.id === id);
-    childIds.splice(groupIndex, 1, ...groupIds);
+    childIds.splice(groupIndex, 1, ...groupChildIds);
 
     parentComp.children.default = childIds;
   },

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

@@ -190,10 +190,10 @@ export class Matrix {
   //  * @param {number} tx - translation for x
   //  * @param {number} ty - translation for y
   //  */
-  // translate(tx, ty) {
-  //   this.transform(1, 0, 0, 1, tx, ty);
-  //   return this;
-  // }
+  translate(tx: any, ty: any) {
+    this.transform(1, 0, 0, 1, tx, ty);
+    return this;
+  }
 
   // /**
   //  * Translate current matrix on x axis accumulative.

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

@@ -71,9 +71,16 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
 }
 
 export function parseTransform(trans: any) {
-  const transforms: string[] = [];
-  Object.entries(trans).forEach(([key, value]) => {
-    transforms.push(`${key}(${value})`);
-  });
-  return transforms.join(" ");
+  let transform = "";
+
+  if (trans.translateX || trans.translateY) {
+    transform = `translate(${trans.translateX || 0}, ${trans.translateY || 0})`;
+  }
+  if (trans.scale) {
+    transform += ` scale(${trans.scale})`;
+  }
+  if (trans.rotate) {
+    transform += ` rotate(${trans.rotate})`;
+  }
+  return transform;
 }