I can't click correctly if e.g. body has padding

https://github.com/vorg/plask-wrap

var plask = require('plask-wrap')

• Remove event listener
• Dispose of any created canvas/context
• Dispose of created textures

We need to add the callback handler

onWindowResize: function(e) {
}

Based on https://github.com/cvan/keyboardevent-key-polyfill

1There are couple of interdependent causes to that:

1. responsive: true overwrites scale on draw so i would propose that we default to false.
2. this.getScaledActiveArea multiples activeArea by scale
3. pixelRatio is not propagated from constructor to renderer

Currently i found two way to make gui render and be clickable

• responsive: false, scale: canvas.width/canvas.clientWidth
• responsive: true, pixelRatio set manually to canvas.width/canvas.clientWidth

So not sure if some of those things are bugs or i just don't know how to use them yet :)

Not sure how to enable retina rendering

Generalised to n tab/columns

glu.enableDepthReadAndWrite(false, false);

Should be followed by

glu.enableDepthReadAndWrite(true, true);

at the end of draw(). Otherwise

gl.depthMask is 0

When we modify the value from outside of GUI we should redraw (only if gui is visible)

Currently we depend on pex-sys/Window.addEventListener or manually calling gui.onMouseMove callbacks. It would be good to move to shared library between pex-sys,pex-gui and pex-cam.

Requirements:

• works with mouse and touch (ideally using PointerEvents)
• works in plask and borwser (can be via pex-gl.canvas)
• has clear prioritisation (e.g. gui/GUI before cam/Arcball)
• can cancel events or mark as handled (so Arcball doesn't move when i move the slider)
• can filter events / record
• allows implementing gestures
• can map/filter/transform events (e.g. limit mouse movement to a viewport)

Ideal scenario:

• create stream of events for a canvas
• pass stream to a Logger
• pass stream to GUI
• pass stream to Arcball
• on canvas.mousedown new event is added to the stream
• Logger responds to a change, console.logs the event and leaves it in the stream
• GUI responds to the change, if click is inside a slider the event is consumed, otherwise it's passed to the Arcball

Questions:

• am i reinventing the wheel and try to compensate for lack of event bubbling that I would have for free when using HTML based GUI?

If a column is not added tab's items appear at 0,0 and overflow the first tab in the tab bar

Currently we need to use gui.addTexture2D(name, tex) instead of gui.addParam(name, obj, propName). This means tex can't be null and the gui will not update when the texture object is replaced with another one.

Use case: shadows maps of lights that initialize with shadowCasting off but then get it on.

e.g.

gui.addTexture2D("Shadow Map", sunLight._shadowMap, { flipY: true });

I find it more intuitive that gui is controlled with scale. Current responsive:true often causes gui to scale. pixelRatio seems to do nothing? What's the correct way to use those 3 params?

Hey Marcin, probably more of a documentation issue.

Was working off the audio.Audio example (https://github.com/vorg/pex-examples/blob/master/src/audio.Audio/main.js) and found that it was misleading as my variant only needed the progress slider and when everything else was stripped off, the slider stops updating.

Found that I needed to assign the slider, e.g.:

init: function() {
  …
  this.slider = this.gui.addParam('Progress', this, 'progress', { min: 0, max: 1}, this.onSeek.bind(this));
  …
}

And subsequently in the rendering cycle, declare that it is dirty:

draw: function() {
  …
  this.progress = this.audio.duration ? this.audio.currentTime / this.audio.duration : 0;
  this.slider.dirty = true;
  …
}