@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
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Font.ts"],"names":["fontStyle","weight","width","slant","FontWeight","FontWidth","FontSlant","FontEdging","FontHinting","FontStyle","Normal","Upright","Bold","Italic","BoldItalic"],"mappings":"
|
1
|
+
{"version":3,"sources":["Font.ts"],"names":["fontStyle","weight","width","slant","FontWeight","FontWidth","FontSlant","FontEdging","FontHinting","FontStyle","Normal","Upright","Bold","Italic","BoldItalic"],"mappings":"AAyKA,MAAMA,SAAS,GAAG,CAChBC,MADgB,EAEhBC,KAFgB,EAGhBC,KAHgB,MAID;AAAEF,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAJC,CAAlB;;AAYA,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AAcZ,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAYZ,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAMZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AAMZ,WAAYC,WAAZ;;WAAYA,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;;AAOZ,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,MAAM,EAAEV,SAAS,CAACI,UAAU,CAACM,MAAZ,EAAoBL,SAAS,CAACK,MAA9B,EAAsCJ,SAAS,CAACK,OAAhD,CADM;AAEvBC,EAAAA,IAAI,EAAEZ,SAAS,CAACI,UAAU,CAACQ,IAAZ,EAAkBP,SAAS,CAACK,MAA5B,EAAoCJ,SAAS,CAACK,OAA9C,CAFQ;AAGvBE,EAAAA,MAAM,EAAEb,SAAS,CAACI,UAAU,CAACM,MAAZ,EAAoBL,SAAS,CAACK,MAA9B,EAAsCJ,SAAS,CAACO,MAAhD,CAHM;AAIvBC,EAAAA,UAAU,EAAEd,SAAS,CAACI,UAAU,CAACQ,IAAZ,EAAkBP,SAAS,CAACK,MAA5B,EAAoCJ,SAAS,CAACO,MAA9C;AAJE,CAAlB","sourcesContent":["import type { SkJSIInstance } from \"../JsiInstance\";\nimport type { SkPaint } from \"../Paint\";\nimport type { SkRect } from \"../Rect\";\nimport type { SkPoint } from \"../Point\";\nimport type { SkTypeface } from \"../Typeface\";\n\nexport interface FontMetrics {\n ascent: number; // suggested space above the baseline. < 0\n descent: number; // suggested space below the baseline. > 0\n leading: number; // suggested spacing between descent of previous line and ascent of next line.\n bounds?: SkRect; // smallest rect containing all glyphs (relative to 0,0)\n}\n\nexport interface SkFont extends SkJSIInstance<\"Font\"> {\n /**\n * Retrieves the total width of the provided text\n * @param text\n * @param paint\n */\n getTextWidth(text: string, paint?: SkPaint): number;\n\n /**\n * Retrieves the advanceX measurements for each glyph.\n * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.\n * One width per glyph is returned in the returned array.\n * @param glyphs\n * @param paint\n */\n getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];\n\n /** Returns the advance width of text.\n The advance is the normal distance to move before drawing additional text.\n Returns the bounding box of text if bounds is not nullptr. The paint\n stroke settings, mask filter, or path effect may modify the bounds.\n\n @param text character storage encoded with SkTextEncoding\n @param byteLength length of character storage in bytes\n @param bounds returns bounding box relative to (0, 0) if not nullptr\n @param paint optional; may be nullptr\n @return number of glyphs represented by text of length byteLength\n */\n measureText: (text: string, paint?: SkPaint) => SkRect;\n\n /**\n * Returns the FontMetrics for this font.\n */\n getMetrics(): FontMetrics;\n\n /**\n * Retrieves the glyph ids for each code point in the provided string. This call is passed to\n * the typeface of this font. Note that glyph IDs are typeface-dependent; different faces\n * may have different ids for the same code point.\n * @param str\n * @param numCodePoints - the number of code points in the string. Defaults to str.length.\n */\n getGlyphIDs(str: string, numCodePoints?: number): number[];\n\n /**\n * Computes any intersections of a thick \"line\" and a run of positionsed glyphs.\n * The thick line is represented as a top and bottom coordinate (positive for\n * below the baseline, negative for above). If there are no intersections\n * (e.g. if this is intended as an underline, and there are no \"collisions\")\n * then the returned array will be empty. If there are intersections, the array\n * will contain pairs of X coordinates [start, end] for each segment that\n * intersected with a glyph.\n *\n * @param glyphs the glyphs to intersect with\n * @param positions x,y coordinates (2 per glyph) for each glyph\n * @param top top of the thick \"line\" to use for intersection testing\n * @param bottom bottom of the thick \"line\" to use for intersection testing\n * @return array of [start, end] x-coordinate pairs. Maybe be empty.\n */\n getGlyphIntercepts(\n glyphs: number[],\n positions: SkPoint[],\n top: number,\n bottom: number\n ): number[];\n\n /**\n * Returns text scale on x-axis. Default value is 1.\n */\n getScaleX(): number;\n\n /**\n * Returns text size in points.\n */\n getSize(): number;\n\n /**\n * Returns text skew on x-axis. Default value is zero.\n */\n getSkewX(): number;\n\n /**\n * Returns embolden effect for this font. Default value is false.\n */\n isEmbolden(): boolean;\n\n /**\n * Returns the Typeface set for this font.\n */\n getTypeface(): SkTypeface | null;\n\n /**\n * Requests, but does not require, that edge pixels draw opaque or with partial transparency.\n * @param edging\n */\n setEdging(edging: FontEdging): void;\n\n /**\n * Requests, but does not require, to use bitmaps in fonts instead of outlines.\n * @param embeddedBitmaps\n */\n setEmbeddedBitmaps(embeddedBitmaps: boolean): void;\n\n /**\n * Sets level of glyph outline adjustment.\n * @param hinting\n */\n setHinting(hinting: FontHinting): void;\n\n /**\n * Requests, but does not require, linearly scalable font and glyph metrics.\n *\n * For outline fonts 'true' means font and glyph metrics should ignore hinting and rounding.\n * Note that some bitmap formats may not be able to scale linearly and will ignore this flag.\n * @param linearMetrics\n */\n setLinearMetrics(linearMetrics: boolean): void;\n\n /**\n * Sets the text scale on the x-axis.\n * @param sx\n */\n setScaleX(sx: number): void;\n\n /**\n * Sets the text size in points on this font.\n * @param points\n */\n setSize(points: number): void;\n\n /**\n * Sets the text-skew on the x axis for this font.\n * @param sx\n */\n setSkewX(sx: number): void;\n\n /**\n * Set embolden effect for this font.\n * @param embolden\n */\n setEmbolden(embolden: boolean): void;\n\n /**\n * Requests, but does not require, that glyphs respect sub-pixel positioning.\n * @param subpixel\n */\n setSubpixel(subpixel: boolean): void;\n\n /**\n * Sets the typeface to use with this font. null means to clear the typeface and use the\n * default one.\n * @param face\n */\n setTypeface(face: SkTypeface | null): void;\n}\n\nconst fontStyle = (\n weight: FontWeight,\n width: FontWidth,\n slant: FontSlant\n): FontStyle => ({ weight, width, slant });\n\nexport interface FontStyle {\n weight?: FontWeight;\n width?: FontWidth;\n slant?: FontSlant;\n}\n\nexport enum FontWeight {\n Invisible = 0,\n Thin = 100,\n ExtraLight = 200,\n Light = 300,\n Normal = 400,\n Medium = 500,\n SemiBold = 600,\n Bold = 700,\n ExtraBold = 800,\n Black = 900,\n ExtraBlack = 1000,\n}\n\nexport enum FontWidth {\n UltraCondensed = 1,\n ExtraCondensed = 2,\n Condensed = 3,\n SemiCondensed = 4,\n Normal = 5,\n SemiExpanded = 6,\n Expanded = 7,\n ExtraExpanded = 8,\n UltraExpanded = 9,\n}\n\nexport enum FontSlant {\n Upright,\n Italic,\n Oblique,\n}\n\nexport enum FontEdging {\n Alias,\n AntiAlias,\n SubpixelAntiAlias,\n}\n\nexport enum FontHinting {\n None,\n Slight,\n Normal,\n Full,\n}\n\nexport const FontStyle = {\n Normal: fontStyle(FontWeight.Normal, FontWidth.Normal, FontSlant.Upright),\n Bold: fontStyle(FontWeight.Bold, FontWidth.Normal, FontSlant.Upright),\n Italic: fontStyle(FontWeight.Normal, FontWidth.Normal, FontSlant.Italic),\n BoldItalic: fontStyle(FontWeight.Bold, FontWidth.Normal, FontSlant.Italic),\n};\n"]}
|
@@ -9,9 +9,10 @@ export let MatrixIndex;
|
|
9
9
|
MatrixIndex[MatrixIndex["TransY"] = 5] = "TransY";
|
10
10
|
MatrixIndex[MatrixIndex["Persp0"] = 6] = "Persp0";
|
11
11
|
MatrixIndex[MatrixIndex["Persp1"] = 7] = "Persp1";
|
12
|
-
MatrixIndex[MatrixIndex["
|
12
|
+
MatrixIndex[MatrixIndex["Persp2"] = 8] = "Persp2";
|
13
13
|
})(MatrixIndex || (MatrixIndex = {}));
|
14
14
|
|
15
|
+
export const isMatrix = obj => obj !== null && obj.__typename__ === "Matrix";
|
15
16
|
export const processTransform = (m, transforms) => {
|
16
17
|
for (const transform of transforms) {
|
17
18
|
const key = Object.keys(transform)[0];
|
@@ -53,7 +54,12 @@ export const processTransform = (m, transforms) => {
|
|
53
54
|
}
|
54
55
|
|
55
56
|
if (key === "rotate" || key === "rotateZ") {
|
56
|
-
m
|
57
|
+
if (isMatrix(m)) {
|
58
|
+
m.rotate(value);
|
59
|
+
} else {
|
60
|
+
m.rotate(toDegrees(value), 0, 0);
|
61
|
+
}
|
62
|
+
|
57
63
|
continue;
|
58
64
|
}
|
59
65
|
|
@@ -66,4 +72,8 @@ export const processTransform = (m, transforms) => {
|
|
66
72
|
const exhaustiveCheck = a => {
|
67
73
|
throw new Error(`Unknown transformation: ${a}`);
|
68
74
|
};
|
75
|
+
|
76
|
+
export const toDegrees = rad => {
|
77
|
+
return rad * 180 / Math.PI;
|
78
|
+
};
|
69
79
|
//# 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":"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"]}
|
@@ -12,6 +12,12 @@ Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`);
|
|
12
12
|
return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
|
13
13
|
}
|
14
14
|
|
15
|
+
getTextWidth(text, paint) {
|
16
|
+
const ids = this.getGlyphIDs(text);
|
17
|
+
const widths = this.getGlyphWidths(ids, paint);
|
18
|
+
return widths.reduce((a, b) => a + b, 0);
|
19
|
+
}
|
20
|
+
|
15
21
|
getMetrics() {
|
16
22
|
const result = this.ref.getMetrics();
|
17
23
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["JsiSkFont.ts"],"names":["HostObject","toValue","ckEnum","JsiSkRect","JsiSkTypeface","JsiSkFont","constructor","CanvasKit","ref","measureText","_text","_paint","console","warn","XYWHRect","getMetrics","result","ascent","descent","leading","bounds","undefined","
|
1
|
+
{"version":3,"sources":["JsiSkFont.ts"],"names":["HostObject","toValue","ckEnum","JsiSkRect","JsiSkTypeface","JsiSkFont","constructor","CanvasKit","ref","measureText","_text","_paint","console","warn","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","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"]}
|
@@ -24,5 +24,9 @@ export class JsiSkMatrix extends HostObject {
|
|
24
24
|
this.concat(new JsiSkMatrix(this.CanvasKit, Float32Array.of(...this.CanvasKit.Matrix.rotated(value))));
|
25
25
|
}
|
26
26
|
|
27
|
+
identity() {
|
28
|
+
this.ref.set(this.CanvasKit.Matrix.identity());
|
29
|
+
}
|
30
|
+
|
27
31
|
}
|
28
32
|
//# sourceMappingURL=JsiSkMatrix.js.map
|
@@ -1 +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;;
|
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","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/values/api.js
CHANGED
@@ -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;AACA,OAAO,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"]}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useMemo } from "react";
|
2
2
|
import { ValueApi } from "../api";
|
3
|
-
import { isValue } from "../../renderer/processors";
|
3
|
+
import { isValue } from "../../renderer/processors/Animations";
|
4
4
|
/**
|
5
5
|
* Creates a new computed value - a value that will calculate its value depending
|
6
6
|
* on other values.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useComputedValue.ts"],"names":["useMemo","ValueApi","isValue","useComputedValue","cb","values","createComputedValue","filter","useDerivedValue","console","warn"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,
|
1
|
+
{"version":3,"sources":["useComputedValue.ts"],"names":["useMemo","ValueApi","isValue","useComputedValue","cb","values","createComputedValue","filter","useDerivedValue","console","warn"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,QAAT,QAAyB,QAAzB;AACA,SAASC,OAAT,QAAwB,sCAAxB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAG,CAAIC,EAAJ,EAAiBC,MAAjB,KAC9BL,OAAO,CACL,MAAMC,QAAQ,CAACK,mBAAT,CAAgCF,EAAhC,EAAoCC,MAAM,CAACE,MAAP,CAAcL,OAAd,CAApC,CADD,EAEL;AACAG,MAHK,CADF;AAOP,OAAO,MAAMG,eAAe,GAAG,CAAIJ,EAAJ,EAAiBC,MAAjB,KAAuC;AACpEI,EAAAA,OAAO,CAACC,IAAR,CAAa,8DAAb;AACA,SAAOP,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"]}
|
@@ -46,23 +46,23 @@ export class SkiaView extends React.Component {
|
|
46
46
|
this.setState({
|
47
47
|
width: evt.nativeEvent.layout.width,
|
48
48
|
height: evt.nativeEvent.layout.height
|
49
|
-
})
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
49
|
+
}, () => {
|
50
|
+
// Reset canvas / surface on layout change
|
51
|
+
if (this._canvasRef.current) {
|
52
|
+
// Create surface
|
53
|
+
this._surface = new JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
|
54
|
+
|
55
|
+
if (this._surface) {
|
56
|
+
this._canvas = this._surface.getCanvas();
|
57
|
+
this.redraw();
|
58
|
+
}
|
59
59
|
}
|
60
|
-
}
|
60
|
+
});
|
61
61
|
}
|
62
62
|
|
63
63
|
componentDidMount() {
|
64
64
|
// Start render loop
|
65
|
-
this.
|
65
|
+
this.tick();
|
66
66
|
}
|
67
67
|
|
68
68
|
componentWillUnmount() {
|
@@ -88,7 +88,7 @@ export class SkiaView extends React.Component {
|
|
88
88
|
*/
|
89
89
|
|
90
90
|
|
91
|
-
|
91
|
+
tick() {
|
92
92
|
if (this._mode === "continuous" || this._redrawRequests > 0) {
|
93
93
|
this._redrawRequests = 0;
|
94
94
|
|
@@ -101,7 +101,7 @@ export class SkiaView extends React.Component {
|
|
101
101
|
height: this.state.height,
|
102
102
|
width: this.state.width,
|
103
103
|
timestamp: Date.now(),
|
104
|
-
touches: [
|
104
|
+
touches: touches.map(t => [t])
|
105
105
|
};
|
106
106
|
this.props.onDraw && this.props.onDraw(this._canvas, info);
|
107
107
|
(_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
|
@@ -110,11 +110,11 @@ export class SkiaView extends React.Component {
|
|
110
110
|
|
111
111
|
|
112
112
|
if (!this._unmounted) {
|
113
|
-
requestAnimationFrame(this.
|
113
|
+
requestAnimationFrame(this.tick.bind(this));
|
114
114
|
}
|
115
115
|
}
|
116
116
|
|
117
|
-
|
117
|
+
redraw() {
|
118
118
|
this._redrawRequests++;
|
119
119
|
}
|
120
120
|
/**
|
@@ -130,7 +130,7 @@ export class SkiaView extends React.Component {
|
|
130
130
|
|
131
131
|
setDrawMode(mode) {
|
132
132
|
this._mode = mode;
|
133
|
-
this.
|
133
|
+
this.tick();
|
134
134
|
}
|
135
135
|
/**
|
136
136
|
* 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 {
|
|
145
145
|
|
146
146
|
_values.forEach(v => {
|
147
147
|
this._unsubscriptions.push(v.addListener(() => {
|
148
|
-
this.
|
148
|
+
this.redraw();
|
149
149
|
}));
|
150
150
|
});
|
151
151
|
}
|
@@ -160,23 +160,11 @@ export class SkiaView extends React.Component {
|
|
160
160
|
timestamp: Date.now()
|
161
161
|
});
|
162
162
|
|
163
|
-
this.
|
164
|
-
}
|
165
|
-
|
166
|
-
handleTouchStart(evt) {
|
167
|
-
this.handleTouchEvent(evt, TouchType.Start);
|
168
|
-
}
|
169
|
-
|
170
|
-
handleTouchMove(evt) {
|
171
|
-
this.handleTouchEvent(evt, TouchType.Active);
|
172
|
-
}
|
173
|
-
|
174
|
-
handleTouchEnd(evt) {
|
175
|
-
this.handleTouchEvent(evt, TouchType.Cancelled);
|
163
|
+
this.redraw();
|
176
164
|
}
|
177
165
|
|
178
|
-
|
179
|
-
this.handleTouchEvent(evt,
|
166
|
+
createTouchHandler(touchType) {
|
167
|
+
return evt => this.handleTouchEvent(evt, touchType);
|
180
168
|
}
|
181
169
|
|
182
170
|
render() {
|
@@ -191,10 +179,12 @@ export class SkiaView extends React.Component {
|
|
191
179
|
ref: this._canvasRef,
|
192
180
|
width: this.state.width,
|
193
181
|
height: this.state.height,
|
194
|
-
onPointerDown: this.
|
195
|
-
onPointerMove: this.
|
196
|
-
onPointerUp: this.
|
197
|
-
onPointerCancel: this.
|
182
|
+
onPointerDown: this.createTouchHandler(TouchType.Start),
|
183
|
+
onPointerMove: this.createTouchHandler(TouchType.Active),
|
184
|
+
onPointerUp: this.createTouchHandler(TouchType.End),
|
185
|
+
onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
|
186
|
+
onPointerLeave: this.createTouchHandler(TouchType.End),
|
187
|
+
onPointerOut: this.createTouchHandler(TouchType.End)
|
198
188
|
}));
|
199
189
|
}
|
200
190
|
|
@@ -1 +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","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","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":["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","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","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,16 @@
|
|
1
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
2
|
+
// @ts-expect-error
|
3
|
+
import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
|
4
|
+
export const LoadSkiaWeb = async opts => {
|
5
|
+
if (global.CanvasKit !== undefined) {
|
6
|
+
return;
|
7
|
+
}
|
8
|
+
|
9
|
+
const CanvasKit = await CanvasKitInit(opts); // The CanvasKit API is stored on the global object and used
|
10
|
+
// to create the JsiSKApi in the Skia.web.ts file.
|
11
|
+
|
12
|
+
global.CanvasKit = CanvasKit;
|
13
|
+
}; // We keep this function for backward compatibility
|
14
|
+
|
15
|
+
export const LoadSkia = LoadSkiaWeb;
|
16
|
+
//# sourceMappingURL=LoadSkiaWeb.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAUA,OAAO,MAAMC,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAMJ,aAAa,CAACE,IAAD,CAArC,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;AACA,OAAO,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,23 @@
|
|
1
|
+
import React, { useMemo, lazy, Suspense } from "react";
|
2
|
+
import { Platform } from "react-native";
|
3
|
+
import { LoadSkiaWeb } from "./LoadSkiaWeb";
|
4
|
+
export const WithSkiaWeb = _ref => {
|
5
|
+
let {
|
6
|
+
getComponent,
|
7
|
+
fallback,
|
8
|
+
opts
|
9
|
+
} = _ref;
|
10
|
+
const Inner = useMemo(() => /*#__PURE__*/lazy(async () => {
|
11
|
+
if (Platform.OS === "web") {
|
12
|
+
await LoadSkiaWeb(opts);
|
13
|
+
} else {
|
14
|
+
console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
|
15
|
+
}
|
16
|
+
|
17
|
+
return getComponent();
|
18
|
+
}), [getComponent, opts]);
|
19
|
+
return /*#__PURE__*/React.createElement(Suspense, {
|
20
|
+
fallback: fallback !== null && fallback !== void 0 ? fallback : null
|
21
|
+
}, /*#__PURE__*/React.createElement(Inner, null));
|
22
|
+
};
|
23
|
+
//# sourceMappingURL=WithSkiaWeb.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","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;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAGT,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAMN,WAAW,CAACI,IAAD,CAAjB;AACD,KAFD,MAEO;AACLG,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAON,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,EAAeE,IAAf,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,oBAAC,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"]}
|
package/lib/module/web/index.js
CHANGED
@@ -1,10 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
|
4
|
-
export const LoadSkia = async () => {
|
5
|
-
const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
|
6
|
-
// to create the JsiSKApi in the Skia.web.ts file.
|
7
|
-
|
8
|
-
global.CanvasKit = CanvasKit;
|
9
|
-
};
|
1
|
+
export * from "./LoadSkiaWeb";
|
2
|
+
export * from "./WithSkiaWeb";
|
10
3
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,eAAd","sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -7,5 +7,11 @@ export interface ExtrapolationConfig {
|
|
7
7
|
extrapolateLeft?: Extrapolate | string;
|
8
8
|
extrapolateRight?: Extrapolate | string;
|
9
9
|
}
|
10
|
+
interface RequiredExtrapolationConfig {
|
11
|
+
extrapolateLeft: Extrapolate;
|
12
|
+
extrapolateRight: Extrapolate;
|
13
|
+
}
|
10
14
|
export declare type ExtrapolationType = ExtrapolationConfig | Extrapolate | string | undefined;
|
15
|
+
export declare function validateInterpolationOptions(type: ExtrapolationType): RequiredExtrapolationConfig;
|
11
16
|
export declare function interpolate(x: number, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;
|
17
|
+
export {};
|
@@ -1,9 +1,11 @@
|
|
1
1
|
import type { SkPath } from "../../skia/types";
|
2
|
+
import type { ExtrapolationType } from "./interpolate";
|
2
3
|
/**
|
3
4
|
* Maps an input value within a range to an output path within a path range.
|
4
5
|
* @param value - The input value.
|
5
6
|
* @param inputRange - The range of the input value.
|
6
7
|
* @param outputRange - The range of the output path.
|
8
|
+
* @param options - Extrapolation options
|
7
9
|
* @returns The output path.
|
8
10
|
* @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
|
9
11
|
* const path1 = new Path();
|
@@ -14,4 +16,4 @@ import type { SkPath } from "../../skia/types";
|
|
14
16
|
* path2.lineTo(0, 100);
|
15
17
|
* const path = interpolatePath(0.5, [0, 1], [path1, path2]);
|
16
18
|
*/
|
17
|
-
export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[]) => SkPath;
|
19
|
+
export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SkPath;
|
@@ -1,47 +1,16 @@
|
|
1
|
-
|
2
|
-
*
|
3
|
-
*
|
4
|
-
*
|
5
|
-
*
|
6
|
-
|
7
|
-
* jest.mock('@shopify/react-native-skia', () => require('@shopify/react-native-skia/lib/commonjs/mock'));
|
8
|
-
* ```
|
9
|
-
*/
|
10
|
-
import type { Skia as SkiaApi, SkRect } from "../skia/types";
|
1
|
+
import type { Skia as SkiaApi } from "../skia/types";
|
2
|
+
import type * as SkiaExports from "../skia";
|
3
|
+
import type * as ExternalExports from "../external";
|
4
|
+
import type * as ValueExports from "../values";
|
5
|
+
import type * as AnimationExports from "../animation";
|
6
|
+
import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
|
11
7
|
export declare const Skia: SkiaApi;
|
12
|
-
export declare const vec: (x
|
8
|
+
export declare const vec: (x?: number | undefined, y?: number | undefined) => {
|
13
9
|
x: number;
|
14
10
|
y: number;
|
15
11
|
};
|
16
|
-
export declare const
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
height: number;
|
21
|
-
};
|
22
|
-
export declare const rrect: (r: SkRect, rx: number, ry: number) => {
|
23
|
-
rect: SkRect;
|
24
|
-
rx: number;
|
25
|
-
ry: number;
|
12
|
+
export declare const Mock: typeof SkiaExports & typeof ExternalExports & typeof ValueExports & typeof AnimationExports & {
|
13
|
+
createDrawing: () => any;
|
14
|
+
createDeclaration: () => any;
|
15
|
+
ShaderLib: typeof ShaderLib;
|
26
16
|
};
|
27
|
-
export declare const useTouchHandler: () => any;
|
28
|
-
export declare const useComputedValue: () => any;
|
29
|
-
export declare const useValue: () => any;
|
30
|
-
export declare const useClockValue: () => any;
|
31
|
-
export declare const useValueEffect: () => any;
|
32
|
-
export declare const useTiming: () => any;
|
33
|
-
export declare const runTiming: () => any;
|
34
|
-
export declare const timing: () => any;
|
35
|
-
export declare const useSpring: () => any;
|
36
|
-
export declare const runSpring: () => any;
|
37
|
-
export declare const spring: () => any;
|
38
|
-
export declare const runDecay: () => any;
|
39
|
-
export declare const decay: () => any;
|
40
|
-
export declare const useSharedValueEffect: () => any;
|
41
|
-
export declare const useData: () => any;
|
42
|
-
export declare const useDataCollection: () => any;
|
43
|
-
export declare const useFont: () => any;
|
44
|
-
export declare const useImage: () => any;
|
45
|
-
export declare const usePicture: () => any;
|
46
|
-
export declare const useSVG: () => any;
|
47
|
-
export declare const useTypeface: () => any;
|
@@ -13,4 +13,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
|
|
13
13
|
onTouch?: TouchHandler;
|
14
14
|
fontMgr?: SkFontMgr;
|
15
15
|
}
|
16
|
-
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "
|
16
|
+
export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import type { DrawingContext } from "../DrawingContext";
|
2
1
|
import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
|
2
|
+
import type { SkCanvas } from "../../skia/types/Canvas";
|
3
3
|
export interface TransformProps {
|
4
4
|
transform?: Transforms2d;
|
5
5
|
origin?: Vector;
|
6
6
|
matrix?: SkMatrix;
|
7
7
|
}
|
8
|
-
export declare const processCanvasTransform: (
|
8
|
+
export declare const processCanvasTransform: (canvas: SkCanvas, { transform, origin, matrix }: TransformProps) => void;
|
9
9
|
export declare const localMatrix: (m: SkMatrix, { transform, origin }: TransformProps) => SkMatrix | undefined;
|
10
10
|
export declare const transformOrigin: (origin: Vector, transform: Transforms2d) => (Pick<{
|
11
11
|
readonly translateX: number;
|