diff --git a/src/builder.js b/src/builder.js index 9ff0962..8d88e6a 100644 --- a/src/builder.js +++ b/src/builder.js @@ -16,11 +16,39 @@ const builder = { openedChain: {} }, - componentFromHTML: function (htmlText) { + extended: {}, + + /** + * + * @param {string} htmlText + * @param {Modifier} modifier + * @returns {Component} + */ + componentFromHTML: function (htmlText, modifier = null) { + /** + * @type {Component} + */ let compel = new Component(new DOMParser().parseFromString(htmlText, "text/html")); + if (modifier) { + return compel.modifier(modifier); + } return compel; }, + /** + * + * @param {HTMLElement} element + * @param {Modifier} modifier + * @returns {Component} + */ + componentFromHTMLElement: function (element, modifier = null) { + let newCompel = new Component(element); + if (modifier) { + return newCompel.modifier(modifier); + } + return newCompel; + }, + /** * * @param {string} tag diff --git a/src/component.js b/src/component.js index cad5fcf..343e05e 100644 --- a/src/component.js +++ b/src/component.js @@ -300,6 +300,32 @@ class Component extends StyleAndScriptStoringComponent { return this; } + + /** + * An echo of Scope-Functions from kotlin for convenience + * + * Executes a given function injects this component into the function. + * @param {Function} func + * @returns {Component} + */ + apply(func) { + func(this); + return this; + } + + + /** + * An echo of Scope-Functions from kotlin for convenience + * + * Executes a given function injects the htmlelement of this component into the function. + * @param {Function} func + * @returns {Component} + */ + applyToEl(func) { + func(this._element) + return this; + } + /** * Defines how a child Component is to be appended. * @param {Component} component the child component to add it. diff --git a/src/context/scriptAndStyleContext.js b/src/context/scriptAndStyleContext.js index 98383c9..4f301ec 100644 --- a/src/context/scriptAndStyleContext.js +++ b/src/context/scriptAndStyleContext.js @@ -129,9 +129,13 @@ class ScriptAndStyleContext { * @todo implement extStore logic * * @param {string} elementIdentifier The element identifier - * @param {map} styleRuleMap The Styling rules/values + * @param {map|Modifier} styleRuleMap The Styling rules/values */ registerStyling(elementIdentifier, styleRuleMap) { + if(styleRuleMap instanceof Modifier){ + styleRuleMap = styleRuleMap._modifications; + } + if (!Object.keys(this.#css).includes(elementIdentifier)) { this.#css[elementIdentifier] = styleRuleMap } diff --git a/src/modifier.js b/src/modifier.js index 73bdd9e..7e86e13 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -221,6 +221,18 @@ class Modifier { return this; } + /** + * + * @param {StylePropertyMap} rulemap + * @returns {Modifier} + */ + addStyleRuleMap(rulemap) { + for (const ruleKey of Object.keys(rulemap)) { + this._modifications[ruleKey] = rulemap[ruleKey]; + } + return this; + } + /** * * @param {string} key diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js index 26c1ebd..e31be92 100644 --- a/src/sizeSide/dimensions.js +++ b/src/sizeSide/dimensions.js @@ -35,6 +35,11 @@ class Dimensions extends DirectionUnitDependentAttribute { return this; } + /** + * + * @param {number} size + * @returns {Dimensions} + */ all(size) { return this.width(size).height(size); } @@ -44,6 +49,10 @@ class Dimensions extends DirectionUnitDependentAttribute { return this.getOrderedValues().slice(2) } + /** + * + * @returns {Object} + */ toModifications() { let w = { key: "width", value: this._fFirst + this._unit } let h = { key: "height", value: this._fSecond + this._unit } @@ -59,6 +68,17 @@ class Dimensions extends DirectionUnitDependentAttribute { return [] } } + + /** + * + * @returns {TwoDimPoint} + */ + toTwoDimPoint() { + return new TwoDimPoint( + this._fFirst, + this._fSecond + ); + } } diff --git a/src/sizeSide/siding.js b/src/sizeSide/siding.js index 647438a..7dd2224 100644 --- a/src/sizeSide/siding.js +++ b/src/sizeSide/siding.js @@ -322,6 +322,68 @@ class TwoDimPoint { this.x = x; this.y = y; } + + /** + * + * @param {number} delta + * @returns {TwoDimPoint} + */ + xMinus(delta) { + this.x = this.x - delta; + return this; + } + + /** + * + * @param {number} delta + * @returns {TwoDimPoint} + */ + xPlus(delta) { + this.x = this.x + delta; + return this; + } + + /** + * + * @param {number} delta + * @returns {TwoDimPoint} + */ + yMinus(delta) { + this.y = this.y - delta; + return this; + } + + /** + * + * @param {number} delta + * @returns {TwoDimPoint} + */ + yPlus(delta) { + this.y = this.y + delta; + return this; + } + + /** + * + * @param {TwoDimPoint} delta + * @returns {TwoDimPoint} + */ + minusTDP(delta) { + this.x = this.x - delta.x; + this.y = this.y - delta.y; + return this; + } + + /** + * + * @param {TwoDimPoint} delta + * @returns {TwoDimPoint} + */ + plusTDP(delta) { + this.x = this.x + delta.x; + this.y = this.y + delta.y; + return this; + } } /**