Up Sorter with target spot

src/canvas/index.ts

@@ -724,7 +724,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
     ['model', 'droppable'].forEach(i => (this[i] = {}));
   }
 
-  setSpot<T extends CanvasSpotProps>(props: Omit<T, 'id'> & { id?: string }, opts: AddOptions = {}) {
+  addSpot<T extends CanvasSpotProps>(props: Omit<T, 'id'> & { id?: string }, opts: AddOptions = {}) {
     const spotProps = props as T;
     const spots = this.getSpots<T>(spotProps);
 
@@ -750,7 +750,7 @@ export default class CanvasModule extends Module<CanvasConfig> {
     return this.spots.where(spotProps.id ? { id: spotProps.id } : spotProps) as CanvasSpot<T>[];
   }
 
-  removeSpot<T extends CanvasSpotProps>(spotProps: Partial<T> = {}) {
+  removeSpots<T extends CanvasSpotProps>(spotProps: Partial<T> = {}) {
     const spots = this.getSpots(spotProps);
     const removed = this.spots.remove(spots);
     return removed as unknown as CanvasSpot<T>[];

src/editor/model/Editor.ts

@@ -578,7 +578,7 @@ export default class EditorModel extends Model {
 
       selected.addComponent(model, opts);
       this.trigger('component:select', model, opts);
-      this.Canvas.setSpot({
+      this.Canvas.addSpot({
         type: CanvasSpotBuiltInTypes.Select,
         component: model,
       });
@@ -596,7 +596,7 @@ export default class EditorModel extends Model {
     this.selected.removeComponent(component, opts);
     const cmps: Component[] = isArray(component) ? component : [component];
     cmps.forEach(component =>
-      this.Canvas.removeSpot({
+      this.Canvas.removeSpots({
         type: CanvasSpotBuiltInTypes.Select,
         component,
       })
@@ -638,14 +638,14 @@ export default class EditorModel extends Model {
       this.set('componentHovered', cmp || null, opts);
 
       if (current) {
-        Canvas.removeSpot({ type: typeHover, component: current });
-        Canvas.removeSpot({ type: typeSpacing, component: current });
+        Canvas.removeSpots({ type: typeHover, component: current });
+        Canvas.removeSpots({ type: typeSpacing, component: current });
       }
 
       if (cmp) {
-        Canvas.setSpot({ type: typeHover, component: cmp });
+        Canvas.addSpot({ type: typeHover, component: cmp });
         if (!selectedAll.includes(cmp) || config.showOffsetsSelected) {
-          Canvas.setSpot({ type: typeSpacing, component: cmp });
+          Canvas.addSpot({ type: typeSpacing, component: cmp });
         }
       }
     };

src/utils/Sorter.ts

@@ -498,7 +498,9 @@ export default class Sorter extends View {
 
     if (model?.set) {
       const cv = this.em!.Canvas;
-      cv.setSpot({ ...spotTarget, component: model as any });
+      const { Select, Hover, Spacing } = CanvasSpotBuiltInTypes;
+      [Select, Hover, Spacing].forEach(type => cv.removeSpots({ type }));
+      cv.addSpot({ ...spotTarget, component: model as any });
       !cv.hasCustomSpot(targetSpotType) && model.set('status', 'selected-parent');
       this.targetModel = model;
     }
@@ -1218,7 +1220,7 @@ export default class Sorter extends View {
     this.disableTextable();
     this.selectTargetModel();
     this.toggleSortCursor();
-    this.em?.Canvas.removeSpot(spotTarget);
+    this.em?.Canvas.removeSpots(spotTarget);
 
     delete this.toMove;
     delete this.eventMove;