mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Canvas: show layer elements above element details (#41447)
This commit is contained in:
parent
5f5298ad25
commit
fbd8dc59d9
@ -1,6 +1,7 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { ReplaySubject, Subject } from 'rxjs';
|
||||
import { first } from 'rxjs/operators';
|
||||
import Moveable from 'moveable';
|
||||
import Selecto from 'selecto';
|
||||
|
||||
@ -24,6 +25,7 @@ import {
|
||||
import { ElementState } from './element';
|
||||
import { RootElement } from './root';
|
||||
import { GroupState } from './group';
|
||||
import { LayerActionID } from 'app/plugins/panel/canvas/types';
|
||||
|
||||
export interface SelectionParams {
|
||||
targets: Array<HTMLElement | SVGElement>;
|
||||
@ -94,6 +96,30 @@ export class Scene {
|
||||
}
|
||||
}
|
||||
|
||||
groupSelection() {
|
||||
this.selection.pipe(first()).subscribe((currentSelectedElements) => {
|
||||
const currentLayer = currentSelectedElements[0].parent!;
|
||||
|
||||
const newLayer = new GroupState(
|
||||
{
|
||||
type: 'group',
|
||||
elements: [],
|
||||
},
|
||||
this,
|
||||
currentSelectedElements[0].parent
|
||||
);
|
||||
|
||||
currentSelectedElements.forEach((element: ElementState) => {
|
||||
newLayer.doAction(LayerActionID.Duplicate, element);
|
||||
currentLayer.doAction(LayerActionID.Delete, element);
|
||||
});
|
||||
|
||||
currentLayer.elements.push(newLayer);
|
||||
|
||||
this.save();
|
||||
});
|
||||
}
|
||||
|
||||
clearCurrentSelection() {
|
||||
let event: MouseEvent = new MouseEvent('click');
|
||||
this.selecto?.clickTarget(event, this.div);
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Button, Container, Icon, IconButton, stylesFactory, ValuePicker } from '@grafana/ui';
|
||||
import { Button, HorizontalGroup, Icon, IconButton, stylesFactory, ValuePicker } from '@grafana/ui';
|
||||
import { AppEvents, GrafanaTheme, SelectableValue, StandardEditorProps } from '@grafana/data';
|
||||
import { config } from '@grafana/runtime';
|
||||
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
|
||||
@ -21,6 +21,14 @@ type Props = StandardEditorProps<any, LayerEditorProps, PanelOptions>;
|
||||
export class LayerElementListEditor extends PureComponent<Props> {
|
||||
style = getLayerDragStyles(config.theme);
|
||||
|
||||
getScene = () => {
|
||||
const { settings } = this.props.item;
|
||||
if (!settings?.layer) {
|
||||
return;
|
||||
}
|
||||
return settings.layer.scene;
|
||||
};
|
||||
|
||||
onAddItem = (sel: SelectableValue<string>) => {
|
||||
const { settings } = this.props.item;
|
||||
if (!settings?.layer) {
|
||||
@ -158,6 +166,15 @@ export class LayerElementListEditor extends PureComponent<Props> {
|
||||
this.goUpLayer();
|
||||
};
|
||||
|
||||
private onGroupSelection = () => {
|
||||
const scene = this.getScene();
|
||||
if (scene) {
|
||||
scene.groupSelection();
|
||||
} else {
|
||||
console.warn('no scene!');
|
||||
}
|
||||
};
|
||||
|
||||
private onDeleteGroup = () => {
|
||||
appEvents.publish(
|
||||
new ShowConfirmModalEvent({
|
||||
@ -268,7 +285,7 @@ export class LayerElementListEditor extends PureComponent<Props> {
|
||||
</DragDropContext>
|
||||
<br />
|
||||
|
||||
<Container>
|
||||
<HorizontalGroup>
|
||||
<ValuePicker
|
||||
icon="plus"
|
||||
label="Add item"
|
||||
@ -282,7 +299,12 @@ export class LayerElementListEditor extends PureComponent<Props> {
|
||||
Clear Selection
|
||||
</Button>
|
||||
)}
|
||||
</Container>
|
||||
{selection.length > 1 && (
|
||||
<Button size="sm" variant="secondary" onClick={this.onGroupSelection}>
|
||||
Group items
|
||||
</Button>
|
||||
)}
|
||||
</HorizontalGroup>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,42 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
import { Button } from '@grafana/ui';
|
||||
import { StandardEditorProps } from '@grafana/data';
|
||||
|
||||
import { InstanceState } from '../CanvasPanel';
|
||||
import { PanelOptions } from '../models.gen';
|
||||
import { GroupState } from 'app/features/canvas/runtime/group';
|
||||
import { ElementState } from 'app/features/canvas/runtime/element';
|
||||
import { LayerActionID } from '../types';
|
||||
|
||||
export const MultiSelectionEditor: FC<StandardEditorProps<any, InstanceState, PanelOptions>> = ({ context }) => {
|
||||
const createNewLayer = () => {
|
||||
const currentSelectedElements = context?.instanceState.selected;
|
||||
const currentLayer = currentSelectedElements[0].parent;
|
||||
|
||||
const newLayer = new GroupState(
|
||||
{
|
||||
type: 'group',
|
||||
elements: [],
|
||||
},
|
||||
context.instanceState.scene,
|
||||
currentSelectedElements[0].parent
|
||||
);
|
||||
|
||||
currentSelectedElements.forEach((element: ElementState) => {
|
||||
newLayer.doAction(LayerActionID.Duplicate, element);
|
||||
currentLayer.doAction(LayerActionID.Delete, element);
|
||||
});
|
||||
|
||||
currentLayer.elements.push(newLayer);
|
||||
|
||||
context.instanceState.scene.save();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button icon="plus" size="sm" variant="secondary" onClick={createNewLayer}>
|
||||
Group items
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -1,24 +0,0 @@
|
||||
import { NestedPanelOptions } from '@grafana/data/src/utils/OptionsUIBuilders';
|
||||
import { Scene } from 'app/features/canvas/runtime/scene';
|
||||
import { MultiSelectionEditor } from './MultiSelectionEditor';
|
||||
|
||||
export interface CanvasEditorGroupOptions {
|
||||
scene: Scene;
|
||||
category?: string[];
|
||||
}
|
||||
|
||||
export const getElementsEditor = (opts: CanvasEditorGroupOptions): NestedPanelOptions<any> => {
|
||||
return {
|
||||
category: opts.category,
|
||||
path: '--',
|
||||
build: (builder, context) => {
|
||||
builder.addCustomEditor({
|
||||
id: 'content',
|
||||
path: '__', // not used
|
||||
name: 'Options',
|
||||
editor: MultiSelectionEditor,
|
||||
settings: opts,
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
@ -7,6 +7,7 @@ import { LayerElementListEditor } from './LayerElementListEditor';
|
||||
import { GroupState } from 'app/features/canvas/runtime/group';
|
||||
import { Scene } from 'app/features/canvas/runtime/scene';
|
||||
import { ElementState } from 'app/features/canvas/runtime/element';
|
||||
import { PlacementEditor } from './PlacementEditor';
|
||||
|
||||
export interface LayerEditorProps {
|
||||
scene: Scene;
|
||||
@ -58,6 +59,11 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions<LayerEdi
|
||||
|
||||
// Dynamically fill the selected element
|
||||
build: (builder, context) => {
|
||||
const currentLayer = scene.currentLayer;
|
||||
if (currentLayer && !currentLayer.isRoot()) {
|
||||
// TODO: the non-root nav option
|
||||
}
|
||||
|
||||
builder.addCustomEditor({
|
||||
id: 'content',
|
||||
path: 'root',
|
||||
@ -66,17 +72,23 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions<LayerEdi
|
||||
settings: { scene, layer: scene.currentLayer, selected },
|
||||
});
|
||||
|
||||
// // force clean layer configuration
|
||||
// const layer = canvasElementRegistry.getIfExists(options?.type ?? DEFAULT_CANVAS_ELEMENT_CONFIG.type)!;
|
||||
//const currentOptions = { ...options, type: layer.id, config: { ...layer.defaultConfig, ...options?.config } };
|
||||
const ctx = { ...context, options };
|
||||
|
||||
// if (layer.registerOptionsUI) {
|
||||
// layer.registerOptionsUI(builder, ctx);
|
||||
// }
|
||||
|
||||
optionBuilder.addBackground(builder as any, ctx);
|
||||
optionBuilder.addBorder(builder as any, ctx);
|
||||
|
||||
if (currentLayer && !currentLayer.isRoot()) {
|
||||
builder.addCustomEditor({
|
||||
category: ['Layout'],
|
||||
id: 'content',
|
||||
path: '__', // not used
|
||||
name: 'Anchor',
|
||||
editor: PlacementEditor,
|
||||
settings: {
|
||||
scene: opts.scene,
|
||||
element: currentLayer,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import { CanvasPanel, InstanceState } from './CanvasPanel';
|
||||
import { PanelOptions } from './models.gen';
|
||||
import { getElementEditor } from './editor/elementEditor';
|
||||
import { getLayerEditor } from './editor/layerEditor';
|
||||
import { getElementsEditor } from './editor/elementsEditor';
|
||||
import { GroupState } from 'app/features/canvas/runtime/group';
|
||||
|
||||
export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
|
||||
.setNoPadding() // extend to panel edges
|
||||
@ -20,24 +20,20 @@ export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
|
||||
});
|
||||
|
||||
if (state) {
|
||||
builder.addNestedOptions(getLayerEditor(state));
|
||||
|
||||
const selection = state.selected;
|
||||
if (selection?.length === 1) {
|
||||
builder.addNestedOptions(
|
||||
getElementEditor({
|
||||
category: [`Selected element (id: ${selection[0].UID})`], // changing the ID forces are reload
|
||||
element: selection[0],
|
||||
scene: state.scene,
|
||||
})
|
||||
);
|
||||
} else if (selection?.length > 1) {
|
||||
builder.addNestedOptions(
|
||||
getElementsEditor({
|
||||
category: [`Current selection`],
|
||||
scene: state.scene,
|
||||
})
|
||||
);
|
||||
const element = selection[0];
|
||||
if (!(element instanceof GroupState)) {
|
||||
builder.addNestedOptions(
|
||||
getElementEditor({
|
||||
category: [`Selected element (id: ${element.UID})`], // changing the ID forces reload
|
||||
element,
|
||||
scene: state.scene,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
builder.addNestedOptions(getLayerEditor(state));
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user