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

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

@@ -15,7 +15,7 @@ export const Component = defineComponent({
     const compRef = useCompRef(props.compId);
 
     return () => (
-      <div ref={compRef} style={helper.createStyle(layout)}>
+      <div ref={compRef} style={helper.createStyle(layout)} class="!h-auto">
         <div class="relative">
           {slots.Container?.(
             children.default.map((compId) => {

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

@@ -14,6 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
+    size: [750, 800],
     background: {
       color: "#ffffff",
     },

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -5,6 +5,7 @@ import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
 import { useCompRef } from "./hooks";
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 export const View = defineComponent({
   props: {
@@ -20,6 +21,9 @@ export const View = defineComponent({
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
       const isStreamCard = helper.isStreamCard(props.compId);
       const isGroupComp = helper.isGroupComp(props.compId);
+      const obj =new CompObject(store.compMap[props.compId])
+      const m = obj.worldTransform.clone();
+      m.invert();
 
       return (
         <div
@@ -39,17 +43,15 @@ export const View = defineComponent({
           onDblclick={() => emit("dblclick")}
         >
           <div
-            // onMousedown={(e) => {
-            //   if (helper.isGroupCompChild(props.compId)) return;
+            onMousedown={(e) => {
+              if (helper.isGroupCompChild(props.compId)) return;
+              e.stopPropagation();
+              
+              if (store.isEditMode) {
+                actions.pickComp(props.compId);
+              }
+            }}
 
-            //   // e.stopPropagation();
-            //   if (store.isEditMode) {
-            //     actions.pickComp(props.compId);
-            //     if (!helper.isStreamCard(props.compId)) {
-            //       controls.transferCtrl.mousedown(e, "move", store.currComp);
-            //     }
-            //   }
-            // }}
             onMousemove={(e) => {
               if (
                 !store.isEditMode ||
@@ -60,6 +62,7 @@ export const View = defineComponent({
               actions.pickComp(props.compId);
             }}
           >
+            
             {slots.default?.()}
           </div>
 

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

@@ -16,10 +16,18 @@ export const { createComp, useCompData } = createCompHooks({
   value: {
     imgSize: [240, 240],
   },
+  layout: {
+    padding: "0.2rem 0.35rem",
+    size: [750, 500],
+  },
   children: {
-     img: ()=>createCompId("Image", {value: {url:thumb, x: 25.50, y: 7.00, s: 3.80}}),
-     desc: ()=>createCompId("Text", {value: `<p><span style="font-size:16px;">名称 &nbsp; p190 (注塑)</span></p><p><span style="font-size:16px;">规格 &nbsp; 52英寸</span></p><p><span style="font-size:16px;">厚度 &nbsp;1.0mm+0.05mm</span></p><p><span style="font-size:16px;">底材 &nbsp;鹿皮绒</span></p><p><span style="font-size:16px;">用途 &nbsp;凉鞋、跟鞋、高更鞋、</span><br><span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 时尚休闲鞋等</span></p>`})
-  }
+    img: () =>
+      createCompId("Image", { value: { url: thumb, x: 25.5, y: 7.0, s: 3.8 } }),
+    desc: () =>
+      createCompId("Text", {
+        value: `<p><span style="font-size:16px;">名称 &nbsp; p190 (注塑)</span></p><p><span style="font-size:16px;">规格 &nbsp; 52英寸</span></p><p><span style="font-size:16px;">厚度 &nbsp;1.0mm+0.05mm</span></p><p><span style="font-size:16px;">底材 &nbsp;鹿皮绒</span></p><p><span style="font-size:16px;">用途 &nbsp;凉鞋、跟鞋、高更鞋、</span><br><span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 时尚休闲鞋等</span></p>`,
+      }),
+  },
 });
 
 export const Form = createAttrsForm([

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

@@ -27,7 +27,7 @@ export const Component = createUIComp({
 
     return () => {
       return (
-        <div class="flex">
+        <div class="flex px-0.35rem pt-0.3rem">
           <div class="flex-1 mx-0.3rem leading-loose relative z-10 w-0">
             <Text.Component compId={children.text} class="mt-0.2rem" />
             <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">

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

@@ -12,8 +12,7 @@ export const options = {
 
 export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
-    padding: "0.5rem 0",
-    // margin: "0.3rem 0.35rem",
+    size: [750, 500],
   },
   value: {
     columns: 3,
@@ -31,12 +30,18 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card11/img_1.jpg"),
         },
+        layout: {
+          size: [251, 417],
+        },
       }),
     img2: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Card11/img_shoe.png"),
         },
+        layout: {
+          size: [317, 240],
+        },
       }),
     list: (defaultOpts: any, length = 3) => {
       let i = 0;
@@ -46,6 +51,9 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
           value: {
             url: require(`@/assets/comps/Card11/cover_${i}.png`),
           },
+          layout: {
+            size: [72, 72],
+          },
         });
       });
     },

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

@@ -12,7 +12,7 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={cx("relative text-black overflow-hidden", rootStyles)}>
+      <div class={cx("relative pt-0.3rem text-black overflow-hidden", rootStyles)}>
         <div class="flex justify-end items-center relative mb-0.4rem">
           <div class="absolute right-0 top-1/2 h-3/2 w-5rem border-dark-300 border-1 border-solid border-r-0 border-b-0"></div>
           <Text.Component

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

@@ -15,8 +15,7 @@ export const { createComp, useCompData } = createCompHooks({
     themeColor: "#5BA9CB",
   },
   layout: {
-    padding: "0.5rem 0",
-    // margin: "0.5rem 0.35rem",
+    size: [750, 800],
   },
   children: {
     text: () =>
@@ -24,6 +23,7 @@ export const { createComp, useCompData } = createCompHooks({
         value: `<p><span style="font-size:20px;"><strong>P190-2#</strong></span></p>`,
         layout: {
           textAlign: "center",
+          size: [240, 60],
         },
       }),
     text2: () =>
@@ -31,6 +31,7 @@ export const { createComp, useCompData } = createCompHooks({
         value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);">2#</span><br><span style="color:hsl(0, 0%, 0%);">克莱因蓝</span></p>`,
         layout: {
           textAlign: "center",
+          size: [124, 80],
         },
       }),
     img1: () =>
@@ -38,6 +39,9 @@ export const { createComp, useCompData } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card12/img_1.jpg"),
         },
+        layout: {
+          size: [622, 622],
+        },
       }),
   },
 });

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

@@ -11,7 +11,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex text-black overflow-hidden">
+      <div class="relative flex px-0.35rem pt-0.4rem text-black overflow-hidden">
         <div class="ml-0.15rem mr-0.2rem">
           <Image.Component
             compId={children.img1}
@@ -21,7 +21,7 @@ export const Component = createUIComp({
         <div class="flex-1 mt-1rem py-0.58rem px-0.2rem mb-1.3rem border-2px border-black border-solid leading-loose">
           <Text.Component compId={children.text} />
         </div>
-        <div class="absolute bottom-0 left-0">
+        <div class="absolute bottom-0.1rem left-0.35rem">
           <Image.Component
             compId={children.imgShoe}
             class="w-3.5rem h-2.8rem object-cover"

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

@@ -12,8 +12,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
-    // margin: "0 0.35rem",
+    size: [750, 800],
   },
   children: {
     text: () =>
@@ -28,12 +27,18 @@ export const { createComp, useCompData } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card13/img_1.jpg"),
         },
+        layout: {
+          size: [274, 256],
+        },
       }),
     imgShoe: () =>
       createCompId("Text", {
         value: {
           url: require("@/assets/comps/Card13/img_shoe.png"),
         },
+        layout: {
+          size: [350, 280],
+        },
       }),
   },
 });

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

@@ -11,8 +11,8 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="">
-        <div class="flex justify-end relative pb-0.22rem z-10">
+      <div class="pt-0.2rem px-0.35rem">
+        <div class="flex justify-end relative pb-0.22rem  z-10">
           <div class="absolute left-0 bottom-0 z-10">
             <Image.Component
               compId={children.imgShoe}

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

@@ -12,8 +12,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
-    // margin: "0 0.35rem",
+    size: [750, 750],
   },
   children: {
     text: () =>
@@ -28,12 +27,18 @@ export const { createComp, useCompData } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card14/img_1.jpg"),
         },
+        layout: {
+          size: [400, 330],
+        },
       }),
     imgShoe: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Card14/img_shoe.png"),
         },
+        layout: {
+          size: [350, 260],
+        },
       }),
   },
 });

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

