public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply transformScale to drag and resize

Browse Source
This commit is contained in:
drew08t
2023-10-26 17:16:38 -07:00
parent ba908f7235
commit 95de3ebcb1
2 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/canvas/runtime/element.tsx
+10 -10
View File
@@ -197,7 +197,7 @@ export class ElementState implements LayerElement {
}
}
setPlacementFromConstraint(elementContainer?: DOMRect, parentContainer?: DOMRect) {
setPlacementFromConstraint(elementContainer?: DOMRect, parentContainer?: DOMRect, transformScale = 1) {
const { constraint } = this.options;
const { vertical, horizontal } = constraint ?? {};
@@ -214,25 +214,25 @@ export class ElementState implements LayerElement {
const relativeTop =
elementContainer && parentContainer
? Math.round(elementContainer.top - parentContainer.top - parentBorderWidth)
? Math.round(elementContainer.top - parentContainer.top - parentBorderWidth) / transformScale
: 0;
const relativeBottom =
elementContainer && parentContainer
? Math.round(parentContainer.bottom - parentBorderWidth - elementContainer.bottom)
? Math.round(parentContainer.bottom - parentBorderWidth - elementContainer.bottom) / transformScale
: 0;
const relativeLeft =
elementContainer && parentContainer
? Math.round(elementContainer.left - parentContainer.left - parentBorderWidth)
? Math.round(elementContainer.left - parentContainer.left - parentBorderWidth) / transformScale
: 0;
const relativeRight =
elementContainer && parentContainer
? Math.round(parentContainer.right - parentBorderWidth - elementContainer.right)
? Math.round(parentContainer.right - parentBorderWidth - elementContainer.right) / transformScale
: 0;
const placement: Placement = {};
const width = elementContainer?.width ?? 100;
const height = elementContainer?.height ?? 100;
const width = (elementContainer?.width ?? 100) / transformScale;
const height = (elementContainer?.height ?? 100) / transformScale;
switch (vertical) {
case VerticalConstraint.Top:
@@ -427,12 +427,12 @@ export class ElementState implements LayerElement {
// kinda like:
// https://github.com/grafana/grafana-edge-app/blob/main/src/panels/draw/WrapItem.tsx#L44
applyResize = (event: OnResize) => {
applyResize = (event: OnResize, transformScale = 1) => {
const placement = this.options.placement!;
const style = event.target.style;
const deltaX = event.delta[0];
const deltaY = event.delta[1];
const deltaX = event.delta[0] / transformScale;
const deltaY = event.delta[1] / transformScale;
const dirLR = event.direction[0];
const dirTB = event.direction[1];
public/app/features/canvas/runtime/scene.tsx
+17 -4
View File
@@ -403,6 +403,7 @@ export class Scene {
},
origin: false,
className: this.styles.selected,
// rootContainer: this.transformComponentRef?.current?.instance.contentComponent, // TODO why does this not work?
})
.on('click', (event) => {
const targetedElement = this.findElementByTarget(event.target);
@@ -465,7 +466,11 @@ export class Scene {
.on('dragEnd', (event) => {
const targetedElement = this.findElementByTarget(event.target);
if (targetedElement) {
targetedElement.setPlacementFromConstraint();
targetedElement.setPlacementFromConstraint(
undefined,
undefined,
this.transformComponentRef?.current?.instance.transformState.scale
);
}
this.moved.next(Date.now());
@@ -481,13 +486,17 @@ export class Scene {
vertical: VerticalConstraint.Top,
horizontal: HorizontalConstraint.Left,
};
targetedElement.setPlacementFromConstraint();
targetedElement.setPlacementFromConstraint(
undefined,
undefined,
this.transformComponentRef?.current?.instance.transformState.scale
);
}
})
.on('resize', (event) => {
const targetedElement = this.findElementByTarget(event.target);
if (targetedElement) {
targetedElement.applyResize(event);
targetedElement.applyResize(event, this.transformComponentRef?.current?.instance.transformState.scale);
if (this.connections.connectionsNeedUpdate(targetedElement) && this.moveableActionCallback) {
this.moveableActionCallback(true);
@@ -523,7 +532,11 @@ export class Scene {
targetedElement.tempConstraint = undefined;
}
targetedElement.setPlacementFromConstraint();
targetedElement.setPlacementFromConstraint(
undefined,
undefined,
this.transformComponentRef?.current?.instance.transformState.scale
);
}
});