Update activate (#6556)

* Update activate

* Add __clearAttributes to ComponentView

packages/core/src/block_manager/index.ts

@@ -134,14 +134,16 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
       const toActive = block.get('activate') || oldActive;
       const toSelect = block.get('select');
       const first = isArray(cmp) ? cmp[0] : cmp;
+      const selected = toSelect || (toActive && toSelect !== false);
 
-      if (toSelect || (toActive && toSelect !== false)) {
+      if (selected) {
-        em.setSelected(first);
+        em.setSelected(first, { activate: toActive });
+      } else if (toActive) {
+        first.trigger('active');
       }
 
-      if (toActive) {
+      if (toActive && oldActive) {
-        first.trigger('active');
+        first.unset(oldKey);
-        oldActive && first.unset(oldKey);
       }
 
       if (block.get('resetId')) {

packages/core/src/block_manager/view/BlockView.ts

@@ -93,7 +93,7 @@ export default class BlockView extends View<Block> {
     }
 
     const result = target && target.append(content, { at: insertAt })[0];
-    result && em.setSelected(result, { scroll: 1 });
+    result && em.setSelected(result, { scroll: true });
   }
 
   /**

packages/core/src/commands/view/SelectComponent.ts

@@ -327,7 +327,7 @@ export default {
    * @param  {Component} model
    * @param  {Event} event
    */
-  select(model: Component, event = {}) {
+  select(model: Component, event: MouseEvent) {
     if (!model) return;
     const { em } = this;
     em.setSelected(model, { event, useValid: true });

packages/core/src/dom_components/view/ComponentView.ts

@@ -48,6 +48,7 @@ TComp> {
   getChildrenSelector?: Function;
   getTemplate?: Function;
   scriptContainer?: HTMLElement;
+  rendered = false;
 
   preinitialize(opt: any = {}) {
     this.opts = opt;
@@ -136,7 +137,7 @@ TComp> {
   /**
    * Callback executed when the `active` event is triggered on component
    */
-  onActive(ev: Event) {}
+  onActive(ev?: Event) {}
 
   /**
    * Callback executed when the `disable` event is triggered on component
@@ -359,9 +360,7 @@ TComp> {
       ...(textable && { contenteditable: 'false' }),
     };
 
-    // Remove all current attributes
+    this.__clearAttributes();
-    each(el.attributes, (attr) => attrs.push(attr.nodeName));
-    attrs.forEach((attr) => $el.removeAttr(attr));
     this.updateStyle();
     this.updateHighlight();
     const attr = {
@@ -375,6 +374,13 @@ TComp> {
     $el.attr(attr);
   }
 
+  __clearAttributes() {
+    const { el, $el } = this;
+    const attrs: string[] = [];
+    each(el.attributes, (attr) => attrs.push(attr.nodeName));
+    attrs.forEach((attr) => $el.removeAttr(attr));
+  }
+
   /**
    * Update component content
    * @private
@@ -591,6 +597,7 @@ TComp> {
         view: this,
         el,
       });
+      this.rendered = true;
     }
   }
 

packages/core/src/editor/index.ts

@@ -423,7 +423,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    *  editor.select(model);
    * });
    */
-  select(el?: EditorModelParam<'setSelected', 0>, opts?: { scroll?: boolean }) {
+  select(el?: EditorModelParam<'setSelected', 0>, opts?: EditorModelParam<'setSelected', 1>) {
     this.em.setSelected(el, opts);
     return this;
   }

packages/core/src/editor/model/Editor.ts

@@ -45,7 +45,7 @@ import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 import DataSourceManager from '../../data_sources';
 import { ComponentsEvents } from '../../dom_components/types';
 import { InitEditorConfig } from '../..';
-import { EditorEvents } from '../types';
+import { EditorEvents, SelectComponentOptions } from '../types';
 
 Backbone.$ = $;
 
@@ -513,7 +513,7 @@ export default class EditorModel extends Model {
    * @param  {Object} [opts={}] Options, optional
    * @public
    */
-  setSelected(el?: Component | Component[], opts: any = {}) {
+  setSelected(el?: Component | Component[], opts: SelectComponentOptions = {}) {
     const { event } = opts;
     const ctrlKey = event && (event.ctrlKey || event.metaKey);
     const { shiftKey } = event || {};
@@ -600,7 +600,7 @@ export default class EditorModel extends Model {
    * @param  {Object} [opts={}] Options, optional
    * @public
    */
-  addSelected(component: Component | Component[], opts: any = {}) {
+  addSelected(component: Component | Component[], opts: SelectComponentOptions = {}) {
     const models: Component[] = isArray(component) ? component : [component];
 
     models.forEach((model) => {
@@ -624,6 +624,16 @@ export default class EditorModel extends Model {
         type: CanvasSpotBuiltInTypes.Select,
         component: model,
       });
+
+      if (opts.activate) {
+        const view = model.getView();
+
+        if (view?.rendered) {
+          view.onActive(opts.event);
+        } else {
+          model.once(ComponentsEvents.render, ({ view }) => view.onActive(opts.event));
+        }
+      }
     });
   }
 

packages/core/src/editor/types.ts

@@ -74,3 +74,12 @@ export enum EditorEvents {
 
 // need this to avoid the TS documentation generator to break
 export default EditorEvents;
+
+export interface SelectComponentOptions {
+  scroll?: boolean;
+  activate?: boolean;
+  event?: PointerEvent | MouseEvent | KeyboardEvent;
+  abort?: boolean;
+  useValid?: boolean;
+  forceChange?: boolean;
+}

packages/core/src/navigator/index.ts

@@ -276,7 +276,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
   setLayerData(component: Component, data: Partial<Omit<LayerData, 'components'>>, opts = {}) {
     const { em, config } = this;
     const { open, selected, hovered, visible, locked, name } = data;
-    const cmpOpts = { fromLayers: true, ...opts };
+    const cmpOpts = { fromLayers: true, ...opts } as any;
 
     if (isDef(open)) {
       this.setOpen(component, open!);

packages/core/test/specs/editor/index.ts

@@ -136,7 +136,7 @@ describe('Editor', () => {
       event: {
         shiftKey: true,
       },
-    };
+    } as any;
 
     em.setSelected(added[0], callSelectedOptions);
     em.setSelected(added[1], callSelectedOptions);
@@ -157,7 +157,7 @@ describe('Editor', () => {
       event: {
         shiftKey: true,
       },
-    };
+    } as any;
 
     const firstComponent = all[keys(all)[0]];
     firstComponent.em.setEditing(true);
@@ -179,7 +179,7 @@ describe('Editor', () => {
       event: {
         shiftKey: true,
       },
-    };
+    } as any;
 
     const firstComponent = all[keys(all)[0]];
     firstComponent.em.setEditing(true);