diff --git a/src/renderer/src/components/pdf/index.vue b/src/renderer/src/components/pdf/index.vue index 652d57d..5c7cf13 100644 --- a/src/renderer/src/components/pdf/index.vue +++ b/src/renderer/src/components/pdf/index.vue @@ -26,7 +26,7 @@ import { defineProps, defineExpose, nextTick, - watchEffect + defineEmits,watchEffect } from 'vue' // import { fabric } from 'fabric' import { ElMessage } from 'element-plus' @@ -34,6 +34,8 @@ import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/util import { fabricVue, TYPES } from '@/plugins/fabric' import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index' import {useToolState} from '@/store/modules/tool' +const { ipcRenderer } = require('electron') + const toolState = useToolState(); const props = defineProps({ 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) => { renderPage(canvasobj) } @@ -236,9 +274,9 @@ const initPdfone = async () => { } onMounted(async () => { try { + // 创建canvas转化成图片 const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise numPagesTotal.value = pdf.numPages - // 初始化fabriccanvas const option = { freeDrawingCursor: 'default' } const canvas1 = new fabricVue() @@ -246,10 +284,8 @@ onMounted(async () => { // canvas1.boardConfig.mode= TYPES.ActionMode.ERASE await canvas1.initCanvas(fabriccanvas.value, option) canvas1.canvas.setWidth(window.innerWidth / 2 - 100) - // canvas1.canvas.isDrawingMode=false canvasFabricVue.value = canvas1 const canvas2 = new fabricVue() - canvas2.boardConfig.mode = TYPES.ActionMode.DRAW await canvas2.initCanvas(fabriccanvas1.value, option) canvas2.canvas.setWidth(window.innerWidth / 2 - 100) // canvas2.canvas.isDrawingMode=false @@ -269,44 +305,88 @@ onMounted(async () => { console.log(error) ElMessage.error('pdf文件错误') } + setToolStatus() // 监听2个canvas事件 // handleevent(fabriccanvas.value, imgarr) // handleevent(fabriccanvas1.value, imgarr, 'two') - setToolStatus() // 加载完后-(设置-底部工具栏-状态) }) // zdg: 设置-底部工具栏-状态 const setToolStatus = () => { 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 'erase': // 板擦模式 + 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({ initPdf, - initPdfone + initPdfone, + savaDataStore }) watchEffect(() => { - - console.log(toolState.showBoardAll,'监听') - // 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) - // } - + console.log(toolState.model,'监听') + watchToolState() //监听工具栏 }) @@ -316,6 +396,8 @@ watchEffect(() => { flex-wrap: wrap; width: 100%; justify-content: center; + overflow: hidden; + max-height: 100vh; } .pdfAdnFabric { position: relative; diff --git a/src/renderer/src/utils/tool.js b/src/renderer/src/utils/tool.js index ca7b212..09a1fb1 100644 --- a/src/renderer/src/utils/tool.js +++ b/src/renderer/src/utils/tool.js @@ -115,6 +115,7 @@ export const createWindow = async (type, data) => { win.type = type // 唯一标识 win.show() win.setFullScreen(true) // 设置窗口为全屏 + // win.webContents.openDevTools() // 打开调试工具 eventHandles(type, win) // 事件监听处理 break } diff --git a/src/renderer/src/views/classBegins/index.vue b/src/renderer/src/views/classBegins/index.vue index adbce55..188c790 100644 --- a/src/renderer/src/views/classBegins/index.vue +++ b/src/renderer/src/views/classBegins/index.vue @@ -1,6 +1,6 @@