This is the function which makes the element draggable

function initializeInteraction(element) {

isDragging = false;

let isResizing = false;

let startX, startY, startWidth, startHeight;

element.addEventListener(‘mousedown’, (e) => {

if (e.target.classList.contains(‘resize-handle’)) {

isResizing = true;

startX = e.clientX;

startY = e.clientY;

const bbox = element.getBBox();

startWidth = bbox.width;

startHeight = bbox.height;

document.addEventListener(‘mousemove’, onResize);

} else {

isDragging = true;

const svg = element.ownerSVGElement;

const pt = svg.createSVGPoint();

pt.x = e.clientX;

pt.y = e.clientY;

const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());

startX = svgP.x;

startY = svgP.y;

selComp = element;

document.addEventListener(‘mousemove’, onDrag);

}

});

document.addEventListener(‘mouseup’, () => {

isDragging = false;

isResizing = false;

document.removeEventListener(‘mousemove’, onDrag);

document.removeEventListener(‘mousemove’, onResize);

});

document.addEventListener(‘keydown’, (e) => {

if (element) {

switch (e.key) {

case ‘ArrowUp’:

console.log(“arrow up”)

moveSelectedElement(0, -10);

break;

case ‘ArrowDown’:

moveSelectedElement(0, 10);

break;

case ‘ArrowLeft’:

moveSelectedElement(-10, 0);

break;

case ‘ArrowRight’:

moveSelectedElement(10, 0);

break;

}

}

});

function moveSelectedElement(dx, dy) {

var el = document.getElementById(selId);

console.log(el);

if (el) {

const transform = el.getAttribute(‘transform’) || ”;

const translateMatch = transform.match(/translate(([^,]+),([^)]+))/);

const scaleMatch = transform.match(/scale(([^)]+))/);

const rotateMatch = transform.match(/rotate(([^)]+))/);

let x = 0;

let y = 0;

if (translateMatch) {

x = parseFloat(translateMatch[1]);

y = parseFloat(translateMatch[2]);

}

x += dx;

y += dy;

const properties = getElementProperties(el);

el.setAttribute(‘transform’, translate(${x},${y}) scale(${properties[‘scaleX’]}, ${properties[‘scaleY’]}) rotate(${properties[‘rotation’]}));

displayElementProperties(el.id);

}

}

function onDrag(e) {

if (isDragging) {

if (selKeyMarkerIdx != -1) {

const properties = selAction[element.id];

const svg = element.ownerSVGElement;

const pt = svg.createSVGPoint();

pt.x = e.clientX;

pt.y = e.clientY;

const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());

const dx = svgP.x – startX;

const dy = svgP.y – startY;

const transform = properties[‘transform’];

const translateMatch = transform.match(/translate(([^,]+),([^)]+))/);

let x = parseFloat(translateMatch[1]) + dx;

let y = parseFloat(translateMatch[2]) + dy;

let scaleX = properties[‘scale’].split(‘,’)[0].trim() || 1;

let scaleY = properties[‘scale’].split(‘,’)[1].trim() || 1;

element.setAttribute(‘transform’, translate(${x},${y}) scale(${scaleX}, ${scaleY}) rotate(${properties[‘rotation’]}));

startX = svgP.x;

startY = svgP.y;

console.log(“inside”);

displayElementProperties(element.id);

} else {

const svg = element.ownerSVGElement;

const pt = svg.createSVGPoint();

pt.x = e.clientX;

pt.y = e.clientY;

const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());

const dx = svgP.x – startX;

const dy = svgP.y – startY;

const transform = element.getAttribute(‘transform’);

const translateMatch = transform.match(/translate(([^,]+),([^)]+))/);

let x = parseFloat(translateMatch[1]) + dx;

let y = parseFloat(translateMatch[2]) + dy;

const properties = getElementProperties(element);

element.setAttribute(‘transform’, translate(${x},${y}) scale(${properties[‘scaleX’]}, ${properties[‘scaleY’]}) rotate(${properties[‘rotation’]}));

startX = svgP.x;

startY = svgP.y;

displayElementProperties(element.id);

}

}

}

function onResize(e) {

if (isResizing) {

const dx = e.clientX – startX;

const dy = e.clientY – startY;

const bbox = element.getBBox();

element.setAttribute(‘transform’, scale(${1 + dx / bbox.width}, ${1 + dy / bbox.height}));

startX = e.clientX;

startY = e.clientY;

}

}

}

After applying this function the elements, are not moving
function applyTransformationsBasedOnKeyMarker(markerIdx) {

var actionsElement = document.querySelector(‘actionss’);

let actions;

if (actionsElement) {

actions = JSON.parse(actionsElement.textContent);

}

if (actions) {

const elements = document.querySelectorAll(‘.movable-components’);

elements.forEach(element => {

const id = element.getAttribute(‘id’);

const state = actions[markerIdx][id];

const textContent = state.text || ”;

const childText = element.querySelector(‘text’);

if (childText) {

childText.textContent = textContent;

}

if (state) {

let transform = state.transform || ”;

const scale = state.scale || ‘1, 1’;

const rotation = state.rotation || ‘0’;

const opacity = state.opacity || ‘1’;

transform += scale(${scale}) rotate(${rotation}deg);

const stroke = state.stroke || “#000000”;

const fill = state.fill || “none”;

element.setAttribute(‘stroke’, stroke);

element.setAttribute(‘fill’, fill);

element.style.transition = ‘transform 0.2s, opacity 0.2s’;

element.style.transform = transform;

element.style.opacity = opacity;

initializeInteraction(element);

}

});

}

}

I thought the eventlister is being removed once I call the applyTras… function but when I try printing getEventListers(id) the eventlister is still there.