mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
refactor: 移除 refactor API 的使用
This commit is contained in:
pipipi-pikachu
parent
d4a8a8b997
commit
c0d860ae27
@ -41,7 +41,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
|
||||
|
||||
const penSize = 6
|
||||
const rubberSize = 80
|
||||
@ -76,16 +76,10 @@ export default defineComponent({
|
||||
let lastLineWidth = -1
|
||||
|
||||
// 鼠标位置坐标：用于画笔或橡皮位置跟随
|
||||
const mouse = reactive({
|
||||
const mouse = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
})
|
||||
|
||||
// 更新鼠标位置坐标
|
||||
const updateMousePosition = (x: number, y: number) => {
|
||||
mouse.x = x
|
||||
mouse.y = y
|
||||
}
|
||||
|
||||
// 鼠标是否处在画布范围内：处在范围内才会显示画笔或橡皮
|
||||
const mouseInCanvas = ref(false)
|
||||
@ -239,7 +233,7 @@ export default defineComponent({
|
||||
lastTime = new Date().getTime()
|
||||
|
||||
if (e instanceof TouchEvent) {
|
||||
updateMousePosition(mouseX, mouseY)
|
||||
mouse.value = { x: mouseX, y: mouseY }
|
||||
mouseInCanvas.value = true
|
||||
}
|
||||
}
|
||||
@ -250,7 +244,7 @@ export default defineComponent({
|
||||
const x = mouseX / widthScale.value
|
||||
const y = mouseY / heightScale.value
|
||||
|
||||
updateMousePosition(mouseX, mouseY)
|
||||
mouse.value = { x: mouseX, y: mouseY }
|
||||
|
||||
if (isMouseDown) handleMove(x, y)
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore, useKeyboardStore } from '@/store'
|
||||
|
||||
@ -42,15 +42,14 @@ export default defineComponent({
|
||||
const end = ref<[number, number]>()
|
||||
|
||||
const selectionRef = ref<HTMLElement>()
|
||||
const offset = reactive({
|
||||
const offset = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
})
|
||||
onMounted(() => {
|
||||
if (!selectionRef.value) return
|
||||
const { x, y } = selectionRef.value.getBoundingClientRect()
|
||||
offset.x = x
|
||||
offset.y = y
|
||||
offset.value = { x, y }
|
||||
})
|
||||
|
||||
// 鼠标拖动创建元素生成位置大小
|
||||
@ -198,8 +197,8 @@ export default defineComponent({
|
||||
const height = maxY - minY
|
||||
|
||||
return {
|
||||
left: minX - offset.x + 'px',
|
||||
top: minY - offset.y + 'px',
|
||||
left: minX - offset.value.x + 'px',
|
||||
top: minY - offset.value.y + 'px',
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div
|
||||
class="multi-select-operate"
|
||||
:style="{
|
||||
left: minX * canvasScale + 'px',
|
||||
top: minY * canvasScale + 'px',
|
||||
left: range.minX * canvasScale + 'px',
|
||||
top: range.minY * canvasScale + 'px',
|
||||
}"
|
||||
>
|
||||
<BorderLine v-for="line in borderLines" :key="line.type" :type="line.type" :style="line.style" />
|
||||
@ -14,14 +14,14 @@
|
||||
:key="point.direction"
|
||||
:type="point.direction"
|
||||
:style="point.style"
|
||||
@mousedown.stop="scaleMultiElement($event, { minX, maxX, minY, maxY }, point.direction)"
|
||||
@mousedown.stop="scaleMultiElement($event, range, point.direction)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue'
|
||||
import { computed, defineComponent, ref, PropType, watchEffect } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore } from '@/store'
|
||||
import { PPTElement } from '@/types/slides'
|
||||
@ -53,7 +53,7 @@ export default defineComponent({
|
||||
|
||||
const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
|
||||
|
||||
const range = reactive({
|
||||
const range = ref({
|
||||
minX: 0,
|
||||
maxX: 0,
|
||||
minY: 0,
|
||||
@ -61,17 +61,14 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
// 根据多选元素整体在画布中的范围，计算边框线和缩放点的位置信息
|
||||
const width = computed(() => (range.maxX - range.minX) * canvasScale.value)
|
||||
const height = computed(() => (range.maxY - range.minY) * canvasScale.value)
|
||||
const width = computed(() => (range.value.maxX - range.value.minX) * canvasScale.value)
|
||||
const height = computed(() => (range.value.maxY - range.value.minY) * canvasScale.value)
|
||||
const { resizeHandlers, borderLines } = useCommonOperate(width, height)
|
||||
|
||||
// 计算多选元素整体在画布中的范围
|
||||
const setRange = () => {
|
||||
const { minX, maxX, minY, maxY } = getElementListRange(localActiveElementList.value)
|
||||
range.minX = minX
|
||||
range.maxX = maxX
|
||||
range.minY = minY
|
||||
range.maxY = maxY
|
||||
range.value = { minX, maxX, minY, maxY }
|
||||
}
|
||||
watchEffect(setRange)
|
||||
|
||||
@ -87,7 +84,7 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(range),
|
||||
range,
|
||||
canvasScale,
|
||||
borderLines,
|
||||
disableResize,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Ref, reactive } from 'vue'
|
||||
import { Ref, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore } from '@/store'
|
||||
import { PPTElement } from '@/types/slides'
|
||||
@ -8,13 +8,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
||||
const mainStore = useMainStore()
|
||||
const { canvasScale } = storeToRefs(mainStore)
|
||||
|
||||
const mouseSelectionState = reactive({
|
||||
isShow: false,
|
||||
const mouseSelectionVisible = ref(false)
|
||||
const mouseSelectionQuadrant = ref(1)
|
||||
const mouseSelection = ref({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
quadrant: 1,
|
||||
})
|
||||
|
||||
// 更新鼠标框选范围
|
||||
@ -33,12 +33,14 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
||||
const top = (startPageY - viewportRect.y) / canvasScale.value
|
||||
|
||||
// 确定框选的起始位置和其他默认值初始化
|
||||
mouseSelectionState.isShow = false
|
||||
mouseSelectionState.quadrant = 4
|
||||
mouseSelectionState.top = top
|
||||
mouseSelectionState.left = left
|
||||
mouseSelectionState.width = 0
|
||||
mouseSelectionState.height = 0
|
||||
mouseSelection.value = {
|
||||
top: top,
|
||||
left: left,
|
||||
width: 0,
|
||||
height: 0,
|
||||
}
|
||||
mouseSelectionVisible.value = false
|
||||
mouseSelectionQuadrant.value = 4
|
||||
|
||||
document.onmousemove = e => {
|
||||
if (!isMouseDown) return
|
||||
@ -63,10 +65,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
||||
else if ( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
|
||||
|
||||
// 更新框选范围
|
||||
mouseSelectionState.isShow = true
|
||||
mouseSelectionState.quadrant = quadrant
|
||||
mouseSelectionState.width = width
|
||||
mouseSelectionState.height = height
|
||||
mouseSelection.value = {
|
||||
...mouseSelection.value,
|
||||
width: width,
|
||||
height: height,
|
||||
}
|
||||
mouseSelectionVisible.value = true
|
||||
mouseSelectionQuadrant.value = quadrant
|
||||
}
|
||||
|
||||
document.onmouseup = () => {
|
||||
@ -78,36 +83,34 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
||||
let inRangeElementList: PPTElement[] = []
|
||||
for (let i = 0; i < elementList.value.length; i++) {
|
||||
const element = elementList.value[i]
|
||||
const mouseSelectionLeft = mouseSelectionState.left
|
||||
const mouseSelectionTop = mouseSelectionState.top
|
||||
const mouseSelectionWidth = mouseSelectionState.width
|
||||
const mouseSelectionHeight = mouseSelectionState.height
|
||||
|
||||
const quadrant = mouseSelectionState.quadrant
|
||||
const mouseSelectionLeft = mouseSelection.value.left
|
||||
const mouseSelectionTop = mouseSelection.value.top
|
||||
const mouseSelectionWidth = mouseSelection.value.width
|
||||
const mouseSelectionHeight = mouseSelection.value.height
|
||||
|
||||
const { minX, maxX, minY, maxY } = getElementRange(element)
|
||||
|
||||
// 计算元素是否处在框选范围内时，四个框选方向的计算方式有差异
|
||||
let isInclude = false
|
||||
if (quadrant === 4) {
|
||||
if (mouseSelectionQuadrant.value === 4) {
|
||||
isInclude = minX > mouseSelectionLeft &&
|
||||
maxX < mouseSelectionLeft + mouseSelectionWidth &&
|
||||
minY > mouseSelectionTop &&
|
||||
maxY < mouseSelectionTop + mouseSelectionHeight
|
||||
}
|
||||
else if (quadrant === 1) {
|
||||
else if (mouseSelectionQuadrant.value === 1) {
|
||||
isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) &&
|
||||
maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth &&
|
||||
minY > (mouseSelectionTop - mouseSelectionHeight) &&
|
||||
maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
|
||||
}
|
||||
else if (quadrant === 2) {
|
||||
else if (mouseSelectionQuadrant.value === 2) {
|
||||
isInclude = minX > mouseSelectionLeft &&
|
||||
maxX < mouseSelectionLeft + mouseSelectionWidth &&
|
||||
minY > (mouseSelectionTop - mouseSelectionHeight) &&
|
||||
maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
|
||||
}
|
||||
else if (quadrant === 3) {
|
||||
else if (mouseSelectionQuadrant.value === 3) {
|
||||
isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) &&
|
||||
maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth &&
|
||||
minY > mouseSelectionTop &&
|
||||
@ -130,12 +133,14 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
||||
const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
|
||||
mainStore.setActiveElementIdList(inRangeElementIdList)
|
||||
|
||||
mouseSelectionState.isShow = false
|
||||
mouseSelectionVisible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
mouseSelectionState,
|
||||
mouseSelection,
|
||||
mouseSelectionVisible,
|
||||
mouseSelectionQuadrant,
|
||||
updateMouseSelection,
|
||||
}
|
||||
}
|
||||
@ -55,12 +55,12 @@
|
||||
:style="{ transform: `scale(${canvasScale})` }"
|
||||
>
|
||||
<MouseSelection
|
||||
v-if="mouseSelectionState.isShow"
|
||||
:top="mouseSelectionState.top"
|
||||
:left="mouseSelectionState.left"
|
||||
:width="mouseSelectionState.width"
|
||||
:height="mouseSelectionState.height"
|
||||
:quadrant="mouseSelectionState.quadrant"
|
||||
v-if="mouseSelectionVisible"
|
||||
:top="mouseSelection.top"
|
||||
:left="mouseSelection.left"
|
||||
:width="mouseSelection.width"
|
||||
:height="mouseSelection.height"
|
||||
:quadrant="mouseSelectionQuadrant"
|
||||
/>
|
||||
<EditableElement
|
||||
v-for="(element, index) in elementList"
|
||||
@ -170,7 +170,7 @@ export default defineComponent({
|
||||
|
||||
useDropImageOrText(canvasRef)
|
||||
|
||||
const { mouseSelectionState, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
|
||||
const { mouseSelection, mouseSelectionVisible, mouseSelectionQuadrant, updateMouseSelection } = useMouseSelection(elementList, viewportRef)
|
||||
|
||||
const { dragElement } = useDragElement(elementList, alignmentLines)
|
||||
const { dragLineElement } = useDragLineElement(elementList)
|
||||
@ -266,7 +266,9 @@ export default defineComponent({
|
||||
viewportRef,
|
||||
viewportStyles,
|
||||
canvasScale,
|
||||
mouseSelectionState,
|
||||
mouseSelection,
|
||||
mouseSelectionVisible,
|
||||
mouseSelectionQuadrant,
|
||||
creatingElement,
|
||||
alignmentLines,
|
||||
linkDialogVisible,
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
|
||||
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore, useKeyboardStore } from '@/store'
|
||||
import { KEYS } from '@/configs/hotkey'
|
||||
@ -112,7 +112,7 @@ export default defineComponent({
|
||||
const { canvasScale } = storeToRefs(useMainStore())
|
||||
const { ctrlOrShiftKeyActive } = storeToRefs(useKeyboardStore())
|
||||
|
||||
const clipWrapperPositionStyle = reactive({
|
||||
const clipWrapperPositionStyle = ref({
|
||||
top: '0',
|
||||
left: '0',
|
||||
})
|
||||
@ -153,7 +153,7 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
// 顶层图片容器位置大小（裁剪高亮区域）
|
||||
const topImgWrapperPosition = reactive({
|
||||
const topImgWrapperPosition = ref({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
@ -162,11 +162,12 @@ export default defineComponent({
|
||||
|
||||
// 顶层图片容器位置大小样式（裁剪高亮区域）
|
||||
const topImgWrapperPositionStyle = computed(() => {
|
||||
const { top, left, width, height } = topImgWrapperPosition.value
|
||||
return {
|
||||
top: topImgWrapperPosition.top + '%',
|
||||
left: topImgWrapperPosition.left + '%',
|
||||
width: topImgWrapperPosition.width + '%',
|
||||
height: topImgWrapperPosition.height + '%',
|
||||
top: top + '%',
|
||||
left: left + '%',
|
||||
width: width + '%',
|
||||
height: height + '%',
|
||||
}
|
||||
})
|
||||
|
||||
@ -175,29 +176,30 @@ export default defineComponent({
|
||||
const bottomWidth = imgPosition.value.width
|
||||
const bottomHeight = imgPosition.value.height
|
||||
|
||||
const topLeft = topImgWrapperPosition.left
|
||||
const topTop = topImgWrapperPosition.top
|
||||
const topWidth = topImgWrapperPosition.width
|
||||
const topHeight = topImgWrapperPosition.height
|
||||
const { top, left, width, height } = topImgWrapperPosition.value
|
||||
|
||||
return {
|
||||
left: -topLeft * (100 / topWidth) + '%',
|
||||
top: -topTop * (100 / topHeight) + '%',
|
||||
width: bottomWidth / topWidth * 100 + '%',
|
||||
height: bottomHeight / topHeight * 100 + '%',
|
||||
left: -left * (100 / width) + '%',
|
||||
top: -top * (100 / height) + '%',
|
||||
width: bottomWidth / width * 100 + '%',
|
||||
height: bottomHeight / height * 100 + '%',
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化裁剪位置信息
|
||||
const initClipPosition = () => {
|
||||
const { left, top } = getClipDataTransformInfo()
|
||||
topImgWrapperPosition.left = left
|
||||
topImgWrapperPosition.top = top
|
||||
topImgWrapperPosition.width = 100
|
||||
topImgWrapperPosition.height = 100
|
||||
topImgWrapperPosition.value = {
|
||||
left: left,
|
||||
top: top,
|
||||
width: 100,
|
||||
height: 100,
|
||||
}
|
||||
|
||||
clipWrapperPositionStyle.top = -top + '%'
|
||||
clipWrapperPositionStyle.left = -left + '%'
|
||||
clipWrapperPositionStyle.value = {
|
||||
top: -top + '%',
|
||||
left: -left + '%',
|
||||
}
|
||||
}
|
||||
|
||||
// 执行裁剪：计算裁剪后的图片位置大小和裁剪信息，并将数据同步出去
|
||||
@ -212,10 +214,10 @@ export default defineComponent({
|
||||
const { left, top } = getClipDataTransformInfo()
|
||||
|
||||
const position = {
|
||||
left: (topImgWrapperPosition.left - left) / 100 * props.width,
|
||||
top: (topImgWrapperPosition.top - top) / 100 * props.height,
|
||||
width: (topImgWrapperPosition.width - 100) / 100 * props.width,
|
||||
height: (topImgWrapperPosition.height - 100) / 100 * props.height,
|
||||
left: (topImgWrapperPosition.value.left - left) / 100 * props.width,
|
||||
top: (topImgWrapperPosition.value.top - top) / 100 * props.height,
|
||||
width: (topImgWrapperPosition.value.width - 100) / 100 * props.width,
|
||||
height: (topImgWrapperPosition.value.height - 100) / 100 * props.height,
|
||||
}
|
||||
|
||||
const clipedEmitData: ImageClipedEmitData = {
|
||||
@ -271,12 +273,7 @@ export default defineComponent({
|
||||
const startPageX = e.pageX
|
||||
const startPageY = e.pageY
|
||||
const bottomPosition = imgPosition.value
|
||||
const originPositopn = {
|
||||
left: topImgWrapperPosition.left,
|
||||
top: topImgWrapperPosition.top,
|
||||
width: topImgWrapperPosition.width,
|
||||
height: topImgWrapperPosition.height,
|
||||
}
|
||||
const originPositopn = { ...topImgWrapperPosition.value }
|
||||
|
||||
document.onmousemove = e => {
|
||||
if (!isMouseDown) return
|
||||
@ -312,8 +309,11 @@ export default defineComponent({
|
||||
targetTop = bottomPosition.height - originPositopn.height
|
||||
}
|
||||
|
||||
topImgWrapperPosition.left = targetLeft
|
||||
topImgWrapperPosition.top = targetTop
|
||||
topImgWrapperPosition.value = {
|
||||
...topImgWrapperPosition.value,
|
||||
left: targetLeft,
|
||||
top: targetTop,
|
||||
}
|
||||
}
|
||||
|
||||
document.onmouseup = () => {
|
||||
@ -340,14 +340,9 @@ export default defineComponent({
|
||||
const startPageX = e.pageX
|
||||
const startPageY = e.pageY
|
||||
const bottomPosition = imgPosition.value
|
||||
const originPositopn = {
|
||||
left: topImgWrapperPosition.left,
|
||||
top: topImgWrapperPosition.top,
|
||||
width: topImgWrapperPosition.width,
|
||||
height: topImgWrapperPosition.height,
|
||||
}
|
||||
const originPositopn = { ...topImgWrapperPosition.value }
|
||||
|
||||
const aspectRatio = topImgWrapperPosition.width / topImgWrapperPosition.height
|
||||
const aspectRatio = topImgWrapperPosition.value.width / topImgWrapperPosition.value.height
|
||||
|
||||
document.onmousemove = e => {
|
||||
if (!isMouseDown) return
|
||||
@ -498,11 +493,13 @@ export default defineComponent({
|
||||
targetLeft = originPositopn.left
|
||||
targetTop = originPositopn.top
|
||||
}
|
||||
|
||||
topImgWrapperPosition.left = targetLeft
|
||||
topImgWrapperPosition.top = targetTop
|
||||
topImgWrapperPosition.width = targetWidth
|
||||
topImgWrapperPosition.height = targetHeight
|
||||
|
||||
topImgWrapperPosition.value = {
|
||||
left: targetLeft,
|
||||
top: targetTop,
|
||||
width: targetWidth,
|
||||
height: targetHeight,
|
||||
}
|
||||
}
|
||||
|
||||
document.onmouseup = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user