diff --git a/public/app/features/canvas/runtime/frame.tsx b/public/app/features/canvas/runtime/frame.tsx index d94ef374f37..3dba3e5c545 100644 --- a/public/app/features/canvas/runtime/frame.tsx +++ b/public/app/features/canvas/runtime/frame.tsx @@ -212,6 +212,10 @@ export class FrameState extends ElementState { this.scene.byName.set(copy.options.name, copy); this.scene.save(); this.reinitializeMoveable(); + + setTimeout(() => { + this.scene.targetsToSelect.add(copy.div!); + }); break; case LayerActionID.MoveTop: case LayerActionID.MoveBottom: diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx index 4dd40c9824d..1e137d9bafc 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -5,7 +5,7 @@ import { BehaviorSubject, ReplaySubject, Subject, Subscription } from 'rxjs'; import { first } from 'rxjs/operators'; import Selecto from 'selecto'; -import { GrafanaTheme2, PanelData } from '@grafana/data'; +import { AppEvents, GrafanaTheme2, PanelData } from '@grafana/data'; import { locationService } from '@grafana/runtime/src'; import { Portal, stylesFactory } from '@grafana/ui'; import { config } from 'app/core/config'; @@ -28,6 +28,7 @@ import { import { CanvasContextMenu } from 'app/plugins/panel/canvas/CanvasContextMenu'; import { AnchorPoint, LayerActionID } from 'app/plugins/panel/canvas/types'; +import appEvents from '../../../core/app_events'; import { CanvasPanel } from '../../../plugins/panel/canvas/CanvasPanel'; import { HorizontalConstraint, Placement, VerticalConstraint } from '../types'; @@ -73,6 +74,8 @@ export class Scene { readonly editModeEnabled = new BehaviorSubject(false); subscription: Subscription; + targetsToSelect = new Set(); + constructor( cfg: CanvasFrameOptions, enableEditing: boolean, @@ -564,6 +567,16 @@ export class Scene { dest.reinitializeMoveable(); }; + addToSelection = () => { + try { + let selection: SelectionParams = { targets: [] }; + selection.targets = [...this.targetsToSelect]; + this.select(selection); + } catch (error) { + appEvents.emit(AppEvents.alertError, ['Unable to add to selection']); + } + }; + render() { const canShowContextMenu = this.isPanelEditing || (!this.isPanelEditing && this.isEditingEnabled); diff --git a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx index b05759dfafe..bc99da0f5da 100644 --- a/public/app/plugins/panel/canvas/CanvasContextMenu.tsx +++ b/public/app/plugins/panel/canvas/CanvasContextMenu.tsx @@ -215,6 +215,11 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => { currentLayer.doAction(actionType, currentSelectedElement); }); }); + + setTimeout(() => { + scene.addToSelection(); + scene.targetsToSelect.clear(); + }); }; if (isMenuVisible) { diff --git a/public/app/plugins/panel/canvas/utils.ts b/public/app/plugins/panel/canvas/utils.ts index 3a695c10e42..a5eae1208a9 100644 --- a/public/app/plugins/panel/canvas/utils.ts +++ b/public/app/plugins/panel/canvas/utils.ts @@ -94,7 +94,8 @@ export function onAddItem(sel: SelectableValue, rootLayer: FrameState | newElement.updateData(rootLayer.scene.context); rootLayer.elements.push(newElement); rootLayer.scene.save(); - rootLayer.reinitializeMoveable(); + + setTimeout(() => doSelect(rootLayer.scene, newElement)); } }