Skip to content

Commit

Permalink
ZIM version ZIM 02 - major sub version release - lots of updates
Browse files Browse the repository at this point in the history
ZIM THEME
https://zimjs.com/zim/theme.html
ZIM Theme changes the ZIM colors to themed sets of colors
and it can set darkness (and lightness with negative) and tint as well.
TO SET
Use the class directly like: Theme.set("themeName");
This affects everywhere a ZIM color is used AFTER the theme is set.
This includes default colors for components like Button colors, etc.
but not some interface colors like Squiggle and Blob control colors.
Use Theme.set("zim") to go back to traditional ZIM colors.
This will go back to ZIM colors for anything made afterwards
but will not change objects that are already made.
TO APPLY
To change colors of objects already made, use Theme.apply("themeName");
Warning: using Theme.apply() will reload the page.
To apply new theme colors to objects already made without reloading the page
use Theme.set() and then adjust button.backgroundColor = red; etc.
A read-only THEME global object is set when a theme is set or applied.
An applied theme will be re-applied when the page is reloaded.
Use Theme.clear() to reload the page with no theme set.
THEMES
There are colors and greys (including white and black).
"zim" - the original ZIM colors and greys
"html" - the colors are replaced with HTML version so blue is "blue".  Greys left the same.
"future" - the colors and greys are taken from AI visions of the future.
"invert" - the colors and the greys are inverted - as in a difference against white.
"greyscale" - the colors are turned to greyscale - somewhat arbitrarily.
"neon" - even more vibrant than ZIM colors! Greys are set towards white and black.
"seventies" - check out the shag on my app - greys are adjusted too.
"warm" - lovely mediterranean colors... mmm - greys are adjusted too.
CUSTOMIZE
An object literal with colors and values can be passed to set() or apply() as the first parameter
And a lightness ratio from -1 to 1 can be applied with negative making the colors darker
So Theme.set("zim", .3); would lighten all the regular ZIM colors and greys by 30% for objects made after setting.
Theme.apply("future", -.2); would reload the page and apply a future colors and greys 20% darker.
The 3rd and 4th parameters are for tint and tintRatio - just like ZIM toColor().
So Theme.set("zim", 0, red, .5) would make all ZIM colors and greys be half way to red.
The last parameter is exceptions which can be one color or an array of colors to not apply the theme to.
Special "colors" and "greys" strings can be used to not include all colors or all greys.
So Theme.set("zim", 0, red, .5, "greys"); would redden only the colors.
Theme.set("future", .2, null, null, ["yellow", "white"]); would except yellow and white.e.set("future", .2, null, null, ["yellow", "white"]); would except yellow and white.

ZIM GREYS
Added a few grey colors to fill in the hex codes for grey.  The greys are as follows with ** as new:
#000 black
#111 darker
#222 licorice **
#333 dark
#444 charcoal **
#555 grey
#666 granite **
#777 tin
#888 pewter **
#999 silver
#aaa fog
#bbb mist
#ccc light
#ddd moon
#eee lighter
#fff white

HORIZONTAL / VERTICAL
BREAK (for ZIM DUO) All parameters with Horizontal or Vertical endings have been changed to H and V
For instance: paddingHorizontal is now paddingH and shiftVertical is now shiftV
This is shorter and matches spacingH and spacingV, etc.
This means an update to ZIM game module to 2.7 - the other helper modules are the same versions.

ZIM FONT
When preloading a font, just the font file name can be used for
"ttf","otf","woff2","woff","fnt" files and google fonts
So a ZIM font object is no longer needed - but still can be used {font:name, src:file}
When specifying the file in Frame() or loadAssets() include the extension (and path like normal)
but when applying the font in a Label, etc. then remove the extension.

ZIM INTERVAL
Added a next() method to the ZIM interval object that will advance the interval immediately and increase the count

ZIM CONSTANTS
Added NEXT and PREV global constants representing "next" and "prev" values.
returning NEXT can be used in ZIM loop() when interval setting is on to go immediately to the next interval

ZIM LOOP
https://zimjs.com/zim/loop.html
Added an interval parameter to ZIM loop() after the reverse and before the step, min and max.
The interval parameter can also accept a ZIM VEE value dynamic parameter like {min:1, max:3} or [1,5,10] or series(1,5,10) or results of a function.
This will make the loop work like an interval to more easily operate an interval on an array, object literal or container.
If wanting to interval on an index i then you can just use interval() with the total parameter (and immediate if desired) and get the interval object's count property.
Also added an immediate parameter to the end of the ZIM loop() parameters
The default for immediate is true - as opposed to false in the ZIM interval.  Set to false to delay one interval before running the loop function.
Adjusted loop() so that returning NEXT will also skip to the next loop and will do so immediately if interval is set
The plain return can still be used to continue a loop but if an interval is set then it will wait again that interval rather than going to the next immediately.
The loop function also receives the interval object at the end of its parameters - but probably will not be needed as i is provided and returning a value will clear the interval

