npm - @shopify/react-native-skia - Versions diffs - 2.3.9 → 2.3.11 - Mend

@shopify/react-native-skia 2.3.9 → 2.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/lib/module/sksg/Reconciler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["ReactReconciler","NodeType","debug","sksgHostConfig","createContainer","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaSGRoot","constructor","Skia","nativeId","_defineProperty","container","root","console","error","sg","children","type","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","finishRecordingAsPicture","unmount"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./StaticContainer\";\nimport { createContainer } from \"./Container\";\n\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n bundleType: 1,\n version: \"0.0.1\",\n rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaSGRoot {\n private root: OpaqueRoot;\n private container: Container;\n\n constructor(\n public Skia: Skia,\n nativeId = -1\n ) {\n this.container = createContainer(Skia, nativeId);\n this.root = skiaReconciler.createContainer(\n this.container,\n 0,\n null,\n ~~true~~,\n null,\n \"\",\n console.error,\n null\n );\n }\n\n get sg() {\n const children = this.container.root;\n return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n }\n\n private updateContainer(element: ReactNode) {\n return new Promise((resolve) => {\n skiaReconciler.updateContainer(element, this.root, null, () => {\n ~~debug(\"updateContainer\");\n~~ resolve(true);\n });\n });\n }\n\n async render(element: ReactNode) {\n this.container.mount();\n await this.updateContainer(element);\n this.container.redraw();\n }\n\n drawOnCanvas(canvas: SkCanvas) {\n this.container.drawOnCanvas(canvas);\n }\n\n getPicture() {\n const recorder = this.Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n this.drawOnCanvas(canvas);\n return recorder.finishRecordingAsPicture();\n }\n\n unmount() {\n this.container.unmount();\n return new Promise((resolve) => {\n skiaReconciler.updateContainer(null, this.root, null, () => {\n debug(\"unmountContainer\");\n resolve(true);\n });\n });\n }\n}\n"],"mappings":";;;AAEA,OAAOA,eAAe,MAAM,kBAAkB;AAG9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,KAAK,EAAEC,cAAc,QAAQ,cAAc;AAEpD,SAASC,eAAe,QAAQ,aAAa;AAE7C,OAAO,YAAY;AAEnB,MAAMC,cAAc,GAAGL,eAAe,CAACG,cAAc,CAAC;AAEtDE,cAAc,CAACC,kBAAkB,CAAC;EAChCC,UAAU,EAAE,CAAC;EACbC,OAAO,EAAE,OAAO;EAChBC,mBAAmB,EAAE;AACvB,CAAC,CAAC;AAEF,OAAO,MAAMC,UAAU,CAAC;EAItBC,WAAWA,CACFC,IAAU,EACjBC,QAAQ,GAAG,CAAC,CAAC,EACb;IAAA,KAFOD,IAAU,GAAVA,IAAU;IAAAE,eAAA;IAAAA,eAAA;IAGjB,IAAI,CAACC,SAAS,~~GAAGX~~,eAAe,CAACQ,IAAI,EAAEC,QAAQ,CAAC;IAChD,IAAI,~~CAACG~~,IAAI,~~GAAGX~~,cAAc,CAACD,eAAe,CACxC,IAAI,~~CAACW~~,SAAS,EACd,CAAC,EACD,IAAI,~~EACJ~~,~~IAAI~~,~~EACJ~~,IAAI,EACJ,EAAE,~~EACFE~~,OAAO,CAACC,KAAK,EACb,IACF,CAAC;EACH;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACC,IAAI;IACpC,OAAO;MAAEK,IAAI,~~EAAEpB~~,QAAQ,~~CAACqB~~,KAAK;MAAEC,KAAK,EAAE,CAAC,CAAC;MAAEH,QAAQ;MAAEI,aAAa,EAAE;IAAM,CAAC;EAC5E;EAEQC,eAAeA,CAACC,OAAkB,EAAE;IAC1C,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;~~MAC9BvB~~,cAAc,~~CAACoB~~,eAAe,CAACC,OAAO,EAAE,IAAI,CAACV,IAAI,EAAE,IAAI,EAAE,MAAM;~~QAC7Dd~~,~~KAAK,CAAC,iBAAiB,CAAC;QACxB0B,~~OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;EAEA,MAAMC,MAAMA,CAACH,OAAkB,EAAE;IAC/B,IAAI,CAACX,SAAS,CAACe,KAAK,CAAC,CAAC;IACtB,MAAM,IAAI,CAACL,eAAe,CAACC,OAAO,CAAC;IACnC,IAAI,CAACX,SAAS,CAACgB,MAAM,CAAC,CAAC;EACzB;EAEAC,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAClB,SAAS,CAACiB,YAAY,CAACC,MAAM,CAAC;EACrC;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAMC,QAAQ,GAAG,IAAI,~~CAACvB~~,IAAI,~~CAACwB~~,eAAe,CAAC,CAAC;IAC5C,MAAMH,MAAM,GAAGE,QAAQ,CAACE,cAAc,CAAC,CAAC;IACxC,IAAI,CAACL,YAAY,CAACC,MAAM,CAAC;IACzB,OAAOE,QAAQ,CAACG,wBAAwB,CAAC,CAAC;EAC5C;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACxB,SAAS,CAACwB,OAAO,CAAC,CAAC;IACxB,OAAO,IAAIZ,OAAO,CAAEC,OAAO,IAAK;~~MAC9BvB~~,cAAc,~~CAACoB~~,eAAe,CAAC,IAAI,EAAE,IAAI,CAACT,IAAI,EAAE,IAAI,EAAE,MAAM;~~QAC1Dd~~,KAAK,CAAC,kBAAkB,CAAC;~~QACzB0B~~,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;AACF","ignoreList":[]}
1	+ {"version":3,"names":["ReactReconciler","NodeType","debug","sksgHostConfig","createContainer","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaSGRoot","constructor","Skia","nativeId","_defineProperty","strictMode","container","root","console","error","sg","children","type","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","finishRecordingAsPicture","unmount"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./StaticContainer\";\nimport { createContainer } from \"./Container\";\n\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n bundleType: 1,\n version: \"0.0.1\",\n rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaSGRoot {\n private root: OpaqueRoot;\n private container: Container;\n\n constructor(\n public Skia: Skia,\n nativeId = -1\n ) {\n const strictMode = false;\n this.container = createContainer(Skia, nativeId);\n this.root = skiaReconciler.createContainer(\n this.container,\n 0,\n null,\n strictMode,\n null,\n \"\",\n console.error,\n null\n );\n }\n\n get sg() {\n const children = this.container.root;\n return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n }\n\n private updateContainer(element: ReactNode) {\n return new Promise((resolve) => {\n skiaReconciler.updateContainer(element, this.root, null, () => {\n resolve(true);\n });\n });\n }\n\n async render(element: ReactNode) {\n this.container.mount();\n await this.updateContainer(element);\n this.container.redraw();\n }\n\n drawOnCanvas(canvas: SkCanvas) {\n this.container.drawOnCanvas(canvas);\n }\n\n getPicture() {\n const recorder = this.Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n this.drawOnCanvas(canvas);\n return recorder.finishRecordingAsPicture();\n }\n\n unmount() {\n this.container.unmount();\n return new Promise((resolve) => {\n skiaReconciler.updateContainer(null, this.root, null, () => {\n debug(\"unmountContainer\");\n resolve(true);\n });\n });\n }\n}\n"],"mappings":";;;AAEA,OAAOA,eAAe,MAAM,kBAAkB;AAG9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,KAAK,EAAEC,cAAc,QAAQ,cAAc;AAEpD,SAASC,eAAe,QAAQ,aAAa;AAE7C,OAAO,YAAY;AAEnB,MAAMC,cAAc,GAAGL,eAAe,CAACG,cAAc,CAAC;AAEtDE,cAAc,CAACC,kBAAkB,CAAC;EAChCC,UAAU,EAAE,CAAC;EACbC,OAAO,EAAE,OAAO;EAChBC,mBAAmB,EAAE;AACvB,CAAC,CAAC;AAEF,OAAO,MAAMC,UAAU,CAAC;EAItBC,WAAWA,CACFC,IAAU,EACjBC,QAAQ,GAAG,CAAC,CAAC,EACb;IAAA,KAFOD,IAAU,GAAVA,IAAU;IAAAE,eAAA;IAAAA,eAAA;IAGjB,MAAMC,UAAU,GAAG,KAAK;IACxB,IAAI,CAACC,SAAS,GAAGZ,eAAe,CAACQ,IAAI,EAAEC,QAAQ,CAAC;IAChD,IAAI,CAACI,IAAI,GAAGZ,cAAc,CAACD,eAAe,CACxC,IAAI,CAACY,SAAS,EACd,CAAC,EACD,IAAI,EACJD,UAAU,EACV,IAAI,EACJ,EAAE,EACFG,OAAO,CAACC,KAAK,EACb,IACF,CAAC;EACH;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACC,IAAI;IACpC,OAAO;MAAEK,IAAI,EAAErB,QAAQ,CAACsB,KAAK;MAAEC,KAAK,EAAE,CAAC,CAAC;MAAEH,QAAQ;MAAEI,aAAa,EAAE;IAAM,CAAC;EAC5E;EAEQC,eAAeA,CAACC,OAAkB,EAAE;IAC1C,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;MAC9BxB,cAAc,CAACqB,eAAe,CAACC,OAAO,EAAE,IAAI,CAACV,IAAI,EAAE,IAAI,EAAE,MAAM;QAC7DY,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;EAEA,MAAMC,MAAMA,CAACH,OAAkB,EAAE;IAC/B,IAAI,CAACX,SAAS,CAACe,KAAK,CAAC,CAAC;IACtB,MAAM,IAAI,CAACL,eAAe,CAACC,OAAO,CAAC;IACnC,IAAI,CAACX,SAAS,CAACgB,MAAM,CAAC,CAAC;EACzB;EAEAC,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAClB,SAAS,CAACiB,YAAY,CAACC,MAAM,CAAC;EACrC;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAMC,QAAQ,GAAG,IAAI,CAACxB,IAAI,CAACyB,eAAe,CAAC,CAAC;IAC5C,MAAMH,MAAM,GAAGE,QAAQ,CAACE,cAAc,CAAC,CAAC;IACxC,IAAI,CAACL,YAAY,CAACC,MAAM,CAAC;IACzB,OAAOE,QAAQ,CAACG,wBAAwB,CAAC,CAAC;EAC5C;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACxB,SAAS,CAACwB,OAAO,CAAC,CAAC;IACxB,OAAO,IAAIZ,OAAO,CAAEC,OAAO,IAAK;MAC9BxB,cAAc,CAACqB,eAAe,CAAC,IAAI,EAAE,IAAI,CAACT,IAAI,EAAE,IAAI,EAAE,MAAM;QAC1Df,KAAK,CAAC,kBAAkB,CAAC;QACzB2B,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/lib/module/specs/SkiaPictureViewNativeComponent.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export interface NativeProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     colorSpace?: string;
+    coldStart?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/module/specs/SkiaPictureViewNativeComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["codegenNativeComponent"],"sources":["SkiaPictureViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n colorSpace?: string;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default codegenNativeComponent<NativeProps>(\"SkiaPictureView\");\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,yDAAyD;~~AAS5F~~;AACA,eAAeA,sBAAsB,CAAc,iBAAiB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["codegenNativeComponent"],"sources":["SkiaPictureViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n colorSpace?: string;\n coldStart?: boolean;\n}\n\n// eslint-disable-next-line import/no-default-export\nexport default codegenNativeComponent<NativeProps>(\"SkiaPictureView\");\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,yDAAyD;AAU5F;AACA,eAAeA,sBAAsB,CAAc,iBAAiB,CAAC","ignoreList":[]}

package/lib/module/views/SkiaPictureView.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { SkRect } from "../skia/types";
 import type { SkiaPictureViewNativeProps } from "./types";
 interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
     mode?: "default" | "continuous";
+    coldStart?: boolean;
 }
 export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     private requestId;

