update

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

@@ -1,59 +1,40 @@
 import { useEditor } from "@/modules/editor";
 import { defineComponent } from "vue";
-import { object, string } from "vue-types";
+import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
+import { useImage } from "./useImage";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
-    value: object<{ url: string; x: number; y: number; s: number }>(),
   },
-  emits: ["update:value"],
-  setup(props, { emit }) {
-    const comp = props.compId ? useCompData(props.compId) : null;
+  setup(props) {
+    const comp = useCompData(props.compId);
     const { store, controls } = useEditor();
+    const img = useImage(() => ({ ...comp.value, size: comp.layout.size }));
+
     async function changeVal() {
+      if (!store.isEditMode) return;
       const url = await controls.pickCtrl.pickOneImage();
       if (!url) return;
 
-      if (comp) {
-        comp.value.url = url;
-        comp.value.x = 0;
-        comp.value.y = 0;
-        comp.value.s = 1;
-      } else {
-        emit("update:value", { url, x: 0, y: 0, s: 1 });
-      }
+      comp.value.url = url;
+      comp.value.x = 0;
+      comp.value.y = 0;
+      comp.value.s = 1;
     }
 
-    return () => {
-      const value = comp?.value || props.value;
-      const scale = value?.s || 1;
-      const ox = value?.x || 0;
-      const oy = value?.y || 0;
-      const objectFit =
-        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
-          ? "cover"
-          : "contain";
-
-      return (
-        <View
-          class="overflow-hidden"
-          compId={props.compId}
-          onDblclick={store.isEditMode ? changeVal : undefined}
-        >
-          <img
-            crossorigin="anonymous"
-            class="pointer-events-none"
-            style={{
-              transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
-              objectFit,
-            }}
-            src={value?.url}
-          />
-        </View>
-      );
-    };
+    return () => (
+      <View
+        class="overflow-hidden"
+        compId={props.compId}
+        onDblclick={changeVal}
+      >
+        <div style={img.style}>
+          <img class="w-full h-full pointer-events-none" src={img.url} />
+        </div>
+      </View>
+    );
   },
 });

src/modules/editor/components/CompUI/basicUI/Image/useImage.ts

@@ -0,0 +1,57 @@
+import { Dict_Imgs } from "@/dict";
+import { useEditor } from "@/modules/editor";
+import { reactive, watchEffect } from "vue";
+
+export function useImage(
+  getVal: () => {
+    url: string;
+    x: number;
+    y: number;
+    s: number;
+    size?: number[];
+  }
+) {
+  const { helper } = useEditor();
+  const state = reactive({
+    url: Dict_Imgs.Default,
+    style: {} as any,
+  });
+
+  const image = new Image();
+  image.crossOrigin = "anonymous";
+
+  image.onload = function () {
+    const { url, x, y, s, size = [] } = getVal();
+    const ratio = image.naturalWidth / image.naturalHeight;
+    const w = size[0] || 750;
+    const h = size[1] || w / ratio;
+    const style = {
+      width: "100%",
+      height: "100%",
+      transform: `translate(${x}%,${y}%) scale(${s})`,
+    };
+    if (w / h > ratio) {
+      style.width = helper.designToNaturalSize(w);
+      style.height = helper.designToNaturalSize(w / ratio);
+    } else {
+      style.height = helper.designToNaturalSize(h);
+      style.width = helper.designToNaturalSize(h * ratio);
+    }
+    state.style = style;
+    state.url = url;
+  };
+
+  image.onerror = function () {
+    state.style = {
+      width: "100%",
+      height: "100%",
+    };
+    state.url = Dict_Imgs.Default;
+  };
+
+  watchEffect(() => {
+    image.src = getVal().url;
+  });
+
+  return state;
+}

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

@@ -1,14 +1,12 @@
-import { mapValuesDeep } from "@/utils";
+import html2canvas from "html2canvas";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
-import html2canvas from "html2canvas";
-import { Exception } from "queenjs";
 
 export const helpers = EditorModule.helper({
   designToNaturalSize(value: number) {
-    return value / 100 + "rem";
+    return parseFloat((value / 100).toFixed(2)) + "rem";
   },
   findComp(compId: string) {
     const { compMap } = this.store.designData;