Canvas: Inline element settings (#52771)

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) {

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,