@shopify/react-native-skia 1.7.6 → 1.7.7

package/src/sksg/DrawingContext.ts

@@ -0,0 +1,221 @@
+"worklet";
+
+import {
+  enumKey,
+  isPathDef,
+  processPath,
+  processTransformProps2,
+} from "../dom/nodes";
+import type { ClipDef, DrawingNodeProps, GroupProps } from "../dom/types";
+import { DeclarationContext } from "../dom/types";
+import {
+  BlendMode,
+  ClipOp,
+  isRRect,
+  PaintStyle,
+  StrokeCap,
+  StrokeJoin,
+} from "../skia/types";
+import type {
+  SkPath,
+  SkRect,
+  SkRRect,
+  SkCanvas,
+  Skia,
+  SkPaint,
+} from "../skia/types";
+
+const computeClip = (
+  Skia: Skia,
+  clip: ClipDef | undefined
+):
+  | undefined
+  | { clipPath: SkPath }
+  | { clipRect: SkRect }
+  | { clipRRect: SkRRect } => {
+  if (clip) {
+    if (isPathDef(clip)) {
+      return { clipPath: processPath(Skia, clip) };
+    } else if (isRRect(clip)) {
+      return { clipRRect: clip };
+    } else {
+      return { clipRect: clip };
+    }
+  }
+  return undefined;
+};
+
+export class DrawingContext {
+  private paints: SkPaint[];
+  public declCtx: DeclarationContext;
+  public Skia: Skia;
+  public canvas: SkCanvas;
+
+  constructor(Skia: Skia, canvas: SkCanvas) {
+    this.Skia = Skia;
+    this.canvas = canvas;
+    this.paints = [Skia.Paint()];
+    this.declCtx = new DeclarationContext(this.Skia);
+  }
+
+  save() {
+    this.paints.push(this.paint.copy());
+  }
+
+  restore() {
+    this.paints.pop();
+  }
+
+  get paint() {
+    const paint = this.paints[this.paints.length - 1];
+    if (!paint) {
+      throw new Error("Paint is undefined");
+    }
+    return paint;
+  }
+
+  getLocalPaints() {
+    const { paint } = this;
+    return [paint, ...this.declCtx.paints.popAll()];
+  }
+
+  processPaint({
+    opacity,
+    color,
+    strokeWidth,
+    blendMode,
+    style,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    antiAlias,
+    dither,
+    paint: paintProp,
+  }: DrawingNodeProps) {
+    if (paintProp) {
+      this.declCtx.paints.push(paintProp);
+      return true;
+    }
+    let shouldRestore = false;
+    const colorFilter = this.declCtx.colorFilters.popAllAsOne();
+    const imageFilter = this.declCtx.imageFilters.popAllAsOne();
+    const shader = this.declCtx.shaders.pop();
+    const maskFilter = this.declCtx.maskFilters.pop();
+    const pathEffect = this.declCtx.pathEffects.popAllAsOne();
+    if (
+      opacity !== undefined ||
+      color !== undefined ||
+      strokeWidth !== undefined ||
+      blendMode !== undefined ||
+      style !== undefined ||
+      strokeJoin !== undefined ||
+      strokeCap !== undefined ||
+      strokeMiter !== undefined ||
+      antiAlias !== undefined ||
+      dither !== undefined ||
+      colorFilter !== undefined ||
+      imageFilter !== undefined ||
+      shader !== undefined ||
+      maskFilter !== undefined ||
+      pathEffect !== undefined
+    ) {
+      if (!shouldRestore) {
+        this.save();
+        shouldRestore = true;
+      }
+    }
+    const { paint } = this;
+    if (opacity !== undefined) {
+      paint.setAlphaf(paint.getAlphaf() * opacity);
+    }
+    if (color !== undefined) {
+      const currentOpacity = paint.getAlphaf();
+      paint.setShader(null);
+      if (typeof color === "string" || typeof color === "number") {
+        paint.setColor(this.Skia.Color(color));
+      } else if (Array.isArray(color)) {
+        paint.setColor(new Float32Array(color));
+      } else if (color instanceof Float32Array) {
+        paint.setColor(color);
+      } else {
+        throw new Error("Invalid color");
+      }
+      paint.setAlphaf(currentOpacity * paint.getAlphaf());
+    }
+    if (strokeWidth !== undefined) {
+      paint.setStrokeWidth(strokeWidth);
+    }
+    if (blendMode !== undefined) {
+      paint.setBlendMode(BlendMode[enumKey(blendMode)]);
+    }
+    if (style !== undefined) {
+      paint.setStyle(PaintStyle[enumKey(style)]);
+    }
+    if (strokeJoin !== undefined) {
+      paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);
+    }
+    if (strokeCap !== undefined) {
+      paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);
+    }
+    if (strokeMiter !== undefined) {
+      paint.setStrokeMiter(strokeMiter);
+    }
+    if (antiAlias !== undefined) {
+      paint.setAntiAlias(antiAlias);
+    }
+    if (dither !== undefined) {
+      paint.setDither(dither);
+    }
+    if (colorFilter) {
+      paint.setColorFilter(colorFilter);
+    }
+    if (imageFilter) {
+      paint.setImageFilter(imageFilter);
+    }
+    if (shader) {
+      paint.setShader(shader);
+    }
+    if (maskFilter) {
+      paint.setMaskFilter(maskFilter);
+    }
+    if (pathEffect) {
+      paint.setPathEffect(pathEffect);
+    }
+    return shouldRestore;
+  }
+
+  processMatrixAndClipping(props: GroupProps, layer?: boolean | SkPaint) {
+    const hasTransform =
+      props.matrix !== undefined || props.transform !== undefined;
+    const clip = computeClip(this.Skia, props.clip);
+    const hasClip = clip !== undefined;
+    const op = props.invertClip ? ClipOp.Difference : ClipOp.Intersect;
+    const m3 = processTransformProps2(this.Skia, props);
+    const shouldSave = hasTransform || hasClip || !!layer;
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          this.canvas.saveLayer();
+        } else {
+          this.canvas.saveLayer(layer);
+        }
+      } else {
+        this.canvas.save();
+      }
+    }
+
+    if (m3) {
+      this.canvas.concat(m3);
+    }
+    if (clip) {
+      if ("clipRect" in clip) {
+        this.canvas.clipRect(clip.clipRect, op, true);
+      } else if ("clipRRect" in clip) {
+        this.canvas.clipRRect(clip.clipRRect, op, true);
+      } else {
+        this.canvas.clipPath(clip.clipPath, op, true);
+      }
+    }
+    return shouldSave;
+  }
+}

