Canvas: add layer elements editor functionality (#40968)

public/app/features/canvas/element.ts

@@ -45,13 +45,13 @@ export interface CanvasElementItem<TConfig = any, TData = any> extends RegistryI
   /** The default width/height to use when adding  */
   defaultSize?: Placement;
 
-  defaultConfig: TConfig;
-
   prepareData?: (ctx: DimensionContext, cfg: TConfig) => TData;
 
   /** Component used to draw */
   display: ComponentType<CanvasElementProps<TConfig, TData>>;
 
+  getNewOptions: (options?: CanvasElementOptions) => Omit<CanvasElementOptions<TConfig>, 'type'>;
+
   /** Build the configuraiton UI */
   registerOptionsUI?: PanelOptionsSupplier<CanvasElementOptions<TConfig>>;
 }

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

@@ -64,18 +64,20 @@ export const iconItem: CanvasElementItem<IconConfig, IconData> = {
 
   display: IconDisplay,
 
-  defaultConfig: {
-    path: {
-      mode: ResourceDimensionMode.Fixed,
-      fixed: 'img/icons/unicons/question-circle.svg',
+  getNewOptions: (options) => ({
+    placement: {
+      width: 50,
+      height: 50,
     },
-    fill: { fixed: '#FFF899' },
-  },
-
-  defaultSize: {
-    width: 50,
-    height: 50,
-  },
+    ...options,
+    config: {
+      path: {
+        mode: ResourceDimensionMode.Fixed,
+        fixed: 'img/icons/unicons/question-circle.svg',
+      },
+      fill: { fixed: '#FFF899' },
+    },
+  }),
 
   // Called when data changes
   prepareData: (ctx: DimensionContext, cfg: IconConfig) => {

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

@@ -23,12 +23,14 @@ export const notFoundItem: CanvasElementItem<NotFoundConfig> = {
   name: 'Not found',
   description: 'Display when element type is not found in the registry',
 
-  defaultConfig: {},
-
   display: NotFoundDisplay,
 
   defaultSize: {
     width: 100,
     height: 100,
   },
+
+  getNewOptions: () => ({
+    config: {},
+  }),
 };

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

@@ -71,16 +71,24 @@ export const textBoxItem: CanvasElementItem<TextBoxConfig, TextBoxData> = {
 
   display: TextBoxDisplay,
 
-  defaultConfig: {
-    align: Align.Left,
-    valign: VAlign.Middle,
-  },
-
   defaultSize: {
     width: 240,
     height: 160,
   },
 
+  getNewOptions: (options) => ({
+    background: {
+      color: {
+        fixed: 'grey',
+      },
+    },
+    ...options,
+    config: {
+      align: Align.Left,
+      valign: VAlign.Middle,
+    },
+  }),
+
   // Called when data changes
   prepareData: (ctx: DimensionContext, cfg: TextBoxConfig) => {
     const data: TextBoxData = {
@@ -89,9 +97,11 @@ export const textBoxItem: CanvasElementItem<TextBoxConfig, TextBoxData> = {
       valign: cfg.valign ?? VAlign.Middle,
       size: cfg.size,
     };
+
     if (cfg.color) {
       data.color = ctx.getColor(cfg.color).value();
     }
+
     return data;
   },
 

public/app/features/canvas/registry.ts

@@ -5,8 +5,7 @@ import { textBoxItem } from './elements/textBox';
 
 export const DEFAULT_CANVAS_ELEMENT_CONFIG: CanvasElementOptions = {
   type: iconItem.id,
-  config: { ...iconItem.defaultConfig },
-  placement: { ...iconItem.defaultSize },
+  ...iconItem.getNewOptions(),
 };
 
 export const canvasElementRegistry = new Registry<CanvasElementItem>(() => [

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

@@ -186,6 +186,10 @@ export class ElementState {
     this.options = { ...options };
     let trav = this.parent;
     while (trav) {
+      if (trav.isRoot()) {
+        trav.scene.save();
+        break;
+      }
       trav.revId++;
       trav = trav.parent;
     }
@@ -291,8 +295,14 @@ export class ElementState {
   render() {
     const { item } = this;
     return (
-      <div key={`${this.UID}/${this.revId}`} style={{ ...this.sizeStyle, ...this.dataStyle }} ref={this.initElement}>
-        <item.display config={this.options.config} width={this.width} height={this.height} data={this.data} />
+      <div key={`${this.UID}`} style={{ ...this.sizeStyle, ...this.dataStyle }} ref={this.initElement}>
+        <item.display
+          key={`${this.UID}/${this.revId}`}
+          config={this.options.config}
+          width={this.width}
+          height={this.height}
+          data={this.data}
+        />
       </div>
     );
   }

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

@@ -6,13 +6,17 @@ import { ElementState } from './element';
 import { CanvasElementItem } from '../element';
 import { LayerActionID } from 'app/plugins/panel/canvas/types';
 import { cloneDeep } from 'lodash';
+import { Scene } from './scene';
+import { RootElement } from './root';
 
 export const groupItemDummy: CanvasElementItem = {
   id: 'group',
   name: 'Group',
   description: 'Group',
 
-  defaultConfig: {},
+  getNewOptions: () => ({
+    config: {},
+  }),
 
   // eslint-disable-next-line react/display-name
   display: () => {
@@ -22,10 +26,13 @@ export const groupItemDummy: CanvasElementItem = {
 
 export class GroupState extends ElementState {
   elements: ElementState[] = [];
+  scene: Scene;
 
-  constructor(public options: CanvasGroupOptions, public parent?: GroupState) {
+  constructor(public options: CanvasGroupOptions, scene: Scene, public parent?: GroupState) {
     super(groupItemDummy, options, parent);
 
+    this.scene = scene;
+
     // mutate options object
     let { elements } = this.options;
     if (!elements) {
@@ -34,7 +41,7 @@ export class GroupState extends ElementState {
 
     for (const c of elements) {
       if (c.type === 'group') {
-        this.elements.push(new GroupState(c as CanvasGroupOptions, this));
+        this.elements.push(new GroupState(c as CanvasGroupOptions, scene, this));
       } else {
         const item = canvasElementRegistry.getIfExists(c.type) ?? notFoundItem;
         this.elements.push(new ElementState(item, c, this));
@@ -42,7 +49,7 @@ export class GroupState extends ElementState {
     }
   }
 
-  isRoot() {
+  isRoot(): this is RootElement {
     return false;
   }
 
@@ -80,7 +87,14 @@ export class GroupState extends ElementState {
     const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
     this.elements = result;
-    this.onChange(this.getSaveModel());
+
+    this.reinitializeMoveable();
+  }
+
+  reinitializeMoveable() {
+    // Need to first clear current selection and then re-init moveable with slight delay
+    this.scene.clearCurrentSelection();
+    setTimeout(() => this.scene.initMoveable(true), 100);
   }
 
   // ??? or should this be on the element directly?
@@ -89,6 +103,8 @@ export class GroupState extends ElementState {
     switch (action) {
       case LayerActionID.Delete:
         this.elements = this.elements.filter((e) => e !== element);
+        this.scene.save();
+        this.reinitializeMoveable();
         break;
       case LayerActionID.Duplicate:
         if (element.item.id === 'group') {
@@ -108,18 +124,18 @@ export class GroupState extends ElementState {
         if (element.anchor.right) {
           opts.placement!.right! += 10;
         }
-        console.log('DUPLICATE', opts);
+
         const copy = new ElementState(element.item, opts, this);
         copy.updateSize(element.width, element.height);
-        copy.updateData(element.data); // :bomb:  <-- need some way to tell the scene to re-init size and data
+        copy.updateData(this.scene.context);
         this.elements.push(copy);
+        this.scene.save();
+        this.reinitializeMoveable();
         break;
       default:
         console.log('DO action', action, element);
         return;
     }
-
-    this.onChange(this.getSaveModel());
   };
 
   render() {

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

@@ -1,12 +1,13 @@
 import { CanvasGroupOptions, CanvasElementOptions } from 'app/features/canvas';
 import { GroupState } from './group';
+import { Scene } from './scene';
 
 export class RootElement extends GroupState {
-  constructor(public options: CanvasGroupOptions, private changeCallback: () => void) {
-    super(options);
+  constructor(public options: CanvasGroupOptions, public scene: Scene, private changeCallback: () => void) {
+    super(options, scene);
   }
 
-  isRoot() {
+  isRoot(): this is RootElement {
     return true;
   }
 

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

@@ -7,13 +7,7 @@ import Selecto from 'selecto';
 import { config } from 'app/core/config';
 import { GrafanaTheme2, PanelData } from '@grafana/data';
 import { stylesFactory } from '@grafana/ui';
-import {
-  Anchor,
-  CanvasElementOptions,
-  CanvasGroupOptions,
-  DEFAULT_CANVAS_ELEMENT_CONFIG,
-  Placement,
-} from 'app/features/canvas';
+import { Anchor, CanvasGroupOptions, DEFAULT_CANVAS_ELEMENT_CONFIG, Placement } from 'app/features/canvas';
 import {
   ColorDimensionConfig,
   ResourceDimensionConfig,
@@ -31,7 +25,6 @@ import { ElementState } from './element';
 import { RootElement } from './root';
 
 export class Scene {
-  private lookup = new Map<number, ElementState>();
   styles = getStyles(config.theme2);
   readonly selection = new ReplaySubject<ElementState[]>(1);
   readonly moved = new Subject<number>(); // called after resize/drag for editor updates
@@ -56,15 +49,10 @@ export class Scene {
         type: 'group',
         elements: [DEFAULT_CANVAS_ELEMENT_CONFIG],
       },
+      this,
       this.save // callback when changes are made
     );
 
-    // Build the scene registry
-    this.lookup.clear();
-    this.root.visit((v) => {
-      this.lookup.set(v.UID, v);
-    });
-
     setTimeout(() => {
       if (this.div && enableEditing) {
         this.initMoveable();
@@ -92,20 +80,13 @@ export class Scene {
     this.root.updateSize(width, height);
 
     if (this.selecto?.getSelectedTargets().length) {
-      let event: MouseEvent = new MouseEvent('click');
-      this.selecto.clickTarget(event, this.div);
+      this.clearCurrentSelection();
     }
   }
 
-  onChange(uid: number, cfg: CanvasElementOptions) {
-    const elem = this.lookup.get(uid);
-    if (!elem) {
-      throw new Error('element not found: ' + uid + ' // ' + [...this.lookup.keys()]);
-    }
-    this.revId++;
-    elem.onChange(cfg);
-    elem.updateData(this.context); // Refresh any data that may have changed
-    this.save();
+  clearCurrentSelection() {
+    let event: MouseEvent = new MouseEvent('click');
+    this.selecto?.clickTarget(event, this.div);
   }
 
   toggleAnchor(element: ElementState, k: keyof Anchor) {
@@ -157,12 +138,16 @@ export class Scene {
     this.div = sceneContainer;
   };
 
-  initMoveable = () => {
+  initMoveable = (destroySelecto = false) => {
     const targetElements: HTMLDivElement[] = [];
     this.root.elements.forEach((element: ElementState) => {
       targetElements.push(element.div!);
     });
 
+    if (destroySelecto) {
+      this.selecto?.destroy();
+    }
+
     this.selecto = new Selecto({
       container: this.div,
       selectableTargets: targetElements,
@@ -188,6 +173,14 @@ export class Scene {
         });
         this.moved.next(Date.now()); // TODO only on end
       })
+      .on('dragEnd', (event) => {
+        const targetedElement = this.findElementByTarget(event.target);
+
+        if (targetedElement && targetedElement.parent) {
+          const parent = targetedElement.parent;
+          targetedElement.updateSize(parent.width, parent.height);
+        }
+      })
       .on('resize', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         targetedElement!.applyResize(event);