From aada47b8e0fc0e05b4fe05fbfc3009648bc6a21c Mon Sep 17 00:00:00 2001 From: chris Date: Mon, 21 Apr 2025 15:50:21 +0200 Subject: [PATCH] FEAT,MAJOR,REFA,FIX: unified logic of DirectionUnitDependentAttributes More specific the logic of DirectionUnitDependetAttributes (DUDA) extending classes and corresponding Modifier-call methods. Set the old link methods @deprecated. Now you can call an DUDA-CallMethod with either: - default value (usually number): returns modifier - nothing: returns DUDA-Ext-Chain - DUDA-Ext: returns modifier Introduced mixins to extend DUDA-Extensions with (unified) returns to modifier or component methods. Rearanged, added and updated some doc Moved some of the DUDA-Ext into their own files under src/modifier/. --- fileOrder.json | 19 ++ src/component.js | 2 +- src/modifier.js | 268 +++++++++++++++----- src/modifiers/margin.js | 53 ++++ src/modifiers/modificationSubChainMixins.js | 163 ++++++++++++ src/modifiers/padding.js | 44 ++++ src/sizeSide/border.js | 70 ++--- src/sizeSide/dimensions.js | 68 ++--- src/sizeSide/shapes.js | 74 ++---- src/sizeSide/siding.js | 146 ++--------- 10 files changed, 589 insertions(+), 318 deletions(-) create mode 100644 src/modifiers/margin.js create mode 100644 src/modifiers/modificationSubChainMixins.js create mode 100644 src/modifiers/padding.js diff --git a/fileOrder.json b/fileOrder.json index 0cf3ea9..92f7963 100644 --- a/fileOrder.json +++ b/fileOrder.json @@ -6,7 +6,10 @@ "arrangement.js" ], "size_sidings": [ + "modificationSubChainMixins.js", "siding.js", + "padding.js", + "margin.js", "shapes.js", "border.js", "twoDimPoint.js", @@ -69,6 +72,9 @@ "scriptAndStyleContext.js", "framework-controls.js", "context.js", + "modificationSubChainMixins.js", + "padding.js", + "margin.js", "twoDimPoint.js" ], "objects": { @@ -167,6 +173,19 @@ "context.js": { "name": "context.js", "folder": "src" + }, + "modificationSubChainMixins.js":{ + "name": "modificationSubChainMixins.js", + "folder": "src/modifiers" + }, + "padding.js":{ + "name": "padding.js", + "folder": "src/modifiers" + }, + "margin.js":{ + "name": "margin.js", + "folder": "src/modifiers" + }, "twoDimPoint.js":{ "name": "twoDimPoint.js", "folder": "src/modifiers" diff --git a/src/component.js b/src/component.js index d79ecec..29cfecc 100644 --- a/src/component.js +++ b/src/component.js @@ -44,7 +44,7 @@ class Component extends StyleAndScriptStoringComponent { this._isContextMenu = false; this._modifier = new Modifier() - .margin(new Sides().all(0)); + .margin(0); this._modifier._modifications['display'] = "flex"; this._modifier._modifications["box-sizing"] = "border-box"; diff --git a/src/modifier.js b/src/modifier.js index 2d38fef..38cdf47 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -109,37 +109,63 @@ class Modifier { } /** - * Sets modifications according to the dimensions object. - * @param {Dimensions} dimensions - * @returns {Modifier} this modifier object + * Takes dimensions as param which can be either of three: + * + * param == null (not given): + * Returns new DimensionsChain (to chain Dimensions-Modifications) + * + * param == number (>0): + * Applies Dimensions.all(dimension); + * Returns this modifier + * + * param == Dimensions: + * Sets modifications according to the dimensions object; + * Returns this modifier + * @param {Dimensions | number | undefined} [modify=null] modify as in modifiers + * @returns { Modifier | DimensionsChain } this modifier object or a DimensionsChain */ - dimensions(dimensions) { - dimensions.toModifications() - .forEach(kvpair => { - this._modifications[kvpair.key] = kvpair.value; - }) - return this; + dimensions(modify = null) { + if (modify instanceof Dimensions) { + modify.toModifications() + .forEach(kvpair => { + this._modifications[kvpair.key] = kvpair.value; + }); + return this; + } else { + let modSub = new DimensionsChain(this); + if (modify instanceof Number && modify > 0) { + return modSub.all(modify).ensureModifier(); + } + // case dimension is number but < 0 or dimensions == null or anything else + return modSub; + } } /** * Sets the padding on all sides according to the given padding object. * Currently the padding will always be set * to the most recent padding/padding. - * @param {Sides} siding + * @param {Padding | number | undefined} modify as in modifiers * @returns {Modifier} this modifier object */ - padding(siding) { - this._paddingValues = siding; - let keyToAdd = ""; - if (siding instanceof PaddingChain) { - /* TODO what is this supposed to do */ - } else if (siding instanceof Sides) { - keyToAdd = "padding-" + padding(modify = null) { + if (modify instanceof Sides && !(modify instanceof Padding)) { + modify._modMethod = "padding"; + modify = Object.assign(new Padding(), modify); + } + + if (modify instanceof Padding) { + modify.toModifications() + .forEach(kvpair => { + this._modifications[kvpair.key] = kvpair.value; + }); + } else { + let modSub = new PaddingChain(this); + if (Number.isInteger(modify) && modify > -1) { + return modSub.all(modify).ensureModifier(); + } + return modSub } - siding.toModifications() - .forEach(kvpair => { - this._modifications[keyToAdd + kvpair.key] = kvpair.value; - }) return this; } @@ -150,19 +176,27 @@ class Modifier { * @ATTENTION since it just increases complexity to constantly use padding and margin * it is recommended to use padding and to stick to that as often as possible. * Padding values take affect inside/within the element. - * @param {Sides} siding + * @param {Margin | number | undefined} modify * @returns {Modifier} this modifier object */ - margin(siding) { - let keyToAdd = ""; - if (siding instanceof Sides) { - keyToAdd = "margin-" + margin(modify = null) { + if (modify instanceof Sides && !(modify instanceof Margin)) { + modify._modMethod = "margin"; + modify = Object.assign(new Margin(), modify); } - siding.toModifications() - .forEach(kvpair => { - this._modifications[keyToAdd + kvpair.key] = kvpair.value; - }); + if (modify instanceof Margin) { + modify.toModifications() + .forEach(kvpair => { + this._modifications[kvpair.key] = kvpair.value; + }); + } else { + let modSub = new MarginChain(this); + if (Number.isInteger(modify) && modify > -1) { + return modSub.all(modify).ensureModifier(); + } + return modSub + } return this; } @@ -270,65 +304,110 @@ class Modifier { } /** + * Takes border as param which can be either of three: + * + * param == null (not given): + * Returns new BorderChain (to chain Border-Modifications) + * + * param == number (>0): + * Applies Border.width(border); + * Rerturns this modifier + * + * param == Border: + * * Sets a border line (with given linestyle) to all sides. * If lineStyle is an array, the containing LineStyles, * are applied in the order: [top, right, bottom, left]. * If the border has a shape defined, * this shape will override earlier shape definitions. - * Otherwise existing shape definitions will be applied. - * @param {Border} border the style of the border line - * @returns {Modifier} this modifier object + * Otherwise existing shape definitions will be applied; + * + * Rerturns this modifier + * + * @param {Border | number | undefined} [modify=null] modify as in modifiers + * @returns {Modifier | BorderChain} this modifier or BorderChain */ - border(border) { - if (border._shape) { - this.clip(border._shape); - } else if (this._shape) { - border._shape = this._shape; + border(modify = null) { + if (modify instanceof Border) { + if (modify._shape) { + this.clip(modify._shape); + } else if (this._shape) { + modify._shape = this._shape; + } + + modify.toModifications() + .forEach(e => this._modifications[e.key] = e.value); + + return this; + } else { + let modSub = new BorderChain(this); + if (modify instanceof Number && modify > 0) { + return modSub.width(modify).ensureModifier(); + } + return modSub; } - border.toModifications() - .forEach(e => this._modifications[e.key] = e.value); - return this; } /** + * Takes shape as param which can be either of three: * - * @param {Shape} shape - * @returns {Modifier} + * param == null (not given): + * Returns new ShapeChain (to chain Shape-Modifications) + * + * param == number (>0): + * Applies Shape.all(dimension); + * Returns this modifier + * + * param == Shape: + * Sets modifications according to the shape object; + * Returns this modifier + * + * + * @param {Shape | number | undefined} [modify=null] modify as in modifiers + * @returns { Modifier | ShapeChain } */ - clip(shape) { - this._shape = shape; - this._modifications["border-radius"] = shape.getOrderedValues().join(' '); - return this; + clip(modify = null) { + if (modify instanceof Shape) { + this._shape = modify; + this._modifications["border-radius"] = modify.getOrderedValues().join(' '); + return this; + } else { + let modSub = new ShapeChain(this); + if (modify instanceof Number && modify > 0) { + return modSub.all(modify).ensureModifier(); + } + return modSub; + } } /** - * + * @deprecated use Modifier.dimensions() instead * @param {number} size of width and height in pixels * @returns {DimensionsChain} */ linkDimensions(size = -1) { if (size === -1) { - return new DimensionsChain(this); + return new DimensionsChainedModifier(this); } else { return new DimensionsChain(this).all(size).ensureModifier() } } /** - * + * @deprecated use Modifier.padding() instead * @param {number} amount the padding for all four sides - * @returns {PaddingChain} + * @returns {PaddingChain} */ linkPadding(amount = -1) { if (amount === -1) { - return new PaddingChain(this); + return new PaddingChainedModifier(this); } else { return new PaddingChain(this).all(amount); } } /** - * + * @deprecated use Modifier.margin() instead * @ATTENTION since it just increases complexity to constantly use padding and margin * it is recommended to use padding and to stick to that as often as possible. * Padding values take affect inside/within the element. @@ -337,33 +416,33 @@ class Modifier { */ linkMargin(amount = -1) { if (amount === -1) { - return new MarginChain(this); + return new MarginChainedModifier(this); } else { return new MarginChain(this).all(amount); } } /** - * + * @deprecated use Modifier.clip() instead * @param {number} cornerRadius will create a rounded rectangle with the given cornerRadius * @returns {ShapeChain} */ linkClip(cornerRadius = -1) { if (cornerRadius === -1) { - return new ShapeChain(this); + return new ShapeChainedModifier(this); } else { return new ShapeChain(this).all(cornerRadius); } } /** - * + * @deprecated use Modifier.border() instead * @param {number} borderWidth sets the width of all four border sides * @returns {BorderChain} */ linkBorder(borderWidth = -1) { if (borderWidth === -1) { - return new BorderChain(this); + return new BorderChainedModifier(this); } else { return new BorderChain(this).width(borderWidth); } @@ -398,6 +477,79 @@ class ChainableModifier extends Modifier { this._component = component; } + /** + * @inheritdoc + * + * In Case it is called from a ChainableModifier chain, + * the Return type would be DimensionsChainedModifier instead of DimensionsChain. + * @override + * @param {Dimensions | number | undefined} [modify=null] dimensions + * @returns {ChainableModifier | DimensionsChainedModifier} + */ + dimensions(modify = null) { + if (modify instanceof Dimensions || modify instanceof Number) { + return super.dimensions(modify); + } + return new DimensionsChainedModifier(this); + } + + /** + * @inheritdoc + * @override + * @param {Padding | number | undefined} [modify=null] modify as in modifiers + * @returns {ChainableModifier | PaddingChainedModifier} + */ + padding(modify = null) { + if (modify instanceof Padding || Number.isInteger(modify)) { + return super.padding(modify); + } + return new PaddingChainedModifier(this); + } + + /** + * @inheritdoc + * @override + * @param {Margin | number | undefined} [modify=null] modify as in modifiers + * @returns {ChainableModifier | MarginChainedModifier} + */ + margin(modify = null) { + if (modify instanceof Margin || Number.isInteger(modify)) { + return super.margin(modify); + } + return new MarginChainedModifier(this); + } + + /** + * @inheritdoc + * + * @override + * @param {Shape | number | undefined} [Shape=null] shape + * @returns {ChainableModifier | ShapeChainedModifier} + */ + clip(shape = null) { + if (shape instanceof Shape || shhaape instanceof Number) { + return super.clip(shape); + } + return new ShapeChainedModifier(this); + } + + + /** + * + * @inheritdoc + * + * @override + * @param {Border | number | undefined} [border=null] border + * @returns {ChainableModifier | BorderChainedModifier} + */ + border(border = null) { + if (border instanceof Border || border instanceof Number) { + return super.border(border); + } + return new BorderChainedModifier(this); + } + + /** * * @returns {Component} diff --git a/src/modifiers/margin.js b/src/modifiers/margin.js new file mode 100644 index 0000000..19cbbab --- /dev/null +++ b/src/modifiers/margin.js @@ -0,0 +1,53 @@ +/** + * @inheritdoc + * @extends Sides + */ +class Margin extends Sides { + /** + * + * @param {number|string} defaultValue + * @param {SizeUnits} defaultUnit + */ + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super("margin",defaultValue, defaultUnit); + } +} + + +/** + * @ATTENTION since it just increases complexity to constantly use padding and margin + * it is recommended to use padding and to stick to that as often as possible. + * Padding values take affect inside/within the element. + * @inheritdoc + * @extends Margin + * @mixes + */ +class MarginChain extends mixinModSubChainEndings(Margin) { + /** + * + * @param {Modifier} modifier + */ + constructor(modifier) { + super(modifier); + } +} + + +/** + * + * @ATTENTION since it just increases complexity to constantly use padding and margin + * it is recommended to use padding and to stick to that as often as possible. + * Padding values take affect inside/within the element. + * @inheritdoc + * @extends MarginChain + * @mixin ModificationDefinition + */ +class MarginChainedModifier extends mixinModSubChainComponentMethods(Margin) { + /** + * + * @param {ChainableModifier} modifier + */ + constructor(modifier) { + super(modifier); + } +} diff --git a/src/modifiers/modificationSubChainMixins.js b/src/modifiers/modificationSubChainMixins.js new file mode 100644 index 0000000..581ab0e --- /dev/null +++ b/src/modifiers/modificationSubChainMixins.js @@ -0,0 +1,163 @@ +class ModificationSubChain { + + _modifier; + _modMethod; + + /** + * + * @param {Modifier} modifier + * @param {string} modMethod + */ + constructor(modifier, modMethod) { + this._modifier = modifier; + this._modMethod = modMethod; + } + + /** + * Returns the Modifier SubChain to the Modifier + * @returns {Modifier|ChainableModifier} + */ + toModifier() { + return this._modifier[this._modMethod](this); + } + + /** + * Returns chain to the Modifier + * @returns {Modifier|ChainableModifier} + */ + ensureModifier() { + return this.toModifier() + } +} + + +class ModificationSubChainReComp extends ModificationSubChain { + /** + * + * @param {ChainableModifier} modifier + * @param {string} modMethod + */ + constructor(modifier) { + super(); + this._modifier = modifier; + } + + /** + * Returns chain to the component that is under modification + * @returns {Component} the Component that was (supposed to be) modified by this obj. + */ + toComponent() { + return this._modifier[this._modMethod](this) + .toComponent(); + } + + /** + * Returns chain to the component that is under modification + * and adds the given innerComponent as children to the component. + * @param {Component|Array} innerComponent + * @returns {Component} + */ + childContext(innerComponent) { + return this._modifier[this._modMethod](this) + .toComponent() + .childContext(innerComponent); + } + + /** + * Closes modifier chain and returns builder to define the next child of the component + * @returns {Component} + */ + chainChild() { + return this._modifier[this._modMethod](this) + .toComponent() + .chainChild(); + } +} + + + +/** + * Function is a mixin to add endings to a Modifier SubChain. + * Explicitly used for "link..." methods called from a Modifier, + * that is unaware of its component. + * + * @param {typeof DirectionUnitDependentAttribute} classToExtend + * @returns {typeof ModificationSubChain} + */ +function mixinModSubChainEndings(classToExtend) { + return class extends classToExtend { + + _modifier; + + /** + * + * @param {Modifier} modifier + * @param {string} modMethod + */ + constructor(modifier) { + super(); + this._modifier = modifier; + } + + /** + * Returns the Modifier SubChain to the Modifier + * @returns {Modifier|ChainableModifier} + */ + toModifier() { + let tmp = this._modifier[this._modMethod]; + return this._modifier[this._modMethod](this); + } + + /** + * Returns chain to the Modifier + * @returns {Modifier|ChainableModifier} + */ + ensureModifier() { + return this.toModifier() + } + } +} + + +/** + * + * Function is a mixin to add "return" methods to a Modifier SubChain. + * Explicitly used for "link..." methods called from a ChainableModifier. + * + * @param {typeof DirectionUnitDependentAttribute} classToExtend + * @returns {typeof ModificationSubChainReComp} + */ +function mixinModSubChainComponentMethods(classToExtend) { + return class extends mixinModSubChainEndings(classToExtend) { + /** + * Returns chain to the component that is under modification + * @returns {Component} the Component that was (supposed to be) modified by this obj. + */ + toComponent() { + return this._modifier[this._modMethod](this) + .toComponent(); + } + + /** + * Returns chain to the component that is under modification + * and adds the given innerComponent as children to the component. + * @param {Component|Array} innerComponent + * @returns {Component} + */ + childContext(innerComponent) { + return this._modifier[this._modMethod](this) + .toComponent() + .childContext(innerComponent); + } + + /** + * Closes modifier chain and returns builder to define the next child of the component + * @returns {Component} + */ + chainChild() { + return this._modifier[this._modMethod](this) + .toComponent() + .chainChild(); + } + } +} diff --git a/src/modifiers/padding.js b/src/modifiers/padding.js new file mode 100644 index 0000000..cb52670 --- /dev/null +++ b/src/modifiers/padding.js @@ -0,0 +1,44 @@ +/** + * @inheritdoc + * @extends Sides + */ +class Padding extends Sides { + /** + * + * @param {number|string} defaultValue + * @param {SizeUnits} defaultUnit + */ + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super("padding", defaultValue, defaultUnit); + } +} + + +/** + * @inheritdoc + * @extends Padding +*/ +class PaddingChain extends mixinModSubChainEndings(Padding){ + /** + * + * @param {Modifier} modifier + */ + constructor(modifier) { + super(modifier); + } +} + + +/** + * @inheritdoc + * @extends PaddingChain + */ +class PaddingChainedModifier extends mixinModSubChainComponentMethods(Padding){ + /** + * + * @param {Modifier} modifier + */ + constructor(modifier) { + super(modifier); + } +} diff --git a/src/sizeSide/border.js b/src/sizeSide/border.js index 19f093f..195bc19 100644 --- a/src/sizeSide/border.js +++ b/src/sizeSide/border.js @@ -58,7 +58,7 @@ const Define = Object.freeze({ */ class Border extends Sides { constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) { - super(0, defaultUnit); + super('border', 0, defaultUnit); this._fFirst = new BorderDefinition(width, color, style); this._fSecond = new BorderDefinition(width, color, style); this._fThird = new BorderDefinition(width, color, style); @@ -79,7 +79,7 @@ class Border extends Sides { * * @param {string} key * @param {*} value - * @returns {Border} + * @returns {this} */ setOnDirections(key, value) { let orderedAttributes = this.getOrderedAttributes() @@ -92,7 +92,7 @@ class Border extends Sides { /** * * @param {number} width - * @returns {Border} + * @returns {this} */ width(width) { this._fFirst._width = width; @@ -105,7 +105,7 @@ class Border extends Sides { /** * * @param {*} color - * @returns {Border} + * @returns {this} */ color(color) { this._fFirst._color = color; @@ -118,7 +118,7 @@ class Border extends Sides { /** * * @param {Shape} shape - * @returns {Border} + * @returns {this} */ shape(shape) { this._shape = shape; @@ -128,7 +128,7 @@ class Border extends Sides { /** * Sets the border-style of all sides to the given. * @param {LineStyles} lineStyle style of the border - * @returns {Border} + * @returns {this} */ setStyleAll(lineStyle) { this._fFirst._style = lineStyle; @@ -142,7 +142,7 @@ class Border extends Sides { * * @param {LineStyles} lineStyle * @param {*} sidingRefSide - * @returns {Border} + * @returns {this} */ setLineStyle(lineStyle, sidingRefSide) { this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle) @@ -152,7 +152,7 @@ class Border extends Sides { /** * * @param {Map} + */ toModifications() { let names = ["left", "top", "right", "bottom"]; return this.getOrderedAttributes() @@ -175,7 +179,7 @@ class Border extends Sides { { key: `border-${names[i]}-color`, value: bdef._color.cssRGBString() }, { key: `border-${names[i]}-style`, value: bdef._style } ] - }) + }); } } @@ -183,49 +187,27 @@ class Border extends Sides { * @inheritdoc * @extends Border */ -class BorderChain extends Border { - constructor(modifier){ - super(); - this._modifier = modifier; - } - +class BorderChain extends mixinModSubChainEndings(Border) { /** * - * @returns {Modifier|ChainableModifier} + * @param {Modifier} modifier */ - toModifier() { - return this._modifier - .border(this); - } - - /** - * - * @returns {Modifier|ChainableModifier} - */ - ensureModifier() { - return this.toModifier() + constructor(modifier) { + super(modifier); } +} - /** - * Applies the border modification on the modifier - * and returns (through the modifier) to the corresponding component. - * @returns {Component} - */ - toComponent() { - return this._modifier - .border(this) - .toComponent(); - } +/** + * @inheritdoc + * @extends BorderChain + */ +class BorderChainedModifier extends mixinModSubChainComponentMethods(Border) { /** * - * @param {Component} innerComponent will be set to the corresponding component - * @returns {Component} the corr. Component after the childContext was applied. + * @param {ChainableModifier} modifier */ - childContext(innerComponent) { - return this._modifier - .border(this) - .toComponent() - .childContext(innerComponent); + constructor(modifier) { + super(modifier); } } diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js index c32ce80..be2ab8a 100644 --- a/src/sizeSide/dimensions.js +++ b/src/sizeSide/dimensions.js @@ -17,7 +17,7 @@ class Dimensions extends DirectionUnitDependentAttribute { * @param {SizeUnits} defaultUnit */ constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { - super(); + super("dimensions", defaultValue, defaultUnit); this._unit = defaultUnit; this._fFirst = defaultValue; this._fSecond = defaultValue; @@ -26,7 +26,7 @@ class Dimensions extends DirectionUnitDependentAttribute { /** * Sets width (x) value of amount * @param {number} amount - * @returns {Dimensions} this Dimensions Modifier + * @returns {this} this Dimensions Modifier */ width(amount) { this._fFirst = amount; @@ -36,7 +36,7 @@ class Dimensions extends DirectionUnitDependentAttribute { /** * Sets height (y) value of amount * @param {number} amount - * @returns {Dimensions} this Dimensions Modifier + * @returns {this} this Dimensions Modifier */ height(amount) { this._fSecond = amount; @@ -46,7 +46,7 @@ class Dimensions extends DirectionUnitDependentAttribute { /** * * @param {number} size - * @returns {Dimensions} + * @returns {this} */ all(size) { return this.width(size).height(size); @@ -59,7 +59,7 @@ class Dimensions extends DirectionUnitDependentAttribute { /** * - * @returns {Object} + * @returns */ toModifications() { let w = { key: "width", value: this._fFirst + this._unit } @@ -89,62 +89,32 @@ class Dimensions extends DirectionUnitDependentAttribute { } } + /** * @inheritdoc * @extends Dimensions - */ -class DimensionsChain extends Dimensions { - /** - * @type {Modifier|ChainableModifier} - */ - _modifier; - +*/ +class DimensionsChain extends mixinModSubChainEndings(Dimensions) { /** * - * @param {Modifier|ChainableModifier} modifier + * @param {Modifier} modifier */ constructor(modifier) { - super(); - this._modifier = modifier; - } - - /** - * - * @returns {Modifier|ChainableModifier} - */ - toModifier() { - return this._modifier - .dimensions(this); - } - - /** - * - * @returns {Modifier|ChainableModifier} - */ - ensureModifier() { - return this.toModifier() + super(modifier); } +} - /** - * - * @returns {Component} the Component that was (supposed to be) modified by this obj. - */ - toComponent() { - return this._modifier - .dimensions(this) - .toComponent(); - } +/** + * @inheritdoc + * @extends DimensionsChain + */ +class DimensionsChainedModifier extends mixinModSubChainComponentMethods(Dimensions) { /** * - * @param {Component|Array} innerComponent children of the Component under modification. - * @returns {Component} + * @param {ChainableModifier} modifier */ - childContext(innerComponent) { - return this._modifier - .dimensions(this) - .toComponent() - .childContext(innerComponent); + constructor(modifier) { + super(modifier); } } - diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js index 3f6728d..99a8e45 100644 --- a/src/sizeSide/shapes.js +++ b/src/sizeSide/shapes.js @@ -10,12 +10,12 @@ */ class Shape extends DirectionUnitDependentAttribute { constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { - super(defaultValue, defaultUnit); + super('clip',defaultValue, defaultUnit); } /** * * @param {number} amount - * @returns {Shape} + * @returns {this} */ topLeft(amount) { this._fFirst = amount; @@ -24,7 +24,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * * @param {number} amount - * @returns {Shape} + * @returns {this} */ topRight(amount) { this._fSecond = amount; @@ -33,7 +33,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * * @param {number} amount - * @returns {Shape} + * @returns {this} */ bottomLeft(amount) { this._fForth = amount; @@ -42,7 +42,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * * @param {number} amount - * @returns {Shape} + * @returns {this} */ bottomRight(amount) { this._fThird = amount; @@ -51,7 +51,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets the BottomLeft and TopRight corners * @param {number} amount - * @returns {Shape} + * @returns {this} */ diagonalPositive(amount) { return this.bottomLeft(amount).topRight(amount); @@ -59,7 +59,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets the TopLeft and BottomRight corners * @param {number} amount - * @returns {Shape} + * @returns {this} */ diagonalNegative(amount) { return this.topLeft(amount).bottomRight(amount); @@ -67,7 +67,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets both corners on the left side * @param {number} amount - * @returns {Shape} + * @returns {this} */ left(amount) { return this.topLeft(amount).bottomLeft(amount); @@ -75,7 +75,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets both corners on the right side * @param {number} amount - * @returns {Shape} + * @returns {this} */ right(amount) { return this.topRight(amount).bottomRight(amount); @@ -83,7 +83,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets both top corners * @param {number} amount - * @returns {Shape} + * @returns {this} */ top(amount){ return this.topLeft(amount).topRight(amount); @@ -91,7 +91,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * Sets both bottom corners * @param {number} amount - * @returns {Shape} + * @returns {this} */ bottom(amount){ return this.bottomLeft(amount).bottomRight(amount); @@ -100,7 +100,7 @@ class Shape extends DirectionUnitDependentAttribute { /** * - * @param {*} amount + * @returns */ getSidingRefValueMap() { return { @@ -115,51 +115,29 @@ class Shape extends DirectionUnitDependentAttribute { /** * @inheritdoc * @extends Shape - */ -class ShapeChain extends Shape { - _modifier; - constructor(modifier) { - super(); - this._modifier = modifier; - } - - /** - * - * @returns {Modifier|ChainableModifier} - */ - toModifier() { - return this._modifier - .clip(this); - } +*/ +class ShapeChain extends mixinModSubChainEndings(Shape) { /** * - * @returns {Modifier|ChainableModifier} + * @param {Modifier} modifier */ - ensureModifier() { - return this.toModifier() + constructor(modifier) { + super(modifier); } +} +/** + * @inheritdoc + * @extends ShapeChain + */ +class ShapeChainedModifier extends mixinModSubChainComponentMethods(Shape) { /** * - * @returns {Component} the Component that was (supposed to be) modified by this obj. - */ - toComponent() { - return this._modifier - .clip(this) - .toComponent(); - } - - /** - * - * @param {Component|Array} innerComponent children of the Component under modification. - * @returns {Component} + * @param {ChainableModifier} modifier */ - childContext(innerComponent) { - return this._modifier - .clip(this) - .toComponent() - .childContext(innerComponent); + constructor(modifier) { + super(modifier); } } diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index 3bd5700..09efb7b 100644 --- a/src/sizeSide/siding.js +++ b/src/sizeSide/siding.js @@ -16,13 +16,23 @@ const SizeUnits = Object.freeze({ * @abstract */ class DirectionUnitDependentAttribute { + /** + * @type {string} the name of the modifier-method that uses this class. + */ + _modMethod; + _unit; _fFirst; _fSecond; _fThird; _fForth; - constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + /** + * @param {number|string} defaultValue + * @param {SizeUnits} defaultUnit + */ + constructor(modMethod, defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + this._modMethod=modMethod; this._unit = defaultUnit; this._fFirst = defaultValue; this._fSecond = defaultValue; @@ -33,7 +43,7 @@ class DirectionUnitDependentAttribute { /** * * @param {Units} unit The unit of the amount or style - * @returns {DirectionUnitDependentAttribute} this - Object + * @returns {this} this - Object */ setUnit(unit) { this._unit = unit; @@ -42,7 +52,7 @@ class DirectionUnitDependentAttribute { /** * - * @returns {array<*>} list of attributes + * @returns */ getOrderedAttributes() { return [this._fFirst, this._fSecond, this._fThird, this._fForth]; @@ -62,7 +72,7 @@ class DirectionUnitDependentAttribute { * Mainly used by the setup of directions of subclasses. * @param {number} index [1,4] * @param {number} value - * @returns {DirectionUnitDependentAttribute} this + * @returns {this} this */ setByIndex(index, value) { switch (index) { @@ -122,7 +132,7 @@ class DirectionUnitDependentAttribute { /** * sets the amount-value for all directions. * @param {number} amount value to set for all directions - * @returns {DirectionUnitDependentAttribute} this + * @returns {this} this */ all(amount) { this._fFirst = amount; @@ -161,24 +171,24 @@ const CornerTransitionDirection = Object.freeze({ /** * @inheritdoc * @extends DirectionUnitDependentAttribute - * + * @abstract */ class Sides extends DirectionUnitDependentAttribute { /** * + * @deprecated class is abstract now, + * direct usage is deprecated use extending classes (Padding, Margin) * @param {number|string} defaultValue * @param {SizeUnits} defaultUnit */ - constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { - super(defaultValue, defaultUnit); - this._stylesKey = ""; + constructor(modMethod, defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super(modMethod, defaultValue, defaultUnit); } - /** * sets the amount-value for the left side. * @param {number} amount Sides for left - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ left(amount) { return this.setByIndex(1, amount); @@ -187,7 +197,7 @@ class Sides extends DirectionUnitDependentAttribute { /** * sets the amount-value for the right side. * @param {number} amount Sides for right - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ right(amount) { return this.setByIndex(3, amount); @@ -196,7 +206,7 @@ class Sides extends DirectionUnitDependentAttribute { /** * sets the amount-value for the top side. * @param {number} amount Sides for top - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ top(amount) { return this.setByIndex(2, amount); @@ -205,7 +215,7 @@ class Sides extends DirectionUnitDependentAttribute { /** * sets the amount-value for the bottom side. * @param {number} amount Sides for bottom - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ bottom(amount) { return this.setByIndex(4, amount); @@ -215,7 +225,7 @@ class Sides extends DirectionUnitDependentAttribute { /** * sets the amount-value for the horizontal sides (left and right). * @param {number} amount Sides for left and right. - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ horizontal(amount) { return this.left(amount).right(amount); @@ -224,7 +234,7 @@ class Sides extends DirectionUnitDependentAttribute { /** * sets the amount-value for the vertical sides (left and right). * @param {number} amount Sides for top and bottom. - * @returns {Sides} this Sides Object + * @returns {this} this Sides Object */ vertical(amount) { return this.top(amount).bottom(amount); @@ -249,10 +259,10 @@ class Sides extends DirectionUnitDependentAttribute { * Returns the style-modifications of the class. * The style-modification is set as <_stylesKey>-. * - * @returns {Map} + * @returns */ toModifications() { - let preKey = this._stylesKey + (this._stylesKey !== '' ? '-' : ''); + let preKey = this._modMethod + (this._modMethod !== '' ? '-' : ''); return [ { key: preKey + "left", value: this._fFirst + this._unit }, { key: preKey + "top", value: this._fSecond + this._unit }, @@ -261,103 +271,3 @@ class Sides extends DirectionUnitDependentAttribute { ] } } - -/** - * @inheritdoc - * @extends Sides - */ -class PaddingChain extends Sides { - /** - * @type {Modifier} - */ - _modifier; - /** - * - * @param {Modifier} modifier - */ - constructor(modifier) { - super(); - this._modifier = modifier; - this._stylesKey = "padding"; - } - - /** - * - * @returns {Modifier} - */ - toModifier() { - return this._modifier - .padding(this); - } - - /** - * Returns the corresponding Modifier. - * Basically climbs up the chain level. - * @returns {Modifier} - */ - ensureModifier() { - return this.toModifier() - } - - /** - * - * @returns {Component} the Component that was (supposed to be) modified by this obj. - */ - toComponent() { - return this._modifier - .padding(this) - .toComponent(); - } - - /** - * - * @param {Component|Array} innerComponent children of the Component under modification. - * @returns {Component} - */ - childContext(innerComponent) { - return this._modifier - .padding(this) - .toComponent() - .childContext(innerComponent); - } -} - -/** - * @ATTENTION since it just increases complexity to constantly use padding and margin - * it is recommended to use padding and to stick to that as often as possible. - * Padding values take affect inside/within the element. - * @inheritdoc - * @extends PaddingChain - */ -class MarginChain extends PaddingChain { - /** - * @inheritdoc - * @param {Modifier} modifier - */ - constructor(modifier) { - super(modifier); - this._stylesKey = "margin"; - } - - /** - * @inheritdoc - * @returns {Component} - */ - toComponent() { - return this._modifier - .margin(this) - .toComponent(); - } - - /** - * @inheritdoc - * @returns {Component} - */ - childContext(innerComponent) { - return this._modifier - .margin(this) - .toComponent() - .childContext(innerComponent); - } -} -