zdg #105

Merged
zhengdegang merged 17 commits from zdg into main 2024-08-07 16:11:14 +08:00
5 changed files with 92 additions and 39 deletions
Showing only changes of commit db496ee154 - Show all commits

View File

@ -1,6 +1,6 @@
pdfAdnFabric<template> pdfAdnFabric<template>
<div class="canvasitem"> <div class="canvasitem">
<div class="pdfAdnFabric" id="pdfAdnFabric" @touchstart="handleTouchStart"> <div class="pdfAdnFabric" id="pdfAdnFabric" >
<!-- @touchmove="handleTouchMove" <!-- @touchmove="handleTouchMove"
@touchend="handleTouchEnd" @touchend="handleTouchEnd"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@ -26,13 +26,15 @@ import {
defineProps, defineProps,
defineExpose, defineExpose,
nextTick, nextTick,
defineEmits defineEmits,watchEffect
} from 'vue' } from 'vue'
// import { fabric } from 'fabric' // import { fabric } from 'fabric'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric' import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
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'
const toolState = useToolState();
const props = defineProps({ const props = defineProps({
pdfObj: { pdfObj: {
type: Object, type: Object,
@ -271,34 +273,37 @@ onMounted(async () => {
// handleevent(fabriccanvas.value, imgarr) // handleevent(fabriccanvas.value, imgarr)
// handleevent(fabriccanvas1.value, imgarr, 'two') // 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({ defineExpose({
initPdf, initPdf,
initPdfone 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

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

View File

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

View File

@ -6,8 +6,10 @@
</template> </template>
<script setup> <script setup>
// //
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch,defineExpose } from 'vue'
import {FabricVue, TYPES} from '@/plugins/fabric' import {FabricVue, TYPES} from '@/plugins/fabric'
import { useToolState } from '@/store/modules/tool'
const toolStore = useToolState()
const canvasRef = ref(null) // const canvasRef = ref(null) //
const props = defineProps({ const props = defineProps({
modelValue: String modelValue: String
@ -23,10 +25,13 @@ onMounted(async() => {
await FabricVue.initCanvas(canvasRef.value, option) 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) { switch(newVal) {
case 'select': // case 'select': //
FabricVue.handleMode(TYPES.ActionMode.OTHER) FabricVue.handleMode(TYPES.ActionMode.OTHER)
@ -39,10 +44,22 @@ watch(() => props.modelValue, (newVal, oldVal) => {
FabricVue.handleMode(TYPES.ActionMode.ERASE) FabricVue.handleMode(TYPES.ActionMode.ERASE)
break break
case 'clear': // case 'clear': //
FabricVue.history?.clean() if(oldVal){
emit('update:modelValue', oldVal) FabricVue.history?.clean()
emit('update:modelValue', oldVal)
}
break break
} }
}
//
watch(() => props.modelValue, (newVal, oldVal) => {
console.log(newVal, oldVal)
handleMode(newVal, oldVal)
})
//
defineExpose({
handleMode
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="warp-all"> <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"--> <!-- 底部工具栏 :style="dataPos.style"-->
<div class="tool-bottom-all" <div class="tool-bottom-all"
@mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)"> @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
@ -34,13 +34,13 @@ import vDrag from './directive/drag' // 自定义指令-拖拽
import { useToolState } from '@/store/modules/tool' import { useToolState } from '@/store/modules/tool'
const { ipcRenderer } = require('electron') // app使 const { ipcRenderer } = require('electron') // app使
// const ipcRenderer = { send: () => {} } // 使 // const ipcRenderer = { send: () => {} } // 使
const tabActive = ref('select') // const tabActive = ref('select') //
const isFold = ref(false) // const isFold = ref(false) //
const isDrag = ref(false) // const isDrag = ref(false) //
const dragtime = ref(0) // - const dragtime = ref(0) // -
const isShow = ref(false) const isShow = ref(false)
const toolStore = useToolState() const toolStore = useToolState()
const boardVueRef=ref(null) //
const btnList = [ // const btnList = [ //
{ label: '选择', value: 'select', icon: 'icon-mouse' }, { label: '选择', value: 'select', icon: 'icon-mouse' },
{ label: '画笔', value: 'brush', icon: 'icon-huabi' }, { label: '画笔', value: 'brush', icon: 'icon-huabi' },
@ -59,8 +59,7 @@ onMounted(() => {
}) })
// ==== === // ==== ===
const tabChange = (val) => { // tab-change const tabChange = (val) => { // tab-change
// console.log('xxxx:', val) if(!toolStore.isPdfWin) toolStore.showBoardAll = true
toolStore.showBoardAll = true
switch (val) { switch (val) {
case 'brush': // case 'brush': //
break break
@ -89,10 +88,25 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
const mouseChange = (bool) => { // 穿 const mouseChange = (bool) => { // 穿
let resBool = false let resBool = false
if (tabActive.value == 'select') resBool = !!bool 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(() => { // 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> </script>