WIP Transform parser.

Procfile

@@ -1,5 +1,5 @@
 web: ./node_modules/.bin/http-server -c-1 .
 sass: ./node_modules/.bin/node-sass --recursive --output demo demo && ./node_modules/.bin/node-sass --watch --recursive --output demo demo
 webpack: webpack -w
-pug: ./node_modules/.bin/pug -w index.pug demo
+pug: ./node_modules/.bin/pug -w index.pug demo test
 tests: ./node_modules/.bin/karma start

README.md

@@ -67,6 +67,9 @@ the changes. (You will only get scroll issues with fixed elements)
   getComputedElement...
 - [ ] Add more tests and edge cases...
 - [ ] Manage scroll (globally and on elements)
+- [ ] Round in the tests
+- [ ] Greg's test
+- [ ] CamelCase + check webkit naming convention
 
 ### Big Thanks
 

demo/demo.coffee

@@ -1,23 +1,45 @@
 $ ->
+  parse_assert = (input)->
+    $.map input.split(':'), (i)->
+      [
+        $.map i.split(','), (s)->
+          parseFloat(s)
+      ]
+  add_marker = (point)->
+    $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 ->
-    console.log this
     ref = new Referentiel(this)
-    $(this).on 'click', (e)->
-      input = [e.pageX, e.pageY]
-      p = ref.global_to_local(input)
-      console.log input, '->', p
-      $pointer = $('.pointer', this)
-      $pointer.css('left', p[0]-3)
-      $pointer.css('top', p[1]-3)
+    $('[data-assert]', this).each (assert)->
+      [global, local] = parse_assert $(this).data('assert')
+      result = ref.global_to_local(global)
+      console.log this, global, result, local
+      add_marker(global)
+      $assert = $(this)
+      $assert.css('left', result[0]-3)
+      $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 'mousemove', (e)->
-    return
+  $('body').on 'click', (e)->
     $('.referentiel').each ->
-      console.log this
       ref = new Referentiel(this)
       input = [e.pageX, e.pageY]
       p = ref.global_to_local(input)
-      console.log input, '->', p
+      if $('.pointer', this).length == 0
+        $pointer = $('<div class="pointer"></div>')
+        $(this).append($pointer)
       $pointer = $('.pointer', this)
+      console.log '======'
+      console.log input, '->', p, new Referentiel(this).matrix(), this
       $pointer.css('left', p[0]-3)
       $pointer.css('top', p[1]-3)
+      $pointer.attr('cx', p[0])
+      $pointer.attr('cy', p[1])

demo/demo.sass

@@ -5,8 +5,21 @@
   position: absolute
   border-radius: 50%
 .referentiel
-  width: 200px
-  height: 200px
+  width: 100px
+  height: 100px
   background: pink
   overflow: hidden
   position: relative
+.marker
+  width: 10px
+  height: 10px
+  background: rgba(255, 0, 0, 0.5)
+  position: fixed
+  border-radius: 50%
+.assert
+  position: absolute
+  width: 6px
+  height: 6px
+  background: black
+  position: absolute
+  border-radius: 50%

demo/index.pug

@@ -8,11 +8,12 @@ html(lang='en')
     script(type='text/javascript', src='../dist/referentiel.js')
     script(type='text/javascript', src='../node_modules/jquery/dist/jquery.js')
     script(type='text/javascript', src='http://coffeescript.org/v1/browser-compiler/coffee-script.js')
-    script(type='text/javascript', src='coffee-script.js')
+    //script(type='text/javascript', src='coffee-script.js')
     script(type='text/coffeescript', src='demo.coffee')
     link(rel="stylesheet" media="all" href="../node_modules/reset-css/reset.css")
     link(rel="stylesheet" media="all" href="demo.css")
   body
+    include ../test/svg-viewport-kevan.pug
     //.super(style="height: 200px; width: 200px;")
     //div(style="margin-top: 40px; margin-left: 40px")
       //div(style="margin-top: 40px")
@@ -24,7 +25,13 @@ html(lang='en')
       .referentiel
         .pointer
     //div(style="margin-top: 14px")
