dbm 1.4.15 → 1.4.17

package/react/form/EditableContent.js

@@ -0,0 +1,71 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditableContent extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let valueProperty = this.getDynamicPropWithoutState("value", "");
+        this.getDynamicPropWithoutState("editing", false);
+        this.state["formUpdate"] = 0;
+        this._currentValue = "";
+
+        this._callback_focusBound = this._callback_focus.bind(this);
+        this._callback_blurBound = this._callback_blur.bind(this);
+
+        this._elementChangedBound = this._elementChanged.bind(this);
+        this._callback_inputBound = this._callback_input.bind(this);
+    
+        this.createRef("contentElement");
+        Dbm.flow.addUpdateCommand(this.item.properties.contentElement, Dbm.commands.callFunction(this._elementChangedBound));
+
+        valueProperty.addUpdate(this._getScopedCallFunctionCommand(this._valueChanged));
+    }
+
+    _callback_focus(aEvent) {
+        //console.log("_callback_focus");
+        //console.log(aEvent);
+
+        this.getDynamicProp("editing").getMostUpstreamProperty().setValue(true);
+    }
+
+    _callback_blur(aEvent) {
+        //console.log("_callback_blur");
+        //console.log(aEvent);
+
+        this.getDynamicProp("editing").getMostUpstreamProperty().setValue(false);
+    }
+
+    _valueChanged() {
+        //console.log("_elementChanged");
+
+        if(this.item.contentElement) {
+            let value = this.getPropValueWithoutNull("value", "");
+            if(value !== this._currentValue) {
+                this.item.contentElement.innerHTML = value;
+            }
+        }
+    }
+    
+    _elementChanged() {
+        //console.log("_elementChanged");
+
+        this.item.contentElement.innerHTML = this.getPropValueWithoutNull("value", "");
+        this.item.contentElement.addEventListener("input", this._callback_inputBound, false);
+
+    }
+    
+    _callback_input(aEvent) {
+        //console.log("_callback_input");
+
+        let value = "" + this.item.contentElement.innerHTML;
+        this._currentValue = value;
+        this.getDynamicProp("value").getMostUpstreamProperty().setValue(value);
+        this.setState({"formUpdate": this.state.formUpdate}); //MENOTE: trigger change direct to not lose focus on input
+    }
+    
+    _renderMainElement() {
+        return this._createMainElement("div", {contentEditable: true, ref: this.createRef("contentElement"), className: "standard-field standard-field-padding"});
+    }
+}
+

package/react/form/GraphApiImageWithAltText.js

