zimjs 16.4.4 → 16.4.6

package/package.json

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

package/src/zim.js

@@ -908,7 +908,7 @@ END EXAMPLE
 
 EXAMPLE 
 // Remember the seed for a user with localStorage (like a cookie)
-const seed = rand(100000000);
+let seed = rand(100000000);
 if (localStorage) {
 	if (localStorage.seed) seed = localStorage.seed;
 	else localStorage.seed = seed;
@@ -925,7 +925,7 @@ new Circle(100, [red, green, blue]).center().mov(0,300);
 
 seedRandom(); // clears the seed
 // below will be a random color each time
-new Circle(100, [red, green, blue]).center().mov(0,300);
+new Circle(100, [red, green, blue]).center().mov(200,300);
 END EXAMPLE
 
 PARAMETERS 
@@ -9107,12 +9107,23 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				d+=that.borderWidth?that.borderWidth*2:0;
 			}
 			if (zot(margin)) margin = 0;
-			that.cjsContainer_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options,rtl,willReadFrequently);		
+
+			that.cjsContainer_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options,rtl,willReadFrequently);
 			
+			// if (bounds && options && options.adjustBounds && (a!=bounds.x || b!=bounds.y || c!=bounds.width || d!=bounds.height)) {  
+			// 	zog("015")                  
+            //     that.setBounds(a, b, c, d);
+            //     that.reg(a,b);
+            //     that.hitArea = new zim.Shape().f(black).dr(a-margin,b-margin,c+margin*2,d+margin*2);                
+            // }		
+		
 			if (bounds && ((that.width == 0 && c > 0) || (options && options.adjustBounds))) {   
-                that.setBounds(a, b, c, d);				
-				if (a!=bounds.x || b!=bounds.y || c!=bounds.width || d!=bounds.height) that.reg(a,b);
-                that.hitArea = new zim.Shape().f(black).dr(a-margin,b-margin,c+margin*2,d+margin*2);                
+				var oW = that.width;
+                that.setBounds(a, b, c, d);	
+				if (oW != 0) {
+					if (a!=bounds.x || b!=bounds.y || c!=bounds.width || d!=bounds.height) that.reg(a,b);
+					that.hitArea = new zim.Shape().f(black).dr(a-margin,b-margin,c+margin*2,d+margin*2);        
+				}        
             }			
 			that.z_bc = that.canvas = that.cacheCanvas;
 			return that;
@@ -10020,12 +10031,14 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe
 			displayCheck = true;
 			var cached = image.cacheCanvas;
 			var original = image;
+			var bOriginal = original.getBounds();
 			image.cache(left,top,width,height,scale); // do not chain on end as might be createjs image
 			this.z_bc = image = image.cacheCanvas; // what we will pass to bitmap
 		}		
 	}	
 	this.cjsBitmap_constructor(image);
 	if (original && !cached) original.uncache();
+	if (bOriginal) original.setBounds(bOriginal.x, bOriginal.y, bOriginal.width, bOriginal.height);
 	
 	var that = this;
 	this.type = "Bitmap";	
@@ -29648,7 +29661,7 @@ corner - (default 0) the corner radius if there is a backdropColor provided
 	can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
 indicatorType - (default "dot" or "circle") can also be "box" or "square", "heart", "star"
 	or pass in a ZIM Emoji and Indicator will fade alpha to backgroundAlpha parameter setting for unselected emojis
-    or pass any display object and the this will be used 
+	or pass any display object and the this will be used 
 fill - (default false) set to true to fill in lights to the left of the selectedIndex
 scale - (default 1) for all the lights including spacing
 lightScale - (default 1) scale for each light - keeping the spacing unchanged
@@ -29656,8 +29669,8 @@ interactive - (default false) set to true to make lights clickable
 	clicking on first light when first light is only light on, will toggle light
 shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
 shadowBlur - (default 5) the shadow blur if shadow is set
