More work on supporting hybrid contexts.

Relates to #1252
This commit is contained in:
Jürg Lehni 2017-03-19 16:03:29 +01:00
parent 89a953dde0
commit 7a2ccc6d44
7 changed files with 93 additions and 72 deletions

View file

@ -80,7 +80,7 @@
"jsdom": false, "jsdom": false,
"jsdom/lib/jsdom/living/generated/utils": false, "jsdom/lib/jsdom/living/generated/utils": false,
"source-map-support": false, "source-map-support": false,
"./dist/node/window.js": false, "./dist/node/self.js": false,
"./dist/node/extend.js": false "./dist/node/extend.js": false
}, },
"keywords": [ "keywords": [

View file

@ -17,14 +17,19 @@
// their shared scope. // their shared scope.
/* global document:true, window:true */ /* global document:true, window:true */
// Create a window variable valid in the paper.js scope, that points to the // Set up a local `window` variable valid across the full the paper.js scope,
// native window in browsers and the emulated JSDom one in node.js // pointing to the native window in browsers and the one provided by JSDom in
// In workers, and on Node.js when no Canvas is present, `window` is null (but // Node.js
// `self` is defined), so we can use the validity of the local window object to // In workers and on Node.js, the global `window` variable is null. In workers,
// detect a worker-like context in the library. // `self` is defined as a `WorkerGlobalScope` object, while in Node.js, `self`
// Make sure `self` always points to a window object, also on Node.js. // is null.
self = self || require('./node/window.js'); // When `self` is null (Node.js only). './node/self.js' is required to provide
// a window object through JSDom and assigned it to `self`.
// When `self.window` and therefore the local `window` is still null after that,
// we know that we are in a worker-like context. This check is used all across
// the library, see for example `View.create()`.
// NOTE: We're not modifying the global `self` here. We receive its value passed // NOTE: We're not modifying the global `self` here. We receive its value passed
// to the paper.js function scope, and this is the one that is modified here. // to the paper.js function scope, and this is the one that is modified here.
self = self || require('./node/self.js');
var window = self.window, var window = self.window,
document = self.document; document = self.document;

View file

@ -43,7 +43,7 @@ if (typeof window === 'object') {
include('../node_modules/stats.js/build/stats.min.js'); include('../node_modules/stats.js/build/stats.min.js');
include('paper.js'); include('paper.js');
} }
} else { } else if (typeof require !== 'undefined') {
// Node.js based loading through Prepro.js: // Node.js based loading through Prepro.js:
var prepro = require('prepro/lib/node'), var prepro = require('prepro/lib/node'),
// Load the default browser-based options for further amendments. // Load the default browser-based options for further amendments.

View file

@ -15,7 +15,7 @@
// - Various Node Canvas methods, routed through from HTMLCanvasElement: // - Various Node Canvas methods, routed through from HTMLCanvasElement:
// toBuffer, pngStream, createPNGStream, jpgStream, createJPGStream // toBuffer, pngStream, createPNGStream, jpgStream, createJPGStream
module.exports = function(window) { module.exports = function(self) {
var Canvas; var Canvas;
try { try {
Canvas = require('canvas'); Canvas = require('canvas');
@ -25,14 +25,14 @@ module.exports = function(window) {
// - On the browser, this corresponds to a worker context. // - On the browser, this corresponds to a worker context.
// - On Node.js, it basically means the canvas is missing or not working // - On Node.js, it basically means the canvas is missing or not working
// which can be treated the same way. // which can be treated the same way.
delete window.window; delete self.window;
console.info( console.info(
'Unable to load Canvas module. Running in a headless context.'); 'Canvas module not found, running in a headless context.');
return; return;
} }
var idlUtils = require('jsdom/lib/jsdom/living/generated/utils'), var idlUtils = require('jsdom/lib/jsdom/living/generated/utils'),
HTMLCanvasElement = window.HTMLCanvasElement; HTMLCanvasElement = self.HTMLCanvasElement;
// Add fake HTMLCanvasElement#type property: // Add fake HTMLCanvasElement#type property:
Object.defineProperty(HTMLCanvasElement.prototype, 'type', { Object.defineProperty(HTMLCanvasElement.prototype, 'type', {

View file

@ -57,8 +57,8 @@ module.exports = function(paper) {
paper.PaperScope.inject({ paper.PaperScope.inject({
createCanvas: function(width, height, type) { createCanvas: function(width, height, type) {
// Do not use CanvasProvider.getCanvas(), since we may be changing // Do not use CanvasProvider.getCanvas(), since we may be changing
// the underlying node-canvas and don't want to release it after // the underlying node-canvas when requesting PDF support, and don't
// back into the pool. // want to release it after back into the pool.
var canvas = paper.document.createElement('canvas'); var canvas = paper.document.createElement('canvas');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;

73
src/node/self.js Normal file
View file

@ -0,0 +1,73 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
// Node.js emulation layer of browser environment, based on jsdom with node-
// canvas integration.
var self;
try {
var jsdom = require('jsdom');
// Create our document and window objects through jsdom.
/* global document:true, window:true */
var document = jsdom.jsdom('<html><body></body></html>', {
// Use the current working directory as the document's origin, so
// requests to local files work correctly with CORS.
url: 'file://' + process.cwd() + '/',
features: {
FetchExternalResources: ['img', 'script']
}
});
self = document.defaultView;
require('./canvas.js')(self);
// Define XMLSerializer shim, to emulate browser behavior.
// Effort to bring XMLSerializer to jsdom:
// https://github.com/tmpvar/jsdom/issues/1368
/*jshint -W082 */
function XMLSerializer() {
}
XMLSerializer.prototype.serializeToString = function(node) {
if (!node)
return '';
// Fix a jsdom issue where all SVG tagNames are lowercased:
// https://github.com/tmpvar/jsdom/issues/620
var text = node.outerHTML,
tagNames = ['linearGradient', 'radialGradient', 'clipPath',
'textPath'];
for (var i = 0, l = tagNames.length; i < l; i++) {
var tagName = tagNames[i];
text = text.replace(
new RegExp('(<|</)' + tagName.toLowerCase() + '\\b', 'g'),
function(match, start) {
return start + tagName;
});
}
return text;
};
self.XMLSerializer = XMLSerializer;
} catch(e) {
console.info(
'JSDom module not found, running in a headless context without DOM.');
self = {
navigator: {
userAgent: 'Node.js (' + process.platform + '; U; rv:' +
process.version + ')'
}
};
}
module.exports = self;

View file

@ -1,57 +0,0 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
// Node.js emulation layer of browser environment, based on jsdom with node-
// canvas integration.
var jsdom = require('jsdom');
// Create our document and window objects through jsdom.
/* global document:true, window:true */
var document = jsdom.jsdom('<html><body></body></html>', {
// Use the current working directory as the document's origin, so
// requests to local files work correctly with CORS.
url: 'file://' + process.cwd() + '/',
features: {
FetchExternalResources: ['img', 'script']
}
}),
window = document.defaultView;
require('./canvas.js')(window);
// Define XMLSerializer and DOMParser shims, to emulate browser behavior.
// Effort to bring this to jsdom: https://github.com/tmpvar/jsdom/issues/1368
function XMLSerializer() {
}
XMLSerializer.prototype.serializeToString = function(node) {
if (!node)
return '';
var text = node.outerHTML;
// Fix a jsdom issue where all SVG tagNames are lowercased:
// https://github.com/tmpvar/jsdom/issues/620
var tagNames = ['linearGradient', 'radialGradient', 'clipPath', 'textPath'];
for (var i = 0, l = tagNames.length; i < l; i++) {
var tagName = tagNames[i];
text = text.replace(
new RegExp('(<|</)' + tagName.toLowerCase() + '\\b', 'g'),
function(match, start) {
return start + tagName;
});
}
return text;
};
window.XMLSerializer = XMLSerializer;
module.exports = window;