jeo young
3 years ago
parent
924a7b5863
commit
f64cd4dcf1
@ -0,0 +1,193 @@ |
||||
<template> |
||||
<div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }"> |
||||
<sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width" :height="canvasBox().height" |
||||
:startX="startX" :startY="startY" :lines="lines" |
||||
:palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }"> |
||||
</sketch-rule> |
||||
<div ref="$app" class="screens" @scroll="handleScroll"> |
||||
<div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }"> |
||||
<div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas" |
||||
:style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"> |
||||
<div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts"> |
||||
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue' |
||||
import { listen } from "dom-helpers" |
||||
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
||||
|
||||
const chartEditStore = useChartEditStore() |
||||
|
||||
const thick = 20 |
||||
const screenContainerWidth = 5000 |
||||
var prevMoveXVallue = [0, 0] |
||||
var prevMoveYVallue = [0, 0] |
||||
|
||||
const $app = ref() |
||||
const refcanvasBox = ref() |
||||
const $container = ref() |
||||
|
||||
const scale = computed(() => { |
||||
return chartEditStore.getEditCanvas.scale |
||||
}) |
||||
const startX = ref(0) |
||||
const startY = ref(0) |
||||
const lines = reactive({ h: [], v: [] }) |
||||
|
||||
const handleWheel = (e: any) => { |
||||
e.preventDefault() |
||||
if (e.ctrlKey || e.metaKey) { |
||||
// 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) |
||||
} |
||||
} |
||||
|
||||
const isPressSpace = ref(false) |
||||
const cursorStyle = ref('auto') |
||||
|
||||
window.onKeySpacePressHold = (isHold: boolean) => { |
||||
isPressSpace.value = isHold |
||||
} |
||||
watch( |
||||
() => isPressSpace.value, |
||||
newValue => { |
||||
cursorStyle.value = newValue ? 'grab' : 'auto' |
||||
} |
||||
) |
||||
|
||||
onMounted(() => { |
||||
$app.value.addEventListener('wheel', handleWheel, { passive: false }) |
||||
// 滚动居中 |
||||
$app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2 |
||||
|
||||
}) |
||||
|
||||
const handleScroll = () => { |
||||
const screensRect = $app.value.getBoundingClientRect() |
||||
const canvasRect = refcanvasBox.value.getBoundingClientRect() |
||||
|
||||
// 标尺开始的刻度 |
||||
startX.value = (screensRect.left + thick - canvasRect.left) / scale.value |
||||
startY.value = (screensRect.top + thick - canvasRect.top) / scale.value |
||||
} |
||||
// 处理标尺重制大小 |
||||
watch( |
||||
() => scale.value, |
||||
(newValue, oldValue) => { |
||||
if (oldValue !== newValue) { |
||||
handleScroll() |
||||
chartEditStore.setScale(newValue) |
||||
} |
||||
} |
||||
) |
||||
|
||||
onUnmounted(() => { |
||||
$app.value.removeEventListener('wheel', handleWheel) |
||||
}) |
||||
|
||||
const dragCanvas = (e: any) => { |
||||
if (!window.$KeyboardActive?.space) return |
||||
|
||||
// @ts-ignore |
||||
document.activeElement?.blur() |
||||
|
||||
e.preventDefault() |
||||
e.stopPropagation() |
||||
|
||||
const startX = e.pageX |
||||
const startY = e.pageY |
||||
|
||||
const un1 = listen(window, "mousemove", (e: any) => { |
||||
|
||||
const nx = e.pageX - startX |
||||
const ny = e.pageY - startY |
||||
|
||||
const [prevMoveX1, prevMoveX2] = prevMoveXVallue |
||||
const [prevMoveY1, prevMoveY2] = prevMoveYVallue |
||||
|
||||
prevMoveXVallue = [prevMoveX2, nx] |
||||
prevMoveYVallue = [prevMoveY2, ny] |
||||
|
||||
$app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1) |
||||
$app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1) |
||||
}) |
||||
const un2 = listen(window, "mouseup", () => { |
||||
un1() |
||||
un2() |
||||
prevMoveXVallue = [0, 0] |
||||
prevMoveYVallue = [0, 0] |
||||
}) |
||||
} |
||||
|
||||
const { width, height } = toRefs(chartEditStore.getEditCanvasConfig) |
||||
|
||||
const canvasBox = () => { |
||||
const layoutDom = document.getElementById('go-chart-edit-layout') |
||||
if (layoutDom) { |
||||
return { |
||||
height: layoutDom.clientHeight - 40 - 44, |
||||
width: layoutDom.clientWidth |
||||
} |
||||
} |
||||
return { |
||||
width: width.value, |
||||
height: height.value |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.screens { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: auto; |
||||
user-select: none; |
||||
|
||||
/* firefox */ |
||||
scrollbar-color: rgba(144, 146, 152, .3) transparent; |
||||
scrollbar-width: thin; |
||||
|
||||
/* chrome */ |
||||
&::-webkit-scrollbar, |
||||
&::-webkit-scrollbar-track-piece { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: 7px; |
||||
} |
||||
|
||||
&::-webkit-scrollbar-thumb { |
||||
border-radius: 5px; |
||||
background-color: rgba(144, 146, 152, .3); |
||||
} |
||||
} |
||||
|
||||
.screenContainer { |
||||
position: absolute; |
||||
height: 3000px; |
||||
} |
||||
|
||||
.canvas { |
||||
position: absolute; |
||||
top: 80px; |
||||
left: 50%; |
||||
transform-origin: 50% 0; |
||||
|
||||
&:hover { |
||||
cursor: v-bind('cursorStyle'); |
||||
} |
||||
|
||||
&:active { |
||||
cursor: crosshair; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue