blob: 30f832adf21f34c54746b51c15cd3ba29d44869b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<script>
import renderFileToCanvas from "../file-renderer";
export let files = [];
let canvasRefs = [];
let colorRefs = [];
let stitchesRefs = [];
let sizeRefs = [];
let errorMessageRef;
const downloadCanvasAsImage = (canvas, filename) => {
const image = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
const link = document.createElement("a");
link.download = `${filename.split(".").slice(0, -1).join(".")}.png`;
link.href = image;
link.click();
};
const onKeydown = (evt) => {
if (evt.key === "Enter") {
document.getElementById("download-button").click();
}
};
</script>
{#if files.length !== 0}
<div id="container" style="width: 100%; heigth: 100vh;">
{#each Array.from(files) as file, i}
<div class="canvas-container">
<canvas bind:this={canvasRefs[i]} class="canvas" />
<p><strong>{file.name}</strong></p>
<div class="stitches-container" bind:this={stitchesRefs[i]} />
<div class="size-container" bind:this={sizeRefs[i]} />
<div class="colors-container" bind:this={colorRefs[i]} />
<div
id="download-button"
role="button"
on:keydown={onKeydown}
on:click={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
>
Download
</div>
</div>
{canvasRefs[i] &&
renderFileToCanvas(
file,
canvasRefs[i],
errorMessageRef,
colorRefs[i],
stitchesRefs[i],
sizeRefs[i]
)}
{/each}
<!-- svelte-ignore a11y-missing-content -->
<h1 bind:this={errorMessageRef} />
</div>
{/if}
<style>
#container {
display: flex;
width: 100%;
justify-content: space-evenly;
flex-wrap: wrap;
margin-top: 50px;
}
.canvas-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 550px;
max-height: 1000px;
margin-bottom: 15px;
padding: 10px;
border: 2px solid black;
}
.canvas {
height: 70%;
width: 100%;
object-fit: contain;
}
.colors-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
row-gap: 5px;
padding-bottom: 15px;
}
.stitches-container {
padding: 10px 0;
}
div[role="button"] {
background-color: #05345f;
font-weight: 500;
color: white;
padding: 10px;
border-radius: 0;
}
div[role="button"]:hover {
cursor: pointer;
background-color: black;
color: white;
}
@media only screen and (max-device-width: 812px) {
.canvas-container {
width: 100%;
height: auto;
}
#container {
width: 100%;
}
}
</style>
|
