zimjs 16.2.4 → 16.2.6

package/package.json

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

package/src/zim.js

@@ -3458,8 +3458,8 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 EXAMPLE
 const blob = new Blob().center();
 const points = blob.segmentPoints;
-S.on("stagemousedown", e=>{
-	const point = blob.globalToLocal(e.stageX, e.stageY)
+S.on("stagemousedown", ()=>{
+	const point = blob.globalToLocal(F.mouseX, F.mouseY)
 	zog(closestPointAlongCurve({x:point.x, y:point.y}, points))
 	// gives index of point on curve before mouse location
 });
@@ -9237,14 +9237,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		recursiveDispose(this, disposing);
 		return true;
 	};
-	zim.Container.prototype.specialColor = function(command, co, obj) {
+	zim.Container.prototype.specialColor = function(command, co, obj, bounds) {
 		if (co.type=="GradientColor") {
 			if (!zot(co.angle)) {
-				if (!obj.width) {
+				if (!obj.width && zot(bounds)) {
 					command.style = co.colors[0]; 
 					return;
 				} else {
-					var b = obj.getBounds();
+					var b = bounds?bounds:obj.getBounds();
 					co.angle += 360*100000;
 					co.angle %= 360;	
 					
@@ -9297,12 +9297,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			
 		} else if (co.type=="RadialColor") {
 			
-			if (zot(co.x0)) {
+			if (zot(co.x0) && zot(bounds)) {
 				if (!obj.width) {
 					command.style = co.colors[0]; 
 					return;
 				} else {
-					var b = obj.getBounds();
+					var b = bounds?bounds:obj.getBounds();
 					co.r0 = 0;				
 					if (obj.type=="Circle") {					
 						co.x0 = 0;
@@ -13788,7 +13788,8 @@ clone(exact) - makes a copy of the shape
 	For instance, if the object's color is [blue, green]
 	then its clone might be blue or green - which could be different than the original
 	If exact is set to true then the clone will be the color of the original object
-cloneAll(exact, style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
+	Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
+cloneAll(exact, style, group, inherit) - copies shape and any custom content in shape - experimental
 	exact (default false) in theory will copy ZIM VEE values as they are in the original
 	see main class for style, group, inherit parameters
 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
@@ -14062,7 +14063,8 @@ clone(exact) - makes a copy of the shape
 	For instance, if the object's color is [blue, green]
 	then its clone might be blue or green - which could be different than the original
 	If exact is set to true then the clone will be the color of the original object
-cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
+	Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
+cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental
 	exact (default false) in theory will copy ZIM VEE values as they are in the original
 	see main class for style, group, inherit parameters
 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
@@ -14305,12 +14307,13 @@ if one color is used, the current color is used and color1 is the second color i
 cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
 Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
 hasProp(property as String) - returns true if property exists on object else returns false
-clone() - makes a copy of the shape
-exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
+clone(exact) - makes a copy of the shape
+	exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
 	For instance, if the object's color is [blue, green]
 	then its clone might be blue or green - which could be different than the original
 	If exact is set to true then the clone will be the color of the original object
-cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
+	Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
+cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental
 	exact (default false) in theory will copy ZIM VEE values as they are in the original
 	see main class for style, group, inherit parameters
 exact (default false) in theory will copy ZIM VEE values as they are in the original
@@ -16655,7 +16658,7 @@ Note the points property has been split into points and pointObjects (and there
 							draggable:true,
 						});
 						var textArea = that.textArea = new zim.TextArea(Math.min(400, that.stage.width-70), Math.min(400, that.stage.height-70));
-						textArea.centerReg(pane);
+						pane.add(textArea);
 					}
 					that.textArea.text = JSON.stringify(points);					
 					that.pane.show();
@@ -17349,7 +17352,6 @@ Note the points property has been split into points and pointObjects (and there
 			};
 		}
 		function insertPointData(points, controls, ratios, percent, controlType, skipPoint, dataOnly, even) {
-
 			var index = points.length-1; // adjust for squiggle
 			var lastRatio = 0;
 			var currentRatio = 0;
@@ -17392,6 +17394,9 @@ Note the points property has been split into points and pointObjects (and there
 				points[(index+1)%points.length][5] = end.y;
 			}
 			if (controlType) newPoint[8] = controlType;
+			// else newPoint[8] = "straight";
+			// points[index][8] = "straight"
+			// points[index+1][8] = "straight"
 			points.splice(index+1, 0, newPoint);
 			return index+1;
 		}
@@ -18836,7 +18841,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 							draggable:true,
 						});
 						var textArea = that.textArea = new zim.TextArea(Math.min(400, that.stage.width-70), Math.min(400, that.stage.height-70));
-						textArea.centerReg(pane);
+						pane.add(textArea);
 					} 
 					pane.show();		
 					textArea.text = JSON.stringify(points);
@@ -19577,6 +19582,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				points[(index+1)%points.length][5] = end.y;
 			}
 			if (controlType) newPoint[8] = controlType;
+			
 			points.splice(index+1, 0, newPoint);
 			return index+1;
 		}
@@ -33840,7 +33846,6 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			selector = this.selector = new zim.Rectangle(targetW, targetH, zim.faint, zim.faint, borderWidth, corner, dashed, {ignoreScale:!resizeScale})
 				.centerReg(that);
 			selector.loc(tile.width/2, target.y+paddingV, that, behind?0:1);
-			zog(tile.width/2, target.y+paddingV)
 			selector.visible = false;
 		}
 		if (!(selectedIndex < 0 || zot(currentItem))) {
@@ -36132,6 +36137,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
         this.type = "NumPad";	
 
 		var that = this;
+
 				
 		function ms(letter, color) {
 			if (zot(color)) color = mist;
@@ -36141,7 +36147,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			ms("C",zim.red.darken(.1)),ms(new zim.Label({text:"␣", size:90, shiftV:-24}),zim.yellow.darken(.1)),ms(new zim.Label({text:"/",size:48,bold:true,shiftV:3})),ms(new zim.Label({text:"*", size:65, shiftV:18})),
 			1,2,3,ms(new zim.Label({text:"-",size:60,shiftV:-3})),4,5,6,ms(new zim.Label({text:"+",size:55,shiftV:3})),
 			7,8,9,ms(new zim.Label({text:"⌫",size:M=="ios"?60:35}), zim.red.darken(.1)),
-			ms(new zim.Label({text:",",size:70,shiftV:-3})),ms(new Label({text:".",size:70,shiftV:-3})),0,ms(new zim.Label({text:"⏎", size:M=="ios"?40:50, shiftV:5}), zim.green.darken(.1))]
+			ms(new zim.Label({text:",",size:70,shiftV:-3})),ms(new Label({text:".",size:70,shiftV:-3})),0,ms(new zim.Label({text:"⏎", size:M=="ios"?40:50, shiftV:5}), zim.green.darken(.1))];
+		
+		
+		function isRTL(){   
+			return getComputedStyle(zdf.canvas).direction == "rtl";						
+		};
 		if (advanced=="simple") {
 			padArray.splice(0,4);
 			padArray.splice(3,1);
@@ -36153,8 +36164,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		} else if (advanced) {
 			padArray.splice(2,0,ms("%", yellow.darken(.1)));
 			padArray.splice(4,0,ms(new zim.Label({text:"^",size:47,shiftV:10}), yellow.darken(.1)));
-			padArray.splice(4,0,ms(")", yellow.darken(.1)));
-			padArray.splice(4,0,ms("(", yellow.darken(.1)));
+			padArray.splice(4,0,ms(isRTL()?"(":")", yellow.darken(.1)));
+			padArray.splice(4,0,ms(isRTL()?")":"(", yellow.darken(.1)));
 		}
 		that.pad = new zim.Pad({
             width:advanced=="simple"?290:380,
@@ -39264,6 +39275,7 @@ Dispatches a "keydown" event with an event object having a letter property
 	keyboard.on("keydown", function(e) {zog(e.letter);}); // logs letter pressed or "del" for delete
 Dispatches a "special" event if the special parameter is used and the special key is pressed
 Dispatches a "close" event when close keyboard icon at bottom right is pressed
+Dispatches "numpadopen" and "numpadclose" events when the NumPad is opened or closed 
 
 ALSO: see the CreateJS Easel Docs for Container events such as:
 added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
@@ -40040,15 +40052,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 						that.toggled = false;
 						removeCursorShiftMenu();
 					}
+					that.dispatchEvent("numpadclose");
 				});
 			}
 			
 			numPadKey.removeChildAt(2);	
 			if (that.numPad.parent || status === false) {
 				that.numPad.removeFrom();
+				that.dispatchEvent("numpadclose");
 				showNumPadIcon.clone().scaleTo(numPadKey, 60, 60).centerReg(numPadKey,2);
 			} else if (!that.numPad.parent || status === true) {
 				that.numPad.addTo();
+				that.dispatchEvent("numpadopen");
 				hideNumPadIcon.clone().scaleTo(numPadKey, 60, 60).centerReg(numPadKey,2);
 			}
 			currentKeyboard.updateCache();
@@ -50397,9 +50412,8 @@ RETURNS obj for chaining
 			if (!redoChache) obj.updateCache();
 			else obj.cache();
 		}
