zimjs 19.1.4 → 19.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zimjs",
-  "version": "19.1.4",
+  "version": "19.1.6",
   "type": "module",
   "main": "./src/zim.js",
   "types": "./ts-src/typings/zim",

package/src/zim.js

@@ -13370,16 +13370,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				if (p.indexOf(",") != -1) {
 					zim.loop(p.split(" "), function (point) {
 						var pp = point.split(",");
-						points.push([Number(pp[0].trim()), Number(pp[1].trim())]);
+						points.push([Number(pp[0].trim()), Number(pp[1].trim()),0,0,0,0,0,0,"none"]);
 					});
 				} else {
 					var lastP;
 					zim.loop(p.split(" "), function (point, i) {
-						if ((i+1)%2==0) points.push([lastP, point.trim()]);
+						if ((i+1)%2==0) points.push([Number(lastP), Number(point.trim()),0,0,0,0,0,0,"none"]);
 						lastP = point.trim();
 					});
 				}
-				if (type=="polygon") shape = new Blob(f, s, ss, points);
+				if (type=="polygon") shape = new Blob(f, s, ss, points, null, null, null, null, showControls, null, null, null, null, null, null, null, null, null, null, null, null, null, interactive);
 				else shape = new zim.Squiggle(s, ss, points, null, null, null, null, showControls, null, null, null, null, null, null, null, null, null, null, null, null, null, interactive);
 			} else if (type == "ellipse") {
 				shape = new zim.Blob(f, s, ss, ellipse(0, 0, Number(tag.getAttribute("rx")), Number(tag.getAttribute("ry"))), null, null, null, null, showControls, null, null, null, null, null, null, null, null, null, null, null, null, null, interactive);
@@ -17681,6 +17681,7 @@ addPoint(percent, controlType) - add a point at a percent (100) of the total cur
 	controlType can be as specified in main points parameter
 	returns index of new point
 addPoints(num, controlType, startPoint, spread, dataOnly, points, even) - add num points between existing points
+	accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
 	controlType can be as specified in main points parameter
 	specify a startPoint to add points between the startPoint and the next point (one segment of points)
 	spread (default false) set to true to spread points evenly around path rather than evenly between segments
@@ -19580,6 +19581,8 @@ Note the points property has been split into points and pointObjects (and there
 		}
 
 		this.addPoints = function(num, controlType, startPoint, spread, dataOnly, points, even) {
+			var sig = "num, controlType, startPoint, spread, dataOnly, points, even";
+			var duo; if (duo = zob(that.addPoints, arguments, sig)) return duo;
 			if (zot(points)) points = zim.copy(that.points);
 			var ratios = zim.copy(that.segmentRatios);
 			var lastRatio = 0;
@@ -19869,6 +19872,7 @@ addPoint(percent, controlType) - add a point at a percent (100) of the total cur
 	controlType can be as specified in main points parameter
 	returns index of new point
 addPoints(num, controlType, startPoint, spread, dataOnly, points, even) - add num points between existing points
+	accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
 	controlType can be as specified in main points parameter
 	specify a startPoint to add points between the startPoint and the next point (one segment of points)
 	spread (default false) set to true to spread points evenly around path rather than evenly between segments
@@ -21920,6 +21924,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		}
 
 		this.addPoints = function(num, controlType, startPoint, spread, dataOnly, points, even) {
+			var sig = "num, controlType, startPoint, spread, dataOnly, points, even";
+			var duo; if (duo = zob(that.addPoints, arguments, sig)) return duo;
 			if (zot(points)) points = zim.copy(that.points);
 			var ratios = zim.copy(that.segmentRatios);
 			var lastRatio = 0;
@@ -24186,7 +24192,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			fitText();
 		}
 		
-		function fitText() {
+		function fitText() {			
 			that.size = maxSize?maxSize:200;
 			var count = 0;
 			while(lineHeight < lH / 2 && (that.height > lH || that.width > lW)) {
@@ -32858,7 +32864,7 @@ borderColor - |ZIM VEE| (default null) the background stroke color
 borderWidth - (default null) thickness of the background border
 maxLength - (default null) set to limit the number of characters in the field
 password - (default false) set to true to show **** for text to hide password
-	this will be replaced by inputType in upcoming versions of ZIM
+	see also inputType
 selectionColor - (default color) the selection color of the text 
 selectionAlpha - (default .2) the alpha of the selection color
 cursorColor - (default color) the blinking cursor in the text
@@ -32888,7 +32894,7 @@ scrollBarV - (default true) if scrolling in vertical is needed then show scrollB
 readOnly - (default false) set to true for field to be readOnly - also see readOnly property
 inputType - (default "text") set to "text", "number", "password", "email" 
 	number has 0-9 . + - / * % $ available
-	this will replace the password parameter in upcoming versions of ZIM
+	see also password for password setting
 rtl - (default ZIM DIR) the direction of the text.  Also set "rtl" in the HTML tag dir parameter for RTL
 uppercase - (default false) set to true to force uppercase letters
 placeholderInstant - (default true) set to false to not remove the placeholder as soon as the cursor is in the field
@@ -33264,7 +33270,7 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 			blinker.oldX = blinkerX; // get previous blinker global x.
 			// end Pettis Brandon code '23
 					
-			if (that.stage) that.stage.update();
+			if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update();
 		}, null, null, null, null, mID);
 
 		if (pastText != null) {
@@ -33327,11 +33333,11 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 	function doPlaceholder() {
 		if (label.text != "" && that.placeholderLabel.parent) {
 			that.placeholderLabel.removeFrom();
-			if (that.stage) that.stage.update();
+			if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update();
 		}
 		if (label.text == "" && !that.placeholderLabel.parent) {				
 			that.add(that.placeholderLabel);
-			if (that.stage) that.stage.update();
+			if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update();
 		}
 	}
 				
@@ -33492,7 +33498,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 	this.hiddenInput.autocorrect = "off";
 	this.hiddenInput.autocomplete = "off";		
 	this.hiddenInput.spellcheck = false;
-	this.hiddenInput.style.position = "absolute";
+	this.hiddenInput.style.position = "fixed"; // changed from "absolute" in ZIM 019 to fix iOS bug
 	this.hiddenInput.style.overflow = "hidden";
 	this.hiddenInput.style.touchAction = "none";
 	
@@ -33506,6 +33512,9 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 	
 	this.hiddenInput.style.left = "-99999px";
 	this.hiddenInput.style.top = "-99999px";
+	// this.hiddenInput.style.left = "10px";
+	// this.hiddenInput.style.top = "10px";
+
 	this.hiddenInput.style.zIndex = -999;
 	this.hiddenInput.style.opacity = 0;
 	this.hiddenInput.style.width = "1px";
@@ -33523,6 +33532,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 		this.selection.alp(0.2);
 		this.positionBlinkerAndSelection();
 		this.dispatchEvent("focus");
+		if (that.stage) that.stage.update();
 	}
 	this.onBlur = function() {
 		if (this.stage) frame = this.stage.frame;	
@@ -33532,6 +33542,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 		this.selection.alp(0.0);
 		this.hiddenInput.type = inputType; // ZIM NFT 00 patch
 		this.dispatchEvent("blur");
+		if (that.stage) that.stage.update();
 	}
 	this.onInput = function(e, noEvent) {
 		if (uppercase) this.hiddenInput.value = this.hiddenInput.value.toUpperCase();
@@ -33552,6 +33563,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 		if (this.focus) {
 			this.blinker.replayTween();
 		}
+		if (that.stage) that.stage.update();
 	}	
 	this.onKeydown = function(e) {
 		this.deleteKey = (e.code=="Backspace"||e.code=="Delete");
@@ -33561,6 +33573,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 			that.positionBlinkerAndSelection.call(that);
 			// that.dispatchEvent(keyevt);
 			that.dispatchEvent(e);
+			if (that.stage) that.stage.update();
 		}, 10);
 	}	
 	this.onMousedown = function(e) {
@@ -33576,7 +33589,8 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 		var selectionIdx = this.mapPointToIndex(point);
 		if (rtl) this.hiddenInput.setSelectionRange(le-selectionIdx, le-selectionIdx);				
 		else this.hiddenInput.setSelectionRange(selectionIdx, selectionIdx);				
-		this.positionBlinkerAndSelection();	
+		this.positionBlinkerAndSelection();			
+		if (that.stage) that.stage.update();
 	}
 	this.onPressmove = function(e) {
 		// ZIM NFT 01 Patch any le or rtl
@@ -33598,18 +33612,20 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 			} else {
 				this.hiddenInput.setSelectionRange(selectionIdx, this.hiddenInput.selectionEnd, rtl?"forward":"backward");
 			}
