Allow an Outline mode / Wireframe mode, to display all elements on the canvas, even hidden

[GoogleCodeExporter]

Sometimes it's hard to find a shape if it has no fill and no stroke, or if
its colors are the same as a bigger object on top of which it is.

Having a mode where only the outline (wireframe) shapes would be shown
would allow to see these "hidden" elements.

Original issue reported on code.google.com by worms_...@yahoo.com on 20 Aug 2009 at 7:32

[GoogleCodeExporter]

As discussed in IRC, this would probably be pretty easy to do:  Just turn on a
special stylesheet that overrides all fill and stroke styles for all elements.

The only question is how to make this available in the UI (worst case: add a new
button next to "Edit Source").

Original comment by codedr...@gmail.com on 20 Aug 2009 at 7:35

• Changed state: Accepted
• Added labels: NeededFor-2.4, Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Well, I found a workaround for this, apart from reading the code.

Most browsers have a CSS selection option, so selecting "View/ Page style /no 
style"
for the page shows the bounding boxes of all the existing objects :-)
Once you select the "hidden" ones, you can return to a page with its normal 
style. :-)

Original comment by worms_...@yahoo.com on 23 Aug 2009 at 12:18

[GoogleCodeExporter]

Original comment by codedr...@gmail.com on 10 Sep 2009 at 7:05

[GoogleCodeExporter]

Now that we have a Document Properties window, this should be pretty 
straightforward
and makes a good first bug for someone.  Quite simply:

- some way to toggle between Wireframe and Solid mode
- when Wireframe mode is on, add a <style> element to the SVG document that 
overrides
all styles for all SVG element types for fill/stroke properties:
- when Solid mode is on, remove the <style> element from the SVG document

svg, rect, ellipse, circle, line, polyline, polygon, path, text {
   fill: none;
   stroke: #444;
   stroke-width: 1px;
   stroke-opacity: 1.0;
   stroke-dasharray: 1,1;
   pointer-events: stroke;
}

We might need an !important in there.

When serializing the text, we need to remove the <style> element (we do not 
want it
serialized).

Original comment by codedr...@gmail.com on 17 Sep 2009 at 3:30

• Added labels: Good-First-Bug

[GoogleCodeExporter]

Added in r857. That was easy. Did things a bit more simple than suggested, 
currently 
we just toggle a class that is set on #workarea, so the SVG isn't actually 
affected 
at all. The CSS is simply included in our svg-editor.css file. Seems to work 
cross-
browser, so good enough for me.

I also made an exception for text, which as you know normally uses fill instead 
of 
stroke. Not sure if this is a good, since one might still want to see behind 
each 
letter's fill. Perhaps wormsxulla has a suggestion here?

Jeff, you mention the Document Properties, did you intend for the button to go 
in 
there? While that would make our main interface cleaner, I feel its better 
where it 
is as I can see users wanting to easily toggle it on/off without having to 
bring up 
the doc props. Also this way one easily sees if the mode is on, so there's less 
confusion when trying to apply a fill.

Leaving the issue open until everyone's happy with the implementation.

Original comment by adeve...@gmail.com on 21 Oct 2009 at 1:46

[GoogleCodeExporter]

I am happy as it it, for the text case. It seems logical to have the text in 
solid
black. Maybe other users will ask something else, we'll see!
Thanks!

Original comment by worms_...@yahoo.com on 21 Oct 2009 at 2:36

[GoogleCodeExporter]

I think your implementation is great.  Consider me signed off on it.

Original comment by codedr...@gmail.com on 21 Oct 2009 at 2:36

[GoogleCodeExporter]

More happy customers = closed!

Original comment by adeve...@gmail.com on 21 Oct 2009 at 2:44

• Changed state: Fixed