@shopify/react-native-skia 0.1.136 → 0.1.137

package/lib/module/renderer/processors/Transform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Transform.ts"],"names":["processTransform","processCanvasTransform","canvas","Skia","transform","origin","matrix","m3","Matrix","translate","x","y","concat","transformOrigin","localMatrix","m","undefined","translateX","translateY"],"mappings":"AAEA,SAASA,gBAAT,QAAiC,kBAAjC;AAQA,OAAO,MAAMC,sBAAsB,GAAG,iBAGjC;AAAA,MAFH;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAEG;AAAA,MADH;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,MAAb;AAAqBC,IAAAA;AAArB,GACG;;AACH,MAAIA,MAAJ,EAAY;AACV,QAAID,MAAJ,EAAY;AACV,YAAME,EAAE,GAAGJ,IAAI,CAACK,MAAL,EAAX;AACAD,MAAAA,EAAE,CAACE,SAAH,CAAaJ,MAAM,CAACK,CAApB,EAAuBL,MAAM,CAACM,CAA9B;AACAJ,MAAAA,EAAE,CAACK,MAAH,CAAUN,MAAV;AACAC,MAAAA,EAAE,CAACE,SAAH,CAAa,CAACJ,MAAM,CAACK,CAArB,EAAwB,CAACL,MAAM,CAACM,CAAhC;AACAT,MAAAA,MAAM,CAACU,MAAP,CAAcL,EAAd;AACD,KAND,MAMO;AACLL,MAAAA,MAAM,CAACU,MAAP,CAAcN,MAAd;AACD;AACF,GAVD,MAUO,IAAIF,SAAJ,EAAe;AACpB,UAAMG,EAAE,GAAGP,gBAAgB,CACzBG,IAAI,CAACK,MAAL,EADyB,EAEzBH,MAAM,GAAGQ,eAAe,CAACR,MAAD,EAASD,SAAT,CAAlB,GAAwCA,SAFrB,CAA3B;AAIAF,IAAAA,MAAM,CAACU,MAAP,CAAcL,EAAd;AACD;AACF,CArBM;AAuBP,OAAO,MAAMO,WAAW,GAAG,CACzBC,CADyB,YAGtB;AAAA,MADH;AAAEX,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GACG;;AACH,MAAID,SAAJ,EAAe;AACb,WAAOJ,gBAAgB,CACrBe,CADqB,EAErBV,MAAM,GAAGQ,eAAe,CAACR,MAAD,EAASD,SAAT,CAAlB,GAAwCA,SAFzB,CAAvB;AAID;;AACD,SAAOY,SAAP;AACD,CAXM;AAaP,OAAO,MAAMH,eAAe,GAAG,CAACR,MAAD,EAAiBD,SAAjB,KAA6C,CAC1E;AAAEa,EAAAA,UAAU,EAAEZ,MAAM,CAACK;AAArB,CAD0E,EAE1E;AAAEQ,EAAAA,UAAU,EAAEb,MAAM,CAACM;AAArB,CAF0E,EAG1E,GAAGP,SAHuE,EAI1E;AAAEa,EAAAA,UAAU,EAAE,CAACZ,MAAM,CAACK;AAAtB,CAJ0E,EAK1E;AAAEQ,EAAAA,UAAU,EAAE,CAACb,MAAM,CAACM;AAAtB,CAL0E,CAArE","sourcesContent":["import type { DrawingContext } from \"../DrawingContext\";\nimport type { SkMatrix, Vector, Transforms2d } from \"../../skia/types\";\nimport { processTransform } from \"../../skia/types\";\n\nexport interface TransformProps {\n  transform?: Transforms2d;\n  origin?: Vector;\n  matrix?: SkMatrix;\n}\n\nexport const processCanvasTransform = (\n  { canvas, Skia }: DrawingContext,\n  { transform, origin, matrix }: TransformProps\n) => {\n  if (matrix) {\n    if (origin) {\n      const m3 = Skia.Matrix();\n      m3.translate(origin.x, origin.y);\n      m3.concat(matrix);\n      m3.translate(-origin.x, -origin.y);\n      canvas.concat(m3);\n    } else {\n      canvas.concat(matrix);\n    }\n  } else if (transform) {\n    const m3 = processTransform(\n      Skia.Matrix(),\n      origin ? transformOrigin(origin, transform) : transform\n    );\n    canvas.concat(m3);\n  }\n};\n\nexport const localMatrix = (\n  m: SkMatrix,\n  { transform, origin }: TransformProps\n) => {\n  if (transform) {\n    return processTransform(\n      m,\n      origin ? transformOrigin(origin, transform) : transform\n    );\n  }\n  return undefined;\n};\n\nexport const transformOrigin = (origin: Vector, transform: Transforms2d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n"]}
+{"version":3,"sources":["Transform.ts"],"names":["processTransform","processCanvasTransform","canvas","transform","origin","matrix","translate","x","y","concat","transformOrigin","localMatrix","m","undefined","translateX","translateY"],"mappings":"AACA,SAASA,gBAAT,QAAiC,kBAAjC;AASA,OAAO,MAAMC,sBAAsB,GAAG,CACpCC,MADoC,WAGjC;AAAA,MADH;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,MAAb;AAAqBC,IAAAA;AAArB,GACG;;AACH,MAAIA,MAAJ,EAAY;AACV,QAAID,MAAJ,EAAY;AACVF,MAAAA,MAAM,CAACI,SAAP,CAAiBF,MAAM,CAACG,CAAxB,EAA2BH,MAAM,CAACI,CAAlC;AACAN,MAAAA,MAAM,CAACO,MAAP,CAAcJ,MAAd;AACAH,MAAAA,MAAM,CAACI,SAAP,CAAiB,CAACF,MAAM,CAACG,CAAzB,EAA4B,CAACH,MAAM,CAACI,CAApC;AACD,KAJD,MAIO;AACLN,MAAAA,MAAM,CAACO,MAAP,CAAcJ,MAAd;AACD;AACF,GARD,MAQO,IAAIF,SAAJ,EAAe;AACpBH,IAAAA,gBAAgB,CACdE,MADc,EAEdE,MAAM,GAAGM,eAAe,CAACN,MAAD,EAASD,SAAT,CAAlB,GAAwCA,SAFhC,CAAhB;AAID;AACF,CAlBM;AAoBP,OAAO,MAAMQ,WAAW,GAAG,CACzBC,CADyB,YAGtB;AAAA,MADH;AAAET,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GACG;;AACH,MAAID,SAAJ,EAAe;AACb,WAAOH,gBAAgB,CACrBY,CADqB,EAErBR,MAAM,GAAGM,eAAe,CAACN,MAAD,EAASD,SAAT,CAAlB,GAAwCA,SAFzB,CAAvB;AAID;;AACD,SAAOU,SAAP;AACD,CAXM;AAaP,OAAO,MAAMH,eAAe,GAAG,CAACN,MAAD,EAAiBD,SAAjB,KAA6C,CAC1E;AAAEW,EAAAA,UAAU,EAAEV,MAAM,CAACG;AAArB,CAD0E,EAE1E;AAAEQ,EAAAA,UAAU,EAAEX,MAAM,CAACI;AAArB,CAF0E,EAG1E,GAAGL,SAHuE,EAI1E;AAAEW,EAAAA,UAAU,EAAE,CAACV,MAAM,CAACG;AAAtB,CAJ0E,EAK1E;AAAEQ,EAAAA,UAAU,EAAE,CAACX,MAAM,CAACI;AAAtB,CAL0E,CAArE","sourcesContent":["import type { SkMatrix, Vector, Transforms2d } from \"../../skia/types\";\nimport { processTransform } from \"../../skia/types\";\nimport type { SkCanvas } from \"../../skia/types/Canvas\";\n\nexport interface TransformProps {\n  transform?: Transforms2d;\n  origin?: Vector;\n  matrix?: SkMatrix;\n}\n\nexport const processCanvasTransform = (\n  canvas: SkCanvas,\n  { transform, origin, matrix }: TransformProps\n) => {\n  if (matrix) {\n    if (origin) {\n      canvas.translate(origin.x, origin.y);\n      canvas.concat(matrix);\n      canvas.translate(-origin.x, -origin.y);\n    } else {\n      canvas.concat(matrix);\n    }\n  } else if (transform) {\n    processTransform(\n      canvas,\n      origin ? transformOrigin(origin, transform) : transform\n    );\n  }\n};\n\nexport const localMatrix = (\n  m: SkMatrix,\n  { transform, origin }: TransformProps\n) => {\n  if (transform) {\n    return processTransform(\n      m,\n      origin ? transformOrigin(origin, transform) : transform\n    );\n  }\n  return undefined;\n};\n\nexport const transformOrigin = (origin: Vector, transform: Transforms2d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n"]}

