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/a4-canvas.tsx
+5 -9
View File
@@ -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.offsetY = (container.offsetHeight - (settings.landscape ? settings.paperWidth : settings.paperHeight) * settings.scale) / 2;
panRef.current.offsetX =
(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
+77 -24
View File
@@ -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 onClick={() => { downloadZip(handler); }}>
<FaFileZipper />ZIP
<Btn
onClick={() => {
downloadZip(handler);
}}
>
<FaFileZipper />
ZIP
</Btn>
<Btn onClick={() => { createPdf(handler, true).save(`${handler.projectName}.pdf`); }}>
<FaFilePdf />PDF
<Btn
onClick={() => {
createPdf(handler, true).save(`${handler.projectName}.pdf`);
}}
>
<FaFilePdf />
PDF
</Btn>
<Btn onClick={async () => { downloadBlob(await createSVGDoc(handler), `${handler.projectName}.svg`); }} >
<FaDrawPolygon />SVG
<Btn
onClick={async () => {
downloadBlob(await createSVGDoc(handler), `${handler.projectName}.svg`);
}}
>
<FaDrawPolygon />
SVG
</Btn>
</Row>
<Row>
<Btn disabled={selected.length !== 1} onClick={() => {
const v = handler.imagesRenders.find(e => e.id === selected[0].id);
<Btn
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 onClick={() => { handler.importProject(); }} ><FaFileImport />Import</Btn>
<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
+37 -22
View File
@@ -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 height = Math.round(((settings.landscape ? settings.paperWidth : settings.paperHeight) / MM_TO_INCH) * dpi) * settings.scale;
const width =
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}>
{images.map(e => {
return (
<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 ?
<FreeTransform scale={settings.scale} transform={{
{e.selected ? (
<FreeTransform
scale={settings.scale}
transform={{
x: x,
y: y,
height,
width,
rotation: 0
}} onTransformChange={({ x, y, width }) => {
const scale = Math.round(width / e.image.width / settings.scale * 100) / 100;
e.onPropsChange({ x: Math.round(x / settings.scale), y: Math.round(y / settings.scale), scale });
}} /> : null}
</div>;
rotation: 0,
}}
onTransformChange={({ x, y, width }) => {
const scale = Math.round((width / e.image.width / settings.scale) * 100) / 100;
e.onPropsChange({
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
+8 -13
View File
@@ -105,18 +105,14 @@ export type FreeTransformProps = {
onTransformChange: (t: Transform) => void;
};
export function FreeTransform({
transform,
scale = 1,
onTransformChange,
}: FreeTransformProps) {
export function FreeTransform({ 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 =
Math.atan2(e.clientY - drag.cy, e.clientX - drag.cx) * (180 / Math.PI);
const currentAngle = 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
+6 -7
View File
@@ -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
}} dangerouslySetInnerHTML={{ __html: svg }}
height,
}}
dangerouslySetInnerHTML={{ __html: svg }}
/>
);
}
src/components/info-bar.tsx
+7 -3
View File
@@ -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
+5 -5
View File
@@ -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
+6 -2
View File
@@ -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
+11 -11
View File
@@ -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 onDoubleClick={() => {
handler.popup.custom("About", "", <Wrapper>
<Version
onDoubleClick={() => {
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
+12 -41
View File
@@ -6,36 +6,19 @@ const StyledInput = styled.input<{ $isValid: boolean | null }>`
padding: 1px;
font-size: 1rem;
width: 80px;
border: 1px solid
${({ $isValid }) =>
$isValid === null
? "#888"
: $isValid
? "#ffffff"
: "#ef4444"};
border: 1px solid ${({ $isValid }) => ($isValid === null ? "#888" : $isValid ? "#ffffff" : "#ef4444")};
outline: none;
background-color: ${({ $isValid }) =>
$isValid === null
? "transparent"
: $isValid
? "#000000"
: "#7e0000"};
color: ${({ $isValid }) =>
$isValid === null ? "inherit" : $isValid ? "#15803d" : "#b91c1c"};
transition: border-color 0.2s ease, background-color 0.2s ease;
background-color: ${({ $isValid }) => ($isValid === null ? "transparent" : $isValid ? "#000000" : "#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
${({ $isValid }) =>
$isValid === null
? "#88888844"
: $isValid
? "#22c55e44"
: "#ef444444"};
box-shadow: 0 0 0 3px ${({ $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) {
const [raw, setRaw] = useState<string>(() => value !== undefined ? String(value) : ""
);
const [isValid, setIsValid] = useState<boolean | null>(
value !== undefined ? true : null
);
export function NumberInput({ value, 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
+11 -26
View File
@@ -5,38 +5,23 @@ const OptionDiv = styled.div`
margin: 2px;
`;
export function NumericInputWithLabel({
value,
onChange,
placeholder,
name,
id
}: NumberInputProps & { name: string }) {
return <OptionDiv>
export function NumericInputWithLabel({ value, onChange, 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({
value,
onChange,
placeholder,
name,
id
}: NumberInputProps & { name: string }) {
return <tr>
export function NumericInputWithLabelTable({ value, onChange, placeholder, name, id }: NumberInputProps & { name: string }) {
return (
<tr>
<td>
<label htmlFor={id}>{name}:</label>
</td>
<td>
<NumberInput
id={id}
placeholder={placeholder}
value={value}
onChange={onChange} />
<NumberInput id={id} placeholder={placeholder} value={value} onChange={onChange} />
</td>
</tr>;
</tr>
);
}
src/components/paper-guide-selector.tsx
+10 -6
View File
@@ -17,16 +17,20 @@ const Wrapper = styled.div`
}
`;
export function PaperGuideSelector({ setSettings, settings }: UseSettings) {
return <Wrapper>
{GRID.map((e, i) => <Button
return (
<Wrapper>
{GRID.map((e, i) => (
<Button
$active={e === settings.grid}
key={i}
onClick={() => {
setSettings({ grid: e });
}}
>{e}
</Button>)}
</Wrapper>;
>
{e}
</Button>
))}
</Wrapper>
);
}
src/components/paper-orentation.tsx
+5 -3
View File
@@ -3,11 +3,13 @@ import { RibbonButton } from "./buttons/button-ribbon";
import type { UseSettings } from "../use/use-settings";
export function PaperOrientation({ setSettings, settings }: UseSettings) {
return <RibbonButton
return (
<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
+40 -24
View File
@@ -1,17 +1,27 @@
import styled from "styled-components";
import {
A0_HEIGHT, A0_WIDTH,
A1_HEIGHT, A1_WIDTH,
A2_HEIGHT, A2_WIDTH,
A3_HEIGHT, A3_WIDTH,
A4_HEIGHT, A4_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,
A0_HEIGHT,
A0_WIDTH,
A1_HEIGHT,
A1_WIDTH,
A2_HEIGHT,
A2_WIDTH,
A3_HEIGHT,
A3_WIDTH,
A4_HEIGHT,
A4_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);
return <Wrapper>
{papers.map((e, i) => <Button
const custom = papers.find((e) => settings.paperWidth === e.width && settings.paperHeight === e.height);
return (
<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
+34 -22
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,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 >
</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
+14 -27
View File
@@ -1,7 +1,6 @@
import React, { useState } from "react";
import styled from "styled-components";
const SliderWrapper = styled.div`
display: flex;
flex-direction: column;
@@ -20,12 +19,11 @@ interface SliderProps {
onChange?: (value: number) => void;
}
interface TrackTransientProps {
$fillPercent: number;
}
const Track = styled.input.attrs({ type: "range" }) <TrackTransientProps>`
const Track = styled.input.attrs({ type: "range" })<TrackTransientProps>`
appearance: none;
-webkit-appearance: none;
writing-mode: vertical-lr;
@@ -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({
min = 0,
max = 100,
step = 1,
onLabelClick,
value: controlledValue,
onChange,
}: SliderProps) {
const [internalValue, setInternalValue] = useState(
controlledValue ?? Math.floor((max - min) / 2)
);
export function VerticalSlider({ min = 0, 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}
max={max}
step={step}
value={value}
$fillPercent={fillPercent}
onChange={handleChange}
/>
}}
>
{value}
</ValueLabel>
<Track min={min} max={max} step={step} value={value} $fillPercent={fillPercent} onChange={handleChange} />
</SliderWrapper>
);
};
}