@shopify/react-native-skia 0.1.134 → 0.1.138
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -47
- package/android/build.gradle +1 -2
- package/cpp/api/JsiSkFont.h +25 -1
- package/cpp/api/JsiSkMatrix.h +12 -0
- package/cpp/api/JsiSkTypeface.h +1 -29
- package/jestSetup.js +5 -0
- package/lib/commonjs/animation/functions/interpolate.js +3 -2
- package/lib/commonjs/animation/functions/interpolate.js.map +1 -1
- package/lib/commonjs/animation/functions/interpolateColors.js +2 -2
- package/lib/commonjs/animation/functions/interpolateColors.js.map +1 -1
- package/lib/commonjs/animation/functions/interpolatePaths.js +45 -11
- package/lib/commonjs/animation/functions/interpolatePaths.js.map +1 -1
- package/lib/commonjs/mock/index.js +121 -177
- package/lib/commonjs/mock/index.js.map +1 -1
- package/lib/commonjs/renderer/components/Group.js +1 -1
- package/lib/commonjs/renderer/components/Group.js.map +1 -1
- package/lib/commonjs/renderer/processors/Transform.js +8 -15
- package/lib/commonjs/renderer/processors/Transform.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +7 -4
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/types/Font/Font.js.map +1 -1
- package/lib/commonjs/skia/types/Matrix.js +18 -3
- package/lib/commonjs/skia/types/Matrix.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkFont.js +6 -0
- package/lib/commonjs/skia/web/JsiSkFont.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkMatrix.js +4 -0
- package/lib/commonjs/skia/web/JsiSkMatrix.js.map +1 -1
- package/lib/commonjs/values/api.js +1 -7
- package/lib/commonjs/values/api.js.map +1 -1
- package/lib/commonjs/values/hooks/useComputedValue.js +2 -2
- package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
- package/lib/commonjs/views/SkiaView.web.js +27 -37
- package/lib/commonjs/views/SkiaView.web.js.map +1 -1
- package/lib/commonjs/web/LoadSkiaWeb.js +29 -0
- package/lib/commonjs/web/LoadSkiaWeb.js.map +1 -0
- package/lib/commonjs/web/WithSkiaWeb.js +39 -0
- package/lib/commonjs/web/WithSkiaWeb.js.map +1 -0
- package/lib/commonjs/web/index.js +22 -12
- package/lib/commonjs/web/index.js.map +1 -1
- package/lib/module/animation/functions/interpolate.js +2 -2
- package/lib/module/animation/functions/interpolate.js.map +1 -1
- package/lib/module/animation/functions/interpolateColors.js +1 -1
- package/lib/module/animation/functions/interpolateColors.js.map +1 -1
- package/lib/module/animation/functions/interpolatePaths.js +44 -11
- package/lib/module/animation/functions/interpolatePaths.js.map +1 -1
- package/lib/module/mock/index.js +103 -147
- package/lib/module/mock/index.js.map +1 -1
- package/lib/module/renderer/components/Group.js +1 -1
- package/lib/module/renderer/components/Group.js.map +1 -1
- package/lib/module/renderer/processors/Transform.js +8 -15
- package/lib/module/renderer/processors/Transform.js.map +1 -1
- package/lib/module/skia/core/Data.js +7 -4
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/types/Font/Font.js.map +1 -1
- package/lib/module/skia/types/Matrix.js +12 -2
- package/lib/module/skia/types/Matrix.js.map +1 -1
- package/lib/module/skia/web/JsiSkFont.js +6 -0
- package/lib/module/skia/web/JsiSkFont.js.map +1 -1
- package/lib/module/skia/web/JsiSkMatrix.js +4 -0
- package/lib/module/skia/web/JsiSkMatrix.js.map +1 -1
- package/lib/module/values/api.js +0 -4
- package/lib/module/values/api.js.map +1 -1
- package/lib/module/values/hooks/useComputedValue.js +1 -1
- package/lib/module/values/hooks/useComputedValue.js.map +1 -1
- package/lib/module/views/SkiaView.web.js +27 -37
- package/lib/module/views/SkiaView.web.js.map +1 -1
- package/lib/module/web/LoadSkiaWeb.js +16 -0
- package/lib/module/web/LoadSkiaWeb.js.map +1 -0
- package/lib/module/web/WithSkiaWeb.js +23 -0
- package/lib/module/web/WithSkiaWeb.js.map +1 -0
- package/lib/module/web/index.js +2 -9
- package/lib/module/web/index.js.map +1 -1
- package/lib/typescript/jestSetup.d.ts +1 -0
- package/lib/typescript/src/animation/functions/interpolate.d.ts +6 -0
- package/lib/typescript/src/animation/functions/interpolatePaths.d.ts +3 -1
- package/lib/typescript/src/mock/index.d.ts +11 -42
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -1
- package/lib/typescript/src/renderer/processors/Transform.d.ts +2 -2
- package/lib/typescript/src/skia/types/Font/Font.d.ts +6 -0
- package/lib/typescript/src/skia/types/Matrix.d.ts +6 -2
- package/lib/typescript/src/skia/types/Typeface/Typeface.d.ts +1 -4
- package/lib/typescript/src/skia/web/JsiSkFont.d.ts +1 -0
- package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts +1 -0
- package/lib/typescript/src/values/api.d.ts +0 -1
- package/lib/typescript/src/views/SkiaView.web.d.ts +4 -6
- package/lib/typescript/src/web/LoadSkiaWeb.d.ts +6 -0
- package/lib/typescript/src/web/WithSkiaWeb.d.ts +12 -0
- package/lib/typescript/src/web/index.d.ts +2 -5
- package/package.json +7 -3
- package/scripts/setup-canvaskit.js +74 -0
- package/src/animation/functions/interpolate.ts +4 -2
- package/src/animation/functions/interpolateColors.ts +1 -1
- package/src/animation/functions/interpolatePaths.ts +59 -10
- package/src/mock/index.ts +103 -149
- package/src/renderer/components/Group.tsx +1 -1
- package/src/renderer/processors/Transform.ts +7 -10
- package/src/skia/core/Data.ts +7 -8
- package/src/skia/types/Font/Font.ts +7 -0
- package/src/skia/types/Matrix.ts +19 -3
- package/src/skia/types/Typeface/Typeface.ts +1 -4
- package/src/skia/web/JsiSkFont.ts +6 -0
- package/src/skia/web/JsiSkMatrix.ts +4 -0
- package/src/values/api.ts +0 -2
- package/src/values/hooks/useComputedValue.ts +1 -1
- package/src/views/SkiaView.web.tsx +36 -43
- package/src/web/LoadSkiaWeb.tsx +24 -0
- package/src/web/WithSkiaWeb.tsx +37 -0
- package/src/web/index.ts +2 -15
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.processTransform = exports.MatrixIndex = void 0;
|
6
|
+
exports.toDegrees = exports.processTransform = exports.isMatrix = exports.MatrixIndex = void 0;
|
7
7
|
let MatrixIndex;
|
8
8
|
exports.MatrixIndex = MatrixIndex;
|
9
9
|
|
@@ -16,9 +16,13 @@ exports.MatrixIndex = MatrixIndex;
|
|
16
16
|
MatrixIndex[MatrixIndex["TransY"] = 5] = "TransY";
|
17
17
|
MatrixIndex[MatrixIndex["Persp0"] = 6] = "Persp0";
|
18
18
|
MatrixIndex[MatrixIndex["Persp1"] = 7] = "Persp1";
|
19
|
-
MatrixIndex[MatrixIndex["
|
19
|
+
MatrixIndex[MatrixIndex["Persp2"] = 8] = "Persp2";
|
20
20
|
})(MatrixIndex || (exports.MatrixIndex = MatrixIndex = {}));
|
21
21
|
|
22
|
+
const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";
|
23
|
+
|
24
|
+
exports.isMatrix = isMatrix;
|
25
|
+
|
22
26
|
const processTransform = (m, transforms) => {
|
23
27
|
for (const transform of transforms) {
|
24
28
|
const key = Object.keys(transform)[0];
|
@@ -60,7 +64,12 @@ const processTransform = (m, transforms) => {
|
|
60
64
|
}
|
61
65
|
|
62
66
|
if (key === "rotate" || key === "rotateZ") {
|
63
|
-
m
|
67
|
+
if (isMatrix(m)) {
|
68
|
+
m.rotate(value);
|
69
|
+
} else {
|
70
|
+
m.rotate(toDegrees(value), 0, 0);
|
71
|
+
}
|
72
|
+
|
64
73
|
continue;
|
65
74
|
}
|
66
75
|
|
@@ -75,4 +84,10 @@ exports.processTransform = processTransform;
|
|
75
84
|
const exhaustiveCheck = a => {
|
76
85
|
throw new Error(`Unknown transformation: ${a}`);
|
77
86
|
};
|
87
|
+
|
88
|
+
const toDegrees = rad => {
|
89
|
+
return rad * 180 / Math.PI;
|
90
|
+
};
|
91
|
+
|
92
|
+
exports.toDegrees = toDegrees;
|
78
93
|
//# sourceMappingURL=Matrix.js.map
|
@@ -1 +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":";;;;;;
|
1
|
+
{"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":";;;;;;IAEYA,W;;;WAAAA,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,2BAAAA,W;;AAYL,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;;;;AA0CA,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;;AAIO,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"]}
|
@@ -22,6 +22,12 @@ Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`);
|
|
22
22
|
return new _JsiSkRect.JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
|
23
23
|
}
|
24
24
|
|
25
|
+
getTextWidth(text, paint) {
|
26
|
+
const ids = this.getGlyphIDs(text);
|
27
|
+
const widths = this.getGlyphWidths(ids, paint);
|
28
|
+
return widths.reduce((a, b) => a + b, 0);
|
29
|
+
}
|
30
|
+
|
25
31
|
getMetrics() {
|
26
32
|
const result = this.ref.getMetrics();
|
27
33
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["JsiSkFont.ts"],"names":["JsiSkFont","HostObject","constructor","CanvasKit","ref","measureText","_text","_paint","console","warn","JsiSkRect","XYWHRect","getMetrics","result","ascent","descent","leading","bounds","undefined","
|
1
|
+
{"version":3,"sources":["JsiSkFont.ts"],"names":["JsiSkFont","HostObject","constructor","CanvasKit","ref","measureText","_text","_paint","console","warn","JsiSkRect","XYWHRect","getTextWidth","text","paint","ids","getGlyphIDs","widths","getGlyphWidths","reduce","a","b","getMetrics","result","ascent","descent","leading","bounds","undefined","str","numCodePoints","glyphs","getGlyphIntercepts","positions","top","bottom","map","p","getScaleX","getSize","getSkewX","isEmbolden","getTypeface","tf","JsiSkTypeface","setEdging","edging","setEmbeddedBitmaps","embeddedBitmaps","setHinting","hinting","setLinearMetrics","linearMetrics","setScaleX","sx","setSize","points","setSkewX","setEmbolden","embolden","setSubpixel","subpixel","setTypeface","face"],"mappings":"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","sourcesContent":["import type { CanvasKit, Font } from \"canvaskit-wasm\";\n\nimport type {\n FontEdging,\n FontHinting,\n SkFont,\n SkPaint,\n SkPoint,\n SkRect,\n SkTypeface,\n} from \"../types\";\n\nimport { HostObject, toValue, ckEnum } from \"./Host\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { JsiSkTypeface } from \"./JsiSkTypeface\";\n\nexport class JsiSkFont extends HostObject<Font, \"Font\"> implements SkFont {\n constructor(CanvasKit: CanvasKit, ref: Font) {\n super(CanvasKit, ref, \"Font\");\n }\n\n measureText(_text: string, _paint?: SkPaint): SkRect {\n console.warn(\n `measureText() is deprecated an returns an empty rectangle on React Native Web.\nClients should use \"Font.getGlyphWidths\" instead (the latter does no shaping)`\n );\n return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));\n }\n\n getTextWidth(text: string, paint?: SkPaint | undefined) {\n const ids = this.getGlyphIDs(text);\n const widths = this.getGlyphWidths(ids, paint);\n return widths.reduce((a, b) => a + b, 0);\n }\n\n getMetrics() {\n const result = this.ref.getMetrics();\n return {\n ascent: result.ascent,\n descent: result.descent,\n leading: result.leading,\n bounds: result.bounds\n ? new JsiSkRect(this.CanvasKit, result.bounds)\n : undefined,\n };\n }\n\n getGlyphIDs(str: string, numCodePoints?: number) {\n // TODO: Fix return value in the C++ implementation\n return [...this.ref.getGlyphIDs(str, numCodePoints)];\n }\n\n // TODO: Fix return value in the C++ implementation, it return float32\n getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {\n return [...this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null)];\n }\n\n getGlyphIntercepts(\n glyphs: number[],\n positions: SkPoint[],\n top: number,\n bottom: number\n ) {\n return [\n ...this.ref.getGlyphIntercepts(\n glyphs,\n positions.map((p) => toValue(p)),\n top,\n bottom\n ),\n ];\n }\n\n getScaleX() {\n return this.ref.getScaleX();\n }\n\n getSize() {\n return this.ref.getSize();\n }\n\n getSkewX() {\n return this.ref.getSkewX();\n }\n\n isEmbolden() {\n return this.ref.isEmbolden();\n }\n\n getTypeface() {\n const tf = this.ref.getTypeface();\n return tf ? new JsiSkTypeface(this.CanvasKit, tf) : null;\n }\n\n setEdging(edging: FontEdging) {\n this.ref.setEdging(ckEnum(edging));\n }\n\n setEmbeddedBitmaps(embeddedBitmaps: boolean) {\n this.ref.setEmbeddedBitmaps(embeddedBitmaps);\n }\n\n setHinting(hinting: FontHinting) {\n this.ref.setHinting(ckEnum(hinting));\n }\n\n setLinearMetrics(linearMetrics: boolean) {\n this.ref.setLinearMetrics(linearMetrics);\n }\n\n setScaleX(sx: number) {\n this.ref.setScaleX(sx);\n }\n\n setSize(points: number) {\n this.ref.setSize(points);\n }\n\n setSkewX(sx: number) {\n this.ref.setSkewX(sx);\n }\n\n setEmbolden(embolden: boolean) {\n this.ref.setEmbolden(embolden);\n }\n\n setSubpixel(subpixel: boolean) {\n this.ref.setSubpixel(subpixel);\n }\n\n setTypeface(face: SkTypeface | null) {\n this.ref.setTypeface(face ? toValue(face) : null);\n }\n}\n"]}
|
@@ -32,6 +32,10 @@ class JsiSkMatrix extends _Host.HostObject {
|
|
32
32
|
this.concat(new JsiSkMatrix(this.CanvasKit, Float32Array.of(...this.CanvasKit.Matrix.rotated(value))));
|
33
33
|
}
|
34
34
|
|
35
|
+
identity() {
|
36
|
+
this.ref.set(this.CanvasKit.Matrix.identity());
|
37
|
+
}
|
38
|
+
|
35
39
|
}
|
36
40
|
|
37
41
|
exports.JsiSkMatrix = JsiSkMatrix;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["JsiSkMatrix.ts"],"names":["JsiSkMatrix","HostObject","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated"],"mappings":";;;;;;;AAIA;;AAEO,MAAMA,WAAN,SACGC,gBADH,CAGP;AACEC,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,EAAyC,mBAAQE,MAAR,CAAzC,CAAb;AACD;;AAEDI,EAAAA,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;AAC9B,SAAKP,MAAL,CACE,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,SADP,EAEEU,YAAY,CAACC,EAAb,CAAgB,GAAG,KAAKX,SAAL,CAAeK,MAAf,CAAsBc,OAAtB,CAA8BD,KAA9B,CAAnB,CAFF,CADF;AAMD;;
|
1
|
+
{"version":3,"sources":["JsiSkMatrix.ts"],"names":["JsiSkMatrix","HostObject","constructor","CanvasKit","ref","concat","matrix","set","Matrix","multiply","translate","x","y","Float32Array","of","translated","scale","scaled","skew","skewed","rotate","value","rotated","identity"],"mappings":";;;;;;;AAIA;;AAEO,MAAMA,WAAN,SACGC,gBADH,CAGP;AACEC,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,EAAyC,mBAAQE,MAAR,CAAzC,CAAb;AACD;;AAEDI,EAAAA,SAAS,CAACC,CAAD,EAAYC,CAAZ,EAAuB;AAC9B,SAAKP,MAAL,CACE,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,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,IAAIL,WAAJ,CACE,KAAKG,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"]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.ValueApi = void 0;
|
7
7
|
const {
|
8
8
|
SkiaValueApi
|
9
9
|
} = global;
|
10
10
|
const ValueApi = SkiaValueApi;
|
11
11
|
exports.ValueApi = ValueApi;
|
12
|
-
const {
|
13
|
-
createValue,
|
14
|
-
createComputedValue
|
15
|
-
} = ValueApi;
|
16
|
-
exports.createComputedValue = createComputedValue;
|
17
|
-
exports.createValue = createValue;
|
18
12
|
//# sourceMappingURL=api.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["api.ts"],"names":["SkiaValueApi","global","ValueApi"
|
1
|
+
{"version":3,"sources":["api.ts"],"names":["SkiaValueApi","global","ValueApi"],"mappings":";;;;;;AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAmBC,MAAzB;AACO,MAAMC,QAAQ,GAAGF,YAAjB","sourcesContent":["import type { ISkiaValueApi } from \"./types\";\n\ndeclare global {\n var SkiaValueApi: ISkiaValueApi;\n}\n\nconst { SkiaValueApi } = global;\nexport const ValueApi = SkiaValueApi;\n"]}
|
@@ -9,7 +9,7 @@ var _react = require("react");
|
|
9
9
|
|
10
10
|
var _api = require("../api");
|
11
11
|
|
12
|
-
var
|
12
|
+
var _Animations = require("../../renderer/processors/Animations");
|
13
13
|
|
14
14
|
/**
|
15
15
|
* Creates a new computed value - a value that will calculate its value depending
|
@@ -18,7 +18,7 @@ var _processors = require("../../renderer/processors");
|
|
18
18
|
* @param values Dependant values
|
19
19
|
* @returns A readonly value
|
20
20
|
*/
|
21
|
-
const useComputedValue = (cb, values) => (0, _react.useMemo)(() => _api.ValueApi.createComputedValue(cb, values.filter(
|
21
|
+
const useComputedValue = (cb, values) => (0, _react.useMemo)(() => _api.ValueApi.createComputedValue(cb, values.filter(_Animations.isValue)), // eslint-disable-next-line react-hooks/exhaustive-deps
|
22
22
|
values);
|
23
23
|
|
24
24
|
exports.useComputedValue = useComputedValue;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useComputedValue.ts"],"names":["useComputedValue","cb","values","ValueApi","createComputedValue","filter","isValue","useDerivedValue","console","warn"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC9B,oBACE,MAAMC,cAASC,mBAAT,CAAgCH,EAAhC,EAAoCC,MAAM,CAACG,MAAP,CAAcC,mBAAd,CAApC,CADR,EAEE;AACAJ,MAHF,CADK;;;;AAOA,MAAMK,eAAe,GAAG,CAAIN,EAAJ,EAAiBC,MAAjB,KAAuC;AACpEM,EAAAA,OAAO,CAACC,IAAR,CAAa,8DAAb;AACA,SAAOT,gBAAgB,CAACC,EAAD,EAAKC,MAAL,CAAvB;AACD,CAHM","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors\";\n\n/**\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) =>\n useMemo(\n () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n values\n );\n\nexport const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {\n console.warn(\"useDerivedValue is deprecated. Use useComputedValue instead.\");\n return useComputedValue(cb, values);\n};\n"]}
|
1
|
+
{"version":3,"sources":["useComputedValue.ts"],"names":["useComputedValue","cb","values","ValueApi","createComputedValue","filter","isValue","useDerivedValue","console","warn"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC9B,oBACE,MAAMC,cAASC,mBAAT,CAAgCH,EAAhC,EAAoCC,MAAM,CAACG,MAAP,CAAcC,mBAAd,CAApC,CADR,EAEE;AACAJ,MAHF,CADK;;;;AAOA,MAAMK,eAAe,GAAG,CAAIN,EAAJ,EAAiBC,MAAjB,KAAuC;AACpEM,EAAAA,OAAO,CAACC,IAAR,CAAa,8DAAb;AACA,SAAOT,gBAAgB,CAACC,EAAD,EAAKC,MAAL,CAAvB;AACD,CAHM","sourcesContent":["import { useMemo } from \"react\";\n\nimport { ValueApi } from \"../api\";\nimport { isValue } from \"../../renderer/processors/Animations\";\n\n/**\n * Creates a new computed value - a value that will calculate its value depending\n * on other values.\n * @param cb Callback to calculate new value\n * @param values Dependant values\n * @returns A readonly value\n */\nexport const useComputedValue = <R>(cb: () => R, values: unknown[]) =>\n useMemo(\n () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n values\n );\n\nexport const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {\n console.warn(\"useDerivedValue is deprecated. Use useComputedValue instead.\");\n return useComputedValue(cb, values);\n};\n"]}
|
@@ -58,23 +58,23 @@ class SkiaView extends _react.default.Component {
|
|
58
58
|
this.setState({
|
59
59
|
width: evt.nativeEvent.layout.width,
|
60
60
|
height: evt.nativeEvent.layout.height
|
61
|
-
})
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
61
|
+
}, () => {
|
62
|
+
// Reset canvas / surface on layout change
|
63
|
+
if (this._canvasRef.current) {
|
64
|
+
// Create surface
|
65
|
+
this._surface = new _JsiSkSurface.JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
|
66
|
+
|
67
|
+
if (this._surface) {
|
68
|
+
this._canvas = this._surface.getCanvas();
|
69
|
+
this.redraw();
|
70
|
+
}
|
71
71
|
}
|
72
|
-
}
|
72
|
+
});
|
73
73
|
}
|
74
74
|
|
75
75
|
componentDidMount() {
|
76
76
|
// Start render loop
|
77
|
-
this.
|
77
|
+
this.tick();
|
78
78
|
}
|
79
79
|
|
80
80
|
componentWillUnmount() {
|
@@ -100,7 +100,7 @@ class SkiaView extends _react.default.Component {
|
|
100
100
|
*/
|
101
101
|
|
102
102
|
|
103
|
-
|
103
|
+
tick() {
|
104
104
|
if (this._mode === "continuous" || this._redrawRequests > 0) {
|
105
105
|
this._redrawRequests = 0;
|
106
106
|
|
@@ -113,7 +113,7 @@ class SkiaView extends _react.default.Component {
|
|
113
113
|
height: this.state.height,
|
114
114
|
width: this.state.width,
|
115
115
|
timestamp: Date.now(),
|
116
|
-
touches: [
|
116
|
+
touches: touches.map(t => [t])
|
117
117
|
};
|
118
118
|
this.props.onDraw && this.props.onDraw(this._canvas, info);
|
119
119
|
(_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
|
@@ -122,11 +122,11 @@ class SkiaView extends _react.default.Component {
|
|
122
122
|
|
123
123
|
|
124
124
|
if (!this._unmounted) {
|
125
|
-
requestAnimationFrame(this.
|
125
|
+
requestAnimationFrame(this.tick.bind(this));
|
126
126
|
}
|
127
127
|
}
|
128
128
|
|
129
|
-
|
129
|
+
redraw() {
|
130
130
|
this._redrawRequests++;
|
131
131
|
}
|
132
132
|
/**
|
@@ -142,7 +142,7 @@ class SkiaView extends _react.default.Component {
|
|
142
142
|
|
143
143
|
setDrawMode(mode) {
|
144
144
|
this._mode = mode;
|
145
|
-
this.
|
145
|
+
this.tick();
|
146
146
|
}
|
147
147
|
/**
|
148
148
|
* Registers one or move values as a dependant value of the Skia View. The view will
|
@@ -157,7 +157,7 @@ class SkiaView extends _react.default.Component {
|
|
157
157
|
|
158
158
|
_values.forEach(v => {
|
159
159
|
this._unsubscriptions.push(v.addListener(() => {
|
160
|
-
this.
|
160
|
+
this.redraw();
|
161
161
|
}));
|
162
162
|
});
|
163
163
|
}
|
@@ -172,23 +172,11 @@ class SkiaView extends _react.default.Component {
|
|
172
172
|
timestamp: Date.now()
|
173
173
|
});
|
174
174
|
|
175
|
-
this.
|
176
|
-
}
|
177
|
-
|
178
|
-
handleTouchStart(evt) {
|
179
|
-
this.handleTouchEvent(evt, _types.TouchType.Start);
|
180
|
-
}
|
181
|
-
|
182
|
-
handleTouchMove(evt) {
|
183
|
-
this.handleTouchEvent(evt, _types.TouchType.Active);
|
184
|
-
}
|
185
|
-
|
186
|
-
handleTouchEnd(evt) {
|
187
|
-
this.handleTouchEvent(evt, _types.TouchType.Cancelled);
|
175
|
+
this.redraw();
|
188
176
|
}
|
189
177
|
|
190
|
-
|
191
|
-
this.handleTouchEvent(evt,
|
178
|
+
createTouchHandler(touchType) {
|
179
|
+
return evt => this.handleTouchEvent(evt, touchType);
|
192
180
|
}
|
193
181
|
|
194
182
|
render() {
|
@@ -203,10 +191,12 @@ class SkiaView extends _react.default.Component {
|
|
203
191
|
ref: this._canvasRef,
|
204
192
|
width: this.state.width,
|
205
193
|
height: this.state.height,
|
206
|
-
onPointerDown: this.
|
207
|
-
onPointerMove: this.
|
208
|
-
onPointerUp: this.
|
209
|
-
onPointerCancel: this.
|
194
|
+
onPointerDown: this.createTouchHandler(_types.TouchType.Start),
|
195
|
+
onPointerMove: this.createTouchHandler(_types.TouchType.Active),
|
196
|
+
onPointerUp: this.createTouchHandler(_types.TouchType.End),
|
197
|
+
onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
|
198
|
+
onPointerLeave: this.createTouchHandler(_types.TouchType.End),
|
199
|
+
onPointerOut: this.createTouchHandler(_types.TouchType.End)
|
210
200
|
}));
|
211
201
|
}
|
212
202
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["SkiaView.web.tsx"],"names":["SkiaView","React","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","JsiSkSurface","global","CanvasKit","MakeCanvasSurface","_canvas","getCanvas","requestRedraw","redraw","componentDidMount","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","TouchType","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 width: evt.nativeEvent.layout.width,\n height: evt.nativeEvent.layout.height,\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.MakeCanvasSurface(this._canvasRef.current)!\n );\n // Get canvas and repaint\n if (this._surface) {\n this._canvas = this._surface.getCanvas();\n this.requestRedraw();\n this.redraw();\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"]}
|
1
|
+
{"version":3,"sources":["SkiaView.web.tsx"],"names":["SkiaView","React","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","JsiSkSurface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","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","createTouchHandler","render","debug","viewProps","TouchType","Start","Active","End","Cancelled"],"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.map((t) => [t]),\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 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 width={this.state.width}\n height={this.state.height}\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"]}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.LoadSkiaWeb = exports.LoadSkia = void 0;
|
7
|
+
|
8
|
+
var _canvaskit = _interopRequireDefault(require("canvaskit-wasm/bin/full/canvaskit"));
|
9
|
+
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
+
|
12
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
13
|
+
// @ts-expect-error
|
14
|
+
const LoadSkiaWeb = async opts => {
|
15
|
+
if (global.CanvasKit !== undefined) {
|
16
|
+
return;
|
17
|
+
}
|
18
|
+
|
19
|
+
const CanvasKit = await (0, _canvaskit.default)(opts); // The CanvasKit API is stored on the global object and used
|
20
|
+
// to create the JsiSKApi in the Skia.web.ts file.
|
21
|
+
|
22
|
+
global.CanvasKit = CanvasKit;
|
23
|
+
}; // We keep this function for backward compatibility
|
24
|
+
|
25
|
+
|
26
|
+
exports.LoadSkiaWeb = LoadSkiaWeb;
|
27
|
+
const LoadSkia = LoadSkiaWeb;
|
28
|
+
exports.LoadSkia = LoadSkia;
|
29
|
+
//# sourceMappingURL=LoadSkiaWeb.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAWO,MAAMA,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAM,wBAAcF,IAAd,CAAxB,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;;;AACO,MAAME,QAAQ,GAAGL,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 {\n CanvasKit as CanvasKitType,\n CanvasKitInitOptions,\n} from \"canvaskit-wasm\";\n\ndeclare global {\n var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {\n if (global.CanvasKit !== undefined) {\n return;\n }\n const CanvasKit = await CanvasKitInit(opts);\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"]}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.WithSkiaWeb = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
|
10
|
+
var _reactNative = require("react-native");
|
11
|
+
|
12
|
+
var _LoadSkiaWeb = require("./LoadSkiaWeb");
|
13
|
+
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
15
|
+
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
17
|
+
|
18
|
+
const WithSkiaWeb = _ref => {
|
19
|
+
let {
|
20
|
+
getComponent,
|
21
|
+
fallback,
|
22
|
+
opts
|
23
|
+
} = _ref;
|
24
|
+
const Inner = (0, _react.useMemo)(() => /*#__PURE__*/(0, _react.lazy)(async () => {
|
25
|
+
if (_reactNative.Platform.OS === "web") {
|
26
|
+
await (0, _LoadSkiaWeb.LoadSkiaWeb)(opts);
|
27
|
+
} else {
|
28
|
+
console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
|
29
|
+
}
|
30
|
+
|
31
|
+
return getComponent();
|
32
|
+
}), [getComponent, opts]);
|
33
|
+
return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
34
|
+
fallback: fallback !== null && fallback !== void 0 ? fallback : null
|
35
|
+
}, /*#__PURE__*/_react.default.createElement(Inner, null));
|
36
|
+
};
|
37
|
+
|
38
|
+
exports.WithSkiaWeb = WithSkiaWeb;
|
39
|
+
//# sourceMappingURL=WithSkiaWeb.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["WithSkiaWeb","getComponent","fallback","opts","Inner","Platform","OS","console","warn"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAQO,MAAMA,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAG,oBACZ,mBACE,iBAAK,YAAY;AACf,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAM,8BAAYH,IAAZ,CAAN;AACD,KAFD,MAEO;AACLI,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOP,YAAY,EAAnB;AACD,GATD,CAFU,EAYZ,CAACA,YAAD,EAAeE,IAAf,CAZY,CAAd;AAcA,sBACE,6BAAC,eAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,6BAAC,KAAD,OADF,CADF;AAKD,CAxBM","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 opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n getComponent,\n fallback,\n opts,\n}: WithSkiaProps) => {\n const Inner = useMemo(\n () =>\n lazy(async () => {\n if (Platform.OS === \"web\") {\n await LoadSkiaWeb(opts);\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, opts]\n );\n return (\n <Suspense fallback={fallback ?? null}>\n <Inner />\n </Suspense>\n );\n};\n"]}
|
@@ -3,20 +3,30 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.LoadSkia = void 0;
|
7
6
|
|
8
|
-
var
|
7
|
+
var _LoadSkiaWeb = require("./LoadSkiaWeb");
|
9
8
|
|
10
|
-
function
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
9
|
+
Object.keys(_LoadSkiaWeb).forEach(function (key) {
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
11
|
+
if (key in exports && exports[key] === _LoadSkiaWeb[key]) return;
|
12
|
+
Object.defineProperty(exports, key, {
|
13
|
+
enumerable: true,
|
14
|
+
get: function () {
|
15
|
+
return _LoadSkiaWeb[key];
|
16
|
+
}
|
17
|
+
});
|
18
|
+
});
|
17
19
|
|
18
|
-
|
19
|
-
};
|
20
|
+
var _WithSkiaWeb = require("./WithSkiaWeb");
|
20
21
|
|
21
|
-
|
22
|
+
Object.keys(_WithSkiaWeb).forEach(function (key) {
|
23
|
+
if (key === "default" || key === "__esModule") return;
|
24
|
+
if (key in exports && exports[key] === _WithSkiaWeb[key]) return;
|
25
|
+
Object.defineProperty(exports, key, {
|
26
|
+
enumerable: true,
|
27
|
+
get: function () {
|
28
|
+
return _WithSkiaWeb[key];
|
29
|
+
}
|
30
|
+
});
|
31
|
+
});
|
22
32
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"]}
|
@@ -31,7 +31,7 @@ function isExtrapolate(value) {
|
|
31
31
|
// if type is correct, converts it to ExtrapolationConfig
|
32
32
|
|
33
33
|
|
34
|
-
function
|
34
|
+
export function validateInterpolationOptions(type) {
|
35
35
|
// initialize extrapolationConfig with default extrapolation
|
36
36
|
const extrapolationConfig = {
|
37
37
|
extrapolateLeft: Extrapolate.EXTEND,
|
@@ -97,7 +97,7 @@ export function interpolate(x, input, output, type) {
|
|
97
97
|
throw Error("Interpolation input and output should contain at least two values.");
|
98
98
|
}
|
99
99
|
|
100
|
-
const extrapolationConfig =
|
100
|
+
const extrapolationConfig = validateInterpolationOptions(type);
|
101
101
|
const {
|
102
102
|
length
|
103
103
|
} = input;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["interpolate.ts"],"names":["Extrapolate","getVal","type","coef","val","leftEdgeOutput","rightEdgeOutput","x","IDENTITY","CLAMP","EXTEND","isExtrapolate","value","
|
1
|
+
{"version":3,"sources":["interpolate.ts"],"names":["Extrapolate","getVal","type","coef","val","leftEdgeOutput","rightEdgeOutput","x","IDENTITY","CLAMP","EXTEND","isExtrapolate","value","validateInterpolationOptions","extrapolationConfig","extrapolateLeft","extrapolateRight","Error","Object","assign","internalInterpolate","narrowedInput","leftEdgeInput","rightEdgeInput","progress","interpolate","input","output","length","i"],"mappings":"AAAA;AACA,WAAYA,WAAZ;;WAAYA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,KAAAA,W;;AA6BZ,SAASC,MAAT,CACEC,IADF,EAEEC,IAFF,EAGEC,GAHF,EAIEC,cAJF,EAKEC,eALF,EAMEC,CANF,EAOU;AACR,UAAQL,IAAR;AACE,SAAKF,WAAW,CAACQ,QAAjB;AACE,aAAOD,CAAP;;AACF,SAAKP,WAAW,CAACS,KAAjB;AACE,UAAIN,IAAI,GAAGC,GAAP,GAAaD,IAAI,GAAGE,cAAxB,EAAwC;AACtC,eAAOA,cAAP;AACD;;AACD,aAAOC,eAAP;;AACF,SAAKN,WAAW,CAACU,MAAjB;AACA;AACE,aAAON,GAAP;AAVJ;AAYD;;AAED,SAASO,aAAT,CAAuBC,KAAvB,EAA4D;AAC1D,SACEA,KAAK,KAAKZ,WAAW,CAACU,MAAtB,IACAE,KAAK,KAAKZ,WAAW,CAACS,KADtB,IAEAG,KAAK,KAAKZ,WAAW,CAACQ,QAHxB;AAKD,C,CAED;AACA;;;AACA,OAAO,SAASK,4BAAT,CACLX,IADK,EAEwB;AAC7B;AACA,QAAMY,mBAAgD,GAAG;AACvDC,IAAAA,eAAe,EAAEf,WAAW,CAACU,MAD0B;AAEvDM,IAAAA,gBAAgB,EAAEhB,WAAW,CAACU;AAFyB,GAAzD;;AAKA,MAAI,CAACR,IAAL,EAAW;AACT,WAAOY,mBAAP;AACD;;AAED,MAAI,OAAOZ,IAAP,KAAgB,QAApB,EAA8B;AAC5B,QAAI,CAACS,aAAa,CAACT,IAAD,CAAlB,EAA0B;AACxB,YAAM,IAAIe,KAAJ,CACH;AACT,iEAFY,CAAN;AAID;;AACDH,IAAAA,mBAAmB,CAACC,eAApB,GAAsCb,IAAtC;AACAY,IAAAA,mBAAmB,CAACE,gBAApB,GAAuCd,IAAvC;AACA,WAAOY,mBAAP;AACD,GArB4B,CAuB7B;;;AACA,MACGZ,IAAI,CAACa,eAAL,IAAwB,CAACJ,aAAa,CAACT,IAAI,CAACa,eAAN,CAAvC,IACCb,IAAI,CAACc,gBAAL,IAAyB,CAACL,aAAa,CAACT,IAAI,CAACc,gBAAN,CAF1C,EAGE;AACA,UAAM,IAAIC,KAAJ,CACH;AACP;AACA;AACA;AACA,UALU,CAAN;AAOD;;AAEDC,EAAAA,MAAM,CAACC,MAAP,CAAcL,mBAAd,EAAmCZ,IAAnC;AACA,SAAOY,mBAAP;AACD;;AAED,SAASM,mBAAT,CACEb,CADF,EAEEc,aAFF,EAGEP,mBAHF,EAIE;AACA,QAAM;AAAEQ,IAAAA,aAAF;AAAiBC,IAAAA,cAAjB;AAAiClB,IAAAA,cAAjC;AAAiDC,IAAAA;AAAjD,MACJe,aADF;;AAEA,MAAIE,cAAc,GAAGD,aAAjB,KAAmC,CAAvC,EAA0C;AACxC,WAAOjB,cAAP;AACD;;AACD,QAAMmB,QAAQ,GAAG,CAACjB,CAAC,GAAGe,aAAL,KAAuBC,cAAc,GAAGD,aAAxC,CAAjB;AACA,QAAMlB,GAAG,GAAGC,cAAc,GAAGmB,QAAQ,IAAIlB,eAAe,GAAGD,cAAtB,CAArC;AACA,QAAMF,IAAI,GAAGG,eAAe,IAAID,cAAnB,GAAoC,CAApC,GAAwC,CAAC,CAAtD;;AAEA,MAAIF,IAAI,GAAGC,GAAP,GAAaD,IAAI,GAAGE,cAAxB,EAAwC;AACtC,WAAOJ,MAAM,CACXa,mBAAmB,CAACC,eADT,EAEXZ,IAFW,EAGXC,GAHW,EAIXC,cAJW,EAKXC,eALW,EAMXC,CANW,CAAb;AAQD,GATD,MASO,IAAIJ,IAAI,GAAGC,GAAP,GAAaD,IAAI,GAAGG,eAAxB,EAAyC;AAC9C,WAAOL,MAAM,CACXa,mBAAmB,CAACE,gBADT,EAEXb,IAFW,EAGXC,GAHW,EAIXC,cAJW,EAKXC,eALW,EAMXC,CANW,CAAb;AAQD;;AAED,SAAOH,GAAP;AACD,C,CAED;;;AACA,OAAO,SAASqB,WAAT,CACLlB,CADK,EAELmB,KAFK,EAGLC,MAHK,EAILzB,IAJK,EAKG;AACR,MAAIwB,KAAK,CAACE,MAAN,GAAe,CAAf,IAAoBD,MAAM,CAACC,MAAP,GAAgB,CAAxC,EAA2C;AACzC,UAAMX,KAAK,CACT,oEADS,CAAX;AAGD;;AAED,QAAMH,mBAAmB,GAAGD,4BAA4B,CAACX,IAAD,CAAxD;AACA,QAAM;AAAE0B,IAAAA;AAAF,MAAaF,KAAnB;AACA,QAAML,aAAyC,GAAG;AAChDC,IAAAA,aAAa,EAAEI,KAAK,CAAC,CAAD,CAD4B;AAEhDH,IAAAA,cAAc,EAAEG,KAAK,CAAC,CAAD,CAF2B;AAGhDrB,IAAAA,cAAc,EAAEsB,MAAM,CAAC,CAAD,CAH0B;AAIhDrB,IAAAA,eAAe,EAAEqB,MAAM,CAAC,CAAD;AAJyB,GAAlD;;AAMA,MAAIC,MAAM,GAAG,CAAb,EAAgB;AACd,QAAIrB,CAAC,GAAGmB,KAAK,CAACE,MAAM,GAAG,CAAV,CAAb,EAA2B;AACzBP,MAAAA,aAAa,CAACC,aAAd,GAA8BI,KAAK,CAACE,MAAM,GAAG,CAAV,CAAnC;AACAP,MAAAA,aAAa,CAACE,cAAd,GAA+BG,KAAK,CAACE,MAAM,GAAG,CAAV,CAApC;AACAP,MAAAA,aAAa,CAAChB,cAAd,GAA+BsB,MAAM,CAACC,MAAM,GAAG,CAAV,CAArC;AACAP,MAAAA,aAAa,CAACf,eAAd,GAAgCqB,MAAM,CAACC,MAAM,GAAG,CAAV,CAAtC;AACD,KALD,MAKO;AACL,WAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,MAApB,EAA4B,EAAEC,CAA9B,EAAiC;AAC/B,YAAItB,CAAC,IAAImB,KAAK,CAACG,CAAD,CAAd,EAAmB;AACjBR,UAAAA,aAAa,CAACC,aAAd,GAA8BI,KAAK,CAACG,CAAC,GAAG,CAAL,CAAnC;AACAR,UAAAA,aAAa,CAACE,cAAd,GAA+BG,KAAK,CAACG,CAAD,CAApC;AACAR,UAAAA,aAAa,CAAChB,cAAd,GAA+BsB,MAAM,CAACE,CAAC,GAAG,CAAL,CAArC;AACAR,UAAAA,aAAa,CAACf,eAAd,GAAgCqB,MAAM,CAACE,CAAD,CAAtC;AACA;AACD;AACF;AACF;AACF;;AAED,SAAOT,mBAAmB,CAACb,CAAD,EAAIc,aAAJ,EAAmBP,mBAAnB,CAA1B;AACD","sourcesContent":["/* eslint-disable max-len */\nexport enum Extrapolate {\n IDENTITY = \"identity\",\n CLAMP = \"clamp\",\n EXTEND = \"extend\",\n}\n\ninterface InterpolationNarrowedInput {\n leftEdgeInput: number;\n rightEdgeInput: number;\n leftEdgeOutput: number;\n rightEdgeOutput: number;\n}\n\nexport interface ExtrapolationConfig {\n extrapolateLeft?: Extrapolate | string;\n extrapolateRight?: Extrapolate | string;\n}\n\ninterface RequiredExtrapolationConfig {\n extrapolateLeft: Extrapolate;\n extrapolateRight: Extrapolate;\n}\n\nexport type ExtrapolationType =\n | ExtrapolationConfig\n | Extrapolate\n | string\n | undefined;\n\nfunction getVal(\n type: Extrapolate,\n coef: number,\n val: number,\n leftEdgeOutput: number,\n rightEdgeOutput: number,\n x: number\n): number {\n switch (type) {\n case Extrapolate.IDENTITY:\n return x;\n case Extrapolate.CLAMP:\n if (coef * val < coef * leftEdgeOutput) {\n return leftEdgeOutput;\n }\n return rightEdgeOutput;\n case Extrapolate.EXTEND:\n default:\n return val;\n }\n}\n\nfunction isExtrapolate(value: string): value is Extrapolate {\n return (\n value === Extrapolate.EXTEND ||\n value === Extrapolate.CLAMP ||\n value === Extrapolate.IDENTITY\n );\n}\n\n// validates extrapolations type\n// if type is correct, converts it to ExtrapolationConfig\nexport function validateInterpolationOptions(\n type: ExtrapolationType\n): RequiredExtrapolationConfig {\n // initialize extrapolationConfig with default extrapolation\n const extrapolationConfig: RequiredExtrapolationConfig = {\n extrapolateLeft: Extrapolate.EXTEND,\n extrapolateRight: Extrapolate.EXTEND,\n };\n\n if (!type) {\n return extrapolationConfig;\n }\n\n if (typeof type === \"string\") {\n if (!isExtrapolate(type)) {\n throw new Error(\n `No supported value for \"interpolate\" \\nSupported values: [\"extend\", \"clamp\", \"identity\", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\\n Valid example:\n interpolate(value, [inputRange], [outputRange], \"clamp\")`\n );\n }\n extrapolationConfig.extrapolateLeft = type;\n extrapolationConfig.extrapolateRight = type;\n return extrapolationConfig;\n }\n\n // otherwise type is extrapolation config object\n if (\n (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||\n (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))\n ) {\n throw new Error(\n `No supported value for \"interpolate\" \\nSupported values: [\"extend\", \"clamp\", \"identity\", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\\n Valid example:\n interpolate(value, [inputRange], [outputRange], {\n extrapolateLeft: Extrapolation.CLAMP,\n extrapolateRight: Extrapolation.IDENTITY\n }})`\n );\n }\n\n Object.assign(extrapolationConfig, type);\n return extrapolationConfig;\n}\n\nfunction internalInterpolate(\n x: number,\n narrowedInput: InterpolationNarrowedInput,\n extrapolationConfig: RequiredExtrapolationConfig\n) {\n const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } =\n narrowedInput;\n if (rightEdgeInput - leftEdgeInput === 0) {\n return leftEdgeOutput;\n }\n const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);\n const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);\n const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;\n\n if (coef * val < coef * leftEdgeOutput) {\n return getVal(\n extrapolationConfig.extrapolateLeft,\n coef,\n val,\n leftEdgeOutput,\n rightEdgeOutput,\n x\n );\n } else if (coef * val > coef * rightEdgeOutput) {\n return getVal(\n extrapolationConfig.extrapolateRight,\n coef,\n val,\n leftEdgeOutput,\n rightEdgeOutput,\n x\n );\n }\n\n return val;\n}\n\n// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)\nexport function interpolate(\n x: number,\n input: readonly number[],\n output: readonly number[],\n type?: ExtrapolationType\n): number {\n if (input.length < 2 || output.length < 2) {\n throw Error(\n \"Interpolation input and output should contain at least two values.\"\n );\n }\n\n const extrapolationConfig = validateInterpolationOptions(type);\n const { length } = input;\n const narrowedInput: InterpolationNarrowedInput = {\n leftEdgeInput: input[0],\n rightEdgeInput: input[1],\n leftEdgeOutput: output[0],\n rightEdgeOutput: output[1],\n };\n if (length > 2) {\n if (x > input[length - 1]) {\n narrowedInput.leftEdgeInput = input[length - 2];\n narrowedInput.rightEdgeInput = input[length - 1];\n narrowedInput.leftEdgeOutput = output[length - 2];\n narrowedInput.rightEdgeOutput = output[length - 1];\n } else {\n for (let i = 1; i < length; ++i) {\n if (x <= input[i]) {\n narrowedInput.leftEdgeInput = input[i - 1];\n narrowedInput.rightEdgeInput = input[i];\n narrowedInput.leftEdgeOutput = output[i - 1];\n narrowedInput.rightEdgeOutput = output[i];\n break;\n }\n }\n }\n }\n\n return internalInterpolate(x, narrowedInput, extrapolationConfig);\n}\n"]}
|