Tui.image-editor: All buttons of the Tui image editor are disabled and don't work when i use LoadImageUrl or LoadImageFile to load a specific image programmaticaly in Angular

[PierreKoung]

Describe the bug
When i use loadImageURL of the ImageEditor Object, the options button (Crop, Shape, and all of them) are disabled and i can't set do any action on the loaded image.

To Reproduce
Steps to reproduce the behavior:

1. Create an angular project and add the Tui Image editor module.
2. Open the the tui image editor in a modal or in the page using typescript
3. Load an image programmatically on the initialization of the Tui image editor
4. and try to click on any of actions buttons

Expected behavior
Actions Button click work.

Code
import ImageEditor = require('tui-image-editor');
const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { includeUI: { loadImage: { path: window.URL.createObjectURL(this.image), name: 'event' }, menu: ['shape', 'crop'], menuBarPosition: 'bottom' }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } });

Desktop:

• OS: Windows 10
• Browser: chrome

[yoieh]

any workarounds?

[PierreKoung]

any workarounds?

No ! I try many operations but nothing work. i also try to activate them using the HTML code
But it seems to be already activate.

That's why i come here

[yoieh]

what version do you use?
Having the same issues but with the react wrapper. Seems like it's using the 3.10.0 version witch is the latest.
did not know if was the wrapper or this package

[yoieh]

found this and it worked for me:

imageEditor.ui.activeMenuEvent()

https://github.com/nhn/tui.image-editor/issues/103#issuecomment-500815220

This method not listed in the docs but it dose exist

http://nhn.github.io/tui.image-editor/latest/Ui

[PierreKoung]

what version do you use?
Having the same issues but with the react wrapper. Seems like it's using the 3.10.0 version witch is the latest.
did not know if was the wrapper or this package

I use the same version. maybe it's the version. have you try to downgrade your version ?
Me i don't understand what else it can be because, everything except that work fine.

[yoieh]

what version do you use?
Having the same issues but with the react wrapper. Seems like it's using the 3.10.0 version witch is the latest.
did not know if was the wrapper or this package

I use the same version. maybe it's the version. have you try to downgrade your version ?
Me i don't understand what else it can be because, everything except that work fine.

check if the above version works for you. Not sure about it in angular. But the activeMenuEvent() dose exist as an "Instance Methods" function.

I'm just doing this:

imageEditor
      .loadImageFromURL("img/test.png", "background")
      .then((result) => {
        imageEditor.ui.activeMenuEvent()
      });

[PierreKoung]

found this and it worked for me:

imageEditor.ui.activeMenuEvent()

#103 (comment)

This method not listed in the docs but it dose exist

http://nhn.github.io/tui.image-editor/latest/Ui

I tried that solution but it return to me an error: Property 'activeMenuEvent' does not exist on type 'UI'

[yoieh]

found this and it worked for me:

imageEditor.ui.activeMenuEvent()

#103 (comment)
This method not listed in the docs but it dose exist
http://nhn.github.io/tui.image-editor/latest/Ui

I tried that solution but it return to me an error: Property 'activeMenuEvent' does not exist on type 'UI'

check if the ui object has initialized.
But it looks to me like a type problem. Dose it work if you add
// @ts-ignore
On the line above?

[PierreKoung]

found this and it worked for me:

imageEditor.ui.activeMenuEvent()

#103 (comment)
This method not listed in the docs but it dose exist
http://nhn.github.io/tui.image-editor/latest/Ui

I tried that solution but it return to me an error: Property 'activeMenuEvent' does not exist on type 'UI'

check if the ui object has initialized.
But it looks to me like a type problem. Dose it work if you add
// @ts-ignore
On the line above?

It work for me. with the ts-ignore

[yoieh]

found this and it worked for me:

imageEditor.ui.activeMenuEvent()

#103 (comment)
This method not listed in the docs but it dose exist
http://nhn.github.io/tui.image-editor/latest/Ui

I tried that solution but it return to me an error: Property 'activeMenuEvent' does not exist on type 'UI'

check if the ui object has initialized.
But it looks to me like a type problem. Dose it work if you add
// @ts-ignore
On the line above?

It work for me. with the ts-ignore

Yeah looks like that function just isn't defined in the UI interface

[PierreKoung]

But do you know how i can open the TUI editor with only the menu that i want ?

Because it looks like it's also not mentionned in the documentation

[PierreKoung]

I use the following : this.editorComponent.options = {
includeUI: {
menu: ['shape', 'crop'],
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
};
like the doc said.
But nothing. all the option still appear.

[yoieh]

I'm not sure how you set it up with angular.
But you need to pass the options to a new edtior instance

like this
https://nhn.github.io/tui.image-editor/latest/ImageEditor

var ImageEditor = require('tui-image-editor');
var blackTheme = require('./js/theme/black-theme.js');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
  includeUI: {
    loadImage: {
      path: 'img/sampleImage.jpg',
      name: 'SampleImage'
    },
    theme: blackTheme, // or whiteTheme
    menu: ['shape', 'filter'],
    initMenu: 'filter',
    uiSize: {
        width: '1000px',
        height: '700px'
    },
    menuBarPosition: 'bottom'
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70
  }
});

What i experienced was that you cant overright any of the options after its run.
The options needs to be passed on init of the editor instance.

I moved on to an other project... After setting up a small prototype and hours of debugging the api of this was not really in par with wat i needed.