DOC: Introduced changelog and upcoming changes

the switch-case resolvement is mostly moved to the ExtStorage class
changed some iteration approaches
removed unnecessary tasks
fixed some (missing) documentation

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 samples/*/
 jpc-like-websites.js
+extensions/

README.md

@@ -1,7 +1,7 @@
 # jpc-like-websites
 > Jetpack Compose like websites
 
-The building method of Jetpack Compose (for android), 
+The building method of Jetpack Compose (for e.g. android), 
 feels really straight forward 
 and intuitive for me.
 Furthermore I personally found it more readable 
@@ -13,20 +13,28 @@ to build those websites more or less fast (easy)
 and reliable. 
 While they do look the way I intend them to. 
 
-After developing some minor apps with Jetpack Compose I liked a lot about the way
-the components are build/structured. 
+After developing some minor apps with Jetpack Compose, 
+I liked a lot about the way the components are build/structured. 
 The reusability and so on... 
 
 Further I love to write code in a "method-chaning" kind of way:
 Every line is a chain-link concerning one particular task,
 the IDE offers an overview of possibilities.
-Method-chaining is more or less native in Kotlin.
-Logical support for git-line-wise change detection.
+It makes even more sence concidering the git-line-wise change detection.
 
 After some (very little) searching,
 I choose to give it a couple of hours
 and develop a small "lib" to enable myself to do exactly that.
-> Develop jetpack compose like components in html/javascript. 
+> Develop html/javascript components in a "jetpack compose like" manner. 
+
+BUT it is not inteded to be or do more than that. 
+The lib/framework is supposed to help to build/define/construct components 
+or furhter single page applications. 
+It is not meant to be a framework like react, vue, angular ... the list goes on.
+The closest comparison is actually typescript,
+it is supposed to build html, js, and css. 
+If desired, it can generate the entire page (html-file) 
+without the framework itself.
 
 Javascript is by far not my strongest field,
 typescript even less.
@@ -36,4 +44,4 @@ you have been warned.
 
 ```sh
 sh join_js_files.sh
-```
+```

fileOrder.json

@@ -0,0 +1,170 @@
+{
+    "orderedGroups": {
+        "pure_stylings": [
+            "color.js",
+            "alignment.js",
+            "arrangement.js"
+        ],
+        "size_sidings": [
+            "siding.js",
+            "shapes.js",
+            "border.js",
+            "dimensions.js"
+        ],
+        "behaviour_modifications": [
+            "commonEvents.js",
+            "contextMenu.js",
+            "dragAndDrop.js"
+        ],
+        "pre_context": [
+            "webTrinity.js",
+            "extStore.js",
+            "generalHelpers.js"
+        ],
+        "modifier": [
+            "modifier.js"
+        ],
+        "component": [
+            "wrapperComponent.js",
+            "modifiableComponent.js",
+            "addStyleAndFunctions.js",
+            "component.js"
+        ],
+        "builder": [
+            "baseComponents.js",
+            "builder.js"
+        ],
+        "extensions": [
+            "extension.js"
+        ],
+        "app_context": [
+            "scriptAndStyleContext.js",
+            "framework-controls.js",
+            "context.js"
+        ]
+    },
+    "keys": [
+        "color.js",
+        "alignment.js",
+        "arrangement.js",
+        "siding.js",
+        "shapes.js",
+        "border.js",
+        "dimensions.js",
+        "commonEvents.js",
+        "contextMenu.js",
+        "dragAndDrop.js",
+        "webTrinity.js",
+        "extStore.js",
+        "generalHelpers.js",
+        "modifier.js",
+        "wrapperComponent.js",
+        "modifiableComponent.js",
+        "addStyleAndFunctions.js",
+        "component.js",
+        "baseComponents.js",
+        "builder.js",
+        "extension.js",
+        "scriptAndStyleContext.js",
+        "framework-controls.js",
+        "context.js"
+    ],
+    "objects": {
+        "color.js": {
+            "name": "color.js",
+            "folder": "src"
+        },
+        "alignment.js": {
+            "name": "alignment.js",
+            "folder": "src"
+        },
+        "arrangement.js": {
+            "name": "arrangement.js",
+            "folder": "src"
+        },
+        "siding.js": {
+            "name": "siding.js",
+            "folder": "src/sizeSide"
+        },
+        "shapes.js": {
+            "name": "shapes.js",
+            "folder": "src/sizeSide"
+        },
+        "border.js": {
+            "name": "border.js",
+            "folder": "src/sizeSide"
+        },
+        "dimensions.js": {
+            "name": "dimensions.js",
+            "folder": "src/sizeSide"
+        },
+        "commonEvents.js": {
+            "name": "commonEvents.js",
+            "folder": "src"
+        },
+        "contextMenu.js": {
+            "name": "contextMenu.js",
+            "folder": "src/modifications"
+        },
+        "dragAndDrop.js": {
+            "name": "dragAndDrop.js",
+            "folder": "src/modifications"
+        },
+        "webTrinity.js": {
+            "name": "webTrinity.js",
+            "folder": "src/context"
+        },
+        "extStore.js": {
+            "name": "extStore.js",
+            "folder": "src/context"
+        },
+        "generalHelpers.js": {
+            "name": "generalHelpers.js",
+            "folder": "src/context"
+        },
+        "modifier.js": {
+            "name": "modifier.js",
+            "folder": "src"
+        },
+        "wrapperComponent.js": {
+            "name": "wrapperComponent.js",
+            "folder": "src/componentAncestry"
+        },
+        "modifiableComponent.js": {
+            "name": "modifiableComponent.js",
+            "folder": "src/componentAncestry"
+        },
+        "addStyleAndFunctions.js": {
+            "name": "addStyleAndFunctions.js",
+            "folder": "src/componentAncestry"
+        },
+        "component.js": {
+            "name": "component.js",
+            "folder": "src"
+        },
+        "baseComponents.js": {
+            "name": "baseComponents.js",
+            "folder": "src"
+        },
+        "builder.js": {
+            "name": "builder.js",
+            "folder": "src"
+        },
+        "extension.js": {
+            "name": "extension.js",
+            "folder": "src/extensions"
+        },
+        "scriptAndStyleContext.js": {
+            "name": "scriptAndStyleContext.js",
+            "folder": "src/context"
+        },
+        "framework-controls.js": {
+            "name": "framework-controls.js",
+            "folder": "src/context"
+        },
+        "context.js": {
+            "name": "context.js",
+            "folder": "src"
+        }
+    }
+}

generate_single_file.js

@@ -0,0 +1,156 @@
+const fs = require('fs/promises');
+const path = require('path');
+
+/**
+ * purely convienience 
+ */
+class FileDependecy {
+    name;
+    folder;
+    path() {
+        return this.folder + '/' + this.name;
+    }
+}
+
+/**
+ * Object Access Object
+ * purely convienience 
+ */
+class OAO {
+    constructor() {
+        /**
+         * @type {boolean|Map<string,FileDependecy>}
+         */
+        this.orderedGroups
+        /**
+         * @type {Array<string>}
+         */
+        this.keys = [];
+        /**
+         * @type {map<string, FileDependecy>}
+         */
+        this.objects = {};
+        /**
+         * @type {boolean}
+         */
+        this.isOrdered = false;
+    }
+}
+
+let fileOrder = Object.assign(new OAO(), require('./fileOrder.json'));
+
+fileOrder.objects = fileOrder.keys
+    .reduce((a, fileName) => Object.assign(
+        a,
+        { [fileName]: Object.assign(new FileDependecy(), fileOrder.objects[fileName]) }
+    ), {});
+
+/**
+ * Kept for future reference, might be that we will return to the dependency resolvement approach.
+ * @param {OAO} oao 
+ * @returns {OAO}
+ */
+function resolveDependencyOrder(oao) {
+    let roots = oao.keys.filter(k => oao.objects[k].dependencies.length === 0);
+
+    let folderList = [...new Set(oao.keys.map(k => oao.objects[k].folder))];
+
+    console.log("Folders", folderList);
+
+    /**
+     * 
+     * @param {OAO} oao 
+     * @param {Array<Array<string>>} dealt 
+     */
+    function recursiveResolvement(oao, dealtLvls, dealt) {
+        const arrsEqualSize = (arr1, arr2) => arr1.length === arr2.length;
+        const arrHasAll = (arr1, arr2) => arr2.every(k => arr1.includes(k))
+
+        if (oao.keys.length === dealt.length) {
+            return [...dealt, ...current];
+        } else {
+            console.log(`Received ${dealt.length} dealt of ${oao.keys.length}`);
+        }
+
+        let remaining = oao.keys
+            .filter(k => !dealt.includes(k));
+
+        if (remaining.length < 2) {
+            return [...dealt, ...remaining];
+        }
+
+        let current = remaining
+            .filter(k => oao.objects[k].dependencies.every(sk => dealt.includes(sk)));
+
+        if (current.length === 0) {
+            console.log("Couldn't resolve", remaining);
+            return remaining;
+        }
+
+        dealtLvls.push(current);
+
+        if (arrsEqualSize(remaining, current)) {
+            return [...dealt, ...current];
+        }
+
+        return recursiveResolvement(oao, dealtLvls, [...dealt, ...current]);
+    }
+
+    let recursiveResolved = recursiveResolvement(oao, [roots], roots);
+
+    recursiveResolved
+        .forEach((k, i) => {
+            oao.objects[k].orderNr = i;
+        });
+
+    oao.isOrdered = recursiveResolved.slice(-1).length <= 2;
+    if (oao.isOrdered) {
+        oao.keys = recursiveResolved;
+    }
+    return oao;
+}
+
+
+function appendContent(srcFile, targetFile) {
+    return fs.readFile(srcFile, 'utf8')
+        .then(content => {
+            console.log(`Processing '${srcFile}'`);
+            console.log(`           READ: successfully!`)
+            console.log(`           Attepting to append`);
+            return fs.appendFile(targetFile, content);
+        })
+        .then(() => {
+            console.log(`           Append/Write: successfully!`);
+        })
+        .catch(error => {
+            console.error(`Error reading/writing files: ${error.message}`);
+        })
+}
+
+
+let orderedJoinList = Object.keys(fileOrder.orderedGroups)
+    .flatMap(groupName => fileOrder.orderedGroups[groupName])
+    .map(fileName => fileOrder.objects[fileName].path());
+
+/*
+// Kept for future reference, might be that we will return to the dependency resolvement approach.
+fileOrder = resolveDependencyOrder(fileOrder);
+
+let orderedJoinList = fileOrder.keys
+    .map(fileName => fileOrder.objects[k].path());
+*/
+
+
+
+const targetFile = "./jpc-like-websites.js";
+console.log("(Re-) Creating target file: '" + targetFile + "'");
+
+
+/* EMPTY (create?) TARGET FILE */
+fs.writeFile(targetFile, "", err => { })
+
+orderedJoinList
+    .reduce((prevPromise, filePath) => prevPromise
+    .then(
+        ()=>appendContent(filePath, targetFile)
+    ), Promise.resolve())

join_js_files.sh

@@ -7,56 +7,5 @@ SRC="src"
 # Third "HIGHER_LIST" come several of the commons, the context as well as component 
 # and thoose that use component.
 
