@shopify/react-native-skia 0.1.172 → 0.1.174

package/lib/module/dom/types/DrawingContext.js

@@ -1,2 +1,323 @@
-export {};
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { BlendMode, PaintStyle, StrokeCap, StrokeJoin } from "../../skia/types";
+import { enumKey } from "../nodes/datatypes/Enum";
+import { JsiDeclarationNode } from "../nodes/Node";
+import { DeclarationContext } from "./DeclarationContext";
+export class JsiDrawingContext {
+  constructor(Skia, canvas) {
+    this.Skia = Skia;
+    this.canvas = canvas;
+
+    _defineProperty(this, "paints", void 0);
+
+    _defineProperty(this, "declarationCtx", void 0);
+
+    const paint = this.Skia.Paint();
+    this.paints = [paint];
+    this.declarationCtx = new DeclarationContext(Skia);
+  }
+
+  get paint() {
+    return this.paints[this.paints.length - 1];
+  }
+
+  save() {
+    const childPaint = this.paint.copy();
+    this.paints.push(childPaint);
+  }
+
+  restore() {
+    this.paints.pop();
+  }
+
+  saveAndConcat(node, cache) {
+    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 {
+  constructor(Skia, declCtx, node) {
+    _defineProperty(this, "pristine", true);
+
+    _defineProperty(this, "_color", void 0);
+
+    _defineProperty(this, "_strokeWidth", void 0);
+
+    _defineProperty(this, "_blendMode", void 0);
+
+    _defineProperty(this, "_style", void 0);
+
+    _defineProperty(this, "_strokeJoin", void 0);
+
+    _defineProperty(this, "_strokeCap", void 0);
+
+    _defineProperty(this, "_strokeMiter", void 0);
+
+    _defineProperty(this, "_opacity", 1);
+
+    _defineProperty(this, "_antiAlias", void 0);
+
+    _defineProperty(this, "_imageFilter", void 0);
+
+    _defineProperty(this, "_shader", void 0);
+
+    _defineProperty(this, "_pathEffect", void 0);
+
+    _defineProperty(this, "_colorFilter", void 0);
+
+    _defineProperty(this, "_maskFilter", void 0);
+
+    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);
+    }
+  }
+
+  enum(value, key) {
+    if (key !== undefined) {
+      return value[enumKey(key)];
+    }
+
+    return undefined;
+  }
+
+  setValue(key, value) {
+    if (value !== undefined) {
+      this[key] = value;
+      this.pristine = false;
+    }
+  }
+
+  setColor(color) {
+    this.setValue("_color", color);
+  }
+
+  getColor() {
+    return this._color;
+  }
+
+  setStrokeWidth(strokeWidth) {
+    this.setValue("_strokeWidth", strokeWidth);
+  }
+
+  getStrokeWidth() {
+    return this._strokeWidth;
+  }
+
+  setBlendMode(blendMode) {
+    this.setValue("_blendMode", this.enum(BlendMode, blendMode));
+  }
+
+  getBlendMode() {
+    return this._blendMode;
+  }
+
+  setStyle(style) {
+    this.setValue("_style", this.enum(PaintStyle, style));
+  }
+
+  getStyle() {
+    return this._style;
+  }
+
+  setStrokeJoin(strokeJoin) {
+    this.setValue("_strokeJoin", this.enum(StrokeJoin, strokeJoin));
+  }
+
+  getStrokeJoin() {
+    return this._strokeJoin;
+  }
+
+  setStrokeCap(strokeCap) {
+    this.setValue("_strokeCap", this.enum(StrokeCap, strokeCap));
+  }
+
+  getStrokeCap() {
+    return this._strokeCap;
+  }
+
+  setStrokeMiter(strokeMiter) {
+    this.setValue("_strokeMiter", strokeMiter);
+  }
+
+  getStrokeMiter() {
+    return this._strokeMiter;
+  }
+
+  setOpacity(opacity) {
+    this.setValue("_opacity", opacity);
+  }
+
+  getOpacity() {
+    return this._opacity;
+  }
+
+  setAntiAlias(antiAlias) {
+    this.setValue("_antiAlias", antiAlias);
+  }
+
+  getAntiAlias() {
+    return this._antiAlias;
+  }
+
+  setImageFilter(imageFilter) {
+    this.setValue("_imageFilter", imageFilter);
+  }
+
+  getImageFilter() {
+    return this._imageFilter;
+  }
+
+  setShader(shader) {
+    this.setValue("_shader", shader);
+  }
+
+  getShader() {
+    return this._shader;
+  }
+
+  setPathEffect(pathEffect) {
+    this.setValue("_pathEffect", pathEffect);
+  }
+
+  getPathEffect() {
+    return this._pathEffect;
+  }
+
+  setColorFilter(colorFilter) {
+    this.setValue("_colorFilter", colorFilter);
+  }
+
+  getColorFilter() {
+    return this._colorFilter;
+  }
+
+  setMaskFilter(maskFilter) {
+    this.setValue("_maskFilter", maskFilter);
+  }
+
+  getMaskFilter() {
+    return this._maskFilter;
+  }
+
+  isPristine() {
+    return this.pristine;
+  }
+
+  concatTo(paint) {
+    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);
+    }
+  }
+
+}
 //# sourceMappingURL=DrawingContext.js.map

package/lib/module/dom/types/DrawingContext.js.map

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

package/lib/module/dom/types/Node.d.ts

@@ -1,7 +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;
     setProps(props: P): void;
@@ -13,16 +13,10 @@ export interface Node<P> {
     insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
 }
 export declare 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> {
     render(ctx: DrawingContext): void;

package/lib/module/dom/types/Node.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Node.ts"],"sourcesContent":["import type {\n  SkColorFilter,\n  SkImageFilter,\n  SkMaskFilter,\n  SkPaint,\n  SkPathEffect,\n  SkShader,\n} from \"../../skia/types\";\n\nimport type { GroupProps } from \"./Common\";\nimport type { DrawingContext } from \"./DrawingContext\";\nimport type { DeclarationType, NodeType } from \"./NodeType\";\n\nexport interface Node<P> {\n  type: NodeType;\n\n  setProps(props: P): void;\n  setProp<K extends keyof P>(name: K, v: P[K]): boolean;\n  getProps(): P;\n\n  children(): Node<unknown>[];\n  addChild(child: Node<unknown>): void;\n  removeChild(child: Node<unknown>): void;\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;\n}\n\nexport type Invalidate = () => void;\n\nexport interface DeclarationNode<P, T, Nullable extends null | never = never>\n  extends Node<P> {\n  declarationType: DeclarationType;\n  materialize(): T | Nullable;\n\n  setInvalidate(invalidate: Invalidate): void;\n\n  isPaint(): this is DeclarationNode<unknown, SkPaint>;\n  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;\n  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;\n  isShader(): this is DeclarationNode<unknown, SkShader>;\n  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;\n  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;\n}\n\nexport interface RenderNode<P extends GroupProps> extends Node<P> {\n  render(ctx: DrawingContext): void;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Node.ts"],"sourcesContent":["import type { GroupProps } from \"./Common\";\nimport type { DeclarationType, NodeType } from \"./NodeType\";\nimport type { DeclarationContext } from \"./DeclarationContext\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface Node<P> {\n  type: NodeType;\n\n  setProps(props: P): void;\n  setProp<K extends keyof P>(name: K, v: P[K]): boolean;\n  getProps(): P;\n\n  children(): Node<unknown>[];\n  addChild(child: Node<unknown>): void;\n  removeChild(child: Node<unknown>): void;\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;\n}\n\nexport type Invalidate = () => void;\n\nexport interface DeclarationNode<P> extends Node<P> {\n  declarationType: DeclarationType;\n  decorate(ctx: DeclarationContext): void;\n\n  setInvalidate(invalidate: Invalidate): void;\n}\n\nexport interface RenderNode<P extends GroupProps> extends Node<P> {\n  render(ctx: DrawingContext): void;\n}\n"],"mappings":""}

package/lib/module/dom/types/SkDOM.d.ts

@@ -1,4 +1,3 @@
-import type { SkImageFilter, SkMaskFilter, SkShader, SkColorFilter, SkPathEffect, SkPaint } from "../../skia/types";
 import type { ChildrenProps, GroupProps, PaintProps } from "./Common";
 import type { BlendImageFilterProps, BlurImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, DisplacementMapImageFilterProps, MorphologyImageFilterProps, BlendProps } from "./ImageFilters";
 import type { DeclarationNode, RenderNode } from "./Node";
