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.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>
 
@@ -316,6 +396,8 @@ watchEffect(() => {
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;
+  overflow: hidden;
+  max-height: 100vh;
 }
 .pdfAdnFabric {
   position: relative;

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
     }

src/renderer/src/views/classBegins/index.vue

@@ -1,6 +1,6 @@
 <template>
   <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">
       <el-button
         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')
 const toolState = useToolState();
+const route = useRoute();
+const isOnLoadShow = ref(false) //加载完毕显示
 // 传过去的参数
 const pdfObj = reactive({
   numberOfPdf: 2, //显示几页
@@ -53,7 +55,7 @@ const pdfObj = reactive({
   bookId:null,
   numPages: 1 //当前页数
 })
-const textbookId=ref(null)
+const textbookId=ref(null) //书籍id
 // 总条数
 const numPagesTotal = ref(0)
 const pdfCanvaslist = ref(null)
@@ -71,13 +73,13 @@ const navtopage = (type) => {
   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) => {
   numPagesTotal.value = data
@@ -106,12 +108,11 @@ const switchPageMode = () => {
 onMounted(async () => { 
   toolState.isPdfWin=true
   console.log(toolState.showBoardAll,"c初始")
-  const route = useRoute();
   textbookId.value = route.query.textbookId
   pdfObj.bookId=textbookId.value
   getBookMarkById(textbookId.value).then(res=>{
     pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
-    console.log(pdfObj.allPageData)
+    isOnLoadShow.value=true
   })
 })
 
@@ -130,13 +131,6 @@ const getUniqueArrayByLastOccurrence=(array)=> {
 
   return resultArray;
 }
-// watchEffect(() => {
-//   if(toolState.model=='select'){
-//     toolState.showBoardAll=false
-
-//   }
-//   console.log(toolState.model) 
-// })
 </script>
 
 <style lang="scss" scoped>