@shopify/react-native-skia 0.1.122 → 0.1.123

package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm

@@ -19,19 +19,34 @@ sk_sp<GrDirectContext> RNSkDrawViewImpl::_skContext = nullptr;
 
 RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
   _context(context), RNSkia::RNSkDrawView(context) {
-    
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
-    _layer = [CAMetalLayer layer];
+  _layer = [CAMetalLayer layer];
 #pragma clang diagnostic pop
     
-    _layer.framebufferOnly = NO;
-    _layer.device = _device;
-    _layer.opaque = false;
-    _layer.contentsScale = _context->getPixelDensity();
-    _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
-    
-    setNativeDrawFunc(std::bind(&RNSkDrawViewImpl::drawFrame, this, std::placeholders::_1));
+  _layer.framebufferOnly = NO;
+  _layer.device = _device;
+  _layer.opaque = false;
+  _layer.contentsScale = _context->getPixelDensity();
+  _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
+}
+
+RNSkDrawViewImpl::~RNSkDrawViewImpl() {
+  if([[NSThread currentThread] isMainThread]) {
+    _layer = NULL;
+  } else {
+    __block auto tempLayer = _layer;
+    dispatch_async(dispatch_get_main_queue(), ^{
+      // By using the tempLayer variable in the block we capture it and it will be
+      // released after the block has finished. This way the CAMetalLayer dealloc will
+      // only be called on the main thread. Problem: this destructor might be called from
+      // releasing the RNSkDrawViewImpl from a thread capture (after dtor has started),
+      // which would cause the CAMetalLayer dealloc to be called on another thread which
+      // causes a crash.
+      // https://github.com/Shopify/react-native-skia/issues/398
+      tempLayer = tempLayer;
+    });
+  }
 }
 
 void RNSkDrawViewImpl::setSize(int width, int height) {
@@ -44,7 +59,7 @@ void RNSkDrawViewImpl::setSize(int width, int height) {
   requestRedraw();
 }
 
-void RNSkDrawViewImpl::drawFrame(const sk_sp<SkPicture> picture) {
+void RNSkDrawViewImpl::drawPicture(const sk_sp<SkPicture> picture) {
   if(_width == -1 && _height == -1) {
     return;
   }

package/ios/RNSkia-iOS/SkiaDrawView.mm

@@ -26,53 +26,59 @@
     _nativeId = 0;
     _debugMode = false;
     _drawingMode = RNSkia::RNSkDrawingMode::Default;
+    
     // Listen to notifications about module invalidation
+    __unsafe_unretained SkiaDrawView *weakSelf = self;
     auto nc = [NSNotificationCenter defaultCenter];
     [nc addObserverForName:RCTBridgeWillInvalidateModulesNotification
                     object:nil
                      queue:nil
                 usingBlock:^(NSNotification *notification){
       // Remove local variables
-      self->_manager = nullptr;                
+      if(weakSelf != nullptr) {
+        weakSelf->_manager = nullptr;
+      }
     }];
   }
   return self;
 }
 
-- (void)dealloc {
-  if(_manager != nullptr) {
-    _manager->unregisterSkiaDrawView(_nativeId);
-  }
-}
-
 #pragma mark Lifecycle
 
-- (void) willMoveToWindow:(UIWindow *)newWindow {
-  [super willMoveToWindow: newWindow];
-  
+- (void) willMoveToSuperview:(UIView *)newWindow {
   if (newWindow == NULL) {
     // Remove implementation view when the parent view is not set
     if(_impl != nullptr) {
+      [_impl->getLayer() removeFromSuperlayer];
+      
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaDrawView(_nativeId, nullptr);
       }
-      [_impl->getLayer() removeFromSuperlayer];
+      
       _impl = nullptr;
     }
   } else {
     // Create implementation view when the parent view is set
     if(_impl == nullptr && _manager != nullptr) {
       _impl = std::make_shared<RNSkDrawViewImpl>(_manager->getPlatformContext());
-      [self.layer addSublayer:_impl->getLayer()];
+      [self.layer addSublayer: _impl->getLayer()];
       if(_nativeId != 0) {
-        _manager->setSkiaDrawView(_nativeId, _impl.get());
+        _manager->setSkiaDrawView(_nativeId, _impl);
       }
       _impl->setDrawingMode(_drawingMode);
-      _impl->setShowDebugOverlays(_debugMode);      
+      _impl->setShowDebugOverlays(_debugMode);
     }
   }
 }
 
+- (void) dealloc {
+  auto nc = [NSNotificationCenter defaultCenter];
+  [nc removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
+  if(_manager != nullptr && _nativeId != 0) {
+    _manager->unregisterSkiaDrawView(_nativeId);
+  }
+}
+
 #pragma mark Layout
 
 - (void) layoutSubviews {
@@ -103,7 +109,7 @@
   _nativeId = nativeId;
   
   if(_impl != nullptr) {
-    _manager->registerSkiaDrawView(nativeId, _impl.get());
+    _manager->registerSkiaDrawView(nativeId, _impl);
   }
 }
 

package/lib/commonjs/renderer/Canvas.js

@@ -15,6 +15,8 @@ var _skia = require("../skia");
 
 var _useValue = require("../values/hooks/useValue");
 
+var _Paint = require("../skia/Paint/Paint");
+
 var _HostConfig = require("./HostConfig");
 
 var _processors = require("./processors");
@@ -109,9 +111,7 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
       };
     }
 
