From 0a2d16ecea7532c2292f2385e31a91d73dd5f6c2 Mon Sep 17 00:00:00 2001 From: chris Date: Mon, 7 Oct 2024 20:54:15 +0200 Subject: [PATCH] REFA,IMPRO: Introduced funcitons and swapped high level attributes access added toModifications, to update the modifier directy -> moving the logic of the attribute-style-setting to the attribute swapped/renamed methods to access the DirectionUnitDependedAttribute -attributes by index. --- src/modifier.js | 38 +++++++-------- src/sizeSide/dimensions.js | 16 +++++++ src/sizeSide/shapes.js | 7 --- src/sizeSide/siding.js | 96 +++++++++++++++++++++++++++----------- 4 files changed, 102 insertions(+), 55 deletions(-) diff --git a/src/modifier.js b/src/modifier.js index 227bb32..9410fea 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -43,12 +43,10 @@ class Modifier { * @returns {Modifier} this modifier object */ dimensions(dimensions) { - if (dimensions._fFirst > 0) { - this._modifications["width"] = dimensions.getBySidingRef(SidingRefDimensions.WIDTH) + dimensions._unit; - } - if (dimensions._fSecond > 0) { - this._modifications["height"] = dimensions.getBySidingRef(SidingRefDimensions.HEIGHT) + dimensions._unit; - } + dimensions.toModifications() + .forEach(kvpair => { + this._modifications[kvpair.key] = kvpair.value; + }) return this; } @@ -60,10 +58,16 @@ class Modifier { * @returns {Modifier} this modifier object */ padding(siding) { - this._modifications["padding-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; - this._modifications["padding-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; - this._modifications["padding-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; - this._modifications["padding-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; + let keyToAdd = ""; + if (siding instanceof ChainablePadding || siding instanceof PaddingChain) { + + } else if (siding instanceof Sides) { + keyToAdd = "padding-" + } + siding.toModifications() + .forEach(kvpair => { + this._modifications[keyToAdd + kvpair.key] = kvpair.value; + }) return this; } @@ -75,10 +79,7 @@ class Modifier { * @returns {Modifier} this modifier object */ margin(siding) { - this._modifications["margin-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; - this._modifications["margin-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; - this._modifications["margin-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; - this._modifications["margin-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; + this._modifications["margin"] = siding.getOrderedValues(); return this; } @@ -139,12 +140,9 @@ class Modifier { * @returns {Modifier} this modifier object */ border(border) { - console.log(border); - this._modifications["border"] = border._width + border._unit; - this._modifications["border-style"] = border._sidingStyles.getOrderedValues().join(' '); - this._modifications["border-color"] = border._color.cssRGBString(); - this.clip(border) - return this; + border.toModifications() + .forEach(e => this._modifications[e.key] = e.value); + return this.clip(border._shape) } /** diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js index c7a74c8..fc1890b 100644 --- a/src/sizeSide/dimensions.js +++ b/src/sizeSide/dimensions.js @@ -46,6 +46,22 @@ class Dimensions extends DirectionUnitDependentAttribute { [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 } + let is_w = this._fFirst > 0; + let is_h = this._fSecond > 0; + if (is_h && is_w) { + return [w, h] + } else if (is_w) { + return [w] + } else if (is_h) { + return [h] + } else { + return [] + } + } } diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js index a39c253..8a6cde1 100644 --- a/src/sizeSide/shapes.js +++ b/src/sizeSide/shapes.js @@ -1,10 +1,3 @@ -const SidingRefCorners = Object.freeze({ - TOPLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, - TOPRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, - BOTTOMLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, - BOTTOMRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth -}) - class Shape extends DirectionUnitDependentAttribute { constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { super(defaultValue, defaultUnit); diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index 341bc76..8a7dd9f 100644 --- a/src/sizeSide/siding.js +++ b/src/sizeSide/siding.js @@ -29,43 +29,76 @@ class DirectionUnitDependentAttribute { return this; } + /** + * + * @returns {array<*>} list of attributes + */ + getOrderedAttributes(){ + return [this._fFirst, this._fSecond, this._fThird, this._fForth]; + } + /** * @returns {Array} */ getOrderedValues() { - return [this._fFirst + this._unit, this._fSecond + this._unit, this._fThird + this._unit, this._fForth + this._unit] + return this.getOrderedAttributes().map(a=>a+this._unit); } /** + * Since the basic values are from "first" to "fourth", + * they can be also accessed in the ordered way. * - * @param {SidingRef} sidingRef - * @param {*} value + * Mainly used by the setup of directions of subclasses. + * @param {number} index [1,4] + * @param {number} value * @returns {DirectionUnitDependentAttribute} this */ - setBySidingRef(sidingRef, value) { - sidingRef(this) = value; + setByIndex(index, value) { + switch (index) { + case 1: + this._fFirst = value; + break; + case 2: + this._fSecond = value; + break; + case 3: + this._fThird = value; + break; + case 4: + this._fForth = value; + break; + + default: + this._fFirst = value; + break; + } return this; } /** + * Since the basic values are from "first" to "fourth", + * they can be also accessed in the ordered way. * - * @param {SidingRef} sidingRef the reference enum for this SideUnitDependenAttribute (child) - * @returns the value of the referenced SidingRef. + * Mainly used by the setup of directions of subclasses. + * @param {number} index [1,4] + * @returns {*} this value of index */ - getBySidingRef(sidingRef) { - return sidingRef(this) + getByIndex(index) { + switch (index) { + case 1: + return this._fFirst; + case 2: + return this._fSecond; + case 3: + return this._fThird; + case 4: + return this._fForth; + + default: + return this._fFirst; + } } -} - -const SidingRefSides = Object.freeze({ - LEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, - TOP: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, - RIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, - BOTTOM: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth -}) - - /** * Placeholder for overrides * @returns {Object} @@ -142,15 +175,6 @@ class Sides extends DirectionUnitDependentAttribute { return this; } - getSidingRefValueMap() { - return { - [SidingRefSides.LEFT]: this.getBySidingRef(SidingRefSides.LEFT), - [SidingRefSides.TOP]: this.getBySidingRef(SidingRefSides.TOP), - [SidingRefSides.RIGHT]: this.getBySidingRef(SidingRefSides.RIGHT), - [SidingRefSides.BOTTOM]: this.getBySidingRef(SidingRefSides.BOTTOM) - } - } -} /** @@ -173,6 +197,13 @@ class Sides extends DirectionUnitDependentAttribute { this._fSecond = amount; this._fForth = amount; return this; + toModifications() { + return [ + { key: "left", value: this._fFirst + this._unit }, + { key: "top", value: this._fSecond + this._unit }, + { key: "right", value: this._fThird + this._unit }, + { key: "bottom", value: this._fForth + this._unit } + ] } } @@ -192,6 +223,15 @@ class PaddingChain extends Sides { ensureModifier(){ return this.toModifier() } + + toModifications() { + return [ + { key: "padding-left", value: this._fFirst + this._unit }, + { key: "padding-top", value: this._fSecond + this._unit }, + { key: "padding-right", value: this._fThird + this._unit }, + { key: "padding-bottom", value: this._fForth + this._unit } + ] + } }