hyperc

    2.0.0 • Public • Published

    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)

    Keywords

    none

    Install

    npm i hyperc

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Last publish

    Collaborators

    • dbtek