index.vue
2.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div class="go-edit-select" v-if="isSelect" :style="positionStyle">
<div class="select-background"></div>
<div class="select-border"></div>
</div>
</template>
<script setup lang="ts">
import { ref, toRefs, watch, computed } from 'vue'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
import { selectBoxIndex } from '@/settings/designSetting'
// 全局颜色
const designStore = useDesignStore()
const chartEditStore = useChartEditStore()
const { isSelect, scale } = toRefs(chartEditStore.getEditCanvas)
const themeColor = computed(() => {
return designStore.getAppTheme
})
// 位置
const positionStyle = ref()
watch(
() => chartEditStore.getMousePosition,
positionInfo => {
if (!isSelect.value) return
// 这里的 x,y 是已经计算过的相对位移值
const { startX, startY, x, y } = positionInfo
const attr = {
zIndex: selectBoxIndex,
// left
x: 0,
// top
y: 0,
// 宽
w: 0,
// 高
h: 0,
// 偏移
offsetX: 0,
offsetY: 0
}
// 处理位置
if (x > startX && y > startY) {
// 右下方向
attr.x = startX
attr.y = startY
attr.w = Math.round((x - startX) / scale.value)
attr.h = Math.round((y - startY) / scale.value)
} else if (x > startX && y < startY) {
// 右上方向
attr.x = startX
attr.w = Math.round((x - startX) / scale.value)
attr.h = Math.round((startY - y) / scale.value)
attr.y = startY - attr.h
} else if (x < startX && y > startY) {
// 左下方向
attr.y = startY
attr.w = Math.round((startX - x) / scale.value)
attr.h = Math.round((y - startY) / scale.value)
attr.x = startX - attr.w
} else {
// 左上方向
attr.w = Math.round((startX - x) / scale.value)
attr.h = Math.round((startY - y) / scale.value)
attr.x = startX - attr.w
attr.y = startY - attr.h
}
positionStyle.value = {
...useComponentStyle(attr, selectBoxIndex),
...useSizeStyle(attr)
}
},
{
deep: true
}
)
</script>
<style lang="scss" scoped>
@include go('edit-select') {
position: absolute;
.select-border,
.select-background {
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
overflow: hidden;
}
.select-border {
left: 0;
top: 0;
opacity: 0.5;
border-width: 2px;
border-style: solid;
border-color: v-bind('themeColor');
}
.select-background {
top: 2px;
left: 2px;
opacity: 0.2;
background-color: v-bind('themeColor');
}
}
</style>