FEAT,MAJOR,REFA,FIX: unified logic of DirectionUnitDependentAttributes

More specific the logic of DirectionUnitDependetAttributes (DUDA) extending
classes and corresponding Modifier-call methods.
Set the old link<CallMethod> methods @deprecated.
Now you can call an DUDA-CallMethod with either:
- default value (usually number): returns modifier
- nothing: returns DUDA-Ext-Chain
- DUDA-Ext: returns modifier

Introduced mixins to extend DUDA-Extensions with (unified)
returns to modifier or component methods.

Rearanged, added and updated some doc
Moved some of the DUDA-Ext into their own files under src/modifier/.

fileOrder.json

@@ -6,7 +6,10 @@
             "arrangement.js"
         ],
         "size_sidings": [
+            "modificationSubChainMixins.js",
             "siding.js",
+            "padding.js",
+            "margin.js",
             "shapes.js",
             "border.js",
             "twoDimPoint.js",
@@ -69,6 +72,9 @@
         "scriptAndStyleContext.js",
         "framework-controls.js",
         "context.js",
+        "modificationSubChainMixins.js",
+        "padding.js",
+        "margin.js",
         "twoDimPoint.js"
     ],
     "objects": {
@@ -167,6 +173,19 @@
         "context.js": {
             "name": "context.js",
             "folder": "src"
+        },
+        "modificationSubChainMixins.js":{
+            "name": "modificationSubChainMixins.js",
+            "folder": "src/modifiers"
+        },
+        "padding.js":{
+            "name": "padding.js",
+            "folder": "src/modifiers"
+        },
+        "margin.js":{
+            "name": "margin.js",
+            "folder": "src/modifiers"
+        },
         "twoDimPoint.js":{
             "name": "twoDimPoint.js",
             "folder": "src/modifiers"

src/component.js

@@ -44,7 +44,7 @@ class Component extends StyleAndScriptStoringComponent {
         this._isContextMenu = false;
 
         this._modifier = new Modifier()
-            .margin(new Sides().all(0));
+            .margin(0);
         this._modifier._modifications['display'] = "flex";
         this._modifier._modifications["box-sizing"] = "border-box";
 

src/modifier.js

@@ -109,37 +109,63 @@ class Modifier {
     }
 
     /**
-     * Sets modifications according to the dimensions object.
+     * Takes dimensions as param which can be either of three:
-     * @param {Dimensions} dimensions 
+     * 
-     * @returns {Modifier} this modifier object
+     * param == null (not given):
+     * Returns new DimensionsChain (to chain Dimensions-Modifications)
+     * 
+     * param == number (>0):
+     * Applies Dimensions.all(dimension);
+     * Returns this modifier
+     * 
+     * param == Dimensions:
+     * Sets modifications according to the dimensions object;
+     * Returns this modifier
+     * @param {Dimensions | number | undefined} [modify=null] modify as in modifiers 
+     * @returns { Modifier | DimensionsChain } this modifier object or a DimensionsChain
      */
-    dimensions(dimensions) {
+    dimensions(modify = null) {
-        dimensions.toModifications()
+        if (modify instanceof Dimensions) {
-            .forEach(kvpair => {
+            modify.toModifications()
-                this._modifications[kvpair.key] = kvpair.value;
+                .forEach(kvpair => {
-            })
+                    this._modifications[kvpair.key] = kvpair.value;
-        return this;
+                });
+            return this;
+        } else {
+            let modSub = new DimensionsChain(this);
+            if (modify instanceof Number && modify > 0) {
+                return modSub.all(modify).ensureModifier();
+            }
+            // case dimension is number but < 0 or dimensions == null or anything else
+            return modSub;
+        }
     }
 
     /**
      * Sets the padding on all sides according to the given padding object. 
      * Currently the padding will always be set 
      * to the most recent padding/padding. 
-     * @param {Sides} siding
+     * @param {Padding | number | undefined} modify as in modifiers
      * @returns {Modifier} this modifier object
      */
-    padding(siding) {
+    padding(modify = null) {
-        this._paddingValues = siding;
+        if (modify instanceof Sides && !(modify instanceof Padding)) {
-        let keyToAdd = "";
+            modify._modMethod = "padding";
-        if (siding instanceof PaddingChain) {
+            modify = Object.assign(new Padding(), modify);
-            /* TODO what is this supposed to do */
+        }
-        } else if (siding instanceof Sides) {
+
-            keyToAdd = "padding-"
+        if (modify instanceof Padding) {
+            modify.toModifications()
+                .forEach(kvpair => {
+                    this._modifications[kvpair.key] = kvpair.value;
+                });
+        } else {
+            let modSub = new PaddingChain(this);
+            if (Number.isInteger(modify) && modify > -1) {
+                return modSub.all(modify).ensureModifier();
+            }
+            return modSub
         }
-        siding.toModifications()
-            .forEach(kvpair => {
-                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
-            })
         return this;
     }
 
@@ -150,19 +176,27 @@ class Modifier {
      * @ATTENTION since it just increases complexity to constantly use padding and margin
      *            it is recommended to use padding and to stick to that as often as possible. 
      *            Padding values take affect inside/within the element.
-     * @param {Sides} siding 
+     * @param {Margin | number | undefined} modify 
      * @returns {Modifier} this modifier object
      */
-    margin(siding) {
+    margin(modify = null) {
-        let keyToAdd = "";
+        if (modify instanceof Sides && !(modify instanceof Margin)) {
-        if (siding instanceof Sides) {
+            modify._modMethod = "margin";
-            keyToAdd = "margin-"
+            modify = Object.assign(new Margin(), modify);
         }
 
-        siding.toModifications()
+        if (modify instanceof Margin) {
-            .forEach(kvpair => {
+            modify.toModifications()
-                this._modifications[keyToAdd + kvpair.key] = kvpair.value;
+                .forEach(kvpair => {
-            });
+                    this._modifications[kvpair.key] = kvpair.value;
+                });
+        } else {
+            let modSub = new MarginChain(this);
+            if (Number.isInteger(modify) && modify > -1) {
+                return modSub.all(modify).ensureModifier();
+            }
+            return modSub
+        }
         return this;
     }
 
@@ -270,65 +304,110 @@ class Modifier {
     }
 
     /**
+     * Takes border as param which can be either of three:
+     * 
+     * param == null (not given):
+     * Returns new BorderChain (to chain Border-Modifications)
+     * 
+     * param == number (>0):
+     * Applies Border.width(border);
+     * Rerturns this modifier
+     * 
+     * param == Border:
+     * 
      * Sets a border line (with given linestyle) to all sides. 
      * If lineStyle is an array, the containing LineStyles, 
      * are applied in the order: [top, right, bottom, left].
      * If the border has a shape defined, 
      * this shape will override earlier shape definitions.
-     * Otherwise existing shape definitions will be applied.
+     * Otherwise existing shape definitions will be applied;
-     * @param {Border} border the style of the border line
+     * 
-     * @returns {Modifier} this modifier object
+     * Rerturns this modifier
+     * 
+     * @param {Border | number | undefined} [modify=null] modify as in modifiers 
+     * @returns {Modifier | BorderChain} this modifier or BorderChain
      */
-    border(border) {
+    border(modify = null) {
-        if (border._shape) {
+        if (modify instanceof Border) {
-            this.clip(border._shape);
+            if (modify._shape) {
-        } else if (this._shape) {
+                this.clip(modify._shape);
-            border._shape = this._shape;
+            } else if (this._shape) {
+                modify._shape = this._shape;
+            }
+
+            modify.toModifications()
+                .forEach(e => this._modifications[e.key] = e.value);
+
+            return this;
+        } else {
+            let modSub = new BorderChain(this);
+            if (modify instanceof Number && modify > 0) {
+                return modSub.width(modify).ensureModifier();
+            }
+            return modSub;
         }
-        border.toModifications()
-            .forEach(e => this._modifications[e.key] = e.value);
-        return this;
     }
 
     /**
+     * Takes shape as param which can be either of three:
      * 
-     * @param {Shape} shape 
+     * param == null (not given):
-     * @returns {Modifier} 
+     * Returns new ShapeChain (to chain Shape-Modifications)
+     * 
+     * param == number (>0):
+     * Applies Shape.all(dimension);
+     * Returns this modifier
+     * 
+     * param == Shape:
+     * Sets modifications according to the shape object;
+     * Returns this modifier
+     * 
+     * 
+     * @param {Shape | number | undefined} [modify=null] modify as in modifiers 
+     * @returns { Modifier | ShapeChain } 
      */
-    clip(shape) {
+    clip(modify = null) {
-        this._shape = shape;
+        if (modify instanceof Shape) {
-        this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
+            this._shape = modify;
-        return this;
+            this._modifications["border-radius"] = modify.getOrderedValues().join(' ');
+            return this;
+        } else {
+            let modSub = new ShapeChain(this);
+            if (modify instanceof Number && modify > 0) {
+                return modSub.all(modify).ensureModifier();
+            }
+            return modSub;
+        }
     }
 
     /**
-     * 
+     * @deprecated use Modifier.dimensions() instead
      * @param {number} size of width and height in pixels
      * @returns {DimensionsChain} 
      */
     linkDimensions(size = -1) {
         if (size === -1) {
-            return new DimensionsChain(this);
+            return new DimensionsChainedModifier(this);
         } else {
             return new DimensionsChain(this).all(size).ensureModifier()
         }
     }
 
     /**
-     * 
+     * @deprecated use Modifier.padding() instead
      * @param {number} amount the padding for all four sides
      * @returns {PaddingChain}
      */
     linkPadding(amount = -1) {
         if (amount === -1) {
-            return new PaddingChain(this);
+            return new PaddingChainedModifier(this);
         } else {
             return new PaddingChain(this).all(amount);
         }
     }
 
     /**
-     * 
+     * @deprecated use Modifier.margin() instead
      * @ATTENTION since it just increases complexity to constantly use padding and margin
      *            it is recommended to use padding and to stick to that as often as possible. 
      *            Padding values take affect inside/within the element.
@@ -337,33 +416,33 @@ class Modifier {
      */
     linkMargin(amount = -1) {
         if (amount === -1) {
-            return new MarginChain(this);
+            return new MarginChainedModifier(this);
         } else {
             return new MarginChain(this).all(amount);
         }
     }
 
     /**
-     * 
+     * @deprecated use Modifier.clip() instead
      * @param {number} cornerRadius will create a rounded rectangle with the given cornerRadius
      * @returns {ShapeChain}
      */
     linkClip(cornerRadius = -1) {
         if (cornerRadius === -1) {
-            return new ShapeChain(this);
+            return new ShapeChainedModifier(this);
         } else {
             return new ShapeChain(this).all(cornerRadius);
         }
     }
 
     /**
-     * 
+     * @deprecated use Modifier.border() instead
      * @param {number} borderWidth sets the width of all four border sides
      * @returns {BorderChain}
      */
     linkBorder(borderWidth = -1) {
         if (borderWidth === -1) {
-            return new BorderChain(this);
+            return new BorderChainedModifier(this);
         } else {
             return new BorderChain(this).width(borderWidth);
         }
@@ -398,6 +477,79 @@ class ChainableModifier extends Modifier {
         this._component = component;
     }
 
+    /**
+     * @inheritdoc
+     * 
+     * In Case it is called from a ChainableModifier chain,
+     * the Return type would be DimensionsChainedModifier instead of DimensionsChain.
+     * @override
+     * @param {Dimensions | number | undefined} [modify=null] dimensions
+     * @returns {ChainableModifier | DimensionsChainedModifier} 
+     */
+    dimensions(modify = null) {
+        if (modify instanceof Dimensions || modify instanceof Number) {
+            return super.dimensions(modify);
+        }
+        return new DimensionsChainedModifier(this);
+    }
+
+    /**
+     * @inheritdoc
+     * @override
+     * @param {Padding | number | undefined} [modify=null] modify as in modifiers
+     * @returns {ChainableModifier | PaddingChainedModifier}
+     */
+    padding(modify = null) {
+        if (modify instanceof Padding || Number.isInteger(modify)) {
+            return super.padding(modify);
+        }
+        return new PaddingChainedModifier(this);
+    }
+
+    /**
+     * @inheritdoc
+     * @override
+     * @param {Margin | number | undefined} [modify=null] modify as in modifiers
+     * @returns {ChainableModifier | MarginChainedModifier}
+     */
+    margin(modify = null) {
+        if (modify instanceof Margin || Number.isInteger(modify)) {
+            return super.margin(modify);
+        }
+        return new MarginChainedModifier(this);
+    }
+
+    /**
+     * @inheritdoc
+     * 
+     * @override
+     * @param {Shape | number | undefined} [Shape=null] shape
+     * @returns {ChainableModifier | ShapeChainedModifier} 
+     */
+    clip(shape = null) {
+        if (shape instanceof Shape || shhaape instanceof Number) {
+            return super.clip(shape);
+        }
+        return new ShapeChainedModifier(this);
+    }
+
+
+    /**
+     * 
+     * @inheritdoc
+     * 
+     * @override
+     * @param {Border | number | undefined} [border=null] border
+     * @returns {ChainableModifier | BorderChainedModifier} 
+     */
+    border(border = null) {
+        if (border instanceof Border || border instanceof Number) {
+            return super.border(border);
+        }
+        return new BorderChainedModifier(this);
+    }
+
+
     /**
      * 
      * @returns {Component}

src/modifiers/margin.js

@@ -0,0 +1,53 @@
+/**
+ * @inheritdoc
+ * @extends Sides
+ */
+class Margin extends Sides {
+    /**
+     * 
+     * @param {number|string} defaultValue 
+     * @param {SizeUnits} defaultUnit 
+     */
+    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
+        super("margin",defaultValue, defaultUnit);
+    }
+}
+
+
+/**
+ * @ATTENTION since it just increases complexity to constantly use padding and margin
+ *            it is recommended to use padding and to stick to that as often as possible. 
+ *            Padding values take affect inside/within the element.
+ * @inheritdoc
+ * @extends Margin
+ * @mixes 
+ */
+class MarginChain extends mixinModSubChainEndings(Margin) {
+    /**
+     * 
+     * @param {Modifier} modifier 
+     */
+    constructor(modifier) {
+        super(modifier);
+    }
+}
+
+
+/**
+ * 
+ * @ATTENTION since it just increases complexity to constantly use padding and margin
+ *            it is recommended to use padding and to stick to that as often as possible. 
+ *            Padding values take affect inside/within the element.
+ * @inheritdoc
+ * @extends MarginChain
+ * @mixin ModificationDefinition
+ */
+class MarginChainedModifier extends mixinModSubChainComponentMethods(Margin) {
+    /**
+     * 
+     * @param {ChainableModifier} modifier 
+     */
+    constructor(modifier) {
+        super(modifier);
+    }
+}

src/modifiers/modificationSubChainMixins.js

@@ -0,0 +1,163 @@
+class ModificationSubChain {
+
+    _modifier;
+    _modMethod;
+
+    /**
+     * 
+     * @param {Modifier} modifier 
+     * @param {string} modMethod 
+     */
+    constructor(modifier, modMethod) {
+        this._modifier = modifier;
+        this._modMethod = modMethod;
+    }
+
+    /**
+     * Returns the Modifier SubChain to the Modifier
+     * @returns {Modifier|ChainableModifier}
+     */
+    toModifier() {
+        return this._modifier[this._modMethod](this);
+    }
+
+    /**
+     * Returns chain to the Modifier
+     * @returns {Modifier|ChainableModifier}
+     */
+    ensureModifier() {
+        return this.toModifier()
+    }
+}
+
+
+class ModificationSubChainReComp extends ModificationSubChain {
+    /**
+     * 
+     * @param {ChainableModifier} modifier 
+     * @param {string} modMethod 
+     */
+    constructor(modifier) {
+        super();
+        this._modifier = modifier;
+    }
+
+    /**
+     * Returns chain to the component that is under modification
+     * @returns {Component} the Component that was (supposed to be) modified by this obj.
+     */
+    toComponent() {
+        return this._modifier[this._modMethod](this)
+            .toComponent();
+    }
+
+    /**
+     * Returns chain to the component that is under modification
+     * and adds the given innerComponent as children to the component.
+     * @param {Component|Array<Component>} innerComponent 
+     * @returns {Component}
+     */
+    childContext(innerComponent) {
+        return this._modifier[this._modMethod](this)
+            .toComponent()
+            .childContext(innerComponent);
+    }
+
+    /**
+     * Closes modifier chain and returns builder to define the next child of the component
+     * @returns {Component}
+     */
+    chainChild() {
+        return this._modifier[this._modMethod](this)
+            .toComponent()
+            .chainChild();
+    }
+}
+
+
+
+/**
+ * Function is a mixin to add endings to a Modifier SubChain.
+ * Explicitly used for "link..." methods called from a Modifier,
+ * that is unaware of its component. 
+ * 
+ * @param {typeof DirectionUnitDependentAttribute} classToExtend 
+ * @returns {typeof ModificationSubChain}
+ */
+function mixinModSubChainEndings(classToExtend) {
+    return class extends classToExtend {
+
+        _modifier;
+
+        /**
+         * 
+         * @param {Modifier} modifier 
+         * @param {string} modMethod 
+         */
+        constructor(modifier) {
+            super();
+            this._modifier = modifier;
+        }
+
+        /**
+         * Returns the Modifier SubChain to the Modifier
+         * @returns {Modifier|ChainableModifier}
+         */
+        toModifier() {
+            let tmp = this._modifier[this._modMethod];
+            return this._modifier[this._modMethod](this);
+        }
+
+        /**
+         * Returns chain to the Modifier
+         * @returns {Modifier|ChainableModifier}
+         */
+        ensureModifier() {
+            return this.toModifier()
+        }
+    }
+}
+
+
+/**
+ * 
+ * Function is a mixin to add "return" methods to a Modifier SubChain.
+ * Explicitly used for "link..." methods called from a ChainableModifier.
+ * 
+ * @param {typeof DirectionUnitDependentAttribute} classToExtend 
+ * @returns {typeof ModificationSubChainReComp}
+ */
+function mixinModSubChainComponentMethods(classToExtend) {
+    return class extends mixinModSubChainEndings(classToExtend) {
+        /**
+         * Returns chain to the component that is under modification
+         * @returns {Component} the Component that was (supposed to be) modified by this obj.
+         */
+        toComponent() {
+            return this._modifier[this._modMethod](this)
+                .toComponent();
+        }
+
+        /**
+         * Returns chain to the component that is under modification
+         * and adds the given innerComponent as children to the component.
+         * @param {Component|Array<Component>} innerComponent 
+         * @returns {Component}
+         */
+        childContext(innerComponent) {
+            return this._modifier[this._modMethod](this)
+                .toComponent()
+                .childContext(innerComponent);
+        }
+
+        /**
+         * Closes modifier chain and returns builder to define the next child of the component
+         * @returns {Component}
+         */
+        chainChild() {
+            return this._modifier[this._modMethod](this)
+                .toComponent()
+                .chainChild();
+        }
+    }
+}

src/modifiers/padding.js

@@ -0,0 +1,44 @@
+/**
+ * @inheritdoc
+ * @extends Sides
+ */
+class Padding extends Sides {
+    /**
+     * 
+     * @param {number|string} defaultValue 
+     * @param {SizeUnits} defaultUnit 
+     */
+    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
+        super("padding", defaultValue, defaultUnit);
+    }
+}
+
+
+/**
+ * @inheritdoc
+ * @extends Padding
+*/
+class PaddingChain extends mixinModSubChainEndings(Padding){
+    /**
+     * 
+     * @param {Modifier} modifier 
+     */
+    constructor(modifier) {
+        super(modifier);
+    }
+}
+
+
+/**
+ * @inheritdoc
+ * @extends PaddingChain
+ */
+class PaddingChainedModifier extends mixinModSubChainComponentMethods(Padding){
+    /**
+     * 
+     * @param {Modifier} modifier 
+     */
+    constructor(modifier) {
+        super(modifier);
+    }
+}

src/sizeSide/border.js

@@ -58,7 +58,7 @@ const Define = Object.freeze({
  */
 class Border extends Sides {
     constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) {
-        super(0, defaultUnit);
+        super('border', 0, defaultUnit);
         this._fFirst = new BorderDefinition(width, color, style);
         this._fSecond = new BorderDefinition(width, color, style);
         this._fThird = new BorderDefinition(width, color, style);
@@ -79,7 +79,7 @@ class Border extends Sides {
      * 
      * @param {string} key 
      * @param {*} value 
-     * @returns {Border}
+     * @returns {this}
      */
     setOnDirections(key, value) {
         let orderedAttributes = this.getOrderedAttributes()
@@ -92,7 +92,7 @@ class Border extends Sides {
     /**
      * 
      * @param {number} width 
-     * @returns {Border}
+     * @returns {this}
      */
     width(width) {
         this._fFirst._width = width;
@@ -105,7 +105,7 @@ class Border extends Sides {
     /**
      * 
      * @param {*} color 
-     * @returns {Border}
+     * @returns {this}
     */
     color(color) {
         this._fFirst._color = color;
@@ -118,7 +118,7 @@ class Border extends Sides {
     /**
      * 
      * @param {Shape} shape 
-     * @returns {Border}
+     * @returns {this}
      */
     shape(shape) {
         this._shape = shape;
@@ -128,7 +128,7 @@ class Border extends Sides {
     /**
      * Sets the border-style of all sides to the given. 
      * @param {LineStyles} lineStyle style of the border
-     * @returns {Border}
+     * @returns {this}
      */
     setStyleAll(lineStyle) {
         this._fFirst._style = lineStyle;
@@ -142,7 +142,7 @@ class Border extends Sides {
      * 
      * @param {LineStyles} lineStyle 
      * @param {*} sidingRefSide 
-     * @returns {Border}
+     * @returns {this}
      */
     setLineStyle(lineStyle, sidingRefSide) {
         this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
@@ -152,7 +152,7 @@ class Border extends Sides {
     /**
      * 
      * @param {Map<SidingRefSides, LineStyles} refSideStyleMap 
-     * @returns {Border}
+     * @returns {this}
      */
     setLineStyles(refSideStyleMap) {
         let rkeys = Object.keys(refSideStyleMap);
@@ -163,6 +163,10 @@ class Border extends Sides {
     }
 
 
+    /**
+     * 
+     * @returns {Array<{key: string, value: string}>}
+     */
     toModifications() {
         let names = ["left", "top", "right", "bottom"];
         return this.getOrderedAttributes()
@@ -175,7 +179,7 @@ class Border extends Sides {
                     { key: `border-${names[i]}-color`, value: bdef._color.cssRGBString() },
                     { key: `border-${names[i]}-style`, value: bdef._style }
                 ]
-            })
+            });
     }
 }
 
@@ -183,49 +187,27 @@ class Border extends Sides {
  * @inheritdoc
  * @extends Border
  */
-class BorderChain extends Border {
+class BorderChain extends mixinModSubChainEndings(Border) {
-    constructor(modifier){
-        super();
-        this._modifier = modifier;
-    }
-
     /**
      * 
-     * @returns {Modifier|ChainableModifier}
+     * @param {Modifier} modifier 
      */
-    toModifier() {
+    constructor(modifier) {
-        return this._modifier
+        super(modifier);
-            .border(this);
-    }
-
-    /**
-     * 
-     * @returns {Modifier|ChainableModifier}
-     */
-    ensureModifier() {
-        return this.toModifier()
     }
+}
 
-    /**
-     * Applies the border modification on the modifier
-     * and returns (through the modifier) to the corresponding component. 
-     * @returns {Component}
-     */
-    toComponent() {
-        return this._modifier
-            .border(this)
-            .toComponent();
-    }
 
+/**
+ * @inheritdoc
+ * @extends BorderChain
+ */
+class BorderChainedModifier extends mixinModSubChainComponentMethods(Border) {
     /**
      * 
-     * @param {Component} innerComponent will be set to the corresponding component
+     * @param {ChainableModifier} modifier 
-     * @returns {Component} the corr. Component after the childContext was applied. 
      */
-    childContext(innerComponent) {
+    constructor(modifier) {
-        return this._modifier
+        super(modifier);
-            .border(this)
-            .toComponent()
-            .childContext(innerComponent);
     }
 }

src/sizeSide/dimensions.js

@@ -17,7 +17,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
      * @param {SizeUnits} defaultUnit 
      */
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
-        super();
+        super("dimensions", defaultValue, defaultUnit);
         this._unit = defaultUnit;
         this._fFirst = defaultValue;
         this._fSecond = defaultValue;
@@ -26,7 +26,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
     /**
      * Sets width (x) value of amount
      * @param {number} amount 
-     * @returns {Dimensions} this Dimensions Modifier
+     * @returns {this} this Dimensions Modifier
      */
     width(amount) {
         this._fFirst = amount;
@@ -36,7 +36,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
     /**
      * Sets height (y) value of amount
      * @param {number} amount 
-     * @returns {Dimensions} this Dimensions Modifier
+     * @returns {this} this Dimensions Modifier
      */
     height(amount) {
         this._fSecond = amount;
@@ -46,7 +46,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
     /**
      * 
      * @param {number} size 
-     * @returns {Dimensions}
+     * @returns {this}
      */
     all(size) {
         return this.width(size).height(size);
@@ -59,7 +59,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
 
     /**
      * 
-     * @returns {Object}
+     * @returns
      */
     toModifications() {
         let w = { key: "width", value: this._fFirst + this._unit }
@@ -89,62 +89,32 @@ class Dimensions extends DirectionUnitDependentAttribute {
     }
 }
 
+
 /**
  * @inheritdoc
  * @extends Dimensions
- */
+*/
-class DimensionsChain extends Dimensions {
+class DimensionsChain extends mixinModSubChainEndings(Dimensions) {
-    /**
-     * @type {Modifier|ChainableModifier}
-     */
-    _modifier;
-
     /**
      * 
-     * @param {Modifier|ChainableModifier} modifier 
+     * @param {Modifier} modifier 
      */
     constructor(modifier) {
-        super();
+        super(modifier);
-        this._modifier = modifier;
-    }
-
-    /**
-     * 
-     * @returns {Modifier|ChainableModifier}
-     */
-    toModifier() {
-        return this._modifier
-            .dimensions(this);
-    }
-
-    /**
-     * 
-     * @returns {Modifier|ChainableModifier}
-     */
-    ensureModifier() {
-        return this.toModifier()
     }
+}
 
-    /**
-     * 
-     * @returns {Component} the Component that was (supposed to be) modified by this obj.
-     */
-    toComponent() {
-        return this._modifier
-            .dimensions(this)
-            .toComponent();
-    }
 
+/**
+ * @inheritdoc
+ * @extends DimensionsChain
+ */
+class DimensionsChainedModifier extends mixinModSubChainComponentMethods(Dimensions) {
     /**
      * 
-     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
+     * @param {ChainableModifier} modifier 
-     * @returns {Component}
      */
-    childContext(innerComponent) {
+    constructor(modifier) {
-        return this._modifier
+        super(modifier);
-            .dimensions(this)
-            .toComponent()
-            .childContext(innerComponent);
     }
 }
-

src/sizeSide/shapes.js

@@ -10,12 +10,12 @@
  */
 class Shape extends DirectionUnitDependentAttribute {
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
-        super(defaultValue, defaultUnit);
+        super('clip',defaultValue, defaultUnit);
     }
     /**
      * 
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     topLeft(amount) {
         this._fFirst = amount;
@@ -24,7 +24,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * 
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     topRight(amount) {
         this._fSecond = amount;
@@ -33,7 +33,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * 
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     bottomLeft(amount) {
         this._fForth = amount;
@@ -42,7 +42,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * 
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     bottomRight(amount) {
         this._fThird = amount;
@@ -51,7 +51,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets the BottomLeft and TopRight corners
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     diagonalPositive(amount) {
         return this.bottomLeft(amount).topRight(amount);
@@ -59,7 +59,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets the TopLeft and BottomRight corners
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     diagonalNegative(amount) {
         return this.topLeft(amount).bottomRight(amount);
@@ -67,7 +67,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets both corners on the left side
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     left(amount) {
         return this.topLeft(amount).bottomLeft(amount);
@@ -75,7 +75,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets both corners on the right side
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     right(amount) {
         return this.topRight(amount).bottomRight(amount);
@@ -83,7 +83,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets both top corners
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     top(amount){
         return this.topLeft(amount).topRight(amount);
@@ -91,7 +91,7 @@ class Shape extends DirectionUnitDependentAttribute {
     /**
      * Sets both bottom corners
      * @param {number} amount 
-     * @returns {Shape}
+     * @returns {this}
      */
     bottom(amount){
         return this.bottomLeft(amount).bottomRight(amount);
@@ -100,7 +100,7 @@ class Shape extends DirectionUnitDependentAttribute {
 
     /**
      * 
-     * @param {*} amount 
+     * @returns 
      */
     getSidingRefValueMap() {
         return {
@@ -115,51 +115,29 @@ class Shape extends DirectionUnitDependentAttribute {
 /**
  * @inheritdoc
  * @extends Shape
- */
+*/
-class ShapeChain extends Shape {
+class ShapeChain extends mixinModSubChainEndings(Shape) {
-    _modifier;
-    constructor(modifier) {
-        super();
-        this._modifier = modifier;
-    }
-
-    /**
-     * 
-     * @returns {Modifier|ChainableModifier}
-     */
-    toModifier() {
-        return this._modifier
-            .clip(this);
-    }
     /**
      * 
-     * @returns {Modifier|ChainableModifier}
+     * @param {Modifier} modifier 
      */
-    ensureModifier() {
+    constructor(modifier) {
-        return this.toModifier()
+        super(modifier);
     }
+}
 
 
+/**
+ * @inheritdoc
+ * @extends ShapeChain
+ */
+class ShapeChainedModifier extends mixinModSubChainComponentMethods(Shape) {
     /**
      * 
-     * @returns {Component} the Component that was (supposed to be) modified by this obj.
+     * @param {ChainableModifier} modifier 
-     */
-    toComponent() {
-        return this._modifier
-            .clip(this)
-            .toComponent();
-    }
-
-    /**
-     * 
-     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
-     * @returns {Component}
      */
-    childContext(innerComponent) {
+    constructor(modifier) {
-        return this._modifier
+        super(modifier);
-            .clip(this)
-            .toComponent()
-            .childContext(innerComponent);
     }
 }
 

src/sizeSide/siding.js

@@ -16,13 +16,23 @@ const SizeUnits = Object.freeze({
  * @abstract
  */
 class DirectionUnitDependentAttribute {
+    /**
+     * @type {string} the name of the modifier-method that uses this class.
+     */
+    _modMethod;
+
     _unit;
     _fFirst;
     _fSecond;
     _fThird;
     _fForth;
 
-    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
+    /**
+     * @param {number|string} defaultValue
+     * @param {SizeUnits} defaultUnit
+     */
+    constructor(modMethod, defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
+        this._modMethod=modMethod;
         this._unit = defaultUnit;
         this._fFirst = defaultValue;
         this._fSecond = defaultValue;
@@ -33,7 +43,7 @@ class DirectionUnitDependentAttribute {
     /**
      * 
      * @param {Units} unit The unit of the amount or style
-     * @returns {DirectionUnitDependentAttribute} this - Object
+     * @returns {this} this - Object
      */
     setUnit(unit) {
         this._unit = unit;
@@ -42,7 +52,7 @@ class DirectionUnitDependentAttribute {
 
     /**
      * 
-     * @returns {array<*>} list of attributes
+     * @returns
      */
     getOrderedAttributes() {
         return [this._fFirst, this._fSecond, this._fThird, this._fForth];
@@ -62,7 +72,7 @@ class DirectionUnitDependentAttribute {
      * Mainly used by the setup of directions of subclasses.
      * @param {number} index [1,4]
      * @param {number} value 
-     * @returns {DirectionUnitDependentAttribute} this
+     * @returns {this} this
      */
     setByIndex(index, value) {
         switch (index) {
@@ -122,7 +132,7 @@ class DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for all directions.
      * @param {number} amount value to set for all directions
-     * @returns {DirectionUnitDependentAttribute} this 
+     * @returns {this} this 
      */
     all(amount) {
         this._fFirst = amount;
@@ -161,24 +171,24 @@ const CornerTransitionDirection = Object.freeze({
 /**
  * @inheritdoc
  * @extends DirectionUnitDependentAttribute
- * 
+ * @abstract
  */
 class Sides extends DirectionUnitDependentAttribute {
     /**
      * 
+     * @deprecated class is abstract now, 
+     *             direct usage is deprecated use extending classes (Padding, Margin)
      * @param {number|string} defaultValue 
      * @param {SizeUnits} defaultUnit 
      */
-    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
+    constructor(modMethod, defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
-        super(defaultValue, defaultUnit);
+        super(modMethod, defaultValue, defaultUnit);
-        this._stylesKey = "";
     }
 
-
     /**
      * sets the amount-value for the left side.
      * @param {number} amount Sides for left
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     left(amount) {
         return this.setByIndex(1, amount);
@@ -187,7 +197,7 @@ class Sides extends DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for the right side.
      * @param {number} amount Sides for right
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     right(amount) {
         return this.setByIndex(3, amount);
@@ -196,7 +206,7 @@ class Sides extends DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for the top side.
      * @param {number} amount Sides for top
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     top(amount) {
         return this.setByIndex(2, amount);
@@ -205,7 +215,7 @@ class Sides extends DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for the bottom side.
      * @param {number} amount Sides for bottom
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     bottom(amount) {
         return this.setByIndex(4, amount);
@@ -215,7 +225,7 @@ class Sides extends DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for the horizontal sides (left and right).
      * @param {number} amount Sides for left and right.
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     horizontal(amount) {
         return this.left(amount).right(amount);
@@ -224,7 +234,7 @@ class Sides extends DirectionUnitDependentAttribute {
     /**
      * sets the amount-value for the vertical sides (left and right).
      * @param {number} amount Sides for top and bottom.
-     * @returns {Sides} this Sides Object
+     * @returns {this} this Sides Object
      */
     vertical(amount) {
         return this.top(amount).bottom(amount);
@@ -249,10 +259,10 @@ class Sides extends DirectionUnitDependentAttribute {
      * Returns the style-modifications of the class.
      * The style-modification is set as <_stylesKey>-<directional value>.
      * 
-     * @returns {Map<string,string>}
+     * @returns
      */
     toModifications() {
-        let preKey = this._stylesKey + (this._stylesKey !== '' ? '-' : '');
+        let preKey = this._modMethod + (this._modMethod !== '' ? '-' : '');
         return [
             { key: preKey + "left", value: this._fFirst + this._unit },
             { key: preKey + "top", value: this._fSecond + this._unit },
@@ -261,103 +271,3 @@ class Sides extends DirectionUnitDependentAttribute {
         ]
     }
 }
-
-/**
- * @inheritdoc
- * @extends Sides
- */
-class PaddingChain extends Sides {
-    /**
-     * @type {Modifier}
-     */
-    _modifier;
-    /**
-     * 
-     * @param {Modifier} modifier 
-     */
-    constructor(modifier) {
-        super();
-        this._modifier = modifier;
-        this._stylesKey = "padding";
-    }
-
-    /**
-     * 
-     * @returns {Modifier}
-     */
-    toModifier() {
-        return this._modifier
-            .padding(this);
-    }
-
-    /**
-     * Returns the corresponding Modifier.
-     * Basically climbs up the chain level.
-     * @returns {Modifier} 
-     */
-    ensureModifier() {
-        return this.toModifier()
-    }
-
-    /**
-     * 
-     * @returns {Component} the Component that was (supposed to be) modified by this obj.
-     */
-    toComponent() {
-        return this._modifier
-            .padding(this)
-            .toComponent();
-    }
-
-    /**
-     * 
-     * @param {Component|Array<Component>} innerComponent children of the Component under modification.
-     * @returns {Component}
-     */
-    childContext(innerComponent) {
-        return this._modifier
-            .padding(this)
-            .toComponent()
-            .childContext(innerComponent);
-    }
-}
-
-/**
- * @ATTENTION since it just increases complexity to constantly use padding and margin
- *            it is recommended to use padding and to stick to that as often as possible. 
- *            Padding values take affect inside/within the element.
- * @inheritdoc
- * @extends PaddingChain
- */
-class MarginChain extends PaddingChain {
-    /**
-     * @inheritdoc
-     * @param {Modifier} modifier 
-     */
-    constructor(modifier) {
-        super(modifier);
-        this._stylesKey = "margin";
-    }
-
-    /**
-     * @inheritdoc
-     * @returns {Component}
-     */
-    toComponent() {
-        return this._modifier
-            .margin(this)
-            .toComponent();
-    }
-
-    /**
-     * @inheritdoc
-     * @returns {Component}
-     */
-    childContext(innerComponent) {
-        return this._modifier
-            .margin(this)
-            .toComponent()
-            .childContext(innerComponent);
-    }
-}
-