@shopify/react-native-skia 0.1.172 → 0.1.173

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

@@ -3,4 +3,334 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.JsiDrawingContext = void 0;
+
+var _types = require("../../skia/types");
+
+var _Enum = require("../nodes/datatypes/Enum");
+
+var _Node = require("../nodes/Node");
+
+var _DeclarationContext = require("./DeclarationContext");
+
+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; }
+
+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.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;
+  }
+
+}
+
+exports.JsiDrawingContext = JsiDrawingContext;
+
+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 _Node.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[(0, _Enum.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(_types.BlendMode, blendMode));
+  }
+
+  getBlendMode() {
+    return this._blendMode;
+  }
+
+  setStyle(style) {
+    this.setValue("_style", this.enum(_types.PaintStyle, style));
+  }
+
+  getStyle() {
+    return this._style;
+  }
+
+  setStrokeJoin(strokeJoin) {
+    this.setValue("_strokeJoin", this.enum(_types.StrokeJoin, strokeJoin));
+  }
+
+  getStrokeJoin() {
+    return this._strokeJoin;
+  }
+
+  setStrokeCap(strokeCap) {
+    this.setValue("_strokeCap", this.enum(_types.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/commonjs/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":["JsiDrawingContext","constructor","Skia","canvas","paint","Paint","paints","declarationCtx","DeclarationContext","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","JsiDeclarationNode","decorate","colorFilter","colorFilters","popAllAsOne","imageFilter","imageFilters","shader","shaders","maskFilter","maskFilters","pathEffect","pathEffects","setImageFilter","setShader","setPathEffect","setColorFilter","setMaskFilter","enum","value","key","enumKey","setValue","pristine","getColor","_color","getStrokeWidth","_strokeWidth","BlendMode","getBlendMode","_blendMode","PaintStyle","getStyle","_style","StrokeJoin","getStrokeJoin","_strokeJoin","StrokeCap","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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/dom/types/index.js

@@ -17,6 +17,19 @@ Object.keys(_DrawingContext).forEach(function (key) {
   });
 });
 
+var _DeclarationContext = require("./DeclarationContext");
+
+Object.keys(_DeclarationContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DeclarationContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DeclarationContext[key];
+    }
+  });
+});
+
 var _Node = require("./Node");
 
 Object.keys(_Node).forEach(function (key) {

package/lib/commonjs/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;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

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

@@ -32,6 +32,19 @@ Object.keys(_Canvas).forEach(function (key) {
   });
 });
 
