queenshow/src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

import { Dict_Imgs } from "@/dict";
import { useEditor } from "@/modules/editor";
import { defineComponent, watch } from "vue";
import { string, bool } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";
import { css } from "@linaria/core";


export const Component = defineComponent({
  props: {
    compId: string().isRequired,
    editlayer: bool().def(true),
  },
  setup(props) {
    const comp = useCompData(props.compId);

    const { actions, helper, store, controls } = useEditor();

    function setImageSize(url: string) {
      if (!helper.isStreamCardChild(props.compId)) return;
      const temImg = new Image();
      temImg.src = url;

      temImg.onload = function () {
        const ratio = temImg.width / temImg.height;
        const W = temImg.width > comp.getW() ? comp.getW() : temImg.width;
        comp.setW(W);
        comp.setH(W / ratio);
        actions.onCompLayoutUpdated(comp);
        helper.extendStreamCard(store.currStreamCardId);
      };
    }

    async function changeVal() {
      try {
        const url = await controls.pickCtrl.pickOneImage();
        if (!url) return;

        comp.value.url = url;
        comp.value.x = 0;
        comp.value.y = 0;
        comp.value.s = 1;
        comp.value.matrix = "";
      } catch (error) {
        console.log(error);
      }
    }

    watch(
      () => comp.value.url,
      (value, oldValue) => {
        if (oldValue !== Dict_Imgs.Default) return;
        setImageSize(value);
      }
    );

    return () => {
      const value = comp.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";
      const isCropping = controls.cropCtrl.state.compId == props.compId;

      const offsetUnit = value.offsetUnit || "%";

      const styleObj = {
        transform: `scale(${scale}) translate(${ox}${offsetUnit},${oy}${offsetUnit})`,
        objectFit,
        transformOrigin: "center",
        width: "100%",
        height: "100%"
      }

      if (value.matrix) {
        styleObj.transform = value.matrix;
        styleObj.transformOrigin = "0 0";
        styleObj.width = value.w + "px";
        styleObj.height = value.h + "px";
      }

      return (
        <View
          compId={props.compId}
          onDblclick={store.isEditMode ? changeVal : undefined}
          onClick={() => {
            if (value.showLink && value.link && !store.isEditMode) {
              window.location.href = value.link;
            } else {
              actions.previewImage(value.url, store.previewImageList);
            }
          }}
          editlayer={props.editlayer}
        >
          <div class={["w-1/1 h-1/1 object-cover pointer-events-none overflow-hidden", isCropping && cropingBorder]} >
            <img
                  crossorigin="anonymous"
                  class={"w-1/1 h-1/1 object-cover"}
                  style={styleObj as any}
                  src={
                    value.url.startsWith("data:image/png")
                      ? value.url
                      : value.url + "?editMode=" + store.isEditMode
                  }
              />
          </div>
        </View>
      );
    };
  },
});

const cropingBorder = css`
 border: 1px solid orange;
`