Class StyleManager

packages/core/src/style_manager/index.ts:75–840

const propDef = (value: any) => value || value === 0;

export default class StyleManager extends ItemManagerModule<
  StyleManagerConfig,
  /** @ts-ignore */
  Sectors
> {
  builtIn: PropertyFactory;
  upAll: Debounced;
  properties: typeof Properties;
  events = StyleManagerEvents;
  sectors: Sectors;
  SectView!: SectorsView;
  Sector = Sector;
  storageKey = '';
  __ctn?: HTMLElement;

  /**
   * Get configuration object
   * @name getConfig
   * @function
   * @return {Object}
   */

  /**
   * Initialize module. Automatically called with a new instance of the editor
   * @param {Object} config Configurations
   * @private
   */
  constructor(em: EditorModel) {
    super(em, 'StyleManager', new Sectors([], { em }), StyleManagerEvents, defConfig());
    bindAll(this, '__clearStateTarget');
    const { events } = this;
    const c = this.config;
    const ppfx = c.pStylePrefix;
    if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
    this.builtIn = new PropertyFactory();
    this.properties = new Properties([], { em, module: this });
    this.sectors = this.all; // TODO check if (module: this) is required
    const model = new Model({ targets: [] });
    this.model = model;

    // Triggers for the selection refresh and properties
    const eventCmpUpdate = ComponentsEvents.update;
    const ev = `${ComponentsEvents.toggled} ${eventCmpUpdate}:classes change:state change:device frame:resized selector:type`;
    this.upAll = debounce(() => this.__upSel(), 0);
    model.listenTo(em, ev, this.upAll as any);
    // Clear state target on any component selection change, without debounce (#4208)
    model.listenTo(em, ComponentsEvents.toggled, this.__clearStateTarget);

    // Triggers only for properties (avoid selection refresh)
    const upProps = debounce(() => {
      this.__upProps();
      this.__trgCustom();
    }, 0);
    model.listenTo(em, 'styleable:change undo redo', upProps);

    // Triggers only custom event
    const trgCustom = debounce(() => this.__trgCustom(), 0);
    model.listenTo(em, `${events.layerSelect} ${events.target}`, trgCustom);