mirror of https://github.com/grafana/grafana
Geomap: support multiple layers (#40906)
Ryan McKinley
4 years ago
committed by
GitHub
parent
14225b07b2
commit
45e1765733
@ -0,0 +1,126 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { cx } from '@emotion/css'; |
||||
import { Container, Icon, IconButton, ValuePicker } from '@grafana/ui'; |
||||
import { StandardEditorProps } from '@grafana/data'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; |
||||
|
||||
import { GeomapPanelOptions } from '../types'; |
||||
import { GeomapInstanceState } from '../GeomapPanel'; |
||||
import { geomapLayerRegistry } from '../layers/registry'; |
||||
import { getLayerDragStyles } from '../../canvas/editor/LayerElementListEditor'; |
||||
import { dataLayerFilter } from './layerEditor'; |
||||
|
||||
type Props = StandardEditorProps<any, any, GeomapPanelOptions, GeomapInstanceState>; |
||||
|
||||
export class LayersEditor extends PureComponent<Props> { |
||||
style = getLayerDragStyles(config.theme); |
||||
|
||||
getRowStyle = (sel: boolean) => { |
||||
return sel ? `${this.style.row} ${this.style.sel}` : this.style.row; |
||||
}; |
||||
|
||||
onDragEnd = (result: DropResult) => { |
||||
if (!result.destination) { |
||||
return; |
||||
} |
||||
|
||||
const { layers, actions } = this.props.context.instanceState ?? {}; |
||||
if (!layers || !actions) { |
||||
return; |
||||
} |
||||
|
||||
// account for the reverse order and offset (0 is baselayer)
|
||||
const count = layers.length - 1; |
||||
const src = (result.source.index - count) * -1; |
||||
const dst = (result.destination.index - count) * -1; |
||||
|
||||
actions.reorder(src, dst); |
||||
}; |
||||
|
||||
render() { |
||||
const { layers, selected, actions } = this.props.context.instanceState ?? {}; |
||||
if (!layers || !actions) { |
||||
return <div>No layers?</div>; |
||||
} |
||||
const baselayer = layers[0]; |
||||
|
||||
const styles = this.style; |
||||
return ( |
||||
<> |
||||
<Container> |
||||
<ValuePicker |
||||
icon="plus" |
||||
label="Add layer" |
||||
variant="secondary" |
||||
options={geomapLayerRegistry.selectOptions(undefined, dataLayerFilter).options} |
||||
onChange={(v) => actions.addlayer(v.value!)} |
||||
isFullWidth={true} |
||||
/> |
||||
</Container> |
||||
<br /> |
||||
|
||||
<DragDropContext onDragEnd={this.onDragEnd}> |
||||
<Droppable droppableId="droppable"> |
||||
{(provided, snapshot) => ( |
||||
<div {...provided.droppableProps} ref={provided.innerRef}> |
||||
{(() => { |
||||
// reverse order
|
||||
const rows: any = []; |
||||
for (let i = layers.length - 1; i > 0; i--) { |
||||
const element = layers[i]; |
||||
rows.push( |
||||
<Draggable key={element.UID} draggableId={element.UID} index={rows.length}> |
||||
{(provided, snapshot) => ( |
||||
<div |
||||
className={this.getRowStyle(i === selected)} |
||||
ref={provided.innerRef} |
||||
{...provided.draggableProps} |
||||
{...provided.dragHandleProps} |
||||
onMouseDown={() => actions!.selectLayer(element.UID)} |
||||
> |
||||
<span className={styles.typeWrapper}>{element.options.type}</span> |
||||
<div className={styles.textWrapper}> ({element.layer.getSourceState() ?? '?'})</div> |
||||
|
||||
<IconButton |
||||
name="trash-alt" |
||||
title={'remove'} |
||||
className={cx(styles.actionIcon, styles.dragIcon)} |
||||
onClick={() => actions.deleteLayer(element.UID)} |
||||
surface="header" |
||||
/> |
||||
{layers.length > 2 && ( |
||||
<Icon |
||||
title="Drag and drop to reorder" |
||||
name="draggabledots" |
||||
size="lg" |
||||
className={styles.dragIcon} |
||||
/> |
||||
)} |
||||
</div> |
||||
)} |
||||
</Draggable> |
||||
); |
||||
} |
||||
return rows; |
||||
})()} |
||||
|
||||
{provided.placeholder} |
||||
</div> |
||||
)} |
||||
</Droppable> |
||||
</DragDropContext> |
||||
|
||||
{false && baselayer && ( |
||||
<> |
||||
<label>Base layer</label> |
||||
<div className={this.getRowStyle(false)}> |
||||
<span className={styles.typeWrapper}>{baselayer.options.type}</span> |
||||
<div className={styles.textWrapper}> {baselayer.UID}</div> |
||||
</div> |
||||
</> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue