dbm 1.0.2 → 1.0.4

package/flow/updatefunctions/dom/ElementPosition.js

@@ -0,0 +1,89 @@
+import Dbm from "../../../index.js";
+
+export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("element", null);
+		this.input.register("prepareX", 0);
+		this.input.register("prepareY", 0);
+		
+		this.output.register("screenX", NaN);
+		this.output.register("screenY", NaN);
+		
+		this.output.register("parameterX", NaN);
+		this.output.register("parameterY", NaN);
+		
+		this.output.register("visible", false);
+		this.output.register("prepare", false);
+
+        this._callback_scrollBound = this._callback_scroll.bind(this);
+    }
+
+    start() {
+		window.addEventListener("resize", this._callback_scrollBound, false);
+		window.addEventListener("scroll", this._callback_scrollBound, false);
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let element = this.input.element;
+
+        if(element) {
+			console.log(element);
+            //this.output.width = element.clientWidth;
+            //this.output.height = element.clientHeight;
+        }
+        else {
+            //this.output.width = 0;
+            //this.output.height = 0;
+        }
+    }
+
+    _callback_scroll(aEvent) {
+        console.log("_callback_scroll");
+
+        let element = this.input.element;
+
+        if(element) {
+			
+			//let thePageXOffset = window.pageXOffset;
+			let theInnerWidth = window.innerWidth;
+			//let thePageYOffset = window.pageYOffset;
+			let theInnerHeight = window.innerHeight;
+			
+			//console.log(theInnerWidth, theInnerHeight);
+			
+			let rect = element.getBoundingClientRect();
+			//console.log(rect);
+			
+			let prepareX = this.input.prepareX;
+			let prepareY = this.input.prepareY;
+			
+			let screenX = rect.x;
+			let screenY = rect.y;
+			
+			let elementWidth = rect.width;
+			let elementHeight = rect.height;
+			
+			let visible = ((screenX < theInnerWidth) && (screenX+elementWidth > 0)) && ((screenY < theInnerHeight) && (screenY+elementHeight > 0));
+			let prepare = ((screenX-prepareX < theInnerWidth) && (screenX+elementWidth+prepareX > 0)) && ((screenY-prepareY < theInnerHeight) && (screenY+elementHeight+prepareY > 0));
+			
+			let parameterX = (screenX+elementWidth)/(theInnerWidth+elementWidth);
+			let parameterY = (screenY+elementHeight)/(theInnerHeight+elementHeight);
+			
+			this.output.properties.screenX._internal_setValueInFlowOutsideOfUpdate(screenX);
+			this.output.properties.screenY._internal_setValueInFlowOutsideOfUpdate(screenY);
+			
+			this.output.properties.parameterX._internal_setValueInFlowOutsideOfUpdate(parameterX);
+			this.output.properties.parameterY._internal_setValueInFlowOutsideOfUpdate(parameterY);
+			
+			this.output.properties.visible._internal_setValueInFlowOutsideOfUpdate(visible);
+			this.output.properties.prepare._internal_setValueInFlowOutsideOfUpdate(prepare);
+        }
+    }
+}

package/flow/updatefunctions/dom/index.js

@@ -1,3 +1,4 @@
 export {default as ElementSize} from "./ElementSize.js";
 export {default as StyleObject} from "./StyleObject.js";
-export {default as HorizontalFlip} from "./HorizontalFlip.js";
+export {default as HorizontalFlip} from "./HorizontalFlip.js";
+export {default as ElementPosition} from "./ElementPosition.js";

package/graphapi/webclient/WebSocketConnection.js

@@ -4,22 +4,39 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     _construct() {
         super._construct();
 
+		this._url = null;
         this._webSocket = null;
+		
+		this._intervalId = -1;
         this._callback_onOpenBound = this._callback_onOpen.bind(this);
         this._callback_onMessageBound = this._callback_onMessage.bind(this);
+		this._callback_onMessageBound = this._callback_onMessage.bind(this);
+		this._callback_onCloseBound = this._callback_onClose.bind(this);
+		this._callback_onErrorBound = this._callback_onError.bind(this);
+		this._callback_sendHeartbeatBound = this._callback_sendHeartbeat.bind(this);
 
         this.item.setValue("requests", []);
         this.item.setValue("status", 0);
     }
 
     setup(aUrl) {
-        this._webSocket = new WebSocket(aUrl);
-        this.item.setValue("status", 2);
-
-        this._webSocket.onopen = this._callback_onOpenBound;
-        this._webSocket.onmessage = this._callback_onMessageBound;
+		this._url = aUrl;
+		this._connect();
+		
         return this;
     }
