Skip to content

Commit

Permalink
gallery-2010.09.22-20-15 rhyolight gallery-raphael
Browse files Browse the repository at this point in the history
  • Loading branch information
YUI Builder committed Sep 22, 2010
1 parent dc4df8d commit 84bc5e0
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 39 deletions.
2 changes: 1 addition & 1 deletion src/gallery-raphael/build.properties
View file
Expand Up @@ -17,4 +17,4 @@ component=gallery-raphael
component.jsfiles=gallery-raphael.js

# The list of modules this component requires. Used to set up the Y.add module call for YUI 3.
component.requires=oop, event-custom, event
component.requires=oop, event-custom, event, node
5 changes: 5 additions & 0 deletions src/gallery-raphael/examples/r-test-plugin-canvas.js
View file
@@ -0,0 +1,5 @@
Raphael.fn.redtext = function() {
var t = this.text.apply(this, arguments);
t.attr('stroke', 'red');
return t;
};
3 changes: 3 additions & 0 deletions src/gallery-raphael/examples/r-test-plugin-element.js
View file
@@ -0,0 +1,3 @@
Raphael.el.yellow = function() {
this.attr('fill', 'yellow');
};
138 changes: 124 additions & 14 deletions src/gallery-raphael/examples/test.html
View file
Expand Up @@ -6,30 +6,82 @@
<title>
YUI Raphael Sandbox
</title>
<style>
.buttons {
position: absolute;
top:0px; right:0px;
}
</style>
</head>
<body class=" yui-skin-sam">

<div id="rcanvas"></div>
<div class="buttons">
<button id="hide">Hide</button><br/>
<button id="show">Show</button>
<hr/>
<button id="animate">Animate</button><br/>
<button id="rotate">Rotate</button><br/>
<button id="yellow">Yellow</button><br/>
<button id="creep">Creep</button>
<hr/>
<button id="whatColor">What Color?</button>
<hr/>
<button id="remove">Remove</button><br/>
<button id="clear">Clear</button>
<br/>
<div id='log'></div>
</div>


<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-debug.js"></script>

<script type="text/javascript" src="build_tmp/gallery-raphael-debug.js"></script>
<script type="text/javascript" src="../build_tmp/gallery-raphael-debug.js"></script>

