@shopify/react-native-skia 0.1.116 → 0.1.118

package/src/renderer/Canvas.tsx

@@ -11,8 +11,6 @@ import type {
   RefObject,
   ReactNode,
   ComponentProps,
-  Context,
-  ReactElement,
   MutableRefObject,
   ForwardedRef,
 } from "react";
@@ -23,6 +21,8 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { Skia } from "../skia";
 import type { FontMgr } from "../skia/FontMgr/FontMgr";
+import { useValue } from "../values/hooks/useValue";
+import type { SkiaReadonlyValue } from "../values/types";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -30,33 +30,12 @@ import { vec } from "./processors";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
 
-// useContextBridge() is taken from https://github.com/pmndrs/drei#usecontextbridge
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const useContextBridge = (...contexts: Context<any>[]) => {
-  const values =
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    contexts.map((context) => useContext(context));
-  return useMemo(
-    () =>
-      ({ children }: { children: ReactNode }) =>
-        contexts.reduceRight(
-          (acc, Context, i) => (
-            <Context.Provider value={values[i]} children={acc} />
-          ),
-          children
-        ) as ReactElement,
-    [contexts, values]
-  );
-};
-
-interface CanvasContext {
+const CanvasContext = React.createContext<SkiaReadonlyValue<{
   width: number;
   height: number;
-}
+}> | null>(null);
 
