zimjs 16.4.5 → 16.4.6

package/package.json

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

package/src/zim.js

@@ -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;
@@ -30872,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)
@@ -31074,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
@@ -41436,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
@@ -41866,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);
 				});
@@ -44272,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
@@ -47522,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;
@@ -50940,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()
@@ -55296,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));
 
@@ -56294,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);
@@ -70140,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)
@@ -78829,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();