zimjs 19.1.3 → 19.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zimjs",
-  "version": "19.1.3",
+  "version": "19.1.5",
   "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);
@@ -28856,6 +28856,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 		if (content) content.center(this);	
 
+		var c1 = corner;
+		var c2 = corner;
+		if (Array.isArray(corner)) {
+			c1 = corner[0];
+			c2 = corner[1];
+		}
+
 		if (!zot(titleBar)) {
 			if (typeof titleBar == "string") titleBar = new zim.Label(titleBar, null, null, titleBarColor);
 			var titleBarLabel = that.titleBarLabel = titleBar;
@@ -28865,14 +28872,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			that.titleBar = titleBar = new zim.Container(width, titleBarHeight, null, null, false).centerReg(that).mov(0,-height/2+titleBarHeight/2);
 			titleBar.mouseEnabled = false;
 			titleBar.mouseChildren = false;
-			that.titleBar.backing = new zim.Rectangle(width, titleBarHeight, titleBarBackgroundColor, null, null, [corner*.95,corner*.95, 0,0], null, null, null, false).addTo(titleBar);
-			titleBarLabel.center(titleBar).pos({x:Math.max(corner/2, 10), reg:true});
+			that.titleBar.backing = new zim.Rectangle(width, titleBarHeight, titleBarBackgroundColor, null, null, [c1*.95,c2*.95, 0,0], null, null, null, false).addTo(titleBar);
+			titleBarLabel.center(titleBar).pos({x:Math.max(c1/2, 10), reg:true});
 		}
 
 		if (close) {
 			close = that.close = new zim.Shape(-40,-40,80,80,null,false);
 			close.graphics.f(closeColor).p("AmJEVIEUkTIkXkWIB4h5IEWEYIETkTIB4B3IkTESIEQERIh4B4IkRkRIkSEVg"); // width about 90 reg in middle
-			if (titleBar) close.addTo(that).scaleTo(titleBar, null, 50).mov(width/2-Math.max(corner/2, 10)-close.width/2, -height/2+titleBarHeight/2).expand(40);
+			if (titleBar) close.addTo(that).scaleTo(titleBar, null, 50).mov(width/2-Math.max(c2/2, 10)-close.width/2, -height/2+titleBarHeight/2).expand(40);
 			else close.addTo(that).sca(.3).mov(width/2-close.width-3, -height/2+close.height).expand(40);
 			close.cur("pointer");
 			close.expand();
@@ -33996,7 +34003,7 @@ viewNum - (default 5) how many items to show in the width and height provided
 	if no items are provided to start but rather added with addAt() then choose a viewNum that roughly matches how many items will fit in the view
 	Note - the items will not be scaled larger by a viewNum setting... only scaled smaller.
 vertical - (default true) set to false to make a horizontal list
-currentSelected - (default false) set to true to show the curret selection as highlighted
+currentSelected - (default true) set to false to show the current selection as highlighted
 align - (default CENTER) horizontal align
 	set to START to align LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite
 valign - (default CENTER) vertical align
@@ -53555,13 +53562,13 @@ RETURNS obj for chaining
 			stCheck = true;
 			dropListCheck = false;
 			stage = obj.stage;
-			if (!obj.zmu) obj.zmu = stage.frame.on("mouseupplus", function(e) {				
-				if (obj.downCheck) {				
-					// Note - adjusted the mouseupplus event to delay 30ms if triggered on a mousemove 	
-					if (!slide) obj.downCheck = false;					
-					doUp(e, true); // true for cancel slide		
-				}				
-			}, null, null, null, null, mID);		
+			// if (!obj.zmu) obj.zmu = stage.frame.on("mouseupplus", function(e) {				
+			// 	if (obj.downCheck) {				
+			// 		// Note - adjusted the mouseupplus event to delay 30ms if triggered on a mousemove 	
+			// 		if (!slide) obj.downCheck = false;					
+			// 		doUp(e, true); // true for cancel slide		
+			// 	}				
+			// }, null, null, null, null, mID);		
 						
 			obj.dragMouseX = Math.round(e.stageX/zim.scaX)+stage.x;
 			obj.dragMouseY = Math.round(e.stageY/zim.scaY)+stage.y;
@@ -54282,10 +54289,10 @@ RETURNS obj for chaining
 			obj.off("mousedown", obj.zimDown, null, mID);
 			obj.off("pressmove", obj.zimMove, null, mID);
 			obj.off("pressup", obj.zimUp, null, mID);
-			if (obj.zmu) {
-				if (obj.stage) obj.stage.frame.off("mouseupplus", obj.zmu, null, mID);
-				else WW.zdf.off("mouseupplus", obj.zmu, null, mID);
-			}		
+			// if (obj.zmu) {
+			// 	if (obj.stage) obj.stage.frame.off("mouseupplus", obj.zmu, null, mID);
+			// 	else WW.zdf.off("mouseupplus", obj.zmu, null, mID);
+			// }		
 			if (zim.Ticker) {				
 				if (obj.zimDragSlide) zim.Ticker.remove(obj.zimDragSlide, mID, obj);	
 				if (obj.zimDragTicker) {								
@@ -59906,9 +59913,9 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 				
 				target.zimAnimateDragDown = target.on("mousedown", function (e) {					
 					stage = e.target.stage;
-					if (!target.amu) target.amu = stage.frame.on("mouseupplus", function() {					
-						mouseCheck = false;				
-					}, null, null, null, null, mID);		
+					// if (!target.amu) target.amu = stage.frame.on("mouseupplus", function() {					
+					// 	mouseCheck = false;				
+					// }, null, null, null, null, mID);		
 					stage.mouseMoveOutside = true;
 					flipCheck = false; // sometimes picking up target changes its direction - not good
 					activeCheck = true;
@@ -61223,7 +61230,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 					target.off("mousedown", target.zimAnimateDragDown, null, mID);
 					target.off("pressmove", target.zimAnimateDragPress, null, mID);
 					target.off("pressup", target.zimAnimateDragUp, null, mID);
-					if (target.amu) stage.frame.off("mouseupplus", target.amu, null, mID);	
+					// if (target.amu) stage.frame.off("mouseupplus", target.amu, null, mID);	
 					if (target.zimDragAnimateTicker) zim.Ticker.remove(target.zimDragAnimateTicker, mID, target);
 				}
 				if (zot(ids)) {
@@ -75533,7 +75540,7 @@ dispatches a "swipestop" event when swipeup has happened and value has stopped c
 				downHandler(e);
 				that.moveEvent = container.on("stagemousemove", pressHandler, null, null, null, null, mID);
 				that.upEvent = container.on("stagemouseup", doUpStage, null, null, null, null, mID);
-				that.upEvent2 = frame.on("mouseupplus", doUpStage, null, null, null, null, mID);
+				// that.upEvent2 = frame.on("mouseupplus", doUpStage, null, null, null, null, mID);
 			}, null, null, null, null, mID);			
 		} else {
 			stage = container.stage;
@@ -75541,7 +75548,7 @@ dispatches a "swipestop" event when swipeup has happened and value has stopped c
 			that.downEvent = container.on("mousedown", downHandler, null, null, null, null, mID);
 			that.moveEvent = container.on("pressmove", pressHandler, null, null, null, null, mID);
 			that.upEvent = container.on("pressup", doUpObj, null, null, null, null, mID);
-			that.upEvent2 = frame.on("mouseupplus", doUpObj, null, null, null, null, mID);			
+			// that.upEvent2 = frame.on("mouseupplus", doUpObj, null, null, null, null, mID);			
 		}
 		
 		function doUpStage() {
@@ -75695,13 +75702,13 @@ dispatches a "swipestop" event when swipeup has happened and value has stopped c
 			container.off("stagemousedown", that.downEvent, null, mID);
 			container.off("stagemousemove", that.moveEvent, null, mID);
 			container.off("stagemouseup", that.upEvent, null, mID);
-			frame.off("mouseupplus", that.upEvent2, null, mID);
+			// frame.off("mouseupplus", that.upEvent2, null, mID);
 		}
 		function offMouseEvents() {
 			container.off("mousedown", that.downEvent, null, mID);
 			container.off("pressmove", that.moveEvent, null, mID);
 			container.off("pressup", that.upEvent, null, mID);
-			frame.off("mouseupplus", that.upEvent2, null, mID);
+			// frame.off("mouseupplus", that.upEvent2, null, mID);
 		}
 
 		function disable() {
@@ -75717,7 +75724,7 @@ dispatches a "swipestop" event when swipeup has happened and value has stopped c
 				that.downEvent = container.on("mousedown", that.downEvent, null, null, null, null, mID);
 				that.moveEvent = container.on("pressmove", that.moveEvent, null, null, null, null, mID);
 				that.upEvent = container.on("pressup", that.upEvent, null, null, null, null, mID);
-				that.upEvent2 = frame.on("mouseupplus", that.upEvent2, null, null, null, null, mID);
+				// that.upEvent2 = frame.on("mouseupplus", that.upEvent2, null, null, null, null, mID);
 			}
 			that.immediate(that.target[that.property]);
 			that.swiperTicker = zim.Ticker.add(that.swiperTicker, stage, mID, that);
@@ -82505,6 +82512,8 @@ This allows, for instance, matching duplicate letters or colors.
 
 See: https://zimjs.com/cat/scrambler.html
 
+NOTE: if scaling or moving the scrambler (aside from FIT and FILL scaling) then see beforeUpdate() and afterUpdate()
+
 NOTE: if using Adobe Animate then use the latest ZIM version of CreateJS - see https://zimjs.com/cdn/
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
@@ -82574,7 +82583,11 @@ solve(time, wait, disable) - solve the tile - so arrange the tile in the start o
 test() - returns true if tiles match starting orientation or keys if keys provided
 testItem(item, index) - test a specific item in the Scrambler to see if correct - index is optional otherwise it will calculate it
 	note - there is a "complete" event and complete property so usually there is no need to test an item
-update() - if the Scrambler is moved in its container, call update() to reset drag boundary
+beforeUpdate() - call this before scaling or moving the scrambler (aside from the FIT or FILL mode scaling) see also afterUpdate()
+	this removes the drag boundary on the tile
+afterUpdate() - call this after scaling or moving the scrambler (aside from the FIT or FILL mode scaling) see also beforeUpdate()
+	this adds back the drag boundary on the tile
+update() - DEPRECATED - if the Scrambler is moved in its container, call update() to reset drag boundary
 clone() - makes a copy with properties such as x, y, etc. also copied
 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
 
@@ -82683,17 +82696,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			// createjs does not do pressup or turn off pressmove when up over iframe 
 			// so use mouseupplusonly 
 			// also need normal mouseup with pointer ids to stop multitouch
-			if (frame) {
-				if (!that.scrmu) that.scrmu = frame.on("mouseupplusonly", function(e) {  
-					if (that.myDownCheck) { 
-						that.myDownCheck = false; 
-						var pp = zim.loop(tile.pointers, function(p,v) {return v;});
-						if (!pp) tile.pointers["id0"] = true;
-						e = {target:lastTile, pointerID:e.pointerID?pp:-1};
-						doUp(e);
-					}					
-				}, null, null, null, null, mID);	
-			}
+			// if (frame) {
+			// 	if (!that.scrmu) that.scrmu = frame.on("mouseupplusonly", function(e) {  
+			// 		if (that.myDownCheck) { 
+			// 			that.myDownCheck = false; 
+			// 			var pp = zim.loop(tile.pointers, function(p,v) {return v;});
+			// 			if (!pp) tile.pointers["id0"] = true;
+			// 			e = {target:lastTile, pointerID:e.pointerID?pp:-1};
+			// 			doUp(e);
+			// 		}					
+			// 	}, null, null, null, null, mID);	
+			// }
 			if (that.upEvent) tile.off("pressup", that.upEvent, null, mID);
 			that.upEvent = tile.on("pressup", function(e) {
 				var id = "id"+Math.abs(e.pointerID+1);
@@ -82863,6 +82876,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			return this;
 		}
 
+		this.beforeUpdate = function() {
+			tile.noDrag();
+			return this;
+		}
+
+		this.afterUpdate = function() {			
+			tile.drag({boundary:tile, singleTouch:true});
+			return this;
+		}
+
 		this.starts = [];
 		var order = [];
 		zim.loop(tile.rows*tile.cols, function (i) {
@@ -83033,7 +83056,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		});	
 
 		this.dispose = function(a,b,disposing) {
-			if (that.scrmu) frame.off("mouseupplus", that.scrmu, null, mID);	
+			// if (that.scrmu) frame.off("mouseupplus", that.scrmu, null, mID);	
 			tile.removeAllEventListeners(null, mID);
 			if (!disposing) {
 				that.zimContainer_dispose(true);
@@ -94708,7 +94731,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);            	    	
@@ -95241,67 +95264,69 @@ DESCRIPTION
 The Frame has a "devicemotion" event to capture device tilt 
 and a "deviceorientation" to capture device rotation (like a compass)
 
-Also see the PermissionAsk() class which will handle asking for permission on iOS devices.
-
-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
 // 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();
+// be on a mobile device
+new PermissionAsk(yes=>{
+	if (yes) {
+		// all code goes in here
+		const label = new Label().loc(20,20);
+		F.on("deviceorientation", e=>{
+			label.text = "x: " + Math.round(e.rotation.x) 
+			    +"\ny: " + Math.round(e.rotation.y) 
+			    +"\nz: " + Math.round(e.rotation.z);
+			S.update();
+		});
+	} else {
+		new Pane("SENSOR not available",yellow).show();	
+	}
 });
 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 		
-		F.on("deviceorientation", e=>{
-			label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
-			S.update();
+// SHAKE
+// for capturing shaking motion on device (acceleration about an access)
+// be on a mobile device
+new PermissionAsk(init, "devicemotion");
+function init(yes) {	
+	if (yes) { // the user answers yes to the PermissionAsk	
+		let id;
+		F.on("devicemotion", e=>{
+		    if (
+		        Math.abs(e.acceleration.x) > 5 ||
+		        Math.abs(e.acceleration.y) > 5 ||
+		        Math.abs(e.acceleration.z) > 5
+		    ) {
+		        if (F.color != red) {
+		            F.color = red;
+		            S.update();
+		        }
+		        if (id) id.clear();
+		        id = timeout(.2, ()=>{
+		            F.color = light;
+		            S.update();
+		        });
+		    } 
 		});
-		S.update();
-	} else { // answered no to PermissionAsk dialog		
-		errorPane.show();
+	} else { // the user answered no to PermissionAsk dialog		
+		new Pane("SENSOR not available",yellow).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();
-});
-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)
 		eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)
 			note rotation.z is 360-alpha compared to the HTML 5 specs
 			note also that beta, gamma and alpha from the HTML 5 specs are also provided
+"devicemotion" - for shake
+	fired on moving mobile device - like a shake - eventObject.acceleration holds x, y and z properties of motion   
 --*///+83.86
 // Device motion and orientation events are available as Frame events
 //-83.86
@@ -95313,9 +95338,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 mobile.
 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.
@@ -95328,44 +95352,49 @@ 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
 // 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) {
+		// all code goes in here
+		const label = new Label().loc(20,20);
 		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);
+			label.text = "x: " + Math.round(e.rotation.x) 
+			    +"\ny: " + Math.round(e.rotation.y) 
+			    +"\nz: " + Math.round(e.rotation.z);
 			S.update();
 		});
-	} else { // the user answered no to PermissionAsk dialog		
-		errorPane.show();
-	}	
-}
+	} else {
+		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);
+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();
+	if (yes) { // the user answers yes to the PermissionAsk	
+		let id;
 		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 (
+		        Math.abs(e.acceleration.x) > 5 ||
+		        Math.abs(e.acceleration.y) > 5 ||
+		        Math.abs(e.acceleration.z) > 5
+		    ) {
+		        if (F.color != red) {
+		            F.color = red;
+		            S.update();
+		        }
+		        if (id) id.clear();
+		        id = timeout(.2, ()=>{
+		            F.color = light;
+		            S.update();
+		        });
+		    } 
 		});
 	} else { // the user answered no to PermissionAsk dialog		
-		errorPane.show();
+		new Pane("SENSOR not available",yellow).show()
 	}	
 }
 END EXAMPLE