package/lib/module/views/SkiaPictureView.js CHANGED Viewed

@@ -79,13 +79,15 @@ export class SkiaPictureView extends React.Component {
       mode,
       debug = false,
       opaque = false,
+      coldStart = false,
       ...viewProps
     } = this.props;
     return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
       collapsable: false,
       nativeID: `${this._nativeId}`,
       debug: debug,
-      opaque: opaque
+      opaque: opaque,
+      coldStart: coldStart
     }, viewProps));
   }
 }

package/lib/module/views/SkiaPictureView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","SkiaPictureViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","SkiaPictureView","Component","constructor","props","_defineProperty","_nativeId","current","picture","onSize","assertSkiaViewApi","setJsiProperty","tick","nativeId","componentDidUpdate","prevProps","componentWillUnmount","requestId","cancelAnimationFrame","redraw","mode","requestAnimationFrame","bind","makeImageSnapshot","rect","requestRedraw","render","debug","opaque","viewProps","createElement","_extends","collapsable","nativeID","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\ninterface SkiaPictureViewProps extends SkiaPictureViewNativeProps {\n mode?: \"default\" \| \"continuous\";\n}\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n private requestId = 0;\n\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 this.tick();\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 this.tick();\n }\n\n componentWillUnmount() {\n if (this.requestId) {\n cancelAnimationFrame(this.requestId);\n }\n }\n\n private tick() {\n this.redraw();\n if (this.props.mode === \"continuous\") {\n this.requestId = requestAnimationFrame(this.tick.bind(this));\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 render() {\n const { mode, debug = false, opaque = false, ...viewProps } = this.props;\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n debug={debug}\n opaque={opaque}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null \|\|\n SkiaViewApi.setJsiProperty === null \|\|\n SkiaViewApi.requestRedraw === null \|\|\n SkiaViewApi.makeImageSnapshot === null\n ) {\n throw Error(\"Skia View Api was not found.\");\n }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,8BAA8B,MAAM,yCAAyC;AAEpF,SAASC,WAAW,QAAQ,OAAO;AAEnC,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAMC,qBAAqB,GAAGH,8BAA8B;~~AAM5D~~,OAAO,MAAMI,eAAe,SAASL,KAAK,CAACM,SAAS,CAAuB;EAGzEC,WAAWA,CAACC,KAA2B,EAAE;IACvC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,oBAHK,CAAC;IAAAA,eAAA;IAInB,IAAI,CAACC,SAAS,GAAGP,gBAAgB,CAACQ,OAAO,EAAE;IAC3C,MAAM;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAGL,KAAK;IACjC,IAAII,OAAO,EAAE;MACXE,iBAAiB,CAAC,CAAC;MACnBZ,WAAW,CAACa,cAAc,CAAC,IAAI,CAACL,SAAS,EAAE,SAAS,EAAEE,OAAO,CAAC;IAChE;IACA,IAAIC,MAAM,EAAE;MACVC,iBAAiB,CAAC,CAAC;MACnBZ,WAAW,CAACa,cAAc,CAAC,IAAI,CAACL,SAAS,EAAE,QAAQ,EAAEG,MAAM,CAAC;IAC9D;IACA,IAAI,CAACG,IAAI,CAAC,CAAC;EACb;EAIA,IAAWC,QAAQA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACP,SAAS;EACvB;EAEAQ,kBAAkBA,CAACC,SAA+B,EAAE;IAClD,MAAM;MAAEP,OAAO;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACL,KAAK;IACtC,IAAII,OAAO,KAAKO,SAAS,CAACP,OAAO,EAAE;MACjCE,iBAAiB,CAAC,CAAC;MACnBZ,WAAW,CAACa,cAAc,CAAC,IAAI,CAACL,SAAS,EAAE,SAAS,EAAEE,OAAO,CAAC;IAChE;IACA,IAAIC,MAAM,KAAKM,SAAS,CAACN,MAAM,EAAE;MAC/BC,iBAAiB,CAAC,CAAC;MACnBZ,WAAW,CAACa,cAAc,CAAC,IAAI,CAACL,SAAS,EAAE,QAAQ,EAAEG,MAAM,CAAC;IAC9D;IACA,IAAI,CAACG,IAAI,CAAC,CAAC;EACb;EAEAI,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACC,SAAS,EAAE;MAClBC,oBAAoB,CAAC,IAAI,CAACD,SAAS,CAAC;IACtC;EACF;EAEQL,IAAIA,CAAA,EAAG;IACb,IAAI,CAACO,MAAM,CAAC,CAAC;IACb,IAAI,IAAI,CAACf,KAAK,CAACgB,IAAI,KAAK,YAAY,EAAE;MACpC,IAAI,CAACH,SAAS,GAAGI,qBAAqB,CAAC,IAAI,CAACT,IAAI,CAACU,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9D;EACF;;EAEA;AACF;AACA;AACA;AACA;EACSC,iBAAiBA,CAACC,IAAa,EAAE;IACtCd,iBAAiB,CAAC,CAAC;IACnB,OAAOZ,WAAW,CAACyB,iBAAiB,CAAC,IAAI,CAACjB,SAAS,EAAEkB,IAAI,CAAC;EAC5D;;EAEA;AACF;AACA;EACSL,MAAMA,CAAA,EAAG;IACdT,iBAAiB,CAAC,CAAC;IACnBZ,WAAW,CAAC2B,aAAa,CAAC,IAAI,CAACnB,SAAS,CAAC;EAC3C;EAEAoB,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEN,IAAI;MAAEO,KAAK,GAAG,KAAK;MAAEC,MAAM,GAAG,KAAK;MAAE,GAAGC;IAAU,CAAC,GAAG,IAAI,~~CAACzB~~,KAAK;~~IACxE~~,oBACER,KAAA,~~CAAAkC~~,aAAA,~~CAAC9B~~,qBAAqB,~~EAAA+B~~,QAAA;MACpBC,WAAW,EAAE,KAAM;MACnBC,QAAQ,EAAE,GAAG,IAAI,~~CAAC3B~~,SAAS,EAAG;MAC9BqB,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA;~~IAAO~~,~~GACXC~~,SAAS,CACd,CAAC;EAEN;AACF;AAEA,~~MAAMnB~~,iBAAiB,GAAGA,CAAA,KAAM;EAC9B,IACEZ,WAAW,KAAK,IAAI,IACpBA,WAAW,CAACa,cAAc,KAAK,IAAI,IACnCb,WAAW,CAAC2B,aAAa,KAAK,IAAI,IAClC3B,WAAW,CAACyB,iBAAiB,KAAK,IAAI,EACtC;IACA,~~MAAMW~~,KAAK,CAAC,8BAA8B,CAAC;EAC7C;AACF,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","SkiaPictureViewNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","SkiaPictureView","Component","constructor","props","_defineProperty","_nativeId","current","picture","onSize","assertSkiaViewApi","setJsiProperty","tick","nativeId","componentDidUpdate","prevProps","componentWillUnmount","requestId","cancelAnimationFrame","redraw","mode","requestAnimationFrame","bind","makeImageSnapshot","rect","requestRedraw","render","debug","opaque","coldStart","viewProps","createElement","_extends","collapsable","nativeID","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkRect } from \"../skia/types\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\ninterface SkiaPictureViewProps extends SkiaPictureViewNativeProps {\n mode?: \"default\" \| \"continuous\";\n coldStart?: boolean;\n}\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n private requestId = 0;\n\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 this.tick();\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 this.tick();\n }\n\n componentWillUnmount() {\n if (this.requestId) {\n cancelAnimationFrame(this.requestId);\n }\n }\n\n private tick() {\n this.redraw();\n if (this.props.mode === \"continuous\") {\n this.requestId = requestAnimationFrame(this.tick.bind(this));\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 render() {\n const { mode, debug = false, opaque = false, coldStart = false, ...viewProps } = this.props;\n return (\n <NativeSkiaPictureView\n collapsable={false}\n nativeID={`${this._nativeId}`}\n debug={debug}\n opaque={opaque}\n coldStart={coldStart}\n {...viewProps}\n />\n );\n }\n}\n\nconst assertSkiaViewApi = () => {\n if (\n SkiaViewApi === null \|\|\n SkiaViewApi.setJsiProperty === 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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","ignoreList":[]}

