Update spots on other events

src/canvas/index.ts

@@ -61,7 +61,16 @@ import FrameView from './view/FrameView';
 import CanvasSpots from './model/CanvasSpots';
 import CanvasSpot, { CanvasSpotProps } from './model/CanvasSpot';
 
-export type CanvasEvent = 'canvas:dragenter' | 'canvas:dragover' | 'canvas:drop' | 'canvas:dragend' | 'canvas:dragdata';
+export type CanvasEvent =
+  | 'canvas:dragenter'
+  | 'canvas:dragover'
+  | 'canvas:drop'
+  | 'canvas:dragend'
+  | 'canvas:dragdata'
+  | 'canvas:spot'
+  | 'canvas:spot:add'
+  | 'canvas:spot:update'
+  | 'canvas:spot:remove';
 
 const canvasEvents = {
   dragEnter: 'canvas:dragenter',

src/canvas/model/CanvasSpots.ts

@@ -13,9 +13,9 @@ export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
     this.on('change', this.onChange);
     this.on('remove', this.onRemove);
     const { em } = this;
-    this.refreshDbn = debounce(() => this.refresh(), 100);
+    this.refreshDbn = debounce(() => this.refresh(), 0);
-    const dbnEvents = 'component:resize styleable:change component:input';
+    const evToRefreshDbn = 'component:resize styleable:change component:input component:update undo redo';
-    this.listenTo(em, dbnEvents, () => this.refreshDbn());
+    this.listenTo(em, evToRefreshDbn, () => this.refreshDbn());
   }
 
   get em() {