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