iwmlib/lib/pixi/test.js

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()
    }

    setup() {}

    draw() {
        this.clear()
        var color = this.selected ? this.selectedColor : 0xffffff
        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.
        this.delegate = new InteractionMapper(container, this, {
            capturePointerEvents: false
        })
    }

    findTarget(event, local, global) {
        return this
    }

    setupToolbar() {
        this.toolbar = new PIXI.Graphics()
        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)
        )
        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)
        graphics.lineStyle(2, 0xffffff, 1)
        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()
        this.renderer.plugins.interaction.mapPositionToPoint(
            local,
            point.x,
            point.y
        )
        return local
    }

    extractLocal(event) {
        return this.mapPositionToPoint(Events.extractPoint(event))
    }

    capture(event) {
        if (typeof event.mouseDownSubstitute != 'undefined') return false
        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)
        } else {
            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') {
                    graphics.beginFill(0xcc0000, 0.5)
                } else {
                    graphics.beginFill(0xcccccc, 0.5)
                }
                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
    }
}