dojox.sketch was contributed to Dojo by TeamPatent; it was originally written by myself with the undo stack written by LiuCougar (of Editor fame, also mostly sponsored by TeamPatent) as a way of annotating a figure in a collaborative environment. As such, the current incarnation of sketch is aimed primarily at annotating an image. The recent checkin was a quick port, done by LiuCougar, from 0.4.3 (the version I originally wrote it in) to 1.0. The issues with IE7 stem from the port, and it's something I need to take a look at.

Knowing that the current usage is fairly limited, and that the current object structure is also fairly limited, I've been quietly soliciting ideas about the future directions of sketch. Among the various ideas floated are making it a tool to annotate web pages (transparently layered, like post-its but a bit more full-featured), a general annotation tool (think drawing widget, like Editor), and as the basis of a Visio-like flowcharting/collaborative white-boarding app (tied in with Cometd). I was about to put up a post here opening some of the ideas to the public, so your questions are timely :)

Let's use this thread as a place to discuss sketch ideas; if it becomes big and unwieldy, I'll make it sticky or something.

No idea when it becomes part of the releases but you're always welcome to use the HEAD revision until it's release ready.

I also need to take a look at the IE issues but I'm not sure how soon that will be; there's a definite bug with the image and scaling that's known (with a hack for it) but one of the big issues is that MS basically abandoned VML (it actually regressed with the IE7 release) so there's some limitations as far as what we'll be able to pull for sure.

Feel free to ask for features or throw out ideas here, and I'll keep an eye on the thread.

Hello Tom,

I've discovered dojox.sketch a week ago, too, and wrote a mail to LiuCougar probably with a similar direction or mindset as Daniel. However, I should have sent it to you as well if you're the original author of dojox.sketch. Here's a copy of my mail (to save myself from rephrasing the same questions again), perhaps you can answer some of the questions as well:

I work for a small software company which develops solutions for the fairs and congress industry. We're currently implementing a prototype for a web-based drawing tool which is intended to be used for communication of fair booth drafts between relevant parties. We've decided to use the dojox.gfx library and have also come across your dojox.sketch framework in the dojo repository. Initially we've set out to implement this all ourselves on top of dojox.gfx but the dojox.sketch code would help a lot.
Neither my company nor myself have any experience contributing to Open Source projects so I'd like to ask you how to deal with the contribution of bug fixes or feature suggestions or changes in the dojox.sketch codebase.

Until now I've found a few places in the dojox.sketch code which need a change so we could use it in our scenario. I've found workarounds for all of these issues, however, I think it would be better to have a "fix" or a change in the dojox.sketch codebase.

1. Customized toolbar

How would you suggest to implement a toolbar with further application-specific annotation tools? Currently I've subclassed the dojox.sketch.Toolbar and overridden the postCreate function to insert further of our own annotation tools like this (RubinIcon is the additional annotation tool):

dojo.declare("SketchToolbar", dojox.sketch.Toolbar, {
	postCreate: function(){
		if(!this.plugins){
			this.plugins=['Slider','Lead','SingleArrow','RubinIcon','DoubleArrow','Underline','Preexisting'];
		}
		this._plugins=[];
		this.inherited(arguments);
	}
});

makeSketchToolbar=function(node,figure){
	var toolbar=new SketchToolbar({"figure":figure});
	node.appendChild(toolbar.domNode);
	return toolbar;
};

2. Use dojox.sketch in combination with Ext JS

We're using the Ext JS library for the GUI components and dojox for implementing the drawing editor. However, it seems Ext JS automatically assigns IDs for all DOM elements which are generated if there is no ID specified. dojox.sketch only specifies IDs for the SVG elements representing the annotations (i.e. the group elements) but not for their child nodes like the text or path elements. This leads Ext JS to automatically insert a generated ID in the DOM like the following (copied from FireBug; look for the id="ext-genXYZ" attributes):

This leads to a problem when trying to select the annotation by clicking e.g. on the text or path element with the mouse. In dojox.sketch.Figure the function _fromEvt searches for the annotation object which belongs to the element which has been clicked on. However, it will only search the ancestor tree if the element's ID is of length zero which isn't the case because ExtJS generated an ID.
Currently I've subclassed dojox.sketch.Figure and overridden the _fromEvt function as a workaround like this:

