Prepare `emptyValue`

src/style_manager/index.ts

@@ -309,7 +309,7 @@ export default class StyleManager extends ItemManagerModule<
    */
   addProperty(sectorId: string, property: PropertyTypes, opts: AddOptions = {}): Property | undefined {
     const sector = this.getSector(sectorId, { warn: true });
-    let prop = null;
+    let prop;
     if (sector) prop = sector.addProperty(property, opts);
 
     return prop;

src/style_manager/model/PropertyStack.ts

@@ -53,6 +53,7 @@ export interface PropertyStackProps extends Omit<PropertyCompositeProps, 'toStyl
   toStyle?: (values: PropValues, data: ToStyleDataStack) => ReturnType<ToStyle>;
   fromStyle?: (style: StyleProps, data: FromStyleDataStack) => ReturnType<FromStyle>;
   parseLayer?: (data: { value: string; values: PropValues }) => PropValues;
+  emptyValue?: string | ((data: { property: PropertyStack }) => PropValues);
   selectedLayer?: Layer;
   prepend?: boolean;
   __layers?: PropValues[];
@@ -82,6 +83,7 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
     return {
       ...PropertyComposite.getDefaults(),
       layers: [],
+      emptyValue: 'unset',
       layerSeparator: ', ',
       layerJoin: '',
       prepend: 0,
@@ -471,6 +473,7 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
 
   getStyleFromLayers(opts: OptionStyleStack = {}) {
     let result: StyleProps = {};
+    const { emptyValue } = this.attributes;
     const name = this.getName();
     const layers = this.getLayers();
     const props = this.getProperties();
@@ -478,7 +481,6 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
     styles.forEach(style => {
       keys(style).map(key => {
         if (!result[key]) {
-          // @ts-ignore
           result[key] = [];
         }
         // @ts-ignore
@@ -486,8 +488,7 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
       });
     });
     keys(result).map(key => {
-      // @ts-ignore
-      result[key] = result[key].join(this.__getJoinLayers());
+      result[key] = (result[key] as string[]).join(this.__getJoinLayers());
     });
 
     if (this.isDetached()) {
@@ -505,7 +506,38 @@ export default class PropertyStack extends PropertyComposite<PropertyStackProps>
       result = { ...result, ...style };
     }
 
-    return result;
+    return {
+      ...result,
+      ...this.getEmptyValueStyle(),
+    };
+  }
+
+  getEmptyValueStyle() {
+    const { emptyValue } = this.attributes;
+
+    if (emptyValue && !this.getLayers().length) {
+      const name = this.getName();
+      const props = this.getProperties();
+      const result = isString(emptyValue) ? emptyValue : emptyValue({ property: this });
+
+      if (isString(result)) {
+        const style: StyleProps = {};
+
+        if (this.isDetached()) {
+          props.map(prop => {
+            style[prop.getName()] = result;
+          });
+        } else {
+          style[name] = result;
+        }
+
+        return style;
+      } else {
+        return result;
+      }
+    } else {
+      return {};
+    }
   }
 
   __getJoinLayers() {

src/style_manager/model/Sector.ts

@@ -2,7 +2,8 @@ import { extend, isString } from 'underscore';
 import { AddOptions, Collection, Model } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import Properties from './Properties';
-import Property, { PropertyProps } from './Property';
+import Property from './Property';
+import { PropertyTypes } from '..';
 
 /** @private */
 export interface SectorProperties {
@@ -12,7 +13,7 @@ export interface SectorProperties {
   visible?: boolean;
   buildProps?: string[];
   extendBuilded?: boolean;
-  properties?: PropertyProps[];
+  properties?: PropertyTypes[];
 }
 
 /**
@@ -128,7 +129,7 @@ export default class Sector extends Model<SectorProperties> {
    * @returns {Array<[Property]>}
    */
   getProperties(opts: { withValue?: boolean; withParentValue?: boolean } = {}) {
-    const props = this.get('properties') as any;
+    const props = this.properties;
     const res = (props.models ? [...props.models] : props) as Property[];
     return res.filter(prop => {
       let result = true;
@@ -150,9 +151,8 @@ export default class Sector extends Model<SectorProperties> {
     return this.getProperties().filter(prop => prop.get('id') === id)[0] || undefined;
   }
 
-  addProperty(property: PropertyProps, opts: AddOptions) {
-    // @ts-ignore
-    return this.get('properties')!.add(this.checkExtend(property), opts);
+  addProperty(property: PropertyTypes, opts: AddOptions) {
+    return this.properties.add(this.checkExtend(property), opts);
   }
 
   /**
@@ -163,7 +163,7 @@ export default class Sector extends Model<SectorProperties> {
    * @return {Array<Object>} Final props
    * @private
    */
-  extendProperties(props: PropertyProps[], moProps?: PropertyProps[], ex = false) {
+  extendProperties(props: PropertyTypes[], moProps?: PropertyTypes[], ex = false) {
     var pLen = props.length;
     var mProps = moProps || this.get('properties')!;
     var ext = this.get('extendBuilded');
@@ -198,7 +198,7 @@ export default class Sector extends Model<SectorProperties> {
     return ex ? isolated.filter(i => i) : props;
   }
 
-  checkExtend(prop: any): PropertyProps {
+  checkExtend(prop: any): PropertyTypes {
     const { extend, ...rest } = (isString(prop) ? { extend: prop } : prop) || {};
     if (extend) {
       return {
@@ -216,12 +216,12 @@ export default class Sector extends Model<SectorProperties> {
    * @return {Array<Object>}
    * @private
    */
-  buildProperties(props: string | string[]): PropertyProps[] {
+  buildProperties(props: string | string[]): PropertyTypes[] {
     const buildP = props || [];
 
     if (!buildP.length) return [];
 
-    const builtIn = this.em?.get('StyleManager').builtIn;
+    const builtIn = this.em?.Styles.builtIn;
 
     return builtIn?.build(buildP);
   }

test/specs/style_manager/model/Models.ts

@@ -83,6 +83,7 @@ describe('Sector', () => {
 
   test('Extend composed properties', () => {
     obj = sm.addSector('test', {
+      name: 'test',
       buildProps: ['margin', 'float'],
       properties: [
         {

test/specs/style_manager/model/Properties.ts

@@ -45,6 +45,7 @@ describe('StyleManager properties logic', () => {
     beforeEach(() => {
       rule1 = cssc.addRules('.cls { color: red; }')[0];
       obj.addSector(sectorTest, {
+        name: 'sector',
         properties: [
           {
             extend: propTest,
@@ -463,11 +464,12 @@ describe('StyleManager properties logic', () => {
         }
       `)[0];
       obj.addSector(sectorTest, {
+        name: 'My sector',
         properties: [
           {
             type: 'stack',
             property: propTest,
-            // @ts-ignore
+            emptyValue: '',
             properties: propsTest.map(property => ({ property })),
           },
         ],
@@ -650,6 +652,60 @@ describe('StyleManager properties logic', () => {
       expect(rule1.getStyle()).toEqual({});
     });
 
+    describe('emptyValue', () => {
+      test('Removing all layers with empty value as string', () => {
+        compTypeProp.set('emptyValue', 'unset'), compTypeProp.removeLayerAt(1);
+        compTypeProp.removeLayerAt(0);
+        expect(compTypeProp.getLayers().length).toBe(0);
+        expect(rule1.getStyle()).toEqual({
+          [propTest]: 'unset',
+        });
+      });
+
+      test('Removing all layers with empty value as string (detached)', () => {
+        compTypeProp.set('emptyValue', 'unset'), compTypeProp.set('detached', true);
+        compTypeProp.removeLayerAt(1);
+        compTypeProp.removeLayerAt(0);
+        expect(compTypeProp.getLayers().length).toBe(0);
+        expect(rule1.getStyle()).toEqual({
+          [propATest]: 'unset',
+          [propBTest]: 'unset',
+          [propCTest]: 'unset',
+        });
+      });
+
+      test('Removing all layers with empty value as function', () => {
+        compTypeProp.set('emptyValue', () => ({
+          [propATest]: 'unset-a',
+          [propBTest]: 'unset-b',
+        })),
+          compTypeProp.removeLayerAt(1);
+        compTypeProp.removeLayerAt(0);
+        expect(compTypeProp.getLayers().length).toBe(0);
+        expect(rule1.getStyle()).toEqual({
+          [propATest]: 'unset-a',
+          [propBTest]: 'unset-b',
+        });
+      });
+
+      test('Removing all layers with empty value as function (detached)', () => {
+        compTypeProp.set('detached', true);
+        compTypeProp.set('emptyValue', () => ({
+          [propATest]: 'unset-a',
+          [propBTest]: 'unset-b',
+          [propCTest]: 'unset-c',
+        })),
+          compTypeProp.removeLayerAt(1);
+        compTypeProp.removeLayerAt(0);
+        expect(compTypeProp.getLayers().length).toBe(0);
+        expect(rule1.getStyle()).toEqual({
+          [propATest]: 'unset-a',
+          [propBTest]: 'unset-b',
+          [propCTest]: 'unset-c',
+        });
+      });
+    });
+
     test('On clear removes all values', () => {
       compTypeProp.addLayer();
       compTypeProp.clear();