HELPER,DOC,REFA: Added several helper methods

src/builder.js

@@ -16,11 +16,39 @@ const builder = {
           openedChain: {}
      },
 
-     componentFromHTML: function (htmlText) {
+     extended: {},
+
+     /**
+      * 
+      * @param {string} htmlText 
+      * @param {Modifier} modifier 
+      * @returns {Component}
+      */
+     componentFromHTML: function (htmlText, modifier = null) {
+          /**
+           * @type {Component}
+           */
           let compel = new Component(new DOMParser().parseFromString(htmlText, "text/html"));
+          if (modifier) {
+               return compel.modifier(modifier);
+          }
           return compel;
      },
 
+     /**
+      * 
+      * @param {HTMLElement} element 
+      * @param {Modifier} modifier 
+      * @returns {Component}
+      */
+     componentFromHTMLElement: function (element, modifier = null) {
+          let newCompel = new Component(element);
+          if (modifier) {
+               return newCompel.modifier(modifier);
+          }
+          return newCompel;
+     },
+
      /**
       * 
       * @param {string} tag 

src/component.js

@@ -300,6 +300,32 @@ class Component extends StyleAndScriptStoringComponent {
         return this;
     }
 
+
+    /**
+     * An echo of  Scope-Functions from kotlin for convenience
+     * 
+     * Executes a given function injects this component into the function.
+     * @param {Function} func 
+     * @returns {Component}
+     */
+    apply(func) {
+        func(this);
+        return this;
+    }
+
+
+    /**
+     * An echo of  Scope-Functions from kotlin for convenience
+     * 
+     * Executes a given function injects the htmlelement of this component into the function.
+     * @param {Function} func 
+     * @returns {Component}
+     */
+    applyToEl(func) {
+        func(this._element)
+        return this;
+    }
+
     /**
      * Defines how a child Component is to be appended.
      * @param {Component} component the child component to add it.

src/context/scriptAndStyleContext.js

@@ -129,9 +129,13 @@ class ScriptAndStyleContext {
      * @todo implement extStore logic
      * 
      * @param {string} elementIdentifier The element identifier
-     * @param {map<string, string>} styleRuleMap The Styling rules/values
+     * @param {map<string, string>|Modifier} styleRuleMap The Styling rules/values
      */
     registerStyling(elementIdentifier, styleRuleMap) {
+        if(styleRuleMap instanceof Modifier){
+            styleRuleMap = styleRuleMap._modifications;
+        }
+
         if (!Object.keys(this.#css).includes(elementIdentifier)) {
             this.#css[elementIdentifier] = styleRuleMap
         }

src/modifier.js

@@ -221,6 +221,18 @@ class Modifier {
         return this;
     }
 
+    /**
+     * 
+     * @param {StylePropertyMap} rulemap 
+     * @returns {Modifier}
+     */
+    addStyleRuleMap(rulemap) {
+        for (const ruleKey of Object.keys(rulemap)) {
+            this._modifications[ruleKey] = rulemap[ruleKey];
+        }
+        return this;
+    }
+
     /**
      * 
      * @param {string} key 

src/sizeSide/dimensions.js

@@ -35,6 +35,11 @@ class Dimensions extends DirectionUnitDependentAttribute {
         return this;
     }
 
+    /**
+     * 
+     * @param {number} size 
+     * @returns {Dimensions}
+     */
     all(size) {
         return this.width(size).height(size);
     }
@@ -44,6 +49,10 @@ class Dimensions extends DirectionUnitDependentAttribute {
         return this.getOrderedValues().slice(2)
     }
 
+    /**
+     * 
+     * @returns {Object}
+     */
     toModifications() {
         let w = { key: "width", value: this._fFirst + this._unit }
         let h = { key: "height", value: this._fSecond + this._unit }
@@ -59,6 +68,17 @@ class Dimensions extends DirectionUnitDependentAttribute {
             return []
         }
     }
+
+    /**
+     * 
+     * @returns {TwoDimPoint}
+     */
+    toTwoDimPoint() {
+        return new TwoDimPoint(
+            this._fFirst,
+            this._fSecond
+        );
+    }
 }
 
 

src/sizeSide/siding.js

@@ -322,6 +322,68 @@ class TwoDimPoint {
         this.x = x;
         this.y = y;
     }
+
+    /**
+     * 
+     * @param {number} delta 
+     * @returns {TwoDimPoint}
+     */
+    xMinus(delta) {
+        this.x = this.x - delta;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {number} delta 
+     * @returns {TwoDimPoint}
+     */    
+    xPlus(delta) {
+        this.x = this.x + delta;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {number} delta 
+     * @returns {TwoDimPoint}
+     */    
+    yMinus(delta) {
+        this.y = this.y - delta;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {number} delta 
+     * @returns {TwoDimPoint}
+     */    
+    yPlus(delta) {
+        this.y = this.y + delta;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {TwoDimPoint} delta 
+     * @returns {TwoDimPoint}
+     */    
+    minusTDP(delta) {
+        this.x = this.x - delta.x;
+        this.y = this.y - delta.y;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {TwoDimPoint} delta 
+     * @returns {TwoDimPoint}
+     */
+    plusTDP(delta) {
+        this.x = this.x + delta.x;
+        this.y = this.y + delta.y;
+        return this;
+    }
 }
 
 /**