From 117b9d0114ca2d21a4d274c9b7423874f8ec7a36 Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Fri, 16 Dec 2022 23:27:02 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E7=A9=BA=E6=A0=BC=E7=83=AD=E9=94=AE?= =?UTF-8?q?=E5=AF=BC=E8=87=B4ctrl=20=E6=97=A0=E6=B3=95=E5=A4=9A=E9=80=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b587d854..71368a51 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -281,12 +281,12 @@ export const setKeyboardDressShow = (keyCode?: number) => { const dom = document.getElementById('keyboard-dress-show') if (!dom) return if (!keyCode) { - window.onKeySpacePressHold?.(false) + if (keyCode == 32) window.onKeySpacePressHold?.(false) dom.innerText = '' return } if (keyCode && code.has(keyCode)) { - window.onKeySpacePressHold?.(true) + if (keyCode == 32) window.onKeySpacePressHold?.(true) dom.innerText = `按下了「${code.get(keyCode)}」键` } } From 355c95785ab3d4cf1730bd2acdd8983902eae170 Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Sat, 17 Dec 2022 00:56:42 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E5=8F=98=E5=8C=96?= =?UTF-8?q?=E5=90=8E=E5=A7=8B=E7=BB=88=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/chartEditStore/chartEditStore.ts | 2 ++ src/utils/utils.ts | 2 +- .../ContentEdit/components/EditRule/ruler.vue | 23 +++++++++++++++---- src/views/chart/ContentEdit/index.vue | 1 - types/global.d.ts | 3 +++ 5 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 16a4eda4..75c3f8db 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -928,6 +928,8 @@ export const useChartEditStore = defineStore({ const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5)) this.setScale(scaleHeight > 1 ? 1 : scaleHeight) } + + window.onCanvsSizecomputed?.() } else { window['$message'].warning('请先创建画布，再进行缩放') } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 71368a51..51b296ae 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -281,7 +281,7 @@ export const setKeyboardDressShow = (keyCode?: number) => { const dom = document.getElementById('keyboard-dress-show') if (!dom) return if (!keyCode) { - if (keyCode == 32) window.onKeySpacePressHold?.(false) + window.onKeySpacePressHold?.(false) dom.innerText = '' return } diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue index 79668649..0fe42a01 100644 --- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue +++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue @@ -63,13 +63,27 @@ watch( } ) +// 滚动居中 +const canvasPosCenter = () => { + const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect() + const { width, height } = canvasBox() + + $app.value.scrollLeft = containerWidth / 2 - width / 2 + $app.value.scrollTop = containerHeight / 2 - height / 2 +} + onMounted(() => { $app.value.addEventListener('wheel', handleWheel, { passive: false }) - // 滚动居中 - $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2 + canvasPosCenter() }) +window.onCanvsSizecomputed = () => { + setTimeout(() => { + canvasPosCenter() + }, 500) +} + const handleScroll = () => { const screensRect = $app.value.getBoundingClientRect() const canvasRect = refcanvasBox.value.getBoundingClientRect() @@ -133,7 +147,7 @@ const canvasBox = () => { const layoutDom = document.getElementById('go-chart-edit-layout') if (layoutDom) { return { - height: layoutDom.clientHeight - 40 - 44, + height: layoutDom.clientHeight - 25, width: layoutDom.clientWidth } } @@ -178,9 +192,10 @@ const canvasBox = () => { .canvas { position: absolute; - top: 80px; + top: 50%; left: 50%; transform-origin: 50% 0; + transform: translateY(-50%); &:hover { cursor: v-bind('cursorStyle'); diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index f43d426f..e421387b 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -161,7 +161,6 @@ onMounted(() => { @include goId('chart-edit-content') { border-radius: 10px; - margin: 25px; overflow: hidden; @extend .go-transition; @include fetch-theme('box-shadow'); diff --git a/types/global.d.ts b/types/global.d.ts index aabfe766..03b0a48e 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -11,6 +11,9 @@ interface Window { // 编辑 JSON 的存储对象 opener: any + + //当画布大小重新计算后 + onCanvsSizecomputed:Function } declare type Recordable = Record From 1d21fdb988ab4405a28a50dfdcfc500c2388e5fa Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Sat, 17 Dec 2022 01:32:03 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=8C=89=E4=BD=8F=E9=BC=A0?= =?UTF-8?q?=E6=A0=87=E4=B8=AD=E9=94=AE=20=E5=8F=AF=E4=BB=A5=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E7=94=BB=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ContentEdit/components/EditRule/ruler.vue | 14 ++++++++------ src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 2 ++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue index 0fe42a01..cd53e0c0 100644 --- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue +++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue @@ -46,7 +46,7 @@ const handleWheel = (e: any) => { // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2)) // chartEditStore.setScale(nextScale) - chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value) + chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.02 : e.wheelDelta <= 120 ? scale.value - 0.02 : scale.value) } } @@ -108,14 +108,15 @@ onUnmounted(() => { }) const dragCanvas = (e: any) => { - if (!window.$KeyboardActive?.space) return - - // @ts-ignore - document.activeElement?.blur() - e.preventDefault() e.stopPropagation() + if (e.which == 2) { + window.onKeySpacePressHold?.(true) + } else if (!window.$KeyboardActive?.space) return + // @ts-ignore + document.activeElement?.blur() + const startX = e.pageX const startY = e.pageY @@ -138,6 +139,7 @@ const dragCanvas = (e: any) => { un2() prevMoveXVallue = [0, 0] prevMoveYVallue = [0, 0] + window.onKeySpacePressHold?.(false) }) } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 654e9405..11f1bcae 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -62,6 +62,8 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType // * 框选 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => { + if (e.which == 2) return + mousedownHandleUnStop(e) // 记录点击初始位置 From bb4242e173b0338a1fa9f662c68b10c717c23528 Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Sat, 17 Dec 2022 01:33:27 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8C=89=E4=BD=8F?= =?UTF-8?q?=E7=A9=BA=E6=A0=BC=E9=94=AE=E6=97=B6=20=E4=B8=8D=E5=85=81?= =?UTF-8?q?=E8=AE=B8=E6=A1=86=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 11f1bcae..82fce985 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -63,6 +63,7 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType // * 框选 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => { if (e.which == 2) return + if (window.$KeyboardActive?.space) return mousedownHandleUnStop(e) From 8aef6ea1981435957f15cb2b7923787692f07428 Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Sat, 17 Dec 2022 17:56:36 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/chartEditStore/chartEditStore.ts | 2 -- types/global.d.ts | 3 --- 2 files changed, 5 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 75c3f8db..16a4eda4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -928,8 +928,6 @@ export const useChartEditStore = defineStore({ const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5)) this.setScale(scaleHeight > 1 ? 1 : scaleHeight) } - - window.onCanvsSizecomputed?.() } else { window['$message'].warning('请先创建画布，再进行缩放') } diff --git a/types/global.d.ts b/types/global.d.ts index 03b0a48e..aabfe766 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -11,9 +11,6 @@ interface Window { // 编辑 JSON 的存储对象 opener: any - - //当画布大小重新计算后 - onCanvsSizecomputed:Function } declare type Recordable = Record