zimjs 17.2.2 → 17.2.4

package/.gitattributes

@@ -20,3 +20,4 @@
 *.PDF	 diff=astextplain
 *.rtf	 diff=astextplain
 *.RTF	 diff=astextplain
+

package/.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [danzen]
 patreon: zimjs
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username

package/package.json

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

package/src/zim.js

@@ -10816,16 +10816,16 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 // slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
-new SlicedBitmap(1600, pic.height, pic, [0.25,0.75],[0.25,0.75]], [[0,1,0],[0,1,0])
+new SlicedBitmap(1600, pic.height, pic, [[0.25,0.75],[0.25,0.75]], [[0,1,0],[0,1,0]])
 	.center()
 	.transform({minScaleX:.05, minScaleY:.05});
 END EXAMPLE
 
 EXAMPLE
 // slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
-const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
-const startSlices = [0.25,0.75],[0.25,0.75]];
-const startTypes = [[0,2,0],[0,1,0]; // middle is tiled horizontally and stretched vertically
+const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
+const startSlices = [[0.25,0.75],[0.25,0.75]];
+const startTypes = [[0,2,0],[0,1,0]]; // middle is tiled horizontally and stretched vertically
 const slicer = new Slicer({
 	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
 	scale:.5, 
@@ -17592,36 +17592,35 @@ Note the points property has been split into points and pointObjects (and there
 			};
 
 			// squiggle
-			if (that.interactive) {
-				if (move) shape.drag({onTop:false});
-				moveDownEvent = shape.on("mousedown", function(e) {
-					stage = e.target.stage;
-					startPosition = {x:shape.x, y:shape.y};
-					if (that.selectPoints) that.keyFocus = true;
-					upTop();
-				});
-				movePressEvent = shape.on("pressmove", function() {
-					sets.x = shape.x;
-					sets.y = shape.y;
-					sticks.x = shape.x;
-					sticks.y = shape.y;
-				});
-				moveUpEvent = shape.on("pressup", function() {
-					var moveControlCheck = (shape.x != startPosition.x || shape.y != startPosition.y);
-					var movePoint = shape.localToLocal(that.regX,that.regY,that.parent);
-					that.x = movePoint.x;
-					that.y = movePoint.y;
-					sets.x = sets.y = sticks.x = sticks.y = shape.x = shape.y = 0;
-					if (moveControlCheck) {
-						var ev = new createjs.Event("change");
-						ev.controlType = "move";
-						that.dispatchEvent(ev);
-					}
-					if (stage) stage.update();
-				});
+			if (that.interactive && move) shape.drag({onTop:false});
+			moveDownEvent = shape.on("mousedown", function(e) {
+				stage = e.target.stage;
+				startPosition = {x:shape.x, y:shape.y};
+				if (that.selectPoints) that.keyFocus = true;
+				upTop();
+			});
+			movePressEvent = shape.on("pressmove", function() {
+				sets.x = shape.x;
+				sets.y = shape.y;
+				sticks.x = shape.x;
+				sticks.y = shape.y;
+			});
+			moveUpEvent = shape.on("pressup", function() {
+				var moveControlCheck = (shape.x != startPosition.x || shape.y != startPosition.y);
+				var movePoint = shape.localToLocal(that.regX,that.regY,that.parent);
+				that.x = movePoint.x;
+				that.y = movePoint.y;
+				sets.x = sets.y = sticks.x = sticks.y = shape.x = shape.y = 0;
+				if (moveControlCheck) {
+					var ev = new createjs.Event("change");
+					ev.controlType = "move";
+					that.dispatchEvent(ev);
+				}
+				if (stage) stage.update();
+			});
 
-				if (!that.move) stopDragging(true); // true is first time
-			}
+			if (!that.move) stopDragging(true); // true is first time
+			
 
 			function upTop() {
 				if (that.onTop) {
@@ -27649,6 +27648,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 			if (replace) that.contentContainer.removeAllChildren();
 			if (center) obj.center(that.contentContainer, index);
 			else obj.addTo(that.contentContainer, index);
+			// addHTML(that.contentContainer);
 			return that;
 		}
 		
@@ -29112,6 +29112,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 		}
 
 		this._enabled = true;
+		var lastReadOnly;
+		setTimeout(function() {
+			lastReadOnly = that.readOnly;
+		},50);
 		Object.defineProperty(that, 'enabled', {
 			get: function() {
 				return that._enabled;
@@ -29123,6 +29127,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				} else {
 					setDrag();
 				}
+				if (that.blinker) {
+					if (!value) {
+						that.blinker.vis(false);
+						that.selection.vis(false);
+						lastReadOnly = that.readOnly;
+						that.readOnly = true;
+					} else {
+						that.readOnly = lastReadOnly;
+						if (!that.readOnly) that.blinker.vis(true);
+						that.selection.vis(true);
+					}
+				}
 				zenable(that, value);
 			}
 		});
@@ -31109,7 +31125,12 @@ align - get or set the horizontal alignment of the text
 color - gets or sets the label text color
 backgroundColor - gets or sets the background color
 readOnly - get or set the field as readOnly - also see readOnly parameter
+	read only of true will allow selection and copy but not typing and cursor will be removed
+	set enabled to false to not allow selection and copy
 enabled - default is true - set to false to disable
+	setting enabled false will remember the readOnly setting when enabled is set to false 
+	so when set to true again it will be that remembered readOnly and will not rememember any changes to readOnly made in-between 
+	so any in-between readOnly changes will have to be re-applied after enabled is set back to true
 veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
 	for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
 
@@ -31522,14 +31543,16 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba
 	
 	Object.defineProperty(that, 'readOnly', {
 		get: function() {
-			return readOnly;
+			return readOnly;			
 		},
 		set: function(value) {			
 			readOnly = value;
-			that.htmlTag.setAttribute("readonly", readOnly);
+			that.htmlTag.readOnly = readOnly;
+			if (value) that.blinker.vis(false);
+			else that.blinker.vis(true);
 		}
 	});
-	if (readOnly) that.readOnly = true;
+	that.readOnly = readOnly;
 
 	Object.defineProperty(that, 'focus', {
 		get: function() {
@@ -32144,9 +32167,10 @@ list - (default Options 1-30) an array of strings, numbers or zim Label objects
 	note: the Accordion List is currently incompatible with the Organizer, addTo() and removeFrom()
 viewNum - (default 5) how many items to show in the width and height provided
 	adjusting this number will also change the overall scale of custom items for horizontal lists 
-    (this does not affect vertical lists due to the way vertical tabs are optimized)
+	(this does not affect vertical lists due to the way vertical tabs are optimized)
 	or see the noScale parameter to avoid scaling custom items in horizontal lists
 	if no items are provided to start but rather added with addAt() then choose a viewNum that roughly matches how many items will fit in the view
+	Note - the items will not be scaled larger by a viewNum setting... only scaled smaller.
 vertical - (default true) set to false to make a horizontal list
 currentSelected - (default false) set to true to show the current selection as highlighted
 align - (default CENTER) horizontal align
@@ -32171,8 +32195,8 @@ borderColor - (default silver) border color
 borderWidth - (default 1) the thickness of the border
 padding - (default 0) places the content in from edges of border (see paddingH and paddingV)
 corner - (default 0) is the rounded corner of the list (does not accept corner array - scrollBars are too complicated)
-swipe - (default auto/true) the direction for swiping set to none / false for no swiping
-	also can set swipe to just vertical or horizontal
+swipe - (default AUTO/true) the direction for swiping set to NONE / false for no swiping
+	also can set swipe to just VERTICAL or HORIZONTAL
 scrollBarActive - (default true) shows scrollBar (set to false to not)
 scrollBarDrag - (default true) set to false to not be able to drag the scrollBar
 scrollBarColor - (default borderColor) the color of the scrollBar
@@ -34084,18 +34108,23 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 
 		if (zot(align)) align = DS.align!=null?DS.align:"center";
 		if (zot(spacing)) spacing = DS.spacing!=null?DS.spacing:2;
-		if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.tin;
+		if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.tin;		
 		if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.grey;
 		if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:zim.charcoal;
 		if (zot(selectedRollBackgroundColor)) selectedRollBackgroundColor = DS.selectedRollBackgroundColor!=null?DS.selectedRollBackgroundColor:zim.grey;
-		if (zot(color)) color = DS.color!=null?DS.color:zim.white;
+		if (zot(color)) color = DS.color!=null?DS.color:zim.white;		
 		if (zot(rollColor)) rollColor = DS.rollColor!=null?DS.rollColor:color;
 		if (zot(selectedColor)) selectedColor = DS.selectedColor!=null?DS.selectedColor:color;
 		if (zot(selectedRollColor)) selectedRollColor = DS.selectedRollColor!=null?DS.selectedRollColor:rollColor;
 
 		var c = new zim.Container();
 		c.type = "CheckItem";
-		c.checkBox = new zim.CheckBox({size:size, label:label, color:color, tap:true}),
+		label = zik(label);
+		rollColor = zik(rollColor);
+		selectedColor = zik(selectedColor);
+		rollBackgroundColor = zik(rollBackgroundColor);
+		 
+		c.checkBox = new zim.CheckBox({size:size, label:label, color:color, tap:true});
 		c.backing = new zim.Rectangle(width-spacing*2, c.checkBox.height+paddingV*2, backgroundColor).addTo(c);
 		c.checkBox.center(c);
 		if (align != "center" && align != "middle") c.checkBox.pos(paddingH,null,align=="right");
@@ -36410,7 +36439,7 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 // slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
-const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
+const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
 const slicer = new Slicer({
 	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
 	scale:.5,
@@ -36421,7 +36450,7 @@ const slicer = new Slicer({
 
 slicer.on("loaded", ()=>{
 	if (preview) preview.dispose();
-	preview = new zim.SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
+	preview = new SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
 		.pos(0,100,CENTER,BOTTOM)
 		.transform({minScaleX:.05, minScaleY:.05});
 });
@@ -36947,6 +36976,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				loader.resize();
 			}
 			adjustBoxes();	
+			
 			if (obj.width) {
 				obj.scaleTo(that.box,100,100).loc(0,0,sc,0);
 				that.stage.update();
@@ -36955,7 +36985,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 					obj.scaleTo(that.box,100,100).loc(0,0,sc,0);
 					that.stage.update();
 				}, 50);
-			}		
+			}
+						
 		}
 		if (resize) {
 			that.resizeHandle.on("pressup", function() {
@@ -37157,7 +37188,7 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set
 
 EXAMPLE
 // slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
-const pic = new Pic("car.png"); // preload this in Frame() or loadAssets()
+const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
 const slicer = new Slicer({
 	obj:pic.clone(),  // slicer will adjust obj so clone the pic so can use it unaffected later
 	scale:.5,
@@ -47360,6 +47391,7 @@ value - get or set the text content of the TextArea
 text - get or set the text value
 focus - get or set if the TextArea tag has focus or use setFocus() to set (might need timeout 100ms before setting)
 readOnly - set to true to not be able to edit or to false to be able to edit (always can select)
+	set enabled to false to disable selection
 maxLength - get or set the maximum number of characters typed - will not truncate existing characters until typed
 tag - the HTML textarea tag - just a regular HMTL form tag which can be styled
 background - access to the Rectangle() used for the background
@@ -47368,6 +47400,8 @@ background - access to the Rectangle() used for the background
 blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
 	will be set to true if this component is the first made or component is the last to be used
+enabled - get or set enabled of TextArea 
+	this will remember last readOnly so any setting of readonly in between enabled settings will have to be reapplied.
 frame - get or set the frame - set this if changing frames
 
 ALSO: see ZIM Container for properties such as:
@@ -47679,6 +47713,30 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo
 				}
 			}
 		});
+
+		that._enabled = true;
+		var lastReadOnly = that.readOnly;
+		Object.defineProperty(that, 'enabled', {
+			get: function() {
+				zog("here")
+				return that._enabled;
+			},
+			set: function(value) {
+				if (!value) {
+					lastReadOnly = that.readOnly;
+					that.readOnly = false; // needed to remove selection
+					that.focus = false;						
+					that.tag.style.pointerEvents = "none";
+					setTimeout(function() {						
+						that.readOnly = true;
+					},50); // setting readonly brings back selection even after blur - bug in HTML
+				} else {
+					that.tag.style.pointerEvents = "unset"; // tried all, unset, inherent, auto, initial, revert
+					that.readOnly = lastReadOnly; // does not bring selection back
+				}				
+				zenable(that, value);
+			}
+		});
 	
 		this.resizeEvent = frame.on("resize", that.resize);
 		this.updateEvent = frame.on("update", that.resize);
@@ -51122,7 +51180,7 @@ RETURNS obj for chaining
 
 			if (e.stageX == null) return; // added for TextureActive drag in 2D view
 
-			if (slide) {				
+			if (slide) {	
 				dragObject.dispatchEvent("slidestart");
 				
 				if (dragObject.parent) {
@@ -51164,6 +51222,12 @@ RETURNS obj for chaining
 					lastBackT = upT = 0;
 				}				
 
+				if (Math.abs(dX) < 1 && Math.abs(dY) < 1) {
+					hasMoved = false;
+					dragObject.dispatchEvent("slidestop");
+					zim.Ticker.remove(obj.zimDragTicker);
+				}
+
 				// if (dampX) dampX.immediate(50);
 				// if (dampY) dampY.immediate(0);
 
@@ -51214,6 +51278,8 @@ RETURNS obj for chaining
 							target.addAt(placeObject, target.dropReticleIndex);								
 			
 							target.dropItem = dragObject;
+							dragObject.droppedTarget = target;
+							dragObject.dropTarget = target;
 							target.dropList = target;
 							target.dropNewIndex = target.dropReticleIndex;
 							target.dropReticleIndex = null;		
@@ -51238,11 +51304,13 @@ RETURNS obj for chaining
 							else placeObject.mouse();						
 							if (dropFull) target.dropFull = true;	
 							placeObject.droppedTarget = target;													
+							placeObject.dropTarget = target;													
 							return false;
 						}
 					} 
 				});
-				if (miss) {				
+				if (miss) {		
+					dragObject.dropTarget = dragObject.droppedTarget = null;		
 					if (dropBack) {
 						dragObject.animate({
 							props:{x:dragObject.dropStartX, y:dragObject.dropStartY, scale:dragObject.dropStartS}, 
@@ -51351,7 +51419,7 @@ RETURNS obj for chaining
 				o.y = desiredY;
 				o.slideStartX = null;
 				o.slideStartY = null;
-				if (hasMoved) {
+				if (hasMoved) {					
 					o.dispatchEvent("slidestop");
 					zim.Ticker.remove(obj.zimDragTicker);
 				}
@@ -51376,7 +51444,7 @@ RETURNS obj for chaining
 		function setUpSlide() {
 			obj.zimDragTicker = function() {
 				if (zot(obj.slideStartX)) return; // don't stop other things like window scrollbar from moving object
-
+				
 				if (!dragObject) dragObject = obj; // could be risky if intending to drag children
 				if (obj.downCheck) {
 					var point;
@@ -53912,7 +53980,7 @@ Dynamically changes or adds a boundary rectangle to the object being dragged wit
 
 EXAMPLE
 const boundary = new Boundary(100,100,500,400); // x,y,w,h
-circle.gestureBoundary(boundary);
+new Circle().center().gestureBoundary(boundary);
 END EXAMPLE
 
 PARAMETERS
@@ -58063,7 +58131,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim
 				// if (internal) target.percentComplete = target.pathRatio = 0;
 
 				if (zot(command)) command = true;
-				if (target.pan == undefined) {
+				if (target.pan == undefined && target.type != "Timer") { // hmmm what about other objects with paused properties...
 					if (target.type != undefined) target.paused = true;
 					target.animating = false;
 				}
@@ -79152,7 +79220,6 @@ zim.Emitter = function(obj, width, height, interval, num, life, fade, shrink, wa
 							}
 						});
 					}
-
 					if (
 						cache && 
 						!particle.emitShape && 
@@ -79264,7 +79331,7 @@ zim.Emitter = function(obj, width, height, interval, num, life, fade, shrink, wa
 					else max = zik(life);
 					var min;
 					if (interval.min) min = interval.min;
-					else if (Array.isArray(interval)) min = zim.arrayMinmin(interval).min;
+					else if (Array.isArray(interval)) min = zim.arrayMinMax(interval).min;
 					else min = zik(interval);
 					warm = Math.min(200, Math.round(max/min));
 				}		
@@ -79509,6 +79576,7 @@ zim.Emitter = function(obj, width, height, interval, num, life, fade, shrink, wa
 		return that.cloneProps(new zim.Emitter(objClone, width, height, that.interval, that.num, that.life, that.fade, that.shrink, warm, that.decayTime, that.decayStart, that.trace, that.traceFadeTime, that.traceShiftX, that.traceShiftY, that.angle, that.emitterForce, that.gravity, that.wind, that.layers, that.animation, zim.copy(that.random), that.horizontal, that.vertical, that.sink, that.sinkForce, cache, that.events, startPaused, that.pool, that.poolMin, particles, focusWarm, style, that.group, inherit));
 	};
 
+	
 	this.dispose = function() {
 		if (that.zimInterval) that.zimInterval.clear();
 		if (emitterTicker) {
@@ -93299,9 +93367,11 @@ Or, the Three class can be used to help show ZIM in threejs
 as an interactive and animated canavs texture.
 See also TextureActive and TextureActives in the main ZIM docs.
 
+See: https://zimjs.com/three - for the mini-site with three.js
+
 three.js examples - with three.js inside ZIM
 https://zimjs.com/bits/view/three.html
-https://zimjs.com/three/
+https://zimjs.com/capture/three/
 https://codepen.io/zimjs/pen/abzXeZX
 https://codepen.io/zimjs/pen/qGPVqO