fix #175: zoom effect for schematic view

[rohittcodes]

schematic-zoom.mp4

/claim #175

fixes: #175

[vercel]

@rohittcodes is attempting to deploy a commit to the tscircuit Team on Vercel.

A member of the Team first needs to authorize it.

[algora-pbc]

💵 To receive payouts, sign up on Algora, link your Github account and connect with Stripe.

[rohittcodes]

Lemme know if it's okay, I forgot this point,

I don't want to get a bunch of mouse math into this project unnecessarily

I can iterate over the solution and will try to add the same to useMouseMatrixTransform and respective functions if required. I've not replaced the useMouseMatrixTransform, but included a little math to it, which isn't that complex, so I guess it won't be a problem.

[seveibar]

well done! Yes ideally this math is included in the useMouseMatrixTransform library- otherwise it's difficult for others to maintain who are less familiar with matrix math

Also, to get the checks to pass just run bun format.

Thanks really awesome work!

[rohittcodes]

okay sure!

[rohittcodes]

@seveibar won't this be ideal if I work on the particular package, where the function is implemented? or is it good to be merged?

I'm talking about this repo: use-mouse-matrix-transform

[seveibar]

Yea this is in part why I increased the bounty. First you have to reproduce the issue inside of use-mouse-matrix-transform (it has a way of creating examples if i remember correctly) then you have to fix the reproduction. The upside of doing this is nobody has to worry about this issue anymore because we use use-mouse-matrix-transform a lot

[seveibar]

I just verified that the issue seems to be present in that repo's example so you may not need to make a reproduction!

[Satvik1769]

Hi, I solved this issue in the use-mouse-matrix-transform by zooming the only required element to zoom instead of zooming every part of canvas. I hope this help please check out issue #3 of use-mouse-matrix-transform.

[rohittcodes]

i guess the issue isn't with the use-mouse-matrix-transform I've updated it without any matrix-math logic this time, it updates the containerBounds, and handles the interactions based on position and the dimensions.

  const updateContainerBounds = useCallback(() => {
    if (!containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    containerBoundsRef.current = {
      width: rect.width,
      x: rect.left,
      y: rect.top,
    }
    setContainerWidth(rect.width)
  }, [])

the issue which the example in the referenced repo was facing because of the relative property and due to the modification in dimensions using transform.d.
here's more about it:
seveibar/use-mouse-matrix-transform#4 (comment)

[seveibar]

@rohittcodes the code looks ok, but are all these changes necessary? Can you reduce it to the minimum set of things that fix the issue? If it's just adding relative, that's better than including unneeded changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
snippets	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 10, 2024 6:39am

[seveibar]

confirmed fix on preview, waiting to see if code can be reduced

[rohittcodes]

yeah reduced it! it was just the transformOrigin property

fix.mp4

[rohittcodes]

@seveibar you can review it. it was just the css property which we were missing most probably.