ZIM 014

ZIM 014 - https://zimjs.com

ZIM has now moved to a three number major release 014. Past versions are ZIM ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT, NFT, ZIM and now we have ZIM 014. We will continue to 015, etc. ZIM version ZIM 00, 01, 02 was fun while but we have decided to leave that system. Here are the updates which can be seen formatted here:

https://zimjs.com/updates.html

A large part of this update was external to the actual ZIM code including a STORE, SITE REDESIGN and EDITOR updates.

STORE

https://zimjs.com/store
Added a new STORE page to ZIM along the top.
And moved NEWS into ABOUT under VERSIONS section.
The Zapp Store has sample mobile / desktop apps made with ZIM and the PWA tool.
ZAPPS:
Dazzle Finger - https://zimjs.com/finger - finger follows path to make magic
Odd Robots - https://zimjs.com/robots - find the good and bad robots
Plasma Points - https://zimjs.com/points - collect plasma points
Leader Board - https://zimjs.com/board - top scores from the zapps
The Plasma Points zapp has 100 points available
You can collect them on pages in the site, by accomplishing social tasks
and by making a zapp in the ZIM Editor.
We hope you enjoy the Zapps - but it is also a demonstration
of using ZIM for mobile apps and things like collectables, logins, etc.
The four zapps were made in less than a month
along with all the other updates to ZIM and the site.
Now, go get some high scores!

NEW SITE HEADER

Added a new interactive banner to the site
The banner lets you change the vapourwave landscape
You can double click the blob points to change to curves
and the landscape is saved across pages and time
which is easy to do with ZIM Blob and TransformManager.
Plasma Pods animate giving a preview of the new ZIM Store.
Discord and Slack have been moved to the top right
and makes way for TikTok and Dev in the Social Media links
Come follow us!

NEW SITE

Made the font bigger on the home page and did a little rearranging.
Added the new STORE and EDITOR to the top nav bar
Removed the HOME link on the bar for space - click the logo to go home.
With Editor moved up from the Gold Bars, there is room for a TOP
gold bar at the bottom right to take you to the top!
The top nav bar still secretly links to the bottom if pressed off a link.
Moved the following pages into new 014 template with header and footer
Home, About, Examples, Learn, Code, Docs, Updates
Frame, InteractiveAnimation, Make NFTs, Zapps PWA Tool, Mobile, ZIM Shim for Animate
CDN page, ES6 and Script pages, Tips, Dark Papers, Typescript, Hints, NPM, MVC, Library, Base
Intro, Tips, Map, Zap, Lab, Creative Coding, College, Explore, Five

EDITOR

Added individual INFO pages to the Editor that have a preview image, info, and links to
full screen, editor, code, origin, share and print.
The info pages can properly be share, will show up in search engines, etc.
Thanks Ami Hanya for the suggestion.
The print page has the image, info and QR codes to INFO, FULL, EDITOR and CODE.
Thanks Karel Rosseel for the suggestion.
Added reference field to file for reference links to codepen / youtube / etc.
This is a single link - if more links are desired then add them to the description
Made links in the description automatically become clickable.
Added Origin concept to Editor - if code is transfered with the little yellow arrow
then a "forked" checkmark shows at the top.
This also keeps track of the zapp that it was copied from for reference on the info page.
You can uncheck the Forked checkbox if desired to clear this connection.
There is no getting the connection back if saved - just remake the fork if desired.

MOBILE SYSTEM KEYBOARD STAGE SHIFT

https://zimjs.com/014/keyboard.html
We have added an optional keyboardShift parameter for TextInput and TextArea - thanks Ami Hanya for request
The default is false for now, so must be turned on
This will for mobile when the stystem keyboard is activated
Currently, the TextArea text shifts - we are trying to adjust it but it is complex.
BREAK - the ZIM TextArea() now has the placeholder parameter moved and a text parameter added
after width and height and before size like the TextInput

GLOBAL CUSTOM CURSORS

https://zimjs.com/014/cursors.html
Frame now has a cursors property to apply custom cursors beyond CSS cursors.
F.cursors = {
default:DisplayObject,
pointer:DisplayObject,
alert:DisplayObject
etc.
}
If the CSS cursor name is used these will override the CSS cursors with the custom cursors
Any name is fine for custom cursors - for example:
F.cursors = {yellow:new Circle(10,yellow)}
new Pic("earth.png").center().cur("yellow"); // will add a yellow circle for the pic's cursor
Setting F.cursors = null; will clear the custom cursors.
Any cursor type not assigned will use the regular CSS cursor for the type.

For reference, the CSS cursor names are as follows:
CSS2 - auto, crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
CSS3 - none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, grab, grabbing, zoom-in, zoom-out
ZIM uses pointer for most rollover, press, drag, move scenarios and default when not interacting.
There are various resize cursors with Transform.

NOTE: please use the cur() to set any cursors and not the cursor property.
This will add an _cursor property to the object to help keep track of the custom cursor.
We have adjusted ZIM in about 100 places to all call cur() so the system can work.
No need to worry about cursors for drag(), transform(), Blob(), Squiggle(), tap(), etc.
These have all been adjusted to work automatically with F.cursors.

There is a F.cursorList property that is a ZIM Dictionary that keeps track of objects with cursors
When Frame cursors is on, any object with a cursor set that has a matching type will have its CSS cursor turned off
and the object's _cursor property is used to set the F.cursorObj.
If the Frame cursors are turned off, the cursorList is used to reset the CSS cursors on the objects.
Any DisplayObject used for a custom cursor should most-likely be center reg and sized or scaled properly - for instance:
F.cursors = {
default:new Pic("myFinger.png").reg(CENTER).siz(20),
pointer:new Rectangle(10,10,red).reg(CENTER).animate({props:{scale:2}, rewind:true, loop:true})
}
Note that we can animate custom cursors or use an Emitter, etc.
A set of retro cursors is available as F.makeCursors("retro", [optionalTypes]);
So use F.cursors = F.makeCursors("retro");
or F.cursors = {pointer:F.makeCursors("retro", "pointer")};