dojo.declare("XFigure", dojox.sketch.Figure, {
			_fromEvt: function(e) {
				var o = this.inherited(arguments);
				if (o == null) { // patch: if no object found with the e.target.id then search the ancestor tree
					var key=e.target.id+"";
					//	ancestor tree until you get to the end (meaning this.surface)
					var p=e.target.parentNode;
					var node=this.surface.getEventSource();
					while(p && 
						(p.id.length==0 
						|| this._get(p.id)==null) // patch: if no object found with the id then search the ancestor tree
						&& p!=node){
						p=p.parentNode;
					}
					key=p.id;			
					return this._get(key);
				}
				return o;
			}
		});

However, I think it would be better if the original _fromEvt function would be changed to search the ancestor's tree not only if the ID is of length zero but also when no object with the ID being used is found by the _get function.

Last but not least: The gfx and sketch libraries are really awesome! I'm deeply impressed with your work making available vector-based drawing in a browser-compatible manner.

Hope to hear from you...

Best regards
Andreas Leidner
infoteam GmbH Berlin

- In addition to the mail I discovered another issue with the VML renderer / Internet Explorer: when using the arrow annotations Internet Explorer very often repositions the surface's rawNode (the v:group element). In the IE Developer Toolbar one can see that the offsetTop and offsetLeft attributes as well as the style's margin-left and margin-top get a negative value after modifying e.g. the direction of an arrow - i.e. the background image's position changes noticeably by e.g. 36 pixels. When the arrow is deselected the background image's position returns back to 0 as before.

