@@ -2,16 +2,18 @@ import React, { useState, Fragment, useRef } from 'react';
2
2
import ReactCrop from 'react-image-crop' ;
3
3
import 'react-image-crop/dist/ReactCrop.css' ;
4
4
import FilterSelector from '../../FilterSelector/FilterSelector' ;
5
+ import FilerobotImageEditor , { TABS , TOOLS } from 'react-filerobot-image-editor' ;
5
6
6
7
import Icon from '../../Icon/Icon' ;
7
8
8
9
const NewPostEdit = ( { previewImage, setPreviewImage, file, filters } ) => {
9
10
const [ imageState , setImageState ] = useState ( {
10
- crop : { unit : '%' , aspect : 4 / 5 } ,
11
- isCropping : false ,
11
+ crop : { } ,
12
+ isCropping : true ,
12
13
} ) ;
13
14
const imageRef = useRef ( ) ;
14
15
16
+ console . log ( previewImage , 'aaaaaaaaafile' )
15
17
const getCroppedImg = ( image , crop ) => {
16
18
const canvas = document . createElement ( 'canvas' ) ;
17
19
const scaleX = image . naturalWidth / image . width ;
@@ -46,6 +48,17 @@ const NewPostEdit = ({ previewImage, setPreviewImage, file, filters }) => {
46
48
} ) ;
47
49
} ;
48
50
51
+ const [ isImgEditorShown , setIsImgEditorShown ] = useState ( false ) ;
52
+
53
+
54
+ const openImgEditor = ( ) => {
55
+ setIsImgEditorShown ( true ) ;
56
+ } ;
57
+
58
+ const closeImgEditor = ( ) => {
59
+ setIsImgEditorShown ( false ) ;
60
+ } ;
61
+
49
62
const makeClientCrop = async ( crop ) => {
50
63
window . URL . revokeObjectURL ( previewImage . src ) ;
51
64
if ( imageState . imageRef && crop . width && crop . height ) {
@@ -70,15 +83,18 @@ const NewPostEdit = ({ previewImage, setPreviewImage, file, filters }) => {
70
83
setImageState ( ( previous ) => ( { ...previous , imageRef : image } ) ) ;
71
84
} ;
72
85
73
- const onDragStart = ( ) => {
74
- setImageState ( ( previous ) => ( { ...previous , isCropping : true } ) ) ;
75
- } ;
86
+ const saveImage = ( editedImageObject ) => {
87
+ console . log ( editedImageObject , 'editedImageObject' ) ;
88
+ setPreviewImage ( { src : editedImageObject . imageBase64 } )
89
+ } ;
76
90
91
+
92
+ const baseFileUrl = window . URL . createObjectURL ( file ) ;
77
93
return (
78
94
< Fragment >
79
95
< div className = "new-post__preview" >
80
96
< div className = "new-post__preview-image-container" >
81
- < ReactCrop
97
+ { /* <ReactCrop
82
98
src={previewImage.src}
83
99
crop={imageState.crop}
84
100
onChange={onCropChange}
@@ -93,22 +109,36 @@ const NewPostEdit = ({ previewImage, setPreviewImage, file, filters }) => {
93
109
filter: previewImage.filter,
94
110
}}
95
111
ruleOfThirds
96
- />
97
- < Icon
98
- icon = "checkmark-outline"
99
- className = "new-post__crop-button"
100
- style = { imageState . isCropping ? { display : 'inline-block' } : { } }
101
- onClick = { ( ) => makeClientCrop ( imageState . crop ) }
102
- />
112
+ />*/ }
113
+ < FilerobotImageEditor
114
+ style = { { width : '100%' , height : '100%' , position : 'absolute' } }
115
+ onBeforeSave = { ( ) => { return false } }
116
+ source = { previewImage . src ? previewImage . src : baseFileUrl }
117
+ onSave = { ( editedImageObject , designState ) => saveImage ( editedImageObject ) }
118
+ annotationsCommon = { {
119
+ fill : '#ff0000'
120
+ } }
121
+ Text = { { text : 'something...' } }
122
+ Crop = { {
123
+ presetsItems : [
124
+ {
125
+ titleKey : 'classicPotrait' ,
126
+ descriptionKey : '4:3' ,
127
+ ratio : 4 / 3 ,
128
+ } ,
129
+ {
130
+ titleKey : 'classicLandscape' ,
131
+ descriptionKey : '21:9' ,
132
+ ratio : 21 / 9 ,
133
+ } ,
134
+ ] ,
135
+ } }
136
+ tabsIds = { [ TABS . ADJUST , TABS . FINETUNE , TABS . FILTERS , TABS . RESIZE ] } // or {['Adjust', 'Annotate', 'Watermark']}
137
+ defaultTabId = { TABS . ADJUST } // or 'Annotate'
138
+ defaultToolId = { TOOLS . CROP } // or 'Text'
139
+ />
103
140
</ div >
104
141
</ div >
105
- < FilterSelector
106
- setFilter = { ( filter , filterName ) =>
107
- setPreviewImage ( ( previous ) => ( { ...previous , filter, filterName } ) )
108
- }
109
- previewImage = { previewImage . src }
110
- filters = { filters }
111
- />
112
142
</ Fragment >
113
143
) ;
114
144
} ;
0 commit comments