include ../components/mixins.pug


doctype html
html(lang="ru")
    head
        meta(charset="utf-8")
        title Трансформация и анимация
        script(src="svg_playground/d3.v7.min.js")
        script(src="svg_playground/main.js")
        script(src="svg_playground/image.js")
        script(src="svg_playground/path.js")
    body
        +navbarMixin("SVG Playground")

        form#setting
            p.path-anim-related-inverse
                | Координаты рисунка
                br
                label(for="cx") x:
                input#cx(type="number", value="300", max="600", min="0")
                label.anim-related(for="cx_finish") до:
                input#cx_finish.anim-related(type="number", value="300", max="600", min="0")
                br
                label(for="cy") y:
                input#cy(type="number", value="300", max="600", min="0")
                label.anim-related(for="cy_finish") до:
                input.anim-related#cy_finish(type="number", value="300", max="600", min="0")

            p.path-anim-related
                | Пути перемещения
                br
                select#pathSelect
                    option(value="0") Буквой "Г"
                    option(value="1") По кругу
                    option(value="2") Спиралью

            p
                | Масштаб
                br
                label(for="sx") по x:
                input#sx(type="number", value="1", max="100", min="-100")
                label.anim-related(for="sx_finish") до:
                input#sx_finish.anim-related(type="number", value="1.5", max="100", min="-100")
                br
                label(for="sy") по y:
                input#sy(type="number", value="1", max="100", min="-100")
                label.anim-related(for="sy_finish") до:
                input#sy_finish.anim-related(type="number", value="1.5", max="100", min="-100")

            p
                | Поворот
                br
                label(for="r") x:
                input#r(type="number", value="0", max="360", min="-360")
                label.anim-related(for="r_finish") до:
                input#r_finish.anim-related(type="number", value="360", max="360", min="-360")

            p.anim-related
                | Время анамации (мс)
                br
                label(for="duration") x:
                input#duration(type="number", value="2000", max="10000", min="1")
                
            p
                input#applyButton.anim-related-inverse(type="button", value="Нарисовать")
                input#clearButton(type="button", value="Отчистить")
            
            p
                | Включить Анимацию?
                input#enableAnimCheckbox(type="checkbox")
                br
                label.anim-related(for="animAlongPathCheckbox")  Перемещение вдоль пути?
                input#animAlongPathCheckbox.anim-related(type="checkbox")
                select#animTypeSelect.anim-related
                    option(value="0") linear
                    option(value="1") elastic
                    option(value="2") bounce
                br
                input#startAnimButton.anim-related(type="button", value="Анимировать")

        svg