REFA,IMPRO: Introduced funcitons and swapped high level attributes access

added toModifications, to update the modifier directy
-> moving the logic of the attribute-style-setting to the attribute

swapped/renamed methods to access the DirectionUnitDependedAttribute
-attributes by index.

src/modifier.js

@@ -43,12 +43,10 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     dimensions(dimensions) {
-        if (dimensions._fFirst > 0) {
+        dimensions.toModifications()
-            this._modifications["width"] = dimensions.getBySidingRef(SidingRefDimensions.WIDTH) + dimensions._unit;
+            .forEach(kvpair => {
-        }
+                this._modifications[kvpair.key] = kvpair.value;
-        if (dimensions._fSecond > 0) {
+            })
-            this._modifications["height"] = dimensions.getBySidingRef(SidingRefDimensions.HEIGHT) + dimensions._unit;
-        }
         return this;
     }
 
@@ -60,10 +58,16 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     padding(siding) {
-        this._modifications["padding-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit;
+        let keyToAdd = "";
-        this._modifications["padding-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit;
+        if (siding instanceof ChainablePadding || siding instanceof PaddingChain) {
-        this._modifications["padding-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit;
+            
-        this._modifications["padding-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit;
+        } else if (siding instanceof Sides) {
+            keyToAdd = "padding-"
+        }
+        siding.toModifications()
+            .forEach(kvpair => {
+                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
+            })
         return this;
     }
 
@@ -75,10 +79,7 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     margin(siding) {
-        this._modifications["margin-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit;
+        this._modifications["margin"] = siding.getOrderedValues();
-        this._modifications["margin-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit;
-        this._modifications["margin-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit;
-        this._modifications["margin-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit;
         return this;
     }
 
@@ -139,12 +140,9 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     border(border) {
-        console.log(border);
+        border.toModifications()
-        this._modifications["border"] = border._width + border._unit;
+            .forEach(e => this._modifications[e.key] = e.value);
-        this._modifications["border-style"] = border._sidingStyles.getOrderedValues().join(' ');
+        return this.clip(border._shape)
-        this._modifications["border-color"] = border._color.cssRGBString();
-        this.clip(border)
-        return this;
     }
 
     /**

src/sizeSide/dimensions.js

@@ -46,6 +46,22 @@ class Dimensions extends DirectionUnitDependentAttribute {
             [SidingRefDimensions.HEIGHT]: this.getBySidingRef(SidingRefDimensions.HEIGHT)
         }
     }
+
+    toModifications() {
+        let w = { key: "width", value: this._fFirst + this._unit }
+        let h = { key: "height", value: this._fSecond + this._unit }
+        let is_w = this._fFirst > 0;
+        let is_h = this._fSecond > 0;
+        if (is_h && is_w) {
+            return [w, h]
+        } else if (is_w) {
+            return [w]
+        } else if (is_h) {
+            return [h]
+        } else {
+            return []
+        }
+    }
 }
 
 

src/sizeSide/shapes.js

@@ -1,10 +1,3 @@
-const SidingRefCorners = Object.freeze({
-    TOPLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst,
-    TOPRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond,
-    BOTTOMLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird,
-    BOTTOMRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth
-})
-
 class Shape extends DirectionUnitDependentAttribute {
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
         super(defaultValue, defaultUnit);

src/sizeSide/siding.js

@@ -29,42 +29,75 @@ class DirectionUnitDependentAttribute {
         return this;
     }
 
+    /**
+     * 
+     * @returns {array<*>} list of attributes
+     */
+    getOrderedAttributes(){
+        return [this._fFirst, this._fSecond, this._fThird, this._fForth];
+    }
+
     /**
      * @returns {Array<string>}
      */
     getOrderedValues() {
-        return [this._fFirst + this._unit, this._fSecond + this._unit, this._fThird + this._unit, this._fForth + this._unit]
+        return this.getOrderedAttributes().map(a=>a+this._unit);
     }
 
     /**
+     * Since the basic values are from "first" to "fourth",
+     * they can be also accessed in the ordered way. 
      * 
-     * @param {SidingRef} sidingRef 
+     * Mainly used by the setup of directions of subclasses.
-     * @param {*} value
+     * @param {number} index [1,4]
+     * @param {number} value 
      * @returns {DirectionUnitDependentAttribute} this
      */
-    setBySidingRef(sidingRef, value) {
+    setByIndex(index, value) {
-        sidingRef(this) = value;
+        switch (index) {
+            case 1:
+                this._fFirst = value;
+                break;
+            case 2:
+                this._fSecond = value;
+                break;
+            case 3:
+                this._fThird = value;
+                break;
+            case 4:
+                this._fForth = value;
+                break;
+
+            default:
+                this._fFirst = value;
+                break;
+        }
         return this;
     }
 
     /**
+     * Since the basic values are from "first" to "fourth",
+     * they can be also accessed in the ordered way. 
      * 
-     * @param {SidingRef} sidingRef the reference enum for this SideUnitDependenAttribute (child)
+     * Mainly used by the setup of directions of subclasses.
-     * @returns the value of the referenced SidingRef.
+     * @param {number} index [1,4]
+     * @returns {*} this value of index 
      */
-    getBySidingRef(sidingRef) {
+    getByIndex(index) {
-        return sidingRef(this)
+        switch (index) {
+            case 1:
+                return this._fFirst;
+            case 2:
+                return this._fSecond;
+            case 3:
+                return this._fThird;
+            case 4:
+                return this._fForth;
+
+            default:
+                return this._fFirst;
+        }
     }
-
-}
-
-const SidingRefSides = Object.freeze({
-    LEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst,
-    TOP: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond,
-    RIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird,
-    BOTTOM: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth
-})
-
 
     /**
      * Placeholder for overrides
@@ -142,15 +175,6 @@ class Sides extends DirectionUnitDependentAttribute {
         return this;
     }
 
-    getSidingRefValueMap() {
-        return {
-            [SidingRefSides.LEFT]: this.getBySidingRef(SidingRefSides.LEFT),
-            [SidingRefSides.TOP]: this.getBySidingRef(SidingRefSides.TOP),
-            [SidingRefSides.RIGHT]: this.getBySidingRef(SidingRefSides.RIGHT),
-            [SidingRefSides.BOTTOM]: this.getBySidingRef(SidingRefSides.BOTTOM)
-        }
-    }
-}
 
 
     /**
@@ -173,6 +197,13 @@ class Sides extends DirectionUnitDependentAttribute {
         this._fSecond = amount;
         this._fForth = amount;
         return this;
+    toModifications() {
+        return [
+            { key: "left", value: this._fFirst + this._unit },
+            { key: "top", value: this._fSecond + this._unit },
+            { key: "right", value: this._fThird + this._unit },
+            { key: "bottom", value: this._fForth + this._unit }
+        ]
     }
 }
 
@@ -192,6 +223,15 @@ class PaddingChain extends Sides {
     ensureModifier(){
         return this.toModifier()
     }
+
+    toModifications() {
+        return [
+            { key: "padding-left", value: this._fFirst + this._unit },
+            { key: "padding-top", value: this._fSecond + this._unit },
+            { key: "padding-right", value: this._fThird + this._unit },
+            { key: "padding-bottom", value: this._fForth + this._unit }
+        ]
+    }
 }