|
|
|
|
@ -64,9 +64,16 @@
|
|
|
|
|
<CloseOutlined
|
|
|
|
|
style="margin-right: 10px; padding: 3px; color: red"
|
|
|
|
|
@click="
|
|
|
|
|
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
|
|
|
|
|
rect.text
|
|
|
|
|
? ((rect.x = graffitisClone[index].x),
|
|
|
|
|
(rect.y = graffitisClone[index].y),
|
|
|
|
|
(rect.width = graffitisClone[index].width),
|
|
|
|
|
(rect.height = graffitisClone[index].height),
|
|
|
|
|
(rect.color = graffitisClone[index].color),
|
|
|
|
|
(rect.text = graffitisClone[index].text),
|
|
|
|
|
(rect.status = 'success'))
|
|
|
|
|
: graffitis.splice(index, 1);
|
|
|
|
|
nowGraffiti = -1;
|
|
|
|
|
rect.status = 'success';
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
<DeleteOutlined
|
|
|
|
|
@ -107,12 +114,14 @@
|
|
|
|
|
:style="{
|
|
|
|
|
textDecoration: rect.status == 'mouse' ? 'underline' : '',
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
|
|
|
|
|
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
|
|
|
|
|
@mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
|
|
|
|
|
@mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
|
|
|
|
|
@click="
|
|
|
|
|
rect.status = 'edit';
|
|
|
|
|
graffitisClone = cloneDeep(graffitis);
|
|
|
|
|
nowGraffiti = index;
|
|
|
|
|
graffitiFlag
|
|
|
|
|
? ((rect.status = 'edit'),
|
|
|
|
|
(graffitisClone = cloneDeep(graffitis)),
|
|
|
|
|
(nowGraffiti = index))
|
|
|
|
|
: ''
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ rect.text }}
|
|
|
|
|
@ -131,10 +140,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'top')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="
|
|
|
|
|
rect.status = 'edit';
|
|
|
|
|
nowGraffiti = index;
|
|
|
|
|
"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'top')"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 下 -->
|
|
|
|
|
@ -150,10 +156,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'bottom')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="
|
|
|
|
|
rect.status = 'edit';
|
|
|
|
|
nowGraffiti = index;
|
|
|
|
|
"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom')"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 右 -->
|
|
|
|
|
@ -169,10 +172,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'right')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="
|
|
|
|
|
rect.status = 'edit';
|
|
|
|
|
nowGraffiti = index;
|
|
|
|
|
"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'right')"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左 -->
|
|
|
|
|
@ -188,10 +188,7 @@
|
|
|
|
|
}"
|
|
|
|
|
@mouseenter="mouseenter(rect, 'left')"
|
|
|
|
|
@mouseleave="mouseleave(rect)"
|
|
|
|
|
@click="
|
|
|
|
|
rect.status = 'edit';
|
|
|
|
|
nowGraffiti = index;
|
|
|
|
|
"
|
|
|
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
|
|
|
@mousedown="funMouseDownEdit($event, index, 'left')"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 左上 -->
|
|
|
|
|
@ -449,19 +446,26 @@
|
|
|
|
|
<template #title>
|
|
|
|
|
<span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
|
|
|
|
|
<EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #000000;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
涂鸦
|
|
|
|
|
<EyeOutlined
|
|
|
|
|
@click="hideOrShowGraffiti(false)"
|
|
|
|
|
v-if="hideOrShowGraffitiFlag"
|
|
|
|
|
style="color: #2d8cf0"
|
|
|
|
|
/>
|
|
|
|
|
<EyeInvisibleOutlined
|
|
|
|
|
@click="hideOrShowGraffiti(true)"
|
|
|
|
|
v-if="!hideOrShowGraffitiFlag"
|
|
|
|
|
style="color: #595959"
|
|
|
|
|
/>
|
|
|
|
|
<div style="position: absolute; bottom: -12px; right: -4px; pointer-events: none">
|
|
|
|
|
<div
|
|
|
|
|
v-html="
|
|
|
|
|
`${
|
|
|
|
|
hideOrShowGraffitiFlag
|
|
|
|
|
? graffiti_svg.replaceAll('currentColor', '#2d8cf0')
|
|
|
|
|
: graffiti_svg.replaceAll('currentColor', '#595959')
|
|
|
|
|
}`
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
@ -476,19 +480,26 @@
|
|
|
|
|
}}
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
<EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
|
|
|
|
|
<EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #000000;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
标注
|
|
|
|
|
<EyeOutlined
|
|
|
|
|
@click="hideOrShowTextbox(false)"
|
|
|
|
|
v-if="hideOrShowTextboxFlag"
|
|
|
|
|
style="color: #2d8cf0"
|
|
|
|
|
/>
|
|
|
|
|
<EyeInvisibleOutlined
|
|
|
|
|
@click="hideOrShowTextbox(true)"
|
|
|
|
|
v-if="!hideOrShowTextboxFlag"
|
|
|
|
|
style="color: #595959"
|
|
|
|
|
/>
|
|
|
|
|
<div style="position: absolute; bottom: -10px; right: -3px; pointer-events: none">
|
|
|
|
|
<div
|
|
|
|
|
v-html="
|
|
|
|
|
`${
|
|
|
|
|
hideOrShowTextboxFlag
|
|
|
|
|
? otherimage_svg.replaceAll('currentColor', '#2d8cf0')
|
|
|
|
|
: otherimage_svg.replaceAll('currentColor', '#595959')
|
|
|
|
|
}`
|
|
|
|
|
"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
@ -521,17 +532,12 @@
|
|
|
|
|
FontColorsOutlined,
|
|
|
|
|
RedoOutlined,
|
|
|
|
|
OneToOneOutlined,
|
|
|
|
|
FileImageOutlined,
|
|
|
|
|
BorderHorizontalOutlined,
|
|
|
|
|
ExpandOutlined,
|
|
|
|
|
CompressOutlined,
|
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
|
import {
|
|
|
|
|
UpdatePicStatus,
|
|
|
|
|
Deletepic,
|
|
|
|
|
UpdatePicName,
|
|
|
|
|
UpdatePicParentKey,
|
|
|
|
|
} from '@/api/demo/mediaLibrary';
|
|
|
|
|
import { UpdatePicStatus, Deletepic } from '@/api/demo/mediaLibrary';
|
|
|
|
|
import { graffiti_svg, otherimage_svg } from './preview';
|
|
|
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
|
|
|
@ -547,7 +553,9 @@
|
|
|
|
|
|
|
|
|
|
// 上一张、下一张图片
|
|
|
|
|
function clickLeftOrRightButton(direction) {
|
|
|
|
|
const list = props.previewRecordList.filter((item) => item.objectKey);
|
|
|
|
|
const list = props.previewRecordList.filter(
|
|
|
|
|
(item) => item.objectKey && item.objectKey.includes('jpeg'),
|
|
|
|
|
);
|
|
|
|
|
graffitiFlag.value = false;
|
|
|
|
|
for (let index = 0; index < list.length; index++) {
|
|
|
|
|
if (list[index].id == props.nowPreviewRecord.id) {
|
|
|
|
|
@ -572,6 +580,7 @@
|
|
|
|
|
// 选择
|
|
|
|
|
function chooseNowPreviewRecord(value) {
|
|
|
|
|
emits('chooseNowPreviewRecord', value);
|
|
|
|
|
graffitiFlag.value = false;
|
|
|
|
|
refresh();
|
|
|
|
|
}
|
|
|
|
|
// 刷新表格
|
|
|
|
|
@ -582,7 +591,7 @@
|
|
|
|
|
const scale = ref(1);
|
|
|
|
|
// 放大函数
|
|
|
|
|
function zoomIn() {
|
|
|
|
|
if (scale.value < 3) {
|
|
|
|
|
if (scale.value < 4) {
|
|
|
|
|
scale.value += 0.1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -615,8 +624,8 @@
|
|
|
|
|
props.nowPreviewRecord.width > 1040 &&
|
|
|
|
|
props.nowPreviewRecord.height > 800
|
|
|
|
|
) {
|
|
|
|
|
imageHeight.value = 800;
|
|
|
|
|
imageWidth.value = (800 / props.nowPreviewRecord.height) * props.nowPreviewRecord.width;
|
|
|
|
|
imageWidth.value = 1040;
|
|
|
|
|
imageHeight.value = (1040 / props.nowPreviewRecord.width) * props.nowPreviewRecord.height;
|
|
|
|
|
} else {
|
|
|
|
|
imageHeight.value = 800;
|
|
|
|
|
imageWidth.value = 1040;
|
|
|
|
|
@ -634,11 +643,13 @@
|
|
|
|
|
props.nowPreviewRecord.width > 1040 &&
|
|
|
|
|
props.nowPreviewRecord.height > 800
|
|
|
|
|
) {
|
|
|
|
|
imageWidth.value = props.nowPreviewRecord.width;
|
|
|
|
|
imageHeight.value = props.nowPreviewRecord.height;
|
|
|
|
|
scale.value = props.nowPreviewRecord.width / 1040;
|
|
|
|
|
// imageWidth.value = props.nowPreviewRecord.width;
|
|
|
|
|
// imageHeight.value = props.nowPreviewRecord.height;
|
|
|
|
|
} else {
|
|
|
|
|
imageWidth.value = 2080;
|
|
|
|
|
imageHeight.value = 1600;
|
|
|
|
|
scale.value = 2;
|
|
|
|
|
// imageWidth.value = 2080;
|
|
|
|
|
// imageHeight.value = 1600;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -646,7 +657,7 @@
|
|
|
|
|
function refresh() {
|
|
|
|
|
scale.value = 1;
|
|
|
|
|
rotationAngle.value = 0;
|
|
|
|
|
graffitiFlag.value = false;
|
|
|
|
|
// graffitiFlag.value = false;
|
|
|
|
|
getImageWidthAndHeight();
|
|
|
|
|
// 复位
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
@ -654,11 +665,12 @@
|
|
|
|
|
dragDocument.style.left = 0 + 'px';
|
|
|
|
|
dragDocument.style.top = 0 + 'px';
|
|
|
|
|
}
|
|
|
|
|
document.body.style.cursor = 'default';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 删除
|
|
|
|
|
function deleteImage() {
|
|
|
|
|
let content = '确定要删除选择的文件/文件夹吗？';
|
|
|
|
|
let content = '确定要删除选择的文件吗？';
|
|
|
|
|
if (props.previewRecordList.length == 1) {
|
|
|
|
|
content = '下列图片只有一个，删除此图片后将会关闭此弹窗，确定要删除选择的文件吗？';
|
|
|
|
|
}
|
|
|
|
|
@ -672,7 +684,7 @@
|
|
|
|
|
ids: ids,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
handleSuccess(props.nowPreviewRecord);
|
|
|
|
|
createMessage.success(res);
|
|
|
|
|
createMessage.success('删除成功');
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
@ -754,6 +766,7 @@
|
|
|
|
|
const nowMouseGraffiti = ref(0);
|
|
|
|
|
// 设置鼠标格式
|
|
|
|
|
function setGraffiti() {
|
|
|
|
|
refresh();
|
|
|
|
|
graffitiFlag.value = !graffitiFlag.value;
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
document.body.style.cursor = 'crosshair';
|
|
|
|
|
@ -832,7 +845,21 @@
|
|
|
|
|
const mouseCanvasRef = ref();
|
|
|
|
|
// 鼠标按下
|
|
|
|
|
function onMouseDown(event) {
|
|
|
|
|
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
|
|
|
|
|
if (!graffitiFlag.value) {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
initialMouseX = event.clientX;
|
|
|
|
|
initialMouseY = event.clientY;
|
|
|
|
|
initialDocumentX = dragDocument.offsetLeft;
|
|
|
|
|
initialDocumentY = dragDocument.offsetTop;
|
|
|
|
|
dragDocument.style.cursor = 'grabbing';
|
|
|
|
|
window.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
|
|
|
} else if (
|
|
|
|
|
graffitiFlag.value &&
|
|
|
|
|
(graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
|
|
|
|
|
) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
if (nowGraffiti.value != -1) return;
|
|
|
|
|
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
|
|
|
|
|
@ -852,71 +879,64 @@
|
|
|
|
|
status: 'edit',
|
|
|
|
|
});
|
|
|
|
|
graffitisClone.value = cloneDeep(graffitis.value);
|
|
|
|
|
window.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
|
|
|
window.addEventListener('mousemove', onMouseMoveGraffit);
|
|
|
|
|
window.addEventListener('mouseup', onMouseUpGraffit);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 鼠标移动-涂鸦
|
|
|
|
|
function onMouseMoveGraffit(event) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
endX = event.x - rect.x;
|
|
|
|
|
endY = event.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
setMouseData();
|
|
|
|
|
}
|
|
|
|
|
// 鼠标松开-涂鸦
|
|
|
|
|
function onMouseUpGraffit(event) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
endX = event.x - rect.x;
|
|
|
|
|
endY = event.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (event.x > rect.right || event.y > rect.bottom) {
|
|
|
|
|
graffitis.value.splice(graffitis.value.length - 1, 1);
|
|
|
|
|
nowGraffiti.value = -1;
|
|
|
|
|
} else {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
initialMouseX = event.clientX;
|
|
|
|
|
initialMouseY = event.clientY;
|
|
|
|
|
initialDocumentX = dragDocument.offsetLeft;
|
|
|
|
|
initialDocumentY = dragDocument.offsetTop;
|
|
|
|
|
dragDocument.style.cursor = 'grabbing';
|
|
|
|
|
window.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
|
|
|
setMouseData();
|
|
|
|
|
nowGraffiti.value = graffitis.value.length - 1;
|
|
|
|
|
}
|
|
|
|
|
window.removeEventListener('mousemove', onMouseMoveGraffit);
|
|
|
|
|
window.removeEventListener('mouseup', onMouseUpGraffit);
|
|
|
|
|
}
|
|
|
|
|
// 鼠标移动
|
|
|
|
|
|
|
|
|
|
// 鼠标移动-拖动
|
|
|
|
|
function onMouseMove(event) {
|
|
|
|
|
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
endX = event.x - rect.x;
|
|
|
|
|
endY = event.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
setMouseData();
|
|
|
|
|
} else {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
if (isDragging.value) {
|
|
|
|
|
const deltaX = event.clientX - initialMouseX;
|
|
|
|
|
const deltaY = event.clientY - initialMouseY;
|
|
|
|
|
dragDocument.style.left = initialDocumentX + deltaX + 'px';
|
|
|
|
|
dragDocument.style.top = initialDocumentY + deltaY + 'px';
|
|
|
|
|
}
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
if (isDragging.value) {
|
|
|
|
|
const deltaX = event.clientX - initialMouseX;
|
|
|
|
|
const deltaY = event.clientY - initialMouseY;
|
|
|
|
|
dragDocument.style.left = initialDocumentX + deltaX + 'px';
|
|
|
|
|
dragDocument.style.top = initialDocumentY + deltaY + 'px';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 鼠标松开
|
|
|
|
|
// 鼠标松开-拖动
|
|
|
|
|
function onMouseUp(event) {
|
|
|
|
|
if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
|
|
|
|
|
// 涂鸦
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
endX = event.x - rect.x;
|
|
|
|
|
endY = event.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (event.x > rect.right || event.y > rect.bottom) {
|
|
|
|
|
graffitis.value.splice(graffitis.value.length - 1, 1);
|
|
|
|
|
nowGraffiti.value = -1;
|
|
|
|
|
} else {
|
|
|
|
|
setMouseData();
|
|
|
|
|
nowGraffiti.value = graffitis.value.length - 1;
|
|
|
|
|
}
|
|
|
|
|
window.removeEventListener('mousemove', onMouseMove);
|
|
|
|
|
window.removeEventListener('mouseup', onMouseUp);
|
|
|
|
|
} else {
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
// 拖动
|
|
|
|
|
const dragDocument: any = document.querySelector('.dragModal');
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (dragDocument) {
|
|
|
|
|
dragDocument.style.cursor = 'default';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -947,82 +967,92 @@
|
|
|
|
|
//------------------------------------------------------------------------
|
|
|
|
|
// 鼠标聚焦
|
|
|
|
|
function mouseenter(rect, type) {
|
|
|
|
|
if (rect.status != 'edit') {
|
|
|
|
|
rect.status = 'mouse';
|
|
|
|
|
document.body.style.cursor = 'pointer';
|
|
|
|
|
}
|
|
|
|
|
if (rect.status == 'edit') {
|
|
|
|
|
if (type == 'top' || type == 'bottom') {
|
|
|
|
|
document.body.style.cursor = 'ns-resize';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'left' || type == 'right') {
|
|
|
|
|
document.body.style.cursor = 'ew-resize';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'leftTop' || type == 'rightBottom') {
|
|
|
|
|
document.body.style.cursor = 'nwse-resize';
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
// 鼠标聚焦状态
|
|
|
|
|
if (rect.status != 'edit') {
|
|
|
|
|
rect.status = 'mouse';
|
|
|
|
|
document.body.style.cursor = 'pointer';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'leftBottom' || type == 'rightTop') {
|
|
|
|
|
document.body.style.cursor = 'nesw-resize';
|
|
|
|
|
// 编辑状态
|
|
|
|
|
if (rect.status == 'edit') {
|
|
|
|
|
if (type == 'top' || type == 'bottom') {
|
|
|
|
|
document.body.style.cursor = 'ns-resize';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'left' || type == 'right') {
|
|
|
|
|
document.body.style.cursor = 'ew-resize';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'leftTop' || type == 'rightBottom') {
|
|
|
|
|
document.body.style.cursor = 'nwse-resize';
|
|
|
|
|
}
|
|
|
|
|
if (type == 'leftBottom' || type == 'rightTop') {
|
|
|
|
|
document.body.style.cursor = 'nesw-resize';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 鼠标离开
|
|
|
|
|
function mouseleave(rect) {
|
|
|
|
|
if (rect.status == 'mouse' || rect.status == 'edit') {
|
|
|
|
|
if (rect.status == 'mouse') {
|
|
|
|
|
rect.status = 'success';
|
|
|
|
|
}
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
document.body.style.cursor = 'crosshair';
|
|
|
|
|
} else {
|
|
|
|
|
document.body.style.cursor = 'pointer';
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
if (rect.status == 'mouse' || rect.status == 'edit') {
|
|
|
|
|
if (rect.status == 'mouse') {
|
|
|
|
|
rect.status = 'success';
|
|
|
|
|
}
|
|
|
|
|
if (rect.status == 'edit') {
|
|
|
|
|
document.body.style.cursor = 'crosshair';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标按下
|
|
|
|
|
const mouseEditType = ref('');
|
|
|
|
|
function funMouseDownEdit(e, index, type) {
|
|
|
|
|
// 获取相对于容器的坐标
|
|
|
|
|
// graffitisClone.value = cloneDeep(graffitis.value);
|
|
|
|
|
// const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
// startX = e.x - rect.x;
|
|
|
|
|
// startY = e.y - rect.y;
|
|
|
|
|
// isDragging.value = true;
|
|
|
|
|
// nowGraffiti.value = index;
|
|
|
|
|
// mouseEditType.value = type;
|
|
|
|
|
// window.addEventListener('mousemove', funMouseMoveEdit);
|
|
|
|
|
// window.addEventListener('mouseup', funMouseUpEdit);
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
// 获取相对于容器的坐标
|
|
|
|
|
graffitisClone.value = cloneDeep(graffitis.value);
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
startX = e.x - rect.x;
|
|
|
|
|
startY = e.y - rect.y;
|
|
|
|
|
isDragging.value = true;
|
|
|
|
|
nowGraffiti.value = index;
|
|
|
|
|
mouseEditType.value = type;
|
|
|
|
|
window.addEventListener('mousemove', funMouseMoveEdit);
|
|
|
|
|
window.addEventListener('mouseup', funMouseUpEdit);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标移动
|
|
|
|
|
function funMouseMoveEdit(e) {
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
funSetMouseDataEdit();
|
|
|
|
|
}
|
|
|
|
|
funSetMouseDataEdit();
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的鼠标松开
|
|
|
|
|
function funMouseUpEdit(e) {
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (e.x > rect.right || e.y > rect.bottom) {
|
|
|
|
|
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
|
|
|
|
|
} else {
|
|
|
|
|
funSetMouseDataEdit();
|
|
|
|
|
if (graffitiFlag.value) {
|
|
|
|
|
if (!isDragging.value) return;
|
|
|
|
|
const rect = mouseCanvasRef.value.getBoundingClientRect();
|
|
|
|
|
endX = e.x - rect.x;
|
|
|
|
|
endY = e.y - rect.y;
|
|
|
|
|
if (endX < 0 && endY < 0) {
|
|
|
|
|
endX = startX;
|
|
|
|
|
endY = startY;
|
|
|
|
|
}
|
|
|
|
|
isDragging.value = false;
|
|
|
|
|
if (e.x > rect.right || e.y > rect.bottom) {
|
|
|
|
|
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
|
|
|
|
|
} else {
|
|
|
|
|
funSetMouseDataEdit();
|
|
|
|
|
}
|
|
|
|
|
window.removeEventListener('mousemove', funMouseMoveEdit);
|
|
|
|
|
window.removeEventListener('mouseup', funMouseUpEdit);
|
|
|
|
|
}
|
|
|
|
|
window.removeEventListener('mousemove', funMouseMoveEdit);
|
|
|
|
|
window.removeEventListener('mouseup', funMouseUpEdit);
|
|
|
|
|
}
|
|
|
|
|
// 编辑状态下的数据
|
|
|
|
|
function funSetMouseDataEdit() {
|
|
|
|
|
|