-selectedIndex - (default 0) - set the selectedIndex at start
-backgroundAlpha - (default 1 or .2 if indicatorType is Emoji) - affects only Emoji indicatorType
+selectedIndex - (default 0) - set the selectedIndex at start.  Use -1 for no indicator at start.
+backgroundAlpha - (default 1 or .2 if indicatorType is Emoji) - affects only Emoji and custom DisplayObject indicatorType
 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
@@ -30870,6 +30883,91 @@ new List({
 }).resize(300).center()
 END EXAMPLE
 
+EXAMPLE 
+const accordionData = {
+	menu: {
+		"Europe": ["London", "Paris", "Oslo"],
+		"Canada": {
+			"Ontario": {
+				"Hamilton": {
+					"Ancaster": [],
+					"Dundas": [],
+					"Westdale": []
+				},
+				"Toronto": [],
+				"Ottawa": []
+			},
+			"British Columbia": ["Victoria", "Vancouver"],
+			"Quebec": ["Montreal", "Quebec City"]
+		},
+		"United States": ["New York", "Atlanta", "San Francisco", "Portland"],
+		"China": ["Bejing", "Hong Kong"],
+		"Antarctica": []
+	},
+	shade: true,
+	dim: true,
+	shift: true,
+	bloom: true,
+	whither: true,
+	subStyles: [
+		{
+			backgroundColor: red,
+			color: white,
+			rollBackgroundColor: purple,
+			rollColor: white,
+			selectedBackgroundColor: white,
+			selectedColor: red,
+			selectedRollBackgroundColor: purple,
+			selectedRollColor: white
+		}, {
+			backgroundColor: blue,
+			color: white,
+			rollBackgroundColor: pink,
+			rollColor: white,
+			selectedBackgroundColor: black,
+			selectedColor: white,
+			selectedRollBackgroundColor: pink,
+			selectedRollColor: white
+		}, {
+			backgroundColor: green,
+			color: white,
+			rollBackgroundColor: brown,
+			rollColor: white,
+			selectedBackgroundColor: black,
+			selectedColor: white,
+			selectedRollBackgroundColor: white,
+			selectedRollColor: black
+		}
+	]
+};
+
+const list = new List({
+	list: accordionData,
+	titleBar: "PLACES",
+	titleBarBackgroundColor: orange,
+	titleBarColor: white,
+	titleBarHeight: 40,
+	scrollBarActive: false,
+	currentSelected: false,
+	indent: 20,
+	height: 650,
+	viewNum: 13.5,
+	boundary: new Boundary(0, 0, W - 200, H - 200),
+	borderWidth: -1,
+	shadowBlur: -1,
+	backdropColor: F.color,
+})
+	.loc(100, 90)
+	.tap(()=>{
+		const currentID = list.selected.listZID;
+		const currentText = list.currentValue; 
+		const parentID = list.tree.getParent(currentID);
+		let parentText;
+		if (parentID) parentText = list.tree.getData(parentID).obj;
+		zog(currentID, currentText, parentID, parentText);
+	});
+END EXAMPLE
+
 PARAMETERS
 ** supports DUO - parameters or single object with properties below
 ** supports OCT - parameter defaults can be set with STYLE control (like CSS)
@@ -31072,6 +31170,8 @@ accordionIndex - read only index of the selected item inside an accordion otherw
 selected - gets the current selected list object (ie. a Button)
 	use selected.checkBox to access the selected CheckBox if checkBox parameter is true
 	if custom objects are in the list then use selected.content to access the custom object
+	list.selected.listZID will give the list id in the tree hierarchy
+	list.tree.getData(list.selected.listZID).obj.text would get the text of the button - or just use list.currentValue
 currentValue - gets or sets the current value - in setting, it matches the first label that has the value anywhere in it
 text - gets or sets the current selected label text
 label - gets current selected label object