@@ -7,14 +6,14 @@ import type { ImageProps, CircleProps, PathProps, CustomDrawingNodeProps, LinePr
 import type { BlurMaskFilterProps } from "./MaskFilters";
 import type { FractalNoiseProps, SweepGradientProps, ImageShaderProps, LinearGradientProps, ShaderProps, TurbulenceProps, TwoPointConicalGradientProps, RadialGradientProps, ColorProps } from "./Shaders";
 import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "./PathEffects";
-declare type ImageFilterNode<P> = DeclarationNode<P, SkImageFilter>;
-declare type PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;
-declare type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
+declare type ImageFilterNode<P> = DeclarationNode<P>;
+declare type PathEffectNode<P> = DeclarationNode<P>;
+declare type NullablePathEffectNode<P> = DeclarationNode<P>;
 declare 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>;
     Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;
     Image(props: ImageProps): DrawingNode<ImageProps>;
     Circle(props: CircleProps): DrawingNode<CircleProps>;
@@ -34,7 +33,7 @@ export interface SkDOM {
     DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;
     Picture(props: PictureProps): DrawingNode<PictureProps>;
     ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;
-    BlurMaskFilter(props: BlurMaskFilterProps): DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+    BlurMaskFilter(props: BlurMaskFilterProps): DeclarationNode<BlurMaskFilterProps>;
     BlendImageFilter(props: BlendImageFilterProps): ImageFilterNode<BlendImageFilterProps>;
     BlurImageFilter(props: BlurImageFilterProps): ImageFilterNode<BlurImageFilterProps>;
     OffsetImageFilter(props: OffsetImageFilterProps): ImageFilterNode<OffsetImageFilterProps>;
@@ -42,21 +41,21 @@ export interface SkDOM {
     MorphologyImageFilter(props: MorphologyImageFilterProps): ImageFilterNode<MorphologyImageFilterProps>;
     DisplacementMapImageFilter(props: DisplacementMapImageFilterProps): ImageFilterNode<DisplacementMapImageFilterProps>;
     RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps): ImageFilterNode<RuntimeShaderImageFilterProps>;
-    MatrixColorFilter(props: MatrixColorFilterProps): DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
-    BlendColorFilter(props: BlendColorFilterProps): DeclarationNode<BlendColorFilterProps, SkColorFilter>;
-    LumaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    LinearToSRGBGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    SRGBToLinearGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    LerpColorFilter(props: LerpColorFilterProps): DeclarationNode<LerpColorFilterProps, SkColorFilter>;
-    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>;
-    LinearGradient(props: LinearGradientProps): DeclarationNode<LinearGradientProps, SkShader>;
-    RadialGradient(props: RadialGradientProps): DeclarationNode<RadialGradientProps, SkShader>;
-    SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps, SkShader>;
-    TwoPointConicalGradient(props: TwoPointConicalGradientProps): DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+    MatrixColorFilter(props: MatrixColorFilterProps): DeclarationNode<MatrixColorFilterProps>;
+    BlendColorFilter(props: BlendColorFilterProps): DeclarationNode<BlendColorFilterProps>;
+    LumaColorFilter(): DeclarationNode<null>;
+    LinearToSRGBGammaColorFilter(): DeclarationNode<null>;
+    SRGBToLinearGammaColorFilter(): DeclarationNode<null>;
+    LerpColorFilter(props: LerpColorFilterProps): DeclarationNode<LerpColorFilterProps>;
+    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>;
+    RadialGradient(props: RadialGradientProps): DeclarationNode<RadialGradientProps>;
+    SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps>;
+    TwoPointConicalGradient(props: TwoPointConicalGradientProps): DeclarationNode<TwoPointConicalGradientProps>;
     CornerPathEffect(props: CornerPathEffectProps): NullablePathEffectNode<CornerPathEffectProps>;
     DiscretePathEffect(props: DiscretePathEffectProps): PathEffectNode<DiscretePathEffectProps>;
     DashPathEffect(props: DashPathEffectProps): PathEffectNode<DashPathEffectProps>;
@@ -64,9 +63,9 @@ export interface SkDOM {
     Path2DPathEffect(props: Path2DPathEffectProps): NullablePathEffectNode<Path2DPathEffectProps>;
     SumPathEffect(): NullablePathEffectNode<null>;
     Line2DPathEffect(props: Line2DPathEffectProps): NullablePathEffectNode<Line2DPathEffectProps>;
-    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>;
 }
 export {};

package/lib/module/dom/types/SkDOM.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SkDOM.ts"],"sourcesContent":["import type {\n  SkImageFilter,\n  SkMaskFilter,\n  SkShader,\n  SkColorFilter,\n  SkPathEffect,\n  SkPaint,\n} from \"../../skia/types\";\n\nimport type { ChildrenProps, GroupProps, PaintProps } from \"./Common\";\nimport type {\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  DropShadowImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n  DisplacementMapImageFilterProps,\n  MorphologyImageFilterProps,\n  BlendProps,\n} from \"./ImageFilters\";\nimport type { DeclarationNode, RenderNode } from \"./Node\";\nimport type {\n  BlendColorFilterProps,\n  MatrixColorFilterProps,\n  LerpColorFilterProps,\n} from \"./ColorFilters\";\nimport type {\n  ImageProps,\n  CircleProps,\n  PathProps,\n  CustomDrawingNodeProps,\n  LineProps,\n  OvalProps,\n  PatchProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  VerticesProps,\n  TextProps,\n  DiffRectProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  DrawingNodeProps,\n  BoxProps,\n  BoxShadowProps,\n} from \"./Drawings\";\nimport type { BlurMaskFilterProps } from \"./MaskFilters\";\nimport type {\n  FractalNoiseProps,\n  SweepGradientProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  ShaderProps,\n  TurbulenceProps,\n  TwoPointConicalGradientProps,\n  RadialGradientProps,\n  ColorProps,\n} from \"./Shaders\";\nimport type {\n  CornerPathEffectProps,\n  DashPathEffectProps,\n  DiscretePathEffectProps,\n  Line2DPathEffectProps,\n  Path1DPathEffectProps,\n  Path2DPathEffectProps,\n} from \"./PathEffects\";\n\ntype ImageFilterNode<P> = DeclarationNode<P, SkImageFilter>;\n\ntype PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;\ntype NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;\n\ntype DrawingNode<P extends GroupProps> = RenderNode<P>;\n\nexport interface SkDOM {\n  Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;\n  Group(props?: GroupProps): RenderNode<GroupProps>;\n  Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;\n\n  // Drawings\n  Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;\n  Image(props: ImageProps): DrawingNode<ImageProps>;\n  Circle(props: CircleProps): DrawingNode<CircleProps>;\n  Path(props: PathProps): DrawingNode<PathProps>;\n  CustomDrawing(\n    props: CustomDrawingNodeProps\n  ): DrawingNode<CustomDrawingNodeProps>;\n  Line(props: LineProps): DrawingNode<LineProps>;\n  Oval(props: OvalProps): DrawingNode<OvalProps>;\n  Patch(props: PatchProps): DrawingNode<PatchProps>;\n  Points(props: PointsProps): DrawingNode<PointsProps>;\n  Rect(props: RectProps): DrawingNode<RectProps>;\n  RRect(props: RoundedRectProps): DrawingNode<RoundedRectProps>;\n  Vertices(props: VerticesProps): DrawingNode<VerticesProps>;\n  Text(props: TextProps): DrawingNode<TextProps>;\n  TextPath(props: TextPathProps): DrawingNode<TextPathProps>;\n  TextBlob(props: TextBlobProps): DrawingNode<TextBlobProps>;\n  Glyphs(props: GlyphsProps): DrawingNode<GlyphsProps>;\n  DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;\n  Picture(props: PictureProps): DrawingNode<PictureProps>;\n  ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;\n\n  // BlurMaskFilters\n  BlurMaskFilter(\n    props: BlurMaskFilterProps\n  ): DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;\n\n  // ImageFilters\n  BlendImageFilter(\n    props: BlendImageFilterProps\n  ): ImageFilterNode<BlendImageFilterProps>;\n  BlurImageFilter(\n    props: BlurImageFilterProps\n  ): ImageFilterNode<BlurImageFilterProps>;\n  OffsetImageFilter(\n    props: OffsetImageFilterProps\n  ): ImageFilterNode<OffsetImageFilterProps>;\n  DropShadowImageFilter(\n    props: DropShadowImageFilterProps\n  ): ImageFilterNode<DropShadowImageFilterProps>;\n  MorphologyImageFilter(\n    props: MorphologyImageFilterProps\n  ): ImageFilterNode<MorphologyImageFilterProps>;\n  DisplacementMapImageFilter(\n    props: DisplacementMapImageFilterProps\n  ): ImageFilterNode<DisplacementMapImageFilterProps>;\n  RuntimeShaderImageFilter(\n    props: RuntimeShaderImageFilterProps\n  ): ImageFilterNode<RuntimeShaderImageFilterProps>;\n\n  // ColorFilters\n  MatrixColorFilter(\n    props: MatrixColorFilterProps\n  ): DeclarationNode<MatrixColorFilterProps, SkColorFilter>;\n  BlendColorFilter(\n    props: BlendColorFilterProps\n  ): DeclarationNode<BlendColorFilterProps, SkColorFilter>;\n  LumaColorFilter(): DeclarationNode<null, SkColorFilter>;\n  LinearToSRGBGammaColorFilter(): DeclarationNode<null, SkColorFilter>;\n  SRGBToLinearGammaColorFilter(): DeclarationNode<null, SkColorFilter>;\n  LerpColorFilter(\n    props: LerpColorFilterProps\n  ): DeclarationNode<LerpColorFilterProps, SkColorFilter>;\n\n  // Shaders\n  Shader(props: ShaderProps): DeclarationNode<ShaderProps, SkShader>;\n  ImageShader(\n    props: ImageShaderProps\n  ): DeclarationNode<ImageShaderProps, SkShader>;\n  ColorShader(props: ColorProps): DeclarationNode<ColorProps, SkShader>;\n  Turbulence(\n    props: TurbulenceProps\n  ): DeclarationNode<TurbulenceProps, SkShader>;\n  FractalNoise(\n    props: FractalNoiseProps\n  ): DeclarationNode<FractalNoiseProps, SkShader>;\n  LinearGradient(\n    props: LinearGradientProps\n  ): DeclarationNode<LinearGradientProps, SkShader>;\n  RadialGradient(\n    props: RadialGradientProps\n  ): DeclarationNode<RadialGradientProps, SkShader>;\n  SweepGradient(\n    props: SweepGradientProps\n  ): DeclarationNode<SweepGradientProps, SkShader>;\n  TwoPointConicalGradient(\n    props: TwoPointConicalGradientProps\n  ): DeclarationNode<TwoPointConicalGradientProps, SkShader>;\n\n  // Path Effects\n  CornerPathEffect(\n    props: CornerPathEffectProps\n  ): NullablePathEffectNode<CornerPathEffectProps>;\n  DiscretePathEffect(\n    props: DiscretePathEffectProps\n  ): PathEffectNode<DiscretePathEffectProps>;\n  DashPathEffect(\n    props: DashPathEffectProps\n  ): PathEffectNode<DashPathEffectProps>;\n  Path1DPathEffect(\n    props: Path1DPathEffectProps\n  ): NullablePathEffectNode<Path1DPathEffectProps>;\n  Path2DPathEffect(\n    props: Path2DPathEffectProps\n  ): NullablePathEffectNode<Path2DPathEffectProps>;\n  SumPathEffect(): NullablePathEffectNode<null>;\n  Line2DPathEffect(\n    props: Line2DPathEffectProps\n  ): NullablePathEffectNode<Line2DPathEffectProps>;\n\n  // Mixed\n  Blend(\n    props: BlendProps\n  ): DeclarationNode<BlendProps, SkShader | SkImageFilter>;\n  BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;\n  Box(props: BoxProps): RenderNode<BoxProps>;\n  BoxShadow(\n    props: BoxShadowProps\n  ): DeclarationNode<BoxShadowProps, BoxShadowProps>;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SkDOM.ts"],"sourcesContent":["import type { ChildrenProps, GroupProps, PaintProps } from \"./Common\";\nimport type {\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  DropShadowImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n  DisplacementMapImageFilterProps,\n  MorphologyImageFilterProps,\n  BlendProps,\n} from \"./ImageFilters\";\nimport type { DeclarationNode, RenderNode } from \"./Node\";\nimport type {\n  BlendColorFilterProps,\n  MatrixColorFilterProps,\n  LerpColorFilterProps,\n} from \"./ColorFilters\";\nimport type {\n  ImageProps,\n  CircleProps,\n  PathProps,\n  CustomDrawingNodeProps,\n  LineProps,\n  OvalProps,\n  PatchProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  VerticesProps,\n  TextProps,\n  DiffRectProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  DrawingNodeProps,\n  BoxProps,\n  BoxShadowProps,\n} from \"./Drawings\";\nimport type { BlurMaskFilterProps } from \"./MaskFilters\";\nimport type {\n  FractalNoiseProps,\n  SweepGradientProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  ShaderProps,\n  TurbulenceProps,\n  TwoPointConicalGradientProps,\n  RadialGradientProps,\n  ColorProps,\n} from \"./Shaders\";\nimport type {\n  CornerPathEffectProps,\n  DashPathEffectProps,\n  DiscretePathEffectProps,\n  Line2DPathEffectProps,\n  Path1DPathEffectProps,\n  Path2DPathEffectProps,\n} from \"./PathEffects\";\n\ntype ImageFilterNode<P> = DeclarationNode<P>;\n\ntype PathEffectNode<P> = DeclarationNode<P>;\ntype NullablePathEffectNode<P> = DeclarationNode<P>;\n\ntype DrawingNode<P extends GroupProps> = RenderNode<P>;\n\nexport interface SkDOM {\n  Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;\n  Group(props?: GroupProps): RenderNode<GroupProps>;\n  Paint(props: PaintProps): DeclarationNode<PaintProps>;\n\n  // Drawings\n  Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;\n  Image(props: ImageProps): DrawingNode<ImageProps>;\n  Circle(props: CircleProps): DrawingNode<CircleProps>;\n  Path(props: PathProps): DrawingNode<PathProps>;\n  CustomDrawing(\n    props: CustomDrawingNodeProps\n  ): DrawingNode<CustomDrawingNodeProps>;\n  Line(props: LineProps): DrawingNode<LineProps>;\n  Oval(props: OvalProps): DrawingNode<OvalProps>;\n  Patch(props: PatchProps): DrawingNode<PatchProps>;\n  Points(props: PointsProps): DrawingNode<PointsProps>;\n  Rect(props: RectProps): DrawingNode<RectProps>;\n  RRect(props: RoundedRectProps): DrawingNode<RoundedRectProps>;\n  Vertices(props: VerticesProps): DrawingNode<VerticesProps>;\n  Text(props: TextProps): DrawingNode<TextProps>;\n  TextPath(props: TextPathProps): DrawingNode<TextPathProps>;\n  TextBlob(props: TextBlobProps): DrawingNode<TextBlobProps>;\n  Glyphs(props: GlyphsProps): DrawingNode<GlyphsProps>;\n  DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;\n  Picture(props: PictureProps): DrawingNode<PictureProps>;\n  ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;\n\n  // BlurMaskFilters\n  BlurMaskFilter(\n    props: BlurMaskFilterProps\n  ): DeclarationNode<BlurMaskFilterProps>;\n\n  // ImageFilters\n  BlendImageFilter(\n    props: BlendImageFilterProps\n  ): ImageFilterNode<BlendImageFilterProps>;\n  BlurImageFilter(\n    props: BlurImageFilterProps\n  ): ImageFilterNode<BlurImageFilterProps>;\n  OffsetImageFilter(\n    props: OffsetImageFilterProps\n  ): ImageFilterNode<OffsetImageFilterProps>;\n  DropShadowImageFilter(\n    props: DropShadowImageFilterProps\n  ): ImageFilterNode<DropShadowImageFilterProps>;\n  MorphologyImageFilter(\n    props: MorphologyImageFilterProps\n  ): ImageFilterNode<MorphologyImageFilterProps>;\n  DisplacementMapImageFilter(\n    props: DisplacementMapImageFilterProps\n  ): ImageFilterNode<DisplacementMapImageFilterProps>;\n  RuntimeShaderImageFilter(\n    props: RuntimeShaderImageFilterProps\n  ): ImageFilterNode<RuntimeShaderImageFilterProps>;\n\n  // ColorFilters\n  MatrixColorFilter(\n    props: MatrixColorFilterProps\n  ): DeclarationNode<MatrixColorFilterProps>;\n  BlendColorFilter(\n    props: BlendColorFilterProps\n  ): DeclarationNode<BlendColorFilterProps>;\n  LumaColorFilter(): DeclarationNode<null>;\n  LinearToSRGBGammaColorFilter(): DeclarationNode<null>;\n  SRGBToLinearGammaColorFilter(): DeclarationNode<null>;\n  LerpColorFilter(\n    props: LerpColorFilterProps\n  ): DeclarationNode<LerpColorFilterProps>;\n\n  // Shaders\n  Shader(props: ShaderProps): DeclarationNode<ShaderProps>;\n  ImageShader(props: ImageShaderProps): DeclarationNode<ImageShaderProps>;\n  ColorShader(props: ColorProps): DeclarationNode<ColorProps>;\n  Turbulence(props: TurbulenceProps): DeclarationNode<TurbulenceProps>;\n  FractalNoise(props: FractalNoiseProps): DeclarationNode<FractalNoiseProps>;\n  LinearGradient(\n    props: LinearGradientProps\n  ): DeclarationNode<LinearGradientProps>;\n  RadialGradient(\n    props: RadialGradientProps\n  ): DeclarationNode<RadialGradientProps>;\n  SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps>;\n  TwoPointConicalGradient(\n    props: TwoPointConicalGradientProps\n  ): DeclarationNode<TwoPointConicalGradientProps>;\n\n  // Path Effects\n  CornerPathEffect(\n    props: CornerPathEffectProps\n  ): NullablePathEffectNode<CornerPathEffectProps>;\n  DiscretePathEffect(\n    props: DiscretePathEffectProps\n  ): PathEffectNode<DiscretePathEffectProps>;\n  DashPathEffect(\n    props: DashPathEffectProps\n  ): PathEffectNode<DashPathEffectProps>;\n  Path1DPathEffect(\n    props: Path1DPathEffectProps\n  ): NullablePathEffectNode<Path1DPathEffectProps>;\n  Path2DPathEffect(\n    props: Path2DPathEffectProps\n  ): NullablePathEffectNode<Path2DPathEffectProps>;\n  SumPathEffect(): NullablePathEffectNode<null>;\n  Line2DPathEffect(\n    props: Line2DPathEffectProps\n  ): NullablePathEffectNode<Line2DPathEffectProps>;\n\n  // Mixed\n  Blend(props: BlendProps): DeclarationNode<BlendProps>;\n  BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;\n  Box(props: BoxProps): RenderNode<BoxProps>;\n  BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps>;\n}\n"],"mappings":""}

