4xx / svg-edit Goto Github PK

Red cross? Other ideas?

For some controls it might make more sense to use spinner controls instead
of pull-downs with predefined values.

Specifically, I would like to see:

- radius
- stroke-width

We could also experiment with opacity, but I think I like the simple
pull-downs for that.

The biggest amount of work will be to find a license-compatible jquery
plugin that implements a spinner control and is accessible.

Right-clicking on a palette color in Opera 10 in OSX does not change the
stroke color.  

If the jquery right-click plugin does not work in Opera we will need an
alternate way to set the stroke color

> What steps will reproduce the problem?
1. Draw something
2. Click the New icon

> What is the expected output? What do you see instead?
That something is gone without warning. I would expect a warning popup
about unsaved changes.

> What version of the product are you using? On what operating system?
http://gk2.sk/svg-edit/ as of now, in Firefox 3.0.10 on openSUSE 11.1.

What steps will reproduce the problem?
1. set canvas size to 1600x1200
2. scroll to bottom right corner of canvas
3. start drawing
4. drawing will appear in upper left corner (ie. the scrolled coordinates 
aren't added to mouse coordinates)

Tested in Firefox/Opera

This is really great idea.

I would like to see the ability to click an existing item and edit it.

What steps will reproduce the problem?
1. Hover over any buttons in the svg-edit UI
2. No tooltips are present

What is the expected output? What do you see instead?
- tooltips should be present to aid in usability of the editor

1) Move the selected element around on the canvas using the arrow keys.

2) Bind +/- to the Move to Top/Bottom keys?

Current GUI of svg-edit main branch has drop down menu of opacity and fill,
How about having vertical sliders to smooth operation.

Add ability to group and ungroup objects.

What steps will reproduce the problem?
1. select freehand ellipse/rectangle tool
2. draw something
3. after mouseup the path disappears but is not replaced with ellipse/
rectangle

What steps will reproduce the problem?
1. Draw some elements (rect, text)
2. Click Save Image
3. View Source of the new image

What is the expected output? What do you see instead?
You will see that the serialized SVG has several useless attributes defined
like: fill-opacity="1" stroke-opacity="" stroke-dasharray="" stroke-width=""

The serialization needs to remove these attributes.

It is not clear visually which tool is active from the flyout (Square,
Rect, Freehand Rect).  Now that Pavol has added new artwork for the
freehand sub-tools, it would be appropriate (i.e. no longer confusing) to
change the image of the tool once the sub-tool is chosen.

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

Reusing the pencil icon also for these two features is confusing

An experimental Text-tool Hack.

We should record actions (state) in a history and be able to undo. 
Requirements:

1) Add an Undo button after New, Save and before Delete

2) Every action in the canvas should be stored in a stack

3) Provide a public interface function in canvas to get the number of
commands on the stack

4) Provide a public interface function in canvas to Undo, which pops the
last action off the stack and updates the state (firing changed events outward)

5) The undo button should only be available upon a changed event when the
canvas has 1 or more commands on its stack

A "Redo" functionality would also be nice, but not as necessary, in my opinion.

Option for alternative positions of toolbars:

[10:16] <wormsxulla> being able to switch the position of the horizontal / 
vertical toolbar
[10:17] <wormsxulla> so the one with the most icons become the horizontal 
one and the user would see all the icons :)
[10:17] <wormsxulla> and also move the palette at the top of the canvas :)

Currently the only way to resize an element is to delete it and then redraw
it.  This is a major flaw in the UI of any editor.

1) turn the "selectedOutline" SVG element into a group <g> and nest the
rectangle within it

2) Add a 'grip' to the corners of the selected outline for outlines of
rect, circle, ellipse, line (not necessary for text?)

3) when mouseover the corner grips, the cursor changes to the appropriate
diagonal resize cursor

4) Add a 'grip' to the midpoints along the lines of the selected outline

5) when mouseover the side grips, the cursor chagnes to the appropriate
resize cursor (vertical/horizontal)

6) when mousedown on a grip, track in mousemove the new bounds and update
the selectedOutline as well as the transform value (similar to dragging)

7) when mouseup from a grip, calculate the new size and then calculate the
dimensions that need to change on the element:
  a) rect's x, y, width and height
  b) circle's cx, cy, r
  c) ellipse's cx, cy, rx, ry
  d) line's x1, y1, x2, y2
  e) path - must recalculate all coordinates for the path segments

The reason why #7 is important is to avoid having to have a bunch of
transform attributes in our SVG source once a resize is complete (same
logic is behind the dragging code).

When/if we get into grouping objects then we might want to consider using
the transform attributes.

svg-edit needs to have a button to change the stacking order of a selected
element.  Requirements:

1) Add two new buttons to the context panel, initially invisible: Bring
Forward, Send Backward

2) Upon an element being selected, the editor will enable the Bring Forward
button if the selected element's nextSibling does not have an id ==
"selectedBox"

3) Upon an element being selected, the editor will enable the Send Backward
button if the selected element's previousSibling is non-null

4) Upon clicking Bring Forward, remove the selected element from the DOM
and insert it after the selected element's next sibling