-		}
-		
+		}		
 		this.positionBlinkerAndSelection();
+		if (that.stage) that.stage.update();
 	}
 	this.onDblclick = function() {
 		this.hiddenInput.select();
 		this.positionBlinkerAndSelection();
+		if (that.stage) that.stage.update();
 	}		
 	this.hiddenInput.addEventListener("paste", function() {
 		setTimeout(function() {			
 			that.hiddenInput.setSelectionRange(that.hiddenInput.selectionStart, that.hiddenInput.selectionEnd, rtl?"forward":"backward");
 			// setTimeout(function() {that.positionBlinkerAndSelection()}, 50);
+			if (that.stage) that.stage.update();
 		}, 50);
 	});
 	this.positionBlinkerAndSelection = function() {
@@ -33645,7 +33661,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 			this.blinker.pos(this.textWidthArray[xIdx] + paddingH - 1 + ((align=="right" && this.text == "")?this.width:(align=="center" && this.text == "")?this.width/2:0) + shiftH, paddingV+shiftV);
 			this.dispatchEvent("blinker");
 		}
-		if (this.stage) this.stage.update();
+		// if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && this.stage) this.stage.update();
 	}
 	this.eventPositionGlobalToLocal = function(e) {
 		var point = this.globalToLocal(e.stageX / zim.scaX, e.stageY / zim.scaY);		
@@ -33691,6 +33707,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 		if (uppercase) text = text.toUpperCase();
 		this.hiddenInput.value = text;
 		this.onInput(null, noEvent);
+		if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update();
 	}
 	Object.defineProperty(this, 'focus', {
 		get: function() {
@@ -33704,7 +33721,9 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo
 				this.positionBlinkerAndSelection();
 			} else {
 				that.hiddenInput.blur();
-			}			
+				if (that.stage) that.stage.update();
+			}		
+			if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update();	
 		}
 	});
 	
@@ -36035,25 +36054,25 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 const stepper = new Stepper()
-    .center()
-    .change(()=>{
-       label.text = stepper.value;
-       S.update();
-    });
+	.center()
+	.change(()=>{
+		label.text = stepper.value;
+		S.update();
+	});
 const label = new Label({
-    align:CENTER,
-    text: stepper.value
+	align:CENTER,
+	text: stepper.value
 }).reg(CENTER).pos(0,100,CENTER,BOT);
 // press and drag too 
 
 // Steppers can be words too 
 const stepper2 = new Stepper({
-    list:["Roger", "Wilma","Sandy","Paul"],
-    width:200,
-    continuous:true
+	list:["Roger", "Wilma","Sandy","Paul"],
+	width:200,
+	continuous:true
 }).pos(0,130,CENTER,CENTER).change(()=>{
-    label.text = stepper2.value;
-    S.update();
+	label.text = stepper2.value;
+	S.update();
 });
 END EXAMPLE
 
@@ -36133,6 +36152,7 @@ containerPrev, containerNext - access to the zim Container that holds the arrows
 arrowPrev, arrowNext - access to the zim Triangle objects
 arrowPrev2, arrowNext2 - access to the zim Triangle objects for arrows2
 min, max - only for number mode at the moment - currently, do not change the max to be less than the min
+step - get or set the main step of the Stepper (double check it is working, consider experimental, ZIM 019 patch)
 label - access to the Label
 textBox - access to the text box backing shape
 continuous - does the stepper loop
@@ -36156,7 +36176,11 @@ and S.update() in change event to see component change its graphics
 
 EVENTS
 dispatches a "change" event when changed by pressing an arrow or a keyboard arrow
