Parse

File Parse events.js

This tree is parsed live from the source file.

Classes

  • {{ item.name }}

    • {{ key }}

Not Classes

{{ getTree() }}

Comments

{{ getTreeComments() }}

Source

            
class Events {
    constructor(parent=undefined) {
        this.parent = parent
    }

    emit(name, detail) {
        return this.getParent().dispatchEvent(new CustomEvent(name, {detail}))
    }

    on(name, handler, props) {
        return this.getParent().addEventListener(name, handler, props)
    }

    getParent() {
        return this.parent == undefined? window: this.parent;
    }
}


const events = new Events(this)

/* Events should be a lot easier

// listen to this point.
point.event.mousedown(handler)

// Listen to the stage events.
stage.event.mousedown(handler)

//Autohook:
Stage {
    onMousedown(ev) {
        //...
    }
}
ev = new Events(stage)
ev.hook(stage)

We can embelesh the list or emit, with additonal params -
such as passive events on a mouse wheel (on listen)
or appending data to an event on emit.

*/

function getMethodsOf(obj){
    const methods = {}
    Object.getOwnPropertyNames( Object.getPrototypeOf(obj) ).forEach(methodName => {
        methods[methodName] = obj[methodName]
    })
    return methods
}

;addEventListener('stage:prepare', function(event){
    let {id, canvas, stage} = event.detail
    console.log('event', stage)
    if(stage.autoEvents !== false)  {
        /* default true for event.wake() */
        stage.events.wake()
    }
})


class StageEvents {
    /* StageEvents apply `.events` to the stage.
    If `autoListen=true` (default). any method matching `on[EventName]` is
    hooked.

        class MyStage extends Stage {
            autoListen = true

            onClick(ev){
                // raw ev event
            }
        }

    Standard `on` and `emit` (listen/dispatch) for events:

        stage.on('eventName', stage.handle)

    */
    autoListen = true

    constructor(stage=undefined) {
        this.stage = stage
        this._hooked = false
    }

    wake(){
        if(this.getAutoListen()) {
            (!this._hooked) && this.hook(this.stage)
        }
    }

    getAutoListen() {
        return this.autoListen !== false && this.stage.autoListen !== false
    }

    hook(entity) {
        // console.log('Auto listen.')
        const methods = getMethodsOf(entity);
        for(let k in methods){
            // console.log('Checking', k)
            if(k.toLowerCase().startsWith('on')) {
                let f = entity[k].bind(entity)
                let eventName = k.slice(2).toLowerCase()
                // console.log('Autohooking event', eventName)//, f)
                this.on(eventName,f)
            }
        }
        this._hooked = true
    }

    on(name, handler, props) {
        return this.getEventParent().addEventListener(name, handler, props)
    }

    emit(name, detail) {
        return this.getEventParent().dispatchEvent(new CustomEvent(name, {detail}))
    }

    getEventParent() {
        return this.stage.canvas
    }

    receiverFunction(prop) {
        return (handler, props) => {
            // console.log('prop', prop, handler)
            return this.on(prop, handler, props)
        }
    }
}


const stageHandler = function(parent) {

    const unknownAttrProxyHandler = {
        get(target, prop, receiver) {
            // debugger;
            if(target[prop] !== undefined) {
                // return target[prop].apply(target, arguments)
                return Reflect.get.apply(target,arguments);
            }
            // console.log('Return receiver')
            return target.receiverFunction(prop)
        }
    };

    const target = new StageEvents(parent)
    const eventNameHandlerProxy = new Proxy(target, unknownAttrProxyHandler);
    return eventNameHandlerProxy;
}


Polypoint.head.install(StageEvents)

Polypoint.head.lazierProp('Stage', function events(){
    return stageHandler(this)
})
copy