@@ -95466,7 +95495,8 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 			backgroundColor:zim.faint,
 			rollBackgroundColor:color,
 			borderColor:color,
-			borderWidth:2         
+			borderWidth:2,
+			align:CENTER     
 		});
         var pt = permissionType;
 		var okay = false;
@@ -101539,6 +101569,13 @@ Will stretch to fit in dimensions and can choose to flip (default) or not.
 AS OF ZIM 018 - USE ML5 (Machine Learning 5)
 We recommend using ZIM Cam() with the ML5 Library at https://ml5js.org/ 
 Note: the ML5 library must be imported in a script tag.
+Note: there are different versions of ML5 with a different format for the code
+	A. More current version is ml5@1 - which takes the latest version 1 code
+		this is used here: https://zimjs.com/018/handtrack.html
+		and needs async and await as in the example above
+	B. Older version is ml5@1.2.1 used in mini site examples
+		here:  https://zimjs.com/ml5/hands.html
+		this DOES NOT use async and await
 
 HAND TRACKING WITH ZIM CAM AND ML5
 ZIM Cam has a handTrack(ML5results) method that will replace normal mouse and touch. 
@@ -103336,3 +103373,4 @@ export let Style = zim.Style;
 export let assets = zim.assets;
 export let assetIDs = zim.assetIDs;
 export let ZIMON = zim.ZIMON;