@@ -0,0 +1,268 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class GraphApiImageWithAltText extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let valueProperty = this.getDynamicProp("value", {});
+
+        this._callback_fileChangedBound = this._callback_fileChanged.bind(this);
+        this._altTextChangedBound = this._altTextChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(valueProperty, this._getScopedCallFunctionCommand(this._valueUpdated));
+
+        let altText = Dbm.objectPath(this.item.value, "altText");
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("altText", altText), Dbm.commands.callFunction(this._altTextChangedBound));
+
+        let imageElement = React.createElement("div", {className: "flex-row small-item-spacing"},
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement(Dbm.react.image.WidthScaledImage, {"image": valueProperty, targetWidth: 120, className: "editor-preview background-contain"}),
+            ),
+            React.createElement("div", {className: "flex-row-item flex-resize"},
+                Dbm.react.text.text(Dbm.core.source.staticObject(valueProperty, "url")),
+                React.createElement("div", {className: "spacing small"}),
+                React.createElement("div", {},
+                    React.createElement(Dbm.react.area.HasData, {check: valueProperty, checkType: "invert/default"},
+                        React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._addToLibrary.bind(this))},
+                            React.createElement("div", {className: "action-button action-button-padding"},
+                                "Add to library"
+                            )
+                        )
+                            
+                    ),
+                    React.createElement(Dbm.react.area.HasData, {check: valueProperty},
+                        React.createElement(Dbm.react.form.FormField, {value: this.item.properties.altText, className: "standard-field standard-field-padding full-width"}),
+                        React.createElement("div", {className: "spacing micro"}),
+                        React.createElement("div", {className: "flex-row small-item-spacing"},
+                            React.createElement("div", {className: "flex-row-item"},
+                                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._generateAltText.bind(this))},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
+                                        "Generate"
+                                    )
+                                )
+                            ),
+                            React.createElement("div", {className: "flex-row-item"},
+                                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._saveAltTextToLibrary.bind(this))},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
+                                        "Save to library"
+                                    )
+                                )
+                            ),
+                            React.createElement("div", {className: "flex-row-item flex-resize"}),
+                            React.createElement("div", {className: "flex-row-item"},
+                                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._updateFromLibrary.bind(this))},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
+                                        "Update from library"
+                                    )
+                                )
+                            )
+                        )
+                    )
+                ),
+            ),
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement("div", {onClick: () => {this.removeImage()}}, "Remove")
+            )
+        );
+
+        this.item.requireProperty("selectMode", "overview");
+
+        let uploadElement = React.createElement("div", {className: "flex-row small-item-spacing halfs"},
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"})
+            ),
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.setProperty(this.item.properties.selectMode, "library")}, 
+                    React.createElement("div", {className: "flex-row-item"}, "Select from library")
+                )
+            ),
+        );
+
+        let libraryElement = React.createElement("div", {}, 
+            React.createElement(Dbm.react.admin.SelectImageFromLibrary, {selectedCommands: [
+                Dbm.commands.callFunction(this._imageSelected.bind(this), [Dbm.core.source.event()]),
+                Dbm.commands.setProperty(this.item.properties.selectMode, "overview")
+            ]})
+        );
+
+        let selectSwitch = Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.selectMode).setDefaultValue(uploadElement).addCase("library", libraryElement);
+
+        let selectElement = React.createElement("div", {},
+            React.createElement(Dbm.react.area.InsertElement, {element: selectSwitch.output.properties.value})
+        );
+
+        let elementSwitch = Dbm.flow.updatefunctions.logic.switchValue(valueProperty).setDefaultValue(imageElement).addCase(null, selectElement);
+
+        this.item.requireProperty("element", null).connectInput(elementSwitch.output.properties.value);
+    }
+
+    _valueUpdated() {
+        let imageData = this.getPropValue("value");
+
+        if(imageData && imageData.altText && imageData.altText !== this.item.altText) {
+            this.item.altText = imageData.altText;
+        }
+    }
+
+    _addToLibrary() {
+        let imageData = this.getPropValue("value");
+
+        let objectType = "image";
+
+        let parsedUrl = URL.parse(imageData.url);
+        
+        let fileName = parsedUrl.pathname.substring(parsedUrl.pathname.lastIndexOf("/")+1);
+
+        let changes = [
+            {"type": "setIdentifier", "data": {"value": imageData.identifier, "field": "name"}},
+            {"type": "setField", "data": {"value": fileName, "field": "name"}},
+            {"type": "setField", "data": {"value": fileName, "field": "originalFileName"}},
+            {"type": "setField", "data": {"value": parsedUrl.pathname, "field": "path"}},
+            {"type": "setField", "data": {"value": imageData.url, "field": "url"}},
+            {"type": "setField", "data": {"value": imageData.resizeUrl, "field": "resizeUrl"}},
+        ];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem([objectType], "public", changes);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._libraryImageCreated.bind(this), [request]));
+    }
+
+    _libraryImageCreated(aRequest) {
+        //console.log("_libraryImageCreated");
+        //console.log(aRequest);
+
+        let imageData = {...this.item.value};
+
+        imageData.id = aRequest.item.id;
+        this.getDynamicProp("value").getMostUpstreamProperty().value = imageData;
+    }
+
+    _generateAltText() {
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        let request = graphApi.requestData("admin/altText", {"id": this.item.value.id});
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._altTextLoaded.bind(this), [request]));
+
+    }
+
+    _altTextLoaded(aRequest) {
+        this.item.altText = Dbm.objectPath(aRequest, "data.altText");
+    }
+
+    _saveAltTextToLibrary() {
+        let changes = [
+            {"type": "setField", "data": {"value": this.item.altText, "field": "altText"}},
+        ];
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.editItem(this.getPropValue("value").id, changes);
+    }
+
+    _updateFromLibrary() {
+        console.log("_updateFromLibrary");
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        let request = graphApi.requestItem(this.getPropValue("value").id, ["image"]);
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._libraryImageLoaded.bind(this), [request]));
+        
+    }
+
+    _libraryImageLoaded(aRequest) {
+        console.log("_libraryImageLoaded");
+        console.log(aRequest);
+
+        let item = aRequest.item;
+
+        let imageData = {id: item.id, url: item.url, resizeUrl: item.resizeUrl, identifier: item.identifier, altText: item.altText};
+        this.getDynamicProp("value").getMostUpstreamProperty().value = null;
+
+        setTimeout(() => {
+            this.getDynamicProp("value").getMostUpstreamProperty().value = imageData;
+        }, 100);
+        
+    }
+
+    _imageSelected(aImage) {
+        console.log("_imageSelected");
+        console.log(aImage);
+
+        let imageData = {id: aImage.id, url: aImage.url, resizeUrl: aImage.resizeUrl, identifier: aImage.identifier, altText: aImage.altText};
+        this.getDynamicProp("value").getMostUpstreamProperty().value = imageData;
+    }
+
+    _altTextChanged() {
+
+        let value = this.getPropValue("value");
+        if(value && value.altText !== this.item.altText) {
+            let newValue = {...value};
+            newValue.altText = this.item.altText;
+            this.getDynamicProp("value").getMostUpstreamProperty().value = newValue;
+        }
+    }
+
+    _callback_fileChanged(aEvent) {
+        console.log("_callback_fileChanged");
+        console.log(aEvent, aEvent.target.files);
+
+        let files = aEvent.target.files;
+        if(files.length > 0) {
+            this.uploadImage(files[0]);
+        }
+    }
+
+    removeImage() {
+        this.item.value = null;
+
+        return this;
+    }
+
+    uploadImage(aFile) {
+            
+                let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+    
+                let preSign = graphApi.requestData("fileUpload", {"fileName": aFile.name, "mimeType": aFile.type});
+        
+                Dbm.flow.addDirectUpdateCommand(preSign.getProperty("status"), Dbm.commands.callFunction(this._statusChanged.bind(this), [preSign, aFile]));
+            
+        }
+    
+        _statusChanged(aPreSign, aFile) {
+            console.log("_statusChanged");
+            console.log(aPreSign, aFile);
+    
+            if(aPreSign.status === 1) {
+                let url = aPreSign.data.url;
+                console.log(url, aPreSign.data);
+    
+                let headers = {
+                    'Content-Type': aFile.type,
+                    'Cache-Control': 'no-cache',
+                };
+
+                let additionalHeaders = aPreSign.data.additionalHeaders;
+                for(let objectName in additionalHeaders) {
+                    headers[objectName] = additionalHeaders[objectName];
+                }
+
+                fetch(url, {
+                    method: 'PUT',
+                    headers: new Headers(headers),
+                    body: aFile
+                 }).then(() => {
+                    this.item.value = {id: aPreSign.data.id, url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier};
+                    console.log("Uploaded", this.item.value);
+                    //METODO: send update to editor
+                 })
+    
+            }
+        }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+        );
+    }
+}

