Skip to content
/ hyperc Public

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

License

Notifications You must be signed in to change notification settings

dbtek/hyperc

Repository files navigation

hyperc

Build Status Test Coverage Standard

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)

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages