zimjs 18.0.9 → 18.1.1

package/package.json

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

package/src/zim.js

@@ -2094,7 +2094,7 @@ pauseTimeLeft - if paused, get how much time is left once unpaused
 		if (zot(immediate)) immediate = false;
 		if (!zot(total) && (isNaN(total) || total<=0)) return;
 		if (zot(total)) total = -1;
-		var obj = {count:0, total:total, paused:false, time:time, active:true, timeUnit:timeUnit};
+		var obj = {count:(immediate && time <= (timeType=="s"?5/1000:5)) ? -1:0, total:total, paused:false, time:time, active:true, timeUnit:timeUnit};
 
 		if (pauseOnBlur) {
 			if (zot(zim.blurCheck)) zim.setBlurDetect();
@@ -2113,7 +2113,7 @@ pauseTimeLeft - if paused, get how much time is left once unpaused
 				checkTotal();
 			}, obj.interval*(timeType=="s"?1000:1));
 		}
-		if (immediate) {
+		if (immediate && time > (timeType=="s"?5/1000:5)) {
 			setTimeout(function() {
 				(call)(obj);
 				checkTotal();
@@ -2239,7 +2239,7 @@ function myFunction(data){
 // in the php file we would use the following to return JSON:
 <?php
 header('Content-type: text/javascript');
-$data = [test=>"wow", score=>[1,2,3]];
+$data = ["test"=>"wow", "score"=>[1,2,3]];
 echo "async.myFunction(".JSON_encode($data).")";
 ?>
 
@@ -11354,7 +11354,7 @@ it will still scale when using the corners.  This can be turned off by setting s
 
 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
+SEE: https://zimjs.com/slicer 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)
 
@@ -11804,6 +11804,8 @@ but we found the framerate could not be kept
 with other animations or Ticker events running.
 So we recommend using the ZIM Sprite run() method.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -22641,13 +22643,12 @@ zim class - extends a zim.Container which extends a createjs.Container
 
 DESCRIPTION
 Makes a label - wraps the createjs Text object.
-Can use with Button, CheckBox, RadioButtons and Pane.
-Text seems to come in different sizes so we do our best.
-Have tended to find that left and alphabetic are most consistent across browsers.
-Custom fonts loaded through css can be used as well.
+Can also use with Button, CheckBox, RadioButtons, Pane, etc.
+System fonts, Google fonts and custom fonts can be used.
+
+NOTE: can wrap text at given width using labelWidth (or lineWidth) parameter.
 
-NOTE: can wrap text at given width using lineWidth (or labelWidth) parameter.
-To dynamically change the width without changing the font size use the labelWidth property.
+NOTE: can make text fit to dimensions by setting both labelWidth and labelHeight parameters.
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
@@ -22665,6 +22666,16 @@ new Label({
 }).loc(100,100).tap(()=>{zog("tapping");});
 END EXAMPLE
 
+EXAMPLE 
+// using the Google Font gf_ short cut for "Joti+One"
+// and also a custom font (Reuben) that would be in the assets folder
+new Frame(FIT, 1024, 768, ready ["gf_Joti+One", "Reuben.otf"], "assets/");
+function ready() {
+	new Label("Hello", 100, "Joti One").loc(100,100);
+	new Label("Greets", 50, "Reuben").center();
+}
+END EXAMPLE
+
 EXAMPLE
 // with text that wraps at labelWidth
 // can also set this as a property later to dynamically change width of text 
@@ -22675,6 +22686,17 @@ new Label({
 }).center();
 END EXAMPLE
 
+EXAMPLE
+// with text that fits into labelWidth and labelHeight
+// will change font size.
+new Label({
+	text:"Fit this text into the width and height",
+	labelWidth:300,
+	labelHeight:150,
+	align:CENTER
+}).center().outline();
+END EXAMPLE
+
 EXAMPLE
 STYLE = {font:"courier"};
 new Label("Hi Courier").center(); // will be courier not arial
@@ -24136,7 +24158,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		if (zot(rtl)) rtl = DS.rtl != null ? DS.rtl : false;		
 		if (zot(lineAlign)) lineAlign = DS.lineAlign != null ? DS.lineAlign : rtl?"right":"left";
 		if (zot(lineValign)) lineValign = DS.lineValign != null ? DS.lineValign : "bottom";
-		if (zot(lineWidth)) lineWidth = DS.lineWidth != null ? DS.lineWidth : "bottom";
+		if (zot(lineWidth)) lineWidth = DS.lineWidth != null ? DS.lineWidth : null;
 		if (zot(lineAlignLast)) lineAlignLast = DS.lineAlignLast != null ? DS.lineAlignLast : rtl?"right":"left";
 		if (zot(cache)) cache = DS.cache != null ? DS.cache : false;
 
@@ -25011,16 +25033,22 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
        
         var originalLabel = !zot(label) && label.type == "Label";
 		if (zot(label)) label = DS.label != null ? DS.label : new zim.Label("Will this wind be so mighty as to lay low the mountains of the Earth?");
-        if (zot(width)) width = DS.width != null ? DS.width : originalLabel ? label.width : 500; 
+		if (zot(size)) size = DS.size != null ? DS.size : originalLabel? label.size : 36;
+		if (zot(spacingH)) spacingH = DS.spacingH != null ? DS.spacingH : size/2;
+        if (zot(spacingV)) spacingV = DS.spacingV != null ? DS.spacingV : size/2;
+		if (originalLabel) {
+			var numWords = label.text.split(" ").length;
+			var paddingT = label.background?label.paddingH*numWords*2:0;
+		}
+        if (zot(width)) width = DS.width != null ? DS.width : originalLabel ? label.width*(paddingT?1.05:1.07)+paddingT : 500; 
         if (zot(itemRegX)) itemRegX = DS.itemRegX != null ? DS.itemRegX : "center";
         if (zot(itemRegY)) itemRegY = DS.itemRegY != null ? DS.itemRegY : "center";
-        if (zot(size)) size = DS.size != null ? DS.size : originalLabel? label.size : 36;
+
         if (zot(font)) font = DS.font != null ? DS.font : originalLabel? label.font : "arial";
         if (zot(color)) color = DS.color != null ? DS.color : originalLabel? label.color : "black";
         if (zot(backgroundColor)) backgroundColor = DS.backgroundColor != null ? DS.backgroundColor : originalLabel? label.backgroundColor : null;
         if (zot(itemCache)) itemCache = DS.itemCache != null ? DS.itemCache : false;
-        if (zot(spacingH)) spacingH = DS.spacingH != null ? DS.spacingH : size/2;
-        if (zot(spacingV)) spacingV = DS.spacingV != null ? DS.spacingV : size/2;
+
 
 		var that = this;		
 
@@ -27546,6 +27574,7 @@ Adds a window for alerts, etc.
 You need to call the pane.show() to show the pane and pane.hide() to hide it.
 You do not need to add it to the stage - it adds itself centered.
 You can change the x and y (the origin and registration point are in the middle).
+Content is added to the pane with the content parameter or the add() method.
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
@@ -28157,7 +28186,8 @@ zim class - extends a zim.Container which extends a createjs.Container
 
 DESCRIPTION
 A simple panel with titleBar and optional arrow for more panels.
-Panel can be set draggable and can have a collapse button and a close button
+Panel can be set draggable and can have a collapse button and a close button.
+Content is added to the panel with the content parameter or the add() method.
 See: https://zimjs.com/explore/panel.html
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
@@ -28694,6 +28724,8 @@ zim class - extends a zim.Container which extends a createjs.Container
 
 DESCRIPTION
 Adds a window for content that can be swiped and scrolled.
+Content is added to the Window with the content parameter or the add() method.
+
 NOTE: if zim namespace zns = true then this overwrites a JS Window - so the JS Window is stored as document.Window
 
 NOTE: set the enable property to false if animating the position of the whole Window
@@ -48724,7 +48756,6 @@ shadowColor - (default null) the shadow color (css color) of a drop shadow
 shadowBlur - (default null) pixels of how blurred the shadow is if the shadow is set - eg. 10
 dashed - (default true) set to false to turn off the dashed for the border
 id - (default null) a string id for the HTML textarea tag for CSS styling, etc.
-placeholder - (default null) a string that is used for the HTML textarea tag placeholder parameter
 readOnly - (default false) set to true to make TextArea read only (still selectable)
 spellCheck - (default true) set to false to turn Browser spell check off
 password - (default false) set to true to turn the field into a password field - single line only (uses input field type=password and not TextArea)
@@ -55506,6 +55537,8 @@ Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
 NOTE: when applying effects to rtl fonts make sure the DIR = "rtl" is set.
+
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
 	
 EXAMPLE
 // create a Label with a GlowEffect that shows through to the image below
@@ -70244,11 +70277,11 @@ color2 - (default null) a second color which would form a zim.GradientColor() as
 angle - (default 90) the angle for the gradient if there is a gradient
 borderColor - (default null) the stroke color
 borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
-corner - (default 0) the round of corner
-   can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
-   inside this array can be arrays of [horizontal, vertical] which skews each corner
-   can also be a combination array of values and skew arrays
-   [topLeft, [horizontal, vertical], bottomRight, [horizontal, vertical]]
+corner - (default 10) the round of corner
+	can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
+	inside this array can be arrays of [horizontal, vertical] which skews each corner
+	can also be a combination array of values and skew arrays
+	[topLeft, [horizontal, vertical], bottomRight, [horizontal, vertical]]
 interactive - (default true) set to false to not be interactive 
 	interactive will use raycasting in the TextureActives object 
 	to provide x and y to CreateJS which is then used by ZIM
@@ -70262,8 +70295,8 @@ pattern - (default null) a DisplayObject that will be added to the TextureActive
 scalePattern - (default "fill") scale the pattern so it fills the window (formerly "bigger" or "outside")
 	set to false for no scaling or:
 	FIT or "fit" fits inside the TextureActive keeping proportion (formerly "smallest")
-   	FILL or "fill" fills the TextureActive keeping proportion (formerly "biggest" or "outside")
-   	FULL or "full" keeps both x and y scales - may stretch object (formerly "both")
+	FILL or "fill" fills the TextureActive keeping proportion (formerly "biggest" or "outside")
+	FULL or "full" keeps both x and y scales - may stretch object (formerly "both")
 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
@@ -75363,29 +75396,31 @@ SEE: https://zimjs.com/portal/
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
-F.loadAssets(["researchbuilding.jpg", "jungle.jpg"]);
+F.loadAssets(["ai_future03.jpg", "ai_alienplanet01.jpg"], "https://zimjs.org/assets/");
 F.on("complete", ()=>{
+
 	const lands = new Container(W, H).addTo();
-	const jungle = new Pic("jungle.jpg")
+	const planet = new Pic("ai_alienplanet01.jpg")
 		.scaleTo(lands)
 		.center(lands);
-	const researchBuilding = new Pic("researchbuilding.jpg")
+	const future = new Pic("ai_future03.jpg")
 		.scaleTo(lands)
 		.center(lands);
+		
 	const portalObject = new Circle(118, faint, pink, 16, true)
-		.addTo(stage)
-		.pos(580, 470)
+		.center()
+		.mov(0,90)
 		.animate({obj:{rotation:"360"}, time:70, ease:"linear", loop:true});
+
 	const portal = new Portal(portalObject, lands);
-	portal.on("enter", function() {
+	portal.on("enter", ()=>{
 		// play a sound here!
 	});
 
 	// use enabled to turn on and off portal
-	timeout(1, ()=>{portal.enabled = false; portalObject.pauseAnimate(true);});
-	timeout(5, ()=>{portal.enabled = true; portalObject.pauseAnimate(false);});
+	// timeout(1, ()=>{portal.enabled = false; portalObject.pauseAnimate(true);});
+	// timeout(5, ()=>{portal.enabled = true; portalObject.pauseAnimate(false);});
 
-	S.update();
 }); // assets loaded
 END EXAMPLE
 
@@ -76575,6 +76610,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -76698,6 +76735,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -76944,6 +76983,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -77248,6 +77289,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -77438,6 +77481,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -77570,6 +77615,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -77752,6 +77799,8 @@ to make accessing filters easy - but apps will slow down if they are over-used.
 Keep the quality at 1 for animating filters at a decent framerate.
 Consider pre-processing images if effects do not have to be dynamic.
 
+NOTE: when applying an effect to a Sprite, put the sprite in a Container and apply the effect on the container
+
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
 EXAMPLE
@@ -79901,6 +79950,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 					tile.drag({boundary:tile, singleTouch:true});
 				}, timeType=="s"?(wait+time)*1000:wait+time);
 			}
+			return that;
 		};
 
 		this._enabled = true;
@@ -87831,7 +87881,7 @@ zim.Frame = function(scaling, width, height, color, outerColor, ready, assets, p
 			var duo; if (duo = zob(that.loadAssets, arguments, sig)) return duo;
 		}
 
-		if (!zot(path)) {
+		if (!zot(path)) {s
 			path = path.replace(/\/$/,"");
 			path = path + "/";
 			WW.PATH = path;
@@ -88331,9 +88381,9 @@ zim.Frame = function(scaling, width, height, color, outerColor, ready, assets, p
 		
 		if (WW.PATH!=null) zim.PATH = WW.PATH;
 		if (zim.PATH!=null) {
-			zim.PATH.replace(/\/$/,"");
+			zim.PATH = zim.PATH.replace(/\/$/,"");
 			zim.PATH = zim.PATH + "/";
-		}					
+		}				
 		if (second) {
 			var empty;
 			if (that.loadFailObj == "circles") empty = that.makeCircles(14);
@@ -90016,36 +90066,36 @@ END EXAMPLE
 EXAMPLE 
 // getting a preview 
 const video = new Vid("video.mp4")
-    .scaleTo()
-    .center()
-    .vis(false);    
+	.scaleTo()
+	.center()
+	.vis(false);    
 
 new Pane("WELCOME").show(init);
 
 function init() {  
-    video.play().pause().vis(true);
+	video.play().pause().vis(true);
 	// note, to play after this use video.pause(false); // not video.play()
-    Ticker.always();
+	Ticker.always();
 }
 END EXAMPLE 
 
 EXAMPLE 
 // getting a keyed out preview 
 const video = new Vid("video.mp4")
-    .scaleTo()
-    .center()
-    .vis(false);    
+	.scaleTo()
+	.center()
+	.vis(false);    
 
 new Pane("WELCOME").show(init);
 
 function init() {  
-    video
-        .keyOut("#01b03f", .25) // key out the green
-        .play();            
-    timeout(.05, ()=>{
-        video.pause().vis(true);
-    });       
-    Ticker.always();
+	video
+		.keyOut("#01b03f", .25) // key out the green
+		.play();
+	timeout(.05, ()=>{
+		video.pause().vis(true);
+	});
+	Ticker.always();
 }
 END EXAMPLE 
 
@@ -90162,7 +90212,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 		if (WW.PATH!=null) zim.PATH = WW.PATH;
 		if (zim.PATH!=null) {
-			zim.PATH.replace(/\/$/,"");
+			zim.PATH = zim.PATH.replace(/\/$/,"");
 			zim.PATH = zim.PATH + "/";
 		}	
 
@@ -90228,9 +90278,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
                     var replacement = that.keyObj.replacement;
                     that.ticker = zim.Ticker.add(function(){
                         bitmap.keyOut(color, tolerance, replacement);
-                    });
+                    }, that.stage);
                 } else {
-                    that.ticker = zim.Ticker.add(function(){});
+                    that.ticker = zim.Ticker.add(function(){}, that.stage);
                 }
             }         
             return that;   
@@ -90402,8 +90452,8 @@ zim.Dat = function(file) {
 	} else {
 		if (WW.PATH!=null) zim.PATH = WW.PATH;
 		if (zim.PATH!=null) {
-			zim.path.replace(/\/$/,"");
-			zim.path = zim.path + "/";
+			zim.PATH = zim.PATH.replace(/\/$/,"");
+			zim.PATH = zim.PATH + "/";
 		}	
 		var loader = zdf.loadAssets(file, zim.PATH);
 		loader.on("complete", function() {
@@ -91166,7 +91216,7 @@ function init(yes) {
 END EXAMPLE
 
 EXAMPLE
-// for shaking motion - ALSO see the PermissionAsk example above for iOS
+// for shaking motion - ALSO see the PermissionAsk example above
 // and replace "deviceorientation" with "devicemotion" 
 // and replace e.rotation.x, etc. with e.acceleration.x etc.
 // also set Frame sensors parameter to true
@@ -93975,8 +94025,8 @@ animator - the Gifler animator
 		var f;
 		if (WW.PATH!=null) zim.PATH = WW.PATH;
 		if (zim.PATH!=null) {
-			zim.path.replace(/\/$/,"");
-			zim.path = zim.path + "/";
+			zim.PATH = zim.PATH.replace(/\/$/,"");
+			zim.PATH = zim.PATH + "/";
 		}	
 		if (file.match(/http/) || file.match(/^\//)) f = file;
 		else f = (zim.PATH?zim.PATH:"")+file;
@@ -96599,7 +96649,7 @@ const ask = new CamAsk().show(yes => {
 END EXAMPLE
 
 EXAMPLE 
-// use ML5 at https://unpkg.com/ml5@1/dist/ml5.min.js for hand tracking
+// use ML5 at https://unpkg.com/ml5@1.2.1/dist/ml5.min.js for hand tracking
 // on a Mac, the canvas must be interacted with first
 // so would recommend always using CamAsk first:
 const ask = new CamAsk().show(yes=>{
@@ -97279,6 +97329,17 @@ NOTE: make the CamAlpha in the ready event of the Cam() or CamMotion()
 
 NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
 
+EXAMPLE
+// on a Mac, the canvas must be interacted with first 
+// so would recommend always using CamAsk first:
+const ask = new CamAsk().show(yes=>{	
+	if (yes) {
+		const cam = new Cam(W,H).alp(.3).center();		 
+		new CamAlpha(cam).pos(50,50,LEFT,BOTTOM);
+	}
+}); // end CamAsk show() - see CamAsk() docs for error checking example
+END EXAMPLE
+
 EXAMPLE
 // on a Mac, the canvas must be interacted with first 
 // so would recommend always using CamAsk first:
@@ -97618,6 +97679,8 @@ resize
 rotate2
 save
 mark
+pic
+chart
 
 Pizzazz Icons example:
 https://zimjs.com/bits/view/icons.html
@@ -97633,8 +97696,8 @@ const icon = makeIcon("home", white, 2).pos(40,40,RIGHT);
 var info = new Button({
 	width:50,
 	height:50,
-	color:blue, // or "red", "#666" etc.
-	rollColor:pink,
+	backgroundColor:blue, // or "red", "#666" etc.
+	rollBackgroundColor:pink,
 	corner:0,
 	label:"",
 	icon:makeIcon("info", "white")
@@ -97765,7 +97828,7 @@ where various Blob and Squiggle shapes can be selected from a menu
 or custom Blob And Squiggle shapes can be made.
 The code for the shapes can be copied into your app 
 as the Blob or Squiggle points parameter.
-Please contact us at https:forum.zimjs.com
+Please contact us at https://forum.zimjs.com
 and we can perhaps add your Blob or Squiggle in the menu!
 
 Note that PIZZAZZ 04 was created during ZIM NIO (version 9)
@@ -98256,3 +98319,4 @@ export let Style = zim.Style;
 export let assets = zim.assets;
 export let assetIDs = zim.assetIDs;
 export let ZIMON = zim.ZIMON;
+