Navigation for the ZIM JavaScript Canvas Framework

HOME News About Examples Learn Code Docs Devs
DOCS
Here is a docs Intro video. See updates for changes and text for full search. Use Distill for less code and Doctor for custom Doc links. Docs are a reference. See Learn and Skool to get started. Use modules or scripts to load ZIM from the CDN. A template is on the Code page. Here are the ZIM scripts - ZIM 01 (minified) and ZIM 01 (un-minified). ZIM HELPER Libraries can be loaded with modules or as individual scripts. Code: SOCKET, GAME, PHYSICS, THREE, CAM, PIZZAZZ 1, PIZZAZZ 2, PIZZAZZ 3, PIZZAZZ 4 (paths). ZIM works with: CreateJS, Box2D, three.js/OrbitControls, socket.io, EasyStar, QRCode and Gifler libraries. Also available are TypeScript definitions and NPM. NOTE: as of ZIM Cat, time defaults to Seconds - this can be set back using TIME = "milliseconds".
ZIM FRAME
EXPAND 70544 ▶︎ Frame(scaling, width, height, color, outerColor, ready, assets, path, progress, ticker, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors, retina, mouseMoveOutside, captureMouse, shim, maxConnections, maxNum, singleTouch)
Frame(scaling, width, height, color, outerColor, ready, assets, path, progress, ticker, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors, retina, mouseMoveOutside, captureMouse, shim, maxConnections, maxNum, singleTouch)
Frame zim class - extends a createjs EventDispatcher DESCRIPTION Frame creates a canvas and stage. Frame lets you decide how you want your stage to scale. It also provides events for ready, resizing and orientation change as well as a way to remake the canvas if necessary. Frame handles loading Bitmap, Sound, etc. assets by wrapping PreloadJS See https://zimjs.com/frame.html for sample templates using Frame. The first frame made is called the zimDefaultFrame - or zdf. It will also have the default stage for addTo(), center(), etc. Use setDefault() on another frame to change the default frame. As of ZIM ZIM 01, ZIM will make F, S, W, H global variables that reference the zimDefaultFrame, its stage and the stage width and height. The width and height will be updated in FULL mode if the window size changes. ZIM ASSET TOOL See https://zimjs.com/assetlist/ Optionally use this tool to prepare an array of assets from a folder. CANVAS ALTERNATIVE CONTENT Frame will move any tag with an id of canvasIDAlternative into the canvas tag. By default, the canvasID is "myCanvas" so use an id of "myCanvasAlternative". This allows you to show content for non-canvas browsers. The content may also be indexed by search engines - one would hope and is read by screen readers (see also ZIM Accessibility). NOTE as of ZIM 10.6.1 frame.asset() is available as a global function asset() NOTE addTo(), center(), centerReg(), loc(), pos(), new Ticker.add() default to the stage of the first frame made use the setDefault() method to set a frame to the default frame NOTE here are some tips that relate to Frame: https://zimjs.com/tips#FRAME https://zimjs.com/tips#IMAGES https://zimjs.com/tips#SOUND https://zimjs.com/tips#FULLSCREEN NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// load assets such as images right in Frame call using a url
// put multiple assets in an array - see assets parameter for options
// the path and progress are optional

new Frame(FIT, 1024, 768, "#ddd", "#333", ready, "image.png", "assets/", new Waiter());
function ready() {

   new Pic("image.png").center(); // formerly had used asset("image.png").center();

} // end ready
EXAMPLE
// load assets on-demand inside ready event

new Frame(FIT, 1024, 768, dark, light, ready);
function ready() {

   // code here - or optionally load assets

   F.loadAssets("image.png");
   F.on("complete", ()=>{

      // app code goes here if waiting for assets
      var image = new Pic("image.png");
      image.center();
      S.update();

   }); // end asset complete

   // OR for multiple assets in an assets folder:

   F.loadAssets(["sound.mp3", "spriteData.json", "spriteImage.png"], "assets/");
   F.on("complete", ()=>{

      // app code goes here if waiting for assets
      const soundInstance = new Aud("sound.mp3").play(); // formerly asset("sound.mp3").play()
      // later soundInstance.paused = true; // etc.

      const sprite = new Sprite({json:asset("spriteData.json")});
      sprite.center().run(2);
      // the image for the sprite is specified in the JSON
      // but we still want to load it so it is in the loadAssets()
      // and the JSON data will take care of adding it to the sprite

      S.update();

   }); // end asset complete

} // end of ready
EXAMPLE
// lazy-load image - added in ZIM Cat
// this means that the asset is not passed into the Frame in the assets parameter
// and it is not added with loadAssets() but rather just called with asset().

new Frame(FIT, 1024, 768, dark, light, ready); // no assets parameter
function ready() {
   
   // lazy-loading will make a container with type "AC" (Asset Container)
   // it will store requested transform information
   // such as that the container is supposed to be centered in this case
   // (remember, the dimensions are unknown until the Bitmap is loaded)
   // then call loadAssets() behind the scene
   // and add the Bitmap to the container
   // if loading is successful, it will rename the type to "Image"
   // then it will use the dimensions to center the container
   
   new Pic("image.jpg").center(); // formerly asset("image.jpg")
   
   // there are many things that can be done to an object
   // that need dimensions - ZIM tries to handle these
   // but if there is something obscure like gesture bounds
   // that ZIM may have missed then use conventional loading
   // or try loading with dimensions provided:
   
   new Pic("image.jpg", 100, 200).center();
   
   // NOTE: do not lazy-load Sprite images.
}
EXAMPLE
   // With multiple loadAsset() calls you can assign the results to a variable
   // and use that variable for the events independently
   // Warning, each of these will still call a frame complete event
   // so usually you would use one or the other but not both

   const first = frame.loadAssets("image.png");
   first.on("complete", ()=>{
      const image = new Pic("image.png").center();
      S.update();
   });

   const second = frame.loadAssets("sound.mp3");
   second.on("complete", ()=>{
      const sound = new Aud("sound.mp3").play();
   });
PARAMETERS supports DUO - parameters or single object with properties below scaling - (default FULL) can have values as follows Note: as of ZIM Cat 04, the constant FIT or the string "fit", etc. can be used FIT sets canvas and stage to dimensions and scales to fit inside window size FILL sets canvas and stage to dimensions and scales to fill window size (previously "outside") FULL sets stage to window size with no scaling "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling FIT and FILL: width and height will set the stage width and height and the canvas is then scaled this is handy because all your dimensions are set to start FULL: width and height are ignored when scaling as these are set to the window width and height TAG: if width and height are provided then the canvas and stage will be these dimensions if width and height are not provided in tag mode, the canvas and stage will take the dimensions of the tag this means, the tag must have some sort of width and height dimensions set or it will be really big! In this mode, you may need to style the containing tag with CSS to get a desired effect. width - (default 1024 except for full**) the width of the stage height - (default 768 except for full**) the height of the stage ** if tag mode and no width or height then these will be the width and height of the tag color - (default null) the background color of the frame (any CSS value) - or just set in styles    will be see-through if not specified outerColor - (default null) the body color of the HTML page - null will not adjust the background color ready - (default null) - an callback function for when the Frame is ready - rather than using the "ready" event    this will be passed frame specific (frame, stage, width, height) parameters    the stage is updated after this function is called assets - (default null) - 1. a string asset or 2. an array of assets, 3. ZIM asset object, 4. ZIM multi-asset object    1. "logo.png"    2. ["logo.png", "bounce.mp3"]    3. {id:"string", src:"logo.png", path:"assets/", loadTimeout:2, noCORSonImage:true}    4. [{assets:["one.png", "two.png"], path:"images/"}, {assets:["big.mp3", "oof.mp3"], path:"sounds/"}]    ** see the loadAssets() method for details - including more file types, etc.    NOTE: "complete", "progress" and "fileLoaded" events are not dispatched       use loadAssets() for these if desired       the "ready" event will be dispatched when the canvas is ready and initial assets are loaded    NOTE: the loadAssets() method can still be used as desired    NOTE: as of ZIM Cat 04, SVG will be automatically converted to a Bitmap with and svg property of the original SVG.    SEE: https://zimjs.com/assetlist/ for many files path - (default null) - a string path for the assets    if an assets object is provide with a path then this parameter is ignored    this will also set the ZIM PATH global to the path    ZIM PATH is used with lazy-loaded images (eg. when not using Frame assets parameter or loadAssets() method) ticker - (default null) - an optional callback function to be added to the ZIM Ticker - rather than using Ticker.add();    this will be passed frame specific (count, frame, stage, width, height) parameters    count starts at 1 and the stage is updated after this function is called    also see the pauseTicker() method progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading rollover - (default true) activates rollovers touch - (default true) activates touch on mobile - this will be multitouch by default    set to false for no touch on mobile - also see singleTouch parameter to set singleTouch scrollTop - (default false) activates scrolling on older apple devices to hide the url bar align - (default CENTER) for FIT and FILL, the horizontal alignment LEFT, CENTER, RIGHT valign - (default CENTER) for FIT and FILL, the vertical alignment TOP, CENTER, BOTTOM canvasID - (default "myCanvas" or if subsequent frame, myCanvas+randomID) will be set to tagIDCanvas if a tagID is provided - eg. scaling="test", canvasID="testCanvas" rollPerSecond - (default 20) times per second rollover is activated (if rollover parameter is true) delay - (default .03 and 1 for mobile) seconds to resize at load and after orientation change (also see ZIM TIME constant)    some devices are slow to report true width and height    At loading, mobile will be tested right away and then at .1 seconds    the default is to then test again at the delay (default 1 second)    At resize, mobile will be tested every .05 seconds up to the delay    set this to some other time if desired    if set to 0 then no additional test will be done - not even the one at .03 seconds canvasCheck - (default true) check to see if there is canvas support - uses !!window.HTMLCanvasElement gpu - (default false) set to true to use a CreateJS StageGL stage for GPU renderer    note: retina will be turned off if gpu is on otherwise antialiasing really looks bad    See: http://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/ (written before version 1 release) gpuObj - (default null) object with following properties (with defaults) See CreateJS docs on GITHUB:    preserveBuffer (false), antialias (false), transparent (false), premultiply (false), autoPurge (1200) nextFrame - (default null) set to zim Frame object of Frame underneath current Frame to pass events to nextFrame nextStage - (default null) alternative to nextFrame if the stage beneath current Frame is not a ZIM Frame but just a CreateJS Stage allowDefault - (default false - true for tag mode) set to true to allow default mouse, key and scrollwheel events on canvas    See also the zil property of frame that allows you to add and remove these events dynamically (except for mouse swipe scroll and zoom on mobile)    allowDefault of false also sets body overflow to hidden - which is good for full, fit and fill modes    also see allowDefault property loadFailObj - (default result of frame.makeCircles) object that shows if asset() does not exist or did not load withing loadTimeout    This will be given a type property of "EmptyAsset"    Set the loadFailObj property below to null to set no object - but this will yield errors unless each resulting asset() is tested    Set to new Container() to show nothing (but avoid errors) - or new Rectangle(10, 10) to show little black square, etc. sensors - (default false) set to true to capture Frame devicemotion and deviceorientation events - see Events retina - (default true) scales stage to use pixelDensity (sharper when scaling up) and supports Adobe Animate export    may need to set mouse event targets to e.stageX/zim.scaX and e.stageY.zim.scaY    except for using stage.getObjectUnderPoint()    ZIM overrides CreateJS localToGlobal, globalToLocal and localToLocal to accomodate stage scaling    This was a major adjustment to transform(), bezier controls, outline, physics, etc.    set to false to return to traditional PRE ZIM 10.3.0 unscaled stage mouseMoveOutside - (default false) set to true to capture mouse movement outside the stage    see also mouseX and mouseY properties of frame - these work with ZIM retina without adjusting for stage scale captureMouse - (default true) set to false to not use stagemousemove event to set frame.mouseX and frame.mouseY (good with Retina) shim - (default null) used by ZIM SHIM 2 https://zimjs.com/animate/ to create Frame with pre-existing stage and canvas    accepts an object with stage and canvas properties - lets Adobe handle resize maxConnections - (default 10) set the maximum number of concurrent connections.    From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,    so any additional connections may remain in a pending state until the browser opens the connection. maxNum - for sound this is how many instances of the sound can play at once    also can set in asset object maxNum property and loadAssets() and asset() maxNum parameters.    also see sound interrupt parameter singleTouch - set to true for single touch rather than the default multitouch (or touch false)    this will override the touch setting to turn touch to true METHODS loadAssets(assets, path, progress, xhr, time, loadTimeout, outputAudioSprite, crossOrigin, fileType, queueOnly, maxConnections, maxNum) // also accepts ZIM DUO configuration object as single parameter    // see also assets and path parameters of Frame - which share the info below    // see https://zimjs.com/assetlist/ to get an array of many files    assets - a file (url String, asset object or multi-asset object) or files in an Array       each asset String is how you then access the asset with the asset() method of Frame       asset types (from CreateJS PreloadJS): Image, JSON, Sound, SVG, Text, XML             NOTE: as of ZIM Cat 04, SVG will be automatically converted to a Bitmap with and svg property of the original SVG.       asset can also be a ZIM asset object:          {id:"string", src:"filename", path:"dir/", loadTimeout:1, maxNum:num, noCORSonImage:true}          then can use the id to access the asset in the asset() method of Frame          filename will be added to an overall path if a path parameter is provided          or overwritten with a local path if a path property is provided          an asset object with a filename of an absolute filename starting with http will ignore path          loadTimeout (default 8) will override the loadAssets() loadTimeout             this is how many seconds to wait for asset before error and a complete fires even though asset not loaded          maxNum (browser default) is used with sound to specify the maximum number of sounds of the same source to play at one time             this can be used with the interrupt parameter of the play() method             to ignore multiple sounds or start the sound over again instead of playing multiple versions          noCORSonImage (default false) set to true to make an HTML img tag and read it into a ZIM Bitmap to avoid CORS testing             it then uses ZIM expand(0) to add a CreateJS hitArea to the Bitmap allowing it to be interactive and avoid CORS             thanks Disco for the technique             note: this means the Bitmap will be interactive everywhere - not just in opaque areas             note: loading images this way will not count as progress (bytes loaded ratio) in the progress event but do count for fileloaded and complete events       asset can be a ZIM multi-asset object {assets:[], path:"dir/", loadTimeout:1, maxNum:num, noCORSonImage:true}          where the array can hold multiple files that will have the provided properties applied          this is handy for loading assets from multiple directories (added in ZIM Cat 02 - thanks Netanela for the prompting)          eg.          [             {assets:["one.png", "two.png"], path:"images/"},              {assets:["big.mp3", "oof.mp3"], path:"sounds/"}          ]          ** warning - if an asset has the same name as a previous asset, then the later asset id will have the path added to its id          ** for example:          [             {assets:["one.png", "two.png"], path:"images/"},              {assets:["one.png", "man.png"], path:"portraits/"}          ]          ** then asset("one.png") will be the asset in the images folder          ** and asset("portraits/one.png") will be the asset in the portraits folder       asset can also be a font object:          {font:name, src:url, type:string, weight:string, style:string} // with last three properties being optional          eg.          {font: "wildwood", src:"ChurchintheWildwood-Regular.ttf", type:"OpenType"} // type is not needed          {font: "regu", src:"regul-bold.woff", weight:"bold"}          {src:"https://fonts.googleapis.com/css?family=Roboto"}          For google fonts https://fonts.google.com/ you add extra information to the url so the font (family), type, weight and style are ignored          If absolute src is used, path parameter is ignored - otherwise path is added to start of src          After loading, can just use:             var label = new Label("hello", 30, "wildwood") // or whatever the font property is       asset can be an AudioSprite - which is a single sound file and data for sounds within the sound file:          ZIM has a format for the data and so does CreateJS - there is also the parseAudioSprite() method for importing formats          See the parseAudioSound parameter to pre-parse the ZIM format then use the resulting CreateJS format to avoid live parsing (maybe save a millisecond)          ZIM FORMAT:             {src:"audiosprite.mp3", audioSprite:[     // [id, startime(s), endtime(s)]     // prefer this when making audioSprites by hand in Premiere or Audition     ['blackball', 1.041, 2.475],     ['bounce', 3.567, 4.232]             ]}          CREATEJS FORMAT:             {src: "audiosprite.mp3", data:{ // extra data property              audioSprite: [              {id:"sound1", startTime:0, duration:500}, // time in ms              {id:"sound2", startTime:1000, duration:400},              {id:"sound3", startTime:1700, duration: 1000}              ]             }}    path - pass in an optional path String that gets prepended to the asset       when accessing the asset with the asset() method you do NOT include the path       assets with an absolute URL (http[s]://etc.) will ignore path       this will also set the ZIM PATH global to the path       ZIM PATH is used with lazy-loaded images (eg. when not using Frame assets parameter or loadAssets() method)    progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading    xhr (default false or true if Progress is a ProgressBar) set to true to load text and WebAudio (not needed for normal sound mp3, wav, etc.)    time (default 0) is the minimum number of seconds for the complete event to trigger       use this for testing or to always have time to show a loading message    loadTimeout (default 8) is how many seconds to wait for asset before error and a complete fires even though asset not loaded    outputAudioSprite (default false) set to true when passing in a ZIM AudioSprite format to output to the console a CreateJS AudioSprite JSON object        JSON.parse() this object before passing in to loadAssets() - and add single quotes around console output as those are stripped by console    crossOrigin (default "anonymous") - leave at default to load from Amazon S3, etc.       had to add <AllowedMethod>HEAD</AllowedMethod> in CORSRule of CORS configuration on Amazon S3 for fonts       https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors       https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors       and had to edit distribution behaviours for cache header > whitelist and move over Origin       NOTE: this will still not get past CORS if there is no CORS provided       see noCORSonImage property of ZIM asset object for an image solution to bypass CORS    fileType (default null) in cases where the file type cannot be parsed or is parsed incorrectly, this overrides       might have to split up loading as this fileType gets applied to all files loaded       Types are for CreateJS PreloadJS: https://www.createjs.com/docs/preloadjs/classes/LoadQueue.html        createjs.Types.BINARY: Raw binary data via XHR        createjs.Types.CSS: CSS files        createjs.Types.IMAGE: Common image formats        createjs.Types.JAVASCRIPT: JavaScript files        createjs.Types.JSON: JSON data        createjs.Types.JSONP: JSON files cross-domain        createjs.Types.MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest        createjs.Types.SOUND: Audio file formats        createjs.Types.SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet instance.        createjs.Types.SVG: SVG files        createjs.Types.TEXT: Text files - XHR only        createjs.Types.VIDEO: Video objects        createjs.Types.XML: XML data    queueOnly (default false) - set to true to send events only to the Queue object (see below) rather than the Frame       when using queues to accept events, remember that the frame also receives events       if you also have some general frame events for loading, set this parameter to true to avoid accident    maxConnections - (default the Frame maxConnections) set the maximum number of concurrent connections.       From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,       so any additional connections may remain in a pending state until the browser opens the connection.    maxNum - for sound this is how many instances of the sound can play at once       also see sound play() interrupt parameter    RETURNS: a Queue object that can be used for control with multiple loadAssets calls    Each Queue will trigger progress, assetload and complete events    Each Queue will have a preload property to the CreateJS LoadQueue and an isLoading property    The frame also has these events and properties but acts for all loading - so be careful - see the queueOnly parameter    It is recommended to use the Queue any time you use multiple LoadAssets() calls at the same time    You still access assets with frame.asset() as outlined below whether you use the Queue or not asset(file, width, height, maxNum) - access an asset such as an image or sound - see loadAssets() for more on types    file is the string name or url to the file          if the asset was loaded with a string then use the string (less the path if provided)       if the asset was loaded with a full URL then use the full URL here       if the asset uses an asset object with an id then use the id       file can be a |ZIM VEE| value so for instance, an array and asset will pick randomly - or a series, etc.       ** warning, if the assets are loaded with ZIM Multi-asset Objects with assets and path       ** and an asset has the same name as a previous asset, then the later asset id will have the path added to its id    width and height will help the auto-loading (lazy-loading) otherwise, ZIM will recall positioning applied before the asset is loaded       ** otherwise there is no need to add a width and height - only do so to optionally help auto-loading    maxNum - for sound this is how many instances of the sound can play at once - also see sound play() interrupt parameter    ** asset() is available as a global function asset() or if zns (ZIM name space) is true then as zim.asset()    ** if there are two or more frames, then use frame.asset() not asset()    ** traditionally, these have been preloaded into the Frame asset parameter or with Frame loadAssets()    ** As of ZIM Cat, using asset() without preloading will automatically load the asset - thanks Ami Hanya for suggestion     this works only for images and sound and should be used sparingly as each asset has its own preloading     and some things like sprite assets may have issues.    ** As of ZIM ZIM, there is a ZIM PATH constant that can be used to set the path for automatic loading (lazy-loading)     see the docs under ZIM PATH for details    ** asset() will add "complete" and "assetLoad" event to the asset object       if the asset is an image then this is a Bitmap which can be added to the stage, etc.       if the asset is a sound then use asset(file).play();       play has ZIM DUO params of volume, loop, loopCount, pan, offset, delay, interrupt       see the ZIM Docs on Sound (below the Frame) for param information    if the asset is anything else, then it is what it is!    asset() will have a type property depending on what type       for instance, an image will have type "Bitmap" as it is a ZIM Bitmap object       but a lazy-loaded image will have type "Image" as it is actually a Container holding a Bitmap       and its Bitmap can be accessed with the bitmap property - so asset("auto.png").bitmap will access the Bitmap       a lazy-loaded sound will have type "Sound"    asset.getIDs() will return an array of asset IDs.    zim.assets is an object literal that holds all the assets based on ID       consider this to be read only       this is the object that the asset() function calls so usually just use asset() object(name) - get a DisplayObject (for example a Circle or Button) by its name.    ** object() is available as a global function object() or if zns (ZIM name space) is true then as zim.object()    DisplayObjects do not start with a name but can be named if desired. Usually, we use variable names to reference an object    See the DisplayObject name property and the nam() short chainable method to set a name    object.getNames() will return an array of object names that have been set.    any object that is named the same name as another object will overwrite the other object and will not be in the object() list anymore follow(obj, boundary, damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, lag)    moves obj container to keep provided object in middle of stage view    pass in null for obj to stop following    See https://zimjs.com/ten/follow.html - with keys    See https://codepen.io/danzen/pen/gNKQYY - with press    ** supports DUO - parameters or single object with properties below    obj - the Display Object to follow - works well if controlling obj with ZIM Motion Controller (mousedown, keydown, gamebutton, gamestick)       unlike Physics follow() the obj for Frame follow() must be in a container - the container will be moved    boundary - (default stage size) - or use a ZIM Boundary() object to specify x, y, width and height to keep obj inside       see also followBoundary property of Frame to update this boundary in a frame "resize" event function when frame is in "full" scaling mode    damp - (default .05) the damping of the motion - 1 moves faster, 0 not at all    dampY - (default damp) can set to damp vertical movement at a separate rate    leftOffset - (default 0 from left of boundary)    rightOffset - (default 0 from right of boundary) - differs from Physics follow which is distance from 0 to right offset     the object will try and move to leftOffset when moving right and rightOffset when moving left     this counters the damping so that the user can see in the direction of motion     when the object is not being controled it moves to the average between left and right offsets    upOffSet - (default 0 from top of boundary)    downOffSet - (default 0 from bottom of boundary)     same as offsets above but in the y direction    offsetDamp - (default .02) the damping for moving the object to the offset    offsetDampY - (default offsetDamp) - damping for moving the object to the y offset if desired to be different than x    horizontal - (default true) set to false to not follow horizontally    vertical - (default true) set to false to not follow vertically    borderLock - (default false) set to true to stop container at boundary    lag - (default false) set to true to position object back from direction of motion       this gives more view as moving but sort of goes in two directions when motion stops setDefault() - sets the frame to be the default frame    by default ;=) the default frame is the first frame made    the default frame has the stage that addTo(), center(), etc. will use as the default container    a global varible called zdf is also available    as of ZIM ZIM 01, global variables F, S, W, H are provided for frame, stage, width and height of the default frame fullscreen(mode) - set Frame to HTML fullscreen - mode defaults to true - set to false to come out of fullscreen    also see isFullscreen property and two fullscreen events    note: this is nothing to do with "full" scaling mode but rather the Browser window F11 fullscreen    see: https://zimjs.com/expand to go from ZIM "tag" scaling mode to ZIM "fit" scaling mode makeCat(height) - returns a ZIM Cat icon - provide height rather than scaling for better caching if cached    if mobile, the icon will be cached - can uncache() it if desired makeIcon(edges, box, slats, borderColor, borderWidth) - returns a ZIM Z icon    edges defaults to zim.light and is the top and bottom line in the Z    box defaults to zim.dark and is the background box color    slats defaults to the ZIM colors but can be set to any array of five colors (setting true will set to zim.silver)    borderColor and borderWidth default to null - or borderWidth 1 if color set and borderColor black if borderWidth set madeWith(color, text, edges, box, slats, borderColor, borderWidth) - returns a ZIM Z icon with Made With message    color - (default zim.dark) change color of text (pass in clear to hide text)    text - (default: "Made with ZIM") change to desired made with message    other parameters see makeIcon() above makeCircles(radius, multiple) - returns ZIM Circles (centered reg)    radius defaults to 100    multiple defaults to false which will return a ZIM Shape - set to true to return a ZIM Container of ZIM Circles remakeCanvas(width, height) - removes old canvas and makes a new one and a new stage    will have to set your local stage, stageW and stageH variables again update() - call this if frame position is moved on the HTML page    for instance, when a div to left has its display style set to none and the frame shifts over    calling update() will dispatch an update event to any TextArea, Loader or Tag objects    so they resize properly with the new frame.x and frame.y values dispose() - removes canvas, resize listener and stage PROPERTIES type - holds the class name as a String stage - read only reference to the zim Stage - to change run remakeCanvas()    frame gives the stage read only stage.width and stage.height properties    frame gives the stage a frame property that points to the frame that made the stage canvas - a reference to the frame's canvas tag canvasID - a reference to the frame's canvas ID color - the color of the frame background - any css color outerColor - the color of the body of the HTML page - set with styles scaling - holds the scaling mode - FULL, FIT, FILL (or "full", "fit", "fill"), "tag" or "inline"    tag is tag mode with no dimensions and inline is tag mode with dimensions    also see the tag property below if mode is tag or inline tag - the containing tag if scaling is set to an HTML tag id (else null) isDefault - a Boolean to indicate whether the Frame is the default frame (see setDefault() method)    the default frame has the stage that addTo(), center(), etc. will use as the default container    a global varible called zdf is also available isLoading - a Boolean to indicate whether loadAssets() is currently loading assets (also, each queue has an isLoading property) isFullscreen - a Boolean to indicate if Frame is in HTML fullscreen mode - see fullscreen() method and events width - read only reference to the stage width - to change run remakeCanvas() height - read only reference to the stage height - to change run remakeCanvas() scale - read only returns the scale of the canvas - will return 1 for full and tag scale modes mouseX, mouseY - read only value of the mouse x and y positions on the canvas    note: the frame captureMouse parameter must be set to true (default)    note: this value includes the division by the stage scale needed for ZIM Retina    whereas getting the mouse coordinates from a mouse event object does not include division by the stage scale    set frame's mouseMoveOutside parameter to true to capture movement outside the canvas leftMouseDown - read only value as to whether the left mouse button is down    used internally by drag and others to make sure pressup on iFrames is handled when the mouse comes back on the stage    also see "mouseupplus" event mousedownEvent - a reference to the frame "stagemousedown" event - can set frame.off("stagemousedown", frame.mousedownEvent) mousemoveEvent - a reference to the frame "stagemousemove" event - can set frame.off("stagemousemove", frame.mousemoveEvent) orientation - "vertical" or "horizontal" (updated live with orientation change) visibleLeft, visibleTop, visibleRight, visibleBottom - in "fill" scale mode these give window edge locations relative to the stage    can be used to position items like navigation relative to window as the frame resize event is fired    in all scale modes other than "fill", the values are 0, stageW, 0, stageH zil - reference to zil events that stop canvas from shifting or scrolling - also see allowDefaults parameter    can set allowDefault property to false then allow specific defaults by removing zil events - see zil global function    example: window.removeEventListener("keydown", frame.zil[0]); removes keydown preventions (for page up, page down, home, end, etc) allowDefault - set to true to remove zil or false to set zil (see above) also affects body overflow colors: orange, green, pink, blue, brown, yellow, red, purple, silver, tin, grey, lighter, moon, light, dark, darker, white, black, clear (0 alpha), faint (.01 alpha) followBoundary - update with a ZIM Boundary for follow() if "full" mode Frame "resize" event happens, etc. altKey - true if the alt key is being pressed otherwise false ctrlKey - true if the ctrl key is being pressed otherwise false metaKey - true if the meta key (⌘ command on Mac or ⊞ windows key) is being pressed otherwise false shiftKey - true if the shift key is being pressed otherwise false loadFailObj - the object that shows if images are broken - will be given a type property of "EmptyAsset" startTime - datestamp of when frame was made - used internally retina - read-only Boolean as to whether stage (as opposed to the canvas) was scaled for pixelDensity during Frame creation ALSO see F, S, W, H, M global variables which reference the default frame, its stage and width and height, and if on mobile EVENTS "ready" - fired when the stage is made (and state update will be called after dispatched) - also see ready parameter "failed" - fired if no canvas support (and canvasCheck parameter is set to true - which is the default) "resize" - fired on resize of screen "update" - fired when frame.update() is called - read by Loader, TextArea and Tag objects    note: this is for when the frame is moved within an html page    for instance, when a div to the left has its display set to none - then call frame.update(); "orientation" - fired on orientation change "contextmenu" - fired on right click    to prevent the default right click then use    e.preventDefault() in your event function.    see https://zimjs.com/explore/contextmenu.html "keydown" - fired on keydown - just like the window keydown event with eventObject.keyCode, etc.    also stores frame.altKey, frame.ctrlKey, frame.metaKey, frame.shiftKey "keyup" - fired on keyup - just like the window keyup event with eventObject.keyCode, etc. "mouseupplus" - fired when the browser window receives a mouseup event    also fired when the mouse enters the stage from an iFrame and is no longer down.    mouseup, pressup, stagemouseup, etc. do not work when the mouse is up over an iframe or outside an iframe    ZIM drag() makes use of this event to stop the drag if the mouse was up over an iframe or outside the an iframe holding the canvas.    This could have been done with setting events on parent windows but this runs into CORS errors in many cases    This event fires on the bubbling phase so can be ignored if a real press up is in place - for instance:    record a check variable as true when mousedown and false when pressup which also calls an up function.    In a mouseupplus event function, activate the up function only if the check variable is still true.    This will call the up function as the mouse comes back onto the stage    if the mouse was down when leaving the stage and let up outside the iframe the canvas is in - goodness. "wheel" - fired on mousewheel (Window wheel event)    can get eventObject.deltaX and eventObject.deltaY    these vary greatly in value based on Browser    may want to just ask for sign(eventObject.deltaY) and multiply it by a factor    and then perhaps constrain the value - here the scale is constrained between .5 and 5    note - when changing scale, it is better to multiply by a factor rather than add to the scale    eg. circle.scale = constrain(circle.scale*(sign(e.deltaY)>0?.75:1.25), .5, 5); "deviceorientation" - MUST SET Frame sensors parameter to true    fired as device orientation changes:    eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)    eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)    eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)       note rotation.z is 360-alpha compared to the HTML 5 specs       note also that beta, gamma and alpha from the HTML 5 specs are also provided    eg.    var label = new Label().center();    frame.on("deviceorientation", function(e) {       label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;       stage.update();    }); "devicemotion" - MUST SET Frame sensors parameter to true    fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion    eg.    var label = new Label().center();    frame.on("devicemotion", function(e) {       label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;       stage.update();    }); "fullscreenenter" - dispatched going into fullscreen - see fullscreen() method "fullscreenexit" - dispatched if coming out of fullscreen - see fullscreen(false) method "tabfocus" - dispatched when tab gains focus - only dispatched by the zdf (ZIM Default Frame)    ZIM setBlurDetect() is now activated by Frame and used by ZIM in animate(), timeout(), interval(), wiggle() "tabblur" - dispatched when tab loses focus - only dispatched by the zdf (ZIM Default Frame) ASSET EVENTS loadAssets() will trigger these events on the Frame object and on the specific queue (eg. var queue = frame.loadAssets();) NOTE if loadAssets() queueOnly parameter is true, then only the queue receives the events - see queueOnly parameter "progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress (fonts not included)    The event object has a progress property between 0 and 1 "assetload" - fired when an asset loaded with loadAssets() or asset() has loaded (use asset property of event object to get its file and src) (fonts not included) "complete" - fired when all assets loaded with loadAssets() or asset() are loaded "error" - fired when there is a problem loading an asset with loadAssets()    If the assets are loaded in the Frame then the error event must be captured outside the ready event    and if loadAssets() or lazy-load with asset() are used then the error event must be captured outside the complete event    CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 72862 ▶︎ Pic(file, width, height, noCors, style, group, inherit)
Pic(file, width, height, noCors, style, group, inherit)
Pic zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Use Pic() to show an image. There may be a security error when loading images locally for any Canvas app. Please read https://zimjs.com/tips.html#IMAGES for easy solutions. Before ZIM version ZIM 00, asset() or frame.asset() was used to show images. These can still be used if desired. The Pic() class just wraps the asset() call. SEE: https://zimjs.com/zim/assets.html PRELOADING It is recommended that you preload images (along with sounds, etc.) using the Frame() assets and path parameters. Batch loading images is more efficient and the width and height will be available when the Frame() is "ready" or loadAssets() is "complete". Images can also be loaded on demand with frame.loadAssets() at any time - for instance, for a second section of the app. LAZY-LOADING If images are not preloaded then Pic() will use automatic loading (lazy-loading). If width and height are provided, all will go smoothly. If width and height are not provided, ZIM will store various scaling and positioning commands and re-apply the commands once the images are loaded. This happens for center(), centerReg(), pos(), scaleTo(), outline() and perhaps others. This extra work is NOT required if assets are preloaded or a width and height are provided. Some controls like Tile() and Scroller() must have dimensions and will give a warning in the console. In the past there has been issues with cloning lazy-loaded images before they are loaded, but this should work now. Pic will give a "ready" and a "complete" event when loaded. These events are triggered 20 ms after making the object if the object is already preloaded. NOTE Pic is a container with a bitmap inside (see bitmap property). This means that other objects can be added to the Pic object. This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them. If doing this, note that the container has its mouseChildren turned off so when dragging, for instance, the whole pic moves rather than the bitmap inside the pic. To interact with objects inside, set pic.mouseChildren = true. Generally, for clarity, avoid adding objects to Shapes or Pics unless you are used to the mouseChildren setting. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// lazy-load an image in the same directory
new Pic("image.png").center();

// NOTE: the above may give a CORS security error locally
// to easily solve this see https://zimjs.com/tips.html#IMAGES
EXAMPLE
// lazy-load an image in the assets/ directory
new Pic("assets/image.png").center();
EXAMPLE
// lazy-load an image in the assets/ directory using PATH constant
PATH = "assets/"
new Pic("image.png").center();
EXAMPLE
// preload the image in the Frame along with path parameter
new Frame(FIT, 1024, 768, light, grey, ready, "image.png", "assets/");
function ready() {      
   new Pic("image.png").center(); // adds the preloaded assets/image.png
   
   // the PATH would be set to "assets/" by the Frame path parameter
   new Pic("sky.png").addTo(); // would lazy-load assets/sky.png
   
   PATH = "people/";
   new Pic("laura.png").addTo(); // would lazy-load people/laura.png
   new Pic("peter.png").addTo(); // would lazy-load people/peter.png
}
EXAMPLE
// preload all the images above
// the first two will use the path parameter
// the other two are in a different directory so can use an assets object {} with a different path
const assets = ["image.png", "sky.png", {assets:["laura.png", "peter.png"], path:"people/"}];
const path = "assets/";
new Frame(FIT, 1024, 768, light, grey, ready, assets, path);
function ready() {      
   new Pic("image.png").center(); // adds the preloaded assets/image.png
   new Pic("sky.png").addTo(); // adds the preloaded assets/sky.png
   new Pic("laura.png").addTo(); // adds the preloaded people/laura.png
   new Pic("peter.png").addTo(); // adds the preloaded people/peter.png
}

// alternatively the path could have been added to each asset:
assets = ["assets/image.png", "assets/sky.png", "people/laura.png", "people/peter.png"];
// this would be passed into Frame along with no path parameter
// and the assets would then be accessed in the ready event with the path included:
new Pic("asset/image.png").center();
EXAMPLE
const plates = ["plate1.png", "plate2.png", "plate3.png"];
// lazy-load random plate pictures in a Tile

// below would be broken with a warning in the console
// because the tile does not know the plate dimensions
new Tile(new Pic(plates), 4, 4).center();

// below would work because the dimensions of 200, 200 were provided
// however, if the plates are not actually 200,200 then it may look wrong
new Tile(new Pic(plates, 200, 200), 4, 4).center();

// below would work because preloading in Frame() or loadAssets() provides real dimensions
// when the tile is made, the dimensions are known
const load = frame.loadAssets(plates);
load.on("complete", ()=>{
   new Tile(new Pic(plates), 4, 4).center();
   stage.update();
});
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) file - |ZIM VEE| the String file name of the image including file extension for instance, "pic.png"    There is a global PATH constant that can be set to add a path to the start of the file name    for instance setting PATH = "assets/" would then look for "assets/pic.png".    If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant. width - (default null) optionally predict the width of the image    The width will be ignored and the actual width will be used if the image is preloaded    and if lazy-loaded, the width will be replaced with the actual width after the image is loaded.    So the width is only used to tell something like a Tile(), what size to expect before the image is loaded.    To change the width of a Pic, use siz() or sca() methods    or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties. height - (default null) optionally predict the height of the image (see width for similar details) noCors - (default false) set to true to attempt to bypass CORS (cross origin resource sharing) issues.    CORS errors may show up when loading images from other servers that do not have settings saying this is allowed.    Setting noCors to true will try and load the image with a proxy server https://cors.zimjs.com/ so use sparingly.    It is better to try and load the images from your own server or get CORS permissions from the server.    Do not preload the image with this setting - or preload using an asset object with noCORSonImage:true set.    The noCors setting will use image() rather than asset()    All these solutions use https://cors.zimjs.com/https://theurltotheasset.jpg 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 keyOut(color, tolerance, replacement) - remove a certain color in the picture and make it see-through - with a color tolerance between 0-1    the default color is "#389b26" which is a medium dark green    the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color    color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)    replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used     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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String    in this case the type is "Pic" but if the Pic is lazy-loaded then    it starts as type "AC" (Asset Container) if no dimensions are provided    or "ACWD" (Asset Container With Dimensions) until the image is loaded    at which point, the type is set to "Pic" bitmap - reference the the ZIM Bitmap (picture) inside the Pic container file - the filename used src - the source with path and filename - available on complete event image - the HTML image tag - available on complete event item - the CreateJS data item used for preload - available on complete event 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 "complete" and a "ready" event (use either one) when the image is loaded    if preloaded this is dispatched 20 ms after the Pic is made     See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 73122 ▶︎ Aud(file, volume, loop, loopCount, pan, offset, delay, interrupt, maxNum, style, group, inherit)
Aud(file, volume, loop, loopCount, pan, offset, delay, interrupt, maxNum, style, group, inherit)
Aud zim class - extends a createjs.EventDispatcher DESCRIPTION Use Aud() to play a sound with its play() method. The app must be interacted with before a sound can be played. There may be a security error when loading sounds locally for any Canvas app. Please read https://zimjs.com/tips.html#SOUND for easy solutions. Multiple instances of a sound can be played from the same Aud() object. When a sound is played it returns an object that can be used to change that specific instance. Use that object to change the volume, pan, to find out if the sound has looped or is complete or to pause() or stop() the sound. Before ZIM version ZIM 00, asset() or frame.asset() was used to play sounds. These can still be used if desired. The Aud() class just wraps the asset() call. SEE: https://zimjs.com/zim/assets.html PRELOADING It is recommended that you preload sounds (along with images, etc.) using the Frame() assets and path parameters. After the frame loads, sounds can also be loaded on demand with frame.loadAssets(). Batch loading sounds is more efficient and the sound will be ready when the Frame() is "ready" or loadAssets() is "complete". LAZY-LOADING If sounds are not preloaded then Aud() will use automatic loading (lazy-loading). Aud will give a "ready" event when loaded. This event is triggered 20 ms after making the object if the object is already preloaded. The "complete" event is used for when the sound is finished playing (not finished loading). NOTE The sound can be made at any time but the app must be interacted with before the sound can be played. This is a general Browswer rule to stop being bombarded with sounds. It means that you will have to make a start button or a splash page that the user clicks or taps before a background sound can be played. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// There may be a security error when loading sounds locally for any Canvas app.
// Please read https://zimjs.com/tips.html#SOUND for easy solutions.

const click = new Aud("click.mp3");  // lazy-load a click sound
stage.on("stagemousedown", ()=>{
   click.play(); // plays everytime the stage is clicked (sigh)
});
EXAMPLE
// make a backing sound but do not play it
// the user must first interact at least once with a mousedown/click/tap/change
const backing = new Aud({file:"backing.mp3", loop:true});

let backingSound; // this will store the sound that is playing
// make a Toggle button that starts toggled off
new Toggle({label:"SOUND"})
   .sca(.7)
   .pos(30,30,LEFT,BOTTOM)
   .change(e=>{
      // play the sound if it has not played
      // and toggle the instance's paused property if it has been played
      if (!backingSound) backingSound = backing.play();
      else backingSound.paused = !e.target.toggled;
   });   
EXAMPLE
// preload a couple sounds from an assets/ directory (path)
new Frame(FIT, 1024, 768, light, dark, ready, ["sound.mp3", "backing.mp3"], "assets/");
function ready() {

   // show a Pane() to start so we know user has interacted before we play sounds
   
   new Pane(500,200,"START GAME", yellow).show(init); // this calls init when closed
   
   function init() {
      // now the user has interacted to close the pane      
      new Aud("backing.mp3", .3, true).play(); // volume of .3 and looping
      
      // Make sounds only play once and start over when pressed again
      // otherwise, the default is play the sound completely each press.
      // If someone presses a lot - this is a lot of sounds playing at once.
      // If we left the interrupt at "none" the sound would finish before playing again
      // which is not optimal as we want the sound to start each time we press.
      // We could add these to the Aud() parameters but here we use STYLE
      STYLE = {maxNum:1, interrupt:"any"}
      const sound = new Aud("sound.mp3");
      new Circle().center().tap(()=>{
         sound.play();
      });   
   } // end init()   
   
} // end frame ready
EXAMPLE
// lazy-load a sound from a PATH of "assets/"
PATH = "assets/"
const long = new Aud("long.mp3");

// press on the stage - note the true for once at end of event
stage.on("stagemousedown", ()=>{

   const sound = long.play({volume:.2});

   // adjust the sound after...
   timeout(2, ()=>{
      sound.volume = 1;
   });
   timeout(4, ()=>{
      sound.paused = true;
   });
   timeout(6, ()=>{
      sound.paused = false;
   });
   sound.on("complete", ()=>{
      frame.color = red;
      // lazy-load a woot sound from path of assets/ and play twice
      new Aud("woot.wav").play({loopCount:2});
      stage.update();
   });   

}, null, true); // true for once then remove the event
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) file - |ZIM VEE| the String file name of the sound including file extension for instance, "sound.mp3"    There is a global PATH constant that can be set to add a path to the start of the file name    for instance setting PATH = "assets/" would then look for "assets/sound.mp3".    If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant. ** ALL THE PARAMETERS below can also be specified in the play() method (except for maxNum) volume (default 1) - set the volume loop (default false) - set to true to loop forever or a number based on loopCount loopCount (default null) - change to how many times to play the sound    there is no need to set loop if loopCount is set pan (default 0) - set towards -1 to pan left and towards 1 to pan right    may not work locally but should work on server offset (default 0) - elapsed time in seconds to start playing delay (default 0) - time to wait before sound is started interrupt (default "none") - how to interrupt a sound if a sound with the same source is played    and the maximum number of instances of the sound are already playing    ** must have maxNum set - see the maxNum property or the Frame(), loadAssets() or asset() maxNum parameter    "none" - do not interrupt the previously playing sound(s) (with the same source)    "any" - interrupt the previously playing sound(s) (with the same source)    "early" - interrupt only the previously playing sound that has progressed the least    "late" - interrupt only the previously playing sound that has progressed the most    ** thank you CreateJS and SoundJS for providing these options maxNum (default null) set to a number of instances that a sound can play.    The default is as many as the browser can handle (hundreds).    maxNum can also be set as Frame(), loadAssets() and asset() parameters.    Setting this to 1 will only play one instance of the sound at a time.    The interrupt setting determines what happens if the sound is played again while it is playing    if "none" is set (default) then it will not interrupt the current instance    if "any" is set then it will play the sound again from the start, etc. 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 play(volume, loop, loopCount, pan, offset, delay, interrupt) - play the sound    *** Supports ZIM DUO - regular parameters or single configuration object {}    *** returns a CreateJS AbstractSoundInstance (of course). Detailed docs are here:    *** https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html    *** See the methods and properties listed after the play parameters    volume (default 1) - set the volume    loop (default false) - set to true to loop forever or a number based on loopCount    loopCount (default null) - change to how many times to play the sound       there is no need to set loop if loopCount is set    pan (default 0) - set towards -1 to pan left and towards 1 to pan right       may not work locally but should work on server    offset (default 0) - elapsed time in seconds to start playing    delay (default 0) - time to wait before sound is started    interrupt (default "none") - how to interrupt a sound if a sound with the same source is played        and the maximum number of instances of the sound are already playing       ** must have maxNum set when sound is loaded - see the Aud(), Frame(), loadAssets() or asset() maxNum parameter       "none" - do not interrupt the previously playing sound(s) (with the same source)       "any" - interrupt the previously playing sound(s) (with the same source)       "early" - interrupt only the previously playing sound that has progressed the least       "late" - interrupt only the previously playing sound that has progressed the most       ** thank you CreateJS and SoundJS for providing these options     ABSTRACT SOUND INSTANCE The return result of the play() makes a CreateJS AbstractSoundInstance var sound = Aud("sound.mp3").play(); // sound is an AbstractSoundInstance // note: if lazy-loaded then the result of a play() before the sound has loaded // will be a proxy object with only volume and pan properties and will dispatch a complete event // methods, other properties and events will only be available on a play() after the sound is loaded METHODS (of AbstractSoundInstance) ** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html stop() - stops the sound and sets the time to 0 play() - plays the sound again - usually, the sound is already playing from the sound.play()    but if it is stopped - this will start it again     PROPERTIES type - holds the class name as a String    in this case the type is "Aud" but if the Aud is lazy-loaded then    it starts as type "AC" (Asset Container) and then when loaded becomes "Aud" file - the filename used src - the src used - path and file - available on complete event item - the CreateJS data item used for preload - available on complete event PROPERTIES (of AbstractSoundInstance) ** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html paused - set to true to pause and false to unpause muted - set to true to mute - but sound keeps playing or false to unmute volume - the volume with 1 being the default pan - set from -1 (full left) to 1 (full right) with 0 in middle (may not work until on server) position - set to place in sound in milliseconds (ZIM TIME constant does not affect this) duration - the length of the sound in milliseconds EVENTS dispatches a "ready" or "complete" event when the sound is loaded    if preloaded this is dispatched 20 ms after the Aud is made    Note: the AbstractSoundInstance below also dispatches a "complete" event when the sound is finished playing     EVENTS (of AbstractSoundInstance) ** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html complete - dispatched when the sound has reached the end - after any loops (not before) loop - dispatched when the sound loops (but not at end of last loop - that is complete)    currently triggering at the first play too. CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 73424 ▶︎ Vid(file, width, height, volume, loop, type, style, group, inherit)
Vid(file, width, height, volume, loop, type, style, group, inherit)
Vid zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Use Vid() to show a video. Use the play() method to start the video when loaded. The user must interact with the app before play() will work. There may be a security error when loading video locally for any Canvas app. Please read https://zimjs.com/tips.html#VIDEO for easy solutions. Vid will add an HTML 5 video and source tag in behind the scene and pipe the video into a ZIM Bitmap which is shown in the Vid container. Vid lets you pause() and play() and get the duration or get and set the currentTime and volume. A source property stores the HTML 5 video for more methods, properties and events. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video Vid also has a keyOut() method to key out a color from the video. SEE: https://zimjs.com/zim/assets.html Vid will give a "ready" and a "complete" event when ready to play. NOTE Vid is a container with a bitmap inside (see bitmap property). This means that other objects can be added to the Vid object. This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them. If doing this, note that the container has its mouseChildren turned off so when dragging, for instance, the whole vid moves rather than the bitmap inside the vid. To interact with objects inside, set vid.mouseChildren = true. Generally, for clarity, avoid adding objects to Shapes or Vids unless you are used to the mouseChildren setting. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// video is a container that will have a width of 800 and height of 600
// The video will be FIT inside these dimensions and centered by default
// Also see align and valign parameters
// At the start, it will have a type of "AC" once it loads it will be "Vid"
const video = new Vid("video.mp4", 800, 600)
   .center() // using 800x600
stage.on("stagemousedown", () => {
   video.play();
});
EXAMPLE
// video is a container that will have a width of 800 and height of 600
// The video will be stretched to 800 by 600 - possibly changing the aspect ratio
const video = new Vid("video.mp4", 800, 600, FULL)
   .center() // using 800x600
stage.on("stagemousedown", () => {
   video.play();
});
EXAMPLE
// video is a container with no width and height to start
// once the video is loaded the container will take the dimensions of the video
// and the center() will be called again to properly center the container
// just like lazy loading Pic().
const video = new Vid("video.mp4")
   .center() // will automatically be re-centered after loading
stage.on("stagemousedown", () => {
   video.play();
});
EXAMPLE
// make the video cover the stage
const video = new Vid("video.mp4", W, H, FILL)
   .center()
stage.on("stagemousedown", () => {
   video.play();
});
EXAMPLE
// load a video from the assets/ folder
PATH = "assets/"

// either provide width and height before scaleTo() or use the ready event
const video = new Vid("video.mp4", W, H).center();

video.on("ready", ()=>{
   // video.keyOut("#01b03f", .2);  // optional keyOut a green color
   // do not play the video until we interact with the app
   const pane = new Pane(600,200,"VIDEO ON CANVAS!").show(()=>{
      // this (the callback) runs when the pane is closed
      video.play();
   });
});

// toggle the pause of the video
video.on("mousedown", ()=>{
   // note videoPaused property
   // not paused (which is for animation)
   video.pause(!video.videoPaused);
});
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) file - |ZIM VEE| the String file name of the image including file extension for instance, "pic.png"    There is a global PATH constant that can be set to add a path to the start of the file name    for instance setting PATH = "assets/" would then look for "assets/pic.png".    If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant. width - (default null) optionally predict the width of the video for placement before being loaded    The width will be ignored once the video is loaded.    To change the width of Vid, use siz() or sca() methods    or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties. height - (default null) optionally predict the height of the Vid (see width for similar details) scaling - (defaut FIT) how to scale video into dimensions if provided - otherwise    FIT - scales video to fit inside width and height keeping aspect ratio - also see align and valign    FILL - scales video to surround width and height keeping aspect ratio - also see align and valign    FULL - scales video width to width and video height to height possibly stretching aspect ratio volume - (default 1) the volume of the video - also see the volume property loop - (default true - although intended this to be false so will be false in next version) set to true to loop the video align - (default CENTER) for FIT and FILL, the horizontal alignment LEFT, CENTER, RIGHT valign - (default CENTER) for FIT and FILL, the vertical alignment TOP, CENTER, BOTTOM type - (default "video/mp4") the mime type or codec of the video    see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter 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 play() - play the video pause(state) - pause the video if the state is true (default) or play again if state is false keyOut(color, tolerance, replacement) - remove a certain color in the video and make it see-through - with a color tolerance between 0-1    the default color is "#389b26" which is a medium dark green    the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color    color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)    replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used clone(exact) - clone the object - if using ZIM VEE values for file, use exact true to copy the picked ZIM VEE option. dispose() - dispose the video including HTML tags, etc. 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String    in this case the type is "Vid" but if no dimensions are provided    it starts as type "AC" (Asset Container)    and when the video is ready to play (see "complete" or "ready" event), the type is set to "Vid" file - the filename used duration - get the duration of the video in seconds currentTime - get or set the current time in seconds volume - get or set the volume of the video videoPaused - get if the video is paused bitmap - reference to the the ZIM Bitmap inside the container source - reference to the HTML video tag with all sorts of methods, properties and events    use this for the fastSeek() method if currentTime property is too slow    see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 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 "complete" and a "ready" event (use either one) when the image is loaded.    if preloaded this is dispatched 20 ms after the Vid is made. Also see HTML video events: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events which has a "complete" event on the source property... so use myVideo.source.addEventListener("complete", ()=>{});     See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 73770 ▶︎ SVG(svg, width, height, bitmap, splitTypes, geometric, showControls, interactive, style, group, inherit)
SVG(svg, width, height, bitmap, splitTypes, geometric, showControls, interactive, style, group, inherit)
SVG zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Use SVG() to show an SVG tag or file on the Canvas. There are two options, the default is as a Bitmap or choose an SVGContainer with Blob, Squiggle, and transformable shapes. Before ZIM version ZIM 00, svgToBitmap() or SVGContainer() was used to show SVGs. These can still be used if desired. The SVG() class just wraps these. SEE: https://zimjs.com/zim/assets.html NOTE ZIM has Squiggle() and Blob() which often can replace the need for SVG() and has many more benefits. These can be made with ZIM Pizzazz 4 at https://zimjs.com/paths Or an SVG path can be passed directly to the points parameter of a Blob or Squiggle. Squiggles and Blobs let the user:    turn the paths editable    animate objects on the path    add Beads to the path    animate the path    shape animate the path to another path    do hitTestPath on the path We recommend using SVG only when there is already an SVG that image you want to use. PRELOADING It is recommended that you preload SVG files using the Frame() assets and path parameters. After the frame loads, SVG files can also be loaded on demand with frame.loadAssets(). Batch loading SVGs is more efficient and the width and height will be available when the Frame() is "ready" or loadAssets() is "complete". LAZY-LOADING If SVGs are not preloaded then SVG() will use automatic loading (lazy-loading). If width and height are provided, all will go smoothly. If width and height are not provided, ZIM will store various scaling and positioning commands and re-apply the commands once the images are loaded. This happens for center(), centerReg(), pos(), scaleTo(), outline() and perhaps others. This extra work is NOT required if assets are preloaded or a width and height are provided. Some controls like Tile() and Scroller() must have dimensions and will give a warning in the console. In the past there has been issues with cloning lazy-loaded objects before they are loaded, but this should work now. SVG will give a "ready" and a "complete" event when loaded. These events are triggered 20 ms after making the object if the object is already preloaded. NOTE SVG is a container with a bitmap inside (see bitmap property) or if the bitmap option is not selected there are other shapes inside. This means that other objects can be added to the SVG object. This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them. If doing this, note that the container has its mouseChildren may be turned off so when dragging, for instance, the whole SVG moves rather than the bitmap inside the SVG. To interact with objects inside, set pic.mouseChildren = true. Generally, for clarity, avoid adding objects to Shapes, Pics SVGs unless you are used to the mouseChildren setting. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// lazy-load an SVG
new SVG("file.svg").center().drag();
EXAMPLE
// assuming there is an SVG tag on the page - could be display:none
new SVG(zid("svgTagID")).center().drag();
EXAMPLE
Find the SVG in an assets/ folder
PATH = "assets/"
// Tile a lazy-loaded SVG with dimensions - otherwise Tile would give a console warning
new Tile(new SVG("file.svg", 100, 100), 4, 4)).center();

// but the dimensions might not be right and the tile could look odd once the SVGs are loaded
// would be better to preload - see next example
EXAMPLE
// pre-load and Tile an SVG
new Frame(FIT, 1024, 768, light, grey, ready, "file.svg", "assets/");
function ready() {
   new Tile(new SVG("file.svg"), 4, 4)).center();
}
EXAMPLE
// add an SVGContainer from an SVG string
// this would make a simple Squiggle line with editable points
// see the Docs under SVGContainer for more complex examples and added information
// note the h t t p : should be edited to not have spaces - just avoiding Doc auto linking
const svg = `<svg  width="150" height="200" xmlns="h t t p ://www.w3.org/2000/svg">
<path id="lineAB" d="M 0 0 l 150 200" stroke="red" stroke-width="3" fill="none" />
</svg>`;
new SVG(svg, null, null, false).center();
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) svg - |ZIM VEE| the String file name of the SVG including file extension for instance, "pic.svg"    or an SVG tag either directly as a string or as a reference to an HTML tag - ie. zid("svgID")    There is a global PATH constant that can be set to add a path to the start of the file name    for instance setting PATH = "assets/" would then look for "assets/pic.svg".    If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant. width - (default null) optionally predict the width of the SVG    The width will be ignored and the actual width will be used if the SVG is preloaded    and if lazy-loaded, the width will be replaced with the actual width after the SVG is loaded.    So the width is only used to tell something like a Tile(), what size to expect before the SVG is loaded.    To change the width of an SVG, use siz() or sca() methods    or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties. height - (default null) optionally predict the height of the SVG (see width for similar details) bitmap - (default true) this will show the SVG as a Bitmap (still nicely scalable!)    or set to false to use an SVGContainer() which converts the SVG to Blob, Squiggle and ZIM Shapes with transforms.    This allows for editable paths - but perhaps not all aspects of SVGs are supported such as CSS styles on SVGs.    Alternatively, a single SVG path can be passed to a ZIM Blob() or Squiggle() and SVG() can be avoided. ** these parameters are NOT for the bitmap option but rather for the SVGContainer splitTypes - (default false) - set to true to split different types of paths into separate objects geometric - (default true) - set to false to load Rectangle and Circle objects as Blob objects showControls - (default true) set to false to start with controls not showing interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shapes 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 keyOut(color, tolerance, replacement) - for Bitmap setting - remove a certain color in the SVG and make it see-through - with a color tolerance between 0-1    the default color is "#389b26" which is a medium dark green    the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color    color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)    replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used     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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String    in this case the type is "SVG" but if the SVG is lazy-loaded then    it starts as type "AC" (Asset Container) if no dimensions are provided    or "ACWD" (Asset Container With Dimensions) until the SVG is loaded    at which point, the type is set to "SVG" bitmap - reference the the ZIM Bitmap inside the container.    this exists for both the bitmap setting and the SVGContainer setting    but with the SVGContainer setting, the bitmap is not added to the container svg - reference to the SVG code file - the filename used src - the source with path and filename - available on complete event item - the CreateJS data item used for preload - available on complete event 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 "complete" and a "ready" event (use either one) when the SVG is loaded.    if preloaded this is dispatched 20 ms after the SVG is made.     See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 74091 ▶︎ Fonts - loaded into Frame()
Fonts - loaded into Frame()
Fonts For a Label object or components with labels DESCRIPTION Custom fonts can be loaded as assets using a ZIM Font Object that lists the font name and src url. {font:"name", src:"url"} The font is then available to Label and components with labels. ZIM wraps the CreateJS PreloadJS library to offer simplified loading. NOTE system fonts can be used without loading the font. ************** DO NOT make a new Font() - rather, pass the font information into the Frame assets parameter. Or load fonts when desired with Frame loadAssets() and wait for a complete event. In either case, the font will then be available for Labels ************** EXAMPLE
new Frame({ready, assets:{font:"Reuben", src:"Reuben.otf"}, path:"assets/"});
function ready() {   
   new Label("Custom Font", 30, "Reuben").center();   
}
EXAMPLE
// use a Google font https://fonts.google.com/ and apply it with a STYLE
// Google fonts use the family from the URL instead of the font property
const assets = [{src:"https://fonts.googleapis.com/css?family=Roboto"}, "someImage.png"];
const path = "assets/";
new Frame(FIT, 1024, 768, red, dark, ready, assets, path);
function ready() {
   STYLE = {font:"Roboto"};
   new Label("Custom Google Font").center();
   new Label("Second Custom Google Font").center().mov(0,100);
}
PROPERTIES ** the following properties are available in a ZIM Font object: {font:name, src:url, type:string, weight:string, style:string} // with last three properties being optional name: the name of the font - can be any string src: the filename of the font if a path parameter is provided or the url to the font if not type: (optional) the font type such as "truetype", "opentype", etc. weight: (optional) the weight of the font such as "bold" or other. See https://www.w3.org/TR/css-fonts-3/#font-weight-numeric-values style: (optional) the style of the font such as "italic" ** the last two can be applied with parameters in the Label CLOSE ▲PAGE ▤CODE ▤
EXPAND 74147 ▶︎ Tilt - device motion and orientation events
Tilt - device motion and orientation events
Tilt "devicemotion" and "deviceorientation" Frame events DESCRIPTION The Frame has a "devicemotion" event to capture device tilt and a "deviceorientation" to capture device rotation (like a compass) Also see the SensorsAsk() class which will handle asking for permission on iOS devices. NOTE For either event the Frame sensors parameter MUST be set to true EXAMPLE
// for capturing tilt on device (rotation about an axis)
// also SEE the SensorsAsk example below
// also set Frame sensors parameter to true
// and be on a mobile device
const label = new Label().center();
frame.on("deviceorientation", e=>{
   label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
   stage.update();
});
EXAMPLE
// on iOS, the sensors must be allowed first - this example works for all devices
const sensorType = "deviceorientation"; // or "devicemotion"
const ask = new SensorAsk(init, sensorType);
function init(yes) {
   // if the user answers yes to the SensorAsk
   const errorPane = new Pane(500,200,"SENSOR not available",yellow);
   if (yes) {      
      // use the sensors       
      label.text = decimals(e.rotation.x) +","+ decimals(e.rotation.y) +","+ decimals(e.rotation.z);
      stage.update();
   } else { // answered no to SensorAsk dialog      
      errorPane.show();
   }   
}
EXAMPLE
// for shaking motion - ALSO see the SensorAsk example above for iOS
// and replace "deviceorientation" with "devicemotion"
// and replace e.rotation.x, etc. with e.acceleration.x etc.
// also set Frame sensors parameter to true
// and be on a mobile device
const label = new Label().center();
frame.on("devicemotion", e=>{
   label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;
   stage.update();
});
EVENTS "devicemotion" - for tilt (also set Frame sensors parameter to true)    fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion "deviceorientation" - for rotation (also set Frame sensors parameter to true)    fired as device orientation changes:       eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)       eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)       eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)          note rotation.z is 360-alpha compared to the HTML 5 specs          note also that beta, gamma and alpha from the HTML 5 specs are also provided CLOSE ▲PAGE ▤CODE ▤
EXPAND 74218 ▶︎ SensorAsk(callback, sensorType, color, backgroundColor, style, group, inherit)
SensorAsk(callback, sensorType, color, backgroundColor, style, group, inherit)
SensorAsk zim class - extends a zim.Pane which extends a zim.Container DESCRIPTION A circular confirmation widget to ask the user if they want to use the sensors. This is before the Browser will ask for permission. The reason is that iOS does not allow sensors until confirmed. If not in iOS then will just pass through the test. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// on iOS, the sensors must be allowed first
const sensorType = "deviceorientation"; // or "devicemotion"
const ask = new SensorAsk(init, sensorType);
function init(yes) {
   // if the user answers yes to the SensorAsk
   const errorPane = new Pane(500,200,"SENSOR not available",yellow);
   if (yes) {      
      // use the sensors
      const label = new Label({text:"test on mobile", align:CENTER}).centerReg();
      frame.on("devicemotion", e=>{
         // use the sensors       
         label.text = decimals(e.rotation.x) +","+ decimals(e.rotation.y) +","+ decimals(e.rotation.z);
         stage.update();
      })
   } else { // answered no to SensorAsk dialog      
      errorPane.show();
   }   
}
PARAMETERS - accepts ZIM DUO regular parameters in order or a configuration object with parameters as properties callback - the function to callback when sensor is accepted - will receive true for accept or false for no sensor made available sensorType - (default "deviceorientation") either deviceorientation or devicemotion color - (default zim.dark) the font and border color of the widget backgroundColor - (default zim.lighter) the backgroundColor of the widget METHODS dispose() - dispose the SensorAsk ALSO see all the methods of a zim Pane() including hide() 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 - name of class as a string sensorType - the type of sensor requested label - reference to the zim Label yes - reference to the zim Button with YES no - reference to the zim Button with NO ALSO see ZIM Pane for properties such as: backdropColor, etc. 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. CLOSE ▲PAGE ▤CODE ▤
EXPAND 74364 ▶︎ Colors - orange, green, pink, blue, brown, yellow, purple, red, black, darker, dark, grey, gray, tin, silver, fog, mist, light, moon, lighter, white, faint, clear
Colors - orange, green, pink, blue, brown, yellow, purple, red, black, darker, dark, grey, gray, tin, silver, fog, mist, light, moon, lighter, white, faint, clear
Colors - orange, green, pink, blue, brown, yellow, purple, red, black, darker, dark, grey, gray, tin, silver, fog, mist, light, moon, lighter, wh¡te, faint, clear zim constants (lowercase) DESCRIPTION ZIM colors for convenience - such as blue, green, dark, etc. Traditional HTML colors as strings can also be used such as "blue", "tomato", etc. Also available are HEX numbers as strings such as "#333" or "#cc0000" and RGB and RGBA of 0-255 values for red, green, blue with 0 being no color and 255 being full color then alpha from 0 to 1 as a decimal with 0 being transparent to 1 being opaque. These are in a string such as "rgb(0,0,255)" or "rgba(0,0,0,.2)" (.2 is alpha) NOTE ZIM colors started off as properties of the frame so frame.blue but the frame properties have now been removed as they are stored on the zim namespace or as globals FAINT AND CLEAR faint is "rgba(0,0,0,.01)" which is the faintest color that can be interacted with clear is "rgba(0,0,0,0)" which is invisble but cannot be interacted with However, clear can be used along with expand(0) to be able to interact with an object where the expand(0) (or whatever padding is desired) adds a CreateJS hitArea. DARKEN AND LIGHTEN ZIM has added darken() and lighten() methods to the JS String prototype to handle easy darkening and lightening of colors This is very handy in desiging. https://zimjs.com/docs.html?item=darken https://zimjs.com/docs.html?item=lighten COLOR BLENDS ZIM has toColor() to move one color towards another color https://zimjs.com/docs.html?item=toColor ALPHA ZIM has toAlpha() to set the alpha of colors https://zimjs.com/docs.html?item=toAlpha GRADIENTS ZIM DisplayObjects accept GradientColor(), RadialColor() and BitmapColor() objects - see docs under the CODE module for info. https://zimjs.com/docs.html?item=GradientColor https://zimjs.com/docs.html?item=RadialColor https://zimjs.com/docs.html?item=BitmapColor 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 Circle(100, blue).center();
// is the same as
new Circle(100, "#50c4b7").center();

// ZIM colors (or HTML colors) can have alpha adjusted as follows:
new Circle(100, blue.toAlpha(.5)).center();

// colors can be darkened or lightened using darken() or lighten()
new Circle(100, blue.darken(.5)).center();

// colors can be blended using toColor()
new Circle(100, blue.toColor(red, .2)).center();
CLOSE ▲PAGE ▤CODE ▤
EXPAND 74459 ▶︎ Constants - FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, START, END, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN, AUTO, DEFAULT, AVE, GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH, SINE, SQUARE, TRIANGLE, SAW, ZAP
Constants - FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, START, END, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN, AUTO, DEFAULT, AVE, GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH, SINE, SQUARE, TRIANGLE, SAW, ZAP
Constants - FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, START, END, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN, AUTO, DEFAULT, AVE, GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH, SINE, SQUARE, TRIANGLE, SAW, ZAP zim constants DESCRIPTION ZIM positioning, data and sound constants for convenience if desired. These are all equal to strings with lowercase values. So using TOP is the same as using "top" Positioning: FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, START, END TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH, UP, DOWN, AUTO, DEFAULT, AVE Data: GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH Sound: SINE, SQUARE, TRIANGLE, SAW, ZAP NOTE there are a set of constants at the start of the CONTROLS module as well NOTE for START and END, see DIR constant under CONTROLS module. 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 Tip("hello", RIGHT, MIDDLE).show();
// same as
new Tip("hello", "right", "middle").show();
CLOSE ▲PAGE ▤CODE ▤
EXPAND 74519 ▶︎ Globals - F, S, W, H, M
Globals - F, S, W, H, M
Globals - F, S, W, H, M zim globals DESCRIPTION These are not all the global variables in ZIM. If zns is not set to true, then all classes in ZIM and functions in the CODE module are global. Also note the Constants in the docs listing above. And the set of constants in the CONTROLS module. ADDED ZIM ZIM 01: F - the ZIM default frame - also there is a zimDefaultFrame and zdf global variable made - but F is easier.    the ZIM default frame is the first frame made - or the frame that last has the setDefault() method called S - the Stage of the default frame - this will be the stage that addTo(), center(), etc. get added to if no container is provided W - the width of the default frame - this will be updated automatically in FULL mode on window resize. H - the height of the default frame - this will be updated automatically in FULL mode on window resize. M - false if not on mobile, otherwise reports the mobile device "iOS", "android", etc. - can also use mobile(). There are many previous examples that declare frame, stage, stageW and stageH this technique can still be used but you are welcome to use the F, S, W, H 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) EXAMPLE
new Frame({ready});
function ready() {
   const c = new Circle().pos(W*.2, H*.2);
   F.on("keydown", e=>{
      c.sca(rand(.5,3));
      S.update();
      zog(M); // false if on desktop/laptop
   });
}
CLOSE ▲PAGE ▤CODE ▤
ZIM DISPLAY
-------------- BASE DISPLAY EXPAND 07782 ▶︎ Stage(canvasID, touch, singleTouch)
Stage(canvasID, touch, singleTouch)
Stage zim class - extends a createjs.Stage which extends a createjs.Container DESCRIPTION An extension of a createjs.Stage that includes read only type, width and height properties, loop and hitTestGrid methods. When using zim.Frame, there should be no reason to make a zim.Stage. This was put in place to match the ZIM TypeScript typings for stage width and height. Also see https://www.createjs.com/docs/easeljs/classes/Stage.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 stage = new Stage("canvasID");
PARAMETERS canvasID - (default null) string ID for canvas tag touch - (default false) set to true for touch on mobile    will be multitouch unless singleTouch is set to true singleTouch - (default false) set to true for single touch    will override touch setting and turn touch to true but with single touch METHODS loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details     see the ZIM Display Methods loop() for details hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)    see the ZIM Display Methods hitTestGrid() for details disposeAllChildren() - remove and dispose all children See the CreateJS Easel Docs for Stage methods, such as: clear, update, toDataURL And all the Container methods such as: on, off, setBounds, getBounds, globalToLocal, etc. PROPERTIES frame - if made with ZIM Frame then frame points to the frame that made the stage type - holds the class name as a String width - read only width set by ZIM Frame height - read only height set by ZIM Frame ALSO see the CreateJS Easel Docs for Stage properties, such as: autoClear, canvas, nextStage, etc. and all the Container properties, such as: children, mouseChildren, filters, cacheCanvas, etc. Note: also makes a partial zdf allowing circle.center() to work but will be overwritten if an actual Frame is made EVENTS See the CreateJS Easel Docs for Stage events, such as: mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc. and all the Container events such as: click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 07940 ▶︎ StageGL(canvasID, options, touch, singleTouch)
StageGL(canvasID, options, touch, singleTouch)
StageGL zim class - extends a zim.Stage which extends a createjs.Stage DESCRIPTION An extension of a zim.Stage for WebGL support See ZIM Stage and https://www.createjs.com/docs/easeljs/classes/StageGL.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 stage = new StageGL("canvasID", {preserveBuffer:true, antialias:true});
PARAMETERS canvasID - (default null) string ID for canvas tag options - (default null) an object literal with the following properties    FROM https://www.createjs.com/docs/easeljs/classes/StageGL.html preserveBuffer (default false)    If true, the canvas is NOT auto-cleared by WebGL (the spec discourages setting this to true). This is useful if you want persistent draw effects.    antialias (default false)       Specifies whether or not the browser's WebGL implementation should try to perform anti-aliasing. This will also enable linear pixel sampling on power-of-two textures (smoother images).    transparent (default false)       If true, the canvas is transparent. This is very expensive, and should be used with caution.    premultiply (default false)       Alters color handling. If true, this assumes the shader must account for pre-multiplied alpha. This can help avoid visual halo effects with some assets, but may also cause problems with other assets.    autoPurge (default 1200)        How often the system should automatically dump unused textures with purgeTextures(autoPurge) every autoPurge/2 draws. See purgeTextures for more information. touch - (default false) set to true for touch on mobile    will be multitouch unless singleTouch is set to true singleTouch - (default false) set to true for single touch    will override touch setting and turn touch to true but with single touch METHODS loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details     see the ZIM Display Methods loop() for details hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)    see the ZIM Display Methods hitTestGrid() for details disposeAllChildren() - remove and dispose all children See the CreateJS Easel Docs for StageGL methods: https://www.createjs.com/docs/easeljs/classes/StageGL.html PROPERTIES frame - if made with ZIM Frame then frame points to the frame that made the stage type - holds the class name as a String width - read only width set by ZIM Frame height - read only height set by ZIM Frame See the CreateJS Easel Docs for Stage properties: https://www.createjs.com/docs/easeljs/classes/StageGL.html Note: also makes a partial zdf allowing circle.center() to work but will be overwritten if an actual Frame is made EVENTS See the CreateJS Easel Docs for StageGL events, such as: mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc. and all the Container events such as: click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
EXPAND 08102 ▶︎ Container(a, b, c, d, style, group, inherit)
Container(a, b, c, d, style, group, inherit)
Container zim class - extends a createjs.Container DESCRIPTION A Container object is used to hold other display objects or other containers. You can then move, rotate, scale and skew the container and all objects inside will transform accordingly. You can apply an event on a container and use the target property of the event object to access the object in the container that caused the event or use the currentTarget property of the event object to access the container itself. Containers do not have bounds unless some items in the container have bounds - at which point the bounds are the combination of the bounds of the objects with bounds. You can manually set the bounds with setBounds(x,y,w,h) - read the CreateJS docs. Or pass in width and height, or boundsX, boundsY, width, height to have Container set bounds. Manually set bounds will not update automatically unless you setBounds(null). NOTE All the ZIM shapes and components extend the Container. This means all shapes and components inherit the methods and properties below and indeed, the Container inherits all the createjs.Container methods and properties. See the CreateJS documentation for x, y, alpha, rotation, on(), addChild(), etc. 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 container = new Container().loc(100,100);

// demonstration of adding drag() to a Container
const rect = new Rectangle(100, 100, "blue")
   .addTo(container); // add rectangle to container
const circle = new Circle(40, "red")
   .center(container) // add the circle to the container and center
container.drag(); // will drag either the rectangle or the circle
container.drag({all:true}); // will drag both the rectangle and the circle

// below will reduce the alpha of the object in the container that was clicked (target)
container.on("click", e => {e.target.alpha = .5; stage.update();})
// below will reduce the alpha of all the objects in the container (currentTarget)
container.on("click", e => {e.currentTarget.alpha = .5; stage.update();})
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** Container has a, b, c, d parameters to set x, y, width and height    There are two settings that are more common than providing all four parameters:       1. provide no parameters to make a Container with bounds that grow with content.       2. provide a and b only to make a Container with a width and height (and bounds with x and y of 0)    Here is what happens when you provide 1, 2 or all of the a,b,c,d parameters: a - (default null) - width and height will be equal to parameter a (x and y will be 0)    or provide a ZIM Boundary() object or createjs Rectangle() object with x, y, width and height properties a, b - (default null) - the width and height (x and y will be 0)    this is the normal way to make a container with a starting width and height a, b, c, d - (default null) - the x, y, width and height of the bounds    if parameter a is not set, then the Container will take bounds that grow with its content    the bounds of the Container can be set at any time with setBounds(a, b, c, d)    if the bounds are set, then the Container bounds will not change as content is added    the bounds can be removed with setBounds(null) and the Container will get auto bounds 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 * This class has all the DISPLAY METHODS introduced in ZIM 4TH * the methods are available to all ZIM Display objects that extend a ZIM Container * 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    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    width - (default getBounds().width) the width of the chache - or null if first two parameters are provided    height - (default getBounds().height) the height of the chache - or null if first two parameters are provided    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    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 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    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 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 hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - clones the container, its properties and all its children    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if a Container holds a new Circle(20,[blue,green])    then its clone might be blue or green    If exact is set to true then the clone will be whatever color was picked for the original circle disposeAllChildren() - removes and disposes all children but leaves the container (see also CreateJS removeAllChildren() which does not dispose them) dispose(disposing) - removes from parent, removes event listeners - must still set outside references to null for garbage collection    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(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** common to all DisplayObjects that extend a Container such as ZIM Shapes and Components type - holds the class name as a String group - used when the object is made to add STYLE with the group selector (like a CSS class) ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object draggable - set to true for a default drag() and false for a noDrag() level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex() depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods ** the following are convenience Effects that run a ZIM MultiEffect() ** these can use a lot of processing when animating - see Docs for effects() ** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object hue - the tint of an object between -180 and 180 with 0 being no change    Also see the keyOut() method of Bitmap(), Pic() and SVG() that has a replacement color parameter saturation - the amount of color of an object between -100 and 100 with 0 being no change brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change contrast - the crispness of an object between -100 and 100 with 0 being no change ALSO see the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scale, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc. EVENTS See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 08502 ▶︎ Shape(a, b, c, d, graphics, optimize, style, group, inherit)
Shape(a, b, c, d, graphics, optimize, style, group, inherit)
Shape zim class - extends a createjs.Shape DESCRIPTION ZIM Shape lets you draw dynamic shapes beyond the ZIM provided shapes. You make a new shape object and then draw in its graphics property using similar commands to the HTML Canvas commands (and Flash Bitmap drawing). See the CreateJS Easel Shapes and Graphics docs: http://www.createjs.com/docs/easeljs/classes/Graphics.html ALSO SEE: https://zimjs.com/docs.html?item=Generator for dynamically drawing into shapes like Processing (P5js) ALSO SEE: https://zimjs.com/docs.html?item=Squiggle,Blob for odd shapes and user adjustable shapes ALSO SEE: https://zimjs.com/docs.html?item=Pen for dynamic drawing of lines ALSO SEE: https://zimjs.com/docs.html?item=Connectors for dynamic connections // these mean we rarely use Shape directly but all of above were made in ZIM with Shape NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) NOTE as of ZIM 10.6.0 the tiny API is available right on the Shape (no need for graphics) EXAMPLE
// NEWER CODE
// Uses the tiny API (see options down below) right on the ZIM Shape
// for example: f() is fill() and dr() is drawRect()
// s() is beginStroke(), ss() is setStrokeStyle(), mt() is moveTo(), lt() is lineTo()

// draw a red rectangle into a shape
new Shape().f(red).dr(0,0,200,100).addTo();
// but it would be easier to use
// new Rectangle(200, 100, red).addTo();

// we can draw lines, etc. (but also see the ZIM Line object)
new Shape().s(blue).ss(5).mt(200,200).lt(300,300).addTo();

// note - we can draw as much as we want in the same shape
EXAMPLE
// OLDER CODE
// The first example uses a tiny API (see options below)
// The traditional full commands are available on the graphics object:
const shape = new Shape().addTo();
shape.graphics.beginFill(red).drawRect(0,0,200,100);

// or often we stored the graphics object in a variable g
const g = shape.graphics;
g.beginStroke(blue).moveTo(200,200).lineTo(300,300);
EXAMPLE
// to change a color or stroke after it has been made use command:
const shape = new Shape().addTo();
const strokeColor = shape.s(red).command;
shape.dr(50,50,100,100);
stage.update();
timeout(1, ()=>{
   strokeColor.style = blue;
   stage.update();
});
// This seems a little complex which is why ZIM provides many basic shapes
// Rectangle, Circle, Triangle, Squiggle, Blob, Poly, Line, Flare
// that can be adjusted dynamically with properties
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** Shape supports three different sets of parameters as follows: a - (default null) - width and height equal to parameter a (x and y will be 0) a, b - (default null) - the width and height (x and y will be 0) a, b, c, d - (default null) - the x, y, width and height of the bounds graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)    or just use the graphics property of the shape object (like usual) optimize - (default false) set to true to not store graphics methods directly on Shape    this means the shapes graphics property will need to be used to access f(), s(), ss(), etc. 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 The following shortcuts to CreateJS graphics methods are provided (as long as optimize is false) See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters mt()   moveTo lt()   lineTo a()    arc at()   arcTo bt()   bezierCurveTo ct()   curveTo qt()   quadraticCurveTo (same as curveTo) r()    rect cp()   closePath c()    clear f()    beginFill lf()   beginLinearGradientFill rf()   beginRadialGradientFill bf()   beginBitmapFill ef()   endFill ss()   setStrokeStyle sd()   setStrokeDash s()    beginStroke ls()   beginLinearGradientStroke rs()   beginRadialGradientStroke bs()   beginBitmapStroke es()   endStroke dr()   drawRect rr()   drawRoundRect rc()   drawRoundRectComplex dc()   drawCircle 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    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    width - (default getBounds().width) the width of the chache - or null if first two parameters are provided    height - (default getBounds().height) the height of the chache - or null if first two parameters are provided    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    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    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 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    set recursive to false to have clone share graphic property 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(), placeReg(), pos(), alp(), rot(), setMask(), etc. ALSO see the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String command - save a previously chained operation as a command    then can use the command to change the operation later (see example above) group - used when the object is made to add STYLE with the group selector (like a CSS class) ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object draggable - set to true for a default drag() and false for a noDrag() level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex() depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods ** the following are convenience Effects that run a ZIM MultiEffect() ** these can use a lot of processing when animating - see Docs for effects() ** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object hue - the tint of an object between -180 and 180 with 0 being no change saturation - the amount of color of an object between -100 and 100 with 0 being no change brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change contrast - the crispness of an object between -100 and 100 with 0 being no change ALSO see the CreateJS Easel Docs for Shape properties, such as: graphics, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, etc. EVENTS See the CreateJS Easel Docs for Shape events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 08826 ▶︎ Bitmap(image, width, height, left, top, scale, style, group, inherit)
Bitmap(image, width, height, left, top, scale, style, group, inherit)
Bitmap zim class - extends a createjs.Bitmap DESCRIPTION Makes a Bitmap object from an image source (image, video or canvas). It is best to use the assets and path parameters of ZIM Frame or the loadAssets() method of Frame to preload the image and then use the asset() method to access the Bitmap. See the ZIM Frame class and asset example on the ZIM Frame page of templates. 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 Frame({ready, assets:"logo.jpg"});
function ready() {
   const logo = new Pic("logo.jpg").center(); // logo is a Pic with a bitmap property that is a Bitmap   
   const logo2 = new Pic("logo.jpg").loc(100,100);
}
EXAMPLE
// turn a container of circles into a Bitmap
const circles = new Container(stageW, stageH).addTo();
loop(400, ()=>{
   new Circle(rand(200), [pink,green,blue,yellow,purple], dark).center(circles);
});
const pic = new Bitmap(circles).center().drag();
circles.dispose();

// previous to ZIM 10.8.0 we needed to use the cacheCanvas:
var pic = new Bitmap(circles.cache().cacheCanvas).center().drag();
EXAMPLE
// fill a Bitmap with noise:
const noise = new Noise();
// empty Bitmap size 200, 200
const bmp = new Bitmap(null,200,200).center();
// we fill the bitmap starting from top left going across in the inner loop,
// then down, then across, etc. until we get to bottom right.
const f = 50; // used to make noise bigger or smaller - see the blob comment below
for (let y = 0; y < bmp.height; y++) {
   for (let x = 0; x < bmp.width; x++) {
      // the noise methods return a number from -1 to 1
      // by adding 1 we get a number between 0 and 2 then divide by 2
      // and we multiply this by 255 to get a number between 0 and 255
      let value = (noise.simplex2D(x, y)+1)/2 * 255;
      // or get blobs by smoothing and adjusting frequency:
      // var value = smoothStep((noise.simplex2D(x/f, y/f)+1)/2, .3,.35) * 255;
      // imageData is four values per pixel
      // the red, green, blue and alpha
      // in one big long array - each value will be constrained to between 0 and 255
      // this i value will increase by 4 each time
      // then we write the same value for red, green, blue to get a shade of grey
      let i = (x + y * bmp.width) * 4;
      bmp.imageData.data[i] = value; // red (0-255)
      bmp.imageData.data[i + 1] = value; // green (0-255)
      bmp.imageData.data[i + 2] = value; // blue (0-255)
      bmp.imageData.data[i + 3] = 255; // alpha (0-255)
   }
}
bmp.drawImageData();
EXAMPLE
// applying filters
const bitmap = frame.asset("statue.jpg");
bitmap.filters = [new createjs.BlurFilter(25, 25, 1)];
bitmap.cache().center();
EXAMPLE
// getting the color at point(100, 100) on the Bitmap
const bitmap = frame.asset("statue.jpg").cache();
const ctx = bitmap.cacheCanvas.getContext('2d');
const data = ctx.getImageData(100, 100, 1, 1).data;
const color = "rgba("+data.join(", ")+")";
EXAMPLE
// a Base64 image:
const image = "data:image/png;base64,longlistofcharacters";
const logo;
Bitmap.fromData(image, bitmap=>{
   logo = bitmap.center();
   stage.update();
});
EXAMPLE
const thumbs = [];
const cols = 5;
const rows = 5;

const image = asset("yourimage.jpg");
const w = image.width/cols;
const h = image.height/cols;
loop(rows, r=>{
   loop(cols, c=>{
      // make Bitmap show a different part of the main image each time
      // note: width, height, left, top
      // NOT x, y, width, height like Container
      // left and top specifiy where in an image
      // to start the picture at 0,0 in the Bitmap
      thumbs.push(new Bitmap(image, w, h, c*w, r*h));
   });
});
const tile = new Tile(thumbs, cols, rows, 0, 0, true).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) image - an HTML image URL (may not load right away - see Frame loadAssets)    or as of 10.8.0 a DisplayObject - this will be turned into a cacheCanvas    and then the DisplayObject turned back to its previous cached setting width - (default image width or 100) the width of the resulting Bitmap - will potentially crop an image    see also height, left and top parameters    which allow part of an image to be drawn into the Bitmap    and is handy rather than masking to cut up an image into squares for instance height - (default image height or 100) the height of the resulting Bitmap left - (default 0) where on the source image to start the left of the image top - (default 0) where on the source image to start the top of the image scale - if making a Bitmap from a DisplayObject, this will scale the object before it is cached for better resolution    the resulting bitmap will be the scaled size 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 keyOut(color, tolerance, replacement) - remove color from Bitmap and a tolerance between 0-1    the default color is "#389b26" which is a medium dark green    the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color    color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)    replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used fromData(data, callback) - STATIC method so use the Bitmap class directly: Bitmap.fromData()    The callback will receive a reference to the Bitmap after 50ms or 100ms.    There is no event for making a Bitmap from base64 for instance - so this will have to do. drawImageData(x, y, sourceX, sourceY, sourceWidth, sourceHeight) - draws the Bitmap's imageData data to the Bitmap    NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture    See the imageData property which should be set before using the drawImageData() method    ZIM calls a putImageData method for the HTML Canvas and then transfers this to the Bitmap    See also https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData - but let ZIM do the work...    Usually just leave the parameters blank    x - (default 0) where to start putting the drawing in the x    y - (default 0) where to start putting the drawing in the y    sourceX - (default 0) where in the imageData to start using the data in the x    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    ** 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    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    width - (default getBounds().width) the width of the chache - or null if first two parameters are provided    height - (default getBounds().height) the height of the chache - or null if first two parameters are provided    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. 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection    if this is a cloned bitmap then the original asset("image.png") will still exist unless it is disposed.     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. PROPERTIES type - holds the class name as a String file - if loaded as an asset this is the file name imageData - data for the pixels stored in a data property of an ImageData object    NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture    The data property is an one dimensional Array with consecutive red, green, blue, alpha values (0-255) for each pixels    eg. 0,0,0,255,255,255,255,255 is a black pixel with 1 alpha and a white pixel with 1 alpha    You set this before calling the Bitmap drawImageData() method    See also https://developer.mozilla.org/en-US/docs/Web/API/ImageData - but let ZIM do the work group - used when the object is made to add STYLE with the group selector (like a CSS class) ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object draggable - set to true for a default drag() and false for a noDrag() level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex() depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods ** the following are convenience Effects that run a ZIM MultiEffect() ** these can use a lot of processing when animating - see Docs for effects() ** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object hue - the tint of an object between -180 and 180 with 0 being no change saturation - the amount of color of an object between -100 and 100 with 0 being no change brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change contrast - the crispness of an object between -100 and 100 with 0 being no change ALSO see the CreateJS Easel Docs for Bitmap properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, etc. EVENTS See the CreateJS Easel Docs for Bitmap events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS
EXPAND 09282 ▶︎ Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, label, frame, style, group, inherit)
Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, label, frame, style, group, inherit)
Sprite zim class - extends a createjs.Sprite DESCRIPTION A Sprite plays an animation of a spritesheet which is a set of images layed out in one file. You play the Sprite with the run() method. This animates the Sprite over a given time with various features like playing a labelled animation, playing animation series, wait, loop, rewind and call functions. This actually runs a ZIM animation and animates the frames. SEE: https://zimjs.com/interactiveanimation/ https://zimjs.com/spritesheet/ https://zimjs.com/spritesheet/skateboard.html https://codepen.io/danzen/pen/yEKbbR https://codepen.io/danzen/pen/VdXzLV https://zimjs.com/zide/ https://zimjs.com/explore/sidescroller.html (with keyboard) NOTE A ZIM Sprite handles both an evenly tiled spritesheet - use cols and rows and an un-evenly tiled spritesheet - use the json parameter. The json can come from TexturePacker for instance exported for EaselJS/CreateJS CreateJS Easel Sprite and SpriteSheet docs: http://www.createjs.com/docs/easeljs/classes/Sprite.html http://www.createjs.com/docs/easeljs/classes/SpriteSheet.html You can optionally pass in an existing createjs.SpriteSheet as a parameter. When you do so, all other parameters are ignored. ** JSON hash and JSON array formats are now supported (Phaser formats) ** See https://www.codeandweb.com/free-sprite-sheet-packer NOTE You can use CreateJS gotoAndPlay(), play(), etc. but we found the framerate could not be kept with other animations or Ticker events running. So we recommend using the ZIM Sprite run() 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
// inside Frame template
// boom.png is a sprite sheet found online
// It has 8 columns and 6 rows that we can visually count
// We can enter a total parameter if it does not end evenly in the grid
// A graphics editor (like Photoshop) could be used to see
// if there is an offset or spacing, etc. and enter those as parameters
// In this case, we do not need to do any of this - just enter the cols and rows

frame.on("complete", ()=>{
   const spriteImage = new Pic("boom.png");

   const animation = new Sprite({
      image:spriteImage,
      cols:8,
      rows:6,
      animations:{mid:[10,20], end:[30,40]} // optional animations with labels
      // see CreateJS SpriteSheet docs for the various animation format as there are a few different ones!
   });
   animation.center();
   animation.run(2); // plays the frames of the Sprite over 2 seconds (master time)

   // OR use the label to play the frames listed in animations parameter
   animation.run(1, "mid");

   // OR run a series of animations
   // by passing an array of label objects to the label parameter
   // these each have a time so the master time is ignored
   // they can also have any of the run() parameters
   // if you provide an array of labels, you cannot rewind the overall animation
   animation.run(null, [
      {label:"mid", time:1},
      {label:"end", time:.5, loop:true, loopCount:5, call:function(){zog("loops done");}},
      {startFrame:10, endFrame:20, time:1}
   ]);

   // OR can call a function when done
   animation.run(1, "mid", function(){
      stage.removeChild(animation);
      stage.update();
   });

   // OR can loop the animation
   animation.run({time:2, loop:true}); // see run() parameters for more
});
EXAMPLE
// using Sprite as a texture atlas - or spritesheet of different images
// see: https://zimjs.com/explore/fruit.html
// load in assets and path
new Frame({ready, assets:["fruit.png", "fruit.json"], path:"assets/"});
function ready() {
   new Sprite({json:"fruit.json", label:"apple"}).center();
}
EXAMPLE
// Here is an example with CreateJS SpriteSheet data
// robot.png is a sprite sheet made by ZOE based on a Flash swf
// you can also make your own with Photoshop or Texture Packer

frame.loadAssets("robot.png");
frame.on("complete", ()=>{

   // using ZOE to export swf animation to spritesheet data
   // spritesheet data uses the image name, not the Bitmap itself
   const image = new Pic("robot.png").image;
   const spriteData = {
      "framerate":24,
      "images":[image],
      "frames":[[0, 0, 256, 256, 0, -54, -10], many more - etc.],
      "animations":{}
   };
   const animation = new Sprite({json:spriteData});
   animation.center();
   animation.run(2); // note, duration alternative to framerate
});

OR
// load in data from external JSON
frame.loadAssets(["robot.json", "robot.png"]);
// ... same as before
const animation = new Sprite({json:"robot.json"});
// ... same as before

// see CreateJS SpriteSheet docs for the format of the JSON file
// including various animation formats
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 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 offsetX - (default 0) the pixels from the left edge to the frames offsetY - (default 0) the pixels from the top edge to the frames spacingX - (default 0) the horizontal spacing between the frames spacingY - (default 0) the vertical spacing between the frames width - (default image width) the width including offset and spacing for frames height - (default image height) the height including offset and spacing for frames animations - (default null) an object literal of labels holding frames to play    {label:3, another:[4,10]}    run(1, "label") would play frame 3 for a second    run(1, "another") would play frames 4 to 10 for a second    {unordered:{frames:[1,2,3,22,23,24,"anotherLabel",5,6], next:prevLabel}}    There are also ways to set speeds - but would recommend dividing into simple labels    and using the label series technique available with the run() method json - (default null) a JSON string for a CreateJS SpriteSheet    or use a string filename to a preloaded JSON file (in Frame or loadAssets())    If you pass in a json parameter, all other parameters are ignored    NOTE: remember that JSON needs quotes around the animation properties above:    {"label":3, "another":[4,10]}    JSON hash and JSON array formats from TexturePacker are supported as well as the createjs/easeljs format    See https://www.codeandweb.com/free-sprite-sheet-packer for instance id - (default randomly assigned) an id you can use in other animations - available as sprite.id    use this id in other animations for pauseRun and stopRun to act on these as well globalControl - (default true) pauseRun and stopRun will control other animations with same id spriteSheet - (default null) pass in a CreateJS SpriteSheet to build a Sprite from that label - (default null) pass in a label to stop on initially - to play from a label use the run({label:val}) method frame - (default zimDefaultFrame) specify a Frame other than the default frame 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 run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, tweek, id, globalControl)    The run() method animates the Sprite over an amount of time    Would recommend this method over the CreateJS play() and gotoAndPlay()    methods because the framerate for these get overwritten by other stage.update() calls    With run() you get other nice ZIM animate features as well as follows:    Returns the object for chaining    Can be paused with pauseAnimate(true) or unpaused with pauseAnimate(false)    Can be stopped with stopAnimate() on the Sprite    supports DUO - parameters or single object with properties below    time (default 1) - the time in seconds to run the animations (the master time)    label (default null) - a label specified in the Sprite animations parameter       if this is an array holding label objects for example:       [{label:"run", time:1}, {label:"stand", time:2}]       then the sprite will play the series with the times given and ignore the master time       Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)       then this will be the last of the series to run       rewind is not available on the outside series but is available on an inside series    call - (default null) the function to call when the animation is done    params - (default target) a single parameter for the call function (eg. use object literal or array)    wait - (default 0) seconds to wait before doing animation    waitedCall - (default null) call the function after a wait time if there is one    waitedParams - (default null) parameters to pass to the waitedCall function    loop - (default false) set to true to loop animation    loopCount - (default 0) if loop is true how many times it will loop (0 is forever)    loopWait - (default 0) seconds to wait before looping (post animation wait)    loopCall - (default null) calls function after loop and loopWait (not including last loop)    loopParams - (default target) parameters to send loopCall function    loopWaitCall - (default null) calls function after at the start of loopWait    loopWaitParams - (default target) parameters to send loopWaitCall function    rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) (not available on label series)    rewindWait (default 0) seconds to wait in the middle of the rewind    rewindCall (default null) calls function at middle of rewind after rewindWait    rewindParams - (default target) parameters to send rewindCall function    rewindWaitCall (default null) calls function at middle of rewind before rewindWait    rewindWaitParams - (default target) parameters to send rewindCall function    rewindTime - (default time) set to a time in seconds to adjust the time to rewind    rewindEase - (default null) see ease parameter for options for rewind ease       note - this goes backwards - so "bounceOut" would happen at the end of the rewind    startFrame - (default null - or 0) the frame to start on - will be overridden by a label with frames    endFrame - (default null - or totalFrames) the frame to end on - will be overridden by a label with frames    tweek - (default 1) a factor for extra time on rewind and loops if needed    id - (default randomly assigned) an id you can use in other animations - available as sprite.id       use this id in other animations for pauseRun and stopRun to act on these as well    globalControl - (default true) pauseRun and stopRun will control other animations with same id    pauseOnBlur - (default true) pause the sprite when the window is not seen or set to false to keep playing the sprite 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 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 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 Sprite methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. PROPERTIES type - holds the class name as a String id - an id that you can use in other animations to also be controlled by pauseRun() and stopRun() frame - get and set the current frame of the Sprite normalizedFrame - if animations have CreateJS speeds applied, zim handles these by making extra frames    for example, if a speed is given of .5 then two frames are made (min resulution is .1) normalizedFrames - an array of total frames after being normalized - really for internal usage totalFrames - get the total frames of the Sprite - read only animations - the animations data with labels of frames to animate running - is the sprite animation being run (includes both paused and unpaused) - read only runPaused - is the sprite animation paused (also returns paused if not running) - read only    note: this only syncs to pauseRun() and stopRun() not pauseAnimate() and stopAnimate()    note: CreateJS has paused, etc. but use that only if running the CreateJS methods    such as gotoAndPlay(), gotoAndStop(), play(), stop() draggable - set to true for a default drag() and false for a noDrag() group - used when the object is made to add STYLE with the group selector (like a CSS class) ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object draggable - set to true for a default drag() and false for a noDrag() level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex() depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods ** the following are convenience Effects that run a ZIM MultiEffect() ** these can use a lot of processing when animating - see Docs for effects() ** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object hue - the tint of an object between -180 and 180 with 0 being no change saturation - the amount of color of an object between -100 and 100 with 0 being no change brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change contrast - the crispness of an object between -100 and 100 with 0 being no change ALSO see the CreateJS Easel Docs for Sprite properties, such as: currentFrame, framerate, paused, currentAnimation, currentAnimationFrame, spriteSheet, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, etc. EVENTS See the CreateJS Easel Docs for Sprite events, such as: animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 09973 ▶︎ MovieClip(mode, startPosition, loop, labels, style, group, inherit)
MovieClip(mode, startPosition, loop, labels, style, group, inherit)
MovieClip zim class - extends a createjs.MovieClip DESCRIPTION A MovieClip adds timelines to a Container. The timelines are animate() zimTween properties. The zimTween property returns a CreateJS Tween object. Primarily made to support Adobe Animate MovieClip export. *Consider this experimental for the moment... NOTE to use animate() on a MovieClip, add the MovieClip to a Container and animate() the Container otherwise the animate() may advance the MovieClip. 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 movieClip = new MovieClip();
const circle = new Circle(20, blue).animate({
   props:{scale:3}, time:.1, rewind:true, loop:true
});

// Time is in frames NOT in ms - so 100 frames at the Ticker.framerate 60 fps by default is almost 2 seconds
// To change the Ticker's framerate use setFPS(mobile, desktop) method
// If you use one number then both mobile and desktop are set to that fps.
// The defaults are 60 fps mobile (as of ZIM Cat 04) and 60 fps desktop

movieClip.timeline.addTween(circle.zimTween);
movieClip.play();
movieClip.center();
stage.on("stagemousedown", ()=>{
movieClip.paused = !movieClip.paused;
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) // from the CreateJS MovieClip docs: http://www.createjs.com/docs/easeljs/classes/MovieClip.html mode - (default "independent") or single_frame (based on startPosition) or synched (syncs to parent) startPosition - (default 0) the start position of the MovieClip (*could not get to work) loop - (default true) set to false not to loop (*did not seem to loop so use loop:true in zim.animate()) labels - (default null) declare label property with position value    eg. {explode:20} to use with gotoAndPlay("explode") rather than gotoAndPlay(20) 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 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 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 MovieClip methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. PROPERTIES type - holds the class name as a String draggable - set to true for a default drag() and false for a noDrag() group - used when the object is made to add STYLE with the group selector (like a CSS class) ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object draggable - set to true for a default drag() and false for a noDrag() level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex() depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods ** the following are convenience Effects that run a ZIM MultiEffect() ** these can use a lot of processing when animating - see Docs for effects() ** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object hue - the tint of an object between -180 and 180 with 0 being no change saturation - the amount of color of an object between -100 and 100 with 0 being no change brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change contrast - the crispness of an object between -100 and 100 with 0 being no change ALSO see the CreateJS Easel Docs for MovieClip properties, such as: currentFrame, totalFrames, currentLabel, duration, framerate, labels, loop, mode, paused, startPosition, timeline, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, parent, etc. EVENTS See the CreateJS Easel Docs for MovieClip events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
EXPAND 10115 ▶︎ SVGContainer(svg, splitTypes, geometric, showControls, interactive, style, group, inherit)
SVGContainer(svg, splitTypes, geometric, showControls, interactive, style, group, inherit)
SVGContainer zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Parses SVG and adds items to a ZIM Container. Items are created as ZIM Shapes: Circle, Rectangle, Blob, Squiggle. If geometric is true then Circle and Rectangle are used otherwise Blob is used. Items can be accessed using svgcontainer.getChildAt(0), etc. See: https://zimjs.com/svg/ See: https://zimjs.com/explore/svgcontainer.html ALSO see SVG() class under Frame module. An SVG path string can be passed directly to a Squiggle or Blob points parameter and so avoiding the SVGContainer - see ZIM Squiggle and Blob WARNING: this should be considered experimental The idea is that paths from SVG can be made editable in ZIM or animation, dragging, or Label along paths can be accommodated As such, not all SVG features will work - no CSS, Text, Gradients, DropShadows, etc. It is possible that these will be added at some point See also the ZIM svgToBitmap() function under META to get an exact image of the SVG Thank you https://github.com/colinmeinke/svg-arc-to-cubic-bezier for the Arc conversion 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 svgContainer = new SVGContainer(asset("sample.svg")).addTo();

// OR

const svg = `<svg  width="150" height="200" xmlns="h t t p ://www.w3.org/2000/svg">
<path id="lineAB" d="M 0 0 l 150 200" stroke="red" stroke-width="3" fill="none" />
</svg>`;
const svgContainer = new SVGContainer(svg).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) svg - an SVG file loaded into an asset() or SVG text splitTypes - (default false) - set to true to split different types of paths into separate objects geometric - (default true) - set to false to load Rectangle and Circle objects as Blob objects showControls - (default true) set to false to start with controls not showing interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shapes 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 processPath(path) - path is an SVG path string - returns a ZIM Blob or Squiggle points array 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 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES svg - a reference to the SVG text type - holds the class name as a String 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊
-------------- ZIM SHAPES EXPAND 11175 ▶︎ CustomShape(x, y, w, h)
CustomShape(x, y, w, h)
CustomShape zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Used internally to make ZIM Shapes - Circle, Rectangle, Triangle, etc. Holds the following properties in common: color, colorRange, borderColor, borderWidth, thickness, dashed, dashedOffset, corner Holds the following functions in common: (most methods applied through ZIM 4TH methods) setColorRange, cloneAll(), linearGradient (depreciated), radialGradient (depreciated) NOTE this is NOT a generic Shape - see the zim.Shape() class for that. EXAMPLE
// would recommend just extending a Container() for custom shapes / objects
// unless properties listed above are needed over multiple projects
// but it could be done with matching various private properties, etc.
// also note that a Blob can make just about any shape...
const Smile = function(color) {
   this.super_constructor(-100,-20,200,70);
   this._color = color;
   this.shape = new Shape().addTo(this);
   // this is an example of how ZIM changes shape color
   // will need to go through and do similar things for borderColor, etc.
   this.colorCommand = this.shape.f(this._color).command;
   this.shape.mt(-100,-20).bt(0,70,0,70,100,-20);
}
extend(Smile, CustomShape);

const s = new Smile(red).center();
timeout(1, function () {
   s.color = blue;
   stage.update();
});
SEE - ZIM shapes for details. CLOSE ▲PAGE ▤CODE ▤
EXPAND 11408 ▶︎ Circle(radius, color, borderColor, borderWidth, dashed, percent, percentClose, strokeObj, style, group, inherit)
Circle(radius, color, borderColor, borderWidth, dashed, percent, percentClose, strokeObj, style, group, inherit)
Circle zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a circle shape inside a container. The registration and origin will be the center. NOTE mouseChildren is turned to false for all zim Shape containers. 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 Circle(50, "red").center();

// or with 10 pixel grey stroke
const circle = new Circle(50, "red", "#666", 10).center();

// change the color of the circle to a radial gradient fill
circle.color = new RadialColor([yellow,green], [0, .7], 0, 0, 20, 0, 0, 50);

// make a half circle - or any percent of a circle
new Circle({radius:200, color:pink, percent:50}).center();
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) 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)    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. percent - (default 100) set to a percentage of a circle (arc) - registration stays at radius center, bounds shrink to arc percentClose - (default true) set to false to not close the border of a circle with percent set strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    // note, not all applicable to a Circle - perhaps just ignoreScale...    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale 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 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    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy of the shape    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object cloneAll(exact, style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)    exact (default false) in theory will copy ZIM VEE values as they are in the original    see main class for style, group, inherit parameters 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - gives access to the circle shape color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    depreciated - see ZIM GradientColor, RadialColor and BitmapColor borderColor - get and set the stroke color borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html radius - gets or sets the radius.    The radius is independent of scaling and can be different than the width/2    Setting the radius redraws the circle but any current scaling is kept percentage - get or set the percent of the circle (see percent parameter)    NOTE not percent property which interferes with animate percent 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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 11639 ▶︎ Rectangle(width, height, color, borderColor, borderWidth, corner, dashed, strokeObj, style, group, inherit)
Rectangle(width, height, color, borderColor, borderWidth, corner, dashed, strokeObj, style, group, inherit)
Rectangle zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a rectangle shape inside a container. The registration and origin will be top left corner. NOTE mouseChildren is turned to false for all zim Shape containers. 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 Rectangle(200, 100, "blue").center();

// or with rounded corners
new Rectangle({width:200, height:100, color:"blue", corner:20}).center();

// or with individual corners
new Rectangle({width:100, height:100, corner:[50,0,50,0]}).center();

// or with skewed corners
// this will have a radius of 50 in the horizontal but 20 in the vertical
new Rectangle({width:100, height:100, corner:[50,20]}).center();

// or a combination of corner values and skewed values
new Rectangle({width:100, height:100, corner:[0, 50, [10,50], [40, 20]}).center();

// or with 2 pixel white stroke
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();
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) 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) 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    can also be an array of [topLeft, topRight, bottomRight, bottomLeft]    can also be an array of [horizontal, vertical] which skews each corner    can also be a combination array of values and skew arrays    [topLeft, [horizontal, vertical], bottomRight, [horizontal, vertical]] dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)    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. strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale 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 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    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy of the shape    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)    exact (default false) in theory will copy ZIM VEE values as they are in the original    see main class for style, group, inherit parameters 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - gives access to the rectangle shape color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    depreciated - see ZIM GradientColor, RadialColor and BitmapColor borderColor - get and set the stroke color borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html corner - get or set the corner or array of corners (see corner parameter) dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 11878 ▶︎ Triangle(a, b, c, color, borderColor, borderWidth, corner, center, adjust, dashed, strokeObj, style, group, inherit)
Triangle(a, b, c, color, borderColor, borderWidth, corner, center, adjust, dashed, strokeObj, style, group, inherit)
Triangle zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a triangle shape inside a container using three line lengths. Passing one length parameter makes an equilateral triangle. Passing two length parameters makes an isosceles triangle. Passing -1 as the last length parameter makes a 90 degree triangle. NOTE mouseChildren is turned to false for all zim Shape containers. 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 Triangle(200, null, null, "green").center();

// all three sides specified - tall pointy triangle with yellow stroke of 10 pixels
new Triangle(100, 200, 200, "green", "yellow", 10).center();

// here we adjust so rotation looks better
const tri = new Triangle({a:200, color:"green", adjust:30})
   .center()
   .animate({obj:{rotation:360}, time:3, ease:"linear", loop:true});

// here we fill the triangle with a linear gradient color
tri.color = new GradientColor([green, blue ,green], [.2, .5, .8], 0, 0, tri.width, 0);
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) 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) 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 can also be an array of [bottomLeft, bottomRight, top] center - (default true) puts the registration point to the center adjust - (default 0) pixels to bring center towards vertical base    the actual center is not really the weighted center dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)    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.    strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped ignoreScale set to true will draw the specified line thickness regardless of object scale 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 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 Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy of the shape exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)    exact (default false) in theory will copy ZIM VEE values as they are in the original    see main class for style, group, inherit parameters exact (default false) in theory will copy ZIM VEE values as they are in the original 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - gives access to the triangle shape color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    depreciated - see ZIM GradientColor, RadialColor and BitmapColor borderColor - get and set the stroke color borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html corner - get or set the corner or array of corners (see corner parameter) dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset) see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html one, two, three - read only - points with x, y properties for bottom left, bottom right, top right 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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 12156 ▶︎ Poly(radius, sides, pointSize, color, borderColor, borderWidth, dashed, strokeObj, style, group, inherit)
Poly(radius, sides, pointSize, color, borderColor, borderWidth, dashed, strokeObj, style, group, inherit)
Poly zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a regular polygon with radius like a Circle. The number of sides can be set as well as a pointSize that will make star-like shapes The registration and origin will be the center. NOTE mouseChildren is turned to false for all zim Shape containers. 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 Poly(200, 5, 0, pink).center(); // pentagon

new Poly(200, 5, .6, pink).center(); // five point star
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) ;-) 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) 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)    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. strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale 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 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    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy of the shape    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)    exact (default false) in theory will copy ZIM VEE values as they are in the original    see main class for style, group, inherit parameters 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String radius - gets or sets the radius.    The radius is independent of scaling and can be different than the width/2    Setting the radius redraws the circle but any current scaling is kept sides - get or set the sides of the shape pointSize - get or set the point size of the shape (can be animated too) shape - gives access to the poly shape color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    depreciated - see ZIM GradientColor, RadialColor and BitmapColor borderColor - get and set the stroke color borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 12379 ▶︎ Line(length, thickness, color, startHead, endHead, dashed, strokeObj, lineType, lineOrientation, curveH, curveV, points, style, group, inherit)
Line(length, thickness, color, startHead, endHead, dashed, strokeObj, lineType, lineOrientation, curveH, curveV, points, style, group, inherit)
Line zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a straight line with a length and thickness. See also ZIM Squiggle() with points:[[0,0], [100,0] for instance for Bezier handles, etc. See also ZIM Shape() for custom lines, curves, etc. The registration and origin will be at the start point at the left. Start point and end point can be adjusted in various ways to accommodate animation, etc. NOTE mouseChildren is turned to false for all zim Shape containers. 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 Line(500).center(); // centered line
EXAMPLE
new Line({points:[[0,0],[100,0],[100,100],[200,100]]}).center(); // over, up, over, etc.
// or with quadratic curves:
// 100,0 is control point to x,y of 100,50
new Line({points:[[0,0],[100,0,100,50],[100,100,200,100]]}).center(); // over, up, over
// or with bezier curves:
// 100,0 is first control point, 100,0 is second control point and 100,50 is final point
new Line({points:[[0,0],[100,0,100,0,100,50],[100,100,100,100,200,100]]}).center(); // over, up, over
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) 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) 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)    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. strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale lineType - (default "straight") - by default the line is a straight line between points    set to "corner" to draw only horizontal and vertical lines at 90 degree angles between lines (see lineOrientation)    set to "curve" to draw horizontal and vertical lines with curves between lines (see lineOrientation) lineOrientation - (default "auto") - for lineType other than straight automatically decide between horizontal or vertical    set to "horizontal" to draw two horizontal lines and one vertical line between points    set to "vertical" to draw two vertical lines and one horizontal line between points curveH - (default 100) - for "curve" lineType this is the horizontal distance of the curve curveV - (default 100) - for "curve" lineType this is the vertical distance of the curve points - (default null) an Array of points for the line which will ignore length and lineType parameters    points in the array can have the following formats (a mix is okay too):    [x,y] points for straight lines. This format should also be used for first point    [cpX, cpY, x, y] for quadratic curve to with a single control point followed by the destination point    [cp1X, cp1Y, cp2X, cp2Y, x, y] for Bezier curve to with start and end control points followed by the destination point    // see the ZIM Shape docs (or https://www.createjs.com/docs/easeljs/classes/Graphics) for details on the curves 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 setPoints(a, b, c, d) - pass in two ZIM Points or four numbers to set start points and end points or an array of points    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 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    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy of the shape    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)    exact (default false) in theory will copy ZIM VEE values as they are in the original    see main class for style, group, inherit parameters 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String ** below will not change the x and y of the shape ** if points is being used: length, startPoint, start and end X and Y, endPoint and angle are ignored - use the point property length - gets or sets the length of the line - will grow from its registration point startPoint - (ZIM Point or x,y object) get or set the start point startX - get or set the start x point - allows for animation startY - get or set the start y point - allows for animation endPoint - (ZIM Point or x,y object) get or set the end point endX - get or set the end x point - allows for animation endY - get or set the end y point - allows for animation startHead - get or set the start head - see startHead parameter endHead - get or set the end head - see endHead parameter angle - gets (not sets) the current angle relative to the line (does not include line rotation) points - get and set the points array (see points parameter) - ignoring all settings above ** above will not change the x and y of the shape shape - gives access to the line shape color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    depreciated - see ZIM GradientColor, RadialColor and BitmapColor thickness - get and set the stroke size in pixels thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale) See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html 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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 13013 ▶︎ Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, stickThickness, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)
Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, stickThickness, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)
Squiggle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a squiggly line with a number of points. The points have Bezier controls - little handles that change the shape of the line. The type of control can be specified overall and individually - and can be hidden or shown The type of control can be changed by double clicking the point - colors of the handles will change Points can be added by clicking on the line or removed by SHIFT clicking a point. CTRL Z will undo adding or removing a point The shape of the line can be recorded with the recordData() method and recreated with the setData() method The Squiggle is set by default to show and hide controls when clicked It is also draggable by default when the controls are showing It can be set to copy with a shift click SEE:https://www.youtube.com/watch?v=P2hDe5JCINY for Blob and Squiggle Basics MULTIPLE SELECT Multiple points can be selected with the CTRL key held and then dragged or moved with the keyboard arrows (moves 10 pixels with shift key down) NOTE mouseChildren is turned to false for all zim Shape containers. 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 Squiggle().center(); // makes a line with default 4 points with Bezier controls
new Squiggle({points:2, controlType:"none"}).pos(100,100); // makes a diagonal straight line that is editable
EXAMPLE
// Animate along a Squiggle
// see https://zimjs.com/explore/squiggleAnimate.html for more
const line = new Squiggle().center();
new Circle(10, red).addTo().animate({path:line}, 1);
EXAMPLE
// there are so many examples for Blob and Squiggle
// see https://www.youtube.com/watch?v=P2hDe5JCINY
// In this set of examples we show editing which is new in ZIM NFT

// Add a new second smaller part to the Squiggle
// reverse points from right to left and animate along Squiggle
const s = new Squiggle({showControls:false}).center();
const s2 = new Squiggle()
.transformPoints("scale", .5)
.transformPoints("x", s.width);
s.appendPoints(s2.points).reversePoints();
new Circle(10).addTo().animate({path:s}, 5);
EXAMPLE
// split Squiggle and change color of second part
const s1 = new Squiggle().center();
const s2 = s1.splitPoints(2);
s2.color = red;
EXAMPLE
// split Blob into Squiggles
const b1 = new Blob().center();
const s1 = b1.makeSquiggle(0).loc(b1);
const s2 = s1.splitPoints(2).loc(b1);
s2.color = red;
b1.removeFrom();

// // and put back again
// s1.appendPoints(s2.points, "mirror");
// const b2 = s1.makeBlob().loc(s1);
// b2.color = blue;
// b2.borderColor = null;
// s1.removeFrom();
// s2.removeFrom();
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) color - |ZIM VEE| - (default green) the line color as any CSS color including "rgba()" for alpha thickness - (default 2) the thickness of the line in pixels points - (default 5) a number of points to start with to make the shape    OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)    OR an array of points as follows:    [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]    controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles    rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location    circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)    controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"    custom points will start with approximateBounds() called    but approximateBounds() must be called manually anytime afterwards when new bounds are desired. length - (default 300) the default length of line used to create the squiggle (also specifies the squiggle's bounds(0, 0, length, thickness)) controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default controlType - (default "straight") one of four String values as follows:    none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.    mirror - the control rectangles reflect one another about the point circle - lengths are kept even    straight - the control rectangles keep a straight line through the point circle but length is independent    free - the control rectangle moves independently from the other control rectangle    ** The controlType can be specified for each point - see the points parameter    ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType showControls - (default true) set to false to start with controls not showing - can change this after with controlsVisible property or showControls() and hideControls() methods lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally allowToggle - (default true) set false to let turn off clicks showing and hiding controls move - (default true) set to false to disable dragging when controls are showing    can also set to "always" to allow movement when controls are not showing dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)    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 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 editPoints - (default true) lets user add points by pressing on shape path or remove points by shift click or hold    set to "anywhere" to let users add points anywhere - will add points with controlType:"none"    set to false to not allow adding or removing points with shift click or hold interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale 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 approximateBounds(num, showPoints, margin) - update the bounds based on a Rectangle    that surrounds the number of points (default 80) distributed around the object path    set showPoints to true to draw little dots on points    margin increases (or if negative decreases) the bounds on all sides by the margin    use outline() after object has been added to the stage to see the bounds    Squiggles with custom points will start with approximateBounds() called    but approximateBounds() must be called manually anytime afterwards when new bounds are desired. addPoint(percent, controlType) - add a point at a percent (100) of the total curve    this is handy to make path have the same number of points for animate() path tweens    controlType can be as specified in main points parameter    returns object for chaining addPoints(num, controlType, startPoint, spread, dataOnly, points) - add num points between existing points    controlType can be as specified in main points parameter    specify a startPoint to add points between the startPoint and the next point (one segment of points)    spread (default false) set to true to spread points evenly around path rather than evenly between segments    dataOnly and points are used internally    returns object for chaining interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween    used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)    specify a startPoint to get points between the startPoint and the next point (one segment of points)    spread (default false) set to true to spread number of points around path rather equal number between segments    points (default all points) the points to work with in the same format as the points property    even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution    returns an array of point objects with x, y properties and an r property for ratio of distance along path recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method    if toJSON (default false) is set to true, the return value is a JSON string    the points data comes from the points property setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()    if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data    the points data is parsed with the set setPoints() so the number of points should be the same    returns object for chaining recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property    popup - (default false) set to true to open a zim Pane (squiggle.pane) with the points in a zim TextArea (squiggle.textArea) (click off to close)    NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Squiggle use JSON.parse(output);    NOTE: using zog(JSON.stringify(squiggle.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work setPoints(data) - sets the Squiggle points to the data from recordPoints    This does not remake the Squiggle but rather shifts the controls so the number of points should be the same changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index    accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties    passing in null as the index will change all points to the specified properties    the update parameter defaults to false so set to true to show update or call update() below    this is so multiple changes can be batched before calling update - for instance when animating blobs. transformPoints(transformType, amount, x, y, approximateBounds) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining       transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"    amount - the amount to transform    x, y - (default 0, 0) the x and y position to transform about    approximateBounds defaults to true - set to false to not call approximateBounds after transforming points reversePoints() - reverse the order of the points    this also swaps each rectangle in the Bezier controls    also see the Code module for reversePoint(points) function to operate on data points in Squiggle format     appendPoints(points, controlType) - add points at end of points - updates Squiggle    it is assumed that the first point of the new points is in the same place as the last point of the Squiggle    by default these will transfer control types but can override with controlType    this will not have immediate effect but will be triggered when the joining point handle is moved    prependPoints(points, controlType) - add points at start of points - updates Squiggle    it is assumed that the last point of the new points is in the same place as the first point of the Squiggle    by default these will transfer control types but can override with controlType    this will not have immediate effect but will be triggered when the joining point handle is moved splitPoints(index) - breaks the Squiggle into two Squiggles at the index (length / 2)    the original Squiggle is the first Squiggle    returns a reference to the second Squiggle makeBlob(controlType, mergeDist) - makes a new Blob from the Squiggle    returns the new Blob - the Squiggle remains unchanged so may need to remove it    controlType (default "free" if not merged and "mirror" if merged)       controlType for the joined end points - also see mergeDist below       this will not change the control sticks until their handles are dragged    mergeDist (default 5) merges overlapping end points (within this pixel distance) update(normalize) - update the Squiggle if animating control points, etc. would do this in a Ticker    set normalize (default false) to true to use pointsAdjusted for rotated and scaled points    and if animating along the path after setting rotation or scale on point    just leave out if only animating points showControls() - shows the controls (and returns squiggle) also see controlsVisible property hideControls() - hides the controls (and returns squiggle) also see controlsVisible property toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!    set start point greater than end point to traverse backwards    will dispatch a "traversed" event when done 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 getPointAngle(index) - gets the angle made by the tangent at the index provided getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]    used internally for animating to path and adding removing Bezier points getAdjacentSegmentData(index) - returns an array of two arrays:    The first is an array of cubic Bezier points for segments adjacent and including the provided point index    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    The second is an array of starting point indexes for the segments that were tested    used internally to drag an animation along the path getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided    along with x and y values, the point has a z value that is the index of the squiggle point before the calculated point    if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point    ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment    segmentRatios and segmentPoints will be calculated if not provided    used internally for animating along the path - if lockControls is true, only animate will precalculate these values linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to thicknessCommand linearGradient method (see properties below) radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to thicknessCommand radialGradient method (see properties below) cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact, commands) - makes a copy of the object    exact (default false)       ZIM VEE (Pick) values are active in clones unless exact is set to true       For instance, if the object's color is [blue, green]       then its clone might be blue or green - which could be different than the original       If exact is set to true then the clone will be the color of the original object    commands (default false) makes clones with current color and borderColor commands of object 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - gives access to the shape of the squiggle color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange stickColor - get or set the stickColor - requires an update() to see changes colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html thickness - get and set the stroke size in pixels thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect dashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html num - get the number of points - to set, use the points property points - get or set the points array of the Squiggle in the same format as the points parameter:    [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]] pointsAdjusted - get points with any point rotation converted to 0 - see update(true) pointControls - get an array of controls (a container) - use this to animate controls pointCircles - get an array of control circles - use this to place some other object at the point pointObjects - get an array of point objects for each point in the following format:    [[control, circle, rect1, rect2, controlType], [etc.]]    control - the container for the control that holds the circle and rectangles (also see pointControls)    circle - the control point circle (also see pointCircles)    rect1 - the first control point rectangle    rect2 - the second control point rectangle    controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"    NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed    NOTE: the update() method must be called if manually changing the control positions or type    NOTE: if constantly animating the controls then use a Ticker.add(function(){squiggle.update();})    NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options addPointFactor - (default 20) used when placing new points along edge (editPoints is true)    divides the distance between points by this amount - the smaller the more accurate but also slower addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge segmentPoints - a read-only array of cubic Bezier points for each segment    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    used internally to animate to the path and add and remove Bezier points segmentRatios - a read-only array of cumulative ratio lengths of segments    for instance the default five points (four segments) is [.25, .5, .75, 1]    used internally to animate to the path and attribute proportional time to each segment controls - access to the container that holds the sets of controls    each control is given a read-only num property sticks - access to the Shape that has the control sticks lastSelected - access to the last selected (or created) control container lastSelectedIndex - the index number of the last selected controls controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls() toggled - read-only Boolean property as to whether picker is showing types - get or set the general array for the types ["mirror", "straight", "free", "none"]    changing this or removing a type will adjust the order when the user double clicks the points to change their type    this is not an array of types for each point - see the points property to access the types of each point lockControls - Boolean to lock controls from being adjusted or not lockControlType - Boolean to lock the type of the controls in their current state or not allowToggle - Boolean to get or set clicking to show and hide controls move - Boolean to drag or not drag Squiggle when controls are showing    can also set to "always" to allow movement when controls are not showing onTop - get or set the onTop 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 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 "change" event for when the bezier controls are adjusted (pressup only)    if monitoring constant change is needed add a pressmove event to Squiggle.controls    the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch" dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true dispatches an "update" event if the points are changed or a point is added or removed    this removes all listeners on the old shape and controls    so any custom listeners on shape and controls will need to be re-applied - use the update event to do so dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover MORE https://zimjs.com/squiggle https://www.youtube.com/watch?v=BA1bGBU4itI&list=PLCIzupgRt1pYtMlYPtNTKCtztFBeOtyc0 Note the points property has been split into points and pointObjects (and there have been a few property changes) since the time of the video CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
EXPAND 15033 ▶︎ Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, stickThickness, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)
Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, stickThickness, selectColor, selectPoints, editPoints, interactive, strokeObj, style, group, inherit)
Blob zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a blob shape inside a container using a number of points. The points have Bezier controls - little handles that change the shape of the Blob. The type of control can be specified overall and individually - and can be hidden or shown The type of control can be changed by double clicking the point - colors of the handles will change Points can be added by clicking on the shape or removed by SHIFT clicking a point. CTRL Z will undo adding or removing a point The shape of the Blob can be recorded with the recordData() method and recreated with the setData() method The Blob is set by default to show and hide controls when clicked It is also draggable by default when the controls are showing MULTIPLE SELECT Multiple points can be selected with the CTRL key held and then dragged or moved with the keyboard arrows (moves 10 pixels with shift key down) NOTE mouseChildren is turned to false for all zim Shape containers. NOTE with the ZIM namespace zns = false, this overwrites a JS Blob - so the JS Blob is stored as document.Blob 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 Blob().center(); // makes a circle with default 4 points with Bezier controls

new Blob({
   points:12, // 12 points for more complex shape
}).center();

new Blob({
   color:purple,
   controlType:"free", // free will be default control type (rather than "straight")
   points:[
      // the control position x, y
      // then three point positions inside the control - so relative to the control position
      // 1. circle position x, y (usually the same as the control position - so 0,0)
      // 2. the location of the first control rectangle x and y
      // 3. the location of the second control rectangle x and y
      // then an optional specific type of control that overrides the controlType parameter (or the default type of "straight")
      [-100,-100,-100,100,100,-100,0,0,"mirror"], // this will be type "mirror"
      [100,-100,100,0,-50,0], // this will be type "free" because controlType parameter
      [100,100], // these will be type "none" because no dimensions (or dimensions 0) specified for controls
      [-100,100]
   ]
}).centerReg();
EXAMPLE
// Transform the original points of a Blob
// If you rotate or scale, this affects the control points - the little rectangles rotate or they scale
// To avoid this, the points themselves can be transformed (scaleX, scaleY, scale, rotation, x, y)
// This makes a square and scales it bigger without affecting control size or stroke size (if there were a stroke)
// Note the default number of points is 4 but they are arranged at the top, bottom and sides - so would make a diamond with just controlType:"none"
new Blob({controlType:"none"}).transformPoints("rotation", 45).transformPoints("scale", 2).center();
EXAMPLE
// make a Blob the shape of basic ZIM shapes
// this overrides the path parameter
new Blob({points:"circle"}).pos(200,200);
new Blob({points:new Rectangle(100,200)}).center();
new Blob({points:new Triangle()}).transformPoints("rotation", 90).pos(50,50,true,true);
EXAMPLE
// Animate along a Blob
// see https://zimjs.com/nio/ examples
// see https://zimjs.com/explore/blobAnimate.html for more
// see https://zimjs.com/explore/blobAnimate2.html for more
const path = new Blob().center();
new Circle(10, red).addTo().animate({path:path}, 1);
EXAMPLE
// Animate one Blob into another
const targetBlob = new Blob({points:"rectangle"});
const blob = new Blob({radius:50, points:"circle", interactive:false})
   .pos(200,200)
   .transformPoints("rotation", -45) // to better tween to rectangle
   .animate({
      props:{shape:targetBlob},
      time:1,
      rewind:true,
      loop:true
   });
EXAMPLE
// split Blob into Squiggles
const b1 = new Blob().center();
const s1 = b1.makeSquiggle(0).loc(b1);
const s2 = s1.splitPoints(2).loc(b1);
s2.color = red;
b1.removeFrom();

// // and put back again
// s1.appendPoints(s2.points, "mirror");
// var b2 = s1.makeBlob().loc(s1);
// b2.color = blue;
// b2.borderColor = null;
// s1.removeFrom();
// s2.removeFrom();
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) color - |ZIM VEE| - (default green) 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 - (default 1 if stroke is set) the size of the stroke in pixels num - get the number of points - to set, use the points property points - (default 4) a number of points to start with to make the shape    OR a shape string of "circle", "rectangle" or "triangle"    OR a ZIM Circle, Rectangle or Triangle with any dimensions that will be matched    OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)    OR an array of points as follows:    [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]    controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles    circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)    rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location    controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"    custom points will start with approximateBounds() called    but approximateBounds() must be called manually anytime afterwards when new bounds are desired. radius - (default 100) the default radius of the circle used to create the blob (also specifies the blob's bounds(-radius, -radius, radius*2, radius*2)) controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default controlType - (default "straight") one of four String values as follows:    none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.    mirror - the control rectangles reflect one another about the point circle - lengths are kept even    straight - the control rectangles keep a straight line through the point circle but length is independent    free - the control rectangle moves independently from the other control rectangle    ** The controlType can be specified for each point - see the points parameter    ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType showControls - (default true) set to false to start with controls not showing - can change this after with control property or showControls() method lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally    If a handleSize of 0 is chosen, then the sticks will disappear too allowToggle - (default true) set false to let turn off clicks showing and hiding controls move - (default true) set to false to disable dragging when controls are showing    can also set to "always" to allow movement when controls are not showing dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)    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 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 editPoints - (default true) lets user add points by pressing on shape path.    set to "anywhere" to let users add points anywhere - will add points with controlType:"none"    set to false to not allow adding or removing points with click or shift click interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale 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 approximateBounds(num, showPoints) - update the bounds based on a Rectangle    that surrounds the number of points (default 80) distributed around the object path    set showPoints to true to draw little dots on points    use outline() after object has been added to the stage to see the bounds    Blobs with custom points will start with approximateBounds() called    but approximateBounds() must be called manually anytime afterwards when new bounds are desired. addPoint(percent, controlType) - add a point at a percent (100) of the total curve    this is handy to make path have the same number of points for animate() path tweens    controlType can be as specified in main points parameter    returns object for chaining addPoints(num, controlType, startPoint) - add num points between existing points    controlType can be as specified in main points parameter    specify a startPoint to add points between the startPoint and the next point (one segment of points)    spread (default false) set to true to spread points evenly around path rather than evenly between segments    dataOnly and points are used internally    returns object for chaining interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween    used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)    specify a startPoint to get points between the startPoint and the next point (one segment of points)    spread (default false) set to true to spread number of points around path rather equal number between segments    points (default all points) the points to work with in the same format as the points property    even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution    returns an array of point objects with x, y properties and an r property for ratio of distance along path recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method    if toJSON (default false) is set to true, the return value is a JSON string    the points data comes from the points property setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()    if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data    the points data is parsed with the set setPoints() so the number of points should be the same    returns object for chaining recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property    popup - (default false) set to true to open a zim Pane (blob.pane) with the points in a zim TextArea (blob.textArea) (click off to close)    NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Blob use JSON.parse(output);    NOTE: using zog(JSON.stringify(blob.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work setPoints(data) - sets the Blob points to the data from recordPoints    This does not remake the Blob but rather shifts the controls so the number of points should be the same changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index    accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties    passing in null as the index will change all points to the specified properties    the update parameter defaults to false so set to true to show update or call update() below    this is so multiple changes can be batched before calling update - for instance when animating blobs. transformPoints(transformType, amount, x, y, approximateBounds) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining    transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"    amount - the amount to transform    x, y - (default 0, 0) the x and y position to transform about    approximateBounds defaults to true - set to false to not call approximateBounds after transforming points reversePoints(sameStart) - reverse the order of the points    sameStart defaults to true and will keep the start point the same    set to false to make the last point before the start point, the start point    This also swaps each rectangle in the Bezier controls    also see the Code module for reversePoint(points) function to operate on data points in Squiggle format    Note: reversing blob points with the reversePoints function will make the starting point the last point makeSquiggle(index) - create a new Squiggle by cutting Blob at index (default 0)    returns the new Squiggle - the Blob remains unchanged - so may need to remove it update(normalize) - update the Blob if animating control points, etc. would do this in a Ticker    set normalize (default false) to true to use pointsAdjusted for rotated and scaled points    use true for manually editing points after setting rotation or scale on point    just leave out if only animating points showControls() - shows the controls (and returns blob) - or use blob.controlsVisible = true property hideControls() - hides the controls (and returns blob) - or use blob.controlsVisible = false property toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!    set start point greater than end point to traverse backwards    will dispatch a "traversed" event when done 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 getPointAngle(index) - gets the angle made by the tangent at the index provided getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]    used internally for animating to path and adding removing Bezier points getAdjacentSegmentData(index) - returns an array of two arrays:    The first is an array of cubic Bezier points for segments adjacent and including the provided point index    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    The second is an array of starting point indexes for the segments that were tested    used internally to drag an animation along the path    will wrap around the blob if needed getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided    along with x and y values, the point has a z value that is the index of the blob point before the calculated point    if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point    ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment (the first point)    segmentRatios and segmentPoints will be calculated if not provided    used internally for animating along the path - if lockControls is true, only animate will precalculate these values linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to colorCommand linearGradient method (see properties below) radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to colorCommand radialGradient method (see properties below) cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact, commands) - makes a copy of the object    exact (default false)       ZIM VEE (Pick) values are active in clones unless exact is set to true       For instance, if the object's color is [blue, green]       then its clone might be blue or green - which could be different than the original       If exact is set to true then the clone will be the color of the original object    commands (default false) makes clones with current color commands of object 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - gives access to the shape of the blob color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html borderColor - get and set the stroke color borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashed - get and set the dashed - use true / false or an array (see dashed parameter) dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html stickColor - get or set the stick color of the controls - requires an update() to see changes points - get or set the points array of the Blob in the same format as the points parameter:    a number, a shape string ("circle", "rectangle", "triangle"), a ZIM Circle, Rectangle, Triangle    or an array as follows:    [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]] pointsAdjusted - get points with any point rotation converted to 0 - see update(true) pointControls - get an array of controls (a container) - use this to animate controls pointCircles - get an array of control circles - use this to place some other object at the point pointObjects - get an array of point objects for each point in the following format:    [[control, circle, rect1, rect2, controlType], [etc.]]    control - the container for the control that holds the circle and rectangles (also see pointControls)    circle - the control point circle (also see pointCircles)    rect1 - the first control point rectangle    rect2 - the second control point rectangle    controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"    NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed    NOTE: the update() method must be called if manually changing the control positions or type    NOTE: if constantly animating the controls then use a Ticker.add(function(){blob.update();})    NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options addPointFactor - (default 20) used when placing new points along edge (editPoints is true)    divides the distance between points by this amount - the smaller the more accurate but also slower addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge segmentPoints - a read-only array of cubic Bezier points for each segment    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    used internally to animate to the path and add and remove Bezier points segmentRatios - a read-only array of cumulative ratio lengths of segments    for instance the default four points is [.25, .5, .75, 1]    used internally to animate to the path and attribute proportional time to each segment controls - access to the container that holds the sets of controls    each control is given a read-only num property sticks - access to the Shape that has the control sticks lastSelected - access to the last selected (or created) control container lastSelectedIndex - the index number of the last selected controls controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls() types - get or set the general array for the types ["mirror", "straight", "free", "none"]    changing this or removing a type will adjust the order when the user double clicks the points to change their type    this is not an array of types for each point - see the points property to access the types of each point lockControls - Boolean to lock controls from being adjusted or not allowToggle - Boolean to get or set clicking to show and hide controls move - Boolean to drag or not drag Blob when controls are showing    can also set to "always" to allow movement when controls are not showing lockControlType - Boolean to lock the type of the controls in their current state or not onTop - get or set the onTop property 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 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 "change" event for when the bezier controls are adjusted (pressup only or moving with keys - thanks Yui Kim for find)    if monitoring constant change is needed add a pressmove event to Blob.sets    the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch" dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true dispatches an "update" event if the points are changed or a point is added or removed    this removes all listeners on the old shape and controls    so any custom listeners on shape and controls will need to be re-applied - use the update event to do so dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
EXPAND 17083 ▶︎ Flare(color, borderColor, borderWidth, crossAngle, thickness, thicknessA, thicknessB, pin, startX, startY, lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close, dashed, strokeObj, spineColor, spineBorderWidth, spineBorderColor, spineDashed, spineStrokeObj, closeColor, closeBorderWidth, closeBorderColor, closeDashed, closeStrokeObj, style, group, inherit)
Flare(color, borderColor, borderWidth, crossAngle, thickness, thicknessA, thicknessB, pin, startX, startY, lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close, dashed, strokeObj, spineColor, spineBorderWidth, spineBorderColor, spineDashed, spineStrokeObj, closeColor, closeBorderWidth, closeBorderColor, closeDashed, closeStrokeObj, style, group, inherit)
Flare zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a flare shape - a shape with a gradual widening like flared pants or skirts. The shape defaults to a horizontal rectangle flared outwardly to the right. The flare angleA and angleB can be specified at any angle negative or positive. The flare axis or spine can be at any angle to the horizontal positive in the x. The cross or end angles can be specified relative to a normal the spine so 0 is -90. Different color and border options are available and editable as properties. More than one flare can be created in the same shape - these are called segments. Multiple Flare objects can be easily combined into a ZIM MultiFlare and a special FlareBox can be used to place flares or multiFlares around a rectangle to be used for backings on buttons, pictures, etc. See https://zimjs.com/ten/flare.html for examples of a 3D wall, a rocket and a button frame NOTE mouseChildren is turned to false for all zim Shape containers. 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 Flare().center();

// a Rocket
const rocket = new Flare({
   thickness:100,
   angles:-90, // all segment angles will point up
   lengths:[40,.5,100,150,105],
   anglesA:[-20,89,-12,0,-22], // anglesB will be mirrored by default
   color:new GradientColor([dark,silver,dark],[.1,.6,.9],-50,0,50,0),
   cross:true // add a line at segment borders
}).center();

// see also MultiFlare and FlareBox examples
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) color - (default black) the color of the flare    if null and a border is speficied the color will be transparent borderColor - (default null) the stroke color borderWidth - (default 1 if stroke is set) the size of the stroke in pixels crossAngle - (default 0) the angle from the normal of the spine    so if the spine goes to the right at 0 degrees then 0 crossAngle starts at -90 and goes positive clockwise    a crossAangle of -45 would look like a picture frame bevel    if the flare starts at the top left corner of a rectangle thickness - (default 20) the thickness at the start of the flare assuming 0 crossAngle    this will be divided evenly to thicknessA on one side of the spine and thicknessB on the other side of the spine thicknessA - (default null) - will be set to half the thickness if thicknessB is not set otherwise thickness-thicknessB thicknessB - (default null) - will be set to half the thickness if thicknessA is not set otherwise thickness-thicknessA pin - (default null) - set to a segment number to set registration point at the start of the segment    Pin is used with MultiFlare to align flares at pinned segments    Pin is used with FlareBox to place pinned segments at any of the four corners of the box    When doing so, the Flare will be automatically rotated (corner number - pin number) * 90    This can be overriden by rotating the flare to the desired rotation after creation startX - (default 0) shift the start of the flare in the x from the registration point (note, pin will reset registration) startY - (default 0) shift the start of the flare in the y from the registration point (note, pin will reset registration) lengths - (default [200]) an array of spine lengths angles - (default [0]) an array of angles (degrees) for the spines relative to 0 along the positive x axis anglesA - (default [10]) an array of relative angles to the left of the current spine when heading along the spine    so if the spine heads to the right, angleA is positive from the spine upwards    think of these as how much the shape flares out from the spine on one side anglesB - (default anglesA) an array of relative angles to the right of the current spine when heading along the spine    so if the spine heads to the right, angleB is positive from the spine downwards    think of these as how much the shape flares out from the spine on another side anglesEnd - (default [0]) an array of angles at the end of each segment from the normal of each segment spine    so if the spine goes to the right at 0 degrees then a 0 anglesEnd is perpendicular to the spine    an anglesEnd of 45 would look like a picture frame bevel    as the segments are placed around the picture frame clockwise    note: end angles greatly change the look of flared segments       poorly chosen angles can lead to flares crossing or massively diverging       good choices depend on the length of the flares, the spine angles and the flare angles       generally, a trial and error technique is the easiest to find the desired solution cross - (default true) draw a crossing line at each segment - this draws each segment as a closed path crossColors - (default null) an array of colors for each segment if cross is true close - (default false) join the end of the last segment to the start of the first segment dashed - (default false) set the dashed of the border if the borderColor or borderWidth is specified strokeObj - (default {caps:"butt", joints:"miter", miterLimit:2, ignoreScale:false}) set to adjust stroke properties    caps options: "butt", "round", "square" or 0,1,2    joints options: "miter", "round", "bevel" or 0,1,2    miterLimit is the ration at which the mitered joint will be clipped    ignoreScale set to true will draw the specified line thickness regardless of object scale spineColor - (default null) as the spine is drawn, fill the shape it makes with this color    this can create a picture frame effect as the spine color may hide half the flare for each segment spineBorderWidth - (default null) the width of the spine spineBorderColor - (default null) the color of the actual spine spineDashed - (default false) set to true for dashed spine (if spineBorderWidth or spineBorderColor set) spineStrokeObj - (default strokeObject) see strokeObject parameter for details closeColor - (default color) the color of the segment created if closing the flare closeBorderWidth - (default borderWidth) the borderWidth of the closing segment if closing the flare closeBorderColor - (default borderColor) the borderColor of the closing segment if closing the flare closeDashed - (default false) set to true for dashed closed segment (if closeBorderWidth or closeBorderColor set) closeStrokeObj - (default strokeObject) see strokeObject parameter for details 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 add(lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close) |ZIM DUO| - add segment(s) to the Flare - returns object for chaining    see segment parameters for details - returns object for chaining remake() - remake the Flare segments after setting properties hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy of the shape    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String shape - access to the ZIM Shape for the flare(s) spineShape - access to the ZIM Shape for the spine if spine is true closeShape - access to the ZIM Shape for the closing segment if close is true pin - get or set the pin number - which spine has the registration point    see the pin parameter for more details points - access to array of flare shape points {x,y}    if not close - around outside then around inside    if close - around each segment pinPoints - access to array of spine points {x,y} and then to final end spine point color - get and set the fill color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange borderColor - get and set the stroke color borderWidth - get and set the stroke size in pixels borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html closeColor - get and set the fill color of the close segment closeBorderColor - get and set the stroke color of the close segment closeBorderWidth - get and set the stroke size in pixels of the close segment closeBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html spineColor - get and set the fill color of the spine shape spineBorderColor - get and set the stroke color of the spine shape spineBorderWidth - get and set the stroke size in pixels of the spine shape spineBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html ** the following properties can be read or changed ** if changed, the remake() method must be run to see changes ** see the Flare parameters for definitions thicknessA - number thicknessB - number cross - boolean close - boolean lengths - array angles - array anglesA - array anglesB - array anglesEnd - array crossColors - array mouseChildren - set to false to avoid dragging the shape inside    to drag or interact with objects inside then set mouseChildren to true 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 17818 ▶︎ MultiFlare(flares, pins, angles, endToEnd, style, group, inherit)
MultiFlare(flares, pins, angles, endToEnd, style, group, inherit)
MultiFlare zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Joins multiple Flare objects in one container at the pin points of the flares or end to end. See also ZIM Flare and ZIM FlareBox. NOTE mouseChildren is turned to false for all zim Shape containers. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// a fan of legs with feet!
const flare = new Flare({lengths:[100,100,20,8],anglesA:[5,-5,60],anglesB:[5,-5,0]})
const multi = new MultiFlare().center();
loop(12, i=>{
   multi.add(flare.rot(i*360/12))
});

// or prepare flares and angles ahead of time
const flares = [];
const angles = [];
loop(12, i=>{
   flares.push(flare.clone());
   angles.push(i*360/12);
});
new MultiFlare(flares, null, angles).center();

// a ring of beads using endToEnd
const flare = new Flare({crossAngle:-360/12, lengths:[50,20,5,20,50],anglesA:[5,60,0,-60,-5]})
const flares = [];
const angles = [];
loop(12, i=>{
   flares.push(flare.clone());
   angles.push(i*360/12);
});
new MultiFlare(flares, null, angles, true).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) flares - (default null) an array of ZIM Flares objects to add - also see add() method pins - (default null) an array of pin indexes for the flares    pins will set the registration point for each flare at whatever segment matches the pin index angles - (default null) an array angles for the flares endToEnd - (default false) set to true to locate each first segment point of the flare at the last segment point of the last flare 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 add(flares) - add an array of flares or a single flare to MultiFlare    add() redraws the whole flare so for many, make an array to start and pass it in as an argument remove(flares) - remove an array of flares or a single flare to MultiFlare    remove() redraws the whole flare so for many, make an array to start and pass it in as an argument cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy of the multiFlare cloning the flares too 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String ** can get and change the following properties ** see the paremeters for details ** if properties are changed call the remake() method to update the MultiFlare flares - array pins - array angles - array endToEnd - boolean mouseChildren - set to false to avoid dragging the shape inside    to drag or interact with objects inside then set mouseChildren to true 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 17993 ▶︎ FlareBox(width, height, color, borderColor, borderWidth, flares, corners, pins, style, group, inherit)
FlareBox(width, height, color, borderColor, borderWidth, flares, corners, pins, style, group, inherit)
FlareBox zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a Rectangle with ZIM Flare objects positioned around edges and corners. Pass in an array of Flare objects or a MultiFlare FlareBox places flares at specified corner indexes depending on flare pin index. See also ZIM Flare and ZIM MultiFlare. A FlareBox can be used as a backing and rollBacking for buttons and other components to create exciting borders inspired by the tail lights of 2020 automibiles. See: https://zimjs.com/ten/flare.html NOTE mouseChildren is turned to false for all zim Shape containers. 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 border1 = new Flare({
   thickness:6,
   angles:[0,90], // to the right then down
   lengths:[60,90],
   anglesA:[3,-1.5], // flare angles
   anglesEnd:[45,0], // 0 is optional
   color:white,
   pin:1 // pin at flare corner
});

const border2 = new Flare({
   thickness:25,
   angles:[0,90], // to right then down
   lengths:[50,50],
   anglesA:[-2,2], // anglesB will mirror these if not provided
   anglesEnd:[45],
   color:dark,
   pin:1 // pin at flare corner
});

// put both flares at left top corner 0
// they each have pin of 1 so
// the rotation is (0-1)*90 = -90 (counter clockwise)
// they were to the right and down
// now they are up and to the right
const flareBox = new FlareBox(220, 100, blue, dark, 3, [border1, border2], [0,0])
   .centerReg();

// clone the flares for the rollover FlareBox
// put the first flare at corner 2
// the rotation becomes (2-1)*90 = 90 (clockwise)
// it was built to go to the right and down
// now it is going down and to the left
const flareBoxOver = new FlareBox(220, 100, green, dark, 3, [border1.clone(), border2.clone()], [2,0])
   .centerReg({add:false});

// use the flareBoxes as backings
const button = new Button({
   width:flareBox.width,
   height:flareBox.height,
   backing:flareBox,
   rollBacking:flareBoxOver
}).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 220) the width of the rectangle about which the Flare objects are placed    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) 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 corners - (default [0]) an array of corner indexes to place the pin points of the ZIM Flare objects    corner indexes are:       0 - LEFT TOP       1 - RIGHT TOP       2 - RIGHT BOTTOM       3 - LEFT BOTTOM pins - (default null) an array of pins of the ZIM Flare objects    The pin index can be set on the Flare or through the MultiFlare or here in the FlareBox    The pin is also the registration point of the flare so the flare will be placed at the corner at its pin    FlareBox will also automatically rotate the flares with this formula:       flare.rotation = (corner-pin)*90    This formula allows for easy setting of angles on corners    See the Button at https://zimjs.com/ten/flare.html    This can be overridden by setting the flare rotation after the FlareBox is created 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 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    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a copy of the flareBox and clone flares as well 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String multiFlare - gives access to the ZIM Multiflare object    this is made automatically by FlareBox if an array of flares was used flares - an array of flares that belong to the multiFlare backing - gives access to the rectangle backing shape color - get and set the fill color of the backing shape colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the backing shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange borderColor - get and set the stroke color borderWidth - get and set the stroke size in pixels borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    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 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
-------------- COMPONENTS EXPAND 18211 ▶︎ Label(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)
Label(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)
Label zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a label - wraps the createjs Text object. Can use with Button, CheckBox, RadioButtons and Pane. Text seems to come in different sizes so we do our best. Have tended to find that left and alphabetic are most consistent across browsers. Custom fonts loaded through css can be used as well. NOTE can wrap text at given width using lineWidth (or labelWidth) parameter. To dynamically change the width without changing the font size use the labelWidth property. 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 Label("Hello").center(); // adds label to and centers on the stage

new Label({
   text:"CLICK",
   size:100,
   font:"courier",
   color:"white",
   rollColor:"red",
   bold:true,
   italic:true
}).loc(100,100).tap(()=>{zog("tapping");});
EXAMPLE
// with text that wraps at labelWidth
// can also set this as a property later to dynamically change width of text
// without changing the size
new Label({
   text:"this is a long bunch of text, this is a long bunch of text, this is a long bunch of text",
   labelWidth:200
}).center();
EXAMPLE
STYLE = {font:"courier"};
new Label("Hi Courier").center(); // will be courier not arial

STYLE = {text:"YAY!", color:"Red"};
new Label().center().mov(0,100); // will say YAY! in red arial font
new Label("Hello").center().mov(0,200); // will say Hello in red arial
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** 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 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) 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 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 variant - (default false) set to true to set the font to "small-caps" - note: fontOptions has been removed as of ZIM Cat 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)    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. outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text 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    and background parameters are ignored if a backing parameter is set backgroundBorderColor - (default null) the background stroke color 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 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 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    for labelHeight to work, the labelWidth must also be set    using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions maxSize - (default null) set to limit the font size when using labelWidth and labelHeight splitWords - (default false) set to true when lineWidth > 0 to split words at the line width 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 setColorRange(color1, color2) - set a color range for label - 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 showRollColor(visible) - default true to show roll color (used internally) cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy with properties such as x, y, etc. also copied    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String label - references the CreateJS Text object of the label text - references the text property of the CreateJS Text object size - the font size of the Label (without px) font - get or set the font of the text bold - get or set the bold (boolean) of the font 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 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the label    for instance, label.setColorRange(blue, pink) then label.colorRange = .5    will set the color of the label to half way between blue and pink    label.animate({color:red}, 1); is a shortcut to animate the colorRange    label.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange rollColor - gets or sets the label rollover color labelWidth - the width at which the text wraps    currently does not work well with labelHeight and backgroundColor labelHeight - setting this and labelWidth will change the font size to fit within the specified dimensions outlineLabel - reference to the outline CreateJS Text object if there is an outline backing - access to backing object background - access to background Rectangle if backgroundColor is set enabled - default is true - set to false to disable 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties EVENTS See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 18999 ▶︎ LabelOnPath(label, path, percentAngle, percents, showPath, allowToggle, interactive, onTop, rtl, style, group, inherit)
LabelOnPath(label, path, percentAngle, percents, showPath, allowToggle, interactive, onTop, rtl, style, group, inherit)
LabelOnPath zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a label along a path of a Squiggle or Blob - which can be interactive, fixed, toggled or hidden A list of percentages for where the letters are can be provided to move around letters See: https://zimjs.com/explore/labelonpath.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 lop = new LabelOnPath({
   label:"Hello World",
   // label:new Label({text:"JELLO JIGGLES!", size:50}),
   // path:new Blob(),
   // path:new Squiggle({
   //     color:lighter,
   //     thickness:4,
   //     points:[[0,75,0,0,-100,200,100,-200],[300,75,0,0,-100,200,100,-200]]
   // }).transformPoints("scaleX",2).transformPoints("rotation",0),
   percentAngle:100, // default
   showPath:false, // default
   allowToggle:true, // default
   interactive:true, // default
   onTop:false // default
}).center();
zog(lop.text)

frame.on("keydown", ()=>{
   // shows percent spacing of letters along path
   // could pass [results] in as an array to percents parameter of LabelOnPath
   zog(lop.percents.toString());
   // uncomment to record the path
   // could pass this in as the points parameter to start with a given path
// lop.path.recordPoints(true);
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) label - (default "Label on Path") a String or a ZIM Label    can set any label properties such as color, size, font, etc. on the label passed in path - (default new Squiggle()) a ZIM Squiggle or ZIM Blob    can set any properties such as color, points, etc. on the shape passed in percentAngle - (default 100) from 0-100 (or beyond in either direction) as to how much to tilt the letters percents - (default null) an array of percentage locations of the letters along the line - should match number of letters showPath - (default true) Boolean to show path at start allowToggle - (default true) Boolean to allow user to toggle path off and on interactive - (default true) Boolean to allow user to change path with controls, drag or add and remove points    can also set these individually on the path onTop - (default false) - Boolean to set path on top when dragged rtl - (default DIR) - set to true to start letters at right end of path - will just reverse the Blob or Squiggle path. 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 toggle(state) - leave off state to toggle path to opposite state. Use true to hide and false to show - returns object for chaining hidePath() - hides path - returns object for chaining showPath() - shows path - returns object for chaining resize() - if not interactive, call this to update the text on the path - returns object for chaining cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining    Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0) 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 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - the name of the class as a String text - get or set the text on the path path - read-only access to path - but can manipulate the path letters - access to ZIM Container of labels used for letters    for instance labels.loop(function (label) {label.color = red;});    or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200}); numLetters - how many letters - same as letters.numChildren percents - access to the array of percents for letter positioning - resize() after changing unless interactive which auto resizes color - get or set the color of the text allowToggle - get or set the Boolean to allow toggling the path interactive - get or set the Boolean to allow interaction with the path 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 19295 ▶︎ LabelOnArc(label, size, font, color, radius, flip, spacing, letterSpacing, angles, showCircle, arcColor, arcBorderColor, arcBorderWidth, radiusSpread, rtl, style, group, inherit)
LabelOnArc(label, size, font, color, radius, flip, spacing, letterSpacing, angles, showCircle, arcColor, arcBorderColor, arcBorderWidth, radiusSpread, rtl, style, group, inherit)
LabelOnArc zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a label along an arc - see also LabelOnPath - for a more interactive version Used internally for making labels on Radial and RadialMenu objects 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 loa = new LabelOnArc({
   label:"Hello World"
}).center();
zog(loa.text);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) label - (default "Label on Arc") a String or a ZIM Label    can set any label properties such as color, size, font, etc. on the label passed in size - (default 30) the font size of the label font - (default "verdana") the font of the label - can load custom fonts in Frame() or frame.loadAssets() color - (default white) a color for the text can be any ZIM or CSS color radius - (default 100) the radius of the circle to apply the arc of the text flip - (default false) set to true to flip text if between 90 and 270 spacing - (default 0) the space between the Label and the arc - varies with different fonts letterSpacing - (default 5) - the space between letters angles - (default null) optionally specify an array of angles for the letters    this will override letterSpacing - see also angles property to receive an array of angles showCircle - (default false) set to true to see a circle - then use circle property to adjust if desired arcColor - (default null) set to a color to see a filled arc arcBorderColor - (default null) the borderColor of the arc acrBorderWidth - (default 2 if arcBorderColor) the borderWidth of the arc radiusSpread - (default false) set to true to keep same letter angles as radius is changed    ignored if angles are provided rtl - (default ZIM DIR) - set to true for right to left text 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 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 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - the name of the class as a String text - get or set the text on the arc radius - get or set the radius of the arc (see radiusSpread parameter too) labels - an array of ZIM Label objects for the letters letters - access to ZIM Container of labels used for letters    for instance labels.loop(function (label) {label.color = red;});    or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200}); numLetters - how many letters - same as letters.numChildren letterHeight - get the height of letters color - get or set the text color circle - access to the circle object arc - access to the arc object angles - access to the array angles for letter positioning    use angles.toString() to log angle data (for kerning)    this can be modified and passed in as an angles property to start innerRadius - the inside radius at the bottom of the text outerRadius - the outside radius at the top of the text 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 19546 ▶︎ LabelLetters(label, align, valign, letterSpacing, letterSpacings, lineSpacing, lineSpacings, lineHeight, lineAlign, lineValign, cache, rtl, style, group, inherit)
LabelLetters(label, align, valign, letterSpacing, letterSpacings, lineSpacing, lineSpacings, lineHeight, lineAlign, lineValign, cache, rtl, style, group, inherit)
LabelLetters zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Splits apart a ZIM Label into labels per characater to allow manipulation of each character - animation, kerning, etc. SEE: https://zimjs.com/ten/radial.html - (ZIM TEN) the title and subtitle Also accepts basic HTML-like tags to allow Canvas text to have multi-formatting. 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)
   .center()
   .animate({
      props:{scale:1.5, rotation:-10},
      wait:.5,
      time:.2,
      sequence:.05,
      rewind:true
   });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) label - (default "Label Letters") a String or a ZIM Label    can set any label properties such as color, size, font, etc. on the label passed in    can pass in a string with basic "old fashioned" HTML tags as follows:    <b>bold</b> - or <strong>bold</strong>    <i>italic</i> - or <em>italic</em>    <u>underline</i> - can use this with <a> to make a classic underlined link    <a href=url target=_blank>link</a>    <font       color=zimColor       backgroundColor='htmlColor'       rollBackgroundColor=#hexColor       size=20       family=verdana       group=groupStyle>font</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    also see lineAlign for alignment of lines 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    to use letterSpacing and a backgroundColor use the backing parameter of Label instead of backgroundColor    or use letterSpacings (see below) to set specific spacings (kerning) on letters letterSpacings - (default null) - an array of the space between letters each letter    any value here will override the letterSpacing    0 is the index for the space between first and second letter    the length of this should be one less than the number of letters lineSpacing - (default 5) - the space between lines (not including lineHeight) 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 <br> 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 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 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 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 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - the name of the class as a String text - get the text of the original Label labels - an array of ZIM Label objects for the letters numLetters - how many letters (same as numChildren) 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 20153 ▶︎ Emoji(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit)
Emoji(code, size, monochrome, italic, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backing, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, style, group, inherit)
Emoji zim class - extends a zim.Label which extends a zim.Container DESCRIPTION Shows an emoji in a Label - an emoji is just text. This helps treat the emoji as an image and works in conjunction with ZIM EmojiPicker SEE: ZIM EmojiPicker() in COMPONENTS below ColorPicker(). SEE: https://zimjs.com/nft/bubbling/emoji.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
// Go to https://emojipedia.org/ and find an emoji page
// copy the emoji or use the copy link and paste into the string below
new Emoji("paste the unicode icon here in string")
   .center()
   .drag();
EXAMPLE
// or use UTF code from https://zimjs.com/emoji
new Emoji("\ud83c\udf47") // grapes using UTF codes
   .center()
   .drag();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** 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 code |ZIM VEE| - (default \ud83d\ude42") the Unicode Character or the Emoji from https://emojipedia.org/    or pass in UTF codes such as "\ud83d\ude42".    To convert from Unicode to UTF use https://zimjs.com/emoji/ (also see MORE link at bottom of page) 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 - (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    and background parameters are ignored if a backing parameter is set backgroundBorderColor - (default null) the background stroke color 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] 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 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 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 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - the name of the class as a String 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 20323 ▶︎ Button(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)
Button(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)
Button zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a button with rollover and many more features - see parameters. You will need to pass in a Label to change the font properties of the button from the default. You will then need to add the button to the stage and add a mousedown or click event. Button rollover is done automatically. Generally, there are three modes for a button - normal, toggle and wait. Each of these have backgroundColor, color, backing and icon displays and each of these have up (normal), roll and down states. Down states were added in ZIM ZIM 01 SEE https://zimjs.com/zim/button.html DISPLAYS FOR NORMAL MODE WITH THREE STATES EACH backgroundColor, rollBackgroundColor, downBackgroundColor, color, rollColor, downColor, backing, rollBacking, downBacking, icon, rollIcon, downIcon ** The normal mode also has borderColor, borderWidth, rollBorderColor and downBorderColor inserted after the color set. The parameters are kept flat rather than grouped in {} object parameters in order to use ZIM DUO and STYLE The button parameters have indicators showing the subsections The normal mode is listed first, then general Button parameters such as corner, shadowColor, etc. The toggle and wait parameters are listed last. You can set a backing display object (Shape, Bitmap, Pattern, etc.) in place of the standard rectangle. You can set an icon display object in place of the standard text You can set the Button to toggle between text, backings or icons SEE the ZIM Pizzazz series for a growing selection of backings, patterns and icons https://zimjs.com/bits/view/pizzazz.html https://zimjs.com/bits/view/icons.html https://zimjs.com/patterns.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
new Button(200,60,"CLICK").center().tap(()=>{
   zog("clicking");
});

// OR add custom label (needed to change label color for instance)
var label = new Label({
   text:"POWER OPTION",
   size:40,
   backgroundColor:"violet",
   fontOptions:"bold"
});
new Button({
   label:label,
   width:390,
   height:110,
   backgroundColor:"purple",
   rollBackgroundColor:"MediumOrchid",
   borderWidth:8,
   borderColor:"violet",
   gradient:.3,
   corner:0
}).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** 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 width - (default 200) the width of the button or AUTO to fit width to label (see also autoPadding) height - (default 60) the height of the button or AUTO to fit height to label (see also autoPadding) 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    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 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 downBorderColor - (default rollBorderColor) the pressing down color of the border borderWidth - (default null) thickness of the border backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)    assumed to be center registration for easy positioning *** as with all backings    see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    https://zimjs.com/bits/view/pizzazz.html rollBacking - (default null) a Display object for the backing of the rolled-on button downBacking - (default null) a Display object for the backing of the pressed-down button icon - (default null) set to display object to add icon at the center of the button and remove label    assumed to be center registration for easy positioning *** as with all icons    https://zimjs.com/bits/view/icons.html rollIcon - (default null) set to display object to show icon on rollover downIcon - (default null) set to display object to show icon on press down ---------- GENERAL PARAMETERS corner - (default 10) the round of the corner (set to 0 for no corner)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft]    and [horizontal, vertical] pairs - see Rectangle() for more info dashed - (default false) set to true to turn the border to dashed - if the borderColor or borderWidth is provided 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 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 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 autoPadding - (default 20) 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 rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off ---------- TOGGLE MODE toggle - (default null) set to string to toggle with label - or set to true to activate toggle but keep label the same    the button will not toggle if there is a wait parameter set    see also toggle colors, backings and icons toggleBackgroundColor - (default backgroundColor) background color to make button when toggled rollToggleBackgroundColor - (default toggleBackgroundColor) background color for button when toggled and rolled over downToggleBackgroundColor - (default null) background color for button when toggled and pressed down toggleColor - (default label's color) color to make text when toggled rollToggleColor - (default label's roll color) color for text when toggled and rolled over downToggleColor - (default null) color for text when toggled and pressed down toggleBacking - (default null) set to display object to set a different backing for toggled state rollToggleBacking - (default null) set to display object to set a backing for the rolled toggle state downToggleBacking - (default null) set to display object to set a backing for the pressed down state toggleIcon - (default null) set to display object to add icon at the center of the button and remove label in toggle state rollToggleIcon - (default null) set to display object to show icon on rollover in toggle state downToggleIcon - (default null) set to display object to show icon on press down in toggle state toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle ---------- WAIT MODE wait - (default null) - String word for button to show when button is pressed and a wait state is desired    LOADING: this can be used as a loading message - so change the button to "LOADING"    When the asset has loaded, use the clearWait() method to return to the normal button or toggled button state    CONFIRMING: this can also be used to confirm user action rather than a full new confirm panel    Set wait:"CONFIRM", set the waitBackgroundColor and rollWaitBackground parameters to red and the waitTime parameter to 4    In a button mousedown (must use mousedown - not click or tap if ACTIONEVENT is mousedown - the default),    check if the waiting property is true to test for confirmation    The waiting property will not be true for the first button press but will be true during the wait period    Perhaps set the waitModal parameter to true to clearWait() if the user clicks off the button    Use the clearWait() method to clear or cancel the wait status - for instance, if the pane the button is in is closed waitTime - (default 5 seconds) seconds to show wait state before reverting to normal button (also see ZIM TIME constant) waitBackgroundColor - (default red) background color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollBackgroundColor) background color for button when waiting and rolled over downWaitBackgroundColor - (default null) background color for button when waiting and pressed down waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (default label's roll color) color for text when waiting and rolled over downWaitColor - (default label's roll color) color for text when waiting and pressed down waitBacking - (default null) set to display object to set a different backing for wait state rollWaitBacking - (default null) set to display object to a different roll backing for wait state downWaitBacking - (default null) set to display object to a different pressed-down backing for wait state waitIcon - (default null) set to display object to add icon at the center of the button and remove label in wait state rollWaitIcon - (default null) set to display object to show icon on rollover in wait state downWaitIcon - (default null) set to display object to show icon on pressed down in wait state waitModal - (default false) set to true to clearWait() if the user clicks off the button waitEnabled - (default true) set to false to disable button while wait is in progress ---------- FINAL PARAMETERS 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 setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)    Backing types are: "backing", "rollBacking", "downBacking", "toggleBacking", "rollToggleBacking", "downToggleBacking", "waitBacking", "rollWaitBacking", "downWaitBacking"    note - all backing will have a pattern property if a pattern is set as a backing setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)    Icon types are: "icon", "rollIcon", "downIcon", "toggleIcon", "rollToggleIcon", "downToggleIcon", "waitIcon", "rollWaitIcon", "downWaitIcon" toggle(state) - forces a toggle of label, backing and icon if set    state defaults to null so just toggles if left blank    pass in true to go to the toggled state and false to go to the original state    returns object for chaining removeRoll() - force rollover state off wait() - forces a wait state - with wait text, backings and icons if set clearWait() - clears a wait state of the button - sets it back to normal removeWait() - removes (and clears) a wait state of the button so it will not trigger again hasProp(property as String) - returns true if property exists on object else returns false clone(exact) - makes a copy with properties such as x, y, etc. also copied    exact - will ignore ZIM VEE values and clone the original values 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 text - references the text property of the Label object of the button label - gives access to the label color - get or set non-rolled on label color (if no icon specified) rollColor - get or set rolled on label color backgroundColor - get or set non-rolled on backing color (if no backing specified) rollBackgroundColor - get or set rolled on backing color rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off borderColor - get or set non-rolled on border color rollBorderColor - get or set the border rolled color hitPadding - extra padding for interactivity - see hitPadding parameter for extra notes backing - references the backing of the button    use setBacking() to change as with all backings    note - all backings will have a pattern property if a pattern is set as a backing rollBacking - references the rollBacking (if set) downBacking - references the downBacking (if set) icon - references the icon of the button (if set)    use setIcon() to change as with all icons rollIcon - references the rollIcon (if set) downIcon - references the downIcon (if set) rolled - read-only true if button is being rolled over else false pressed - read-only true if button is being pressed else false toggled - read-only true if button is in toggled state, false if button is in original state    note: on mousedown toggle may not be switched over - except on mobile    so would recommend for consistency checking on click or tap or mouseup toggleBacking - references the toggle backing (if set) rollToggleBacking - references the toggle roll backing (if set) downToggleBacking - references the toggle down backing (if set) toggleIcon - references the toggle icon (if set) rollToggleIcon - references the toggle roll icon (if set) downToggleIcon - references the toggle down icon (if set) waiting - read-only true if button is in the waiting state within wait time    note: must test this in a mousedown function not click or tap waitBacking - references the wait backing (if set) rollWaitBacking - references the wait roll backing (if set) downWaitBacking - references the wait down backing (if set) waitIcon - references the wait icon (if set) 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties for example seeing toggle take effect EVENTS dispatches a "waited" event if button is in wait state and the wait time has completed See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 21387 ▶︎ CheckBox(size, label, startChecked, color, backgroundColor, borderColor, borderWidth, corner, margin, indicatorType, indicatorColor, tap, rtl, style, group, inherit)
CheckBox(size, label, startChecked, color, backgroundColor, borderColor, borderWidth, corner, margin, indicatorType, indicatorColor, tap, rtl, style, group, inherit)
CheckBox zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A checkbox that when pressed toggles the check and a checked property. 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 checkBox = new CheckBox(50, "TEST").center().change(()=>{
   zog(checkBox.checked); // will be true then false, etc.
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** 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 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] margin - (default 10) is on outside of box so clicking or pressing is easier indicatorType - (default check) could be square (box) or x indicatorColor - (default borderColor or black if no border) the color of the indicator tap - (default false) set to true to tap to activate CheckBox rather than mousedown or click rtl - (default DIR=="rtl") set to true to force CheckBox to the right of the text 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 setChecked(Boolean) - defaults to true to set button checked (or use checked property) 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 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 checked - gets or sets the check of the box label - gives access to the label text - the text of the label box - the Rectangle of the checkBox 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when pressed on but not when the checked property is set ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 21666 ▶︎ RadioButtons(size, buttons, vertical, color, backgroundColor, spacing, margin, always, indicatorColor, selectedIndex, rtl, style, group, inherit)
RadioButtons(size, buttons, vertical, color, backgroundColor, spacing, margin, always, indicatorColor, selectedIndex, rtl, style, group, inherit)
RadioButtons zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A radio button set that lets you pick from choices. Radio buttons can display radio buttons vertically (default) or horizontally. 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 radioButtons = new RadioButtons(50, ["ONE", "TWO", "THREE"]).center().change(()=>{
   zog(radioButtons.text); // will be ONE, TWO or THREE
   zog(radioButtons.selectedIndex); // will be 0, 1, or 2
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) size - (default 60) in pixels 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 backgroundColor - (default "rgba(255,255,255,.8)") the background color of the circle borderColor - (default "#111") 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 always - (default false) if set true, cannot click on selection to unselect it indicatorColor - (default borderColor or black) the color of the indicator selectedIndex - (default 0) - set the selectedIndex at start rtl - (default DIR=="rtl") - set to true to put text on left of RadioButtons 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 setSelected(num) - sets the selected index (or use selectedIndex) -1 is default (none) 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 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 selected - gets the selected object - selected.label, selected.id, etc. selectedIndex - gets or sets the selected index of the buttons label - current selected label object text - current selected label text id - current selected id buttons - an array of button Container objects holding the shape and label (note - different than buttons parameter) labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; indicators - an array of the zim Shape dot objects. indicators[0].color = "yellow"; enabled - default is true - set to false to disable 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when pressed but not when selectedIndex is set then ask for the properties above for info ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 22008 ▶︎ Toggle(width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, tap, toggleBackgroundColor, color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group, inherit)
Toggle(width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, tap, toggleBackgroundColor, color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group, inherit)
Toggle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A Toggle button that toggles off and on - with optional labels Thanks Andi Erni for the initial design and coding of the Toggle. See: https://zimjs.com/explore/toggle.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 toggle = new Toggle({label:"ON"}).center().change(()=>{
   zog(toggle.toggled);
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 80) the width of the toggle (less labels) height - (default 50) the height of the toggle label - (default null) an optional ZIM Label (or text for default label properties)    also see labelLeft for left side text 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") 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 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] indicatorCorner - (default 0) change the corner radius of a rectangle toggleType - or an array of corners [topLeft, topRight, bottomRight, bottomLeft] 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 time - (default .1) time in seconds for toggle to animate (also see ZIM TIME constant) labelLeft - (default null) an optional ZIM Label for the left side of the toggle (or text for default label properties) 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 toggle(state) - toggle the toggle - state defaults to true - set to false to un-toggle 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 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 toggled - gets and sets the toggled state of the toggle text - gets the selected label text or "on" / "off" if no label indicator - access to the indicator object background - access to background Rectangle label - access to the label if provided labelLeft - access to the label on the left if provided enabled - default is true - set to false to disable 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 "change" event when pressed but not when toggle() is used ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 22263 ▶︎ 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, bold, italic, variant, splitWords, style, group, inherit)
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, 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 DESCRIPTION A Tip() can be used to show some extra information - the tip disappears after an amount of time Tip has easy positioning along the inside edges or the outside edges of a target. NOTE Tip places the tip on the stage when the show() method is called You can reposition with .mov() etc. 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) EXAMPLE
new Tip("Press Circle").show(1); // wait one second and show tip at 40 pixels from bottom right

const circle = new Circle().center().tap(()=>{
   circleTip.show();
});
const circleTip = new Tip({
   text:"This is a default ZIM Circle",
   backgroundColor:white,
   color:black,
   outside:true, // outside the circle
   target:circle,
   align:"center",
   valign:"bottom",
   margin:14,
   corner:0,
   size:20
});
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") margin - (default 40) distance from side (unless centered) in pixels marginH - (default margin) distance from horizontal edges marginV - (default margin) distance from vertical edges outside - (default false) set to true to place Tip on outside of container target - (default zdf's stage) tip is placed on stage relative to container delay - (default 0) set the default delay for show() - can override with show() parameters time - (default 2) set the default time for show() - can override with show() parameters 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) 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" lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap lineHeight - (default getMeasuredLineHeight) set to number to adjust line height fontOptions - (default null) css VALUES as a single string for font-style font-variant font-weight    eg. "italic bold small-caps" or just "italic", etc. backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc. outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text 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    and background parameters are ignored if a backing parameter is set backgroundBorderColor - (default null) the background stroke color 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 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 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    for labelHeight to work, the labelWidth must also be set    using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions maxSize - (default null) set to limit the font size when using labelWidth and labelHeight bold - (default false) set to true to bold the tip italic - (default false) set to true to italic the tip variant - (default false) set to true to set the tip to small caps splitWords - (default false) set to true to split words when wrapping 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 show(delay, time) - show the tip - delay in s defaults to 0 and time in s defaults to 2 (also see ZIM TIME constant)    default delay and time can be set with main default and time parameters for Tip() hide() - hides tip - show() will also hide the tip automatically after the time provided clear() - hides tip and removes the call to a delayed tip using a delay time in show() 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 ALSO see all methods of a Label() such as setColorRange(), etc. 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 align - get or set the horizontal alignment valign - get or set the vertical alignment text - get or set the text of the Tip ALSO see all properties of a Label() such as size, color, etc. 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 22525 ▶︎ Pane(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)
Pane(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)
Pane zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a window for alerts, etc. You need to call the pane.show() to show the pane and pane.hide() to hide it. You do not need to add it to the stage - it adds itself centered. 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)
EXAMPLE
const pane = new Pane({width:600, height:250, modal:false, displayClose:false});
const cancel = new Button(220, 100, "CANCEL", "red").center(pane).mov(-130);
const confirm = new Button(220, 100, "CONFIRM", "green").center(pane).mov(130);
cancel.on("click", ()=>{pane.hide();});
confirm.on("click", ()=>{zgo("http://zimjs.com")});
pane.show(); // pressing anywhere will close pane (see parameters for options)
EXAMPLE
// as above but using a callback function in show()
const pane = new Pane({width:600, height:250, modal:false, displayClose:false}).show(confirm=>{
   if (confirm) zgo("http://zimjs.com");
});
const cancel = new Button(220, 100, "CANCEL", "red").center(pane).mov(-130).tap(()=>{
   pane.hide(false);
});
const confirm = new Button(220, 100, "CONFIRM", "green").center(pane).mov(130).tap(()=>{
   pane.hide(true);
});
EXAMPLE
// as above but using CONTENT CONFIG OBJECT
const pane = new Pane({
   width:600,
   height:250,
   modal:false,
   displayClose:false,
   content:{
      buttonScale:1,
      buttons:[
         {
            label:"CANCEL",
            bgColor:"red",
            call:()=>{pane.hide();}
         }, {
            label:"CONFIRM",
            bgColor:"green",
            call:(button)=>{zgo("http://zimjs.com");}
         }
      ]
   }
}).show();
EXAMPLE
// custom backing with ZIM Pizzazz 3
// up top link to https://zimjs.org/cdn/pizzazz_03.js
new Pane({
   label:new Label({color:white, text:"STOP", size:50}),
   backing:pizzazz.makePattern({
      type:"stripes",
      colors:series(red,black),
      rows:20
   }).alp(.8)
}).show();
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.    a content configuration object {} with the following properties - any are optional:       header - a ZIM DisplayObject for the top of the content       message - text that will put into a ZIM Label - default darker - see color property       display - a ZIM DisplayObject for beneath the message        buttons - an array of ZIM Button objects or configuration objects {} as follows:          {label, color, rollColor, backgroundColor, rollBackgroundColor, call}          with call being a callback function for when the button is pressed       buttonScale - the scale for the buttons       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 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 corner - (default 20) is the corner radius - set to 0 for no corner    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] backdropColor - (default "rgba(0,0,0,.2)") the color of the background that fills the stage shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow shadowBlur - (default 20) how blurred the shadow is if shadow is set center - (default true) centers the pane    if center is false you will have to set x and y for the pane    the registration point and the origin inside the pane is in the center    you can adjust the label placement by changing its x and y or registration point displayClose - (default true) closes the Pane if display backing is pressed    if draggable is set to true, displayClose will automatically be set to false backdropClose - (default true) closes the Pane if backdrop is pressed backing - (default null) a Display object for the backing of the pane (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    as well as patterned backings using Pizzazz 3 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 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 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 show(call, params) - shows the pane (returns the pane for chaining)    pass in an optional callback function that will be called when the pane closes    pass in an optional params object that will be passed to the callback when the pane closes    also see the closeCall and closeParams property to set these dynamically    for instance, if the pane has YES and NO buttons, the closeParams can be set to true or false    for easy results to an option pop-up    (as of ZIM ZIM 01 can also use pos(), loc(), center(), etc.) hide(params, callEvent) - hides the pane    params will set the closeParams property that gets sent to a callback function in the show()    callEvent defaults to false - set to true to also call close event    (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 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 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 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 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()       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       display- reference to the display if provided       buttons - an array of the Button objects if provided       config - the original content config object {} titleBar - gives access to the titleBar Container - which also has a background property titleBarLabel - gives access to the titleBar label toggled - read-only Boolean property as to whether pane is showing close - access to the ZIM Shape if there is a close X backdrop - reference to the backdrop that covers the stage container - get or set the container the pane will be added to resetX - if reset is true you can dynamically adjust the position if needed resetY - and the y position for reset... enabled - set to false to disable component 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "closing" event when about to be closed - good for reloading a game for instance dispatches a "close" event when closed by clicking on backing, display, close, etc. when applicable    see also call and params parameters of show() plus closeCall and closeParams properties    see also params parameter of hide() which also sets the closeParams property dispatches a "change" event when closed by clicking on backing, display, close, etc. when applicable dispatches a "fadedin" event if fadeTime is set and pane has finished its fade in animation dispatches a "fadedout" event if fadeTime is set and pane has finished its fade out animation ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 23062 ▶︎ Panel(width, height, content, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, backgroundColor, borderColor, borderWidth, corner, close, closeColor, next, nextColor, extraButton, collapse, collapseColor, collapsed, align, shadowColor, shadowBlur, draggable, boundary, style, group, inherit)
Panel(width, height, content, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, backgroundColor, borderColor, borderWidth, corner, close, closeColor, next, nextColor, extraButton, collapse, collapseColor, collapsed, align, shadowColor, shadowBlur, draggable, boundary, style, group, inherit)
Panel zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A simple panel with titleBar and optional arrow for more panels. Panel can be set draggable and can have a collapse button and a close button See: https://zimjs.com/explore/panel.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
// make a panel with two pages
const panel = new Panel({titleBar:series("TODAY", "TOMORROW")})
.center();

// content for panel 1
const today = new Circle(30, yellow);
panel.add(today,true); // center on content

// content for panel 2
const tomorrow = new Label("-30");

// event to change content as panels change
panel.on("change", ()=>{
   if (today.parent) {
      panel.add(tomorrow, true, true); // center and replace
   } else {
      panel.add(today, true, true); // center and replace      
   }
   stage.update();
});
EXAMPLE
const panel = new Panel({
   width:400,
   height:250,
   bgColor:new GradientColor([black,dark],90),
   titleBar:"CONTENT",
   draggable:true,
   content:{
      message:"We shall greet you!",
      color:lighter, // override default darker
      display:new TextInput({placeholder:"enter name"}).sca(.7),
      align:CENTER,   // default
      spacingV:25,    // 20 is default
      spacingH:10,    // default
      buttonScale:.5, // default
      buttons:[ // or just a single button object
         {
            label:"GREET",
            bgColor:new GradientColor([green,blue],90),
            width:300,
            call:(button)=>{
               new Emitter({
                  obj:new Label("Hello "+panel.display.text, 80, null, [green,blue,orange,yellow,pink]),
                  startPaused:true,
                  shrink:false,
                  life:2,
                  gravity:2,
                  force:{min:2,max:6}
               }).loc(panel).spurt(20).on("spurtfizzed",e=>{e.target.dispose();});
            }
         }, {
            // button:new Button(), // can also specify a custom Button
            label:"CLEAR",
            bgColor:new GradientColor([yellow,orange],90),
            call:(button)=>{panel.display.text="";}
         }
      ]
   }
}).centerReg();
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) width - (default 250) the width of the panel height - (default 300) the height of the panel content - (default null) optional content to be centered in one of three formats:    a string or number to add a ZIM Label - default white    a ZIM DisplayObject such as a Circle or a Container with more objects, etc.    a content configuration object {} with the following properties - any are optional:       header - a ZIM DisplayObject for the top of the content       message - text that will put into a ZIM Label - default color white - see color property       display - a ZIM DisplayObject for beneath the message        buttons - an array of ZIM Button objects or configuration objects {} as follows:          {label, color, rollColor, backgroundColor, rollBackgroundColor, call}          with call being a callback function for when the button is pressed       buttonScale - the scale for the buttons       color - the color of the message       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 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 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] close - (default false) - add a close icon top right closeColor - (default titleBarColor) the color of the close icon next - (default true if more than one panel) set to false to not show an next arrow if multiple panels nextColor - (default titleBarColor) the color of the next icon extraButton - (default null) creates a little square button with the letter R for reset    this is made with the group style id of "extraButton"    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 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    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 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() 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 add(content, index, center, replace) - add content 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 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    event (default false) will dispatch a change event if nextPanel is called hasProp(property as String) - returns true if property exists on object else returns false collapse(state) - state defaults to true to collapse or set to false to expand collapsed panel    must start with the collapse parameter set to true    also see collapsed property 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 contentContainer - ZIM Container used to hold added content (formerly the content property)    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()       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       display- reference to the display if provided       buttons - an array of the Button objects if provided       config - the original content config object {} panelHeight - get and set the height of the panel without scaling it as height does (for width, remake the Panel object) titleBar - access to the titleBar container label - access to the label of the current panel text - access to the text of the current panel titleBar - gives access to the titleBar Container - which also has a background property titleBarLabel - gives access to the titleBar label closeIcon - access to the close button collapseIcon - access to the ZIM Shape if there is a collapse triangle collapsed - get or set whether the panel is collapsed - must start with collapse parameter set to true    also see collapse() method arrow - access to the next arrow background - access to the background Rectangle extraButton - access to the Label for the extra button if extraButton parameter is set to true    use this to set the text in the button (a one letter button is expected - for instance, i for info, R for reset, etc.) overlay - access to the overlay Rectangle used if enabled = false 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 "change" event when arrow is pressed to go to the next panel dispatches a "close" event when closed with close button if there is a close button dispatches a "collapse" event if collapsing dispatches a "expand" event if expanding after being collapsed ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 23539 ▶︎ Window(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)
Window(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)
Window zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a window for content that can be swiped and scrolled. NOTE if zim namespace zns = true then this overwrites a JS Window - so the JS Window is stored as document.window NOTE set the enable property to false if animating the position of the whole Window then set the enable property to true on the animate call function. See update() method for more. NOTE to add ZIM Swipe() to objects in window set the overrideNoSwipe parameter of Swipe to 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
const w = new Window({scrollBarDrag:true, padding:20}).center();
const t = new Tile(new Circle(20, red), 4, 20, 20, 20);
w.add(t);
// the above would only drag on the circles (or the scrollbars)
// adding a Rectangle to help dragging
w.add(new Rectangle(w.width-20,t.height,dark), 0);
// or could have added it to the bottom of the Tile
// new Rectangle(w.width-20,t.height,dark).addTo(t).bot();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) the width of the window height - (default 200) the height of window - including the titleBar if there is a titleBar content - (default null) optional content to be centered in one of three formats:       a string or number to add a ZIM Label - default white    a ZIM DisplayObject such as a Circle or a Container with more objects, etc.    a content configuration object {} with the following properties - any are optional:       ** see Panel() and Pane() for examples of content configuration object being used       header - a ZIM DisplayObject for the top of the content       message - text that will put into a ZIM Label - default color white - see color property       display - a ZIM DisplayObject for beneath the message        buttons - an array of ZIM Button objects or configuration objects {} as follows:          {label, color, rollColor, backgroundColor, rollBackgroundColor, call}          with call being a callback function for when the button is pressed       buttonScale - the scale for the buttons       color - the color of the message       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 borderWidth - (default 1) the thickness of the border padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical)    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    also can set swipe to just vertical or horizontal scrollBarActive - (default true) shows scrollBar (set to false to not) scrollBarDrag - (default false) set to true to be able to drag the scrollBar scrollBarColor - (default borderColor) the color of the scrollBar 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 slide - (default true) Boolean to throw the content when drag/swipe released slideDamp - (default .6) amount the slide damps when let go 1 for instant, .01 for long slide, etc. slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal"    slides past bounds and then snaps back to bounds when released    vertical snaps when dragging up and down but not if dragging horizontal 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) 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 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 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 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 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    are set to visible false if their bounds are not hitting the stage bounds - thanks Ami Hanya for the suggestion    also see optimize property 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 add(obj, index, center, replace) - supports DUO - parameters or single object with properties that match parameters    adds obj to content container of window (at padding) must have bounds set    it is best to position and size obj first before adding    otherwise if adjusting to outside current content size then call update()    index is the level or layer in the content with 0 being at the bottom    center will center the content in the visible window    replace defaults to false and if set to true, removes all content then adds the obj.    returns window for chaining remove(obj) - removes object from content container of window and updates - returns window for chaining removeAll() - removes all objects from content container of window and updates - returns window for chaining resize(width, height) - resizes the Window without scaling the content (also calls update() for scroll update)    width and height are optional - returns window for chaining update() - resets window scrolling if perhaps the content gets bigger or smaller    update() does not quite update the dragBoundary due to a timeout in waiting for scrolls to be set    so if animating the position of a window, set the enable property to false before animating    then set the enable property to true on the animate call function cancelCurrentDrag() - stop current drag on window - but add dragging back again for next drag fullSize(state) - state defaults to true to set window to fullsize or set to false to go back to normal    must start with the fullSize parameter set to true    also see fullSized property collapse(state) - state defaults to true to collapse or set to false to expand collapsed window    must start with the collapse parameter set to true    also see collapsed property clone(recursive) - makes a copy with properties such as x, y, etc. also copied    recursive (default true) clones the window content as well (set to false to not clone content) 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 backing - CreateJS Shape used for backing of Window 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()       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       display- reference to the display if provided       buttons - an array of the Button objects if provided       config - the original content config object {} optimize - see optimize parameter - set to true (default) or false to optimize scrolling of Window enabled - get or set whether the Window is enabled scrollEnabled - get or set whether the Window can be scrolled scrollBar - data object that holds the following properties (with defaults):    you can set after object is made - call window.update() to see change    scrollBar.horizontal = zim Shape // the horizontal scrollBar rectangle shape    scrollBar.vertical = zim Shape // the vertical scrollBar rectangle shape    scrollBar.color = borderColor; // the color of the scrollBar    scrollBar.size = 6; // the width if vertical or the height if horizontal    scrollBar.minSize = 12; // for the height if vertical or the width if horizontal    scrollBar.spacing = 3 + size + borderWidth / 2;    scrollBar.margin = 0; // adds extra space only at end by scrollBars    scrollBar.corner = scrollBar.size / 2;    scrollBar.showTime = .5; // s to fade in    scrollBar.fadeTime = 3; // s to fade out scrollX - gets and sets the content x position in the window (this will be negative) scrollY - gets and sets the content y position in the window (this will be negative) scrollXMax - gets the max we can scroll in x based on content width - window width (plus padding and margin) scrollYMax - gets the max we can scroll in y based on content height - window height (plus padding and margin) titleBar - access to the ZIM Container for the titleBar if there is a titleBar also has a backing property titleBarLabel - access to the ZIM Label of the titleBar if there is a titleBar closeIcon - access to the ZIM Shape if there is a close X fullSizeIcon - access to the ZIM Container if there is a fullSize icon fullSized - get or set whether the window is full sized - must start with fullSize parameter set to true    also see fullSize() method collapseIcon - access to the ZIM Shape if there is a collapse triangle collapsed - get or set whether the window is collapsed - must start with collapse parameter set to true    also see collapse() method resizeHandle - access the ZIM Rectangle that makes up the resizeHandle when resizeHandle parameter is set to true    resizeHandle.removeFrom() would stop resize from being available and resizeHandle.addTo(window) would activate it again 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 "select" event when clicked on in a traditional manner (fast click with little movement) dispatches a "hoverover" event when rolled on without moving for 300 ms dispatches a "hoverout" event when not hovering due to movement or mouseout on the window dispatches a "scrolling" event when the window scrolls dispatches a "close" event when the window is closed with the x on the titleBar if there is a titleBar dispatches a "slidestart" event if slide is true and window starts sliding (on pressup) dispatches a "slidestop" event if slide is true and window stops sliding dispatches a "resize" event if resizing dispatches a "collapse" event if collapsing dispatches a "expand" event if expanding after being collapsed dispatches a "fullsize" event if made fullscreen 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 CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 24720 ▶︎ Page(width, height, color, color2, vertical, pattern, scalePattern, cache, style, group, inherit)
Page(width, height, color, color2, vertical, pattern, scalePattern, cache, style, group, inherit)
Page zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION ZIM Page() is a Container() with Rectangle() backing. For years, many questions were asked - how to make a page in ZIM. Now, we have decided to officially answer that! ZIM Page(). An easy way to handle linear gradients is provided as well as a custom background such as a ZIM Pizzazz pattern. To keep things brief, Page is expected to fit the stage. So border, corner, dashed, etc. has been left out. If the page is smaller and these are desired... old-school-it and make a Container and add the desired Rectangle. SEE: https://zimjs.com/cat/page.html SEE: Docs for ZIM Pages() as well to handle multiple pages. SEE: ZIM Panel(), ZIM Pane() and ZIM Window() for alternatives. NOTE A Page object will start with one child or two children if a pattern is specified. NOTE Do not use Page with Layout as it will overlay the region backgroundColors - instead use a Container 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 page = new Page(stageW, stageH, red, pink).addTo();
page.title = new Label("A Page!").loc(100,100,page);
page.content = new Circle().center(page);
page.nav = new Tabs().pos(0,100,CENTER,BOTTOM,page);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default zimDefaultFrame.width) the width of the Page    but backing is sized to screen.width if no width is provided height - (default zimDefaultFrame.height) the height of the Page    but backing is sized to screen.height if no height is provided color - (default zim.light) the color of the page color2 - (default null) a second color which would form a zim.GradientColor() as the color 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) 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")    FILL or "fill" fills the Page keeping proportion (formerly "biggest" or "outside")    FULL or "full" keeps both x and y scales - may stretch object (formerly "both") cache - (default false or true for gradient or pattern) whether the backing and pattern is cached 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 clone(recursive) - makes a copy with properties such as x, y, etc. also copied recursive (default false) - set to true to copy children of the object (these will not get custom properties, no drag, events, etc.) 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 backing - access the backing Rectangle pattern - access the pattern object if one is provided color - get or set the color of the backing Rectangle 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 24869 ▶︎ Layer(width, height, titleBar, titleBarContainer, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, borderWidth, borderColor, dashed, transformObject, titleBarWidth, titleBarHeight, titleBarX, titleBarY, titleBarDraggable, close, closeColor, closeBackgroundColor, closeIndicatorColor, anchor, style, group, inherit)
Layer(width, height, titleBar, titleBarContainer, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, borderWidth, borderColor, dashed, transformObject, titleBarWidth, titleBarHeight, titleBarX, titleBarY, titleBarDraggable, close, closeColor, closeBackgroundColor, closeIndicatorColor, anchor, style, group, inherit)
Layer zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Layer is a ZIM Container with transform controls. ZIM transform() objects have their mousechildren turned off so they can be dragged and transformed. This means there can be no interactivity inside the transformed object. Layer provides a solution to nest transformed objects in transformable containers. It does so by providing a titleBar that can be used to turn on and off the transform of the container and allow its contents to be transformed when the transform controls of the Layer are turned off. This is more than just hiding the transform tools but rather removing and adding them. The Layer titleBar will always remain visible on the stage If the Layer is moved (not by its titleBar) so that the titleBar hits the edge, then the titleBar will become anchored to the edge (unless anchor is set to false) This creates an independent titleBar that can be moved to any location. The titleBarPos() method can also be used to separate the titleBar at any time. Drop the titleBar on the top left corner of the Layer or doubleClick it to snap it back on to the layer NOTE Layers can be added to a Transform Manager and saved with the persist sytem. NOTE Layers can be added to Layers (nested) along with any other type of DisplayObject content. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) SEE: https://zimjs.com/explore/layer.html EXAMPLE
// adding the Layers above the content will allow pressing Layer titleBar objects inside other Layers
// adding everything right on the stage would not allow pressing titleBars inside other Layers - either way may be best, depending on content
const content = new Container(stageW, stageH).addTo();
const layers = new Container(stageW, stageH).addTo();

// create an outer layer with two inner layers - one holding a circle and the other two circles
const layer0 = new Layer(800, 500, "LAYER 0", layers).center(content);
const layer1 = new Layer(300, 400, "LAYER 1", layers).loc(50,50,layer0);
const circle1 = new Circle(50, pink).center(layer1).transform({visible:false});
const layer2 = new Layer(300, 400, "LAYER 2", layers).pos(50,50,true,false,layer0);
const circle2 = new Circle(50, green).center(layer2).mov(0, -80).transform({visible:false});
const circle3 = new Circle(50, blue).center(layer2).mov(0, 80).transform({visible:false});

// optionally store transforms
const t = new TransformManager([layer0, layer1, layer2, circle1, circle2, circle3], "layersID");
// t.clearPersist("layersID")

timeout(1, ()=>{
   layer2.resetTitleBar();
   layer2.turnOn();

   // if moving manually, must call resize()
   layer2.mov(30);
   layer2.resize();
   stage.update();
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 500) the width of the Layer Container height - (default 500) the height of the Layer Container not including the titleBar (which is not in the Container) 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 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    to adjust the transform controls border color use the transformObject parameter and set the borderColor property dashed - (default true) the dashed of the ghost outline when the Layer is not selected    to adjust the transform controls border dashed use the transformObject parameter and set the dashed property transformObject - (default {borderColor:selectedBackgroundColor}) any of the transform parameters as an object literal    certain properties are overwritten by Layer as follows:    {events:true, visible:false, ghostColor:borderColor, ghostWidth:borderWidth, ghostDashed:dashed, ghostHidden:true}    use the transformControls.show() to show the transform controls once the Layer is made for instance:    timeout(100, function(){layer.transformControls.show();}); // a timeout is needed as Layer gets created - sorry. titleBarWidth - (default 100 + 30 if close) the width of the titleBar. 30 pixels will be added if close is true titleBarHeight - (default 40) the height of the titleBar titleBarX - (default null) the starting x position of the titleBar - see also titleBarPos() and resetTitleBar() methods titleBarY - (default null) the starting y position of the titleBar - see also titleBarPos() and resetTitleBar() methods titleBarDraggable - (default true) set to false to not let the titleBar be dragged.    this is useful with the titleBarPos() to create a stationary menu for the layers - for instance along the edge like tabs close - (default true) - set to false to not use the close checkbox    WARNING: without the close checkbox, the user may make the layer bigger than the stage and not be able to deselect the layer closeColor - (default selectedBackgroundColor) the border of the close checkBox closeBackgroundColor - (default selectedBackgroundColor) the backgroundColor of the close checkBox closeIndicatorColor - (default selectedColor) the indicator color of the close checkBox anchor - (default true) set to false to not anchor the titleBar to the edge if dragged with the Layer (not the titleBar)    with anchor true, the user can dock the titleBar to the edges and then drag them to any desired location    the user can snap the titleBar back on the layer by dropping it on the top left corner of the layer or double clicking the titleBar 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 titleBarPos(x, y, right, bottom) - position the titleBar in the titleBarContainer - returns object for chaining    This will undock the titleBar from the Layer so it can be moved independently    unless titleBarDraggable is set to false    See also titleBarX and titleBarY parameters to start titleBars at a certain position resetTitleBar() - dock the titleBar back on the Layer - returns object for chaining toggle(state) - toggle the controls or turn on or off the controls by providing a Boolean state - returns object for chaining resize(dispatch) - resize the Layer and its children if Layer is manually adjusted - returns object for chaining    for instance, layer.x = 10; layer.resize(); otherwise, the transform controls are broken!    normal layer transforming using the controls automatically resize.    Setting dispatch to true will dispatch a "transformed" event 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 waiter for chaining) 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 transformControls - the transform transformControls object - see below for a description anchor - get or set whether the titleBar will anchor to the edges of the titleBarContainer toggled - read only if Layer has its transform turned on - or use transformControls.visible    use toggle(state) to toggle controls or pass in true for show controls or false for hide controls titleBar - access to the ZIM Container that holds the titleBar titleBarDraggable - get or set whether the titleBar can be dragged    use with titleBarPos() to permanently positing the titleBar checkBox - access to the ZIM CheckBox that shows when the Layer is active and close is true button - access to the ZIM Button that makes up the titleBar label - access to the ZIM Label that is on the Button for the titleBar 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 transformControls property described below for more options. 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. TRANSFORM CONTROLS OBJECT Layer receives a transformControls property This may be slightly delayed as Layer is prepared on stage var layer = new Layer().center(); timeout(100, function(){zog(layer.transformControls);}); // will probably do the trick The transformControls property holds the following: TRANSFORM CONTROL OBJECT PROPERTIES visible - read only whether the controls are visible ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost scaleControls - reference to the Container that holds the corner boxes for scaling stretchXControls - reference to the Container that holds the left and right boxes for stretching stretchYControls - reference to the Container that holds the top and bottom boxes for stretching rotateControls - reference to the Container that holds the outer circles for rotating TRANSFORM CONTROL OBJECT METHODS hide() - hides the controls - returns object for chaining show() - shows the controls - returns object for chaining recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES    if toJSON (default false) is set to true, the return value is a JSON string setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()    if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data    returns object for chaining remove(noHide) - removes the controls - set noHide true if already hidden add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show allowToggleOn() - sets the show / hide controls on with click allowToggleOff() - removes the show / hide controls on with click showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters hideGhost() - hide the ghost outline toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost    or set state to true to show ghost or false to not show ghost addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters removeGhost() - disable ghost outline functionality disable() - may show the controls if visible but cannot use them enable() - turns the using of the controls back on resize(dispatch) - call resize if the object is transformed in ways other than with the controls    set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager EVENTS dispatches a "transformed" event when being transformed    the transformed event object has a transformType property    the transformType property has values of "size", "move", "rotate", "stretch", "reg", "reset"    the transformType also might be "resize" if resize(true) is called to dispatch a transformed event    the transformed event object also has a pressup property that is true if on pressup and null if from pressmove dispatches "transformshow" and "transformhide" events for when click to hide or show controls If TransformManager() is used there are more events available such as "persistset", etc. See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 25407 ▶︎ Waiter(container, speed, foregroundColor, backgroundColor, corner, shadowColor, shadowBlur, fadeTime, style, group, inherit)
Waiter(container, speed, foregroundColor, backgroundColor, corner, shadowColor, shadowBlur, fadeTime, style, group, inherit)
Waiter zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a little animated three dot wait widget. You need to call waiter.show() to show the waiter and waiter.hide() to hide it. You do not need to add it to the stage - it adds itself centered. 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");
frame.on("complete", ()=>{
   waiter.hide();
   frame.asset("greeting.mp3").play();
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** 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 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] shadowColor - (defaults rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) the blur of the shadow if shadow is set fadeTime - (default 0) milliseconds to fade in and out 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 show() - shows the waiter (returns the waiter for chaining) hide() - hides the waiter toggle(state - default null) - shows waiter if hidden and hides waiter if showing (returns the object for chaining)    or pass in true to show waiter or false to hide waiter 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 waiter for chaining) 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 display - reference to the waiter backing graphic 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 See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 25639 ▶︎ ProgressBar(barType, foregroundColor, backgroundColor, borderColor, borderWidth, padding, label, color, labelPosition, percentage, corner, shadowColor, shadowBlur, backing, delay, fastClose, container, autoHide, style, group, inherit)
ProgressBar(barType, foregroundColor, backgroundColor, borderColor, borderWidth, padding, label, color, labelPosition, percentage, corner, shadowColor, shadowBlur, backing, delay, fastClose, container, autoHide, style, group, inherit)
ProgressBar zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a little progress bar that can be scaled if desired Pass in to progress parameter of the Frame or LoadAssets call to operate or use on its own with the show(), hide() methods and percent property 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 progressBar = new ProgressBar();
frame.loadAssets({assets:"greeting.mp3", progress:progressBar});
// a bar will be centered on the default stage (or specify a container)
// 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();
});
EXAMPLE
// testing progress bar:
new ProgressBar({barType:"rectangle"}).show().run(2); // run for 2 seconds
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) barType - (default "circle") set "rectangle" for rectangular progress bar foregroundColor - (default green) the color of the bar backgroundColor - (default dark) the color of the background borderColor - (default backgroundColor) the color of the border - for "rectangle" barType borderWidth - (default 10 "circle" or 0 "rectangle") the width of the border (or ring for "circle" barType) 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 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] shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) the blur of the shadow if shadow is set backing - (default null) a Display object for the backing of the "rectangle" barType (eg. Shape, Bitmap, Container, Sprite)    See ZIM Pizzazz 3 - for patterns - these have a type of "Pattern" which makes them special    If a "pattern" is used then the normal backing will be used to mask the pattern delay - (default .1) seconds to delay view of progress bar - helps not flash progress bar when content is cached (also see ZIM TIME constant) fastClose - (default true) hide as soon as progress is done    The complete event is delayed slightly after the progress bar is loaded    Set to false to wait until the complete event triggers before removing the progress bar container - (defaultFrame's stage) or specify a container to hold the progress bar autoHide - (default true) set to false so bar does not hide when reaching 100% 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 show() - shows the progress bar (returns the progress bar for chaining) hide() - hides the progress bar toggle(state - default null) - shows progress bar if hidden and hides progress bar if showing (returns the object for chaining)    or pass in true to show progress bar or false to hide progress bar run(time, close) - shows and runs the progress bar for the given time (default 3s) (also see ZIM TIME constant)    setting close to true or false will set the main class autoHide setting    thanks Racheli Golan for the request setBacking(backing) - change the backing of the progress bar 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 waiter for chaining) 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 percent - get or set the percent (0-100) complete of the progress bar label - reference to the label if there is one backing - reference to the backing shape. This may be the backing DisplayObject if provided    the backing will have a pattern property if a pattern is set for the backing bar - reference to the bar shape toggled - read-only Boolean that is true if progress bar is showing otherwise false 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. group - used when the object is made to add STYLE with the group selector (like a CSS class) EVENTS Dispatches a "complete" event when the loading or running is complete See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 25987 ▶︎ Indicator(width, height, num, foregroundColor, backgroundColor, borderColor, borderWidth, backdropColor, corner, indicatorType, fill, scale, lightScale, interactive, shadowColor, shadowBlur, selectedIndex, backgroundAlpha, style, group, inherit)
Indicator(width, height, num, foregroundColor, backgroundColor, borderColor, borderWidth, backdropColor, corner, indicatorType, fill, scale, lightScale, interactive, shadowColor, shadowBlur, selectedIndex, backgroundAlpha, style, group, inherit)
Indicator zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A row of dots or squares that can be used to indicate a step, page, level, score, etc. The indicator can be used as an input as well but often these are small so may not be best to rely on. 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 lights = new Indicator({fill:true});
lights.selectedIndex = 0; // set the first light on
lights.center();
stage.on("stagemousedown", ()=>{
   // increase the indicator lights each click (then start over)
   lights.selectedIndex = (lights.selectedIndex+1) % lights.num;
});
stage.update();
EXAMPLE
// lightening indicator!
new Indicator({
   indicatorType:new Emoji("\u26a1\ufe0f"),
   fill:true,
   interactive:true
}).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 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 corner - (default 0) the corner radius if there is a backdropColor provided    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] indicatorType - (default "dot" or "circle") can also be "box" or "square", "heart", "star"    or pass in a ZIM Emoji and Indicator will fade alpha to backgroundAlpha parameter setting    for unselected emojis fill - (default false) set to true to fill in lights to the left of the selectedIndex scale - (default 1) for all the lights including spacing lightScale - (default 1) scale for each light - keeping the spacing unchanged interactive - (default false) set to true to make lights clickable    clicking on first light when first light is only light on, will toggle light shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 5) the shadow blur if shadow is set selectedIndex - (default 0) - set the selectedIndex at start backgroundAlpha - (default 1 or .2 if indicatorType is Emoji) - affects only Emoji indicatorType 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 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 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 - gets or sets the current index of the indicator num - the assigned num value (how many light objects) (read only) backdrop - gives access to the backdrop if there is one Rectangle lights - an array of the light objects (zim Circle or Rectangle objects) lightsContainer - gives access to the lights createjs.Container with its Circle or Rectangle children enabled - set to false to disable component 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 "change" event if press is true and indicator is pressed on and lights change ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 26261 ▶︎ TextInput(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)
TextInput(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)
TextInput zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container DESCRIPTION Makes an input text field like an HTML form input type text field. This will be right on the canvas so can be layered with canvas objects 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) EXAMPLE
const input = new TextInput().loc(100,100); // adds a default input field to the stage

new Button({label:"SUBMIT"}).loc(100, 200).tap(()=>{
   zog(input.text); // whatever is typed into the LabelInput
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** 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 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    Currently, the text is always one line.    In the future, multi-line functionality may be provided    Until then, use a ZIM TextArea for multiline. placeholder |ZIM VEE| - String to show when no text is entered - will disappear when there is text entered 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 |ZIM VEE| - (default dark) color of font backgroundColor |ZIM VEE| - (default lighter) background color - set to -1 for no background borderColor |ZIM VEE| - (default null) the background stroke color borderWidth - (default null) thickness of the background border maxLength - (default null) set to limit the number of characters in the field password - (default false) set to true to show **** for text to hide password    this will be replaced by inputType in upcoming versions of ZIM selectionColor - (default color) the selection color of the text selectionAlpha - (default .2) the alpha of the selection color cursorColor - (default color) the blinking cursor in the text cursorSpeed - (default .5) seconds for which the cursor blinks 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 RIGHT for right aligned    also CENTER - (experimental) this adds a maxWidth to keep text centered    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 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 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 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 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 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 hasProp(property as String) - returns true if property exists on object else returns false resize(width, height) - resizes the field dimensions (inherited from Window) returns object for chaining clone(exact) - makes a copy with properties such as x, y, etc. also copied    exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true    For instance, if the object's color is [blue, green]    then its clone might be blue or green - which could be different than the original    If exact is set to true then the clone will be the color of the original object dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO all methods of ZIM Window() 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(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES type - holds the class name as a String text - references the text property of the CreateJS Text object label - references the ZIM Label object of the TextInput    this is actually a LabelInput that extends a ZIM Label    see the STATIC PROPERTY LabelInput entry below placeholderLabel - refrerence to the placeholder label htmlTag - access to the hidden HTML input tag focus - get or set the focus of the TextInput selection - access to selection ZIM Rectangle    use this to set color or blendMode of selection selectionAlpha - get or set the alpha of the selection blinker - access to the blinking cursor ZIM Rectangle    use this to set color or blendMode of blinker size - the font size of the Label (without px) font - get or set the font of the text 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 enabled - default is true - set to false to disable ALSO all properties of ZIM Window() 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. STATIC PROPERTY LabelInput() - a static class so use new TextInput.LabelInput() to create.    This class is an editable label that expands in size as it is typed into    The TextInput is a ZIM Window with a LabelInput inside    The LabelInput has all the parameters of a ZIM Label with the following added after the size parameter:       maxLength - (default null) the maximum number of characaters the text can have       password - (default false) turn text into password text * symbols       selectionColor - (default - the text color) the color of the selection       selectionAlpha - (default .2) the alpha of the selection       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" OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties EVENTS focus, blur are dispatched when the text gains and loses focus input is dispatched when the input text is typed or pasted into change is dispatched when the input text is different after losing focus See the events for HTML input field of type text 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 CLOSE ▲PAGE ▤CODE ▤
EXPAND 26939 ▶︎ List(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)
List(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)
List zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container DESCRIPTION A vertical or horizontal list of items. This is really a zim.Tabs object inside a zim.Window object. The list can be strings, numbers or Label objects and these are added to Tabs buttons. The list can also include any DisplayObject with bounds (which most ZIM objects have except a Shape needs bounds set manually with setBounds()). If the object is not a string, number or Label then selection will not highlight and currently animateTo() may not work if size is different. See: https://zimjs.com/explore/list.html See: https://zimjs.com/explore/listObjects.html ACCORDION An accordion is a list with nested sections that expand open. A special accordion object can be passed to the list parameter that includes the menu items, styles for the sub menus and properties to animate, shade and indent the sub menus. See: https://zimjs.com/ten/accordion.html PULLDOWN AND LIST COMPONENTS The pulldown parameter can be set to true to make list act like a pulldown This hides the backdrop and border and can be set to be collapsed or expanded There are component items available for slider, checkbox and colorPicker See: https://zimjs.com/ten/pulldown.html There is also a checkBox parameter to make a list of checkboxes This acts like a multiple select list See: https://zimjs.com/ten/listcheckbox.html SPACING, PADDING, INDENTING 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) 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 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 See: https://zimjs.com/docs.html?item=organizer See: https://zimjs.com/explore/organizer.html NOTE set the enable property to false as animating the position of the List object (or its parent Window) then set the enable property to true on the animate call function. See update() in Window docs for more NOTE to add ZIM Swipe() to objects in List set the overrideNoSwipe parameter of Swipe to 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
const list = new List({
   list:["Enormous", "Big", "Medium", "Small", "Puny"],
   viewNum:3, // this number will change the size of the list elements (default is 5)
}).center()
stage.update();
EXAMPLE
// make a pulldown - this must start with a name for the list
// see https://zimjs.com/ten/pulldown.html for nested lists
const data = {
   "MONSTERS":["Ghost", "Ghoul", "Vampire", "Werewolf", "Skeleton"]
}
const list = new List({
   list:{menu:data, bloom:true, whither:true},
   pulldown:true,
   pulldownToggle:true // if want list to close when selected or stage is selected
}).center();
stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) width of list height - (default 200) height of list list - (default Options 1-30) an array of strings, numbers or zim Label objects - these will be added to zim Tabs Buttons    or include any DisplayObject with bounds - these will not get highlighted but will indicate a change event and selectedIndex    currently objects with different sizes may not animateTo() properly - this will be fixed soon.    A special Accordion object literal {} can be provided - see: https://zimjs.com/ten/accordion.html       with the following properties:       menu - a SIMPLE or COMPLEX hierarchy input - see ZIM Hierarchy() in the Code module          note: if just providing the menu and the rest of the properties below are default          then the Accordion object literal can be the SIMPLE or COMPLEX hierarchy input.          In other words, no need to pass in {menu:{blah}} just pass in {blah}       open - (default false) set to true to start the list opened       shade - (default .2) the alpha of indented shade in sub menus - or false for no shading       shift - (default 15) the pixels to indent the shade - and left or right aligned text of sub menus - or false for no indenting       dim - (default .1) the alpha of dark background overlay on sub menus - or false for no dimming       bloom - (default false) time in seconds for each submenu item to be added - or false to not animate sub menus in - if true default time is .1 second       whither - (default false) time in seconds for each submenu item to be removed - or false to not animate sub menus out - if true default time is .1 second       expander - (default "plus") set to "arrow" or "none" to change the expander icon - thanks Christopher Browne and Ofweird Top for the suggestions       subStyles - (default null) an array of style objects for each sublevel - with all the color and background color properties       See: https://zimjs.com/ten/accordion.html    note: the Accordion List is currently incompatible with the Organizer, addTo() and removeFrom() viewNum - (default 5) how many items to show in the width and height provided    adjusting this number will also change the overall scale of custom items    or see the noScale parameter to avoid scaling custom items    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 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 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 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 borderWidth - (default 1) the thickness of the border padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical) 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 scrollBarActive - (default true) shows scrollBar (set to false to not) scrollBarDrag - (default true) set to false to not be able to drag the scrollBar scrollBarColor - (default borderColor) the color of the scrollBar 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 scrollBarOverlay - (default true) set to false to not overlay the scrollBar on the cotnent    overlaying could hide content - but without overlay, content less than window size will show gap when no scrollBar slide - (default true) Boolean to throw the content when drag/swipe released slideDamp - (default .6) amount the slide damps when let go 1 for instant, .01 for long slide, etc. slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal"    slides past bounds and then snaps back to bounds when released    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 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 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 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 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 checkBox - (default false) set to true to turn labeled list into a list of ZIM CheckBox objects - thanks Dale789 for the prompting!    See: https://zimjs.com/ten/listcheckbox.html    use selected.checkBox to get access to the selected CheckBox    use the checkBoxes property to get a list of the CheckBox objects    use setCheck(index, type), setChecks(type), getCheck(index) methods to manipulate    use STYLE to set CheckBox size pulldown - (default false) set to true to have List act like a Pulldown    use tapClose and offClose parameters to optionally adjust behaviour    See: https://zimjs.com/ten/pulldown.html clone - (default false) set to true to add clones of the list items rather than the items themselves 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 selectedIndex - (default 0) - set the selectedIndex at start - set to -1 for no selection noScale - (default false) - set to true to not scale custom items - this ignores viewNum pulldownToggle - (default false) - set to true to collapse list in pulldown mode when final item is selected or pressing off list 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    are set to visible false if their bounds are not hitting the stage bounds 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 animateTo(index, timePerItem) - animate list to index at given time per item (default 50ms) - returns object for chaining addAt(items, index, style, clone) - an array of items to insert at an index in the list - returns object for chaining    if the list is made with no items to start and items are added with addAt() then set the List() viewNum parameter value to match roughly how many items will fit in view    clone defaults to false - set to true to add a clone of the item or items to the list removeAt(number, index) - remove a number of elements (default 1) from the list starting at and including the index - returns object for chaining clear() - clears the list first() - select first list element - returns object to chain last() - select last list element - returns object to chain toggle(state, element) - for an accordion, will close the accordion if open or open if closed    passing in true will open (or keep opened), passing in false will close (or keep closed)    if no element is provided then it will assume the root (outer) element    if the element has no children then its parent element will be opened or closed    also see toggled property (which only works on the root element)    note - in pulldown mode cannot call toggle() from change or tap methods - see pulldownToggle parameter instead setCheck(index, type) - set the CheckBox at an index to true or false (the type parameter) setChecks(type) - set all CheckBoxes to true or false (the type parameter) returns object for chaining getCheck(index) - get the checked value of the CheckBox at an index cancelCurrentDrag() - stop current drag on list - but add dragging back again for next drag collapse(state) - state defaults to true to collapse or set to false to expand collapsed list    must start with the collapse parameter set to true    also see collapsed property openAtLevel(level) - open a level of an accordion list    level 0 shows first level, 1 shows second level, etc. openAtId(idNum) - open an accordion list at a specific id number    view the tree property in the console (F12) and expand the data property to see ids    and then expand any ids to see more ids nested inside    the idNum should be something like 6 or 12 without the word id. 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 COMPONENT LIST ITEMS These static methods make special List items with components See: https://zimjs.com/ten/pulldown.html Each may have a label, min, max, starting val, steps, etc. Each has a call parameter for the function to call when the component changes There are alternatively obj and property parameters Setting these will change the property of the obj to the value of the component List.slider(label, min, max, val, call, step, obj, property, paddingLeft, paddingRight, factor, offset, backgroundColor)    A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item    factor will multiply the slider value only in the stepper (at right)    offset will start the stepper offset by that amount    this lets the stepper value be factored and offset from the actual slider value List.checkBox(label, checked, call, obj, property, paddingLeft, paddingRight, backgroundColor)    A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item List.colorPicker(label, color, picker, call, obj, property, paddingLeft, paddingRight, backgroundColor)    A static method (use it like List.slider("fps", 0, 60, 20, fps)) to make a slider List item    picker is an optional custom ZIM ColorPicker 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)    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?"]}) ALSO All Window methods 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 index of the selected list element selectedIndexPlusPosition set the index and scroll the index into view - might be broken for lists with custom objects of different heights accordionIndex - read only index of the selected item inside an accordion otherwise is undefined selected - gets the current selected list object (ie. a Button)    use selected.checkBox to access the selected CheckBox if checkBox parameter is true currentValue - gets or sets the current value - in setting, it matches the first label that has the value anywhere in it text - gets or sets the current selected label text label - gets current selected label object items (or list) - read-only array of list button objects or objects in the list    this will change from the list entered as parameters as strings are turned into tab buttons, etc.    use addAt() and removeAt() methods to manipulate    custom items can be accessed using item.content - as the item is a container with a backing then content    each item has the following properties:       index, label, expander (Label for accordion +- or arrows), listZID (see Hierarchy) and other properties depending on the item checkBoxes - read-only array of CheckBox objects if checkBox parameter is true itemsText - read-only array of text for labels (or null element if no label) itemWidth - the width of each item (unless custom items) itemHeight - the height of each item (unless custom items) length - read-only length of the list tabs - a reference to the tabs object used in the list organizer - a reference to the organizer object if used originalList - if an accordion object is provided this is the reference to that object tree - if an accordion object is provided this is the active tree data    this will also give ids that can be used with the openAtId(idNum) method vertical - read-only true if list is vertical or false if horizontal toggled - for accordion get or set whether the main (root) accordion is open (true) or closed (false)    also see toggled() chainable method for more options    note - in pulldown mode cannot call toggled from change or tap methods - see pulldownToggle parameter instead    collapseIcon - access to the ZIM Shape if there is a collapse triangle collapsed - get or set whether the list is collapsed - must start with collapse parameter set to true    also see collapse() method enabled - default is true - set to false to disable ALSO see all Window properties - like titleBar, titleBarLabel, etc. 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 "change" event - then use selectedIndex or text to find data dispatches a "bloom" event for each item that is created when blooming    this receives an event object with an item property for the list item that was just opened dispatches an "expanded" event when items have been expanded    this receives an event object with an items property of the items just opened dispatches a "collapsed" event when items have been collapsed ALSO All Window events including "scrolling" ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 28280 ▶︎ Stepper(list, width, backgroundColor, borderColor, borderWidth, label, color, vertical, arrows, corner, shadowColor, shadowBlur, continuous, display, press, hold, holdDelay, holdSpeed, draggable, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward, selectedIndex, currentValue, style, group, inherit)
Stepper(list, width, backgroundColor, borderColor, borderWidth, label, color, vertical, arrows, corner, shadowColor, shadowBlur, continuous, display, press, hold, holdDelay, holdSpeed, draggable, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward, selectedIndex, currentValue, style, group, inherit)
Stepper zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Lets you step through a list of numbers or strings with arrows and keyboard arrows. Uses mousedown to activate and defaults to stepping while pressing down and going faster if you drag away from your press. 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 stepper = new Stepper().change(()=>{
   zog(stepper.selectedIndex);
   zog(stepper.currentValue);
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) list - (default 1-10) pass in an array of strings or numbers to display one at a time    passing in an array will change the stepperType parameter from "number" to "list"    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 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 vertical - (default false) set to true if you want the arrows above and below the text arrows - (default true) - use graphical arrows (also see keyArrows to turn off keyboard arrows) corner - (default 10) is the radius of the text box corners - set to 0 for square corners    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow shadowBlur - (default 14) value for shadow blur if shadow is set continuous - (default false) set to true to loop around or go back past 0 index display - (default true) set to false just to just show the arrows and not the value press - (default true) will advance on label mousedown - set to false to not advance on mousedown hold - (default true) set to false to not step with extended press down holdDelay - (default .4) time (seconds) to wait for first step with hold (also see ZIM TIME constant) holdSpeed - (default .2) time (seconds) between steps as holding (also see ZIM TIME constant) draggable - (default true) set to false to not step when dragging dragSensitivity - (default .1) .01 changes really quickly - 1 changes at base rate dragRange - (default 200) absolute distance (pixels) from press the drag will reach maximum stepperType - (default "number" unless passing in an array to list) makes numbers, words, letters to step through    also stepperType "list", "letter" - these get ranges below min - (default 0 for number and "A" for letter) the minimum value (can make min bigger than max) (not for list stepperType) max - (default 10 for number and "Z" for letter) the maximum value (can make max smaller than min) (not for list stepperType) step - (default 1) the step value each time - can be decimal (only positive, only for number stepperType) step2 - (default set to step) the step value when dragging perpendicular to main horizontal or vertical direction    step2 will run with draggable set to true or with arrows2 set below (only positive, only for number stepperType) arrows2 - (default true if step2 different than step and stepperType number - else false) secondary arrows perpendicular to main horizontal or vertical direction    arrows2 will activate step2 above (only for number stepperType) arrows2Scale - (default .5) the scale relative to the main arrows keyEnabled - (default true) set to false to disable keyboard search / number picker keyArrows - (default true) set to false to disable keyboard arrows rightForward - (default true) set to false to make left the forward direction in your list downForward - (default true except if stepperType is "number" then default false) set to false to make up the forward direction in your list selectedIndex - (default 0) - set the selectedIndex at start currentValue - (default null) - set the currentValue at start 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 next() - goes to next prev() - goes to previous 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 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 - gets or sets the current index of the array and display currentValue - gets or sets the current value of the array and display currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed stepperArray - gets or sets the list containerPrev, containerNext - access to the zim Container that holds the arrows arrowPrev, arrowNext - access to the zim Triangle objects arrowPrev2, arrowNext2 - access to the zim Triangle objects for arrows2 min, max - only for number mode at the moment - currently, do not change the max to be less than the min label - access to the Label textBox - access to the text box backing shape continuous - does the stepper loop 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when changed by pressing an arrow or a keyboard arrow (but not when setting selectedIndex or currentValue properties) ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 29190 ▶︎ Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, damp, currentValue, expand, expandVertical, expandBar, expandBarVertical, useLabels, labelMargin, style, group, inherit)
Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, damp, currentValue, expand, expandVertical, expandBar, expandBarVertical, useLabels, labelMargin, style, group, inherit)
Slider zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional slider - will give values back based on min and max and position of button (knob). 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 slider = new Slider({step:1})
   .center()
   .change(() => {
      zog(slider.currentValue); // 0-10 in steps of 1
   });
// or create an on("change", function) event (do not chain on)
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) min - |ZIM VEE| (default 0) the minimum value for the slider max - |ZIM VEE| (default 10) the maximum value for the slider step - |ZIM VEE| (default 0) 0 is continuous decimal - 1 would provide steps of 1, 2 would provide steps of 2, etc. button - (default small button with no label) - a zim Button or string as follows:    "pill" - a narrow rectangle with rounded corners    "aztec" - a quadrilateral with fat side and skinny side (default for sound)    "circle" - a circle - can be oval with different width or height    "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) 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 tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount semiTicks - (default .25) add a number of semiTicks. 1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc. tickScale - (default 1) scale the height of the ticks semiTickScale - (default 1) scale the height of the semiTicks accentSize - (defualt 0) height of a bar next to slider that can be used to accent selection accentOffset - (default 24) distance from edge of slider the accent will show accentColor - (default zim.pink) color of filled part of accent accentBackgroundColor - (default clear) color of background of accent accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize    this is used to stop bleeding of accent background    but can also be used to make the accent half the width of the background so it runs in a track, etc.    or fatter than the background so it runs on a wire or mono-rail sound - (default false) - set to true to adjust various defaults for ticks, accent, button inside - (default false) set to true to fit button inside bar (need to manually adjust widths) keyArrows - (default true) set to false to disable keyboard arrows keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used    if step is set, then this value is ignored and set to step keyArrowsH - (default true) use left and right arrows when keyArrows is true keyArrowsV - (default true) use up and down arrows when keyArrows is true damp - (default null) set to value such as .1 to damp the slider currentValue    use with Ticker rather than "change" event - eg:    Ticker.add(function () {circle.x = slider.currentValue;}); currentValue |ZIM VEE| - (default min) a starting value for the slider expand - (default null or 10 for mobile) set to value to expand the interactive area of the slider button expandVertical - (default expand) set to value to expand the vertical interactive area of the slider button expandBar - (default 20 or 0 for horizontal) set to value to expand the interactive area of the slider bar expandBarVertical - (default 0 or 20 for horizontal) set to value to expand the vertical interactive area of the slider bar useLabels - (default false) - add Labels to ticks if useTicks is true - can apply STYLE labelMargin - (default 20) - distance from ticks to Label if useLabels is true 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 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 ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),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 currentValue - gets or sets the current value of the slider currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed min, max, step - read only - the assigned values bar - gives access to the bar Rectangle button - gives access to the Button ticks - gives access to the ticks (to position these for example) labels - access to the labels container if useLabels is true accent - gives access to the access Shape accentBacking - gives access to the accessBacking Shape keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning) 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when button is slid on slider (but not when setting currentValue property) ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 29848 ▶︎ Selector(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit);
Selector(tile, borderColor, borderWidth, backgroundColor, corner, dashed, paddingHorizontal, paddingVertical, speed, diagonal, dim, multi, keyArrows, behind, resizeScale, selectedIndex, style, group, inherit);
Selector zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A Selector acts on a ZIM Tile to provide an interactive selector that highlights a tile element. The selector works as a select bar and a select pad. See: https://zimjs.com/ten/wrapper.html which includes several Selector objects as bars Selector as a pad would be similar to selecting letters on an onscreen TV remote system Selector has a multi parameter that allows for multiple elements to be in selected mode. The selectedIndex or selectedItem will only be the last selected. And only one selecteIndex can be set at a time but as many as desired can be set one after another - in a loop for instance. The difference is that once selected, the item remains highlighted until unselected with a presseup. This allows for a synth pad for instance where multiple notes can be played at the same time. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// the items in the Tile should be centerReg()
new Selector(new Tile(new Rectangle().centerReg(), 4, 4, 20, 20))
   .center()
   .change(e=>{
      e.target.currentItem.alpha = 0;
      stage.update();
   });
stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 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 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 multi - (default false) set to true to enable multiple highlights    selectedIndex and selectedItem will still read only the last selected tile or set only one tile at a time    will need a multitouch devices - degrades fine to single touch if no multitouch keyArrows - (default true) set to false to disable keyboard arrows behind - (default false) set to true to put selector behind tile resizeScale - (default false) set to true to resize the border as selector changes scale selectedIndex - (default 0) the item index on which to start the selector - set to -1 for no selection 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 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 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 - the index number of the selected item in the tile - set to -1 for no selection currentItem - gets or sets the current item under the selector noAnimate - set to make the next selectedIndex or currentItem call not animate to tile MULTI - in a change event with multi set:    downIndex - this will be the index under the selector on press down (or null if pressing up)    upIndex - this will be the index under the selector on press up (or null if pressing down)    downItem - this will be the item under the selector on press down (or null if pressing up)    upItem - this will be the item under the selector on press up (or null if pressing down) lastIndex - get the last selected index lastItem - get the last selected item selectedCol - get the index of the selected column selectedRow - get the index of the selected row lastCol - get the index of the last selected column lastRow - get the index of the last selected row tile - a reference to the Tile object selector - a reference to the Rectangle object used as the selector 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 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 "change" event when selector finishes animating to a new selection note that a tap() or mousedown/click function can be used if the selectedIndex is desired right away ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 30296 ▶︎ Dial(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, useTicks, innerTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, innerCircle, innerScale, innerColor, inner2Color, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, linear, gap, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, currentValue, useLabels, labelMargin, style, group, inherit);
Dial(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, useTicks, innerTicks, tickColor, tickStep, semiTicks, tickScale, semiTickScale, innerCircle, innerScale, innerColor, inner2Color, accentSize, accentOffset, accentColor, accentBackgroundColor, accentDifference, sound, linear, gap, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, currentValue, useLabels, labelMargin, style, group, inherit);
Dial zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional dial - will give values back based on min and max and position of dial. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
var dial = new Dial({step:1, backgroundColor:"violet"})
   .center()
   .change() {
      zog(dial.currentValue); // 1-10 in steps of 1
   });
stage.update();
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) 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 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 innerTicks (default false) set to true to put the ticks inside if step is set tickColor - (default backgroundColor) set the tick color if ticks are set tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount semiTicks - (default 0) add a number of semiTicks. 1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc. tickScale - (default 1) scale the height of the ticks semiTickScale - (default 1) scale the height of the semiTicks innerCircle - (default true) gives an inner knob look - set to false for flat innerScale - (default 1) can be adjusted along with indicatorScale to get a variety of looks innerColor - (default "rgba(0,0,0,.2)") color of first inner circle inner2Color - (default "rgba(0,0,0,.1)") color of inside inner circle accentSize - (defualt 0) height of a ring around the dial that can be used to accent selection accentOffset - (default .45 width/2) distance from edge of dial the accent will show accentColor - (default zim.pink) color of filled part of accent accentBackgroundColor - (default clear) color of background of accent accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize    this is used to stop bleeding of accent background    but can also be used to make the accent half the width of the background so it runs in a track, etc.    or fatter than the background so it runs on a wire or mono-rail sound - (default false) - set to true to rotate dial -180 and set a gap of .25    adjusts various defaults for ticks, accent, indicatorType, etc. linear - (default false - unless sound is true) - set to true to pressdrag up and down to increase and decrease dial gap - (default 0) ratio of circle 360 to leave as a gap between dial start and dial end limit - (default true) stops dial from spinning right around - set to false to not limit dial keyArrows - (default true) set to false to disable keyboard arrows keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used    if step is set, then this value is ignored and set to step keyArrowsH - (default true) use left and right arrows when keyArrows is true keyArrowsV - (default true) use up and down arrows when keyArrows is true continuous - (default false) this turns the dial into a continuous dial from the min at the top    The (max-min)/360 give a delta value per degree    and as the dial goes clockwise it adds the delta and as it goes counterclockwise it subtracts the delta    The steps are still used or not if set to zero    The min and max are no longer a real min and max - see the continuousMin and continuousMax below    limit is ignored or set to false when continuous is true continuousMin - (default null) set to Number to limit the minimum total value of the dial when continuous is true continuousMax - (default null) set to Number to limit the maximum total value of the dial when continuous is true damp - (default null) set to value such as .1 to damp the slider currentValue    IGNORED when limit set to false - otherwise may damp incorrectly    use with Ticker rather than "change" event - eg:    Ticker.add(function () {circle.x = slider.currentValue;}); currentValue |ZIM VEE| - (default min value) - set the currentValue at start useLabels - (default false) - add Labels to ticks if useTicks is true - can apply STYLE labelMargin - (default 10) - distance from ticks to Label if useLabels is true 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 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 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 currentValue - gets or sets the current value of the dial currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed min, max - read only assigned values unless continuous is true - then write enabled step - read only - the assigned values continuous - gets a boolean as to whether the continuous is true (read only) continuousMin - get or set the continuousMin if continuous is set to true continuousMax - get or set the continuousMax if continuous is set to true backing - gives access to the dial backing Circle inner and inner2 give access to any inner circles ticks - gives access to the ticks (to scale these for example) labels - access to the labels container if useLabels is true accent - gives access to the access Shape accentBacking - gives access to the accessBacking Shape indicator - gives access to the indicator container with registration point at the dial center indicatorShape - gives access to the shape on the end of the indicator (zim Triangle, Circle, Rectangle) keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning) 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when dial changes value (but not when setting currentValue property) ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 30989 ▶︎ Tabs(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)
Tabs(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)
Tabs zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional tab layout for along the edge of content. Can also act as an independent button row or column. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
var tabs = new Tabs({tabs:["A", "B", "C", "D"], spacing:5, corner:14})
   .center()
   .change(()=>{
      zog(tabs.selectedIndex);
      zog(tabs.text);
   });
stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 240) overall width of tab set (ZIM divides the width across tabs and spacing) 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 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)    See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below    wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel    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) 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 rollColor - (default color) the rollover color (selected tabs do not roll over) 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 spacing - (default 1) is the pixels between tab buttons currentEnabled - (default false) set to true to be able to press (a second time) the selected tab button currentSelected - (default true) set to false to not highlight the current button (good for button bars)    setting this to true will set currentEnabled to true 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"    ** 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 gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs wait - (default null) String text for tab to say when pressed to enter a wait mode    The wait parameters can be (and probably will be) set as properties for each individual tab in the tabs array waitTime - (default 20000) milliseconds to stay in wait state before returning to normal tab waitBackgroundColor - (default color) the color of the tab during wait period rollWaitBackgroundColor - (default color) the color of the tab during wait period waitBackgroundColor - (default red) color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (default label's roll color) color for text when waiting and rolled over 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 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 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 selectedIndex - (default 0) - set the selectedIndex at start    for no selected tab to start set this to -1 styleLabels - (default false) - set to true to pass styles to Tab labels keyWrap - (default true) - set to false to not wrap around Tabs when tab key reaches end or start 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 addAt(items, index, setStyle) - an array of items to insert at an index in the tab - tabs will grow in size - returns the object for chaining    To keep the same size - run insertAt() and then remake the Tabs using the tabs.buttons array as the tabs parameter    Can also send in a setStyle object literal {} with color, rollColor, selectedColor and selectedRollColor plus the background color versions of these! removeAt(index, number) - remove a tab index an number of items (default 1) - tabs will shrink in size - returns the object for chaining first() - select first tab - returns object to chain last() - select last tab - returns object to chain getItemIndex(item) - gets the index of the list item provided 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 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 - gets or sets the selected index of the tabs selected - gets the selected button - selected.enabled = true, etc. tabs - gets or sets tabs object (will have to manually change buttons as well as adjust props) backgroundColor - gets or sets default unselected background color - not applied to custom buttons rollBackgroundColor - gets or sets default rolled over background color - not applied to custom buttons selectedBackgroundColor - gets or sets default selected background color - not applied to custom buttons selectedRollBackgroundColor - gets or sets default selected roll background color - not applied to custom buttons color - gets or sets default unselected text color - not applied to custom buttons rollColor - gets or sets default rolled over text color - not applied to custom buttons selectedColor - gets or sets default selected text color - not applied to custom buttons selectedRollColor - gets or sets default selected roll text color - not applied to custom buttons text - gets current selected label text label - gets current selected label object buttons - an array of the ZIM Button objects. buttons[0].enabled = false; labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; buttonDown - the button that is currently being pressed backdrop - reference to backdrop Rectangle if backdropColor is provided keyEnabled - gets or sets whether the tab key and shift tab key cycles through tabs (does not affect accessibility) 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when a tab changes (but not when setting selectedIndex property) ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 31893 ▶︎ Pad(width, cols, rows, keys, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, selectedIndex, style, group, inherit)
Pad(width, cols, rows, keys, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, selectedIndex, style, group, inherit)
Pad zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A pad that has rows and cols made of square keys. When the keys are pressed the pad will dispatch a change event - get the selectedIndex or text property. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
var pad = new Pad()
   .center()
   .change(()=>{
      zog(pad.selectedIndex); // 0-8
      zog(pad.text); // 1-9
   });
stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** inherits STYLE from type selector for Pad, then general styles then type selector for Tabs width - (default 150) overall width of pad (ZIM divides the width across cols and spacing) cols - (default 3) the columns in the pad rows - (default cols) the rows in the pad keys - (default an Array for cols x rows) an array of key objects with the following properties available:    any key specific properties will override the default values from other parameters    [{label:"String", width:200, backgroundColor:"Red", rollBackgroundColor:"pink", selectedBackgroundColor:"grey"}, {etc.}]    the label can be a String or a Label object - default text color is white    Key objects can also include wait properties for individual buttons.    See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below    wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel    also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done backgroundColor - (default "#777") the background color of a deselected key when not rolled over rollBackgroundColor - (default "#555") the rollover background color (selected keys do not roll over) selectedBackgroundColor - (default "#333") the background color of the selected key (any CSS color) color - (default "white") the text color of a deselected key when not rolled over selectedColor - (default color) the text color of the selected key (any CSS color) rollColor - (default color) the rollover color (selected keys do not roll over) spacing - (default 1) is the pixels between key buttons currentEnabled - (default true) set to false to make selected key not pressable corner - (default 0) the corner radius of the keys    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] labelColor - (default "white") the color of the label gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs wait - (default null) String text for button to say when pressed to enter a wait mode    The wait parameters can be (and probably will be) set as properties for each individual button in the pads array waitTime - (default 20000) milliseconds to stay in wait state before returning to normal button waitBackgroundColor - (default color) the color of the button during wait period rollWaitBackgroundColor - (default color) the color of the button during wait period waitBackgroundColor - (default red) color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (default label's roll color) color for text when waiting and rolled over waitModal - (default false) set to true to exit wait state if user clicks off the pad or to another button waitEnabled - (default true) set to false to disable pad while in wait mode selectedIndex - (default 0) - set the selectedIndex at start 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 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 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 - gets or sets the selected index of the pad text - gets current selected label text selected - gets the selected button - selected.enabled = true, etc. label - gets current selected label object selectedBackgroundColor - gets or sets default selected background color backgroundColor - gets or sets default unselected background color rollBackgroundColor - gets or sets default rolled over background color color - gets or sets default unselected text color rollColor - gets or sets default rolled over text color selectedColor - gets or sets default selected text color buttons - an array of the ZIM Button objects. buttons[0].enabled = false; labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; tabs - an array of the zim Tabs objects (one object per row) 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 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when a pad changes (but not when setting selectedIndex property) ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 32153 ▶︎ DPad(axis, width, backgroundColor, borderWidth, borderColor, indicatorColor, indicatorPressColor, indicatorScale, indicatorRadius, innerCircle, innerScale, activeRadius, clamp, logo, style, group, inherit)
DPad(axis, width, backgroundColor, borderWidth, borderColor, indicatorColor, indicatorPressColor, indicatorScale, indicatorRadius, innerCircle, innerScale, activeRadius, clamp, logo, style, group, inherit)
DPad zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A DPad (Directional Pad) can be used to control x and y values This is primarily handy on mobile where a substitute for keypresses is needed The DPad can be set up for all directions, horizontal or vertical The DPad can be passed in to a ZIM MotionController to control an object See: https://zimjs.com/ten/dpad.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 dPad = new DPad().pos(50,50,LEFT,BOTTOM);
new MotionController({
   target:new Circle().center(),
   type:dPad,
   speed:mobile()?100:80,
   boundary:new Boundary(0,0,stageW,stageH)
});
stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) axis - (default "all") set to "horizontal" or "vertical" or "all". Appropriate arrows will show width - (default 100) width of DPad backgroundColor - (default "#666") the background color (any zim or html color) indicatorColor - (default "#ddd") the color of the arrows indicatorPressColor - (default "#eee") the color of the arrows as pressed indicatorScale - (default 1) the scale of the arrows indicatorRadius - (default null) set the indicator radius innerCircle - (default true) set to false to not show an inner circle innerScale - (default .5) the scale relative to the indicator activeRadius - (default width*2) radius at which the DPad works clamp - (default true) set to false to not limit the value between -1 and 1 logo - (default false) set to true to show the letter D in the DPad - or add your own 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 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 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 dirX, dirY - the x and y values for the DPad - between -1 and 1 if clamp is set    these can be multiplied by a factor to adjust speed - or use speed parameter of associated MotionController blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation enabled - default is true - set to false to disable 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 "change" event with dirX and dirY provided as well on the event object ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 32353 ▶︎ Radial(labels, size, font, height, coreRadius, coreColor, startAngle, totalAngle, angles, flip, shiftVertical, icons, rollIcons, rotateIcons, iconsShiftVertical, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, selectedIndex, style, group, inherit)
Radial(labels, size, font, height, coreRadius, coreColor, startAngle, totalAngle, angles, flip, shiftVertical, icons, rollIcons, rotateIcons, iconsShiftVertical, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, selectedIndex, style, group, inherit)
Radial zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A radial ring with selectable buttons with lables or icons Used internally by ZIM RadialMenu which has expandable rings for a hierarchical interface Radial uses LabelOnArc for labels NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
var radial = new Radial(["one", "two", "three", "four"])
   .center()
   .change(()=>{
      zog(radial.selectedIndex);
   });
stage.update();
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) labels - (default ["A", "B", "C", "D", "E"]) an array of text or ZIM Label objects for buttons size - (default 30) label size font - (default "verdana") the font - can also import fonts in Frame() asset parameter or frame.loadAssets() startAngle - (default null) will start first button centered at top - see also totalAngle    setting an angle will start left side of first button at this angle    with 0 being the top (note, ZIM angles usually start along x axis - but not here) totalAngle - (default 360) set to use only a portion of the circle - see also startAngle angles - (default null) can set an array of angles for center of the buttons    can use angles property toString() to get existing angle data    this can be modified to suit and passed into this parameter for unequal button sizes flip - (default true) flip the text between 90 and -180 (from 0 at top) shiftRadial - (default 0) amount to shift text in radially icons - (default null) set to an array of objects that will go under the text    can set the labels to ["", "", "", etc.] to hide the text    icons should be centerReg({add:false}) to ensure centered placement rollIcons - (default null) set to an array of objects to replace icon when rolled over rotateIcons - (default false) set to true to rotate icons around radial iconsShiftRadial - (default 0) amount to shif the icons radially height - (default 60) height of radial - not including core 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 backgroundColor - |ZIM VEE| - (default "#666") 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 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 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 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 gapAsAngle - (default false) set to true set gap as angle spacing - (default 6) radial spacing around button from core or edge of backdrop spacingInner - (default spacing) inside radial spacing from core spacingOuter - (default spacing) outside radial spacing from edge of backdrop currentEnabled - (default false) set to true to make selected key pressable (for change event) currentSelected - (default true) set to true to make selected key show selected colors selectedIndex - (default 0) - set the selectedIndex at start 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 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 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 - gets or sets the selected index of the pad text - gets current selected label text label - gets current selected label object selected - gets the selected button - selected.enabled = true, etc. buttons - a container of buttons    each button has label and icon properties angles - an array of angles to the center of the buttons    can log angles.toString() to get angle data    this can be adjusted and passed in to the angles parameter for unequal size buttons core - a reference to the core circle object backdrop - a reference to the backdrop circle enabled - default is true - set to false to disable 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when the button changes (but not when setting selectedIndex property) see also currentEnabled to get change event for each press - or use tap() ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 32751 ▶︎ RadialMenu(menu, size, font, height, coreRadius, coreColor, title, titleIcon, startAngle, totalAngle, flip, shiftRadial, rotateIcons, iconsShiftRadial, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, open, under, style, group, inherit)
RadialMenu(menu, size, font, height, coreRadius, coreColor, title, titleIcon, startAngle, totalAngle, flip, shiftRadial, rotateIcons, iconsShiftRadial, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, backdropColor, color, rollColor, selectedColor, selectedRollColor, borderColor, borderWidth, gradient, gap, gapAsAngle, spacing, spacingInner, spacingOuter, currentEnabled, currentSelected, open, under, style, group, inherit)
RadialMenu zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION An expanding hierarchy menu of button rings - using ZIM Radial objects. The menu is specified by a menu parameter in the format of a ZIM Hierarchy object. Styles for each ring can be specified in the menu object. Icons for each ring can be specified in the styles. See https://zimjs.com/ten/radial.html (ZIM TEN) 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 menu = {
   "one":[1,2,3,4], // an array is okay as all items are leaf nodes (end nodes)
   "two":{ // an object literal is required as one or more items hold other items
      "1":[], // this holds nothing (a leaf node) but still needs an empty array
      "2":["a", "b", "c"], // this holds a linear list - all leaf nodes
      "3":{ // this holds another nested list where at least one item holds more
         "emotions":["love","hate","happy","sad"],
         "flavors":["sweet","sour","bland","spicy"]
      }
   },
   "three":[1,2,3,4,5,6],
   "four":[1,2,3,4,5,6,7,8]
}
new RadialMenu(menu).sca(.5).center();

// OR ADD STYLES
// see https://zimjs.com/ten/radial.html for full example (ZIM TEN)
// any Radial parameters can go in the styles:{} brackets
// including icons and rollIcons
// and can use series to apply background colors and colors to individual buttons
// PS - this is the EXTRA version of the simple ZIM Hierarchy format
// here we pass styles as an extra property - list is required
// styles is optional but used by ZIM RadialMenu to apply associated styles

var menu = {
   list:{
      "one":{
         list:["A","B","C","D"], // an array is okay as all items are leaf nodes (end nodes)
         styles:{backgroundColor:blue}
      },
      "two":{
         list:{ // an object literal is required as one or more items hold other items
            "1":[], // this holds nothing (a leaf node) but still needs an empty array
            "2":{
               list:["a", "b", "c"], // this holds a linear list - all leaf nodes
               styles:{}
            },
            "3":{ // this holds another nested list where at least one item holds more
               list:{
                  "emotions":{
                     list:["love","hate","happy","sad"],
                     styles:{}
                  },
                  "flavors":{
                     list:["sweet","sour","bland","spicy"]   ,
                     styles:{}
                  }
               },
               styles:{}
            }
         },
         styles:{}
      },
      "three":{
         list:[1,2,3,4,5,6],
         styles:{}
      },
      "four":{
         list:[1,2,3,4,5,6,7,8],
         styles:{}
      }
   },
   // the styles for the first list
   // here we make each backgroundColor a different color
   styles:{backgroundColor:series(red,green,blue,yellow)}
}

new RadialMenu(menu).sca(.5).center();
stage.update();
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) menu - (default a simple menu) a ZIM Hierarchy (simple, simple EXTRA or complex)    that holds the menu labels and optionally styles    see the ZIM RadialMenu examples and the format descriptions of ZIM Hierarchy for details size - (default 30) label size font - (default "verdana") the font - can also import fonts in Frame() asset parameter or frame.loadAssets() startAngle - (default null) will start first button centered at top - see also totalAngle    setting an angle will start left side of first button at this angle    with 0 being the top (note, ZIM angles usually start along x axis - but not here) totalAngle - (default 360) set to use only a portion of the circle - see also startAngle flip - (default true) flip the text between 90 and -180 (from 0 at top) shiftRadial - (default 0) amount to shift text in radially rotateIcons - (default false) set to true to rotate icons around radial 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 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    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 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 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 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 gapAsAngle - (default false) set to true set gap as angle spacing - (default 6) radial spacing around button from core or edge of backdrop spacingInner - (default spacing) inside radial spacing from nearest inside object spacingOuter - (default spacing) outside radial spacing from edge of backdrop currentEnabled - (default false) set to true to make selected key pressable (for change event) currentSelected - (default true) set to true to make selected key show selected colors open - (default false) set to true to start with first menu open under - (default true) set to false to open menu rings in the top layer (usually under just in case there is a backdrop) 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 closeRings(num) - close menu rings - default is all rings but use 1 to close the outer ring, 2 to close the two outer rings, etc.    see the outerLevel property for the current outer ring number with core being 0    opening rings programmatically is not yet supported but may be in the future 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 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 - gets the selected index of the outer ring (setting may come soon) selectedLevel - gets the index of the level with the latest selection - the core is 0 selectedMenu - gets a reference to the selected menu outerLevel - gets the index number of the outside level - the core is 0 outerMenu - gets a reference to the outer menu text - gets current selected label text label - gets current selected label object selected - gets the selected button core - a reference to the core circle object enabled - default is true - set to false to disable 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. OPTIMIZED This component is affected by the general OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when the button changes (but not when setting selectedIndex property) see also selectedIndex, selectedLevel, selected and text properties see also currentEnabled to get change event for each press - or use tap() ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 33204 ▶︎ ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startBackgroundColor, draggable, shadowColor, shadowBlur, buttonBar, circles, indicator, backgroundColor, keyArrows, container, selectedIndex, selectedColor, dropperTarget, spectrumCollapse, spectrumMode, spectrumClose, spectrumOk, spectrumTitle, tolerancePicker, collapsed, style, group, inherit)
ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startBackgroundColor, draggable, shadowColor, shadowBlur, buttonBar, circles, indicator, backgroundColor, keyArrows, container, selectedIndex, selectedColor, dropperTarget, spectrumCollapse, spectrumMode, spectrumClose, spectrumOk, spectrumTitle, tolerancePicker, collapsed, style, group, inherit)
ColorPicker zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional color picker which shows 256 Web colors by default or custom colors. Can additionally show 16 greys and / or an alpha slider. Picking on a color sets the swatch color and the selectedColor property. OK dispatches a "change" event if the color changed or a close event if not. The X dispatches a "close" event. 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 cp = new ColorPicker()
   .show() // use show() and hide() with ColorPicker. As of ZIM ZIM 01 can also use pos(), loc(), center(), etc.
   .change(()=>{
      zog(cp.selectedColor); // #ffcc99, etc. after pressing OK
      zog(cp.selectedAlpha); // 0-1
   });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 500) the width of the color picker colors - (default "spectrum") - this shows a color spectrum, drag bar with collapse, mode and close (if no buttonBar)    these can be configured with ColorPicker parameters (see spectrum parameter near end of parameters).    The mode toggles between a gradient and pixel blocks    Set the colors to "legacy" to show the traditional 256 colors    or pass in an optional list of colors ["red", "#CCC", etc.] cols - (default 10) how many columns to use if you pass in custom colors spacing - (default 2) is the space between the color squares greyPicker - (default true unless one row) shows an extra 16 greys (set to false to hide these)    for the default colors it also includes 2 starting colors that record last picked colors alphaPicker - (default true unless one row) shows an alpha slider (set to false to hide this)    the swatch has a black, grey and white backing underneath to show multiple alpha effects startBackgroundColor - (default the last color in color array) the starting color draggable - (default true (false if no buttonBar or no spectrum)) whether you can drag the component - set to false to not drag    a small grip under the color text shows if draggable shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow shadowBlur - (default 14) the blur of the shadow if shadow is set buttonBar - (default true unless one row) set to false to hide the button bar with OK and X (close) circles - (default false) set to true to show colors in circles rather than squares indicator - (default true) set to false to remove indicator from currentBackgroundColor backgroundColor - (default black) the color of the background keyArrows - (default true) set to false to disable keyboard arrows container - (default frame.zdf) if using show(), hide(), toggle() can set which container to center on selectedIndex - (default 0) - set the selectedIndex at start dropperTarget - (default null) - set to a DisplayObject to use dropper on the target - such as the stage    the dropper will always work on the spectrum    dropperTarget will cache the target so a color can be picked from it    but this is modal on the target so buttons, etc. cannot be used and animations will not be seen spectrumCollapse - (default true) - if spectrum color is set, set to false to not show a collapse button spectrumMode - (default true) - if spectrum color is set, set to false to not show a mode button spectrumClose - (default true) - if spectrum color is set, set to false to not show a close button spectrumOk - (default true) - if spectrum color is set and there is a buttonBar, set to false to not show an OK button spectrumTitle - (default null) - if spectrum color then this is the title - for example, set to "Color Picker" collapsed - (default false) - if spectrum and spectrumCollapse then set to true to start collapsed tolerancePicker - (default false) - show a slider for tolerance - useful for when using ColorPicker to keyOut a color    note: this will automatically hide the alphaPicker 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 show() - show the picker (returns the picker for chaining) (as of ZIM ZIM 01 can also use pos(), loc(), center(), etc.) hide() - hides the picker (as of ZIM ZIM 01 can also use removeFrom()) toggle(state - default null) - shows if hidden and hides if showing (returns the picker for chaining)    or pass in true to show picker or false to hide picker toggleSpectrum(state - default null) - if run without state will toggle the spectrum mode    or pass in true to show gradient or false to show pixel blocks collapse(state - default true) - with the "spectrum" setting, set state to true (default) to collapse or false to expand the picker updateDropperTarget() - with the "spectrum" setting, a cached view of the dropperTarger is shown to pick the color from    using updateDropperTarget() will update this cached view - it is processor intensive so beware 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 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 selectedColor - gets or sets the selected color swatch currentValue - same as selectedColor but consistent with other components currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed selectedAlpha - gets or sets the selected alpha (set does not work if alphaPicker is false) selectedIndex - get or sets the selected index of the colorPicker colors - read only array of colors in picker - not including greys - or "spectrum" greys - read only array of greys in picker if the grey picker is set toggled - read-only Boolean property as to whether picker is showing collapsed - read-only Boolean property as to whether picker is collapsed swatch - gets the Rectangle that is the color swatch swatchBacking - gets the zim Shape that is under the swatch (seen if alpha set low) swatchText - gets the Label that shows the color text grip - gets the createjs.Shape for the grip if the panel is dragable background - gets the Rectangle that is the background (cp.background.color = "white" - now a backgroundColor parameter) okBut - references the OK Button closeBut - references the X Button indicator - gets the zim shape that is the indicator (if indicator is true) title - reference to the spectrum title Label NOTE for colors:"spectrum"    dropper - reference to the circle dropper    gradient - reference to the gradient spectrum Bitmap    pixels - reference to the pixel spectrum Bitmap    closeIcon - reference to the close icon if there is one on the top bar    modeIcon - reference to the mode icon if there is one on the top bar    collapseIcon - reference to the collapse icon if there is one on the top bar    spectrumToggled - read-only Boolean that is true if gradient and false if spectrum is pixel blocks NOTE if alphaPicker is true:    alphaBacking - gets reference to the Rectangle that makes the backing for the alpha slider    alphaBut - the Button on the alpha slider    alphaSlider - the Slider for the alpha    alphaText - the Label for the alpha NOTE if tolerancePicker is true:    toleranceBacking - gets reference to the Rectangle that makes the backing for the tolerance slider    toleranceBut - the Button on the tolerance slider    toleranceSlider - the Slider for the tolerance    toleranceText - the Label for the tolerance 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 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. ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS NOTE these have been updated in ZIM 00 dispatches a "change" event when the color swatch changes or if no swatch when a color is picked.    also dispatches when the alpha is changed if there is an alpha picker.    also dispatches when the tolerance is changed if there is an tolerance picker. dispatches a "swatch" event when the swatch is pressed. dispatches an "ok" event when the OK button is pressed. dispatches a "close" event when the close button is pressed. Automatically closes the ColorPicker. dispatches a "collapsed" event when collapsed in spectrum color mode. dispatches a "expanded" event when expanded in spectrum color mode. ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 34294 ▶︎ EmojiPicker(width, height, emojis, monochrome, backgroundColor, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, cache, size, collapse, collapseColor, collapsed, colSize, rowSize, style, group, inherit)
EmojiPicker(width, height, emojis, monochrome, backgroundColor, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, cache, size, collapse, collapseColor, collapsed, colSize, rowSize, style, group, inherit)
EmojiPicker zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container DESCRIPTION An Emoji picker panel. Can customize the list of emojis. Gives a zim Emoji object as currentEmoji property on a "change" event SEE: https://zimjs.com/nft/bubbling/emoji.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 emojiPicker = new EmojiPicker()
   .center()
   .change(() => {
      // we will make a bigger emoji by passing the code of the currentEmoji
      // to the new Emoji - you can clone and then scale but that can look blotchy
      const emoji = new Emoji(emojiPicker.currentEmoji.code, 200)
         .centerReg()
         .drag();
      stage.update();
   });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 400) the width of the window height - (default 500) the height of the window emojis - (default a big list!) an array of UTF codes for emojis    ["\ud83d\udca5","\ud83c\udf35", etc.]    can view the code page https://zimjs.com/code.php?view=67.05 to get raw list to modify 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) 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 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 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 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO see all the methods of the ZIM Panel 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 selectedEmoji - get the selected emoji - this is a zim Emoji object    clone the object to let the user use it    or make a new Emoji() from the selectedEmoji.code and pass in a different size, etc. emojiData - get the list of emojis - warning, if zog to console they will look like emojis wrapper - the ZIM Wrapper used for the picker ALSO see all the properties of the ZIM Panel including close, titleBar, etc. 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 an "emoji" event when an emoji is picked dispatches a "closed" event when closed ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
EXPAND 34455 ▶︎ TextEditor(width, color, backgroundColor, fieldColor, fieldHeight, textSize, sizeList, optionList, colorList, fontList, live, button, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, wrap, limit, scroll, placeholder, password, borderColor, borderWidth, margin, corner, shadowColor, shadowBlur, draggable, boundary, frame, fontListHeight, fontListViewNum, style, group, inherit)
TextEditor(width, color, backgroundColor, fieldColor, fieldHeight, textSize, sizeList, optionList, colorList, fontList, live, button, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, wrap, limit, scroll, placeholder, password, borderColor, borderWidth, margin, corner, shadowColor, shadowBlur, draggable, boundary, frame, fontListHeight, fontListViewNum, style, group, inherit)
TextEditor zim class - extends a zim.Panel which extends a zim.Container which extends a createjs.Container DESCRIPTION A configurable text editor for a ZIM Label - or text in code memory. Call the editor.show(label) method and pass in the label - it will let the user change the following properties:    text, color, bold, italic, align, size, and font Which ones the editor uses can be set with parameters. SEE: https://zimjs.com/cat/texteditor.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 label = new Label({
   text:"press to edit with TextEditor",
   italic:true,
   align:CENTER,
   font:"verdana"
})
   .center()
   .expand()
   .tap(()=>{
      textEditor.show(label);
   });

const textEditor = new TextEditor({
   colorList:true, // or array of colors
   optionList:["bold","italic","align"], // or true, or array with any of these
   sizeList:true, // or array of sizes
   fontList:true, // or array of fonts
   live:true, // default
   scroll:true // default, etc.
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) The TextEditor is made of of the following sub components and many styles need to be set on the sub component types: Panel, TextArea, Button, ColorPicker, Selector, Stepper, List For instance STYLE = {type:{Panel:{titleBarBackgroundColor:red}}} width - (default 400) the width of the editor color - (dark) the color of the TextArea text in the editor backgroundColor - (default lighter) the background color of the editor fieldColor - (default backgroundColor darkened .05) - the background color of the TextArea fieldHeight - (default button height plus 2 margins) - the height of the TextArea textSize - (default 20) the size of the text in the TextArea sizeList - (default false) set to true to show numbers from 5-500    or set to an array of numbers used for the size Stepper [10,12,14,16] for instance optionList - (default false) set to true to show ["bold", "italic", "align"]    or set to an array with any of these values ["bold", "italic"] for instance colorList - (default false) set to true to show the default ZIM ColorPicker    or set to an array with colors [red, green, blue, black, "violet", "#333"] for instance fontList - (default false) set to true to show a default list of fonts    "Arial",    "Courier New",    "Georgia",    "Helvetica",    "Palatino",    "Tahoma",    "Verdana",    // plus on desktop:    "Impact",    "Comic Sans"    or set to an array with desired fonts ["courier", "verdana"] for instance 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 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) limit - (default null) set to a number to limit the TextArea number of characters 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 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 can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 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() frame - (default zdf - ZIM Default Frame) pass in a frame if not the default frame - lets TextArea and ColorPicker work fontListHeight - (default 100) the height of the font list if there is one fontListViewNum - (default 3) the number of fonts to show in the font list if there is one 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 show(label, x, y, frame) - show the editor and pass in the label to operate on    the editor will appear centered above or below the text depending on where there is more room    this can be overridden with the x and y parameters    the TextEditor will show on the stage of the Label    if the label is not on the stage then the stage of the frame parameter otherwise the stage of the ZIMDefaultFrame    If the editor is already open it will not move    Calling show(label2) on a different label will switch the editor to that label    see also the label property hide() - hides the editor closeColorPicker() - close the ColorPicker - this needs to display the text (which is hidden when the ColorPicker opens) 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 ALSO see all the methods of the ZIM Panel 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 textArea - reference to the TextArea label - get or set the label associated with the textEditor button - reference to the Button    if various features are set: swatch - reference to the Rectangle showing color colorPicker - reference to the ColorPicker bold - reference to the bold Button italic - reference to the italic Button align - reference to the align Selector size - reference to the size Stepper font - reference to the font List ALSO see all the properties of the ZIM Panel including close, titleBar, etc. 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. ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches an "input" event when the text is changed - although default is to update live dispatches an "update" event when any property is changed and where text is changed dispatches a "set" event when button is pressed dispatches a "close" event when closed dispatches a "color" event when ColorPicker is opened ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 34993 ▶︎ Keyboard(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)
Keyboard(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)
Keyboard zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION The Keyboard class makes a keyboard ideal for mobile or touch screens. Often, it seems the mobile keyboard can cause problems with layout. This in-canvas keyboard requires much less testing and concern. The Keyboard can work with ZIM Labels to give input text without a TextArea. Thanks Frank Los for the initial design and coding of the Keyboard. 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 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) EXAMPLE
// create Labels to capture the text from the keyboard
const text1 = new Label({text:"", backgroundColor:white}).pos(100,100);
const text2 = new Label({text:"", backgroundColor:white}).pos(100,200);

// create a new Keyboard and pass in the labels as an array
// or if just one label, then pass in the label
const keyboard = new Keyboard([text1, text2]);

// if just the letter is needed use the keydown event
keyboard.on("keydown", e=>{
   zog(e.letter);
});

// create events to capture a mousedown on the labels
const text1Event = text1.on("mousedown", activate);
const text2Event = text2.on("mousedown", activate);
function activate(e) {
   keyboard.show();
   // remove the events when keyboard is active
   text1.off("mousedown", text1Event);
   text2.off("mousedown", text2Event);
}
keyboard.show(); // optionally show the keyboard to start

// add back the events to show the keyboard
keyboard.on("close", ()=>{
   text1.on("mousedown", text1Event);
   text2.on("mousedown", text2Event);
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) labels - (default null) a ZIM Label to show letters in or an array of labels    Keyboard will add a cursor to the 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 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 placeColor - (default "50c4b7") the color of the arrow text when placing cursor in label cursorColor - (default "50c4b7") the cursor color shadeAlpha - (default .2) special keys are shaded darker by this alpha margin - (default 5) the margin around the keyboard from the container width corner - (default 30) the round of the corner (set to 0 for no corner)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] draggable - (default false) set to true to show the drag handle at top right placeClose - (default true) shows an x key to close the cursor placement menu shadowColor - (default "rgba(0,0,0,.2)") set to -1 for no shadow shadowBlur - (default 14) how blurred the shadow is if the shadow is set container - (default zimCurrentFrame stage) if placing Keyboard in different container or stage data - (default see below) pass in data for the letters on the three sets of keyboards    also see the layout parameter for current default layouts like "arabic", "hebrew", etc.    Below is the default data - change any of the keys to change keyboard    There must be three boards (you can request more)    There must be a button specified on the fourth row to toggle to the second screen and back    There must be a button on the second and third screen at the start of the third row    to toggle between the second and third screen    The "shift" and "delete" keys are optional and can be moved or removed    There is a "back" key that is like the "backspace" key but takes the space of one key and not two keys    There will be at least 10 key places but there can be more than 10 keys per row    The last element of the outer array is a an object with special characters for e,u,i,o,a,n    If left off then it will use the characters below in the example.    These can be changed to any characters showing an extra set of any characters.    The fifth and sixth elements are lowercase to uppercase and uppercase to lowercase override mappings    For instance, in the turkish layout ı:"I" and i:"İ" for lowercase to uppercase    and I:"ı" and İ:"i" for uppercase to lowercase.    Use the data property to get this array if desired:    var data = [       [          ["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       ],[          ["1","2","3","4","5","6","7","8","9","0"],          ["!","@","#","$","/","^","&","*","(",")"],          ["1/2","-","'", "\"",":",";",",","?","backspace"],          ["ABC"] // rest of bottom line automatically added       ],[          ["+","x","%","=","<",">","{","}","[","]"],          ["€","£","¥", "$", "₩", "~", "`","¤","♡","☆"],          ["2/2","_","\\","|","《","》","¡","¿","backspace"],          ["ABC"] // rest of bottom line automatically added       ],{          e:["ė","ē","ę","ê","é","ë","è"],          u:["ū","û","ú","ü","ù"],          i:["ī","į","ì","í","ï","î"],          o:["ō","œ","ø","õ","ô","ó","ö","ò"],          a:["ā","ã","å","â","á","ä","à","æ"],          n:["ñ","ń"]       },{          lowercaseletter:"uppercaseletter", // override lowercase to uppercase map          lc2:"uc2"       },{          uppercaseletter:"lowercaseletter", // override uppercase to lowercase map          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)    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! 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 show(index) - shows the Keyboard - use this rather than addTo(), etc.    index (default null) specify the index of the labels array to show cursor in 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 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 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 hasProp(property as String) - returns true if property exists on object else returns false clone() - makes a clone of the Keyboard 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 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 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 "keydown" event with an event object having a letter property    keyboard.on("keydown", function(e) {zog(e.letter);}); // logs letter pressed or "del" for delete Dispatches a "special" event if the special parameter is used and the special key is pressed 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 CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 36305 ▶︎ Organizer(width, list, useAdd, useRemove, usePosition, autoAdd, autoRemove, autoPosition, addForward, removeForward, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, corner, keyEnabled, gradient, gloss, backdropColor, style, group, inherit)
Organizer(width, list, useAdd, useRemove, usePosition, autoAdd, autoRemove, autoPosition, addForward, removeForward, backgroundColor, rollBackgroundColor, selectedBackgroundColor, selectedRollBackgroundColor, color, rollColor, selectedColor, selectedRollColor, spacing, corner, keyEnabled, gradient, gloss, backdropColor, style, group, inherit)
Organizer zim class - extends a zim.Tabs which extends a zim.Container which extends a createjs.Container DESCRIPTION A Tabs bar of interface for organizing a ZIM List. This includes add, up, down, toTop, toBottom and remove icon buttons. The Organizer can sit above the list and allow the user to add, remove and reorder the list. Adding an item will add an empty button - this would need to be filled with the user input, etc. If the user input is not ready, the autoAdd parameter can be set to false. The change event will report an orgType of "add" and the add() method can be used when the input is ready. The same for positioning or removing if desired. See: https://zimjs.com/explore/organizer.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 organizer = new Organizer(250)
      .change(()=>{
         if (organizer.orgType=="add") organizer.orgItem.text = "new";
      });
   new List({
      width:250,
      organizer:organizer // pass the organizer to the list
   });
      .center()
      .mov(0,40);

   // OR

   const list = new List(250)
      .center()
      .mov(0,40);
   var organizer = new Organizer(250, list)
      .center()
      .mov(0,-80)
      .change(()=>{
         if (organizer.orgType=="add") organizer.orgItem.text = "new";
      });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) width of Tabs - this will determine the height as the Buttons are square.    There is no vertical version of an Organizer. list - (default null) an ZIM List object to control - or null to add later with the list property useAdd - default(true) set to false to not include the add button useRemove - default(true) set to false to not include the remove button usePosition - default(true) set to false to not include the position buttons (up, down, toTop, toBottom) autoAdd - default(useAdd) set to false to not automatically add an item    the "change" event will still be dispatched and the orgType will be "add"    the add() method can be used to add user input for instance autoRemove - default(useRemove) set to false to not automatically add an item    the "change" event will still be dispatched and the orgType will be "remove"    the remove() method can be used to manually remove autoPosition - default(usePosition) set to false to not automatically position an item    the "change" event will still be dispatched and the orgType will be "up", "down", "top", "bottom"    the up(), down(), toTop(), toBottom() methods can be used to manually position addForward - (default true) set to false to add item behind the current item (in list index) when adding removeForward - (default true) set to false to select the item before the current item (in list index) when deleting backgroundColor - (default "#777") the background color of the buttons rollBackgroundColor - (default "#555") the background color of the button as rolled over selectedBackgroundColor - (default "#444") the background color of the button when selected color - (default "white") the text color of a deselected button when not rolled over rollColor - (default color) the rollover color selectedColor - (default color) the text color of the selected button selectedRollColor - (default color) the text color of the rolled over selected button spacing - (default 2) the distance between the buttons corner - (default 0) the corner radius of the tabs can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 buttons gloss - (default null) 0 to 1 (try .1) adds a gloss to the buttons backdropColor - (default "#333") the background color of the list window (any CSS color) 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 add(index, item, clone) - manually add item at index - both are optional - index defaults to current index    clone defaults to false - set to true to add a clone of the item - returns object for chaining up(index) - move item up one index number in list - index defaults to current index - returns object for chaining down(index) - move item down one index number in list - index defaults to current index - returns object for chaining toTop(index) - move item to top of list (index 0) - index defaults to current index - returns object for chaining toBottom(index) - move item bottom of list (index length-1) - index defaults to current index - returns object for chaining remove(index) - manually remove item at index - index defaults to current index - returns object for chaining setButtons() - manually rotate buttons to match List direction - automatically done when added to list or list is initially added to organizer 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 ALSO All Tab methods 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 list - the list the organizer is operating on lastIndex - read-only selected index before change event is dispatched orgIndex - read-only current index of list - same as list.currentIndex orgItem - read-only selected item of list - same as list.selected orgType - read-only type of button pressed - "add", "remove", "up", "down", "top", "bottom" removedItem - a reference to the item that has been removed when removed button is pressed or remove() is called group - used when the object is made to add STYLE with the group selector (like a CSS class) ALSO see all Tab properties 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 "change" event when the buttons are pressed (may be the same button again)    use orgType for what type "add", "remove", "up", "down", "top", "bottom"    use orgIndex or list.currentIndex for current list index    use orgItem or list.selected for selected item    use removedItem for a removed item    use lastIndex for index before change ALSO All Tab events ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 36699 ▶︎ Connectors(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)
Connectors(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)
Connectors zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds nodes (any DisplayObject - default a Circle) that can be dragged to draw a connector line. There are three main uses for Connectors: 1. Connecting dots like in coloring books - use linear:true 2. Making hieararchy type drawings - use snaps 3. Connecting objects like boxes together - pass in objects to the points The num parameter limits the number of lines that can be drawn from a node. The dropType can be set to require nodes to be dropped on or off other nodes (or the default, any). There are min and max distances the connections can be made. These and the other parameters provide a variety of game and puzzle options. The Line can be set to have start and end heads. The lineType in the Line can be set to "straight", "corner" or "curve" Line also accepts points for any arrangement of a connector but in this version, these have not been used in Connectors. Currently, there are no pre-made lines - the user would have to make these. In future versions, we will look at making nodes and lines based on a ZIM Hierarchy object. This would also allow use to handle undo, redo and save. See: https://zimjs.com/cat/connectors.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
// draws four general connectors that can be connected to one another in a box
// adjust connector nodes after connections are complete
const connectors = new Connectors({linear:true}).center();
connectors.on("complete", ()=>{
   connectors.nodes.loop(node=>{
   node.radius = 5;
   node.color = red;
});
// or hide connectors
// connectors.nodes.alp(0);
stage.update();
});
EXAMPLE
// make a grid of connectors and only connect to other nodes
// do not let user delete a node or doubleclick to move a node
const points = [];
const spacing = 60;
loop(10, i=>{
   loop(10, j=>{
      points.push([i*spacing, j*spacing]);
   });
});
const connectors = new Connectors({
   points:points,
   node:new Rectangle(12,12,purple).centerReg(),
   line:new Line({color:purple, thickness:12}),
   nodeRollColor:orange,
   dropType:"on",
   dblclick:false,
   deleteNode:false,
   max:70
}).center();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default null) the width of the connnectors container or will grow with added connectors height - (default null) the height of the connnectors container or will grow with added connectors 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    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    or baseInfo can be an array with three different formats:       [all]       [left/right, top/bottom]       [left, right, top, bottom]    These can be numbers greater than 0 for the number of nodes on the side       or 0 for no nodes on the side       or -1 for both corners on the side       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    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    the caps should be set to "round" if drawing with clear or transparent nodes linear - (default false) lines will only connect to points that are next to one another (in the point order)    this is good for connecting dots linearWrap - (default true) let the first point connect to the last point in the linear setting linearOrder - (default false) require the points to be connected in order num - (default null) set the maximum number of lines that can come from a node snapH - (default null) snap the nodes to a provided horizontal distance snapV - (default null) snap the nodes to a provided vertical distance dropType - (default "any") determines what happens when a node is dropped as follows:    "any" lets the node be dropped anywhere (and may be snapped)    "on" will save the node if dropped on an existing node otherwise it is removed or put back to where it is dragged from    "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 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    selecting a node selects its children unless the ctrl key is held at which point it will not select children    selected nodes can be deleted with the delete key (or hold to delete)    deleting a node will delete its children fullMove - (default true) set to false to not automatically drag a node when it is full (if num is set) min - (default node radius or smallest dimension) the minimum distance from the node's parent a node must move before placing node max - (default null) the maximum distance from the node's parent a node can be moved to be placed boundary - (default null) a ZIM Boundary object for the nodes - or a DisplayObject such as the stage (see ZIM Drag) expand - (default 0 or 10 on mobile) expand the node mousedown area nodeRollColor - (default node.color.lighten(.2)) the color of the node as rolled over nodeRollBorderColor - (default node.borderColor) the borderColor of the node as rolled over nodeSelectedColor - (default white) the selected node color if doubleclicked nodeSelectedBorderColor - (default node.borderColor) the selected node borderColor if doubleclicked baseColor - (default node.color) the color of the node connected to a base DisplayObject (see points parameter) baseBorderColor - (default node.borderColor) the borderColor of the node connected to a base DisplayObject (see points parameter) baseRollover - (default false) set to true to change all nodes on a base to their roll colors when rolling over the base 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) 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 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 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 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 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    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)    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 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    creatorNode - a reference to the node at the end of the line nodes - the Container that holds the nodes lines - the Container that holds the lines points - a read only array of points of node 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:    connectors - an array of all connector nodes on the base    connectorMoveEvent - reference to pressmove event on base    connectorUpEvent - reference to pressmove event on base    connectorOverEvent - reference to pressmove event on base    connectorOutEvent - reference to pressmove event on base    setConnectorColors(baseColor, baseBorderColor, nodeRollColor, nodeRollBorderColor) - method to set colors 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 "connection" event when a node is made dispatches a "noconnection" event if a connection is not made 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 CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 37725 ▶︎ Marquee(width, height, items, time, transition, speed, direction, marginLeft, marginRight, marqueeType, borderColor, borderWidth, refresh, mix, style, group, inherit)
Marquee(width, height, items, time, transition, speed, direction, marginLeft, marginRight, marqueeType, borderColor, borderWidth, refresh, mix, style, group, inherit)
Marquee zim class - extends a zim.Container which extends a createjs.Container 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 See: https://zimjs.com/marquee.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 promo1 = new Container(600, 200);
   new Rectangle(promo1.width, promo1.height, yellow).addTo(promo1);
   new Circle(30, red).center(promo1).drag();

   // could be more

   // optionally or alternatively, specify a Marquee object
   // there can be multiple image properties using end src as key
   // just use null as value if no URL
   const marqueeData = {"retina.jpg": ["https://zimjs.com/retina.html", "_blank"]};
   const marqueePath = "assets/";

   // create Marquee
   // note the actual width of marquee will be 25+25 more for added margins (optional)
   const marquee = new Marquee(600, 200, [promo1])
      .center()
      .load(marqueeData, marqueePath);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) width of marquee content    final marquee width will have marginLeft and marginRight added to this width height - (default 100) height of content and marquee items - default(null) an array of Display Objects - can be interactive time - default(5) time interval in seconds for changing items (also see ZIM TIME constant)    also see marqueeTime property for each item to individually override the time for viewing 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" 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 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    note: loaded files will always come after initial marquee items 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 add(obj, url, target) - add a Display Object (obj) - can be interactive content - returns obj for chaining    can provide an overall url and target for url    but often will provide navigation button, etc. as part of interactive content remove(obj) - remove an object from the marquee - returns obj for chaining    will also call a dispose() method on the obj if there is one go(page) - transition to specific page (obj) or index - returns obj for chaining pause(state, immediate) - pause or unpause the Marquee - returns obj for chaining    can be used by interactive code to pause Marquee when interacting    immediate (default false) set to true to make the Marquee go to next item right away when unpausing (no effect when pausing) load(data, path) - Marquee object for images their optional action url and target: - returns obj for chaining    data in format: {imageSrc:"actionURL", imageSrc:["actionURL", "target"], etc.}    path: optional directory location such as a relative path: "assets/" 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 content - a reference to the ZIM Container that holds the content pages - a reference to the ZIM Pages object that holds the items    use pages.pages to access an array of pages, etc. - see Pages Class button - a reference to the pause/play button if there is one indicator - a reference to the ZIM Indicator if there is one - see Indicator Class selectedIndex - the selected index of the Marquee selected - the selected item of the Marquee lastSelected - the last selected item of the Marquee time - get or set the time of the marquee (between changing items) speed - get the speed of the transition paused - read only property as to whether the Marquee is paused - see pause() method interval - a reference to the ZIM interval left - a reference to the left Container right - a reference to the right Container if there is one icon - a reference to the Z icon if there is one label - a reference to the MARQUEE Label that pops out of the Z if there is one    eg. label.visible = false to not show label popping out marqueeLoader - a reference to the ZIM loadAssets queue if load() is used Each item gets a marquee property that points to the ZIM marquee it is in Each item gets a marqueViews property recording how many times viewed Each item can have a marqueeTime property set to ms to customize its view time 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 "page" event when item starts to change dispatches a "pagetransitioned" event when item finishes changing ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 38150 ▶︎ Loader(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)
Loader(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)
Loader zim class - extends a zim.Button which extends a zim.Container DESCRIPTION Loader lets you upload images, text or JSON. These are available on the loaded event function. Loader uses the HTML input type=file tag and overlays this with a createjs DOMElement. Loader is a Button so can be displayed for the user to click on. It defaults to a dashed line region as you can also drag and drop files to the loader. You can also save an image using the save() method to a new browser window for the user to save NOTE due to the HTML tag being overlayed, the loader.resize() must be called if it is moved (This is called automatically when the stage is resized) NOTE if the loader is placed in a container and the container is removed or added again the loader must be manually removed or added again with loader.removeFrom() or loader.addTo(). This is so ZIM does not have to keep track of HTML tags each time a container is added or removed. 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 loader = new Loader({
   frame:frame,
   label:"UPLOAD PIC OR DROP PICS HERE",
   width:700,
   height:400,
   corner:50
}).center();
loader.on("loaded", e=>{
   loop(e.bitmaps, bitmap=>{
      bitmap.centerReg().drag();
   });
   loader.removeFrom(stage);
   stage.update();
});

// and to later save for instance in a button event:
saveButton.on("click") {
   loader.save(stage); // or some other container... can specify crop bounds too
}
EXAMPLE
// loading a JSON file:
const loader = new Loader({
   frame:frame,
   type:"JSON",
   label:"UPLOAD JSON",
   width:700,
   height:400,
   corner:50
}).center();
// choose a test.json file with the following in it:
// {"test":"testing"}
loader.on("loaded", e=>{
   zog(e.json.test); // "testing"
   loader.removeFrom();
   stage.update();
});
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 250) the width of the button height - (default 70) the height of the button label - (default "UPLOAD PIC") ZIM Label or plain text type - (default "image") set to "text" to receive text or "JSON" to receive a parsed JSON file and "other" for others like MP3 backgroundColor - (default "rgba(0,0,0,.05)") background color of button (any CSS color) rollBackgroundColor - (default "rgba(0,0,0,.1)") rollover color of button backbground color - (default "rgba(0,0,0,.5)") text color of button (any CSS color) rollColor - (default color) rollover text color of button borderColor - (default rgba(0,0,0,.3)) the color of the border borderWidth - (default 1) thickness of the border corner - (default 0) the round of the corner (set to 0 for no corner)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 hitPadding - (default 0) adds extra hit area to the button (good for mobile) 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 backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    https://zimjs.com/bits/view/pizzazz.html rollBacking - (default null) a Display object for the backing of the rolled-on button rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off icon - (default false) set to display object to add icon at the center of the button and remove label    https://zimjs.com/bits/view/icons.html rollIcon - (default false) set to display object to show icon on rollover toggle - (default null) set to string to toggle with label or display object to toggle with icon or if no icon, the backing rollToggle - (default null) set to display object to toggle with rollIcon or rollBacking if no icon    there is no rollToggle for a label - that is handled by rollColor on the label toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle dashed - (default true) set to false to turn off the dashed for the border frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag) multiple - (default true) set to false to let user only upload one file rather than multiple files (with shift or ctrl) accept - (default null) set to extension / MIME-type to limit types of files the upload dialog will suggest    here are some examples:    "image/*"    "image/jpeg, image/png"    ".png, .jpeg, .jpg, .gif"       "image/jpeg, .jpeg, .jpg"    ".txt, .json, application/json"    "audio/mpeg, .mp3" 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 resize() - call the resize event if the scale or position of the Loader is changed    this will sync the location of the HTML input tag    resize() is only needed if the scale or x, y of the Loader (or its container) is changed    it is not needed for general window resizing - the Loader handles this    Note: if the Frame itself changes location in the HTML document, call a frame.update()    this will then dispatch an update event to the Loader and it will resize()    this is not needed if resizing the window or scrolling - see Frame update() method docs save(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality) - save a picture (supports ZIM DUO)    content - the Display object to be saved such as a Container, Bitmap, etc.    filename - (default random) - the text name of the file (with or without extension - also see type)    x, y, width, height - the cropping bounds on that object otherwise defaults to 0,0,stageW,stageH    cached - (default false) set to true if the object is currently already cached    cachedBounds - if you are saving a different bounds than was previously cached       setting the bounds here (createjs.Rectangle) will restore the cache to the previous bounds    type - (default "png") set to "jpeg" for jpeg    data - (default false) set to true to save as base64 data       otherwise save returns the object for chaining    quality - (default .92) a number between 0 an 1 representing the quality of the saved image (jpeg)       note, this parameter may be moved to before data in the next version of ZIM Button methods: setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)    Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"    note - all backing will have a pattern property if a pattern is set as a backing setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)    Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon" toggle(state) - forces a toggle of label if toggle param is string, else toggles icon if icon is set or otherwise toggles backing    state defaults to null so just toggles    pass in true to go to the toggled state and false to go to the original state 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 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 tag - the HTML input tag of type file - used for uploading frame - get or set the frame - set this if changing frames Button properties: text - references the text property of the Label object of the button label - gives access to the label backgroundColor - get or set non-rolled on backing color (if no backing specified) rollBackgroundColor - get or set rolled on backing color color - get or set non-rolled on text color (if no icon specified) rollColor - get or set rolled on text color backing - references the backing of the button rollBacking - references the rollBacking (if set) icon - references the icon of the button (if set) rollIcon - references the rollIcon (if set) toggleObj - references the toggle object (string or display object if set) rollToggle - references the rollToggle (if set) toggled - true if button is in toggled state, false if button is in original state enabled - default is true - set to false to disable rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off focus - get or set the focus property of the Button used for tabOrder 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. ACTIONEVENT This component is affected by the general ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS loaded - is dispatched when the files(s) are uploaded - the event object comes with the following properties:    FOR IMAGES (see types array)       e.bitmaps - an array of Bitmap objects of the loaded images       e.bitmap - the first Bitmap to be created from the loaded images       e.lastBitmap - the last Bitmap to be created from the loaded images       e.total - the total Bitmap objects to be created from the loaded images    FOR TEXT (see types array)       e.texts - an array of String objects of the loaded text files       e.text - the first text loaded       e.lastText - the last text loaded       e.total - the total number of texts loaded    FOR JSON (see types array)       e.jsons - an array of JSON objects of the loaded JSON files       e.json - the first JSON object loaded       e.lastJSON - the last JSON object loaded       e.total - the total number of JSON files loaded    FOR OTHER (see types array)       e.others - an array of other objects of loaded files       e.other - the first other object loaded       e.lastOther - the last other object loaded       e.total - the total number of other files loaded ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 38756 ▶︎ TextArea(width, height, size, padding, color, backgroundColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, password, inputType, wrap, maxLength, frame, expand, style, group, inherit)
TextArea(width, height, size, padding, color, backgroundColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, password, inputType, wrap, maxLength, frame, expand, style, group, inherit)
TextArea zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION TextArea creates an input text field by overlaying an HTML TextArea. The TextArea is then overlayed with the createjs DOMElement and scaled and positioned with ZIM code. This can also be used if selectable text is required Access to the HTML tag is provided with the TextArea tag property. So CSS Styles can be applied to the HTML tag as with any HTML textarea tag The TextArea comes with a ZIM Rectangle in behind that you can adjust with parameters or remove completely if you so desire using the TextArea background property ie. myTextArea.background.alpha=0; or myTextArea.removeChild(myTextArea.background) NOTE due to the HTML tag being overlayed, the TextArea.resize() must be called if it is moved (This is called automatically when the stage is resized) It also means that a TextArea in a Window or List is probably not a good thing. Consider using Label and then toggling a TextArea on mouseover and mouseout. See https://zimjs.com/snips for an older discontinued example. NOTE if the TextArea is placed in a container and the container is removed or added again the textArea must be manually removed or added again with textArea.removeFrom() or textArea.addTo(). This is so ZIM does not have to keep track of HTML tags each time a container is added or removed. When using TextArea in a Pane or in Pages this will be automatically handled only if the TextArea is directly in the Pane or the page (not nested in further Containers) NOTE rotation and skewing of TextArea is not supported - although might work with custom CSS transformations NOTE because of these limitations, consider the TextEditor as a solution. The TextEditor allows you to use a Label which is a proper part of the Canvas and then change the label with a pop-up editor that includes a TextArea. SEE: https://zimjs.com/cat/texteditor.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 textArea = new TextArea(300, 200).center();

const label = new Label({text:""}).pos(20,20);
textArea.on("input", ()=>{
   label.text = textArea.text;
   stage.update();
});

// to set scrollBars on TextArea use CSS on the TextArea tag property:
textArea.tag.style.overflow = "auto"; // etc.

// if manually scaled or positioned (or container is scaled or positioned)
// then the TextArea must be resized with the resize method
textArea.sca(.5).mov(200);
textArea.resize();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 250) the width of the TextArea backing (the textarea field will be that less the padding*2) height - (default 70) the height of the TextArea backing (the textarea field will be that less the padding*2)    Note: to set scrollBars use CSS: textArea.tag.style.overflow = "auto"; 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) 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 corner - (default 0) the round of the corner (set to 0 for no corner)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] shadowColor - (default null) the shadow color (css color) of a drop shadow shadowBlur - (default null) pixels of how blurred the shadow is if the shadow is set - eg. 10 dashed - (default true) set to false to turn off the dashed for the border id - (default null) a string id for the HTML textarea tag for CSS styling, etc. placeholder - (default null) a string that is used for the HTML textarea tag placeholder parameter readOnly - (default false) set to true to make TextArea read only (still selectable) spellCheck - (default true) set to false to turn Browser spell check off password - (default false) set to true to turn the field into a password field - single line only (uses input field type=password and not TextArea) inputType - (default false) set to "text" to show a text input (one line) - or try other HTML input types - "email", "number", etc.    the various types of HTML inputs are not really tested - would suggest using Tag() instead for these (or preferably ZIM components) wrap - (default true) set to false to stop the textarea from wrapping (css white-space:pre) maxLength - (default null) set to a number to limit the number of characters in the textarea frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag) expand - (default 20) hit area around background to count as a press on TextArea - 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) inherit - (default null) used internally but can receive an {} of styles directly METHODS setFocus(type) - sets the focus of the TextArea tag (thanks Armin for the prompting)    type is a Boolean that defaults to true - set to false to make the TextArea blur (loose focus)    might need timeout 100ms before setting    see also focus property resize() - call the resize method if the scale or position of the TextArea is changed    this will sync the location of the HTML textarea tag    resize() is only needed if the scale or x, y of the TextArea (or its container) is changed    it is not needed for general window resizing - the TextArea handles this    Note: if the Frame itself changes location in the HTML document, call a frame.update()    this will then dispatch an update event to the TextArea and it will resize()    this is not needed if resizing the window or scrolling - see Frame update() method docs 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 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 currentValue - get or set the text content of the TextArea text - the same as currentValue - for convenience... focus - get or set if the TextArea tag has focus or use setFocus() to set (might need timeout 100ms before setting) readOnly - set to true to not be able to edit or to false to be able to edit (always can select) maxLength - get or set the maximum number of characters typed - will not truncate existing characters until typed tag - the HTML textarea tag - just a regular HMTL form tag which can be styled background - access to the Rectangle() used for the background    you can remove this with yourTextArea.background.removeFrom(yourTextArea);    or adjust it dynamically with any of the Rectangle properties like color 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 frame - get or set the frame - set this if changing frames 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 focus, blur are dispatched when the text area gains and loses focus input is dispatched when the text area is typed or pasted into change is dispatched when the text area is different after losing focus These are just the html events passed on through - note the difference between input and change! ALSO see the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 39176 ▶︎ Tag(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit)
Tag(width, height, id, frame, backgroundColor, padding, paddingHorizontal, paddingVertical, expand, style, group, inherit)
Tag zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Creates a <div></div> with id of id and overlays it on the Canvas with the createjs DOMElement The tag is scaled and positioned with ZIM code and can be filled with any HTML desired Access to the HTML tag is provided with the tag property (so you can use innerHTML or style on this) However a convenience innerHTML and style properties have been added to Tag CSS Styles can be applied to the HTML tag as with any HTML div tag Or use the chainable add() method to add a String of HTML (instead of setting innerHTML) SEE: https://zimjs.com/explore/tag.html NOTE due to the HTML tag being overlayed, the tag.resize() must be called if it is manually scaled or moved (This is called automatically when the stage is resized) NOTE if the tag is placed in a container and the container is removed or added again the tag must be manually removed or added again with tag.removeFrom() or tag.addTo(). This is so ZIM does not have to keep track of HTML tags each time a container is added or removed. NOTE rotation and skewing of Tag is not supported - although might work with custom CSS transformations 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 tag = new Tag(300, 60).center().add("<h1>TITLE TEXT</h1>");
tag.style.color = red;
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 250) the width of the div tag height - (default 70) the height of the div tag    Note: to set scrollBars use CSS: tag.style.overflow = "auto"; 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 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) inherit - (default null) used internally but can receive an {} of styles directly METHODS add(htmlString) - chainable method to add HTML to tag - calling add() again will append    see innerHTML property as alternative or to overwrite the innerHTML resize(update) - call the resize event if the scale or position of the tag is changed    this will sync the location of the div tag    resize() is only needed if the scale or x, y of the tag (or its container) is changed    it is not needed for general window resizing - the Tag handles this    Note: if the Frame itself changes location in the HTML document, call a frame.update()    this will then dispatch an update event to the Tag and it will resize()    this is not needed if resizing the window or scrolling - see Frame update() method docs    update defaults to true - set to false to not update the stage during a resize() 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 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(), 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 tagID - the assigned id of the tag tag - the HTML div tag - just a regular HMTL div tag which can be styled innerHTML - the innerHTML property of the tag (so myTag.tag.innerHTML is not needed) background - access to the ZIM Rectangle used as the background frame - get or set the frame - set this if changing frames 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: See the CreateJS Easel Docs for Container events such as: added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover CLOSE ▲PAGE ▤CODE ▤
ZIM METHODS
-------------- BASE METHODS EXPAND 39463 ▶︎ obj.cache(width||x, height||y, null||width, null||height, scale, options, margin)
obj.cache(width||x, height||y, null||width, null||height, scale, options, margin)
cache zim DisplayObject method overrides CreateJS cache() method with more flexible parameters https://createjs.com/docs/easeljs/classes/Container.html#method_cache DESCRIPTION Turns the object into a bitmap which can be rendered more efficiently, especially on mobile. Caching may blur the object slightly, most noticable when caching a Label. Every stage update must re-render objects on the stage. This can be processor intensive for lots of vectors - such as Labels and Shapes. Generally, we can build without caching but if better performance is needed, then caching may help. A cached object can be transformed (scale, rotation, position, skew, alpha) but if the object inside changes, for instance if the text changes, then updateCache() will need to be called. Constantly calling updateCache() for instance, an animated blob, will not help performance. A handy trick is to cache an object before animating and uncaching it after animating this can improve animation performance and the slight blur of the object is not noticed during animation. ALSO SEE: updateCache() and uncache() EXAMPLE
const circle = new Circle(50, red).cache().center();

timeout(1, ()=>{
   circle.alpha = .5; // cache does not have to be updated to see alpha change
   stage.update();
});

timeout(2, ()=>{
   circle.color = blue;
   circle.updateCache(); // cache must be updated to see color change
   stage.update();
});
EXAMPLE
// cache text as it is animated
new Label("Cached Text")
   .cache() // cache the text so animation is smoother
   .alp(0)
   .center()
   .animate({
      props:{alpha:1},
      time:2,
      call:target=>{
         target.uncache(); // uncache the label so it is crisper looking
      }
});
PARAMETERS supports DUO - parameters or single object with properties below ** cache dimensions will be set to the bounds of the object if the first two or four parameters are not provided 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 width - (default getBounds().width) the width of the chache - or null if first two parameters are provided height - (default getBounds().height) the height of the chache - or null if first two parameters are provided 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 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 RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 39534 ▶︎ obj.updateCache(blendMode)
obj.updateCache(blendMode)
updateCache CreateJS method https://createjs.com/docs/easeljs/classes/Container.html#method_updateCache DESCRIPTION Updates the cache when there is a chache otherwise gives an error. ALSO SEE: cache() and uncache() EXAMPLE
const circle = new Circle(50, red).cache().center();

timeout(1, ()=>{
   circle.alpha = .5; // cache does not have to be updated to see alpha change
   stage.update();
});

timeout(2, ()=>{
   circle.color = blue;
   circle.updateCache(); // cache must be updated to see color change
   stage.update();
});
PARAMETERS blendMode - (default null) a blendMode (compositeOperation) see ble()    if a blendMode is provided the previous cache is not deleted as the new cache is drawn RETURNS null CLOSE ▲PAGE ▤CODE ▤
EXPAND 39572 ▶︎ obj.uncache()
obj.uncache()
uncache zim DisplayObject method overrides CreateJS cache() to return object for chaining https://createjs.com/docs/easeljs/classes/Container.html#method_uncache DESCRIPTION Clears the cache. ALSO SEE: cache() and updateCache() EXAMPLE
// cache text as it is animated then uncache
new Label("Cached Text")
   .cache() // cache the text so animation is smoother
   .alp(0)
   .center()
   .animate({
      props:{alpha:1},
      time:2,
      call:target=>{
         target.uncache(); // uncache the label so it is crisper looking
      }
});
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 39606 ▶︎ obj.on(type, listener, scope, once, data, useCapture)
obj.on(type, listener, scope, once, data, useCapture)
on CreateJS method https://createjs.com/docs/easeljs/classes/Container.html#method_on DESCRIPTION Captures events. Similar to addEventListener() in raw JavaScript but is shorter to write and has a few extra features. Generally, events are when interactivity occurs or ZIM has a message. Here are some types: "click", "dblclick", "mousedown/pressdown", "pressmove", "pressup", "mousemove", "stagemousemove", "mouseover", "mouseout" "ready", "complete", "change", "keydown", "keyup" The events available for ZIM Objects are listed at the bottom of their Doc entry. Events can also be turned off in a couple ways - see the examples. To turn the event off the return value of the on() method is used so DO NOT CHAIN THE ON METHOD ALSO SEE: off() and tap(), change(), movement(), hov(), hold() EXAMPLE
// BASIC EVENT
const button = new Button().center();
// the type of event as a string and the function to call
// here we use an arrow function
button.on("click", ()=>{
   zgo("https://zimjs.com", "_blank");
});

// alternatively, using an anonymous function
button.on("click", function() {
   zgo("https://zimjs.com", "_blank");
});

// alternatively, using a named function
// do not put () after the function name
// that would call the function right away which is not desired
// we want to tell the on() method which function to run when the event happens
button.on("click", doClick);
function doClick() {
   zgo("https://zimjs.com", "_blank");
}
EXAMPLE
// EVENT OBJECT
const tile = new Tile(new Rectangle(), 5, 5, 2, 2).center();
tile.on("mousedown", e=>{ // collect the event object in parameter e
   // e.target is the object that caused the event (one of the rectangles)
   e.target.alpha = 0;
   // e.currentTarget is the object on which the event is placed (the tile)
   e.target.mov(5);
   // do not forget to update stage in events if needed!
   stage.update();
});
EXAMPLE
// REMOVING EVENT
let keyEvent = frame.on("keydown", e=>{
   zog(e.keyCode); // will tell code for key pressed
   // etc.
});
timeout(2, ()=>{ // time in seconds as of ZIM Cat
   // remove the keyEvent
   frame.off("keydown", keyEvent);
});

// RE-ADDING EVENT
timeout(4, ()=>{
   // add the keyEvent back again
   // note - the event must be re-assigned to use again
   // this leads to a tricky bug if not careful!
   keyEvent = frame.on("keydown", keyEvent);
});
timeout(6, ()=>{
   // remove the keyEvent again
   // this only works if we re-assigned the latest event to keyEvent
   // which is why we used let rather than const
   frame.off("keydown", keyEvent);
});
EXAMPLE
// ONE EVENT CALL
// call this function only once when mousing over the stage
// note: "mousemove" would only trigger if moving over an object on the stage
stage.on("stagemousemove", ()=>{
   pauseAnimate(false); // unpause all animations
}, null, true); // this true means remove the event after calling it once

// REMOVE METHOD
// a remove() method is available on the event object
const circle = new Circle();
circle.on("mouseover", e=>{
   circle.alpha -= .1;
   if (circle.alpha <= .5) e.remove();
});
PARAMETERS type - the type of event as a string - this depends on the object on which the event is being placed    here are some common events - see the EVENTS section of the specific object for more    "click", "dblclick", "mousedown/pressdown", "pressmove", "pressup",    "mousemove", "stagemousemove", "mouseover", "mouseout"    "ready", "complete", "change", "keydown", "keyup" listener - the function to call when the event happens       this is often an arrow function or an anonymous function but can be a named function    the function will receive an event object as its parameter often collected as e    see https://createjs.com/docs/easeljs/classes/MouseEvent.html for properties, etc.    common event object properties are:        target (what caused the event),       currentTarget (what the event was placed on)       keyCode (for key events)    often used as e.target, e.currentTarget, e.keyCode    scope - (optional) the scope to execute the listener in.    Defaults to the dispatcher/currentTarget for function listeners,    and to the listener itself for object listeners (ie. using handleEvent). once - (default false) set to true to remove the listener after the first event call data - (default null) arbitrary data that will be included as the second parameter when the listener is called. useCapture - (default false) for events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase RETURNS function to turn event off (DO NOT CHAIN THE ON METHOD) CLOSE ▲PAGE ▤CODE ▤
EXPAND 39739 ▶︎ obj.off(type, listener, useCapture)
obj.off(type, listener, useCapture)
off CreateJS method https://createjs.com/docs/easeljs/classes/Container.html#method_off DESCRIPTION Turns an event off using the return value of the on() method. ALSO SEE: on() EXAMPLE
// REMOVING EVENT
let keyEvent = frame.on("keydown", e=>{
   zog(e.keyCode); // will tell code for key pressed
   // etc.
});
timeout(2, ()=>{ // time in seconds as of ZIM Cat
   // remove the keyEvent
   frame.off("keydown", keyEvent);
});

// RE-ADDING EVENT
timeout(4, ()=>{
   // add the keyEvent back again
   // note - the event must be re-assigned to use again
   // this leads to a tricky bug if not careful!
   keyEvent = frame.on("keydown", keyEvent);
});
timeout(6, ()=>{
   // remove the keyEvent again
   // this only works if we re-assigned the latest event to keyEvent
   // which is why we used let rather than const
   frame.off("keydown", keyEvent);
});
PARAMETERS type - the string type of the event used in on() listener - the listener function or object used in on() useCapture - (default false) the setting for the capture or bubbling/target phase used in on() RETURNS null CLOSE ▲PAGE ▤CODE ▤
EXPAND 39789 ▶︎ obj.removeAllEventListeners(type)
obj.removeAllEventListeners(type)
removeAllEventListeners CreateJS method https://createjs.com/docs/easeljs/classes/Container.html#method_removeAllEventListeners DESCRIPTION Removes all event listeners or all event listeners of a certain type ALSO SEE: on() and off() EXAMPLE
// REMOVING EVENT
rect.removeAllEventListeners(); // remove all
holder.removeAllEventListeners("click"); // remove all click listeners
PARAMETERS type - the string type of the event used in on() RETURNS null CLOSE ▲PAGE ▤CODE ▤
EXPAND 39817 ▶︎ obj.getBounds()
obj.getBounds()
getBounds CreateJS method https://createjs.com/docs/easeljs/classes/Container.html#method_getBounds DESCRIPTION Gets bounds data for a Display Object (with bounds set). This will have x, y, width and height properties. Imagine the bounds as an invisible rectangle around the object. The bounds are what dictate the width and height of an object (along with scale). The bounds will affect how an object is positioned with pos(). The bounds also may affect certain types of hitTests. Most ZIM DisplayObjects have their bounds set automatically. Shape() however does not have its bounds set automatically. ALSO SEE: setBounds() EXAMPLE
const rect = new Rectangle(100, 100, blue).center();
zog(rect.getBounds()); // {x:0, y:0, width:100, height:100}

const circle = new Circle(100, red).center(); // 100 is the radius
zog(circle.getBounds()); // {x:-100,y:-100,width:200,height:200}
// note that a Circle has its origin (0,0) in the middle
// so half the bounds goes to the left and above
// and the width and height are twice the radius

// Also note that the registration point is completely independent from the bounds
// and independent from the origin.  See https://codepen.io/zimjs/pen/qBEjYZV
RETURNS object with x, y, width and height properties CLOSE ▲PAGE ▤CODE ▤
EXPAND 39858 ▶︎ obj.setBounds(width||x||Boundary, height||y, null||width, null||height)
obj.setBounds(width||x||Boundary, height||y, null||width, null||height)
setBounds zim DisplayObject method overrides CreateJS cache() method with more flexible parameters https://createjs.com/docs/easeljs/classes/Container.html#method_setBounds DESCRIPTION Sets bounds for a Display Object. Imagine the bounds as an invisible rectangle around the object. The bounds are what dictate the width and height of an object (along with scale). The bounds will affect how an object is positioned with pos(). The bounds also may affect certain types of hitTests. Most ZIM DisplayObjects have their bounds set automatically. Shape() however does not have its bounds set automatically. The setBounds() method will override any automatic bounds. ALSO SEE: getBounds() EXAMPLE
new Shape().f(red).dr(0,0,100,100).setBounds(100,100).center();
// without bounds set on the shape, it would not center properly
EXAMPLE
// Containers have two options for how bounds are determined
// 1. the size can be passed in to start in which case these bounds will remain unchanged
// 2. or no size can be passed in which means the bounds will grow to the contents
// setting bounds to null will convert a type 1 container into a type 2 container
const holder = new Container(100,100).center();
new Rectangle(200,200).addTo(holder);
// currently the bounds are {x:0,y:0,width:100,height:100}
holder.setBounds(null);
// now the bounds are {x:0,y:0,width:200,height:200}
new Rectangle(300,300).addTo(holder);
// now the bounds are {x:0,y:0,width:300,height:300}
holder.setBounds(100,100);
// now the bounds are back to {x:0,y:0,width:100,height:100}
// this example just demonstrates it would not be very practical
PARAMETERS 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 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 RETURNS the object for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 39914 ▶︎ obj.clone(exact)
obj.clone(exact)
clone zim DisplayObject method overrides CreateJS cache() https://createjs.com/docs/easeljs/classes/Container.html#method_clone DESCRIPTION Makes a copy of the DisplayObject (and children). The clone() method is particularily handy for making multiple assets from a single asset() Although new Pic() instead of asset() is automatically cloned to give a new object each new Pic() ALSO SEE: duplicate() to duplicate custom properties as well EXAMPLE
const circle = new Circle(100, red).center();
circle2 = circle.clone().pos(100,100,RIGHT,BOTTOM); // make a copy and position at bottom right
EXAMPLE
asset("pic.jpg").center();
asset("pic.jpg").pos(100,100,RIGHT,BOTTOM); // will just move the existing asset to the corner
asset("pic.jpg").clone().pos(100,100,RIGHT,TOP); // will add a copy of the asset at the top
new Pic("pic.jpg").pos(0,100,CENTER); // no need to clone() a new Pic()
PARAMETERS exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true For instance, if a Container holds a new Circle(20,[blue,green]) then its clone might be blue or green If exact is set to true then the clone will be whatever color was picked for the original circle RETURNS the object for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 39953 ▶︎ obj.dispose(disposing)
obj.dispose(disposing)
dispose zim DisplayObject method DESCRIPTION Deletes the DisplayObject from memory. This means it removes event listeners, stops animations, drags, gestures, transforms, etc. The references to the DisplayObject must still be set to null for proper garbage collection. Objects that have references to them may still be saved in memory and this can lead to memory leaks if many objects are being made. The average DisplayObject added to the stage and removed does not really need to be disposed() Only when hundreds or thousands of objects are being made will there be need for dispose() SEE: https://www.youtube.com/watch?v=aTnNicsLP3A // on memory management EXAMPLE
const tile = new Tile(new Pic("pic.jpg"), 100, 100).center();
const tilesArray = [tile]; // if we had an array of such tiles
const tilesObject = {fave:tile}; // if we had a reference in an object literal
timeout(10, ()=>{
   tile.dispose(); // will recursively dispose all children in Tile (the Bitmaps)
   tile = null; // remove the reference to tile
   tilesArray[0] = null; // set the array reference to null
   delete tilesObject.fave; // delete the property in the object literal
   stage.update();
});
PARAMETERS disposing - (default null) pass in true to indicate already started dispose if calling dispose() on the super class from a custom class    otherwise infinite looping can occur (used internally by ZIM) RETURNS the object for chaining CLOSE ▲PAGE ▤CODE ▤
-------------- ADDING AND REMOVING EXPAND 39997 ▶︎ obj.addTo(container, index, localToLocal)
obj.addTo(container, index, localToLocal)
addTo zim DisplayObject method DESCRIPTION A wrapper function for addChild() / addChildAt() to add the obj to the container. This allows us to chain more effectively: var circle = new Circle().addTo(stage).drag(); Also, ZIM has obj.center(container) and obj.centerReg(container) functions where the obj comes first followed by the container. So it is a pain to flip things and use container.addChild(obj) Now, we can use obj.addTo(container) and the object we are adding comes first. The index parameter is similar to an addChildAt() We can also use obj.removeFrom() to automatically remove from the container EXAMPLE
const circle = new Circle(50, "red");
circle.addTo(stage); // or just circle.addTo(); // for the default frame's stage
// with chaining - and dragging:
var circle = new Circle(50, "red").addTo().drag();

const rect = new Rectangle(100, 100, "blue");
rect.addTo(stage, 0); // place on bottom
EXAMPLE
// Changing Coordinates
// An object may appear to change positions
// when you add from one container to another (the stage is a container too).
// This happens because the x and y origin inside the containers may be at different places
// yet the x and y property of the object remains unchanged.
// The localToLocal parameter converts between the coordinates and updates the x and y
// so that the object does not appear to jump - this defaults to true

const container = new Container().pos(100,100);
const rectangle = new Rectangle(200, 200, yellow).addTo(container);
// we want to drag the container and the circle
// but when the circle is in the container we want to drag the circle independently
// this leads to a tricky situation that can be solved as follows:
rectangle.on("mousedown", function() {container.drag({currentTarget:true});});
rectangle.on("pressup", function() {container.noDrag();});

const circle = new Circle(50, blue).center().drag();
// check to see if the circle is over the container and if so then add the circle
// try settin the third parameter to false to see what would normally happen
circle.on("pressup", ()=>{
   if (rectangle.hitTestReg(circle)) { // do not hitTest the container!
      circle.addTo(container); // keep position with default true as third parameter
   } else {
      circle.addTo(stage);
   }
   stage.update();
});
PARAMETERS supports DUO - parameters or single object with properties below container - (default first frame's stage) the container to add to index - (default null) if provided will addChildAt the object at the index (0 being bottom) localToLocal - (default true) makes object not move when added from one coordinate space to another    this also may change the objects x and y properties - set to false not to do this    localToLocal is ignored if object currently does not have a parent RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40082 ▶︎ obj.removeFrom(container)
obj.removeFrom(container)
removeFrom zim DisplayObject method DESCRIPTION A chainable wrapper function for removeChild() that removes the obj from the container Matches obj.addTo(container) We have obj.removeFrom(container) NOTE do not need to specify container as removeFrom() will remove the object from its parent. EXAMPLE
const circle = new Circle(50, "red");
circle.addTo(); // adds to stage
// later
circle.removeFrom(); // same as circle.removeFrom(stage)
PARAMETERS container - (default the object's parent) the container to remove the object from RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS
EXPAND 40119 ▶︎ obj.added(call, interval, maxTime)
obj.added(call, interval, maxTime)
added zim DisplayObject method DESCRIPTION Calls callback function when object is added to the stage CreateJS has an "added" event that triggers when an object is added to another container but this container may not be on the stage. added polls several times quickly and then every 100ms to see if the object has a stage property Once it does then it calls the callback and removes the interval EXAMPLE
const circle = new Circle(50, "red");
circle.added(()=>{zog("has stage");});
PARAMETERS callback - the function to call when added - will call right away if object is already added    call will receive a reference to the stage and the object as parameters ** these two parameters are depricated as added no longer uses an interval as of ZIM Cat 03 patch ** but rather uses the "added" event and then checks to make sure it was the stage container the target was added to interval - (default .1) time in seconds to check (also see ZIM TIME constant)    keeps repeating until stage is there or maxTime is reached maxTime - (default null) time in seconds to keep checking or forever if not provided RETURNS id of interval so clearInterval(id) will stop added() from checking for stage CLOSE ▲PAGE ▤CODE ▤
EXPAND 40197 ▶︎ obj.centerReg(container, index, add)
obj.centerReg(container, index, add)
centerReg zim DisplayObject method DESCRIPTION Centers the registration point on the bounds - obj must have bounds set. Will default to adding the object to the container. If no container parameter is provided and the object is in a container, centerReg will center the object in the current container. Thanks Bracer Jack for the suggestion. If no container and the object is not in a container, centerReg will center the object on the default frame's stage. A convenience function for setting both registration points at once. Also see center() for centering without changing the registration point. Also see reg(CENTER) for the same effect but without adding to container SEE: https://zimjs.com/positioning EXAMPLE
const rect = new Rectangle(100, 100, "blue")
   .centerReg() // centers registration, centers and adds to stage
   .animate({obj:{rotation:360}, time:1, ease:"linear", loop:true});

// To just center the registration and not add it to a container
// use rect.centerReg(null, null, false);
// This is different than in the past where leaving out parameters would just center the registration
// The change is to match the default behaviour of addTo() and center() to add to stage without parameters
PARAMETERS supports DUO - parameters or single object with properties below container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container index - (default null) if provided will addChildAt the object at the index (0 being bottom)    will be ignored if the add parameter is false add - (default true) set to false to only center the object's registration    setting to false will not remove the object if already added to a container RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40258 ▶︎ obj.center(container, index, add)
obj.center(container, index, add)
center zim DisplayObject method DESCRIPTION Centers the object on the container. Will default to adding the object to the container. If no container parameter is provided and the object is in a container, center will center the object in the current container. Thanks Bracer Jack for the suggestion. If no container and the object is not in a container, center will center the object on the default frame's stage. Also see centerReg() for centering registration point at same time. SEE: https://zimjs.com/positioning EXAMPLE
var rect = new Rectangle(100, 100, "blue")
   .center()    // centers and adds to stage
            // the below animation will be around the registration point at the top left corner
            // this is usually not desired - see centerReg() when rotating and scaling
   .animate({obj:{rotation:360}, time:1, ease:"linear", loop:true});
PARAMETERS supports DUO - parameters or single object with properties below container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container index - (default null) if provided will addChildAt the object at the index (0 being bottom)    will be ignored if the add parameter is false add - (default true) set to false to only center and not add the object to the container    setting to false will not remove the object if already added to a container RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40369 ▶︎ obj.place(id)
obj.place(id)
place zim DisplayObject method DESCRIPTION Sets the object to drag and logs to the console the x and y. Also can use keyboard arrows for moving 1 pixel and SHIFT keyboard arrows for moving 10 pixels. This is for when building you can move an object around to position it then when positioned, look at the console for the positioning code. In your code, set the reported x and y and delete the place call. EXAMPLE
circle.place("circle"); // lets you drag circle around - then see console
PARAMETERS id - (default null) the name of the object so that the log gives you complete code RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40423 ▶︎ obj.placeReg(id)
obj.placeReg(id)
placeReg zim DisplayObject method DESCRIPTION Gives draggable indicator to position a registration point in an object This is for when building and when positioned, look at the console for registration code and delete the placeReg call. EXAMPLE
myContainer.placeReg("myContainer"); // lets you drag an indicator around - then see console
PARAMETERS id - (default null) the name of the object so that the log gives you complete code RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
-------------- SHORT CHAINABLE EXPAND 40467 ▶︎ obj.pos(x, y, horizontal, vertical, container, index, add, reg, regX, regY)
obj.pos(x, y, horizontal, vertical, container, index, add, reg, regX, regY)
pos zim DisplayObject method DESCRIPTION Chainable convenience function to position an object and optionally add to a container pos() provides easy positioning around the edges of a container. pos() has gone through three versions: VERSION 1 - positioned the registration point and has been replaced with loc() VERSION 2 - positioned left, right top or bottom with right and bottom being specified with boolean true VERSION 3 - positions left, right, center, top and bottom with ZIM positioning constants pos() positions objects from the edges of the container or on the stage if no container provided This defaults to the left of the object from the left and the top of the object from the top If the horizontal parameter is set to RIGHT it will position the right of the object from the right of the container If the vertical parameter is set to BOTTOM it will position the bottom of the object from the bottom of the container If CENTER is provided, it centers the object on the axis and then moves it the x or y provided Setting reg (or regX, regY) to true will position to the registration point - also see POSREG constant SEE: https://zimjs.com/positioning EXAMPLE
// 1. adds circle to default stage moves left and top of circle to 100, 100
circle1.pos(100, 100);

// 2. adds circle to box and positions right and bottom of circle 100 and 200
// from right and bottom of box bounds
circle2.pos(100, 200, RIGHT, BOTTOM, box)
// or
circle2.pos(100, 200, "right", "bottom", box)
// or
circle2.pos(100, 200, true, true, box);

// 3. centers the circle in x and moves 100 and places circle 200 from bottom
circle3.pos(100, 200, CENTER, BOTTOM);

// 4. adds to stage and puts registration point at x=200 and y=0
circle4.pos({x:200, reg:true});

// 5. adds to stage and puts registration point at x=200 and y=radius (not y=0)
circle5.pos({x:200, regX:true});
PARAMETERS supports DUO - parameters or single object with properties below x - (default null or 0 for right) the x distance in the container to the left or right side of the object    which side, depends on the right parameter    if reg or regX is true then it is the distance to the registration point not the side y - (default null or 0 for bottom) the y distance in the container to the top or bottom of the object    which one, depends on the bottom parameter    if reg or regY is true then it is the distance to the registration point not the top or bottom horizontal - (default LEFT) LEFT will position the left side to the left side of the container bounds    set to RIGHT to postion the right side from the right of the container bounds    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 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    set to CENTER or MIDDLE to center object and move amount provided in y    if reg or regY is true then centers the registration point and moves the amount provided in y container - (default current container or zdf stage) the Container to add the obj to and position index - (default null) if provided will addChildAt the object at the index (0 being bottom) add - (default true) add to container - set to false to not add reg - (default false) set to true to position to the registration point rather than sides, top or bottom    See: POSREG contant - set POSREG=true; to change the default pos() to position the registration point    This is good to adjust legacy code - or if the original pos setting is preferred. regX - (default reg) set to true to position x to the registration point rather than the sides    will override reg if provided regY - (default reg) set to true to position y to the registration point rather than the top or bottom    will override reg if provided PROPERTIES zimPos - added to the obj and holds an object with the initial pos() parameter values as follows:    {x,y,h,v,i} for x, y, horizontal, vertical and index.    note: to get the container ask for the obj parent property        RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40756 ▶︎ obj.loc(target|x, y, container, index, add, localToLocal)
obj.loc(target|x, y, container, index, add, localToLocal)
loc zim DisplayObject method DESCRIPTION locates obj registration at registration of provided target or at x and y if numbers are provided This is like the original pos() where the registration is used But it a single object with x y properties can be passed as a parameter Will calculate localToLocal if target is provided Also can add to container at an index SEE: https://zimjs.com/positioning EXAMPLE
const circle1 = new Circle().pos(100,100);
const circle2 = new Circle().loc(circle1); // adds on top of circle1
EXAMPLE
new Circle().loc(400, 400); // places reg of circle at 400, 400
// note, this is different than pos(400, 400) which would place left top of circle at 400, 400
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 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 index - (default null) if provided will addChildAt the object at the index (0 being bottom) add - (default true) add to container - set to false to not add localToLocal - (default true) if target is provided, the obj will be placed on the target matching locations across coordiate spaces RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 40837 ▶︎ obj.mov(x, y)
obj.mov(x, y)
mov zim DisplayObject method DESCRIPTION Move the object over in the x and/or y Equivalant to obj.x += x and obj.y += y Pass in 0 for no shift in x if you just want to shift y Gives chainable relative position SEE: https://zimjs.com/positioning EXAMPLE
new Circle().center().mov(50); // move to right 50
PARAMETERS supports DUO - parameters or single object with properties below x - (default 0) the distance in x to move (can be negative) y - (default 0) the distance in y to move (can be negative) RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40872 ▶︎ obj.sca(scale, scaleY)
obj.sca(scale, scaleY)
sca zim DisplayObject method DESCRIPTION Chainable convenience function to do scaleX and scaleY in one call. If you pass in just the scale parameter, it scales both x and y to this value. If you pass in scale and scaleY then it scales x and y independently. Also see scaleTo(), fit() and Layout(). EXAMPLE
circle.sca(.5); // x and y scale to .5
circle.sca(.5, 2); // x scale to .5 and y scale to 2
PARAMETERS scale - the scale (1 being full scale, 2 being twice as big, etc.) scaleY - (default null) pass this in to scale x and y independently RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40905 ▶︎ obj.alp(alpha)
obj.alp(alpha)
alp zim DisplayObject method DESCRIPTION Chainable convenience function to set the alpha See also the CreateJS set({prop:val, prop2:val}) method; See also vis() and visible to keep hitTests as alp(0) does not EXAMPLE
circle.alp(.5);
PARAMETERS alpha - (default null) the alpha between 0 and 1 RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 40939 ▶︎ obj.vis(visible)
obj.vis(visible)
vis zim DisplayObject method DESCRIPTION Chainable convenience function to set the visible Also see alp() and alpha EXAMPLE
circle.vis(false);
PARAMETERS visible - (default true) boolean for visibility RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 40969 ▶︎ obj.ble(blendMode)
obj.ble(blendMode)
ble zim DisplayObject method DESCRIPTION Chainable convenience function to set the blendMode (compositeOperation) Also see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation EXAMPLE
new Circle(100, red).center().ble("difference");

// note: a blendMode will not work against the background color of the canvas
// if this is desired, add a rectangle onto the stage to start
new Rectangle(stageW, stageH, frame.color).addTo();
new Circle(100, red).center().ble("difference");
PARAMETERS blendMode - (default "difference") the blendMode string:       normal, multiply, screen, overlay, darken, lighten       color-dodge, color-burn, hard-light, soft-light       difference, exclusion, hue, saturation, color, luminosity    OR the compositeOperation string:          source-over, source-in, source-out, source-atop,       destination-over, destination-in, destination-out, destination-atop,       copy, xor RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41011 ▶︎ obj.dye(color)
obj.dye(color)
dye zim DisplayObject method DESCRIPTION Chainable convenience function to set the color of a shape or the backgroundColor of an object with backgroundColor Also see color and backgroundColor properties EXAMPLE
circle.dye(red); // same as circle.color = red;
button.dye(blue); // same as button.backgroundColor = blue;
PARAMETERS color - a ZIM or HTML color - green, "blue", "#333", etc. RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41040 ▶︎ obj.hov(value, prop)
obj.hov(value, prop)
hov zim DisplayObject method DESCRIPTION Chainable convenience function to set the rollover (hover) property of an object This defaults to alpha if a number and color if a string But the type of property can also be set - for multiple properties, use a Button This sets mouseover and mouseout events on the object It will also set the cursor of the object to "pointer" This can be changed with the cursor property or the cur() method EXAMPLE
new Circle().center().alp(.5).hov(.8);
new Rectangle(100,100,blue).center().hov(green);
new Triangle().center().hov(1.5, "scale");
PARAMETERS value - (default 1) the hover value of the property    if a number, the default property is alpha    if a string, the default property is color    passing in -1 will remove the hover prop - (default alpha or color as stated above) the property to change to the value on hover RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41100 ▶︎ obj.rot(rotation, x, y)
obj.rot(rotation, x, y)
rot zim DisplayObject method DESCRIPTION Chainable convenience function to set the rotation See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
new Rectangle().center().rot(180);
PARAMETERS rotation - (default null) the rotation in degrees x - (default regX) set an x value to rotate about y - (default regY) set a y value to rotate about RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 41146 ▶︎ obj.siz(width, height, only)
obj.siz(width, height, only)
siz zim DisplayObject method DESCRIPTION Chainable convenience function to set width and height in one call. If you pass in just the width or height parameter, it keeps the aspect ratio. If you want to set only the width or height, then set only to true. If you pass in both the width and height then it sets both. Note: that width and height will adjust the scaleX and scaleY of the object. Also see width, height, widthOnly, heightOnly. EXAMPLE
const rect = new Rectangle(100,200,blue).addTo();
rect.siz(200); // sets width to 200 and height to 400
rect.siz(200, null, true); // sets width to 200 and leaves height at 200
rect.siz(200, 100); // sets width to 200 and height to 100
PARAMETERS width - (default null) the width of the object    setting only the width will set the widht and keep the aspect ratio    unless the only parameter is set to true height - (default null) the height of the object    setting only the width will set the widht and keep the aspect ratio    unless the only parameter is set to true only - (default false) - defaults to keeping aspect ratio when one dimension set    set to true to scale only a single dimension (like widthOnly and heightOnly properties) RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 41194 ▶︎ obj.ske(skewX, skewY)
obj.ske(skewX, skewY)
ske zim DisplayObject method DESCRIPTION Chainable convenience function to skewX and skewY (slant) See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
new Circle().center().ske(20);
PARAMETERS skewX - (default null) the x skew skewY - (default null) the y skew RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 41223 ▶︎ obj.reg(regX, regY, still)
obj.reg(regX, regY, still)
reg zim DisplayObject method DESCRIPTION Chainable convenience function to regX and regY (registration point) The registration point is the point the object is positioned with and the object scales and rotates around the registration point See also the CreateJS set({prop:val, prop2:val}) method; See also centerReg() NOTE most rectangular objects have their registration at the top left whereas most circular objects (not images, though) have their registration point in the center. But this registration point can be moved anywhere. See: https://codepen.io/zimjs/pen/qBEjYZV EXAMPLE
new Circle().reg(200, 200).center().outline(); // the circle in the outline() shows the registration point
EXAMPLE
new Rectangle().reg(RIGHT,BOTTOM).center(); // place reg at the bottom right corner
PARAMETERS regX - (default null) the x registration as a number    or use LEFT, CENTER, RIGHT, START, END (for START and END, see DIR setting)    use CENTER with no regY to center both regX and regY    use CENTER for regX and DEFAULT for regY to only center regX regY - (default null) the y registration as a number    or use TOP, CENTER, BOTTOM still - (default false) set to true to move the object to counter the registration change    this will let you set the registration point without moving the object RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 41308 ▶︎ obj.top()
obj.top()
top zim DisplayObject method DESCRIPTION Places object on top layer in container - if in a container returns the object for chaining Can also just addTo(container) to re-add to top NOTE for some situations this will break code so a safer way is obj.parent.setChildIndex(obj, obj.parent.numChildren-1); which is what this method uses EXAMPLE
const circle = new Circle(100, red).center();
new Rectangle(200,200,blue).center();
circle.top(); // brings circle to the top of parent container - in this case, the stage
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41337 ▶︎ obj.bot()
obj.bot()
bot zim DisplayObject method DESCRIPTION Places object on bottom layer in container - if in a container returns the object for chaining EXAMPLE
new Rectangle(200,200,blue).center();
new Circle(100, red).center().bot(); // put circle on bottom layer (0) of parent container
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41362 ▶︎ obj.ord(num)
obj.ord(num)
ord zim DisplayObject method DESCRIPTION Moves object layer order in container - if in a container returns the object for chaining EXAMPLE
circle.bot().ord(1); // put circle one layer up from bottom of parent container
circle.top().ord(-2); // put circle two layers down from top (third highest layer)
PARAMETERS num - (default 0) the number of levels (layers) up or down to move the object    1 will move the object one level higher, -1 will move it one level lower    2 will move the object two levels higher, -2 will be two levels lower, etc. RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41392 ▶︎ obj.cur(type)
obj.cur(type)
cur zim DisplayObject method DESCRIPTION Chainable function that sets the object's cursor to the type provided - same as CSS cursors EXAMPLE
const circle = new Circle(10, "red").center().cur(); // "pointer"
circle.on("click", ()=>{zog("yes");});
PARAMETERS type - (default "pointer") the CSS cursor to set    https://developer.mozilla.org/en-US/docs/Web/CSS/cursor    Common cursors are "default", "pointer", "none", "Wait", "move", "grab", "grabbing", "zoom-in", "zoom-out", and various resize like "ew-resize" RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 41421 ▶︎ obj.sha(color||Shadow, offsetX, offsetY, blur)
obj.sha(color||Shadow, offsetX, offsetY, blur)
sha zim DisplayObject method DESCRIPTION Chainable function that sets the object's drop shadow to a CreateJS Shadow indirectly or directly EXAMPLE
// indirectly set the CreateJS Shadow
// with sha(color, offsetX, offsetY, blur)
const circle = new Circle(10, "red").center().sha("rgba(0,0,0,.2)", 10, 5, 5);

// directly set the CreateJS Shadow
// with sha(new createjs.Shadow())
const shadow = new createjs.Shadow("rgba(0,0,0,.2)", 10, 5, 5);
const circle1 = new Circle(10, "pink").center().mov(-30).sha(shadow);
const circle2 = new Circle(10, "yellow").center().mov(30).sha(shadow);
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 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 RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 41463 ▶︎ obj.dep(depth)
obj.dep(depth)
dep zim DisplayObject method DESCRIPTION A chainable method to set the depth property of a Display object for use with ZIM VR(). When the object is added to VR it will be cloned into two channels and shifted left and right based on its depth. A depth of 0 will not shift the object and this will appear flat on the screen. A depth of 20 will shift 20 pixels left and right and appear to come out of the screen. A depth of -20 will appear to go into the screen. Depending on the VR parallax settings, depth can also affect parallax. A negative depth does not unless negativeParallax is set to true in the VR parameters. EXAMPLE
new Circle().center().dep(10);
PARAMETERS depth - (default 0) the apparent depth in ZIM VR - or set the depth property RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 41495 ▶︎ obj.nam(name)
obj.nam(name)
nam zim DisplayObject method DESCRIPTION A chainable method to set the name property of a DisplayObject. The object can then be accessed with object("name") (or zim.object("name") if zns is true) BACKGROUND CreateJS provides Containers with a name property and a getChildByName() method but you have to remember to ask the parent container for the child and it is a little lengthy. In ZIM Cat 01, nam() and object() were introduced as a global way to handle object names. Usually, a variable name is used to reference objects but the name offers an alternative. Note: naming an object with the same name will overwrite earlier names accessible through object() This will NOT remove the name property from the previous object So it is possible that the previous object can still be accessed with parent.getChildByName() parent.getChildByName() will find the first child with that name in the container object() will find the last named object with that name anywhere We could remove previous name properties with the same name but we decided not to Let us know your thoughts at zimjs.com/slack EXAMPLE
new Circle().nam("ball").center();

// see what names there are:
zog(object.getNames()); // ["ball"] - if only "ball" has been named

if (mobile()) object("ball").sca(2);
else object("ball").dispose();

zog(object.getNames()); // [] - if only "ball" has been named

object("ball").tap(e=>{
   zog(e.target.name); // "ball"
});
PARAMETERS name - a String to set the name property of the object RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
-------------- INTERACTIONS, EFFECTS AND PHYSICS EXPAND 41555 ▶︎ obj.movement(call)
obj.movement(call)
movement zim DisplayObject method DESCRIPTION Chainable convenience method that captures mouse movement over an object. This triggers when a mouseover is active and stagemousemovement dispatches. It also triggers when a pressmove dispatches - so good for mobile. A callback function is called on movement. NOTE set an object's noMovement property to true to remove these events SEE: noMovement() as well EXAMPLE
const pic = asset("picture.jpg").center().movement(e=>{
   mask.widthOnly = e.stageX-pic.x;
   stage.update();
});
const mask = new Rectangle(pic.width, pic.height, frame.color).loc(pic).ord(-1);
pic.setMask(mask, true); // dynamic
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41611 ▶︎ obj.noMovement()
obj.noMovement()
noMovement zim DisplayObject method DESCRIPTION removes the events added with movement() EXAMPLE
if (timer < 5) pic.noMovement();
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41634 ▶︎ obj.tap(call, distance, time, once, dbl, dblTime, call2, call3, call4)
obj.tap(call, distance, time, once, dbl, dblTime, call2, call3, call4)
tap zim DisplayObject method DESCRIPTION Chainable convenience method that adds a mousedown and mouseup event to the object that requires the to move less than distance parameter This is more like a proper click - down up without dragging. This method works on desktop or mobile, etc. An optional time parameter is provided if a minimum time is desired. Note that a click event also works on mobile as a "tap" but click also allows dragging between down and up presses - so really is a mouseup. This will automatically add a cursor of "pointer" which can be changed with the cursor property or cur() method When dbl is set to true call will be called when a double tap occurs With this setting, tap also handles either a single or double tap by providing call3 or call4. call3 will call if a single tap happens regardless of whether there is a double tap or not call4 will call if a single tap happens and there is no double tap this means it waits for the double tap time to fail and then calls call4 To give a more responsive single tap it reduces the default dblTime value NOTE tap() ignores List titleBar and organizer as to not conflict with tapping on actual list NOTE set an object's noTap property to true to avoid activating a hold on an object SEE: noTap() as well EXAMPLE
new Circle(50, "red").tap(e=>{
   e.target.alpha = .5;
   stage.update();
});
EXAMPLE
// wanting to do one thing on single tap and another thing on double tap on same object
// this will set the default dblTime to .5 seconds (rather than 1 second)
new Rectangle().center().tap({
   dbl:true,
   call:()=>{
      // do double tap code
      stage.update();
   },
   call4:()=>{
      // do single tap code
      stage.update();
   }
});
PARAMETERS supports DUO - parameters or single object with properties below call - the function to call when clicked    call will receive the event object as a parameter (with target, currentTarget, etc. properties) distance - (default 5 or 10 if dbl is true) distance in pixels within which the mouseup must occur for a click to be counted    if dbl is true it will lengthen the default distance to give an easier double tap time - (default 8) time in seconds within which the mouseup must occur for a click to be counted - also see TIME constant once - (default false) set to true to capture only one click then auto-remove listeners dbl - (default false) set to true to capture a double click - this works on mobile where dblclick may not dblTime - (default 1 or .5 if call4) time in seconds from first pressup to pressup a second time to count as a double tap - also see TIME constant    if call4 is provided it will shorten the default dbl tap time to give a more responsive single tap alternative call2 - (default null) a function to call on pressup if a tap is not made call3 - (default null) with dbl set to true, a function to call on single tap regardless of a double tap or not call4 - (default null) with dbl set to true, a function to call on single tap only if double tap fails RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41791 ▶︎ obj.noTap()
obj.noTap()
noTap zim DisplayObject method DESCRIPTION removes the mousedown and mouseup events added with tap() EXAMPLE
const circle = new Circle(50, "red").tap(e=>{
   e.target.alpha = .5;
   stage.update();
});
if (score > 10) circle.noTap();
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41820 ▶︎ obj.hold(call, distance, time, once)
obj.hold(call, distance, time, once)
hold zim DisplayObject method DESCRIPTION Chainable convenience method that adds a press and hold event to the object The callback function will run after the object is held for a certain time without moving the object This method can be used on mobile to replace shift keys, etc. This will automatically add a cursor of "pointer" - although mobile will not see it which can be changed with the cursor property or cur() method NOTE set an object's noHold property to true to avoid activating a hold on an object SEE: noHold() as well EXAMPLE
// remove circle if held for 1000 ms (one second)
new Circle(50, "red").hold(e=>{
   e.target.removeFrom();
   stage.update();
});
PARAMETERS call - the function to call after hold time    call will receive the event object as a parameter (with target, currentTarget, etc. properties) distance - (default 5) distance in pixels within which the mouseup must occur for a hold to be counted time - (default 1.5) time in seconds before hold is activated once - (default false) set to true to capture only one click then auto-remove listeners RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41909 ▶︎ obj.noHold()
obj.noHold()
noHold zim DisplayObject method DESCRIPTION removes the mousedown and mouseup events added with hold() EXAMPLE
const circle = new Circle(50, "red").hold(e=>{
   e.target.removeFrom();
   stage.update();
});
if (score > 10) circle.noHold();
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41941 ▶︎ obj.change(call, once)
obj.change(call, once)
change zim DisplayObject method DESCRIPTION Chainable convenience method that adds a change event to the object This only works for components that dispatch a change event ;-) SEE: noChange() as well EXAMPLE
new Tabs().change(e=>{
   zog(e.target.text); // the text of the selected tab
});
PARAMETERS call - the function to call when changed    call will receive the event object as a parameter (with target, currentTarget, etc. properties) once - (default false) set to true to capture only one click then auto-remove listeners RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 41976 ▶︎ obj.noChange()
obj.noChange()
noChange zim DisplayObject method DESCRIPTION removes the change event added with change() EXAMPLE
const tabs = new Tabs().change(()=>{
   zog(tabs.text);
});
if (score > 10) tabs.noChange(); // removes change event
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 42001 ▶︎ obj.drag(boundary, overCursor, dragCursor, all, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch)
obj.drag(boundary, overCursor, dragCursor, all, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds, rect, currentTarget, offStage, immediateBoundary, singleTouch)
drag zim DisplayObject method DESCRIPTION Adds drag and drop to an object with a variety of options. Handles scaled, rotated nested objects. Also see draggable property for setting a default drag() and noDrag() and to indicate whether a drag has been set. NOTE drag() will stop ZIM Swipe() from triggering a swipe event. Set the overridNoSwipe parameter of ZIM Swipe() to true to capture swipe events. NOTE also see the draggable property - set to true for basic drag() and false for noDrag() EXAMPLE
const radius = 50;
const circle = new Circle(radius, "red");
circle.center();
circle.drag();

// OR with chaining
new Circle(radius, "red").center().drag();

// OR with ZIM DUO
circle.drag({slide:true});

// BOUNDARY
// circle has its registration point in the middle
// keep registration point within rectangle starting at x=100, y=100
// and drag within a width of 500 and height of 400
const boundary = new Boundary(100,100,500,400);
circle.drag(boundary);

// or keep circle on the stage with the following
const boundary = new Boundary(0,0,stageW,stageH).contract(radius);
circle.drag(boundary); // drag within stage

// or by passing the stage (or a Container as a boundary)
circle.drag(stage); // drag within stage
PARAMETERS supports DUO - parameters or single object with properties below boundary - (default null) a ZIM Boundary object for the drag boundary    or a ZIM DisplayObject including stage       If the boundary is a display object then ZIM will keep the shape of the object inside the bounds.       If the boundary object is a Blob, the target will stay within the Blob (experimental).       If the drag is on a container and the "all" parameter is false       then ZIM will call drag methods on each child so the bound calculations are easier.       The drags will be applied after a .05 second delay allowing items to be added directly after.       Alternatively, drag() can be placed on the container AFTER the objects are added       and the immediateBoundary parameter set to true. Or drag() can be applied manually on each child.    note: boundary will only work in 90-degree-rotated containers - as such, do slant Window and List, etc.    If surround is true then it will make sure the obj surrounds the boundary rather than stays within it    This boundary is relative to the stage (global).    If a boundary relative to the object's parent is desired then set the localBounds parameter to true.    Rectangle, Stage, StageGL - will keep object fully inside the bounds (based on bounds of object when adding drag). overCursor - (default "pointer") the CSS cursor property as a string for rolling over the object dragCursor - (default "pointer") the CSS cursor property as a string for pressing and dragging the object all - (default false) set to true to drag a whole container rather than its parts (was called currentTarget)    eg. container.drag(); will drag any object within the container    container.drag({all:true}) will drag the whole container    See: DRAGALL contant - set DRAGALL=true; to change the default drag to drag a whole container swipe - (default false) which prevents a swipe from triggering when dragging localBounds - (default false) which means the rect is global - set to true for a rect in the object parent frame onTop - (default true) brings the dragged object to the top of the container - unless Keyboard at top.    // to drag on top of keyboard, set the type property of the keyboard to "LowerKeyboard" - or anything other than Keyboard surround - (default false) is for dragging a big object that always surrounds the boundary slide - (default false) will let you throw the object and dispatch a slidestop event when done slideDamp - (default .3) is the damping setting for the slide (1 is no damping and .1 will slide more, etc.) slideSnap - (default true) lets the object go outside and snap back to bounds - also "vertical", "horizontal", and false reg - (default false) when set to true will snap the registration of the object to the mouse position removeTweens - (default true) will automatically remove any tweens that have an x and y set unless set to false    if, for example, animate() has a rotation and an x set, then both will be canceled    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) 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!) immediateBoundary - (default false) set to true to add bounds immediately when drag() is set on a Container.    this is normally set to false for a .05 second delay to allow objects to be added to Container before setting bounds. singleTouch - (default false) set to true to let only one touch operate the drag    also see Frame() singleTouch setting - but setting on drag will only affect that object's drag note: will not update stage if OPTIMIZE is set to true unless Ticker.update is set to true or you run Ticker.always(stage) see zim.Ticker PROPERTIES adds a dragPaused property to get or set the pause of the drag - which allows setting to be kept    see also noDrag() where settings will be removed EVENTS Adds a "slidestart" event to the drag object that is dispatched when the object starts sliding - if slide is true Adds a "slidestop" event to the drag object that is dispatched when the object comes to rest after sliding - if slide is true RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 42610 ▶︎ obj.noDrag(recursive)
obj.noDrag(recursive)
noDrag zim DisplayObject method DESCRIPTION Removes drag function from an object. This is not a stopDrag function (as in the drop of a drag and drop). Dropping happens automatically with the drag() function. The noDrag function turns off the drag function so it is no longer draggable. EXAMPLE
circle.noDrag();
PARAMETERS recursive (default true) - turns off drags on children RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 42667 ▶︎ obj.dragBoundary(boundary)
obj.dragBoundary(boundary)
dragBoundary zim DisplayObject method DESCRIPTION Dynamically changes or adds a boundary rectangle to the object being dragged with drag(). NOTE replaces old ZIM dragRect() method EXAMPLE
const boundary = new Boundary(100,100,500,400);
circle.dragBoundary(boundary);
PARAMETERS boundary - is a ZIM Boundary object for the bounds - the local / global does not change from the original drag RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 42699 ▶︎ obj.mouse()
obj.mouse()
mouse zim DisplayObject method DESCRIPTION Sets object's mouseChildren and mouseEnabled properties to true These are the defaults - used primarily to reverse ZIM noMouse() which can be used to turn off mouseChildren and mouseEnabled NOTE just using mouse() does not add cursors or interactivity see cur(), hov(), drag(), transform(), gesture(), or various mouse events EXAMPLE
const circle = new Circle().drag();
timeout(1, ()=>{
   circle.noMouse(); // circle cannot not be dragged, etc.
   timeout(1, ()=>{
      circle.mouse(); // circle can be dragged
   });
});
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 42732 ▶︎ obj.noMouse()
obj.noMouse()
noMouse zim DisplayObject method DESCRIPTION Sets object's mouseChildren and mouseEnabled properties to false This can be used to save processing on complex objects that do not need interactivity NOTE this will prevent interactivity for cur(), hov(), drag(), transform(), gesture() and any mouse events like mousedown, click, mouseover, etc. EXAMPLE
const circle = new Circle().drag();
timeout(1, ()=>{
   circle.noMouse(); // circle cannot not be dragged, etc.
   timeout(1, ()=>{
      circle.mouse(); // circle can be dragged
   });
});
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 42765 ▶︎ obj.wire(target, prop, twoWay, setSource, filter, call, input)
obj.wire(target, prop, twoWay, setSource, filter, call, input)
wire zim DisplayObject method DESCRIPTION The wire() method connects an object (source) property to another object (target) property. This can be one way (default) or two way with the twoWay parameter set to true. For instance:    new Slider().center().wire(circle, "scale"); // note the property as string will change the scale of the circle as the slider's current value changes. The currentValue (if the object has one) is the default input followed by selectedIndex. If the source object has neither currentValue nor selectedIndex then the input is the same property as the target property. For instance:    new Circle().center().wire(circle2, "x", true); would mean changing either circle's x property would change the other. Multiple wire() methods can be chained. For instance:    slider.wire(circle, "x").wire(circle, "y");    slider.wire(circle, "scale").wire(circle2, "scale"); BACKGROUND The wire system is an alternative to events at 25% the size of traditional JS addEventListener. It is a single extra conditional in the Ticker that checks to see if a Dictionary list has length. If it does it cycles through the list to see if input properties have changed and if so, sets the target property. Updates are batched to a single stage update This is the same stage update that is used by any Ticker functions including those by drag, animate, etc. Basically, wire is same system as events but with a more specific format - adds 1.4 k to ZIM file size. WIRED There is also a wired() method that can be be put on the target object and points to a source object to set a specified property. This just flips the target and the source and calls the wire() function. The methods MUST go on the second object made - so using either wire() or wired() covers use cases. There are also noWire() and noWired() methods to remove connections - with various alternatives. FILTER AND CALLBACK wire is also similar to ZIM Bind and bind() but binds within ZIM where bind binds outside of ZIM. Like Bind, wire uses an optional filter and callback function. For instance:    new Dial().center().wire(tone, "volume", null, filter, call); will call the filter function before setting the target property (tone.volume). The filter function will receive the data (the input currentValue) as its parameter and MUST return data to be passed along but the data can be changed or tested. The call function will be called after the target property is set. See: https://zimjs.com/cat/wire.html See: https://zimjs.com/cat/synth.html EXAMPLE
const circle = new Circle(100, pink, dark).center();
new Dial({step:0, min:1, max:3})
   .center()
   .wire(circle, "scale");

// stage.update(); // depending, let the wire() set the stage update
EXAMPLE
// this time the circle (target) starts at a scale of 2
const circle = new Circle(100, pink, dark).sca(2).center();
// so we want the dial (source) to start at 2 as well
// we could use the Dial parameter currentValue:circle.scale
// or we can use the wire setSource to true
new Dial({step:0, min:1, max:3})
   .center()
   .wire(circle, "scale", null, true); // true for setSource to the target value

// stage.update(); // depending, let the wire() set the stage update
EXAMPLE
const rect = new Rectangle(100, 100, blue, dark)
   .pos(0,70,CENTER)
   .drag(stage);

new Slider({min:0, max:stageW-100, currentValue:rect.x})
   .pos(0,100,CENTER,BOTTOM)
   .wire(rect, "x", true, null, data=>{
      if (data < 100 || data > stageW-100-100) rect.color = red;
      return data; // filter must return data - even if not changing it
   }, data=>{
      if (data >= 100 && data <= stageW-100-100) rect.color = blue;
   });

// timeout(5, ()=>{
//    slider.noWire(); // remove slider rect wire
// });
EXAMPLE
const person = {num:1, hair:red, eyes:blue}
const shirt = {num:1, color:dark, pocket:dark}
wire(person, shirt, "num"); // will wire person num to shirt num
wired({ // or could use wire() - just showing wired()
   source:person, // will wire person hair property to shirt color property
   input:"hair",
   target:shirt,
   prop:"color"
});
person.num = 3;
person.hair = "blue";
// note: could use addWires(person) to add wire and wired methods to person if desired

timeout(.01, ()=>{ // must wait for Ticker to go
   zog(shirt.num); // 3
   zog(shirt.color); // blue
});
EXAMPLE
// wire a bunch of on/off components together
STYLE = {
   color:blue.darken(.3),
   backgroundColor:blue.lighten(.3),
   borderColor:blue.darken(.3),
   always:true, // for RadioButtons
   Toggle:{
      backgroundColor:blue.darken(.3),
      toggleBackgroundColor:blue.lighten(.3)
   }
}

const radio = new RadioButtons(50,["OFF","ON"]).center();
const check = new CheckBox(50,"ON").center().mov(300);
const toggle = new Toggle(100,50,"ON").center().mov(-300)
Style.add({
   backgroundColor:blue.toAlpha(.3),
   Label:{size:40, backgroundColor:frame.color}
});
const selector = new Selector(new Tile({
   obj:[new Label("OFF").centerReg(), new Label("ON").centerReg()],
   cols:2,
   spacingH:30,
   spacingV:20,
   unique:true
})).center().mov(0,200);

radio
   .wire(check, "checked", true, null, convert)
   .wire(toggle, "toggled", true, null, convert)
   .wire(selector, "selectedIndex", true);

// convert true/false to 0/1 and visa versa
function convert(data) {
   if (data===true) data = 1;
   else if (data===false) data = 0;
   else if (data===1) data = true;
   else if (data===0) data = false;
   return data;
}
PARAMETERS supports DUO - parameters or single object with properties below ** the current object is called the source - it will be setting the prop on the target target - the object that has the property to wire to (and change) prop (default input)- a String name of the property to change on the target    if no property is provided it assumes the input property if provided    the only time no prop would be useful is to wire together components    like a Slider to a Dial where both will default to selectedIndex twoWay (default false) - also have the change in prop on target change the source object's property setSource (default false) - initially, by default, wire will change the target value to the source value    setting setSource to true will initially set the source value to the target value    this is independent of twoWay - so the twoWay setting does not matter filter (default null) - a function to call before the prop is changed on the target (or source object if twoWay is true)    this function receives a data parameter that holds the value of the property that will be changed on the target    the prop value can be tested or changed    the filter function MUST return the value whether it is modified or not call (default null) - a function that is called once the property has been set on the target - receives the value as a parameter input (default DEFAULTWIRE or "currentValue" or "selectedIndex" or prop) - an optional source property as a String    wire will usually be used to wire a component to a DisplayObject    and components usually have a currentValue or selectedIndex property that is changing in a change event, for instance    so wire by default uses these if available and a change event is no longer needed    Set ZIM DEFAULTWIRE constant to a String of the desired input if different than above.    If the source object does not have a currentValue or selectedIndex property    then the same property name as the target prop is used (unless an input is provided here) RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 42975 ▶︎ obj.noWire(target, prop, input)
obj.noWire(target, prop, input)
noWire zim DisplayObject method DESCRIPTION turns off a wire() on the object - can optionally filter by target, prop and or input EXAMPLE
if (circle.hitTestBounds(rect)) {
   slider.noWire();
   // or slider.noWire(circle); // if slider has more than one wire
});
EXAMPLE
timeout(10, ()=>{
   noWire(); // turn off all wires
   // noWire(null, null, "scale"); // turn off all wires adjusting scale
   // noWire({target:mySprite}); // turn off all wires on mySprite
});
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 43011 ▶︎ obj.wired(source, prop, twoWay, setSource, filter, call, input)
obj.wired(source, prop, twoWay, setSource, filter, call, input)
wired zim DisplayObject method DESCRIPTION Wires an object's property based on a source - see docs for ZIM wire() for details. A wiring can be added only if the source object and the target object exist. For instance we CANNOT do (even if we declare circle first):    new Slider().center().wire(circle, "scale");    var circle = new Circle().center(); OPTION 1:    var circle = new Circle().center();    new Slider().center().wire(circle, "scale"); OPTION 2:    var slider = new Slider().center();    new Circle().center().wired(slider, "scale"); // use wired() wired() just switches the source and target and calls wired() See the wire() method for parameters and description EXAMPLE
const slider = new Slider().center();
new Circle().center().wired(slider, "scale");
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 43051 ▶︎ obj.noWired()
obj.noWired()
noWired zim DisplayObject method DESCRIPTION Turns off wired() on the object. EXAMPLE
if (circle.hitTestBounds(rect)) {
   circle.noWired();
});
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 43077 ▶︎ obj.bind(id, props, extra, filter, bindObj)
obj.bind(id, props, extra, filter, bindObj)
bind zim DisplayObject method DESCRIPTION Binds the specified object properties to a Bind object's connection. This could be a connection to localStorage or a server script to a database. This will allow a cleaner way to save and retrieve data. See the docs for the ZIM Bind class for more details and examples See: https://zimjs.com/ten/bind.html EXAMPLE
// LOCALSTORAGE example
const b = new Bind(); // create a Bind object - defaults to localStorage
// b.clear(); // clear localStorage memory

// bind() will get data remembered in localStorage
// and also set up the binding
const c = new Circle().center().bind("circle", ["x","y"]).drag();

// when we want to update the binding call the to() method
c.on("pressup", function () {b.to();});
PARAMETERS ** supports DUO - parameters or single object with properties below id - a one-word string ID for the bind    this will be used as the JSON key for the data props - a property to bind as a string or an array of properties, eg. ["x","y"]    or an object literal in the form {prop1:TO, prop2:FROM, prop3:BOTH, prop4:TO, etc.}    by default the property will be bound as BOTH - as in TO and FROM    this means data would be received on bind.to() calls and sent on bind.from() calls extra (default null) extra information to be sent to the server (not localStorage)    this could be an id or a search term, etc. it will have encodeURI() applied    this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType filter (default null) a function to run before sending and after receiving data    this will receive (data, command, extra) parameters    the function must return the data - see Bind masterFilter parameter for more information    note: the masterFilter if supplied will run as well before the filter bindObj (default zimDefaultBind) - set to a specific bind object or keep as default    see also ZIM Bind() setDefault parameter and default property RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 43142 ▶︎ obj.noBind(props, removeConnectionData, call, bindObj)
obj.noBind(props, removeConnectionData, call, bindObj)
noBind zim DisplayObject method DESCRIPTION Removes a binding from an object and its bound data See: bind() and ZIM Bind(); EXAMPLE
const b = new Bind(); // create a Bind object - defaults to localStorage
const c = new Circle().center().bind("circle", ["x","y"]).drag();
c.on("pressup", ()=>{b.to();});
new Button({label:"REMOVE"}).loc(100,100).tap(()=>{
   // binding will be removed
   // next refresh, circle will be centered
   // but then will be bound again until button is pressed
   c.noBind();
});
PARAMETERS ** supports DUO - parameters or single object with properties below props - (default null) a property or an array of properties for which to remove the bind    leaveing this blank will remove all bindings on the object removeConnectionData (default true) remove connection data    this will clear removed data from localStorage for LOCALSTORAGE setting    a "remove" property will be sent to the server for GET or POST    with a JSON {id1:["prop1","prop2"], id2:["prop3"]} format of removed items call is a callback function after the data is sent and received    the callback function will receive a result "success" or "error ..." in its parameter bindObj - (default zimDefaultBind) a specific bind object to remove from RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 43188 ▶︎ obj.transform(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame)
obj.transform(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache, events, ghostColor, ghostWidth, ghostDashed, ghostHidden, frame)
transform zim DisplayObject method DESCRIPTION The transform method adds transform controls to a display object. The controls allow the user to move, scale, stretch, rotate and change the registration point. Parameters are available to choose which of these transformations are available. By default, all the transformations are available to use but only the scale and registration point controls are showing. The others work as the user rolls over the edges or the outer corners. You can optionally set these to be visible as boxes on the sides and circles on the outer corners. NOTE works with the ZIM TransformManager() class to handle multiple transforms and saving data for persistence. NOTE the transformed object will have its mouseChildren set to false. CLICK turns off and on the controls if allowToggle parameter is set to true (default is true) If you use the TransformManager for multiple objects, the allowToggle is automatically set to true SHIFT rotate snaps to 45 Dropping the registration point will snap to corners or center if close enough - unless CTRL is down CTRL scale will scale about the registration point CTRL DBLCLICK will reset scale to 1 and rotation to 0 EXAMPLE
rect.transform(); // shows handles for tranformations
EXAMPLE
rect.transform({ // scale and stretch only
   move:false,
   rotate:false
});

// hide the rectangle's bottom stretch control so only can stretch from top
// note - transform() expects there to be a control so do not remove a control
// also, the controls have a hitArea so setting alpha to 0 will not work
rect.transformControls.stretchYControls.getChildAt(1).sca(0);
// or set its visible to false
rect.transformControls.stretchYControls.getChildAt(1).visible = false;

// Record the transforms and remake transforms when page reloads
// Or see the TransformManager
if (localStorage && localStorage.data) rect.transformControls.setData(localStorage.data, true);
rect.on("transformed", function() {
   if (localStorage) localStorage.data = rect.transformControls.recordData(true);
});

// change the color of the controls
var r = new Rectangle(100,100,grey).center().transform({borderColor:blue})
r.transformControls.scaleControls.loop(function (control) {
   control.color = blue;
   control.updateCache();
});
PARAMETERS supports DUO - parameters or single object with properties below move - (default true) let user move object stretchX - (default true) let user stretch object from left and right sides stretchY - (default true) let user stretch object from top and bottom scale - (default true) let user scale object from corners - might still be able to stretch from sides - see stretchX and stretchY rotate - (default true) let user rotate object allowToggle - (default true) let user hide and show controls with click - set to false not to let user hide controls visible - (default true) show the controls to start onTop - (default true) set to false to not move the selected shape to the top of its container showStretch - (default false - true on mobile) show side boxes for stretching - a cursor will always show if stretchX or stretchY is true showRotate - (default false - true on mobile) show circles at corners for rotation - a cursor will always show if rotation is true showScale - (default true) show corner boxes for scaling - a cursor will always show if scale is set to true showReg - (default true) show round circle for draggable registration point - rotates around registration point showBorder - (default true) show rectangle border borderColor - (default brown) any border color (CSS) borderWidth - (default 1) the width of the border dashed - (default false) set to true for dashed border customCursors - (default true - false on mobile) set to false for system cursors (system cursors will not be rotated) handleSize - (default 20 mobile - 10 desktop) the size of the control squares and circles regSize - (default 16) the size of the registration point circle snapDistance - (default 10) registration point will snap to corners and center if within this distance (and CTRL key not down) snapRotation - (default 5) rotation will snap to angles divisible by this value    holding CTRL will avoid snapping    holding SHIFT will rotate only multiples of 45 degrees cache (default true) - set to false to not cache the controls and cursors events (default false) - set to true to receive events while controls are being opertated    otherwise events will only trigger on pressup (not pressmove) - this conserves processing    events are turned on automatically for obj type Tag, TextArea and Loader ghostColor (default null) - color of outline when transform tools are not showing ghostWidth (default null) - width of outline when transform tools are not showing ghostDashed (default true) - dashed of outline if ghostColor or ghostWidth is set ghostHidden (default false) - set to true to start with ghostHidden frame (default zimDefaultFrame) - set to proper frame if on different frame PROPERTIES toggled - adds a read-only Boolean to the object that is true if controls are showing otherwise false METHODS toggle(state - default null) - added to the object    shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls TRANSFORM CONTROL OBJECT When tranform() is set on an object, the object receives a transformControls property This holds the following: PROPERTIES: visible - read only whether the controls are visible ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost controls - reference to the Container that holds all the controls scaleControls - reference to the Container that holds the corner boxes for scaling stretchXControls - reference to the Container that holds the left and right boxes for stretching stretchYControls - reference to the Container that holds the top and bottom boxes for stretching rotateControls - reference to the Container that holds the outer circles for rotating METHODS: hide() - hides the controls - returns object for chaining show() - shows the controls - returns object for chaining recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES    if toJSON (default false) is set to true, the return value is a JSON string setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()    if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data    returns object for chaining remove(noHide) - removes the controls - set noHide true if already hidden add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show allowToggleOn() - sets the show / hide controls on with click allowToggleOff() - removes the show / hide controls on with click showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters hideGhost() - hide the ghost outline toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost    or set state to true to show ghost or false to not show ghost addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters removeGhost() - disable ghost outline functionality disable() - may show the controls if visible but cannot use them enable() - turns the using of the controls back on resize(dispatch) - call resize if the object is transformed in ways other than with the controls    set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager dispose() - remove all aspects of transform on object EVENTS Adds a "transformed" event to obj that is dispatched when pressup on any of the controls or on click    if the events parameter (or events property on transformControls) is set to true then these happen on pressmove of controls    the transformed event object has a transformType property    the transformType property has values of "select" (if not moved), "size", "move", "rotate", "stretch", "reg" "reset"    the transformed event object also has a pressup property that is true if on pressup and false if from pressmove    events are turned on automatically for obj type Tag, TextArea and Loader Adds "transformshow" and "transformhide" events for when click to hide or show controls If TransformManager() is used there are more events available such as "persistset", etc. RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 44383 ▶︎ obj.gesture(move, scale, rotate, boundary, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl, onTop, surround, circularBounds, rect)
obj.gesture(move, scale, rotate, boundary, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl, onTop, surround, circularBounds, rect)
gesture zim DisplayObject method DESCRIPTION Sets multi-touch pan, pinch and rotate for position, scale and rotation Handles scaled and rotated containers Scale and rotation occur from the pinch point (with optional regControl for about the registration point) Note - gesture() only works on the currentTarget - not a container's children (like drag() can) ZIM Frame should have touch set to true (which is the default for mobile) ALSO see the noGesture() method to remove some or all gestures ALSO see the gestureBoundary() method to set or reset the boundary rectangle dynamically EXAMPLE
rect.gesture(); // move, scale and rotate with no bounds
EXAMPLE
rect.gesture({
   rotate:false,
   rect:new Boundary(0,0,stageW,stageH),
   minScale:.5,
   maxScale:3,
   slide:true
});
PARAMETERS supports DUO - parameters or single object with properties below move - (default true) move the object with average of fingers scale - (default true) scale the object with first two fingers' pinch rotate - (default true) rotate the object with first two fingers' rotation boundary - (default null) ZIM Boundary rectangle with (x,y,w,h) to contain bounds of the object    if surround is true then it will make sure the obj surrounds the boundary rather than stays within it    See circularBounds parameter to keep circular shapes with boundary minScale - (default null) a minimum scale maxScale - (default null) a maximum scale snapRotate - (default 1) degrees to snap rotation to after rotation is finished localBounds - (default false) set to true to make rect for bounds local rather than global slide - (default false) will let you throw the object and dispatch a slidestop event when done slideEffect - (default 5) how much slide with 0 being no slide and then longer slide times and distance like 10, etc. regControl (default false) set to true to rotate and scale around registration point rather than pinch point onTop - (default true) brings the object to the top of the container surround - (default false) is for dragging a big object that always surrounds the rect    must specify a rect and currently not supported unless rotate is false circularBounds - (default false) set to true if object is circular with center registration    set to true to use radius to calculate rotated object in boundary if boundary is set rect - (depreciated) same as boundary - kept for backwards compatibility EVENTS Adds move, scale and rotate events to obj (when associated gesture parameters are set to true) If slide is true, obj dispatches a "slidestop" event when sliding stops RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 44846 ▶︎ obj.noGesture(move, scale, rotate)
obj.noGesture(move, scale, rotate)
noGesture zim DisplayObject method DESCRIPTION Removes multi-touch pan, pinch and rotation gestures from an object. If all three are removed then deletes the zimTouch object and touch events from obj EXAMPLE
rect.noGesture(); // removes all gestures
// or
rect.noGesture(true, true, false); // would leave rotation
// or with ZIM DUO
rect.noGesture({rotation:false}); // would leave rotation
PARAMETERS supports DUO - parameters or single object with properties below move - (default true) - set to false not to remove move gesture scale - (default true) - set to false not to remove scale gesture rotate - (default true) - set to false not to remove rotate gesture RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 44893 ▶︎ obj.gestureBoundary(boundary, new)
obj.gestureBoundary(boundary, new)
gestureBoundary zim DisplayObject method DESCRIPTION Dynamically changes or adds a boundary rectangle to the object being dragged with gesture(). EXAMPLE
const boundary = new Boundary(100,100,500,400); // x,y,w,h
circle.gestureBoundary(boundary);
PARAMETERS boundary - is a ZIM Boundary rectangle - the local / global does not change from the original gesture setting update - (default true) reset base drag boundary RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 44936 ▶︎ obj.effect(effect, x, y, width, height)
obj.effect(effect, x, y, width, height)
effect zim DisplayObject method DESCRIPTION Adds an effect to a DisplayObject such as: blur, glow, shadow, color and alpha mask effects. Also see hue, saturation, brightness and contrast convenience effects that are available as properties directly on the DisplayObject. SEE: https://zimjs.com/cat/effects.html BATCHING Effects are processor heavy. Too many can slow down the application. ZIM uses effect() to allow multiple effects to be added at once. These are then internally batched and updated with a single update rather than making each effect a stand-alone method requiring individual updates. EFFECTS PROPERTY The effects added with effect() are stored on the object's effects property. The effects themselves have properties that can be changed to change the effect. If an effect is changed the updateEffects() method needs to be called. ZIM does not do this automatically, allowing the changes to be batched with one call. See updateEffects() - also see noEffect() to remove effects. The effect properties and convenience effects can be animated and wiggled. In this case, the effects will be automatically updated by ZIM. CREATEJS FILTERS ZIM Effects wrap the CreateJS filters array and cache/updateCache system. Using effect() will overwrite manual usage of CreateJS filters array. The ZIM Effects system remembers effects in the effects property and overwrites the filters array each time an effect is added or updated. To update an effect, all the effects need to be re-applied regardless and all this is automatically handled by ZIM. EFFECT OBJECTS The following Effect objects can be passed into effect() These all have parameters that accept ZIM DUO, VEE and OCT. See the Doc entries under Controls > Effects.    new BlurEffect() - apply blur    new GlowEffect() - apply glow and knock out - thanks kudox.jp    new ShadowEffect() - apply drop shadows and knock out - thanks kudox.jp    new ColorEffect() - change colors    new MultiEffect() - combination of hue, saturation, brightness, and contrast    new AlphaEffect() - apply alpha mask     EFFECT IDS The effects are referred to by id and have ids as follows (case insensitve):    blur, glow, shadow, color, multi, alpha The id is the property name used to identify the effect in the object's effects property (plural s):    obj.effects.glow.strength = 20; // using the glow id    obj.updateEffects(); // this must be called to see the change Effect ids are used when animating (and wiggling):    props:{"effects.blur.blurX":200} // no update is needed To remove effects use noEffect (singular) and use the id as follows:    obj.noEffect(); // remove all effects (except convenience effects - see below)    obj.noEffect("glow"); // remove the glow effect    obj.noEffect(["glow", "color"]); // remove glow and color effects CONVENIENCE EFFECTS hue, saturation, brightness, contrast can be used directly on the object    obj.hue = 100; // no need to updateEffects()    // or    obj.hueBatch = 100; // will set the effect    obj.updateEffects(); // but updateEffects must be called to see the change Convenience effects can also be accessed through the multi id:    obj.effects.multi.hue = 100; Any of the four properties can be removed by setting them to 0    obj.hue = 0; Convenience effects can also ALL be removed together with:    obj.noEffect("multi"); The following will NOT remove the convenience effects:    obj.noEffect(); // will not remove hue, saturation, brightness and contrast     NOTE Effects are quite processor intensive so use sparingly. Each effect processes every pixel - when animating this results in hundreds of thousands of loops. ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system to make accessing filters easy - but apps will slow down if they are over-used. Keep the quality at 1 for animating filters at a decent framerate. Consider pre-processing images if effects do not have to be dynamic.     EXAMPLE
// create a Label with a GlowEffect that shows through to the image below
new Pic("background.jpg").center();
new Label("WOW", 200, "impact")
   .center()
   .effect(new GlowEffect({
      color:red,
      blurX:50,
      blurY:50,
      strenght:2,
      quality:2,
      knockout:true
   }));
EXAMPLE
// add a glow and shadow effect
// remove only the glow when pressed
const circle = new Circle(100,blue)
   .center()   
   .effect([ // apply two effects in an array      
      new GlowEffect({color:purple, blurX:100, inner:true}),      
      new ShadowEffect(20) // 20 is distance
   ]);
circle.on("mousedown", ()=>{   
   // specify type of effect to remove - otherwise removes all
   circle.noEffect("glow");
   stage.update();
});
EXAMPLE
// add a 200 blurX effect and animate it to 0 rewind and looping
STYLE = {blurX:200} // just showing using style...
new Pic("image.png") // preloaded asset
   .center()
   .effect(new BlurEffect())
   .animate({
      // the blur effect is stored on the effects property of the object
      // and available through the effect id (blur)
      // we are animating the blurX of that
      // note the quotes around the DOT property format
      props:{"effects.blur.blurX":0},
      time:.7,
      rewind:true,
      rewindWait:.5,
      loop:true
   });
    EXAMPLE
// wiggle the saturation of an image asset stored in pic
// so its saturation goes from 50-100 negative or positive in 1-3 seconds
// here we use a convenience effect (hue, saturation, brightness, contrast)
pic.wiggle("saturation", 0, 50, 100, 1, 3);

// This is the same as the following (so may as well use above)
pic.effect(new MultiEffect()).wiggle("effects.multi.saturation", 0, 50, 100, 1, 3);
PARAMETERS effect - (default null) a ZIM Effect object as detailed above    or an array of ZIM Effect objects.    Effects of a specific type are not compounded.    For example, adding two blur effects will just use the last blur effect added. x - (default null) the x position of the cache bounds - will cache object bounds by default y - (default null) the y position of the cache bounds - will cache object bounds by default width - (default null) the width of the cache bounds - will cache object bounds by default height - (default null) the height of the cache bounds - will cache object bounds by default RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45120 ▶︎ obj.updateEffects(redoChache)
obj.updateEffects(redoChache)
updateEffects zim DisplayObject method DESCRIPTION Updates an effect when its property or the object's internals are changed. For example a Sprite changes frame. Not needed for position, alpha, scale or rotation. This basically updates the cache on the object so the effects are applied. Note: setting hue, saturation, brightness and contrast directly on the object will update automatically. These can be batched by using hueBatch, saturationBatch, etc. which will change but not update until an obj.updateEffects() is called. EXAMPLE
// make an object more blurry in x each time it is pressed
const rect = new Rectangle(200,200,red)
   .center()
   .effect(new BlurEffect(10, 0)); // set to 0 in y otherwise it would take default blurY
rect.on("mousedown", ()=>{
   rect.effects.blur.blurX += 20;
   rect.updateEffects();
   stage.update();
});
PARAMETERS redoCache - (default false) set to true to remake the cache the size of the bounds of the object    if some other size is desired, use obj.cache(width, height) or obj.cache(x,y,width,height) instead of updateEffects() RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45162 ▶︎ obj.noEffect(effects, cache)
obj.noEffect(effects, cache)
noEffect zim DisplayObject method DESCRIPTION Removes the effects or specified effects from an object. EXAMPLE
// add a glow and shadow effect
// remove only the glow when pressed
const circle = new Circle(100,blue)
   .center()   
   .effect([ // apply two effects in an array      
      new GlowEffect({color:purple, blurX:100, inner:true}),      
      new ShadowEffect(20) // 20 is distance
   ]);
circle.on("mousedown", ()=>{   
   // specify type of effect to remove - otherwise removes all
   circle.noEffect("glow");
   stage.update();
});
PARAMETERS effects - (default null) will remove all effects applied with effect() unless    an effect string or array of effect strings is provided    Effect strings are (case insensitive):    "blur", "glow", "shadow", "multi", "alpha"    alternately, "Effect" can be added such as "BlurEffect"    To remove hue, saturation, brightness and contrast set the object property to 0    for instance obj.hue = 0;    Or to remove all four then can explicitly use obj.noEffect("multi") cache - (default false) will uncache object if all effects are gone    set to true to leave object cached RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45229 ▶︎ obj.addPhysics(dynamic, contract, shape, friction, linear, angular, density, bounciness, maskBits, categoryBits, physics, restitution)
obj.addPhysics(dynamic, contract, shape, friction, linear, angular, density, bounciness, maskBits, categoryBits, physics, restitution)
addPhysics zim DisplayObject method DESCRIPTION Add Physics to a DisplayObject. DisplayObject should be centerReg() on the stage (or in non-transformed Container at 0,0 on stage) The Physics world can be set up with the ZIM Physics() class in the Controls module. Box2D and ZIM physics JavaScript helper module need to be imported. If no physics world has been created, the addPhysics() method will create a default world. The default world will have a borders around the stage and gravity of 10. See: https://zimjs.com/physics/ NOTE Adding physics also adds more methods and properties to the DisplayObject See the Physics() docs for all the details EXAMPLE
new Circle().center().addPhysics(); // circle will fall with gravity to the floor
EXAMPLE
// create a world with no gravity (viewed from top like air-hockey)
const physics = new Physics(0);

// create physics objects using the addPhysics() method
const circle = new Circle(50,blue,grey).center().addPhysics({bounciness:1.1});

// make sure to centerReg() any rectangular objects
const rect = new Rectangle(30,400).centerReg().pos(70).addPhysics(false); // static - do not move
const tri = new Triangle(150,150,150,green,grey).center().pos(200).addPhysics({linear:10}); // does not slide easily

// turn on dragging
physics.drag();
PARAMETERS dynamic - (default true) - set to false to not move the physics body (static) contract - (default 0) - make the physics body smaller (or bigger with negative) than bounds shape - (default object shape) - "rectangle" for any object other than Circle, Dial and Triangle    but can specify a "circle" for a Sprite or Bitmap, for instance - to try and match shape    custom polygon bodies can also be made with manual Box2D and then use physics.addMap()    but the only shapes available automatically are "rectangle", "circle", "triangle" friction - (default .8) - how sticky will the body act - set to 0 to slide. linear - (default .5) - linear damping which slows the movement - set to 0 for no damping angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping density - (default 1) - the density that can affect what happens with collisions bounciness - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy (was restitution) maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies    as soon as maskBits is specified, the body will collide only with the categoryBits provided to the maskBits parameter    1 will collide with bodies that do not have categoryBits specified including the borders    to test collision with bodies that have categoryBits specified, use the pipe (|) as follows:    1|2 will also collide with bodies having categoryBits of 2 specified    so if another body has categoryBits of 4 then the bodies would not collide.    1|2|4 would also collide with 4 but not bodies with categoryBits of 8, etc.    2|4 would pass through any bodies without categoryBits of 2 or 4 including the borders categoryBits - (default 1) - a collision category - by default, bodies are in category 1    use with maskBits to say which bodies will collide with which other bodies    the values are bit fields https://en.wikipedia.org/wiki/Bit_field so can have the following values:    can be 2, 4, 8, 16, 32, 64, 128, 256, etc. up to 15 powers of 2 physics - (default zimDefaultPhysics) restitution - (default bounciness) - replaced by bounciness - kept for backwards compatibility RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45316 ▶︎ obj.removePhysics()
obj.removePhysics()
removePhysics zim DisplayObject method DESCRIPTION Remove Physics from a DisplayObject. This removes various methods and properties that addPhysics() added The object can be added back to the physics world with addPhysics() EXAMPLE
obj.removePhysics(); // ;-)
RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
-------------- HIT TESTS EXPAND 45346 ▶︎ obj.hitTestPoint(x, y, boundsCheck)
obj.hitTestPoint(x, y, boundsCheck)
hitTestPoint zim DisplayObject method DESCRIPTION See if shape of obj is hitting the global point x and y on the stage. EXAMPLE
const circle = new Circle().loc(100,100).drag();
circle.on("pressmove", ()=>{
   if (circle.hitTestPoint(stageW/2, stageH/2)) {
      if (circle.alpha == 1) {
         circle.alpha = .5;
         stage.update();
      }
   } else {
      if (circle.alpha == .5) {
         circle.alpha = 1;
         stage.update();
      }
   }
});
PARAMETERS x and y - the point we are testing to see if it hits the shape of the object boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45397 ▶︎ obj.hitTestReg(other, boundsCheck)
obj.hitTestReg(other, boundsCheck)
hitTestReg zim DisplayObject method DESCRIPTION See if the shape shape of an object is hitting the registration point of object (other). EXAMPLE
const circle = new Circle(50, "red").center().drag();
const rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", ()=>{
   if (circle.hitTestReg(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
})
PARAMETERS other - the object whose registration point we are checking against boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 45442 ▶︎ obj.hitTestRect(other, num, boundsCheck, inside)
obj.hitTestRect(other, num, boundsCheck, inside)
hitTestRect zim DisplayObject method DESCRIPTION See if a shape of an object is hitting points on a rectangle of another object. The rectangle is based on the position, registration and bounds of object (other). num is how many points on the edge of the rectangle we test - default is 0. The four corners are always tested as well as the very middle of the rectangle. EXAMPLE
const circle = new Circle(50, "red").center().drag();
const rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", ()=>{
   if (circle.hitTestRect(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
});
PARAMETERS other - the object whose bounding rectangle we are checking against num - (default 0) the number of points along each edge to check    1 would put a point at the middle of each edge    2 would put two points at 1/3 and 2/3 along the edge, etc.    there are always points at the corners    and one point in the middle of the rectangle boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work inside (default false) check if other object is completely inside shape RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 45539 ▶︎ obj.hitTestCircle(other, num, boundsCheck, inside)
obj.hitTestCircle(other, num, boundsCheck, inside)
hitTestCircle zim DisplayObject method DESCRIPTION See if the shape of an object is hitting points on a circle of another object. The circle is based on the position, registration and bounds of object (other). num is how many points around the circle we test - default is 8 Also checks center of circle hitting. EXAMPLE
var circle = new Circle(50, "red").center().drag();
var triangle = new Triangle(100, 100, 100, "blue").loc(100,100);
circle.on("pressmove", function() {
   if (triangle.hitTestCircle(circle)) {
      stage.removeChild(triangle);
      stage.update();
   }
});
PARAMETERS other - the object whose circle based on the bounding rect we are using num - (default 8) the number of points evenly distributed around the circle    and one point in the middle of the circle boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work inside (default false) check if other object is completely inside shape RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 45619 ▶︎ obj.hitTestCircleRect(other, margin)
obj.hitTestCircleRect(other, margin)
hitTestCircleRect zim DisplayObject method DESCRIPTION Uses an equation to see if a circlular object is hitting the rectangle of another object. DO NOT use with a rotated rectangle object - for that use hitTestRect() or hitTestCircle(). This is faster than hitTests on shapes - so will have the speed of hitTestBounds, hitTestCircles and hitTestGrid. The circle is based on a the object radius if there is one and if no radius then the average of the width and height divided by two. A margin parameter is provided to tweak the hitTest The rect is based on the bounds of the second object projected globally as a rectangle If the second object bounds are rotated, the global bounds will be bigger to keep parallel to the axes EXAMPLE
const ball = new Circle(50, "red").center().drag();
const box = new Rectangle(100, 100, "blue").loc(100,100);
ball.on("pressmove", ()=>{
   if (ball.hitTestCircleRect(box)) {
      zog("points!");
   }
});
PARAMETERS other - the object whose bounds are used to see if circle shape is hitting margin (default 0) pixels the distance between the circle and the bounds is increased or decreased to effect the hit RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤
EXPAND 45685 ▶︎ obj.hitTestCircles(other, margin)
obj.hitTestCircles(other, margin)
hitTestCircles zim DisplayObject method DESCRIPTION Uses an equation to see if two circles are intersecting. This is faster than hitTests on shapes - so will have the speed of hitTestBounds and hitTestGrid. The circles are based on the bounds of the two objects - it does not matter on which object the method is placed. If the bounds are not square then half the average length of the sides is used as the radius. A margin parameter is provided to tweak the hitTest EXAMPLE
const ball = new Circle(50, "red").center().drag();
const basket = new Circle(100, "blue").loc(100,100);
ball.on("pressmove", ()=>{
   if (ball.hitTestCircles(basket)) {
      zog("points!");
   }
});
PARAMETERS other - the object whose circle based on the bounding rect we are using margin (default 0) pixels the distance between circles is increased or decreased to effect the hit RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45742 ▶︎ obj.hitTestBounds(other, margin, boundsShape)
obj.hitTestBounds(other, margin, boundsShape)
hitTestBounds zim DisplayObject method DESCRIPTION See if obj.getBounds() is hitting other.getBounds(). Margin can be adjusted to tweak the hitTest. Pass in a boundsShape shape if you want a demonstration of where the bounds are. EXAMPLE
const circle = new Circle(50, "red").center().drag();
const rect = new Rectangle(100, 100, "blue").loc(100,100);
circle.on("pressmove", ()=>{
   if (circle.hitTestBounds(rect)) {
      stage.removeChild(rect);
      stage.update();
   }
});
PARAMETERS other - another object whose rectanglular bounds we are testing margin (default 0) shifted distance in pixels before hit is counted - can be positive or negative boundsShape - (default null) an empty Shape or createjs.Shape    you would need to add the boundsShape to the stage RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 45802 ▶︎ obj.hitTestPath(other, num, showPoints)
obj.hitTestPath(other, num, showPoints)
hitTestPath zim DisplayObject method DESCRIPTION See if the shape of an object is hitting points on a path of a Squiggle or Blob. num is how many points between each point on the path we test - default is 2 SEE: https://zimjs.com/hittestpath.html EXAMPLE
const path = new Blob().center();
const circle = new Circle(50, purple).pos(100,100).drag();
circle.on("pressmove", ()=>{
   if (circle.hitTestPath(path, 3, true)) {
      circle.alpha -= .02;
      stage.update();
   }
});
PARAMETERS other - the path (Squiggle or Blob) to test to see if the object shape is hitting num - (default 2) the number of points added to the path roughly between each point    this gets totalled - so num*numPoints and then distributed along the path showPoints (default false) will draw small circles along the path where the hits will be tested RETURNS a Boolean true if hitting, false if not CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 45871 ▶︎ obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
hitTestGrid zim DisplayObject method DESCRIPTION Converts an x and y point to an index in a grid. If you have a grid of rectangles, for instance, use this to find out which rectangle is beneath the cursor. 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();
circle.on("pressmove", ()=>{
   var index = tile.hitTestGrid(tile.width, tile.height, 5, 4, circle.x, circle.y,0,0,10,10);
   zog(index);
});
PARAMETERS width and height - the overall dimensions cols and rows - how many of each (note it is cols and then rows) x and y - where you are in the grid (eg. e.stageX and e.stageY) offsetX and offsetY - (default 0) the distances the grid starts from the origin of the obj spacingX and spacingY - (default 0) spacing between grid cells    null will be returned if x and y within spacing unless the type is set to "open"    spacing is only between the cells and is to be included in the width and height (but not outside the grid) local - (default false) set to true to convert x and y to local values type - (default index) which means the hitTestGrid returns the index of the cell beneath the x and y point    starting with 0 at top left corner and counting columns along the row and then to the next row, etc.    set type to "col" to return the column and "row" to return the row    set to "array" to return all three in an Array [index, col, row]    set to "open" allow x and y to be in spacing and still return Array [index, col, row]       these will report depending on less than half the spacing or more than half the spacing between cells RETURNS an index Number (or undefined) | col | row | an Array of [index, col, row] CLOSE ▲PAGE ▤CODE ▤BITS
-------------- ANIMATE, WIGGLE, LOOP EXPAND 45953 ▶︎ obj.animate(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(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)
animate zim DisplayObject method powered by createjs.Tween (TweenJS) DESCRIPTION Animate object properties in time (s). You can set various types of easing like bounce, elastic, back, linear, sine, etc. Handles callbacks, delays, loops, rewinds, relative, series and sequences of animations. SEE: https://zimjs.com/animation Shape Animation ZIM animate() lets you animate one Squiggle to another or one Blob to another See the props parameter under the convenience properties for shape and blobShift Advanced Animation ZIM animate() lets you animate along a path made with a zim Squiggle or Blob These paths can be edited by the user and the animation will still work The paths themselves can be animated or wiggled. Orient and Flipping are available. Dynamic speed can be set with percentSpeed and tied in to Accelerator and MotionController. Scrubbing animation and path animation is also supported with percentComplete. This can be used with a Slider, Dial, MotionController, Parallax or general coding. Dragging along a path is as easy as setting the drag parameter to true. This can be done with while animating or with the animation paused. ZIM EXTRA! provides animation based on animation. This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path but EXTRA! also opens up endless possibilities as the input and output does not have to be the target. This means that animation can also control properties of other objects. SEE: https://zimjs.com/nio/ NOTE to temporarily prevent animations from starting set ANIMATE to false NOTE see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running NOTE set mouseEnabled of target before calling animate as animate itself sets mouseEnabled and then resets to original after a delay EXAMPLE
const circle = new Circle(50, "red")
   .center()
   .alp(0)
   .sca(0)
   .animate({alpha:1, scale:1}, .7, null, done);
   
function done(target) {
   // target is circle if params is not set
   target.drag();
}

// or with ZIM DUO and from parameter:
const circle = new Circle(50, "red")
   .center()
   .animate({
      props:{alpha:0, scale:0},
      time:.7,
      from:true
   });

// note: there was no need to set alpha and scale to 0 before the animation
// because from will animate from property values in props {alpha:0, scale:0}
// to the present set values - which are 1 and 1 for the default scale and alpha.
// This allows you to place everything how you want it to end up
// and then easily animate to this state.
// An extra advantage of this is that you can use the ANIMATE constant to skip animations while building
// See the https://zimjs.com/ornamate.html example

// RELATIVE animation
// rotate the rectangle 360 degrees from its current rotation
rectangle.animate({rotation:"360"});

// pulse circle
var circle = new Circle(50, "red")
   .center()
   // pulse circle from scale 0 - 1 every second (use ZIM DUO)
   .animate({
      props:{scale:0},
      time:.5,
      loop:true,
      rewind:true,
      from:true
   });
// toggle pause the circle when stage is pressed
stage.on("stagemousedown", function() {
   circle.pauseAnimate(!circle.paused);
});
EXAMPLE
// using ZIM VEE value:
// this will animate the alpha to between .5 and 1 in either 1 second or 2 seconds
circle.animate({alpha:{min:.5, max:1}}, [1, 2]);
EXAMPLE
// Dynamic Animation
const rect = new Rectangle(200,200,red)
   .centerReg()
   .animate({
      props:{rotation:360},
      loop:true,
      time:2,
      ease:"linear",
      dynamic:true,
      set:{percentSpeed:0} // no speed to start
   });

// example using a Slider to set speed from 0 to 5 times as fast
const slider = new Slider(0,500)
   .pos(100, 100)
   .change(()=>{
      rect.percentSpeed = slider.currentValue;
   });

// example using an Accelerator and MotionController
// to set speed from -200 to 200 percent
// depending on mouse position
// multiple targets including Dynamo and Scroller objects can be added to Accelerator
// if adding multiple objects, use an array new Accelerator([rect, otherObject, anotherObject])
new MotionController({
target:new Accelerator(rect),
type:"mousemove",
minPercentSpeed:-200,
maxPercentSpeed:200
});
EXAMPLE
// Series example animating a circle in square formation
// Also showing that the series can include multiple targets
// Click on the stage to pause or unpause the animation

const rect = new Rectangle({color:pink})
   .centerReg()
   .sca(0); // hiding it to start

const circle = new Circle({color:purple}) // chaining the rest
   .addTo(stage)
   .pos(400,300)
   .animate({ // circle will be the default object for the inner animations
      props:[
         // an array of animate configuration objects
         {props:{x:600, y:300, scale:2}},
         {props:{x:600, y:500, scale:1}, call:function(){zog("part way");}},
         {props:{x:400, y:500}, time:.5, ease:"quadInOut"},
         {target:rect, props:{scale:3}, time:1, rewind:true, ease:"quadInOut"},
         {props:{x:400, y:300}}
      ],
      time:1, // will be the default time for the inner animations
      ease:"backOut", // will be the default ease for the inner animations
      id:"square", // will override any id set in the inner animations
      loop:true,
      loopCount:3,
      // note - no rewind or from parameters
      call:function(){zog("done");}
   });

   var paused = false;
   stage.on("stagemousedown", function() {
         paused = !paused;
         pauseAnimate(paused, "square");
   });
EXAMPLE
// sequence example to pulse two circles
const circles = new Container(stageW, stageH).addTo(stage);
const circle1 = new Circle(50, "red").center(circles);
const circle2 = new Circle(50, "blue").center(circles).mov(70);
circles.animate({
   props:{scale:1},
   time:.5,
   loop:true,
   rewind:true,
   from:true,
   sequence:.5
});
EXAMPLE
// animate() can animate any object property
// just use the animate function and pass in the object as the first parameter:

const obj = {age:10}
animate(obj, {age:20}, 1);
interval(.05, ()=>{
   zog(obj.age);
});

// or if you have a THREEJS mesh
// use quotes to animate a dot property:
animate(mesh, {"rotation.y":360*RAD}, 50);

// or CSS properties - see the CSS parameter for setup info
zss("tagID").opacity = 1; // set this even if it is default
animate(zid("tagID"), {opacity:0}, 2); // etc.
EXAMPLE
// Animate along a Squiggle or Blob path
// see https://zimjs.com/nio/ examples
// see https://zimjs.com/explore/squiggleAnimate.html for more
// see https://zimjs.com/explore/blobAnimate.html for more
// see https://zimjs.com/explore/blobAnimate2.html for more
const line = new Squiggle().center();
new Circle(10, red).addTo().animate({path:line}, 1);
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 props - the object literal holding properties and values to animate    Basic examples: {x:200} or {rotation:360, alpha:0} or {scale:4} or {x:300, y:300, scale:"2"} (relative scale)    There are custom options below including Convenience, ZIM VEE, Relative, and Series properties.    ** Before ZIM 7.1, this parameter was called obj - as to not conflict with CreateJS TweenJS props (now renamed cjsProps)     obj is still available as a parameter name for backwards compatibility when using a ZIM DUO configuration object    CONVENIENCE PROPERTIES       scale - for scaleX and scaleY       color - on ZIM shapes for setColorRange() and animate colorRange from 0-1           ** this property cannot be run in a series - rather animate in a call function to accomplish a series of color changes       note - animate from one note to another when animating a ZIM Synth tone()          note ("A", "C2", "C#" or "Bf", etc.) is coverted to frequency       shape - animate from one ZIM Squiggle to another or one ZIM Blob to another          for now, the matching Sqiggle or Blob must have the same number of points          to pause or stop a shape tween use the animate id parameter       blobShift - a number of points to shift the points of a Blob in clockwise direction          this is when using a shape tween that is a Blob - can be negative       path - pass in a Blob or Squiggle to animate along path          https://zimjs.com/nio/path.html          If the shape has lockControls set to false (the default) then the animation will be dynamic          and adjust as the shape is changed.          If a set animation path is desired then set the shape's lockControls to true          NOTE: Do not re-amimate an object that is being animated on a path          use a Container and animate the container on the path          and animate the object inside the container - otherwise percentComplete conflicts       startPercent - (default 0) set to a percent for where to start the target animating          ZIM Bead objects will be given a startPercent that matches their start percentage          currently not supported when dragging on path - it is very complicated       percent - (default 100) how much percent to animate from the startPercent          by default, the target will travel once along the path from its start position (startPercent)          this can be less than the startPercent to make animation travel backwards on the path          the percent can also be bigger than 100 as well as less than 0          so a percent:300 will travel three times along the path - and then rewind if rewind is set          and a percent of -150 will travel one and half times backwards along the path from the startPercent          currently not supported when dragging on path - it is very complicated       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          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          https://zimjs.com/nio/flip.html          this will also work with orient to make sure the target is not upside down          if object is pre-rotated then 90,-90,270 should work as ZIM will swap the the scaleX and scaleY          but any unusual starting angles may not flip as desired - so put these in a Container and animate the container       flipVertical - setting flipVertical to true will flip the object vertically when its y direction goes negative          this will also work with orient to make sure the target is not upside down       EXTRA! - the following convenience properties are available for ZIM EXTRA! (also see extra below)          https://zimjs.com/nio/extra.html          zoom - an array that represents scale proportions based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values             zoom:[.5,1.5] scales the target based on its y position - animating y or along a path will show scaling             zoom:10 - is like zoom:[0,10]             zoom:true - is like zoom:[0,1]             zoom:[1,3,stageH/2-100,stageH/2+200] would scale from 1 to 3 in this region and stay at 1 or 3 outside this region          speed - an array that represents animation percentSpeed based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values             speed:[20,100] sets percentSpeed based on target y position - animating y or along a path will have changing speed             speed:40 - is like speed:[0,40]             speed:true - is like speed:[0,100]             ** will set dynamic property to true - as percentSpeed needs dynamic property set to true          layer - an array that represents ratio of layer proportions based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values             layer:[0,1] sets current layer based on target y position - animating y or along a path will have changing layers             layer:1 - is like layer:[0,1]             layer:true - is like layer:[0,target.parent.numChildren-1]          fade - an array that represents ratio of alpha based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(default stageH)] the outputs will be constrained to the provided values             fade:[.5,1] sets current alpha based on target y position - animating y or along a path will have changing alpha             fade:1 - is like fade:[0,1]             fade:true - is like fade:[0,1]             fade:[0,1,stageH/2-100,stageH/2+200] - would change alpha in this y region       extra - in addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:          Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]          The object has the following properties - all are optional except the outputProp which is required:          |ZIM VEE| - each object below optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from             inputObj - (default target) - the object with the input property - probably the animation target but could be any object             inputProp - (default "y") - a string of the property name for the input - "x", "rotation", etc.             inputMin - (default 0) - the minimum input value for the calculation - also see constrain             inputMax - (default stageW if x inputProp else stageH) - the maximum input value for the calculation - also see constrain             outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object             outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.             outputMin - (default 0) - the minimum output value for the calculation - also see constrain             outputMax - (default 1) - the maximum output value for the calculation - also see constrain             factor - (default 1) setting factor to -1 will reverse the direction of the animation             outputRound - (default false) set to true to receive rounded output values             constrain - (default true) constrain the output value to outputMin and outputMax                set to false to let values go beyond provided mins and maxes                this is quite usual when a proportion is easily figured at a certain range                and continued increase or decrease is desired outside the range - just turn constrain to false.          EXAMPLES:          extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height          extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position          extra:{inputObj:circle, inputProp:"x", inputMax:stageW, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen          ** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.    |ZIM VEE| - each props property value optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from (except the EXTRA! properties which accept ZIM VEE values inside)       these will be picked again if the loopPick parameter is true (default false)    RELATIVE VALUES: you can pass in relative values by putting the numbers as strings       rotation:"360" will animate the rotation of the object 360 degrees from its current rotation       whereas rotation:360 will animate the rotation of the object to 360 degrees    DOT PROPERTIES: you can animate properties on properties using quotes:       Here is animate used as a function to animate a THREEJS mesh          animate(mesh, {"rotation.y":360*RAD}, 5000);    CSS PROPERTIES: animate can animate CSS properties       ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed       Set the css parameter to true and see the CSS parameter for more details    ANIMATION SERIES: if you pass in an array for the props value, then this will run an animation series       The array must hold animate configuration objects:       [{props:{scale:2}, time:1, rewind:true}, {target:different, props:{x:100}}, etc.]             If you run animate as a method on an object then this is the default object for the series       but you can specify a target to override the default       By default, each animation runs after the other, but a negative wait can be set       eg. if wait:-1 is set on the third animation in the series it starts 1 second before the second animation ends       The default time and tween are as provided in the main parameters       but you can specify these to override the default       The id of the main parameters is used for the whole series and cannot be overridden       The override parameter is set to false and cannot be overridden       All other main parameters are available except rewind, sequence and from       (rewind and from are available on the inner tweens - for sequence: the initial animation is considered)       You currently cannot nest animation series       Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)       then this will be the last of the series to run       Note: color cannot be animated in a series - rather animate in a call function to accomplish a series of color changes       Note: a sequence cannot be seriesed and a series cannot be sequenced time - |ZIM VEE| (default 1) the time for the tween in seconds (also see ZIM TIME constant)    see also the rate parameter and property to dynamically change the time the animation takes (its speed) ease - |ZIM VEE| (default "quadInOut") the equation type for easing ("bounceOut", "elasticIn", "backInOut", "linear", etc)    also ZIM preset eases: "snapIn", "snapOut", "snapInOut", "balisticIn", "balisticOut", "balisticInOut", "slowmoIn", "slowmoOut", "slowmoInOut"    ** CUSTOM EASE: see https://zimjs.com/ease for custom ease which can be passed in here as a value like so:       ease:zimEase([.2,.4,.6,.8]) // would be linear       ease:zimEase([[1.45,-0.57,0.67,0.55], [0.34,0.44,1.43,-0.31]]) // is the same as "snapInOut"       // see the zimEase() function in the docs for the Code module    see CreateJS easing: https://www.createjs.com/docs/tweenjs/classes/Ease.html    also see easeAmount and easeFrequency parameters to adjust certain eases like back and elastic call - (default null) the function to call when the animation is done params - (default target) a single parameter for the call function (eg. use object literal or array) wait - |ZIM VEE| (default 0) seconds to wait before doing animation    can be negative for series to start animation before previous animation ends waitedCall - (default null) calls function after wait is done if there is a wait waitedParams - (default target) parameters to send waitedCall function loop - (default false) set to true to loop animation loopCount - |ZIM VEE| (default 0) if loop is true how many times it will loop (0 is forever) loopWait - |ZIM VEE| (default 0) seconds to wait before looping loopCall - (default null) calls function after loop and loopWait (not including last loop) loopParams - (default target) parameters to send loopCall function loopWaitCall - (default null) calls function after at the start of loopWait loopWaitParams - (default target) parameters to send loopWaitCall function loopPick - (default false) remake any ZIM VEE (Pick) props for the next loop (thanks GSAP) rewind - |ZIM VEE| (default false) set to true to rewind (reverse) animation (doubles animation time) rewindWait - |ZIM VEE| (default 0) seconds to wait in the middle of the rewind rewindCall - (default null) calls function at middle of rewind after rewindWait rewindParams - (default target) parameters to send rewindCall function rewindWaitCall - (default null) calls function at middle of rewind before rewindWait rewindWaitParams - (default target) parameters to send rewindCall function rewindTime - (default time) set the time in seconds for the rewind portion of an animation rewindEase - (default null) overwrite the ease for the rewind direction    this assumes that In is at the start of the rewind and Out is at the end of the rewind    so setting rewindEase:"bounceOut" will bounce back at the start of the animation    note - setting ease:"bounceOut" will bounce at the end of the animation    this allows for a normal start with a bounce and then a normal start at rewind and a bounce sequence - (default 0) the delay time in seconds to run on children of a container or an array of target animations    with the addition of ZIM VEE object to the target, you must noPick the array    for example, target = container or target = {noPick:[a,b,c]} and sequence = 1000    would run the animation on the first child and then 1 second later, run the animation on the second child, etc.    or in the case of the array, on element a and then 1 second later, element b, etc.    If the loop prop is true then sequenceCall below would activate for each loop    For an array, you must use the zim function with a target parameter - otherwise you can use the ZIM 4TH method    Note: a sequence cannot be seriesed and a series cannot be sequenced sequenceCall - (default null) the function that will be called for each sequence animation    Note: the value of the sequenceCall parameter will be the object that just ended animation unless there is a sequenceParams value sequenceParams - (default null) a parameter sent to the sequenceCall function sequenceReverse - |ZIM VEE| (default false) set to true to sequence through container or array backwards ticker - (default true) set to false to not use an automatic Ticker function cjsProps - (default {override: true}) legacy - allows you to pass in CreateJS TweenJS configuration properties css - (default false) set to true if there is no Frame    ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed    But other CreateJS versions will need the plugin available here:       https://d309knd7es5f10.cloudfront.net/CSSPlugin01.js       Add that at the top of your code in a script tag       and at the top of the main script install:       createjs.CSSPlugin.install();    <script>       // other versions of CreateJS need to import and install CSS Plugin       // createjs.CSSPlugin.install();       // the property must be set before you can animate       zss("tagID").opacity = 1; // set this even if it is default       animate(zid("tagID"), {opacity:0}, 2); // etc.       // for transform styles use:       zss("tagID").transform = "translate(20px, 30px)"; // set this even if it is default       animate({        target:zid("tagID"),        props:{transform:"translate(100px, 150px)"},        time:2,        loop:true,        rewind:true       });    </script> protect - (default false) protects animation from being interrupted before finishing    unless manually interrupted with stopAnimate()    protect is always true (regardless of parameter setting) if loop or rewind parameters are set override - (default true) subesequent tweens of any type on object cancel all earlier tweens on object    set to false to allow multiple tweens of same object from - |ZIM VEE| (default false) set to true to animate from obj properties to the current properties set on target set - |ZIM VEE| (default null) an object of properties to set on the target to start (but after the wait time) id - (default null) set to String to use with pauseAnimate(state, id) and stopAnimate(id) - thanks Sean Berwick for typo catch    series animate gets only one overall id - so no id per animation object events - (default false) set to true to receive an "animation" event on the target (or Container with a Container sequence) sequenceTarget - (default null) used internally for processing sequence animations dynamic - (default false) set to true to turn on dynamic speed animation via the percentSpeed property    setting perecentSpeed (default 100) will adjust the speed of the animation    to change speed with a Slider, Dial, MotionController, Accelerator, etc.    use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation drag - (default false) used with path in props to drag along path    This can be done while animating or while the animation is paused    Setting drag to true will set startPaused to true as well - set startPaused to false to animate and drag    With rewind set, drag lets you change the direction of an animation while animating    To turn drag off use the pause() method that animate() adds to the target clamp - (default true) used with dynamic and non-looping - set to false to let time pass beyond animation start and end startPaused - (default false - true if drag is true) Boolean - set to true to start the animation in the paused state    Good for animating manually with the percentComplete property clean - (default true) set to false to not delete animation ids etc. at end of animate()    Could then use percentComplete to position tween and pauseTween(false) to start animating again    Note... once tween has waited, percentComplete does not include wait period    So clean cannot be used to restart an animation with a wait after the animation has waited    Use the replayTween() method of the target to restart the latest animation on a target obj - (depreciated) the old version of props - kept for backwards compatibility seriesWait - (internal) used internally to hold setting relative values in correct series order sequenceWait - (internal) used internally to tie sequence in to the animation chain for pauseAnimate and stopAnimate rate - |ZIM VEE| - (default 1) change the speed at which the animation runs    set to .5 to run at half the speed and 2 to run at twice the speed    a ZIM VEE here will update each loop if loopPick is set to true    to change the speed (time) of the animation for each loop pauseOnBlur - (default true) as of ZIM 10.8.0, animate defaults to pause all animations on blur    blur is when the window is reduced or a different tab gains focus on the Browser    animate uses requestAninationFrame which slows down when the window is not in focus    this can cause animations to go out of sync - pauseOnBlur will prevent this    Can also set zim.pauseAnimateOnBlur=false or true to change this at any time easeAmount - |ZIM VEE| - (default null) set to change the tween effect    Ease amounts are as follows:    quad (default 2) - exponent - this is the default ZIM tween    cubic (default 3) - exponent    quart (default 4) - exponent    quint (default 5) - exponent    back (default 1.7) - strength    elastic (default 1) - amplitude - also see easeFrequency    linear, bounce, circ, sin - no affect    Note: used mostly with back and elastic (backIn, backOut, backInOut, etc.)    as setting the tween to quadInOut and then easeAmount to 5    would be the same as a quintInOut. easeFrequency - |ZIM VEE| - (default .3 elasticIn and elasticOut or .3*1.5 elasticInOut)    set to change the elastic ease frequency    so tween:"elasticOut", easeFrequency:.2 is a faster elastic    the time may also need to be increased or decreased as desired    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 PROPERTIES - zim.animate() adds the following properties to any object it animates:    animating - read-only - true when animating (including when waiting)       see paused (the opposite) and waiting properties    paused - read-only - when animating, paused is set to false       When paused with pauseAnimate() then paused is set to true       When stopped or before animation, paused is undefined or null       There is only one paused property per object so pausing a specific id       on an object with multiple animations will set paused to true       even if other animations are still running.       Pausing multiple objects should work fine.       See the tweenState property to test which ids are animating or paused    waiting - read-only - true when animation is waiting in wait, rewindWait, loopWait    tweenState - an object with tween ids as properties along with an all property (unless no tweens anymore)       these properties are true if animating and false if paused       if all is true then all are animating except for the ids that hold false       if all is false then all are not animating except for the ids that hold true       this is used for pauseAnimateOnBlur to keep track of animations to set back to true when un-blurring    percentSpeed - get or set the percent of the animation speed       100% is regular time, 50% is half as fast, 200% is twice as fast -100% is reverse normal speed, etc.       use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation    rate - changes the speed of the animation with 1 as a ratio       so 1 is the default speed (time), .5 would be half the speed, 2 twice the speed, etc.       does what percentSpeed does by changing the CreateJS timeScale property       this does not require dynamic to be set and is probably more efficient    percentComplete - get or set percent complete (0-100)       this allows you to scrub through an animation with a Slider, Dial, MotionController, etc.       should probably set startPaused parameter of animate() to true       Setting percentComplete to 100 may cause the animation to start at the beginning       but can set rewind:true and then set percentComplete to 50 - this will animate "backwards"       Can use animation event and a test of percentComplete to stop animation at a percentage       see https://zimjs.com/explore/squigglepart.html METHODS - see pauseAnimate() and stopAnimate() under the METHODS module    Also - zim.animate() adds a pause(state, time) method to the target IF dynamic is set to true (or drag is true)    This matches the pause() of Dynamo and Scroller and is used by Accelerator     state - (default true) true pauses and setting the state to false will unpause the dynamic animation     time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing    endTween(callType) - stops the animation and sets the target to the properties at the end of the tween - returns target for chaining       callType defaults to "all" which will run the call function and all the call functions in a series       setting callType to "none" will not run the call function and not run any call function in a series       setting callType to "main" will run the call function but not the call functions in a series       note: any remaining rewindCall and loopCall functions will not be called when using endTween()       note: endTween is complicated with ids, multiple animations, series, sequences, etc.       if there is a problem, try adding the target to a Container and controlling separate animations on container and target    resetTween() - sets the target back to the state at the start of the last animate() call - returns target for chaining       note: resetTween is complicated with ids, multiple animations, series, sequences, etc.       if there is a problem, try adding the target to a Container and controlling separate animations on container and target    replayTween() - resets and runs the last animate() on the target - calls the animate function with the same parameters as the last time - returns target for chaining       note: replayTween is complicated with ids, multiple animations, series, sequences, etc.       if there is a problem, try adding the target to a Container and controlling separate animations on container and target EVENTS - zim animate() will add an "animation" event to the target IF the events parameter is set to true (default is false)    or the "animation" event will be added to the Container for a sequence in a Container    or the "animation" event is added to the targets of an animation series    If dynamic is set to true, will dispatch a "pause" event when animate is paused - could be delayed but time passed in to pause() RETURNS the target for chaining (or null if no target is provided and run on zim with series) CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
EXPAND 48814 ▶︎ obj.stopAnimate(ids, toEnd)
obj.stopAnimate(ids, toEnd)
stopAnimate zim function - and Display object function DESCRIPTION Stops tweens with the passed in id or array of ids. If no id is passed then this will stop all tweens. The id is set when using animate() or a Sprite id parameter. An animation series will have the same id for all the animations inside. To stop a Shape tween, set an id in the animate call and use that id to stop the shape tween this is because the shape tween animation is not on the shape but on its many control points See also pauseAnimate() NOTE formerly stopZimAnimate - which still works but is depreciated NOTE calling stopAnimate(id) stops tweens with this id on all objects calling object.stopAnimate(id) stops tweens with this id on the target object NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// Note the override:true parameter
const rect = new Rectangle(200, 200, pink)
   .centerReg()
   .animate({obj:{scale:2}, time:2, loop:true, rewind:true, id:"scale"})
   .animate({obj:{rotation:360}, time:4, loop:true, ease:"linear", override:false});
rect.cursor = "pointer";
rect.on("click", ()=>{rect.stopAnimate()}); // will stop all tweens on rect
// OR
rect.on("click", ()=>{rect.stopAnimate("scale");}); // will stop scaling tween

stopAnimate("scale") // will stop tweens with the scale id on all objects

stopAnimate(); // will stop all animations
PARAMETERS ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite toEnd - (default false) set to true to call endTween() on targets to go to end of tween values    warning: setting to true will make targets to go to the end of all their animations    which could have the effect of ignoring ids for specific animations therefore stopping them as well PROPERTIES paused - zim.stopAnimate() will set paused property of stopped objects to null RETURNS null if run as stopAnimate() or the obj if run as obj.stopAnimate() CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 48901 ▶︎ obj.pauseAnimate(state, ids)
obj.pauseAnimate(state, ids)
pauseAnimate zim function - and Display object function DESCRIPTION Pauses or unpauses tweens with the passed in id or array of ids. If no id is passed then this will pause or unpause all tweens. The id is set as a animate, move, Sprite parameter. An animation series will have the same id for all the animations inside. To pause a Shape tween, set an id in the animate call and use that id to pause the shape tween this is because the shape tween animation is not on the shape but on its many control points See also stopAnimate NOTE formerly pauseZimAnimate - which still works but is depreciated NOTE calling pauseAnimate(true, id) pauses tweens with this id on all objects calling object.pauseAnimate(true, id) pauses tweens with this id on the target object 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});
circle.on("mousedown", ()=>{
   circle.pauseAnimate(!circle.paused);
});
EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// note the override:true parameter
const rect = new Rectangle(200, 200, pink)
   .centerReg()
   .animate({obj:{scale:2}, time:2, loop:true, rewind:true, id:"scale"})
   .animate({obj:{rotation:360}, time:4, loop:true, ease:"linear", override:false});
rect.cursor = "pointer";
rect.on("click", ()=>{rect.pauseAnimate()}); // will pause all tweens on rect
// OR
const paused = false;
rect.on("click", ()=>{
   paused = !paused;
   rect.pauseAnimate(paused, "scale");
}); // will toggle the pausing of the scaling tween

pauseAnimate(false, "scale") // will unpause tweens with the scale id on all objects

pauseAnimate(); // will pause all animations
PARAMETERS state - (default true) will pause tweens - set to false to unpause tweens ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite PROPERTIES paused - zim.stopAnimate() will set paused property of paused objects to the value of the state parameter RETURNS null if run as pauseAnimate() or the obj if run as obj.pauseAnimate() CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 48997 ▶︎ obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType, ticker, wait, pauseOnBlur)
obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType, ticker, wait, pauseOnBlur)
wiggle zim DisplayObject method DESCRIPTION Wiggles the property of the target object between a min and max amount to either side of the base amount in a time between the min and max time. Uses animate() so to pause or stop the wiggle use pauseAnimate and stopAnimate either on the object or using an id that you pass in as a parameter NOTE calling pauseAnimate(true, id) pauses tweens with this id on all objects calling target.pauseAnimate(true, id) pauses tweens with this id on the target object EXAMPLE
const ball = new Circle().centerReg();
ball.wiggle("x", ball.x, 10, 100, .5, 1);
// wiggles the ball 10-100 pixels to the left and right of center taking .5-1 s each time

ball.pauseAnimate(); // will pause the wiggle
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 NOTE if using wiggle as a zim function the first parameter is: target - the object to wiggle property - the property name as a String that will be width-indicatorLength-edgeLeft-edgeRight baseAmount - |ZIM VEE| the center amount for the wiggle - wiggle will go to each side of this center minAmount - |ZIM VEE| the min amount to change to a side of center maxAmount - |ZIM VEE| (default minAmount) the max amount to change to a side of center minTime - |ZIM VEE| (default 1) the min time in seconds to go from one side to the other (also see ZIM TIME constant) maxTime - |ZIM VEE| (default minTime) the max time in seconds to go from one side to the other (also see ZIM TIME constant) totalTime - (default forever) the total time in seconds until a stopAnimate is called on wiggle (also see ZIM TIME constant)    adds a wiggleTimeout property to the wiggle target that holds the setTimeout id for cancelation of totalTime type - (default "both") set to "positive" to wiggle only the positive side of the base or "negative" for negative side (or "both" for both) ease - (default "quadInOut") the ease to apply to the animation integer - (default false) tween to an integer value between min and max amounts id - (default random id) the id to use for pauseAnimate() or stopAnimate() startType - (default "both") set to "positive" to start wiggle in the positive side of the base or "negative" for negative side (or "both" for either) ticker - (default true) set to false if wiggling a value other than a Display object property wait - |ZIM VEE| - (default 0) time in seconds to wait between each wiggle - in addition to time set for wiggle pauseOnBlur - (default true) as of ZIM 10.8.0, animate defaults to pause all animations on blur    blur is when the window is reduced or a different tab gains focus on the Browser    animate uses requestAninationFrame which slows down when the window is not in focus    this can cause animations to go out of sync - pauseOnBlur will prevent this    Can also set zim.pauseOnBlur=false or true to change this at any time EVENTS if totalTime is set, target will dispatch a wigglestop event when the wiggle stops RETURNS target for chaining CLOSE ▲PAGE ▤CODE ▤VIDS
EXPAND 49116 ▶︎ obj.loop(call, reverse, step, start, end)
obj.loop(call, reverse, step, start, end)
loop zim DisplayObject method NOTE overrides earlier loop function with added container loop so that we can use earlier loop function without createjs DESCRIPTION The loop function (see the CODE module for loop) lets you loop through: 1. If you pass in a Number for obj then loop() does function call that many times 2. If you pass in an Array then loop() loops through the array 3. If you pass in an Object literal then loop() loops through the object 4. If you pass in an String then loop() loops through the letters 5. If you pass in an HTML NodeList or HTMLCollection then loop() loops through the tags The loop method lets you loop through a Container NOTE you can also pass the container as the first parameter of the loop function 6. The loop method loops through all the children of the container and does the function for each one passing the child, currentIndex, totalLoops, startIndex, endIndex, obj. So this is like for(i=0; i<obj; i++) {var child = obj.getChildAt(i);} loop 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 return a value to return out of the loop completely like a break (and return a result if desired) EXAMPLE
var container = new Container().alp(.1).addTo();
// LOOP FUNCTION - for more examples see the CODE Module loop() function
loop(1000, i=>{ // gets passed an index i, totalLoops 1000, startIndex 0, endIndex 999, obj 1000
   // make 1000 rectangles
   new Rectangle().loc(rand(stageW-100), rand(stageH-100), container);
});

// LOOP METHOD
// loop through children of the container
container.loop((child, i)=>{ // gets passed the child, index, total, start, end and obj
   child.x += i*2;
   child.y += i*2;
}, true); // true would reverse - so highest in stack to lowest, with i going from numChildren-1 to 0
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       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:    if the obj is a number then the first parameter is the index (no extra starting parameters given)    if the obj is an array then the first parameter is the element at the current index    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 a string then the first parameter is the letter at the current index    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 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 RETURNS any value returned from the loop - or true if no value is returned from a loop CLOSE ▲PAGE ▤CODE ▤BITS VIDS
-------------- GENERAL EXPAND 49276 ▶︎ obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly, simple)
obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly, simple)
scaleTo zim DisplayObject method DESCRIPTION Scales object to a percentage of another object's bounds and scale Percentage is from 0 - 100 (not 0-1). Also see sca(), fit() and Layout(). NOTE currently supports rotated objects only for FIT mode and not for FILL or FULL. For rotated objects in FILL or FULL, put the rotated object in a Container and then scaleTo() the container WARNING: an error is happening when using scaleTo() in a resize event in FULL mode. Use the simple:true parameter to avoid errors - but may not work with rotated nested objects EXAMPLE
circle.scaleTo(stage, 50); // scale to half the stageW
circle.scaleTo(stage, 10, 20); // fit within these scalings of the stage
PARAMETERS - supports DUO - parameters or single object with properties below boundObj - the object that we are scaling to with percents below percentX - (default no scaling) the scale in the x percentY - (default no scaling) the scale in the y    if both percentX and percentY are missing then assumes 100, 100 for each    and type defaults to FILL rather than FIT type - (default FIT or FILL if no percent is provided) the scaling to match bounds    Note: as of ZIM Cat 04 the constant FIT or the string "fit", etc. can be used    Note: as of ZIM NFT the default is FILL if no percent and FIT if a percent is provided    FIT: to keep proportion (aspect ratio) and fit within bounds (formerly "smallest")    FILL: to keep proportion (aspect ratio) and fill the bounds (formerly "biggest")    FULL: match bounds dimensions - may stretch object (formerly "both" or "stretch") boundsOnly - (default false) set to true to scale to the boundObj's bounds only - ignoring current boundObj scale simple - (default false) set to true to avoid errors specifically in resize event RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND 49382 ▶︎ obj.fit(left, top, width, height, type)
obj.fit(left, top, width, height, type)
fit zim DisplayObject method DESCRIPTION Scale an object to rectangular dimensions and center it. Actually scales and positions the object. Object must have bounds set (setBounds()). EXAMPLE
circle.fit(100, 100, 200, 300); // fits and centers in these dimensions
PARAMETERS supports DUO - parameters or single object with properties below left, top, width, height - (default stage dimensions) the rectangle to fit type - (default fit) the scaling to match rectangle dimensions    Note: as of ZIM Cat 04 the constant FIT or the string "fit", etc. can be used    FIT: to keep proportion (aspect ratio) and fit within rectangle    FILL: to keep proportion (aspect ratio) and fill the rectangle    FULL: match rectange dimensions - may stretch object RETURNS an Object literal with the new and old details (bX is rectangle x, etc.): {x:obj.x, y:obj.y, width:newW, height:newH, scale:scale, scaleX:scaleX, scaleY:scaleY, bX:left, bY:top, bWidth:width, bHeight:height} CLOSE ▲PAGE ▤CODE ▤BITS
EXPAND 49484 ▶︎ obj.boundsToGlobal(rect, flip, inside, globalObj)
obj.boundsToGlobal(rect, flip, inside, globalObj)
boundsToGlobal zim DisplayObject method DESCRIPTION Returns a createjs Rectangle of the bounds of object projected onto the stage. Handles scaling and rotation. If a createjs rectangle is passed in then it converts this rectangle from within the frame of the obj to a global rectangle. If flip (default false) is set to true it goes from global to local rect. Used by drag() and hitTestBounds() above - probably you will not use this directly. EXAMPLE
zog(circle.boundsToGlobal().x); // global x of circle
PARAMETERS rect - (default null) a rect inside an object which you would like mapped to global flip - (default false) make a global rect ported to local values inside - (default false) [NOT WORKING YET] make a rectangle from smallest projection rather than largest globalObj - (default stage) project rectangle into a Container other than the stage RETURNS a createjs Rectangle of the bounds of object projected onto the stage CLOSE ▲PAGE ▤CODE ▤
EXPAND 49564 ▶︎ obj.resetBounds(width||boundsX, height||boundsY, null||width, null||height, margin)
obj.resetBounds(width||boundsX, height||boundsY, null||width, null||height, margin)
resetBounds zim DisplayObject method DESCRIPTION Pass in no parameters to reset the bounds to calculated bounds Pass in width and height to set bounds to (0,0,width,height) Pass in x, y, width and height to set bounds to (0,0,width,height) NOTE a container made with new Container() has auto calculated bounds so the bounds (and width and height) adapt to surround any new children's bounds A container set with bounds to start: new Container(100, 200) has static bounds so the bounds (and width and height) will not change as new children are added Calling container.resetBounds() with no parameter sets dynamic calculated bounds Or you can reset the static bounds with parameters. EXAMPLE
const container = new Container();
const rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 500, 300 dynamic bounds

// OR

const container = new Container(100, 100);
const rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 100, 100 static bounds

container.resetBounds();
zog(container.width, container.height); // 500, 300 dynamic bounds

container.resetBounds({margin:20});
zog(container.bounds); // -20, 20, 540, 340 static with margin

container.resetBounds(200, 200);
rect.removeFrom();
zog(container.width, container.height); // 200, 200 static bounds
PARAMETERS supports DUO - parameters or single object with properties below width - (default null) null will set dynamic bounds and the object will take on bounds of children if a Container    setting a number for the width will set static bounds that do not change as objects are added height - (default width) the height of the bounds    if there is a width supplied but no height then the height is set to the width    setting these run obj.setBounds(boundsX,boundsY,width,height); OR if four parameters are set: boundsX - (default 0) the x of the bounds boundsY - (default 0) the y of the bounds width - (default null) the width of the bounds height - (default width) the height of the bounds    if there is a width supplied but no height then the height is set to the width    setting these run obj.setBounds(boundsX,boundsY,width,height); margin - (default 0) add margin to increase (or decrease if negative) bounds    if used, this makes the bounds static rather than dynamic. RETURNS object for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 49648 ▶︎ obj.copyMatrix(source)
obj.copyMatrix(source)
copyMatrix zim DisplayObject method DESCRIPTION Copies the transformation properties from the source to the obj (x, y, rotation, reg, scale and skew) NOTE used internally by animate() and setMask() for copying transform of shapes to mask also used in addDisplayMembers for clone() method EXAMPLE
circle.copyMatrix(circle2);
// circle will now match circle2 in x, y, rotation, scale and skew properties
PARAMETERS source - object from which the transform properties are being copied RETURNS obj for chaining CLOSE ▲PAGE ▤CODE ▤
EXPAND 49685 ▶︎ obj.duplicate(exact)
obj.duplicate(exact)
duplicate zim DisplayObject method DESCRIPTION clones the object but also any custom properties EXAMPLE
const circle = new Circle();
circle.custom = 345;
const circle2 = circle.duplicate();
zog(circle2.custom); // 345
RETURNS cloned object with cloned custom properties CLOSE ▲PAGE ▤CODE ▤
EXPAND 49719 ▶︎ obj.expand(padding, paddingVertical, paddingRight, paddingBottom)
obj.expand(padding, paddingVertical, paddingRight, paddingBottom)
expand zim DisplayObject method DESCRIPTION Adds a createjs hitArea to an object with an extra padding of padding. Good for making mobile interaction better on labels, buttons, etc. EXAMPLE
const circle = new Circle(10, red)
   .center()
   .expand(); // makes hit area bigger
circle.on("click", ()=>{zog("yes");});
PARAMETERS - accepts ZIM DUO - regular parameters or a single configuration object ** one parameter for all padding ** 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) 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 RETURNS obj for chaining CLOSE ▲PAGE ▤