@shopify/react-native-skia 0.1.122 → 0.1.123
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.
- package/android/CMakeLists.txt +3 -1
- package/android/cpp/jni/JniSkiaDrawView.cpp +14 -71
- package/android/cpp/jni/JniSkiaManager.cpp +1 -1
- package/android/cpp/jni/include/JniSkiaDrawView.h +18 -22
- package/android/cpp/jni/include/JniSkiaManager.h +4 -4
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp +68 -0
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.h +48 -0
- package/android/cpp/{jni/include/JniPlatformContextWrapper.h → rnskia-android/RNSkPlatformContextImpl.h} +4 -4
- package/android/cpp/{jni → rnskia-android}/SkiaOpenGLRenderer.cpp +39 -54
- package/android/cpp/{jni/include → rnskia-android}/SkiaOpenGLRenderer.h +2 -31
- package/android/src/main/java/com/shopify/reactnative/skia/RNSkiaViewManager.java +1 -1
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java +21 -28
- package/cpp/rnskia/RNSkDrawView.cpp +77 -116
- package/cpp/rnskia/RNSkDrawView.h +5 -35
- package/cpp/rnskia/RNSkJsiViewApi.h +8 -5
- package/cpp/rnskia/RNSkManager.cpp +2 -2
- package/cpp/rnskia/RNSkManager.h +2 -2
- package/cpp/rnskia/RNSkPlatformContext.h +1 -1
- package/cpp/rnskia/values/RNSkClockValue.h +16 -8
- package/cpp/rnskia/values/RNSkReadonlyValue.h +11 -5
- package/cpp/utils/RNSkTimingInfo.h +13 -1
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +5 -7
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +25 -10
- package/ios/RNSkia-iOS/SkiaDrawView.mm +21 -15
- package/lib/commonjs/renderer/Canvas.js +3 -3
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/renderer/components/Paint.js +1 -1
- package/lib/commonjs/renderer/components/Paint.js.map +1 -1
- package/lib/commonjs/renderer/components/shapes/Path.js +9 -1
- package/lib/commonjs/renderer/components/shapes/Path.js.map +1 -1
- package/lib/commonjs/renderer/processors/Paint.js +6 -1
- package/lib/commonjs/renderer/processors/Paint.js.map +1 -1
- package/lib/commonjs/skia/Paint/Paint.js +13 -1
- package/lib/commonjs/skia/Paint/Paint.js.map +1 -1
- package/lib/commonjs/skia/Paint/usePaint.js +2 -4
- package/lib/commonjs/skia/Paint/usePaint.js.map +1 -1
- package/lib/commonjs/skia/Skia.js +3 -1
- package/lib/commonjs/skia/Skia.js.map +1 -1
- package/lib/module/renderer/Canvas.js +2 -2
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/renderer/components/Paint.js +2 -2
- package/lib/module/renderer/components/Paint.js.map +1 -1
- package/lib/module/renderer/components/shapes/Path.js +9 -2
- package/lib/module/renderer/components/shapes/Path.js.map +1 -1
- package/lib/module/renderer/processors/Paint.js +6 -1
- package/lib/module/renderer/processors/Paint.js.map +1 -1
- package/lib/module/skia/Paint/Paint.js +6 -0
- package/lib/module/skia/Paint/Paint.js.map +1 -1
- package/lib/module/skia/Paint/usePaint.js +2 -3
- package/lib/module/skia/Paint/usePaint.js.map +1 -1
- package/lib/module/skia/Skia.js +3 -1
- package/lib/module/skia/Skia.js.map +1 -1
- package/lib/typescript/src/renderer/components/shapes/Path.d.ts +3 -1
- package/lib/typescript/src/renderer/processors/Paint.d.ts +2 -1
- package/lib/typescript/src/skia/Paint/Paint.d.ts +1 -0
- package/package.json +1 -1
- package/src/renderer/Canvas.tsx +2 -2
- package/src/renderer/components/Paint.tsx +2 -2
- package/src/renderer/components/shapes/Path.tsx +11 -3
- package/src/renderer/processors/Paint.ts +5 -0
- package/src/skia/Paint/Paint.ts +7 -0
- package/src/skia/Paint/usePaint.ts +2 -4
- package/src/skia/Skia.ts +4 -1
@@ -2,7 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
2
2
|
|
3
3
|
import React from "react";
|
4
4
|
import { createDrawing } from "../../nodes";
|
5
|
-
import { processPath } from "../../processors";
|
5
|
+
import { processPath, enumKey } from "../../processors";
|
6
|
+
import { FillType } from "../../../skia";
|
6
7
|
const onDraw = createDrawing((_ref, _ref2) => {
|
7
8
|
let {
|
8
9
|
canvas,
|
@@ -12,15 +13,21 @@ const onDraw = createDrawing((_ref, _ref2) => {
|
|
12
13
|
start,
|
13
14
|
end,
|
14
15
|
stroke,
|
16
|
+
fillType,
|
15
17
|
...pathProps
|
16
18
|
} = _ref2;
|
17
19
|
const hasStartOffset = start !== 0;
|
18
20
|
const hasEndOffset = end !== 1;
|
19
21
|
const hasStrokeOptions = stroke !== undefined;
|
20
|
-
const
|
22
|
+
const hasFillType = !!fillType;
|
23
|
+
const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
|
21
24
|
const pristinePath = processPath(pathProps.path);
|
22
25
|
const path = willMutatePath ? pristinePath.copy() : pristinePath;
|
23
26
|
|
27
|
+
if (hasFillType) {
|
28
|
+
path.setFillType(FillType[enumKey(fillType)]);
|
29
|
+
}
|
30
|
+
|
24
31
|
if (hasStrokeOptions) {
|
25
32
|
path.stroke(stroke);
|
26
33
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Path.tsx"],"names":["React","createDrawing","processPath","onDraw","canvas","paint","start","end","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","willMutatePath","pristinePath","path","copy","trim","drawPath","Path","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;
|
1
|
+
{"version":3,"sources":["Path.tsx"],"names":["React","createDrawing","processPath","enumKey","FillType","onDraw","canvas","paint","start","end","stroke","fillType","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","hasFillType","willMutatePath","pristinePath","path","copy","setFillType","trim","drawPath","Path","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAQA,SAASC,aAAT,QAA8B,aAA9B;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,kBAArC;AACA,SAASC,QAAT,QAAyB,eAAzB;AAgBA,MAAMC,MAAM,GAAGJ,aAAa,CAC1B,iBAAuE;AAAA,MAAtE;AAAEK,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,GAAGjB,WAAW,CAACU,SAAS,CAACQ,IAAX,CAAhC;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIF,WAAJ,EAAiB;AACfG,IAAAA,IAAI,CAACE,WAAL,CAAiBlB,QAAQ,CAACD,OAAO,CAACQ,QAAD,CAAR,CAAzB;AACD;;AACD,MAAII,gBAAJ,EAAsB;AACpBK,IAAAA,IAAI,CAACV,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIG,cAAc,IAAIC,YAAtB,EAAoC;AAClCM,IAAAA,IAAI,CAACG,IAAL,CAAUf,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACkB,QAAP,CAAgBJ,IAAhB,EAAsBb,KAAtB;AACD,CApByB,CAA5B;AAuBA,OAAO,MAAMkB,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAErB;AAAnB,KAA+BqB,KAA/B,EAAP;AACD,CAFM;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBnB,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"]}
|
@@ -10,7 +10,8 @@ export const processPaint = (paint, currentOpacity, _ref, children) => {
|
|
10
10
|
strokeJoin,
|
11
11
|
strokeCap,
|
12
12
|
strokeMiter,
|
13
|
-
opacity
|
13
|
+
opacity,
|
14
|
+
antiAlias
|
14
15
|
} = _ref;
|
15
16
|
|
16
17
|
if (paintRef && paintRef.current) {
|
@@ -54,6 +55,10 @@ export const processPaint = (paint, currentOpacity, _ref, children) => {
|
|
54
55
|
paint.setAlphaf(opacity);
|
55
56
|
}
|
56
57
|
|
58
|
+
if (antiAlias !== undefined) {
|
59
|
+
paint.setAntiAlias(antiAlias);
|
60
|
+
}
|
61
|
+
|
57
62
|
children.forEach(child => {
|
58
63
|
if (isShader(child)) {
|
59
64
|
paint.setShader(child);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","isShader","isMaskFilter","isColorFilter","isPathEffect","isImageFilter","Skia","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","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":"AAEA,SACEA,SADF,EAEEC,UAFF,EAGEC,UAHF,EAIEC,SAJF,EAKEC,YALF,EAMEC,QANF,EAOEC,YAPF,EAQEC,aARF,EASEC,YATF,EAUEC,aAVF,EAWEC,IAXF,QAYO,YAZP;
|
1
|
+
{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","isShader","isMaskFilter","isColorFilter","isPathEffect","isImageFilter","Skia","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","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","setAntiAlias","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","length","setImageFilter","reverse","reduce","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"]}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { Skia } from "../Skia";
|
1
2
|
export let PaintStyle;
|
2
3
|
|
3
4
|
(function (PaintStyle) {
|
@@ -21,5 +22,10 @@ export let StrokeJoin;
|
|
21
22
|
StrokeJoin[StrokeJoin["Round"] = 2] = "Round";
|
22
23
|
})(StrokeJoin || (StrokeJoin = {}));
|
23
24
|
|
25
|
+
export const SkiaPaint = () => {
|
26
|
+
const paint = Skia.Paint();
|
27
|
+
paint.setAntiAlias(true);
|
28
|
+
return paint;
|
29
|
+
};
|
24
30
|
export const isPaint = obj => obj !== null && obj.__typename__ === "Paint";
|
25
31
|
//# sourceMappingURL=Paint.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Paint.ts"],"names":["PaintStyle","StrokeCap","StrokeJoin","isPaint","obj","__typename__"],"mappings":"
|
1
|
+
{"version":3,"sources":["Paint.ts"],"names":["Skia","PaintStyle","StrokeCap","StrokeJoin","SkiaPaint","paint","Paint","setAntiAlias","isPaint","obj","__typename__"],"mappings":"AAOA,SAASA,IAAT,QAAqB,SAArB;AAIA,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AAKZ,WAAYC,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAMZ,WAAYC,UAAZ;;WAAYA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;AAAAA,EAAAA,U,CAAAA,U;GAAAA,U,KAAAA,U;;AAMZ,OAAO,MAAMC,SAAS,GAAG,MAAM;AAC7B,QAAMC,KAAK,GAAGL,IAAI,CAACM,KAAL,EAAd;AACAD,EAAAA,KAAK,CAACE,YAAN,CAAmB,IAAnB;AACA,SAAOF,KAAP;AACD,CAJM;AAMP,OAAO,MAAMG,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"]}
|
@@ -1,12 +1,11 @@
|
|
1
1
|
import { useMemo } from "react";
|
2
|
-
import {
|
2
|
+
import { SkiaPaint } from "./Paint";
|
3
3
|
|
4
4
|
/**
|
5
5
|
* Returns a Skia Paint object
|
6
6
|
* */
|
7
7
|
export const usePaint = (initializer, deps) => useMemo(() => {
|
8
|
-
const p =
|
9
|
-
p.setAntiAlias(true);
|
8
|
+
const p = SkiaPaint();
|
10
9
|
|
11
10
|
if (initializer) {
|
12
11
|
initializer(p);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["usePaint.ts"],"names":["useMemo","
|
1
|
+
{"version":3,"sources":["usePaint.ts"],"names":["useMemo","SkiaPaint","usePaint","initializer","deps","p"],"mappings":"AACA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,SAAT,QAA0B,SAA1B;;AAGA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAG,CACtBC,WADsB,EAEtBC,IAFsB,KAItBJ,OAAO,CAAC,MAAM;AACZ,QAAMK,CAAC,GAAGJ,SAAS,EAAnB;;AACA,MAAIE,WAAJ,EAAiB;AACfA,IAAAA,WAAW,CAACE,CAAD,CAAX;AACD;;AACD,SAAOA,CAAP,CALY,CAMZ;AACD,CAPM,EAOJD,IAPI,CAJF","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/module/skia/Skia.js
CHANGED
@@ -20,7 +20,8 @@ const SkiaColor = cl => {
|
|
20
20
|
let rnColor = processColor(cl); // 1. Neither Skia or RN could parse the color
|
21
21
|
|
22
22
|
if (typeof rnColor !== "number") {
|
23
|
-
|
23
|
+
console.warn("Skia couldn't parse the following color " + cl);
|
24
|
+
return BLACK; // 2. The color is recognized by RN but not by Skia
|
24
25
|
} else {
|
25
26
|
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
|
26
27
|
|
@@ -79,4 +80,5 @@ export const Skia = {
|
|
79
80
|
MakeImage: SkiaApi.Image.MakeImage,
|
80
81
|
MakeVertices: SkiaApi.MakeVertices
|
81
82
|
};
|
83
|
+
const BLACK = Skia.parseColorString("black");
|
82
84
|
//# sourceMappingURL=Skia.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Skia.ts"],"names":["Platform","processColor","SkiaColor","cl","color","Skia","parseColorString","undefined","rnColor","
|
1
|
+
{"version":3,"sources":["Skia.ts"],"names":["Platform","processColor","SkiaColor","cl","color","Skia","parseColorString","undefined","rnColor","console","warn","BLACK","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 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"]}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import type { CustomPaintProps, AnimatedProps, PathDef } from "../../processors";
|
2
|
+
import type { CustomPaintProps, AnimatedProps, PathDef, SkEnum } from "../../processors";
|
3
|
+
import { FillType } from "../../../skia";
|
3
4
|
interface StrokeOpts {
|
4
5
|
width?: number;
|
5
6
|
strokeMiterlimit?: number;
|
@@ -10,6 +11,7 @@ export interface PathProps extends CustomPaintProps {
|
|
10
11
|
start: number;
|
11
12
|
end: number;
|
12
13
|
stroke?: StrokeOpts;
|
14
|
+
fillType?: SkEnum<typeof FillType>;
|
13
15
|
}
|
14
16
|
export declare const Path: {
|
15
17
|
(props: AnimatedProps<PathProps>): JSX.Element;
|
@@ -16,6 +16,7 @@ export interface CustomPaintProps extends ChildrenProps {
|
|
16
16
|
strokeCap?: SkEnum<typeof StrokeCap>;
|
17
17
|
strokeMiter?: number;
|
18
18
|
opacity?: number;
|
19
|
+
antiAlias?: boolean;
|
19
20
|
}
|
20
21
|
export declare const enumKey: <K extends string>(k: K) => Capitalize<K>;
|
21
|
-
export declare const processPaint: (paint: SkPaint, currentOpacity: number, { paint: paintRef, color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps, children: DeclarationResult[]) => SkPaint;
|
22
|
+
export declare const processPaint: (paint: SkPaint, currentOpacity: number, { paint: paintRef, color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, antiAlias, }: CustomPaintProps, children: DeclarationResult[]) => SkPaint;
|
@@ -20,6 +20,7 @@ export declare enum StrokeJoin {
|
|
20
20
|
Miter = 1,
|
21
21
|
Round = 2
|
22
22
|
}
|
23
|
+
export declare const SkiaPaint: () => SkPaint;
|
23
24
|
export declare const isPaint: (obj: SkJSIInstance<string> | null) => obj is SkPaint;
|
24
25
|
export interface SkPaint extends SkJSIInstance<"Paint"> {
|
25
26
|
/**
|
package/package.json
CHANGED
package/src/renderer/Canvas.tsx
CHANGED
@@ -23,6 +23,7 @@ import { Skia } from "../skia";
|
|
23
23
|
import type { FontMgr } from "../skia/FontMgr/FontMgr";
|
24
24
|
import { useValue } from "../values/hooks/useValue";
|
25
25
|
import type { SkiaReadonlyValue } from "../values/types";
|
26
|
+
import { SkiaPaint } from "../skia/Paint/Paint";
|
26
27
|
|
27
28
|
import { debug as hostDebug, skHostConfig } from "./HostConfig";
|
28
29
|
// import { debugTree } from "./nodes";
|
@@ -112,8 +113,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
|
|
112
113
|
) {
|
113
114
|
canvasCtx.current = { width, height };
|
114
115
|
}
|
115
|
-
const paint =
|
116
|
-
paint.setAntiAlias(true);
|
116
|
+
const paint = SkiaPaint();
|
117
117
|
const ctx = {
|
118
118
|
width,
|
119
119
|
height,
|
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
|
|
2
2
|
import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
|
3
3
|
|
4
4
|
import type { SkPaint } from "../../skia";
|
5
|
-
import {
|
5
|
+
import { SkiaPaint } from "../../skia";
|
6
6
|
import type { CustomPaintProps, AnimatedProps } from "../processors";
|
7
7
|
import { processPaint } from "../processors";
|
8
8
|
import { createDeclaration } from "../nodes";
|
@@ -15,7 +15,7 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
|
|
15
15
|
|
16
16
|
export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
|
17
17
|
(props, ref) => {
|
18
|
-
const paint = useMemo(() =>
|
18
|
+
const paint = useMemo(() => SkiaPaint(), []);
|
19
19
|
useImperativeHandle(ref, () => paint, [paint]);
|
20
20
|
const onDeclare = useMemo(
|
21
21
|
() =>
|
@@ -4,9 +4,11 @@ import type {
|
|
4
4
|
CustomPaintProps,
|
5
5
|
AnimatedProps,
|
6
6
|
PathDef,
|
7
|
+
SkEnum,
|
7
8
|
} from "../../processors";
|
8
9
|
import { createDrawing } from "../../nodes";
|
9
|
-
import { processPath } from "../../processors";
|
10
|
+
import { processPath, enumKey } from "../../processors";
|
11
|
+
import { FillType } from "../../../skia";
|
10
12
|
|
11
13
|
interface StrokeOpts {
|
12
14
|
width?: number;
|
@@ -19,16 +21,22 @@ export interface PathProps extends CustomPaintProps {
|
|
19
21
|
start: number;
|
20
22
|
end: number;
|
21
23
|
stroke?: StrokeOpts;
|
24
|
+
fillType?: SkEnum<typeof FillType>;
|
22
25
|
}
|
23
26
|
|
24
27
|
const onDraw = createDrawing<PathProps>(
|
25
|
-
({ canvas, paint }, { start, end, stroke, ...pathProps }) => {
|
28
|
+
({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {
|
26
29
|
const hasStartOffset = start !== 0;
|
27
30
|
const hasEndOffset = end !== 1;
|
28
31
|
const hasStrokeOptions = stroke !== undefined;
|
29
|
-
const
|
32
|
+
const hasFillType = !!fillType;
|
33
|
+
const willMutatePath =
|
34
|
+
hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
|
30
35
|
const pristinePath = processPath(pathProps.path);
|
31
36
|
const path = willMutatePath ? pristinePath.copy() : pristinePath;
|
37
|
+
if (hasFillType) {
|
38
|
+
path.setFillType(FillType[enumKey(fillType)]);
|
39
|
+
}
|
32
40
|
if (hasStrokeOptions) {
|
33
41
|
path.stroke(stroke);
|
34
42
|
}
|
@@ -32,6 +32,7 @@ export interface CustomPaintProps extends ChildrenProps {
|
|
32
32
|
strokeCap?: SkEnum<typeof StrokeCap>;
|
33
33
|
strokeMiter?: number;
|
34
34
|
opacity?: number;
|
35
|
+
antiAlias?: boolean;
|
35
36
|
}
|
36
37
|
|
37
38
|
export const enumKey = <K extends string>(k: K) =>
|
@@ -50,6 +51,7 @@ export const processPaint = (
|
|
50
51
|
strokeCap,
|
51
52
|
strokeMiter,
|
52
53
|
opacity,
|
54
|
+
antiAlias,
|
53
55
|
}: CustomPaintProps,
|
54
56
|
children: DeclarationResult[]
|
55
57
|
) => {
|
@@ -85,6 +87,9 @@ export const processPaint = (
|
|
85
87
|
if (opacity !== undefined) {
|
86
88
|
paint.setAlphaf(opacity);
|
87
89
|
}
|
90
|
+
if (antiAlias !== undefined) {
|
91
|
+
paint.setAntiAlias(antiAlias);
|
92
|
+
}
|
88
93
|
children.forEach((child) => {
|
89
94
|
if (isShader(child)) {
|
90
95
|
paint.setShader(child);
|
package/src/skia/Paint/Paint.ts
CHANGED
@@ -5,6 +5,7 @@ import type { SkShader } from "../Shader";
|
|
5
5
|
import type { SkColor } from "../Color";
|
6
6
|
import type { IPathEffect } from "../PathEffect";
|
7
7
|
import type { SkJSIInstance } from "../JsiInstance";
|
8
|
+
import { Skia } from "../Skia";
|
8
9
|
|
9
10
|
import type { BlendMode } from "./BlendMode";
|
10
11
|
|
@@ -25,6 +26,12 @@ export enum StrokeJoin {
|
|
25
26
|
Round,
|
26
27
|
}
|
27
28
|
|
29
|
+
export const SkiaPaint = () => {
|
30
|
+
const paint = Skia.Paint();
|
31
|
+
paint.setAntiAlias(true);
|
32
|
+
return paint;
|
33
|
+
};
|
34
|
+
|
28
35
|
export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>
|
29
36
|
obj !== null && obj.__typename__ === "Paint";
|
30
37
|
|
@@ -1,8 +1,7 @@
|
|
1
1
|
import type { DependencyList } from "react";
|
2
2
|
import { useMemo } from "react";
|
3
3
|
|
4
|
-
import {
|
5
|
-
|
4
|
+
import { SkiaPaint } from "./Paint";
|
6
5
|
import type { SkPaint } from "./Paint";
|
7
6
|
|
8
7
|
/**
|
@@ -13,8 +12,7 @@ export const usePaint = (
|
|
13
12
|
deps?: DependencyList
|
14
13
|
) =>
|
15
14
|
useMemo(() => {
|
16
|
-
const p =
|
17
|
-
p.setAntiAlias(true);
|
15
|
+
const p = SkiaPaint();
|
18
16
|
if (initializer) {
|
19
17
|
initializer(p);
|
20
18
|
}
|
package/src/skia/Skia.ts
CHANGED
@@ -44,7 +44,8 @@ const SkiaColor = (cl: Color) => {
|
|
44
44
|
let rnColor = processColor(cl);
|
45
45
|
// 1. Neither Skia or RN could parse the color
|
46
46
|
if (typeof rnColor !== "number") {
|
47
|
-
|
47
|
+
console.warn("Skia couldn't parse the following color " + cl);
|
48
|
+
return BLACK;
|
48
49
|
// 2. The color is recognized by RN but not by Skia
|
49
50
|
} else {
|
50
51
|
console.warn(
|
@@ -164,3 +165,5 @@ export const Skia = {
|
|
164
165
|
MakeImage: SkiaApi.Image.MakeImage,
|
165
166
|
MakeVertices: SkiaApi.MakeVertices,
|
166
167
|
};
|
168
|
+
|
169
|
+
const BLACK = Skia.parseColorString("black")!;
|