pdf功能设置

src/renderer/src/components/pdf/index.vue

@@ -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.send('tool-sphere:reset') //重置tool状态
+      ipcRenderer.send('open-PDF:minimize')
+    })
+}
 const updatePage = (canvasobj) => {
   renderPage(canvasobj)
 }
@@ -236,9 +274,9 @@ const initPdfone = async () => {
 }
 onMounted(async () => {
   try {
+    // 获取页数
     const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
     numPagesTotal.value = pdf.numPages
-
     //   初始化fabriccanvas
     const option = { freeDrawingCursor: 'default' }
     const canvas1 = new fabricVue()
@@ -246,17 +284,15 @@ 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
     canvas1FabricVue.value = canvas2
     window.test = { canvas1, canvas2 }
     emit('update:numPagesTotal', pdf.numPages)
-
+    //加载接口数据 
     if (props.pdfObj.allPageData.length) {
       props.pdfObj.allPageData.forEach((a) => {
         if (a.pageNum == 1 || a.pageNum == 2) {
@@ -273,36 +309,79 @@ onMounted(async () => {
   // handleevent(fabriccanvas.value, imgarr)
   // handleevent(fabriccanvas1.value, imgarr, 'two')
 })
+// 判断元素是否加载完成 
+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);
+          }
+        });
 
-defineExpose({
+        canvas1FabricVue.value.canvas.renderAll();
-  initPdf,
+  }
-  initPdfone
+}
-})
+const watchToolState=()=>{
-watchEffect(() => {
+  if(toolState.showBoardAll){
-  
-  console.log(toolState.showBoardAll,'监听')
-  if( toolState.showBoardAll){
-    console.log('xczxcxzsdf')
     setTimeout(() => {
       toolState.showBoardAll=false
     }, 200);
   }
-  // if(toolState.model=='select'){
+  // 加载工具
-  //   toolState.showBoardAll=false
+  handleMode(toolState.model)
-  // }
-  // 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)
+defineExpose({
-  // }
+  initPdf,
-  
+  initPdfone,
+  savaDataStore
+})
+watchEffect(() => {
+  console.log(toolState.model,'监听')
+  watchToolState() //监听工具栏
 })
 </script>
 
@@ -312,6 +391,8 @@ watchEffect(() => {
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;
+  overflow: hidden;
+  max-height: 100vh;
 }
 .pdfAdnFabric {
   position: relative;

src/renderer/src/utils/tool.js

@@ -94,6 +94,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.send('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
@@ -103,15 +105,14 @@ const switchPageMode = () => {
     pdfCanvaslist.value.initPdf('rest')
   }
 }
-onMounted(async () => {
+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>

src/renderer/src/views/tool/sphere.vue

@@ -102,7 +102,6 @@ watchEffect(() => { // 监听
   isShow.value = !toolStore.isPdfWin&&toolStore.showBoardAll // 是否显示-画板
   if(!toolStore.isPdfWin && toolStore.showBoardAll){         //恢复进入页面前的状态
     // setTimeout(() => {
-    console.log('2222222222222222222')
        boardVueRef.value.handleMode(tabActive.value)
        setIgnore(false)
     // },0)