iwmlib/lib/pixi/test.js

289 lines
6.9 KiB
JavaScript
Raw Normal View History

2019-03-21 09:57:27 +01:00
import PIXIApp from './app.js'
/**
*
*/
export class Command extends PIXI.Graphics {
/*** Abstract base class for record, play, and stop commands. ***/
constructor(tools, selectedColor, shape) {
super()
this.tools = tools
this.shape = shape
this.selected = false
this.disabled = false
this.selectedColor = selectedColor
this.draw()
this.setup()
}
2019-07-18 12:26:39 +02:00
setup() {}
2019-03-21 09:57:27 +01:00
draw() {
this.clear()
2019-07-18 12:26:39 +02:00
var color = this.selected ? this.selectedColor : 0xffffff
2019-03-21 09:57:27 +01:00
this.lineStyle(0)
this.beginFill(color, 1)
this.drawShape(this.shape)
this.endFill()
}
select() {
this.selected = true
this.draw()
}
deselect() {
this.selected = false
this.draw()
}
toggle() {
this.selected = !this.selected
this.draw()
}
stop() {
this.selected = false
this.draw()
}
}
export class RecordCommand extends Command {
/*** Records events for later replay. ***/
setup() {
this.recorder = new EventRecorder()
}
toggle() {
super.toggle()
if (!this.selected) {
this.recorder.stopRecording()
}
}
recordEvent(event) {
this.recorder.record(event)
}
normalize(value, limit) {
return value / limit
}
normalizeX(value) {
return this.normalize(value, window.innerWidth)
}
normalizeY(value) {
return this.normalize(value, window.innerHeight)
}
whileNotStopped() {
return this.tools.play.selected
}
startReplay() {
let whileCondition = this.whileNotStopped.bind(this)
this.recorder.startReplay(whileCondition, () => this.tools.play.stop())
}
}
export class PlayCommand extends Command {
/*** Plays recorded events. ***/
toggle() {
super.toggle()
if (this.selected && this.tools.record.recorder.recorded.length > 0) {
this.tools.startReplay()
}
}
}
export class StopCommand extends Command {
/*** Stops recording and playing. ***/
toggle() {
super.toggle()
this.tools.record.stop()
this.tools.play.stop()
setTimeout(this.deselect.bind(this), 500)
}
}
export class RecorderTools extends PIXI.Container {
constructor(renderer) {
super(renderer)
this.renderer = renderer
this.setupToolbar()
this.replayRate = 100.0
this.onReset = null
this.touchGraphics = new PIXI.Graphics()
this.showTouches()
}
setup(container) {
// Since this delegate might shadow another delegate, we mus avoid
// capturing PointerEvents.
2019-07-18 12:26:39 +02:00
this.delegate = new InteractionMapper(container, this, {
capturePointerEvents: false
})
2019-03-21 09:57:27 +01:00
}
findTarget(event, local, global) {
return this
}
setupToolbar() {
this.toolbar = new PIXI.Graphics()
2019-07-18 12:26:39 +02:00
this.record = new RecordCommand(
this,
0xcc0000,
new PIXI.Circle(0, 0, 16)
)
this.play = new PlayCommand(
this,
0x0000cc,
new PIXI.Polygon(0, 16, 32, 16 + 16, 0, 16 + 32, 0, 16)
)
this.stop = new StopCommand(
this,
0x0000cc,
new PIXI.Rectangle(0, 0, 32, 32)
)
2019-03-21 09:57:27 +01:00
this.toolbar.addChild(this.record).position.set(44, 48)
this.toolbar.addChild(this.play).position.set(44 + 44, 16)
this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32)
this.updateToolbar()
this.addChild(this.toolbar)
}
updateToolbar() {
var graphics = this.toolbar
graphics.clear()
graphics.beginFill(0x000000, 0.5)
2019-07-18 12:26:39 +02:00
graphics.lineStyle(2, 0xffffff, 1)
2019-03-21 09:57:27 +01:00
graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8)
graphics.endFill()
}
onMouseWheel(event) {
console.log('onMouseWheel missing')
}
onPress(point) {
if (this.record.containsPoint(point)) {
this.record.toggle()
}
if (this.play.containsPoint(point)) {
this.play.toggle()
}
if (this.stop.containsPoint(point)) {
this.stop.toggle()
if (this.onReset) {
this.onReset()
}
}
}
mapPositionToPoint(point) {
let local = new PIXI.Point()
2019-07-18 12:26:39 +02:00
this.renderer.plugins.interaction.mapPositionToPoint(
local,
point.x,
point.y
)
2019-03-21 09:57:27 +01:00
return local
}
extractLocal(event) {
return this.mapPositionToPoint(Events.extractPoint(event))
}
capture(event) {
2019-07-18 12:26:39 +02:00
if (typeof event.mouseDownSubstitute != 'undefined') return false
2019-03-21 09:57:27 +01:00
return true
}
startReplay() {
if (this.onReset) {
this.onReset()
}
this.record.startReplay()
}
showTouches() {
this.addChild(this.touchGraphics)
}
recordEvent(event) {
if (this.record.selected) {
this.record.recordEvent(event)
}
}
onStart(event, interaction) {
let local = this.extractLocal(event)
if (!this.toolbar.containsPoint(local)) {
this.recordEvent(event)
this.updateTouchGraphics(interaction)
}
}
onMove(event, interaction) {
let local = this.extractLocal(event)
if (!this.toolbar.containsPoint(local)) {
this.recordEvent(event)
this.updateTouchGraphics(interaction)
}
}
onEnd(event, interaction) {
let local = this.extractLocal(event)
if (this.toolbar.containsPoint(local)) {
this.onPress(local)
2019-07-18 12:26:39 +02:00
} else {
2019-03-21 09:57:27 +01:00
this.recordEvent(event)
this.updateTouchGraphics(interaction)
}
}
updateTouchGraphics(interaction) {
let current = interaction.current
let graphics = this.touchGraphics
if (graphics != null) {
graphics.clear()
for (let key of current.keys()) {
if (interaction.ended.has(key)) {
continue
}
let p = current.get(key)
if (key == 'mouse') {
2019-07-18 12:26:39 +02:00
graphics.beginFill(0xcc0000, 0.5)
2019-03-21 09:57:27 +01:00
} else {
2019-07-18 12:26:39 +02:00
graphics.beginFill(0xcccccc, 0.5)
2019-03-21 09:57:27 +01:00
}
graphics.drawCircle(p.x, p.y, 20)
}
graphics.endFill()
}
}
}
export class AppTest extends PIXIApp {
constructor(canvas, container) {
super({ view: canvas, backgroundColor: 0x000000 })
this.container = container
}
sceneFactory() {
return new RecorderTools(this.renderer)
}
setup() {
super.setup()
this.scene.setup(this.container)
}
run(reset = null) {
this.scene.onReset = reset
console.log('Running AppTest')
return this
}
}