dbm 1.0.6 → 1.1.1

package/react/admin/{Editor.js → editor/Editor.js}

@@ -1,5 +1,5 @@
 import React from "react";
-import Dbm from "../../index.js";
+import Dbm from "../../../index.js";
 
 import EditorBlock from "./EditorBlock.js";
 
@@ -7,6 +7,9 @@ export default class Editor extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
+        let editorId = "editor/instance" + Dbm.getInstance().getNextId();
+        this.item.register(editorId);
+
         let all = Dbm.flow.updatefunctions.logic.allAtValue(1);
 
         all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest").item.properties.status);
@@ -51,32 +54,38 @@ export default class Editor extends Dbm.react.BaseObject {
 
         if(aPreSign.status === 1) {
             let url = aPreSign.data.url;
-            console.log(url);
+            console.log(url, aPreSign.data);
 
-            const myHeaders = new Headers({
+            let headers = {
                 'Content-Type': aFile.type,
-                'x-amz-acl': 'public-read'
-            });
+                'Cache-Control': 'no-cache',
+            };
+
+            let additionalHeaders = aPreSign.data.additionalHeaders;
+            for(let objectName in additionalHeaders) {
+                headers[objectName] = additionalHeaders[objectName];
+            }
+
             fetch(url, {
                 method: 'PUT',
-                headers: myHeaders,
+                headers: new Headers(headers),
                 body: aFile
              }).then(() => {
-                resolve({success: true, file: {url: aPreSign.data.publicUrl}});
+                resolve({success: true, file: {url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier}});
              })
 
-            
         }
     }
 
     _callback_saveDataUpdated(aData) {
-        console.log("_callback_saveDataUpdated");
-        console.log(aData);
+        //console.log("_callback_saveDataUpdated");
+        //console.log(aData);
 
         this.getDynamicProp("value").getMostUpstreamProperty().setValue(aData);
     }
 
     _callback_editorChange(aApi, aEvent) {
+        console.log("_callback_editorChange");
         this.item.editor.save().then(this._callback_saveDataUpdatedBound);
     }
 
@@ -119,7 +128,14 @@ export default class Editor extends Dbm.react.BaseObject {
 
 
             let editorConfigItem = Dbm.getInstance().repository.getItem("editorjs");
-            let toolsFromConfig = editorConfigItem.tools;
+            let toolsFromConfig = {...editorConfigItem.tools};
+
+            let editorId = this.item.id;
+            for(let objectName in toolsFromConfig) {
+                let currentTool = {...toolsFromConfig[objectName]};
+                currentTool["config"] = {...currentTool["config"], "editorId": editorId};
+                toolsFromConfig[objectName] = currentTool;
+            }
 
             tools = {...tools, ...toolsFromConfig};
 		

package/react/admin/{EditorBlock.js → editor/EditorBlock.js}

@@ -1,4 +1,4 @@
-import Dbm from "../../index.js";
+import Dbm from "../../../index.js";
 
 export default class EditorBlock extends Dbm.core.BaseObject {
 
@@ -6,11 +6,18 @@ export default class EditorBlock extends Dbm.core.BaseObject {
         super();
 
         this._settings = aSettings;
-
+        
         this.item.setValue("data", aSettings.data ? aSettings.data : {});
         this.item.setValue("name", aSettings.config ? aSettings.config.name : "Unnamed block");
+        this.item.setValue("editor", aSettings.config ? Dbm.getInstance().repository.getItem(aSettings.config.editorId) : null);
         this.item.setValue("module", Dbm.getInstance().repository.getItem("moduleCreators/blocks/editor/" + aSettings.config.module));
+        this.item.setValue("editorBlock", this); 
+
+    }
 
+    dataUpdated() {
+        //console.log("dataUpdated")
+        this._settings.block.dispatchChange();
     }
 
     render(){
@@ -35,12 +42,16 @@ export default class EditorBlock extends Dbm.core.BaseObject {
     }
   
     save(aHolderElement){
-        console.log("save");
-        console.log(aHolderElement);
+        //console.log("save");
+        //console.log(aHolderElement);
 
         return this.item.data;
     }
 
+    static get sanitize() {
+        return {};
+    }
+
     static get toolbox() {
 
         //'<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 16 16" id="Module--Streamline-Streamline-3.0" height="16" width="16"><desc>Module Streamline Icon: https://streamlinehq.com</desc><g><path d="M14.21875 2.65625a0.625 0.625 0 0 1 0.46875 0.625v8.4375a0.625 0.625 0 0 1 -0.42500000000000004 0.59375l-6.55625 2.34375a0.625 0.625 0 0 1 -0.41250000000000003 0L0.725 12.318750000000001a0.625 0.625 0 0 1 -0.41250000000000003 -0.5874999999999999V3.2624999999999997a0.625 0.625 0 0 1 0.46875 -0.625L7.34375 0.33125000000000004a0.6625000000000001 0.6625000000000001 0 0 1 0.3125 0Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="m7.5 5.29375 0 9.393749999999999" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path><path d="M14.51875 2.8375 7.5 5.29375 0.48125 2.8375" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path></g></svg>'

package/react/admin/editor/EditorBlockFields.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditorBlockFields extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let textSource = new Dbm.react.source.ContextVariableSource();
+        textSource.item.path = "moduleData.editorData.name";
+
+        return React.createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: "fieldName", for: "test"},
+                React.createElement(Dbm.react.admin.editor.fields.TextField, {name: "fieldName", id: "test"})
+            ),
+                React.createElement(Dbm.react.admin.editor.fields.RichTextField, {name: "fieldName"}),
+                React.createElement(Dbm.react.admin.editor.fields.ImageField, {name: "image"})
+        );
+    }
+}
+

