Allow Gradients to be chosen as Fill/Stroke

[GoogleCodeExporter]

Gradients (linear and radial) are probably the most visually impressive
feature of a SVG image.  We really need to be able to create gradients for
shapes in svg-edit.

We need a good UI solution for this.  At the moment I have none so I'm
hoping for some ideas.

1) We will need definitely need another picker that can be used to
create/delete/edit gradient stops.  Since CSS and SVG gradients used very
rarely on the real web at the moment, we may be on our own here and have to
develop one ourselves - we should make this a separate jQuery plugin
project if we start to get anywhere with it.

2) the gradient picker can take some ideas from John Allsop's cool CSS
Gradient picker: http://tools.westciv.com/gradients/

3) For launching I see a couple possibilities :

  a) in the jpicker, underneath the grid of color swatches, put a button
for gradient
  b) under the color palette at the bottom of the canvas, have a row of
gradients that have been defined for the current image as well as a +
button for gradients to create a new gradient

Original issue reported on code.google.com by codedr...@gmail.com on 18 Jun 2009 at 8:14

[GoogleCodeExporter]

I have started a jQuery plugin for a SVG Gradient Picker here:
http://jgraduate.googlecode.com/svn/trunk/test/index.html

It is a proof-of-concept only at the moment (the UI sucks, you can only do a 
linear
gradient and only with two stops: offset=0, offset=1).  Anyway, by the time we 
get to
this in svg-edit I expect to be in much better shape.

Original comment by codedr...@gmail.com on 22 Jun 2009 at 3:49

[GoogleCodeExporter]

Original comment by codedr...@gmail.com on 27 Jun 2009 at 3:47

• Added labels: NeededFor-2.3
• Removed labels: NeededFor-Future

[GoogleCodeExporter]

We will also need an area where the current drawing's gradients are stored.  I 
am
currently thinking this can be a row underneath the current palette strip.  
Clicking
in a box on this area will launch the picker (for creating new and editing 
existing).

Original comment by codedr...@gmail.com on 9 Jul 2009 at 8:00

[GoogleCodeExporter]

Some notes:

- clicking on Fill brings up color picker
- how to determine whether gradient or color picker should be brought up?
- do we replace color picker with a gradient picker?
- do we add gradient support to the color picker that expands in the color 
picker
when you click "Advanced"?

Original comment by codedr...@gmail.com on 13 Jul 2009 at 3:46

[GoogleCodeExporter]

Ok, here are my current thoughts:

- clicking on Fill/Stroke brings up a popup div
- this div has two tabs in it:  Solid Color and Linear Gradient
- the Solid Color tab will be filled with jpicker (existing color picker)
- the Linear Gradient tab will be filled with jgraduate (or an equivalent)
- Ok/Cancel must be present on both pickers then (can't easily share because 
jpicker
needs Ok/Cancel buttons of its own)

- if something is selected, then clicking on Fill/Stroke will go to the 
appropriate
tab based on what the selected element has (for instance, a rect with red fill 
will
bring up the Solid Color tab, a rect with grad fill will bring up the Linear 
Gradient
tab)
- if nothing is selected, then it's whatever current_fill is set to in the 
SvgCanvas

We actually can implement the above and not bother with the gradient palette 
that I
mentioned in comment #3 for now.  A subsequent issue could track that 
enhancement.

This is because selecting an element operates as a sort of eye-dropper tool, 
since
the fill/stroke are set to whatever that element has.  Therefore you can easily 
set
the Fill to the same gradient as an existing element just by selecting that 
element.

Original comment by codedr...@gmail.com on 13 Jul 2009 at 3:52

[GoogleCodeExporter]

The jGraduate plugin is now starting to come along (possible to pick a solid 
color or
linear gradient):  http://jgraduate.googlecode.com/svn/trunk/index.html

I invite any developers to help contribute code to jGraduate to get it ready 
for use
in svg-edit.

Original comment by codedr...@gmail.com on 20 Jul 2009 at 9:02

[GoogleCodeExporter]

Made some pretty significant steps with jGraduate tonight:
http://jgraduate.googlecode.com/svn/trunk/index.html

Should be able to get it ready for first integration into SVG-edit some time 
this week.

Original comment by codedr...@gmail.com on 22 Jul 2009 at 6:52

[GoogleCodeExporter]

I've finally minted version 0.2 of the jGraduate plugin.  It's now pretty safe 
to use
it in SVG-edit (replacing jPicker).

Original comment by codedr...@gmail.com on 27 Jul 2009 at 5:40

[GoogleCodeExporter]

Fixed in r346.  Probably going to be buggy for awhile, but open new bugs.

Original comment by codedr...@gmail.com on 30 Jul 2009 at 10:46

• Changed state: Fixed