cavalion-blocks - npm Package Compare versions

Comparing version 0.9.34 to 0.9.35

.md

@@ -1,15 +0,14 @@
-* [CHANGELOG.md]() - [README.md]()
-* [devtools/Workspace<blocks>](/Library/vcl-comps/devtools/Workspace$/blocks.js)
-* [package.json]()
+* [CHANGELOG.md]() - [README.md]() - [package.json]()
+* [.workspace](`(devtools/Workspace<${ws.getSpecializer()}>)`) - [.app-main](`(devtools/Main<${app.getSpecializer()}>)`)
 
-##
+# cavalion-blocks
 
 > * [src](:/) / [blocks.less](src/:)
-	
->> * [Blocks.js](src/:) - [Factory.js](src/:)  
-[Factory.parse.js](src/:)
 
+>> * [Blocks.js](src/:) - [Factory.js](src/:)
+* [Factory.parse.js](src/:)
+
 #
 
->> * **[cavalion-blocks/](src/:)** _<= Library/cavalion-blocks_
+>> * **[cavalion-blocks](src/:/)** _<= Library/cavalion-blocks_
 	* [code](src/cavalion-blocks/:/) - [devtools](src/cavalion-blocks/:/) - [docs](src/cavalion-blocks/:/) - [ide](src/cavalion-blocks/:/) - [index](src/cavalion-blocks/:/)
@@ -19,9 +18,19 @@ * [bro](src/cavalion-blocks/:/) - [veldapps](src/cavalion-blocks/:/) - [veldoffice](src/cavalion-blocks/:/) - [lost+found](src/cavalion-blocks/:/)
 		* [Container](src/prototypes/:.js) [.glassy](src/prototypes/Container:.js) - [.zoomy](src/prototypes/Container:.js)
-			* [.dragable](src/prototypes/Container:.js) - [.sizeable](src/prototypes/Container:.js)
-		* [Hover](src/prototypes/Hover.js) - _basically an alias for a superclassed Container_
+			* [.draggable](src/prototypes/Container:.js) - [.sizeable](src/prototypes/Container:.js)
+		* [Hover](src/prototypes/:.js) - _basically an alias for a superclassed Container_
+		* [ListOf](src/prototypes/:.js)
 
-# `0524`
+# `2023/01/23` Timeline.amcharts3
 
-* Glassy is different [Map]([!veldapps/:])
+**Timeline<>** should feature:
 
+* series, axes, guides, data
+* `["Array", ("series"), {}]` - containing the metadata of the series to be rendered
+	* appearance - amcharts3.amGraph
+	* axis
+	* dataKey
+* `["Array", ("data"), {}]` - containing the data to be rendered
+	* keys: timestamp, value1, value2, value3, ...
+
+
 # `2022/04/17` Container.zoomy needs to emerge
@@ -28,0 +37,0 @@

