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

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

@@ -1,7 +1,7 @@
 import { IconRotate } from "@/assets/icons";
 import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted, ref , nextTick} from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, nextTick } from "vue";
 import { useEditor } from "../../../..";
 
 export const SelectTransfer = defineComponent({
@@ -25,31 +25,43 @@ export const SelectTransfer = defineComponent({
     const scaleTopRef = ref();
     const scaleBottomRef = ref();
 
-    onMounted(()=>{
-        nextTick(()=>{
-            selectRectRef.value.editable = "move";
-            rotateRef.value.editable = "rotate";
-            rotateRef2.value.editable = "rotate";
-            rotateRef3.value.editable = "rotate";
-            scaleBottomrightRef.value.editable = "scaleBottomright";
+    onMounted(() => {
+      nextTick(() => {
+        selectRectRef.value.editable = "move";
+        rotateRef.value.editable = "rotate";
+        rotateRef2.value.editable = "rotate";
+        rotateRef3.value.editable = "rotate";
+        scaleBottomrightRef.value.editable = "scaleBottomright";
+
+        scaleBottomLeftRef.value.editable = "scaleBottomleft";
+        scaleTopLeftRef.value.editable = "scaleTopleft";
+        scaleTopRightRef.value.editable = "scaleTopright";
+      });
+    });
+
+    const scaleFlagRef = ref();
 
-            scaleBottomLeftRef.value.editable = "scaleBottomleft";
-            scaleTopLeftRef.value.editable = "scaleTopleft";
-            scaleTopRightRef.value.editable = "scaleTopright";
-            scaleRightRef.value.editable = "scaleright"
-            scaleLeftRef.value.editable = "scaleleft"
-            scaleTopRef.value.editable = "scaletop"
-            scaleBottomRef.value.editable = "scalebottom"
-        })
-    })
     return () => {
+
+        if (selectCtrl.transferStyle.showOrthScale && !scaleFlagRef.value) {
+            scaleFlagRef.value = true
+            nextTick(()=>{
+                scaleRightRef.value.editable = "scaleright";
+                scaleLeftRef.value.editable = "scaleleft";
+                scaleTopRef.value.editable = "scaletop";
+                scaleBottomRef.value.editable = "scalebottom";
+            })
+        }
+        
       return (
-       (
-          <div
-            class={["absolute transfer z-1001",transferStyle.showGizmo? showgizmo:hideGizmo]}
-          >
-              <div class="">
-                {/* {toolbarOpts.map((item) => {
+        <div
+          class={[
+            "absolute transfer z-1001",
+            transferStyle.showGizmo ? showgizmo : hideGizmo,
+          ]}
+        >
+          <div class="">
+            {/* {toolbarOpts.map((item) => {
                   return item.getVisible.call(editor, comp) ? (
                     <item.component
                       class="p-4px"
@@ -58,95 +70,95 @@ export const SelectTransfer = defineComponent({
                     />
                   ) : null;
                 })} */}
-              </div>
-            
-            <div
-              class={["absolute", selctRectStyle]}
-              ref={selectRectRef}
+          </div>
 
-              style={{
-                width: transferStyle.width + "px",
-                height: transferStyle.height + "px",
-                transform: transferStyle.matrix,
-                transformOrigin: `0 0`,
-              }}
-            >
+          <div
+            class={["absolute", selctRectStyle]}
+            ref={selectRectRef}
+            style={{
+              width: transferStyle.width + "px",
+              height: transferStyle.height + "px",
+              transform: transferStyle.matrix,
+              transformOrigin: `0 0`,
+            }}
+          >
+            <div class={borderStyle} />
+            <>
               <div
-                class={borderStyle}
+                class={[resizeStyle, scaleBottomRightStyle]}
+                style={{ transform: transferStyle.matrixInvert }}
+                ref={scaleBottomrightRef}
+              />
+              <div
+                class={[resizeStyle, scaleBottomLeftStyle]}
+                style={{ transform: transferStyle.matrixInvert }}
+                ref={scaleBottomLeftRef}
+              />
+              <div
+                class={[resizeStyle, scaleTopLeftStyle]}
+                style={{ transform: transferStyle.matrixInvert }}
+                ref={scaleTopLeftRef}
+              />
+
+              <div
+                class={[resizeStyle, scaleTopRightStyle]}
+                style={{ transform: transferStyle.matrixInvert }}
+                ref={scaleTopRightRef}
               />
-                <>
-                  <div
-                    class={[resizeStyle, scaleBottomRightStyle]}
-                    style={{transform: transferStyle.matrixInvert}}
-                    ref={scaleBottomrightRef}
-                  />
-                  <div
-                    class={[resizeStyle, scaleBottomLeftStyle]}
-                    style={{transform: transferStyle.matrixInvert}}
-                    ref={scaleBottomLeftRef}
-                  />
-                  <div
-                    class={[resizeStyle, scaleTopLeftStyle]}
-                    style={{transform: transferStyle.matrixInvert}}
-                    ref={scaleTopLeftRef}
-                  />
-                   
-                
-                    <div
-                        class={[resizeStyle, scaleTopRightStyle ]}
-                        style={{transform: transferStyle.matrixInvert}}
-                        ref={scaleTopRightRef}
-                    />
-             
-                  
 
-                  
-                    <div class={transformBtnsStyle} ref={rotateRef3}>
-                        <div class={transBtnStyle} ref={rotateRef} style={{transform: transferStyle.matrixInvert}} >
-                            <IconRotate ref={rotateRef2} />
-                        </div>
-                    </div>
-                  
+              <div class={transformBtnsStyle} ref={rotateRef3}>
+                <div
+                  class={transBtnStyle}
+                  ref={rotateRef}
+                  style={{ transform: transferStyle.matrixInvert }}
+                >
+                  <IconRotate ref={rotateRef2} />
+                </div>
+              </div>
 
-                  <div
+              {
+                
+                transferStyle.showOrthScale && <div
                     class={[resizeHeightBtnCls, scaleTopCls]}
                     ref={scaleTopRef}
                   />
-
-                  <div
-                    class={ [resizeHeightBtnCls, scaleBottomCls]}
+              }
+              {
+                 transferStyle.showOrthScale &&  <div
+                    class={[resizeHeightBtnCls, scaleBottomCls]}
                     ref={scaleBottomRef}
                   />
-
-                  <div
-                    class={ [resizeWidthBtnCls, scaleRightCls]}
+              }
+              {
+                transferStyle.showOrthScale && <div
+                    class={[resizeWidthBtnCls, scaleRightCls]}
                     ref={scaleRightRef}
                   />
-                   <div
-                    class={ [resizeWidthBtnCls, scaleLeftCls]}
+              }
+               { transferStyle.showOrthScale && <div
+                    class={[resizeWidthBtnCls, scaleLeftCls]}
                     ref={scaleLeftRef}
                   />
-                
-                </>
-            </div>
+              }
+            </>
           </div>
-        )
+        </div>
       );
     };
   },
 });
 const selctRectStyle = css`
-    pointer-events: none;
-`
+  pointer-events: none;
+`;
 const showgizmo = css`
-    display: block;
-    left: 0;
-    top: 0;
-    /* pointer-events: none; */
-`
+  display: block;
+  left: 0;
+  top: 0;
+  /* pointer-events: none; */
+`;
 const hideGizmo = css`
-    display: none;
-`
+  display: none;
+`;
 
 const borderStyle = css`
   position: absolute;
@@ -178,21 +190,21 @@ const resizeStyle = css`
 const scaleBottomRightStyle = css`
   bottom: -8px;
   right: -8px;
-`
+`;
 const scaleBottomLeftStyle = css`
   bottom: -8px;
   left: -8px;
-`
+`;
 
 const scaleTopLeftStyle = css`
   top: -8px;
   left: -8px;
-`
+`;
 
 const scaleTopRightStyle = css`
   top: -8px;
   right: -8px;
-`
+`;
 
 const transformBtnsStyle = css`
   @apply space-x-10px whitespace-nowrap;
@@ -259,7 +271,6 @@ const scaleBottomCls = css`
   transform: translate(-50%, 4px);
 `;
 
-
 const resizeWidthBtnCls = css`
   position: absolute;
   width: 8px;
@@ -276,9 +287,9 @@ const resizeWidthBtnCls = css`
 `;
 
 const scaleRightCls = css`
-   right: 0;
-   top: 50%;
-   transform: translate(4px, -50%);
+  right: 0;
+  top: 50%;
+  transform: translate(4px, -50%);
 `;
 
 const scaleLeftCls = css`

src/modules/editor/components/CompUI/customUI/Cards/Card2/component.tsx

@@ -15,57 +15,64 @@ export const Component = createUIComp({
 
     return () => (
       <div class="relative">
-        <div class={upStyle}>
+        <div class="relative">
           <div class={style}>
             <Image.Component
               style={{
                 width: designToNaturalSize(750),
                 height: designToNaturalSize(464),
               }}
+              // class="h-5.3rem w-1/1"
               compId={children.bgImg}
             />
           </div>
-
-          <Image.Component
-            class="!absolute bottom-0 transform translate-x-1/4 translate-y-1/4 rounded-1/2 overflow-hidden"
+          <div
+            class="absolute bottom-0 w-1/1 pl-0.8rem pr-0.2rem flex items-end justify-between transform translate-y-1/3"
             style={{
-              width: designToNaturalSize(191),
               height: designToNaturalSize(191),
+              // marginBottom: designToNaturalSize(191 / 2),
             }}
-            compId={children.item1}
-          />
+          >
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                // marginTop: designToNaturalSize(191 / 3),
+              }}
+              compId={children.item1}
+            />
 
-          <Image.Component
-            class="!absolute transform rounded-1/2 overflow-hidden -translate-x-1/2 bottom-0 left-1/2"
-            style={{
-              width: designToNaturalSize(191),
-              height: designToNaturalSize(191),
-            }}
-            compId={children.item2}
-          />
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                marginBottom: designToNaturalSize(191 / 3),
+              }}
+              compId={children.item2}
+            />
 
