Trigger change on layer select

src/style_manager/index.js

@@ -50,6 +50,7 @@ import SectorsView from './view/SectorsView';
 export const evAll = 'style';
 export const evPfx = `${evAll}:`;
 export const evPropUp = `${evPfx}property:update`;
+export const evLayerSelect = `${evPfx}layer:select`;
 export const evCustom = `${evPfx}custom`;
 
 const propDef = value => value || value === 0;
@@ -69,6 +70,7 @@ export default () => {
     events: {
       all: evAll,
       propertyUpdate: evPropUp,
+      layerSelect: evLayerSelect,
       custom: evCustom,
     },
 
@@ -96,14 +98,18 @@ export default () => {
       properties = new Properties();
       sectors = new Sectors([], c);
       this.model = new Model({ targets: [] });
+
+      // Triggers for the selection refresh and properties
       const ev = 'component:toggled component:update:classes change:state change:device frame:resized selector:type';
       const upAll = debounce(() => this.__upSel());
+      this.model.listenTo(em, ev, upAll);
+
+      // Triggers only for properties (avoid selection refresh)
       const upProps = debounce(() => {
         this.__upProps();
         this.__trgCustom();
       });
-      this.model.listenTo(em, ev, upAll);
-      this.model.listenTo(em, 'styleable:change', upProps);
+      this.model.listenTo(em, `styleable:change ${evLayerSelect}`, upProps);
 
       return this;
     },
@@ -577,7 +583,7 @@ export default () => {
           }
 
           prop.__setParentTarget(parentTarget);
-          prop.getFullValue() !== newValue && prop.upValue(newValue, { ...opts, __up: true });
+          prop.__getFullValue() !== newValue && prop.upValue(newValue, { ...opts, __up: true });
         });
       });
     },

src/style_manager/model/Layer.js

@@ -38,7 +38,8 @@ export default Backbone.Model.extend({
   },
 
   getIndex() {
-    return this.collection.indexOf(this);
+    const coll = this.collection;
+    return coll ? coll.indexOf(this) : -1;
   },
 
   onPropAdd(prop) {

src/style_manager/model/Property.js

@@ -15,12 +15,16 @@ export default class Property extends Model {
     Property.callInit(this, props, opts);
   }
 
+  __hasCustom() {
+    return !!this.em?.getConfig('customUI');
+  }
+
   __upTargets(p, opts = {}) {
+    if (!this.__hasCustom()) return;
     const { em } = this;
-    if (!em || !em.getConfig('customUI')) return;
     const sm = em.get('StyleManager');
     const name = this.getName();
-    const value = this.getFullValue();
+    const value = this.__getFullValue();
 
     const to = this.changedAttributes();
     const from = keys(to).reduce((a, i) => {
@@ -251,6 +255,10 @@ export default class Property extends Model {
     return !isUndefined(def) ? def : this.get('defaults');
   }
 
+  __getFullValue() {
+    return this.getFullValue();
+  }
+
   /**
    * Get a complete value of the property.
    * This probably will replace the getValue when all

src/style_manager/model/PropertyStack.js

@@ -22,6 +22,9 @@ export default Property.extend({
 
     // Parse single layer value string
     parseLayer: null,
+
+    // Current selected layer
+    selectedLayer: null,
   },
 
   initialize(props = {}, opts = {}) {
@@ -31,14 +34,21 @@ export default Property.extend({
     layersColl.property = this;
     layersColl.properties = this.get('properties');
     this.set('layers', layersColl, { silent: true });
+    this.on('change:selectedLayer', this.__upSelected);
     Property.callInit(this, props, opts);
   },
 
+  __upSelected() {
+    if (!this.__hasCustom()) return;
+    const sm = this.em.get('StyleManager');
+    sm.__trgEv(sm.events.layerSelect, { property: this });
+  },
+
   _up(props, opts = {}) {
     const { __layers = [], ...rest } = props;
     const layers = __layers.map(values => ({ values }));
     this.getLayers().reset(layers);
-    console.log('_up from stack', this.get('property'), { layers, rest, opts });
+    console.log('_up from stack', this.get('property'), { layers, rest, opts, currValue: this.getFullValue() });
     return Property.prototype._up.call(this, rest, opts);
   },
 
@@ -63,6 +73,22 @@ export default Property.extend({
     return this.get('layers').push({ properties: [] });
   },
 
+  /**
+   * Select layer
+   * @param {[Layer]} layer
+   */
+  selectLayer(layer) {
+    return this.set('selectedLayer', layer);
+  },
+
+  /**
+   * Get selected layer
+   * @returns {[Layer] | null}
+   */
+  getSelectLayer() {
+    return this.get('selectedLayer');
+  },
+
   /**
    * Get style object from layer values
    * @param {[Layer]} layer
@@ -87,6 +113,18 @@ export default Property.extend({
         };
   },
 
+  __getFullValue() {
+    if (this.get('detached')) return '';
+    const name = this.getName();
+
+    return this.getLayers()
+      .map(l => this.getStyleFromLayer(l))
+      .map(s => s[name])
+      .filter(Boolean)
+      .map(v => v?.trim())
+      .join(this.get('layerSeparator'));
+  },
+
   getLayers() {
     return this.get('layers');
   },