Merge pull request prscX#11 in CLASS/react-native-photo-editor from i…

…os-text-fixes to master

* commit '2eb2d6dd9c5aa835d5b6d6498d55428be99ec5dc':
  fix: update textViews + clearAll as new layer

Example/.eslintrc.js

@@ -1,4 +1,8 @@
 module.exports = {
  root: true,
  extends: '@react-native-community',
+ rules: {
+ '@typescript-eslint/no-shadow': 0,
+ 'react-native/no-inline-styles': 0,
+ },
 };

Example/.prettierrc.js

@@ -2,5 +2,5 @@ module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
- arrowParens: 'avoid',
+ arrowParens: 'avoid'
 };

Example/App.tsx

@@ -1,11 +1,11 @@
-/* eslint-disable react-native/no-inline-styles */
 import React, {useCallback, useRef, useState} from 'react';
 import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  SafeAreaView,
+ Platform,
 } from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import PhotoEditorView, {
@@ -15,6 +15,8 @@ import PhotoEditorView, {
  onLayersUpdateEvent,
 } from '@scm/react-native-photo-editor';
 
+const IS_ANDROID = Platform.OS === 'android';
+
 const PHOTO_PATH =
  // 'https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2677&q=80';
  'https://i.pinimg.com/originals/e4/9b/c4/e49bc442a5cd920fc72e5105fa7ee52e.png';
@@ -43,6 +45,7 @@ const SIZED_MODES: PhotoEditorModeType[] = [
  'square',
  'text',
 ];
+
 const Button = ({
  title,
  onPress,
@@ -126,13 +129,18 @@ export default function App() {
  const [canRedo, setCanRedo] = useState(false);
  const [canUndo, setCanUndo] = useState(false);
 
- const handleLayersUpdate = ({
- nativeEvent: {layersCount, activeLayer},
- }: onLayersUpdateEvent) => {
- console.log({layersCount, activeLayer});
+ const handleLayersUpdate = ({nativeEvent}: onLayersUpdateEvent) => {
+ const {layersCount, activeLayer} = nativeEvent;
+
+ const canUndo = IS_ANDROID
+ ? layersCount > 0 && activeLayer > 0 // index from 1 for android
+ : layersCount > 0 && activeLayer > -1; // index from 0 for ios
+ const canRedo = IS_ANDROID
+ ? layersCount > 0 && activeLayer < layersCount
+ : layersCount > 0 && activeLayer < layersCount - 1;
 
- setCanUndo(layersCount > 0 && activeLayer > 0);
- setCanRedo(layersCount > 0 && activeLayer < layersCount - 1);
+ setCanUndo(canUndo);
+ setCanRedo(canRedo);
  };
 
  const submit = () => {

android/src/main/java/com/ahmedadeltito/photoeditorsdk/BrushDrawingView.java

@@ -31,7 +31,6 @@ public class BrushDrawingView extends View {
  private Canvas drawCanvas;
  private Bitmap canvasBitmap;
  private boolean brushDrawMode;
- private boolean eraserMode;
  private boolean isRectangle;
  private int brushAlpha = 255;
 

android/src/main/java/com/ahmedadeltito/photoeditorsdk/MultiTouchListener.java

@@ -107,7 +107,6 @@ public boolean onTouch(View view, MotionEvent event) {
  mPrevRawX = event.getRawX();
  mPrevRawY = event.getRawY();
  mActivePointerId = event.getPointerId(0);
- view.bringToFront();
  firePhotoEditorSDKListener(view, true);
  break;
  case MotionEvent.ACTION_MOVE:

android/src/main/java/com/ahmedadeltito/photoeditorsdk/PhotoEditorSDK.java

@@ -285,6 +285,7 @@ public void clearAllViews() {
  addedViews.clear();
  lastActiveLayerIndex = 0;
  showViews();
+ updateViewsLayout();
  }
 
  public Bitmap generateImage() {

android/src/main/java/ui/photoeditor/RNPhotoEditorFragment.java

@@ -83,9 +83,9 @@ public void setToolColor(int toolColor) {
  if (isDrawableMode()) {
  photoEditorSDK.setBrushColor(toolColor);
  }
- if (isTextMode()) {
- photoEditorSDK.setTextColor(toolColor);
- }
+// if (isTextMode()) {
+// photoEditorSDK.setTextColor(toolColor);
+// }
  }
  }
 
@@ -95,9 +95,9 @@ public void setToolSize(int toolSize) {
  if (isDrawableMode()) {
  photoEditorSDK.setBrushSize(toolSize);
  }
- if (isTextMode()) {
- photoEditorSDK.setTextSize(toolSize);
- }
+// if (isTextMode()) {
+// photoEditorSDK.setTextSize(toolSize);
+// }
  }
  }
 
@@ -113,7 +113,7 @@ public void setEditedImageSource(EditedImageSource editedImageSource) {
 
  public void clearAllViews() {
  if (photoEditorSDK != null) {
- photoEditorSDK.clearAllViews();
+ photoEditorSDK.addCroppedImage(editedImage);
  reloadEraser();
  }
  }
@@ -167,20 +167,23 @@ public void updateEditorMode() {
  if (isDrawableMode()) {
  photoEditorSDK.setBrushColor(toolColor);
  photoEditorSDK.setBrushAlpha(mode.equals("marker") ? 120 : 255);
- }
- if (mode.equals("crop")) {
- enableCrop();
- } else {
- dismissCrop();
+ photoEditorSDK.updateViewsLayout();
  }
  if (isTextMode()) {
  photoEditorSDK.enableTextEditing();
  } else {
  photoEditorSDK.disableTextEditing();
  }
+ if (mode.equals("crop")) {
+ enableCrop();
+ } else {
+ dismissCrop();
+ }
  if (mode.equals("eraser")) {
  photoEditorSDK.setEraserDrawingMode(true);
  photoEditorSDK.updateViewsLayout();
+ }else{
+ photoEditorSDK.setEraserDrawingMode(false);
  }
 
  }

android/src/main/java/ui/photoeditor/RNPhotoEditorViewManager.java

@@ -186,6 +186,14 @@ public void setSrc(FrameLayout view, @Nullable ReadableMap source) {
  updatePhotoEditorImage();
  }
 
+ @ReactProp(name = "mode")
+ public void setMode(FrameLayout view, @Nullable String mode) {
+ if (mode != null) {
+ this.mode = mode;
+ updatePhotoEditorMode();
+ }
+ }
+
  @ReactProp(name = "toolColor")
  public void setToolColor(FrameLayout view, @Nullable String color) {
  if (color != null) {
@@ -202,15 +210,6 @@ public void setToolSize(FrameLayout view, int size) {
  updatePhotoEditorToolSize();
  }
  }
-
- @ReactProp(name = "mode")
- public void setMode(FrameLayout view, @Nullable String mode) {
- if (mode != null) {
- this.mode = mode;
- updatePhotoEditorMode();
- }
- }
-
  private void updatePhotoEditorToolColor() {
  if (photoEditorFragment != null) {
  photoEditorFragment.setToolColor(toolColor);
@@ -240,6 +239,7 @@ private void updatePhotoEditorImage() {
  private void clearAll() {
  if (photoEditorFragment != null) {
  photoEditorFragment.clearAllViews();
+
  }
  }
 
@@ -274,9 +274,9 @@ public void onUpdate(String path) {
  .commit();
  setupLayout(parentView);
  updatePhotoEditorImage();
+ updatePhotoEditorMode();
  updatePhotoEditorToolColor();
  updatePhotoEditorToolSize();
- updatePhotoEditorMode();
  }
  }
 

ios/Photo Editor/PhotoEditor+Drawing.swift

@@ -59,13 +59,13 @@ extension PhotoEditorViewController {
  if (drawMode == "text" && touchCount == 1 && activeTextView == nil) {
  isTyping = true
  let touchPoint = touches.first!.location(in: self.canvasImageView)
-
- let textView = UITextView(frame: CGRect(x: touchPoint.x, y: touchPoint.y,
- width: self.firstActiveLayer.frame.width, height: toolSize+10))
+ let width = self.firstActiveLayer.frame.width;
+ let textView = UITextView(frame: CGRect(x: touchPoint.x - width/2, y: touchPoint.y-toolSize,
+ width: width, height: toolSize+10))
 
  textView.font = UIFont(name: "Helvetica", size: toolSize)
  textView.textAlignment = .center
- textView.text = "Text"
+ textView.text = ""
  textView.textColor = toolColor
  textView.layer.shadowColor = UIColor.black.cgColor
  textView.layer.shadowOffset = CGSize(width: 1.0, height: 0.0)

ios/Photo Editor/PhotoEditor+Gestures.swift

@@ -166,12 +166,12 @@ extension PhotoEditorViewController : UIGestureRecognizerDelegate {
 
  view.center = CGPoint(x: view.center.x + recognizer.translation(in: firstActiveLayer).x,
  y: view.center.y + recognizer.translation(in: firstActiveLayer).y)
- 
+
  recognizer.setTranslation(CGPoint.zero, in: firstActiveLayer)
- 
+//
  if recognizer.state == .ended {
  imageViewToPan = nil
- if !firstActiveLayer.bounds.contains(view.center) { //Snap the view back to canvasImageView
+ if !firstActiveLayer.frame.contains(view.center) {
  UIView.animate(withDuration: 0.3, animations: {
  view.center = self.firstActiveLayer.center
  })

ios/Photo Editor/PhotoEditor+UITextView.swift

@@ -12,18 +12,18 @@ import UIKit
 extension PhotoEditorViewController: UITextViewDelegate {
 
  public func textViewDidChange(_ textView: UITextView) {
- let rotation = atan2(textView.transform.b, textView.transform.a)
- if rotation == 0 {
-  let oldFrame = textView.frame
-  let sizeToFit = textView.sizeThatFits(CGSize(width: oldFrame.width, height:CGFloat.greatestFiniteMagnitude))
-  textView.frame.size = CGSize(width: oldFrame.width, height: sizeToFit.height)
- }
+ let transform = textView.transform;
+ textView.transform = .identity
+ let oldFrame = textView.frame
+ let sizeToFit = textView.sizeThatFits(CGSize(width: oldFrame.width, height:CGFloat.greatestFiniteMagnitude))
+ textView.frame.size = CGSize(width: oldFrame.width, height: sizeToFit.height)
+ textView.transform = transform
  }
+
  public func textViewDidBeginEditing(_ textView: UITextView) {
  isTyping = true
  activeTextView = textView
  textView.superview?.bringSubviewToFront(textView)
-
  }
 
  public func textViewDidEndEditing(_ textView: UITextView) {

ios/Photo Editor/PhotoEditorViewController.swift

@@ -148,17 +148,17 @@ public final class PhotoEditorViewController: UIViewController {
 
 
  func clearAll() {
- self.layers.forEach {
-  layer in layer.removeFromSuperview();
- }
- layers.removeAll()
- lastActiveLayerIndex = -1;
- cropImagesLayersIndexes.removeAll()
+ let newImageView = UIImageView(image: self.image)
+ newImageView.frame = self.imageView.frame
+ newImageView.tag = CROP_IMAGE_VIEW_TAG
+ newImageView.center = self.view.center
+ addLayer(layer: newImageView)
+ addCropImageIndex(index: lastActiveLayerIndex)
  updateLayersVisibility()
  }
 
  func addLayer(layer: UIView) {
- if(lastActiveLayerIndex > -1){
+ if(layers.count - 1 > lastActiveLayerIndex){
  while(layers.count - 1 > lastActiveLayerIndex){
  layers.popLast()?.removeFromSuperview();
  }
@@ -183,9 +183,11 @@ public final class PhotoEditorViewController: UIViewController {
  if(textExists){
  for (index, layer) in layers.enumerated() {
  if(layer is UITextView && !layer.isHidden){
- let imageView = UIImageView(frame: firstActiveLayer.frame);
+ let convertedCenter = canvasView.convert(layer.center, to: self.firstActiveLayer);
+ let imageView = UIImageView(frame: self.firstActiveLayer.frame);
  layer.removeFromSuperview();
  imageView.addSubview(layer);
+ layer.center = convertedCenter;
  layers[index] = imageView;
  canvasView.addSubview(imageView)
  }

ios/Photo Editor/PhotoEditorViewController.xib

@@ -46,7 +46,7 @@
  </constraints>
  </view>
  <imageView contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="n3p-yR-4xc">
- <rect key="frame" x="0.0" y="88" width="390" height="667"/>
+ <rect key="frame" x="0.0" y="0" width="390" height="667"/>
  <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
  </imageView>
  </subviews>

ios/Photo Editor/RNPhotoEditorView.swift

@@ -87,8 +87,13 @@ class RNPhotoEditorView: UIView {
  didSet {
  photoEditor.toolSize = self.toolSize;
  if(photoEditor.activeTextView != nil){
- photoEditor.activeTextView!.font = photoEditor.activeTextView?.font?.withSize(toolSize)
- photoEditor.activeTextView!.sizeToFit()
+ let textView = photoEditor.activeTextView!
+ textView.font = textView.font?.withSize(toolSize)
+ let maxWidth = self.photoEditor.firstActiveLayer.frame.width
+ let newSize = textView.sizeThatFits(CGSize(width: maxWidth, height: CGFloat.greatestFiniteMagnitude))
+ textView.frame.size = CGSize(width: newSize.width, height: newSize.height)
+
+ textView.sizeToFit()
  }
  }
  }