dbm 1.3.0 → 1.4.1

package/css/icons.css

@@ -8,6 +8,11 @@
     height: var(--standard-icon-size, 24px);
 }
 
+.field-icon {
+    width: var(--field-icon-size, 16px);
+    height: var(--field-icon-size, 16px);
+}
+
 .standard-icon-color {
     filter: url("#standard-icon-color");
 }

package/graphapi/webclient/decode/Relations.js

@@ -32,16 +32,19 @@ export default class Relations extends Dbm.graphapi.webclient.decode.DecodeBaseO
                 if(!typeItem) {
                     typeItem = new Dbm.repository.Item();
                     typeItem.setValue("objects", []);
+                    typeItem.setValue("relations", []);
                     currentRelationsItem.setValue(currentType, typeItem);
                 }
 
-                if(this._isRelationValid(currentRelationData["startAt"], currentRelationData["endAt"])) {
-                    let newArray = [].concat(typeItem["objects"]);
-                    newArray.push(Dbm.getInstance().repository.getItem(currentRelationData["id"]));
-                    typeItem["objects"] = newArray;
-                    //METODO: set up relations
+                let relation = Dbm.getRepositoryItem(currentRelationData["relationId"]);
+                if(typeItem.relations.indexOf(relation) === -1) {
+                    let linkedItem = Dbm.getRepositoryItem(currentRelationData["id"]);
+                    //METODO: add data to relation
+                    if(this._isRelationValid(currentRelationData["startAt"], currentRelationData["endAt"])) {
+                        typeItem.addToArray("objects", linkedItem);
+                        typeItem.addToArray("relations", relation);
+                    }
                 }
-                
             }
         }
 
@@ -62,14 +65,18 @@ export default class Relations extends Dbm.graphapi.webclient.decode.DecodeBaseO
                 if(!typeItem) {
                     typeItem = new Dbm.repository.Item();
                     typeItem.setValue("objects", []);
+                    typeItem.setValue("relations", []);
                     currentRelationsItem.setValue(currentType, typeItem);
                 }
 
-                if(this._isRelationValid(currentRelationData["startAt"], currentRelationData["endAt"])) {
-                    let newArray = [].concat(typeItem["objects"]);
-                    newArray.push(Dbm.getInstance().repository.getItem(currentRelationData["id"]));
-                    typeItem["objects"] = newArray;
-                    //METODO: set up relations
+                let relation = Dbm.getRepositoryItem(currentRelationData["relationId"]);
+                if(typeItem.relations.indexOf(relation) === -1) {
+                    let linkedItem = Dbm.getRepositoryItem(currentRelationData["id"]);
+                    //METODO: add data to relation
+                    if(this._isRelationValid(currentRelationData["startAt"], currentRelationData["endAt"])) {
+                        typeItem.addToArray("objects", linkedItem);
+                        typeItem.addToArray("relations", relation);
+                    }
                 }
             }
         }

package/loading/ImageLoader.js

@@ -0,0 +1,65 @@
+import Dbm from "../index.js";
+
+export default class JsonLoader extends Dbm.core.BaseObject {
+
+	_construct() {
+		
+		super._construct();
+		
+		this.item.setValue("url", null);
+		this.item.setValue("element", null);
+
+		this.item.setValue("width", 0);
+		this.item.setValue("height", 0);
+
+		this._callback_loadedBound = this._callback_loaded.bind(this);
+		this._callback_loadingErrorBound = this._callback_loadingError.bind(this);
+		
+		this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+	}
+	
+	get completed() {
+		let status = this.item.status;
+		return (status === Dbm.loading.LoadingStatus.LOADED || status === Dbm.loading.LoadingStatus.ERROR);
+	}
+	
+	setUrl(aUrl) {
+		this.item.url = aUrl;
+		
+		return this;
+	}
+
+	_callback_loaded(aEvent) {
+		console.log(aEvent, this.item.element);
+
+		this.item.width = this.item.element.naturalWidth;
+		this.item.height = this.item.element.naturalHeight;
+
+		this.item.status = Dbm.loading.LoadingStatus.LOADED;
+	}
+
+	_callback_loadingError(aEvent) {
+		console.log(aEvent);
+
+		this.item.status = Dbm.loading.LoadingStatus.ERROR;
+	}
+	
+	load() {
+		
+		if(this.item.status !== Dbm.loading.LoadingStatus.NOT_STARTED) {
+			return this;
+		}
+
+		let image = new Image();
+		image.addEventListener("load", this._callback_loadedBound);
+		image.addEventListener("error", this._callback_loadingErrorBound);
+
+		this.item.element = image;
+
+		this.item.status = Dbm.loading.LoadingStatus.LOADING;
+		image.src = this.item.url;
+		console.log(image);
+		
+		return this;
+	}
+}

