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

Cannot use Easeljs inside webworker #1057

Open
nicolasgoudard opened this issue Dec 26, 2020 · 5 comments
Open

Cannot use Easeljs inside webworker #1057

nicolasgoudard opened this issue Dec 26, 2020 · 5 comments

Comments

@nicolasgoudard
Copy link

TODO

Hi
I am using the last version of CreateJS (EaselJS 1.0.0 )
We cannot use easeljs functionalites in Webworker
because it is impossible to include by the "importScripts " keyword : I think because the library use the javascript "window" or "document" objects that refer to the DOM
this is a serious problem if you want to do complex geometric figure position calculations in the background before refreshing the canvas without the user losing control
Best Regards

@danzen
Copy link
Contributor

danzen commented Dec 26, 2020

Hi @nicolasgoudard - will this help? https://github.com/CreateJS/EaselJS-NodeJS - oh, maybe not as it is built on-top of node-canvas. Hmmm. Perhaps someone else has a better answer.

We had someone who succeeded running without a DOM here - perhaps you can find some clues... danzen/zimjs#39 this was on the ZIM GitHub which runs on CreateJS.

@danzen
Copy link
Contributor

danzen commented Feb 7, 2021

@nicolasgoudard - did you find a work-around for this at all?

@jackpunt
Copy link

jackpunt commented Aug 18, 2024

FWIW, I did a patch to createjs.js (from a different branch/repo) to fix this problem.
(and have used it to run worker threads in Chrome browser)

Basically:
at the top of file insert this to define ww:

+ var ww; try { ww = window} catch { ww = false }

Then throughout (6 or 7 places), check for ww before accessing 'window' or 'document':

! 	var w=window, now=w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow;

becomes

! 	 var w=ww&&window, now=ww&&(w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow);

and

! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));

becomes

! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));

That being said, I have just discovered this repo; it appears that Dan has inherited it from lenny/gskinner?
So I've just started to see what all it does... Does it produce a ESM module?
(I adapted the albary3 the hacks to make an npm installable ESM)

Dan,
Let me know if you want contributions/PRs for this repo;
I got a bit lost with the transition to Slack a while back, but expect to be more present now.
AKA (Jeff Peck)

@jpeckj
Copy link

jpeckj commented Aug 18, 2024

FWIW, I did a patch (from a different branch/repo) to fix this problem.
(and have used it to run worker threads in Chrome browser)
Here is the context diff/patch against the composite createjs.js

That being said, I have just discovered this repo; it appears that Dan has inherited it from lenny/gskinner?
So I've just started to see what all it does... Does it produce a ES6 module?
(I did the hacks to make ES6 work on my repo)

*** 1413,1419 ****
  	 * @static
  	 * @private
  	 **/
! 	var w=window, now=w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow;
  	Ticker._getTime = function() {
  		return ((now&&now.call(w.performance))||(new Date().getTime())) - Ticker._startTime;
  	};
--- 1415,1421 ----
  	 * @static
  	 * @private
  	 **/
! 	 var w=ww&&window, now=ww&&(w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow);
  	Ticker._getTime = function() {
  		return ((now&&now.call(w.performance))||(new Date().getTime())) - Ticker._startTime;
  	};
***************
*** 3922,3928 ****
  	 * @protected
  	 * @type {CanvasRenderingContext2D}
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) {
  		Graphics._ctx = canvas.getContext("2d");
  		canvas.width = canvas.height = 1;
--- 3924,3930 ----
  	 * @protected
  	 * @type {CanvasRenderingContext2D}
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) {
  		Graphics._ctx = canvas.getContext("2d");
  		canvas.width = canvas.height = 1;
***************
*** 6346,6352 ****
  	 * @static
  	 * @protected
  	 **/
! 	var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); // prevent errors on load in browsers without canvas.
  	if (canvas.getContext) {
  		DisplayObject._hitTestCanvas = canvas;
  		DisplayObject._hitTestContext = canvas.getContext("2d");
--- 6348,6354 ----
  	 * @static
  	 * @protected
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas")); // prevent errors on load in browsers without canvas.
  	if (canvas.getContext) {
  		DisplayObject._hitTestCanvas = canvas;
  		DisplayObject._hitTestContext = canvas.getContext("2d");
***************
*** 7937,7943 ****
  		 * @property canvas
  		 * @type HTMLCanvasElement | Object
  		 **/
! 		this.canvas = (typeof canvas == "string") ? document.getElementById(canvas) : canvas;
  	
  		/**
  		 * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
--- 7939,7945 ----
  		 * @property canvas
  		 * @type HTMLCanvasElement | Object
  		 **/
! 		this.canvas = (typeof canvas == "string") ? ww&&document.getElementById(canvas) : canvas;
  	
  		/**
  		 * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
***************
*** 8608,8613 ****
--- 8610,8616 ----
  			nextStage&&nextStage._testMouseOver(clear, owner, eventTarget);
  			return;
  		}
+ 		if (this.stage.canvas) {
  		var o = this._getPointerData(-1);
  		// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.
  		if (!o || (!clear && this.mouseX == this._mouseOverX && this.mouseY == this._mouseOverY && this.mouseInBounds)) { return; }
***************
*** 8657,8662 ****
--- 8660,8666 ----
  		if (oldTarget != target) {
  			this._dispatchMouseEvent(target, "mouseover", true, -1, o, e, oldTarget);
  		}
+ 		}
  		
  		nextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);
  	};
***************
*** 11999,12005 ****
  	 * @type CanvasRenderingContext2D
  	 * @private
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }
  	
  	
--- 12001,12007 ----
  	 * @type CanvasRenderingContext2D
  	 * @private
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }
  	
  	
***************
*** 13361,13367 ****
  	 * @type CanvasRenderingContext2D
  	 * @protected
  	*/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) {
  		SpriteSheetUtils._workingCanvas = canvas;
  		SpriteSheetUtils._workingContext = canvas.getContext("2d");
--- 13363,13369 ----
  	 * @type CanvasRenderingContext2D
  	 * @protected
  	*/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) {
  		SpriteSheetUtils._workingCanvas = canvas;
  		SpriteSheetUtils._workingContext = canvas.getContext("2d");
***************
*** 13848,13854 ****
  			if (o.w > x) { x = o.w; }
  			y += o.h;
  			if (!o.h || !frames.length) {
! 				var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");
  				canvas.width = this._getSize(x,this.maxWidth);
  				canvas.height = this._getSize(y,this.maxHeight);
  				this._data.images[img] = canvas;
--- 13850,13856 ----
  			if (o.w > x) { x = o.w; }
  			y += o.h;
  			if (!o.h || !frames.length) {
! 				var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  				canvas.width = this._getSize(x,this.maxWidth);
  				canvas.height = this._getSize(y,this.maxHeight);
  				this._data.images[img] = canvas;
***************

@jackpunt
Copy link

I have cloned this repo, and will "soonish" have a PR for this.
I'm making a few other PRs and also building the ESM version, so expect it in a day or two.
[A: windowless Stage, B: on(,,, once=true) fix]

Dan: it would be helpful to publish a new "release" when CreateJS package is updated.
That is: the code version is 1.0.3, but the lib/ files are not updated, and no "released version" since 1.0.0
Hmm, I'll try to DM you on Slack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants