import domtoimage from "dom-to-image"; import { EditorModule } from ".."; import { DesignComp } from "../../objects/DesignTemp/DesignComp"; import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle"; import { Layout } from "../../typings"; export const helpers = EditorModule.helper({ designToNaturalSize(value: number) { return parseFloat((value / 100).toFixed(2)) + "rem"; }, pxToDesignSize(value: number) { return value * 2; }, findComp(compId: string) { const { compMap } = this.store.designData; const comp = compMap[compId]; if (comp) return comp; }, isStreamCard(compId: string) { return this.store.streamCardIds.indexOf(compId) > -1; }, isGroupComp(compId: string) { return this.store.groupIds.indexOf(compId) > -1; }, isGroupCompChild(compId: string) { const comps = this.helper.getCompTrees(compId); comps.pop(); while (comps.length) { const comp = comps.pop() as DesignComp; if (comp.compKey === "Group") { return true; } } return false; }, findParentComp(compId: string): DesignComp | undefined { const comp = this.helper.findComp(compId); if (comp) return this.helper.findComp(this.store.compPids[compId]); }, findRootComp(): DesignComp | undefined { return this.store.designData.compMap["root"]; }, getCompTrees(compId: string) { const comps: DesignComp[] = []; const getParentComp = (compId: string) => { const comp = this.helper.findComp(compId); if (comp) { comps.unshift(comp); getParentComp(this.store.compPids[comp.id]); } }; getParentComp(compId); return comps; }, createStyle(layout: Partial) { return createCompStyle(this, layout); }, isCurrComp(compId: string) { return this.store.currCompId === compId; }, isCustomChildComp(comp: DesignComp): boolean { const parentComp = this.helper.findParentComp(comp.id); if (!parentComp) return false; const i = parentComp.children.default?.findIndex((d) => d === comp.id) ?? -1; return i >= 0; }, isCompCanDelete(compId: string): boolean { const comp = this.helper.findComp(compId); if (!comp || !this.helper.isCustomChildComp(comp)) return false; if (comp.compKey == "Container" && this.store.streamCardIds.length == 1) return false; return true; // if (this.store.isEditComp) return true; // return this.store.pageCompIds.includes(compId); }, isShowSaveComp(comp: DesignComp): boolean { // if (!comp.children?.default || comp.children?.default?.length == 0) // return false; if (!this.helper.isCustomChildComp(comp)) return false; return true; }, clearUnusedComps(compMap: Record, rootId = "root") { const used = new Set(); const getUsedIds = (ids: string[]) => { ids.forEach((id) => { const comp = compMap[id]; if (!comp) return; used.add(id); getUsedIds(comp.getChildIds()); }); return used; }; getUsedIds([rootId]); Object.keys(compMap).forEach((compId) => { if (!used.has(compId)) { delete compMap[compId]; } }); }, async screenshot(options: { element: HTMLElement; ratio?: number; }): Promise { const dom = options.element; const transferEl = document.querySelector(".transfer") as | HTMLElement | undefined; if (transferEl) { transferEl.style.display = "none"; } if (options.ratio) { const result = await domtoimage.toJpeg(dom); const img = await new Promise((resolve) => { const image = new Image(); image.src = result; image.onload = function () { if (transferEl) { transferEl.style.display = "block"; } resolve(image); }; }); const canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = Math.min( img.naturalWidth / options.ratio, img.naturalHeight ); const ctx = canvas.getContext("2d"); ctx?.drawImage( img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height ); return new Promise((resolve) => { canvas.toBlob((blob) => { if (transferEl) { transferEl.style.display = "block"; } if (blob) { resolve(blob); } }); }); } else { return domtoimage.toBlob(dom); } }, });