Feature/canvas object event handlers

[sc0ttj]

Interactive canvas improvements

• new: adds event handlers to "canvas objects": myShape.on('click', someFunc) (etc)
• new: use the ctx.create() API to create your own custom "interactive canvas objects"
• new: set any valid canvas styles as properties on your "canvas objects" before calling myShape.draw()
• new: optional syntax for using "canvas objects" - pass in params as a single object

Event handlers

// new API - event handlers

// log an objects params on "click"," hover", "drag", "release"
myRect.on('click', props => console.log(props)); 
myRect.on('drag', props => console.log(props)); 

Define custom "canvas objects"

// new API - define custom "canvas objects" with `ctx.create(name, drawFunc)`

// define a new type of "interactive canvas object", called "coolShape"
ctx.create('coolShape', function(x, y, z, foo) {
  [ ctx, ctx.shadowCtx ].forEach(c => {
    // draw stuff here
    c.rect(x, y, w, h);
    c.lineTo(x, y);
    // etc
  });
});

// instantiate a "coolShape" object that can be hovered over, clicked, etc 
const myNewShape = ctx.create.coolShape(x, y, z, foo);

// use it the same as any other "canvas object" 
myNewShape.update(...);
myNewShape.draw(...);
myNewShape.on('hover', props => console.log(props));

myShape.adjust()

• new canvas object method .adjust(): alternative way to update a "canvas object"

  myStar.adjust(1, -1, 0)   // adjust the current props values by numbers given

  Attach styles to your "canvas objects" as props:

new API - alternative way to update "canvas object" styles:

// define style properties on the canvas object itself, ready to draw later
myStar.lineWidth = 3;
myStar.fillStyle = '#c00';
// ...etc

myStar.draw(styleObj)      // `styleObj` is optional, but will override above styles, if given

Alternative syntax, provides some extra features

new API - give "canvas objects" props as an object, instead of params list:

• the props will be added your "canvas object" as getters/setters:

  // define as usual
  ctx.create('fooShape', (x, y, r) => {
  // draw your shape(s)
  });
  
  // instantiate with the props as an object, instead of a parameter list
  const myShape = ctx.create.fooShape({ x: 10, y: 10, r: 50 });
  myShape.props   // returns { x: 10, y: 10, r: 50 }
  
  // now we have extra getters/setters, one for each prop (x, y, r)
  myShape.r       // return myShape.props.r
  myShape.r = 50; // update myShape.props.r
  
  // note - because of how we created it, `myShape` only accepts 
  // an object of props, instead of parameter list
  myShape.update({ x: 0, y: 0, r: 50 }); // update all props
  myShape.update({ r: 50 });             // update specific props
  myShape.adjust({ r: 10 });             // adjust specific props

Fixes

• fixed: apply "canvas object" styles (only) when needed

• fixed: don't draw "canvas object" on initial creation