@shopify/react-native-skia 0.1.150 → 0.1.152

package/lib/commonjs/values/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface SkiaValue<T = number> {\n  /**\n   * Gets the value hold by the Value object\n   */\n  readonly current: T;\n  /**\n   * Adds a listener that is called when value changes.\n   * Returns unsubscribe method.\n   */\n  addListener: (cb: (value: T) => void) => () => void;\n  /**\n   * Invalidates the value. Has different meaning depending on the type of the value.\n   */\n  __invalidate: () => void;\n  /**\n   * Field to make typechecking easier\n   */\n  __typename__: \"RNSkValue\";\n}\n\nexport interface SkiaMutableValue<T = number> extends SkiaValue<T> {\n  /**\n   * Get/sets the value hold by the Value object\n   */\n  current: T;\n  /**\n   * Get/sets the animation controlling the value\n   * */\n  animation: SkiaAnimation | undefined;\n}\n\nexport interface SkiaClockValue extends SkiaValue<number> {\n  start: () => void;\n  stop: () => void;\n}\n\nexport interface SkiaAnimation extends SkiaClockValue {\n  cancel: () => void;\n}\n\nexport interface AnimationState {\n  current: number;\n  finished: boolean;\n}\n\nexport interface ISkiaValueApi {\n  /**\n   * Creates a new value that holds the initial value and that\n   * can be changed.\n   */\n  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;\n  /**\n   * Creates a computed value. This is a calculated value that returns the result of\n   * a function that is called with the values of the dependencies.\n   */\n  createComputedValue: <R>(\n    cb: () => R,\n    values: Array<SkiaValue<unknown>>\n  ) => SkiaValue<R>;\n  /**\n   * Creates a clock value where the value is the number of milliseconds elapsed\n   * since the clock was created\n   */\n  createClockValue: () => SkiaClockValue;\n  /**\n   * Creates an animation that is driven from a clock and updated every frame.\n   * @param cb Callback to calculate next value from time.\n   * @returns An animation object that can control a value.\n   */\n  createAnimation: <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ) => SkiaAnimation;\n}\n"],"mappings":""}

package/lib/commonjs/values/web/RNSkAnimation.js

@@ -25,7 +25,7 @@ class RNSkAnimation extends _RNSkClockValue.RNSkClockValue {
   }
 
   update(nextValue) {
-    var _this$_animationState2, _this$_animationState3;
+    var _this$_animationState2;
 
     if (this._callback) {
       var _this$_animationState;
@@ -37,7 +37,7 @@ class RNSkAnimation extends _RNSkClockValue.RNSkClockValue {
       }
     }
 
-    super.update((_this$_animationState2 = (_this$_animationState3 = this._animationState) === null || _this$_animationState3 === void 0 ? void 0 : _this$_animationState3.current) !== null && _this$_animationState2 !== void 0 ? _this$_animationState2 : nextValue);
+    super.update(((_this$_animationState2 = this._animationState) === null || _this$_animationState2 === void 0 ? void 0 : _this$_animationState2.current) ?? nextValue);
   }
 
 }