-    const paint = _skia.Skia.Paint();
-
-    paint.setAntiAlias(true);
+    const paint = (0, _Paint.SkiaPaint)();
     const ctx = {
       width,
       height,

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvasSize","canvas","Error","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","info","timestamp","touches","current","paint","Paint","setAntiAlias","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        paint.setAntiAlias(true);\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvasSize","canvas","Error","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","info","timestamp","touches","current","paint","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\nimport { SkiaPaint } from \"../skia/Paint/Paint\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = SkiaPaint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/commonjs/renderer/components/Paint.js

@@ -23,7 +23,7 @@ const usePaintRef = () => (0, _react.useRef)(null);
 
 exports.usePaintRef = usePaintRef;
 const Paint = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const paint = (0, _react.useMemo)(() => _skia.Skia.Paint(), []);
+  const paint = (0, _react.useMemo)(() => (0, _skia.SkiaPaint)(), []);
   (0, _react.useImperativeHandle)(ref, () => paint, [paint]);
   const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => (0, _processors.processPaint)(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({

package/lib/commonjs/renderer/components/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACJ,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}
+{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAM,sBAAd,EAA2B,EAA3B,CAAd;AACA,kCAAoBD,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAMC,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaJ,KAAb,EAAoBI,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACH,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { SkiaPaint } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => SkiaPaint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}

package/lib/commonjs/renderer/components/shapes/Path.js

@@ -11,6 +11,8 @@ var _nodes = require("../../nodes");
 
 var _processors = require("../../processors");
 
+var _skia = require("../../../skia");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -24,15 +26,21 @@ const onDraw = (0, _nodes.createDrawing)((_ref, _ref2) => {
     start,
     end,
     stroke,
+    fillType,
     ...pathProps
   } = _ref2;
   const hasStartOffset = start !== 0;
   const hasEndOffset = end !== 1;
   const hasStrokeOptions = stroke !== undefined;
-  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
+  const hasFillType = !!fillType;
+  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
   const pristinePath = (0, _processors.processPath)(pathProps.path);
   const path = willMutatePath ? pristinePath.copy() : pristinePath;
 
+  if (hasFillType) {
+    path.setFillType(_skia.FillType[(0, _processors.enumKey)(fillType)]);
+  }
+
   if (hasStrokeOptions) {
     path.stroke(stroke);
   }

package/lib/commonjs/renderer/components/shapes/Path.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","willMutatePath","pristinePath","path","copy","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;AAeA,MAAMA,MAAM,GAAG,0BACb,iBAA6D;AAAA,MAA5D;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA4D;AAAA,MAAzC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsB,OAAGC;AAAzB,GAAyC;AAC3D,QAAMC,cAAc,GAAGJ,KAAK,KAAK,CAAjC;AACA,QAAMK,YAAY,GAAGJ,GAAG,KAAK,CAA7B;AACA,QAAMK,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;AACA,QAAMC,cAAc,GAAGJ,cAAc,IAAIC,YAAlB,IAAkCC,gBAAzD;AACA,QAAMG,YAAY,GAAG,6BAAYN,SAAS,CAACO,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIH,gBAAJ,EAAsB;AACpBI,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIE,cAAc,IAAIC,YAAtB,EAAoC;AAClCK,IAAAA,IAAI,CAACE,IAAL,CAAUZ,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACe,QAAP,CAAgBH,IAAhB,EAAsBX,KAAtB;AACD,CAfY,CAAf;;AAkBO,MAAMe,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAElB;AAAnB,KAA+BkB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBhB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath } from \"../../processors\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}
+{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","fillType","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","path","copy","setFillType","FillType","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAQA;;AACA;;AACA;;;;;;AAgBA,MAAMA,MAAM,GAAG,0BACb,iBAAuE;AAAA,MAAtE;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAsE;AAAA,MAAnD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsBC,IAAAA,QAAtB;AAAgC,OAAGC;AAAnC,GAAmD;AACrE,QAAMC,cAAc,GAAGL,KAAK,KAAK,CAAjC;AACA,QAAMM,YAAY,GAAGL,GAAG,KAAK,CAA7B;AACA,QAAMM,gBAAgB,GAAGL,MAAM,KAAKM,SAApC;AACA,QAAMC,WAAW,GAAG,CAAC,CAACN,QAAtB;AACA,QAAMO,cAAc,GAClBL,cAAc,IAAIC,YAAlB,IAAkCC,gBAAlC,IAAsDE,WADxD;AAEA,QAAME,YAAY,GAAG,6BAAYP,SAAS,CAACQ,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIF,WAAJ,EAAiB;AACfG,IAAAA,IAAI,CAACE,WAAL,CAAiBC,eAAS,yBAAQZ,QAAR,CAAT,CAAjB;AACD;;AACD,MAAII,gBAAJ,EAAsB;AACpBK,IAAAA,IAAI,CAACV,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIG,cAAc,IAAIC,YAAtB,EAAoC;AAClCM,IAAAA,IAAI,CAACI,IAAL,CAAUhB,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACmB,QAAP,CAAgBL,IAAhB,EAAsBb,KAAtB;AACD,CApBY,CAAf;;AAuBO,MAAMmB,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAEtB;AAAnB,KAA+BsB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBpB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n  SkEnum,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath, enumKey } from \"../../processors\";\nimport { FillType } from \"../../../skia\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const hasFillType = !!fillType;\n    const willMutatePath =\n      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasFillType) {\n      path.setFillType(FillType[enumKey(fillType)]);\n    }\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}

package/lib/commonjs/renderer/processors/Paint.js

@@ -21,7 +21,8 @@ const processPaint = (paint, currentOpacity, _ref, children) => {
     strokeJoin,
     strokeCap,
     strokeMiter,
-    opacity
+    opacity,
+    antiAlias
   } = _ref;
 
   if (paintRef && paintRef.current) {
@@ -65,6 +66,10 @@ const processPaint = (paint, currentOpacity, _ref, children) => {
     paint.setAlphaf(opacity);
   }
 
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
+
   children.forEach(child => {
     if ((0, _skia.isShader)(child)) {
       paint.setShader(child);

package/lib/commonjs/renderer/processors/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.ts"],"names":["enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","children","paintRef","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","current","undefined","c","setShader","setColor","getColor","setBlendMode","BlendMode","setStyle","PaintStyle","setStrokeJoin","StrokeJoin","setStrokeCap","StrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","isImageFilter","length","setImageFilter","reverse","reduce","Skia","ImageFilter","MakeCompose"],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\n\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeJoin,\n  StrokeCap,\n  processColor,\n  isShader,\n  isMaskFilter,\n  isColorFilter,\n  isPathEffect,\n  isImageFilter,\n  Skia,\n} from \"../../skia\";\nimport type { SkPaint, Color, SkImageFilter } from \"../../skia\";\nimport type { DeclarationResult } from \"../nodes\";\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\n// TODO: rename to paint props?\nexport interface CustomPaintProps extends ChildrenProps {\n  paint?: RefObject<SkPaint>;\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n}\n\nexport const enumKey = <K extends string>(k: K) =>\n  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;\n\nexport const processPaint = (\n  paint: SkPaint,\n  currentOpacity: number,\n  {\n    paint: paintRef,\n    color,\n    blendMode,\n    style,\n    strokeWidth,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    opacity,\n  }: CustomPaintProps,\n  children: DeclarationResult[]\n) => {\n  if (paintRef && paintRef.current) {\n    return paintRef.current;\n  }\n  if (color !== undefined) {\n    const c = processColor(color, currentOpacity);\n    paint.setShader(null);\n    paint.setColor(c);\n  } else {\n    const c = processColor(paint.getColor(), currentOpacity);\n    paint.setColor(c);\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (opacity !== undefined) {\n    paint.setAlphaf(opacity);\n  }\n  children.forEach((child) => {\n    if (isShader(child)) {\n      paint.setShader(child);\n    } else if (isMaskFilter(child)) {\n      paint.setMaskFilter(child);\n    } else if (isColorFilter(child)) {\n      paint.setColorFilter(child);\n    } else if (isPathEffect(child)) {\n      paint.setPathEffect(child);\n    }\n  });\n  const filters = children.filter(isImageFilter);\n  if (filters.length > 0) {\n    paint.setImageFilter(\n      filters\n        .reverse()\n        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)\n    );\n  }\n  return paint;\n};\n"]}
+{"version":3,"sources":["Paint.ts"],"names":["enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","children","paintRef","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","antiAlias","current","undefined","c","setShader","setColor","getColor","setBlendMode","BlendMode","setStyle","PaintStyle","setStrokeJoin","StrokeJoin","setStrokeCap","StrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","setAntiAlias","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","isImageFilter","length","setImageFilter","reverse","reduce","Skia","ImageFilter","MakeCompose"],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\n\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeJoin,\n  StrokeCap,\n  processColor,\n  isShader,\n  isMaskFilter,\n  isColorFilter,\n  isPathEffect,\n  isImageFilter,\n  Skia,\n} from \"../../skia\";\nimport type { SkPaint, Color, SkImageFilter } from \"../../skia\";\nimport type { DeclarationResult } from \"../nodes\";\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\n// TODO: rename to paint props?\nexport interface CustomPaintProps extends ChildrenProps {\n  paint?: RefObject<SkPaint>;\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n}\n\nexport const enumKey = <K extends string>(k: K) =>\n  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;\n\nexport const processPaint = (\n  paint: SkPaint,\n  currentOpacity: number,\n  {\n    paint: paintRef,\n    color,\n    blendMode,\n    style,\n    strokeWidth,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    opacity,\n    antiAlias,\n  }: CustomPaintProps,\n  children: DeclarationResult[]\n) => {\n  if (paintRef && paintRef.current) {\n    return paintRef.current;\n  }\n  if (color !== undefined) {\n    const c = processColor(color, currentOpacity);\n    paint.setShader(null);\n    paint.setColor(c);\n  } else {\n    const c = processColor(paint.getColor(), currentOpacity);\n    paint.setColor(c);\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (opacity !== undefined) {\n    paint.setAlphaf(opacity);\n  }\n  if (antiAlias !== undefined) {\n    paint.setAntiAlias(antiAlias);\n  }\n  children.forEach((child) => {\n    if (isShader(child)) {\n      paint.setShader(child);\n    } else if (isMaskFilter(child)) {\n      paint.setMaskFilter(child);\n    } else if (isColorFilter(child)) {\n      paint.setColorFilter(child);\n    } else if (isPathEffect(child)) {\n      paint.setPathEffect(child);\n    }\n  });\n  const filters = children.filter(isImageFilter);\n  if (filters.length > 0) {\n    paint.setImageFilter(\n      filters\n        .reverse()\n        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)\n    );\n  }\n  return paint;\n};\n"]}

package/lib/commonjs/skia/Paint/Paint.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPaint = exports.StrokeJoin = exports.StrokeCap = exports.PaintStyle = void 0;
+exports.isPaint = exports.StrokeJoin = exports.StrokeCap = exports.SkiaPaint = exports.PaintStyle = void 0;
+
+var _Skia = require("../Skia");
+
 let PaintStyle;
 exports.PaintStyle = PaintStyle;
 
@@ -30,6 +33,15 @@ exports.StrokeJoin = StrokeJoin;
   StrokeJoin[StrokeJoin["Round"] = 2] = "Round";
 })(StrokeJoin || (exports.StrokeJoin = StrokeJoin = {}));
 
+const SkiaPaint = () => {
+  const paint = _Skia.Skia.Paint();
+
+  paint.setAntiAlias(true);
+  return paint;
+};
+
+exports.SkiaPaint = SkiaPaint;
+
 const isPaint = obj => obj !== null && obj.__typename__ === "Paint";
 
 exports.isPaint = isPaint;

package/lib/commonjs/skia/Paint/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.ts"],"names":["PaintStyle","StrokeCap","StrokeJoin","isPaint","obj","__typename__"],"mappings":";;;;;;IAUYA,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U;;IAKAC,S;;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S;;IAMAC,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U;;AAML,MAAMC,OAAO,GAAIC,GAAD,IACrBA,GAAG,KAAK,IAAR,IAAgBA,GAAG,CAACC,YAAJ,KAAqB,OADhC","sourcesContent":["import type { SkImageFilter } from \"../ImageFilter\";\nimport type { IMaskFilter } from \"../MaskFilter\";\nimport type { SkColorFilter } from \"../ColorFilter\";\nimport type { SkShader } from \"../Shader\";\nimport type { SkColor } from \"../Color\";\nimport type { IPathEffect } from \"../PathEffect\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\n\nimport type { BlendMode } from \"./BlendMode\";\n\nexport enum PaintStyle {\n  Fill,\n  Stroke,\n}\n\nexport enum StrokeCap {\n  Butt,\n  Round,\n  Square,\n}\n\nexport enum StrokeJoin {\n  Bevel,\n  Miter,\n  Round,\n}\n\nexport const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>\n  obj !== null && obj.__typename__ === \"Paint\";\n\nexport interface SkPaint extends SkJSIInstance<\"Paint\"> {\n  /**\n   * Returns a copy of this paint.\n   */\n  copy(): SkPaint;\n\n  /**\n   * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values\n   * (sRGB gamut, and encoded with the sRGB transfer function).\n   */\n  getColor(): SkColor;\n\n  /**\n   * Returns the geometry drawn at the beginning and end of strokes.\n   */\n  getStrokeCap(): StrokeCap;\n\n  /**\n   * Returns the geometry drawn at the corners of strokes.\n   */\n  getStrokeJoin(): StrokeJoin;\n\n  /**\n   *  Returns the limit at which a sharp corner is drawn beveled.\n   */\n  getStrokeMiter(): number;\n\n  /**\n   * Returns the thickness of the pen used to outline the shape.\n   */\n  getStrokeWidth(): number;\n\n  /**\n   * Replaces alpha, leaving RGBA unchanged. 0 means fully transparent, 1.0 means opaque.\n   * @param alpha\n   */\n  setAlphaf(alpha: number): void;\n\n  /**\n   * Requests, but does not require, that edge pixels draw opaque or with\n   * partial transparency.\n   * @param aa\n   */\n  setAntiAlias: (aa: boolean) => void;\n\n  /**\n   * Sets the blend mode that is, the mode used to combine source color\n   * with destination color.\n   * @param mode\n   */\n  setBlendMode: (blendMode: BlendMode) => void;\n\n  /**\n   *  Sets alpha and RGB used when stroking and filling. The color is a 32-bit\n   *  value, unpremultiplied, packing 8-bit components for alpha, red, blue,\n   *  and green.\n   *\n   *   @param color  unpremultiplied ARGB\n   *\n   *    example: https://fiddle.skia.org/c/@Paint_setColor\n   */\n  setColor(color: SkColor): void;\n\n  /**\n   * Sets the current color filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setColorFilter(filter: SkColorFilter | null): void;\n\n  /**\n   * Sets the current image filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setImageFilter(filter: SkImageFilter | null): void;\n\n  /**\n   * Sets the current mask filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setMaskFilter(filter: IMaskFilter | null): void;\n\n  /**\n   * Sets the current path effect, replacing the existing one if there was one.\n   * @param effect\n   */\n  setPathEffect(effect: IPathEffect | null): void;\n\n  /**\n   * Sets the current shader, replacing the existing one if there was one.\n   * @param shader\n   */\n  setShader(shader: SkShader | null): void;\n\n  /**\n   * Sets the geometry drawn at the beginning and end of strokes.\n   * @param cap\n   */\n  setStrokeCap(cap: StrokeCap): void;\n\n  /**\n   * Sets the geometry drawn at the corners of strokes.\n   * @param join\n   */\n  setStrokeJoin(join: StrokeJoin): void;\n\n  /**\n   * Sets the limit at which a sharp corner is drawn beveled.\n   * @param limit\n   */\n  setStrokeMiter(limit: number): void;\n\n  /**\n   * Sets the thickness of the pen used to outline the shape.\n   * @param width\n   */\n  setStrokeWidth(width: number): void;\n\n  /**\n   * Sets whether the geometry is filled or stroked.\n   * @param style\n   */\n  setStyle(style: PaintStyle): void;\n}\n"]}
+{"version":3,"sources":["Paint.ts"],"names":["PaintStyle","StrokeCap","StrokeJoin","SkiaPaint","paint","Skia","Paint","setAntiAlias","isPaint","obj","__typename__"],"mappings":";;;;;;;AAOA;;IAIYA,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U;;IAKAC,S;;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,yBAAAA,S;;IAMAC,U;;;WAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,0BAAAA,U;;AAML,MAAMC,SAAS,GAAG,MAAM;AAC7B,QAAMC,KAAK,GAAGC,WAAKC,KAAL,EAAd;;AACAF,EAAAA,KAAK,CAACG,YAAN,CAAmB,IAAnB;AACA,SAAOH,KAAP;AACD,CAJM;;;;AAMA,MAAMI,OAAO,GAAIC,GAAD,IACrBA,GAAG,KAAK,IAAR,IAAgBA,GAAG,CAACC,YAAJ,KAAqB,OADhC","sourcesContent":["import type { SkImageFilter } from \"../ImageFilter\";\nimport type { IMaskFilter } from \"../MaskFilter\";\nimport type { SkColorFilter } from \"../ColorFilter\";\nimport type { SkShader } from \"../Shader\";\nimport type { SkColor } from \"../Color\";\nimport type { IPathEffect } from \"../PathEffect\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\nimport { Skia } from \"../Skia\";\n\nimport type { BlendMode } from \"./BlendMode\";\n\nexport enum PaintStyle {\n  Fill,\n  Stroke,\n}\n\nexport enum StrokeCap {\n  Butt,\n  Round,\n  Square,\n}\n\nexport enum StrokeJoin {\n  Bevel,\n  Miter,\n  Round,\n}\n\nexport const SkiaPaint = () => {\n  const paint = Skia.Paint();\n  paint.setAntiAlias(true);\n  return paint;\n};\n\nexport const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>\n  obj !== null && obj.__typename__ === \"Paint\";\n\nexport interface SkPaint extends SkJSIInstance<\"Paint\"> {\n  /**\n   * Returns a copy of this paint.\n   */\n  copy(): SkPaint;\n\n  /**\n   * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values\n   * (sRGB gamut, and encoded with the sRGB transfer function).\n   */\n  getColor(): SkColor;\n\n  /**\n   * Returns the geometry drawn at the beginning and end of strokes.\n   */\n  getStrokeCap(): StrokeCap;\n\n  /**\n   * Returns the geometry drawn at the corners of strokes.\n   */\n  getStrokeJoin(): StrokeJoin;\n\n  /**\n   *  Returns the limit at which a sharp corner is drawn beveled.\n   */\n  getStrokeMiter(): number;\n\n  /**\n   * Returns the thickness of the pen used to outline the shape.\n   */\n  getStrokeWidth(): number;\n\n  /**\n   * Replaces alpha, leaving RGBA unchanged. 0 means fully transparent, 1.0 means opaque.\n   * @param alpha\n   */\n  setAlphaf(alpha: number): void;\n\n  /**\n   * Requests, but does not require, that edge pixels draw opaque or with\n   * partial transparency.\n   * @param aa\n   */\n  setAntiAlias: (aa: boolean) => void;\n\n  /**\n   * Sets the blend mode that is, the mode used to combine source color\n   * with destination color.\n   * @param mode\n   */\n  setBlendMode: (blendMode: BlendMode) => void;\n\n  /**\n   *  Sets alpha and RGB used when stroking and filling. The color is a 32-bit\n   *  value, unpremultiplied, packing 8-bit components for alpha, red, blue,\n   *  and green.\n   *\n   *   @param color  unpremultiplied ARGB\n   *\n   *    example: https://fiddle.skia.org/c/@Paint_setColor\n   */\n  setColor(color: SkColor): void;\n\n  /**\n   * Sets the current color filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setColorFilter(filter: SkColorFilter | null): void;\n\n  /**\n   * Sets the current image filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setImageFilter(filter: SkImageFilter | null): void;\n\n  /**\n   * Sets the current mask filter, replacing the existing one if there was one.\n   * @param filter\n   */\n  setMaskFilter(filter: IMaskFilter | null): void;\n\n  /**\n   * Sets the current path effect, replacing the existing one if there was one.\n   * @param effect\n   */\n  setPathEffect(effect: IPathEffect | null): void;\n\n  /**\n   * Sets the current shader, replacing the existing one if there was one.\n   * @param shader\n   */\n  setShader(shader: SkShader | null): void;\n\n  /**\n   * Sets the geometry drawn at the beginning and end of strokes.\n   * @param cap\n   */\n  setStrokeCap(cap: StrokeCap): void;\n\n  /**\n   * Sets the geometry drawn at the corners of strokes.\n   * @param join\n   */\n  setStrokeJoin(join: StrokeJoin): void;\n\n  /**\n   * Sets the limit at which a sharp corner is drawn beveled.\n   * @param limit\n   */\n  setStrokeMiter(limit: number): void;\n\n  /**\n   * Sets the thickness of the pen used to outline the shape.\n   * @param width\n   */\n  setStrokeWidth(width: number): void;\n\n  /**\n   * Sets whether the geometry is filled or stroked.\n   * @param style\n   */\n  setStyle(style: PaintStyle): void;\n}\n"]}

