Closure Draw has been publicly released!

[Chihiro Ito]

I have released the first public version of Closure Draw.

Features:
* Draw rectangles, ellipses, texts, images or linear paths.
* Move, rotate or delete a shape.
* Edit vertices of a path.
* Change stroke width, stroke/fill color.
* Change the order of shapes.
* Export the data as SVG.
* Import SVG which is exported from this widget.
* Implemented as a ui component of Closure Library.
* Cross browser (Opera 10.10, Firefox 3.6, Google Chrome 4 and IE8
are well tested).

Please visit the project site for detail.

http://code.google.com/p/closure-draw/

[Ged Wed]

I just tried it out.

1. Much faster than anything else i have seen for editing svg.

2. Code looks extensible.

This is a great project and i would like to extend this further to make an online CAD package

Ged

[Ged Wed]

I have been checking out the code.

1. Can you write up a basic architectural design doc
2. How to add new shapes ?

3. Does the design allow multiple shapes to be selected and changed ( for example moved)

4. Have you thought at all about a co-ordinate system to allow zoom, scaling ?

regards

ged

[Chihiro Ito]

Ged, thank you for evaluating Closure Draw.

Unfortunately, Closure Draw doesn't have (and hard to implement) some
important features like todo, zooming, multiple selection etc...
because it is intended to provide a basic drawing capability into any
web page. If you need these missing features, I recommend you to find
another library.

Anyway, you can add a new shape with following steps.

1. Define a new shape class derived from
closuredraw.StrokeAndFillShape (like closuredraw.Rect).
2. Add this class into closuredraw.AbstractShape.SvgShapes object. The
key is an SVG tag name of this shape.
3. Define a new mode class derived from closuredraw.DrawMode (like
closuredarw.RectMode).
4. Add an entry of closuredraw.Mode (defined in commands.js) for the
new shape.
5. Add the new mode into modes_ property at the constructor of
closuredraw.Canvas.
6. Add an toolbar icon for the new shape in lib/demos/css/icons.png.
7. Add a CSS class for the toolbar icon in lib/demos/css/closure-
draw.css.

thanks.

[Ged Wed]

hey,

Ok i will fork the code if you dont mind then.
I think the features i want will be very easy to add.

thanks for info.

Regards

Ged

[Chihiro Ito]

Good.

The way to customize UI of Closure Draw is described in this document
(auto-translation from japanese).

http://translate.google.com/translate?js=n&prev=_t&hl=ja&ie=UTF-8&layout=2&eotf=1&sl=ja&tl=en&u=http%3A%2F%2Fwebos-goodies.jp%2Farchives%2Fclosure_draw_updated_to_be_more_customizable.html&act=url

You should rewrite canvas.js and mode.js to add any core functionality
like zooming or multiple selection. Though I don't have enough time to
write a complete document, please feel free to ask if you have any
question.

cheers.

On Dec 23, 6:47 am, Ged Wed <ged...@gmail.com> wrote:
> hey,
>
> Ok i will fork the code if you dont mind then.
> I think the features i want will be very easy to add.
>
> thanks for info.
>
> Regards
>
> Ged
>

[Ged Wed]

thanks.

I will hack it this Christmas and see how i go.
I will be asking :)

g

[Ged Wed]

Hey,

I noticed from looking at the html source that you have 2 canvases groups.
The first is the actual svg objects, and the second is the overlay of
the pull points for interaction.
I cant seem to find where this is handled for a shape anywhere.

got any code links for me to this ?

Gerard

[Ged Wed]

It might be a good idea to put a wiki page called "Developers Setup".
SO that others can quickly see how to write new javascript code.

This is different from "getting started", ad this really is for people
using the existing code base to build derived application.

G

[Chihiro Ito]

> I noticed from looking at the html source that you have 2 canvases groups.

Are you mentioned about closure-draw/lib/demos/import_test.html? It is
a demo for SVG import / export feature. demos/tutorial.html is a good
starting point. In addition, demos/chromeless.html is an example for
UI customization.

