diff --git a/src/renderer/src/plugins/fabric/index.js b/src/renderer/src/plugins/fabric/index.js index c3cebb5..0a6439c 100644 --- a/src/renderer/src/plugins/fabric/index.js +++ b/src/renderer/src/plugins/fabric/index.js @@ -1453,14 +1453,14 @@ export class History { }) } } - + // 清除记录 clean() { this.FabricVue?.canvas?.clear() this.index = 0 this.diffs = [] this.canvasData = {} } - + // 重新加载历史记录 initHistory() { const canvas = this.FabricVue.canvas if (canvas) { diff --git a/src/renderer/src/utils/tool.js b/src/renderer/src/utils/tool.js index a0dd8d4..b51a6bb 100644 --- a/src/renderer/src/utils/tool.js +++ b/src/renderer/src/utils/tool.js @@ -69,7 +69,7 @@ export const createWindow = async (type, data) => { // parent: mainWin, // 父窗口 // autoClose: true, // 关闭窗口后自动关闭 } - // data.isConsole = true // 是否开启控制台 + data.isConsole = true // 是否开启控制台 data.option = {...defOption, ...option} const win = await toolWindow(data) win.type = type // 唯一标识 @@ -145,7 +145,7 @@ export function toolWindow({url, isConsole, option={}}) { // 内部监听器-是否打印 if (!!isConsole) { win.webContents.on('console-message', (e,leve,m,lin,s) => { - console.log('console-msg: ', m) + console.log(m) }) } }) diff --git a/src/renderer/src/views/tool/components/board.vue b/src/renderer/src/views/tool/components/board.vue index 895b396..e41a448 100644 --- a/src/renderer/src/views/tool/components/board.vue +++ b/src/renderer/src/views/tool/components/board.vue @@ -4,27 +4,28 @@ diff --git a/src/renderer/src/views/tool/directive/drag.js b/src/renderer/src/views/tool/directive/drag.js new file mode 100644 index 0000000..caa12f8 --- /dev/null +++ b/src/renderer/src/views/tool/directive/drag.js @@ -0,0 +1,111 @@ + +/** + * @description 工具栏-拖拽 自定义指令 + */ +class Drag { + isDrag = false // 是否开始拖拽 + rafId // requestAnimationFrame id + x = 0 // 鼠标按下时的x坐标 + y = 0 // 鼠标按下时的y坐标 + data // 其他参数 元素实际坐标值 + el; handle; // el, handle 挂载元素和拖拽元素 + pos // 拖拽元素实际坐标值 + max // 拖拽元素最大边界 + // 构造器 + constructor(el, binding) { + this.el = el + const { value } = binding + const handleSelector = value instanceof Object ? value.handle : value + if (!!handleSelector) { + if (handleSelector instanceof HTMLElement) this.handle = handleSelector + else { + this.handle = document.querySelector(handleSelector) + // .forEach((child) => { this.handleArray.push(child) }) + } + } + if (!this.handle) this.handle = el // 默认为当前元素 + // 被拖拽元素初始坐标 + const pos = this.handle?.getBoundingClientRect() + this.data = {left:this.toRound(pos.left), top:this.toRound(pos.top)} + this.pos = pos + this.max = {w: window.innerWidth, h: window.innerHeight} + } + // 移入 + down(e) { + this.isDrag = true + const {cx, cy} = this.getMousePos(e) + this.x = cx + this.y = cy + // 手动-触发事件 v-drag-start + this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}})) + } + // 移动过程 + move = (e) => { + if (!this.isDrag) return + if (this.rafId) cancelAnimationFrame(this.rafId) // 清除上一次动画 + this.rafId = requestAnimationFrame(() => this.updatePosition(e)) + } + // 移出 + up = (e) => { + // e.preventDefault(); // 阻止默认行为 + // e.stopPropagation(); // 阻止事件传播 + this.isDrag = false + cancelAnimationFrame(this.rafId) + this.rafId = null + document.removeEventListener('mousemove', this.move); + document.removeEventListener('mouseup', this.up); + document.addEventListener('touchmove', this.move); + document.addEventListener('touchend', this.up); + } + // 业务逻辑 + updatePosition(e) { + const {cx, cy} = this.getMousePos(e) + const {left, top} = this.data + const dx = cx - this.x + const dy = cy - this.y + this.x = cx + this.y = cy + const {x, y} = this.getPos(left + dx, top + dy) // 调用边界函数 + this.data.left = x // 设置边界-x + this.data.top = y // 设置边界-y + // console.log(JSON.stringify(this)) + this.handle.style.left = `${this.data?.left}px` + this.handle.style.top = `${this.data?.top}px` + this.handle.style.bottom = 'unset' + this.handle.style.transform = 'unset' + this.rafId = requestAnimationFrame(() => this.updatePosition(e)) + } + // 获取鼠标位置 | Get mouse position + getMousePos(e){ + let cx = e.clientX || e.touches[0].clientX + let cy = e.clientY || e.touches[0].clientY + cx = this.toRound(cx) + cy = this.toRound(cy) + return {cx, cy} + } + // 获取移动后坐标 + getPos(x, y) { + const w = this.max.w - this.toRound(this.el.clientWidth) + const h = this.max.h - this.toRound(this.el.clientHeight) + x = x < 0 ? 0 : x > w ? w : x + y = y < 0 ? 0 : y > h ? h : y + return { x, y } + } + // 小数转整数 + toRound = v => Math.round(v) +} +export default { + mounted(el, binding) { + // const { style } = binding.value + const drag = new Drag(el, binding) + const dragStart = (e) => { + drag.down(e) + document.addEventListener('mousemove', drag.move); + document.addEventListener('mouseup', drag.up); + document.addEventListener('touchmove', drag.move); + document.addEventListener('touchend', drag.up); + } + el.addEventListener('mousedown', dragStart) + el.addEventListener('touchstart', dragStart) + }, +} \ No newline at end of file diff --git a/src/renderer/src/views/tool/sphere.vue b/src/renderer/src/views/tool/sphere.vue index 8f84c87..a69ef21 100644 --- a/src/renderer/src/views/tool/sphere.vue +++ b/src/renderer/src/views/tool/sphere.vue @@ -1,14 +1,13 @@