Format code

src/components/a4-canvas.tsx

@@ -50,8 +50,10 @@ export default function A4Canvas({ handler }: CanvasHandlerProps) {
     useEffect(() => {
         const container = containerRef.current;
         if (!container) return;
-        panRef.current.offsetX = (container.offsetWidth - (settings.landscape ? settings.paperHeight : settings.paperWidth) * settings.scale) / 2;
+        panRef.current.offsetX =
-        panRef.current.offsetY = (container.offsetHeight - (settings.landscape ? settings.paperWidth : settings.paperHeight) * settings.scale) / 2;
+            (container.offsetWidth - (settings.landscape ? settings.paperHeight : settings.paperWidth) * settings.scale) / 2;
+        panRef.current.offsetY =
+            (container.offsetHeight - (settings.landscape ? settings.paperWidth : settings.paperHeight) * settings.scale) / 2;
         applyTransform();
 
         const unsub = handler.toolHandler.emitter.on("select", (tool) => {
@@ -123,7 +125,7 @@ export default function A4Canvas({ handler }: CanvasHandlerProps) {
                     break;
                 case "Delete": {
                     const copy = [...handler.selected];
-                    if (copy.length && await handler.popup.confirm("Title", "Are you sure you want to delete")) {
+                    if (copy.length && (await handler.popup.confirm("Title", "Are you sure you want to delete"))) {
                         for (const id of copy) {
                             handler.deleteImage(id);
                         }
@@ -135,7 +137,6 @@ export default function A4Canvas({ handler }: CanvasHandlerProps) {
                 handler.selected.forEach((e) => {
                     handler.move(e, x, y);
                 });
-
             }
         };
 
@@ -145,7 +146,6 @@ export default function A4Canvas({ handler }: CanvasHandlerProps) {
         };
     });
 
-
     const handleMouseDown = (e: React.MouseEvent) => {
         if (!isDragging.current && handler.toolHandler.isToolSelected(TOOL_CANVAS_MOVE)) {
             setCursor("grabbing");
@@ -174,16 +174,12 @@ export default function A4Canvas({ handler }: CanvasHandlerProps) {
             // }
             // const mx = e.clientX - panRef.current.offsetX;
             // const my = e.clientY - panRef.current.offsetY;
-
             // const dx = mx - dragStart.current.x;
             // const dy = my - dragStart.current.y;
-
             // const x = dx / settings.scale;
             // const y = dy / settings.scale;
-
             // dragStart.current.x = mx;
             // dragStart.current.y = my;
-
             // handler.selected.forEach((e) => {
             //     handler.move(e, x, y);
             // });

src/components/download-buttons.tsx

@@ -26,40 +26,56 @@ const Column = styled.div`
     height: 100%;
 `;
 
-const Box = styled.div<{ $width: number, $height: number }>`
+const Box = styled.div<{ $width: number; $height: number }>`
     width: ${({ $width }) => $width}px;
     height: ${({ $height }) => $height}px;
     padding: 10px;
 `;
 
-
 export function ImportExportButtons({ handler, selected }: CanvasHandlerProps & { selected: ImageEditor[] }) {
     const boxSize = 90;
-    return <>
+    return (
+        <>
             <Box $width={boxSize} $height={boxSize}>
                 <Column>
                     <Row>
-
+                        <Btn
-                    <Btn onClick={() => { downloadZip(handler); }}>
+                            onClick={() => {
-                        <FaFileZipper />ZIP
+                                downloadZip(handler);
+                            }}
+                        >
+                            <FaFileZipper />
+                            ZIP
                         </Btn>
-                    <Btn onClick={() => { createPdf(handler, true).save(`${handler.projectName}.pdf`); }}>
+                        <Btn
-                        <FaFilePdf />PDF
+                            onClick={() => {
+                                createPdf(handler, true).save(`${handler.projectName}.pdf`);
+                            }}
+                        >
+                            <FaFilePdf />
+                            PDF
                         </Btn>
-                    <Btn onClick={async () => { downloadBlob(await createSVGDoc(handler), `${handler.projectName}.svg`); }} >
+                        <Btn
-                        <FaDrawPolygon />SVG
+                            onClick={async () => {
+                                downloadBlob(await createSVGDoc(handler), `${handler.projectName}.svg`);
+                            }}
+                        >
+                            <FaDrawPolygon />
+                            SVG
                         </Btn>
                     </Row>
                     <Row>
-                    <Btn disabled={selected.length !== 1} onClick={() => {
+                        <Btn
-                        const v = handler.imagesRenders.find(e => e.id === selected[0].id);
+                            disabled={selected.length !== 1}
+                            onClick={() => {
+                                const v = handler.imagesRenders.find((e) => e.id === selected[0].id);
                                 if (v) {
                                     const canvas = document.createElement("canvas");
                                     canvas.width = v.image.naturalWidth * v.scale;
                                     canvas.height = v.image.naturalHeight * v.scale;
                                     const ctx = canvas.getContext("2d")!;
                                     ctx.drawImage(v.image, 0, 0, canvas.width, canvas.height);
-                            canvas.toBlob(blob => {
+                                    canvas.toBlob((blob) => {
                                         if (blob) {
                                             downloadBlob(blob, `${v.name}.png`);
                                         } else {
@@ -69,9 +85,15 @@ export function ImportExportButtons({ handler, selected }: CanvasHandlerProps &
                                 } else {
                                     handler.popup.alert("Error", "Image not found");
                                 }
-                    }}><FaImage />Image</Btn>
+                            }}
-                    <Btn disabled={selected.length !== 1} onClick={() => {
+                        >
-                        const v = handler.imagesRenders.find(e => e.id === selected[0].id);
+                            <FaImage />
+                            Image
+                        </Btn>
+                        <Btn
+                            disabled={selected.length !== 1}
+                            onClick={() => {
+                                const v = handler.imagesRenders.find((e) => e.id === selected[0].id);
                                 if (v) {
                                     if (v.svg.scale !== v.scale || v.svg.dirty) {
                                         handler.redrawSvg(v.id);
@@ -80,25 +102,56 @@ export function ImportExportButtons({ handler, selected }: CanvasHandlerProps &
                                 } else {
                                     handler.popup.alert("Error", "Image not found");
                                 }
-
+                            }}
-                    }}> <FaDrawPolygon />SVG</Btn>
+                        >
+                            {" "}
+                            <FaDrawPolygon />
+                            SVG
+                        </Btn>
                     </Row>
                 </Column>
             </Box>
             <Box $width={boxSize} $height={boxSize}>
                 <Column>
                     <Row>
-                    <Btn onClick={() => { handler.exportProject(); }}><FaFileExport />Export</Btn>
+                        <Btn
-                    <Btn onClick={() => { handler.importProject(); }} ><FaFileImport />Import</Btn>
+                            onClick={() => {
+                                handler.exportProject();
+                            }}
+                        >
+                            <FaFileExport />
+                            Export
+                        </Btn>
+                        <Btn
+                            onClick={() => {
+                                handler.importProject();
+                            }}
+                        >
+                            <FaFileImport />
+                            Import
+                        </Btn>
                     </Row>
-                <Btn style={{ backgroundColor: "#ff000073" }} disabled={selected.length !== 1} onClick={async () => {
+                    <Btn
+                        style={{ backgroundColor: "#ff000073" }}
+                        disabled={selected.length !== 1}
+                        onClick={async () => {
                             {
-                        if (await handler.popup.confirm("Clear", "Are you sure you want to clear project? Any unsaved changes will be discarded")) {
+                                if (
+                                    await handler.popup.confirm(
+                                        "Clear",
+                                        "Are you sure you want to clear project? Any unsaved changes will be discarded",
+                                    )
+                                ) {
                                     handler.clear();
                                 }
                             }
-                }} ><FaBroom />Clear</Btn>
+                        }}
+                    >
+                        <FaBroom />
+                        Clear
+                    </Btn>
                 </Column>
             </Box>
-    </>;
+        </>
+    );
 }

src/components/image-tools/paper-view.tsx

@@ -6,7 +6,6 @@ import { FreeTransform } from "./selection-box";
 import type { GlobalSettings, GridType } from "../../interface";
 import { SvgRenderer } from "./svg-view";
 
-
 const CanvasEl = styled.div`
     background: white;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@@ -17,10 +16,9 @@ const Img = styled.img<{ $selected: boolean }>`
     position: absolute;
     display: block;
     user-select: none;
-    opacity: ${({ $selected }) => $selected ? 0.5 : 1};
+    opacity: ${({ $selected }) => ($selected ? 0.5 : 1)};
 `;
 
-
 const Box = styled.div`
     position: absolute;
     top: 0;
@@ -31,9 +29,9 @@ const Box = styled.div`
 function getGridLines(settings: GridType, width: number, height: number, strokeWidth: number, strokeWidthHalf: number) {
     if (settings === "none") return null;
     const configs: Record<GridType, { vertical: number[]; horizontal: number[] }> = {
-        "none": {
+        none: {
             horizontal: [1],
-            vertical: [1]
+            vertical: [1],
         },
         "2x2": {
             vertical: [1 / 2],
@@ -48,21 +46,25 @@ function getGridLines(settings: GridType, width: number, height: number, strokeW
     const config = configs[settings];
     if (!config) return null;
 
-    return <>
+    return (
+        <>
             {config.vertical.map((fraction, i) => (
                 <Box key={`v-${i}`} style={{ left: width * fraction - strokeWidthHalf, width: strokeWidth, height: "100%" }} />
             ))}
             {config.horizontal.map((fraction, i) => (
                 <Box key={`h-${i}`} style={{ top: height * fraction - strokeWidthHalf, height: strokeWidth, width: "100%" }} />
             ))}
-    </>;
+        </>
-};
+    );
+}
 
 export function PaperView({ handler, settings }: CanvasHandlerProps & { settings: GlobalSettings }) {
     const { images } = useImages(handler);
     const dpi = settings.DPI;
-    const width = Math.round(((settings.landscape ? settings.paperHeight : settings.paperWidth) / MM_TO_INCH) * dpi) * settings.scale;
+    const width =
-    const height = Math.round(((settings.landscape ? settings.paperWidth : settings.paperHeight) / MM_TO_INCH) * dpi) * settings.scale;
+        Math.round(((settings.landscape ? settings.paperHeight : settings.paperWidth) / MM_TO_INCH) * dpi) * settings.scale;
+    const height =
+        Math.round(((settings.landscape ? settings.paperWidth : settings.paperHeight) / MM_TO_INCH) * dpi) * settings.scale;
 
     const renderGuides = () => {
         const strokeWidth = 1;
@@ -70,14 +72,16 @@ export function PaperView({ handler, settings }: CanvasHandlerProps & { settings
         return getGridLines(settings.grid, width, height, strokeWidth, strokeWidthHalf);
     };
 
-    return <CanvasEl style={{ width: `${width}px`, height: `${height}px` }} draggable={false}>
+    return (
-        {images.map(e => {
+        <CanvasEl style={{ width: `${width}px`, height: `${height}px` }} draggable={false}>
+            {images.map((e) => {
                 if (!e.visible) return;
                 const width = e.image.naturalWidth * e.scale * settings.scale;
                 const height = e.image.naturalHeight * e.scale * settings.scale;
                 const x = e.x * settings.scale;
                 const y = e.y * settings.scale;
-            return <div key={e.id}>
+                return (
+                    <div key={e.id}>
                         <Img
                             $selected={e.selected}
                             draggable="false"
@@ -88,19 +92,30 @@ export function PaperView({ handler, settings }: CanvasHandlerProps & { settings
                             height={height}
                         />
                         <SvgRenderer x={x} y={y} width={width} height={height} svg={e.svg} />
-                {e.selected ?
+                        {e.selected ? (
-                    <FreeTransform scale={settings.scale} transform={{
+                            <FreeTransform
+                                scale={settings.scale}
+                                transform={{
                                     x: x,
                                     y: y,
                                     height,
                                     width,
-                        rotation: 0
+                                    rotation: 0,
-                    }} onTransformChange={({ x, y, width }) => {
+                                }}
-                        const scale = Math.round(width / e.image.width / settings.scale * 100) / 100;
+                                onTransformChange={({ x, y, width }) => {
-                        e.onPropsChange({ x: Math.round(x / settings.scale), y: Math.round(y / settings.scale), scale });
+                                    const scale = Math.round((width / e.image.width / settings.scale) * 100) / 100;
-                    }} /> : null}
+                                    e.onPropsChange({
-            </div>;
+                                        x: Math.round(x / settings.scale),
+                                        y: Math.round(y / settings.scale),
+                                        scale,
+                                    });
+                                }}
+                            />
+                        ) : null}
+                    </div>
+                );
             })}
             {renderGuides()}
-    </CanvasEl>;
+        </CanvasEl>
+    );
 }

src/components/image-tools/selection-box.tsx

@@ -105,18 +105,14 @@ export type FreeTransformProps = {
     onTransformChange: (t: Transform) => void;
 };
 
-export function FreeTransform({
+export function FreeTransform({ transform, scale = 1, onTransformChange }: FreeTransformProps) {
-    transform,
-    scale = 1,
-    onTransformChange,
-}: FreeTransformProps) {
     const dragRef = useRef<DragState>({ type: "none" });
 
     const apply = useCallback(
         (updater: (prev: Transform) => Transform) => {
             onTransformChange(updater(transform));
         },
-        [transform, onTransformChange]
+        [transform, onTransformChange],
     );
 
     const onMovePointerDown = useCallback(
@@ -131,7 +127,7 @@ export function FreeTransform({
                 originY: transform.y,
             };
         },
-        [transform.x, transform.y]
+        [transform.x, transform.y],
     );
 
     const onResizePointerDown = useCallback(
@@ -146,7 +142,7 @@ export function FreeTransform({
                 originTransform: { ...transform },
             };
         },
-        [transform]
+        [transform],
     );
 
     // const onRotatePointerDown = useCallback(
@@ -184,8 +180,7 @@ export function FreeTransform({
             }
 
             if (drag.type === "rotate") {
-                const currentAngle =
+                const currentAngle = Math.atan2(e.clientY - drag.cy, e.clientX - drag.cx) * (180 / Math.PI);
-                    Math.atan2(e.clientY - drag.cy, e.clientX - drag.cx) * (180 / Math.PI);
                 apply(() => ({
                     ...transform,
                     rotation: drag.originRotation + (currentAngle - drag.startAngle),
@@ -218,7 +213,7 @@ export function FreeTransform({
                 apply(() => ({ ...transform, x, y, width, height }));
             }
         },
-        [transform, scale, apply]
+        [transform, scale, apply],
     );
 
     const onPointerUp = useCallback(() => {
@@ -235,7 +230,7 @@ export function FreeTransform({
                     top: `${y}px`,
                     width: `${width}px`,
                     height: `${height}px`,
-                    transform: `rotate(${rotation}deg)`
+                    transform: `rotate(${rotation}deg)`,
                 }}
                 onPointerDown={onMovePointerDown}
                 onPointerMove={onPointerMove}
@@ -266,4 +261,4 @@ export function FreeTransform({
             </TransformBox>
         </Overlay>
     );
-};
+}

src/components/image-tools/svg-view.tsx

@@ -1,4 +1,3 @@
-
 import styled from "styled-components";
 
 const Wrapper = styled.div`
@@ -6,7 +5,6 @@ const Wrapper = styled.div`
     display: inline-block;
     line-height: 0;
 
-
     svg {
         width: 100%;
         height: 100%;
@@ -20,19 +18,20 @@ type Props = {
     y: number;
     width: number;
     height: number;
-}
+};
-
 
 export function SvgRenderer(props: Props) {
     const { svg, x, y, width, height } = props;
 
     return (
-        <Wrapper style={{
+        <Wrapper
+            style={{
                 left: x,
                 top: y,
                 width,
-            height
+                height,
-        }} dangerouslySetInnerHTML={{ __html: svg }}
+            }}
+            dangerouslySetInnerHTML={{ __html: svg }}
         />
     );
 }

src/components/info-bar.tsx

@@ -30,7 +30,7 @@ export function InfoBar({ handler }: CanvasHandlerProps) {
     const [projectName, setProjectName] = useState(handler.projectName);
 
     useEffect(() => {
-        return handler.emitter.on("name", name => {
+        return handler.emitter.on("name", (name) => {
             setProjectName(name);
         });
     }, [handler.projectName]);
@@ -81,9 +81,13 @@ export function InfoBar({ handler }: CanvasHandlerProps) {
                 <FaPlus />
             </Icon2525>
             <ProjectName>
-                <span onClick={() => {
+                <span
+                    onClick={() => {
                         handler.promptSetName();
-                }}> {projectName}
+                    }}
+                >
+                    {" "}
+                    {projectName}
                 </span>
             </ProjectName>
             <Icon2525 onClick={() => setDPI(false)}>

src/components/layer-item.tsx

@@ -31,7 +31,7 @@ const Icon = styled.span`
 export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
     const selectLayer = (image: ImageEditor, ctrl: boolean) => {
         if (!ctrl) {
-            const selected = handler.selected.filter(e => e !== image.id);
+            const selected = handler.selected.filter((e) => e !== image.id);
             for (const sel of selected) {
                 handler.setSelect(sel, false);
             }
@@ -41,7 +41,7 @@ export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
     return (
         <Item
             $selected={image.selected}
-            onClick={ev => {
+            onClick={(ev) => {
                 ev.stopPropagation();
                 ev.preventDefault();
                 selectLayer(image, ev.ctrlKey);
@@ -49,7 +49,7 @@ export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
         >
             <Icon
                 style={{ opacity: image.visible ? 1 : 0.1 }}
-                onClick={ev => {
+                onClick={(ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     image.setVisible(!image.visible);
@@ -60,7 +60,7 @@ export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
 
             <Img
                 draggable="false"
-                onClick={ev => {
+                onClick={(ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     selectLayer(image, ev.ctrlKey);
@@ -71,7 +71,7 @@ export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
             <NamePlate image={image} />
             <Icon
                 style={{ opacity: image.locked ? 1 : 0.1 }}
-                onClick={ev => {
+                onClick={(ev) => {
                     ev.stopPropagation();
                     ev.preventDefault();
                     image.setLock(!image.locked);

src/components/layer-name.tsx

@@ -44,13 +44,17 @@ export function NamePlate({ image }: ImageEditorProps) {
                     }}
                 />
             ) : (
-                <span onDoubleClick={ev => {
+                <span
+                    onDoubleClick={(ev) => {
                         if (!image.locked) {
                             ev.stopPropagation();
                             ev.preventDefault();
                             setEditing(true);
                         }
-                }}>{image.name}</span>
+                    }}
+                >
+                    {image.name}
+                </span>
             )}
         </NamePlateDiv>
     );

src/components/layer-panel.tsx

@@ -22,15 +22,12 @@ const Version = styled.span`
     margin: 0 5px;
 `;
 
-
 const ToolBar = styled.div`
     display: flex;
     flex-direction: row;
     border-top: 1px solid var(--secondary-color);
 `;
 
-
-
 const Wrapper = styled.div`
     width: 200px;
     padding: 24px;
@@ -62,7 +59,7 @@ const Value = styled.div`
 `;
 
 const Link = styled.a`
-    color: #4AF626;
+    color: #4af626;
     text-decoration: none;
 
     &:hover {
@@ -80,9 +77,12 @@ export function LayerPanel({ handler }: CanvasHandlerProps) {
             ))}
             <Gap />
             <ToolBar>
-
+                <Version
-                <Version onDoubleClick={() => {
+                    onDoubleClick={() => {
-                    handler.popup.custom("About", "", <Wrapper>
+                        handler.popup.custom(
+                            "About",
+                            "",
+                            <Wrapper>
                                 <Title>Vectrace {handler.VERSION}v</Title>
 
                                 <Row>
@@ -90,7 +90,6 @@ export function LayerPanel({ handler }: CanvasHandlerProps) {
                                     <Value>{handler.AUTHOR.name}</Value>
                                 </Row>
 
-
                                 <Row>
                                     <Label>Email</Label>
                                     <Value>{handler.AUTHOR.email}</Value>
@@ -104,10 +103,11 @@ export function LayerPanel({ handler }: CanvasHandlerProps) {
                                         </Link>
                                     </Value>
                                 </Row>
-                    </Wrapper>);
+                            </Wrapper>,
-                }}>
+                        );
+                    }}
+                >
                     {handler.VERSION}v
-
                 </Version>
                 <Gap />
                 <Icon2525

src/components/number-input.tsx

@@ -6,36 +6,19 @@ const StyledInput = styled.input<{ $isValid: boolean | null }>`
     padding: 1px;
     font-size: 1rem;
     width: 80px;
-  border: 1px solid
+    border: 1px solid ${({ $isValid }) => ($isValid === null ? "#888" : $isValid ? "#ffffff" : "#ef4444")};
-    ${({ $isValid }) =>
-        $isValid === null
-            ? "#888"
-            : $isValid
-                ? "#ffffff"
-                : "#ef4444"};
     outline: none;
-  background-color: ${({ $isValid }) =>
+    background-color: ${({ $isValid }) => ($isValid === null ? "transparent" : $isValid ? "#000000" : "#7e0000")};
-        $isValid === null
+    color: ${({ $isValid }) => ($isValid === null ? "inherit" : $isValid ? "#15803d" : "#b91c1c")};
-            ? "transparent"
+    transition:
-            : $isValid
+        border-color 0.2s ease,
-                ? "#000000"
+        background-color 0.2s ease;
-                : "#7e0000"};
-  color: ${({ $isValid }) =>
-        $isValid === null ? "inherit" : $isValid ? "#15803d" : "#b91c1c"};
-  transition: border-color 0.2s ease, background-color 0.2s ease;
 
     &:focus {
-    box-shadow: 0 0 0 3px
+        box-shadow: 0 0 0 3px ${({ $isValid }) => ($isValid === null ? "#88888844" : $isValid ? "#22c55e44" : "#ef444444")};
-      ${({ $isValid }) =>
-        $isValid === null
-            ? "#88888844"
-            : $isValid
-                ? "#22c55e44"
-                : "#ef444444"};
     }
 `;
 
-
 export interface NumberInputProps {
     value?: number;
     id?: string;
@@ -43,18 +26,9 @@ export interface NumberInputProps {
     placeholder?: string;
 }
 
-
+export function NumberInput({ value, onChange, id, placeholder = "Enter a number..." }: NumberInputProps) {
-export function NumberInput({
+    const [raw, setRaw] = useState<string>(() => (value !== undefined ? String(value) : ""));
-    value,
+    const [isValid, setIsValid] = useState<boolean | null>(value !== undefined ? true : null);
-    onChange,
-    id,
-    placeholder = "Enter a number...",
-}: NumberInputProps) {
-    const [raw, setRaw] = useState<string>(() => value !== undefined ? String(value) : ""
-    );
-    const [isValid, setIsValid] = useState<boolean | null>(
-        value !== undefined ? true : null
-    );
 
     const isValidNumber = (val: string): boolean => {
         if (val.trim() === "") return false;
@@ -68,7 +42,6 @@ export function NumberInput({
         setRaw(val);
 
         if (val.trim() === "") {
-
             setIsValid(null);
             return;
         }
@@ -88,7 +61,6 @@ export function NumberInput({
         }
     };
 
-
     const executeEvaluate = () => {
         if (canEvaluateMathExpression(raw)) {
             const value = calculateMathExpression(raw);
@@ -116,7 +88,7 @@ export function NumberInput({
             inputMode="numeric"
             value={raw}
             onBlur={executeEvaluate}
-            onKeyUp={ev => {
+            onKeyUp={(ev) => {
                 switch (ev.key) {
                     case "Enter":
                         executeEvaluate();
@@ -139,5 +111,4 @@ export function NumberInput({
             id={id}
         />
     );
-};
+}
-

src/components/numeric-labeld-input.tsx

@@ -5,38 +5,23 @@ const OptionDiv = styled.div`
     margin: 2px;
 `;
 
-export function NumericInputWithLabel({
+export function NumericInputWithLabel({ value, onChange, placeholder, name, id }: NumberInputProps & { name: string }) {
-    value,
+    return (
-    onChange,
+        <OptionDiv>
-    placeholder,
-    name,
-    id
-
-}: NumberInputProps & { name: string }) {
-    return <OptionDiv>
             <label htmlFor={id}>{name}:</label>
             <NumberInput id={id} placeholder={placeholder} value={value} onChange={onChange} />
-    </OptionDiv>;
+        </OptionDiv>
+    );
 }
-export function NumericInputWithLabelTable({
+export function NumericInputWithLabelTable({ value, onChange, placeholder, name, id }: NumberInputProps & { name: string }) {
-    value,
+    return (
-    onChange,
+        <tr>
-    placeholder,
-    name,
-    id
-
-}: NumberInputProps & { name: string }) {
-    return <tr>
             <td>
                 <label htmlFor={id}>{name}:</label>
             </td>
             <td>
-            <NumberInput
+                <NumberInput id={id} placeholder={placeholder} value={value} onChange={onChange} />
-                id={id}
-                placeholder={placeholder}
-                value={value}
-                onChange={onChange} />
-
             </td>
-    </tr>;
+        </tr>
+    );
 }

src/components/paper-guide-selector.tsx

@@ -17,16 +17,20 @@ const Wrapper = styled.div`
     }
 `;
 
-
 export function PaperGuideSelector({ setSettings, settings }: UseSettings) {
-    return <Wrapper>
+    return (
-        {GRID.map((e, i) => <Button
+        <Wrapper>
+            {GRID.map((e, i) => (
+                <Button
                     $active={e === settings.grid}
                     key={i}
                     onClick={() => {
                         setSettings({ grid: e });
                     }}
-        >{e}
+                >
-        </Button>)}
+                    {e}
-    </Wrapper>;
+                </Button>
+            ))}
+        </Wrapper>
+    );
 }

src/components/paper-orentation.tsx

@@ -3,11 +3,13 @@ import { RibbonButton } from "./buttons/button-ribbon";
 import type { UseSettings } from "../use/use-settings";
 
 export function PaperOrientation({ setSettings, settings }: UseSettings) {
-
+    return (
-    return <RibbonButton
+        <RibbonButton
             icon={() => <FaFile style={{ transform: `rotate(${settings.landscape ? "90" : "0"}deg)` }} />}
             onClick={() => {
                 setSettings({ landscape: !settings.landscape });
             }}
-        name={settings.landscape ? "Landscape" : "Portrait"} />;
+            name={settings.landscape ? "Landscape" : "Portrait"}
+        />
+    );
 }

src/components/paper-size-selector.tsx

@@ -1,17 +1,27 @@
 import styled from "styled-components";
 import {
-    A0_HEIGHT, A0_WIDTH,
+    A0_HEIGHT,
-    A1_HEIGHT, A1_WIDTH,
+    A0_WIDTH,
-    A2_HEIGHT, A2_WIDTH,
+    A1_HEIGHT,
-    A3_HEIGHT, A3_WIDTH,
+    A1_WIDTH,
-    A4_HEIGHT, A4_WIDTH,
+    A2_HEIGHT,
-    A5_HEIGHT, A5_WIDTH,
+    A2_WIDTH,
-    A6_HEIGHT, A6_WIDTH,
+    A3_HEIGHT,
-    LETTER_HEIGHT, LETTER_WIDTH,
+    A3_WIDTH,
-    LEGAL_HEIGHT, LEGAL_WIDTH,
+    A4_HEIGHT,
-    TABLOID_HEIGHT, TABLOID_WIDTH,
+    A4_WIDTH,
-    LEDGER_HEIGHT, LEDGER_WIDTH,
+    A5_HEIGHT,
-
+    A5_WIDTH,
+    A6_HEIGHT,
+    A6_WIDTH,
+    LETTER_HEIGHT,
+    LETTER_WIDTH,
+    LEGAL_HEIGHT,
+    LEGAL_WIDTH,
+    TABLOID_HEIGHT,
+    TABLOID_WIDTH,
+    LEDGER_HEIGHT,
+    LEDGER_WIDTH,
 } from "../constants";
 import { Button } from "../styles";
 import type { UseSettings } from "../use/use-settings";
@@ -52,38 +62,44 @@ const papers = [
     createPaper("Ledger", LEDGER_WIDTH, LEDGER_HEIGHT),
 ];
 
-
 export function PaperSizeSelector({ setSettings, settings, popup }: UseSettings & { popup: Popup }) {
-    const custom = papers.find(e => settings.paperWidth === e.width && settings.paperHeight === e.height);
+    const custom = papers.find((e) => settings.paperWidth === e.width && settings.paperHeight === e.height);
-    return <Wrapper>
+    return (
-        {papers.map((e, i) => <Button
+        <Wrapper>
+            {papers.map((e, i) => (
+                <Button
                     $active={settings.paperWidth === e.width && settings.paperHeight === e.height}
                     key={i}
                     onClick={() => {
                         setSettings({ paperWidth: e.width, paperHeight: e.height });
                     }}
-        >{e.name}
+                >
-        </Button>)}
+                    {e.name}
+                </Button>
+            ))}
             <Button
                 $active={!custom}
                 onClick={async () => {
                     const result = await popup.prompt(
                         "Paper size",
                         `Enter paper size like <WIDTH>x<HEIGHT> (${A4_WIDTH}x${A4_HEIGHT})`,
-                    `${settings.paperWidth}x${settings.paperHeight}`
+                        `${settings.paperWidth}x${settings.paperHeight}`,
                     );
                     if (result) {
-                    const [width, height] = result.split("x").map(e => Math.max(parseInt(e, 10), 1));
+                        const [width, height] = result.split("x").map((e) => Math.max(parseInt(e, 10), 1));
                         if (isNaN(width) || isNaN(height)) {
                             popup.alert("Paper size", "Invalid size");
                         } else {
                             setSettings({
                                 paperWidth: width,
-                            paperHeight: height
+                                paperHeight: height,
                             });
                         }
                     }
-            }
+                }}
-            }>Custom</Button>
+            >
-    </Wrapper>;
+                Custom
+            </Button>
+        </Wrapper>
+    );
 }

src/components/svg-tracer-options.tsx

@@ -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,7 +65,8 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
         setUpdated(false);
     };
 
-    return <WrapperRow>
+    return (
+        <WrapperRow>
             <VerticalSlider
                 max={255}
                 min={0}
@@ -76,7 +75,8 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
                     const value = await handler.popup.prompt(
                         "Transparency threshold",
                         "Enter transparency threshold between 0-255",
-                    (options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT).toString());
+                        (options.transparencyThreshold ?? TRANSPARENCY_THRESHOLD_DEFAULT).toString(),
+                    );
                     if (value) {
                         const int = parseInt(value, 10);
                         if (!isNaN(int)) {
@@ -84,39 +84,49 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
                         }
                     }
                 }}
-            onChange={value => {
+                onChange={(value) => {
                     setValue("transparencyThreshold", value);
-            }} />
+                }}
+            />
             <WrapperColumn>
-            <Button $active={!updated} title="Draw" onClick={() => { redraw(); }}><FaBezierCurve /></Button>
+                <Button
+                    $active={!updated}
+                    title="Draw"
+                    onClick={() => {
+                        redraw();
+                    }}
+                >
+                    <FaBezierCurve />
+                </Button>
                 <WrapperRow>
                     <Table>
                         <tbody>
                             <NumericInputWithLabelTable
                                 name="Ltres"
                                 value={options.ltres}
-                            onChange={value => setValue("ltres", value)}
+                                onChange={(value) => setValue("ltres", value)}
                             />
                             <NumericInputWithLabelTable
                                 name="Qtres"
                                 value={options.qtres}
-                            onChange={value => setValue("qtres", value)}
+                                onChange={(value) => setValue("qtres", value)}
                             />
                             <NumericInputWithLabelTable
                                 name="Path omit"
                                 value={options.pathomit}
-                            onChange={value => setValue("pathomit", value)}
+                                onChange={(value) => setValue("pathomit", value)}
                             />
                             <NumericInputWithLabelTable
                                 name="Round corners"
                                 value={options.roundcoords}
-                            onChange={value => setValue("roundcoords", value)}
+                                onChange={(value) => setValue("roundcoords", value)}
                             />
                         </tbody>
                     </Table>
                     <LayerPanel>
                         {(options.allowedPaths || []).map((e, i) => {
-                        return <ToggleButton
+                            return (
+                                <ToggleButton
                                     key={i}
                                     $enabled={e}
                                     onClick={() => {
@@ -126,10 +136,12 @@ export function SvgTracerOptions({ selected, handler }: { selected: ImageEditor[
                                     }}
                                 >
                                     {`${i + 1} Layer`}
-                        </ToggleButton>;
+                                </ToggleButton>
+                            );
                         })}
                     </LayerPanel>
-
                 </WrapperRow>
-        </WrapperColumn></WrapperRow>;
+            </WrapperColumn>
+        </WrapperRow>
+    );
 }

src/components/vertical-slider.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-
 const SliderWrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -20,7 +19,6 @@ interface SliderProps {
     onChange?: (value: number) => void;
 }
 
-
 interface TrackTransientProps {
     $fillPercent: number;
 }
@@ -52,7 +50,9 @@ const Track = styled.input.attrs({ type: "range" }) <TrackTransientProps>`
         border: 3px solid var(--secondary-color);
         box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
         cursor: grab;
-    transition: transform 0.1s ease, box-shadow 0.1s ease;
+        transition:
+            transform 0.1s ease,
+            box-shadow 0.1s ease;
 
         &:active {
             cursor: grabbing;
@@ -82,7 +82,6 @@ const Track = styled.input.attrs({ type: "range" }) <TrackTransientProps>`
     }
 `;
 
-
 const ValueLabel = styled.span`
     font-size: 13px;
     color: white;
@@ -98,17 +97,8 @@ interface SliderProps {
     onChange?: (value: number) => void;
 }
 
-export function VerticalSlider({
+export function VerticalSlider({ min = 0, max = 100, step = 1, onLabelClick, value: controlledValue, onChange }: SliderProps) {
-    min = 0,
+    const [internalValue, setInternalValue] = useState(controlledValue ?? Math.floor((max - min) / 2));
-    max = 100,
-    step = 1,
-    onLabelClick,
-    value: controlledValue,
-    onChange,
-}: SliderProps) {
-    const [internalValue, setInternalValue] = useState(
-        controlledValue ?? Math.floor((max - min) / 2)
-    );
 
     const value = controlledValue ?? internalValue;
     const fillPercent = ((value - min) / (max - min)) * 100;
@@ -121,17 +111,14 @@ export function VerticalSlider({
 
     return (
         <SliderWrapper>
-            <ValueLabel onDoubleClick={() => {
+            <ValueLabel
+                onDoubleClick={() => {
                     onLabelClick?.();
-            }}>{value}</ValueLabel>
+                }}
-            <Track
+            >
-                min={min}
+                {value}
-                max={max}
+            </ValueLabel>
-                step={step}
+            <Track min={min} max={max} step={step} value={value} $fillPercent={fillPercent} onChange={handleChange} />
-                value={value}
-                $fillPercent={fillPercent}
-                onChange={handleChange}
-            />
         </SliderWrapper>
     );
-};
+}