UPDATED: Javascript logic to fix in a small function (SVG, obtaining absolute coords)

Question

NEW: So here is the code at codepen: http://codepen.io/cmer41k/pen/pRJNww/

Currently function UpdateCoords(draggable) - is commented out in the code.

What I wanted is to update on mouseup event the coordinates of the path (circle as path here) to the absolute ones and remove transform attribute.

But I am failing to do that;(( sorry only learning

OLD:

In my code I have an svg element (path) that gets dragged around the root svg obj (svg) via transform="translate(x,y)" property.

I wanted to update such path element's attribute "d" (the string that describes all coords) to use absolute coordinates and get rid of transformed\translate thing.

Basically: was: d="M10,10 30,10 20,30" + transform="translate(20,0); to be: d="M30,10 50,10 40,30" + transform="translate(0,0)" (or if we can delete the transform - even better)

So I did the code that does the thing for me, but there is a bug that prevents proper result.

I am sure I am doing something wrong in here:

var v = Object.keys(path.controlPoints).length

// controlPoints here is just a place in path object where I store the coords for the path.

var matrix = path.transform.baseVal.consolidate();

//I validated that the above line does give me proper transform matrix with proper x,y translated values. Now below I am trying to loop through and update all control points (coordinates) of the path

for (i=0; i<v; i++) {
  var position = svg.createSVGPoint();
  position.x = path.controlPoints["p"+i].x;
  position.y = path.controlPoints["p"+i].y;

// so for each of path's control points I create intermediate svgpoint that can leverage matrix data (or so I think) to "convert" old coords into the new ones.

  position = position.matrixTransform(matrix);
  path.controlPoints["p"+i].x = position.x;
  path.controlPoints["p"+i].y = position.y;
}

// I am sure I am doing something wrong here, maybe its because I am not "cleaning"/resetting this position thing in this loop or smth?

Sorry I am not a programmer, just learning stuff and the question is - in this code snipped provided the goal that I described - is something wrong with how I handle "position"?

Answer 1

Alright, the code snipped is now functioning properly!

So after I figured how to obtain properly the matrix I still had a weird displacement for any subsequent draggables. I became clear that those displacements happen even before my function. I debugged it a bit and realized that I was not clearing the ._x and ._y params that I use for dragging.

Now code works!

http://codepen.io/cmer41k/pen/XpbpQJ

var svgNS = "http://www.w3.org/2000/svg";
var draggable = null;
var canvas = {};
var inventory = {};
var elementToUpdate = {};

//debug
var focusedObj = {};
var focusedObj2 = {};
// to be deleted

window.onload = function() {
  canvas = document.getElementById("canvas");
  inventory = document.getElementById("inventory");
  AddListeners();
}
function AddListeners() {
document.getElementById("svg").addEventListener("mousedown", Drag);
document.getElementById("svg").addEventListener("mousemove", Drag);
document.getElementById("svg").addEventListener("mouseup", Drag);
}

// Drag function //
function Drag(e) {
var t = e.target, id = t.id, et = e.type;  m = MousePos(e); //MousePos to    ensure we obtain proper mouse coordinates
if (!draggable && (et == "mousedown")) {
    if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable
        copy = t.cloneNode(true);
        copy.onmousedown = copy.onmouseup = copy.onmousemove = Drag;
        copy.removeAttribute("id");
        copy._x = 0;
        copy._y = 0;
        canvas.appendChild(copy);
        draggable = copy;
        dPoint = m;
        } 
        else if (t.className.baseVal=="draggable")  { //if its just draggable class - it can be dragged around
            draggable = t;
            dPoint = m;
        }
    }
    // drag the spawned/copied draggable element now
    if (draggable && (et == "mousemove")) {
        draggable._x += m.x - dPoint.x;
        draggable._y += m.y - dPoint.y;
        dPoint = m;
        draggable.setAttribute("transform", "translate(" +draggable._x+","+draggable._y+")");
    }
    // stop drag
    if (draggable && (et == "mouseup")) {
        draggable.className.baseVal="draggable";
  UpdateCoords(draggable);
  console.log(draggable);
  draggable._x = 0;
  draggable._y = 0;
  draggable = null;
    }

}