117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
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: 125px;
|
|
background-color: var(--primary-color);
|
|
display: flex;
|
|
flex-direction: row;
|
|
`;
|
|
|
|
const ImageBox = styled.table`
|
|
margin: 2px;
|
|
padding-right: 4px;
|
|
`;
|
|
|
|
const SvgOption = styled.div`
|
|
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} handler={handler} />
|
|
</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>
|
|
);
|
|
}
|