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

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

constHyperc=require('hyperc')constComponent=require('hyperc/component')constconsecutive=require('consecutive')varapp=newHyperc('#stage')functioncircleStore(state,emitter){state.circles=[{id: 1,x: 100,y: 100,radius: 100,color: 'DeepSkyBlue'}]// set next id 2varnextId=consecutive(2)emitter.on('circle:add',item=>{constid=nextId()state.circles.push(Object.assign({},item,{id}))emitter.emit('render')})emitter.on('circle:moveItem',({id, x, y})=>{varcircle=state.circles.filter(c=>c.id===id)[0]if(!circle)returncircle.x=xcircle.y=yemitter.emit('render')})}classCircleextendsComponent{staticgetItems(state){returnstate.circles}identity(props){returnprops.id}create(props){varshape=newcreatejs.Shape()shape.graphics.beginFill(props.color).drawCircle(0,0,props.radius).endFill()shape.x=props.xshape.y=props.ythis.shape=shape// add newly created shape to component's containerthis.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.xthis.shape.y=props.ythis.shape.graphics.clear().beginFill(props.color).drawCircle(0,0,props.radius).endFill()}}// add storeapp.use(circleStore)// add rendererapp.render(Circle)