package/lib/module/dom/types/index.d.ts

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

package/lib/module/dom/types/index.js

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

package/lib/module/dom/types/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DrawingContext\";\nexport * from \"./Node\";\nexport * from \"./NodeType\";\nexport * from \"./SkDOM\";\nexport * from \"./Common\";\nexport * from \"./Drawings\";\nexport * from \"./ImageFilters\";\nexport * from \"./ColorFilters\";\nexport * from \"./MaskFilters\";\nexport * from \"./PathEffects\";\nexport * from \"./Shaders\";\n"],"mappings":"AAAA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,gBAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DrawingContext\";\nexport * from \"./DeclarationContext\";\nexport * from \"./Node\";\nexport * from \"./NodeType\";\nexport * from \"./SkDOM\";\nexport * from \"./Common\";\nexport * from \"./Drawings\";\nexport * from \"./ImageFilters\";\nexport * from \"./ColorFilters\";\nexport * from \"./MaskFilters\";\nexport * from \"./PathEffects\";\nexport * from \"./Shaders\";\n"],"mappings":"AAAA,cAAc,kBAAd;AACA,cAAc,sBAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,gBAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd"}

package/lib/module/index.d.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/lib/module/index.js

@@ -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/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import \"./skia/NativeSetup\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./values\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"],"mappings":"AAAA,OAAO,oBAAP;AACA,cAAc,YAAd;AACA,cAAc,mBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import \"./skia/NativeSetup\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./renderer/Offscreen\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./values\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"],"mappings":"AAAA,OAAO,oBAAP;AACA,cAAc,YAAd;AACA,cAAc,mBAAd;AACA,cAAc,sBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd"}

