zimjs 17.0.4 → 17.2.0

package/src/zim.js

@@ -9745,6 +9745,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		this.setBounds = function(a,b,c,d) {
 			var n = normalizeBounds(a, b, c, d);
 			that.cjsContainer_setBounds(n[0],n[1],n[2],n[3]);
+			that.width;
 			return that;
 		};
 		this.getBounds = function(targetSpace) {
@@ -10197,6 +10198,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		this.setBounds = function(a,b,c,d) {
 			var n = normalizeBounds(a, b, c, d);
 			this.cjsShape_setBounds(n[0],n[1],n[2],n[3]);
+			this.width;
 			return this;
 		};
 		this.getBounds = function(targetSpace) {
@@ -10273,9 +10275,10 @@ zim class - extends a createjs.Bitmap
 
 DESCRIPTION
 Makes a Bitmap object from an image source (image, video or canvas).
-It is best to use the assets and path parameters of ZIM Frame or the loadAssets() method of Frame
-to preload the image and then use the asset() method to access the Bitmap.
-See the ZIM Frame class and asset example on the ZIM Frame page of templates.
+It is best to preload images in the Frame() or with loadAssets() and the path parameter
+then simply use ZIM Pic() to display the image.
+See the ZIM Frame class and ZIM Pic in the Docs.
+But Bitmap() is handy to turn other canvases or any DisplayObject into a picture.
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
@@ -10597,6 +10600,7 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe
 	this.setBounds = function(a,b,c,d) {
 		var n = normalizeBounds(a, b, c, d);
 		that.cjsBitmap_setBounds(n[0],n[1],n[2],n[3]);
+		that.width;
 		return that;
 	};
 	this.getBounds = function(targetSpace) {
@@ -10786,6 +10790,424 @@ zim.Bitmap.prototype.dispose = function() {return this.doDispose();};
 zimify(zim.Bitmap.prototype);
 	//-50.7
 
+/*--
+zim.SlicedBitmap = function(width, height, obj, slices, types, gap, scale, style, group, inherit)
+
+SlicedBitmap
+zim class - extends a zim.Bitmap which extends a createjs.Bitmap
+
+DESCRIPTION
+Makes an n-sliced bitmap.  This is similar to 9-sliced, and can do 9-sliced, 
+but also can have any number of horizontal or vertical slices.
+The slices make regions that can be fixed in scale, stretched or tiled.
+This is handy for graphics that have detailed corners or edges that should not be scaled 
+and then areas that can be scaled or tiled when size is changed.
+The bitmap can then be sized with slicesWidth and slicesHeight rather than width and height 
+to stretch and tile those regions but leave fixed regions fixed in size.
+
+The ZIM transform() defaults to using slicesWidth and slicesHeight when resizing the edges 
+it will still scale when using the corners.  This can be turned off by setting sliceX and sliceY parameters of transform to false.
+
+Properties for the slice lines are available and can be set and animated as can the scalesWidth and scalesHeight.
+
+SEE: https://zimjs.com/slices for the ZIM Slices tool and example of SlicedBitmap
+
+NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
+
+EXAMPLE
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+new SlicedBitmap(1600, pic.height, pic, [0.25,0.75],[0.25,0.75]], [[0,1,0],[0,1,0])
+	.center()
+	.transform({minScaleX:.05, minScaleY:.05});
+END EXAMPLE
+
+EXAMPLE
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
+const startSlices = [0.25,0.75],[0.25,0.75]];
+const startTypes = [[0,2,0],[0,1,0]; // middle is tiled horizontally and stretched vertically
+const slicer = new Slicer({
+	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
+	scale:.5, 
+	slices:startSlices, 
+	types:startTypes, 
+	upload:false
+})
+	.pos(30,50)
+	.change(()=>{preview.exchange = slicer.exchange;);	// this will update the picture below
+
+// this will provide slice type options
+new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
+
+// SlicedBitmaps slicesWidth and slicesHeight do not currently scale from the registration point
+// here we animate the slicesWidth and use a container to animate from the center
+const holder = new Container(800,400).center();
+const preview = new SlicedBitmap(1600, pic.height, pic, slicer.slices, slicer.types, 2, .5)
+	.center(holder)
+	.animate({
+		props:{slicesWidth:980},
+		// props:{sH0:.31}, // alternatively, animate the first horizontal slice (vertical line) 
+		time:2,
+		ease:"elasticInOut",
+		rewind:true,
+		rewindWait:1,
+		loop:true,
+		loopWait:1,
+		animateCall:()=>{preview.center(holder)} // always recenter the SlicedBitmap in the container
+	});
+END EXAMPLE
+
+PARAMETERS
+** supports DUO - parameters or single object with properties below
+** supports OCT - parameter defaults can be set with STYLE control (like CSS)
+width - (default null) the width of the object - this will apply slices and types settings to keep fixed, scale or tile regions
+height - (default null) the height of the object - this will apply slices and types settings to keep fixed, scale or tile regions
+obj - (default null) a DisplayObject such as a ZIM Pic, Container, etc. or an HTML image or canvas
+slices - (default null) an array of horizontal and vertical arrays holding slice percentage 
+	[[.25,.75], [.1,.4,.5,.9]]
+	three horizontal regions made from two vertical lines placed at 1/4 and 3/4 the width 
+	five vertical regions made from four horizontal lines with 1/10 the picture at left, middle and right
+types - (default null) an array of horizontal and vertical arrays holding slice types
+	0 - fix - keeps the original width and height of the region.  Usually, good for corners.
+	1 - stretch - stretch the region to fill space as an object is stretched
+	2 - tile - tile the region at original scale - currently, will match the first side and sometimes the second side
+gap - (default 2) pixels to overlap on each side to avoid canvas ditthered edges 
+scale - (default 1) a scale for the caching
+style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
+group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
+inherit - (default null) used internally but can receive an {} of styles directly
+
+METHODS
+slicesSca() - like sca() but will call sclicesScaleX and slicesScaleY to operate on regions
+hasProp(property as String) - returns true if property exists on object else returns false
+clone() - makes a copy with properties such as x, y, etc. also copied - also copies file and src properties
+dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
+	if this is a cloned bitmap then the original asset("image.png") will still exist unless it is disposed.
+	
+ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
+drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
+addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
+ALSO: see the ZIM Bitmap methods, such as:
+keyOut(), cache(), getColorAt(), etc.
+ALSO: see the CreateJS Easel Docs for Bitmap methods, such as:
+on(), off(), dispatchEvent(), etc.
+
+PROPERTIES
+type - holds the class name as a String
+slices - get or set slices - see slices parameter and sH, sV properties
+types - get or set types - see types parameter and tH, tV properties
+gap - get or set the gap 0 see gap parameter
+slicesWidth - set the width so slices operate - different than width which will scale in general, not operating the slices
+slicesHeight - set the height so slices operate - different than height which will scale in general, not operating the slices
+slicesSale - set the scale so the slices operate - different than scale which will scale in general, not operating the slices
+slicesScaleX - set the scaleX so the slices operate - different than scaleX which will scale in general, not operating the slices
+slicesScaleY - set the scaleY so the slices operate - different than scaleY which will scale in general, not operating the slices
+exchange - set the [slices, types] in one array - used to recieve data from the ZIM Slicer
+sH - set an individual horizontal slice percent - these are sH0, sH1, sH2, etc. and are properties that can be animated and wiggled as well
+sV - set an individual vertical slice percent - these are sH0, sH1, sH2, etc. and are properties that can be animated and wiggled as well
+tH - set an individual horizontal slice type - also see types parameter
+tV - set an individual vertical slice type - also see types parameter
+
+ALSO: see ZIM Docs for Bitmap properties, such as:
+width, height, widthOnly, heightOnly, draggable, level, blendMode, etc.
+ALSO: see the CreateJS Easel Docs for Bitmap properties, such as:
+x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
+alpha, cursor, shadow, mouseEnabled, etc.
+
+EVENTS
+See the CreateJS Easel Docs for Bitmap events, such as:
+added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
+--*///+50.7
+	zim.SlicedBitmap = function(width, height, obj, slices, types, gap, scale, style, group, inherit) {	
+		var sig = "width, height, obj, slices, types, gap, scale, style, group, inherit";
+		var duo; if (duo = zob(zim.SlicedBitmap, arguments, sig, this)) return duo;
+		z_d("50.75");	
+
+		this.group = group;
+		var DS = style===false?{}:zim.getStyle("SlicedBitmap", this.group, inherit);
+
+		var objCanvas;
+		var message = "ZIM SlicedBitmap needs DisplayObject";
+		if (zot(obj)) obj = DS.obj!=null?DS.obj:null;	
+		if (!obj.getBounds) {zogy(message); return;}
+		var b = obj.getBounds();
+		var w = b.width;
+		var h = b.height;
+		if (zot(width)) width = DS.width!=null?DS.width:500;	
+		if (zot(height)) height = DS.height!=null?DS.height:500;	
+		if (!obj.cacheCanvas) {					
+			if (obj.cache) {									
+				obj.cache(b.x,b.y,w,h);
+				objCanvas = obj.cacheCanvas;
+			}
+			else {zogy(message); return;}
+		} else {
+			objCanvas = obj.cacheCanvas;
+		}
+		if (zot(slices)) slices = DS.slices!=null?DS.slices:[[],[]];	
+		var defaults = [[1],[1]];	
+		zim.loop(slices,function(s,i) {
+			zim.loop(s,function() {
+				defaults[i].push(1);
+			});
+		});
+		if (zot(types)) types = DS.types!=null?DS.types:defaults;	
+		if (zot(scale)) scale = DS.scale!=null?DS.scale:1;	
+
+		// convert to createjs pixels rather than percent
+		var slicesSend = zim.copy(slices);
+		zim.loop(slicesSend[0], function(s,i) {
+			slicesSend[0][i] = s*w;					
+		});
+		zim.loop(slicesSend[1], function(s,i) {
+			slicesSend[1][i] = s*h;					
+		});
+		var sb = this.scaleBitmap = new createjs.ScaleBitmap(objCanvas, slicesSend, types, gap);
+		slicesSend = null;
+		sb.setDrawSize(width,height);
+		sb.cache(0,0,width,height,scale);	
+		
+
+		this.zimBitmap_constructor(sb.cacheCanvas);
+		this.type = "SlicedBitmap";
+		var that = this;
+
+		// METHODS
+
+		that.slicesSca = function(scale, scaleY) {
+			if (zot(scale)) scale = that.slicesScaleX;
+			if (zot(scaleY)) scaleY = scale;
+			obj.slicesScaleX = scale; obj.slicesScaleY = scaleY;
+			return that;
+		};
+		
+		// PROPERTIES
+
+		Object.defineProperty(that, 'slicesWidth', {
+			get: function() {
+				return width;
+			},
+			set: function(value) {
+				width = value;
+				sb.setDrawSize(width, height);
+				sb.cache(0,0,width,height,scale);
+				that.sourceRect = new createjs.Rectangle(0,0,width*scale,height*scale);
+				that.setBounds(null);
+				if (that.transformControls) that.transformControls.resize();
+			}
+		});			
+		Object.defineProperty(that, 'ssW', { // no transformControls resize as was feeding back from transform
+			get: function() {
+				return width;
+			},
+			set: function(value) {
+				width = value;
+				sb.setDrawSize(width, height);
+				sb.cache(0,0,width,height,scale);
+				that.sourceRect = new createjs.Rectangle(0,0,width*scale,height*scale);
+				that.setBounds(null);
+			}
+		});			
+
+		Object.defineProperty(that, 'slicesHeight', {
+			get: function() {
+				return height;
+			},
+			set: function(value) {
+				height = value;
+				sb.setDrawSize(width, height);
+				sb.cache(0,0,width,height,scale);
+				that.sourceRect = new createjs.Rectangle(0,0,width*scale,height*scale);
+				that.setBounds(null);
+				if (that.transformControls) that.transformControls.resize();
+			}
+		});				
+		Object.defineProperty(that, 'ssH', { // no transformControls resize as was feeding back from transform
+			get: function() {
+				return height;
+			},
+			set: function(value) {
+				height = value;
+				sb.setDrawSize(width, height);
+				sb.cache(0,0,width,height,scale);
+				that.sourceRect = new createjs.Rectangle(0,0,width*scale,height*scale);
+				that.setBounds(null);
+			}
+		});			
+
+		var originalWidth = width;
+		Object.defineProperty(that, 'slicesScaleX', {
+			get: function() {
+				return width/originalWidth;
+			},
+			set: function(value) {
+				that.slicesWidth = value?originalWidth*value:0;						
+			}
+		});		
+		Object.defineProperty(that, 'ssX', { // no transformControls resize as was feeding back from transform
+			get: function() {
+				return width/originalWidth;
+			},
+			set: function(value) {
+				that.ssW = value?originalWidth*value:0;						
+			}
+		});		
+		
+		var originalHeight = height;
+		Object.defineProperty(that, 'slicesScaleY', {
+			get: function() {
+				return height/originalHeight;
+			},
+			set: function(value) {
+				that.slicesHeight = value?originalHeight*value:0;						
+			}
+		});
+		Object.defineProperty(that, 'ssY', { // no transformControls resize as was feeding back from transform
+			get: function() {
+				return height/originalHeight;
+			},
+			set: function(value) {
+				that.ssH = value?originalHeight*value:0;						
+			}
+		});	
+
+		Object.defineProperty(that, 'slicesScale', {
+			get: function() {
+				return width/originalWidth;
+			},
+			set: function(value) {
+				that.slicesWidth = value?originalWidth*value:0;
+				that.slicesHeight = value?originalHeight*value:0;						
+			}
+		});		
+
+		
+		Object.defineProperty(that, 'slices', {
+			get: function() {
+				return slices;
+			},
+			set: function(value) {
+				if (zot(value) || !Array.isArray(value)) value = [[],[]];
+				slices = value;
+				var b = obj.getBounds();
+				var w = b.width;
+				var h = b.height;		
+				var slicesSend = zim.copy(slices);	
+				zim.loop(slicesSend[0], function(s,i) {						
+					slicesSend[0][i] = s*w;					
+				});
+				zim.loop(slicesSend[1], function(s,i) {
+					slicesSend[1][i] = s*h;					
+				});
+				sb.slices = slicesSend;
+				slicesSend = null;
+				sb.updateCache();						
+			}
+		});
+
+		Object.defineProperty(that, 'types', {
+			get: function() {
+				return types;
+			},
+			set: function(value) {											
+				if (zot(value) || !Array.isArray(value)) {
+					var defaults = [[1],[1]];	
+					zim.loop(slices,function(s,i) {
+						zim.loop(s,function() {
+							defaults[i].push(1);
+						});
+					});
+					value = defaults;
+				}
+				sb.types = types = value;
+				sb.updateCache();						
+			}
+		});
+
+		Object.defineProperty(that, 'gap', {
+			get: function() {
+				return gap;
+			},
+			set: function(value) {						
+				sb.gap = gap = value;
+			}
+		});			
+
+		Object.defineProperty(that, 'exchange', {
+			get: function() {
+				return [slices, types];
+			},
+			set: function(value) {
+				var b = obj.getBounds();
+				var w = b.width;
+				var h = b.height;	
+				slices = value[0];	
+				var slicesSend = zim.copy(slices);	
+				zim.loop(slicesSend[0], function(s,i) {						
+					slicesSend[0][i] = s*w;					
+				});
+				zim.loop(slicesSend[1], function(s,i) {
+					slicesSend[1][i] = s*h;					
+				});
+				sb.slices = slicesSend;
+				slicesSend = null;
+				sb.types = types = value[1];
+				sb.updateCache();	
+			}
+		});				
+
+		zim.loop(20, function(i) {
+			Object.defineProperty(that, 'sH'+i, {
+				get: function() {
+					return slices[0][i];
+				},
+				set: function(value) {
+					slices[0][i] = value;
+					that.slices = slices;
+				}
+			});			
+		});
+
+		zim.loop(20, function(i) {
+			Object.defineProperty(that, 'sV'+i, {
+				get: function() {
+					return slices[1][i];
+				},
+				set: function(value) {
+					slices[1][i] = value;
+					that.slices = slices;
+				}
+			});			
+		});
+
+		zim.loop(20, function(i) {
+			Object.defineProperty(that, 'tH'+i, {
+				get: function() {
+					return types[0][i];
+				},
+				set: function(value) {
+					types[0][i] = value;
+					that.types = types;
+				}
+			});			
+		});
+
+		zim.loop(20, function(i) {
+			Object.defineProperty(that, 'tV'+i, {
+				get: function() {
+					return types[1][i];
+				},
+				set: function(value) {
+					types[1][i] = value;
+					that.types = types;
+				}
+			});			
+		});			
+
+	}
+	zim.extend(zim.SlicedBitmap, zim.Bitmap, null, "zimBitmap", false);
+	//-50.75
+
 /*--
 zim.Sprite = function(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, label, frame, style, group, inherit)
 
@@ -10958,7 +11380,7 @@ group - (default null) set to String (or comma delimited String) so STYLE can se
 inherit - (default null) used internally but can receive an {} of styles directly
 
 METHODS
-run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, tweek, id, globalControl)
+run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, frame, tweek, id, globalControl)
 	The run() method animates the Sprite over an amount of time
 	Would recommend this method over the CreateJS play() and gotoAndPlay()
 	methods because the framerate for these get overwritten by other S.update() calls
@@ -10998,6 +11420,8 @@ run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount,
 		note - this goes backwards - so "bounceOut" would happen at the end of the rewind
 	startFrame - (default null - or 0) the frame to start on - will be overridden by a label with frames
 	endFrame - (default null - or totalFrames) the frame to end on - will be overridden by a label with frames
+	frame - (default null) set the single frame to run - will override startFrame and endFrame
+		this is good for a TextureAtlas where you show one frame of the sprite as a picture
 	tweek - (default 1) a factor for extra time on rewind and loops if needed
 	id - (default randomly assigned) an id you can use in other animations - available as sprite.id
 		use this id in other animations for pauseRun and stopRun to act on these as well
@@ -11281,8 +11705,8 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr
 			return framesNormalized;
 		};
 
-		this.run = function(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, tweek, id, globalControl, pauseOnBlur) {
-			var sig = "time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, tweek, id, globalControl, pauseOnBlur";
+		this.run = function(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, frame, tweek, id, globalControl, pauseOnBlur) {
+			var sig = "time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, frame, tweek, id, globalControl, pauseOnBlur";
 			var duo; if (duo = zob(that.run, arguments, sig)) return duo;
 
 			var timeType = getTIME();
@@ -11291,6 +11715,7 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr
 			if (zot(tweek)) tweek = 1;
 			if (!zot(id)) that.id = id;
 			if (!zot(globalControl)) that.globalControl = globalControl;
+			if (!zot(frame)) startFrame = endFrame = frame;
 
 			var extraTime;
 			if (Array.isArray(label)) {
@@ -11513,6 +11938,7 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr
 		this.setBounds = function(a,b,c,d) {
 			var n = normalizeBounds(a, b, c, d);
 			that.cjsSprite_setBounds(n[0],n[1],n[2],n[3]);
+			that.width;
 			return that;
 		};
 		this.getBounds = function(targetSpace) {
@@ -11700,6 +12126,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		this.setBounds = function(a,b,c,d) {
 			var n = normalizeBounds(a, b, c, d);
 			that.cjsMovieClip_setBounds(n[0],n[1],n[2],n[3]);
+			that.width;
 			return that;
 		};
 		this.getBounds = function(targetSpace) {
@@ -23080,8 +23507,7 @@ addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChil
 
 PROPERTIES
 type - the name of the class as a String
-text - get the text of the original Label
-	See: https://zimjs.com/zapp/Z_VSR9X for updating text
+text - get or set the text
 labels - an array of ZIM Label objects for the letters
 numLetters - how many letters (same as numChildren)
 
@@ -23123,391 +23549,449 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		this.type = "LabelLetters";
 
 		var that = this;
-		var letterData = that.letterData = [];
-		var original, data;
-		if (label.type != "Label") {
-			data = parseHTML(label); // returns {text:text, data:data}	
-			letterData = data.data;	
-			label = new zim.Label(data.text);						
-		} else {
-			data = parseHTML(label.text); 
-			letterData = data.data;	
-			label.text = data.text;
-		}
-		that.text = data.original;
-		that._color = label.color;
-		
-		// handle DIR effect 
-		if ((WW.DIR && WW.DIR=="rtl") || (!WW.DIR && zim.DIR=="rtl")) {
-			if (lineAlign=="start") lineAlign="right";
-			else if (lineAlign=="end") lineAlign="left";
-		} else {
-			if (lineAlign=="start") lineAlign="left";
-			else if (lineAlign=="end") lineAlign="right";
-		}
-		
-		function parseHTML(html) {
-			var data = [];
-						
-			// var example = "LabelLetters()<br><br><font group=heading backgroundColor=yellow rollBackgroundColor=green><a href=https://zimjs.com target=_blank>Example</a></font>: <b>strong</b> <i>emphasis</i> <u>underline</u><br><font color=red size=50 family=verdana><strong>big</strong> red verdana</font><br>the next line"
-			// "LabelLetters()Example: strong emphasis underlinebig red verdanathe next line"
-			// "01234567890123456789012345678901234567890123456789012345678901234567890120123456789012"
-			// "0         1         2         3         4         5         6         7"
-			// html = "!Roger הגיע בשבילך משהו בדואר Dan אני לומד עברית";
-			// html = "הגיע בשבילך משהו בדואר.";
-						
-			function insert(data) {	
-				return data.split("").reverse().join("")
-			}
-			if (rtl) {
-				count = -1;				
-				html = html.replace(/[\u0591-\u07FF]+/ig, insert);	
-				
-				// and there may be tags or LTR characters next to RTL without a space:
-				html = html.replace(/([^\u0591-\u07FF ])([\u0591-\u07FF])/ig, "$1-!!-$2"); // note the not space
-				html = html.replace(/([\u0591-\u07FF])([^\u0591-\u07FF ])/ig, "$1-!!-$2"); // note the not space				
-				html = html.replace(/([^\u0591-\u07FF]) ([\u0591-\u07FF])/ig, "$1-!!- -!!-$2");
-				html = html.replace(/([\u0591-\u07FF]) ([^\u0591-\u07FF])/ig, "$1-!!- -!!-$2");
-				
-				var sp = html.split(/-!!-/g);
-				zim.loop(sp, function(ssp, i){
-					if (ssp.match(/[\u0591-\u07FF]/i)) {
-						sp[i] = ssp.split(" ").reverse().join(" ");
-					}
-				});
-				html = sp.join("");	
-			}
-			
 
-			// normalize tags
-			html = html.replace(/\n|\r/g,"<br>");
-			html = html.replace(/<strong>|<strong \/>|<strong\/>/gi,"<b>");
-			html = html.replace(/<\/strong>/gi,"</b>");
-			html = html.replace(/<em>|<em \/>|<em\/>/gi,"<i>");
-			html = html.replace(/<\/em>/gi,"</i>");
-			html = html.replace(/\\n|\\r/g,"<br>");
-			html = html.replace(/<br>|<br \/>|<br\/>(<\/br>)?/gi,"<br>");			
-			html = html.replace(/<b/gi,"<b");
-			html = html.replace(/<i/gi,"<i");
-			html = html.replace(/<u/gi,"<u");
-			html = html.replace(/<br/gi,"<br");
-			html = html.replace(/<a/gi,"<a");
-			html = html.replace(/<font/gi,"<font");
-			
-			// turn all other tags into "" do split on tag and count index for tag 
-			// process this and store in data so get index of tags in string with no tags counted
-			
-			var regs = [
-				/<(a|i|u|f|br|\/a|\/i|\/u|\/f|\/b)[^>]*>/g,
-				/<(a|i|u|f|br|\/a|\/i|\/u|\/f|b)[^>]*>/g,				
-				/<(b|i|u|f|br|\/b|\/i|\/u|\/f|\/a)[^>]*>/g,
-				/<(b|i|u|f|br|\/b|\/i|\/u|\/f|a)[^>]*>/g,				
-				/<(b|a|u|f|br|\/b|\/a|\/u|\/f|\/i)[^>]*>/g,
-				/<(b|a|u|f|br|\/b|\/a|\/u|\/f|i)[^>]*>/g,
-				/<(b|a|i|f|br|\/b|\/a|\/i|\/f|\/u)[^>]*>/g,
-				/<(b|a|i|f|br|\/b|\/a|\/i|\/f|u)[^>]*>/g,	
-				/<(b|a|i|u|br|\/b|\/a|\/i|\/u|\/f)[^>]*>/g,
-				/<(b|a|i|u|br|\/b|\/a|\/i|\/u|f)[^>]*>/g			
-			];
-			var types = ["b","a","i","u","font"];
-			var p;
-			zim.loop(types, function(type, i) {
-				p = html.replace(regs[i*2],"");
-				var arr;
-				if (type=="font") {
-					arr = p.split("<font ");
-				} else if (type=="a") {
-					arr = p.split("<a ");
-				} else {
-					arr = p.split("<"+type+">");
-				}	
-				process(arr, type, 0); // 0 for add		
-					
-				p = html.replace(regs[i*2+1],"");				
-				arr = p.split("</"+type+">");										
-				process(arr, type, 1); // 1 for remove
-			});
-						
+		function make() {
+
+			that.disposeAllChildren();
+
+			var letterData = that.letterData = [];
+			var original, data;
+			if (label.type != "Label") {
+				data = parseHTML(label); // returns {text:text, data:data}	
+				letterData = data.data;	
+				label = new zim.Label(data.text);						
+			} else {
+				data = parseHTML(label.text); 
+				letterData = data.data;	
+				label.text = data.text;
+			}
+			that._text = data.original;
+			that._color = label.color;
 			
-			p = html.replace(/<br>/gi,"@^#");
-			p = p.replace(/<(b|a|i|u|f|\/b|\/a|\/i|\/u|\/f)[^>]*>/g,"");
-			var arr = p.split("@^#");
-			original = arr.join("\n");
-			p = arr.join("");
-			process(arr, "br", 0); // 0 for add
+			// handle DIR effect 
+			if ((WW.DIR && WW.DIR=="rtl") || (!WW.DIR && zim.DIR=="rtl")) {
+				if (lineAlign=="start") lineAlign="right";
+				else if (lineAlign=="end") lineAlign="left";
+			} else {
+				if (lineAlign=="start") lineAlign="left";
+				else if (lineAlign=="end") lineAlign="right";
+			}
 			
-			function process(text, type, action) {
-				if (text.length > 1) {					
-					if ((type=="font" || type=="a") && action==0) {					
-						var length = text[0].length;
-						zim.loop(text, function(s, i) {
-							
-							if (i==0) return;					
-							var d = data[length];
-							if (!d) data[length] = [];
-							d = data[length] ;
-							
-							var arr = s.split(">");
+			function parseHTML(html) {
+				var data = [];
 							
-							if (d[action]) d[action].push(type + " " + arr[0]);
-							else d[action] = [type + " " + arr[0]];
+				// var example = "LabelLetters()<br><br><font group=heading backgroundColor=yellow rollBackgroundColor=green><a href=https://zimjs.com target=_blank>Example</a></font>: <b>strong</b> <i>emphasis</i> <u>underline</u><br><font color=red size=50 family=verdana><strong>big</strong> red verdana</font><br>the next line"
+				// "LabelLetters()Example: strong emphasis underlinebig red verdanathe next line"
+				// "01234567890123456789012345678901234567890123456789012345678901234567890120123456789012"
+				// "0         1         2         3         4         5         6         7"
+				// html = "!Roger הגיע בשבילך משהו בדואר Dan אני לומד עברית";
+				// html = "הגיע בשבילך משהו בדואר.";
 							
-							length += arr[1].length;
-						});
-					} else {										
-						text.pop();	
-						var running = 0;			
-						zim.loop(text, function(s) {
-							running += s.length;
-							var d = data[running];
-							if (!d) data[running] = [];
-							d = data[running]; 
-							if (d[action]) d[action].push(type);
-							else d[action] = [type];							
-						});
-					}
+				function insert(data) {	
+					return data.split("").reverse().join("")
 				}
-			}		
-			
-			// [[adds at index], [removes at index]]
-			// b,i,u,br,a,font
-			// var da = [,, [["b","i"]] ,[,["b"]],,,[["br","font color=red size=10 family=courier"]],["i"]],...];
-			return {text:p, data:data, original:original};
-		}	
-		
-		that.numLetters = label.text.length;
-		
-		// NORMALIZE SPACINGS
-		var letterSpacingsOriginal = !zot(letterSpacings);
-		if (letterSpacings && !Array.isArray(letterSpacings)) letterSpacings = null;
-		var i;
-		if (!letterSpacings) {
-			letterSpacings = [];			
-			for (i = 0; i < that.numLetters; i++) {				
-				letterSpacings.push(letterSpacing);
-			}
-		} else {
-			for (i = 0; i < that.numLetters; i++) {
-				if (zot(letterSpacings[i])) letterSpacings[i] = letterSpacing;
-			}
-		}
-		that.letterSpacings = letterSpacings;
-
-		if (lineSpacings && !Array.isArray(lineSpacings)) lineSpacings = null;
-		if (!lineSpacings) {
-			lineSpacings = [];
-			for (i = 0; i < that.numLetters - 1; i++) {
-				lineSpacings.push(lineSpacing);
-			}
-		} else {
-			for (i = 0; i < that.numLetters - 1; i++) {
-				if (zot(lineSpacings[i])) lineSpacings[i] = lineSpacing;
-			}
-		}
-		that.lineSpacings = lineSpacings;
-		
-		// LINE CONTROL
-		that.labels = [];
-		that.lines = [[]];
-		var lineWidths = [];
-		var lineHeights = [];
-		var linePositionsY = [0];
-		var lineY = 0;
-		var lineW = 0;
-		var lineH = 0;
-		var lineNum = 0;
-		var maxW = 0;
-		
-		// HTML CONTROL
-		var d = letterData;
-		var bCheck = false;
-		var iCheck = false;
-		var uCheck = false;
-		var brCheck = false;
-		var colorCheck = false;
-		var sizeCheck = false;
-		var groupCheck = false;		
-		var familyCheck = false;
-		var urlCheck = false;
-		var targetCheck = false;
-		var backgroundColorCheck = false;
-		var rollBackgroundColorCheck = false;
-		
-		// ROLLOVER CONTROL		
-		that.rolls = [[]];
-		
-		for (i=0; i<that.numLetters; i++) {
-			
-			// PARSE TAG CHECKS
+				if (rtl) {
+					count = -1;				
+					html = html.replace(/[\u0591-\u07FF]+/ig, insert);	
+					
+					// and there may be tags or LTR characters next to RTL without a space:
+					html = html.replace(/([^\u0591-\u07FF ])([\u0591-\u07FF])/ig, "$1-!!-$2"); // note the not space
+					html = html.replace(/([\u0591-\u07FF])([^\u0591-\u07FF ])/ig, "$1-!!-$2"); // note the not space				
+					html = html.replace(/([^\u0591-\u07FF]) ([\u0591-\u07FF])/ig, "$1-!!- -!!-$2");
+					html = html.replace(/([\u0591-\u07FF]) ([^\u0591-\u07FF])/ig, "$1-!!- -!!-$2");
+					
+					var sp = html.split(/-!!-/g);
+					zim.loop(sp, function(ssp, i){
+						if (ssp.match(/[\u0591-\u07FF]/i)) {
+							sp[i] = ssp.split(" ").reverse().join(" ");
+						}
+					});
+					html = sp.join("");	
+				}
+				
+	
+				// normalize tags
+				html = html.replace(/\n|\r/g,"<br>");
+				html = html.replace(/<strong>|<strong \/>|<strong\/>/gi,"<b>");
+				html = html.replace(/<\/strong>/gi,"</b>");
+				html = html.replace(/<em>|<em \/>|<em\/>/gi,"<i>");
+				html = html.replace(/<\/em>/gi,"</i>");
+				html = html.replace(/\\n|\\r/g,"<br>");
+				html = html.replace(/<br>|<br \/>|<br\/>(<\/br>)?/gi,"<br>");			
+				html = html.replace(/<b/gi,"<b");
+				html = html.replace(/<i/gi,"<i");
+				html = html.replace(/<u/gi,"<u");
+				html = html.replace(/<br/gi,"<br");
+				html = html.replace(/<a/gi,"<a");
+				html = html.replace(/<font/gi,"<font");
+				
+				// turn all other tags into "" do split on tag and count index for tag 
+				// process this and store in data so get index of tags in string with no tags counted
+				
+				var regs = [
+					/<(a|i|u|f|br|\/a|\/i|\/u|\/f|\/b)[^>]*>/g,
+					/<(a|i|u|f|br|\/a|\/i|\/u|\/f|b)[^>]*>/g,				
+					/<(b|i|u|f|br|\/b|\/i|\/u|\/f|\/a)[^>]*>/g,
+					/<(b|i|u|f|br|\/b|\/i|\/u|\/f|a)[^>]*>/g,				
+					/<(b|a|u|f|br|\/b|\/a|\/u|\/f|\/i)[^>]*>/g,
+					/<(b|a|u|f|br|\/b|\/a|\/u|\/f|i)[^>]*>/g,
+					/<(b|a|i|f|br|\/b|\/a|\/i|\/f|\/u)[^>]*>/g,
+					/<(b|a|i|f|br|\/b|\/a|\/i|\/f|u)[^>]*>/g,	
+					/<(b|a|i|u|br|\/b|\/a|\/i|\/u|\/f)[^>]*>/g,
+					/<(b|a|i|u|br|\/b|\/a|\/i|\/u|f)[^>]*>/g			
+				];
+				var types = ["b","a","i","u","font"];
+				var p;
+				zim.loop(types, function(type, i) {
+					p = html.replace(regs[i*2],"");
+					var arr;
+					if (type=="font") {
+						arr = p.split("<font ");
+					} else if (type=="a") {
+						arr = p.split("<a ");
+					} else {
+						arr = p.split("<"+type+">");
+					}	
+					process(arr, type, 0); // 0 for add		
 						
-			brCheck = false;			
-			if (d[i]) {
+					p = html.replace(regs[i*2+1],"");				
+					arr = p.split("</"+type+">");										
+					process(arr, type, 1); // 1 for remove
+				});
+							
 				
-				// end tags - do ends first just in case tag ends at same letter it starts
-				if (d[i][1]) {
-					if (d[i][1].indexOf("b") >= 0) bCheck = false;
-					if (d[i][1].indexOf("i") >= 0) iCheck = false;
-					if (d[i][1].indexOf("u") >= 0) uCheck = false;
-					zim.loop(d[i][1], function (item) {
-						if (item.match(/^font/i)) {
-							colorCheck = false;
-							backgroundColorCheck = false;
-							if (rollBackgroundColorCheck) that.rolls.push([]);
-							rollBackgroundColorCheck = false;
-							sizeCheck = false;
-							familyCheck = false;
-							groupCheck = false;
-							return;
-						}
-						if (item.match(/^a/i)) {
-							urlCheck = false;
-							targetCheck = false;
-							return;
+				p = html.replace(/<br>/gi,"@^#");
+				p = p.replace(/<(b|a|i|u|f|\/b|\/a|\/i|\/u|\/f)[^>]*>/g,"");
+				var arr = p.split("@^#");
+				original = arr.join("\n");
+				p = arr.join("");
+				process(arr, "br", 0); // 0 for add
+				
+				function process(text, type, action) {
+					if (text.length > 1) {					
+						if ((type=="font" || type=="a") && action==0) {					
+							var length = text[0].length;
+							zim.loop(text, function(s, i) {
+								
+								if (i==0) return;					
+								var d = data[length];
+								if (!d) data[length] = [];
+								d = data[length] ;
+								
+								var arr = s.split(">");
+								
+								if (d[action]) d[action].push(type + " " + arr[0]);
+								else d[action] = [type + " " + arr[0]];
+								
+								length += arr[1].length;
+							});
+						} else {										
+							text.pop();	
+							var running = 0;			
+							zim.loop(text, function(s) {
+								running += s.length;
+								var d = data[running];
+								if (!d) data[running] = [];
+								d = data[running]; 
+								if (d[action]) d[action].push(type);
+								else d[action] = [type];							
+							});
 						}
-					});	
-				}	
+					}
+				}		
 				
-				// start tags				
-				if (d[i][0]) {
-					if (d[i][0].indexOf("b") >= 0) bCheck = true;
-					if (d[i][0].indexOf("i") >= 0) iCheck = true;
-					if (d[i][0].indexOf("u") >= 0) uCheck = true;
-					brCheck = 0;
-					zim.loop(d[i][0], function (item) {
-						if (item=="br") brCheck++;
-					});
-					zim.loop(d[i][0], function (item) {
-						var r, ind;
-						if (item.match(/^font/i)) {
-							r = item.match(/ color\s?=\s?(\S*)/i);			
-							if (r) {
-								colorCheck = r[1];
-								ind = zim.colors.indexOf(colorCheck);
-								if (ind>=0) colorCheck = zim.colorsHex[ind];
-								colorCheck = colorCheck.replace(/'/g,"");
-							}
-							r = item.match(/size\s?=\s?(\S*)/i);
-							if (r) sizeCheck = r[1];
-							r = item.match(/backgroundColor\s?=\s?(\S*)/i);						
-							if (r) {
-								backgroundColorCheck = r[1];
-								ind = zim.colors.indexOf(backgroundColorCheck);
-								if (ind>=0) backgroundColorCheck = zim.colorsHex[ind];
-								backgroundColorCheck = backgroundColorCheck.replace(/'/g,"");
-							}
-							r = item.match(/rollBackgroundColor\s?=\s?(\S*)/i);
-							if (r) {
-								rollBackgroundColorCheck = r[1];
-								ind = zim.colors.indexOf(rollBackgroundColorCheck);
-								if (ind>=0) rollBackgroundColorCheck = zim.colorsHex[ind];
-								rollBackgroundColorCheck = rollBackgroundColorCheck.replace(/'/g,"");
-							}
-							r = item.match(/group\s?=\s?(\S*)/i);
-							if (r) groupCheck = r[1];
-							r = item.match(/family\s?=\s?(.*)/i);
-							if (r) {
-								familyCheck = r[1];		
-								familyCheck = familyCheck.split(/\ssize\s?=|\scolor\s?=|\sgroup\s?=/i)[0];
-							}					
-							return;
-						} 
-						if (item.match(/^a/i)) {
-							r = item.match(/href\s?=\s?(\S*)/i);
-							if (r) urlCheck = r[1];
-							r = item.match(/target\s?=\s?(\S*)/i);
-							if (r) targetCheck = r[1];
-							return;
-						} 
-					});										
-				}	// end start tag	
-						
-			} // end all tags
+				// [[adds at index], [removes at index]]
+				// b,i,u,br,a,font
+				// var da = [,, [["b","i"]] ,[,["b"]],,,[["br","font color=red size=10 family=courier"]],["i"]],...];
+				return {text:p, data:data, original:original};
+			}	
+			
+			that.numLetters = label.text.length;
 			
-			// HANDLE CHECKS AND STORE MAX SIZES
-			var letter;
-			if (groupCheck) {
-				letter = new zim.Label({text:label.text[i], group:groupCheck})
+			// NORMALIZE SPACINGS
+			var letterSpacingsOriginal = !zot(letterSpacings);
+			if (letterSpacings && !Array.isArray(letterSpacings)) letterSpacings = null;
+			var i;
+			if (!letterSpacings) {
+				letterSpacings = [];			
+				for (i = 0; i < that.numLetters; i++) {				
+					letterSpacings.push(letterSpacing);
+				}
 			} else {
-				letter = label.clone();				
-				letter.text = label.text[i];
+				for (i = 0; i < that.numLetters; i++) {
+					if (zot(letterSpacings[i])) letterSpacings[i] = letterSpacing;
+				}
 			}
-			that.labels.push(letter);				
-			
-			if (bCheck) letter.bold = true;
-			if (iCheck) letter.italic = true;
-			if (colorCheck) letter.color = colorCheck;
-			if (backgroundColorCheck) letter.backgroundColor = backgroundColorCheck;
-			
-			var s = letterSpacingsOriginal?letterSpacings[i]:zot(letter.backgroundColor)?letterSpacings[i]:-.5;		
-
-			if (rollBackgroundColorCheck) {
-				letter.rollIndex = that.rolls.length-1;
-				letter.zrbc = rollBackgroundColorCheck;				
-				letter.zobc = letter.backgroundColor;
-				that.rolls[letter.rollIndex].push(letter);
-				letter.expand(0);
-				letter.on("mouseover", rollOn);				
-				letter.on("mouseout", rollOff);
+			that.letterSpacings = letterSpacings;
+	
+			if (lineSpacings && !Array.isArray(lineSpacings)) lineSpacings = null;
+			if (!lineSpacings) {
+				lineSpacings = [];
+				for (i = 0; i < that.numLetters - 1; i++) {
+					lineSpacings.push(lineSpacing);
+				}
+			} else {
+				for (i = 0; i < that.numLetters - 1; i++) {
+					if (zot(lineSpacings[i])) lineSpacings[i] = lineSpacing;
+				}
 			}
+			that.lineSpacings = lineSpacings;
 			
-			if (urlCheck) {
-				letter.expand(s,0);
-				letter.zurl = urlCheck;
-				letter.ztar = targetCheck;
-				letter.cur();
-				letter.on("click", function (e) {
-					var letter = e.currentTarget;
-					rollOff(e);
-					if (!letter.ztar) letter.ztar = "_self";
-					zgo(letter.zurl, letter.ztar);					
-				});	
-			}
-			if (familyCheck) letter.font = familyCheck;				
-			if (sizeCheck) letter.size = sizeCheck;			
+			// LINE CONTROL
+			that.labels = [];
+			that.lines = [[]];
+			var lineWidths = [];
+			var lineHeights = [];
+			var linePositionsY = [0];
+			var lineY = 0;
+			var lineW = 0;
+			var lineH = 0;
+			var lineNum = 0;
+			var maxW = 0;
 			
+			// HTML CONTROL
+			var d = letterData;
+			var bCheck = false;
+			var iCheck = false;
+			var uCheck = false;
+			var brCheck = false;
+			var colorCheck = false;
+			var sizeCheck = false;
+			var groupCheck = false;		
+			var familyCheck = false;
+			var urlCheck = false;
+			var targetCheck = false;
+			var backgroundColorCheck = false;
+			var rollBackgroundColorCheck = false;
 			
-			if (brCheck) {
-				lineY += (zot(lineHeight)?lineH:lineHeight) + lineSpacings[lineNum];
-				linePositionsY.push(lineY);
-				lineHeights.push(zot(lineHeight)?lineH:lineHeight);
-				lineWidths.push(lineW);						
-				maxW = Math.max(maxW, lineW);				
-			}		
+			// ROLLOVER CONTROL		
+			that.rolls = [[]];
 			
-			if (brCheck) {
-				if (brCheck > 1) {
-					zim.loop(brCheck-1, function () {
-						that.lines.push([]);
-						lineY += (zot(lineHeight)?lineH:lineHeight) + lineSpacings[lineNum];
-						linePositionsY.push(lineY);
-						lineHeights.push(zot(lineHeight)?lineH:lineHeight);
-						lineWidths.push(0);							
-						lineNum++;
-					});
+			for (i=0; i<that.numLetters; i++) {
+				
+				// PARSE TAG CHECKS
+							
+				brCheck = false;			
+				if (d[i]) {
+					
+					// end tags - do ends first just in case tag ends at same letter it starts
+					if (d[i][1]) {
+						if (d[i][1].indexOf("b") >= 0) bCheck = false;
+						if (d[i][1].indexOf("i") >= 0) iCheck = false;
+						if (d[i][1].indexOf("u") >= 0) uCheck = false;
+						zim.loop(d[i][1], function (item) {
+							if (item.match(/^font/i)) {
+								colorCheck = false;
+								backgroundColorCheck = false;
+								if (rollBackgroundColorCheck) that.rolls.push([]);
+								rollBackgroundColorCheck = false;
+								sizeCheck = false;
+								familyCheck = false;
+								groupCheck = false;
+								return;
+							}
+							if (item.match(/^a/i)) {
+								urlCheck = false;
+								targetCheck = false;
+								return;
+							}
+						});	
+					}	
+					
+					// start tags				
+					if (d[i][0]) {
+						if (d[i][0].indexOf("b") >= 0) bCheck = true;
+						if (d[i][0].indexOf("i") >= 0) iCheck = true;
+						if (d[i][0].indexOf("u") >= 0) uCheck = true;
+						brCheck = 0;
+						zim.loop(d[i][0], function (item) {
+							if (item=="br") brCheck++;
+						});
+						zim.loop(d[i][0], function (item) {
+							var r, ind;
+							if (item.match(/^font/i)) {
+								r = item.match(/ color\s?=\s?(\S*)/i);			
+								if (r) {
+									colorCheck = r[1];
+									ind = zim.colors.indexOf(colorCheck);
+									if (ind>=0) colorCheck = zim.colorsHex[ind];
+									colorCheck = colorCheck.replace(/'/g,"");
+								}
+								r = item.match(/size\s?=\s?(\S*)/i);
+								if (r) sizeCheck = r[1];
+								r = item.match(/backgroundColor\s?=\s?(\S*)/i);						
+								if (r) {
+									backgroundColorCheck = r[1];
+									ind = zim.colors.indexOf(backgroundColorCheck);
+									if (ind>=0) backgroundColorCheck = zim.colorsHex[ind];
+									backgroundColorCheck = backgroundColorCheck.replace(/'/g,"");
+								}
+								r = item.match(/rollBackgroundColor\s?=\s?(\S*)/i);
+								if (r) {
+									rollBackgroundColorCheck = r[1];
+									ind = zim.colors.indexOf(rollBackgroundColorCheck);
+									if (ind>=0) rollBackgroundColorCheck = zim.colorsHex[ind];
+									rollBackgroundColorCheck = rollBackgroundColorCheck.replace(/'/g,"");
+								}
+								r = item.match(/group\s?=\s?(\S*)/i);
+								if (r) groupCheck = r[1];
+								r = item.match(/family\s?=\s?(.*)/i);
+								if (r) {
+									familyCheck = r[1];		
+									familyCheck = familyCheck.split(/\ssize\s?=|\scolor\s?=|\sgroup\s?=/i)[0];
+								}					
+								return;
+							} 
+							if (item.match(/^a/i)) {
+								r = item.match(/href\s?=\s?(\S*)/i);
+								if (r) urlCheck = r[1];
+								r = item.match(/target\s?=\s?(\S*)/i);
+								if (r) targetCheck = r[1];
+								return;
+							} 
+						});										
+					}	// end start tag	
+							
+				} // end all tags
+				
+				// HANDLE CHECKS AND STORE MAX SIZES
+				var letter;
+				if (groupCheck) {
+					letter = new zim.Label({text:label.text[i], group:groupCheck})
+				} else {
+					letter = label.clone();				
+					letter.text = label.text[i];
+				}
+				that.labels.push(letter);				
+				
+				if (bCheck) letter.bold = true;
+				if (iCheck) letter.italic = true;
+				if (colorCheck) letter.color = colorCheck;
+				if (backgroundColorCheck) letter.backgroundColor = backgroundColorCheck;
+				
+				var s = letterSpacingsOriginal?letterSpacings[i]:zot(letter.backgroundColor)?letterSpacings[i]:-.5;		
+	
+				if (rollBackgroundColorCheck) {
+					letter.rollIndex = that.rolls.length-1;
+					letter.zrbc = rollBackgroundColorCheck;				
+					letter.zobc = letter.backgroundColor;
+					that.rolls[letter.rollIndex].push(letter);
+					letter.expand(0);
+					letter.on("mouseover", rollOn);				
+					letter.on("mouseout", rollOff);
+				}
+				
+				if (urlCheck) {
+					letter.expand(s,0);
+					letter.zurl = urlCheck;
+					letter.ztar = targetCheck;
+					letter.cur();
+					letter.on("click", function (e) {
+						var letter = e.currentTarget;
+						rollOff(e);
+						if (!letter.ztar) letter.ztar = "_self";
+						zgo(letter.zurl, letter.ztar);					
+					});	
+				}
+				if (familyCheck) letter.font = familyCheck;				
+				if (sizeCheck) letter.size = sizeCheck;			
+				
+				
+				if (brCheck) {
+					lineY += (zot(lineHeight)?lineH:lineHeight) + lineSpacings[lineNum];
+					linePositionsY.push(lineY);
+					lineHeights.push(zot(lineHeight)?lineH:lineHeight);
+					lineWidths.push(lineW);						
+					maxW = Math.max(maxW, lineW);				
+				}		
+				
+				if (brCheck) {
+					if (brCheck > 1) {
+						zim.loop(brCheck-1, function () {
+							that.lines.push([]);
+							lineY += (zot(lineHeight)?lineH:lineHeight) + lineSpacings[lineNum];
+							linePositionsY.push(lineY);
+							lineHeights.push(zot(lineHeight)?lineH:lineHeight);
+							lineWidths.push(0);							
+							lineNum++;
+						});
+					}	
+					lineH = 0;
+					lineW = 0;
+					that.lines.push([]);
+					lineNum++;
 				}	
-				lineH = 0;
-				lineW = 0;
-				that.lines.push([]);
-				lineNum++;
-			}	
-			
-			lineW += letter.width + s;
-			lineH = Math.max(lineH, letter.height);
+				
+				lineW += letter.width + s;
+				lineH = Math.max(lineH, letter.height);
+				
+				if (i==that.numLetters-1) {
+					lineWidths.push(lineW);	
+					lineHeights.push(lineH);						
+					maxW = Math.max(maxW, lineW);
+				}
+				
+				that.lines[lineNum].push(letter);
+				
+				if (uCheck) letter.underline = new zim.Line(letter.width+s+1,1,letter.color).center(letter,that).mov(0,letter.height/2);
+						
+			} // end checks
 			
-			if (i==that.numLetters-1) {
-				lineWidths.push(lineW);	
-				lineHeights.push(lineH);						
-				maxW = Math.max(maxW, lineW);
-			}
+	
 			
-			that.lines[lineNum].push(letter);
 			
-			if (uCheck) letter.underline = new zim.Line(letter.width+s+1,1,letter.color).center(letter,this).mov(0,letter.height/2);
+			// LOOP THROUGH LINES AND APPLY POSITIONS
+			var count = 0;
+			for (var j=0; j<that.lines.length; j++) {
+				var ll = that.lines[j];
+				lineW = lineWidths[j];
+				lineH = lineHeights[j];
+				lineY = linePositionsY[j];
+				
+				var startX, startY;
+				if (lineAlign=="left") startX = 0;
+				else if (lineAlign=="right") startX = maxW-lineW;
+				else startX = (maxW-lineW)/2;
+				startY = lineY;		
+									
+				for (i=0; i<ll.length; i++) {
+					count++;
+					if (cache) letter.cache();
+					letter = ll[i];
+					letter.regX = align=="left"?0:(align=="right"?letter.width:letter.width/2);
+					letter.regY = valign=="top"?0:(valign=="bottom"?letter.height:letter.height/2);				
 					
-		} // end checks
-		
+					var sY = startY+(valign=="top"?0:valign=="bottom"?letter.height:letter.height/2);
+					if (lineValign=="center" || lineValign=="middle") {
+						sY += (lineHeights[j]-letter.height)/2;
+					} else if (lineValign=="bottom") {
+						sY += lineHeights[j]-letter.height;					
+					}
+					s = letterSpacingsOriginal?letterSpacings[count-1]:zot(letter.backgroundColor)?letterSpacings[count-1]:-.5;						
+					if (align=="left") {
+						letter.loc(startX, sY, that);
+						startX = letter.x+letter.width+s;
+					} else if (align=="right") {
+						letter.loc(startX+letter.width, sY, that);
+						startX = letter.x+s;
+					} else {
+						letter.loc(startX+letter.width/2, sY, that);
+						startX = letter.x+letter.width/2+s;
+					}
+																	
+				} // end lines letters
+			} // end lines
+	
+			if (!that.getBounds()) that.setBounds(0,0,0,0);
+			that.regX = that.getBounds().x;
+			that.regY = that.getBounds().y;
+
+		}
+
+		make();
+
 		// ROLL FUNCTIONS
-		
+
 		function rollOn(e) {
 			var letter = e.currentTarget;
 			var rolls = that.rolls[letter.rollIndex]
@@ -23524,58 +24008,22 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			});
 			if (letter.stage) letter.stage.update();
 		}
-		
-		
-		// LOOP THROUGH LINES AND APPLY POSITIONS
-		var count = 0;
-		for (var j=0; j<that.lines.length; j++) {
-			var ll = that.lines[j];
-			lineW = lineWidths[j];
-			lineH = lineHeights[j];
-			lineY = linePositionsY[j];
-			
-			var startX, startY;
-			if (lineAlign=="left") startX = 0;
-			else if (lineAlign=="right") startX = maxW-lineW;
-			else startX = (maxW-lineW)/2;
-			startY = lineY;		
-								
-			for (i=0; i<ll.length; i++) {
-				count++;
-				if (cache) letter.cache();
-				letter = ll[i];
-				letter.regX = align=="left"?0:(align=="right"?letter.width:letter.width/2);
-				letter.regY = valign=="top"?0:(valign=="bottom"?letter.height:letter.height/2);				
-				
-				var sY = startY+(valign=="top"?0:valign=="bottom"?letter.height:letter.height/2);
-				if (lineValign=="center" || lineValign=="middle") {
-					sY += (lineHeights[j]-letter.height)/2;
-				} else if (lineValign=="bottom") {
-					sY += lineHeights[j]-letter.height;					
-				}
-				s = letterSpacingsOriginal?letterSpacings[count-1]:zot(letter.backgroundColor)?letterSpacings[count-1]:-.5;						
-				if (align=="left") {
-					letter.loc(startX, sY, this);
-					startX = letter.x+letter.width+s;
-				} else if (align=="right") {
-					letter.loc(startX+letter.width, sY, this);
-					startX = letter.x+s;
-				} else {
-					letter.loc(startX+letter.width/2, sY, this);
-					startX = letter.x+letter.width/2+s;
-				}
-																
-			} // end lines letters
-		} // end lines
 
-		if (!this.getBounds()) this.setBounds(0,0,0,0);
-		this.regX = this.getBounds().x;
-		this.regY = this.getBounds().y;
 
 		this.setProps = function(props) {
 			zim.setProps(this.labels, props);
 			return this;
 		}
+
+		Object.defineProperty(this, 'text', {
+			get: function () {
+				return this._text;
+			},
+			set: function (value) {
+				label = value;
+				make();
+			}
+		});
 		
 		Object.defineProperty(this, 'color', {
 			get: function () {
@@ -23735,7 +24183,7 @@ addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChil
 
 PROPERTIES
 type - the name of the class as a String
-text - get the text of the original Label
+text - get or set the text
 labels - an array of ZIM Label objects for the letters
 numWords - how many words in labels (same as numChildren)
 
@@ -23775,28 +24223,42 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
         if (zot(spacingH)) spacingH = DS.spacingH != null ? DS.spacingH : size/2;
         if (zot(spacingV)) spacingV = DS.spacingV != null ? DS.spacingV : size/2;
 
-        var sentence;
-        if (label.type == "Label") sentence = label.text;
-        else sentence = label;
+		var that = this;
 
-        var that = this;
-        that.text = sentence;    
-        var words = sentence.split(' ').filter(Boolean);
-        var labels = that.labels = [];
-        zim.loop(words, function(word) {
-            var lab = label.type=="Label"?label.clone():new zim.Label();
-            lab.text = word;
-            lab.size = zik(size);
-            lab.font = zik(font); 
-            lab.color = zik(color); 
-            if (!zot(backgroundColor)) lab.backgroundColor = zik(backgroundColor);
-            lab.reg(zik(itemRegX), zik(itemRegY));
-            if (itemCache) lab.cache();
-            labels.push(lab);
-        });
+		function make(label) {
+			var sentence;
+			if (label.type == "Label") sentence = label.text;
+			else sentence = label;			
+			that._text = sentence;    
+			var words = sentence.split(' ').filter(Boolean);
+			var labels = that.labels = [];
+			zim.loop(words, function(word) {
+				var lab = label.type=="Label"?label.clone():new zim.Label();
+				lab.text = word;
+				lab.size = zik(size);
+				lab.font = zik(font); 
+				lab.color = zik(color); 
+				if (!zot(backgroundColor)) lab.backgroundColor = zik(backgroundColor);
+				lab.reg(zik(itemRegX), zik(itemRegY));
+				if (itemCache) lab.cache();
+				labels.push(lab);
+			});
+		}
+		make(label);
 
-        this.zimWrapper_constructor(labels, width, spacingH, spacingV, wrapperType, align, valign, alignInner, valignInner, flip, reverse, bottomFull, colSize, rowSize, height, minSpreadNum, minStretchNum, percentVoidH, offsetVoidH, percentVoidV, offsetVoidV, minStretchFirst, style, group, inherit);
+        this.zimWrapper_constructor(that.labels, width, spacingH, spacingV, wrapperType, align, valign, alignInner, valignInner, flip, reverse, bottomFull, colSize, rowSize, height, minSpreadNum, minStretchNum, percentVoidH, offsetVoidH, percentVoidV, offsetVoidV, minStretchFirst, style, group, inherit);
 		
+		Object.defineProperty(this, 'text', {
+			get: function () {
+				return this._text;
+			},
+			set: function (label) {
+				that.remove();
+				make(label);
+				that.add(that.labels);				
+			}
+		});
+
 		if (style!==false) zim.styleTransforms(this, DS);
 		this.clone = function () {
 			return that.cloneProps(new zim.LabelWords(label, width, size, font, color, backgroundColor, itemCache, itemRegX, itemRegY, spacingH, spacingV, wrapperType, align, valign, alignInner, valignInner, flip, reverse, bottomFull, colSize, rowSize, height, minSpreadNum, minStretchNum, percentVoidH, offsetVoidH, percentVoidV, offsetVoidV, minStretchFirst, style, this.group, inherit));
@@ -24754,13 +25216,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (that.rolled) return;
 		});
 		
-		this.on("pressup", function () {			
+		this.on("pressup", function (e) {			
 			that.pressed = onCheck = pressCheck = false;		
-						
+
 			if (reallyOn) buttonOn(); // will recall the roll ZIM01
 			else if (that.rollPersist) removeRoll();
 			
-			if (WW.M) { // touch screen
+			if (e.nativeEvent && (e.nativeEvent.type == "touchend" || e.nativeEvent == "touchcancel")) { // touch screen
 				buttonOff();
 			}
 		});
@@ -27187,6 +27649,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (replace) that.contentContainer.removeAllChildren();
 			if (center) obj.center(that.contentContainer, index);
 			else obj.addTo(that.contentContainer, index);
+			addHTML(that.contentContainer);
 			return that;
 		}
 		
@@ -27331,7 +27794,6 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			});			
 		}
 
-
         this.on("removed", hide2);		
 		function hide2() {           
 			var ch,i;
@@ -27440,6 +27902,8 @@ NOTE: to add ZIM Swipe() to objects in window set the overrideNoSwipe parameter
 NOTE: if animating the window off screen then either turn optimize:false 
 or use window.update() in the "animation" event with the animate({events:true})
 
+NOTE: if window content has items set to visible false then set optimize false to avoid conflict
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -27560,6 +28024,7 @@ optimize - (default true) set to false to not turn DisplayObjects visible false
 	as the Window is scrolled, any objects within the content and any objects within one level of those objects 
 	are set to visible false if their bounds are not hitting the the window bounds + 300 - thanks Ami Hanya for the suggestion
 	also see optimize property
+	if window content has items set to visible false then set optimize false to avoid conflict
 resizeBoundary - (default null) add a ZIM Boundary() object for the resize handle - relative to the resize handle start position
 	new Boundary(-100, 0, 200, 0) - would allow the resize handle to move to the left or right 100 pixels but not up or down
 	new Boundary(0, -100, 0, 200) - would allow the resize handle to move to up or down 100 pixels but not left or right 
@@ -27614,7 +28079,7 @@ addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChil
 
 PROPERTIES
 type - holds the class name as a String
-backing - CreateJS Shape used for backing of Window
+backing - ZIM Shape used for backing of Window
 backgroundColor - the color of the backing
 borderColor - the color of the border
 borderWidth - the width of the border
@@ -27629,6 +28094,7 @@ content - gives access to the content provided as a parameter to the Window()
 		buttons - an array of the Button objects if provided
 		config - the original content config object {}
 optimize - see optimize parameter - set to true (default) or false to optimize scrolling of Window
+	if window content has items set to visible false then set optimize false to avoid conflict
 enabled - get or set whether the Window is enabled
 scrollEnabled - get or set whether the Window can be scrolled
 scrollBar - data object that holds the following properties (with defaults):
@@ -27761,6 +28227,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		var backing = this.backing = new zim.Shape({style:false});
 		this.addChild(backing);
 
+		var htmlList = new zim.Dictionary(true);
+
 		var mask = new createjs.Shape();
 		mask.type = "WindowBacking";
 		var mg = mask.graphics;
@@ -28160,7 +28628,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 						titleBarRect.sha(null);
 						if (resizeHandle) that.resizeHandle.visible = true;
 						that.setBounds(ob.x, ob.y, ob.width, ob.height);
-						that.dispatchEvent("expand");						
+						show2();			
+						that.dispatchEvent("expand");	
 					} else {
 						collapseIcon.rot(180);	
 						that.backing.visible = false;
@@ -28173,6 +28642,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 						titleBarRect.sha(shadowColor, 5,5, shadowBlur);
 						if (resizeHandle) that.resizeHandle.visible = false;
 						that.setBounds(ob.x, ob.y, ob.width, titleBar.height);
+						hide2();
 						that.dispatchEvent("collapse");
 					}
 					if (that.stage) that.stage.update();
@@ -28199,6 +28669,34 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 						that.collapse(true);						
 					}					
 				});
+				
+			}
+		}
+		this.on("removed", hide2);		
+		function hide2() {           
+			var ch,i;
+            var tar = that.content||that.contentContainer||that;
+			if (tar.type != "Container") tar = that.contentContainer||that;
+			for (i=0; i<tar.numChildren; i++) { // record depths first
+				ch = tar.getChildAt(i);
+				if (ch.type == "TextArea" || ch.type == "Loader" || ch.type == "Tag") {
+					var obj = {obj:ch, depth:tar.getChildIndex(ch)};
+					htmlList.add(ch, obj);
+				}
+			}
+			for (i=tar.numChildren-1; i>=0; i--) { // remove textareas and loaders second
+				ch = tar.getChildAt(i);
+				if (ch.type == "TextArea" || ch.type == "Loader" || ch.type == "Tag") {
+					tar.removeChild(ch);
+				}
+			}			
+		}
+        this.on("added", show2);
+		function show2() {
+            var tar = that.content||that.contentContainer||that;
+			if (tar.type != "Container") tar = that.contentContainer||that;
+			for (var i=0; i<htmlList.length; i++) {
+				tar.addChildAt(htmlList.values[i].obj, htmlList.values[i].depth);
 			}
 		}
 
@@ -28267,7 +28765,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			var duo; if (duo = zob(that.add, arguments, sig, that)) return duo;
 						
 			var c = obj;
-			if (!c.getBounds()) {zogy("Window.add() - please add content with bounds set"); return;}
+			if (!c.getBounds()) {zogy("Window.add() - please add content with bounds set"); return;}			
 			makeDamp(c);
 			if (zot(index)) index = content.numChildren;
 			if (replace) {
@@ -28294,7 +28792,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				});
 			}
 			if (c.x == 0) c.x = paddingH;
-			if (c.y == 0) c.y = paddingV;			
+			if (c.y == 0) c.y = paddingV;	
 			that.update();
 			return that;
 		};		
@@ -28351,7 +28849,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			stage = that.stage;
 			content.loop(function(item) {
 				// ADJUSTED ZIM 016 - look into how we can optimize a wrapper and keep scrollbars the right size
-				if (!item.hitTestBounds || !item.stage || item.type == "Wrapper") return; // don't turn off items if not on stage yet
+				if (!item.hitTestBounds || !item.stage || item.type == "Wrapper" || item.type == "List") return; // don't turn off items if not on stage yet
 				if (item.hitTestBounds(that,300)) {
 					item.visible = true;					
 					if (item.loop) item.loop(function(item2) {
@@ -30326,9 +30824,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		for (var i=0; i<num; i++) {
 			light = new Container(size,size).reg("center","center");
 			
-			// dims
-            if (indicatorType == "dot") {
-                light.dim = new zim.Circle(size/2, backgroundColor, borderColor, borderWidth, null, null, null, null, null, false);            
+			// dim
+            if (indicatorType == "dot" || indicatorType == "circle") {
+                light.dim = new zim.Circle(size/2, backgroundColor, borderColor, borderWidth, null, null, null, null, null, false); 
             } else if (indicatorType == "square" || indicatorType == "box") {
 				light.dim = new zim.Rectangle(size, size, backgroundColor, borderColor, borderWidth, null, null, null, null, false);
 				light.dim.regX = light.dim.width/2;
@@ -30351,7 +30849,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			this.lights.push(light);
 
 			// brights
-			if (selectedIndicatorType == "dot") {
+			if (selectedIndicatorType == "dot" || indicatorType == "circle") {
                 light.bright = new zim.Circle(size/2, foregroundColor, borderColor, borderWidth, null, null, null, null, null, false);            
             } else if (selectedIndicatorType == "square" || selectedIndicatorType == "box") {
 				light.bright = new zim.Rectangle(size, size, foregroundColor, borderColor, borderWidth, null, null, null, null, false);
@@ -30734,7 +31232,7 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 	}
 	align = handleDIR(align);
 			
-	this.zimWindow_constructor(width, height, null, backgroundColor, borderColor, borderWidth, padding, corner, false, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, false, null, null, false, true, shadowColor, shadowBlur, paddingH, paddingV, true, null, null, null, null, null, false, null, null, null, null, null, null, null, null, null, null, null, null, style, group, zim.copy(DS));
+	this.zimWindow_constructor(width, height, null, backgroundColor, borderColor, borderWidth, padding, corner, false, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, false, null, null, false, true, shadowColor, shadowBlur, paddingH, paddingV, true, null, null, null, null, null, false, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, style, group, zim.copy(DS));
 	this.type = "TextInput";
 	var that = this;
 
@@ -30810,7 +31308,16 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 			label.onDblclick(e);
 			e.stopImmediatePropagation();
 		});			
-		
+
+
+		function vvp() {
+			if (M && !zot(lastHeight) && WW.visualViewport.height > lastHeight) {
+				that.tiBlur();
+				WW.visualViewport.removeEventListener('resize', vvp);
+			}
+			lastHeight = WW.visualViewport.height;
+		}
+		var lastHeight;
 		that.label.on("focus", function () {
 			if (WW.M && keyboardShift) {
 				if (that.re) that.stage.frame.off("resize", that.re);
@@ -30820,6 +31327,10 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 						that.stage.update();
 					}
 				});
+				if (WW.visualViewport) {
+					WW.visualViewport.removeEventListener('resize', vvp);
+					WW.visualViewport.addEventListener('resize', vvp);
+				}
 				var h = that.label.localToGlobal(0,0).y;
 				if (that.stage && h>that.stage.height/4) {
 					that.stage.y = that.stage.scaleY*(that.stage.height/4-h);
@@ -30833,10 +31344,11 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 			that.dispatchEvent("focus");
 		});
 
-		that.label.on("blur", function () {
+		that.tiBlur = function() {
 			if (WW.M && keyboardShift) {			
 				if (that.stage) {
 					if (that.re) that.stage.frame.off("resize", that.re);
+					that.label.hiddenInput.blur();
 					that.stage.y = sYO;
 					that.stage.update();
 				}
@@ -30846,7 +31358,8 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 				if (that.stage) that.stage.update();
 			}		
 			that.dispatchEvent("blur");
-		});
+		}
+		that.label.on("blur", that.tiBlur);
 
 		that.label.on("input", function (e) {	
 			doPlaceholder();
@@ -31394,7 +31907,7 @@ zim.extend(zim.TextInput.LabelInput, zim.Label, "dispose", "zimLabel", false);
 	
 
 /*--
-zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, selectedIndex, style, group, inherit)
+zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropSelf, dropCopy, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, dropHitTest, dropFull, dropSnap, dropEnd, dropScale, dropWidth, dropHeight, selectedIndex, style, group, inherit)
 
 List
 zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
@@ -31439,6 +31952,12 @@ Indent only works with custom items in the list in left, right alignment or top,
 This moves the items away from their alignment
 There is also label indenting for items with labels - and labelIndentV and labelIndentH
 
+DROP 
+As if ZIM 017, drop parameters and properties have been added. 
+These allow List items to be dragged and dropped within the same list or to other lists or to other objects.
+Objects not in lists can also be dragged into a list - see the drag() method's drop parameters.
+See https://zimjs.com/017/dropping.html
+
 NOTE: List can have a ZIM Organizer added with the organizer parameter
 The organizer lets the user add, remove and move items up, down, to the top or the bottom
 See: https://zimjs.com/docs.html?item=organizer
@@ -31463,7 +31982,6 @@ const list = new List({
 	list:["Enormous", "Big", "Medium", "Small", "Puny"],
 	viewNum:3, // this number will change the size of the list elements (default is 5)
 }).center()
-S.update();
 END EXAMPLE
 
 EXAMPLE 
@@ -31471,6 +31989,7 @@ EXAMPLE
 // drop is set to true in the STYLE - this means the list can drop its items onto itself 
 // dropTargets is set after the lists are made - to be able to drop onto other lists 
 // these two things are separate - items can be dropped onto other lists but not their own, etc.
+// also see https://zimjs.com/017/dropping.html for dropping to and from outside a list
 
 const w = 60;
 const h = 60;
@@ -31681,10 +32200,10 @@ titleBarHeight - (default fit label) the height of the titleBar if a titleBar is
 draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag list
 boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
 onTop - (default true) set to false to not bring list to top of container when dragging
-close - (default false) - a close X for the top right corner that closes the list when pressed
-closeColor - (default grey) - the color of the close X if close is requested
-collapse - (default false) - set to true to add a collapse button to the titleBar that reduces the list so only the bar shows and adds a button to expand
-collapseColor - (default grey) - the color of the collapse icon
+close - (default false) a close X for the top right corner that closes the list when pressed
+closeColor - (default grey) the color of the close X if close is requested
+collapse - (default false) set to true to add a collapse button to the titleBar that reduces the list so only the bar shows and adds a button to expand
+collapseColor - (default grey) the color of the collapse icon
 collapsed - (default false) set to true to start the list collapsed
 excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the custom buttons
 organizer - (default null) the ZIM Organizer for the list
@@ -31698,15 +32217,15 @@ pulldown - (default false) set to true to have List act like a Pulldown
 	use tapClose and offClose parameters to optionally adjust behaviour 
 	See: https://zimjs.com/ten/pulldown.html
 clone - (default false) set to true to add clones of the list items rather than the items themselves
-cancelCurrentDrag - (default false) - set to true to cancel window dragging when document window loses focus
+cancelCurrentDrag - (default false) set to true to cancel window dragging when document window loses focus
 	this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default
-index - (default 0) - set the index at start - set to -1 for no selection
-noScale - (default false) - set to true to not scale custom items - this ignores viewNum
-pulldownToggle - (default false) - set to true to collapse list in pulldown mode when final item is selected or pressing off list
+index - (default 0) set the index at start - set to -1 for no selection
+noScale - (default false) set to true to not scale custom items - this ignores viewNum
+pulldownToggle - (default false) set to true to collapse list in pulldown mode when final item is selected or pressing off list
 optimize - (default true) set to false to not turn DisplayObjects that are not on the stage visible false 
 	as the Window is scrolled, any objects within the content and any objects within one level of those objects 
 	are set to visible false if their bounds are not hitting the stage bounds
-resizeHandle - (default false) - set to true to rollover bottom right corner to resize list with resizeHandle
+resizeHandle - (default false) set to true to rollover bottom right corner to resize list with resizeHandle
 	currently, the List content does not automatically expand 
 	so create the list with a width as wide as it will go 
 	then call the resize() method to start the list at the desired width
@@ -31718,24 +32237,38 @@ resizeBoundary - (default null) add a ZIM Boundary() object for the resize handl
 resizeVisible - (default false) set to true to always see the resizeHandle - if resizeHandle is set to true
 continuous - (default false) set to true to make the list scroll continuously - should have more elements than the viewNum for this
 closeOthers - (default false) set to true to close any open branches before expanding selected branch
-drop - (default false) - set to true to allow drag and drop of items onto the current list
+drop - (default false) set to true to allow drag and drop of items onto the current list
 	if the list is vertical, dragging the item horizontally will pull it from the list 
 	the item can then be dragged to a different location and dropped in place
 	for a horizontal list, dragging the item vertical will pull it from the list 
 	also see the dropTargets parameter and the drop and dropTarget properties
 	note: the dropTargets alone can be set to drop onto other lists but not the current list
 	also see updateDrop() method if a list has been moved or scaled
-dropTargets - (default null) - add a list or an array of lists to drop an item from the current list 
+dropTargets - (default null) add a list or an array of lists to drop an item from the current list 
 	see the drop parameter and the drop and dropTargets properties 
 	note: dropTargets can be set without setting the drop parameter to true 
 	and then items can be dragged to the target lists but not onto the current list
 	also see updateDrop() method if a list has been moved or scaled
-dropColor - (default white) - the color of the diamond reticle that indicates where an item will be dropped
-dropThickness - (default 1) - the thickness of the diamond reticle that indicates where an item will be dropped
-dropScrollSpeed - (default 5) - the speed the list is scrolled as a drop item is dragged up to 50px off an end of the list 
+dropSelf - (default true) set to false to not drop on itself if drop is true
+dropCopy - (default false) set to true to drop a copy
+dropColor - (default white) the color of the diamond reticle that indicates where an item will be dropped
+dropThickness - (default 1) the thickness of the diamond reticle that indicates where an item will be dropped
+dropScrollSpeed - (default 5) the speed the list is scrolled as a drop item is dragged up to 50px off an end of the list 
 	this is only applied if the list scrolls on that end
 	the speed is multiplied by 1.5 when the item is between 50px and 80px off the end
-dropReticleAlpha - (default 1) - set the alpha of the drop reticle diamond - set to 0 to not show reticle
+dropReticleAlpha - (default 1) set the alpha of the drop reticle diamond - set to 0 to not show reticle
+dropScale - (default null) set a scale when dropped
+dropWidth - (default null) set a width when dropped - overrides scale
+	height will keep proportion unless both dropWidth and dropHeight are provided
+dropHeight - (default null) set a height when dropped - overrides scale
+	width will keep proportion unless both dropWidth and dropHeight are provided
+*** Drop parameters that work only when dropping on a dropTarget that is NOT a List
+dropHitTest - (default "bounds") can also be "reg", "circles", "circle", "rect" - see ZIM HitTests
+dropFull - (default true) do not drop on a full target
+ 		note - if the object is removed from the target then a drop can occur again on that target 
+dropSnap - (default true) snap to the target object
+dropEnd - (default true) once dropped on a target a noMouse() is set on the object
+*** End drop parameters that work only when dropping on a target that is NOT a List
 selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
 group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
@@ -31870,10 +32403,16 @@ dropReticle - each list that can be dropped on gets a dropReticle property that
 	so individual reticles can be adjusted - say different colors for different lists
 dropItem - after a dropdown event, the dropItem is the ghost being dragged
 dropIndex - after a dropdown event, the dropIndex is the original index of the item being dragged
-dropList - after a dropup event, the dropList is the list that the item was dropped into (could be original list)
+dropTarget - after a dropup event, the dropTarget is the object the item was dropped into (could be original list)
 dropNewIndex - after a dropup event, the dropNewIndex is the index in the list the item has been dropped
 enabled - default is true - set to false to disable
 
+DROP ITEM PROPERTIES
+dropTarget - is the target dropped on 
+dropList - is list item came from 
+
+// dropEnd should not be false if dropBack is true - when dropping from a list
+
 ALSO: see all Window properties - like titleBar, titleBarLabel, resizeHandle, etc.
 
 ALSO: see ZIM Container for properties such as:
@@ -31892,17 +32431,18 @@ dispatches an "expanded" event when items have been expanded
 	this receives an event object with an items property of the items just opened 
 dispatches a "collapsed" event when items have been collapsed
 dispatches a "dropdown" event when drop item is pulled from list
-	list will have dropItem and dropIndex properties
+	list will have dropItem and dropIndex properties	
 dispatches a "dropup" event when drop item is dropped
-	list will have dropItem, dropList and dropNewIndex properties
+	list will have dropItem, dropTarget and dropNewIndex properties
+	item dropped will have dropList for which list it came from and dropTarget for which object it is dropped on
 
 ALSO: All Window events including "scrolling"
 
 ALSO: see the CreateJS Easel Docs for Container events such as:
 added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
 --*///+60.5
-	zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, selectedIndex, style, group, inherit) {
-		var sig = "width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, selectedIndex, style, group, inherit";
+	zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropSelf, dropCopy, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, dropHitTest, dropFull, dropSnap, dropEnd, dropScale, dropWidth, dropHeight, selectedIndex, style, group, inherit) {
+		var sig = "width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropSelf, dropCopy, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, dropHitTest, dropFull, dropSnap, dropEnd, dropScale, dropWidth, dropHeight, selectedIndex, style, group, inherit";
 		var duo; if (duo = zob(zim.List, arguments, sig, this)) return duo;
 		z_d("60.5");
 
@@ -31997,11 +32537,22 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 		if (zot(drop)) drop = DS.drop!=null?DS.drop:false;
 		if (zot(dropTargets)) dropTargets = DS.dropTargets!=null?DS.dropTargets:null;
+		if (zot(dropSelf)) dropSelf = DS.dropSelf!=null?DS.dropSelf:true;
+		if (zot(dropCopy)) dropCopy = DS.dropCopy!=null?DS.dropCopy:false;
 		if (zot(dropColor)) dropColor = DS.dropColor!=null?DS.dropColor:zim.white;
 		if (zot(dropThickness)) dropThickness = DS.dropThickness!=null?DS.dropThickness:1;
 		if (zot(dropScrollSpeed)) dropScrollSpeed = DS.dropScrollSpeed!=null?DS.dropScrollSpeed:5;
 		if (zot(dropReticleAlpha)) dropReticleAlpha = DS.dropReticleAlpha!=null?DS.dropReticleAlpha:1;
 
+		// Drop off list 
+		if (zot(dropHitTest)) dropHitTest = DS.dropHitTest!=null?DS.dropHitTest:"bounds";
+		if (zot(dropSnap)) dropSnap = DS.dropSnap!=null?DS.dropSnap:true;
+		if (zot(dropFull)) dropFull = DS.dropFull!=null?DS.dropFull:true;	
+		if (zot(dropEnd)) dropEnd = DS.dropEnd!=null?DS.dropEnd:true;	
+		if (zot(dropScale)) dropScale = DS.dropScale!=null?DS.dropScale:null;	
+		if (zot(dropWidth)) dropWidth = DS.dropWidth!=null?DS.dropWidth:null;	
+		if (zot(dropHeight)) dropHeight = DS.dropHeight!=null?DS.dropHeight:null;	
+
 
 		if (titleBar === false) titleBar = null;
 		this.vertical = vertical;
@@ -32678,7 +33229,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			// drop and dropTargets are assigned independently but both are added to dropTargets array
 			if (dropTargets && !Array.isArray(dropTargets)) dropTargets = [dropTargets];
 			if (!dropTargets) dropTargets = [];
-			if (drop) dropTargets.unshift(that);
+			if (drop && dropSelf) dropTargets.unshift(that);
 								
 			that.added(function(stage) {
 				frame = stage.frame;				
@@ -32697,7 +33248,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				// e.target can be something in the item - or the item
 				// but custom List items are usually in a Container 
 				// so want to drag the item which is the child of the container that is in the List items
-				if (!that.items.includes(downItem)) {			
+				if (!that.items.includes(downItem)) {	
 					var good = false;
 					var checkItem = downItem
 					while(checkItem.parent) {				
@@ -32710,6 +33261,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 					}
 					if (!good) return;
 				}
+				// watch - the List item container has a backing rectangle that has a parent that is in the items
+				// so get the parent but then get the content
+				if (that.items.includes(downItem.parent)) downItem = downItem.parent.content;
 				downPoint = that.globalToLocal(frame.mouseX, frame.mouseY);	
 				itemPoint = downItem.globalToLocal(frame.mouseX, frame.mouseY);	
 				itemIndex = zot(checkItem.znum) ? checkItem.parent.znum : checkItem.znum;
@@ -32719,45 +33273,6 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				that.dropNewIndex = null;
 			});
 		
-			function scrollUp(target, dropScrollSpeed) {
-				if (target.scrollInt) target.scrollInt.clear();
-				target.scrollInt = zim.interval(.01, function() {
-					if (target.dropReticle.parent) target.dropReticle.removeFrom();
-					if (target.vertical) {
-						target.scrollY += dropScrollSpeed;				
-						if (target.scrollY > 0) {
-							target.scrollY = 0;
-							target.scrollInt.clear();
-						}
-					} else {
-						target.scrollX += dropScrollSpeed;
-						if (target.scrollX > 0) {
-							target.scrollX = 0;
-							target.scrollInt.clear();
-						}
-					}			
-				}, null, null, null, "seconds");
-			}
-			
-			function scrollDown(target, dropScrollSpeed) {
-				if (target.scrollInt) target.scrollInt.clear();
-				target.scrollInt = zim.interval(.01, function() {
-					if (target.dropReticle.parent) target.dropReticle.removeFrom();
-					if (target.vertical) {
-						target.scrollY -= dropScrollSpeed;
-						if (target.scrollY < -target.scrollYMax) {
-							target.scrollY = -target.scrollYMax;
-							target.scrollInt.clear();
-						}
-					} else {
-						target.scrollX -= dropScrollSpeed;
-						if (target.scrollX < -target.scrollXMax) {
-							target.scrollX = -target.scrollXMax;
-							target.scrollInt.clear();
-						}
-					}			
-				}, null, null, null, "seconds");
-			}
 		
 			that.dropMove = that.on("pressmove", function() {
 				if (ghost || !downPoint) return;
@@ -32774,179 +33289,86 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				) {		
 					that.cancelCurrentDrag();
 					var sc = downItem.getConcatenatedDisplayProps().matrix.decompose().scaleX/F.stage.scaleX; // sigh
-					ghost = downItem.clone().reg(itemPoint.x, itemPoint.y).sca(sc).alp(.5); //.sha("rgba(0,0,0,.3)",5,5,5);
+					ghost = downItem.clone(true).reg(itemPoint.x, itemPoint.y).sca(sc).alp(.5); //.sha("rgba(0,0,0,.3)",5,5,5);
 					that.dropItem = ghost;
 					that.dropIndex = itemIndex;
 					that.dropStage = frame.stage.on("stagemousemove", function(){
-						ghost.loc(frame.mouseX, frame.mouseY)
-		
+						ghost.loc(frame.mouseX, frame.mouseY);		
 						// scroll if ghost is at edges of scrollable list
-						var onCheck = false;
-						zim.loop(dropTargets, function(target) {							
-							if (target.type != "List") return;		
-							if (onCheck) {
-								if (target.scrollInt) target.scrollInt.clear();
-								target.dropReticle.removeFrom();
-								target.dropReticleIndex = null;
-								return; // next in loop
-							}					
-							if (target.vertical) {
-								if (target.scrollYMax > 0) {
-									if (ghost.x > target.zgb.x && ghost.x < target.zgb.x + target.zgb.width) {
-										if (ghost.y < target.zgb.y) { // carefull - need to do these separately to turn off diamond
-											if (ghost.y > target.zgbtarget.zgb.y - 50) scrollUp(target, dropScrollSpeed);
-											else if (ghost.y > target.zgbtarget.zgb.y - 80) scrollUp(target, dropScrollSpeed*1.5);
-											onCheck = true;
-										} else if (ghost.y > target.zgbtarget.zgb.y + target.zgbtarget.zgb.height) {
-											if (ghost.y < target.zgbtarget.zgb.y + target.zgbtarget.zgb.height + 50) scrollDown(target, dropScrollSpeed);
-											else if (ghost.y < target.zgbtarget.zgb.y + target.zgbtarget.zgb.height + 80) scrollDown(target, dropScrollSpeed*1.5);
-											onCheck = true;
-										} else if (target.scrollInt) target.scrollInt.clear();
-									} else {
-										if (target.scrollInt) target.scrollInt.clear();
-									}
-								}
-							} else {
-								if (target.scrollXMax > 0) {
-									if (ghost.y > target.zgb.y && ghost.y < target.zgb.y + target.zgb.height) {
-										if (ghost.x < target.zgb.x) {
-											if (ghost.x > target.zgb.x - 50) scrollUp(target, dropScrollSpeed);
-											else if (ghost.x > target.zgb.x - 80) scrollUp(target, dropScrollSpeed*1.5);
-											onCheck = true;
-										} else if (ghost.x > target.zgb.x + target.zgb.width) {
-											if (ghost.x < target.zgb.x + target.zgb.width + 50) scrollDown(target, dropScrollSpeed);
-											else if (ghost.x < target.zgb.x + target.zgb.width + 80) scrollDown(target, dropScrollSpeed*1.5);
-											onCheck = true;
-										} else if (target.scrollInt) target.scrollInt.clear();
-									} else {
-										if (target.scrollInt) target.scrollInt.clear();
-									}
-								}
-							}
-		
-							// place reticle
-							if (target.hitTestReg(ghost)) {
-								onCheck = true;
-								var point = target.tabs.globalToLocal(ghost.x, ghost.y);					
-								var item = target.tabs.getObjectUnderPoint(point.x, point.y, 1);
-								var yy;
-								var xx;
-								var bounds;
-								if (item) {	
-									checkItem = item;			
-									var good = target.items.includes(checkItem);		
-									if (zot(item.znum)) {				
-										while(checkItem.parent) {				
-											if (target.items.includes(checkItem.parent)) {
-												good = true;
-												item = checkItem.parent;
-												break;
-											}
-											checkItem = checkItem.parent;
-										}
-									}
-									if (!good) return;
-									bounds = item.boundsToGlobal();								
-												
-									// target.dropReticle.visible = true;
-									// if (checkItem == downItem) target.dropReticle.visible = false;
-
-									if (target.vertical) {
-										if (ghost.y > bounds.y + bounds.height/2) {
-											yy = bounds.y + bounds.height + target.spacing*target.zgs/2;
-											if (yy > target.zgb.y && yy < target.zgb.y + target.zgb.height) {
-												target.dropReticle.loc(bounds.x + bounds.width/2, yy);
-												target.dropReticleIndex = item.znum + 1;
-											}
-										} else {
-											yy = bounds.y - target.spacing*target.zgs/2;
-											if (yy > target.zgb.y && yy < target.zgb.y + target.zgb.height) {
-												target.dropReticle.loc(bounds.x + bounds.width/2, yy);
-												target.dropReticleIndex = item.znum;
-											}
-										}
-									} else {
-										if (ghost.x > bounds.x + bounds.width/2) {
-											xx = bounds.x + bounds.width + target.spacing*target.zgs/2;
-											if (xx > target.zgb.x && xx < target.zgb.x + target.zgb.width) {
-												target.dropReticle.loc(xx, bounds.y + bounds.height/2);
-												target.dropReticleIndex = item.znum + 1;
-											}
-										} else {
-											xx = bounds.x - target.spacing*target.zgs/2;
-											if (xx > target.zgb.x && xx < target.zgb.x + target.zgb.width) {
-												target.dropReticle.loc(xx, bounds.y + bounds.height/2);
-												target.dropReticleIndex = item.znum;
-											}
-										}
-									}
-								} else {									
-									if (target.items.length > 0) {
-										bounds = target.items[target.items.length-1].boundsToGlobal();
-										if (target.vertical) {
-											if (ghost.y > bounds.y + bounds.height) {
-												yy = bounds.y + bounds.height + target.spacing*target.zgs/2;
-												target.dropReticle.loc(target.zgb.x + target.zgb.width/2, yy);
-												target.dropReticleIndex = target.items.length;
-											} else {
-												target.dropReticle.removeFrom();
-												target.dropReticleIndex = null;
-											}
-										} else {												
-											if (ghost.x > bounds.x + bounds.width) {
-												xx = bounds.x + bounds.width + target.spacing*target.zgs/2;
-												target.dropReticle.loc(xx, target.zgb.y + target.zgb.height/2);
-												target.dropReticleIndex = target.items.length;
-											} else {
-												target.dropReticle.removeFrom();
-												target.dropReticleIndex = null;
-											}
-										}
-									} else {
-										if (target.vertical) {
-											yy = target.zgb.y + target.spacing*target.zgs/2;
-											target.dropReticle.loc(target.zgb.x + target.zgb.width/2, yy);
-											target.dropReticleIndex = 0;
-										} else {									
-											xx = target.zgb.x + target.spacing*target.zgs/2;
-											target.dropReticle.loc(xx, target.zgb.y + target.zgb.height/2);
-											target.dropReticleIndex = 0;
-										}										
-									}
-								}
-							} else {
-								target.dropReticle.removeFrom();
-								target.dropReticleIndex = null;
-							}
-						});
+						zim.List.doDropOver(dropTargets, ghost, checkItem, dropScrollSpeed);
 					});
 
 					that.dispatchEvent("dropdown");
 		
 					// frame.on("mouseupplus", smu, null, true); // once - but does not work with touch
-					// that.pointerUpEvent = frame.on("pointerup", smu); // pointer does not have a once!
-					frame.stage.on("stagemouseup", smu, null, true); // once - seems to be working on iframes, etc.
+					that.pointerUpEvent = frame.on("pointerup", smu); // pointer does not have a once!
+					// frame.stage.on("stagemouseup", smu, null, true); // once - seems to be working on iframes, etc.
 					function smu() {
 						frame.off("pointerup", that.pointerUpEvent)
 						frame.stage.off("stagemousemove", that.dropStage);		
 						
 						var empty = zim.loop(dropTargets, function(target) {
-							if (target.type != "List") return;
+							if (target.type != "List") {		
+
+								// DROPPING OUTSIDE LIST							
+
+								if (ghost["hitTest"+String(dropHitTest).charAt(0).toUpperCase() + String(dropHitTest).slice(1)](target)) {
+									
+									if (!dropFull || !target.dropFull) {
+										downItem.alpha = itemAlpha;
+										if (!dropCopy) that.removeAt(1,itemIndex);
+										ghost.reg(downItem.regX, downItem.regY, true);
+										if (dropSnap) ghost.loc(target);
+										if (dropScale) ghost.sca(dropScale);
+										if (dropWidth || dropHeight) ghost.siz(dropWidth, dropHeight);
+										if (dropEnd) ghost.noMouse();					
+										if (dropFull) target.dropFull = true;
+										ghost.droppedTarget = target;			
+										ghost.dropClone = true;	
+										ghost.dropList = that;						
+										ghost.dropTarget = target;						
+										ghost.alpha = itemAlpha;
+
+										ghost.dropStartX = downItem.dropStartX;
+										ghost.dropStartY = downItem.dropStartY;
+										ghost.dropStartS = downItem.dropStartS;		
+
+										that.dropItem = ghost;
+										that.dropTarget = target;
+										ghost = null;
+										downPoint = null;
+										downItem = null;																
+										return false;
+									}
+								}
+								return;
+							}
 							if (target.scrollInt) target.scrollInt.clear();
 							if (!zot(target.dropReticleIndex)) {
 								target.dropReticle.removeFrom();						
-								that.removeAt(1,itemIndex);
+								if (!dropCopy) that.removeAt(1,itemIndex);
 		
 								if (itemIndex < target.dropReticleIndex && that == target) target.dropReticleIndex--;
-								target.addAt(downItem, target.dropReticleIndex);
+																
+								if (dropCopy) {
+									target.addAt(ghost, target.dropReticleIndex);
+									ghost.alpha = itemAlpha;
+									ghost.dropList = that;
+									ghost.dropTarget = target;
+									that.dropItem = ghost;
+								} else {
+									target.addAt(downItem, target.dropReticleIndex);
+									downItem.dropList = that;
+									downItem.dropTarget = target;
+									that.dropItem = downItem;
+									ghost.dispose();									
+								}					
+								ghost = null;		
 			
-								ghost.dispose();
 								downItem.alpha = itemAlpha;
-								ghost = null;
 								downPoint = null;	
-				
-								that.dropItem = downItem;
-								that.dropList = target;
+		
+								that.dropTarget = target;
 								that.dropNewIndex = target.dropReticleIndex;
 								target.dropReticleIndex = null;
 								downItem = null;
@@ -32967,10 +33389,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 							})		
 							that.dropItem = downItem;
 							that.dropList = that;
+							that.dropTarget = null;
 							that.dropNewIndex = that.dropIndex;	
 						}	
 						that.dispatchEvent("dropup");
-						
+						that.stage.update();							
 
 					}
 					downItem.alp(.5);
@@ -33339,7 +33762,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 		if (style!==false) zim.styleTransforms(this, DS);
 		this.clone = function() {
-			return that.cloneProps(new zim.List(width, originalHeight, zim.copy(that.originalList, true), viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, originalBorderColor, originalBorderWidth, padding, zim.copy(corner), swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, selectedIndex, style, this.group, inherit));
+			return that.cloneProps(new zim.List(width, originalHeight, zim.copy(that.originalList, true), viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, originalBorderColor, originalBorderWidth, padding, zim.copy(corner), swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideFactor, slideSnap, slideSnapDamp, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, index, noScale, pulldownToggle, optimize, keyEnabled, resizeHandle, resizeBoundary, resizeVisible, continuous, closeOthers, drop, dropTargets, dropSelf, dropCopy, dropColor, dropThickness, dropScrollSpeed, dropReticleAlpha, dropHitTest, dropFull, dropSnap, dropEnd, dropScale, dropWidth, dropHeight, selectedIndex, style, this.group, inherit));
 		};
 		this.dispose = function(a,b,disposing) {
 			if (!disposing) {
@@ -33353,6 +33776,188 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 	};
 	zim.extend(zim.List, zim.Window, ["clone","dispose"], "zimWindow", false);
 
+
+	zim.List.scrollUp = function(target, dropScrollSpeed) {
+		if (target.scrollInt) target.scrollInt.clear();
+		target.scrollInt = zim.interval(.01, function() {
+			if (target.dropReticle.parent) target.dropReticle.removeFrom();
+			if (target.vertical) {
+				target.scrollY += dropScrollSpeed;				
+				if (target.scrollY > 0) {
+					target.scrollY = 0;
+					target.scrollInt.clear();
+				}
+			} else {
+				target.scrollX += dropScrollSpeed;
+				if (target.scrollX > 0) {
+					target.scrollX = 0;
+					target.scrollInt.clear();
+				}
+			}			
+		}, null, null, null, "seconds");
+	}
+
+	zim.List.scrollDown = function(target, dropScrollSpeed) {
+		if (target.scrollInt) target.scrollInt.clear();
+		target.scrollInt = zim.interval(.01, function() {
+			if (target.dropReticle.parent) target.dropReticle.removeFrom();
+			if (target.vertical) {
+				target.scrollY -= dropScrollSpeed;
+				if (target.scrollY < -target.scrollYMax) {
+					target.scrollY = -target.scrollYMax;
+					target.scrollInt.clear();
+				}
+			} else {
+				target.scrollX -= dropScrollSpeed;
+				if (target.scrollX < -target.scrollXMax) {
+					target.scrollX = -target.scrollXMax;
+					target.scrollInt.clear();
+				}
+			}			
+		}, null, null, null, "seconds");
+	}
+
+	zim.List.doDropOver = function(dropTargets, ghost, checkItem, dropScrollSpeed) {
+		var onCheck;
+		zim.loop(dropTargets, function(target) {	
+			if (target.type != "List") return;		
+			if (onCheck) {
+				if (target.scrollInt) target.scrollInt.clear();
+				target.dropReticle.removeFrom();
+				target.dropReticleIndex = null;
+				return; // next in loop
+			}					
+			if (target.vertical) {
+				if (target.scrollYMax > 0) {
+					if (ghost.x > target.zgb.x && ghost.x < target.zgb.x + target.zgb.width) {
+						if (ghost.y < target.zgb.y) { // carefull - need to do these separately to turn off diamond
+							if (ghost.y > target.zgb.y - 50) zim.List.scrollUp(target, dropScrollSpeed);
+							else if (ghost.y > target.zgb.y - 80) zim.List.scrollUp(target, dropScrollSpeed*1.5);
+							onCheck = true;
+						} else if (ghost.y > target.zgb.y + target.zgb.height) {
+							if (ghost.y < target.zgb.y + target.zgb.height + 50) zim.List.scrollDown(target, dropScrollSpeed);
+							else if (ghost.y < target.zgb.y + target.zgb.height + 80) zim.List.scrollDown(target, dropScrollSpeed*1.5);
+							onCheck = true;
+						} else if (target.scrollInt) target.scrollInt.clear();
+					} else {
+						if (target.scrollInt) target.scrollInt.clear();
+					}
+				}
+			} else {				
+				if (target.scrollXMax > 0) {
+					if (ghost.y > target.zgb.y && ghost.y < target.zgb.y + target.zgb.height) {
+						if (ghost.x < target.zgb.x) {
+							if (ghost.x > target.zgb.x - 50) zim.List.scrollUp(target, dropScrollSpeed);
+							else if (ghost.x > target.zgb.x - 80) zim.List.scrollUp(target, dropScrollSpeed*1.5);
+							onCheck = true;
+						} else if (ghost.x > target.zgb.x + target.zgb.width) {
+							if (ghost.x < target.zgb.x + target.zgb.width + 50) zim.List.scrollDown(target, dropScrollSpeed);
+							else if (ghost.x < target.zgb.x + target.zgb.width + 80) zim.List.scrollDown(target, dropScrollSpeed*1.5);
+							onCheck = true;
+						} else if (target.scrollInt) target.scrollInt.clear();
+					} else {
+						if (target.scrollInt) target.scrollInt.clear();
+					}
+				}
+			}
+
+			// place reticle
+			if (target.hitTestReg(ghost)) {
+				onCheck = true;
+				var point = target.tabs.globalToLocal(ghost.x, ghost.y);					
+				var item = target.tabs.getObjectUnderPoint(point.x, point.y, 1);
+				var yy;
+				var xx;
+				var bounds;						
+				if (item) {	
+					checkItem = item;			
+					var good = target.items.includes(checkItem);		
+					if (zot(item.znum)) {				
+						while(checkItem.parent) {				
+							if (target.items.includes(checkItem.parent)) {
+								good = true;
+								item = checkItem.parent;
+								break;
+							}
+							checkItem = checkItem.parent;
+						}
+					}
+					if (!good) return;
+					bounds = item.boundsToGlobal();								
+								
+					// target.dropReticle.visible = true;
+					// if (checkItem == downItem) target.dropReticle.visible = false;
+
+					if (target.vertical) {
+						if (ghost.y > bounds.y + bounds.height/2) {
+							yy = bounds.y + bounds.height + target.spacing*target.zgs/2;
+							if (yy > target.zgb.y && yy < target.zgb.y + target.zgb.height) {
+								target.dropReticle.loc(bounds.x + bounds.width/2, yy);
+								target.dropReticleIndex = item.znum + 1;
+							}
+						} else {
+							yy = bounds.y - target.spacing*target.zgs/2;
+							if (yy > target.zgb.y && yy < target.zgb.y + target.zgb.height) {
+								target.dropReticle.loc(bounds.x + bounds.width/2, yy);
+								target.dropReticleIndex = item.znum;
+							}
+						}
+					} else {
+						if (ghost.x > bounds.x + bounds.width/2) {
+							xx = bounds.x + bounds.width + target.spacing*target.zgs/2;
+							if (xx > target.zgb.x && xx < target.zgb.x + target.zgb.width) {
+								target.dropReticle.loc(xx, bounds.y + bounds.height/2);
+								target.dropReticleIndex = item.znum + 1;
+							}
+						} else {
+							xx = bounds.x - target.spacing*target.zgs/2;
+							if (xx > target.zgb.x && xx < target.zgb.x + target.zgb.width) {
+								target.dropReticle.loc(xx, bounds.y + bounds.height/2);
+								target.dropReticleIndex = item.znum;
+							}
+						}
+					}
+				} else {									
+					if (target.items.length > 0) {
+						bounds = target.items[target.items.length-1].boundsToGlobal();
+						if (target.vertical) {
+							if (ghost.y > bounds.y + bounds.height) {
+								yy = bounds.y + bounds.height + target.spacing*target.zgs/2;
+								target.dropReticle.loc(target.zgb.x + target.zgb.width/2, yy);
+								target.dropReticleIndex = target.items.length;
+							} else {
+								target.dropReticle.removeFrom();
+								target.dropReticleIndex = null;
+							}
+						} else {												
+							if (ghost.x > bounds.x + bounds.width) {
+								xx = bounds.x + bounds.width + target.spacing*target.zgs/2;
+								target.dropReticle.loc(xx, target.zgb.y + target.zgb.height/2);
+								target.dropReticleIndex = target.items.length;
+							} else {
+								target.dropReticle.removeFrom();
+								target.dropReticleIndex = null;
+							}
+						}
+					} else {
+						if (target.vertical) {
+							yy = target.zgb.y + target.spacing*target.zgs/2;
+							target.dropReticle.loc(target.zgb.x + target.zgb.width/2, yy);
+							target.dropReticleIndex = 0;
+						} else {									
+							xx = target.zgb.x + target.spacing*target.zgs/2;
+							target.dropReticle.loc(xx, target.zgb.y + target.zgb.height/2);
+							target.dropReticleIndex = 0;
+						}										
+					}
+				}
+			} else {
+				target.dropReticle.removeFrom();
+				target.dropReticleIndex = null;
+			}
+		});
+	}
+
 	zim.List.makeBase = function(c, label, paddingLeft, backgroundColor) {
 		if (zot(backgroundColor)) backgroundColor = zim.dark;
 		c.backing = new zim.Rectangle(c.width, c.height, backgroundColor).center(c);
@@ -35784,6 +36389,988 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 	zim.extend(zim.Selector, zim.Container, ["clone","dispose"], "zimContainer", false);
 	//-62.5
 
+/*--
+zim.Slicer = function(obj, objScale, slices, types, titleBar, remember, upload, selection, multiple, proportion, resize, style, group, inherit);
+
+Slicer
+zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
+
+DESCRIPTION
+A Slicer provides a tool to break a DisplayObject such as a Pic() into horizontal and vertical regions.
+
+See: https://zimjs.com/slicer which shows how a Slicer can be used to create data for a ZIM SlicedBitmap
+
+The component has a horizontal track at the top which can be pressed to make editable vertical lines
+and a vertical track at the left that can be pressed to make editable horizontal lines.
+The sections can be selected or multiple selected and properties applied.
+The lines can be dragged and deleted and their percentages retrieved with the slices property.
+A new picture can be uploaded with the pic icon at the bottom right.
+The interface can be hidden, the window resized at bottom right and collapsed at top right.
+
+NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
+
+EXAMPLE
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
+const slicer = new Slicer({
+	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
+	scale:.5,
+	upload:false
+})
+	.pos(30,50)
+	.change(()=>{preview.exchange = slicer.exchange;);	// this will update the picture below
+
+slicer.on("loaded", ()=>{
+	if (preview) preview.dispose();
+	preview = new zim.SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
+		.pos(0,100,CENTER,BOTTOM)
+		.transform({minScaleX:.05, minScaleY:.05});
+});
+
+// this will provide slice type options
+new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
+
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+let preview = new SlicedBitmap(1600, pic.height, pic)
+	.center()
+	.transform({minScaleX:.05, minScaleY:.05});
+END EXAMPLE
+
+PARAMETERS
+** supports DUO - parameters or single object with properties below
+** supports OCT - parameter defaults can be set with STYLE control (like CSS)
+obj - (default new Tile()) a DisplayObject to slice
+objScale - (default 1) set the scale of the object in the Slicer
+slices - (default null) an array of horizontal and vertical arrays holding slice percentage 
+	[[.25,.75], [.1,.4,.5,.9]]
+	three horizontal regions made from two vertical lines placed at 1/4 and 3/4 the width 
+	five vertical regions made from four horizontal lines with 1/10 the picture at left, middle and right
+types - (default null) an array of horizontal and vertical arrays holding slice types
+	0 - fix - keeps the original width and height of the region.  Usually, good for corners.
+	1 - stretch - stretch the region to fill space as an object is stretched
+	2 - tile - tile the region at original scale - currently, will match the first side and sometimes the second side
+titleBar - (default "Slicer") the title of the window as a String or ZIM Label
+remember - (default true) use localStorage(zimSlicer) to store the last settings of the lines - see clear() method
+upload - (default true) provide a pic button at bottom right to upload a pic
+selection - (default true) let the sliced regions be selected
+multiple - (default true) if selection then let shift or the multiple button be used to select multiple regions - set to false for single selection
+proportion - (default true) when resized (or on upload) keep the percentages - set to false to keep lines at pixel setting
+resize - (default true) roll over bottom right corner to resize - set to false to not provide resizing - also can use resizeVisible as STYLE to keep visible 
+style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
+group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
+inherit - (default null) used internally but can receive an {} of styles directly
+
+METHODS
+hasProp(property as String) - returns true if property exists on object else returns false
+setObject(newObj, scale) - change the object in the slicer and set the scale of the object
+updateLines(slices) - remake lines with slices data - see slices parameter
+setSlicerTypes(slicerTypes) - add a ZIM SlicerTypes object to control slicer types
+clearSelection() - clears all highlights - not the line selections but the region selections
+clear() - clears remembered data stored in localStorage(zimSlicer)
+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
+
+ALSO: All Window methods such as resize()
+
+ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
+drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
+addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
+ALSO: see the CreateJS Easel Docs for Container methods, such as:
+on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
+addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
+
+PROPERTIES
+type - holds the class name as a String
+obj - get a reference to the object being sliced - see setObject() to set the object
+slices - get or set the slices array - see the slices parameter
+types - get or set the types array - see the types parameter
+exchange - get or set [slices, types] as a single array - used to set a SlicedBitmap
+selectedIndexH - get the selected index of the current horizontal slice
+selectedIndexV - get the selected index of the current vertical slice
+currentLineH - get the selected horizontal slice line (a vertical line)
+currentLineV - get the selected vertical slice line (a horizontal line)
+selection - get an array of currently highlighted regions - also see highLightContainer
+box - a reference to the box Rectangle that directly surrounds the obj
+trackH - a reference to the top track Rectangle
+trackV - a reference to the left track Rectangle
+deleteH - a reference to the delete Button at top right
+deleteV - a reference to the delete Button at bottom left
+hide - a reference to the hide Button at top left
+loader - a reference to the Loader button at bottom right
+linesHContainer - a reference to the Container of horizontal slice lines (vertical lines)
+linesVContainer - a reference to the Container of vertical slice lines (vertical lines)
+highlightContainer - a reference to the left track Rectangle
+
+ALSO: see ZIM Window for properties - like titleBar, titleBarLabel, resizeHandle, etc.
+
+ALSO: see ZIM Container for properties such as:
+width, height, widthOnly, heightOnly, draggable, level, depth, group 
+blendMode, hue, saturation, brightness, contrast, etc.
+
+ALSO: see the CreateJS Easel Docs for Container properties, such as:
+x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
+alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
+
+EVENTS
+change - dispatched when a line is added, deleted or moved
+selection - dispatched when a region is selected or deselected
+delete - dispatched when a line is deleted
+loaded - dispatched when an image is loaded
+
+ALSO: all Window events including "collapse", "expand", "resize"
+
+ALSO: see the CreateJS Easel Docs for Container events such as:
+added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
+--*///+62.7
+	zim.Slicer = function(obj, objScale, slices, types, titleBar, remember, upload, selection, multiple, proportion, resize, style, group, inherit) {
+		var sig = "obj, objScale, slices, types, titleBar, remember, upload, selection, multiple, proportion, resize, style, group, inherit";
+		var duo; if (duo = zob(zim.Slicer, arguments, sig, this)) return duo;
+		z_d("62.7");
+		this.group = group;
+		var DS = style===false?{}:zim.getStyle("Slicer", this.group, inherit);
+
+		if (zot(obj)) obj = DS.obj!=null?DS.obj:new zim.Tile();
+		if (zot(objScale)) objScale = DS.objScale!=null?DS.objScale:1;
+		var scale = objScale;
+		var empty = slices;
+		if (zot(slices)) slices = DS.slices!=null?DS.slices:[[0,1],[0,1]];
+		var defaults = [[1],[1]];	
+		zim.loop(slices,function(s,i) {
+			zim.loop(s,function() {
+				defaults[i].push(1);
+			});
+		});
+		slices = zim.copy(slices);		
+		if (zot(types)) types = DS.slices!=null?DS.slices:defaults;
+		types = zim.copy(types);
+		if (zot(titleBar)) titleBar = DS.titleBar!=null?DS.titleBar:"Slicer";
+		if (zot(remember)) remember = DS.remember!=null?DS.remember:true;
+		if (zot(upload)) upload = DS.upload!=null?DS.upload:true;
+		if (zot(selection)) selection = DS.selection!=null?DS.selection:true;
+		if (zot(multiple)) multiple = DS.multiple!=null?DS.multiple:true;
+		if (zot(proportion)) proportion = DS.proportion!=null?DS.proportion:true;
+		if (zot(resize)) resize = DS.resize!=null?DS.resize:true;
+
+		// WINDOW
+		var wW = obj.width*scale+60;
+		var wH = obj.height*scale+60+(titleBar?30:0);
+		var oWW = wW;
+		var oWH = wH;
+		this.zimWindow_constructor(wW, wH,
+			null, null, null, null, null, null, false, null, null, null, null, null, false, false, false, null, null, null, null, null, null, null, null, null, null, 
+			titleBar, dark, moon, null, true, null, null, null, null, null, null, null, resize, true			
+		);
+		this.type = "Slicer";
+		var that = this;
+		if (that.collapseIcon) that.collapseIcon.mov(2);
+		if (that.titleBar) {
+			that.titleBarLabel.mov(26,1);
+			zdf.makeIcon(tin, clear, [tin, tin, tin, tin, tin]).scaleTo(that.titleBar,87,87).loc(5,2,that.titleBar);
+		}
+		
+		that.obj = obj;
+		that.data = slices;
+		that.dataTypes = types;				
+		// CONTAINERS
+		var hh = that.height-(titleBar?30:0);				
+		var content = new zim.Container(that.width, hh);
+		var sc = that.splitterContent = new zim.Container(that.width-60, hh-60).pos(30,30,LEFT,TOP,content);
+		
+		// OBJECT
+		var w = obj.width*scale;
+		var h = obj.height*scale;
+		obj.sca(scale).addTo(sc);
+
+
+		// CONTENT	
+		var box = that.box = new zim.Rectangle({width:w, height:h, borderColor:black, scaleDimensions:false}).alp(.5).pos(30,30,LEFT,TOP,content).expand(0)
+		box.on("mousedown", doClear);
+		function doClear() {
+			linesH.loop(function(l) {
+				l.triangle.color = faint;
+			});
+			currentH = null;
+			linesV.loop(function(l) {
+				l.triangle.color = faint;
+			});
+			currentV = null;
+			that.stage.update();
+		}
+
+		var hide = that.hide = new zim.Button({width:30, height:30, label:"-", toggle:"+", color:silver, backgroundColor:darker, rollBackgroundColor:lighter, rollColor:granite, corner:0, shadowColor:-1, style:false}).sca(1).loc(0,0,content);
+		hide.label.mov(0,-2)
+		hide.on("click", function(){
+			if (hide.toggled) {
+				hide.label.mov(0,3);
+				box.visible = trackH.visible = trackV.visible = linesH.visible = linesV.visible = deleteH.visible = deleteV.visible = highlights.visible = false;
+				if (multi) multi.vis(false);
+				if (upload) loader.removeFrom();
+			} else {
+				hide.label.mov(0,-3);
+				box.visible = trackH.visible = trackV.visible = linesH.visible = linesV.visible = deleteH.visible = deleteV.visible = highlights.visible = true;
+				if (multi) multi.vis(true);
+				if (upload) loader.addTo(that.contentContainer);
+			}
+		});
+		
+		var trackH = that.trackH = new zim.Rectangle(w, 30, white).alp(.1).loc(box.x, box.y-30, content).cur();
+		var trackV = that.trackV = new zim.Rectangle(30, h, white).alp(.1).loc(box.x-30, box.y, content).cur();
+		var deleteH = that.deleteH = new zim.Button({width:60, height:60, label:"X", backgroundColor:red, corner:0, shadowColor:-1, style:false}).sca(.5).pos(0,0,RIGHT,TOP,content);
+		var deleteV = that.deleteV = deleteH.clone().pos(0,0,LEFT,BOTTOM,content);
+		
+		if (selection && multiple) var multi = that.toggle = new zim.Toggle({height:18, width:30, backgroundColor:grey, corner:9, label:"multiple", color:tin})
+						.loc(deleteV.x + 45, deleteV.y+6, content);
+
+		if (upload) {
+			var icon1 = new zim.Circle(6,silver).reg(CENTER,3);
+			new zim.Circle({radius:9, color:silver, percent:40}).center(icon1).mov(0,8);
+			var icon2 = new zim.Circle(6,grey).reg(CENTER,3);
+			new zim.Circle({radius:9, color:grey, percent:40}).center(icon2).mov(0,8);
+			var loader = that.loader = new zim.Loader({
+				width:30,
+				height:30,
+				backgroundColor:darker,
+				rollBackgroundColor:lighter,
+				corner:3,
+				borderColor:-1,
+				label:"",
+				icon:icon1,
+				rollIcon:icon2
+			});	
+			loader.on("loaded", function(e) {	
+				obj.dispose();		
+				loader.removeRoll();
+				var f = e.bitmap.fit(0,0,oWW-60, oWH-60-(titleBar?30:0));
+				scale = f.scale;
+				e.bitmap.sca(1);
+				wW = e.bitmap.width*scale+60;
+				wH = e.bitmap.height*scale+60;
+				that.resize(wW, wH);
+				obj = e.bitmap.sca(scale).loc(0,0,sc,0);
+				that.obj = obj;
+				doResize();
+				that.dispatchEvent("loaded");
+			});
+		}
+
+		var instruct = that.instruct = new zim.Container(content.width, content.height).addTo(content).animate({
+			wait:1,
+			from:true,
+			props:{alpha:0},
+			rewind:true,
+			rewindWait:2,
+			call:function(){instruct.dispose(); instruct=null;}
+		}).noMouse();
+		new zim.Label("Add slices here", 15, null, blue).pos(0,8,CENTER,TOP,instruct);
+		new zim.Label("Add slices here", 15, null, blue).rot(-90).pos(8,0,LEFT,CENTER,instruct);
+
+		// ADD CONTENT TO WINDOW
+		that.add(content);
+		that.add(loader, null, true);
+		loader.pos(0,0,RIGHT,BOTTOM)
+
+
+		// LINES
+		var linesH = that.linesHContainer = new zim.Container(w,h).loc(box, null, content);
+		var linesV = that.linesVContainer = new zim.Container(w,h).loc(box, null, content);
+		var currentH;
+		var currentV;
+
+		// axis is direction of line, so VERTICAL will use linesH, etc.
+		that.makeLine = function(axis, ratio, selected) {					
+			if (ratio > 1) ratio /= 100;
+			var line;
+			if (axis == "vertical") {
+				var x = ratio*box.width;
+				line = new zim.Container(30,h+30).reg(15,30).loc(x, 0, linesH);	
+				line.triangle = new zim.Triangle(30,30,30,selected?blue:faint,blue).rot(180).pos(0,4,CENTER,TOP,line);
+				line.line = new zim.Rectangle(1,box.height,red).ble().expand(3).reg(0,0).pos(0,30,CENTER,TOP,line);
+				line.drag({all:true, boundary:new zim.Boundary(0,0,box.width,0), localBoundary:true});
+				line.on("mousedown", function() {
+					linesH.loop(function(l) {
+						if (l==line) l.triangle.color = blue;
+						else l.triangle.color = faint;
+					});
+					currentH = that.currentLineH = line;
+					that.stage.update();
+				});
+				line.on("pressmove", dataLinesH);						
+			} else {
+				var y = ratio*box.height;
+				line = new zim.Container(w+30,30).reg(30,15).loc(0, y, linesV);
+				line.triangle = new zim.Triangle(30,30,30,selected?blue:faint,blue).rot(90).pos(4,0,LEFT,CENTER,line);
+				line.line = new zim.Rectangle(box.width,1,red).ble().expand(3).reg(0,0).pos(30,0,LEFT,CENTER,line);
+				line.drag({all:true, boundary:new zim.Boundary(0,0,0,box.height), localBoundary:true});
+				line.on("mousedown", function() {
+					linesV.loop(function(l) {
+						if (l==line) l.triangle.color = blue;
+						else l.triangle.color = faint;
+					});
+					currentV = that.currentLineV = line;
+					that.stage.update();
+				});
+				line.on("pressmove", dataLinesV);							
+			}
+			return line;
+		}
+
+		// HORIZONTAL 
+		// across the top - will make vertical lines but slices into horizontal regions
+		trackH.on("mousedown", function() {
+			if (instruct) instruct.dispose();
+			linesH.loop(function(l) {
+				l.triangle.color = faint;
+			});
+			var point = linesH.globalToLocal(F.mouseX, F.mouseY);					
+			that.currentLineH = currentH = that.makeLine(VERTICAL, point.x/box.width, true);	
+			
+			// move any selections past the line forward one
+			var c = that.selectedIndexH = getIndexH(currentH);
+			selected.sort(function (a, b) {
+				return a[0] - b[0];
+			});
+			loop(selected, function (s, i) {
+				if (s[0] >= c) s[0]++;
+			}, true); // true for backwards
+
+			// adding dataTypes to columns in each row
+			if (that.dataTypes) {
+				that.dataTypes[0].splice(c-1, 0, that.dataTypes[0][c-1]); // take types from next door
+				// zim.loop(that.dataTypes, function(row,j){
+				// 	row.splice(c-1, 0, [row[c-1][0], row[c-1][1]]); // take types from next door
+				// });
+			}
+						
+			dataLinesH();
+			that.stage.update();
+		})
+
+		deleteH.on("click", function(){
+			if (currentH) {
+
+				// move any selections past the line including the line back one
+				var c = getIndexH(currentH);
+				selected.sort(function (a, b) {
+					return a[0] - b[0];
+				});
+				loop(selected, function (s, i) {
+					if (s[0] >= c - 1) s[0]--;
+				}, true); // true for backwards
+
+				// remove duplicates of one less than c 
+				var already = [];
+				loop(selected, function(s, i) {
+					if (s[0] == c-2 && already.indexOf(JSON.stringify(s)) >= 0) selected.splice(i,1);
+					else already.push(JSON.stringify(s));
+				}, true); 
+				already = null;
+
+				// remove data from types 
+				if (that.dataTypes) that.dataTypes[0].splice(c-1, 1);
+				
+				currentH.dispose();
+				that.currentLineH = currentH = null;
+									
+				dataLinesH();
+				that.dispatchEvent("delete");						
+				that.stage.update();
+			}
+		});
+
+		function dataLinesH() {
+			that.data[0] = [0,1];
+			linesH.loop(function(l) {
+				that.data[0].push(zim.decimals(l.x/box.width,3));
+			})
+			that.data[0].sort(function(a, b){return a-b});										
+			adjustBoxes();
+		}
+
+		function getIndexH(line) {	
+			var c = zim.loop(that.data[0], function(x,i) {
+				if (zim.decimals(line.x/box.width,3) < x) return i;
+			});
+			return c;
+		}
+			
+		// VERTICAL 
+		// same as horizontal but along left will make vertical lines but slices into vertical regions
+		trackV.on("mousedown", function() {
+			if (instruct) instruct.dispose();
+			linesV.loop(function(l) {
+				l.triangle.color = faint;
+			});
+			var point = linesV.globalToLocal(F.mouseX, F.mouseY);
+
+			var point = linesH.globalToLocal(F.mouseX, F.mouseY);
+			that.currentLineV = currentV = that.makeLine(HORIZONTAL, point.y/box.height, true);
+
+			// move any selections past the line forward one
+			var r = that.selectedIndexV = getIndexV(currentV);
+			selected.sort(function (a, b) {
+				return a[1] - b[1];
+			});
+			loop(selected, function (s, i) {
+				if (s[1] >= r) s[1]++;
+			}, true); // true for backwards
+
+			// adding row with columns
+			if (that.dataTypes) that.dataTypes[1].splice(r-1, 0, that.dataTypes[1][r-1]); // take types from next door
+										
+			dataLinesV();
+			that.stage.update();
+		})
+
+		deleteV.on("click", function(){
+			if (currentV) {				
+				// move any selections past the line including the line back one
+				var r = getIndexV(currentV);
+				selected.sort(function (a, b) {
+					return a[1] - b[1];
+				});
+				loop(selected, function (s, i) {
+					if (s[1] >= r - 1) s[1]--;
+				}, true); // true for backwards
+
+				// remove duplicates of less than r 
+				var already = [];
+				loop(selected, function(s, i) {
+					if (s[1] == r-2 && already.indexOf(JSON.stringify(s)) >= 0) selected.splice(i,1);
+					else already.push(JSON.stringify(s));
+				}, true); 
+				already = null;
+
+				// remove data from types 
+				if (that.dataTypes) that.dataTypes[1].splice(r-1, 1);
+		
+				currentV.dispose();
+				that.currentLineV = currentV = null;
+		
+				dataLinesV();
+				that.dispatchEvent("delete");
+				that.stage.update();
+			}					
+		});
+
+		function dataLinesV() {
+			that.data[1] = [0,1];
+			linesV.loop(function(l) {
+				that.data[1].push(zim.decimals(l.y/box.height,3));
+			})
+			that.data[1].sort(function(a, b){return a-b});										
+			adjustBoxes();					
+		}
+
+		function getIndexV(line) {					
+			var r = zim.loop(that.data[1], function(y,i) {
+				if (zim.decimals(line.y/box.height,3) < y) return i;
+			});
+			return r;
+		}				
+
+		// HIGHLIGHTS
+		function adjustBoxes(dispatch) {
+			if (zot(dispatch)) dispatch = true;
+			highlights.disposeAllChildren();
+			zim.loop(selected, function(s) {						
+				that.selectTile(s[0],s[1]);
+			});
+			if (dispatch) that.dispatchEvent("change");
+			if (localStorage) localStorage.zimSlicer = JSON.stringify(that.exchange);
+		}				
+
+		var selected = that.selected = [];
+
+		var highlights = that.highlightsContainer = new zim.Container(W,H).loc(box, null, content).noMouse();
+		var gap = 5;
+		that.selectTile = function(c,r,d) {
+			if (d) highlights.disposeAllChildren();
+			c = zim.constrain(c,0,that.data[0].length-1);
+			r = zim.constrain(r,0,that.data[1].length-1);
+			that.selection = new zim.Rectangle(that.data[0][c+1]*box.width-that.data[0][c]*box.width-gap*2, that.data[1][r+1]*box.height-that.data[1][r]*box.height-gap*2, white.toAlpha(.2), white, 2, 0, true)
+				.loc(that.data[0][c]*box.width+gap, that.data[1][r]*box.height+gap, highlights)
+				.ble();								 
+		}
+
+		if (selection) {
+			box.cur();
+			box.on("mousedown", function(){
+				var point = box.globalToLocal(that.stage.frame.mouseX, that.stage.frame.mouseY);						
+				var c = zim.loop(that.data[0], function(x,i) {
+					if (point.x < x*box.width) return i-1;
+				});
+				var r = zim.loop(that.data[1], function(y,i) {
+					if (point.y < y*box.height) return i-1;
+				});
+
+				var empty = zim.loop(selected, function(s,i) { 
+					if (JSON.stringify(s) == JSON.stringify([c,r])) {
+						if (selected.length > 1 && multiple && !F.shiftKey && !multi.toggled) return true; // if others just clear others
+						selected.splice(i,1); // else toggling a selected
+						return false;
+					}
+				});
+				
+				if (!multiple || (!F.shiftKey && !multi.toggled)) selected = that.selected = [];
+				if (empty) {
+					selected.push([c,r]); // could put the above like in this conditional
+				}
+
+				adjustBoxes(false);
+				that.dispatchEvent("selection");						
+			});
+		}
+
+		// RESIZE				
+		that.on("resize", doResize);
+		function doResize() {
+			hh = that.height-(titleBar?30:0);
+			var boxH = box.width;
+			var boxV = box.height;
+			that.box.siz(that.width-60, hh-60).expand(0);
+			deleteH.loc(box.x+box.width,box.y-30);
+			deleteV.loc(box.x-30,box.y+box.height);
+			trackH.widthOnly = box.width;
+			trackV.heightOnly = box.height;					
+			linesH.loop(function(line, i) {
+				line.line.heightOnly = box.height;
+				if (proportion) line.x = line.x*box.width/boxH;	
+				line.dragBoundary(new zim.Boundary(0,0,box.width,0));
+			});
+			linesV.loop(function(line) {
+				line.line.widthOnly = box.width;
+				if (proportion) line.y = line.y*box.height/boxV;
+				line.dragBoundary(new zim.Boundary(0,0,0,box.height));
+			});				
+			if (multi) multi.loc(deleteV.x + 45, deleteV.y+6, content);
+			if (upload) {
+				loader.loc(that.box.width+30,that.box.height+30);
+				loader.resize();
+			}
+			adjustBoxes();	
+			setTimeout(function(){
+				obj.scaleTo(that.box,100,100).loc(0,0,sc,0);
+				that.stage.update();
+			},20);			
+		}
+		if (resize) {
+			that.resizeHandle.on("pressup", function() {
+				var wW = obj.width+60;
+				var wH = obj.height+60;
+				that.resize(wW,wH);
+				that.stage.update()
+			});
+		}
+
+
+
+		// METHODS
+		that.setObject = function(newObj, scale) {
+			obj.dispose();	
+			obj = newObj;
+			if (zot(scale)) {
+				var f = e.bitmap.fit(0,0,oWW-60, oWH-60-(titleBar?30:0));
+				scale = f.scale;
+			}
+			obj.sca(1);
+			wW = obj.width*scale+60;
+			wH = obj.height*scale+60;
+			that.resize(wW, wH);
+			obj = obj.sca(scale).loc(0,0,sc,0);
+			that.obj = obj;
+			doResize();
+			that.dispatchEvent("loaded");
+			return that;
+		}
+
+		that.updateLines = function(slices) {
+			that.data = slices;					
+			// clear all lines and remake them to the data
+			linesH.disposeAllChildren();
+			linesV.disposeAllChildren();
+			zim.loop(slices[0], function(x,i,t) {if (i!=0 && i!=t-1) {that.makeLine(VERTICAL, x)};});
+			zim.loop(slices[1], function(y,i,t) {if (i!=0 && i!=t-1) {that.makeLine(HORIZONTAL, y)};});		
+			that.selectedIndexH = that.selectedIndexV = that.currentLineH = that.currentLineV = null;
+			if (that.stage) that.stage.update();	
+			return that;		
+		}
+		
+		that.setSlicerTypes = function(slicerTypes) {
+			if (!that.dataTypes) that.dataTypes = [[1],[1]];
+			var st = that.slicerTypes = slicerTypes;
+			that.on("select", function() {
+				if (selected.length > 0) {
+					st.shield.vis(false);
+					
+					// loop through all selected and if the same types
+					var lastH;
+					var lastV;							
+					zim.loop(selected, function(s) {
+						var type = that.dataTypes[0][s[0]];
+						if (lastH != "bad" && (lastH==null || lastH==type)) lastH = type;
+						else lastH = "bad";
+						type = that.dataTypes[1][s[1]];
+						if (lastV != "bad" && (lastV==null || lastV==type)) lastV = type;
+						else lastV = "bad";
+						if (lastH == "bad" && lastV == "bad") return false; // exits loop
+					});
+					
+					// if not the same types then yellow the box and remove selection
+					if (lastH == "bad") {
+						st.radioH.selectedIndex = -1;
+						st.tile.backgrounds[1].color = brown;
+					} else {
+						st.radioH.selectedIndex = lastH;
+						st.tile.backgrounds[1].color = light;
+					}
+
+					if (lastV == "bad") {
+						st.radioV.selectedIndex = -1;
+						st.tile.backgrounds[3].color = brown;
+					} else {
+						st.radioV.selectedIndex = lastV;
+						st.tile.backgrounds[3].color = light;
+					}
+					
+				} else {
+					st.radioH.selectedIndex = -1;
+					st.radioV.selectedIndex = -1;
+					st.shield.vis(true);
+				}
+			});
+			that.stage.update();
+			return that;
+		}
+
+		that.clearSelection = function() {
+			selected = that.selected = [];
+			highlights.disposeAllChildren();
+			if (that.slicerTypes) {
+				var st = that.slicerTypes;
+				st.radioH.selectedIndex = -1;
+				st.radioV.selectedIndex = -1;
+				st.shield.vis(true);
+			}
+			that.stage.update();
+			return that;
+		}
+
+		that.clear = function() {
+			if (localStorage) localStorage.removeItem("zimSlicer");
+			that.exchange = [[[],[]],[[1],[1]]];
+			that.clearSelection();
+			that.dispatchEvent("change");
+			return that; 
+		}
+		
+
+		// PROPERTIES
+		Object.defineProperty(that, 'slices', {
+			get: function() {
+				var temp = zim.copy(that.data);
+				temp[0].shift();
+				temp[0].pop();
+				temp[1].shift();
+				temp[1].pop();	
+				return temp;
+			},
+			set: function(value) {						
+				var slices = zim.copy(value);
+				slices[0].unshift(0);
+				slices[0].push(1);
+				slices[1].unshift(0);
+				slices[1].push(1);		
+				that.updateLines(slices);				
+			}
+		});		
+
+		Object.defineProperty(that, 'types', {
+			get: function() {
+				return zim.copy(that.dataTypes);
+			},
+			set: function(value) {						
+				that.dataTypes = zim.copy(value);						
+			}
+		});		
+
+		Object.defineProperty(that, 'exchange', {
+			get: function() {
+				var temp = zim.copy(that.data);
+				temp[0].shift();
+				temp[0].pop();
+				temp[1].shift();
+				temp[1].pop();	
+				return [temp, zim.copy(that.dataTypes)];
+			},
+			set: function(value) {						
+				var slices = zim.copy(value[0]);
+				var types = zim.copy(value[1]);
+				slices[0].unshift(0);
+				slices[0].push(1);
+				slices[1].unshift(0);
+				slices[1].push(1);	
+				that.updateLines(slices);
+				that.dataTypes = types;						
+			}
+		});				
+
+		// MEMORY
+		if (remember && localStorage && localStorage.zimSlicer) {
+			that.exchange = JSON.parse(localStorage.zimSlicer);
+			instruct.dispose();
+		} else if (empty) {
+			that.exchange =[slices, types];
+			instruct.dispose();
+		}
+		setTimeout(function(){that.dispatchEvent("change");},20);
+
+		if (style!==false) zim.styleTransforms(this, DS);
+		this.clone = function() {
+			return that.cloneProps(new zim.Slicer(obj.clone(), objScale, zim.copy(slices), zim.copy(types), titleBar, remember, upload, selection, multiple, proportion, resize, style, this.group, inherit));
+		};
+
+	}
+	zim.extend(zim.Slicer, zim.Window, ["clone"], "zimWindow", false);	
+	//-62.7
+
+//
+/*--
+zim.SlicerTypes = function(slicer, titleBar, sliceType, style, group, inherit);
+
+SlicerTypes
+zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
+
+DESCRIPTION
+SlicerTypes works with ZIM Slicer to provide slice types for ZIM SlicedBitmap.
+The component is not to be used on its own.
+Pass a ZIM Slicer object to the slicer parameter - the Slicer should be made first.
+There are fixed, stretch and tile radio buttons for horizontal and vertical
+and import and export buttons to work with [slices, types] used in Slicer and SlicedBitmap parameters and exchange property.
+
+See: https://zimjs.com/slicer which shows how a Slicer can be used to create data for a ZIM SlicedBitmap
+
+NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
+
+EXAMPLE
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
+const slicer = new Slicer({
+	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
+	scale:.5,
+	upload:false
+})
+	.pos(30,50)
+	.change(()=>{preview.exchange = slicer.exchange;);	// this will update the picture below
+
+slicer.on("loaded", ()=>{
+	if (preview) preview.dispose();
+	preview = new zim.SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
+		.pos(0,100,CENTER,BOTTOM)
+		.transform({minScaleX:.05, minScaleY:.05});
+});
+
+// this will provide slice type options
+new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
+
+// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
+let preview = new SlicedBitmap(1600, pic.height, pic)
+	.center()
+	.transform({minScaleX:.05, minScaleY:.05});
+END EXAMPLE
+
+PARAMETERS
+** supports DUO - parameters or single object with properties below
+** supports OCT - parameter defaults can be set with STYLE control (like CSS)
+slicer - (default null) pass in the ZIM Slicer object to work with - required
+titleBar - (default "Slicer Types") string or Label for slicerTypes
+sliceType - (default "stretch") set the default slice type - fixed, stretch, tile
+style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
+group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
+inherit - (default null) used internally but can receive an {} of styles directly
+
+METHODS
+hasProp(property as String) - returns true if property exists on object else returns false
+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
+
+ALSO: All Window methods such as resize()
+
+ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as:
+drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
+addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
+ALSO: see the CreateJS Easel Docs for Container methods, such as:
+on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
+addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
+
+PROPERTIES
+type - holds the class name as a String
+slicer - read slicer used
+sliceType - get or set default slice type - fixed, stretch, tile
+radioH - access RadioButtons for horizontal
+radioV - access RadioButtons for horizontal
+importButton - access import Button
+exportButton - access export Button
+importPane - access import Pane
+exportPane - access export Pane
+submitButton - access import pane submit Button
+shield - access shield that darkens radio buttons
+
+ALSO: see ZIM Window for properties - like titleBar, titleBarLabel, resizeHandle, etc.
+
+ALSO: see ZIM Container for properties such as:
+width, height, widthOnly, heightOnly, draggable, level, depth, group 
+blendMode, hue, saturation, brightness, contrast, etc.
+
+ALSO: see the CreateJS Easel Docs for Container properties, such as:
+x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
+alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
+
+EVENTS
+ALSO: all Window events including "collapse", "expand", "resize"
+
+ALSO: see the CreateJS Easel Docs for Container events such as:
+added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
+--*///+62.75
+zim.SlicerTypes = function(slicer, titleBar, sliceType, style, group, inherit) {
+	var sig = "slicer, titleBar, sliceType, style, group, inherit";
+	var duo; if (duo = zob(zim.SlicerTypes, arguments, sig, this)) return duo;
+	z_d("62.75");
+	this.group = group;
+	var DS = style===false?{}:zim.getStyle("SlicerTypes", this.group, inherit);
+
+	if (zot(slicer)) slicer = DS.slicer!=null?DS.slicer:null;
+	if (zot(slicer)) {zogy("ZIM SlicerTypes - needs a Slicer Object"); return;}
+
+	if (zot(titleBar)) titleBar = DS.titleBar!=null?DS.titleBar:"Slicer Types";
+	if (zot(sliceType)) sliceType = DS.sliceType!=null?DS.sliceType:"stretch";
+
+	var types = ["fixed", "stretch", "tile"];
+	if (types.indexOf(sliceType) < 0) sliceType = "stretch";
+	
+	this.zimWindow_constructor(470,150, null, null, null, null, null, null, false, null, null, null, null, null, false, false, null, null, null, null, null, null, null, null, null, null, null, 
+	titleBar, dark, moon, null, true, null, null, null, null, null, null, null, null, true);
+	var that = this;
+	that.collapseIcon.mov(2);
+	that.titleBarLabel.mov(25,1)
+	zdf.makeIcon(tin, clear, [tin, tin, tin, tin, tin]).scaleTo(that.titleBar,87,87).loc(5,2,that.titleBar);
+
+	that.slicer = slicer;
+	that.sliceType = sliceType;
+	that.defaultIndex = types.indexOf(sliceType);
+
+	var holder = new zim.Container();
+	var radioH = that.radioH = new zim.RadioButtons({size:20, buttons:["fixed","stretch","tile"], vertical:false, selectedIndex:-1}).change(doChangeH);
+	var radioV = that.radioV = radioH.clone().change(doChangeV);
+	Style.remember("slicer");
+	STYLE = {align:CENTER, valign:CENTER, backgroundColor:light, backgroundPaddingH:5};
+	var tile = that.tile = new zim.Tile([new Label("Horizontal", 20).alp(.5), radioH, new Label("Vertical", 20).alp(.5),radioV], 2,2, 5,5, true)
+		.sca(.8)
+		.addTo(holder);
+	Style.recall("slicer");
+
+	function doChangeH() {
+		zim.loop(slicer.selected, function(s) {
+			slicer.dataTypes[0][s[0]] = radioH.selectedIndex;
+		});
+		slicer.dispatchEvent("change");
+		tile.backgrounds[1].color = light;
+		that.stage.update();
+		if (localStorage) localStorage.zimSlicer = JSON.stringify(slicer.exchange);
+	}
+	function doChangeV() {
+		zim.loop(slicer.selected, function(s) {
+			slicer.dataTypes[1][s[1]] = radioV.selectedIndex;
+		});
+		slicer.dispatchEvent("change");
+		tile.backgrounds[3].color = light;
+		that.stage.update();
+		if (localStorage) localStorage.zimSlicer = JSON.stringify(slicer.exchange);
+	}
+
+	var importText = new zim.TextArea({width:600, height:300, wrap:true, spellCheck:false})			
+	var importPane = that.importPane = new zim.Pane({content:importText, close:true, closeColor:red});
+	importPane.content.mov(0,-20);
+	var submit = that.submitButton = new zim.Button({
+		width:220, 
+		label:"IMPORT", 
+		wait:"CONFIRM", 
+		waitTime:2,
+		waitBackgroundColor:red, 
+		rollWaitBackgroundColor:red
+	}).sca(.6).pos(0,-60,CENTER,BOTTOM,importPane.content);
+	submit.on("mousedown", function(){
+		if (submit.waiting) {
+			importPane.hide();
+			submit.clearWait();
+			slicer.clearSelection();
+			var data = importText.text.trim().split("\n");
+			// JSON does not accept decimals without a leading 0 - sigh
+			data = data.pop().replace(/([^0])\./g, "$10.");  // $1 is the match of whatever is before the .
+			data = JSON.parse("[" + data + "]");		
+			that.updateData(data[0], data[1]);
+		}
+	});
+	submit.on("close", function() {
+		submit.clearWait();
+	});
+
+	var exportText = new zim.TextArea({width:600, height:300, wrap:true, spellCheck:false});		
+	var exportPane = that.exportPane = new zim.Pane({content:exportText, close:true, closeColor:red});
+
+	var importButton = that.importButton = new zim.Button({width:220, label:"IMPORT"}).tap(function() {
+		var temp = zim.copy(slicer.data);
+		temp[0].shift();
+		temp[0].pop();
+		temp[1].shift();
+		temp[1].pop();	
+		importText.text = "// replace this current data with desired slices, types data:\n\n" + JSON.stringify(temp) +", "+ JSON.stringify(slicer.dataTypes);
+		importPane.show();
+	});
+	var exportButton = that.exportButton = new zim.Button({width:220, label:"EXPORT"}).tap(function() {
+		var temp = zim.copy(slicer.data);
+		temp[0].shift();
+		temp[0].pop();
+		temp[1].shift();
+		temp[1].pop();				
+		exportText.text = "// use as slices, types parameters in ZIM SlicedBitmap()\n// can also modify and IMPORT into Slicer Types tool\n\n" + JSON.stringify(temp) +", "+ JSON.stringify(slicer.dataTypes);
+		exportPane.show();
+	})
+	new zim.Tile([importButton,exportButton],1,2,0,20,true).siz(null,tile.height).loc(tile.width+4*5+20, 0, holder);
+	that.add(holder, 0, true);
+
+	that.shield = new zim.Rectangle(tile.width+20, tile.height, dark).alp(.7).loc(tile, null, tile.parent);
+
+	Object.defineProperty(that, 'sliceType', {
+		get: function() {						
+			return sliceType;
+		},
+		set: function(value) {
+			sliceType = value;
+			if (types.indexOf(sliceType) < 0) sliceType = "stretch";
+			that.defaultIndex = types.indexOf(sliceType);
+		}
+	});
+
+	if (slicer) slicer.setSlicerTypes(that);
+
+	that.updateData = function(slices, types) {								
+		slices[0].unshift(0);
+		slices[0].push(1);
+		slices[1].unshift(0);
+		slices[1].push(1);		
+		slicer.updateLines(slices);
+		slicer.dataTypes = types;
+	}	
+
+	if (style!==false) zim.styleTransforms(this, DS);
+	this.clone = function() {
+		return that.cloneProps(new zim.SlicerTypes(slicer, titleBar, sliceType, style, this.group, inherit));
+	};
+
+}
+zim.extend(zim.SlicerTypes, zim.Window, ["clone"], "zimWindow", false);	
+//-62.75
+
 /*--
 zim.Dial = function(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, useTicks, innerTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, innerCircle, innerScale, innerColor, inner2Color, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, linear, gap, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, value, useLabels, labelMargin, addZero, currentValue, style, group, inherit);
 
@@ -37071,7 +38658,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (b && currentSelected) {
 				var ti = b.tabInfo;
 				if (ti && zot(ti.wait)) {	
-					// should be rollBackgroundColor but if setting it seems to stick after rolloff
+					// should be rollBackgroundColor but setting it seems to stick after rolloff
 					if (ti.selectedBackgroundColor) b.backgroundColor = that.selected==b?ti.selectedBackgroundColor:ti.backgroundColor					
 					if (ti.selectedColor && b.label) b.color = that.selected==b?ti.selectedColor:ti.color;
 				} 
@@ -40243,8 +41830,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		if (zot(collapseColor)) collapseColor = DS.collapseColor!=null?DS.collapseColor:!zot(titleBarColor)?titleBarColor:zim.grey;
 		if (zot(collapsed)) collapsed=DS.collapsed!=null?DS.collapsed:false;
 					
-		// width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideFactor, slideSnap, slideSnapDamp, interactive, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, resizeBoundary, resizeVisible, continuous, continuous, style, group, inherit
-		this.zimWindow_constructor(width, height, null, backgroundColor, null, DS.borderWidth!=null?DS.borderWidth:2, DS.padding!=null?DS.padding:10, DS.corner!=null?DS.corner:10, null, DS.scrollBarActive!=null?DS.scrollBarActive:true, DS.scrollBarDrag!=null?DS.scrollBarDrag:true, null, null, null, false, null, null, null, null, null, true, null, null, null, null, null, null, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, DS.draggable!=null?DS.draggable:true, null, null, DS.close!=null?DS.close:true, null, null, DS.fullSize!=null?DS.fullSize:false, null, DS.resizeHandle!=null?DS.resizeHandle:false, collapse, collapseColor, collapsed, null, null, style, group, zim.copy(DS));
+		// width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideFactor, slideSnap, slideSnapDamp, interactive, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, resizeBoundary, resizeVisible, continuous, style, group, inherit
+		this.zimWindow_constructor(width, height, null, backgroundColor, null, DS.borderWidth!=null?DS.borderWidth:2, DS.padding!=null?DS.padding:10, DS.corner!=null?DS.corner:10, null, DS.scrollBarActive!=null?DS.scrollBarActive:true, DS.scrollBarDrag!=null?DS.scrollBarDrag:true, null, null, null, false, null, null, null, null, null, true, null, null, null, null, null, null, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, DS.draggable!=null?DS.draggable:true, null, null, DS.close!=null?DS.close:true, null, null, DS.fullSize!=null?DS.fullSize:false, null, DS.resizeHandle!=null?DS.resizeHandle:false, collapse, collapseColor, collapsed, null, null, null, null, style, group, zim.copy(DS));
 		this.type = "EmojiPicker";
 		var that = this;
 		
@@ -45287,7 +46874,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		if (accept) uploadTag.setAttribute("accept", accept);
 		uploadTag.hidden = true;
 		uploadTag.zimDisplay = uploadTag.style.display || "inline-block";
-		uploadTag.style.cssText = "border:thin solid grey; z-index:2; width:" + width + "px; height:" + height + "px; overflow:hidden; outline:none;"
+		uploadTag.style.cssText = "border:thin solid grey; z-index:2; width:" + 0 + "px; height:" + 0 + "px; overflow:hidden; outline:none;"
 								+ "position:absolute; left:0px; top:0px; display:none; cursor:pointer; opacity: 0; filter: alpha(opacity=0);";
 
 		this.addEventListener('mousedown', function() { // added for zim.Accessibility
@@ -45677,10 +47264,12 @@ only if the TextArea is directly in the Pane or the page (not nested in further
 
 NOTE: rotation and skewing of TextArea is not supported - although might work with custom CSS transformations
 
-NOTE: because of these limitations, consider the TextEditor as a solution.
+NOTE: because of these limitations, consider the TextEditor or TextInput as a solution.
 The TextEditor allows you to use a Label which is a proper part of the Canvas 
 and then change the label with a pop-up editor that includes a TextArea.
 SEE: https://zimjs.com/cat/texteditor.html
+TextInput is a one line input text field that is actually part of the canvas 
+SEE https://zimjs.com/explore/textinput.html
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
@@ -45878,19 +47467,48 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		}
 		var lastText = that.text;
 		var sYO = that.y;
+		var lastHeight;
+		that.taBlur = function() {
+			if (WW.M && keyboardShift) {			
+				if (that.stage) {
+					if (that.re) that.stage.frame.off("resize", that.re);
+					that.stage.y = sYO;
+					textareaTag.blur();
+					that.resize();
+					that.stage.update();
+				}
+			}
+			if (that.stage) frame = that.stage.frame;
+			if (frame.zil) WW.addEventListener("keydown", frame.zil[0]);
+			that.dispatchEvent("blur");
+			if (that.text != lastText) that.dispatchEvent("change");			
+		}
+		function vvp() {
+			if (M && !zot(lastHeight) && WW.visualViewport.height > lastHeight) {
+				that.taBlur();
+				WW.visualViewport.removeEventListener('resize', vvp);
+			}
+			lastHeight = WW.visualViewport.height;
+		}
 		that.taFocus = function() {		
-			lastText = that.text;
+			lastText = that.text;			
 			if (WW.M && keyboardShift) {
 				if (that.re) that.stage.frame.off("resize", that.re);
 				that.re = that.stage.frame.on("resize", function(){
 					if (that.stage && h>that.stage.height/4) {
 						that.stage.y = that.stage.scaleY*(that.stage.height/4-h);
+						that.resize();
 						that.stage.update();
 					}
-				});
+				});				
+				if (WW.visualViewport) {
+					WW.visualViewport.removeEventListener('resize', vvp);
+					WW.visualViewport.addEventListener('resize', vvp);
+				}
 				var h = that.localToGlobal(0,0).y;
 				if (that.stage && h>that.stage.height/4) {
 					that.stage.y = that.stage.scaleY*(that.stage.height/4-h);
+					that.resize();
 					that.stage.update();
 				}
 			}
@@ -45898,19 +47516,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (frame.zil) WW.removeEventListener("keydown", frame.zil[0]);
 			that.dispatchEvent("focus");
 		}
-		that.taBlur = function() {
-			if (WW.M && keyboardShift) {			
-				if (that.stage) {
-					if (that.re) that.stage.frame.off("resize", that.re);
-					that.stage.y = sYO;
-					that.stage.update();
-				}
-			}
-			if (that.stage) frame = that.stage.frame;
-			if (frame.zil) WW.addEventListener("keydown", frame.zil[0]);
-			that.dispatchEvent("blur");
-			if (that.text != lastText) that.dispatchEvent("change");			
-		}
+		
 		textareaTag.addEventListener('input', that.taInput);
 		textareaTag.addEventListener('focus', that.taFocus);
 		textareaTag.addEventListener('blur', that.taBlur);	
@@ -45944,13 +47550,15 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			var displayProps = that.getConcatenatedMatrix().decompose();
 			var point = that.localToGlobal(padding, padding);
 			if (frame.retina) {
-				var sc = zim.browserZoom();					
+				var sc = zim.browserZoom();
 				if (frame.tag) {
 					textarea.x = point.x/pRatio/sc;
 					textarea.y = point.y/pRatio/sc;						
 				} else {
-					textarea.x = frame.x/stage.scaleX + point.x/pRatio/sc;
-					textarea.y = frame.y/stage.scaleY + point.y/pRatio/sc;
+					var shiftX = (stage.x-stage.x/pRatio/sc)/frame.scale;
+					var shiftY = (stage.y-stage.y/pRatio/sc)/frame.scale;
+					textarea.x = frame.x/stage.scaleX + point.x/pRatio/sc - shiftX;
+					textarea.y = frame.y/stage.scaleY + point.y/pRatio/sc - shiftY;
 				}			
 				// CreateJS DOMElement is scaling tag as stage scales
 				zim.sca(textarea, displayProps.scaleX/pRatio/stage.scaleX/sc, displayProps.scaleY/pRatio/stage.scaleY/sc);
@@ -48857,7 +50465,7 @@ RETURNS obj for chaining
 	};//-47.95
 
 /*--
-obj.drag = function(boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch)
+obj.drag = function(boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch, dropTargets, dropCopy, dropSnap, dropBack, dropEnd, dropFull, dropHitTest, dropScale, dropWidth, dropHeight)
 
 drag
 zim DisplayObject method
@@ -48868,6 +50476,12 @@ Handles scaled, rotated nested objects.
 Also see draggable property for setting a default drag() and noDrag()
 and to indicate whether a drag has been set.
 
+DROP 
+As if ZIM 017, drop parameters and properties have been added. 
+These allow List items to be dragged and dropped on targets and ZIM Lists
+Also see ZIM List drop parameters
+See https://zimjs.com/017/dropping.html
+
 NOTE: drag() will stop ZIM Swipe() from triggering a swipe event.
 Set the overridNoSwipe parameter of ZIM Swipe() to true to capture swipe events.
 
@@ -48916,6 +50530,18 @@ circle.on("mousedown", ()=>{
 circle.on("pressup", ()=>{circle.dragBoundary()});
 END EXAMPLE
 
+EXAMPLE 
+// Dropping on targets
+// see also https://zimjs.com/017/dropping.html
+const rectangles = new Tile(new Rectangle(130,130).reg(CENTER),3,1,50,0).pos(0,100,CENTER,CENTER);
+new Tile(new Circle(50,series(red,blue,pink)),3,1,70,0).pos(0,-100,CENTER,CENTER).drag({
+	dropTargets:rectangles.items,
+	// dropEnd:false,
+	// dropCopy:true,
+	// dropBack:false // and more!
+});
+END EXAMPLE
+
 PARAMETERS supports DUO - parameters or single object with properties below
 boundary - (default null) a ZIM Boundary object for the drag boundary
  	or a ZIM DisplayObject including stage
@@ -48967,6 +50593,21 @@ immediateBoundary - (default false) set to true to add bounds immediately when d
  	this is normally set to false for a .05 second delay to allow objects to be added to Container before setting bounds.
 singleTouch - (default false) set to true to let only one touch operate the drag 
 	also see Frame() singleTouch setting - but setting on drag will only affect that object's drag
+dropTargets - an object or an array of objects that can receive a drop
+	this can be a List or a Container or a single object	
+	if it is a list see the dropListProps as well to set reticle properties and scroll speed
+dropCopy - (default false) make a copy of the object as it is being dragged
+dropSnap - (default true) snap to the target object
+dropBack - (default true) go back to start if not dropped on a target
+dropEnd - (default true) once dropped on a target a noMouse() is set on the object
+dropFull - (default true) do not drop on a full target
+	note - if the object is removed from the target then a drop can occur again on that target 
+dropHitTest - (default "bounds") can also be "reg", "circles", "circle", "rect" - see ZIM HitTests
+dropScale - set a scale for the dropped object
+dropWidth - set a width for the dropped object - overrides scale
+	height will keep aspect ratio unless dropHeight is provided
+dropHeight - set a height for the dropped object - overrides scale
+	width will keep aspect ratio unless dropWidth is provided 
 
 note: will not update stage if OPTIMIZE is set to true
 unless Ticker.update is set to true or you run Ticker.always(stage) see zim.Ticker
@@ -48974,6 +50615,19 @@ unless Ticker.update is set to true or you run Ticker.always(stage) see zim.Tick
 PROPERTIES 
 adds a dragPaused property to get or set the pause of the drag - which allows setting to be kept
 	see also noDrag() where settings will be removed
+*** if dropTargets is set then drag() adds the following properties to the dragged object:
+dropTarget - on pressup, what target the object is dropped on (or null)
+dropList - which List if any a dropped object has
+dropListProps - to be used if planning on dropping object into a List 
+	The dropListProps have the following default values 
+	{
+		color:white,
+		thickness:1,
+		alpha:1,
+		speed:5
+	}
+	These can be changed to set List reticle properties and drop speed 
+	See the ZIM List drop parameters for more information	
 
 EVENTS
 Adds a "slidestart" event to the drag object that is dispatched when the object starts sliding - if slide is true
@@ -48981,8 +50635,8 @@ Adds a "slidestop" event to the drag object that is dispatched when the object c
 
 RETURNS obj for chaining
 --*///+31
-	zim.drag = function(obj, boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch) {
-		var sig = "obj, boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch";
+	zim.drag = function(obj, boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch, dropTargets, dropCopy, dropSnap, dropBack, dropEnd, dropFull, dropHitTest, dropScale, dropWidth, dropHeight) {
+		var sig = "obj, boundary, axis, overCursor, dragCursor, all, swipe, localBoundary, onTop, surround, slide, slideFactor, slideSnap, slideSnapDamp, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch, dropTargets, dropCopy, dropSnap, dropBack, dropEnd, dropFull, dropHitTest, dropScale, dropWidth, dropHeight";
 		var duo; if (duo = zob(zim.drag, arguments, sig)) return duo;
 		if (obj.type=="AC"&&WW.zdf) {WW.zdf.ac("drag", arguments); return obj;}
 		z_d("31");
@@ -49033,7 +50687,20 @@ RETURNS obj for chaining
 		if (zot(startBounds)) startBounds = true;
 		if (zot(boundary) && !zot(rect)) boundary = rect;
 		if (zot(singleTouch)) singleTouch = false;
-		
+
+		if (dropTargets) {
+			slide = false;
+			obj.dropTargets = dropTargets;
+		}
+		if (zot(dropBack)) dropBack = true;
+		if (zot(dropSnap)) dropSnap = true;
+		if (zot(dropEnd)) dropEnd = true;
+		if (zot(dropFull)) dropFull = true;
+		var hitTypes = ["reg", "circles", "rect", "circle"];
+		if (dropHitTest) dropHitTest.toLowerCase();
+		if (!hitTypes.includes(dropHitTest)) dropHitTest = null;
+		if (zot(dropHitTest)) dropHitTest = "bounds";
+				
 		obj.dragPaused = false;
 		
 		if (slide) {
@@ -49174,6 +50841,7 @@ RETURNS obj for chaining
 		var stage;
 		obj.pointers = {};
 		var stCheck = false;
+		var dropListCheck;
 		obj.zimDown = obj.on("mousedown", function(e) {			
 			if (!obj.stage || obj.dragPaused) return;
 			if (singleTouch && stCheck) {
@@ -49185,6 +50853,7 @@ RETURNS obj for chaining
 			// obj.zimMove = obj.on("pressmove", obj.zimMove);	// for some reason causing squiggle drag problems
 			
 			stCheck = true;
+			dropListCheck = false;
 			stage = obj.stage;
 			if (!obj.zmu) obj.zmu = stage.frame.on("mouseupplus", function(e) {	
 				if (obj.downCheck) {
@@ -49192,6 +50861,7 @@ RETURNS obj for chaining
 					doUp(e, true); // true for cancel slide						
 				}					
 			});		
+			
 			obj.dragMouseX = Math.round(e.stageX/zim.scaX)+stage.x;
 			obj.dragMouseY = Math.round(e.stageY/zim.scaY)+stage.y;
 			var id = "id"+Math.abs(e.pointerID+1);
@@ -49201,6 +50871,8 @@ RETURNS obj for chaining
 			// bring stageX and stageY into the parent's frame of reference
 			// could use e.localX and e.localY but might be dragging container or contents
 			dragObject = (currentTarget)?e.currentTarget:e.target;
+			
+
 			if (obj.zimBoundary && !dragObject.getBounds()) {zogy("zim.drag() - drag object needs bounds set"); return;}
 			obj.downCheck = true;
 			obj.stage.mouseMoveOutside = true;
@@ -49268,6 +50940,44 @@ RETURNS obj for chaining
 				moveCheck = false;
 			}
 
+			// DROP - added ZIM 017 Patch
+			if (zot(dragObject.dropStartS)) {				
+				dragObject.dropStartX = dragObject.x;
+				dragObject.dropStartY = dragObject.y;
+				dragObject.dropStartS = dragObject.scale;
+			}			
+			if (obj.dropTargets && dropCopy && !dragObject.dropClone) {
+				if (dragObject.clone) {
+					dragObject.dropCopy = dragObject.clone(true).addTo(dragObject.parent, dragObject.parent.getChildIndex(dragObject));
+					dragObject.dropCopy.dropClone = true;
+					dragObject.dropCopy.dropStartX = dragObject.dropStartX;
+					dragObject.dropCopy.dropStartY = dragObject.dropStartY;
+					dragObject.dropCopy.dropStartS = dragObject.dropStartS;					
+					dragObject.dropCopy.noMouse();
+				}
+			} 
+			// HANDLE DROP ON LIST 
+			if (obj.dropTargets) {
+				var notList = true;
+				zim.loop(obj.dropTargets, function(target){
+					if (target.type == "List") {
+						if (!obj.dropListProps) obj.dropListProps = {
+							color:white,
+							thickness:1,
+							alpha:1,
+							speed:5
+						};		
+						if (!target.dropReticle) {								
+							target.dropReticle = new zim.Rectangle(20,20,clear,obj.dropListProps.color,obj.dropListProps.thickness).reg(CENTER).rot(45).alp(obj.dropListProps.alpha);
+							target.dropReticleIndex = null;
+							target.zgb = target.boundsToGlobal();
+							target.zgs = target.getConcatenatedDisplayProps().matrix.decompose().scaleX/stage.scaleX;	
+						}					
+						notList = false;	
+					}
+				});
+				dropListCheck = !notList;
+			}
 		}, true);
 
 		obj.zimMove = obj.on("pressmove", function(e) {
@@ -49289,8 +50999,18 @@ RETURNS obj for chaining
 			if (dragObject.ZIMoutlineShape) dragObject.outline();
 			if (obj.type == "Pen" && !moveCheck && obj.drawing) moveCheck = true;
 			else if (obj.type == "Tag" || obj.type == "TextArea" || obj.type == "Loader") obj.resize();
+			
+			// DROP ON LIST - added ZIM 017
+			if (dropListCheck) {
+				// scroll if ghost is at edges of scrollable list				
+				var ghost = dragObject;
+				var checkItem;
+				var dropScrollSpeed = obj.dropListProps.speed;
+				zim.List.doDropOver(dropTargets, ghost, checkItem, dropScrollSpeed);				
+			}
 		}, true);
 
+
 		// obj.off("pressmove",obj.zimMove);  // for some reason causing squiggle drag problems
 
 		function positionObject(o, x, y) {
@@ -49369,6 +51089,7 @@ RETURNS obj for chaining
 			}
 		}
 
+
 		obj.zimPosition = positionObject;
 
 		obj.zimUp = obj.on("pressup", function(e){doUp(e);}, true);
@@ -49456,9 +51177,96 @@ RETURNS obj for chaining
 					// if (moveCheck) obj.stopCheck(); 
 				}
 			}
+
+			// DROP - added ZIM 017 patch
+
+			if (obj.dropTargets) {
+				if (!Array.isArray(obj.dropTargets)) obj.dropTargets = [obj.dropTargets];
+				// watch - could drop from one target to another
+				if (dragObject.droppedTarget) {
+					dragObject.droppedTarget.dropFull = false;
+					dragObject.droppedTarget = null;
+				}
+				var miss = zim.loop(obj.dropTargets, function(target) {
+
+					if (target.type == "List") {
+						if (target.scrollInt) target.scrollInt.clear();
+						if (!zot(target.dropReticleIndex)) {
+							target.dropReticle.removeFrom();												
+							var placeObject = dragObject;
+							if (dropCopy) {
+								// need to do the swap on one of these		
+								if (dropCopy && dragObject.dropCopy) {
+									placeObject = dragObject.dropCopy;
+									swapProperties("x", dragObject, placeObject);
+									swapProperties("y", dragObject, placeObject);
+								}
+							}								
+							if (dropScale) placeObject.sca(dropScale);
+							if (dropWidth || dropHeight) placeObject.siz(dropWidth, dropHeight);
+							if (dropEnd) placeObject.noMouse();
+							else placeObject.mouse();	
+							placeObject.droppedTarget = target;		
+							target.addAt(placeObject, target.dropReticleIndex);								
+			
+							target.dropItem = dragObject;
+							target.dropList = target;
+							target.dropNewIndex = target.dropReticleIndex;
+							target.dropReticleIndex = null;		
+							return false					 
+						}
+						return;
+					}
+
+					if (dragObject["hitTest"+String(dropHitTest).charAt(0).toUpperCase() + String(dropHitTest).slice(1)](target)) {
+						if (!dropFull || !target.dropFull) {
+							var placeObject = dragObject;
+							if (dropCopy && dragObject.dropCopy) {
+								placeObject = dragObject.dropCopy;
+								swapProperties("x", dragObject, placeObject);
+								swapProperties("y", dragObject, placeObject);
+							}
+							// clone gets all these things
+							if (dropSnap) placeObject.loc(target);
+							if (dropScale) placeObject.sca(dropScale);
+							if (dropWidth || dropHeight) placeObject.siz(dropWidth, dropHeight);
+							if (dropEnd) placeObject.noMouse();
+							else placeObject.mouse();						
+							if (dropFull) target.dropFull = true;	
+							placeObject.droppedTarget = target;													
+							return false;
+						}
+					} 
+				});
+				if (miss) {				
+					if (dropBack) {
+						dragObject.animate({
+							props:{x:dragObject.dropStartX, y:dragObject.dropStartY, scale:dragObject.dropStartS}, 
+							time:.2, 
+							timeUnit:"s",
+							call:function(target) {
+								if (dropCopy) {
+									if (target.dropCopy) target.dropCopy.dispose();
+									else target.dispose();
+								}
+							}
+						});
+					} else {
+						dragObject.sca(dragObject.dropStartS);	
+						if (dropCopy && dragObject.dropCopy) {
+							swapProperties("x", dragObject, dragObject.dropCopy);
+							swapProperties("y", dragObject, dragObject.dropCopy);
+							dragObject.dropCopy.mouse();
+						}
+					}
+					
+				}
+			}
 			if (obj.stage) obj.stage.update();
 		}
 
+
+
 		// the bounds check for registration inside the bounds
 		// or if surround is set for the whole object staying outside the bounds
 		function checkBounds(o, x, y) {
@@ -50249,7 +52057,7 @@ RETURNS obj for chaining
 	};//-33.18
 
 /*--
-obj.transform = function(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container)
+obj.transform = function(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container, minScaleX, maxScaleX, minScaleY, maxScaleY, sliceX, sliceY)
 
 transform
 zim DisplayObject method
@@ -50342,6 +52150,12 @@ container (default stage) - set to a container to keep transforms within that co
 	normally leave as default so transforms will stay above other objects
 	but on occasion such as when using with ZIM TextureActives, a container is required
 	as the container is cached and used on a texture
+minScaleX (default null) - set a min scale in the x for the transform
+maxScaleX (default null) - set a max scale in the x for the transform 
+minScaleY (default null) - set a min scale in the y for the transform 
+maxScaleY (default null) - set a max scale in the y for the transform 
+sliceX (default true) - this is for transforming ScaledBitmap objects in x - to use slicesWidth on edges.  Set to false to use width.
+sliceY (default true) - this is for transforming ScaledBitmap objects in y - to use slicesWidth on edges.  Set to false to use width. 
 
 PROPERTIES
 toggled - adds a read-only Boolean to the object that is true if controls are showing otherwise false
@@ -50401,8 +52215,8 @@ If TransformManager() is used there are more events available such as "persistse
 
 RETURNS obj for chaining
 --*///+33.5
-zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container) {
-	var sig = "obj, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container";
+zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container, minScaleX, maxScaleX, minScaleY, maxScaleY, sliceX, sliceY) {
+	var sig = "obj, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container, minScaleX, maxScaleX, minScaleY, maxScaleY, sliceX, sliceY";
 	var duo; if (duo = zob(zim.transform, arguments, sig)) return duo;
 	if (obj.type=="AC"&&WW.zdf) {WW.zdf.ac("transform", arguments); return obj;}
 	z_d("33.5");
@@ -50448,6 +52262,14 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 	if (zot(events)) events = false;	
 	if (obj.type == "Tag" || obj.type == "TextArea" || obj.type == "Loader") events = true;
 
+	if (zot(minScaleX)) minScaleX = -Number.MAX_VALUE;	
+	if (zot(maxScaleX)) maxScaleX = Number.MAX_VALUE;	
+	if (zot(minScaleY)) minScaleY = -Number.MAX_VALUE;	
+	if (zot(maxScaleY)) maxScaleY = Number.MAX_VALUE;	
+
+	if (zot(sliceX)) sliceX = true;	
+	if (zot(sliceY)) sliceY = true;	
+
 	obj.zimMCO = obj.mouseChildren;
 	obj.mouseChildren = false;
 	var con = obj.getConcatenatedMatrix().decompose();
@@ -50737,6 +52559,10 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 		if (frame.ctrlKey && obj.transformControls.visible) {
 			obj.scaleX = 1;
 			obj.scaleY = 1;
+			if (obj.type=="SlicedBitmap") {
+				if (sliceX) obj.slicesScaleX = 1;
+				if (sliceY) obj.slicesScaleY = 1;
+			}
 			obj.rotation = 0;
 			// if (customCursors) moveCursor.rot(obj.rotation);
 			makeControls();
@@ -50793,6 +52619,8 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 	var startY; // target start y
 	var startSX;
 	var startSY;
+	var startSSX; // for SlicedBitmap
+	var startSSY;
 	var startR; // rotation of object to start
 	var startAngle; // angle of mouse down to x axis
 	var diffX;
@@ -50915,6 +52743,10 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 		objStartY = obj.y;
 		startSX = obj.scaleX;
 		startSY = obj.scaleY;
+		if (obj.type=="SlicedBitmap") {
+			startSSX = obj.slicesScaleX;
+			startSSY = obj.slicesScaleY;
+		}
 		var pp = container.globalToLocal(e.stageX/zim.scaX, e.stageY/zim.scaY);
 		if (e.target.controlType == "rotate") {
 			rotateCheck = true;
@@ -50967,11 +52799,13 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 		}
 		
 		if (e.target.controlType == "corner") {
-			obj.scaleX = scale * startSX;
-			obj.scaleY = scale * startSY;
+			obj.scaleX = zim.constrain(scale * startSX, minScaleX, maxScaleX);
+			obj.scaleY = zim.constrain(scale * startSY, minScaleY, maxScaleY);
 		} else {
-			obj.scaleX = (e.target.cu == "e-resize") ? scale * startSX : startSX;
-			obj.scaleY = (e.target.cu == "n-resize") ? scale * startSY : startSY;
+			if (obj.type != "SlicedBitmap" || !sliceX) obj.scaleX = zim.constrain((e.target.cu == "e-resize") ? scale * startSX : startSX, minScaleX, maxScaleX);
+			else obj.ssX = zim.constrain((e.target.cu == "e-resize") ? scale * startSSX : startSSX, minScaleX, maxScaleX);
+			if (obj.type != "SlicedBitmap" || !sliceY) obj.scaleY = zim.constrain((e.target.cu == "n-resize") ? scale * startSY : startSY, minScaleY, maxScaleY);
+			else obj.ssY = zim.constrain((e.target.cu == "n-resize") ? scale * startSSY : startSSY, minScaleY, maxScaleY);			
 		}			
 		makeControls();
 		var pp = container.globalToLocal(e.stageX/zim.scaX, e.stageY/zim.scaY);
@@ -51046,7 +52880,12 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 			}
 			if (cursors) tCheck = squares.hitTestPoint(pp.x, pp.y);
 		} else if (type == "side") {
-			if (obj.scaleX != startProperties.scaleX || obj.scaleY != startProperties.scaleY) {
+			if (
+				obj.scaleX != startProperties.scaleX || 
+				obj.scaleY != startProperties.scaleY || 
+				(sliceX && obj.type=="SlicedBitmap" && obj.slicesScaleX != startProperties.slicesScaleX) ||
+				(sliceY && obj.type=="SlicedBitmap" && obj.slicesScaleY != startProperties.slicesScaleY)
+			) {
 				transformEvent = new createjs.Event("transformed");
 				transformEvent.transformType = "stretch";
 			}
@@ -51276,6 +53115,10 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 
 	function getStartProperies() {
 		startProperties = {x:obj.x, y:obj.y, rotation:obj.rotation, regX:obj.regX, regY:obj.regY, scaleX:obj.scaleX, scaleY:obj.scaleY};
+		if (obj.type=="SlicedBitmap") {
+			if (sliceX) startProperties.slicesScaleX = obj.slicesScaleX;
+			if (sliceY) startProperties.slicesScaleY = obj.slicesScaleY;
+		}
 	}
 	var startProperties;
 	getStartProperies();
@@ -51413,6 +53256,10 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 				regY:obj.regY,
 				controls:obj.transformControls.visible
 			};
+			if (obj.type=="SlicedBitmap") {
+				if (sliceX) data.slicesScaleX = obj.slicesScaleX;
+				if (sliceY) data.slicesScaleY = obj.slicesScaleY;
+			}
 			return toJSON ? JSON.stringify(data) : data;
 		},
 		setData:function(data, fromJSON) {
@@ -51473,7 +53320,7 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg
 			makeControls();
 			drawDragger();
 			setRotators();
-			if (visible) obj.transformControls.show(); // bring on top
+			if (obj.transformControls.visible) obj.transformControls.show(); // bring on top
 			if (dispatch) {
 				var transformEvent = new createjs.Event("transformed");
 				transformEvent.pressup = true;
@@ -53892,6 +55739,11 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 			}
 			sequenceTarget = target;
 			target = newTarget;
+			sequenceTarget.animating = true;
+		}
+		function sequenceDone() {
+			sequenceTarget.animating = false;
+			if (call) call(params||sequenceTarget);
 		}
 
 		// PREPARE ZIK RANDOM VALUES PASSED IN AS ARRAY OR RAND OBJECT {min, max, integer, negative}
@@ -53935,8 +55787,10 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 					rrr = rate + (tar.ratio?tar.ratio:0);
 				}
 				var seqTime = i*sequence;
-				if (i==0 && sequence!=0) seqTime = timeType=="s"?.02:20; // patched in 10.7.0 and 10.7.1				
-				zim.animate(tar, tar.zimObj, time, ease, (i==target.length-1?call:null), (i==target.length-1?params:null), wait, waitedCall, waitedParams, null, null, null, null, null, null, null, loopPick, null, null, null, null, null, null, rewindTime, rewindEase, startCall, startParams, animateCall, animateParams, null, sequenceCall, sequenceParams, null, null, ticker, zim.copy(cjsProps), css, protect, override, null, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, seqTime, rrr, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall, pathDamp); // do not send from!
+				if (i==0 && sequence!=0) seqTime = timeType=="s"?.02:20; // patched in 10.7.0 and 10.7.1
+								
+				// zim.animate(tar, tar.zimObj, time, ease, (i==target.length-1?call:null), (i==target.length-1?params:null)
+				zim.animate(tar, tar.zimObj, time, ease, (i==target.length-1?sequenceDone:null), null, wait, waitedCall, waitedParams, null, null, null, null, null, null, null, loopPick, null, null, null, null, null, null, rewindTime, rewindEase, startCall, startParams, animateCall, animateParams, null, sequenceCall, sequenceParams, null, null, ticker, zim.copy(cjsProps), css, protect, override, null, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, seqTime, rrr, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall, pathDamp); // do not send from!
 	
 			}
 			return sequenceTarget;
@@ -54348,7 +56202,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 					if (typeof target.zimLastObj[o] == "string" && o != "transform") {
 						target.zimLastObj[o] = target[o] + Number(target.zimLastObj[o].replace(/\s/g,""));
 					}
-					setValue(target, o, target.zimLastObj[o]);
+					setValue(target, o, target.zimLastObj[o]);					
 				});
 				// zim.loop(obj, function (o) {
 				// 	if (typeof obj[o] == "string") {
@@ -54473,6 +56327,22 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 			}
 		}
 
