near/computersandblues.hitomezashi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add link to download SVG

Browse source
This commit is contained in:
arne 2024-07-20 22:50:06 +02:00
commit a2bb19e808
2 changed files with 26 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -48,6 +48,14 @@
width: 9em; 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) { @media screen and (min-width: 1024px) {
div.container { div.container {
display: grid; display: grid;
@ -69,7 +77,6 @@
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

34
src/main.ts
View file

@ -126,6 +126,18 @@ const input = (label: string, attrs: any) =>
const select = (label: string, attrs: any, options: string[]) => const select = (label: string, attrs: any, options: string[]) =>
["div", {}, ["label", {}, label, ["select", attrs, ...options.map(u => ["option", {value: u}, u])]]] ["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( $compile(
["div.container", {}, ["div.container", {},
["main", {}, ["main", {},
@ -168,20 +180,10 @@ $compile(
oninput: $inputNum(height), oninput: $inputNum(height),
}), }),
select("Unit", { oninput: $input(unit) }, ["mm", "px"]), select("Unit", { oninput: $input(unit) }, ["mm", "px"]),
["h2", {}, "SVG Export"], ["h2", {}, "Export"],
["div", {}, ["textarea", { ["div", {}, ["a", {
value: sync({ class: "button",
src: { href: svg.map(svg => `data:text/svg,${encodeURI(svg)}`),
scene, download: sync({ src: { xSeeds, ySeeds } }).map(({ xSeeds, ySeeds }) => `hitomezashi-pattern-${Date.now()}-${xSeeds.join('')}-${ySeeds.join('')}.svg`)
size, }, "Download SVG"]]]]
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
}]]]]
).mount(document.body) ).mount(document.body)