-const CanvasContext = React.createContext<CanvasContext | null>(null);
-
-export const useCanvas = () => {
+export const useCanvasSize = () => {
   const canvas = useContext(CanvasContext);
   if (!canvas) {
     throw new Error("Canvas context is not available");
@@ -93,6 +72,7 @@ const defaultFontMgr = Skia.FontMgr.RefDefault();
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
   ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+    const canvasCtx = useValue({ width: 0, height: 0 });
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
@@ -103,7 +83,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       [redraw, ref]
     );
 
-    const canvasCtx = useRef({ width: 0, height: 0 });
     const root = useMemo(
       () => skiaReconciler.createContainer(container, 0, false, null),
       [container]
@@ -111,13 +90,13 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     // Render effect
     useEffect(() => {
       render(
-        <CanvasContext.Provider value={canvasCtx.current}>
+        <CanvasContext.Provider value={canvasCtx}>
           {children}
         </CanvasContext.Provider>,
         root,
         container
       );
-    }, [children, root, redraw, container]);
+    }, [children, root, redraw, container, canvasCtx]);
 
     // Draw callback
     const onDraw = useDrawCallback(
@@ -127,6 +106,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         if (onTouch) {
           onTouch(info.touches);
         }
+        if (
+          width !== canvasCtx.current.width ||
+          height !== canvasCtx.current.height
+        ) {
+          canvasCtx.current = { width, height };
+        }
         const paint = Skia.Paint();
         paint.setAntiAlias(true);
         const ctx = {
@@ -140,7 +125,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           center: vec(width / 2, height / 2),
           fontMgr: fontMgr ?? defaultFontMgr,
         };
-        canvasCtx.current = ctx;
         container.draw(ctx);
       },
       [tick, onTouch]

package/src/renderer/HostConfig.ts

@@ -3,7 +3,7 @@ import type { HostConfig } from "react-reconciler";
 
 import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
 import { DeclarationNode, DrawingNode, NodeType } from "./nodes";
-import { exhaustiveCheck, mapKeys } from "./typeddash";
+import { exhaustiveCheck, shallowEq } from "./typeddash";
 
 const DEBUG = false;
 export const debug = (...args: Parameters<typeof console.log>) => {
@@ -53,24 +53,6 @@ type SkiaHostConfig = HostConfig<
   NoTimeout
 >;
 
-// Shallow eq on props (without children)
-const shallowEq = <P extends Props>(p1: P, p2: P): boolean => {
-  const keys1 = mapKeys(p1);
-  const keys2 = mapKeys(p2);
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    if (key === "children") {
-      continue;
-    }
-    if (p1[key] !== p2[key]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 const allChildrenAreMemoized = (node: Instance) => {
   if (!node.memoizable) {
     return false;

package/src/renderer/components/Drawing.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import { createDrawing } from "../nodes/Drawing";
+
+interface DrawingProps {
+  drawing: (ctx: DrawingContext) => void;
+}
+
+const onDraw = createDrawing<DrawingProps>((ctx, { drawing }) => {
+  drawing(ctx);
+});
+
+export const Drawing = (props: DrawingProps) => {
+  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;
+};

package/src/renderer/components/Group.tsx

@@ -33,7 +33,7 @@ const onDraw = createDrawing<GroupProps>(
     processPaint(paint, opacity, groupProps);
     const hasTransform = !!groupProps.transform || !!groupProps.matrix;
     const hasClip = !!clip;
-    const shouldSave = hasTransform || hasClip;
+    const shouldSave = hasTransform || hasClip || !!layer;
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {

package/src/renderer/components/Picture.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { SkPicture } from "../../skia";
+import { createDrawing } from "../nodes/Drawing";
+
+export interface PictureProps {
+  picture: SkPicture;
+}
+
+const onDraw = createDrawing<PictureProps>((ctx, { picture }) => {
+  const { canvas } = ctx;
+  canvas.drawPicture(picture);
+});
+
+export const Picture = (props: PictureProps) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,50 +1,36 @@
-import React from "react";
+import type { SkColor } from "../../../skia";
+import { BlendMode, Skia, TileMode } from "../../../skia";
+import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
 
-import { BlendMode, Skia, TileMode, processColor } from "../../../skia";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
-
-import { getInput } from "./getInput";
-
-export interface InnerShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  shadowOnly?: boolean;
-  inner?: boolean;
-}
-
-const onDeclare = createDeclaration<InnerShadowProps>(
-  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
-    const input = getInput(children);
-    const cl = processColor(color, opacity);
-    const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
-      null
-    );
-    const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
-      null
-    );
-    const f1 = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(cl, BlendMode.SrcOut),
-      null
-    );
-    const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
-    const f3 = Skia.ImageFilter.MakeBlur(blur, blur, TileMode.Decal, f2);
-    const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
-    if (shadowOnly) {
-      return f4;
-    }
-    return Skia.ImageFilter.MakeCompose(
-      input,
-      Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
-    );
+export const MakeInnerShadow = (
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
   }
-);
-
-export const InnerShadow = (props: AnimatedProps<InnerShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
 };

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { Color } from "../../../skia/Color";
+import { processColor } from "../../../skia/Color";
+
+import { getInput } from "./getInput";
+import { MakeInnerShadow } from "./InnerShadow";
+
+export interface ShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  inner?: boolean;
+  shadowOnly?: boolean;
+}
+
+const onDeclare = createDeclaration<ShadowProps>(
+  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {
+    const input = getInput(children);
+    const color = processColor(cl, opacity);
+    let factory;
+    if (inner) {
+      factory = MakeInnerShadow.bind(null, shadowOnly);
+    } else {
+      factory = shadowOnly
+        ? Skia.ImageFilter.MakeDropShadowOnly
+        : Skia.ImageFilter.MakeDropShadow;
+    }
+    return factory(dx, dy, blur, blur, color, input);
+  }
+);
+
+export const Shadow = (props: AnimatedProps<ShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/imageFilters/index.ts

@@ -1,6 +1,5 @@
 export * from "./Blur";
 export * from "./Offset";
 export * from "./DisplacementMap";
-export * from "./DropShadow";
-export * from "./InnerShadow";
+export * from "./Shadow";
 export * from "./Morphology";

package/src/renderer/components/index.ts

@@ -8,6 +8,7 @@ export * from "./maskFilters";
 export * from "./imageFilters";
 export * from "./pathEffects";
 export * from "../processors";
+export * from "./Picture";
 
 export * from "./Group";
 export * from "./Mask";
@@ -15,3 +16,4 @@ export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
 export * from "./Defs";
+export * from "./Drawing";

package/src/renderer/components/maskFilters/Blur.tsx

@@ -29,5 +29,5 @@ export const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {
 
 BlurMask.defaultProps = {
   style: "normal",
-  respectCTM: false,
+  respectCTM: true,
 };

package/src/renderer/components/shapes/Box.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+import type { Color, SkRRect } from "../../../skia";
+import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import { createDrawing } from "../../nodes";
+import type { AnimatedProps, CustomPaintProps } from "../../processors";
+import { add, vec, rrect } from "../../processors";
+import { rect, isRRect } from "../../processors/Rects";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { SkJSIInstance } from "../../../skia/JsiInstance";
+import type { SkRect } from "../../../skia/Rect";
+
+const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  rrect(
+    rect(
+      box.rect.x - dx + tx,
+      box.rect.y - dy + ty,
+      box.rect.width + 2 * dx,
+      box.rect.height + 2 * dy
+    ),
+    box.rx + dx,
+    box.ry + dy
+  );
+
+const deflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  inflate(box, -dx, -dy, tx, ty);
+
+interface BoxShadowProps {
+  dx?: number;
+  dy?: number;
+  spread?: number;
+  blur: number;
+  color?: Color;
+  inner?: boolean;
+}
+
+interface BoxShadowDecl extends BoxShadowProps, SkJSIInstance<"BoxShadow"> {}
+
+const onDeclare = createDeclaration<BoxShadowProps>(
+  ({ dx, dy, spread, blur, color, inner }) => {
+    return { dx, dy, spread, blur, color, inner, __typename__: "BoxShadow" };
+  }
+);
+
+export const BoxShadow = (props: AnimatedProps<BoxShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+const isBoxShadow = (s: SkJSIInstance<string>): s is BoxShadowDecl =>
+  s.__typename__ === "BoxShadow";
+
+interface BoxProps extends CustomPaintProps {
+  box: SkRRect | SkRect;
+}
+
+const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
+  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);
+  const { canvas, paint, opacity } = ctx;
+  const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);
+  shadows
+    .filter((shadow) => !shadow.inner)
+    .map((shadow) => {
+      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+      const lPaint = Skia.Paint();
+      lPaint.setColor(processColor(color, opacity));
+      lPaint.setMaskFilter(
+        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+      );
+      canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);
+    });
+  canvas.drawRRect(box, paint);
+
+  shadows
+    .filter((shadow) => shadow.inner)
+    .map((shadow) => {
+      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+      const delta = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));
+      canvas.save();
+      canvas.clipRRect(box, ClipOp.Intersect, false);
+      const lPaint = Skia.Paint();
+      lPaint.setColor(processColor(color, opacity));
+      lPaint.setMaskFilter(
+        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+      );
+      const inner = deflate(box, spread, spread, dx, dy);
+      const outer = inflate(box, delta.x, delta.y);
+      canvas.drawDRRect(outer, inner, lPaint);
+      canvas.restore();
+    });
+});
+
+export const Box = (props: AnimatedProps<BoxProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};
+
+Box.defaultProps = {
+  shadows: [],
+};