package/lib/module/views/SkiaPictureView.web.js CHANGED Viewed

@@ -7,6 +7,17 @@ import React, { useRef, useEffect, useCallback, useImperativeHandle, forwardRef
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { Platform } from "../Platform";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
+const dp2Pixel = (pd, rect) => {
+  if (!rect) {
+    return undefined;
+  }
+  return {
+    x: rect.x * pd,
+    y: rect.y * pd,
+    width: rect.width * pd,
+    height: rect.height * pd
+  };
+};
 class WebGLRenderer {
   constructor(canvas, pd) {
     this.canvas = canvas;
@@ -22,7 +33,7 @@ class WebGLRenderer {
     canvas.clear(CanvasKit.TRANSPARENT);
     this.draw(picture);
     this.surface.ref.flush();
-    return this.surface.makeImageSnapshot(rect);
+    return this.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
   }
   onResize() {
     const {
@@ -143,7 +154,7 @@ class StaticWebGLRenderer {
         tempCanvas
       } = renderResult;
       try {
-        this.cachedImage = surface.makeImageSnapshot(rect);
+        this.cachedImage = surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
       } catch (error) {
         console.error("Error creating image snapshot:", error);
       } finally {

package/lib/module/views/SkiaPictureView.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useRef","useEffect","useCallback","useImperativeHandle","forwardRef","JsiSkSurface","Platform","SkiaViewNativeId","WebGLRenderer","constructor","canvas","pd","_defineProperty","onResize","makeImageSnapshot","picture","rect","surface","getCanvas","clear","CanvasKit","TRANSPARENT","draw","ref","flush","width","clientWidth","height","clientHeight","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","Float32Array","of","save","scale","drawPicture","restore","dispose","_this$canvas","getExtension","loseContext","delete","StaticWebGLRenderer","cachedImage","renderPictureToSurface","tempCanvas","OffscreenCanvas","webglSurface","skiaCanvas","error","cleanupWebGLContext","renderResult","ctx2d","drawImage","console","_this$cachedImage","PixelRatio","SkiaPictureView","props","canvasRef","renderer","redrawRequestsRef","requestIdRef","pictureRef","onLayout","redraw","current","getSize","_canvasRef$current","_canvasRef$current2","setPicture","newPicture","tick","requestAnimationFrame","onLayoutEvent","evt","__destroyWebGLContextAfterRender","_props$nativeID","nativeID","global","SkiaViewApi","registerView","cancelAnimationFrame","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["/* global HTMLCanvasElement /\nimport React, {\n useRef,\n useEffect,\n useCallback,\n useImperativeHandle,\n forwardRef,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkPicture, SkImage } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\nimport type { ISkiaViewApiWeb } from \"../specs/NativeSkiaModule.web\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\ninterface Renderer {\n onResize(): void;\n draw(picture: SkPicture): void;\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null;\n dispose(): void;\n}\n\nclass WebGLRenderer implements Renderer {\n private surface: JsiSkSurface \| null = null;\n\n constructor(\n private canvas: HTMLCanvasElement,\n private pd: number\n ) {\n this.onResize();\n }\n\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null {\n if (!this.surface) {\n return null;\n }\n const canvas = this.surface.getCanvas();\n canvas!.clear(CanvasKit.TRANSPARENT);\n this.draw(picture);\n this.surface.ref.flush();\n return this.surface.makeImageSnapshot(rect);\n }\n\n onResize() {\n const { canvas, pd } = this;\n canvas.width = canvas.clientWidth pd;\n canvas.height = canvas.clientHeight * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n const ctx = canvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this.surface = new JsiSkSurface(CanvasKit, surface);\n }\n\n draw(picture: SkPicture) {\n if (this.surface) {\n const canvas = this.surface.getCanvas();\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n canvas.restore();\n this.surface.ref.flush();\n }\n }\n\n dispose(): void {\n if (this.surface) {\n this.canvas\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n this.surface.ref.delete();\n this.surface = null;\n }\n }\n}\n\nclass StaticWebGLRenderer implements Renderer {\n private cachedImage: SkImage \| null = null;\n\n constructor(\n private canvas: HTMLCanvasElement,\n private pd: number\n ) {}\n\n onResize(): void {\n this.cachedImage = null;\n }\n\n private renderPictureToSurface(\n picture: SkPicture\n ): { surface: JsiSkSurface; tempCanvas: OffscreenCanvas } \| null {\n const tempCanvas = new OffscreenCanvas(\n this.canvas.clientWidth * this.pd,\n this.canvas.clientHeight * this.pd\n );\n\n let surface: JsiSkSurface \| null = null;\n\n try {\n const webglSurface = CanvasKit.MakeWebGLCanvasSurface(tempCanvas);\n const ctx = tempCanvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\n\n if (!webglSurface) {\n throw new Error(\"Could not create WebGL surface\");\n }\n\n surface = new JsiSkSurface(CanvasKit, webglSurface);\n\n const skiaCanvas = surface.getCanvas();\n skiaCanvas.clear(Float32Array.of(0, 0, 0, 0));\n skiaCanvas.save();\n skiaCanvas.scale(this.pd, this.pd);\n skiaCanvas.drawPicture(picture);\n skiaCanvas.restore();\n surface.ref.flush();\n\n return { surface, tempCanvas };\n } catch (error) {\n if (surface) {\n surface.ref.delete();\n }\n this.cleanupWebGLContext(tempCanvas);\n return null;\n }\n }\n\n private cleanupWebGLContext(tempCanvas: OffscreenCanvas): void {\n const ctx = tempCanvas.getContext(\"webgl2\");\n if (ctx) {\n const loseContext = ctx.getExtension(\"WEBGL_lose_context\");\n if (loseContext) {\n loseContext.loseContext();\n }\n }\n }\n\n draw(picture: SkPicture): void {\n const renderResult = this.renderPictureToSurface(picture);\n if (!renderResult) {\n return;\n }\n const { tempCanvas } = renderResult;\n const ctx2d = this.canvas.getContext(\"2d\");\n if (!ctx2d) {\n throw new Error(\"Could not get 2D context\");\n }\n\n // Set canvas dimensions to match pixel density\n this.canvas.width = this.canvas.clientWidth * this.pd;\n this.canvas.height = this.canvas.clientHeight * this.pd;\n\n // Draw the tempCanvas scaled down to the display size\n ctx2d.drawImage(\n tempCanvas,\n 0,\n 0,\n tempCanvas.width,\n tempCanvas.height,\n 0,\n 0,\n this.canvas.clientWidth * this.pd,\n this.canvas.clientHeight * this.pd\n );\n\n this.cleanupWebGLContext(tempCanvas);\n }\n\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null {\n if (!this.cachedImage) {\n const renderResult = this.renderPictureToSurface(picture);\n if (!renderResult) {\n return null;\n }\n\n const { surface, tempCanvas } = renderResult;\n\n try {\n this.cachedImage = surface.makeImageSnapshot(rect);\n } catch (error) {\n console.error(\"Error creating image snapshot:\", error);\n } finally {\n surface.ref.delete();\n this.cleanupWebGLContext(tempCanvas);\n }\n }\n\n return this.cachedImage;\n }\n\n dispose(): void {\n this.cachedImage?.dispose();\n this.cachedImage = null;\n }\n}\n\nconst pd = Platform.PixelRatio;\n\nexport interface SkiaPictureViewHandle {\n setPicture(picture: SkPicture): void;\n getSize(): { width: number; height: number };\n redraw(): void;\n makeImageSnapshot(rect?: SkRect): SkImage \| null;\n}\n\nexport const SkiaPictureView = forwardRef<\n SkiaPictureViewHandle,\n SkiaPictureViewNativeProps\n>((props, ref) => {\n const canvasRef = useRef<HTMLCanvasElement \| null>(null);\n const renderer = useRef<Renderer \| null>(null);\n const redrawRequestsRef = useRef(0);\n const requestIdRef = useRef(0);\n const pictureRef = useRef<SkPicture \| null>(null);\n\n const { picture, onLayout } = props;\n\n const redraw = useCallback(() => {\n redrawRequestsRef.current++;\n }, []);\n\n const getSize = useCallback(() => {\n return {\n width: canvasRef.current?.clientWidth \|\| 0,\n height: canvasRef.current?.clientHeight \|\| 0,\n };\n }, []);\n\n const setPicture = useCallback(\n (newPicture: SkPicture) => {\n pictureRef.current = newPicture;\n redraw();\n },\n [redraw]\n );\n\n const makeImageSnapshot = useCallback((rect?: SkRect) => {\n if (renderer.current && pictureRef.current) {\n return renderer.current.makeImageSnapshot(pictureRef.current, rect);\n }\n return null;\n }, []);\n\n const tick = useCallback(() => {\n if (redrawRequestsRef.current > 0) {\n redrawRequestsRef.current = 0;\n if (renderer.current && pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }\n requestIdRef.current = requestAnimationFrame(tick);\n }, []);\n\n const onLayoutEvent = useCallback(\n (evt: LayoutChangeEvent) => {\n const canvas = canvasRef.current;\n if (canvas) {\n renderer.current =\n props.__destroyWebGLContextAfterRender === true\n ? new StaticWebGLRenderer(canvas, pd)\n : new WebGLRenderer(canvas, pd);\n if (pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }\n if (onLayout) {\n onLayout(evt);\n }\n },\n [onLayout, props.__destroyWebGLContextAfterRender]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n setPicture,\n getSize,\n redraw,\n makeImageSnapshot,\n }),\n [setPicture, getSize, redraw, makeImageSnapshot]\n );\n\n useEffect(() => {\n const nativeID = props.nativeID ?? `${SkiaViewNativeId.current++}`;\n (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, {\n setPicture,\n getSize,\n redraw,\n makeImageSnapshot,\n } as SkiaPictureViewHandle);\n }, [setPicture, getSize, redraw, makeImageSnapshot, props.nativeID]);\n\n useEffect(() => {\n if (props.picture) {\n setPicture(props.picture);\n }\n }, [setPicture, props.picture]);\n\n useEffect(() => {\n tick();\n return () => {\n cancelAnimationFrame(requestIdRef.current);\n if (renderer.current) {\n renderer.current.dispose();\n renderer.current = null;\n }\n };\n }, [tick]);\n\n useEffect(() => {\n if (renderer.current && pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }, [picture, redraw]);\n\n const { debug = false, ...viewProps } = props;\n return (\n <Platform.View {...viewProps} onLayout={onLayoutEvent}>\n <canvas ref={canvasRef} style={{ display: \"flex\", flex: 1 }} />\n </Platform.View>\n );\n});\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["React","useRef","useEffect","useCallback","useImperativeHandle","forwardRef","JsiSkSurface","Platform","SkiaViewNativeId","dp2Pixel","pd","rect","undefined","x","y","width","height","WebGLRenderer","constructor","canvas","_defineProperty","onResize","makeImageSnapshot","picture","surface","getCanvas","clear","CanvasKit","TRANSPARENT","draw","ref","flush","clientWidth","clientHeight","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","Float32Array","of","save","scale","drawPicture","restore","dispose","_this$canvas","getExtension","loseContext","delete","StaticWebGLRenderer","cachedImage","renderPictureToSurface","tempCanvas","OffscreenCanvas","webglSurface","skiaCanvas","error","cleanupWebGLContext","renderResult","ctx2d","drawImage","console","_this$cachedImage","PixelRatio","SkiaPictureView","props","canvasRef","renderer","redrawRequestsRef","requestIdRef","pictureRef","onLayout","redraw","current","getSize","_canvasRef$current","_canvasRef$current2","setPicture","newPicture","tick","requestAnimationFrame","onLayoutEvent","evt","__destroyWebGLContextAfterRender","_props$nativeID","nativeID","global","SkiaViewApi","registerView","cancelAnimationFrame","debug","viewProps","createElement","View","_extends","style","display","flex"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["/* global HTMLCanvasElement /\nimport React, {\n useRef,\n useEffect,\n useCallback,\n useImperativeHandle,\n forwardRef,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkPicture, SkImage } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\nimport type { ISkiaViewApiWeb } from \"../specs/NativeSkiaModule.web\";\n\nimport type { SkiaPictureViewNativeProps } from \"./types\";\nimport { SkiaViewNativeId } from \"./SkiaViewNativeId\";\n\nconst dp2Pixel = (pd: number, rect?: SkRect) => {\n if (!rect) {\n return undefined;\n }\n return {\n x: rect.x pd,\n y: rect.y * pd,\n width: rect.width * pd,\n height: rect.height * pd,\n };\n};\n\ninterface Renderer {\n onResize(): void;\n draw(picture: SkPicture): void;\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null;\n dispose(): void;\n}\n\nclass WebGLRenderer implements Renderer {\n private surface: JsiSkSurface \| null = null;\n\n constructor(\n private canvas: HTMLCanvasElement,\n private pd: number\n ) {\n this.onResize();\n }\n\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null {\n if (!this.surface) {\n return null;\n }\n const canvas = this.surface.getCanvas();\n canvas!.clear(CanvasKit.TRANSPARENT);\n this.draw(picture);\n this.surface.ref.flush();\n return this.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));\n }\n\n onResize() {\n const { canvas, pd } = this;\n canvas.width = canvas.clientWidth * pd;\n canvas.height = canvas.clientHeight * pd;\n const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n const ctx = canvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\n if (!surface) {\n throw new Error(\"Could not create surface\");\n }\n this.surface = new JsiSkSurface(CanvasKit, surface);\n }\n\n draw(picture: SkPicture) {\n if (this.surface) {\n const canvas = this.surface.getCanvas();\n canvas.clear(Float32Array.of(0, 0, 0, 0));\n canvas.save();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n canvas.restore();\n this.surface.ref.flush();\n }\n }\n\n dispose(): void {\n if (this.surface) {\n this.canvas\n ?.getContext(\"webgl2\")\n ?.getExtension(\"WEBGL_lose_context\")\n ?.loseContext();\n this.surface.ref.delete();\n this.surface = null;\n }\n }\n}\n\nclass StaticWebGLRenderer implements Renderer {\n private cachedImage: SkImage \| null = null;\n\n constructor(\n private canvas: HTMLCanvasElement,\n private pd: number\n ) {}\n\n onResize(): void {\n this.cachedImage = null;\n }\n\n private renderPictureToSurface(\n picture: SkPicture\n ): { surface: JsiSkSurface; tempCanvas: OffscreenCanvas } \| null {\n const tempCanvas = new OffscreenCanvas(\n this.canvas.clientWidth * this.pd,\n this.canvas.clientHeight * this.pd\n );\n\n let surface: JsiSkSurface \| null = null;\n\n try {\n const webglSurface = CanvasKit.MakeWebGLCanvasSurface(tempCanvas);\n const ctx = tempCanvas.getContext(\"webgl2\");\n if (ctx) {\n ctx.drawingBufferColorSpace = \"display-p3\";\n }\n\n if (!webglSurface) {\n throw new Error(\"Could not create WebGL surface\");\n }\n\n surface = new JsiSkSurface(CanvasKit, webglSurface);\n\n const skiaCanvas = surface.getCanvas();\n skiaCanvas.clear(Float32Array.of(0, 0, 0, 0));\n skiaCanvas.save();\n skiaCanvas.scale(this.pd, this.pd);\n skiaCanvas.drawPicture(picture);\n skiaCanvas.restore();\n surface.ref.flush();\n\n return { surface, tempCanvas };\n } catch (error) {\n if (surface) {\n surface.ref.delete();\n }\n this.cleanupWebGLContext(tempCanvas);\n return null;\n }\n }\n\n private cleanupWebGLContext(tempCanvas: OffscreenCanvas): void {\n const ctx = tempCanvas.getContext(\"webgl2\");\n if (ctx) {\n const loseContext = ctx.getExtension(\"WEBGL_lose_context\");\n if (loseContext) {\n loseContext.loseContext();\n }\n }\n }\n\n draw(picture: SkPicture): void {\n const renderResult = this.renderPictureToSurface(picture);\n if (!renderResult) {\n return;\n }\n const { tempCanvas } = renderResult;\n const ctx2d = this.canvas.getContext(\"2d\");\n if (!ctx2d) {\n throw new Error(\"Could not get 2D context\");\n }\n\n // Set canvas dimensions to match pixel density\n this.canvas.width = this.canvas.clientWidth * this.pd;\n this.canvas.height = this.canvas.clientHeight * this.pd;\n\n // Draw the tempCanvas scaled down to the display size\n ctx2d.drawImage(\n tempCanvas,\n 0,\n 0,\n tempCanvas.width,\n tempCanvas.height,\n 0,\n 0,\n this.canvas.clientWidth * this.pd,\n this.canvas.clientHeight * this.pd\n );\n\n this.cleanupWebGLContext(tempCanvas);\n }\n\n makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage \| null {\n if (!this.cachedImage) {\n const renderResult = this.renderPictureToSurface(picture);\n if (!renderResult) {\n return null;\n }\n\n const { surface, tempCanvas } = renderResult;\n\n try {\n this.cachedImage = surface.makeImageSnapshot(dp2Pixel(this.pd, rect));\n } catch (error) {\n console.error(\"Error creating image snapshot:\", error);\n } finally {\n surface.ref.delete();\n this.cleanupWebGLContext(tempCanvas);\n }\n }\n\n return this.cachedImage;\n }\n\n dispose(): void {\n this.cachedImage?.dispose();\n this.cachedImage = null;\n }\n}\n\nconst pd = Platform.PixelRatio;\n\nexport interface SkiaPictureViewHandle {\n setPicture(picture: SkPicture): void;\n getSize(): { width: number; height: number };\n redraw(): void;\n makeImageSnapshot(rect?: SkRect): SkImage \| null;\n}\n\nexport const SkiaPictureView = forwardRef<\n SkiaPictureViewHandle,\n SkiaPictureViewNativeProps\n>((props, ref) => {\n const canvasRef = useRef<HTMLCanvasElement \| null>(null);\n const renderer = useRef<Renderer \| null>(null);\n const redrawRequestsRef = useRef(0);\n const requestIdRef = useRef(0);\n const pictureRef = useRef<SkPicture \| null>(null);\n\n const { picture, onLayout } = props;\n\n const redraw = useCallback(() => {\n redrawRequestsRef.current++;\n }, []);\n\n const getSize = useCallback(() => {\n return {\n width: canvasRef.current?.clientWidth \|\| 0,\n height: canvasRef.current?.clientHeight \|\| 0,\n };\n }, []);\n\n const setPicture = useCallback(\n (newPicture: SkPicture) => {\n pictureRef.current = newPicture;\n redraw();\n },\n [redraw]\n );\n\n const makeImageSnapshot = useCallback((rect?: SkRect) => {\n if (renderer.current && pictureRef.current) {\n return renderer.current.makeImageSnapshot(pictureRef.current, rect);\n }\n return null;\n }, []);\n\n const tick = useCallback(() => {\n if (redrawRequestsRef.current > 0) {\n redrawRequestsRef.current = 0;\n if (renderer.current && pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }\n requestIdRef.current = requestAnimationFrame(tick);\n }, []);\n\n const onLayoutEvent = useCallback(\n (evt: LayoutChangeEvent) => {\n const canvas = canvasRef.current;\n if (canvas) {\n renderer.current =\n props.__destroyWebGLContextAfterRender === true\n ? new StaticWebGLRenderer(canvas, pd)\n : new WebGLRenderer(canvas, pd);\n if (pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }\n if (onLayout) {\n onLayout(evt);\n }\n },\n [onLayout, props.__destroyWebGLContextAfterRender]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n setPicture,\n getSize,\n redraw,\n makeImageSnapshot,\n }),\n [setPicture, getSize, redraw, makeImageSnapshot]\n );\n\n useEffect(() => {\n const nativeID = props.nativeID ?? `${SkiaViewNativeId.current++}`;\n (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, {\n setPicture,\n getSize,\n redraw,\n makeImageSnapshot,\n } as SkiaPictureViewHandle);\n }, [setPicture, getSize, redraw, makeImageSnapshot, props.nativeID]);\n\n useEffect(() => {\n if (props.picture) {\n setPicture(props.picture);\n }\n }, [setPicture, props.picture]);\n\n useEffect(() => {\n tick();\n return () => {\n cancelAnimationFrame(requestIdRef.current);\n if (renderer.current) {\n renderer.current.dispose();\n renderer.current = null;\n }\n };\n }, [tick]);\n\n useEffect(() => {\n if (renderer.current && pictureRef.current) {\n renderer.current.draw(pictureRef.current);\n }\n }, [picture, redraw]);\n\n const { debug = false, ...viewProps } = props;\n return (\n <Platform.View {...viewProps} onLayout={onLayoutEvent}>\n <canvas ref={canvasRef} style={{ display: \"flex\", flex: 1 }} />\n </Platform.View>\n );\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/sksg/Container.native.d.ts CHANGED Viewed

@@ -4,12 +4,8 @@ import _StaticContainer = require("./StaticContainer");
 declare class NativeReanimatedContainer extends _StaticContainer.Container {
     constructor(Skia: any, nativeId: any);
     nativeId: any;
-    recorderA: _ReanimatedRecorder.ReanimatedRecorder;
-    recorderB: _ReanimatedRecorder.ReanimatedRecorder;
-    currentRecorder: _ReanimatedRecorder.ReanimatedRecorder;
     picture: any;
     redraw(): void;
     mapperId: any;
 }
-import _ReanimatedRecorder = require("./Recorder/ReanimatedRecorder");
 export {};

package/lib/typescript/lib/module/sksg/Container.native.d.ts CHANGED Viewed

@@ -3,13 +3,9 @@ import { StaticContainer } from "./StaticContainer";
 declare class NativeReanimatedContainer extends Container {
     constructor(Skia: any, nativeId: any);
     nativeId: any;
-    recorderA: ReanimatedRecorder;
-    recorderB: ReanimatedRecorder;
-    currentRecorder: ReanimatedRecorder;
     picture: any;
     redraw(): void;
     mapperId: any;
 }
 import { Container } from "./StaticContainer";
-import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 export {};

package/lib/typescript/src/sksg/Container.native.d.ts CHANGED Viewed

@@ -6,9 +6,6 @@ declare class NativeReanimatedContainer extends Container {
     private nativeId;
     private mapperId;
     private picture;
-    private recorderA;
-    private recorderB;
-    private currentRecorder;
     constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export interface NativeProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     colorSpace?: string;
+    coldStart?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/views/SkiaPictureView.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { SkRect } from "../skia/types";
 import type { SkiaPictureViewNativeProps } from "./types";
 interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
     mode?: "default" | "continuous";
+    coldStart?: boolean;
 }
 export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     private requestId;

package/package.json CHANGED Viewed

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "skia": {
     "version": "m142",
     "checksums": {

package/src/renderer/Canvas.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import type {
   View,
   ViewProps,
 } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
+import type { AnimatedRef, SharedValue } from "react-native-reanimated";
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
@@ -38,6 +38,11 @@ export interface CanvasRef extends FC<CanvasProps> {
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
+const measure = !HAS_REANIMATED_3 ? null : Rea.measure;
+const useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3
+  ? useRef
+  : Rea.useAnimatedRef;
 export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
   const ourRef = useCanvasRef();
@@ -84,7 +89,7 @@ export const Canvas = ({
       "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size"
     );
   }
-  const viewRef = useRef<View>(null);
+  const viewRef = useCanvasRefPriv(null);
   // Native ID
   const nativeId = useMemo(() => {
     return SkiaViewNativeId.current++;
@@ -95,20 +100,16 @@ export const Canvas = ({
   useReanimatedFrame(() => {
     "worklet";
-  }, !!onSize);
-  useEffect(() => {
-    if (onSize) {
-      Rea.runOnUI(() => {
-        (global as Record<string, unknown>)[`__onSize_${nativeId}`] = onSize;
-      })();
-      return () => {
-        Rea.runOnUI(() => {
-          delete (global as Record<string, unknown>)[`__onSize_${nativeId}`];
-        })();
-      };
+    if (onSize && measure) {
+      const result = measure(viewRef as AnimatedRef<View>);
+      if (result) {
+        const { width, height } = result;
+        if (onSize.value.width !== width || onSize.value.height !== height) {
+          onSize.value = { width, height };
+        }
+      }
     }
-    return undefined;
-  }, [onSize, nativeId]);
+  }, !!onSize);
   // Render effects
   useLayoutEffect(() => {
@@ -159,7 +160,6 @@ export const Canvas = ({
     },
     [onLayout, onSize]
   );
   return (
     <SkiaPictureViewNativeComponent
       ref={viewRef}
@@ -168,7 +168,10 @@ export const Canvas = ({
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
-      onLayout={onLayoutWeb}
+      coldStart={false}
+      onLayout={
+        Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout
+      }
       {...viewProps}
     />
   );

package/src/sksg/Container.native.ts CHANGED Viewed

@@ -27,18 +27,12 @@ const nativeDrawOnscreen = (
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
   private picture: SkPicture;
-  private recorderA: ReanimatedRecorder;
-  private recorderB: ReanimatedRecorder;
-  private currentRecorder: ReanimatedRecorder;
   constructor(
     Skia: Skia,
     private nativeId: number
   ) {
     super(Skia);
-    this.recorderA = new ReanimatedRecorder(Skia);
-    this.recorderB = new ReanimatedRecorder(Skia);
-    this.currentRecorder = this.recorderA;
     this.picture = Skia.Picture.MakePicture(null)!;
   }
@@ -49,21 +43,18 @@ class NativeReanimatedContainer extends Container {
     if (this.unmounted) {
       return;
     }
-    // Swap to the next recorder (double buffering)
-    const recorder = this.currentRecorder;
-    this.currentRecorder =
-      this.currentRecorder === this.recorderA ? this.recorderB : this.recorderA;
-    const { nativeId, picture } = this;
-    recorder.reset();
+    const recorder = new ReanimatedRecorder(this.Skia);
+    const { nativeId, picture, Skia } = this;
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI(() => {
+    // Draw first frame
+    Rea.executeOnUIRuntimeSync(() => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
+      const firstPicture = Skia.Picture.MakePicture(null)!;
+      nativeDrawOnscreen(nativeId, sharedRecorder, firstPicture);
     })();
+    // Animate
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";

package/src/sksg/Reconciler.ts CHANGED Viewed

@@ -27,12 +27,13 @@ export class SkiaSGRoot {
     public Skia: Skia,
     nativeId = -1
   ) {
+    const strictMode = false;
     this.container = createContainer(Skia, nativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
       null,
-      true,
+      strictMode,
       null,
       "",
       console.error,
@@ -48,7 +49,6 @@ export class SkiaSGRoot {
   private updateContainer(element: ReactNode) {
     return new Promise((resolve) => {
       skiaReconciler.updateContainer(element, this.root, null, () => {
-        debug("updateContainer");
         resolve(true);
       });
     });

package/src/specs/SkiaPictureViewNativeComponent.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   colorSpace?: string;
+  coldStart?: boolean;
 }
 // eslint-disable-next-line import/no-default-export

package/src/views/SkiaPictureView.tsx CHANGED Viewed

@@ -11,6 +11,7 @@ const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
   mode?: "default" | "continuous";
+  coldStart?: boolean;
 }
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
@@ -82,13 +83,14 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
   render() {
-    const { mode, debug = false, opaque = false, ...viewProps } = this.props;
+    const { mode, debug = false, opaque = false, coldStart = false, ...viewProps } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
         debug={debug}
         opaque={opaque}
+        coldStart={coldStart}
         {...viewProps}
       />
     );

package/src/views/SkiaPictureView.web.tsx CHANGED Viewed

@@ -16,6 +16,18 @@ import type { ISkiaViewApiWeb } from "../specs/NativeSkiaModule.web";
 import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
+const dp2Pixel = (pd: number, rect?: SkRect) => {
+  if (!rect) {
+    return undefined;
+  }
+  return {
+    x: rect.x * pd,
+    y: rect.y * pd,
+    width: rect.width * pd,
+    height: rect.height * pd,
+  };
+};
 interface Renderer {
   onResize(): void;
   draw(picture: SkPicture): void;
@@ -41,7 +53,7 @@ class WebGLRenderer implements Renderer {
     canvas!.clear(CanvasKit.TRANSPARENT);
     this.draw(picture);
     this.surface.ref.flush();
-    return this.surface.makeImageSnapshot(rect);
+    return this.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
   }
   onResize() {
@@ -187,7 +199,7 @@ class StaticWebGLRenderer implements Renderer {
       const { surface, tempCanvas } = renderResult;
       try {
-        this.cachedImage = surface.makeImageSnapshot(rect);
+        this.cachedImage = surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
       } catch (error) {
         console.error("Error creating image snapshot:", error);
       } finally {