5) Upon clicking Send Backward, remove the selected element from the DOM
and insert it before the selected element's previous sibling (or
equivalently, remove the selected element's previous sibling from the DOM
and insert it after the selected element)

What steps will reproduce the problem?
1. Select the Pencil Tool
2. Draw a curly path with it
3. Using the Select tool, click on the path

What is the expected output? What do you see instead?
Expect the path to be selected in a bounding box.  Instead the boudning box
is sized properly, but the path itself becomes corrupted (a straight line
that goes off the canvas).

Now that it is possible to select an element in svg-edit, the next logical
step is to be able to drag the currently selected element.  Here's my proposal:

- no new tool, we use the Select Tool for this purpose
- user clicks the select Tool
- when the user mouses down on an element it is selected
- if a user drags (does not mouse up) that element is moved with the cursor
- the element stops moving when the user mouses up (but it remains selected)

What steps will reproduce the problem?
1. Click on the Square/Rect tool
2. Try to draw a square/rect
3. Cannot draw it

Note that the FreeHand rect tool still works fine.

A first step to Bézier curves would be to add support for polylines at
first. I believe the easiest way would be to add new points to path on each
click. This would become "add points mode".

The next step could be "move points mode" - drag nearest point of the
selected path or maybe little circles could be drawn in some working layer
- not saved during save, and hidden or removed after changing tools or modes.

Then I think there should be some "edit points mode" - at first this could
simple make corners switch from sharp corners, to round corners.
Eventually, there should be some kind of edit mode for Bézier points (I
mean points that control the curve).

Add Save svg to Server feature

Using XMLHttpRequest, it should be possible to fetch an SVG file from a URL
and populate the SVG canvas.  

This would work great for files created from svg-edit in the first place. 
However, this will cause problems with files created elsewhere because
svg-edit is still fairly basic.  

I'll list three off the top of my head:

1) Lots of online SVG content uses the style attribute (thanks to
Inkscape).  So if we had the following element in an loaded SVG:

<rect style="fill:red" />

And the user selects that rect and changes its fill attribute to blue - the
rect would still show as red because the style attribute takes precedence.

2) If the SVG file references external CSS files or raster images using
relative URLs, svg-edit would not see them

3) If the SVG file is not 'flat', what will happen when the user attempts
to select a group?  Will need to experiment.

One option would be to run the file through a mini-scour in JavaScript (see
http://codedread.com/scour/ ) to get it into a better shape for our editor.

Add ability to change background attributes:
* color
* opacity

What steps will reproduce the problem?
1. Select the square button 
2. The square/rectangle flyout menu appears
3. Select the fill color button

What is the expected output? What do you see instead?
The square/rectangle menu should collapse.  The fill color wheel appears,
but the square/rectangle flyout menu also remains open.  

Please use labels and text to provide additional information.

What steps will reproduce the problem?
1. Bring up the editor
2. Note that all pulldowns (opacity, fill-opacity, stroke-width, etc) are
blank (no text)
3. Observe that the editor operates just fine.  Additionally, changing the
pulldown values to some new value updates the box just fine.


This seems to be a WebKit bug that we may not be able to fix.

What steps will reproduce the problem?
1. Click fill 
2. Set color
3. Cannot set opacity

What is the expected output? What do you see instead?
Opacity is an important visual effect. Artists will want to set it

We should play with minification and compression for SVG-edit's JavaScript.
 Currently:

svg-editor.js = 23k
svgcanvas.js = 35k

Raw gzip compression takes this down to:

svg-editor.js = 5.7k
svgcanvas.js = 8.6k

In order to bring in more features, I think we need to slightly modify the
existing UI (which is starting to get a little cluttered).

I think we should introduce a context-sensitive panel area on the top of
the editor (Office's Ribbon and Inkscape do something similar).  This panel
area should stretch across the entire UI and only contain tools that can be
used with the given mode.

For instance:

- in Select mode, if any element is selected, then the Delete button can be
present (remove from existing toolbar and change the mode in which that
button works)
- in Select mode, when a <text> element is selected, then the font-size,
font-family, text box controls would be present
- in Select mode, if a <rect> element is selected, then rx/ry edit boxes
will be present
- in Select mode, if any element is selected, then a Bring Forward and Send
Backward button would be present (to change the stacking order)

So this issue covers reorganizing the UI a little bit, providing a
context-sensitive tool panel, and changing the mode in which the Delete
button is used.

Subsequent enhancement requests will be to add new features (like Send
Forward mentioned above).

If a use want to draw rectangle, he has to make 2 clicks. First click to
open a 3 button menu and then one more click to select one out of it.
IMHO, It is better to convert 1st click into hover so the operation will be
much easier.

The biggest missing piece for svg-edit at the moment is probably supporting
text.  Here is my take on a very basic first pass for this feature:

1) introduce a new Text tool button (usually a Times Roman 'T')
2) a section underneath opacity called 'font' that has:
  a) a pull-down to select some preset font sizes
  b) a pull-down to select a few preset font-family (maybe just serif and
sansserif?)
  c) a single-line edit control for entering the text (id="text")
