dbm 1.1.5 → 1.1.6

package/flow/controllers/index.js

@@ -1,3 +1,4 @@
 export * as select from "./select/index.js";
 export * as edit from "./edit/index.js";
-export * as transform from "./transform/index.js";
+export * as transform from "./transform/index.js";
+export * as interaction from "./interaction/index.js";

package/flow/controllers/interaction/MoveElement.js

@@ -0,0 +1,179 @@
+import Dbm from "../../../index.js";
+
+export default class MoveElement extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._element = null;
+        this._startX = 0;
+		this._startY = 0;
+        this._startXParameter = 0;
+        this._startYParameter = 0;
+
+        this._callback_mouseMoveBound = this._callback_mouseMove.bind(this);
+        this._callback_mouseUpBound = this._callback_mouseUp.bind(this);
+        this._callback_startDragBound = this._callback_startDrag.bind(this);
+
+        this.item.requireProperty("element", null);
+        Dbm.flow.addUpdateCommand(this.item.properties.element, Dbm.commands.callFunction(this._elementUpdated.bind(this)));
+
+        let updateXCommand = Dbm.commands.callFunction(this._updateX.bind(this));
+        let updateYCommand = Dbm.commands.callFunction(this._updateY.bind(this));
+
+        let clampXCommand = Dbm.commands.callFunction(this._clampX.bind(this));
+        let clampYCommand = Dbm.commands.callFunction(this._clampY.bind(this));
+
+        this.item.requireProperty("minX", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.minX, updateXCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.minX, clampXCommand);
+        this.item.requireProperty("maxX", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxX, updateXCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxX, clampXCommand);
+
+        this.item.requireProperty("minY", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.minY, updateYCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.minY, clampYCommand);
+        this.item.requireProperty("maxY", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxY, updateYCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxY, clampYCommand);
+
+        this.item.requireProperty("xParameter", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.xParameter, updateXCommand);
+        this.item.requireProperty("yParameter", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.yParameter, updateYCommand);
+
+        this.item.requireProperty("scaleX", 1);
+        Dbm.flow.addUpdateCommand(this.item.properties.scaleX, updateXCommand);
+        this.item.requireProperty("scaleY", 1);
+        Dbm.flow.addUpdateCommand(this.item.properties.scaleY, updateYCommand);
+
+        this.item.requireProperty("invertX", 1);
+        this.item.requireProperty("invertY", 1);
+
+        this.item.requireProperty("x", 0);
+        this.item.requireProperty("y", 0);
+
+        this.item.requireProperty("isDragging", false);
+    }
+
+    _elementUpdated() {
+        console.log("_elementUpdated");
+
+        if(this._element) {
+            let element = this._element;
+            element.removeEventListener("mousedown", this._callback_startDragBound);
+            element.removeEventListener("touchstart", this._callback_startDragBound);
+        }
+
+        if(this.item.element) {
+            let element = this.item.element;
+            element.addEventListener("mousedown", this._callback_startDragBound);
+            element.addEventListener("touchstart", this._callback_startDragBound);
+        }
+        this._element = this.item.element;
+    }
+
+    _updateX() {
+        this.item.x = this.item.xParameter*this.item.scaleX;
+    }
+
+    _clampX() {
+        let minX = this.item.minX;
+		let maxX = this.item.maxX;
+		
+		this.item.xParameter = Math.max(minX, Math.min(this.item.xParameter, maxX));
+    }
+
+    _clampY() {
+        let minY = this.item.minY;
+		let maxY = this.item.maxY;
+		
+		this.item.yParameter = Math.max(minY, Math.min(this.item.yParameter, maxY));
+    }
+
+    _updateY() {
+        this.item.y = this.item.yParameter*this.item.scaleY;
+    }
+
+
+    _startMove(aX, aY) {
+		//console.log(aX, aY);
+		
+		this._startXParameter = this.item.xParameter;
+        this._startYParameter = this.item.yParameter;
+		this._startX = aX;
+		this._startY = aY;
+	}
+	
+	_updateMove(aX, aY) {
+		console.log("_updateMove");
+		//console.log(aX, aY);
+		
+		let x = this._startXParameter + this.item.invertX*(aX-this._startX)/this.item.scaleX;
+		let y = this._startYParameter + this.item.invertY*(aY-this._startY)/this.item.scaleY;
+        
+		let minX = this.item.minX;
+		let maxX = this.item.maxX;
+		
+		let minY = this.item.minY;
+		let maxY = this.item.maxY;
+		
+		this.item.xParameter = Math.max(minX, Math.min(x, maxX));
+        this.item.yParameter = Math.max(minY, Math.min(y, maxY));
+		
+        console.log(this.item.xParameter);
+        console.log(this.item.yParameter);
+	}
+	
+	_callback_mouseUp(aEvent) {
+		console.log("_callback_mouseUp");
+		//console.log(aEvent);
+		
+		if(aEvent.type === "touchend") {
+			this._updateMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._updateMove(aEvent.pageX, aEvent.pageY);
+		}
+		
+		document.removeEventListener("mousemove", this._callback_mouseMoveBound, false);
+		document.removeEventListener("mouseup", this._callback_mouseUpBound, false);
+		
+		document.removeEventListener("touchmove", this._callback_mouseMoveBound, false);
+		document.removeEventListener("touchup", this._callback_mouseUpBound, false);
+
+        this.item.isDragging = false;
+	}
+	
+	_callback_mouseMove(aEvent) {
+		console.log("_callback_mouseMove");
+		//console.log(aEvent);
+		
+		if(aEvent.type === "touchmove") {
+			this._updateMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._updateMove(aEvent.pageX, aEvent.pageY);
+		}
+	}
+	
+	_callback_startDrag(aEvent) {
+		console.log("_callback_startDrag");
+		//console.log(aEvent, aEvent.type);
+		
+		if(aEvent.type === "touchstart") {
+			this._startMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._startMove(aEvent.pageX, aEvent.pageY);
+		}
+		
+		document.addEventListener("mousemove", this._callback_mouseMoveBound, false);
+		document.addEventListener("mouseup", this._callback_mouseUpBound, false);
+		
+		document.addEventListener("touchmove", this._callback_mouseMoveBound, false);
+		document.addEventListener("touchup", this._callback_mouseUpBound, false);
+
+        this.item.isDragging = true;
+	}
+}