package/lib/commonjs/skia/Paint/usePaint.js

@@ -7,15 +7,13 @@ exports.usePaint = void 0;
 
 var _react = require("react");
 
-var _Skia = require("../Skia");
+var _Paint = require("./Paint");
 
 /**
  * Returns a Skia Paint object
  * */
 const usePaint = (initializer, deps) => (0, _react.useMemo)(() => {
-  const p = _Skia.Skia.Paint();
-
-  p.setAntiAlias(true);
+  const p = (0, _Paint.SkiaPaint)();
 
   if (initializer) {
     initializer(p);

package/lib/commonjs/skia/Paint/usePaint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePaint.ts"],"names":["usePaint","initializer","deps","p","Skia","Paint","setAntiAlias"],"mappings":";;;;;;;AACA;;AAEA;;AAIA;AACA;AACA;AACO,MAAMA,QAAQ,GAAG,CACtBC,WADsB,EAEtBC,IAFsB,KAItB,oBAAQ,MAAM;AACZ,QAAMC,CAAC,GAAGC,WAAKC,KAAL,EAAV;;AACAF,EAAAA,CAAC,CAACG,YAAF,CAAe,IAAf;;AACA,MAAIL,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACE,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CANY,CAOZ;AACD,CARD,EAQGD,IARH,CAJK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { Skia } from \"../Skia\";\n\nimport type { SkPaint } from \"./Paint\";\n\n/**\n * Returns a Skia Paint object\n * */\nexport const usePaint = (\n  initializer?: (paint: SkPaint) => void,\n  deps?: DependencyList\n) =>\n  useMemo(() => {\n    const p = Skia.Paint();\n    p.setAntiAlias(true);\n    if (initializer) {\n      initializer(p);\n    }\n    return p;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n"]}
+{"version":3,"sources":["usePaint.ts"],"names":["usePaint","initializer","deps","p"],"mappings":";;;;;;;AACA;;AAEA;;AAGA;AACA;AACA;AACO,MAAMA,QAAQ,GAAG,CACtBC,WADsB,EAEtBC,IAFsB,KAItB,oBAAQ,MAAM;AACZ,QAAMC,CAAC,GAAG,uBAAV;;AACA,MAAIF,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACE,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CALY,CAMZ;AACD,CAPD,EAOGD,IAPH,CAJK","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { SkiaPaint } from \"./Paint\";\nimport type { SkPaint } from \"./Paint\";\n\n/**\n * Returns a Skia Paint object\n * */\nexport const usePaint = (\n  initializer?: (paint: SkPaint) => void,\n  deps?: DependencyList\n) =>\n  useMemo(() => {\n    const p = SkiaPaint();\n    if (initializer) {\n      initializer(p);\n    }\n    return p;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n"]}

