Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ZIM version ZIM 02 - major sub version release - lots of updates
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