cavalion-vcl 1.1.73 → 1.1.75

package/.md

@@ -1,5 +1,19 @@
-* [CHANGELOG.md]() - [README.md]() - [package.json]()
-* [.workspace](`(devtools/Workspace<${ws.getSpecializer()}>)`) - [.js]() - [src](:/)
+* [CHANGELOG.md]() - [README.md]() -[SNIPPETS.md]()
+* [.js]() - [src](:/)  - [package.json]()
+
+# `2023/06/22` No dragend event?
+
+![9wFwme](https://raw.githubusercontent.com/relluf/screenshots/master/uPic/9wFwme.png)
+
+# `2023/05/12` Gelijk trekken textRenders en rendering
+
+* Control vs ListColumn?
+
+# `2023/05/11` up() does not find closeable nodes
+
+Sigh! The infamous vcl/ui/Node.closeable seems to bite me in the ass.
+
+* **Solution**: Use [Node-closeable](src/vcl/ui/:.js) instead
 
 # cavalion-vcl / classes
 

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+### 2023/05/29 - 1.1.74
+
+* Node.closeable deprecated
+
+	* `af4757a` - refactors Node.closeable => Node-closeable updates loading style for Nodes adds SNIPPETS.md
+
+* Adding debugging tools 
+
+	* `3d7b43e` - adds Control.tree() - useful for debugging nested structure of controls
+	* `9421731` - adds dumpControls snippet removes comments fixes deps global
+
+* Working on vcl/prototype
+
+	* `1720907` - fixes message params situation
+	* `fc159df` - fixes ms situation with toasts fixes toast styles
+
+* Minor changes
+
+	* `6e3222b` - updates toast style
+
 ### 2023/03/26 - 1.1.73
 
 * Fixes issues with Component.getImplicitBasesByUri

package/SNIPPETS.md

@@ -0,0 +1,10 @@
+# `2023/05/06` Snippet
+
+	const dumpControls = (parent) => parent.getControls().reduce((r, c) => {
+		r[js.nameOf(c)] = dumpControls(c);
+		return r;	
+	}, Object.create(parent, { hashCode: { value: () => ";-)" } }));
+
+
+* [Control.js](src/Control.js) - require("vcl/Control").dump
+

package/package.json

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

package/src/Component.js

@@ -1522,7 +1522,7 @@ define(function (require) {
                 type: Type.EVENT
             },
             "onDispatchChildEvent": {
-                type: Type.EVENT
+                type: Type.EVENT // component, name, evt, f, args) {
             },
             "onMessage": {
                 type: Type.EVENT

package/src/Control.js

@@ -1488,6 +1488,7 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 			ondragcancel: function() {},
 			ondragend: function() {
 				this.fire("onDragEnd", arguments);
+				delete this._dragger;
 			}, 
 			ondragenter: function(evt) {
 				this.fire("onDragEnter", arguments);
@@ -1542,9 +1543,6 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 			onmouseout: function() {
 				this.fire("onMouseOut", arguments);
 			},
-			onmouseleave: function() {
-				this.fire("onMouseOver", arguments);
-			},
 			ontap: function() {
 				this.fire("onTap", arguments);
 			},
@@ -1852,6 +1850,12 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 			updateCallCount: 0,
 
 			focused: null,
+			
+			tree: (root) => root.getControls().reduce((r, c) => {
+					r[js.nameOf(c)] = Control.tree(c);
+					return r;	
+				}, Object.create(root, { hashCode: { value: () => ";-)" } })),
+			
 
 			findByNode: function(node) {
 				while(node !== null && node[EventDispatcher.elementKey] === undefined) {

package/src/Dragger.js

@@ -16,9 +16,6 @@ define(function(require) {
 
 			_cursor: null,
 
-			/**
-			 * Constructor
-			 */
 			constructor: function(control, overrides) {
 				this._hook = new DocumentHook(undefined, false);
 				this._control = control;
@@ -32,20 +29,12 @@ define(function(require) {
 					this.override(overrides);
 				}
 			},
-
-			/**
-			 *
-			 */
 			handleEvent: function(evt, type) {
 				var f = this[type];
 				if(f !== undefined) {
 					f.apply(this, arguments);
 				}
 			},
-
-			/**
-			 *
-			 */
 			swapDocCursor: function() {
 				if(this.hasOwnProperty("_cursor")) {
 					var style = document.body.style;
@@ -54,17 +43,9 @@ define(function(require) {
 					this._cursor = cursor;
 				}
 			},
-
-			/**
-			 *
-			 */
 			getCursor: function() {
 				return this._cursor;
 			},
-
-			/**
-			 *
-			 */
 			setCursor: function(value) {
 				if( /* isdragging */ 0) {
 					document.body.style.cursor = value;
@@ -72,10 +53,6 @@ define(function(require) {
 					this._cursor = value;
 				}
 			},
-
-			/**
-			 *
-			 */
 			start: function(evt) {
 				HtmlElement.disableSelection();
 				this.swapDocCursor();
@@ -84,27 +61,16 @@ define(function(require) {
 				this._hook.activate();
 				this.createHandles(evt);
 			},
-
-			/**
-			 *
-			 */
 			end: function(evt) {
+				this._control.dispatch("dragend", evt);
 				this.destroyHandles(evt);
 				this._hook.release();
 				this.swapDocCursor();
 				HtmlElement.enableSelection();
 			},
-
-			/**
-			 *
-			 */
 			drop: function(evt) {
-
+				this._control.dispatch("dragdrop", evt); // ?
 			},
-
-			/**
-			 *
-			 */
 			keyup: function(evt) {
 				if(evt.keyCode === 27) {
 					evt.preventDefault();
@@ -112,40 +78,21 @@ define(function(require) {
 					this.end(evt);
 				}
 			},
-
-			/**
-			 *
-			 */
 			mouseup: function(evt) {
 				if(this._cancelled !== true) {
 					this.drop(evt);
 					this.end(evt);
 				}
 			},
-
-			/**
-			 *
-			 */
 			mousemove: function(evt) {
 				this.updateHandles(evt);
 			},
-
-			/**
-			 *
-			 */
-			createHandles: function() {
-			},
-
-			/**
-			 *
-			 */
+			createHandles: function() {},
 			destroyHandles: function() {
 			},
 
-			/**
-			 * This will just move the control, override to change behaviour
-			 */
 			updateHandles: function(evt) {
+				/** This will just move the control, override to change behaviour */
 				var x = this._sx;
 				var y = this._sy;
 
@@ -157,7 +104,6 @@ define(function(require) {
 				this._sx = evt.clientX;
 				this._sy = evt.clientY;
 			}
-
 		}
 	}));
 

package/src/Factory.js

@@ -141,21 +141,17 @@ define(function(require) {
 			},
 			load: function(source, success, failure) {
                 if(source.charAt(0) === "\"" && source.indexOf("\"use strict\";") !== 0) {
+    				/*- Parse require section */
                 	if(source.indexOf("\"use ") === 0) {
-                		// TODO this should be the default
-                		source = "\"" + source.substring(5);
+                		source = "\"" + source.substring(5); // TODO this should be the default
                 	}
-    				/*- Parse require section */
                     var i = source.indexOf("\";");
                     if(i !== -1) {
-                        deps = source.substring(1, i).replace(/\s/g, "");
-                        deps = deps.split(",");
-                        
+                        var deps = source.substring(1, i).replace(/\s/g, "");
                         /*- require all dependecies */
-                        var me = this;
-                        return this._parentRequire(deps, function() {
-                            me.doLoad(source, success, failure);
-                        }, failure);
+                        return this._parentRequire(deps.split(","), 
+                        	() => this.doLoad(source, success, failure), 
+                        	failure);
                     }
                 }
                 return this.doLoad(source, success, failure);
@@ -515,6 +511,12 @@ define(function(require) {
 			DEFAULT_NAMESPACES: {
 			},
 			
+			overrides: function(reg, req) {
+				for(var k in reg) {
+					define(js.sf("vcl/Factory!%s", k), reg[k], new Factory(req || window.require, k))
+				}	
+			},
+
 			implicit_sources: {},
 
 			load: function(name, parentRequire, load, config) {
@@ -527,11 +529,10 @@ define(function(require) {
 				var sourceUri = Factory.makeTextUri(name);
 
 				function instantiate(source, local) {
-					var factory = new Factory(parentRequire, name, sourceUri);
+					var p = "";//local ? ".skip-fetch.local" : "";
+					var factory = new Factory(parentRequire, name + p, sourceUri + p);
 // console.log("instantiate", name + p);
-					factory.load(source, function() {
-						load(factory, source);
-					});
+					factory.load(source, () => load(factory, source));
 				}
 
 				function fallback() {
@@ -548,6 +549,14 @@ define(function(require) {
 					});
 				}
 				
+				if(name.endsWith(".skip-fetch")) {
+// console.log("skip-fetch", name);
+					name = name.split("."); 
+					name.pop();
+					name = name.join(".");
+					return fallback()
+				}
+
 // console.log("fetch", name);
 				this.fetch(name)
 					.then(source => source ? instantiate(source, true) : fallback())
@@ -651,6 +660,5 @@ define(function(require) {
 			},
 			getFactoryUri: getFactoryUri
 		}
-
 	}));
 });

package/src/Reader.js

@@ -26,9 +26,6 @@ define(function(require) {
 			_uri: null,
 			_references: null,
 
-			/**
-			 *
-			 */
 			constructor: function(factory, root) {
 				this._factory = factory;
 				if(root !== undefined) {
@@ -36,17 +33,17 @@ define(function(require) {
 				}
 			},
 
-			/**
-			 * Read the source of a component. Basically instantiates a
-			 * component
-			 *
-			 * @param source
-			 *            The actual source
-			 * @param uri
-			 *            The uri of the source and thus the resulting root
-			 *            component
-			 */
 			read: function(source, uri) {
+				/**
+				 * Read the source of a component. Basically instantiates a
+				 * component
+				 *
+				 * @param source
+				 *            The actual source
+				 * @param uri
+				 *            The uri of the source and thus the resulting root
+				 *            component
+				 */
 				var deferred = new Deferred();
 				var thisObj = this;
 
@@ -81,22 +78,21 @@ define(function(require) {
 
 				return deferred;
 			},
-
-			/**
-			 * Instantiates a component based upon a definition hold by a node
-			 * which was delivered/parsed by Reader.evaluate. It figures out
-			 * whether the node references a inherited ComponentClass or
-			 * inherited component.
-			 *
-			 * @param node
-			 *            The actual node holding information to it's inherited
-			 *            prototypes, name, properties, children
-			 * @param success
-			 *            To receive the component
-			 * @param failure
-			 *            To receive errors
-			 */
 			instantiateComponent: function(node, success, failure) {
+				/**
+				 * Instantiates a component based upon a definition hold by a node
+				 * which was delivered/parsed by Reader.evaluate. It figures out
+				 * whether the node references a inherited ComponentClass or
+				 * inherited component.
+				 *
+				 * @param node
+				 *            The actual node holding information to it's inherited
+				 *            prototypes, name, properties, children
+				 * @param success
+				 *            To receive the component
+				 * @param failure
+				 *            To receive errors
+				 */
 				var component, me = this;
 				if(node.inherits instanceof Array) {
 					// inherits (a) ComponentClass-instance(s), require all the
@@ -133,10 +129,6 @@ define(function(require) {
 					success(component);
 				}
 			},
-
-			/**
-			 *
-			 */
 			createRootComponent: function(rootNode, success, failure) {
 				var me = this;
 
@@ -185,10 +177,6 @@ define(function(require) {
 					f(this._root);
 				}
 			},
-
-			/**
-			 *
-			 */
 			initializeComponent: function(component, node, success, failure) {
 				if(component !== this._root) {
 					// This is an owned/nested component
@@ -220,10 +208,6 @@ define(function(require) {
 					success(component);
 				}
 			},
-
-			/**
-			 *
-			 */
 			createComponents: function(nodes, success, failure) {
 				var count = nodes.length;
 				var result;
@@ -245,16 +229,12 @@ define(function(require) {
 					});
 				}
 			},
-
-			/**
-			 *
-			 */
 			setProperties: function(component, node) {
 				// extend properties
 				component['@properties'] = js.extend(component['@properties'] || {}, node.properties);
 
 				var properties = component.defineProperties();
-				for( var k in node.properties) {
+				for(var k in node.properties) {
 					var property;
 					if((property = properties[k]) === undefined) {
 //						console.warn(String.format("Property %n.%s does not exist - %n", component.constructor, k,
@@ -265,14 +245,13 @@ define(function(require) {
 					}
 				}
 			},
-
-			/**
-			 *
-			 * @param property
-			 * @param component
-			 * @param value
-			 */
 			setPropertyValue: function(property, component, value) {
+				/**
+				 *
+				 * @param property
+				 * @param component
+				 * @param value
+				 */
 				if(property.isReference()) {
 					this._references.push({
 						property: property,

package/src/data/Array.js

@@ -353,4 +353,4 @@ define(function(require) {
 		}
 	});
 
-});
+});

package/src/prototypes/App.console.js

@@ -123,6 +123,7 @@ keyup:MetaCtrl+192`,
     [["ui/forms/util/Console"], "console", {
     	align: "bottom",
 	    height: 250,
+	    css: "background-color:rgba(255,255,255,0.5);backdrop-filter:blur(10px);",
 	    visible: false,
 	    vars: "parent: window;"
     }]

package/src/prototypes/App.desktop.js

@@ -4,7 +4,7 @@ var HE = require("util/HtmlElement");
 HE.addClass(document.body, window.navigator.platform);
 
 ["", {}, [
-    ["#client", {
-        formUri: "ui/forms/Portal<>"
-    }]
+    // ["#client", {
+    //     formUri: "ui/forms/Portal<>"
+    // }]
 ]];

package/src/prototypes/App.toast.js

@@ -15,7 +15,7 @@
 		var scope = this.getScope();
 		var elem = new Element(this);
 
-		var timeout = options.hasOwnProperty("timeout") ? options.timeout : 1500;
+		var timeout = options.ms || (options.hasOwnProperty("timeout") ? options.timeout : 1500);
 		var content = options.content || "No toast content";
 		var classes = options.classes || "fade";
 
@@ -64,9 +64,10 @@
 			},
 			right: "0",
     		left: "0",
-    		bottom: "40px",
+    		bottom: "20px",
     		"z-index": "20000",
     		"pointer-events": "none",
+    		
     		".{./Element}": {
     			"pointer-events": "all",
     			"a": {
@@ -95,6 +96,7 @@
         		"&.no-clear": "clear: none;",
 
     			"&.big": "font-size: 32pt;",
+    			"&.medium": "font-size: 14pt;",
     			"&.fade": {
     				opacity: "0",
     				transition: "opacity 1s ease",
@@ -117,7 +119,21 @@
         		"&.padding-right-20px": {
         			"padding-right": "20px"
         		},
-    		}
+	    		"&.centered": {
+	    			"text-align": "center",
+		    		// ".{./Element}": {
+		    			"margin-left": "auto",
+		    			"margin-right": "auto",
+		    			"text-align": "left",
+		    			"float": "none"
+		    		// },
+		    	},
+		    	"&.paragraph": {
+	    			'max-width': "35%"
+		    	}
+    		},
+    		
+    		
     	}
     }]
 ]];

package/src/prototypes/ui/forms/Home.tree.js

@@ -1,4 +1,4 @@
-"vcl/ui/LargeIcon, vcl/ui/Node, vcl/ui/FormContainer, vcl/ui/Node.closeable";
+"vcl/ui/LargeIcon, vcl/ui/Node, vcl/ui/FormContainer, vcl/ui/Node-closeable";
 
 var Node = require("vcl/ui/Node");
 var FormContainer = require("vcl/ui/FormContainer");
@@ -219,7 +219,7 @@ var Handlers = {
 	}
 };
 
-["", {
+[(""), {
 	vars: {
     	"App": {
     		getState: function() {
@@ -297,22 +297,16 @@ var Handlers = {
 			}
 		}
 	},
-	onMessage: function(name, params, sender) {
+	onMessage: function(name, message, sender) {
 		var scope = this.getScope();
 
 		if(name === "openform") {
-			var Node = require("vcl/ui/Node.closeable");
+			var Node = require("vcl/ui/Node-closeable");
 			var FormContainer = require("vcl/ui/FormContainer");
 
 			// TODO Merge with Portal
 
-			var parent = params.parent || scope.tree.getSelection()[0];
-
-			// TODO find the correct parent based upon the sender
-//			while(parent && parent.getVar("control")._form !== sender._owner) {
-//				parent = parent._parent;
-//			}
-
+			var parent = message.parent || scope.tree.getSelection()[0];
 			var node = new Node(this);
 			node.override({
 				onclick: function(evt) {
@@ -326,21 +320,22 @@ var Handlers = {
 			node.addClass("closeable");
 			
 			var container = new FormContainer(node);
-			container.setFormUri(params.uri);
-			if(params.params) {
-				container.setFormParams(params.params);
-				node.setVars(params.params);
+			container.setFormUri(message.uri);
+			if(message.params) {
+				container.setFormParams(message.params);
+				node.setVars(message.params);
 			}
 
-			if(params.path) {
-				node.print("varring path", params.path);
-				node.vars("path", params.path);
+			if(message.path) {
+				node.print("varring path", message.path);
+				node.vars("path", message.path);
 			}
 
 			// @overrides ui/forms/Home<>
 			container.setVisible(false);
 			container.setParent(scope.client);
-			node.setText(params.text || params.title || "&nbsp;");
+			
+			node.setText(message.text || message.title || "&nbsp;");
 			node.setVar("control", container);
 			node.setParent(parent || scope.tree);
 			node.update(function() {
@@ -354,12 +349,12 @@ var Handlers = {
 				},
 				"formloadstart": function() {
 					node.addClass("loading");
-					node.setText(params.title || "&nbsp;");
+					node.setText(message.title || "&nbsp;");
 				},
 				"formloadend": function() {
 					node.removeClass("loading");
-					if(params.callback) {
-						params.callback(this._form);
+					if(message.callback) {
+						message.callback(this._form);
 					}
 				},
 				"formload": function() {
@@ -370,7 +365,7 @@ var Handlers = {
                         if (text instanceof Array) {
                             node.setText(text.join(""));
                         } else {
-                            node.setText(String.format("%H", text || params.title));
+                            node.setText(String.format("%H", text || message.title));
                         }
 					}
 					form.on("captionchanged", f);
@@ -382,17 +377,17 @@ var Handlers = {
 				parent.setExpanded(true);
 			}
 
-			if(params.activate !== false) {
+			if(message.activate !== false) {
 				scope.tree.setSelection([node]);
-			} else if(params.lazyLoad !== true) {
+			} else if(message.lazyLoad !== true) {
 				container.forceLoad();
 			}
 			
-			parent && parent.setTimeout("update", () => {
-				// Hmprf, what is going on here?
-				parent._parent.updateChildren(true, true);
-				parent._parent.updateChildren(true, true);
-			}, 500);
+			// parent && parent.setTimeout("update", () => {
+			// 	// Hmprf, what is going on here?
+			// 	parent._parent.updateChildren(true, true);
+			// 	parent._parent.updateChildren(true, true);
+			// }, 500);
 
 			return true;
 		}
@@ -407,11 +402,11 @@ var Handlers = {
     		"padding-left": "16px",
     		".{./Node}": {
 		        "&.loading": {
-		        	"background-image": "url(/shared/vcl/images/loading.gif)",
-		        	"background-repeat": "no-repeat",
-		        	"background-position": "-8px 4px",
 		        	">.selection": {
-		        		"opacity": "0.5"
+			        	"background-image": "url(/shared/vcl/images/loading.gif)",
+			        	"background-repeat": "no-repeat",
+			        	"background-position": "10px 5px",
+		        		// "opacity": "0.5"
 		        	},
 		        	"&.selected >.text": {
 		        		"font-weight": "normal"

package/src/ui/Select.js

@@ -79,7 +79,8 @@ define(function(require) {
 				type: Type.EVENT
 			},
 			"options": {
-				type: Type.ARRAY
+				type: Type.ARRAY,
+				set: Function
 			},
 			"value": {
 				type: Type.STRING,