document.addEventListener("DOMContentLoaded", function () {
    const width = 600;
    const height = 600;
    const svg = d3.select("svg")
        .attr("width", width)
        .attr("height", height);

    // let pict1 = drawSmile(svg);
    // pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);

    // let pict = drawSmile(svg);
    // pict.attr("transform", "translate(200, 200)");

    setting.applyButton.addEventListener("click", () => {
        draw(setting);
    })
    setting.clearButton.addEventListener("click", () => {
        svg.selectAll('*').remove()
    })

    enableAnimCheckbox.addEventListener("change", () => {
        let isChecked = enableAnimCheckbox.checked;
        if (isChecked) {
            startAnimButton.display = "inline-block";
            animTypeSelect.display = "inline-block";
            applyButton.display = "none";
        }
        else {
            startAnimButton.display = "none";
            animTypeSelect.display = "none";
            applyButton.display ="inline-block";
        }
    })
})


const draw = (dataForm) => {
    const svg = d3.select("svg")
    let pict = drawSmile(svg);
    pict.attr("transform", `
        translate(${dataForm.cx.value},
        ${dataForm.cy.value})
        scale(${dataForm.sx.value},
        ${dataForm.sy.value})
        rotate(${dataForm.r.value})`);

}