first commit
This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { ArrowIcon } from "../../../icons/ExportCommonIcons";
|
||||
|
||||
// image imports
|
||||
import Arc from "../../../../assets/image/aisleTypes/Arc.png";
|
||||
import Arrow from "../../../../assets/image/aisleTypes/Arrow.png";
|
||||
import Arrows from "../../../../assets/image/aisleTypes/Arrows.png";
|
||||
import Circle from "../../../../assets/image/aisleTypes/Circle.png";
|
||||
import Dashed from "../../../../assets/image/aisleTypes/Dashed.png";
|
||||
import Directional from "../../../../assets/image/aisleTypes/Directional.png";
|
||||
import Dotted from "../../../../assets/image/aisleTypes/Dotted.png";
|
||||
import Solid from "../../../../assets/image/aisleTypes/Solid.png";
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
|
||||
interface TextureItem {
|
||||
color: string;
|
||||
id: AisleColors;
|
||||
brief: string;
|
||||
texture: string;
|
||||
}
|
||||
|
||||
const AisleProperties: React.FC = () => {
|
||||
const [collapsePresets, setCollapsePresets] = useState(false);
|
||||
const [collapseTexture, setCollapseTexture] = useState(true);
|
||||
|
||||
const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();
|
||||
|
||||
const aisleTextureList: TextureItem[] = [
|
||||
{ color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "gray", id: "gray", brief: "basic", texture: "" },
|
||||
{ color: "green", id: "green", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "orange", id: "orange", brief: "material flow", texture: "" },
|
||||
{ color: "blue", id: "blue", brief: "vehicle paths", texture: "" },
|
||||
{ color: "purple", id: "purple", brief: "material flow", texture: "" },
|
||||
{ color: "red", id: "red", brief: "safety zone", texture: "" },
|
||||
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
|
||||
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
|
||||
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
|
||||
];
|
||||
|
||||
const aisleTypes: {
|
||||
name: string;
|
||||
type: AisleTypes;
|
||||
id: string;
|
||||
thumbnail: string;
|
||||
}[] = [
|
||||
{ name: "Solid", type: "solid-aisle", id: "1", thumbnail: Solid },
|
||||
{ name: "Dotted", type: "dotted-aisle", id: "2", thumbnail: Dotted },
|
||||
{ name: "Dashed", type: "dashed-aisle", id: "3", thumbnail: Dashed },
|
||||
{ name: "Arrow", type: "arrow-aisle", id: "4", thumbnail: Arrow },
|
||||
{ name: "Continuous Arrows", type: "arrows-aisle", id: "5", thumbnail: Arrows },
|
||||
{ name: "Directional", type: "junction-aisle", id: "6", thumbnail: Directional },
|
||||
{ name: "Arc", type: "arc-aisle", id: "7", thumbnail: Arc },
|
||||
{ name: "Circle", type: "circle-aisle", id: "8", thumbnail: Circle },
|
||||
];
|
||||
|
||||
const handleAisleWidthChange = (value: string) => {
|
||||
const width = parseFloat(value);
|
||||
if (!isNaN(width)) {
|
||||
setAisleWidth(width);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDashLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length)) {
|
||||
setDashLength(length);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGapLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length)) {
|
||||
setGapLength(length);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDotRadiusChange = (value: string) => {
|
||||
const radius = parseFloat(value);
|
||||
if (!isNaN(radius)) {
|
||||
setDotRadius(radius);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAisleLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length)) {
|
||||
setAisleLength(length);
|
||||
}
|
||||
};
|
||||
|
||||
const handleIsFlippedChange = () => {
|
||||
setIsFlipped(!aisleIsFlipped)
|
||||
};
|
||||
|
||||
const dashLengthValue = useMemo(() => {
|
||||
return dashLength.toString();
|
||||
}, [aisleType, dashLength]);
|
||||
|
||||
const dotRadiusValue = useMemo(() => {
|
||||
return dotRadius.toString();
|
||||
}, [aisleType, dotRadius]);
|
||||
|
||||
const gapLengthValue = useMemo(() => {
|
||||
return gapLength.toString();
|
||||
}, [aisleType, gapLength]);
|
||||
|
||||
const aisleWidthValue = useMemo(() => {
|
||||
return aisleWidth.toString();
|
||||
}, [aisleType, aisleWidth]);
|
||||
|
||||
const aisleLengthValue = useMemo(() => {
|
||||
return aisleLength.toString();
|
||||
}, [aisleType, aisleLength]);
|
||||
|
||||
const aisleIsFlipped = useMemo(() => {
|
||||
return isFlipped;
|
||||
}, [aisleType, isFlipped]);
|
||||
|
||||
const renderAdvancedProperties = () => {
|
||||
switch (aisleType) {
|
||||
case 'dashed-aisle':
|
||||
return (
|
||||
<>
|
||||
{aisleType &&
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Dash Length"
|
||||
value={`${dashLengthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleDashLengthChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${gapLengthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
case 'dotted-aisle':
|
||||
return (
|
||||
<>
|
||||
{aisleType &&
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Dot Radius"
|
||||
value={`${dotRadiusValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleDotRadiusChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${gapLengthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
case 'arrows-aisle':
|
||||
return (
|
||||
<>
|
||||
{aisleType &&
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Arrow Length"
|
||||
value={`${aisleLengthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleAisleLengthChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${gapLengthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
case 'junction-aisle': case 'arc-aisle':
|
||||
return (
|
||||
<>
|
||||
{aisleType &&
|
||||
<InputToggle
|
||||
inputKey="Flip Ailse"
|
||||
label="Flip Aisle"
|
||||
value={aisleIsFlipped}
|
||||
onClick={handleIsFlippedChange}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="aisle-properties-container">
|
||||
<div className="header">Properties</div>
|
||||
|
||||
{/* Basic Properties */}
|
||||
<section>
|
||||
{aisleType !== 'dotted-aisle' &&
|
||||
<InputWithDropDown
|
||||
label="Aisle Width"
|
||||
value={`${aisleWidthValue}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleAisleWidthChange}
|
||||
/>
|
||||
}
|
||||
{renderAdvancedProperties()}
|
||||
</section>
|
||||
|
||||
{/* Presets */}
|
||||
<section>
|
||||
<button
|
||||
className="header"
|
||||
onClick={() => setCollapsePresets(!collapsePresets)}
|
||||
aria-expanded={!collapsePresets}
|
||||
>
|
||||
<div className="value">Presets</div>
|
||||
<div className="icon">
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
{!collapsePresets && (
|
||||
<div className="presets-list-container">
|
||||
{aisleTypes.map((val) => (
|
||||
<div className="preset-list" key={val.id}>
|
||||
<button
|
||||
className={`thumbnail ${aisleType === val.type ? "selected" : ""}`}
|
||||
title={val.name}
|
||||
onClick={() => setAisleType(val.type)}
|
||||
>
|
||||
<img src={val.thumbnail} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Texture */}
|
||||
<section>
|
||||
<button
|
||||
className="header"
|
||||
onClick={() => setCollapseTexture(!collapseTexture)}
|
||||
aria-expanded={!collapseTexture}
|
||||
>
|
||||
<div className="value">Aisle Texture</div>
|
||||
<div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{collapseTexture && (
|
||||
<div className="aisle-texture-container">
|
||||
{aisleTextureList.map((val) => (
|
||||
<button
|
||||
key={val.id}
|
||||
title={val.brief || val.id}
|
||||
className={`aisle-list ${aisleColor === val.color ? "selected" : ""}`}
|
||||
onClick={() => setAisleColor(val.id)}
|
||||
aria-pressed={aisleColor === val.id}
|
||||
>
|
||||
<div className="texture-display">{val.texture}</div>
|
||||
<div className="aisle-color">{val.color}</div>
|
||||
<div className="aisle-brief">{`( ${val.brief} )`}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AisleProperties;
|
||||
Reference in New Issue
Block a user