From e1a51f858ad78a9b1a9daf289d98c33ee1ce6101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Tue, 26 Jan 2016 20:02:23 +0100 Subject: [PATCH] More work on unified version for browsers and node. Relates to #739 --- dist/paper-node.js | 1 - gulp/tasks/build.js | 9 ++- gulp/tasks/load.js | 8 +-- package.json | 3 +- src/core/PaperScope.js | 2 +- src/export.js | 25 +++------ src/init.js | 18 ++++++ src/item/Raster.js | 2 +- src/load.js | 14 ++++- src/node.js | 113 ------------------------------------- src/node/extend.js | 125 +++++++++++++++++++++++++++++++++++++++++ src/node/window.js | 71 +++++++++++++++++++++++ src/options.js | 1 - src/paper.js | 21 ++----- src/view/CanvasView.js | 89 +---------------------------- 15 files changed, 249 insertions(+), 253 deletions(-) delete mode 120000 dist/paper-node.js create mode 100644 src/init.js delete mode 100644 src/node.js create mode 100644 src/node/extend.js create mode 100644 src/node/window.js diff --git a/dist/paper-node.js b/dist/paper-node.js deleted file mode 120000 index 37e257c7..00000000 --- a/dist/paper-node.js +++ /dev/null @@ -1 +0,0 @@ -../src/load.js \ No newline at end of file diff --git a/gulp/tasks/build.js b/gulp/tasks/build.js index 5db38e3a..19a53ac9 100644 --- a/gulp/tasks/build.js +++ b/gulp/tasks/build.js @@ -23,8 +23,7 @@ var gulp = require('gulp'), // object, merged in with the options required above. var buildOptions = { full: { paperScript: true }, - core: { paperScript: false }, - node: { environment: 'node', paperScript: true } + core: { paperScript: false } }; var buildNames = Object.keys(buildOptions); @@ -32,9 +31,13 @@ var buildNames = Object.keys(buildOptions); gulp.task('build', buildNames.map(function(name) { return 'build:' + name; - }) + }).concat(['build:copy']) ); +gulp.task('build:copy', function() { + gulp.src(['src/node/*.js']).pipe(gulp.dest('dist/node')); +}); + buildNames.forEach(function(name) { gulp.task('build:' + name, ['clean:build:' + name, 'minify:acorn'], function() { return gulp.src('src/paper.js') diff --git a/gulp/tasks/load.js b/gulp/tasks/load.js index b1ceff99..228f0610 100644 --- a/gulp/tasks/load.js +++ b/gulp/tasks/load.js @@ -16,13 +16,9 @@ var gulp = require('gulp'), gulp.task('load', ['clean:load'], function() { return gulp.src('src/load.js') - .pipe(symlink('dist/paper-full.js')) - .pipe(symlink('dist/paper-node.js')); + .pipe(symlink('dist/paper-full.js')); }); gulp.task('clean:load', function() { - return del([ - 'dist/paper-full.js', - 'dist/paper-node.js' - ]); + return del([ 'dist/paper-full.js', 'dist/node/**' ]); }); diff --git a/package.json b/package.json index 396193a2..2dd6d60d 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,7 @@ "Jürg Lehni (http://scratchdisk.com)", "Jonathan Puckey (http://studiomoniker.com)" ], - "main": "dist/paper-node.js", - "browser": "dist/paper-full.js", + "main": "dist/paper-full.js", "scripts": { "lint": "jshint src" }, diff --git a/src/core/PaperScope.js b/src/core/PaperScope.js index f83a421b..04cc29d9 100644 --- a/src/core/PaperScope.js +++ b/src/core/PaperScope.js @@ -72,7 +72,7 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{ CanvasProvider.release(ctx); } if (!this.agent) { - var user = navigator.userAgent.toLowerCase(), + var user = window.navigator.userAgent.toLowerCase(), // Detect basic platforms, only mac internally required for now. os = (/(darwin|win|mac|linux|freebsd|sunos)/.exec(user)||[])[0], platform = os === 'darwin' ? 'mac' : os, diff --git a/src/export.js b/src/export.js index b2cd6cc3..a2828545 100644 --- a/src/export.js +++ b/src/export.js @@ -13,8 +13,6 @@ // First add Base and a couple of other objects that are not automatically // exported to exports (Numerical, Key, etc), then inject all exports into // PaperScope, and create the initial paper object, all in one statement: -/*#*/ if (__options.environment == 'browser') { - // NOTE: Do not create local variable `var paper` since it would shield the // global one in the whole scope. @@ -23,26 +21,17 @@ paper = new (PaperScope.inject(Base.exports, { enumerable: true, Base: Base, Numerical: Numerical, - Key: Key -}))(); - -/*#*/ } else if (__options.environment == 'node') { - -paper = new (PaperScope.inject(Base.exports, { - // Mark fields as enumerable so PaperScope.inject can pick them up - enumerable: true, - Base: Base, - Numerical: Numerical, - // Export dom/node.js stuff too - XMLSerializer: XMLSerializer, - DOMParser: DOMParser, - HTMLCanvasElement: HTMLCanvasElement, - Image: Image, + Key: Key, + // Export jsdom document and window too, for Node.js document: document, window: window }))(); -/*#*/ } // __options.environment == 'node' +// If we're on node, require some additional functionality now (PaperScript +// support in require() with sourceMaps, and exportFrames / exportImage on +// CanvasView) +if (paper.agent.node) + require('./node/extend')(paper); // https://github.com/umdjs/umd if (typeof define === 'function' && define.amd) { diff --git a/src/init.js b/src/init.js new file mode 100644 index 00000000..e9a8160a --- /dev/null +++ b/src/init.js @@ -0,0 +1,18 @@ +/* + * 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 based environment, based on node-canvas +// and jsdom. + +/* global document:true, window:true */ +window = window || require('./node/window'); +var document = window.document; diff --git a/src/item/Raster.js b/src/item/Raster.js index a78cbf74..71beaf8c 100644 --- a/src/item/Raster.js +++ b/src/item/Raster.js @@ -343,7 +343,7 @@ var Raster = Item.extend(/** @lends Raster# */{ } // src can be an URL or a DOM ID to load the image from - image = document.getElementById(src) || new Image(); + image = document.getElementById(src) || new window.Image(); if (crossOrigin) image.crossOrigin = crossOrigin; if (image.complete) { diff --git a/src/load.js b/src/load.js index 1f9816b6..3ec951e7 100644 --- a/src/load.js +++ b/src/load.js @@ -40,23 +40,31 @@ if (typeof window === 'object') { load(root + 'src/load.js'); } else { include('options.js'); + // Load constants.js, required by the on-the-fly preprocessing: + include('constants.js'); + // Automatically load stats.js while developing. + include('../node_modules/stats.js/build/stats.min.js'); include('paper.js'); } } else { // Node.js based loading through Prepro.js: var prepro = require('prepro/lib/node.js'), // Load the default browser-based options for further amendments. - // Step out and back into src, if this is loaded from dist/paper-node.js + // Step out and back into src, in case this is loaded from + // dist/paper-node.js options = require('../src/options.js'); // Override Node.js specific options. options.version += '-load'; - options.environment = 'node'; options.load = true; prepro.setup(function() { // Return objects to be defined in the preprocess-scope. // Note that this would be merge in with already existing objects. - return { __options: options }; + // We're defining window here since the paper-scope argument is only + // available in the included scripts when the library is actually built. + return { __options: options, window: null }; }); + // Load constants.js, required by the on-the-fly preprocessing: + prepro.include('../src/constants.js'); // Load Paper.js library files. prepro.include('../src/paper.js'); } diff --git a/src/node.js b/src/node.js deleted file mode 100644 index 25b3910f..00000000 --- a/src/node.js +++ /dev/null @@ -1,113 +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 based environment, based on node-canvas -// and jsdom. - -/* global document:true, window:true, navigator:true, HTMLCanvasElement:true, - Image:true */ - -var jsdom = require('jsdom'), - idlUtils = require('jsdom/lib/jsdom/living/generated/utils'), - fs = require('fs'), - path = require('path'); - -// Expose global browser variables and create a document and a window using -// jsdom. -var document = jsdom.jsdom('', { - features: { - FetchExternalResources : ['img', 'script'] - } - }), - window = document.defaultView, - navigator = window.navigator, - HTMLCanvasElement = window.HTMLCanvasElement, - Image = window.Image; - -Base.each( - ['pngStream', 'createPNGStream', 'jpgStream', 'createJPGStream'], - function(key) { - this[key] = function() { - var impl = this._canvas ? this : idlUtils.implForWrapper(this), - canvas = impl && impl._canvas; - return canvas[key].apply(canvas, arguments); - }; - }, - HTMLCanvasElement.prototype); - -// Define XMLSerializer and DOMParser shims, to emulate browser behavior. -// TODO: Put this into a simple node module, with dependency on jsdom? -function XMLSerializer() { -} - -XMLSerializer.prototype.serializeToString = function(node) { - var text = jsdom.serializeDocument(node); - // Fix a jsdom issue where all SVG tagNames are lowercased: - // https://github.com/tmpvar/jsdom/issues/620 - var tagNames = ['linearGradient', 'radialGradient', 'clipPath']; - for (var i = 0, l = tagNames.length; i < l; i++) { - var tagName = tagNames[i]; - text = text.replace( - new RegExp('(<|', { + features: { + FetchExternalResources : ['img', 'script'] + } + }), + window = document.defaultView; + +['pngStream', 'createPNGStream', 'jpgStream', 'createJPGStream'].forEach( + function(key) { + this[key] = function() { + var impl = this._canvas ? this : idlUtils.implForWrapper(this), + canvas = impl && impl._canvas; + return canvas[key].apply(canvas, arguments); + }; + }, + window.HTMLCanvasElement.prototype); + +// Define XMLSerializer and DOMParser shims, to emulate browser behavior. +// TODO: Put this into a simple node module, with dependency on jsdom? +function XMLSerializer() { +} + +XMLSerializer.prototype.serializeToString = function(node) { + var text = jsdom.serializeDocument(node); + // Fix a jsdom issue where all SVG tagNames are lowercased: + // https://github.com/tmpvar/jsdom/issues/620 + var tagNames = ['linearGradient', 'radialGradient', 'clipPath']; + for (var i = 0, l = tagNames.length; i < l; i++) { + var tagName = tagNames[i]; + text = text.replace( + new RegExp('(<|