package/react/form/Link.js

@@ -0,0 +1,40 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Link extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicPropWithoutState("value", {});
+        this.getDynamicPropWithoutState("editing", false);
+    }
+
+    _renderMainElement() {
+
+        let objectProperty = this.getDynamicPropWithoutState("value", {});
+        let textFieldName = this.getPropValueWithDefault("textFieldName", "text");
+        let urlFieldName = this.getPropValueWithDefault("urlFieldName", "url");
+        let editing = this.getDynamicPropWithoutState("editing", false);
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {"className": "flex-row"},
+                React.createElement("div", {"className": "flex-row-item quarter flex-resize"},
+                    React.createElement("div", {"className": "flex-row-item absolute-container"},
+                        React.createElement(Dbm.react.form.EditObjectProperty, {"value": objectProperty, "path": textFieldName},
+                            React.createElement(Dbm.react.form.FormField, {"className": "integrated-field standard-field-padding with-left-field-icon full-width", value: Dbm.react.source.contextVariable("value"), editing: editing})
+                        ),
+                        React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/text.svg", "className": "field-icon left-field-icon-position background-contain field-icon-color no-pointer-events", "alt": "Link text"})
+                    )
+                ),
+                React.createElement("div", {"className": "flex-row-item half flex-resize"},
+                    React.createElement("div", {"className": "flex-row-item absolute-container"},
+                        React.createElement(Dbm.react.form.Url, {"className": "standard-field-padding with-left-field-icon full-width", value: objectProperty, urlFieldName: urlFieldName, editing: editing}),
+                        React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/link.svg", "className": "field-icon left-field-icon-position background-contain field-icon-color no-pointer-events", "alt": "URL"}),
+                    )
+                )
+            )
+            
+        );
+    }
+}
+