One of the big problems when creating an open source application like this is that everyone that gets involved has a personal agenda (that's a good thing, not a bad thing), and so there ends up being a lot of push and pull in terms of features. Most of the time that's a really good thing, as it lets everyone air out ideas. But sometimes that can be a bad thing, in that the end result tries to solve all issues and ends up not solving anyone's.

I'm only pointing this out as a precursor: it's pretty likely that the final result will not cover everything you might like, and I think it's only fair to bring that up before embarking on any adventure :) That being said...

Please post any ideas here--as bare as you can make them. For instance, Andreas' custom toolbar can be summarized as:

-- The ability to customize any toolbar to support any kind of plugin that would work with the application.

It's probably better to post here as well (as opposed to using email); that way it's a public discussion, and things can be aired out quickly without the whole "telephone" game happening. LiuCougar is probably watching this thread as well, so he'd be able to respond as I would and that would be a good thing.

As far as submissions go, the usual practice is to file tickets at http://trac.dojotoolkit.org --and to make sure (if you are submitting patches or ideas) that you've submitted a CLA (or a CCLA, if you're representing the interests of your company). We can't really look at any submissions without that CLA on file (its a long story but think "SCO vs IBM). When you create a ticket (log in as guest/guest), make sure you specify that you've filed a CLA, and under what name, so that we can expedite the whole process. This is the beginning path for someone to become an actual Dojo committer, so let's start with this and go from there.

In terms of code quality, probably LiuCougar or I will end up being the final judges of that, with any of the other Dojo committers (mostly likely Eugene, Adam and Alex) having a major say. If there's a problem, one of will say so, and probably do it privately.
---

Ok, with all that out of the way...I'm personally looking at a major re-architecture/rewrite in terms of structure, so that there's a main constructor (this would be Figure right now, the name will probably change) with a modified version of LiuCougar's plugin architecture, so that *every* shape is essentially a plugin. These plugins would need to support a number of things, such as serialization/parsing, definition of control and connection points and how the shape responds to it, how text is attached, etc. There's at least 4 other organizations highly interested in this idea, so there will be a lot of hashing things out before anything gets to code (at least I think).

Because of that, first and foremost I want to hear any and all ideas about what we all would like to see out of this, and work out the best way of writing it so that it is entirely extensible (and therefore satisfying everyone's needs with as little pain as possible). Certain things are unavoidable but good to take into account; for instance, the way ExtJS assigns an ID to every element is unfortunate but if that's something we need to do, we will. Bear in mind that there are other renderers available for DojoX GFX that are not DOM-based as well, and we need to take that into account.

So...let's hear it. Other ideas? Thoughts?

Hi all,

I guess, I found a bug in sketch's Figure.js: Events are connected to the surface's event source - that works fine in Firefox and Opera - but IE shows some strange behavior. Using this in my code, IE generates heavy cpu load and drawing and moving shapes is not possible any more.

this.node=node;
this.surface=dojox.gfx.createSurface(node, this.size.w, this.size.h);
...
this._cons.push(dojo.connect(this.surface.getEventSource(), 'onmousedown', this._md));

So, using the surface's node instead of the event source looks better, and so my code works in IE, too.

Best regards
Daniel

Hi, Tom and other folks,
How pity I just found out this thread. I have worked on my diagramming editor (based on dojox.gfx and sketch ) for some time since the dojo developer day (Feb 7). I have sent questions to liucougar too, but I possibly have sent those to you. Our project is in a tight schedule and the first diagramming demo will come out in the end of April. I have made my code totally independent of dojox.sketch (although I used it as a base) as I have to modify so many functions, like the customized tool bar mentioned above. I also plan to rename "Annotation.js" as "Shape.js" as our diagramming tool draws different shapes: rectangle, triangle, circle, etc.

Here are what I have in my demo so far: different shape drawing(rectangle, rounded rectangle, circle, ellipse, triangle, line), pan(using keyboard), duplicate(lots of pain to add to undo stack), move to front/back(again, using key), group/ungroup(partially working).

What I still need:(contribution to the ideas?):
yes, customized tool bar(right now I use the key board to implement those features, such as 'pan', duplicate, group, but eventually, I'd like those features to be visibly from the tool bar), connector(to follow shapes), 8-corner rectangle anchor system(I use the default 3-rectangle anchor system for now), text annotation in the drawing canvas(not from a window), etc. Well, below is the copy from my work proposal. Hope it is not too long to read....

Work Breakdown Structure (WBS)
Task 1:
Basic DojoX Diagramming Library

sub tasks: Shapes: The ability to draw different basic shapes (rectangle, rounded rectangle, circle, ellipse, triangle, polygon).
Connector: A connector is a line with optional arrows to connect two shapes.
Selection: The ability to create a selection for a shape or group.
Resize: The ability to resize a shape or group, using 8-corner rectangles.
Delete: The ability to delete a selected shape or group.
Text: The text annotation/label for a shape, in the drawing surface.
Arrange: The ability to arrange the z-order of the shapes/group in the drawing canvas, including “bring to front” - bring the selected shape or group to the front of the drawing canvas, “bring to back” - bring the selected shape or group to the back of the drawing canvas.
Undo: Cancel the previous command.
Redo: Repeat the previous command.
Duplicate: Duplicate the selected shape or group.
Group: Make the selected area (from multi-shapes) a group.
Ungroup: Dissolve a group.
Canvas navigation: The ability of zoom in, zoom out and pan in the drawing canvas.

Task 2:Advanced DojoX Diagramming Library and AJAX based schematic diagramming application

sub tasks: Other server-side related features: Insert: Insert an image to the drawing canvas; Save - serialization: Save the current drawing canvas to a JSON/xml file or image file; Open – de-serialization: Import or open a JSON/xml file or image file.
Advanced Text annotation/Text effects: The ability to change text font, size, wrap, typeface.
Shape effects: The ability to change the shape's line border (size, color, style), area (including fill color, background image), position and size (shape's position coordinates input, size coordinates input, rotation angle).
More arrange functions: “increment” - increase the selected shape or group's z-order by 1, “decrement” - decrease the selected shape or group's z-order by 1.
Across browser and OS: the ability of operation on IE, FF, Safari, Camino across Microsoft, Apple, and Linux.
AJAX: AJAX based serialization and de-serialization.

-Sharon

Hi folks,

I have been trying to create a flowchart-kinda tool, which requires most of the features (like Shapes, Connector, Selection, Delete, Text, Arrange, Undo, Group, Canvas navigation,etc) as mentioned in Sharon's 'Basic DojoX Diagramming Library' list. I am eagerly awaiting to use Sharon's new diagramming library to implement the same.

But at the same time, I noticed a few projects which had implemented these features even before Sharon's work is done. It would be helpful if someone can provide few links to how the above mentioned features can be implemented. Does DojoX.sketch support these features? If so, are there any source code of demos available? Thanking in advance.

Safique

Hi again,

Thanks for the links, Sharon. It really was of great help to learn about the various other diagramming tools. Also, i came across another JS library, "WireIt" - a 'Wiring Library' built on Yahoo! UI library - using which one can create cool wires like Yahoo Pipes.

Actually, i am interested in creating such an interface, but based on Dojo TK. My interface's base work was completely on Dojo, so i feel it would be better if i stick to it. It would be really helpful if u could suggest me of any work done (based on Dojo) which can assist me to create such an interface?

Thanking in advance and anticipating ur reply. :)
Safique.

dojox.sketch can be used as a start point, for undo, redo, delete, text annotation. Then add other features(but don't directly use dojox.sketch, meaning you have to create your own directory, independent of dojox.sketch). To be more specific, start from Figure.js and see if you can add your own shapes at toolbar. For more questions, you can send to my email: gyang2007 AT gmail.com
-Sharon

thanks Sharon for giving more information on it... great help..

[ADMIN: Content deleted. We do not condone link-rot.]