CanvasBag

Welcome to CanvasBag Pages.

CanvasBag graphic library written in TypeScript is your way to create application easy and quickly. It provides toolkit of basic shapes like circle, rectangle, triangle or custom shapes defined by points in array. You can compose more complex object with containers. It's in your hands!

CanvasBag is still under development. Some function doesn't have to work correctly. If you have any idea how to improve it, please contact me on GitHub.

RENDER

Render is the core part of the library. The purpose of render is to render the scene object to your canvas. First thing you have to do is define canvas in your html page and import CanvasBag library. Example below using jade.

     html
         head
             script(type="text/javascript", src="../bundle.js")
             script(type="text/javascript", src="connectionBasic.js")
         body
             canvas(id="connectionBasic1", width="1000", height="800", style="float:left;")
             script(type='text/javascript').
                  window.onload = renderSample();

The only thing to connect canvas with render is the next part of code:

Example

     var canvas = document.getElementById("connectionBasic1");
     var render = new CanvasBag.Render();
     render.setCanvas(canvas);

That's all. Now you can add scene, container, shapes and other things to render. All objects inside render will be automatically rendered as soon as possible.

Available RENDER methods

• setRenderingInterval(interval:number) - Define how ofteren render re-render the canvas
• setCanvas(canvas) - Connect render with canvas on the page
• addScene(scene: CanvasBag.Scene) - The main scene of render. Only one scene per canvas can be defined.
• render() - Trigger manually render of canvas (re-rendered only if scene is invalidated)

SCENE

Scene hold all others objects. All rendered objects in canvas. In present only one scene is permitted per render and canvas. Code below present, how you can create simple scene and add it to render.

Example

    var scene = new CanvasBag.Scene.Basic();
    render.addScene(scene);

Nothing more is necessary to add scene to canvas. Now it is important to introduce methods of SCENE object.

Available SCENE methods

• addShape(shape: BasicShapePrototype) - Add all objects that extends BasicShapePrototype. Currently circle, rectangle, triangle, custom shape.
• addContainer(container: BasicContainerPrototype)
• addSprite(sprite: BasicSpritePrototype) - Add image or text directly to scene.
• addConnection(connection: BasicConnectionPrototype)
• removeConnectionById(connectionId: string)
• getNodeById(nodeId: string):CanvasBag.Node - Every object of scene has automatically generated UUID. You can select any object in scene throught this ID and change its properties. All nodes in scene are accessible throught Node interface.
• getConnectionById(connectionId: string):BasicConnectionPrototype - Same behaviour like getNodeById method, but for connections.
• getAllConnections():Array<BasicConnectionPrototype>
• getAllSprites():Array<BasicSpritePrototype>
• toJSON():string - It is possible to convert whole scene to JSON object.
• `fromJSON(object: string) - It is possible to load definition of scene and of all nodes throught json.
• invalidateScene() - Cause re-render canvas as soon as possible.

CONTAINERS

Sometimes (almost always :-) ) it is necessarily to group compose simple objects to create something more interesting. It is possible throught containers. Container provides consistent behaviour of all added shapes for you.

Container properties

    export interface BasicContainerProperties {
        name: string;
        position: Point;
    }

Example

     var containerBasic = new CanvasBag.BasicContainer.SimpleContainer();
     containerBasic.setProperties({
         name: "containerBasic1",
         position: {x: 500, y: 200}
     });

     var circle = new CanvasBag.BasicShapes.Circle();
     circle.setBaseProperties({
         position: {x: 0, y: 0},
         radius: 5,
         borderColor: 'green',
         borderWidth: 1,
         backgroundColor: 'blue',
         draggable: false
     });

     containerBasic.addShape(circle)
     scene.addContainer(containerBasic);

I think this code is self-explaining. There is more examples in distribution package. Looks to dist-samples directory.

Available CONTAINER methods

• setProperties
• getProperties
• contains
• move
• addElement
• getElements

SHAPES

There are predefined basic shapes. Circle, Rectangle, Triangle. You can define your own shapes throught custom shape. All shapes extends BasicShapeProperties

Common shapes properties

    export interface BasicShapeProperties {
        position: Point;
        width: number;
        height: number;
        borderColor: Base.Color;
        backgroundColor?: Base.Color;
        borderWidth: number;
        draggable: boolean;
        joinable: boolean;
        base64Background?: string;
    }

Circle properties

    export interface CircleShapeProperties extends BasicShapeProperties {
       radius: number;
    }

Rectangle properties

    export interface RectangleShapeProperties extends BasicShapeProperties {
    }

Custom shape properties

   export interface CustomShapeProperties extends BasicShapeProperties {
       points: Array<Point>;
   }

Triangle properties

    export interface TriangleShapeProperties extends BasicShapeProperties {
       points: Array<Point>;
    }

How to create a shape and add to scene is presented in SCENE chapter.

Available SHAPES methods

• setProperties
• getProperties
• contains
• move
• setOnClickListener
• click
• isDraggable
• setDraggable
• isJoinAble
• setJoinAble
• setBackgroundImage

SPRITES

Will be described soon.

CONNECTIONS

Will be described soon.