+		
+		// moved these to before protect (to catch scale convert) - ZIM Cat
+		// PREPARE ZIK RANDOM VALUES PASSED IN AS ARRAY OR RAND OBJECT {min, max, integer, negative}
+		// moved to before color code - ZIM 017
+		var savedPicks = {};
+		for (i in obj) {
+			// zogb(i)
+			if (extraTypes.indexOf(i) >= 0) continue; // skip for extras
+			savedPicks[i] = zim.copy(obj[i]); // store pre picked to use if loopPick is true
+			obj[i] = zim.Pick.choose(obj[i], null, target);
+		}
+		if (!zot(obj.scale)) {
+			obj.scaleX = obj.scaleY = zim.Pick.choose(obj.scale, null, target);
+			delete obj.scale;
+		}
+
 		// convert color tween - added protect for colorRange in ZIM 016
 		var colorBusy = target.zimBusy && target.zimBusy.colorRange; 
 		if (!colorBusy) {
@@ -54525,19 +56395,6 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 		}
 
 
-		// moved these to before protect (to catch scale convert) - ZIM Cat
-		// PREPARE ZIK RANDOM VALUES PASSED IN AS ARRAY OR RAND OBJECT {min, max, integer, negative}
-		var savedPicks = {};
-		for (i in obj) {
-			// zogb(i)
-			if (extraTypes.indexOf(i) >= 0) continue; // skip for extras
-			savedPicks[i] = zim.copy(obj[i]); // store pre picked to use if loopPick is true
-			obj[i] = zim.Pick.choose(obj[i], null, target);
-		}
-		if (!zot(obj.scale)) {
-			obj.scaleX = obj.scaleY = zim.Pick.choose(obj.scale, null, target);
-			delete obj.scale;
-		}
 
 
 		// PROTECT LOOPS AND REWINDS WITH BUSY
