MINOR,DOC: Added convenience functions to the Shape class and fixed/changed some doc

src/component.js

@@ -504,23 +504,10 @@ class Component extends StyleAndScriptStoringComponent {
             }
         }
 
-
-
+        /**
+         * @type {Array<SStoreDefinition>}
+         */
         let styleCollection = this._processStyles(styleStore);
-
-        /* dealing with being the "collecting" one or not
-        
-        if (this.#isCompel) {
-            
-            let collectedContainer = document.createElement("style");
-            collectedContainer.setAttribute("data-compel-collected", counter);
-            Page.addElementToPage(collectedContainer, extStore, this._element);
-
-        }else{
-            this._wenity.css = stylesForCollection;
-        }
-        */
-
         /**
          * @type {Map<ExtStoreType, Array<SStoreDefinition>>}
          */

src/modifier.js

@@ -11,13 +11,19 @@
  */
 class Modifier {
     /**
-     * @property {Map<string,string>} _modifications
+     * @type {Map<string,string>} _modifications
      */
     _modifications;
+    /**
+     * @type {Array<string>}
+     */
     _removeMods;
+    /**
+     * @type {Shape}
+     */
     _shape;
     /**
-     * @property {Sides} paddingValues
+     * @type {Sides} paddingValues
      */
     _paddingValues;
 
@@ -63,14 +69,14 @@ class Modifier {
      * @param {Sides} parentalPadding 
      */
     _updateDimensionsBy(parentalPadding) {
-        function updateDirection(keyWord, parentalAdjustment) {
-            let refKeys = Object.keys(this._modifications)
+        function updateDirection(keyWord, modifications, parentalAdjustment) {
+            let refKeys = Object.keys(modifications)
                 .filter(k => k.includes(keyWord));
 
             if (refKeys.length > 0) {
                 for (let i = 0; i < refKeys.length; i++) {
                     let key = refKeys[i];
-                    let value = this._modifications[key];
+                    let value = modifications[key];
 
                     if (key.includes("calc")) {
                         console.log(
@@ -80,28 +86,22 @@ class Modifier {
                             }', skipping...`
                         );
                     } else {
-                        let newValue = `calc(${value} - ${parentalAdjustment}); `;
-                        console.log(
-                            `Modifier._updateByParent... ${keyWord
-                            } - updating value '${value
-                            }' to '${newValue
-                            }', for '${key
-                            }'!`
-                        );
-                        this._modifications[key] = newValue;
+                        let newValue = `calc(${value} - ${parentalAdjustment});`;
+                        modifications[key] = newValue.trim();
                     }
                 }
             }
+            return modifications;
         }
 
         if (parentalPadding) {
             let pval = parentalPadding.getValues();
             if (pval["horizontal"] > 0) {
-                updateDirection("width", pval["horizontal"]);
+                this._modifications = updateDirection("width", this._modifications, pval["horizontal"]+parentalPadding._unit);
             }
 
             if (pval["vertical"] > 0) {
-                updateDirection("height", pval["vertical"]);
+                this._modifications = updateDirection("height", this._modifications, pval["vertical"]+parentalPadding._unit);
             }
         }
 

src/sizeSide/shapes.js

@@ -19,7 +19,7 @@ class Shape extends DirectionUnitDependentAttribute {
     }
     /**
      * 
-     * @param {*} amount 
+     * @param {number} amount 
      * @returns {Shape}
      */
     topLeft(amount) {
@@ -28,7 +28,7 @@ class Shape extends DirectionUnitDependentAttribute {
     }
     /**
      * 
-     * @param {*} amount 
+     * @param {number} amount 
      * @returns {Shape}
      */
     topRight(amount) {
@@ -37,7 +37,7 @@ class Shape extends DirectionUnitDependentAttribute {
     }
     /**
      * 
-     * @param {*} amount 
+     * @param {number} amount 
      * @returns {Shape}
      */
     bottomLeft(amount) {
@@ -46,7 +46,7 @@ class Shape extends DirectionUnitDependentAttribute {
     }
     /**
      * 
-     * @param {*} amount 
+     * @param {number} amount 
      * @returns {Shape}
      */
     bottomRight(amount) {
@@ -54,29 +54,54 @@ class Shape extends DirectionUnitDependentAttribute {
         return this;
     }
     /**
-     * 
-     * @param {*} amount 
+     * Sets the BottomLeft and TopRight corners
+     * @param {number} amount 
      * @returns {Shape}
      */
     diagonalPositive(amount) {
         return this.bottomLeft(amount).topRight(amount);
     }
     /**
-     * 
-     * @param {*} amount 
+     * Sets the TopLeft and BottomRight corners
+     * @param {number} amount 
      * @returns {Shape}
      */
     diagonalNegative(amount) {
         return this.topLeft(amount).bottomRight(amount);
     }
-
+    /**
+     * Sets both corners on the left side
+     * @param {number} amount 
+     * @returns {Shape}
+     */
     left(amount) {
         return this.topLeft(amount).bottomLeft(amount);
     }
-
+    /**
+     * Sets both corners on the right side
+     * @param {number} amount 
+     * @returns {Shape}
+     */
     right(amount) {
         return this.topRight(amount).bottomRight(amount);
     }
+    /**
+     * Sets both top corners
+     * @param {number} amount 
+     * @returns {Shape}
+     */
+    top(amount){
+        return this.topLeft(amount).topRight(amount);
+    }
+    /**
+     * Sets both bottom corners
+     * @param {number} amount 
+     * @returns {Shape}
+     */
+    bottom(amount){
+        return this.bottomLeft(amount).bottomRight(amount);
+    }
+
 
     /**
      *