3) The elements in reqt 2 will be greyed out and unselectable if a <text>
element is not currently selected
4) upon clicking the Text tool, clicking in the canvas will create a <text>
element with the contents "<text>" at that location and it will be
selected, the HTML "text" edit box will gain focus
5) when a text element is selected, the fill, stroke, font-size,
font-family and "text" edit boxes will be updated with the properties of
the <text> element
6) editing the contents of the "text" edit box will update the currently
selected <text> element as the user types (including changing the shapes of
the selected outline)
7) changing the values of any of the fill, stroke, opacity, font-size,
font-family controls will update the selected <text> element in the canvas
(including changing the shape of the selected outline)

What steps will reproduce the problem?
1. Create a text element
2. The bounding box (selected outline) always shows up at (0,0) in
Safari/Chrome

What steps will reproduce the problem?
1. Click on Circle tool
2. Set fill to a color
3. Try to set the stroke to none

What is the expected output? What do you see instead?
Cannot set stroke to none.  In the palette there is a 'none' stroke - but
clicking this only sets the Fill to none.  There is no way to set the
stroke to none.

Here are some possibilities:  

a) Allow stroke-width of 0 in the pull-down
b) Modify the JPicker code to support a 'None' value (useful for both fill
and stroke)
c) Add a checkbox next to both Fill/Stroke - if the checkbox is checked
then the Fill/Stroke applies
d) Have a 'none' button within the Fill/Stroke div that sets the color to None

In all the above solutions, we still have the following complication: you
always need some stroke to be able to use the Pencil or Line tool.  My
suggestion is that once we figure out the way to allow a None stroke that
the Pencil/Line tools are ONLY enabled when the Stroke color is not None.

1) Should add context controls for rect, circle, ellipse, line:
  a) rect.x, rect.y, rect.width, rect.height
  b) circle.cx, circle.cy, circle.r
  c) ellipse.cx, ellipse.cy, ellipse.rx, ellipse.ry
  d) line.x1, line.y1, line.x2, line.y2

2) these controls would have to be text boxes (not pull-down like rect's
radius)

3) the input must be validated as a number (we should limit to positive
non-zero integer for now)

4) suggest that the value only change once enter is pressed (it would be
distracting to see the rect's width change from 1 to 10 to 100 when typing
"100")

5) If an invalid string is entered and then enter is pressed, can simply
reset the value to the selected element's current value

6) Note that the values in these controls should be set to the selected
element's value, they are not used as values the next rect's dimensions,
for instance.

What steps will reproduce the problem?
1. Select 'none' stroke (right-click the red x in the palette)
2. Click the Pencil tool
3. Draw in the SVG canvas

What is the expected output? What do you see instead?

Nothing is visible, yet if you click Save/Serialize that path is present
with stroke:none.  There is no way to delete this path.

The editor should prevent using tools when no visible result would occur
due to fill/stroke properties set to 'none'.

In Select mode, it should be possible to drag-select and select multiple
elements in the canvas.

1) Draw a 'rubber-band' box as user starts dragging in Select mode, keeping
track of the bounding box.

2) Upon mouseup in select mode, select all elements that overlap with the
selection bounding box and show a selected outline that encompasses all of
the selected elements.

3) If multiple elements are selected, the context panel only allows the
following tools (for now):  Delete

4) Internally, code will have to be refactored so that selected is now an
array of all elements selected.  When the selectedOutline is recalculated
it will have to iterate over all selected elements, expanding the area
until of selection.  When dragging the selected, must now iterate, etc.

This is a pretty large change, and it should probably be done earlier
rather than later in 2.2 so that multi-select mode is thoroughly integrated
before moving on to other big features (like group/ungroup, for instance).

It will be nice to have keyboard handling. pressing "l" will start line.
press 'f' will start freehand and so on.

What steps will reproduce the problem?
1.Draw freehand rectangle or circle
2.Try to undo.
3.You will be unable to do that at current version

Add option to select canvas size

Add ability to rotate objects

I'd like to give svg-edit some visual identity, so would like to hear ideas
for a cool logo.  No set timeframe for this, just want to record it as an
issue.

Following context tools are needed for text elements:

1) Bold, Italic, Underline

2) These could be done as push-buttons (my preference) or simple checkboxes
with labels.

We should store the version number (2.0, 2.1) and display it in the footer as:

SVG-edit v2.0 @ http://svg-edit.googlecode.com/

What steps will reproduce the problem?
1. Click on the Square tool (the square/rect flyout menu appears)
2. Click on the Circle tool (the circle/ellipse flyout menu appears)
3. Having two menus open at the same time is a little confusing

What is the expected output? What do you see instead?
Only one flyout menu should be open at a time

Support for zooming:
Zoom +
Zoom -
Zoom 1:1

see:
http://support.adobe.com/devsup/devsup.nsf/docs/50614.htm
http://snippets.dzone.com/posts/show/5336

Selecting the 'None' box in the palette does sets the color to black in
Safari or Chrome.

Restructure of the tools has caused this (r224)