refactor(element-shade): bind change event on the selection directly

Author: fengyuanchen

packages/element-shade/src/index.ts

@@ -17,18 +17,19 @@ import {
 import style from './style';
 
 const canvasCache = new WeakMap();
+const selectionCache = new WeakMap();
 
 export default class CropperShade extends CropperElement {
   static $name = CROPPER_SHADE;
 
   static $version = '__VERSION__';
 
-  protected $onCanvasChange: EventListener | null = null;
-
   protected $onCanvasActionEnd: EventListener | null = null;
 
   protected $onCanvasActionStart: EventListener | null = null;
 
+  protected $onSelectionChange: EventListener | null = null;
+
   protected $style = style;
 
   x = 0;
@@ -51,6 +52,14 @@ export default class CropperShade extends CropperElement {
     return canvasCache.get(this);
   }
 
+  protected set $selection(element: CropperSelection) {
+    selectionCache.set(this, element);
+  }
+
+  protected get $selection(): CropperSelection {
+    return selectionCache.get(this);
+  }
+
   protected static get observedAttributes(): string[] {
     return super.observedAttributes.concat([
       'height',
@@ -74,6 +83,7 @@ export default class CropperShade extends CropperElement {
       );
 
       if ($selection) {
+        this.$selection = $selection;
         this.$onCanvasActionStart = (event) => {
           if ($selection.hidden && (event as CustomEvent).detail.action === ACTION_SELECT) {
             this.hidden = false;
@@ -84,7 +94,7 @@ export default class CropperShade extends CropperElement {
             this.hidden = true;
           }
         };
-        this.$onCanvasChange = () => {
+        this.$onSelectionChange = () => {
           const {
             x,
             y,
@@ -100,17 +110,17 @@ export default class CropperShade extends CropperElement {
         };
         on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
         on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
-        on($canvas, EVENT_CHANGE, this.$onCanvasChange);
+        on($selection, EVENT_CHANGE, this.$onSelectionChange);
       }
     }
 
     this.$render();
   }
 
   protected disconnectedCallback(): void {
-    const { $canvas } = this;
+    const { $canvas, $selection } = this;
 
-    if ($canvas) {
+    if ($canvas && $selection) {
       if (this.$onCanvasActionStart) {
         off($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
         this.$onCanvasActionStart = null;
@@ -121,9 +131,9 @@ export default class CropperShade extends CropperElement {
         this.$onCanvasActionEnd = null;
       }
 
-      if (this.$onCanvasChange) {
-        off($canvas, EVENT_CHANGE, this.$onCanvasChange);
-        this.$onCanvasChange = null;
+      if (this.$onSelectionChange) {
+        off($selection, EVENT_CHANGE, this.$onSelectionChange);
+        this.$onSelectionChange = null;
       }
     }