From b7fff8604ed9a1ddd8a7a418232aefa7ae8c2fe7 Mon Sep 17 00:00:00 2001
From: chris <chris@denkblock.mas>
Date: Fri, 28 Feb 2025 22:25:08 +0100
Subject: [PATCH] REFA: Moved alignment and arrangement setting

---
 src/component.js                              |  6 +--
 src/componentAncestry/addStyleAndFunctions.js | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/component.js b/src/component.js
index 86e92d0..cad5fcf 100644
--- a/src/component.js
+++ b/src/component.js
@@ -44,6 +44,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 = [];
     }
@@ -498,11 +499,6 @@ class Component extends StyleAndScriptStoringComponent {
         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;
 
 
         let collectedWenities = [];
diff --git a/src/componentAncestry/addStyleAndFunctions.js b/src/componentAncestry/addStyleAndFunctions.js
index 38c3e06..0410147 100644
--- a/src/componentAncestry/addStyleAndFunctions.js
+++ b/src/componentAncestry/addStyleAndFunctions.js
@@ -53,6 +53,50 @@ class StyleAndScriptStoringComponent extends ModifiableComponent {
         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.