Browse Source

FIX,DOC: adjusted return types and fixed integer identification

dev-feat-component_preview
chris 2 months ago
parent
commit
208481a867
  1. 2
      fileOrder.json
  2. 4
      src/context/generalHelpers.js
  3. 46
      src/modifier.js
  4. 14
      src/sizeSide/border.js
  5. 13
      src/sizeSide/dimensions.js
  6. 20
      src/sizeSide/shapes.js
  7. 18
      src/sizeSide/siding.js

2
fileOrder.json

@ -5,7 +5,7 @@
"alignment.js", "alignment.js",
"arrangement.js" "arrangement.js"
], ],
"size_sidings": [ "modifications": [
"modificationSubChainMixins.js", "modificationSubChainMixins.js",
"siding.js", "siding.js",
"padding.js", "padding.js",

4
src/context/generalHelpers.js

@ -66,8 +66,8 @@ class ObjectAccessObject {
* @param {Function} fun * @param {Function} fun
* @returns {Object | Array<Object>} * @returns {Object | Array<Object>}
*/ */
function onSingleOrArray(singleOrArray, fun){ function onSingleOrArray(singleOrArray, fun) {
if(singleOrArray instanceof Array){ if (singleOrArray instanceof Array) {
return singleOrArray.map(fun); return singleOrArray.map(fun);
} }
return fun(singleOrArray); return fun(singleOrArray);

46
src/modifier.js

@ -34,7 +34,7 @@ class Modifier {
/** /**
* Sets the modifications for widht and height to 100%. * Sets the modifications for widht and height to 100%.
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
fillMaxSize(widthFraction = 1, heightFraction = 1) { fillMaxSize(widthFraction = 1, heightFraction = 1) {
return this.fillMaxWidth(widthFraction) return this.fillMaxWidth(widthFraction)
@ -44,7 +44,7 @@ class Modifier {
/** /**
* Sets the modification for width to the given fraction of 1 (default 1 := 100%). * Sets the modification for width to the given fraction of 1 (default 1 := 100%).
* @param {number} fraction * @param {number} fraction
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
fillMaxWidth(fraction = 1) { fillMaxWidth(fraction = 1) {
this._modifications["width"] = (100 * fraction) + "%"; this._modifications["width"] = (100 * fraction) + "%";
@ -55,7 +55,7 @@ class Modifier {
/** /**
* Sets the modification for height to the given fraction of 1 (default 1 := 100%). * Sets the modification for height to the given fraction of 1 (default 1 := 100%).
* @param {number} fraction * @param {number} fraction
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
fillMaxHeight(fraction = 1) { fillMaxHeight(fraction = 1) {
this._modifications["height"] = (100 * fraction) + "%"; this._modifications["height"] = (100 * fraction) + "%";
@ -133,7 +133,7 @@ class Modifier {
return this; return this;
} else { } else {
let modSub = new DimensionsChain(this); let modSub = new DimensionsChain(this);
if (modify instanceof Number && modify > 0) { if (Number.isInteger(modify) && modify > 0) {
return modSub.all(modify).ensureModifier(); return modSub.all(modify).ensureModifier();
} }
// case dimension is number but < 0 or dimensions == null or anything else // case dimension is number but < 0 or dimensions == null or anything else
@ -146,7 +146,7 @@ class Modifier {
* Currently the padding will always be set * Currently the padding will always be set
* to the most recent padding/padding. * to the most recent padding/padding.
* @param {Padding | number | undefined} modify as in modifiers * @param {Padding | number | undefined} modify as in modifiers
* @returns {Modifier} this modifier object * @returns {Modifier | PaddingChain} this modifier object
*/ */
padding(modify = null) { padding(modify = null) {
if (modify instanceof Sides && !(modify instanceof Padding)) { if (modify instanceof Sides && !(modify instanceof Padding)) {
@ -177,7 +177,7 @@ class Modifier {
* it is recommended to use padding and to stick to that as often as possible. * it is recommended to use padding and to stick to that as often as possible.
* Padding values take affect inside/within the element. * Padding values take affect inside/within the element.
* @param {Margin | number | undefined} modify * @param {Margin | number | undefined} modify
* @returns {Modifier} this modifier object * @returns {Modifier | MarginChain} this modifier object
*/ */
margin(modify = null) { margin(modify = null) {
if (modify instanceof Sides && !(modify instanceof Margin)) { if (modify instanceof Sides && !(modify instanceof Margin)) {
@ -205,7 +205,7 @@ class Modifier {
* If no color is given/specified the styling will be set to "inherit" * If no color is given/specified the styling will be set to "inherit"
* and use the color setting from (one of) the parent. * and use the color setting from (one of) the parent.
* @param {Color} color * @param {Color} color
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
background(color) { background(color) {
if (color) { if (color) {
@ -225,7 +225,7 @@ class Modifier {
* If no color is given/specified the styling will be set to "inherit" * If no color is given/specified the styling will be set to "inherit"
* and use the color setting from (one of) the parent. * and use the color setting from (one of) the parent.
* @param {Color} color * @param {Color} color
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
color(color) { color(color) {
this._modifications["color"] = ( this._modifications["color"] = (
@ -246,7 +246,7 @@ class Modifier {
* @todo finish second parameter "modifications" - logic * @todo finish second parameter "modifications" - logic
* *
* @param modifier The "new" Modifier * @param modifier The "new" Modifier
* @returns {Modifier} The "old/current" Modifier, * @returns {Modifier | ChainableModifier} The "old/current" Modifier,
* extended with the modifications of the given Modifier. * extended with the modifications of the given Modifier.
*/ */
join(modifier, modifications = {}) { join(modifier, modifications = {}) {
@ -271,7 +271,7 @@ class Modifier {
* *
* @param {string} key a css style rule * @param {string} key a css style rule
* @param {string} value the corresponding value to the css style rule * @param {string} value the corresponding value to the css style rule
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
setStyleRule(key, value) { setStyleRule(key, value) {
this._modifications[key] = value; this._modifications[key] = value;
@ -281,7 +281,7 @@ class Modifier {
/** /**
* *
* @param {StylePropertyMap} rulemap * @param {StylePropertyMap} rulemap
* @returns {Modifier} * @returns {Modifier | ChainableModifier}
*/ */
addStyleRuleMap(rulemap) { addStyleRuleMap(rulemap) {
for (const ruleKey of Object.keys(rulemap)) { for (const ruleKey of Object.keys(rulemap)) {
@ -293,7 +293,7 @@ class Modifier {
/** /**
* *
* @param {string} key * @param {string} key
* @returns {Modifier} this modifier object * @returns {Modifier | ChainableModifier} this modifier object
*/ */
removeStyleRule(key) { removeStyleRule(key) {
this._removeMods.push(key); this._removeMods.push(key);
@ -341,7 +341,7 @@ class Modifier {
return this; return this;
} else { } else {
let modSub = new BorderChain(this); let modSub = new BorderChain(this);
if (modify instanceof Number && modify > 0) { if (Number.isInteger(modify) && modify > 0) {
return modSub.width(modify).ensureModifier(); return modSub.width(modify).ensureModifier();
} }
return modSub; return modSub;
@ -373,7 +373,7 @@ class Modifier {
return this; return this;
} else { } else {
let modSub = new ShapeChain(this); let modSub = new ShapeChain(this);
if (modify instanceof Number && modify > 0) { if (Number.isInteger(modify) && modify > 0) {
return modSub.all(modify).ensureModifier(); return modSub.all(modify).ensureModifier();
} }
return modSub; return modSub;
@ -487,7 +487,7 @@ class ChainableModifier extends Modifier {
* @returns {ChainableModifier | DimensionsChainedModifier} * @returns {ChainableModifier | DimensionsChainedModifier}
*/ */
dimensions(modify = null) { dimensions(modify = null) {
if (modify instanceof Dimensions || modify instanceof Number) { if (modify instanceof Dimensions || Number.isInteger(modify)) {
return super.dimensions(modify); return super.dimensions(modify);
} }
return new DimensionsChainedModifier(this); return new DimensionsChainedModifier(this);
@ -523,12 +523,12 @@ class ChainableModifier extends Modifier {
* @inheritdoc * @inheritdoc
* *
* @override * @override
* @param {Shape | number | undefined} [Shape=null] shape * @param {Shape | number | undefined} [modify=null] modify
* @returns {ChainableModifier | ShapeChainedModifier} * @returns {ChainableModifier | ShapeChainedModifier}
*/ */
clip(shape = null) { clip(modify = null) {
if (shape instanceof Shape || shhaape instanceof Number) { if (modify instanceof Shape || Number.isInteger(modify)) {
return super.clip(shape); return super.clip(modify);
} }
return new ShapeChainedModifier(this); return new ShapeChainedModifier(this);
} }
@ -539,12 +539,12 @@ class ChainableModifier extends Modifier {
* @inheritdoc * @inheritdoc
* *
* @override * @override
* @param {Border | number | undefined} [border=null] border * @param {Border | number | undefined} [modify=null] modify
* @returns {ChainableModifier | BorderChainedModifier} * @returns {ChainableModifier | BorderChainedModifier}
*/ */
border(border = null) { border(modify = null) {
if (border instanceof Border || border instanceof Number) { if (modify instanceof Border || Number.isInteger(modify)) {
return super.border(border); return super.border(modify);
} }
return new BorderChainedModifier(this); return new BorderChainedModifier(this);
} }

14
src/sizeSide/border.js

@ -79,7 +79,7 @@ class Border extends Sides {
* *
* @param {string} key * @param {string} key
* @param {*} value * @param {*} value
* @returns {this} * @returns {typeof Border}
*/ */
setOnDirections(key, value) { setOnDirections(key, value) {
let orderedAttributes = this.getOrderedAttributes() let orderedAttributes = this.getOrderedAttributes()
@ -92,7 +92,7 @@ class Border extends Sides {
/** /**
* *
* @param {number} width * @param {number} width
* @returns {this} * @returns {typeof Border}
*/ */
width(width) { width(width) {
this._fFirst._width = width; this._fFirst._width = width;
@ -105,7 +105,7 @@ class Border extends Sides {
/** /**
* *
* @param {*} color * @param {*} color
* @returns {this} * @returns {typeof Border}
*/ */
color(color) { color(color) {
this._fFirst._color = color; this._fFirst._color = color;
@ -118,7 +118,7 @@ class Border extends Sides {
/** /**
* *
* @param {Shape} shape * @param {Shape} shape
* @returns {this} * @returns {typeof Border}
*/ */
shape(shape) { shape(shape) {
this._shape = shape; this._shape = shape;
@ -128,7 +128,7 @@ class Border extends Sides {
/** /**
* Sets the border-style of all sides to the given. * Sets the border-style of all sides to the given.
* @param {LineStyles} lineStyle style of the border * @param {LineStyles} lineStyle style of the border
* @returns {this} * @returns {typeof Border}
*/ */
setStyleAll(lineStyle) { setStyleAll(lineStyle) {
this._fFirst._style = lineStyle; this._fFirst._style = lineStyle;
@ -142,7 +142,7 @@ class Border extends Sides {
* *
* @param {LineStyles} lineStyle * @param {LineStyles} lineStyle
* @param {*} sidingRefSide * @param {*} sidingRefSide
* @returns {this} * @returns {typeof Border}
*/ */
setLineStyle(lineStyle, sidingRefSide) { setLineStyle(lineStyle, sidingRefSide) {
this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle) this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
@ -152,7 +152,7 @@ class Border extends Sides {
/** /**
* *
* @param {Map<SidingRefSides, LineStyles} refSideStyleMap * @param {Map<SidingRefSides, LineStyles} refSideStyleMap
* @returns {this} * @returns {typeof Border}
*/ */
setLineStyles(refSideStyleMap) { setLineStyles(refSideStyleMap) {
let rkeys = Object.keys(refSideStyleMap); let rkeys = Object.keys(refSideStyleMap);

13
src/sizeSide/dimensions.js

@ -26,7 +26,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
/** /**
* Sets width (x) value of amount * Sets width (x) value of amount
* @param {number} amount * @param {number} amount
* @returns {this} this Dimensions Modifier * @returns {typeof Dimensions} this Dimensions Modifier
*/ */
width(amount) { width(amount) {
this._fFirst = amount; this._fFirst = amount;
@ -36,7 +36,7 @@ class Dimensions extends DirectionUnitDependentAttribute {
/** /**
* Sets height (y) value of amount * Sets height (y) value of amount
* @param {number} amount * @param {number} amount
* @returns {this} this Dimensions Modifier * @returns {typeof Dimensions} this Dimensions Modifier
*/ */
height(amount) { height(amount) {
this._fSecond = amount; this._fSecond = amount;
@ -46,15 +46,18 @@ class Dimensions extends DirectionUnitDependentAttribute {
/** /**
* *
* @param {number} size * @param {number} size
* @returns {this} * @returns {typeof Dimensions}
*/ */
all(size) { all(size) {
return this.width(size).height(size); return this.width(size).height(size);
} }
/**
*
* @returns
*/
getOrderedValues() { getOrderedValues() {
return this.getOrderedValues().slice(2) return super.getOrderedValues().slice(2)
} }
/** /**

20
src/sizeSide/shapes.js

@ -15,7 +15,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* *
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
topLeft(amount) { topLeft(amount) {
this._fFirst = amount; this._fFirst = amount;
@ -24,7 +24,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* *
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
topRight(amount) { topRight(amount) {
this._fSecond = amount; this._fSecond = amount;
@ -33,7 +33,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* *
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
bottomLeft(amount) { bottomLeft(amount) {
this._fForth = amount; this._fForth = amount;
@ -42,7 +42,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* *
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
bottomRight(amount) { bottomRight(amount) {
this._fThird = amount; this._fThird = amount;
@ -51,7 +51,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets the BottomLeft and TopRight corners * Sets the BottomLeft and TopRight corners
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
diagonalPositive(amount) { diagonalPositive(amount) {
return this.bottomLeft(amount).topRight(amount); return this.bottomLeft(amount).topRight(amount);
@ -59,7 +59,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets the TopLeft and BottomRight corners * Sets the TopLeft and BottomRight corners
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
diagonalNegative(amount) { diagonalNegative(amount) {
return this.topLeft(amount).bottomRight(amount); return this.topLeft(amount).bottomRight(amount);
@ -67,7 +67,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets both corners on the left side * Sets both corners on the left side
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
left(amount) { left(amount) {
return this.topLeft(amount).bottomLeft(amount); return this.topLeft(amount).bottomLeft(amount);
@ -75,7 +75,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets both corners on the right side * Sets both corners on the right side
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
right(amount) { right(amount) {
return this.topRight(amount).bottomRight(amount); return this.topRight(amount).bottomRight(amount);
@ -83,7 +83,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets both top corners * Sets both top corners
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
top(amount){ top(amount){
return this.topLeft(amount).topRight(amount); return this.topLeft(amount).topRight(amount);
@ -91,7 +91,7 @@ class Shape extends DirectionUnitDependentAttribute {
/** /**
* Sets both bottom corners * Sets both bottom corners
* @param {number} amount * @param {number} amount
* @returns {this} * @returns {typeof Shape}
*/ */
bottom(amount){ bottom(amount){
return this.bottomLeft(amount).bottomRight(amount); return this.bottomLeft(amount).bottomRight(amount);

18
src/sizeSide/siding.js

@ -43,7 +43,7 @@ class DirectionUnitDependentAttribute {
/** /**
* *
* @param {Units} unit The unit of the amount or style * @param {Units} unit The unit of the amount or style
* @returns {this} this - Object * @returns {typeof Sides} this - Object
*/ */
setUnit(unit) { setUnit(unit) {
this._unit = unit; this._unit = unit;
@ -72,7 +72,7 @@ class DirectionUnitDependentAttribute {
* Mainly used by the setup of directions of subclasses. * Mainly used by the setup of directions of subclasses.
* @param {number} index [1,4] * @param {number} index [1,4]
* @param {number} value * @param {number} value
* @returns {this} this * @returns {typeof Sides} this
*/ */
setByIndex(index, value) { setByIndex(index, value) {
switch (index) { switch (index) {
@ -132,7 +132,7 @@ class DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for all directions. * sets the amount-value for all directions.
* @param {number} amount value to set for all directions * @param {number} amount value to set for all directions
* @returns {this} this * @returns {typeof Sides} this
*/ */
all(amount) { all(amount) {
this._fFirst = amount; this._fFirst = amount;
@ -188,7 +188,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the left side. * sets the amount-value for the left side.
* @param {number} amount Sides for left * @param {number} amount Sides for left
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
left(amount) { left(amount) {
return this.setByIndex(1, amount); return this.setByIndex(1, amount);
@ -197,7 +197,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the right side. * sets the amount-value for the right side.
* @param {number} amount Sides for right * @param {number} amount Sides for right
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
right(amount) { right(amount) {
return this.setByIndex(3, amount); return this.setByIndex(3, amount);
@ -206,7 +206,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the top side. * sets the amount-value for the top side.
* @param {number} amount Sides for top * @param {number} amount Sides for top
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
top(amount) { top(amount) {
return this.setByIndex(2, amount); return this.setByIndex(2, amount);
@ -215,7 +215,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the bottom side. * sets the amount-value for the bottom side.
* @param {number} amount Sides for bottom * @param {number} amount Sides for bottom
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
bottom(amount) { bottom(amount) {
return this.setByIndex(4, amount); return this.setByIndex(4, amount);
@ -225,7 +225,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the horizontal sides (left and right). * sets the amount-value for the horizontal sides (left and right).
* @param {number} amount Sides for left and right. * @param {number} amount Sides for left and right.
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
horizontal(amount) { horizontal(amount) {
return this.left(amount).right(amount); return this.left(amount).right(amount);
@ -234,7 +234,7 @@ class Sides extends DirectionUnitDependentAttribute {
/** /**
* sets the amount-value for the vertical sides (left and right). * sets the amount-value for the vertical sides (left and right).
* @param {number} amount Sides for top and bottom. * @param {number} amount Sides for top and bottom.
* @returns {this} this Sides Object * @returns {typeof Sides} this Sides Object
*/ */
vertical(amount) { vertical(amount) {
return this.top(amount).bottom(amount); return this.top(amount).bottom(amount);

Loading…
Cancel
Save