Refactor Traits Collection

.editorconfig

@@ -8,3 +8,11 @@ insert_final_newline = true
 charset = utf-8
 indent_style = space
 indent_size = 2
+quote_type = single
+
+[*.ts]
+charset = utf-8
+indent_style = space
+indent_size = 2
+quote_type = single
+max_line_length = 120

src/trait_manager/index.ts

@@ -16,7 +16,7 @@ export const evAll = 'trait';
 export const evPfx = `${evAll}:`;
 export const evCustom = `${evPfx}custom`;
 
-const typesDef = {
+const typesDef: { [id: string]: { new (o: any): TraitView } } = {
   text: TraitView,
   number: TraitNumberView,
   select: TraitSelectView,
@@ -62,12 +62,9 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
    */
   constructor(em: EditorModel) {
     super(em, 'TraitManager', defaults);
-    const c = this.config;
     const model = new Model();
     this.model = model;
-    const ppfx = c.pStylePrefix;
-    this.types = { ...typesDef };
-    ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`);
+    this.types = typesDef;
 
     const upAll = debounce(() => this.__upSel(), 0);
     model.listenTo(em, 'component:toggled', upAll);

src/trait_manager/model/TraitFactory.ts

@@ -1,35 +1,34 @@
 import { TraitManagerConfig } from '../config/config';
-import { TraitProperties } from './Trait';
+import { isString } from 'underscore';
+import Trait, { TraitProperties } from './Trait';
+
+export default class TraitFactory {
+  config: Partial<TraitManagerConfig>;
+
+  constructor(config: Partial<TraitManagerConfig> = {}) {
+    this.config = config;
+  }
 
-export default (config: Partial<TraitManagerConfig> = {}) => ({
   /**
    * Build props object by their name
-   * @param  {Array<string>|string} props Array of properties name
-   * @return {Array<Object>}
    */
-  build(props: string | string[]) {
-    const objs = [];
-
-    if (typeof props === 'string') props = [props];
+  build(prop: string | TraitProperties): Trait {
+    return isString(prop) ? this.buildFromString(prop) : new Trait(prop);
+  }
 
-    for (let i = 0; i < props.length; i++) {
-      const prop = props[i];
-      const obj: TraitProperties = {
-        name: prop,
-        type: 'text',
-      };
+  private buildFromString(name: string): Trait {
+    const obj: TraitProperties = {
+      name: name,
+      type: 'text',
+    };
 
-      switch (prop) {
-        case 'target':
-          obj.type = 'select';
-          obj.default = false;
-          obj.options = config.optionsTarget;
-          break;
-      }
-
-      objs.push(obj);
+    switch (name) {
+      case 'target':
+        obj.type = 'select';
+        obj.default = false;
+        obj.options = this.config.optionsTarget;
+        break;
     }
-
-    return objs;
-  },
-});
+    return new Trait(obj);
+  }
+}

src/trait_manager/model/Traits.ts

@@ -1,4 +1,4 @@
-import { isString, isArray } from 'underscore';
+import { isArray } from 'underscore';
 import { AddOptions, Collection } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
@@ -8,12 +8,16 @@ import TraitFactory from './TraitFactory';
 export default class Traits extends Collection<Trait> {
   em: EditorModel;
   target!: Component;
+  tf: TraitFactory;
 
   constructor(coll: TraitProperties[], options: { em: EditorModel }) {
     super(coll);
     this.em = options.em;
     this.listenTo(this, 'add', this.handleAdd);
     this.listenTo(this, 'reset', this.handleReset);
+    const tm = this.em?.Traits;
+    const tmOpts = tm?.getConfig();
+    this.tf = new TraitFactory(tmOpts);
   }
 
   handleReset(coll: TraitProperties[], { previousModels = [] }: { previousModels?: Trait[] } = {}) {
@@ -33,30 +37,25 @@ export default class Traits extends Collection<Trait> {
     this.target = target;
   }
 
-  /** @ts-ignore */
-  add(models: string | Trait | TraitProperties | (string | Trait | TraitProperties)[], opt?: AddOptions) {
-    const em = this.em;
-
-    // Use TraitFactory if necessary
-    if (isString(models) || isArray(models)) {
-      const tm = em && em.get! && em.Traits;
-      const tmOpts = tm && tm.getConfig();
-      const tf = TraitFactory(tmOpts);
-
-      if (isString(models)) {
-        models = [models];
-      }
+  add(model: string | TraitProperties | Trait, options?: AddOptions): Trait;
+  add(models: Array<string | TraitProperties | Trait>, options?: AddOptions): Trait[];
+  add(models: unknown, opt?: AddOptions): any {
+    if (models == undefined) {
+      return undefined;
+    }
 
+    if (isArray(models)) {
+      var traits: Trait[] = [];
       for (var i = 0, len = models.length; i < len; i++) {
-        const str = models[i];
-        const model = isString(str) ? tf.build(str)[0] : str;
-        model.target = this.target;
-        models[i] = model as Trait;
+        const trait = models[i];
+        traits[i] = trait instanceof Trait ? trait : this.tf.build(trait);
+        traits[i].target = this.target;
       }
+      return super.add(traits, opt);
     }
+    const trait = models instanceof Trait ? models : this.tf.build(models as any);
+    trait.target = this.target;
 
-    return Collection.prototype.add.apply(this, [models as Trait[], opt]);
+    return super.add(trait, opt);
   }
 }
-
-Traits.prototype.model = Trait;

src/trait_manager/view/TraitView.ts

@@ -48,8 +48,8 @@ export default class TraitView extends View<Trait> {
     const { type } = model.attributes;
     this.config = config;
     this.em = config.em;
-    this.pfx = config.stylePrefix || '';
     this.ppfx = config.pStylePrefix || '';
+    this.pfx = this.ppfx + config.stylePrefix || '';
     this.target = target;
     const { ppfx } = this;
     this.clsField = `${ppfx}field ${ppfx}field-${type}`;

src/trait_manager/view/TraitsView.ts

@@ -12,13 +12,13 @@ export default class TraitsView extends DomainViews {
     super(o);
     this.itemsView = itemsView;
     const config = o.config || {};
-    const pfx = config.stylePrefix || '';
+
     const em = o.editor;
     this.config = config;
     this.em = em;
-    this.pfx = pfx;
     this.ppfx = config.pStylePrefix || '';
-    this.className = `${pfx}traits`;
+    this.pfx = this.ppfx + config.stylePrefix || '';
+    this.className = `${this.pfx}traits`;
     this.listenTo(em, 'component:toggled', this.updatedCollection);
     this.updatedCollection();
   }