@@ -55968,18 +57825,24 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 						return;
 					} else {
 						if (rewind) {
-							if (target.set) target.set(startObj);
+							if (target.set) target.set(startObj);							
 						} else {							
 							if (target.set) target.set(obj);
 						}
 					}
-				} else {
+				} else {									
 					if (wait3>0) target.waiting = true;
 					doLoopWaitCall();
 					return;
 				}
-			}
-
+			} else {
+				if (rewind) {
+					if (target.set) target.set(startObj);							
+				} else {							
+					if (target.set) target.set(obj);
+				}
+			}	
+			
 			// ZIM 015 - this was the first thing we tried to scrub a series with percentComplete 
 			// there were lots of other things too to make it work.
 			// Leaving the seriesTween test in here... but probably not doing much			
@@ -56002,7 +57865,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 		
 		function getStart() {
 			// for rewind, we need to know the start value
-			// which could be modified by the set parameter
+			// which could be modified by the set parameter			
 			for (var i in obj) {
 				if (css && target.style) {
 					if (!zot(set[i]) && !from) {
@@ -56013,7 +57876,6 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 					}
 				} else {
 					if (!zot(set[i]) && !from) {
-						// !!!!!! maybe fix for dot plugin
 						startObj[i] = set[i];
 					} else {
 						if (i.substr(0,1) == ".") {
@@ -60477,13 +62339,20 @@ EXAMPLE
 new Arrow({type:"thick"}).pos(30,30,RIGHT,BOTTOM).tap(next);
 END EXAMPLE
 
-EXAMPLE
-// Assuming a pages variable that points to a ZIM Pages object
-// These will go through the pages in order 
-// and default to remove themselves if not needed at start or end
-
-new Arrow(blue, green, pages, RIGHT).pos(30,30,RIGHT,BOTTOM);
-new Arrow(blue, green, pages, LEFT).pos(30,30,LEFT,BOTTOM);
+EXAMPLE 
+const page2 = new Page(W,H,orange);
+const page3 = new Page(W,H,yellow);
+const pages = new Pages([page1,page2,page3], "slide").addTo();
+
+const left = new Arrow({
+	pages:pages,
+	direction:LEFT
+}).rot(180).pos(50,50,LEFT,BOTTOM);
+    
+const right = new Arrow({
+	pages:pages,
+	direction:RIGHT
+}).pos(50,50,RIGHT,BOTTOM);
 END EXAMPLE
 
 PARAMETERS supports DUO - parameters or single object with properties below
@@ -61946,10 +63815,13 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e
 			return that;
 		};
 		this.remove = function(obj) {
-			if (!Array.isArray(obj)) obj = [obj];
-			zim.loop(obj, function(o) {
-				if (o && o.removeFrom) o.removeFrom();
-			}, true);
+			if (zot(obj)) that.removeAllChildren();
+			else {
+				if (!Array.isArray(obj)) obj = [obj];
+				zim.loop(obj, function(o) {
+					if (o && o.removeFrom) o.removeFrom();
+				}, true);
+			}
 			that.resize();
 			return that;
 		};
@@ -62823,7 +64695,7 @@ current2DCols ** - read only array the current order of columns each containing
 tileNum - this property is added to each object in the tile to give its number in the tile
 tileCol - this property is added to each object in the tile to give its column number in the tile
 tileRow - this property is added to each object in the tile to give its row number in the tile
-backgrounds - an array of ZIM Rectangle objects set by the backdroundColor parameter
+backgrounds - an array of ZIM Rectangle objects set by the backgroundColor parameter
 backings - an array of DisplayObjects set by the backing parameter
 backdrop - a ZIM Rectangle set by the backdropColor parameter 
 mat - a DisplayObject set by the mat parameter
@@ -70369,32 +72241,35 @@ new MotionController({
 END EXAMPLE
 
 EXAMPLE 
-const background = new Pic("background.png").addTo(); // assuming loaded in Frame
-const ball = new Circle().centerReg();
-const scroller = new Scroller(background); 
-const accelerator = new Accelerator(scroller);
-
-// control speed of Accelerator with MotionController
-new MotionController({
-	target:accelerator,
-	type:"mousemove", // or "pressmove"
-	axis:HORIZONTAL,
-	// the Scroller makes two backings - backing1 and backing2
-	// allow pressing on both backings and ball to control scroller
-	mousedownIncludes:[scroller.backing1, scroller.backing2, ball],
-	speed:30,            
-	minPercentSpeed:-1000,
-	maxPercentSpeed:1000,
-	boundary:new Boundary(0,0,W,0) // setting a boundary and speed will balance the control
-});
+F.loadAssets(["beach02.jpg", "playbeachball.png"], "https://zimjs.org/assets/"); // or load in Frame()
+F.on("complete", ()=>{
+	const background = new Pic("beach02.jpg").scaleTo().center();
+	const ball = new Pic("playbeachball.png").siz(100).centerReg();
+	const scroller = new Scroller(background); 
+	const accelerator = new Accelerator(scroller);
+
+	// control speed of Accelerator with MotionController
+	new MotionController({
+		target:accelerator,
+		type:"mousemove", // or "pressmove"
+		axis:HORIZONTAL,
+		// the Scroller makes two backings - backing1 and backing2
+		// allow pressing on both backings and ball to control scroller
+		mousedownIncludes:[scroller.backing1, scroller.backing2, ball],
+		speed:30,            
+		minPercentSpeed:-1000,
+		maxPercentSpeed:1000,
+		boundary:new Boundary(0,0,W,0) // setting a boundary and speed will balance the control
+	});
 
-// control position of ball with MotionController
-new MotionController({
-	target:ball,
-	type:"mousemove",
-	// allow press on Scroller backings
-	mousedownIncludes:[scroller.backing1, scroller.backing2],
-	speed:10            
+	// control position of ball with MotionController
+	new MotionController({
+		target:ball,
+		type:"mousemove",
+		// allow press on Scroller backings
+		mousedownIncludes:[scroller.backing1, scroller.backing2],
+		speed:10            
+	});
 });
 END EXAMPLE
 
@@ -73093,6 +74968,7 @@ veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE v
 
 		blurX = zik(blurX); // inherits these properties
 		blurY = zik(blurY);
+		if (blurX === 0 && blurY === 0) blurX = 1;
 		quality = zik(quality);
 
 		color = zik(color); // will convert after setting color getter setter
@@ -75998,19 +77874,18 @@ and animate and swap the backgrounds when needed.
 
 NOTE: A scroller can be added to a Accelerator object
 this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
-See https://zimjs.com/zide/
-See https://zimjs.com/explore/sidescroller.html (with keys)
+See https://zimjs.com/zide/ - full scene
+See https://zimjs.com/zapp/E_EPRSP - Flinstones
+See https://zimjs.com/zapp/Z_6EEB5 - beach
+See https://zimjs.com/zapp/Z_ZCDQN - spaceguy
+See https://zimjs.com/zapp/Z_UC7DN - keyboard
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
-const one = new Rectangle(1200, 400, red);
+const one = new Rectangle(1100, 400, red).center();
 F.makeCircles().center(one);
-S.addChild(one);
-
-const scroller = new Scroller(one);
-
-S.update();
+const scroller = new Scroller(one,20);
 END EXAMPLE
 
 PARAMETERS
@@ -83519,7 +85394,6 @@ zim.Frame = function(scaling, width, height, color, outerColor, ready, assets, p
 			canvas.releasePointerCapture(e.pointerId);
 			that.dispatchEvent(e);
 		});
-
 		canvas.addEventListener("pointermove", function(e) {
 			that.dispatchEvent(e);
 		});
@@ -83547,10 +85421,10 @@ zim.Frame = function(scaling, width, height, color, outerColor, ready, assets, p
 		}
 		WW.removeEventListener("mousedown", leftEvent, true);
 		WW.removeEventListener("mousemove", leftEvent, true);
-		WW.removeEventListener("pointerup", leftEvent);			
+		WW.removeEventListener("mouseup", leftEvent);			
 		WW.addEventListener("mousedown", leftEvent, true);
 		WW.addEventListener("mousemove", leftEvent, true); // tell actual mousemove there was a mouseup
-		WW.addEventListener("pointerup", leftEvent); // give actual mouseup a chance to act
+		WW.addEventListener("mouseup", leftEvent); // give actual mouseup a chance to act
 	}		
 
 	function makeStage() {
@@ -88119,9 +89993,9 @@ function zimify(obj, a, b, c, d, list) {
 		dragRect:function(boundary) {
 			return zim.dragBoundary(this, boundary);
 		},
-		transform:function(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container) {
+		transform:function(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container, minScaleX, maxScaleX, minScaleY, maxScaleY, sliceX, sliceY) {
 			if (isDUO(arguments)) {arguments[0].obj = this; return zim.transform(arguments[0]);}
-			else {return zim.transform(this, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container);}
+			else {return zim.transform(this, move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame, container, minScaleX, maxScaleX, minScaleY, maxScaleY, sliceX, sliceY);}
 		},
 		setSwipe:function(swipe) {
 			return zim.setSwipe(this, swipe);
@@ -93428,16 +95302,16 @@ for (z_i = 0; z_i < globalFunctions.length; z_i++) {
 		["RAD", zim.RAD],
 		["PHI", zim.PHI],
 		["IGNORE", zim.ignore]
-	  ];
-	  
-	  for (z_i = 0; z_i < globalsConstants.length; z_i++) {
+	];
+
+	for (z_i = 0; z_i < globalsConstants.length; z_i++) {
 		var pair = globalsConstants[z_i];  
 		WW[pair[0]] = pair[1];
-	  }
-	  
-	  for (z_i = 0; z_i < zim.colors.length; z_i++) {
+	}
+
+	for (z_i = 0; z_i < zim.colors.length; z_i++) {
 		WW[zim.colors[z_i]] = zim.colorsHex[z_i];
-	  }
+	}
 
 
 WW.zim = zim;
@@ -93541,6 +95415,7 @@ export let StageGL = zim.StageGL;
 export let Container = zim.Container;
 export let Shape = zim.Shape;
 export let Bitmap = zim.Bitmap;
+export let SlicedBitmap = zim.SlicedBitmap;
 export let Sprite = zim.Sprite;
 export let MovieClip = zim.MovieClip;
 export let SVGContainer = zim.SVGContainer;
@@ -93585,6 +95460,8 @@ export let List = zim.List;
 export let Stepper = zim.Stepper;
 export let Slider = zim.Slider;
 export let Selector = zim.Selector;
+export let Slicer = zim.Slicer;
+export let SlicerTypes = zim.SlicerTypes;
 export let Dial = zim.Dial;
 export let Tabs = zim.Tabs;
 export let Pad = zim.Pad;