ZIM JavaScript Canvas Framework

To use PreloadJS type definitions in your TypeScript project, install the @types/preloadjs package using npm. This package provides type safety for the PreloadJS library, which is part of the CreateJS suite.

npm install --save @types/preloadjs

To use TypeScript type definitions for the CreateJS library in your project, install the @types/createjs-lib package using npm. This package provides types for the global createjs namespace.

npm install --save @types/createjs-lib

To set up a ZIM project using NPM and Vite for vanilla JavaScript or TypeScript, follow these steps:

1. Initialize Project: Run npm create vite in your terminal and follow the prompts (e.g., select Vanilla and JavaScript or TypeScript).
2. Navigate to Project: cd yourProject
3. Install ZIM: npm i zimjs
4. Start Development Server: npm run dev
5. Build for Production: npm run build (this generates a dist/ folder with minified code).

To add TypeScript type definitions for EaselJS to your project, install the @types/easeljs package via npm. This package provides type safety for the EaselJS library, which is part of the CreateJS suite.

npm install --save @types/easeljs

In Angular, ZIM is used with TypeScript.

1. Import Frame and other components directly from zimjs.
2. Initialize the frame in the ngAfterContentInit lifecycle hook.
3. Call this.frame?.dispose() in the ngOnDestroy hook to clean up resources.

import { AfterContentInit, Component, OnDestroy } from '@angular/core';
import { Frame, Circle } from 'zimjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, AfterContentInit {
  frame: Frame | undefined;

  ngOnDestroy(): void {
    this.frame?.dispose();
  }

  ngAfterContentInit(): void {
    this.frame = new Frame({
      scaling: FIT,
      width: 600,
      height: 300,
      ready: () => {
        new Circle(50, red).center().drag();
      },
    });
  }

  title = 'ZIM in Angular';
}

To use SoundJS with TypeScript, install the type definitions via npm. This package provides type definitions for SoundJS 0.6.0.

Dependencies:

• createjs-lib
• preloadjs

Note on usage: The definitions are structured for a global environment where the createjs namespace is available.

npm install --save @types/soundjs

For the fastest way to start coding without a build tool or NPM, you can use ZIM via CDN or a simple HTML template:

1. Go to zimjs.com/code.
2. Click the copy button.
3. Paste the code into an empty .html file.
4. Open the file in any web browser.

Alternatively, you can use the ZIM Editor for an online development experience.

When integrating ZIM with Svelte, initialize the zim.Frame inside the onMount lifecycle hook and ensure you call frame.dispose() in the onDestroy hook.

• TypeScript: Define the frame type (e.g., let frame: Frame;) and import zim.
• JavaScript: Use zim.zimplify() to enable global commands like new Frame() and new Circle() without the namespace prefix.

// Svelte with zim namespace and TypeScript
<script lang="ts">  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";

  let frame: Frame;
  onMount(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color: light,
      ready: () => {
          new zim.Circle(50, red).center().drag();
      }
    });
  });

  onDestroy(() => {
    frame.dispose();
  });
</script>

<main>
  <div id="zim"></div>
</main>

To use TweenJS with TypeScript, install the type definitions package using npm. This package provides type definitions for TweenJS 0.6.0.

npm install --save @types/tweenjs

For TypeScript projects, import specific classes from zimjs instead of using zimplify(). Replace the contents of src/main.ts with the following template:

// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity
import {Frame, Circle} from "zimjs";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, light, dark, ready);

function ready() {
    // given F (Frame), S (Stage), W (width), H (height)
    // put code here
    
    new Circle(100, purple)
        .center()
        .drag();
        
} // end ready