From f596f712d4faf7721fdc8d84efb2fbef26fc0fee Mon Sep 17 00:00:00 2001 From: Dan Zen Date: Tue, 3 Jan 2023 22:35:25 -0500 Subject: [PATCH] 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. --- zim.js | 5458 +++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 4016 insertions(+), 1442 deletions(-) diff --git a/zim.js b/zim.js index 3e1d92f..49822e6 100644 --- a/zim.js +++ b/zim.js @@ -1,7 +1,7 @@ // ZIM - Interactive Media Framework at https://zimjs.com - code creativity! // See https://zimjs.com/distill to minify only the functions in your app // See https://zimjs.com/code for CDN, ES6 and NPM modules and TypeScript -// (c) 2022 ZIM - free to use - donations welcome! https://zimjs.com/donate +// (c) 2023 ZIM - free to use - donations welcome! https://zimjs.com/donate // ZIM is a Framework and rarely needs to be used with // Node, React, Angular, VUE, Animate, XYZ, etc. @@ -313,6 +313,7 @@ ZIM Frame does this in the full, fit and outside scale modes. If not using Frame, then you can do this once at the start of your code. Returns an array of references to three listeners: [keydown, wheel and DOMMouseScroll]. Use these to removeEventListeners. +Also stores these on Window at window.zilK, window.zilW, window.zilS. The arrows, etc, still work but just not their default window behaviour. EXAMPLE @@ -327,13 +328,18 @@ RETURNS an Array --*///+6 function zil() { z_d("6"); - var a = function(e) {if (!e) e = event; if (e.keyCode && (e.keyCode >= 32 && e.keyCode <= 40)) e.preventDefault();}; - var b = function(e) {if (!e) e = event; e.preventDefault();}; - var c = b; - WW.addEventListener("keydown", a, {passive:false}); - WW.addEventListener("wheel", b, {passive:false}); - WW.addEventListener("DOMMouseScroll", c, {passive:false}); - return [a, b, c]; + if (WW.zilK) { // do not double apply + WW.removeEventListener("keydown", WW.zilK); + WW.removeEventListener("wheel", WW.zilW); + WW.removeEventListener("DOMMouseScroll", WW.zilS); + } + WW.zilK = function(e) {if (!e) e = event; if (e.keyCode && (e.keyCode >= 32 && e.keyCode <= 40)) e.preventDefault();}; + WW.zilW = function(e) {if (!e) e = event; e.preventDefault();}; + WW.zilS = WW.zilW; + WW.addEventListener("keydown", WW.zilK, {passive:false}); + WW.addEventListener("wheel", WW.zilW, {passive:false}); + WW.addEventListener("DOMMouseScroll", WW.zilS, {passive:false}); + return [WW.zilK, WW.zilW, WW.zilS]; } //-6 /*-- @@ -666,17 +672,22 @@ RETURNS a Tile or an array of Bitmaps depending on tile parameter if (zot(rows)) rows = 3; if (zot(tile)) tile = true; if (zot(margin)) margin = 0; - if (zot(scale)) scale = 1; - if (obj.uncache) { // testing if it has a CreateJS uncache method - obj = obj.cache({scale:scale}).cacheCanvas; - } - var w = obj.width/cols; - var h = obj.height/rows; + if (zot(scale)) scale = 1; + // removed in ZIM ZIM 01 patch - causing parts to be same size canvas as original + // if (obj.uncache) { // testing if it has a CreateJS uncache method + // obj = obj.cache(null,null,null,null,scale).cacheCanvas; + // } + // var w = obj.width/cols; + // var h = obj.height/rows; + var b = obj.getBounds(); + if (zot(b)) zogy("ZIM chop() - obj must have bounds"); + var w = b.width/cols; + var h = b.height/rows; var m = margin; var pieces = []; zim.loop(rows, function (r) { - zim.loop(cols, function (c) { - var p = new zim.Bitmap(obj, w+m*2, h+m*2, c*w-m, r*h-m); + zim.loop(cols, function (c) { + var p = new zim.Bitmap(obj, w+m*2, h+m*2, c*w-m, r*h-m, scale); if (margin != 0) { p.setBounds(m,m,w,h); p.regX = m; @@ -687,7 +698,7 @@ RETURNS a Tile or an array of Bitmaps depending on tile parameter pieces.push(p); }); }); - if (tile) return new zim.Tile(pieces,cols,rows,0,0,true); + if (tile) return new zim.Tile(pieces,cols,rows,0,0,true).sca(obj.scaleX,obj.scaleY); else return pieces; };//-7.8 @@ -716,13 +727,14 @@ for (let i=0; i 0 && count+dir*step >= length) { dir = -1; @@ -1364,8 +1375,9 @@ RETURNS a function that can be called many times - each time returning the next }, set: function(value) { count = value; + everyCount = 0; } - }); + }); Object.defineProperty(f, 'length', { get: function() { return array.length @@ -1453,7 +1465,7 @@ zim.makeSeries = function(array) };//-13.6 /*-- -zim.loop = function(obj, call, reverse, step, start, end) +zim.loop = function(obj, call, reverse, interval, step, start, end, immediate) loop zim function @@ -1462,28 +1474,35 @@ DESCRIPTION 1. If you pass in a Number for obj then loop() does function call that many times and passes function call the currentIndex, totalLoops, startIndex, endIndex, obj. By default, the index starts at 0 and counts up to one less than the number. -So this is like: for (var i=0; i{}); // see loop under the Methods Module. NOTE: If you pass in true for reverse, the loop is run backwards counting to 0 (by default) NOTE: use return to act like a continue in a loop and go to the next loop +NOTE: use return NEXT when in interval mode to go immediately to the next interval - as opposed to return which goes to next but after another interval NOTE: return a value to return out of the loop completely like a break (and return a result if desired) NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) @@ -1537,12 +1556,48 @@ const tags = zet(".heading").tags; // get an NodeList of tags styled with headin loop(tags, (tag, i)=>{ tag.innerHTML = i + ". " + tag.innerHTML; // add an index number in front }); +END EXAMPLE + +EXAMPLE +// LOOP THROUGH A CONTAINER + +// LOOP FUNCTION +loop(container, child => { // gets passed the child, index, total, start, end and obj + child.alp(rand(.2, .9)); // set each child to a random alpha +}); + +// LOOP METHOD +container.loop(child => { // gets passed the child, index, total, start, end and obj + child.alp(rand(.2, .9)); // set each child to a random alpha +}); + +// backwards through a Container when removing +container.loop(child => { + if (odds(20)) child.removeFrom(); +}, true); // true would reverse - important if removing children in loop END EXAMPLE +EXAMPLE +// looping with the interval setting + +// loop through an array every 1 second +loop(10, i=>{zog(i);}, null, 1); + +// loop through a Container every .01 seconds +const tile = new Tile(new Rectangle(26,26,[green, blue, pink]), 10, 10, -1, -1) + .reg(CENTER) + .pos(0,100,CENTER,BOTTOM) + .loop(item=>{ + item.color = darker; + S.update(); + }, null, .01); +END EXAMPLE + PARAMETERS supports DUO - parameters or single object with properties below -obj - a Number of times to loop or an Array or Object, String or NodeList to loop through +obj - a Number of times to loop or an Array or Object, String, NodeList or Container to loop through + for looping through a Container also note the loop method: container.loop((child)=>{}); call - the function to call - the function will receive (as its final parameters) the index, total, start, end, obj + the function will receive (as its final parameters) the index, total, start, end, obj, intervalObj (if interval is set) where the index is the current index, total is how many times the loop will run start is the start index, end is the end index and obj is the object passed to the loop the starting parameters vary depending on the type of obj: @@ -1551,20 +1606,29 @@ call - the function to call if the obj is an object literal then the first and second parameters are the property name and property value at the current index if the obj is an string then the first parameter is the letter if the obj is an HTMLCollection then the first parameter is the tag + if the obj is a Container then the first paramter is the child reverse - (default false) set to true to run the loop backwards to 0 +interval - (default 0) set to a number of seconds between each loop + use return NEXT to go immediately to the next interval + use return to just leave current interval then wait another interval to continue + return a value (other than NEXT) to exit the loop and clear the inverval + the interval object is provided at the end of the loop function parameters - but will probably not be needed step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards) start - (default 0 or length-1 for reverse) index to start end - (default length-1 or 0 for reverse) index to end +immediate - (default true) set to false to not start the loop right away, but rather wait for a first interval RETURNS any value returned from the loop - or true if no value is returned from a loop --*///+9.5 - zim.loop = function(obj, call, reverse, step, start, end) { - var sig = "obj, call, reverse, step, start, end"; + zim.loop = function(obj, call, reverse, interval, step, start, end, immediate) { + var sig = "obj, call, reverse, interval, step, start, end, immediate"; var duo; if (duo = zob(zim.loop, arguments, sig)) return duo; z_d("9.5"); if (zot(obj) || zot(call)) return undefined; if (zot(reverse)) reverse = false; + if (zot(interval)) interval = 0; if (zot(step) || step <= 0) step = 1; + if (zot(immediate)) immediate = true; if (obj.constructor === Number) obj = Number(obj); if (obj.constructor === String) obj = String(obj); @@ -1582,27 +1646,68 @@ RETURNS any value returned from the loop - or true if no value is returned from total = getTotal(length-1); if (total == 0) return true; if (reverse) { - for(i=start; i>=end; i-=step) { - if (type=="number") { - r = call(i, total, start, end, obj); - } else if (type=="array" || type=="string") { - r = call(obj[i], i, total, start, end, obj); - } else { // nodelist - r = call(obj.item(i), i, total, start, end, obj); + if (interval === 0) { + for(i=start; i>=end; i-=step) { + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist + r = call(obj.item(i), i, total, start, end, obj); + } + if (typeof r != 'undefined') return r; } - if (typeof r != 'undefined') return r; + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + i = start-i; + + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist + r = call(obj.item(i), i, total, start, end, obj); + } + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } + } else { - for(i=start; i<=end; i+=step) { - if (type=="number") { - r = call(i, total, start, end, obj); - } else if (type=="array" || type=="string") { - r = call(obj[i], i, total, start, end, obj); - } else { // nodelist or htmlcollection - r = call(obj.item(i), i, total, start, end, obj); + if (interval === 0) { + for(i=start; i<=end; i+=step) { + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist or htmlcollection + r = call(obj.item(i), i, total, start, end, obj); + } + if (typeof r != 'undefined') return r; } - if (typeof r != 'undefined') return r; + } else { + zim.interval(interval, function(io) { + var i = io.count; + if (!immediate) i--; + if (step) i *= step; + if (type=="number") { + r = call(i, total, start, end, obj, io); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj, io); + } else { // nodelist or htmlcollection + r = call(obj.item(i), i, total, start, end, obj, io); + } + if (typeof r != 'undefined') return r; + }, total, immediate); } + } return true; } else if (type == "object") { @@ -1615,14 +1720,47 @@ RETURNS any value returned from the loop - or true if no value is returned from total = getTotal(length-1); if (total == 0) return; if (reverse) { - for(i=start; i>=end; i-=step) { - r = call(props[i], obj[props[i]], i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i>=end; i-=step) { + r = call(props[i], obj[props[i]], i, total, start, end, obj); + if (typeof r != 'undefined') return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + i = start-i; + + r = call(props[i], obj[props[i]], i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } else { - for(i=start; i<=end; i+=step) { - r = call(props[i], obj[props[i]], i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i<=end; i+=step) { + r = call(props[i], obj[props[i]], i, total, start, end, obj); + if (typeof r != 'undefined') return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + + r = call(props[i], obj[props[i]], i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } return true; @@ -1690,7 +1828,7 @@ zim function DESCRIPTION Calls a function after the time delay - like window.setTimeout() -Uses window.requestAnimationFrame() that tends to rest when the window is not showing +This calls ZIM interval() with a total of 1. NOTE: as of ZIM Cat time is in seconds not milliseconds. Set TIME = "milliseconds"; to set all ZIM time to milliseconds @@ -1754,55 +1892,8 @@ timeUnit - get the timeUnit used at start z_d("9.7"); if (zot(call)) return; if (typeof call != 'function') return; - - var timeType = getTIME(time, timeUnit); - if (zot(time)) time = timeType=="s"?1:1000; - - time = zim.Pick.choose(time); - var obj = {startTime:Date.now(), time:0, paused:false, done:false, timeUnit:timeUnit}; - - if (pauseOnBlur) { - if (zot(zim.blurCheck)) zim.setBlurDetect(); - zim.pauseOnBlur.push(obj); - } - - var lastTime = obj.startTime; - function next() { - var now = Date.now(); - obj.time += (now - lastTime)/(timeType=="s"?1000:1); - lastTime = now; - if (obj.time >= time) { - obj.done = true; - (call)(obj); - obj.clear(); - return; - } - obj.rid = requestAnimationFrame(next); - } - - obj.pause = function(state, immediate, reset) { - if (zot(state)) state = true; - if (state) { // pausing - cancelAnimationFrame(obj.rid); - } else { // unpausing - if (immediate) lastTime = 0; // a long time ago ;-) - else if (reset) {lastTime = Date.now(); obj.time=0;} - else lastTime = Date.now(); - next(); - } - obj.paused = state; - }; - - obj.clear = function() { - if (obj) cancelAnimationFrame(obj.rid); - for (var i in obj) { - delete obj[i]; - } - obj.pause = function() {}; - obj.clear = function() {}; - }; - next(); // thanks StevenWarren for the glitch fix! - return obj; + + return zim.interval(time, call, 1, false, pauseOnBlur, timeUnit); };//-9.7 /*-- @@ -1843,27 +1934,27 @@ interval(1, obj=>{ zog("counting " + obj.count); // starts counting at 1 if (obj.count == 10) obj.clear(); // will now log 1 to 10 }); -OR better: +// OR better: interval(1, obj=>{ zog("counting " + obj.count); // starts counting at 1 }, 10); // now will log 1 - 10 with total parameter set to 10 -IMMEDIATE: +// IMMEDIATE: interval(1, obj=>{ zog("counting " + obj.count); // starts counting at 0 }, 10, true); // now will log 0 - 9 with immediate parameter set to true -EXTERNAL control: +// EXTERNAL control: const interval = interval(1, ()=>{ zog("counting " + interval.count); // starts counting at 1 }); const button = new Button({label:"STOP", toggle:"START"}).center(); button.on("click", ()=>{interval.pause(button.toggled);}); -RANDOM intervals with ZIM Pick() literals +// RANDOM intervals with ZIM Pick() literals interval({min:.2, max:.8}, dropBombs); // bombs will fall at different rates between 200ms and 800ms interval([1, 2], dropBombs); // bombs will fall at either 1 or 2 s -var count = 1; +let count = 1; function increase() {return ++count} interval(increase, dropBombs); // bombs will fall at 1 second, then again after 2 more seconds and 3 seconds more after that, etc. END EXAMPLE @@ -1896,6 +1987,7 @@ METHODS - of ZIM intervalObject pause(state, immediate, reset) - (default true) will pause the interval - set to false to unpause the interval with time left immediate (default false) set to true to make the interval function run right away when unpausing (no effect when pausing) reset (default false) set to true to set the interval back to 0 time passed when unpausing (no effect when pausing) +next() - calls the interval again immediately, count goes up clear() - will clear the interval PROPERTIES - of ZIM intervalObject @@ -1937,8 +2029,6 @@ pauseTimeLeft - if paused, get how much time is left once unpaused interval(); checkTotal(); }, obj.interval*(timeType=="s"?1000:1)); - - } if (immediate) { setTimeout(function() { @@ -1970,6 +2060,11 @@ pauseTimeLeft - if paused, get how much time is left once unpaused } obj.paused = state; }; + obj.next = function() { + obj.count++; + (call)(obj); + checkTotal(); + }; obj.clear = function() { obj.active = false; clearTimeout(pausedTimeout); @@ -2688,6 +2783,106 @@ RETURNS a hex color string return zim.convertColor(String(color), "rgba", ratio); };//-27.68 +/*-- +zim.toBW = function(hex) + +toBW +zim function + +DESCRIPTION +Returns either black or white depending on which will have better contrast on the provided hex color +If the color is not hex then use ZIM convertColor() first. +Thanks - Mark Ransom on GitHub + +NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) + +EXAMPLE +const invertedColor = invertColor(red); +const swatch = new Rectangle(300, 200, invertedColor).center(); +new Label(invertedColor, 50, null, toBW(invertedColor)).center(swatch); +// the toBW() chooses black or white which ever will have highest contrast on color +END EXAMPLE + +PARAMETERS +color - a hex color - use ZIM convertColor() if not a hex color + +RETURNS either "#000000" or "#ffffff" depending on which has more contrast against the provided color +--*///+27.84 + zim.toBW = function(hex) { + if (hex.indexOf('#') === 0) { + hex = hex.slice(1); + } + // convert 3-digit hex to 6-digits. + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + if (hex.length !== 6) { + zogy("ZIM toBW() - needs hex input") + return hex; + } + var r = parseInt(hex.slice(0, 2), 16), + g = parseInt(hex.slice(2, 4), 16), + b = parseInt(hex.slice(4, 6), 16); + + return (r * 0.299 + g * 0.587 + b * 0.114) > 186 + ? '#000000' + : '#FFFFFF'; + };//-27.84 + +/*-- +zim.invertColor = function(hex) + +invertColor +zim function + +DESCRIPTION +Inverts a color (converts to RGB and subtracts the color from black) +Used in ZIM "invert" theme. +Thanks - Onur Yildirim on GitHub + +NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) + +EXAMPLE +const invertedColor = invertColor(red); +const swatch = new Rectangle(300, 200, invertedColor).center(); +new Label(invertedColor, 50, null, toBW(invertedColor)).center(swatch); +// the toBW() chooses black or white which ever will have highest contrast on color +END EXAMPLE + +PARAMETERS +color - a hex color - use ZIM convertColor() if not a hex color + +RETURNS a hex color string of inverted color +--*///+27.86 + zim.invertColor = function(hex) { + if (!zim.invertColorCheck) {z_d("27.86"); zim.invertColorCheck=true;} + if (hex.indexOf('#') === 0) { + hex = hex.slice(1); + } + // convert 3-digit hex to 6-digits. + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + if (hex.length !== 6) { + zogy("ZIM invertColor() - needs hex input") + return hex; + } + var r = parseInt(hex.slice(0, 2), 16), + g = parseInt(hex.slice(2, 4), 16), + b = parseInt(hex.slice(4, 6), 16); + // invert color components + r = (255 - r).toString(16); + g = (255 - g).toString(16); + b = (255 - b).toString(16); + // pad each with zeros and return + function padZero(str, len) { + len = len || 2; + var zeros = new Array(len).join('0'); + return (zeros + str).slice(-len); + } + return "#" + padZero(r) + padZero(g) + padZero(b); + };//-27.86 + /*-- zim.zimEase = function(points, polynomials, convert) @@ -3231,7 +3426,7 @@ Used internally by Squiggle and Blob transformPoints method NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE -// from https://zimjs.com/nio/paths.html +// from https://zimjs.com/paths/ const points = [[0,75,0,0,-150,150,150,-150],[300,75,0,0,0,0,0,0,"none"]]; const newPoints = transformPoints(points, "scale", 2); // [[0,150,0,0,-300,300,300,-300],[600,150,0,0,0,0,0,0,"none"]] @@ -3240,7 +3435,7 @@ END EXAMPLE EXAMPLE // or used with Squiggle: const points = [[0,75,0,0,-150,150,150,-150],[300,75,0,0,0,0,0,0,"none"]]; -const squiggle = new Squiggle({points:points}).transformPoints("scale", 2); +const squiggle = new Squiggle({points:points}).transformPoints("scale", 2).center(); // a squiggle with points twice as big as before END EXAMPLE @@ -3944,7 +4139,7 @@ Collection.prototype.addChild = function(c) { // make the Collection extend a Container() // it will receive all the properties and methods of the Container plus its own -extend(Collection, Container, "center"); // or pass an array of overridden methods +extend(Collection, Container, CENTER); // or pass an array of overridden methods // use the Collection var c = new Collection(); @@ -5115,10 +5310,10 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set EXAMPLE // 1D Noise to make a jagged line across the stage const noise = new Noise(); -const shape = new Shape(stageW, stageH).addTo(stage); -shape.graphics.s("black").ss(2).mt(0, stageH/2); +const shape = new Shape(stageW, stageH) + .addTo().s("black").ss(2).mt(0, stageH/2); loop(stageW/50, i=>{ - shape.graphics.lt((i+1)*50, stageH/2 + noise.simplex1D(i)*200); + shape.lt((i+1)*50, stageH/2 + noise.simplex1D(i)*200); }); // the above can be animated by using simplex2D and animating the second number by small amounts END EXAMPLE @@ -5612,11 +5807,10 @@ seed - read only - the seed that was used for the Noise object zim.Point = function(x, y, z, q, r, s, t, u, v, w) Point -zim class +zim class extends a createjs.Point DESCRIPTION Stores x, y, z, q, r, s, t, u, v, w properties. -See also createjs.Point for a Point class with more features. NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) @@ -5637,6 +5831,28 @@ u - (default 0) the u value of the point - very probably not used v - (default 0) the v value of the point - very probably not used w - (default 0) the w value of the point - very probably not used +METHODS - thanks nycjoseph +** only when using the ZIM version of CreateJS +subtract(point) - subtracts the provided point from original point + returns the resulting point +add(point) - adds the provided point to original point + returns the resulting point +angle(point) - gets an angle to the provided point + returns the angle in degrees +length() - gets the length from 0,0 to the point + returns the length from 0,0 to the point +distance(point) - gets the distance to the provided point + returns the resulting distance +project(angle, length) gets a point at an angle (degrees) and distance + returns the resulting point +interpolate(point, number) gets a point at a ratio to the provided point + returns the resulting point +average(point) - gets a point half way to the provided point + returns the resulting point + +** these have been added to ZIM's CreateJS but in Radians +also see CreateJS docs for setValues, copy and clone + PROPERTIES x - the x value of the point y - the y value of the point @@ -5661,6 +5877,8 @@ w - the w value of the point - very probably not used if (zot(u)) u = 0; if (zot(v)) v = 0; if (zot(w)) w = 0; + this.createjsPoint_constructor(x,y); + this.type = "Point"; this.x = x; this.y = y; this.z = z; @@ -5671,8 +5889,16 @@ w - the w value of the point - very probably not used this.u = u; this.v = v; this.w = w; - };//-13.45 - + this.angle = function(point) { + return this.createjsPoint_angle(point)*180/Math.PI; + } + this.project = function(angle, length) { + return this.createjsPoint_project(angle*Math.PI/180, length); + } + }; + zim.extend(zim.Point, createjs.Point, ["angle","project"], "createjsPoint"); + //-13.45 + /*-- zim.Bezier = function(a, b, c, d) @@ -6081,7 +6307,7 @@ const assets = "flecks.jpg"; const path = "assets/"; new Frame(scaling, width, height, color, outerColor, ready, assets, path); function ready() { - new Rectangle(frame.width, frame.height, new BitmapColor("flecks.jpg")).addTo(); + new Rectangle(W, H, new BitmapColor("flecks.jpg")).addTo(); // or use asset("flecks.png") instead of string "flecks.jpg" - but ZIM will figure it out } END EXAMPLE @@ -6089,7 +6315,7 @@ END EXAMPLE PARAMETERS image - a ZIM Bitmap() such as available with Pic() or asset() when asset is loaded with ZIM Frame or frame.loadAssets() - also accepts the string name of an asset that would go in asset() + also accepts the string name of an asset that would go in the new Pic() or asset() may accept url to html image but image needs to be loaded first so would recommend usual ZIM asset loading repetition - (default "repeat") the repeat of the Bitmap fill @@ -6107,7 +6333,6 @@ type - the type of color as a String if (typeof image == "string" && WW.asset) image = WW.asset(image); if (image.type != "Bitmap" && image.bitmap) image = image.bitmap; this.image = image.type=="Bitmap"?image.image:image; - zog(this.image) this.repetition = repetition; this.matrix = matrix; };//-13.467 @@ -6145,12 +6370,12 @@ const dampX = new Damp(circle.x); const dampY = new Damp(circle.y); // start moving once mouse enters stage // this event will only run once (the last parameter is true) -stage.on("stagemousemove", start, null, true); -function start(e) { +S.on("stagemousemove", start, null, true); +function start() { Ticker.add(()=>{ - circle.x = dampX.convert(e.stageX); - circle.y = dampY.convert(e.stageY); - }, stage); + circle.x = dampX.convert(F.mouseX); + circle.y = dampY.convert(F.mouseY); + }); } END EXAMPLE @@ -6199,7 +6424,8 @@ NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set EXAMPLE frame.loadAssets("mySound.mp3"); frame.on("complete", ()=>{ - const sound = frame.asset("mySound.mp3").play(); + // must have also interacted with app before playing sound + const sound = new Aud("mySound.mp3").play(); const p = new Proportion(0, 10, 0, 1); const dial = new Dial(); // default range of 0 to 10 dial.currentValue = 10; @@ -6294,7 +6520,8 @@ targetRound (default false) set to true to round the converted number METHODS convert(input) - converts a base value to a target value -immediate(input) - immediately sets the target value (no damping) and returns the ProportionDamp object +immediate(input) - immediately uses the input to set the target value (no damping) and returns the ProportionDamp object +immediateValue(input) - immediately sets the target value (no damping) and returns the ProportionDamp object dispose() - clears interval PROPERTIES @@ -6367,6 +6594,11 @@ call the pd.immediate(baseValue) method with your desired baseValue (not targetV if (targetRound) {lastAmount = Math.round(lastAmount);} return that; }; + + this.immediateValue = function(n) { + desiredAmount = lastAmount = n; + return that; + }; this.convert = function(n) { baseAmount = n; @@ -6646,7 +6878,7 @@ const complex = { }} }; const hierarchy = new Hierarchy(complex); -const list = new List({list:hierarchy.data, align:"center"}).center(); +const list = new List({list:hierarchy.data, align:CENTER}).center(); END EXAMPLE PARAMETERS @@ -7788,8 +8020,15 @@ Used internally by ZIM to globally dispose common connections zim.gD = function(obj) { if (!zim.zimGDCheck) {z_d("50.435"); zim.zimGDCheck=true;} if (!obj) return; + if (obj.z_bc) { // ZIM ZIM 01 patch to help out Safari - thanks Chris Spolton + var c = obj.z_bc; + c.width = c.height = 1; + if (c.getContext) c.getContext("2d").clearRect(0,0,1,1); + delete obj.z_bc; + } if (zim.KEYFOCUS == obj) zim.KEYFOCUS = null; if (WW.KEYFOCUS == obj) WW.KEYFOCUS = null; + if (obj.veeObj) obj.veeObj = null; if (obj.draggable) obj.noDrag(); if (obj.zimTweens) obj.stopAnimate(); if (obj.zimWire) obj.noWire(); @@ -7891,6 +8130,7 @@ zim.Stage = function(canvasID, touch, singleTouch) { } } this.cjsStage_cache(a,b,c,d,scale,options); + this.z_bc = this.cacheCanvas; return this; }; this.on("mousedown", function(e) { @@ -8053,6 +8293,7 @@ zim.StageGL = function(canvasID, options, touch, singleTouch) { } } this.cjsStageGL_cache(a,b,c,d,scale,options); + this.z_bc = this.cacheCanvas; return this; }; this.on("mousedown", function(e) { @@ -8192,7 +8433,8 @@ METHODS * such as ZIM Rectangle, Circle, Triangle, BLob * as well as all components like: Label, Button, Slider, Dial, Tab, Pane, etc. * as well as the ZIM display wrappers: Container, Shape, Sprite, MovieClip and Bitmap -cache(width||x, height||y, null||width, null||height, scale, options, margin) - overrides CreateJS cache() and returns object for chaining +cache(width||x, height||y, null||width, null||height, scale, options, margin, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining + ** Supports ZIM DUO If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided @@ -8203,6 +8445,9 @@ cache(width||x, height||y, null||width, null||height, scale, options, margin) - margin - (default 0) add or subtract a margin from the bounds eg. margin:10 will make the cache size 10 pixels more on all sides this can be handy when caching objects with borders - that go half outside the natural bounds + rtl - (default null) set to true to use right to left + willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL() + if you get a warning in the console about willReadFrequently then set this to true updateCache() - updates the cache if cache() is set uncache() - uncaches and returns object for chaining setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining @@ -8212,6 +8457,8 @@ setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides height||y - (default width) the height of the bounds - or the y if four parameters are provided width - (default null) the width of the bounds - or null if only the first two parameters are provided height - (default null) the height of the bounds - or null if only the first two parameters are provided +getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border) + pass in a Container (including Stage) to map rectangle to that coordinate space childrenToBitmap() - turns content to a Bitmap and adds bitmap to container - removing all other children specialColor(colorCommand, colorObject) - used internally by ZIM Shapes to set GradientColor, RadialColor and BitmapColor on a fill or stroke color command @@ -8226,7 +8473,7 @@ dispose(disposing) - removes from parent, removes event listeners - must still s if calling dispose() on the super class from a custom class then pass in true to indicate already started dispose (otherwise infinite loops) ALSO: see the CreateJS Easel Docs for Container methods, such as: -on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(), +on(), off(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES @@ -8309,9 +8556,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (!zot(a)) this.setBounds(n[0],n[1],n[2],n[3]); // es6 to fix - this.cache = function(a,b,c,d,scale,options,margin) { + this.cache = function(a,b,c,d,scale,options,margin,rtl,willReadFrequently) { if (that.type=="AC"&&WW.zdf) {WW.zdf.ac("cache", arguments, that); return that;} - var sig = "a,b,c,d,scale,options,margin"; + var sig = "a,b,c,d,scale,options,margin,rtl,willReadFrequently"; var duo; if (duo = zob(that.cache, arguments, sig)) return duo; var bounds = that.getBounds(); if (zot(c)) { @@ -8337,8 +8584,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo d+=that.borderWidth?that.borderWidth*2:0; } if (zot(margin)) margin = 0; - that.cjsContainer_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options); + that.cjsContainer_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options,rtl,willReadFrequently); if (bounds) that.setBounds(bounds.x, bounds.y, bounds.width, bounds.height); + that.z_bc = that.cacheCanvas; return that; }; this.uncache = function() { @@ -8370,6 +8618,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.cjsContainer_setBounds(n[0],n[1],n[2],n[3]); return that; }; + this.getBounds = function(targetSpace) { + if (targetSpace) { + return that.boundsToGlobal(null,null,null,targetSpace); + } + return that.cjsContainer_getBounds(); + }; this.disposeAllChildren = function() { for (var i=this.numChildren-1; i>=0; i--) { @@ -8519,7 +8773,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (obj && obj.parent) obj.parent.removeChild(obj); } - zim.extend(zim.Container, createjs.Container, ["cache","uncache","setBounds","clone","localToLocal","localToGlobal","globalToLocal"], "cjsContainer", false); + zim.extend(zim.Container, createjs.Container, ["cache","uncache","setBounds","getBounds","clone","localToLocal","localToGlobal","globalToLocal"], "cjsContainer", false); zimify(zim.Container.prototype); //-50.5 @@ -8638,7 +8892,8 @@ de() drawEllipse dp() drawPolyStar pg() polygon // added in ZIM CreateJS 1.3.3 (Diamond) p() decodePath -cache(width||x, height||y, null||width, null||height, scale, options, margin) - overrides CreateJS cache() and returns object for chaining +cache(width||x, height||y, null||width, null||height, scale, options, margin, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining + ** Supports ZIM DUO If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided @@ -8649,11 +8904,18 @@ cache(width||x, height||y, null||width, null||height, scale, options, margin) - margin - (default 0) add or subtract a margin from the bounds eg. margin:10 will make the cache size 10 pixels more on all sides this can be handy when caching objects with borders - that go half outside the natural bounds -setBounds(width||x, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining - width||x - (default null) the width of the bounds - or the x if four parameters are provided + rtl - (default false) set to true to use right to left + willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL() + if you get a warning in the console about willReadFrequently then set this to true +setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining + If you do not provide any parameters, then the bounds will be reset to the calculated bounds + width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided + or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach height||y - (default width) the height of the bounds - or the y if four parameters are provided width - (default null) the width of the bounds - or null if only the first two parameters are provided height - (default null) the height of the bounds - or null if only the first two parameters are provided +getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border) + pass in a Container (including Stage) to map rectangle to that coordinate space hasProp(property) - returns true if String property exists on object else returns false clone(recursive) - makes a copy of the shape recursive defaults to true so copy will have own copy of graphics @@ -8719,15 +8981,25 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var n = normalizeBounds(a, b, c, d); function normalizeBounds(a, b, c, d) { var bounds = []; - if (!zot(c)) { + if (zot(a)) { + bounds = [a,b,c,d]; + } else if (zot(b)) { + if (a.x) bounds = [a.x, a.y, a.width, a.height]; + else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = a; + } + } else if (!zot(c)) { bounds[0] = a; - bounds[2] = c; bounds[1] = b; + bounds[2] = c; bounds[3] = d; } else { bounds[0] = 0; - bounds[2] = a; bounds[1] = 0; + bounds[2] = a; bounds[3] = b; } if (zot(bounds[3])) bounds[3] = bounds[2]; @@ -8758,8 +9030,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } }); - this.cache = function(a,b,c,d,scale,options,margin) { - var sig = "a,b,c,d,scale,options,margin"; + this.cache = function(a,b,c,d,scale,options,margin,rtl,willReadFrequently) { + var sig = "a,b,c,d,scale,options,margin,rtl,willReadFrequently"; var duo; if (duo = zob(that.cache, arguments, sig)) return duo; var bounds = that.getBounds(); if (zot(c)) { @@ -8779,7 +9051,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } } if (zot(margin)) margin = 0; - that.cjsShape_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options); + that.cjsShape_cache(a-margin,b-margin,c+margin*2,d+margin*2,scale,options,rtl,willReadFrequently); + that.z_bc = that.cacheCanvas; return that; }; this.setBounds = function(a,b,c,d) { @@ -8787,6 +9060,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.cjsShape_setBounds(n[0],n[1],n[2],n[3]); return this; }; + this.getBounds = function(targetSpace) { + if (targetSpace) { + return that.boundsToGlobal(null,null,null,targetSpace); + } + return that.cjsShape_getBounds(); + }; if (style!==false) zim.styleTransforms(this, DS); // global function - would have put on DisplayObject if had access to it this.clone = function(recursive) { if (zot(recursive)) recursive = true; @@ -8843,7 +9122,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (this.parent) this.parent.removeChild(this); }; }; - zim.extend(zim.Shape, createjs.Shape, ["cache","clone","setBounds","localToLocal","localToGlobal","globalToLocal"], "cjsShape", false); + zim.extend(zim.Shape, createjs.Shape, ["cache","clone","setBounds","getBounds","localToLocal","localToGlobal","globalToLocal"], "cjsShape", false); zimify(zim.Shape.prototype); //-50.6 @@ -8915,21 +9194,19 @@ END EXAMPLE EXAMPLE // applying filters -const bitmap = frame.asset("statue.jpg"); -bitmap.filters = [new createjs.BlurFilter(25, 25, 1)]; -bitmap.cache().center(); +new Pic("statue.jpg").effect(new BlurEffect()).center(); END EXAMPLE EXAMPLE // getting the color at point(100, 100) on the Bitmap -const bitmap = frame.asset("statue.jpg").cache(); +const bitmap = new Pic("statue.jpg").cache(); const ctx = bitmap.cacheCanvas.getContext('2d'); const data = ctx.getImageData(100, 100, 1, 1).data; const color = "rgba("+data.join(", ")+")"; END EXAMPLE EXAMPLE -// a Base64 image: +// a Base64 image - with a long list of characters: const image = "data:image/png;base64,longlistofcharacters"; const logo; Bitmap.fromData(image, bitmap=>{ @@ -8999,7 +9276,17 @@ drawImageData(x, y, sourceX, sourceY, sourceWidth, sourceHeight) - draws the Bit sourceY - (default 0) where in the imageData to start using the data in the y sourceWidth - (default the width of the imageData) how much width of the data to use sourceHeight - (default the height of the imageData) how much height of the data to use -cache(width||x, height||y, null||width, null||height, scale, options, rtl) - overrides CreateJS cache() and returns object for chaining +setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining + If you do not provide any parameters, then the bounds will be reset to the calculated bounds + width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided + or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach + height||y - (default width) the height of the bounds - or the y if four parameters are provided + width - (default null) the width of the bounds - or null if only the first two parameters are provided + height - (default null) the height of the bounds - or null if only the first two parameters are provided +getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border) + pass in a Container (including Stage) to map rectangle to that coordinate space +cache(width||x, height||y, null||width, null||height, scale, options, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining + ** Supports ZIM DUO ** Usually you do not want to cache a Bitmap as it is already a Bitmap ;-) ** But for applying a filter or using a cacheCanvas to get a context, etc. then you might. If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object @@ -9010,6 +9297,8 @@ cache(width||x, height||y, null||width, null||height, scale, options, rtl) - ove scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up options - (default null) additional parameters for cache logic - see CreateJS somewhere for details rtl - (default null) set to true to use Right to Left. + willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL() + if you get a warning in the console about willReadFrequently then set this to true getColorAt(x,y,array) - returns the rgba() value at the x and y location - passes array of [r,g,b,a] if array parameter is true hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy with properties such as x, y, etc. also copied - also copies file and src properties @@ -9020,7 +9309,7 @@ ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO: see the CreateJS Easel Docs for Bitmap methods, such as: -on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. +on(), off(), dispatchEvent(), etc. PROPERTIES type - holds the class name as a String @@ -9078,10 +9367,10 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe if (image.uncache) { // testing if it has a CreateJS uncache method displayCheck = true; var cached = image.cacheCanvas; - var original = image; - image = image.cache(left,top,width,height,scale).cacheCanvas; // what we will pass to bitmap - } - } + var original = image; + this.z_bc = image = image.cache(left,top,width,height,scale).cacheCanvas; // what we will pass to bitmap + } + } this.cjsBitmap_constructor(image); if (original && !cached) original.uncache(); @@ -9131,8 +9420,47 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe if (displayCheck) that.sourceRect = {x:0, y:0, width:width*scale, height:height*scale}; else that.sourceRect = {x:left, y:top, width:width, height:height}; } + function normalizeBounds(a, b, c, d) { + var bounds = []; + if (zot(a)) { + bounds = [a,b,c,d]; + } else if (zot(b)) { + if (a.x) bounds = [a.x, a.y, a.width, a.height]; + else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = a; + } + } else if (!zot(c)) { + bounds[0] = a; + bounds[1] = b; + bounds[2] = c; + bounds[3] = d; + } else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = b; + } + if (zot(bounds[3])) bounds[3] = bounds[2]; + return bounds; + } + this.setBounds = function(a,b,c,d) { + var n = normalizeBounds(a, b, c, d); + that.cjsBitmap_setBounds(n[0],n[1],n[2],n[3]); + return that; + }; + this.getBounds = function(targetSpace) { + if (targetSpace) { + return that.boundsToGlobal(null,null,null,targetSpace); + } + return that.cjsBitmap_getBounds(); + }; - this.cache = function(a,b,c,d,scale,options,rtl) { + this.cache = function(a,b,c,d,scale,options,rtl,willReadFrequently) { + var sig = "a,b,c,d,scale,options,rtl,willReadFrequently"; + var duo; if (duo = zob(that.cache, arguments, sig)) return duo; var bounds; if (zot(c)) { if (zot(a)) { @@ -9151,10 +9479,11 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe b = 0; } } - bounds = this.getBounds(); - this.cjsBitmap_cache(a,b,c,d,scale,options,rtl); - this.setBounds(bounds.x, bounds.y, bounds.width, bounds.height); - return this; + bounds = that.getBounds(); + that.cjsBitmap_cache(a,b,c,d,scale,options,rtl,willReadFrequently); + that.setBounds(bounds.x, bounds.y, bounds.width, bounds.height); + that.z_bc = that.cacheCanvas; + return that; }; this.clone = function() { @@ -9185,10 +9514,10 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe var myContext; this.getColorAt = function(x,y,array) { if (!myContext) { - that.cache(); - myContext = that.cacheCanvas.getContext('2d'); + that.cache(null,null,null,null,null,null,null,true); + myContext = that.cacheCanvas.getContext('2d'); that.uncache(); - } + } var d = myContext.getImageData(x, y, 1, 1).data; d[3] /= 255; if (array) return d; @@ -9222,7 +9551,7 @@ zim.Bitmap = function(image, width, height, left, top, scale, style, group, inhe if (that.cacheCanvas) that.updateCache(); if (!myContext) { - that.cache(); + that.cache(null,null,null,null,null,null,null,true); myContext = that.cacheCanvas.getContext('2d'); // that.uncache(); } @@ -9298,7 +9627,7 @@ zim.Bitmap.fromData = function(data, callback) { } img.src = data; }; -zim.extend(zim.Bitmap, createjs.Bitmap, ["cache","clone","dispose","localToLocal","localToGlobal","globalToLocal"], "cjsBitmap", false); +zim.extend(zim.Bitmap, createjs.Bitmap, ["cache","clone","dispose","setBounds","getBounds","localToLocal","localToGlobal","globalToLocal"], "cjsBitmap", false); zim.Bitmap.prototype.dispose = function() {return this.doDispose();}; zimify(zim.Bitmap.prototype); //-50.7 @@ -9438,7 +9767,8 @@ END EXAMPLE PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) -image - the ZIM Bitmap for the spritesheet +image - the ZIM Pic() ir ZIM Bitmap() for the spritesheet + or use a string filename to a preloaded image file (in Frame or loadAssets()) cols - (default 1) - the columns in the spritesheet rows - (default 1) the rows in the spritesheet count - (default cols*rows) how many total frames in the spritesheet @@ -9522,6 +9852,15 @@ pauseRun(state) - pause or unpause the animation (including an animation series) state - (default true) when true the animation is paused - set to false to unpause returns object for chaining stopRun() - stop the sprite from animating +setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining + If you do not provide any parameters, then the bounds will be reset to the calculated bounds + width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided + or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach + height||y - (default width) the height of the bounds - or the y if four parameters are provided + width - (default null) the width of the bounds - or null if only the first two parameters are provided + height - (default null) the height of the bounds - or null if only the first two parameters are provided +getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border) + pass in a Container (including Stage) to map rectangle to that coordinate space hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection @@ -9531,7 +9870,7 @@ drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO: see the CreateJS Easel Docs for Sprite methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), -on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. +on(), off(), dispatchEvent(), etc. PROPERTIES type - holds the class name as a String @@ -9588,6 +9927,7 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr var that = this; var sheet; if (zot(frame)) frame = DS.frame!=null?DS.frame:WW.zdf; + if (image && typeof image == "string") image = frame.asset(image); if (zot(json) && !zot(image)) { if (zot(cols)) cols = DS.cols!=null?DS.cols:1; if (zot(rows)) rows = DS.rows!=null?DS.rows:1; @@ -9963,7 +10303,9 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr if (style!==false) zim.styleTransforms(this, DS); // global function - would have put on DisplayObject if had access to it this.clone = function() { - return this.cloneProps(new zim.Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, null, globalControl, spriteSheet, label, frame, style, this.group, inherit)); + var s = this.cloneProps(new zim.Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, null, globalControl, spriteSheet, label, frame, style, this.group, inherit)); + if (that.frame >= 0) s.run({startFrame:that.frame, endFrame:that.frame}); + return s; }; if (createjs && !createjs.stageTransformable && frame.retina) { this.localToGlobal = function(x,y) { @@ -9982,6 +10324,43 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr }; zim.displayBase(that); + function normalizeBounds(a, b, c, d) { + var bounds = []; + if (zot(a)) { + bounds = [a,b,c,d]; + } else if (zot(b)) { + if (a.x) bounds = [a.x, a.y, a.width, a.height]; + else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = a; + } + } else if (!zot(c)) { + bounds[0] = a; + bounds[1] = b; + bounds[2] = c; + bounds[3] = d; + } else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = b; + } + if (zot(bounds[3])) bounds[3] = bounds[2]; + return bounds; + } + this.setBounds = function(a,b,c,d) { + var n = normalizeBounds(a, b, c, d); + that.cjsSprite_setBounds(n[0],n[1],n[2],n[3]); + return that; + }; + this.getBounds = function(targetSpace) { + if (targetSpace) { + return that.boundsToGlobal(null,null,null,targetSpace); + } + return that.cjsSprite_getBounds(); + }; this.dispose = function() { zim.gD(this); // globalDispose function for common elements @@ -9990,7 +10369,7 @@ animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pr if (this.parent) this.parent.removeChild(this); }; }; - zim.extend(zim.Sprite, createjs.Sprite, ["clone","localToLocal","localToGlobal","globalToLocal"], "cjsSprite", false); + zim.extend(zim.Sprite, createjs.Sprite, ["clone","setBounds","getBounds","localToLocal","localToGlobal","globalToLocal"], "cjsSprite", false); zimify(zim.Sprite.prototype); //-50.8 @@ -10046,6 +10425,15 @@ inherit - (default null) used internally but can receive an {} of styles directl METHODS hasProp(property as String) - returns true if property exists on object else returns false +setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining + If you do not provide any parameters, then the bounds will be reset to the calculated bounds + width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided + or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach + height||y - (default width) the height of the bounds - or the y if four parameters are provided + width - (default null) the width of the bounds - or null if only the first two parameters are provided + height - (default null) the height of the bounds - or null if only the first two parameters are provided +getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border) + pass in a Container (including Stage) to map rectangle to that coordinate space clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection @@ -10054,7 +10442,7 @@ drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO: see the CreateJS Easel Docs for MovieClip methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), -on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. +on(), off(), dispatchEvent(), etc. PROPERTIES type - holds the class name as a String @@ -10124,6 +10512,43 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } zim.displayBase(this); + function normalizeBounds(a, b, c, d) { + var bounds = []; + if (zot(a)) { + bounds = [a,b,c,d]; + } else if (zot(b)) { + if (a.x) bounds = [a.x, a.y, a.width, a.height]; + else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = a; + } + } else if (!zot(c)) { + bounds[0] = a; + bounds[1] = b; + bounds[2] = c; + bounds[3] = d; + } else { + bounds[0] = 0; + bounds[1] = 0; + bounds[2] = a; + bounds[3] = b; + } + if (zot(bounds[3])) bounds[3] = bounds[2]; + return bounds; + } + this.setBounds = function(a,b,c,d) { + var n = normalizeBounds(a, b, c, d); + that.cjsMovieClip_setBounds(n[0],n[1],n[2],n[3]); + return that; + }; + this.getBounds = function(targetSpace) { + if (targetSpace) { + return that.boundsToGlobal(null,null,null,targetSpace); + } + return that.cjsMovieClip_getBounds(); + }; this.dispose = function() { zim.gD(this); // globalDispose function for common elements @@ -10132,7 +10557,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (this.parent) this.parent.removeChild(this); }; }; - zim.extend(zim.MovieClip, createjs.MovieClip, ["clone","localToLocal","localToGlobal","globalToLocal"], "cjsMovieClip", false); + zim.extend(zim.MovieClip, createjs.MovieClip, ["clone","setBounds","getBounds","localToLocal","localToGlobal","globalToLocal"], "cjsMovieClip", false); zimify(zim.MovieClip.prototype); //-50.9 @@ -11413,7 +11838,7 @@ zim.CustomShape = function(x, y, w, h) { this.colorCommand.radialGradient(colors,ratios,x0,y0,radius0,x1,y1,radius1); return this; }; - + // special clone that clones contents of shape this.cloneAll = function(exact, style, group, inherit) { var currentBounds = this.getBounds(); @@ -11455,13 +11880,24 @@ circle.color = new RadialColor([yellow,green], [0, .7], 0, 0, 20, 0, 0, 50); new Circle({radius:200, color:pink, percent:50}).center(); END EXAMPLE +EXAMPLE +const circle = new Circle({min:10, max:50}, [red, green, blue]).center(); +interval(1, ()=>{ + // apply a different values picked from original ZIM VEE values + zog(circle.veeObj) + circle.radius = Pick.choose(circle.veeObj.radius); // or zik(circle.veeObj.radius) + circle.color = Pick.choose(circle.veeObj.color); + S.update(); +}); +END EXAMPLE + PARAMETERS ** supports DUO - parameters or single object with properties below ** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function ** supports OCT - parameter defaults can be set with STYLE control (like CSS) radius - |ZIM VEE| (default 50) the radius (from the center to the edge or half the diameter) ;-) -color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - |ZIM VEE| (default null) the stroke color borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) @@ -11532,6 +11968,8 @@ percentage - get or set the percent of the circle (see percent parameter) percentClose - get or set the percent close of the circle (see percentClose parameter) mouseChildren - set to false to avoid dragging the shape inside to drag or interact with objects inside then set mouseChildren 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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -11559,13 +11997,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(percent)) percent = DS.percent!=null?DS.percent:100; if (zot(percentClose)) percentClose = DS.percentClose!=null?DS.percentClose:true; if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; // PICK var oa = remember(radius, color, borderColor, borderWidth, percent); + this.veeObj = {radius:oa[0], color:oa[1], borderColor:oa[2], borderWidth:oa[3], percent:oa[4]}; function remember() {return arguments;} // for cloning PICK radius = zim.Pick.choose(radius); color = zim.Pick.choose(color); @@ -11592,7 +12031,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // border of 0 or a string value still draws a border in CreateJS if (zot(that._borderWidth) || that._borderWidth > 0) { // no border specified or a border > 0 if (!zot(that._borderColor) || !zot(that._borderWidth)) { // either a border color or thickness - if (zot(that._borderColor)) that._borderColor = "black"; + if (zot(that._borderColor)) that._borderColor = zim.black; that.borderColorCommand = g.s(that._borderColor).command; if (that._borderColor && that._borderColor.type) that.specialColor(that.borderColorCommand, that._borderColor, that); that.borderWidthCommand = g.ss(that._borderWidth, strokeObj.caps, strokeObj.joints, strokeObj.miterLimit, strokeObj.ignoreScale).command; @@ -11693,7 +12132,7 @@ new Rectangle({width:100, height:100, corner:[0, 50, [10,50], [40, 20]}).center( new Rectangle(200, 100, "blue", "white", 2).center(); // fill the rectangle with a Bitmap fill assuming icon has been loaded - not the image property -new Rectangle(200, 300, new BitmapColor(asset("icon.png"))).center(); +new Rectangle(200, 300, new BitmapColor(new Pic("icon.png"))).center(); END EXAMPLE PARAMETERS @@ -11703,7 +12142,7 @@ PARAMETERS ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - |ZIM VEE| (default the height if provided else 100) the width height - |ZIM VEE| (default the width if provided else 100) the height -color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - |ZIM VEE| (default null) the stroke color borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels corner - (default 0) the round of corner @@ -11776,6 +12215,8 @@ mouseChildren - set to false to avoid dragging the shape inside to drag or interact with objects inside then set mouseChildren to true scaleDimensions - get or set whether the shape scales when width, height, widthOnly or heightOnly are used also see the scaleDimensions paramater +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -11808,12 +12249,13 @@ zim.Rectangle = function(width, height, color, borderColor, borderWidth, corner, if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; if (zot(scaleDimensions)) scaleDimensions = DS.scaleDimensions!=null?DS.scaleDimensions:true; // PICK var oa = remember(width, height, color, borderColor, borderWidth); + this.veeObj = {width:oa[0], height:oa[1], color:oa[2], borderColor:oa[3], borderWidth:oa[4]}; function remember() {return arguments;} // for cloning PICK width = zim.Pick.choose(width); height = zim.Pick.choose(height); @@ -11844,7 +12286,7 @@ zim.Rectangle = function(width, height, color, borderColor, borderWidth, corner, // border of 0 or a string value still draws a border in CreateJS if (zot(that._borderWidth) || that._borderWidth > 0) { // no border specified or a border > 0 if (!zot(that._borderColor) || !zot(that._borderWidth)) { // either a border color or thickness - if (zot(that._borderColor)) that._borderColor = "black"; + if (zot(that._borderColor)) that._borderColor = zim.black; that.borderColorCommand = g.s(that._borderColor).command; if (that._borderColor && that._borderColor.type) that.specialColor(that.borderColorCommand, that._borderColor, that); that.borderWidthCommand = g.ss(that._borderWidth, strokeObj.caps, strokeObj.joints, strokeObj.miterLimit, strokeObj.ignoreScale).command; @@ -11948,7 +12390,7 @@ a, b and c - |ZIM VEE| (default 100) the lengths of the sides a will run horizontally along the bottom b is upwards and c is back to the origin if c is set to -1 will assume a 90 angle -color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - |ZIM VEE| (default null) the stroke color borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels corner - (default 0) the round of corner @@ -12020,6 +12462,8 @@ angles - read only - Array of angles [bottom left, bottom right, top right] adjusted - read only - the value of the adjust parameter or 0 if no adjust was supplied mouseChildren - set to false to avoid dragging the shape inside to drag or interact with objects inside then set mouseChildren 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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -12053,12 +12497,13 @@ zim.Triangle = function(a, b, c, color, borderColor, borderWidth, corner, center if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(adjust)) adjust = DS.adjust!=null?DS.adjust:0; if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; // PICK var oa = remember(a, b, c, color, borderColor, borderWidth); + this.veeObj = {a:oa[0], b:oa[1], c:oa[2], color:oa[3], borderColor:oa[4], borderWidth:oa[5]}; function remember() {return arguments;} // for cloning PICK a = zim.Pick.choose(a); b = zim.Pick.choose(b); @@ -12110,7 +12555,7 @@ zim.Triangle = function(a, b, c, color, borderColor, borderWidth, corner, center // border of 0 or a string value still draws a border in CreateJS if (zot(that._borderWidth) || that._borderWidth > 0) { // no border specified or a border > 0 if (!zot(that._borderColor) || !zot(that._borderWidth)) { // either a border color or thickness - if (zot(that._borderColor)) that._borderColor = "black"; + if (zot(that._borderColor)) that._borderColor = zim.black; that.borderColorCommand = g.s(that._borderColor).command; if (that._borderColor && that._borderColor.type) that.specialColor(that.borderColorCommand, that._borderColor, that); that.borderWidthCommand = g.ss(that._borderWidth, strokeObj.caps, strokeObj.joints, strokeObj.miterLimit, strokeObj.ignoreScale).command; @@ -12217,7 +12662,7 @@ sides - |ZIM VEE| (default 5) the number of sides pointSize - |ZIM VEE| (default 0) a factor that will indent or outdent the sides to form stars 0 is no indent - 1 is a complete indent - which will have no fill and if there is a border will look like a stick figure beyond 1 is cool - it overlaps on itself and makes multiple patterns -color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - |ZIM VEE| (default null) the stroke color borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) @@ -12284,6 +12729,8 @@ borderDashedCommand - access to the CreateJS stroke dashed command (segments, of see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html mouseChildren - set to false to avoid dragging the shape inside to drag or interact with objects inside then set mouseChildren 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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -12316,11 +12763,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; // PICK var oa = remember(radius, sides, pointSize, color, borderColor, borderWidth); + this.veeObj = {radius:oa[0], sides:oa[1], pointSize:oa[2], color:oa[3], borderColor:oa[4], borderWidth:oa[5]}; function remember() {return arguments;} // for cloning PICK radius = zim.Pick.choose(radius); sides = zim.Pick.choose(sides); @@ -12351,7 +12799,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // border of 0 or a string value still draws a border in CreateJS if (zot(that._borderWidth) || that._borderWidth > 0) { // no border specified or a border > 0 if (!zot(that._borderColor) || !zot(that._borderWidth)) { // either a border color or thickness - if (zot(that._borderColor)) that._borderColor = "black"; + if (zot(that._borderColor)) that._borderColor = zim.black; that.borderColorCommand = g.s(that._borderColor).command; if (that._borderColor && that._borderColor.type) that.specialColor(that.borderColorCommand, that._borderColor, that); that.borderWidthCommand = g.ss(that._borderWidth, strokeObj.caps, strokeObj.joints, strokeObj.miterLimit, strokeObj.ignoreScale).command; @@ -12447,7 +12895,7 @@ PARAMETERS ** supports OCT - parameter defaults can be set with STYLE control (like CSS) length - |ZIM VEE| (default 100) the length of the line - see also length property and start and end point properties thickness - |ZIM VEE| (default 3) the size of the stroke in pixels -color - |ZIM VEE| (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) startHead - |ZIM VEE| (default "none") the start head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this endHead - |ZIM VEE| (default "none") the end head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) @@ -12481,8 +12929,10 @@ setPoints(a, b, c, d) - pass in two ZIM Points or four numbers to set start poin this will not change the x and y of the shape also see startPoint, endPoint, startX, startY, endX, endY properties if an array is used the points are remade like when made with the points parameter -from(a, b) - pass in a ZIM Point or two numbers to set the start point -to(a, b) - pass in a ZIM Point or two numbers to set the end point +from(a, b, localToLocal) - pass in a ZIM Point or two numbers to set the start point + if a DisplayObject is passed in then it will locate the point adjusting for coordinate space (unless localToLocal is false) +to(a, b, localToLocal) - pass in a ZIM Point or two numbers to set the end point + if a DisplayObject is passed in then it will locate the point adjusting for coordinate space (unless localToLocal is false) setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining if one color is used, the current color is used and color1 is the second color in the range cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining @@ -12542,6 +12992,8 @@ lineType - read only access to type of line "straight", "corner", "curve" lineOrientation - get or set the lineOrientation to AUTO, HORIZONTAL or VERTICAL - see Line params for info mouseChildren - set to false to avoid dragging the shape inside to drag or interact with objects inside then set mouseChildren 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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -12566,7 +13018,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(length)) length = DS.length!=null?DS.length:100; if (zot(dashed)) dashed = DS.dashed!=null?DS.dashed:false; if (zot(thickness)) thickness = DS.thickness!=null?DS.thickness:3; - if (zot(color)) color = DS.color!=null?DS.color:"black"; + if (zot(color)) color = DS.color!=null?DS.color:zim.black; if (zot(startHead)) startHead = DS.startHead!=null?DS.startHead:null; if (zot(endHead)) endHead = DS.endHead!=null?DS.endHead:null; if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; @@ -12582,6 +13034,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // PICK var oa = remember(length, color, thickness, startHead, endHead); + this.veeObj = {length:oa[0], color:oa[1], thickness:oa[2], startHead:oa[3], endHead:oa[4]}; function remember() {return arguments;} // for cloning PICK length = zim.Pick.choose(length); color = zim.Pick.choose(color); @@ -12850,6 +13303,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.drawShape(); if (color.type) that.color = color; + // ALSO ADJUST ZIM ZIM 02 - to localToLocal this.setPoints = function(a, b, c, d, arrowAdjustStart, arrowAdjustEnd) { if (Array.isArray(a) && zot(b)) { that.points = a; @@ -12871,10 +13325,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return that; }; - this.from = function(a, b) { + this.from = function(a, b, localToLocal) { + if (zot(localToLocal)) localToLocal = true; + var x, y; + if (a && a.parent && that.parent && localToLocal) { + var point = a.parent.localToLocal(a.x, a.y, that.parent); + x = point.x; + y = point.y; + } if (a && !zot(a.x)) { - that._startX = zot(a.x)?that._startX:a.x; - that._startY = zot(a.y)?that._startY:a.y; + that._startX = !zot(x)?x:zot(a.x)?that._startX:a.x; + that._startY = !zot(y)?y:zot(a.y)?that._startY:a.y; } else { that._startX = zot(a)?that._startX:a; that._startY = zot(b)?that._startY:b; @@ -12883,10 +13344,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return that; }; - this.to = function(a, b) { + this.to = function(a, b, localToLocal) { + if (zot(localToLocal)) localToLocal = true; + var x, y; + if (a && a.parent && that.parent && localToLocal) { + var point = a.parent.localToLocal(a.x, a.y, that.parent); + x = point.x; + y = point.y; + } if (a && !zot(a.x)) { - that._endX = zot(a.x)?that._endX:a.x; - that._endY = zot(a.y)?that._endY:a.y; + that._endX = !zot(x)?x:zot(a.x)?that._endX:a.x; + that._endY = !zot(y)?y:zot(a.y)?that._endY:a.y; } else { that._endX = zot(a)?that._endX:a; that._endY = zot(b)?that._endY:b; @@ -13160,7 +13628,7 @@ dashed - (default false) set to true for dashed border (if borderWidth or border or set to an array of line size then space size, etc. eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc. onTop - (default true) set to false to not bring shape to top of container when dragging -stickColor - (default "#111") set the stick color of the controls +stickColor - (default darker) set the stick color of the controls stickThickness - (default 1) set the stick thickness of the controls selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control @@ -13360,6 +13828,8 @@ selectPoints - get or set whether points can be selected interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc. keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -13413,7 +13883,7 @@ Note the points property has been split into points and pointObjects (and there if (zot(dashed)) dashed = DS.dashed!=null?DS.dashed:false; if (zot(color)) color = DS.color!=null?DS.color:zim.blue; - if (color.style) {this.colorCommand = color; color = "black";} + if (color.style) {this.colorCommand = color; color = zim.black;} if (zot(controlType)) controlType = DS.controlType!=null?DS.controlType:null; var originalControlType = controlType; @@ -13426,9 +13896,9 @@ Note the points property has been split into points and pointObjects (and there if (zot(handleSize)) handleSize = DS.handleSize!=null?DS.handleSize:zim.mobile()?20:10; if (zot(allowToggle)) allowToggle = DS.allowToggle!=null?DS.allowToggle:interactive; if (zot(move)) move = DS.move!=null?DS.move:interactive; - if (zot(stickColor)) stickColor = DS.stickColor!=null?DS.stickColor:"#111"; + if (zot(stickColor)) stickColor = DS.stickColor!=null?DS.stickColor:zim.darker; if (zot(stickThickness)) stickThickness = DS.stickThickness!=null?DS.stickThickness:1; - if (zot(selectColor)) selectColor = DS.selectColor!=null?DS.selectColor:"#fff"; + if (zot(selectColor)) selectColor = DS.selectColor!=null?DS.selectColor:zim.white; if (zot(selectPoints)) selectPoints = DS.selectPoints!=null?DS.selectPoints:interactive; this.stickColor = stickColor; this.stickThickness = stickThickness; @@ -13438,6 +13908,7 @@ Note the points property has been split into points and pointObjects (and there if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; var oa = remember(color); + this.veeObj = {color:oa[0]}; function remember() {return arguments;} // for cloning PICK color = zim.Pick.choose(color); @@ -13660,8 +14131,8 @@ Note the points property has been split into points and pointObjects (and there } function getBackgroundColor(type) { - var colors = {straight:zim.pink, free:zim.yellow, none:zim.blue}; - return colors[type] ? colors[type] : zim.purple; + var colors = {straight:"#e472c4", free:"#ebcb35", none:"#50c4b7"}; + return colors[type] ? colors[type] : "#993399"; } var mob = zim.mobile(); that.drawShape = function () { @@ -13938,12 +14409,12 @@ Note the points property has been split into points and pointObjects (and there return that; }; - that.traverse = function(obj, start, end, time) { + that.traverse = function(obj, start, end, time) { var ratios = zim.copy(that.segmentRatios); ratios.unshift(0); if (zot(end)) end = start+1; var forward = start < end; - var startPercent,endPercent; + var startPercent, endPercent; if (forward) { startPercent = ratios[start]*100; endPercent = ratios[end]*100; @@ -13951,7 +14422,7 @@ Note the points property has been split into points and pointObjects (and there startPercent = 50 + (100 - ratios[start]*100)/2; endPercent = 50 + (100 - ratios[end]*100)/2; } - obj.percentComplete = obj.zimStartPercent = startPercent; + obj.percentComplete = obj.zimStartPercent = startPercent+.1; obj.animate({ ease:"linear", props:{path:that}, @@ -13961,6 +14432,7 @@ Note the points property has been split into points and pointObjects (and there }); obj.on("animation", function (e) { // when it hits the end it may start over + zog(obj.percentComplete, endPercent) if (obj.percentComplete > endPercent || obj.percentComplete == 0) { obj.stopAnimate(); e.remove(); @@ -15214,7 +15686,7 @@ dashed - (default false) set to true for dashed border (if borderWidth or border or set to an array of line size then space size, etc. eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc. onTop - (default true) set to false to not bring shape to top of container when dragging -stickColor - (default "#111") set the stick color of the controls +stickColor - (default darker) set the stick color of the controls stickThickness - (default 1) set the stick thickness of the controls selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control @@ -15405,6 +15877,8 @@ selectPoints - get or set whether points can be selected interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc. keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -15445,8 +15919,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.green); - if (color.style) {this.colorCommand = color; color = "black";} - if (borderColor && borderColor.style) {this.borderColorCommand = borderColor; borderColor = "black";} + if (color.style) {this.colorCommand = color; color = zim.black;} + if (borderColor && borderColor.style) {this.borderColorCommand = borderColor; borderColor = zim.black;} if (zot(points)) points = DS.points!=null?DS.points:4; var approxCheck = typeof points != "number"; var num = typeof points == "number" ? points : points.length; @@ -15463,9 +15937,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(handleSize)) handleSize = DS.handleSize!=null?DS.handleSize:(zim.mobile()?20:10); if (zot(allowToggle)) allowToggle = DS.allowToggle!=null?DS.allowToggle:interactive; if (zot(move)) move = DS.move!=null?DS.move:interactive; - if (zot(stickColor)) stickColor = DS.stickColor!=null?DS.stickColor:"#111"; + if (zot(stickColor)) stickColor = DS.stickColor!=null?DS.stickColor:zim.darker; if (zot(stickThickness)) stickThickness = DS.stickThickness!=null?DS.stickThickness:1; - if (zot(selectColor)) selectColor = DS.selectColor!=null?DS.selectColor:"#fff"; + if (zot(selectColor)) selectColor = DS.selectColor!=null?DS.selectColor:zim.white; if (zot(selectPoints)) selectPoints = DS.selectPoints!=null?DS.selectPoints:interactive; this.stickColor = stickColor; this.stickThickness = stickThickness; @@ -15475,6 +15949,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(strokeObj)) strokeObj = DS.strokeObj!=null?DS.strokeObj:{}; var oa = remember(color, borderColor); + this.veeObj = {color:oa[0], borderColor:oa[1]}; function remember() {return arguments;} // for cloning PICK color = zim.Pick.choose(color); borderColor = zim.Pick.choose(borderColor); @@ -15752,8 +16227,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } function getBackgroundColor(type) { - var colors = {mirror:zim.purple, free:zim.yellow, none:zim.blue}; - return colors[type] ? colors[type] : zim.pink; + var colors = {mirror:"#993399", free:"#ebcb35", none:"#50c4b7"}; + return colors[type] ? colors[type] : "#e472c4"; } that.drawShape = function() { @@ -15769,7 +16244,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // border of 0 or a string value still draws a border in CreateJS if (zot(that._borderWidth) || that._borderWidth > 0) { // no border specified or a border > 0 if (!zot(that._borderColor) || !zot(that._borderWidth)) { // either a border color or thickness - if (zot(that._borderColor)) that._borderColor = "black"; + if (zot(that._borderColor)) that._borderColor = zim.black; if (!that.borderColorCommand) { that.borderColorCommand = g.s(that._borderColor).command; if (that._borderColor && that._borderColor.type) that.specialColor(that.borderColorCommand, that._borderColor, that); @@ -17314,10 +17789,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(borderWidth) || borderWidth > 0) { // no border specified or a border > 0 if (!zot(borderColor) || !zot(borderWidth)) { // either a border color or thickness - if (zot(borderColor)) borderColor = "black"; + if (zot(borderColor)) borderColor = zim.black; } } @@ -17365,12 +17840,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(spineBorderWidth)) spineBorderWidth = DS.spineBorderWidth!=null?DS.spineBorderWidth:null; if (spineBorderColor < 0 || spineBorderWidth < 0) spineBorderColor = spineBorderWidth = null; else if (spineBorderColor!=null && spineBorderWidth==null) spineBorderWidth = 1; - if (zot(spineColor)) spineColor = DS.spineColor!=null?DS.spineColor:(spineBorderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(spineColor)) spineColor = DS.spineColor!=null?DS.spineColor:(spineBorderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(spineDashed)) spineDashed = DS.spineDashed!=null?DS.spineDashed:null; if (zot(spineStrokeObj)) spineStrokeObj = DS.spineStrokeObj!=null?DS.spineStrokeObj:{miterLimit:2}; if (zot(spineBorderWidth) || spineBorderWidth > 0) { if (!zot(spineBorderColor) || !zot(spineBorderWidth)) { - if (zot(spineBorderColor)) spineBorderColor = borderColor?borderColor:"black"; + if (zot(spineBorderColor)) spineBorderColor = borderColor?borderColor:zim.black; } } @@ -17383,7 +17858,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(closeStrokeObj)) closeStrokeObj = DS.closeStrokeObj!=null?DS.closeStrokeObj:{miterLimit:2}; if (zot(closeBorderWidth) || closeBorderWidth > 0) { if (!zot(closeBorderColor) || !zot(closeBorderWidth)) { - if (zot(closeBorderColor)) closeBorderColor = borderColor?borderColor:"black"; + if (zot(closeBorderColor)) closeBorderColor = borderColor?borderColor:zim.black; } } @@ -17408,7 +17883,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (color && color.type) that.specialColor(that.colorCommand, color, that); if (zot(borderWidth) || borderWidth > 0) { if (!zot(borderColor) || !zot(borderWidth)) { - if (zot(borderColor)) borderColor = "black"; + if (zot(borderColor)) borderColor = zim.black; that.borderColorCommand = s.s(borderColor).command; if (borderColor && borderColor.type) that.specialColor(that.borderColorCommand, borderColor, that); that.borderWidthCommand = s.ss(borderWidth, strokeObj.caps, strokeObj.joints, strokeObj.miterLimit, strokeObj.ignoreScale).command; @@ -17423,7 +17898,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (spineColor && spineColor.type) that.specialColor(that.spineColorCommand, spineColor, that); if (zot(spineBorderWidth) || spineBorderWidth > 0) { if (!zot(spineBorderColor) || !zot(spineBorderWidth)) { - if (zot(spineBorderColor)) spineBorderColor = "black"; + if (zot(spineBorderColor)) spineBorderColor = zim.black; that.spineBorderColorCommand = spineS.s(spineBorderColor).command; if (spineBorderColor && spineBorderColor.type) that.specialColor(that.spineBorderColorCommand, spineBorderColor, that); that.spineBorderWidthCommand = spineS.ss(spineBorderWidth, spineStrokeObj.caps, spineStrokeObj.joints, spineStrokeObj.miterLimit, spineStrokeObj.ignoreScale).command; @@ -17438,7 +17913,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (closeColor && closeColor.type) that.specialColor(that.closeColorCommand, closeColor, that); if (zot(closeBorderWidth) || closeBorderWidth > 0) { if (!zot(closeBorderColor) || !zot(closeBorderWidth)) { - if (zot(closeBorderColor)) closeBorderColor = "black"; + if (zot(closeBorderColor)) closeBorderColor = zim.black; that.closeBorderColorCommand = closeS.s(closeBorderColor).command; if (closeBorderColor && closeBorderColor.type) that.specialColor(that.closeBorderColorCommand, closeBorderColor, that); that.closeBorderWidthCommand = closeS.ss(closeBorderWidth, closeStrokeObj.caps, closeStrokeObj.joints, closeStrokeObj.miterLimit, closeStrokeObj.ignoreScale).command; @@ -17673,7 +18148,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return color; }, set: function(value) { - if (zot(value)) value = "black"; + if (zot(value)) value = zim.black; color = value; if (value && value.type) that.specialColor(that.colorCommand, value, that); else that.colorCommand.style = value; @@ -17740,7 +18215,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return spineColor; }, set: function(value) { - if (zot(value)) value = "black"; + if (zot(value)) value = zim.black; spineColor = value; if (!that.spineColorCommand) drawShape(); else if (value && value.type) that.specialColor(that.spineColorCommand, value, that); @@ -17781,7 +18256,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return closeColor; }, set: function(value) { - if (zot(value)) value = "black"; + if (zot(value)) value = zim.black; closeColor = value; if (!that.closeColorCommand) drawShape(); else if (value && value.type) that.specialColor(that.closeColorCommand, value, that); @@ -18098,7 +18573,7 @@ width - (default 220) the width of the rectangle about which the Flare objects a this is a little larger than the ZIM Button default width height - (default 80) the height of the rectangle about which the Flare objects are placed this is a little larger than the ZIM Button default height -color - (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) +color - (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - (default null) the stroke color borderWidth - (default 1 if stroke is set) the size of the stroke in pixels flares - (default null) an array of ZIM Flare objects or a single flare or a ZIM MultiFlare @@ -18189,10 +18664,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":"black"); + if (zot(color)) color = DS.color!=null?DS.color:(borderWidth>0?"rgba(0,0,0,0)":zim.black); if (zot(borderWidth) || borderWidth > 0) { // no border specified or a border > 0 if (!zot(borderColor) || !zot(borderWidth)) { // either a border color or thickness - if (zot(borderColor)) borderColor = "black"; + if (zot(borderColor)) borderColor = zim.black; } } @@ -18243,7 +18718,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // SUBSECTION COMPONENTS /*-- -zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit) +zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit) Label zim class - extends a zim.Container which extends a createjs.Container @@ -18267,7 +18742,7 @@ new Label({ text:"CLICK", size:100, font:"courier", - color:"white", + color:zim.white, rollColor:"red", bold:true, italic:true @@ -18302,12 +18777,12 @@ Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) text |ZIM VEE| - String for the the text of the label size - (default 36) the size of the font in pixels font - (default arial) the font or list of fonts for the text -color - (default "black") color of font (any CSS color) +color - (default black) color of font (any CSS color) rollColor - (default color) the rollover color of the font shadowColor - (default -1) for no shadow - set to any css color to see shadowBlur - (default 14) if shadow is present align - ((default LEFT) text registration point alignment also CENTER/MIDDLE and RIGHT - set to START to align "left" for ZIM DIR constant is "ltr" or "right" when DIR="rtl" - END is the opposite + set to START to align LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite valign - (default TOP) vertical registration point alignment alse CENTER/MIDDLE, BOTTOM bold - (default false) set the font to bold - note: fontOptions has been removed as of ZIM Cat italic - (default false) set the font to italic - note: fontOptions has been removed as of ZIM Cat @@ -18328,12 +18803,12 @@ backgroundBorderWidth - (default null) thickness of the background border corner - (default 0) the round of corner of the background if there is one can also be an array of [topLeft, topRight, bottomRight, bottomLeft] backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set) -padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical) +padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingH and paddingV) padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set) -paddingHorizontal - (default padding) places border out at top bottom -paddingVertical - (default padding) places border out at left and right -shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally -shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically +paddingH - (default padding) places border out at top bottom +paddingV - (default padding) places border out at left and right +shiftH - (default 0) move the label (CreateJS Text) inside the Label container horizontally +shiftV - (default 0) move the label (CreateJS Text) inside the Label container vertically rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons) labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight) labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten @@ -18378,9 +18853,9 @@ italic - get or set the italic (boolean) of the font variant - get or set the variant (boolean) of the font (true is "small-caps") align - get or set the horizontal alignment of the text valign - get or set the vertical alignment of the text -paddingHorizontal - read-only value for paddingHorizontal of label - note - no padding property - that gets split into paddingHorizontal and paddingVertical -paddingVertical - read-only value for paddingVertical of label +paddingH - read-only value for paddingH of label + note - no padding property - that gets split into paddingH and paddingV +paddingV - read-only value for paddingV of label color - gets or sets the label text color (and the rollColor if they are the same to start) colorOnly - gets or only sets the label color backgroundColor - gets or sets the label background color @@ -18398,6 +18873,8 @@ outlineLabel - reference to the outline CreateJS Text object if there is an outl backing - access to backing object background - access to background Rectangle if backgroundColor is set enabled - default is true - set to false to disable +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -18415,8 +18892,8 @@ EVENTS See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+54 - zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit) { - var sig = "text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit"; + zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit) { + var sig = "text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, inherit"; var duo; if (duo = zob(zim.Label, arguments, sig, this)) return duo; z_d("54"); this.zimContainer_constructor(null,null,null,null,false); @@ -18427,11 +18904,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(text)) text=DS.text!=null?DS.text:"LABEL"; if (zot(size)) size=DS.size!=null?DS.size:36; if (zot(font)) font=DS.font!=null?DS.font:"arial"; // arial unless manually set - if (zot(color)) color=DS.color!=null?DS.color:"black"; + if (zot(color)) color=DS.color!=null?DS.color:zim.black; if (zot(bold)) bold=DS.bold!=null?DS.bold:false; if (zot(italic)) italic=DS.italic!=null?DS.italic:false; var oa = remember(text, size, font, color, bold, italic); + this.veeObj = {text:oa[0], size:oa[1], font:oa[2], color:oa[3], bold:oa[4], italic:oa[5]}; function remember() {return arguments;} text = zim.Pick.choose(text); @@ -18442,6 +18920,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } size = zim.Pick.choose(size); font = zim.Pick.choose(font); + font = font.replace("+", " "); color = zim.Pick.choose(color); bold = zim.Pick.choose(bold); italic = zim.Pick.choose(italic); @@ -18452,16 +18931,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(align)) align=DS.align!=null?DS.align:"left"; if (zot(valign)) valign=DS.valign!=null?DS.valign:"top"; if ((!zot(outlineColor) || !zot(DS.outlineColor)) && zot(outlineWidth)) outlineWidth = DS.outlineWidth!=null?DS.outlineWidth:Math.round(size*.2); - if ((!zot(outlineWidth) || !zot(DS.outlineWidth)) && zot(outlineColor)) outlineColor = DS.outlineColor!=null?DS.outlineColor:"#000000"; + if ((!zot(outlineWidth) || !zot(DS.outlineWidth)) && zot(outlineColor)) outlineColor = DS.outlineColor!=null?DS.outlineColor:zim.black; if (zot(outlineWidth)) outlineWidth = DS.outlineWidth!=null?DS.outlineWidth:0; if (zot(backgroundColor) || backgroundColor=="ignore") backgroundColor = (DS.backgroundColor!=null&&backgroundColor!="ignore")?DS.backgroundColor:null; if (zot(backgroundBorderColor)) backgroundBorderColor = (DS.backgroundBorderColor!=null&&backgroundBorderColor!="ignore")?DS.backgroundBorderColor:null; if (zot(backgroundBorderWidth)) backgroundBorderWidth = (DS.backgroundBorderWidth!=null&&backgroundBorderWidth!="ignore")?DS.backgroundBorderWidth:null; if (zot(padding) || padding=="ignore") padding = (DS.padding!=null&&padding!="ignore")?DS.padding:10; - if (zot(paddingHorizontal)) paddingHorizontal = DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; - if (zot(paddingVertical)) paddingVertical = DS.paddingVertical!=null?DS.paddingVertical:padding; - if (zot(shiftHorizontal)) shiftHorizontal = DS.shiftHorizontal!=null?DS.shiftHorizontal:0; - if (zot(shiftVertical)) shiftVertical = DS.shiftVertical!=null?DS.shiftVertical:0; + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; + if (zot(shiftH)) shiftH = DS.shiftH!=null?DS.shiftH:0; + if (zot(shiftV)) shiftV = DS.shiftV!=null?DS.shiftV:0; if (zot(variant)) variant=DS.variant!=null?DS.variant:false; if (zot(lineWidth)) lineWidth = DS.lineWidth!=null?DS.lineWidth:null; if (zot(lineHeight)) lineHeight = DS.lineHeight!=null?DS.lineHeight:null; @@ -18479,8 +18958,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var that = this; this.mouseChildren = false; - this.paddingVertical = paddingVertical; - this.paddingHorizontal = paddingHorizontal; + this.paddingV = paddingV; + this.paddingH = paddingH; // handle DIR effect if ((WW.DIR && WW.DIR=="rtl") || (!WW.DIR && zim.DIR=="rtl")) { @@ -18508,8 +18987,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var hitArea = new createjs.Shape(); that.hitArea = hitArea; } else { - if (lW) lW = lW-paddingHorizontal*2; - if (lH) lH = lH-paddingVertical*2; + if (lW) lW = lW-paddingH*2; + if (lH) lH = lH-paddingV*2; } function makeLabel(t) { @@ -18590,7 +19069,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function setBackground() { that.removeChild(that.background); that.background = new zim.Rectangle( - that.getBounds().width+paddingHorizontal*2, that.getBounds().height+paddingVertical*2, + that.getBounds().width+paddingH*2, that.getBounds().height+paddingV*2, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, null, null, false ); zim.center(that.background, that, 0); @@ -18650,12 +19129,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (!zot(backing)) { if (backing.type == "Pattern") { - that.backing = new zim.Container(that.width+paddingHorizontal*2, that.height+paddingVertical*2, null, null, false).centerReg(null, null, false); + that.backing = new zim.Container(that.width+paddingH*2, that.height+paddingV*2, null, null, false).centerReg(null, null, false); if (shadowColor != -1 && shadowBlur > 0) { - var shadowRect = new zim.Rectangle(that.width+paddingHorizontal*2-2, that.height+paddingVertical-2, "#666", null, null, corner, null, null, null, false).center(that.backing); + var shadowRect = new zim.Rectangle(that.width+paddingH*2-2, that.height+paddingV-2, "#666", null, null, corner, null, null, null, false).center(that.backing); shadowRect.shadow = new createjs.Shadow(shadowColor, 3, 3, shadowBlur); } - var mask = new zim.Rectangle(that.width+paddingHorizontal*2, that.height+paddingVertical*2, backgroundColor, null, null, corner, null, null, null, false).addTo(that.backing); + var mask = new zim.Rectangle(that.width+paddingH*2, that.height+paddingV*2, backgroundColor, null, null, corner, null, null, null, false).addTo(that.backing); backing.centerReg(mask); backing.setMask(mask); that.backing.pattern = backing; @@ -18675,10 +19154,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } function finalShift() { - zim.pos(obj, (align=="left"||align=="right")?(backing||that.background?paddingHorizontal:0):null, (valign=="top"||valign=="baseline"||valign=="bottom")?(backing||that.background?paddingVertical:0):null, align=="right", valign=="bottom"); + zim.pos(obj, (align=="left"||align=="right")?(backing||that.background?paddingH:0):null, (valign=="top"||valign=="baseline"||valign=="bottom")?(backing||that.background?paddingV:0):null, align=="right", valign=="bottom"); // zim.pos(obj, (align=="left"||align=="right")?0:null, (valign=="top"||valign=="baseline"||valign=="bottom")?0:null, align=="right", valign=="bottom"); - obj.x += shiftHorizontal; - obj.y += shiftVertical; + obj.x += shiftH; + obj.y += shiftV; } finalShift(); @@ -18939,7 +19418,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo lW = lineWidth; if (!zot(backing) || !zot(backgroundColor)) { - if (lW) lW = lW-paddingHorizontal*2; + if (lW) lW = lW-paddingH*2; } that.label.lineWidth = lW; @@ -18965,7 +19444,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo lH = labelHeight; if (!zot(backing) || !zot(backgroundColor)) { - if (lH) lH = lH-paddingVertical*2; + if (lH) lH = lH-paddingV*2; } if (lineWidth) fitText(); @@ -19024,7 +19503,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo zim.styleTransforms(this, DS); this.clone = function(exact) { return that.cloneProps(new zim.Label((exact||!zim.isPick(oa[0]))?that.text:oa[0], (exact||!zim.isPick(oa[1]))?size:oa[1], (exact||!zim.isPick(oa[2]))?font:oa[2], (exact||!zim.isPick(oa[3]))?color:oa[3], rollColor, shadowColor, shadowBlur, align, valign, (exact||!zim.isPick(oa[4]))?bold:oa[4], (exact||!zim.isPick(oa[5]))?italic:oa[5], variant, lineWidth, lineHeight, - !zot(backing)?backing.clone(exact):null, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, this.group, inherit)); + !zot(backing)?backing.clone(exact):null, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, this.group, inherit)); }; }; zim.extend(zim.Label, zim.Container, "clone", "zimContainer"); @@ -19426,7 +19905,7 @@ zim.LabelOnArc = function(label, size, font, color, radius, flip, spacing, lette if (zot(size)) size = DS.size!=null?DS.size:30; if (zot(label)) label = DS.label!=null?DS.label:new zim.Label("Label on Arc", size); if (zot(font)) font = DS.font!=null?DS.font:"verdana"; - if (zot(color)) color = DS.color!=null?DS.color:"white"; + if (zot(color)) color = DS.color!=null?DS.color:zim.white; if (zot(radius)) radius = DS.radius!=null?DS.radius:100; if (zot(flip)) flip = DS.flip!=null?DS.flip:false; if (zot(spacing)) spacing = DS.spacing!=null?DS.spacing:0; @@ -19508,7 +19987,7 @@ zim.LabelOnArc = function(label, size, font, color, radius, flip, spacing, lette that.circle.radius = radius; if (arcColor || arcBorderColor || arcBorderWidth) { - if (arcBorderWidth>0 && zot(arcBorderColor)) arcBorderColor = "#000000"; + if (arcBorderWidth>0 && zot(arcBorderColor)) arcBorderColor = zim.black; else if (zot(arcBorderWidth) && !zot(arcBorderColor)) arcBorderWidth = 2; arc.graphics.c().f(null).s(arcBorderColor).ss(arcBorderWidth).arc(0,0,radius, (that.startAngle-90)*Math.PI/180, (that.startAngle-90+totalAngle)*Math.PI/180); } @@ -19594,7 +20073,7 @@ SEE: https://zimjs.com/cat/html.html NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE -const letters = new LabelLetters("Label Letters", "center", "bottom", 5) +const letters = new LabelLetters("Label Letters", CENTER, "bottom", 5) .center() .animate({ props:{scale:1.5, rotation:-10}, @@ -19624,9 +20103,9 @@ label - (default "Label Letters") a String or a ZIM Label group=groupStyle>font note: use NO QUOTES except for single quote with colors if want HTML blue for instance rather than ZIM blue note: setting groupStyle will make letter from scratch as opposed to building on the submitted label styles -align - (default "center") set to "left", "center" / "middle", "right" for letter registration x positioning +align - (default CENTER) set to LEFT, CENTER / MIDDLE, RIGHT for letter registration x positioning also see lineAlign for alignment of lines -valign - (default "center") set to "top", "center" / "middle", "bottom" for letter registration y positioning +valign - (default CENTER) set to TOP, CENTER / MIDDLE, "bottom" for letter registration y positioning also see lineValign for vertical alignment of lines letterSpacing - (default 5) - the space between letters letterSpacing is turned off if the Label has a backgroundColor @@ -19641,7 +20120,7 @@ lineSpacings - (default null) - an array of the space between lines any values here will override the lineSpacing lineHeight - (default null) null will auto set the height. Set to a number to force line heights - if \n or
are present in label lineAlign - (default LEFT or RIGHT for rtl:true) the horizontal alignment of lines if multiple lines - set to LEFT, CENTER/MIDDLE, RIGHT - set to START to lineAlign "left" for ZIM DIR constant is "ltr" or "right" when DIR="rtl" - END is the opposite + set to START to lineAlign LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite lineValign - (default BOTTOM) the vertical alignment within lineSpacing if multiple lines - set to TOP, CENTER/MIDDLE, BOTTOM cache - (default false) set to true to cache each letter - improves performance on animation rtl - (default false) set to true to reverse letters other than a-zA-Z0-9 and set default lineAlign to RIGHT @@ -20185,7 +20664,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-54.57 /*-- -zim.Emoji = function(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit) +zim.Emoji = function(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, group, inherit) Emoji zim class - extends a zim.Label which extends a zim.Container @@ -20227,7 +20706,7 @@ size |ZIM VEE| - (default 36) the size of the font in pixels monochrome - (default false) set to true to make black outline - this is actually the bold version of the icon italic - (default false) set the font to italic ** SEE Label for the rest of the definitions -backgroundColor, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit +backgroundColor, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, group, inherit backgroundColor - (default null) set to CSS color to add a rectangular color around the label The background color will change size to match the text of the label Note: the backgroundColor is different than a backing which can be any Display Object @@ -20239,12 +20718,12 @@ corner - (default 0) the round of corner of the background if there is one backing - (default null) a Display object for the backing of the emoji (eg. Shape, Bitmap, Container, Sprite) the backing most likely should be centerReg() ie. backing:new Rectangle(200,50,yellow).centerReg() see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc. -padding - (default 10 if backgroundColor set) places the border this amount from emoji (see paddingHorizontal and paddingVertical) +padding - (default 10 if backgroundColor set) places the border this amount from emoji (see paddingH and paddingV) padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set) -paddingHorizontal - (default padding) places border out at top bottom -paddingVertical - (default padding) places border out at left and right -shiftHorizontal - (default 0) move the emoji inside the container horizontally -shiftVertical - (default 0) move the emoji inside the container vertically +paddingH - (default padding) places border out at top bottom +paddingV - (default padding) places border out at left and right +shiftH - (default 0) move the emoji inside the container horizontally +shiftV - (default 0) move the emoji inside the container vertically style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) inherit - (default null) used internally but can receive an {} of styles directly @@ -20262,6 +20741,8 @@ addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChil PROPERTIES type - the name of the class as a String +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -20276,8 +20757,8 @@ See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+54.58 - zim.Emoji = function(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit) { - var sig = "code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit"; + zim.Emoji = function(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, group, inherit) { + var sig = "code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, group, inherit"; var duo; if (duo = zob(zim.Emoji, arguments, sig, this)) return duo; z_d("54.58"); @@ -20292,20 +20773,21 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(backgroundBorderColor)) backgroundBorderColor = (DS.backgroundBorderColor!=null&&backgroundBorderColor!="ignore")?DS.backgroundBorderColor:null; if (zot(backgroundBorderWidth)) backgroundBorderWidth = (DS.backgroundBorderWidth!=null&&backgroundBorderWidth!="ignore")?DS.backgroundBorderWidth:null; if (zot(padding) || padding=="ignore") padding = (DS.padding!=null&&padding!="ignore")?DS.padding:10; - if (zot(paddingHorizontal)) paddingHorizontal = DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; - if (zot(paddingVertical)) paddingVertical = DS.paddingVertical!=null?DS.paddingVertical:padding; - if (zot(shiftHorizontal)) shiftHorizontal = DS.shiftHorizontal!=null?DS.shiftHorizontal:0; - if (zot(shiftVertical)) shiftVertical = DS.shiftVertical!=null?DS.shiftVertical:0; + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; + if (zot(shiftH)) shiftH = DS.shiftH!=null?DS.shiftH:0; + if (zot(shiftV)) shiftV = DS.shiftV!=null?DS.shiftV:0; // PICK var oa = remember(code, size); + this.veeObj = {code:oa[0], size:oa[1]}; function remember() {return arguments;} // for cloning PICK code = zim.Pick.choose(code); size = zim.Pick.choose(size); if (code.substring(0,2) == "U+") code = zim.unicodeToUTF(code); - this.zimLabel_constructor(code, size, null, null, null, null, null, null, null, null, italic, null, null, null, backing, null, null, backgroundColor, null, null, corner, null, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical); + this.zimLabel_constructor(code, size, null, null, null, null, null, null, null, null, italic, null, null, null, backing, null, null, backgroundColor, null, null, corner, null, padding, paddingH, paddingV, shiftH, shiftV); this.type = "Emoji"; this.code = code; this.size = size; @@ -20342,12 +20824,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } else { this.zimLabel_cache(a,b,c,d); } + that.z_bc = that.cacheCanvas; return this; } zim.styleTransforms(this, DS); this.clone = function (exact) { - return that.cloneProps(new zim.Emoji((exact||!zim.isPick(oa[0]))?code:oa[0], (exact||!zim.isPick(oa[1]))?that.size:oa[1], monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, that.group, inherit)); + return that.cloneProps(new zim.Emoji((exact||!zim.isPick(oa[0]))?code:oa[0], (exact||!zim.isPick(oa[1]))?that.size:oa[1], monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, that.group, inherit)); }; }; @@ -20355,7 +20838,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-54.58 /*-- -zim.Button = function(width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentHorizontal, indentVertical, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit) +zim.Button = function(width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentH, indentV, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit) Button zim class - extends a zim.Container which extends a createjs.Container @@ -20433,11 +20916,11 @@ label - (default "CLICK") ZIM Label or plain text with default settings (white) ---------- NORMAL MODE backgroundColor |ZIM VEE| - (default purple) background color of button (any CSS color) also as of ZIM ZIM 01 any backgroundColor can be written as bgColor -rollBackgroundColor |ZIM VEE| - (default pink) rollover background color of button +rollBackgroundColor |ZIM VEE| - (default backgroundColor.lighten(.2)) rollover background color of button also as of ZIM ZIM 01 any backgroundColor can be written as bgColor - so rollBgColor works, etc. downBackgroundColor |ZIM VEE| - (default null) pressing down background color of button -color |ZIM VEE| - (default "white") label color of button (any CSS color) unless a custom Label is set -rollColor |ZIM VEE| - (default "white") rollover label color of button +color |ZIM VEE| - (default white) label color of button (any CSS color) unless a custom Label is set +rollColor |ZIM VEE| - (default white) rollover label color of button downColor |ZIM VEE| - (default null) pressing down label color of button borderColor - (default null) the color of the border rollBorderColor - (default borderColor) rollover color of the border @@ -20463,11 +20946,11 @@ shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) how blurred the shadow is if the shadow is set gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button -align - (default "center") horizontal align of the label -valign - (default "center") vertical align of the label +align - (default CENTER) horizontal align of the label +valign - (default CENTER) vertical align of the label indent - (default 10) indent of label when align or valign is set -indentHorizontal - (default indent) horizontal indent of label when align or valign is set -indentVertical - (default indent) vertical indent of label when align or valign is set +indentH - (default indent) horizontal indent of label when align or valign is set +indentV - (default indent) vertical indent of label when align or valign is set hitPadding - (default 0) adds extra hit area to the button (good for mobile) Note that if the button alpha is 0 the button will still be active if hitPadding is not equal to 0 Set the hitPadding property to 0 in this case - thanks Frank Los for the notice @@ -20591,6 +21074,8 @@ rollWaitIcon - references the wait roll icon (if set) downWaitIcon - references the wait down icon (if set) focus - get or set the focus property of the Button used for tabOrder enabled - default is true - set to false to disable +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -20610,8 +21095,8 @@ dispatches a "waited" event if button is in wait state and the wait time has com See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+55 - zim.Button = function(width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentHorizontal, indentVertical, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit) { - var sig = "width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentHorizontal, indentVertical, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit"; + zim.Button = function(width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentH, indentV, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit) { + var sig = "width, height, label, backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, borderColor, borderWidth, rollBorderColor, downBorderColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon, corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentH, indentV, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, toggleBacking, rollToggleBacking, downToggleBacking, toggleIcon, rollToggleIcon, downToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, downWaitBackgroundColor, waitColor, rollWaitColor, downWaitColor, waitBacking, rollWaitBacking, downWaitBacking, waitIcon, rollWaitIcon, downWaitIcon, waitModal, waitEnabled, style, group, inherit"; var duo; if (duo = zob(zim.Button, arguments, sig, this)) return duo; z_d("55"); this.group = group; @@ -20625,8 +21110,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var oColor = color; var oRollColor = rollColor; var oDownColor = downColor; - if (zot(color)) color=DS.color!=null?DS.color:"white"; - if (zot(rollColor)) rollColor=DS.rollColor!=null?DS.rollColor:"white"; + if (zot(color)) color=DS.color!=null?DS.color:zim.white; + if (zot(rollColor)) rollColor=DS.rollColor!=null?DS.rollColor:zim.white; if (zot(autoPadding)) autoPadding=DS.autoPadding!=null?DS.autoPadding:20; if (zot(autoPaddingH)) autoPaddingH=DS.autoPaddingH!=null?DS.autoPaddingH:autoPadding; if (zot(autoPaddingV)) autoPaddingV=DS.autoPaddingV!=null?DS.autoPaddingV:autoPadding; @@ -20637,7 +21122,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (typeof label === "string" || typeof label === "number") { label = new zim.Label({ text:label, size:DS.size!=null?DS.size:36, font:DS.font!=null?DS.font:"arial", color:DS.color!=null&&oColor==null?DS.color:color, rollColor:DS.rollColor&&oRollColor==null!=null?DS.rollColor:rollColor, align:align, valign:valign, rollPersist:DS.rollPersist!=null?DS.rollPersist:false, - backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", shiftVertical:DS.shiftVertical!=null?DS.shiftVertical:0, shiftHorizontal:DS.shiftHorizontal!=null?DS.shiftHorizontal:0, + backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", shiftV:DS.shiftV!=null?DS.shiftV:0, shiftH:DS.shiftH!=null?DS.shiftH:0, style:false, group:this.group }); } else { @@ -20655,10 +21140,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.type = "Button"; if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.purple; - if (zot(rollBackgroundColor)) rollBackgroundColor=DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.pink; + if (zot(rollBackgroundColor)) rollBackgroundColor=DS.rollBackgroundColor!=null?DS.rollBackgroundColor:backgroundColor.lighten(.2); if (zot(downBackgroundColor)) downBackgroundColor=DS.downBackgroundColor!=null?DS.downBackgroundColor:rollBackgroundColor; var oa = remember(backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor); + this.veeObj = {backgroundColor:oa[0], rollBackgroundColor:oa[1], downBackgroundColor:oa[2], color:oa[3], rollColor:oa[4], downColor:oa[5]}; function remember() {return arguments;} // for cloning PICK backgroundColor = zik(backgroundColor); rollBackgroundColor = zik(rollBackgroundColor); @@ -20681,8 +21167,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(shadowBlur)) shadowBlur=DS.shadowBlur!=null?DS.shadowBlur:14; if (zot(hitPadding)) hitPadding=DS.hitPadding!=null?DS.hitPadding:0; if (zot(indent)) indent=DS.indent!=null?DS.indent:10; - if (zot(indentHorizontal)) indentHorizontal=DS.indentHorizontal!=null?DS.indentHorizontal:indent; - if (zot(indentVertical)) indentVertical=DS.indentVertical!=null?DS.indentVertical:indent; + if (zot(indentH)) indentH=DS.indentH!=null?DS.indentH:indent; + if (zot(indentV)) indentV=DS.indentV!=null?DS.indentV:indent; if (zot(gradient)) gradient = DS.gradient!=null?DS.gradient:0; if (zot(gloss)) gloss = DS.gloss!=null?DS.gloss:0; var toggleOkay = (!zot(toggle) || !zot(toggleBacking) || !zot(rollToggleBacking) || !zot(downToggleBacking) || !zot(toggleIcon) || !zot(rollToggleIcon) || !zot(downToggleIcon)) && zot(wait) && zot(waitBacking) && zot(rollWaitBacking); @@ -20821,7 +21307,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo label.y+=1; this.label = label; - zim.pos(label, (align=="left"||align=="right")?indentHorizontal:null, (valign=="top"||valign=="bottom")?indentVertical:null, align=="right", valign=="bottom"); + zim.pos(label, (align=="left"||align=="right")?indentH:null, (valign=="top"||valign=="bottom")?indentV:null, align=="right", valign=="bottom"); var latestColor = label.color; // used to help down color change back to whatever mode color is set (normal, toggle, wait) @@ -21175,7 +21661,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (originalText) originalText = value; label.center(this); label.y+=1; - zim.pos(label, (align=="left"||align=="right")?indentHorizontal:null, (valign=="top"||valign=="bottom")?indentVertical:null, align=="right", valign=="bottom"); + zim.pos(label, (align=="left"||align=="right")?indentH:null, (valign=="top"||valign=="bottom")?indentV:null, align=="right", valign=="bottom"); } }); @@ -21371,7 +21857,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo !zot(icon)?icon.clone():null, !zot(rollIcon)?rollIcon.clone():null, !zot(downIcon)?downIcon.clone():null, - corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentHorizontal, indentVertical, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, + corner, dashed, shadowColor, shadowBlur, gradient, gloss, align, valign, indent, indentH, indentV, hitPadding, autoPadding, autoPaddingH, autoPaddingV, rollPersist, toggle, toggleBackgroundColor, rollToggleBackgroundColor, downToggleBackgroundColor, toggleColor, rollToggleColor, downToggleColor, @@ -21437,13 +21923,15 @@ END EXAMPLE PARAMETERS ** supports DUO - parameters or single object with properties below +** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed + Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function ** supports OCT - parameter defaults can be set with STYLE control (like CSS) size - (default 60) size in pixels (always square) -label - (default null) ZIM Label object - or String to make a default label (black) -startChecked - (default false) an initial parameter to set checked if true -color - (default "#111") the text color of the label -backgroundColor - (default "rgba(255,255,255,.8)") the background color of the box -borderColor - (default "#111") the color of the border +label - |ZIM VEE| (default null) ZIM Label object - or String to make a default label (black) +startChecked - |ZIM VEE| (default false) an initial parameter to set checked if true +color - (default darker) the text color of the label +backgroundColor - (default white.toAlpha(.8)) the background color of the box +borderColor - (default darker) the color of the border borderWidth - (default size/10) thickness of the border corner - (default 0) the round of the corner can also be an array of [topLeft, topRight, bottomRight, bottomLeft] @@ -21479,6 +21967,8 @@ box2 - the border Rectangle of the checkBox indicator - gives access to the check mark ie. indicator.sca(.8); indicatorColor - get or set the color of the indicator enabled - default is true - set to false to disable +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -21511,31 +22001,40 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.group = group; var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit); - if (zot(size)) size = DS.size!=null?DS.size:60; - if (zot(label)) label = DS.label!=null?DS.label:null; - if (zot(startChecked)) startChecked = DS.startChecked!=null?DS.startChecked:false; - var myChecked = startChecked; - if (zot(color)) color = DS.color!=null?DS.color:"#111"; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(255,255,255,.8)"; - if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"#111"; + if (zot(size)) size = DS.size!=null?DS.size:60; + if (zot(label)) label = DS.label!=null?DS.label:null; + if (zot(startChecked)) startChecked = DS.startChecked!=null?DS.startChecked:false; + if (zot(color)) color = DS.color!=null?DS.color:zim.darker; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.white.toAlpha(.8); + if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:zim.darker; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:size/10; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = size/10; - if (zot(corner)) corner=DS.corner!=null?DS.corner:0; - if (typeof label === "string" || typeof label === "number") label = new zim.Label({ - text:label, size:size*5/6, color:color, valign:"center", align:rtl?"right":"left", - backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", - style:style, group:this.group - }); + if (zot(corner)) corner=DS.corner!=null?DS.corner:0; if (zot(margin)) margin = DS.margin!=null?DS.margin:size/5; if (indicatorType != "box" && indicatorType != "square" && indicatorType != "x") indicatorType = DS.indicatorType!=null?DS.indicatorType:"check"; - if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:borderWidth>0?borderColor:"black"; + if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:borderWidth>0?borderColor:zim.black; this.setBounds(-margin, -margin, size+margin*2, size+margin*2); if (zot(tap)) tap = DS.tap!=null?DS.tap:false; if (zot(rtl)) rtl = DS.rtl!=null?DS.rtl:WW.DIR=="rtl"; var that = this; this.cursor = "pointer"; + + // PICK + var oa = remember(label, startChecked); + this.veeObj = {label:oa[0], startChecked:oa[1]}; + function remember() {return arguments;} // for cloning PICK + label = zim.Pick.choose(label); + startChecked = zim.Pick.choose(startChecked); + var myChecked = startChecked; + + if (typeof label === "string" || typeof label === "number") label = new zim.Label({ + text:label, size:size*5/6, color:color, valign:"center", align:rtl?"right":"left", + backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", + style:style, group:this.group + }); + var box = this.box = new zim.Rectangle(size, size, backgroundColor, null, null, corner); var box2 = this.box2 = new zim.Rectangle(size*5/7, size*5/7, "rgba(0,0,0,0)", borderColor, borderWidth, corner); @@ -21690,8 +22189,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }; if (style!==false) zim.styleTransforms(this, DS); - this.clone = function() { - return that.cloneProps(new zim.CheckBox(size, label?label.clone():"", startChecked, color, backgroundColor, borderColor, borderWidth, corner, margin, indicatorType, indicatorColor, tap, rtl, style, this.group, inherit)); + this.clone = function(exact) { + return that.cloneProps(new zim.CheckBox(size, (exact||!zim.isPick(oa[0]))?label?label.clone():null:oa[0], (exact||!zim.isPick(oa[1]))?startChecked:oa[1], color, backgroundColor, borderColor, borderWidth, corner, margin, indicatorType, indicatorColor, tap, rtl, style, this.group, inherit)); }; }; zim.extend(zim.CheckBox, zim.Container, "clone", "zimContainer", false); @@ -21724,9 +22223,9 @@ buttons - an array of button data objects as follows: [{label:ZIM Label or text, id:optional id, selected:optional Boolean}, {etc...}] or just a list of labels for default labels ["hi", "bye", "what!"] vertical - (default true) displays radio buttons vertically - set to false to display horizontally -color - (default "#111") the text color of the label +color - (default darker) the text color of the label backgroundColor - (default "rgba(255,255,255,.8)") the background color of the circle -borderColor - (default "#111") the color of the border +borderColor - (default darker) the color of the border borderWidth - (default size/9) thickness of the border spacing - (size*.2 for vertical and size for horizontal) the space between radio button objects margin - (size/5) the space around the radio button itself @@ -21800,16 +22299,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo size = Math.max(5, size); if (zot(buttons)) buttons = DS.buttons!=null?DS.buttons:["A", "B", "C"]; if (zot(vertical)) vertical = DS.vertical!=null?DS.vertical:true; - if (zot(color)) color = DS.color!=null?DS.color:"#111"; + if (zot(color)) color = DS.color!=null?DS.color:zim.darker; if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(255,255,255,.8)"; - if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"#111"; + if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:zim.darker; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:size/9; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = size/10; if (zot(spacing)) spacing = (vertical) ? DS.spacing!=null?DS.spacing:size*.2 : DS.spacing!=null?DS.spacing:size; if (zot(margin)) margin = DS.margin!=null?DS.margin:size/5; if (zot(always)) always = DS.always!=null?DS.always:false; - if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:borderWidth>0?borderColor:"black"; + if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:borderWidth>0?borderColor:zim.black; if (zot(rtl)) rtl = DS.rtl!=null?DS.rtl:WW.DIR=="rtl"; var that = this; @@ -22069,10 +22568,10 @@ startToggled - (default false) set to true to start in the toggled position backgroundColor - (default "#C60") dark orange - set to any HTML color for background color margin - (default 10) the distance around and between the toggle and its parts indicatorType - (default "circle" or "round") set to "rectangle" or "square" for square indicator -indicatorColor - (default "#111") +indicatorColor - (default darker) toggleBackgroundColor - (default "#F93") orange - for toggled background color try setting the borderColor to the same color as the background for inner color change effect -color - (default "#111") the font color of the toggle +color - (default darker) the font color of the toggle borderColor - (default null) the color of the border borderWidth - (default null - or 1 if borderColor) the size of the border corner - (default half the height) a corner radius - or an array of corners [topLeft, topRight, bottomRight, bottomLeft] @@ -22137,9 +22636,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"#C60"; if (zot(margin)) margin = DS.margin!=null?DS.margin:10; //20; if (zot(indicatorType)) indicatorType=DS.indicatorType!=null?DS.indicatorType:"circle"; - if (zot(indicatorColor)) indicatorColor=DS.indicatorColor!=null?DS.indicatorColor:"#fff"; + if (zot(indicatorColor)) indicatorColor=DS.indicatorColor!=null?DS.indicatorColor:zim.white; if (zot(toggleBackgroundColor)) toggleBackgroundColor=DS.toggleBackgroundColor!=null?DS.toggleBackgroundColor:"#F93"; - if (zot(color)) color=DS.color!=null?DS.color:"#111"; + if (zot(color)) color=DS.color!=null?DS.color:zim.darker; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:null; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; @@ -22295,7 +22794,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-57.5 /*-- -zim.Tip = function(text, align, valign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, textAlign, textValign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit) +zim.Tip = function(text, tipAlign, tipValign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit) Tip zim class - extends a a zim.Label which extends a zim.Container which extends a createjs.Container @@ -22321,8 +22820,8 @@ const circleTip = new Tip({ color:black, outside:true, // outside the circle target:circle, - align:"center", - valign:"bottom", + align:CENTER, + valign:BOTTOM, margin:14, corner:0, size:20 @@ -22333,8 +22832,8 @@ PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) text - (default "Here's a tip!") String for the the text of the tip -align - (default "right") the horizontal position of the tip ("left", "center"/"middle", "right") -valign - (default "bottom") the vertical position of the tip ("top", "center"/"middle", "bottom") +tipAlign - (default RIGHT) the horizontal position of the tip (LEFT, CENTER / MIDDLE, RIGHT) +tipValign - (default BOTTOM") the vertical position of the tip (TOP, CENTER / MIDDLE, BOTTOM") margin - (default 40) distance from side (unless centered) in pixels marginH - (default margin) distance from horizontal edges marginV - (default margin) distance from vertical edges @@ -22346,12 +22845,12 @@ mouseClose - (default true) set to false to not hide tip on mouse press ** the rest are parameters for a Label (align and valign are set as textAlign and textValign) size - (default 36) the size of the font in pixels font - (default arial) the font or list of fonts for the text -color - (default "black") color of font (any CSS color) +color - (default black) color of font (any CSS color) rollColor - (default color) the rollover color of the font shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow - set to any css color to see shadowBlur - (default 1) if shadow is present -textAlign - ((default "left") text registration point alignment also "center" and "right" -textValign - (default "center") vertical registration point alignment alse "middle / center", "bottom" +align - ((default LEFT) text registration point alignment also CENTER and RIGHT +valign - (default CENTER) vertical registration point alignment alse MIDDLE / CENTER, BOTTOM lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap lineHeight - (default getMeasuredLineHeight) set to number to adjust line height backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite) @@ -22367,12 +22866,12 @@ backgroundBorderWidth - (default null) thickness of the background border corner - (default 0) the round of corner of the background if there is one can also be an array of [topLeft, topRight, bottomRight, bottomLeft] backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set) -padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical) +padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingH and paddingV) padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set) -paddingHorizontal - (default padding) places border out at top bottom -paddingVertical - (default padding) places border out at left and right -shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally -shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically +paddingH - (default padding) places border out at top bottom +paddingV - (default padding) places border out at left and right +shiftH - (default 0) move the label (CreateJS Text) inside the Label container horizontally +shiftV - (default 0) move the label (CreateJS Text) inside the Label container vertically rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons) labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight) labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten @@ -22405,8 +22904,8 @@ on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispat addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES -align - get or set the horizontal alignment -valign - get or set the vertical alignment +tipAlign - get or set the horizontal alignment of the tip +tipValign - get or set the vertical alignment of the tip text - get or set the text of the Tip ALSO: see all properties of a Label() such as size, color, etc. @@ -22423,8 +22922,8 @@ EVENTS See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+57.6 - zim.Tip = function(text, align, valign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, textAlign, textValign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit) { - var sig = "text, align, valign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, textAlign, textValign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit"; + zim.Tip = function(text, tipAlign, tipValign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit) { + var sig = "text, tipAlign, tipValign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, bold, italic, variant, splitWords, style, group, inherit"; var duo; if (duo = zob(zim.Tip, arguments, sig, this)) return duo; z_d("57.6"); @@ -22435,15 +22934,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(margin)) margin = DS.margin!=null?DS.margin:40; if (zot(marginH)) marginH = DS.marginH!=null?DS.marginH:margin; if (zot(marginV)) marginV = DS.marginV!=null?DS.marginV:margin; - if (zot(align)) align = DS.align!=null?DS.align:"right"; - if (zot(valign)) valign = DS.valign!=null?DS.valign:"bottom"; + if (zot(tipAlign)) tipAlign = DS.tipAlign!=null?DS.tipAlign:"right"; + if (zot(tipValign)) tipValign = DS.tipValign!=null?DS.tipValign:"bottom"; if (zot(outside)) outside = DS.outside!=null?DS.outside:false; if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.blue; if (zot(color)) color = DS.color!=null?DS.color:zim.white; if (zot(corner)) corner = DS.corner!=null?DS.corner:25; - if (zot(corner)) corner = DS.corner!=null?DS.corner:25; - if (zot(corner)) corner = DS.corner!=null?DS.corner:25; - if (zot(paddingHorizontal)) paddingHorizontal = DS.paddingHorizontal!=null?DS.paddingHorizontal:14+(Array.isArray(corner)?corner[0]:corner); + if (zot(backgroundDashed)) backgroundDashed = DS.backgroundDashed!=null?DS.backgroundDashed:null; + if (zot(padding)) padding = DS.padding!=null?DS.padding:10; // 14+(Array.isArray(corner)?corner[0]:corner); + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; if (zot(shadowColor) || shadowColor=="ignore") shadowColor=(DS.shadowColor!=null&&shadowColor!="ignore")?DS.shadowColor:"rgba(0,0,0,.3)"; if (zot(shadowBlur) || shadowBlur=="ignore") shadowBlur=(DS.shadowBlur!=null&&shadowBlur!="ignore")?DS.shadowBlur:1; if (zot(delay)) delay = DS.delay!=null?DS.delay:0; @@ -22452,7 +22952,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(mouseClose)) mouseClose = DS.mouseClose!=null?DS.mouseClose:true; - this.zimLabel_constructor(text, size, font, color, rollColor, null, null, textAlign, textValign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, zim.copy(DS)); + this.zimLabel_constructor(text, size, font, color, rollColor, null, null, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, group, zim.copy(DS)); this.type = "Tip"; if (outside) { @@ -22461,8 +22961,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } var that = this; - that.align = align; - that.valign = valign; + that.tipAlign = tipAlign; + that.tipValign = tipValign; this.background.sha(shadowColor, 3, 5, shadowBlur); this.show = function(d, t) { @@ -22497,15 +22997,15 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo container.zimTemp = true; container.loc(0, 0, target.stage); - if (that.align=="center" || that.align=="middle" || that.valign=="center" || that.valign=="middle") { + if (that.tipAlign=="center" || that.tipAlign=="middle" || that.tipValign=="center" || that.tipValign=="middle") { that.center(container); } - that.pos((that.align == "center" || that.align == "middle") ? null : marginH, (that.valign == "center" || that.valign == "middle") ? null : marginV, (that.align == "right"), (that.valign == "bottom"), container); + that.pos((that.tipAlign == "center" || that.tipAlign == "middle") ? null : marginH, (that.tipValign == "center" || that.tipValign == "middle") ? null : marginV, (that.tipAlign == "right"), (that.tipValign == "bottom"), container); if (outside) { - if (that.align == "right") that.x += that.width; - else if (that.align == "left") that.x -= that.width; - if (that.valign == "bottom") that.y += that.height; - else if (that.valign == "top") that.y -= that.height; + if (that.tipAlign == "right") that.x += that.width; + else if (that.tipAlign == "left") that.x -= that.width; + if (that.tipValign == "bottom") that.y += that.height; + else if (that.tipValign == "top") that.y -= that.height; } that.addTo(container.stage); // will transfer over position... @@ -22548,14 +23048,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style !== false) zim.styleTransforms(this, DS); this.clone = function () { - return that.cloneProps(new zim.Tip(text, align, valign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, textAlign, textValign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, this.group, inherit)); + return that.cloneProps(new zim.Tip(text, tipAlign, tipValign, margin, marginH, marginV, outside, target, delay, time, mouseClose, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, maxSize, splitWords, style, this.group, inherit)); }; }; zim.extend(zim.Tip, zim.Label, ["dispose","clone"], "zimLabel", false); //-57.6 /*-- -zim.Pane = function(width, height, content, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, style, group, inherit) +zim.Pane = function(content, backgroundColor, color, width, height, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, autoPadding, autoPaddingH, autoPaddingV, style, group, inherit) Pane zim class - extends a zim.Container which extends a createjs.Container @@ -22569,7 +23069,7 @@ You can change the x and y (the origin and registration point are in the middle) NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE -new Pane(300, 200, "Watch out!", "#CCC").show(); // pressing anywhere will close pane (see parameters for options) +new Pane("Watch out!", yellow).show(); // pressing anywhere will close pane (see parameters for options) END EXAMPLE EXAMPLE @@ -22619,11 +23119,11 @@ const pane = new Pane({ END EXAMPLE EXAMPLE -// custom backing with ZIM Pizzazz 3 -// up top link to https://zimjs.org/cdn/pizzazz_03.js +// custom backing with ZIM Pizzazz import at top +// import zim, {makePattern} from https://zimjs.org/cdn/01/zim_pizzazz new Pane({ - label:new Label({color:white, text:"STOP", size:50}), - backing:pizzazz.makePattern({ + content:new Label({color:white, text:"STOP", size:50}), + backing:makePattern({ type:"stripes", colors:series(red,black), rows:20 @@ -22634,8 +23134,6 @@ END EXAMPLE PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) -width - (default 200) width of pane -height - (default 200) height of pane content - (default null) optional content to be centered in one of three formats: a string or number to add a ZIM Label - color darker a ZIM DisplayObject such as a Circle or a Container with more objects, etc. @@ -22650,8 +23148,10 @@ content - (default null) optional content to be centered in one of three formats color - the color of the message spacingH - horizontal space between the buttons spacingV - vertical space between the content areas -backgroundColor - (default "white") a css color for the background of the Pane -color - (default "black") a css color for the text color of the Pane +backgroundColor - (default white) a css color for the background of the Pane +color - (default black) a css color for the text color of the Pane +width - (default AUTO) width of pane - AUTO will matches content width - see also autoPadding and autoPaddingH +height - (default AUTO) height of pane - AUTO will matches content width - see also autoPadding and autoPaddingV draggable - (default false) pass in true to drag the pane resets - (default true) resets position to start on re-open - set to false to keep last position modal - (default true) pane will close when user clicks off the pane - set to false to keep pane open @@ -22673,11 +23173,14 @@ backing - (default null) a Display object for the backing of the pane (eg. Shape fadeTime - (default 0) seconds to fade in and out - also see ZIM TIME constant container - (default - the default stage) container for the pane titleBar - (default null - no titleBar) a String or ZIM Label title for the pane that will be presented on a titleBar across the top -titleBarColor - (default "black") the color of the titleBar text if a titleBar is requested +titleBarColor - (default black) the color of the titleBar text if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested close - (default false) - a close X for the top right corner that closes the pane when pressed -closeColor - (default #555) - the color of the close X if close is requested +closeColor - (default grey) - the color of the close X if close is requested +autoPadding - (default 70) the padding used by AUTO width or height +autoPaddingH - (default autoPadding) the padding used by AUTO width +autoPaddingV - (default autoPadding) the padding used by AUTO height style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) inherit - (default null) used internally but can receive an {} of styles directly @@ -22696,6 +23199,14 @@ hide(params, callEvent) - hides the pane (as of ZIM ZIM 01 can also use removeFrom()) toggle(state - default null) - shows if hidden and hides if showing (returns the pane for chaining) or pass in true to show pane or false to hide pane +add(obj, index, center, replace) - supports DUO - add object to the content container with optional center + or just add content like usual to the contentContainer. + index is the level in the contentContainer - default is the top + center (default true) for Pane (different than Panel and Window which have false as default) + replace (default true) for Pane (different than Panel and Window which have false as default) + will replace the current content with the new content + see also content parameter of Pane and contentContainer property + returns the pane for chaining hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy with properties such as x, y, etc. also copied (returns the new pane for chaining) dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection @@ -22712,9 +23223,11 @@ type - holds the class name as a String closeCall - a function to call when the pane closes (see also call parameter of show method) closeParams - an object to pass to the closeCall (see also params parameter of show method) backing - or display - reference to the pane box +contentContainer - ZIM Container used to hold added content (formerly the content property) + use the add() method or add directly to the contentContainer property of the pane content - gives access to the content provided as a parameter to the Pane() - note, if a content config object {} was passed in then content is now the Container - and the following properties are added to the Pane() + ** in the past, content refered to what is now the contentContainer + If a content config object {} is used, the following properties are added to the Pane() header - reference to the header if provided message - reference to the message if provided - this is a Label text - reference to the text of the message if provided @@ -22760,8 +23273,8 @@ dispatches a "fadedout" event if fadeTime is set and pane has finished its fade ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+58 - zim.Pane = function(width, height, content, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, style, group, inherit) { - var sig = "width, height, content, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, style, group, inherit"; + zim.Pane = function(content, backgroundColor, color, width, height, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, autoPadding, autoPaddingH, autoPaddingV, style, group, inherit) { + var sig = "content, backgroundColor, color, width, height, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, autoPadding, autoPaddingH, autoPaddingV, style, group, inherit"; var duo; if (duo = zob(zim.Pane, arguments, sig, this)) return duo; z_d("58"); this.zimContainer_constructor(null,null,null,null,false); @@ -22786,17 +23299,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.group = group; var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit); - if (zot(width)) width=DS.width!=null?DS.width:200; - if (zot(height)) height=DS.height!=null?DS.height:200; - if (zot(content)) content = DS.content!=null?DS.content:null; + if (zot(width)) width=DS.width!=null?DS.width:"auto"; + if (zot(height)) height=DS.height!=null?DS.height:"auto"; + if (zot(content)) content=DS.content!=null?DS.content:null; if (typeof content === "string" || typeof content === "number") content = new zim.Label({ text:content, size:DS.size!=null?DS.size:40, align:DS.align!=null?DS.align:"center", valign:DS.valign!=null?DS.valign:"center", color:DS.color!=null?DS.color:color, backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", group:this.group - }).noMouse(); - if (content) content = this.content = zim.makeContent(content, width, zim.dark); - - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"white"; + }).noMouse(); + var myContent = this.content = content; + + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.white; if (zot(draggable)) draggable=DS.draggable!=null?DS.draggable:false; if (zot(resets)) resets=DS.resets!=null?DS.resets:true; if (zot(modal)) modal=DS.modal!=null?DS.modal:true; @@ -22816,7 +23329,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(backdropClose)) backdropClose=DS.backdropClose!=null?DS.backdropClose:true; if (zot(fadeTime)) fadeTime=DS.fadeTime!=null?DS.fadeTime:0; if (zot(close)) close=DS.close!=null?DS.close:false; - if (zot(closeColor)) closeColor=DS.closeColor!=null?DS.closeColor:"#555"; + if (zot(closeColor)) closeColor=DS.closeColor!=null?DS.closeColor:zim.grey; + if (zot(autoPadding)) autoPadding=DS.autoPadding!=null?DS.autoPadding:70; + if (zot(autoPaddingH)) autoPaddingH=DS.autoPaddingH!=null?DS.autoPaddingH:autoPadding; + if (zot(autoPaddingV)) autoPaddingV=DS.autoPaddingV!=null?DS.autoPaddingV:autoPadding; var backdrop = this.backdrop = new zim.Shape({style:false}); @@ -22825,11 +23341,36 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var g = backdrop.graphics; g.f(backdropColor); g.drawRect(-5000,-5000,10000,10000); + + var that = this; + + this.add = function(obj, index, center, replace) { + var sig = "obj, index, center, replace"; + var duo; if (duo = zob(that.add, arguments, sig, that)) return duo; + if (zot(center)) center = true; + if (zot(replace)) replace = true; + if (typeof obj == "string") obj = new Label(obj, null, null, color).noMouse(); + if (replace) that.contentContainer.removeAllChildren(); + if (center) obj.center(that.contentContainer, index); + else obj.addTo(that.contentContainer, index); + return that; + } + + if (myContent) { + var made = zim.makeContent(myContent, width, zim.dark); + var props = ["header","message","text","display","buttons","config"]; + props.forEach(function(p) {if (made[p]) that[p]=made[p];}); + that.label = that.message; // backwards compatibility + if (width=="auto") width = made.width+autoPaddingH*2; + if (height=="auto") height = made.height+autoPaddingV*2; + } + + var content = that.contentContainer = new zim.Container(width, height); + if (made) that.add(made, null, true); + // makes it seem like the pane has the dimensions of the display this.setBounds(-width/2,-height/2, width, height); - - var that = this; - + var props = ["header","message","text","display","buttons","config"]; if (content) props.forEach(function(p) {if (content[p]) that[p]=content[p];}); that.label = that.message; // backwards compatibility @@ -22918,7 +23459,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (typeof titleBar == "string") titleBar = new zim.Label(titleBar, null, null, titleBarColor); var titleBarLabel = that.titleBarLabel = titleBar; if (zot(titleBarHeight)) titleBarHeight=titleBarLabel.height * 1.5; - if (zot(titleBarColor)) titleBarColor = "black"; + if (zot(titleBarColor)) titleBarColor = zim.black; if (zot(titleBarBackgroundColor)) titleBarBackgroundColor = "rgba(0,0,0,.2)"; that.titleBar = titleBar = new zim.Container(width, titleBarHeight, null, null, false).centerReg(that).mov(0,-height/2+titleBarHeight/2); titleBar.mouseEnabled = false; @@ -22942,11 +23483,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (that.message) { var t = (that.message.text == " ") ? "" : that.message.text; return t; + } else if (that.content.text) { + var t = (that.content.text == " ") ? "" : that.content.text; + return t; } }, set: function(value) { if (that.message) { that.message.text = value; + } else if (that.content.text) { + that.content.text = value; } } }); @@ -23080,11 +23626,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { - var lX = label.x; // new Panes automatically center the label - var lY = label.y; - var p2 = that.cloneProps(new zim.Pane(width, height, label.clone(), backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, zot(backing)?backing.clone():null, fadeTime, that.container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, style, this.group, inherit)); - p2.label.x = lX; - p2.label.y = lY; + var lX = that.contentContainer.x; // new Panes automatically center the label + var lY = that.contentContainer.y; + var p2 = that.cloneProps(new zim.Pane(zim.copy(content), backgroundColor, color, width, height, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, !zot(backing)?backing.clone():null, fadeTime, that.container, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, close, closeColor, autoPadding, autoPaddingH, autoPaddingV, style, this.group, inherit)); + p2.contentContainer.x = lX; + p2.contentContainer.y = lY; return p2; }; }; @@ -23190,11 +23736,11 @@ content - (default null) optional content to be centered in one of three formats spacingH - (default 20*buttonScale) horizontal space between the buttons spacingV - (default 20) vertical space between the content areas titleBar - |ZIM VEE| (default "PANEL") a String or ZIM Label title for the panel that will be presented on a titleBar across the top -titleBarColor - |ZIM VEE| (default "black") the text color of the titleBar if a titleBar is requested +titleBarColor - |ZIM VEE| (default black) the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - |ZIM VEE| (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested -backgroundColor - |ZIM VEE| (default #eee) background color (use clear - or "rbga(0,0,0,0)" for no background) -borderColor - |ZIM VEE| (default #888) border color +backgroundColor - |ZIM VEE| (default lighter) background color (use clear - or "rbga(0,0,0,0)" for no background) +borderColor - |ZIM VEE| (default pewter) border color borderWidth - (default 1) the thickness of the border corner - (default 5) the round of corner can also be an array of [topLeft, topRight, bottomRight, bottomLeft] @@ -23207,9 +23753,9 @@ extraButton - (default null) creates a little square button with the letter R fo use the extraButton property to access the button to change its label or capture an event, etc. collapse - (default false) - set to true to add a collapse icon to the titleBar that reduces the panel so only the bar shows and adds an icon to expand also can double click bar to collapse panel -collapseColor - (default #555) - the color of the collapse icon +collapseColor - (default grey) - the color of the collapse icon collapsed - (default false) set to true to start the panel collapsed -align - (default "left") set to "center", "middle" or "right" to align the label on the titleBar +align - (default LEFT) set to CENTER, MIDDLE or "right" to align the label on the titleBar this may get in the way of the close, arrow, collapse or extra buttons at right shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow @@ -23220,11 +23766,12 @@ 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 -add(content, index, center, replace) - add content to the content container with optional center +add(obj, index, center, replace) - supports DUO - add object to the content container with optional center note that the content container is below the title bar index is the level in the contentContainer - default is the top replace will replace the current content with the new content see also content parameter of Panel and contentContainer property + returns the panel for chaining nextPanel(index, event) - show next panel - the panels are set up to be a series or random or function based this means there is not necessarily an order to be able to go backwards to... so, only forward! If a series is provided to the Panel title, etc. then the index can be used to go to the title in the series at the index @@ -23249,8 +23796,7 @@ contentContainer - ZIM Container used to hold added content (formerly the conten this is below the title bar - use the add() method or add directly to the contentContainer property of the panel content - gives access to the content provided as a parameter to the Panel() ** in the past, content refered to what is now the contentContainer - note, if a content config object {} was passed in then content is now the Container - and the following properties are added to the Panel() + If a content config object {} is used, the following properties are added to the Panel() header - reference to the header if provided message - reference to the message if provided - this is a Label text - reference to the text of the message if provided @@ -23307,11 +23853,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(content)) content=DS.content!=null?DS.content:null; var myContent = this.content = content; if (zot(titleBar)) titleBar = DS.titleBar!=null?DS.titleBar:"PANEL"; - if (zot(titleBarColor)) titleBarColor = DS.titleBarColor!=null?DS.titleBarColor:"#fff"; - if (zot(titleBarBackgroundColor)) titleBarBackgroundColor = DS.titleBarBackgroundColor!=null?DS.titleBarBackgroundColor:"#555"; + if (zot(titleBarColor)) titleBarColor = DS.titleBarColor!=null?DS.titleBarColor:zim.white; + if (zot(titleBarBackgroundColor)) titleBarBackgroundColor = DS.titleBarBackgroundColor!=null?DS.titleBarBackgroundColor:zim.grey; if (zot(titleBarHeight)) titleBarHeight = DS.titleBarHeight!=null?DS.titleBarHeight:30; - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"#eee"; - if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"#888"; + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.lighter; + if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:zim.pewter; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; @@ -23322,19 +23868,19 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(draggable)) draggable = DS.draggable!=null?DS.draggable:false; if (zot(boundary)) boundary = DS.boundary!=null?DS.boundary:null; if (zot(close)) close=DS.close!=null?DS.close:false; - if (zot(closeColor)) closeColor = DS.closeColor != null ? DS.closeColor : !zot(titleBarColor) ? titleBarColor : "#555"; + if (zot(closeColor)) closeColor = DS.closeColor != null ? DS.closeColor :!zot(titleBarColor)?titleBarColor:zim.grey; if (zot(next)) next=DS.next!=null?DS.next:zim.vee(titleBar); - if (zot(nextColor)) nextColor=DS.nextColor!=null?DS.nextColor:!zot(titleBarColor) ? titleBarColor : "#555"; + if (zot(nextColor)) nextColor=DS.nextColor!=null?DS.nextColor:!zot(titleBarColor)?titleBarColor:zim.grey; if (!Array.isArray(corner)) corner = [corner,corner,corner,corner]; if (zot(collapse)) collapse=DS.collapse!=null?DS.collapse:false; - if (zot(collapseColor)) collapseColor = DS.collapseColor != null ? DS.collapseColor : !zot(titleBarColor) ? titleBarColor : "#555"; + if (zot(collapseColor)) collapseColor = DS.collapseColor != null ? DS.collapseColor:!zot(titleBarColor)?titleBarColor:zim.grey; if (zot(collapsed)) collapsed=DS.collapsed!=null?DS.collapsed:false; var that = this; - var props = ["header","message","text","display","buttons","config"]; - if (content) props.forEach(function(p) {if (content[p]) that[p]=content[p];}); - that.label = that.message; // backwards compatibility + // var props = ["header","message","text","display","buttons","config"]; + // if (content) props.forEach(function(p) {if (content[p]) that[p]=content[p];}); + // that.label = that.message; // backwards compatibility var background = this.background = new zim.Rectangle(width, height, backgroundColor, borderColor, borderWidth, corner).addTo(this); if (shadowColor != -1 && shadowBlur > 0) { @@ -23344,6 +23890,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var t = zim.Pick.choose(titleBarValue); var tBarColor = zim.Pick.choose(titleBarColor); var tBarBackgroundColor = zim.Pick.choose(titleBarBackgroundColor); + var content = that.contentContainer = new zim.Container(width, height-titleBarHeight).addTo(that).mov(0,titleBarHeight); if (typeof t == "string") t = new zim.Label({ @@ -23380,19 +23927,21 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo s.update(); }); } - - that.add = function(object, center, replace) { + this.add = function(obj, index, center, replace) { + var sig = "obj, index, center, replace"; + var duo; if (duo = zob(that.add, arguments, sig, that)) return duo; if (replace) that.contentContainer.removeAllChildren(); - if (center) object.center(that.contentContainer); - else object.addTo(that.contentContainer); + if (center) obj.center(that.contentContainer, index); + else obj.addTo(that.contentContainer, index); + return that; } - if (that.content) { - var myContent = zim.makeContent(that.content,width); + if (myContent) { + var made = zim.makeContent(myContent,width); var props = ["header","message","text","display","buttons","config"]; - props.forEach(function(p) {if (myContent[p]) that[p]=myContent[p];}); + props.forEach(function(p) {if (made[p]) that[p]=made[p];}); that.label = that.message; // backwards compatibility - that.add(myContent, true); + that.add(made, null, true); } this.nextPanel = function(index, event) { var t = zot(index)||zot(titleBarValue.array)?zim.Pick.choose(titleBarValue):titleBarValue.array[index]; @@ -23486,7 +24035,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.collapsed = !that.collapsed; }); - if (zot(collapseColor)) collapseColor = "#555"; + if (zot(collapseColor)) collapseColor=zim.grey; var collapseIcon = that.collapseIcon = new zim.Triangle(90,90,90,zim.faint,collapseColor,16); collapseIcon.centerReg(that) .scaleTo(titleBar, null, 41) @@ -23569,7 +24118,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-57.7 /*-- -zim.Window = function(width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit) +zim.Window = function(width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit) Window zim class - extends a zim.Container which extends a createjs.Container @@ -23583,6 +24132,9 @@ then set the enable property to true on the animate call function. See update() NOTE: to add ZIM Swipe() to objects in window set the overrideNoSwipe parameter of Swipe to true +NOTE: if animating the window off screen then either turn optimize:false +or use window.update() in the "animation" event with the animate({events:true}) + NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE @@ -23617,10 +24169,10 @@ content - (default null) optional content to be centered in one of three formats spacingH - (default 20*buttonScale) horizontal space between the buttons spacingV - (default 20) vertical space between the content areas scrollBar - set to true if a default scrollBar is present or a number if custom -backgroundColor - (default #333) background color (use clear - or "rbga(0,0,0,0)" for no background) -borderColor - (default #999) border color +backgroundColor - (default dark) background color (use clear - or "rbga(0,0,0,0)" for no background) +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 paddingHorizontal and paddingVertical) +padding - (default 0) places the content in from edges of border (see paddingH and paddingV) padding is ignored if content x and y not 0 - and really only works on top left - so more like an indent corner - (default 0) is the rounded corner of the window (does not accept corner array - scrollBars are too complicated) swipe - (default auto/true) the direction for swiping set to none / false for no swiping @@ -23641,28 +24193,28 @@ interactive - (default true) allows interaction with content in window set to false and whole window will be swipeable but not interactive inside shadowColor - (default rgba(0,0,0,.3)) the color of the shadow shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow -paddingHorizontal - (default padding) places content in from left and right (ignored if content x not 0) -paddingVertical - (default padding) places content in from top and bottom (ignored if content y not 0) +paddingH - (default padding) places content in from left and right (ignored if content x not 0) +paddingV - (default padding) places content in from top and bottom (ignored if content y not 0) scrollWheel - (default true) scroll vertically with scrollWheel damp - (default null) set to .1 for instance to damp the scrolling titleBar - (default null - no titleBar) a String or ZIM Label title for the window that will be presented on a titleBar across the top -titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested +titleBarColor - (default black) the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle() onTop - (default true) set to false to not bring Window to top of container when dragging close - (default false) - a close X for the top right corner that closes the window when pressed -closeColor - (default #555) - the color of the close X if close is requested +closeColor - (default grey) - the color of the close X if close is requested cancelCurrentDrag - (default false) - set to true to cancel window dragging when document window loses focus this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default fullSize - (default false) - set to true to add a fullsize icon to the titleBar to let user increase the size of the window to the frame - will turn into a reduce size icon -fullSizeColor - (default #555) - the color of the fullSize icon +fullSizeColor - (default grey) - the color of the fullSize icon resizeHandle - (default false) - set to true to rollover bottom right corner to resize window with resizeHandle collapse - (default false) - set to true to add a collapse button to the titleBar that reduces the window so only the bar shows and adds a button to expand also can double click bar to collapse window -collapseColor - (default #555) - the color of the collapse icon +collapseColor - (default grey) - the color of the collapse icon collapsed - (default false) set to true to start the window collapsed optimize - (default true) set to false to not turn DisplayObjects that are not on the stage visible false as the Window is scrolled, any objects within the content and any objects within one level of those objects @@ -23714,8 +24266,7 @@ backgroundColor - the color of the backing contentContainer - ZIM Container used to hold added content (formerly the content property) content - gives access to the content provided as a parameter to the Window() ** in the past, content refered to what is now the contentContainer - note, if a content config object {} was passed in then content is now the Container - and the following properties are added to the Window() + If a content config object {} was passed in the following properties are added to the Window() header - reference to the header if provided message - reference to the message if provided - this is a Label text - reference to the text of the message if provided @@ -23778,8 +24329,8 @@ dispatches a "originalsize" event if reduced from fullscreen ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+58.1 - zim.Window = function(width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit) { - var sig = "width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit"; + zim.Window = function(width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit) { + var sig = "width, height, content, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit"; var duo; if (duo = zob(zim.Window, arguments, sig, this)) return duo; z_d("58.1"); this.zimContainer_constructor(null,null,null,null,false); @@ -23789,10 +24340,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(width)) width=DS.width!=null?DS.width:300; if (zot(height)) height=DS.height!=null?DS.height:200; - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"#333"; + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.dark; var originalBorderColor = borderColor; var originalBorderWidth = borderWidth; - if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:"#999"; + if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:zim.silver; if (zot(borderWidth)) borderWidth=DS.borderWidth!=null?DS.borderWidth:1; // 0 if (zot(padding)) padding=DS.padding!=null?DS.padding:0; if (zot(corner)) corner=DS.corner!=null?DS.corner:0; @@ -23811,8 +24362,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(interactive)) interactive=DS.interactive!=null?DS.interactive:true; if (zot(shadowColor)) shadowColor=DS.shadowColor!=null?DS.shadowColor:"rgba(0,0,0,.3)"; if (zot(shadowBlur)) shadowBlur=DS.shadowBlur!=null?DS.shadowBlur:20; - if (zot(paddingVertical)) paddingVertical=DS.paddingVertical!=null?DS.paddingVertical:padding; - if (zot(paddingHorizontal)) paddingHorizontal=DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; + if (zot(paddingV)) paddingV=DS.paddingV!=null?DS.paddingV:padding; + if (zot(paddingH)) paddingH=DS.paddingH!=null?DS.paddingH:padding; if (zot(scrollWheel)) scrollWheel = DS.scrollWheel!=null?DS.scrollWheel:true; if (zot(titleBar)) titleBar = DS.titleBar!=null?DS.titleBar:null; if (zot(titleBarColor)) titleBarColor = DS.titleBarColor!=null?DS.titleBarColor:null; @@ -23852,7 +24403,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // when we know if there are vertical and horizontal scrollBars this.addChild(mask); - if (content) var myContent = content; + if (content) var myContent = that.content = content; content = this.contentContainer = new zim.Container({style:false}); this.addChild(content); content.mask = mask; @@ -23889,9 +24440,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.setBounds(0,-titleBarHeight,that.width,height+titleBarHeight); } - if (closeIcon) { + if (closeIcon) { if (titleBar) closeIcon.pos({x:width-Math.max(corner/2, 10)-closeIcon.width/2, y:titleBarHeight/2, reg:true}); - else close.pos((Math.max(corner/2, 10))/2, closeIcon.height/2, true, false, that); + else closeIcon.pos((Math.max(corner/2, 10))/2, closeIcon.height/2, true, false, that); } if (fullSizeIcon) { @@ -23961,11 +24512,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo contentHeight = content.getBounds()?content.getBounds().height:0; // note, the contentWidth and contentHeight include ONE padding - hCheck = (scrollBarH && contentWidth > width-paddingHorizontal && (scrollBarActive || swipe === true || swipe == "auto" || swipe == "horizontal")); - vCheck = (scrollBarV && contentHeight > height-paddingVertical && (scrollBarActive || swipe === true || swipe == "auto" || swipe == "vertical")); + hCheck = (scrollBarH && contentWidth > width-paddingH && (scrollBarActive || swipe === true || swipe == "auto" || swipe == "horizontal")); + vCheck = (scrollBarV && contentHeight > height-paddingV && (scrollBarActive || swipe === true || swipe == "auto" || swipe == "vertical")); - that.scrollXMax = contentWidth+paddingHorizontal*2-width+(vCheck?gap+scrollBar.margin:0); - that.scrollYMax = contentHeight+paddingVertical*2-height+(hCheck?gap+scrollBar.margin:0); + that.scrollXMax = contentWidth+paddingH*2-width+(vCheck?gap+scrollBar.margin:0); + that.scrollYMax = contentHeight+paddingV*2-height+(hCheck?gap+scrollBar.margin:0); // set mask dynamically as scrollBars may come and go affecting the mask size slightly mg.clear(); @@ -23990,7 +24541,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var scrollBarLength, rect; if (hCheck && scrollBarActive) { - scrollBarLength = Math.max(scrollBar.minSize, (width-edgeLeft-edgeRight) * (width-edgeLeft-edgeRight) / (contentWidth + paddingHorizontal + scrollBar.margin)); + scrollBarLength = Math.max(scrollBar.minSize, (width-edgeLeft-edgeRight) * (width-edgeLeft-edgeRight) / (contentWidth + paddingH + scrollBar.margin)); hg.f(scrollBar.color).rr(0,0,scrollBarLength,scrollBar.size,scrollBar.corner); hscrollBar.x = edgeLeft; hscrollBar.y = height-scrollBar.size-scrollBar.spacing; @@ -24021,7 +24572,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (vCheck && scrollBarActive) { - scrollBarLength = Math.max(scrollBar.minSize, (height-edgeTop-edgeBottom) * (height-edgeTop-edgeBottom) / (contentHeight + paddingVertical + scrollBar.margin)); + scrollBarLength = Math.max(scrollBar.minSize, (height-edgeTop-edgeBottom) * (height-edgeTop-edgeBottom) / (contentHeight + paddingV + scrollBar.margin)); vg.f(scrollBar.color).rr(0,0,scrollBar.size,scrollBarLength,scrollBar.corner); vscrollBar.x = width-scrollBar.size-scrollBar.spacing; vscrollBar.y = edgeTop; @@ -24114,7 +24665,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (close) { - if (zot(closeColor)) closeColor = "#555"; + if (zot(closeColor)) closeColor = zim.grey; var closeIcon = that.closeIcon = new zim.Shape(-40,-40,80,80,null,false); closeIcon.graphics.f(closeColor).p("AmJEVIEUkTIkXkWIB4h5IEWEYIETkTIB4B3IkTESIEQERIh4B4IkRkRIkSEVg"); // width about 90 reg in middle if (titleBar) closeIcon.centerReg(that).scaleTo(titleBar, null, 50).pos({x:width-Math.max(corner/2, 10)-closeIcon.width/2, y:titleBarHeight/2, reg:true}).expand(40); @@ -24160,7 +24711,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (that.stage) that.stage.update(); } - if (zot(fullSizeColor)) fullSizeColor = "#555"; + if (zot(fullSizeColor)) fullSizeColor = zim.grey; var fullSizeIcon = that.fullSizeIcon = new zim.Rectangle(80,80,zim.faint,fullSizeColor,16); var reduceSize = new zim.Shape() .s(fullSizeColor).ss(16) @@ -24219,7 +24770,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (that.stage) that.stage.update(); } - if (zot(collapseColor)) collapseColor = "#555"; + if (zot(collapseColor)) collapseColor = zim.grey; var collapseIcon = that.collapseIcon = new zim.Triangle(90,90,90,zim.faint,collapseColor,16); collapseIcon.centerReg(that) .scaleTo(titleBar, null, 42) @@ -24270,12 +24821,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function resizeWrapper(cont) { if (cont.align == "right") { - cont.x=paddingHorizontal; - cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:paddingHorizontal)-paddingHorizontal*2); + cont.x=paddingH; + cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:paddingH)-paddingH*2); } else if (cont.align == "center" || cont.align == "middle") { - cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:0)-paddingHorizontal*2); + cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:0)-paddingH*2); } else { - cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:0)-paddingHorizontal*2); + cont.resize(that.width-(vCheck?scrollBar.size+scrollBar.spacing*2:0)-paddingH*2); } cont.alpha = cont.wrapperLastAlpha; } @@ -24312,8 +24863,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo vscrollBar.alpha = 1; }); } - if (c.x == 0) c.x = paddingHorizontal; - if (c.y == 0) c.y = paddingVertical; + if (c.x == 0) c.x = paddingH; + if (c.y == 0) c.y = paddingV; that.update(); return that; }; @@ -24713,7 +25264,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function(recursive) { if (zot(recursive)) recursive = true; - var w = that.cloneProps(new zim.Window(width, height, null, backgroundColor, originalBorderColor, originalBorderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBar.color, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit)); + var w = that.cloneProps(new zim.Window(width, height, null, backgroundColor, originalBorderColor, originalBorderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBar.color, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingH, paddingV, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, fullSize, fullSizeColor, resizeHandle, collapse, collapseColor, collapsed, optimize, style, group, inherit)); if (recursive) { that.contentContainer.cloneChildren(w.contentContainer); w.update(); @@ -24794,7 +25345,7 @@ color2 - (default null) a second color which would form a zim.GradientColor() as vertical - (default true) the direction for the gradient if there is a gradient pattern - (default null) a DisplayObject that will be added to the page above the backing For instance, import ZIM pizzazz_03.js and use: - pizzazz.makePattern("slants", series([grey,dark]), 20, 52, 40).alp(.2) + pizzazz.makePattern("slants", series(grey,dark), 20, 52, 40).alp(.2) scalePattern - (default "fill") scale the pattern so it fills the window (formerly "bigger" or "outside") set to false for no scaling or: FIT or "fit" fits inside the Page keeping proportion (formerly "smallest") @@ -24878,7 +25429,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return color; }, set: function(value) { - if (zot(value)) value = "black"; + if (zot(value)) value = zim.black; color = value; that.backing.color = value; } @@ -24964,12 +25515,12 @@ titleBar - (default "LAYER") a String or ZIM Label for the titleBar titleBarContainer - (default null - zdf' stage) a container for the titleBar can group these with other Layers and hide them all by hiding the container for instance this also can help layer the titleBars above the content -backgroundColor - (default #eee) the background color of the titleBar -rollBackgroundColor - (default #fff) the roll background color of the titleBar -selectedBackgroundColor - (default #666) the selected background color of the titleBar -color - (default #666) the color of the titleBar text -rollColor - (default #666) the roll color of the titleBar text -selectedColor - (default #ddd) the selected color of the titleBar text +backgroundColor - (default lighter) the background color of the titleBar +rollBackgroundColor - (default white) the roll background color of the titleBar +selectedBackgroundColor - (default granite) the selected background color of the titleBar +color - (default granite) the color of the titleBar text +rollColor - (default granite) the roll color of the titleBar text +selectedColor - (default moon) the selected color of the titleBar text borderWidth - (default 1) the width of the ghost outline when the Layer is not selected to adjust the transform controls border width use the transformObject parameter and set the borderWidth property borderColor - (default borderColor) the color of the ghost outline when the Layer is not selected @@ -25116,12 +25667,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var titleBarText = titleBar; var titleBarDefault = true; - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"#eee"; - if (zot(rollBackgroundColor)) rollBackgroundColor=DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#fff"; - if (zot(selectedBackgroundColor)) selectedBackgroundColor=DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:"#666"; - if (zot(color)) color=DS.color!=null?DS.color:"#666"; - if (zot(rollColor)) rollColor=DS.rollColor!=null?DS.rollColor:"#666"; - if (zot(selectedColor)) selectedColor=DS.selectedColor!=null?DS.selectedColor:"#ddd"; + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.lighter; + if (zot(rollBackgroundColor)) rollBackgroundColor=DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.white; + if (zot(selectedBackgroundColor)) selectedBackgroundColor=DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:zim.granite; + if (zot(color)) color=DS.color!=null?DS.color:zim.granite; + if (zot(rollColor)) rollColor=DS.rollColor!=null?DS.rollColor:zim.granite; + if (zot(selectedColor)) selectedColor=DS.selectedColor!=null?DS.selectedColor:zim.moon; if (zot(borderWidth)) borderWidth=DS.borderWidth!=null?DS.borderWidth:1; if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:backgroundColor; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; @@ -25451,12 +26002,12 @@ You can change the x and y (with origin and registration point in middle). NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE -const waiter = new Waiter(stage); -waiter.show(); // show the waiter until assets load -frame.loadAssets("greeting.mp3"); +const waiter = new Waiter().show(); // show the waiter until assets load +frame.loadAssets("bigPic.jpg"); frame.on("complete", ()=>{ waiter.hide(); - frame.asset("greeting.mp3").play(); + new Pic("bigPic.jpg").center(); + S.update(); }); END EXAMPLE @@ -25465,7 +26016,7 @@ PARAMETERS ** supports OCT - parameter defaults can be set with STYLE control (like CSS) container - (default first frame's stage) the container that holds the waiter speed - (default .6) cycle time in seconds (also see ZIM TIME constant) -foregroundColor - (default "white") the dot color +foregroundColor - (default white) the dot color backgroundColor - (default "orange") the background color corner - (default 14) the corner radius of the waiter box can also be an array of [topLeft, topRight, bottomRight, bottomLeft] @@ -25520,7 +26071,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var timeType = getTIME(speed); if (zot(speed)) speed=DS.speed!=null?DS.speed:timeType=="s"?.6:600; // ms cycle time - if (zot(foregroundColor)) foregroundColor=DS.foregroundColor!=null?DS.foregroundColor:"white"; + if (zot(foregroundColor)) foregroundColor=DS.foregroundColor!=null?DS.foregroundColor:zim.white; if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"orange"; if (zot(corner)) corner=DS.corner!=null?DS.corner:16; if (zot(shadowColor)) shadowColor=DS.shadowColor!=null?DS.shadowColor:"rgba(0,0,0,.3)"; @@ -25688,7 +26239,8 @@ frame.loadAssets({assets:"greeting.mp3", progress:progressBar}); // the bar will show a percentage of asset bytes loaded frame.on("complete", ()=>{ // the bar will be removed when loading is complete - frame.asset("greeting.mp3").play(); + // must have interacted previously to play sound... + new Aud("greeting.mp3").play(); }); END EXAMPLE @@ -25708,7 +26260,7 @@ borderWidth - (default 10 "circle" or 0 "rectangle") the width of the border (or padding - (default 2 for "circle" or 0 for "rectangle") the space between the bar and the backing label - (null) set to a String or a ZIM Label to specifify label properties color - (default foregroundColor) the color of the label if there is one -labelPosition - ("bottom" if label specified) also set to "top" to move label above progress bar +labelPosition - ("bottom" if label specified) also set to TOP to move label above progress bar percentage - (default false) set to true to show percentage after label (set label to "" for only percentage) corner - (default 15 for "rectangle" barType) set to 0 for square corners, etc. can also be an array of [topLeft, topRight, bottomRight, bottomLeft] @@ -25779,8 +26331,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.group = group; var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit); - if (zot(foregroundColor)) foregroundColor=DS.foregroundColor!=null?DS.foregroundColor:"#acd241"; - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"#444"; + if (zot(foregroundColor)) foregroundColor=DS.foregroundColor!=null?DS.foregroundColor:zim.green; + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.charcoal; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:backgroundColor; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (zot(labelPosition)) labelPosition=DS.labelPosition!=null?DS.labelPosition:"bottom"; @@ -26055,7 +26607,7 @@ width - (default 100) width of indicator height - (default 50) height of indicator num - (default 6) the number of lights foregroundColor - (default "orange") color of the light(s) turned on -backgroundColor - (default "grey") color of the light(s) turned off +backgroundColor - (default grey) color of the light(s) turned off borderColor - (default -1 for no border) border color of lights and backdrop (if backdrop) borderWidth - (default 1 if stroke is set) the size of the stroke in pixels backdropColor - (default -1 for no backdrop) backdrop rectangle around lights @@ -26125,8 +26677,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(height)) height = DS.height!=null?DS.height:50; if (zot(num)) num = DS.num!=null?DS.num:6; if (zot(indicatorType)) indicatorType = DS.indicatorType!=null?DS.indicatorType:"dot"; - if (zot(foregroundColor)) foregroundColor = DS.foregroundColor!=null?DS.foregroundColor:indicatorType=="star"?zim.yellow:indicatorType=="heart"?zim.red:"#f58e25"; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#666"; + if (zot(foregroundColor)) foregroundColor = DS.foregroundColor!=null?DS.foregroundColor:indicatorType=="star"?zim.yellow:indicatorType=="heart"?zim.red:zim.orange; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.granite; if (backgroundColor < 0) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(0,0,0,.01)"; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:null; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; @@ -26291,7 +26843,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-60 /*-- -zim.TextInput = function(width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxSize, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, multiline, wrap, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, number, inputType, style, group, inherit) +zim.TextInput = function(width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingH, paddingV, shiftH, shiftV, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, readOnly, inputType, uppercase, style, group, inherit) TextInput zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container @@ -26303,7 +26855,6 @@ as opposed to the ZIM TextArea() which is an HTML tag overlay. Thanks Cajoek for coding the text for the class. WARNING: currently a single line is available (so height is not at this point useful) -The plan is to support multiline input in future versions of ZIM. NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) @@ -26323,7 +26874,7 @@ Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) width |ZIM VEE| - (default 300) - the width of the backgroundColor of the field - set to -1 for expanding width This will limit the length of the text added to the field In the future, scrolling text may be provided -height |ZIM VEE| - (default size plus paddingVertical) - the height of the backgroundColor for the label +height |ZIM VEE| - (default size plus paddingV) - the height of the backgroundColor for the label Currently, the text is always one line. In the future, multi-line functionality may be provided Until then, use a ZIM TextArea for multiline. @@ -26350,15 +26901,13 @@ align - ((default LEFT) text registration point alignment the maxWidth that is added can be overwritten corner - (default 0) the round of corner of the background if there is one can also be an array of [topLeft, topRight, bottomRight, bottomLeft] -padding - (default 5 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical) +padding - (default 5 if backgroundColor set) places the border this amount from text (see paddingH and paddingV) padding parameters are ignored if there is no backgroundColor set -paddingHorizontal - (default padding) places border out at top bottom -paddingVertical - (default padding) places border out at left and right -shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally -shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically +paddingH - (default padding) places border out at top bottom +paddingV - (default padding) places border out at left and right +shiftH - (default 0) move the label (CreateJS Text) inside the Label container horizontally +shiftV - (default 0) move the label (CreateJS Text) inside the Label container vertically rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons) -multiline - [not supported] (default false) set to true for multiline text - CURRENTLY not supported -wrap - [not supported] (default false) set to true to wrap text at the width - CURRENTLY not supported scrollBarActive - (default false) set to true to show scrollBar scrollBarDrag - (default false) set to true to be able to drag the scrollBar scrollBarColor - (default borderColor) the color of the scrollBar @@ -26366,12 +26915,13 @@ scrollBarAlpha - (default .3) the transparency of the scrollBar scrollBarFade - (default true) fades scrollBar unless being used scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar -number - (default false) - set to true for number - will be depricted and removed next version of ZIM NFT - see inputType +readOnly - (default false) set to true for field to be readOnly - also see readOnly property inputType - (default "text") set to "text", "number", "password", "email" number has 0-9 . + - / * % $ available this will replace the password parameter in upcoming versions of ZIM rtl - (default ZIM DIR) the direction of the text. Also set "rtl" in the HTML tag dir parameter for RTL +uppercase - (default false) set to true to force uppercase letters +placeholderInstant - (default true) set to false to not remove the placeholder as soon as the cursor is in the field style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) inherit - (default null) used internally but can receive an {} of styles directly @@ -26416,7 +26966,10 @@ align - get or set the horizontal alignment of the text values are LEFT and RIGHT and CENTER (experimental) 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 enabled - default is true - set to false to disable +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 ALSO: all properties of ZIM Window() @@ -26440,7 +26993,8 @@ LabelInput() - a static class so use new TextInput.LabelInput() to create. blinkerColor - (default - the text color) the color of the blinker cursor blinkerSpeed - (default .5) the speed of the blinker cursor Some parameters of LabelInput such as rollColor and rollPersist are ignored - but kept in the signature to match Label for ease - an inputType parameter is available just before the style parameter with a value of "text", "number", "email", "password" + an inputType parameter is available before the style parameter with a value of "text", "number", "email", "password" + as well an uppercase parameter is available just before the style parameter OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) @@ -26455,8 +27009,8 @@ See the events for ZIM Window() See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+54.2 -zim.TextInput = function(width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, multiline, wrap, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, number, inputType, rtl, style, group, inherit) { - var sig = "width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, multiline, wrap, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, number, inputType, rtl, style, group, inherit"; +zim.TextInput = function(width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingH, paddingV, shiftH, shiftV, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, readOnly, inputType, rtl, uppercase, placeholderInstant, style, group, inherit) { + var sig = "width, height, placeholder, text, size, font, color, backgroundColor, borderColor, borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingH, paddingV, shiftH, shiftV, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, readOnly, inputType, rtl, uppercase, placeholderInstant, style, group, inherit"; var duo; if (duo = zob(zim.TextInput, arguments, sig, this)) return duo; z_d("54.2"); @@ -26465,11 +27019,11 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba if (zot(size)) size=DS.size!=null?DS.size:36; if (zot(padding) || padding=="ignore") padding = (DS.padding!=null&&padding!="ignore")?DS.padding:5; - if (zot(paddingHorizontal)) paddingHorizontal = DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; - if (zot(paddingVertical)) paddingVertical = DS.paddingVertical!=null?DS.paddingVertical:padding; + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; if (zot(width)) width=DS.width!=null?DS.width:300; - if (zot(height)) height=DS.height!=null?DS.height:size+paddingVertical*2; + if (zot(height)) height=DS.height!=null?DS.height:size+paddingV*2; if (zot(placeholder)) placeholder=DS.placeholder!=null?DS.placeholder:null; if (zot(text)) text=DS.text!=null?DS.text:""; if (zot(font)) font=DS.font!=null?DS.font:"arial"; @@ -26479,6 +27033,7 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba if (zot(borderWidth)) borderWidth=DS.borderWidth!=null?DS.borderWidth:null; var oa = remember(width, height, placeholder, text, color, backgroundColor, borderColor); + this.veeObj = {width:oa[0], height:oa[1], placeholder:oa[2], text:oa[3], color:oa[4], backgroundColor:oa[5], borderColor:oa[6]}; function remember() {return arguments;} width = zim.Pick.choose(width); height = zim.Pick.choose(height); @@ -26496,12 +27051,10 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba if (zot(shadowBlur)) shadowBlur=DS.shadowBlur!=null?DS.shadowBlur:20; if (zot(align)) align=DS.align!=null?DS.align:"left"; if (zot(corner)) corner=DS.corner!=null?DS.corner:0; - if (zot(shiftHorizontal)) shiftHorizontal = DS.shiftHorizontal!=null?DS.shiftHorizontal:0; + if (zot(shiftH)) shiftH = DS.shiftH!=null?DS.shiftH:0; if (zot(password)) password=DS.password!=null?DS.password:false; - if (zot(shiftVertical)) shiftVertical = DS.shiftVertical!=null?DS.shiftVertical:password?size*.25:0; + if (zot(shiftV)) shiftV = DS.shiftV!=null?DS.shiftV:password?size*.25:0; if (zot(maxLength)) maxLength=DS.maxLength!=null?DS.maxLength:align=="center"?Math.floor(width/size)*1.8:null; - if (zot(multiline)) multiline=DS.multiline!=null?DS.multiline:false; - if (zot(wrap)) wrap=DS.wrap!=null?DS.wrap:false; if (zot(scrollBarActive)) scrollBarActive=DS.scrollBarActive!=null?DS.scrollBarActive:false; if (zot(scrollBarDrag)) scrollBarDrag=DS.scrollBarDrag!=null?DS.scrollBarDrag:false; if (zot(scrollBarColor)) scrollBarColor=DS.scrollBarColor!=null?DS.scrollBarColor:borderColor; @@ -26509,17 +27062,31 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba if (zot(scrollBarFade)) scrollBarFade=DS.scrollBarFade!=null?DS.scrollBarFade:true; if (zot(scrollBarH)) scrollBarH = DS.scrollBarH!=null?DS.scrollBarH:true; if (zot(scrollBarV)) scrollBarV = DS.scrollBarV!=null?DS.scrollBarV:true; - if (number && zot(inputType)) inputType = "number"; // remove this next ZIM NFT version + if (zot(readOnly)) readOnly = DS.readOnly!=null?DS.readOnly:false; if (zot(inputType)) inputType = DS.inputType!=null?DS.inputType:"text"; - if (inputType===true) inputType="number"; // backwards compatible - remove in next ZIM NFT version if (scrollBarDrag) scrollBarFade = DS.scrollBarFade!=null?DS.scrollBarFade:false; if (zot(rtl)) rtl = DS.rtl!=null?DS.rtl:(WW.DIR=="rtl"||zim.DIR=="rtl")?"rtl":null; + if (zot(uppercase)) uppercase = DS.uppercase!=null?DS.uppercase:null; + if (uppercase) { + if (text) text = text.toUpperCase(); + if (placeholder) placeholder = placeholder.toUpperCase(); + } + if (zot(placeholderInstant)) placeholderInstant=DS.placeholderInstant!=null?DS.placeholderInstant:true; + + // handle DIR effect + if ((WW.DIR && WW.DIR=="rtl") || (!WW.DIR && zim.DIR=="rtl")) { + if (align=="start") align="right"; + else if (align=="end") align="left"; + } else { + if (align=="start") align="left"; + else if (align=="end") align="right"; + } - this.zimWindow_constructor(width, height, null, backgroundColor, borderColor, borderWidth, padding, corner, false, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, false, null, false, true, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, true, null, null, null, null, null, false, null, null, null, null, null, null, null, null, null, null, null, null, style, group, zim.copy(DS)); + this.zimWindow_constructor(width, height, null, backgroundColor, borderColor, borderWidth, padding, corner, false, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, false, null, false, true, shadowColor, shadowBlur, paddingH, paddingV, true, null, null, null, null, null, false, null, null, null, null, null, null, null, null, null, null, null, null, style, group, zim.copy(DS)); this.type = "TextInput"; var that = this; - this.placeholderLabel = new zim.Label({text:placeholder||"", size:size, color:color, font:font, shiftHorizontal:shiftHorizontal, shiftVertical:shiftVertical, valign:"top"}).alp(.5); + this.placeholderLabel = new zim.Label({text:placeholder||"", size:size, color:color, font:font, shiftH:shiftH, shiftV:shiftV, valign:"top"}).alp(.5); if (text=="") this.add(this.placeholderLabel); // the Window usually masks but masks to the edge and not to inside the padding @@ -26527,7 +27094,7 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba var mask = new zim.Rectangle({width:width-padding*2, height:height-padding*2, color:zim.clear, style:false}).center(this); this.cursor = "text"; - var label = this.label = new zim.TextInput.LabelInput(text, size, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, font, color, null, null, null, align, "top", null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, shiftHorizontal, shiftVertical, null, null, null, null, inputType, rtl, style, group, inherit); + var label = this.label = new zim.TextInput.LabelInput(text, size, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, font, color, null, null, null, align, "top", null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, shiftH, shiftV, null, null, null, null, inputType, rtl, uppercase, placeholderInstant, style, group, inherit); this.add(label); // this is a Window - which has an add() method for adding content label.setMask(mask); this.htmlTag = this.label.hiddenInput @@ -26535,8 +27102,8 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba this.blinker = this.label.blinker if (align=="right") { - label.x = width-paddingHorizontal; - this.placeholderLabel.x = width-this.placeholderLabel.width-paddingHorizontal; + label.x = width-paddingH; + this.placeholderLabel.x = width-this.placeholderLabel.width-paddingH; } else if (align=="center") { label.x = width/2; this.placeholderLabel.x = (width-this.placeholderLabel.width)/2; @@ -26596,19 +27163,29 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba }); }); this.label.on("focus", function () { + if (placeholderInstant && that.placeholderLabel.parent) { + that.placeholderLabel.removeFrom(); + if (that.stage) that.stage.update(); + } that.dispatchEvent("focus"); }); this.label.on("blur", function () { + if (placeholderInstant && label.text == "" && !that.placeholderLabel.parent) { + that.add(that.placeholderLabel); + if (that.stage) that.stage.update(); + } that.dispatchEvent("blur"); }); this.label.on("input", function () { - if (label.text != "" && that.placeholderLabel.parent) { - that.placeholderLabel.removeFrom(); - if (that.stage) that.stage.update(); - } - if (label.text == "" && !that.placeholderLabel.parent) { - that.add(that.placeholderLabel); - if (that.stage) that.stage.update(); + if (!placeholderInstant) { + if (label.text != "" && that.placeholderLabel.parent) { + that.placeholderLabel.removeFrom(); + if (that.stage) that.stage.update(); + } + if (label.text == "" && !that.placeholderLabel.parent) { + that.add(that.placeholderLabel); + if (that.stage) that.stage.update(); + } } // if (align=="center" && label.width < width) { // label.x = (width-label.width)/2; @@ -26621,7 +27198,7 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba this.label.on("blinker", function () { // A simple system where the cursor is kept within the box var x = label.x + label.blinker.x; - var newX = zim.constrain(x, paddingHorizontal, width-paddingHorizontal-label.blinker.width); + var newX = zim.constrain(x, paddingH, width-paddingH-label.blinker.width); if (x != newX) label.x -= x-newX; // ************* @@ -26640,6 +27217,17 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba } }); + Object.defineProperty(that, 'readOnly', { + get: function() { + return readOnly; + }, + set: function(value) { + readOnly = value; + that.htmlTag.setAttribute("readonly", readOnly); + } + }); + if (readOnly) that.readOnly = true; + Object.defineProperty(that, 'focus', { get: function() { return label.focus; @@ -26707,14 +27295,14 @@ zim.TextInput = function(width, height, placeholder, text, size, font, color, ba zim.styleTransforms(this, DS); this.clone = function(exact) { - return that.cloneProps(exact||!zim.isPick(oa[0])?width:oa[0], exact||!zim.isPick(oa[1])?height:oa[1], exact||!zim.isPick(oa[2])?placeholder:oa[2], exact||!zim.isPick(oa[3])?text:oa[3], size, font, exact||!zim.isPick(oa[4])?color:oa[4], exact||!zim.isPick(oa[5])?backgroundColor:oa[5], exact||!zim.isPick(oa[6])?borderColor:oa[6], borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, multiline, wrap, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, inputType, style, this.group, inherit); + return that.cloneProps(exact||!zim.isPick(oa[0])?width:oa[0], exact||!zim.isPick(oa[1])?height:oa[1], exact||!zim.isPick(oa[2])?placeholder:oa[2], exact||!zim.isPick(oa[3])?text:oa[3], size, font, exact||!zim.isPick(oa[4])?color:oa[4], exact||!zim.isPick(oa[5])?backgroundColor:oa[5], exact||!zim.isPick(oa[6])?borderColor:oa[6], borderWidth, maxLength, password, selectionColor, selectionAlpha, cursorColor, cursorSpeed, shadowColor, shadowBlur, align, corner, padding, paddingH, paddingV, shiftH, shiftV, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, readOnly, inputType, uppercase, style, this.group, inherit); }; }; zim.extend(zim.TextInput, zim.Window, "clone", "zimWindow", false); // by Cajoek, 2021 - with thanks! -zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionColor, selectionAlpha, blinkerColor, blinkerSpeed, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, splitWords, inputType, rtl, style, group, inherit) { - this.zimLabel_constructor(text, size, font, color, null, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, null, labelWidth, labelHeight, null, splitWords, style, group, inherit); +zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionColor, selectionAlpha, blinkerColor, blinkerSpeed, font, color, rollColor, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, rollPersist, labelWidth, labelHeight, splitWords, inputType, rtl, uppercase, placeholderInstant, style, group, inherit) { + this.zimLabel_constructor(text, size, font, color, null, shadowColor, shadowBlur, align, valign, bold, italic, variant, lineWidth, lineHeight, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingH, paddingV, shiftH, shiftV, null, labelWidth, labelHeight, null, splitWords, style, group, inherit); this.type = "LabelInput"; if (zot(color)) color = zim.dark; @@ -26760,6 +27348,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo this.onFocus = function() { if (this.stage) frame = this.stage.frame; + zog(frame.zil) if (frame.zil) WW.removeEventListener("keydown", frame.zil[0]); this.blinker.alp(1.0).replayTween(); this.selection.alp(0.2); @@ -26776,6 +27365,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo this.dispatchEvent("blur"); } this.onInput = function() { + if (uppercase) this.hiddenInput.value = this.hiddenInput.value.toUpperCase(); var newText = this.hiddenInput.value; if (inputType=="number") { newText = newText.replace(/[^(0-9).\-+*/%$]*/g,""); @@ -26793,8 +27383,8 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo } } var that = this; - this.onKeydown = function() { - this.blinker.replayTween(); + this.onKeydown = function(e) { + this.blinker.replayTween(); setTimeout(function() { that.positionBlinkerAndSelection.call(that); that.dispatchEvent("keydown"); @@ -26847,8 +27437,8 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo // ZIM NFT 01 Patch any le or rtl var le = this.text.length; if (this.focus) { - var paddingHorizontal = this.backing || this.background ? this.paddingHorizontal : 0; - var paddingVertical = this.backing || this.background ? this.paddingVertical : 0; + var paddingH = this.backing || this.background ? this.paddingH : 0; + var paddingV = this.backing || this.background ? this.paddingV : 0; if (this.hiddenInput.selectionStart !== this.hiddenInput.selectionEnd) { var startX, endX; @@ -26856,12 +27446,12 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo startX = this.textWidthArray[le-this.hiddenInput.selectionStart] endX = this.textWidthArray[le-this.hiddenInput.selectionEnd] this.selection.widthOnly = endX - startX; - this.selection.pos(endX + paddingHorizontal - 1 + shiftHorizontal, paddingVertical + shiftVertical); + this.selection.pos(endX + paddingH - 1 + shiftH, paddingV + shiftV); } else { startX = this.textWidthArray[this.hiddenInput.selectionStart] endX = this.textWidthArray[this.hiddenInput.selectionEnd] this.selection.widthOnly = endX - startX; - this.selection.pos(startX + paddingHorizontal - 1 + shiftHorizontal, paddingVertical + shiftVertical); + this.selection.pos(startX + paddingH - 1 + shiftH, paddingV + shiftV); } this.selection.heightOnly = this.textHeight; this.selection.alp(this.selectionAlpha); @@ -26872,7 +27462,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo var xIdx = this.hiddenInput.selectionDirection === "backward" ? this.hiddenInput.selectionStart : this.hiddenInput.selectionEnd; if (!xIdx) xIdx = 0; // ZIM NFT 00 Patch if (rtl) xIdx = le-xIdx; - this.blinker.pos(this.textWidthArray[xIdx] + paddingHorizontal - 1 + ((align=="right" && this.text == "")?this.width:(align=="center" && this.text == "")?this.width/2:0) + shiftHorizontal, paddingVertical+shiftVertical); + this.blinker.pos(this.textWidthArray[xIdx] + paddingH - 1 + ((align=="right" && this.text == "")?this.width:(align=="center" && this.text == "")?this.width/2:0) + shiftH, paddingV+shiftV); this.dispatchEvent("blinker"); } if (this.stage) this.stage.update(); @@ -26918,6 +27508,7 @@ zim.TextInput.LabelInput = function(text, size, maxLength, password, selectionCo this.textHeight = dummyLabel.getMeasuredLineHeight(); } this.setText = function(text) { + if (uppercase) text = text.toUpperCase(); this.hiddenInput.value = text; this.onInput(); } @@ -26969,7 +27560,7 @@ zim.extend(zim.TextInput.LabelInput, zim.Label, null, "zimLabel", false); /*-- -zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit) +zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit) List zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container @@ -27004,10 +27595,10 @@ These adjust depending on vertical or horizontal settings The spacing is the distance between items (default 2) The padding is the distance around the items but not between (default spacing) So changing the spacing can seem to change the padding - but that can be overridden -There is also paddingVertical and paddingHorizontal that can be adjusted (default padding) +There is also paddingV and paddingH that can be adjusted (default padding) Indent only works with custom items in the list in left, right alignment or top, bottom valignment This moves the items away from their alignment -There is also label indenting for items with labels - and labelIndentVertical and labelIndentHorizontal +There is also label indenting for items with labels - and labelIndentV and labelIndentH NOTE: List can have a ZIM Organizer added with the organizer parameter The organizer lets the user add, remove and move items up, down, to the top or the bottom @@ -27019,6 +27610,9 @@ then set the enable property to true on the animate call function. See update() NOTE: to add ZIM Swipe() to objects in List set the overrideNoSwipe parameter of Swipe to true +NOTE: if animating the List off screen then either turn optimize:false +or use list.update() in the "animation" event with the animate({events:true}) + NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE @@ -27073,27 +27667,27 @@ viewNum - (default 5) how many items to show in the width and height provided 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 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 - set to START to align "left" for ZIM DIR constant is "ltr" or "right" when DIR="rtl" - END is the opposite -valign - (default "center") vertical align -labelAlign - (default "center") horizontal align of the label only -labelValign - (default "center") vertical align of the label only +align - (default CENTER) horizontal align + set to START to align LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite +valign - (default CENTER) vertical align +labelAlign - (default CENTER) horizontal align of the label only +labelValign - (default CENTER) vertical align of the label only labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in list -labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set -labelIndentVertical - (default indent) vertical indent of label when align or valign is set +labelIndentH - (default indent) horizontal indent of label when align or valign is set +labelIndentV - (default indent) vertical indent of label when align or valign is set indent - (default 10) indent of items when align or valign is set and there are custom objects in list spacing - (default 2) is the pixels between tab buttons -backgroundColor - (default "#777") the background color of the list elements (unless custom object) -rollBackgroundColor - (default "#555") the background color of the list element as rolled over -selectedBackgroundColor - (default "#444") the background color of the list element when selected -backdropColor - (default "#333") the background color of the list window (any CSS color) -color - (default "white") the text color of a deselected list element when not rolled over +backgroundColor - (default tin) the background color of the list elements (unless custom object) +rollBackgroundColor - (default grey) the background color of the list element as rolled over +selectedBackgroundColor - (default charcoal) the background color of the list element when selected +backdropColor - (default dark) the background color of the list window (any CSS color) +color - (default white) the text color of a deselected list element when not rolled over rollColor - (default color) the rollover color selectedColor - (default color) the text color of the selected list element selectedRollColor - (default color) the text color of the rolled over selected list element -borderColor - (default #999) border color +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 paddingHorizontal and paddingVertical) +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 @@ -27113,21 +27707,21 @@ slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal" vertical snaps when dragging up and down but not if dragging horizontal shadowColor - (default rgba(0,0,0,.3)) the color of the shadow shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow -paddingHorizontal - (default padding) places content in from left and right -paddingVertical - (default padding) places content in from top and bottom +paddingH - (default padding) places content in from left and right +paddingV - (default padding) places content in from top and bottom scrollWheel - (default true) scroll vertically with scrollWheel damp - (default null) set to .1 for instance to damp the scrolling titleBar - (default null - no titleBar) a String or ZIM Label title for the list that will be presented on a titleBar across the top -titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested +titleBarColor - (default black) the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag list boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle() onTop - (default true) set to false to not bring list to top of container when dragging close - (default false) - a close X for the top right corner that closes the list when pressed -closeColor - (default #555) - the color of the close X if close is requested +closeColor - (default grey) - the color of the close X if close is requested collapse - (default false) - set to true to add a collapse button to the titleBar that reduces the list so only the bar shows and adds a button to expand -collapseColor - (default #555) - the color of the collapse icon +collapseColor - (default grey) - the color of the collapse icon collapsed - (default false) set to true to start the list collapsed excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the custom buttons organizer - (default null) the ZIM Organizer for the list @@ -27207,7 +27801,7 @@ List.colorPicker(label, color, picker, call, obj, property, paddingLeft, padding This static method is used internally by the checkBox parameter of List It can be used to create a checkBox list element - but also see List.checkBox() above which is a little different and matches the format of the other List Items -List.checkItem(text, width, paddingHorizontal, paddingVertical, color, rollColor, backgroundColor, rollBackgroundColor, selectedColor, selectedRollColor, selectedBackgroundColor, selectedRollBackgroundColor) +List.checkItem(text, width, paddingH, paddingV, color, rollColor, backgroundColor, rollBackgroundColor, selectedColor, selectedRollColor, selectedBackgroundColor, selectedRollBackgroundColor) A static method (use it like List.checkItem("hello", 30, 300, 10, 10, white, etc.)) To add a checkItem to a plain list use: new List({list:["goodbye", List.checkItem("hello", 30, 300, 10, 10, white), "what?"]}) @@ -27280,8 +27874,8 @@ ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+60.5 - zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit) { - var sig = "width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit"; + zim.List = function(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit) { + var sig = "width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, group, inherit"; var duo; if (duo = zob(zim.List, arguments, sig, this)) return duo; z_d("60.5"); @@ -27306,27 +27900,29 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(indent)) indent=DS.indent!=null?DS.indent:(checkBox?0:10); if (zot(labelIndent)) labelIndent=DS.labelIndent!=null?DS.labelIndent:indent; - if (zot(labelIndentHorizontal)) labelIndentHorizontal=DS.labelIndentHorizontal!=null?DS.labelIndentHorizontal:labelIndent; - if (zot(labelIndentVertical)) labelIndentVertical=DS.labelIndentVertical!=null?DS.labelIndentVertical:labelIndent; + if (zot(labelIndentH)) labelIndentH=DS.labelIndentH!=null?DS.labelIndentH:labelIndent; + if (zot(labelIndentV)) labelIndentV=DS.labelIndentV!=null?DS.labelIndentV:labelIndent; if (zot(spacing)) spacing=DS.spacing!=null?DS.spacing:2; - if (zot(backdropColor)) backdropColor = DS.backdropColor!=null?DS.backdropColor:"#333"; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#777"; - if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#555"; - if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:"#444"; - if (zot(selectedRollBackgroundColor)) selectedRollBackgroundColor = DS.selectedRollBackgroundColor!=null?DS.selectedRollBackgroundColor:"#555"; - if (zot(color)) color = DS.color!=null?DS.color:"white"; + if (zot(backdropColor)) backdropColor = DS.backdropColor!=null?DS.backdropColor:zim.dark; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.tin; + if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.grey; + if (zot(downBackgroundColor)) downBackgroundColor = DS.downBackgroundColor!=null?DS.downBackgroundColor:rollBackgroundColor; + 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(rollColor)) rollColor = DS.rollColor!=null?DS.rollColor:color; + if (zot(downColor)) downColor = DS.downColor!=null?DS.downColor:rollColor; if (zot(selectedColor)) selectedColor = DS.selectedColor!=null?DS.selectedColor:color; if (zot(selectedRollColor)) selectedRollColor = DS.selectedRollColor!=null?DS.selectedRollColor:rollColor; if (zot(backdropColor)) backdropColor = DS.backdropColor!=null?DS.backdropColor:backdropColor; var originalBorderColor = borderColor; var originalBorderWidth = borderWidth; - if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:"#999"; + if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:zim.silver; if (zot(borderWidth)) borderWidth=DS.borderWidth!=null?DS.borderWidth:1; // 0 - // if (vertical && zot(padding) && zot(paddingVertical)) paddingVertical = spacing; - // if (!vertical && zot(padding) && zot(paddingHorizontal)) paddingHorizontal = spacing; + // if (vertical && zot(padding) && zot(paddingV)) paddingV = spacing; + // if (!vertical && zot(padding) && zot(paddingH)) paddingH = spacing; if (zot(padding)) padding=DS.padding!=null?DS.padding:spacing; if (zot(corner)) corner=DS.corner!=null?DS.corner:0; if (zot(swipe)) swipe=DS.swipe!=null?DS.swipe:true; // true / auto, vertical, horizontal, false / none @@ -27344,8 +27940,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(slideSnap)) slideSnap=DS.slideSnap!=null?DS.slideSnap:vertical?"vertical":"horizontal"; // true / auto, vertical, horizontal, false / none if (zot(shadowColor)) shadowColor=DS.shadowColor!=null?DS.shadowColor:"rgba(0,0,0,.3)"; if (zot(shadowBlur)) shadowBlur=DS.shadowBlur!=null?DS.shadowBlur:20; - if (zot(paddingVertical)) paddingVertical=DS.paddingVertical!=null?DS.paddingVertical:padding; - if (zot(paddingHorizontal)) paddingHorizontal=DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; + if (zot(paddingV)) paddingV=DS.paddingV!=null?DS.paddingV:padding; + if (zot(paddingH)) paddingH=DS.paddingH!=null?DS.paddingH:padding; if (zot(scrollWheel)) scrollWheel = DS.scrollWheel!=null?DS.scrollWheel:true; if (zot(titleBar)) titleBar = DS.titleBar!=null?DS.titleBar:null; if (zot(titleBarColor)) titleBarColor = DS.titleBarColor!=null?DS.titleBarColor:null; @@ -27457,7 +28053,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo organizer.setButtons(); titleBarHeight += organizer.height; } - this.zimWindow_constructor(width, height, null, backdropColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, true, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, false, null, false, collapse, collapseColor, collapsed, optimize, style, group, zim.copy(DS)); + this.zimWindow_constructor(width, height, null, backdropColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, true, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, cancelCurrentDrag, false, null, false, collapse, collapseColor, collapsed, optimize, style, group, zim.copy(DS)); this.type = "List"; if (!zot(titleBar)) { @@ -27472,12 +28068,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (customWidth && noScale) { - that.itemWidth = vertical?(width-paddingHorizontal*2-(scrollBarActive?(scrollBarOverlay?0:6):0)):customWidth/list.length; - that.itemHeight = vertical?customHeight/list.length:(height-paddingVertical*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); - // that.itemHeight = vertical?(height-paddingVertical*2)/viewNum:(height-paddingVertical*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); + that.itemWidth = vertical?(width-paddingH*2-(scrollBarActive?(scrollBarOverlay?0:6):0)):customWidth/list.length; + that.itemHeight = vertical?customHeight/list.length:(height-paddingV*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); + // that.itemHeight = vertical?(height-paddingV*2)/viewNum:(height-paddingV*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); } else { - that.itemWidth = vertical?(width-paddingHorizontal*2-(scrollBarActive?(scrollBarOverlay?0:6):0)):(width-paddingHorizontal*2)/viewNum; - that.itemHeight = vertical?(height-paddingVertical*2)/viewNum:(height-paddingVertical*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); + that.itemWidth = vertical?(width-paddingH*2-(scrollBarActive?(scrollBarOverlay?0:6):0)):(width-paddingH*2)/viewNum; + that.itemHeight = vertical?(height-paddingV*2)/viewNum:(height-paddingV*2-(scrollBarActive?(scrollBarOverlay?0:6):0)); } var tabs; var inheritedStyles = zim.copy(DS); @@ -27492,10 +28088,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo vertical:vertical, backgroundColor:backgroundColor, rollBackgroundColor:rollBackgroundColor, + downBackgroundColor:downBackgroundColor, selectedBackgroundColor:selectedBackgroundColor, selectedRollBackgroundColor:selectedRollBackgroundColor, color:color, rollColor:rollColor, + downColor:downColor, selectedColor:selectedColor, selectedRollColor:selectedRollColor, backdropColor:backdropColor, @@ -27506,8 +28104,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo labelAlign:labelAlign, labelValign:labelValign, labelIndent:labelIndent, - labelIndentHorizontal:labelIndentHorizontal, - labelIndentVertical:labelIndentVertical, + labelIndentH:labelIndentH, + labelIndentV:labelIndentV, indent:indent, useTap:true, excludeCustomTap:excludeCustomTap, @@ -27518,11 +28116,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo inherit:inheritedStyles }) // .mov(vertical?0:(spacing+2),vertical?(spacing+2):0); - .mov(vertical?0:paddingHorizontal,vertical?paddingVertical:0); + .mov(vertical?0:paddingH,vertical?paddingV:0); // var b = tabs.getBounds(); // tabs.setBounds(0,0,vertical?b.width:(b.width+spacing*2+4),vertical?(b.height+spacing*2+4):b.height); that.add(tabs); - // tabs.loc(paddingHorizontal, paddingVertical) + // tabs.loc(paddingH, paddingV) zim.loop(tabs.labels, function (label) { if (label) label.backgroundColor = zim.clear; }) @@ -27948,13 +28546,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var newY = -(that.itemHeight+spacing)*index + height/2 - that.itemHeight/2; if ((that.itemHeight+spacing)*that.length < height) newY = 0; if (newY > 0) newY = 0; - if ((that.itemHeight+spacing)*that.length > height && newY < -that.tabs.height+height-paddingVertical*2) newY = -that.tabs.height+height-paddingVertical*2; + if ((that.itemHeight+spacing)*that.length > height && newY < -that.tabs.height+height-paddingV*2) newY = -that.tabs.height+height-paddingV*2; return newY; } else { var newX = -(that.itemWidth+spacing)*index + width/2 - that.itemWidth/2; if ((that.itemWidth+spacing)*that.length < width) newX = 0; if (newX > 0) newX = 0; - if ((that.itemWidth+spacing)*that.length > width && newX < -that.tabs.width+width-paddingHorizontal*2) newX = -that.tabs.width+width-paddingHorizontal*2; + if ((that.itemWidth+spacing)*that.length > width && newX < -that.tabs.width+width-paddingH*2) newX = -that.tabs.width+width-paddingH*2; return newX; } } @@ -28132,7 +28730,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { - return that.cloneProps(new zim.List(width, originalHeight, zim.copy(that.originalList, true), viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, originalBorderColor, originalBorderWidth, padding, zim.copy(corner), swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, this.group, inherit)); + return that.cloneProps(new zim.List(width, originalHeight, zim.copy(that.originalList, true), viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, spacing, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, downColor, selectedColor, selectedRollColor, originalBorderColor, originalBorderWidth, padding, zim.copy(corner), swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, scrollBarOverlay, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingH, paddingV, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, onTop, close, closeColor, collapse, collapseColor, collapsed, excludeCustomTap, organizer, checkBox, pulldown, clone, cancelCurrentDrag, selectedIndex, noScale, pulldownToggle, optimize, keyEnabled, style, this.group, inherit)); }; this.dispose = function(a,b,disposing) { if (!disposing) { @@ -28253,8 +28851,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return c; }; - zim.List.checkItem = function(label, size, width, align, paddingHorizontal, paddingVertical, spacing, color, rollColor, selectedColor, selectedRollColor, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, group, inherit) { - var sig = "label, size, width, align, paddingHorizontal, paddingVertical, spacing, color, rollColor, selectedColor, selectedRollColor, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, group, inherit"; + zim.List.checkItem = function(label, size, width, align, paddingH, paddingV, spacing, color, rollColor, selectedColor, selectedRollColor, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, group, inherit) { + var sig = "label, size, width, align, paddingH, paddingV, spacing, color, rollColor, selectedColor, selectedRollColor, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, group, inherit"; var duo; if (duo = zob(zim.List.checkItem, arguments, sig)) return duo; var DS1 = zim.getStyle("CheckBox", group, inherit); @@ -28262,16 +28860,16 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var DS = zim.getStyle("List", group, inherit); if (zot(width)) width = 300; - if (zot(paddingHorizontal)) paddingHorizontal = 10; - if (zot(paddingVertical)) paddingVertical = 10; + if (zot(paddingH)) paddingH = 10; + if (zot(paddingV)) paddingV = 10; 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:"#777"; - if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#555"; - if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:"#444"; - if (zot(selectedRollBackgroundColor)) selectedRollBackgroundColor = DS.selectedRollBackgroundColor!=null?DS.selectedRollBackgroundColor:"#555"; - if (zot(color)) color = DS.color!=null?DS.color:"white"; + 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(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; @@ -28279,9 +28877,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var c = new zim.Container(); c.type = "CheckItem"; c.checkBox = new zim.CheckBox({size:size, label:label, color:color, tap:true}), - c.backing = new zim.Rectangle(width-spacing*2, c.checkBox.height+paddingVertical*2, backgroundColor).addTo(c); + 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(paddingHorizontal,null,align=="right"); + if (align != "center" && align != "middle") c.checkBox.pos(paddingH,null,align=="right"); c.backing.tap(function () { c.checkBox.toggle(); c.zimOut(); // could do over() but like out() @@ -28337,7 +28935,7 @@ list - (default 1-10) pass in an array of strings or numbers to display one at a for instance a set of words ["hello", "goodbye", "wow", "omg!"] would need a stepperType of "list" to be set width - (default 100) is the width of the text box (you can scale the whole stepper if needed) -backgroundColor - (default "white") for the arrows and the text box +backgroundColor - (default white) for the arrows and the text box borderColor - (default null) stroke color for the box borderWidth - (default 1 if borderColor) stroke thickness for the box label - (default null) which can be used to define custom text properties @@ -28438,18 +29036,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit); if (zot(list)) list = DS.list!=null?DS.list:[]; if (zot(width)) width=DS.width!=null?DS.width:200; - if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:"white"; + if (zot(backgroundColor)) backgroundColor=DS.backgroundColor!=null?DS.backgroundColor:zim.white; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:null; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; - if (zot(color)) color = DS.color!=null?DS.color:"#555"; + if (zot(color)) color = DS.color!=null?DS.color:zim.grey; if (zot(label)) label = DS.label!=null?DS.label:""; if (typeof label === "string" || typeof label === "number") label = new zim.Label({ text:label, size:DS.size!=null?DS.size*2:64, color:color, align:DS.align!=null?DS.align:"center", valign:DS.valign!=null?DS.valign:"center", backing:"ignore", shadowColor:"ignore", shadowBlur:"ignore", padding:"ignore", backgroundColor:"ignore", group:this.group - }); + }).loc(0,0); if (zot(vertical)) vertical=DS.vertical!=null?DS.vertical:false; if (zot(arrows)) arrows=DS.arrows!=null?DS.arrows:true; if (zot(corner)) corner=DS.corner!=null?DS.corner:16; @@ -29066,13 +29664,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function greyPrev() { if (!arrows) return; prev.alpha = .8; - arrowPrev.color = "#aaa"; + arrowPrev.color = zim.fog; prev.cursor = "default"; } function greyNext() { if (!arrows) return; next.alpha = .8; - arrowNext.color = "#aaa"; + arrowNext.color = zim.fog; next.cursor = "default"; } @@ -29254,7 +29852,7 @@ button - (default small button with no label) - a zim Button or string as follow "grip" - adds three grip lines to button barLength - (default 300) the length of the bar (the slider slides along its length) barWidth - (default 3) the width of the bar (how fat the bar is) -barColor - (default "#666") the color of the bar (any CSS color) +barColor - (default granite) the color of the bar (any CSS color) vertical - (default false) set to true to make slider vertical 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 @@ -29319,6 +29917,8 @@ enabled - default is true - set to false to disable 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 +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -29354,9 +29954,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(sound)) sound = DS.sound!=null?DS.sound:false; if (zot(step)) step = DS.step!=null?DS.step:0; if (zot(button)) button = DS.button!=null?DS.button:sound?"aztec":null; + if (button && button.type=="Button") button = button.clone(); if (zot(barLength)) barLength = DS.barLength!=null?DS.barLength:300; if (zot(barWidth)) barWidth = DS.barWidth!=null?DS.barWidth:3; - if (zot(barColor)) barColor = DS.barColor!=null?DS.barColor:sound?zim.lighter:"#666"; + if (zot(barColor)) barColor = DS.barColor!=null?DS.barColor:sound?zim.lighter:zim.granite; if (zot(vertical)) vertical = DS.vertical!=null?DS.vertical:sound?true:false; if (zot(useTicks)) useTicks = DS.useTicks!=null?DS.useTicks:sound?true:false; if (zot(tickStep)) tickStep = DS.tickStep!=null?DS.tickStep:step?step:useTicks||sound?(max-min)/40:0; @@ -29387,6 +29988,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // PICK var oa = remember(min,max,step,currentValue); + this.veeObj = {min:oa[0], max:oa[1], step:oa[2], currentValue:oa[3]}; function remember() {return arguments;} // for cloning PICK min = zim.Pick.choose(min); max = zim.Pick.choose(max); @@ -29465,13 +30067,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.buttonType = button; } - var bColor = DS.borderColor!=null?DS.borderColor:special?special.borderColor:borderCheck?"#666":null; + var bColor = DS.borderColor!=null?DS.borderColor:special?special.borderColor:borderCheck?zim.granite:null; + zog(DS.backgroundColor) button = new zim.Button({ width:DS.width!=null?DS.width:special?special.width:w, height:DS.height!=null?DS.height:special?special.height:h, label:"", - backgroundColor: DS.backgroundColor!=null?DS.backgroundColor:"#fff", - rollBackgroundColor: DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#ddd", + backgroundColor: DS.backgroundColor!=null?DS.backgroundColor:zim.white, + rollBackgroundColor: DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zot(DS.backgroundColor)||DS.backgroundColor==zim.white?zim.moon:DS.backgroundColor.lighten(.2), borderColor: bColor, rollBorderColor: DS.rollBorderColor!=null?DS.rollBorderColor:bColor, borderWidth: DS.borderWidth!=null?DS.borderWidth:special?special.borderWidth:borderCheck?1:null, @@ -29878,7 +30481,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-62 /*-- -zim.Selector = function(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit); +zim.Selector = function(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingH, paddingV, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit); Selector zim class - extends a zim.Container which extends a createjs.Container @@ -29917,13 +30520,13 @@ tile - (default four red circles) the ZIM Tile to which to apply the selector the elements should have their registration centered see Tile for how to tile a series of different objects, etc. this will work as a horizontal or vertical bar or a grid selector -borderColor - (default "white") the border color of the selector +borderColor - (default white) the border color of the selector borderWidth - (default 2) the border width of the selector backgroundColor - (default "rgba(0,0,0,.1)") the background color of the selector corner - (default 10) the corner radius of the selector dashed - (default false) the dashed border setting of the selector -paddingHorizontal - (default half tile spacingH) the space from the selected item -paddingVertical - (default half tile spacingV) the background color of the selector +paddingH - (default half tile spacingH) the space from the selected item +paddingV - (default half tile spacingV) the background color of the selector speed - (default 2) the speed the selector moves to the next selection - can set to 0 for instant diagonal - (default false) defaults to animate horizontally and vertically - set to true for diagonally dim - (default null) set to true for .7 alpha or a number between 0-1 for tile to dim while selector animates @@ -29988,8 +30591,8 @@ note that a tap() or mousedown/click function can be used if the selectedIndex i ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+62.5 - zim.Selector = function(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit) { - var sig = "tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit"; + zim.Selector = function(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingH, paddingV, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit) { + var sig = "tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingH, paddingV, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit"; var duo; if (duo = zob(zim.Selector, arguments, sig, this)) return duo; z_d("62.5"); this.zimContainer_constructor(null,null,null,null,false); @@ -30000,13 +30603,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var timeType = getTIME(); if (zot(tile)) tile = DS.tile!=null?DS.tile:new zim.Tile(new zim.Circle(20, zim.red), 4, 4, 10, 10); - if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"white"; + if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:zim.white; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:2; if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(0,0,0,.1)"; if (zot(corner)) corner = DS.corner!=null?DS.corner:10; if (zot(dashed)) dashed = DS.dashed!=null?DS.dashed:false; - if (zot(paddingHorizontal)) paddingHorizontal = DS.padding!=null?DS.padding:tile.spacingH/2; - if (zot(paddingVertical)) paddingVertical = DS.paddingVertical!=null?DS.paddingVertical:tile.spacingV/2; + if (zot(paddingH)) paddingH = DS.padding!=null?DS.padding:tile.spacingH/2; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:tile.spacingV/2; if (zot(speed)) speed = DS.speed!=null?DS.speed:2; if (zot(diagonal)) diagonal = DS.diagonal!=null?DS.diagonal:false; if (zot(dim)) dim = DS.dim!=null?DS.dim:false; @@ -30041,8 +30644,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo target = currentItem || tile.getChildAt(0); if (target) { - targetW = target.width+paddingHorizontal*2; - targetH = target.height+paddingVertical*2; + targetW = target.width+paddingH*2; + targetH = target.height+paddingV*2; } that.tile = tile.addTo(that).cur(); @@ -30062,18 +30665,18 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } else { selector = this.selector = new zim.Rectangle(targetW, targetH, zim.faint, zim.faint, borderWidth, corner, dashed, {ignoreScale:!resizeScale}) .centerReg(that); - selector.loc(tile.width/2, target.y+paddingVertical, that, behind?0:1); + selector.loc(tile.width/2, target.y+paddingV, that, behind?0:1); selector.visible = false; } if (!(selectedIndex < 0 || zot(currentItem))) { - selector.loc(target.x+paddingHorizontal, target.y+paddingVertical, that, behind?0:1); + selector.loc(target.x+paddingH, target.y+paddingV, that, behind?0:1); selector.color = backgroundColors[selectedIndex]; selector.borderColor = borderColors[selectedIndex]; selector.visible = true; } - tile.mov(paddingHorizontal, paddingVertical); - this.setBounds(tile.width+paddingHorizontal*2, tile.height+paddingVertical*2); + tile.mov(paddingH, paddingV); + this.setBounds(tile.width+paddingH*2, tile.height+paddingV*2); var pointers = {}; this.tileDown = tile.on("mousedown", function (e) { @@ -30108,7 +30711,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(item)) p.selector.visible = false; else { var point = tile.localToLocal(item.x, item.y, that); - p.selector.loc(point.x, point.y).siz(item.width+paddingHorizontal*2, item.height+paddingVertical*2); + p.selector.loc(point.x, point.y).siz(item.width+paddingH*2, item.height+paddingV*2); p.selector.color = backgroundColors[p.index]; p.selector.borderColor = borderColors[p.index]; p.selector.visible = true; @@ -30150,7 +30753,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.noAnimate = false; if (s == 0) { - sel.loc(point.x, point.y).siz(target.width+paddingHorizontal*2, target.height+paddingVertical*2); + sel.loc(point.x, point.y).siz(target.width+paddingH*2, target.height+paddingV*2); that.animating = false; that.dispatchEvent("change"); } else { @@ -30171,7 +30774,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } } sel.animate({ - props:{widthOnly:target.width+paddingHorizontal*2, heightOnly:target.height+paddingVertical*2}, + props:{widthOnly:target.width+paddingH*2, heightOnly:target.height+paddingV*2}, time:Math.max(timeType=="s"?.2:200,(dY+dX)*s/(timeType=="s"?1000:1)), call:function () { that.animating = false; @@ -30308,7 +30911,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo exactItems.push(that.tile.items[i].clone(true)); } } - return that.cloneProps(new zim.Selector(exact?zim.series(exactItems):(tile.clone?tile.clone():tile), borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, this.style, this.group)); + return that.cloneProps(new zim.Selector(exact?zim.series(exactItems):(tile.clone?tile.clone():tile), borderColor, borderWidth, backgroundColor, corner, dashed, paddingH, paddingV, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, this.style, this.group)); }; this.dispose = function(a,b,disposing) { if (that.keyEvent && that.stage) that.stage.frame.off("keydown", that.keyEvent); @@ -30354,8 +30957,8 @@ min |ZIM VEE| - (default 0) the minimum value for the dial max |ZIM VEE| - (default 10) the maximum value for the dial step |ZIM VEE| - (default 1) 1 provides steps of 1, 0 is continuous decimal, 2 would provide steps of 2, etc. width - (default 100) the width of the dial (diameter) -backgroundColor - (default "#666") the background color of the dial -indicatorColor - (default "#222") the color of the indicator +backgroundColor - (default granite) the background color of the dial +indicatorColor - (default licorice) the color of the indicator indicatorScale - (default 1) the scale of the indicator indicatorType - (default "arrow" or "triangle") can also be "dot" or "circle", and "line" or "rectangle" useTicks - (default true - unless step set to 0) will show lines for ticks @@ -30440,6 +31043,8 @@ enabled - default is true - set to false to disable 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 +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 ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -30475,8 +31080,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(sound)) sound = DS.sound!=null?DS.sound:false; if (zot(step)) step = DS.step!=null?DS.step:sound?0:1; if (zot(width)) width = DS.width!=null?DS.width:100; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#666"; - if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:sound?"white":"#222"; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.granite; + if (zot(indicatorColor)) indicatorColor = DS.indicatorColor!=null?DS.indicatorColor:sound?zim.white:zim.licorice; if (zot(indicatorScale)) indicatorScale = DS.indicatorScale!=null?DS.indicatorScale:sound?1:1; if (zot(indicatorType)) indicatorType = DS.indicatorType!=null?DS.indicatorType:sound?"aztec":"arrow"; if (zot(useTicks)) useTicks = DS.useTicks!=null?DS.useTicks:step!=0; @@ -30516,6 +31121,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // PICK var oa = remember(min,max,step,currentValue); + this.veeObj = {min:oa[0], max:oa[1], step:oa[2], currentValue:oa[3]}; function remember() {return arguments;} // for cloning PICK min = zim.Pick.choose(min); max = zim.Pick.choose(max); @@ -31019,7 +31625,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //***************** RADIAL 64 /*-- -zim.Tabs = function(width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit) +zim.Tabs = function(width, height, tabs, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, downColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit) Tabs zim class - extends a zim.Container which extends a createjs.Container @@ -31048,7 +31654,7 @@ height - (default 60) height of tabs tabs - (default ["1","2","3","4"]) an array of any String, Number, Label, Button, (or any DisplayObject) OR tab objects with the following properties available: any tab specific properties will override the default values from other parameters - [{label:"String", width:200, backgroundColor:"red", rollBackgroundColor:"pink", selectedBackgroundColor:"grey", color:"yellow", selectedColor:"lime"}, {etc.}] + [{label:"String", width:200, backgroundColor:"red", rollBackgroundColor:"pink", downBackgroundColor:"purple", selectedBackgroundColor:zim.grey, color:"yellow", selectedColor:"lime", downColor:zim.white}, {etc.}] label can be a String or a Label object - default text color is white Tab objects can also include wait properties for individual buttons. (this was put in place before Buttons were allowed in the tabs array - so you can just add a Button to the tab array instead) @@ -31057,12 +31663,14 @@ tabs - (default ["1","2","3","4"]) an array of any String, Number, Label, Button also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done wait will primarily be applicable when the tabs are used as a set of buttons rather than traditional tabbing Warning - do not use the same array for multiple tabs as the array is turned into an array of objects used by the Tabs object. -backgroundColor - (default "#777") the background color of a deselected tab when not rolled over -rollBackgroundColor - (default "#555") the rollover background color -selectedBackgroundColor - (default "#333") the background color of the selected tab (any CSS color) +backgroundColor - (default tin) the background color of a deselected tab when not rolled over +rollBackgroundColor - (default grey) the rollover background color +downBackgroundColor - (default null) the pressing down background color +selectedBackgroundColor - (default dark) the background color of the selected tab (any CSS color) selectedRollBackgroundColor - (default rollBackgroundColor) the background color of the selected tab on rollover (if currentEnabled is true) -color - (default "white") the text color of a deselected tab when not rolled over +color - (default white) the text color of a deselected tab when not rolled over rollColor - (default color) the rollover color (selected tabs do not roll over) +downColor - (default null) the pressing down color selectedColor - (default color) the text color of the selected tab (any CSS color) selectedRollColor - (default rollColor) the text color of the selected tab on rollover (if currentEnabled is true) vertical - (default false) set to true to make vertical tabs with text still horizontal @@ -31073,7 +31681,7 @@ currentSelected - (default true) set to false to not highlight the current butto corner - (default 0) the corner radius of the tabs can also be an array of [topLeft, topRight, bottomRight, bottomLeft] base - (default "none") specifiy a side for flat bottom when corner is set (but not set to an array) - other values are "bottom" (default when corner and not vertical), "left" (default when corner and vertical), "top", "right" + other values are "bottom" (default when corner and not vertical), LEFT (default when corner and vertical), TOP, RIGHT ** this was flatBottom - but then vertical tabs were added so it was changed in ZIM 9.2.0 keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs @@ -31090,13 +31698,13 @@ rollWaitColor - (default label's roll color) color for text when waiting and rol waitModal - (default false) set to true to exit wait state if user clicks off tabs or to another tab waitEnabled - (default true) set to false to disable tabs while in wait mode backdropColor - (default null) set to a color to show behind the tabs (handy for when corner is not 0) -align - (default "center") horizontal align -valign - (default "center") vertical align -labelAlign - (default "center") horizontal align of the label only -labelValign - (default "center") vertical align of the label only +align - (default CENTER) horizontal align +valign - (default CENTER) vertical align +labelAlign - (default CENTER) horizontal align of the label only +labelValign - (default CENTER) vertical align of the label only labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in tabs -labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set -labelIndentVertical - (default indent) vertical indent of label when align or valign is set +labelIndentH - (default indent) horizontal indent of label when align or valign is set +labelIndentV - (default indent) vertical indent of label when align or valign is set indent - (default 10) indent of items when align or valign is set and there are custom objects in tabs useTap - (default false) set to true to use tap to activate otherwise uses ACTIONEVENT (mousedown or click) excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the buttons @@ -31176,8 +31784,8 @@ dispatches a "change" event when a tab changes (but not when setting selectedInd ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+65 - zim.Tabs = function(width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit) { - var sig = "width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit"; + zim.Tabs = function(width, height, tabs, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, downColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit) { + var sig = "width, height, tabs, backgroundColor, rollBackgroundColor, downBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, downColor, selectedColor, selectedRollColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentH, labelIndentV, indent, useTap, excludeCustomTap, selectedIndex, styleLabels, keyWrap, style, group, inherit"; var duo; if (duo = zob(zim.Tabs, arguments, sig, this)) return duo; z_d("65"); @@ -31194,12 +31802,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo this.group = group; if (zot(tabs) || tabs.length<=0) tabs = DS.tabs!=null?DS.tabs:[1,2,3,4]; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#777"; - if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#555"; - if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:"#333"; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.tin; + if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.grey; + if (zot(downBackgroundColor)) downBackgroundColor = DS.downBackgroundColor!=null?DS.downBackgroundColor:rollBackgroundColor; + if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:zim.dark; if (zot(selectedRollBackgroundColor)) selectedRollBackgroundColor = DS.selectedRollBackgroundColor!=null?DS.selectedRollBackgroundColor:rollBackgroundColor; - if (zot(color)) color = DS.color!=null?DS.color:"white"; + if (zot(color)) color = DS.color!=null?DS.color:zim.white; if (zot(rollColor)) rollColor = DS.rollColor!=null?DS.rollColor:color; + if (zot(downColor)) downColor = DS.downColor!=null?DS.downColor:rollColor; if (zot(selectedColor)) selectedColor = DS.selectedColor!=null?DS.selectedColor:color; if (zot(selectedRollColor)) selectedRollColor = DS.selectedRollColor!=null?DS.selectedRollColor:rollColor; if (zot(backing)) backing = DS.backing!=null?DS.backing.clone():null; @@ -31211,8 +31821,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(indent)) indent=DS.indent!=null?DS.indent:10; if (zot(labelIndent)) labelIndent=DS.labelIndent!=null?DS.labelIndent:indent; - if (zot(labelIndentHorizontal)) labelIndentHorizontal=DS.labelIndentHorizontal!=null?DS.labelIndentHorizontal:labelIndent; - if (zot(labelIndentVertical)) labelIndentVertical=DS.labelIndentVertical!=null?DS.labelIndentVertical:labelIndent; + if (zot(labelIndentH)) labelIndentH=DS.labelIndentH!=null?DS.labelIndentH:labelIndent; + if (zot(labelIndentV)) labelIndentV=DS.labelIndentV!=null?DS.labelIndentV:labelIndent; if (zot(currentEnabled)) currentEnabled = DS.currentEnabled!=null?DS.currentEnabled:false; if (zot(currentSelected)) { @@ -31257,7 +31867,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var num = tabs.length; var tabW = (width - spacing*(num-1))/num; var tabH = (height - spacing*(num-1)-2)/num; - + if (!zot(backdropColor)) { // may be resized later var backdrop = this.backdrop = new zim.Rectangle(width,height,backdropColor, null, null, null, null, null, null, false); @@ -31287,8 +31897,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } } makeDataObject(tabs); - - + // calculate widths - done only once at start var total = 0; var newTabW; var nonSpecifiedCount = 0; @@ -31368,10 +31977,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var tabInfo = { color:zot(t.color)?zim.Pick.choose(color):t.color, rollColor:zot(t.rollColor)?zim.Pick.choose(rollColor):t.rollColor, + downColor:zot(t.downColor)?zim.Pick.choose(downColor):t.downColor, selectedColor:zot(t.selectedColor)?zim.Pick.choose(selectedColor):t.selectedColor, selectedRollColor:zot(t.selectedRollColor)?zim.Pick.choose(selectedRollColor):t.selectedRollColor, backgroundColor:zot(t.backgroundColor)?zim.Pick.choose(backgroundColor):t.backgroundColor, rollBackgroundColor:(zot(t.rollBackgroundColor))?zim.Pick.choose(rollBackgroundColor):t.rollBackgroundColor, + downBackgroundColor:(zot(t.downBackgroundColor))?zim.Pick.choose(downBackgroundColor):t.downBackgroundColor, selectedBackgroundColor:(zot(t.selectedBackgroundColor))?zim.Pick.choose(selectedBackgroundColor):t.selectedBackgroundColor, selectedRollBackgroundColor:(zot(t.selectedRollBackgroundColor))?zim.Pick.choose(selectedRollBackgroundColor):t.selectedRollBackgroundColor, wait:(zot(t.wait))?zim.Pick.choose(wait):t.wait @@ -31389,6 +32000,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo borderWidth:DS.borderWidth!=null?DS.borderWidth:null, backgroundColor:tabInfo.backgroundColor, rollBackgroundColor:tabInfo.rollBackgroundColor, + downBackgroundColor:tabInfo.downBackgroundColor, + downColor:tabInfo.downColor, corner:corner, shadowColor:-1, gradient:gradient, @@ -31405,8 +32018,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo waitEnabled:(zot(t.waitEnabled))?waitEnabled:t.waitEnabled, align:labelAlign, valign:labelValign, - indentHorizontal:labelIndentHorizontal, - indentVertical:labelIndentVertical, + indentH:labelIndentH, + indentV:labelIndentV, inherit:zim.copy(DS) }); button.tabInfo = tabInfo; @@ -31416,7 +32029,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo button.type = "TabsButton"; button.content = t; button.listIndentReady = true; - } else { + } else { if (t.listIndentReady) button = t; else { button = new zim.Container(); @@ -31467,8 +32080,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo button.on("mousedown", function(e) { that.buttonDown = e.currentTarget; }); - button.on("pressup", function() { + button.on("pressup", function(e) { that.buttonDown = null; + var num = e.currentTarget.znum; + if (useTap || zim.ACTIONEVENT=="click") setTimeout(function(){changeBack(num);},50) + else changeBack(num); }); labels.push(t.label); buttons.push(button); @@ -31550,7 +32166,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } prepareAllButtons(); // operates on buttons array - not tabs array - function change(num) { + function change(num, immediate) { if (num==myIndex) return; var b = buttons[myIndex]; if (b && currentSelected) { @@ -31565,12 +32181,26 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo myIndex = num; b = buttons[myIndex]; if (b) { - if (b.tabInfo && zot(b.tabInfo.wait) && currentSelected) { - if (b.tabInfo.selectedBackgroundColor) b.backgroundColor = b.tabInfo.selectedBackgroundColor; - if (b.tabInfo.selectedRollBackgroundColor) b.rollBackgroundColor = b.tabInfo.selectedRollBackgroundColor; - if (b.tabInfo.selectedColor && b.label) b.color = b.tabInfo.selectedColor; - if (b.tabInfo.selectedRollColor && b.label) b.rollColor = b.tabInfo.selectedRollColor; + var ti = b.tabInfo; + if (ti && zot(b.tabInfo.wait) && currentSelected) { + if (ti.selectedBackgroundColor) b.backgroundColor = !zot(ti.downBackgroundColor)&&!immediate?ti.downBackgroundColor:ti.selectedBackgroundColor; + if (ti.selectedRollBackgroundColor) b.rollBackgroundColor = ti.selectedRollBackgroundColor; + if (ti.selectedColor && b.label) b.color = !zot(ti.downColor)&&!immediate?ti.downColor:ti.selectedColor; + if (ti.selectedRollColor && b.label) b.rollColor = ti.selectedRollColor; } + if (immediate&&!currentEnabled) b.enabled = false; // moved to changeBack in ZIM ZIM 02 to support downBackgroundColor and downColor + } + } + + function changeBack(num) { + var b = buttons[num]; + if (b && currentSelected) { + var ti = b.tabInfo; + if (ti && zot(ti.wait)) { + // should be rollBackgroundColor but if setting it seems to stick after rolloff + if (ti.selectedBackgroundColor) b.backgroundColor = that.selected==b?ti.selectedBackgroundColor:ti.backgroundColor + if (ti.selectedColor && b.label) b.color = that.selected==b?ti.selectedColor:ti.color; + } if (!currentEnabled) b.enabled = false; } } @@ -31654,7 +32284,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }, set: function(value) { // change(Math.min(Math.max(value, 0), tabs.length-1)); - change(value); + change(value, true); // true for immediate if ((!zim.OPTIMIZE&&(zns||!WW.OPTIMIZE)) && that.stage) that.stage.update(); } }); @@ -31905,7 +32535,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo for (var i=0; i 0) { // no border specified or a border > 0 if (!zot(borderColor) || !zot(borderWidth)) { // either a border color or thickness - if (zot(borderColor)) borderColor = "black"; + if (zot(borderColor)) borderColor = zim.black; button.borderColorCommand = g.s(borderColor).command; button.borderWidthCommand = g.ss(borderWidth).command; } @@ -32890,22 +33701,22 @@ iconsShiftRadial - (default 0) amount to shif the icons radially height - (default 60) height of radial - not including core or previous radials coreRadius - (default 100) the radius of the core this is fairly large but can sca(.5) the radial after creating, etc. -coreColor - (default #333) the color of the core +coreColor - (default dark) the color of the core title - (default "MENU") the label text in the core titleIcon - (default null) an object to put under the title ** FOR BELOW: see menu parameter where colors can be set per ring and per button for ZIM VEE colors -backgroundColor - |ZIM VEE| - (default "#666") the background color of a button +backgroundColor - |ZIM VEE| - (default granite) the background color of a button ZIM VEE means you can specify different colors for instance: series(blue, green, red, yellow) these would then be the color order of the buttons - same for rollBackgroundColor, etc. -rollBackgroundColor - |ZIM VEE| - (default "#777") the rollover background color of a button -selectedBackgroundColor - |ZIM VEE| - (default "#444") the background color of the selected button +rollBackgroundColor - |ZIM VEE| - (default tin) the rollover background color of a button +selectedBackgroundColor - |ZIM VEE| - (default charcoal) the background color of the selected button selectedRollBackgroundColor - |ZIM VEE| - (default selectedBackgroundColor) the roll background color of the selected button backdropColor - (default clear) set to change the color behind the radial - including spacingOuter -color - |ZIM VEE| - (default "white") the text color of the button +color - |ZIM VEE| - (default white) the text color of the button rollColor - |ZIM VEE| - (default color) the rollover text color of the button selectedColor - |ZIM VEE| - (default color) the text color of the selected button selectedRollColor - |ZIM VEE| - (default color) the rollover text color of the selected button -borderColor - (default #333) color of the button border +borderColor - (default dark) color of the button border borderWidth - (default 2) width of the button border gradient - (default null) set to a number between 0 and 1 - would suggest .1 for gradient on button gap - (default 6 pixels or 3 degrees if gapAsAngle is true) gap between buttons @@ -33006,20 +33817,20 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(height)) height = DS.height!=null?DS.height:60; if (zot(coreRadius)) coreRadius = DS.coreRadius!=null?DS.coreRadius:100; - if (zot(coreColor)) coreColor = DS.coreColor!=null?DS.coreColor:"#333"; + if (zot(coreColor)) coreColor = DS.coreColor!=null?DS.coreColor:zim.dark; if (zot(title)) title = DS.title!=null?DS.title:"MENU"; if (zot(titleIcon)) titleIcon = DS.titleIcon!=null?DS.titleIcon:null; if (zot(backdropColor)) backdropColor = DS.backdropColor!=null?DS.backdropColor:zim.clear; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#666"; - if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:"#777"; - if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:"#444"; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.granite; + if (zot(rollBackgroundColor)) rollBackgroundColor = DS.rollBackgroundColor!=null?DS.rollBackgroundColor:zim.tin; + if (zot(selectedBackgroundColor)) selectedBackgroundColor = DS.selectedBackgroundColor!=null?DS.selectedBackgroundColor:zim.charcoal; if (zot(selectedRollBackgroundColor)) selectedRollBackgroundColor = DS.selectedRollBackgroundColor!=null?DS.selectedRollBackgroundColor:selectedBackgroundColor; - if (zot(color)) color = DS.color!=null?DS.color:"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; - if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:"#333"; + if (zot(borderColor)) borderColor=DS.borderColor!=null?DS.borderColor:zim.dark; if (zot(borderWidth)) borderWidth=DS.borderWidth!=null?DS.borderWidth:2; // 0 if (zot(gapAsAngle)) gapAsAngle=DS.gapAsAngle!=null?DS.gapAsAngle:false; if (zot(gap)) gap=DS.gap!=null?DS.gap:(gapAsAngle?3:6); @@ -33429,7 +34240,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo indicator = DS.indicator!=null?DS.indicator:false; if (!buttonBar) indicator = DS.indicator!=null?DS.indicator:true; } - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"black"; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.black; if (zot(startBackgroundColor)) startBackgroundColor = DS.startBackgroundColor!=null?DS.startBackgroundColor:null; if (zot(keyArrows)) keyArrows = DS.keyArrows!=null?DS.keyArrows:true; @@ -33440,7 +34251,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(spectrumOk)) spectrumOk = DS.spectrumOk!=null?DS.spectrumOk:true; if (zot(spectrumTitle)) spectrumTitle = DS.spectrumTitle!=null?DS.spectrumTitle:null; if (zot(collapsed)) collapsed = DS.collapsed!=null?DS.collapsed:false; - + var that = this; if (zot(container)) { @@ -33525,7 +34336,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var borderColor = DS.borderColor!=null?DS.borderColor:null; var borderWidth = DS.borderWidth!=null?DS.borderWidth:null; if (!zot(borderColor) && zot(borderWidth)) borderWidth = 1; - if (borderWidth && zot(borderColor)) borderColor = "#333"; + if (borderWidth && zot(borderColor)) borderColor = zim.dark; if (borderWidth) g.s(borderColor).ss(borderWidth); var ll = colors.length; @@ -33603,12 +34414,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo alpha.x = 0; alpha.y = lastHeight; - var alphaBacking = this.alphaBacking = new zim.Rectangle(600-margin*2, 50, "#222", null, null, 0, null, null, null, false); + var alphaBacking = this.alphaBacking = new zim.Rectangle(600-margin*2, 50, zim.licorice, null, null, 0, null, null, null, false); alpha.addChild(alphaBacking); zim.centerReg(alphaBacking, alpha); var sliderBut = this.alphaBut = new zim.Button({width:20,height:30,backgroundColor:"darkorange",rollBackgroundColor:"orange",label:"",corner:0,hitPadding:20,style:false}); - var slider = this.alphaSlider = new zim.Slider({min:0,max:1,step:(tolerancePicker?0:.05),button:sliderBut,barLength:tolerancePicker?500*.55:600*.55,barWidth:2,barColor:"#999",vertical:false,useTicks:false,inside:false,style:false}); + var slider = this.alphaSlider = new zim.Slider({min:0,max:1,step:(tolerancePicker?0:.05),button:sliderBut,barLength:tolerancePicker?500*.55:600*.55,barWidth:2,barColor:zim.silver,vertical:false,useTicks:false,inside:false,style:false}); slider.currentValue = !zot(startAlpha)?startAlpha:1; if (tolerancePicker) slider.currentValue = .1; alpha.addChild(slider); @@ -33625,9 +34436,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo alpha.scaleX = alpha.scaleY = width / 600; - slider.on("change", function() { - - alphaText.text = tolerancePicker?"Tolerance: " + decimals(slider.currentValue):"Alpha: " + decimals(slider.currentValue); + slider.on("change", function() { + alphaText.text = tolerancePicker?"Tolerance: " + decimals(slider.currentValue):"Alpha: " + decimals(slider.currentValue); if (alphaPicker && swatch) { swatch.alpha = myAlpha = slider.currentValue; } @@ -33667,6 +34477,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo swatchText.on("input", function () { if (swatchText.text.length == 4 || swatchText.text.length == 7) { swatch.color = swatchText.text; + myColor = swatch.color; } }) nav.addChild(swatchText); @@ -33683,22 +34494,22 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo swatchText.y = 50-10; grip.mouseEnabled = false; } - var closeBut = this.closeBut = new zim.Button({width:90, height:90, label:"X", backgroundColor:"#222", rollBackgroundColor:"#444", corner:0, style:false}); + var closeBut = this.closeBut = new zim.Button({width:90, height:90, label:"X", backgroundColor:zim.licorice, rollBackgroundColor:zim.charcoal, corner:0, style:false}); nav.addChild(closeBut); closeBut.x = 600 - closeBut.width - margin; closeBut.y = 0; closeBut.on((!zns?WW.ACTIONEVENT=="mousedown":zim.ACTIONEVENT=="mousedown")?"mousedown":"click", function(){that.hide(); that.dispatchEvent("close");}); - var button = this.okBut = new zim.Button({width:150, height:90, label:"OK", backgroundColor:"#222", rollBackgroundColor:"#444", corner:0, style:false}); + var button = this.okBut = new zim.Button({width:150, height:90, label:"OK", backgroundColor:zim.licorice, rollBackgroundColor:zim.charcoal, corner:0, style:false}); nav.addChild(button); button.x = closeBut.x - button.width - margin; button.y = 0; - button.on((!zns?WW.ACTIONEVENT=="mousedown":zim.ACTIONEVENT=="mousedown")?"mousedown":"click", doChange); + button.on((!zns?WW.ACTIONEVENT=="mousedown":zim.ACTIONEVENT=="mousedown")?"mousedown":"click", function(){doChange(); that.dispatchEvent("ok");}); var swatchBacking = this.swatchBacking = new zim.Shape({style:false}); nav.addChild(swatchBacking); g = swatchBacking.graphics; - g.f("black").r(0.5,0.5,50,89).f("#666").r(50,0.5,50,89).f("white").r(100,0.5,49.5,89); + g.f(zim.black).r(0.5,0.5,50,89).f(zim.granite).r(50,0.5,50,89).f(zim.white).r(100,0.5,49.5,89); swatchBacking.x = button.x - 150 - margin; swatchBacking.y = 0; @@ -33887,7 +34698,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function showDropper(mockHit) { dropping = true; if (mockHit) setMock(); - dropper.vis(true).top(); + dropper.vis(true).top(); } function hideDropper() { dropping = false; @@ -33932,6 +34743,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo frame.stage.update() } + if (spectrumCollapse) { + that.collapseEvent = dragger.on("dblclick", function () { + if (that.collapsed) that.collapse(false); + else that.collapse(true); + }); + } + if (collapsed && spectrumCollapse) { that.vis(false); setTimeout(function(){ @@ -33946,7 +34764,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.dropperDown = frame.stage.on("stagemousedown", placeDropper); that.dropperMove = frame.stage.on("stagemousemove", placeDropper); that.dropperUp = frame.stage.on("stagemouseup", function() { - placeDropper(); + placeDropper(); if (swatch && spectrum && spectrumHit && swatch.color != dropper.borderColor) setColorDrop(); }); } @@ -33973,10 +34791,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (mock && mock.dispose) mock.dispose(); dropper.vis(false); } - function setColorDrop() { + function setColorDrop() { dropper.vis(false); that.currentValue = zim.convertColor(dropper.borderColor ,"hex"); that.dispatchEvent("change"); + if (!dropping) return; if (dropperTarget) { // adjusted ZIM ZIM 01 to only do when dropperTarget setMock(); dropper.vis(true).top(); @@ -34224,8 +35043,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var stage; this.hide = function() { - stage = that.stage; - that.removeFrom(); + stage = that.stage; + that.removeFrom(); if (stage) stage.update(); return that; }; @@ -34291,8 +35110,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.selectedIndex = selectedIndex; if (zot(selectedColor)) selectedColor=DS.selectedColor!=null?DS.selectedColor:null; if (selectedColor!=null) that.selectedColor = selectedColor; - - if (spectrum) that.selectedColor = "#888888"; + else if (spectrum) that.selectedColor = "#888888"; if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { @@ -34362,17 +35180,17 @@ emojis - (default a big list!) an array of UTF codes for emojis monochrome - (default false) set to true to greyscale the emojis this had better performance when Chrome made black and white emojis in a bold bug too bad - hope they bring them back. -backgroundColor - (default #eee) background color (use clear - or "rbga(0,0,0,0)" for no background) +backgroundColor - (default lighter) background color (use clear - or "rbga(0,0,0,0)" for no background) titleBar - (default "Emojis") a String or ZIM Label title for the panel that will be presented on a titleBar across the top note: set STYLE = {titleBar:false, close:false} to turn off title bar and remove close button -titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested +titleBarColor - (default black) the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - the height of the titleBar if a titleBar is requested cache - (default false or true if mobile) - cache the collection of emojis for better performance - will not look as crisp on desktop size - (default 30) - the size of the emojis in the picker collapse - (default false) - set to true to add a collapse icon to the titleBar that reduces the window so only the bar shows and adds an icon to expand also can double click bar to collapse window -collapseColor - (default #555) - the color of the collapse icon +collapseColor - (default grey) - the color of the collapse icon collapsed - (default false) set to true to start the window collapsed colSize - (default size+15) - the size of the columns rowSize - (default size+14) - the size of the rows @@ -34437,7 +35255,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(colSize)) colSize = DS.colSize!=null?DS.colSize:size+15; if (zot(rowSize)) rowSize = DS.rowSize!=null?DS.rowSize:size+14; if (zot(collapse)) collapse=DS.collapse!=null?DS.collapse:false; - if (zot(collapseColor)) collapseColor = DS.collapseColor != null ? DS.collapseColor : !zot(titleBarColor) ? titleBarColor : "#555"; + if (zot(collapseColor)) collapseColor = DS.collapseColor!=null?DS.collapseColor:!zot(titleBarColor)?titleBarColor:zim.grey; if (zot(collapsed)) collapsed=DS.collapsed!=null?DS.collapsed:false; this.zimWindow_constructor(width, height, null, backgroundColor, null, DS.borderWidth!=null?DS.borderWidth:2, DS.padding!=null?DS.padding:10, DS.corner!=null?DS.corner:10, null, DS.scrollBarActive!=null?DS.scrollBarActive:true, DS.scrollBarDrag!=null?DS.scrollBarDrag:true, null, null, null, false, null, null, null, null, true, null, null, null, null, null, null, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, DS.draggable!=null?DS.draggable:true, null, null, DS.close!=null?DS.close:true, null, null, DS.fullSize!=null?DS.fullSize:false, null, DS.resizeHandle!=null?DS.resizeHandle:false, collapse, collapseColor, collapsed, null, style, group, zim.copy(DS)); @@ -34558,7 +35376,7 @@ live - (default true) will update the label as the text is typed set to false to update only on button press - note, other setting update live regardless button - (default green check) set to a custom ZIM Button if desired titleBar - (default "Text Editor") a String or ZIM Label title for the panel that will be presented on a titleBar across the top -titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested +titleBarColor - (default black) the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested wrap - (default true) set to false to not wrap text in TextArea (wrapping on the actual label can be done with label.lineWidth) @@ -34566,7 +35384,7 @@ limit - (default null) set to a number to limit the TextArea number of character scroll - (default true) set to false to not show a vertical scrollbar when needed - note if textHeight is not high enough, a scrollbar may not show placeholder - (default null) set to true to show default text - will be overwritten with label text if there is text password - (default false) set to true to make the TextArea a password field - shows dots - the label will not show dots -borderColor - (default #888) border color +borderColor - (default pewter) border color borderWidth - (default 1) the thickness of the border margin - (default 10) the margin around the various sub components corner - (default 0) the round of corner @@ -34969,7 +35787,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (that.inputEvent) textArea.off("input", that.inputEvent); that.inputEvent = textArea.on("input", function () { - if (live) label.text = textArea.text; + if (live && label) label.text = textArea.text; that.dispatchEvent("input"); that.dispatchEvent("update"); if (that.stage) that.stage.update(); @@ -35023,7 +35841,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-67.1 /*-- -zim.Keyboard = function(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, hardKeyboard, layout, style, group, inherit) +zim.Keyboard = function(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, placeShiftH, placeShiftV, special, rtl, hardKeyboard, layout, numPadScale, numPadDraggable, numPadOnly, numPadAdvanced, style, group, inherit) Keyboard zim class - extends a zim.Container which extends a createjs.Container @@ -35038,7 +35856,7 @@ Keyboard also captures hard keyboard keydown and will type that as well See https://zimjs.com/keyboard NOTE: press and hold down the vowels for multiple vowel options -NOTE: currently, multi-line Label input is not supported +NOTE: multi-line Label and TextArea input is not supported NOTE: the width of the Label can be set by the Label's lineWidth paremeter NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) @@ -35082,8 +35900,8 @@ labels - (default null) a ZIM Label to show letters in or an array of labels and provide management across multiple labels currently, multiline labels are not supported setting the label lineWidth will set the max width of the label -backgroundColor - (default "#333") an css color for the background color of the keys -color - (default "white") the color of the text +backgroundColor - (default dark) an css color for the background color of the keys +color - (default white) the color of the text shiftBackgroundColor - (default "orange") the color of the active shift key shiftHoldBackgroundColor - (default "red") the color of the active shift hold key placeBackgroundColor - (default "50c4b7") the color of the arrow backings when placing cursor in label @@ -35146,13 +35964,19 @@ data - (default see below) pass in data for the letters on the three sets of key uc2:"lc2" } ]; -place (default true) - set to false to not add place arrows when selecting Label -special (default null) - set to a string to add a special key to the left of the space bar -rtl (default false) - (Experimental) set to true to use right-to-left text -hardKeyboard (default true) - set to false to not include keypresses from physical keyboard -layout (default "qwerty") - set to change the layout (also see data parameter for custom layout) +place - (default true) set to false to not add place arrows when selecting Label +placeShiftH - (default 0) set to shift place arrows horizontal - from default location +placeShiftV - (default 0) set to shift place arrows vertically - from default location +special - (default null) set to a string to add a special key to the left of the space bar +rtl - (default false) (Experimental) set to true to use right-to-left text +hardKeyboard - (default true) set to false to not include keypresses from physical keyboard +layout - (default "qwerty") set to change the layout (also see data parameter for custom layout) additionally supported layouts are "azerty", "hebrew", "turkish", "arabic" - thanks to those who submitted layouts! please let us know at https://zimjs.com/slack if you are using a layout that others would use! +numPadScale - (default .8) the scale of the NumPad when pressed from the numPad key at bottom right +numPadDraggable - (default true) set to false to not be able to drag the NumPad +numPadOnly - (default false) set to true to open the NumPad only but can then use with labels +numPadAdvanced - (default false) set to true to add an extra row to the NumPad with round brackets, exponential and percent or modulus keys style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) inherit - (default null) used internally but can receive an {} of styles directly @@ -35163,10 +35987,16 @@ show(index) - shows the Keyboard - use this rather than addTo(), etc. hide() - hides the keyboard toggle(state - default null) - shows if hidden and hides if showing (returns the keyboard for chaining) or pass in true to show keyboard or false to hide keyboard +setText(text) - change the current label text to the text provided +clearText() - clear the current label text addChar(char) - add a character to the currentLabel at the currentIndex removeChar() - removes the chararcter in the currentLabel at the currentIndex-1 (a backspace) addLabels(labels) - add a ZIM Label or an array of Labels to the labels list for the Keyboard removeLabels(labels) - remove a ZIM Label or an array of Labels +showNumPad() - shows the NumPad - also see Keyboard numPadOnly parameter and the NUMPAD key +hideNumPad() - hide the NumPad - also see the NUMPAD key and the x on the NumPad +showKeyboard() - specifically shows the keyboard if numPadOnly is set +hideKeyboard() - specifically hides the keyboard but may still show the NumPad showPlace() - show the place menu for cursor hidePlace() - hide the place menu for cursor resize() - scales the keyboard to the stage with margin and places at bottom of screen @@ -35182,12 +36012,15 @@ on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispat addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES +type - holds the class name as a String data - get the data array for the keyboard - see the data parameter for details and to set value for data labels - get the labels array - use addLabels() and removeLabels() to set selectedLabel - the label with the cursor or -1 if no cursor selectedIndex - the index of the cursor in the selected label or -1 if no cursor -type - holds the class name as a String toggled - read-only Boolean that is true if keyboard is visible and false if not +keys - reference to the keyboard itself +numPad - reference to the NumPad once it has been shown once +place - reference to the place menu ALSO: see ZIM Container for properties such as: width, height, widthOnly, heightOnly, draggable, level, depth, group @@ -35206,8 +36039,8 @@ Dispatches a "close" event when close keyboard icon at bottom right is pressed ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+67.2 - zim.Keyboard = function(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, hardKeyboard, layout, style, group, inherit) { - var sig = "labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, hardKeyboard, layout, style, group, inherit"; + zim.Keyboard = function(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, placeShiftH, placeShiftV, special, rtl, hardKeyboard, layout, numPadScale, numPadDraggable, numPadOnly, numPadAdvanced, style, group, inherit) { + var sig = "labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, placeShiftH, placeShiftV, special, rtl, hardKeyboard, layout, numPadScale, numPadDraggable, numPadOnly, numPadAdvanced, style, group, inherit"; var duo; if (duo = zob(zim.Keyboard, arguments, sig, this)) return duo; z_d("67.2"); this.zimContainer_constructor(1000,400,null,null,false); @@ -35217,13 +36050,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(labels)) labels = DS.labels!=null?DS.labels:[]; if (!Array.isArray(labels)) labels = [labels]; - if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"#333"; - if (zot(color)) color = DS.color!=null?DS.color:"white"; + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.dark; + if (zot(color)) color = DS.color!=null?DS.color:zim.white; if (zot(shiftBackgroundColor)) shiftBackgroundColor = DS.shiftBackgroundColor!=null?DS.shiftBackgroundColor:"orange"; if (zot(shiftHoldBackgroundColor)) shiftHoldBackgroundColor = DS.shiftHoldBackgroundColor!=null?DS.shiftHoldBackgroundColor:"red"; - if (zot(placeBackgroundColor)) placeBackgroundColor = DS.placeBackgroundColor!=null?DS.placeBackgroundColor:"#50c4b7"; + if (zot(placeBackgroundColor)) placeBackgroundColor = DS.placeBackgroundColor!=null?DS.placeBackgroundColor:zim.blue; if (zot(placeColor)) placeColor = DS.placeColor!=null?DS.placeColor:color; - if (zot(cursorColor)) cursorColor = DS.cursorColor!=null?DS.cursorColor:"#50c4b7"; + if (zot(cursorColor)) cursorColor = DS.cursorColor!=null?DS.cursorColor:zim.blue; if (zot(shadeAlpha)) shadeAlpha = DS.shadeAlpha!=null?DS.shadeAlpha:.2; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"rgba(0,0,0,.1)"; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; @@ -35240,17 +36073,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo ["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["shift","z","x","c","v","b","n","m","backspace"], - ["?123"] // rest of bottom line automatically added + ["?123","@"] // rest of bottom line automatically added ],[ ["1","2","3","4","5","6","7","8","9","0"], ["!","@","#","$","/","^","&","*","(",")"], ["1/2","-","'", "\"",":",";",",","?","backspace"], - ["ABC"] // rest of bottom line automatically added + ["ABC","@"] // rest of bottom line automatically added ],[ ["+","x","%","=","<",">","{","}","[","]"], ["€","£","¥", "$", "￦", "~", "`","¤","♡","☆"], ["2/2","_","\\","|","《","》","¡","¿","backspace"], - ["ABC"] // rest of bottom line automatically added + ["ABC","@"] // rest of bottom line automatically added ] ]; if (!data[3]) data[3] = { @@ -35263,8 +36096,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }; var that = this; if (zot(place)) place = DS.place!=null?DS.place:true; + if (zot(placeShiftH)) placeShiftH = DS.placeShiftH!=null?DS.placeShiftH:0; + if (zot(placeShiftV)) placeShiftV = DS.placeShiftV!=null?DS.placeShiftV:0; if (zot(rtl)) rtl = DS.rtl!=null?DS.rtl:false; if (zot(hardKeyboard)) hardKeyboard = DS.hardKeyboard!=null?DS.hardKeyboard:true; + if (zot(numPadScale)) numPadScale = DS.numPadScale!=null?DS.numPadScale:.8; + if (zot(numPadOnly)) numPadOnly = DS.numPadOnly!=null?DS.numPadOnly:false; + if (zot(numPadDraggable)) numPadDraggable = DS.numPadDraggable!=null?DS.numPadDraggable:true; + if (zot(numPadAdvanced)) numPadAdvanced = DS.numPadAdvanced!=null?DS.numPadAdvanced:false; if (zot(layout)) layout = DS.layout!=null?DS.layout:"qwerty"; layout = layout.toLowerCase(); if (layout != "qwerty") { @@ -35301,17 +36140,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo ["ק", "ר", "א", "ט", "ו", "ן", "ם", "פ", "backspace"], ["ש", "ד", "ג", "כ", "ע", "י", "ח", "ל", "ך", "ף"], ["ז", "ס", "ב", "נ", "ה", "מ", "צ", "ת", "ץ"], - ["?123", ","] // rest of bottom line automatically added + ["?123", "@"] // rest of bottom line automatically added ], [ ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], ["!", "@", "#", "$", "/", "^", "&", "*", "(", ")"], ["1/2", "-", "'", "\"", ":", ";", ",", "?", "backspace"], - ["ABC", ","] // rest of bottom line automatically added + ["ABC", "@"] // rest of bottom line automatically added ], [ ["+", "x", "%", "=", "<", ">", "{", "}", "[", "]"], ["€", "£", "¥", "$", "￦", "~", "`", "¤", "♡", "☆"], ["2/2", "_", "\\", "|", "《", "》", "¡", "¿", "backspace"], - ["ABC", ","] // rest of bottom line automatically added + ["ABC", "@"] // rest of bottom line automatically added ], { e: ["ė", "ē", "ę", "ê", "é", "ë", "è"], u: ["ū", "û", "ú", "ü", "ù"], @@ -35327,17 +36166,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo ["a","z","e","r","t","y","u","i","o","p"], ["q","s","d","f","g","h","j","k","l","m"], ["shift","w","x","c","v","b","n","´","backspace"], - ["?123",","] // rest of bottom line automatically added + ["?123","@"] // rest of bottom line automatically added ],[ ["1","2","3","4","5","6","7","8","9","0"], ["!","@","#","$","/","^","&","*","(",")"], ["1/2","-","'", "\"",":",";",",","?","backspace"], - ["ABC",","] // rest of bottom line automatically added + ["ABC","@"] // rest of bottom line automatically added ],[ ["+","x","%","=","<",">","{","}","[","]"], ["€","£","¥", "$", "￦", "~", "`","¤","♡","☆"], ["2/2","_","\\","|","《","》","¡","¿","backspace"], - ["ABC",","] // rest of bottom line automatically added + ["ABC","@"] // rest of bottom line automatically added ],{ e:["ė","ē","ę","ê","é","ë","è"], u:["ū","û","ú","ü","ù"], @@ -35414,7 +36253,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }); var numH = maxNum; - var botArray = ["@","",".","/","away"]; + var botArray = ["/","",",",".","numpad","away"]; if (!zot(special)) botArray.splice(1,0,special); var textKeys = zim.copy(data[0]); @@ -35480,6 +36319,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var shiftKeyIcon; var backspaceIcon; var hideKeyBoardIcon; + var showNumPadIcon; + var hideNumPadIcon; + var numPadKey; var dragButton; var dragY; @@ -35528,8 +36370,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } else if (e.target.toggle === "2/2") { that.removeChild(currentKeyboard); makeButtons(statuses.number1); + } else if (e.target.na === "numpad") { + showNumPad(e.target); } else if (e.target.na === "away") { - hideKeyboard(); + that.hideKeyboard(); that.dispatchEvent("close"); } else if (data[3] && data[3][e.target.na]) { makeAlternativeLetters(e.target.na); @@ -35561,6 +36405,17 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.removeChar = function () { backspaceRemovesLetter(true); }; + that.clearText = function () { + currentLabel.text = ""; + backspaceRemovesLetter(true); + makeWidthsArray(); + that.selectedIndex = 0; + }; + that.setText = function (text) { + currentLabel.text = text; + makeWidthsArray(); + that.selectedIndex = text.length; + }; var shiftEvent; function shiftKeys(immediate) { @@ -35651,7 +36506,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo typeKeyboard = numberKeys2; } //container maken - currentKeyboard = new zim.Container(1000, 430, null, null, false).addTo(that); + that.keys = currentKeyboard = new zim.Container(1000, 430, null, null, false).addTo(that).vis(!numPadOnly); //alle toetsen, door arrays heen wandelen for (var i = 0; i < typeKeyboard.length; i++) { if (i <= 1 || (which == statuses.def && i == 2 && typeKeyboard[2][0] != "shift")) { @@ -35678,6 +36533,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } else if (typeKeyboard[i][j] == "") { bigKey = false; thisIsSpacekey = true; + } else if (typeKeyboard[i][j] == "numpad") { + thisKeyLetter = showNumPadIcon; + bigKey = false; + dark = true; } else if (typeKeyboard[i][j] == "away") { thisKeyLetter = hideKeyBoardIcon; bigKey = true; @@ -35690,7 +36549,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo thisWidth = (size * 1.5 + 2.5); } else if (thisIsSpacekey) { // Dan Zen Cat 03 patch - make spacebar take up available space - thisWidth = (size + 5) * ((zot(special) ? 4 : 3) + numH-10+1-data[0][3].length) - 5; + thisWidth = (size + 5) * ((zot(special) ? 3 : 2) + numH-10+1-data[0][3].length) - 5; if (data[0][3].indexOf("backspace") != -1) { thisWidth -= size/2; } @@ -35716,7 +36575,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //plaatje op bakking if (thisKeyLetter) { var clone = thisKeyLetter.clone(); - clone.scaleTo(button, 70, 70); + var sc; + if (typeKeyboard[i][j]=="numpad") { + sc = 60; + numPadKey = button; + } else { + sc = 70; + } + clone.scaleTo(button, sc, sc); clone.centerReg(button); } if (!passesLetter) { @@ -35871,6 +36737,34 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo thisShape.setTransform(hideKeyBoardIconArray[i].transform[0], hideKeyBoardIconArray[i].transform[1]); thisShape.addTo(hideKeyBoardIcon); } + showNumPadIcon = new zim.Container({ style: false }); + showNumPadIcon.setBounds(0, 0, 62, 86); + hideNumPadIcon = new zim.Container({ style: false }); + hideNumPadIcon.setBounds(0, 0, 62, 86); + var sA = [ + { p: ("Ai+heIF9AAIi/C9g"), transform: [33, 76, 1, 1, 180] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [46, 43.2] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [32.3, 43.2] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [18.8, 43.2] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [46, 29.5] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [32.3, 29.5] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [18.6, 29.5] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [45.8, 15.8] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [32.1, 15.8] }, + { p: ("AgyAzIAAhlIBlAAIAABlg"), transform: [18.4, 15.8] } + ]; + for (var i = 0; i < sA.length; i++) { + var numShape = new zim.Shape({ style: false }); + numShape.graphics.f(color).s().p(sA[i].p); + numShape.setTransform(sA[i].transform[0], sA[i].transform[1], sA[i].transform[2], sA[i].transform[3], sA[i].transform[4]); + numShape.addTo(showNumPadIcon); + var num2Shape = new zim.Shape({ style: false }); + num2Shape.graphics.f(color).s().p(sA[i].p); + num2Shape.setTransform(sA[i].transform[0], sA[i].transform[1]); + num2Shape.addTo(hideNumPadIcon); + } + numShape.graphics.ef().s(white).ss(3).rr(-16,-14,60,55,10); + num2Shape.graphics.ef().s(white).ss(3).rr(-16,-14,60,55,10); } function makeDragButton() { @@ -35883,10 +36777,48 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo dragButton.x = (8.5 * size) + (40); dragButton.y = - size - 5; dragButton.na = "drag"; - } - - function hideKeyboard() { - that.hide(); + } + + function showNumPad(status) { + if (!that.numPad) { + that.numPad = new zim.NumPad({advanced:numPadAdvanced, draggable:numPadDraggable}).sca(numPadScale); + if (numPadDraggable || numPadOnly) that.numPad.center({add:false}); + else that.numPad.pos({x:0, y:8, horizontal:"center", vertical:"bottom", add:false}); + that.numPad.on("pressed", function() { + if (that.numPad.key == "enter") { + that.dispatchEvent("enter"); + } else if (that.numPad.key == "backspace") { + that.removeChar(); + } else if (that.numPad.key == "clear") { + that.clearText(); + } else if (that.numPad.key == "space") { + addToLabel(" "); + } else { + addToLabel(that.numPad.key); + } + }); + that.numPad.on("close", function() { + numPadKey.removeChildAt(2); + showNumPadIcon.clone().scaleTo(numPadKey, 60, 60).centerReg(numPadKey,2); + currentKeyboard.updateCache(); + if ((!that.keys.parent || !that.keys.visible) && textBlinker) { + textBlinker.visible = false; + that.toggled = false; + removeCursorShiftMenu(); + } + }); + } + + numPadKey.removeChildAt(2); + if (that.numPad.parent || status === false) { + that.numPad.removeFrom(); + showNumPadIcon.clone().scaleTo(numPadKey, 60, 60).centerReg(numPadKey,2); + } else if (!that.numPad.parent || status === true) { + that.numPad.addTo(); + hideNumPadIcon.clone().scaleTo(numPadKey, 60, 60).centerReg(numPadKey,2); + } + currentKeyboard.updateCache(); + if (that.stage) that.stage.update(); } function startDragging() { @@ -35910,7 +36842,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo positionXBlinker += currentLabel.widthArray[i]?currentLabel.widthArray[i]:0; } // Dan Zen added 9.5.0 padding for three types of Label (backing, backgroundColor and neither) - textBlinker.heightOnly = currentLabel.getBounds().height*(currentLabel.backing&&zot(currentLabel.padding)?.9:1)-((currentLabel.paddingVertical&¤tLabel.background)?currentLabel.paddingVertical*2:0); + textBlinker.heightOnly = currentLabel.getBounds().height*(currentLabel.backing&&zot(currentLabel.padding)?.9:1)-((currentLabel.paddingV&¤tLabel.background)?currentLabel.paddingV*2:0); textBlinker.center(currentLabel); textBlinker.x = positionXBlinker; } @@ -35924,7 +36856,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var point; buttonsCursor = []; point = currentLabel.localToLocal(0, 0, that); - cursorShiftMenu = new zim.Container({ style: false }).addTo(that).pos({ x: point.x, y: point.y + currentLabel.height + 15, reg: true }).cur(); + cursorShiftMenu = that.place = new zim.Container({ style: false }).addTo(that).cur(); for (var i = 0; i < tekens.length; i++) { bakking = new zim.Rectangle(size, size, placeBackgroundColor, borderColor, borderWidth, corner, null, null, null, false); if (tekens[i] == "x") new zim.Rectangle(size, size, "black", null, null, corner, null, null, null, false).alp(shadeAlpha).addTo(bakking); @@ -35944,8 +36876,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo buttonsCursor.push(button); } point = currentLabel.localToLocal(0, 0, that); - cursorShiftMenu.x = point.x; - cursorShiftMenu.y = point.y + currentLabel.height + 15; + cursorShiftMenu.x = point.x + placeShiftH; + cursorShiftMenu.y = point.y + currentLabel.height + 15 + placeShiftV; cursorShiftMenu.on("click", verschuifCursor); function verschuifCursor(e) { if (buttonsCursor.indexOf(e.target) == 0) { @@ -35961,8 +36893,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } function removeCursorShiftMenu() { if (!cursorShiftMenu) return that; - cursorShiftMenu.removeAllEventListeners(); - that.removeChild(cursorShiftMenu); + cursorShiftMenu.dispose(); cursorShiftMenu = null; } @@ -36067,8 +36998,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (cursorShiftMenu && currentLabel) { if (currentLabel.text.length > 0) { point = currentLabel.localToLocal(0, 0, that); - cursorShiftMenu.x = point.x; - cursorShiftMenu.y = point.y+currentLabel.height+15; + cursorShiftMenu.x = point.x+placeShiftH; + cursorShiftMenu.y = point.y+currentLabel.height+15+placeShiftV; } else { removeCursorShiftMenu(); } @@ -36142,7 +37073,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo currentLabel = labels[0]; maxWidth = (currentLabel && currentLabel.label.lineWidth) ? currentLabel.label.lineWidth : 10000; if (currentLabel) { - textBlinker = new zim.Rectangle(3, currentLabel.height - ((currentLabel.paddingVertical && currentLabel.background) ? currentLabel.paddingVertical * 2 : 0), cursorColor, null, null, null, null, null, null, false).center(currentLabel); + textBlinker = new zim.Rectangle(3, currentLabel.height - ((currentLabel.paddingV && currentLabel.background) ? currentLabel.paddingV * 2 : 0), cursorColor, null, null, null, null, null, null, false).center(currentLabel); textBlinker.x = 0; textBlinker.visible = false; textBlinker.animate({ @@ -36194,7 +37125,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // ~~~~~~~~~~~~~~~ METHODS - this.show = function(index) { + this.show = function(index, override) { that.addTo(container); // that.resize(); if (!zot(index)) { @@ -36202,17 +37133,51 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo activateLabel(obj); } if (textBlinker) textBlinker.visible = true; - that.toggled = true; + that.toggled = true; + if (numPadOnly) showNumPad(); + else if (!numPadOnly || override) { + that.keys.vis(true); + background.vis(true); + } + if (that.numPad && that.numPad.parent) that.numPad.top(); return that; }; - + this.hide = function() { that.removeFrom(container); - if (textBlinker) textBlinker.visible = false; + showNumPad(false); + if (textBlinker) {textBlinker.visible = false;} currentStage.update(); that.toggled = false; return that; }; + + this.showNumPad = function() { + showNumPad(true); + that.toggled = true; + if (textBlinker) textBlinker.visible = true; + } + this.hideNumPad = function() { + showNumPad(false); + if ((!that.keys.parent || !that.keys.visible) && textBlinker) { + textBlinker.visible = false; + that.toggled = false; + removeCursorShiftMenu(); + } + } + + this.showKeyboard = function() { + that.show(null, true); + } + + this.hideKeyboard = function() { + if (!that.numPad || !that.numPad.parent) { + that.hide(); + } else { + that.keys.vis(false); + background.vis(false); + } + } this.toggle = function(state) { if (state===true) that.show(); @@ -36269,6 +37234,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var background = new zim.Rectangle(this.width, this.height, zim.clear, null, null, null, null, null, null, false).addTo(this).expand().bot(); background.on("mousedown", function(){}); background.on("click", function(){}); + if (numPadOnly) background.vis(false); this.resize = function() { that.scaleTo(currentStage, 100-margin*2/currentStage.width*100, 50-margin*2/currentStage.height*100); @@ -36314,7 +37280,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { - var kb = new zim.Keyboard(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, cursorColor, shadeAlpha, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, hardKeyboard, layout, style, this.group, inherit); + var kb = new zim.Keyboard(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, cursorColor, shadeAlpha, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, placeShiftH, placeShiftV, special, rtl, hardKeyboard, layout, numPadScale, numPadDraggable, numPadOnly, numPadAdvanced, style, this.group, inherit); return that.cloneProps(kb); }; this.dispose = function(a,b,disposing) { @@ -36324,6 +37290,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo for(var i=0; i{ connectors.nodes.loop(node=>{ - node.radius = 5; - node.color = red; -}); -// or hide connectors -// connectors.nodes.alp(0); -stage.update(); + node.radius = 5; + node.color = red; + }); + // or hide connectors + // connectors.nodes.alp(0); + stage.update(); }); END EXAMPLE @@ -36805,7 +37777,7 @@ height - (default null) the height of the connnectors container or will grow wit points - (default [[0,0], [100,0], [100,100], [0,100]]) an array of point arrays for the connectors or can specify a ZIM Blob or Squiggle to place connectors on their points the Blob or Squiggle do not need to be added to the stage - use the recordPoints(true) method of the Blob or Squiggle or see https://zimjs.com/nio/paths.html + use the recordPoints(true) method of the Blob or Squiggle or see https://zimjs.com/paths/ or can specify an array of a base (that connectors nodes will be added to) and baseInfo as follows: [[base, baseInfo], [base, baseInfo], [base, baseInfo], etc.] the baseInfo can be a number of nodes to place around all base sides @@ -36819,7 +37791,7 @@ points - (default [[0,0], [100,0], [100,100], [0,100]]) an array of point arrays or -2 for the first corner on the side or -3 for the second corner on the side node - (default new Circle(10, grey, grey)) the DisplayObject to use as a node - should be centerReg() -line - (default new zim.Line({thickness:3, color:tin, strokeObj:{caps:"round"})) the line to use as the connector +line - (default new zim.Line({thickness:3, color:tin, strokeObj:{caps:"round"}})) the line to use as the connector ZIM Line has a lineType parameter for "straight", "corner", and "curve" which will affect the connector lines ZIM Line has a lineOrientation parameter of "auto", "horizontal" or "vertical" that will affect the connector lines ZIM Line as curveH and curveV settings that will adjust the lines for the "curve" setting @@ -36837,6 +37809,18 @@ dropType - (default "any") determines what happens when a node is dropped as fol "off" will save the node if not dropped on an existing node otherwise it is removed or put back to where it is dragged from "single" will save the node if dropped on a node with no existing connections otherwise it is removed or put back to where it is dragged from note - these only work with the currently dragged node - not other multiple selected nodes +dropArray - (defult null) with "on" or "single" dropType and NOT linear - specify which nodes a node can be connected to + use an array of arrays for each point index [[indexes], [indexes], etc] + eg. [[1,2],[0,2],[3],[0,1]] - if in "on", point 0 can go to 1 or 2, point 1 can go to point 0 or 2, point 2 can only go to 3, etc. + if "single" is set then only one line can be drawn + also see dropIndex and dropArray for each node and the targetNode property + each time a connection is made, a new node is created - these will inherit the dropIndex and dropArray from a targetNode + and if the latestNode's dropArray and its lineArray are the same and the duplicateLines is false then a "blocked" event is dispatched +continuous - (default false) set to true to force nodes to only be made from the last node + all other nodes will have their noMouse() set - also see startIndex - also see linear for doing points in order +startIndex - (default null) set to a point index to force connectors to start at that node + all other nodes will have there noMouse() set - also see continous +duplicateLines - (default true) set to false to not allow multiple lines between the same connectors deleteNode - (default true) set to false to not allow nodes to be deleted by holding or doubleclicking and delete key dblclick - (default true) set to false to not allow nodes to be selected by doubleclicking selected nodes can be moved together @@ -36858,15 +37842,30 @@ baseRollover - (default false) set to true to change all nodes on a base to thei rootLock - (default false) do not let the root node (a node in the points array) be draggable or deletable grandChildren - (default true) do not let there be grandchildren - so there can only be the root nodes and their direct children dblclickTime - (default .5) time in seconds to capture a double click within (also see ZIM TIME constant) +steps - (default null) pass in an array of [nodeNum, dropX, dropY] arrays to recreate the steps - see getSteps(), setSteps() and steps property + this can be used to recreate a previously made set of connectors and connections + note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) inherit - (default null) used internally but can receive an {} of styles directly METHODS -addNode(x, y, base) - add a node at x and y (and on a base) - cannot add nodes in linear mode - see linear parameter +addNode(x, y, base) - add a node at x and y (and on a base) + cannot add nodes in linear mode - see linear parameter + addNode will not work with the dropArray parameter removeNode(node) - remove the node (and its children) removeConnectors() - removes all nodes and connectors except for root nodes which were specified in the points parameter selectNode(node, children) - select a node and its children unless children parameter is set to false +makeConnection(node, x, y) - add a connection from a node to an x and y position +getSteps(popup) - gets an array of [nodeNum, dropX, dropY] that are automatically recorded each connection. Also see the steps property. + This can then copeied and passed into the steps parameter of Connectors() or the applySteps() method + to recreate recorded connections allowing a set of connectors to be recreated. + note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select). +applySteps(steps) - add steps to a Connectors() object - or use the steps parameter + steps of [nodeNum, dropX, dropY] are automatically collected when nodes are made and stored in a steps array. + The deta for the steps can be collected with getSteps(popup) and shown in a popup window if desired. + Then pass the steps in to the Connectors() step parameter or use applySteps(steps) to recreate the recorded Connectors. + note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select). addBase(base, baseInfo) - add nodes to a base DisplayObject - see the points parameter for info about the baseInfo removeBase(base) - remove the connectors for a base - the base will still need to be removed with removeFrom() clone() - makes a copy with properties such as x, y, etc. also copied @@ -36881,16 +37880,34 @@ addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChil PROPERTIES type - holds the class name as a String +latestNode - reference to the latest node while being dragged or and dropped successfully creating a connection + this is set to null if the dragged node is dropped and a connection is not made + see all the properties added to the node objects to get for instance, a creator node +targetNode - reference to a node on which the latestNode was dropped to successfully create a connection + the latestNode will inherit the dropIndex and dropArray from the targetNode node - the DisplayObject used to make the connector nodes the node objects also have these added properties: - creator - the node the node was created from (parent in hierarchy) on null if root node + creator - the node the node was created from (parent in hierarchy) or null if root node creatorLine - the line going back to the creator or null if root node creations - an array of nodes made from the node (its children in hiearchy) before - the node before it in the original points array (or null if first) after - the node after it in the original points array (or null if last) + nodeColor - remembers the node color in case ZIM VEE is used for color so rolloff knows what color to set base - the base the node is associated with or null if no base selected - whether the node is selected or not orientation - the orientation of the lines from the node + nodeNum - a unique index in order nodes are made + this is used in steps to recreate nodes and connections with the Connectors steps parameter or setSteps(steps) method + dropIndex - get or set the index of the point on which an original node is made + this will get transfered from a targerNode + dropArray - get or set the array of dropIndexes that this node can connect to + this will get transfered from a targerNode + and if the dropArray and the lineArray are the same + and the duplicateLines is false then a "blocked" event is dispatched + lineArray - get an array of indexes to other node connections + this will get transfered to a targetNode + and if the lineArray and dropArray are the same + and the duplicateLines is false then a "blocked" event is dispatched line - the Line object used to make the connector lines the line objects also have these added properties: node - a reference to the node at the start of the line @@ -36898,6 +37915,9 @@ line - the Line object used to make the connector lines nodes - the Container that holds the nodes lines - the Container that holds the lines points - a read only array of points of node +steps - an array of [nodeNum, dropX, dropY] arrays that can be used to recreate connections + see also the getSteps(popup) method and the Connectors() steps parameter or setSteps(steps) method to recreate connections + note: the steps may also include a delete flag, and moveX and moveY values. selectedList - a read-only array of selected nodes bases - an Array of DisplayObjects used as bases (provided through the points parameter or addBase()) the base objects also have these added properties and methods: @@ -36917,17 +37937,19 @@ x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc. EVENTS -dispatches a "connection" event when a node is made -dispatches a "noconnection" event if a connection is not made +dispatches a "connection" event if a new node is made and lastNode property is set to the new node +dispatches a "noconnection" event if the connector is dropped and no new node is made +dispatches a "blocked" event of duplicateLines is false and continuous is true and there are no more connections available + this will happen if the latestNode's dropArray is the same as its linesArray (the order in the array does not matter) dispatches a "complete" event in linear mode when the connections are complete ALSO: see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+67.39 - zim.Connectors = function(width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, style, group, inherit) { - var sig = "width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, style, group, inherit"; + zim.Connectors = function(width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, dropArray, continuous, startIndex, duplicateLine, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, steps, style, group, inherit) { + var sig = "width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, dropArray, continuous, startIndex, duplicateLine, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, steps, style, group, inherit"; var duo; if (duo = zob(zim.Connectors, arguments, sig, this)) return duo; - z_d("67.39"); + z_d("67.39"); this.group = group; var DS = style===false?{}:zim.getStyle("Connectors", this.group, inherit); @@ -36964,9 +37986,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(max)) max = DS.max!=null?DS.max:null; if (zot(expand)) expand = DS.expand!=null?DS.expand:zim.mobile()?10:0; if (zot(dropType)) dropType = DS.dropType!=null?DS.dropType:"any"; // "any"; // "on", "off" // on is must be on another node, off is must be off other nodes + if (zot(dropArray)) dropArray = DS.dropArray!=null?DS.dropArray:null; + if (zot(continuous)) continuous = DS.continuous!=null?DS.continuous:false; + if (zot(startIndex)) startIndex = DS.startIndex!=null?DS.startIndex:null; + if (zot(duplicateLine)) duplicateLine = DS.duplicateLine!=null?DS.duplicateLine:true; if (zot(deleteNode)) deleteNode = DS.deleteNode!=null?DS.deleteNode:true; if (zot(dblclick)) dblclick = DS.dblclick!=null?DS.dblclick:true; - if (zot(fullMove)) fullMove = DS.fullMove!=null?DS.fullMove:true; + if (zot(fullMove)) fullMove = DS.fullMove!=null?DS.fullMove:true; if (zot(dblclickTime)) dblclickTime = DS.dblclickTime!=null?DS.dblclickTime:.5; var timeType = getTIME(dblclickTime); @@ -36977,6 +38003,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(rootLock)) rootLock = DS.rootLock!=null?DS.rootLock:false; if (zot(grandChildren)) grandChildren = DS.grandChildren!=null?DS.grandChildren:true; + if (zot(steps)) steps = DS.steps!=null?DS.steps:null; if (linear && points.length <= 1) { if (zon) zogy("Connector() - linear needs more than one point"); @@ -36985,8 +38012,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var that = this; + var nodeCount = 0; that.node = node; that.line = line; + that.steps = []; // as each connector is made the steps for original index, x and y are stored var nodeColor = node.color; var nodeBorderColor = node.borderColor; @@ -36994,6 +38023,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var lines = that.lines = new zim.Container(width, height).addTo(that); var nodes = that.nodes = new zim.Container(width, height).addTo(that); + if (points.type == "Blob" || points.type == "Squiggle") { var p = []; @@ -37004,13 +38034,12 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } that.points = points; - this.addNode = function(x, y) { + this.addNode = function(x, y, base) { if (linear) return; // cannot add nodes in linear - return addNode(x, y); + return addNode(x, y, base); }; function addNode (x, y, base, orientation) { - if (x.addChild) { // adding connector to a base // second value is a single number for all sides @@ -37128,6 +38157,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var theNode = node.clone().loc(x, y, nodes).drag({boundary:boundary}).expand(expand); theNode.orientation = orientation; + theNode.nodeColor = theNode.color; theNode.on("mouseover", overNode); theNode.on("mouseout", outNode); @@ -37135,7 +38165,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo theNode.on("pressmove", moveNode); theNode.on("pressup", upNode); if (deleteNode) theNode.hold(holdNode); - + theNode.nodeNum = nodeCount++; theNode.creations = []; return theNode; @@ -37143,8 +38173,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo // that.added(function () { function setNodes() { - zim.loop(points, function (point) { - addNode(point[0], point[1]); + zim.loop(points, function (point, i) { + var node = addNode(point[0], point[1]); + node.dropIndex = i; + if (dropArray) node.dropArray = dropArray[i]; }); // for linear, loop through all nodes and give them before and after nodes @@ -37173,6 +38205,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } } setNodes(); + that.setAvailableIndexes = function(index) { + if (!Array.isArray(index)) index = [index]; + that.nodes.loop(function(node, i) { + if (index.indexOf(i) == -1) node.noMouse(); + else node.mouse(); + }); + } + if (!zot(startIndex)) that.setAvailableIndexes(startIndex); that.keyEvent = function (e) { if (deleteNode && e.keyCode == 46) { // delete @@ -37192,7 +38232,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (that.bases || (rootLock && !node.creator.creator)) return; if (node.adding) removeNode(node.creator); else removeNode(node); - if (stage) stage.update(); + if (that.stage) that.stage.update(); } function overNode(e) { @@ -37205,7 +38245,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function outNode(e) { var node = e.target; if (node.selected) return; - node.color = node.base?node.base.connectorColor:nodeColor; + node.color = node.base?node.base.connectorColor:node.nodeColor; node.borderColor = node.base?node.base.connectorBorderColor:nodeBorderColor; if (that.stage) that.stage.update(); } @@ -37215,9 +38255,19 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var downCount = 0; var downID; - function downNode(e) { - var child = e.target; - if (!linear && (!rootLock || child.creator) && dblclick) { + var downIndex; + function downNode(e, stepping, moving, ctrl) { + var child = e.target; + if (zot(child)) return; + + if (moving) { + child.selected = true; + selectedList = []; + that.selectNode(child, !ctrl); + } + + downIndex = child.nodeNum; // used in record() + if (!linear && (!rootLock || child.creator) && dblclick && !stepping) { if (downCount == 0) { downID = setTimeout(function () { downCount = 0; @@ -37233,8 +38283,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }, dblclickTime); } downCount++; - } - + } + child.startX = child.x; child.startY = child.y; @@ -37267,6 +38317,14 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo parent.orientation = child.orientation; parent.startX = child.startX; parent.startY = child.startY; + parent.dropIndex = child.dropIndex; + parent.dropArray = child.dropArray; + parent.lineArray = child.lineArray; + parent.color = parent.nodeColor = child.nodeColor; + + var newNodeNum = parent.nodeNum; + parent.nodeNum = child.nodeNum; + child.nodeNum = newNodeNum; // adjust for bases if (child.base) { @@ -37304,12 +38362,15 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo child.creatorLine.node = child; child.creatorLine.creatorNode = parent; child.creations = []; - - parent.creations.push(child); + if (child.veeObj && !zot(child.veeObj.color)) child.color = zim.Pick.choose(child.veeObj.color); + else child.color = parent.color; + child.nodeColor = child.color; + parent.creations.push(child); + that.latestNode = child; } - function moveNode(e) { + function moveNode(e, stepping, moving, ctrl) { var node = e.target; if (node.creatorLine) node.creatorLine.alp(1); // if nodes are selected that are not this node being dragged @@ -37327,13 +38388,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } }); } - that.stage.update(); + if (that.stage) that.stage.update(); } - function upNode(e) { - + function upNode(e, stepping, moving, ctrl) { var node = e.target; - if (that.bases) { zim.loop(that.bases, function (base) { if (base == node.base) return; @@ -37342,12 +38401,11 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } }); } - var dbl = false; - if (!linear && downCount > 1) { // double click + if (!linear && downCount > 1 && !stepping) { // double click clearTimeout(downID); var n = node.adding?node.creator:node; - if (node.adding) removeNode(n.creations[n.creations.length-1]); + if (node.adding) removeNode(n.creations[n.creations.length-1], true); if (!n.selected) { var frame = that.stage?that.stage.frame:WW.zdf; selectNode(n, !frame.ctrlKey); @@ -37355,25 +38413,24 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo downCount = 0; dbl = true; } - if (!linear && !that.base) { // test for snap if (snapH) node.x = Math.round(node.x / snapH)*snapH; if (snapV) node.y = Math.round(node.y / snapV)*snapV; } - if ((min && zim.dist(node.x, node.y, node.startX, node.startY) < min) || (max && zim.dist(node.x, node.y, node.startX, node.startY) > max)) { if (node.adding) { - removeNode(node); + removeNode(node, true); } else { node.loc(node.startX, node.startY); if (!dbl) drawLines(node); // drawing twice on double was causing bug } - that.stage.update(); + if (that.stage) that.stage.update(); + that.lastNode = null; + that.targetNode = null; that.dispatchEvent("noconnection"); return; } - var complete = false; var connected = false; if (linear) { @@ -37405,8 +38462,10 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (!parentNode || node.creations.length > 0) { node.loc(node.startX, node.startY).bot(); } else { - removeNode(node); - that.stage.update(); + removeNode(node, true); + if (that.stage) that.stage.update(); + that.lastNode = null; + that.targetNode = null; that.dispatchEvent("noconnection"); return; } @@ -37416,16 +38475,28 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var good = nodes.loop(function (obj) { if (node == obj) return; if (node.hitTestCircles(obj)) { - if (node.adding) removeNode(node); + if (node.adding) removeNode(node, true); else { node.loc(node.startX, node.startY); drawLines(node); } if (rootLock) checkRootLock(node); if (!fullMove && node.creator && num > 0 && node.creator.creations.length >= num) node.creator.noMouse(); + that.targetNode = obj; + if (continuous) { + that.nodes.loop(function(node) { + if (node != that.latestNode) node.noMouse(); + }); + } + if (continuous) { + that.nodes.loop(function(node) { + if (node != that.latestNode) node.noMouse(); + }); + } + record(); that.dispatchEvent("connection"); - that.stage.update(); - return false; + if (that.stage) that.stage.update(); + return; } }); if (!good) { @@ -37440,7 +38511,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (node.hitTestCircles(obj)) { hitObj = obj; if (that.bases && (node.orientation != obj.orientation || (node.creator && node.creator.base && node.creator.base == obj.base))) return; - if (dropType == "on") return false; // bad will be false + if (node.dropArray) if (node.dropArray.indexOf(obj.dropIndex) == -1) return; + if (!duplicateLine && node.lineArray && node.lineArray.indexOf(obj.dropIndex) != -1) return; + if (dropType == "on") return false; // bad will be true hitCount++; hitCount+=obj.creations.length; } @@ -37451,12 +38524,26 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo return; } else { node.loc(hitObj); + if ((node.creator && node.orientation==zim.VERTICAL && Math.round(node.y) == Math.round(node.creator.startY)) || (node.creator && node.orientation==zim.HORIZONTAL && Math.round(node.x) == Math.round(node.creator.startX))) return; + that.targetNode = hitObj; + var lastIndex = node.dropIndex; + node.dropIndex = hitObj.dropIndex; + node.dropArray = zim.copy(hitObj.dropArray); + if (!hitObj.lineArray) hitObj.lineArray = [lastIndex]; + else hitObj.lineArray.push(lastIndex); // just in case the top node is removed + node.lineArray = zim.copy(hitObj.lineArray); + if (node.creator) { + if (!node.creator.lineArray) node.creator.lineArray = []; + node.creator.lineArray.push(node.dropIndex); + } // TODO: add more lineType options like a side connector (down/across/up) and an elbow connector (down/up) // do not let nodes be next to one another sideways - if ((node.creator && node.orientation==zim.VERTICAL && Math.round(node.y) == Math.round(node.creator.startY)) || (node.creator && node.orientation==zim.HORIZONTAL && Math.round(node.x) == Math.round(node.creator.startX))) return; if (hitObj.base && hitObj.base.connectors) addBaseConnector(hitObj.base, node); - complete = true; - } + connected = true; // ZIM ZIM 02 - changed this from complete to connected - think it was an original typo + } + } else { + // if we made a line then a connection otherwise it is just a move + if (!node.selected) connected = true; } } @@ -37465,33 +38552,128 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo node.adding = false; drawLines(node, true, true); // true handles any triangles zim.loop(selectedList, function (obj) { + // if the node's creator is not in the list record it but need to know the ctrl flag + // so if no children in the list then ctrl 1 else if there are children then ctrl 0 + if (selectedList.indexOf(obj.creator)==-1) { + var alone = zim.loop(obj.creations, function(creation) { + if (selectedList.indexOf(creation) >= 0) return false; + }); + record(obj.nodeNum,null,zim.decimals(obj.x,2),zim.decimals(obj.y,2),(alone || alone===undefined)?1:0); + } obj.startX = obj.x; - obj.startY = obj.y; + obj.startY = obj.y; }); + node.startX = node.x; node.startY = node.y; if (rootLock) checkRootLock(node); - if (connected) that.dispatchEvent("connection"); - else that.dispatchEvent("noconnection"); + if (connected) { + if (continuous) { + that.nodes.loop(function(node) { + if (node != that.latestNode) node.noMouse(); + }); + } + record(); + that.dispatchEvent("connection"); + if (zim.arraysEqual(node.dropArray, node.lineArray, false)) that.dispatchEvent("blocked"); + } else { + that.dispatchEvent("noconnection"); + } if (complete) that.dispatchEvent("complete"); - that.stage.update(); + if (that.stage) that.stage.update(); } + + + // STEPS + + function record(i,d,x2,y2,ctrl) { // index, d (deleting), x2,y2 (moving), ctrl is whether parent node is single when moving (no children selected) + if (d) that.steps.push([i,null,null,1]); // deleting + else if (!zot(x2)) that.steps.push([i,null,null,null,x2,y2,ctrl]); // moving + else that.steps.push([downIndex, zim.decimals(that.latestNode.x,2), zim.decimals(that.latestNode.y,2)]); // connecting + } + + that.makeConnection = function(node, x, y, move, ctrl) { + var frame = that.stage?that.stage.frame:WW.zdf; + if (move) { + frame.ctrlKey = ctrl==1?true:false; + downNode({target:node}, true, true, ctrl); + node.loc(x,y); + moveNode({target:node}, true, true, ctrl); + upNode({target:node}, true, true, ctrl); + } else { + downNode({target:node}, true, false, null); + that.latestNode.loc(x,y); + moveNode({target:that.latestNode}, true, false, null); + upNode({target:that.latestNode}, true, false, null); + } + + frame.ctrlKey = false; + return that.latestNode; + } + + + function getNodeFromNum(num) { + var n = that.nodes.loop(function(node) { + if (node.nodeNum==num) return node; + }); + if (n.type) return n; + } + + that.applySteps = function(steps) { + zim.loop(steps, function(step) { + var n = getNodeFromNum(step[0]); + if (n) { + if (step[3]) { // delete + if (n) removeNode(n); + } else if (!zot(step[4])) { // move + that.makeConnection(n, step[4], step[5], true, step[6]); + clearselectedList(); + } else { + that.makeConnection(n, step[1], step[2]); + } + } + }); + return that; + } + + that.getSteps = function(popup) { + if (popup) { + if (!that.stage) that.stage = zdf.stage; + if (!that.pane) { + that.pane = new zim.Pane({ + displayClose:false, + container:that.stage, + width:Math.min(500, that.stage.width-20), + height:Math.min(500, that.stage.height-20), + draggable:true, + }); + that.textArea = new zim.TextArea(Math.min(400, that.stage.width-70), Math.min(400, that.stage.height-70)) + .centerReg(that.pane); + } + that.pane.show(); + that.textArea.text = JSON.stringify(that.steps); + } + return steps; + } + // HELPER FUNCTIONS function noConnect(node) { - if (node.adding || !grandChildren) removeNode(node); + if (node.adding || !grandChildren) removeNode(node, true); else { node.loc(node.startX, node.startY); drawLines(node); } if (rootLock) checkRootLock(node); if (node.base && node.base.connectors) removeBaseConnector(node.base, node); - that.stage.update(); + that.lastNode = null; + that.targetNode = null; that.dispatchEvent("noconnection"); + if (that.stage) that.stage.update(); } function addBaseColors(base) { @@ -37500,7 +38682,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo node.borderColor = base.connectorRollBorderColor; }); base.connectorsOn = true; - base.stage.update(); + if (base.stage) base.stage.update(); } function removeBaseColors(base) { zim.loop(base.connectors, function (node) { @@ -37508,7 +38690,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo node.borderColor = base.connectorBorderColor; }); base.connectorsOn = false; - base.stage.update(); + if (base.stage) base.stage.update(); } // zim.loop(base.connectors, function (node) { @@ -37592,13 +38774,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo function clearselectedList() { zim.loop(selectedList, function (obj) { obj.selected = false; - obj.color = obj.base?obj.base.connectorColor:nodeColor; + obj.color = obj.base?obj.base.connectorColor:obj.nodeColor; obj.borderColor = obj.base?obj.base.connectorBorderColor:nodeBorderColor; }); selectedList = []; that.stage.off("stagemousedown", stagedownID); stagedownID = null; - that.stage.update(); + if (that.stage) that.stage.update(); } function drawLines(node, arrowAdjustStart, arrowAdjustEnd) { @@ -37618,7 +38800,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }); } - function removeNode(node) { + function removeNode(node, count) { zim.loop(node.creations, function (creation) { removeNode(creation); }, true); @@ -37630,7 +38812,9 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (!node.creator.mouseEnabled && !(rootLock && !node.creator.creator)) node.creator.mouse(); } node.removeFrom(); - node.removeAllEventListeners(); + node.removeAllEventListeners(); + if (count) nodeCount--; + else record(node.nodeNum, 1); // record an actual deleted node - not one that was made when deleting node = null; return that; } @@ -37682,7 +38866,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo removeNode(node); }, true); setNodes(); - that.stage.update(); + if (that.stage) that.stage.update(); }; this.removeBase = function(base) { @@ -37708,6 +38892,13 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo that.bases.splice(that.bases.indexOf(base), 1); if (that.stage) that.stage.update(); } + + + + if (steps) that.added(function(){ + that.applySteps(steps); + that.stage.update(); + }); Object.defineProperty(this, 'selectedList', { get: function() { @@ -37747,7 +38938,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { - return that.cloneProps(new zim.Collectors(width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, style, that.group, inherit)); + return that.cloneProps(new zim.Connectors(width, height, points, node, line, linear, linearWrap, linearOrder, num, snapH, snapV, dropType, zim.copy(dropArray), continuous, startIndex, duplicateLine, deleteNode, dblclick, fullMove, min, max, boundary, expand, nodeRollColor, nodeRollBorderColor, nodeSelectedColor, nodeSelectedBorderColor, baseColor, baseBorderColor, baseRollover, rootLock, grandChildren, dblclickTime, steps, style, that.group, inherit)); }; }; zim.extend(zim.Connectors, zim.Container, ["clone", "dispose"], "zimContainer", false); @@ -37764,9 +38955,10 @@ DESCRIPTION A display for ads and promos using an optional ZIM Indicator with pause button. The Marquee uses the ZIM Pages class to transition multiple items. The items can be interactive ZIM objects made ahead of time and passed into the items parameters -Images can also be loaded with the load() method +Images can also be loaded with the load() method. See: https://zimjs.com/marquee.html for an example +See: zim Carousel as well for a more simple object with arrows NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) @@ -37802,14 +38994,14 @@ time - default(5) time interval in seconds for changing items (also see ZIM TIME transition - default("slide") the transition between items options are: "none", "reveal", "slide", "fade", "clear", "black", "white", "fan" speed - default(.5) speed of transition in seconds (also see ZIM TIME constant) -direction - default("right") location of next item relative to current item - options are: "right", "left", "up", "down" +direction - default(RIGHT) location of next item relative to current item + options are: RIGHT, LEFT, UP, DOWN marginLeft - default(25) width at left of content for Indicator and Pause button set to 0 to not show indicator and pause button marginRight - default(25) width at right of content for Z logo with animated MARQUEE set to 0 to not show Z logo with animated MARQUEE marqueeType - (default "dot" or "circle") the Indicator type - also "box" or "square" -borderColor - (default "#333") border color - any ZIM or HTML color - set to -1 for no border +borderColor - (default dark) border color - any ZIM or HTML color - set to -1 for no border borderWidth - (default 1) width of border if borderColor - set to 0 for no border refresh - (default 30*60 seconds) page refresh to handle browser memory build mix - (default true) randomize content and then play in that order - different for each page load @@ -37896,7 +39088,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var timeType = getTIME(time); if (zot(time)) time = DS.time!=null?DS.time:timeType=="s"?5:5000; if (zot(transition)) transition = DS.transition!=null?DS.transition:"slide"; - if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"#333"; + if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:zim.dark; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:1; if (borderColor < 0 || borderWidth < 0) borderColor = borderWidth = null; else if (borderColor!=null && borderWidth==null) borderWidth = 1; @@ -38089,8 +39281,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo text:"MARQUEE", color:zim.dark, backgroundColor:zim.lighter, - shiftVertical:1, - paddingVertical:5 + shiftV:1, + paddingV:5 }) .rot(-90) .pos(0,13,true,false,right) @@ -38178,6 +39370,438 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo }; zim.extend(zim.Marquee, zim.Container, ["clone", "dispose"], "zimContainer"); //-67.4 + +/*-- +zim.Carousel = function(items, viewNum, time, spacing, backgroundColor, backing, padding, paddingH, paddingV, arrowLeft, arrowRight, arrowGap, valign, ease, swipe, remember, selectedIndex, style, group, inherit) + +Carousel +zim class - extends a zim.Container which extends a createjs.Container + +DESCRIPTION +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! + +See: ZIM Marquee for a more complex alternate format with Indicator +See: https://zimjs.com/zim/carousel.html for an example + +NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) + +EXAMPLE + const items = [ + new Rectangle(400,80,red).tap(()=>{zog("red");}), + new Rectangle(400,80,green).tap(()=>{zog("green");}), + new Rectangle(400,80,blue).tap(()=>{zgo("https://zimjs.com","_blank");}) + ]; + new Carousel(items, 1).center(); +END EXAMPLE + +PARAMETERS +** supports DUO - parameters or single object with properties below +** supports OCT - parameter defaults can be set with STYLE control (like CSS) +items - default(seven multicolored rectangles) an array of Display Objects - can be interactive + items will be scaled to the most common width and tiled - see the tile property + a String item will be converted to a new Pic(item) +viewNum - default(3) the number of items to show +time - default(.2) time in seconds to animate between items (also see ZIM TIME constant) +spacing - default(20) the space between the items +backgroundColor - default(clear) the backgroundColor - also see background property +backing - default(null) - an optional backing DisplayObject that goes on top of the backing and under the tile +padding - default(0) - the default for the background outside the tile +paddingH - default(padding) - the horizontal padding to override the padding setting +paddingV - default(padding) - the vertical padding to override the padding setting +arrowLeft - default(new Arrow().rot(180)) - an arrow for going left +arrowRight - default(new Arrow()) - an arrow for going right +arrowGap - default(20) the gap between the arrow and the backing +valign - default(CENTER) the vertical alignment of the tile items +swipe - default(true) set to false to not make the tile swipeable - see also the swipe property +remember - default("zimCarousel") set to false to not remember the selectedIndex when reloading the page + this will start the carousel at the last selectedIndex + but if cycle with bounce is set then the bounce cycle will start over again from the currentIndex +selectedIndex - default(0 or remembered index) the starting index - see also the selectedIndex property + this is the index of the first (left) item in view +style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults +group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) +inherit - (default null) used internally but can receive an {} of styles directly + +METHODS +goRight(time) - go to the right - time defaults to Carousel time parameter but can be customized - returns object for chaining +goLeft(time) - go to the left - time defaults to Carousel time parameter but can be customized - returns object for chaining +cycle(cycleTime, transitionTime, bounce, bounceNum, recycle, rtl) |ZIM VEE| - cycle the carousel from the current selectedIndex (see also remember) + cycleTime (default 5) in seconds to animate to next item + transitionTime (default 1) in seconds to animate between items - overrides Carousel time setting + often a faster Carousel time is desired for pressing arrows or swiping + but a slower transitionTime when cycling + bounce (default true) to go back and forth from start to end + set to false to just go one direction + bounceNum (default 0) set to a number greater than 0 to limit bounce time - returns object for chaining + use .5 for partial cycle for example, 1.5 will go forth then back then forth + recycle (default cycleTime*2) time in seconds to restart cycle if cleared due to arrows or swipes + set to false or -1 to not restart the cycle + rtl (default DIR) if true will stop going back to 0 selectedIndex +disableArrows() - turn arrows off - returns object for chaining +enableArrows() - turn arrows on - returns object for chaining +clone() - makes a copy with properties such as x, y, etc. also copied +dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection + +ALSO: ZIM 4TH adds all the methods listed under Container (see above), such as: +drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(), +addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. +ALSO: see the CreateJS Easel Docs for Container methods, such as: +on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), +addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. + +PROPERTIES +type - holds the class name as a String +selectedIndex - get or set the first index (left) of the viewable area +items - reference to the original array of items +tile - reference to the single-row tile that holds the items +viewNum - get the number of items viewable +itemWidth - get the calculated item width +itemHeight - get the calculated maximum height +spacing - get the spacing between the items +arrowLeft - reference to the left arrow +arrowRight - reference to the right arrow +swipe - get or set whether the tile can be swiped +bounceTotal - the number of bounces .5 for half a bounce +swipeObj - reference to the ZIM Swipe object +cycleInterval - reference to the cycle interval +recycleEvent - reference to the recycle event +recycleWait - reference to the recycle timeout +background - reference to the background rectangle +backing - reference to a provided backing + +ALSO: see ZIM Container for properties such as: +width, height, widthOnly, heightOnly, draggable, level, depth, group +blendMode, hue, saturation, brightness, contrast, etc. + +ALSO: see the CreateJS Easel Docs for Container properties, such as: +x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, +alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc. + +EVENTS +dispatches a "transitioned" event when item finishes changing +dispatches a "bounced" event on each bounce +dispatches a "bouncedone" event if the cycle bounceNum is set and the bounce is done +dispatches a "cyclecleared" event if the cycle is set and stops due to arrow press or swipe + +ALSO: see the CreateJS Easel Docs for Container events such as: +added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover +--*///+67.45 + + zim.Carousel = function(items, viewNum, time, spacing, backgroundColor, backing, padding, paddingH, paddingV, arrowLeft, arrowRight, arrowGap, valign, ease, swipe, remember, selectedIndex, style, group, inherit) { + var sig = "items, viewNum, time, spacing, backgroundColor, backing, padding, paddingH, paddingV, arrowLeft, arrowRight, arrowGap, valign, ease, swipe, remember, selectedIndex, style, group, inherit"; + var duo; if (duo = zob(zim.Carousel, arguments, sig, this)) return duo; + z_d("67.45"); + + this.group = group; + var DS = style===false?{}:zim.getStyle("Carousel", this.group, inherit); + var that = this; + + this.zimContainer_constructor(); + + if (zot(items)) items = DS.items!=null?DS.items:[ + new Rectangle({color: red}), + new Rectangle({color: orange}), + new Rectangle({color: yellow}), + new Rectangle({color: green}), + new Rectangle({color: blue}), + new Rectangle({color: purple}), + new Rectangle({color: pink}) + ]; + + if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:zim.clear; + if (zot(backing)) backing = DS.backing!=null?DS.backing:null; + if (zot(valign)) valign = DS.valign!=null?DS.valign:"center"; + if (zot(viewNum)) viewNum = DS.viewNum!=null?DS.viewNum:3; + if (zot(spacing)) spacing = DS.spacing!=null?DS.spacing:20; + if (zot(padding)) padding = DS.padding!=null?DS.padding:0; + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; + if (zot(arrowLeft)) arrowLeft = DS.arrowLeft!=null?DS.arrowLeft:new zim.Arrow().rot(180); + if (zot(arrowRight)) arrowRight = DS.arrowRight!=null?DS.arrowRight:new zim.Arrow(); + if (zot(arrowGap)) arrowGap = DS.arrowGap!=null?DS.arrowGap:20; + var timeType = getTIME(time); + if (zot(time)) time = DS.time!=null?DS.time:timeType=="s"?.2:200; + if (zot(ease)) ease = DS.ease!=null?DS.ease:"quadInOut"; + if (zot(swipe)) swipe = DS.swipe!=null?DS.swipe:true; + if (zot(remember)) remember = DS.remember!=null?DS.remember:"zimCarousel"; + if (zot(selectedIndex)) selectedIndex = DS.selectedIndex!=null?DS.selectedIndex:0; + if (remember&&localStorage&&!zot(localStorage[remember])) { + selectedIndex = Number(localStorage[remember]); + } + + that.items = items; + that.viewNum = viewNum; + that.spacing = spacing; + that.arrowLeft = arrowLeft; + that.arrowRight = arrowRight; + if (backing) that.backing = backing; + + var widths = {}; + zim.loop(items, function(item, i) { + if (typeof item == "string") item = items[i] = new zim.Pic(item); + item.reg(CENTER, CENTER); + var w = widths["width"+item.width]; + if (!w) widths["width"+item.width] = 1; + else widths["width"+item.width] += 1; + }); + var commonTotal = 0; + var itemWidth = 0; + zim.loop(widths, function(nam, val) { + if (val > commonTotal) { + commonTotal = val; + itemWidth = Number(nam.substring(5)); + } + }); + var itemHeight = 0; + zim.loop(items, function(item) { + item.width = itemWidth; + if (item.height > itemHeight) itemHeight = item.height; + }); + + that.itemWidth = itemWidth; + that.itemHeight = itemHeight; + var tileStartX = arrowLeft.width+arrowGap+paddingH; + var cw; + function buildTile() { + var viewW = viewNum*(itemWidth+spacing)-spacing; + var viewH = itemHeight; + + cw = viewW+paddingH*2+arrowGap*2+arrowLeft.width+arrowRight.width; + that.setBounds(0,0,cw,viewH+paddingV*2); + + that.tile = new zim.Tile({ + obj: items, + cols: items.length, + spacingH:spacing, + rows: 1, + unique: true, + align: "center", + valign: valign + }).center(that).loc(tileStartX); + + that.background = new Rectangle(viewW+paddingH*2, viewH+paddingV*2, backgroundColor).center(that, 0); + that.tile.setMask(that.background); + } + + function buildArrows() { + arrowLeft.pos(0, 0, "left", "center", that); + arrowRight.pos(0, 0, "right", "center", that); + arrowLeft.on("mousedown", function(){ + if (that.cycleInterval) { + that.cycleClear(); + that.dispatchEvent("cyclecleared"); + } + that.goLeft(); + }); + arrowRight.on("mousedown", function(){ + if (that.cycleInterval) { + that.cycleClear(); + that.dispatchEvent("cyclecleared"); + } + that.goRight(); + }); + setArrowsActivate(); + } + + function buildSwipe() { + if (!that.swipe) return; + var swipeObj = that.swipeObj = new zim.Swipe(that.tile); + swipeObj.on("swipe", function(e) { + if (e.swipeX!=0 && that.cycleInterval) { + that.cycleClear(); + that.dispatchEvent("cyclecleared"); + } + if (e.swipeX==1) that.goLeft(); + else if (e.swipeX==-1) that.goRight(); + }); + } + + function setArrowsActivate() { + if (localStorage && remember) localStorage[remember] = selectedIndex; + arrowLeft.activate(true); + arrowRight.activate(true); + if (that.tile.x + that.tile.width <= cw-arrowRight.width-paddingH-arrowGap) { + arrowRight.activate(false); + } + if (that.tile.x >= tileStartX) { + arrowLeft.activate(false); + } + } + + that.goLeft = function(t) { + if (zot(t)) t = time; + if (that.tile.x < tileStartX) { + that.disableArrows(); + selectedIndex--; + that.tile.animate({ + props: {x:that.tile.x+itemWidth+spacing}, + time: t, + ease: ease, + call: function() { + setArrowsActivate(); + that.enableArrows(); + that.dispatchEvent("transitioned"); + } + }); + } + return that; + } + + that.goRight = function(t) { + if (zot(t)) t = time; + if (that.tile.x + that.tile.width > cw-arrowRight.width-paddingH-arrowGap) { + that.disableArrows(); + selectedIndex++; + that.tile.animate({ + props: {x:that.tile.x-itemWidth-spacing}, + time: t, + ease: ease, + call: function() { + setArrowsActivate(); + that.enableArrows(); + that.dispatchEvent("transitioned"); + } + }); + } + return that; + } + + that.cycleClear = function() { + that.cycleInterval.clear(); + that.cycleInterval = null; + return that; + } + + that.cycle = function(cycleTime, transitionTime, bounce, bounceNum, recycle, rtl) { + var sig = "cycleTime, transitionTime, bounce, bounceNum, recycle, rtl"; + var duo; if (duo = zob(that.cycle, arguments, sig)) return duo; + if (zot(cycleTime)) cycleTime = DS.cycleTime!=null?DS.cycleTime:timeType=="s"?5:5000; + if (zot(transitionTime)) transitionTime = DS.transitionTime!=null?DS.transitionTime:timeType=="s"?1:1000; + if (zot(bounce)) bounce = true; + if (zot(bounceNum)) bounceNum = 0; + if (zot(recycle)) recycle = cycleTime*2; + if (zot(rtl)) rtl = ((WW.DIR && WW.DIR=="rtl") || (!WW.DIR && zim.DIR=="rtl")); + let dir = rtl?-1:1; + if (that.cycleInterval) that.cycleInterval.clear(); + if (recycle && recycle != -1) { + if (that.recycleEvent) that.off("cyclecleared", that.recycleEvent); + if (that.recycleWait) that.recycleWait.clear(); + that.recycleEvent = that.on("cyclecleared", function() { + if (that.recycleWait) that.recycleWait.clear(); + that.recycleWait = timeout(recycle, function() { + that.cycle(cycleTime, transitionTime, bounce, bounceNum, recycle, rtl); + }); + }); + } + that.bounceTotal = .5; + that.cycleInterval = zim.interval(cycleTime, function(obj) { + if (that.selectedIndex == 0) { + if (bounce) { + if (obj.count!=1) that.bounceTotal+=.5; + if (bounceNum != 0 && that.bounceTotal > bounceNum) { + that.cycleInterval.clear(); + that.dispatchEvent("bouncedone"); + return; + } + if (that.bounceTotal >= 1) that.dispatchEvent("bounced"); + dir = 1; + that.goRight(transitionTime); + } else if (rtl) { + that.cycleInterval.clear(); + } else { + if (dir==1) that.goRight(transitionTime); + else that.goLeft(transitionTime); + } + } else if (that.selectedIndex == items.length-viewNum) { + if (obj.count!=1) that.bounceTotal+=.5; + if (bounceNum != 0 && that.bounceTotal > bounceNum) { + that.cycleInterval.clear(); + that.dispatchEvent("bouncedone"); + return; + } + if (that.bounceTotal >= 1) that.dispatchEvent("bounced"); + if (bounce) { + dir = -1; + that.goLeft(transitionTime); + } else if (!rtl) { + that.cycleInterval.clear(); + } else { + if (dir==1) that.goRight(transitionTime); + else that.goLeft(transitionTime); + } + } else { + if (dir==1) that.goRight(transitionTime); + else that.goLeft(transitionTime); + } + }); + return that; + } + + that.enableArrows = function() { + if (that.swipeObj) that.swipeObj.active = true; + arrowLeft.mouse(); + arrowRight.mouse(); + return that; + } + + that.disableArrows = function() { + if (that.swipeObj) that.swipeObj.active = false; + arrowLeft.noMouse(); + arrowRight.noMouse(); + return that; + } + + Object.defineProperty(that, 'selectedIndex', { + get: function() { + return selectedIndex; + }, + set: function(val) { + selectedIndex = zim.constrain(val, 0, items.length-viewNum); + that.tile.x = tileStartX - selectedIndex*(itemWidth + spacing); + setArrowsActivate(); + } + }); + + Object.defineProperty(that, 'swipe', { + get: function() { + return swipe; + }, + set: function(val) { + swipe = val; + if (swipe && !that.swipeObj) buildSwipe(); + that.swipeObj.active = swipe; + } + }); + + buildTile(); + buildArrows(); + buildSwipe(); + + if (backing) backing.center(that,1); + if (selectedIndex) that.selectedIndex = selectedIndex; + + this.dispose = function(a,b,disposing) { + if (that.swipeObj) that.swipeObj.dispose(); + if (that.recycleEvent) that.off("cyclecleared", that.recycleEvent); + if (that.cycleWait) that.cycleWait.clear(); + if (that.cycleInterval) that.cycleInterval.clear(); + that.swipeObj = that.recycleEvent = that.cycleWait = null; + if (!disposing) {this.zimContainer_dispose();} + return true; + }; + + if (style!==false) zim.styleTransforms(this, DS); + this.clone = function() { + return that.cloneProps(new zim.Carousel(zim.copy(items), viewNum, time, spacing, backgroundColor, backing, padding, paddingH, paddingV, arrowLeft, arrowRight, arrowGap, valign, ease, swipe, remember, selectedIndex, style, this.group)); + }; + } + zim.extend(zim.Carousel, zim.Container, ["clone", "dispose"], "zimContainer", false); + //-67.45 /*-- zim.Loader = function(width, height, label, type, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, multiple, accept, style, group, inherit) @@ -38849,7 +40473,7 @@ height - (default 70) the height of the TextArea backing (the textarea field wil size - (default 20) a Number for the font-size of the TextArea (do not use px on the end) to change the font, use CSS on the tag property: textArea.tag.style.fontFamily = "courier"; padding - (default 5) the pixels between the backing border and the HTML textarea -color - (default "#666") text color (any CSS color) +color - (default granite) text color (any CSS color) backgroundColor - (default "rgba(256,256,256,.1)") background color of box borderColor - (default rgba(0,0,0,.1)) the color of the border borderWidth - (default 1) thickness of the border @@ -38940,7 +40564,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (zot(height)) height = DS.height!=null?DS.height:70; if (zot(size)) size = DS.size!=null?DS.size:20; if (zot(padding)) padding = DS.padding!=null?DS.padding:5; - if (zot(color)) color = DS.color!=null?DS.color:"#666"; + if (zot(color)) color = DS.color!=null?DS.color:zim.granite; if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(256,256,256,.1)"; if (zot(borderColor)) borderColor = DS.borderColor!=null?DS.borderColor:"rgba(0,0,0,.1)"; if (zot(borderWidth)) borderWidth = DS.borderWidth!=null?DS.borderWidth:null; @@ -39206,7 +40830,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo //-67.6 /*-- -zim.Tag = function(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit) +zim.Tag = function(width, height, id, frame, backgroundColor, padding, paddingH, paddingV, expand, style, group, inherit) Tag zim class - extends a zim.Container which extends a createjs.Container @@ -39247,8 +40871,8 @@ id - (default zimTag_randomNumber) a string id for the HTML div tag. frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag) backgroundColor - (default "rgba(0,0,0,0)") a ZIM Rectangle used as a background padding - (default 10) inner padding between edge of background rectangle and HTML tag -paddingHorizontal - (default padding) inner horizontal padding between edge of background rectangle and HTML tag -paddingVertical - (default padding) inner vertical padding between edge of background rectangle and HTML tag +paddingH - (default padding) inner horizontal padding between edge of background rectangle and HTML tag +paddingV - (default padding) inner vertical padding between edge of background rectangle and HTML tag expand - (default 20) hit area around background to count as a press on Tag - handy for dragging as HTML tag area will override mouse on canvas style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) @@ -39295,8 +40919,8 @@ alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, e EVENTS: See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover --*///+67.7 - zim.Tag = function(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit) { - var sig = "width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit"; + zim.Tag = function(width, height, id, frame, backgroundColor, padding, paddingH, paddingV, expand, style, group, inherit) { + var sig = "width, height, id, frame, backgroundColor, padding, paddingH, paddingV, expand, style, group, inherit"; var duo; if (duo = zob(zim.Tag, arguments, sig, this)) return duo; z_d("67.7"); this.group = group; @@ -39314,8 +40938,8 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo } if (zot(backgroundColor)) backgroundColor = DS.backgroundColor!=null?DS.backgroundColor:"rgba(0,0,0,0)"; if (zot(padding)) padding = DS.padding!=null?DS.padding:10; - if (zot(paddingHorizontal)) paddingHorizontal = DS.paddingHorizontal!=null?DS.paddingHorizontal:padding; - if (zot(paddingVertical)) paddingVertical = DS.paddingVertical!=null?DS.paddingVertical:padding; + if (zot(paddingH)) paddingH = DS.paddingH!=null?DS.paddingH:padding; + if (zot(paddingV)) paddingV = DS.paddingV!=null?DS.paddingV:padding; if (zot(expand)) expand = DS.expand!=null?DS.expand:20; if (expand === true) expand = 20; @@ -39326,7 +40950,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo var that = this; var stage = frame.stage; - that.background = new zim.Rectangle(width+paddingHorizontal, height+paddingVertical, backgroundColor).center(this).expand(expand?expand:0); + that.background = new zim.Rectangle(width+paddingH, height+paddingV, backgroundColor).center(this).expand(expand?expand:0); var tag = that.tag = document.createElement("div"); if (frame.tag) { @@ -39425,7 +41049,7 @@ added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmo if (style!==false) zim.styleTransforms(this, DS); this.clone = function() { - var u = new zim.Tag(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, this.group, inherit); + var u = new zim.Tag(width, height, id, frame, backgroundColor, padding, paddingH, paddingV, expand, style, this.group, inherit); return that.cloneProps(u); }; Object.defineProperty(this, 'frame', { @@ -40347,7 +41971,8 @@ RETURNS obj for chaining if (add && container.addChild) { if (zot(index) || (typeof index === 'number' && isNaN(index))) { - if (!container.contains(obj)) container.addChild(obj); + if (!obj.parent || obj.parent!=container) container.addChild(obj); + // if (!container.contains(obj)) container.addChild(obj); } else { container.addChildAt(obj, index); } @@ -40528,7 +42153,7 @@ circle1.pos(100, 100); // from right and bottom of box bounds circle2.pos(100, 200, RIGHT, BOTTOM, box) // or -circle2.pos(100, 200, "right", "bottom", box) +circle2.pos(100, 200, RIGHT, "bottom", box) // or circle2.pos(100, 200, true, true, box); @@ -40554,7 +42179,7 @@ horizontal - (default LEFT) LEFT will position the left side to the left side of if reg or regX is true then it is the distance to the registration point not the side set to CENTER or MIDDLE to center object and move amount provided in x if reg or regX is true then centers the registration point and moves the amount provided in x - set to START to position "left" for ZIM DIR constant is "ltr" or "right" when DIR="rtl" - END is the opposite + set to START to position LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite vertical - (default TOP) TOP will position the top side to the top side of the container bounds set to BOTTOM to postion the bottom side from the bottom of the container bounds if reg or regY is true then it is the distance to the registration point not the side @@ -40641,7 +42266,7 @@ RETURNS obj for chaining if (!container.contains(obj)) container.addChild(obj); } else { container.addChildAt(obj, index); - } + } } if (!zot(container) && container.addChild && add) { var lastBounds = container.getBounds().clone(); @@ -40659,11 +42284,11 @@ RETURNS obj for chaining addMe(); } } - + // deal with version 3 center values if (!regX && !regY) { if ((horizontal == "center" || horizontal == "middle") && (vertical == "center" || vertical == "middle")) { - obj.center(container); + obj.center({container:container}); obj.mov(x, y); if (resetObjCheck) obj.setBounds(null); if (resetContainerCheck) container.setBounds(null); @@ -40782,6 +42407,7 @@ RETURNS obj for chaining } if (resetObjCheck) obj.setBounds(null); if (resetContainerCheck) container.setBounds(null); + if (!add) obj.removeFrom(); return obj; };//-41.5 @@ -40814,6 +42440,7 @@ END EXAMPLE PARAMETERS supports DUO - parameters or single object with properties below target | x - (default null) an object with x and y properties such as any ZIM Display Object (Rectangle, Button, etc) or a zim Point(100, 100) object or {x:100, y:300}, etc. + or an Array with an x and y value or can be a Number for an x value - in which case, a y value might be expected too y - (default null) an optional y value container - (default current container or zdf stage) the Container to add the obj to and position @@ -40834,8 +42461,13 @@ RETURNS obj for chaining target = null; } if (!zot(target)) { - if (!zot(target.x)) x = target.x; - if (!zot(target.y)) y = target.y; + if (Array.isArray(target)) { + x = target[0]; + y = target[1]; + } else { + if (!zot(target.x)) x = target.x; + if (!zot(target.y)) y = target.y; + } } if (zot(x) && zot(target)) x = obj.x; if (zot(y) && zot(target)) y = obj.y; @@ -41064,6 +42696,8 @@ RETURNS obj for chaining zim.dye = function(obj, color) { z_d("41.73"); if (zot(obj)) return; + // FIX in ZIM ZIM 02 + // if (obj.hasOwnProperty("backgroundColor") && obj.type != "Label") obj.backgroundColor = color; if (obj.hasOwnProperty("backgroundColor")) obj.backgroundColor = color; else if (obj.hasOwnProperty("color")) obj.color = color; return obj; @@ -41417,7 +43051,7 @@ RETURNS obj for chaining z_d("41.64"); if (zot(obj) || !obj.parent) return; if (zot(num)) num = 0; - obj.parent.setChildIndex(obj, obj.parent.getChildIndex(obj)+num); + obj.parent.setChildIndex(obj, zim.constrain(obj.parent.getChildIndex(obj)+num, 0, obj.parent.numChildren-1)); return obj; };//-41.64 @@ -41428,7 +43062,9 @@ cur zim DisplayObject method DESCRIPTION -Chainable function that sets the object's cursor to the type provided - same as CSS cursors +Chainable function that sets the object's cursor to the type provided - same as CSS cursors. + +NOTE: if using drag(), it will set its own cursor, so use the dragCursor parameter in that case. EXAMPLE const circle = new Circle(10, "red").center().cur(); // "pointer" @@ -41474,6 +43110,7 @@ END EXAMPLE PARAMETERS color||Shadow (default "rgba(0,0,0,.3)") the CSS color for the shadow - "red", dark, etc. or pass a single parameter that is a CreateJS Shadow object https://www.createjs.com/docs/easeljs/classes/Shadow.html + pass in -1 to remove a shadow - remember to stage.update() offsetX (default .08 the width or 5 if no width) the distance in the x that the shadow is moved over - can be negatitve offsetY (default .08 the height or 5 if no height) the distance in the y that the shadow is moved over - can be negatitve blur (default .16 the width or 10 if no width) the distance the shadow is blurred @@ -41488,7 +43125,8 @@ RETURNS obj for chaining if (zot(offsetX)) offsetX = obj.width ? obj.width *.08 : 5; if (zot(offsetY)) offsetY = obj.height ? obj.height *.08 : 5; if (zot(blur)) blur = obj.width ? obj.width *.16 : 10; - obj.shadow = new createjs.Shadow(color, offsetX, offsetY, blur); + if (color == -1) obj.shadow = null; + else obj.shadow = new createjs.Shadow(color, offsetX, offsetY, blur); return obj; };//-41.2 @@ -41893,7 +43531,8 @@ RETURNS obj for chaining obj.cursor = "pointer"; var stage; obj.zimClickHoldDownEvent = obj.on("mousedown", function (e) { - stage = e.target.stage; + if (!stage) stage = e.target.stage; + if (!stage) return; if (zot(stage.frame)) stage.frame = WW.zdf; if (zot(stage.frame) || !stage.frame.mousemoveEvent) { // not recording frame mouseX and mouseY if (zot(stage.frame)) stage.frame = {}; @@ -42109,7 +43748,7 @@ removeTweens - (default true) will automatically remove any tweens that have an but if an animate() call to rotation and another to x is set then only the x would be canceled and rotation would continue if after dropping, the animation in x should continue, then a new animate() in x will need to be called this avoids conflict between dragging and animating position which is very confusing for beginner coders -startBounds - (default true) set to false to ignore bound rect before dragging (sometimes handy when putting drag on container) +startBounds - (default true) set to false to ignore bound rect before draggzim.drag =ing (sometimes handy when putting drag on container) rect - (depreciated) same as boundary - kept for backwards compatibility when using config object currentTarget - (default false) same as the all parameter - kept for backwards compatibility when using config object offStage - (default false) set to true to be able to drag object off stage (thanks Shammi!) @@ -42294,9 +43933,10 @@ RETURNS obj for chaining var stage; obj.pointers = {}; var stCheck = false; - obj.zimDown = obj.on("mousedown", function(e) { + obj.zimDown = obj.on("mousedown", function(e) { if (!obj.stage || obj.dragPaused) return; - if (singleTouch && stCheck) return; + if (singleTouch && stCheck) return; // breaking if coming back from iframe until next mousedown + obj.zimMove = obj.on("pressmove", obj.zimMove); stCheck = true; stage = obj.stage; if (!obj.zmu) obj.zmu = stage.frame.on("mouseupplus", function(e) { @@ -42380,8 +44020,8 @@ RETURNS obj for chaining }, true); obj.zimMove = obj.on("pressmove", function(e) { - if (singleTouch && !obj.pointers["id"+Math.abs(e.pointerID+1)]) return; - if (!obj.downCheck || obj.dragPaused) return; + if (singleTouch && !obj.pointers["id"+Math.abs(e.pointerID+1)]) return; + if (!obj.downCheck || obj.dragPaused) return; var x = (offStage?e.rawX:e.stageX)/zim.scaX+stage.x; var y = (offStage?e.rawY:e.stageY)/zim.scaY+stage.y; obj.dragMouseX = Math.round(x); @@ -42391,6 +44031,7 @@ RETURNS obj for chaining if (obj.type == "Pen" && !moveCheck && obj.drawing) moveCheck = true; else if (obj.type == "Tag" || obj.type == "TextArea" || obj.type == "Loader") obj.resize(); }, true); + obj.off("pressmove",obj.zimMove); function positionObject(o, x, y) { @@ -42464,8 +44105,10 @@ RETURNS obj for chaining obj.zimUp = obj.on("pressup", function(e){doUp(e);}, true); function doUp(e, outsideUp) { - if (singleTouch && !obj.pointers["id"+Math.abs(e.pointerID+1)]) return; + if (obj.zimMove) obj.off("pressmove", obj.zimMove); + if (singleTouch && !outsideUp && !obj.pointers["id"+Math.abs(e.pointerID+1)]) return; stCheck = false; + var id = "id"+Math.abs(e.pointerID+1); delete obj.pointers[id]; if (!obj.downCheck || obj.dragPaused) return; @@ -43517,7 +45160,7 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg var rect,i; for (i=0; i<4; i++) { if (showScale) { - rect = new zim.Rectangle(handleSize, handleSize, "#e472c4", "#333", 2, null, null, null, null, false); + rect = new zim.Rectangle(handleSize, handleSize, zim.pink, zim.grey, 2, null, null, null, null, false); rect.centerReg(squares); if (cache) rect.cache(-1,-1,handleSize+2,handleSize+2); } else { @@ -43543,7 +45186,7 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg var w = i%2==0?obj.width/2:handleSize; var h = i%2==0?handleSize:obj.height/2; if (showStretch) { - rect = new zim.Rectangle(handleSize, handleSize, "#AAA", "#333", 2, null, null, null, null, false); + rect = new zim.Rectangle(handleSize, handleSize, zim.fog, zim.dark, 2, null, null, null, null, false); rect.centerReg(i%2==0?sidesV:sidesH); if (cache) rect.cache(-1,-1,handleSize+2,handleSize+2); } else { @@ -43567,7 +45210,7 @@ zim.transform = function(obj, move, stretchX, stretchY, scale, rotate, allowTogg for (i=0; i<4; i++) { if (showRotate) { - rect = new zim.Circle(handleSize, "#e472c4", null, null, null, null, null, null, false); + rect = new zim.Circle(handleSize, zim.pink, null, null, null, null, null, null, false); rect.addTo(rotators); if (cache) rect.cache(-handleSize,-handleSize,handleSize*2,handleSize*2); } else { @@ -44434,7 +46077,7 @@ END EXAMPLE EXAMPLE rect.gesture({ rotate:false, - rect:new Boundary(0,0,stageW,stageH), + boundary:new Boundary(0,0,stageW,stageH), minScale:.5, maxScale:3, slide:true @@ -45291,7 +46934,7 @@ const rect = new Rectangle(30,400).centerReg().pos(70).addPhysics(false); // sta const tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10}); // does not slide easily // turn on dragging -physics.drag(); +physics.drag(); // note: to add a boundary use the border parameter of Physics() END EXAMPLE PARAMETERS @@ -45913,7 +47556,7 @@ This technique will work faster than any of the other hit tests. EXAMPLE const tile = new Tile(new Rectangle(100,100),5,4,10,10).center(); -const circle = new Circle(10,green).addTo().drag(); +const circle = new Circle(10,green).pos(10,10).drag(); circle.on("pressmove", ()=>{ var index = tile.hitTestGrid(tile.width, tile.height, 5, 4, circle.x, circle.y,0,0,10,10); zog(index); @@ -45983,7 +47626,7 @@ RETURNS an index Number (or undefined) | col | row | an Array of [index, col, ro // SUBSECTION ANIMATE, WIGGLE, LOOP /*-- -obj.animate = function(props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck) +obj.animate = function(props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall) animate zim DisplayObject method @@ -46231,6 +47874,7 @@ props - the object literal holding properties and values to animate orient - an object with x and y to aim the target at https://zimjs.com/nio/orient.html when a path is used this will default to rotate to orient to path + (for a Sprite, add the Sprite to a Container and animate the Container) can set to false for no rotation can set to any object with an x, y point such as a circle on the stage - or {x:0, y:0} or a new zim Point, etc. flip - setting flip to true will flip the object horizontally when its x direction goes negative @@ -46450,6 +48094,7 @@ easeFrequency - |ZIM VEE| - (default .3 elasticIn and elasticOut or .3*1.5 elast also see easeAmount where easeAmount:3 would be a larger elastic timeUnit - (default TIME) override the TIME setting to "seconds" / "s" or "milliseconds" / "ms" timeCheck - (default true) set to false to not have animate() warn of potentially wrong time units - see also TIMECHECK +noAnimateCall - (default true) set to false to not call the callback function if ANIMATE is set to false PROPERTIES - zim.animate() adds the following properties to any object it animates: animating - read-only - true when animating (including when waiting) @@ -46508,8 +48153,8 @@ EVENTS - zim animate() will add an "animation" event to the target IF the events RETURNS the target for chaining (or null if no target is provided and run on zim with series) --*///+45 - zim.animate = function(target, props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck) { - var sig = "target, props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck"; + zim.animate = function(target, props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall) { + var sig = "target, props, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, sequenceWait, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall"; if (target && (target.props || target.obj)) { var duo; if (duo = zob(zim.animate, arguments, sig)) return duo; @@ -46520,7 +48165,11 @@ RETURNS the target for chaining (or null if no target is provided and run on zim if (!target) return; // 10.9.0 ? var AN = zim.ANIMATE; if (WW.ANIMATE != null) AN = WW.ANIMATE; - if (!AN) return target; + if (!AN) { + if (zot(noAnimateCall)) noAnimateCall = true; + if (call && noAnimateCall && typeof call == "function") call(zot(params)?target:params); + return target; + } if (zot(timeCheck)) timeCheck = true; // last param is noWarning - sent internall as false by wiggle for instance @@ -46700,7 +48349,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim var seqTime = i*sequence; if (i==0 && sequence!=0) seqTime = timeType=="s"?.02:20; // patched in 10.7.0 and 10.7.1 - zim.animate(tar, tar.zimObj, time, ease, (i==target.length-1?call:null), (i==target.length-1?params:null), wait, waitedCall, waitedParams, null, null, null, null, null, null, null, loopPick, null, null, null, null, null, null, rewindTime, rewindEase, null, sequenceCall, sequenceParams, null, ticker, zim.copy(cjsProps), css, protect, override, null, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, seqTime, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck); // do not send from! + zim.animate(tar, tar.zimObj, time, ease, (i==target.length-1?call:null), (i==target.length-1?params:null), wait, waitedCall, waitedParams, null, null, null, null, null, null, null, loopPick, null, null, null, null, null, null, rewindTime, rewindEase, null, sequenceCall, sequenceParams, null, ticker, zim.copy(cjsProps), css, protect, override, null, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, clean, obj, seriesWait, seqTime, rate, pauseOnBlur, easeAmount, easeFrequency, timeUnit, timeCheck, noAnimateCall); // do not send from! } return sequenceTarget; @@ -47272,7 +48921,7 @@ RETURNS the target for chaining (or null if no target is provided and run on zim prepareIds(); function prepareIds() { if (zot(id)) { - id = zim.makeID(10); + id = zim.makeID(null,10); } else { id = String(id); providedID = id; @@ -47280,11 +48929,11 @@ RETURNS the target for chaining (or null if no target is provided and run on zim if (zot(target.zimIdSets)) target.zimIdSets = {}; if (!zot(target.zimIdSets[id])) { // already an idSet idSet = id; - id = zim.makeID(10); + id = zim.makeID(null,10); target.zimIdSets[idSet].push(id); } else if (!zot(target.zimTweens[id])) { // not an idSet but already a tween so make an idSet idSet = id; - id = zim.makeID(10); + id = zim.makeID(null,10); // var idSet = target.zimTweens[id].zimIdSet; target.zimIdSets[idSet] = [idSet]; // add original into set target.zimTweens[idSet].zimIdSet = idSet; // reference back to idSet @@ -47735,21 +49384,32 @@ RETURNS the target for chaining (or null if no target is provided and run on zim } } + // // FLIP SETUP + // var pathFlip; + // var startFlip; + // if (obj.flip) { + // pathFlip = obj.flip; + // delete obj.flip; + // startFlip = target.scaleX; + // } + // var pathFlipVertical; + // var startFlipVertical; + // if (obj.flipVertical) { + // pathFlipVertical = obj.flipVertical; + // delete obj.flipVertical; + // startFlipVertical = target.scaleY; + // } + // + // var lastX=target.x; + // var lastY=target.y; + + + // FLIP SETUP - var pathFlip; - var startFlip; - if (obj.flip) { - pathFlip = obj.flip; - delete obj.flip; - startFlip = target.scaleX; - } - var pathFlipVertical; - var startFlipVertical; - if (obj.flipVertical) { - pathFlipVertical = obj.flipVertical; - delete obj.flipVertical; - startFlipVertical = target.scaleY; - } + var startFlip = target.scaleX, + startFlipVertical = target.scaleY, + pathFlip = obj.flip != undefined ? obj.flip : false, + pathFlipVertical = obj.flipVertical != undefined ? obj.flipVertical : false; var lastX=target.x; var lastY=target.y; @@ -48174,8 +49834,11 @@ RETURNS the target for chaining (or null if no target is provided and run on zim } var forwardStack = [1,1,1]; - - var handlePath = function () { + var lastAA = 0; + var adjustA = 1; + + + var handlePath = function () { if (!target.parent || tween.passive || tween.startPaused) return; if (drag && rewind && ((lastPathPercent < 50 && target.percentComplete > 50) || (lastPathPercent > 50 && target.percentComplete < 50))) { lastForward = target.percentComplete<50; @@ -48204,18 +49867,32 @@ RETURNS the target for chaining (or null if no target is provided and run on zim target.y = locPoint.y; } } + var diffX = Math.abs(lastX - target.x), + diffY = Math.abs(lastY - target.y); var opposite = (startAngle==90||startAngle==270||startAngle==-90); + // if (pathFlip && flipCheck) { + // if (diffX < .01 && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} + // else if (Math.round(lastX) > Math.round(target.x) && diffX > .01 && zim.sign(opposite?target.scaleY:target.scaleX) == zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} + // else if (Math.round(lastX) < Math.round(target.x) && diffX > .01 && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} + // } + // if (pathFlipVertical && flipCheck) { + // if (Math.round(lastY) > Math.round(target.y) && diffY > .01 && zim.sign(opposite?target.scaleX:target.scaleY) == zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; + // if (Math.round(lastY) < Math.round(target.y) && diffY > .01 && zim.sign(opposite?target.scaleX:target.scaleY) != zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; + // } + if (pathFlip && flipCheck) { - if (lastX > target.x && zim.sign(opposite?target.scaleY:target.scaleX) == zim.sign(startFlip)) opposite?target.scaleY*=-1:target.scaleX*=-1; - if (lastX < target.x && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) opposite?target.scaleY*=-1:target.scaleX*=-1; + if (lastX > target.x && diffX > .01 && zim.sign(opposite?target.scaleY:target.scaleX) == zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} + else if (lastX < target.x && diffX > .01 && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} + else if ((target.percentComplete < 99 && target.percentComplete > 1) && diffX < .01 && diffY > .01 && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) {opposite?target.scaleY*=-1:target.scaleX*=-1;} } if (pathFlipVertical && flipCheck) { - if (lastY > target.y && zim.sign(opposite?target.scaleX:target.scaleY) == zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; - if (lastY < target.y && zim.sign(opposite?target.scaleX:target.scaleY) != zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; + if (lastY > target.y && diffY > .01 && zim.sign(opposite?target.scaleX:target.scaleY) == zim.sign(startFlipVertical)) {opposite?target.scaleX*=-1:target.scaleY*=-1;} + else if (lastY < target.y && diffY > .01 && zim.sign(opposite?target.scaleX:target.scaleY) != zim.sign(startFlipVertical)) {opposite?target.scaleX*=-1:target.scaleY*=-1;} + else if ((target.percentComplete < 99 && target.percentComplete > 1) && diffY < .01 && diffX > .01 && zim.sign(opposite?target.scaleX:target.scaleY) != zim.sign(startFlipVertical)) {opposite?target.scaleX*=-1:target.scaleY*=-1;} } - + var aa; - if (pathOrient) { + if (pathOrient && diffX > .05 || pathOrient && diffY > .05) { if (pathObject==pathOrient) { aa = zim.angle(lastX, lastY, target.x, target.y)+startAngle; } else { @@ -48227,17 +49904,125 @@ RETURNS the target for chaining (or null if no target is provided and run on zim } aa = zim.angle(target.x, target.y, orientPoint.x, orientPoint.y)+startAngle; } - + if (aa != 0) { if (!target.paused || movingCheck) { - if (pathFlip && lastX-target.x > 0) aa += 180; + if (pathFlip && lastX-target.x > .01) aa += 180; var aaa = aa; // if (!pathFlip && lastX-target.x > 0 && pathFlipVertical) aaa = aa-180; - target.rotation = aaa==startAngle?target.rotation:aaa; + target.rotation = Math.round(aaa==startAngle?target.rotation:aaa); if (rewind && target.percentComplete > 50 && !pathFlip) target.rotation += 180 } } } + + + + // var handlePath = function () { + // if (!target.parent || tween.passive || tween.startPaused) return; + // if (drag && rewind && ((lastPathPercent < 50 && target.percentComplete > 50) || (lastPathPercent > 50 && target.percentComplete < 50))) { + // lastForward = target.percentComplete<50; + // } + // lastPathPercent = target.percentComplete; + // + // if (pathObject) { + // if (dynamicPath) { + // segments = pathObject.segmentPoints; + // percents = pathObject.segmentRatios; + // } + // + // if (drag) { + // var newPoint = pathObject.getCurvePoint(target.pathRatio, percents, segments); + // } else { + // target.currentPercent = target.startPercent + target.percent*target.pathRatio; + // var newPointRatio = ((1000000+target.currentPercent)%100)/100; + // if (target.pathRatio==1) newPointRatio+=target.percent>0?1:0; + // newPoint = pathObject.getCurvePoint(newPointRatio, percents, segments); + // } + // + // if (newPoint) { + // // latestSegmentIndex = newPoint.z; // point on path before the calculated point - used with drag + // var locPoint = target.parent.globalToLocal(newPoint.x, newPoint.y); + // target.x = locPoint.x; + // target.y = locPoint.y; + // } + // } + // var opposite = (startAngle==90||startAngle==270||startAngle==-90); + // + // var adjust = .05; + // + // // if (pathFlip && flipCheck) { + // // if (lastX > target.x+adjust && zim.sign(opposite?target.scaleY:target.scaleX) == zim.sign(startFlip)) opposite?target.scaleY*=-1:target.scaleX*=-1; + // // if (lastX < target.x-adjust && zim.sign(opposite?target.scaleY:target.scaleX) != zim.sign(startFlip)) opposite?target.scaleY*=-1:target.scaleX*=-1; + // // } + // // if (pathFlipVertical && flipCheck) { + // // if (lastY > target.y+adjust && zim.sign(opposite?target.scaleX:target.scaleY) == zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; + // // if (lastY < target.y-adjust && zim.sign(opposite?target.scaleX:target.scaleY) != zim.sign(startFlipVertical)) opposite?target.scaleX*=-1:target.scaleY*=-1; + // // } + // + // if (pathFlip && flipCheck) { + // if (lastX == target.x) {target.scaleX = startFlip} + // else if (Math.round(lastX) < Math.round(target.x) && target.scaleX != startFlip) {target.scaleX*=-1;} + // else if (Math.round(lastX) > Math.round(target.x) && target.scaleX == startFlip) {target.scaleX*=-1;} + // } + // + // var aa; + // if (pathOrient) { + // if (pathObject==pathOrient) { + // aa = zim.angle(lastX, lastY, target.x, target.y)+startAngle; + // } else { + // var orientPoint; + // if (pathOrient.parent) { + // orientPoint = pathOrient.parent.localToLocal(pathOrient.x, pathOrient.y, target.parent); + // } else { + // orientPoint = target.parent.globalToLocal(pathOrient.x, pathOrient.y); + // } + // aa = zim.angle(target.x, target.y, orientPoint.x, orientPoint.y)+startAngle; + // } + // + // if (aa != 0) { + // if (!target.paused || movingCheck) { + // if (pathFlip && lastX-target.x > .05) aa += 180; + // var aaa = aa; + // // if (!pathFlip && lastX-target.x > 0 && pathFlipVertical) aaa = aa-180; + // target.rotation = aaa==startAngle?target.rotation:aaa; + // if (rewind && target.percentComplete > 50 && !pathFlip) target.rotation += 180 + // } + // } + // } + + // if (pathOrient) { + // + // var aa; + // if (pathObject==pathOrient) { + // aa = zim.angle(lastX, lastY, target.x, target.y)+startAngle; + // } else { + // var orientPoint; + // if (pathOrient.parent) { + // orientPoint = pathOrient.parent.localToLocal(pathOrient.x, pathOrient.y, target.parent); + // } else { + // orientPoint = target.parent.globalToLocal(pathOrient.x, pathOrient.y); + // } + // aa = zim.angle(target.x, target.y, orientPoint.x, orientPoint.y)+startAngle; + // } + // + // aa = (aa+360*100000)%360; + // if (aa != 0) { // || !target.zimAnimateDragDown) { + // if (!target.paused || movingCheck) { + // var sid = (aa>0&&aa<180)?1:-1; + // var rever = (rewind && target.percentComplete > 50)?-1:1; + // var aaa = lastAA+360*100000-(aa+360*100000); + // if (aaa != -180 && aaa != 180) { + // if (aaa > 1) adjustA = -1; + // if (aaa < -1) adjustA = 1; + // } + // lastAA = aa; + // if (pathFlip && lastX-target.x > .05*sid*rever*adjustA) aa += 180; + // target.rotation = aa; + // if (rever && !pathFlip) target.rotation += 180 + // } + // } + // } // picking up target can sway results so take average of last three // could possibly use this with flip to make it less jittery when dropping @@ -48254,6 +50039,8 @@ RETURNS the target for chaining (or null if no target is provided and run on zim lastX = target.x; lastY = target.y; }; + + // there is only one percentComplete on a target // this will overwrite the handlePath function used by that percentComplete // so that the proper drag scope is used - complex - fixed in 10.6.1 @@ -48953,7 +50740,7 @@ calling object.pauseAnimate(true, id) pauses tweens with this id on the target o NOTE: as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE -const circle = new Circle().center().animate({obj:{alpha:0}, repeat:true, rewind:true}); +const circle = new Circle().center().animate({obj:{alpha:0}, loop:true, rewind:true}); circle.on("mousedown", ()=>{ circle.pauseAnimate(!circle.paused); }); @@ -48971,7 +50758,7 @@ const rect = new Rectangle(200, 200, pink) rect.cursor = "pointer"; rect.on("click", ()=>{rect.pauseAnimate()}); // will pause all tweens on rect // OR -const paused = false; +let paused = false; rect.on("click", ()=>{ paused = !paused; rect.pauseAnimate(paused, "scale"); @@ -49146,7 +50933,7 @@ RETURNS target for chaining };//-45.25 /*-- -obj.loop = function(call, reverse, step, start, end) +obj.loop = function(call, reverse, interval, step, start, end, immediate) loop zim DisplayObject method @@ -49171,6 +50958,7 @@ or for (var i in container.children) {var child = container.children[i];} NOTE: If you pass in true for reverse, the loop is run backwards counting to 0 (by default) NOTE: use return to act like a continue in a loop and go to the next loop +NOTE: use return NEXT when in interval mode to go immediately to the next interval - as opposed to return which goes to next but after another interval NOTE: return a value to return out of the loop completely like a break (and return a result if desired) EXAMPLE @@ -49189,6 +50977,22 @@ container.loop((child, i)=>{ // gets passed the child, index, total, start, end }, true); // true would reverse - so highest in stack to lowest, with i going from numChildren-1 to 0 END EXAMPLE +EXAMPLE +// looping with the interval setting + +// loop through an array every 1 second +loop(10, i=>{zog(i);}, null, 1); + +// loop through a Container every .01 seconds +const tile = new Tile(new Rectangle(26,26,[green, blue, pink]), 10, 10, -1, -1) + .reg(CENTER) + .pos(0,100,CENTER,BOTTOM) + .loop(item=>{ + item.color = darker; + S.update(); + }, null, .01); +END EXAMPLE + PARAMETERS supports DUO - parameters or single object with properties below call - the function to call the function will receive (as its final parameters) the index, total, start, end, obj @@ -49202,20 +51006,29 @@ call - the function to call if the obj is a container then the first parameter is the child of the container at the current index if the obj is an HTMLCollection then the first parameter is the tag reverse - (default false) set to true to run the loop backwards to 0 +interval - (default 0) set to a number of seconds between each loop + use return NEXT to go immediately to the next interval + use return to just leave current interval then wait another interval to continue + return a value (other than NEXT) to exit the loop and clear the inverval + the interval object is provided at the end of the loop function parameters - but will probably not be needed step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards) start - (default 0 or length-1 for reverse) index to start end - (default length-1 or 0 for reverse) index to end +immediate - (default true) set to false to not start the loop right away, but rather wait for a first interval RETURNS any value returned from the loop - or true if no value is returned from a loop --*///+45.3 - zim.loop = function(obj, call, reverse, step, start, end) { - var sig = "obj, call, reverse, step, start, end"; + zim.loop = function(obj, call, reverse, interval, step, start, end, immediate) { + var sig = "obj, call, reverse, interval, step, start, end, immediate"; var duo; if (duo = zob(zim.loop, arguments, sig)) return duo; if (!zim.zimLoopCheck) z_d("45.3"); zim.zimLoopCheck = true; if (zot(obj) || zot(call)) return undefined; - if (zot(reverse)) reverse = false; + if (zot(reverse)) reverse = false; + if (zot(interval)) interval = 0; if (zot(step) || step <= 0) step = 1; + if (zot(immediate)) immediate = true; + if (obj.constructor === Number) obj = Number(obj); if (obj.constructor === String) obj = String(obj); @@ -49231,26 +51044,71 @@ RETURNS any value returned from the loop - or true if no value is returned from total = getTotal(length-1); if (total == 0) return; if (reverse) { - for(i=start; i>=end; i-=step) { - if (type=="number") { - r = call(i, total, start, end, obj); - } else if (type=="array" || type=="string") { - r = call(obj[i], i, total, start, end, obj); - } else { // nodelist - r = call(obj.item(i), i, total, start, end, obj); + if (interval === 0) { + for(i=start; i>=end; i-=step) { + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist + r = call(obj.item(i), i, total, start, end, obj); + } + if (typeof r != 'undefined' && r != "next") return r; } - if (typeof r != 'undefined') return r; + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + i = start-i; + + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist + r = call(obj.item(i), i, total, start, end, obj); + } + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } else { - for(i=start; i<=end; i+=step) { - if (type=="number") { - r = call(i, total, start, end, obj); - } else if (type=="array" || type=="string") { - r = call(obj[i], i, total, start, end, obj); - } else { // nodelist // htmlcollection - r = call(obj.item(i), i, total, start, end, obj); + if (interval === 0) { + for(i=start; i<=end; i+=step) { + if (type=="number") { + r = call(i, total, start, end, obj); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj); + } else { // nodelist // htmlcollection + r = call(obj.item(i), i, total, start, end, obj); + } + if (typeof r != 'undefined' && r != "next") return r; } - if (typeof r != 'undefined') return r; + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + + if (type=="number") { + r = call(i, total, start, end, obj, io); + } else if (type=="array" || type=="string") { + r = call(obj[i], i, total, start, end, obj, io); + } else { // nodelist or htmlcollection + r = call(obj.item(i), i, total, start, end, obj, io); + } + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } return true; @@ -49264,14 +51122,47 @@ RETURNS any value returned from the loop - or true if no value is returned from total = getTotal(length-1); if (total == 0) return; if (reverse) { - for(i=start; i>=end; i-=step) { - r = call(props[i], obj[props[i]], i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i>=end; i-=step) { + r = call(props[i], obj[props[i]], i, total, start, end, obj); + if (typeof r != 'undefined' && r != "next") return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + i = start-i; + + r = call(props[i], obj[props[i]], i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } else { - for(i=start; i<=end; i+=step) { - r = call(props[i], obj[props[i]], i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i<=end; i+=step) { + r = call(props[i], obj[props[i]], i, total, start, end, obj); + if (typeof r != 'undefined' && r != "next") return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + + r = call(props[i], obj[props[i]], i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } return true; @@ -49279,14 +51170,47 @@ RETURNS any value returned from the loop - or true if no value is returned from total = getTotal(obj.numChildren-1); if (total == 0) return; if (reverse) { - for(i=start; i>=end; i-=step) { - r = call(obj.getChildAt(i), i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i>=end; i-=step) { + r = call(obj.getChildAt(i), i, total, start, end, obj); + if (typeof r != 'undefined' && r != "next") return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + i = start-i; + + r = call(obj.getChildAt(i), i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } else { - for(i=start; i<=end; i+=step) { - r = call(obj.getChildAt(i), i, total, start, end, obj); - if (typeof r != 'undefined') return r; + if (interval === 0) { + for(i=start; i<=end; i+=step) { + r = call(obj.getChildAt(i), i, total, start, end, obj); + if (typeof r != 'undefined' && r != "next") return r; + } + } else { + zim.interval(interval, function(io) { + i = io.count; + if (!immediate) i--; + if (step) i *= step; + + r = call(obj.getChildAt(i), i, total, start, end, obj); + + if (r == 'next') io.next(); + else if (typeof r != 'undefined') { + io.clear(); + return r; + } + }, total, immediate); } } return true; @@ -49553,7 +51477,7 @@ RETURNS a createjs Rectangle of the bounds of object projected onto the stage if (rect) oB = rect; var pTL,pTR,pBR,pBL; - if (globalObj && globalObj.type && (globalObj.type=="Stage" || globalObj.type=="StageGL")) { + if (globalObj && globalObj.type && !(globalObj.type=="Stage" || globalObj.type=="StageGL")) { pTL = obj.localToLocal(oB.x, oB.y, globalObj); pTR = obj.localToLocal(oB.x+oB.width, oB.y, globalObj); pBR = obj.localToLocal(oB.x+oB.width, oB.y+oB.height, globalObj); @@ -49749,7 +51673,7 @@ RETURNS cloned object with cloned custom properties };//-45.6 /*-- -obj.expand = function(padding, paddingVertical, paddingRight, paddingBottom) +obj.expand = function(padding, paddingV, paddingRight, paddingBottom) expand zim DisplayObject method @@ -49770,28 +51694,28 @@ PARAMETERS - accepts ZIM DUO - regular parameters or a single configuration obje ** two parameters for left/right and top/bottom ** four parameters for left/top/right/bottom with any blank to receive default 20 padding - (default 20) how many pixels to expand bounds -paddingVertical - (default null) the vertical padding (making padding for horizontal) +paddingV - (default null) the vertical padding (making padding for horizontal) paddingRight - (default null) the right padding - if set then padding parameter is the leftPadding -paddingBottom - (default null) the bottom padding - if set then paddingVertical parameter is the paddingTop +paddingBottom - (default null) the bottom padding - if set then paddingV parameter is the paddingTop RETURNS obj for chaining --*///+50 - zim.expand = function(obj, padding, paddingVertical, paddingRight, paddingBottom) { - var sig = "obj, padding, paddingVertical, paddingRight, paddingBottom"; + zim.expand = function(obj, padding, paddingV, paddingRight, paddingBottom) { + var sig = "obj, padding, paddingV, paddingRight, paddingBottom"; var duo; if (duo = zob(zim.expand, arguments, sig)) return duo; z_d("50"); if (zot(obj) || !obj.getBounds || !obj.getBounds()) {zogy("zim methods - expand(): please provide object with bounds set"); return obj;} if (zot(padding)) padding = 20; - if (zot(paddingVertical)) paddingVertical = padding; + if (zot(paddingV)) paddingV = padding; var paddingLeft,paddingTop; if (!zot(paddingRight) || !zot(paddingBottom)) { if (zot(paddingRight)) paddingRight = padding; - if (zot(paddingBottom)) paddingBottom = paddingVertical; + if (zot(paddingBottom)) paddingBottom = paddingV; paddingLeft = padding; - paddingTop = paddingVertical; + paddingTop = paddingV; } else { paddingLeft = paddingRight = padding; - paddingTop = paddingBottom = paddingVertical; + paddingTop = paddingBottom = paddingV; } var oB = obj.getBounds(); var rect = new createjs.Shape(); @@ -50208,9 +52132,13 @@ STYLE is an object so all of these are just a couple lines to make it easier to These include methods such as clear(), add(), remember(), addType(), addGroup(), etc. See the Style entry down below for a complete listing and description. -NOTE: As of ZIM Cat 03, Direct Object styles are supported - adding DisplayObjects to type is no longer required. +NOTE: As of ZIM Cat 03, Direct Object styles are supported - adding DisplayObjects to a type {} is no longer required. STYLE = {Button:{width:500}} // will be automatically converted to STYLE = {type:{Button:{width:500}}} +NOTE: As of ZIM ZIM 01, Direct Group styles are supported - adding a group to a group {} is no longer required. +The group must start with a lowercase letter. +STYLE = {big:{width:500}} // will be automatically converted to STYLE = {group:{big:{width:500}}} + EXAMPLE STYLE = { corner:20, @@ -50250,11 +52178,29 @@ STYLE = { } } -Style.add({Circle:{color:red}}); // with Lazy Objects with Style would do the same +Style.add({Circle:{color:red}}); // Lazy Objects with Style would do the same Style.addType("Circle",{color:red}); // the traditional Style way also works new Circle(50).center(); END EXAMPLE +EXAMPLE +// Lazy Groups - as of ZIM ZIM 01 +// note: these must be lowercase so not confused with Lazy Objects +STYLE = { + alert:{color:red} // all objects with group alert made from now on are red +} +// This will be automatically converted by ZIM to: +STYLE = { + group:{ + alert:{color:red} + } +} + +Style.add({alert:{color:red}}); // Lazy Groups with Style would do the same +Style.addGroup("alert",{color:red}); // the traditional Style way also works +new Circle({group:"alert"}).center(); +END EXAMPLE + EXAMPLE // using once to run a STYLE on only the next object STYLE = {color:red, once:true} @@ -50266,14 +52212,12 @@ EXAMPLE STYLE = { borderColor:dark, borderWidth:5, - type:{ - Rectangle:{ - // color:red, - color:[red, pink, purple], // pick a random color from here - centerReg:true, - animate:{props:{rotation:360}, time:.5, ease:"linear", loop:true}, - move:{x:series(-200, 0, 200)} - } + Rectangle:{ + // color:red, + color:[red, pink, purple], // pick a random color from here + centerReg:true, + animate:{props:{rotation:360}, time:.5, ease:"linear", loop:true}, + move:{x:series(-200, 0, 200)} } } // make three spinning rectangles @@ -50285,11 +52229,9 @@ EXAMPLE STYLE = {cache:true} // specify width and height for any Label -STYLE = { - type:{ - Label:{ - cache:{width:20, height:20} // or also pass in x and y - } +STYLE = { + Label:{ + cache:{width:20, height:20} // or also pass in x and y } } END EXAMPLE @@ -50386,7 +52328,8 @@ All DisplayObjects have a style parameter (default true). Set to false to ignore GROUPS All DisplayObjects have a group parameter. This parameter accepts a string or a comma delimited string of multiple groups. -The group of components can then be targeted in the Group section of STYLE. +The group of components can then be targeted in the Group section of STYLE +or as of ZIM ZIM 01, just the Lazy Group can be used to put just the group name (must start with lowercase letter) A group can contain just one component and act like an ID in CSS. INHERIT @@ -50408,12 +52351,10 @@ EXAMPLE // 4. call styleTransforms at bottom of class: if (style!==false) zim.styleTransforms(this, DS); // 5. use styles in your app code: - STYLE = { - type:{ - Classname:{ - radius:200 - } - } + STYLE = { + Classname:{ + radius:200 + } } END EXAMPLE @@ -50458,27 +52399,33 @@ Style.removeGroup(groupName) - removes a group as a string zim.getStyle = function(type, group, inherit) { if (!zim.STYLECHECK) {z_d("50.34"); zim.STYLECHECK=true;} - var functionList = ["pos","addTo","center","centerReg","mov","drag","transform","gesture","outline","bounds","animate","wiggle","cache"]; + var functionList = ["pos","addTo","center","centerReg","mov","move","drag","transform","gesture","outline","bounds","animate","wiggle","cache"]; // called by DisplayObjects // ZIM NFT MODULE ADJUST var STYLE = WW.STYLE || zim.STYLE; var DS = STYLE; var val; - + // convert Lazy Object styles - ZIM Cat 03 - if (STYLE && STYLE.type && typeof STYLE.type == "string") { - STYLE.ttype = STYLE.type; + if (STYLE && STYLE.type && typeof STYLE.type == "string") { + STYLE.ttype = STYLE.type; delete STYLE.type; } for (var prop in STYLE) { - val = STYLE[prop]; + val = STYLE[prop]; if (prop.match(/^[(A-Z)]/)) { if (!STYLE.type) STYLE.type = {}; if (STYLE.type[prop]) STYLE.type[prop] = zim.merge(STYLE.type[prop], val); else STYLE.type[prop] = val; delete STYLE[prop]; - } + } else if (val.constructor === {}.constructor && prop!="group" && prop!="type" && !zim.isPick(val) && functionList.indexOf(prop)==-1) { + // Added Lazy Group in ZIM ZIM 01 post stable patch + if (!STYLE.group) STYLE.group = {}; + if (STYLE.group[prop]) STYLE.group[prop] = zim.merge(STYLE.group[prop], val); + else STYLE.group[prop] = val; + delete STYLE[prop]; + } } if (!zot(DS)) DS = zim.copy(DS); // can't copy with clone due to recursion @@ -50526,7 +52473,6 @@ Style.removeGroup(groupName) - removes a group as a string // else if (val && val.clone && val.type != type && val.type != "Stage" && val.type != "StageGL") val = val.clone(); // copy config objects with clone except for type container - do not center or centerReg on shape else if (val && val.constructor === {}.constructor) val = zim.copy(val, true, false); - var zm; for (var z in DS) { if (zm=z.match(/^(.+)gColor$/)) { DS[zm[1]+"ackgroundColor"] = DS[z]; @@ -50545,14 +52491,14 @@ Style.removeGroup(groupName) - removes a group as a string // sets x, y, alpha, rotation, scale, scaleX, scaleY, regX, regY, skewX, skewY, bounds, visible // also sets addTo, center, centerReg, transform, drag, gesture, animate, wiggle, expand, cache, and outline (used internally) zim.styleTransforms = function(obj, styles) { - - var zimTransformList = ["visible","x","y","scale","scaleX","scaleY","rotation","alpha","skewX","skewY","regX","regY","blendMode"]; + + var zimTransformList = ["visible","x","y","scale","scaleX","scaleY","rotation","alpha","skewX","skewY","blendMode"]; var i; - if (styles) { + if (styles) { if (styles.add) { obj.addTo(); - } + } if (styles.addTo) { obj.addTo(styles.addTo===true?null:styles.addTo); // not sure what these were doing below but replaced them with above... ZIM 9.5.0 @@ -50569,6 +52515,9 @@ zim.styleTransforms = function(obj, styles) { for (i=0; i