-SIZE_SIDE="siding.js shapes.js border.js dimensions.js"
-CONTEXT="generalHelpers.js webTrinity.js extStore.js scriptAndStyleContext.js"
-PRE_ANCESTRY="commonEvents.js context.js"
-MODIFIERS_LIST="alignment.js arrangement.js modifier.js" 
-MODIFICATIONS_LIST="dragAndDrop.js"
-COMPONENT_ANCESTRY="wrapperComponent.js modifiableComponent.js addStyleAndFunctions.js"
-HIGHER_LIST="component.js baseComponents.js builder.js"
-
 echo "" > $TARGET
-echo "/* ## color.js ## */" >> $TARGET
-cat $SRC/color.js >> $TARGET
-
-echo "/* # SIZE_SIDE # */" >> $TARGET
-for i in $SIZE_SIDE; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/sizeSide/$i >> $TARGET
-done
-
-echo "/* # CONTEXT # */" >> $TARGET
-for i in $CONTEXT; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/context/$i >> $TARGET
-done
-
-echo "/* # PRE_ANCESTRY # */" >> $TARGET
-for i in $PRE_ANCESTRY; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
-
-echo "/* # MODIFIERS_LIST # */" >> $TARGET
-for i in $MODIFIERS_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
-
-echo "/* # MODIFICATIONS_LIST # */" >> $TARGET
-for i in $MODIFICATIONS_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/modifications/$i >> $TARGET
-done
-
-echo "/* # COMPONENT_ANCESTRY # */" >> $TARGET
-for i in $COMPONENT_ANCESTRY; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/componentAncestry/$i >> $TARGET
-done
-
-echo "/* # HIGHER_LIST # */" >> $TARGET
-for i in $HIGHER_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
+node generate_single_file.js

src/baseComponents.js

