make croper work

lama_cleaner/app/src/components/Croper/Croper.scss

@@ -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;
+  // 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);
 }
 
+.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-top,
-.ord-bottom {
+  &.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-left,
-.ord-right {
+  &.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;
+  }
 }

lama_cleaner/app/src/components/Croper/Croper.tsx

@@ -83,43 +83,78 @@ const Croper = (props: Props) => {
     }
     const curX = e.clientX
     const curY = e.clientY
-    if (isResizing) {
+
-      switch (evData.ord) {
+    const offsetY = Math.round((curY - evData.startResizeY) / scale)
-        case 'top': {
+    const offsetX = Math.round((curX - evData.startResizeX) / scale)
-          // TODO: 添加四个角以及 drag bar handle
+
-          const offset = Math.round((curY - evData.startResizeY) / scale)
+    const moveTop = () => {
-          const newHeight = evData.initHeight - offset
+      const newHeight = evData.initHeight - offsetY
-          const newY = evData.initY + offset
+      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 moveBottom = () => {
-          const newWidth = evData.initWidth + offset
+      const newHeight = evData.initHeight + offsetY
-          if (checkLeftRightLimit(evData.initX, newWidth)) {
-            setWidth(newWidth)
-          }
-          break
-        }
-        case 'bottom': {
-          const offset = Math.round((curY - evData.startResizeY) / scale)
-          const newHeight = evData.initHeight + offset
       if (checkTopBottomLimit(evData.initY, newHeight)) {
         setHeight(newHeight)
       }
-          break
     }
-        case 'left': {
+
-          const offset = Math.round((curX - evData.startResizeX) / scale)
+    const moveLeft = () => {
-          const newWidth = evData.initWidth - offset
+      const newWidth = evData.initWidth - offsetX
-          const newX = evData.initX + offset
+      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">