85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import type { AreaRead, DatasetCreateResponse } from '../../types'
|
|
|
|
interface VectorControlsProps {
|
|
areas: AreaRead[]
|
|
availableVectorTargets: DatasetCreateResponse[]
|
|
selectedClipAreaId: string
|
|
selectedIntersectTargetId: string
|
|
onSetSelectedClipAreaId: (value: string) => void
|
|
onSetSelectedIntersectTargetId: (value: string) => void
|
|
onRunVectorClip: () => void
|
|
onRunVectorBuffer: () => void
|
|
onRunVectorIntersect: () => void
|
|
}
|
|
|
|
export function VectorControls({
|
|
areas,
|
|
availableVectorTargets,
|
|
selectedClipAreaId,
|
|
selectedIntersectTargetId,
|
|
onSetSelectedClipAreaId,
|
|
onSetSelectedIntersectTargetId,
|
|
onRunVectorClip,
|
|
onRunVectorBuffer,
|
|
onRunVectorIntersect,
|
|
}: VectorControlsProps) {
|
|
return (
|
|
<div className="dataset-tool-panel vector-tool-panel">
|
|
<h3>Vector operations</h3>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Clip vector</h4>
|
|
<p className="dataset-tool-helper">Clip features to the selected project area.</p>
|
|
<div className="dataset-tool-grid">
|
|
<label className="dataset-tool-field">
|
|
<span className="dataset-tool-label">Clip area</span>
|
|
<select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
|
|
{areas.map((area) => (
|
|
<option key={area.id} value={area.id}>
|
|
{area.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div className="dataset-tool-action-row">
|
|
<button type="button" onClick={onRunVectorClip} disabled={areas.length === 0}>
|
|
Run clip
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Buffer vector</h4>
|
|
<p className="dataset-tool-helper">Create a 25m buffer using the existing vector operation defaults.</p>
|
|
<div className="dataset-tool-action-row">
|
|
<button type="button" onClick={onRunVectorBuffer}>
|
|
Run buffer (25m)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Intersect vector</h4>
|
|
<p className="dataset-tool-helper">Intersect with another persisted vector dataset.</p>
|
|
<div className="dataset-tool-grid">
|
|
<label className="dataset-tool-field">
|
|
<span className="dataset-tool-label">Intersect target</span>
|
|
<select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>
|
|
<option value="">auto first vector</option>
|
|
{availableVectorTargets.map((target) => (
|
|
<option key={target.id} value={target.id}>
|
|
{target.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className="dataset-tool-helper">Leave automatic to use the first available vector target.</span>
|
|
</label>
|
|
</div>
|
|
<div className="dataset-tool-action-row">
|
|
<button type="button" onClick={onRunVectorIntersect}>
|
|
Run intersect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|