Canvas: Avoid refreshing elements while dragging (#52120)

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

@@ -60,6 +60,7 @@ export class Scene {
   currentLayer?: FrameState;
   isEditingEnabled?: boolean;
   skipNextSelectionBroadcast = false;
+  ignoreDataUpdate = false;
 
   isPanelEditing = locationService.getSearchObject().editPanel !== undefined;
 
@@ -326,6 +327,12 @@ export class Scene {
       .on('clickGroup', (event) => {
         this.selecto!.clickTarget(event.inputEvent, event.inputTarget);
       })
+      .on('dragStart', (event) => {
+        this.ignoreDataUpdate = true;
+      })
+      .on('dragGroupStart', (event) => {
+        this.ignoreDataUpdate = true;
+      })
       .on('drag', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         targetedElement!.applyDrag(event);
@@ -336,6 +343,17 @@ export class Scene {
           targetedElement!.applyDrag(event);
         });
       })
+      .on('dragGroupEnd', (e) => {
+        e.events.forEach((event) => {
+          const targetedElement = this.findElementByTarget(event.target);
+          if (targetedElement) {
+            targetedElement.setPlacementFromConstraint();
+          }
+        });
+
+        this.moved.next(Date.now());
+        this.ignoreDataUpdate = false;
+      })
       .on('dragEnd', (event) => {
         const targetedElement = this.findElementByTarget(event.target);
         if (targetedElement) {
@@ -343,6 +361,7 @@ export class Scene {
         }
 
         this.moved.next(Date.now());
+        this.ignoreDataUpdate = false;
       })
       .on('resizeStart', (event) => {
         const targetedElement = this.findElementByTarget(event.target);

public/app/plugins/panel/canvas/CanvasPanel.tsx

@@ -139,7 +139,8 @@ export class CanvasPanel extends Component<Props, State> {
       this.scene.updateSize(nextProps.width, nextProps.height);
       changed = true;
     }
-    if (data !== nextProps.data) {
+
+    if (data !== nextProps.data && !this.scene.ignoreDataUpdate) {
       this.scene.updateData(nextProps.data);
       changed = true;
     }