kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

make croper work

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
lama_cleaner/app/src/components/Croper/Croper.scss
View File

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

111
lama_cleaner/app/src/components/Croper/Croper.tsx
View File

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