-    div(style="position: absolute; top: 40px; left: 50px;")
+    div(style="position: relative; top: 40px; left: 40px")
+      p Hello World
+      div
+        div(style="position: absolute; top: 40px; left: 50px;")
+          .referentiel
+            .pointer
+    //div(style="position: absolute; top: 40px; left: 50px;")
       .referentiel
         .pointer
       //div

karma.conf.coffee

@@ -110,6 +110,7 @@ module.exports = (config) ->
       'node_modules/reset-css/reset.css',
       'node_modules/jquery/dist/jquery.js',
       { pattern: 'test/**/*.coffee', included: true }
+      { pattern: 'test/**/*.html', served: true, included: false}
     ]
 
     preprocessors: {
@@ -127,14 +128,14 @@ module.exports = (config) ->
     # - config.LOG_DEBUG
     logLevel: config.LOG_INFO
 
-    autoWatch: false
+    autoWatch: true
 
     # browsers: [ 'Chrome', 'Firefox' ]
     browsers: Object.keys(customLaunchers)
 
     # Continuous Integration mode
     # if true, Karma captures browsers, runs the tests and exits
-    singleRun: true
+    singleRun: false
     port: 9876
     colors: true
 

package.json

@@ -11,7 +11,8 @@
     "src"
   ],
   "scripts": {
-    "test": "npm run build && ./node_modules/.bin/karma start",
+    "test": "npm run build && ./node_modules/.bin/karma start --single-run",
+    "test-watch": "npm run build && ./node_modules/.bin/karma start",
     "start": "npm run build && ./node_modules/.bin/nf start",
     "build": "./node_modules/.bin/webpack"
   },
@@ -33,12 +34,15 @@
     "jasmine": "2.8.0",
     "jasmine-core": "2.8.0",
     "jquery": "3.2.1",
-    "karma": "1.7.0",
+    "jsdom": "^11.5.1",
+    "karma": "^1.7.0",
     "karma-browserstack-launcher": "1.3.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-coffee-preprocessor": "1.0.1",
     "karma-firefox-launcher": "1.0.1",
     "karma-jasmine": "1.1.0",
+    "karma-jsdom-launcher": "^6.1.2",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sauce-launcher": "1.2.0",
     "mocha": "3.5.0",
     "node-sass": "4.5.3",

src/matrix_utils.coffee

@@ -0,0 +1,50 @@
+MatrixUtils = {
+  identity: ->
+    [[1,0,0], [0,1,0], [0,0,1]]
+  det: (m)->
+    return (
+      m[0][0] * (m[1][1] * m[2][2] - m[2][1] * m[1][2]) -
+      m[0][1] * (m[1][0] * m[2][2] - m[1][2] * m[2][0]) +
+      m[0][2] * (m[1][0] * m[2][1] - m[1][1] * m[2][0])
+    )
+  inv: (m)->
+    invdet = 1.0/MatrixUtils.det(m)
+    return [
+      [
+        (m[1][1] * m[2][2] - m[2][1] * m[1][2]) * invdet,
+        (m[0][2] * m[2][1] - m[0][1] * m[2][2]) * invdet,
+        (m[0][1] * m[1][2] - m[0][2] * m[1][1]) * invdet,
+      ],
+      [
+        (m[1][2] * m[2][0] - m[1][0] * m[2][2]) * invdet,
+        (m[0][0] * m[2][2] - m[0][2] * m[2][0]) * invdet,
+        (m[1][0] * m[0][2] - m[0][0] * m[1][2]) * invdet,
+      ],
+      [
+        (m[1][0] * m[2][1] - m[2][0] * m[1][1]) * invdet,
+        (m[2][0] * m[0][1] - m[0][0] * m[2][1]) * invdet,
+        (m[0][0] * m[1][1] - m[1][0] * m[0][1]) * invdet,
+      ]
+    ]
+  mult: ->
+    [a, b, others...] = arguments
+    res = []
+    for i in [0...3]
+      res[i] = []
+      for j in [0...3]
+        res[i][j] = 0.0
+        for k in [0...3]
+          res[i][j] += a[i][k]*b[k][j]
+    if others.length > 0
+      MatrixUtils.mult(res, others...)
+    else
+      res
+  multVector: (m, v)->
+    res = []
+    for i in [0...3]
+      res[i] = 0.0
+      for k in [0...3]
+        res[i] += m[i][k]*v[k]
+    res
+}
+module.exports = MatrixUtils