package/flow/controllers/interaction/index.js

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

package/flow/updatefunctions/dom/ElementPosition.js

@@ -11,7 +11,7 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
 		
 		this.output.register("screenX", NaN);
 		this.output.register("screenY", NaN);
-		
+
 		this.output.register("parameterX", NaN);
 		this.output.register("parameterY", NaN);
 		

package/flow/updatefunctions/logic/PositionedItems.js

@@ -0,0 +1,68 @@
+import Dbm from "../../../index.js";
+
+export default class PoisitonedItems extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("elementWidth", 0);
+        this.input.register("itemWidth", 0);
+        this.input.register("itemSpacing", 0);
+        this.input.register("padding", 0);
+        this.input.register("numberOfItems", 0);
+
+        this.output.register("startPosition", 0);
+        this.output.register("parameterLength", 0);
+
+        this.output.register("minParameter", 0);
+        this.output.register("maxParameter", 0);
+
+        /*
+        let parameter = minParameter;
+
+        let x = padding+startPosition-parameter*parameterLength;
+
+        console.log(minParameter, maxParameter, fullWidth, startPosition);
+        console.log(x);
+
+        parameter = maxParameter;
+
+        x = padding+startPosition-parameter*parameterLength;
+
+        console.log(x);
+        */
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let elementWidth = this.input.elementWidth;
+        let itemWidth = this.input.itemWidth;
+        let itemSpacing = this.input.itemSpacing;
+        let padding = this.input.padding;
+
+        let visualWidth = elementWidth-2*padding;
+        let startPosition = (visualWidth-itemWidth)/2;
+
+        let parameterLength = itemWidth+itemSpacing;
+        let fullWidth = this.input.numberOfItems*parameterLength-itemSpacing;
+
+        let minParameter = 0;
+        let maxParameter = 0;
+
+        if(fullWidth > visualWidth) {
+            minParameter = startPosition/parameterLength;
+            maxParameter = (fullWidth-(visualWidth-startPosition))/parameterLength;
+        }
+        else {
+            startPosition = (visualWidth-fullWidth)/2;
+            parameterLength = 0;
+        }
+
+        this.output.startPosition = startPosition;
+        this.output.parameterLength = parameterLength;
+
+        this.output.minParameter = minParameter;
+        this.output.maxParameter = maxParameter;
+    }
+}