package/lib/commonjs/values/web/RNSkAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkAnimation.ts"],"names":["RNSkAnimation","RNSkClockValue","constructor","callback","raf","undefined","_callback","cancel","stop","update","nextValue","_animationState","finished","current"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,aAAN,SACGC,8BADH,CAGP;AACEC,EAAAA,WAAW,CACTC,QADS,EAETC,GAFS,EAGT;AACA,UAAMA,GAAN;;AADA;;AAAA,6CAMuCC,SANvC;;AAEA,SAAKC,SAAL,GAAiBH,QAAjB;AACD;;AAKMI,EAAAA,MAAM,GAAG;AACd,SAAKC,IAAL;AACD;;AAESC,EAAAA,MAAM,CAACC,SAAD,EAA0B;AAAA;;AACxC,QAAI,KAAKJ,SAAT,EAAoB;AAAA;;AAClB,WAAKK,eAAL,GAAuB,KAAKL,SAAL,CAAeI,SAAf,EAA0B,KAAKC,eAA/B,CAAvB;;AACA,mCAAI,KAAKA,eAAT,kDAAI,sBAAsBC,QAA1B,EAAoC;AAClC,aAAKJ,IAAL;AACD;AACF;;AACD,UAAMC,MAAN,qDAAa,KAAKE,eAAlB,2DAAa,uBAAsBE,OAAnC,2EAA8CH,SAA9C;AACD;;AAxBH","sourcesContent":["import type { AnimationState, SkiaAnimation } from \"../types\";\n\nimport { RNSkClockValue } from \"./RNSkClockValue\";\n\nexport class RNSkAnimation<S extends AnimationState = AnimationState>\n  extends RNSkClockValue\n  implements SkiaAnimation\n{\n  constructor(\n    callback: (t: number, state: S | undefined) => S,\n    raf: (callback: (time: number) => void) => number\n  ) {\n    super(raf);\n    this._callback = callback;\n  }\n\n  private _callback: (t: number, state: S | undefined) => S;\n  private _animationState: S | undefined = undefined;\n\n  public cancel() {\n    this.stop();\n  }\n\n  protected update(nextValue: number): void {\n    if (this._callback) {\n      this._animationState = this._callback(nextValue, this._animationState);\n      if (this._animationState?.finished) {\n        this.stop();\n      }\n    }\n    super.update(this._animationState?.current ?? nextValue);\n  }\n}\n"]}
+{"version":3,"names":["RNSkAnimation","RNSkClockValue","constructor","callback","raf","undefined","_callback","cancel","stop","update","nextValue","_animationState","finished","current"],"sources":["RNSkAnimation.ts"],"sourcesContent":["import type { AnimationState, SkiaAnimation } from \"../types\";\n\nimport { RNSkClockValue } from \"./RNSkClockValue\";\n\nexport class RNSkAnimation<S extends AnimationState = AnimationState>\n  extends RNSkClockValue\n  implements SkiaAnimation\n{\n  constructor(\n    callback: (t: number, state: S | undefined) => S,\n    raf: (callback: (time: number) => void) => number\n  ) {\n    super(raf);\n    this._callback = callback;\n  }\n\n  private _callback: (t: number, state: S | undefined) => S;\n  private _animationState: S | undefined = undefined;\n\n  public cancel() {\n    this.stop();\n  }\n\n  protected update(nextValue: number): void {\n    if (this._callback) {\n      this._animationState = this._callback(nextValue, this._animationState);\n      if (this._animationState?.finished) {\n        this.stop();\n      }\n    }\n    super.update(this._animationState?.current ?? nextValue);\n  }\n}\n"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,aAAN,SACGC,8BADH,CAGP;EACEC,WAAW,CACTC,QADS,EAETC,GAFS,EAGT;IACA,MAAMA,GAAN;;IADA;;IAAA,yCAMuCC,SANvC;;IAEA,KAAKC,SAAL,GAAiBH,QAAjB;EACD;;EAKMI,MAAM,GAAG;IACd,KAAKC,IAAL;EACD;;EAESC,MAAM,CAACC,SAAD,EAA0B;IAAA;;IACxC,IAAI,KAAKJ,SAAT,EAAoB;MAAA;;MAClB,KAAKK,eAAL,GAAuB,KAAKL,SAAL,CAAeI,SAAf,EAA0B,KAAKC,eAA/B,CAAvB;;MACA,6BAAI,KAAKA,eAAT,kDAAI,sBAAsBC,QAA1B,EAAoC;QAClC,KAAKJ,IAAL;MACD;IACF;;IACD,MAAMC,MAAN,CAAa,gCAAKE,eAAL,kFAAsBE,OAAtB,KAAiCH,SAA9C;EACD;;AAxBH"}

package/lib/commonjs/values/web/RNSkClockValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkClockValue.ts"],"names":["RNSkClockState","RNSkClockValue","RNSkReadonlyValue","constructor","raf","NotStarted","_","_state","Running","now","Date","deltaFromStart","_start","tick","_raf","notifyUpdate","update","value","start","_stop","timeSinceStop","stop","Stopped"],"mappings":";;;;;;;AAEA;;;;IAEKA,c;;WAAAA,c;AAAAA,EAAAA,c,CAAAA,c;AAAAA,EAAAA,c,CAAAA,c;AAAAA,EAAAA,c,CAAAA,c;GAAAA,c,KAAAA,c;;AAME,MAAMC,cAAN,SACGC,oCADH,CAGP;AACEC,EAAAA,WAAW,CAACC,GAAD,EAAoD;AAC7D,UAAM,CAAN;;AAD6D;;AAAA;;AAAA;;AAAA,oCAS9BJ,cAAc,CAACK,UATe;;AAAA,0CAWvCC,CAAD,IAAe;AACpC,UAAI,KAAKC,MAAL,KAAgBP,cAAc,CAACQ,OAAnC,EAA4C;AAC1C,cAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;AACA,cAAME,cAAc,GAAGF,GAAG,GAAG,KAAKG,MAAlC;AACA,aAAKC,IAAL,CAAUF,cAAV;;AACA,aAAKG,IAAL,CAAU,KAAKC,YAAf;AACD;AACF,KAlB8D;;AAE7D,SAAKD,IAAL,GAAYV,GAAZ;AACA,SAAKY,MAAL,CAAY,CAAZ;AACD;;AAgBSH,EAAAA,IAAI,CAACI,KAAD,EAAgB;AAC5B,SAAKD,MAAL,CAAYC,KAAZ;AACD;;AAEMC,EAAAA,KAAK,GAAG;AACb,QAAI,KAAKX,MAAL,KAAgBP,cAAc,CAACK,UAAnC,EAA+C;AAC7C,WAAKO,MAAL,GAAcF,IAAI,CAACD,GAAL,EAAd;AACA,WAAKU,KAAL,GAAa,KAAKP,MAAlB;AACD,KAJY,CAKb;;;AACA,UAAMQ,aAAa,GAAGV,IAAI,CAACD,GAAL,KAAa,KAAKU,KAAxC;;AACA,SAAKP,MAAL,IAAgBQ,aAAhB;AAEA,SAAKb,MAAL,GAAcP,cAAc,CAACQ,OAA7B;;AACA,SAAKM,IAAL,CAAU,KAAKC,YAAf;AACD;;AAEMM,EAAAA,IAAI,GAAG;AACZ,QAAI,KAAKd,MAAL,KAAgBP,cAAc,CAACQ,OAAnC,EAA4C;AAC1C,WAAKD,MAAL,GAAcP,cAAc,CAACsB,OAA7B;AACA,WAAKH,KAAL,GAAaT,IAAI,CAACD,GAAL,EAAb;AACD;AACF;;AA3CH","sourcesContent":["import type { SkiaClockValue } from \"../types\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nenum RNSkClockState {\n  NotStarted = 0,\n  Running = 1,\n  Stopped = 2,\n}\n\nexport class RNSkClockValue\n  extends RNSkReadonlyValue<number>\n  implements SkiaClockValue\n{\n  constructor(raf: (callback: (time: number) => void) => number) {\n    super(0);\n    this._raf = raf;\n    this.update(0);\n  }\n\n  private _raf: (callback: (time: number) => void) => number;\n  private _start: number | undefined;\n  private _stop: number | undefined;\n  private _state: RNSkClockState = RNSkClockState.NotStarted;\n\n  private notifyUpdate = (_: number) => {\n    if (this._state === RNSkClockState.Running) {\n      const now = Date.now();\n      const deltaFromStart = now - this._start!;\n      this.tick(deltaFromStart);\n      this._raf(this.notifyUpdate);\n    }\n  };\n\n  protected tick(value: number) {\n    this.update(value);\n  }\n\n  public start() {\n    if (this._state === RNSkClockState.NotStarted) {\n      this._start = Date.now();\n      this._stop = this._start;\n    }\n    // Subtract pause time from start\n    const timeSinceStop = Date.now() - this._stop!;\n    this._start! += timeSinceStop;\n\n    this._state = RNSkClockState.Running;\n    this._raf(this.notifyUpdate);\n  }\n\n  public stop() {\n    if (this._state === RNSkClockState.Running) {\n      this._state = RNSkClockState.Stopped;\n      this._stop = Date.now();\n    }\n  }\n}\n"]}
+{"version":3,"names":["RNSkClockState","RNSkClockValue","RNSkReadonlyValue","constructor","raf","NotStarted","_","_state","Running","now","Date","deltaFromStart","_start","tick","_raf","notifyUpdate","update","value","start","_stop","timeSinceStop","stop","Stopped"],"sources":["RNSkClockValue.ts"],"sourcesContent":["import type { SkiaClockValue } from \"../types\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nenum RNSkClockState {\n  NotStarted = 0,\n  Running = 1,\n  Stopped = 2,\n}\n\nexport class RNSkClockValue\n  extends RNSkReadonlyValue<number>\n  implements SkiaClockValue\n{\n  constructor(raf: (callback: (time: number) => void) => number) {\n    super(0);\n    this._raf = raf;\n    this.update(0);\n  }\n\n  private _raf: (callback: (time: number) => void) => number;\n  private _start: number | undefined;\n  private _stop: number | undefined;\n  private _state: RNSkClockState = RNSkClockState.NotStarted;\n\n  private notifyUpdate = (_: number) => {\n    if (this._state === RNSkClockState.Running) {\n      const now = Date.now();\n      const deltaFromStart = now - this._start!;\n      this.tick(deltaFromStart);\n      this._raf(this.notifyUpdate);\n    }\n  };\n\n  protected tick(value: number) {\n    this.update(value);\n  }\n\n  public start() {\n    if (this._state === RNSkClockState.NotStarted) {\n      this._start = Date.now();\n      this._stop = this._start;\n    }\n    // Subtract pause time from start\n    const timeSinceStop = Date.now() - this._stop!;\n    this._start! += timeSinceStop;\n\n    this._state = RNSkClockState.Running;\n    this._raf(this.notifyUpdate);\n  }\n\n  public stop() {\n    if (this._state === RNSkClockState.Running) {\n      this._state = RNSkClockState.Stopped;\n      this._stop = Date.now();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAEA;;;;IAEKA,c;;WAAAA,c;EAAAA,c,CAAAA,c;EAAAA,c,CAAAA,c;EAAAA,c,CAAAA,c;GAAAA,c,KAAAA,c;;AAME,MAAMC,cAAN,SACGC,oCADH,CAGP;EACEC,WAAW,CAACC,GAAD,EAAoD;IAC7D,MAAM,CAAN;;IAD6D;;IAAA;;IAAA;;IAAA,gCAS9BJ,cAAc,CAACK,UATe;;IAAA,sCAWvCC,CAAD,IAAe;MACpC,IAAI,KAAKC,MAAL,KAAgBP,cAAc,CAACQ,OAAnC,EAA4C;QAC1C,MAAMC,GAAG,GAAGC,IAAI,CAACD,GAAL,EAAZ;QACA,MAAME,cAAc,GAAGF,GAAG,GAAG,KAAKG,MAAlC;QACA,KAAKC,IAAL,CAAUF,cAAV;;QACA,KAAKG,IAAL,CAAU,KAAKC,YAAf;MACD;IACF,CAlB8D;;IAE7D,KAAKD,IAAL,GAAYV,GAAZ;IACA,KAAKY,MAAL,CAAY,CAAZ;EACD;;EAgBSH,IAAI,CAACI,KAAD,EAAgB;IAC5B,KAAKD,MAAL,CAAYC,KAAZ;EACD;;EAEMC,KAAK,GAAG;IACb,IAAI,KAAKX,MAAL,KAAgBP,cAAc,CAACK,UAAnC,EAA+C;MAC7C,KAAKO,MAAL,GAAcF,IAAI,CAACD,GAAL,EAAd;MACA,KAAKU,KAAL,GAAa,KAAKP,MAAlB;IACD,CAJY,CAKb;;;IACA,MAAMQ,aAAa,GAAGV,IAAI,CAACD,GAAL,KAAa,KAAKU,KAAxC;;IACA,KAAKP,MAAL,IAAgBQ,aAAhB;IAEA,KAAKb,MAAL,GAAcP,cAAc,CAACQ,OAA7B;;IACA,KAAKM,IAAL,CAAU,KAAKC,YAAf;EACD;;EAEMM,IAAI,GAAG;IACZ,IAAI,KAAKd,MAAL,KAAgBP,cAAc,CAACQ,OAAnC,EAA4C;MAC1C,KAAKD,MAAL,GAAcP,cAAc,CAACsB,OAA7B;MACA,KAAKH,KAAL,GAAaT,IAAI,CAACD,GAAL,EAAb;IACD;EACF;;AA3CH"}

package/lib/commonjs/values/web/RNSkComputedValue.js

@@ -18,7 +18,7 @@ class RNSkComputedValue extends _RNSkReadonlyValue.RNSkReadonlyValue {
       current: undefined
     };
     dependencies.forEach(dep => {
-      if ("__typename__" in dep && "addListener" in dep) {
+      if (dep && typeof dep === "object" && "__typename__" in dep && "addListener" in dep) {
         unsubscribers.push(dep.addListener(() => {
           var _notifyUpdateRef$curr;
 

package/lib/commonjs/values/web/RNSkComputedValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkComputedValue.ts"],"names":["RNSkComputedValue","RNSkReadonlyValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe","__invalidate"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,iBAAN,SAAmCC,oCAAnC,CAAwD;AAC7DC,EAAAA,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;AAC3D;AACA;AACA,UAAMC,aAAgC,GAAG,EAAzC;AACA,UAAMC,eAAsD,GAAG;AAC7DC,MAAAA,OAAO,EAAEC;AADoD,KAA/D;AAGAJ,IAAAA,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;AAC5B,UAAI,kBAAkBA,GAAlB,IAAyB,iBAAiBA,GAA9C,EAAmD;AACjDL,QAAAA,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;AAAA;;AAAA,0CAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;AAAA,SAAhD,CADF;AAKD;AACF,KARD;AASA,UAAMH,QAAQ,EAAd;;AAhB2D;;AAAA;;AAiB3D,SAAKU,cAAL,GAAsBR,aAAtB;AACAC,IAAAA,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;AACA,SAAKC,SAAL,GAAiBb,QAAjB;AACD;;AAEOW,EAAAA,gBAAgB,GAAG;AACzB,SAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;AACD;;AAKME,EAAAA,WAAW,GAAG;AACnB,SAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;AACA,SAAKL,cAAL,GAAsB,EAAtB;AACD;;AAEMM,EAAAA,YAAY,GAAS;AAC1B,SAAKN,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;AACA,SAAKL,cAAL,GAAsB,EAAtB;AACD;;AAtC4D","sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\"__typename__\" in dep && \"addListener\" in dep) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n\n  public __invalidate(): void {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n}\n"]}
+{"version":3,"names":["RNSkComputedValue","RNSkReadonlyValue","constructor","callback","dependencies","unsubscribers","notifyUpdateRef","current","undefined","forEach","dep","push","addListener","_unsubscribers","dependecyUpdated","bind","_callback","update","unsubscribe","__invalidate"],"sources":["RNSkComputedValue.ts"],"sourcesContent":["import type { DependencyList } from \"react\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {\n  constructor(callback: () => T, dependencies: DependencyList) {\n    // Initialize dependencies - we can't call this yet, since\n    // super if not called and it requires a start value to be set.\n    const unsubscribers: Array<() => void> = [];\n    const notifyUpdateRef: { current: (() => void) | undefined } = {\n      current: undefined,\n    };\n    dependencies.forEach((dep) => {\n      if (\n        dep &&\n        typeof dep === \"object\" &&\n        \"__typename__\" in dep &&\n        \"addListener\" in dep\n      ) {\n        unsubscribers.push(\n          (dep as RNSkReadonlyValue<unknown>).addListener(() =>\n            notifyUpdateRef.current?.()\n          )\n        );\n      }\n    });\n    super(callback());\n    this._unsubscribers = unsubscribers;\n    notifyUpdateRef.current = this.dependecyUpdated.bind(this);\n    this._callback = callback;\n  }\n\n  private dependecyUpdated() {\n    this.update(this._callback());\n  }\n\n  private _callback: () => T;\n  private _unsubscribers: Array<() => void>;\n\n  public unsubscribe() {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n\n  public __invalidate(): void {\n    this._unsubscribers.forEach((unsubscribe) => unsubscribe());\n    this._unsubscribers = [];\n  }\n}\n"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,iBAAN,SAAmCC,oCAAnC,CAAwD;EAC7DC,WAAW,CAACC,QAAD,EAAoBC,YAApB,EAAkD;IAC3D;IACA;IACA,MAAMC,aAAgC,GAAG,EAAzC;IACA,MAAMC,eAAsD,GAAG;MAC7DC,OAAO,EAAEC;IADoD,CAA/D;IAGAJ,YAAY,CAACK,OAAb,CAAsBC,GAAD,IAAS;MAC5B,IACEA,GAAG,IACH,OAAOA,GAAP,KAAe,QADf,IAEA,kBAAkBA,GAFlB,IAGA,iBAAiBA,GAJnB,EAKE;QACAL,aAAa,CAACM,IAAd,CACGD,GAAD,CAAoCE,WAApC,CAAgD;UAAA;;UAAA,gCAC9CN,eAAe,CAACC,OAD8B,0DAC9C,2BAAAD,eAAe,CAD+B;QAAA,CAAhD,CADF;MAKD;IACF,CAbD;IAcA,MAAMH,QAAQ,EAAd;;IArB2D;;IAAA;;IAsB3D,KAAKU,cAAL,GAAsBR,aAAtB;IACAC,eAAe,CAACC,OAAhB,GAA0B,KAAKO,gBAAL,CAAsBC,IAAtB,CAA2B,IAA3B,CAA1B;IACA,KAAKC,SAAL,GAAiBb,QAAjB;EACD;;EAEOW,gBAAgB,GAAG;IACzB,KAAKG,MAAL,CAAY,KAAKD,SAAL,EAAZ;EACD;;EAKME,WAAW,GAAG;IACnB,KAAKL,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;EAEMM,YAAY,GAAS;IAC1B,KAAKN,cAAL,CAAoBJ,OAApB,CAA6BS,WAAD,IAAiBA,WAAW,EAAxD;;IACA,KAAKL,cAAL,GAAsB,EAAtB;EACD;;AA3C4D"}

package/lib/commonjs/values/web/RNSkReadonlyValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkReadonlyValue.ts"],"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf","__invalidate"],"mappings":";;;;;;;;;AAEO,MAAMA,iBAAN,CAAmD;AACxDC,EAAAA,WAAW,CAACC,KAAD,EAAW;AAAA;;AAAA,wCAK0B,EAL1B;;AAAA,0CAgBS,WAhBT;;AACpB,SAAKC,QAAL,GAAgBD,KAAhB;AACD;;AAKOE,EAAAA,eAAe,GAAS;AAC9B,SAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;AACD;;AAESK,EAAAA,MAAM,CAACC,SAAD,EAAqB;AACnC,SAAKN,QAAL,GAAgBM,SAAhB;AACA,SAAKL,eAAL;AACD;;AAIiB,MAAPM,OAAO,GAAM;AACtB,WAAO,KAAKP,QAAZ;AACD;;AAEMQ,EAAAA,WAAW,CAACJ,EAAD,EAAyB;AACzC,SAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;AACA,WAAO,MAAM;AACX,WAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;AACD,KAFD;AAGD;;AAEMQ,EAAAA,YAAY,GAAS;AAC1B,SAAKV,UAAL,GAAkB,EAAlB;AACD;;AAhCuD","sourcesContent":["import type { SkiaValue } from \"../types\";\n\nexport class RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    this._current = value;\n  }\n\n  private _current: T;\n  private _listeners: Array<(value: T) => void> = [];\n\n  private notifyListeners(): void {\n    this._listeners.forEach((cb) => cb(this._current));\n  }\n\n  protected update(nextValue: T): void {\n    this._current = nextValue;\n    this.notifyListeners();\n  }\n\n  public readonly __typename__ = \"RNSkValue\";\n\n  public get current(): T {\n    return this._current;\n  }\n\n  public addListener(cb: (value: T) => void) {\n    this._listeners.push(cb);\n    return () => {\n      this._listeners.splice(this._listeners.indexOf(cb), 1);\n    };\n  }\n\n  public __invalidate(): void {\n    this._listeners = [];\n  }\n}\n"]}
+{"version":3,"names":["RNSkReadonlyValue","constructor","value","_current","notifyListeners","_listeners","forEach","cb","update","nextValue","current","addListener","push","splice","indexOf","__invalidate"],"sources":["RNSkReadonlyValue.ts"],"sourcesContent":["import type { SkiaValue } from \"../types\";\n\nexport class RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    this._current = value;\n  }\n\n  private _current: T;\n  private _listeners: Array<(value: T) => void> = [];\n\n  private notifyListeners(): void {\n    this._listeners.forEach((cb) => cb(this._current));\n  }\n\n  protected update(nextValue: T): void {\n    this._current = nextValue;\n    this.notifyListeners();\n  }\n\n  public readonly __typename__ = \"RNSkValue\";\n\n  public get current(): T {\n    return this._current;\n  }\n\n  public addListener(cb: (value: T) => void) {\n    this._listeners.push(cb);\n    return () => {\n      this._listeners.splice(this._listeners.indexOf(cb), 1);\n    };\n  }\n\n  public __invalidate(): void {\n    this._listeners = [];\n  }\n}\n"],"mappings":";;;;;;;;;AAEO,MAAMA,iBAAN,CAAmD;EACxDC,WAAW,CAACC,KAAD,EAAW;IAAA;;IAAA,oCAK0B,EAL1B;;IAAA,sCAgBS,WAhBT;;IACpB,KAAKC,QAAL,GAAgBD,KAAhB;EACD;;EAKOE,eAAe,GAAS;IAC9B,KAAKC,UAAL,CAAgBC,OAAhB,CAAyBC,EAAD,IAAQA,EAAE,CAAC,KAAKJ,QAAN,CAAlC;EACD;;EAESK,MAAM,CAACC,SAAD,EAAqB;IACnC,KAAKN,QAAL,GAAgBM,SAAhB;IACA,KAAKL,eAAL;EACD;;EAIiB,IAAPM,OAAO,GAAM;IACtB,OAAO,KAAKP,QAAZ;EACD;;EAEMQ,WAAW,CAACJ,EAAD,EAAyB;IACzC,KAAKF,UAAL,CAAgBO,IAAhB,CAAqBL,EAArB;;IACA,OAAO,MAAM;MACX,KAAKF,UAAL,CAAgBQ,MAAhB,CAAuB,KAAKR,UAAL,CAAgBS,OAAhB,CAAwBP,EAAxB,CAAvB,EAAoD,CAApD;IACD,CAFD;EAGD;;EAEMQ,YAAY,GAAS;IAC1B,KAAKV,UAAL,GAAkB,EAAlB;EACD;;AAhCuD"}

package/lib/commonjs/values/web/RNSkValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RNSkValue.ts"],"names":["RNSkValue","RNSkReadonlyValue","constructor","value","_unsubscribe","undefined","current","update","unsubscribe","_animation","cancel","subscribe","animation","addListener","animationDidUpdate","bind","start","v"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,SAAN,SAA2BC,oCAA3B,CAAwE;AAC7EC,EAAAA,WAAW,CAACC,KAAD,EAAW;AACpB,UAAMA,KAAN;;AADoB;;AAAA;;AAEpB,SAAKC,YAAL,GAAoBC,SAApB;AACD;;AAEiB,MAAPC,OAAO,CAACH,KAAD,EAAW;AAC3B,SAAKI,MAAL,CAAYJ,KAAZ;AACD;;AAEiB,MAAPG,OAAO,GAAM;AACtB,WAAO,MAAMA,OAAb;AACD;;AAIOE,EAAAA,WAAW,GAAG;AACpB,QAAI,KAAKJ,YAAT,EAAuB;AACrB,WAAKA,YAAL;;AACA,WAAKA,YAAL,GAAoBC,SAApB;AACD;;AACD,QAAI,KAAKI,UAAT,EAAqB;AACnB,WAAKA,UAAL,CAAgBC,MAAhB;;AACA,WAAKD,UAAL,GAAkBJ,SAAlB;AACD;AACF;;AAEOM,EAAAA,SAAS,CAACC,SAAD,EAAuC;AACtD,SAAKJ,WAAL;;AACA,QAAII,SAAJ,EAAe;AACb,WAAKH,UAAL,GAAkBG,SAAlB;AACA,WAAKR,YAAL,GAAoBQ,SAAS,CAACC,WAAV,EAClB;AACA;AACA,WAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,IAA7B,CAHkB,CAApB;;AAKA,WAAKN,UAAL,CAAgBO,KAAhB;AACD;AACF;;AAEOF,EAAAA,kBAAkB,CAACX,KAAD,EAAW;AACnC,SAAKI,MAAL,CAAYJ,KAAZ;AACD;;AAGmB,MAATS,SAAS,GAA8B;AAChD,WAAO,KAAKH,UAAZ;AACD;;AAEmB,MAATG,SAAS,CAACK,CAAD,EAA+B;AACjD,SAAKN,SAAL,CAAeM,CAAf;AACD;;AAnD4E","sourcesContent":["import type { SkiaAnimation, SkiaValue } from \"../types\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    super(value);\n    this._unsubscribe = undefined;\n  }\n\n  public set current(value: T) {\n    this.update(value);\n  }\n\n  public get current(): T {\n    return super.current;\n  }\n\n  private _unsubscribe: (() => void) | undefined;\n\n  private unsubscribe() {\n    if (this._unsubscribe) {\n      this._unsubscribe();\n      this._unsubscribe = undefined;\n    }\n    if (this._animation) {\n      this._animation.cancel();\n      this._animation = undefined;\n    }\n  }\n\n  private subscribe(animation: SkiaAnimation | undefined) {\n    this.unsubscribe();\n    if (animation) {\n      this._animation = animation;\n      this._unsubscribe = animation.addListener(\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        this.animationDidUpdate.bind(this)\n      );\n      this._animation.start();\n    }\n  }\n\n  private animationDidUpdate(value: T) {\n    this.update(value);\n  }\n\n  private _animation: SkiaAnimation | undefined;\n  public get animation(): SkiaAnimation | undefined {\n    return this._animation;\n  }\n\n  public set animation(v: SkiaAnimation | undefined) {\n    this.subscribe(v);\n  }\n}\n"]}
+{"version":3,"names":["RNSkValue","RNSkReadonlyValue","constructor","value","_unsubscribe","undefined","current","update","unsubscribe","_animation","cancel","subscribe","animation","addListener","animationDidUpdate","bind","start","v"],"sources":["RNSkValue.ts"],"sourcesContent":["import type { SkiaAnimation, SkiaValue } from \"../types\";\n\nimport { RNSkReadonlyValue } from \"./RNSkReadonlyValue\";\n\nexport class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {\n  constructor(value: T) {\n    super(value);\n    this._unsubscribe = undefined;\n  }\n\n  public set current(value: T) {\n    this.update(value);\n  }\n\n  public get current(): T {\n    return super.current;\n  }\n\n  private _unsubscribe: (() => void) | undefined;\n\n  private unsubscribe() {\n    if (this._unsubscribe) {\n      this._unsubscribe();\n      this._unsubscribe = undefined;\n    }\n    if (this._animation) {\n      this._animation.cancel();\n      this._animation = undefined;\n    }\n  }\n\n  private subscribe(animation: SkiaAnimation | undefined) {\n    this.unsubscribe();\n    if (animation) {\n      this._animation = animation;\n      this._unsubscribe = animation.addListener(\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        this.animationDidUpdate.bind(this)\n      );\n      this._animation.start();\n    }\n  }\n\n  private animationDidUpdate(value: T) {\n    this.update(value);\n  }\n\n  private _animation: SkiaAnimation | undefined;\n  public get animation(): SkiaAnimation | undefined {\n    return this._animation;\n  }\n\n  public set animation(v: SkiaAnimation | undefined) {\n    this.subscribe(v);\n  }\n}\n"],"mappings":";;;;;;;AAEA;;;;AAEO,MAAMA,SAAN,SAA2BC,oCAA3B,CAAwE;EAC7EC,WAAW,CAACC,KAAD,EAAW;IACpB,MAAMA,KAAN;;IADoB;;IAAA;;IAEpB,KAAKC,YAAL,GAAoBC,SAApB;EACD;;EAEiB,IAAPC,OAAO,CAACH,KAAD,EAAW;IAC3B,KAAKI,MAAL,CAAYJ,KAAZ;EACD;;EAEiB,IAAPG,OAAO,GAAM;IACtB,OAAO,MAAMA,OAAb;EACD;;EAIOE,WAAW,GAAG;IACpB,IAAI,KAAKJ,YAAT,EAAuB;MACrB,KAAKA,YAAL;;MACA,KAAKA,YAAL,GAAoBC,SAApB;IACD;;IACD,IAAI,KAAKI,UAAT,EAAqB;MACnB,KAAKA,UAAL,CAAgBC,MAAhB;;MACA,KAAKD,UAAL,GAAkBJ,SAAlB;IACD;EACF;;EAEOM,SAAS,CAACC,SAAD,EAAuC;IACtD,KAAKJ,WAAL;;IACA,IAAII,SAAJ,EAAe;MACb,KAAKH,UAAL,GAAkBG,SAAlB;MACA,KAAKR,YAAL,GAAoBQ,SAAS,CAACC,WAAV,EAClB;MACA;MACA,KAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,IAA7B,CAHkB,CAApB;;MAKA,KAAKN,UAAL,CAAgBO,KAAhB;IACD;EACF;;EAEOF,kBAAkB,CAACX,KAAD,EAAW;IACnC,KAAKI,MAAL,CAAYJ,KAAZ;EACD;;EAGmB,IAATS,SAAS,GAA8B;IAChD,OAAO,KAAKH,UAAZ;EACD;;EAEmB,IAATG,SAAS,CAACK,CAAD,EAA+B;IACjD,KAAKN,SAAL,CAAeM,CAAf;EACD;;AAnD4E"}

package/lib/commonjs/values/web/api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["api.ts"],"names":["ValueApi","createValue","initialValue","RNSkValue","createComputedValue","cb","values","RNSkComputedValue","createClockValue","RNSkClockValue","requestAnimationFrame","bind","window","createAnimation","RNSkAnimation"],"mappings":";;;;;;;AASA;;AACA;;AACA;;AACA;;AAEO,MAAMA,QAAuB,GAAG;AACrCC,EAAAA,WAAW,EAAE,UAAaC,YAAb,EAAmD;AAC9D,WAAO,IAAIC,oBAAJ,CAAcD,YAAd,CAAP;AACD,GAHoC;AAIrCE,EAAAA,mBAAmB,EAAE,UACnBC,EADmB,EAEnBC,MAFmB,EAGL;AACd,WAAO,IAAIC,oCAAJ,CAAsBF,EAAtB,EAA0BC,MAA1B,CAAP;AACD,GAToC;AAUrCE,EAAAA,gBAAgB,EAAE,YAA4B;AAC5C,WAAO,IAAIC,8BAAJ,CAAmBC,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAnB,CAAP;AACD,GAZoC;AAarCC,EAAAA,eAAe,EAAE,UACfR,EADe,EAEA;AACf,WAAO,IAAIS,4BAAJ,CAAkBT,EAAlB,EAAsBK,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAtB,CAAP;AACD;AAjBoC,CAAhC","sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkComputedValue } from \"./RNSkComputedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createComputedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkComputedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame.bind(window));\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));\n  },\n};\n"]}
+{"version":3,"names":["ValueApi","createValue","initialValue","RNSkValue","createComputedValue","cb","values","RNSkComputedValue","createClockValue","RNSkClockValue","requestAnimationFrame","bind","window","createAnimation","RNSkAnimation"],"sources":["api.ts"],"sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkComputedValue } from \"./RNSkComputedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createComputedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkComputedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame.bind(window));\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));\n  },\n};\n"],"mappings":";;;;;;;AASA;;AACA;;AACA;;AACA;;AAEO,MAAMA,QAAuB,GAAG;EACrCC,WAAW,EAAE,UAAaC,YAAb,EAAmD;IAC9D,OAAO,IAAIC,oBAAJ,CAAcD,YAAd,CAAP;EACD,CAHoC;EAIrCE,mBAAmB,EAAE,UACnBC,EADmB,EAEnBC,MAFmB,EAGL;IACd,OAAO,IAAIC,oCAAJ,CAAsBF,EAAtB,EAA0BC,MAA1B,CAAP;EACD,CAToC;EAUrCE,gBAAgB,EAAE,YAA4B;IAC5C,OAAO,IAAIC,8BAAJ,CAAmBC,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAnB,CAAP;EACD,CAZoC;EAarCC,eAAe,EAAE,UACfR,EADe,EAEA;IACf,OAAO,IAAIS,4BAAJ,CAAkBT,EAAlB,EAAsBK,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAtB,CAAP;EACD;AAjBoC,CAAhC"}

package/lib/commonjs/values/web/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./api\";\n"]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./api\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/commonjs/views/SkiaBaseWebView.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkiaBaseWebView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _JsiSkSurface = require("../skia/web/JsiSkSurface");
+
+var _types = require("./types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+const pd = _reactNative.PixelRatio.get();
+
+class SkiaBaseWebView extends _react.default.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_surface", null);
+
+    _defineProperty(this, "_unsubscriptions", []);
+
+    _defineProperty(this, "_touches", []);
+
+    _defineProperty(this, "_canvas", null);
+
+    _defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
+
+    _defineProperty(this, "_mode", void 0);
+
+    _defineProperty(this, "_redrawRequests", 0);
+
+    _defineProperty(this, "requestId", 0);
+
+    _defineProperty(this, "width", 0);
+
+    _defineProperty(this, "height", 0);
+
+    this._mode = props.mode ?? "default";
+  }
+
+  unsubscribeAll() {
+    this._unsubscriptions.forEach(u => u());
+
+    this._unsubscriptions = [];
+  }
+
+  onLayout(evt) {
+    const {
+      CanvasKit
+    } = global;
+    const {
+      width,
+      height
+    } = evt.nativeEvent.layout;
+    this.width = width;
+    this.height = height; // Reset canvas / surface on layout change
+
+    if (this._canvasRef.current) {
+      const canvas = this._canvasRef.current;
+      canvas.width = canvas.clientWidth * pd;
+      canvas.height = canvas.clientHeight * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+
+      if (!surface) {
+        throw new Error("Could not create surface");
+      }
+
+      this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
+  }
+
+  componentDidMount() {
+    // Start render loop
+    this.tick();
+  }
+
+  componentDidUpdate() {
+    this.redraw();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    cancelAnimationFrame(this.requestId);
+  }
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+
+
+  makeImageSnapshot(rect) {
+    var _this$_surface;
+
+    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
+  }
+  /**
+   * Override to render
+   */
+
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  tick() {
+    if (this._mode === "continuous" || this._redrawRequests > 0) {
+      this._redrawRequests = 0;
+
+      if (this._canvas) {
+        var _this$_surface2;
+
+        const touches = [...this._touches];
+        this._touches = [];
+        this.renderInCanvas(this._canvas, touches);
+        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+      }
+    }
+
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
+  }
+
+  redraw() {
+    this._redrawRequests++;
+  }
+  /**
+   * Updates the drawing mode for the skia view. This is the same
+   * as declaratively setting the mode property on the SkiaView.
+   * There are two drawing modes, "continuous" and "default",
+   * where the continuous mode will continuously redraw the view and
+   * the default mode will only redraw when any of the regular react
+   * properties are changed like size and margins.
+   * @param mode Drawing mode to use.
+   */
+
+
+  setDrawMode(mode) {
+    this._mode = mode;
+    this.tick();
+  }
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+
+
+  registerValues(_values) {
+    // Unsubscribe from dependency values
+    this.unsubscribeAll(); // Register redraw dependencies on values
+
+    _values.forEach(v => {
+      this._unsubscriptions.push(v.addListener(() => {
+        this.redraw();
+      }));
+    });
+  }
+
+  handleTouchEvent(evt, touchType) {
+    this._touches.push({
+      id: evt.pointerId,
+      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
+      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
+      force: evt.pressure,
+      type: touchType,
+      timestamp: Date.now()
+    });
+
+    this.redraw();
+  }
+
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
+  }
+
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, viewProps, {
+      onLayout: this.onLayout.bind(this)
+    }), /*#__PURE__*/_react.default.createElement("canvas", {
+      ref: this._canvasRef,
+      style: {
+        display: "flex",
+        flex: 1
+      },
+      onPointerDown: this.createTouchHandler(_types.TouchType.Start),
+      onPointerMove: this.createTouchHandler(_types.TouchType.Active),
+      onPointerUp: this.createTouchHandler(_types.TouchType.End),
+      onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(_types.TouchType.End),
+      onPointerOut: this.createTouchHandler(_types.TouchType.End)
+    }));
+  }
+
+}
+
+exports.SkiaBaseWebView = SkiaBaseWebView;
+//# sourceMappingURL=SkiaBaseWebView.js.map