package/loading/index.js

@@ -1,11 +1,12 @@
 import Dbm from "../index.js";
 export {default as ScriptLoader} from "./ScriptLoader.js";
 export {default as JsonLoader} from "./JsonLoader.js";
+export {default as ImageLoader} from "./ImageLoader.js";
 export * as LoadingStatus from "./LoadingStatus.js";
 
 export * as node from "./node/index.js";
 
-export let loadScript = function(aUrl) {
+export const loadScript = function(aUrl) {
 
     let loaderName = "loader-" + aUrl;
     let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
@@ -22,5 +23,30 @@ export let loadScript = function(aUrl) {
 
     loader.load();
 
+    return loader;
+}
+
+export const getImageLoader = function(aUrl) {
+    let loaderName = "imageLoader-" + aUrl;
+    let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
+    
+    let loader;
+    if(!loaderItem) {
+        loader = new Dbm.loading.ImageLoader();
+        loader.item.register(loaderName);
+        loader.setUrl(aUrl);
+    }
+    else {
+        loader = loaderItem.controller;
+    }
+
+    return loader;
+}
+
+export const loadImage = function(aUrl) {
+    
+    let loader = getImageLoader(aUrl);
+    loader.load();
+
     return loader;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "main": "index.js",
   "type": "module",
   "exports": {
@@ -14,8 +14,10 @@
   "description": "",
   "dependencies": {
     "@tweenjs/tween.js": "^25.0.0",
-    "js-cookie": "^3.0.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "js-cookie": "^3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   }
 }

package/react/BaseObject.js

@@ -164,7 +164,10 @@ export default class BaseObject extends Component {
     _copyProps(aProps) {
         let newProps = {...aProps};
 
-        for(let objectName in this.props) {
+        let incomingProps = {...this.props};
+        this._removedUsedProps(incomingProps);
+
+        for(let objectName in incomingProps) {
             let currentValue = this.getPropValue(objectName);
             switch(objectName) {
                 case "className":
@@ -203,8 +206,7 @@ export default class BaseObject extends Component {
                     break;
             }
         }
-
-        this._removedUsedProps(newProps);
+        
         return newProps;
     }
 

package/react/admin/CreatePage.js

@@ -101,13 +101,13 @@ export default class CreatePage extends Dbm.react.BaseObject {
             {"type": "setUrl", "data": {"value": fullUrl}}
         ]
 
-        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem(["page"], "public", changes);
+        let request = Dbm.getGraphApi().createItem(["page"], "public", changes);
 
         Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._pageCreated.bind(this), [fullUrl]));
     }
 
     _pageCreated(aUrl) {
-        Dbm.getInstance().repository.getItem("siteNavigation").controller.navigate(aUrl);
+        Dbm.getRepositoryItem("siteNavigation").controller.navigate(aUrl);
     }
 
     _renderMainElement() {

package/react/admin/objects/itemeditors/MultipleRelations.js

@@ -10,10 +10,10 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
         let visibility = this.getPropValueWithDefault("visibility", "private");
 
         this.item.requireProperty("items", []);
+        this.item.requireProperty("loaded", false);
 
-        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
         {
-            let request = graphApi.requestRange(
+            let request = Dbm.getGraphApi().requestRange(
                 [
                     {"type": "byObjectType", "objectType": objectType},
                     {"type": "includeDraft"},
@@ -25,33 +25,31 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
     
            Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
         }
+
+        //console.log(this._getEditor());
     }
 
     _itemsLoaded(aRequest) {
-        let options = [];
+        console.log("_itemsLoaded");
+        console.log(aRequest);
 
-        let nameField = this.getPropValue("nameField");
-        if(!nameField) {
-            nameField = "name";
-        }
+        let nameField = this.getPropValueWithDefault("nameField", "name");
 
         let currentArray = [].concat(aRequest.items);
         Dbm.utils.ArrayFunctions.sortOnField(currentArray, nameField);
 
         this.item.items = currentArray;
+        this.item.loaded = true;
     }
 
-    _add(aItem) {
-        console.log("_add");
-        console.log(aItem);
-
+    _getEditor() {
         let itemEditor = this.context.itemEditor;
 
         let direction = this.getPropValue("direction");
         let relationType = this.getPropValue("relationType");
         let objectType = this.getPropValue("objectType");
 
-        let editor;
+        let editor = null;
         if(direction === "in") {
             editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
         }
@@ -62,6 +60,15 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
             console.error("Unknown direction", direction, this);
         }
 
+        return editor;
+    }
+
+    _add(aItem) {
+        console.log("_add");
+        console.log(aItem);
+
+        let editor = this._getEditor();
+
         let newValues = [].concat(editor.value);
         newValues.push(aItem.id);
         editor.value = newValues;
@@ -71,22 +78,7 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
         console.log("_remove");
         console.log(aId);
 
-        let itemEditor = this.context.itemEditor;
-
-        let direction = this.getPropValue("direction");
-        let relationType = this.getPropValue("relationType");
-        let objectType = this.getPropValue("objectType");
-
-        let editor;
-        if(direction === "in") {
-            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
-        }
-        else if(direction === "out") {
-            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
-        }
-        else {
-            console.error("Unknown direction", direction, this);
-        }
+        let editor = this._getEditor();
 
         let newValues = [].concat(editor.value);
 
@@ -100,61 +92,56 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
 
     _renderMainElement() {
 
-        let id = this.context.item.id;
-
         let label = this.getPropValue("label");
         let direction = this.getPropValue("direction");
         let relationType = this.getPropValue("relationType");
         let objectType = this.getPropValue("objectType");
-        let children = this.getPropValue("children");
 
         return React.createElement("div", {},
             React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
-            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.items, checkType: "notEmpty"},
-                React.createElement("div")
-            ),
-            React.createElement("div", {"className": "standard-alternating-rows"},
-                React.createElement(Dbm.react.admin.editorsgroup.EditMultipleRelations, {"direction": direction, "relationType": relationType, "objectType": objectType},
-                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("valueEditor.editValue.value")},
-                        React.createElement("div", {"className": "flex-row small-item-spacing justify-between"},
-                            React.createElement("div", {"className": "flex-row"},
-                                React.createElement(Dbm.react.context.AddItemByIdToContext, {id: Dbm.react.source.contextVariable("item")},
-                                    Dbm.react.text.text(Dbm.react.source.item("name"))
-                                )
-                            ),
-                            React.createElement("div", {"className": "flex-row"},  
-                                React.createElement(Dbm.react.interaction.CommandButton, {"commands": [Dbm.commands.callFunction(this._remove.bind(this), [Dbm.react.source.contextVariable("item")])]},
-                                    React.createElement("div", {},
-                                        
-                                        "Remove"
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement("div", {},
+                    React.createElement("div", {"className": "standard-alternating-rows"},
+                        React.createElement(Dbm.react.admin.editorsgroup.EditMultipleRelations, {"direction": direction, "relationType": relationType, "objectType": objectType},
+                            React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("valueEditor.editValue.value")},
+                                React.createElement("div", {"className": "flex-row small-item-spacing justify-between"},
+                                    React.createElement("div", {"className": "flex-row"},
+                                        React.createElement(Dbm.react.context.AddItemByIdToContext, {id: Dbm.react.source.item()},
+                                            Dbm.react.text.text(Dbm.react.source.item("name"))
+                                        )
+                                    ),
+                                    React.createElement("div", {"className": "flex-row"},  
+                                        React.createElement(Dbm.react.interaction.CommandButton, {"commands": [Dbm.commands.callFunction(this._remove.bind(this), [Dbm.react.source.item()])]},
+                                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/remove.svg", "className": "background-contain cursor-pointer action-icon-color field-icon"})
+                                        )
                                     )
                                 )
                             )
                         )
-                    )
-                )
-            ),
-            React.createElement("div", {"className": "spacing small"}),
-            React.createElement("div", {"className": "flex-row"},
-                React.createElement(Dbm.react.form.Dropdown, {"position": "right"},
-                    React.createElement("div", {"data-slot": "button", "className": "action-button action-button-padding"},
-                        "Add"
                     ),
-                    React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
-                        React.createElement(Dbm.react.area.List, {items: this.item.properties.items, "as": "relatedItem"},
-                            React.createElement(Dbm.react.interaction.CommandButton, {"commands": [
-                                Dbm.commands.callFunction(this._add.bind(this), [Dbm.react.source.contextVariable("relatedItem")]),
-                                Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
-                            ]},
-                                React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"},
-                                    Dbm.react.text.text(Dbm.react.source.contextVariable("relatedItem.name"))
-                                )
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement("div", {"className": "flex-row"},
+                        React.createElement(Dbm.react.form.Dropdown, {"position": "right"},
+                            React.createElement("div", {"data-slot": "button", "className": "action-button action-button-padding"},
+                                "Add"
                             ),
+                            React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
+                                React.createElement(Dbm.react.area.List, {items: this.item.properties.items, "as": "relatedItem"},
+                                    React.createElement(Dbm.react.interaction.CommandButton, {"commands": [
+                                        Dbm.commands.callFunction(this._add.bind(this), [Dbm.react.source.contextVariable("relatedItem")]),
+                                        Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                                    ]},
+                                        React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"},
+                                            Dbm.react.text.text(Dbm.react.source.contextVariable("relatedItem.name"))
+                                        )
+                                    ),
+                                )
+                            )
                         )
                     )
                 )
-                
-            )
+            ),
+            
         )
     }
 }

package/react/area/InsertElement.js

@@ -7,6 +7,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
     }
 
     _removedUsedProps(aProps) {
+        //console.log("_removedUsedProps");
         delete aProps["element"];
     }
 
@@ -20,7 +21,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
             return React.createElement("div", {}, "No element set");
         }
 
-        let props = this._copyProps(this.props);
+        let props = this._copyProps(element.props);
 
         let returnElement = Dbm.react.ChildFunctions.clone(element, props);
         return returnElement;

package/react/blocks/faq/AskAQuestion.js

@@ -66,6 +66,7 @@ export default class AskAQuestion extends Dbm.react.BaseObject {
         let currentRow = new Dbm.repository.Item();
         currentRow.setId("_dbmInternal/row" + Dbm.getInstance().getNextId());
         currentRow.setValue("item", currentItem);
+        console.log(">>>>>>>", this._getOpenProperty(i));
         currentRow.setValue("element", React.createElement(Dbm.react.blocks.faq.HelpSectionRowItem, {"open": this._getOpenProperty(i), "startState": (i === 0 ? "open" : "close")}));
         rows.push(currentRow);
       }

package/react/image/gallery/ImageGallery.js

@@ -0,0 +1,84 @@
+import Dbm from "../../../index.js";
+import React from "react";
+
+export default class ImageGallery extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.setValue("widthElement", null);
+        
+        let elementSize = new Dbm.flow.updatefunctions.dom.ElementSize();
+        this.item.setValue("elementSize", elementSize);
+        elementSize.input.properties.element.connectInput(this.item.properties.widthElement);
+        elementSize.start();
+        this.item.requireProperty("width", 0).connectInput(elementSize.output.properties.width);
+
+        let images = this.getPropValue("images");
+        
+
+        this.item.requireProperty("sections", []);
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+        this.item.requireProperty("loaded", false);
+        Dbm.flow.runWhenMatched(this.item.properties.loaded, true, Dbm.commands.callFunction(this._loaded.bind(this)));
+
+        let urlPath = this.getPropValueWithDefault("urlPath", "url");
+
+        let imageLoaders = [];
+        let currentArray = images;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentData = currentArray[i];
+            console.log(currentData);
+            let currentUrl = Dbm.objectPath(currentData, urlPath);
+            console.log(currentUrl);
+            let loader = Dbm.loading.loadImage(currentUrl);
+            imageLoaders.push(loader.item);
+            allLoaded.addCheck(loader.item.properties.status);
+        }
+        this.item.setValue("images", imageLoaders);
+        
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["images"];
+        delete aProps["urlPath"];
+    }
+
+    _loaded() {
+        console.log("loaded");
+        console.log(this.item.images);
+
+        let groups = Dbm.utils.ArrayFunctions.splitArray(this.item.images, 4);
+
+        let length = groups.length;
+		if(length > 1 && groups[length - 1].length === 1) {
+			let last = groups[length-1];
+			let prev = groups[length-2];
+
+			let lastInPrevious = prev.pop();
+			last.unshift(lastInPrevious);
+		}
+
+        let sections = [];
+        let currentArray = groups;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let section = React.createElement(Dbm.react.image.gallery.ImageGallerySection, {"images": currentArray[i], width: this.item.properties.width, spacing: 20});
+            sections.push({"id": i, "element": section});
+        }
+
+        this.item.sections = sections;
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {ref: this.createRef("widthElement")},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.sections},
+                React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.item("element")}),
+                React.createElement("div", {"data-slot": "spacing", "className": "spacing", "style": {"height": 20}})
+            )
+        );
+    }
+}

