feat(cropper-selection): add $clear method and improve $reset met…

…hod (#1157)
fengyuanchen · Apr 21, 2024 · 8e6dbb0 · 8e6dbb0
1 parent 5b6ed96
commit 8e6dbb0
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 6 deletions.
diff --git a/docs/.vitepress/components/CropperPlayground.vue b/docs/.vitepress/components/CropperPlayground.vue
@@ -880,6 +880,16 @@
             </button>
           </li>
           <li>
+            <button
+              type="button"
+              class="btn btn-outline-primary btn-sm"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="selection.$center()"
+              @click="$refs.cropperSelection.$center()"
+            >
+              $center()
+            </button>
             <button
               type="button"
               class="btn btn-outline-primary btn-sm"
@@ -895,10 +905,10 @@
               class="btn btn-outline-primary btn-sm"
               data-toggle="tooltip"
               data-placement="top"
-              title="selection.$center()"
-              @click="$refs.cropperSelection.$center()"
+              title="selection.$clear()"
+              @click="$refs.cropperSelection.$clear()"
             >
-              $center()
+              $clear()
             </button>
           </li>
           <li>

diff --git a/docs/api/cropper-selection.md b/docs/api/cropper-selection.md
@@ -301,6 +301,15 @@ Changes the position and/or size of the selection.
 
 Resets the selection to its initial position and size.
 
+### $clear
+
+- **Syntax**: `$clear()`
+- **Returns**:
+  - Type: `CropperSelection`
+  - The element instance for chaining.
+
+Clears the selection.
+
 ### $render
 
 - **Syntax**: `$render()`

diff --git a/docs/zh/api/cropper-selection.md b/docs/zh/api/cropper-selection.md
@@ -301,6 +301,15 @@
 
 将选区重置为其初始位置和大小。
 
+### $clear
+
+- **语法**：`$clear()`
+- **返回值**：
+  - 类型：`CropperSelection`
+  - 元素实例。
+
+清空选区。
+
 ### $render
 
 - **语法**：`$render()`

diff --git a/packages/element-selection/src/index.ts b/packages/element-selection/src/index.ts
@@ -60,6 +60,14 @@ export default class CropperSelection extends CropperElement {
 
   protected $style = style;
 
+  private $x = 0;
+
+  private $y = 0;
+
+  private $width = 0;
+
+  private $height = 0;
+
   x = 0;
 
   y = 0;
@@ -220,6 +228,12 @@ export default class CropperSelection extends CropperElement {
 
         this.$change(this.x, this.y, width, height);
         this.$center();
+
+        // Overrides the initial position and size
+        this.$x = this.x;
+        this.$y = this.y;
+        this.$width = this.width;
+        this.$height = this.height;
       }
 
       this.$onCanvasActionStart = this.$handleActionStart.bind(this);
@@ -304,8 +318,7 @@ export default class CropperSelection extends CropperElement {
           });
         }
       } else {
-        this.$reset();
-        this.hidden = true;
+        this.$clear();
       }
     }
   }
@@ -865,7 +878,17 @@ export default class CropperSelection extends CropperElement {
    * @returns {CropperSelection} Returns `this` for chaining.
    */
   $reset(): this {
-    return this.$change(0, 0, 0, 0);
+    return this.$change(this.$x, this.$y, this.$width, this.$height);
+  }
+
+  /**
+   * Clears the selection.
+   * @returns {CropperSelection} Returns `this` for chaining.
+   */
+  $clear(): this {
+    this.$change(0, 0, 0, 0);
+    this.hidden = true;
+    return this;
   }
 
   /**