Compare commits

...

2 Commits

Author SHA1 Message Date
zhangxuelin d64122775a Merge branch 'zdg' of http://27.128.240.72:3000/zhuhao/AIx_Smarttalk into zdg
# Conflicts:
#	src/renderer/src/components/pdf/index.vue
#	src/renderer/src/views/classBegins/index.vue
#	src/renderer/src/views/tool/sphere.vue
2024-08-07 15:31:59 +08:00
zhangxuelin 29ad68e5ab pdf功能设置 2024-08-07 15:19:58 +08:00
3 changed files with 126 additions and 49 deletions

View File

@ -26,7 +26,7 @@ import {
defineProps, defineProps,
defineExpose, defineExpose,
nextTick, nextTick,
watchEffect defineEmits,watchEffect
} from 'vue' } from 'vue'
// import { fabric } from 'fabric' // import { fabric } from 'fabric'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
@ -34,6 +34,8 @@ import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/util
import { fabricVue, TYPES } from '@/plugins/fabric' import { fabricVue, TYPES } from '@/plugins/fabric'
import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index' import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
import {useToolState} from '@/store/modules/tool' import {useToolState} from '@/store/modules/tool'
const { ipcRenderer } = require('electron')
const toolState = useToolState(); const toolState = useToolState();
const props = defineProps({ const props = defineProps({
pdfObj: { pdfObj: {
@ -116,7 +118,43 @@ const renderPage = async (canvasobj) => {
// }) // })
}) })
} }
//
const savaDataStore = () => {
imgarr.value.forEach((a) => {
if (a.index == 0) {
a.JSONdata = canvasFabricVue.value.canvas.toJSON()
} else {
a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
}
})
const nameMap = new Map(canvsStore.pageArr.map((item) => [item.page, item.id]))
//
let promises = []
imgarr.value.forEach((item) => {
if (nameMap.has(item.page)) {
const params = {
id: nameMap.get(item.page),
contentData: JSON.stringify(item.JSONdata.objects)
}
promises.push(updateSmartBookMarkContent([params]))
} else {
promises.push(addsmartBookMark({
pageNum: item.page,
contentData: JSON.stringify(item.JSONdata.objects),
bookId: props.pdfObj.bookId,
type: '教材',
source: 'smarttalk'
}))
}
})
Promise.all(promises).then(res=>{
toolState.isPdfWin=false
toolState.showBoardAll=true //
ipcRenderer.invoke('tool-sphere:reset') //tool
ipcRenderer.send('open-PDF:minimize')
})
}
const updatePage = (canvasobj) => { const updatePage = (canvasobj) => {
renderPage(canvasobj) renderPage(canvasobj)
} }
@ -236,9 +274,9 @@ const initPdfone = async () => {
} }
onMounted(async () => { onMounted(async () => {
try { try {
// canvas
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
numPagesTotal.value = pdf.numPages numPagesTotal.value = pdf.numPages
// fabriccanvas // fabriccanvas
const option = { freeDrawingCursor: 'default' } const option = { freeDrawingCursor: 'default' }
const canvas1 = new fabricVue() const canvas1 = new fabricVue()
@ -246,10 +284,8 @@ onMounted(async () => {
// canvas1.boardConfig.mode= TYPES.ActionMode.ERASE // canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
await canvas1.initCanvas(fabriccanvas.value, option) await canvas1.initCanvas(fabriccanvas.value, option)
canvas1.canvas.setWidth(window.innerWidth / 2 - 100) canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
// canvas1.canvas.isDrawingMode=false
canvasFabricVue.value = canvas1 canvasFabricVue.value = canvas1
const canvas2 = new fabricVue() const canvas2 = new fabricVue()
canvas2.boardConfig.mode = TYPES.ActionMode.DRAW
await canvas2.initCanvas(fabriccanvas1.value, option) await canvas2.initCanvas(fabriccanvas1.value, option)
canvas2.canvas.setWidth(window.innerWidth / 2 - 100) canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
// canvas2.canvas.isDrawingMode=false // canvas2.canvas.isDrawingMode=false
@ -269,44 +305,88 @@ onMounted(async () => {
console.log(error) console.log(error)
ElMessage.error('pdf文件错误') ElMessage.error('pdf文件错误')
} }
setToolStatus()
// 2canvas // 2canvas
// handleevent(fabriccanvas.value, imgarr) // handleevent(fabriccanvas.value, imgarr)
// handleevent(fabriccanvas1.value, imgarr, 'two') // handleevent(fabriccanvas1.value, imgarr, 'two')
setToolStatus() // -(--)
}) })
// zdg: -- // zdg: --
const setToolStatus = () => { const setToolStatus = () => {
toolState.showBoardAll = false toolState.showBoardAll = false
} }
//
const handleMode = (vale,type)=>{
if(vale=='select'){
ispointer.value=true
}else{
ispointer.value=false
}
switch(vale) {
case 'select': //
canvasFabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
break
case 'brush': //
canvasFabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
canvasFabricVue.value.canvas.freeDrawingCursor = 'default'
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
canvas1FabricVue.value.canvas.freeDrawingCursor = 'default'
break
case 'eraser': //
canvasFabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
canvas1FabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
break
case 'clear': //
clearCanvas()
// canvas1FabricVue.value.history?.clean()
break
}
}
// canvas
const clearCanvas=()=>{
if(canvasFabricVue.value){
const objects = canvasFabricVue.value.canvas.getObjects();
objects.forEach((obj) => {
//
if (obj !== canvasFabricVue.value.canvas.backgroundImage) {
//
canvasFabricVue.value.canvas.remove(obj);
}
});
canvasFabricVue.value.canvas.renderAll();
}
if(canvas1FabricVue.value){
const objects = canvas1FabricVue.value.canvas.getObjects();
objects.forEach((obj) => {
//
if (obj !== canvas1FabricVue.value.canvas.backgroundImage) {
//
canvas1FabricVue.value.canvas.remove(obj);
}
});
canvas1FabricVue.value.canvas.renderAll();
}
}
const watchToolState=()=>{
if(toolState.showBoardAll){
setTimeout(() => {
toolState.showBoardAll=false
}, 200);
}
//
handleMode(toolState.model)
}
defineExpose({ defineExpose({
initPdf, initPdf,
initPdfone initPdfone,
savaDataStore
}) })
watchEffect(() => { watchEffect(() => {
console.log(toolState.model,'监听')
console.log(toolState.showBoardAll,'监听') watchToolState() //
// if( toolState.showBoardAll){
// setTimeout(() => {
// console.log('pdf :')
// toolState.showBoardAll=false
// }, 200);
// }
// if(toolState.model=='select'){
// toolState.showBoardAll=false
// }
// if(toolState.model!='select'){
// toolState.showBoardAll=false
// }
// console.log(toolState.model,toolState.showBoardAll)
// if(toolState.model!='select'){
// toolState.showBoardAll=false
// console.log(toolState.model)
// console.log( toolState.showBoardAll)
// }
}) })
</script> </script>
@ -316,6 +396,8 @@ watchEffect(() => {
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
overflow: hidden;
max-height: 100vh;
} }
.pdfAdnFabric { .pdfAdnFabric {
position: relative; position: relative;

View File

@ -115,6 +115,7 @@ export const createWindow = async (type, data) => {
win.type = type // 唯一标识 win.type = type // 唯一标识
win.show() win.show()
win.setFullScreen(true) // 设置窗口为全屏 win.setFullScreen(true) // 设置窗口为全屏
// win.webContents.openDevTools() // 打开调试工具
eventHandles(type, win) // 事件监听处理 eventHandles(type, win) // 事件监听处理
break break
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="pdfbox" ref="pdfbox"> <div class="pdfbox" ref="pdfbox">
<pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" /> <pdfCanvas v-if="isOnLoadShow" :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
<div class="pdf-btn"> <div class="pdf-btn">
<el-button <el-button
style="border-top-left-radius: 8px" style="border-top-left-radius: 8px"
@ -45,6 +45,8 @@ import {useToolState} from '@/store/modules/tool'
// } // }
pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs') pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
const toolState = useToolState(); const toolState = useToolState();
const route = useRoute();
const isOnLoadShow = ref(false) //
// //
const pdfObj = reactive({ const pdfObj = reactive({
numberOfPdf: 2, // numberOfPdf: 2, //
@ -53,7 +55,7 @@ const pdfObj = reactive({
bookId:null, bookId:null,
numPages: 1 // numPages: 1 //
}) })
const textbookId=ref(null) const textbookId=ref(null) //id
// //
const numPagesTotal = ref(0) const numPagesTotal = ref(0)
const pdfCanvaslist = ref(null) const pdfCanvaslist = ref(null)
@ -71,13 +73,13 @@ const navtopage = (type) => {
pdfCanvaslist.value.initPdf('rest') pdfCanvaslist.value.initPdf('rest')
} }
// //
const minimize = () => { const minimize = async () => {
await pdfCanvaslist.value.savaDataStore()
toolState.isPdfWin=false // toolState.isPdfWin=false
toolState.showBoardAll=true // // toolState.showBoardAll=true //
console.log(toolState.showBoardAll,"关闭") // console.log(toolState.showBoardAll,"")
ipcRenderer.invoke('tool-sphere:reset') //tool // // ipcRenderer.send('tool-sphere:reset') //tool
ipcRenderer.send('open-PDF:minimize') // ipcRenderer.send('open-PDF:minimize')
} }
const handleUpdate = (data) => { const handleUpdate = (data) => {
numPagesTotal.value = data numPagesTotal.value = data
@ -103,15 +105,14 @@ const switchPageMode = () => {
pdfCanvaslist.value.initPdf('rest') pdfCanvaslist.value.initPdf('rest')
} }
} }
onMounted(async () => { onMounted(async () => {
toolState.isPdfWin=true toolState.isPdfWin=true
console.log(toolState.showBoardAll,"c初始") console.log(toolState.showBoardAll,"c初始")
const route = useRoute();
textbookId.value = route.query.textbookId textbookId.value = route.query.textbookId
pdfObj.bookId=textbookId.value pdfObj.bookId=textbookId.value
getBookMarkById(textbookId.value).then(res=>{ getBookMarkById(textbookId.value).then(res=>{
pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data) pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
console.log(pdfObj.allPageData) isOnLoadShow.value=true
}) })
}) })
@ -130,13 +131,6 @@ const getUniqueArrayByLastOccurrence=(array)=> {
return resultArray; return resultArray;
} }
// watchEffect(() => {
// if(toolState.model=='select'){
// toolState.showBoardAll=false
// }
// console.log(toolState.model)
// })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>