ZIM BOOK
Added support for auto add and removal of ZIM Tag(), TextArea() and Loader() to ZIM Book()
Thanks KV for the prompting.  We had it on our todo list ;-).
Fixed up the process for Pages too in the case where a page may have been removed twice without being added.
Fixed a glitch in directPage which goes to a page without animation (and updated the docs which had read pageDirect)

ZIM NUMPAD
https://zimjs.com/zim/numpad.html
Added a NumPad() class that can be used on its own or with the ZIM Keyboard().
The NumPad has a "pressed" event and a key property to find out what was pressed.
There are four special keys that return "clear", "space", "backspace" and "enter" values for the key property.
The NumPad extends a ZIM Panel and contains a ZIM Pad as its content.
There is now a NumPad key on the Keyboard at the bottom right that will pop up the NumPad().
Added are numPadOnly and numPadScale parameters to end of Keyboard parameters
the numPadOnly will let you used the NumPad with labels and the place menu.
NOTE: the enter key on the NumPad does not add a \n but rather triggers an "enter" event on the Keyboard.
The clear will clear the text, the space will add a space, the backspace will delete a character.
In addition to existing show() and hide() methods, added showKeyboard(), hideKeyboard(), showNumPad(), hideNumPad() methods.
Thanks for the folks on Slack for the request.

ZIM CAROUSEL
https://zimjs.com/zim/carousel.html
A horizontal display for multiple objects with arrows at sides to animate to previous and next.
This is good for sliding banners, or sliding through a set of icons.
Items will be tiled in a ZIM Tile with one row.
It is expected that the items be the same width and height
but if not, the items will have width set to the most common width and heights aligned vertically to the valign setting.
Thank you Marva for the idea and original code!
Note, there are still Pages with transitions and Marquee with some cool features for interactivity.

ZIM PEN - IMPROVEMENT
https://zimjs.com/zim/pen.html
Added holdDelete to Pen so can hold (see ZIM hold()) to delete a line - works better on mobile than dblClick
Note there is also shiftClick to delete and CTRL Shift Click to delete all.
Fixed Pen so it does not set a color/stroke on every tick if these have not changed
When Pen was adjusted in Cat 04 patches to use curveTo properly through a midpoint it added faint slats
Now unless there is a color change (with ZIM VEE) the we do not change the color and this gives smooth colors.
We also adjusted the Pen and MotionController with Pen to be damp .5 rather than .1
and adjusted the MotionController speed to default to 20 rather than 7 for Pen.
These we would set manually, but it is more responsive at these settings
and smooth enough now that the curveTo is working properly.
Damp can be set towards 1 (on either or both) and to a higher speed for even more responsive.
But then the Pen gets more jittery when following a mouse.
And it is sometimes harder to see what you are drawing if it is right under the finger.

ZIM STYLE
Made lazy group ids in STYLE - if the identifier is not a ZIM object name or command
then it will be added to the group object inside STYLE
STYLE = {big:{size:100}};
will now be converted to
STYLE = {group:{big:{size:100}}}; and applied to any object with a group of "big"

CONNECTORS
https://zimjs.com/zim/connectors.html
There are two major updates to the ZIM Connectors.
1. A dropArray parameter has been added to indicate which nodes can be connected to other nodes.
This is in the format of an array of arrays.
This is slightly different than linear which must go in point order.
Added continuous and startIndex parameters to Connectors
Set continuous to true to allow nodes only to be made from the last node
and startNode will set which node can be used at the start
from then on all are open unless specified otherwise - for instance with continuous
Added setAvailableIndexes() method to Connectors to set provided node or node indexes as active
The addNode(x,y,base) was shown in docs but the base was not connected - it is now.
2. Made Connectors record the connection steps - this is a very little data per connection.
The getSteps() method will then return an array of steps - pass in true to pop this array in a Pane.
Copy the array to the new steps parameter and ZIM will recreate the connections.
The steps will record new connections, deleted connections and moved connections.
The code to record multiple nodes being moved is quite tricky so treat it as experimental.

SCRAMBLER
https://zimjs.com/editor/index.html?view=92kl1
Fixed pressup on an iframe again - missed sending event object properly
as was using mouseupplus which has NO event object.
Still need regular mouseup for single touch pointerIDs
But did not realize that both these events were firing at the same time.
Added a Frame.mouseuplusonly that triggers only when coming back in from a missed mouseup.
Also fixed a glitch with multitouch where another object sliding underneath
had its mousechildren turned off as animating and on as done
but this should not have been turned on as it affected the multitouch protection.
Also fixed a glitch where single touch on iframe was not triggering next mousedown on drag
because pointerID was not available for mouseuplus.
Now, we just turn off the pointerID check on pressup on single touch as there will only be one cursor!
So now, as far as we can tell, Scrambler is finally locked down on these complex issues.
That was one solid day of debugging.

TABS, PAD, LIST DOWN
Added downBackgroundColor and downColor to Tabs(), Pad() and List() BREAK
So this adjusts the parameter orders
Added currentSelected parameter to Pad() after currentEnabled BREAK

