Canvas: Improve Selection System (#41065)

public/app/features/canvas/elements/button.tsx

@@ -0,0 +1,62 @@
+import React, { PureComponent } from 'react';
+import { Button } from '@grafana/ui';
+
+import { DimensionContext } from 'app/features/dimensions/context';
+import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
+import { TextDimensionConfig } from 'app/features/dimensions/types';
+import { CanvasElementItem, CanvasElementProps } from '../element';
+
+interface ButtonData {
+  text?: string;
+}
+
+interface ButtonConfig {
+  text?: TextDimensionConfig;
+}
+
+class ButtonDisplay extends PureComponent<CanvasElementProps<ButtonConfig, ButtonData>> {
+  render() {
+    const { data } = this.props;
+    const onClick = () => console.log('button being clicked :)');
+
+    return <Button onClick={onClick}>{data?.text}</Button>;
+  }
+}
+
+export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
+  id: 'button',
+  name: 'Button',
+  description: 'Button',
+
+  display: ButtonDisplay,
+
+  defaultSize: {
+    width: 200,
+    height: 50,
+  },
+
+  getNewOptions: (options) => ({
+    ...options,
+  }),
+
+  // Called when data changes
+  prepareData: (ctx: DimensionContext, cfg: ButtonConfig) => {
+    const data: ButtonData = {
+      text: cfg?.text ? ctx.getText(cfg.text).value() : '',
+    };
+
+    return data;
+  },
+
+  // Heatmap overlay options
+  registerOptionsUI: (builder) => {
+    const category = ['Button'];
+    builder.addCustomEditor({
+      category,
+      id: 'textSelector',
+      path: 'config.text',
+      name: 'Text',
+      editor: TextDimensionEditor,
+    });
+  },
+};

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

@@ -54,8 +54,10 @@ export class Scene {
     );
 
     setTimeout(() => {
-      if (this.div && enableEditing) {
-        this.initMoveable();
+      if (this.div) {
+        // If editing is enabled, clear selecto instance
+        const destroySelecto = enableEditing;
+        this.initMoveable(destroySelecto, enableEditing);
       }
     }, 100);
     return this.root;
@@ -138,7 +140,7 @@ export class Scene {
     this.div = sceneContainer;
   };
 
-  initMoveable = (destroySelecto = false) => {
+  initMoveable = (destroySelecto = false, allowChanges = true) => {
     const targetElements: HTMLDivElement[] = [];
     this.root.elements.forEach((element: ElementState) => {
       targetElements.push(element.div!);
@@ -155,8 +157,9 @@ export class Scene {
     });
 
     const moveable = new Moveable(this.div!, {
-      draggable: true,
-      resizable: true,
+      draggable: allowChanges,
+      resizable: allowChanges,
+      origin: false,
     })
       .on('clickGroup', (event) => {
         this.selecto!.clickTarget(event.inputEvent, event.inputTarget);
@@ -212,7 +215,6 @@ export class Scene {
 
       const s = event.selected.map((t) => this.findElementByTarget(t)!);
       this.selection.next(s);
-      console.log('UPDATE selection', s);
 
       if (event.isDragStart) {
         event.inputEvent.preventDefault();

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

@@ -44,8 +44,7 @@ export class CanvasPanel extends Component<Props, State> {
     this.subs.add(
       this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt) => {
         // Remove current selection when entering edit mode for any panel in dashboard
-        let event: MouseEvent = new MouseEvent('click');
-        this.scene?.selecto?.clickTarget(event, this.scene?.div);
+        this.scene.clearCurrentSelection();
       })
     );
 

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

@@ -44,7 +44,7 @@ export class LayerElementListEditor extends PureComponent<Props> {
       try {
         settings.scene.selecto.clickTarget(item, item?.div);
       } catch (error) {
-        appEvents.emit(AppEvents.alertError, ['Unable to select element with inline editing disabled']);
+        appEvents.emit(AppEvents.alertError, ['Unable to select element, try selecting element in panel instead']);
       }
     }
   };

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

@@ -46,8 +46,6 @@ export function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions<
 
     // Dynamically fill the selected element
     build: (builder, context) => {
-      console.log('MAKE element editor', opts.element.UID);
-
       const { options } = opts.element;
       const layerTypes = canvasElementRegistry.selectOptions(
         options?.type // the selected value

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

@@ -30,8 +30,6 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions<Instance
 
     // Dynamically fill the selected element
     build: (builder, context) => {
-      console.log('MAKE layer editor', layer.UID);
-
       builder.addCustomEditor({
         id: 'content',
         path: 'root',

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

@@ -28,8 +28,6 @@ export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
             scene: state.scene,
           })
         );
-      } else {
-        console.log('NO Single seleciton', selection?.length);
       }
 
       builder.addNestedOptions(getLayerEditor(state));