Terncode/Vectrace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hints

Browse Source
This commit is contained in:
Terncode
2026-06-29 09:41:02 +02:00
parent bfff0cc9fb
commit df39dda32d
7 changed files with 319 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/svg-tracer-options.tsx
+73 -44
View File
@@ -9,9 +9,9 @@ import { VerticalSlider } from "./vertical-slider";
import { TRANSPARENCY_THRESHOLD_DEFAULT } from "../svg-tracer";
import type { VectraceHandler } from "../handler/vectrace-handler";
import { clamp } from "lodash";
import { Hint } from "./tooltip";
const Table = styled.table`
margin: 2px;
padding-right: 4px;
`;
@@ -31,7 +31,7 @@ const LayerPanel = styled.div`
flex-direction: column;
width: 100px;
overflow: auto;
height: 100px;
height: 97px;
`;
const ToggleButton = styled.button<{ $enabled: boolean }>`
@@ -67,60 +67,89 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
return (
<WrapperRow>
<VerticalSlider
max={255}
min={0}
value={options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT}
onLabelClick={async () => {
const value = await handler.popup.prompt(
"Transparency threshold",
"Enter transparency threshold between 0-255",
(options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT).toString(),
);
if (value) {
const int = parseInt(value, 10);
if (!isNaN(int)) {
setValue("transparencyThreshold", clamp(int, 0, 255));
<Hint
hint={
"Transparency cutoff — pixels more transparent than this value are ignored when tracing. " +
"Lower = only opaque pixels traced, Higher = transparent pixels included in the path."
}
>
<VerticalSlider
max={255}
min={0}
value={options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT}
onLabelClick={async () => {
const value = await handler.popup.prompt(
"Transparency threshold",
"Enter transparency threshold between 0-255",
(options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT).toString(),
);
if (value) {
const int = parseInt(value, 10);
if (!isNaN(int)) {
setValue("transparencyThreshold", clamp(int, 0, 255));
}
}
}
}}
onChange={(value) => {
setValue("transparencyThreshold", value);
}}
/>
}}
onChange={(value) => {
setValue("transparencyThreshold", value);
}}
/>
</Hint>
<WrapperColumn>
<Button
$active={!updated}
title="Draw"
onClick={() => {
redraw();
}}
>
<FaBezierCurve />
<span>
<span>Redraw</span>
<FaBezierCurve style={{ paddingLeft: 10 }} />
</span>
</Button>
<WrapperRow>
<Table>
<tbody>
<NumericInputWithLabelTable
name="Ltres"
value={options.ltres}
onChange={(value) => setValue("ltres", value)}
/>
<NumericInputWithLabelTable
name="Qtres"
value={options.qtres}
onChange={(value) => setValue("qtres", value)}
/>
<NumericInputWithLabelTable
name="Path omit"
value={options.pathomit}
onChange={(value) => setValue("pathomit", value)}
/>
<NumericInputWithLabelTable
name="Round corners"
value={options.roundcoords}
onChange={(value) => setValue("roundcoords", value)}
/>
<Hint
hint={
"Line threshold — how closely straight lines must follow the original shape. Lower = more accurate, more points."
}
>
<NumericInputWithLabelTable
name="Ltres"
value={options.ltres}
onChange={(value) => setValue("ltres", value)}
/>
</Hint>
<Hint
hint={
"Curve threshold — how closely curves must follow the original shape. Lower = smoother curves, more points."
}
>
<NumericInputWithLabelTable
name="Qtres"
value={options.qtres}
onChange={(value) => setValue("qtres", value)}
/>
</Hint>
<Hint
hint={
"Ignore tiny paths smaller than this many pixels. Higher = cleaner output, but small details get dropped."
}
>
<NumericInputWithLabelTable
name="Path omit"
value={options.pathomit}
onChange={(value) => setValue("pathomit", value)}
/>
</Hint>
<Hint hint={"Decimal precision of path coordinates. Lower = smaller file, slightly less accurate."}>
<NumericInputWithLabelTable
name="Round corners"
value={options.roundcoords}
onChange={(value) => setValue("roundcoords", value)}
/>
</Hint>
</tbody>
</Table>
<LayerPanel>