root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 142 Packages Projects Releases Wiki Activity

fix(canvas): jumpy elements behaviour on select and drag

This commit is contained in:
Ihor Yeromin 2025-04-28 17:08:50 +02:00
parent 6b9f800728
commit a03c82e30e
2 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/canvas/runtime/element.tsx
View File

@ -614,14 +614,14 @@ export class ElementState implements LayerElement {
} else if (dirLR === -1) {
placement.left! -= deltaX;
placement.width = event.width;
style.left = `${placement.left}px`;
style.transform = `translate(${placement.left}px, ${placement.top}px)`;
style.width = `${placement.width}px`;
}
if (dirTB === -1) {
placement.top! -= deltaY;
placement.height = event.height;
style.top = `${placement.top}px`;
style.transform = `translate(${placement.left}px, ${placement.top}px)`;
style.height = `${placement.height}px`;
} else if (dirTB === 1) {
placement.height = event.height;

26
public/app/features/canvas/runtime/sceneAbleManagement.ts
View File

@ -7,7 +7,6 @@ import {
CONNECTION_VERTEX_ID,
CONNECTION_VERTEX_ADD_ID,
} from 'app/plugins/panel/canvas/components/connections/Connections';
import { VerticalConstraint, HorizontalConstraint } from 'app/plugins/panel/canvas/panelcfg.gen';
import { getElementTransformAndDimensions } from 'app/plugins/panel/canvas/utils';
import { dimensionViewable, constraintViewable, settingsViewable } from './ables';
@ -221,10 +220,8 @@ export const initMoveable = (destroySelecto = false, allowChanges = true, scene:
e.events.forEach((event) => {
const targetedElement = findElementByTarget(event.target, scene.root.elements);
if (targetedElement) {
if (targetedElement) {
// targetedElement.setPlacementFromConstraint(undefined, undefined, scene.scale);
targetedElement.setPlacementFromConstraint(undefined, undefined);
}
const { top, left } = getElementTransformAndDimensions(targetedElement.div!);
targetedElement.setPlacementFromGlobalCoordinates(left, top);
// re-add the selected elements to the snappable guidelines
if (scene.moveable && scene.moveable.elementGuidelines) {
@ -266,13 +263,8 @@ export const initMoveable = (destroySelecto = false, allowChanges = true, scene:
}
}
targetedElement.tempConstraint = { ...targetedElement.options.constraint };
targetedElement.options.constraint = {
vertical: VerticalConstraint.Top,
horizontal: HorizontalConstraint.Left,
};
// targetedElement.setPlacementFromConstraint(undefined, undefined, scene.scale);
targetedElement.setPlacementFromConstraint(undefined, undefined);
const { top, left } = getElementTransformAndDimensions(targetedElement.div!);
targetedElement.setPlacementFromGlobalCoordinates(left, top);
}
})
.on('resizeGroupStart', (e) => {
@ -289,7 +281,6 @@ export const initMoveable = (destroySelecto = false, allowChanges = true, scene:
.on('resize', (event) => {
const targetedElement = findElementByTarget(event.target, scene.root.elements);
if (targetedElement) {
// targetedElement.applyResize(event, scene.scale);
targetedElement.applyResize(event);
if (scene.connections.connectionsNeedUpdate(targetedElement) && scene.moveableActionCallback) {
@ -321,13 +312,8 @@ export const initMoveable = (destroySelecto = false, allowChanges = true, scene:
const targetedElement = findElementByTarget(event.target, scene.root.elements);
if (targetedElement) {
if (targetedElement.tempConstraint) {
targetedElement.options.constraint = targetedElement.tempConstraint;
targetedElement.tempConstraint = undefined;
}
// targetedElement.setPlacementFromConstraint(undefined, undefined, scene.scale);
targetedElement.setPlacementFromConstraint(undefined, undefined);
const { top, left } = getElementTransformAndDimensions(targetedElement.div!);
targetedElement.setPlacementFromGlobalCoordinates(left, top);
// re-add the selected element to the snappable guidelines
if (scene.moveable && scene.moveable.elementGuidelines) {