diff --git a/src/commonEvents.js b/src/commonEvents.js index 8689475..cac4782 100644 --- a/src/commonEvents.js +++ b/src/commonEvents.js @@ -3,5 +3,6 @@ */ const CommonEvents = Object.freeze({ ONCLICK: "onClick", + ONCHANGE: "onChange" }) diff --git a/src/modifier.js b/src/modifier.js index 9410fea..f24f198 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -13,8 +13,8 @@ class Modifier { * @returns {Modifier} this modifier object */ fillMaxSize(widthFraction = 1, heightFraction = 1) { - this.fillMaxWidth(widthFraction); - return this.fillMaxHeight(heightFraction); + return this.fillMaxWidth(widthFraction) + .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() { - return new DimensionsChain(this); + linkDimensions(size = -1) { + 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() { - return new PaddingChain(this); + linkPadding(amount = -1) { + 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() { - return new ShapeChain(this); + linkClip(cornerRadius = -1) { + if (cornerRadius === -1) { + return new ShapeChain(this); + } else { + return new ShapeChain(this).all(cornerRadius); + } + } } /** diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js index fc1890b..8d1e0d1 100644 --- a/src/sizeSide/dimensions.js +++ b/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 } diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js index 8a6cde1..d0a4c68 100644 --- a/src/sizeSide/shapes.js +++ b/src/sizeSide/shapes.js @@ -44,9 +44,7 @@ class Shape extends DirectionUnitDependentAttribute { * @returns {Shape} */ diagonalPositive(amount) { - this._fThird = amount; - this._fSecond = amount; - return this; + return this.bottomLeft(amount).topRight(amount); } /** * @@ -54,25 +52,15 @@ class Shape extends DirectionUnitDependentAttribute { * @returns {Shape} */ diagonalNegative(amount) { - this._fFirst = amount; - this._fForth = amount; - return this; + return this.topLeft(amount).bottomRight(amount); } left(amount) { - this._fFirst = amount; - this._fSecond = 0; - this._fThird = 0; - this._fForth = amount; - return this + return this.topLeft(amount).bottomLeft(amount); } right(amount) { - this._fFirst = 0; - this._fSecond = amount; - this._fThird = amount; - this._fForth = 0; - return this; + return this.topRight(amount).bottomRight(amount); } /** @@ -130,6 +118,7 @@ class ChainableShape extends ShapeChain { } const Shapes = Object.freeze({ + Rectangle: new Shape(), RoundedCorner: new Shape(), Circle: new Shape(49, SizeUnits.PERCENT) }) diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index 8a7dd9f..f2e07c8 100644 --- a/src/sizeSide/siding.js +++ b/src/sizeSide/siding.js @@ -141,8 +141,7 @@ class Sides extends DirectionUnitDependentAttribute { * @returns {Siding} this Siding Object */ left(amount) { - this._fFirst = amount; - return this; + return this.setByIndex(1, amount); } /** @@ -151,8 +150,7 @@ class Sides extends DirectionUnitDependentAttribute { * @returns {Siding} this Siding Object */ right(amount) { - this._fThird = amount; - return this; + return this.setByIndex(3, amount); } /** @@ -161,8 +159,7 @@ class Sides extends DirectionUnitDependentAttribute { * @returns {Siding} this Siding Object */ top(amount) { - this._fSecond = amount; - return this; + return this.setByIndex(2, amount); } /** @@ -171,21 +168,17 @@ class Sides extends DirectionUnitDependentAttribute { * @returns {Siding} this Siding Object */ bottom(amount) { - this._fForth = amount; - return this; + return this.setByIndex(4, amount); } - /** * 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; - this._fThird = amount; - return this; + return this.left(amount).right(amount); } /** @@ -194,9 +187,9 @@ class Sides extends DirectionUnitDependentAttribute { * @returns {Sides} this Siding Object */ vertical(amount) { - this._fSecond = amount; - this._fForth = amount; - return this; + return this.top(amount).bottom(amount); + } + 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() }