zimjs 19.1.0 → 19.1.1

package/package.json

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

package/src/zim.js

@@ -75,7 +75,6 @@ var z_i; // iterator i in global namespace
 ////////////////  ZIM WRAP  //////////////
 // Zim Wrap creates global wrapper functions for less typing
 
-
 /*--
 zog(item1, item2, etc.)         ~ log
 
@@ -12155,7 +12154,6 @@ 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, 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
@@ -14944,11 +14942,12 @@ EXAMPLE
 new Frame(FILL, 1024, 768, clear, clear, ready);
 function ready() {
 	const fragment = `
+		out vec4 fragColor;
 		void main() {
 			vec2 uv = gl_FragCoord.xy / iResolution.xy;
 			vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0,2,4));
-			gl_FragColor = vec4(vec3(color), 1.0);
-		} 
+			fragColor = vec4(vec3(color), 1.0);
+		}
 	`;    
 	const shader = new zim.ShaderOverlay(W, H, fragment).center();
 	shader.tag.style.zIndex = -50; // put shader beneath stage
@@ -24686,7 +24685,8 @@ zim.LabelOnArc = function(label, size, font, color, radius, flip, spacing, lette
 			var rev = label.text.split("").reverse().join("");
 			label.text = rev;
 		}
-		letters = that.letters = new zim.Container(that.width, that.height).centerReg(that);
+		zog(that.width, that.height)
+		letters = that.letters = new zim.Container(100,100).center(that);
 
 		that.numLetters = label.text.length;
 		that.letterHeight = label.height;
@@ -24756,7 +24756,8 @@ zim.LabelOnArc = function(label, size, font, color, radius, flip, spacing, lette
 			var letter = letters.getChildAt(i);
 			// var amount = angles[i];
 			lastAngle = letter.rotation = lastAngle + angles[i];
-		}		
+		}	
+		letters.setBounds(null);	
 	}
 
 	this.setProps = function(props) {
@@ -24799,6 +24800,9 @@ zim.LabelOnArc = function(label, size, font, color, radius, flip, spacing, lette
 		}
 	});
 
+	// TODO - in ZIM 020 - add this line
+	// that.setBounds(null);
+
 	if (style!==false) zim.styleTransforms(this, DS);
     this.clone = function() {
         return that.cloneProps(new zim.LabelOnArc(label, size, font, color, radius, flip, spacing, letterSpacing, angles, showCircle, arcColor, arcBorderColor, arcBorderWidth, radiusSpread, rtl, style, this.group, inherit));
@@ -29216,10 +29220,9 @@ content - gives access to the content provided as a parameter to the Panel()
 		buttons - an array of the Button objects if provided
 		config - the original content config object {}
 panelHeight - get and set the height of the panel without scaling it as height does (for width, remake the Panel object)
-titleBar - access to the titleBar container
+titleBar - access to the titleBar container - which also has a backing property
 titleBarlabel - access to the label of the current panel
 text - access to the text of the current panel
-titleBar - gives access to the titleBar Container - which also has a background property
 titleBarLabel - gives access to the titleBar label
 closeIcon - access to the close button
 collapseIcon - access to the ZIM Shape if there is a collapse triangle
@@ -37033,6 +37036,7 @@ barLength - (default 300) the length of the bar (the slider slides along its len
 barWidth - (default 3) the width of the bar (how fat the bar is)
 barColor - (default granite) the color of the bar (any CSS color)
 vertical - (default false) set to true to make slider vertical
+	vertical will have a default value of max
 useTicks - (default false) set to true to show small ticks for each step (step > 0)
 tickColor - (default barColor) set the tick color if ticks are set
 tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount
@@ -37060,7 +37064,7 @@ keyArrowsV - (default true) use up and down arrows when keyArrows is true
 damp - (default null) set to value such as .1 to damp the slider value
 	use with Ticker rather than "change" event - eg:
 	Ticker.add(()=>{circle.x = slider.value;});
-value - |ZIM VEE| (default min) a starting value for the slider
+value - |ZIM VEE| (default min for horizontal or max for vertical) a starting value for the slider
 expand - (default null or 10 for mobile) set to value to expand the interactive area of the slider button
 expandVertical - (default expand) set to value to expand the vertical interactive area of the slider button
 expandBar - (default 20 or 0 for horizontal) set to value to expand the interactive area of the slider bar
@@ -37227,7 +37231,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				.sca(0,1).rot(vertical?-90:0).mov(vertical?-accentOffset-accentSize-barWidth/2:0, vertical?barLength:accentOffset+barWidth/2)
 				.addTo(this);			
 		}
-		function drawAccent() {
+		function drawAccent() {			
 			accent.sca((that.value-that.min)/Math.abs(that.max-that.min), 1);
 		}
 
@@ -37348,7 +37352,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			}
 		}
 
-		var myValue = min;
+		var myValue = vertical?max:min; // ZIM 019 patch
 		var lastValue = 0; // does not include min so always starts at 0
 		this.button = button;
 		this.cur("pointer");
@@ -37695,6 +37699,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 
 		if (!zot(value)) that.value = value;
+		if (accent) drawAccent();
 		
 		zim.setSwipe(this, false);
 
@@ -49241,7 +49246,7 @@ resize() - call the resize event if the scale or position of the Loader is chang
 	Note: if the Frame itself changes location in the HTML document, call a F.update()
 	this will then dispatch an update event to the Loader and it will resize()
 	this is not needed if resizing the window or scrolling - see Frame update() method docs
-save(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality) - save a picture or text (supports ZIM DUO)
+save(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality, remakeCache) - save a picture or text (supports ZIM DUO)
 	content - the Display object to be saved such as a Container, Bitmap, etc. 
 		or text (or Label, TextInput, TextArea) or JSON or object for JSON
 		if text or json, then x, y, width, height, cached, cachedBounds, data, and quality are ignored
@@ -49256,6 +49261,11 @@ save(content, filename, x, y, width, height, cached, cachedBounds, type, data, q
 		otherwise save returns the object for chaining
 	quality - (default .92) a number between 0 an 1 representing the quality of the saved image (jpeg)
 		note, this parameter may be moved to before data in the next version of ZIM 
+	remakeCache - (default true) set to false if cached and do not want to recache due to using updateCache with blendmode
+		BUT - probably want a backing color for blit art
+		so recommend making a new Page(W,H,black) then add the art container to the backing and save the backing 
+		then add the art container back to the stage 
+		then do not set the remakeCache so it stays true and caches the page 
 
 Button methods:
 setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)
@@ -49586,11 +49596,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			uploadTag.addEventListener("drop", uploadEvent);
 		}
 
-		this.save = function(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality) {
+		this.save = function(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality, remakeCache) {
 		
-			var sig = "content, filename, x, y, width, height, cached, cachedBounds, type, data, quality";
+			var sig = "content, filename, x, y, width, height, cached, cachedBounds, type, data, quality, remakeCache";
 			var duo; if (duo = zob(that.save, arguments, sig)) return duo;
 			if (zot(content)) content = frame.stage;			
+			if (zot(remakeCache)) remakeCache = true;			
 
 			if (type=="text") type = "txt";
 			if (zot(type)) type = "png";
@@ -49632,15 +49643,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (zot(height)) height = (content.getBounds && content.getBounds()) ? content.getBounds().height : frame.height;
             var cacheO = content.cacheCanvas;
 
-			content.cache(x, y, width, height);
-
+			if (remakeCache) content.cache(x, y, width, height);
 
 			if (data) {
 				var image = content.cacheCanvas.toDataURL('image/' + type, quality);
-				if (cached) {
-					if (cachedBounds) content.cache(cachedBounds.x, cachedBounds.y, cachedBounds.width, cachedBounds.height);
-				} else {
-					content.uncache();
+				if (remakeCache) {
+					if (cached) {
+						if (cachedBounds) content.cache(cachedBounds.x, cachedBounds.y, cachedBounds.width, cachedBounds.height);
+					} else {
+						content.uncache();
+					}
 				}
 				return image;
 			}
@@ -49691,10 +49703,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				// win.document.close();
 
 			// }
-			if (cached || cacheO) {
-				if (cachedBounds) content.cache(cachedBounds.x, cachedBounds.y, cachedBounds.width, cachedBounds.height);
-			} else {
-				content.uncache();
+			if (remakeCache) {
+				if (cached || cacheO) {
+					if (cachedBounds) content.cache(cachedBounds.x, cachedBounds.y, cachedBounds.width, cachedBounds.height);
+				} else {
+					content.uncache();
+				}
 			}
 
 			return that;
@@ -58357,7 +58371,7 @@ sequenceCall - (default null) the function that will be called for each sequence
 sequenceParams - (default null) a parameter sent to the sequenceCall function
 sequenceReverse - |ZIM VEE| (default false) set to true to sequence through container or array backwards
 sequenceRatio - (default null) set to a value to adjust the rate based on item ratio property
-    see https://zimjs.com/016/normalize.html
+	see https://zimjs.com/016/normalize.html
 	see Container() ratio property and normalize() method which give a ratio property.
 	This will automatically set sequence to 0 so that each item in the container (or tile) is animated individually
 	the sequenceRate value will be multiplied by the item's ratio and then added to the rate (see rate parameter)
@@ -69790,7 +69804,6 @@ Beads
 zim class - extends a zim.Container which extends a createjs.Container
 
 DESCRIPTION
-
 Beads adds objects around a Squiggle or Blob path.
 Different objects can be specified with ZIM VEE (Pick) values
 to put random or sequenced objects around path.
@@ -71831,6 +71844,7 @@ const camera = three.camera;
 
 const controls = new OrbitControls(camera, three.canvas);
 
+Note: put TextureActives above applying any TextureActive textures to three.js objects
 const textureActives = new TextureActives([panel, backing], THREE, three, renderer, scene, camera, controls, 1, 0, 1500);
 
 // can capture raydown, raymove, rayup, rayover and rayout
@@ -72085,6 +72099,8 @@ XR
 TextureActive will detect if XR (AR/VR) is being used and will use the suitable Raycaster
 Additional classes are provided with the ZIM Three helper library for controllers, movement and teleport 
 
+NOTE: put the TextureActives object before applying any TextureActive textures to three.js objects
+
 NOTE: for XR, a layer must be set so the controllers do not get in the way of interactivity
 so in the TextureActives() set layer:1 and when adding meshes use addMesh(mesh, 1)
 
@@ -72131,6 +72147,7 @@ const camera = three.camera;
 
 const controls = new OrbitControls(camera, three.canvas);
 
+Note: put TextureActives above applying any TextureActive textures to three.js objects
 const textureActives = new TextureActives([panel, backing], THREE, three, renderer, scene, camera, controls, 1, 0, 1500);
 
 // can capture raydown, raymove, rayup, rayover and rayout
@@ -76210,7 +76227,13 @@ dispatches a "moving" event if target is moving and "startmoving" and "stopmovin
 						pp.y < con.y || pp.y > con.y+con.height
 					) return;
 				}
-				if (type == "mousedown") {					
+				if (type == "mousedown") {	
+
+					// added ZIM 019 patch to not include objects outside container if provided unless in mousedownIncludes
+					if (that.mouseDownIncludes || container) under = stage.getObjectUnderPoint(e.stageX, e.stageY, 1);
+					if (container && under && under!=target && !container.contains(under)) {
+						if (mousedownIncludes && mousedownIncludes.indexOf(under) == -1) return;
+					}			
 					if (!Array.isArray(that.mousedownIncludes)) that.mousedownIncludes = [that.mousedownIncludes];
 					if (that.mousedownIncludes.indexOf(container)<0) {
 						for (i=0; i<container.numChildren; i++) {
@@ -76257,9 +76280,13 @@ dispatches a "moving" event if target is moving and "startmoving" and "stopmovin
 				if (type == "pressdrag" && !target.hitTestPoint(e.stageX/zim.scaX, e.stageY/zim.scaY)) return;
 				moveCheck = false;
 				if (!Array.isArray(that.mousedownIncludes)) that.mousedownIncludes = [that.mousedownIncludes];
-				var inCheck = false;
-	
-				if (that.mouseDownIncludes) under = stage.getObjectUnderPoint(e.stageX, e.stageY, 1);
+				var inCheck = false;	
+				
+				// added ZIM 019 patch to not include objects outside container if provided unless in mousedownIncludes
+				if (that.mouseDownIncludes || container) under = stage.getObjectUnderPoint(e.stageX, e.stageY, 1);
+				if (container && under && under!=target && !container.contains(under)) {
+					if (mousedownIncludes && mousedownIncludes.indexOf(under) == -1) return;
+				}
 
 				for (i=0; i<that.mousedownIncludes.length; i++) {
 					if (under && that.mousedownIncludes[i].hitTestPoint && that.mousedownIncludes[i].hitTestPoint(e.stageX/zim.scaX, e.stageY/zim.scaY) && that.mousedownIncludes[i].contains(under)) {
@@ -76270,7 +76297,7 @@ dispatches a "moving" event if target is moving and "startmoving" and "stopmovin
 					for (i=0; i<container.numChildren; i++) {
 						var child = container.getChildAt(i);
 						// returning on first container?
-						if (that.mousedownIncludes.indexOf(child)==-1 && child.mouseEnabled && child.hitTestPoint && child.hitTestPoint(e.stageX/zim.scaX, e.stageY/zim.scaY)) return;
+						if (that.mousedownIncludes.indexOf(child)==-1 && child.mouseEnabled && child.hitTestPoint && child.hitTestPoint(e.stageX/zim.scaX, e.stageY/zim.scaY)) return;						
 					}
 				}
 				var p = container.globalToLocal(mouseMoveOutside?e.rawX/zim.scaX:e.stageX/zim.scaX, mouseMoveOutside?e.rawY/zim.scaY:e.stageY/zim.scaY);
@@ -88103,25 +88130,45 @@ dispatches a "ready" event when the sound source is connected and the calculate(
 			} else if (input.type == "SynthSound") {
 				connectSource(input.gain);
 			} else {
-				if (input.type && input.type == "sound") {zogy("ZIM SoundWave: pass in the result of a zim.asset('somesound').play() for the input"); return;}
+				if (input.type && input.type == "sound") {zogy("ZIM SoundWave: pass in the result of an Aud('somesound').play() for the input"); return;}
 				var audio,source;
 				if (input.playbackResource) {
-					audio = input.playbackResource; // a playing zim.asset("somesound").play()
-					if (audio.mediaSourceNode) {
-						source = audio.mediaSourceNode;
-					} else {					
-						source = audioContext.createMediaElementSource(audio);
-					}
+					audio = input.playbackResource; // a playing Aud("somesound").play()
+
+					// ZIM 019 Patch - thanks Vishwas Gagrani for the report
+					// if audio finishes cannot properly remove the source - bug in HTML 5 Audio
+					// which caused errors if trying to do another SoundWave on the audio 
+					// so remember if already had a Soundwave 
+					// and need to use that audioContext and analyser
+					if (audio.firstSource) {
+						source = audio.firstSource;
+						audioContext = audio.audioContext;
+						analyser = audio.analyser;
+					} else {
+						if (audio.mediaSourceNode) {
+							source = audio.mediaSourceNode;
+						} else {
+							source = audioContext.createMediaElementSource(audio);
+						}		
+					}			
 				} else {
 					audio = input; // a playing <audio> tag zid("soundTagID").play()
-					source = audioContext.createMediaElementSource(audio);
-				}				
+					if (audio.firstSource) {
+						source = audio.firstSource;
+						audioContext = audio.audioContext;
+						analyser = audio.analyser;
+					} else {						
+						source = audioContext.createMediaElementSource(audio);		
+					}			
+				}					
+				audio.firstSource = source;	
+				audio.audioContext = audioContext;		
+				audio.analyser = analyser;
 				connectSource(source);
 			}
 		};
 		this.setInput(input);
 
-
 		var steps;
 		var lastSource;
 				
@@ -88208,6 +88255,7 @@ dispatches a "ready" event when the sound source is connected and the calculate(
 			setTimeout(function(){that.dispatchEvent("ready");}, 50);
 		}
 		this.dispose = function(context) {
+			// if (lastSource) lastSource.disconnect();
 			if (lastSource && analyser) lastSource.disconnect(analyser);
 			if (context && audioContext) audioContext.close();
 			if (analyser) analyser.disconnect();
@@ -91762,7 +91810,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)) {s
+		if (!zot(path) && path.replace) {
 			path = path.replace(/\/$/,"");
 			path = path + "/";
 			WW.PATH = path;
@@ -92268,7 +92316,7 @@ zim.Frame = function(scaling, width, height, color, outerColor, ready, assets, p
 		// now check auto load assets or broken if second
 		
 		if (WW.PATH!=null) zim.PATH = WW.PATH;
-		if (zim.PATH!=null) {
+		if (zim.PATH!=null && zim.PATH.replace) {
 			zim.PATH = zim.PATH.replace(/\/$/,"");
 			zim.PATH = zim.PATH + "/";
 		}