@@ -6,13 +6,22 @@
 
 /**
  * Represents a Component (of an HTMLElement) that is capable of receiving input.
- * 
+ * @extends Component
  * @inheritdoc
  */
 class InputComponent extends Component {
-    constructor(element, attr = {}) {
-        super(element, attr)
-            .addStyleClass("el-input-comp");
+    /**
+     * 
+     * @param {string} element 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(element, attr = {}, modifier = null) {
+        super(element, attr);
+        this.addStyleClass("el-input-comp");
+        if (modifier) {
+            this.modifier(modifier);
+        }
     }
 
     /**
@@ -32,13 +41,21 @@ class InputComponent extends Component {
 /**
  * Represents container Components.
  * Some predefined modifications are applied on the child components.
- * 
+ * @extends Component
  * @inheritdoc
  */
 class FlexContainerComponent extends Component {
-    constructor(attr = {}) {
-        super(document.createElement("div"), attr)
-            .addStyleClass("flex-container-component")
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(document.createElement("div"), attr);
+        this.addStyleClass("flex-container-component");
+        if (modifier) {
+            this.modifier(modifier);
+        }
     }
 
     /**
@@ -65,43 +82,79 @@ class FlexContainerComponent extends Component {
         }
         return super.childContext(innerComponent);
     }
+
+    /**
+     * 
+     * @returns {FlexContainerComponent}
+     */
+    distibuteSpacingEvenly() {
+        console.log("Doing nothing Flexcontainer doesn't know how to distribute spacing evenly - ask the children (Row, Column)");
+        return this;
+    }
 }
 
 /**
  * A FlexContainerComponent, which organizes the children in a column like manner.
- * 
+ * @extends FlexContainerComponent
  * @inheritdoc
  */
 class Column extends FlexContainerComponent {
-    constructor(attr = {}) {
-        super(attr)
-            .addStyleClass("column-component")
-            .modifier(
-                new Modifier()
-                    .setStyleRule("flex-direction", "column")
-            );
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr, modifier);
+        this.addStyleClass("column-component");
+        this.modifier(
+            new Modifier()
+                .setStyleRule("flex-direction", "column")
+        );
+    }
+
+    /**
+     * @todo - adapt to extStore logic 
+     * @override
+     * @returns {Column}
+     */
+    distibuteSpacingEvenly() {
+        this._element.children.forEach(child => {
+            child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
+        })
+        return this;
     }
+
 }
 
 /**
  * A FlexContainerComponent, which organizes the children in a row like manner.
  * 
+ * @extends FlexContainerComponent
  * @inheritdoc
  */
 class Row extends FlexContainerComponent {
-    constructor(attr = {}) {
-        super(attr)
-            .addStyleClass("row-component")
-            .modifier(
-                new Modifier()
-                    .fillMaxWidth()
-                    .setStyleRule("flex-direction", "row")
-            )
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr);
+        this.addStyleClass("row-component")
+        if (modifier) {
+            this.modifier(modifier);
+        }
+        this.modifier(
+            new Modifier()
+                .fillMaxWidth()
+                .setStyleRule("flex-direction", "row")
+        )
     }
 
     /**
      * 
-     * @param {*} innerComponent 
+     * @param {Component|Array<Component>} innerComponent 
      * @returns {Row}
      */
     childContext(innerComponent) {
@@ -123,12 +176,13 @@ class Row extends FlexContainerComponent {
     }
 
     /**
-     * 
+     * @todo - adapt to extStore logic 
+     * @override
      * @returns {Row}
      */
     distibuteSpacingEvenly() {
         this._element.children.forEach(child => {
-            child.style["width"] = ((100-this._element.childElementCount) / innerComponent.length);
+            child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
         })
         return this;
     }

src/builder.js

@@ -16,46 +16,90 @@ const builder = {
           openedChain: {}
      },
 
-     componentFromHTML: function (htmlText) {
+     /**
+      * @type {Object}
+      */
+     extensions: {},
+
+     /**
+      * 
+      * @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 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },
+     genTag: function (tag, attr = {}, modifier = null) {
+          let compel = new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`);
+          if (modifier) {
+               return compel.modifier(modifier);
+          }
+          return compel;
+     },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     anchor: function (attr = {}) { return builder.genTag("a", attr); },
+     anchor: function (attr = {}, modifier = null) { return builder.genTag("a", attr, modifier); },
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     label: function (attr = {}) { return builder.genTag("label", attr); },
+     label: function (attr = {}, modifier = null) { return builder.genTag("label", attr, modifier); },
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     button: function (attr = {}) { return builder.genTag("button", attr); },
+     button: function (attr = {}, modifier = null) { return builder.genTag("button", attr, modifier); },
      /**
       * 
+      * @param {InputTypes|string} type 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     input: function (type, attr = {}) {
+     input: function (type, attr = {}, modifier = null) {
           return new InputComponent(
                document.createElement("input"),
-               Object.assign({ "type": type }, attr)
+               Object.assign({ "type": type }, attr),
+               modifier
           )
                .addStyleClass(`el-input`);
      },
@@ -64,111 +108,125 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Function<Component>}
       */
      inputTags: Object.freeze({
-          button: function (attr = {}) { return builder.input("button", attr) },
-          checkbox: function (attr = {}) { return builder.input("checkbox", attr) },
-          color: function (attr = {}) { return builder.input("color", attr) },
-          date: function (attr = {}) { return builder.input("date", attr) },
-          datetime: function (attr = {}) { return builder.input("datetime", attr) },
-          datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) },
-          email: function (attr = {}) { return builder.input("email", attr) },
-          file: function (attr = {}) { return builder.input("file", attr) },
-          image: function (attr = {}) { return builder.input("image", attr) },
-          month: function (attr = {}) { return builder.input("month", attr) },
-          number: function (attr = {}) { return builder.input("number", attr) },
-          password: function (attr = {}) { return builder.input("password", attr) },
-          radio: function (attr = {}) { return builder.input("radio", attr) },
-          range: function (attr = {}) { return builder.input("range", attr) },
-          reset: function (attr = {}) { return builder.input("reset", attr) },
-          search: function (attr = {}) { return builder.input("search", attr) },
-          submit: function (attr = {}) { return builder.input("submit", attr) },
-          tel: function (attr = {}) { return builder.input("tel", attr) },
-          text: function (attr = {}) { return builder.input("text", attr) },
-          time: function (attr = {}) { return builder.input("time", attr) },
-          url: function (attr = {}) { return builder.input("url", attr) },
-          week: function (attr = {}) { return builder.input("week", attr) }
+          button: function (attr = {}, modifier = null) { return builder.input("button", attr, modifier) },
+          checkbox: function (attr = {}, modifier = null) { return builder.input("checkbox", attr, modifier) },
+          color: function (attr = {}, modifier = null) { return builder.input("color", attr, modifier) },
+          date: function (attr = {}, modifier = null) { return builder.input("date", attr, modifier) },
+          datetime: function (attr = {}, modifier = null) { return builder.input("datetime", attr, modifier) },
+          datetime_local: function (attr = {}, modifier = null) { return builder.input("datetime-local", attr, modifier) },
+          email: function (attr = {}, modifier = null) { return builder.input("email", attr, modifier) },
+          file: function (attr = {}, modifier = null) { return builder.input("file", attr, modifier) },
+          image: function (attr = {}, modifier = null) { return builder.input("image", attr, modifier) },
+          month: function (attr = {}, modifier = null) { return builder.input("month", attr, modifier) },
+          number: function (attr = {}, modifier = null) { return builder.input("number", attr, modifier) },
+          password: function (attr = {}, modifier = null) { return builder.input("password", attr, modifier) },
+          radio: function (attr = {}, modifier = null) { return builder.input("radio", attr, modifier) },
+          range: function (attr = {}, modifier = null) { return builder.input("range", attr, modifier) },
+          reset: function (attr = {}, modifier = null) { return builder.input("reset", attr, modifier) },
+          search: function (attr = {}, modifier = null) { return builder.input("search", attr, modifier) },
+          submit: function (attr = {}, modifier = null) { return builder.input("submit", attr, modifier) },
+          tel: function (attr = {}, modifier = null) { return builder.input("tel", attr, modifier) },
+          text: function (attr = {}, modifier = null) { return builder.input("text", attr, modifier) },
+          time: function (attr = {}, modifier = null) { return builder.input("time", attr, modifier) },
+          url: function (attr = {}, modifier = null) { return builder.input("url", attr, modifier) },
+          week: function (attr = {}, modifier = null) { return builder.input("week", attr, modifier) }
      }),
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     div: function (attr = {}) { return builder.genTag("div", attr); },
+     div: function (attr = {}, modifier = null) { return builder.genTag("div", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     span: function (attr = {}) { return builder.genTag("span", attr); },
+     span: function (attr = {}, modifier = null) { return builder.genTag("span", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     paragraph: function (attr = {}) { return builder.genTag("p", attr); },
+     paragraph: function (attr = {}, modifier = null) { return builder.genTag("p", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
+     header: function (sizeGroup, attr = {}, modifier = null) { return builder.genTag(`h${sizeGroup}`, attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
+     checkbox: function (attr = {}, modifier = null) { return builder.input({ "type": "checkbox" }, modifier) },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     select: function (attr = {}) { return builder.genTag("select", attr); },
+     select: function (attr = {}, modifier = null) { return builder.genTag("select", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     option: function (attr = {}) { return builder.genTag("option", attr); },
+     option: function (attr = {}, modifier = null) { return builder.genTag("option", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
+     radioBtn: function (attr = {}, modifier = null) { return builder.genTag("radioBtn", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     icon: function (attr = {}) { return builder.genTag("icon", attr); },
+     icon: function (attr = {}, modifier = null) { return builder.genTag("icon", attr, modifier); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     img: function (attr = {}) { return builder.genTag("img", attr); },
+     img: function (attr = {}, modifier = null) { return builder.genTag("img", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     textarea: function (attr = {}) {
+     textarea: function (attr = {}, modifier = null) {
           return new InputComponent(
                document.createElement("textarea"),
-               attr
+               attr,
+               modifier
           )
                .addStyleClass(`el-textarea`);
      },
@@ -176,10 +234,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     table: function (attr = {}) {
-          return builder.genTag("table", attr)
+     table: function (attr = {}, modifier = null) {
+          return builder.genTag("table", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -188,38 +247,43 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableRow: function (attr = {}) { return builder.genTag("tr", attr); },
+     tableRow: function (attr = {}, modifier = null) { return builder.genTag("tr", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableCell: function (attr = {}) { return builder.genTag("td", attr); },
+     tableCell: function (attr = {}, modifier = null) { return builder.genTag("td", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },
+     tableCaption: function (attr = {}, modifier = null) { return builder.genTag("caption", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },
+     tableHeadCell: function (attr = {}, modifier = null) { return builder.genTag("th", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableBody: function (attr = {}) {
-          return builder.genTag("tbody", attr)
+     tableBody: function (attr = {}, modifier = null) {
+          return builder.genTag("tbody", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -228,10 +292,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableHead: function (attr = {}) {
-          return builder.genTag("thead", attr)
+     tableHead: function (attr = {}, modifier = null) {
+          return builder.genTag("thead", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -240,10 +305,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableFooter: function (attr = {}) {
-          return builder.genTag("tfoot", attr)
+     tableFooter: function (attr = {}, modifier = null) {
+          return builder.genTag("tfoot", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -252,17 +318,19 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     iframe: function (attr = {}) { return builder.genTag("iframe", attr) },
+     iframe: function (attr = {}, modifier = null) { return builder.genTag("iframe", attr, modifier) },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     form: function (attr = {}) {
-          return builder.genTag("form", attr)
+     form: function (attr = {}, modifier = null) {
+          return builder.genTag("form", attr, modifier)
                .addStyleClass("flex-container-component")
                .chainModifier()
                .setStyleRule("flex-direction", "column")
@@ -272,17 +340,21 @@ const builder = {
 
      /**
       * 
-      * @param {*} attr 
+      * 
+      * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Row}
       */
-     row: function (attr = {}) { return new Row(attr) },
+     row: function (attr = {}, modifier = null) { return new Row(attr, modifier) },
 
      /**
       * 
-      * @param {*} attr 
+      * 
+      * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Column}
       */
-     column: function (attr = {}) { return new Column(attr) },
+     column: function (attr = {}, modifier = null) { return new Column(attr, modifier) },
 
      /**
       * 
@@ -297,6 +369,7 @@ const builder = {
           main.parentElement.insertAdjacentElement(
                "afterbegin",
                builder.genTag("main")
+                    .isHigherComponent()
                     .alignment(Alignment.CENTER)
                     .arrangement(Arrangement.CENTER)
                     .childContext(innerComponents)

src/component.js

@@ -10,7 +10,9 @@
  * It is mainly a collection of wrapper methods 
  * around the HTMLElement methods to make them chainable.
  * It serves as base for further functionallity extensions.
- * @property {Map<string, SStoreDefinition>} _style
+ * @extends StyleAndScriptStoringComponent
+ * @inheritdoc
+ * 
  */
 class Component extends StyleAndScriptStoringComponent {
     /**
@@ -44,6 +46,7 @@ class Component extends StyleAndScriptStoringComponent {
         this._modifier = new Modifier()
             .margin(new Sides().all(0));
         this._modifier._modifications['display'] = "flex";
+        this._modifier._modifications["box-sizing"] = "border-box";
 
         this._toRegister = [];
     }
@@ -92,9 +95,11 @@ class Component extends StyleAndScriptStoringComponent {
      */
     overflow(vertical = true, horizontal = false) {
         if (vertical) {
+            this.subscribeOnGenerate(CommonCompelGroups.OVERFLOWING);
             this._modifier._modifications["overflow-y"] = "auto";
         }
         if (horizontal) {
+            this.subscribeOnGenerate(CommonCompelGroups.OVERFLOWING);
             this._modifier._modifications["overflow-x"] = "auto";
         }
         return this;
@@ -115,6 +120,8 @@ class Component extends StyleAndScriptStoringComponent {
             (untilFound ? "until-found" : "hidden")
         );
 
+        this.subscribeOnGenerate(CommonCompelGroups.HIDDEN_ON_START);
+
         return this;
     }
 
@@ -123,6 +130,7 @@ class Component extends StyleAndScriptStoringComponent {
      * @returns {Component}
      */
     isHigherComponent() {
+        this.subscribeOnGenerate(CommonCompelGroups.HIGHER_COMPEL);
         this.#isCompel = true;
         return this.setAttribute("data-compel-isHCompel", "true")
     }
@@ -144,11 +152,11 @@ class Component extends StyleAndScriptStoringComponent {
      * @returns {Component}
      */
     registerAsContextMenu() {
+        this.subscribeOnGenerate(CommonCompelGroups.IS_CONTEXT_MENU);
         this._isContextMenu = true;
-        this.addStyleClass('contextmenu')
-            .hidden();
 
-        return this;
+        return this.addStyleClass('contextmenu')
+            .hidden();
     }
 
     /**
@@ -156,8 +164,8 @@ class Component extends StyleAndScriptStoringComponent {
      * @todo extract into an extra function(allity) provider
      * 
      * @param {Component} component 
-     * @param {Function<HTMLElement|Event> => Sides} getRefPos 
-     * @param {null|ExtStorage} [extStore=null] 
+     * @param {Sides|Function<HTMLElement|Event> => Sides} getRefPos 
+     * @param {ExtStorage} [extStore=null] 
      * @returns {Component}
      */
     contextMenu(component, getRefPos = null, extStore = null) {
@@ -172,84 +180,38 @@ class Component extends StyleAndScriptStoringComponent {
             }
         }
 
-        let cMenuWenity = component.generate();
-
-        let identifier = cMenuWenity.html.getAttribute("data-autocompel");
-
-        function hideCMenu(el) {
-            el.setAttribute("hidden", "hidden");
-            el.style.display = "none";
-        }
-
-        function hideOnEscape(event) {
-            if (event.key === "Escape") {
-                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-                hideCMenu(menu);
-                document.removeEventListener("keyup")
-            }
-        }
-
-
-        function hideOnClickOutsideOfBounds(event) {
-            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-
-            let area = getEnclosingBounds(menu);
+        this.subscribeOnGenerate(CommonCompelGroups.HAS_CONTEXT_MENU);
 
-            if (!areXYInArea(area, event.clientX, event.clientY)) {
-                //if (event.target.offsetParent != menu) {
-                hideCMenu(menu);
-                document.removeEventListener("click")
-            }
-        }
+        let identifier = component._compName;
 
         this.addEventListener(
             "contextmenu",
-            function (event) {
-                event.preventDefault();
-
-                /**
-                 * @type {Sides}
-                 */
-                const pos = getRefPos(event);
-
-                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
-
-                menu.style.left = `${pos.getByIndex(SideDirections.LEFT)}px`;
-                menu.style.top = `${pos.getByIndex(SideDirections.TOP)}px`;
-
-                menu.style["display"] = "block";
-                menu.removeAttribute("hidden");
-                document.addEventListener("click", hideOnClickOutsideOfBounds);
-                document.addEventListener("keyup", hideOnEscape);
-            }
+            DefaultContextMenu.openContextMenuAction(identifier, getRefPos)
         );
 
-        return this;
+        return this.childContext(component);
     }
 
     /**
      * 
-     * @param {*} dndGroup 
+     * @param {DragAndDropImplementation} dadImpl 
      * @returns {Component}
      */
-    draggable(dndGroup = null) {
+    draggable(dadImpl = new DragAndDropImplementation()) {
+        this.subscribeOnGenerate(CommonCompelGroups.DRAGGABLE);
+        this.subscribeOnGenerate(CommonCompelGroups.HAS_DRAG_EVENT);
+
+        let addedClass = "comp-el-mech-draggable";
         let selector = this._element.getAttribute("data-autocompel");
-        Page.registerStyling(".grabbin-cursor", { "cursor": "grab" });
 
-        return this.addStyleClass("comp-el-mech-draggable")
+        selector = `.${addedClass}[data-autocompel="${selector}"]`;
+
+        return this.addStyleClass(addedClass)
             .setAttribute("draggable", "true")
             .setAttribute("dropEffect", "none")
             .addEventListener(
                 CommonEvents.DRAG_START,
-                function (event) {
-                    console.log("DragEvent", event, "on", selector);
-                    event.target.classList.toggle("grabbin-cursor");
-                    event.dataTransfer
-                        .setData(
-                            "text/html",
-                            selector
-                        );
-                }
+                dadImpl.dragStartAction("text/plain", selector)
             );
     }
 
@@ -259,6 +221,7 @@ class Component extends StyleAndScriptStoringComponent {
      * @param {Function} action 
      */
     onDrag(dragEvent, action = (e) => { e.preventDefault(); }) {
+        this.subscribeOnGenerate(CommonCompelGroups.HAS_DRAG_EVENT);
         let selector = `comp-el-mech-drag${dragEvent}`;
 
         return this.addEventListener(
@@ -269,23 +232,49 @@ class Component extends StyleAndScriptStoringComponent {
 
     /**
      * 
-     * @param {*} dndGroup 
+     * @param {DragAndDropImplementation} dadImpl 
      * @returns {Component}
      */
-    dropTarget(dndGroup = null) {
-        let selector = "comp-el-mech-droptarget";
-
-        function dropEventCall(event) {
-            return dropEventHandler(event, selector);
-        }
+    dropTarget(dadImpl = new DragAndDropImplementation()) {
+        this.subscribeOnGenerate(CommonCompelGroups.DROP_TARGET);
+        let specialClass = "comp-el-mech-droptarget";
 
-        this.addStyleClass(selector)
+        this.addStyleClass(specialClass)
             .onDrag(EventDrag.OVER);
 
+        let selector = `.${specialClass}[data-autocompel="${this._compName}"]`
+
         this._element.addEventListener(
             "drop",
-            dropEventCall
+            dadImpl.dropEventAction("text/plain", selector)
         );
+
+        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;
     }
 
@@ -315,161 +304,83 @@ class Component extends StyleAndScriptStoringComponent {
     }
 
 
+    /**
+     * 
+     * @param {ExtStorage} extStore 
+     * @returns {Array<SStoreDefinition>}
+     */
     _processStyles(extStore = null) {
-        if (!extStore) {
-            extStore = this._stylesExtStore.updateForGeneralStyling();
-        } else {
-            extStore.updateForGeneralStyling();
-        }
-
-        /**
-         * @todo very likely code dupplication - but kept for the time being
-         *          for error tracking. 
-         */
-        if (extStore._type === ExtStoreType.INTERNALIZED_WITHIN) {
-            let sizings = Object.keys(this._modifier._modifications)
-                .filter(e => e.includes("width") || e.includes("height"))
-                .filter(e => this._modifier._modifications[e].includes("calc"))
-                .reduce((a, c) => a.add(
-                    c,
-                    this._modifier
-                        ._modifications[c]
-                        .split('(')[1]
-                        .split(' - ')[0]
-                ), new ObjectAccessObject());
-
-            fillAttrsInContainerByCb(
-                this._modifier._modifications,
-                this._element,
-                (key, val, el) => { el.style[key] = val; }
-            );
-
-            let hasElSizing = sizings.keys.some(k => Object.keys(this._element.style).includes(k));
-            if (sizings.keys.length > 0 && !hasElSizing) {
-                console.log("Fixing sizing - because not supported 'calc'", sizings);
-
-                fillAttrsInContainerByCb(
-                    sizings,
-                    this._element,
-                    (key, val, el) => { el.style[key] = val; }
-                );
-            }
-
-        } else {
-            /* ADDS ELEMENT MODIFIER TO this._styles list for styles processing */
-            let modifierSSD = new SStoreDefinition();
-            modifierSSD._identifier = "." + this._compName;
-            modifierSSD._definition = this._modifier._modifications;
-            modifierSSD._extStore = extStore;
-            this._styles.unshift(modifierSSD);
-        }
+        extStore = (extStore
+            ? extStore
+            : this._stylesExtStore
+        )
+            .setupForGeneralStyling();
 
         let forCollection = [];
 
         let counter = 0;
-        for (let i = 0; i < this._styles.length; i++) {
-            const ssd = this._styles[i];
+        for (const ssd of this._styles) {
             /* Make sure that the type is unified for later processing */
             if (ssd._definition instanceof Modifier) {
                 ssd._definition = ssd._definition._modifications;
             }
 
             /* Check/Ensure proper ExtStorageType for following comparison */
-            let refESType = (
-                ssd._extStore && ssd._extStore._type
-                    ? ssd._extStore.updateForGeneralStyling()._type
-                    : extStore._type
-            );
+            /**
+             * @type {ExtStorage}
+             */
+            let curExtStore = extStore;
+
+            if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) {
+                curExtStore = ssd._extStore.setupForGeneralStyling();
+            }
 
-            switch (refESType) {
-
-                case ExtStoreType.INTERNALIZED_WITHIN:
-                    fillAttrsInContainerByCb(
-                        ssd._definition,
-                        this._element,
-                        (key, val, el) => { el.style[key] = val; }
-                    )
-                    break;
-
-                case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
-                    let container = generateAndFillStyleTag([ssd]);
-                    container.setAttribute("data-compel-individually-nr", counter++);
-                    Page.addElementToPage(container, refESType);
-                    break;
-
-                case ExtStoreType.COLLECTED_DOC_HEAD:
-                    forCollection.push(ssd);
-                    break;
-
-                case ExtStoreType.CENTRALIZED_DOC_HEAD:
-                    Page.registerStyling(ssd._identifier, ssd._definition);
-                    break;
+            if (curExtStore.getStylingDistribution()(ssd, this._element, counter)) {
+                forCollection.push(ssd);
             }
         }
 
         return forCollection;
     }
 
-
+    /**
+     * 
+     * @param {ExtStorage} extStore 
+     * @returns {Array<SStoreDefinition>}
+     */
     _processFunctions(extStore = null) {
-        if (!extStore) {
-            extStore = this._functionsExtStore.updateForFunctions();
-        } else {
-            extStore.updateForFunctions();
-        }
+        extStore = (extStore
+            ? extStore
+            : this._functionsExtStore
+        )
+            .setupForFunctions();
 
         const forCollection = new Map();
         const collectForBefore = [];
 
         let counter = 0;
-        for (let i = 0; i < this._functions.length; i++) {
-            const ssd = this._functions[i];
+        for (const ssd of this._functions) {
             /* Make sure that the type is unified for later processing */
 
-            let refESType = (
-                ssd._extStore && ssd._extStore._type
-                    ? ssd._extStore.updateForFunctions()._type
-                    : extStore._type
-            );
+            let curExtStore = extStore;
+            if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) {
+                curExtStore = ssd._extStore.setupForFunctions();
+            }
 
-            switch (refESType) {
-                case ExtStoreType.CENTRALIZED_DOC_HEAD:
-                case ExtStoreType.CENTRALIZED_SEGMENT_BEGIN:
-                case ExtStoreType.CENTRALIZED_DOC_FOOTER:
-                    Page.registerPageFunction(ssd._identifier, ssd._definition);
-                    break;
-
-                case ExtStoreType.INDIVIDUALLY_WITHIN:
-                case ExtStoreType.INDIVIDUALLY_BEFORE:
-                case ExtStoreType.INDIVIDUALLY_SEGMENT_BEGIN:
-                case ExtStoreType.INDIVIDUALLY_DOC_FOOTER:
-                case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
-
-                    let container = document.createElement("script");
-                    container.setAttribute("data-compel-individually-nr", counter++);
-                    container.innerText += getScriptTagInjectionText(
-                        clearFunctionDeclarationText(ssd._definition),
-                        ssd._identifier
-                    );
-                    Page.addElementToPage(container, refESType, this._element);
-
-                    break;
-
-                case ExtStoreType.COLLECTED_BEFORE:
+            if (curExtStore.getFunctionDistribution()(ssd, counter)) {
+                if (curExtStore._position.BEFORE) {
                     collectForBefore.push(ssd);
-                    break;
-
-                case ExtStoreType.COLLECTED_SEGMENT_BEGIN:
-                case ExtStoreType.COLLECTED_DOC_FOOTER:
-                case ExtStoreType.COLLECTED_DOC_HEAD:
-                    if (!forCollection.has(refESType)) {
-                        forCollection.set(refESType, []);
+                } else {
+                    if (!forCollection.has(curExtStore)) {
+                        forCollection.set(curExtStore, []);
                     }
-                    forCollection.get(refESType).push(ssd);
-                    break;
+                    forCollection.get(curExtStore).push(ssd);
+                }
             }
         }
 
+
+
         return forCollection;
     }
 
@@ -487,14 +398,20 @@ class Component extends StyleAndScriptStoringComponent {
     generate(styleStore = null, functionStore = null) {
         this._wenity = new WebTrinity();
 
-        /* DEAL WITH COMPONENT MODIFICATION FIRST */
-        this._modifier._modifications["box-sizing"] = "border-box";
-        this._modifier._modifications["justify-content"] = this._arrangement;
-        this._modifier._modifications["align-content"] = this._alignment;
-        this._modifier._modifications["align-items"] = this._alignment;
-        this._modifier._modifications["text-align"] = this._alignment;
-
+        if (!styleStore) {
+            styleStore = this._stylesExtStore;
+        }
 
+        /* DEAL WITH COMPONENT MODIFICATION FIRST */
+        // @todo pay attention to the "overwrite" behaviour - the local modifier styles are the "closest"
+        //          it might be appropriate to use this._styles.unshift(...) instead. 
+        this._styles.push(new SStoreDefinition(
+            (styleStore._aggregation !== ESAggregation.INTERNALIZED ? "." : "") + this._compName,
+            this._modifier,
+            this._stylesExtStore
+        ));
+
+        /* DEAL WITH CHILDREN */
         let collectedWenities = [];
 
         for (let i = 0; i < this._children.length; i++) {
@@ -519,6 +436,7 @@ class Component extends StyleAndScriptStoringComponent {
             }
         }
 
+        /* DEAL WITH STYLING AND PROCESSING */
         /**
          * @type {Array<SStoreDefinition>}
          */

src/componentAncestry/addStyleAndFunctions.js

@@ -5,16 +5,17 @@
  */
 
 /**
+ * @inheritdoc
  * @abstract
  * @extends ModifiableComponent
  */
 class StyleAndScriptStoringComponent extends ModifiableComponent {
     /**
-     * @type {ExtStore}
+     * @type {ExtStorage}
      */
     _styleClassesExtStore
     /**
-     * @type {ExtStore}
+     * @type {ExtStorage}
      */
     _stylesExtStore;
     /**
@@ -22,7 +23,7 @@ class StyleAndScriptStoringComponent extends ModifiableComponent {
      */
     _styles;
     /**
-     * @type {ExtStore}
+     * @type {ExtStorage}
      */
     _functionsExtStore;
     /**
@@ -33,26 +34,64 @@ class StyleAndScriptStoringComponent extends ModifiableComponent {
     constructor(element, attr = {}) {
         super(element, attr);
 
-        this._styleClassesExtStore = new ExtStorage(
-            ExtStoreType.CENTRALIZED_DOC_HEAD,
-            OverwriteBehaviour.REPLACE
-        );
+        this._styleClassesExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
-        this._stylesExtStore = new ExtStorage(
-            ExtStoreType.INTERNALIZED_WITHIN,
-            OverwriteBehaviour.REPLACE
-        );
+        this._stylesExtStore = ExtStoreType.INTERNALIZED_WITHIN
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
         this._styles = [];
 
-        this._functionsExtStore = new ExtStorage(
-            ExtStoreType.CENTRALIZED_DOC_HEAD,
-            OverwriteBehaviour.REPLACE
-        );
+        this._functionsExtStore = ExtStoreType.CENTRALIZED_DOC_HEAD
+            .setOverwriteBehaviour(OverwriteBehaviour.REPLACE);
 
         this._functions = [];
     }
 
+
+    /**
+     * @todo: Unify logic extract modifications into responsible construct
+     * @todo: Make it work as expected, fix docu
+     * @todo: Differentiate between directions (horizontal, vertiacl)
+     * @override
+     * @inheritdoc
+     * Sets the alignment (modifications) for this element or more specific for its children. 
+     * @param {Alignment} alignment 
+     * @returns {Component} this component object
+     */
+    alignment(alignment) {
+        /*
+        this._modifier._modifications["display"] = "flex";
+        this._modifier._modifications["align-content"] = alignment;
+        this._modifier._modifications["align-items"] = alignment;
+        this._modifier._modifications["text-align"] = alignment;
+        */
+        this._alignment = alignment;
+        this._modifier._modifications["align-content"] = this._alignment;
+        this._modifier._modifications["align-items"] = this._alignment;
+        this._modifier._modifications["text-align"] = this._alignment; 
+        return this;
+    }
+
+    /**
+     * @todo: Unify logic extract modifications into responsible construct
+     * @todo: Differentiate between directions (horizontal, vertical)
+     * @todo: Make it work as expected, fix docu
+     * @override
+     * @inheritdoc
+     * Sets the arrangement (modifications) for this element or more specific for its children. 
+     * @param {Arrangement} arrangement 
+     * @returns {Component} this component object
+     */
+    arrangement(arrangement) {
+        /*
+        this._modifier._modifications["justify-content"] = arrangement;
+        */
+        this._arrangement = arrangement;
+        this._modifier._modifications["justify-content"] = this._arrangement;
+        return this;
+    }
+
     /**
      * Defines/Sets the general "storage-behaviour" for styling of this component.
      * Further for potential css definitions.

src/componentAncestry/modifiableComponent.js

@@ -6,6 +6,7 @@
 
 
 /**
+ * @inheritdoc
  * @extends ChildbearerComponent
  * @abstract
  */

src/componentAncestry/wrapperComponent.js

@@ -116,6 +116,7 @@ class ElementWrapper {
 
 
 /**
+ * @inheritdoc
  * @extends ElementWrapper
  * @abstract
  */

src/context.js

@@ -6,32 +6,48 @@
 
 
 /**
+ * @todo Potentially class implementation could be removed entirely.
+ *       Since it (at the time being) is only working as a singleton anyway. 
+ *       Further maybe rename to 'AppBuilder' instead of 'PageBuilder', 
+ *       page might later become part of a navigation setup. 
+ * 
+ * 
  * The class provides overreaching options for building the website.
  * @extends ScriptAndStyleContext
 */
 class PageBuilder extends ScriptAndStyleContext {
+    /**
+     * @type {Array<string>}
+     */
     #autoRegisteredComponents;
+    /**
+     * @type {Array<string>}
+     */
     #registeredComponents;
     /**
      * @type {boolean}
      */
-    _useCssCalc;
+    #showFrameworkConsole;
+    /**
+     * @type {Array<CompelExtension>}
+     */
+    _extensions;
 
     constructor() {
         super();
+        this.#showFrameworkConsole = false;
+
         this.#autoRegisteredComponents = [];
         this.#registeredComponents = [];
-        this._groups = new Map();
-    }
+        this._extensions = [];
 
-    useCssCalc() {
-        this._useCssCalc = true;
+        this._groups = new Map();
     }
 
     /**
      * 
      * @param {*|Array<*>} groups 
-     * @param {*} component 
+     * @param {Component} component 
      */
     subscribeComponentToGroup(groups, component) {
         if (groups instanceof Array && !(groups instanceof String)) {
@@ -59,78 +75,20 @@ class PageBuilder extends ScriptAndStyleContext {
 
 
     /**
+     * Inserts the given element according to the extStore into the page/document.
+     * The refElement is a reference element for the case 
+     * that extStore._position defines "before" or "segment_begin", 
+     * which will then look for the refElement as the corresponding insert reference.
      * 
      * @param {HTMLElement|Component} element 
-     * @param {extStoreType} extStoreType 
+     * @param {ExtStorage} extStore 
      * @param {HTMLElement|Component} refElement 
      */
-    addElementToPage(element, extStoreType = ExtStoreType.CENTRALIZED_DOC_HEAD, refElement = null) {
+    addElementToPage(element, extStore = ExtStoreType.CENTRALIZED_DOC_HEAD) {
         let { insertCallEl, relativePositioning } = {};
-        if (!refElement) {
-            switch (extStoreType) {
-                case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
-                case ExtStoreType.CENTRALIZED_DOC_HEAD:
-                case ExtStoreType.COLLECTED_DOC_HEAD:
-                    insertCallEl = document.querySelector('head');
-                    break;
-
-                case ExtStoreType.INDIVIDUALLY_DOC_FOOTER:
-                case ExtStoreType.COLLECTED_DOC_FOOTER:
-                case ExtStoreType.CENTRALIZED_DOC_FOOTER:
-                    insertCallEl = document.querySelector('footer');
-                    break;
-
-                case ExtStoreType.INTERNALIZED_WITHIN:
-                    break;
-
-                case ExtStoreType.INDIVIDUALLY_WITHIN:
-                case ExtStoreType.INDIVIDUALLY_BEFORE:
-                case ExtStoreType.INDIVIDUALLY_SEGMENT_BEGIN:
-                case ExtStoreType.COLLECTED_BEFORE:
-                case ExtStoreType.COLLECTED_SEGMENT_BEGIN:
-                case ExtStoreType.CENTRALIZED_SEGMENT_BEGIN:
-                    console.log("ExtStorePosition defines a relative position, but no reference Element is given - doing nothing!")
-                    return
-            }
-        } else if (refElement instanceof Component) {
-            refElement = refElement.generate()
-        }
-
-        let refAttribute = "data-autocompel"
-        let refNode = document.querySelector(`[${refAttribute}='${refElement.getAttribute(refAttribute)}']`);
-
-        switch (extStoreType) {
-            case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
-            case ExtStoreType.CENTRALIZED_DOC_HEAD:
-            case ExtStoreType.COLLECTED_DOC_HEAD:
-                relativePositioning = "beforeend";
-                break;
-
-            case ExtStoreType.INDIVIDUALLY_DOC_FOOTER:
-            case ExtStoreType.COLLECTED_DOC_FOOTER:
-            case ExtStoreType.CENTRALIZED_DOC_FOOTER:
-                relativePositioning = "beforeend";
-                break;
-
-            case ExtStoreType.INTERNALIZED_WITHIN:
-
-            case ExtStoreType.INDIVIDUALLY_WITHIN:
-                relativePositioning = "afterbegin";
-                break
 
-            case ExtStoreType.INDIVIDUALLY_BEFORE:
-            case ExtStoreType.COLLECTED_BEFORE:
-                relativePositioning = "beforebegin";
-                break;
-
-            case ExtStoreType.INDIVIDUALLY_SEGMENT_BEGIN:
-            case ExtStoreType.COLLECTED_SEGMENT_BEGIN:
-            case ExtStoreType.CENTRALIZED_SEGMENT_BEGIN:
-                insertCallEl = refNode.closest('[data-compel-isHCompel="true"]');
-                relativePositioning = "afterbegin";
-                break;
-
-        }
+        relativePositioning = extStore.getRelativePositioning();
+        insertCallEl = extStore.getRefElement(element);
 
         insertCallEl.insertAdjacentElement(
             relativePositioning,
@@ -150,7 +108,8 @@ class PageBuilder extends ScriptAndStyleContext {
      * @todo This method/feature will work only, if an automatic reuse logic for elements/components is implemented within the jpc lib.
      * @ATTENTION DO NOT USE
      */
-    packageWithoutFramework() {
+    enableFrameworkConsole() {
+        this.#showFrameworkConsole = true;
         return this;
     }
 
@@ -178,15 +137,56 @@ class PageBuilder extends ScriptAndStyleContext {
         head.insertAdjacentElement("beforeend", meta);
     }
 
+    /**
+     * 
+     * @param {CompelExtension} extension 
+     */
+    addExtension(extension) {
+        if (extension instanceof CompelExtension) {
+            this._extensions.push(extension);
+            extension.install();
+        }
+    }
+
+    setPageTitle(title) {
+        this._apptitle = title;
+        document.querySelector("title")
+            .innerText = title;
+    }
+
+
+
     generate() {
         super.generate();
+        if (this.#showFrameworkConsole) {
+            let pageContextControlPanel = frameworkControlPanel(this._extensions);
+            pageContextControlPanel = pageContextControlPanel.generate();
+
+            document.querySelector('body')
+                .insertAdjacentElement(
+                    "afterbegin",
+                    pageContextControlPanel.html
+                );
+        }
         compelgroups = this._groups;
     }
 
+}
 
+const CommonCompelGroups = Object.freeze({
+    AUTO_REGISTRATED: "auto_registrated",
+    REUSABLE_COMPEL: "reusable",
+    HIGHER_COMPEL: "higher_compel",
 
+    OVERFLOWING: "overflowing",
+    HIDDEN_ON_START: "hidden_on_start",
 
+    IS_CONTEXT_MENU: "is_contextmenu",
+    HAS_CONTEXT_MENU: "has_contextmenu",
 
-}
+    DRAGGABLE: "draggable",
+    HAS_DRAG_EVENT: "has_drag",
+    DROP_TARGET: "droptarget",
 
+});
 const Page = new PageBuilder();

src/context/extStore.js

@@ -5,32 +5,13 @@
  */
 
 /**
- * ExtStorage := Extensions storage (type)
- * Extensions in this context are stylings and scripts (currently only javascript). 
- * internalized: the extensions are part of the element code/attributes - works obviously only with styling
- * individually: an individual tag is created/used
- * collected:    the extension can/will be collected with others in a higher position of the element hierarchy 
- *               (but not document - root)
- * centralized:  the extensions are send to the Page to be joined in a centralized tag/position of the document 
- *               (either head or footer tag)
+ * ESAggregation := Extensions Storage Aggregation (method)
  */
-const ExtStoreType = Object.freeze({
-    INTERNALIZED_WITHIN: 0,
-
-    INDIVIDUALLY_WITHIN: 1,
-    INDIVIDUALLY_BEFORE: 2,
-    INDIVIDUALLY_SEGMENT_BEGIN: 3,
-    INDIVIDUALLY_DOC_HEAD: 4,
-    INDIVIDUALLY_DOC_FOOTER: 5,
-
-    COLLECTED_BEFORE: 6,
-    COLLECTED_SEGMENT_BEGIN: 7,
-    COLLECTED_DOC_HEAD: 8,
-    COLLECTED_DOC_FOOTER: 9,
-
-    CENTRALIZED_DOC_HEAD: 10,
-    CENTRALIZED_SEGMENT_BEGIN: 11,
-    CENTRALIZED_DOC_FOOTER: 12,
+const ESAggregation = Object.freeze({
+    INTERNALIZED: "intern",
+    INDIVIDUALLY: "individual",
+    COLLECTED: "collected",
+    CENTRALIZED: "centralized"
 });
 
 /**
@@ -64,37 +45,129 @@ const OverwriteBehaviour = Object.freeze({
     MOVE_ELEMENT_SPECIFIC: "MOVE_ELEMENT_SPECIFIC"
 });
 
+
+/**
+ * Is supposed to shrink all empty strings to length 1
+ * @param {Function} func 
+ * @returns {string}
+ */
+function clearFunctionDeclarationText(func) {
+    function shrinkEmptyStrings(text) {
+        for (let i = 1; i < 10; i++) {
+            text = text.replaceAll("          ".slice(i), ' ');
+        }
+        return text;
+    }
+    return shrinkEmptyStrings(
+        func.toString()
+            .replaceAll('\n', ' ')
+            .replaceAll('\r\n', ' ')
+            .replaceAll('\n\r', ' ')
+    );
+}
+
+/**
+ * 
+ * @param {Function} func 
+ * @param {string} registrationName 
+ * @returns {string}
+ */
+function getScriptTagInjectionText(func, registrationName) {
+    let funcHasName = func.name && func.name.trim() !== '';
+    if (func.startWith('function')) {
+        let label = `function ${registrationName}`;
+        let isNameInFuncText = func.startWith(label);
+        if (funcHasName && isNameInFuncText) {
+            return func;
+        } else {
+            return [label, '(', func.split('(', 1)[1]].join('')
+        }
+    } else {
+        return `const ${registrationName} = ${func}; `;
+    }
+}
+
+/**
+ * Stores a function until generate is called.
+ * Then the additional informations of the store wil be applied 
+ * and the funcitons added to the page.
+ */
+class FunctionStoreBuffer {
+    /**
+     * Stores a function until generate is called.
+     * Then the additional informations of the store wil be applied 
+     * and the funcitons added to the page.
+     * @param {Function} func the function that will be stored
+     * @param {Array<any>} args additional arguments that will be given to the function
+     * @param {boolean} repeats weither the funciton is supposed to execute repeatedly
+     * @param {number} interval the time in milliseconds between executions
+     * @param {boolean} execAfterStart weither the function is supposed to be executed after pageload
+     * @param {number} delay the time in milliseconds the execution will be delayed
+     */
+    constructor(
+        func,
+        args = [],
+        repeats = false,
+        interval = -1,
+        execAfterStart = false,
+        delay = -1
+    ) {
+        this.func = func;
+        this.args = args;
+        this.execAfterStart = execAfterStart;
+        this.delay = delay;
+        this.repeats = repeats;
+        this.interval = interval;
+    }
+}
+
 /**
  * Extracted this super class to differentiate between 
  * internal and external store.
  */
 class ExtStorage {
-    constructor(type = null, behaviour = null) {
+    constructor(
+        aggregation = ESAggregation.INTERNALIZED,
+        position = ExtStorePosition.WITHIN,
+        behaviour = OverwriteBehaviour.DROP_NEW
+    ) {
+        /**
+         * @type {ESAggregation}
+         */
+        this._aggregation = aggregation;
         /**
-         * @type {ExtStorageType}
+         * @type {ExtStorePosition}
          */
-        this._type = (type === null ? ExtStoreType.CENTRALIZED_DOC_HEAD : type);
+        this._position = position;
         /**
          * @type {OverwriteBehaviour}
          */
-        this._overwriteBehaviour = (behaviour === null ? OverwriteBehaviour.REPLACE : behaviour);
+        this._overwriteBehaviour = behaviour;
     }
 
     /**
      * 
-     * @param {OverwriteBehaviour} behave 
-     * @returns {EXPosConfer}
+     * @param {ESAggregation} position 
      */
-    overwriteBehaviour(behave) {
-        this._overwriteBehaviour = behave;
+    setExtStoreAggregation(aggregation) {
+        this._aggregation = aggregation;
+        return this;
+    }
+    /**
+     * 
+     * @param {ExtStoreType} position 
+    */
+    setExtStorePosition(position) {
+        this._position = position;
         return this;
     }
     /**
      * 
-     * @param {ExtStoreType} type 
+     * @param {OverwriteBehaviour} behave 
+     * @returns {EXPosConfer}
      */
-    setExtStoreType(type) {
-        this._type = type;
+    setOverwriteBehaviour(behave) {
+        this._overwriteBehaviour = behave;
         return this;
     }
 
@@ -118,6 +191,17 @@ class ExtStorage {
         return this._type === null || this._overwriteBehaviour === null;
     }
 
+    /**
+     * 
+     * @returns {boolean}
+     */
+    isNotInternalOrIndividual() {
+        return !(
+            this._aggregation === ESAggregation.INTERNALIZED
+            || this._aggregation === ESAggregation.INDIVIDUALLY
+        );
+    }
+
     /**
      * 
      * @param {ExtStorage} otherExtStore 
@@ -136,6 +220,7 @@ class ExtStorage {
     }
 
     /**
+     * @todo check if still implemented correctly
      * Takes the singleValue and an ExtStore object to copy all values from.
      * Then the singleValue will be compared to the three enums for the type of value.
      * After the type is identified the corresponding (copied) value will be updated.
@@ -177,7 +262,7 @@ class ExtStorage {
      * 
      * @returns {ExtStorage} this extStore (updated if rules were used, that don't work for functions)
      */
-    updateForFunctions() {
+    setupForFunctions() {
         if (this._type === ExtStoreType.INTERNALIZED_WITHIN) {
             console.log("Updated Functions extstore from INTERNALIZED_WITHIN to INDIVIDUALLY_BEFORE")
             this._type = ExtStoreType.INDIVIDUALLY_BEFORE;
@@ -189,36 +274,37 @@ class ExtStorage {
      * 
      * @returns {ExtStorage}
      */
-    updateForGeneralStyling() {
-        switch (this._type) {
+    setupForGeneralStyling() {
+        if (this === ExtStoreType.INTERNALIZED_WITHIN) {
+            this._position = ExtStorePosition.WITHIN;
+            this._aggregation = ESAggregation.INTERNALIZED;
+            return this;
+        }
 
-            case ExtStoreType.INTERNALIZED_WITHIN:
-                break;
+        this._position = ExtStorePosition.DOC_HEAD;
 
+        switch (this) {
             case ExtStoreType.INDIVIDUALLY_WITHIN:
             case ExtStoreType.INDIVIDUALLY_BEFORE:
             case ExtStoreType.INDIVIDUALLY_SEGMENT_BEGIN:
             case ExtStoreType.INDIVIDUALLY_DOC_FOOTER:
-                this._type = ExtStoreType.INDIVIDUALLY_DOC_HEAD;
-
             case ExtStoreType.INDIVIDUALLY_DOC_HEAD:
+                this._aggregation = ESAggregation.INDIVIDUALLY;
                 break;
 
             case ExtStoreType.COLLECTED_BEFORE:
             case ExtStoreType.COLLECTED_SEGMENT_BEGIN:
             case ExtStoreType.COLLECTED_DOC_FOOTER:
-                this._type = ExtStoreType.COLLECTED_DOC_HEAD;
-
             case ExtStoreType.COLLECTED_DOC_HEAD:
+                this._aggregation = ESAggregation.COLLECTED;
+
+                this._aggregation = ESAggregation.COLLECTED;
                 break;
             case ExtStoreType.CENTRALIZED_DOC_HEAD:
-                break
-
-            case ExtStoreType.CENTRALIZED_SEGMENT_BEGIN:
+            case ExtStoreType.CENTRALIED_SEGMENT_BEGIN:
             case ExtStoreType.CENTRALIZED_DOC_FOOTER:
             default:
-                this._type = ExtStoreType.CENTRALIZED_DOC_HEAD;
-
+                this._aggregation = ESAggregation.CENTRALIZED;
                 break
         }
 
@@ -230,7 +316,7 @@ class ExtStorage {
      * Currently it works the same as the "updateForFunctions()" since the same rules won't work.
      * @returns {ExtStorage} this extStore (updated if rules were used, that won't work for StyleClasses)
      */
-    updateForStyleClass() {
+    setupForStyleClass() {
         /*
         const positionedAfter = [
             COLLECTED_DOC_FOOTER,
@@ -243,10 +329,163 @@ class ExtStorage {
         }
         */
 
-        return this.updateForGeneralStyling();
+        return this.setupForGeneralStyling();
+    }
+
+    /**
+     * 
+     * @returns {InsertPosition}
+     */
+    getRelativePositioning() {
+        switch (this._position) {
+            case ExtStorePosition.BEFORE:
+                return "beforebegin"
+            case ExtStorePosition.SEGMENT_BEGIN:
+                return "afterbegin";
+            case ExtStorePosition.DOC_HEAD:
+            case ExtStorePosition.DOC_FOOTER:
+                return "beforeend"
+            case ExtStorePosition.WITHIN:
+            default:
+                return "afterbegin";
+        }
+    }
+
+    /**
+     * Expects a reference element for the positions before and segment_begin.
+     * Otherwise will return head, footer or element accordingly.
+     * @param {HTMLLIElement|Component} element 
+     * @returns {HTMLElement}
+     */
+    getRefElement(element = null) {
+        let ensuredElement = element;
+        if (!element) {
+            console.log("ExtStorePosition defines a relative position, but no reference Element is given - using head!")
+            return document.querySelector('head');
+        }
+
+        if (element instanceof Component) {
+            ensuredElement = element.generate().html;
+        }
+
+        switch (this._position) {
+            case ExtStorePosition.BEFORE:
+            case ExtStorePosition.SEGMENT_BEGIN:
+                return ensuredElement.closest('[data-compel-isHCompel="true"]');
+            case ExtStorePosition.DOC_HEAD:
+                return document.querySelector('head');
+            case ExtStorePosition.DOC_FOOTER:
+                return document.querySelector('footer');
+            case ExtStorePosition.WITHIN:
+            default:
+                return ensuredElement;
+        }
+    }
+
+    insertElementAccordingly(element) {
+        this.getRefElement(element)
+            .insertAdjacentElement(
+                this.getRelativePositioning(),
+                this.getRefElement(element)
+            )
+    }
+
+    /**
+     * 
+     * @returns {function(SStoreDefinition,HTMLElement,number): boolean}
+     */
+    getStylingDistribution() {
+        switch (this._aggregation) {
+            case ESAggregation.INDIVIDUALLY:
+                return function (ssd, orgElement, counter) {
+                    let container = generateAndFillStyleTag([ssd]);
+                    container.setAttribute("data-compel-individually-nr", counter++);
+                    Page.addElementToPage(container, this);
+                    return false;
+                }
+            case ESAggregation.COLLECTED:
+                return function (ssd, orgElement) {
+                    return true;
+                }
+            case ESAggregation.CENTRALIZED:
+                return function (ssd, orgElement) {
+                    Page.registerStyling(ssd._identifier, ssd._definition);
+                    return false;
+                }
+
+            case ESAggregation.INTERNALIZED:
+            default:
+                return function (ssd, orgElement) {
+                    fillAttrsInContainerByCb(
+                        ssd._definition,
+                        orgElement,
+                        (key, val, el) => { el.style[key] = val; }
+                    );
+                    return false;
+                }
+        }
+    }
+
+    /**
+     * 
+     * @returns {function(SStoreDefinition, Map<ExtStorage, Array<SStoreDefinition>, number): boolean}
+     */
+    getFunctionDistribution() {
+        switch (this._aggregation) {
+            case ESAggregation.INTERNALIZED:
+            case ESAggregation.INDIVIDUALLY:
+                return function (ssd, counter) {
+                    let container = document.createElement("script");
+                    container.setAttribute("data-compel-individually-nr", counter++);
+                    container.innerText += getScriptTagInjectionText(
+                        clearFunctionDeclarationText(ssd._definition),
+                        ssd._identifier
+                    );
+                    Page.addElementToPage(container, refESType);
+                    return false;
+                }
+            case ESAggregation.COLLECTED:
+                return function () {
+                    return true;
+                }
+
+            case ESAggregation.CENTRALIZED:
+            default:
+                return function (ssd) {
+                    Page.registerPageFunction(ssd._identifier, ssd._definition);
+                    return false;
+                }
+        }
     }
 }
 
+
+/**
+ * ExtStorage := Extensions storage (type)
+ * Extensions in this context are stylings and scripts (currently only javascript). 
+ * internalized: the extensions are part of the element code/attributes - works obviously only with styling
+ * individually: an individual tag is created/used
+ * collected:    the extension can/will be collected with others in a higher position of the element hierarchy 
+ *               (but not document - root)
+ * centralized:  the extensions are send to the Page to be joined in a centralized tag/position of the document 
+ *               (either head or footer tag)
+ */
+const ExtStoreType = Object.freeze({
+    INTERNALIZED_WITHIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.WITHIN),
+    INDIVIDUALLY_WITHIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.WITHIN),
+    INDIVIDUALLY_BEFORE: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.BEFORE),
+    INDIVIDUALLY_SEGMENT_BEGIN: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.SEGMENT_BEGIN),
+    INDIVIDUALLY_DOC_HEAD: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.DOC_HEAD),
+    INDIVIDUALLY_DOC_FOOTER: new ExtStorage(ESAggregation.INDIVIDUALLY, ExtStorePosition.DOC_FOOTER),
+    COLLECTED_BEFORE: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.BEFORE),
+    COLLECTED_SEGMENT_BEGIN: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.SEGMENT_BEGIN),
+    COLLECTED_DOC_HEAD: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.DOC_HEAD),
+    COLLECTED_DOC_FOOTER: new ExtStorage(ESAggregation.COLLECTED, ExtStorePosition.DOC_FOOTER),
+    CENTRALIZED_DOC_HEAD: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.DOC_HEAD),
+    CENTRALIZED_SEGMENT_BEGIN: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.SEGMENT_BEGIN),
+    CENTRALIZED_DOC_FOOTER: new ExtStorage(ESAggregation.CENTRALIZED, ExtStorePosition.DOC_FOOTER)
+});
+
 /**
  * Style or Script Store Definition
  * @property {string} _identifier;

src/context/framework-controls.js

@@ -0,0 +1,66 @@
+/**
+ * This file is part of the jps-like-websites lib
+ * URL: https://git.labos.goip.de/chris/jpc-like-websites
+ * @copyright by its creator Christian Martin 
+ */
+
+
+function frameworkControlPanel(
+    extensions = []
+) {
+    return builder.row()
+        .alignment(Alignment.CENTER)
+        .arrangement(Arrangement.CENTER)
+        .isHigherComponent()
+        .setStylingsStorage(ExtStoreType.INTERNALIZED_WITHIN)
+        .modifier(
+            new Modifier()
+                .fillMaxWidth()
+                .background(MaterialFiveHundredlColors.ORANGE)
+                .dimensions(
+                    new Dimensions()
+                        .height(200)
+                )
+                .border(
+                    new Border(3)
+                        .color(Colors.goldenrod_3)
+                )
+                .linkPadding(4)
+        )
+        .childContext([
+            builder.column()
+                .modifier(new Modifier().fillMaxHeight())
+                .childContext([
+                    builder.label().text("Installed Extensions:")
+                    ,
+                    builder.column()
+                        .overflow()
+                        .modifier(
+                            new Modifier()
+                                .linkPadding(4).ensureModifier()
+                                .linkBorder(1)
+                        )
+                        .childContext(
+                            extensions.map(
+                                /**
+                                 * 
+                                 * @param {CompelExtension} ext 
+                                 * @returns {Component}
+                                 */
+                                ext => builder.span().text(ext.diplayTitle)
+                            )
+                        )
+                ])
+            ,
+            builder.div()
+                .alignment(Alignment.CENTER)
+                .arrangement(Arrangement.CENTER)
+                .childContext([
+                    builder.label()
+                        .text("to generate and download page displayed below click on 'generate'")
+                    ,
+                    builder.button()
+                        .text("generate")
+                ])
+        ]);
+}

src/context/generalHelpers.js

@@ -79,40 +79,41 @@ class ObjectAccessObject {
 }
 
 
-
-/**
- * 
- * @param {string} autocompelSelector 
- * @returns {boolean} for true element is now hidden and false it is not hidden.
- */
-function toggleElementVisibility(autocompelSelector, ensureHidden = false) {
-    /**
-     * @type {HTMLElement}
-     */
-    let el = document.querySelector(autocompelSelector);
-    let name = el.getAttribute("data-autocompel");
-
-    console.log("De-/hiding", name, autocompelSelector);
-    console.log(el);
-
-
-    el.classList.toggle("compel-mech-hidden");
+function toggleElementVisibility(element, ensureHidden = false) {
+    element.classList.toggle("compel-mech-hidden");
 
     let isNowHidden = false;
 
-    if (el.hasAttribute("hidden")) {
-        el.removeAttribute("hidden");
-        el.style["display"] = "flex";
+    if (element.hasAttribute("hidden")) {
+        element.removeAttribute("hidden");
+        element.style["display"] = "flex";
         isNowHidden = false;
     } else {
-        el.setAttribute("hidden", "hidden");
-        el.style.removeProperty("display");
+        element.setAttribute("hidden", "hidden");
+        element.style.removeProperty("display");
         isNowHidden = true;
     }
 
     if (ensureHidden && !isNowHidden) {
-        return toggleElementVisibility(autocompelSelector)
+        return toggleSelectorElementVisibility(selector)
     } else {
         return isNowHidden;
     }
 }
+
+/**
+ * 
+ * @param {string} selector 
+ * @returns {boolean} for true element is now hidden and false it is not hidden.
+ */
+function toggleSelectorElementVisibility(selector, ensureHidden = false) {
+    /**
+     * @type {HTMLElement}
+     */
+    let el = document.querySelector(selector);
+    let name = el.getAttribute("data-autocompel");
+
+    console.log("De-/hiding", name, selector);
+
+    return toggleElementVisibility(el, ensureHidden);
+}

src/context/scriptAndStyleContext.js

@@ -4,82 +4,6 @@
  * @copyright by its creator Christian Martin 
  */
 
-
-/**
- * Is supposed to shrink all empty strings to length 1
- * @param {Function} func 
- * @returns {string}
- */
-function clearFunctionDeclarationText(func) {
-    function shrinkEmptyStrings(text) {
-        for (let i = 1; i < 10; i++) {
-            text = text.replaceAll("          ".slice(i), ' ');
-        }
-        return text;
-    }
-    return shrinkEmptyStrings(
-        func.toString()
-            .replaceAll('\n', ' ')
-            .replaceAll('\r\n', ' ')
-            .replaceAll('\n\r', ' ')
-    );
-}
-
-/**
- * 
- * @param {Function} func 
- * @param {string} registrationName 
- * @returns {string}
- */
-function getScriptTagInjectionText(func, registrationName) {
-    let funcHasName = func.name && func.name.trim() !== '';
-    if (func.startWith('function')) {
-        let label = `function ${registrationName}`;
-        let isNameInFuncText = func.startWith(label);
-        if (funcHasName && isNameInFuncText) {
-            return func;
-        } else {
-            return [label, '(', func.split('(', 1)[1]].join('')
-        }
-    } else {
-        return `const ${registrationName} = ${func}; `;
-    }
-}
-
-/**
- * Stores a function until generate is called.
- * Then the additional informations of the store wil be applied 
- * and the funcitons added to the page.
- */
-class FunctionStoreBuffer {
-    /**
-     * Stores a function until generate is called.
-     * Then the additional informations of the store wil be applied 
-     * and the funcitons added to the page.
-     * @param {Function} func the function that will be stored
-     * @param {Array<any>} args additional arguments that will be given to the function
-     * @param {boolean} repeats weither the funciton is supposed to execute repeatedly
-     * @param {number} interval the time in milliseconds between executions
-     * @param {boolean} execAfterStart weither the function is supposed to be executed after pageload
-     * @param {number} delay the time in milliseconds the execution will be delayed
-     */
-    constructor(
-        func,
-        args = [],
-        repeats = false,
-        interval = -1,
-        execAfterStart = false,
-        delay = -1
-    ) {
-        this.func = func;
-        this.args = args;
-        this.execAfterStart = execAfterStart;
-        this.delay = delay;
-        this.repeats = repeats;
-        this.interval = interval;
-    }
-}
-
 /**
  * @abstract
  * Class adds function and style storing properties to the context (PageBuilder).
@@ -205,9 +129,13 @@ class ScriptAndStyleContext {
      * @todo implement extStore logic
      * 
      * @param {string} elementIdentifier The element identifier
-     * @param {map<string, string>} styleRuleMap The Styling rules/values
+     * @param {map<string, string>|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
         }
@@ -274,4 +202,4 @@ class ScriptAndStyleContext {
             head.appendChild(funcTag);
         }
     }
-}
+}

src/extensions/extension.js

@@ -0,0 +1,53 @@
+/**
+ * This file is part of the jps-like-websites lib
+ * URL: https://git.labos.goip.de/chris/jpc-like-websites
+ * @copyright by its creator Christian Martin 
+ */
+
+/**
+ * Defines an extension that can be added to the jpclw-framework
+ */
+class CompelExtension {
+    /**
+     * @type {string}
+     */
+    name;
+    /**
+     * @type {string}
+     */
+    diplayTitle;
+    /**
+     * @type {Array<SStoreDefinition>}
+     */
+    stylings;
+    /**
+     * @type {Array<SStoreDefinition>}
+     */
+    functions;
+    /**
+     * Predefined components. Usually of a higher (constructed) kind.
+     * @type {Object}
+     */
+    components;
+    /**
+     * Extensions for/to the Page or the framework in general. 
+     * @type {Object}
+     */
+    frameworkControls;
+    /**
+     * Additional elements for the builder (likely referencing components)
+     * @type {Object}
+     */
+    builderElements;
+
+    /**
+     * defines how jpc-like-websites is to be extended and executes that extension
+     */
+    install() {
+        builder.extensions = Object.assign(builder.extensions, this.builderElements);
+
+        for (const key of Object.keys(this.stylings)) {
+            Page.registerStyling(key, this.stylings[key]);
+        }
+    }
+}

src/modifications/contextMenu.js

@@ -0,0 +1,69 @@
+/**
+ * This file is part of the jps-like-websites lib
+ * URL: https://git.labos.goip.de/chris/jpc-like-websites
+ * @copyright by its creator Christian Martin 
+ */
+
+/**
+ * Default implementation of a contextmenu-behaviour
+ */
+const DefaultContextMenu = {
+    openContextMenuAction: function (identifier, refPos) {
+        if (!refPos) {
+            refPos = function (event) {
+                return new Sides()
+                    .left(event.pageX)
+                    .top(event.pageY);
+            }
+        }
+
+        return function (event) {
+            event.preventDefault();
+
+            if (refPos instanceof Function) {
+                refPos = refPos(event);
+            }
+
+            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+
+            menu.style.left = `${refPos.getByIndex(SideDirections.LEFT)}px`;
+            menu.style.top = `${refPos.getByIndex(SideDirections.TOP)}px`;
+
+            toggleElementVisibility(menu, true);
+            toggleElementVisibility(menu);
+
+            document.addEventListener(
+                "click",
+                DefaultContextMenu.hideOnClickOutsideBoundsAction(identifier)
+            );
+            document.addEventListener(
+                "keyup",
+                DefaultContextMenu.hideOnEscapeAction(identifier)
+            );
+        }
+
+    }
+    ,
+    hideOnEscapeAction: function (identifier) {
+        return function (event) {
+            if (event.key === "Escape") {
+                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+                toggleElementVisibility(menu, true);
+                document.removeEventListener("keyup");
+            }
+        }
+    }
+    ,
+    hideOnClickOutsideBoundsAction: function (identifier) {
+        return function (event) {
+            let menu = document.querySelector(`[data-autocompel="${identifier}"`);
+
+            let area = getEnclosingBounds(menu);
+
+            if (!areXYInArea(area, event.clientX, event.clientY)) {
+                toggleElementVisibility(menu, true);
+                document.removeEventListener("click")
+            }
+        }
+    }
+};

src/modifications/dragAndDrop.js

@@ -1,3 +1,9 @@
+/**
+ * This file is part of the jps-like-websites lib
+ * URL: https://git.labos.goip.de/chris/jpc-like-websites
+ * @copyright by its creator Christian Martin 
+ */
+
 const EventDrag = Object.freeze({
     OVER: "over",
     START: "start",
@@ -6,19 +12,118 @@ const EventDrag = Object.freeze({
     LEAVE: "leave"
 });
 
-function dropEventHandler(event, selector) {
-    event.preventDefault();
+/**
+ * Defines default functions to setup a drag/drop behaviour
+ */
+class DragAndDropImplementation {
+    _isMngmtElNeeded;
+
+    ensureManagementElementExists() {
+
+    }
+
+    getManagementElement() {
+
+    }
+
+    /**
+     * 
+     * @param {string} datakey 
+     * @param {string} selector 
+     * @returns {Function}
+     */
+    dragStartAction(datakey, selector) {
+        return function (event) {
+            console.log("DragEvent", event, "on", selector);
+            event.dataTransfer
+                .setData(
+                    datakey,
+                    JSON.stringify({
+                        ["selector"]: selector,
+                        ["relDims"]: new TwoDimPoint(
+                            event.clientX - event.target.getBoundingClientRect().left,
+                            event.clientY - event.target.getBoundingClientRect().top
+                        )
+                    })
+                );
+        }
+    }
+
+    dragEventAction(selector) {
+        return function (event) {
+
+        }
+    }
+
+
+    /**
+     * 
+     * @param {string} datakey 
+     * @param {string} selector 
+     * @returns {Function}
+     */
+    dropEventAction(datakey, selector) {
+        return function (event) {
+            event.preventDefault();
+
+            let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
+            let draggedElement = document.querySelector(draggedData.selector);
+
+            let target = event.target
+                .closest(selector);
 
-    let draggedKey = event.dataTransfer.getData("text/html");
-    let draggedElement = document.querySelector(`[data-autocompel="${draggedKey}"]`);
+            console.log("Default drop event");
 
-    let target = event.target
-        .closest('.' + selector);
+            //if (![...target.childNodes].includes(draggedElement)) {
+            target.appendChild(draggedElement);
+            //}
+        }
+    }
+};
 
-    //if (![...target.childNodes].includes(draggedElement)) {
-    target.appendChild(draggedElement);
-    //}
+
+const DADInPlace = new DragAndDropImplementation();
+DADInPlace.dropEventAction = function (datakey, selector) {
+    /**
+     * @param {Event} event 
+     */
+    return function (event) {
+        event.preventDefault();
+
+        let draggedData = JSON.parse(event.dataTransfer.getData(datakey));
+        let draggedElement = document.querySelector(draggedData.selector);
+
+        let target = event.target
+            .closest(selector);
+
+        let dimsDraggedEl = new Dimensions()
+            .width(draggedElement.offsetWidth)
+            .height(draggedElement.offsetHeight);
+
+        let pagePoint = new TwoDimPoint(
+            event.clientX,
+            event.clientY
+        );
+
+        let parentPagePoint = new TwoDimPoint(
+            target.getBoundingClientRect().left,
+            target.getBoundingClientRect().top
+        );
+
+        draggedElement.style["width"] = dimsDraggedEl._fFirst + "px";
+        draggedElement.style["height"] = dimsDraggedEl._fSecond + "px";
+
+        // x page to relative is (parent-page), then -rel
+
+        let dropPosition = pagePoint
+            .minusTDP(parentPagePoint)
+            .minusTDP(draggedData.relDims);
+
+        draggedElement.style.position = "relative";
+        draggedElement.style.left = dropPosition.x + "px";
+        draggedElement.style.top = dropPosition.y + "px";
+        //if (![...target.childNodes].includes(draggedElement)) {
+        target.appendChild(draggedElement);
+        //}
+    }
 }
-const DADGroups = Object.freeze({
-    DEFAULT: new DragAndDropGroup(),
-});

src/modifier.js

@@ -97,11 +97,11 @@ class Modifier {
         if (parentalPadding) {
             let pval = parentalPadding.getValues();
             if (pval["horizontal"] > 0) {
-                this._modifications = updateDirection("width", this._modifications, pval["horizontal"]+parentalPadding._unit);
+                this._modifications = updateDirection("width", this._modifications, pval["horizontal"] + parentalPadding._unit);
             }
 
             if (pval["vertical"] > 0) {
-                this._modifications = updateDirection("height", this._modifications, pval["vertical"]+parentalPadding._unit);
+                this._modifications = updateDirection("height", this._modifications, pval["vertical"] + parentalPadding._unit);
             }
         }
 
@@ -165,21 +165,33 @@ class Modifier {
 
     /**
      * Sets the background-color as a rgb color.
+     * If no color is given/specified the styling will be set to "inherit" 
+     * and use the color setting from (one of) the parent.
      * @param {Color} color 
      * @returns {Modifier} this modifier object
      */
     background(color) {
-        this._modifications["background-color"] = color.cssRGBString();
+        this._modifications["background-color"] = (
+            color
+                ? color.cssRGBString()
+                : "inherit"
+        );
         return this;
     }
 
     /**
-     * Sets the color as a rgb color.
+     * Sets the color as a rgb color. 
+     * If no color is given/specified the styling will be set to "inherit" 
+     * and use the color setting from (one of) the parent.
      * @param {Color} color 
      * @returns {Modifier} this modifier object
      */
     color(color) {
-        this._modifications["color"] = color.cssRGBString();
+        this._modifications["color"] = (
+            color
+                ? color.cssRGBString()
+                : "inherit"
+        );
         return this;
     }
 
@@ -187,13 +199,17 @@ class Modifier {
      * Adds the modifications of the given Modifier to current Modifier.
      * This is especailly used in the cases of extending existing/pre defined 
      * Components.
+     * 
      * CAUTION matching existing modifications will be overwritten. 
+     * 
+     * @todo finish second parameter "modifications" - logic
+     * 
      * @param modifier The "new" Modifier
      * @returns {Modifier} The "old/current" Modifier, 
      * extended with the modifications of the given Modifier.
      */
     join(modifier, modifications = {}) {
-        var keys = Object.keys(modifier.ensureModifier()._modifications);
+        let keys = Object.keys(modifier.ensureModifier()._modifications);
         for (let i = 0; i < keys.length; i++) {
             /* if (!this._modifications.hasOwnProperty(keys[i])) */
             this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]];
@@ -221,6 +237,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 
@@ -328,9 +356,20 @@ class Modifier {
 
 }
 
+/**
+ * @extends Modifier
+ * @inheritdoc
+ */
 class ChainableModifier extends Modifier {
+    /**
+     * @type {Component}
+     */
     _component;
 
+    /**
+     * 
+     * @param {Component} component 
+     */
     constructor(component) {
         super();
         this._component = component;

src/sizeSide/border.js

@@ -52,6 +52,10 @@ const Define = Object.freeze({
     color: new BorderDefinition().color
 })
 
+/**
+ * @inheritdoc
+ * @extends Sides
+ */
 class Border extends Sides {
     constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) {
         super(0, defaultUnit);
@@ -75,6 +79,7 @@ class Border extends Sides {
      * 
      * @param {string} key 
      * @param {*} value 
+     * @returns {Border}
      */
     setOnDirections(key, value) {
         let orderedAttributes = this.getOrderedAttributes()
@@ -110,6 +115,11 @@ class Border extends Sides {
         return this;
     }
 
+    /**
+     * 
+     * @param {Shape} shape 
+     * @returns {Border}
+     */
     shape(shape) {
         this._shape = shape;
         return this;
@@ -162,14 +172,17 @@ class Border extends Sides {
 
                 return [
                     { key: `border-${names[i]}-width`, value: bdef._width + this._unit },
-                    { key: `border-${names[i]}-color`, value: bdef._color },
+                    { key: `border-${names[i]}-color`, value: bdef._color.cssRGBString() },
                     { key: `border-${names[i]}-style`, value: bdef._style }
                 ]
             })
     }
 }
 
-
+/**
+ * @inheritdoc
+ * @extends Border
+ */
 class BorderChain extends Border {
     constructor(modifier){
         super();

src/sizeSide/dimensions.js

@@ -6,8 +6,16 @@
 
 /**
  * Simple Dimensions container for the height and width in pixels.
+ * 
+ * @inheritdoc
+ * @extends DirectionUnitDependentAttribute
  */
 class Dimensions extends DirectionUnitDependentAttribute {
+    /**
+     * 
+     * @param {number} defaultValue 
+     * @param {SizeUnits} defaultUnit 
+     */
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
         super();
         this._unit = defaultUnit;
@@ -35,6 +43,11 @@ class Dimensions extends DirectionUnitDependentAttribute {
         return this;
     }
 
+    /**
+     * 
+     * @param {number} size 
+     * @returns {Dimensions}
+     */
     all(size) {
         return this.width(size).height(size);
     }
@@ -44,6 +57,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,11 +76,33 @@ class Dimensions extends DirectionUnitDependentAttribute {
             return []
         }
     }
-}
 
+    /**
+     * 
+     * @returns {TwoDimPoint}
+     */
+    toTwoDimPoint() {
+        return new TwoDimPoint(
+            this._fFirst,
+            this._fSecond
+        );
+    }
+}
 
+/**
+ * @inheritdoc
+ * @extends Dimensions
+ */
 class DimensionsChain extends Dimensions {
+    /**
+     * @type {Modifier|ChainableModifier}
+     */
     _modifier;
+
+    /**
+     * 
+     * @param {Modifier|ChainableModifier} modifier 
+     */
     constructor(modifier) {
         super();
         this._modifier = modifier;

src/sizeSide/shapes.js

@@ -3,15 +3,10 @@
  * URL: https://git.labos.goip.de/chris/jpc-like-websites
  * @copyright by its creator Christian Martin 
  */
-/**
- * This file is part of the jps-like-websites lib
- * URL: https://git.labos.goip.de/chris/jpc-like-websites
- * COPYRIGHT and LICENCE are owned by its creator Christian Martin 
- * Copy, altering or distribution without the allowance of the owner are prohibited
- */
 
 /**
- * 
+ * @extends DirectionUnitDependentAttribute
+ * @inheritdoc
  */
 class Shape extends DirectionUnitDependentAttribute {
     constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
@@ -117,6 +112,10 @@ class Shape extends DirectionUnitDependentAttribute {
     }
 }
 
+/**
+ * @inheritdoc
+ * @extends Shape
+ */
 class ShapeChain extends Shape {
     _modifier;
     constructor(modifier) {
@@ -125,17 +124,17 @@ class ShapeChain extends Shape {
     }
 
     /**
-       * 
-       * @returns {Modifier|ChainableModifier}
-       */
+     * 
+     * @returns {Modifier|ChainableModifier}
+     */
     toModifier() {
         return this._modifier
             .clip(this);
     }
     /**
-      * 
-      * @returns {Modifier|ChainableModifier}
-      */
+     * 
+     * @returns {Modifier|ChainableModifier}
+     */
     ensureModifier() {
         return this.toModifier()
     }

src/sizeSide/siding.js

@@ -5,7 +5,7 @@
  */
 
 /**
- * 
+ * Enum providing predefined set of Size-Units
  */
 const SizeUnits = Object.freeze({
     PIXEL: "px",
@@ -13,7 +13,7 @@ const SizeUnits = Object.freeze({
 })
 
 /**
- * 
+ * @abstract
  */
 class DirectionUnitDependentAttribute {
     _unit;
@@ -159,6 +159,8 @@ const CornerTransitionDirection = Object.freeze({
 });
 
 /**
+ * @inheritdoc
+ * @extends DirectionUnitDependentAttribute
  * 
  */
 class Sides extends DirectionUnitDependentAttribute {
@@ -253,7 +255,8 @@ class Sides extends DirectionUnitDependentAttribute {
 }
 
 /**
- * 
+ * @inheritdoc
+ * @extends Sides
  */
 class PaddingChain extends Sides {
     _modifier;
@@ -312,6 +315,9 @@ class PaddingChain extends Sides {
     }
 }
 
+/**
+ * 
+ */
 class TwoDimPoint {
     /**
      * 
@@ -322,6 +328,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;
+    }
 }
 
 /**
@@ -396,6 +464,7 @@ function isPointInArea(point, area, tolerance = 0, usePercentage = false) {
 /**
  * 
  * @param {HTMLElement} element 
+ * @returns {Object<SideDirections, number}
  */
 function getEnclosingBounds(element) {
     let area = element.getBoundingClientRect();

upcoming.md

@@ -0,0 +1,8 @@
+# Upcoming Features/Changes
+
+- [ ] externalize generator and corresponding functions
+  - [ ] make the generator modular
+  - [ ] include several generator-opttions into frameworkConsole
+  - [ ] (re-) enable "packageWithoutFramework"
+- [ ] check naming and setup of PageBuilder-class
+- [ ] move builder.page to PageBuilder