package/src/renderer/components/shapes/index.ts

@@ -10,3 +10,4 @@ export * from "./Patch";
 export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
+export * from "./Box";

package/src/renderer/index.ts

@@ -1,3 +1,4 @@
 export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
+export * from "./useContextBridge";

package/src/renderer/nodes/Declaration.tsx

@@ -1,3 +1,6 @@
+import type { DependencyList } from "react";
+import { useCallback } from "react";
+
 import type { DrawingContext } from "../DrawingContext";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
@@ -18,6 +21,13 @@ export const createDeclaration = <T,>(
   cb: DeclarationCallback<T>
 ): DeclarationCallback<T> => cb;
 
+export const useDeclaration = <P,>(
+  cb: DeclarationCallback<P>,
+  deps?: DependencyList
+) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
 }

package/src/renderer/nodes/Drawing.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import React from "react";
+import type { DependencyList, ReactNode } from "react";
+import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
 import { processPaint, selectPaint } from "../processors";
@@ -21,16 +21,16 @@ type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>
   cb;
 
+export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
 export type DrawingProps<T> = {
   onDraw: DrawingCallback<T>;
   skipProcessing?: boolean;
   children?: ReactNode | ReactNode[];
 };
 
-export const Drawing = <P,>(props: DrawingProps<P>) => {
-  return <skDrawing {...props} />;
-};
-
 export class DrawingNode<P> extends Node<P> {
   onDraw: DrawingCallback<P>;
   skipProcessing: boolean;

package/src/renderer/processors/math/Math.ts

@@ -1,2 +1,18 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export const mix = (value: number, x: number, y: number) =>
   x * (1 - value) + y * value;
+
+/**
+ *  @summary Clamps a node with a lower and upper bound.
+ *  @example
+    clamp(-1, 0, 100); // 0
+    clamp(1, 0, 100); // 1
+    clamp(101, 0, 100); // 100
+  */
+export const clamp = (value: number, lowerBound: number, upperBound: number) =>
+  Math.min(Math.max(lowerBound, value), upperBound);

package/src/renderer/processors/math/Matrix3.ts

@@ -102,6 +102,9 @@ const multiply3 = (m1: Matrix3, m2: Matrix3) => {
   ] as const;
 };
 