-          <Image.Component
-            class="!absolute bottom-0 right-0 rounded-1/2 overflow-hidden transform -translate-x-24/100 -translate-y-1/3"
-            style={{
-              width: designToNaturalSize(191),
-              height: designToNaturalSize(191),
-            }}
-            compId={children.item3}
-          />
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                marginBottom: designToNaturalSize((191 / 3) * 2),
+              }}
+              compId={children.item3}
+            />
+          </div>
         </div>
-
-        <div class="absolute top-0 left-0">
+        <div class="absolute top-1rem left-0 z-1">
           <Text.Component compId={children.text1} />
         </div>
-
-        <Text.Component compId={children.text2} />
+        <Text.Component compId={children.text2} class="mt-0.3rem" />
       </div>
     );
   },
 });
-const upStyle = css`
-  position: relative;
-`;
+
 const style = css`
   background: gray;
   clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);

src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

@@ -16,8 +16,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0 0 0.2rem 0",
-    size: [750, 600],
+    size: [750, 550],
   },
   children: {
     bgImg: () =>
@@ -44,10 +43,16 @@ export const { createComp, useCompData } = createCompHooks({
     text1: () =>
       createCompId("Text", {
         value: `<p><span style="font-size:42px;"><strong>&nbsp; </strong></span><span style="color:hsl(0, 0%, 100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0, 0%, 100%);font-size:20px;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
