REFA: component attributes

removed generic/unused file componendAttribute.js
moved border into own file,
changed its super class to siding instead of shape

src/sizeSide/border.js

@@ -0,0 +1,162 @@
+
+const LineStyles = Object.freeze({
+    dotted: "dotted",
+    dashed: "dashed",
+    solid: "solid",
+    double: "double",
+    groove: "groove",
+    ridge: "ridge",
+    inset: "inset",
+    outset: "outset",
+    none: "none",
+    hidden: "hidden"
+})
+
+class BorderDefinition {
+    constructor(width = 0, color = Colors.black, style = LineStyles.solid) {
+        this._width = width;
+        this._color = color;
+        this._style = style;
+    }
+
+    width(width) {
+        this._width = width;
+        return this;
+    }
+    color(color) {
+        this._color = color;
+        return this;
+    }
+    style(style) {
+        this._style = style;
+        return this;
+    }
+    join(def) {
+        Object.keys(def)
+            .forEach(key => this[key] = def[key]);
+        return this;
+    }
+}
+
+const Define = Object.freeze({
+    width: new BorderDefinition().width,
+    style: new BorderDefinition().style,
+    color: new BorderDefinition().color
+})
+
+class Border extends Sides {
+    constructor(width = 0, color = Colors.black, style = LineStyles.solid, defaultUnit = SizeUnits.PIXEL, shape = Shapes.Rectangle) {
+        super(0, defaultUnit);
+        this._fFirst = new BorderDefinition(width, color, style);
+        this._fSecond = new BorderDefinition(width, color, style);
+        this._fThird = new BorderDefinition(width, color, style);
+        this._fForth = new BorderDefinition(width, color, style);
+        this._shape = shape;
+    }
+
+    setByIndex(index, value) {
+        if (value instanceof BorderDefinition) {
+            this.getByIndex(index).join(value)
+        } else {
+            this.getByIndex(index)._width = value
+        }
+        return this;
+    }
+
+    /**
+     * 
+     * @param {string} key 
+     * @param {*} value 
+     */
+    setOnDirections(key, value) {
+        let orderedAttributes = this.getOrderedAttributes()
+        for (let i = 0; i < this.getOrderedAttributes.length; i++) {
+            orderedAttributes[i][key] = value;
+        }
+        return this;
+    }
+
+    /**
+     * 
+     * @param {number} width 
+     * @returns {Border}
+     */
+    width(width) {
+        this._fFirst._width = width;
+        this._fSecond._width = width;
+        this._fThird._width = width;
+        this._fForth._width = width;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {*} color 
+     * @returns {Border}
+    */
+    color(color) {
+        this._fFirst._color = color;
+        this._fSecond._color = color;
+        this._fThird._color = color;
+        this._fForth._color = color;
+        return this;
+    }
+
+    shape(shape) {
+        this._shape = shape;
+        return this;
+    }
+
+    /**
+     * Sets the border-style of all sides to the given. 
+     * @param {LineStyles} lineStyle style of the border
+     * @returns {Border}
+     */
+    setStyleAll(lineStyle) {
+        this._fFirst._style = lineStyle;
+        this._fSecond._style = lineStyle;
+        this._fThird._style = lineStyle;
+        this._fForth._style = lineStyle;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {LineStyles} lineStyle 
+     * @param {*} sidingRefSide 
+     * @returns {Border}
+     */
+    setLineStyle(lineStyle, sidingRefSide) {
+        this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
+        return this;
+    }
+
+    /**
+     * 
+     * @param {Map<SidingRefSides, LineStyles} refSideStyleMap 
+     * @returns {Border}
+     */
+    setLineStyles(refSideStyleMap) {
+        let rkeys = Object.keys(refSideStyleMap);
+        for (let i = 0; i < array.length; i++) {
+            this._sidingStyles.setBySidingRef(rkeys[i]) = refSideStyleMap[rkeys[i]];
+        }
+        return this;
+    }
+
+
+    toModifications() {
+        let names = ["left", "top", "right", "bottom"];
+        return this.getOrderedAttributes()
+            .flatMap((bdef, i) => {
+                if (bdef.width == 0)
+                    return []
+
+                return [
+                    { key: `border-${names[i]}-width`, value: bdef._width + this._unit },
+                    { key: `border-${names[i]}-color`, value: bdef._color },
+                    { key: `border-${names[i]}-style`, value: bdef._style }
+                ]
+            })
+    }
+}  

src/sizeSide/shapes.js

@@ -140,85 +140,3 @@ const Shapes = Object.freeze({
     RoundedCorner: new Shape(),
     Circle: new Shape(49, SizeUnits.PERCENT)
 })
-
-const LineStyles = Object.freeze({
-    dotted: "dotted",
-    dashed: "dashed",
-    solid: "solid",
-    double: "double",
-    groove: "groove",
-    ridge: "ridge",
-    inset: "inset",
-    outset: "outset",
-    none: "none",
-    hidden: "hidden"
-})
-
-class Border extends Shape {
-    _color;
-    _sidingStyles;
-    _width;
-
-    constructor(width = 1) {
-        super();
-        this._width = width;
-        this._color = Colors.black;
-        this._sidingStyles = new Sides(LineStyles.solid, "")
-    }
-
-    /**
-     * 
-     * @param {number} width 
-     * @returns {Border}
-     */
-    width(width) {
-        this._width = width;
-        return this;
-    }
-
-    /**
-     * 
-     * @param {*} color 
-     * @returns {Border}
-     */
-    color(color) {
-        this._color = color;
-        return this;
-    }
-
-    /**
-     * Sets the border-style of all sides to the given. 
-     * @param {LineStyles} lineStyle style of the border
-     * @returns {Border}
-     */
-    setStyleAll(lineStyle) {
-        this._sidingStyles.all(lineStyle)
-        return this;
-    }
-
-    /**
-     * 
-     * @param {LineStyles} lineStyle 
-     * @param {*} sidingRefSide 
-     * @returns {Border}
-     */
-    setLineStyle(lineStyle, sidingRefSide) {
-        this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle)
-        return this;
-    }
-
-    /**
-     * 
-     * @param {Map<SidingRefSides, LineStyles} refSideStyleMap 
-     * @returns {Border}
-     */
-    setLineStyles(refSideStyleMap) {
-        let rkeys = Object.keys(refSideStyleMap);
-        for (let i = 0; i < array.length; i++) {
-            this._sidingStyles.setBySidingRef(rkeys[i]) = refSideStyleMap[rkeys[i]];
-        }
-        return this;
-    }
-
-
-}