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>Vectorbewerkingen</h3>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Begrenzen tot gebied</h4>
|
|
<p className="dataset-tool-helper">Beperk objecten tot het gekozen werkgebied.</p>
|
|
<div className="dataset-tool-grid">
|
|
<label className="dataset-tool-field">
|
|
<span className="dataset-tool-label">Werkgebied</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}>
|
|
Begrenzen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Invloedszone</h4>
|
|
<p className="dataset-tool-helper">Maak een zone van 25 meter rond ieder object.</p>
|
|
<div className="dataset-tool-action-row">
|
|
<button type="button" onClick={onRunVectorBuffer}>
|
|
Zone van 25 m maken
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="dataset-tool-group">
|
|
<h4 className="dataset-tool-heading">Lagen doorsnijden</h4>
|
|
<p className="dataset-tool-helper">Bereken de overlap met een andere bewaarde vectorlaag.</p>
|
|
<div className="dataset-tool-grid">
|
|
<label className="dataset-tool-field">
|
|
<span className="dataset-tool-label">Tweede kaartlaag</span>
|
|
<select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>
|
|
<option value="">Automatisch de eerste geschikte laag</option>
|
|
{availableVectorTargets.map((target) => (
|
|
<option key={target.id} value={target.id}>
|
|
{target.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className="dataset-tool-helper">Laat automatisch staan om de eerste beschikbare vectorlaag te gebruiken.</span>
|
|
</label>
|
|
</div>
|
|
<div className="dataset-tool-action-row">
|
|
<button type="button" onClick={onRunVectorIntersect}>
|
|
Overlap berekenen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|