@@ -41434,7 +41534,7 @@ continuous - (default false) set to true to force nodes to only be made from the
 startIndex - (default null) set to a point index to force connectors to start at that node
 	all other nodes will have there noMouse() set - also see continous 
 duplicateLine - (default true) set to false to not allow multiple lines between the same connectors
-deleteNode - (default true) set to false to not allow nodes to be deleted by holding or doubleclicking and delete key
+deleteNode - (default true) set to false to not allow nodes to be deleted by holding or doubleclicking and delete or backspace key
 dblclick - (default true) set to false to not allow nodes to be selected by doubleclicking
 	selected nodes can be moved together
 	selecting a node selects its children unless the ctrl key is held at which point it will not select children
@@ -41864,7 +41964,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		if (!zot(startIndex)) that.setAvailableIndexes(startIndex);
 
 		that.keyEvent = function (e) {
-			if (deleteNode && e.keyCode == 46) { // delete
+			if (deleteNode && (e.keyCode == 46 || e.key == "Backspace")) { // delete
 				zim.loop(selectedList, function (obj) {
 					if (obj && obj.parent) removeNode(obj);
 				});
@@ -44270,6 +44370,7 @@ wrap - (default true) set to false to stop the textarea from wrapping (css white
 maxLength - (default null) set to a number to limit the number of characters in the textarea
 frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
 expand - (default 20) hit area around background to count as a press on TextArea - handy for dragging as HTML tag area will override mouse on canvas
+keyboardShift - (default false) set to true to lift stage at least 1/4 height or up to textArea y/2 to raise textArea above keyboard
 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
@@ -46746,6 +46847,8 @@ Chainable function that sets the object's cursor to the type provided - same as
 
 NOTE: if using drag(), it will set its own cursor, so use the dragCursor parameter in that case.
 
+NOTE: there are also custom cursors as the cursors property of Frame.
+
 EXAMPLE
 const circle = new Circle(10, red).center().cur(); // "pointer"
 circle.on("click", ()=>{zog("yes");});
@@ -47518,6 +47621,7 @@ RETURNS obj for chaining
 
 		if (zot(obj) || !obj.on) return;
 
+		
 		var DA = zim.DRAGALL;
 		if (WW.DRAGALL != null) DA = WW.DRAGALL;
 		if (zot(all) && zot(currentTarget)) all = DA;
@@ -50936,9 +51040,9 @@ const physics = new Physics(0);
 // create physics objects using the addPhysics() method
 const circle = new Circle(50,blue,grey).center().addPhysics({bounciness:1.1});
 
-// make sure to centerReg() any rectangular objects
-const rect = new Rectangle(30,400).centerReg().pos(70).addPhysics(false); // static - do not move
-const tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10}); // does not slide easily
+// make sure to reg(CENTER) or centerReg() any rectangular objects
+const rect = new Rectangle(30,400).reg(CENTER).pos(70,0,LEFT,CENTER).addPhysics(false); // static - do not move
+const tri = new Triangle(150,150,150,green,grey).pos(200,0,LEFT,CENTER).addPhysics({linear:10}); // does not slide easily
 
 // turn on dragging
 physics.drag(); // note: to add a boundary use the borders parameter of Physics()
@@ -55292,6 +55396,11 @@ RETURNS target for chaining
 		checkTIME(totalTime, timeType, 40);
 		if (!zot(totalTime)) target.wiggleTimeout = setTimeout(function() {
 			target.stopAnimate(id);
+			if (endOnStart) {
+				var obj = {};
+				obj[property]=zim.Pick.choose(baseAmount);
+				zim.animate({target:target, obj:obj, time:0});
+			}
 			target.dispatchEvent("wigglestop");
 		}, totalTime*(timeType=="s"?1000:1));
 
@@ -56290,7 +56399,10 @@ Older versions returned the mask shape - the mask shape can now be accessed by o
 		var m;
 		function apply() {
 			if (dynamic && (!stage || !mask.stage)) return obj;
-			if (m && m.dispose) m.dispose();
+			if (m) {				
+				if (m.dispose) m.dispose(); // will remove
+				else mask.removeChildAt(0);
+			}
 			m = null;			
 			obj.zimMask = mask.zimMask = m = mask.shape.clone();
 			zim.copyMatrix(m, mask);
@@ -57318,7 +57430,7 @@ EXAMPLE
 // setting TIMECHECK to true will test for any time over 10 as that may be ms 
 
 TIMECHECK = true;
-new Circle().center().wiggle("x", 100,200, 2000, 4000); // will give warning in console about time not being in MS
+new Circle().center().wiggle("x", 100,200, 2000, 4000); // will give warning in console about time not being in ms
 END EXAMPLE
 --*///+29.45
 zim.TIMECHECK = false;
@@ -58391,6 +58503,7 @@ you can define multiple pages objects add and remove pages objects as needed
 
 		var swipeEvent = this.swipe.on("swipe", function(e) {
 			if (!that.active) return;
+			if (!that.parent) return;
 			var direction = e.currentTarget.direction;
 			if (direction == "none") return;
 			// swap direction (swipe up means move down)
@@ -70135,8 +70248,8 @@ EXAMPLE
 const physics = new Physics(0);
 const circle = new Circle(50,blue,grey).center().addPhysics({restitution:1.1}); // how bouncy
 // make sure to reg(CENTER) or centerReg() any rectangular objects
-const rect = new Rectangle(30,400).reg(CENTER).pos(70).addPhysics(false); // static - do not move
-const tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10});
+const rect = new Rectangle(30,400).reg(CENTER).pos(70,0,LEFT,CENTER).addPhysics(false); // static - do not move
+const tri = new Triangle(150,150,150,green,grey).pos(200,0,LEFT,CENTER).addPhysics({linear:10}); // does not slide easily
 physics.drag(); // note: to add a boundary use the borders parameter of Physics()
 // test to see if circle hits rectangle
 // contact callback function receives ZIM object (and physics body as next param)
@@ -78824,21 +78937,22 @@ EXAMPLE
 // ****** note, the app must be interacted with before sound can play
 const synth = new Synth();
 new Button({label:"START"}).center().tap(()=>{
-	synth.play(...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]); // magical arrival
+	synth.play(0,...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]); // magical arrival
 });
 // This code came from here: https://zzfx.3d2k.com
 // Note - it will have zzfx() and you want synth.play() - so copy what is in the brackets.
-// zzfx(...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]);
+// **** - but put a 0 for the pan before their arguments (or a number from -1 to 1 for pan)
+// zzfx(0,...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]);
 
 // Note - above is ES6 - otherwise in ES5:
-synth.play(null,0,-1500,.3,.3,1.15,null,1.01,2.37,-7.65,1100,.05,2,null,-0.1,.07,5e-4); // magical arrival
+synth.play(0,null,0,-1500,.3,.3,1.15,null,1.01,2.37,-7.65,1100,.05,2,null,-0.1,.07,5e-4); // magical arrival
 END EXAMPLE
 
 EXAMPLE
 // play() example with event for complete
 const synth = new Synth();
 const circle = new Circle(50,blue).center().tap(function () {
-	var synthSound = synth.play(...[,,229,.04,.04,.47,,.84,7.85,,,,,.2,,.05]);
+	var synthSound = synth.play(0,...[,,229,.04,.04,.47,,.84,7.85,,,,,.2,,.05]);
 	synthSound.on("complete", ()=>{
 		circle.removeFrom();
 		S.update();
@@ -90133,8 +90247,8 @@ const ask = new CamAsk().show(yes=>{
 		const camMotion = new CamMotion({
 			visualizerColor:[green,orange,yellow,red,blue,purple,pink], 
 			visualizerBaseColor:clear, 
-			visualizerScale:60, 
-			visualizerBaseScale:10
+			visualizerScale:6, 
+			visualizerBaseScale:1
 		}).center();
 
 		// Optionally adjust the circles