Skip to content

Commit

Permalink
🐛 Fixed pinch zooming mouse issue (with ctrl key) (#940)
Browse files Browse the repository at this point in the history
**Fixed the drastic zoom increase decrease on ctrl + mouse scroll.**

The issue was occuring due to the "scale" property in the pinch gesture.
The scale was getting bigger values, leading to more zooming.
What I did was, made sure that maximum scale difference between current
and last value cannot be more than the scaling factor used in
zoomin/zoomout buttons. That is. 0.2
Also, the pinch zoom would work as expected.

/claim #567
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
### Summary by CodeRabbit

- Improvement: Enhanced zoom precision in the Graph component. This
update allows for more accurate scaling when adjusting the view in the
graph builder. The change ensures that the zoom level adjusts more
precisely, providing a smoother and more controlled user experience when
interacting with graphs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
  • Loading branch information
prateekkalra authored Oct 18, 2023
1 parent df3a17e commit 2c15662
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion apps/builder/src/features/graph/components/Graph.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,12 @@ export const Graph = ({
}) => {
const { x: mouseX, y } = mousePosition ?? getCenterOfGraph()
const mouseY = y - headerHeight
let newScale = scale ?? graphPosition.scale + (delta ?? 0)
let newScale = graphPosition.scale + (delta ?? 0)
if (scale) {
const scaleDiff = scale - graphPosition.scale
newScale += Math.min(zoomButtonsScaleBlock, Math.abs(scaleDiff)) * Math.sign(scaleDiff)
}

if (
(newScale >= maxScale && graphPosition.scale === maxScale) ||
(newScale <= minScale && graphPosition.scale === minScale)
Expand Down

2 comments on commit 2c15662

@vercel
Copy link

@vercel vercel bot commented on 2c15662 Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

builder-v2-git-main-typebot-io.vercel.app
builder-v2-typebot-io.vercel.app
app.typebot.io

@vercel
Copy link

@vercel vercel bot commented on 2c15662 Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

viewer-v2 – ./apps/viewer

fitness.riku.ai
games.klujo.com
iludogaming.com
ironcitygym.com
localove.online
marksteward.org
mikestuward.org
projektelco.com
proscale.com.br
sellmycarbr.com
share.bot.gives
svhmapp.mprs.in
tanjakoil.store
typebot.aloe.do
acordo-certo.com
app-liberado.pro
ask.pemantau.org
batepapo.digital
bot.contakit.com
bot.imovfast.com
bot.lafabri.link
bot.piccinato.co
chat.sifucrm.com
chat.syncwin.com
chatonlineja.com
clo.closeer.work
cockroach.cr8.ai
demo.chatjer.com
desafioem21d.com
digitando.online
faqs.nigerias.io
feiraodehoje.com
georgemarttt.com
go.chatbotcv.com
guiascore900.com
haymanevents.com
kw.wpwakanda.com
localamor.online
lojamundobox.com
my.skillbrow.com
myrentalhost.com
nadieralatif.com
pray.jetdigi.com
silvercop.com.br
silvercop.online
stan.vselise.com
typebot.aloe.bot
vidalimentar.com
voicehelp.cr8.ai
web.bjogador.com
chat.ertcrebateportal.com
chat.hackercontrol.com.br
chat.sucessonarede.com.br
chat.thehomebuyersusa.com
chat.thisiscrushhouse.com
chat2.ambassadorelena.com
consulta.jornalextra.site
healthandsafetycourses.uk
hennas.dermomakeup.com.br
imageuploadbot.share5.net
marketing.solidrock.space
mdb.eventos2.progenbr.com
programarejuvenescer.site
viewer-v2-typebot-io.vercel.app
mdb.assessoria.mauricio.progenbr.com
mdb.evento.autocadastro.progenbr.com
form.shopmercedesbenzsouthorlando.com
mdb.evento.equipeinterna.progenbr.com
bot.studiotecnicoimmobiliaremerelli.it
mdb.assessoria.boaventura.progenbr.com
mdb.assessoria.jtrebesqui.progenbr.com
pesquisa.escolamodacomproposito.com.br
anamnese.clinicaramosodontologia.com.br
gabinete.baleia.formulario.progenbr.com
mdb.assessoria.carreirinha.progenbr.com
chrome-os-inquiry-system.itschromeos.com
mdb.assessoria.paulomarques.progenbr.com
viewer-v2-git-main-typebot-io.vercel.app
main-menu-for-itschromeos.itschromeos.com
mdb.assessoria.qrcode.ademir.progenbr.com
mdb.assessoria.qrcode.arthur.progenbr.com
mdb.assessoria.qrcode.danilo.progenbr.com
mdb.assessoria.qrcode.marcao.progenbr.com
mdb.assessoria.qrcode.marcio.progenbr.com
mdb.assessoria.qrcode.aloisio.progenbr.com
mdb.assessoria.qrcode.girotto.progenbr.com
mdb.assessoria.qrcode.marinho.progenbr.com
mdb.assessoria.qrcode.rodrigo.progenbr.com
mdb.assessoria.carlosalexandre.progenbr.com
mdb.assessoria.qrcode.desideri.progenbr.com
mdb.assessoria.qrcode.fernanda.progenbr.com
mdb.assessoria.qrcode.jbatista.progenbr.com
mdb.assessoria.qrcode.mauricio.progenbr.com
mdb.assessoria.fernanda.regional.progenbr.com
mdb.assessoria.qrcode.boaventura.progenbr.com
mdb.assessoria.qrcode.jtrebesqui.progenbr.com
mdb.assessoria.qrcode.carreirinha.progenbr.com
mdb.assessoria.qrcode.paulomarques.progenbr.com
mdb.assessoria.qrcode.carlosalexandre.progenbr.com
mdb.assessoria.qrcode.fernanda.regional.progenbr.com

Please sign in to comment.