package/react/image/gallery/ImageGallerySection.js

@@ -0,0 +1,220 @@
+import Dbm from "../../../index.js";
+import React from "react";
+
+export default class ImageGallerySection extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let images = this.getPropValue("images");
+        console.log("images>>>>>", images);
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["images"];
+    }
+
+    createLayout2(aImages, aSpacing = 20, aWidth = 800) {
+
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+
+        let minHeight = Math.min(height1, height2);
+        let heightRatio1 = (minHeight / height1);
+        let heightRatio2 = (minHeight / height2);
+
+        let scaledWidth1 = width1*heightRatio1;
+        let scaledWidth2 = width2*heightRatio2;
+
+        let totalWidth = (scaledWidth1+scaledWidth2);
+        let widthRatio1 = (scaledWidth1/totalWidth);
+        let widthRatio2 = (scaledWidth2/totalWidth);
+
+        let newWidth1 = (aWidth-aSpacing)*widthRatio1;
+        let newWidth2 = (aWidth-aSpacing)*widthRatio2;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+
+        console.log(newWidth1, newHeight1, newWidth2, newHeight2);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+
+    createLayout3(aImages, aSpacing = 20, aWidth = 800) {
+
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+
+        let minHeight = Math.min(height1, height2, height3);
+        let heightRatio1 = (minHeight / height1);
+        let heightRatio2 = (minHeight / height2);
+        let heightRatio3 = (minHeight / height3);
+
+        let scaledWidth1 = width1*heightRatio1;
+        let scaledWidth2 = width2*heightRatio2;
+        let scaledWidth3 = width3*heightRatio3;
+
+        let totalWidth = (scaledWidth1+scaledWidth2+scaledWidth3);
+        let widthRatio1 = (scaledWidth1/totalWidth);
+        let widthRatio2 = (scaledWidth2/totalWidth);
+        let widthRatio3 = (scaledWidth3/totalWidth);
+
+        let newWidth1 = (aWidth-2*aSpacing)*widthRatio1;
+        let newWidth2 = (aWidth-2*aSpacing)*widthRatio2;
+        let newWidth3 = (aWidth-2*aSpacing)*widthRatio3;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+        let newHeight3 = (height3/width3)*newWidth3;
+
+        console.log(newWidth1, newHeight1, newWidth2, newHeight2, newWidth3, newHeight3);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth3, "height": newHeight3}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[2].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+
+    createLayout4(aImages, aSpacing = 20, aWidth = 800) {
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+        let width4 = aImages[3].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+        let height4 = aImages[3].height;
+
+        let innerP = (height3/width3)/((height2/width2)+(height3/width3));
+
+        let fullWidth = (aWidth-aSpacing);
+        let p = (fullWidth*(height1/width1)-aSpacing+innerP*aSpacing*(height2/width2))/(fullWidth*((height4/width4)+innerP*(height2/width2)+(height1/width1)))
+
+        let innerWidth = fullWidth*p-aSpacing;
+
+        let newWidth1 = (1-p)*fullWidth;
+        let newWidth2 = (innerWidth)*innerP;
+        let newWidth3 = (innerWidth)*(1-innerP);
+        let newWidth4 = (p)*fullWidth;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+        let newHeight3 = (height3/width3)*newWidth3;
+        let newHeight4 = (height4/width4)*newWidth4;
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement("div", {className: "flex-row"},
+                    React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                        React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+                    ),
+                    React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+                    React.createElement("div", {className: "flex-row-item", style: {"width": newWidth3, "height": newHeight3}},
+                        React.createElement(Dbm.react.image.Image, {"src": aImages[2].url, "className": "full-size background-cover"})
+                    ),
+                ),
+                React.createElement("div", {style: {"height": aSpacing}}),
+                React.createElement("div", {className: "flex-row-item", style: {"width": newWidth4, "height": newHeight4}},
+                    React.createElement(Dbm.react.image.Image, {"src": aImages[3].url, "className": "full-size background-cover"})
+                ),
+            ),
+        );
+
+        return layout;
+    }
+
+    _renderMainElement() {
+
+        let images = this.getPropValue("images");
+        let width = this.getPropValueWithDefault("width", 800);
+        let spacing = this.getPropValueWithDefault("spacing", 20);
+
+        let layout = null;
+        switch(images.length) {
+            case 2:
+                layout = this.createLayout2(images, spacing, width);
+                break;
+            case 3:
+                layout = this.createLayout3(images, spacing, width);
+                break;
+            case 4:
+                layout = this.createLayout4(images, spacing, width);
+                break;
+        }
+
+        return this._createMainElement("div", {},
+            layout
+        );
+    }
+
+    /*
+    createLayout4(aImages, aSpacing = 20, aWidth = 800) {
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+        let width4 = aImages[3].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+        let height4 = aImages[3].height;
+
+        let innerP = (height2/width2)/((height1/width1)+(height2/width2));
+        let innerWidth = aWidth-aSpacing;
+
+        let newWidth1 = (innerWidth)*innerP;
+        let newWidth2 = (innerWidth)*(1-innerP);
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+
+        console.log(innerP);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+        */
+}

