0

The given formula arranges the contents of the container according to the mouse movement.. the problem was in the size of the image, and in the fact that approaching along the x and y axes from different sides, the arrangement was calculated differently.

const zoomEffect = (event: any) => {
    setZoomMode(true);
    const xa = event.pageX-containerRef.current.offsetLeft;
    const xb = containerRef.current.offsetWidth;
    const xc = zoomRef.current?.getBoundingClientRect().width;
    const ya = event.pageY-containerRef.current.offsetTop;
    const yb = containerRef.current.offsetHeight;
    const yc = zoomRef.current?.getBoundingClientRect().height;
    setMouseCoords({
      x: xc ? -(xa)/(xb/((xc)-xb)) : 0,
      y: yc ? -(ya)/(yb/((yc)-yb)) : 0,
    });
  };

<div ref={conteinerRef} onMouseMove={zoomEffect}>
  <div style={{
    left: mouseCoords.x,
    top: mouseCoords.y,
  }}>
    <Img ref_={zoomRef} />
  </div>}
</div>
Nikita Štšigorjev
  • 35
  • 1
  • 7
  • Can you include a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)? Because right now we don't know what `conteinerRef` or `zoomRef` is, let alone the actual rendering of the content. – Reyno Apr 05 '23 at 13:35
  • What kind of optimisation are you hoping for? Have you measured the current code – evolutionxbox Apr 05 '23 at 13:36
  • I haven't measured it, but I would like to make it more readable somehow, I also added a bit of html to understand what it is. – Nikita Štšigorjev Apr 05 '23 at 13:40
  • May you clarify? Would you like it more readable or optimised for performance? – evolutionxbox Apr 05 '23 at 13:41
  • The code seems relatively simple and there isn't much room for optimization. Do you get performance issues? If so, can you provide information about what you're trying to do and what causes the performace issues? – Dimitar Apr 05 '23 at 13:43
  • If you can do better, all offers are welcome... – Nikita Štšigorjev Apr 05 '23 at 13:47
  • The thing is, you could easily ask Chat GPT to re-write the code and it will do a great job in a matter of seconds, so refactoring the code without actually improving performance is kind of pointless except for estetics. If you give us a more in-depth explanation about what seems to be throttling your performance, we can analyze the code and try to come up with a solution – Dimitar Apr 05 '23 at 14:49

1 Answers1

1

I don't know about the correctness of the formula, that's up to you, but I find it very confusing and convoluted with all these 2 letter variables.

I'd write it like this:


const zoomEffect = (event: any) => {
  setZoomMode(true);

  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = conteinerRef.current;
  const { width = 0, height = 0 } = zoomRef.current?.getBoundingClientRect() || {};

  setMouseCoords({
    x: width ? (offsetLeft - event.pageX) * (width - offsetWidth) / offsetWidth : 0,
    y: height ? (offsetTop - event.pageY) * (height - offsetHeight) / offsetHeight : 0
  });
};

The transforms, how I got from your form to mine.

  1. ((xc)-xb) === (xc-xb)
  2. a/(b/c) === a*c/b
  3. -(xa) and xa === a-b -> -xa === b-a or (containerRef.current.offsetLeft - event.pageX)
Thomas
  • 11,958
  • 1
  • 14
  • 23