zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

zdg #105

Merged
zhengdegang merged 17 commits from zdg into main 2024-08-07 16:11:14 +08:00
Conversation 0 Commits 17 Files Changed 16 +1173 -238
16 changed files with 1173 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/src/api/eTextbook/index.js Normal file
View File

@ -0,0 +1,35 @@
import request from '@/utils/request'
// 新增pdf圈点勾画
export const addsmartBookMark = (params) => {
return request({
url: '/smarttalk/bookMark/addSmartBookMark',
method: 'post',
data:params
})
}
// 修改pdf圈点勾画
export const updateSmartBookMarkContent = (params) => {
return request({
url: '/smarttalk/bookMark/updateSmartBookMarkContent',
method: 'post',
data:params
})
}
// 根据书id获取pdf圈点勾画
export const getBookMarkById = (bookId) => {
return request({
url: '/smarttalk/bookMark/' + bookId,
method: 'get'
})
}
//根据id删除对应页数
export function deleteBookMark(ids) {
return request({
url: '/smarttalk/bookMark/' + ids,
method: 'delete'
})
}

217
src/renderer/src/components/pdf/index copy.vue Normal file
View File

@ -0,0 +1,217 @@
<template>
<div class="canvasitem">
<div class="pdfAdnFabric" id="pdfAdnFabric">
<canvas id="pdf-fabric"></canvas>
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
</div>
</div>
</template>
<script setup >
import {
ref,
onMounted,
watch,
reactive,
nextTick,
} from 'vue'
import { fabric } from 'fabric'
import { ElMessage } from 'element-plus'
import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
const props = defineProps({
pdfObj: {
type: Object,
default: {
numberOfPdf: 2, //pdf数量 只有 1 2
pdfUrl: null,
numPages: 1
}
}
})
// canvas的所有数据
const canvsStore = reactive({
id: 'xxxx',
pageArr: []
})
const fabriccanvas = ref(null)
const fabriccanvas1 = ref(null)
// 页面总数
const numPagesTotal = ref(0)
const imgarr = ref([])
// 多个pdf的对象
const canvasNumbsValue = ref([])
const emit = defineEmits(['update:numPagesTotal'])
const renderPage = async (canvasobj) => {
if (canvasobj.page > numPagesTotal.value) return
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
// 渲染当前页
const page = await pdf.getPage(canvasobj.page)
var screenWidth = window.innerWidth/2-100;
var screenHeight = window.innerHeight;
const viewport = page.getViewport({ scale:2})
const canvasElement = canvasobj.canvas
canvasElement.width = viewport.width
canvasElement.height = viewport.height
const renderContext = {
canvasContext: canvasobj.context,
viewport: viewport
}
page.render(renderContext).promise.then((res) => {
const img = document.createElement('img')
img.src = canvasobj.canvas.toDataURL('image/png')
canvasobj.canvas.remove()
imgarr.value.push({ src: img.src, page: canvasobj.page, JSONdata: {}, index: canvasobj.index })
img.onload = () => {
// 在这里执行图像加载完成后的操作
// 根据传过来的pdf对象 判断改渲染哪一个fabric
if (props.pdfObj.numberOfPdf == 2) {
if (canvasobj.index == 0) {
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
} else {
fabriccanvas1.value.setWidth(screenWidth)
fabriccanvas1.value.setHeight(screenHeight)
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
}
} else {
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
}
// console.log(imgarr.value)
img.remove()
}
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
canvsStore.pageArr.forEach((item) => {
if (item.page == canvasobj.page) {
imgarr.value.forEach((img) => {
if (img.page == canvasobj.page) {
img.JSONdata = item.JSONdata
}
})
}
})
})
}
const updatePage = (canvasobj) => {
renderPage(canvasobj)
}
const loadPdf = async (canvasobj) => {
updatePage(canvasobj)
}
const initPdf = async (type = 'default') => {
// 保存数据
savecanvsStore(imgarr, canvsStore)
// initcanvasdata(fabriccanvas)
// initcanvasdata(fabriccanvas1)
// 单页模式
if (type == 'restone') {
// 清除 canvas 上的所有对象
fabriccanvas1.value.clear()
// 释放 canvas 的资源
fabriccanvas1.value.dispose()
}
// 清除现有 canvas 元素的内容
canvasNumbsValue.value.forEach((canvasObj) => {
const context = canvasObj.context
context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height)
})
// 清除所有对象
imgarr.value = []
canvasNumbsValue.value = []
if (props.pdfObj.pdfUrl) {
await nextTick() // 确保 DOM 渲染完成
if (props.pdfObj.numberOfPdf == 1) {
canvasNumbsValue.value = [{}]
const canvasElement = document.createElement('canvas')
canvasNumbsValue.value[0].canvas = canvasElement
canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d')
canvasNumbsValue.value[0].page = props.pdfObj.numPages
canvasNumbsValue.value[0].index = 0
await loadPdf(canvasNumbsValue.value[0])
} else {
for (var i = 0; i < props.pdfObj.numberOfPdf; i++) {
canvasNumbsValue.value[i] = {}
const canvasElement = document.createElement('canvas')
canvasNumbsValue.value[i].canvas = canvasElement
canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d')
// 设置页数
if (i == 0) {
canvasNumbsValue.value[i].page = props.pdfObj.numPages
} else {
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
}
canvasNumbsValue.value[i].index = i
// 加载FabricVue
await loadPdf(canvasNumbsValue.value[i])
}
}
}
}
const initPdfone = async () => {
setTimeout(() => {
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
fabriccanvas1.value.isDrawingMode = true
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas1.value.freeDrawingCursor = 'default'
fabriccanvas1.value.setWidth(860)
handleevent(fabriccanvas1.value, imgarr, 'two')
}, 0)
initPdf('addOnePage')
}
onMounted(async () => {
try {
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
numPagesTotal.value = pdf.numPages
// console.log(pdf)
// 初始化fabriccanvas
fabriccanvas.value = new fabric.Canvas('pdf-fabric')
fabriccanvas.value.setWidth(860)
fabriccanvas.value.isDrawingMode = true
fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas.value.freeDrawingCursor = 'default'
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
fabriccanvas1.value.isDrawingMode = true
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas1.value.freeDrawingCursor = 'default'
fabriccanvas1.value.setWidth(860)
emit('update:numPagesTotal', pdf.numPages)
initPdf()
} catch (error) {
console.log(error)
ElMessage.error('pdf文件错误')
}
// 监听2个canvas事件
handleevent(fabriccanvas.value, imgarr)
handleevent(fabriccanvas1.value, imgarr, 'two')
})
defineExpose({
initPdf,
initPdfone
})
</script>
<style lang="scss" scoped>
.canvasitem {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}
.pdfAdnFabric {
position: relative;
display: flex;
height: 100vh;
align-items: center;
:deep(> div:nth-of-type(1)) {
margin-right: 10px;
}
}
</style>

