function addPoly() {
if (document.getElementById('editMode').checked != true) return;
let line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
let svg = document.getElementsByTagName('svg')[0];
line.classList.add('newLine');
svg.classList.add('drawLine');
svg.insertBefore(line, svg.firstChild);
let realPoints = line.getAttribute('points') ? line.getAttribute('points') + ' ' : '';
svg.onclick = drawLine;
svg.onmousemove = targetingLine;
svg.oncontextmenu = stopDraw;
//прицеливаемся для рисования
function targetingLine(e) {
let newX = e.pageX - parseInt(getComputedStyle(svg).left);
let newY = e.pageY - parseInt(getComputedStyle(svg).top);
line.setAttribute('points', realPoints + Math.floor(newX) + ',' + Math.floor(newY));
}
//отрисовываем плечо линии
function drawLine(e) {
targetingLine(e);
line.setAttribute('ps', 0);
realPoints = line.getAttribute('points') + ' ';
}
/* завершаем рисование и снимаем обработчики */
function stopDraw(e) {
line.setAttribute('points', realPoints)
realPoints = '';
svg.onclick = null;
svg.oncontextmenu = null;
svg.onmousemove = null;
svg.classList.remove('drawLine');
addAtr(line);
//если характеристики не заполнены удаляем
if (!line.classList.contains('settedLine')) {
line.remove();
}
return false;
}
}
Как видится работа данной функции:
1)при левом клике добавляем точку
2) при движении растягивается линию от последней существующей точки до момента получения клика
3)по правому клику оставляем в линии только уже добавленные точки(удаляем последний растянутый хвост), снимаем обработчики и вызываем функцию привязки характеристик.
И в принципе все работает так же как видится, за исключением того, что результат отображения строки line.setAttribute('points', realPoints) отображается только после завершения addAtr(line), причем если поставить точку остановки, после данной строки, то все отображается корректно. Сама функция addAtr представляет из себя набор prompt, как временное решение.
Прошу подсказать куда смотреть, и как это можно исправить.
