REFA,IMPRO: Changed Comp-Attributes-Behaviour

Added default value usage for "link-" calls of attributes.
Removed unnecessary methods
Added some new default-values (enum)

src/commonEvents.js

@@ -3,5 +3,6 @@
  */
 const CommonEvents = Object.freeze({
     ONCLICK: "onClick",
+    ONCHANGE: "onChange"
 })
 

src/modifier.js

@@ -13,8 +13,8 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     fillMaxSize(widthFraction = 1, heightFraction = 1) {
-        this.fillMaxWidth(widthFraction);
+        return this.fillMaxWidth(widthFraction)
-        return this.fillMaxHeight(heightFraction);
+            .fillMaxHeight(heightFraction);
     }
 
     /**
@@ -60,7 +60,7 @@ class Modifier {
     padding(siding) {
         let keyToAdd = "";
         if (siding instanceof ChainablePadding || siding instanceof PaddingChain) {
-            
+
         } else if (siding instanceof Sides) {
             keyToAdd = "padding-"
         }
@@ -157,26 +157,42 @@ class Modifier {
 
     /**
      * 
-     * @returns {DimensionsChain}
+     * @param {number} size of width and height in pixels
+     * @returns {DimensionsChain} 
      */
-    linkDimensions() {
+    linkDimensions(size = -1) {
-        return new DimensionsChain(this);
+        if (size === -1) {
+            return new DimensionsChain(this);
+        } else {
+            return new DimensionsChain(this).all(size).ensureModifier()
+        }
     }
 
     /**
      * 
-     * @returns {PaddingChain}
+     * @param {number} amount the padding for all four sides
+     * @returns {PaddingChain} 
      */
-    linkPadding() {
+    linkPadding(amount = -1) {
-        return new PaddingChain(this);
+        if (amount === -1) {
+            return new PaddingChain(this);
+        } else {
+            return new PaddingChain(this).all(amount);
+        }
     }
 
     /**
      * 
+     * @param {number} cornerRadius will create a rounded rectangle with the given cornerRadius
      * @returns {ShapeChain}
      */
-    linkClip() {
+    linkClip(cornerRadius = -1) {
-        return new ShapeChain(this);
+        if (cornerRadius === -1) {
+            return new ShapeChain(this);
+        } else {
+            return new ShapeChain(this).all(cornerRadius);
+        }
+    }
     }
 
     /**

src/sizeSide/dimensions.js

@@ -1,9 +1,3 @@
-
-const SidingRefDimensions = Object.freeze({
-    WIDTH: (DirectionUnitDependentAttribute) => DirectionUnitDependentAttribute._fFirst,
-    HEIGHT: (DirectionUnitDependentAttribute) => DirectionUnitDependentAttribute._fSecond
-})
-
 /**
  * Simple Dimensions container for the height and width in pixels.
  */
@@ -35,18 +29,15 @@ class Dimensions extends DirectionUnitDependentAttribute {
         return this;
     }
 
+    all(size) {
+        return this.width(size).height(size);
+    }
+
 
     getOrderedValues() {
         return this.getOrderedValues().slice(2)
     }
 
-    getSidingRefValueMap() {
-        return {
-            [SidingRefDimensions.WIDTH]: this.getBySidingRef(SidingRefDimensions.WIDTH),
-            [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 }

src/sizeSide/shapes.js

@@ -44,9 +44,7 @@ class Shape extends DirectionUnitDependentAttribute {
      * @returns {Shape}
      */
     diagonalPositive(amount) {
-        this._fThird = amount;
+        return this.bottomLeft(amount).topRight(amount);
-        this._fSecond = amount;
-        return this;
     }
     /**
      * 
@@ -54,25 +52,15 @@ class Shape extends DirectionUnitDependentAttribute {
      * @returns {Shape}
      */
     diagonalNegative(amount) {
-        this._fFirst = amount;
+        return this.topLeft(amount).bottomRight(amount);
-        this._fForth = amount;
-        return this;
     }
 
     left(amount) {
-        this._fFirst = amount;
+        return this.topLeft(amount).bottomLeft(amount);
-        this._fSecond = 0;
-        this._fThird = 0;
-        this._fForth = amount;
-        return this
     }
 
     right(amount) {
-        this._fFirst = 0;
+        return this.topRight(amount).bottomRight(amount);
-        this._fSecond = amount;
-        this._fThird = amount;
-        this._fForth = 0;
-        return this;
     }
 
     /**
@@ -130,6 +118,7 @@ class ChainableShape extends ShapeChain {
 }
 
 const Shapes = Object.freeze({
+    Rectangle: new Shape(),
     RoundedCorner: new Shape(),
     Circle: new Shape(49, SizeUnits.PERCENT)
 })

src/sizeSide/siding.js

@@ -141,8 +141,7 @@ class Sides extends DirectionUnitDependentAttribute {
      * @returns {Siding} this Siding Object
      */
     left(amount) {
-        this._fFirst = amount;
+        return this.setByIndex(1, amount);
-        return this;
     }
 
     /**
@@ -151,8 +150,7 @@ class Sides extends DirectionUnitDependentAttribute {
      * @returns {Siding} this Siding Object
      */
     right(amount) {
-        this._fThird = amount;
+        return this.setByIndex(3, amount);
-        return this;
     }
 
     /**
@@ -161,8 +159,7 @@ class Sides extends DirectionUnitDependentAttribute {
      * @returns {Siding} this Siding Object
      */
     top(amount) {
-        this._fSecond = amount;
+        return this.setByIndex(2, amount);
-        return this;
     }
 
     /**
@@ -171,21 +168,17 @@ class Sides extends DirectionUnitDependentAttribute {
      * @returns {Siding} this Siding Object
      */
     bottom(amount) {
-        this._fForth = amount;
+        return this.setByIndex(4, amount);
-        return this;
     }
 
 
-
     /**
      * sets the amount-value for the horizontal sides (left and right).
      * @param {number} amount siding for left and right.
      * @returns {Sides} this Siding Object
      */
     horizontal(amount) {
-        this._fFirst = amount;
+        return this.left(amount).right(amount);
-        this._fThird = amount;
-        return this;
     }
 
     /**
@@ -194,9 +187,9 @@ class Sides extends DirectionUnitDependentAttribute {
      * @returns {Sides} this Siding Object
      */
     vertical(amount) {
-        this._fSecond = amount;
+        return this.top(amount).bottom(amount);
-        this._fForth = amount;
+    }
-        return this;
+
     toModifications() {
         return [
             { key: "left", value: this._fFirst + this._unit },
@@ -220,7 +213,12 @@ class PaddingChain extends Sides {
             .padding(this);
     }
 
-    ensureModifier(){
+    /**
+     * Returns the corresponding Modifier.
+     * Basically climbs up the chain level.
+     * @returns {Modifier} 
+     */
+    ensureModifier() {
         return this.toModifier()
     }