Support partial in properties

src/domain_abstract/model/Styleable.js

@@ -46,8 +46,8 @@ export default {
       const em = this.em;
       this.trigger(`change:style:${pr}`);
       if (em) {
-        em.trigger(`styleable:change`, this, pr);
-        em.trigger(`styleable:change:${pr}`, this, pr);
+        em.trigger(`styleable:change`, this, pr, opts);
+        em.trigger(`styleable:change:${pr}`, this, pr, opts);
       }
     });
 

src/style_manager/index.js

@@ -102,12 +102,12 @@ export default () => {
       properties = new Properties();
       sectors = new Sectors([], c);
       this.model = new Model({ targets: [] });
-      const toListen =
+      const ev =
         'component:toggled component:update:classes change:state change:device frame:resized selector:type styleable:change';
       this.model.listenTo(
         em,
-        toListen,
-        debounce((...args) => {
+        ev,
+        debounce(() => {
           this.select(em.getSelectedAll());
           this.__trgCustom();
         })
@@ -493,46 +493,13 @@ export default () => {
       const lastTarget = targets.slice().reverse()[0];
       const lastTargetParents = this.getParentRules(lastTarget);
       this.model.set({ targets, lastTarget, lastTargetParents });
-
-      // Update all property values
-      if (lastTarget && em.getConfig('customUI')) {
-        const style = lastTarget.getStyle();
-        const parentStyles = lastTargetParents.map(p => ({
-          target: p,
-          style: p.getStyle()
-        }));
-
-        sectors.map(sector => {
-          sector.getProperties().map(prop => {
-            const name = prop.getName();
-            const value = style[name];
-            const hasVal = propDef(value);
-            let newValue = hasVal ? value : null;
-            let parentTarget = null;
-
-            if (!hasVal) {
-              newValue = null;
-              const parentItem = parentStyles.filter(p =>
-                propDef(p.style[name])
-              )[0];
-
-              if (parentItem) {
-                newValue = parentItem.style[name];
-                parentTarget = parentItem.target;
-              }
-            }
-
-            prop.__setParentTarget(parentTarget);
-            prop.upValue(newValue, { __up: true });
-          });
-        });
-      }
+      this.__upProps(opts);
 
       return targets;
     },
 
-    addStyleTargets(style) {
-      this.getSelected().map(t => t.addStyle(style));
+    addStyleTargets(style, opts) {
+      this.getSelected().map(t => t.addStyle(style, opts));
     },
 
     getSelected() {
@@ -572,6 +539,44 @@ export default () => {
       em && em.logWarning(`'${sectorId}' sector not found`);
     },
 
+    __upProps(opts) {
+      const lastTarget = this.getLastSelected();
+      if (!lastTarget || !this.em.getConfig('customUI')) return;
+
+      const lastTargetParents = this.getSelectedParents();
+      const style = lastTarget.getStyle();
+      const parentStyles = lastTargetParents.map(p => ({
+        target: p,
+        style: p.getStyle()
+      }));
+
+      sectors.map(sector => {
+        sector.getProperties().map(prop => {
+          const name = prop.getName();
+          const value = style[name];
+          const hasVal = propDef(value);
+          let newValue = hasVal ? value : null;
+          let parentTarget = null;
+
+          if (!hasVal) {
+            newValue = null;
+            const parentItem = parentStyles.filter(p =>
+              propDef(p.style[name])
+            )[0];
+
+            if (parentItem) {
+              newValue = parentItem.style[name];
+              parentTarget = parentItem.target;
+            }
+          }
+
+          prop.__setParentTarget(parentTarget);
+          prop.getFullValue() !== newValue &&
+            prop.upValue(newValue, { ...opts, __up: true });
+        });
+      });
+    },
+
     destroy() {
       [properties, sectors].forEach(coll => {
         coll.reset();

src/style_manager/model/Property.js

@@ -30,13 +30,14 @@ export default class Property extends Model {
     }, {});
 
     sm.__trgEv(sm.events.propertyUpdate, { property: this, from, to });
-    !opts.__up && sm.addStyleTargets({ [name]: value });
+    !opts.__up &&
+      sm.addStyleTargets({ [name]: value, __p: !!opts.avoidStore }, opts);
   }
 
   _up(props, opts = {}) {
-    const { preview, ...rest } = opts;
-    props.__p = preview;
-    return this.set(props, { ...rest, avoidStore: !!preview });
+    const { partial, ...rest } = opts;
+    props.__p = !!partial;
+    return this.set(props, { ...rest, avoidStore: !!partial });
   }
 
   init() {}