package/lib/module/skia/types/Matrix.js

@@ -12,6 +12,7 @@ export let MatrixIndex;
   MatrixIndex[MatrixIndex["persp2"] = 8] = "persp2";
 })(MatrixIndex || (MatrixIndex = {}));
 
+export const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";
 export const processTransform = (m, transforms) => {
   for (const transform of transforms) {
     const key = Object.keys(transform)[0];
@@ -53,7 +54,12 @@ export const processTransform = (m, transforms) => {
     }
 
     if (key === "rotate" || key === "rotateZ") {
-      m.rotate(value);
+      if (isMatrix(m)) {
+        m.rotate(value);
+      } else {
+        m.rotate(toDegrees(value), 0, 0);
+      }
+
       continue;
     }
 
@@ -66,4 +72,8 @@ export const processTransform = (m, transforms) => {
 const exhaustiveCheck = a => {
   throw new Error(`Unknown transformation: ${a}`);
 };
+
+export const toDegrees = rad => {
+  return rad * 180 / Math.PI;
+};
 //# sourceMappingURL=Matrix.js.map

package/lib/module/skia/types/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","exhaustiveCheck","a","Error"],"mappings":"AACA,WAAYA,WAAZ;;WAAYA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,KAAAA,W;;AAkDZ,OAAO,MAAMC,gBAAgB,GAAG,CAACC,CAAD,EAAcC,UAAd,KAA2C;AACzE,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzCH,MAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACA;AACD;;AACDK,IAAAA,eAAe,CAACR,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CAvCM;;AAyCP,MAAMW,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  persp2 = 8,\n}\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = (m: SkMatrix, transforms: Transforms2d) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      m.rotate(value);\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n"]}
+{"version":3,"sources":["Matrix.ts"],"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"mappings":"AAEA,WAAYA,WAAZ;;WAAYA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;AAAAA,EAAAA,W,CAAAA,W;GAAAA,W,KAAAA,W;;AAYZ,OAAO,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;AA0CP,OAAO,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;AACH,OAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;AAClC,UAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;AACA,UAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;AACA,QAAIA,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,YAAZ,EAA0B;AACxBH,MAAAA,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAZ,EAAsB;AACpBH,MAAAA,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,OAAZ,EAAqB;AACnBH,MAAAA,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;AACA;AACD;;AACD,QAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;AACzC,UAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;AACfA,QAAAA,CAAC,CAACU,MAAF,CAASJ,KAAT;AACD,OAFD,MAEO;AACLN,QAAAA,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;AACD;;AACD;AACD;;AACDM,IAAAA,eAAe,CAACT,GAAD,CAAf;AACD;;AACD,SAAOH,CAAP;AACD,CA9CM;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;AAC3C,QAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIA,OAAO,MAAMF,SAAS,GAAII,GAAD,IAAiB;AACxC,SAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM","sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"]}

package/lib/module/skia/web/JsiSkMatrix.js

@@ -24,5 +24,9 @@ export class JsiSkMatrix extends HostObject {
     this.concat(new JsiSkMatrix(this.CanvasKit, Float32Array.of(...this.CanvasKit.Matrix.rotated(value))));
   }
 
+  identity() {
+    this.ref.set(this.CanvasKit.Matrix.identity());
+  }
+
 }
 //# sourceMappingURL=JsiSkMatrix.js.map

package/lib/module/skia/web/JsiSkMatrix.js.map

@@ -1 +1 @@
-{"version":3,"sources":["JsiSkMatrix.ts"],"names":["HostObject","toValue","JsiSkMatrix","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated"],"mappings":"AAIA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,QAApC;AAEA,OAAO,MAAMC,WAAN,SACGF,UADH,CAGP;AACEG,EAAAA,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAuC;AAChD,UAAMD,SAAN,EAAiBC,GAAjB,EAAsB,QAAtB;AACD;;AAEDC,EAAAA,MAAM,CAACC,MAAD,EAAmB;AACvB,SAAKF,GAAL,CAASG,GAAT,CAAa,KAAKJ,SAAL,CAAeK,MAAf,CAAsBC,QAAtB,CAA+B,KAAKL,GAApC,EAAyCJ,OAAO,CAACM,MAAD,CAAhD,CAAb;AACD;;AAEDI,EAAAA,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;AAC9B,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBO,UAAtB,CAAiCJ,CAAjC,EAAoCC,CAApC,CAAnB,CAFF,CADF;AAMD;;AAEDI,EAAAA,KAAK,CAACL,CAAD,EAAYC,CAAZ,EAAwB;AAC3B,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBS,MAAtB,CAA6BN,CAA7B,EAAgCC,CAAhC,aAAgCA,CAAhC,cAAgCA,CAAhC,GAAqCD,CAArC,CAAnB,CAFF,CADF;AAMD;;AAEDO,EAAAA,IAAI,CAACP,CAAD,EAAYC,CAAZ,EAAuB;AACzB,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBW,MAAtB,CAA6BR,CAA7B,EAAgCC,CAAhC,CAAnB,CAFF,CADF;AAMD;;AAEDQ,EAAAA,MAAM,CAACC,KAAD,EAAgB;AACpB,SAAKhB,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBc,OAAtB,CAA8BD,KAA9B,CAAnB,CAFF,CADF;AAMD;;AA3CH","sourcesContent":["import type { CanvasKit, Matrix3x3 } from \"canvaskit-wasm\";\n\nimport type { SkMatrix } from \"../types\";\n\nimport { HostObject, toValue } from \"./Host\";\n\nexport class JsiSkMatrix\n  extends HostObject<Matrix3x3, \"Matrix\">\n  implements SkMatrix\n{\n  constructor(CanvasKit: CanvasKit, ref: Matrix3x3) {\n    super(CanvasKit, ref, \"Matrix\");\n  }\n\n  concat(matrix: SkMatrix) {\n    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, toValue(matrix)));\n  }\n\n  translate(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))\n      )\n    );\n  }\n\n  scale(x: number, y?: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))\n      )\n    );\n  }\n\n  skew(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))\n      )\n    );\n  }\n\n  rotate(value: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))\n      )\n    );\n  }\n}\n"]}
+{"version":3,"sources":["JsiSkMatrix.ts"],"names":["HostObject","toValue","JsiSkMatrix","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated","identity"],"mappings":"AAIA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,QAApC;AAEA,OAAO,MAAMC,WAAN,SACGF,UADH,CAGP;AACEG,EAAAA,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAuC;AAChD,UAAMD,SAAN,EAAiBC,GAAjB,EAAsB,QAAtB;AACD;;AAEDC,EAAAA,MAAM,CAACC,MAAD,EAAmB;AACvB,SAAKF,GAAL,CAASG,GAAT,CAAa,KAAKJ,SAAL,CAAeK,MAAf,CAAsBC,QAAtB,CAA+B,KAAKL,GAApC,EAAyCJ,OAAO,CAACM,MAAD,CAAhD,CAAb;AACD;;AAEDI,EAAAA,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;AAC9B,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBO,UAAtB,CAAiCJ,CAAjC,EAAoCC,CAApC,CAAnB,CAFF,CADF;AAMD;;AAEDI,EAAAA,KAAK,CAACL,CAAD,EAAYC,CAAZ,EAAwB;AAC3B,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBS,MAAtB,CAA6BN,CAA7B,EAAgCC,CAAhC,aAAgCA,CAAhC,cAAgCA,CAAhC,GAAqCD,CAArC,CAAnB,CAFF,CADF;AAMD;;AAEDO,EAAAA,IAAI,CAACP,CAAD,EAAYC,CAAZ,EAAuB;AACzB,SAAKP,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBW,MAAtB,CAA6BR,CAA7B,EAAgCC,CAAhC,CAAnB,CAFF,CADF;AAMD;;AAEDQ,EAAAA,MAAM,CAACC,KAAD,EAAgB;AACpB,SAAKhB,MAAL,CACE,IAAIJ,WAAJ,CACE,KAAKE,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBc,OAAtB,CAA8BD,KAA9B,CAAnB,CAFF,CADF;AAMD;;AAEDE,EAAAA,QAAQ,GAAG;AACT,SAAKnB,GAAL,CAASG,GAAT,CAAa,KAAKJ,SAAL,CAAeK,MAAf,CAAsBe,QAAtB,EAAb;AACD;;AA/CH","sourcesContent":["import type { CanvasKit, Matrix3x3 } from \"canvaskit-wasm\";\n\nimport type { SkMatrix } from \"../types\";\n\nimport { HostObject, toValue } from \"./Host\";\n\nexport class JsiSkMatrix\n  extends HostObject<Matrix3x3, \"Matrix\">\n  implements SkMatrix\n{\n  constructor(CanvasKit: CanvasKit, ref: Matrix3x3) {\n    super(CanvasKit, ref, \"Matrix\");\n  }\n\n  concat(matrix: SkMatrix) {\n    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, toValue(matrix)));\n  }\n\n  translate(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))\n      )\n    );\n  }\n\n  scale(x: number, y?: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))\n      )\n    );\n  }\n\n  skew(x: number, y: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))\n      )\n    );\n  }\n\n  rotate(value: number) {\n    this.concat(\n      new JsiSkMatrix(\n        this.CanvasKit,\n        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))\n      )\n    );\n  }\n\n  identity() {\n    this.ref.set(this.CanvasKit.Matrix.identity());\n  }\n}\n"]}

package/lib/module/views/SkiaView.web.js

@@ -54,7 +54,7 @@ export class SkiaView extends React.Component {
 
         if (this._surface) {
           this._canvas = this._surface.getCanvas();
-          this.requestRedraw();
+          this.redraw();
         }
       }
     });
