grokbot_ty
b328871549
Length axis keeps the approved mask, replaces Flip 180 with a ± angle slider, and sets scale from wood span along the approved direction rather than bbox.longSidePx. Widths still sample every 6 in perpendicular to that axis.
59 lines
2.3 KiB
Svelte
59 lines
2.3 KiB
Svelte
<script lang="ts">
|
||
import type { Capture } from './capture.types';
|
||
import PhotoStage from './PhotoStage.svelte';
|
||
|
||
export let state: Extract<Capture, { k: 'axis' }>;
|
||
export let setAxisAngle: (deg: number) => void;
|
||
export let approveAxis: () => void;
|
||
export let back: () => void;
|
||
|
||
$: maskW = state.source.widthPx > 0 ? state.source.widthPx : 0;
|
||
$: maskH = maskW > 0 ? state.approvedMask.bitset.length / maskW : 0;
|
||
$: angleDeg = Math.round(state.axis.bbox.angleDeg);
|
||
</script>
|
||
|
||
<section class="panel">
|
||
<h1>Length axis</h1>
|
||
<p class="hint">Rotate the rectangle until it follows the slab length. The rectangle sets direction only; you enter length L on the next step.</p>
|
||
<PhotoStage
|
||
blob={state.source.blob}
|
||
bbox={state.axis.bbox}
|
||
maskBitset={state.approvedMask.bitset}
|
||
{maskW}
|
||
{maskH}
|
||
/>
|
||
<div class="angle">
|
||
<button type="button" class="thumb" aria-label="Rotate axis counter-clockwise" on:click={() => setAxisAngle(angleDeg - 1)}>−</button>
|
||
<input
|
||
type="range" min="0" max="179" step="1"
|
||
value={angleDeg}
|
||
on:input={(e) => setAxisAngle(Number(e.currentTarget.value))}
|
||
/>
|
||
<button type="button" class="thumb" aria-label="Rotate axis clockwise" on:click={() => setAxisAngle(angleDeg + 1)}>+</button>
|
||
<span class="val">{angleDeg}°</span>
|
||
</div>
|
||
<div class="row">
|
||
<button type="button" class="ghost" on:click={back}>Back</button>
|
||
<button type="button" class="primary" on:click={approveAxis}>Approve axis</button>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.panel { padding: 16px; color: #eee; }
|
||
h1 { font-size: 1.3rem; margin: 0 0 8px; }
|
||
.hint { color: #aaa; font-size: 0.9rem; margin: 0 0 12px; }
|
||
.angle { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
|
||
.thumb {
|
||
width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem;
|
||
border: 1px solid #444; background: #1d1d1d; color: #eee; flex: none;
|
||
}
|
||
input[type='range'] { flex: 1; }
|
||
.val { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
|
||
.row { display: flex; gap: 10px; margin-top: 16px; }
|
||
.primary {
|
||
flex: 1; padding: 14px; font-size: 1rem; border-radius: 10px; border: 0;
|
||
background: #00e5ff; color: #002; font-weight: 700;
|
||
}
|
||
.ghost { flex: 0.7; padding: 14px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #ccc; }
|
||
</style>
|