@@ -12,7 +12,7 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={cx(rootStyles, "text-black")}>
+      <div class={cx(rootStyles, "pl-0.65rem pr-0.35rem pt-0.3rem text-black")}>
         <div class="relative mb-0.4rem flex items-center justify-start">
           <Text.Component
             compId={children.title}
@@ -21,7 +21,7 @@ export const Component = createUIComp({
           <div class="absolute left-0 top-1/2 w-5.1rem h-3/2 border-solid border-dark-200 border-1 border-b-0 border-l-0"></div>
         </div>
         <div
-          class="relative pl-0.28rem"
+          class="relative"
           style={{
             backgroundImage: `linear-gradient(${value.themeColor} 87%, #fff 87%)`,
           }}
@@ -43,14 +43,14 @@ export const Component = createUIComp({
             compId={children.img1}
             class="-ml-0.28rem w-6.22rem h-6.22rem object-cover"
           />
-          <div class="relative flex justify-end mt-0.5rem pb-0.35rem -ml-0.28rem">
+          <div class="relative flex justify-end mt-0.5rem pb-0.35rem">
             <Text.Component
               compId={children.text}
-              class="w-4.75rem py-0.55rem bg-light-50 border-dark-200 border-2 border-solid leading-loose"
+              class="w-4.75rem py-0.3rem bg-light-50 border-dark-200 border-2 border-solid leading-loose"
             />
             <Image.Component
               compId={children.img2}
-              class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
+              class="!absolute bottom-0 left-0 -ml-0.28rem w-4rem h-2.85rem object-cover"
             />
           </div>
         </div>

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

@@ -15,24 +15,29 @@ export const { createComp, useCompData } = createCompHooks({
     themeColor: "#6D8D70",
   },
   layout: {
-    padding: "0.5rem 0",
-    // margin: "0.5rem 0.35rem",
+    size: [750, 1200],
   },
   children: {
     title: () =>
       createCompId("Text", {
         value:
           '<p><span style="font-size:24px;"><strong>P190-3#</strong></span></p>',
+        layout: {
+          size: [260, 60],
+        },
       }),
     colorText: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">铜绿色</span></p>`,
+        layout: {
+          size: [130, 80],
+        },
       }),
     text: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">绿色是个舒服的颜色，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;给人无限的对未来的憧憬，</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
-          textAlign: "center",
+          size: [475, 328],
         },
       }),
     img2: () =>
@@ -40,12 +45,18 @@ export const { createComp, useCompData } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card15/img_shoe.png"),
         },