-(but not when setting index or value properties)
+	but not when setting index or value properties
+dispatches a "keychange" event when changed by pressing a key that changes the value
+	note the change from keys are also dispatched under "change"
+	but sometimes if updating data, a pressup and a keychange combo is better
+	as change from pressing and dragging can be at the framerate
 
 ALSO: see the CreateJS Easel Docs for Container events such as:
 added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
@@ -36229,44 +36253,47 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		var numVal;
 		var numDir = 1;
 		var decimals;
-		if (stepperType == "number") {			
-			min = Number(min);
-			max = Number(max);
-			if (isNaN(min)) min = 0;
-			if (isNaN(max)) max = 100;
-			if (max < min) {
-				numDir = -1;
-				var temp = max; // one day ES6
-				max = min;
-				min = temp;
-				numVal = max;
+		function setup() {
+			if (stepperType == "number") {			
+				min = Number(min);
+				max = Number(max);
+				if (isNaN(min)) min = 0;
+				if (isNaN(max)) max = 100;
+				if (max < min) {
+					numDir = -1;
+					var temp = max; // one day ES6
+					max = min;
+					min = temp;
+					numVal = max;
+				} else {
+					numVal = min;
+				}
+				that.min = min;
+				that.max = max;
+				if (0 > min && 0 < max) numVal = 0;
+				step = Math.abs(step);
+				decimals = Math.max(getDecimals(step), getDecimals(step2));
+			} else if (stepperType == "letter") {
+				list = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+				if (typeof min != "string") min = "A";
+				if (typeof max != "string") max = "Z";
+				min = min.substr(0,1).toUpperCase();
+				max = max.substr(0,1).toUpperCase();
+				var startLetter = list.indexOf(min);
+				if (startLetter < 0) {min = "A"; startLetter = 0;}
+				var endLetter = list.indexOf(max);
+				if (endLetter < 0) {max = "Z"; endLetter = list.length;}
+				if (endLetter < startLetter) {
+					list.reverse();
+					startLetter = list.length-1-startLetter;
+					endLetter = list.length-1-endLetter;
+				}
+				list = list.splice(startLetter, endLetter-startLetter+1);
 			} else {
-				numVal = min;
-			}
-			this.min = min;
-			this.max = max;
-			if (0 > min && 0 < max) numVal = 0;
-			step = Math.abs(step);
-			decimals = Math.max(getDecimals(step), getDecimals(step2));
-		} else if (stepperType == "letter") {
-			list = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
-			if (typeof min != "string") min = "A";
-			if (typeof max != "string") max = "Z";
-			min = min.substr(0,1).toUpperCase();
-			max = max.substr(0,1).toUpperCase();
-			var startLetter = list.indexOf(min);
-			if (startLetter < 0) {min = "A"; startLetter = 0;}
-			var endLetter = list.indexOf(max);
-			if (endLetter < 0) {max = "Z"; endLetter = list.length;}
-			if (endLetter < startLetter) {
-				list.reverse();
-				startLetter = list.length-1-startLetter;
-				endLetter = list.length-1-endLetter;
-			}
-			list = list.splice(startLetter, endLetter-startLetter+1);
-		} else {
-			stepperType = "list";
+				stepperType = "list";
+			}
 		}
+		setup();
 
 		function getDecimals(num) {
 			var decimals = String(num).split(".")[1];
@@ -36279,18 +36306,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		var rawY = 0;
 
 		if (draggable) {
-			this.on("mousedown", function(e) {
+			that.on("mousedown", function(e) {
 				if (that.zimAccessibility && that.zimAccessibility.aria) return;
-				this.stage.mouseMoveOutside = true;
+				that.stage.mouseMoveOutside = true;
 				rawX = e.rawX/zim.scaX;
 				rawY = e.rawY/zim.scaY;
-				rawEvent = this.stage.on("stagemousemove", function(e){
+				rawEvent = that.stage.on("stagemousemove", function(e){
 					rawX = e.rawX/zim.scaX;
 					rawY = e.rawY/zim.scaY;
 				}, null, null, null, null, mID);
 			}, null, true, null, null, mID);
 		}
-		this.label = label;
+		that.label = label;
 		label.mouseChildren = false;
 		label.mouseEnabled = false;
 
@@ -36473,6 +36500,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 							}
 							doStep(dragDir);
 							doHold();
+							// optimize takes away update on changing label so add it here
+							if (that.stage && (zim.OPTIMIZE||WW.OPTIMIZE)) that.stage.update(); 
 						}, dragInput);
 					}
 					doHold();
@@ -36711,6 +36740,41 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			}
 		});
 
+		// version of value that does not update stage
+		Object.defineProperty(this, 'valueLite', {
+			get: function() {
+				if (stepperType=="number") {
+					return Number(numVal);
+				} else {
+					return list[index];
+				}
+			},
+			set: function(value) {
+				if(zot(value)) return;				
+				if (stepperType=="number") {
+					value = Number(value);
+					if (that.max > that.min) {
+						if (value > that.max || value < that.min) return;
+					} else {
+						if (value < that.max || value > that.min) return;
+					}
+					var newIndex = that.stepperArray.indexOf(value);					
+					if (newIndex < 0) return;
+					index = newIndex;
+					numVal = Number(that.stepperArray[index]);
+					setLabel(numVal, numVal, false); // false to not update stage
+				} else {
+					if (list.indexOf(value) > -1) {
+						value = list.indexOf(value);
+					} else {return;}
+					if (value == that.index) return;
+					index=value;
+					setLabel(list[index], index, false); // false to not update stage
+				}
+			}
+		});
+
+
 		Object.defineProperty(this, 'currentValue', {
 			get: function() {
 				return this.value;
@@ -36746,6 +36810,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			}
 		});
 
+		Object.defineProperty(this, 'step', {
+			get: function() {
+				return step;
+			},
+			set: function(value) {
+				if (value == 0) value = 1;
+				step = step2 = actualStep = value;
+				var v = that.value;
+				setup();
+				that.value = zim.decimals(zim.constrain(that.min + Math.round((v - that.min) / step+.00001) * step, that.min, that.max), 5);
+			}
+		});
 
 		this._enabled = true;
 		Object.defineProperty(that, 'enabled', {
@@ -36825,8 +36901,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			}
 		}
 
