306: image editor

src/z2ui5_cl_demo_app_306.clas.abap

@@ -23,23 +23,31 @@ CLASS z2ui5_cl_demo_app_306 DEFINITION
  tt_combo TYPE STANDARD TABLE OF t_combo WITH EMPTY KEY.
 
 
- DATA mt_picture TYPE STANDARD TABLE OF ty_picture WITH EMPTY KEY.
- DATA mt_picture_out TYPE STANDARD TABLE OF ty_picture WITH EMPTY KEY.
- DATA mv_pic_display TYPE string.
- DATA mv_check_init TYPE abap_bool.
- DATA mv_picture_base TYPE string.
- DATA facing_mode TYPE string.
- DATA facing_modes TYPE tt_combo.
- DATA device TYPE string.
- DATA devices TYPE tt_combo.
+ DATA:
+ mt_picture TYPE STANDARD TABLE OF ty_picture WITH EMPTY KEY,
+ mt_picture_out TYPE STANDARD TABLE OF ty_picture WITH EMPTY KEY,
+ mv_pic_display TYPE string,
+ mv_check_init TYPE abap_bool,
+ mv_picture_base TYPE string,
+ facing_mode TYPE string,
+ facing_modes TYPE tt_combo,
+ device TYPE string,
+ devices TYPE tt_combo.
 
  PROTECTED SECTION.
 
  METHODS view_display
  IMPORTING
  client TYPE REF TO z2ui5_if_client.
 
+ METHODS edit
+ IMPORTING
+ client TYPE REF TO z2ui5_if_client.
+
+ DATA selected_picture TYPE ty_picture.
+
  PRIVATE SECTION.
+
 ENDCLASS.
 
 
@@ -53,8 +61,8 @@ CLASS z2ui5_cl_demo_app_306 IMPLEMENTATION.
 
  DATA(cont) = view->shell( ).
  DATA(page) = cont->page( title = 'abap2UI5 - Device Camera Picture'
- navbuttonpress   = client->_event( 'BACK' )
- shownavbutton   = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
+ navbuttonpress = client->_event( 'BACK' )
+ shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
 
  page->vbox( class = `sapUiSmallMargin`
  )->label( text = `facingMode: ` labelfor = `ComboFacingMode`
@@ -71,10 +79,10 @@ CLASS z2ui5_cl_demo_app_306 IMPLEMENTATION.
  )->get( )->item( key = `{KEY}` text = `{TEXT}` ).
 
  page->_z2ui5( )->camera_picture(
- value = client->_bind_edit( mv_picture_base )
- onphoto = client->_event( 'CAPTURE' )
+ value  = client->_bind_edit( mv_picture_base )
+ onphoto  = client->_event( 'CAPTURE' )
  facingmode = client->_bind_edit( facing_mode )
- deviceid = client->_bind_edit( device ) ).
+ deviceid  = client->_bind_edit( device ) ).
 
  page->list(
  headertext = 'List Ouput'
@@ -91,13 +99,26 @@ CLASS z2ui5_cl_demo_app_306 IMPLEMENTATION.
  IF mv_pic_display IS NOT INITIAL.
  page->_generic( ns = 'html'
  name = 'center'
- )->_generic( ns = 'html'
- name = 'img'
- t_prop = VALUE #(
- ( n = 'src' v = mv_pic_display )
- ) ).
+ )->_generic( ns = 'html'
+ name = 'img'
+ t_prop = VALUE #(
+ ( n = 'src' v = mv_pic_display )
+ ) ).
+
+ page->button( text = 'Edit' icon = 'sap-icon://edit' press = client->_event( 'EDIT' ) ).
  ENDIF.
 
+
+ view->_generic( name = `script`
+ ns = `html`
+ )->_cc_plain_xml(
+ 'z2ui5.sendImage = () => { ' &&
+ ' const image = sap.ui.core.Fragment.byId("popupId", "imageEditor").getImagePngDataURL();' &&
+ ' z2ui5.oController.PopupDestroy();' && |\n| &&
+ ' z2ui5.oController.eB([`SAVE`],image);' &&
+ '}'
+ ).
+
  client->view_display( view->stringify( ) ).
 
  ENDMETHOD.
@@ -119,24 +140,37 @@ CLASS z2ui5_cl_demo_app_306 IMPLEMENTATION.
 
  ENDIF.
 
+
  CASE client->get( )-event.
 
  WHEN 'CAPTURE'.
  INSERT VALUE #( data = mv_picture_base time = sy-uzeit ) INTO TABLE mt_picture.
  CLEAR mv_picture_base.
  client->view_model_update( ).
 
- WHEN 'START'.
+ WHEN 'DISPLAY'.
+
+ selected_picture = mt_picture_out[ selected = abap_true ].
+ mv_pic_display = mt_picture[ selected_picture-id ]-data.
+ view_display( client ).
 
+ WHEN 'EDIT'.
+
+ edit( client ).
+
+ WHEN 'SAVE'.
+
+ DATA(args) = client->get( )-t_event_arg.
+
+ ASSIGN mt_picture[ selected_picture-id ] TO FIELD-SYMBOL(<picture>).
+ IF sy-subrc = 0.
+ mv_pic_display = <picture>-data = args[ 1 ].
+ ENDIF.
 
- WHEN 'DISPLAY'.
- DATA(lt_sel) = mt_picture_out.
- DELETE lt_sel WHERE selected = abap_false.
- DATA(ls_sel) = lt_sel[ 1 ].
- mv_pic_display = mt_picture[ ls_sel-id ]-data.
  view_display( client ).
 
  WHEN 'BACK'.
+
  client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
 
  ENDCASE.
@@ -147,4 +181,39 @@ CLASS z2ui5_cl_demo_app_306 IMPLEMENTATION.
  ENDLOOP.
 
  ENDMETHOD.
+
+ METHOD edit.
+
+ DATA(popup) = z2ui5_cl_xml_view=>factory_popup(
+ )->dialog(
+ title = 'Edit Picture'
+ icon = 'sap-icon://edit'
+ contentheight = `80%`
+ contentwidth = `80%` ).
+
+ popup->_generic(
+ name = 'ImageEditorContainer'
+ ns = 'ie'
+ )->_generic(
+ name = 'ImageEditor'
+ ns = 'ie'
+ t_prop = VALUE #(
+ ( n = `id` v = `imageEditor` )
+ ( n = `src` v = mv_pic_display ) ) ).
+
+ popup->footer( )->overflow_toolbar(
+ )->button(
+ text = 'Cancel'
+ type = 'Reject'
+ press = client->_event_client( client->cs_event-popup_close )
+ )->toolbar_spacer(
+ )->button(
+ text = 'Save'
+ type = 'Emphasized'
+ press = client->_event_client( val = `Z2UI5` t_arg = VALUE #( ( `sendImage` ) ) ) ).
+
+ client->popup_display( popup->stringify( ) ).
+
+ ENDMETHOD.
+
 ENDCLASS.