Skip to content
Snippets Groups Projects
Commit 700df28a authored by Albert Dong's avatar Albert Dong
Browse files

implement event handling + angle editor component

parent 67c8b86a
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/routes/BeadPreview.svelte
+ 5
− 3
View file @ 700df28a
......@@ -20,16 +20,18 @@
let segments = 1;
let api_path: string;
$: {
function updateAPIPath() {
if (result_type == "bead") {
api_path = `http://localhost:8000/api/bead?length=${length}`;
} else if (result_type == "line") {
api_path = `http://localhost:8000/api/bead_line?segments=${segments}&length=${length}`;
}
loadSTL(loader, scene, material, api_path);
}
onMount(() => {
loadSTL(loader, scene, material, api_path);
updateAPIPath();
createViewer(scene, "bead-stl");
});
</script>
......@@ -66,7 +68,7 @@
/>
{/if}
<UpdateButton {loader} {scene} {material} {api_path} />
<UpdateButton on:requestUpdate={updateAPIPath} />
<DownloadButton {api_path} />
</div>
<div class="relative flex-1 ml-2" id="bead-stl" />
......
frontend/src/routes/TipPreview.svelte
+ 4
− 3
View file @ 700df28a
......@@ -20,16 +20,17 @@
let tip_angle = 90;
let api_path: string;
$: {
function updateAPIPath() {
if (tip_type == "cone") {
api_path = `http://localhost:8000/api/cone_tip?radius=${radius}&hole_radius=${hole_radius}&tip_angle=${tip_angle}`;
} else if (tip_type == "sphere") {
api_path = `http://localhost:8000/api/sphere_tip?radius=${radius}&hole_radius=${hole_radius}`;
}
loadSTL(loader, scene, material, api_path);
}
onMount(() => {
loadSTL(loader, scene, material, api_path);
updateAPIPath();
createViewer(scene, "tip-stl");
});
</script>
......@@ -74,7 +75,7 @@
/>
{/if}
<UpdateButton {loader} {scene} {material} {api_path} />
<UpdateButton on:requestUpdate={updateAPIPath} />
</div>
<div class="relative flex-1 ml-2 max-h-full" id="tip-stl" />
</div>
......
frontend/src/routes/double/+page.svelte
+ 10
− 34
View file @ 700df28a
......@@ -5,6 +5,7 @@
import { loadSTL, createViewer } from "$lib/STLViewer";
import DownloadButton from "$lib/DownloadButton.svelte";
import UpdateButton from "$lib/UpdateButton.svelte";
import AngleEditor from "$lib/AngleEditor.svelte";
const material = new THREE.MeshPhongMaterial({
color: 0x66ff66,
......@@ -27,7 +28,7 @@
let top_current_angle_input = 45;
let api_path: string;
$: {
function updateAPIPath() {
api_path = `http://localhost:8000/api/double_sided?radius=${radius}&hole_radius=${hole_radius}&length=${length}`;
if (top_type == "cone") {
api_path += `&top_tip_angle=${top_cone_tip_angle}`;
......@@ -39,10 +40,12 @@
if (bottom_type == "cone") {
api_path += `&bottom_tip_angle=${bottom_cone_tip_angle}`;
}
loadSTL(loader, scene, material, api_path);
}
onMount(() => {
loadSTL(loader, scene, material, api_path);
updateAPIPath();
createViewer(scene, "bead-stl");
});
</script>
......@@ -108,37 +111,10 @@
{/if}
{#if top_type == "sphere"}
<label for="angle-input"> Angle Editor </label>
<div class="flex flex-row">
<input
name="angle-input"
class="flex-1 h-10 min-w-0 bg-purple-100"
type="number"
bind:value={top_current_angle_input}
/>
<button
class="h-10 rounded-full w-1/4 bg-rose-300"
on:click={() => {
if (!top_sphere_angles.includes(top_current_angle_input)) {
top_sphere_angles.push(top_current_angle_input);
top_sphere_angles = top_sphere_angles;
}
}}
>
Add
</button>
<button
class="h-10 rounded-full w-1/4 bg-rose-500"
on:click={() => {
top_sphere_angles = [0];
}}
>
Reset
</button>
</div>
<p>
Current Angles: {top_sphere_angles}
</p>
<AngleEditor
current_angle_input={top_current_angle_input}
angles={top_sphere_angles}
/>
{/if}
</div>
......@@ -160,7 +136,7 @@
{/if}
</div>
<UpdateButton {loader} {scene} {material} {api_path} />
<UpdateButton on:requestUpdate={updateAPIPath} />
<DownloadButton {api_path} />
</div>
<div class="relative flex-1 ml-2" id="bead-stl" />
......
frontend/src/routes/spherical/+page.svelte
+ 7
− 34
View file @ 700df28a
......@@ -5,6 +5,7 @@
import { loadSTL, createViewer } from "$lib/STLViewer";
import DownloadButton from "$lib/DownloadButton.svelte";
import UpdateButton from "$lib/UpdateButton.svelte";
import AngleEditor from "$lib/AngleEditor.svelte";
const material = new THREE.MeshPhongMaterial({
color: 0xa345bf,
......@@ -24,7 +25,7 @@
let copies = 1;
let api_path: string;
$: {
function updateAPIPath() {
if (bead_type == "simple") {
api_path = `http://localhost:8000/api/simple_sphere?radius=${radius}&hole_radius=${hole_radius}&copies=${copies}`;
} else if (bead_type == "normal") {
......@@ -35,10 +36,12 @@
api_path += `&angles=${angle}`;
});
}
loadSTL(loader, scene, material, api_path);
}
onMount(() => {
loadSTL(loader, scene, material, api_path);
updateAPIPath();
createViewer(scene, "sphere-stl");
});
</script>
......@@ -90,37 +93,7 @@
{/if}
{#if bead_type == "multi"}
<label for="angle-input"> Angle Editor </label>
<div class="flex flex-row">
<input
name="angle-input"
class="flex-1 h-10 min-w-0 bg-purple-100"
type="number"
bind:value={current_angle_input}
/>
<button
class="h-10 rounded-full w-1/4 bg-rose-300"
on:click={() => {
if (!angles.includes(current_angle_input)) {
angles.push(current_angle_input);
angles = angles;
}
}}
>
Add
</button>
<button
class="h-10 rounded-full w-1/4 bg-rose-500"
on:click={() => {
angles = [0];
}}
>
Reset
</button>
</div>
<p>
Current Angles: {angles}
</p>
<AngleEditor {current_angle_input} {angles} />
{/if}
<label for="copies-input"> Copies </label>
......@@ -131,7 +104,7 @@
bind:value={copies}
/>
<UpdateButton {loader} {scene} {material} {api_path} />
<UpdateButton on:requestUpdate={updateAPIPath} />
<DownloadButton {api_path} />
</div>
<div class="relative flex-1 ml-2" id="sphere-stl" />
......
frontend/src/routes/structures/+page.svelte
+ 5
− 3
View file @ 700df28a
......@@ -23,7 +23,7 @@
let num_sides = 3;
let api_path: string;
$: {
function updateAPIPath() {
if (struct_type == "square") {
api_path = `http://localhost:8000/api/square-struct?side_length=${side_length}&beads_per_side=${beads_per_side}&hole_radius=${hole_radius}&corner_type=${corner_type}`;
} else if (struct_type == "triangle") {
......@@ -31,10 +31,12 @@
} else if (struct_type == "polygon") {
api_path = `http://localhost:8000/api/polygon-struct?num_sides=${num_sides}&side_length=${side_length}&beads_per_side=${beads_per_side}&hole_radius=${hole_radius}&corner_type=${corner_type}`;
}
loadSTL(loader, scene, material, api_path);
}
onMount(() => {
loadSTL(loader, scene, material, api_path);
updateAPIPath();
createViewer(scene, "struct-stl");
});
</script>
......@@ -105,7 +107,7 @@
bind:value={hole_radius}
/>
<UpdateButton {loader} {scene} {material} {api_path} />
<UpdateButton on:requestUpdate={updateAPIPath} />
<DownloadButton {api_path} />
</div>
<div class="relative flex-1 ml-2" id="struct-stl" />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment