@shopify/react-native-skia 0.1.172 → 0.1.174

package/src/dom/types/DeclarationContext.ts

@@ -0,0 +1,105 @@
+import type {
+  SkShader,
+  SkPaint,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPathEffect,
+  Skia,
+  SkColorFilter,
+} from "../../skia/types";
+
+type Composer<T> = (outer: T, inner: T) => T;
+
+export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
+  if (filters.length <= 1) {
+    return filters[0];
+  }
+  return filters.reverse().reduce((inner, outer) => {
+    if (!inner) {
+      return outer;
+    }
+    return composer(outer, inner);
+  });
+};
+
+class Declaration<T> {
+  private decls: T[] = [];
+  private indexes = [0];
+
+  constructor(private composer?: Composer<T>) {}
+
+  private get index() {
+    return this.indexes[this.indexes.length - 1];
+  }
+
+  save() {
+    this.indexes.push(this.decls.length);
+  }
+
+  restore() {
+    this.indexes.pop();
+  }
+
+  pop() {
+    return this.decls.pop();
+  }
+
+  push(decl: T) {
+    this.decls.push(decl);
+  }
+
+  popAll() {
+    return this.decls.splice(this.index, this.decls.length - this.index);
+  }
+
+  popAllAsOne() {
+    if (!this.composer) {
+      throw new Error("No composer for this type of declaration");
+    }
+    const decls = this.popAll();
+    return composeDeclarations(decls, this.composer!);
+  }
+}
+
+export class DeclarationContext {
+  readonly paints: Declaration<SkPaint>;
+  readonly maskFilters: Declaration<SkMaskFilter>;
+  readonly shaders: Declaration<SkShader>;
+  readonly pathEffects: Declaration<SkPathEffect>;
+  readonly imageFilters: Declaration<SkImageFilter>;
+  readonly colorFilters: Declaration<SkColorFilter>;
+
+  constructor(private Skia: Skia) {
+    const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
+    const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
+      this.Skia.ImageFilter
+    );
+    const cfComp = this.Skia.ColorFilter.MakeCompose.bind(
+      this.Skia.ColorFilter
+    );
+    this.paints = new Declaration<SkPaint>();
+    this.maskFilters = new Declaration<SkMaskFilter>();
+    this.shaders = new Declaration<SkShader>();
+    this.pathEffects = new Declaration<SkPathEffect>(peComp);
+    this.imageFilters = new Declaration<SkImageFilter>(ifComp);
+    this.colorFilters = new Declaration<SkColorFilter>(cfComp);
+  }
+
+  save() {
+    this.paints.save();
+    this.maskFilters.save();
+    this.shaders.save();
+    this.pathEffects.save();
+    this.imageFilters.save();
+    this.colorFilters.save();
+  }
+
+  restore() {
+    this.paints.restore();
+    this.maskFilters.restore();
+    this.shaders.restore();
+    this.pathEffects.restore();
+    this.imageFilters.restore();
+    this.colorFilters.restore();
+  }
+}

package/src/dom/types/DrawingContext.ts

