It’s been a while without anything on this blog but not in PGF trunk.

Now you have polylines and lines. (sample) As you can see on the sample you can change renderer on the page, if you use Firefox you can switch from SVG to Canvas, same code, same look.

For fun and for showing how PGF is simple, I have created a sample for mouse drawing, you can give it a try.

Here is the full code of the drawing tool:

   1  
   2  Graphic.DrawingTool = Class.create();
   3  Object.extend(Graphic.DrawingTool.prototype, Graphic.Tool.prototype);
   4  Object.extend(Graphic.DrawingTool.prototype, {
   5    initialize: function() {  
   6      this.renderer = null;
   7      this.shape    = null;
   8    },
   9    
  10    activate: function(manager) {
  11      this.renderer = manager.renderer;
  12    },
  13    
  14    unactivate: function(manager) {
  15      this.renderer = null;
  16    }, 
  17    
  18    initDrag: function(x, y, event) { 
  19      this.polyline =  new Graphic.Polyline(this.renderer); 
  20      this.polyline.setStroke(this._randomStroke());
  21      this.polyline.addPoint(x, y); 
  22      
  23      this.renderer.add(this.polyline)
  24      this.renderer.draw();
  25    },
  26    
  27    drag: function(x, y, dx, dy, ddx, ddy, event) {    
  28      if (this.polyline) {           
  29        this.polyline.addPoint(x, y); 
  30        this.renderer.draw();
  31      }
  32    },
  33    
  34    endDrag: function(x, y, event) {
  35      if (this.polyline) {
  36        this.polyline = null;
  37      }
  38    },
  39    
  40    mouseMove: function(x, y, event) {
  41    },
  42    
  43    _randomStroke: function() {
  44      var r = Math.floor(255 * Math.random());
  45      var g = Math.floor(255 * Math.random());
  46      var b = Math.floor(255 * Math.random());
  47      var a = 128 + Math.floor(128 * Math.random()); 
  48      var w = 5 + Math.floor(5 * Math.random());
  49      return  {r: r, g: g, b: b, a: a, w: w}
  50    }
  51  });

I have commited a new version with a new CTM (current transformation matrix) managment for shapes.

Now shapes handles matrix and inverse matrix. So it’s really easy to convert points from shape to viewport and from viewport to shape coordinates.

With this, handling missing pick feature in canvas is much more easier. Check this canvas example (Firefox and Safari). You still can play with the SVG/VML version (IE/Firefox/Opera)

In NeoMeeting, I am able now to edit shapes graphically, here is a little screenshot:

Next I will add some shapes like lines and polylines and I will do the first official!

As promised, I have adding the first tool in PGF. It’s a select/move tool. It’s easy as a pie to activate, only two lines of code. Just after renderer creation, add:

   1  
   2  var toolManager = new Graphic.ToolManager(renderer);
   3  toolManager.setTool(new Graphic.SelectTool());

I use my EventNotifier class, so you can receive an event on each move. You can play with it here

Of course, you can do it without using toolManager by observing events on DOM Element like this:

   1  
   2  Event.observe("rectangle_0", "mouseover", function() {alert("over a rectangle")});   

But keep in mind it won’t work for canvas as canvas does use DOM element for rendering. But, anyway, this version of PGF doed not support selection in canvas.

A Group class has also been added to group shapes. Once grouped, you can apply transform on group, it will affect all included shapes. (Only SVG/VML, canvas renderer will do it later).

As I said in a comment, I am getting bored to fight with VML and IE.

So if you are an expert of VML (and why not canvas) feel free to contact me (use contact form on xilinus) if you want to contribute to this library. It would be a great help.

Next release (soon, in a week) will be only SVG with shape selection/edition.

I am working hard to integrate all I have done for NeoMeeting.

Today the framework includes:

• Rectangle
• Circle
• Ellipse
• Polygon

And everything works in VML, SVG and canvas!! With unit tests and documentation.

More is coming….

As I told you last week, I have open Prototype Graphic website. Champagne :)!

The svn trunk includes:

• Only one shape: rectangle.
• Three renderers: SVG, VML, Canvas. I will work more on SVG and VML than Canvas. SVG/VML cover 99% of browsers and canvas have some limitation for what I wanna do later.
• Full documentation.
• Some unit tests but I will cover everything soon.
• Sample codes.

I have done more than this for NeoMeeting application, but I want to have a clean svn repository so I will add what I have done step by step but regularly.

Stay tuned

Seb

Here is my first post about a framework I am developing for NeoMeeting. It’s a JavaScript Framework to draw vectorial shapes inside a web page.

The idea comes from dojo.gfx. It gave me the idea to create my own framework, based on Prototype, that fits my needs.

What I need is:

• OO Framework of course!
• Pluggable renderer. I want to be able to use SVG or VML (only for IE support of course!) or even Canvas (or anything else that support 2D drawing) with the same code.
• Have a tools to interact with graphic (like a selection tool)
• and more (I am sure, but I will found out later :))

I have something running now and I will share with my ideas and code in this blog.

Basically, here is how it works:

Create a simple HTML File with a div that will support graphic rendering

   1  
   2  <div id="whiteboard">
   3  </div>

A simple CSS File to set width and height

   1  
   2  #whiteboard {
   3    width:  800px;
   4    height: 600px;
   5    float:  left;
   6  } 

Few lines of Javascript to create a renderer and a rectangle.

   1  
   2  // Create an SVG renderer
   3  var renderer = new SVGRenderer("whiteboard");
   4  
   5  // Create a rectangle with some attributes like color and bounds
   6  var rect = new Graphic.Rectangle(renderer);
   7  rect.setFill({r: 255, g: 0, b: 0, a: 128});
   8  rect.setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});
   9  rect.setBounds(10, 20, 200, 300);
  10  rect.setRoundCorner(10, 10);
  11  rect.translate(10, 20);
  12  rect.rotate(30);
  13  
  14  renderer.add(rect);

As Element functions in Prototype you can chain calls like this

   1  
   2  rect.setFill({r: 255, g: 0, b: 0}).setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});

But for an cleaner HTML layout I will always do one call by line.

Here is what you will see in your page:

Next post, I will detail object graph I have done and share more code.

I think this framework will be open-source and I hope available soon.