-		function setLabel(text, n) {
+		function setLabel(text, n, update) {
 			index = n;
+			if (zot(update)) update = true;
 			if (display) {
 				if (stepperType == "number") {
 					if (text != 0 && decimals > 0) {
@@ -36839,9 +36916,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				// label.y = box.y+(box.getBounds().height-label.getBounds().height)/2;
 			}
 			if (arrows) setArrows();
-			if (next && ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && next.stage)) {
+			if (update && next && ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && next.stage)) {
 				next.stage.update();
-			} else if (label && ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && label.stage)) {
+			} else if (update && label && ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && label.stage)) {
 				label.stage.update();
 			}
 			if (that.zimAccessibility) that.zimAccessibility.changeTitle(that, null, true);
@@ -36888,14 +36965,22 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 							} else {
 								actualStep = step2;
 							}
+							var lastV = that.value;							
 							doStep(1);
+							if (that.value != lastV) {
+								that.dispatchEvent("keychange");
+							}
 						} else if (k == backwardVertical || k == backwardHorizontal) {
 							if ((vertical && k == backwardVertical) || (!vertical && k == backwardHorizontal)) {
 								actualStep = step;
 							} else {
 								actualStep = step2;
 							}
+							var lastV = that.value
 							doStep(-1);
+							if (that.value != lastV) {
+								that.dispatchEvent("keychange");
+							}
 						}
 					}
 				}
@@ -36923,7 +37008,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 							other = true;
 						} else if (k==173 || k==189) {
 							that.value = that.value * -1;
-							if (that.value != lastValue) that.dispatchEvent("change");
+							if (that.value != lastValue) {
+								that.dispatchEvent("change");
+								that.dispatchEvent("keychange");
+							}
 							lastValue = that.value;
 							negativeCheck = !negativeCheck;
 						} else if (k == 46) { // delete
@@ -36947,14 +37035,20 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 						if (num < min || num > max) return;
 
 						that.value = num;
-						if (that.value != lastValue) that.dispatchEvent("change");
+						if (that.value != lastValue) {
+							that.dispatchEvent("change");
+							that.dispatchEvent("keychange");
+						}
 						lastValue = that.value;
 
 					} else {
 						keyRestartCheck = true;
 						lastKeyNum = "";
 						that.value = String.fromCharCode(e.keyCode);
-						if (that.value != lastValue) that.dispatchEvent("change");
+						if (that.value != lastValue) {
+							that.dispatchEvent("change");
+							that.dispatchEvent("keychange");
+						}
 						lastValue = that.value;
 					}
 				}
@@ -72833,7 +72927,33 @@ It tiles all TextureActive objects across the ZIM stage (and beyond to the right
 It adds a slider and swiper to view the objects.
 It adds a key (default t) and toggle() method to toggle between the three.js canvas and the ZIM canvas.
 
-SEE the TextureActive and TextureActives examples
+EXAMPLE 
+// Do not use TextureActiveManager directly
+// Make sure to import the three module
+
+const panel = new TextureActive(W,H);
+const circle = new Circle(100,red).center(panel).drag(); 
+
+const three = new Three({
+	width:window.innerWidth, 
+	height:window.innerHeight, 
+	cameraPosition:new THREE.Vector3(0,0,500),
+	textureActive:true
+});
+
+const renderer = three.renderer;
+const scene = three.scene;
+const camera = three.camera;
+
+const controls = new OrbitControls(camera, three.canvas);
+
+const textureActives = new TextureActives(panel, THREE, three, renderer, scene, camera, controls);
+// turn off T key to toggle between ZIM and three.js 
+textureActives.manager.toggleKey = -1;
+
+const canvasWindow = three.makePanel(panel, textureActives);
+scene.add(canvasWindow);
+END EXAMPLE
 
 PARAMETERS 
 stage (default the ZIMDefaultFrame's stage) the stage to operate on - provided internally
@@ -77395,6 +77515,15 @@ circle.contact(obj=>{
 });
 END EXAMPLE
 
+EXAMPLE 
+// Can join objects together with different types of joins (distance, weld, revolute)
+STYLE = {corner:10};
+const bar1 = new Rectangle(100,20).reg(CENTER).loc(100,600).addPhysics();
+const bar2 = new Rectangle(100,20).reg(CENTER).loc(200,600).addPhysics();
+// revolute only needs one point - choose end middle of bar1 (remember reg is in center)
+physics.join(bar1, bar2, new Point(bar1.x+bar1.width/2, bar1.y), null, -90, 90, "revolute");
+END EXAMPLE
+
 EXAMPLE
 // control a ball with a DPad - better than keys for mobile
 const physics = new Physics(0);
@@ -77576,6 +77705,7 @@ addPhysics(dynamic, contract, shape, friction, linear, angular, density, bouncin
 	friction - (default .8) - how sticky will the body act - set to 0 to slide.
 	linear - (default .5) - linear damping which slows the movement - set to 0 for no damping
 	angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping
+		also can use obj.body.SetFixedRotation(true) to stop the physics body from rotating
 	density - (default 1) - the density that can affect what happens with collisions
 	bounciness - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy
 	maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies
@@ -77614,8 +77744,9 @@ torque(amount) - add a turning force over time on the object
 	just applying the torque once will hardly do anything - use an spin() for that
 setLinearVelocity(x, y) - set the linear velocity - this overrides current forces
 	so might look unnatural as setLinearVelocity(0,0) will stop the object moving
-setAngularVelocity(amount) - set the angular velocity - this overrids current forces
+setAngularVelocity(amount) - set the angular velocity - this overrides current forces
 	so might look unnatural as setAngularVelocity(0) will stop the object spinning
+	Also can use obj.body.SetFixedRotation(true) to stop the physics body from rotating
 sleep() - puts object to sleep so no physics calculations are done
 wake() - wakes up object from sleep so physics calculations are done
 follow(damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, borderOriginal)
@@ -77718,7 +77849,7 @@ zimObj - the ZIM Object that the body is mapped to
 x - deprecated - please use the BODY's loc(x, y) method - note: zimObj.body.loc() is not the same as the zimObj.loc() method
 y - deprecated - please use the BODY's loc(x, y) method - note: zimObj.body.loc() is not the same as the zimObj.loc() method
 rotation - the rotation of the body (degrees) - setting this will also rotate the ZIM DisplayObject
-	Also see obj.body.SetFixedRotation() to stop the physics body from rotating https://zimjs.com/zapp/print/Z_C6SBW
+	Also can use obj.body.SetFixedRotation(true) to stop the physics body from rotating https://zimjs.com/zapp/print/Z_C6SBW
 	And the counter rotation technique here: https://zimjs.com/data/
 
 GLOBAL VARIABLES
@@ -90626,7 +90757,6 @@ loadFailObj - (default result of F.makeCircles) object that shows if asset() doe
 	This will be given a type property of "EmptyAsset"
 	Set the loadFailObj property below to null to set no object - but this will yield errors unless each resulting asset() is tested
 	Set to new Container() to show nothing (but avoid errors) - or new Rectangle(10, 10) to show little black square, etc.
-sensors - (default false) set to true to capture Frame devicemotion and deviceorientation events - see Events
 retina - (default true) scales stage to use pixelDensity (sharper when scaling up) and supports Adobe Animate export
 	may need to set mouse event targets to e.stageX/zim.scaX and e.stageY.zim.scaY
 	except for using S.getObjectUnderPoint()
@@ -91026,7 +91156,7 @@ EVENTS
 	note - when changing scale, it is better to multiply by a factor rather than add to the scale
 	eg. circle.scale = constrain(circle.scale*(sign(e.deltaY)>0?.75:1.25), .5, 5);
 "deviceorientation" - turned on when using ZIM PermissionAsk()
-	fired as device orientation changes:
+	fired as device orientation changes - use for tilt or compass
 	eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)
 	eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)
 	eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)