package/react/image/gallery/index.js

@@ -0,0 +1,2 @@
+export {default as ImageGallery} from "./ImageGallery.js";
+export {default as ImageGallerySection} from "./ImageGallerySection.js";

package/react/image/index.js

@@ -2,4 +2,6 @@ export {default as Image} from "./Image.js";
 export {default as WidthScaledImage} from "./WidthScaledImage.js";
 export {default as CoverScaledImage} from "./CoverScaledImage.js";
 export {default as ContainScaledImage} from "./ContainScaledImage.js";
-export {default as LocalImage} from "./LocalImage.js";
+export {default as LocalImage} from "./LocalImage.js";
+
+export * as gallery from "./gallery/index.js";

package/react/index.js

@@ -17,3 +17,4 @@ export * as image from "./image/index.js";
 export * as animation from "./animation/index.js";
 export * as interaction from "./interaction/index.js";
 export * as thirdparty from "./thirdparty/index.js";
+export * as svg from "./svg/index.js";

package/react/svg/GlobalFilters.js

@@ -0,0 +1,22 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class GlobalFilters extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let colorFilters = Dbm.getRepositoryItem("globalSvg");
+        colorFilters.requireProperty("filters", []);
+
+        return this._createMainElement("svg", {xmlns: "http://www.w3.org/2000/svg", style: {display: "none"}},
+            React.createElement("defs", null, 
+                React.createElement(Dbm.react.area.List, {items: colorFilters.properties.filters},
+                    React.createElement(Dbm.react.area.InsertElement, {element: Dbm.react.source.item("element")})
+                )
+            )
+        );
+    }
+}

