make croper work

This commit is contained in:
Qing 2022-09-21 21:20:55 +08:00
parent 3e4021ec0d
commit b1cebb614a
2 changed files with 169 additions and 73 deletions

View File

@ -2,9 +2,11 @@
$drag-handle-shortside: 12px;
$drag-handle-longside: 40px;
$drag-bar-size: 12px;
$half-handle-shortside: math.div($drag-handle-shortside, 2);
$half-handle-longside: math.div($drag-handle-longside, 2);
$half-drag-bar-size: math.div($drag-bar-size, 2);
.crop-border {
outline-color: var(--yellow-accent);
@ -50,13 +52,52 @@ $half-handle-longside: math.div($drag-handle-longside, 2);
z-index: 2;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
// display: flex;
// flex-direction: column;
// align-items: center;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
.drag-bar {
position: absolute;
pointer-events: auto;
// display: none;
&.ord-top {
top: 0;
left: 0;
width: 100%;
height: $drag-bar-size;
margin-top: -$half-drag-bar-size;
cursor: ns-resize;
}
&.ord-right {
right: 0;
top: 0;
width: $drag-bar-size;
height: 100%;
margin-right: -$half-drag-bar-size;
cursor: ew-resize;
}
&.ord-bottom {
bottom: 0;
left: 0;
width: 100%;
height: $drag-bar-size;
margin-bottom: -$half-drag-bar-size;
cursor: ns-resize;
}
&.ord-left {
top: 0;
left: 0;
width: $drag-bar-size;
height: 100%;
margin-left: -$half-drag-bar-size;
cursor: ew-resize;
}
}
.drag-handle {
width: $drag-handle-shortside;
height: $drag-handle-shortside;
@ -71,56 +112,56 @@ $half-handle-longside: math.div($drag-handle-longside, 2);
&:hover {
background-color: var(--yellow-accent);
}
}
.ord-topleft {
&.ord-topleft {
cursor: nw-resize;
top: (-$half-handle-shortside)-1px;
left: (-$half-handle-shortside)-1px;
}
}
.ord-topright {
&.ord-topright {
cursor: ne-resize;
top: -($half-handle-shortside)-1px;
right: -($half-handle-shortside)-1px;
}
}
.ord-bottomright {
&.ord-bottomright {
cursor: se-resize;
bottom: -($half-handle-shortside)-1px;
right: -($half-handle-shortside)-1px;
}
}
.ord-bottomleft {
&.ord-bottomleft {
cursor: sw-resize;
bottom: -($half-handle-shortside)-1px;
left: -($half-handle-shortside)-1px;
}
}
.ord-top,
.ord-bottom {
&.ord-top,
&.ord-bottom {
left: calc(50% - $half-handle-shortside);
cursor: ns-resize;
}
}
.ord-top {
&.ord-top {
top: (-$half-handle-shortside)-1px;
}
}
.ord-bottom {
&.ord-bottom {
bottom: -($half-handle-shortside)-1px;
}
}
.ord-left,
.ord-right {
&.ord-left,
&.ord-right {
top: calc(50% - $half-handle-shortside);
cursor: ew-resize;
}
}
.ord-left {
&.ord-left {
left: (-$half-handle-shortside)-1px;
}
}
.ord-right {
&.ord-right {
right: -($half-handle-shortside)-1px;
}
}

View File

@ -83,43 +83,78 @@ const Croper = (props: Props) => {
}
const curX = e.clientX
const curY = e.clientY
if (isResizing) {
switch (evData.ord) {
case 'top': {
// TODO: 添加四个角以及 drag bar handle
const offset = Math.round((curY - evData.startResizeY) / scale)
const newHeight = evData.initHeight - offset
const newY = evData.initY + offset
const offsetY = Math.round((curY - evData.startResizeY) / scale)
const offsetX = Math.round((curX - evData.startResizeX) / scale)
const moveTop = () => {
const newHeight = evData.initHeight - offsetY
const newY = evData.initY + offsetY
if (checkTopBottomLimit(newY, newHeight)) {
setHeight(newHeight)
setY(newY)
}
break
}
case 'right': {
const offset = Math.round((curX - evData.startResizeX) / scale)
const newWidth = evData.initWidth + offset
if (checkLeftRightLimit(evData.initX, newWidth)) {
setWidth(newWidth)
}
break
}
case 'bottom': {
const offset = Math.round((curY - evData.startResizeY) / scale)
const newHeight = evData.initHeight + offset
const moveBottom = () => {
const newHeight = evData.initHeight + offsetY
if (checkTopBottomLimit(evData.initY, newHeight)) {
setHeight(newHeight)
}
break
}
case 'left': {
const offset = Math.round((curX - evData.startResizeX) / scale)
const newWidth = evData.initWidth - offset
const newX = evData.initX + offset
const moveLeft = () => {
const newWidth = evData.initWidth - offsetX
const newX = evData.initX + offsetX
if (checkLeftRightLimit(newX, newWidth)) {
setWidth(newWidth)
setX(newX)
}
}
const moveRight = () => {
const newWidth = evData.initWidth + offsetX
if (checkLeftRightLimit(evData.initX, newWidth)) {
setWidth(newWidth)
}
}
if (isResizing) {
switch (evData.ord) {
case 'topleft': {
moveTop()
moveLeft()
break
}
case 'topright': {
moveTop()
moveRight()
break
}
case 'bottomleft': {
moveBottom()
moveLeft()
break
}
case 'bottomright': {
moveBottom()
moveRight()
break
}
case 'top': {
moveTop()
break
}
case 'right': {
moveRight()
break
}
case 'bottom': {
moveBottom()
break
}
case 'left': {
moveLeft()
break
}
@ -129,8 +164,6 @@ const Croper = (props: Props) => {
}
if (isMoving) {
const offsetX = Math.round((curX - evData.startResizeX) / scale)
const offsetY = Math.round((curY - evData.startResizeY) / scale)
const newX = evData.initX + offsetX
const newY = evData.initY + offsetY
if (
@ -197,6 +230,27 @@ const Croper = (props: Props) => {
onFocus={onDragFocus}
onPointerDown={onCropPointerDown}
>
<div
className="drag-bar ord-top"
data-ord="top"
style={{ transform: `scale(${1 / scale})` }}
/>
<div
className="drag-bar ord-right"
data-ord="right"
style={{ transform: `scale(${1 / scale})` }}
/>
<div
className="drag-bar ord-bottom"
data-ord="bottom"
style={{ transform: `scale(${1 / scale})` }}
/>
<div
className="drag-bar ord-left"
data-ord="left"
style={{ transform: `scale(${1 / scale})` }}
/>
<div
className="drag-handle ord-topleft"
data-ord="topleft"
@ -289,7 +343,8 @@ const Croper = (props: Props) => {
onPointerDown={onInfoBarPointerDown}
style={{
transform: `scale(${1 / scale})`,
top: `${-28 / scale - 14}px`,
top: `${10 / scale}px`,
left: `${10 / scale}px`,
}}
>
<div className="crop-size">