package/react/admin/editor/EditorBlockName.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class EditorBlockName extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let childrenAndSpacing = null;
+        let children = this.getPropValue("children");
+        if(children) {
+            childrenAndSpacing = React.createElement(React.Fragment, {},
+                React.createElement("div", {"className": "spacing standard"}),
+                children
+            )
+        }
+
+        return React.createElement("div", {"className": "editor-block-box editor-block-box-padding"},
+            React.createElement("div", {"className": "text-align-center"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.name"))
+            ),
+            childrenAndSpacing
+        );
+    }
+}
+

package/react/admin/editor/fields/CheckboxField.js

@@ -0,0 +1,54 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class CheckboxField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = false;
+        }
+
+        return returnData;
+    }
+
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+        this.context.moduleData.editorData.editorBlock.dataUpdated();
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.Checkbox, {checked: this.item.properties.value});
+    }
+}

package/react/admin/editor/fields/ImageField.js

@@ -0,0 +1,137 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class ImageField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+        this._callback_fileChangedBound = this._callback_fileChanged.bind(this);
+
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+
+        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": Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName), targetWidth: 120, className: "editor-preview background-contain"}),
+            ),
+            React.createElement("div", {className: "flex-row-item flex-resize"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"))
+            ),
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement("div", {onClick: () => {this.removeImage()}}, "Remove")
+            )
+        );
+
+        let uploadElement = React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"});
+
+        let elementSwitch =Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.value).setDefaultValue(imageElement).addCase(null, uploadElement);
+
+        this.item.requireProperty("element", null).connectInput(elementSwitch.output.properties.value);
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = null;
+        }
+
+        return returnData;
+    }
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+        this.context.moduleData.editorData.editorBlock.dataUpdated();
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        let fieldName = this.getPropValue("name");
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _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 = {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/admin/editor/fields/RichTextField.js

@@ -0,0 +1,75 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RichTextField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.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));
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = "";
+        }
+
+        return returnData;
+    }
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+
+        if(this.item.contentElement && newValue !== this.item.contentElement.innerHTML) {
+            this.item.contentElement.innerHTML = newValue;
+        }
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _elementChanged() {
+        //console.log("_elementChanged");
+
+        this.item.contentElement.innerHTML = this.item.value;
+        this.item.contentElement.addEventListener("input", this._callback_inputBound, false);
+
+    }
+
+    _callback_input(aEvent) {
+        //console.log("_callback_input");
+
+        this.item.value = "" + this.item.contentElement.innerHTML;
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {contentEditable: true, ref: this.createRef("contentElement"), className: "standard-field standard-field-padding"});
+    }
+}

package/react/admin/editor/fields/TextField.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class TextField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = "";
+        }
+
+        return returnData;
+    }
+
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.FormField, {value: this.item.properties.value, className: "standard-field standard-field-padding full-width"});
+    }
+}

