窗口根据控制

This commit is contained in:
zhangxuelin 2024-08-07 09:23:07 +08:00
parent a6fff59601
commit db496ee154
5 changed files with 92 additions and 39 deletions

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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)
}
})
//
watch(() => props.modelValue, (newVal, oldVal) => {
// console.log(newVal, oldVal)
const handleMode = (newVal, oldVal) => {
if(toolStore.isPdfWin){
if(newVal=='clear'){
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>

View File

@ -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)
toolStore.showBoardAll = true
if(!toolStore.isPdfWin) 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>