fix: stems not displaying correctly
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 2m0s

This commit is contained in:
max_richter 2024-04-25 03:49:28 +02:00
parent e0e1743b77
commit f1e5faf040
2 changed files with 45 additions and 16 deletions

View File

@ -778,6 +778,10 @@
let isDragging = false; let isDragging = false;
function handleMouseLeave() {
isDragging = false;
}
function handleDrop(event: DragEvent) { function handleDrop(event: DragEvent) {
event.preventDefault(); event.preventDefault();
isDragging = false; isDragging = false;
@ -865,17 +869,21 @@
on:mouseup={handleMouseUp} on:mouseup={handleMouseUp}
on:dragenter={handleDragEnter} on:dragenter={handleDragEnter}
on:dragover={handlerDragOver} on:dragover={handlerDragOver}
on:dragexit={handleDragEnd}
on:drop={handleDrop} on:drop={handleDrop}
on:mouseleave={handleMouseLeave}
on:keydown={keymap.handleKeyboardEvent} on:keydown={keymap.handleKeyboardEvent}
on:mousedown={handleMouseDown} on:mousedown={handleMouseDown}
> >
<input <input
type="file" type="file"
accept="application/wasm" accept="application/wasm"
id="drop-zone"
disabled={!isDragging} disabled={!isDragging}
on:dragend={handleDragEnd} on:dragend={handleDragEnd}
on:dragleave={handleDragEnd} on:dragleave={handleDragEnd}
/> />
<label for="drop-zone" />
<Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}> <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
<Camera bind:camera position={cameraPosition} /> <Camera bind:camera position={cameraPosition} />
@ -928,10 +936,28 @@
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: red; background: var(--layer-2);
opacity: 0.5; opacity: 0;
} }
input:disabled { input:disabled {
display: none; opacity: 0;
pointer-events: none;
}
input:disabled + label {
opacity: 0;
pointer-events: none;
}
label {
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
border-radius: 5px;
width: calc(100% - 20px);
height: calc(100% - 25px);
border: dashed 4px var(--layer-2);
background: var(--layer-1);
opacity: 0.5;
} }
</style> </style>

View File

@ -4,6 +4,7 @@
import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three"; import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
import { decodeFloat } from "@nodes/utils"; import { decodeFloat } from "@nodes/utils";
import type { PerformanceStore } from "$lib/performance"; import type { PerformanceStore } from "$lib/performance";
import { AppSettings } from "$lib/settings/app-settings";
export let result: Int32Array; export let result: Int32Array;
@ -107,9 +108,9 @@
const amount = (encodedData.length - 1) / 4; const amount = (encodedData.length - 1) / 4;
for (let i = 0; i < amount; i++) { for (let i = 0; i < amount; i++) {
const x = decodeFloat(encodedData[1 + i * 4 + 0]); const x = decodeFloat(encodedData[2 + i * 4 + 0]);
const y = decodeFloat(encodedData[1 + i * 4 + 1]); const y = decodeFloat(encodedData[2 + i * 4 + 1]);
const z = decodeFloat(encodedData[1 + i * 4 + 2]); const z = decodeFloat(encodedData[2 + i * 4 + 2]);
positions.push(new Vector3(x, y, z)); positions.push(new Vector3(x, y, z));
} }
@ -127,16 +128,18 @@
totalVertices = 0; totalVertices = 0;
totalFaces = 0; totalFaces = 0;
a = performance.now(); if ($AppSettings.showStemLines) {
lines = inputs a = performance.now();
.map((input) => { lines = inputs
if (input[0] === 0) { .map((input) => {
return createLineGeometryFromEncodedData(input); if (input[0] === 0) {
} return createLineGeometryFromEncodedData(input);
}) }
.filter(Boolean) as Vector3[][]; })
b = performance.now(); .filter(Boolean) as Vector3[][];
perf?.addPoint("create-lines", b - a); b = performance.now();
perf?.addPoint("create-lines", b - a);
}
a = performance.now(); a = performance.now();
geometries = inputs geometries = inputs