Explorar el Código

Merge remote-tracking branch 'origin/dev-lhj' into dev

liwei hace 1 año
padre
commit
f0bd12ccc3

+ 1 - 1
src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -12,7 +12,7 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
     const { store, controls } = useEditor();
-    const img = useImage(() => ({ value: comp.value, size: comp.layout.size }));
+    const img = useImage(() => ({ value: comp.value, size: comp.layout.size.slice(0, 2) as number[] }));
 
     async function changeVal() {
       if (!store.isEditMode) return;

+ 2 - 1
src/modules/editor/components/CompUI/basicUI/Page/index.ts

@@ -1,3 +1,4 @@
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { PageForm } from "./PageForm";
 
@@ -14,7 +15,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
-    size: [750, 800],
+    size: [...(Design_Page_Size as [number, number])],
     background: {
       color: "#ffffff",
     },

+ 31 - 19
src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -3,10 +3,11 @@ import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { defineComponent, onMounted, ref } from "vue";
-import { string ,bool} from "vue-types";
+import { string, bool } from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef , useCompEditLayerRef} from "./hooks";
+import { useCompRef, useCompEditLayerRef } from "./hooks";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 
 export const View = defineComponent({
   props: {
@@ -17,7 +18,9 @@ export const View = defineComponent({
   setup(props, { slots, emit }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
-    const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
+    const editorLayerRef = props.editlayer
+      ? useCompEditLayerRef(props.compId)
+      : ref();
 
     return () => {
       const comp = helper.findComp(props.compId);
@@ -30,18 +33,23 @@ export const View = defineComponent({
       const m = obj.worldTransform.clone();
       m.invert();
 
-      let isFocus = store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId;
+      let isFocus =
+        store.isEditMode &&
+        store.selected.length > 1 &&
+        store.lastSelected == props.compId;
       isFocus = isFocus || store.currCompId == props.compId;
-       
+
       const style = helper.createStyle(comp.layout, comp);
       const page = helper.findRootComp() as DesignComp;
 
-      if (isStreamCard && page.value.pageMode == "short" && store.isPreview) {
+      if (isStreamCard && page.value.pageMode == "short" && store.isDisplay) {
         //  const cards = store.streamCardIds;
         //  const index = cards.indexOf(props.compId)
         //  style.position = "absolute";
         //  style.top = index * 100  + "vh";
-         style.height = "100vh"
+        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
+          adaptiveH: true,
+        });
       }
 
       if (comp.anim && comp.anim.transition) {
@@ -53,10 +61,12 @@ export const View = defineComponent({
           ref={compRef}
           class={[
             viewStyle,
-            store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
+            store.isEditMode &&
+              controls.selectCtrl._state != 0 &&
+              editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
-            isFocus  && AnchorCompStyle
+            isFocus && AnchorCompStyle,
           ]}
           style={style}
           onClick={(e) => {
@@ -81,13 +91,15 @@ export const View = defineComponent({
             {slots.default?.()}
           </div>
 
-          {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
+          {store.isEditMode &&
+            isStreamCard &&
+            store.currStreamCardId == props.compId && (
+              <Hudop compId={props.compId} />
+            )}
 
-          {
-             store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
-                
-             </div>
-          }
+          {store.isEditMode && props.editlayer && (
+            <div ref={editorLayerRef} class={editAreaStyle}></div>
+          )}
         </div>
       );
     };
@@ -192,13 +204,13 @@ const editAreaStyle = css`
   width: 100%;
   height: 100%;
   pointer-events: none;
-`
+`;
 
 const editAreaTestStyle = css`
-   position: absolute;
-   top: 0;
+  position: absolute;
+  top: 0;
   left: 0;
   width: 100px;
   height: 100px;
   background-color: red;
-`
+`;

+ 1 - 1
src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -22,7 +22,7 @@ export function useCompRef(compId: string) {
       compRef.value.compKey= comp.compKey;
     }
 
-    if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") {
+    if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
       let downY = 0;
       compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
           //  e.preventDefault();

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

@@ -21,7 +21,7 @@ export const Component = createUIComp({
       });
     }
 
-    if (editor.store.isPreview) {
+    if (!editor.store.isEditMode) {
       watch(
         () => editor.store.compPids[props.compId],
         () => {

+ 2 - 2
src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -11,9 +11,9 @@ import { GroupNumber } from "../formItems/GroupNumber";
 
 export const layoutColumns: ColumnItem[] = [
   {
-    label: "尺寸",
+    // label: "尺寸",
     dataIndex: "layout.size",
-    component: GroupNumber,
+    component: Size,
     props: {
       labels: ["宽度", "高度"],
     },

+ 68 - 32
src/modules/editor/components/CompUI/formItems/Size.tsx

@@ -1,54 +1,90 @@
+import { CompSizeOpts } from "@/modules/editor/objects/DesignTemp/creates/CompSize";
 import { InputNumber, Select } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
+import { defineComponent } from "vue";
 import { any } from "vue-types";
 
-const labels = ["宽度", "高度"];
 const selectOptions = [
-  { value: "px", label: "像素" },
-  { value: "%", label: "百分比" },
+  { value: "px", label: "像素", options: { step: 1 } },
+  { value: "%", label: "比", options: { step: 0.1, max: 100, min: 0 } },
 ];
 
 export const Size = defineComponent({
   props: {
-    value: any<number[]>().def([]),
+    value: any<[number, number, string?, string?]>().def([0, 0]),
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const state = reactive({
-      unit: "px",
-    });
+    const CompSizeOptsList = [CompSizeOpts.w, CompSizeOpts.h];
 
-    function changeVal(index: number, v: any) {
-      // const { value } = props;
-      // value[index] = parseInt(v) || 0;
-      // emit("change", value);
+    function changeVal(unit: any, index: number, v: any) {
+      const { value } = props;
+      value[index] = parseFloat(v) || 0;
+      if (unit === "%") {
+        value[index] = CompSizeOptsList[index].getPxSize(
+          value[index] as number
+        );
+      }
+      emit("change", value);
+    }
+
+    function changeUnit(index: number, unit: any) {
+      const { value } = props;
+      value[index + 2] = unit;
+      emit("change", value);
+    }
+
+    function fmtVal(val: number, unit: string, index: number) {
+      switch (unit) {
+        case "px":
+          return val.toFixed(0);
+        case "%":
+          return CompSizeOptsList[index].getVSize(val).toFixed(1);
+        default:
+          return "";
+      }
     }
 
     return () => {
-      let values = [...props.value];
+      const values = props.value.slice(0, 2) as number[];
+      const units = props.value.slice(2) as string[];
 
       return (
         <div class="flex space-x-10px">
-          {values.map((value, i) => (
-            <div key={i}>
-              <div class="mb-5px">{labels[i]}</div>
+          {values.map((value, i) => {
+            const unit = units[i] || selectOptions[0].value;
+            const inputOpts =
+              selectOptions.find((d) => d.value === unit)?.options || {};
+            return (
               <InputNumber
-                controls={false}
-                value={value}
-                onChange={changeVal.bind(null, i)}
-              />
-            </div>
-          ))}
-          <div>
-            <div class="mb-5px">单位</div>
-            <Select
-              value={state.unit}
-              class="min-w-85px"
-              options={selectOptions}
-              // @ts-ignore
-              onChange={(v) => (state.unit = v)}
-            ></Select>
-          </div>
+                key={i + unit}
+                value={fmtVal(value as number, unit, i)}
+                onChange={changeVal.bind(null, unit, i)}
+                {...inputOpts}
+              >
+                {{
+                  addonBefore() {
+                    return (
+                      <span class="-mx-8px">
+                        {CompSizeOptsList[i].label}
+                        <Select
+                          value={unit}
+                          onChange={changeUnit.bind(null, i)}
+                        >
+                          {selectOptions.map((d) => {
+                            return (
+                              <Select.Option key={d.value}>
+                                {d.value === "%" ? CompSizeOptsList[i].vUnit : d.value}
+                              </Select.Option>
+                            );
+                          })}
+                        </Select>
+                      </span>
+                    );
+                  },
+                }}
+              </InputNumber>
+            );
+          })}
         </div>
       );
     };

+ 1 - 1
src/modules/editor/controllers/TransferCtrl/transforms/resize.ts

@@ -2,7 +2,7 @@ import { TransCreateFn, TransferCtrl } from "..";
 
 function getResize(this: TransferCtrl, direction: string) {
   const { transEvent, currComp } = this;
-  const size = [...(currComp.layout.size || [])];
+  const size = currComp.layout.size;
   if (direction.indexOf("x") != -1) {
     size[0] = transEvent.width + transEvent.offsetX * 2;
   }

+ 3 - 0
src/modules/editor/dicts/CompOptions.ts

@@ -0,0 +1,3 @@
+export const Design_Page_Size = [750, 1300];
+export const Viewport_Size = 375;
+export const Design_Pixel_Ratio = Design_Page_Size[0] / Viewport_Size;

+ 0 - 1
src/modules/editor/module/actions/edit.tsx

@@ -848,7 +848,6 @@ export const editActions = EditorModule.action({
   },
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
-    comp.layout.size || (comp.layout.size = []);
     comp.layout.size[0] = 750;
   },
   //

+ 21 - 9
src/modules/editor/module/helpers/index.ts

@@ -1,21 +1,30 @@
+import { isPc } from "@queenjs/utils";
 import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
+import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
-  designToNaturalSize(value: number) {
-    // return parseFloat((value / 100).toFixed(2)) + "rem";
-    return value / 2 + "px";
-  },
   pxToDesignSize(value: number) {
-    return value * 2;
+    return value * Design_Pixel_Ratio;
   },
   designSizeToPx(value: number) {
-    return value / 2.0;
+    return value / Design_Pixel_Ratio;
+  },
+  designToNaturalSize(
+    value: number,
+    options?: { adaptiveH?: boolean }
+  ): string {
+    if (options?.adaptiveH && !isPc()) {
+      value =
+        value *
+        ((window.innerHeight * Design_Pixel_Ratio) / Design_Page_Size[1]);
+    }
+    return this.helper.designSizeToPx(value) + "px";
   },
 
   findComp(compId: string) {
@@ -99,7 +108,7 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout> & { size: any[] }, comp:DesignComp) {
+  createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
     return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
@@ -113,11 +122,14 @@ export const helpers = EditorModule.helper({
     return i >= 0;
   },
   isCompCanDelete(compId: string): boolean {
-    return  (this.helper.isStreamCardChild(compId) || (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1));
+    return (
+      this.helper.isStreamCardChild(compId) ||
+      (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1)
+    );
   },
 
   isShowSaveComp(comp: DesignComp): boolean {
-    if ( !this.helper.isStreamCardChild(comp.id) ) return false;
+    if (!this.helper.isStreamCardChild(comp.id)) return false;
     return true;
   },
 

+ 11 - 8
src/modules/editor/module/stores/index.ts

@@ -23,21 +23,21 @@ export const store = EditorModule.store({
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
-    compEditReslut: 0, // -1 取消, 1 确定 
-    lastSelected: "",   //最后上传
+    compEditReslut: 0, // -1 取消, 1 确定
+    lastSelected: "", //最后上传
 
     shortPage: {
-       index: 0,
-       offset: 0,
-       isMoving:false,
-    }
+      index: 0,
+      offset: 0,
+      isMoving: false,
+    },
   }),
   getters: {
     rootPage(state) {
-      return state.designData.compMap["root"] as DesignComp
+      return state.designData.compMap["root"] as DesignComp;
     },
     isEditMode(): boolean {
-      return !this.store.isPreview;
+      return !this.store.isPreview && !this.store.isDisplay;
     },
     isEditPage(state) {
       return state.mode === "editPage";
@@ -48,6 +48,9 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
+    isDisplay(state) {
+      return state.mode === "display";
+    },
     compMap(state) {
       return state.designData.compMap;
     },

+ 0 - 4
src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -69,16 +69,12 @@ export class DesignComp {
   }
 
   setH(height: number) {
-    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;
   }

+ 24 - 0
src/modules/editor/objects/DesignTemp/creates/CompSize.ts

@@ -0,0 +1,24 @@
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+
+export const CompSizeOpts = {
+  w: {
+    label: "宽度",
+    vUnit: "vw",
+    getVSize(w: number) {
+      return (w / Design_Page_Size[0]) * 100;
+    },
+    getPxSize(w: number) {
+      return (w * Design_Page_Size[0]) / 100;
+    },
+  },
+  h: {
+    label: "高度",
+    vUnit: "vh",
+    getVSize(h: number) {
+      return (h / Design_Page_Size[1]) * 100;
+    },
+    getPxSize(h: number) {
+      return (h * Design_Page_Size[1]) / 100;
+    },
+  },
+};

+ 21 - 11
src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -1,16 +1,18 @@
+import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
 import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
-import { compMasks } from "./CompMasks";
-import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
 import { DesignComp } from "../DesignComp";
+import { compMasks } from "./CompMasks";
 
-export function createCompStyle(module: EditorModule, layout: Layout,  comp:DesignComp) {
-  const { designToNaturalSize } = module.helper;
+export function createCompStyle(
+  module: EditorModule,
+  layout: Layout,
+  comp: DesignComp
+) {
+  const { designToNaturalSize, pxToDesignSize } = module.helper;
   const style: any = {};
   const transform: any = {};
 
-
-
   // if (layout.alignSelf) {
   //   style.alignSelf = layout.alignSelf;
   // }
@@ -76,9 +78,13 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
   }
 
   if (layout.size) {
-    const [w, h] = layout.size;
-    if (w) style.width = designToNaturalSize(w);
-    if (h) style.height = designToNaturalSize(h);
+    const [w, h, wUnit, hUnit] = layout.size;
+    if (w) {
+      style.width = designToNaturalSize(w);
+    }
+    if (h) {
+      style.height = designToNaturalSize(h, { adaptiveH: hUnit === "%" });
+    }
   }
 
   if (layout.position) {
@@ -86,7 +92,11 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
   }
 
   if (layout.transformMatrix) {
-    style.transform = layout.transformMatrix;
+    const m = Matrix.createFromMatrixStr(layout.transformMatrix);
+    m.ty = parseFloat(
+      designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
+    );
+    style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";
   } else {
     const v = parseTransform(transform);
@@ -98,7 +108,7 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
       style.backgroundColor = layout.background.color;
     }
   }
-  
+
   return style;
 }
 

+ 2 - 2
src/modules/editor/typings.ts

@@ -2,12 +2,12 @@ import { CompUI } from "./components/CompUI";
 
 export type ICompKeys = keyof typeof CompUI;
 
-export type EditorMode = "editPage" | "editComp" | "preview";
+export type EditorMode = "editPage" | "editComp" | "preview" | "display"
 
 export type Layout = {
   position?: "absolute";
   visible?: boolean;
-  size: number[]; // width height
+  size: [number, number, string?, string?]; // width height wUnit hUnit
   mask?: string;
   alignSelf?: string;
   transform?: {

+ 10 - 2
src/pages/h5/share/Promotion.tsx

@@ -1,4 +1,5 @@
 import { initEditor } from "@/modules/editor";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
 
@@ -9,7 +10,7 @@ export default defineComponent(() => {
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
 
-  editor.actions.switchMode("preview");
+  editor.actions.switchMode("display");
 
   if (id) {
     if (isWk) {
@@ -41,7 +42,14 @@ export default defineComponent(() => {
 
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
-      <div class={isPc() ? `h-620px scrollbar overflow-x-hidden` : `h-full overflow-x-hidden`}>
+      <div
+        class={isPc() ? `scrollbar overflow-x-hidden` : `overflow-x-hidden`}
+        style={{
+          height: editor.helper.designToNaturalSize(Design_Page_Size[1], {
+            adaptiveH: true,
+          }),
+        }}
+      >
         <editor.components.Preview />
       </div>
     </div>