package/react/admin/editor/fields/index.js

@@ -0,0 +1,4 @@
+export {default as TextField} from "./TextField.js";
+export {default as RichTextField} from "./RichTextField.js";
+export {default as ImageField} from "./ImageField.js";
+export {default as CheckboxField} from "./CheckboxField.js";

package/react/admin/editor/index.js

@@ -0,0 +1,6 @@
+export {default as Editor} from "./Editor.js";
+export {default as EditorBlock} from "./EditorBlock.js";
+export {default as EditorBlockName} from "./EditorBlockName.js";
+export {default as EditorBlockFields} from "./EditorBlockFields.js";
+
+export * as fields from "./fields/index.js";

package/react/admin/index.js

@@ -1,5 +1,4 @@
-export {default as Editor} from "./Editor.js";
-export {default as EditorBlock} from "./EditorBlock.js";
-export {default as EditorBlockName} from "./EditorBlockName.js";
 export {default as CreatePage} from "./CreatePage.js";
-export {default as EditPage} from "./EditPage.js";
+export {default as EditPage} from "./EditPage.js";
+
+export * as editor from "./editor/index.js";

package/react/animation/AnimatedElement.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class AnimatedElement extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let controller = this.getPropValue("controller");
+
+        controller.propertyInput("element", this.item.requireProperty("animationElement", null));
+    }
+
+    _renderMainElement() {
+        //console.log("AnimatedElement::_renderMainElement");
+        //console.log(this);
+        
+        let controller = this.getPropValue("controller");
+        let children = this.getPropValue("children");
+
+        return this._createMainElement("div", {"ref": this.createRef("animationElement"), "style": controller.jsxStyle}, children);
+    }
+}

package/react/animation/AnimationController.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class AnimationController extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        let updateStyleCommand = Dbm.commands.callFunction(this._updateStyle.bind(this));
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("element", null), updateStyleCommand);
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("style", {}), updateStyleCommand);
+
+        //METODO: add conversion to jsx
+
+        this.item.requireProperty("jsxStyle", {});
+    }
+
+    _updateStyle() {
+        //console.log("_updateStyle");
+        let element = this.item.element;
+
+        
+
+        if(element) {
+            
+            let styleArray = [];
+            
+            let styleObject = this.item.style;
+            for(let objectName in styleObject) {
+                styleArray.push(objectName + ": " + styleObject[objectName]);
+            }
+
+            element.style = styleArray.join("; ");
+        }
+
+        
+    }
+
+    _convertStyleToJsx() {
+
+    }
+
+    insertElement(aChildren) {
+
+        let reactElement = this.item.reactElement;
+        if(!reactElement) {
+            reactElement = React.createElement(Dbm.react.animation.AnimatedElement, {controller: this.item}, aChildren);
+            this.item.setValue("reactElement", reactElement);
+        }
+
+        return reactElement;
+    }
+}

package/react/animation/index.js

@@ -0,0 +1,22 @@
+import Dbm from "../../index.js";
+
+export {default as AnimatedElement} from "./AnimatedElement.js";
+export {default as AnimationController} from "./AnimationController.js";
+
+export const freeStyleAnimation = function() {
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    let styleObject = new Dbm.flow.updatefunctions.dom.StyleObject();
+    newAnimationController.item.propertyInput("style", styleObject.output.properties.style);
+    newAnimationController.item.setValue("styleProperties", styleObject);
+
+    return newAnimationController;
+}
+
+export const connectedAnimation = function(aStyleProperty) {
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    newAnimationController.item.propertyInput("style", aStyleProperty);
+
+    return newAnimationController;
+}

package/react/area/HasData.js

@@ -11,6 +11,11 @@ export default class HasData extends Dbm.react.BaseObject {
         //console.log(this);
         
         let data = this.getPropValue("check");
+        let checkType = this.getPropValue("checkType");
+
+        if(checkType === "invert/default") {
+            data = !data;
+        }
 
         if(data) {
             return React.createElement(React.Fragment, {}, this.getPropValue("children"));

package/react/area/InsertElement.js

@@ -10,7 +10,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
         //console.log("InsertElement::render");
         //console.log(this);
         
-        let element = this.getDynamicProp("element").value;
+        let element = this.getPropValue("element");
 
         if(!element) {
             return React.createElement("div", {}, "No element set");