package/react/form/Url.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Url extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicPropWithoutState("value", {});
+        this.getDynamicPropWithoutState("editing", false);
+    }
+
+    _renderMainElement() {
+
+        let objectProperty = this.getDynamicPropWithoutState("value", {});
+        let urlFieldName = this.getPropValueWithDefault("urlFieldName", "url");
+        let editing = this.getDynamicPropWithoutState("editing", false);
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.EditObjectProperty, {"value": objectProperty, "path": urlFieldName},
+                this._createMainElement(Dbm.react.form.FormField, {"className": "integrated-field standard-field-padding-vertical", value: Dbm.react.source.contextVariable("value"), editing: editing})
+            )
+        );
+    }
+}
+

package/react/form/index.js

@@ -18,6 +18,10 @@ export {default as Option} from "./Option.js";
 export {default as Dropdown} from "./Dropdown.js";
 export {default as GraphApiObjectOptions} from "./GraphApiObjectOptions.js";
 export {default as CustomSelection} from "./CustomSelection.js";
+export {default as Url} from "./Url.js";
+export {default as Link} from "./Link.js";
+export {default as EditableContent} from "./EditableContent.js";
+export {default as GraphApiImageWithAltText} from "./GraphApiImageWithAltText.js";
 
 export const validationStateClassName = function(aChildren) {
     return React.createElement(Dbm.react.AddProps, {className: Dbm.react.source.contextVariable("field.properties.validationState")},

package/react/index.js

@@ -1,8 +1,11 @@
+import Dbm from "../index.js";
+
 export {default as BaseObject} from "./BaseObject.js";
 export {default as RefToProperty} from "./RefToProperty.js";
 export {default as AddProps} from "./AddProps.js";
 
 export * as ChildFunctions from "./ChildFunctions.js";
+export * as dynamic from "./dynamic/index.js";
 
 export * as modules from "./modules/index.js";
 export * as admin from "./admin/index.js";
@@ -19,3 +22,12 @@ 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";
+
+
+export let design = null;
+
+export const setupDesign = function() {
+    let repositoryProxy = new Dbm.react.dynamic.DesignRepositoryProxy();
+
+    design = repositoryProxy.proxy;
+}

package/react/interaction/Checked.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Checked extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("checked", false);
+
+        this._clickedCommand = this._getScopedCallFunctionCommand(this._clicked);
+    }
+
+    _clicked() {
+        //console.log("_clicked");
+
+        let checkedProperty = this.getDynamicProp("checked");
+        let newValue = this.getPropValueWithDefault("preventUncheck", false) ? true : !checkedProperty.value;
+        checkedProperty.getMostUpstreamProperty().setValue(newValue);
+    }
+
+    _renderMainElement() {
+
+    let checkedProperty = this.getDynamicProp("checked");
+
+        return React.createElement(Dbm.react.context.AddContextVariables, {values: {selected: checkedProperty}},
+            React.createElement(Dbm.react.interaction.CommandButton, {"command": this._clickedCommand},
+                this.getPropValue("children")
+            )
+        );
+    }
+}
+