package/lib/module/renderer/Canvas.js

@@ -23,11 +23,11 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
   }, [innerRef]);
   const registerValues = useCallback(values => {
-    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]);
   const root = useMemo(() => new SkiaRoot(Skia, registerValues, redraw), [redraw, registerValues]); // Render effect
 

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","Skia","SkiaRoot","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","current","registerValues","values","Error","root","render","unmount","dom","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\n\nimport { SkiaDomView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current === null) {\n          throw new Error(\"Canvas ref is not set\");\n        }\n        return ref.current.registerValues(values);\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw),\n      [redraw, registerValues]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n) as React.FC<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,SADF,EAEEC,WAFF,EAGEC,OAHF,EAIEC,UAJF,EAKEC,MALF,QAMO,OANP;AAcA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,IAAT,QAAqB,cAArB;AAIA,SAASC,QAAT,QAAyB,cAAzB;AAEA,OAAO,MAAMC,YAAY,GAAG,MAAMJ,MAAM,CAAc,IAAd,CAAjC;AAQP,OAAO,MAAMK,MAAM,gBAAGN,UAAU,CAC9B,OAEEO,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGV,YAAY,EAA7B;EACA,MAAMW,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAGpB,WAAW,CAAC,MAAM;IAAA;;IAC/B,qBAAAiB,QAAQ,CAACI,OAAT,wEAAkBD,MAAlB;EACD,CAFyB,EAEvB,CAACH,QAAD,CAFuB,CAA1B;EAIA,MAAMK,cAAc,GAAGtB,WAAW,CAC/BuB,MAAD,IAAuC;IACrC,IAAIL,GAAG,CAACG,OAAJ,KAAgB,IAApB,EAA0B;MACxB,MAAM,IAAIG,KAAJ,CAAU,uBAAV,CAAN;IACD;;IACD,OAAON,GAAG,CAACG,OAAJ,CAAYC,cAAZ,CAA2BC,MAA3B,CAAP;EACD,CAN+B,EAOhC,CAACL,GAAD,CAPgC,CAAlC;EASA,MAAMO,IAAI,GAAGxB,OAAO,CAClB,MAAM,IAAIK,QAAJ,CAAaD,IAAb,EAAmBiB,cAAnB,EAAmCF,MAAnC,CADY,EAElB,CAACA,MAAD,EAASE,cAAT,CAFkB,CAApB,CAhBG,CAqBH;;EACAvB,SAAS,CAAC,MAAM;IACd0B,IAAI,CAACC,MAAL,CAAYhB,QAAZ;EACD,CAFQ,EAEN,CAACA,QAAD,EAAWe,IAAX,EAAiBL,MAAjB,CAFM,CAAT;EAIArB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX0B,IAAI,CAACE,OAAL;IACD,CAFD;EAGD,CAJQ,EAIN,CAACF,IAAD,CAJM,CAAT;EAMA,oBACE,oBAAC,WAAD;IACE,GAAG,EAAEP,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEc,IAAI,CAACG,GAHb;IAIE,OAAO,EAAEd,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CAhD6B,CAAzB;AAmDP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAU,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAGhC,KAAK,CAACK,MAAN,CAAgB,IAAhB,CAAlB;EACAL,KAAK,CAACC,SAAN,CAAgB,MAAM;IACpB8B,IAAI,CAACE,OAAL,CAAcb,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACY,SAAS,CAACT,OAAX,CAAH;QACD,CAFD,MAEO;UACLH,GAAG,CAACG,OAAJ,GAAcS,SAAS,CAACT,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACQ,IAAD,CAVH;EAWA,OAAOC,SAAP;AACD,CAhBD"}
+{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","Skia","SkiaRoot","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","current","registerValues","values","root","render","unmount","dom","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\n\nimport { SkiaDomView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw),\n      [redraw, registerValues]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n) as React.FC<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,SADF,EAEEC,WAFF,EAGEC,OAHF,EAIEC,UAJF,EAKEC,MALF,QAMO,OANP;AAcA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,IAAT,QAAqB,cAArB;AAIA,SAASC,QAAT,QAAyB,cAAzB;AAEA,OAAO,MAAMC,YAAY,GAAG,MAAMJ,MAAM,CAAc,IAAd,CAAjC;AAQP,OAAO,MAAMK,MAAM,gBAAGN,UAAU,CAC9B,OAEEO,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGV,YAAY,EAA7B;EACA,MAAMW,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAGpB,WAAW,CAAC,MAAM;IAAA;;IAC/B,qBAAAiB,QAAQ,CAACI,OAAT,wEAAkBD,MAAlB;EACD,CAFyB,EAEvB,CAACH,QAAD,CAFuB,CAA1B;EAIA,MAAMK,cAAc,GAAGtB,WAAW,CAC/BuB,MAAD,IAAuC;IACrC,IAAIL,GAAG,CAACG,OAAJ,KAAgB,IAApB,EAA0B;MACxB,OAAOH,GAAG,CAACG,OAAJ,CAAYC,cAAZ,CAA2BC,MAA3B,CAAP;IACD;;IACD,OAAO,MAAM,CAAE,CAAf;EACD,CAN+B,EAOhC,CAACL,GAAD,CAPgC,CAAlC;EASA,MAAMM,IAAI,GAAGvB,OAAO,CAClB,MAAM,IAAIK,QAAJ,CAAaD,IAAb,EAAmBiB,cAAnB,EAAmCF,MAAnC,CADY,EAElB,CAACA,MAAD,EAASE,cAAT,CAFkB,CAApB,CAhBG,CAqBH;;EACAvB,SAAS,CAAC,MAAM;IACdyB,IAAI,CAACC,MAAL,CAAYf,QAAZ;EACD,CAFQ,EAEN,CAACA,QAAD,EAAWc,IAAX,EAAiBJ,MAAjB,CAFM,CAAT;EAIArB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXyB,IAAI,CAACE,OAAL;IACD,CAFD;EAGD,CAJQ,EAIN,CAACF,IAAD,CAJM,CAAT;EAMA,oBACE,oBAAC,WAAD;IACE,GAAG,EAAEN,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEa,IAAI,CAACG,GAHb;IAIE,OAAO,EAAEb,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CAhD6B,CAAzB;AAmDP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAS,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAG/B,KAAK,CAACK,MAAN,CAAgB,IAAhB,CAAlB;EACAL,KAAK,CAACC,SAAN,CAAgB,MAAM;IACpB6B,IAAI,CAACE,OAAL,CAAcZ,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACW,SAAS,CAACR,OAAX,CAAH;QACD,CAFD,MAEO;UACLH,GAAG,CAACG,OAAJ,GAAcQ,SAAS,CAACR,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACO,IAAD,CAVH;EAWA,OAAOC,SAAP;AACD,CAhBD"}

package/lib/module/renderer/DrawingContext.d.ts

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

package/lib/module/renderer/DrawingContext.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["DrawingContext.ts"],"sourcesContent":["import type { DrawingInfo } from \"../views\";\nimport type { Skia } from \"../skia/types\";\nimport type { DrawingContext as DOMDrawingContext } from \"../dom/types\";\n\nexport interface DrawingContext\n  extends Omit<DrawingInfo, \"touches\">,\n    DOMDrawingContext {\n  Skia: Skia;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["DrawingContext.ts"],"sourcesContent":["import type { DrawingInfo } from \"../views\";\nimport type { Skia, SkCanvas, SkPaint } from \"../skia/types\";\n\nexport interface DrawingContext extends Omit<DrawingInfo, \"touches\"> {\n  Skia: Skia;\n  canvas: SkCanvas;\n  paint: SkPaint;\n}\n"],"mappings":""}