Commit 630eb142 authored by Marat Dreizin's avatar Marat Dreizin

Improved build flow and also added support of webpack/browserify

parent 07715d15
...@@ -15,77 +15,45 @@ module.exports = function(grunt) { ...@@ -15,77 +15,45 @@ module.exports = function(grunt) {
banner: "<%= banner %>" banner: "<%= banner %>"
}, },
dist: { dist: {
src: "<%= build.dist.dest %>", src: "<%= concat.dist.dest %>",
dest: "../raphael-min.js" dest: "../raphael-min.js"
} }
}, },
build: { replace: {
options: {
banner: "<%= banner %>"
},
dist: { dist: {
dest: "../raphael.js", options: {
patterns: [{
match: "VERSION",
replacement: "<%= pkg.version %>"
}]
},
files: [{
expand: true,
flatten: true,
src: "<%= concat.dist.dest %>",
dest: "../"
}]
}
},
concat: {
dist: {
dest: "../<%= pkg.name %>.js",
src: [ src: [
"../eve/eve.js", "../eve/eve.js",
"raphael.core.js", "raphael.core.js",
"raphael.svg.js", "raphael.svg.js",
"raphael.vml.js" "raphael.vml.js",
"raphael.amd.js"
] ]
} }
} }
}); });
// These plugins provide necessary tasks. // These plugins provide necessary tasks.
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-replace");
// Special concat/build task to handle Raphael's build requirements
grunt.registerMultiTask(
"build",
"Concatenate source, remove individual closures, embed version",
function() {
var data = this.data,
name = data.dest,
src = data.src,
options = this.options({
banner: ""
}),
// Start with banner
compiled = options.banner,
svgorvmlRegex = /\.(svg|vml)\.js/,
closureRegex = /window\.Raphael.*\(R\)\s*\{/,
closureEndRegex = /\}\(window\.Raphael\);\s*$/,
exposeRegex = /(\r?\n\s*\/\/\s*EXPOSE(?:\r|\n|.)*\}\)\);)/;
// Concatenate src
src.forEach(function(path) {
var source = grunt.file.read(path);
var match = svgorvmlRegex.exec(path);
// If either SVG or VML,
// remove the closure and add an early return if not required
if (match) {
source = "\n\n" +
source.replace(closureRegex,
"(function(){\n" +
" if (!R." + match[1] + ") {\n" +
" return;\n" +
" }"
)
.replace( closureEndRegex, "})();" );
// Add source before EXPOSE line
compiled = compiled.replace(exposeRegex, source + "$1");
} else {
compiled += source;
}
});
grunt.file.write( name, compiled );
grunt.log.ok("Built file " + name);
});
// Default task. // Default task.
grunt.registerTask("default", ["build", "uglify"]); grunt.registerTask("default", ["concat", "replace", "uglify"]);
}; };
require(['../raphael'], function(Raphael){ 'use strict';
require.config({
paths: {
raphael: '../raphael'
}
});
require(['raphael'], function(Raphael) {
var paper = Raphael(0, 0, 640, 720, "container"); var paper = Raphael(0, 0, 640, 720, "container");
// Work here
}); });
\ No newline at end of file
{ {
"name": "raphael", "name": "raphael",
"version": "2.1.2", "version": "2.1.3",
"description": "JavaScript Vector Library", "description": "JavaScript Vector Library",
"main": "raphael.js", "main": "raphael.js",
"scripts": { "scripts": {
...@@ -16,6 +16,8 @@ ...@@ -16,6 +16,8 @@
"gitHead": "52bff469f60988f1391e8b3d7cb5349163df8ba1", "gitHead": "52bff469f60988f1391e8b3d7cb5349163df8ba1",
"devDependencies": { "devDependencies": {
"grunt": "~0.4.1", "grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0" "grunt-contrib-concat": "^0.5.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-replace": "^0.8.0"
} }
} }
// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ Raphaël @VERSION - JavaScript Vector Library │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2008-2012 Dmitry Baranovskiy (http://raphaeljs.com) │ \\
// │ Copyright © 2008-2012 Sencha Labs (http://sencha.com) │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license.│ \\
// └────────────────────────────────────────────────────────────────────┘ \\
(function (glob, factory) {
if (typeof define === "function" && define.amd) {
define("raphael", ["raphael.core", "raphael.svg", "raphael.vml"], function(Raphael) {
return (glob.Raphael = factory(Raphael));
});
} else if (typeof exports === "object") {
var raphael = require("raphael.core");
require("raphael.svg");
require("raphael.vml");
module.exports = factory(raphael);
} else {
glob.Raphael = factory(glob.Raphael);
}
}(window || this, function (Raphael) {
return Raphael.ninja();
}));
\ No newline at end of file
// ┌────────────────────────────────────────────────────────────────────┐ \\ // ┌────────────────────────────────────────────────────────────────────┐ \\
// │ "Raphaël 2.1.2" - JavaScript Vector Library │ \\ // │ Raphaël @@VERSION - JavaScript Vector Library │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\ // ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://raphaeljs.com) │ \\ // │ Core Module │ \\
// │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\ // ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\ // │ Licensed under the MIT (http://raphaeljs.com/license.html) license.│ \\
// └────────────────────────────────────────────────────────────────────┘ \\ // └────────────────────────────────────────────────────────────────────┘ \\
(function (glob, factory) { (function (glob, factory) {
// AMD support
if (typeof define === "function" && define.amd) { if (typeof define === "function" && define.amd) {
// Define as an anonymous module define("raphael.core", ["eve"], function(eve) {
define(["eve"], function( eve ) { return factory(eve);
return factory(glob, eve);
}); });
} else if (typeof exports === "object") {
module.exports = factory(require("eve"));
} else { } else {
// Browser globals (glob is window) glob.Raphael = factory(glob.eve);
// Raphael adds itself to window
factory(glob, glob.eve || (typeof require == "function" && require('eve')) );
} }
}(this, function (window, eve) { }(window || this, function (eve) {
/*\ /*\
* Raphael * Raphael
[ method ] [ method ]
...@@ -86,7 +84,7 @@ ...@@ -86,7 +84,7 @@
} }
} }
} }
R.version = "2.1.2"; R.version = "@@VERSION";
R.eve = eve; R.eve = eve;
var loaded, var loaded,
separator = /[, ]+/, separator = /[, ]+/,
...@@ -126,7 +124,7 @@ ...@@ -126,7 +124,7 @@
| var c = paper.circle(10, 10, 10).attr({hue: .45}); | var c = paper.circle(10, 10, 10).attr({hue: .45});
| // or even like this: | // or even like this:
| c.animate({hue: 1}, 1e3); | c.animate({hue: 1}, 1e3);
| |
| // You could also create custom attribute | // You could also create custom attribute
| // with multiple parameters: | // with multiple parameters:
| paper.customAttributes.hsb = function (h, s, b) { | paper.customAttributes.hsb = function (h, s, b) {
...@@ -3076,7 +3074,7 @@ ...@@ -3076,7 +3074,7 @@
[ method ] [ method ]
** **
* Adds or retrieves given value asociated with given key. * Adds or retrieves given value asociated with given key.
** **
* See also @Element.removeData * See also @Element.removeData
> Parameters > Parameters
- key (string) key to store data - key (string) key to store data
...@@ -3184,8 +3182,8 @@ ...@@ -3184,8 +3182,8 @@
- mcontext (object) #optional context for moving handler - mcontext (object) #optional context for moving handler
- scontext (object) #optional context for drag start handler - scontext (object) #optional context for drag start handler
- econtext (object) #optional context for drag end handler - econtext (object) #optional context for drag end handler
* Additionaly following `drag` events will be triggered: `drag.start.<id>` on start, * Additionaly following `drag` events will be triggered: `drag.start.<id>` on start,
* `drag.end.<id>` on end and `drag.move.<id>` on every move. When element will be dragged over another element * `drag.end.<id>` on end and `drag.move.<id>` on every move. When element will be dragged over another element
* `drag.over.<id>` will be fired as well. * `drag.over.<id>` will be fired as well.
* *
* Start event and start handler will be called in specified context or in context of the element with following parameters: * Start event and start handler will be called in specified context or in context of the element with following parameters:
...@@ -3487,7 +3485,7 @@ ...@@ -3487,7 +3485,7 @@
* Paper.setViewBox * Paper.setViewBox
[ method ] [ method ]
** **
* Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by * Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by
* specifying new boundaries. * specifying new boundaries.
** **
> Parameters > Parameters
...@@ -3960,7 +3958,7 @@ ...@@ -3960,7 +3958,7 @@
elproto.getPath = function () { elproto.getPath = function () {
var path, var path,
getPath = R._getPath[this.type]; getPath = R._getPath[this.type];
if (this.type == "text" || this.type == "set") { if (this.type == "text" || this.type == "set") {
return; return;
} }
...@@ -4246,8 +4244,8 @@ ...@@ -4246,8 +4244,8 @@
} }
} }
return element; return element;
// //
// //
// var a = params ? R.animation(params, ms, easing, callback) : anim, // var a = params ? R.animation(params, ms, easing, callback) : anim,
// status = element.status(anim); // status = element.status(anim);
// return this.animate(a).status(a, status * anim.ms / a.ms); // return this.animate(a).status(a, status * anim.ms / a.ms);
...@@ -5371,13 +5369,5 @@ ...@@ -5371,13 +5369,5 @@
loaded = true; loaded = true;
}); });
// EXPOSE
// SVG and VML are appended just before the EXPOSE line
// Even with AMD, Raphael should be defined globally
oldRaphael.was ? (g.win.Raphael = R) : (Raphael = R);
if(typeof exports == "object"){
module.exports = R;
}
return R; return R;
})); }));
// ┌─────────────────────────────────────────────────────────────────────┐ \\ // ┌─────────────────────────────────────────────────────────────────────┐ \\
// │ Raphaël - JavaScript Vector Library │ \\ // │ Raphaël @@VERSION - JavaScript Vector Library │ \\
// ├─────────────────────────────────────────────────────────────────────┤ \\ // ├─────────────────────────────────────────────────────────────────────┤ \\
// │ SVG Module │ \\ // │ SVG Module │ \\
// ├─────────────────────────────────────────────────────────────────────┤ \\ // ├─────────────────────────────────────────────────────────────────────┤ \\
...@@ -8,7 +8,21 @@ ...@@ -8,7 +8,21 @@
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\ // │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\
// └─────────────────────────────────────────────────────────────────────┘ \\ // └─────────────────────────────────────────────────────────────────────┘ \\
window.Raphael && window.Raphael.svg && function(R) { (function (glob, factory) {
if (typeof define === "function" && define.amd) {
define("raphael.svg", ["raphael.core"], function(raphael) {
factory(raphael);
});
} else if (typeof exports === "object") {
factory(require("raphael.core"));
} else {
factory(glob.Raphael);
}
}(window || this, function(R) {
if (R && !R.svg) {
return;
}
var has = "hasOwnProperty", var has = "hasOwnProperty",
Str = String, Str = String,
toFloat = parseFloat, toFloat = parseFloat,
...@@ -98,7 +112,7 @@ window.Raphael && window.Raphael.svg && function(R) { ...@@ -98,7 +112,7 @@ window.Raphael && window.Raphael.svg && function(R) {
return null; return null;
} }
id = id.replace(/[\(\)\s,\xb0#]/g, "_"); id = id.replace(/[\(\)\s,\xb0#]/g, "_");
if (element.gradient && id != element.gradient.id) { if (element.gradient && id != element.gradient.id) {
SVG.defs.removeChild(element.gradient); SVG.defs.removeChild(element.gradient);
delete element.gradient; delete element.gradient;
...@@ -639,7 +653,7 @@ window.Raphael && window.Raphael.svg && function(R) { ...@@ -639,7 +653,7 @@ window.Raphael && window.Raphael.svg && function(R) {
* Element.id * Element.id
[ property (number) ] [ property (number) ]
** **
* Unique id of the element. Especially usesful when you want to listen to events of the element, * Unique id of the element. Especially usesful when you want to listen to events of the element,
* because all events are fired in format `<module>.<action>.<id>`. Also useful for @Paper.getById method. * because all events are fired in format `<module>.<action>.<id>`. Also useful for @Paper.getById method.
\*/ \*/
this.id = R._oid++; this.id = R._oid++;
...@@ -844,7 +858,7 @@ window.Raphael && window.Raphael.svg && function(R) { ...@@ -844,7 +858,7 @@ window.Raphael && window.Raphael.svg && function(R) {
this.clip && $(this.clip, {transform: this.matrix.invert()}); this.clip && $(this.clip, {transform: this.matrix.invert()});
this.pattern && updatePosition(this); this.pattern && updatePosition(this);
this.node && $(this.node, {transform: this.matrix}); this.node && $(this.node, {transform: this.matrix});
if (_.sx != 1 || _.sy != 1) { if (_.sx != 1 || _.sy != 1) {
var sw = this.attrs[has]("stroke-width") ? this.attrs["stroke-width"] : 1; var sw = this.attrs[has]("stroke-width") ? this.attrs["stroke-width"] : 1;
this.attr({"stroke-width": sw}); this.attr({"stroke-width": sw});
...@@ -1091,7 +1105,7 @@ window.Raphael && window.Raphael.svg && function(R) { ...@@ -1091,7 +1105,7 @@ window.Raphael && window.Raphael.svg && function(R) {
} }
var parent = this.node.parentNode; var parent = this.node.parentNode;
if (parent.tagName.toLowerCase() == "a") { if (parent.tagName.toLowerCase() == "a") {
parent.parentNode.insertBefore(this.node.parentNode, this.node.parentNode.parentNode.firstChild); parent.parentNode.insertBefore(this.node.parentNode, this.node.parentNode.parentNode.firstChild);
} else if (parent.firstChild != this.node) { } else if (parent.firstChild != this.node) {
parent.insertBefore(this.node, this.node.parentNode.firstChild); parent.insertBefore(this.node, this.node.parentNode.firstChild);
} }
...@@ -1371,4 +1385,4 @@ window.Raphael && window.Raphael.svg && function(R) { ...@@ -1371,4 +1385,4 @@ window.Raphael && window.Raphael.svg && function(R) {
}; };
})(method); })(method);
} }
}(window.Raphael); }));
// ┌─────────────────────────────────────────────────────────────────────┐ \\ // ┌─────────────────────────────────────────────────────────────────────┐ \\
// │ Raphaël - JavaScript Vector Library │ \\ // │ Raphaël @@VERSION - JavaScript Vector Library │ \\
// ├─────────────────────────────────────────────────────────────────────┤ \\ // ├─────────────────────────────────────────────────────────────────────┤ \\
// │ VML Module │ \\ // │ VML Module │ \\
// ├─────────────────────────────────────────────────────────────────────┤ \\ // ├─────────────────────────────────────────────────────────────────────┤ \\
...@@ -8,7 +8,21 @@ ...@@ -8,7 +8,21 @@
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\ // │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\
// └─────────────────────────────────────────────────────────────────────┘ \\ // └─────────────────────────────────────────────────────────────────────┘ \\
window.Raphael && window.Raphael.vml && function(R) { (function (glob, factory) {
if (typeof define === "function" && define.amd) {
define("raphael.vml", ["raphael.core"], function(raphael) {
factory(raphael);
});
} else if (typeof exports === "object") {
factory(require("raphael"));
} else {
factory(glob.Raphael);
}
}(window || this, function(R) {
if (R && !R.vml) {
return;
}
var has = "hasOwnProperty", var has = "hasOwnProperty",
Str = String, Str = String,
toFloat = parseFloat, toFloat = parseFloat,
...@@ -223,7 +237,7 @@ window.Raphael && window.Raphael.vml && function(R) { ...@@ -223,7 +237,7 @@ window.Raphael && window.Raphael.vml && function(R) {
if ("arrow-end" in params) { if ("arrow-end" in params) {
addArrow(res, params["arrow-end"], 1); addArrow(res, params["arrow-end"], 1);
} }
if (params.opacity != null || if (params.opacity != null ||
params["stroke-width"] != null || params["stroke-width"] != null ||
params.fill != null || params.fill != null ||
params.src != null || params.src != null ||
...@@ -302,7 +316,7 @@ window.Raphael && window.Raphael.vml && function(R) { ...@@ -302,7 +316,7 @@ window.Raphael && window.Raphael.vml && function(R) {
params["stroke-width"] && (stroke.weight = width); params["stroke-width"] && (stroke.weight = width);
width && width < 1 && (opacity *= width) && (stroke.weight = 1); width && width < 1 && (opacity *= width) && (stroke.weight = 1);
stroke.opacity = opacity; stroke.opacity = opacity;
params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter"); params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
stroke.miterlimit = params["stroke-miterlimit"] || 8; stroke.miterlimit = params["stroke-miterlimit"] || 8;
params["stroke-linecap"] && (stroke.endcap = params["stroke-linecap"] == "butt" ? "flat" : params["stroke-linecap"] == "square" ? "square" : "round"); params["stroke-linecap"] && (stroke.endcap = params["stroke-linecap"] == "butt" ? "flat" : params["stroke-linecap"] == "square" ? "square" : "round");
...@@ -349,7 +363,7 @@ window.Raphael && window.Raphael.vml && function(R) { ...@@ -349,7 +363,7 @@ window.Raphael && window.Raphael.vml && function(R) {
res._.dirty = 1; res._.dirty = 1;
break; break;
} }
// text-anchor emulation // text-anchor emulation
switch (a["text-anchor"]) { switch (a["text-anchor"]) {
case "start": case "start":
...@@ -559,7 +573,7 @@ window.Raphael && window.Raphael.vml && function(R) { ...@@ -559,7 +573,7 @@ window.Raphael && window.Raphael.vml && function(R) {
} }
cx = cx == null ? bbox.x + bbox.width / 2 : cx; cx = cx == null ? bbox.x + bbox.width / 2 : cx;
cy = cy == null ? bbox.y + bbox.height / 2 : cy; cy = cy == null ? bbox.y + bbox.height / 2 : cy;
this.transform(this._.transform.concat([["s", sx, sy, cx, cy]])); this.transform(this._.transform.concat([["s", sx, sy, cx, cy]]));
this._.dirtyT = 1; this._.dirtyT = 1;
return this; return this;
...@@ -973,4 +987,4 @@ window.Raphael && window.Raphael.vml && function(R) { ...@@ -973,4 +987,4 @@ window.Raphael && window.Raphael.vml && function(R) {
}; };
})(method); })(method);
} }
}(window.Raphael); }));
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<script type="text/javascript" src="raphael.core.js"></script> <script type="text/javascript" src="raphael.core.js"></script>
<script type="text/javascript" src="raphael.svg.js"></script> <script type="text/javascript" src="raphael.svg.js"></script>
<script type="text/javascript" src="raphael.vml.js"></script> <script type="text/javascript" src="raphael.vml.js"></script>
<script type="text/javascript" src="raphael.amd.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// Initialize container when document is loaded // Initialize container when document is loaded
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment