Update property composite view

src/style_manager/model/Property.js

@@ -23,16 +23,15 @@ export default class Property extends Model {
     Property.callInit(this, props, opts);
   }
 
-  __hasCustom() {
-    return !!this.em?.get('StyleManager').getConfig().custom;
-  }
+  // __hasCustom() {
+  //   return !!this.em?.get('StyleManager').getConfig().custom;
+  // }
 
   __getParentProp() {
     return this.collection?.opts?.parentProp;
   }
 
   __upTargets(p, opts = {}) {
-    // if (!this.__hasCustom()) return;
     const { em } = this;
     const sm = em.get('StyleManager');
     const name = this.getName();

src/style_manager/model/PropertyComposite.js

@@ -112,7 +112,7 @@ export default class PropertyComposite extends Property {
   }
 
   __upProperties(p, opts = {}) {
-    if (!this.__hasCustom() || opts.__up || opts.__clearIn) return;
+    if (opts.__up || opts.__clearIn) return;
 
     const parentProp = this.__getParentProp();
     if (parentProp) return parentProp.__upProperties(this, opts);

src/style_manager/model/PropertyStack.js

@@ -252,7 +252,6 @@ export default class PropertyStack extends PropertyComposite {
   }
 
   __upSelected({ noEvent } = {}, opts = {}) {
-    if (!this.__hasCustom()) return;
     const sm = this.em.get('StyleManager');
     const selected = this.getSelectedLayer();
     const values = selected?.getValues();

src/style_manager/view/PropertiesView.js

@@ -30,7 +30,7 @@ export default Backbone.View.extend({
       propTarget: this.propTarget,
       onChange: this.onChange,
       onInputRender: this.onInputRender,
-      config: this.config
+      config: this.config,
     });
 
     if (model.get('type') != 'composite') {
@@ -49,7 +49,7 @@ export default Backbone.View.extend({
     const { $el } = this;
     this.clearItems();
     const fragment = document.createDocumentFragment();
-    this.collection.each(model => this.add(model, fragment));
+    this.collection.forEach(model => this.add(model, fragment));
     $el.empty();
     $el.append(fragment);
     $el.attr('class', `${this.pfx}properties`);
@@ -64,5 +64,5 @@ export default Backbone.View.extend({
   clearItems() {
     this.properties.forEach(item => item.remove());
     this.properties = [];
-  }
+  },
 });

src/style_manager/view/PropertyCompositeView.js

@@ -1,11 +1,9 @@
-import Backbone from 'backbone';
 import PropertyView from './PropertyView';
-
-const $ = Backbone.$;
+import PropertiesView from './PropertiesView';
 
 export default PropertyView.extend({
   templateInput() {
-    const pfx = this.pfx;
+    const { pfx } = this;
     return `
       <div class="${pfx}field ${pfx}composite">
         <span id="${pfx}input-holder"></span>
@@ -14,124 +12,34 @@ export default PropertyView.extend({
   },
 
   inputValueChanged(...args) {
-    // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow
-    // the same flow of PropertyView
-    if (!this.model.get('detached')) {
+    // If it's not detached (eg. 'padding: 1px 2px 3px 4px;') it will follow the same flow of the PropertyView
+    if (!this.model.isDetached()) {
       PropertyView.prototype.inputValueChanged.apply(this, args);
     }
   },
 
-  clear(e) {
-    const props = this.properties;
-    props && props.forEach(propView => propView.clear());
-    PropertyView.prototype.clear.apply(this, arguments);
-  },
-
   remove() {
-    this.model.get('properties').reset();
+    this.props?.remove();
     PropertyView.prototype.remove.apply(this, arguments);
-    ['properties', 'props', '$props'].forEach(i => (this[i] = {}));
   },
 
-  /**
-   * Renders input
-   * */
   onRender() {
-    var model = this.model;
-    var props = model.get('properties') || [];
-    var self = this;
-    this.properties = [];
-
-    if (props.length) {
-      if (!this.$input) {
-        this.$input = $('<input type="hidden" value="0">');
-        this.input = this.$input.get(0);
-      }
-
-      if (!this.props) {
-        this.props = model.get('properties');
-      }
-
-      if (!this.$props) {
-        //Not yet supported nested composite
-        this.props.each(function(prop, index) {
-          if (prop && prop.get('type') == 'composite') {
-            this.props.remove(prop);
-            console.warn('Nested composite types not yet allowed.');
-          }
-          prop.parent = model;
-        }, this);
-
-        var PropertiesView = require('./PropertiesView').default;
-        var propsView = new PropertiesView(this.getPropsConfig());
-        this.$props = propsView.render().$el;
-        this.properties = propsView.properties;
-        this.$el.find(`#${this.pfx}input-holder`).append(this.$props);
-      }
+    const { model, pfx } = this;
+    const props = model.getProperties();
+
+    if (props.length && !this.props) {
+      const propsView = new PropertiesView({
+        config: { ...this.config, highlightComputed: 0 },
+        collection: props,
+      });
+      propsView.render();
+      this.$el.find(`#${pfx}input-holder`).append(propsView.el);
+      this.props = propsView;
     }
   },
 
-  /**
-   * Returns configurations that should be past to properties
-   * @param {Object} opts
-   * @return {Object}
-   */
-  getPropsConfig(opts) {
-    var that = this;
-    const model = this.model;
-
-    var result = {
-      config: { ...this.config, highlightComputed: 0 },
-      collection: this.props,
-      target: this.target,
-      propTarget: this.propTarget,
-      // On any change made to children I need to update composite value
-      onChange(el, view, opts) {
-        model.set('value', model.getFullValue(), opts);
-      },
-      // Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
-      // I need to extract from that string the corresponding one to that property.
-      customValue(property, mIndex) {
-        return that.valueOnIndex(mIndex, property);
-      }
-    };
-
-    // If detached let follow its standard flow
-    if (model.get('detached')) {
-      delete result.onChange;
-    }
-
-    return result;
-  },
-
-  /**
-   * Extract string from composite value
-   * @param {number} index Index
-   * @param {Object} view Property view
-   * @return {string}
-   * */
-  valueOnIndex(index, view) {
-    let value;
-    const targetValue = this.getTargetValue({ ignoreDefault: 1 });
-
-    // If the target value of the composite is not empty I'll fetch
-    // the corresponding value from the requested index, otherwise try
-    // to get the value of the sub-property
-    if (targetValue) {
-      const values = targetValue.split(this.model.getSplitSeparator());
-      value = values[index];
-    } else {
-      value =
-        view && view.getTargetValue({ ignoreCustomValue: 1, ignoreDefault: 1 });
-    }
-
-    return value;
-  },
-
   clearCached() {
     PropertyView.prototype.clearCached.apply(this, arguments);
-    this.$input = null;
     this.props = null;
-    this.$props = null;
-  }
+  },
 });