dbtek / hyperc

State driven high performance canvas graphics framework based on EaselJS and JSON Patch.

hyperc

State driven high performance canvas graphics framework based on EaselJS and JSON Patch.

Currently, hyperc is in alpha stage, things may change.

Highly inspired from choojs/choo.

Example

...
  <canvas id="stage" width="600" height="600"></canvas>
...

const Hyperc = require('hyperc')
const Component = require('hyperc/component')
const consecutive = require('consecutive')

var app = new Hyperc('#stage')

function circleStore (state, emitter) {
  state.circles = [
    {id: 1, x: 100, y: 100, radius: 100, color: 'DeepSkyBlue'}
  ]
  // set next id 2
  var nextId = consecutive(2)

  emitter.on('circle:add', item => {
    const id = nextId()
    state.circles.push(Object.assign({}, item, {id}))
    emitter.emit('render')
  })

  emitter.on('circle:moveItem', ({id, x, y}) => {
    var circle = state.circles.filter(c => c.id === id)[0]
    if (!circle) return
    circle.x = x
    circle.y = y
    emitter.emit('render')
  })
}

class Circle extends Component {
  static getItems (state) {
    return state.circles
  }

  identity (props) {
    return props.id
  }

  create (props) {
    var shape = new createjs.Shape()
    shape.graphics.beginFill(props.color).drawCircle(0, 0, props.radius).endFill()
    shape.x = props.x
    shape.y = props.y
    this.shape = shape
    // add newly created shape to component's container
    this.container.addChild(shape)
    shape.on('pressmove', e => {
      this.emit('circle:moveItem', {
        id: this.id,
        x: e.stageX,
        y: e.stageY
      })
    })
  }

  update (props, patch) {
    this.shape.x = props.x
    this.shape.y = props.y
    this.shape.graphics.clear().beginFill(props.color).drawCircle(0, 0, props.radius).endFill()
  }
}

// add store
app.use(circleStore)

// add renderer
app.render(Circle)