From 7b249d19b21362617a0c68a6f7f11955f3a2d48d Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Mon, 1 Aug 2022 11:22:13 -0600
Subject: [PATCH] Canvas: Inline element settings (#52771)

---
 .betterer.results                             |  6 ---
 public/app/features/canvas/runtime/ables.tsx  | 47 +++++++++++++++++--
 public/app/features/canvas/runtime/scene.tsx  |  5 +-
 .../panel/canvas/CanvasContextMenu.tsx        |  3 +-
 .../app/plugins/panel/canvas/CanvasPanel.tsx  |  1 +
 5 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 6bff61be33c..0c76dc3e802 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3905,12 +3905,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/features/canvas/runtime/ables.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
-    ],
     "public/app/features/canvas/runtime/element.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
diff --git a/public/app/features/canvas/runtime/ables.tsx b/public/app/features/canvas/runtime/ables.tsx
index ae19c84f87a..41820406ae7 100644
--- a/public/app/features/canvas/runtime/ables.tsx
+++ b/public/app/features/canvas/runtime/ables.tsx
@@ -4,11 +4,52 @@ import { HorizontalConstraint, VerticalConstraint } from '../types';
 
 import { Scene } from './scene';
 
+export const settingsViewable = (scene: Scene) => ({
+  name: 'settingsViewable',
+  props: {},
+  events: {},
+  render(moveable: MoveableManagerInterface<unknown, unknown>, React: Renderer) {
+    // If selection is more than 1 element don't display settings button
+    if (scene.selecto?.getSelectedTargets() && scene.selecto?.getSelectedTargets().length > 1) {
+      return;
+    }
+
+    const rect = moveable.getRect();
+    return (
+      <div
+        key={'settings-viewable'}
+        className={'moveable-settings'}
+        style={{
+          position: 'absolute',
+          left: `${rect.width + 18}px`,
+          top: '0px',
+          color: 'white',
+          fontSize: '18px',
+          cursor: 'pointer',
+          userSelect: 'none',
+          willChange: 'transform',
+          transform: 'translate(-50%, 0px)',
+          zIndex: 100,
+        }}
+        onClick={(event) => {
+          const container = moveable.getContainer();
+          const evt = new PointerEvent('contextmenu', { clientX: event.clientX, clientY: event.clientY });
+          container.dispatchEvent(evt);
+        }}
+      >
+        {``}
+        ⚙️
+        {``}
+      </div>
+    );
+  },
+});
+
 export const dimensionViewable = {
   name: 'dimensionViewable',
   props: {},
   events: {},
-  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+  render(moveable: MoveableManagerInterface<unknown, unknown>, React: Renderer) {
     const rect = moveable.getRect();
     return (
       <div
@@ -40,9 +81,9 @@ export const constraintViewable = (scene: Scene) => ({
   name: 'constraintViewable',
   props: {},
   events: {},
-  render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
+  render(moveable: MoveableManagerInterface<unknown, unknown>, React: Renderer) {
     const rect = moveable.getRect();
-    const targetElement = scene.findElementByTarget(moveable.state.target);
+    const targetElement = scene.findElementByTarget(moveable.state.target!);
 
     // If selection is more than 1 element don't display constraint visualizations
     if (scene.selecto?.getSelectedTargets() && scene.selecto?.getSelectedTargets().length > 1) {
diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index 2d713ec594a..a32b9ecde1e 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -30,7 +30,7 @@ import { LayerActionID } from 'app/plugins/panel/canvas/types';
 
 import { HorizontalConstraint, Placement, VerticalConstraint } from '../types';
 
-import { constraintViewable, dimensionViewable } from './ables';
+import { constraintViewable, dimensionViewable, settingsViewable } from './ables';
 import { ElementState } from './element';
 import { FrameState } from './frame';
 import { RootElement } from './root';
@@ -334,10 +334,11 @@ export class Scene {
     this.moveable = new Moveable(this.div!, {
       draggable: allowChanges,
       resizable: allowChanges,
-      ables: [dimensionViewable, constraintViewable(this)],
+      ables: [dimensionViewable, constraintViewable(this), settingsViewable(this)],
       props: {
         dimensionViewable: allowChanges,
         constraintViewable: allowChanges,
+        settingsViewable: allowChanges,
       },
       origin: false,
       className: this.styles.selected,
diff --git a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
index 0492cab9c50..f7a9df16372 100644
--- a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
+++ b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx
@@ -4,8 +4,7 @@ import { useObservable } from 'react-use';
 import { first } from 'rxjs/operators';
 
 import { ContextMenu, MenuItem } from '@grafana/ui';
-
-import { Scene } from '../../../features/canvas/runtime/scene';
+import { Scene } from 'app/features/canvas/runtime/scene';
 
 import { activePanelSubject } from './CanvasPanel';
 import { LayerActionID } from './types';
diff --git a/public/app/plugins/panel/canvas/CanvasPanel.tsx b/public/app/plugins/panel/canvas/CanvasPanel.tsx
index e504e2bacbf..161997dd609 100644
--- a/public/app/plugins/panel/canvas/CanvasPanel.tsx
+++ b/public/app/plugins/panel/canvas/CanvasPanel.tsx
@@ -194,6 +194,7 @@ export class CanvasPanel extends Component<Props, State> {
   renderInlineEdit = () => {
     return <InlineEdit onClose={() => this.closeInlineEdit()} id={this.props.id} scene={activeCanvasPanel!.scene} />;
   };
+
   render() {
     return (
       <>