merge: upstream/dev-2.0 -> v2/style/format-utils

Author: sevenc-nanashi

.github/workflows/auto-close-issues.yml

@@ -0,0 +1,18 @@
+name: Close Linked Issues on PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - dev-2.0
+
+jobs:
+  close_issues:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close linked issues on non-default branches
+        uses: processing/branch-pr-close-issue@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: dev-2.0

contributor_docs/creating_libraries.md

@@ -282,6 +282,33 @@ if (typeof p5 !== undefined) {
 
 In the above snippet, an additional `if` condition is added around the call to `p5.registerAddon()`. This is done to support both direct usage in ESM modules (where users can directly import your addon function then call `p5.registerAddon()` themselves) and after bundling support regular `<script>` tag usage without your users needing to call `p5.registerAddon()` directly as long as they have included the addon `<script>` tag after the `<script>` tag including p5.js itself.
 
+## Accessing custom actions
+In certain circumstances, such as when you have a library that listens to a certain browser event, you may wish to run a function that your user defined on the global scope, much like how a `click` event triggers a user defined `mouseClicked()` function. We call these functions "custom actions" and your addon can access any of them through `this._customActions` object.
+
+The following addon snippet listens to the `click` event on a custom button element.
+```js
+function myAddon(p5, fn, lifecycles){
+  lifecycles.presetup = function(){
+    let customButton = this.createButton('click me');
+    customButton.elt.addEventListener('click', this._customActions.myAddonButtonClicked);
+  };
+}
+```
+
+In a sketch that uses the above addon, a user can define the following:
+```js
+function setup(){
+  createCanvas(400, 400);
+}
+
+function myAddonButtonClicked(){
+  // This function will be run each time the button created by the addon is clicked
+}
+```
+
+Please note that in the above example, if the user does not define `function myAddonButtonClicked()` in their code, `this._customActions.myAddonButtonClicked` will return `undefined`. This means that if you are planning to call the custom action function directly in your code, you should include an `if` statement check to make sure that `this._customActions.myAddonButtonClicked` is defined.
+
+Overall, this custom actions approach supports accessing the custom action functions in both global mode and instance mode with the same code, simplifying your code from what it otherwise may need to be.
 
 ## Next steps
 
@@ -315,6 +342,19 @@ fn.myMethod = function(){
 
 **p5.js library filenames are also prefixed with p5, but the next word is lowercase** to distinguish them from classes. For example, p5.sound.js. You are encouraged to follow this format for naming your file.
 
+**In some cases, you will need to make sure your addon cleans up after itself after a p5.js sketch is removed** by the user calling `remove()`. This means adding relevant clean up code in the `lifecycles.remove` hook. In most circumstances, you don't need to do this with the main exception being cleaning up event handlers: if you are using event handlers (ie. calling `addEventListeners`), you will need to make sure those event handlers are also removed when a sketch is removed. p5.js provides a handy method to automatically remove any registered event handlers with and internal property `this._removeSignal`. When registering an event handler, include `this._removeSignal` as follow:
+```js
+function myAddon(p5, fn, lifecycles){
+  lifecycles.presetup = function(){
+    // ... Define `target` ...
+    target.addEventListener('click', function() { }, {
+      signal: this._removeSignal
+    });
+  };
+}
+```
+With this you will not need to manually define a clean up actions for event handlers in `lifecycles.remove` and all event handlers associated with the `this._removeSignal` property as above will be automtically cleaned up on sketch removal.
+
 **Packaging**
 
 **Create a single JS file that contains your library.** This makes it easy for users to add it to their projects. We suggest using a [bundler](https://rollupjs.org/) for your library. You may want to provide options for both the normal JavaScript file for sketching/debugging and a [minified](https://terser.org/) version for faster loading.

docs/parameterData.json

@@ -325,7 +325,7 @@
     "windowResized": {
       "overloads": [
         [
-          "UIEvent?"
+          "Event?"
         ]
       ]
     },

package-lock.json

@@ -18,7 +18,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.0.5-rc.0",
+  "version": "2.0.5",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -38,7 +38,7 @@ const bundleSize = (name, sourcemap) => {
 
 const modules = ['math'];
 const generateModuleBuild = () => {
-  return modules.map((module) => {
+  return modules.map(module => {
     return {
       input: `src/${module}/index.js`,
       output: [
@@ -83,7 +83,7 @@ const generateModuleBuild = () => {
   });
 };
 
-rmSync("./dist", {
+rmSync('./dist', {
   force: true,
   recursive: true
 });

rollup.config.mjs

@@ -75,11 +75,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup(){
    *  createCanvas(100, 100);
    * };
-   * 
+   *
    * function draw() {
    *   background(200);
    *
@@ -101,11 +101,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup(){
    * createCanvas(100, 100);
    * }
-   * 
+   *
    * function draw() {
    *   background(200);
    *

src/accessibility/describe.js

@@ -71,7 +71,8 @@ function gridOutput(p5, fn){
           //if empty cell of location of shape is undefined
           if (!cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX]) {
             //fill it with shape info
-            cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] = fill;
+            cells[ingredients[x][y].loc.locY][ingredients[x][y].loc.locX] =
+              fill;
             //if a shape is already in that location
           } else {
             //add it

src/accessibility/gridOutput.js

@@ -81,11 +81,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup(){
    *  createCanvas(100, 100);
    * }
-   * 
+   *
    * function draw() {
    *   // Add the text description.
    *   textOutput();
@@ -106,11 +106,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup(){
    *  createCanvas(100, 100);
    * }
-   * 
+   *
    * function draw() {
    *   // Add the text description and
    *   // display it for debugging.
@@ -225,11 +225,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup() {
    *   createCanvas(100, 100);
    * }
-   * 
+   *
    * function draw() {
    *   // Add the grid description.
    *   gridOutput();
@@ -250,11 +250,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
-   * 
+   *
    * function setup(){
    *  createCanvas(100, 100);
    * }
-   * 
+   *
    * function draw() {
    *   // Add the grid description and
    *   // display it for debugging.
@@ -561,7 +561,8 @@ function outputs(p5, fn){
 
   //gets position of shape in the canvas
   fn._getPos = function (x, y) {
-    const { x: transformedX, y: transformedY } = this.worldToScreen(new p5.Vector(x, y));
+    const { x: transformedX, y: transformedY } =
+      this.worldToScreen(new p5.Vector(x, y));
     const canvasWidth = this.width;
     const canvasHeight = this.height;
     if (transformedX < 0.4 * canvasWidth) {

src/accessibility/outputs.js

@@ -51,7 +51,7 @@ import webgl from './webgl';
 webgl(p5);
 
 // typography
-import type from './type'
+import type from './type';
 type(p5);
 
 import { waitForDocumentReady, waitingForTranslator, _globalInit } from './core/init';