@@ -91040,7 +91170,8 @@ EVENTS
 		S.update();
 	});
 "devicemotion" -  turned on when using ZIM PermissionAsk()
-	fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion
+	tracks device accelerometer to capture shake
+	eventObject.acceleration holds x, y and z properties of motion
 	eg.
 	var label = new Label().center();
 	// Note: MUST USE PermissionAsk()
@@ -94731,7 +94862,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		if (zot(bitmap)) bitmap = DS.bitmap!=null?DS.bitmap:true;
 		if (zot(splitTypes)) splitTypes = DS.splitTypes!=null?DS.splitTypes:false;
 		if (zot(geometric)) geometric = DS.geometric!=null?DS.geometric:true;
-		if (zot(showControls)) showControls = DS.showControls!=null?DS.showControls:false;
+		if (zot(showControls)) showControls = DS.showControls!=null?DS.showControls:null;
 		if (zot(interactive)) interactive = DS.interactive!=null?DS.interactive:true;
 
 		this.zimContainer_constructor(width, height);            	    	
@@ -95255,70 +95386,48 @@ END EXAMPLE
 //-83.867
 
 /*--
-Tilt - device motion and orientation events
+Tilt - device orientation event
 
 Tilt
-"devicemotion" and "deviceorientation" Frame events
+"deviceorientation" Frame event
 
 DESCRIPTION
-The Frame has a "devicemotion" event to capture device tilt 
-and a "deviceorientation" to capture device rotation (like a compass)
+The Frame has a "deviceorientation" event to capture tilt or device rotation (like a compass)
+and a "devicemotion" event to capture shaking the device with the accelerometer.
 
-Also see the PermissionAsk() class which will handle asking for permission on iOS devices.
+SEE: Shake - for the "devicemotion" event for accelerometer motion
 
-NOTE:
-For either event the Frame sensors parameter MUST be set to true
+SEE: the PermissionAsk() class which will handle asking for permissions on devices.
 
 EXAMPLE
+// TILT OR COMPASS - https://zimjs.com/zapp/Z_Q5UYS
 // for capturing tilt on device (rotation about an axis)
-// also SEE the PermissionAsk example below
-// also set Frame sensors parameter to true
-// and be on a mobile device
-const label = new Label().center();
-F.on("deviceorientation", e=>{
-	label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
-	S.update();
-});
-END EXAMPLE
-
-EXAMPLE
-// on iOS, the sensors must be allowed first - this example works for all devices
-const label = new Label().center();
-const permissionType = "deviceorientation"; // or "devicemotion"
-const ask = new PermissionAsk(init, permissionType);
-function init(yes) {
-	// if the user answers yes to the PermissionAsk
-	const errorPane = new Pane("SENSOR not available",yellow);
-	if (yes) {		
-		// use the sensors 		
+// be on a mobile device or a device with sensors
+new PermissionAsk(yes=>{
+	if (yes) { // the user answered yes to PermissionAsk
+		// all code goes in here
+		new Label("Tilt the device to move circle").alp(.3).pos(0,30,CENTER);
+		const circle = new Circle().center();
+		const amount = .5;
+		const compass = new Line(60, 4, light, "arrow").rot(90).centerReg(circle); // point up
 		F.on("deviceorientation", e=>{
-			label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
+		    // for tilt 
+			circle.mov(e.rotation.y*amount, e.rotation.x*amount);
+			circle.x = constrain(circle.x, 0, W);
+			circle.y = constrain(circle.y, 0, H);
+			// for compass use e.rotation.z 
+			// which has 0 angle at device start rotation (not necessarily North)
+			compass.rot(90-e.rotation.z); // rotate opposite device rotation
 			S.update();
 		});
-		S.update();
-	} else { // answered no to PermissionAsk dialog		
-		errorPane.show();
-	}	
-}
-END EXAMPLE
-
-EXAMPLE
-// for shaking motion - ALSO see the PermissionAsk example above
-// and replace "deviceorientation" with "devicemotion" 
-// and replace e.rotation.x, etc. with e.acceleration.x etc.
-// also set Frame sensors parameter to true
-// and be on a mobile device
-const label = new Label().center();
-F.on("devicemotion", e=>{
-	label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;
-	S.update();
+	} else { // the user answered no to PermissionAsk 		
+		new Pane("SENSOR not available",yellow).show();	
+	}
 });
 END EXAMPLE
 
 EVENTS 
-"devicemotion" - for tilt (also set Frame sensors parameter to true)
-	fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion   
-"deviceorientation" - for rotation (also set Frame sensors parameter to true)
+"deviceorientation" - for tilt 
 	fired as device orientation changes:
 		eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)
 		eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)
@@ -95329,6 +95438,61 @@ EVENTS
 // Device motion and orientation events are available as Frame events
 //-83.86
 
+/*--
+Shake - device motion event
+
+Shake
+"devicemotion" Frame event
+
+DESCRIPTION
+The Frame has a "devicemotion" event to capture shaking the device with the accelerometer.
+
+SEE: Tilt - for the "deviceorientation" event for tilt or compass
+
+SEE: the PermissionAsk() class which will handle asking for permissions on devices.
+
+EXAMPLE
+// SHAKE - https://zimjs.com/zapp/Z_XF8JM
+// for capturing shaking motion on device (acceleration about an axis)
+// be on a mobile device or a device with sensors
+new PermissionAsk(init, "devicemotion");
+function init(yes) {	
+	if (yes) { // the user answered yes to PermissionAsk	
+		// all code goes in here		
+		new Label("Shake the device").center();
+		S.update();
+		let id;
+		F.on("devicemotion", e=>{
+			// for shake	
+		    if (
+		        Math.abs(e.acceleration.x) > 5 ||
+		        Math.abs(e.acceleration.y) > 5 ||
+		        Math.abs(e.acceleration.z) > 5
+		    ) {
+		        if (F.color != green) {
+		            F.color = green;
+		            S.update();
+		        }
+		        if (id) id.clear();
+		        id = timeout(.2, ()=>{
+		            F.color = light;
+		            S.update();
+		        });
+		    } 
+		});
+	} else { // the user answered no to PermissionAsk		
+		new Pane("SENSOR not available",yellow).show();
+	}	
+}
+END EXAMPLE
+
+EVENTS 
+"devicemotion" - for shake
+	fired on moving mobile device - like a shake - eventObject.acceleration holds x, y and z properties of motion   
+--*///+83.87
+// Device motion and orientation events are available as Frame events
+//-83.87
+
 /*--
 zim.PermissionAsk = function(callback, permissionType, color, backgroundColor, style, group, inherit)
 
@@ -95336,9 +95500,8 @@ PermissionAsk
 zim class - extends a zim.Pane which extends a zim.Container
 
 DESCRIPTION
-A circular confirmation widget to ask the user if they want a permission for iOS.
+A circular confirmation widget to ask the user if they want a permission on devices.
 For some iOS permissions, the app needs to be interactive with first before permission can be asked!
-This is for iOS only - if not in iOS then will just pass through the test.
 
 Also adds Frame deviceorientation and devicemotion events for a matching permissionType.
 Pre ZIM 018, this was done with a sensors parameter on the Frame.
@@ -95350,50 +95513,67 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 // DEVICE ORIENTATION - gives angle of device in all 3 dimensions
+// See https://zimjs.com/zapp/Z_Q5UYS
 // Note: this is NOT an orientation event to see if phone is portrait or landscape (see Frame orientation event)
-// new Frame({scaling:FIT, width:1024, height:768, color:white, outerColor:dark, ready:ready, sensors:true});
-
-const permissionType = "deviceorientation"; 
-const ask = new PermissionAsk(init, permissionType);
-function init(yes) {	
-	const errorPane = new Pane("SENSOR not available",yellow);	
-	if (yes) { // the user answers yes to the PermissionAsk
-		// use the sensors 
-		const label = new Label("on mobile").centerReg();
+new PermissionAsk(yes=>{
+	if (yes) { // the user answered yes to PermissionAsk
+		// all code goes in here
+		new Label("Tilt the device to move circle").alp(.3).pos(0,30,CENTER);
+		const circle = new Circle().center();
+		const amount = .5;
+		const compass = new Line(60, 4, light, "arrow").rot(90).centerReg(circle); // point up
 		F.on("deviceorientation", e=>{
-			// use the sensors 		
-			label.text = label.text = "x: "+decimals(e.rotation.x) +"\ny: "+ decimals(e.rotation.y) +"\nz: "+ decimals(e.rotation.z);
+		    // for tilt 
+			circle.mov(e.rotation.y*amount, e.rotation.x*amount);
+			circle.x = constrain(circle.x, 0, W);
+			circle.y = constrain(circle.y, 0, H);
+			// for compass use e.rotation.z 
+			// which has 0 angle at device start rotation (not necessarily North)
+			compass.rot(90-e.rotation.z); // rotate opposite device rotation
 			S.update();
 		});
-	} else { // the user answered no to PermissionAsk dialog		
-		errorPane.show();
-	}	
-}
+	} else { // the user answered no to PermissionAsk 		
+		new Pane("SENSOR not available",yellow).show();	
+	}
+});
 END EXAMPLE
 
 EXAMPLE
 // DEVICE MOTION - gives accelerometer values in all 3 dimensions
-// new Frame({scaling:FIT, width:1024, height:768, color:white, outerColor:dark, ready:ready, sensors:true});
-
-const permissionType = "devicemotion"; 
-const ask = new PermissionAsk(init, permissionType);
+// See https://zimjs.com/zapp/Z_XF8JM
+new PermissionAsk(init, "devicemotion");
 function init(yes) {	
-	const errorPane = new Pane("SENSOR not available",yellow);	
-	if (yes) { // the user answers yes to the PermissionAsk
-		// use the sensors 
-		const label = new Label("on mobile").centerReg();
-		F.on("devicemotion", e=>{
-			// use the sensors 		
-			label.text = "x: "+decimals(e.acceleration.x, 3) +"\ny: "+ decimals(e.acceleration.y, 3) +"\nz: "+ decimals(e.acceleration.z, 3);
-			S.update();
+	if (yes) { // the user answered yes to PermissionAsk	
+		// all code goes in here		
+		new Label("Shake the device").center();
+		S.update();
+		let id;
+		F.on("devicemotion", e=>{	
+			// for shake	
+		    if (
+		        Math.abs(e.acceleration.x) > 5 ||
+		        Math.abs(e.acceleration.y) > 5 ||
+		        Math.abs(e.acceleration.z) > 5
+		    ) {
+		        if (F.color != green) {
+		            F.color = green;
+		            S.update();
+		        }
+		        if (id) id.clear();
+		        id = timeout(.2, ()=>{
+		            F.color = light;
+		            S.update();
+		        });
+		    } 
 		});
-	} else { // the user answered no to PermissionAsk dialog		
-		errorPane.show();
+	} else { // the user answered no to PermissionAsk		
+		new Pane("SENSOR not available",yellow).show();
 	}	
 }
 END EXAMPLE
 
 EXAMPLE 
+// CAM
 // on iOS, the app must be interacted with before using mic or cam
 // goes right to permissions on computer and android
 // pops up a PermissionAsk Pane on iOS then if yes, goes to permissions on iOS
@@ -95405,6 +95585,7 @@ function init(val) {
 END EXAMPLE
 
 EXAMPLE 
+// MIC
 // on iOS, the app must be interacted with before using mic or cam
 // this goes right to permissions on computer and android
 // but pops up a PermissionAsk Pane on iOS then if yes, goes to permissions on iOS
@@ -95423,6 +95604,17 @@ callback - the function to callback when permission is accepted
 	for iOS the PermissionAsk Pane will be shown and the system permissions 
 	in all cases, the callback will be called on result 
 	the parameter given to the callback will be true (sensors) or a media stream (mic / cam) or false if not accepted
+	the callback will receive an error number as its second parameter 
+		1 - device orientation fail
+		2 - device motion fail
+		3 - test timeout fail 
+		4 - mic or miccam fail 
+		5 - mediaDevices or getUserMedia fail
+		6 - native request permission denied by user
+		7 - request permission fail
+		8 - ZIM interface request permission denied by user (NO chosen)
+		9 - mic or miccam fail (no ZIM interface)
+		10 - mediaDevices or getUserMedia fail (no ZIM interface)
 permissionType - (default "deviceorientation") the string deviceorientation, devicemotion, mic, cam, or miccam
 color - (default zim.dark) the font and border color of the widget
 backgroundColor - (default zim.lighter) the backgroundColor of the widget
@@ -95481,22 +95673,22 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 
 		var that = this;
 		
-		Style.addGroup("PermissionAsk", {            
-			width:100,
+		Style.addGroup("PermissionAsk", {     
 			color:color,
 			rollColor:backgroundColor,
 			corner:10,
 			backgroundColor:zim.faint,
 			rollBackgroundColor:color,
 			borderColor:color,
-			borderWidth:2         
+			borderWidth:2,
+			align:CENTER     
 		});
         var pt = permissionType;
 		var okay = false;
-		that.yes = new zim.Button({label:"YES", group:"PermissionAsk"}).sca(.65).pos(0,30,CENTER,TOP,this);
+		that.yes = new zim.Button({label:"YES", width:100, group:"PermissionAsk"}).sca(.65).pos(0,30,CENTER,TOP,this);
         var words = {deviceorientation:"sensors", devicemotion:"sensors", mic:"mic", cam:"cam", miccam:"mic/cam"};      
 		that.label = new zim.Label("Use " + (words[pt]?words[pt]:"feature") + "?", 30, null, color, null, null, null, "center").sca(.9).centerReg(this);
-		that.no = new zim.Button({label:"NO", group:"PermissionAsk"}).sca(.65).pos(0,30,CENTER,BOTTOM,this);
+		that.no = new zim.Button({label:"NO", width:100, group:"PermissionAsk"}).sca(.65).pos(0,30,CENTER,BOTTOM,this);
 		
 		new zim.Circle(110, zim.clear, color, 1).center(this).alp(.8);
 		new zim.Circle(120, zim.clear, color, 1).center(this).alp(.5);
@@ -95515,9 +95707,9 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
                         callback(stream);
                     })
                     .catch(function(err) {
-                        callback(false);
+                        callback(false, 9);
                     });
-            } else callback(false);
+            } else callback(false, 10);
             return;
         }
 
@@ -95531,19 +95723,19 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 			function testMe(e) {
 				if (okay) return;
 				if (permissionType=="deviceorientation") {
-					if (e.alpha==null || (e.alpha==0&&e.beta==0&&e.gamma==0)) callback(false);
+					if (e.alpha==null || (e.alpha==0&&e.beta==0&&e.gamma==0)) callback(false, 1);
 					else setEvents();
 				} else {
 					// if (!e.acceleration || e.acceleration.x==null || (e.acceleration.x==0&&e.acceleration.y==0&&e.acceleration.z==0)) callback(false);
-					if (!e.acceleration || e.acceleration.x==null) callback(false);
+					if (!e.acceleration || e.acceleration.x==null) callback(false, 2);
 					else setEvents();
 				}	
 				called = true;
 				WW.removeEventListener(permissionType, testMe);				               
             }
 			setTimeout(function(){
-				if (!called) callback(false);
-			}, 100);
+				if (!called) callback(false, 3);
+			}, 5000);
 		}
 
 		var lastZ = 0;
@@ -95592,9 +95784,9 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 								callback(stream);
 							})
 							.catch(function(err) {
-								callback(false);
+								callback(false, 4);
 							});
-					} else callback(false);
+					} else callback(false, 5);
 				} else {
 					var s = DeviceMotionEvent;
 					if (pt != "devicemotion") s = DeviceOrientationEvent;
@@ -95603,13 +95795,13 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 							setEvents();
 							okay = true;
 						}
-						else callback(false);
+						else callback(false, 6);
 					}).catch(function(e){
-						callback(false);
+						callback(false, 7);
 					}); 
 				}
 			} else {
-				callback(false);
+				callback(false, 8);
 			}
 		}
 
@@ -96296,13 +96488,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 	var controls = new zim.Container(w*.6,w*.25);
 	var conLev = new zim.Label({text:"LEVEL", shiftV:4}).alp(.8).sca(objTitle.scale);
 	var conLevI = new zim.Label({text:"Depth", shiftV:4, italic:true}).alp(.5).sca(objTitle.scale);
-	var conLevS = new zim.Stepper({shadowColor:-1, bgColor:grey, color:lighter, value:settings.level, arrowScale:.6, group:"noMonitor"}).scaleTo(controls,40).change(function() {
+	var conLevS = new zim.Stepper({arrows:true, shadowColor:-1, bgColor:grey, color:lighter, value:settings.level, arrowScale:.6, group:"noMonitor"}).scaleTo(controls,40).change(function() {
         settings.level = conLevS.value;
         updateSettings();
     });
     var conSpe = new zim.Label({text:"BATCH", shiftV:4}).alp(.8).sca(objTitle.scale);
     var conSpeI = new zim.Label({text:"Seconds", shiftV:4, italic:true}).alp(.5).sca(objTitle.scale);
-	var conBatS = new zim.Stepper({min:.1, max:3, step:.1, value:settings.time, shadowColor:-1, bgColor:grey, color:lighter, arrowScale:.6, group:"noMonitor"}).sca(conLevS.scale).change(function() {
+	var conBatS = new zim.Stepper({arrows:true, min:.1, max:3, step:.1, value:settings.time, shadowColor:-1, bgColor:grey, color:lighter, arrowScale:.6, group:"noMonitor"}).sca(conLevS.scale).change(function() {
         settings.time = conBatS.value;
         updateSettings();
     });;
@@ -97125,6 +97317,8 @@ const content = makeContent({
 END EXAMPLE
 
 PARAMETERS
+** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
+Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
 content - the content to make - using one of three formats:
 	a string or number to add a ZIM Label (also see color parameter and property) 
 	a ZIM DisplayObject such as a Circle or a Container with more objects, etc.
@@ -97135,10 +97329,10 @@ content - the content to make - using one of three formats:
 		buttons - an array of ZIM Button objects or configuration objects {} as follows:
 			{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
 			with call being a callback function for when the button is pressed 
-		buttonScale - the scale for the buttons 
+		buttonScale - |ZIM VEE| the scale for the buttons 
 		color - the color of the message
-		spacingH - horizontal space between the buttons (default 20xbuttonScale) 
-		spacingV - vertical space between the content areas	(default 20)
+		spacingH - |ZIM VEE| horizontal space between the buttons (default 20xbuttonScale) starts with expected spaces, last space is set at left and right
+		spacingV - |ZIM VEE| vertical space between the content areas (default 20) starts with space from top ends with space from bottom
 		scrollBar - set to true if a default scrollBar is present in Window or a number if custom	
 		align - default CENTER, or use LEFT or RIGHT
 maxWidth - (default null) pass in a maximum width to keep scale the content to
@@ -97173,14 +97367,15 @@ RETURNS - a Label if a string or number is passed as content, a Container if a c
 			
 			if (!data.align) data.align = "center";			
 			obj = new zim.Container();
-			var spacer = new Container(10,spacingV).addTo(obj);
-			if (data.header) data.header.pos(0,spacingV,"left","top",obj);
-			if (data.message) var label = new zim.Label({text:data.message, color:zot(data.color)?color:data.color, align:data.align}).reg(LEFT,TOP).loc(0,obj.height+(data.header?spacingV:0),obj);
-			if (data.display) data.display.pos(0,-data.display.height-(data.header||data.message?spacingV:0),"left","bottom",obj);
+			var s1 = zik(spacingV);
+			var spacer = new Container(10,s1).addTo(obj);
+			if (data.header) data.header.pos(0,s1,"left","top",obj);
+			if (data.message) var label = new zim.Label({text:data.message, color:zot(data.color)?color:data.color, align:data.align}).reg(LEFT,TOP).loc(0,obj.height+(data.header?zik(spacingV):0),obj);
+			if (data.display) data.display.pos(0,-data.display.height-(data.header||data.message?zik(spacingV):0),"left","bottom",obj);
 			if (data.buttons) {
 				if (!Array.isArray(data.buttons)) data.buttons = [data.buttons]; 	
 				var ideal = data.length*100;				
-				var buts = new zim.Container().loc(0,obj.height+(data.header||data.message||data.display?spacingV:0),obj);	
+				var buts = new zim.Container().loc(0,obj.height+(data.header||data.message||data.display?zik(spacingV):0),obj);	
 				for (var bb=0; bb<data.buttons.length; bb++) {
 					var bd = data.buttons[bb];
 					var call = bd.call||function(){};					
@@ -97197,8 +97392,12 @@ RETURNS - a Label if a string or number is passed as content, a Container if a c
 						bd.button = bd;
 					}
 					bd.button.call = call;					
-					bd.button.sca(data.buttonScale).loc((bb==0?0:buts.width+spacingH),0,buts).tap(function(e){e.target.call(e.target)});					
-				}					
+					bd.button.sca(zik(data.buttonScale)).loc((bb==0?0:buts.width+zik(spacingH)),0,buts).tap(function(e){e.target.call(e.target)});					
+				}	
+				for (var bb=0; bb<data.buttons.length; bb++) {
+					var bd = data.buttons[bb];
+					bd.button.y = (buts.height - bd.button.height) / 2;				
+				}
 			}
 			var bb = obj.getBounds();
 			obj.setBounds(bb.x, bb.y, bb.width, bb.height);
@@ -97211,8 +97410,9 @@ RETURNS - a Label if a string or number is passed as content, a Container if a c
 					o.pos(0,null,"right");
 				}
 			}	
-			if (maxWidth && typeof maxWidth == "number") obj.width = Math.min(obj.width, maxWidth-spacingH*2-(data.scrollBar===true?12:data.scrollBar>0?data.scrollBar:0));	
-			new zim.Container(10,spacingV).pos(0,-spacer.height,"center","bottom",obj).bot();
+			if (maxWidth && typeof maxWidth == "number") obj.width = Math.min(obj.width, maxWidth-zik(spacingH)*2-(data.scrollBar===true?12:data.scrollBar>0?data.scrollBar:0));	
+			var s2 = zik(spacingV);
+			new zim.Container(10,s2).pos(0,-s2,"center","bottom",obj).bot();
 
 			obj.setBounds(null); // make spacer in bottom adjust bounds