窗口根据控制

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

@@ -1,6 +1,6 @@
 pdfAdnFabric<template>
   <div class="canvasitem">
-    <div class="pdfAdnFabric" id="pdfAdnFabric" @touchstart="handleTouchStart">
+    <div class="pdfAdnFabric" id="pdfAdnFabric" >
       <!-- @touchmove="handleTouchMove"
             @touchend="handleTouchEnd"
             @mousedown="handleMouseDown"
@@ -26,13 +26,15 @@ import {
   defineProps,
   defineExpose,
   nextTick,
-  defineEmits
+  defineEmits,watchEffect
 } from 'vue'
 // import { fabric } from 'fabric'
 import { ElMessage } from 'element-plus'
 import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
 import { fabricVue, TYPES } from '@/plugins/fabric'
 import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
+import {useToolState} from '@/store/modules/tool'
+const toolState = useToolState();
 const props = defineProps({
   pdfObj: {
     type: Object,
@@ -271,34 +273,37 @@ onMounted(async () => {
   // handleevent(fabriccanvas.value, imgarr)
   // handleevent(fabriccanvas1.value, imgarr, 'two')
 })
-const handleTouchStart = (e) => {
-  console.log(e)
-}
 
-const handleTouchMove = (e) => {
-  console.log(e)
-}
-
-const handleTouchEnd = (e) => {
-  console.log(e)
-}
-
-const handleMouseDown = (e) => {
-  // console.log(e)
-}
-
-const handleMouseMove = (e) => {
-  // console.log(e)
-}
-
-const handleMouseUp = (e) => {
-  // console.log(e)
-}
 
 defineExpose({
   initPdf,
   initPdfone
 })
+watchEffect(() => {
+  
+  console.log(toolState.showBoardAll,'监听')
+  if( toolState.showBoardAll){
+    console.log('xczxcxzsdf')
+    setTimeout(() => {
+      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>
 
 <style lang="scss" scoped>

src/renderer/src/store/modules/tool.js

@@ -7,6 +7,7 @@ export const useToolState = defineStore('tool', {
   state: () => ({
     model: 'select', // 悬浮球-当前模式
     showBoardAll: false, // 全屏画板-是否显示
+    isPdfWin: false, // pdf窗口是否打开
   }),
   actions: {
   }

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

@@ -32,18 +32,19 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, reactive } from 'vue'
+import { ref, onMounted, watch, reactive,watchEffect ,onBeforeUnmount} from 'vue'
 import { useRoute } from 'vue-router';
 import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
 import pdfCanvas from '@/components/pdf/index.vue'
 import { getStaticUrl } from '@/utils/tool'
 const { ipcRenderer } = require('electron')
 import { getBookMarkById } from '@/api/eTextbook/index'
+import {useToolState} from '@/store/modules/tool'
 //  const getStaticUrl=(url)=>{
 //   return url
 //  }
 pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
-
+const toolState = useToolState();
 // 传过去的参数
 const pdfObj = reactive({
   numberOfPdf: 2, //显示几页
@@ -71,6 +72,11 @@ const navtopage = (type) => {
 }
 // 最小化窗口
 const minimize = () => {
+
+  toolState.isPdfWin=false
+  toolState.showBoardAll=true //恢复默认值
+  console.log(toolState.showBoardAll,"关闭")
+  // ipcRenderer.send('tool-sphere:reset') //重置tool状态
   ipcRenderer.send('open-PDF:minimize')
 }
 const handleUpdate = (data) => {
@@ -98,6 +104,8 @@ const switchPageMode = () => {
   }
 }
 onMounted(async () => {
+  toolState.isPdfWin=true
+  console.log(toolState.showBoardAll,"c初始")
   const route = useRoute();
   textbookId.value = route.query.textbookId
   pdfObj.bookId=textbookId.value
@@ -107,6 +115,8 @@ onMounted(async () => {
   })
 })
 
+
+
 //根据page去重
 const getUniqueArrayByLastOccurrence=(array)=> {
   const uniqueItems = array.reduce((acc, current) => {
@@ -120,7 +130,13 @@ 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/components/board.vue

@@ -6,8 +6,10 @@
 </template>
 <script setup>
 // 功能说明：画板
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch,defineExpose } from 'vue'
 import {FabricVue, TYPES} from '@/plugins/fabric'
+import { useToolState } from '@/store/modules/tool'
+const toolStore = useToolState()
 const canvasRef = ref(null) // 画布
 const props = defineProps({
   modelValue: String
@@ -23,10 +25,13 @@ onMounted(async() => {
     await FabricVue.initCanvas(canvasRef.value, option)
   }
 })
-
+const handleMode = (newVal, oldVal) => {
-// 监听
+  if(toolStore.isPdfWin){
-watch(() => props.modelValue, (newVal, oldVal) => {
+    if(newVal=='clear'){
-  // console.log(newVal, oldVal)
+      emit('update:modelValue', oldVal)
+    }
+    return
+  }
   switch(newVal) {
     case 'select':  // 选择模式
       FabricVue.handleMode(TYPES.ActionMode.OTHER)
@@ -39,10 +44,22 @@ watch(() => props.modelValue, (newVal, oldVal) => {
       FabricVue.handleMode(TYPES.ActionMode.ERASE)
       break
     case 'clear':   // 清空画布
+      if(oldVal){
         FabricVue.history?.clean()
         emit('update:modelValue', oldVal)
+      }
+      
       break
   }
+}
+// 监听
+watch(() => props.modelValue, (newVal, oldVal) => {
+  console.log(newVal, oldVal)
+  handleMode(newVal, oldVal)
+})
+// 暴露属性方法
+defineExpose({
+  handleMode
 })
 </script>
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="warp-all">
-    <board-vue v-model="tabActive" v-show="isShow"></board-vue>
+    <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
     <!-- 底部工具栏  :style="dataPos.style"-->
     <div class="tool-bottom-all"
       @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
@@ -34,13 +34,13 @@ import vDrag from './directive/drag' // 自定义指令-拖拽
 import { useToolState } from '@/store/modules/tool'
 const { ipcRenderer } = require('electron') // app使用
 // const ipcRenderer = { send: () => {} } // 网页测试使用
-
 const tabActive = ref('select') // 工具栏当前选中项
 const isFold = ref(false)       // 折叠工具栏
 const isDrag = ref(false)       // 开始拖拽
 const dragtime = ref(0)         // 拖拽时间-计算点击还是拖动
 const isShow = ref(false)
 const toolStore = useToolState()
+const boardVueRef=ref(null)     // 画板
 const btnList = [ // 工具栏按钮列表
   { label: '选择', value: 'select', icon: 'icon-mouse' },
   { label: '画笔', value: 'brush', icon: 'icon-huabi' },
@@ -59,8 +59,7 @@ onMounted(() => {
 })
 // ==== 方法 ===
 const tabChange = (val) => { // 切换tab-change
-  // console.log('xxxx:', val)
+  if(!toolStore.isPdfWin)  toolStore.showBoardAll = true
-  toolStore.showBoardAll = true
   switch (val) {
     case 'brush': // 画笔
       break
@@ -89,10 +88,25 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
 const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
   let resBool = false
   if (tabActive.value == 'select') resBool = !!bool
-  ipcRenderer.send('tool-sphere:set:ignore', resBool)
+  if (!isShow.value) resBool = !!bool
+  setIgnore(resBool)
 }
+const setIgnore = (bool) => { // 忽略鼠标穿透
+  ipcRenderer.send('tool-sphere:set:ignore', bool)
+}
+// // 监听画板状态
+// ipcRenderer.send('tool-sphere:reset', () => {
+  
+// })
 watchEffect(() => { // 监听
-  isShow.value = toolStore.showBoardAll // 是否显示-画板
+  isShow.value = !toolStore.isPdfWin&&toolStore.showBoardAll // 是否显示-画板
+  if(!toolStore.isPdfWin && toolStore.showBoardAll){         //恢复进入页面前的状态
+    // setTimeout(() => {
+    console.log('2222222222222222222')
+       boardVueRef.value.handleMode(tabActive.value)
+       setIgnore(false)
+    // },0)
+  }
 })
 </script>