86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import styled from "@emotion/styled";
|
|
import { useSharedState } from "../../store/useSharedState";
|
|
import InputField from "../../ui/InputField";
|
|
import { capitalizeFirstLetter } from "../../utils/capitalizeFirstLetter";
|
|
|
|
const StyledPointsContainer = styled("div")({
|
|
display: "grid",
|
|
gridTemplateColumns: "100px 1fr 1fr",
|
|
gap: "0.5rem",
|
|
alignItems: "center",
|
|
});
|
|
|
|
function PhotoPointPosition({ index }) {
|
|
const setSinglePointPosition = useSharedState(
|
|
(state) => state.setSinglePointPosition
|
|
);
|
|
const previewMode = useSharedState((state) => state.previewMode);
|
|
|
|
const posX = useSharedState(
|
|
(state) => state.points[index].positions[previewMode].x
|
|
);
|
|
const posY = useSharedState(
|
|
(state) => state.points[index].positions[previewMode].y
|
|
);
|
|
|
|
const handleChangeNumber = ({
|
|
e,
|
|
brName,
|
|
positionName,
|
|
min = 0,
|
|
max = 100,
|
|
}) => {
|
|
let newValue = Number(e.target.value);
|
|
|
|
if (newValue < min) newValue = min;
|
|
if (newValue > max) newValue = max;
|
|
|
|
setSinglePointPosition(index, brName, positionName, newValue);
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex", gap: "1.5rem", flexDirection: "column" }}>
|
|
<StyledPointsContainer>
|
|
<span>
|
|
{previewMode === "single"
|
|
? "Położenie"
|
|
: capitalizeFirstLetter(previewMode)}
|
|
:
|
|
</span>
|
|
<InputField
|
|
id={`point-${index}-x`}
|
|
type="number"
|
|
name="lewo-prawo"
|
|
value={posX}
|
|
onChange={(e) =>
|
|
handleChangeNumber({
|
|
e,
|
|
brName: previewMode,
|
|
positionName: "x",
|
|
min: 0,
|
|
max: 100,
|
|
})
|
|
}
|
|
/>
|
|
<InputField
|
|
id={`point-${index}-y`}
|
|
type="number"
|
|
name="góra-dół"
|
|
value={posY}
|
|
onChange={(e) =>
|
|
handleChangeNumber({
|
|
e,
|
|
brName: previewMode,
|
|
positionName: "y",
|
|
min: 0,
|
|
max: 100,
|
|
})
|
|
}
|
|
/>
|
|
</StyledPointsContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PhotoPointPosition;
|