+        layout: {
+          size: [400, 285],
+        },
       }),
     img1: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Card15/img_1.jpg"),
         },
+        layout: {
+          size: [622, 622],
+        },
       }),
   },
 });

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

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0 0 0.2rem 0",
+    size: [750, 600],
   },
   children: {
     bgImg: () =>

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

@@ -13,7 +13,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex justify-between">
+      <div class="relative flex justify-between">
         <div class="flex flex-col justify-center">
           <Text.Component compId={children.text1} />
           <Text.Component class="mt-0.07rem" compId={children.text2} />

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

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
+    size: [750, 300],
   },
   children: {
     bgImg: () =>

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

@@ -17,6 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
     padding: "0.2rem",
+    size: [750, 300],
   },
   children: {
     bgImg: () =>

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

@@ -15,7 +15,7 @@ export const Component = createUIComp({
     return () => (
       <div class="relative w-full">
         <div class="!absolute w-full h-full flex justify-center items-center">
-          <Text.Component class="!absolute w-full" compId={children.text1} />
+          <Text.Component class="!absolute w-full tracking-5px" compId={children.text1} />
         </div>
         <div class="flex justify-center">
           <Image.Component

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

@@ -15,17 +15,25 @@ export const options = {
 
 export const { createComp, useCompData } = createCompHooks({
   value: {},
-  layout: {},
+  layout: {
+    size: [750, 275],
+  },
   children: {
     bgImg: () =>
       createCompId("Image", {
         value: {
-          url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png",
+          url: require("@/assets/comps/Card14/img_shoe.png"),
+        },
+        layout: {
+          size: [750, 275],
         },
       }),
     text1: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:52px;">F A SH I O N</span></p>`,
+        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:60px;">FASHION</span></p>`,
+        layout: {
+          size: [750, 275],
+        },
       }),
   },
 });

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

@@ -29,7 +29,7 @@ export const Component = createUIComp({
 
     return () => (
       <div
-        class="grid"
+        class="grid px-0.2rem pt-0.3rem"
         style={{
           gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
           gridGap: helper.designToNaturalSize(value.gap),

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

@@ -12,6 +12,9 @@ export const options = {
 };
 
 export const { createComp, useCompData, useCreateChild } = createCompHooks({
+  layout: {
+    size: [750, 420],
+  },
   value: {
     gap: 10,
     columns: 3,
@@ -40,11 +43,14 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
               ...offset,
             },
             layout: {
-              size: [0, 0]
-            }
+              size: [230, 300],
+            },
           }),
           desc: createCompId("Text", {
             value: `<p style="text-align:center;">这是一个小标题</p>`,
+            layout: {
+              size: [230, 40],
+            },
           }),
         };
       });

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -38,8 +38,8 @@ const titleCls = css`
   position: absolute;
   left: 50%;
   top: 20%;
-  width: 7rem;
-  transform: translateX(-50%);
+  /* width: 7rem; */
+  transform: translateX(-50%) !important;
 `;
 
 const arrowCls = css`

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

@@ -10,6 +10,9 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
+  layout: {
+    size: [750, 1300],
+  },
   value: {},
   children: {
     bg: () =>
@@ -17,10 +20,16 @@ export const { createComp, useCompData } = createCompHooks({
         value: {
           url: "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
         },
+        layout: {
+          size: [750, 1300],
+        },
       }),
     title: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">新科技反光面料</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">引领潮流新风尚</span></p><p style="text-align:center;">&nbsp;</p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:16px;">时尚 ｜ 精致 ｜ 百搭</span></p>`,
+        layout: {
+          size: [750, 200],
+        },
       }),
   },
 });

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