package/lib/commonjs/views/SkiaBaseWebView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","renderInCanvas","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = canvas.clientWidth * pd;\n      canvas.height = canvas.clientHeight * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        this.renderInCanvas(this._canvas!, touches);\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/commonjs/views/SkiaPictureView.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkiaPictureView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _api = require("./api");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+let SkiaViewNativeId = 1000;
+const NativeSkiaPictureView = (0, _reactNative.requireNativeComponent)("SkiaPictureView");
+
+class SkiaPictureView extends _react.default.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "_nativeId", void 0);
+
+    this._nativeId = SkiaViewNativeId++;
+    const {
+      picture
+    } = props;
+
+    if (picture) {
+      assertSkiaViewApi();
+
+      _api.SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      picture
+    } = this.props;
+
+    if (picture !== prevProps.picture) {
+      assertSkiaViewApi();
+
+      _api.SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+
+
+  makeImageSnapshot(rect) {
+    assertSkiaViewApi();
+    return _api.SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+
+
+  redraw() {
+    assertSkiaViewApi();
+
+    _api.SkiaViewApi.requestRedraw(this._nativeId);
+  }
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+
+
+  registerValues(values) {
+    assertSkiaViewApi();
+    return _api.SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(NativeSkiaPictureView, _extends({
+      collapsable: false,
+      nativeID: `${this._nativeId}`,
+      mode: mode,
+      debug: debug
+    }, viewProps));
+  }
+
+}
+
+exports.SkiaPictureView = SkiaPictureView;
+
+const assertSkiaViewApi = () => {
+  if (_api.SkiaViewApi === null || _api.SkiaViewApi.setJsiProperty === null || _api.SkiaViewApi.callJsiMethod === null || _api.SkiaViewApi.registerValuesInView === null || _api.SkiaViewApi.requestRedraw === null || _api.SkiaViewApi.makeImageSnapshot === null) {
+    throw Error("Skia View Api was not found.");
+  }
+};
+//# sourceMappingURL=SkiaPictureView.js.map

package/lib/commonjs/views/SkiaPictureView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SkiaViewNativeId","NativeSkiaPictureView","requireNativeComponent","SkiaPictureView","React","Component","constructor","props","_nativeId","picture","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaPictureView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { picture } = props;\n    if (picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaPictureViewProps) {\n    const { picture } = this.props;\n    if (picture !== prevProps.picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,qBAAqB,GACzB,IAAAC,mCAAA,EAA4C,iBAA5C,CADF;;AAGO,MAAMC,eAAN,SAA8BC,cAAA,CAAMC,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAcF,KAApB;;IACA,IAAIE,OAAJ,EAAa;MACXC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEN;IAAF,IAAc,KAAKF,KAAzB;;IACA,IAAIE,OAAO,KAAKM,SAAS,CAACN,OAA1B,EAAmC;MACjCC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;;;AAmE3E,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}

package/lib/commonjs/views/SkiaPictureView.web.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkiaPictureView = void 0;
+
+var _reactNative = require("react-native");
+
+var _SkiaBaseWebView = require("./SkiaBaseWebView");
+
+const pd = _reactNative.PixelRatio.get();
+
+class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
+  constructor(props) {
+    super(props);
+  }
+
+  renderInCanvas(canvas) {
+    if (this.props.picture) {
+      canvas.save();
+      canvas.scale(pd, pd);
+      canvas.drawPicture(this.props.picture);
+      canvas.restore();
+    }
+  }
+
+}
+
+exports.SkiaPictureView = SkiaPictureView;
+//# sourceMappingURL=SkiaPictureView.web.js.map

package/lib/commonjs/views/SkiaPictureView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pd","PixelRatio","get","SkiaPictureView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","picture","save","scale","drawPicture","restore"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.save();\n      canvas.scale(pd, pd);\n      canvas.drawPicture(this.props.picture);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,eAAN,SAA8BC,gCAA9B,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,IAAP;MACAF,MAAM,CAACG,KAAP,CAAaX,EAAb,EAAiBA,EAAjB;MACAQ,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}

package/lib/commonjs/views/SkiaView.js

@@ -13,12 +13,12 @@ var _api = require("./api");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 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; }
 
 let SkiaViewNativeId = 1000;