+

package/ts-src/typings/zim/index.d.ts

@@ -2868,24 +2868,6 @@ declare namespace zim {
 		readonly orgType: string
 		readonly removedItem: DisplayObject
 	}	
-    export class Shuffler extends Container implements zimComponent {
-		constructor(config_or_tile?: Tile, spacing?: number, offset?: number, vertical?: boolean, formatObj?: {}, damp?: number, keys?: [any], keyProperty?: string, shuffle?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, cache?: boolean, offsetOne?: number, offsetTwo?: number, style?: boolean, group?: string, inherit?: {})
-		constructor(config: { tile?: Tile, spacing?: number, offset?: number, vertical?: boolean, formatObj?: {}, damp?: number, keys?: [any], keyProperty?: string, shuffle?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, cache?: boolean, offsetOne?: number, offsetTwo?: number, style?: boolean, group?: string, inherit?: {} })
-		// ZIM Component Interface
-		// dispose():boolean // now added to Container, etc.
-		enabled: boolean
-		// END ZIM Component Interface
-		shuffle(time?: number, wait?: number, num?: number): this
-		solve(time?: number, wait?: number, disable?: boolean): this
-		test(): this
-		update(): this
-		testItem(item: DisplayObject, index?: number): this
-		format(formatObj: {}): this
-		readonly tile: Tile
-		readonly complete: boolean
-		readonly starts: [number]
-		readonly order: [number]
-	}
 	export class Connectors extends Container implements zimComponent {
 		constructor(config_or_width?: number, height?: number, points?: [] | zim.Blob | Squiggle, node?: DisplayObject, line?: Line, linear?: boolean, linearWrap?: boolean, linearOrder?: boolean, num?: number, snapH?: number, snapV?: number, dropType?: string, dropArray?: [number], continuous?: boolean, startIndex?: number, duplicateLines?: boolean, deleteNode?: boolean, dblclick?: boolean, fullMove?: boolean, min?: number, max?: number, boundary?: Boundary | DisplayObject, expand?: number, nodeRollColor?: string, nodeRollBorderColor?: string, nodeSelectedColor?: string, nodeSelectedBorderColor?: string, baseColor?: string, baseBorderColor?: string, baseRollover?: string, rootLock?: boolean, grandChildren?: boolean, dblclickTime?: number, style?: boolean, group?: string, inherit?: {})
 		constructor(config: { width?: number, height?: number, points?: [] | zim.Blob | Squiggle, node?: DisplayObject, line?: Line, linear?: boolean, linearWrap?: boolean, linearOrder?: boolean, num?: number, snapH?: number, snapV?: number, dropType?: string, dropArray?: [number], continuous?: boolean, startIndex?: number, duplicateLines?: boolean, deleteNode?: boolean, dblclick?: boolean, fullMove?: boolean, min?: number, max?: number, boundary?: Boundary | DisplayObject, expand?: number, nodeRollColor?: string, nodeRollBorderColor?: string, nodeSelectedColor?: string, nodeSelectedBorderColor?: string, baseColor?: string, baseBorderColor?: string, baseRollover?: string, rootLock?: boolean, grandChildren?: boolean, dblclickTime?: number, style?: boolean, group?: string, inherit?: {} })
@@ -3566,6 +3548,43 @@ declare namespace zim {
 		readonly pages: [DisplayObject]
 		readonly moving: boolean
 	}
+    export class Scrambler extends Container implements zimComponent {
+		constructor(config_or_tile?: Tile, keys?: [any], keyProperty?: string, scramble?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, swap?: boolean, swapLock?: boolean, style?: boolean, group?: string, inherit?: {})
+		constructor(config: { tile?: Tile, keys?: [any], keyProperty?: string, scramble?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, swap?: boolean, swapLock?: boolean, style?: boolean, group?: string, inherit?: {} })
+		// ZIM Component Interface
+		// dispose():boolean // now added to Container, etc.
+		enabled: boolean
+		// END ZIM Component Interface
+		scramble(time?: number, wait?: number, num?: number): this
+		solve(time?: number, wait?: number, disable?: boolean): this
+		test(): this
+		testItem(item: DisplayObject, index?: number): this
+		beforeUpdate(): this
+		afterUpdate(): this
+		update(): this
+		readonly tile: Tile
+		readonly complete: boolean
+		readonly starts: [number]
+	    order: [number]
+	}
+    export class Shuffler extends Container implements zimComponent {
+		constructor(config_or_tile?: Tile, spacing?: number, offset?: number, vertical?: boolean, formatObj?: {}, damp?: number, keys?: [any], keyProperty?: string, shuffle?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, cache?: boolean, offsetOne?: number, offsetTwo?: number, style?: boolean, group?: string, inherit?: {})
+		constructor(config: { tile?: Tile, spacing?: number, offset?: number, vertical?: boolean, formatObj?: {}, damp?: number, keys?: [any], keyProperty?: string, shuffle?: boolean, time?: number, wait?: number, num?: number, shadowColor?: string, shadowBlur?: number, cache?: boolean, offsetOne?: number, offsetTwo?: number, style?: boolean, group?: string, inherit?: {} })
+		// ZIM Component Interface
+		// dispose():boolean // now added to Container, etc.
+		enabled: boolean
+		// END ZIM Component Interface
+		shuffle(time?: number, wait?: number, num?: number): this
+		solve(time?: number, wait?: number, disable?: boolean): this
+		test(): this
+		update(): this
+		testItem(item: DisplayObject, index?: number): this
+		format(formatObj: {}): this
+		readonly tile: Tile
+		readonly complete: boolean
+		readonly starts: [number]
+		order: [number]
+	}
 	export class Scroller extends createjs.EventDispatcher {
 		constructor(config_or_backing: DisplayObject, speed?: number, direction?: number, horizontal?: boolean, gapFix?: number, stage?: Stage, container?: Stage | DisplayObject)
 		constructor(config: { backing: DisplayObject, speed?: number, direction?: number, horizontal?: boolean, gapFix?: number, stage?: Stage, container?: Stage | DisplayObject })