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;
-  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 {
-  cursor: nw-resize;
-  top: (-$half-handle-shortside)-1px;
-  left: (-$half-handle-shortside)-1px;
-}
+  &.ord-topleft {
+    cursor: nw-resize;
+    top: (-$half-handle-shortside)-1px;
+    left: (-$half-handle-shortside)-1px;
+  }
 
-.ord-topright {
-  cursor: ne-resize;
-  top: -($half-handle-shortside)-1px;
-  right: -($half-handle-shortside)-1px;
-}
+  &.ord-topright {
+    cursor: ne-resize;
+    top: -($half-handle-shortside)-1px;
+    right: -($half-handle-shortside)-1px;
+  }
 
-.ord-bottomright {
-  cursor: se-resize;
-  bottom: -($half-handle-shortside)-1px;
-  right: -($half-handle-shortside)-1px;
-}
+  &.ord-bottomright {
+    cursor: se-resize;
+    bottom: -($half-handle-shortside)-1px;
+    right: -($half-handle-shortside)-1px;
+  }
 
-.ord-bottomleft {
-  cursor: sw-resize;
-  bottom: -($half-handle-shortside)-1px;
-  left: -($half-handle-shortside)-1px;
-}
+  &.ord-bottomleft {
+    cursor: sw-resize;
+    bottom: -($half-handle-shortside)-1px;
+    left: -($half-handle-shortside)-1px;
+  }
 
-.ord-top,
-.ord-bottom {
-  left: calc(50% - $half-handle-shortside);
-  cursor: ns-resize;
-}
+  &.ord-top,
+  &.ord-bottom {
+    left: calc(50% - $half-handle-shortside);
+    cursor: ns-resize;
+  }
 
-.ord-top {
-  top: (-$half-handle-shortside)-1px;
-}
+  &.ord-top {
+    top: (-$half-handle-shortside)-1px;
+  }
 
-.ord-bottom {
-  bottom: -($half-handle-shortside)-1px;
-}
+  &.ord-bottom {
+    bottom: -($half-handle-shortside)-1px;
+  }
 
-.ord-left,
-.ord-right {
-  top: calc(50% - $half-handle-shortside);
-  cursor: ew-resize;
-}
+  &.ord-left,
+  &.ord-right {
+    top: calc(50% - $half-handle-shortside);
+    cursor: ew-resize;
+  }
 
-.ord-left {
-  left: (-$half-handle-shortside)-1px;
-}
+  &.ord-left {
+    left: (-$half-handle-shortside)-1px;
+  }
 
-.ord-right {
-  right: -($half-handle-shortside)-1px;
+  &.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
+
+    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) {
       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': {
-          // TODO: 添加四个角以及 drag bar handle
-          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)
-          }
+          moveTop()
           break
         }
         case 'right': {
-          const offset = Math.round((curX - evData.startResizeX) / scale)
-          const newWidth = evData.initWidth + offset
-          if (checkLeftRightLimit(evData.initX, newWidth)) {
-            setWidth(newWidth)
-          }
+          moveRight()
           break
         }
         case 'bottom': {
-          const offset = Math.round((curY - evData.startResizeY) / scale)
-          const newHeight = evData.initHeight + offset
-          if (checkTopBottomLimit(evData.initY, newHeight)) {
-            setHeight(newHeight)
-          }
+          moveBottom()
           break
         }
         case 'left': {
-          const offset = Math.round((curX - evData.startResizeX) / scale)
-          const newWidth = evData.initWidth - offset
-          const newX = evData.initX + offset
-          if (checkLeftRightLimit(newX, newWidth)) {
-            setWidth(newWidth)
-            setX(newX)
-          }
+          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">