<!--
https://eugenkiss.github.io/7guis/tasks#circle
Click on the canvas to draw a circle. Click on a circle
to select it. Right-click on the canvas to adjust the
radius of the selected circle.
-->
<script>
let i = $state(0);
let undoStack = $state([[]]);
let circles = $state([]);
let selected = $state();
let adjusting = $state(false);
let adjusted = false;
function handleClick(event) {
if (adjusting) {
adjusting = false;
// if circle was adjusted,
// push to the stack
if (adjusted) push();
return;
}
const circle = {
cx: event.clientX,
cy: event.clientY,
r: 50
};
circles = circles.concat(circle);
selected = circle;
push();