Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add before/after preload and setup #6433

Merged
merged 14 commits into from
Oct 4, 2023
4 changes: 4 additions & 0 deletions contributor_docs/creating_libraries.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ Method names you can register and unregister include the following list. Note th
* **post** — Called at the end of `draw()`.
* **remove** — Called when `remove()` is called.
* **init** — Called when the sketch is first initialized, just before the sketch initialization function (the one that was passed into the `p5` constructor) is executed. This is also called before any global mode setup, so your library can add anything to the sketch and it will automatically be copied to `window` if global mode is active.
* **beforePreload** — Called before the `preload()` function is executed.
* **afterPreload** — Called after the `preload()` function is executed.
* **beforeSetup** — Called before the `setup()` function is executed.
* **afterSetup** — Called after the `setup()` function is executed.

More to come shortly, lining up roughly with this list:
https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods
Expand Down
18 changes: 18 additions & 0 deletions src/core/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,20 @@ class p5 {
this._events.devicemotion = null;
}

// Function to invoke registered hooks before or after events such as preload, setup, and pre/post draw.
p5.prototype.callRegisteredHooksFor = function (hookName) {
const target = this || p5.prototype;
const context = this._isGlobal ? window : this;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, looks like tests are failing because this is undefined. You might need to make this a method on p5.prototype and then call this.callRegisteredHooksFor(...) as a method instead of a function?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your help!

if (target._registeredMethods.hasOwnProperty(hookName)) {
const methods = target._registeredMethods[hookName];
for (const method of methods) {
if (typeof method === 'function') {
method.call(context);
}
}
}
};

this._start = () => {
// Find node if id given
if (this._userNode) {
Expand All @@ -241,6 +255,7 @@ class p5 {

const context = this._isGlobal ? window : this;
if (context.preload) {
this.callRegisteredHooksFor('beforePreload');
// Setup loading screen
// Set loading screen into dom if not present
// Otherwise displays and removes user provided loading screen
Expand Down Expand Up @@ -286,6 +301,7 @@ class p5 {
if (loadingScreen) {
loadingScreen.parentNode.removeChild(loadingScreen);
}
this.callRegisteredHooksFor('afterPreload');
if (!this._setupDone) {
this._lastTargetFrameTime = window.performance.now();
this._lastRealFrameTime = window.performance.now();
Expand Down Expand Up @@ -322,6 +338,7 @@ class p5 {
};

this._setup = () => {
this.callRegisteredHooksFor('beforeSetup');
// Always create a default canvas.
// Later on if the user calls createCanvas, this default one
// will be replaced
Expand Down Expand Up @@ -369,6 +386,7 @@ class p5 {
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
this._updateAccsOutput();
}
this.callRegisteredHooksFor('afterSetup');
};

this._draw = () => {
Expand Down
8 changes: 2 additions & 6 deletions src/core/structure.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import p5 from './main';

/**
* Stops p5.js from continuously executing the code within <a href="#/p5/draw">draw()</a>.
* If <a href="#/p5/loop">loop()</a> is called, the code in <a href="#/p5/draw">draw()</a>
Expand Down Expand Up @@ -471,9 +470,6 @@ p5.prototype.redraw = function(n) {
if (typeof context.setup === 'undefined') {
context.scale(context._pixelDensity, context._pixelDensity);
}
const callMethod = f => {
f.call(context);
};
for (let idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
context.resetMatrix();
if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
Expand All @@ -483,14 +479,14 @@ p5.prototype.redraw = function(n) {
context._renderer._update();
}
context._setProperty('frameCount', context.frameCount + 1);
context._registeredMethods.pre.forEach(callMethod);
this.callRegisteredHooksFor('pre');
this._inUserDraw = true;
try {
context.draw();
} finally {
this._inUserDraw = false;
}
context._registeredMethods.post.forEach(callMethod);
this.callRegisteredHooksFor('post');
}
}
};
Expand Down
Loading