package/react/interaction/ClickOutsideTrigger.js

@@ -15,7 +15,7 @@ export default class ClickOutsideTrigger extends Dbm.react.BaseObject {
         if(!commands) {
             commands = this.getPropValue("command");
         }
-        if(commands) {
+        if(commands && this.getPropValueWithoutNull("active")) {
             let currentElement = this.item["mainElement"];
             if(!currentElement.contains(aEvent.srcElement)) {
                 commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);

package/react/interaction/index.js

@@ -6,4 +6,5 @@ export {default as CommandButton} from "./CommandButton.js";
 export {default as ConfirmButton} from "./ConfirmButton.js";
 export {default as ClickOutsideTrigger} from "./ClickOutsideTrigger.js";
 export {default as HoverArea} from "./HoverArea.js";
-export {default as HoverDropdown} from "./HoverDropdown.js";
+export {default as HoverDropdown} from "./HoverDropdown.js";
+export {default as Checked} from "./Checked.js";

package/react/svg/AddGlobalFilterClasses.js

@@ -1,5 +1,4 @@
 import Dbm from "../../index.js";
-import React from "react";
 
 export default class GlobalFilters extends Dbm.core.BaseObject {
     _construct() {
@@ -18,9 +17,9 @@ export default class GlobalFilters extends Dbm.core.BaseObject {
         console.log("_updateStyles");
 
         let colorFilters = Dbm.getRepositoryItem("globalSvg");
-        console.log(colorFilters.filters.length);
 
         if(colorFilters.filters.length) {
+
             if(!this._styleTag) {
                 this._styleTag = document.createElement("style");
                 document.head.appendChild(this._styleTag);
@@ -28,7 +27,8 @@ export default class GlobalFilters extends Dbm.core.BaseObject {
 
             let declarations = Dbm.utils.ArrayFunctions.mapField(colorFilters.filters, "classDeclaration");
             this._styleTag.innerHTML = declarations.join("\n");
-            console.log(declarations);
+            
+            
         }
     }
 }

package/react/svg/BlendColorFilter.js

@@ -0,0 +1,42 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class BlendColorFilter extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["id"];
+        delete aProps["color"];
+        delete aProps["blendMode"];
+        delete aProps["saturation"];
+        delete aProps["min"];
+        delete aProps["max"];
+    }
+
+    _renderMainElement() {
+
+        let id = this.getPropValue("id");
+        let color = this.getPropValue("color");
+
+        let blendMode = this.getPropValueWithoutNull("blendMode", "multiply");
+        let saturation = this.getPropValueWithoutNull("saturation", 0);
+        let min = this.getPropValueWithoutNull("min", 0);
+        let max = this.getPropValueWithoutNull("max", 1);
+
+        let scale = max-min;
+
+        //MENOTE: React converts floodColor to flood-color
+        return this._createMainElement("filter", {id: id, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%"},
+            React.createElement("feColorMatrix", {type: "saturate", values: saturation, result: "saturated"}),
+            React.createElement("feComponentTransfer", {in: "saturated", result: "scaled"},
+                React.createElement("feFuncR", {type: "linear", slope: scale, intercept: min}),
+                React.createElement("feFuncG", {type: "linear", slope: scale, intercept: min}),
+                React.createElement("feFuncB", {type: "linear", slope: scale, intercept: min}),
+            ),
+            React.createElement("feFlood", {floodColor: color, result: "tint", floodOpacity: "1", x: "0%", y: "0%", width: "100%", height: "100%"}),
+            React.createElement("feBlend", {in: "scaled", in2: "tint", mode: blendMode})
+        );
+    }
+}

package/react/svg/GlobalFilters.js

@@ -11,7 +11,7 @@ export default class GlobalFilters extends Dbm.react.BaseObject {
         let colorFilters = Dbm.getRepositoryItem("globalSvg");
         colorFilters.requireProperty("filters", []);
 
-        return this._createMainElement("svg", {xmlns: "http://www.w3.org/2000/svg", style: {display: "none"}},
+        return this._createMainElement("svg", {xmlns: "http://www.w3.org/2000/svg", style: {width: 0, height: 0, display: "block"}, "aria-hidden": 'true'},
             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

@@ -16,10 +16,8 @@ export default class MatrixFilter extends Dbm.react.BaseObject {
         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})
+            React.createElement("feColorMatrix", {type: "matrix", values: matrix, "colorInterpolationFilters": "sRGB"})
         );
     }
 }

package/react/svg/index.js

@@ -3,6 +3,7 @@ import React from "react";
 
 export {default as GlobalFilters} from "./GlobalFilters.js";
 export {default as MatrixFilter} from "./MatrixFilter.js";
+export {default as BlendColorFilter} from "./BlendColorFilter.js";
 export {default as AddGlobalFilterClasses} from "./AddGlobalFilterClasses.js";
 
 export const addGlobalRgbColorFilter = function(aName, aR, aG, aB) {
@@ -42,4 +43,23 @@ export const addGlobalHexColorFilter = function(aName, aColor) {
     let b = value & 255;
 
     return addGlobalRgbColorFilter(aName, r, g, b)
+}
+
+export const createGlobalHexBlendFilter = function(aName, aColor, aBlendMode = "multiply", aSaturation = 0, aMin = 0, aMax = 1) {
+    let colorFilters = Dbm.getRepositoryItem("globalSvg");
+    colorFilters.requireProperty("filters", []);
+
+    let item = Dbm.getRepositoryItem("globalSvg/filters/" + aName);
+    item.setValue("element", React.createElement(Dbm.react.svg.BlendColorFilter, {"id": aName, "color": aColor, "blendMode": aBlendMode, "saturation": aSaturation, "min": aMin, "max": aMax}));
+    item.setValue("classDeclaration", "." + aName + "{filter:url(\"#" + aName + "\")}");
+
+    let filters = [].concat(colorFilters.filters);
+    filters.push(item);
+    colorFilters.filters = filters;
+    
+    return item;
+}
+
+export const createGlobalRgbBlendFilter = function(aName, aR, aG, aB, aBlendMode = "multiply", aSaturation = 0, aMin = 0, aMax = 1) {
+    return createGlobalHexBlendFilter(aName, "rgb(" + aR + ", " + aG +", " + aB + ")", aBlendMode, aSaturation, aMin, aMax);
 }

package/react/text/index.js

@@ -25,4 +25,8 @@ export const htmlText = function(aText, aElementType = "span", aAdditionalProps
 
 export const translatedText = function(aText, aTextId) {
     return createElement(Dbm.react.text.TranslatedText, {text: aText, textId: aTextId});
+}
+
+export const blockDataText = function(aFieldName) {
+    return createElement(Dbm.react.text.Text, {text: Dbm.react.source.blockData(aFieldName)});
 }

package/repository/Item.js

@@ -13,6 +13,14 @@ export default class Item extends Dbm.core.LifeCycleObject {
         return this._id;
     }
 
+    set id(aValue) {
+        console.warn("Use setId instead");
+        debugger;
+        this.setId(aValue);
+
+        return this._id;
+    }
+
     register(aId) {
         this.setId(aId);
         Dbm.getInstance().repository.addItem(this);

package/repository/admin/index.js

@@ -0,0 +1,10 @@
+import Dbm from "../../index.js";
+
+export const getObjectTypeEditor = function(aTypeName) {
+    let objectTypeEditor = Dbm.repository.getItem("admin/objectTypeEditors/" + aTypeName);
+    if(!objectTypeEditor.editors) {
+        objectTypeEditor.setValue("editors", []);
+    }
+
+    return objectTypeEditor;
+}