starting a move method for InkWeb.

(bzr r7778)

2 files changed, 157 insertions, 1 deletions

diff --git a/share/extensions/inkweb.js b/share/extensions/inkweb.js
index 5cb48869f..2be2e9b2b 100644
--- a/share/extensions/inkweb.js
+++ b/share/extensions/inkweb.js
@@ -26,7 +26,7 @@
 
 var InkWeb = {
 
-  version: 0.03,
+  version: 0.04,
 
   NS: {
     svg:      "http://www.w3.org/2000/svg",
@@ -123,3 +123,45 @@ InkWeb.setAtt = function (conf) {
   }
 }
 
+InkWeb.moveElTo = function (startConf) {
+  if ( typeof(startConf) == "string" ) {
+    // startConf may be only a element Id, to timeout recursive calls.
+    var el = document.getElementById( startConf );
+  } else {
+    if ( typeof(startConf.el) == "string" )
+      startConf.from = document.getElementById( startConf.el );
+    var el = startConf.el;
+  }
+  if ( ! el.inkWebMoving ) {
+    el.inkWebMoving = {
+      step: 0
+    };
+  }
+  var conf = el.inkWebMoving;
+  if ( conf.step == 0 ) {
+    conf.x = startConf.x;
+    conf.y = startConf.y;
+    // dur : duration of the animation in seconds
+    if ( startConf.dur ) { conf.dur = startConf.dur }
+    else { conf.dur = 1 }
+    // steps : animation steps in a second
+    if ( startConf.stepsBySec ) { conf.stepsBySec = startConf.stepsBySec }
+    else { conf.stepsBySec = 16 }
+    conf.sleep = Math.round( 1000 / conf.stepsBySec );
+    conf.steps = conf.dur * conf.stepsBySec;
+    var startPos = el.getBBox();
+    conf.xInc = ( conf.x - startPos.x ) / conf.steps;
+    conf.yInc = ( conf.y - startPos.y ) / conf.steps;
+    conf.transform = el.ownerSVGElement.createSVGTransform();
+    el.transform.baseVal.appendItem(conf.transform);
+  }
+  if ( conf.step < conf.steps ) {
+    conf.step++;
+    conf.transform.matrix.e += conf.xInc;
+    conf.transform.matrix.f += conf.yInc;
+    conf.timeout = setTimeout( 'InkWeb.moveElTo("'+el.id+'")', conf.sleep );
+  } else {
+    delete el.inkWebMoving;
+  }
+}
+
diff --git a/share/extensions/test/inkwebjs-move.test.svg b/share/extensions/test/inkwebjs-move.test.svg
new file mode 100644
index 000000000..bab21d918
--- /dev/null
+++ b/share/extensions/test/inkwebjs-move.test.svg
@@ -0,0 +1,114 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="800" height="450">
+  <style type="text/css">
+    text { font-family:sans-serif; font-size:11px; text-anchor:middle; text-align:center }
+    .title tspan { font-weight: bold }
+    .pos { opacity: 0.3 }
+    .started { fill:#C80 }
+  </style>
+  <script type="text/javascript" xlink:href="../inkweb.js" />
+  <rect x="0%" y="0%" width="100%" height="100%" style="fill:#EEE; stroke:#999; stroke-width:4px" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-1"      x="125"  y="26" class="title">
+    <tspan>Test 1</tspan> - from left to right </text>
+  <text class="pos"      x="80"   y="80"> Start </text>
+  <circle id="t1-start" cx="80"  cy="50" r="20" fill="#C00" opacity="0.2" />
+  <text class="pos"      x="170"  y="80"> End </text>
+  <circle id="t1-end"   cx="170" cy="50" r="20" fill="#C00" opacity="0.2" />
+  <!-- The element to move -->
+  <circle id="t1-elem"  cx="80"  cy="50" r="20" fill="#C00" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-2"      x="325"  y="26" class="title">
+    <tspan>Test 2</tspan> - from right to left</text>
+  <text class="pos"      x="370"  y="80"> Start </text>
+  <circle id="t2-start" cx="370" cy="50" r="20" fill="#0A0" opacity="0.2" />
+  <text class="pos"      x="280"  y="80"> End </text>
+  <circle id="t2-end"   cx="280" cy="50" r="20" fill="#0A0" opacity="0.2" />
+  <!-- The element to move -->
+  <circle id="t2-elem"  cx="370" cy="50" r="20" fill="#0A0" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-3"   x="125" y="120" class="title">
+    <tspan>Test 3</tspan> - pre-translated </text>
+  <text class="pos"   x="80"  y="190"> Start </text>
+  <path id="t3-start" fill="#C00" opacity="0.2" transform="translate(30,10)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <text class="pos"   x="170" y="190"> End </text>
+  <path id="t3-end"   fill="#C00" opacity="0.2" transform="translate(120,10)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <!-- The element to move -->
+  <path id="t3-elem"  fill="#C00" transform="translate(30,10)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-4"   x="350" y="120" class="title">
+    <tspan>Test 4</tspan> - pre-translated and scaled </text>
+  <text class="pos"   x="300"  y="190"> Start </text>
+  <path id="t4-start" fill="#C00" opacity="0.2"
+        transform="translate(235,-45) scale(1.4)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <text class="pos"   x="400" y="190"> End </text>
+  <path id="t4-end"   fill="#C00" opacity="0.2"
+        transform="translate(335,-45) scale(1.4)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <!-- The element to move -->
+  <path id="t4-elem"  fill="#C00"
+        transform="translate(235,-45) scale(1.4)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-5"   x="600" y="120" class="title">
+    <tspan>Test 5</tspan> - pre-translated and rotated </text>
+  <text class="pos"   x="550"  y="190"> Start </text>
+  <path id="t5-start" fill="#C00" opacity="0.2"
+        transform="translate(500,0) rotate(-15 90 140)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <text class="pos"   x="650" y="190"> End </text>
+  <path id="t5-end"   fill="#C00" opacity="0.2"
+        transform="translate(600,0) rotate(-15 90 140)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <!-- The element to move -->
+  <path id="t5-elem"  fill="#C00"
+        transform="translate(500,0) rotate(-15 90 140)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <text id="test-6"   x="125" y="220" class="title">
+    <tspan>Test 6</tspan> - with a transformation matrix </text>
+  <text class="pos"   x="80"  y="290"> Start </text>
+  <path id="t6-start" fill="#C00" opacity="0.2"
+        transform="matrix(1.2 0 -0.5 1.2 95 80)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <text class="pos"   x="170" y="290"> End </text>
+  <path id="t6-end"   fill="#C00" opacity="0.2"
+        transform="matrix(1.2 0 -0.5 1.2 185 80)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+  <!-- The element to move -->
+  <path id="t6-elem"  fill="#C00"
+        transform="matrix(1.2 0 -0.5 1.2 95 80)"
+        d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" />
+
+  <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+  <script type="text/javascript">
+    var titles = document.getElementsByClassName("title")
+    for ( var title,i=0; title=titles[i]; i++ ) {
+      title.className.baseVal += " started";
+      testeNum  = title.id.replace( /^.*-/, "" );
+      var el    = document.getElementById( "t"+testeNum+"-elem"  );
+      var start = document.getElementById( "t"+testeNum+"-start" ).getBBox();
+      var end   = document.getElementById( "t"+testeNum+"-end"   ).getBBox();
+      InkWeb.moveElTo( { el:el, x:end.x, y:end.y } );
+    }
+  </script>
+</svg>