pathUI = () => {
let lx = 0, ly = 0;
const segments = [];
for(const {command: c, x, y} of path_table) c.match(/^[a-z]$/)
? segments.push({x1: lx, y1: ly, x2: lx += x, y2: ly += y})
: segments.push({x1: lx, y1: ly, x2: lx = x, y2: ly = y});
let seg = '';
if(selected != null) {
const {x1, y1} = segments[selected],
d = path_table[selected],
cmd = d.command,
cmdVis = cmd === 'm' ? 'l' : cmd === 'M' ? 'L' : cmd,
path = cmd === 'c' || cmd === 'C'
? `${cmd} ${d.x1} ${d.y1}, ${d.x2} ${d.y2}, ${d.x} ${d.y}`
: `${cmdVis} ${d.x} ${d.y}`;
seg = DOM.element('svg:path', {
d: `M${x1},${y1}${path}`,
stroke: '#c30771',
'stroke-width': 4,
'stroke-dasharray': cmd !== cmdVis ? '4,4' : '',
fill: 'none'
});
}
const path = `M0,0${segments.map(({x2,y2}, i)=>`${i === selected ? 'M' : 'L'}${x2},${y2}`)}`;
return svg`<g>
<path d="${path}" stroke="#c3077188" stroke-dasharray="4,4" stroke-width=1 fill="none" />
${seg}
`;
}