Prototype Graphic Framework

Prototype Graphic Framework (PGF) is a framework based on prototype to display vectorial shapes inside a web browser.
This library is licensed under a MIT-style license, so feel free to use it :).

Introduction

This open-source framework is developed for my new project NeoMeeting. I have already done a lot of work but sometimes quick-and-dirty. I will add them soon and frequently in this framework to have a great open-source project.

The main features are:

  • OO Framework of course!
  • Pluggable renderer. I am working mainly on SVG, VML (only for IE support of course!). I try to create a canvas renderer, even if it's not my main goal to support canvas, just to validate it's doable. I like canvas but there are some
  • Tools to interact with graphic (like a move tool)
  • And more (I am sure, but I will found out later :))
As it's still under heavy development, I will post a ticket on my blog on every main commit.

Download

As it's not yet ready for a zip distrib, download are available by using subvesrion trunk.
Just do: 
svn co http://svn.itseb.com/public/prototype-graphic/trunk prototype-graphic
It includes source files, unit test files based on unittest.js, documentation and sample files.
For any technical questions, patches, requests or bugs use this google group.

Documentation

Documentation is generated by natural docs and is included in svn trunk (doc directory).
You can also have an direct access here

If you need to learn everything about Prototype and script.aculo.us (and so understand everything about PGF), I recommend this book. A must-have according to me to know everything about those frameworks. It's written by Christophe Porteneuve, one of Prototype Core Team Developers and distributed by Pragmatic Programmers.
I think it's the most up-to-date book, it's based on the latest version of Prototype even on the next one :).
I know what I am saying, I am one of the lucky reviewers :).

Supported shape (Revision #52)

ShapeSVGVMLCanvasPick feature in Canvas
RectangleYESYESYESYES
EllipseYESYESYESNot yet implemented
CircleYESYESYESNot yet implemented
PolylineYESYESYESNot yet implemented
PolygonYESYESYESNot yet implemented
GroupYESYESNot yet implementedNot yet implemented

Sample code

Here is the big picture how it works 

// Create an SVG renderer
var renderer = new SVGRenderer("whiteboard");

// Create a rectangle with some attributes like color and bounds
var rect = new Graphic.Rectangle(renderer);
rect.setFill({r: 255, g: 0, b: 0, a: 128});
rect.setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});
rect.setBounds(10, 20, 200, 300);
rect.setRoundCorner(10, 10);
rect.translate(10, 20);
rect.rotate(30);

renderer.add(rect);
You can try a some samples Canvas could not be up-to-date as it's not my priority.

Change log

Main commit revisions:

#52 (05/10/07).
  • Added: Polyline, Line
  • Updated: samples, now you can select renderer online
  • Updated: Documentation
Older revisions

Author

This class has been done by Sébastien Gruhier (aka Mr Proto)

Support my work :)