Svg support #25

doofin · 2018-02-24T08:54:57Z

Seems that we should move every svg thing here,which is idiom github workflow..

For reference:

https://developer.mozilla.org/en-US/docs/Web/SVG
SVG-Tags in scalatags with MDN documentation:

Scalatags impl:

SVG tag to dom-type association in scalatags
https://github.com/lihaoyi/scalatags/blob/44cbd0602d40186d33d39b8d4a259f681d2e4a3b/scalatags/shared/src/main/scala/scalatags/generic/SvgTags.scala
Svg attrs https://github.com/lihaoyi/scalatags/blob/44cbd0602d40186d33d39b8d4a259f681d2e4a3b/scalatags/shared/src/main/scala/scalatags/generic/SvgAttrs.scala

Create generic svg/Attrs.scala trait with typed listings of SVG attributes
(created : https://github.com/raquo/scala-dom-types/blob/svg/shared/src/main/scala/com/raquo/domtypes/generic/defs/attrs/svgAttrs.scala )
Same for svg/Tags.scala (might need multiple files similar to how HTML tags are done)
(created: https://github.com/raquo/scala-dom-types/blob/svg/shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala )
Add JS-specific type aliases of the above to jsdom/defs/package.scala (https://github.com/raquo/scala-dom-types/blob/svg/js/src/main/scala/com/raquo/domtypes/jsdom/defs/package.scala)
Probably need a new key class: SvgAttr (I don't think we should reuse Attr for that), and a canonical builder for it (see canonical dir). Don't want to accidentally use SVG attrs on HTML elements, and without Track parent tag of properties #13 not sure what else we can do. Not sure about this, and IIRC you're not using these concrete classes in Outwatch, so I guess I'll need to think about this some time later.
(Don't understand this point,Currently I am reusing lazy val accentHeight = stringAttr("accent-height"),will there be problems?
)
For the Tag class, I think no need to create SvgTag, maybe Tag[SVGElement] would be enough. Not sure.
(Currently as T[SvgElement])
Lastly, we'd need to add SVG to the bundle in CompileTest. I think I'm ok allowing naming collisions between SVG and HTML, since most librarries will probably choose to namespace everything svg-related. Things within SVG should probably be free of collisions and follow the same naming guidelines as our HTML stuff
SVG Namespaces? (No need to do this in domtypes?)

fixes #20

…rs/svgAttrs.scala:8: Attrs is already defined as trait Attrs

recreate svg branch

finished this really long svg type def..

raquo · 2018-02-24T09:31:22Z

README.md

+## Community & Contributing
+
+### updating:
+    Currently we are working to add support for svg at svg branch ,help very welcomed!


This is not needed given what's in master and in #26

raquo · 2018-02-24T09:37:03Z

js/src/main/scala/com/raquo/domtypes/jsdom/defs/package.scala

@@ -86,6 +86,10 @@ package object defs {
    type EmbedTags[T[_ <: dom.Element]] = generic.defs.tags.EmbedTags[T, dom.Element, dom.html.Image, dom.html.IFrame, dom.html.Embed, dom.html.Object, dom.html.Param, dom.html.Video, dom.html.Audio, dom.html.Source, dom.html.Track, dom.html.Canvas, dom.html.Map, dom.html.Area]
    type TableTags[T[_ <: dom.Element]] = generic.defs.tags.TableTags[T, dom.Element, dom.html.Table, dom.html.TableCaption, dom.html.TableCol, dom.html.TableSection, dom.html.TableRow, dom.html.TableCell, dom.html.TableHeaderCell]
    type MiscTags[T[_ <: dom.Element]] = generic.defs.tags.MiscTags[T, dom.Element, dom.html.Title, dom.html.Style, dom.html.Element, dom.html.Quote, dom.html.Progress, dom.html.Menu]
+    import org.scalajs.dom._
+    import svg._


please don't use those extra imports – instead, spell out dom.svg.Type everywhere instead of just Type – yes, even in this huge list. It's just much easier to text search, and matches the style in the rest of the definitions here.

raquo · 2018-02-24T09:37:46Z

js/src/main/scala/com/raquo/domtypes/jsdom/defs/package.scala

@@ -86,6 +86,10 @@ package object defs {
    type EmbedTags[T[_ <: dom.Element]] = generic.defs.tags.EmbedTags[T, dom.Element, dom.html.Image, dom.html.IFrame, dom.html.Embed, dom.html.Object, dom.html.Param, dom.html.Video, dom.html.Audio, dom.html.Source, dom.html.Track, dom.html.Canvas, dom.html.Map, dom.html.Area]
    type TableTags[T[_ <: dom.Element]] = generic.defs.tags.TableTags[T, dom.Element, dom.html.Table, dom.html.TableCaption, dom.html.TableCol, dom.html.TableSection, dom.html.TableRow, dom.html.TableCell, dom.html.TableHeaderCell]
    type MiscTags[T[_ <: dom.Element]] = generic.defs.tags.MiscTags[T, dom.Element, dom.html.Title, dom.html.Style, dom.html.Element, dom.html.Quote, dom.html.Progress, dom.html.Menu]
+    import org.scalajs.dom._
+    import svg._
+    type svgTags[T[_ <: dom.Element]]=generic.defs.tags.SvgTags[T,dom.Element,svg.Element,Circle,ClipPath,Defs,Desc,Ellipse,FEBlend,FEColorMatrix,ComponentTransferFunction,FEComposite,FEConvolveMatrix,FEDiffuseLighting,FEDisplacementMap,FEDiffuseLighting,FEFlood,FEFuncA,FEFuncB,FEFuncG,FEFuncR,FEGaussianBlur,FEImage,FEMerge,FEMergeNode,FEMorphology,FEOffset,FEPointLight,FESpecularLighting,FESpecularLighting,FETile,FETurbulence,Filter,G,Image,Line,LinearGradient,Marker,Mask,Metadata,Path,Pattern,Polygon,Polyline,RadialGradient,RectElement,SVG,Stop,SVG,Switch,Symbol,svg.Text,TextPath,TSpan,Use,View]


Pls capitalize the first S so that this type's name is consistent with other type names above

Formatting: add spaces around =, and put each type param on a new line

raquo · 2018-02-24T09:40:49Z

shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala

+    SvgRectElement <: SvgElement,
+    Svg <: SvgElement,
+    SvgStop <: SvgElement,
+    SvgSVG <: SvgElement,


This type param seems to be unused? There's another Svg two lines above this

raquo · 2018-02-24T09:42:40Z

shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala

+
+import com.raquo.domtypes.generic.builders.TagBuilder
+
+trait SvgTags[T[_ <: DomElement], DomElement, SvgElement <: DomElement,


T[_ <: DomElement] should be T[_ <: SvgElement], I think, and it doesn't seem like we need the DomElement type param at all.

raquo · 2018-02-24T09:43:40Z

shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala

+   *
+   * MDN
+   */
+  lazy val altGlyph:T[SvgElement] = tag("altGlyph")


Formatting: Pls add a space between : and T in all these lazy vals to be consistent with other traits like this

raquo · 2018-02-24T09:45:11Z

shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala

+   *
+   * MDN
+   */
+  lazy val `missing-glyph`:T[SvgElement] = tag("missing-glyph")


We should not be using backticks. Tags with dashed should be camelCased instead. (same for other tags)

That's true,gonna do that later with regex after initial test

raquo · 2018-02-24T09:46:47Z

shared/src/main/scala/com/raquo/domtypes/generic/keys/SvgAttr.scala

+import com.raquo.domtypes.generic.codecs.Codec
+
+/**
+  * This class represents an HTML Element Attribute. Meaning the key that can be set, not the whole a key-value pair.


Update "HTML" to "SVG"

raquo · 2018-02-24T09:47:45Z

shared/src/main/scala/com/raquo/domtypes/generic/defs/attrs/svgAttrs.scala

+import com.raquo.domtypes.generic.builders.AttrBuilder
+import com.raquo.domtypes.generic.codecs.{BooleanAsOnOffStringCodec, BooleanAsTrueFalseStringCodec}
+
+/** @tparam A svg Attribute, canonically [[com.raquo.domtypes.generic.keys.SvgAttr]] */


Formatiing: svg should be capitalized ("SVG") in the comment

doofin · 2018-03-01T04:36:28Z

CI gives error due to that some attr name is the same as element name ..

[error] /home/travis/build/raquo/scala-dom-types/js/src/test/scala/com/raquo/domtypes/CompileTest.scala:76: object svg inherits conflicting members:
[error] lazy value clipPath in trait SvgAttrs of type com.raquo.domtypes.generic.keys.SvgAttr[String] and
[error] lazy value clipPath in trait SvgTags of type com.raquo.domtypes.generic.builders.Tag[org.scalajs.dom.svg.ClipPath]
[error] (Note: this can be resolved by declaring an override in object svg.);
[error] other members with override errors are: cursor, filter, mask
[error] object svg
[error] ^
[error] one error found
[error] (domtypesJS/test:compileIncremental) Compilation failed
[error] Total time: 19 s, completed Mar 1, 2018 4:29:50 AM

    /**
      * The clip-path attribute bind the element is applied to with a given <clipPath> element
      * As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
      *
      * Value 	<FuncIRI> | none | inherit
      *
      * MDN
      */
    lazy val clipPath = stringAttr("clip-path")

Should we namespace them ? Or provide alternative name?
BTW , the seemly simple and innocent compileTest actually find problems! Gonna remember this nice trick

raquo · 2018-03-01T05:24:16Z

Yep, that's exactly what CompileTest is for, nice.

Unless we know that the clipPath attr is much more popular (more often used) than the clipPath tag (or the other way around), we should disambiguate them by renaming them clipPathAttr and clipPathTag respectively.

BTW you don't need to wait for CI, you can run the tests locally with sbt test.

doofin · 2018-03-01T07:04:52Z

I have added postfix "Attr" for the attrs and now it passed.Thank for the advice!

Maybe it's time to use dom builder to test svg rendering?
raquo/scala-dom-builder#3

raquo · 2018-03-02T00:32:53Z

For DOM Builder work, we'll need a sample SVG file I described in this comment: #20 (comment)

doofin · 2018-03-02T01:39:01Z

Do you mean something like svg(circle(rx:=5,ry:=5)) ? But this syntax seems only available at dom builder which is yet to be finished..

raquo · 2018-03-02T06:26:30Z

No I mean we need such example in plain natural SVG (that is <svg blah="" etc.>). It should contain attributes of all possible different datatypes (e.g. numbers, strings, booleans)

…

-- Nikita

On Mar 1, 2018 5:39 PM, "doofin" ***@***.***> wrote: Do you mean something like svg(circle(rx:=5,ry:=5)) ? But this syntax seems only available at dom builder which is yet to be finished.. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAggsHzKZqhMZtl05ENWMkkZX8v17WG4ks5taKK1gaJpZM4SR0S6> .

doofin · 2018-03-02T11:59:39Z

So you want to make dom builder render to string and test their equality,right? Where should i put these svg file?

doofin · 2018-03-02T12:02:48Z

Plenty of thanks to lihaoyi (http://www.lihaoyi.com/scalatags/#scalatags.TextSVG)
<svg height="800" width="500"><polyline points="20,20 40,25 60,40 80,120 120,140 200,180" fill="none" stroke="black" stroke-width="3"></polyline><line x1="175" y1="100" x2="275" y2="0" stroke="rgb(255,0,0)" stroke-width="10"></line><rect x="300" y="10" rx="20" ry="20" width="100" height="100" fill="rgb(0,0,255)" stroke-width="3" stroke="rgb(0,0,0)" fill-opacity="0.1" stroke-opacity="0.5"></rect><circle cx="30" cy="250" r="10" stroke="black" stroke-width="3" fill="red"></circle><ellipse cx="150" cy="250" rx="100" ry="50" fill="yellow" stroke="purple" stroke-width="4"></ellipse><polygon points="300,110 350,290 260,310" fill="line" stroke="purple" stroke-width="10"></polygon><path d="M100 300 L25 500 L175 500 Z"></path><text x="350" y="250" fill="red" transform="rotate(30 20, 40)">I love SVG!</text><text x="350" y="350" fill="green">Several lines<tspan x="350" y="380">First line.</tspan><tspan x="350" y="410">Second line.</tspan></text><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="rgb(255,255,0)"></stop><stop offset="100%" stop-color="rgb(255,0,0)"></stop></linearGradient></defs><ellipse cx="100" cy="590" rx="85" ry="55" fill="url(#grad1)"></ellipse></svg>

raquo · 2018-03-06T09:09:36Z

Cool, looks like it should work. I'll try to get something going on DOM Builder side on the weekend. Sorry for the delay, very busy days now between work and various chores.

doofin · 2018-03-06T14:08:17Z

No worry,after all we are doing this for fun.I would also become very busy soon due to that I got a great scala job about big data . Scala is quite popular these days in China,which is unimaginable!

Also: - Give more specific types to SVG attrs - Various renamings for consistency - Formatting fixes for consistency - Address other minor code review comments

raquo · 2018-04-08T04:48:52Z

@doofin I almost finished integrating SVG into DOM Builder and Laminar. While I'm wrapping that up, could you please copy over ScalaTags/MDN comments to remaining SVG attrs? I should have my SDB / Laminar changes ready some time next week.

Make sure to first pull the latest changes from this branch to avoid merge conflicts, as I changed the SvgAttrs file among others.

doofin · 2018-04-10T03:01:30Z

@raquo which svg attrs are missing? I think they are all here now

https://github.com/raquo/scala-dom-types/blob/master/shared/src/main/scala/com/raquo/domtypes/generic/defs/attrs/SvgAttrs.scala

raquo · 2018-04-10T03:21:15Z

@doofin it's not the attributes themselves that are missing, but the MDN comments for them, starting with d: https://github.com/raquo/scala-dom-types/blob/master/shared/src/main/scala/com/raquo/domtypes/generic/defs/attrs/SvgAttrs.scala#L414

doofin · 2018-04-10T03:24:47Z

The comments are not present in scalaTags either..so I would have to get them from MDN site myself.I would be happy to write a parser to get them from web automatically but currently I am too busy to do that @raquo

For reference : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

raquo · 2018-04-10T03:41:03Z

Ah I see, I didn't know they were missing from ScalaTags too. Definitely no need to spend more time on that then. I'll keep #29 up and if anyone cares enough they can do it. Thanks for your help with SVG! I will publish v0.6 on the weekend. SDB and Laminar stuff I already put in PRs, will be merging all that hopefully this weekend too. — Best regards, Nikita

…

On Mon, Apr 9, 2018 at 8:24 PM, doofin ***@***.***> wrote: It's not present in scalaTags either..so I would have to get them from MDN site myself.I would be happy to write a parser to get them from web automatically but currently I am too busy to do that — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAggsI1etv6nnLJhNF0OteDPLF7p7XeZks5tnCYBgaJpZM4SR0S6> .

fdietze · 2018-04-10T09:51:29Z

Thank you all for working on this PR!

doofin · 2018-04-10T10:00:36Z

Cheers and thank everyone ! Finally we can do some very complex stuff with svg and reactive programming!

fdietze and others added 9 commits February 7, 2018 13:02

Port Svg tags from scalatags

f419c66

Create svgAttrs.scala

f42c8cf

solve types/shared/src/main/scala/com/raquo/domtypes/generic/defs/att…

c636b68

…rs/svgAttrs.scala:8: Attrs is already defined as trait Attrs

Update README.md

5f0631d

Merge pull request #24 from doofin/svg

aee4100

recreate svg branch

Update svgAttrs.scala

c510ddc

Create SvgAttr.scala

91297c8

Update svgAttrs.scala

17fda83

Update package.scala

2c17081

finished this really long svg type def..

doofin requested review from raquo and fdietze February 24, 2018 08:55

doofin added the enhancement label Feb 24, 2018

raquo reviewed Feb 24, 2018

View reviewed changes

Test: Add SvgTags to CompileTest (also add CanonicalSvgAttrBuilder)

2dc8c21

raquo mentioned this pull request Feb 24, 2018

SVG support #20

Closed

doofin added 3 commits March 1, 2018 12:23

complete svg attrs definition , but no xLinkHref support

5eb8783

Update SvgAttr.scala

7be45c6

Update svgAttrs.scala

2b57ac1

resolve conflict of attr and tags

b158d72

CR feedback: formatting, name changes, etc.

b631132

raquo added 2 commits April 7, 2018 21:34

New: Split HTML and SVG features

36d7c91

Also: - Give more specific types to SVG attrs - Various renamings for consistency - Formatting fixes for consistency - Address other minor code review comments

Fix: stray chars

1909fea

Update Readme and changelog

76bafb7

raquo merged commit 211d92c into master Apr 9, 2018

raquo deleted the svg branch April 9, 2018 05:57

doofin mentioned this pull request Apr 10, 2018

Docs: Add MDN docs to SVG attributes #29

Open

raquo restored the svg branch March 2, 2020 08:02

raquo deleted the svg branch March 2, 2020 08:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svg support #25

Svg support #25

doofin commented Feb 24, 2018 •

edited

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

doofin Feb 25, 2018

raquo Feb 24, 2018

raquo Feb 24, 2018

doofin commented Mar 1, 2018 •

edited

raquo commented Mar 1, 2018

doofin commented Mar 1, 2018

raquo commented Mar 2, 2018

doofin commented Mar 2, 2018

raquo commented Mar 2, 2018 via email

doofin commented Mar 2, 2018

doofin commented Mar 2, 2018

raquo commented Mar 6, 2018

doofin commented Mar 6, 2018

raquo commented Apr 8, 2018 •

edited

doofin commented Apr 10, 2018

raquo commented Apr 10, 2018

doofin commented Apr 10, 2018 •

edited

raquo commented Apr 10, 2018 via email

fdietze commented Apr 10, 2018

doofin commented Apr 10, 2018 •

edited


		import com.raquo.domtypes.generic.builders.TagBuilder

		trait SvgTags[T[_ <: DomElement], DomElement, SvgElement <: DomElement,

Svg support #25

Svg support #25

Conversation

doofin commented Feb 24, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doofin commented Mar 1, 2018 • edited

raquo commented Mar 1, 2018

doofin commented Mar 1, 2018

raquo commented Mar 2, 2018

doofin commented Mar 2, 2018

raquo commented Mar 2, 2018 via email

doofin commented Mar 2, 2018

doofin commented Mar 2, 2018

raquo commented Mar 6, 2018

doofin commented Mar 6, 2018

raquo commented Apr 8, 2018 • edited

doofin commented Apr 10, 2018

raquo commented Apr 10, 2018

doofin commented Apr 10, 2018 • edited

raquo commented Apr 10, 2018 via email

fdietze commented Apr 10, 2018

doofin commented Apr 10, 2018 • edited

doofin commented Feb 24, 2018 •

edited

doofin commented Mar 1, 2018 •

edited

raquo commented Apr 8, 2018 •

edited

doofin commented Apr 10, 2018 •

edited

doofin commented Apr 10, 2018 •

edited