Move events

src/canvas/index.ts

@@ -55,34 +55,14 @@ import EditorModel from '../editor/model/Editor';
 import { getElement, getViewEl } from '../utils/mixins';
 import defaults, { CanvasConfig } from './config/config';
 import Canvas from './model/Canvas';
+import CanvasSpot, { CanvasSpotProps } from './model/CanvasSpot';
+import CanvasSpots from './model/CanvasSpots';
 import Frame from './model/Frame';
+import { CanvasEvents } from './types';
 import CanvasView, { FitViewportOptions } from './view/CanvasView';
 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'
-  | 'canvas:spot'
-  | 'canvas:spot:add'
-  | 'canvas:spot:update'
-  | 'canvas:spot:remove';
-
-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 type CanvasEvent = `${CanvasEvents}`;
 
 export interface ToWorldOption {
   toWorld?: boolean;
@@ -108,7 +88,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
   canvas: Canvas;
   model: Canvas;
   spots: CanvasSpots;
-  events = canvasEvents;
+  events = CanvasEvents;
   private canvasView?: CanvasView;
 
   /**

src/canvas/types.ts

@@ -0,0 +1,55 @@
+export enum CanvasEvents {
+  /**
+   *  Something is dragged inside the canvas, `DataTransfer` instance passed as an argument.
+   */
+  dragEnter = 'canvas:dragenter',
+  /**
+   * Something is dragging on the canvas, `DataTransfer` instance passed as an argument.
+   */
+  dragOver = 'canvas:dragover',
+  /**
+   * When a drag operation is ended, `DataTransfer` instance passed as an argument.
+   */
+  dragEnd = 'canvas:dragend',
+  /**
+   * On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
+   * By changing `result.content` you're able to customize what is dropped.
+   */
+  dragData = 'canvas:dragdata',
+  /**
+   * Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments.
+   */
+  drop = 'canvas:drop',
+  /**
+   * Spots updated.
+   * @example
+   * editor.on('canvas:spot', () => {
+   *  console.log('Spots', editor.Canvas.getSpots());
+   * });
+   */
+  spot = 'canvas:spot',
+  /**
+   * New canvas spot added.
+   * @example
+   * editor.on('canvas:spot:add', ({ spot }) => {
+   *  console.log('Spot added', spot);
+   * });
+   */
+  spotAdd = 'canvas:spot:add',
+  /**
+   * Canvas spot updated.
+   * @example
+   * editor.on('canvas:spot:update', ({ spot }) => {
+   *  console.log('Spot updated', spot);
+   * });
+   */
+  spotUpdate = 'canvas:spot:update',
+  /**
+   * Canvas spot removed.
+   * @example
+   * editor.on('canvas:spot:remove', ({ spot }) => {
+   *  console.log('Spot removed', spot);
+   * });
+   */
+  spotRemove = 'canvas:spot:remove',
+}

src/commands/view/SelectComponent.ts

@@ -30,7 +30,16 @@ let showOffsets: boolean;
  */
 export default {
   init() {
-    bindAll(this, 'onHover', 'onOut', 'onClick', 'onFrameScroll', 'onFrameUpdated', 'onContainerChange');
+    bindAll(
+      this,
+      'onHover',
+      'onOut',
+      'onClick',
+      'onFrameScroll',
+      'onFrameResize',
+      'onFrameUpdated',
+      'onContainerChange'
+    );
   },
 
   enable() {
@@ -73,6 +82,7 @@ export default {
       methods[method](body, 'click', this.onClick);
       // @ts-ignore
       methods[method](win, 'scroll', this.onFrameScroll, true);
+      methods[method](win, 'resize', this.onFrameResize);
     };
     methods[method](window, 'resize', this.onFrameUpdated);
     methods[method](listenToEl, 'scroll', this.onContainerChange);
@@ -549,6 +559,10 @@ export default {
     this.canvas.refreshSpots();
   },
 
+  onFrameResize() {
+    this.canvas.refreshSpots();
+  },
+
   updateTools() {
     this.updateLocalPos();
     this.updateGlobalPos();