HeinrichApfelmus / threepenny-gui

GUI framework that uses the web browser as a display.
https://heinrichapfelmus.github.io/threepenny-gui/
Other
439 stars 77 forks source link

Define SVG Elements/Attributes and use namespace aware javascript fcn to create. #89

Closed vesten closed 9 years ago

vesten commented 10 years ago

I hope these changes are adequate to address issue #87 (SVG tags not rendered). Here I've tried to define SVG elements and attributes following the conventions you've used for HTML tags, modify driver.js to use createElementNS(), update Threepenny.hs & the .cabal file to enable building, and add a brief example. Please note/review my choice of the 'svg_' prefix to avoid name collisions (Elements, Attributes). I chose it thinking it would be straightforward for users but it feels a bit inelegant. I'm certainly open to alternatives.

Thanks for all of the energy you've given to Threepenny.

HeinrichApfelmus commented 10 years ago

First of all: thanks!

Looks fine so far, except that I'm not too keen on the svg_ prefix and the module structure. I'd prefer a new module Graphics.UI.Threepenny.SVG that imports Graphics.UI.Threepenny.SVG.Elements and Graphics.UI.Threepenny.SVG.Attributes. In turn, this module can then be imported via

import qualified Graphics.UI.Threepenny.SVG as SVG

to get all the SVG goodies with a suitable prefix.

Also, I'm a fan of CamelCase, so I'd prefer to not use the underscore _. Unfortunately, it appears that the SVG spec is somewhat inconsistent: sometimes, they use camel case, sometimes they use hyphens for identifiers. Ouch. I think I need to come up with a consistent naming scheme for Threepenny.

The changes to driver.js for the SVG namespace stuff are a bit ad hoc, but I think they're fine.

jvdp commented 9 years ago

I've been using this branch for a while and it works perfectly so far.

I'd like to make a suggestion though to make it a bit more convenient. I added the following module to my project to import instead of the separate Attributes and Elements modules:

module Graphics.UI.Threepenny.SVG (
  module Graphics.UI.Threepenny.SVG.Attributes,
  module Graphics.UI.Threepenny.SVG.Elements
  ) where

import Graphics.UI.Threepenny.SVG.Attributes hiding (path, title, glyphRef)
import Graphics.UI.Threepenny.SVG.Elements hiding (cursor, mask, style)

In the (few) cases where there are clashes this hides the least common attribute/element, and if they are really needed the programmer can just import the relevant module.

HeinrichApfelmus commented 9 years ago

I have merged the changes into the latest master branch and also created a new Graphics.UI.Threepenny.SVG module. Thanks for the contributions and suggestions!