import { Dict_Imgs } from "@/dict"; import { useEditor } from "@/modules/editor"; import { defineComponent, watch } from "vue"; import { string } from "vue-types"; import { useCompData } from "."; import { View } from "../View"; export const Component = defineComponent({ props: { compId: string().isRequired, }, 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 () { comp.setH(comp.getW() / (temImg.width / temImg.height)); 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; } 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"; return ( { if (value.showLink && value.link && !store.isEditMode) { window.location.href = value.link; } else { controls.wxCtrl.setPreviewData(value.url, store.previewImageList); } }} >