@@ -62,7 +62,7 @@ export class SkiaView extends React.Component {
 
   componentDidMount() {
     // Start render loop
-    this.redraw();
+    this.tick();
   }
 
   componentWillUnmount() {
@@ -88,7 +88,7 @@ export class SkiaView extends React.Component {
    */
 
 
-  redraw() {
+  tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
 
@@ -110,11 +110,11 @@ export class SkiaView extends React.Component {
 
 
     if (!this._unmounted) {
-      requestAnimationFrame(this.redraw.bind(this));
+      requestAnimationFrame(this.tick.bind(this));
     }
   }
 
-  requestRedraw() {
+  redraw() {
     this._redrawRequests++;
   }
   /**
@@ -130,7 +130,7 @@ export class SkiaView extends React.Component {
 
   setDrawMode(mode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
   /**
    * Registers one or move values as a dependant value of the Skia View. The view will
@@ -145,7 +145,7 @@ export class SkiaView extends React.Component {
 
     _values.forEach(v => {
       this._unsubscriptions.push(v.addListener(() => {
-        this.requestRedraw();
+        this.redraw();
       }));
     });
   }
@@ -160,7 +160,7 @@ export class SkiaView extends React.Component {
       timestamp: Date.now()
     });
 
-    this.requestRedraw();
+    this.redraw();
   }
 
   handleTouchStart(evt) {

package/lib/module/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","requestRedraw","componentDidMount","redraw","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","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","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { 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 { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\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.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.requestRedraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\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   * Sends a redraw request to the native SkiaView.\n   */\n  private redraw() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.redraw.bind(this));\n    }\n  }\n\n  public requestRedraw() {\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.redraw();\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.requestRedraw();\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.requestRedraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\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          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","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","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { 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 { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\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.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\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   * 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 (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.tick.bind(this));\n    }\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  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\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          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}

package/lib/module/web/LoadSkiaWeb.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
+export const LoadSkiaWeb = async () => {
+  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+
+  global.CanvasKit = CanvasKit;
+}; // We keep this function for backward compatibility
+
+export const LoadSkia = LoadSkiaWeb;
+//# sourceMappingURL=LoadSkiaWeb.js.map

package/lib/module/web/LoadSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADqC,CAErC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;AACA,OAAO,MAAME,QAAQ,GAAGH,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}

package/lib/module/web/WithSkiaWeb.js

@@ -0,0 +1,22 @@
+import React, { useMemo, lazy, Suspense } from "react";
+import { Platform } from "react-native";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+export const WithSkiaWeb = _ref => {
+  let {
+    getComponent,
+    fallback
+  } = _ref;
+  const Inner = useMemo(() => /*#__PURE__*/lazy(async () => {
+    if (Platform.OS === "web") {
+      await LoadSkiaWeb();
+    } else {
+      console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
+    }
+
+    return getComponent();
+  }), [getComponent]);
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: fallback
+  }, /*#__PURE__*/React.createElement(Inner, null));
+};
+//# sourceMappingURL=WithSkiaWeb.js.map

