dbm 1.1.23 → 1.2.0

package/dbm.js

@@ -1,16 +1,19 @@
 import {GlobalObject} from "./core/index.js";
 
-if(!globalThis.dbm) {
-    globalThis.dbm = new GlobalObject();
+export const setupGlobalInstance = function(aObject, aPath) {
+    if(!globalThis.dbm) {
+        globalThis.dbm = new GlobalObject();
+    }
 }
 
-export let getInstance = function() {
+
+export const getInstance = function() {
     return globalThis.dbm;
 }
 
 //export {getInstance};
 
-export let objectPath = function(aObject, aPath) {
+export const objectPath = function(aObject, aPath) {
     //console.log("objectPath");
     
     let currentObject = aObject;
@@ -57,7 +60,7 @@ export let objectPath = function(aObject, aPath) {
     return currentObject;
 }
 
-export let setAtObjectPath = function(aObject, aPath, aValue) {
+export const setAtObjectPath = function(aObject, aPath, aValue) {
     aPath += "";
     if(aPath.length === 0) {
         return 0;

package/flow/updatefunctions/dom/ElementPosition.js

@@ -30,12 +30,10 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
     }
 
     _update() {
-        console.log("_update");
+        //console.log("_update");
 
         let element = this.input.element;
 
-		console.log(element, this.input.prepareX, this.input.prepareY);
-
         if(element) {
 			
             //this.output.width = element.clientWidth;
@@ -85,7 +83,7 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
     }
 
     _callback_scroll(aEvent) {
-        console.log("_callback_scroll");
+        //console.log("_callback_scroll");
 
         let element = this.input.element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/form/Form.js

@@ -0,0 +1,49 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Form extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._callback_submitBound = this._callback_submit.bind(this);
+    }
+
+    _callback_submit(aEvent) {
+        //console.log("_callback_submit");
+        //console.log(aEvent);
+
+        let preventSubmit = this.getPropValue("preventSubmit");
+        if(preventSubmit) {
+            aEvent.preventDefault();
+        }
+
+        let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            aEvent.preventDefault();
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+
+            let currentArray = commands;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let command = currentArray[i];
+                command.perform(this, aEvent);
+            }
+        }
+        else{
+            return !preventSubmit;
+        }
+
+        return false;
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+        return this._createMainElement("form", {onSubmit: this._callback_submitBound}, children);
+    }
+}
+

package/react/form/index.js

@@ -8,4 +8,5 @@ export {default as GraphApiSelectOrCreateObject} from "./GraphApiSelectOrCreateO
 export {default as GraphApiImage} from "./GraphApiImage.js";
 export {default as EditArray} from "./EditArray.js";
 export {default as TextArea} from "./TextArea.js";
-export {default as EditObjectProperty} from "./EditObjectProperty.js";
+export {default as EditObjectProperty} from "./EditObjectProperty.js";
+export {default as Form} from "./Form.js";

package/react/image/CoverScaledImage.js

@@ -10,6 +10,7 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         delete aProps["image"];
         delete aProps["targetWidth"];
         delete aProps["targetHeight"];
+        delete aProps["skipWindowSize"];
     }
 
     _renderMainElement() {
@@ -17,7 +18,15 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         let image = this.getPropValue("image");
         let width = this.getPropValue("targetWidth");
         let height = this.getPropValue("targetHeight");
-        let url = Dbm.utils.UrlFunctions.createCoverScaledImageUrl(image, width, height);
+        let url;
+        
+        if(this.getPropValue("skipWindowSize")) {
+            url = Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, Math.floor(window.devicePixelRatio), 10000);
+        }
+        else {
+            url = Dbm.utils.UrlFunctions.createCoverScaledImageUrl(image, width, height);
+        }
+        
 
         let newProps = this._copyProps({src: url});
 
@@ -29,6 +38,16 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         let elementType = this.getPropValue("elementType");
         if(elementType) {
             newProps["elementType"] = elementType;
+
+            if(elementType === "img" && Dbm.utils.UrlFunctions.imageShouldScale(image)) {
+
+                let images = [];
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 1, 10000) + " 1x");
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 2, 10000) + " 2x");
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 3, 10000) + " 3x");
+
+                newProps["srcset"] = images.join(", ");
+            }
         }
         
         return React.createElement(Dbm.react.image.Image, newProps, this.getPropValue("children"));

package/react/interaction/CommandButton.js

@@ -12,10 +12,23 @@ export default class CommandButton extends Dbm.react.BaseObject {
         //console.log("_callback_click");
         //console.log(aEvent);
 
-        let command = this.getPropValue("command");
-
-        command.perform(this, aEvent);
+        let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
 
+            let currentArray = commands;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let command = currentArray[i];
+                command.perform(this, aEvent);
+            }
+        }
+        else{
+            console.warn("Button doesn't have any commands", this);
+        }
     }
 
     _performClone(aChild, aProps) {

package/utils/UrlFunctions.js

@@ -31,7 +31,7 @@ export let createScaledImageUrlWithPixelDensity = function(aImageData, aWantedWi
 }
 
 export let createScaledImageUrl = function(aImageData, aWantedWidth) {
-    return createScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, window.devicePixelRatio, window.innerWidth);
+    return createScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export let getCoverScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -56,7 +56,24 @@ export let getCoverScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth,
 }
 
 export const getCoverScaledImageUrl = function(aUrl, aWantedWidth, aWantedHeight) {
-    return getCoverScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return getCoverScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
+}
+
+export const imageShouldScale = function(aImageData) {
+    if(!aImageData || !aImageData["url"]) {
+        return false;
+    }
+
+    let url = aImageData["url"];
+    if(url.substring(url.length-4).toLowerCase() === ".svg") {
+        return false;
+    }
+
+    if(!aImageData["resizeUrl"]) {
+        return false;
+    }
+
+    return true;
 }
 
 export let createCoverScaledImageUrlWithPixelDensity = function(aImageData, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -70,14 +87,14 @@ export let createCoverScaledImageUrlWithPixelDensity = function(aImageData, aWan
     }
 
     if(aImageData["resizeUrl"]) {
-        url = getCoverScaledImageUrl(aImageData["resizeUrl"], aWantedWidth, aWantedHeight);
+        url = getCoverScaledImageUrlWithPixelDensity(aImageData["resizeUrl"], aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize);
     }
 
     return url;
 }
 
 export let createCoverScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {
-    return createCoverScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return createCoverScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export const getContainScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -102,7 +119,7 @@ export const getContainScaledImageUrlWithPixelDensity = function(aUrl, aWantedWi
 }
 
 export const getContainScaledImageUrl = function(aUrl, aWantedWidth, aWantedHeight) {
-    return getContainScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return getContainScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export let createContainScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {