Start CanvasSpot

src/canvas/index.ts

@@ -712,4 +712,21 @@ export default class CanvasModule extends Module<CanvasConfig> {
     //@ts-ignore
     ['model', 'droppable'].forEach(i => (this[i] = {}));
   }
+
+  setSpot(spot: any = {}) {
+    // CanvasSpot
+    // 'canvas:spot:add' | 'canvas:spot:update'
+    // 'canvas:spot'
+  }
+
+  getSpots(spot: any = {}) {
+    // CanvasSpot[]
+  }
+
+  removeSpot(spot: any = {}) {
+    // CanvasSpot[]
+    // 'canvas:spot:remove'
+    // 'canvas:spot'
+    // remove all spots: canvas.getSpots().forEach(spot => canvas.removeSpot(spot))
+  }
 }

src/canvas/model/CanvasSpot.ts

@@ -0,0 +1,33 @@
+import CanvasModule from '..';
+import { ModuleModel } from '../../abstract';
+import { BoxRect, LiteralUnion } from '../../common';
+import Component from '../../dom_components/model/Component';
+import Frame from './Frame';
+
+export type CanvasSpotBuiltInType = 'select' | 'hover' | 'padding' | 'margin' | 'resize';
+
+export type CanvasSpotType = LiteralUnion<CanvasSpotBuiltInType, string>;
+
+/** @private */
+export interface CanvasSpotProps<T = CanvasSpotType> {
+  id: string;
+  type: T;
+  boxRect: BoxRect;
+  component?: Component;
+  frame?: Frame;
+}
+
+export default class CanvasSpot extends ModuleModel<CanvasModule, CanvasSpotProps> {
+  defaults() {
+    return {
+      id: '',
+      type: '',
+      boxRect: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      },
+    };
+  }
+}

src/editor/model/Editor.ts

@@ -558,7 +558,7 @@ export default class EditorModel extends Model {
    */
   addSelected(el: Component | Component[], opts: any = {}) {
     const model = getModel(el, $);
-    const models = isArray(model) ? model : [model];
+    const models: Component[] = isArray(model) ? model : [model];
 
     models.forEach(model => {
       const { selected } = this;
@@ -576,7 +576,12 @@ export default class EditorModel extends Model {
       toDeselect.forEach(cmp => this.removeSelected(cmp, opts));
 
       selected.addComponent(model, opts);
-      model && this.trigger('component:select', model, opts);
+      this.trigger('component:select', model, opts);
+      this.Canvas.setSpot({
+        id: 'select',
+        type: 'select',
+        component: model,
+      });
     });
   }