Browse Source

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<CallMethod> 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/.
dev-feat-component_preview v1.3.2.1
chris 2 months ago
parent
commit
aada47b8e0
  1. 19
      fileOrder.json
  2. 2
      src/component.js
  3. 248
      src/modifier.js
  4. 53
      src/modifiers/margin.js
  5. 163
      src/modifiers/modificationSubChainMixins.js
  6. 44
      src/modifiers/padding.js
  7. 66
      src/sizeSide/border.js
  8. 60
      src/sizeSide/dimensions.js
  9. 68
      src/sizeSide/shapes.js
  10. 146
      src/sizeSide/siding.js

19
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"

2
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";

248
src/modifier.js

@ -109,37 +109,63 @@ class Modifier {
}
/**
* Sets modifications according to the dimensions object.
* @param {Dimensions} dimensions
* @returns {Modifier} this modifier object
*/
dimensions(dimensions) {
dimensions.toModifications()
* 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(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);
}
siding.toModifications()
if (modify instanceof Padding) {
modify.toModifications()
.forEach(kvpair => {
this._modifications[keyToAdd + kvpair.key] = kvpair.value;
})
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
}
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()
if (modify instanceof Margin) {
modify.toModifications()
.forEach(kvpair => {
this._modifications[keyToAdd + kvpair.key] = kvpair.value;
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);
border(modify = null) {
if (modify instanceof Border) {
if (modify._shape) {
this.clip(modify._shape);
} else if (this._shape) {
border._shape = this._shape;
modify._shape = this._shape;
}
border.toModifications()
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;
}
}
/**
* 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(' ');
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}
*/
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}

53
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);
}
}

163
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<Component>} 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<Component>} 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();
}
}
}

44
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);
}
}

66
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<SidingRefSides, LineStyles} refSideStyleMap
* @returns {Border}
* @returns {this}
*/
setLineStyles(refSideStyleMap) {
let rkeys = Object.keys(refSideStyleMap);
@ -163,6 +163,10 @@ class Border extends Sides {
}
/**
*
* @returns {Array<{key: string, value: string}>}
*/
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);
constructor(modifier) {
super(modifier);
}
/**
*
* @returns {Modifier|ChainableModifier}
*/
ensureModifier() {
return this.toModifier()
}
/**
* Applies the border modification on the modifier
* and returns (through the modifier) to the corresponding component.
* @returns {Component}
* @inheritdoc
* @extends BorderChain
*/
toComponent() {
return this._modifier
.border(this)
.toComponent();
}
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);
}
}

60
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;
super(modifier);
}
/**
*
* @returns {Modifier|ChainableModifier}
*/
toModifier() {
return this._modifier
.dimensions(this);
}
/**
*
* @returns {Modifier|ChainableModifier}
*/
ensureModifier() {
return this.toModifier()
}
/**
*
* @returns {Component} the Component that was (supposed to be) modified by this obj.
* @inheritdoc
* @extends DimensionsChain
*/
toComponent() {
return this._modifier
.dimensions(this)
.toComponent();
}
class DimensionsChainedModifier extends mixinModSubChainComponentMethods(Dimensions) {
/**
*
* @param {Component|Array<Component>} 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);
}
}

68
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 {
@ -116,50 +116,28 @@ class Shape extends DirectionUnitDependentAttribute {
* @inheritdoc
* @extends Shape
*/
class ShapeChain extends Shape {
_modifier;
constructor(modifier) {
super();
this._modifier = modifier;
}
class ShapeChain extends mixinModSubChainEndings(Shape) {
/**
*
* @returns {Modifier|ChainableModifier}
* @param {Modifier} modifier
*/
toModifier() {
return this._modifier
.clip(this);
constructor(modifier) {
super(modifier);
}
/**
*
* @returns {Modifier|ChainableModifier}
*/
ensureModifier() {
return this.toModifier()
}
/**
*
* @returns {Component} the Component that was (supposed to be) modified by this obj.
* @inheritdoc
* @extends ShapeChain
*/
toComponent() {
return this._modifier
.clip(this)
.toComponent();
}
class ShapeChainedModifier extends mixinModSubChainComponentMethods(Shape) {
/**
*
* @param {Component|Array<Component>} innerComponent children of the Component under modification.
* @returns {Component}
*/
childContext(innerComponent) {
return this._modifier
.clip(this)
.toComponent()
.childContext(innerComponent);
* @param {ChainableModifier} modifier
*/
constructor(modifier) {
super(modifier);
}
}

146
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>-<directional value>.
*
* @returns {Map<string,string>}
* @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<Component>} 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);
}
}

Loading…
Cancel
Save