Skip to content

Commit

Permalink
Merge pull request #2048 from Shopify/stagger-deprecation
Browse files Browse the repository at this point in the history
Refine deprecations
  • Loading branch information
wcandillon authored Dec 12, 2023
2 parents 9e7c601 + 1a2505e commit 981cdf5
Show file tree
Hide file tree
Showing 13 changed files with 82 additions and 238 deletions.
8 changes: 3 additions & 5 deletions docs/docs/shapes/pictures.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,11 @@ import {
BlendMode
} from "@shopify/react-native-skia";

const size = 256;

export const HelloWorld = () => {
// Create a picture
const picture = useMemo(() => createPicture(
{ width: size, height: size },
(canvas) => {
const size = 256;
const r = 0.33 * size;
const paint = Skia.Paint();
paint.setBlendMode(BlendMode.Multiply);
Expand Down Expand Up @@ -73,7 +71,6 @@ import {
export const PictureExample = () => {
// Create picture
const picture = useMemo(() => createPicture(
{ width: 100, height: 100 },
(canvas) => {
const paint = Skia.Paint();
paint.setColor(Skia.Color("pink"));
Expand All @@ -82,7 +79,8 @@ export const PictureExample = () => {
const circlePaint = Skia.Paint();
circlePaint.setColor(Skia.Color("orange"));
canvas.drawCircle(50, 50, 50, circlePaint);
}
},
{ width: 100, height: 100 },
), []);

// Serialize the picture
Expand Down
4 changes: 2 additions & 2 deletions example/src/Examples/API/Picture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {

// Create picture
const picture = createPicture(
{ x: 0, y: 0, width: 100, height: 100 },
(canvas) => {
const paint = Skia.Paint();
paint.setColor(Skia.Color("pink"));
Expand All @@ -19,7 +18,8 @@ const picture = createPicture(
const circlePaint = Skia.Paint();
circlePaint.setColor(Skia.Color("orange"));
canvas.drawCircle(50, 50, 50, circlePaint);
}
},
{ x: 0, y: 0, width: 100, height: 100 }
);

export const PictureExample = () => {
Expand Down
2 changes: 1 addition & 1 deletion example/src/Examples/API/PictureView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const PictureViewExample = () => {
// Create picture
const picture = useMemo(
() =>
createPicture({ x: 0, y: 0, width: 100, height: 100 }, (canvas) => {
createPicture((canvas) => {
const paint = Skia.Paint();
paint.setColor(Skia.Color("pink"));
canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
Expand Down
13 changes: 6 additions & 7 deletions example/src/Examples/API/Touch.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import type { SkPicture, SkSize } from "@shopify/react-native-skia";
import type { SkPicture } from "@shopify/react-native-skia";
import {
Group,
Fill,
Expand Down Expand Up @@ -38,11 +38,11 @@ paint.setColor(Skia.Color("cyan"));
paint.setStyle(PaintStyle.Stroke);
paint.setStrokeWidth(10);

const drawTouches = (touches: TouchData[], size: SkSize, colors: string[]) => {
const drawTouches = (touches: TouchData[], colors: string[]) => {
"worklet";
const recorder = Skia.PictureRecorder();
const canvas = recorder.beginRecording(
Skia.XYWHRect(0, 0, size.width, size.height)
Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
);
touches.forEach((touch) => {
const p = paint.copy();
Expand All @@ -54,16 +54,15 @@ const drawTouches = (touches: TouchData[], size: SkSize, colors: string[]) => {

export const Touch = () => {
const picture = useSharedValue<SkPicture>(emptyPicture);
const size = useSharedValue({ width: 0, height: 0 });
const colors = useSharedValue<string[]>([]);
const gesture = Gesture.Native()
.onTouchesDown((event) => {
const start = Math.round(Math.random() * 4);
colors.value = Colors.slice(start, start + event.allTouches.length);
picture.value = drawTouches(event.allTouches, size.value, colors.value);
picture.value = drawTouches(event.allTouches, colors.value);
})
.onTouchesMove((event) => {
picture.value = drawTouches(event.allTouches, size.value, colors.value);
picture.value = drawTouches(event.allTouches, colors.value);
})
.onTouchesUp(() => {
picture.value = emptyPicture;
Expand All @@ -72,7 +71,7 @@ export const Touch = () => {
<View style={styles.container}>
<Title>Touch handling</Title>
<View style={{ flex: 1 }}>
<Canvas style={styles.container} onSize={size}>
<Canvas style={styles.container}>
<Fill color="white" />
<Group style="stroke" strokeWidth={8}>
<Picture picture={picture} />
Expand Down
13 changes: 10 additions & 3 deletions package/cpp/api/JsiSkPictureRecorder.h
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,16 @@ class JsiSkPictureRecorder
context, std::make_shared<SkPictureRecorder>()) {}

JSI_HOST_FUNCTION(beginRecording) {
auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
SkRTreeFactory factory;
auto canvas = getObject()->beginRecording(*rect, &factory);
SkCanvas *canvas;
if (count > 0 && !arguments[0].isUndefined()) {
auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
SkRTreeFactory factory;
canvas = getObject()->beginRecording(*rect, &factory);
} else {
SkISize size = SkISize::Make(2'000'000, 2'000'000);
SkRect rect = SkRect::Make(size);
canvas = getObject()->beginRecording(rect, nullptr);
}
return jsi::Object::createFromHostObject(
runtime, std::make_shared<JsiSkCanvas>(getContext(), canvas));
}
Expand Down
71 changes: 41 additions & 30 deletions package/src/renderer/Canvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import React, {
useMemo,
forwardRef,
useRef,
useLayoutEffect,
} from "react";
import type {
RefObject,
Expand All @@ -13,13 +12,13 @@ import type {
ForwardedRef,
FunctionComponent,
} from "react";
import type { LayoutChangeEvent } from "react-native";

import { SkiaDomView, SkiaView } from "../views";
import { SkiaDomView, SkiaPictureView } from "../views";
import { Skia } from "../skia/Skia";
import type { TouchHandler, SkiaBaseViewProps } from "../views";
import type { SkiaValue } from "../values/types";
import { JsiDrawingContext } from "../dom/types";
import { useValue } from "../values";

import { SkiaRoot } from "./Reconciler";
import { NATIVE_DOM } from "./HostComponents";
Expand All @@ -33,34 +32,42 @@ export interface CanvasProps extends SkiaBaseViewProps {
onTouch?: TouchHandler;
}

const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
const onSize = useValue({
width: 0,
height: 0,
});
const useOnSizeEvent = (
resultValue: SkiaBaseViewProps["onSize"],
onLayout?: (event: LayoutChangeEvent) => void
) => {
return useCallback(
(event: LayoutChangeEvent) => {
if (onLayout) {
onLayout(event);
}
const { width, height } = event.nativeEvent.layout;

useLayoutEffect(() => {
if (!resultValue) {
return;
}
return onSize.addListener((newValue) => {
if (isValue(resultValue)) {
resultValue.current = newValue;
} else {
resultValue.value = newValue;
resultValue.current = { width, height };
} else if (resultValue) {
resultValue.value = { width, height };
}
});
}, [resultValue, onSize]);

return onSize;
},
[onLayout, resultValue]
);
};

export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
(
{ children, style, debug, mode, onTouch, onSize: _onSize, ...props },
{
children,
style,
debug,
mode,
onTouch,
onSize: _onSize,
onLayout: _onLayout,
...props
},
forwardedRef
) => {
const onSize = useOnSizeEvent(_onSize);
const onLayout = useOnSizeEvent(_onSize, _onLayout);
const innerRef = useCanvasRef();
const ref = useCombinedRefs(forwardedRef, innerRef);
const redraw = useCallback(() => {
Expand Down Expand Up @@ -102,26 +109,30 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
style={style}
root={root.dom}
onTouch={onTouch}
onSize={onSize}
onLayout={onLayout}
mode={mode}
debug={debug}
{...props}
/>
);
} else {
// This is for debugging
const recorder = Skia.PictureRecorder();
const canvas = recorder.beginRecording(
Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
);
const ctx = new JsiDrawingContext(Skia, canvas);
root.dom.render(ctx);
const picture = recorder.finishRecordingAsPicture();
return (
<SkiaView
<SkiaPictureView
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={ref as any}
style={style}
mode={mode}
debug={debug}
onSize={onSize}
onDraw={(canvas, info) => {
onTouch && onTouch(info.touches);
const ctx = new JsiDrawingContext(Skia, canvas);
root.dom.render(ctx);
}}
picture={picture}
onLayout={onLayout}
{...props}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions package/src/renderer/__tests__/Picture.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const CheckPicture = ({}: EmptyProps) => {
}, [Skia]);
const picture = useMemo(
() =>
createPicture(Skia.XYWHRect(0, 0, r * 2, r * 2), (canvas) => {
createPicture((canvas) => {
const paint = Skia.Paint();
paint.setColor(Skia.Color(color));
canvas.drawCircle(r, r, r, paint);
Expand Down Expand Up @@ -45,11 +45,11 @@ const CheckPicture2 = ({}: EmptyProps) => {
}, [Skia]);
const picture = useMemo(
() =>
createPicture(Skia.XYWHRect(0, 0, r * 2, r * 2), (canvas) => {
createPicture((canvas) => {
const paint = Skia.Paint();
paint.setColor(Skia.Color(color));
canvas.drawCircle(r, r, r, paint);
}),
}, Skia.XYWHRect(0, 0, r * 2, r * 2)),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
Expand Down
83 changes: 0 additions & 83 deletions package/src/renderer/__tests__/examples/Breathe.spec.tsx

This file was deleted.

13 changes: 8 additions & 5 deletions package/src/skia/core/Picture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@ import { isRect, type SkCanvas, type SkRect, type SkSize } from "../types";
* @returns SkPicture
*/
export const createPicture = (
rect: SkRect | SkSize,
cb: (canvas: SkCanvas) => void
cb: (canvas: SkCanvas) => void,
rect?: SkRect | SkSize
) => {
"worklet";
const recorder = Skia.PictureRecorder();
const canvas = recorder.beginRecording(
isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height)
);
let bounds: undefined | SkRect;
if (rect) {
bounds = isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height);
}
const canvas = recorder.beginRecording(bounds);
cb(canvas);
return recorder.finishRecordingAsPicture();
};
2 changes: 1 addition & 1 deletion package/src/skia/types/Picture/PictureRecorder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface SkPictureRecorder {
*
* @param bounds - a rect to cull the results.
*/
beginRecording(bounds: SkRect): SkCanvas;
beginRecording(bounds?: SkRect): SkCanvas;

/**
* Returns the captured draw commands as a picture and invalidates the canvas returned earlier.
Expand Down
Loading

0 comments on commit 981cdf5

Please sign in to comment.