""" raphael.py
This Python module is a Pyjamas wrapper around the Raphael SVG graphics
library.
The Raphael wrapper was written by Erik Westra (ewestra at gmail dot com).
"""
from pyjamas.ui.Widget import Widget
from pyjamas import DOM
from pyjamas import Window
from __pyjamas__ import JS
#############################################################################
class Raphael(Widget):
""" A Pyjamas wrapper around the Raphael canvas object.
"""
def __init__(self, width, height):
""" Standard initialiser.
'width' and 'height' are the dimensions to use for the canvas, in
pixels.
"""
Widget.__init__(self)
element = DOM.createDiv()
self.setElement(element)
self.setPixelSize(width, height)
JS("""
this._canvas = $wnd.Raphael(element, width, height);
""")
def getCanvas(self):
""" Return our Raphael canvas object.
This can be used to directly access any Raphael functionality which
has not been implemented by this wrapper module. You'll probably
never need to use it, but it's here just in case.
"""
return self._canvas
def setSize(self, width, height):
""" Change the dimensions of the canvas.
"""
JS("""
this._canvas.setSize(width, height);
""")
def getColor(self, brightness=None):
""" Return the next colour to use in the spectrum.
"""
JS("""
colour = this._canvas.getColor();
""")
return colour
def resetColor(self):
""" Reset getColor() so that it will start from the beginning.
"""
JS("""
this._canvas.getColor().reset();
""")
def circle(self, x, y, radius):
""" Create and return a circle element.
The circle will be centred around (x,y), and will have the given
radius.
We return a RaphaelElement object representing the circle.
"""
JS("""
this._element = this._canvas.circle(x, y, radius);
""")
return RaphaelElement(self._element)
def rect(self, x, y, width, height, cornerRadius=0):
""" Create and return a rectangle element.
The rectangle will have its top-left corner at (x,y), and have the
given width and height. If 'cornerRadius' is specified, the
rectangle will have rounded corners with the given radius.
We return a RaphaelElement object representing the rectangle.
"""
JS("""
this._element = this._canvas.rect(x, y, width, height,
cornerRadius);
""")
return RaphaelElement(self._element)
def ellipse(self, x, y, xRadius, yRadius):
""" Create and return an ellipse element.
The ellipse will be centred around (x,y), and will have the given
horizontal and vertical radius.
We return a RaphaelElement object representing the ellipse.
"""
JS("""
this._element = this._canvas.ellipse(x, y, xRadius, yRadius);
""")
return RaphaelElement(self._element)
def image(self, src, x, y, width, height):
""" Create and return an image element.
The image will use 'src' as the URI to read the image data from.
The top-left corner of the image will be at (x,y), and the image
element will have the given width and height.
We return a RaphaelElement object representing the image.
"""
JS("""
this._element = this._canvas.image(src, x, y, width, height);
""")
return RaphaelElement(self._element)
def set(self):
""" Create and return a set element.
This can be used to group elements together and operate on these
elements as a unit.
We return a RaphaelSetElement representing the set.
"""
JS("""
self._element = this._canvas.set();
""")
return RaphaelSetElement(self._element)
def text(self, x, y, text):
""" Create and return a text element.
The element will be placed at (x,y), and will display the given
text. Note that you can embed newline ("\n") characters into the
text to force line breaks.
We return a RaphaelElement representing the text.
"""
JS("""
this._element = this._canvas.text(x, y, text);
""")
return RaphaelElement(self._element)
def path(self, attrs=None, data=None):
""" Create and return a path object.
If 'attrs' is defined, it should be a dictionary mapping attribute
names to values for the new path object. If 'data' is not None, it
should be a string containing the path data, in SVG path string
format.
We return a RaphaelPathElement representing the path.
"""
if data != None:
JS("""
this._element = this._canvas.path({});
""")
else:
JS("""
this._element = this._canvas.path({}, data);
""")
if attrs != None:
for attr in attrs.keys():
value = attrs[attr]
JS("""
this._element.attr(attr, value);
""")
return RaphaelPathElement(self._element)
#############################################################################
class RaphaelElement:
""" Wrapper object for a Raphael element.
Note that these objects are created by the appropriate methods within
the Raphael object; you should never need to initialise one of these
objects yourself.
"""
def __init__(self, raphaelElement):
""" Standard initialiser.
'raphaelElement' is the raphael element that we are wrapping.
"""
self._element = raphaelElement
self._listeners = {'click' : [],
'mousedown' : [],
'mouseup' : [],
'mousemove' : [],
'mouseenter' : [],
'mouseleave' : []}
onClick = getattr(self, "_onClick")
onMouseDown = getattr(self, "_onMouseDown")
onMouseUp = getattr(self, "_onMouseUp")
onMouseMove = getattr(self, "_onMouseMove")
onMouseEnter = getattr(self, "_onMouseEnter")
onMouseLeave = getattr(self, "_onMouseLeave")
JS("""
this._element.node.onclick = onClick;
this._element.node.onmousedown = onMouseDown;
this._element.node.onmouseup = onMouseUp;
this._element.node.onmousemove = onMouseMove;
this._element.node.onmouseenter = onMouseEnter;
this._element.node.onmouseleave = onMouseLeave;
""")
def addListener(self, type, listener):
""" Add a listener function to this element.
The parameters are as follows:
'type'
The type of event to listen out for. One of:
"click"
"mousedown"
"mouseup"
"mousemove"
"mouseenter"
"mouseleave"
'listener'
A Python callable object which accepts two parameters: the
RaphaelElement object that was clicked on, and the event
object.
The given listener function will be called whenever an event of the
given type occurs.
"""
self._listeners[type].append(listener)
def removeListener(self, type, listener):
""" Remove a previously-defined listener function.
"""
self._listeners[type].remove(listener)
def getElement(self):
""" Return the DOM element we are wrapping.
"""
return self._element
def remove(self):
""" Remove this element from the canvas.
You can't use the element after you call this method.
"""
JS("""
this._element.remove();
""")
def hide(self):
""" Make this element invisible.
"""
JS("""
this._element.hide();
""")
def show(self):
""" Make this element visible.
"""
JS("""
this._element.show();
""")
def rotate(self, angle, cx, cy=None):
""" Rotate the element by the given angle.
This can be called in two different ways:
element.rotate(angle, isAbsolute)
where 'angle' is the angle to rotate the element by, in
degrees, and 'isAbsolute' specifies it the angle is relative
to the previous position (False) or if it is the absolute
angle to rotate the element by (True).
or:
element.rotate(angle, cx, cy):
where 'angle' is the angle to rotate the element by, in
degrees, and 'cx' and 'cy' define the origin around which
to rotate the element.
"""
if cy == None:
isAbsolute = cx
JS("""
this._element.rotate(angle, isAbsolute);
""")
else:
JS("""
this._element.rotate(angle, cx, cy);
""")
def translate(self, dx, dy):
""" Move the element around the canvas by the given number of pixels.
"""
JS("""
this._element.translate(dx, dy);
""")
def scale(self, xtimes, ytimes):
""" Resize the element by the given horizontal and vertical multiplier.
"""
JS("""
this._element.scale(xtimes, ytimes);
""")
def setAttr(self, attr, value):
""" Set the value of a single attribute for this element.
The following attributes are currently supported:
cx number
cy number
fill colour
fill-opacity number
font string
font-family string
font-size number
font-weight string
gradient object|string
"angle-colour[-colour[:offset]]*-colour"
height number
opacity number
path pathString
r number
rotation number
rx number
ry number
scale CSV
src string (URL)
stroke colour
stroke-dasharray string [-, ., -., -.., . , - ,
--, - ., --., --..]
stroke-linecap string [butt, square, round, miter]
stroke-linejoin string [butt, square, round, miter]
stroke-miterlimit number
stroke-opacity number
stroke-width number
translation CSV
width number
x number
y number
Please refer to the SVG specification for an explanation of these
attributes and how to use them.
"""
JS("""
this._element.attr(attr, value);
""")
def setAttrs(self, attrs):
""" Set the value of multiple attributes at once.
'attrs' should be a dictionary mapping attribute names to values.
The available attributes are listed in the description of the
setAttr() method, above.
"""
for attr,value in attrs.items():
JS("""
this._element.attr(attr, value);
""")
def getAttr(self, attr):
""" Return the current value for the given attribute.
"""
JS("""
var value = this._element.attr(attr);
""")
return value
def animate(self, attrs, duration):
""" Linearly change one or more attributes over a given timeframe.
'attrs' should be a dictionary mapping attribute names to values,
and 'duration' should be how long to run the animation for (in
milliseconds).
Only the following attributes can be animated:
cx number
cy number
fill colour
fill-opacity number
font-size number
height number
opacity number
path pathString
r number
rotation number
rx number
ry number
scale CSV
stroke colour
stroke-opacity number
stroke-width number
translation CSV
width number
x number
y number
Note that the use of a callback function is not yet supported
within the Raphael wrapper, even though Raphael itself supports it.
"""
JS("""
var jsAttrs = {};
""")
for attr,value in attrs.items():
JS("""
jsAttrs[attr] = value;
""")
JS("""
this._element.animate(jsAttrs, duration);
""")
def getBBox(self):
""" Return the bounding box for this element.
We return a dictionary with 'x', 'y', 'width' and 'height'
elements.
"""
JS("""
var bounds = this._element.getBBox();
var x = bounds.x;
var y = bounds.y;
var width = bounds.width;
var height = bounds.height;
""")
return {'x' : x,
'y' : y,
'width' : width,
'height' : height}
def toFront(self):
""" Move the element in front of all other elements on the canvas.
"""
JS("""
this._element.toFront();
""")
def toBack(self):
""" Move the element behind all the other elements on the canvas.
"""
JS("""
this._element.toBack();
""")
def insertBefore(self, element):
""" Move this element so that it appears in front of the given element.
'element' should be a RaphaelElement object.
"""
otherElement = element.getElement()
JS("""
this._element.insertBefore(otherElement);
""")
def insertAfter(self, element):
""" Move this element so that it appears behind the given element.
"""
otherElement = element.getElement()
JS("""
this._element.insertAfter(otherElement);
""")
# =====================
# == PRIVATE METHODS ==
# =====================
def _onClick(self, event):
""" Respond to a mouse-click event.
"""
listeners = self._listeners['click']
for listener in listeners:
listener(self, event)
def _onMouseDown(self, event):
""" Respond to a mouse-down event.
"""
listeners = self._listeners['mousedown']
for listener in listeners:
listener(self, event)
def _onMouseUp(self, event):
""" Respond to a mouse-up event.
"""
listeners = self._listeners['mouseup']
for listener in listeners:
listener(self, event)
def _onMouseMove(self, event):
""" Respond to a mouse-move event.
"""
listeners = self._listeners['mousemove']
for listener in listeners:
listener(self, event)
def _onMouseEnter(self, event):
""" Respond to a mouse-enter event.
"""
listeners = self._listeners['mouseenter']
for listener in listeners:
listener(self, event)
def _onMouseLeave(self, event):
""" Respond to a mouse-leave event.
"""
listeners = self._listeners['mouseleave']
for listener in listeners:
listener(self, event)
#############################################################################
class RaphaelSetElement(RaphaelElement):
""" A RaphaelElement that represents a set of elements.
"""
def add(self, element):
""" Add an element to this set.
"""
otherElement = element.getElement()
JS("""
this._element.push(otherElement);
""")
#############################################################################
class RaphaelPathElement(RaphaelElement):
""" A RaphaelElement that represents a path.
Note that the RaphaelPathElement object is returned by each of the
methods defined in this calss, allowing method calls to be chained
together.
"""
def absolutely(self):
""" Tell the path to treat all subsequent units as absolute ones.
Coordinates are absolute by default.
"""
JS("""
this._element.absolutely();
""")
return self
def relatively(self):
""" Tell the path to treat all subsequent units as relative ones.
Coordinates are absolute by default.
"""
JS("""
this._element.relatively();
""")
return self
def moveTo(self, x, y):
""" Move the drawing point to the given coordinates.
"""
JS("""
this._element.moveTo(x, y);
""")
return self
def lineTo(self, x, y):
""" Draw a straight line to the given coordinates.
"""
JS("""
this._element.lineTo(x, y);
""")
return self
def cplineTo(self, x, y, width=None):
""" Draw a curved line to the given coordinates.
'x' and 'y' define the ending coordinates, and 'width' defines how
much of a curve to give to the line. The line will have horizontal
anchors at the start and finish points.
"""
if width != None:
JS("""
this._element.cplineTo(x, y, width);
""")
else:
JS("""
this._element.cplineTo(x, y);
""")
return self
def curveTo(self, x1, y1, x2, y2, x3, y3):
""" Draw a bicubic curve to the given coordinates.
"""
JS("""
this._element.curveTo(x1, y1, x, y2, x3, y3);
""")
return self
def qcurveTo(self, x1, y1, x2, y2):
""" Draw a quadratic curve to the given coordinates.
"""
JS("""
this._element.qcurveTo(x1, y1, x2, y2);
""")
return self
def addRoundedCorner(self, radius, direction):
""" Draw a quarter of a circle from the current drawing point.
'radius' should be the radius of the circle, and 'direction' should
be one of the following strings:
"lu" Left up.
"ld" Left down.
"ru" Right up.
"rd" Right down.
"ur" Up right.
"ul" Up left.
"dr" Down right.
"dl" Down left.
"""
JS("""
this._element.addRoundedCorner(radius, direction);
""")
return self
def andClose(self):
""" Close the path being drawn.
"""
JS("""
this._element.andClose();
""")
return self
|