+        layout: {
+          size: [750, 200],
+        },
       }),
     text2: () =>
       createCompId("Text", {
         value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
+        layout: {
+          size: [750, 40],
+        },
       }),
   },
 });

src/modules/editor/components/CompUI/customUI/Covers/Cover2/index.ts

@@ -12,7 +12,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    size: [750, 500],
+    size: [750, 1200],
   },
   children: {
     img1: () =>
@@ -55,10 +55,16 @@ export const { createComp, useCompData } = createCompHooks({
     text1: () =>
       createCompId("Text", {
         value: `<p><span style="color:hsl(0,0%,100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0,0%,100%);font-size:20px;"><strong>全新 &nbsp; &nbsp; 时尚 &nbsp; &nbsp;</strong></span><span style="color:hsl(0,0%,0%);font-size:20px;"><strong>简约</strong></span></p>`,
+        layout: {
+          size: [380, 200],
+        },
       }),
     text2: () =>
       createCompId("Text", {
         value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
+        layout: {
+          size: [380, 40],
+        },
       }),
   },
 });

src/modules/editor/components/CompUI/customUI/index.ts

@@ -1,20 +1,17 @@
 // export * as Card from "./Cards/Card";
-export * as Card2 from "./Cards/Card2";
-export * as Card3 from "./Cards/Card3";
-export * as CardList from "./Cards/CardList";
-// export * as Card4 from "./Cards/Card4";
-export * as Card5 from "./Cards/Card5";
 export * as Cards11 from "./Cards/Card11";
 export * as Cards12 from "./Cards/Card12";
 export * as Cards13 from "./Cards/Card13";
 export * as Cards14 from "./Cards/Card14";
 export * as Cards15 from "./Cards/Card15";
