fix marker events not firing on restored markers

fixes #183
ailon · Mar 4, 2024 · 5d0d70c · 5d0d70c
1 parent c782fa0
commit 5d0d70c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/MarkerArea.ts b/src/MarkerArea.ts
@@ -446,6 +446,7 @@ export class MarkerArea {
     this.switchToSelectMode = this.switchToSelectMode.bind(this);
     this.addDefs = this.addDefs.bind(this);
     this.addDefsToImage = this.addDefsToImage.bind(this);
+    this.addMarkerEvents = this.addMarkerEvents.bind(this);
   }
 
   private open(): void {
@@ -1445,6 +1446,7 @@ export class MarkerArea {
       if (markerType !== undefined) {
         const marker = this.addNewMarker(markerType);
         marker.restoreState(markerState);
+        this.addMarkerEvents(marker);
         this.markers.push(marker);
       }
     });
@@ -1499,10 +1501,7 @@ export class MarkerArea {
       this.setCurrentMarker();
       this.addUndoStep();
       this._currentMarker = this.addNewMarker(mType);
-      this._currentMarker.onMarkerCreated = this.markerCreated;
-      this._currentMarker.onColorChanged = this.colorChanged;
-      this._currentMarker.onFillColorChanged = this.fillColorChanged;
-      this._currentMarker.onStateChanged = this.markerStateChanged;
+      this.addMarkerEvents(this._currentMarker);
       this.markerImage.style.cursor = 'crosshair';
       this.toolbar.setActiveMarkerButton(mType.typeName);
       this.toolbox.setPanelButtons(this._currentMarker.toolboxPanels);
@@ -1512,6 +1511,13 @@ export class MarkerArea {
     }
   }
 
+  private addMarkerEvents(marker: MarkerBase) {
+    marker.onMarkerCreated = this.markerCreated;
+    marker.onColorChanged = this.colorChanged;
+    marker.onFillColorChanged = this.fillColorChanged;
+    marker.onStateChanged = this.markerStateChanged;
+  }
+
   private markerCreated(marker: MarkerBase) {
     this.mode = 'select';
     this.markerImage.style.cursor = 'default';

diff --git a/test/manual/index.ts b/test/manual/index.ts
@@ -54,7 +54,7 @@ export class Experiments {
         // console.log(`redo possible?: ${event.markerArea.isRedoPossible}`);
       });
       this.markerArea1.addEventListener('markerchange', (event) => {
-        // console.log(`marker state change: ${JSON.stringify(event.marker?.getState())}`);
+        console.log(`marker state change: ${JSON.stringify(event.marker?.getState())}`);
       });
 
       // this.markerArea1.addEventListener('markerselect', event => {