+var _Offscreen = require("./renderer/Offscreen");
+
+Object.keys(_Offscreen).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Offscreen[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Offscreen[key];
+    }
+  });
+});
+
 var _views = require("./views");
 
 Object.keys(_views).forEach(function (key) {

package/lib/commonjs/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;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"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;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/renderer/Canvas.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["useCanvasRef","useRef","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","useCallback","current","registerValues","values","Error","root","useMemo","SkiaRoot","Skia","useEffect","render","unmount","dom","refs","targetRef","React","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;;AAcA;;AACA;;AAIA;;;;;;;;AAEO,MAAMA,YAAY,GAAG,MAAM,IAAAC,aAAA,EAAoB,IAApB,CAA3B;;;AAQA,MAAMC,MAAM,gBAAG,IAAAC,iBAAA,EACpB,OAEEC,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGZ,YAAY,EAA7B;EACA,MAAMa,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAAA;;IAC/B,qBAAAJ,QAAQ,CAACK,OAAT,wEAAkBF,MAAlB;EACD,CAFc,EAEZ,CAACH,QAAD,CAFY,CAAf;EAIA,MAAMM,cAAc,GAAG,IAAAF,kBAAA,EACpBG,MAAD,IAAuC;IACrC,IAAIN,GAAG,CAACI,OAAJ,KAAgB,IAApB,EAA0B;MACxB,MAAM,IAAIG,KAAJ,CAAU,uBAAV,CAAN;IACD;;IACD,OAAOP,GAAG,CAACI,OAAJ,CAAYC,cAAZ,CAA2BC,MAA3B,CAAP;EACD,CANoB,EAOrB,CAACN,GAAD,CAPqB,CAAvB;EASA,MAAMQ,IAAI,GAAG,IAAAC,cAAA,EACX,MAAM,IAAIC,oBAAJ,CAAaC,UAAb,EAAmBN,cAAnB,EAAmCH,MAAnC,CADK,EAEX,CAACA,MAAD,EAASG,cAAT,CAFW,CAAb,CAhBG,CAqBH;;EACA,IAAAO,gBAAA,EAAU,MAAM;IACdJ,IAAI,CAACK,MAAL,CAAYrB,QAAZ;EACD,CAFD,EAEG,CAACA,QAAD,EAAWgB,IAAX,EAAiBN,MAAjB,CAFH;EAIA,IAAAU,gBAAA,EAAU,MAAM;IACd,OAAO,MAAM;MACXJ,IAAI,CAACM,OAAL;IACD,CAFD;EAGD,CAJD,EAIG,CAACN,IAAD,CAJH;EAMA,oBACE,6BAAC,kBAAD;IACE,GAAG,EAAER,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEe,IAAI,CAACO,GAHb;IAIE,OAAO,EAAEnB,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CAhDmB,CAAf;AAmDP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAe,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAGC,cAAA,CAAM9B,MAAN,CAAgB,IAAhB,CAAlB;;EACA8B,cAAA,CAAMN,SAAN,CAAgB,MAAM;IACpBI,IAAI,CAACG,OAAL,CAAcnB,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACiB,SAAS,CAACb,OAAX,CAAH;QACD,CAFD,MAEO;UACLJ,GAAG,CAACI,OAAJ,GAAca,SAAS,CAACb,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACY,IAAD,CAVH;;EAWA,OAAOC,SAAP;AACD,CAhBD"}
+{"version":3,"names":["useCanvasRef","useRef","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","useCallback","current","registerValues","values","root","useMemo","SkiaRoot","Skia","useEffect","render","unmount","dom","refs","targetRef","React","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;;AAcA;;AACA;;AAIA;;;;;;;;AAEO,MAAMA,YAAY,GAAG,MAAM,IAAAC,aAAA,EAAoB,IAApB,CAA3B;;;AAQA,MAAMC,MAAM,gBAAG,IAAAC,iBAAA,EACpB,OAEEC,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGZ,YAAY,EAA7B;EACA,MAAMa,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAAA;;IAC/B,qBAAAJ,QAAQ,CAACK,OAAT,wEAAkBF,MAAlB;EACD,CAFc,EAEZ,CAACH,QAAD,CAFY,CAAf;EAIA,MAAMM,cAAc,GAAG,IAAAF,kBAAA,EACpBG,MAAD,IAAuC;IACrC,IAAIN,GAAG,CAACI,OAAJ,KAAgB,IAApB,EAA0B;MACxB,OAAOJ,GAAG,CAACI,OAAJ,CAAYC,cAAZ,CAA2BC,MAA3B,CAAP;IACD;;IACD,OAAO,MAAM,CAAE,CAAf;EACD,CANoB,EAOrB,CAACN,GAAD,CAPqB,CAAvB;EASA,MAAMO,IAAI,GAAG,IAAAC,cAAA,EACX,MAAM,IAAIC,oBAAJ,CAAaC,UAAb,EAAmBL,cAAnB,EAAmCH,MAAnC,CADK,EAEX,CAACA,MAAD,EAASG,cAAT,CAFW,CAAb,CAhBG,CAqBH;;EACA,IAAAM,gBAAA,EAAU,MAAM;IACdJ,IAAI,CAACK,MAAL,CAAYpB,QAAZ;EACD,CAFD,EAEG,CAACA,QAAD,EAAWe,IAAX,EAAiBL,MAAjB,CAFH;EAIA,IAAAS,gBAAA,EAAU,MAAM;IACd,OAAO,MAAM;MACXJ,IAAI,CAACM,OAAL;IACD,CAFD;EAGD,CAJD,EAIG,CAACN,IAAD,CAJH;EAMA,oBACE,6BAAC,kBAAD;IACE,GAAG,EAAEP,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEc,IAAI,CAACO,GAHb;IAIE,OAAO,EAAElB,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CAhDmB,CAAf;AAmDP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAc,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAGC,cAAA,CAAM7B,MAAN,CAAgB,IAAhB,CAAlB;;EACA6B,cAAA,CAAMN,SAAN,CAAgB,MAAM;IACpBI,IAAI,CAACG,OAAL,CAAclB,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACgB,SAAS,CAACZ,OAAX,CAAH;QACD,CAFD,MAEO;UACLJ,GAAG,CAACI,OAAJ,GAAcY,SAAS,CAACZ,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACW,IAAD,CAVH;;EAWA,OAAOC,SAAP;AACD,CAhBD"}