-		if (obj.alphaMask) {
-			zog(obj.alphaMask.type)
-			obj.alphaMask.updateCache();
+		if (obj.effects && obj.effects.alpha && obj.effects.alpha.alphaMask.updateCache) {			
+			obj.effects.alpha.alphaMask.updateCache();
 		}
 		return obj;
 	};//-33.163
@@ -57321,19 +57335,18 @@ There are settings that can adjust when the Ticker updates so see Usage notes be
 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 circle = new Circle(50, red);
-circle.center();
+const circle = new Circle(50, red).center();
 Ticker.add(()=>{
 	circle.x++;
-}, stage); // stage is optional - will be the first stage made if left out
+}); // can also pass in a specific stage
 
 // to be able to remove the function:
-Ticker.add(tryMe, stage);
+Ticker.add(tryMe);
 function tryMe() {circle.x++;}
 Ticker.remove(tryMe);
 
 // OR with function literal, use the return value
-var tickerFunction = Ticker.add(()=>{circle.x++;}, stage);
+var tickerFunction = Ticker.add(()=>{circle.x++;});
 Ticker.remove(tickerFunction);
 
 // Check to see if a function is in the Ticker for that stage:
@@ -57347,6 +57360,7 @@ however, OPTIMIZE can be overridden as follows (or with the always() method):
 METHODS (static)
 ** As of ZIM 5.1.0, stage is optional and will default to the stage of first Frame object made
 ** WARNING - if you are in a second Frame you should pass stage as a parameter so it does not point to the first Frame's stage