package/flow/updatefunctions/logic/index.js

@@ -11,6 +11,7 @@ export {default as Any} from "./Any.js";
 export {default as AllAtValue} from "./AllAtValue.js";
 export {default as WhenMatched} from "./WhenMatched.js";
 export {default as Invert} from "./Invert.js";
+export {default as PositionedItems} from "./PositionedItems.js";
 
 export let subtract = function(aInput1 = 0, aInput2 = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();

package/package.json

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

package/react/BaseObject.js

@@ -112,6 +112,10 @@ export default class BaseObject extends Component {
         return refToProperty;
     }
 
+    componentWillUnmount() {
+        
+    }
+
     render() {
         return this._renderMainElement();
     }

package/tracking/MetaPixelTracker.js

@@ -4,7 +4,8 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
     _construct() {
         super._construct();
 
-		this.item.requireProperty("pixelId")
+		this._isStarted = false;
+		this.item.requireProperty("pixelId");
     }
 
     _setupFunction() {
@@ -45,6 +46,7 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
 	
 	startMarketingTracking() {
 
+		this._isStarted = true;
 		this._setupFunction();
 		Dbm.loading.loadScript("https://connect.facebook.net/en_US/fbevents.js");
 
@@ -85,6 +87,8 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
         console.log("trackEvent");
         console.log(aEventName, aData);
 
+		if(!this._isStarted) return;
+
 		if(aEventName === "Purchase") {
 			window.fbq('track', 'Purchase', this._convertGooogleAnalyctisData(aData), {eventID: aData.transaction_id});
 		}
@@ -103,10 +107,12 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
     }
 
     trackCurrentPage() {
+		if(!this._isStarted) return;
         window.fbq("track", "PageView");
     }
 
     trackPage(aUrl) {
+		if(!this._isStarted) return;
         window.fbq("track", "PageView");
     }
 }

package/tracking/TagManagerTracker.js

@@ -0,0 +1,58 @@
+import Dbm from "../index.js";
+
+export default class TagManagerTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.requireProperty("tagManagerId");
+		this.item.requireProperty("customDataLayerName");
+
+    }
+
+    loadTagManager() {
+
+		let id = this.item.tagManagerId;
+
+		let url = "https://www.googletagmanager.com/gtm.js?id="+id;
+		if(this.item.customDataLayerName) {
+			url += "&l=" + this.customDataLayerName;
+		}
+		Dbm.loading.loadScript(url);
+		
+		return this;
+	}
+
+	startTracking() {
+
+	}
+
+    startStatisticsTracking() {
+		console.log("TagManagerTracker::startStatisticsTracking");
+		this.loadTagManager();
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+		
+		this.loadTagManager();
+		
+		return this;
+	}
+
+	stopTracking() {
+		
+	}
+
+	trackEvent(aEventName, aData) {
+        
+    }
+
+    trackCurrentPage() {
+        
+    }
+
+    trackPage(aUrl) {
+        
+    }
+}

package/tracking/index.js

@@ -3,6 +3,7 @@ import Dbm from "../index.js";
 export {default as Controller} from "./Controller.js";
 export {default as DataLayerTracker} from "./DataLayerTracker.js";
 export {default as MetaPixelTracker} from "./MetaPixelTracker.js";
+export {default as TagManagerTracker} from "./TagManagerTracker.js";
 
 export const setup = function() {
     
@@ -24,4 +25,11 @@ export const addMetaPixel = function(aPixelId) {
 
 export const setCurrency = function(aCurrency) {
     Dbm.getInstance().repository.getItem("trackingController").currency = aCurrency;
+}
+
+export const addTagManagerTracking = function(aId) {
+    console.log("addTagManagerTracking");
+    let tracker = new Dbm.tracking.TagManagerTracker();
+    tracker.item.tagManagerId = aId;
+    Dbm.getInstance().repository.getItem("trackingController").controller.addTracker(tracker.item);
 }