From 6996f8c6cd647d0a6c4157f447dd14bf545d52df Mon Sep 17 00:00:00 2001 From: Andrey Taktaev Date: Fri, 15 Sep 2017 17:23:00 +0200 Subject: [PATCH] fix zooming when canvas not in the top left corner --- src/widgets/DiagramWidget.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/widgets/DiagramWidget.tsx b/src/widgets/DiagramWidget.tsx index 98791282..620f21d1 100644 --- a/src/widgets/DiagramWidget.tsx +++ b/src/widgets/DiagramWidget.tsx @@ -345,14 +345,19 @@ export class DiagramWidget extends React.Component { const zoomFactor = diagramModel.getZoomLevel() / 100; - const clientWidth = event.currentTarget.clientWidth; - const clientHeight = event.currentTarget.clientHeight; - + const boundingRect = event.currentTarget.getBoundingClientRect(); + const clientWidth = boundingRect.width; + const clientHeight = boundingRect.height; + // compute difference between rect before and after scroll const widthDiff = clientWidth * zoomFactor - clientWidth * oldZoomFactor; const heightDiff = clientHeight * zoomFactor - clientHeight * oldZoomFactor; + // compute mouse coords relative to canvas + const clientX = event.clientX - boundingRect.left; + const clientY = event.clientY - boundingRect.top; - const xFactor = (event.clientX - diagramModel.getOffsetX()) / oldZoomFactor / clientWidth; - const yFactor = (event.clientY - diagramModel.getOffsetY()) / oldZoomFactor / clientHeight; + // compute width and height increment factor + const xFactor = (clientX - diagramModel.getOffsetX()) / oldZoomFactor / clientWidth; + const yFactor = (clientY - diagramModel.getOffsetY()) / oldZoomFactor / clientHeight; diagramModel.setOffset( diagramModel.getOffsetX() - widthDiff * xFactor,