Edit the watermark in place, rotate the frame photo, place a custom watermark
Watermark editing no longer covers the photo: the preview letterboxes the image inside its fit rect while the deck is open, and the idle hint is gone. The FRAME tab can rotate a library photo 90 degrees clockwise. Rotation swaps the pixel dimensions instead of the frame, so the polaroid/wall window keeps its aspect and every consumer (cover crop, watermark area, export) picks up the new orientation from width()/height() with no extra layout branch. The rotate surface is CPU-backed on purpose - a GPU snapshot loses its pixels before the next frame and renders the photo black. Custom watermark text can now be dragged anywhere on the photo, double-tapped to re-edit, and is only baked into the file once ACCEPT is pressed; the export engine takes the same position. It also gained COLOR/SIZE/FONT chips, with the font list read from the OS via Skia's FontMgr so any installed family can be used.
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { View, Text, TextInput, TouchableOpacity, ScrollView } from 'react-native';
|
||||
import Slider from '@react-native-community/slider';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { Trash2 } from 'lucide-react-native';
|
||||
import { Skia } from '@shopify/react-native-skia';
|
||||
import { Recipe, ColorAdjustments, CustomWatermark, FrameId, BaseFilter } from '../types';
|
||||
import { FRAMES } from '../utils/frameUtils';
|
||||
import { PARAM_DEFS, ContinuousParamDef } from '../utils/paramDefs';
|
||||
@@ -18,7 +19,7 @@ import RecipeCreateModal from './RecipeCreateModal';
|
||||
type TabId = 'recipes' | 'iq' | 'wb' | 'filters' | 'frame' | 'watermark';
|
||||
// Choice-group keys that open a strip above the chip row: color chrome groups
|
||||
// (wb tab) and the D.RANGE selector (iq tab).
|
||||
type GroupKey = 'cx' | 'cxb' | 'dr';
|
||||
type GroupKey = 'cx' | 'cxb' | 'dr' | 'wmColor' | 'wmSize' | 'wmFont';
|
||||
|
||||
interface AdjustmentPanelProps {
|
||||
activeTab: TabId;
|
||||
@@ -43,6 +44,10 @@ interface AdjustmentPanelProps {
|
||||
onSelectRecipe: (recipe: Recipe) => void;
|
||||
onUpdateAdjustments: (adjustments: Partial<ColorAdjustments>) => void;
|
||||
onUpdateFrame: (frameId: FrameId) => void;
|
||||
// FRAME tab: turn the inserted library photo 90deg (landscape <-> portrait)
|
||||
// so it fits the chosen frame better.
|
||||
photoRotation: 0 | 90;
|
||||
onToggleRotation: () => void;
|
||||
onToggleGeotag: (enabled: boolean) => void;
|
||||
onSaveRecipe: (name: string) => void;
|
||||
onDeleteRecipe: (id: string) => void;
|
||||
@@ -50,6 +55,11 @@ interface AdjustmentPanelProps {
|
||||
// input and the export options all read the same object.
|
||||
customWm: CustomWatermark;
|
||||
onUpdateCustomWm: (wm: CustomWatermark) => void;
|
||||
// ACCEPT: copy the live draft into the mark the export burns in. Edits stay a
|
||||
// draft (viewfinder preview only) until this is pressed.
|
||||
onAcceptCustomWm: () => void;
|
||||
// Bumped by a double-tap on the mark: put the caret back in the text input.
|
||||
wmEditNonce: number;
|
||||
}
|
||||
|
||||
interface ChipDef {
|
||||
@@ -90,6 +100,25 @@ const WB_PAIRS: Record<string, { t: number; ti: number }> = {
|
||||
fluorescent: { t: 4000, ti: 3 },
|
||||
};
|
||||
|
||||
// WATERMARK tab styling choices: swatches for TEXT COLOR, multipliers on the
|
||||
// base 3.2%-of-frame-width size for TEXT SIZE.
|
||||
const WM_DEFAULT_COLOR = '#f59e0b';
|
||||
const WM_COLORS: { v: string; d: string }[] = [
|
||||
{ v: '#f59e0b', d: 'AMBER' },
|
||||
{ v: '#ffffff', d: 'WHITE' },
|
||||
{ v: '#111111', d: 'BLACK' },
|
||||
{ v: '#ef4444', d: 'RED' },
|
||||
{ v: '#3b82f6', d: 'BLUE' },
|
||||
{ v: '#22c55e', d: 'GREEN' },
|
||||
{ v: '#a1a1aa', d: 'GREY' },
|
||||
];
|
||||
const WM_SIZES: { v: string; d: string }[] = [
|
||||
{ v: '0.6', d: 'S' },
|
||||
{ v: '1', d: 'M' },
|
||||
{ v: '1.6', d: 'L' },
|
||||
{ v: '2.5', d: 'XL' },
|
||||
];
|
||||
|
||||
export default function AdjustmentPanel({
|
||||
activeTab,
|
||||
recipes,
|
||||
@@ -104,11 +133,28 @@ export default function AdjustmentPanel({
|
||||
onSelectRecipe,
|
||||
onUpdateAdjustments,
|
||||
onUpdateFrame,
|
||||
photoRotation,
|
||||
onToggleGeotag,
|
||||
onDeleteRecipe,
|
||||
customWm,
|
||||
onUpdateCustomWm,
|
||||
onAcceptCustomWm,
|
||||
wmEditNonce,
|
||||
onToggleRotation,
|
||||
}: AdjustmentPanelProps) {
|
||||
// Double-tap on the mark in the viewfinder bumps wmEditNonce -> focus the
|
||||
// input again so the text can be retyped after the keyboard was dismissed.
|
||||
const wmInputRef = useRef<TextInput>(null);
|
||||
useEffect(() => {
|
||||
if (wmEditNonce > 0) {
|
||||
// BACK hides the IME but leaves the input focused, so a bare focus() is a
|
||||
// no-op and the keyboard never returns. Blur first so the re-focus is a
|
||||
// real focus change the IME reacts to.
|
||||
wmInputRef.current?.blur();
|
||||
const id = setTimeout(() => wmInputRef.current?.focus(), 60);
|
||||
return () => clearTimeout(id);
|
||||
}
|
||||
}, [wmEditNonce]);
|
||||
// The single choice-group whose strip (OFF/WEAK/STRONG, or the DR ladder) is
|
||||
// open above the chips (same one-row-at-a-time pattern as openParam — which
|
||||
// lives in App now, since an open row also arms image-drag adjustment).
|
||||
@@ -280,6 +326,21 @@ export default function AdjustmentPanel({
|
||||
{ v: '200', d: 'DR200' },
|
||||
{ v: '400', d: 'DR400' },
|
||||
];
|
||||
// WATERMARK tab styling strips. FONT lists every family the PLATFORM font
|
||||
// manager exposes (the device's own system fonts); DEFAULT keeps the face
|
||||
// the mark shipped with.
|
||||
const wmFontOptions = useMemo(() => {
|
||||
const mgr = Skia.FontMgr.System();
|
||||
const names = new Set<string>();
|
||||
for (let i = 0; i < mgr.countFamilies() && names.size < 120; i++) {
|
||||
const n = mgr.getFamilyName(i);
|
||||
if (n && !/fallback/i.test(n)) names.add(n);
|
||||
}
|
||||
return [
|
||||
{ v: 'DEFAULT', d: 'DEFAULT' },
|
||||
...[...names].sort().map((n) => ({ v: n, d: n })),
|
||||
];
|
||||
}, []);
|
||||
const groupDefs: Record<GroupKey, { label: string; off: string; value: string; options: { v: string; d: string }[]; onPick: (v: string) => void }> = {
|
||||
cx: {
|
||||
label: 'COLOR CHROME', off: 'none', value: a.colorChrome || 'none', options: chromeOptions,
|
||||
@@ -296,6 +357,20 @@ export default function AdjustmentPanel({
|
||||
dynamicRange: (v === 'auto' ? 'auto' : parseInt(v, 10)) as ColorAdjustments['dynamicRange'],
|
||||
}),
|
||||
},
|
||||
wmColor: {
|
||||
label: 'TEXT COLOR', off: WM_DEFAULT_COLOR,
|
||||
value: customWm.color ?? WM_DEFAULT_COLOR, options: WM_COLORS,
|
||||
onPick: (v) => onUpdateCustomWm({ ...customWm, color: v }),
|
||||
},
|
||||
wmSize: {
|
||||
label: 'TEXT SIZE', off: '1', value: String(customWm.size ?? 1), options: WM_SIZES,
|
||||
onPick: (v) => onUpdateCustomWm({ ...customWm, size: Number(v) }),
|
||||
},
|
||||
wmFont: {
|
||||
label: 'TEXT FONT', off: 'DEFAULT', value: customWm.font ?? 'DEFAULT',
|
||||
options: wmFontOptions,
|
||||
onPick: (v) => onUpdateCustomWm({ ...customWm, font: v === 'DEFAULT' ? null : v }),
|
||||
},
|
||||
};
|
||||
const groupChip = (g: GroupKey): ChipDef => ({
|
||||
key: `grp-${g}`,
|
||||
@@ -416,6 +491,12 @@ export default function AdjustmentPanel({
|
||||
selectedFrame,
|
||||
(val) => onUpdateFrame(val as FrameId)
|
||||
)}
|
||||
{renderChip({
|
||||
key: 'rotate',
|
||||
label: photoRotation === 0 ? 'ROTATE 90' : 'ROTATE 0',
|
||||
active: photoRotation !== 0,
|
||||
onPress: onToggleRotation,
|
||||
})}
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
@@ -438,6 +519,16 @@ export default function AdjustmentPanel({
|
||||
active: customWm.enabled,
|
||||
onPress: () => onUpdateCustomWm({ ...customWm, enabled: !customWm.enabled }),
|
||||
})}
|
||||
{customWm.enabled &&
|
||||
renderChip({
|
||||
key: 'custom-wm-accept',
|
||||
label: 'ACCEPT',
|
||||
active: true,
|
||||
onPress: onAcceptCustomWm,
|
||||
})}
|
||||
{customWm.enabled && renderChip(groupChip('wmColor'))}
|
||||
{customWm.enabled && renderChip(groupChip('wmSize'))}
|
||||
{customWm.enabled && renderChip(groupChip('wmFont'))}
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
@@ -542,6 +633,7 @@ export default function AdjustmentPanel({
|
||||
{activeTab === 'watermark' && customWm.enabled && (
|
||||
<View className="border-b border-amber-500/30 bg-amber-500/5 px-3 py-2">
|
||||
<TextInput
|
||||
ref={wmInputRef}
|
||||
value={customWm.text}
|
||||
onChangeText={(text) => onUpdateCustomWm({ ...customWm, text })}
|
||||
placeholder="TYPE WATERMARK TEXT"
|
||||
@@ -549,11 +641,6 @@ export default function AdjustmentPanel({
|
||||
className="rounded-md border border-amber-500/70 bg-black/40 px-3 py-2 font-mono text-sm font-bold text-amber-300"
|
||||
maxLength={80}
|
||||
/>
|
||||
<Text className="mt-1 font-mono text-[9px] font-bold tracking-widest text-amber-400/80">
|
||||
{customWm.text.trim().length > 0
|
||||
? 'DRAG ON IMAGE TO MOVE — TAP TO PLACE'
|
||||
: 'TYPE TEXT ABOVE, THEN DRAG ON IMAGE TO PLACE'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{chipsRow}
|
||||
|
||||
+110
-16
@@ -22,6 +22,7 @@ import {
|
||||
TileMode,
|
||||
FilterMode,
|
||||
MipmapMode,
|
||||
FontStyle,
|
||||
} from '@shopify/react-native-skia';
|
||||
import { Lock } from 'lucide-react-native';
|
||||
import { Recipe, GPSInfo, FrameId, AspectRatio, ColorAdjustments, ASPECT_RATIO_W_H } from '../types';
|
||||
@@ -29,6 +30,7 @@ import { getSkiaColorMatrix, applyExposureGain } from '../utils/colorUtils';
|
||||
import { TONE_SKSL, getToneUniforms } from '../utils/toneShader';
|
||||
import { CINEMA_SKSL, getCinemaUniforms, cinemaOffFlat } from '../utils/cinemaShader';
|
||||
import { polaroidLayout, wallframeLayout, WALLFRAME_PNG_W, WALLFRAME_PNG_H } from '../utils/frameUtils';
|
||||
import { rotateSkImage90 } from '../utils/skiaImage';
|
||||
|
||||
interface ViewfinderProps {
|
||||
mode: 'camera' | 'library';
|
||||
@@ -40,6 +42,16 @@ interface ViewfinderProps {
|
||||
useGeotag: boolean;
|
||||
gpsInfo: GPSInfo | null;
|
||||
libraryImageUri: string | null;
|
||||
// Library only: screen height still visible above the bottom deck. The whole
|
||||
// viewfinder geometry is letterboxed into it so no part of the photo (and no
|
||||
// custom-watermark position) hides under an open panel. Camera ignores this:
|
||||
// its feed rects are normalized against the real window.
|
||||
availableHeight?: number | null;
|
||||
// Library only: user rotation of the inserted photo, 0 or 90deg clockwise.
|
||||
photoRotation?: 0 | 90;
|
||||
// WATERMARK tab: double-tap ON the mark re-opens the text editor (App bumps
|
||||
// a nonce so the panel puts the caret back in its input).
|
||||
onWmEdit?: () => void;
|
||||
cameraPermissionGranted: boolean;
|
||||
onRequestCameraPermission: () => void;
|
||||
photoOutput: CameraPhotoOutput;
|
||||
@@ -159,6 +171,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
useGeotag,
|
||||
gpsInfo,
|
||||
libraryImageUri,
|
||||
availableHeight,
|
||||
cameraPermissionGranted,
|
||||
onRequestCameraPermission,
|
||||
photoOutput,
|
||||
@@ -172,12 +185,17 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
imageAdjustTarget,
|
||||
customWm = { enabled: false, text: '', x: 0.5, y: 0.5 },
|
||||
onWmPositionChange,
|
||||
onWmEdit,
|
||||
photoRotation = 0,
|
||||
}: ViewfinderProps,
|
||||
ref
|
||||
) {
|
||||
// Fullscreen hero: the viewfinder fills the entire screen, every overlay
|
||||
// rect derives from window size.
|
||||
const { width: vw, height: vh } = useWindowDimensions();
|
||||
const { width: vw, height: winH } = useWindowDimensions();
|
||||
// Library: everything below this line is the bottom deck, so the photo is
|
||||
// letterboxed above it (top-anchored: same fractions, same export).
|
||||
const vh = mode === 'library' && availableHeight && availableHeight > 0 ? availableHeight : winH;
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
// Composition ratio band. With a ratio active the photo area is a centered
|
||||
@@ -251,7 +269,14 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
}
|
||||
}, [device]);
|
||||
|
||||
const skiaImage = useImage(libraryImageUri || '');
|
||||
const loadedImage = useImage(libraryImageUri || '');
|
||||
// FRAME-tab rotation: pre-rotate the source, so the width()/height() swap
|
||||
// flows through every derived rect (polaroid window aspect, cover crop,
|
||||
// watermark area) and the export matches the preview for free.
|
||||
const skiaImage = useMemo(
|
||||
() => (photoRotation === 90 ? rotateSkImage90(loadedImage) : loadedImage),
|
||||
[loadedImage, photoRotation]
|
||||
);
|
||||
// Wall-frame PNG artwork (project root). Loaded lazily so other frames pay
|
||||
// no asset cost; source switches to '' when unselected (useImage → null).
|
||||
const wallImage = useImage(selectedFrame === 'wallframe' ? require('../../wallframe.png') : '');
|
||||
@@ -859,14 +884,24 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
// pole-like, whereas the real print is a shorter 3:4 card letterboxed on
|
||||
// screen). ponytail: verified on Xiaomi quality-mode captures (4:3); if the
|
||||
// session negotiates 16:9 photos, change to 9/16.
|
||||
// The frame keys off the ORIGINAL (pre-rotation) source: rotating the print
|
||||
// inside the frame must never resize the frame itself.
|
||||
const framePhotoAspect =
|
||||
loadedImage && loadedImage.width() > 0 && loadedImage.height() > 0
|
||||
? loadedImage.width() / loadedImage.height()
|
||||
: 0;
|
||||
const polaroidAspect =
|
||||
ratioWH ??
|
||||
(mode === 'library' && skiaImage && skiaImage.width() > 0 && skiaImage.height() > 0
|
||||
? skiaImage.width() / skiaImage.height()
|
||||
: 3 / 4);
|
||||
ratioWH ?? (mode === 'library' && framePhotoAspect > 0 ? framePhotoAspect : 3 / 4);
|
||||
// Photo draw fit inside the polaroid window: cover when the window aspect
|
||||
// (ratio) differs from the source photo, fill otherwise (aspects match).
|
||||
const polaroidFit: 'cover' | 'fill' = ratioWH ? 'cover' : 'fill';
|
||||
// (ratio) differs from the source photo, fill otherwise (aspects match). A
|
||||
// print rotated inside the frame no longer matches the (un-rotated) window
|
||||
// aspect, so it is contain-fitted — letterboxed inside the window, never
|
||||
// stretched, and the card keeps its dimensions.
|
||||
const polaroidFit: 'cover' | 'contain' | 'fill' = ratioWH
|
||||
? 'cover'
|
||||
: photoRotation === 90
|
||||
? 'contain'
|
||||
: 'fill';
|
||||
const polaroidGeo = useMemo(() => {
|
||||
if (selectedFrame !== 'polaroid') return null;
|
||||
return polaroidLayout(vw, vh, polaroidAspect, 'contain');
|
||||
@@ -992,13 +1027,27 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
// Photo/window area the 0..1 fractions map onto — identical rule to
|
||||
// renderGPSWatermark so both marks share the user-visible coordinate space.
|
||||
const wmArea = () => {
|
||||
const win = polaroidGeo?.window ?? wallGeo?.window ?? null;
|
||||
if (win) return { dx: win.x, dy: win.y, dw: win.w, dh: win.h };
|
||||
// The FRAME, not just the photo window: the mark may be dragged anywhere
|
||||
// on the card / frame (the flat bottom deck is where a caption belongs).
|
||||
// A framed export's canvas IS that frame, so the same 0..1 fractions
|
||||
// carry over to the burn-in.
|
||||
const box = polaroidGeo?.card ?? wallGeo?.frame ?? null;
|
||||
if (box) return { dx: box.x, dy: box.y, dw: box.w, dh: box.h };
|
||||
if (regionBand) return { dx: region.x, dy: region.y, dw: region.w, dh: region.h };
|
||||
if (mode === 'library' && imageFitRect) return imageFitRect;
|
||||
return { dx: 0, dy: 0, dw: vw, dh: vh };
|
||||
};
|
||||
const wmFontSize = Math.round(vw * 0.032); // matches customFont/iconFont size
|
||||
const wmFontSize = Math.round(vw * 0.032 * (customWm.size ?? 1));
|
||||
const wmColor = customWm.color ?? '#f59e0b';
|
||||
// FONT chip: an OS family resolved through the platform font manager; no
|
||||
// family picked -> the bundled face customFont was built from, re-sized to
|
||||
// the current SIZE so one code path serves both.
|
||||
const wmFont = useMemo(() => {
|
||||
const face = customWm.font
|
||||
? Skia.FontMgr.System().matchFamilyStyle(customWm.font, FontStyle.Normal)
|
||||
: customFont?.getTypeface() ?? null;
|
||||
return face ? Skia.Font(face, wmFontSize) : null;
|
||||
}, [customWm.font, wmFontSize, customFont]);
|
||||
const wmFracFromXY = (x: number, y: number) => {
|
||||
const area = wmArea();
|
||||
const dw = area.dw || 1;
|
||||
@@ -1008,15 +1057,45 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
y: Math.max(0, Math.min(1, (y - area.dy) / dh)),
|
||||
};
|
||||
};
|
||||
// placeWm/commitWm are called back-to-back inside one gesture handler, so
|
||||
// reading the wmDragPos state would commit the PREVIOUS render's value (a
|
||||
// tap with no move events committed nothing at all). Mirror it in a ref.
|
||||
const wmDragPosRef = useRef<{ x: number; y: number } | null>(null);
|
||||
const placeWm = (x: number, y: number) => {
|
||||
if (!wmArmed) return;
|
||||
setWmDragPos(wmFracFromXY(x, y));
|
||||
const pos = wmFracFromXY(x, y);
|
||||
wmDragPosRef.current = pos;
|
||||
setWmDragPos(pos);
|
||||
};
|
||||
const commitWm = () => {
|
||||
if (!wmArmed || !onWmPositionChange) return;
|
||||
if (wmDragPos) onWmPositionChange(wmDragPos.x, wmDragPos.y);
|
||||
const pos = wmDragPosRef.current;
|
||||
wmDragPosRef.current = null;
|
||||
setWmDragPos(null);
|
||||
if (!wmArmed || !onWmPositionChange || !pos) return;
|
||||
onWmPositionChange(pos.x, pos.y);
|
||||
};
|
||||
// Bounding box of the drawn mark (same anchor maths as renderCustomWatermark)
|
||||
// so a double-tap ON the text re-opens the editor instead of moving it.
|
||||
const wmBox = () => {
|
||||
if (!wmArmed || !wmFont) return null;
|
||||
const area = wmArea();
|
||||
const fracX = wmDragPos?.x ?? customWm.x;
|
||||
const fracY = wmDragPos?.y ?? customWm.y;
|
||||
const tx = area.dx + fracX * area.dw;
|
||||
const ty = area.dy + fracY * area.dh + Math.round(wmFontSize * 0.35);
|
||||
const w = Math.max(wmFont.measureText(customWm.text.trim()).width, wmFontSize * 2);
|
||||
return { x: tx, y: ty - wmFontSize, w, h: Math.round(wmFontSize * 1.4) };
|
||||
};
|
||||
const wmBoxHit = (
|
||||
box: { x: number; y: number; w: number; h: number } | null,
|
||||
x: number,
|
||||
y: number
|
||||
) =>
|
||||
!!box &&
|
||||
x >= box.x - 8 &&
|
||||
x <= box.x + box.w + 8 &&
|
||||
y >= box.y - 8 &&
|
||||
y <= box.y + box.h + 8;
|
||||
// Library framed (polaroid/wall) returns reuse the SAME responder handlers as
|
||||
// plain library (see the framed JSX below): single-finger drags place/move
|
||||
// the text watermark while armed, pinch + double-tap repositions the photo
|
||||
@@ -1086,6 +1165,21 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
// Watermark armed: a tap places + commits the text and skips the double-tap
|
||||
// zoom bookkeeping (double-tap zoom is disabled while placing).
|
||||
if (wmArmed && libZoom.s <= 1.01) {
|
||||
const now = Date.now();
|
||||
const prev = lastTapRef.current;
|
||||
lastTapRef.current = { x, y, t: now };
|
||||
// Second tap ON the mark (keyboard hidden, still placing): back to the
|
||||
// text editor — the mark is only embedded by ACCEPT in the panel.
|
||||
if (
|
||||
prev &&
|
||||
now - prev.t < 350 &&
|
||||
Math.hypot(x - prev.x, y - prev.y) < 50 &&
|
||||
wmBoxHit(wmBox(), x, y)
|
||||
) {
|
||||
lastTapRef.current = null;
|
||||
onWmEdit?.();
|
||||
return;
|
||||
}
|
||||
placeWm(x, y);
|
||||
commitWm();
|
||||
return;
|
||||
@@ -1250,7 +1344,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
};
|
||||
|
||||
const renderCustomWatermark = () => {
|
||||
if (!wmArmed || !customFont) return null;
|
||||
if (!wmArmed || !wmFont) return null;
|
||||
const area = wmArea();
|
||||
const fracX = wmDragPos?.x ?? customWm.x;
|
||||
const fracY = wmDragPos?.y ?? customWm.y;
|
||||
@@ -1259,7 +1353,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
const tx = area.dx + fracX * area.dw;
|
||||
const ty = area.dy + fracY * area.dh + Math.round(wmFontSize * 0.35);
|
||||
return (
|
||||
<SkiaText x={tx} y={ty} text={customWm.text.trim()} font={customFont} color="#f59e0b" />
|
||||
<SkiaText x={tx} y={ty} text={customWm.text.trim()} font={wmFont} color={wmColor} />
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user