fix(capture): show bg-removed cutout on Measure Zoom/Pan immediately

Tape-mode PhotoStage skipped mask checkerboard painting, so Zoom/Pan
depended on async createMaskedPreviewBlob — a hang/fail left the stage
without a cutout. Paint mask overlay in tape mode, mount PhotoStage on
source+bitset right away (swap to alpha PNG when ready), checkerboard
stage backdrop, and prefer HTML canvas for the preview encode.
This commit is contained in:
grokbot_ty
2026-09-26 20:47:19 -07:00
parent 149197cbae
commit ca983c4dc1
3 changed files with 47 additions and 25 deletions
+16 -14
View File
@@ -228,19 +228,21 @@
{/if}
</p>
{#if maskedPreview}
<PhotoStage
mode="tape"
blob={maskedPreview}
{tape}
{cropFill}
{gestureMode}
onTapeChange={onTapeChange}
/>
{:else}
<div class="preview-loading" role="status">
{previewError || 'Preparing background-removed preview…'}
</div>
<!-- Cutout first: source + maskBitset paints checkerboard immediately (tape mode).
When createMaskedPreviewBlob finishes, swap to alpha PNG (same footprint). -->
<PhotoStage
mode="tape"
blob={maskedPreview ?? state.source.blob}
maskBitset={maskedPreview ? null : state.approvedMask.bitset}
{maskW}
{maskH}
{tape}
{cropFill}
{gestureMode}
onTapeChange={onTapeChange}
/>
{#if previewError}
<p class="preview-err" role="status">{previewError}</p>
{/if}
<div class="controls">
@@ -449,7 +451,7 @@
.mode-btn.active { background: #00e5ff; color: #002; }
.mode-hint { margin: 0 0 10px; }
.nudge { color: #e8a; font-size: 0.74rem; margin: 6px 0 0; line-height: 1.45; }
.preview-loading { min-height: 420px; border: 1px solid #333; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; text-align: center; padding: 16px; box-sizing: border-box; }
.preview-err { color: #ffb4a2; font-size: 0.85rem; margin: 8px 0 0; }
.controls { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ctl-label { font-size: 0.78rem; color: #aaa; margin: 0 0 6px; }
.ctl-label .sub { font-size: 0.7rem; color: #777; }