package/react/svg/MatrixFilter.js

@@ -0,0 +1,25 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class MatrixFilter extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["id"];
+        delete aProps["matrix"];
+    }
+
+    _renderMainElement() {
+
+        let id = this.getPropValue("id");
+        let matrix = this.getPropValue("matrix");
+
+        console.log(id);
+
+        return this._createMainElement("filter", {id: id},
+            React.createElement("feColorMatrix", {type: "matrix", values: matrix})
+        );
+    }
+}

package/react/svg/index.js

@@ -0,0 +1,43 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export {default as GlobalFilters} from "./GlobalFilters.js";
+export {default as MatrixFilter} from "./MatrixFilter.js";
+
+export const addGlobalRgbColorFilter = function(aName, aR, aG, aB) {
+
+    let colorFilters = Dbm.getRepositoryItem("globalSvg");
+    colorFilters.requireProperty("filters", []);
+
+    let item = Dbm.getRepositoryItem("globalSvg/filters/" + aName);
+    item.setValue("element", React.createElement(Dbm.react.svg.MatrixFilter, {"id": aName, "matrix": Dbm.utils.svg.ColorMatrixFunctions.floodColor(aR, aG, aB)}));
+
+    let filters = [].concat(colorFilters.filters);
+    filters.push(item);
+    colorFilters.filters = filters;
+    
+    return item;
+}
+
+export const addGlobalHexColorFilter = function(aName, aColor) {
+    let value;
+
+    if (typeof aColor === "number") {
+        value = aColor;
+    }
+    else {
+        let hex = aColor.replace(/^#/, '');
+
+        if(hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join('');
+        }
+
+        value = parseInt(hex, 16);
+    }
+    
+    let r = (value >> 16) & 255;
+    let g = (value >> 8) & 255;
+    let b = value & 255;
+
+    return addGlobalRgbColorFilter(aName, r, g, b)
+}

package/repository/Item.js

@@ -71,4 +71,32 @@ export default class Item extends Dbm.core.LifeCycleObject {
         }
         return this.properties[aName];
     }
