import { Stage, Circle, Color } from "grraf";

// either an actual Canvas element or any containing html element can be supplied.
// if a container is supplied, a Canvas will be added to the container
const stage = new Stage(document.getElementById("container"));

// any built-in shape (or your custom class that extends Shape) can be created on the stage.
// initial shape properties can be provided (which are typed to the shape!)
const circle = stage.createShape(Circle, { radius: 5 });

// properties can also be updated "fluently"
circle.setColor(new Color(255, 40, 30))
    .setPosition({ x: 100, y: 200 });

// don't forget to draw!
stage.draw();
        

// (^ continued from previous code snippet ^)

//  animate a shape by defining transitions for a property (setting values for specific key-frames)
const animation = stage.animate(circle)
    // these values are also typed based on the property!!!
    .transition("fill",
        { 
             200: Color.white, 
            2500: Color.black, 
            4000: new Color(247, 24, 120) 
        }
    )
    .transition("radius",
        {
               0: 20, // at 0 seconds, radius is 20 pixels
            1500: 40, // at 1.5 seconds, the radius is 40 pixels (etc)
            2500: 80,
            4000: 20
        },
        TimingFunction.EaseInOutCubic // timing functions may be used
    )
    .create({ repeat: true }); // <- animation options can also be supplied (i.e. repeat);

animation.start();

// want to do something when you're done?
animation.then(() => { console.log("I'm done animating!"); });

// need to stop?
animation.cancel();