Add zoom functionality to wafermap

[arinluca333]

Pull Request

🤨 Rationale

The wafer map needs to have a zoom functionality. This is provided by the d3 library.

👩‍💻 Implementation

Added a d3 zoom event on the canvas that modifies the transform of the zoom-container.

🧪 Testing

Tested the change in the storybook and added test for where we simulate a zooming events.

✅ Checklist

• [ x] I have updated the project documentation to reflect my changes or determined no changes are needed.

[jattasNI]

@arinluca333 friendly reminder to click the "Re-request review" button for Milan and I when this is ready for us to take another look. That's the signal we'll use to know that you've addressed everything you plan to or you need more input from us.

[arinluca333]

@arinluca333 friendly reminder to click the "Re-request review" button for Milan and I when this is ready for us to take another look. That's the signal we'll use to know that you've addressed everything you plan to or you need more input from us.

Thanks for the heads up!

[jattasNI]

We should remove this event listener in the disconnectedCallback, otherwise we'll end up with duplicate listeners if the same element is added, removed, and re-added to the page.

[jattasNI]

@arinluca333 I don't think the approach you used in removeEventListener() will work. I believe the add/remove functions track the listener function by reference. You're attempting to remove a new listener function which is a copy of the original one. So removeEventListener won't find any listener that matches it and will silently fail.

From the MDN docs:

Calling removeEventListener() with arguments that do not identify any currently registered event listener on the EventTarget has no effect.

Instead you need to save the event listener to a class member variable and pass that variable to both addEventListener and removeEventListener.

[jattasNI]

I filed #964 to you to track fixing this.

[rajsite]

Yep, the exact same function reference must be used, concretely (pseudocode):

class {
    private wheelHandler = () => {};

    connectedCallback() { this.canvas.addEventListener('wheel', wheelHandler);}
    disconnectedCallback() { this.canvas.removeEventListener('wheel', wheelHandler); }
}

[vikisekarNI]

Ignore the above mention. Was experimenting the PR tagging functionalities in GitHub