Add spot add event

src/canvas/index.ts

@@ -63,6 +63,18 @@ import CanvasSpot, { CanvasSpotProps } from './model/CanvasSpot';
 
 export type CanvasEvent = 'canvas:dragenter' | 'canvas:dragover' | 'canvas:drop' | 'canvas:dragend' | 'canvas:dragdata';
 
+const canvasEvents = {
+  dragEnter: 'canvas:dragenter',
+  dragOver: 'canvas:dragover',
+  dragEnd: 'canvas:dragend',
+  dragData: 'canvas:dragdata',
+  drop: 'canvas:drop',
+  spot: 'canvas:spot',
+  spotAdd: 'canvas:spot:add',
+  spotUpdate: 'canvas:spot:update',
+  spotRemove: 'canvas:spot:remove',
+} as const;
+
 export interface ToWorldOption {
   toWorld?: boolean;
 }
@@ -87,6 +99,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
   canvas: Canvas;
   model: Canvas;
   spots: CanvasSpots;
+  events = canvasEvents;
   private canvasView?: CanvasView;
 
   /**

src/canvas/model/CanvasSpots.ts

@@ -5,8 +5,12 @@ import CanvasSpot, { CanvasSpotProps } from './CanvasSpot';
 export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
   constructor(module: CanvasModule, models: CanvasSpot[] | CanvasSpotProps[] = []) {
     super(module, models, CanvasSpot);
-    // bindAll(this, 'itemLoaded');
+    this.on('add', this.onAdd);
-    // this.on('reset', this.onReset);
+  }
-    // this.on('remove', this.onRemove);
+
+  onAdd(spot: CanvasSpot) {
+    const { module } = this;
+    const { em, events } = module;
+    em.trigger(events.spotAdd, { spot });
   }
 }