@shopify/react-native-skia 0.1.189 → 0.1.191
Sign up to get free protection for your applications and to get access to all the features.
- package/cpp/rnskia/dom/nodes/JsiImageSvgNode.h +24 -3
- package/cpp/rnskia/dom/nodes/JsiPathNode.h +11 -11
- package/jestSetup.js +17 -3
- package/lib/commonjs/Platform/IPlatform.d.ts +12 -0
- package/lib/commonjs/Platform/IPlatform.js +6 -0
- package/lib/commonjs/Platform/IPlatform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.js +24 -0
- package/lib/commonjs/Platform/Platform.js.map +1 -0
- package/lib/commonjs/Platform/Platform.web.d.ts +2 -0
- package/lib/commonjs/Platform/Platform.web.js +157 -0
- package/lib/commonjs/Platform/Platform.web.js.map +1 -0
- package/lib/commonjs/Platform/index.d.ts +1 -0
- package/lib/commonjs/Platform/index.js +19 -0
- package/lib/commonjs/Platform/index.js.map +1 -0
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.js +29 -7
- package/lib/commonjs/dom/nodes/drawings/ImageSVG.js.map +1 -1
- package/lib/commonjs/dom/nodes/drawings/PathNode.js +6 -2
- package/lib/commonjs/dom/nodes/drawings/PathNode.js.map +1 -1
- package/lib/commonjs/dom/types/Drawings.d.ts +7 -2
- package/lib/commonjs/dom/types/Drawings.js.map +1 -1
- package/lib/commonjs/renderer/processors/math/Math.d.ts +1 -0
- package/lib/commonjs/renderer/processors/math/Math.js +9 -1
- package/lib/commonjs/renderer/processors/math/Math.js.map +1 -1
- package/lib/commonjs/skia/NativeSetup.js +3 -3
- package/lib/commonjs/skia/NativeSetup.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +2 -8
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/core/Image.js +3 -3
- package/lib/commonjs/skia/core/Image.js.map +1 -1
- package/lib/commonjs/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/commonjs/views/SkiaBaseWebView.js +41 -29
- package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
- package/lib/commonjs/views/SkiaDomView.js +2 -2
- package/lib/commonjs/views/SkiaDomView.js.map +1 -1
- package/lib/commonjs/views/SkiaPictureView.js +2 -2
- package/lib/commonjs/views/SkiaPictureView.js.map +1 -1
- package/lib/commonjs/views/SkiaView.js +3 -2
- package/lib/commonjs/views/SkiaView.js.map +1 -1
- package/lib/commonjs/views/useTouchHandler.js +3 -3
- package/lib/commonjs/views/useTouchHandler.js.map +1 -1
- package/lib/commonjs/web/WithSkiaWeb.js +2 -2
- package/lib/commonjs/web/WithSkiaWeb.js.map +1 -1
- package/lib/module/Platform/IPlatform.d.ts +12 -0
- package/lib/module/Platform/IPlatform.js +2 -0
- package/lib/module/Platform/IPlatform.js.map +1 -0
- package/lib/module/Platform/Platform.d.ts +2 -0
- package/lib/module/Platform/Platform.js +14 -0
- package/lib/module/Platform/Platform.js.map +1 -0
- package/lib/module/Platform/Platform.web.d.ts +2 -0
- package/lib/module/Platform/Platform.web.js +143 -0
- package/lib/module/Platform/Platform.web.js.map +1 -0
- package/lib/module/Platform/index.d.ts +1 -0
- package/lib/module/Platform/index.js +2 -0
- package/lib/module/Platform/index.js.map +1 -0
- package/lib/module/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/module/dom/nodes/drawings/ImageSVG.js +29 -6
- package/lib/module/dom/nodes/drawings/ImageSVG.js.map +1 -1
- package/lib/module/dom/nodes/drawings/PathNode.js +5 -2
- package/lib/module/dom/nodes/drawings/PathNode.js.map +1 -1
- package/lib/module/dom/types/Drawings.d.ts +7 -2
- package/lib/module/dom/types/Drawings.js.map +1 -1
- package/lib/module/renderer/processors/math/Math.d.ts +1 -0
- package/lib/module/renderer/processors/math/Math.js +5 -0
- package/lib/module/renderer/processors/math/Math.js.map +1 -1
- package/lib/module/skia/NativeSetup.js +2 -2
- package/lib/module/skia/NativeSetup.js.map +1 -1
- package/lib/module/skia/core/Data.js +2 -7
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/core/Image.js +2 -2
- package/lib/module/skia/core/Image.js.map +1 -1
- package/lib/module/views/SkiaBaseWebView.d.ts +6 -1
- package/lib/module/views/SkiaBaseWebView.js +40 -28
- package/lib/module/views/SkiaBaseWebView.js.map +1 -1
- package/lib/module/views/SkiaDomView.js +2 -2
- package/lib/module/views/SkiaDomView.js.map +1 -1
- package/lib/module/views/SkiaPictureView.js +2 -2
- package/lib/module/views/SkiaPictureView.js.map +1 -1
- package/lib/module/views/SkiaView.js +2 -2
- package/lib/module/views/SkiaView.js.map +1 -1
- package/lib/module/views/useTouchHandler.js +3 -3
- package/lib/module/views/useTouchHandler.js.map +1 -1
- package/lib/module/web/WithSkiaWeb.js +1 -1
- package/lib/module/web/WithSkiaWeb.js.map +1 -1
- package/lib/typescript/src/Platform/IPlatform.d.ts +12 -0
- package/lib/typescript/src/Platform/Platform.d.ts +2 -0
- package/lib/typescript/src/Platform/Platform.web.d.ts +2 -0
- package/lib/typescript/src/Platform/index.d.ts +1 -0
- package/lib/typescript/src/dom/nodes/drawings/ImageSVG.d.ts +7 -2
- package/lib/typescript/src/dom/types/Drawings.d.ts +7 -2
- package/lib/typescript/src/renderer/processors/math/Math.d.ts +1 -0
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +6 -1
- package/package.json +12 -9
- package/scripts/install-npm.js +2 -3
- package/src/Platform/IPlatform.ts +20 -0
- package/src/Platform/Platform.ts +28 -0
- package/src/Platform/Platform.web.tsx +136 -0
- package/src/Platform/index.ts +1 -0
- package/src/dom/nodes/drawings/ImageSVG.ts +17 -6
- package/src/dom/nodes/drawings/PathNode.ts +10 -1
- package/src/dom/types/Drawings.ts +7 -2
- package/src/renderer/processors/math/Math.ts +5 -0
- package/src/skia/NativeSetup.ts +2 -2
- package/src/skia/core/Data.ts +4 -15
- package/src/skia/core/Image.ts +2 -3
- package/src/views/SkiaBaseWebView.tsx +33 -23
- package/src/views/SkiaDomView.tsx +2 -2
- package/src/views/SkiaPictureView.tsx +2 -2
- package/src/views/SkiaView.tsx +2 -2
- package/src/views/useTouchHandler.ts +3 -3
- package/src/web/WithSkiaWeb.tsx +2 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Platform","OS","global","SkiaApi","SkiaModule","NativeModules","RNSkia","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"names":["Platform","OS","global","SkiaApi","SkiaModule","NativeModules","RNSkia","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import { Platform } from \"../Platform\";\n\nif (Platform.OS !== \"web\" && global.SkiaApi == null) {\n // Initialize RN Skia\n const SkiaModule = Platform.NativeModules.RNSkia;\n if (SkiaModule == null || typeof SkiaModule.install !== \"function\") {\n throw new Error(\n \"Native RNSkia Module cannot be found! Make sure you correctly \" +\n \"installed native dependencies and rebuilt your app.\"\n );\n }\n const result = SkiaModule.install();\n if (result !== true) {\n throw new Error(\n `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`\n );\n }\n}\n"],"mappings":";;AAAA;;AAEA,IAAIA,kBAAA,CAASC,EAAT,KAAgB,KAAhB,IAAyBC,MAAM,CAACC,OAAP,IAAkB,IAA/C,EAAqD;EACnD;EACA,MAAMC,UAAU,GAAGJ,kBAAA,CAASK,aAAT,CAAuBC,MAA1C;;EACA,IAAIF,UAAU,IAAI,IAAd,IAAsB,OAAOA,UAAU,CAACG,OAAlB,KAA8B,UAAxD,EAAoE;IAClE,MAAM,IAAIC,KAAJ,CACJ,mEACE,qDAFE,CAAN;EAID;;EACD,MAAMC,MAAM,GAAGL,UAAU,CAACG,OAAX,EAAf;;EACA,IAAIE,MAAM,KAAK,IAAf,EAAqB;IACnB,MAAM,IAAID,KAAJ,CACH,wEAAuEC,MAAO,EAD3E,CAAN;EAGD;AACF"}
|
@@ -7,15 +7,9 @@ exports.useRawData = exports.useData = void 0;
|
|
7
7
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
|
-
var _reactNative = require("react-native");
|
11
|
-
|
12
10
|
var _Skia = require("../Skia");
|
13
11
|
|
14
|
-
var
|
15
|
-
|
16
|
-
const resolveAsset = source => {
|
17
|
-
return (0, _types.isRNModule)(source) ? _reactNative.Image.resolveAssetSource(source).uri : source.default;
|
18
|
-
};
|
12
|
+
var _Platform = require("../../Platform");
|
19
13
|
|
20
14
|
const factoryWrapper = (data2, factory, onError) => {
|
21
15
|
const factoryResult = factory(data2);
|
@@ -34,7 +28,7 @@ const loadData = (source, factory, onError) => {
|
|
34
28
|
} else if (source instanceof Uint8Array) {
|
35
29
|
return new Promise(resolve => resolve(factoryWrapper(_Skia.Skia.Data.fromBytes(source), factory, onError)));
|
36
30
|
} else {
|
37
|
-
const uri = typeof source === "string" ? source : resolveAsset(source);
|
31
|
+
const uri = typeof source === "string" ? source : _Platform.Platform.resolveAsset(source);
|
38
32
|
return _Skia.Skia.Data.fromURI(uri).then(d => factoryWrapper(d, factory, onError));
|
39
33
|
}
|
40
34
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["factoryWrapper","data2","factory","onError","factoryResult","Error","loadData","source","undefined","Promise","resolve","Uint8Array","Skia","Data","fromBytes","uri","Platform","resolveAsset","fromURI","then","d","useLoading","loader","mounted","useRef","data","setData","useState","dataRef","useEffect","current","value","dispose","useRawData","identity","useData"],"sources":["Data.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { Skia } from \"../Skia\";\nimport type { SkData, DataSourceParam, JsiDisposable } from \"../types\";\nimport { Platform } from \"../../Platform\";\n\nconst factoryWrapper = <T>(\n data2: SkData,\n factory: (data: SkData) => T,\n onError?: (err: Error) => void\n) => {\n const factoryResult = factory(data2);\n if (factoryResult === null) {\n onError && onError(new Error(\"Could not load data\"));\n return null;\n } else {\n return factoryResult;\n }\n};\n\nconst loadData = <T>(\n source: DataSourceParam,\n factory: (data: SkData) => T | null,\n onError?: (err: Error) => void\n): Promise<T | null> => {\n if (source === null || source === undefined) {\n return new Promise((resolve) => resolve(null));\n } else if (source instanceof Uint8Array) {\n return new Promise((resolve) =>\n resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))\n );\n } else {\n const uri =\n typeof source === \"string\" ? source : Platform.resolveAsset(source);\n return Skia.Data.fromURI(uri).then((d) =>\n factoryWrapper(d, factory, onError)\n );\n }\n};\nconst useLoading = <T extends JsiDisposable>(\n source: DataSourceParam,\n loader: () => Promise<T | null>\n) => {\n const mounted = useRef(false);\n const [data, setData] = useState<T | null>(null);\n const dataRef = useRef<T | null>(null);\n useEffect(() => {\n mounted.current = true;\n loader().then((value) => {\n if (mounted.current) {\n setData(value);\n dataRef.current = value;\n }\n });\n return () => {\n dataRef.current?.dispose();\n mounted.current = false;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [source]);\n return data;\n};\n\nexport const useRawData = <T extends JsiDisposable>(\n source: DataSourceParam,\n factory: (data: SkData) => T | null,\n onError?: (err: Error) => void\n) => useLoading(source, () => loadData<T>(source, factory, onError));\n\nconst identity = (data: SkData) => data;\n\nexport const useData = (\n source: DataSourceParam,\n onError?: (err: Error) => void\n) => useRawData(source, identity, onError);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA,MAAMA,cAAc,GAAG,CACrBC,KADqB,EAErBC,OAFqB,EAGrBC,OAHqB,KAIlB;EACH,MAAMC,aAAa,GAAGF,OAAO,CAACD,KAAD,CAA7B;;EACA,IAAIG,aAAa,KAAK,IAAtB,EAA4B;IAC1BD,OAAO,IAAIA,OAAO,CAAC,IAAIE,KAAJ,CAAU,qBAAV,CAAD,CAAlB;IACA,OAAO,IAAP;EACD,CAHD,MAGO;IACL,OAAOD,aAAP;EACD;AACF,CAZD;;AAcA,MAAME,QAAQ,GAAG,CACfC,MADe,EAEfL,OAFe,EAGfC,OAHe,KAIO;EACtB,IAAII,MAAM,KAAK,IAAX,IAAmBA,MAAM,KAAKC,SAAlC,EAA6C;IAC3C,OAAO,IAAIC,OAAJ,CAAaC,OAAD,IAAaA,OAAO,CAAC,IAAD,CAAhC,CAAP;EACD,CAFD,MAEO,IAAIH,MAAM,YAAYI,UAAtB,EAAkC;IACvC,OAAO,IAAIF,OAAJ,CAAaC,OAAD,IACjBA,OAAO,CAACV,cAAc,CAACY,UAAA,CAAKC,IAAL,CAAUC,SAAV,CAAoBP,MAApB,CAAD,EAA8BL,OAA9B,EAAuCC,OAAvC,CAAf,CADF,CAAP;EAGD,CAJM,MAIA;IACL,MAAMY,GAAG,GACP,OAAOR,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,GAAsCS,kBAAA,CAASC,YAAT,CAAsBV,MAAtB,CADxC;IAEA,OAAOK,UAAA,CAAKC,IAAL,CAAUK,OAAV,CAAkBH,GAAlB,EAAuBI,IAAvB,CAA6BC,CAAD,IACjCpB,cAAc,CAACoB,CAAD,EAAIlB,OAAJ,EAAaC,OAAb,CADT,CAAP;EAGD;AACF,CAlBD;;AAmBA,MAAMkB,UAAU,GAAG,CACjBd,MADiB,EAEjBe,MAFiB,KAGd;EACH,MAAMC,OAAO,GAAG,IAAAC,aAAA,EAAO,KAAP,CAAhB;EACA,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkB,IAAAC,eAAA,EAAmB,IAAnB,CAAxB;EACA,MAAMC,OAAO,GAAG,IAAAJ,aAAA,EAAiB,IAAjB,CAAhB;EACA,IAAAK,gBAAA,EAAU,MAAM;IACdN,OAAO,CAACO,OAAR,GAAkB,IAAlB;IACAR,MAAM,GAAGH,IAAT,CAAeY,KAAD,IAAW;MACvB,IAAIR,OAAO,CAACO,OAAZ,EAAqB;QACnBJ,OAAO,CAACK,KAAD,CAAP;QACAH,OAAO,CAACE,OAAR,GAAkBC,KAAlB;MACD;IACF,CALD;IAMA,OAAO,MAAM;MAAA;;MACX,oBAAAH,OAAO,CAACE,OAAR,sEAAiBE,OAAjB;MACAT,OAAO,CAACO,OAAR,GAAkB,KAAlB;IACD,CAHD,CARc,CAYd;EACD,CAbD,EAaG,CAACvB,MAAD,CAbH;EAcA,OAAOkB,IAAP;AACD,CAtBD;;AAwBO,MAAMQ,UAAU,GAAG,CACxB1B,MADwB,EAExBL,OAFwB,EAGxBC,OAHwB,KAIrBkB,UAAU,CAACd,MAAD,EAAS,MAAMD,QAAQ,CAAIC,MAAJ,EAAYL,OAAZ,EAAqBC,OAArB,CAAvB,CAJR;;;;AAMP,MAAM+B,QAAQ,GAAIT,IAAD,IAAkBA,IAAnC;;AAEO,MAAMU,OAAO,GAAG,CACrB5B,MADqB,EAErBJ,OAFqB,KAGlB8B,UAAU,CAAC1B,MAAD,EAAS2B,QAAT,EAAmB/B,OAAnB,CAHR"}
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useImage = exports.makeImageFromView = void 0;
|
7
7
|
|
8
|
-
var
|
8
|
+
var _Platform = require("../../Platform");
|
9
9
|
|
10
10
|
var _Skia = require("../Skia");
|
11
11
|
|
@@ -36,7 +36,7 @@ const makeImageFromView = function (viewRef) {
|
|
36
36
|
let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
37
37
|
|
38
38
|
// In web implementation we just delegate the work to the provided callback
|
39
|
-
if (
|
39
|
+
if (_Platform.Platform.OS === "web") {
|
40
40
|
if (callback) {
|
41
41
|
return callback(viewRef);
|
42
42
|
} else {
|
@@ -44,7 +44,7 @@ const makeImageFromView = function (viewRef) {
|
|
44
44
|
}
|
45
45
|
}
|
46
46
|
|
47
|
-
const viewTag =
|
47
|
+
const viewTag = _Platform.Platform.findNodeHandle(viewRef.current);
|
48
48
|
|
49
49
|
if (viewTag !== null && viewTag !== 0) {
|
50
50
|
return _Skia.Skia.Image.MakeImageFromViewTag(viewTag);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["imgFactory","Skia","Image","MakeImageFromEncoded","bind","useImage","source","onError","useRawData","makeImageFromView","viewRef","callback","Platform","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"names":["imgFactory","Skia","Image","MakeImageFromEncoded","bind","useImage","source","onError","useRawData","makeImageFromView","viewRef","callback","Platform","OS","Promise","reject","Error","viewTag","findNodeHandle","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { Platform } from \"../../Platform\";\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n source: DataSourceParam,\n onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n T extends\n | number\n | React.Component<unknown, unknown>\n | React.ComponentClass<unknown>\n>(\n viewRef: React.RefObject<T>,\n callback:\n | null\n | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n // In web implementation we just delegate the work to the provided callback\n if (Platform.OS === \"web\") {\n if (callback) {\n return callback(viewRef);\n } else {\n Promise.reject(\n new Error(\n \"Callback is required on web in the makeImageFromView function.\"\n )\n );\n }\n }\n const viewTag = Platform.findNodeHandle(viewRef.current);\n if (viewTag !== null && viewTag !== 0) {\n return Skia.Image.MakeImageFromViewTag(viewTag);\n }\n return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AAEA,MAAMA,UAAU,GAAGC,UAAA,CAAKC,KAAL,CAAWC,oBAAX,CAAgCC,IAAhC,CAAqCH,UAAA,CAAKC,KAA1C,CAAnB;AAEA;AACA;AACA;;;AACO,MAAMG,QAAQ,GAAG,CACtBC,MADsB,EAEtBC,OAFsB,KAGnB,IAAAC,gBAAA,EAAWF,MAAX,EAAmBN,UAAnB,EAA+BO,OAA/B,CAHE;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAME,iBAAiB,GAAG,UAM/BC,OAN+B,EAU5B;EAAA,IAHHC,QAGG,uEAD8D,IAC9D;;EACH;EACA,IAAIC,kBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;IACzB,IAAIF,QAAJ,EAAc;MACZ,OAAOA,QAAQ,CAACD,OAAD,CAAf;IACD,CAFD,MAEO;MACLI,OAAO,CAACC,MAAR,CACE,IAAIC,KAAJ,CACE,gEADF,CADF;IAKD;EACF;;EACD,MAAMC,OAAO,GAAGL,kBAAA,CAASM,cAAT,CAAwBR,OAAO,CAACS,OAAhC,CAAhB;;EACA,IAAIF,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,CAApC,EAAuC;IACrC,OAAOhB,UAAA,CAAKC,KAAL,CAAWkB,oBAAX,CAAgCH,OAAhC,CAAP;EACD;;EACD,OAAOH,OAAO,CAACC,MAAR,CAAe,IAAIC,KAAJ,CAAU,kBAAV,CAAf,CAAP;AACD,CA5BM"}
|
@@ -17,7 +17,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
17
17
|
protected width: number;
|
18
18
|
protected height: number;
|
19
19
|
private unsubscribeAll;
|
20
|
-
private
|
20
|
+
private onLayoutEvent;
|
21
21
|
protected getSize(): {
|
22
22
|
width: number;
|
23
23
|
height: number;
|
@@ -58,5 +58,10 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
58
58
|
registerValues(_values: SkiaValue<unknown>[]): void;
|
59
59
|
private handleTouchEvent;
|
60
60
|
createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
|
61
|
+
private onStart;
|
62
|
+
private onActive;
|
63
|
+
private onCancel;
|
64
|
+
private onEnd;
|
65
|
+
private onLayout;
|
61
66
|
render(): JSX.Element;
|
62
67
|
}
|
@@ -7,10 +7,10 @@ exports.SkiaBaseWebView = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
-
var _reactNative = require("react-native");
|
11
|
-
|
12
10
|
var _JsiSkSurface = require("../skia/web/JsiSkSurface");
|
13
11
|
|
12
|
+
var _Platform = require("../Platform");
|
13
|
+
|
14
14
|
var _types = require("./types");
|
15
15
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
19
19
|
|
20
20
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
21
|
|
22
|
-
const pd =
|
22
|
+
const pd = _Platform.Platform.PixelRatio;
|
23
23
|
|
24
24
|
class SkiaBaseWebView extends _react.default.Component {
|
25
25
|
constructor(props) {
|
@@ -45,6 +45,16 @@ class SkiaBaseWebView extends _react.default.Component {
|
|
45
45
|
|
46
46
|
_defineProperty(this, "height", 0);
|
47
47
|
|
48
|
+
_defineProperty(this, "onStart", this.createTouchHandler(_types.TouchType.Start));
|
49
|
+
|
50
|
+
_defineProperty(this, "onActive", this.createTouchHandler(_types.TouchType.Active));
|
51
|
+
|
52
|
+
_defineProperty(this, "onCancel", this.createTouchHandler(_types.TouchType.Cancelled));
|
53
|
+
|
54
|
+
_defineProperty(this, "onEnd", this.createTouchHandler(_types.TouchType.End));
|
55
|
+
|
56
|
+
_defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
|
57
|
+
|
48
58
|
this._mode = props.mode ?? "default";
|
49
59
|
}
|
50
60
|
|
@@ -54,22 +64,19 @@ class SkiaBaseWebView extends _react.default.Component {
|
|
54
64
|
this._unsubscriptions = [];
|
55
65
|
}
|
56
66
|
|
57
|
-
|
67
|
+
onLayoutEvent(evt) {
|
58
68
|
const {
|
59
69
|
CanvasKit
|
60
|
-
} = global;
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
const
|
70
|
-
canvas.width = width * pd;
|
71
|
-
canvas.height = height * pd;
|
72
|
-
const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
|
70
|
+
} = global; // Reset canvas / surface on layout change
|
71
|
+
|
72
|
+
const canvas = this._canvasRef.current;
|
73
|
+
|
74
|
+
if (canvas) {
|
75
|
+
this.width = canvas.clientWidth;
|
76
|
+
this.height = canvas.clientHeight;
|
77
|
+
canvas.width = this.width * pd;
|
78
|
+
canvas.height = this.height * pd;
|
79
|
+
const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
|
73
80
|
|
74
81
|
if (!surface) {
|
75
82
|
throw new Error("Could not create surface");
|
@@ -103,12 +110,17 @@ class SkiaBaseWebView extends _react.default.Component {
|
|
103
110
|
}
|
104
111
|
|
105
112
|
componentWillUnmount() {
|
106
|
-
var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
|
107
|
-
|
108
113
|
this.unsubscribeAll();
|
109
|
-
cancelAnimationFrame(this.requestId); //
|
114
|
+
cancelAnimationFrame(this.requestId); // eslint-disable-next-line max-len
|
115
|
+
// https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
|
116
|
+
// https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
|
117
|
+
// We delete the context, only if the context has been intialized
|
118
|
+
|
119
|
+
if (this._surface) {
|
120
|
+
var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
|
110
121
|
|
111
|
-
|
122
|
+
(_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
|
123
|
+
}
|
112
124
|
}
|
113
125
|
/**
|
114
126
|
* Creates a snapshot from the canvas in the surface
|
@@ -215,20 +227,20 @@ class SkiaBaseWebView extends _react.default.Component {
|
|
215
227
|
debug = false,
|
216
228
|
...viewProps
|
217
229
|
} = this.props;
|
218
|
-
return /*#__PURE__*/_react.default.createElement(
|
219
|
-
onLayout: this.onLayout
|
230
|
+
return /*#__PURE__*/_react.default.createElement(_Platform.Platform.View, _extends({}, viewProps, {
|
231
|
+
onLayout: this.onLayout
|
220
232
|
}), /*#__PURE__*/_react.default.createElement("canvas", {
|
221
233
|
ref: this._canvasRef,
|
222
234
|
style: {
|
223
235
|
display: "flex",
|
224
236
|
flex: 1
|
225
237
|
},
|
226
|
-
onPointerDown: this.
|
227
|
-
onPointerMove: this.
|
228
|
-
onPointerUp: this.
|
229
|
-
onPointerCancel: this.
|
230
|
-
onPointerLeave: this.
|
231
|
-
onPointerOut: this.
|
238
|
+
onPointerDown: this.onStart,
|
239
|
+
onPointerMove: this.onActive,
|
240
|
+
onPointerUp: this.onEnd,
|
241
|
+
onPointerCancel: this.onCancel,
|
242
|
+
onPointerLeave: this.onEnd,
|
243
|
+
onPointerOut: this.onEnd
|
232
244
|
}));
|
233
245
|
}
|
234
246
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayout(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n const { width, height } = evt.nativeEvent.layout;\n this.width = width;\n this.height = height;\n // Reset canvas / surface on layout change\n if (this._canvasRef.current) {\n const canvas = this._canvasRef.current;\n canvas.width = width * pd;\n canvas.height = height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\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 this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.createTouchHandler(TouchType.Start)}\n onPointerMove={this.createTouchHandler(TouchType.Active)}\n onPointerUp={this.createTouchHandler(TouchType.End)}\n onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n onPointerLeave={this.createTouchHandler(TouchType.End)}\n onPointerOut={this.createTouchHandler(TouchType.End)}\n />\n </View>\n );\n }\n}\n"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","createTouchHandler","TouchType","Start","Active","Cancelled","End","onLayoutEvent","bind","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","render","debug","viewProps","display","flex","onStart","onActive","onEnd","onCancel"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n constructor(props: TProps) {\n super(props);\n this._mode = props.mode ?? \"default\";\n }\n\n private _surface: JsiSkSurface | null = null;\n private _unsubscriptions: Array<() => void> = [];\n private _touches: Array<TouchInfo> = [];\n private _canvas: SkCanvas | null = null;\n private _canvasRef = React.createRef<HTMLCanvasElement>();\n private _mode: DrawMode;\n private _redrawRequests = 0;\n private requestId = 0;\n\n protected width = 0;\n protected height = 0;\n\n private unsubscribeAll() {\n this._unsubscriptions.forEach((u) => u());\n this._unsubscriptions = [];\n }\n\n private onLayoutEvent(evt: LayoutChangeEvent) {\n const { CanvasKit } = global;\n // Reset canvas / surface on layout change\n const canvas = this._canvasRef.current;\n if (canvas) {\n this.width = canvas.clientWidth;\n this.height = canvas.clientHeight;\n canvas.width = this.width * pd;\n canvas.height = this.height * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this._surface = new JsiSkSurface(CanvasKit, surface);\n this._canvas = this._surface.getCanvas();\n this.redraw();\n }\n // Call onLayout callback if it exists\n if (this.props.onLayout) {\n this.props.onLayout(evt);\n }\n }\n\n protected getSize() {\n return { width: this.width, height: this.height };\n }\n\n componentDidMount() {\n // Start render loop\n this.tick();\n }\n\n componentDidUpdate() {\n this.redraw();\n }\n\n componentWillUnmount() {\n this.unsubscribeAll();\n cancelAnimationFrame(this.requestId);\n // eslint-disable-next-line max-len\n // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n // We delete the context, only if the context has been intialized\n if (this._surface) {\n this._canvasRef.current\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n this._canvas!.clear(CanvasKit.TRANSPARENT);\n this.renderInCanvas(this._canvas!, []);\n this._surface?.ref.flush();\n return this._surface?.makeImageSnapshot(rect);\n }\n\n /**\n * Override to render\n */\n protected abstract renderInCanvas(\n canvas: SkCanvas,\n touches: TouchInfo[]\n ): void;\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n private tick() {\n if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n this._redrawRequests = 0;\n if (this._canvas) {\n const touches = [...this._touches];\n this._touches = [];\n const canvas = this._canvas!;\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n this.renderInCanvas(canvas, touches);\n canvas.restore();\n this._surface?.ref.flush();\n }\n }\n this.requestId = requestAnimationFrame(this.tick.bind(this));\n }\n\n public redraw() {\n this._redrawRequests++;\n }\n\n /**\n * Updates the drawing mode for the skia view. This is the same\n * as declaratively setting the mode property on the SkiaView.\n * There are two drawing modes, \"continuous\" and \"default\",\n * where the continuous mode will continuously redraw the view and\n * the default mode will only redraw when any of the regular react\n * properties are changed like size and margins.\n * @param mode Drawing mode to use.\n */\n public setDrawMode(mode: DrawMode) {\n this._mode = mode;\n this.tick();\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(_values: SkiaValue<unknown>[]) {\n // Unsubscribe from dependency values\n this.unsubscribeAll();\n // Register redraw dependencies on values\n _values.forEach((v) => {\n this._unsubscriptions.push(\n v.addListener(() => {\n this.redraw();\n })\n );\n });\n }\n\n private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n this._touches.push({\n id: evt.pointerId,\n x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n force: evt.pressure,\n type: touchType,\n timestamp: Date.now(),\n });\n this.redraw();\n }\n\n createTouchHandler(touchType: TouchType) {\n return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n }\n\n private onStart = this.createTouchHandler(TouchType.Start);\n private onActive = this.createTouchHandler(TouchType.Active);\n private onCancel = this.createTouchHandler(TouchType.Cancelled);\n private onEnd = this.createTouchHandler(TouchType.End);\n private onLayout = this.onLayoutEvent.bind(this);\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <Platform.View {...viewProps} onLayout={this.onLayout}>\n <canvas\n ref={this._canvasRef}\n style={{ display: \"flex\", flex: 1 }}\n onPointerDown={this.onStart}\n onPointerMove={this.onActive}\n onPointerUp={this.onEnd}\n onPointerCancel={this.onCancel}\n onPointerLeave={this.onEnd}\n onPointerOut={this.onEnd}\n />\n </Platform.View>\n );\n }\n}\n"],"mappings":";;;;;;;AACA;;AAMA;;AACA;;AAGA;;;;;;;;AAEA,MAAMA,EAAE,GAAGC,kBAAA,CAASC,UAApB;;AAEO,MAAeC,eAAf,SAEGC,cAAA,CAAMC,SAFT,CAE2B;EAChCC,WAAW,CAACC,KAAD,EAAgB;IACzB,MAAMA,KAAN;;IADyB,kCAKa,IALb;;IAAA,0CAMmB,EANnB;;IAAA,kCAOU,EAPV;;IAAA,iCAQQ,IARR;;IAAA,iDASNH,cAAA,CAAMI,SAAN,EATM;;IAAA;;IAAA,yCAWD,CAXC;;IAAA,mCAYP,CAZO;;IAAA,+BAcT,CAdS;;IAAA,gCAeR,CAfQ;;IAAA,iCAsKT,KAAKC,kBAAL,CAAwBC,gBAAA,CAAUC,KAAlC,CAtKS;;IAAA,kCAuKR,KAAKF,kBAAL,CAAwBC,gBAAA,CAAUE,MAAlC,CAvKQ;;IAAA,kCAwKR,KAAKH,kBAAL,CAAwBC,gBAAA,CAAUG,SAAlC,CAxKQ;;IAAA,+BAyKX,KAAKJ,kBAAL,CAAwBC,gBAAA,CAAUI,GAAlC,CAzKW;;IAAA,kCA0KR,KAAKC,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,CA1KQ;;IAEzB,KAAKC,KAAL,GAAaV,KAAK,CAACW,IAAN,IAAc,SAA3B;EACD;;EAcOC,cAAc,GAAG;IACvB,KAAKC,gBAAL,CAAsBC,OAAtB,CAA+BC,CAAD,IAAOA,CAAC,EAAtC;;IACA,KAAKF,gBAAL,GAAwB,EAAxB;EACD;;EAEOL,aAAa,CAACQ,GAAD,EAAyB;IAC5C,MAAM;MAAEC;IAAF,IAAgBC,MAAtB,CAD4C,CAE5C;;IACA,MAAMC,MAAM,GAAG,KAAKC,UAAL,CAAgBC,OAA/B;;IACA,IAAIF,MAAJ,EAAY;MACV,KAAKG,KAAL,GAAaH,MAAM,CAACI,WAApB;MACA,KAAKC,MAAL,GAAcL,MAAM,CAACM,YAArB;MACAN,MAAM,CAACG,KAAP,GAAe,KAAKA,KAAL,GAAa7B,EAA5B;MACA0B,MAAM,CAACK,MAAP,GAAgB,KAAKA,MAAL,GAAc/B,EAA9B;MACA,MAAMiC,OAAO,GAAGT,SAAS,CAACU,sBAAV,CAAiCR,MAAjC,CAAhB;;MACA,IAAI,CAACO,OAAL,EAAc;QACZ,MAAM,IAAIE,KAAJ,CAAU,0BAAV,CAAN;MACD;;MACD,KAAKC,QAAL,GAAgB,IAAIC,0BAAJ,CAAiBb,SAAjB,EAA4BS,OAA5B,CAAhB;MACA,KAAKK,OAAL,GAAe,KAAKF,QAAL,CAAcG,SAAd,EAAf;MACA,KAAKC,MAAL;IACD,CAhB2C,CAiB5C;;;IACA,IAAI,KAAKjC,KAAL,CAAWkC,QAAf,EAAyB;MACvB,KAAKlC,KAAL,CAAWkC,QAAX,CAAoBlB,GAApB;IACD;EACF;;EAESmB,OAAO,GAAG;IAClB,OAAO;MAAEb,KAAK,EAAE,KAAKA,KAAd;MAAqBE,MAAM,EAAE,KAAKA;IAAlC,CAAP;EACD;;EAEDY,iBAAiB,GAAG;IAClB;IACA,KAAKC,IAAL;EACD;;EAEDC,kBAAkB,GAAG;IACnB,KAAKL,MAAL;EACD;;EAEDM,oBAAoB,GAAG;IACrB,KAAK3B,cAAL;IACA4B,oBAAoB,CAAC,KAAKC,SAAN,CAApB,CAFqB,CAGrB;IACA;IACA;IACA;;IACA,IAAI,KAAKZ,QAAT,EAAmB;MAAA;;MACjB,8BAAKT,UAAL,CAAgBC,OAAhB,0GACIqB,UADJ,CACe,QADf,6GAEIC,YAFJ,CAEiB,oBAFjB,mFAGIC,WAHJ;IAID;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSC,iBAAiB,CAACC,IAAD,EAAgB;IAAA;;IACtC,KAAKf,OAAL,CAAcgB,KAAd,CAAoB9B,SAAS,CAAC+B,WAA9B;;IACA,KAAKC,cAAL,CAAoB,KAAKlB,OAAzB,EAAmC,EAAnC;IACA,uBAAKF,QAAL,kEAAeqB,GAAf,CAAmBC,KAAnB;IACA,0BAAO,KAAKtB,QAAZ,oDAAO,gBAAegB,iBAAf,CAAiCC,IAAjC,CAAP;EACD;EAED;AACF;AACA;;;EAME;AACF;AACA;EACUT,IAAI,GAAG;IACb,IAAI,KAAK3B,KAAL,KAAe,YAAf,IAA+B,KAAK0C,eAAL,GAAuB,CAA1D,EAA6D;MAC3D,KAAKA,eAAL,GAAuB,CAAvB;;MACA,IAAI,KAAKrB,OAAT,EAAkB;QAAA;;QAChB,MAAMsB,OAAO,GAAG,CAAC,GAAG,KAAKC,QAAT,CAAhB;QACA,KAAKA,QAAL,GAAgB,EAAhB;QACA,MAAMnC,MAAM,GAAG,KAAKY,OAApB;QACAZ,MAAM,CAAC4B,KAAP,CAAaQ,YAAY,CAACC,EAAb,CAAgB,CAAhB,EAAmB,CAAnB,EAAsB,CAAtB,EAAyB,CAAzB,CAAb;QACArC,MAAM,CAACsC,IAAP;QACAtC,MAAM,CAACuC,KAAP,CAAajE,EAAb,EAAiBA,EAAjB;QACA,KAAKwD,cAAL,CAAoB9B,MAApB,EAA4BkC,OAA5B;QACAlC,MAAM,CAACwC,OAAP;QACA,wBAAK9B,QAAL,oEAAeqB,GAAf,CAAmBC,KAAnB;MACD;IACF;;IACD,KAAKV,SAAL,GAAiBmB,qBAAqB,CAAC,KAAKvB,IAAL,CAAU5B,IAAV,CAAe,IAAf,CAAD,CAAtC;EACD;;EAEMwB,MAAM,GAAG;IACd,KAAKmB,eAAL;EACD;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;EACSS,WAAW,CAAClD,IAAD,EAAiB;IACjC,KAAKD,KAAL,GAAaC,IAAb;IACA,KAAK0B,IAAL;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSyB,cAAc,CAACC,OAAD,EAAgC;IACnD;IACA,KAAKnD,cAAL,GAFmD,CAGnD;;IACAmD,OAAO,CAACjD,OAAR,CAAiBkD,CAAD,IAAO;MACrB,KAAKnD,gBAAL,CAAsBoD,IAAtB,CACED,CAAC,CAACE,WAAF,CAAc,MAAM;QAClB,KAAKjC,MAAL;MACD,CAFD,CADF;IAKD,CAND;EAOD;;EAEOkC,gBAAgB,CAACnD,GAAD,EAAoBoD,SAApB,EAA0C;IAChE,KAAKd,QAAL,CAAcW,IAAd,CAAmB;MACjBI,EAAE,EAAErD,GAAG,CAACsD,SADS;MAEjBC,CAAC,EAAEvD,GAAG,CAACwD,OAAJ,GAAcxD,GAAG,CAACyD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCC,IAFtC;MAGjBC,CAAC,EAAE5D,GAAG,CAAC6D,OAAJ,GAAc7D,GAAG,CAACyD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCI,GAHtC;MAIjBC,KAAK,EAAE/D,GAAG,CAACgE,QAJM;MAKjBC,IAAI,EAAEb,SALW;MAMjBc,SAAS,EAAEC,IAAI,CAACC,GAAL;IANM,CAAnB;;IAQA,KAAKnD,MAAL;EACD;;EAED/B,kBAAkB,CAACkE,SAAD,EAAuB;IACvC,OAAQpD,GAAD,IAAuB,KAAKmD,gBAAL,CAAsBnD,GAAtB,EAA2BoD,SAA3B,CAA9B;EACD;;EAQDiB,MAAM,GAAG;IACP,MAAM;MAAE1E,IAAF;MAAQ2E,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKvF,KAAnD;IACA,oBACE,6BAAC,kBAAD,CAAU,IAAV,eAAmBuF,SAAnB;MAA8B,QAAQ,EAAE,KAAKrD;IAA7C,iBACE;MACE,GAAG,EAAE,KAAKd,UADZ;MAEE,KAAK,EAAE;QAAEoE,OAAO,EAAE,MAAX;QAAmBC,IAAI,EAAE;MAAzB,CAFT;MAGE,aAAa,EAAE,KAAKC,OAHtB;MAIE,aAAa,EAAE,KAAKC,QAJtB;MAKE,WAAW,EAAE,KAAKC,KALpB;MAME,eAAe,EAAE,KAAKC,QANxB;MAOE,cAAc,EAAE,KAAKD,KAPvB;MAQE,YAAY,EAAE,KAAKA;IARrB,EADF,CADF;EAcD;;AA7L+B"}
|
@@ -7,7 +7,7 @@ exports.SkiaDomView = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _Platform = require("../Platform");
|
11
11
|
|
12
12
|
var _api = require("./api");
|
13
13
|
|
@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
19
19
|
|
20
20
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
21
|
|
22
|
-
const NativeSkiaDomView =
|
22
|
+
const NativeSkiaDomView = _Platform.Platform.OS !== "web" ? _Platform.Platform.requireNativeComponent("SkiaDomView") : // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
23
23
|
null;
|
24
24
|
|
25
25
|
class SkiaDomView extends _react.default.Component {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["NativeSkiaDomView","Platform","OS","requireNativeComponent","SkiaDomView","React","Component","constructor","props","_nativeId","SkiaViewNativeId","current","root","onTouch","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","componentWillUnmount","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport {
|
1
|
+
{"version":3,"names":["NativeSkiaDomView","Platform","OS","requireNativeComponent","SkiaDomView","React","Component","constructor","props","_nativeId","SkiaViewNativeId","current","root","onTouch","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","componentWillUnmount","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaDomView.tsx"],"sourcesContent":["import React from \"react\";\nimport type { HostComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport { SkiaViewNativeId } from \"./SkiaView\";\nimport type { NativeSkiaViewProps, SkiaDomViewProps } from \"./types\";\n\nconst NativeSkiaDomView: HostComponent<SkiaDomViewProps> =\n Platform.OS !== \"web\"\n ? Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaDomView\")\n : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (null as any);\n\nexport class SkiaDomView extends React.Component<SkiaDomViewProps> {\n constructor(props: SkiaDomViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { root, onTouch, onSize } = props;\n if (root) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n }\n if (onTouch) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaDomViewProps) {\n const { root, onTouch, onSize } = this.props;\n if (root !== prevProps.root) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", root);\n }\n if (onTouch !== prevProps.onTouch) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onTouch\", onTouch);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n /**\n * Clear up the dom node when unmounting to release resources.\n */\n componentWillUnmount(): void {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"root\", null);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaDomView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":"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"}
|
@@ -7,7 +7,7 @@ exports.SkiaPictureView = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _Platform = require("../Platform");
|
11
11
|
|
12
12
|
var _api = require("./api");
|
13
13
|
|
@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
19
19
|
|
20
20
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
21
|
|
22
|
-
const NativeSkiaPictureView =
|
22
|
+
const NativeSkiaPictureView = _Platform.Platform.requireNativeComponent("SkiaPictureView");
|
23
23
|
|
24
24
|
class SkiaPictureView extends _react.default.Component {
|
25
25
|
constructor(props) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["NativeSkiaPictureView","requireNativeComponent","SkiaPictureView","React","Component","constructor","props","_nativeId","SkiaViewNativeId","current","picture","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport {
|
1
|
+
{"version":3,"names":["NativeSkiaPictureView","Platform","requireNativeComponent","SkiaPictureView","React","Component","constructor","props","_nativeId","SkiaViewNativeId","current","picture","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport { SkiaViewNativeId } from \"./SkiaView\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nconst NativeSkiaPictureView =\n Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n constructor(props: SkiaPictureViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { picture, onSize } = props;\n if (picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaPictureViewProps) {\n const { picture, onSize } = this.props;\n if (picture !== prevProps.picture) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, ...viewProps } = this.props;\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AAEA;;AACA;;;;;;;;AAGA,MAAMA,qBAAqB,GACzBC,kBAAA,CAASC,sBAAT,CAAqD,iBAArD,CADF;;AAGO,MAAMC,eAAN,SAA8BC,cAAA,CAAMC,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBC,0BAAA,CAAiBC,OAAjB,EAAjB;IACA,MAAM;MAAEC,OAAF;MAAWC;IAAX,IAAsBL,KAA5B;;IACA,IAAII,OAAJ,EAAa;MACXE,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKP,SAAhC,EAA2C,SAA3C,EAAsDG,OAAtD;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKP,SAAhC,EAA2C,QAA3C,EAAqDI,MAArD;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKR,SAAZ;EACD;;EAEDS,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEP,OAAF;MAAWC;IAAX,IAAsB,KAAKL,KAAjC;;IACA,IAAII,OAAO,KAAKO,SAAS,CAACP,OAA1B,EAAmC;MACjCE,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKP,SAAhC,EAA2C,SAA3C,EAAsDG,OAAtD;IACD;;IACD,IAAIC,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKP,SAAhC,EAA2C,QAA3C,EAAqDI,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKX,SAAnC,EAA8CY,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKd,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSe,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKjB,SAAtC,EAAiDgB,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKtB,KAAnD;IACA,oBACE,6BAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEmB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAxEwE;;;;AA2E3E,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|
@@ -7,7 +7,7 @@ exports.SkiaViewNativeId = exports.SkiaView = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _Platform = require("../Platform");
|
11
11
|
|
12
12
|
var _api = require("./api");
|
13
13
|
|
@@ -21,7 +21,8 @@ const SkiaViewNativeId = {
|
|
21
21
|
current: 1000
|
22
22
|
};
|
23
23
|
exports.SkiaViewNativeId = SkiaViewNativeId;
|
24
|
-
|
24
|
+
|
25
|
+
const NativeSkiaView = _Platform.Platform.requireNativeComponent("SkiaDrawView");
|
25
26
|
|
26
27
|
class SkiaView extends _react.default.Component {
|
27
28
|
constructor(props) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["SkiaViewNativeId","current","NativeSkiaView","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport {
|
1
|
+
{"version":3,"names":["SkiaViewNativeId","current","NativeSkiaView","Platform","requireNativeComponent","SkiaView","React","Component","constructor","props","_nativeId","onDraw","onSize","assertSkiaViewApi","SkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nexport const SkiaViewNativeId = { current: 1000 };\n\nconst NativeSkiaView =\n Platform.requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n constructor(props: SkiaDrawViewProps) {\n super(props);\n this._nativeId = SkiaViewNativeId.current++;\n const { onDraw, onSize } = props;\n if (onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n if (onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n private _nativeId: number;\n\n public get nativeId() {\n return this._nativeId;\n }\n\n componentDidUpdate(prevProps: SkiaDrawViewProps) {\n const { onDraw, onSize } = this.props;\n if (onDraw !== prevProps.onDraw) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n }\n if (onSize !== prevProps.onSize) {\n assertSkiaViewApi();\n SkiaViewApi.setJsiProperty(this._nativeId, \"onSize\", onSize);\n }\n }\n\n /**\n * Creates a snapshot from the canvas in the surface\n * @param rect Rect to use as bounds. Optional.\n * @returns An Image object.\n */\n public makeImageSnapshot(rect?: SkRect) {\n assertSkiaViewApi();\n return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n }\n\n /**\n * Sends a redraw request to the native SkiaView.\n */\n public redraw() {\n assertSkiaViewApi();\n SkiaViewApi.requestRedraw(this._nativeId);\n }\n\n /**\n * Registers one or move values as a dependant value of the Skia View. The view will\n * The view will redraw itself when any of the values change.\n * @param values Values to register\n */\n public registerValues(values: SkiaValue<unknown>[]): () => void {\n assertSkiaViewApi();\n return SkiaViewApi.registerValuesInView(this._nativeId, values);\n }\n\n render() {\n const { mode, debug = false, onSize, ...viewProps } = this.props;\n return (\n <NativeSkiaView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n mode={mode}\n debug={debug}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null ||\n SkiaViewApi.setJsiProperty === null ||\n SkiaViewApi.callJsiMethod === null ||\n SkiaViewApi.registerValuesInView === null ||\n SkiaViewApi.requestRedraw === null ||\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;;;;AAAA;;AAIA;;AAEA;;;;;;;;AAGO,MAAMA,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAzB;;;AAEP,MAAMC,cAAc,GAClBC,kBAAA,CAASC,sBAAT,CAAqD,cAArD,CADF;;AAGO,MAAMC,QAAN,SAAuBC,cAAA,CAAMC,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBV,gBAAgB,CAACC,OAAjB,EAAjB;IACA,MAAM;MAAEU,MAAF;MAAUC;IAAV,IAAqBH,KAA3B;;IACA,IAAIE,MAAJ,EAAY;MACVE,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAJ,EAAY;MACVC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;;EAIkB,IAARI,QAAQ,GAAG;IACpB,OAAO,KAAKN,SAAZ;EACD;;EAEDO,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEP,MAAF;MAAUC;IAAV,IAAqB,KAAKH,KAAhC;;IACA,IAAIE,MAAM,KAAKO,SAAS,CAACP,MAAzB,EAAiC;MAC/BE,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;;IACD,IAAIC,MAAM,KAAKM,SAAS,CAACN,MAAzB,EAAiC;MAC/BC,iBAAiB;;MACjBC,gBAAA,CAAYC,cAAZ,CAA2B,KAAKL,SAAhC,EAA2C,QAA3C,EAAqDE,MAArD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSO,iBAAiB,CAACC,IAAD,EAAgB;IACtCP,iBAAiB;IACjB,OAAOC,gBAAA,CAAYK,iBAAZ,CAA8B,KAAKT,SAAnC,EAA8CU,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdR,iBAAiB;;IACjBC,gBAAA,CAAYQ,aAAZ,CAA0B,KAAKZ,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSa,cAAc,CAACC,MAAD,EAA2C;IAC9DX,iBAAiB;IACjB,OAAOC,gBAAA,CAAYW,oBAAZ,CAAiC,KAAKf,SAAtC,EAAiDc,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuBhB,MAAvB;MAA+B,GAAGiB;IAAlC,IAAgD,KAAKpB,KAA3D;IACA,oBACE,6BAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEiB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAxE8D;;;;AA2EjE,MAAMhB,iBAAiB,GAAG,MAAM;EAC9B,IACEC,gBAAA,KAAgB,IAAhB,IACAA,gBAAA,CAAYC,cAAZ,KAA+B,IAD/B,IAEAD,gBAAA,CAAYgB,aAAZ,KAA8B,IAF9B,IAGAhB,gBAAA,CAAYW,oBAAZ,KAAqC,IAHrC,IAIAX,gBAAA,CAAYQ,aAAZ,KAA8B,IAJ9B,IAKAR,gBAAA,CAAYK,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
|
@@ -7,7 +7,7 @@ exports.useTouchHandler = exports.useMultiTouchHandler = void 0;
|
|
7
7
|
|
8
8
|
var _react = require("react");
|
9
9
|
|
10
|
-
var
|
10
|
+
var _Platform = require("../Platform");
|
11
11
|
|
12
12
|
var _types = require("./types");
|
13
13
|
|
@@ -36,8 +36,8 @@ const useInternalTouchHandler = function (handlers) {
|
|
36
36
|
|
37
37
|
if (touch.type !== _types.TouchType.Start && touch.type !== _types.TouchType.End && touch.type !== _types.TouchType.Cancelled && timeDiffseconds > 0) {
|
38
38
|
prevVelocityRef.current[touch.id] = {
|
39
|
-
x: distX / timeDiffseconds /
|
40
|
-
y: distY / timeDiffseconds /
|
39
|
+
x: distX / timeDiffseconds / _Platform.Platform.PixelRatio,
|
40
|
+
y: distY / timeDiffseconds / _Platform.Platform.PixelRatio
|
41
41
|
};
|
42
42
|
}
|
43
43
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","useRef","prevVelocityRef","useCallback","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","TouchType","Start","End","Cancelled","
|
1
|
+
{"version":3,"names":["useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","useRef","prevVelocityRef","useCallback","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","TouchType","Start","End","Cancelled","Platform","PixelRatio","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"sources":["useTouchHandler.ts"],"sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\n\nimport type { Vector } from \"../skia/types\";\nimport { Platform } from \"../Platform\";\n\nimport type {\n ExtendedTouchInfo,\n TouchHandlers,\n TouchHandler,\n TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = [],\n multiTouch = false\n): TouchHandler => {\n const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n return useCallback((history: Array<Array<TouchInfo>>) => {\n // Process all items in the current touch history\n history.forEach((touches) => {\n // Enumerate touches\n for (let i = 0; i < touches.length; i++) {\n if (!multiTouch && i > 0) {\n break;\n }\n\n const touch = touches[i];\n const prevTouch = prevTouchInfoRef.current[touch.id];\n // Calculate the velocity from the previous touch.\n const timeDiffseconds =\n touch.timestamp -\n (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n const distX = touch.x - (prevTouch?.x ?? touch.x);\n const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n if (\n touch.type !== TouchType.Start &&\n touch.type !== TouchType.End &&\n touch.type !== TouchType.Cancelled &&\n timeDiffseconds > 0\n ) {\n prevVelocityRef.current[touch.id] = {\n x: distX / timeDiffseconds / Platform.PixelRatio,\n y: distY / timeDiffseconds / Platform.PixelRatio,\n };\n }\n\n const extendedTouchInfo: ExtendedTouchInfo = {\n ...touch,\n velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n };\n\n // Save previous touch\n prevTouchInfoRef.current[touch.id] = touch;\n\n if (touch.type === TouchType.Start) {\n delete prevVelocityRef.current[touch.id];\n handlers.onStart && handlers.onStart(touch);\n } else if (touch.type === TouchType.Active) {\n handlers.onActive && handlers.onActive(extendedTouchInfo);\n } else {\n handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n }\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = []\n): TouchHandler => {\n return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n handlers: TouchHandlers,\n deps: DependencyList = []\n): TouchHandler => {\n return useInternalTouchHandler(handlers, deps, true);\n};\n"],"mappings":"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"}
|
@@ -7,7 +7,7 @@ exports.WithSkiaWeb = void 0;
|
|
7
7
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _Platform = require("../Platform");
|
11
11
|
|
12
12
|
var _LoadSkiaWeb = require("./LoadSkiaWeb");
|
13
13
|
|
@@ -24,7 +24,7 @@ const WithSkiaWeb = _ref => {
|
|
24
24
|
const Inner = (0, _react.useMemo)( // TODO: investigate
|
25
25
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
26
26
|
() => /*#__PURE__*/(0, _react.lazy)(async () => {
|
27
|
-
if (
|
27
|
+
if (_Platform.Platform.OS === "web") {
|
28
28
|
await (0, _LoadSkiaWeb.LoadSkiaWeb)(opts);
|
29
29
|
} else {
|
30
30
|
console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["WithSkiaWeb","getComponent","fallback","opts","Inner","useMemo","lazy","Platform","OS","LoadSkiaWeb","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"
|
1
|
+
{"version":3,"names":["WithSkiaWeb","getComponent","fallback","opts","Inner","useMemo","lazy","Platform","OS","LoadSkiaWeb","console","warn"],"sources":["WithSkiaWeb.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\n\nimport { Platform } from \"../Platform\";\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 // TODO: investigate\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (): any =>\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"],"mappings":";;;;;;;AACA;;AAEA;;AAEA;;;;;;AAQO,MAAMA,WAAW,GAAG,QAIN;EAAA,IAJO;IAC1BC,YAD0B;IAE1BC,QAF0B;IAG1BC;EAH0B,CAIP;EACnB,MAAMC,KAAK,GAAG,IAAAC,cAAA,GACZ;EACA;EACA,mBACE,IAAAC,WAAA,EAAK,YAAY;IACf,IAAIC,kBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACzB,MAAM,IAAAC,wBAAA,EAAYN,IAAZ,CAAN;IACD,CAFD,MAEO;MACLO,OAAO,CAACC,IAAR,CACE,yEADF;IAGD;;IACD,OAAOV,YAAY,EAAnB;EACD,CATD,CAJU,EAcZ,CAACA,YAAD,EAAeE,IAAf,CAdY,CAAd;EAgBA,oBACE,6BAAC,eAAD;IAAU,QAAQ,EAAED,QAAQ,IAAI;EAAhC,gBACE,6BAAC,KAAD,OADF,CADF;AAKD,CA1BM"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
|
3
|
+
import type { DataModule } from "../skia/types";
|
4
|
+
export interface IPlatform {
|
5
|
+
OS: string;
|
6
|
+
requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
|
7
|
+
PixelRatio: number;
|
8
|
+
NativeModules: Record<string, any>;
|
9
|
+
findNodeHandle: (componentOrHandle: null | number | React.Component<any, any> | React.ComponentClass<any>) => null | NodeHandle;
|
10
|
+
resolveAsset: (source: DataModule) => string;
|
11
|
+
View: typeof ViewComponent;
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sources":["IPlatform.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { HostComponent, NodeHandle, ViewComponent } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\n\nexport interface IPlatform {\n OS: string;\n requireNativeComponent: <T>(viewName: string) => HostComponent<T>;\n PixelRatio: number;\n NativeModules: Record<string, any>;\n findNodeHandle: (\n componentOrHandle:\n | null\n | number\n | React.Component<any, any>\n | React.ComponentClass<any>\n ) => null | NodeHandle;\n resolveAsset: (source: DataModule) => string;\n View: typeof ViewComponent;\n}\n"],"mappings":""}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { Image, PixelRatio, requireNativeComponent, Platform as RNPlatform, findNodeHandle, NativeModules, View } from "react-native";
|
2
|
+
import { isRNModule } from "../skia/types";
|
3
|
+
export const Platform = {
|
4
|
+
OS: RNPlatform.OS,
|
5
|
+
PixelRatio: PixelRatio.get(),
|
6
|
+
requireNativeComponent,
|
7
|
+
resolveAsset: source => {
|
8
|
+
return isRNModule(source) ? Image.resolveAssetSource(source).uri : source.default;
|
9
|
+
},
|
10
|
+
findNodeHandle,
|
11
|
+
NativeModules,
|
12
|
+
View
|
13
|
+
};
|
14
|
+
//# sourceMappingURL=Platform.js.map
|