iwmlib/lib/stylus/main.js

91 lines
2.8 KiB
JavaScript
Raw Normal View History

2019-04-05 10:09:45 +02:00
import PIXIApp from '../../lib/pixi/app.js'
import Button from '../../lib/pixi/button.js'
import ButtonGroup from '../../lib/pixi/buttongroup.js'
import Stylus from './stylus.js'
class StylusApp extends PIXIApp {
sceneFactory() {
return new Stylus(this.renderer)
}
setup() {
let buttonColor = 0x666666
super.setup()
this.tools = new ButtonGroup({
type: 'checkbox',
margin: 0,
x: 16,
y: 16,
fill: buttonColor,
buttons: [{icon: 'edit',
iconColorActive: 0xFFFF00,
action: (event, button) => this.toggleEditMode() },
{icon: 'undo',
action: (event, button) => this.undo(button) },
{icon: 'redo',
action: (event, button) => this.redo(button) },
{icon: 'delete',
action: (event, button) => this.clear(button) }
]
})
this.scene.addChild(this.tools)
let defaults = { icon: 'brightness_1',
action: (event, button) => this.selectColor(button),
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0}
this.palette = new ButtonGroup( {
type: "radio",
x: 200,
y: 16,
margin: 0,
strokeAlpha: 0,
fill: buttonColor,
buttons: [
Object.assign({}, defaults, { iconColor: 0x111111,
iconColorActive: 0x111111}), // tooltip: "Black",
Object.assign({}, defaults, { iconColor: 0xFFFF00,
iconColorActive: 0xFFFF00}), // tooltip: "Yellow",
Object.assign({}, defaults, { iconColor: 0x00FF00,
iconColorActive:0x00FF00}), // tooltip: "Green",
Object.assign({}, defaults, { iconColor: 0xFF00FF,
iconColorActive:0xFF00FF}) // tooltip: "Violet",
]
})
this.scene.addChild(this.palette)
}
selectColor(button) {
this.scene.color = button.opts.iconColor
}
undo(button) {
this.scene.undo()
setTimeout(() => {
button.active = false}, 200)
}
redo(button) {
this.scene.redo()
setTimeout(() => {
button.active = false}, 200)
}
clear(button) {
this.scene.clearAll()
setTimeout(() => {
button.active = false}, 200)
}
}
const app = new StylusApp({ view: canvas })
window.app = app
app.setup()
app.run()