312
src/renderer/src/components/pdf/index.vue
View File

@ -1,8 +1,18 @@
<template>
pdfAdnFabric<template>
<div class="canvasitem">
<div class="pdfAdnFabric" id="pdfAdnFabric" >
<canvas id="pdf-fabric"></canvas>
<canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
<!-- @touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp" -->
<div :class="ispointer ? 'ispointer' : ''">
<canvas ref="fabriccanvas" />
</div>
<!-- style="pointer-events: none;" -->
<div v-if="props.pdfObj.numberOfPdf === 2" :class="ispointer ? 'ispointer' : ''">
<canvas ref="fabriccanvas1" />
</div>
</div>
</div>
</template>
@ -16,12 +26,17 @@ import {
defineProps,
defineExpose,
nextTick,
defineEmits
defineEmits,watchEffect
} from 'vue'
import { fabric } from 'fabric'
// 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 { ipcRenderer } = require('electron')
const toolState = useToolState();
const props = defineProps({
pdfObj: {
type: Object,
@ -32,13 +47,16 @@ const props = defineProps({
}
}
})
const ispointer = ref(false) //是否画笔模式
// canvas的所有数据
const canvsStore = reactive({
id: 'xxxx',
pageArr: []
})
const fabriccanvas = ref(null)
const fabriccanvas1 = ref(null)
const canvasFabricVue = ref(null)
const canvas1FabricVue = ref(null)
// 页面总数
const numPagesTotal = ref(0)
const imgarr = ref([])
@ -50,8 +68,8 @@ const renderPage = async (canvasobj) => {
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
// 渲染当前页
const page = await pdf.getPage(canvasobj.page)
var screenWidth = window.innerWidth/2-100;
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth / 2 - 100
var screenHeight = window.innerHeight
const viewport = page.getViewport({ scale: 2 })
const canvasElement = canvasobj.canvas
@ -61,6 +79,8 @@ const renderPage = async (canvasobj) => {
canvasContext: canvasobj.context,
viewport: viewport
}
// console.log(renderContext,22222222222222222222)
page.render(renderContext).promise.then((res) => {
const img = document.createElement('img')
img.src = canvasobj.canvas.toDataURL('image/png')
@ -71,33 +91,68 @@ const renderPage = async (canvasobj) => {
// 根据传过来的pdf对象 判断改渲染哪一个fabric
if (props.pdfObj.numberOfPdf == 2) {
if (canvasobj.index == 0) {
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
canvasFabricVue.value.canvas.setWidth(screenWidth)
canvasFabricVue.value.canvas.setHeight(screenHeight)
// updateCanvasBackgroundImage(canvasFabricVue,img)
displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
} else {
fabriccanvas1.value.setWidth(screenWidth)
fabriccanvas1.value.setHeight(screenHeight)
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
canvas1FabricVue.value.canvas.setWidth(screenWidth)
canvas1FabricVue.value.canvas.setHeight(screenHeight)
displayData(canvas1FabricVue, canvsStore, canvasobj, fabric, img)
}
} else {
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
canvasFabricVue.value.canvas.setHeight(screenHeight)
displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
}
// console.log(imgarr.value)
img.remove()
}
// 判断imgarr的JSONdata在canvsStore.pageArr有没有
canvsStore.pageArr.forEach((item) => {
if (item.page == canvasobj.page) {
imgarr.value.forEach((img) => {
if (img.page == canvasobj.page) {
img.JSONdata = item.JSONdata
}
// canvsStore.pageArr.forEach((item) => {
// if (item.page == canvasobj.page) {
// imgarr.value.forEach((img) => {
// if (img.page == canvasobj.page) {
// img.JSONdata = item.JSONdata
// }
// })
// }
// })
})
}
// 保存数据
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) => {
@ -108,16 +163,54 @@ const loadPdf = async (canvasobj) => {
}
const initPdf = async (type = 'default') => {
imgarr.value.forEach((a) => {
if (a.index == 0) {
a.JSONdata = canvasFabricVue.value.canvas.toJSON()
} else {
a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
}
})
if (type != 'default') {
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=>{
getBookMarkById(props.pdfObj.bookId).then(res=>{
const pageArr=getUniqueArrayByLastOccurrence(res.data)
canvsStore.pageArr=[]
pageArr.forEach((a) => {
canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
})
})
})
}
// 保存数据
savecanvsStore(imgarr, canvsStore)
// initcanvasdata(fabriccanvas)
// initcanvasdata(fabriccanvas1)
// 单页模式
if (type == 'restone') {
// 清除 canvas 上的所有对象
fabriccanvas1.value.clear()
// 释放 canvas 的资源
fabriccanvas1.value.dispose()
// savecanvsStore(imgarr, canvsStore)
if (props.pdfObj.numberOfPdf == 1) {
// imgarr.value[0]
canvasFabricVue.value.history.clean()
} else {
canvasFabricVue.value.history.clean()
canvas1FabricVue.value.history.clean()
}
// 清除现有 canvas 元素的内容
canvasNumbsValue.value.forEach((canvasObj) => {
@ -149,7 +242,6 @@ const initPdf = async (type = 'default') => {
} else {
canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
}
canvasNumbsValue.value[i].index = i
// 加载FabricVue
await loadPdf(canvasNumbsValue.value[i])
@ -157,47 +249,144 @@ const initPdf = async (type = 'default') => {
}
}
}
//根据page去重
const getUniqueArrayByLastOccurrence=(array)=> {
const uniqueItems = array.reduce((acc, current) => {
// 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
acc.set(current.pageNum, current);
return acc;
}, new Map());
// 将 Map 的值转换回数组
const resultArray = Array.from(uniqueItems.values());
return resultArray;
}
const initPdfone = async () => {
setTimeout(() => {
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
fabriccanvas1.value.isDrawingMode = true
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas1.value.freeDrawingCursor = 'default'
fabriccanvas1.value.setWidth(595)
handleevent(fabriccanvas1.value, imgarr, 'two')
setTimeout(async () => {
const option = { freeDrawingCursor: 'default' }
const canvas2 = new fabricVue()
await canvas2.initCanvas(fabriccanvas1.value, option)
canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
canvas1FabricVue.value = canvas2
await initPdf('addOnePage')
}, 0)
initPdf('addOnePage')
}
onMounted(async () => {
try {
// 创建canvas转化成图片
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
numPagesTotal.value = pdf.numPages
// console.log(pdf)
// 初始化fabriccanvas
fabriccanvas.value = new fabric.Canvas('pdf-fabric')
fabriccanvas.value.setWidth(595)
fabriccanvas.value.isDrawingMode = true
fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas.value.freeDrawingCursor = 'default'
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
fabriccanvas1.value.isDrawingMode = true
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas1.value.freeDrawingCursor = 'default'
fabriccanvas1.value.setWidth(595)
const option = { freeDrawingCursor: 'default' }
const canvas1 = new fabricVue()
// canvas1.boardConfig.mode= TYPES.ActionMode.OTHER
// canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
await canvas1.initCanvas(fabriccanvas.value, option)
canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
canvasFabricVue.value = canvas1
const canvas2 = new fabricVue()
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)
initPdf()
if (props.pdfObj.allPageData.length) {
props.pdfObj.allPageData.forEach((a) => {
if (a.pageNum == 1 || a.pageNum == 2) {
canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
}
})
}
await initPdf()
} catch (error) {
console.log(error)
ElMessage.error('pdf文件错误')
}
setToolStatus()
// 监听2个canvas事件
handleevent(fabriccanvas.value, imgarr)
handleevent(fabriccanvas1.value, imgarr, 'two')
// handleevent(fabriccanvas.value, imgarr)
// handleevent(fabriccanvas1.value, imgarr, 'two')
})
// 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,'监听')
watchToolState() //监听工具栏
})
</script>
@ -207,6 +396,8 @@ defineExpose({
flex-wrap: wrap;
width: 100%;
justify-content: center;
overflow: hidden;
max-height: 100vh;
}
.pdfAdnFabric {
position: relative;
@ -217,4 +408,7 @@ defineExpose({
margin-right: 10px;
}
}
.ispointer {
pointer-events: none;
}
</style>

1
src/renderer/src/plugins/fabric/index.js
View File

@ -1615,6 +1615,7 @@ export class fabricVue {
break
case TYPES.ActionMode.OTHER: // 其他(工具选择)
this.canvas.isDrawingMode = false
objectSet.selectable = false
this.canvas.freeDrawingCursor = 'default'
break
default:

10
src/renderer/src/plugins/shareStore.js
View File

@ -1,7 +1,8 @@
/**
* 共享数据状态-多窗口
*/
const { ipcRenderer } = require('electron') // app使用
const isNode = typeof require !== 'undefined' // 是否支持node函数
const { ipcRenderer } = isNode?require('electron'):{} // app使用
export function shareStorePlugin({store}) {
store.$subscribe(() => { // 自动同步
// 在存储变化的时候执行
@ -19,15 +20,16 @@ export function shareStorePlugin({store}) {
function stateSync(store) {
const storeName = store.$id
const jsonStr = JSON.stringify(store.$state)
// console.log('state-change', jsonStr, storeName)
// 通知主线程更新
ipcRenderer.invoke('pinia-state-change', storeName, jsonStr)
ipcRenderer?.invoke('pinia-state-change', storeName, jsonStr)
}
// 同步数据-接收主线程消息
function stateChange(store) {
const storeName = store.$id
ipcRenderer.on('pinia-state-set', (e, sName, jsonStr) => {
ipcRenderer?.on('pinia-state-set', (e, sName, jsonStr) => {
if (sName == storeName) { // 更新对应数据
console.log('state-set', jsonStr, sName)
// console.log('state-set', jsonStr, sName)
const curJson = JSON.stringify(store.$state) // 当前数据
const isUp = curJson != jsonStr // 不同的时候才写入，不然会导致触发数据变化监听，导致死循环
if (!isUp) return

2
src/renderer/src/store/modules/tool.js
View File

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

133
src/renderer/src/utils/pdfAndFabric copy.js Normal file
View File

@ -0,0 +1,133 @@
// 所有事件
export function handleevent(canvas, imgarr, type = 'defalut') {
// // 鼠标按下
// canvas.on('mouse:down', function (e) {})
// // // 监听鼠标移动事件
// // canvas.on('mouse:move', (options) => {
// // console.log('Mouse move event:', options);
// // });
// // 监听鼠标释放事件
// canvas.on('mouse:up', (options) => {
// //判断是点击的哪一个
// if (type == 'defalut') {
// if (imgarr.value[0].index == 0) {
// imgarr.value[0].JSONdata = canvas.toJSON()
// }
// if (imgarr.value[1]?.index == 0) {
// imgarr.value[1].JSONdata = canvas.toJSON()
// }
// } else {
// if (imgarr.value[0].index == 1) {
// imgarr.value[0].JSONdata = canvas.toJSON()
// }
// if (imgarr.value[1]?.index == 1) {
// imgarr.value[1].JSONdata = canvas.toJSON()
// }
// }
// console.log(imgarr.value)
// })
}
// 保存数据
export function savecanvsStore(imgarr, canvsStore) {
// canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
}
// 重显数据
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
// // 初始化
// if (!canvsStore.pageArr.length) {
// fabric.Image.fromURL(img.src, (img) => {
// img.set({
// left: 0,
// top: 0,
// scaleX: canvas.value.width / img.width,
// scaleY: canvas.value.height / img.height
// })
// canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
// })
// return
// }
// canvsStore.pageArr.forEach((item) => {
// //初始化
// if (item.page == canvasobj.page) {
// // canvas.value.clear() // 清除 Canvas
// // console.log(item.JSONdata, '找到一样的数据')
// canvas.value.loadFromJSON(item.JSONdata, () => {
// // 在所有对象加载完成后重新渲染画布
// canvas.value.renderAll.bind(canvas.value)
// canvas.value.renderAll()
// // requestAnimationFrame(() => {
// // // 渲染所有对象
// // })
// })
// } else {
// // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
// // // 清除 Canvas
// canvas.value.clear()
// requestAnimationFrame(function () {
// fabric.Image.fromURL(img.src, (img) => {
// img.set({
// left: 0,
// top: 0,
// scaleX: canvas.value.width / img.width,
// scaleY: canvas.value.height / img.height
// })
// canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
// })
// // 渲染所有对象
// canvas.value.renderAll.bind(canvas.value)
// canvas.value.renderAll()
// })
// }
// })
}
//page 一样替换
const mergeAndReplace = (arr1, arr2) => {
// // 用于存储替换后的数组
// const resultArray = array1.map(item1 => {
// // 在 array2 中查找 page 相同的对象
// const replacement = array2.find(item2 => item2.page == item1.page);
// // 如果找到替换对象，则返回替换对象，否则返回原对象
// return replacement ? replacement : item1;
// });
// // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
// array2.forEach(item2 => {
// const existsInArray1 = array1.some(item1 => item1.page == item2.page);
// if (!existsInArray1) {
// resultArray.push(item2);
// }
// });
// return resultArray;
// 创建一个映射，将 arr2 中的对象按 page 属性存储
let map = new Map(arr2.map((item) => [item.page, item]))
// 使用 map 替换 arr1 中相应 page 的对象，并添加 arr2 中的对象
arr1 = arr1.map((item) => (map.has(item.page) ? map.get(item.page) : item))
// 将 map 中存在但 arr1 中不存在的对象添加到 arr1
for (let [page, obj] of map) {
if (!arr1.some((item) => item.page === page)) {
arr1.push(obj)
}
}
return arr1
}
// 初始化数据
export function initcanvasdata(canvas) {
canvas.value.clear() // 清除 Canvas
// 设置画布的背景色或其他属性
canvas.value.backgroundColor = 'rgba(255, 255, 255, 1)' // 白色背景
// 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
requestAnimationFrame(function () {
// 渲染所有对象
canvas.value.renderAll.bind(canvas.value)
})
}

227
src/renderer/src/utils/pdfAndFabric.js
View File

@ -1,108 +1,187 @@
// 所有事件
export function handleevent(canvas, imgarr, type = 'defalut') {
// 鼠标按下
canvas.on('mouse:down', function (e) {})
// // 监听鼠标移动事件
// canvas.on('mouse:move', (options) => {
// console.log('Mouse move event:', options);
// });
// // 鼠标按下
// canvas.on('mouse:down', function (e) {})
// // // 监听鼠标移动事件
// // canvas.on('mouse:move', (options) => {
// // console.log('Mouse move event:', options);
// // });
// 监听鼠标释放事件
canvas.on('mouse:up', (options) => {
//判断是点击的哪一个
if (type == 'defalut') {
if (imgarr.value[0].index == 0) {
imgarr.value[0].JSONdata = canvas.toJSON()
}
if (imgarr.value[1]?.index == 0) {
imgarr.value[1].JSONdata = canvas.toJSON()
}
} else {
if (imgarr.value[0].index == 1) {
imgarr.value[0].JSONdata = canvas.toJSON()
}
if (imgarr.value[1]?.index == 1) {
imgarr.value[1].JSONdata = canvas.toJSON()
}
}
console.log(imgarr.value)
// // 监听鼠标释放事件
// canvas.on('mouse:up', (options) => {
// //判断是点击的哪一个
// if (type == 'defalut') {
// if (imgarr.value[0].index == 0) {
// imgarr.value[0].JSONdata = canvas.toJSON()
// }
// if (imgarr.value[1]?.index == 0) {
// imgarr.value[1].JSONdata = canvas.toJSON()
// }
// } else {
// if (imgarr.value[0].index == 1) {
// imgarr.value[0].JSONdata = canvas.toJSON()
// }
// if (imgarr.value[1]?.index == 1) {
// imgarr.value[1].JSONdata = canvas.toJSON()
// }
// }
// console.log(imgarr.value)
})
// })
}
// 保存数据
export function savecanvsStore(imgarr, canvsStore) {
canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
}
// 重显数据
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
// 初始化
if (!canvsStore.pageArr.length) {
fabric.Image.fromURL(img.src, (img) => {
img.set({
left: 0,
top: 0,
scaleX: canvas.value.width / img.width,
scaleY: canvas.value.height / img.height
})
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
})
const canvas = FabricVue.value.canvas
if (!canvas) {
return
}
canvsStore.pageArr.forEach((item) => {
//初始化
if (item.page == canvasobj.page) {
// canvas.value.clear() // 清除 Canvas
// console.log(item.JSONdata, '找到一样的数据')
canvas.value.loadFromJSON(item.JSONdata, () => {
// 在所有对象加载完成后重新渲染画布
canvas.value.renderAll.bind(canvas.value)
canvas.value.renderAll()
// requestAnimationFrame(() => {
// // 渲染所有对象
if (!canvsStore.pageArr.length) {
fabric.Image.fromURL(
img.src,
(image) => {
image.set({
left: 0,
top: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
erasable: false // 不允许擦拭
})
// FabricVue.setBackgroundImage(image, FabricVue.renderAll.bind(FabricVue))
// setBackgroundImage(image,FabricVue)
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
// })
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
{crossOrigin: 'anonymous'}
)
return
}
const isfind=findObjectByPage(canvsStore.pageArr,canvasobj.page)
if(isfind){
const canvdata={
objects:JSON.parse(isfind.JSONdata),
version: "5.3.0"
}
requestAnimationFrame(function () {
canvas.loadFromJSON(canvdata, () => {
// 在所有对象加载完成后重新渲染画布
// Utils.handleCanvasJSONLoaded(canvas)
canvas.requestRenderAll() // 批量重绘
})
fabric.Image.fromURL(
img.src,
(image) => {
image.set({
left: 0,
top: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
selectable: false,
evented: false,
erasable: false // 不允许擦拭
})
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
{crossOrigin: 'anonymous'}
)
// 渲染所有对象
canvas.requestRenderAll() // 批量重绘
})
}else{
// 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
// // 清除 Canvas
canvas.value.clear()
// canvas.clear()
requestAnimationFrame(function () {
fabric.Image.fromURL(img.src, (img) => {
img.set({
fabric.Image.fromURL(
img.src,
(image) => {
image.set({
left: 0,
top: 0,
scaleX: canvas.value.width / img.width,
scaleY: canvas.value.height / img.height
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
selectable: false,
evented: false,
erasable: false // 不允许擦拭
})
canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
// canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
canvas.setBackgroundImage(image, () => {
canvas.renderAll.bind(canvas)
FabricVue.value.render()
})
},
{crossOrigin: 'anonymous'}
)
// 渲染所有对象
canvas.value.renderAll.bind(canvas.value)
canvas.value.renderAll()
canvas.requestRenderAll() // 批量重绘
})
}
})
// canvsStore.pageArr.forEach((item) => {
// //初始化
// if (item.page == canvasobj.page) {
// // item.JSONdata
// canvas.loadFromJSON(JSON.parse(item.JSONdata), () => {
// // 在所有对象加载完成后重新渲染画布
// // Utils.handleCanvasJSONLoaded(canvas)
// canvas.requestRenderAll() // 批量重绘
// })
// } else {
// // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
// // // 清除 Canvas
// // canvas.clear()
// requestAnimationFrame(function () {
// fabric.Image.fromURL(
// img.src,
// (image) => {
// image.set({
// left: 0,
// top: 0,
// scaleX: canvas.width / img.width,
// scaleY: canvas.height / img.height,
// selectable: false,
// evented: false,
// erasable: false // 不允许擦拭
// })
// // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
// canvas.setBackgroundImage(image, () => {
// canvas.renderAll.bind(canvas)
// FabricVue.value.render()
// })
// },
// {crossOrigin: 'anonymous'}
// )
// // 渲染所有对象
// canvas.requestRenderAll() // 批量重绘
// })
// }
// })
}
// 找到page一样的
const findObjectByPage=(array, page)=> {
const foundObject = array.find(obj => obj.page === page);
return foundObject || false;
}
//page 一样替换
const mergeAndReplace = (arr1, arr2) => {
// // 用于存储替换后的数组
// const resultArray = array1.map(item1 => {
// // 在 array2 中查找 page 相同的对象
// const replacement = array2.find(item2 => item2.page == item1.page);
// // 如果找到替换对象，则返回替换对象，否则返回原对象
// return replacement ? replacement : item1;
// });
// // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
// array2.forEach(item2 => {
// const existsInArray1 = array1.some(item1 => item1.page == item2.page);
// if (!existsInArray1) {
// resultArray.push(item2);
// }
// });
// return resultArray;
// 创建一个映射，将 arr2 中的对象按 page 属性存储
let map = new Map(arr2.map((item) => [item.page, item]))

48
src/renderer/src/utils/tool.js
View File

@ -6,14 +6,17 @@
// Remote.app.getAppPath() E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar
// path.join(__dirname) 根目录 E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar\out\renderer
const path = require('path')
const Remote = require('@electron/remote')
const { ipcRenderer } = require('electron')
const isNode = typeof require !== 'undefined' // 是否支持node函数
const path = isNode?require('path'):{}
const Remote = isNode?require('@electron/remote'):{}
const { ipcRenderer } = isNode?require('electron'):window.electron || {}
// 常用变量
const BaseUrl = process.env['ELECTRON_RENDERER_URL']+'/#'
const isDev = process.env.NODE_ENV !== 'production'
const BaseUrl = isNode?process.env['ELECTRON_RENDERER_URL']+'/#':''
const isDev = isNode?process.env.NODE_ENV !== 'production':''
// 暴露Remote中的属性
export const ipcMain = Remote?.ipcMain || {}
/**
* 获取静态资源，开发和生产环境
* @param {*} url
@ -39,15 +42,32 @@ export const getStaticUrl = (url = '', type = 'app', exitPath = '', isFile = fal
* url:路由地址,width:窗口宽度,height:窗口高度,option:自定义选项
* @returns
*/
export function ipcMsgSend(key, data) {
export function ipcMsgSend(key, data, type) {
if (type == 'old') {
return new Promise((resolve) => {
// 返回结果-监听
ipcRenderer.once(`${key}-reply`, (e, res) => {
ipcRenderer?.once(`${key}-reply`, (e, res) => {
resolve(res)
})
// 发送消息
ipcRenderer.send(key, data)
ipcRenderer?.send(key, data)
})
} else if (type == 'send') { // 单独发送
ipcRenderer?.send(key, data)
} else { // 新版本-默认
return ipcRenderer?.invoke(key, data)
}
}
/**
* @description 封装ipcRenderer事件监听
* @param {*} fn on once handle invoke
* @param {*} key
* @param {Function} cb 回调函数
* @returns
*/
export function ipcHandle(fn,key, cb) {
return ipcRenderer[fn](key, cb)
// return ipcRenderer?.[fn]?.(key, cb)
}
/**
* 创建-窗口 调用该方法
@ -89,11 +109,13 @@ export const createWindow = async (type, data) => {
resizable: true, // 禁止窗口大小缩放
alwaysOnTop: false, // 窗口是否总是显示在其他窗口之前
}
data.isConsole = true // 是否开启控制台
data.option = {...defOption, ...option}
const win = await toolWindow(data)
win.type = type // 唯一标识
win.show()
win.setFullScreen(true) // 设置窗口为全屏
// win.webContents.openDevTools() // 打开调试工具
eventHandles(type, win) // 事件监听处理
break
}
@ -145,7 +167,7 @@ export function toolWindow({url, isConsole, option={}}) {
// 内部监听器-是否打印
if (!!isConsole) {
win.webContents.on('console-message', (e,leve,m,lin,s) => {
console.log(m)
console.log(`[${win.type}]`,m)
})
}
})
@ -173,13 +195,17 @@ const eventHandles = (type, win) => {
case 'tool-sphere': { // 创建-悬浮球
// 监听设置穿透
const setIgnore = (_, ignore) => {win.setIgnoreMouseEvents(ignore, {forward: true})}
Remote.ipcMain.on('tool-sphere:set:ignore', setIgnore)
Remote.ipcMain.handle('tool-sphere:set:ignore', setIgnore) // 异步
// 关闭窗口
Remote.ipcMain.once('tool-sphere:close', () => { win&&win.destroy() })
// 放大监听-测试
Remote.ipcMain.once('maximize-window', () => {win&&win.destroy()})
const on = {
onClosed: () => {Remote.ipcMain.off('tool-sphere:set:ignore', setIgnore)}
onClosed: () => {
Remote.ipcMain.removeHandler('tool-sphere:set:ignore', setIgnore)
Remote.ipcMain.removeHandler('tool-sphere:reset')
// Remote.ipcMain.removeAllListeners() // 移除所有监听事件
}
}
publicMethods(on) // 加载公共方法
break}

60
src/renderer/src/views/classBegins/index.vue
View File

@ -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"
@ -32,20 +32,30 @@
</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 route = useRoute();
const isOnLoadShow = ref(false) //加载完毕显示
// 传过去的参数
const pdfObj = reactive({
numberOfPdf: 2, //显示几页
pdfUrl: getStaticUrl('aaa.pdf', 'user', 'selfFile', true),
allPageData:[],
bookId:null,
numPages: 1 //当前页数
})
const textbookId=ref(null) //书籍id
// 总条数
const numPagesTotal = ref(0)
const pdfCanvaslist = ref(null)
@ -60,17 +70,22 @@ const navtopage = (type) => {
pdfObj.numPages += num
}
if (pdfObj.numPages > numPagesTotal.value) return
pdfCanvaslist.value.initPdf()
pdfCanvaslist.value.initPdf('rest')
}
// 最小化窗口
const minimize = () => {
ipcRenderer.send('open-PDF:minimize')
const minimize = async () => {
await pdfCanvaslist.value.savaDataStore()
// toolState.isPdfWin=false
// toolState.showBoardAll=true //恢复默认值
// console.log(toolState.showBoardAll,"关闭")
// // ipcRenderer.send('tool-sphere:reset') //重置tool状态
// ipcRenderer.send('open-PDF:minimize')
}
const handleUpdate = (data) => {
numPagesTotal.value = data
if (numPagesTotal.value == 1) {
pdfObj.numberOfPdf = 1
pdfCanvaslist.value.initPdf('restone')
pdfCanvaslist.value.initPdf('rest')
}
}
// 单双页切换
@ -87,10 +102,35 @@ const switchPageMode = () => {
} else {
// 多页切单页
pdfObj.numberOfPdf = 1
pdfCanvaslist.value.initPdf('restone')
pdfCanvaslist.value.initPdf('rest')
}
}
onMounted(async () => {})
onMounted(async () => {
toolState.isPdfWin=true
console.log(toolState.showBoardAll,"c初始")
textbookId.value = route.query.textbookId
pdfObj.bookId=textbookId.value
getBookMarkById(textbookId.value).then(res=>{
pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
isOnLoadShow.value=true
})
})
//根据page去重
const getUniqueArrayByLastOccurrence=(array)=> {
const uniqueItems = array.reduce((acc, current) => {
// 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
acc.set(current.pageNum, current);
return acc;
}, new Map());
// 将 Map 的值转换回数组
const resultArray = Array.from(uniqueItems.values());
return resultArray;
}
</script>
<style lang="scss" scoped>

2
src/renderer/src/views/classManage/aside.vue
View File

@ -19,7 +19,7 @@
</template>
<script setup>
import {ref,defineProps,defineEmits} from "vue";
import {ref} from "vue";
const activeIndex = ref('0')
const props = defineProps({
classList:{

14
src/renderer/src/views/prepare/index.vue
View File

@ -72,6 +72,7 @@ import uploadDialog from '@/components/upload-dialog/index.vue'
import { Refresh } from '@element-plus/icons-vue'
import uploaderState from '@/store/modules/uploader'
import useUserStore from '@/store/modules/user'
import { useToolState } from '@/store/modules/tool'
import MoveFile from '@/components/move-file/index.vue'
import FileListItem from '@/views/prepare/container/file-list-item.vue'
import { getSmarttalkPage, moveSmarttalk } from '@/api/file'
@ -490,18 +491,23 @@ export default {
// 打开PDF-课件
async navtoPdf() {
let path = await this.getBookPathFromServer()
console.log(path)
createWindow('open-PDF', { url: '/classBegins/index' })
const toolStore = useToolState()
if (toolStore.isPdfWin) return this.$message.error('您当前已打开课本，请勿重复操作')
// let path = await this.getBookPathFromServer()
// console.log(path)
// console.log(this.uploadData.textbookId)
createWindow('open-PDF', { url: '/classBegins/index?textbookId='+this.uploadData.textbookId })
},
// 上课-工具类悬浮
openLesson() {
const toolStore = useToolState()
if (toolStore.isToolWin) return this.$message.error('您当前已开始上课，请勿重复操作')
createWindow('tool-sphere', { url: '/tool/sphere' })
}
}
}
</script>
<style>
<style lang="scss">
.prepare-popper {
width: 80px !important;
min-width: 80px !important;

29
src/renderer/src/views/tool/components/board.vue
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)
@ -35,14 +40,26 @@ watch(() => props.modelValue, (newVal, oldVal) => {
FabricVue.handleMode(TYPES.ActionMode.DRAW)
FabricVue.canvas.freeDrawingCursor = 'default'
break
case 'eraser': // 板擦模式
case 'erase': // 板擦模式
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>

137
src/renderer/src/views/tool/components/side.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="warp" ref="btnRef">
<slot name="start"></slot>
<!-- 工具按钮 -->
<el-space direction="vertical">
<template v-for="(item,index) in list">
<slot :name="item.prop" :item="item" :index="index">
<div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)">
<i class="iconfont" :class="item.icon" :style="item.style" />
<span>{{item.label||item.text||item.name}}</span>
</div>
</slot>
</template>
<slot name="append"></slot>
</el-space>
<slot name="end"></slot>
<!-- 内容部分 -->
<transition name="el-fade-in">
<div class="c-popover" :style="`--top: ${topPos}px;--height:${hPost}px;`" v-show="isVisible">
<div class="content">{{activeObj}}</div>
</div>
</transition>
</div>
</template>
<script setup>
import { computed, defineProps, ref, reactive, watchEffect, onMounted } from 'vue'
// 功能说明：侧边-工具栏
const colors = ['#00f389', '#ff7f00', '#ffff00', '#409EFF', '#00baff', '#13b189', '#F56C6C']
const emit = defineEmits(['update:modelValue','change'])
const props = defineProps({
modelValue: { // 是否显示
type: Boolean,
default: true
},
data: { // 数据
type: Array,
default: () => [
{ label: '资源', prop: 'resource', icon: 'icon-hudong' },
{ label: '互动', prop: 'interact', icon: 'icon-hudong' },
{ label: '窗口', prop: 'win', icon: 'icon-hudong' },
{ label: '下课', prop: 'over', icon: 'icon-hudong' },
]
}
})
const isVisible = ref(false) // 是否显示内容
const activeObj = ref(null) // 当前激活的按钮
const btnRef = ref(null) // 按钮元素-ref
const topPos = ref(30) // 顶部距离-内容的距离
const hPost = ref(0) // 顶部距离-内容的距离
let posBtnAll = {} // 存储位置
// === 计算属性 ===
const list = computed(() => props.data.map((o,i) => {
o.style = getStyle(o.style, i)
return o
}))
onMounted(() => {
posBtnAll = btnRef.value.getBoundingClientRect()
hPost.value = posBtnAll.height
})
// === 方法 ===
// 获取颜色索引
const getIndex = i => i % colors.length
// 获取样式
const getStyle = (style,index) => {
const color = colors[getIndex(index)]
if (!style) return {color}
else {
if (typeof style === 'object') return {...style, color}
return `${style}${style.endsWith(';')?'':';'}color:${color};`
}
}
// 事件
const clickHandel = (o, e) => {
const node = e.target.parentNode.getBoundingClientRect()
const isColse = activeObj.value && activeObj.value.prop === o.prop && isVisible.value
isVisible.value = !isColse // 相同的按钮且打开状态，点击关闭
activeObj.value = o
const nodeH = parseInt(node.height / 2) // 高度的一半
topPos.value = parseInt(node.top) - posBtnAll.top + nodeH
emit('change', o)
}
</script>
<style lang="scss" scoped>
.warp{
border: 1px solid;
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 10px;
min-height: 40vh;
min-width: 4em;
border-radius: 4em;
background-color: #121212;
.el-space{margin: 20px 0;}
.c-btn{
color: #d9dce3;
cursor: pointer;
.iconfont{
font-size: 20px;
color: attr(color);
}
span{font-size: 12px;}
&:hover{
border-radius: 4px;
background: #454545fa;
}
}
}
.c-popover{
--top: 30px;
--height: 40vh;
position: fixed;
inset: 50% 75px auto auto;
transform: translateY(-50%);
background-color: #121212;
padding: 10px;
border-radius: 4px;
min-height: var(--height);
width: 30em;
text-align: left;
&:before{
content: "";
width: 10px;
height: 10px;
background-color: #121212;
position: absolute;
right: -5px;
top: var(--top);
transform: rotate(45deg);
}
}
.content{
color: red;
}
</style>

45
src/renderer/src/views/tool/directive/ignore.js Normal file
View File

@ -0,0 +1,45 @@
/**
* 处理元素是否穿透-窗口
*/
import { ipcMsgSend } from '@/utils/tool'
class Ignore {
el // 绑定元素
binding // 绑定对象(参数)
value // 绑定值
isAuto // 是否自动控制
constructor(el, binding) {
this.el = el
this.binding = binding
this.value = binding.value
this.isAuto = !(this.value && this.value instanceof Boolean)
}
// 设置是否穿透
send(bool) {
ipcMsgSend('tool-sphere:set:ignore', bool)
}
// 监听元素移入移出，自动设置
mounted() {
this.el.addEventListener('mouseenter', e => { // 进入
this.send(false) // 元素不穿透，鼠标有效
this.changeHandle(e)
})
this.el.addEventListener('mouseleave', e => { // 离开
this.send(true) // 元素穿透，鼠标无效
this.changeHandle(e)
})
}
changeHandle(e) {
const customEvent = new CustomEvent('ignore-mounted', {detail:{ignore: this, e}})
this.el.dispatchEvent(customEvent)
}
}
export default {
mounted(el, binding) {
const ignore = new Ignore(el, binding)
if (ignore.isAuto) { // 自动控制
ignore.mounted()
} else { // 手动设置
ignore.send(ignore.value)
}
}
}

79
src/renderer/src/views/tool/sphere.vue
View File

@ -1,9 +1,11 @@
<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>
<!-- 侧边工具栏 -->
<side-vue v-ignore></side-vue>
<!-- 底部工具栏 :style="dataPos.style"-->
<div class="tool-bottom-all"
@mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
<div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
<div v-drag="{handle:'.tool-bottom-all', dragtime}"
@v-drag-start="dragtime = Date.now()">
<div class="c-logo" @click="logoHandle" title="拖动 | 折叠 | 展开">
@ -15,7 +17,7 @@
@change="tabChange">
<template #default="{item}">
<div class="c-btn flex flex-col items-center gap-2 p-2">
<i class="iconfont" :class="item.icon" :style="item.style"></i>
<i class="iconfont" :class="item.icon" :style="item.style" />
<span>{{item.label}}</span>
</div>
</template>
@ -29,55 +31,38 @@
// 功能说明：electron 悬浮球
import { onMounted, ref, reactive, watchEffect } from 'vue'
import logo from '@root/resources/icon.png' // logo
import boardVue from './components/board.vue' // 画板
import boardVue from './components/board.vue' // 画板-子组件
import sideVue from './components/side.vue' // 画板-子组件
import vDrag from './directive/drag' // 自定义指令-拖拽
import vIgnore from './directive/ignore' // 自定义指令-穿透
import { useToolState } from '@/store/modules/tool'
const { ipcRenderer } = require('electron') // app使用
// const ipcRenderer = { send: () => {} } // 网页测试使用
import { ipcMsgSend, ipcHandle, ipcMain } from '@/utils/tool' // 相关工具
const tabActive = ref('select') // 工具栏当前选中项
const isFold = ref(false) // 折叠工具栏
const isDrag = ref(false) // 开始拖拽
const dragtime = ref(0) // 拖拽时间-计算点击还是拖动
const isShow = ref(false)
const toolStore = useToolState()
const isShow = ref(false) // 是否显示-画板
const toolStore = useToolState() // 状态管理
const boardVueRef=ref(null) // 画板ref
const btnList = [ // 工具栏按钮列表
{ label: '选择', value: 'select', icon: 'icon-mouse' },
{ label: '画笔', value: 'brush', icon: 'icon-huabi' },
{ label: '板擦', value: 'eraser', icon: 'icon-xiangpica' },
{ label: '板擦', value: 'erase', icon: 'icon-xiangpica' },
{ label: '清除', value: 'clear', icon: 'icon-xiangpica', style: 'color: #ccc' },
// { label: '互动', value: 'interact', icon: 'icon-hudong' },
// { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
// { label: '更多', value: 'more', icon: 'icon-xiazai9' },
]
onMounted(() => {
// isShow.value = toolStore.showBoardAll // 是否显示-画板
// console.log('xxx: ', toolStore.model)
// setTimeout(() => {
// toolStore.windowState.test = '测试成功'
// }, 2000);
// 页面加载完毕
onMounted(async() => {
resetStatus() // 开启重置状态-监听
})
// const test = (e) => { console.log('test', e) }
// ==== 方法 ===
const tabChange = (val) => { // 切换tab-change
// console.log('xxxx:', val)
toolStore.showBoardAll = true
switch (val) {
case 'brush': // 画笔
break
case 'eraser': // 板擦
break
case 'interact':
break
case 'focus':
break
case 'more':
break
case 'close':
ipcRenderer.send('tool-sphere:close')
break
default:
break
}
const bool = !toolStore.isPdfWin && !toolStore.showBoardAll
if(bool) toolStore.showBoardAll = true
// ipcMsgSend('tool-sphere:close')
toolStore.model = val // 存储当前tab
}
const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
@ -85,14 +70,30 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
isFold.value = !isFold.value
}
}
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) => { // 忽略鼠标穿透
ipcMsgSend('tool-sphere:set:ignore', bool)
}
const resetStatus = () => { // 重置状态
if (toolStore.isToolWin) return // 已经打开过-忽略
ipcMain?.handle?.('tool-sphere:reset', () => {
setTimeout(() => {
boardVueRef.value.handleMode(tabActive.value)
mouseChange(1)
}, 500)
})
toolStore.isToolWin = true // 标记状态
}
watchEffect(() => { // 监听
isShow.value = toolStore.showBoardAll // 是否显示-画板
// 不同的时候, 更新值: 是否显示-画板
const show = !toolStore.isPdfWin && toolStore.showBoardAll
if (show != isShow.value) isShow.value = show
})
</script>