trojal.

(adventures in web programming.)

Recent Entries
Categories
Meta (2)
Test (3)
Random (1)
jQuery (1)
SVG (1)
Links
Info
Edit

SVG Interactions

-trojal @ 2010-Jan-27 01:08 UTC

Step 2: Zoom and triangle child removal

(link)

The Interaction

Shift left click to zoom in. Shift right click to zoom out.

The JavaScript

Added a removeChildren function to remove triangles with a given prefix in their id:

function removeChildren(parentName){
  var p = document.getElementsByTagName('polygon');
  for (var e=0;e<p.length;e++){
    if(p[e].id.indexOf(parentName)==0){
      document.getElementById('base').removeChild(p[e]);
      e=0;
    }
  }
}

To handle the zoom in and zoom out, added to the primary click event handler (addChild) the following...

  if(e.shiftKey)
    shift = 1;
  if(rightclick && shift){
    document.getElementById('base').setAttribute('transform', 'scale(' + document.getElementById('base').transform.baseVal.getItem(0).matrix.a * 5/6 + ')');
    document.getElementById('root').setAttribute('width', parseFloat(document.getElementById('root').getAttribute('width'))*5/6);
    document.getElementById('root').setAttribute('height', parseFloat(document.getElementById('root').getAttribute('height'))*5/6);
    return false;
  } else if(shift){
    document.getElementById('base').setAttribute('transform', 'scale(' + document.getElementById('base').transform.baseVal.getItem(0).matrix.a * 1.2 + ')');
    document.getElementById('root').setAttribute('width', parseFloat(document.getElementById('root').getAttribute('width'))*1.2);
    document.getElementById('root').setAttribute('height', parseFloat(document.getElementById('root').getAttribute('height'))*1.2);
    return false;
  } else if(rightclick){
    if(this.id!='a'){
      removeChildren(this.id);
      //document.getElementById('base').removeChild(this);
    }
    return false;
  }

Next up: Step 3: Adding Translation