Inital commit

2026-06-29 09:40:34 +02:00
commit 3ee804a543
68 changed files with 10924 additions and 0 deletions
@@ -0,0 +1,116 @@
+import styled from "styled-components";
+import type { CanvasHandlerProps } from "./handler/interfaces";
+import { useImages } from "./use/use-images";
+import { NumericInputWithLabelTable } from "./components/numeric-labeld-input";
+import { SvgTracerOptions } from "./components/svg-tracer-options";
+import { PaperSizeSelector } from "./components/paper-size-selector";
+import { useSettings } from "./use/use-settings";
+import { PaperOrientation } from "./components/paper-orentation";
+import { PaperGuideSelector } from "./components/paper-guide-selector";
+import { ImportExportButtons } from "./components/download-buttons";
+
+
+const Bar = styled.div`
+    width: 100%;
+    overflow: auto;
+    height: 110px;
+    background-color: var(--primary-color);
+    display: flex;
+    flex-direction: row;
+`;
+
+const ImageBox = styled.table`
+    margin: 2px;
+    padding-right: 4px;
+`;
+
+const SvgOption = styled.table`
+    margin: 2px;
+    padding-right: 4px;
+`;
+const Line = styled.div`
+    margin: 4px;
+    height: calc(100% - 8px);
+    border-right: 1px solid white;
+`;
+
+
+
+type NumericKeys<T> = {
+    [K in keyof T]: T[K] extends number ? K : never
+}[keyof T]
+
+function getNumericValue<T>(selected: T[], key: NumericKeys<T>): number {
+    const disabled = selected.length === 0;
+    const isMixed = selected.length > 1;
+
+    return disabled
+        ? 0
+        : isMixed
+            ? selected.reduce((acc, e) => acc + (e[key] as number), 0) / selected.length
+            : (selected[0][key] as number);
+}
+
+export function NavBar({ handler }: CanvasHandlerProps) {
+    const { selected } = useImages(handler);
+    const { settings, setSettings } = useSettings(handler);
+
+    const setValue = (key: string, value: any) => {
+        selected.forEach((e) => {
+            e.onPropsChange({
+                [key]: value
+            });
+        });
+    };
+    const style: React.CSSProperties = {
+        opacity: selected.length ? 1 : 0.2,
+        pointerEvents: selected.length ? "all" : "none"
+    };
+
+    return (
+        <Bar>
+            <PaperSizeSelector settings={settings} setSettings={setSettings} popup={handler.popup} />
+            <PaperOrientation settings={settings} setSettings={setSettings} />
+            <PaperGuideSelector settings={settings} setSettings={setSettings} />
+            <ImageBox style={style}>
+                <tbody>
+                    <NumericInputWithLabelTable
+                        name="Size"
+                        value={getNumericValue(selected, "scale")}
+                        onChange={value => setValue("scale", value)}
+                    />
+                    <NumericInputWithLabelTable
+                        name="X"
+                        value={getNumericValue(selected, "x")}
+                        onChange={value => setValue("x", value)}
+                    />
+                    <NumericInputWithLabelTable
+                        name="Y"
+                        value={getNumericValue(selected, "y")}
+                        onChange={value => setValue("y", value)}
+                    />
+                </tbody>
+            </ImageBox>
+            <SvgOption style={style}>
+                <SvgTracerOptions selected={selected} />
+            </SvgOption>
+            <Line />
+            <ImportExportButtons handler={handler} selected={selected} />
+            {/* <RibbonButton icon={() => <FaTrash />} name="Delete" onClick={async () => {
+                if (await handler.popup.confirm("Delete project", "Are you sure you want to delete this project?")) {
+                    handler.clear();
+                    handler.promptSetName();
+                }
+            }} />
+            <RibbonButton icon={() => <FaDownload />} name="Export" onClick={async () => {
+                handler.exportProject();
+            }} />
+
+            <RibbonButton icon={() => <FaFileImport />} name="Import" onClick={async () => {
+                handler.importProject();
+            }} /> */}
+
+
+        </Bar>
+    );
+}