package.json

 {
   "name": "cavalion-blocks",
-  "version": "0.9.34",
+  "version": "0.9.35",
   "description": "`blocks-dot-js` `[].js`",
@@ -5,0 +5,0 @@ "main": "README.js",

src/Blocks.js

@@ -362,4 +362,4 @@ define(function(require) {
         	var factory = new Factory(require, uri || source[0] || "", sourceUri, options.setIsRoot || false);
-        	var p = new Promise(function(resolve, reject) {
-        		factory.load(source, function() {
+        	return new Promise((resolve, reject) => {
+        		factory.load(source, () => {
         			try {
@@ -372,8 +372,4 @@ var root = factory.newInstance(owner, uri, options);
         			}
-        		}, function() {
-        			reject.apply(this, arguments);
-        		});
+        		}, reject);
         	});
-        	
-        	return p;
         },
@@ -380,0 +376,0 @@

src/Factory.js

@@ -47,3 +47,3 @@ define(function(require) {
 	var parse = require("./Factory.parse");
-
+	
 	var Factory = require("js/defineClass");
@@ -554,3 +554,3 @@ var Class = require("js/Class");
 		statics: {
-			
+
 			implicit_sources: {},
@@ -662,2 +662,4 @@ load: function(name, parentRequire, load, config) {
 
+		    	console.info("blocks/Factory.unreq: " + name)
+
 			    var factories = factory._root.inherits;
@@ -664,0 +666,0 @@ factories && factories.forEach(function(name) {

src/prototypes/Console.js

 "use js";
 
 ["vcl-ui:Console", {
-	
+	align: "client",
 	handlers: {
@@ -6,0 +6,0 @@ loaded() {

src/prototypes/Container.glassy.js

@@ -0,38 +1,54 @@
+"use util/HtmlElement";
+
+var HE = require("util/HtmlElement");
+
 var WIDTH = 985, HEIGHT = 600, ZOOM_C = 1;
 
-[(""), {
-	autoSize: "both", autoPosition: "all", align: "none",
-	classes: "right shrink-to-corner with-shadow",
-	css: {
+[("Container"), {
+	autoSize: "none", _autoPosition: "all", align: "none",
+	classes: "with-shadow",
+	draggable: true,
+	
+	height: 500, width: 375,
+	top: 100, left: 200,
+	
+	css: { 
+		/* TODO CSS definitions must (eventually) be moved to App.glassy */
+
 		'': {
-			'flex-shrink': "0",
-			// 'box-shadow': "0 0 20px 10px rgba(0,0,0,.2)",
-			'height': HEIGHT + "px",
-			'width': WIDTH + "px",
-			// 'margin-left': "auto",
-			// 'margin-right': "auto",
+			// 'height': HEIGHT + "px",
+			// 'width': WIDTH + "px",
 			'top': "5%", 
-			'border-radius': "25px",
-			'background': "transparent",
-			'align-self': "center",
-			'box-sizing': "border-box",
+			// 'height': "100%",
+			
+			'min-width': "54px",
+			'min-height': "54px",
+
+			'border-radius': "5px",
 			'z-index': "1999",
-			// "border': "3px solid rgba(0,0,0,0.05)",
-			'transition': "transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s"
+			'backdrop-filter': "blur(10px)",
+			'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s"
 		},
-		'.wrapper': {
-			'position': "relative",
-			'border-radius': "20px",
-			'border': "7px solid rgba(0,0,0,0)",
-			'overflow': "hidden",
-			'height': "100%",
-			'transition': "border-color 0.45s ease 0s",
-			// '&:hover': {
-			// 	'border-color': "gold"
-			// }
+		'&:hover': {
+			'box-shadow': "0 0 10px 5px rgba(0,0,0,.2)",
+			'cursor': "move",
+			'.client': "border-color: rgba(56,127,217,0.025); background-color:rgba(155, 155, 155, 0.2);"
 		},
-		"&.glassy-overlay > .wrapper.no-margin": "margin:0;",
-		"&.right": "right: 40px; transform-origin: top right;",
-		"&.left": "left: 40px; transform-origin: top left;",
-		
+		// '&.square': {
+		// 	'min-width': 175 + "px",
+		// 	'min-height': 175 + "px"
+		// },
+		'&.dragging': {
+			'transition': "box-shadow 0.15s ease 0s" || "transform 75ms ease-out 0s, left 75ms ease-out 0s, right 75ms ease-out 0s, top 75ms ease-out 0s, bottom 75ms ease-out 0s, width 75ms ease-out 0s, height 75ms ease-out 0s, border-width 0.45s ease 0s",
+
+			'box-shadow': "0 0 20px 10px rgba(0,0,0,.2)",
+			'.client': {
+				'border-color': "rgba(56,127,217,0.4)" || "rgba(255,215,0,0.75)"
+			}
+			
+		},
+		'&.glassy-overlay > .client.no-margin': "margin:0;",
+		'&.right': "right: 40px; transform-origin: top right;",
+		'&.left': "left: 40px; transform-origin: top left;",
+
 		'&.shrink-to-corner:not(:hover)': {
@@ -42,4 +58,4 @@ 'width': 175 + "px",
 		},
-
 		'&:not(.no-transparent-effects)': {		
+			'*': "text-shadow: none;",
 			'.{List}': "border-radius:5px;",
@@ -51,3 +67,2 @@ '.{ListHeader}': {
 			},
-			'*': "text-shadow: none;",
 			'.{Input}': {
@@ -57,22 +72,141 @@ 'input': 'background-color: rgba(255,255,255,0.2);',
 			}
-		}
+		},
+		
+		'input': {
+			// 'flex': "1 1 0%",
+		    // 'transition': "width 0.5s ease 0s",
+		    // 'width': "150px"
+		    'padding': "5px",//"5px 24px",
+		    'border-radius': "5px",
+		    'border': "none",
+		    'background': "rgba(255, 255, 255, 0.2)"
+		},
+		
+		'.client': {
+			'position': "relative",
+			'border-radius': "5px",
+			'border': "7px solid rgba(0,0,0,0)",
+			// 'overflow': "hidden",
+			'height': "100%",
+			'transition': "border-color 0.45s ease 0s, background-color 0.45s ease 0s",
+			'&:hover': {
+			}
+		},
+		'.seperator.seperator.seperator': "border-top: 1px solid rgba(155, 155, 155, 0.55);"
 	},
 	
 	onLoad() {
+		// TODO CVLN-20230608-1
+		// var parent = this.up("devtools/Workspace<>:root");
+		var parent = this.app().qs("#window");
+		var ar = parent.getAbsoluteRect();
+
+		this._left = ar.width / 2 - 5;
+		this._top = ar.height / 2 - 5;
+		this._height = this._width = 100;
+
+		this.nextTick(() => this.set("parent", parent));
+
 		this.addClasses("glassy glassy-overlay"); // so that classes-property be used
 		this.override({
-	       // renderZoom: function() {
-	       // 	/** @overriding vcl/ui/Panel - transform-origin will be set by css */
-	       // 	var zoomed = this.hasOwnProperty("_zoom");
-	       // 	var style = this._node.style;
-	       // 	if(zoomed) {
-	    			// style.transform = String.format("scale3d(%s, %s, 1)", this._zoom, this._zoom);
-	       // 	} else {
-	       // 		style.transform = "";
-	       // 	}
-	       // },
+	    	createDragger() {
+	    		const dragger = this.inherited(arguments);
+				var ar1 = this.getAbsoluteRect();
+	    		dragger.override({
+	    			createHandles(evt) {
+						var ar = this._control.getAbsoluteRect();
+						var sh = this._sizehandle = HE.fromSource("<div></div>");
+    					sh.style.border = "2px solid black";
+    					sh.style.position = "absolute";
+    					sh.style.zIndex = "999999";
+    					this._control.getParent().getClientNode().appendChild(sh);
+    					this._control.bringToFront();
+	    			},
+	    			updateHandles(evt) {
+	    				var cursor = this._control._node.style.cursor;
+	    				if(cursor === "") {
+							/** This will just move the control, override to change behaviour */
+							var eX = parseInt(evt.clientX / 8, 10) * 8;
+							var eY = parseInt(evt.clientY / 8, 10) * 8;							
+
+							this._control._node.style.transform = js.sf("translate3d(%dpx, %dpx, 0)", eX - this._sx, eY - this._sy);
+	    				} else {
+	    					var dx = evt.clientX - this._sx, dy = evt.clientY - this._sy;
+	    					var ar = js.mi(ar1);
+	    					
+	    					dx = parseInt(dx / 8, 10) * 8;
+	    					dy = parseInt(dy / 8, 10) * 8;
+	    					
+							cursor = cursor.split("-")[0].split("");
+							
+							if(cursor.includes("w")) {
+	    						ar.left += dx;
+	    						ar.width -= dx;
+							} else if(cursor.includes("e")) {
+								ar.width += dx;
+							}
+							
+							if(cursor.includes("n")) {
+								ar.top += dy;
+								ar.height -= dy;
+							} else if(cursor.includes("s")) {
+								ar.height += dy;
+							}
+
+    						this._control.setBounds(ar.left, ar.top, undefined, undefined, ar.width, ar.height);
+	    				}
+	    			},
+	    			destroyHandles(evt) {
+	    				this._control._node.style.transform = "";
+	    				this._sizehandle.parentNode.removeChild(this._sizehandle);
+	    				delete this._sizehandle;
+	    			},
+	    			mousedown(evt) {
+	    				this.updateHandles(evt);
+	    			},
+	    			// end(evt) { },
+					keyup(evt) {
+						var r = this.inherited(arguments);	
+						if(this._cancelled !== true) {
+							if(this._control._node.style.cursor !== "") {
+								var sh = (key) => parseInt(this._sizehandle.style[key], 10);
+								this._control.setBounds(sh("left"), sh("top"), 0, 0, sh("width"), sh("height"));
+								this.drop(evt);
+								this.end(evt);
+								return r;
+							}
+		
+							var tx = this._control._node.style.transform.split("(")[1].split(",").map(s => s.trim());
+
+							var x = parseInt(tx[0], 10) + this._control.getLeft();
+							var y = parseInt(tx[1], 10) + this._control.getTop();
+							
+							this.drop(evt);
+							this.end(evt);
+		
+							this._control._node.style.transform = "";
+							this._control.setBounds(x, y);
+						}
+						return r;
+					},
+	    			drop(evt) {
+	    				var cursor = this._control._node.style.cursor;
+	    				this._control._node.style.transform = "";
+	    				if(cursor === "") {
+							/** This will just move the control, override to change behaviour */
+							this._control.setBounds(
+								evt.clientX - this._sx + this._control.getLeft(), 
+								evt.clientY - this._sy + this._control.getTop()
+							);
+	    				} else {
+		    				this.updateHandles(evt);
+	    				}
+	    			}
+	    		}, true);
+	    		return dragger;
+	    	},
 			initializeNodes: function() {
 				this.inherited(arguments);
 				
-				this._node.innerHTML = "<div class='glassy wrapper no-margin'></div>";
+				this._node.innerHTML = "<div class='glassy client no-margin'></div>";
 				this._nodes.client = this._node.childNodes[0];
@@ -82,13 +216,132 @@ },
 				this._node || this.nodeNeeded();
-				
 				return this._nodes.client;
 			}
 		});
+	
+		this.print("onLoad", this);	
+		
+		// var nav = this.vars("navigator", this.udr("#navigator"));
+		// this.vars("parent", nav.getParent());
+		// nav.isVisible = () => true;
+		
 		return this.inherited(arguments);
 	},
 	onNodeCreated() {
-		this.set("parent", this.up("devtools/Workspace<>:root") || this.app().qs("#window"));
+		this.readStorage("bounds", (bounds) => {
+			if(bounds) {
+				this._width = bounds.width;
+				this._height = bounds.height;
+				this.setBounds(bounds.left, bounds.top, bounds.width, bounds.height);
+			}
+		});
+		
+		// this.vars("navigator").setParent(this);
+
 		return this.inherited(arguments);
-	}
+	},
+	onDestroy() {
+		var nav = this.vars("navigator");
+		if(nav) {
+			delete nav.isVisible;
+			nav.setParent(this.vars("parent"));
+		}
+	},
 	
-}];
+	onDispatchChildEvent(component, name, evt, f, args) {
+		if(name === "mousemove" && evt.altKey === true && evt.metaKey === true) {
+			this.onmousemove(evt);
+		}
+		return this.inherited(arguments);
+	},
+	onDragStart(evt) {
+		this.addClass("dragging");
+	},
+	onDragEnd(evt) {
+		this.removeClass("dragging");
+		this.writeStorage("bounds", this.getAbsoluteRect());
+	},
+	onMouseMove(evt) {
+		if(evt.altKey === true && evt.metaKey === true) {
+			this.dispatch("dragstart", evt);
+		}
+		var ar = this.getAbsoluteRect(), bw = 7, cursor = [];
+		if (evt.clientY < ar.top + bw) {
+			cursor.push("n");
+		} else if (evt.clientY > ar.top + ar.height - 2*bw) {
+			cursor.push("s");
+		}
+		if (evt.clientX < ar.left + bw) {
+			cursor.push("w");
+		} else if (evt.clientX > ar.left + ar.width - 2*bw) {
+			cursor.push("e");
+		}
+		this._node.style.cursor = cursor.length ? cursor.join("") + "-resize" : "";
+	},
+	
+	// onMouseEnter(evt) { this.print("mouseenter", evt); },
+	// onMouseLeave(evt) { this.print("mouseleave", evt); },
+	// onMouseDown(evt) {
+	// 	// this.addClass("dragging");
+	// },
+	// onKeyUp(evt) {
+	// 	// this.removeClass("dragging");
+	// }
+	
+}, [
+	// ["veldapps/Map", [
+		
+	// 	["#tree", { visible: false }]
+		
+	// ]],
+	// ["Tree", { css: {
+	// 	'': "pointer-events:none;padding:10px;",
+	// 	'*': "pointer-events:all;"
+	// } }, [
+	
+	// 	["Node", {
+			
+	// 		text: "Root", expandable: true,
+	// 		onNodesNeeded(parent) {
+	// 			if(parent === this) {
+	// 				const Node = this.constructor; 
+	// 				([1,2,3].map(t => new Node({
+	// 					text: t, parent: parent
+	// 				})));
+	// 			}
+	// 			return false;
+	// 		}
+			
+	// 	}]	
+		
+	// ]],
+	
+	["Executable", ("toggle-visible"), {
+		hotkey: "F3",
+		onLoad() {
+			this.override("isHotkeyEnabled", () => this.isEnabled());
+		},
+		on() { this.up().toggle("visible") }
+		
+	}],
+	// ["Container", { css: "background-color: red;", align: "client" }]	
+	
+]];
+
+
+
+	       // renderZoom: function() {
+	       // 	/** @overriding vcl/ui/Panel - transform-origin will be set by css */
+	       // 	var zoomed = this.hasOwnProperty("_zoom");
+	       // 	var style = this._node.style;
+	       // 	if(zoomed) {
+	    			// style.transform = String.format("scale3d(%s, %s, 1)", this._zoom, this._zoom);
+	       // 	} else {
+	       // 		style.transform = "";
+	       // 	}
+	       // },
+	    	// dispatch(name, evt) {
+	    	// 	if(name.includes("drag")) {
+	    	// 		this.print(name, evt);
+	    	// 	}
+	    	// 	return this.inherited(arguments);
+	    	// },

src/prototypes/Container.js

 "use strict";
 
-["vcl-ui:Panel", { 
-	align: "client"
+["vcl-ui:Form", { 
+	// align: "client"
 	
 }];

src/prototypes/Hover.js

 ["Container.glassy", {
 	
-	classes: "right"
+	classes: "left shrink-to-corner with-shadow"
 	
 	
 }]

No alert changes

Improved metrics

Total package byte prevSize

99883

increased by9.85%

Number of package files

55

increased by3.77%

Lines of code

2528

increased by11.17%

No dependency changes