From d2b5e8b30d8d2d51b9f18c94bf57d2bdd39111b2 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 1 Oct 2024 17:02:23 +0200 Subject: [PATCH] =?UTF-8?q?feat(=F0=9F=94=A5):=20Remove=20deprecated=20onT?= =?UTF-8?q?ouch=20prop=20(#2669)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../android/cpp/jni/include/JniSkiaBaseView.h | 3 - .../android/cpp/jni/include/JniSkiaDomView.h | 6 - .../cpp/jni/include/JniSkiaPictureView.h | 5 - .../cpp/rnskia-android/RNSkAndroidView.h | 20 ---- .../reactnative/skia/SkiaBaseView.java | 72 ----------- packages/skia/cpp/rnskia/RNSkDomView.cpp | 79 ------------ packages/skia/cpp/rnskia/RNSkDomView.h | 39 +----- packages/skia/cpp/rnskia/RNSkInfoParameter.h | 52 +------- packages/skia/cpp/rnskia/RNSkView.h | 17 --- packages/skia/ios/RNSkia-iOS/SkiaUIView.mm | 51 -------- packages/skia/src/mock/index.ts | 1 - packages/skia/src/renderer/Canvas.tsx | 6 +- .../renderer/__tests__/TouchHandler.spec.tsx | 113 ------------------ .../skia/src/renderer/__tests__/setup.tsx | 2 - packages/skia/src/skia/web/JsiSkia.ts | 2 +- packages/skia/src/views/SkiaBaseWebView.tsx | 47 +------- packages/skia/src/views/SkiaDomView.tsx | 16 +-- packages/skia/src/views/SkiaDomView.web.tsx | 11 +- packages/skia/src/views/SkiaJSDomView.tsx | 16 +-- packages/skia/src/views/index.ts | 1 - packages/skia/src/views/types.ts | 32 ----- packages/skia/src/views/useTouchHandler.ts | 107 ----------------- 22 files changed, 16 insertions(+), 682 deletions(-) delete mode 100644 packages/skia/src/renderer/__tests__/TouchHandler.spec.tsx delete mode 100644 packages/skia/src/views/useTouchHandler.ts diff --git a/packages/skia/android/cpp/jni/include/JniSkiaBaseView.h b/packages/skia/android/cpp/jni/include/JniSkiaBaseView.h index c23b7eeae3..434b330df4 100644 --- a/packages/skia/android/cpp/jni/include/JniSkiaBaseView.h +++ b/packages/skia/android/cpp/jni/include/JniSkiaBaseView.h @@ -29,9 +29,6 @@ class JniSkiaBaseView { } protected: - virtual void updateTouchPoints(jni::JArrayDouble touches) { - _skiaAndroidView->updateTouchPoints(touches); - } virtual void surfaceAvailable(jobject surface, int width, int height) { _skiaAndroidView->surfaceAvailable(surface, width, height); diff --git a/packages/skia/android/cpp/jni/include/JniSkiaDomView.h b/packages/skia/android/cpp/jni/include/JniSkiaDomView.h index ea565eecc5..0c1ac6e791 100644 --- a/packages/skia/android/cpp/jni/include/JniSkiaDomView.h +++ b/packages/skia/android/cpp/jni/include/JniSkiaDomView.h @@ -42,17 +42,11 @@ class JniSkiaDomView : public jni::HybridClass, JniSkiaDomView::surfaceSizeChanged), makeNativeMethod("setMode", JniSkiaDomView::setMode), makeNativeMethod("setDebugMode", JniSkiaDomView::setDebugMode), - makeNativeMethod("updateTouchPoints", - JniSkiaDomView::updateTouchPoints), makeNativeMethod("registerView", JniSkiaDomView::registerView), makeNativeMethod("unregisterView", JniSkiaDomView::unregisterView)}); } protected: - void updateTouchPoints(jni::JArrayDouble touches) override { - JniSkiaBaseView::updateTouchPoints(touches); - } - void surfaceAvailable(jobject surface, int width, int height) override { JniSkiaBaseView::surfaceAvailable(surface, width, height); } diff --git a/packages/skia/android/cpp/jni/include/JniSkiaPictureView.h b/packages/skia/android/cpp/jni/include/JniSkiaPictureView.h index a1b46a536d..dc5d265b93 100644 --- a/packages/skia/android/cpp/jni/include/JniSkiaPictureView.h +++ b/packages/skia/android/cpp/jni/include/JniSkiaPictureView.h @@ -43,17 +43,12 @@ class JniSkiaPictureView : public jni::HybridClass, JniSkiaPictureView::surfaceSizeChanged), makeNativeMethod("setMode", JniSkiaPictureView::setMode), makeNativeMethod("setDebugMode", JniSkiaPictureView::setDebugMode), - makeNativeMethod("updateTouchPoints", - JniSkiaPictureView::updateTouchPoints), makeNativeMethod("registerView", JniSkiaPictureView::registerView), makeNativeMethod("unregisterView", JniSkiaPictureView::unregisterView)}); } protected: - void updateTouchPoints(jni::JArrayDouble touches) override { - JniSkiaBaseView::updateTouchPoints(touches); - } void surfaceAvailable(jobject surface, int width, int height) override { JniSkiaBaseView::surfaceAvailable(surface, width, height); diff --git a/packages/skia/android/cpp/rnskia-android/RNSkAndroidView.h b/packages/skia/android/cpp/rnskia-android/RNSkAndroidView.h index 0d65ceecbb..8bdc60df63 100644 --- a/packages/skia/android/cpp/rnskia-android/RNSkAndroidView.h +++ b/packages/skia/android/cpp/rnskia-android/RNSkAndroidView.h @@ -19,8 +19,6 @@ class RNSkBaseAndroidView { virtual float getPixelDensity() = 0; - virtual void updateTouchPoints(jni::JArrayDouble touches) = 0; - virtual void setMode(std::string mode) = 0; virtual void setShowDebugInfo(bool show) = 0; @@ -76,24 +74,6 @@ class RNSkAndroidView : public T, public RNSkBaseAndroidView { void viewDidUnmount() override { T::endDrawingLoop(); } - void updateTouchPoints(jni::JArrayDouble touches) override { - // Create touch points - std::vector points; - auto pin = touches.pin(); - auto scale = getPixelDensity(); - points.reserve(pin.size() / 5); - for (size_t i = 0; i < pin.size(); i += 5) { - RNSkTouchInfo point; - point.x = pin[i] / scale; - point.y = pin[i + 1] / scale; - point.force = pin[i + 2]; - point.type = (RNSkia::RNSkTouchInfo::TouchType)pin[i + 3]; - point.id = pin[i + 4]; - points.push_back(point); - } - T::updateTouchState(points); - } - std::shared_ptr getSkiaView() override { return T::shared_from_this(); } diff --git a/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java b/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java index f8a542734d..f3dd928a8e 100644 --- a/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java +++ b/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java @@ -53,76 +53,6 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto mTexture.layout(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight()); } - @Override - public boolean onTouchEvent(MotionEvent ev) { - // https://developer.android.com/training/gestures/multi - int action = ev.getActionMasked(); - - MotionEvent.PointerCoords r = new MotionEvent.PointerCoords(); - - double[] points; - - // If this is a pointer_up/down event we need to handle it a bit specialized - switch (action) { - case MotionEvent.ACTION_POINTER_DOWN: - case MotionEvent.ACTION_POINTER_UP: { - points = new double[5]; - int pointerIndex = ev.getActionIndex(); - ev.getPointerCoords(pointerIndex, r); - points[0] = r.x; - points[1] = r.y; - points[2] = ev.getPressure(pointerIndex); - points[3] = motionActionToType(action); - points[4] = ev.getPointerId(pointerIndex); - - updateTouchPoints(points); - - break; - } - default: { - // For the rest we can just handle it like expected - int count = ev.getPointerCount(); - int pointerIndex = 0; - points = new double[5 * count]; - for (int i = 0; i < count; i++) { - ev.getPointerCoords(i, r); - points[pointerIndex++] = r.x; - points[pointerIndex++] = r.y; - points[pointerIndex++] = ev.getPressure(i); - points[pointerIndex++] = motionActionToType(action); - points[pointerIndex++] = ev.getPointerId(i); - } - - updateTouchPoints(points); - - break; - } - } - - return true; - } - - private static int motionActionToType(int action) { - int actionType = 3; - switch (action) { - case MotionEvent.ACTION_DOWN: - case MotionEvent.ACTION_POINTER_DOWN: - actionType = 0; - break; - case MotionEvent.ACTION_MOVE: - actionType = 1; - break; - case MotionEvent.ACTION_UP: - case MotionEvent.ACTION_POINTER_UP: - actionType = 2; - break; - case MotionEvent.ACTION_CANCEL: - actionType = 3; - break; - } - return actionType; - } - @Override public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) { Log.i(tag, "onSurfaceTextureAvailable " + width + "/" + height); @@ -172,8 +102,6 @@ public void onSurfaceTextureUpdated(SurfaceTexture surface) { protected abstract void setDebugMode(boolean show); - protected abstract void updateTouchPoints(double[] points); - protected abstract void registerView(int nativeId); protected abstract void unregisterView(); diff --git a/packages/skia/cpp/rnskia/RNSkDomView.cpp b/packages/skia/cpp/rnskia/RNSkDomView.cpp index 60c9b62c4a..7e53e71ab7 100644 --- a/packages/skia/cpp/rnskia/RNSkDomView.cpp +++ b/packages/skia/cpp/rnskia/RNSkDomView.cpp @@ -17,7 +17,6 @@ RNSkDomRenderer::RNSkDomRenderer(std::function requestRedraw, std::shared_ptr context) : RNSkRenderer(requestRedraw), _platformContext(std::move(context)), _renderLock(std::make_shared()), - _touchCallbackLock(std::make_shared()), _renderTimingInfo("SKIA/RENDER") {} RNSkDomRenderer::~RNSkDomRenderer() { @@ -29,10 +28,6 @@ RNSkDomRenderer::~RNSkDomRenderer() { bool RNSkDomRenderer::tryRender( std::shared_ptr canvasProvider) { - // If we have touches we need to call the touch callback as well - if (_currentTouches.size() > 0) { - callOnTouch(); - } // We render on the main thread if (_renderLock->try_lock()) { @@ -70,11 +65,6 @@ void RNSkDomRenderer::setRoot(std::shared_ptr node) { _root = node; } -void RNSkDomRenderer::setOnTouchCallback( - std::shared_ptr onTouchCallback) { - _touchCallback = onTouchCallback; -} - void RNSkDomRenderer::renderCanvas(SkCanvas *canvas, float scaledWidth, float scaledHeight) { _renderTimingInfo.beginTiming(); @@ -125,75 +115,6 @@ void RNSkDomRenderer::renderCanvas(SkCanvas *canvas, float scaledWidth, _renderTimingInfo.stopTiming(); } -void RNSkDomRenderer::updateTouches(std::vector &touches) { - std::lock_guard lock(_touchMutex); - // Add timestamp - auto ms = std::chrono::duration_cast( - std::chrono::system_clock::now().time_since_epoch()) - .count(); - - for (size_t i = 0; i < touches.size(); i++) { - touches.at(i).timestamp = ms; - } - _currentTouches.push_back(std::move(touches)); -} - -void RNSkDomRenderer::callOnTouch() { - - if (_touchCallback == nullptr) { - return; - } - - if (_touchCallbackLock->try_lock()) { - - { - std::lock_guard lock(_touchMutex); - _touchesCache.clear(); - _touchesCache.reserve(_currentTouches.size()); - for (size_t i = 0; i < _currentTouches.size(); ++i) { - _touchesCache.push_back(_currentTouches.at(i)); - } - _currentTouches.clear(); - } - - // We have an onDraw method - use it to render since we don't have a - // DOM-node yet. - _platformContext->runOnJavascriptThread([weakSelf = weak_from_this()]() { - auto self = weakSelf.lock(); - if (self) { - jsi::Runtime &runtime = *self->_platformContext->getJsRuntime(); - // Set up touches - auto size = self->_touchesCache.size(); - auto ops = jsi::Array(runtime, size); - for (size_t i = 0; i < size; i++) { - auto cur = self->_touchesCache.at(i); - auto curSize = cur.size(); - auto touches = jsi::Array(runtime, curSize); - for (size_t n = 0; n < curSize; n++) { - auto touchObj = jsi::Object(runtime); - auto t = cur.at(n); - touchObj.setProperty(runtime, "x", t.x); - touchObj.setProperty(runtime, "y", t.y); - touchObj.setProperty(runtime, "force", t.force); - touchObj.setProperty(runtime, "type", static_cast(t.type)); - touchObj.setProperty(runtime, "timestamp", - static_cast(t.timestamp) / 1000.0); - touchObj.setProperty(runtime, "id", static_cast(t.id)); - touches.setValueAtIndex(runtime, n, touchObj); - } - ops.setValueAtIndex(runtime, i, touches); - } - // Call on touch callback - self->_touchCallback->call(runtime, ops, 1); - } - self->_touchCallbackLock->unlock(); - }); - } else { - // We'll try next time - schedule a new redraw - _requestRedraw(); - } -} - void RNSkDomRenderer::renderDebugOverlays(SkCanvas *canvas) { if (!getShowDebugOverlays()) { return; diff --git a/packages/skia/cpp/rnskia/RNSkDomView.h b/packages/skia/cpp/rnskia/RNSkDomView.h index 27bb74720f..8370d009ca 100644 --- a/packages/skia/cpp/rnskia/RNSkDomView.h +++ b/packages/skia/cpp/rnskia/RNSkDomView.h @@ -50,29 +50,19 @@ class RNSkDomRenderer : public RNSkRenderer, void setRoot(std::shared_ptr node); - void setOnTouchCallback(std::shared_ptr onTouchCallback); - - void updateTouches(std::vector &touches); - private: - void callOnTouch(); void renderCanvas(SkCanvas *canvas, float scaledWidth, float scaledHeight); void renderDebugOverlays(SkCanvas *canvas); std::shared_ptr _platformContext; - std::shared_ptr _touchCallback; std::shared_ptr _renderLock; - std::shared_ptr _touchCallbackLock; std::shared_ptr _root; std::shared_ptr _drawingContext; RNSkTimingInfo _renderTimingInfo; - std::mutex _touchMutex; - std::vector> _currentTouches; - std::vector> _touchesCache; std::mutex _rootLock; }; @@ -87,40 +77,13 @@ class RNSkDomView : public RNSkView { std::make_shared( std::bind(&RNSkView::requestRedraw, this), context)) {} - void updateTouchState(std::vector &touches) override { - std::static_pointer_cast(getRenderer()) - ->updateTouches(touches); - RNSkView::updateTouchState(touches); - } - void setJsiProperties( std::unordered_map &props) override { RNSkView::setJsiProperties(props); for (auto &prop : props) { - if (prop.first == "onTouch") { - if (prop.second.isUndefinedOrNull()) { - // Clear touchCallback - std::static_pointer_cast(getRenderer()) - ->setOnTouchCallback(nullptr); - requestRedraw(); - continue; - - } else if (prop.second.getType() != JsiWrapperValueType::Function) { - // We expect a function for the draw callback custom property - throw std::runtime_error( - "Expected a function for the onTouch property."); - } - - // Save callback - std::static_pointer_cast(getRenderer()) - ->setOnTouchCallback(prop.second.getAsFunction()); - - // Request redraw - requestRedraw(); - - } else if (prop.first == "root") { + if (prop.first == "root") { // Save root if (prop.second.isUndefined() || prop.second.isNull()) { std::static_pointer_cast(getRenderer()) diff --git a/packages/skia/cpp/rnskia/RNSkInfoParameter.h b/packages/skia/cpp/rnskia/RNSkInfoParameter.h index aa981d63a3..872d1b206d 100644 --- a/packages/skia/cpp/rnskia/RNSkInfoParameter.h +++ b/packages/skia/cpp/rnskia/RNSkInfoParameter.h @@ -21,63 +21,18 @@ class RNSkInfoObject : public RNJsi::JsiHostObject { JSI_PROPERTY_GET(height) { return _height; } JSI_PROPERTY_GET(timestamp) { return _timestamp; } - JSI_PROPERTY_GET(touches) { - auto ops = jsi::Array(runtime, _touchesCache.size()); - for (size_t i = 0; i < _touchesCache.size(); i++) { - auto cur = _touchesCache.at(i); - auto touches = jsi::Array(runtime, cur.size()); - for (size_t n = 0; n < cur.size(); n++) { - auto touchObj = jsi::Object(runtime); - auto t = cur.at(n); - touchObj.setProperty(runtime, "x", t.x); - touchObj.setProperty(runtime, "y", t.y); - touchObj.setProperty(runtime, "force", t.force); - touchObj.setProperty(runtime, "type", static_cast(t.type)); - touchObj.setProperty(runtime, "timestamp", - static_cast(t.timestamp / 1000.0)); - touchObj.setProperty(runtime, "id", static_cast(t.id)); - touches.setValueAtIndex(runtime, n, touchObj); - } - ops.setValueAtIndex(runtime, i, touches); - } - return ops; - } - JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkInfoObject, width), JSI_EXPORT_PROP_GET(RNSkInfoObject, height), - JSI_EXPORT_PROP_GET(RNSkInfoObject, timestamp), - JSI_EXPORT_PROP_GET(RNSkInfoObject, touches)) + JSI_EXPORT_PROP_GET(RNSkInfoObject, timestamp)) void beginDrawOperation(int width, int height, double timestamp) { _width = width; _height = height; _timestamp = timestamp; - - // Copy touches so that we can continue to add/receive touch points while - // in the drawing callback. - std::lock_guard lock(_mutex); - _touchesCache.clear(); - _touchesCache.reserve(_currentTouches.size()); - for (size_t i = 0; i < _currentTouches.size(); ++i) { - _touchesCache.push_back(_currentTouches.at(i)); - } - _currentTouches.clear(); } - void endDrawOperation() { _touchesCache.clear(); } + void endDrawOperation() { } - void updateTouches(std::vector &touches) { - std::lock_guard lock(_mutex); - // Add timestamp - auto ms = std::chrono::duration_cast( - std::chrono::system_clock::now().time_since_epoch()) - .count(); - - for (size_t i = 0; i < touches.size(); i++) { - touches.at(i).timestamp = ms; - } - _currentTouches.push_back(std::move(touches)); - } RNSkInfoObject() : JsiHostObject() {} @@ -85,8 +40,5 @@ class RNSkInfoObject : public RNJsi::JsiHostObject { int _width; int _height; double _timestamp; - std::vector> _currentTouches; - std::vector> _touchesCache; - std::mutex _mutex; }; } // namespace RNSkia diff --git a/packages/skia/cpp/rnskia/RNSkView.h b/packages/skia/cpp/rnskia/RNSkView.h index 90c46f4a4f..1ec4a267bb 100644 --- a/packages/skia/cpp/rnskia/RNSkView.h +++ b/packages/skia/cpp/rnskia/RNSkView.h @@ -138,16 +138,6 @@ class RNSkOffscreenCanvasProvider : public RNSkCanvasProvider { enum RNSkDrawingMode { Default, Continuous }; -using RNSkTouchInfo = struct { - enum TouchType { Start, Active, End, Cancelled }; - double x; - double y; - double force; - TouchType type; - size_t id; - long timestamp; -}; - class RNSkView : public std::enable_shared_from_this { public: /** @@ -218,13 +208,6 @@ class RNSkView : public std::enable_shared_from_this { requestRedraw(); } - /** - Update touch state with new touch points - */ - virtual void updateTouchState(std::vector &) { - requestRedraw(); - } - /** Renders the view into an SkImage instead of the screen. */ diff --git a/packages/skia/ios/RNSkia-iOS/SkiaUIView.mm b/packages/skia/ios/RNSkia-iOS/SkiaUIView.mm index 4c08280bc5..44efd69506 100644 --- a/packages/skia/ios/RNSkia-iOS/SkiaUIView.mm +++ b/packages/skia/ios/RNSkia-iOS/SkiaUIView.mm @@ -177,55 +177,4 @@ - (void)setNativeId:(size_t)nativeId { return _impl; } -#pragma mark Touch handling - -- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { - [self handleTouches:touches withEvent:event]; -} - -- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { - [self handleTouches:touches withEvent:event]; -} - -- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { - [self handleTouches:touches withEvent:event]; -} - -- (void)handleTouches:(NSSet *)touches withEvent:(UIEvent *)event { - if (event.type == UIEventTypeTouches) { - std::vector nextTouches; - for (UITouch *touch in touches) { - auto position = [touch preciseLocationInView:self]; - RNSkia::RNSkTouchInfo nextTouch; - nextTouch.x = position.x; - nextTouch.y = position.y; - nextTouch.force = [touch force]; - nextTouch.id = [touch hash]; - auto phase = [touch phase]; - switch (phase) { - case UITouchPhaseBegan: - nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Start; - break; - case UITouchPhaseMoved: - nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active; - break; - case UITouchPhaseEnded: - nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::End; - break; - case UITouchPhaseCancelled: - nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Cancelled; - break; - default: - nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active; - break; - } - - nextTouches.push_back(nextTouch); - } - if (_impl != nullptr) { - _impl->getDrawView()->updateTouchState(nextTouches); - } - } -} - @end diff --git a/packages/skia/src/mock/index.ts b/packages/skia/src/mock/index.ts index af99b2a7b0..68d566d460 100644 --- a/packages/skia/src/mock/index.ts +++ b/packages/skia/src/mock/index.ts @@ -26,7 +26,6 @@ export const Mock = (CanvasKit: CanvasKit) => { // Skia Animations useValue: NoopValue, useComputedValue: NoopValue, - useTouchHandler: Noop, useTiming: NoopValue, useLoop: NoopValue, useSpring: NoopValue, diff --git a/packages/skia/src/renderer/Canvas.tsx b/packages/skia/src/renderer/Canvas.tsx index ec502e676c..90f1184886 100644 --- a/packages/skia/src/renderer/Canvas.tsx +++ b/packages/skia/src/renderer/Canvas.tsx @@ -16,7 +16,7 @@ import type { LayoutChangeEvent } from "react-native"; import { SkiaDomView } from "../views"; import { Skia } from "../skia/Skia"; -import type { TouchHandler, SkiaBaseViewProps } from "../views"; +import type { SkiaBaseViewProps } from "../views"; import { SkiaJSDomView } from "../views/SkiaJSDomView"; import { SkiaRoot } from "./Reconciler"; @@ -27,7 +27,6 @@ export const useCanvasRef = () => useRef(null); export interface CanvasProps extends SkiaBaseViewProps { ref?: RefObject; children: ReactNode; - onTouch?: TouchHandler; } const useOnSizeEvent = ( @@ -56,7 +55,6 @@ export const Canvas = forwardRef( style, debug, mode, - onTouch, onSize: _onSize, onLayout: _onLayout, ...props @@ -96,7 +94,6 @@ export const Canvas = forwardRef( ref={ref} style={style} root={root.dom} - onTouch={onTouch} onLayout={onLayout} mode={mode} debug={debug} @@ -111,7 +108,6 @@ export const Canvas = forwardRef( ref={ref as any} style={style} root={root.dom} - onTouch={onTouch} onLayout={onLayout} mode={mode} debug={debug} diff --git a/packages/skia/src/renderer/__tests__/TouchHandler.spec.tsx b/packages/skia/src/renderer/__tests__/TouchHandler.spec.tsx deleted file mode 100644 index ffd2959e43..0000000000 --- a/packages/skia/src/renderer/__tests__/TouchHandler.spec.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React from "react"; - -import { TouchType } from "../../views/types"; - -import type { EmptyProps } from "./setup"; -import { mountCanvas, importSkia } from "./setup"; - -const SimpleActiveTouch = ({}: EmptyProps) => { - const { useTouchHandler } = importSkia(); - const touchHandler = useTouchHandler({ - onStart: ({ x, y }) => { - expect(x).toBe(10); - expect(y).toBe(10); - }, - onActive: ({ x, y, velocityX, velocityY }) => { - expect(x).toBe(20); - expect(y).toBe(20); - expect(velocityX).toBe(10); - expect(velocityY).toBe(10); - }, - }); - const history = [ - [ - { - x: 10, - y: 10, - force: 0, - type: TouchType.Start, - id: 2, - timestamp: 0, - }, - ], - [ - { - x: 20, - y: 20, - force: 0, - type: TouchType.Active, - id: 2, - timestamp: 1, - }, - ], - ]; - touchHandler(history); - return null; -}; - -const SimpleEndTouch = ({}: EmptyProps) => { - const { useTouchHandler } = importSkia(); - const touchHandler = useTouchHandler({ - onStart: ({ x, y }) => { - expect(x).toBe(10); - expect(y).toBe(10); - }, - onActive: ({ x, y, velocityX, velocityY }) => { - expect(x).toBe(20); - expect(y).toBe(20); - expect(velocityX).toBe(10); - expect(velocityY).toBe(10); - }, - onEnd: ({ x, y, velocityX, velocityY }) => { - expect(x).toBe(30); - expect(y).toBe(30); - expect(velocityX).toBe(10); - expect(velocityY).toBe(10); - }, - }); - const history = [ - [ - { - x: 10, - y: 10, - force: 0, - type: TouchType.Start, - id: 2, - timestamp: 0, - }, - ], - [ - { - x: 20, - y: 20, - force: 0, - type: TouchType.Active, - id: 2, - timestamp: 1, - }, - ], - [ - { - x: 30, - y: 30, - force: 0, - type: TouchType.End, - id: 2, - timestamp: 2, - }, - ], - ]; - touchHandler(history); - return null; -}; - -describe("Test handling of touch information", () => { - it("Should check that the received values are correct", () => { - const { draw } = mountCanvas(); - draw(); - }); - it("Calculates the velocity properly onEnd event", () => { - const { draw } = mountCanvas(); - draw(); - }); -}); diff --git a/packages/skia/src/renderer/__tests__/setup.tsx b/packages/skia/src/renderer/__tests__/setup.tsx index 362444cb98..3f4d249414 100644 --- a/packages/skia/src/renderer/__tests__/setup.tsx +++ b/packages/skia/src/renderer/__tests__/setup.tsx @@ -164,13 +164,11 @@ export const importSkia = (): typeof SkiaExports => { const offscreen = require("../Offscreen"); // TODO: to remove const animation = require("../../animation"); - const useTouchHandler = require("../../views/useTouchHandler"); return { ...skia, ...renderer, ...animation, ...offscreen, - ...useTouchHandler, }; }; diff --git a/packages/skia/src/skia/web/JsiSkia.ts b/packages/skia/src/skia/web/JsiSkia.ts index 30f79286af..c3cf744fb2 100644 --- a/packages/skia/src/skia/web/JsiSkia.ts +++ b/packages/skia/src/skia/web/JsiSkia.ts @@ -131,5 +131,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({ Video: createVideo.bind(null, CanvasKit), Context: (_surface: bigint, _width: number, _height: number) => { throw new Error("Not implemented on React Native Web"); - } + }, }); diff --git a/packages/skia/src/views/SkiaBaseWebView.tsx b/packages/skia/src/views/SkiaBaseWebView.tsx index fdd341517d..d0f812321c 100644 --- a/packages/skia/src/views/SkiaBaseWebView.tsx +++ b/packages/skia/src/views/SkiaBaseWebView.tsx @@ -1,14 +1,12 @@ /* global HTMLCanvasElement */ import React from "react"; -import type { PointerEvent } from "react"; import type { LayoutChangeEvent } from "react-native"; import type { SkRect, SkCanvas } from "../skia/types"; import { JsiSkSurface } from "../skia/web/JsiSkSurface"; import { Platform } from "../Platform"; -import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types"; -import { TouchType } from "./types"; +import type { DrawMode, SkiaBaseViewProps } from "./types"; const pd = Platform.PixelRatio; @@ -22,7 +20,6 @@ export abstract class SkiaBaseWebView< private _surface: JsiSkSurface | null = null; private _unsubscriptions: Array<() => void> = []; - private _touches: Array = []; private _canvas: SkCanvas | null = null; private _canvasRef = React.createRef(); private _mode: DrawMode; @@ -95,7 +92,7 @@ export abstract class SkiaBaseWebView< */ public makeImageSnapshot(rect?: SkRect) { this._canvas!.clear(CanvasKit.TRANSPARENT); - this.renderInCanvas(this._canvas!, []); + this.renderInCanvas(this._canvas!); this._surface?.ref.flush(); return this._surface?.makeImageSnapshot(rect); } @@ -103,10 +100,7 @@ export abstract class SkiaBaseWebView< /** * Override to render */ - protected abstract renderInCanvas( - canvas: SkCanvas, - touches: TouchInfo[] - ): void; + protected abstract renderInCanvas(canvas: SkCanvas): void; /** * Sends a redraw request to the native SkiaView. @@ -115,13 +109,11 @@ export abstract class SkiaBaseWebView< if (this._mode === "continuous" || this._redrawRequests > 0) { this._redrawRequests = 0; if (this._canvas) { - const touches = [...this._touches]; - this._touches = []; const canvas = this._canvas!; canvas.clear(Float32Array.of(0, 0, 0, 0)); canvas.save(); canvas.scale(pd, pd); - this.renderInCanvas(canvas, touches); + this.renderInCanvas(canvas); canvas.restore(); this._surface?.ref.flush(); } @@ -147,42 +139,13 @@ export abstract class SkiaBaseWebView< this.tick(); } - private handleTouchEvent(evt: PointerEvent, touchType: TouchType) { - this._touches.push({ - id: evt.pointerId, - x: evt.clientX - evt.currentTarget.getClientRects()[0].left, - y: evt.clientY - evt.currentTarget.getClientRects()[0].top, - force: evt.pressure, - type: touchType, - timestamp: Date.now(), - }); - this.redraw(); - } - - createTouchHandler(touchType: TouchType) { - return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType); - } - - private onStart = this.createTouchHandler(TouchType.Start); - private onActive = this.createTouchHandler(TouchType.Active); - private onCancel = this.createTouchHandler(TouchType.Cancelled); - private onEnd = this.createTouchHandler(TouchType.End); private onLayout = this.onLayoutEvent.bind(this); render() { const { mode, debug = false, ...viewProps } = this.props; return ( - + ); } diff --git a/packages/skia/src/views/SkiaDomView.tsx b/packages/skia/src/views/SkiaDomView.tsx index 3f740e42e8..9997713db6 100644 --- a/packages/skia/src/views/SkiaDomView.tsx +++ b/packages/skia/src/views/SkiaDomView.tsx @@ -19,19 +19,11 @@ export class SkiaDomView extends React.Component { constructor(props: SkiaDomViewProps) { super(props); this._nativeId = SkiaViewNativeId.current++; - const { root, onTouch, onSize } = props; + const { root, onSize } = props; if (root) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "root", root); } - if (onTouch) { - assertSkiaViewApi(); - console.warn( - `The onTouch property is deprecated and will be removed in the next Skia release. -See: https://shopify.github.io/react-native-skia/docs/animations/gestures` - ); - SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch); - } if (onSize) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize); @@ -45,15 +37,11 @@ See: https://shopify.github.io/react-native-skia/docs/animations/gestures` } componentDidUpdate(prevProps: SkiaDomViewProps) { - const { root, onTouch, onSize } = this.props; + const { root, onSize } = this.props; if (root !== prevProps.root) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "root", root); } - if (onTouch !== prevProps.onTouch) { - assertSkiaViewApi(); - SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch); - } if (onSize !== prevProps.onSize) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize); diff --git a/packages/skia/src/views/SkiaDomView.web.tsx b/packages/skia/src/views/SkiaDomView.web.tsx index 1925f31991..73254587c7 100644 --- a/packages/skia/src/views/SkiaDomView.web.tsx +++ b/packages/skia/src/views/SkiaDomView.web.tsx @@ -3,21 +3,14 @@ import type { SkCanvas } from "../skia/types"; import { JsiDrawingContext } from "../dom/types/DrawingContext"; import { SkiaBaseWebView } from "./SkiaBaseWebView"; -import type { SkiaDomViewProps, TouchInfo } from "./types"; +import type { SkiaDomViewProps } from "./types"; export class SkiaDomView extends SkiaBaseWebView { constructor(props: SkiaDomViewProps) { super(props); } - protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void { - if (this.props.onTouch) { - console.warn( - `The onTouch property is deprecated and will be removed in the next Skia release. -See: https://shopify.github.io/react-native-skia/docs/animations/gestures` - ); - this.props.onTouch([touches]); - } + protected renderInCanvas(canvas: SkCanvas): void { if (this.props.onSize) { const { width, height } = this.getSize(); this.props.onSize.value = { width, height }; diff --git a/packages/skia/src/views/SkiaJSDomView.tsx b/packages/skia/src/views/SkiaJSDomView.tsx index 52c3c0faf6..65b41043f8 100644 --- a/packages/skia/src/views/SkiaJSDomView.tsx +++ b/packages/skia/src/views/SkiaJSDomView.tsx @@ -22,19 +22,11 @@ export class SkiaJSDomView extends React.Component< constructor(props: SkiaDomViewProps & { Skia: Skia }) { super(props); this._nativeId = SkiaViewNativeId.current++; - const { root, onTouch, onSize } = props; + const { root, onSize } = props; if (root) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "root", root); } - if (onTouch) { - assertSkiaViewApi(); - console.warn( - `The onTouch property is deprecated and will be removed in the next Skia release. -See: https://shopify.github.io/react-native-skia/docs/animations/gestures` - ); - SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch); - } if (onSize) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize); @@ -48,15 +40,11 @@ See: https://shopify.github.io/react-native-skia/docs/animations/gestures` } componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) { - const { root, onTouch, onSize } = this.props; + const { root, onSize } = this.props; if (root !== prevProps.root && root !== undefined) { assertSkiaViewApi(); this.draw(); } - if (onTouch !== prevProps.onTouch) { - assertSkiaViewApi(); - SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch); - } if (onSize !== prevProps.onSize) { assertSkiaViewApi(); SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize); diff --git a/packages/skia/src/views/index.ts b/packages/skia/src/views/index.ts index f73a08fdbc..2591f5d731 100644 --- a/packages/skia/src/views/index.ts +++ b/packages/skia/src/views/index.ts @@ -1,4 +1,3 @@ export * from "./SkiaPictureView"; export * from "./SkiaDomView"; export * from "./types"; -export * from "./useTouchHandler"; diff --git a/packages/skia/src/views/types.ts b/packages/skia/src/views/types.ts index 022c941d90..603f8c8a96 100644 --- a/packages/skia/src/views/types.ts +++ b/packages/skia/src/views/types.ts @@ -11,43 +11,12 @@ export type NativeSkiaViewProps = ViewProps & { debug?: boolean; }; -export enum TouchType { - Start, - Active, - End, - Cancelled, -} - -export interface TouchInfo { - x: number; - y: number; - force: number; - type: TouchType; - id: number; - timestamp: number; -} - export interface DrawingInfo { width: number; height: number; timestamp: number; - touches: Array>; } -export type ExtendedTouchInfo = TouchInfo & { - // points per second - velocityX: number; - velocityY: number; -}; - -export type TouchHandlers = { - onStart?: (touchInfo: TouchInfo) => void; - onActive?: (touchInfo: ExtendedTouchInfo) => void; - onEnd?: (touchInfo: ExtendedTouchInfo) => void; -}; - -export type TouchHandler = (touchInfo: Array>) => void; - export interface ISkiaViewApi { setJsiProperty: (nativeId: number, name: string, value: T) => void; requestRedraw: (nativeId: number) => void; @@ -82,5 +51,4 @@ export interface SkiaPictureViewProps extends SkiaBaseViewProps { export interface SkiaDomViewProps extends SkiaBaseViewProps { root?: RenderNode; - onTouch?: TouchHandler; } diff --git a/packages/skia/src/views/useTouchHandler.ts b/packages/skia/src/views/useTouchHandler.ts deleted file mode 100644 index 793efee103..0000000000 --- a/packages/skia/src/views/useTouchHandler.ts +++ /dev/null @@ -1,107 +0,0 @@ -import type { DependencyList } from "react"; -import { useCallback, useRef } from "react"; - -import type { Vector } from "../skia/types"; -import { Platform } from "../Platform"; - -import type { - ExtendedTouchInfo, - TouchHandlers, - TouchHandler, - TouchInfo, -} from "./types"; -import { TouchType } from "./types"; - -const useInternalTouchHandler = ( - handlers: TouchHandlers, - deps: DependencyList = [], - multiTouch = false -): TouchHandler => { - const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({}); - const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({}); - - return useCallback((history: Array>) => { - // Process all items in the current touch history - history.forEach((touches) => { - // Enumerate touches - for (let i = 0; i < touches.length; i++) { - if (!multiTouch && i > 0) { - break; - } - - const touch = touches[i]; - const prevTouch = prevTouchInfoRef.current[touch.id]; - // Calculate the velocity from the previous touch. - const timeDiffseconds = - touch.timestamp - - (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp); - - const distX = touch.x - (prevTouch?.x ?? touch.x); - const distY = touch.y - (prevTouch?.y ?? touch.y); - - if ( - touch.type !== TouchType.Start && - touch.type !== TouchType.End && - touch.type !== TouchType.Cancelled && - timeDiffseconds > 0 - ) { - prevVelocityRef.current[touch.id] = { - x: distX / timeDiffseconds / Platform.PixelRatio, - y: distY / timeDiffseconds / Platform.PixelRatio, - }; - } - - const extendedTouchInfo: ExtendedTouchInfo = { - ...touch, - velocityX: prevVelocityRef.current[touch.id]?.x ?? 0, - velocityY: prevVelocityRef.current[touch.id]?.y ?? 0, - }; - - // Save previous touch - prevTouchInfoRef.current[touch.id] = touch; - - if (touch.type === TouchType.Start) { - delete prevVelocityRef.current[touch.id]; - handlers.onStart && handlers.onStart(touch); - } else if (touch.type === TouchType.Active) { - handlers.onActive && handlers.onActive(extendedTouchInfo); - } else { - handlers.onEnd && handlers.onEnd(extendedTouchInfo); - } - } - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, deps); -}; - -/** - * Provides a callback for handling touch events in the Skia View. - * This touch handler only handles single touches. - * @param handlers Callbacks for the different touch states - * @param deps optional Dependency array to update the handlers - * @returns A function that can be used from within the onDraw callback to - * update and handle touch events. Call it with the touches property from - * the info object. - */ -export const useTouchHandler = ( - handlers: TouchHandlers, - deps: DependencyList = [] -): TouchHandler => { - return useInternalTouchHandler(handlers, deps, false); -}; - -/** - * Provides a callback for handling touch events in the Skia View. - * This touch handler handles multiple touches. - * @param handlers Callbacks for the different touch states - * @param deps optional Dependency array to update the handlers - * @returns A function that can be used from within the onDraw callback to - * update and handle touch events. Call it with the touches property from - * the info object. - */ -export const useMultiTouchHandler = ( - handlers: TouchHandlers, - deps: DependencyList = [] -): TouchHandler => { - return useInternalTouchHandler(handlers, deps, true); -};