diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..65365be6 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +indent_style = space +indent_size = 2 + +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 19831eeb..00000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules/** -example/** -lib/** \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 185cd144..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,19 +0,0 @@ -module.exports = { - root: true, - extends: ['@react-native-community', 'prettier'], - rules: { - 'prettier/prettier': [ - 'error', - { - quoteProps: 'consistent', - tabWidth: 2, - useTabs: false, - arrowParens: 'avoid', - bracketSameLine: true, - bracketSpacing: false, - singleQuote: true, - trailingComma: 'all', - }, - ], - }, -}; diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..e27f70fa --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +*.pbxproj -text +# specific for windows script files +*.bat text eol=crlf diff --git a/.gitignore b/.gitignore index 2b2f3a45..a9dc9d63 100644 --- a/.gitignore +++ b/.gitignore @@ -27,8 +27,8 @@ DerivedData *.hmap *.ipa *.xcuserstate -example/ios/.xcode.env.local project.xcworkspace +**/.xcode.env.local # Android/IJ # @@ -54,7 +54,6 @@ node_modules/ npm-debug.log yarn-debug.log yarn-error.log -coverage/ # BUCK buck-out/ @@ -62,19 +61,20 @@ buck-out/ android/app/libs android/keystores/debug.keystore +# Yarn +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions + # Turborepo .turbo/ # generated by bob lib/ -# fastlane -# -# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the -# screenshots whenever they are needed. -# For more information about the recommended setup visit: -# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md - -fastlane/report.xml -fastlane/Preview.html -fastlane/screenshots +# React Native Codegen +ios/generated +android/generated diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..3f430af8 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v18 diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 2b540746..00000000 --- a/.prettierrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - arrowParens: 'avoid', - bracketSameLine: true, - bracketSpacing: false, - singleQuote: true, - trailingComma: 'all', -}; diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/README.md b/README.md index 6fde5740..f685f325 100644 --- a/README.md +++ b/README.md @@ -1,78 +1,88 @@ # react-native-sketch-canvas + _Forked from [terrylinla/react-native-sketch-canvas](https://github.com/terrylinla/react-native-sketch-canvas) as package abandoned in 2018._ --- -A React Native component for drawing by touching on both iOS and Android. +A React Native component for drawing by touching on both iOS and Android, with TypeScript support.      -Features -------------- +## Features + +- Support iOS and Android +- Full TypeScript support +- Stroke thickness and color are changeable while drawing +- Can undo strokes one by one +- Can serialize path data to JSON for syncing between devices +- Save drawing to a non-transparent image (png or jpg) or a transparent image (png only) +- Use vector concept - sketches won't be cropped in different sizes of canvas +- Support translucent colors and eraser +- Support drawing on an image +- High performance (See [below](#Performance)) +- Can draw multiple canvases in the same screen +- Can draw multiple multiline text on canvas +- Support for custom UI components +- Permission handling for Android image saving -* Support iOS and Android -* Stroke thickness and color are changeable while drawing. -* Can undo strokes one by one. -* Can serialize path data to JSON. So it can sync other devices or someone else and continue to edit. -* Save drawing to a non-transparent image (png or jpg) or a transparent image (png only) -* Use vector concept. So sketches won't be cropped in different sizes of canvas. -* Support translucent colors and eraser. -* Support drawing on an image (Thanks to diego-caceres-galvan) -* High performance (See [below](#Performance). Thanks to jeanregisser) -* Can draw multiple canvases in the same screen. -* Can draw multiple multiline text on canvas. +## Installation +--- -## Installation -------------- Install from `yarn` (only support RN >= 0.40) + ```bash yarn install @sourcetoad/react-native-sketch-canvas ``` ## Usage -------------- + +--- ### ● Using without UI component (for customizing UI) -```javascript -import React, { Component } from 'react'; + +```typescript +import React from 'react'; import { AppRegistry, StyleSheet, View, } from 'react-native'; -import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'; - -export default class example extends Component { - render() { - return ( - - - - +import { SketchCanvas } from '@sourcetoad/react-native-sketch-canvas'; + +export default function Example() { + return ( + + + - ); - } + + ); } const styles = StyleSheet.create({ container: { - flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', }, }); -AppRegistry.registerComponent('example', () => example); +AppRegistry.registerComponent('example', () => Example); ``` #### Properties -------------- + +--- + | Prop | Type | Description | -|:------------------------|:----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| :---------------------- | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | style | `object` | Styles to be applied on canvas component | | strokeColor | `string` | Set the color of stroke, which can be #RRGGBB or #RRGGBBAA. If strokeColor is set to #00000000, it will automatically become an eraser.
NOTE: Once an eraser path is sent to Android, Android View will disable hardware acceleration automatically. It might reduce the canvas performance afterward. | | strokeWidth | `number` | The thickness of stroke | @@ -80,119 +90,143 @@ AppRegistry.registerComponent('example', () => example); | onStrokeChanged | `function` | An optional function which accepts 2 arguments `x` and `y`. Called when user's finger moves | | onStrokeEnd | `function` | An optional function called when user's finger leaves the canvas (end drawing) | | onSketchSaved | `function` | An optional function which accepts 2 arguments `success` and `path`. If `success` is true, image is saved successfully and the saved image path might be in second argument. In Android, image path will always be returned. In iOS, image is saved to camera roll or file system, path will be set to null or image location respectively. | -| onPathsChange | `function` | An optional function which accepts 1 argument `pathsCount`, which indicates the number of paths. Useful for UI controls. (Thanks to toblerpwn) | +| onPathsChange | `function` | An optional function which accepts 1 argument `pathsCount`, which indicates the number of paths. Useful for UI controls. | | user | `string` | An identifier to identify who draws the path. Useful when undo between two users | | touchEnabled | `bool` | If false, disable touching. Default is true. | -| localSourceImage | `object` | Require an object (see [below](#objects)) which consists of `filename`, `directory`(optional) and `mode`(optional). If set, the image will be loaded and display as a background in canvas. (Thanks to diego-caceres-galvan))([Here](#background-image) for details) | +| localSourceImage | `object` | Require an object (see [below](#objects)) which consists of `filename`, `directory`(optional) and `mode`(optional). If set, the image will be loaded and display as a background in canvas. | | permissionDialogTitle | `string` | Android Only: Provide a Dialog Title for the Image Saving PermissionDialog. Defaults to empty string if not set | | permissionDialogMessage | `string` | Android Only: Provide a Dialog Message for the Image Saving PermissionDialog. Defaults to empty string if not set | +| onGenerateBase64 | `function` | An optional function which accepts 1 argument `result` containing the base64 string of the canvas. Called when `getBase64()` is invoked. | #### Methods -------------- + +--- + | Method | Description | -|:------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | clear() | Clear all the paths | | undo() | Delete the latest path. Can undo multiple times. | | addPath(path) | Add a path (see [below](#objects)) to canvas. | | deletePath(id) | Delete a path with its `id` | | save(imageType, transparent, folder, filename, includeImage, cropToImageSize) | Save image to camera roll or filesystem. If `localSourceImage` is set and a background image is loaded successfully, set `includeImage` to true to include background image and set `cropToImageSize` to true to crop output image to background image.
Android: Save image in `imageType` format with transparent background (if `transparent` sets to True) to **/sdcard/Pictures/`folder`/`filename`** (which is Environment.DIRECTORY_PICTURES).
iOS: Save image in `imageType` format with transparent background (if `transparent` sets to True) to camera roll or file system. If `folder` and `filename` are set, image will save to **temporary directory/`folder`/`filename`** (which is NSTemporaryDirectory()) | | getPaths() | Get the paths that drawn on the canvas | -| getBase64(imageType, transparent, includeImage, cropToImageSize, callback) | Get the base64 of image and receive data in callback function, which called with 2 arguments. First one is error (null if no error) and second one is base64 result. | +| getBase64(imageType, transparent, includeImage, includeText, cropToImageSize) | Get the base64 string of the canvas. The result will be sent through the `onGenerateBase64` event handler. Parameters:
- `imageType`: "png" or "jpg"
- `transparent`: whether to include transparency
- `includeImage`: whether to include background image
- `includeText`: whether to include text
- `cropToImageSize`: whether to crop to background image size | #### Constants -------------- + +--- + | Constant | Description | -|:------------|:-------------------------------------------------------------------------------------| +| :---------- | :----------------------------------------------------------------------------------- | | MAIN_BUNDLE | Android: empty string, ''
iOS: equivalent to [[NSBundle mainBundle] bundlePath] | | DOCUMENT | Android: empty string, ''
iOS: equivalent to NSDocumentDirectory | | LIBRARY | Android: empty string, ''
iOS: equivalent to NSLibraryDirectory | | CACHES | Android: empty string, ''
iOS: equivalent to NSCachesDirectory | ### ● Using with build-in UI components + -```javascript -import React, { Component } from 'react'; +```typescript +import React from 'react'; import { AppRegistry, StyleSheet, Text, View, - Alert, } from 'react-native'; -import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas'; - -export default class example extends Component { - render() { - return ( - - - Close} - undoComponent={Undo} - clearComponent={Clear} - eraseComponent={Eraser} - strokeComponent={color => ( - - )} - strokeSelectedComponent={(color, index, changed) => { - return ( - - ) - }} - strokeWidthComponent={(w) => { - return ( - - - )}} - saveComponent={Save} - savePreference={() => { - return { - folder: 'RNSketchCanvas', - filename: String(Math.ceil(Math.random() * 100000000)), - transparent: false, - imageType: 'png' - } - }} - /> - +import RNSketchCanvas from '@sourcetoad/react-native-sketch-canvas'; + +export default function Example() { + return ( + + + Close} + undoComponent={Undo} + clearComponent={Clear} + eraseComponent={Eraser} + strokeComponent={color => ( + + )} + strokeSelectedComponent={(color, index, changed) => { + return ( + + ) + }} + strokeWidthComponent={(w) => { + return ( + + + )}} + saveComponent={Save} + savePreference={() => { + return { + folder: 'RNSketchCanvas', + filename: String(Math.ceil(Math.random() * 100000000)), + transparent: false, + imageType: 'png' + } + }} + /> - ); - } + + ); } const styles = StyleSheet.create({ container: { - flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', }, strokeColorButton: { - marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15, + marginHorizontal: 2.5, + marginVertical: 8, + width: 30, + height: 30, + borderRadius: 15, }, strokeWidthButton: { - marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15, - justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A' + marginHorizontal: 2.5, + marginVertical: 8, + width: 30, + height: 30, + borderRadius: 15, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#39579A' }, functionButton: { - marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60, - backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5, + marginHorizontal: 2.5, + marginVertical: 8, + height: 30, + width: 60, + backgroundColor: '#39579A', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 5, } }); -AppRegistry.registerComponent('example', () => example); +AppRegistry.registerComponent('example', () => Example); ``` #### Properties -------------- + +--- + | Prop | Type | Description | -|:------------------------|:-----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| :---------------------- | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | containerStyle | `object` | Styles to be applied on container | | canvasStyle | `object` | Styles to be applied on canvas component | | onStrokeStart | `function` | See [above](#properties) | @@ -221,9 +255,11 @@ AppRegistry.registerComponent('example', () => example); | onSketchSaved | `function` | See [above](#properties) | #### Methods -------------- + +--- + | Method | Description | -|:---------------|:----------------------| +| :------------- | :-------------------- | | clear() | See [above](#methods) | | undo() | See [above](#methods) | | addPath(path) | See [above](#methods) | @@ -231,45 +267,55 @@ AppRegistry.registerComponent('example', () => example); | save() | | #### Constants -------------- + +--- + | Constant | Description | -|:------------|:------------------------| +| :---------- | :---------------------- | | MAIN_BUNDLE | See [above](#constants) | | DOCUMENT | See [above](#constants) | | LIBRARY | See [above](#constants) | | CACHES | See [above](#constants) | ## Background Image -------------- + +--- + To use an image as background, `localSourceImage`(see [below](#background-image)) reqires an object, which consists of `filename`, `directory`(optional) and `mode`(optional).
Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image. + ### Typical Usage -* Load image from app native bundle - * Android: + +- Load image from app native bundle + - Android: 1. Put your images into android/app/src/main/res/drawable. - 2. Set `filename` to the name of image files with or without file extension. + 2. Set `filename` to the name of image files with or without file extension. 3. Set `directory` to '' - * iOS: + - iOS: 1. Open Xcode and add images to project by right-clicking `Add Files to [YOUR PROJECT NAME]`. - 2. Set `filename` to the name of image files with file extension. + 2. Set `filename` to the name of image files with file extension. 3. Set `directory` to MAIN_BUNDLE (e.g. RNSketchCanvas.MAIN_BUNDLE or SketchCanvas.MAIN_BUNDLE) -* Load image from camera +- Load image from camera 1. Retrieve photo complete path (including file extension) after snapping. 2. Set `filename` to that path. 3. Set `directory` to '' ### Content Mode -* AspectFill
- -* AspectFit (default)
- -* ScaleToFill
- + +- AspectFill
+ +- AspectFit (default)
+ +- ScaleToFill
+ ## Objects -------------- + +--- + ### SavePreference object -```json5 + +```typescript { folder: 'RNSketchCanvas', filename: 'image', @@ -280,18 +326,20 @@ Note: Because native module cannot read the file in JS bundle, file path cannot cropToImageSize: true } ``` + | Property | Type | Description | -|:-----------------|:--------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| :--------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | folder? | string | Android: the folder name in `Pictures` directory
iOS: if `filename` is not null, image will save to temporary directory with folder and filename, otherwise, it will save to camera roll | | filename? | string | the file name of image
iOS: Set to `null` to save image to camera roll. | | transparent | boolean | save canvas with transparent background, ignored if imageType is `jpg` | | imageType | string | image file format
Options: `png`, `jpg` | | includeImage? | boolean | Set to `true` to include the image loaded from `LocalSourceImage`. (Default is `true`) | -| includeImage? | boolean | Set to `true` to include the text drawn from `Text`. (Default is `true`) | +| includeText? | boolean | Set to `true` to include the text drawn from `Text`. (Default is `true`) | | cropToImageSize? | boolean | Set to `true` to crop output image to the image loaded from `LocalSourceImage`. (Default is `false`) | ### Path object -```javascript + +```typescript { drawer: 'user1', size: { // the size of drawer's canvas @@ -312,21 +360,24 @@ Note: Because native module cannot read the file in JS bundle, file path cannot ``` ### LocalSourceImage object -```json5 + +```typescript { filename: 'image.png', // e.g. 'image.png' or '/storage/sdcard0/Pictures/image.png' directory: '', // e.g. SketchCanvas.MAIN_BUNDLE or '/storage/sdcard0/Pictures/' mode: 'AspectFill' } ``` + | Property | Type | Description | Default | -|:-----------|:--------|:---------------------------------------------------------------------------------------------------------------------------------|:------------| +| :--------- | :------ | :------------------------------------------------------------------------------------------------------------------------------- | :---------- | | filename | string | the fold name of the background image file (can be a full path) | | | directory? | string | the directory of the background image file (usually used with [constants](#constants)) | '' | | mode? | boolean | Specify how the background image resizes itself to fit or fill the canvas.
Options: `AspectFill`, `AspectFit`, `ScaleToFill` | `AspectFit` | ### CanvasText object -```json5 + +```typescript { text: 'TEXT', font: '', @@ -340,8 +391,9 @@ Note: Because native module cannot read the file in JS bundle, file path cannot lineHeightMultiple: 1.2 } ``` + | Property | Type | Description | Default | -|:--------------------|:-------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------| +| :------------------ | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | | text | string | the text to display (can be multiline by `\n`) | | | font? | string | Android: You can set `font` to `fonts/[filename].ttf` to load font in `android/app/src/main/assets/fonts/` in your Android project
iOS: Set `font` that included with iOS | | | fontSize? | number | font size | 12 | @@ -354,20 +406,59 @@ Note: Because native module cannot read the file in JS bundle, file path cannot | lineHeightMultiple? | number | Multiply line height by this factor. Only work when `text` is multiline text. | 1.0 | ## Performance -------------- -1. For non-transparent path, both Android and iOS performances are good. Because when drawing non-transparent path, only last segment is drawn on canvas, no matter how long the path is, CPU usage is stable at about 20% and 15% in Android and iOS respectively. + +--- + +1. For non-transparent path, both Android and iOS performances are good. Because when drawing non-transparent path, only last segment is drawn on canvas, no matter how long the path is, CPU usage is stable at about 20% and 15% in Android and iOS respectively. 2. For transparent path, CPU usage stays at around 25% in Android, however, in iOS, CPU usage grows to 100%. -* Android (https://youtu.be/gXdCEN6Enmk)
-     -* iOS (https://youtu.be/_jO4ky400Eo)
-     + +- Android (https://youtu.be/gXdCEN6Enmk)
+      +- iOS (https://youtu.be/_jO4ky400Eo)
+      ## Example -------------- + +--- + The source code includes 3 examples, using build-in UI components, using with only canvas, and sync between two canvases. -Check full example app in the [example](./example) folder +Check full example app in the [example](./example) folder ## Troubleshooting -------------- + +--- + Please refer [here](https://github.com/sourcetoad/react-native-sketch-canvas/wiki/Troubleshooting). + +### Jest Setup + +If you're using Jest in your project, you'll need to mock the TurboModule registry. Add the following to your Jest setup file: + +```javascript +jest.mock('react-native/Libraries/TurboModule/TurboModuleRegistry', () => { + const turboModuleRegistry = jest.requireActual( + 'react-native/Libraries/TurboModule/TurboModuleRegistry' + ); + return { + ...turboModuleRegistry, + getEnforcing: (name) => { + // List of TurboModules libraries to mock + const modulesToMock = ['SketchCanvasModule']; + if (modulesToMock.includes(name)) { + return { + getConstants: jest.fn(() => ({ + MainBundlePath: 'test', + NSDocumentDirectory: 'test', + NSLibraryDirectory: 'test', + NSCachesDirectory: 'test', + })), + }; + } + return turboModuleRegistry.getEnforcing(name); + }, + }; +}); +``` + +This mock ensures that the native module constants are available during testing. diff --git a/RNSketchCanvas.podspec b/RNSketchCanvas.podspec index b4926f14..192a345d 100644 --- a/RNSketchCanvas.podspec +++ b/RNSketchCanvas.podspec @@ -1,17 +1,44 @@ -require 'json' +require "json" -package = JSON.parse(File.read(File.join(__dir__, 'package.json'))) +package = JSON.parse(File.read(File.join(__dir__, "package.json"))) +folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' Pod::Spec.new do |s| - s.name = 'RNSketchCanvas' - s.version = package['version'] - s.summary = package['description'] - s.homepage = 'https://github.com/sourcetoad/react-native-sketch-canvas' - s.license = package['license'] - s.authors = package['author'] - s.source = { :git => package['repository']['url'] } - s.resource_bundles = { 'RNSketchCanvas_PrivacyInfo' => 'ios/RNSketchCanvas/PrivacyInfo.xcprivacy' } - s.platform = :ios, '8.0' - s.source_files = 'ios/**/*.{h,m}' - s.dependency 'React' + s.name = "RNSketchCanvas" + s.version = package["version"] + s.summary = package["description"] + s.homepage = package["homepage"] + s.license = package["license"] + s.authors = package["author"] + + s.platforms = { :ios => min_ios_version_supported } + s.source = { :git => "https://github.com/sourcetoad/react-native-sketch-canvas", :tag => "#{s.version}" } + s.resource_bundles = { 'RNSketchCanvas_PrivacyInfo' => 'ios/PrivacyInfo.xcprivacy' } + + s.source_files = "ios/**/*.{h,m,mm,cpp}" + + # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0. + # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79. + if respond_to?(:install_modules_dependencies, true) + install_modules_dependencies(s) + else + s.dependency "React-Core" + + # Don't install the dependencies when we run `pod install` in the old architecture. + if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then + s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1" + s.pod_target_xcconfig = { + "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"", + "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1", + "CLANG_CXX_LANGUAGE_STANDARD" => "c++17" + } + s.dependency "React-RCTFabric" + s.dependency "React-Codegen" + s.dependency "RCT-Folly" + s.dependency "RCTRequired" + s.dependency "RCTTypeSafety" + s.dependency "ReactCommon/turbomodule/core" + end + end end + diff --git a/android/.gitignore b/android/.gitignore deleted file mode 100644 index c7e0d7bf..00000000 --- a/android/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Running Android in isolation in IDE causes these to be generated. -# They wouldn't be generated in usage of the library in React Native. -gradlew -gradlew.bat -gradle/wrapper/* diff --git a/android/build.gradle b/android/build.gradle index 372c4b38..60845070 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -1,29 +1,123 @@ -apply plugin: 'com.android.library' +buildscript { + // Buildscript is evaluated before everything else so we can't use getExtOrDefault + def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["RNTSketchCanvas_kotlinVersion"] + + repositories { + google() + mavenCentral() + } + + dependencies { + classpath "com.android.tools.build:gradle:7.2.1" + // noinspection DifferentKotlinGradleVersion + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" + } +} + +def reactNativeArchitectures() { + def value = rootProject.getProperties().get("reactNativeArchitectures") + return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] +} + +def isNewArchitectureEnabled() { + return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true" +} + +apply plugin: "com.android.library" +apply plugin: "kotlin-android" + +if (isNewArchitectureEnabled()) { + apply plugin: "com.facebook.react" +} + +def getExtOrDefault(name) { + return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["RNTSketchCanvas_" + name] +} def getExtOrIntegerDefault(name) { - return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RNSketchCanvas_" + name]).toInteger() + return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RNTSketchCanvas_" + name]).toInteger() +} + +def supportsNamespace() { + def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.') + def major = parsed[0].toInteger() + def minor = parsed[1].toInteger() + + // Namespace support was added in 7.3.0 + return (major == 7 && minor >= 3) || major >= 8 } android { - compileSdkVersion getExtOrIntegerDefault("compileSdkVersion") + if (supportsNamespace()) { + namespace "com.sourcetoad.reactnativesketchcanvas" - defaultConfig { - minSdkVersion getExtOrIntegerDefault('minSdkVersion') - targetSdkVersion getExtOrIntegerDefault('targetSdkVersion') - versionCode 1 - versionName "1.0" + sourceSets { + main { + manifest.srcFile "src/main/AndroidManifestNew.xml" + } } - lintOptions { - abortOnError false + } + + compileSdkVersion getExtOrIntegerDefault("compileSdkVersion") + + defaultConfig { + minSdkVersion getExtOrIntegerDefault("minSdkVersion") + targetSdkVersion getExtOrIntegerDefault("targetSdkVersion") + buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() + + } + + buildFeatures { + buildConfig true + } + + buildTypes { + release { + minifyEnabled false } + } + + lintOptions { + disable "GradleCompatible" + } + + compileOptions { + sourceCompatibility JavaVersion.VERSION_1_8 + targetCompatibility JavaVersion.VERSION_1_8 + } + + sourceSets { + main { + if (isNewArchitectureEnabled()) { + java.srcDirs += [ + "generated/java", + "generated/jni" + ] + } + } + } } repositories { - mavenCentral() - google() + mavenCentral() + google() } +def kotlin_version = getExtOrDefault("kotlinVersion") + dependencies { - //noinspection GradleDynamicVersion - implementation "com.facebook.react:react-native:+" + // For < 0.71, this will be from the local maven repo + // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin + //noinspection GradleDynamicVersion + implementation "com.facebook.react:react-native:+" + implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version" + implementation 'androidx.exifinterface:exifinterface:1.3.6' +} + +if (isNewArchitectureEnabled()) { + react { + jsRootDir = file("../src/") + libraryName = "RNTSketchCanvasView" + codegenJavaPackageName = "com.sourcetoad.reactnativesketchcanvas" + } } diff --git a/android/gradle.properties b/android/gradle.properties index 3a78d4a8..8ce64a52 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -1,3 +1,5 @@ -RNSketchCanvas_minSdkVersion=16 -RNSketchCanvas_targetSdkVersion=27 -RNSketchCanvas_compileSdkVersion=27 +RNTSketchCanvas_kotlinVersion=1.7.0 +RNTSketchCanvas_minSdkVersion=21 +RNTSketchCanvas_targetSdkVersion=31 +RNTSketchCanvas_compileSdkVersion=31 +RNTSketchCanvas_ndkversion=21.4.7075529 diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml index 346c40b7..58b0cab9 100644 --- a/android/src/main/AndroidManifest.xml +++ b/android/src/main/AndroidManifest.xml @@ -1,4 +1,3 @@ - - \ No newline at end of file + package="com.sourcetoad.reactnativesketchcanvas"> + diff --git a/android/src/main/AndroidManifestNew.xml b/android/src/main/AndroidManifestNew.xml new file mode 100644 index 00000000..a2f47b60 --- /dev/null +++ b/android/src/main/AndroidManifestNew.xml @@ -0,0 +1,2 @@ + + diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManager.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManager.kt new file mode 100644 index 00000000..82630ffb --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManager.kt @@ -0,0 +1,166 @@ +package com.sourcetoad.reactnativesketchcanvas + +import android.graphics.PointF +import com.facebook.react.bridge.ReadableArray +import com.facebook.react.bridge.ReadableMap +import com.facebook.react.common.MapBuilder +import com.facebook.react.module.annotations.ReactModule +import com.facebook.react.uimanager.SimpleViewManager +import com.facebook.react.uimanager.ThemedReactContext +import com.facebook.react.uimanager.ViewManagerDelegate +import com.facebook.react.uimanager.annotations.ReactProp +import com.facebook.react.viewmanagers.RNTSketchCanvasManagerDelegate +import com.facebook.react.viewmanagers.RNTSketchCanvasManagerInterface + + +@ReactModule(name = RNTSketchCanvasViewManager.NAME) +class RNTSketchCanvasViewManager : + SimpleViewManager(), + RNTSketchCanvasManagerInterface { + private val mDelegate: ViewManagerDelegate + + init { + mDelegate = RNTSketchCanvasManagerDelegate(this) + } + + override fun getDelegate(): ViewManagerDelegate? { + return mDelegate + } + + override fun getName(): String { + return NAME + } + + override fun receiveCommand( + root: RNTSketchCanvasView, + commandId: String?, + args: ReadableArray? + ) { + mDelegate.receiveCommand(root, commandId, args) + } + + override fun getExportedCustomBubblingEventTypeConstants(): MutableMap { + return MapBuilder.of( + OnChangeEvent.EVENT_NAME, + MapBuilder.of( + "phasedRegistrationNames", + MapBuilder.of( + "bubbled", "onChange", + "captured", "onChangeCapture" + ) + ) + ) + } + + override fun getExportedCustomDirectEventTypeConstants(): MutableMap { + return MapBuilder.of( + OnGenerateBase64Event.EVENT_NAME, + MapBuilder.of( + "registrationName", + "onGenerateBase64" + ) + ) + } + + public override fun createViewInstance(context: ThemedReactContext): RNTSketchCanvasView { + return RNTSketchCanvasView(context) + } + + companion object { + const val NAME = "RNTSketchCanvas" + } + + @ReactProp(name = "localSourceImage") + override fun setLocalSourceImage(view: RNTSketchCanvasView?, localSourceImage: ReadableMap?) { + if (localSourceImage?.getString("filename") != null) { + view?.getSketchCanvas()?.openImageFile( + if (localSourceImage.hasKey("filename")) localSourceImage.getString("filename") else null, + if (localSourceImage.hasKey("directory")) localSourceImage.getString("directory") else "", + if (localSourceImage.hasKey("mode")) localSourceImage.getString("mode") else "" + ) + } + } + + @ReactProp(name = "text") + override fun setText(view: RNTSketchCanvasView?, text: ReadableArray?) { + view?.getSketchCanvas()?.setCanvasText(text) + } + + override fun save( + view: RNTSketchCanvasView?, + imageType: String, + folder: String, + filename: String, + transparent: Boolean, + includeImage: Boolean, + includeText: Boolean, + cropToImageSize: Boolean + ) { + view?.getSketchCanvas()?.save( + imageType, + folder ?: "", + filename, + transparent, + includeImage, + includeText, + cropToImageSize + ) + } + + override fun addPoint(view: RNTSketchCanvasView?, x: Double, y: Double) { + view?.getSketchCanvas()?.addPoint(x.toFloat(), y.toFloat()) + } + + override fun addPath( + view: RNTSketchCanvasView?, + pathId: Int, + color: Int, + width: Double, + points: ReadableArray? + ) { + val path: ReadableArray? = points + val pointPath = path?.let { ArrayList(it.size()) } + if (path != null) { + for (i in 0 until path.size()) { + val coor = + path.getString(i).split(",".toRegex()).dropLastWhile { it.isEmpty() } + .toTypedArray() + if (pointPath != null) { + pointPath.add(PointF(coor[0].toFloat(), coor[1].toFloat())) + } + } + } + + if (pointPath != null) { + view?.getSketchCanvas()?.addPath(pathId, color, width.toFloat(), pointPath) + }; + } + + override fun newPath(view: RNTSketchCanvasView?, pathId: Int, color: Int, width: Double) { + view?.getSketchCanvas()?.newPath(pathId, color, width.toFloat()) + } + + override fun deletePath(view: RNTSketchCanvasView?, pathId: Int) { + view?.getSketchCanvas()?.deletePath(pathId) + } + + override fun endPath(view: RNTSketchCanvasView?) { + view?.getSketchCanvas()?.end() + } + + override fun clear(view: RNTSketchCanvasView?) { + view?.getSketchCanvas()?.clear() + } + + override fun transferToBase64( + view: RNTSketchCanvasView?, + imageType: String, + transparent: Boolean, + includeImage: Boolean, + includeText: Boolean, + cropToImageSize: Boolean + ) { + view?.getSketchCanvas() + ?.getBase64(imageType, transparent, includeImage, includeText, cropToImageSize) + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManagerModule.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManagerModule.kt new file mode 100644 index 00000000..a061d328 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasManagerModule.kt @@ -0,0 +1,26 @@ +package com.sourcetoad.reactnativesketchcanvas + +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.module.annotations.ReactModule + +@ReactModule(name = RNTSketchCanvasManagerModule.NAME) +class RNTSketchCanvasManagerModule(reactContext: ReactApplicationContext) : + NativeSketchCanvasModuleSpec(reactContext) { + + override fun getName(): String { + return NAME + } + + override fun getTypedExportedConstants(): MutableMap { + return mutableMapOf( + "MainBundlePath" to "", + "NSDocumentDirectory" to "", + "NSLibraryDirectory" to "", + "NSCachesDirectory" to "" + ) + } + + companion object { + const val NAME = "SketchCanvasModule" + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasPackage.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasPackage.kt new file mode 100644 index 00000000..ad99e475 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasPackage.kt @@ -0,0 +1,41 @@ +package com.sourcetoad.reactnativesketchcanvas + +import com.facebook.react.BaseReactPackage +import com.facebook.react.bridge.NativeModule +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.module.model.ReactModuleInfo +import com.facebook.react.module.model.ReactModuleInfoProvider +import com.facebook.react.uimanager.ViewManager +import java.util.HashMap + +class RNTSketchCanvasViewPackage : BaseReactPackage() { + override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? { + return if (name == RNTSketchCanvasManagerModule.NAME) { + RNTSketchCanvasManagerModule(reactContext) + } else { + null + } + } + + override fun createViewManagers(reactContext: ReactApplicationContext): List> { + val viewManagers: MutableList> = ArrayList() + viewManagers.add(RNTSketchCanvasViewManager()) + return viewManagers + } + + override fun getReactModuleInfoProvider(): ReactModuleInfoProvider { + return ReactModuleInfoProvider { + val moduleInfos: MutableMap = HashMap() + moduleInfos[RNTSketchCanvasManagerModule.NAME] = + ReactModuleInfo( + RNTSketchCanvasManagerModule.NAME, + RNTSketchCanvasManagerModule.NAME, + false, // canOverrideExistingModule + false, // needsEagerInit + false, // isCxxModule + true // isTurboModule + ) + moduleInfos + } + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasView.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasView.kt new file mode 100644 index 00000000..eef73136 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/RNTSketchCanvasView.kt @@ -0,0 +1,45 @@ +package com.sourcetoad.reactnativesketchcanvas + +import com.facebook.react.uimanager.ThemedReactContext +import android.util.AttributeSet +import android.view.ViewGroup + +class RNTSketchCanvasView : ViewGroup { + private var sketchCanvas: SketchCanvas? = null + + constructor(context: ThemedReactContext?) : super(context) { + init(context) + } + + constructor(context: ThemedReactContext?, attrs: AttributeSet?) : super(context, attrs) { + init(context) + } + + constructor(context: ThemedReactContext?, attrs: AttributeSet?, defStyleAttr: Int) : super( + context, + attrs, + defStyleAttr + ) { + init(context) + } + + private fun init(context: ThemedReactContext?) { + sketchCanvas = SketchCanvas(context!!) + + addView(sketchCanvas) + } + + fun getSketchCanvas(): SketchCanvas { + return sketchCanvas!! + } + + override fun onLayout( + changed: Boolean, + left: Int, + top: Int, + right: Int, + bottom: Int + ) { + sketchCanvas!!.layout(0, 0, right - left, bottom - top) + } +} \ No newline at end of file diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchCanvas.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchCanvas.kt new file mode 100644 index 00000000..cbbcb61f --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchCanvas.kt @@ -0,0 +1,556 @@ +package com.sourcetoad.reactnativesketchcanvas + +import android.database.Cursor +import android.graphics.* +import android.net.Uri +import android.os.Environment +import android.provider.MediaStore +import android.util.Base64 +import android.util.Log +import android.view.View +import androidx.exifinterface.media.ExifInterface +import com.facebook.react.bridge.ReadableArray +import com.facebook.react.uimanager.ThemedReactContext +import com.facebook.react.uimanager.UIManagerHelper +import java.io.ByteArrayOutputStream +import java.io.File +import java.io.FileOutputStream +import java.util.* + +class CanvasText { + var text: String? = null + var paint: Paint? = null + var anchor: PointF? = null + var position: PointF? = null + var drawPosition: PointF? = null + var lineOffset: PointF? = null + var isAbsoluteCoordinate = false + var textBounds: Rect? = null + var height = 0f +} + +class SketchCanvas(context: ThemedReactContext) : View(context) { + private val mPaths = ArrayList() + private var mCurrentPath: SketchData? = null + private val mContext: ThemedReactContext = context + private var mDisableHardwareAccelerated = false + private val mPaint = Paint() + private var mDrawingBitmap: Bitmap? = null + private var mTranslucentDrawingBitmap: Bitmap? = null + private var mDrawingCanvas: Canvas? = null + private var mTranslucentDrawingCanvas: Canvas? = null + private var mNeedsFullRedraw = true + private var mOriginalWidth = 0 + private var mOriginalHeight = 0 + private var mBackgroundImage: Bitmap? = null + private var mContentMode: String? = null + private val mArrCanvasText = ArrayList() + private val mArrTextOnSketch = ArrayList() + private val mArrSketchOnText = ArrayList() + + fun getParentViewId(): Int { + val parentView = parent as View + return parentView.id + } + + private fun getFileUri(filepath: String): Uri { + var uri = Uri.parse(filepath) + if (uri.scheme == null) { + uri = Uri.parse("file://$filepath") + } + return uri + } + + private fun getOriginalFilepath(filepath: String): String { + val uri = getFileUri(filepath) + var originalFilepath = filepath + if (uri.scheme == "content") { + try { + val cursor: Cursor? = mContext.contentResolver.query(uri, null, null, null, null) + if (cursor != null && cursor.moveToFirst()) { + originalFilepath = + cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA)) + cursor.close() + } + } catch (ignored: IllegalArgumentException) { + } + } + return originalFilepath + } + + fun openImageFile(filename: String?, directory: String?, mode: String?): Boolean { + if (filename != null) { + val res = + mContext.resources.getIdentifier( + if (filename.lastIndexOf('.') == -1) filename + else filename.substring(0, filename.lastIndexOf('.')), + "drawable", + mContext.packageName + ) + val bitmapOptions = BitmapFactory.Options() + val originalFilepath = getOriginalFilepath(filename) + val file = File(originalFilepath, directory ?: "") + var bitmap = + if (res == 0) { + BitmapFactory.decodeFile(file.toString(), bitmapOptions) + } else { + BitmapFactory.decodeResource(mContext.resources, res) + } + try { + val exif = ExifInterface(file.absolutePath) + val matrix = Matrix() + val orientation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, 1) + when (orientation) { + ExifInterface.ORIENTATION_ROTATE_90 -> matrix.postRotate(90f) + ExifInterface.ORIENTATION_ROTATE_180 -> matrix.postRotate(180f) + ExifInterface.ORIENTATION_ROTATE_270 -> matrix.postRotate(270f) + } + bitmap = + Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true) + } catch (e: Exception) { + } + if (bitmap != null) { + mBackgroundImage = bitmap + mOriginalHeight = bitmap.height + mOriginalWidth = bitmap.width + mContentMode = mode + invalidateCanvas(true) + return true + } + } + return false + } + + fun setCanvasText(aText: ReadableArray?) { + mArrCanvasText.clear() + mArrSketchOnText.clear() + mArrTextOnSketch.clear() + if (aText != null) { + for (i in 0 until aText.size()) { + val property = aText.getMap(i) + if (property?.hasKey("text") == true) { + val alignment = property.getString("alignment") ?: "Left" + var lineOffset = 0 + var maxTextWidth = 0 + val lines = property.getString("text")!!.split("\n").toTypedArray() + val textSet = ArrayList(lines.size) + for (line in lines) { + val arr = + if (property.hasKey("overlay") && + "TextOnSketch" == property.getString("overlay") + ) + mArrTextOnSketch + else mArrSketchOnText + val text = CanvasText() + val p = Paint(Paint.ANTI_ALIAS_FLAG) + p.textAlign = Paint.Align.LEFT + text.text = line + if (property.hasKey("font")) { + val font: Typeface = + try { + Typeface.createFromAsset( + mContext.assets, + property.getString("font") + ) + } catch (ex: Exception) { + Typeface.create(property.getString("font"), Typeface.NORMAL) + } + p.typeface = font + } + + p.textSize = property.getDouble("fontSize").toFloat() + p.color = if (property.hasKey("fontColor")) property.getInt("fontColor") else Color.BLACK + text.anchor = + PointF( + property.getMap("anchor")?.getDouble("x")?.toFloat() ?: 0f, + property.getMap("anchor")?.getDouble("y")?.toFloat() ?: 0f + ) + text.position = + PointF( + property.getMap("position")?.getDouble("x")?.toFloat() ?: 0f, + property.getMap("position")?.getDouble("y")?.toFloat() ?: 0f + ) + text.paint = p + text.isAbsoluteCoordinate = + !(property.hasKey("coordinate") && "Ratio" == property.getString("coordinate")) + text.textBounds = Rect() + p.getTextBounds(text.text, 0, text.text!!.length, text.textBounds) + text.lineOffset = PointF(0f, lineOffset.toFloat()) + + if (property.hasKey("lineHeightMultiple")) { + lineOffset += + (text.textBounds!!.height() * + 1.5 * + (property.getDouble("lineHeightMultiple"))) + .toInt() + } + + maxTextWidth = maxTextWidth.coerceAtLeast(text.textBounds!!.width()) + arr.add(text) + mArrCanvasText.add(text) + textSet.add(text) + } + for (text in textSet) { + text.height = lineOffset.toFloat() + if (text.textBounds!!.width() < maxTextWidth) { + val diff = maxTextWidth - text.textBounds!!.width() + text.textBounds!!.left += (diff * text.anchor!!.x).toInt() + text.textBounds!!.right += (diff * text.anchor!!.x).toInt() + } + } + if (width > 0 && height > 0) { + for (text in textSet) { + text.height = lineOffset.toFloat() + val position = PointF(text.position!!.x, text.position!!.y) + if (!text.isAbsoluteCoordinate) { + position.x *= width + position.y *= height + } + position.x -= text.textBounds!!.left.toFloat() + position.y -= text.textBounds!!.top.toFloat() + position.x -= (text.textBounds!!.width() * text.anchor!!.x) + position.y -= (text.height * text.anchor!!.y) + text.drawPosition = position + } + } + if (lines.size > 1) { + for (text in textSet) { + when (alignment) { + "Left" -> {} + "Right" -> + text.lineOffset!!.x = + (maxTextWidth - text.textBounds!!.width()).toFloat() + + "Center" -> + text.lineOffset!!.x = + ((maxTextWidth - text.textBounds!!.width()) / 2).toFloat() + } + } + } + } + } + } + invalidateCanvas(false) + } + + fun clear() { + mPaths.clear() + mCurrentPath = null + mNeedsFullRedraw = true + invalidateCanvas(true) + } + + fun newPath(id: Int, strokeColor: Int, strokeWidth: Float) { + mCurrentPath = SketchData(id, strokeColor, strokeWidth) + mPaths.add(mCurrentPath!!) + val isErase = strokeColor == Color.TRANSPARENT + if (isErase && !mDisableHardwareAccelerated) { + mDisableHardwareAccelerated = true + setLayerType(LAYER_TYPE_SOFTWARE, null) + } + invalidateCanvas(true) + } + + fun addPoint(x: Float, y: Float) { + val updateRect = mCurrentPath!!.addPoint(PointF(x, y)) + if (mCurrentPath!!.isTranslucent) { + mTranslucentDrawingCanvas!!.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY) + mCurrentPath!!.draw(mTranslucentDrawingCanvas!!) + } else { + mCurrentPath!!.drawLastPoint(mDrawingCanvas!!) + } + invalidate(updateRect) + } + + fun addPath(id: Int, strokeColor: Int, strokeWidth: Float, points: ArrayList) { + var exist = false + for (data in mPaths) { + if (data.id == id) { + exist = true + break + } + } + if (!exist) { + val newPath = SketchData(id, strokeColor, strokeWidth, points) + mPaths.add(newPath) + val isErase = strokeColor == Color.TRANSPARENT + if (isErase && !mDisableHardwareAccelerated) { + mDisableHardwareAccelerated = true + setLayerType(LAYER_TYPE_SOFTWARE, null) + } + newPath.draw(mDrawingCanvas!!) + invalidateCanvas(true) + } + } + + fun deletePath(id: Int) { + var index = -1 + for (i in mPaths.indices) { + if (mPaths[i].id == id) { + index = i + break + } + } + if (index > -1) { + mPaths.removeAt(index) + mNeedsFullRedraw = true + invalidateCanvas(true) + } + } + + fun end() { + if (mCurrentPath != null) { + if (mCurrentPath!!.isTranslucent) { + mCurrentPath!!.draw(mDrawingCanvas!!) + mTranslucentDrawingCanvas!!.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY) + } + mCurrentPath = null + } + } + + fun onSaved(success: Boolean, path: String?) { + val surfaceId = UIManagerHelper.getSurfaceId(mContext) + UIManagerHelper.getEventDispatcherForReactTag(mContext, getParentViewId()) + ?.dispatchEvent( + OnChangeEvent( + surfaceId, + getParentViewId(), + "save", + success, + path ?: "", + 0 + ) + ) + } + + fun save( + format: String, + folder: String, + filename: String, + transparent: Boolean, + includeImage: Boolean, + includeText: Boolean, + cropToImageSize: Boolean + ) { + val f = + File( + Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES) + .toString() + File.separator + folder + ) + val success = if (f.exists()) true else f.mkdirs() + if (success) { + val bitmap = + createImage( + format == "png" && transparent, + includeImage, + includeText, + cropToImageSize + ) + val file = + File( + Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES) + .toString() + + File.separator + + folder + + File.separator + + filename + + if (format == "png") ".png" else ".jpg" + ) + try { + bitmap.compress( + if (format == "png") Bitmap.CompressFormat.PNG else Bitmap.CompressFormat.JPEG, + if (format == "png") 100 else 90, + FileOutputStream(file) + ) + onSaved(true, file.path) + } catch (e: Exception) { + e.printStackTrace() + onSaved(false, null) + } + } else { + Log.e("SketchCanvas", "Failed to create folder!") + onSaved(false, null) + } + } + + fun getBase64( + format: String, + transparent: Boolean, + includeImage: Boolean, + includeText: Boolean, + cropToImageSize: Boolean + ) { + val bitmap = + createImage(format == "png" && transparent, includeImage, includeText, cropToImageSize) + val byteArrayOS = ByteArrayOutputStream() + bitmap.compress( + if (format == "png") Bitmap.CompressFormat.PNG else Bitmap.CompressFormat.JPEG, + if (format == "png") 100 else 90, + byteArrayOS + ) + + UIManagerHelper.getEventDispatcherForReactTag(mContext, getParentViewId()) + ?.dispatchEvent( + OnGenerateBase64Event( + UIManagerHelper.getSurfaceId(mContext), + getParentViewId(), + Base64.encodeToString(byteArrayOS.toByteArray(), Base64.DEFAULT) + ) + ) + } + + override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { + super.onSizeChanged(w, h, oldw, oldh) + if (width > 0 && height > 0) { + mDrawingBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888) + mDrawingCanvas = Canvas(mDrawingBitmap!!) + mTranslucentDrawingBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888) + mTranslucentDrawingCanvas = Canvas(mTranslucentDrawingBitmap!!) + for (text in mArrCanvasText) { + val position = PointF(text.position!!.x, text.position!!.y) + if (!text.isAbsoluteCoordinate) { + position.x *= width + position.y *= height + } + position.x -= text.textBounds!!.left.toFloat() + position.y -= text.textBounds!!.top.toFloat() + position.x -= (text.textBounds!!.width() * text.anchor!!.x) + position.y -= (text.height * text.anchor!!.y) + text.drawPosition = position + } + mNeedsFullRedraw = true + invalidate() + } + } + + override fun onDraw(canvas: Canvas) { + super.onDraw(canvas) + if (mNeedsFullRedraw && mDrawingCanvas != null) { + mDrawingCanvas!!.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY) + for (path in mPaths) { + path.draw(mDrawingCanvas!!) + } + mNeedsFullRedraw = false + } + if (mBackgroundImage != null) { + val dstRect = Rect() + canvas.getClipBounds(dstRect) + canvas.drawBitmap( + mBackgroundImage!!, + null, + Utility.fillImage( + mBackgroundImage!!.width.toFloat(), + mBackgroundImage!!.height.toFloat(), + dstRect.width().toFloat(), + dstRect.height().toFloat(), + mContentMode!! + ), + null + ) + } + for (text in mArrSketchOnText) { + canvas.drawText( + text.text!!, + text.drawPosition!!.x + text.lineOffset!!.x, + text.drawPosition!!.y + text.lineOffset!!.y, + text.paint!! + ) + } + if (mDrawingBitmap != null) { + canvas.drawBitmap(mDrawingBitmap!!, 0f, 0f, mPaint) + } + if (mTranslucentDrawingBitmap != null && mCurrentPath != null && mCurrentPath!!.isTranslucent) { + canvas.drawBitmap(mTranslucentDrawingBitmap!!, 0f, 0f, mPaint) + } + for (text in mArrTextOnSketch) { + canvas.drawText( + text.text!!, + text.drawPosition!!.x + text.lineOffset!!.x, + text.drawPosition!!.y + text.lineOffset!!.y, + text.paint!! + ) + } + } + + private fun invalidateCanvas(shouldDispatchEvent: Boolean) { + if (shouldDispatchEvent) { + val surfaceId = UIManagerHelper.getSurfaceId(mContext) + + UIManagerHelper.getEventDispatcherForReactTag(mContext, getParentViewId()) + ?.dispatchEvent( + OnChangeEvent( + surfaceId, + getParentViewId(), + "pathsUpdate", + false, + "", + mPaths.size + ) + ) + } + invalidate() + } + + private fun createImage( + transparent: Boolean, + includeImage: Boolean, + includeText: Boolean, + cropToImageSize: Boolean + ): Bitmap { + val bitmap = + Bitmap.createBitmap( + if (mBackgroundImage != null && cropToImageSize) mOriginalWidth else width, + if (mBackgroundImage != null && cropToImageSize) mOriginalHeight else height, + Bitmap.Config.ARGB_8888 + ) + val canvas = Canvas(bitmap) + canvas.drawARGB(if (transparent) 0 else 255, 255, 255, 255) + if (mBackgroundImage != null && includeImage) { + val targetRect = Rect() + Utility.fillImage( + mBackgroundImage!!.width.toFloat(), + mBackgroundImage!!.height.toFloat(), + bitmap.width.toFloat(), + bitmap.height.toFloat(), + "AspectFit" + ) + .roundOut(targetRect) + canvas.drawBitmap(mBackgroundImage!!, null, targetRect, null) + } + if (includeText) { + for (text in mArrSketchOnText) { + canvas.drawText( + text.text!!, + text.drawPosition!!.x + text.lineOffset!!.x, + text.drawPosition!!.y + text.lineOffset!!.y, + text.paint!! + ) + } + } + if (mBackgroundImage != null && cropToImageSize) { + val targetRect = Rect() + Utility.fillImage( + mDrawingBitmap!!.width.toFloat(), + mDrawingBitmap!!.height.toFloat(), + bitmap.width.toFloat(), + bitmap.height.toFloat(), + "AspectFill" + ) + .roundOut(targetRect) + canvas.drawBitmap(mDrawingBitmap!!, null, targetRect, mPaint) + } else { + canvas.drawBitmap(mDrawingBitmap!!, 0f, 0f, mPaint) + } + if (includeText) { + for (text in mArrTextOnSketch) { + canvas.drawText( + text.text!!, + text.drawPosition!!.x + text.lineOffset!!.x, + text.drawPosition!!.y + text.lineOffset!!.y, + text.paint!! + ) + } + } + return bitmap + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchData.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchData.kt new file mode 100644 index 00000000..ca801d29 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/SketchData.kt @@ -0,0 +1,188 @@ +package com.sourcetoad.reactnativesketchcanvas + +import android.graphics.* +import java.util.ArrayList + +class SketchData(val id: Int, val strokeColor: Int, val strokeWidth: Float, points: ArrayList = ArrayList()) { + val points: ArrayList = ArrayList(points) + val isTranslucent: Boolean = ((strokeColor shr 24) and 0xff) != 255 && strokeColor != Color.TRANSPARENT + + private var mPaint: Paint? = null + private var mPath: Path? = if (isTranslucent) evaluatePath() else null + private var mDirty: RectF? = null + + companion object { + fun midPoint(p1: PointF, p2: PointF): PointF { + return PointF((p1.x + p2.x) * 0.5f, (p1.y + p2.y) * 0.5f) + } + } + + constructor(id: Int, strokeColor: Int, strokeWidth: Float) : this(id, strokeColor, strokeWidth, ArrayList()) + + fun addPoint(p: PointF): Rect { + points.add(p) + val updateRect: RectF + + val pointsCount = points.size + + if (isTranslucent) { + if (pointsCount >= 3) { + addPointToPath(mPath!!, points[pointsCount - 3], points[pointsCount - 2], p) + } else if (pointsCount >= 2) { + addPointToPath(mPath!!, points[0], points[0], p) + } else { + addPointToPath(mPath!!, p, p, p) + } + + val x = p.x + val y = p.y + if (mDirty == null) { + mDirty = RectF(x, y, x + 1, y + 1) + updateRect = RectF(x - strokeWidth, y - strokeWidth, x + strokeWidth, y + strokeWidth) + } else { + mDirty!!.union(x, y) + updateRect = RectF(mDirty!!.left - strokeWidth, mDirty!!.top - strokeWidth, mDirty!!.right + strokeWidth, mDirty!!.bottom + strokeWidth) + } + } else { + if (pointsCount >= 3) { + val a = points[pointsCount - 3] + val b = points[pointsCount - 2] + val c = p + val prevMid = midPoint(a, b) + val currentMid = midPoint(b, c) + + updateRect = RectF(prevMid.x, prevMid.y, prevMid.x, prevMid.y) + updateRect.union(b.x, b.y) + updateRect.union(currentMid.x, currentMid.y) + } else if (pointsCount >= 2) { + val a = points[pointsCount - 2] + val b = p + val mid = midPoint(a, b) + + updateRect = RectF(a.x, a.y, a.x, a.y) + updateRect.union(mid.x, mid.y) + } else { + updateRect = RectF(p.x, p.y, p.x, p.y) + } + + updateRect.inset(-strokeWidth * 2, -strokeWidth * 2) + } + val integralRect = Rect() + updateRect.roundOut(integralRect) + + return integralRect + } + + fun drawLastPoint(canvas: Canvas) { + val pointsCount = points.size + if (pointsCount < 1) { + return + } + + draw(canvas, pointsCount - 1) + } + + fun draw(canvas: Canvas) { + if (isTranslucent) { + canvas.drawPath(mPath!!, getPaint()) + } else { + val pointsCount = points.size + for (i in 0 until pointsCount) { + draw(canvas, i) + } + } + } + + private fun getPaint(): Paint { + if (mPaint == null) { + val isErase = strokeColor == Color.TRANSPARENT + + mPaint = Paint() + mPaint!!.color = strokeColor + mPaint!!.strokeWidth = strokeWidth + mPaint!!.style = Paint.Style.STROKE + mPaint!!.strokeCap = Paint.Cap.ROUND + mPaint!!.strokeJoin = Paint.Join.ROUND + mPaint!!.isAntiAlias = true + mPaint!!.xfermode = PorterDuffXfermode(if (isErase) PorterDuff.Mode.CLEAR else PorterDuff.Mode.SRC_OVER) + } + return mPaint!! + } + + private fun draw(canvas: Canvas, pointIndex: Int) { + val pointsCount = points.size + if (pointIndex >= pointsCount) { + return + } + + if (pointsCount >= 3 && pointIndex >= 2) { + val a = points[pointIndex - 2] + val b = points[pointIndex - 1] + val c = points[pointIndex] + val prevMid = midPoint(a, b) + val currentMid = midPoint(b, c) + + // Draw a curve + val path = Path() + path.moveTo(prevMid.x, prevMid.y) + path.quadTo(b.x, b.y, currentMid.x, currentMid.y) + + canvas.drawPath(path, getPaint()) + } else if (pointsCount >= 2 && pointIndex >= 1) { + val a = points[pointIndex - 1] + val b = points[pointIndex] + val mid = midPoint(a, b) + + // Draw a line to the middle of points a and b + // This is so the next draw which uses a curve looks correct and continues from there + canvas.drawLine(a.x, a.y, mid.x, mid.y, getPaint()) + } else if (pointsCount >= 1) { + val a = points[pointIndex] + + // Draw a single point + canvas.drawPoint(a.x, a.y, getPaint()) + } + } + + private fun evaluatePath(): Path { + val pointsCount = points.size + val path = Path() + + for (pointIndex in 0 until pointsCount) { + if (pointsCount >= 3 && pointIndex >= 2) { + val a = points[pointIndex - 2] + val b = points[pointIndex - 1] + val c = points[pointIndex] + val prevMid = midPoint(a, b) + val currentMid = midPoint(b, c) + + // Draw a curve + path.moveTo(prevMid.x, prevMid.y) + path.quadTo(b.x, b.y, currentMid.x, currentMid.y) + } else if (pointsCount >= 2 && pointIndex >= 1) { + val a = points[pointIndex - 1] + val b = points[pointIndex] + val mid = midPoint(a, b) + + // Draw a line to the middle of points a and b + // This is so the next draw which uses a curve looks correct and continues from there + path.moveTo(a.x, a.y) + path.lineTo(mid.x, mid.y) + } else if (pointsCount >= 1) { + val a = points[pointIndex] + + // Draw a single point + path.moveTo(a.x, a.y) + path.lineTo(a.x, a.y) + } + } + return path + } + + private fun addPointToPath(path: Path, tPoint: PointF, pPoint: PointF, point: PointF) { + val mid1 = PointF((pPoint.x + tPoint.x) * 0.5f, (pPoint.y + tPoint.y) * 0.5f) + val mid2 = PointF((point.x + pPoint.x) * 0.5f, (point.y + pPoint.y) * 0.5f) + path.moveTo(mid1.x, mid1.y) + path.quadTo(pPoint.x, pPoint.y, mid2.x, mid2.y) + } +} \ No newline at end of file diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/Utility.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/Utility.kt new file mode 100644 index 00000000..2a7d2c22 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/Utility.kt @@ -0,0 +1,31 @@ +package com.sourcetoad.reactnativesketchcanvas + +import android.graphics.RectF + +object Utility { + @JvmStatic + fun fillImage(imgWidth: Float, imgHeight: Float, targetWidth: Float, targetHeight: Float, mode: String): RectF { + val imageAspectRatio = imgWidth / imgHeight + val targetAspectRatio = targetWidth / targetHeight + return when (mode) { + "AspectFill" -> { + val scaleFactor = if (targetAspectRatio < imageAspectRatio) targetHeight / imgHeight else targetWidth / imgWidth + val w = imgWidth * scaleFactor + val h = imgHeight * scaleFactor + RectF((targetWidth - w) / 2, (targetHeight - h) / 2, w + (targetWidth - w) / 2, h + (targetHeight - h) / 2) + } + "AspectFit" -> { + val scaleFactor = if (targetAspectRatio > imageAspectRatio) targetHeight / imgHeight else targetWidth / imgWidth + val w = imgWidth * scaleFactor + val h = imgHeight * scaleFactor + RectF((targetWidth - w) / 2, (targetHeight - h) / 2, w + (targetWidth - w) / 2, h + (targetHeight - h) / 2) + } + "ScaleToFill" -> { + RectF(0f, 0f, targetWidth, targetHeight) + } + else -> { + RectF(0f, 0f, targetWidth, targetHeight) + } + } + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnChangeEvent.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnChangeEvent.kt new file mode 100644 index 00000000..1a58a90f --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnChangeEvent.kt @@ -0,0 +1,36 @@ +package com.sourcetoad.reactnativesketchcanvas + +import com.facebook.react.bridge.Arguments +import com.facebook.react.bridge.WritableMap +import com.facebook.react.uimanager.events.Event + +class OnChangeEvent( + surfaceId: Int, + viewId: Int, + private val eventType: String, + private val success: Boolean, + private val path: String, + private val pathsUpdate: Int +) : Event(surfaceId, viewId) { + override fun getEventName(): String { + return EVENT_NAME + } + + override fun getEventData(): WritableMap { + val eventData = Arguments.createMap() + + if (eventType == "pathsUpdate") { + eventData.putString("eventType", eventType) + eventData.putInt("pathsUpdate", pathsUpdate) + } else { + eventData.putString("eventType", eventType) + eventData.putBoolean("success", success) + eventData.putString("path", path) + } + return eventData + } + + companion object { + const val EVENT_NAME = "onChange" + } +} diff --git a/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnGenerateBase64Event.kt b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnGenerateBase64Event.kt new file mode 100644 index 00000000..dbae5f63 --- /dev/null +++ b/android/src/main/java/com/sourcetoad/reactnativesketchcanvas/event/OnGenerateBase64Event.kt @@ -0,0 +1,27 @@ +package com.sourcetoad.reactnativesketchcanvas + +import com.facebook.react.bridge.Arguments +import com.facebook.react.bridge.WritableMap +import com.facebook.react.uimanager.events.Event + +class OnGenerateBase64Event( + surfaceId: Int, + viewId: Int, + private val base64: String +) : Event(surfaceId, viewId) { + override fun getEventName(): String { + return EVENT_NAME + } + + override fun getEventData(): WritableMap { + val eventData = Arguments.createMap() + + eventData.putString("base64", base64); + + return eventData + } + + companion object { + const val EVENT_NAME = "onGenerateBase64" + } +} diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvas.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvas.java deleted file mode 100644 index 497d9629..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvas.java +++ /dev/null @@ -1,473 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import android.database.Cursor; -import android.graphics.Typeface; -import android.graphics.Bitmap; -import android.graphics.BitmapFactory; -import android.graphics.Canvas; -import android.graphics.Color; -import android.graphics.Paint; -import android.graphics.PointF; -import android.graphics.PorterDuff; -import android.graphics.Rect; -import android.graphics.Matrix; -import android.media.ExifInterface; -import android.net.Uri; -import android.os.Environment; -import android.provider.MediaStore; -import android.util.Base64; -import android.util.Log; -import android.view.View; - -import com.facebook.react.bridge.Arguments; -import com.facebook.react.bridge.WritableMap; -import com.facebook.react.bridge.ReadableArray; -import com.facebook.react.bridge.ReadableMap; -import com.facebook.react.uimanager.ThemedReactContext; -import com.facebook.react.uimanager.events.RCTEventEmitter; - -import java.io.ByteArrayOutputStream; -import java.io.File; -import java.io.FileOutputStream; -import java.util.ArrayList; - -class CanvasText { - public String text; - public Paint paint; - public PointF anchor, position, drawPosition, lineOffset; - public boolean isAbsoluteCoordinate; - public Rect textBounds; - public float height; -} - -public class SketchCanvas extends View { - - private ArrayList mPaths = new ArrayList(); - private SketchData mCurrentPath = null; - - private ThemedReactContext mContext; - private boolean mDisableHardwareAccelerated = false; - - private Paint mPaint = new Paint(); - private Bitmap mDrawingBitmap = null, mTranslucentDrawingBitmap = null; - private Canvas mDrawingCanvas = null, mTranslucentDrawingCanvas = null; - - private boolean mNeedsFullRedraw = true; - - private int mOriginalWidth, mOriginalHeight; - private Bitmap mBackgroundImage; - private String mContentMode; - - private ArrayList mArrCanvasText = new ArrayList(); - private ArrayList mArrTextOnSketch = new ArrayList(); - private ArrayList mArrSketchOnText = new ArrayList(); - - public SketchCanvas(ThemedReactContext context) { - super(context); - mContext = context; - } - - private Uri getFileUri(String filepath) { - Uri uri = Uri.parse(filepath); - if (uri.getScheme() == null) { - uri = Uri.parse("file://" + filepath); - } - return uri; - } - - private String getOriginalFilepath(String filepath) { - Uri uri = getFileUri(filepath); - String originalFilepath = filepath; - if (uri.getScheme().equals("content")) { - try { - Cursor cursor = mContext.getContentResolver().query(uri, null, null, null, null); - if (cursor.moveToFirst()) { - originalFilepath = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA)); - } - cursor.close(); - } catch (IllegalArgumentException ignored) { - } - } - return originalFilepath; - } - - public boolean openImageFile(String filename, String directory, String mode) { - if (filename != null) { - int res = mContext.getResources().getIdentifier( - filename.lastIndexOf('.') == -1 ? filename : filename.substring(0, filename.lastIndexOf('.')), - "drawable", - mContext.getPackageName()); - BitmapFactory.Options bitmapOptions = new BitmapFactory.Options(); - - String originalFilepath = getOriginalFilepath(filename); - File file = new File(originalFilepath, directory == null ? "" : directory); - - Bitmap bitmap = res == 0 ? - BitmapFactory.decodeFile(file.toString(), bitmapOptions) : - BitmapFactory.decodeResource(mContext.getResources(), res); - - try { - ExifInterface exif = new ExifInterface(file.getAbsolutePath()); - Matrix matrix = new Matrix(); - - int orientation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, 1); - if (orientation == ExifInterface.ORIENTATION_ROTATE_90) { - matrix.postRotate(90); - } else if (orientation == ExifInterface.ORIENTATION_ROTATE_180) { - matrix.postRotate(180); - } else if (orientation == ExifInterface.ORIENTATION_ROTATE_270) { - matrix.postRotate(270); - } - - bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true); // rotating bitmap - } catch (Exception e) { - - } - - if (bitmap != null) { - mBackgroundImage = bitmap; - mOriginalHeight = bitmap.getHeight(); - mOriginalWidth = bitmap.getWidth(); - mContentMode = mode; - - invalidateCanvas(true); - - return true; - } - } - return false; - } - - public void setCanvasText(ReadableArray aText) { - mArrCanvasText.clear(); - mArrSketchOnText.clear(); - mArrTextOnSketch.clear(); - - if (aText != null) { - for (int i = 0; i < aText.size(); i++) { - ReadableMap property = aText.getMap(i); - if (property.hasKey("text")) { - String alignment = property.hasKey("alignment") ? property.getString("alignment") : "Left"; - int lineOffset = 0, maxTextWidth = 0; - String[] lines = property.getString("text").split("\n"); - ArrayList textSet = new ArrayList(lines.length); - for (String line : lines) { - ArrayList arr = property.hasKey("overlay") && "TextOnSketch".equals(property.getString("overlay")) ? mArrTextOnSketch : mArrSketchOnText; - CanvasText text = new CanvasText(); - Paint p = new Paint(Paint.ANTI_ALIAS_FLAG); - p.setTextAlign(Paint.Align.LEFT); - text.text = line; - if (property.hasKey("font")) { - Typeface font; - try { - font = Typeface.createFromAsset(mContext.getAssets(), property.getString("font")); - } catch (Exception ex) { - font = Typeface.create(property.getString("font"), Typeface.NORMAL); - } - p.setTypeface(font); - } - p.setTextSize(property.hasKey("fontSize") ? (float) property.getDouble("fontSize") : 12); - p.setColor(property.hasKey("fontColor") ? property.getInt("fontColor") : 0xFF000000); - text.anchor = property.hasKey("anchor") ? new PointF((float) property.getMap("anchor").getDouble("x"), (float) property.getMap("anchor").getDouble("y")) : new PointF(0, 0); - text.position = property.hasKey("position") ? new PointF((float) property.getMap("position").getDouble("x"), (float) property.getMap("position").getDouble("y")) : new PointF(0, 0); - text.paint = p; - text.isAbsoluteCoordinate = !(property.hasKey("coordinate") && "Ratio".equals(property.getString("coordinate"))); - text.textBounds = new Rect(); - p.getTextBounds(text.text, 0, text.text.length(), text.textBounds); - - text.lineOffset = new PointF(0, lineOffset); - lineOffset += text.textBounds.height() * 1.5 * (property.hasKey("lineHeightMultiple") ? property.getDouble("lineHeightMultiple") : 1); - maxTextWidth = Math.max(maxTextWidth, text.textBounds.width()); - - arr.add(text); - mArrCanvasText.add(text); - textSet.add(text); - } - for (CanvasText text : textSet) { - text.height = lineOffset; - if (text.textBounds.width() < maxTextWidth) { - float diff = maxTextWidth - text.textBounds.width(); - text.textBounds.left += diff * text.anchor.x; - text.textBounds.right += diff * text.anchor.x; - } - } - if (getWidth() > 0 && getHeight() > 0) { - for (CanvasText text : textSet) { - text.height = lineOffset; - PointF position = new PointF(text.position.x, text.position.y); - if (!text.isAbsoluteCoordinate) { - position.x *= getWidth(); - position.y *= getHeight(); - } - position.x -= text.textBounds.left; - position.y -= text.textBounds.top; - position.x -= (text.textBounds.width() * text.anchor.x); - position.y -= (text.height * text.anchor.y); - text.drawPosition = position; - } - } - if (lines.length > 1) { - for (CanvasText text : textSet) { - switch (alignment) { - case "Left": - default: - break; - case "Right": - text.lineOffset.x = (maxTextWidth - text.textBounds.width()); - break; - case "Center": - text.lineOffset.x = (maxTextWidth - text.textBounds.width()) / 2; - break; - } - } - } - } - } - } - - invalidateCanvas(false); - } - - public void clear() { - mPaths.clear(); - mCurrentPath = null; - mNeedsFullRedraw = true; - invalidateCanvas(true); - } - - public void newPath(int id, int strokeColor, float strokeWidth) { - mCurrentPath = new SketchData(id, strokeColor, strokeWidth); - mPaths.add(mCurrentPath); - boolean isErase = strokeColor == Color.TRANSPARENT; - if (isErase && mDisableHardwareAccelerated == false) { - mDisableHardwareAccelerated = true; - setLayerType(View.LAYER_TYPE_SOFTWARE, null); - } - invalidateCanvas(true); - } - - public void addPoint(float x, float y) { - Rect updateRect = mCurrentPath.addPoint(new PointF(x, y)); - - if (mCurrentPath.isTranslucent) { - mTranslucentDrawingCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY); - mCurrentPath.draw(mTranslucentDrawingCanvas); - } else { - mCurrentPath.drawLastPoint(mDrawingCanvas); - } - invalidate(updateRect); - } - - public void addPath(int id, int strokeColor, float strokeWidth, ArrayList points) { - boolean exist = false; - for (SketchData data : mPaths) { - if (data.id == id) { - exist = true; - break; - } - } - - if (!exist) { - SketchData newPath = new SketchData(id, strokeColor, strokeWidth, points); - mPaths.add(newPath); - boolean isErase = strokeColor == Color.TRANSPARENT; - if (isErase && mDisableHardwareAccelerated == false) { - mDisableHardwareAccelerated = true; - setLayerType(View.LAYER_TYPE_SOFTWARE, null); - } - newPath.draw(mDrawingCanvas); - invalidateCanvas(true); - } - } - - public void deletePath(int id) { - int index = -1; - for (int i = 0; i < mPaths.size(); i++) { - if (mPaths.get(i).id == id) { - index = i; - break; - } - } - - if (index > -1) { - mPaths.remove(index); - mNeedsFullRedraw = true; - invalidateCanvas(true); - } - } - - public void end() { - if (mCurrentPath != null) { - if (mCurrentPath.isTranslucent) { - mCurrentPath.draw(mDrawingCanvas); - mTranslucentDrawingCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY); - } - mCurrentPath = null; - } - } - - public void onSaved(boolean success, String path) { - WritableMap event = Arguments.createMap(); - event.putBoolean("success", success); - event.putString("path", path); - mContext.getJSModule(RCTEventEmitter.class).receiveEvent( - getId(), - "topChange", - event); - } - - public void save(String format, String folder, String filename, boolean transparent, boolean includeImage, boolean includeText, boolean cropToImageSize) { - File f = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES) + File.separator + folder); - boolean success = f.exists() ? true : f.mkdirs(); - if (success) { - Bitmap bitmap = createImage(format.equals("png") && transparent, includeImage, includeText, cropToImageSize); - - File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES) + - File.separator + folder + File.separator + filename + (format.equals("png") ? ".png" : ".jpg")); - try { - bitmap.compress( - format.equals("png") ? Bitmap.CompressFormat.PNG : Bitmap.CompressFormat.JPEG, - format.equals("png") ? 100 : 90, - new FileOutputStream(file)); - this.onSaved(true, file.getPath()); - } catch (Exception e) { - e.printStackTrace(); - onSaved(false, null); - } - } else { - Log.e("SketchCanvas", "Failed to create folder!"); - onSaved(false, null); - } - } - - public String getBase64(String format, boolean transparent, boolean includeImage, boolean includeText, boolean cropToImageSize) { - WritableMap event = Arguments.createMap(); - Bitmap bitmap = createImage(format.equals("png") && transparent, includeImage, includeText, cropToImageSize); - ByteArrayOutputStream byteArrayOS = new ByteArrayOutputStream(); - - bitmap.compress( - format.equals("png") ? Bitmap.CompressFormat.PNG : Bitmap.CompressFormat.JPEG, - format.equals("png") ? 100 : 90, - byteArrayOS); - return Base64.encodeToString(byteArrayOS.toByteArray(), Base64.DEFAULT); - } - - @Override - protected void onSizeChanged(int w, int h, int oldw, int oldh) { - super.onSizeChanged(w, h, oldw, oldh); - - if (getWidth() > 0 && getHeight() > 0) { - mDrawingBitmap = Bitmap.createBitmap(getWidth(), getHeight(), - Bitmap.Config.ARGB_8888); - mDrawingCanvas = new Canvas(mDrawingBitmap); - mTranslucentDrawingBitmap = Bitmap.createBitmap(getWidth(), getHeight(), - Bitmap.Config.ARGB_8888); - mTranslucentDrawingCanvas = new Canvas(mTranslucentDrawingBitmap); - - for (CanvasText text : mArrCanvasText) { - PointF position = new PointF(text.position.x, text.position.y); - if (!text.isAbsoluteCoordinate) { - position.x *= getWidth(); - position.y *= getHeight(); - } - - position.x -= text.textBounds.left; - position.y -= text.textBounds.top; - position.x -= (text.textBounds.width() * text.anchor.x); - position.y -= (text.height * text.anchor.y); - text.drawPosition = position; - - } - - mNeedsFullRedraw = true; - invalidate(); - } - } - - @Override - protected void onDraw(Canvas canvas) { - super.onDraw(canvas); - - if (mNeedsFullRedraw && mDrawingCanvas != null) { - mDrawingCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.MULTIPLY); - for (SketchData path : mPaths) { - path.draw(mDrawingCanvas); - } - mNeedsFullRedraw = false; - } - - if (mBackgroundImage != null) { - Rect dstRect = new Rect(); - canvas.getClipBounds(dstRect); - canvas.drawBitmap(mBackgroundImage, null, - Utility.fillImage(mBackgroundImage.getWidth(), mBackgroundImage.getHeight(), dstRect.width(), dstRect.height(), mContentMode), - null); - } - - for (CanvasText text : mArrSketchOnText) { - canvas.drawText(text.text, text.drawPosition.x + text.lineOffset.x, text.drawPosition.y + text.lineOffset.y, text.paint); - } - - if (mDrawingBitmap != null) { - canvas.drawBitmap(mDrawingBitmap, 0, 0, mPaint); - } - - if (mTranslucentDrawingBitmap != null && mCurrentPath != null && mCurrentPath.isTranslucent) { - canvas.drawBitmap(mTranslucentDrawingBitmap, 0, 0, mPaint); - } - - for (CanvasText text : mArrTextOnSketch) { - canvas.drawText(text.text, text.drawPosition.x + text.lineOffset.x, text.drawPosition.y + text.lineOffset.y, text.paint); - } - } - - private void invalidateCanvas(boolean shouldDispatchEvent) { - if (shouldDispatchEvent) { - WritableMap event = Arguments.createMap(); - event.putInt("pathsUpdate", mPaths.size()); - mContext.getJSModule(RCTEventEmitter.class).receiveEvent( - getId(), - "topChange", - event); - } - invalidate(); - } - - private Bitmap createImage(boolean transparent, boolean includeImage, boolean includeText, boolean cropToImageSize) { - Bitmap bitmap = Bitmap.createBitmap( - mBackgroundImage != null && cropToImageSize ? mOriginalWidth : getWidth(), - mBackgroundImage != null && cropToImageSize ? mOriginalHeight : getHeight(), - Bitmap.Config.ARGB_8888); - Canvas canvas = new Canvas(bitmap); - canvas.drawARGB(transparent ? 0 : 255, 255, 255, 255); - - if (mBackgroundImage != null && includeImage) { - Rect targetRect = new Rect(); - Utility.fillImage(mBackgroundImage.getWidth(), mBackgroundImage.getHeight(), - bitmap.getWidth(), bitmap.getHeight(), "AspectFit").roundOut(targetRect); - canvas.drawBitmap(mBackgroundImage, null, targetRect, null); - } - - if (includeText) { - for (CanvasText text : mArrSketchOnText) { - canvas.drawText(text.text, text.drawPosition.x + text.lineOffset.x, text.drawPosition.y + text.lineOffset.y, text.paint); - } - } - - if (mBackgroundImage != null && cropToImageSize) { - Rect targetRect = new Rect(); - Utility.fillImage(mDrawingBitmap.getWidth(), mDrawingBitmap.getHeight(), - bitmap.getWidth(), bitmap.getHeight(), "AspectFill").roundOut(targetRect); - canvas.drawBitmap(mDrawingBitmap, null, targetRect, mPaint); - } else { - canvas.drawBitmap(mDrawingBitmap, 0, 0, mPaint); - } - - if (includeText) { - for (CanvasText text : mArrTextOnSketch) { - canvas.drawText(text.text, text.drawPosition.x + text.lineOffset.x, text.drawPosition.y + text.lineOffset.y, text.paint); - } - } - return bitmap; - } -} diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasManager.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasManager.java deleted file mode 100644 index 1d83c625..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasManager.java +++ /dev/null @@ -1,129 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import com.facebook.react.bridge.ReadableArray; -import com.facebook.react.bridge.ReadableMap; -import com.facebook.react.uimanager.SimpleViewManager; -import com.facebook.react.uimanager.ThemedReactContext; -import com.facebook.react.uimanager.annotations.ReactProp; - -import java.util.HashMap; -import java.util.Map; -import java.util.ArrayList; - -import android.graphics.PointF; - -import javax.annotation.Nullable; - -public class SketchCanvasManager extends SimpleViewManager { - public static final int COMMAND_ADD_POINT = 1; - public static final int COMMAND_NEW_PATH = 2; - public static final int COMMAND_CLEAR = 3; - public static final int COMMAND_ADD_PATH = 4; - public static final int COMMAND_DELETE_PATH = 5; - public static final int COMMAND_SAVE = 6; - public static final int COMMAND_END_PATH = 7; - public static final int COMMAND_TO_BASE64 = 8; - - public static SketchCanvas Canvas = null; - - private static final String PROPS_LOCAL_SOURCE_IMAGE = "localSourceImage"; - private static final String PROPS_TEXT = "text"; - - @Override - public String getName() { - return "RNSketchCanvas"; - } - - @Override - protected SketchCanvas createViewInstance(ThemedReactContext context) { - SketchCanvasManager.Canvas = new SketchCanvas(context); - return SketchCanvasManager.Canvas; - } - - @ReactProp(name = PROPS_LOCAL_SOURCE_IMAGE) - public void setLocalSourceImage(SketchCanvas viewContainer, ReadableMap localSourceImage) { - if (localSourceImage != null && localSourceImage.getString("filename") != null) { - viewContainer.openImageFile( - localSourceImage.hasKey("filename") ? localSourceImage.getString("filename") : null, - localSourceImage.hasKey("directory") ? localSourceImage.getString("directory") : "", - localSourceImage.hasKey("mode") ? localSourceImage.getString("mode") : "" - ); - } - } - - @ReactProp(name = PROPS_TEXT) - public void setText(SketchCanvas viewContainer, ReadableArray text) { - viewContainer.setCanvasText(text); - } - - @Override - public Map getCommandsMap() { - Map map = new HashMap<>(); - - map.put("addPoint", COMMAND_ADD_POINT); - map.put("newPath", COMMAND_NEW_PATH); - map.put("clear", COMMAND_CLEAR); - map.put("addPath", COMMAND_ADD_PATH); - map.put("deletePath", COMMAND_DELETE_PATH); - map.put("save", COMMAND_SAVE); - map.put("endPath", COMMAND_END_PATH); - - return map; - } - - @Override - protected void addEventEmitters(ThemedReactContext reactContext, SketchCanvas view) { - - } - - @Override - public void receiveCommand(SketchCanvas view, String commandType, @Nullable ReadableArray args) { - receiveCommand(view, Integer.parseInt(commandType), args); - } - - @Override - public void receiveCommand(SketchCanvas view, int commandType, @Nullable ReadableArray args) { - switch (commandType) { - case COMMAND_ADD_POINT: { - view.addPoint((float) args.getDouble(0), (float) args.getDouble(1)); - return; - } - case COMMAND_NEW_PATH: { - view.newPath(args.getInt(0), args.getInt(1), (float) args.getDouble(2)); - return; - } - case COMMAND_CLEAR: { - view.clear(); - return; - } - case COMMAND_ADD_PATH: { - ReadableArray path = args.getArray(3); - ArrayList pointPath = new ArrayList(path.size()); - for (int i = 0; i < path.size(); i++) { - String[] coor = path.getString(i).split(","); - pointPath.add(new PointF(Float.parseFloat(coor[0]), Float.parseFloat(coor[1]))); - } - view.addPath(args.getInt(0), args.getInt(1), (float) args.getDouble(2), pointPath); - return; - } - case COMMAND_DELETE_PATH: { - view.deletePath(args.getInt(0)); - return; - } - case COMMAND_SAVE: { - view.save(args.getString(0), args.getString(1), args.getString(2), args.getBoolean(3), args.getBoolean(4), args.getBoolean(5), args.getBoolean(6)); - return; - } - case COMMAND_END_PATH: { - view.end(); - return; - } - - default: - throw new IllegalArgumentException(String.format( - "Unsupported command %d received by %s.", - commandType, - getClass().getSimpleName())); - } - } -} diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasModule.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasModule.java deleted file mode 100644 index b297c803..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasModule.java +++ /dev/null @@ -1,38 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import com.facebook.react.bridge.Callback; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.bridge.ReactContextBaseJavaModule; -import com.facebook.react.bridge.ReactMethod; -import com.facebook.react.uimanager.NativeViewHierarchyManager; -import com.facebook.react.uimanager.UIBlock; -import com.facebook.react.uimanager.UIManagerModule; - -public class SketchCanvasModule extends ReactContextBaseJavaModule { - SketchCanvasModule(ReactApplicationContext reactContext) { - super(reactContext); - } - - @Override - public String getName() { - return "SketchCanvasModule"; - } - - @ReactMethod - public void transferToBase64(final int tag, final String type, final boolean transparent, - final boolean includeImage, final boolean includeText, final boolean cropToImageSize, final Callback callback) { - try { - final ReactApplicationContext context = getReactApplicationContext(); - UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class); - uiManager.addUIBlock(new UIBlock() { - public void execute(NativeViewHierarchyManager nvhm) { - SketchCanvas view = (SketchCanvas) nvhm.resolveView(tag); - String base64 = view.getBase64(type, transparent, includeImage, includeText, cropToImageSize); - callback.invoke(null, base64); - } - }); - } catch (Exception e) { - callback.invoke(e.getMessage(), null); - } - } -} \ No newline at end of file diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasPackage.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasPackage.java deleted file mode 100644 index 7cbba858..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasPackage.java +++ /dev/null @@ -1,35 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import com.facebook.react.ReactPackage; -import com.facebook.react.bridge.JavaScriptModule; -import com.facebook.react.bridge.NativeModule; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.uimanager.ViewManager; - -import java.util.Arrays; -import java.util.Collections; -import java.util.List; - -public class SketchCanvasPackage implements ReactPackage { - - public SketchCanvasPackage() { - } - - @Override - public List createNativeModules(ReactApplicationContext reactContext) { - return Arrays.asList( - new SketchCanvasModule(reactContext) - ); - } - - @Override - public List createViewManagers(ReactApplicationContext reactContext) { - return Arrays.asList( - new SketchCanvasManager() - ); - } - - public List> createJSModules() { - return Collections.emptyList(); - } -} diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchData.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchData.java deleted file mode 100644 index 9f9221da..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchData.java +++ /dev/null @@ -1,220 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import android.graphics.Canvas; -import android.graphics.Color; -import android.graphics.Paint; -import android.graphics.Path; -import android.graphics.PointF; -import android.graphics.PorterDuff; -import android.graphics.PorterDuffXfermode; -import android.graphics.Rect; -import android.graphics.RectF; - -import java.util.ArrayList; - -public class SketchData { - public final ArrayList points = new ArrayList(); - public final int id, strokeColor; - public final float strokeWidth; - public final boolean isTranslucent; - - private Paint mPaint; - private Path mPath; - private RectF mDirty = null; - - public static PointF midPoint(PointF p1, PointF p2) { - return new PointF((p1.x + p2.x) * 0.5f, (p1.y + p2.y) * 0.5f); - } - - public SketchData(int id, int strokeColor, float strokeWidth) { - this.id = id; - this.strokeColor = strokeColor; - this.strokeWidth = strokeWidth; - this.isTranslucent = ((strokeColor >> 24) & 0xff) != 255 && strokeColor != Color.TRANSPARENT; - mPath = this.isTranslucent ? new Path() : null; - } - - public SketchData(int id, int strokeColor, float strokeWidth, ArrayList points) { - this.id = id; - this.strokeColor = strokeColor; - this.strokeWidth = strokeWidth; - this.points.addAll(points); - this.isTranslucent = ((strokeColor >> 24) & 0xff) != 255 && strokeColor != Color.TRANSPARENT; - mPath = this.isTranslucent ? evaluatePath() : null; - } - - public Rect addPoint(PointF p) { - points.add(p); - - RectF updateRect; - - int pointsCount = points.size(); - - if (this.isTranslucent) { - if (pointsCount >= 3) { - addPointToPath(mPath, - this.points.get(pointsCount - 3), - this.points.get(pointsCount - 2), - p); - } else if (pointsCount >= 2) { - addPointToPath(mPath, this.points.get(0), this.points.get(0), p); - } else { - addPointToPath(mPath, p, p, p); - } - - float x = p.x, y = p.y; - if (mDirty == null) { - mDirty = new RectF(x, y, x + 1, y + 1); - updateRect = new RectF(x - this.strokeWidth, y - this.strokeWidth, - x + this.strokeWidth, y + this.strokeWidth); - } else { - mDirty.union(x, y); - updateRect = new RectF( - mDirty.left - this.strokeWidth, mDirty.top - this.strokeWidth, - mDirty.right + this.strokeWidth, mDirty.bottom + this.strokeWidth - ); - } - } else { - if (pointsCount >= 3) { - PointF a = points.get(pointsCount - 3); - PointF b = points.get(pointsCount - 2); - PointF c = p; - PointF prevMid = midPoint(a, b); - PointF currentMid = midPoint(b, c); - - updateRect = new RectF(prevMid.x, prevMid.y, prevMid.x, prevMid.y); - updateRect.union(b.x, b.y); - updateRect.union(currentMid.x, currentMid.y); - } else if (pointsCount >= 2) { - PointF a = points.get(pointsCount - 2); - PointF b = p; - PointF mid = midPoint(a, b); - - updateRect = new RectF(a.x, a.y, a.x, a.y); - updateRect.union(mid.x, mid.y); - } else { - updateRect = new RectF(p.x, p.y, p.x, p.y); - } - - updateRect.inset(-strokeWidth * 2, -strokeWidth * 2); - - } - Rect integralRect = new Rect(); - updateRect.roundOut(integralRect); - - return integralRect; - } - - public void drawLastPoint(Canvas canvas) { - int pointsCount = points.size(); - if (pointsCount < 1) { - return; - } - - draw(canvas, pointsCount - 1); - } - - public void draw(Canvas canvas) { - if (this.isTranslucent) { - canvas.drawPath(mPath, getPaint()); - } else { - int pointsCount = points.size(); - for (int i = 0; i < pointsCount; i++) { - draw(canvas, i); - } - } - } - - private Paint getPaint() { - if (mPaint == null) { - boolean isErase = strokeColor == Color.TRANSPARENT; - - mPaint = new Paint(); - mPaint.setColor(strokeColor); - mPaint.setStrokeWidth(strokeWidth); - mPaint.setStyle(Paint.Style.STROKE); - mPaint.setStrokeCap(Paint.Cap.ROUND); - mPaint.setStrokeJoin(Paint.Join.ROUND); - mPaint.setAntiAlias(true); - mPaint.setXfermode(new PorterDuffXfermode(isErase ? PorterDuff.Mode.CLEAR : PorterDuff.Mode.SRC_OVER)); - } - return mPaint; - } - - private void draw(Canvas canvas, int pointIndex) { - int pointsCount = points.size(); - if (pointIndex >= pointsCount) { - return; - } - - if (pointsCount >= 3 && pointIndex >= 2) { - PointF a = points.get(pointIndex - 2); - PointF b = points.get(pointIndex - 1); - PointF c = points.get(pointIndex); - PointF prevMid = midPoint(a, b); - PointF currentMid = midPoint(b, c); - - // Draw a curve - Path path = new Path(); - path.moveTo(prevMid.x, prevMid.y); - path.quadTo(b.x, b.y, currentMid.x, currentMid.y); - - canvas.drawPath(path, getPaint()); - } else if (pointsCount >= 2 && pointIndex >= 1) { - PointF a = points.get(pointIndex - 1); - PointF b = points.get(pointIndex); - PointF mid = midPoint(a, b); - - // Draw a line to the middle of points a and b - // This is so the next draw which uses a curve looks correct and continues from there - canvas.drawLine(a.x, a.y, mid.x, mid.y, getPaint()); - } else if (pointsCount >= 1) { - PointF a = points.get(pointIndex); - - // Draw a single point - canvas.drawPoint(a.x, a.y, getPaint()); - } - } - - private Path evaluatePath() { - int pointsCount = points.size(); - Path path = new Path(); - - for (int pointIndex = 0; pointIndex < pointsCount; pointIndex++) { - if (pointsCount >= 3 && pointIndex >= 2) { - PointF a = points.get(pointIndex - 2); - PointF b = points.get(pointIndex - 1); - PointF c = points.get(pointIndex); - PointF prevMid = midPoint(a, b); - PointF currentMid = midPoint(b, c); - - // Draw a curve - path.moveTo(prevMid.x, prevMid.y); - path.quadTo(b.x, b.y, currentMid.x, currentMid.y); - } else if (pointsCount >= 2 && pointIndex >= 1) { - PointF a = points.get(pointIndex - 1); - PointF b = points.get(pointIndex); - PointF mid = midPoint(a, b); - - // Draw a line to the middle of points a and b - // This is so the next draw which uses a curve looks correct and continues from there - path.moveTo(a.x, a.y); - path.lineTo(mid.x, mid.y); - } else if (pointsCount >= 1) { - PointF a = points.get(pointIndex); - - // Draw a single point - path.moveTo(a.x, a.y); - path.lineTo(a.x, a.y); - } - } - return path; - } - - private void addPointToPath(Path path, PointF tPoint, PointF pPoint, PointF point) { - PointF mid1 = new PointF((pPoint.x + tPoint.x) * 0.5f, (pPoint.y + tPoint.y) * 0.5f); - PointF mid2 = new PointF((point.x + pPoint.x) * 0.5f, (point.y + pPoint.y) * 0.5f); - path.moveTo(mid1.x, mid1.y); - path.quadTo(pPoint.x, pPoint.y, mid2.x, mid2.y); - } -} diff --git a/android/src/main/java/com/terrylinla/rnsketchcanvas/Utility.java b/android/src/main/java/com/terrylinla/rnsketchcanvas/Utility.java deleted file mode 100644 index 3c3a3a19..00000000 --- a/android/src/main/java/com/terrylinla/rnsketchcanvas/Utility.java +++ /dev/null @@ -1,28 +0,0 @@ -package com.terrylinla.rnsketchcanvas; - -import android.graphics.RectF; - -public final class Utility { - public static RectF fillImage(float imgWidth, float imgHeight, float targetWidth, float targetHeight, String mode) { - float imageAspectRatio = imgWidth / imgHeight; - float targetAspectRatio = targetWidth / targetHeight; - switch (mode) { - case "AspectFill": { - float scaleFactor = targetAspectRatio < imageAspectRatio ? targetHeight / imgHeight : targetWidth / imgWidth; - float w = imgWidth * scaleFactor, h = imgHeight * scaleFactor; - return new RectF((targetWidth - w) / 2, (targetHeight - h) / 2, - w + (targetWidth - w) / 2, h + (targetHeight - h) / 2); - } - case "AspectFit": - default: { - float scaleFactor = targetAspectRatio > imageAspectRatio ? targetHeight / imgHeight : targetWidth / imgWidth; - float w = imgWidth * scaleFactor, h = imgHeight * scaleFactor; - return new RectF((targetWidth - w) / 2, (targetHeight - h) / 2, - w + (targetWidth - w) / 2, h + (targetHeight - h) / 2); - } - case "ScaleToFill": { - return new RectF(0, 0, targetWidth, targetHeight); - } - } - } -} \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index f7b3da3b..5d51f258 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: ['module:@react-native/babel-preset'], + presets: ['module:react-native-builder-bob/babel-preset'], }; diff --git a/example/.watchmanconfig b/example/.watchmanconfig index 9e26dfee..0967ef42 100644 --- a/example/.watchmanconfig +++ b/example/.watchmanconfig @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/example/Gemfile b/example/Gemfile index 6a7d5c7a..03278dd5 100644 --- a/example/Gemfile +++ b/example/Gemfile @@ -3,5 +3,8 @@ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version ruby ">= 2.6.10" -gem 'cocoapods', '~> 1.13' -gem 'activesupport', '>= 6.1.7.3', '< 7.1.0' +# Exclude problematic versions of cocoapods and activesupport that causes build failures. +gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' +gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' +gem 'xcodeproj', '< 1.26.0' +gem 'concurrent-ruby', '< 1.3.4' diff --git a/example/Gemfile.lock b/example/Gemfile.lock index 2e09ea81..618f239f 100644 --- a/example/Gemfile.lock +++ b/example/Gemfile.lock @@ -1,24 +1,37 @@ GEM remote: https://rubygems.org/ specs: - CFPropertyList (3.0.6) + CFPropertyList (3.0.7) + base64 + nkf rexml - activesupport (7.0.7.2) + activesupport (7.1.5.1) + base64 + benchmark (>= 0.3) + bigdecimal concurrent-ruby (~> 1.0, >= 1.0.2) + connection_pool (>= 2.2.5) + drb i18n (>= 1.6, < 2) + logger (>= 1.4.2) minitest (>= 5.1) + mutex_m + securerandom (>= 0.3) tzinfo (~> 2.0) - addressable (2.8.6) - public_suffix (>= 2.0.2, < 6.0) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) algoliasearch (1.27.5) httpclient (~> 2.8, >= 2.8.3) json (>= 1.5.1) atomos (0.1.3) + base64 (0.2.0) + benchmark (0.4.0) + bigdecimal (3.1.9) claide (1.1.0) - cocoapods (1.14.3) + cocoapods (1.15.2) addressable (~> 2.8) claide (>= 1.0.2, < 2.0) - cocoapods-core (= 1.14.3) + cocoapods-core (= 1.15.2) cocoapods-deintegrate (>= 1.0.3, < 2.0) cocoapods-downloader (>= 2.1, < 3.0) cocoapods-plugins (>= 1.0.0, < 2.0) @@ -33,7 +46,7 @@ GEM nap (~> 1.0) ruby-macho (>= 2.3.0, < 3.0) xcodeproj (>= 1.23.0, < 2.0) - cocoapods-core (1.14.3) + cocoapods-core (1.15.2) activesupport (>= 5.0, < 8) addressable (~> 2.8) algoliasearch (~> 1.0) @@ -53,47 +66,56 @@ GEM netrc (~> 0.11) cocoapods-try (1.2.0) colored2 (3.1.2) - concurrent-ruby (1.2.2) + concurrent-ruby (1.3.3) + connection_pool (2.5.0) + drb (2.2.1) escape (0.0.4) ethon (0.16.0) ffi (>= 1.15.0) - ffi (1.16.3) + ffi (1.17.1) fourflusher (2.3.1) fuzzy_match (2.0.4) gh_inspector (1.1.3) - httpclient (2.8.3) - i18n (1.14.1) + httpclient (2.9.0) + mutex_m + i18n (1.14.7) concurrent-ruby (~> 1.0) - json (2.7.1) - minitest (5.19.0) + json (2.10.1) + logger (1.6.6) + minitest (5.25.4) molinillo (0.8.0) + mutex_m (0.3.0) nanaimo (0.3.0) nap (1.1.0) netrc (0.11.0) + nkf (0.2.0) public_suffix (4.0.7) - rexml (3.3.9) + rexml (3.4.1) ruby-macho (2.5.1) + securerandom (0.3.2) typhoeus (1.4.1) ethon (>= 0.9.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) - xcodeproj (1.25.0) + xcodeproj (1.25.1) CFPropertyList (>= 2.3.3, < 4.0) atomos (~> 0.1.3) claide (>= 1.0.2, < 2.0) colored2 (~> 3.1) nanaimo (~> 0.3.0) - rexml (>= 3.3.2, < 4.0) + rexml (>= 3.3.6, < 4.0) PLATFORMS ruby DEPENDENCIES - activesupport (>= 6.1.7.3, < 7.1.0) - cocoapods (~> 1.13) + activesupport (>= 6.1.7.5, != 7.1.0) + cocoapods (>= 1.13, != 1.15.1, != 1.15.0) + concurrent-ruby (< 1.3.4) + xcodeproj (< 1.26.0) RUBY VERSION - ruby 2.7.5p203 + ruby 2.7.6p219 BUNDLED WITH - 2.1.4 + 2.3.11 diff --git a/example/README.md b/example/README.md new file mode 100644 index 00000000..12470c30 --- /dev/null +++ b/example/README.md @@ -0,0 +1,79 @@ +This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli). + +# Getting Started + +>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding. + +## Step 1: Start the Metro Server + +First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native. + +To start Metro, run the following command from the _root_ of your React Native project: + +```bash +# using npm +npm start + +# OR using Yarn +yarn start +``` + +## Step 2: Start your Application + +Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app: + +### For Android + +```bash +# using npm +npm run android + +# OR using Yarn +yarn android +``` + +### For iOS + +```bash +# using npm +npm run ios + +# OR using Yarn +yarn ios +``` + +If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly. + +This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively. + +## Step 3: Modifying your App + +Now that you have successfully run the app, let's modify it. + +1. Open `App.tsx` in your text editor of choice and edit some lines. +2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes! + + For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! + +## Congratulations! :tada: + +You've successfully run and modified your React Native App. :partying_face: + +### Now what? + +- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). + +# Troubleshooting + +If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. + +# Learn More + +To learn more about React Native, take a look at the following resources: + +- [React Native Website](https://reactnative.dev) - learn more about React Native. +- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment. +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. +- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native. diff --git a/example/__tests__/App-test.js b/example/__tests__/App-test.js deleted file mode 100644 index 17847669..00000000 --- a/example/__tests__/App-test.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @format - */ - -import 'react-native'; -import React from 'react'; -import App from '../App'; - -// Note: test renderer must be required after react-native. -import renderer from 'react-test-renderer'; - -it('renders correctly', () => { - renderer.create(); -}); diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle index 47595d40..aef828f0 100644 --- a/example/android/app/build.gradle +++ b/example/android/app/build.gradle @@ -8,14 +8,14 @@ apply plugin: "com.facebook.react" */ react { /* Folders */ - // The root of your project, i.e. where "package.json" lives. Default is '..' - // root = file("../") - // The folder where the react-native NPM package is. Default is ../node_modules/react-native - // reactNativeDir = file("../node_modules/react-native") - // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen - // codegenDir = file("../node_modules/@react-native/codegen") - // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js - // cliFile = file("../node_modules/react-native/cli.js") + // The root of your project, i.e. where "package.json" lives. Default is '../..' + // root = file("../../") + // The folder where the react-native NPM package is. Default is ../../node_modules/react-native + // reactNativeDir = file("../../node_modules/react-native") + // The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen + // codegenDir = file("../../node_modules/@react-native/codegen") + // The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js + // cliFile = file("../../node_modules/react-native/cli.js") /* Variants */ // The list of variants to that are debuggable. For those we're going to @@ -49,6 +49,9 @@ react { // // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" // hermesFlags = ["-O", "-output-source-map"] + + /* Autolinking */ + autolinkLibrariesWithApp() } /** @@ -71,19 +74,16 @@ def jscFlavor = 'org.webkit:android-jsc:+' android { ndkVersion rootProject.ext.ndkVersion - buildToolsVersion rootProject.ext.buildToolsVersion compileSdk rootProject.ext.compileSdkVersion - namespace "com.example"; + namespace "sourcetoad.reactnativesketchcanvas.example" defaultConfig { - applicationId "com.example" + applicationId "sourcetoad.reactnativesketchcanvas.example" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" - - missingDimensionStrategy 'react-native-camera', 'general' } signingConfigs { debug { @@ -107,11 +107,10 @@ android { } } - - dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") + if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { @@ -119,4 +118,6 @@ dependencies { } } -apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) +def isNewArchitectureEnabled() { + return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true" +} diff --git a/example/android/app/src/debug/AndroidManifest.xml b/example/android/app/src/debug/AndroidManifest.xml index ced5aabf..eb98c01a 100644 --- a/example/android/app/src/debug/AndroidManifest.xml +++ b/example/android/app/src/debug/AndroidManifest.xml @@ -2,8 +2,6 @@ - - - - + android:theme="@style/AppTheme" + android:supportsRtl="true"> = - PackageList(this).packages.apply { - // Packages that cannot be autolinked yet can be added manually here, for example: - // add(MyReactNativePackage()) - } + object : DefaultReactNativeHost(this) { + override fun getPackages(): List = + PackageList(this).packages.apply { + // Packages that cannot be autolinked yet can be added manually here, for + // example: + // add(MyReactNativePackage()) + } - override fun getJSMainModuleName(): String = "index" + override fun getJSMainModuleName(): String = "index" - override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG + override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG - override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED - override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED - } + override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED + override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED + } override val reactHost: ReactHost get() = getDefaultReactHost(applicationContext, reactNativeHost) - override fun onCreate() { super.onCreate() - SoLoader.init(this, false) + SoLoader.init(this, OpenSourceMergedSoMapping) if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { // If you opted-in for the New Architecture, we load the native entry point for this app. load() diff --git a/example/android/app/src/main/res/drawable/rn_edit_text_material.xml b/example/android/app/src/main/res/drawable/rn_edit_text_material.xml index f35d9962..5c25e728 100644 --- a/example/android/app/src/main/res/drawable/rn_edit_text_material.xml +++ b/example/android/app/src/main/res/drawable/rn_edit_text_material.xml @@ -17,10 +17,11 @@ android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material" android:insetRight="@dimen/abc_edit_text_inset_horizontal_material" android:insetTop="@dimen/abc_edit_text_inset_top_material" - android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"> + android:insetBottom="@dimen/abc_edit_text_inset_bottom_material" + > - NSAllowsArbitraryLoads NSAllowsLocalNetworking - NSCameraUsageDescription - Your message to user when the camera is accessed for the first time NSLocationWhenInUseUsageDescription - NSMicrophoneUsageDescription - Your message to user when the microphone is accessed for the first time - NSPhotoLibraryAddUsageDescription - Use Photo Library - NSPhotoLibraryUsageDescription - Your message to user when the photo library is accessed for the first time UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities diff --git a/example/ios/example/LaunchScreen.storyboard b/example/ios/ReactNativeSketchCanvasExample/LaunchScreen.storyboard similarity index 93% rename from example/ios/example/LaunchScreen.storyboard rename to example/ios/ReactNativeSketchCanvasExample/LaunchScreen.storyboard index a2139fff..b8915839 100644 --- a/example/ios/example/LaunchScreen.storyboard +++ b/example/ios/ReactNativeSketchCanvasExample/LaunchScreen.storyboard @@ -16,7 +16,7 @@ - (this._sketchCanvas = ref)} + ref={(ref) => (this._sketchCanvas = ref)} style={this.props.canvasStyle} strokeColor={ this.state.color + @@ -313,7 +325,7 @@ export default class RNSketchCanvas extends React.Component< permissionDialogTitle={this.props.permissionDialogTitle} permissionDialogMessage={this.props.permissionDialogMessage} /> - + { + MainBundlePath: string; + NSDocumentDirectory: string; + NSLibraryDirectory: string; + NSCachesDirectory: string; + }; +} + +export default TurboModuleRegistry.getEnforcing('SketchCanvasModule'); diff --git a/src/specs/SketchCanvasNativeComponent.ts b/src/specs/SketchCanvasNativeComponent.ts new file mode 100644 index 00000000..ef4cd7ea --- /dev/null +++ b/src/specs/SketchCanvasNativeComponent.ts @@ -0,0 +1,117 @@ +import type { ViewProps, HostComponent } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; +import type { + DirectEventHandler, + BubblingEventHandler, + Int32, + Double, +} from 'react-native/Libraries/Types/CodegenTypes'; + +export interface LocalSourceImage { + filename: string; + directory?: string; + mode?: string; +} + +type CanvasText = { + text: string; + font?: string; + fontSize?: Double; + fontColor?: Int32; + overlay?: string; + anchor?: { x: Double; y: Double }; + position: { x: Double; y: Double }; + coordinate?: string; + /** + * If your text is multiline, `alignment` can align shorter lines with left/center/right. + */ + alignment?: string; + /** + * If your text is multiline, `lineHeightMultiple` can adjust the space between lines. + */ + lineHeightMultiple?: Double; +}; + +type CanvasChangeEvent = { + eventType: string; + pathsUpdate?: Int32; + success?: boolean; + path?: string; +}; + +type ComponentType = HostComponent; + +export interface NativeProps extends ViewProps { + /** + * Local source image to load into the canvas + */ + localSourceImage?: LocalSourceImage; + + /** + * Text to be drawn on the canvas + */ + text?: CanvasText[]; + + onChange?: BubblingEventHandler | null; + onGenerateBase64?: DirectEventHandler<{ base64: string }> | null; +} + +export interface NativeCommands { + save: ( + viewRef: React.ElementRef, + imageType: string, + folder: string, + filename: string, + transparent: boolean, + includeImage: boolean, + includeText: boolean, + cropToImageSize: boolean + ) => void; + addPoint: ( + viewRef: React.ElementRef, + x: Double, + y: Double + ) => void; + addPath: ( + viewRef: React.ElementRef, + pathId: Int32, + color: Int32, + width: Double, + points: Array + ) => void; + newPath: ( + viewRef: React.ElementRef, + pathId: Int32, + color: Int32, + width: Double + ) => void; + deletePath: (viewRef: React.ElementRef, pathId: Int32) => void; + endPath: (viewRef: React.ElementRef) => void; + clear: (viewRef: React.ElementRef) => void; + transferToBase64: ( + viewRef: React.ElementRef, + imageType: string, + transparent: boolean, + includeImage: boolean, + includeText: boolean, + cropToImageSize: boolean + ) => void; +} + +export default codegenNativeComponent( + 'RNTSketchCanvas' +) as HostComponent; + +export const Commands: NativeCommands = codegenNativeCommands({ + supportedCommands: [ + 'save', + 'addPoint', + 'addPath', + 'newPath', + 'deletePath', + 'endPath', + 'clear', + 'transferToBase64', + ], +}); diff --git a/src/types.tsx b/src/types.tsx index d5f15747..48b71136 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -1,7 +1,12 @@ -import type {StyleProp, ViewStyle} from 'react-native'; +import type { StyleProp, ViewStyle } from 'react-native'; export type ImageType = 'png' | 'jpg'; +export enum OnChangeEventType { + PathsUpdate = 'pathsUpdate', + Save = 'save', +} + export type Size = { width: number; height: number; @@ -26,8 +31,8 @@ export type CanvasText = { fontSize?: number; fontColor?: string; overlay?: 'TextOnSketch' | 'SketchOnText'; - anchor?: {x: number; y: number}; - position: {x: number; y: number}; + anchor?: { x: number; y: number }; + position: { x: number; y: number }; coordinate?: 'Absolute' | 'Ratio'; /** * If your text is multiline, `alignment` can align shorter lines with left/center/right. @@ -79,7 +84,16 @@ export interface SketchCanvasProps { onStrokeChanged?: (x: number, y: number) => void; onStrokeEnd?: (path: Path) => void; onSketchSaved?: (result: boolean, path: string) => void; + onGenerateBase64?: (result: { base64: string }) => void; onPathsChange?: (pathsCount: number) => void; + + getBase64?: ( + imageType: ImageType, + transparent: boolean, + includeImage: boolean, + includeText: boolean, + cropToImageSize: boolean + ) => void; } export interface RNSketchCanvasProps { @@ -103,11 +117,11 @@ export interface RNSketchCanvasProps { strokeSelectedComponent?: ( color: string, index: number, - changed: boolean, + changed: boolean ) => JSX.Element; strokeWidthComponent?: (width: number) => JSX.Element; - strokeColors?: {color: string}[]; + strokeColors?: { color: string }[]; defaultStrokeIndex?: number; defaultStrokeWidth?: number; @@ -132,6 +146,7 @@ export interface RNSketchCanvasProps { cropToImageSize?: boolean; }; onSketchSaved?: (result: boolean, path: string) => void; + onGenerateBase64?: (result: { base64: string }) => void; text?: CanvasText[]; /** diff --git a/tsconfig.build.json b/tsconfig.build.json index 999d3f3c..3c0636ad 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,5 +1,4 @@ - { "extends": "./tsconfig", - "exclude": ["example"] + "exclude": ["example", "lib"] } diff --git a/turbo.json b/turbo.json new file mode 100644 index 00000000..405897ee --- /dev/null +++ b/turbo.json @@ -0,0 +1,36 @@ +{ + "$schema": "https://turbo.build/schema.json", + "pipeline": { + "build:android": { + "env": ["ORG_GRADLE_PROJECT_newArchEnabled"], + "inputs": [ + "package.json", + "android", + "!android/build", + "src/*.ts", + "src/*.tsx", + "example/package.json", + "example/android", + "!example/android/.gradle", + "!example/android/build", + "!example/android/app/build" + ], + "outputs": [] + }, + "build:ios": { + "env": ["RCT_NEW_ARCH_ENABLED"], + "inputs": [ + "package.json", + "*.podspec", + "ios", + "src/*.ts", + "src/*.tsx", + "example/package.json", + "example/ios", + "!example/ios/build", + "!example/ios/Pods" + ], + "outputs": [] + } + } +}