mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: convert draw container to composition API
This commit is contained in:
IchliebedichZhu
parent
bbfb860c77
commit
df27fad99b
@ -39,6 +39,7 @@
|
||||
"vuex": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fontfaceobserver": "^2.1.3",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/throttle-debounce": "^2.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs } from 'vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
<script lang="ts" setup>
|
||||
import { StyleValue, onMounted, reactive, nextTick } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import api from '@/api'
|
||||
import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
|
||||
import Preload from '@/utils/plugins/preload'
|
||||
@ -18,122 +18,129 @@ import FontFaceObserver from 'fontfaceobserver'
|
||||
import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
|
||||
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
components: { designBoard, zoomControl },
|
||||
// mixins: [shortcuts],
|
||||
setup() {
|
||||
const state = reactive({
|
||||
style: {
|
||||
left: '0px',
|
||||
},
|
||||
})
|
||||
type TState = {
|
||||
style: StyleValue
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dPage']),
|
||||
},
|
||||
mounted() {
|
||||
this.initGroupJson(JSON.stringify(wGroup.setting))
|
||||
this.$nextTick(() => {
|
||||
this.load()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
|
||||
async load() {
|
||||
let loadFlag = false
|
||||
const { id, tempid, tempType: type } = this.$route.query
|
||||
if (id || tempid) {
|
||||
const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail']({ id: id || tempid, type })
|
||||
const content = JSON.parse(data)
|
||||
const widgets = type == 1 ? content : content.widgets
|
||||
|
||||
if (type == 1) {
|
||||
this.dPage.width = width
|
||||
this.dPage.height = height
|
||||
this.dPage.backgroundColor = '#ffffff00'
|
||||
this.addGroup(content)
|
||||
} else {
|
||||
this.$store.commit('setDPage', content.page)
|
||||
id ? this.$store.commit('setDWidgets', widgets) : this.setTemplate(widgets)
|
||||
}
|
||||
|
||||
await this.$nextTick()
|
||||
|
||||
const imgsData: any = []
|
||||
const svgsData: any = []
|
||||
const fontLoaders: any = []
|
||||
const fontContent: any = {}
|
||||
let fontData: any = []
|
||||
widgets.forEach((item: any) => {
|
||||
if (item.fontClass && item.fontClass.value) {
|
||||
const loader = new FontFaceObserver(item.fontClass.value)
|
||||
fontData.push(item.fontClass)
|
||||
fontLoaders.push(loader.load(null, 30000)) // 延长超时让检测不会丢失字体
|
||||
// 按字体来收集所有文字
|
||||
if (fontContent[item.fontClass.value]) {
|
||||
fontContent[item.fontClass.value] += item.text
|
||||
} else {
|
||||
fontContent[item.fontClass.value] = item.text
|
||||
}
|
||||
}
|
||||
// 收集图片元素、svg元素
|
||||
try {
|
||||
if (item.svgUrl && item.type === 'w-svg') {
|
||||
const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
|
||||
svgsData.push(cNodes)
|
||||
} else if (item.imgUrl && !item.isNinePatch) {
|
||||
const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
|
||||
for (const el of cNodes) {
|
||||
if (el.className && el.className.includes('img__box')) {
|
||||
imgsData.push(el.firstChild)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
})
|
||||
// TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
|
||||
if (content.page?.backgroundImage) {
|
||||
const preloadBg = new Preload([content.page.backgroundImage])
|
||||
await preloadBg.imgs()
|
||||
}
|
||||
try {
|
||||
fontWithDraw && (await font2style(fontContent, fontData))
|
||||
// console.log('1. base64 yes')
|
||||
const preload = new Preload(imgsData)
|
||||
await preload.doms()
|
||||
// console.log('2. image yes')
|
||||
const preload2 = new Preload(svgsData)
|
||||
await preload2.svgs()
|
||||
// console.log('3. svg yes')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
try {
|
||||
await Promise.all(fontLoaders)
|
||||
// console.log('4. font yes')
|
||||
} catch (e) {
|
||||
// console.log(e)
|
||||
}
|
||||
loadFlag = true
|
||||
console.log('--> now u can start screenshot!')
|
||||
setTimeout(() => {
|
||||
try {
|
||||
;(window as any).loadFinishToInject('done')
|
||||
} catch (err) {}
|
||||
}, 100)
|
||||
}
|
||||
// 超时
|
||||
setTimeout(() => {
|
||||
!loadFlag && (window as any).loadFinishToInject('done')
|
||||
}, 60000)
|
||||
},
|
||||
// mixins: [shortcuts],
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const state = reactive<TState>({
|
||||
style: {
|
||||
left: '0px',
|
||||
},
|
||||
})
|
||||
const { dPage } = useSetupMapGetters(['dPage'])
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
|
||||
// initGroupJson(JSON.stringify(wGroup.setting))
|
||||
nextTick(() => {
|
||||
load()
|
||||
})
|
||||
})
|
||||
|
||||
// ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
|
||||
async function load() {
|
||||
let loadFlag = false
|
||||
const { id, tempid, tempType: type } = route.query
|
||||
if (id || tempid) {
|
||||
const postData = {
|
||||
id: Number(id || tempid),
|
||||
type: Number(type)
|
||||
}
|
||||
const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail'](postData)
|
||||
const content = JSON.parse(data)
|
||||
const widgets = Number(type) == 1 ? content : content.widgets
|
||||
|
||||
if (Number(type) == 1) {
|
||||
dPage.value.width = width
|
||||
dPage.value.height = height
|
||||
dPage.value.backgroundColor = '#ffffff00'
|
||||
store.dispatch('addGroup', content)
|
||||
// addGroup(content)
|
||||
} else {
|
||||
store.commit('setDPage', content.page)
|
||||
if (id) {
|
||||
store.commit('setDWidgets', widgets)
|
||||
} else {
|
||||
store.dispatch('setTemplate', widgets)
|
||||
}
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
|
||||
const imgsData: HTMLImageElement[] = []
|
||||
const svgsData: HTMLImageElement[] = []
|
||||
const fontLoaders: Promise<void>[] = []
|
||||
const fontContent: Record<string, string> = {}
|
||||
let fontData: string[] = []
|
||||
widgets.forEach((item: any) => {
|
||||
if (item.fontClass && item.fontClass.value) {
|
||||
const loader = new FontFaceObserver(item.fontClass.value)
|
||||
fontData.push(item.fontClass)
|
||||
fontLoaders.push(loader.load(null, 30000)) // 延长超时让检测不会丢失字体
|
||||
// 按字体来收集所有文字
|
||||
if (fontContent[item.fontClass.value]) {
|
||||
fontContent[item.fontClass.value] += item.text
|
||||
} else {
|
||||
fontContent[item.fontClass.value] = item.text
|
||||
}
|
||||
}
|
||||
// 收集图片元素、svg元素
|
||||
try {
|
||||
if (item.svgUrl && item.type === 'w-svg') {
|
||||
const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
|
||||
svgsData.push(cNodes)
|
||||
} else if (item.imgUrl && !item.isNinePatch) {
|
||||
const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
|
||||
for (const el of cNodes) {
|
||||
if (el.className && el.className.includes('img__box')) {
|
||||
imgsData.push(el.firstChild)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
})
|
||||
// TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
|
||||
if (content.page?.backgroundImage) {
|
||||
const preloadBg = new Preload([content.page.backgroundImage])
|
||||
await preloadBg.imgs()
|
||||
}
|
||||
try {
|
||||
fontWithDraw && (await font2style(fontContent, fontData))
|
||||
// console.log('1. base64 yes')
|
||||
const preload = new Preload(imgsData)
|
||||
await preload.doms()
|
||||
// console.log('2. image yes')
|
||||
const preload2 = new Preload(svgsData)
|
||||
await preload2.svgs()
|
||||
// console.log('3. svg yes')
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
try {
|
||||
await Promise.all(fontLoaders)
|
||||
// console.log('4. font yes')
|
||||
} catch (e) {
|
||||
// console.log(e)
|
||||
}
|
||||
loadFlag = true
|
||||
console.log('--> now u can start screenshot!')
|
||||
setTimeout(() => {
|
||||
try {
|
||||
;(window as any).loadFinishToInject('done')
|
||||
} catch (err) {}
|
||||
}, 100)
|
||||
}
|
||||
// 超时
|
||||
setTimeout(() => {
|
||||
!loadFlag && (window as any).loadFinishToInject('done')
|
||||
}, 60000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user