+
+    addToArray(aName, aValue) {
+        let currentArray = this[aName];
+        if(!currentArray) {
+            this.setValue(aName, [aValue]);
+        }
+        else {
+            currentArray = [].concat(currentArray);
+            currentArray.push(aValue);
+            this[aName] = currentArray;
+        }
+
+        return this;
+    }
+
+    removeFromArray(aName, aValue) {
+        let currentArray = this[aName];
+        if(currentArray) {
+            let index = currentArray.indexOf(aValue);
+            if(index !== -1) {
+                currentArray = [].concat(currentArray);
+                currentArray.splice(index, 1);
+                this[aName] = currentArray;
+            }
+        }
+
+        return this;
+    }
 }

package/utils/index.js

@@ -9,4 +9,5 @@ export * as LevenshteinDistance from "./LevenshteinDistance.js";
 export {default as MultidimensionalArrayHolder} from "./MultidimensionalArrayHolder.js";
 export {default as ArrayOperationResult} from "./ArrayOperationResult.js";
 
-export * as thirdparty from "./thirdparty/index.js";
+export * as thirdparty from "./thirdparty/index.js";
+export * as svg from "./svg/index.js";

package/utils/svg/ColorMatrixFunctions.js

@@ -0,0 +1,12 @@
+import Dbm from "../../index.js";
+
+export const floodColor = function(aR, aG, aB, aNumberOfDecimals = 4) {
+    let values = "";
+
+    values += "0 0 0 0 " + (aR/255).toFixed(aNumberOfDecimals) + " ";
+    values += "0 0 0 0 " + (aG/255).toFixed(aNumberOfDecimals) + " ";
+    values += "0 0 0 0 " + (aB/255).toFixed(aNumberOfDecimals) + " ";
+    values += "0 0 0 1 0";
+
+    return values;
+}

package/utils/svg/index.js

@@ -0,0 +1 @@
+export * as ColorMatrixFunctions from "./ColorMatrixFunctions.js";