-
+export * as Card2 from "./Cards/Card2";
+// export * as Card3 from "./Cards/Card3";
+// export * as Card4 from "./Cards/Card4";
+export * as Card5 from "./Cards/Card5";
+export * as CardList from "./Cards/CardList";
 export * as Cover from "./Covers/Cover";
 export * as Cover2 from "./Covers/Cover2";
-
 export * as Text1 from "./Texts/Text1";
-
 export * as Title1 from "./Titles/Title1";
 export * as Title2 from "./Titles/Title2";
 export * as Title3 from "./Titles/Title3";

src/modules/editor/controllers/SelectCtrl/ObjsContainer.ts

@@ -76,16 +76,8 @@ export class ObjsContainer {
 
         if (n == 1) { //单对象
             let obj = selected[0];
-
-            const s = obj.worldTransform.getScale();
-            let rect = new Rectangle(0, 0, obj.width * s.x, obj.height*s.y);
+            let rect = new Rectangle(0, 0, obj.width , obj.height);
             this.rect = rect;
-            obj.transform.scale.x = 1;
-            obj.transform.scale.y = 1;
-            obj.width = rect.width;
-            obj.height = rect.height;
-            obj.updateTransform();
-
             this.parent.transform.setFromMatrix(obj.worldTransform);
             this.parent.updateTransform();
             this.parent.addChildWorldNoChange(obj);
@@ -228,7 +220,9 @@ export class ObjsContainer {
     }
 
     applyChildWidth(option:{Width?:number, Height?:number}) {
+        if (this.selected.length != 1) return;
         const obj = this.selected[0];
+
         //先移除
         this.parent.removeChildWorldNoChange(obj);
         const m = new Matrix();
@@ -267,7 +261,7 @@ export class ObjsContainer {
         this.applyChildWidth({Height});
         this.updateCompState();
     }
-    
+
     translate(x:number, y:number) {
         this.parent.x += x;
         this.parent.y += y;

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

@@ -39,6 +39,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     height: 0,
     matrix: "matrix(1,0,0,1,0,0)",
     matrixInvert: "matrix(1,0,0,1,0,0)",
+    showOrthScale: false,
   });
 
   selected: any[] = []; //选中的所有组件ids
@@ -405,6 +406,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this.transferStyle.height = h;
     this.transferStyle.matrix = matrix;
     this.transferStyle.matrixInvert = matrixInvert;
+    this.transferStyle.showOrthScale = this.selected.length == 1;
   }
 
   selectId(id: string) {
@@ -751,7 +753,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
       } else if (i == 2 || i == 3) {
         this.lastScale.y = dtaScale * this.initScale.y;
-        
+
         // objContainer.scaleY(this.lastScale.y);
         objContainer.scaleHeight(this.lastScale.y * this.initScaleWith.h);
       }