+	
+	_connect() {
+		if(this.item.status === 0) {
+	        this._webSocket = new WebSocket(this._url);
+	        this.item.setValue("status", 2);
+
+	        this._webSocket.onopen = this._callback_onOpenBound;
+	        this._webSocket.onmessage = this._callback_onMessageBound;
+			this._webSocket.onclose = this._callback_onCloseBound;
+			this._webSocket.onerror = this._callback_onErrorBound;
+		}
+	}
 
     _getRequestItem() {
         let requestId = "graphApi/webSocketRequest" + Dbm.getInstance().getNextId();
@@ -94,10 +111,47 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 
     _callback_onOpen(aEvent) {
-        //console.log("_callback_onOpen");
+        console.log("_callback_onOpen");
+
+		if(this._intervalId === -1) {
+			this._intervalId = setInterval(this._callback_sendHeartbeatBound, 20*1000);
+		}
+    }
+	
+    _callback_onClose(aEvent) {
+        console.log("_callback_onClose");
+		console.log(aEvent);
+		
+		if(this._intervalId !== -1) {
+			clearInterval(this._intervalId);
+			this._intervalId = -1;
+		}
+		
+		if(this._webSocket) {
+			this._webSocket.onopen = null;
+			this._webSocket.onmessage = null;
+			this._webSocket.onclose = null;
+			this._webSocket.onerror = null;
+			
+			this._webSocket = null;
+		}
+		
+		this.item.setValue("status", 0);
+		this._connect();;
+    }
+	
+    _callback_onError(aEvent) {
+        console.log("_callback_onError");
+		console.log(aEvent);
 
         //MENOTE: do nothing
     }
+	
+	_callback_sendHeartbeat() {
+		console.log("_callback_sendHeartbeat");
+		
+		this._webSocket.send(JSON.stringify({"type": "heartbeat"}));
+	}
 
     _connectionReady() {
         this.item.setValue("status", 1);
@@ -213,6 +267,9 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
                     this._connectionReady();
                 }
                 break;
+			case "heartbeat/response":
+				//MENOTE: do nothing
+				break;
             default:
                 console.warn("Unknown message type " + data.type);
                 break;

package/package.json

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

package/react/BaseObject.js

@@ -175,7 +175,7 @@ export default class BaseObject extends Component {
             }
         }
 
-        if(!children.length) {
+        if(!children || !children.length) {
             return createElement(aType, newProps);
         }
 

package/react/admin/EditPage.js

@@ -26,6 +26,7 @@ export default class EditPage extends Dbm.react.BaseObject {
             {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
             {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
             {"type": "setField", "data": {"value": this.item.description, "field": "meta/description"}},
+			{"type": "setField", "data": {"value": (new Date()).toISOString(), "field": "lastModified"}},
             {"type": "setUrl", "data": {"value": this.item.url}}
         ], ["content", "title", "url", "meta/description"]);
     }

package/react/area/ScrollActivatedArea.js

@@ -0,0 +1,44 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class ScrollActivatedArea extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		let elementProperty = this.item.requireProperty("element", null);
+		this.item.requireProperty("activated", false);
+		
+		let position = new Dbm.flow.updatefunctions.dom.ElementPosition();
+		this.item.setValue("position", position);
+		position.input.properties.element.connectInput(elementProperty);
+		
+		let prepareProperty = this.item.requireProperty("prepare", 100);
+		position.input.properties.prepareY.connectInput(prepareProperty);
+		
+		position.start();
+		
+		Dbm.flow.addUpdateCommand(position.output.properties.prepare, Dbm.commands.callFunction(this._prepareChanged.bind(this)));
+    }
+	
+	_prepareChanged() {
+		//console.log("_prepareChanged");
+		
+		if(this.item.position.output.prepare) {
+			this.item.setValue("activated", true);
+		}
+	}
+
+    _renderMainElement() {
+        //console.log("ScrollActivatedArea::render");
+        //console.log(this);
+        
+		return this._createMainElement("div", {"ref": this.createRef("element")},
+			React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.activated},
+				this.getPropValue("children")
+			)
+		);
+
+        return null;
+    }
+}
+

package/react/area/index.js

@@ -1,2 +1,3 @@
 export {default as InsertElement} from "./InsertElement.js";
-export {default as HasData} from "./HasData.js";
+export {default as HasData} from "./HasData.js";
+export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";