ZIM MANAGER, LAYOUT, GRID, GUIDE
https://zimjs.com/zim/manager.html
Now, when a Grid, Guide, Layout or Pages get made in FULL Frame mode,
they get automatically added to a zim.globalManager and remove when disposed
Made Layout() region objects accept an obj property - object still works for backwards compatibility
Switched Grid() and Guide() to have a pixels parameter be true if in FIT or FILL Frame scaling mode
Grid and Guide were created to help with responsive positioning in percentage when in FULL mode
so in FULL mode the default is pixels false which will be percentages

ZIM SHAPES
Added an oa (original arguments) property to shapes like Circle, Rectangle, etc. that keep the original values for parameters that accept ZIM VEE.
This provides a way to remake any of the ZIM VEE parameters - for instance to set the color of a circle again relative to its ZIM VEE value.

ZIM TIP
https://zimjs.com/zim/editor.html
Changed ZIM Tip() align and valign to tipAlign and tipValign to not conflict with tip text align property  BREAK
which was called textAlign and textValign in the Tip parameter - those are now changed to align and valign.
Fixed up padding style glitch with tip.

ZIM LOC
ZIM loc() can now accept an array of x and y values
new Circle().loc([100,200]) will locate the registration point at x 100 and y 200
new Circle().loc(100,200) is the same thing
new Circle().loc({x:100,y:200}) is also the same thing

ZIM PANE
Added AUTO setting to width and height parameters of Pane()
and autoPadding (70), autoPaddingH and autoPadding parameters to end of Pane()
These work like the AUTO for Button to make the Pane size match the content - thanks Karel Rosseel for suggestion
Set AUTO as the default width and height of the Pane which makes these parameters not as important.
So moved the width and height to after the backgroundColor and color.
This allows for new Pane("hello").show(); to work.
Considered doing the same with Button("hello") to auto fit and move the width and height
but buttons often look better equal width and require more care in general
plus it would be a massive change through Tabs, Pads, Lists, etc. so will leave Buttons as is.
Adjusted Pane to be like Panel and Window with a contentContainer and optional add() method
The add() for Pane defaults to center and replace true.
So the content property is now contentContainer.

GENERAL
Added toBW(hex) to return black or white depending on which will provide the best contrast to the provided hex color
Added invertColor(hex) returns an inverted hex color - so with RGB subtracted from black - use ZIM convertColor if have or want other formats
Adjusted ColorPicker to set currentColor on OK if change color with text box.
Added a readOnly parameter to TextInput() BREAK
Added wigglestop event to wiggle() when maxTime is set.
Adjusted InputText to handle DIR START and END - thanks Marva
Made ord() be constrained from 0 to numChildren-1.
Removed the obj.parent.top() in the zimify() for MovieClips in Adobe Animate
Made calculate() in SoundWave() have normalize true as parameter default
So now SoundWave by default will have a number between 0-1 for each frequency
Adjusted ZIM STYLE to call reg() when setting regX and regY so that LEFT, CENTER, RIGHT, TOP, BOTTOM, START, END will work
Fixed TextEditor to not give error when editing textArea if no label assigned
DoubleClick title bars of Window, Panel, EmojiPicker, ColorPicker, List to collapse - thanks Karel Rosseel for the suggestion
Adjusted Emitter so pooled items do not load above new items when levels is set to "top".
Added a placeholderInstant parameter to the end of the TextInput() that defaults to true
this will remove the placeholder as soon as the field gains focus - set to false to remove once a letter is typed
Fixed STYLE to work properly with move as well as mov.
Added ZIM DUO to Frame() makeIcon() and madeWith() methods: F.madeWith({box:clear}).pos(50,50,RIGHT,BOTTOM);
Adjusted ZIM animate() so that the callback function is called if ANIMATE = false is set
also added a noAnimateCall parameter that defaults to false.
The ANIMATE = false is primarily used to bypass animations when testing and the call often is needed to progress the app
This was an oversite to miss this and it was expected to call all along.
For ZIM line() the to() and from() now position the line at Display Objects provided regardless of coordinate spaces
like the loc() does - thanks andrecaldas for the suggestion in Discord!
Adjusted hold() to not trigger error if holding and object removed from stage
Adjusted ZIM drag() to handle re-drag when single press and pressup on iframe and mouseupplus is used - part of Scrambler debugging
Changed default MotionController mousemoveOutside to true - it was left default false despite the docs reading true
Fixed Arrow() to have proper rollBackgroundColor parameters in any arrow other than triangle - typos.

ZIM PATH
https://zimjs.com/path.html
Added trace button to add an image to trace path on
Fixed menu select so proper controlType parameter is used
We had passed in the starting data array with pointType
but the array was adjusted as we showed the Blob or Squiggle in the menu
we needed to pass in a copy() of the data array.
Beware... passing in a data array to points will adjust that data array.

ZIM TIPS
Moved the CHANGES section to the second TIP and updated the section with current tips.
  • Loading branch information
danzen committed Jan 4, 2023
1 parent a8b01ea commit f596f71
Showing 1 changed file with 4,016 additions and 1,442 deletions.
Loading

0 comments on commit f596f71

Please sign in to comment.