31:T79e,{ // local state const localState = { points: [], } // CONTROLS // clear stage const clearButton = html``; clearButton.addEventListener("click", () => { localState.points = []; circleGroup.innerHTML = ""; }); // save to local storage const saveButton = html``; saveButton.addEventListener("click", () => { localStorage.setItem(selection, JSON.stringify(localState)); }); // load from local storage const loadHandler = () => { const pointsFromLocalStorage = JSON.parse(localStorage.getItem(selection)); if (pointsFromLocalStorage) { pointsFromLocalStorage.points.forEach(point => { localState.points.push(point); circleGroup.appendChild(svg`Load from local storage`; loadButton.addEventListener("click", loadHandler); // container element const wrapper = html`

${clearButton} ${saveButton} ${loadButton}

`; // append svg canvas const stage = html``; wrapper.appendChild(stage); // append background rect const background = svg``; stage.appendChild(background); const circleGroup = svg``; stage.appendChild(circleGroup); loadHandler(); const clickHandler = background.addEventListener("click", (event) => { const {layerX, layerY} = event; circleGroup.appendChild(svg`