Revert "Add a magnifying glass example (#2419)"

[wcandillon]

This reverts commit 391fb9a.

[wcandillon]

@rayronvictor my apologies for the revert. I found some issues with the example. Some I could fix, some that would take a bit more time to fix.

One easy one is that it should use gesture handler instead of onTouch:

  const gesture = Gesture.Pan()
    .onStart((e) => {
      touchPosX.value = e.x;
      touchPosY.value = e.y;
      drawing.value = 1;
    })
    .onChange((e) => {
      touchPosX.value = e.x;
      touchPosY.value = e.y;
    })
    .onEnd(() => {
      drawing.value = 0;
    });

The other one that would take more time to address (but if you would like to, I would love to merge it), is that this example should probably not use RuntimeShader but rather Shader (and have ImageShader as a child) and in the uniform you should know the dimensions of the image so that you can sample it properly and benefit from a "real zoom" effect if that makes sense.

Let me know your thoughts on this and my apologies for the mix up.

[github-actions]

🎉 This PR is included in version 1.3.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[rayronvictor]

Hi @wcandillon,

No worries at all, and thank you for pointing out the issues!

I switched to the gesture handler as you suggested and changed to Shader/ImageShader. Should I open another Pull Request?

[rayronvictor]

Gravacao.de.Tela.2024-06-14.as.17.06.43.mp4

const gesture = Gesture.Pan()
  .minDistance(0)
  .onBegin((e) => {
    touchPosX.value = e.x;
    touchPosY.value = e.y;
    drawing.value = 1;
  })
  .onChange((e) => {
    touchPosX.value = e.x;
    touchPosY.value = e.y;
  })
  .onFinalize(() => {
    drawing.value = 0;
  });
    
const uniforms = useDerivedValue(() => {
  return {
    screen: vec(canvasWidth.value, canvasHeight.value),
    touchPos: vec(touchPosX.value, touchPosY.value),
    drawing: drawing.value,
    zoomLevel: zoomLevel.value,
    magnifierDiameter: magnifierDiameter.value,
    isFixed: isFixedSharedValue.value,
  };
});

<GestureDetector gesture={gesture}>
  <Canvas
    style={StyleSheet.absoluteFill}
    mode="continuous"
    onLayout={handleCanvasLayoutChange}
  >
    <Fill>
      <Shader source={source} uniforms={uniforms}>
        <ImageShader
          image={image}
          fit="cover"
          x={0}
          y={0}
          width={canvasWidth}
          height={canvasHeight}
        />
      </Shader>
    </Fill>
  </Canvas>
</GestureDetector>

[rayronvictor]

PR created #2485