Skip to content

Commit

Permalink
FeaturePanel: Add support for multiple directions values (#864)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dlurak authored Jan 3, 2025
1 parent fa75033 commit 6138132
Showing 1 changed file with 19 additions and 13 deletions.
32 changes: 19 additions & 13 deletions src/components/FeaturePanel/Properties/Direction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -167,20 +167,24 @@ const DirectionIndicator = ({ start, end }: { start: number; end: number }) => {
return <canvas ref={canvas} width="30" height="30" />;
};

type IndicatorProps = {
start: number;
end?: number;
};

const Indicator = ({ start, end }: IndicatorProps) => {
if (end === undefined) {
return <ArrowUpward style={{ transform: `rotate(${start}deg)` }} />;
}

return <DirectionIndicator start={start} end={end} />;
};

export const DirectionValue: React.FC<{ v: string }> = ({ children, v }) => {
try {
const [start, end] = v.split('-', 2).map(parseCardinal);

const indicator =
end === undefined ? (
<ArrowUpward
style={{
transform: `rotate(${start}deg)`,
}}
/>
) : (
<DirectionIndicator start={start} end={end} />
);
const directions = v
.split(';')
.map((d) => d.split('-', 2).map(parseCardinal));

return (
<span
Expand All @@ -190,7 +194,9 @@ export const DirectionValue: React.FC<{ v: string }> = ({ children, v }) => {
gap: '0.5rem',
}}
>
{indicator}
{directions.map(([start, end]) => (
<Indicator start={start} end={end} key={`${start}-${end}`} />
))}
{children}
</span>
);
Expand Down

0 comments on commit 6138132

Please sign in to comment.