diff --git a/index.html b/index.html index 6c268af..2a3417d 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,14 @@ width: 9em; } + a.button { + display: inline-block; + padding: 0.3rem 0.6rem; + background: var(--primary-color); + color: var(--background-color); + text-decoration: none; + } + @media screen and (min-width: 1024px) { div.container { display: grid; @@ -69,7 +77,6 @@ -
diff --git a/src/main.ts b/src/main.ts index 71089f1..4eb9520 100644 --- a/src/main.ts +++ b/src/main.ts @@ -126,6 +126,18 @@ const input = (label: string, attrs: any) => const select = (label: string, attrs: any, options: string[]) => ["div", {}, ["label", {}, label, ["select", attrs, ...options.map(u => ["option", {value: u}, u])]]] +const svg = sync({ + src: { + scene, + size, + unit, + } +}).map(({ + scene, + size, + unit +}) => asSvg(svgDoc({ width: `${size[0]}${unit}`, height: `${size[1]}${unit}`, viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))) + $compile( ["div.container", {}, ["main", {}, @@ -168,20 +180,10 @@ $compile( oninput: $inputNum(height), }), select("Unit", { oninput: $input(unit) }, ["mm", "px"]), - ["h2", {}, "SVG Export"], - ["div", {}, ["textarea", { - value: sync({ - src: { - scene, - size, - unit, - } - }).map(({ - scene, - size, - unit - }) => asSvg(svgDoc({ width: `${size[0]}${unit}`, height: `${size[1]}${unit}`, viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))), - cols: 80, - rows: 20 - }]]]] + ["h2", {}, "Export"], + ["div", {}, ["a", { + class: "button", + href: svg.map(svg => `data:text/svg,${encodeURI(svg)}`), + download: sync({ src: { xSeeds, ySeeds } }).map(({ xSeeds, ySeeds }) => `hitomezashi-pattern-${Date.now()}-${xSeeds.join('')}-${ySeeds.join('')}.svg`) + }, "Download SVG"]]]] ).mount(document.body)