component.tsx 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import { useEditor } from "@/modules/editor";
  2. import { defineComponent } from "vue";
  3. import { string } from "vue-types";
  4. import { useCompData } from ".";
  5. import { View } from "../View";
  6. import { useImage } from "./useImage";
  7. export const Component = defineComponent({
  8. props: {
  9. compId: string().isRequired,
  10. },
  11. setup(props) {
  12. const comp = useCompData(props.compId);
  13. const { store, controls } = useEditor();
  14. const img = useImage(() => ({ value: comp.value, size: comp.layout.size.slice(0, 2) as number[] }));
  15. async function changeVal() {
  16. if (!store.isEditMode) return;
  17. const url = await controls.pickCtrl.pickOneImage();
  18. if (!url) return;
  19. comp.value.url = url;
  20. comp.value.x = 0;
  21. comp.value.y = 0;
  22. comp.value.s = 1;
  23. }
  24. return () => (
  25. <View
  26. class="overflow-hidden"
  27. compId={props.compId}
  28. onDblclick={changeVal}
  29. >
  30. <img
  31. crossorigin="anonymous"
  32. class="w-full h-full pointer-events-none"
  33. src={img.url}
  34. style={img.style}
  35. />
  36. </View>
  37. );
  38. },
  39. });