import { useEditor } from "@/modules/editor"; import { inject, onMounted, provide, ref } from "vue"; export function useCompRef(compId: string) { const compRef = ref(); const { store, helper } = useEditor(); const parentId = compId !== "root" ? (inject("compParentId") as string) : ""; provide("compParentId", compId); store.setCompPid(compId, parentId); onMounted(() => { const comp = helper.findComp(compId); if (comp) { Object.defineProperties(comp, { $el: { value: compRef.value, configurable: true, }, }); compRef.value.compId= compId; compRef.value.compKey= comp.compKey; } if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") { let downY = 0; compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{ // e.preventDefault(); // e.stopPropagation(); console.log("touch start"); store.shortPage.offset = 0; downY = e.targetTouches[0].clientY; store.shortPage.isMoving = false; }) compRef.value.addEventListener("touchmove", (e:TouchEvent)=>{ e.preventDefault(); e.stopPropagation(); let offset = e.targetTouches[0].clientY - downY console.log("touch moving", offset); store.shortPage.isMoving = true; if (offset < 0 ) { if (store.shortPage.index == store.streamCardIds.length -1) { offset = 0; } } if (offset > 0 ) { if (store.shortPage.index == 0) { offset = 0; } } store.shortPage.offset = offset; }) compRef.value.addEventListener("touchend", (e:TouchEvent)=>{ store.shortPage.isMoving = false; if (store.shortPage.offset < 0 ) { store.shortPage.index +=1; } if (store.shortPage.offset > 0 ) { store.shortPage.index -=1; if (store.shortPage.index < 0 ) { store.shortPage.index = 0; } } store.shortPage.offset = 0; }); } }); return compRef; } export function useCompEditLayerRef(compId: string) { const editLayerRef = ref(); const { helper, store } = useEditor(); onMounted(() => { if ( !editLayerRef.value ) return; const comp = helper.findComp(compId); if (comp) { Object.defineProperties(comp, { $editor: { value: editLayerRef.value, configurable: true, }, }); const dom = editLayerRef.value helper.setCompEditLayer(compId, ()=>{ const {left, top, width, height} = dom.getBoundingClientRect(); return { left,top, width,height } }) } }); return editLayerRef; }