Add some test on svg elements

demo/demo.coffee

@@ -9,6 +9,8 @@ $ ->
     $marker = $('<div class="marker"></div>')
     $marker.css('top', point[1]-5)
     $marker.css('left', point[0]-5)
+    $marker.attr('data-x', point[0])
+    $marker.attr('data-y', point[1])
     $('body').append($marker)
 
   $('.referentiel').each ->
@@ -23,17 +25,20 @@ $ ->
       $assert.css('top', result[1]-3)
       $assert.attr('cx', result[0])
       $assert.attr('cy', result[1])
+      $assert.data('x', result[0])
+      $assert.data('y', result[1])
 
   $('body').on 'click', (e)->
     $('.referentiel').each ->
       ref = new Referentiel(this)
       input = [e.pageX, e.pageY]
       p = ref.global_to_local(input)
-      $('.pointer', this).remove()
-      $pointer = $('<div class="pointer"></div>')
+      if $('.pointer', this).length == 0
+        $pointer = $('<div class="pointer"></div>')
+        $(this).append($pointer)
+      $pointer = $('.pointer', this)
       console.log input, '->', p
       $pointer.css('left', p[0]-3)
       $pointer.css('top', p[1]-3)
       $pointer.attr('cx', p[0])
       $pointer.attr('cy', p[1])
-      $(this).append($pointer)

demo/index.pug

@@ -13,7 +13,7 @@ html(lang='en')
     link(rel="stylesheet" media="all" href="../node_modules/reset-css/reset.css")
     link(rel="stylesheet" media="all" href="demo.css")
   body
-    include ../test/position-basique.pug
+    include ../test/svg-3.pug
     //.super(style="height: 200px; width: 200px;")
     //div(style="margin-top: 40px; margin-left: 40px")
       //div(style="margin-top: 40px")

src/referentiel.coffee

@@ -21,6 +21,7 @@ module.exports = class Referentiel
     delete @_matrix
     delete @_matrix_transformation
     delete @_matrix_transform_origin
+    delete @_matrix_svg
 
   matrix_inv: ->
     return @_matrix_inv if @_matrix_inv
@@ -104,6 +105,7 @@ module.exports = class Referentiel
     @_matrix_offset = @matrix_offset_compute()
     @_matrix_offset
   matrix_offset_compute: ->
+    return @matrix_svg() if @reference instanceof SVGElement
     [left, top] = @offset()
     switch @getPropertyValue('position')
       when 'absolute'
@@ -121,6 +123,16 @@ module.exports = class Referentiel
         top -= parent_top
     [[1,0,left],[0,1,top],[0,0,1]]
 
+  matrix_svg: ->
+    return @_matrix_svg if @_matrix_svg
+    @_matrix_svg = @matrix_svg_compute()
+    @_matrix_svg
+  matrix_svg_compute: ->
+    return [[1,0,0], [0,1,0], [0,0,1]] unless @reference instanceof SVGElement
+    mat = @reference.getScreenCTM()
+    return [[1,0,0], [0,1,0], [0,0,1]] unless mat
+    [[mat.a, mat.b, mat.e], [mat.c, mat.d, mat.f], [0,0,1]]
+
   offset: (element = null)->
     element ||= @reference
     return [element.offsetLeft, element.offsetTop] if element.offsetLeft?

test/position-basique.pug

@@ -1,11 +1,3 @@
-//.referentiel(style="position: fixed; top: 50px; left: 20px;")
+.referentiel(style="position: fixed; top: 50px; left: 20px;")
   .assert(data-assert="20,50:0,0")
   .assert(data-assert="30,60:10,10")
-
-
-div(style="position: fixed; top: 12px; left: 13px;")
-  div(style="position: fixed; top: 50px; left: 20px;")
-    div(style="position: fixed; top: 50px; left: 20px;")
-      .referentiel
-        .assert(data-assert="20,50:0,0")
-        .assert(data-assert="30,60:10,10")

test/position-scoped.pug

@@ -0,0 +1,6 @@
+div(style="position: fixed; top: 12px; left: 13px;")
+  div(style="position: fixed; top: 50px; left: 20px;")
+    div(style="position: fixed; top: 50px; left: 20px;")
+      .referentiel
+        .assert(data-assert="20,50:0,0")
+        .assert(data-assert="30,60:10,10")

test/pug_loader.coffee

@@ -24,5 +24,11 @@ describe "Pug", ->
   add_test = (template_name)->
     it template_name, (done)->
       run_test_from_template template_name, done
-  for template_name in ['svg-1', 'position-basique']
+  for template_name in [
+    'svg-1',
+    'svg-2',
+    'svg-3',
+    'position-basique',
+    'position-scoped',
+  ]
     add_test(template_name)

test/svg-1.pug

@@ -0,0 +1,4 @@
+svg.referentiel(style="margin: 40px;" width=200 height=200 viewbox="0 0 200 200")
+  circle.pointer(cx=10 cy=10 r=10)
+  circle(data-assert="40,40:0,0" r=1)
+  circle(data-assert="61,62:21,22" r=1)

test/svg-2.pug

@@ -0,0 +1,4 @@
+svg.referentiel(style="margin: 10px" width=100 height=100 viewbox="0 0 50 50")
+  circle.pointer(cx=10 cy=10 r=10)
+  circle(data-assert="98,98:44,44" r=1)
+  circle(data-assert="150,138:70,64" r=1)

test/svg-3.pug

@@ -0,0 +1,4 @@
+svg.referentiel(style="margin: 10px" width=100 height=100 viewbox="11 12 50 100")
+  circle.pointer(cx=10 cy=10 r=10)
+  circle(data-assert="30,30:6,32" r=1)
+  circle(data-assert="100,100:76,102" r=1)