https://github.com/dbtek/hyperc

State driven high performance canvas graphics framework based on EaselJS and JSON Patch.
https://github.com/dbtek/hyperc

canvas easeljs graphics json-patch state

Last synced: about 5 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/dbtek/hyperc
• Owner: dbtek
• License: mit
• Created: 2017-11-21T15:58:47.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T08:20:17.000Z (almost 2 years ago)
• Last Synced: 2024-11-05T13:56:36.195Z (13 days ago)
• Topics: canvas, easeljs, graphics, json-patch, state
• Language: JavaScript
• Homepage:
• Size: 2.08 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
hyperc

===

[![Build Status](https://img.shields.io/circleci/project/github/dbtek/hyperc.svg?style=flat-square) ](https://circleci.com/gh/dbtek/hyperc)  [ ![Test Coverage](https://img.shields.io/codecov/c/token/bDcjOrSeM2/github/dbtek/hyperc/master.svg?style=flat-square) ](https://codecov.io/github/dbtek/hyperc)  [ ![Standard](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://codecov.io/github/dbtek/hyperc)

State driven high performance canvas graphics framework based on [EaselJS](https://createjs.com/easeljs) and [JSON Patch](https://github.com/angus-c/just).

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

Highly inspired from [choojs/choo](https://github.com/choojs/choo).

### Example

```html

...

  

...

```

```js

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)

```