Inital commit

src/components/svg-tracer-options.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import type { ImageEditor } from "../handler/image-editor";
+import type { TracerOptions } from "../interface";
+import { NumericInputWithLabelTable } from "./numeric-labeld-input";
+
+
+export function SvgTracerOptions({ selected }: { selected: ImageEditor[] }) {
+    const [options, setOptions] = useState(selected[0]?.tracerOptions ?? {});
+
+    useEffect(() => {
+        setOptions(selected[0]?.tracerOptions ?? {});
+    }, [selected.map(e => e.id).join("")]);
+
+    const setValue = (key: keyof TracerOptions, value: number) => {
+        setOptions({ ...options, [key]: value });
+        selected.forEach(e => {
+            e.setTracerSvg({ ...options, [key]: value });
+        });
+    };
+
+    return <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>;
+}