make croper work
This commit is contained in:
Qing
parent
3e4021ec0d
commit
b1cebb614a
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user