Main code of Closure Draw is in closure-draw/lib/*.js. These are
sammaries for each file.

canvas.js - The UI component class for the drawing area.
closuredraw.js - This file is obsolete. Simply requires
closuredraw.Widget.
commands.js - Definition of UI commands.
controller.js - A controller class to tie the toolbar to the canvas.
deps.js - A dependency definition. This file is used by Closure
Library's dependency management system.
event.js - Definition of event classes dispatched by the canvas or the
toolbar.
mode.js - Definition of mode classes. Almost all UI interaction (Move/
Draw shaps for example) is processed by them.
shapes.js - Definition of all shapes.
transform.js - A utility class for coordinate transformation.
utils.js - Some utility functions and constants.
vmlelementwrapper.js - A wrapper class for goog.graphics.Element to
avoid IE's weird behavior.
widget.js - The UI component that contains the canvas and the toolbar.

> It might be a good idea to put a wiki page called "Developers Setup".

You can execute the normal (not compiled) code instantly after
checking out the project. If you add a .js file, you should execute
"rake deps" in closure-draw/lib (python, ruby and rake are required.)
This command will recreate deps.js. See the following url for detail.

http://code.google.com/intl/ja/closure/library/docs/depswriter.html

I will write a document about how to compile the project as soon as
possible.

On Dec 24, 12:27 am, Ged Wed <ged...@gmail.com> wrote:
> It might be a good idea to put a wiki page called "Developers Setup".
> SO that others can quickly see how to write new javascript code.
>
> This is different from "getting started", ad this really is for people
> using the existing code base to build derived application.
>
> G
>
> On 23 December 2010 16:00, Ged Wed <ged...@gmail.com> wrote:
>
>
>
> > Hey,
>
> > I noticed from looking at the html source that you have 2 canvases groups.
> > The first is the actual svg objects, and the second is the overlay of
> > the pull points for interaction.
> > I cant seem to find where this is handled for a shape anywhere.
>
> > got any code links for me to this ?
>
> > Gerard
>
> > On 23 December 2010 15:55, Ged Wed <ged...@gmail.com> wrote:
> >> thanks.
>
> >> I will hack it this Christmas and see how i go.
> >> I will be asking :)
>
> >> g
>

> >> On 23 December 2010 14:44, Chihiro Ito <sourcewal...@gmail.com> wrote:
> >>> Good.
>
> >>> The way to customize UI of Closure Draw is described in this document
> >>> (auto-translation from japanese).
>

> >>>http://translate.google.com/translate?js=n&prev=_t&hl=ja&ie=UTF-8&lay...

[Ged Wed]

Hey,

No you misunderstand.

When you do a view source and analyse the way the SVG is structured on
a page i see 2 canvas groups.
1. Main
2. used for drawings the shape points when editing.

I wanted some more info on how this works and where i can mess around
with this in the code.
Its a Very smart way of doing it too BTW

G

[Chihiro Ito]

OK, I got it.

The main group is handled by each shape class. See
closuredraw.Rect.prototype.recreateElement method for example.

The interaction group is handled by closuredraw.Canvas class. All
shapes in this group are created by
closuredraw.Canvas.prototype.addHandleShape method.

Just FYI, Closure Draw is built on Closure Library's goog.graphics
module. If you are not familiar with it, I recommend you to visite the
following pages at first.

API Reference:
http://closure-library.googlecode.com/svn/docs/index.html

Samples:
http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/graphics/

On Dec 24, 3:20 am, Ged Wed <ged...@gmail.com> wrote:
> Hey,
>
> No you misunderstand.
>
> When you do a view source and analyse the way the SVG is structured on
> a page i see 2 canvas groups.
> 1. Main
> 2. used for drawings the shape points when editing.
>
> I wanted some more info on how this works and where i can mess around
> with this in the code.
> Its a Very smart way of doing it too BTW
>
> G
>

[Ged Wed]

Hey

I am just getting everything setting up so i can run as dev and production.
i am developing on windows and using the nginx web server. Awesome web
server BTW
I always prefer to run everything through a web server, and am having
trouble with pathing a few things.

I am rooting at the "trunk" of course so that the web server has
access to everything underneath.
in closure-draw.css, you have a reference to icons.png
This is the only thing that is failing to be properly pathed in.

--------

building. Are you using the python tools to do all your building ?
I saw your ruby stuff. i know a bit of ruby, but am planning to write
a few python helpers or batch files to help make coding easier.

Ged

[Chihiro Ito]

Hi.

Your work seems to be going well. It is pleasure for me too :)

> in closure-draw.css, you have a reference to icons.png
> This is the only thing that is failing to be properly pathed in.

icons.png should be read properly since icons.png and closure-draw.css
are in the same directory (closure-draw/lib/demos/css). Where did you
put them in?

> building. Are you using the python tools to do all your building ?

Yes, the ruby stuff (closure-draw/lib/Rakefile) is used for simple
automation. Everything what they do is just execute depswriter.py or
closurebuilder.py. Those usages are in the following pages.

Using DepsWriter
http://code.google.com/intl/ja/closure/library/docs/depswriter.html

Using ClosureBuilder
http://code.google.com/intl/ja/closure/library/docs/closurebuilder.html

cheers.

On Dec 24, 7:26 am, Ged Wed <ged...@gmail.com> wrote:
> Hey
>
> I am just getting everything setting up so i can run as dev and production.
> i am developing on windows and using the nginx web server. Awesome web
> server BTW
> I always prefer to run everything through a web server, and am having
> trouble with pathing a few things.
>
> I am rooting at the "trunk" of course so that the web server has
> access to everything underneath.
> in closure-draw.css, you have a reference to icons.png
> This is the only thing that is failing to be properly pathed in.
>
> --------
>
> building. Are you using the python tools to do all your building ?
> I saw your ruby stuff. i know a bit of ruby, but am planning to write
> a few python helpers or batch files to help make coding easier.
>
> Ged
>

> On 23 December 2010 20:27, Chihiro Ito <sourcewal...@gmail.com> wrote:
>
>
>
> > OK, I got it.
>
> > The main group is handled by each shape class. See
> > closuredraw.Rect.prototype.recreateElement method for example.
>
> > The interaction group is handled by closuredraw.Canvas class. All
> > shapes in this group are created by
> > closuredraw.Canvas.prototype.addHandleShape method.
>
> > Just FYI, Closure Draw is built on Closure Library's goog.graphics
> > module. If you are not familiar with it, I recommend you to visite the
> > following pages at first.
>
> > API Reference:
> >http://closure-library.googlecode.com/svn/docs/index.html
>
> > Samples:

> >http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/gr...

[Ged Wed]

ok makes sense.
thansk

G