WARNING: If an object has its level set to the top of the stage in a timeout, interval, call, etc.
then also set the F.cursorObj.top() afterwards so the cursor remains on top.
This has been automatically handled in drag(), transform(), etc.

DRAG SLIDE FRICTION

https://zimjs.com/014/slide.html
BREAK / IMPROVEMENT - added an axis parameter as second parameter to drag() with values of ALL/BOTH or HORIZONTAL or VERTICAL
The boundary can still be set with a value of 0 for either width or height to drag vertically or horizontally with limits
BREAK - the localBounds parameter has been changed to localBoundary
BREAK / IMPROVEMENT - changed all slideDamp to slideFactor with a better sliding equation.
A damping equation was used (slideDamp) but the better equation is just a velocity that decreases by a factor
If the slideFactor is 1 then there is no decrease in velocity - the default is .9 and a value of .6 slows quite quickly.
The velocity is determined by the mouse/finger calculated by the time and distance between 50 milliseconds before release to release.
This change affects drag() with slide:true and also Window() and List().
Thanks Anton Kotenko for the request.
This leads to smoother scrolling lists like most mobile scrolling.

ZIM PHYSICS

https://zimjs.com/014/blobphysics.html
Updated to phsyics_2.2
ZIM Blob() can now recieve addPhysics() but it must be a convex Blob - so no angles less than 90 degrees
This is a limitation of Box2D and can be solved by joining shapes
Added makePoly() method used by addPhysics() for Blob - so there is no need to use makePoly directly.
Fixed drag() and noDrag() to not convert an array of ZIM objects passed in to an array of physics bodies
This is confusing from the outside if using that array for other things.

HIERARCHY - (AND LIST)

https://zimjs.com/014/hierarchy.html
Added new methods to edit the ZIM Hierarchy which can be used to remake associated List() objects
insertBefore(items, id, innerItems) - insert item or an array of items before an id with optional children
this will insert at the same level as the id - also see insertAfter()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
insertAfter(items, id, innerItems) - insert item or an array of items after an id with optional children
this will insert at the same level as the id - also see insertBefore()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
replaceItem(item, id) - replace the current item at the id with the provided item
removeItem(id) - remove the item at the id
Also added a method to get an object's parent
getParent(id) - gets the parent object of the item at the id or null if no parent

CODE HINTS

Code Hints are available for your editor as follows
NOTE: currently VS Code only shows the code hints for JS files - not for JS in HTML.
We have copied our TypeScript Typings to a Node Package
So these need to be installed in the project folder - here are 2 minute the steps.
In the IDE open your project folder
Open a Terminal - in VS Code see Terminal in menu (CTRL SHIFT `)
type node -v to check if you have node
if not then install node here: https://nodejs.org, etc.
run the command below
npm i zimtypes
only gives auto completes for ZIM in a JS or TS file - not HTML at this time

FRAME POINTER EVENTS

Added Frame pointer events (mouse or touch) that match JavaScript pointer events
F.on("pointerdown", e=>{}) // down on stage
F.on("pointerup", e=>{}) // up on or off stage (yay)
F.on("pointermove", e=>{}) // move on stage
F.on("pointerenter", e=>{}) // when entering stage
F.on("pointerleave", e=>{}) // when leaving stage (yay)
These are complete with e.pointerID, etc. for multitouch

TICKER

Added Ticker.isUpdating(stage) to determine if the Ticker is currently updating

SQUIGGLE AND BLOB

Added circleColor and circleBorderColor to Squiggle and Blob just before stickColor BREAK
Blob can now accept a ZIM Flare() as its points parameter (like Circle, Rectangle, Triangle)

KEYBOARD CONTROL

Added a keyboardMessage() method to Frame to request pressing on screen for keyboard access.
This also solves getting key access on iFrames!
If the app is in an iFrame then The F.keyboardMessage() will turn off pointer events
on the canvas so a press will go through to the iframe - otherwise pointer events remain on.
We then capture a document mousedown and turn pointer events back on (if off) and remove the message
At that point, we can use keyboard.

GENERAL

The Stepper now defaults to a height of 60 (default Button height) instead of 100 and the default font size is reduced
The Stepper can have its width set and it can be scaled if a different height is desired.
Added ALL and RADIAL global constants that equal "all" and "radial"
IMPORTANT - Updated ZIM Frame() so setBlurDetect() only is called if not already called
This was in place in all the Timeout, Interval, etc. but in ZIM NFT we added it to the Frame without the proper check
This meant that items paused would be thought paused if a second frame called the blur detect
and when they were to be unpaused they were marked as previously paused - leading to animations, Emitters, etc. not starting again.
We have gone back and adjusted ZIM O2 as well.
Fixed Frame so W, H, S are definitely the first frame called (not made) - this can be overwritten with F.setDefault()
Adjusted ZIM Triangle() to accept a -1 for the second parameter that will make the triangle 90 degrees
this is like the -1 for the third parameter which still does the same.
So it now can have a right angle at the bottom left (or the bottom right as before)
Added a type of Dictionary to ZIM Dictionary.
ZIM Loop() now loops through a Dictionary as it would an object literal.
Added obj.zimLastMouseEnabled setting to noMouse() and mouse() to handle animate() busy check if set after animation starts
Made particles in ZIM Emitter when added back to the stage after removing be visible false so can't see old particles
Fixed InputText clone() to include placeholderInstant - had accidentally added it to the TextInput parameters directly below.