Inital commit

2026-06-29 09:40:34 +02:00
commit 3ee804a543
68 changed files with 10924 additions and 0 deletions
@@ -0,0 +1,110 @@
+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>
+    );
+}