115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { styled } from "styled-components";
|
|
import type { CanvasHandlerProps } from "../handler/interfaces";
|
|
import { Icon2525 } from "../styles";
|
|
import { FaMinus, FaPlus } from "react-icons/fa6";
|
|
import { useSettings } from "../use/use-settings";
|
|
import { clamp } from "lodash";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: var(--primary-color);
|
|
border-top: 1px solid var(--secondary-color);
|
|
`;
|
|
|
|
const ScaleText = styled.span`
|
|
width: 50px;
|
|
margin-top: 4px;
|
|
text-align: center;
|
|
`;
|
|
|
|
const ProjectName = styled.span`
|
|
margin: auto;
|
|
`;
|
|
|
|
const DPI = [72, 96, 150, 300, 600];
|
|
|
|
export function InfoBar({ handler }: CanvasHandlerProps) {
|
|
const { settings, setSettings } = useSettings(handler);
|
|
const [projectName, setProjectName] = useState(handler.projectName);
|
|
|
|
useEffect(() => {
|
|
return handler.emitter.on("name", (name) => {
|
|
setProjectName(name);
|
|
});
|
|
}, [handler.projectName]);
|
|
|
|
const setScale = (increment: boolean) => {
|
|
const amount = 0.05;
|
|
setSettings({ scale: settings.scale + (increment ? amount : -amount) });
|
|
};
|
|
const setDPI = (increment: boolean) => {
|
|
let index = DPI.indexOf(settings.DPI);
|
|
|
|
if (index === -1) {
|
|
index = DPI.reduce((bestIdx, value, i) => {
|
|
const bestDiff = Math.abs(DPI[bestIdx] - settings.DPI);
|
|
const currentDiff = Math.abs(value - settings.DPI);
|
|
return currentDiff < bestDiff ? i : bestIdx;
|
|
}, 0);
|
|
}
|
|
|
|
if (increment) {
|
|
if (index + 1 < DPI.length) index++;
|
|
} else {
|
|
if (index - 1 >= 0) index--;
|
|
}
|
|
|
|
setSettings({ DPI: DPI[index] });
|
|
};
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Icon2525 onClick={() => setScale(false)}>
|
|
<FaMinus />
|
|
</Icon2525>
|
|
<ScaleText
|
|
onClick={async () => {
|
|
const number = await handler.popup.prompt("DPI", "Enter your desired DPI", (settings.scale * 100).toString());
|
|
if (number) {
|
|
const int = parseInt(number, 10) / 100;
|
|
if (!isNaN(int)) {
|
|
setSettings({ scale: clamp(int, 0, 100) });
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{Math.round(settings.scale * 100)}%
|
|
</ScaleText>
|
|
<Icon2525 onClick={() => setScale(true)}>
|
|
<FaPlus />
|
|
</Icon2525>
|
|
<ProjectName>
|
|
<span
|
|
onClick={() => {
|
|
handler.promptSetName();
|
|
}}
|
|
>
|
|
{" "}
|
|
{projectName}
|
|
</span>
|
|
</ProjectName>
|
|
<Icon2525 onClick={() => setDPI(false)}>
|
|
<FaMinus />
|
|
</Icon2525>
|
|
<ScaleText
|
|
onClick={async () => {
|
|
const number = await handler.popup.prompt("DPI", "Enter your desired DPI", settings.DPI.toString());
|
|
if (number) {
|
|
const int = parseInt(number, 10);
|
|
if (!isNaN(int)) {
|
|
setSettings({ DPI: clamp(int, DPI[0], DPI[DPI.length - 1]) });
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{Math.round(settings.DPI)}DPI
|
|
</ScaleText>
|
|
<Icon2525 onClick={() => setDPI(true)}>
|
|
<FaPlus />
|
|
</Icon2525>
|
|
</Wrapper>
|
|
);
|
|
}
|