优化图表编辑器和图片裁剪工具样式
This commit is contained in:
parent
c77dfb4c5a
commit
952ffb2206
|
@ -162,11 +162,16 @@ export default defineComponent({
|
|||
tempRangeSize.value = { width, height }
|
||||
}
|
||||
|
||||
document.onmouseup = () => {
|
||||
document.onmouseup = e => {
|
||||
isMouseDown = false
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
|
||||
const endPageX = e.pageX
|
||||
const endPageY = e.pageY
|
||||
|
||||
if(startPageX === endPageX && startPageY === endPageY) return
|
||||
|
||||
let width = tempRangeSize.value.width
|
||||
let height = tempRangeSize.value.height
|
||||
if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
|
||||
|
@ -247,13 +252,31 @@ export default defineComponent({
|
|||
}
|
||||
.resizable {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: -4px 0 0 -4px;
|
||||
background-color: $themeColor;
|
||||
margin: -9px 0 0 -9px;
|
||||
cursor: nwse-resize;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: $themeColor;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $themeColor;
|
||||
}
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
|
|
|
@ -39,8 +39,12 @@
|
|||
:key="point"
|
||||
@mousedown.stop="$event => scaleClipRange($event, point)"
|
||||
>
|
||||
<SvgWrapper width="12" height="12" fill="#fff" stroke="#666">
|
||||
<path d="M 12 0 L 0 0 L 0 12 L 3 12 L 3 3 L 12 3 L 12 0 Z"></path>
|
||||
<SvgWrapper width="12" height="12" fill="#fff" stroke="#333">
|
||||
<path
|
||||
stroke-width="0.3"
|
||||
shape-rendering="crispEdges"
|
||||
d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
|
||||
></path>
|
||||
</SvgWrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -288,8 +292,8 @@ export default defineComponent({
|
|||
isSettingClipRange.value = true
|
||||
let isMouseDown = true
|
||||
|
||||
const minWidth = 32 / props.width * 100
|
||||
const minHeight = 32 / props.height * 100
|
||||
const minWidth = 50 / props.width * 100
|
||||
const minHeight = 50 / props.height * 100
|
||||
|
||||
const startPageX = e.pageX
|
||||
const startPageY = e.pageY
|
||||
|
|
Loading…
Reference in New Issue