@@ -11,6 +11,9 @@ export const options = {
 
 export const { createComp, useCompData } = createCompHooks({
   value: {},
+  layout: {
+    size: [750, 500],
+  },
   children: {
     img1: () =>
       createCompId("Image", {
@@ -20,22 +23,34 @@ export const { createComp, useCompData } = createCompHooks({
           y: 0,
           s: 1,
         },
+        layout: {
+          size: [451, 1022],
+        },
       }),
     img2: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Cover2/img_2.jpg"),
         },
+        layout: {
+          size: [167, 306],
+        },
       }),
     img3: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Cover2/img_3.jpg"),
         },
+        layout: {
+          size: [167, 208],
+        },
       }),
     title: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FasHION</span></p><p>&nbsp;</p>`,
+        layout: {
+          size: [750, 110],
+        },
       }),
     text1: () =>
       createCompId("Text", {

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

@@ -58,6 +58,7 @@ export const Component = createUIComp({
 });
 
 const rootStyles = css`
+  padding: 0 0.2rem;
   .text {
     &::before {
       content: "";

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

@@ -35,7 +35,7 @@ export const options = {
 
 export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
-    padding: " 0 0.2rem",
+    size: [750, 420],
   },
   value: {
     columns: 5,
@@ -49,8 +49,18 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
       return Array.from({ length }, () => {
         i = i + 1;
         return {
-          label: createCompId("Text", { value: defaultData[i]?.label }),
-          content: createCompId("Text", { value: defaultData[i]?.content }),
+          label: createCompId("Text", {
+            value: defaultData[i]?.label,
+            layout: {
+              size: [160, 60],
+            },
+          }),
+          content: createCompId("Text", {
+            value: defaultData[i]?.content,
+            layout: {
+              size: [160, 60],
+            },
+          }),
         };
       });
     },

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

@@ -12,6 +12,9 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
+  layout: {
+    size: [750, 180],
+  },
   value: {
     themeColor: "#666666",
   },

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

@@ -12,14 +12,14 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
+    size: [750, 80],
   },
   children: {
     title: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
         layout: {
-          textAlign: "center",
+          size: [300, 60],
         },
       }),
   },

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