package/lib/commonjs/skia/Skia.js

@@ -26,7 +26,8 @@ const SkiaColor = cl => {
     let rnColor = (0, _reactNative.processColor)(cl); // 1. Neither Skia or RN could parse the color
 
     if (typeof rnColor !== "number") {
-      throw new Error("Skia couldn't parse the following color " + cl); // 2. The color is recognized by RN but not by Skia
+      console.warn("Skia couldn't parse the following color " + cl);
+      return BLACK; // 2. The color is recognized by RN but not by Skia
     } else {
       console.warn("Skia couldn't parse the following color " + cl + ". The color parsing was delegated to React Native. Please file on issue with that color."); // On android we need to move the alpha byte to the start of the structure
 
@@ -86,4 +87,5 @@ const Skia = {
   MakeVertices: SkiaApi.MakeVertices
 };
 exports.Skia = Skia;
+const BLACK = Skia.parseColorString("black");
 //# sourceMappingURL=Skia.js.map

package/lib/commonjs/skia/Skia.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Skia.ts"],"names":["SkiaColor","cl","color","Skia","parseColorString","undefined","rnColor","Error","console","warn","Platform","OS","a","r","g","b","Typeface","SkiaApi","MaskFilter","RuntimeEffect","Shader","ImageFilter","PathEffect","Data","SVG","FontMgr","TextBlob","Matrix","Font","Point","XYWHRect","RRectXY","Paint","PictureRecorder","Picture","Path","ColorFilter","ContourMeasureIter","Color","RSXform","MakeSurface","Surface","Make","MakeImageFromEncoded","Image","MakeImage","MakeVertices"],"mappings":"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","sourcesContent":["import { Platform, processColor } from \"react-native\";\n\n/*global SkiaApi*/\nimport type { ImageFilterFactory } from \"./ImageFilter\";\nimport type { PathFactory } from \"./Path\";\nimport type { ColorFilterFactory } from \"./ColorFilter\";\nimport type { SkFont } from \"./Font\";\nimport type { SkTypeface, TypefaceFactory } from \"./Typeface\";\nimport type { ImageFactory } from \"./Image\";\nimport type { MaskFilterFactory } from \"./MaskFilter\";\nimport type { SkPaint } from \"./Paint\";\nimport type { SkRect } from \"./Rect\";\nimport type { SkRRect } from \"./RRect\";\nimport type { RuntimeEffectFactory } from \"./RuntimeEffect\";\nimport type { ShaderFactory } from \"./Shader\";\nimport type { SkMatrix } from \"./Matrix\";\nimport type { PathEffectFactory } from \"./PathEffect\";\nimport type { SkPoint } from \"./Point\";\nimport type { SkVertices, VertexMode } from \"./Vertices/Vertices\";\nimport type { DataFactory } from \"./Data\";\nimport type { SVGFactory } from \"./SVG\";\nimport type { TextBlobFactory } from \"./TextBlob\";\nimport type { FontMgrFactory } from \"./FontMgr/FontMgrFactory\";\nimport type { SurfaceFactory } from \"./Surface\";\nimport \"./NativeSetup\";\nimport type { SkRSXform } from \"./RSXform\";\nimport type { SkPath } from \"./Path/Path\";\nimport type { SkContourMeasureIter } from \"./ContourMeasure\";\nimport type { PictureFactory, SkPictureRecorder } from \"./Picture\";\nimport type { Color, SkColor } from \"./Color\";\n\n/*\n * Parse CSS colors\n */\nconst SkiaColor = (cl: Color) => {\n  if (typeof cl === \"number\") {\n    return cl;\n  }\n  const color = Skia.parseColorString(cl);\n  if (color !== undefined) {\n    return color;\n  } else {\n    // If the color is not recognized, we fallback to React Native\n    let rnColor = processColor(cl);\n    // 1. Neither Skia or RN could parse the color\n    if (typeof rnColor !== \"number\") {\n      throw new Error(\"Skia couldn't parse the following color \" + cl);\n      // 2. The color is recognized by RN but not by Skia\n    } else {\n      console.warn(\n        \"Skia couldn't parse the following color \" +\n          cl +\n          \". The color parsing was delegated to React Native. Please file on issue with that color.\"\n      );\n      // On android we need to move the alpha byte to the start of the structure\n      if (Platform.OS === \"android\") {\n        rnColor = rnColor >>> 0;\n        const a = (rnColor >> 24) & 0xff;\n        const r = (rnColor >> 16) & 0xff;\n        const g = (rnColor >> 8) & 0xff;\n        const b = rnColor & 0xff;\n        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;\n      }\n      return rnColor;\n    }\n  }\n};\n\n/**\n * Declares the interface for the native Skia API\n */\nexport interface Skia {\n  Point: (x: number, y: number) => SkPoint;\n  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;\n  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;\n  Color: (color: Color) => SkColor;\n  parseColorString: (color: string) => SkColor | undefined;\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ) => SkContourMeasureIter;\n  Paint: () => SkPaint;\n  PictureRecorder: () => SkPictureRecorder;\n  Picture: PictureFactory;\n  Path: PathFactory;\n  Matrix: () => SkMatrix;\n  ColorFilter: ColorFilterFactory;\n  Font: (typeface?: SkTypeface, size?: number) => SkFont;\n  Typeface: TypefaceFactory;\n  MaskFilter: MaskFilterFactory;\n  RuntimeEffect: RuntimeEffectFactory;\n  ImageFilter: ImageFilterFactory;\n  Shader: ShaderFactory;\n  PathEffect: PathEffectFactory;\n  /**\n   * Returns an Vertices based on the given positions and optional parameters.\n   * See SkVertices.h (especially the Builder) for more details.\n   * @param mode\n   * @param positions\n   * @param textureCoordinates\n   * @param colors - either a list of int colors or a flattened color array.\n   * @param indices\n   * @param isVolatile\n   */\n  MakeVertices(\n    mode: VertexMode,\n    positions: SkPoint[],\n    textureCoordinates?: SkPoint[] | null,\n    colors?: SkColor[],\n    indices?: number[] | null,\n    isVolatile?: boolean\n  ): SkVertices;\n  Data: DataFactory;\n  Image: ImageFactory;\n  SVG: SVGFactory;\n  FontMgr: FontMgrFactory;\n  TextBlob: TextBlobFactory;\n  Surface: SurfaceFactory;\n}\n\n/**\n * Declares the SkiaApi as an available object in the global scope\n */\ndeclare global {\n  var SkiaApi: Skia;\n}\n\n/**\n * Declares the implemented API with overrides.\n */\nexport const Skia = {\n  // Factories\n  Typeface: SkiaApi.Typeface,\n  MaskFilter: SkiaApi.MaskFilter,\n  RuntimeEffect: SkiaApi.RuntimeEffect,\n  Shader: SkiaApi.Shader,\n  ImageFilter: SkiaApi.ImageFilter,\n  PathEffect: SkiaApi.PathEffect,\n  Data: SkiaApi.Data,\n  SVG: SkiaApi.SVG,\n  FontMgr: SkiaApi.FontMgr,\n  TextBlob: SkiaApi.TextBlob,\n  // Constructors\n  Matrix: SkiaApi.Matrix,\n  Font: SkiaApi.Font,\n  Point: SkiaApi.Point,\n  XYWHRect: SkiaApi.XYWHRect,\n  RRectXY: SkiaApi.RRectXY,\n  Paint: SkiaApi.Paint,\n  PictureRecorder: SkiaApi.PictureRecorder,\n  Picture: SkiaApi.Picture,\n  Path: SkiaApi.Path,\n  ColorFilter: SkiaApi.ColorFilter,\n  ContourMeasureIter: SkiaApi.ContourMeasureIter,\n  // Here are constructors for data types which are represented as typed arrays in CanvasKit\n  Color: SkiaColor,\n  parseColorString: SkiaApi.parseColorString,\n  RSXform: SkiaApi.RSXform,\n  // For the following methods the factory symmetry is broken to be comptatible with CanvasKit\n  MakeSurface: SkiaApi.Surface.Make,\n  MakeImageFromEncoded: SkiaApi.Image.MakeImageFromEncoded,\n  MakeImage: SkiaApi.Image.MakeImage,\n  MakeVertices: SkiaApi.MakeVertices,\n};\n"]}
+{"version":3,"sources":["Skia.ts"],"names":["SkiaColor","cl","color","Skia","parseColorString","undefined","rnColor","console","warn","BLACK","Platform","OS","a","r","g","b","Typeface","SkiaApi","MaskFilter","RuntimeEffect","Shader","ImageFilter","PathEffect","Data","SVG","FontMgr","TextBlob","Matrix","Font","Point","XYWHRect","RRectXY","Paint","PictureRecorder","Picture","Path","ColorFilter","ContourMeasureIter","Color","RSXform","MakeSurface","Surface","Make","MakeImageFromEncoded","Image","MakeImage","MakeVertices"],"mappings":";;;;;;;AAAA;;AAwBA;;AAOA;AACA;AACA;AACA,MAAMA,SAAS,GAAIC,EAAD,IAAe;AAC/B,MAAI,OAAOA,EAAP,KAAc,QAAlB,EAA4B;AAC1B,WAAOA,EAAP;AACD;;AACD,QAAMC,KAAK,GAAGC,IAAI,CAACC,gBAAL,CAAsBH,EAAtB,CAAd;;AACA,MAAIC,KAAK,KAAKG,SAAd,EAAyB;AACvB,WAAOH,KAAP;AACD,GAFD,MAEO;AACL;AACA,QAAII,OAAO,GAAG,+BAAaL,EAAb,CAAd,CAFK,CAGL;;AACA,QAAI,OAAOK,OAAP,KAAmB,QAAvB,EAAiC;AAC/BC,MAAAA,OAAO,CAACC,IAAR,CAAa,6CAA6CP,EAA1D;AACA,aAAOQ,KAAP,CAF+B,CAG/B;AACD,KAJD,MAIO;AACLF,MAAAA,OAAO,CAACC,IAAR,CACE,6CACEP,EADF,GAEE,0FAHJ,EADK,CAML;;AACA,UAAIS,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7BL,QAAAA,OAAO,GAAGA,OAAO,KAAK,CAAtB;AACA,cAAMM,CAAC,GAAIN,OAAO,IAAI,EAAZ,GAAkB,IAA5B;AACA,cAAMO,CAAC,GAAIP,OAAO,IAAI,EAAZ,GAAkB,IAA5B;AACA,cAAMQ,CAAC,GAAIR,OAAO,IAAI,CAAZ,GAAiB,IAA3B;AACA,cAAMS,CAAC,GAAGT,OAAO,GAAG,IAApB;AACAA,QAAAA,OAAO,GAAG,CAAEM,CAAC,IAAI,EAAN,GAAaC,CAAC,IAAI,EAAlB,GAAyBC,CAAC,IAAI,CAA9B,GAAmCC,CAApC,MAA2C,CAArD;AACD;;AACD,aAAOT,OAAP;AACD;AACF;AACF,CAjCD;AAmCA;AACA;AACA;;;AA2DA;AACA;AACA;AACO,MAAMH,IAAI,GAAG;AAClB;AACAa,EAAAA,QAAQ,EAAEC,OAAO,CAACD,QAFA;AAGlBE,EAAAA,UAAU,EAAED,OAAO,CAACC,UAHF;AAIlBC,EAAAA,aAAa,EAAEF,OAAO,CAACE,aAJL;AAKlBC,EAAAA,MAAM,EAAEH,OAAO,CAACG,MALE;AAMlBC,EAAAA,WAAW,EAAEJ,OAAO,CAACI,WANH;AAOlBC,EAAAA,UAAU,EAAEL,OAAO,CAACK,UAPF;AAQlBC,EAAAA,IAAI,EAAEN,OAAO,CAACM,IARI;AASlBC,EAAAA,GAAG,EAAEP,OAAO,CAACO,GATK;AAUlBC,EAAAA,OAAO,EAAER,OAAO,CAACQ,OAVC;AAWlBC,EAAAA,QAAQ,EAAET,OAAO,CAACS,QAXA;AAYlB;AACAC,EAAAA,MAAM,EAAEV,OAAO,CAACU,MAbE;AAclBC,EAAAA,IAAI,EAAEX,OAAO,CAACW,IAdI;AAelBC,EAAAA,KAAK,EAAEZ,OAAO,CAACY,KAfG;AAgBlBC,EAAAA,QAAQ,EAAEb,OAAO,CAACa,QAhBA;AAiBlBC,EAAAA,OAAO,EAAEd,OAAO,CAACc,OAjBC;AAkBlBC,EAAAA,KAAK,EAAEf,OAAO,CAACe,KAlBG;AAmBlBC,EAAAA,eAAe,EAAEhB,OAAO,CAACgB,eAnBP;AAoBlBC,EAAAA,OAAO,EAAEjB,OAAO,CAACiB,OApBC;AAqBlBC,EAAAA,IAAI,EAAElB,OAAO,CAACkB,IArBI;AAsBlBC,EAAAA,WAAW,EAAEnB,OAAO,CAACmB,WAtBH;AAuBlBC,EAAAA,kBAAkB,EAAEpB,OAAO,CAACoB,kBAvBV;AAwBlB;AACAC,EAAAA,KAAK,EAAEtC,SAzBW;AA0BlBI,EAAAA,gBAAgB,EAAEa,OAAO,CAACb,gBA1BR;AA2BlBmC,EAAAA,OAAO,EAAEtB,OAAO,CAACsB,OA3BC;AA4BlB;AACAC,EAAAA,WAAW,EAAEvB,OAAO,CAACwB,OAAR,CAAgBC,IA7BX;AA8BlBC,EAAAA,oBAAoB,EAAE1B,OAAO,CAAC2B,KAAR,CAAcD,oBA9BlB;AA+BlBE,EAAAA,SAAS,EAAE5B,OAAO,CAAC2B,KAAR,CAAcC,SA/BP;AAgClBC,EAAAA,YAAY,EAAE7B,OAAO,CAAC6B;AAhCJ,CAAb;;AAmCP,MAAMrC,KAAK,GAAGN,IAAI,CAACC,gBAAL,CAAsB,OAAtB,CAAd","sourcesContent":["import { Platform, processColor } from \"react-native\";\n\n/*global SkiaApi*/\nimport type { ImageFilterFactory } from \"./ImageFilter\";\nimport type { PathFactory } from \"./Path\";\nimport type { ColorFilterFactory } from \"./ColorFilter\";\nimport type { SkFont } from \"./Font\";\nimport type { SkTypeface, TypefaceFactory } from \"./Typeface\";\nimport type { ImageFactory } from \"./Image\";\nimport type { MaskFilterFactory } from \"./MaskFilter\";\nimport type { SkPaint } from \"./Paint\";\nimport type { SkRect } from \"./Rect\";\nimport type { SkRRect } from \"./RRect\";\nimport type { RuntimeEffectFactory } from \"./RuntimeEffect\";\nimport type { ShaderFactory } from \"./Shader\";\nimport type { SkMatrix } from \"./Matrix\";\nimport type { PathEffectFactory } from \"./PathEffect\";\nimport type { SkPoint } from \"./Point\";\nimport type { SkVertices, VertexMode } from \"./Vertices/Vertices\";\nimport type { DataFactory } from \"./Data\";\nimport type { SVGFactory } from \"./SVG\";\nimport type { TextBlobFactory } from \"./TextBlob\";\nimport type { FontMgrFactory } from \"./FontMgr/FontMgrFactory\";\nimport type { SurfaceFactory } from \"./Surface\";\nimport \"./NativeSetup\";\nimport type { SkRSXform } from \"./RSXform\";\nimport type { SkPath } from \"./Path/Path\";\nimport type { SkContourMeasureIter } from \"./ContourMeasure\";\nimport type { PictureFactory, SkPictureRecorder } from \"./Picture\";\nimport type { Color, SkColor } from \"./Color\";\n\n/*\n * Parse CSS colors\n */\nconst SkiaColor = (cl: Color) => {\n  if (typeof cl === \"number\") {\n    return cl;\n  }\n  const color = Skia.parseColorString(cl);\n  if (color !== undefined) {\n    return color;\n  } else {\n    // If the color is not recognized, we fallback to React Native\n    let rnColor = processColor(cl);\n    // 1. Neither Skia or RN could parse the color\n    if (typeof rnColor !== \"number\") {\n      console.warn(\"Skia couldn't parse the following color \" + cl);\n      return BLACK;\n      // 2. The color is recognized by RN but not by Skia\n    } else {\n      console.warn(\n        \"Skia couldn't parse the following color \" +\n          cl +\n          \". The color parsing was delegated to React Native. Please file on issue with that color.\"\n      );\n      // On android we need to move the alpha byte to the start of the structure\n      if (Platform.OS === \"android\") {\n        rnColor = rnColor >>> 0;\n        const a = (rnColor >> 24) & 0xff;\n        const r = (rnColor >> 16) & 0xff;\n        const g = (rnColor >> 8) & 0xff;\n        const b = rnColor & 0xff;\n        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;\n      }\n      return rnColor;\n    }\n  }\n};\n\n/**\n * Declares the interface for the native Skia API\n */\nexport interface Skia {\n  Point: (x: number, y: number) => SkPoint;\n  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;\n  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;\n  Color: (color: Color) => SkColor;\n  parseColorString: (color: string) => SkColor | undefined;\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ) => SkContourMeasureIter;\n  Paint: () => SkPaint;\n  PictureRecorder: () => SkPictureRecorder;\n  Picture: PictureFactory;\n  Path: PathFactory;\n  Matrix: () => SkMatrix;\n  ColorFilter: ColorFilterFactory;\n  Font: (typeface?: SkTypeface, size?: number) => SkFont;\n  Typeface: TypefaceFactory;\n  MaskFilter: MaskFilterFactory;\n  RuntimeEffect: RuntimeEffectFactory;\n  ImageFilter: ImageFilterFactory;\n  Shader: ShaderFactory;\n  PathEffect: PathEffectFactory;\n  /**\n   * Returns an Vertices based on the given positions and optional parameters.\n   * See SkVertices.h (especially the Builder) for more details.\n   * @param mode\n   * @param positions\n   * @param textureCoordinates\n   * @param colors - either a list of int colors or a flattened color array.\n   * @param indices\n   * @param isVolatile\n   */\n  MakeVertices(\n    mode: VertexMode,\n    positions: SkPoint[],\n    textureCoordinates?: SkPoint[] | null,\n    colors?: SkColor[],\n    indices?: number[] | null,\n    isVolatile?: boolean\n  ): SkVertices;\n  Data: DataFactory;\n  Image: ImageFactory;\n  SVG: SVGFactory;\n  FontMgr: FontMgrFactory;\n  TextBlob: TextBlobFactory;\n  Surface: SurfaceFactory;\n}\n\n/**\n * Declares the SkiaApi as an available object in the global scope\n */\ndeclare global {\n  var SkiaApi: Skia;\n}\n\n/**\n * Declares the implemented API with overrides.\n */\nexport const Skia = {\n  // Factories\n  Typeface: SkiaApi.Typeface,\n  MaskFilter: SkiaApi.MaskFilter,\n  RuntimeEffect: SkiaApi.RuntimeEffect,\n  Shader: SkiaApi.Shader,\n  ImageFilter: SkiaApi.ImageFilter,\n  PathEffect: SkiaApi.PathEffect,\n  Data: SkiaApi.Data,\n  SVG: SkiaApi.SVG,\n  FontMgr: SkiaApi.FontMgr,\n  TextBlob: SkiaApi.TextBlob,\n  // Constructors\n  Matrix: SkiaApi.Matrix,\n  Font: SkiaApi.Font,\n  Point: SkiaApi.Point,\n  XYWHRect: SkiaApi.XYWHRect,\n  RRectXY: SkiaApi.RRectXY,\n  Paint: SkiaApi.Paint,\n  PictureRecorder: SkiaApi.PictureRecorder,\n  Picture: SkiaApi.Picture,\n  Path: SkiaApi.Path,\n  ColorFilter: SkiaApi.ColorFilter,\n  ContourMeasureIter: SkiaApi.ContourMeasureIter,\n  // Here are constructors for data types which are represented as typed arrays in CanvasKit\n  Color: SkiaColor,\n  parseColorString: SkiaApi.parseColorString,\n  RSXform: SkiaApi.RSXform,\n  // For the following methods the factory symmetry is broken to be comptatible with CanvasKit\n  MakeSurface: SkiaApi.Surface.Make,\n  MakeImageFromEncoded: SkiaApi.Image.MakeImageFromEncoded,\n  MakeImage: SkiaApi.Image.MakeImage,\n  MakeVertices: SkiaApi.MakeVertices,\n};\n\nconst BLACK = Skia.parseColorString(\"black\")!;\n"]}

