🔧

packages/skia/src/sksg/Container.ts

@@ -22,8 +22,6 @@ const drawOnscreen = (
   "worklet";
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
-  // TODO: This is only support from 3.15 and above (check the exact version)
-  // This could be polyfilled in C++ if needed (or in JS via functions only?)
   const start = performance.now();
   const ctx = createDrawingContext(Skia, canvas, staticCtx);
   root.forEach((node) => {
@@ -32,7 +30,6 @@ const drawOnscreen = (
   const picture = rec.finishRecordingAsPicture();
   const end = performance.now();
   console.log("Recording time: ", end - start);
-  console.log("Static context paints: ", staticCtx.paints.length);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 

packages/skia/src/sksg/DrawingContext.ts

@@ -22,7 +22,7 @@ import type {
   SkPaint,
 } from "../skia/types";
 
-import type { DeclarationContext } from "./DeclarationContext";
+import { createDeclarationContext } from "./DeclarationContext";
 import type { StaticContext } from "./StaticContext";
 
 const computeClip = (
@@ -70,29 +70,28 @@ export const createDrawingContext = (
   "worklet";
   const state = {
     staticCtx,
+    declCtx: createDeclarationContext(Skia),
     paints: [Skia.Paint()],
   };
 
   const getPaint = () => {
     return state.paints[state.paints.length - 1];
   };
 
-  const processPaint = (
-    {
-      opacity,
-      color,
-      strokeWidth,
-      blendMode,
-      style,
-      strokeJoin,
-      strokeCap,
-      strokeMiter,
-      antiAlias,
-      dither,
-      paint: paintProp,
-    }: DrawingNodeProps,
-    declCtx: DeclarationContext
-  ) => {
+  const processPaint = ({
+    opacity,
+    color,
+    strokeWidth,
+    blendMode,
+    style,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    antiAlias,
+    dither,
+    paint: paintProp,
+  }: DrawingNodeProps) => {
+    const { declCtx } = state;
     if (paintProp) {
       declCtx.paints.push(paintProp);
       return true;
@@ -232,6 +231,7 @@ export const createDrawingContext = (
     getPaint,
     processPaint,
     processMatrixAndClipping,
+    declCtx: state.declCtx,
   };
 };
 

packages/skia/src/sksg/nodes/Node.ts

@@ -6,3 +6,19 @@ export interface Node<Props = unknown> {
   props: Props;
   children: Node[];
 }
+
+export const sortNodes = (children: Node[]) => {
+  "worklet";
+  const declarations: Node[] = [];
+  const drawings: Node[] = [];
+
+  children.forEach((node) => {
+    if (node.isDeclaration) {
+      declarations.push(node);
+    } else {
+      drawings.push(node);
+    }
+  });
+
+  return { declarations, drawings };
+};

packages/skia/src/sksg/nodes/context.ts

@@ -8,7 +8,7 @@ import {
   type DeclarationContext,
 } from "../DeclarationContext";
 
-import type { Node } from "./Node";
+import { sortNodes, type Node } from "./Node";
 import {
   drawAtlas,
   drawBox,
@@ -248,21 +248,18 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
 const preProcessContext = (
   ctx: DrawingContext,
   props: DrawingNodeProps,
-  node: Node<any>
+  declarationChildren: Node<any>[]
 ) => {
   "worklet";
   const shouldRestoreMatrix = ctx.processMatrixAndClipping(props, props.layer);
-  const declCtx = createDeclarationContext(ctx.Skia);
-  node.children.forEach((child) => {
-    if (child.isDeclaration) {
-      processDeclarations(declCtx, child);
-    }
+  declarationChildren.forEach((child) => {
+    processDeclarations(ctx.declCtx, child);
   });
-  const shouldRestorePaint = ctx.processPaint(props, declCtx);
+  const shouldRestorePaint = ctx.processPaint(props);
   return {
     shouldRestoreMatrix,
     shouldRestorePaint,
-    extraPaints: declCtx.paints.popAll(),
+    extraPaints: ctx.declCtx.paints.popAll(),
   };
 };
 
@@ -318,10 +315,12 @@ export function draw(ctx: DrawingContext, node: Node<any>) {
     return;
   }
   const { type, props: rawProps, children } = node;
+
   // Regular nodes
   const props = materialize(rawProps);
+  const { declarations, drawings } = sortNodes(children);
   const { shouldRestoreMatrix, shouldRestorePaint, extraPaints } =
-    preProcessContext(ctx, props, node);
+    preProcessContext(ctx, props, declarations);
   const paints = [ctx.getPaint(), ...extraPaints];
   paints.forEach((paint) => {
     const lctx = { paint, Skia: ctx.Skia, canvas: ctx.canvas };
@@ -398,10 +397,8 @@ export function draw(ctx: DrawingContext, node: Node<any>) {
         }
     }
   });
-  children.forEach((child) => {
-    if (!child.isDeclaration) {
-      draw(ctx, child);
-    }
+  drawings.forEach((child) => {
+    draw(ctx, child);
   });
   if (shouldRestoreMatrix) {
     ctx.canvas.restore();