<script>
YUI({debug: true, useConsole: true}).use('gallery-raphael', function(Y) {

Y.Raphael().use(function(Raphael) {

YUI({debug: true, useConsole: true}).use('gallery-raphael', function(Y) {

var log = Y.one('#log');
function alert(s) {
log.set('innerHTML', s);
}

var plugins = [
'r-test-plugin-canvas.js',
'r-test-plugin-element.js'
];

Y.Raphael({type:'raw'}).use(plugins, function(Raphael) {

// use Raphael just like normal
var paper = Raphael('rcanvas', 600, 800);
var paper = Raphael('rcanvas', 600, 800),
rect, circ, ellipse, img, group, redText;

paper.setSize(600, 799);

// create SVG objects normally as well
var rect = paper.rect(0,0,100,200);
rect = paper.rect(0,0,100,200);
rect.attr({fill: 'cyan', stroke: '#000', 'stroke-width': 1});
var circ = paper.circle(200, 200, 80);

circ = paper.circle(200, 200, 80);
circ.attr({fill: 'red', stroke: '#333', 'stroke-width': 5});

ellipse = paper.ellipse(20, 40, 400, 30);
ellipse.attr({fill: 'yellow'});
ellipse.$node.on('mouseover', function() {
rect.animate({
"20%": {cx: 20, r: 20, easing: ">"},
"50%": {cx: 70, r: 120},
"100%": {cx: 10, r: 10}
}, 2000);
});

img = paper.image('../../../../../../../Pictures/gi_christ.jpg', 300,300,150,100)

img.node.onclick = function() {
alert('manual onclick');
}

// but now each has a .$node property that is a Y.Node wrapped around the SVG HTMLElement
circ.$node.on('click', function() {
// and each object Raphael creates is an EventTarget, so we can fire events now
Expand All @@ -39,18 +91,76 @@
circ.on('bam', function() {
alert('it worked');
});

// use .$node as a normal Y.Node for event handling
rect.$node.on('mouseover', function() {
circ.attr('fill', 'blue');
circ.attr('fill', 'blue').attr('stroke', '#123432').attr('stroke-width', 1);
});
rect.$node.on('mouseout', function() {
circ.attr('fill', 'red');
circ.attr({fill: 'red', stroke: '#333', 'stroke-width': 5});
});

});

group = paper.set();
group.push(circ, rect, ellipse, img);

group.attr({fill: 'cyan', stroke: '#000', 'stroke-width': 1});

redText = paper.redtext(300,100, 'red text');

Y.one('#clear').on('click', function() {
paper.clear();
});

Y.one('#remove').on('click', function() {
group.pop().remove();
});

Y.one('#hide').on('click', function() {
circ.hide();
});

Y.one('#show').on('click', function() {
circ.show();
});

Y.one('#rotate').on('click', function() {
group.rotate(45);
ellipse.rotate(10);
});

Y.one('#creep').on('click', function() {
group.translate(10, 1);
img.translate(-10, -33);
});

Y.one('#animate').on('click', function() {
var c = circ;
c.animate({cx: 20, r: 20}, 2000);
c.animate({cx: 20, r: 20}, 2000, "bounce");
c.animate({
"20%": {cx: 20, r: 20, easing: ">"},
"50%": {cx: 70, r: 120},
"100%": {cx: 10, r: 10}
}, 2000);
});

Y.one('#whatColor').on('click', function() {
var stroke = Raphael.getRGB(circ.attr("fill")).hex;
alert(stroke);
});

Y.one('#yellow').on('click', function() {
Y.Array.each(group, function(it) {
it.yellow();
});
});

var angle = Raphael.angle(10, 10, 50, 50);
alert(angle);

});

});
</script>
</body>
</html>
84 changes: 60 additions & 24 deletions src/gallery-raphael/js/gallery-raphael.js
View file
@@ -1,10 +1,18 @@
(function() {

// paths to raphael source
var RAPHAEL_SRC = {
raw: 'http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js',
min: 'http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'
};
raw: 'http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js',
min: 'http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'
},
// Raphael functions I'm shimming
methods = ['rect', 'circle', 'ellipse', 'path', 'text', 'image', 'clear', 'setSize', 'set'],
statics = ['getRGB', 'setWindow', 'angle', 'rad', 'deg', 'snapTo', 'getColor', 'registerFont'];

/*
* This is the loader attached to Y that is used to lazy-load Raphael and any plugins. Options contain
* type='raw' or 'min'. (default is min)
*/
function RaphaelLoader(opts) {
var NAME = 'RaphaelLoader',
loadedScripts = {},
Expand All @@ -14,11 +22,15 @@
};
opts = Y.mix(opts, defaults);
return {
/* Loads Raphael first, then on success, loads any specified plugins. Calls _ready() on every
* plugin script load.
*/
use: function() {
var self = this, scriptOpts = {},
plugins = Y.Lang.isArray(arguments[0]) ? arguments[0] : (Y.Lang.isString(arguments[0]) ? [arguments[0]] : []);

this.callback = Y.Lang.isFunction(arguments[0]) ? arguments[0] : arguments[1];
// on successful Raphael.js load, load plugins
scriptOpts.onSuccess = function(d) {
Y.log('raphael.js is loaded');
loadedScripts[RAPHAEL_SRC[opts.type]] = true;
Expand All @@ -31,9 +43,6 @@
});
});
};
scriptOpts.onFailure = function(d) {
self._ready.call(self, d);
};
scriptOpts.onEnd = function(d) {
self._ready.call(self, d);
}
Expand All @@ -42,6 +51,7 @@
Y.Get.script( RAPHAEL_SRC[opts.type], scriptOpts );

},
// keeps track of loaded scripts and runs the callback when everything is loaded
_ready: function(d) {
var files = [], rdy = true;
Y.Array.each(d.nodes, function(script) {
Expand All @@ -60,32 +70,58 @@
});

if (!rdy) return;

var oldR = Raphael;
var newR = function() {
Y.log('getting Raphael through YUI...', 'info', NAME);
var R = oldR.apply(oldR, arguments);
return applyEventAugmentation(R);
};
this.callback(newR);
// RaphWrapper is the Raphael facade
this.callback(RaphWrapper);
}
};
}

function applyEventAugmentation(r) {
var i=0, vectors = ['rect', 'circle', 'ellipse', 'path', 'text'], cache = {};
Y.Array.each(vectors, function(fnName) {
cache[fnName] = r[fnName];
r[fnName] = function() {
Y.log('call to internally replaced "' + fnName + '" function');
var inst = cache[fnName].apply(r, arguments);
inst.$node = new Y.Node(inst.node);
return Y.augment(inst, Y.EventTarget);
/* This is a facade for Raphael. All calls that users make to Raphael are actually calls made
* on this. It is a constructor that delegates to Raphael() as well as adding lots of function
* shims on the resulting Raphael instance so we can add functionality to vectors.
*/
function RaphWrapper() {
var raph = Raphael.apply(Raphael, arguments),
raphInst = {},
cache = {};

// Attaches a Y.Node to SVG objects and mixes in Y.EventTarget. If the object
// is actually the Raphael instance, just returns it for chaining.
function wrapVector(vect) {
if (vect === raph) {
return vect; // not a vector, just chaining
} else if (vect.type && vect.type === 'set') {
return vect; // this is a Set
}
vect.$node = new Y.Node(vect.node);
return Y.augment(vect, Y.EventTarget);
}

// augment methods
Y.Array.each(methods, function(fnName) {
raphInst[fnName] = function() {
return wrapVector(raph[fnName].apply(raph, arguments));
};
});
return r;

// this handles plugin addons to the main canvas
Y.Object.each(Raphael.fn, function(fn, fnName) {
raphInst[fnName] = function() {
return wrapVector(raph[fnName].apply(raph, arguments));
};
});
// plugins using Raphael.el to add methods to SVG elements just work without help

return raphInst;
}

// augmenting static methods
Y.Array.each(statics, function(fnName) {
RaphWrapper[fnName] = function() {
return Raphael.prototype.raphael[fnName].apply(Raphael, arguments);
}
});

Y.Raphael = RaphaelLoader;

}());

0 comments on commit 84bc5e0

Please sign in to comment.