@@ -15,7 +17,7 @@
@change="tabChange">
-
+
{{item.label}}
@@ -29,54 +31,39 @@
// 功能说明: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: () => {} } // 网页测试使用
-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) // 画板
+import { ipcMsgSend, ipcHandle, ipcMain } from '@/utils/tool' // 相关工具
+import {FabricVue, TYPES} from '@/plugins/fabric'
+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) // 画板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
- if(!toolStore.isPdfWin) 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 点击-事件 折叠|展开
@@ -84,7 +71,6 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
isFold.value = !isFold.value
}
}
-
const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
let resBool = false
if (tabActive.value == 'select') resBool = !!bool
@@ -92,20 +78,19 @@ const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
setIgnore(resBool)
}
const setIgnore = (bool) => { // 忽略鼠标穿透
- ipcRenderer.send('tool-sphere:set:ignore', bool)
+ ipcMsgSend('tool-sphere:set:ignore', bool)
}
-// // 监听画板状态
-// ipcRenderer.send('tool-sphere:reset', () => {
-
-// })
+const resetStatus = () => { // 重置状态
+ ipcMain.handle('tool-sphere:reset', () => {
+ FabricVue.handleMode(tabActive.value)
+ setTimeout(() => { mouseChange(1) }, 500)
+ })
+}
+
watchEffect(() => { // 监听
- isShow.value = !toolStore.isPdfWin&&toolStore.showBoardAll // 是否显示-画板
- if(!toolStore.isPdfWin && toolStore.showBoardAll){ //恢复进入页面前的状态
- // setTimeout(() => {
- boardVueRef.value.handleMode(tabActive.value)
- setIgnore(false)
- // },0)
- }
+ // 不同的时候, 更新值: 是否显示-画板
+ const show = !toolStore.isPdfWin && toolStore.showBoardAll
+ if (show != isShow.value) isShow.value = show
})