91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
|
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()
|
||
|
|
|