Skip to content

殷洪（管理员） / raphael

Go to a project
Commit 630eb142 by Marat Dreizin
Options

Improved build flow and also added support of webpack/browserify

parent 07715d15
Showing with 130 additions and 107 deletions
dev/Gruntfile.js
...@@ -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"]);
}; };
dev/amdDev.js
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
dev/package.json
{ {
"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"
} }
} }
dev/raphael.amd.js 0 → 100644
// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ 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
dev/raphael.core.js
// ┌─────────────────────────────────────────────────────────────────────┐ \\ // ┌────────────────────────────────────────────────────────────────────┐ \\
// │ "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;
})); }));
dev/raphael.svg.js
// ┌─────────────────────────────────────────────────────────────────────┐ \\ // ┌─────────────────────────────────────────────────────────────────────┐ \\
// │ 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); }));
dev/raphael.vml.js
// ┌─────────────────────────────────────────────────────────────────────┐ \\ // ┌─────────────────────────────────────────────────────────────────────┐ \\
// │ 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); }));
dev/raphaelTest.html
...@@ -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
......
raphael-min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
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 sign in to comment