+export const matrixVecMul3 = (m: Matrix3, v: Vec3) =>
+  [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)] as const;
+
 const skiaMatrix3 = (m: Matrix3): SkMatrix => {
   return [
     m[0][0],
@@ -117,34 +120,35 @@ const skiaMatrix3 = (m: Matrix3): SkMatrix => {
 };
 
 export const processTransform2d = (transforms: Transforms2d) =>
-  skiaMatrix3(
-    transforms.reduce((acc, transform) => {
-      const key = Object.keys(transform)[0] as Transform2dName;
-      const value = (transform as Pick<Transformations, typeof key>)[key];
-      if (key === "translateX") {
-        return multiply3(acc, translateXMatrix(value));
-      }
-      if (key === "translateY") {
-        return multiply3(acc, translateYMatrix(value));
-      }
-      if (key === "scale") {
-        return multiply3(acc, scaleMatrix(value));
-      }
-      if (key === "scaleX") {
-        return multiply3(acc, scaleXMatrix(value));
-      }
-      if (key === "scaleY") {
-        return multiply3(acc, scaleYMatrix(value));
-      }
-      if (key === "skewX") {
-        return multiply3(acc, skewXMatrix(value));
-      }
-      if (key === "skewY") {
-        return multiply3(acc, skewYMatrix(value));
-      }
-      if (key === "rotate" || key === "rotateZ") {
-        return multiply3(acc, rotateZMatrix(value));
-      }
-      return exhaustiveCheck(key);
-    }, identityMatrix)
-  );
+  skiaMatrix3(processTransform(transforms));
+
+const processTransform = (transforms: Transforms2d) =>
+  transforms.reduce((acc, transform) => {
+    const key = Object.keys(transform)[0] as Transform2dName;
+    const value = (transform as Pick<Transformations, typeof key>)[key];
+    if (key === "translateX") {
+      return multiply3(acc, translateXMatrix(value));
+    }
+    if (key === "translateY") {
+      return multiply3(acc, translateYMatrix(value));
+    }
+    if (key === "scale") {
+      return multiply3(acc, scaleMatrix(value));
+    }
+    if (key === "scaleX") {
+      return multiply3(acc, scaleXMatrix(value));
+    }
+    if (key === "scaleY") {
+      return multiply3(acc, scaleYMatrix(value));
+    }
+    if (key === "skewX") {
+      return multiply3(acc, skewXMatrix(value));
+    }
+    if (key === "skewY") {
+      return multiply3(acc, skewYMatrix(value));
+    }
+    if (key === "rotate" || key === "rotateZ") {
+      return multiply3(acc, rotateZMatrix(value));
+    }
+    return exhaustiveCheck(key);
+  }, identityMatrix);

package/src/renderer/typeddash.ts

@@ -3,3 +3,21 @@ export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];
 export const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unexhaustive handling for ${a}`);
 };
+
+// Shallow eq on props (without children)
+export const shallowEq = <P>(p1: P, p2: P): boolean => {
+  const keys1 = mapKeys(p1);
+  const keys2 = mapKeys(p2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (key === "children") {
+      continue;
+    }
+    if (p1[key] !== p2[key]) {
+      return false;
+    }
+  }
+  return true;
+};

package/src/renderer/useContextBridge.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo, useContext } from "react";
+import type { ReactNode, Context, ReactElement } from "react";
+
+// useContextBridge() is taken from https://github.com/pmndrs/drei#usecontextbridge
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useContextBridge = (...contexts: Context<any>[]) => {
+  const values =
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    contexts.map((context) => useContext(context));
+  return useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) =>
+        contexts.reduceRight(
+          (acc, Context, i) => (
+            <Context.Provider value={values[i]} children={acc} />
+          ),
+          children
+        ) as ReactElement,
+    [contexts, values]
+  );
+};

package/src/skia/Canvas.ts

@@ -12,6 +12,7 @@ import type { SkMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
+import type { SkPicture } from "./Picture";
 
 export enum ClipOp {
   Difference,
@@ -485,4 +486,10 @@ export interface SkCanvas {
    * @param m
    */
   concat(m: SkMatrix): void;
+
+  /**
+   * Draws the given picture using the current clip, current matrix, and the provided paint.
+   * @param skp
+   */
+  drawPicture(skp: SkPicture): void;
 }