-const NativeSkiaView = (0, _reactNative.requireNativeComponent)("ReactNativeSkiaView");
+const NativeSkiaView = (0, _reactNative.requireNativeComponent)("SkiaDrawView");
 
 class SkiaView extends _react.default.Component {
   constructor(props) {

package/lib/commonjs/views/SkiaView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.tsx"],"names":["SkiaViewNativeId","NativeSkiaView","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAG,yCACrB,qBADqB,CAAvB;;AAIO,MAAMC,QAAN,SAAuBC,eAAMC,SAA7B,CAAsD;AAC3DC,EAAAA,WAAW,CAACC,KAAD,EAAuB;AAChC,UAAMA,KAAN;;AADgC;;AAEhC,SAAKC,SAAL,GAAiBP,gBAAgB,EAAjC;AACA,UAAM;AAAEQ,MAAAA;AAAF,QAAaF,KAAnB;;AACA,QAAIE,MAAJ,EAAY;AACVC,MAAAA,iBAAiB;;AACjBC,uBAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;AACD;AACF;;AAIkB,MAARI,QAAQ,GAAG;AACpB,WAAO,KAAKL,SAAZ;AACD;;AAEDM,EAAAA,kBAAkB,CAACC,SAAD,EAA2B;AAC3C,UAAM;AAAEN,MAAAA;AAAF,QAAa,KAAKF,KAAxB;;AACA,QAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;AAC/BC,MAAAA,iBAAiB;;AACjBC,uBAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AACSO,EAAAA,iBAAiB,CAACC,IAAD,EAAgB;AACtCP,IAAAA,iBAAiB;AACjB,WAAOC,iBAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;AACD;AAED;AACF;AACA;;;AACSC,EAAAA,MAAM,GAAG;AACdR,IAAAA,iBAAiB;;AACjBC,qBAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;AACD;AAED;AACF;AACA;AACA;AACA;;;AACSY,EAAAA,cAAc,CAACC,MAAD,EAA2C;AAC9DX,IAAAA,iBAAiB;AACjB,WAAOC,iBAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;AACD;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA,KAAK,GAAG,KAAhB;AAAuB,SAAGC;AAA1B,QAAwC,KAAKnB,KAAnD;AACA,wBACE,6BAAC,cAAD;AACE,MAAA,WAAW,EAAE,KADf;AAEE,MAAA,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;AAGE,MAAA,IAAI,EAAEgB,IAHR;AAIE,MAAA,KAAK,EAAEC;AAJT,OAKMC,SALN,EADF;AASD;;AAhE0D;;;;AAmE7D,MAAMhB,iBAAiB,GAAG,MAAM;AAC9B,MACEC,qBAAgB,IAAhB,IACAA,iBAAYC,cAAZ,KAA+B,IAD/B,IAEAD,iBAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,iBAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,iBAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,iBAAYK,iBAAZ,KAAkC,IANpC,EAOE;AACA,UAAMY,KAAK,CAAC,8BAAD,CAAX;AACD;AACF,CAXD","sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\n);\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"]}
+{"version":3,"names":["SkiaViewNativeId","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;;;;;AAGA,IAAIA,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAClB,IAAAC,mCAAA,EAA4C,cAA5C,CADF;;AAGO,MAAMC,QAAN,SAAuBC,cAAA,CAAMC,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBR,gBAAgB,EAAjC;IACA,MAAM;MAAES;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEN;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,6BAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;;;AAmEjE,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}