Remove selected spots

src/canvas/index.ts

@@ -733,8 +733,6 @@ export default class CanvasModule extends Module<CanvasConfig> {
   setSpot<T extends CanvasSpotProps>(spotProps: Partial<T> = {}, opts: AddOptions = {}) {
     const spots = this.getSpots(spotProps);
 
-    console.log('setSpot');
-
     if (spots.length) {
       const spot = spots[0];
       spot.set(spotProps);
@@ -747,7 +745,6 @@ export default class CanvasModule extends Module<CanvasConfig> {
     const spot = new CanvasSpot(this, {
       ...spotProps,
       id: spotProps.id || `cs_${frameId}_${cmp?.getId()}`,
-      // TODO type should be mandatory
       type: spotProps.type || '',
     });
 
@@ -763,6 +760,10 @@ export default class CanvasModule extends Module<CanvasConfig> {
 
   removeSpot<T extends CanvasSpotProps>(spotProps: Partial<T> = {}) {
     const spots = this.getSpots(spotProps);
+    console.log('removeSpot', {
+      spotProps,
+      spots,
+    });
     return this.spots.remove(spots);
     // 'canvas:spot:remove'
     // 'canvas:spot'

src/canvas/model/CanvasSpot.ts

@@ -4,7 +4,15 @@ 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 enum CanvasSpotBuiltInTypes {
+  Select = 'select',
+  Hover = 'hover',
+  Padding = 'padding',
+  Margin = 'margin',
+  Resize = 'resize',
+}
+
+export type CanvasSpotBuiltInType = `${CanvasSpotBuiltInTypes}`;
 
 export type CanvasSpotType = LiteralUnion<CanvasSpotBuiltInType, string>;
 

src/editor/model/Editor.ts

@@ -42,6 +42,7 @@ import CssRules from '../../css_composer/model/CssRules';
 import Frame from '../../canvas/model/Frame';
 import { ComponentAdd, DragMode } from '../../dom_components/model/types';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
+import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 
 Backbone.$ = $;
 
@@ -578,7 +579,7 @@ export default class EditorModel extends Model {
       selected.addComponent(model, opts);
       this.trigger('component:select', model, opts);
       this.Canvas.setSpot({
-        type: 'select',
+        type: CanvasSpotBuiltInTypes.Select,
         component: model,
       });
     });
@@ -591,7 +592,15 @@ export default class EditorModel extends Model {
    * @public
    */
   removeSelected(el: Component | Component[], opts = {}) {
-    this.selected.removeComponent(getModel(el, $), opts);
+    const component = getModel(el, $);
+    this.selected.removeComponent(component, opts);
+    const cmps: Component[] = isArray(component) ? component : [component];
+    cmps.forEach(component =>
+      this.Canvas.removeSpot({
+        type: CanvasSpotBuiltInTypes.Select,
+        component,
+      })
+    );
   }
 
   /**