+** NOTE - if no stage is provided, the Ticker will update the stage of the zdf - ZIM default frame (usually the first Frame made)
 Ticker.always(stage) - overrides OPTIMIZE and always runs an update for the stage even with no function in queue
 Ticker.alwaysOff(stage) - stops an always Ticker for a stage
 Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added
@@ -57724,7 +57738,7 @@ const pages = new Pages({
 }).addTo();
 
 // handle any events inserted into the swipe arrays
-pages.on("info", function(){zog("info requested")});
+pages.on("info", ()=>{zog("info requested")});
 
 // handle any custom requirements when arriving at a page
 // the event gives you the page object
@@ -57732,13 +57746,13 @@ pages.on("info", function(){zog("info requested")});
 home.name = "home";
 hide.name = "hide";
 find.name = "find";
-pages.on("page", function() {
+pages.on("page", ()=>{
 	zog(pages.page.name); // now we know which page we are on
 })
 
 // you can manually go to pages as well
 // we will make a little triangle to click:
-var back = new Triangle({color:red});
+const back = new Triangle({color:red});
 back.center(find); // add triangle to find page
 // not really supposed to add things to zim shapes
 // they default to mouseChildren false
@@ -57746,8 +57760,7 @@ back.center(find); // add triangle to find page
 // so we have to set the mouseChildren of find to true
 find.mouseChildren = true;
 back.cur();
-back.on("click", function() {pages.go(home, UP)});
-S.update();
+back.on("click", ()=>{pages.go(home, UP)});
 END EXAMPLE
 
 PARAMETERS
@@ -58687,6 +58700,125 @@ Additional "mousedown", "click" or other button events can be added if desired
 	zim.extend(zim.Arrow, zim.Button, "clone", "zimButton", false);
 	//-71.2
 		
+
+/*--
+zim.HotSpot = function(obj, x, y, width, height, call, callOver, callOut, local, talk)
+
+HotSpot
+zim class - extends a zim.Container which extends a createjs.Container
+
+DESCRIPTION
+HotSpot adds an invisible button to a container object (often think of this as the page).
+If you want multiple spots it is more efficient to use the HotSpots class above
+which manages multiple HotSpot objects (otherwise you end up with multiple event functions).
+The spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape.
+The spot will get a cursor of "pointer".
+
+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 hs = new HotSpot(S, 100, 100, 50, 50, myFunction);
+function myFunction() {
+	zog("activation!");
+}
+// hs.show(); // uncomment this to see rectangle hotSpot
+END EXAMPLE
+
+PARAMETERS supports DUO - parameters or single object with properties below
+holder - container object in which to place the hotspot (stage for instance)
+x, y, width and height - of the rectangle for the hotspot
+call - the function to call when the spot is pressed
+local - (default true) hotSpot rect is based on local coordinates of the container
+	use when the element scale independently from the stage
+	if set to false then you pass in global coordinates and hotSpot will convert them
+talk - (default "hotspot") text for ZIM Accessibility screen reader
+
+METHODS
+show() - helps when creating the spot to see where it is
+hide() - hides the hotspot
+dispose() - removes the listener and the spot
+
+PROPERTIES
+type - holds the class name as a String
+spot - the actual hotSpot object that gets added to the container can be accessed with the spot property
+eg. hs.spot
+
+ACTIONEVENT
+This component is affected by the general ACTIONEVENT setting
+The default is "mousedown" - if set to something else the component will act on click (press)
+--*///+73
+zim.HotSpot = function(obj, x, y, width, height, call, callOver, callOut, local, talk) {
+	var sig = "obj, x, y, width, height, call, callOver, callOut, local, talk";
+	var duo; if (duo = zob(zim.HotSpot, arguments, sig, this)) return duo;
+	z_d("73");
+	this.zimContainer_constructor(null,null,null,null,false);
+	this.type = "HotSpot";
+
+	if (zot(obj) || !obj.addChild) {zogy("zim controls - HotSpot():\nPlease pass in container object for obj"); return;}
+	if (obj instanceof createjs.Container == false) {zogy("zim controls - HotSpot():\nObjects passed in should be Containers"); return;}
+	if (zot(x) || zot(y) || zot(width) || zot(height)) {zogy("zim controls - HotSpot():\nPlease pass in x, y, width, height"); return;}
+	if (zot(local)) local = true;
+	var eventType = (!zns?WW.ACTIONEVENT=="mousedown":zim.ACTIONEVENT=="mousedown")?"mousedown":"click";
+
+	var w = width; var h = height;
+	var point,newW,newH;
+	if (!local) {
+		point = obj.globalToLocal(x,y);
+		var point2 = obj.globalToLocal(x+w,y+h);
+		newW = point2.x-point.x;
+		newH = point2.y-point.y;
+	} else {
+		point = new zim.Point(x,y);
+		newW = width;
+		newH = height;
+	}
+	var but = new zim.Shape(width, height);
+	but.talk = zot(talk)?"HotSpot":talk;
+	but.alpha = 0;
+	but.graphics.f("black").dr(0,0,newW,newH);
+	but.x = point.x;
+	but.y = point.y;
+	but.cur("pointer");
+	but.expand(0);
+	this.spot = but;
+
+	if (typeof(call) == "function") {
+		var butEvent = but.on(eventType,function(e) {
+			call(e);
+		});
+	}
+	if (typeof(callOver) == "function") {
+		var butOverEvent = but.on("mouseover",function(e) {
+			callOver(e);
+		});
+	}
+	if (typeof(callOut) == "function") {
+		var butOutEvent = but.on("mouseout",function(e) {
+			callOut(e);
+		});
+	}
+	obj.addChild(but);
+
+	this.show = function() {
+		but.alpha = .5;
+		if (obj.stage) obj.stage.update();
+	};
+	this.hide = function() {
+		but.alpha = 0;
+		if (obj.stage) obj.stage.update();
+	};
+	this.dispose = function() {
+		if (butEvent) but.off(eventType, butOverEvent);
+		if (butOverEvent) but.off("mouseover", butOverEvent);
+		if (butOutEvent) but.off("mouseout", butOutEvent);
+		obj.removeChild(but);
+		but = null;
+		return true;
+	};
+};
+zim.extend(zim.HotSpot, zim.Container, "dispose", "zimContainer", false);
+//-73
+
 /*--
 zim.HotSpots = function(spots, local, mouseDowns)
 
@@ -58703,25 +58835,20 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 // our first hotSpot will be a 50 pixel square at 100, 100
-// then we will add hotSpots to these items as well
-var circle = new Circle(60, red);
-circle.center();
 
-const button = new Button();
-S.addChild(button);
-button.x = W - button.width - 100;
-button.y = H - button.height - 100;
+// then we will add hotSpots to these items as well
+const circle = new Circle(60, red).center();
+const button = new Button().pos(100,100,RIGHT,BOTTOM);
 
 // make the hotSpots object
 // these are all on the same page
 // gets really handy when you have multiple pages with Pages
 const hs = new HotSpots([
-	{page:stage, rect:[100,100,50,50], call:()=>{zog("hot!");}},
-	{page:stage, rect:circle, call:()=>{zog("circle!");}},
-	{page:stage, rect:button, call:()=>{zog("button!");}},
+	{page:S, rect:[100,100,50,50], call:()=>{zog("hot!");}},
+	{page:S, rect:circle, call:()=>{zog("circle!");}},
+	{page:S, rect:button, call:()=>{zog("button!");}},
 ]);
 // hs.show(); // uncomment this to see rectangle hotSpots
-S.update();
 END EXAMPLE
 
 PARAMETERS supports DUO - parameters or single object with properties below
@@ -58899,125 +59026,6 @@ the class creates HotSpot objects - see the class underneath this one
 	//-72
 
 
-/*--
-zim.HotSpot = function(obj, x, y, width, height, call, callOver, callOut, local, talk)
-
-HotSpot
-zim class - extends a zim.Container which extends a createjs.Container
-
-DESCRIPTION
-HotSpot adds an invisible button to a container object (often think of this as the page).
-If you want multiple spots it is more efficient to use the HotSpots class above
-which manages multiple HotSpot objects (otherwise you end up with multiple event functions).
-The spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape.
-The spot will get a cursor of "pointer".
-
-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 hs = new HotSpot(stage, 100, 100, 50, 50, myFunction);
-function myFunction() {
-	zog("activation!");
-}
-// hs.show(); // uncomment this to see rectangle hotSpot
-S.update();
-END EXAMPLE
-
-PARAMETERS supports DUO - parameters or single object with properties below
-holder - container object in which to place the hotspot (stage for instance)
-x, y, width and height - of the rectangle for the hotspot
-call - the function to call when the spot is pressed
-local - (default true) hotSpot rect is based on local coordinates of the container
-	use when the element scale independently from the stage
-	if set to false then you pass in global coordinates and hotSpot will convert them
-talk - (default "hotspot") text for ZIM Accessibility screen reader
-
-METHODS
-show() - helps when creating the spot to see where it is
-hide() - hides the hotspot
-dispose() - removes the listener and the spot
-
-PROPERTIES
-type - holds the class name as a String
-spot - the actual hotSpot object that gets added to the container can be accessed with the spot property
-eg. hs.spot
-
-ACTIONEVENT
-This component is affected by the general ACTIONEVENT setting
-The default is "mousedown" - if set to something else the component will act on click (press)
---*///+73
-	zim.HotSpot = function(obj, x, y, width, height, call, callOver, callOut, local, talk) {
-		var sig = "obj, x, y, width, height, call, callOver, callOut, local, talk";
-		var duo; if (duo = zob(zim.HotSpot, arguments, sig, this)) return duo;
-		z_d("73");
-		this.zimContainer_constructor(null,null,null,null,false);
-		this.type = "HotSpot";
-
-		if (zot(obj) || !obj.addChild) {zogy("zim controls - HotSpot():\nPlease pass in container object for obj"); return;}
-		if (obj instanceof createjs.Container == false) {zogy("zim controls - HotSpot():\nObjects passed in should be Containers"); return;}
-		if (zot(x) || zot(y) || zot(width) || zot(height)) {zogy("zim controls - HotSpot():\nPlease pass in x, y, width, height"); return;}
-		if (zot(local)) local = true;
-		var eventType = (!zns?WW.ACTIONEVENT=="mousedown":zim.ACTIONEVENT=="mousedown")?"mousedown":"click";
-
-		var w = width; var h = height;
-		var point,newW,newH;
-		if (!local) {
-			point = obj.globalToLocal(x,y);
-			var point2 = obj.globalToLocal(x+w,y+h);
-			newW = point2.x-point.x;
-			newH = point2.y-point.y;
-		} else {
-			point = new zim.Point(x,y);
-			newW = width;
-			newH = height;
-		}
-		var but = new zim.Shape(width, height);
-		but.talk = zot(talk)?"HotSpot":talk;
-		but.alpha = 0;
-		but.graphics.f("black").dr(0,0,newW,newH);
-		but.x = point.x;
-		but.y = point.y;
-		but.cur("pointer");
-		but.expand(0);
-		this.spot = but;
-
-		if (typeof(call) == "function") {
-			var butEvent = but.on(eventType,function(e) {
-				call(e);
-			});
-		}
-		if (typeof(callOver) == "function") {
-			var butOverEvent = but.on("mouseover",function(e) {
-				callOver(e);
-			});
-		}
-		if (typeof(callOut) == "function") {
-			var butOutEvent = but.on("mouseout",function(e) {
-				callOut(e);
-			});
-		}
-		obj.addChild(but);
-
-		this.show = function() {
-			but.alpha = .5;
-			if (obj.stage) obj.stage.update();
-		};
-		this.hide = function() {
-			but.alpha = 0;
-			if (obj.stage) obj.stage.update();
-		};
-		this.dispose = function() {
-			if (butEvent) but.off(eventType, butOverEvent);
-			if (butOverEvent) but.off("mouseover", butOverEvent);
-			if (butOutEvent) but.off("mouseout", butOutEvent);
-			obj.removeChild(but);
-			but = null;
-			return true;
-		};
-	};
-	zim.extend(zim.HotSpot, zim.Container, "dispose", "zimContainer", false);
-	//-73
-
 /*--
 zim.Guide = function(obj, vertical, pixels, hideKey, pixelKey, style, group, inherit)
 
@@ -61614,7 +61622,7 @@ note: the item is not the event object target - as that is the tile
 		if (style!==false) zim.styleTransforms(this, DS); // global function - would have put on DisplayObject if had access to it
 
 		this.clone = function(exact) {
-			if (unique) exact = true; // added ZIM 016
+			if (zot(exact) && unique) exact = true; // added ZIM 016
 			if (exact) {
 				var exactItems = [];
 				if (backgroundColor) var exactBackgroundColors = [];
@@ -62535,8 +62543,6 @@ sun.beads.animate({
 });
 END EXAMPLE
 
-path, obj, count, angle, startPercent, endPercent, percents, onTop, showControls, visible, interactive, clone, group, style, inherit
-
 PARAMETERS
 ** supports DUO - parameters or single object with properties below
 ** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
@@ -62793,6 +62799,8 @@ regions - an array of region DisplayObjects with specific properties for each re
 	align defaults to middle for the regions
 	valign defaults to top and bottom for the top and bottom region and middle for the others
 	backgroundColor applies a backing color to the region
+	only vertical GradientColor and centered RadialColor are supported at this time
+	so use new GradientColor([blue,green]) or new GradientColor([orange, yellow])
 	Example HORIZONTAL region objects
 		[{obj:col1, marginLeft:10, maxHeight:80, width:20, valign:"bottom"},
 		{obj:col2, marginLeft:5, maxHeight:90, align:MIDDLE}, // note, middle gets no minWidth
@@ -62803,6 +62811,8 @@ regions - an array of region DisplayObjects with specific properties for each re
 lastMargin - (default 0) the margin at the bottom (vertical) or at the right (horizontal)
 lastMarginMin - (default 0) the minimum margin at the bottom (vertical) or at the right (horizontal)
 backgroundColor - (default null) background color for the whole holder
+	only vertical GradientColor and centered RadialColor are supported at this time
+	so use new GradientColor([blue,green]) or new GradientColor([orange, yellow])
 vertical - (default true) set to false for horizontal layout
 showRegions - (default null) show boundaries of regions (formerly regionShape)
 	can toggle on and off with B key if this is set to true
@@ -63018,7 +63028,7 @@ will fill up the rest of the height until they reach their maximum widths
 			holder.setBounds(0,0,bounds.width,bounds.height);
 			backing.graphics.clear();
 			if (backgroundColor!="") {
-				processColor(backing, backgroundColor);				
+				processColor(backing, backgroundColor, 0, 0, bounds.width, bounds.height);				
 				backing.graphics.r(0,0,bounds.width,bounds.height);
 			}
 			for (i=0; i<regions.length; i++) {
@@ -63234,7 +63244,7 @@ will fill up the rest of the height until they reach their maximum widths
 				if (pPos == 0 || (pPos+p) == bounds[primary]) if (vertical) {addedH=1;} else {addedW=1;}
 				if (s == bounds[secondary]) if (vertical) {addedW=1;} else {addedH=1;}
 				if (r.backgroundColor != "") {
-					processColor(backing, r.backgroundColor);
+					processColor(backing, r.backgroundColor, f.bX, f.bY, f.bWidth+addedW, f.bHeight+addedH);
 					backing.graphics.r(f.bX, f.bY, f.bWidth+addedW, f.bHeight+addedH);
 				}
 				// increase our primary position
@@ -63244,9 +63254,11 @@ will fill up the rest of the height until they reach their maximum widths
 			
 		}; // end resize 
 		
-		function processColor(shape, co) {
-			if (co.type == "GradientColor") shape.graphics.lf(co.colors, co.ratios, co.x0, co.y0, co.x1, co.y1);
-			else if (co.type == "RadialColor") shape.graphics.rf(co.colors, co.ratios, co.x0, co.y0, co.r0, co.x1, co.y1, co.r1);
+		function processColor(shape, co, x, y, w, h) {	
+			// if (co.type == "GradientColor") shape.graphics.lf(co.colors, co.ratios, co.x0, co.y0, co.x1, co.y1);
+			if (co.type == "GradientColor") shape.graphics.lf(co.colors, co.ratios, x, y, x, y+h);
+			// else if (co.type == "RadialColor") shape.graphics.rf(co.colors, co.ratios, co.x0, co.y0, co.r0, co.x1, co.y1, co.r1);
+			else if (co.type == "RadialColor") shape.graphics.rf(co.colors, co.ratios, x+w/2, y+h/2, 0, x+w/2, y+h/2, Math.max(w/2,h/2));
 			else if (co.type == "BitmapColor") shape.graphics.bf(co.image, co.repetition, co.matrix);	
 			else shape.graphics.f(r.backgroundColor);
 		}
@@ -69752,11 +69764,24 @@ join(obj1, obj2, point1, point2, minAngle, maxAngle, type) - creates and returns
 break(joint) - break a joint created with join()
 	to use, store the result of the join() method in a variable and pass that variable in to break()
 attach(control, obj) attach a physics object (obj) to a ZIM object (control) to like a mousejoint to the ZIM object not the mouse 
-    the control can then be animated, wiggled, dragged and the physics object will follow it
-    returns an id to be able to unattach
-        const id = physics.attach(triangle, circle);
-        timeout(2, ()=>{physics.unattach(id)});
+	the control can then be animated, wiggled, dragged and the physics object will follow it
+	returns an id to be able to unattach
+		const id = physics.attach(triangle, circle);
+		timeout(2, ()=>{physics.unattach(id)});
 unattach(id) unattach a physics object from the ZIM object based on the stored id from attach();
+buoyancy(height, denisity, linear, angular) returns a Box2D buoyancy controller.  Then need to add() or remove() objects 
+	height - (default H/2) is pixels from bottom of the stage 
+	density - (default 3) density of fluid - the higher the more an object floats
+	linear - (default 4) linear damping to reduce movement
+	angular - (default 4) angular damping to reduce rotation
+		the buoyancy controller will have the following methods:
+		add(obj) - add object with physics or an array of objects with physics to buoyancy controller
+			returns buoyancy object for chaining
+		remove(obj) - remove object or an array of objects from buoyancy controller
+			returns buoyancy object for chaining
+		clear() - remove all objects from buoyancy controller
+			returns buoyancy object for chaining
+		dispose() - deletes buoyancy controller
 debug() - activates the debugging - returns object for chaining
 updateDebug() - updates the debug canvas if the frame has been scaled (put in frame resize event)
 removeDebug() - removes the debug canvas - you can add it again later (or toggle, etc.)
@@ -79085,10 +79110,10 @@ the result of the play() or tone() method will dispatch a "complete" event when
 					if (wah) that2.removeWah();
 				}, (releaseTime+1)*1000);
 			};
-			if (duration) this.stop(startTime+duration-.1);
-			// if (duration) timeout(duration-.1, function () {
-			// 	that2.stop();
-			// });
+			// if (duration) this.stop(startTime+duration-.1);
+			if (duration) setTimeout(function () { // reverted back to this in ZIM 015
+				that2.stop();
+			}, (duration-.1) * 1000);
 
 			var notes = this.notes = [oscillator];
 
@@ -79157,7 +79182,7 @@ the result of the play() or tone() method will dispatch a "complete" event when
 				if (zot(val)) val = 0;
 				if (zot(duration)) duration = that.rampDuration;
 
-				if (gain) {
+				if (gain) {					
 					obj.cancelScheduledValues(audioContext.currentTime);
 					obj.linearRampToValueAtTime(
 						obj.value,
@@ -79170,8 +79195,8 @@ the result of the play() or tone() method will dispatch a "complete" event when
 					// gain.gain.setValueAtTime(gain.gain.value, audioContext.currentTime);
 					// gain.gain.linearRampToValueAtTime(volume*that.hush, audioContext.currentTime+that.rampDuration);
 
-				} else {
-					obj.cancelScheduledValues(audioContext.currentTime);
+				} else {					
+					obj.cancelScheduledValues(audioContext.currentTime); // this is deleting duration setting... so took out in 015
 					obj.setTargetAtTime(val, audioContext.currentTime, duration);
 				}
 
@@ -83552,7 +83577,7 @@ METHODS (of AbstractSoundInstance)
 stop() - stops the sound and sets the time to 0
 play() - plays the sound again - usually, the sound is already playing from the sound.play()
  	but if it is stopped - this will start it again
-fade(volume, time, call) - fade in our out a playing sound in a time and call the call function when done  
+fade(volume, time, call) - fade in or out a playing sound in a time and call the call function when done  
 panSound(pan, time, call) - pan left (-1) or right (1) or in between a playing sound in a time and call the call function when done  
 	
 PROPERTIES 
@@ -83659,7 +83684,7 @@ loop - dispatched when the sound loops (but not at end of last loop - that is co
                     props:{volume:val}, 
                     time:time,
                     override:true,
-                    animateCall:function() {zog("here"); that.soundInstance.volume = ob.volume}, 
+                    animateCall:function() {that.soundInstance.volume = ob.volume}, 
                     call:call
                 });
                 return that.sound;
@@ -83677,7 +83702,7 @@ loop - dispatched when the sound loops (but not at end of last loop - that is co
                     props:{pan:val}, 
                     time:time,
                     override:true,
-                    animateCall:function() {zogb(ob.pan); that.soundInstance.pan = ob.pan}, 
+                    animateCall:function() {that.soundInstance.pan = ob.pan}, 
                     call:call
                 });
                 return that.sound;
@@ -84396,7 +84421,7 @@ Thanks Karel Rosseel for the initial research on Speech.
 SEE: https://zimjs.com/016/speech.html
 
 NOTE: The listen() method is currently not supported by Apple iOS Web - only Native apps (grr)
-But the talk() method works on iOS Web - however, there seems to be one voice.
+But the talk() method works on iOS and Android Web - however, there seems to be one voice.
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
@@ -84471,7 +84496,6 @@ recognition - the SpeechRecognition() object created (used internally) has JS pr
 
 EVENTS
 dispatches a "voiceschanged" event when voices property will be ready - not needed if just using default voice
-	f preloaded this is dispatched 20 ms after the SVG is made.
 dispatches "result" when either as each word is spoken if listen() is used (interim defaults to true) 
 	or at the end of speaking words if listen(false) is used (interim is set to false)
 	the result event will have an event object (often e is used) that holds a words property with the words spoken 
@@ -87181,14 +87205,15 @@ but usually, just pass the callback as the first parameter
 				backdropColor:backdropColor
 			});			
 			var icon = new zim.Container();
-			new zim.Shape().s(zim.dark).ss(3,1,0,3).p("AAAj0IAAFJAA8hoIBuAAIAAFdIlTAAIAAldIBuAA")
+			new zim.Shape(50,30).s(zim.dark).ss(3,1,0,3).p("AAAj0IAAFJAA8hoIBuAAIAAFdIlTAAIAAldIBuAA")
 				.sca(1.7).addTo(icon);
-			new zim.Shape().s(zim.dark).ss(3,1,0,3).p("AhGAlIBGhGIBHBG")
+			new zim.Shape(50,30).s(zim.dark).ss(3,1,0,3).p("AhGAlIBGhGIBHBG")
 				.sca(1.7).addTo(icon).mov(0,-38);			
-			var tile = new zim.Tile([icon, label], 2, 1, 40, 0, true)	
+			var tile = new zim.Tile([icon, label], 2, 1, 20, 0, true)	
 			if (tile.width > zdf.stage.width*.7) tile.width = zdf.stage.width*.7;
-			tile.setBounds(-70,-10,480,100);
-			icon.mov(-30,35);
+			tile.setBounds(-90,-10,480,100);
+			tile.noMouse();
+			icon.mov(-30,0);
 			tile.center(pane);	
 		}
 					
@@ -90866,8 +90891,8 @@ export let outline = zim.outline;
 export let blendmodes = zim.blendmodes;
 export let Pages = zim.Pages;
 export let Arrow = zim.Arrow;
-export let HotSpots = zim.HotSpots;
 export let HotSpot = zim.HotSpot;
+export let HotSpots = zim.HotSpots;
 export let Guide = zim.Guide;
 export let Grid = zim.Grid;
 export let Wrapper = zim.Wrapper;

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

@@ -3616,8 +3616,12 @@ declare namespace zim {
 		borders(boundary?: Boundary | {}): void
 		drag(array?: [any]): void
 		noDrag(): void
+        pause(type?:boolean): void;
 		join(obj1: DisplayObject, obj2: DisplayObject, point1?: Point | {}, point2?: Point | {}, minAngle?: number, maxAngle?: number, type?: string): any
 		break(joint: any): void
+        attach(control:DisplayObject, obj:DisplayObject):string
+        unattach(id:string):void
+        buoyancy(height?:number, denisity?:number, linear?:number, angular?:number):any
 		debug(): void
 		updateDebug(): void
 		removeDebug(): void