I am aware the documentation includes a small section on missing events but I am unabl

Here's an example: <div class="highlight highlight-text-html-basic notranslate pos

Please elaborate on how to deal with browser resizing about vue-p5 HOT 3 CLOSED

kinrany commented on May 20, 2024

Please elaborate on how to deal with browser resizing

from vue-p5.

Comments (3)

Kinrany commented on May 20, 2024 1

Here's an example:

<div id="app">
  <!-- `windowresized` is lowercase! -->
  <vue-p5 v-on="{setup, draw, windowresized}"></vue-p5>
</div>

new Vue({
  el: '#app',
  data() {
    return { text: 'Hello p5!' };
  },
  methods: {
    setup(sketch) {
      sketch.resizeCanvas(200, 100);
    },
    draw(sketch) {
      sketch.background('green');
      sketch.text(this.text, 20, 20);
    },
    windowresized(sketch) {                          // also lowercase!
      const width = sketch.windowWidth;
      const height = sketch.windowHeight;
      this.text = `size: (${width}, ${height})`;
    }
  }
});

Codepen: https://codepen.io/Kinrany/pen/zYGoxNK

Note the gotcha: it must be lowercase windowresized instead of windowResized.

I even made the same mistake in the documentation, haha. Thanks for making me aware of this.

Also note that windowResized is already defined (the full list of supported events is available here), so there's no need to use additionalEvents in this case. (Btw, does the name of the prop make sense?)

from vue-p5.