cavalion-vcl 1.1.67 → 1.1.69

package/.md

@@ -1,7 +1,74 @@
 * [CHANGELOG.md]() - [README.md]() - [package.json]()
-* [Workspace<vcl>](/Library/vcl-comps/devtools/Workspace$/vcl.js)
+* [Workspace<vcl>](/Library/vcl-comps/devtools/Workspace$/vcl.js) - [.js]()
 
-# `0519` vcl/Factory `#CVLN-20220519-1`
+# `2022/10/28-3` √ vcl/Component.getKeysByUri - bug (?!!)
+
+Found a bug in [Component](src/:.js). Amazing that that still happens, even in a function used so F'n frequently...
+
+* `#VA-20221028-3` Characters missing when no <>
+
+![20221028-172348-nnqDdO](https://raw.githubusercontent.com/relluf/screenshots/master/20221028-172348-nnqDdO.png)
+
+![20221028-172420-PT3Fro](https://raw.githubusercontent.com/relluf/screenshots/master/20221028-172420-PT3Fro.png)
+
+Squeezed and fixed:
+
+![20221028-172807-fO3Z56](https://raw.githubusercontent.com/relluf/screenshots/master/20221028-172807-fO3Z56.png)
+
+# `2022/10/28-2` √ Console should hint textContent
+
+Many times I need to scroll the console horizontally to read error messages or other large strings. Let's try to hint that content while mousing over it.
+
+* `#VA-20221028-2`
+
+The following works [nicely](//.js) and can be easily implemented on [Console](src/ui/:.js) itself, by hooking the mousemove-event:
+
+>>	const setTarget = (value) => {
+		const target = app.vars("target");
+		if(value !== target) {
+			if(target) {
+				target.title = target.title$$;
+				delete target.title$$;
+			}
+			value.title$$ = value.title;
+			value.title = value.textContent;
+			app.vars("target", value);
+			app.print("target", app.vars("target"));
+		}
+	};
+
+>>	app._onDispatchChildEvent = (component, name, evt, f, args) => {
+		if(name === "mousemove" && component instanceof Console) {
+			if(evt.target.classList.contains("value") && evt.target.parentNode.classList.contains("node")) {
+				setTarget(evt.target);
+			} else {
+				setTarget(null);
+			}
+		}
+	};
+
+# `2022/10/28-1` √ List is buggy
+
+Finally got to work on (and fix( that annoying bug where loading the second page triggered the "busy"-state/class (again), resulting in way too much animated-loading-image showing.
+
+* `#VA-20221028-1`
+* √ show loading image too long => use _count instead of _topRow
+* √ error causes loading state to continue forever
+* √ better error handling in entities/Query
+
+# `2022/07/28` Control.prototype.makeVisible
+
+Been working on coding in Markdown documents, basically in order to be able print results in the workspace console. Therefore the method `p()` has been introduced. It cancels the behaviour of opening a document while linking a link. Instead it evaluates the code and print its result in the workspace console. 
+
+So, now we can do something like:
+
+* ```[`123`](`${p(:)}`)```  ==>  [`123`](`${p(:)}`) - check the console after clicking 123
+
+However, the console doesn't show yet automatically. Therefore the method `Control.prototype.makeVisible` is introduced. It will call the method `Control.prototype.show` and travel up in the parent-hierarchy and call more in case necessary.
+
+* makeVisible() already exists in vcl/ui/Tab.prototype.
+
+# `2022/05/19` vcl/Factory `#CVLN-20220519-1`
 
 * how is the implicit base determined in `["", {}, []]`
 
@@ -9,7 +76,7 @@
 		=> Factory.load 
 			=> Factory.prototype.load
 
-# `0417` prototypes
+# `2022/04/17` prototypes
 
 > * [App](src/prototypes/:.js) - <= _#window is instantiated here (weirdly not in .desktop)_
 	* [.console](src/prototypes/App:.js) << _hotkeys_ _probably deprecated_ 
@@ -36,7 +103,7 @@
 		* [Query](src/prototypes/ui/entities/:.js) - [.scaffold](src/prototypes/ui/entities/Query:.js) - [scaffold.future](src/prototypes/ui/entities/Query:.js)
 		* [QueryFilters](src/prototypes/ui/entities/:.js)
 
-# `0403` classes
+# `2022/04/03` classes
 
 * [Factory](src/:.js) [.parse](src/Factory:.js) - [Reader](src/:.js) - [Writer](src/:.js)
 * [CssRules](src/:.js) - [Listeners](src/:.js) 
@@ -57,9 +124,12 @@
 				* [Popup](src/ui/:.js) - [Ace](src/ui/:.js) - [Console](src/ui/:.js)
 				* [Form](src/ui/:.js) - [FormContainer](src/ui/:.js)
 				* [List](src/ui/:.js) | [ListColumn](src/ui/:.js) - [ListBody](src/ui/:.js) - [ListFooter](src/ui/:.js) - [ListHeader](src/ui/:.js) - [ListRow](src/ui/:.js)
-		* [Node](src/ui/:.js) [.closeable](src/ui/Node:.js)
-		* [Sizer](src/ui/:.js) - [Tab](src/ui/:.js) - [Tabs](src/ui/:.js) - [Tree](src/ui/:.js)
-
+		* [Sizer](src/ui/:.js)
+		* [Tabs](src/ui/:.js) 
+			* [Tab](src/ui/:.js)
+		* [Tree](src/ui/:.js)
+			* [Node](src/ui/:.js)
+				* [.closeable](src/ui/Node:.js)
 
 # resources
 

package/CHANGELOG.md

@@ -1,10 +1,26 @@
-* ### 2022/07/04 - 1.1.67
+### 2022/10/30 - 1.1.69
+
+`#VA-20221028-1`, `-2` & `-3`
+
+* ebae088 - lowers SELECT\_TIMEMOUT\_MS for [vcl/ui/Tab(s)](src/ui/Tabs.js)
+* 4bd2244 - simplifies ids used in [Component.protoype.nextTick]()()
+
+### 2022/07/28 - 1.1.68
+
+* 768156d - fixes an issue where the vertical scrollbar was not accesible on macOS
+* cd60d4b - introduces new methods for vcl/Control: 
+	* reflectStates, 
+	* makeVisible and 
+	* selectVisible 
+* cd60d4b - changing some css/rendering details for Tree and Node 
+
+### 2022/07/04 - 1.1.67
 
 * 7dc04fb - adds Component.prototype.getTimeout
 * 52bebc9 - introducing Query.prototype.error
 * 18cd481 - destroying element upon remove (seems decent)
 
-* ### 2022/06/27 - 1.1.66
+### 2022/06/27 - 1.1.66
 
 * 07c6e83 - introducing onError event-property
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.67",
+  "version": "1.1.69",
   "description": "Visual Component Library for vcl-comps",
   "main": "index.js",
   "scripts": {

package/src/Component.js

@@ -13,7 +13,7 @@ define(function (require) {
     var ILLEGAL_COMPONENT_NAME_CHARS = "/";
     var ILLEGAL_COMPONENT_URI_CHARS = "/";
 
-    var all = [];
+    var all = [], nextTick = 1;
 
     Component = Component(require, {
         prototype: {
@@ -231,7 +231,7 @@ define(function (require) {
             	if(typeof name === "function") {
             		args = f;
             		f = name;
-            		name = "nextTick-" + Date.now();
+            		name = "nextTick-" + (nextTick++);
             	}
             	return this.setTimeout(name, f, 0, args);
             },
@@ -1338,7 +1338,11 @@ define(function (require) {
                     r.classes = uri[0].split("/").pop().split(".");
                     r.classes.shift();
 
-                    uri = uri[0].substring(0, uri[0].length - r.classes.join(".").length - 1);
+					if(r.classes.length) {
+                    	uri = uri[0].substring(0, uri[0].length - r.classes.join(".").length - 1);
+					} else {
+						uri = uri[0];
+					}
 
                     r.template = "";
                     r.specializer = "";

package/src/Control.js

@@ -958,6 +958,25 @@ define(function(require) {
 					}
 				}
 			},
+			reflectStates: function(states) {
+				if(typeof states === "string") {
+					states = states.split(",").map(state => ControlState[state]);
+				}
+				
+				states.forEach(state => {
+					switch(state) {
+						case ControlState.showing:
+							this.makeVisible();
+							break;
+							
+						case ControlState.selected:
+							this.setSelected(true);
+							break;
+					}
+					
+				})
+				
+			},
 
 			// scrollIntoView: function() {
 			// 	this.nodeNeeded();
@@ -1084,6 +1103,21 @@ define(function(require) {
 			hide: function() {
 				this.setVisible(false);
 			},
+			makeVisible: function(control) {
+				var parent = this._parent;
+				if(this._parent && !this._parent.isVisible()) {
+					this._parent.makeVisible();
+					this._parent.update(() => this.makeVisible());
+					return;
+				}
+				if(!this.isVisible()) {
+					this.show();
+				}
+			},
+			selectVisible: function() {
+				this.setSelected(true);
+				this.makeVisible();
+			},
 
 			allowsUpdateChildren: function() {
 				return this.isShowing();

package/src/entities/Query.js

@@ -53,10 +53,13 @@ define(function(require) {
 				} else {
 					if(e && e.responseJSON && e.responseJSON.message) {
 						console.error(e.responseJSON.message, e);
-						throw e;
+						this.print(new Error(e.responseJSON.message));
+						// throw e;
+					} else {
+						console.error(e);
+						this.print(new Error(e));
 					}
-					console.error(e);
-					throw e;
+					// throw e;
 				}
 			},
 			loaded: function() {
@@ -275,28 +278,40 @@ define(function(require) {
 				    	criteria.attributes || this._attributes, 
 				    	criteria,
 				    	criteria.opts
-				    ).then(function(res) {
+				    )
+				    .then(res => {
 						/*- if this response does not belong to the current request */
-						if(me._pageReqs && (me._request !== me._pageReqs[page])) {
-							// console.debug(me._entity, "requestPage: page", page, "receveid, but IGNORED");
+						if(this._pageReqs && (this._request !== this._pageReqs[page])) {
+							// console.debug(this._entity, "requestPage: page", page, "receveid, but IGNORED");
 							/* ...it should be ignored */
 							return res;
 						}
 						
-			        	delete me._request;
+			        	delete this._request;
 						if(res instanceof Error) {
-							console.error(me._entity, "requestPage: page", page, "error received", err);
+							console.error(this._entity, "requestPage: page", page, "error received", err);
 						} else {
-							// console.debug(me._entity, "requestPage: page", page, "received", {time: Date.now() - start, res: res});
+							// console.debug(this._entity, "requestPage: page", page, "received", {time: Date.now() - start, res: res});
 						}
-						me.processResult(res, page, criteria);
+						this.processResult(res, page, criteria);
 						
-						if(!me.isBusy()) {
-							me.notifyEvent(SourceEvent.busyChanged, false, page);
-						}
 						return res;
-					}).catch(function(e) {
-						me.error(e);
+					})
+					.catch(e => {
+						/*- if this response does not belong to the current request */
+						if(this._pageReqs && (this._request !== this._pageReqs[page])) {
+							// console.debug(this._entity, "requestPage: page", page, "receveid, but IGNORED");
+							/* ...it should be ignored */
+							return res;
+						}
+						
+			        	delete this._request;
+						this.error(e);
+					})
+					.finally(() => {
+						if(!this.isBusy()) {
+							this.notifyEvent(SourceEvent.busyChanged, false, page);
+						}
 					})
 				);
 				

package/src/ui/Console.js

@@ -138,6 +138,7 @@ define(function(require) {
 			_content: "<div class='console'></div><div class='cmdline'><input></div>",
 			_history: null,
 			_onEvaluate: null,
+			_mouseTarget: null,
 
 			constructor: function() {
 				this._history = [];
@@ -278,6 +279,28 @@ define(function(require) {
 
 				return r;
 			},
+			
+			onmousemove: function(evt) {
+				if(evt.target.classList.contains("value") && evt.target.parentNode.classList.contains("node")) {
+					this.setMouseTarget(evt.target);
+				} else {
+					this.setMouseTarget(null);
+				}
+			},
+			setMouseTarget: function(value) {
+				if(value !== this._mouseTarget) {
+					if(this._mouseTarget) {
+						this._mouseTarget.title = this._mouseTarget.title$$;
+						delete this._mouseTarget.title$$;
+					}
+					this._mouseTarget = value;
+					if(value) {
+						value.title$$ = value.title;
+						value.title = value.textContent;
+					}
+				}
+			},
+			
 			setFocus: function(evt) {
 				/** @overrides ../../Control.prototype.setFocus */
 				this.nodeNeeded();

package/src/ui/List.js

@@ -58,7 +58,8 @@ define(function(require) {
 						position: "absolute",
 						width: "1px",
 						height: "1px",
-						overflow: "hidden"
+						overflow: "hidden",
+						'z-index': 2
 					}
 				},
 				"&.header-invisible .{./ListHeader}": "height:0;"
@@ -479,8 +480,10 @@ define(function(require) {
 					var column = this._columns[i];
 					if(column.isVisible() === true) {
 						if(i < this._header._controls.length) {
+							// this.print("getBodyWidth-adding", parseInt(this._header._controls[i].getComputedStylePropValue("width"), 10));
 							r += parseInt(this._header._controls[i].getComputedStylePropValue("width"), 10);
 						} else {
+							// this.print("getBodyWidth-adding", column.getWidth());
 							r += column.getWidth();
 						}
 					}
@@ -670,10 +673,8 @@ define(function(require) {
 			},
 			updateColumns: function() {
 				var updateColumns = this.updateColumns;
-				this.updateColumns = function() {
-					console.log("updateColumns blocked");
-				};
 
+				this.updateColumns = () => console.log("updateColumns blocked");
 				this.resetColumnAutoWidth(); 
 				
 				try {
@@ -766,9 +767,12 @@ define(function(require) {
 						break;
 
 					case SourceEvent.busyChanged:
-						if((data && this._topRow > 0) || this.hasClass("ignore-busy")) { /* TODO what about scrolling up? */
+						if((data && this._count > 0) || this.hasClass("ignore-busy")) { /* TODO what about scrolling up? */
 							return;
 						}
+						
+this.app().print(js.sf("data: %s => busy: %s, count: %s, topRow: %s", data, this.hasClass("busy"), this._count, this._topRow))
+						
 						this.setTimeout("update-busy", function() {
 							if(data && !this.hasClass("busy")) {
 								this.addClass("busy");

package/src/ui/Tab.js

@@ -4,7 +4,7 @@ define(function(require) {
 	var Control = require("../Control");
 	var Element = require("./Element");
 	
-	var SELECT_TIMEOUT_MS = 128;
+	var SELECT_TIMEOUT_MS = 50;
 
 	var Tab = {
 		statics: {
@@ -168,7 +168,14 @@ define(function(require) {
 					this.setState("invalidated", true);
 				}
 			},
-		
+			
+			makeVisible: function(control) {
+				this.inherited(arguments);
+				if(!control && this._parent) {
+					this._parent.makeVisible(this);
+				}
+			},
+
 			getControl: function() {
 				return this._control;
 			},

package/src/ui/Tabs.js

@@ -210,17 +210,21 @@ define(function(require) {
 				// }
 	   // 	},
 	    	makeVisible: function(control) {
-	    		/*- this assumes horizontal scrolling only */
-	    	    control.scrollIntoView(); 
-	    	    // HACK
-	    		this._node.scrollTop = 0;
-	    	    this.nextTick("position-scrollbar", function() {
-		    		if(this._node.scrollLeft < 100) {
-		    			this._node.scrollLeft = 0;
-		    		} else {
-		    			this._node.scrollLeft += 100;
-		    		}
-	    	    }.bind(this));
+	    		if(control) {
+		    		/*- this assumes horizontal scrolling only */
+		    	    control.scrollIntoView(); 
+		    	    // HACK
+		    		this.nodeNeeded().scrollTop = 0;
+		    	    this.nextTick("position-scrollbar", function() {
+			    		if(this._node.scrollLeft < 100) {
+			    			this._node.scrollLeft = 0;
+			    		} else {
+			    			this._node.scrollLeft += 100;
+			    		}
+		    	    }.bind(this));
+	    		} else {
+					return this.inherited(arguments);
+	    		}
 	    	},
     		initializeNodes: function(control) {
 	    		/** @overrides ../Control.prototype.initializeNodes */

package/src/ui/Tree.js

@@ -74,13 +74,14 @@ define(function (require) {
                         }
                     },
                     ">.text": {
-                        "input[type=checkbox]": `position:relative;top:${checkbox_top}px;`,
+                        'input[type=checkbox]': `position:relative;top:${checkbox_top}px;`,
                     	cursor: "pointer",
                         position: "relative",
 //        				width: "100%",
                         display: 'inline-block',
-                        "margin-left": "2px",
+                        'margin-left': "2px",
                         padding: "3px 4px 3px 4px",
+                        // 'vertical-align': "top"
                     },
                     "&.selected": {
                         ">.selection": {
@@ -231,10 +232,14 @@ define(function (require) {
                 this.dispatch("nodesneeded", null);
             },
 			makeVisible: function(childNode) {
-			    var node = this.nodeNeeded();
-			    var pos = jquery(childNode.nodeNeeded()).position();
-			    var top = this.getAbsoluteRect().height / 3;
-			    node.scrollTop -= (top - pos.top);
+				if(childNode) {
+				    var node = this.nodeNeeded();
+				    var pos = jquery(childNode.nodeNeeded()).position();
+				    var top = this.getAbsoluteRect().height / 3;
+				    node.scrollTop -= (top - pos.top);
+				} else {
+					return this.inherited(arguments);
+				}
             },
             
             do_keyup: function(evt) {