2012 lines
90 KiB
JavaScript
2012 lines
90 KiB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
||
import { useRef, useState, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, } from 'react';
|
||
import { View, StyleSheet, Button, Dimensions, Text, TouchableOpacity, ScrollView, } from 'react-native';
|
||
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||
import { runOnJS } from 'react-native-reanimated';
|
||
import { launchImageLibrary } from 'react-native-image-picker';
|
||
import cv from '../utils/opencvAdapter';
|
||
import { buildAllRegionOutlinePaths, buildRegionOutlinePathForRegion, downsampleMaskDataForPaths, extractRegionsFromMaskBufferSync, isBaseboardMaskPixel, upscaleBinaryMask, } from '../utils/maskSegmentation';
|
||
import { clearDerivedImageCache, readPngBgrBuffer, prewarmPngBgrCache, resizeBgrBuffer, } from '../utils/pngImage';
|
||
import { resolveImageUrl } from '../utils/resolveImageUrl';
|
||
import { compositePaintedImage } from '../utils/compositePaintedImage';
|
||
import { paintedRegionsFingerprint, resolveExportResultForDestDir, } from '../utils/exportUtils';
|
||
import { preparePaintResourcesFromWorkBuffer, releaseFreqLayerImages, } from '../utils/freqLayerPrep';
|
||
import { PaintShaderLayer, createPaintColorMapForPaint, } from '../utils/paintShaderRuntime';
|
||
import { createRuntimeConfig, getMaskRuntimeRevision, getMaskSegmentRuntimeConfig, resolvePipelineConfig, setMaskSegmentRuntimeConfig, } from '../utils/maskSegmentRuntime';
|
||
import { Canvas, Image as SkiaImage, Path, Group, DashPathEffect, Rect, useCanvasRef, Skia, } from '@shopify/react-native-skia';
|
||
/* ==========================================================================
|
||
* 配置常量（屏幕相关；其余见 maskSegmentRuntime）
|
||
* ========================================================================== */
|
||
const { width: SCREEN_WIDTH } = Dimensions.get('window');
|
||
function bgrColorEquals(a, b) {
|
||
return a.b === b.b && a.g === b.g && a.r === b.r;
|
||
}
|
||
/* ==========================================================================
|
||
* 几何工具
|
||
* ========================================================================== */
|
||
function rectsEqual(a, b) {
|
||
return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
|
||
}
|
||
function getContainRect(canvasW, canvasH, imgW, imgH) {
|
||
const imgAspect = imgW / imgH;
|
||
const canvasAspect = canvasW / canvasH;
|
||
if (imgAspect > canvasAspect) {
|
||
const w = canvasW;
|
||
const h = canvasW / imgAspect;
|
||
return { x: 0, y: (canvasH - h) / 2, w, h };
|
||
}
|
||
const h = canvasH;
|
||
const w = canvasH * imgAspect;
|
||
return { x: (canvasW - w) / 2, y: 0, w, h };
|
||
}
|
||
function canvasToNormalized(cx, cy, canvasW, canvasH, imgW, imgH) {
|
||
const rect = getContainRect(canvasW, canvasH, imgW, imgH);
|
||
if (cx < rect.x ||
|
||
cx > rect.x + rect.w ||
|
||
cy < rect.y ||
|
||
cy > rect.y + rect.h) {
|
||
return null;
|
||
}
|
||
return {
|
||
x: (cx - rect.x) / rect.w,
|
||
y: (cy - rect.y) / rect.h,
|
||
};
|
||
}
|
||
/**
|
||
* Inverse of the Skia Group transform applied during pinch-zoom.
|
||
* Converts a raw touch point (screen pixels) back to the canvas coordinate
|
||
* space where the image and regions are positioned before any scale/pan.
|
||
* When zoomScale ≤ 1 (no zoom), returns the input unchanged.
|
||
*/
|
||
function screenToCanvasCoords(screenX, screenY, canvasW, canvasH, zoomScale, panOffset) {
|
||
if (zoomScale <= 1)
|
||
return { x: screenX, y: screenY };
|
||
// Reverse: translate(-pan) → unscale around center → translate(+center)
|
||
return {
|
||
x: (screenX - panOffset.x - canvasW / 2) / zoomScale + canvasW / 2,
|
||
y: (screenY - panOffset.y - canvasH / 2) / zoomScale + canvasH / 2,
|
||
};
|
||
}
|
||
function pointInPolygon(x, y, points) {
|
||
let inside = false;
|
||
for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
|
||
const xi = points[i].x;
|
||
const yi = points[i].y;
|
||
const xj = points[j].x;
|
||
const yj = points[j].y;
|
||
const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
|
||
if (intersect)
|
||
inside = !inside;
|
||
}
|
||
return inside;
|
||
}
|
||
function pointInPolygonWithPadding(x, y, points, padding) {
|
||
if (points.length < 3) {
|
||
return false;
|
||
}
|
||
let minX = points[0].x;
|
||
let maxX = points[0].x;
|
||
let minY = points[0].y;
|
||
let maxY = points[0].y;
|
||
for (const point of points) {
|
||
minX = Math.min(minX, point.x);
|
||
maxX = Math.max(maxX, point.x);
|
||
minY = Math.min(minY, point.y);
|
||
maxY = Math.max(maxY, point.y);
|
||
}
|
||
if (x >= minX - padding &&
|
||
x <= maxX + padding &&
|
||
y >= minY - padding &&
|
||
y <= maxY + padding) {
|
||
if (maxY - minY < padding * 2.5 || maxX - minX < padding * 2.5) {
|
||
return true;
|
||
}
|
||
}
|
||
return pointInPolygon(x, y, points);
|
||
}
|
||
function getRegionHitPolygons(reg) {
|
||
return reg.hitPolygons && reg.hitPolygons.length > 0
|
||
? reg.hitPolygons
|
||
: reg.polygons;
|
||
}
|
||
function pointHitsRegion(x, y, reg, options) {
|
||
const interaction = getMaskSegmentRuntimeConfig().interaction;
|
||
const thinPadding = options?.thinPadding ?? interaction.thinStripPadding;
|
||
const padding = reg.thinStrip ? thinPadding : interaction.regionPadding;
|
||
return getRegionHitPolygons(reg).some(poly => poly.length >= 3 && pointInPolygonWithPadding(x, y, poly, padding));
|
||
}
|
||
function pointStrictlyHitsRegion(x, y, reg) {
|
||
return getRegionHitPolygons(reg).some(poly => poly.length >= 3 && pointInPolygon(x, y, poly));
|
||
}
|
||
function resolveRegionHit(regions, x, y) {
|
||
const hits = [];
|
||
for (const reg of regions) {
|
||
const bboxPad = reg.thinStrip ? 0.005 : 0;
|
||
const b = reg.bbox;
|
||
if (x < b.x - bboxPad ||
|
||
x > b.x + b.w + bboxPad ||
|
||
y < b.y - bboxPad ||
|
||
y > b.y + b.h + bboxPad) {
|
||
continue;
|
||
}
|
||
if (pointHitsRegion(x, y, reg)) {
|
||
hits.push(reg);
|
||
}
|
||
}
|
||
if (hits.length === 0) {
|
||
return null;
|
||
}
|
||
if (hits.length === 1) {
|
||
return hits[0].id;
|
||
}
|
||
const strictNonThin = hits.filter(reg => !reg.thinStrip && pointStrictlyHitsRegion(x, y, reg));
|
||
if (strictNonThin.length > 0) {
|
||
strictNonThin.sort((a, b) => a.area - b.area);
|
||
return strictNonThin[0].id;
|
||
}
|
||
const strictThin = hits.filter(reg => reg.thinStrip && pointStrictlyHitsRegion(x, y, reg));
|
||
if (strictThin.length > 0) {
|
||
strictThin.sort((a, b) => a.area - b.area);
|
||
return strictThin[0].id;
|
||
}
|
||
const nonThin = hits.filter(reg => !reg.thinStrip);
|
||
if (nonThin.length > 0) {
|
||
nonThin.sort((a, b) => a.area - b.area);
|
||
return nonThin[0].id;
|
||
}
|
||
hits.sort((a, b) => a.area - b.area);
|
||
return hits[0].id;
|
||
}
|
||
function pickKickRegionFromMask(normX, normY, pick, kickRegionId, baseboardPickMask, strict = false) {
|
||
const cx = Math.floor(normX * pick.cols);
|
||
const cy = Math.floor(normY * pick.rows);
|
||
if (cx < 0 || cy < 0 || cx >= pick.cols || cy >= pick.rows) {
|
||
return null;
|
||
}
|
||
if (strict) {
|
||
if (baseboardPickMask) {
|
||
return baseboardPickMask[cy * pick.cols + cx] ? kickRegionId : null;
|
||
}
|
||
return isBaseboardMaskPixel(pick.buffer, pick.cols, pick.rows, cx, cy)
|
||
? kickRegionId
|
||
: null;
|
||
}
|
||
const interaction = getMaskSegmentRuntimeConfig().interaction;
|
||
const radius = Math.max(interaction.kickMaskPickRadiusPx, Math.floor(pick.cols * 0.022));
|
||
const radiusSq = radius * radius;
|
||
for (let dy = -radius; dy <= radius; dy++) {
|
||
for (let dx = -radius; dx <= radius; dx++) {
|
||
if (dx * dx + dy * dy > radiusSq) {
|
||
continue;
|
||
}
|
||
const x = cx + dx;
|
||
const y = cy + dy;
|
||
if (x < 0 || y < 0 || x >= pick.cols || y >= pick.rows) {
|
||
continue;
|
||
}
|
||
if (baseboardPickMask) {
|
||
if (baseboardPickMask[y * pick.cols + x]) {
|
||
return kickRegionId;
|
||
}
|
||
continue;
|
||
}
|
||
if (isBaseboardMaskPixel(pick.buffer, pick.cols, pick.rows, x, y)) {
|
||
return kickRegionId;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
function pickKickNearStrip(normX, normY, kickReg) {
|
||
const polys = kickReg.hitPolygons ?? kickReg.polygons;
|
||
const pad = getMaskSegmentRuntimeConfig().interaction.thinStripPadding + 0.004;
|
||
return polys.some(poly => poly.length >= 3 && pointInPolygonWithPadding(normX, normY, poly, pad));
|
||
}
|
||
function lookupRegionFromPickMap(normX, normY, pick, radiusPx = getMaskSegmentRuntimeConfig().interaction.pickMapSearchRadiusPx) {
|
||
const cx = Math.min(pick.cols - 1, Math.max(0, Math.floor(normX * pick.cols)));
|
||
const cy = Math.min(pick.rows - 1, Math.max(0, Math.floor(normY * pick.rows)));
|
||
const readCode = (x, y) => pick.buffer[y * pick.cols + x];
|
||
const center = readCode(cx, cy);
|
||
if (center > 0) {
|
||
return center - 1;
|
||
}
|
||
if (radiusPx <= 0) {
|
||
return null;
|
||
}
|
||
const r = Math.max(4, radiusPx);
|
||
const rSq = r * r;
|
||
for (let dy = -r; dy <= r; dy++) {
|
||
for (let dx = -r; dx <= r; dx++) {
|
||
if (dx * dx + dy * dy > rSq) {
|
||
continue;
|
||
}
|
||
const x = cx + dx;
|
||
const y = cy + dy;
|
||
if (x < 0 || y < 0 || x >= pick.cols || y >= pick.rows) {
|
||
continue;
|
||
}
|
||
const code = readCode(x, y);
|
||
if (code > 0) {
|
||
return code - 1;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
/** BGR → 屏幕 RGB */
|
||
function bgrToCss(b, g, r) {
|
||
return `rgb(${r},${g},${b})`;
|
||
}
|
||
function releasePaintResourceLayers(layers) {
|
||
if (!layers) {
|
||
return;
|
||
}
|
||
layers.lowFreqImage.dispose();
|
||
layers.highFreqImage.dispose();
|
||
}
|
||
function releaseOriginSkImage(image) {
|
||
if (image) {
|
||
image.dispose();
|
||
}
|
||
}
|
||
async function prepareWorkScaledBgrBuffer(bgrBuffer, cols, rows, workScale) {
|
||
if (workScale >= 1) {
|
||
return { buffer: bgrBuffer, cols, rows };
|
||
}
|
||
const workCols = Math.floor(cols * workScale);
|
||
const workRows = Math.floor(rows * workScale);
|
||
const buffer = resizeBgrBuffer(bgrBuffer, cols, rows, workCols, workRows);
|
||
return { buffer, cols: workCols, rows: workRows };
|
||
}
|
||
/* ==========================================================================
|
||
* 分段计时工具（仅开发环境生效）
|
||
* ========================================================================== */
|
||
let _timeLogTs = 0;
|
||
function timeLog(tag) {
|
||
if (!__DEV__)
|
||
return;
|
||
const now = performance.now();
|
||
const dt = _timeLogTs ? now - _timeLogTs : 0;
|
||
console.log(`[⏱ ${tag}] ${dt.toFixed(2)} ms`);
|
||
_timeLogTs = now;
|
||
}
|
||
/* ==========================================================================
|
||
* 组件主体
|
||
* ========================================================================== */
|
||
const MaskSegmentCanvas = forwardRef(function MaskSegmentCanvas(props, ref) {
|
||
const { originUrl: originUrlProp, maskUrl: maskUrlProp, originImgPath: originImgPathLegacy, maskImgPath: maskImgPathLegacy, maskConfig, pipelinePreset, pipelineConfig, paintConfig, interactionConfig, semanticColors, regionOutlineColor, initialSession, initialPaintColor, initialPaintConfigJson, showDebugPickers = true, showToolbar = true, showColorBar = true, showStatusRow = true, showOverlayButtons = true, disabled = false, style, canvasStyle, maxHeight, undoButtonStyle, compareButtonStyle, undoButtonTextStyle, compareButtonTextStyle, undoButtonText = '撤销', compareButtonText = '对比原图', compareExitButtonText = '退出对比', renderUndoButton, renderCompareButton, onWatch, onPaintCallback, onError, autoExportOnReady, onExported, } = props;
|
||
const originSource = originUrlProp ?? originImgPathLegacy ?? '';
|
||
const maskSource = maskUrlProp ?? maskImgPathLegacy ?? '';
|
||
const resolvedMaskConfig = useMemo(() => semanticColors
|
||
? { ...maskConfig, semanticColors }
|
||
: maskConfig, [maskConfig, semanticColors]);
|
||
const resolvedPaintConfig = useMemo(() => regionOutlineColor
|
||
? { ...paintConfig, regionOverlayFill: regionOutlineColor }
|
||
: paintConfig, [paintConfig, regionOutlineColor]);
|
||
const [resolvedOriginPath, setResolvedOriginPath] = useState('');
|
||
const [resolvedMaskPath, setResolvedMaskPath] = useState('');
|
||
const [originImgPath, setOriginImgPath] = useState(resolvedOriginPath);
|
||
const [maskImgPath, setMaskImgPath] = useState(resolvedMaskPath);
|
||
// Latest desired image paths (updated when the internal path states settle).
|
||
// Used by segmentAndPrepareLayers to decide whether a stale runId (from effect cleanup due to
|
||
// unrelated parent re-renders) should actually abort the current async read/segment work.
|
||
// If the image pair we are processing is still the one the caller ultimately wants, we continue.
|
||
const latestOriginPathRef = useRef('');
|
||
const latestMaskPathRef = useRef('');
|
||
const resolvedPipelineConfig = useMemo(() => resolvePipelineConfig(pipelinePreset, pipelineConfig), [pipelinePreset, pipelineConfig]);
|
||
const runtimeRef = useRef(createRuntimeConfig({
|
||
maskConfig: resolvedMaskConfig,
|
||
pipelineConfig: resolvedPipelineConfig,
|
||
paintConfig: resolvedPaintConfig,
|
||
interactionConfig,
|
||
}));
|
||
// Track last *values* we pushed for paintConfig. We only call the global setMaskSegmentRuntimeConfig
|
||
// (which bumps runtimeRevision) when the actual numbers change. This prevents repeated parent
|
||
// re-renders that pass a new object literal with identical values from causing:
|
||
// - global revision bump
|
||
// - paintColorMap useMemo invalidation (full-res Uint8Array + boxBlur + Skia image alloc)
|
||
// - extra main-thread work during the critical segmentation / freq-layers / outline paths window.
|
||
// The local runtimeRef is still kept in sync for any synchronous readers.
|
||
const lastAppliedPaintConfigRef = useRef(null);
|
||
const lastAppliedPipelineSignatureRef = useRef(null);
|
||
useEffect(() => {
|
||
const prevPaint = lastAppliedPaintConfigRef.current;
|
||
const currPaint = resolvedPaintConfig || {};
|
||
const paintKeys = [
|
||
'colorBaseOpacity',
|
||
'lLightOpacity',
|
||
'textureOpacity',
|
||
'lLowBlurKernel',
|
||
'lLowContrast',
|
||
'lLowBrightness',
|
||
'lHighGain',
|
||
'maskFeatherColor',
|
||
'maskFeatherTexture',
|
||
'regionOverlayFill',
|
||
];
|
||
const paintChanged = !prevPaint || paintKeys.some((k) => currPaint[k] !== prevPaint[k]);
|
||
const pipelineSignature = JSON.stringify(resolvedPipelineConfig);
|
||
const pipelineChanged = lastAppliedPipelineSignatureRef.current !== pipelineSignature;
|
||
if (paintChanged || pipelineChanged) {
|
||
if (paintChanged) {
|
||
lastAppliedPaintConfigRef.current = { ...currPaint };
|
||
}
|
||
if (pipelineChanged) {
|
||
lastAppliedPipelineSignatureRef.current = pipelineSignature;
|
||
}
|
||
runtimeRef.current = setMaskSegmentRuntimeConfig({
|
||
maskConfig: resolvedMaskConfig,
|
||
pipelineConfig: resolvedPipelineConfig,
|
||
paintConfig: resolvedPaintConfig,
|
||
interactionConfig,
|
||
});
|
||
}
|
||
}, [
|
||
resolvedMaskConfig,
|
||
resolvedPipelineConfig,
|
||
resolvedPaintConfig,
|
||
interactionConfig,
|
||
]);
|
||
const paintPalette = runtimeRef.current.paint.palette;
|
||
const paintRuntime = getMaskSegmentRuntimeConfig().paint;
|
||
const interactionRuntime = getMaskSegmentRuntimeConfig().interaction;
|
||
const onWatchRef = useRef(onWatch);
|
||
const onPaintCallbackRef = useRef(onPaintCallback);
|
||
const onErrorRef = useRef(onError);
|
||
const onExportedRef = useRef(onExported);
|
||
useEffect(() => {
|
||
onWatchRef.current = onWatch;
|
||
onPaintCallbackRef.current = onPaintCallback;
|
||
onErrorRef.current = onError;
|
||
onExportedRef.current = onExported;
|
||
}, [onWatch, onPaintCallback, onError, onExported]);
|
||
const watchStartRef = useRef(0);
|
||
const lastWatchStateRef = useRef(null);
|
||
const lastWatchSignatureRef = useRef(null);
|
||
const emitWatch = useCallback((state, detail) => {
|
||
const signature = [
|
||
state,
|
||
detail?.regionCount ?? '',
|
||
detail?.maskPathsReady ?? '',
|
||
detail?.freqLayersReady ?? '',
|
||
detail?.errorMessage ?? '',
|
||
].join('|');
|
||
if (lastWatchSignatureRef.current === signature) {
|
||
return;
|
||
}
|
||
lastWatchSignatureRef.current = signature;
|
||
lastWatchStateRef.current = state;
|
||
const durationMs = watchStartRef.current
|
||
? performance.now() - watchStartRef.current
|
||
: 0;
|
||
onWatchRef.current?.(state, durationMs, detail);
|
||
}, []);
|
||
const reportError = useCallback((message, error) => {
|
||
emitWatch('error', { errorMessage: message });
|
||
if (onErrorRef.current) {
|
||
onErrorRef.current(message, error);
|
||
}
|
||
else if (__DEV__) {
|
||
console.error('[MaskSegment]', message, error);
|
||
}
|
||
}, [emitWatch]);
|
||
const [customPaintColor, setCustomPaintColor] = useState(initialPaintColor ?? null);
|
||
const customPaintConfigJsonRef = useRef(initialPaintConfigJson);
|
||
const originUrlRef = useRef(originSource);
|
||
const maskUrlRef = useRef(maskSource);
|
||
useEffect(() => {
|
||
originUrlRef.current = originSource;
|
||
maskUrlRef.current = maskSource;
|
||
}, [originSource, maskSource]);
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
if (!originSource || !maskSource) {
|
||
setResolvedOriginPath('');
|
||
setResolvedMaskPath('');
|
||
return;
|
||
}
|
||
void (async () => {
|
||
try {
|
||
const [originPath, maskPath] = await Promise.all([
|
||
resolveImageUrl(originSource, 'origin.png'),
|
||
resolveImageUrl(maskSource, 'mask.png'),
|
||
]);
|
||
if (!cancelled) {
|
||
setResolvedOriginPath(originPath);
|
||
setResolvedMaskPath(maskPath);
|
||
}
|
||
}
|
||
catch (e) {
|
||
if (!cancelled) {
|
||
const msg = e instanceof Error ? e.message : String(e);
|
||
reportError(msg, e);
|
||
}
|
||
}
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [originSource, maskSource, reportError]);
|
||
useEffect(() => {
|
||
setOriginImgPath(resolvedOriginPath);
|
||
setMaskImgPath(resolvedMaskPath);
|
||
if (resolvedOriginPath && resolvedMaskPath) {
|
||
prewarmPngBgrCache([resolvedOriginPath, resolvedMaskPath]);
|
||
}
|
||
}, [resolvedOriginPath, resolvedMaskPath]);
|
||
// Keep latest desired paths for cancellation decisions inside the long async segment pipeline.
|
||
useEffect(() => {
|
||
latestOriginPathRef.current = originImgPath || '';
|
||
latestMaskPathRef.current = maskImgPath || '';
|
||
}, [originImgPath, maskImgPath]);
|
||
const [paintResourceLayers, setPaintResourceLayers] = useState(null);
|
||
const paintResourceLayersRef = useRef(null);
|
||
const paintColorMapSkImgRef = useRef(null);
|
||
const [activeBrushIndex, setActiveBrushIndex] = useState(null);
|
||
const [paintedRegions, setPaintedRegions] = useState(() => new Map());
|
||
const paintedRegionsRef = useRef(new Map());
|
||
const [paintHistory, setPaintHistory] = useState([]);
|
||
// Seed the ref with the initial empty map so early reads (before any paint effect)
|
||
// are consistent.
|
||
paintedRegionsRef.current = paintedRegions;
|
||
const [heldRegionId, setHeldRegionId] = useState(null);
|
||
const [heldRegionAnchor, setHeldRegionAnchor] = useState(null);
|
||
const [initFlashRegionId, setInitFlashRegionId] = useState(null);
|
||
const initFlashTimerRef = useRef(null);
|
||
const initFlashIndexRef = useRef(0);
|
||
const initFlashActiveRef = useRef(false);
|
||
// List of regions still eligible for the init dashed-outline flash (discovery aid).
|
||
// Computed at the start of the flash loop, excluding any that are already painted.
|
||
// This ensures that on continue-edit (or any partial seed), already-colored regions
|
||
// do not get the flashing dashed outline.
|
||
const initFlashListRef = useRef([]);
|
||
// Guard so that initialSession (seed from host bootstrap or scheme) is applied only once
|
||
// after segmentsReady. Prevents later prop identity changes (e.g. caused by host slot/brush
|
||
// selection re-renders) from calling restoreSession again, which would clobber live
|
||
// paintedRegions with a re-derived snapshot (often causing already-painted regions to
|
||
// "follow" the newly selected brush color).
|
||
const hasAppliedInitialSessionRef = useRef(false);
|
||
// Keep a ref to the absolute latest paintedRegions so that imperative save()
|
||
// (called from host performSaveProject for new schemes, or manually) and
|
||
// internal composites always see the most up-to-date painted state, even
|
||
// if the useImperativeHandle closure was created in a prior render.
|
||
// This fixes cases where the last user paint's colors were missing from
|
||
// the recolored After image captured at "save scheme" time.
|
||
useEffect(() => {
|
||
paintedRegionsRef.current = paintedRegions;
|
||
}, [paintedRegions]);
|
||
// Cached export from the most recent auto-export or save() — keyed by painted fingerprint.
|
||
const lastExportCacheRef = useRef(null);
|
||
const autoExportDebounceRef = useRef(null);
|
||
const exportInFlightRef = useRef(false);
|
||
const regionsRef = useRef([]);
|
||
const maskPickRef = useRef(null);
|
||
const regionPickRef = useRef(null);
|
||
const regionMaskDataRef = useRef(null);
|
||
const workBufferRef = useRef(null);
|
||
const paintLayersPromiseRef = useRef(null);
|
||
const loadPaintLayersRef = useRef(() => Promise.resolve());
|
||
const [paintResourcesReady, setPaintResourcesReady] = useState(false);
|
||
const [layersLoading, setLayersLoading] = useState(false);
|
||
const [maskPathsReady, setMaskPathsReady] = useState(false);
|
||
const baseboardPickMaskRef = useRef(null);
|
||
const kickRegionIdRef = useRef(null);
|
||
const [regionPalette, setRegionPalette] = useState([]);
|
||
const [regionCount, setRegionCount] = useState(0);
|
||
const [imageSize, setImageSize] = useState(null);
|
||
// High-resolution offscreen Canvas (sized to the work buffer resolution) whose content
|
||
// is the full shader composition (PaintShaderLayer at 0,0,workW,workH). On save() we
|
||
// call makeImageSnapshot() on it to get a "what you see in the editor, at source res"
|
||
// PNG bytes. This is the preferred "保存快照" path and avoids CPU recolor entirely
|
||
// for the exported After.
|
||
const highResExportCanvasRef = useCanvasRef();
|
||
const [exportCanvasSize, setExportCanvasSize] = useState(null);
|
||
// Gate the (potentially expensive) high-res snapshot canvas so it is only mounted
|
||
// after the user (or initialSession seed) has painted at least one region. This keeps
|
||
// idle segmentation / no-paint cases cheap.
|
||
const [highResSnapshotEnabled, setHighResSnapshotEnabled] = useState(false);
|
||
// Layout measurement for the root container of this component. Declared early so
|
||
// the canvasW/canvasH memos (which decide the viewport rect for zoom centering,
|
||
// containRect placement, clipping, and gesture coordinate mapping) can close over it.
|
||
// When the host passes a fitted frame (VisualizationScreen's canvasFrame with explicit
|
||
// w/h derived from safe area + aspect, or scheme cards), we size our internal Skia
|
||
// canvas + gesture layer + zoom transform to that exact allocated rect.
|
||
const [layoutWidth, setLayoutWidth] = useState(null);
|
||
const [layoutHeight, setLayoutHeight] = useState(null);
|
||
const [segmentsReady, setSegmentsReady] = useState(false);
|
||
const segmentsReadyRef = useRef(false);
|
||
const maskPathsReadyRef = useRef(false);
|
||
const [canvasInteractive, setCanvasInteractive] = useState(false);
|
||
const [segError, setSegError] = useState('');
|
||
const [compareMode, setCompareMode] = useState(false);
|
||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||
const [originSkImg, setOriginSkImg] = useState(null);
|
||
const originSkImgRef = useRef(null);
|
||
const lowFreqSkImg = paintResourceLayers?.lowFreqImage ?? null;
|
||
const highFreqSkImg = paintResourceLayers?.highFreqImage ?? null;
|
||
const canvasBaseW = SCREEN_WIDTH - 20;
|
||
// The "viewport" size for this canvas component: the rect inside which we place
|
||
// the contained image, apply the zoom Group transform (centered), clip, and receive
|
||
// gestures (tap + two-finger pinch). When we have a real onLayout from the host
|
||
// (VisualizationScreen's aspect-fitted canvasFrame, or scheme card preview area),
|
||
// we use the *allocated pixel size* directly as our viewport.
|
||
//
|
||
// Accurate canvasW/H is still critical for:
|
||
// - Correct centering of the scaled content around the viewport center.
|
||
// - Proper containRect (letterbox/centering of the source photo inside the viewport).
|
||
// - Clip rect and gesture-to-canvas coordinate conversion used by painting.
|
||
//
|
||
// Previously the code fell back to aspect-derived sizes even after layout, which
|
||
// could cause the effective viewport to not match the host frame. Using the onLayout
|
||
// result (with maxHeight fallback only when no layout yet) keeps zoom, clip, and
|
||
// touch mapping consistent with what the user actually sees and touches.
|
||
const viewportW = useMemo(() => {
|
||
if (layoutWidth != null && layoutHeight != null) {
|
||
// Primary path for viz screen and scheme cards: the exact size the host
|
||
// decided for this component (after its own safe-area + aspect fit).
|
||
return layoutWidth;
|
||
}
|
||
if (!maxHeight || maxHeight <= 0) {
|
||
return canvasBaseW;
|
||
}
|
||
// Fallback (no layout yet, or other usages that pass maxHeight without a
|
||
// tightly sized parent frame). Replicate a contain-style budget.
|
||
const availableW = canvasBaseW;
|
||
let auxHeight = 0;
|
||
if (showToolbar)
|
||
auxHeight += 40;
|
||
if (showStatusRow)
|
||
auxHeight += 30;
|
||
if (showColorBar)
|
||
auxHeight += 70;
|
||
const availableH = Math.max(100, maxHeight - 20 - auxHeight);
|
||
const imgAspect = imageSize ? imageSize.w / imageSize.h : 1;
|
||
const containerAspect = availableW / availableH;
|
||
if (containerAspect > imgAspect) {
|
||
return Math.floor(availableH * imgAspect);
|
||
}
|
||
return availableW;
|
||
}, [layoutWidth, layoutHeight, maxHeight, showToolbar, showStatusRow, showColorBar, canvasBaseW, imageSize]);
|
||
const viewportH = useMemo(() => {
|
||
if (layoutWidth != null && layoutHeight != null) {
|
||
return layoutHeight;
|
||
}
|
||
if (!maxHeight || maxHeight <= 0) {
|
||
const imgAspect = imageSize ? imageSize.w / imageSize.h : 1;
|
||
return Math.floor(viewportW / imgAspect);
|
||
}
|
||
let auxHeight = 0;
|
||
if (showToolbar)
|
||
auxHeight += 40;
|
||
if (showStatusRow)
|
||
auxHeight += 30;
|
||
if (showColorBar)
|
||
auxHeight += 70;
|
||
return Math.max(100, maxHeight - 20 - auxHeight);
|
||
}, [layoutWidth, layoutHeight, maxHeight, showToolbar, showStatusRow, showColorBar, viewportW, imageSize]);
|
||
// For the rest of the component, "canvasW/H" means the viewport rect size.
|
||
// All zoom center, wrap size, touch layer, Canvas size, clip, containRect, and
|
||
// gesture coordinate mapping are based on this, so that two-finger zoom centering
|
||
// and single-finger tap painting stay consistent with the host-allocated area.
|
||
const canvasW = viewportW;
|
||
const canvasH = viewportH;
|
||
// Refs synced to the latest viewport size so that async callbacks
|
||
// (segmentAndPrepareLayers) always read post-layout values instead of
|
||
// stale closure captures. This fixes dashed-outline offset to the bottom
|
||
// when the initial pathMapRect was computed with fallback SCREEN_WIDTH.
|
||
// Declared before segmentAndPrepareLayers so the async body can reference them.
|
||
const canvasWRef = useRef(canvasW);
|
||
const canvasHRef = useRef(canvasH);
|
||
// ── Pinch-zoom (two-finger only; single-finger drag/pan disabled) ─────────
|
||
const [zoomScale, setZoomScale] = useState(1);
|
||
const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
|
||
// Refs for gesture callbacks (closures don't capture fresh state mid-gesture)
|
||
const zoomScaleRef = useRef(1);
|
||
const panOffsetRef = useRef({ x: 0, y: 0 });
|
||
// Baseline value captured at gesture start to avoid jump on re-creation for pinch
|
||
const zoomBaseRef = useRef(1);
|
||
// Ref to the latest containRect (the actual placed photo rect inside the viewport).
|
||
const containRectRef = useRef(null);
|
||
useEffect(() => { zoomScaleRef.current = zoomScale; }, [zoomScale]);
|
||
useEffect(() => { panOffsetRef.current = panOffset; }, [panOffset]);
|
||
const resetZoom = useCallback(() => {
|
||
setZoomScale(1);
|
||
setPanOffset({ x: 0, y: 0 });
|
||
zoomScaleRef.current = 1;
|
||
panOffsetRef.current = { x: 0, y: 0 };
|
||
}, []);
|
||
const containRect = useMemo(() => {
|
||
if (!imageSize)
|
||
return null;
|
||
return getContainRect(canvasW, canvasH, imageSize.w, imageSize.h);
|
||
}, [imageSize, canvasW, canvasH]);
|
||
// Keep a ref in sync so early-defined callbacks can read the
|
||
// latest containRect without TDZ or stale closure issues.
|
||
useEffect(() => {
|
||
containRectRef.current = containRect;
|
||
}, [containRect]);
|
||
const segmentRunIdRef = useRef(0);
|
||
const lastSegmentKeyRef = useRef('');
|
||
const segmentInFlightKeyRef = useRef('');
|
||
const maskPathsContainRectRef = useRef(null);
|
||
useEffect(() => {
|
||
paintResourceLayersRef.current = paintResourceLayers;
|
||
}, [paintResourceLayers]);
|
||
useEffect(() => {
|
||
segmentsReadyRef.current = segmentsReady;
|
||
}, [segmentsReady]);
|
||
useEffect(() => {
|
||
maskPathsReadyRef.current = maskPathsReady;
|
||
}, [maskPathsReady]);
|
||
const emitLayersReadyIfReady = useCallback(() => {
|
||
if (!segmentsReadyRef.current || !paintResourceLayersRef.current) {
|
||
return;
|
||
}
|
||
emitWatch('layers_ready', {
|
||
regionCount: regionsRef.current.length,
|
||
maskPathsReady: maskPathsReadyRef.current,
|
||
freqLayersReady: true,
|
||
});
|
||
}, [emitWatch]);
|
||
const emitMaskPathsReadyIfReady = useCallback(() => {
|
||
if (!segmentsReadyRef.current || !maskPathsReadyRef.current) {
|
||
return;
|
||
}
|
||
emitWatch('mask_paths_ready', {
|
||
regionCount: regionsRef.current.length,
|
||
maskPathsReady: true,
|
||
freqLayersReady: true,
|
||
});
|
||
}, [emitWatch]);
|
||
const emitInteractiveIfReady = useCallback(() => {
|
||
if (!segmentsReadyRef.current || !paintResourceLayersRef.current) {
|
||
return;
|
||
}
|
||
emitLayersReadyIfReady();
|
||
emitWatch('interactive', {
|
||
regionCount: regionsRef.current.length,
|
||
maskPathsReady: maskPathsReadyRef.current,
|
||
freqLayersReady: true,
|
||
});
|
||
setCanvasInteractive(true);
|
||
}, [emitWatch, emitLayersReadyIfReady]);
|
||
const paintColorMapSkImg = useMemo(() => {
|
||
const pick = regionPickRef.current;
|
||
paintColorMapSkImgRef.current?.dispose();
|
||
// Early out: no pick buffer yet, or no regions have been painted (initial load or fresh session).
|
||
// Avoids repeated full-resolution RGBA allocation + boxBlur (for maskFeather) + Skia.Image.MakeImage
|
||
// on every re-render during the hot init path. When initialSession restores paints, paintedRegions
|
||
// will update and legitimately trigger a single build of the (feathered) color map.
|
||
if (!pick || paintedRegions.size === 0) {
|
||
paintColorMapSkImgRef.current = null;
|
||
return null;
|
||
}
|
||
const map = createPaintColorMapForPaint(pick.buffer, pick.cols, pick.rows, paintedRegions);
|
||
paintColorMapSkImgRef.current = map;
|
||
return map;
|
||
}, [paintedRegions, paintResourcesReady, segmentsReady, getMaskRuntimeRevision()]);
|
||
const paintedRegionConfigRef = useRef(new Map());
|
||
const segmentAndPrepareLayers = useCallback(async (originPath, maskPath) => {
|
||
const runId = ++segmentRunIdRef.current;
|
||
// isCancelled: a runId bump alone is not enough to abort if the image pair we were asked to process
|
||
// is still the latest desired pair from the caller (protects against effect cleanups caused by
|
||
// unrelated parent re-renders / state updates that do not change the two images).
|
||
const isCancelled = () => {
|
||
if (runId === segmentRunIdRef.current)
|
||
return false;
|
||
const desiredOrigin = latestOriginPathRef.current || originPath;
|
||
const desiredMask = latestMaskPathRef.current || maskPath;
|
||
const stillWanted = desiredOrigin === originPath && desiredMask === maskPath;
|
||
return !stillWanted;
|
||
};
|
||
const pipeline = getMaskSegmentRuntimeConfig().pipeline;
|
||
watchStartRef.current = performance.now();
|
||
lastWatchStateRef.current = null;
|
||
lastWatchSignatureRef.current = null;
|
||
emitWatch('init');
|
||
timeLog('▶ start segmentation');
|
||
segmentsReadyRef.current = false;
|
||
setSegmentsReady(false);
|
||
setSegError('');
|
||
setActiveBrushIndex(null);
|
||
const clearedPainted = new Map();
|
||
paintedRegionsRef.current = clearedPainted;
|
||
setPaintedRegions(clearedPainted);
|
||
setPaintHistory([]);
|
||
setHeldRegionId(null);
|
||
setHeldRegionAnchor(null);
|
||
setInitFlashRegionId(null);
|
||
initFlashActiveRef.current = false;
|
||
initFlashIndexRef.current = 0;
|
||
initFlashListRef.current = [];
|
||
if (initFlashTimerRef.current) {
|
||
clearTimeout(initFlashTimerRef.current);
|
||
initFlashTimerRef.current = null;
|
||
}
|
||
hasAppliedInitialSessionRef.current = false;
|
||
lastExportCacheRef.current = null;
|
||
if (autoExportDebounceRef.current) {
|
||
clearTimeout(autoExportDebounceRef.current);
|
||
autoExportDebounceRef.current = null;
|
||
}
|
||
exportInFlightRef.current = false;
|
||
regionsRef.current = [];
|
||
maskPickRef.current = null;
|
||
regionPickRef.current = null;
|
||
regionMaskDataRef.current = null;
|
||
workBufferRef.current = null;
|
||
paintLayersPromiseRef.current = null;
|
||
setRegionOutlinePaths(new Map());
|
||
setMaskPathsReady(false);
|
||
setPaintResourcesReady(false);
|
||
setLayersLoading(false);
|
||
baseboardPickMaskRef.current = null;
|
||
kickRegionIdRef.current = null;
|
||
maskPathsContainRectRef.current = null;
|
||
setRegionPalette([]);
|
||
setRegionCount(0);
|
||
// Reset high-res snapshot state so a fresh segmentation starts clean (no stale size/ref).
|
||
setExportCanvasSize(null);
|
||
setHighResSnapshotEnabled(false);
|
||
const prevLayers = paintResourceLayersRef.current;
|
||
if (prevLayers) {
|
||
releasePaintResourceLayers(prevLayers);
|
||
paintResourceLayersRef.current = null;
|
||
setPaintResourceLayers(null);
|
||
}
|
||
releaseOriginSkImage(originSkImgRef.current);
|
||
originSkImgRef.current = null;
|
||
setOriginSkImg(null);
|
||
try {
|
||
timeLog('▶ reading origin PNG');
|
||
const originPromise = readPngBgrBuffer(originPath);
|
||
timeLog('▶ reading mask PNG');
|
||
const maskPromise = readPngBgrBuffer(maskPath);
|
||
const originDecoded = await originPromise;
|
||
const afterOriginCancelled = isCancelled();
|
||
if (afterOriginCancelled) {
|
||
return;
|
||
}
|
||
const imgW = originDecoded.cols;
|
||
const imgH = originDecoded.rows;
|
||
setImageSize({ w: imgW, h: imgH });
|
||
let scale = 1;
|
||
if (Math.max(imgW, imgH) > pipeline.maxImageLongSide) {
|
||
scale = pipeline.maxImageLongSide / Math.max(imgW, imgH);
|
||
}
|
||
const segW = Math.floor(imgW * scale);
|
||
const segH = Math.floor(imgH * scale);
|
||
const minArea = pipeline.minContourArea * scale * scale;
|
||
const workScaledTask = prepareWorkScaledBgrBuffer(originDecoded.buffer, imgW, imgH, scale).then(workScaled => {
|
||
if (isCancelled()) {
|
||
return workScaled;
|
||
}
|
||
workBufferRef.current = workScaled;
|
||
setExportCanvasSize({ w: workScaled.cols, h: workScaled.rows });
|
||
// Enable the offscreen high-res export canvas as soon as we know the work resolution.
|
||
// This gives the hidden <Canvas> time to mount and commit before autoExport/save()
|
||
// tries to snapshot it. The inner renderFullResPainted() will draw cheap origin until
|
||
// paints + shader textures are ready. This greatly increases the chance that the
|
||
// preferred makeImageSnapshot path succeeds for rich exports (instead of falling
|
||
// through to the drawAsImage reconstruction).
|
||
setHighResSnapshotEnabled(true);
|
||
void loadPaintLayersRef.current();
|
||
return workScaled;
|
||
});
|
||
const segmentTask = maskPromise.then(async (maskDecoded) => {
|
||
if (isCancelled()) {
|
||
throw new Error('cancelled');
|
||
}
|
||
timeLog('▶ PNG read completed');
|
||
emitWatch('images_loaded');
|
||
timeLog(`▶ image size: ${imgW}x${imgH}`);
|
||
const { buffer: maskBuffer, cols: maskW, rows: maskH } = maskDecoded;
|
||
const segMaskBuffer = resizeBgrBuffer(maskBuffer, maskW, maskH, segW, segH);
|
||
timeLog(`▶ mask scale: ${scale.toFixed(3)}`);
|
||
emitWatch('mask_aligned');
|
||
return extractRegionsFromMaskBufferSync(segMaskBuffer, segW, segH, {
|
||
minArea,
|
||
approxEpsilon: pipeline.contourApproxEpsilon,
|
||
});
|
||
});
|
||
void maskPromise.then(async (maskDecoded) => {
|
||
const { buffer: maskBuffer, cols: maskW, rows: maskH } = maskDecoded;
|
||
let pickBuffer;
|
||
if (maskW !== imgW || maskH !== imgH) {
|
||
pickBuffer = await cv.resizeBgrBuffer(maskBuffer, maskW, maskH, imgW, imgH);
|
||
}
|
||
else {
|
||
pickBuffer = new Uint8Array(maskBuffer);
|
||
}
|
||
if (runId !== segmentRunIdRef.current) {
|
||
return;
|
||
}
|
||
maskPickRef.current = {
|
||
buffer: pickBuffer,
|
||
cols: imgW,
|
||
rows: imgH,
|
||
};
|
||
});
|
||
const [segmentResult] = await Promise.all([
|
||
segmentTask,
|
||
workScaledTask,
|
||
]);
|
||
if (isCancelled()) {
|
||
return;
|
||
}
|
||
const paintPromise = paintLayersPromiseRef.current ?? Promise.resolve();
|
||
emitWatch('mask_sampled', { regionCount: segmentResult.regions.length });
|
||
timeLog(`▶ segmentation completed, valid regions: ${segmentResult.regions.length}`);
|
||
const validRegions = segmentResult.regions;
|
||
if (__DEV__ && validRegions.length === 0) {
|
||
console.warn('[MaskSegment] not recognized any valid regions, please check if the mask is a pure color region image');
|
||
}
|
||
let finalRegions = validRegions;
|
||
if (finalRegions.length > pipeline.maxRegions) {
|
||
finalRegions = finalRegions.slice(0, pipeline.maxRegions);
|
||
}
|
||
regionsRef.current = finalRegions;
|
||
regionPickRef.current = segmentResult.pickMap;
|
||
regionMaskDataRef.current = {
|
||
labels: segmentResult.labels,
|
||
baseboardBinary: segmentResult.baseboardBinary,
|
||
cols: segmentResult.segCols,
|
||
rows: segmentResult.segRows,
|
||
};
|
||
baseboardPickMaskRef.current = null;
|
||
kickRegionIdRef.current =
|
||
finalRegions.find(reg => reg.thinStrip)?.id ?? null;
|
||
const pathMapRect = getContainRect(canvasWRef.current, canvasHRef.current, imgW, imgH);
|
||
maskPathsContainRectRef.current = pathMapRect;
|
||
setRegionOutlinePaths(new Map());
|
||
setMaskPathsReady(false);
|
||
setRegionPalette(finalRegions);
|
||
setRegionCount(finalRegions.length);
|
||
lastSegmentKeyRef.current = `${originPath}|${maskPath}`;
|
||
segmentsReadyRef.current = true;
|
||
setSegmentsReady(true);
|
||
emitWatch('regions_ready', { regionCount: finalRegions.length });
|
||
emitInteractiveIfReady();
|
||
void (async () => {
|
||
if (runId !== segmentRunIdRef.current) {
|
||
return;
|
||
}
|
||
const pathMaskData = downsampleMaskDataForPaths(regionMaskDataRef.current, pipeline.maskPathMaxLongSide);
|
||
const outlines = buildAllRegionOutlinePaths(finalRegions, pathMaskData, pathMapRect);
|
||
if (runId !== segmentRunIdRef.current) {
|
||
return;
|
||
}
|
||
setRegionOutlinePaths(outlines);
|
||
setMaskPathsReady(true);
|
||
maskPathsReadyRef.current = true;
|
||
emitMaskPathsReadyIfReady();
|
||
})();
|
||
void (async () => {
|
||
if (runId !== segmentRunIdRef.current) {
|
||
return;
|
||
}
|
||
await paintPromise;
|
||
if (runId !== segmentRunIdRef.current) {
|
||
return;
|
||
}
|
||
baseboardPickMaskRef.current = upscaleBinaryMask(segmentResult.baseboardBinary, segW, segH, imgW, imgH);
|
||
})();
|
||
}
|
||
catch (e) {
|
||
const msg = e instanceof Error ? e.message : String(e);
|
||
if (!isCancelled()) {
|
||
console.error('[SDK-SEGMENT] segmentation failed', e);
|
||
setSegError(msg);
|
||
reportError(msg, e);
|
||
}
|
||
}
|
||
}, [emitWatch, emitInteractiveIfReady, emitMaskPathsReadyIfReady, reportError]);
|
||
const loadPaintLayersIfNeeded = useCallback(() => {
|
||
if (paintResourcesReady) {
|
||
return Promise.resolve();
|
||
}
|
||
if (paintLayersPromiseRef.current) {
|
||
return paintLayersPromiseRef.current;
|
||
}
|
||
const work = workBufferRef.current;
|
||
if (!work) {
|
||
return Promise.resolve();
|
||
}
|
||
const runId = segmentRunIdRef.current;
|
||
let promise;
|
||
promise = (async () => {
|
||
setLayersLoading(true);
|
||
timeLog('▶ start loading paint shader textures');
|
||
try {
|
||
const result = await preparePaintResourcesFromWorkBuffer(work.buffer, work.cols, work.rows, layers => {
|
||
if (runId !== segmentRunIdRef.current) {
|
||
releaseFreqLayerImages(layers);
|
||
return;
|
||
}
|
||
setPaintResourceLayers(layers);
|
||
paintResourceLayersRef.current = layers;
|
||
setPaintResourcesReady(true);
|
||
timeLog('▶ paint shader textures ready');
|
||
emitInteractiveIfReady();
|
||
});
|
||
if (runId !== segmentRunIdRef.current) {
|
||
if (result) {
|
||
result.originImage.dispose();
|
||
releasePaintResourceLayers(result.layers);
|
||
}
|
||
return;
|
||
}
|
||
if (!result) {
|
||
return;
|
||
}
|
||
releaseOriginSkImage(originSkImgRef.current);
|
||
originSkImgRef.current = result.originImage;
|
||
setOriginSkImg(result.originImage);
|
||
timeLog('▶ origin Skia work resolution');
|
||
if (!paintResourceLayersRef.current) {
|
||
setPaintResourceLayers(result.layers);
|
||
paintResourceLayersRef.current = result.layers;
|
||
setPaintResourcesReady(true);
|
||
}
|
||
emitInteractiveIfReady();
|
||
}
|
||
catch (error) {
|
||
if (__DEV__) {
|
||
console.warn('[MaskSegment] failed to prepare paint shader textures', error);
|
||
}
|
||
}
|
||
finally {
|
||
setLayersLoading(false);
|
||
if (paintLayersPromiseRef.current === promise) {
|
||
paintLayersPromiseRef.current = null;
|
||
}
|
||
}
|
||
})();
|
||
paintLayersPromiseRef.current = promise;
|
||
return promise;
|
||
}, [emitInteractiveIfReady, paintResourcesReady]);
|
||
loadPaintLayersRef.current = loadPaintLayersIfNeeded;
|
||
const pickOriginImage = async () => {
|
||
const res = await launchImageLibrary({ mediaType: 'photo' });
|
||
const uri = res.assets?.[0]?.uri;
|
||
if (!uri) {
|
||
return;
|
||
}
|
||
const pngPath = await cv.ensurePngPath(uri, `picked_origin_${Date.now()}.png`);
|
||
setOriginImgPath(pngPath);
|
||
};
|
||
const pickMaskImage = async () => {
|
||
const res = await launchImageLibrary({ mediaType: 'photo' });
|
||
const uri = res.assets?.[0]?.uri;
|
||
if (!uri) {
|
||
return;
|
||
}
|
||
const pngPath = await cv.ensurePngPath(uri, `picked_mask_${Date.now()}.png`);
|
||
setMaskImgPath(pngPath);
|
||
};
|
||
const clearCacheAndResegment = useCallback(async () => {
|
||
if (isRefreshing || !originImgPath || !maskImgPath) {
|
||
return;
|
||
}
|
||
setIsRefreshing(true);
|
||
try {
|
||
resetZoom();
|
||
const layers = paintResourceLayersRef.current;
|
||
if (layers) {
|
||
releasePaintResourceLayers(layers);
|
||
paintResourceLayersRef.current = null;
|
||
setPaintResourceLayers(null);
|
||
}
|
||
await clearDerivedImageCache();
|
||
lastSegmentKeyRef.current = '';
|
||
await segmentAndPrepareLayers(originImgPath, maskImgPath);
|
||
}
|
||
catch (e) {
|
||
const msg = e instanceof Error ? e.message : String(e);
|
||
setSegError(msg);
|
||
reportError(msg, e);
|
||
}
|
||
finally {
|
||
setIsRefreshing(false);
|
||
}
|
||
}, [
|
||
isRefreshing,
|
||
originImgPath,
|
||
maskImgPath,
|
||
segmentAndPrepareLayers,
|
||
reportError,
|
||
resetZoom,
|
||
]);
|
||
useEffect(() => {
|
||
if (!originImgPath || !maskImgPath) {
|
||
return;
|
||
}
|
||
const segmentKey = `${originImgPath}|${maskImgPath}`;
|
||
if (lastSegmentKeyRef.current === segmentKey ||
|
||
segmentInFlightKeyRef.current === segmentKey) {
|
||
return;
|
||
}
|
||
segmentInFlightKeyRef.current = segmentKey;
|
||
void segmentAndPrepareLayers(originImgPath, maskImgPath).finally(() => {
|
||
if (segmentInFlightKeyRef.current === segmentKey) {
|
||
segmentInFlightKeyRef.current = '';
|
||
}
|
||
});
|
||
return () => {
|
||
segmentRunIdRef.current += 1;
|
||
if (segmentInFlightKeyRef.current === segmentKey) {
|
||
segmentInFlightKeyRef.current = '';
|
||
}
|
||
const layers = paintResourceLayersRef.current;
|
||
if (layers) {
|
||
releasePaintResourceLayers(layers);
|
||
paintResourceLayersRef.current = null;
|
||
}
|
||
paintColorMapSkImgRef.current?.dispose();
|
||
paintColorMapSkImgRef.current = null;
|
||
regionsRef.current = [];
|
||
// Also reset any pending init flash state (the full reset will also run at start of
|
||
// the next segmentAndPrepareLayers, but this keeps things clean if the effect
|
||
// re-triggers segmentation while a flash sequence was in flight).
|
||
initFlashListRef.current = [];
|
||
initFlashActiveRef.current = false;
|
||
initFlashIndexRef.current = 0;
|
||
if (initFlashTimerRef.current) {
|
||
clearTimeout(initFlashTimerRef.current);
|
||
initFlashTimerRef.current = null;
|
||
}
|
||
setInitFlashRegionId(null);
|
||
};
|
||
}, [originImgPath, maskImgPath]);
|
||
const buildPaintedRecords = useCallback(() => {
|
||
const records = [];
|
||
// Prefer the live ref so getPaintedRegions() / session() used by host for
|
||
// colorParams at save time sees the exact same data as the save() composite.
|
||
const src = paintedRegionsRef.current && paintedRegionsRef.current.size > 0
|
||
? paintedRegionsRef.current
|
||
: paintedRegions;
|
||
for (const [regionId, color] of src) {
|
||
const region = regionsRef.current.find(reg => reg.id === regionId);
|
||
records.push({
|
||
regionId,
|
||
regionName: region?.name ?? String(regionId),
|
||
color,
|
||
configJson: paintedRegionConfigRef.current.get(regionId),
|
||
});
|
||
}
|
||
return records;
|
||
}, [paintedRegions]);
|
||
const restoreSession = useCallback((session) => {
|
||
const nextPainted = new Map();
|
||
paintedRegionConfigRef.current = new Map();
|
||
const currentRegions = regionsRef.current || [];
|
||
const nameToRealId = new Map();
|
||
for (const r of currentRegions) {
|
||
if (r && r.name) {
|
||
const key = String(r.name).trim().toLowerCase();
|
||
if (key && !nameToRealId.has(key)) {
|
||
nameToRealId.set(key, r.id);
|
||
}
|
||
}
|
||
}
|
||
// Build oldId -> regionName from the incoming seed (for paintHistory remapping).
|
||
const oldIdToName = new Map();
|
||
for (const item of session.painted || []) {
|
||
if (item && typeof item.regionId === 'number' && item.regionName) {
|
||
oldIdToName.set(item.regionId, String(item.regionName));
|
||
}
|
||
}
|
||
// Resolve directly by name. Name is unique within a segmentation so there is no
|
||
// need for id-based heuristics — the region name is the authoritative identity.
|
||
for (const item of session.painted || []) {
|
||
if (!item)
|
||
continue;
|
||
let targetId = item.regionId;
|
||
if (item.regionName) {
|
||
const key = String(item.regionName).trim().toLowerCase();
|
||
const realId = nameToRealId.get(key);
|
||
if (typeof realId === 'number') {
|
||
targetId = realId;
|
||
}
|
||
}
|
||
nextPainted.set(targetId, item.color);
|
||
if (item.configJson) {
|
||
paintedRegionConfigRef.current.set(targetId, item.configJson);
|
||
}
|
||
}
|
||
// Remap paintHistory via names.
|
||
const resolvedHistory = [];
|
||
for (const oldId of session.paintHistory || []) {
|
||
if (typeof oldId !== 'number')
|
||
continue;
|
||
const nm = oldIdToName.get(oldId);
|
||
if (nm) {
|
||
const real = nameToRealId.get(String(nm).trim().toLowerCase());
|
||
if (typeof real === 'number') {
|
||
resolvedHistory.push(real);
|
||
continue;
|
||
}
|
||
}
|
||
// Fallback: keep oldId if it happens to be valid in current segmentation.
|
||
if (currentRegions.some((r) => r && r.id === oldId)) {
|
||
resolvedHistory.push(oldId);
|
||
}
|
||
}
|
||
paintedRegionsRef.current = nextPainted;
|
||
setPaintedRegions(nextPainted);
|
||
setPaintHistory(resolvedHistory.length ? resolvedHistory : [...(session.paintHistory || [])]);
|
||
if (session.currentColor) {
|
||
setCustomPaintColor(session.currentColor);
|
||
customPaintConfigJsonRef.current = session.currentColorConfigJson;
|
||
setActiveBrushIndex(null);
|
||
}
|
||
}, []);
|
||
useEffect(() => {
|
||
if (!initialSession || !segmentsReady) {
|
||
return;
|
||
}
|
||
if (hasAppliedInitialSessionRef.current) {
|
||
// Already seeded once for this canvas instance / segmentation. Do not re-apply on
|
||
// subsequent initialSession prop changes (host may pass new object refs when its
|
||
// vizSlots or selected brush changes). Re-applying would reset paintedRegions to
|
||
// whatever the (often partial) seed snapshot contains.
|
||
return;
|
||
}
|
||
hasAppliedInitialSessionRef.current = true;
|
||
restoreSession(initialSession);
|
||
}, [initialSession, segmentsReady, restoreSession]);
|
||
useEffect(() => {
|
||
return () => {
|
||
if (initFlashTimerRef.current) {
|
||
clearTimeout(initFlashTimerRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
const stopInitRegionFlash = useCallback(() => {
|
||
initFlashActiveRef.current = false;
|
||
if (initFlashTimerRef.current) {
|
||
clearTimeout(initFlashTimerRef.current);
|
||
initFlashTimerRef.current = null;
|
||
}
|
||
setInitFlashRegionId(null);
|
||
}, []);
|
||
const startInitRegionFlashLoop = useCallback(() => {
|
||
const ir = getMaskSegmentRuntimeConfig().interaction;
|
||
if (!ir.enableInitRegionFlash) {
|
||
return;
|
||
}
|
||
if (initFlashActiveRef.current) {
|
||
return;
|
||
}
|
||
const allRegions = regionsRef.current;
|
||
if (allRegions.length === 0) {
|
||
return;
|
||
}
|
||
// Filter out painted regions and tiny regions (noise / thin strips
|
||
// that produce negligible overlays). Threshold: 0.2% of total image area.
|
||
const imgSize = imageSizeRef2.current;
|
||
const minFlashArea = imgSize
|
||
? Math.max(500, imgSize.w * imgSize.h * 0.002)
|
||
: 500;
|
||
initFlashListRef.current = allRegions.filter((r) => !paintedRegionsRef.current.has(r.id) && r.area >= minFlashArea);
|
||
initFlashActiveRef.current = true;
|
||
initFlashIndexRef.current = 0;
|
||
const showNext = () => {
|
||
if (!initFlashActiveRef.current || initFlashListRef.current.length === 0) {
|
||
return;
|
||
}
|
||
const list = initFlashListRef.current;
|
||
const idx = initFlashIndexRef.current;
|
||
if (idx >= list.length) {
|
||
// One full pass of dashed outline flashes (one per *unpainted* region) is enough.
|
||
// Stop automatically; onUserInteraction can stop early.
|
||
stopInitRegionFlash();
|
||
return;
|
||
}
|
||
setInitFlashRegionId(list[idx].id);
|
||
initFlashIndexRef.current += 1;
|
||
initFlashTimerRef.current = setTimeout(showNext, ir.initRegionFlashMs);
|
||
};
|
||
showNext();
|
||
}, []);
|
||
const onUserInteraction = useCallback(() => {
|
||
stopInitRegionFlash();
|
||
}, [stopInitRegionFlash]);
|
||
// Once any region has been painted, stop the entire discovery flash immediately.
|
||
// No individual pruning — it's all or nothing: either 0 painted → cycle through
|
||
// all regions, or ≥1 painted → stop flashing entirely.
|
||
useEffect(() => {
|
||
if (!initFlashActiveRef.current)
|
||
return;
|
||
if (paintedRegionsRef.current.size > 0) {
|
||
stopInitRegionFlash();
|
||
}
|
||
}, [paintedRegions, stopInitRegionFlash]);
|
||
useEffect(() => {
|
||
if (segmentsReady && maskPathsReady && containRect && regionCount > 0 && canvasInteractive) {
|
||
if (!initFlashActiveRef.current) {
|
||
startInitRegionFlashLoop();
|
||
}
|
||
return;
|
||
}
|
||
if (!segmentsReady) {
|
||
stopInitRegionFlash();
|
||
setCanvasInteractive(false);
|
||
}
|
||
}, [
|
||
segmentsReady,
|
||
maskPathsReady,
|
||
containRect,
|
||
regionCount,
|
||
canvasInteractive,
|
||
startInitRegionFlashLoop,
|
||
stopInitRegionFlash,
|
||
]);
|
||
const getActiveBrushColor = useCallback(() => {
|
||
if (customPaintColor) {
|
||
return customPaintColor;
|
||
}
|
||
if (activeBrushIndex == null) {
|
||
return null;
|
||
}
|
||
return paintPalette[activeBrushIndex] ?? null;
|
||
}, [customPaintColor, activeBrushIndex, paintPalette]);
|
||
const hasActiveBrush = customPaintColor != null || activeBrushIndex != null;
|
||
const applyPaintToRegion = useCallback((targetRegionId, color) => {
|
||
let applied = false;
|
||
setPaintedRegions(prev => {
|
||
const existing = prev.get(targetRegionId);
|
||
if (existing && bgrColorEquals(existing, color)) {
|
||
return prev;
|
||
}
|
||
applied = true;
|
||
setPaintHistory(history => {
|
||
const last = history[history.length - 1];
|
||
if (last === targetRegionId) {
|
||
return history;
|
||
}
|
||
return [...history.filter(id => id !== targetRegionId), targetRegionId];
|
||
});
|
||
const next = new Map(prev);
|
||
next.set(targetRegionId, color);
|
||
paintedRegionsRef.current = next;
|
||
return next;
|
||
});
|
||
if (applied) {
|
||
const configJson = customPaintConfigJsonRef.current ??
|
||
paintedRegionConfigRef.current.get(targetRegionId);
|
||
if (customPaintConfigJsonRef.current) {
|
||
paintedRegionConfigRef.current.set(targetRegionId, customPaintConfigJsonRef.current);
|
||
}
|
||
const region = regionsRef.current.find(reg => reg.id === targetRegionId);
|
||
onPaintCallbackRef.current?.({
|
||
kind: 'painted',
|
||
regionId: targetRegionId,
|
||
regionName: region?.name ?? String(targetRegionId),
|
||
color,
|
||
configJson,
|
||
});
|
||
}
|
||
}, []);
|
||
const findRegionAtPoint = useCallback((x, y, strict = false) => {
|
||
if (!segmentsReady || !imageSize || regionsRef.current.length === 0) {
|
||
return null;
|
||
}
|
||
const norm = canvasToNormalized(x, y, canvasW, canvasH, imageSize.w, imageSize.h);
|
||
if (!norm) {
|
||
return null;
|
||
}
|
||
const regionPick = regionPickRef.current;
|
||
if (regionPick) {
|
||
const pickHit = lookupRegionFromPickMap(norm.x, norm.y, regionPick, strict
|
||
? 0
|
||
: getMaskSegmentRuntimeConfig().interaction.pickMapSearchRadiusPx);
|
||
if (pickHit != null) {
|
||
return pickHit;
|
||
}
|
||
if (strict) {
|
||
return null;
|
||
}
|
||
}
|
||
const pick = maskPickRef.current;
|
||
const kickId = kickRegionIdRef.current;
|
||
if (!strict) {
|
||
const polygonHit = resolveRegionHit(regionsRef.current, norm.x, norm.y);
|
||
if (polygonHit != null) {
|
||
return polygonHit;
|
||
}
|
||
}
|
||
if (pick && kickId != null) {
|
||
const pickMask = baseboardPickMaskRef.current;
|
||
const kickHit = pickKickRegionFromMask(norm.x, norm.y, pick, kickId, pickMask, strict);
|
||
if (kickHit != null) {
|
||
return kickHit;
|
||
}
|
||
if (!strict) {
|
||
const kickReg = regionsRef.current.find(reg => reg.id === kickId);
|
||
if (kickReg && pickKickNearStrip(norm.x, norm.y, kickReg)) {
|
||
return kickId;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}, [segmentsReady, imageSize, canvasW, canvasH]);
|
||
const selectBrushColor = useCallback((brushIndex) => {
|
||
onUserInteraction();
|
||
setCustomPaintColor(null);
|
||
customPaintConfigJsonRef.current = undefined;
|
||
setActiveBrushIndex(brushIndex);
|
||
void loadPaintLayersIfNeeded();
|
||
}, [onUserInteraction, loadPaintLayersIfNeeded]);
|
||
const onCanvasTap = useCallback((x, y) => {
|
||
onUserInteraction();
|
||
if (!segmentsReady ||
|
||
!imageSize ||
|
||
regionsRef.current.length === 0 ||
|
||
!hasActiveBrush ||
|
||
!paintResourcesReady ||
|
||
disabled) {
|
||
return;
|
||
}
|
||
const regionId = findRegionAtPoint(x, y);
|
||
if (regionId == null) {
|
||
return;
|
||
}
|
||
const brushColor = getActiveBrushColor();
|
||
if (!brushColor) {
|
||
return;
|
||
}
|
||
applyPaintToRegion(regionId, brushColor);
|
||
if (!paintResourcesReady && !paintLayersPromiseRef.current) {
|
||
void loadPaintLayersIfNeeded();
|
||
}
|
||
}, [
|
||
segmentsReady,
|
||
imageSize,
|
||
hasActiveBrush,
|
||
paintResourcesReady,
|
||
disabled,
|
||
findRegionAtPoint,
|
||
getActiveBrushColor,
|
||
applyPaintToRegion,
|
||
onUserInteraction,
|
||
loadPaintLayersIfNeeded,
|
||
]);
|
||
// ── Canvas-size & state refs for gesture callbacks ─────────────────────
|
||
// Declared after their targets so useRef receives the current value.
|
||
// canvasWRef / canvasHRef are declared earlier (before segmentAndPrepareLayers)
|
||
// so the async body can read the latest layout size. Their sync useEffect is below.
|
||
const hasActiveBrushRef = useRef(hasActiveBrush);
|
||
const disabledRef = useRef(disabled);
|
||
const segmentsReadyRef2 = useRef(segmentsReady);
|
||
const imageSizeRef2 = useRef(imageSize);
|
||
useEffect(() => { canvasWRef.current = canvasW; }, [canvasW]);
|
||
useEffect(() => { canvasHRef.current = canvasH; }, [canvasH]);
|
||
useEffect(() => { hasActiveBrushRef.current = hasActiveBrush; }, [hasActiveBrush]);
|
||
useEffect(() => { disabledRef.current = disabled; }, [disabled]);
|
||
useEffect(() => { segmentsReadyRef2.current = segmentsReady; }, [segmentsReady]);
|
||
useEffect(() => { imageSizeRef2.current = imageSize; }, [imageSize]);
|
||
// Stable refs for functions called inside gesture closures
|
||
const findRegionAtPointRef = useRef(findRegionAtPoint);
|
||
const onCanvasTapRef = useRef(onCanvasTap);
|
||
useEffect(() => { findRegionAtPointRef.current = findRegionAtPoint; }, [findRegionAtPoint]);
|
||
useEffect(() => { onCanvasTapRef.current = onCanvasTap; }, [onCanvasTap]);
|
||
const undoSelection = useCallback(() => {
|
||
onUserInteraction();
|
||
setPaintHistory(history => {
|
||
if (history.length === 0) {
|
||
return history;
|
||
}
|
||
const lastId = history[history.length - 1];
|
||
setPaintedRegions(prev => {
|
||
const next = new Map(prev);
|
||
next.delete(lastId);
|
||
paintedRegionsRef.current = next; // sync for imperative readers
|
||
return next;
|
||
});
|
||
paintedRegionConfigRef.current.delete(lastId);
|
||
return history.slice(0, -1);
|
||
});
|
||
}, [onUserInteraction]);
|
||
const clearAllPaint = useCallback(() => {
|
||
onUserInteraction();
|
||
const cleared = new Map();
|
||
paintedRegionsRef.current = cleared;
|
||
setPaintedRegions(cleared);
|
||
setPaintHistory([]);
|
||
paintedRegionConfigRef.current = new Map();
|
||
lastExportCacheRef.current = null;
|
||
resetZoom();
|
||
}, [onUserInteraction, resetZoom]);
|
||
const captureHighResExportPngBase64 = useCallback(async () => {
|
||
try {
|
||
const c = highResExportCanvasRef.current;
|
||
const sz = exportCanvasSize;
|
||
if (!c || !sz) {
|
||
return undefined;
|
||
}
|
||
let snap = c.makeImageSnapshot?.();
|
||
if (!snap) {
|
||
await new Promise((r) => requestAnimationFrame(() => r()));
|
||
snap = c.makeImageSnapshot?.();
|
||
}
|
||
if (!snap) {
|
||
return undefined;
|
||
}
|
||
const enc = snap.encodeToBase64;
|
||
if (typeof enc !== 'function') {
|
||
return undefined;
|
||
}
|
||
const b64 = enc.call(snap) || '';
|
||
return b64.length > 0 ? b64 : undefined;
|
||
}
|
||
catch (e) {
|
||
console.warn('[VIZ-SAVE] highResExportCanvas makeImageSnapshot failed:', e);
|
||
return undefined;
|
||
}
|
||
}, [exportCanvasSize]);
|
||
const runExportPipeline = useCallback(async (livePainted, destDir) => {
|
||
const work = workBufferRef.current;
|
||
const pick = regionPickRef.current;
|
||
if (!work || !pick) {
|
||
throw new Error('image not ready, cannot save');
|
||
}
|
||
let snapshotPngBase64;
|
||
if (livePainted.size > 0) {
|
||
snapshotPngBase64 = await captureHighResExportPngBase64();
|
||
}
|
||
const layers = paintResourceLayersRef.current;
|
||
const map = paintColorMapSkImgRef.current;
|
||
const originForExport = originSkImgRef.current ?? layers?.lowFreqImage ?? null;
|
||
const shaderTextures = !snapshotPngBase64 && originForExport && layers && map && paintResourcesReady
|
||
? {
|
||
originImage: originForExport,
|
||
paintColorMap: map,
|
||
lowFreqImage: layers.lowFreqImage,
|
||
highFreqImage: layers.highFreqImage,
|
||
}
|
||
: undefined;
|
||
const result = await compositePaintedImage({
|
||
originBuffer: work.buffer,
|
||
cols: work.cols,
|
||
rows: work.rows,
|
||
pickBuffer: pick.buffer,
|
||
paintedRegions: livePainted,
|
||
destDir,
|
||
...(snapshotPngBase64 ? { exportPngBase64: snapshotPngBase64 } : {}),
|
||
shaderTextures,
|
||
renderWidth: work.cols,
|
||
renderHeight: work.rows,
|
||
});
|
||
lastExportCacheRef.current = {
|
||
fingerprint: paintedRegionsFingerprint(livePainted),
|
||
result,
|
||
};
|
||
return result;
|
||
}, [captureHighResExportPngBase64, paintResourcesReady]);
|
||
// Debounced background export — pre-warms the save() cache after each paint change.
|
||
useEffect(() => {
|
||
if (!autoExportOnReady) {
|
||
return;
|
||
}
|
||
if (!segmentsReady || !paintResourcesReady) {
|
||
return;
|
||
}
|
||
if (initialSession && !hasAppliedInitialSessionRef.current) {
|
||
return;
|
||
}
|
||
if (paintedRegions.size === 0) {
|
||
return;
|
||
}
|
||
if (autoExportDebounceRef.current) {
|
||
clearTimeout(autoExportDebounceRef.current);
|
||
}
|
||
autoExportDebounceRef.current = setTimeout(() => {
|
||
autoExportDebounceRef.current = null;
|
||
if (exportInFlightRef.current) {
|
||
return;
|
||
}
|
||
const livePainted = paintedRegionsRef.current;
|
||
if (!livePainted || livePainted.size === 0) {
|
||
return;
|
||
}
|
||
exportInFlightRef.current = true;
|
||
void (async () => {
|
||
try {
|
||
const result = await runExportPipeline(livePainted);
|
||
onExportedRef.current?.(result);
|
||
}
|
||
catch (e) {
|
||
console.log('[VIZ-SAVE] debounced autoExport threw (non-fatal):', e);
|
||
}
|
||
finally {
|
||
exportInFlightRef.current = false;
|
||
}
|
||
})();
|
||
}, 400);
|
||
return () => {
|
||
if (autoExportDebounceRef.current) {
|
||
clearTimeout(autoExportDebounceRef.current);
|
||
autoExportDebounceRef.current = null;
|
||
}
|
||
};
|
||
}, [
|
||
autoExportOnReady,
|
||
segmentsReady,
|
||
paintResourcesReady,
|
||
initialSession,
|
||
paintedRegions,
|
||
runExportPipeline,
|
||
]);
|
||
useImperativeHandle(ref, () => ({
|
||
reset: undoSelection,
|
||
swap: (showOrigin) => {
|
||
onUserInteraction();
|
||
if (showOrigin === undefined) {
|
||
setCompareMode(v => !v);
|
||
}
|
||
else {
|
||
setCompareMode(showOrigin);
|
||
}
|
||
},
|
||
save: async (options) => {
|
||
const livePainted = paintedRegionsRef.current && paintedRegionsRef.current.size > 0
|
||
? paintedRegionsRef.current
|
||
: paintedRegions;
|
||
const fp = paintedRegionsFingerprint(livePainted);
|
||
const cached = lastExportCacheRef.current;
|
||
if (cached?.fingerprint === fp && cached.result) {
|
||
return resolveExportResultForDestDir(cached.result, options?.destDir);
|
||
}
|
||
try {
|
||
return await runExportPipeline(livePainted, options?.destDir);
|
||
}
|
||
catch (e) {
|
||
console.error('[VIZ-SAVE] SDK save() composite threw:', e);
|
||
throw e;
|
||
}
|
||
},
|
||
getLastExport: () => lastExportCacheRef.current?.result ?? null,
|
||
session: () => ({
|
||
version: 1,
|
||
originUrl: originUrlRef.current,
|
||
maskUrl: maskUrlRef.current,
|
||
painted: buildPaintedRecords(),
|
||
paintHistory: [...paintHistory],
|
||
currentColor: customPaintColor ?? undefined,
|
||
currentColorConfigJson: customPaintConfigJsonRef.current,
|
||
savedAt: Date.now(),
|
||
}),
|
||
loadSession: restoreSession,
|
||
setPaintColor: (color, configJson) => {
|
||
setCustomPaintColor(color);
|
||
customPaintConfigJsonRef.current = configJson;
|
||
setActiveBrushIndex(null);
|
||
},
|
||
setMaskConfig: config => {
|
||
setMaskSegmentRuntimeConfig({ maskConfig: config });
|
||
runtimeRef.current = getMaskSegmentRuntimeConfig();
|
||
if (originImgPath && maskImgPath) {
|
||
lastSegmentKeyRef.current = '';
|
||
void segmentAndPrepareLayers(originImgPath, maskImgPath);
|
||
}
|
||
},
|
||
clearAllPaint,
|
||
undoSelection,
|
||
resegment: clearCacheAndResegment,
|
||
getRegions: () => [...regionsRef.current],
|
||
getPaintedRegions: () => buildPaintedRecords(),
|
||
}), [
|
||
undoSelection,
|
||
onUserInteraction,
|
||
paintedRegions,
|
||
paintHistory,
|
||
customPaintColor,
|
||
buildPaintedRecords,
|
||
restoreSession,
|
||
clearAllPaint,
|
||
clearCacheAndResegment,
|
||
runExportPipeline,
|
||
]);
|
||
const [regionOutlinePaths, setRegionOutlinePaths] = useState(new Map());
|
||
useEffect(() => {
|
||
if (!segmentsReady || !containRect || regionPalette.length === 0) {
|
||
if (!segmentsReady) {
|
||
setRegionOutlinePaths(new Map());
|
||
setMaskPathsReady(false);
|
||
maskPathsContainRectRef.current = null;
|
||
}
|
||
return;
|
||
}
|
||
const maskData = regionMaskDataRef.current;
|
||
if (!maskData) {
|
||
setRegionOutlinePaths(new Map());
|
||
setMaskPathsReady(false);
|
||
return;
|
||
}
|
||
if (maskPathsContainRectRef.current &&
|
||
rectsEqual(maskPathsContainRectRef.current, containRect)) {
|
||
return;
|
||
}
|
||
const pathStart = __DEV__ ? performance.now() : 0;
|
||
const pathMaskData = downsampleMaskDataForPaths(maskData, getMaskSegmentRuntimeConfig().pipeline.maskPathMaxLongSide);
|
||
const outlines = buildAllRegionOutlinePaths(regionPalette, pathMaskData, containRect);
|
||
maskPathsContainRectRef.current = containRect;
|
||
setRegionOutlinePaths(outlines);
|
||
setMaskPathsReady(true);
|
||
maskPathsReadyRef.current = true;
|
||
emitMaskPathsReadyIfReady();
|
||
}, [segmentsReady, containRect, regionPalette, emitMaskPathsReadyIfReady]);
|
||
const heldOutlinePath = useMemo(() => {
|
||
if (heldRegionId == null ||
|
||
heldRegionAnchor == null ||
|
||
!containRect ||
|
||
regionPalette.length === 0) {
|
||
return null;
|
||
}
|
||
const maskData = regionMaskDataRef.current;
|
||
if (!maskData) {
|
||
return null;
|
||
}
|
||
const pathMaskData = downsampleMaskDataForPaths(maskData, getMaskSegmentRuntimeConfig().pipeline.maskPathMaxLongSide);
|
||
return buildRegionOutlinePathForRegion(heldRegionId, regionPalette, pathMaskData, containRect, heldRegionAnchor);
|
||
}, [heldRegionId, heldRegionAnchor, containRect, regionPalette]);
|
||
const renderImageLayer = (image, opacity = 1) => {
|
||
if (!image || !containRect)
|
||
return null;
|
||
return (_jsx(SkiaImage, { image: image, x: containRect.x, y: containRect.y, width: containRect.w, height: containRect.h, opacity: opacity }));
|
||
};
|
||
const renderRegionMaskOverlay = (regionId, keyPrefix) => {
|
||
const path = regionOutlinePaths.get(regionId);
|
||
if (!path || !containRect)
|
||
return null;
|
||
return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: paintRuntime.regionOverlayFill, style: "fill", opacity: 0.05 }, `${keyPrefix}-fill-${regionId}`), _jsx(Path, { path: path, color: paintRuntime.regionOverlayFill, style: "stroke", strokeWidth: 3, strokeJoin: "round", antiAlias: true, children: _jsx(DashPathEffect, { intervals: [8, 6] }) }, `${keyPrefix}-stroke-${regionId}`)] }));
|
||
};
|
||
// ── Zoom transform for the Skia Group ─────────────────────────────────
|
||
// Note: single-finger pan/drag is disabled. Zoom is always centered around the
|
||
// viewport center (no additional panOffset translation). The panOffset state
|
||
// is kept (and forced to 0 during pinch) for compatibility with screenToCanvasCoords
|
||
// inverse mapping used by tap/paint logic, and for resetZoom.
|
||
const zoomTransform = useMemo(() => {
|
||
if (zoomScale <= 1)
|
||
return undefined;
|
||
return [
|
||
{ translateX: 0, translateY: 0 },
|
||
{ translateX: canvasW / 2, translateY: canvasH / 2 },
|
||
{ scale: zoomScale },
|
||
{ translateX: -canvasW / 2, translateY: -canvasH / 2 },
|
||
];
|
||
}, [zoomScale, canvasW, canvasH]);
|
||
const renderDraw = () => {
|
||
const displayImg = originSkImg ?? lowFreqSkImg;
|
||
if (!displayImg || !containRect) {
|
||
return null;
|
||
}
|
||
const showOverlay = !compareMode && segmentsReady;
|
||
const shaderReady = paintColorMapSkImg &&
|
||
lowFreqSkImg &&
|
||
highFreqSkImg &&
|
||
paintResourcesReady;
|
||
const useShader = !compareMode && paintedRegions.size > 0 && shaderReady;
|
||
const shaderOrigin = originSkImg ?? lowFreqSkImg;
|
||
// Background color for areas of the viewport that become visible around the
|
||
// zoomed (centered) photo content. Using a light gray that matches common
|
||
// preview container backgrounds prevents "mosaic-like colored blocks"
|
||
// (shader leakage or edge sampling artifacts) from appearing outside the
|
||
// photo rect when the content is scaled up.
|
||
const previewBg = '#F0F1F3';
|
||
return (_jsxs(_Fragment, { children: [_jsx(Rect, { x: 0, y: 0, width: canvasW, height: canvasH, color: previewBg }), _jsx(Group, { clip: Skia.XYWHRect(0, 0, canvasW, canvasH), children: _jsxs(Group, { transform: zoomTransform, children: [useShader && shaderOrigin ? (_jsx(PaintShaderLayer, { originImage: shaderOrigin, paintColorMap: paintColorMapSkImg, lowFreqImage: lowFreqSkImg, highFreqImage: highFreqSkImg, x: containRect.x, y: containRect.y, width: containRect.w, height: containRect.h, showOrigin: false })) : (renderImageLayer(displayImg)), showOverlay &&
|
||
initFlashRegionId != null &&
|
||
renderRegionMaskOverlay(initFlashRegionId, 'init-overlay'), showOverlay &&
|
||
heldRegionId != null &&
|
||
!paintedRegions.has(heldRegionId) &&
|
||
renderRegionMaskOverlay(heldRegionId, 'hold-overlay')] }) })] }));
|
||
};
|
||
// Full-bleed (0,0 to work size) composition for the high-res export snapshot canvas.
|
||
// No UI overlays (dashes, held, flash). When painted + shader ready we use the exact
|
||
// same PaintShaderLayer the user sees in the editor, so makeImageSnapshot() gives
|
||
const renderFullResPainted = () => {
|
||
const sz = exportCanvasSize;
|
||
if (!sz)
|
||
return null;
|
||
const ew = sz.w;
|
||
const eh = sz.h;
|
||
const shaderReady = paintColorMapSkImg &&
|
||
lowFreqSkImg &&
|
||
highFreqSkImg &&
|
||
paintResourcesReady;
|
||
const useShader = paintedRegions.size > 0 && shaderReady;
|
||
const shaderOrigin = originSkImg ?? lowFreqSkImg;
|
||
if (useShader && shaderOrigin) {
|
||
return (_jsx(PaintShaderLayer, { originImage: shaderOrigin, paintColorMap: paintColorMapSkImg, lowFreqImage: lowFreqSkImg, highFreqImage: highFreqSkImg, x: 0, y: 0, width: ew, height: eh, showOrigin: false }));
|
||
}
|
||
// No paints yet or shader not ready — export the (scaled) origin as-is.
|
||
const displayImg = originSkImg ?? lowFreqSkImg;
|
||
if (displayImg) {
|
||
return (_jsx(SkiaImage, { image: displayImg, x: 0, y: 0, width: ew, height: eh }));
|
||
}
|
||
return null;
|
||
};
|
||
// ── Gesture: tap (single-finger paint / highlight / brush_required) ────
|
||
const tapGesture = useMemo(() => {
|
||
const onBeginJS = (x, y) => {
|
||
// Immediate hold highlight — fires on touch-down regardless of brush state.
|
||
// When a brush is active, this lets the user preview which region they're
|
||
// about to paint before lifting their finger.
|
||
onUserInteraction();
|
||
const coords = screenToCanvasCoords(x, y, canvasWRef.current, canvasHRef.current, zoomScaleRef.current, panOffsetRef.current);
|
||
const regionId = findRegionAtPointRef.current(coords.x, coords.y, true);
|
||
if (regionId == null || !imageSizeRef2.current) {
|
||
setHeldRegionId(null);
|
||
setHeldRegionAnchor(null);
|
||
return;
|
||
}
|
||
if (paintedRegionsRef.current && paintedRegionsRef.current.has(regionId)) {
|
||
setHeldRegionId(null);
|
||
setHeldRegionAnchor(null);
|
||
return;
|
||
}
|
||
const norm = canvasToNormalized(coords.x, coords.y, canvasWRef.current, canvasHRef.current, imageSizeRef2.current.w, imageSizeRef2.current.h);
|
||
setHeldRegionId(regionId);
|
||
setHeldRegionAnchor(norm);
|
||
};
|
||
const onEndJS = (x, y, success) => {
|
||
if (!success)
|
||
return;
|
||
const coords = screenToCanvasCoords(x, y, canvasWRef.current, canvasHRef.current, zoomScaleRef.current, panOffsetRef.current);
|
||
if (hasActiveBrushRef.current) {
|
||
onCanvasTapRef.current(coords.x, coords.y);
|
||
}
|
||
else {
|
||
// Brush_required
|
||
onUserInteraction();
|
||
if (disabledRef.current || !segmentsReadyRef2.current || !imageSizeRef2.current)
|
||
return;
|
||
const regionId = findRegionAtPointRef.current(coords.x, coords.y);
|
||
if (regionId == null)
|
||
return;
|
||
const region = regionsRef.current.find(r => r.id === regionId);
|
||
onPaintCallbackRef.current?.({
|
||
kind: 'brush_required',
|
||
hint: '请先选择笔刷颜色',
|
||
regionId,
|
||
regionName: region?.name ?? String(regionId),
|
||
});
|
||
}
|
||
};
|
||
const onFinalizeJS = (x, y) => {
|
||
// Cleanup hold highlight (replaces onCanvasPressOut)
|
||
if (hasActiveBrushRef.current) {
|
||
setHeldRegionId(null);
|
||
setHeldRegionAnchor(null);
|
||
return;
|
||
}
|
||
const coords = screenToCanvasCoords(x, y, canvasWRef.current, canvasHRef.current, zoomScaleRef.current, panOffsetRef.current);
|
||
onCanvasTapRef.current(coords.x, coords.y);
|
||
setHeldRegionId(null);
|
||
setHeldRegionAnchor(null);
|
||
};
|
||
return Gesture.Tap()
|
||
.onBegin((e) => {
|
||
'worklet';
|
||
runOnJS(onBeginJS)(e.x, e.y);
|
||
})
|
||
.onEnd((e, success) => {
|
||
'worklet';
|
||
runOnJS(onEndJS)(e.x, e.y, success);
|
||
})
|
||
.onFinalize((e) => {
|
||
'worklet';
|
||
runOnJS(onFinalizeJS)(e.x, e.y);
|
||
});
|
||
}, [onUserInteraction]);
|
||
// ── Gesture: pinch-zoom (two-finger scale; max 5×) ─────────────────────
|
||
const pinchGesture = useMemo(() => {
|
||
const onStartJS = () => {
|
||
zoomBaseRef.current = zoomScaleRef.current;
|
||
};
|
||
const onUpdateJS = (scale) => {
|
||
const newScale = Math.max(1, Math.min(zoomBaseRef.current * scale, 5));
|
||
setZoomScale(newScale);
|
||
zoomScaleRef.current = newScale;
|
||
// Lock pan offset to zero: only two-finger pinch zoom is supported.
|
||
// Single-finger drag/pan after zoom is intentionally disabled per product decision.
|
||
// Zoom is always centered; no additional translate from panOffset is applied in practice.
|
||
setPanOffset({ x: 0, y: 0 });
|
||
panOffsetRef.current = { x: 0, y: 0 };
|
||
};
|
||
const onEndJS = () => {
|
||
if (zoomScaleRef.current <= 1.01) {
|
||
resetZoom();
|
||
}
|
||
};
|
||
return Gesture.Pinch()
|
||
.onStart(() => {
|
||
'worklet';
|
||
runOnJS(onStartJS)();
|
||
})
|
||
.onUpdate((e) => {
|
||
'worklet';
|
||
runOnJS(onUpdateJS)(e.scale);
|
||
})
|
||
.onEnd(() => {
|
||
'worklet';
|
||
runOnJS(onEndJS)();
|
||
});
|
||
}, [resetZoom]);
|
||
// ── Composed: Race ensures single-tap and pinch-zoom never conflict ─────────
|
||
const composedGesture = useMemo(() => Gesture.Race(tapGesture, pinchGesture), [tapGesture, pinchGesture]);
|
||
return (_jsxs(View, { style: [styles.container, style], onLayout: (e) => {
|
||
const { width, height } = e.nativeEvent.layout;
|
||
setLayoutWidth(width);
|
||
setLayoutHeight(height);
|
||
}, children: [(showToolbar || showDebugPickers || showStatusRow || showColorBar) ? (_jsxs(ScrollView, { style: styles.scroll, showsVerticalScrollIndicator: false, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: "always", children: [showToolbar && (_jsx(View, { style: styles.toolbarRow, children: _jsx(Button, { title: isRefreshing ? 're-segmenting…' : 'clear cache and re-segment', onPress: clearCacheAndResegment, disabled: isRefreshing || !originImgPath || !maskImgPath }) })), showDebugPickers && (_jsxs(View, { style: styles.btnRow, children: [_jsx(Button, { title: "pick origin image", onPress: pickOriginImage }), _jsx(View, { style: styles.btnGap }), _jsx(Button, { title: "pick mask image", onPress: pickMaskImage })] })), showStatusRow && (_jsx(View, { style: styles.statusRow, children: segError ? (_jsxs(Text, { style: styles.err, children: ["\u274C ", segError] })) : !segmentsReady ? (_jsx(Text, { style: styles.hint, children: "\u23F3 segmenting\u2026" })) : layersLoading || !paintResourcesReady ? (_jsxs(Text, { style: styles.hint, children: ["\u2705 ", regionCount, " regions \u00B7 Shader textures preparing\u2026"] })) : !(originSkImg ?? lowFreqSkImg) ? (_jsx(Text, { style: styles.hint, children: "\u23F3 image loading\u2026" })) : (_jsxs(Text, { style: styles.hint, children: ["\u2705 ", regionCount, " regions \u00B7 painted ", paintedRegions.size, " \u00B7", ' ', hasActiveBrush
|
||
? customPaintColor
|
||
? 'custom paint color'
|
||
: `paint color ${(activeBrushIndex ?? 0) + 1}`
|
||
: 'please select the bottom paint color first', ' · ', compareMode ? 'compare original image' : 'paint mode'] })) })), showColorBar && (_jsxs(View, { style: styles.colorBar, children: [_jsx(Text, { style: styles.colorBarLabel, children: "paint color (tap to select, then tap canvas to paint)" }), _jsxs(View, { style: styles.colorSwatches, children: [paintPalette.map((color, index) => {
|
||
const isActive = activeBrushIndex === index && customPaintColor == null;
|
||
const { b, g, r } = color;
|
||
return (_jsx(TouchableOpacity, { style: [
|
||
styles.colorSwatch,
|
||
{ backgroundColor: bgrToCss(b, g, r) },
|
||
isActive && styles.colorSwatchSelected,
|
||
], activeOpacity: 0.8, disabled: !segmentsReady || disabled, onPress: () => selectBrushColor(index) }, index));
|
||
}), !segmentsReady && (_jsx(Text, { style: styles.colorBarEmpty, children: "loading\u2026" }))] }), customPaintColor && (_jsx(Text, { style: styles.hint, children: "current custom paint color is set by ref.setPaintColor" }))] }))] })) : null, _jsx(View, { style: [styles.canvasOuter, canvasStyle], children: _jsxs(View, { style: [styles.canvasWrap, { width: canvasW, height: canvasH }], children: [_jsx(GestureDetector, { gesture: composedGesture, children: _jsx(View, { style: [styles.canvasTouchLayer, { width: canvasW, height: canvasH }], children: _jsx(Canvas, { style: { width: canvasW, height: canvasH }, pointerEvents: "none", children: renderDraw() }) }) }), showOverlayButtons &&
|
||
(renderUndoButton ? (renderUndoButton({
|
||
onPress: undoSelection,
|
||
disabled: paintHistory.length === 0,
|
||
text: undoButtonText,
|
||
})) : (_jsx(TouchableOpacity, { style: [styles.overlayBtn, styles.btnBottomLeft, undoButtonStyle], activeOpacity: 0.7, disabled: paintHistory.length === 0 || disabled, onPress: undoSelection, children: _jsx(Text, { style: [
|
||
styles.btnText,
|
||
undoButtonTextStyle,
|
||
{ opacity: paintHistory.length === 0 ? 0.4 : 1 },
|
||
], children: undoButtonText }) }))), showOverlayButtons &&
|
||
(renderCompareButton ? (renderCompareButton({
|
||
onPress: () => {
|
||
onUserInteraction();
|
||
setCompareMode(v => !v);
|
||
},
|
||
text: compareMode ? compareExitButtonText : compareButtonText,
|
||
})) : (_jsx(TouchableOpacity, { style: [
|
||
styles.overlayBtn,
|
||
styles.btnBottomRight,
|
||
compareButtonStyle,
|
||
], activeOpacity: 0.7, disabled: disabled, onPress: () => {
|
||
onUserInteraction();
|
||
setCompareMode(v => !v);
|
||
}, children: _jsx(Text, { style: [styles.btnText, compareButtonTextStyle], children: compareMode ? compareExitButtonText : compareButtonText }) })))] }) }), highResSnapshotEnabled && exportCanvasSize ? (_jsx(View, { style: {
|
||
position: 'absolute',
|
||
left: -exportCanvasSize.w - 200,
|
||
top: 0,
|
||
width: exportCanvasSize.w,
|
||
height: exportCanvasSize.h,
|
||
opacity: 0,
|
||
overflow: 'hidden',
|
||
}, pointerEvents: "none", children: _jsx(Canvas, { ref: highResExportCanvasRef, style: { width: exportCanvasSize.w, height: exportCanvasSize.h }, pointerEvents: "none", children: _jsx(Group, { children: renderFullResPainted() }) }) })) : null] }));
|
||
});
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#fff',
|
||
},
|
||
scroll: {
|
||
flex: 1,
|
||
},
|
||
scrollContent: {
|
||
padding: 10,
|
||
paddingBottom: 28,
|
||
},
|
||
toolbarRow: {
|
||
marginBottom: 8,
|
||
},
|
||
btnRow: {
|
||
flexDirection: 'row',
|
||
marginBottom: 8,
|
||
},
|
||
btnGap: {
|
||
width: 10,
|
||
},
|
||
statusRow: {
|
||
marginBottom: 8,
|
||
},
|
||
hint: {
|
||
color: '#333',
|
||
fontSize: 13,
|
||
},
|
||
err: {
|
||
color: '#c33',
|
||
fontSize: 13,
|
||
},
|
||
canvasWrap: {
|
||
position: 'relative',
|
||
backgroundColor: '#f5f5f5',
|
||
borderWidth: StyleSheet.hairlineWidth,
|
||
borderColor: '#ddd',
|
||
overflow: 'hidden',
|
||
},
|
||
canvasOuter: {
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
// When the internal control ScrollView is omitted (the normal case for
|
||
// VisualizationScreen and non-interactive scheme previews), this makes the
|
||
// canvas area fill the bounds provided by the host (via style + maxHeight)
|
||
// and centers the fixed-size image rect. This also ensures the
|
||
// GestureDetector sits in the right place to receive taps and two-finger pinches.
|
||
flex: 1,
|
||
},
|
||
canvasTouchLayer: {
|
||
flex: 1,
|
||
},
|
||
canvas: {
|
||
flex: 1,
|
||
},
|
||
overlayBtn: {
|
||
position: 'absolute',
|
||
bottom: 10,
|
||
paddingHorizontal: 14,
|
||
paddingVertical: 7,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.62)',
|
||
borderRadius: 6,
|
||
},
|
||
btnBottomLeft: {
|
||
left: 10,
|
||
},
|
||
btnBottomRight: {
|
||
right: 10,
|
||
},
|
||
btnText: {
|
||
color: '#fff',
|
||
fontSize: 13,
|
||
fontWeight: '600',
|
||
},
|
||
colorBar: {
|
||
marginTop: 12,
|
||
paddingVertical: 10,
|
||
paddingHorizontal: 4,
|
||
borderTopWidth: StyleSheet.hairlineWidth,
|
||
borderTopColor: '#e0e0e0',
|
||
},
|
||
colorBarLabel: {
|
||
fontSize: 12,
|
||
color: '#666',
|
||
marginBottom: 10,
|
||
},
|
||
colorSwatches: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
},
|
||
colorSwatch: {
|
||
width: 44,
|
||
height: 44,
|
||
borderRadius: 22,
|
||
borderWidth: 2,
|
||
borderColor: 'rgba(0,0,0,0.12)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
colorSwatchSelected: {
|
||
borderColor: '#1e96ff',
|
||
borderWidth: 3,
|
||
transform: [{ scale: 1.08 }],
|
||
},
|
||
colorSwatchPainted: {
|
||
borderColor: 'rgba(255,255,255,0.9)',
|
||
},
|
||
colorSwatchDot: {
|
||
width: 8,
|
||
height: 8,
|
||
borderRadius: 4,
|
||
backgroundColor: 'rgba(255,255,255,0.92)',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(0,0,0,0.25)',
|
||
},
|
||
colorBarEmpty: {
|
||
fontSize: 13,
|
||
color: '#999',
|
||
},
|
||
});
|
||
export default MaskSegmentCanvas;
|
||
//# sourceMappingURL=MaskSegmentCanvas.js.map
|