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

Format code

Browse Source
This commit is contained in:
Terncode
2026-06-29 09:41:02 +02:00
parent 42fcf34c5e
commit bfff0cc9fb
16 changed files with 538 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/svg-tracer-options.tsx
+85 -73
View File
@@ -18,13 +18,13 @@ const Table = styled.table`
const WrapperColumn = styled.div`
display: flex;
flex-direction: column;
`;
`;
const WrapperRow = styled.div`
display: flex;
flex-direction: row;
height: 100px;
`;
`;
const LayerPanel = styled.div`
display: flex;
@@ -35,7 +35,7 @@ const LayerPanel = styled.div`
`;
const ToggleButton = styled.button<{ $enabled: boolean }>`
background-color: ${({ $enabled }) => $enabled ? "var(--secondary-color)" : "var(--primary-color)"};
background-color: ${({ $enabled }) => ($enabled ? "var(--secondary-color)" : "var(--primary-color)")};
color: white;
border: 1px solid white;
&:hover {
@@ -44,19 +44,17 @@ const ToggleButton = styled.button<{ $enabled: boolean }>`
}
`;
export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[], handler: VectraceHandler }) {
export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[]; handler: VectraceHandler }) {
const [options, setOptions] = useState(selected[0]?.tracerOptions ?? {});
const [updated, setUpdated] = useState(false);
useEffect(() => {
setOptions(selected[0]?.tracerOptions ?? {});
setUpdated(true);
}, [selected.map(e => `${e.id}${JSON.stringify(e.svgData.options)}`).join("")]);
}, [selected.map((e) => `${e.id}${JSON.stringify(e.svgData.options)}`).join("")]);
const redraw = () => {
selected.forEach(e => {
selected.forEach((e) => {
e.setTracerSvg({ ...options });
});
setUpdated(true);
@@ -67,69 +65,83 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
setUpdated(false);
};
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));
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));
}
}
}
}}
onChange={value => {
setValue("transparencyThreshold", value);
}} />
<WrapperColumn>
<Button $active={!updated} title="Draw" onClick={() => { redraw(); }}><FaBezierCurve /></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)}
/>
</tbody>
</Table >
<LayerPanel>
{(options.allowedPaths || []).map((e, i) => {
return <ToggleButton
key={i}
$enabled={e}
onClick={() => {
const array = options?.allowedPaths ? [...options.allowedPaths] : [];
array[i] = !array[i];
setValue("allowedPaths", array);
}}
>
{`${i + 1} Layer`}
</ToggleButton>;
})}
</LayerPanel>
</WrapperRow>
</WrapperColumn></WrapperRow>;
}
}}
onChange={(value) => {
setValue("transparencyThreshold", value);
}}
/>
<WrapperColumn>
<Button
$active={!updated}
title="Draw"
onClick={() => {
redraw();
}}
>
<FaBezierCurve />
</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)}
/>
</tbody>
</Table>
<LayerPanel>
{(options.allowedPaths || []).map((e, i) => {
return (
<ToggleButton
key={i}
$enabled={e}
onClick={() => {
const array = options?.allowedPaths ? [...options.allowedPaths] : [];
array[i] = !array[i];
setValue("allowedPaths", array);
}}
>
{`${i + 1} Layer`}
</ToggleButton>
);
})}
</LayerPanel>
</WrapperRow>
</WrapperColumn>
</WrapperRow>
);
}