angularreactjsphotoeditorsdk

Listen for events from PhotoEditorSDK in Angular


I have an app where I want to use the PhotoEditorSDK component. Their demos for angular implementation states that they want me to set this up using

@Component({
  selector: 'app-photo-editor',
  template: `<ngui-react [reactComponent]="reactComponent" [reactProps]="reactProps"></ngui-react>`,
  styleUrls: ['./photo-editor.component.scss']
})
export class PhotoEditorComponent implements OnInit {
  @Input() src: string;
  image = new Image();

  defaultProps = {
    license: license,
    assets: {
      baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
    },
    responsive: true,
    style:{
      width: '100%',
      height: '100%'
    },
    editor: {
      image: this.image
    }
  };

  reactComponent: React.Component = PhotoEditorDesktopUI.ReactComponent;
  reactProps: any = {...this.defaultProps};

  constructor(private el: ElementRef, private translate: TranslateService) { }

  ngOnInit() {
    this.image.src = this.src;
  }
}

This works fine. I get the rendered React component in my Angular app. Now I want to register an event listener on the rendered object. Their documentation state that they expose at least an export event:

editor.on('export', (result) => {
  console.log('User clicked export, resulting image / dataurl:', result)
})

But I do not create the editor myself. This object is created by transmitting the component type to ngui-react, and created within this directive. How do I get a hold of the created PhotoEditorSDK object, so I can place event listeners on it?

I've tried setting the event listener on

this.reactComponent.on(....)

But PhotoEditorDesktopUI !== this.reactComponent. The reactComponent is a container for the created PhotoEditorDesktopUI object.


Solution

  • The following did the trick:

    import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, Input, Inject, EventEmitter, Output } from '@angular/core';
    import PhotoEditorDesktopUI from 'photoeditorsdk/js/PhotoEditorSDK.UI.DesktopUI';
    
    // !! IMPORTANT !!
    import * as React from 'react'
    import * as ReactDom from 'react-dom'
    
    
    declare global {
      interface Window { React: any; ReactDom: any; }
    }
    window.React = window.React || React
    window.ReactDom = window.ReactDom || ReactDom
    // /END !! IMPORTANT !!
    
    @Component({
      selector: 'app-photo-editor',
      template: '',
      styles: [':host { display: flex; width: 100%; min-height: 30rem; }']
    })
    export class PhotoEditorComponent implements OnInit {
      @Input() src: string;
      @Output() srcChange = new EventEmitter<string>();
      image = new Image();
      editor;
    
      constructor(private el: ElementRef) { }
    
      ngOnInit() {
        this.image.src = this.src;
        this.editor = new PhotoEditorDesktopUI({
          container: this.el.nativeElement,
          license: license,
          assets: {
            baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
          },
          responsive: true,
          style: {
            width: '100%',
            height: '100%'
          },
          editor: {
            image: this.image,
            export: {
              download: false
            }
          },
        });
        this.editor.on('export', (result) => this.srcChange.emit(result));
      }
    }