Canvas: show layer elements above element details (#41447)

public/app/features/canvas/runtime/scene.tsx

@@ -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);

public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx

@@ -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>
       </>
     );
   }

public/app/plugins/panel/canvas/editor/MultiSelectionEditor.tsx

@@ -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>
-  );
-};

public/app/plugins/panel/canvas/editor/elementsEditor.tsx

@@ -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,
-      });
-    },
-  };
-};

public/app/plugins/panel/canvas/editor/layerEditor.tsx

@@ -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,
+          },
+        });
+      }
     },
   };
 }

public/app/plugins/panel/canvas/module.tsx

@@ -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));
     }
   });