package/lib/module/web/WithSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAOA,OAAO,MAAMC,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAGR,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACM,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAML,WAAW,EAAjB;AACD,KAFD,MAEO;AACLM,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOL,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,oBAAC,KAAD,OADF,CADF;AAKD,CApBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n}\n\nexport const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb();\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent]\n  );\n  return (\n    <Suspense fallback={fallback}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}

package/lib/module/web/index.js

@@ -1,10 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-export const LoadSkia = async () => {
-  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
-  // to create the JsiSKApi in the Skia.web.ts file.
-
-  global.CanvasKit = CanvasKit;
-};
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";
 //# sourceMappingURL=index.js.map

package/lib/module/web/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["CanvasKitInit","LoadSkia","CanvasKit","global"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,QAAQ,GAAG,YAAY;AAClC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADkC,CAElC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkia = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,eAAd","sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"]}

package/lib/typescript/src/renderer/processors/Transform.d.ts

@@ -1,11 +1,11 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 export interface TransformProps {
     transform?: Transforms2d;
     origin?: Vector;
     matrix?: SkMatrix;
 }
-export declare const processCanvasTransform: ({ canvas, Skia }: DrawingContext, { transform, origin, matrix }: TransformProps) => void;
+export declare const processCanvasTransform: (canvas: SkCanvas, { transform, origin, matrix }: TransformProps) => void;
 export declare const localMatrix: (m: SkMatrix, { transform, origin }: TransformProps) => SkMatrix | undefined;
 export declare const transformOrigin: (origin: Vector, transform: Transforms2d) => (Pick<{
     readonly translateX: number;

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export declare enum MatrixIndex {
     ScaleX = 0,
     SkewX = 1,
@@ -10,12 +11,14 @@ export declare enum MatrixIndex {
     Persp1 = 7,
     persp2 = 8
 }
+export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     concat: (matrix: SkMatrix) => void;
     translate: (x: number, y: number) => void;
     scale: (x: number, y?: number) => void;
     skew: (x: number, y: number) => void;
     rotate: (theta: number) => void;
+    identity: () => void;
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
 declare type Transformations = {
@@ -25,5 +28,6 @@ export declare type Transforms2d = readonly (Pick<Transformations, "translateX">
 export interface TransformProp {
     transform?: Transforms2d;
 }
-export declare const processTransform: (m: SkMatrix, transforms: Transforms2d) => SkMatrix;
+export declare const processTransform: <T extends SkMatrix | SkCanvas>(m: T, transforms: Transforms2d) => T;
+export declare const toDegrees: (rad: number) => number;
 export {};

package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts

@@ -8,4 +8,5 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     scale(x: number, y?: number): void;
     skew(x: number, y: number): void;
     rotate(value: number): void;
+    identity(): void;
 }

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -29,8 +29,8 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
     /**
      * Sends a redraw request to the native SkiaView.
      */
-    private redraw;
-    requestRedraw(): void;
+    private tick;
+    redraw(): void;
     /**
      * Updates the drawing mode for the skia view. This is the same
      * as declaratively setting the mode property on the SkiaView.

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+declare global {
+    var CanvasKit: CanvasKitType;
+}
+export declare const LoadSkiaWeb: () => Promise<void>;
+export declare const LoadSkia: () => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Suspense } from "react";
+interface WithSkiaProps {
+    fallback: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback }: WithSkiaProps) => JSX.Element;
+export {};

package/lib/typescript/src/web/index.d.ts

@@ -1,5 +1,2 @@
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
-declare global {
-    var CanvasKit: CanvasKitType;
-}
-export declare const LoadSkia: () => Promise<void>;
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";

package/package.json

@@ -3,8 +3,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "setup-skia-web": "./scripts/setup-canvaskit.js"
+  },
   "title": "React Native Skia",
-  "version": "0.1.136",
+  "version": "0.1.137",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -29,6 +32,7 @@
     "libs/ios/libsvg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
+    "scripts/setup-canvaskit.js",
     "dist/**"
   ],
   "scripts": {

package/scripts/setup-canvaskit.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/* eslint-disable max-len */
+
+/**
+ * A script to automate the setup of `@shopify/react-native-skia` for web.
+ * The only requirement is that your project supports a 'static' folder (often named '/public').
+ * In `@expo/webpack-config` this is `./web` (default for now).
+ *
+ * This script does the following:
+ * 1. Resolve the public path relative to wherever the script is being run.
+ * 2. Log out some useful info about the web setup, just in case anything goes wrong.
+ * 3. Resolve the installed wasm file `canvaskit-wasm/bin/full/canvaskit.wasm`
+ *  from `@shopify/react-native-skia -> canvaskit`.
+ * 4. Recursively ensure the path exists and copy the file into the desired location.
+ *
+ *
+ * Usage:
+ * $ `npx <script> web`
+ *
+ * -> Copies the file to `<project>/web/static/js/canvaskit.wasm`
+ *
+ * Tooling that uses `/public`:
+ * $ `npx <script> public`
+ *
+ * -> Copies the file to `<project>/public/static/js/canvaskit.wasm`
+ */
+const fs = require("fs");
+const path = require("path");
+
+const args = process.argv.slice(2);
+
+const gray = (text) => `\x1b[90m${text}\x1b[0m`;
+const lime = (text) => `\x1b[32m${text}\x1b[0m`;
+
+function getWasmFilePath() {
+  try {
+    return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
+  } catch (error) {
+    console.error(
+      `Could not find 'canvaskit-wasm'. Please install '@shopify/react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
+    );
+    process.exit(1);
+  }
+}
+
+function getOutputFilePath() {
+  // Default to using `web` public path.
+  const publicFolder = path.resolve(args[0] || "web");
+  const publicLocation = "./static/js/canvaskit.wasm";
+  const output = path.join(publicFolder, publicLocation);
+
+  console.log(
+    `› Copying 'canvaskit.wasm' file to static folder:\n  ${gray(output)}\n`
+  );
+  return output;
+}
+
+function copyFile(from, to) {
+  const data = fs.readFileSync(from);
+  fs.mkdirSync(path.dirname(to), { recursive: true });
+  fs.writeFileSync(to, data);
+}
+
+// Copy the WASM file to `<static>/static/js/canvaskit.wasm`
+(() => {
+  copyFile(getWasmFilePath(), getOutputFilePath());
+
+  console.log(lime("› Success! You are almost there:"));
+  console.log(
+    gray(
+      "› To load React Native Skia Web, follow these instructions : https://shopify.github.io/react-native-skia/docs/getting-started/web"
+    )
+  );
+})();

package/src/renderer/components/Group.tsx

@@ -58,7 +58,7 @@ const onDraw = createDrawing<GroupProps>(
       } else {
         canvas.save();
       }
-      processCanvasTransform(ctx, groupProps);
+      processCanvasTransform(canvas, groupProps);
       if (clip) {
         const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
         processClip(Skia, canvas, clip, op);

package/src/renderer/processors/Transform.ts

@@ -1,6 +1,6 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
 import { processTransform } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 
 export interface TransformProps {
   transform?: Transforms2d;
@@ -9,25 +9,22 @@ export interface TransformProps {
 }
 
 export const processCanvasTransform = (
-  { canvas, Skia }: DrawingContext,
+  canvas: SkCanvas,
   { transform, origin, matrix }: TransformProps
 ) => {
   if (matrix) {
     if (origin) {
-      const m3 = Skia.Matrix();
-      m3.translate(origin.x, origin.y);
-      m3.concat(matrix);
-      m3.translate(-origin.x, -origin.y);
-      canvas.concat(m3);
+      canvas.translate(origin.x, origin.y);
+      canvas.concat(matrix);
+      canvas.translate(-origin.x, -origin.y);
     } else {
       canvas.concat(matrix);
     }
   } else if (transform) {
-    const m3 = processTransform(
-      Skia.Matrix(),
+    processTransform(
+      canvas,
       origin ? transformOrigin(origin, transform) : transform
     );
-    canvas.concat(m3);
   }
 };
 

package/src/skia/types/Matrix.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -11,12 +12,16 @@ export enum MatrixIndex {
   persp2 = 8,
 }
 
+export const isMatrix = (obj: unknown): obj is SkMatrix =>
+  obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
+
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   concat: (matrix: SkMatrix) => void;
   translate: (x: number, y: number) => void;
   scale: (x: number, y?: number) => void;
   skew: (x: number, y: number) => void;
   rotate: (theta: number) => void;
+  identity: () => void;
 }
 
 type Transform2dName =
@@ -49,7 +54,10 @@ export interface TransformProp {
   transform?: Transforms2d;
 }
 
-export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+export const processTransform = <T extends SkMatrix | SkCanvas>(
+  m: T,
+  transforms: Transforms2d
+) => {
   for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
@@ -82,7 +90,11 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
       continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      m.rotate(value);
+      if (isMatrix(m)) {
+        m.rotate(value);
+      } else {
+        m.rotate(toDegrees(value), 0, 0);
+      }
       continue;
     }
     exhaustiveCheck(key);
@@ -93,3 +105,7 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
 const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unknown transformation: ${a}`);
 };
+
+export const toDegrees = (rad: number) => {
+  return (rad * 180) / Math.PI;
+};

package/src/skia/web/JsiSkMatrix.ts

@@ -51,4 +51,8 @@ export class JsiSkMatrix
       )
     );
   }
+
+  identity() {
+    this.ref.set(this.CanvasKit.Matrix.identity());
+  }
 }