zimjs 19.1.2 → 19.1.4

package/package.json

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

package/src/zim.js

@@ -10166,8 +10166,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		this.sortBy = function(prop, inverse) {
 			if (zot(prop)) return this;
 			var sortFunction = function(obj1, obj2, options) {
-				if (obj1[prop] > obj2[prop]) { return inverse?-1:1; }
-				if (obj1[prop] < obj2[prop]) { return inverse?1:-1; }
+				if (Number(obj1[prop]) > Number(obj2[prop])) { return inverse?-1:1; }
+				if (Number(obj1[prop]) < Number(obj2[prop])) { return inverse?1:-1; }
 				return 0;
 			}
 			this.sortChildren(sortFunction);
@@ -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
@@ -49098,7 +49105,7 @@ zim.extend(zim.Carousel3D, zim.Container, ["clone", "dispose"], "zimContainer",
 //-67.47
 
 /*--
-zim.Loader = function(width, height, label, type, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, multiple, accept, style, group, inherit)
+zim.Loader = function(width, height, label, type, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, rollBorderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, multiple, accept, style, group, inherit)
 
 Loader
 zim class - extends a zim.Button which extends a zim.Container
@@ -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);
@@ -80733,10 +80740,10 @@ obj - (default ZIM makeIcon({box:black})) the object to glitch.
 	this will be put in a holder Container inside the object in the Glitch and then passed as channel0 to a Shader.
 	the Shader will be placed on top of the holder and can have its alpha and blendmode set with parameters.
 	if dragging the object, make sure to set glitch.drag({all:true}) to drag all of the Glitch rather than just its parts.
-glitchType - (default "tv") the type of glitch 
+glitchType - (default "chunk") the type of glitch 
+	"chunk" - jitters and slides chunks out the side adds interlace
 	"tv" - jitters the object and applies green lines
 	"scan" - jitters and makes scan glitch
-	"chunk" - jitters and slides chunks out the side adds interlace
 	"halftone" - adds dots - looks better on animated or video objects
 	NOTE: these are just a few examples of shader effects.  See Shader to apply any shader (fragment / vertex) to any objects (through channels)
 alpha - (default 1) set the alpha of the Shader which sits above the original - this will lessen the glitch effect
@@ -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);
@@ -85386,7 +85409,7 @@ zim.Emitter = function(obj, width, height, interval, num, life, fade, shrink, wa
 			if (cache) stage.snapToPixelEnabled = true;
 		}
 
-		that.zimInterval.pauseOnBlurPaused = state; // ZIM 019 Patch - in case being paused when tab not active
+		if (that.zimInterval) that.zimInterval.pauseOnBlurPaused = state; // ZIM 019 Patch - in case being paused when tab not active
 		return that;
 	};
 
@@ -101539,6 +101562,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. 

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?: {} })
@@ -2996,8 +2978,8 @@ declare namespace zim {
         readonly holder: Container
 	}
 	export class Loader extends Button implements zimComponent {
-		constructor(config_or_width?: number | string, height?: number | string, label?: string | Label, type?: string, backgroundColor?: color, rollBackgroundColor?: color, color?: color, rollColor?: color, borderColor?: color, borderWidth?: number, corner?: number | any[], shadowColor?: color, shadowBlur?: number, hitPadding?: number, gradient?: number, gloss?: number, dashed?: boolean | [number], backing?: DisplayObject, rollBacking?: DisplayObject, rollPersist?: boolean, icon?: DisplayObject, rollIcon?: DisplayObject, toggle?: string, rollToggle?: DisplayObject, toggleEvent?: string, frame?: Frame, multiple?: boolean, accept?: [any], style?: boolean, group?: string, inherit?: {})
-		constructor(config: { width?: number | string, height?: number | string, label?: string | Label, type?: string, backgroundColor?: color, rollBackgroundColor?: color, color?: color, rollColor?: color, borderColor?: color, borderWidth?: number, corner?: number | any[], shadowColor?: color, shadowBlur?: number, hitPadding?: number, gradient?: number, gloss?: number, dashed?: boolean | [number], backing?: DisplayObject, rollBacking?: DisplayObject, rollPersist?: boolean, icon?: DisplayObject, rollIcon?: DisplayObject, toggle?: string, rollToggle?: DisplayObject, toggleEvent?: string, frame?: Frame, multiple?: boolean, accept?: [any], style?: boolean, group?: string, inherit?: {} })
+		constructor(config_or_width?: number | string, height?: number | string, label?: string | Label, type?: string, backgroundColor?: color, rollBackgroundColor?: color, color?: color, rollColor?: color, borderColor?: color, rollBorderColor?: color, borderWidth?: number, corner?: number | any[], shadowColor?: color, shadowBlur?: number, hitPadding?: number, gradient?: number, gloss?: number, dashed?: boolean | [number], backing?: DisplayObject, rollBacking?: DisplayObject, rollPersist?: boolean, icon?: DisplayObject, rollIcon?: DisplayObject, toggle?: string, rollToggle?: DisplayObject, toggleEvent?: string, frame?: Frame, multiple?: boolean, accept?: [any], style?: boolean, group?: string, inherit?: {})
+		constructor(config: { width?: number | string, height?: number | string, label?: string | Label, type?: string, backgroundColor?: color, rollBackgroundColor?: color, color?: color, rollColor?: color, borderColor?: color, rollBorderColor?: color, borderWidth?: number, corner?: number | any[], shadowColor?: color, shadowBlur?: number, hitPadding?: number, gradient?: number, gloss?: number, dashed?: boolean | [number], backing?: DisplayObject, rollBacking?: DisplayObject, rollPersist?: boolean, icon?: DisplayObject, rollIcon?: DisplayObject, toggle?: string, rollToggle?: DisplayObject, toggleEvent?: string, frame?: Frame, multiple?: boolean, accept?: [any], style?: boolean, group?: string, inherit?: {} })
 		// ZIM Component Interface
 		// dispose():boolean // now added to Container, etc.
 		enabled: boolean
@@ -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 })