@@ -1,6 +1,309 @@
-import type { SkCanvas, SkPaint } from "../../skia/types";
+import type {
+  SkCanvas,
+  SkColor,
+  SkColorFilter,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPaint,
+  SkPathEffect,
+  SkShader,
+  Skia,
+} from "../../skia/types";
+import { BlendMode, PaintStyle, StrokeCap, StrokeJoin } from "../../skia/types";
+import { enumKey } from "../nodes/datatypes/Enum";
+import { JsiDeclarationNode } from "../nodes/Node";
+
+import type { PaintProps, SkEnum } from "./Common";
+import { DeclarationContext } from "./DeclarationContext";
+import type { Node } from "./Node";
 
 export interface DrawingContext {
   canvas: SkCanvas;
   paint: SkPaint;
+  saveAndConcat(node: Node<PaintProps>, cache?: SkPaint): boolean;
+  restore(): void;
+  declarationCtx: DeclarationContext;
+}
+
+export class JsiDrawingContext implements DrawingContext {
+  paints: SkPaint[];
+
+  declarationCtx: DeclarationContext;
+
+  constructor(private readonly Skia: Skia, public readonly canvas: SkCanvas) {
+    const paint = this.Skia.Paint();
+    this.paints = [paint];
+    this.declarationCtx = new DeclarationContext(Skia);
+  }
+
+  get paint() {
+    return this.paints[this.paints.length - 1];
+  }
+
+  private save() {
+    const childPaint = this.paint.copy();
+    this.paints.push(childPaint);
+  }
+
+  restore(): void {
+    this.paints.pop();
+  }
+
+  saveAndConcat(node: Node<PaintProps>, cache?: SkPaint) {
+    if (cache) {
+      this.paints.push(cache);
+      return true;
+    }
+    const paint = new ConcatablePaint(this.Skia, this.declarationCtx, node);
+    if (!paint.isPristine()) {
+      this.save();
+      paint.concatTo(this.paint);
+      return true;
+    }
+    return false;
+  }
+}
+
+class ConcatablePaint {
+  private pristine = true;
+
+  _color?: SkColor;
+  _strokeWidth?: number;
+  _blendMode?: BlendMode;
+  _style?: PaintStyle;
+  _strokeJoin?: StrokeJoin;
+  _strokeCap?: StrokeCap;
+  _strokeMiter?: number;
+  _opacity = 1;
+  _antiAlias?: boolean;
+
+  _imageFilter?: SkImageFilter;
+  _shader?: SkShader;
+  _pathEffect?: SkPathEffect;
+  _colorFilter?: SkColorFilter;
+  _maskFilter?: SkMaskFilter;
+
+  constructor(Skia: Skia, declCtx: DeclarationContext, node: Node<PaintProps>) {
+    const props = node.getProps();
+    const children = node.children();
+    this.setColor(
+      props.color !== undefined ? Skia.Color(props.color) : props.color
+    );
+    this.setStrokeWidth(props.strokeWidth);
+    this.setBlendMode(props.blendMode);
+    this.setStyle(props.style);
+    this.setStrokeJoin(props.strokeJoin);
+    this.setStrokeCap(props.strokeCap);
+    this.setStrokeMiter(props.strokeMiter);
+    this.setOpacity(props.opacity);
+    this.setAntiAlias(props.antiAlias);
+    declCtx.save();
+    children.forEach((child) => {
+      if (child instanceof JsiDeclarationNode) {
+        child.decorate(declCtx);
+      }
+    });
+    const colorFilter = declCtx.colorFilters.popAllAsOne();
+    const imageFilter = declCtx.imageFilters.popAllAsOne();
+    const shader = declCtx.shaders.pop();
+    const maskFilter = declCtx.maskFilters.pop();
+    const pathEffect = declCtx.pathEffects.popAllAsOne();
+    declCtx.restore();
+    if (imageFilter) {
+      this.setImageFilter(imageFilter);
+    }
+    if (shader) {
+      this.setShader(shader);
+    }
+    if (pathEffect) {
+      this.setPathEffect(pathEffect);
+    }
+    if (colorFilter) {
+      this.setColorFilter(colorFilter);
+    }
+    if (maskFilter) {
+      this.setMaskFilter(maskFilter);
+    }
+  }
+
+  private enum<T>(value: T, key?: Uncapitalize<string>) {
+    if (key !== undefined) {
+      return value[enumKey(key) as keyof T];
+    }
+    return undefined;
+  }
+
+  private setValue<T extends keyof typeof this>(
+    key: T,
+    value?: typeof this[T]
+  ) {
+    if (value !== undefined) {
+      this[key] = value;
+      this.pristine = false;
+    }
+  }
+
+  setColor(color?: SkColor) {
+    this.setValue("_color", color);
+  }
+
+  getColor() {
+    return this._color;
+  }
+
+  setStrokeWidth(strokeWidth?: number) {
+    this.setValue("_strokeWidth", strokeWidth);
+  }
+
+  getStrokeWidth() {
+    return this._strokeWidth;
+  }
+
+  setBlendMode(blendMode?: SkEnum<typeof BlendMode>) {
+    this.setValue("_blendMode", this.enum(BlendMode, blendMode));
+  }
+
+  getBlendMode() {
+    return this._blendMode;
+  }
+
+  setStyle(style?: SkEnum<typeof PaintStyle>) {
+    this.setValue("_style", this.enum(PaintStyle, style));
+  }
+
+  getStyle() {
+    return this._style;
+  }
+
+  setStrokeJoin(strokeJoin?: SkEnum<typeof StrokeJoin>) {
+    this.setValue("_strokeJoin", this.enum(StrokeJoin, strokeJoin));
+  }
+
+  getStrokeJoin() {
+    return this._strokeJoin;
+  }
+
+  setStrokeCap(strokeCap?: SkEnum<typeof StrokeCap>) {
+    this.setValue("_strokeCap", this.enum(StrokeCap, strokeCap));
+  }
+
+  getStrokeCap() {
+    return this._strokeCap;
+  }
+
+  setStrokeMiter(strokeMiter?: number) {
+    this.setValue("_strokeMiter", strokeMiter);
+  }
+
+  getStrokeMiter() {
+    return this._strokeMiter;
+  }
+
+  setOpacity(opacity?: number) {
+    this.setValue("_opacity", opacity);
+  }
+
+  getOpacity() {
+    return this._opacity;
+  }
+
+  setAntiAlias(antiAlias?: boolean) {
+    this.setValue("_antiAlias", antiAlias);
+  }
+
+  getAntiAlias() {
+    return this._antiAlias;
+  }
+
+  setImageFilter(imageFilter?: SkImageFilter) {
+    this.setValue("_imageFilter", imageFilter);
+  }
+
+  getImageFilter() {
+    return this._imageFilter;
+  }
+
+  setShader(shader?: SkShader) {
+    this.setValue("_shader", shader);
+  }
+
+  getShader() {
+    return this._shader;
+  }
+
+  setPathEffect(pathEffect?: SkPathEffect) {
+    this.setValue("_pathEffect", pathEffect);
+  }
+
+  getPathEffect() {
+    return this._pathEffect;
+  }
+
+  setColorFilter(colorFilter?: SkColorFilter) {
+    this.setValue("_colorFilter", colorFilter);
+  }
+
+  getColorFilter() {
+    return this._colorFilter;
+  }
+
+  setMaskFilter(maskFilter?: SkMaskFilter) {
+    this.setValue("_maskFilter", maskFilter);
+  }
+
+  getMaskFilter() {
+    return this._maskFilter;
+  }
+
+  isPristine() {
+    return this.pristine;
+  }
+
+  concatTo(paint: SkPaint) {
+    if (this._opacity !== undefined) {
+      paint.setAlphaf(paint.getAlphaf() * this._opacity);
+    }
+    if (this._color !== undefined) {
+      const currentOpacity = paint.getAlphaf();
+      paint.setShader(null);
+      paint.setColor(this._color);
+      paint.setAlphaf(currentOpacity * paint.getAlphaf());
+    }
+    if (this._strokeWidth !== undefined) {
+      paint.setStrokeWidth(this._strokeWidth);
+    }
+    if (this._blendMode !== undefined) {
+      paint.setBlendMode(this._blendMode);
+    }
+    if (this._style !== undefined) {
+      paint.setStyle(this._style);
+    }
+    if (this._strokeJoin !== undefined) {
+      paint.setStrokeJoin(this._strokeJoin);
+    }
+    if (this._strokeCap !== undefined) {
+      paint.setStrokeCap(this._strokeCap);
+    }
+    if (this._strokeMiter !== undefined) {
+      paint.setStrokeMiter(this._strokeMiter);
+    }
+    if (this._antiAlias !== undefined) {
+      paint.setAntiAlias(this._antiAlias);
+    }
+    if (this._imageFilter !== undefined) {
+      paint.setImageFilter(this._imageFilter);
+    }
+    if (this._shader !== undefined) {
+      paint.setShader(this._shader);
+    }
+    if (this._pathEffect !== undefined) {
+      paint.setPathEffect(this._pathEffect);
+    }
+    if (this._colorFilter !== undefined) {
+      paint.setColorFilter(this._colorFilter);
+    }
+    if (this._maskFilter !== undefined) {
+      paint.setMaskFilter(this._maskFilter);
+    }
+  }
 }