package/src/sksg/HostConfig.ts

@@ -0,0 +1,287 @@
+/*global NodeJS*/
+import type { Fiber, HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+
+import { NodeType } from "../dom/types";
+import { shallowEq } from "../renderer/typeddash";
+
+import type { Node } from "./nodes/Node";
+import type { Container } from "./Container";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+const isDeclaration = (type: NodeType) => {
+  "worklet";
+  return (
+    // BlurMaskFilters
+    type === NodeType.BlurMaskFilter ||
+    // ImageFilters
+    type === NodeType.BlendImageFilter ||
+    type === NodeType.BlurImageFilter ||
+    type === NodeType.OffsetImageFilter ||
+    type === NodeType.DropShadowImageFilter ||
+    type === NodeType.MorphologyImageFilter ||
+    type === NodeType.DisplacementMapImageFilter ||
+    type === NodeType.RuntimeShaderImageFilter ||
+    // ColorFilters
+    type === NodeType.MatrixColorFilter ||
+    type === NodeType.BlendColorFilter ||
+    type === NodeType.LumaColorFilter ||
+    type === NodeType.LinearToSRGBGammaColorFilter ||
+    type === NodeType.SRGBToLinearGammaColorFilter ||
+    type === NodeType.LerpColorFilter ||
+    // Shaders
+    type === NodeType.Shader ||
+    type === NodeType.ImageShader ||
+    type === NodeType.ColorShader ||
+    type === NodeType.Turbulence ||
+    type === NodeType.FractalNoise ||
+    type === NodeType.LinearGradient ||
+    type === NodeType.RadialGradient ||
+    type === NodeType.SweepGradient ||
+    type === NodeType.TwoPointConicalGradient ||
+    // Path Effects
+    type === NodeType.CornerPathEffect ||
+    type === NodeType.DiscretePathEffect ||
+    type === NodeType.DashPathEffect ||
+    type === NodeType.Path1DPathEffect ||
+    type === NodeType.Path2DPathEffect ||
+    type === NodeType.SumPathEffect ||
+    type === NodeType.Line2DPathEffect ||
+    // Mixed
+    type === NodeType.Blend ||
+    // Paint
+    type === NodeType.Paint
+  );
+};
+
+type Instance = Node;
+
+type Props = object;
+type TextInstance = Node;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = Node[];
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+
+type SkiaHostConfig = HostConfig<
+  NodeType,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+export const sksgHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: false,
+  isPrimaryRenderer: false,
+  supportsPersistence: true,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  getRootHostContext: (_rootContainerInstance: Container) => {
+    debug("getRootHostContext");
+    return null;
+  },
+
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+
+  createTextInstance(
+    _text,
+    _rootContainerInstance,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createTextInstance");
+    // return SpanNode({}, text) as SkNode;
+    throw new Error("Text nodes are not supported yet");
+  },
+
+  createInstance(
+    type,
+    props,
+    container,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createInstance", type);
+    container.registerValues(props);
+    const instance = {
+      type,
+      isDeclaration: isDeclaration(type),
+      props,
+      children: [],
+    };
+    return instance;
+  },
+
+  appendInitialChild(parentInstance: Instance, child: Instance | TextInstance) {
+    parentInstance.children.push(child);
+  },
+
+  finalizeInitialChildren(
+    parentInstance,
+    _type,
+    _props,
+    _rootContainerInstance,
+    _hostContext
+  ) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+
+  getPublicInstance(node: Instance) {
+    debug("getPublicInstance");
+    return node;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.clear();
+  },
+
+  prepareUpdate(
+    _instance: Instance,
+    _type: string,
+    oldProps: Props,
+    newProps: Props,
+    container: Container,
+    _hostContext: HostContext
+  ) {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    container.unregisterValues(oldProps);
+    container.registerValues(newProps);
+    return container;
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  cloneInstance(
+    instance,
+    _updatePayload,
+    _type,
+    _oldProps,
+    newProps,
+    _internalInstanceHandle,
+    keepChildren: boolean,
+    _recyclableInstance: null | Instance
+  ) {
+    debug("cloneInstance");
+
+    return {
+      type: instance.type,
+      props: newProps,
+      children: keepChildren ? [...instance.children] : [],
+      isDeclaration: instance.isDeclaration,
+    };
+  },
+
+  createContainerChildSet(): ChildSet {
+    debug("createContainerChildSet");
+    return [];
+  },
+
+  appendChildToContainerChildSet(
+    childSet: ChildSet,
+    child: Instance | TextInstance
+  ): void {
+    childSet.push(child);
+  },
+
+  finalizeContainerChildren(container: Container, newChildren: ChildSet) {
+    debug("finalizeContainerChildren");
+    container.root = newChildren;
+  },
+
+  replaceContainerChildren(container: Container, newChildren: ChildSet) {
+    debug("replaceContainerChildren");
+    container.root = newChildren;
+  },
+
+  cloneHiddenInstance(
+    _instance: Instance,
+    _type: string,
+    _props: Props
+  ): Instance {
+    debug("cloneHiddenInstance");
+    throw new Error("Not yet implemented.");
+  },
+
+  cloneHiddenTextInstance(_instance: Instance, _text: string): TextInstance {
+    debug("cloneHiddenTextInstance");
+    throw new Error("Not yet implemented.");
+  },
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    throw new Error("Function not implemented.");
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {
+    throw new Error("Function not implemented.");
+  },
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    throw new Error("Function not implemented.");
+  },
+};

