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) { } else if (dirLR === -1) {
placement.left! -= deltaX; placement.left! -= deltaX;
placement.width = event.width; placement.width = event.width;
style.left = `${placement.left}px`; style.transform = `translate(${placement.left}px, ${placement.top}px)`;
style.width = `${placement.width}px`; style.width = `${placement.width}px`;
} }
if (dirTB === -1) { if (dirTB === -1) {
placement.top! -= deltaY; placement.top! -= deltaY;
placement.height = event.height; placement.height = event.height;
style.top = `${placement.top}px`; style.transform = `translate(${placement.left}px, ${placement.top}px)`;
style.height = `${placement.height}px`; style.height = `${placement.height}px`;
} else if (dirTB === 1) { } else if (dirTB === 1) {
placement.height = event.height; placement.height = event.height;

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

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