package/src/dom/types/Node.ts

@@ -1,15 +1,7 @@
-import type {
-  SkColorFilter,
-  SkImageFilter,
-  SkMaskFilter,
-  SkPaint,
-  SkPathEffect,
-  SkShader,
-} from "../../skia/types";
-
 import type { GroupProps } from "./Common";
-import type { DrawingContext } from "./DrawingContext";
 import type { DeclarationType, NodeType } from "./NodeType";
+import type { DeclarationContext } from "./DeclarationContext";
+import type { DrawingContext } from "./DrawingContext";
 
 export interface Node<P> {
   type: NodeType;
@@ -26,19 +18,11 @@ export interface Node<P> {
 
 export type Invalidate = () => void;
 
-export interface DeclarationNode<P, T, Nullable extends null | never = never>
-  extends Node<P> {
+export interface DeclarationNode<P> extends Node<P> {
   declarationType: DeclarationType;
-  materialize(): T | Nullable;
+  decorate(ctx: DeclarationContext): void;
 
   setInvalidate(invalidate: Invalidate): void;
-
-  isPaint(): this is DeclarationNode<unknown, SkPaint>;
-  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;
-  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;
-  isShader(): this is DeclarationNode<unknown, SkShader>;
-  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;
-  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;
 }
 
 export interface RenderNode<P extends GroupProps> extends Node<P> {

package/src/dom/types/SkDOM.ts

@@ -1,12 +1,3 @@
-import type {
-  SkImageFilter,
-  SkMaskFilter,
-  SkShader,
-  SkColorFilter,
-  SkPathEffect,
-  SkPaint,
-} from "../../skia/types";
-
 import type { ChildrenProps, GroupProps, PaintProps } from "./Common";
 import type {
   BlendImageFilterProps,
@@ -68,17 +59,17 @@ import type {
   Path2DPathEffectProps,
 } from "./PathEffects";
 
-type ImageFilterNode<P> = DeclarationNode<P, SkImageFilter>;
+type ImageFilterNode<P> = DeclarationNode<P>;
 
-type PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;
-type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
+type PathEffectNode<P> = DeclarationNode<P>;
+type NullablePathEffectNode<P> = DeclarationNode<P>;
 
 type DrawingNode<P extends GroupProps> = RenderNode<P>;
 
 export interface SkDOM {
   Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
   Group(props?: GroupProps): RenderNode<GroupProps>;
-  Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
+  Paint(props: PaintProps): DeclarationNode<PaintProps>;
 
   // Drawings
   Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;
@@ -106,7 +97,7 @@ export interface SkDOM {
   // BlurMaskFilters
   BlurMaskFilter(
     props: BlurMaskFilterProps
-  ): DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+  ): DeclarationNode<BlurMaskFilterProps>;
 
   // ImageFilters
   BlendImageFilter(
@@ -134,41 +125,33 @@ export interface SkDOM {
   // ColorFilters
   MatrixColorFilter(
     props: MatrixColorFilterProps
-  ): DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
+  ): DeclarationNode<MatrixColorFilterProps>;
   BlendColorFilter(
     props: BlendColorFilterProps
-  ): DeclarationNode<BlendColorFilterProps, SkColorFilter>;
-  LumaColorFilter(): DeclarationNode<null, SkColorFilter>;
-  LinearToSRGBGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
-  SRGBToLinearGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
+  ): DeclarationNode<BlendColorFilterProps>;
+  LumaColorFilter(): DeclarationNode<null>;
+  LinearToSRGBGammaColorFilter(): DeclarationNode<null>;
+  SRGBToLinearGammaColorFilter(): DeclarationNode<null>;
   LerpColorFilter(
     props: LerpColorFilterProps
-  ): DeclarationNode<LerpColorFilterProps, SkColorFilter>;
+  ): DeclarationNode<LerpColorFilterProps>;
 
   // Shaders
-  Shader(props: ShaderProps): DeclarationNode<ShaderProps, SkShader>;
-  ImageShader(
-    props: ImageShaderProps
-  ): DeclarationNode<ImageShaderProps, SkShader>;
-  ColorShader(props: ColorProps): DeclarationNode<ColorProps, SkShader>;
-  Turbulence(
-    props: TurbulenceProps
-  ): DeclarationNode<TurbulenceProps, SkShader>;
-  FractalNoise(
-    props: FractalNoiseProps
-  ): DeclarationNode<FractalNoiseProps, SkShader>;
+  Shader(props: ShaderProps): DeclarationNode<ShaderProps>;
+  ImageShader(props: ImageShaderProps): DeclarationNode<ImageShaderProps>;
+  ColorShader(props: ColorProps): DeclarationNode<ColorProps>;
+  Turbulence(props: TurbulenceProps): DeclarationNode<TurbulenceProps>;
+  FractalNoise(props: FractalNoiseProps): DeclarationNode<FractalNoiseProps>;
   LinearGradient(
     props: LinearGradientProps
-  ): DeclarationNode<LinearGradientProps, SkShader>;
+  ): DeclarationNode<LinearGradientProps>;
   RadialGradient(
     props: RadialGradientProps
-  ): DeclarationNode<RadialGradientProps, SkShader>;
-  SweepGradient(
-    props: SweepGradientProps
-  ): DeclarationNode<SweepGradientProps, SkShader>;
+  ): DeclarationNode<RadialGradientProps>;
+  SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps>;
   TwoPointConicalGradient(
     props: TwoPointConicalGradientProps
-  ): DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+  ): DeclarationNode<TwoPointConicalGradientProps>;
 
   // Path Effects
   CornerPathEffect(
@@ -192,12 +175,8 @@ export interface SkDOM {
   ): NullablePathEffectNode<Line2DPathEffectProps>;
 
   // Mixed
-  Blend(
-    props: BlendProps
-  ): DeclarationNode<BlendProps, SkShader | SkImageFilter>;
+  Blend(props: BlendProps): DeclarationNode<BlendProps>;
   BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;
   Box(props: BoxProps): RenderNode<BoxProps>;
-  BoxShadow(
-    props: BoxShadowProps
-  ): DeclarationNode<BoxShadowProps, BoxShadowProps>;
+  BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps>;
 }

package/src/dom/types/index.ts

@@ -1,4 +1,5 @@
 export * from "./DrawingContext";
+export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

package/src/index.ts

@@ -1,6 +1,7 @@
 import "./skia/NativeSetup";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";
 export * from "./external";

package/src/renderer/Canvas.tsx

@@ -40,10 +40,10 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
 
     const registerValues = useCallback(
       (values: Array<SkiaValue<unknown>>) => {
-        if (ref.current === null) {
-          throw new Error("Canvas ref is not set");
+        if (ref.current !== null) {
+          return ref.current.registerValues(values);
         }
-        return ref.current.registerValues(values);
+        return () => {};
       },
       [ref]
     );

package/src/renderer/DrawingContext.ts

@@ -1,9 +1,8 @@
 import type { DrawingInfo } from "../views";
-import type { Skia } from "../skia/types";
-import type { DrawingContext as DOMDrawingContext } from "../dom/types";
+import type { Skia, SkCanvas, SkPaint } from "../skia/types";
 
-export interface DrawingContext
-  extends Omit<DrawingInfo, "touches">,
-    DOMDrawingContext {
+export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   Skia: Skia;
+  canvas: SkCanvas;
+  paint: SkPaint;
 }