@@ -15,16 +15,22 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.2rem",
+    size: [750, 130],
   },
   children: {
     title: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+        layout: {
+          size: [750, 70],
+        },
       }),
     subtitle: () =>
       createCompId("Text", {
         value: `<p style="text-align:center;">/ Product Details /</p>`,
+        layout: {
+          size: [750, 60],
+        },
       }),
   },
 });

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

@@ -1,8 +1,8 @@
-export * as Card from "./Cards/Card";
+// 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 Card4 from "./Cards/Card4";
 export * as Card5 from "./Cards/Card5";
 export * as Cards11 from "./Cards/Card11";
 export * as Cards12 from "./Cards/Card12";

src/modules/editor/components/Preview/index.tsx

@@ -8,7 +8,7 @@ export default defineUI({
     return () => (
       <div
         class="overflow-hidden min-h-100vh"
-        style={helper.createStyle(helper.findRootComp()?.layout || {})}
+        style={helper.createStyle(helper.findRootComp()?.layout || {size: [750, 800]})}
       >
         {store.pageCompIds.map((id) => {
           const compKey = store.designData.compMap[id]?.compKey;

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

@@ -35,7 +35,7 @@ export default defineUI({
                 key={item.compKey}
                 title={item.name}
                 onClick={() =>
-                  editor.actions.addCompToDesign(item.compKey as ICompKeys)
+                  editor.actions.clickCompToDesign(item.compKey as ICompKeys)
                 }
               >
                 <Image

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

@@ -1,7 +1,43 @@
+import { useResource } from "@/modules/resource";
+import { Image, List, Loadmore } from "@queenjs/ui";
+import { Radio } from "ant-design-vue";
 import { defineComponent } from "vue";
 
 export const MySources = defineComponent({
   setup() {
-    return () => <div>我的素材</div>;
+    const resource = useResource();
+    const matListCtrl = resource.controls.materialImageListCtrl;
+    matListCtrl.hasLimit = true;
+    matListCtrl.loadPage(1);
+
+    return () => (
+      <div class="scrollbar">
+        <Radio.Group>
+          <Radio.Button>图片</Radio.Button>
+          <Radio.Button>视频</Radio.Button>
+        </Radio.Group>
+
+        <List data={matListCtrl.state.list} columns={2} gap="20px">
+          {{
+            item(item: any) {
+              return (
+                <div style={{ aspectRatio: 1 }}>
+                  <Image class="w-full h-full" src={item.file.url} size={240} />
+                </div>
+              );
+            },
+            loadmore() {
+              return (
+                <Loadmore
+                  loading={matListCtrl.state.loading}
+                  canLoad={matListCtrl.state.canLoadNext}
+                  onChange={matListCtrl.loadNextPage}
+                />
+              );
+            },
+          }}
+        </List>
+      </div>
+    );
   },
 });

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

@@ -5,6 +5,7 @@ import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 import CustomComps from "./CustomComps";
+import { MySources } from "./MySources";
 
 export default defineUI({
   setup() {
@@ -14,6 +15,7 @@ export default defineUI({
     const tabs = [
       { label: "模块组件", value: "senior" },
       { label: "我的组件", value: "user" },
+      { label: "我的素材", value: "source" },
     ];
 
     const state = useReactive(() => ({
@@ -57,7 +59,9 @@ export default defineUI({
                   <div
                     class="draggable-item p-4px text-center"
                     onClick={() =>
-                      editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                      editor.actions.clickCompToDesign(
+                        item.compKey as ICompKeys
+                      )
                     }
                   >
                     <img
@@ -82,10 +86,15 @@ export default defineUI({
               );
             })}
           </div>
-          <CustomComps
-            class="flex-1 -mx-16px p-16px"
-            components={state.currComps}
-          />
+
+          {state.currTabType !== "source" ? (
+            <CustomComps
+              class="flex-1 -mx-16px p-16px"
+              components={state.currComps}
+            />
+          ) : (
+            <MySources class="flex-1 -mx-16px p-16px" />
+          )}
         </div>
       </div>
     );

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

@@ -75,9 +75,16 @@ export class ObjsContainer {
 
         if (n == 1) { //单对象
             let obj = selected[0];
-            //构建当前对象的转换矩阵
-            let rect = new Rectangle(0, 0, obj.width, obj.height);
+
+            const s = obj.worldTransform.getScale();
+            let rect = new Rectangle(0, 0, obj.width * s.x, obj.height*s.y);
             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);
@@ -85,6 +92,7 @@ export class ObjsContainer {
             return;
         }
 
+
         while (n--) {
             let obj = selected[n];
             let box = obj.calculateBounds();
@@ -98,6 +106,7 @@ export class ObjsContainer {
 
         this.rect = rect;
 
+
         //设置位置
         let p = this.parent.position;
         p.x = center.x;
@@ -110,6 +119,8 @@ export class ObjsContainer {
 
         //设置旋转
         this.parent.scale = { x: 1, y: 1 } as any;
+        this.parent.width = rect.width;
+        this.parent.height = rect.height;
 
         //设置旋转
         this.parent.rotation = selectedRotation;
@@ -155,7 +166,8 @@ export class ObjsContainer {
         this.parent.updateTransform();
 
         this.pivotIndex = index;
-        return { x: point.x * 0.5, y: point.y * 0.5 };
+
+        return { x: point.x, y: point.y};
     }
 
     getPivotXY(index:number) {
@@ -189,8 +201,8 @@ export class ObjsContainer {
         let pX = { x: pointX.x, y: pointX.y } as any;
         this.parent.worldTransform.apply(pX, pX);
 
-        let xVec = { x: (pX.x - point.x) * 0.5, y: (pX.y - point.y) * 0.5 };
-        let yVec = { x: (pY.x - point.x) * 0.5, y: (pY.y - point.y) * 0.5 };
+        let xVec = { x: (pX.x - point.x), y: (pX.y - point.y) };
+        let yVec = { x: (pY.x - point.x), y: (pY.y - point.y) };
 
         return { x: xVec, y: yVec };
     }
@@ -199,21 +211,56 @@ export class ObjsContainer {
         this.parent.scale.x = x;
         this.parent.scale.y = y;
         this.parent.updateTransform();
-
         this.updateCompState();
     }
 
     scaleX(x:number) {
         this.parent.scale.x = x;
+
         this.parent.updateTransform();
         this.updateCompState();
     }
+
     scaleY(y:number) {
         this.parent.scale.y = y;
         this.parent.updateTransform();
         this.updateCompState();
     }
 
+    // scaleSize(w:number, h:number) {
+
+    // }
+
+    scaleWidth(w:number) {
+         
+        //怎么改对应的偏移值
+        this.parent.scale.x = w / this.rect.width
+
+
+        this.rect.width = w;
+        this.selected[0].width = w;
+    }
+    // scaleHeight(w:number) {
+
+    // }
+    //清除当前元素的缩放 改为类容的宽度
+    applyScaleToChildSize() {
+        if (this.selected.length  != 1 ) return;
+       
+        const w = this.width *this.parent.scale.x;
+        const h = this.height  *this.parent.scale.y;
+        this.parent.scale.x = 1;
+        this.parent.scale.y = 1;
+        this.parent.updateTransform();
+
+        this.rect.width = w;
+        this.rect.height = h;
+        this.selected[0].width = w;
+        this.selected[0].height = h;
+
+        this.updateCompState();
+    }
+
     translate(x:number, y:number) {
         this.parent.x += x;
         this.parent.y += y;

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

@@ -50,7 +50,15 @@ export class CompObject extends DisplayObject {
     get width() {
         return  this._width
     }
-
+    set width( value ) {
+        this._width = value;
+        this.comp.layout.size[0] = pxToDesignSize(this._width);
+    }
+    set height( value ) {
+        this._height = value;
+        this.comp.layout.size[1] = pxToDesignSize(this._height);
+    }
+    
     get height() {
         return this._height
     }

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

@@ -78,7 +78,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.w = selCanvas.width * 2;
     this._selCanvaseSize.h = selCanvas.height * 2;
 
-    document.addEventListener("mousedown", this.onDocMouseDown.bind(this));
+    document.addEventListener("mousedown", this.onDocMouseDown.bind(this), {capture: true});
     document.addEventListener("mousemove", this.onDocMouseMove.bind(this));
     document.addEventListener("mouseup", this.onDocMouseUp.bind(this));
 
@@ -89,6 +89,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   onDocMouseDown(e: MouseEvent) {
     if (!this.pageEl || !this.selCanvas) return;
 
+    if (this.store.textEditingState) {
+        return
+    }
     let box = this.pageEl.getBoundingClientRect();
     const pageX = e.clientX - box?.left;
     const pageY = e.clientY - box?.top;
@@ -309,7 +312,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let isClick = false;
     const dx = Math.abs(e.clientX - this._downClientX);
     const dy = Math.abs(e.clientY - this._downClientY);
-    if (dx < 2 && dy < 2) {
+    if (dx < 2 && dy < 2 && !this.store.textEditingState ) {
       isClick = true;
     }
     if (isClick) {
@@ -686,6 +689,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         scaleIndex = dirOrth.indexOf(dir);
         if (scaleIndex == 2) scaleIndex = 0;
       }
+      
       let pivot = objContainer.setPivot(scaleIndex);
 
       this.scaleIndex = scaleIndex;
@@ -737,6 +741,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         objContainer.scaleY(this.lastScale.y);
       }
     }
+
     this.upgateGizmoStyle();
   }
 
@@ -746,7 +751,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       let preScale = { x: this.initScale.x, y: this.initScale.y };
       let scaleIndex = this.scaleIndex;
       let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
-
+      this.objContainer?.applyScaleToChildSize();
+      this.upgateGizmoStyle();
       // this.editor.history.record({
       //     undo:()=>{
       //         this.objContainer.setPivot( scaleIndex );

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

@@ -39,7 +39,7 @@ export class Matrix {
     out.setMatrixStr(str);
     return out;
   }
-  
+
   setMatrixStr(transformMatrix:string) {
     const values = transformMatrix.split("(")[1].split(")")[0].split(",");
     this.a = +values[0];
@@ -170,6 +170,13 @@ export class Matrix {
     return this;
   }
 
+  getScale() {
+    const a = this.a, b = this.b, c = this.c, d = this.d;
+    const x = Math.sqrt((a * a) + (b * b));
+    const y = Math.sqrt((c * c) + (d * d));
+    return {x, y};
+  }
+  
   rotate(angle: number) {
     const cos = Math.cos(angle);
     const sin = Math.sin(angle);

src/modules/editor/controllers/TransferCtrl/transforms/transform.ts

@@ -41,6 +41,7 @@ const transform: TransCreateFn = (transType: string) => ({
   mousemove() {
     const style = this.module.helper.createStyle({
       transform: getTransform.call(this, transType),
+      size: [0,0]
     });
     Object.entries(style).forEach(([key, value]: any[]) => {
       this.compEl.style[key] = value;

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

@@ -108,8 +108,10 @@ export const editActions = EditorModule.action({
   },
   // 删除组件
   removeComp(compId: string) {
+
     if (this.helper.isCompCanDelete(compId)) {
       if (compId === this.store.currCompId) {
+        this.controls.selectCtrl.selecteObjs([]);
         this.store.setCurrComp("root");
       }
       this.store.deleteComp(compId);
@@ -233,6 +235,13 @@ export const editActions = EditorModule.action({
     console.log(comp);
   },
 
+  // 设置组件变换
+  setCompTransformMatrix(comp: DesignComp, transformMatrix: string) {
+    if (!comp) return;
+
+    comp.layout.transformMatrix = transformMatrix;
+  },
+
   updateCompData(comp: DesignComp, path: string, value: any) {
     set(comp, path, value);
   },

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

@@ -70,7 +70,7 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout>) {
+  createStyle(layout: Partial<Layout> & {size:any[]}) {
     return createCompStyle(this, layout);
   },
   isCurrComp(compId: string) {

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

@@ -31,7 +31,7 @@ export const store = EditorModule.store({
     compMap(state) {
       return state.designData.compMap;
     },
-    
+
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },
@@ -85,39 +85,9 @@ export const store = EditorModule.store({
      
       this.store.currCompId = compId;
 
-      const find = (objs: string[], id: string): boolean => {
-        if (!objs || objs.length < 1) return false;
-
-        if (objs.includes(id)) return true;
+      const comps = this.helper.getCompTrees(compId);
 
-        let n = objs.length;
-        let f = false;
-        while (n--) {
-          f = find(
-            this.store.designData.compMap[objs[n]].children.default as any,
-            id
-          );
-          if (f) {
-            break;
-          }
-        }
-        return f;
-      };
-      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
-        );
-        if (isFind) {
-          this.store.currStreamCardId = ids[i];
-          break;
-        }
-      }
+      this.store.currStreamCardId = comps[1]?.id || ''
     },
 
     deleteComp(compId: string) {

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -11,7 +11,7 @@ export class DesignComp {
   thumbnail = "";
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout: Layout = {};
+  layout: Layout = {size: [200, 200]};
   background: Background = {};
   children: Record<string, any> & { default?: string[] } = {};
 
@@ -71,4 +71,14 @@ export class DesignComp {
     if (!this.layout.size) this.layout.size = [];
     this.layout.size[1] = height;
   }
+  setW(w: number) {
+    if (!this.layout.size) this.layout.size = [];
+    this.layout.size[0] = w;
+  }
+  setSize(w: number, h: number) {
+    if (!this.layout.size) this.layout.size = [];
+
+    this.layout.size[0] = w;
+    this.layout.size[1] = h;
+  }
 }

src/modules/editor/typings.ts

@@ -7,7 +7,7 @@ export type EditorMode = "editPage" | "editComp" | "preview";
 export type Layout = {
   position?: "absolute";
   visible?: boolean;
-  size?: number[]; // width height
+  size: number[]; // width height
   mask?: string;
   alignSelf?: string;
   transform?: {
@@ -20,7 +20,7 @@ export type Layout = {
   margin?: string;
   padding?: string;
   transformMatrix?: string;
-  
+
   background?: Background;
 };