package/lib/module/renderer/Canvas.js

@@ -3,6 +3,7 @@ import ReactReconciler from "react-reconciler";
 import { SkiaView, useDrawCallback } from "../views";
 import { Skia } from "../skia";
 import { useValue } from "../values/hooks/useValue";
+import { SkiaPaint } from "../skia/Paint/Paint";
 import { debug as hostDebug, skHostConfig } from "./HostConfig"; // import { debugTree } from "./nodes";
 
 import { vec } from "./processors";
@@ -79,8 +80,7 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       };
     }
 
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
+    const paint = SkiaPaint();
     const ctx = {
       width,
       height,

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["React","useEffect","useState","useCallback","useMemo","useContext","forwardRef","useRef","ReactReconciler","SkiaView","useDrawCallback","Skia","useValue","debug","hostDebug","skHostConfig","vec","Container","DependencyManager","CanvasContext","createContext","useCanvasSize","canvas","Error","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","FontMgr","RefDefault","Canvas","forwardedRef","children","style","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","createContainer","onDraw","info","timestamp","touches","current","paint","Paint","setAntiAlias","ctx","opacity","center","draw","unsubscribe","refs","targetRef","forEach"],"mappings":"AAAA,OAAOA,KAAP,IACEC,SADF,EAEEC,QAFF,EAGEC,WAHF,EAIEC,OAJF,EAKEC,UALF,EAMEC,UANF,EAOEC,MAPF,QAQO,OARP;AAiBA,OAAOC,eAAP,MAA4B,kBAA5B;AAEA,SAASC,QAAT,EAAmBC,eAAnB,QAA0C,UAA1C;AAEA,SAASC,IAAT,QAAqB,SAArB;AAEA,SAASC,QAAT,QAAyB,0BAAzB;AAGA,SAASC,KAAK,IAAIC,SAAlB,EAA6BC,YAA7B,QAAiD,cAAjD,C,CACA;;AACA,SAASC,GAAT,QAAoB,cAApB;AACA,SAASC,SAAT,QAA0B,SAA1B;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AAEA,MAAMC,aAAa,gBAAGnB,KAAK,CAACoB,aAAN,CAGX,IAHW,CAAtB;AAKA,OAAO,MAAMC,aAAa,GAAG,MAAM;AACjC,QAAMC,MAAM,GAAGjB,UAAU,CAACc,aAAD,CAAzB;;AACA,MAAI,CAACG,MAAL,EAAa;AACX,UAAM,IAAIC,KAAJ,CAAU,iCAAV,CAAN;AACD;;AACD,SAAOD,MAAP;AACD,CANM;AAQP,OAAO,MAAME,cAAc,GAAGhB,eAAe,CAACO,YAAD,CAAtC;AAEPS,cAAc,CAACC,kBAAf,CAAkC;AAChCC,EAAAA,UAAU,EAAE,CADoB;AAEhCC,EAAAA,OAAO,EAAE,OAFuB;AAGhCC,EAAAA,mBAAmB,EAAE;AAHW,CAAlC;;AAMA,MAAMC,MAAM,GAAG,CAACC,OAAD,EAAqBC,IAArB,EAAuCC,SAAvC,KAAgE;AAC7ER,EAAAA,cAAc,CAACS,eAAf,CAA+BH,OAA/B,EAAwCC,IAAxC,EAA8C,IAA9C,EAAoD,MAAM;AACxDjB,IAAAA,SAAS,CAAC,iBAAD,CAAT;AAEAkB,IAAAA,SAAS,CAACE,MAAV,CAAiBC,SAAjB;AACD,GAJD;AAKD,CAND;;AAQA,OAAO,MAAMC,YAAY,GAAG,MAAM7B,MAAM,CAAW,IAAX,CAAjC;AASP,MAAM8B,cAAc,GAAG1B,IAAI,CAAC2B,OAAL,CAAaC,UAAb,EAAvB;AAEA,OAAO,MAAMC,MAAM,gBAAGlC,UAAU,CAC9B,OAAqDmC,YAArD,KAAsE;AAAA,MAArE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmB9B,IAAAA,KAAnB;AAA0B+B,IAAAA,IAA1B;AAAgCC,IAAAA,OAAhC;AAAyCC,IAAAA;AAAzC,GAAqE;AACpE,QAAMC,SAAS,GAAGnC,QAAQ,CAAC;AAAEoC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAD,CAA1B;AACA,QAAMC,QAAQ,GAAGd,YAAY,EAA7B;AACA,QAAMe,GAAG,GAAGC,eAAe,CAACX,YAAD,EAAeS,QAAf,CAA3B;AACA,QAAM,CAACG,IAAD,EAAOC,OAAP,IAAkBpD,QAAQ,CAAC,CAAD,CAAhC;AACA,QAAMqD,MAAM,GAAGpD,WAAW,CAAC,MAAMmD,OAAO,CAAEE,CAAD,IAAOA,CAAC,GAAG,CAAZ,CAAd,EAA8B,EAA9B,CAA1B;AAEA,QAAMxB,SAAS,GAAG5B,OAAO,CACvB,MAAM,IAAIa,SAAJ,CAAc,IAAIC,iBAAJ,CAAsBiC,GAAtB,CAAd,EAA0CI,MAA1C,CADiB,EAEvB,CAACA,MAAD,EAASJ,GAAT,CAFuB,CAAzB;AAKA,QAAMpB,IAAI,GAAG3B,OAAO,CAClB,MAAMoB,cAAc,CAACiC,eAAf,CAA+BzB,SAA/B,EAA0C,CAA1C,EAA6C,KAA7C,EAAoD,IAApD,CADY,EAElB,CAACA,SAAD,CAFkB,CAApB,CAZoE,CAgBpE;;AACA/B,EAAAA,SAAS,CAAC,MAAM;AACd4B,IAAAA,MAAM,eACJ,oBAAC,aAAD,CAAe,QAAf;AAAwB,MAAA,KAAK,EAAEkB;AAA/B,OACGL,QADH,CADI,EAIJX,IAJI,EAKJC,SALI,CAAN;AAOD,GARQ,EAQN,CAACU,QAAD,EAAWX,IAAX,EAAiBwB,MAAjB,EAAyBvB,SAAzB,EAAoCe,SAApC,CARM,CAAT,CAjBoE,CA2BpE;;AACA,QAAMW,MAAM,GAAGhD,eAAe,CAC5B,CAACY,MAAD,EAASqC,IAAT,KAAkB;AAChB;AACA,UAAM;AAAEX,MAAAA,KAAF;AAASC,MAAAA,MAAT;AAAiBW,MAAAA;AAAjB,QAA+BD,IAArC;;AACA,QAAId,OAAJ,EAAa;AACXA,MAAAA,OAAO,CAACc,IAAI,CAACE,OAAN,CAAP;AACD;;AACD,QACEb,KAAK,KAAKD,SAAS,CAACe,OAAV,CAAkBd,KAA5B,IACAC,MAAM,KAAKF,SAAS,CAACe,OAAV,CAAkBb,MAF/B,EAGE;AACAF,MAAAA,SAAS,CAACe,OAAV,GAAoB;AAAEd,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAApB;AACD;;AACD,UAAMc,KAAK,GAAGpD,IAAI,CAACqD,KAAL,EAAd;AACAD,IAAAA,KAAK,CAACE,YAAN,CAAmB,IAAnB;AACA,UAAMC,GAAG,GAAG;AACVlB,MAAAA,KADU;AAEVC,MAAAA,MAFU;AAGVW,MAAAA,SAHU;AAIVtC,MAAAA,MAJU;AAKVyC,MAAAA,KALU;AAMVI,MAAAA,OAAO,EAAE,CANC;AAOVhB,MAAAA,GAPU;AAQViB,MAAAA,MAAM,EAAEpD,GAAG,CAACgC,KAAK,GAAG,CAAT,EAAYC,MAAM,GAAG,CAArB,CARD;AASVH,MAAAA,OAAO,EAAEA,OAAF,aAAEA,OAAF,cAAEA,OAAF,GAAaT;AATV,KAAZ;AAWAL,IAAAA,SAAS,CAACqC,IAAV,CAAeH,GAAf;AACD,GA3B2B,EA4B5B,CAACb,IAAD,EAAOR,OAAP,CA5B4B,CAA9B;AA+BA5C,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACX+B,MAAAA,SAAS,CAACE,MAAV,CAAiBoC,WAAjB;AACD,KAFD;AAGD,GAJQ,EAIN,CAACtC,SAAD,CAJM,CAAT;AAMA,sBACE,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEmB,GADP;AAEE,IAAA,KAAK,EAAER,KAFT;AAGE,IAAA,MAAM,EAAEe,MAHV;AAIE,IAAA,IAAI,EAAEd,IAJR;AAKE,IAAA,KAAK,EAAE/B;AALT,IADF;AASD,CA3E6B,CAAzB;AA8EP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMuC,eAAe,GAAG,YAEnB;AAAA,oCADAmB,IACA;AADAA,IAAAA,IACA;AAAA;;AACH,QAAMC,SAAS,GAAGxE,KAAK,CAACO,MAAN,CAAgB,IAAhB,CAAlB;AACAP,EAAAA,KAAK,CAACC,SAAN,CAAgB,MAAM;AACpBsE,IAAAA,IAAI,CAACE,OAAL,CAActB,GAAD,IAAS;AACpB,UAAIA,GAAJ,EAAS;AACP,YAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;AAC7BA,UAAAA,GAAG,CAACqB,SAAS,CAACV,OAAX,CAAH;AACD,SAFD,MAEO;AACLX,UAAAA,GAAG,CAACW,OAAJ,GAAcU,SAAS,CAACV,OAAxB;AACD;AACF;AACF,KARD;AASD,GAVD,EAUG,CAACS,IAAD,CAVH;AAWA,SAAOC,SAAP;AACD,CAhBD","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        paint.setAntiAlias(true);\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["React","useEffect","useState","useCallback","useMemo","useContext","forwardRef","useRef","ReactReconciler","SkiaView","useDrawCallback","Skia","useValue","SkiaPaint","debug","hostDebug","skHostConfig","vec","Container","DependencyManager","CanvasContext","createContext","useCanvasSize","canvas","Error","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","FontMgr","RefDefault","Canvas","forwardedRef","children","style","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","createContainer","onDraw","info","timestamp","touches","current","paint","ctx","opacity","center","draw","unsubscribe","refs","targetRef","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\nimport { SkiaPaint } from \"../skia/Paint/Paint\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = SkiaPaint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/module/renderer/components/Paint.js

@@ -1,12 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
-import { Skia } from "../../skia";
+import { SkiaPaint } from "../../skia";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
 export const usePaintRef = () => useRef(null);
 export const Paint = /*#__PURE__*/forwardRef((props, ref) => {
-  const paint = useMemo(() => Skia.Paint(), []);
+  const paint = useMemo(() => SkiaPaint(), []);
   useImperativeHandle(ref, () => paint, [paint]);
   const onDeclare = useMemo(() => createDeclaration((paintProps, children, ctx) => processPaint(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/React.createElement("skDeclaration", _extends({

package/lib/module/renderer/components/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","Skia","processPaint","createDeclaration","usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,OAAxB,EAAiCC,UAAjC,EAA6CC,mBAA7C,QAAwE,OAAxE;AAGA,SAASC,IAAT,QAAqB,YAArB;AAEA,SAASC,YAAT,QAA6B,eAA7B;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAO,MAAMC,WAAW,GAAG,MAAMP,MAAM,CAAU,IAAV,CAAhC;AAMP,OAAO,MAAMQ,KAAK,gBAAGN,UAAU,CAC7B,CAACO,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAGV,OAAO,CAAC,MAAMG,IAAI,CAACI,KAAL,EAAP,EAAqB,EAArB,CAArB;AACAL,EAAAA,mBAAmB,CAACO,GAAD,EAAM,MAAMC,KAAZ,EAAmB,CAACA,KAAD,CAAnB,CAAnB;AACA,QAAMC,SAAS,GAAGX,OAAO,CACvB,MACEK,iBAAiB,CAAa,CAACO,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5BV,YAAY,CAACM,KAAD,EAAQI,GAAG,CAACC,OAAZ,EAAqBH,UAArB,EAAiCC,QAAjC,CADG,CAFI,EAKvB,CAACH,KAAD,CALuB,CAAzB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZ4B,CAAxB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}
+{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","SkiaPaint","processPaint","createDeclaration","usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,OAAxB,EAAiCC,UAAjC,EAA6CC,mBAA7C,QAAwE,OAAxE;AAGA,SAASC,SAAT,QAA0B,YAA1B;AAEA,SAASC,YAAT,QAA6B,eAA7B;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAO,MAAMC,WAAW,GAAG,MAAMP,MAAM,CAAU,IAAV,CAAhC;AAMP,OAAO,MAAMQ,KAAK,gBAAGN,UAAU,CAC7B,CAACO,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAGV,OAAO,CAAC,MAAMG,SAAS,EAAhB,EAAoB,EAApB,CAArB;AACAD,EAAAA,mBAAmB,CAACO,GAAD,EAAM,MAAMC,KAAZ,EAAmB,CAACA,KAAD,CAAnB,CAAnB;AACA,QAAMC,SAAS,GAAGX,OAAO,CACvB,MACEK,iBAAiB,CAAa,CAACO,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5BV,YAAY,CAACM,KAAD,EAAQI,GAAG,CAACC,OAAZ,EAAqBH,UAArB,EAAiCC,QAAjC,CADG,CAFI,EAKvB,CAACH,KAAD,CALuB,CAAzB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZ4B,CAAxB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { SkiaPaint } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => SkiaPaint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}