Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes for drop offset issues of canvas

Browse source
This commit is contained in:
navaneeth 2021-05-01 17:09:20 +05:30
parent 43c61f48e6
commit d174f7f32c
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/Editor/Container.jsx
View file

@ -8,7 +8,7 @@ import { componentTypes } from './Components/components';
import { computeComponentName } from '@/_helpers/utils'; import { computeComponentName } from '@/_helpers/utils';
const styles = { const styles = {
width: 1290, width: 1292,
height: 1200, height: 1200,
position: 'absolute' position: 'absolute'
}; };
@ -78,6 +78,8 @@ export const Container = ({
let left = 0; let left = 0;
let top = 0; let top = 0;
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
// Component already exists and this is just a reposition event // Component already exists and this is just a reposition event
if (id) { if (id) {
const delta = monitor.getDifferenceFromInitialOffset(); const delta = monitor.getDifferenceFromInitialOffset();
@ -91,10 +93,8 @@ export const Container = ({
componentData = JSON.parse(JSON.stringify(componentMeta)); componentData = JSON.parse(JSON.stringify(componentMeta));
componentData.name = computeComponentName(componentData.component, boxes); componentData.name = computeComponentName(componentData.component, boxes);
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
const offsetFromTopOfWindow = canvasBoundingRect.top; const offsetFromTopOfWindow = canvasBoundingRect.top;
const offsetFromLeftOfWindow = canvasBoundingRect.left; const offsetFromLeftOfWindow = canvasBoundingRect.left;
const currentOffset = monitor.getSourceClientOffset(); const currentOffset = monitor.getSourceClientOffset();
left = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow); left = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);

12
frontend/src/Editor/CustomDragLayer.jsx
View file

@ -23,13 +23,17 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
let id = item.id; let id = item.id;
const canvasContainerBoundingRect = document.getElementsByClassName('canvas-container')[0].getBoundingClientRect();
const realCanvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
const realCanvasDelta = realCanvasBoundingRect.x - canvasContainerBoundingRect.x;
if (id) { // Dragging within the canvas if (id) { // Dragging within the canvas
x = Math.round(item.left + delta.x); x = Math.round(item.left + delta.x);
y = Math.round(item.top + delta.y); y = Math.round(item.top + delta.y);
} else { // New component being dragged from components sidebar } else { // New component being dragged from components sidebar
const canvasBoundingRect = document.getElementsByClassName('real-canvas')[0].getBoundingClientRect(); const offsetFromTopOfWindow = realCanvasBoundingRect.top;
const offsetFromTopOfWindow = canvasBoundingRect.top; const offsetFromLeftOfWindow = realCanvasBoundingRect.left;
const offsetFromLeftOfWindow = canvasBoundingRect.left;
const zoomLevel = item.zoomLevel; const zoomLevel = item.zoomLevel;
x = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow); x = Math.round(currentOffset.x + (currentOffset.x * (1 - zoomLevel)) - offsetFromLeftOfWindow);
@ -38,6 +42,8 @@ function getItemStyles(delta, item, initialOffset, currentOffset) {
[x, y] = snapToGrid(x, y); [x, y] = snapToGrid(x, y);
x += realCanvasDelta;
const transform = `translate(${x}px, ${y}px)`; const transform = `translate(${x}px, ${y}px)`;
return { return {
transform, transform,