package/src/sksg/Reconciler.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import type { OpaqueRoot } from "react-reconciler";
+import ReactReconciler from "react-reconciler";
+
+import type { SkCanvas, Skia } from "../skia/types";
+import { NodeType } from "../dom/types";
+
+import { debug, sksgHostConfig } from "./HostConfig";
+import { Container } from "./Container";
+
+const skiaReconciler = ReactReconciler(sksgHostConfig);
+
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia",
+});
+
+export class SkiaSGRoot {
+  private root: OpaqueRoot;
+  private container: Container;
+
+  constructor(Skia: Skia, nativeId = -1) {
+    this.container = new Container(Skia, nativeId);
+    this.root = skiaReconciler.createContainer(
+      this.container,
+      0,
+      null,
+      true,
+      null,
+      "",
+      console.error,
+      null
+    );
+  }
+
+  get sg() {
+    const children = this.container.root;
+    return { type: NodeType.Group, props: {}, children, isDeclaration: false };
+  }
+
+  render(element: ReactNode) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    skiaReconciler.updateContainer(element as any, this.root, null, () => {
+      debug("updateContainer");
+    });
+  }
+
+  drawOnCanvas(canvas: SkCanvas) {
+    this.container.drawOnCanvas(canvas);
+  }
+
+  unmount() {
+    this.container.unmounted = true;
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      debug("unmountContainer");
+    });
+  }
+}