From be25bdbdc4c5561eedabca797771d8d64a3fb8f1 Mon Sep 17 00:00:00 2001 From: Twin Edo Date: Mon, 6 May 2024 05:01:37 +0700 Subject: [PATCH 1/3] add deprecated-react-native-prop-types, fix android/build.gradle --- android/build.gradle | 2 +- index.js | 333 +++++++++++++++++++++++++--------------- package.json | 7 +- src/SketchCanvas.js | 357 +++++++++++++++++++++++++++++-------------- 4 files changed, 459 insertions(+), 240 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index 31e44f28..c97fbac9 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -28,5 +28,5 @@ android { } dependencies { - provided "com.facebook.react:react-native:+" + implementation "com.facebook.react:react-native:+" } diff --git a/index.js b/index.js index 79358429..5730a009 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' -import ReactNative, { - View, - Text, - TouchableOpacity, - FlatList, - ViewPropTypes, -} from 'react-native' -import SketchCanvas from './src/SketchCanvas' -import { requestPermissions } from './src/handlePermissions'; +import React from "react"; +import PropTypes from "prop-types"; +import { View, TouchableOpacity, FlatList } from "react-native"; +import { ViewPropTypes } from "deprecated-react-native-prop-types"; +import SketchCanvas from "./src/SketchCanvas"; +import { requestPermissions } from "./src/handlePermissions"; export default class RNSketchCanvas extends React.Component { static propTypes = { @@ -32,7 +27,9 @@ export default class RNSketchCanvas extends React.Component { strokeSelectedComponent: PropTypes.func, strokeWidthComponent: PropTypes.func, - strokeColors: PropTypes.arrayOf(PropTypes.shape({ color: PropTypes.string })), + strokeColors: PropTypes.arrayOf( + PropTypes.shape({ color: PropTypes.string }) + ), defaultStrokeIndex: PropTypes.number, defaultStrokeWidth: PropTypes.number, @@ -43,19 +40,25 @@ export default class RNSketchCanvas extends React.Component { savePreference: PropTypes.func, onSketchSaved: PropTypes.func, - text: PropTypes.arrayOf(PropTypes.shape({ - text: PropTypes.string, - font: PropTypes.string, - fontSize: PropTypes.number, - fontColor: PropTypes.string, - overlay: PropTypes.oneOf(['TextOnSketch', 'SketchOnText']), - anchor: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - position: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - coordinate: PropTypes.oneOf(['Absolute', 'Ratio']), - alignment: PropTypes.oneOf(['Left', 'Center', 'Right']), - lineHeightMultiple: PropTypes.number, - })), - localSourceImage: PropTypes.shape({ filename: PropTypes.string, directory: PropTypes.string, mode: PropTypes.string }), + text: PropTypes.arrayOf( + PropTypes.shape({ + text: PropTypes.string, + font: PropTypes.string, + fontSize: PropTypes.number, + fontColor: PropTypes.string, + overlay: PropTypes.oneOf(["TextOnSketch", "SketchOnText"]), + anchor: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), + position: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), + coordinate: PropTypes.oneOf(["Absolute", "Ratio"]), + alignment: PropTypes.oneOf(["Left", "Center", "Right"]), + lineHeightMultiple: PropTypes.number, + }) + ), + localSourceImage: PropTypes.shape({ + filename: PropTypes.string, + directory: PropTypes.string, + mode: PropTypes.string, + }), permissionDialogTitle: PropTypes.string, permissionDialogMessage: PropTypes.string, @@ -64,13 +67,13 @@ export default class RNSketchCanvas extends React.Component { static defaultProps = { containerStyle: null, canvasStyle: null, - onStrokeStart: () => { }, - onStrokeChanged: () => { }, - onStrokeEnd: () => { }, - onClosePressed: () => { }, - onUndoPressed: () => { }, - onClearPressed: () => { }, - onPathsChange: () => { }, + onStrokeStart: () => {}, + onStrokeChanged: () => {}, + onStrokeEnd: () => {}, + onClosePressed: () => {}, + onUndoPressed: () => {}, + onClearPressed: () => {}, + onPathsChange: () => {}, user: null, closeComponent: null, @@ -83,25 +86,26 @@ export default class RNSketchCanvas extends React.Component { strokeWidthComponent: null, strokeColors: [ - { color: '#000000' }, - { color: '#FF0000' }, - { color: '#00FFFF' }, - { color: '#0000FF' }, - { color: '#0000A0' }, - { color: '#ADD8E6' }, - { color: '#800080' }, - { color: '#FFFF00' }, - { color: '#00FF00' }, - { color: '#FF00FF' }, - { color: '#FFFFFF' }, - { color: '#C0C0C0' }, - { color: '#808080' }, - { color: '#FFA500' }, - { color: '#A52A2A' }, - { color: '#800000' }, - { color: '#008000' }, - { color: '#808000' }], - alphlaValues: ['33', '77', 'AA', 'FF'], + { color: "#000000" }, + { color: "#FF0000" }, + { color: "#00FFFF" }, + { color: "#0000FF" }, + { color: "#0000A0" }, + { color: "#ADD8E6" }, + { color: "#800080" }, + { color: "#FFFF00" }, + { color: "#00FF00" }, + { color: "#FF00FF" }, + { color: "#FFFFFF" }, + { color: "#C0C0C0" }, + { color: "#808080" }, + { color: "#FFA500" }, + { color: "#A52A2A" }, + { color: "#800000" }, + { color: "#008000" }, + { color: "#808000" }, + ], + alphlaValues: ["33", "77", "AA", "FF"], defaultStrokeIndex: 0, defaultStrokeWidth: 3, @@ -110,157 +114,244 @@ export default class RNSketchCanvas extends React.Component { strokeWidthStep: 3, savePreference: null, - onSketchSaved: () => { }, + onSketchSaved: () => {}, text: null, localSourceImage: null, - permissionDialogTitle: '', - permissionDialogMessage: '', + permissionDialogTitle: "", + permissionDialogMessage: "", }; - constructor(props) { - super(props) + super(props); this.state = { color: props.strokeColors[props.defaultStrokeIndex].color, strokeWidth: props.defaultStrokeWidth, - alpha: 'FF' - } + alpha: "FF", + }; - this._colorChanged = false - this._strokeWidthStep = props.strokeWidthStep - this._alphaStep = -1 + this._colorChanged = false; + this._strokeWidthStep = props.strokeWidthStep; + this._alphaStep = -1; } clear() { - this._sketchCanvas.clear() + this._sketchCanvas.clear(); } undo() { - return this._sketchCanvas.undo() + return this._sketchCanvas.undo(); } addPath(data) { - this._sketchCanvas.addPath(data) + this._sketchCanvas.addPath(data); } deletePath(id) { - this._sketchCanvas.deletePath(id) + this._sketchCanvas.deletePath(id); } save() { if (this.props.savePreference) { - const p = this.props.savePreference() - this._sketchCanvas.save(p.imageType, p.transparent, p.folder ? p.folder : '', p.filename, p.includeImage !== false, p.includeText !== false, p.cropToImageSize || false) + const p = this.props.savePreference(); + this._sketchCanvas.save( + p.imageType, + p.transparent, + p.folder ? p.folder : "", + p.filename, + p.includeImage !== false, + p.includeText !== false, + p.cropToImageSize || false + ); } else { - const date = new Date() - this._sketchCanvas.save('png', false, '', - date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + ('0' + date.getDate()).slice(-2) + ' ' + ('0' + date.getHours()).slice(-2) + '-' + ('0' + date.getMinutes()).slice(-2) + '-' + ('0' + date.getSeconds()).slice(-2), - true, true, false) + const date = new Date(); + this._sketchCanvas.save( + "png", + false, + "", + date.getFullYear() + + "-" + + (date.getMonth() + 1) + + "-" + + ("0" + date.getDate()).slice(-2) + + " " + + ("0" + date.getHours()).slice(-2) + + "-" + + ("0" + date.getMinutes()).slice(-2) + + "-" + + ("0" + date.getSeconds()).slice(-2), + true, + true, + false + ); } } nextStrokeWidth() { - if ((this.state.strokeWidth >= this.props.maxStrokeWidth && this._strokeWidthStep > 0) || - (this.state.strokeWidth <= this.props.minStrokeWidth && this._strokeWidthStep < 0)) - this._strokeWidthStep = -this._strokeWidthStep - this.setState({ strokeWidth: this.state.strokeWidth + this._strokeWidthStep }) + if ( + (this.state.strokeWidth >= this.props.maxStrokeWidth && + this._strokeWidthStep > 0) || + (this.state.strokeWidth <= this.props.minStrokeWidth && + this._strokeWidthStep < 0) + ) + this._strokeWidthStep = -this._strokeWidthStep; + this.setState({ + strokeWidth: this.state.strokeWidth + this._strokeWidthStep, + }); } _renderItem = ({ item, index }) => ( - { - if (this.state.color === item.color) { - const index = this.props.alphlaValues.indexOf(this.state.alpha) - if (this._alphaStep < 0) { - this._alphaStep = index === 0 ? 1 : -1 - this.setState({ alpha: this.props.alphlaValues[index + this._alphaStep] }) + { + if (this.state.color === item.color) { + const index = this.props.alphlaValues.indexOf(this.state.alpha); + if (this._alphaStep < 0) { + this._alphaStep = index === 0 ? 1 : -1; + this.setState({ + alpha: this.props.alphlaValues[index + this._alphaStep], + }); + } else { + this._alphaStep = + index === this.props.alphlaValues.length - 1 ? -1 : 1; + this.setState({ + alpha: this.props.alphlaValues[index + this._alphaStep], + }); + } } else { - this._alphaStep = index === this.props.alphlaValues.length - 1 ? -1 : 1 - this.setState({ alpha: this.props.alphlaValues[index + this._alphaStep] }) + this.setState({ color: item.color }); + this._colorChanged = true; } - } else { - this.setState({ color: item.color }) - this._colorChanged = true - } - }}> - {this.state.color !== item.color && this.props.strokeComponent && this.props.strokeComponent(item.color)} - {this.state.color === item.color && this.props.strokeSelectedComponent && this.props.strokeSelectedComponent(item.color + this.state.alpha, index, this._colorChanged)} + }} + > + {this.state.color !== item.color && + this.props.strokeComponent && + this.props.strokeComponent(item.color)} + {this.state.color === item.color && + this.props.strokeSelectedComponent && + this.props.strokeSelectedComponent( + item.color + this.state.alpha, + index, + this._colorChanged + )} - ) + ); componentDidUpdate() { - this._colorChanged = false + this._colorChanged = false; } async componentDidMount() { const isStoragePermissionAuthorized = await requestPermissions( this.props.permissionDialogTitle, - this.props.permissionDialogMessage, + this.props.permissionDialogMessage ); } render() { return ( - - + + {this.props.closeComponent && ( - { this.props.onClosePressed() }}> + { + this.props.onClosePressed(); + }} + > {this.props.closeComponent} - ) - } + + )} {this.props.eraseComponent && ( - { this.setState({ color: '#00000000' }) }}> + { + this.setState({ color: "#00000000" }); + }} + > {this.props.eraseComponent} - ) - } + + )} - + {this.props.strokeWidthComponent && ( - { this.nextStrokeWidth() }}> + { + this.nextStrokeWidth(); + }} + > {this.props.strokeWidthComponent(this.state.strokeWidth)} - ) - } + + )} {this.props.undoComponent && ( - { this.props.onUndoPressed(this.undo()) }}> + { + this.props.onUndoPressed(this.undo()); + }} + > {this.props.undoComponent} - ) - } + + )} {this.props.clearComponent && ( - { this.clear(); this.props.onClearPressed() }}> + { + this.clear(); + this.props.onClearPressed(); + }} + > {this.props.clearComponent} - ) - } + + )} {this.props.saveComponent && ( - { this.save() }}> + { + this.save(); + }} + > {this.props.saveComponent} - ) - } + + )} this._sketchCanvas = ref} + ref={(ref) => (this._sketchCanvas = ref)} style={this.props.canvasStyle} - strokeColor={this.state.color + (this.state.color.length === 9 ? '' : this.state.alpha)} + strokeColor={ + this.state.color + + (this.state.color.length === 9 ? "" : this.state.alpha) + } onStrokeStart={this.props.onStrokeStart} onStrokeChanged={this.props.onStrokeChanged} onStrokeEnd={this.props.onStrokeEnd} user={this.props.user} strokeWidth={this.state.strokeWidth} - onSketchSaved={(success, path) => this.props.onSketchSaved(success, path)} + onSketchSaved={(success, path) => + this.props.onSketchSaved(success, path) + } onPathsChange={this.props.onPathsChange} text={this.props.text} localSourceImage={this.props.localSourceImage} permissionDialogTitle={this.props.permissionDialogTitle} permissionDialogMessage={this.props.permissionDialogMessage} /> - + ); } -}; +} RNSketchCanvas.MAIN_BUNDLE = SketchCanvas.MAIN_BUNDLE; RNSketchCanvas.DOCUMENT = SketchCanvas.DOCUMENT; RNSketchCanvas.LIBRARY = SketchCanvas.LIBRARY; RNSketchCanvas.CACHES = SketchCanvas.CACHES; -export { - SketchCanvas -} \ No newline at end of file +export { SketchCanvas }; diff --git a/package.json b/package.json index bc79adb0..ca676425 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,8 @@ "draw" ], "nativePackage": true, - "license": "MIT" -} \ No newline at end of file + "license": "MIT", + "dependencies": { + "deprecated-react-native-prop-types": "5.0.0" + } +} diff --git a/src/SketchCanvas.js b/src/SketchCanvas.js index 8f4fe48f..26924b9e 100644 --- a/src/SketchCanvas.js +++ b/src/SketchCanvas.js @@ -1,7 +1,7 @@ -'use strict'; +"use strict"; -import React from 'react' -import PropTypes from 'prop-types' +import React from "react"; +import PropTypes from "prop-types"; import ReactNative, { requireNativeComponent, NativeModules, @@ -9,16 +9,16 @@ import ReactNative, { PanResponder, PixelRatio, Platform, - ViewPropTypes, - processColor -} from 'react-native' -import { requestPermissions } from './handlePermissions'; + processColor, +} from "react-native"; +import { ViewPropTypes } from "deprecated-react-native-prop-types"; +import { requestPermissions } from "./handlePermissions"; -const RNSketchCanvas = requireNativeComponent('RNSketchCanvas', SketchCanvas, { +const RNSketchCanvas = requireNativeComponent("RNSketchCanvas", SketchCanvas, { nativeOnly: { nativeID: true, - onChange: true - } + onChange: true, + }, }); const SketchCanvasManager = NativeModules.RNSketchCanvasManager || {}; @@ -36,19 +36,25 @@ class SketchCanvas extends React.Component { touchEnabled: PropTypes.bool, - text: PropTypes.arrayOf(PropTypes.shape({ - text: PropTypes.string, - font: PropTypes.string, - fontSize: PropTypes.number, - fontColor: PropTypes.string, - overlay: PropTypes.oneOf(['TextOnSketch', 'SketchOnText']), - anchor: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - position: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - coordinate: PropTypes.oneOf(['Absolute', 'Ratio']), - alignment: PropTypes.oneOf(['Left', 'Center', 'Right']), - lineHeightMultiple: PropTypes.number, - })), - localSourceImage: PropTypes.shape({ filename: PropTypes.string, directory: PropTypes.string, mode: PropTypes.oneOf(['AspectFill', 'AspectFit', 'ScaleToFill']) }), + text: PropTypes.arrayOf( + PropTypes.shape({ + text: PropTypes.string, + font: PropTypes.string, + fontSize: PropTypes.number, + fontColor: PropTypes.string, + overlay: PropTypes.oneOf(["TextOnSketch", "SketchOnText"]), + anchor: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), + position: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), + coordinate: PropTypes.oneOf(["Absolute", "Ratio"]), + alignment: PropTypes.oneOf(["Left", "Center", "Right"]), + lineHeightMultiple: PropTypes.number, + }) + ), + localSourceImage: PropTypes.shape({ + filename: PropTypes.string, + directory: PropTypes.string, + mode: PropTypes.oneOf(["AspectFill", "AspectFit", "ScaleToFill"]), + }), permissionDialogTitle: PropTypes.string, permissionDialogMessage: PropTypes.string, @@ -56,13 +62,13 @@ class SketchCanvas extends React.Component { static defaultProps = { style: null, - strokeColor: '#000000', + strokeColor: "#000000", strokeWidth: 3, - onPathsChange: () => { }, - onStrokeStart: () => { }, - onStrokeChanged: () => { }, - onStrokeEnd: () => { }, - onSketchSaved: () => { }, + onPathsChange: () => {}, + onStrokeStart: () => {}, + onStrokeChanged: () => {}, + onStrokeEnd: () => {}, + onSketchSaved: () => {}, user: null, touchEnabled: true, @@ -70,85 +76,155 @@ class SketchCanvas extends React.Component { text: null, localSourceImage: null, - permissionDialogTitle: '', - permissionDialogMessage: '', + permissionDialogTitle: "", + permissionDialogMessage: "", }; state = { - text: null - } + text: null, + }; constructor(props) { - super(props) - this._pathsToProcess = [] - this._paths = [] - this._path = null - this._handle = null - this._screenScale = Platform.OS === 'ios' ? 1 : PixelRatio.get() - this._offset = { x: 0, y: 0 } - this._size = { width: 0, height: 0 } - this._initialized = false + super(props); + this._pathsToProcess = []; + this._paths = []; + this._path = null; + this._handle = null; + this._screenScale = Platform.OS === "ios" ? 1 : PixelRatio.get(); + this._offset = { x: 0, y: 0 }; + this._size = { width: 0, height: 0 }; + this._initialized = false; - this.state.text = this._processText(props.text ? props.text.map(t => Object.assign({}, t)) : null) + this.state.text = this._processText( + props.text ? props.text.map((t) => Object.assign({}, t)) : null + ); } componentWillReceiveProps(nextProps) { this.setState({ - text: this._processText(nextProps.text ? nextProps.text.map(t => Object.assign({}, t)) : null) - }) + text: this._processText( + nextProps.text ? nextProps.text.map((t) => Object.assign({}, t)) : null + ), + }); } _processText(text) { - text && text.forEach(t => t.fontColor = processColor(t.fontColor)) - return text + text && text.forEach((t) => (t.fontColor = processColor(t.fontColor))); + return text; } clear() { - this._paths = [] - this._path = null - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.clear, []) + this._paths = []; + this._path = null; + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.clear, + [] + ); } undo() { let lastId = -1; - this._paths.forEach(d => lastId = d.drawer === this.props.user ? d.path.id : lastId) - if (lastId >= 0) this.deletePath(lastId) - return lastId + this._paths.forEach( + (d) => (lastId = d.drawer === this.props.user ? d.path.id : lastId) + ); + if (lastId >= 0) this.deletePath(lastId); + return lastId; } addPath(data) { if (this._initialized) { - if (this._paths.filter(p => p.path.id === data.path.id).length === 0) this._paths.push(data) - const pathData = data.path.data.map(p => { - const coor = p.split(',').map(pp => parseFloat(pp).toFixed(2)) - return `${coor[0] * this._screenScale * this._size.width / data.size.width},${coor[1] * this._screenScale * this._size.height / data.size.height}`; - }) - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.addPath, [ - data.path.id, processColor(data.path.color), data.path.width * this._screenScale, pathData - ]) + if (this._paths.filter((p) => p.path.id === data.path.id).length === 0) + this._paths.push(data); + const pathData = data.path.data.map((p) => { + const coor = p.split(",").map((pp) => parseFloat(pp).toFixed(2)); + return `${ + (coor[0] * this._screenScale * this._size.width) / data.size.width + },${ + (coor[1] * this._screenScale * this._size.height) / data.size.height + }`; + }); + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.addPath, + [ + data.path.id, + processColor(data.path.color), + data.path.width * this._screenScale, + pathData, + ] + ); } else { - this._pathsToProcess.filter(p => p.path.id === data.path.id).length === 0 && this._pathsToProcess.push(data) + this._pathsToProcess.filter((p) => p.path.id === data.path.id).length === + 0 && this._pathsToProcess.push(data); } } deletePath(id) { - this._paths = this._paths.filter(p => p.path.id !== id) - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.deletePath, [id]) + this._paths = this._paths.filter((p) => p.path.id !== id); + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.deletePath, + [id] + ); } - save(imageType, transparent, folder, filename, includeImage, includeText, cropToImageSize) { - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.save, [imageType, folder, filename, transparent, includeImage, includeText, cropToImageSize]) + save( + imageType, + transparent, + folder, + filename, + includeImage, + includeText, + cropToImageSize + ) { + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.save, + [ + imageType, + folder, + filename, + transparent, + includeImage, + includeText, + cropToImageSize, + ] + ); } getPaths() { - return this._paths + return this._paths; } - getBase64(imageType, transparent, includeImage, includeText, cropToImageSize, callback) { - if (Platform.OS === 'ios') { - SketchCanvasManager.transferToBase64(this._handle, imageType, transparent, includeImage, includeText, cropToImageSize, callback) + getBase64( + imageType, + transparent, + includeImage, + includeText, + cropToImageSize, + callback + ) { + if (Platform.OS === "ios") { + SketchCanvasManager.transferToBase64( + this._handle, + imageType, + transparent, + includeImage, + includeText, + cropToImageSize, + callback + ); } else { - NativeModules.SketchCanvasModule.transferToBase64(this._handle, imageType, transparent, includeImage, includeText, cropToImageSize, callback) + NativeModules.SketchCanvasModule.transferToBase64( + this._handle, + imageType, + transparent, + includeImage, + includeText, + cropToImageSize, + callback + ); } } @@ -161,54 +237,86 @@ class SketchCanvas extends React.Component { onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => { - if (!this.props.touchEnabled) return - const e = evt.nativeEvent - this._offset = { x: e.pageX - e.locationX, y: e.pageY - e.locationY } + if (!this.props.touchEnabled) return; + const e = evt.nativeEvent; + this._offset = { x: e.pageX - e.locationX, y: e.pageY - e.locationY }; this._path = { - id: parseInt(Math.random() * 100000000), color: this.props.strokeColor, - width: this.props.strokeWidth, data: [] - } - + id: parseInt(Math.random() * 100000000), + color: this.props.strokeColor, + width: this.props.strokeWidth, + data: [], + }; + UIManager.dispatchViewManagerCommand( this._handle, UIManager.RNSketchCanvas.Commands.newPath, [ this._path.id, processColor(this._path.color), - this._path.width * this._screenScale + this._path.width * this._screenScale, ] - ) + ); UIManager.dispatchViewManagerCommand( this._handle, UIManager.RNSketchCanvas.Commands.addPoint, [ - parseFloat((gestureState.x0 - this._offset.x).toFixed(2) * this._screenScale), - parseFloat((gestureState.y0 - this._offset.y).toFixed(2) * this._screenScale) + parseFloat( + (gestureState.x0 - this._offset.x).toFixed(2) * this._screenScale + ), + parseFloat( + (gestureState.y0 - this._offset.y).toFixed(2) * this._screenScale + ), ] - ) - const x = parseFloat((gestureState.x0 - this._offset.x).toFixed(2)), y = parseFloat((gestureState.y0 - this._offset.y).toFixed(2)) - this._path.data.push(`${x},${y}`) - this.props.onStrokeStart(x, y) + ); + const x = parseFloat((gestureState.x0 - this._offset.x).toFixed(2)), + y = parseFloat((gestureState.y0 - this._offset.y).toFixed(2)); + this._path.data.push(`${x},${y}`); + this.props.onStrokeStart(x, y); }, onPanResponderMove: (evt, gestureState) => { - if (!this.props.touchEnabled) return + if (!this.props.touchEnabled) return; if (this._path) { - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.addPoint, [ - parseFloat((gestureState.moveX - this._offset.x).toFixed(2) * this._screenScale), - parseFloat((gestureState.moveY - this._offset.y).toFixed(2) * this._screenScale) - ]) - const x = parseFloat((gestureState.moveX - this._offset.x).toFixed(2)), y = parseFloat((gestureState.moveY - this._offset.y).toFixed(2)) - this._path.data.push(`${x},${y}`) - this.props.onStrokeChanged(x, y) + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.addPoint, + [ + parseFloat( + (gestureState.moveX - this._offset.x).toFixed(2) * + this._screenScale + ), + parseFloat( + (gestureState.moveY - this._offset.y).toFixed(2) * + this._screenScale + ), + ] + ); + const x = parseFloat( + (gestureState.moveX - this._offset.x).toFixed(2) + ), + y = parseFloat((gestureState.moveY - this._offset.y).toFixed(2)); + this._path.data.push(`${x},${y}`); + this.props.onStrokeChanged(x, y); } }, onPanResponderRelease: (evt, gestureState) => { - if (!this.props.touchEnabled) return + if (!this.props.touchEnabled) return; if (this._path) { - this.props.onStrokeEnd({ path: this._path, size: this._size, drawer: this.props.user }) - this._paths.push({ path: this._path, size: this._size, drawer: this.props.user }) + this.props.onStrokeEnd({ + path: this._path, + size: this._size, + drawer: this.props.user, + }); + this._paths.push({ + path: this._path, + size: this._size, + drawer: this.props.user, + }); } - UIManager.dispatchViewManagerCommand(this._handle, UIManager.RNSketchCanvas.Commands.endPath, []) + UIManager.dispatchViewManagerCommand( + this._handle, + UIManager.RNSketchCanvas.Commands.endPath, + [] + ); }, onShouldBlockNativeResponder: (evt, gestureState) => { @@ -220,30 +328,37 @@ class SketchCanvas extends React.Component { async componentDidMount() { const isStoragePermissionAuthorized = await requestPermissions( this.props.permissionDialogTitle, - this.props.permissionDialogMessage, + this.props.permissionDialogMessage ); } render() { return ( { - this._handle = ReactNative.findNodeHandle(ref) + ref={(ref) => { + this._handle = ReactNative.findNodeHandle(ref); }} style={this.props.style} - onLayout={e => { - this._size = { width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height } - this._initialized = true - this._pathsToProcess.length > 0 && this._pathsToProcess.forEach(p => this.addPath(p)) + onLayout={(e) => { + this._size = { + width: e.nativeEvent.layout.width, + height: e.nativeEvent.layout.height, + }; + this._initialized = true; + this._pathsToProcess.length > 0 && + this._pathsToProcess.forEach((p) => this.addPath(p)); }} {...this.panResponder.panHandlers} onChange={(e) => { - if (e.nativeEvent.hasOwnProperty('pathsUpdate')) { - this.props.onPathsChange(e.nativeEvent.pathsUpdate) - } else if (e.nativeEvent.hasOwnProperty('success') && e.nativeEvent.hasOwnProperty('path')) { - this.props.onSketchSaved(e.nativeEvent.success, e.nativeEvent.path) - } else if (e.nativeEvent.hasOwnProperty('success')) { - this.props.onSketchSaved(e.nativeEvent.success) + if (e.nativeEvent.hasOwnProperty("pathsUpdate")) { + this.props.onPathsChange(e.nativeEvent.pathsUpdate); + } else if ( + e.nativeEvent.hasOwnProperty("success") && + e.nativeEvent.hasOwnProperty("path") + ) { + this.props.onSketchSaved(e.nativeEvent.success, e.nativeEvent.path); + } else if (e.nativeEvent.hasOwnProperty("success")) { + this.props.onSketchSaved(e.nativeEvent.success); } }} localSourceImage={this.props.localSourceImage} @@ -255,9 +370,21 @@ class SketchCanvas extends React.Component { } } -SketchCanvas.MAIN_BUNDLE = Platform.OS === 'ios' ? UIManager.RNSketchCanvas.Constants.MainBundlePath : ''; -SketchCanvas.DOCUMENT = Platform.OS === 'ios' ? UIManager.RNSketchCanvas.Constants.NSDocumentDirectory : ''; -SketchCanvas.LIBRARY = Platform.OS === 'ios' ? UIManager.RNSketchCanvas.Constants.NSLibraryDirectory : ''; -SketchCanvas.CACHES = Platform.OS === 'ios' ? UIManager.RNSketchCanvas.Constants.NSCachesDirectory : ''; +SketchCanvas.MAIN_BUNDLE = + Platform.OS === "ios" + ? UIManager.RNSketchCanvas.Constants.MainBundlePath + : ""; +SketchCanvas.DOCUMENT = + Platform.OS === "ios" + ? UIManager.RNSketchCanvas.Constants.NSDocumentDirectory + : ""; +SketchCanvas.LIBRARY = + Platform.OS === "ios" + ? UIManager.RNSketchCanvas.Constants.NSLibraryDirectory + : ""; +SketchCanvas.CACHES = + Platform.OS === "ios" + ? UIManager.RNSketchCanvas.Constants.NSCachesDirectory + : ""; module.exports = SketchCanvas; From 2e360ea4b1e750dc7414cb45647ba6ef7abf0f6b Mon Sep 17 00:00:00 2001 From: Twin Edo Date: Wed, 8 May 2024 09:46:37 +0700 Subject: [PATCH 2/3] change order params on save method --- src/SketchCanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SketchCanvas.js b/src/SketchCanvas.js index 26924b9e..df12f505 100644 --- a/src/SketchCanvas.js +++ b/src/SketchCanvas.js @@ -171,9 +171,9 @@ class SketchCanvas extends React.Component { save( imageType, - transparent, folder, filename, + transparent, includeImage, includeText, cropToImageSize From 3148a8b9b05bfd1125b5e9305ea11351f1fb19f4 Mon Sep 17 00:00:00 2001 From: Twin Edo <50164031+twinedo@users.noreply.github.com> Date: Wed, 8 May 2024 09:49:27 +0700 Subject: [PATCH 3/3] Update SketchCanvas.js change order of params on save method --- src/SketchCanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SketchCanvas.js b/src/SketchCanvas.js index 26924b9e..df12f505 100644 --- a/src/SketchCanvas.js +++ b/src/SketchCanvas.js @@ -171,9 +171,9 @@ class SketchCanvas extends React.Component { save( imageType, - transparent, folder, filename, + transparent, includeImage, includeText, cropToImageSize