How to select default (crop) menu after loading new image?

[RoboVij]

Summary The user should see the crop menu by default with a specific crop ratio (2:3) whenever a new image is loaded. initMenu: "crop" of the includeUI options only works on the initital load. How to achieve the same, lets say when the user abandons the current image and loads a new one? It can partially be achieved with the following (Vue) code:

  @Watch("chosenFile")
  onFileChanged(file: any): void {
    this.$refs.tuiImageEditor.invoke('loadImageFromFile', file);
    // TODO: What goes here?
    this.$refs.tuiImageEditor.invoke("setCropzoneRect", "0.666");
  }

The above code works when the user is already in the crop menu before loading the new image. But if other or no menu is selected it gives an error:

TypeError: Cannot read properties of null (reading 'set')
    at Cropper.setCropzoneRect (tui-image-editor.js?abe2:52023:1)
    at Graphics.setCropzoneRect (tui-image-editor.js?abe2:58232:1)
    at ImageEditor.setCropzoneRect (tui-image-editor.js?abe2:60140:1)
    at VueComponent.invoke (toastui-vue-image-editor.js?feca:2:1)
    at VueComponent.onFileChanged (Selection.vue?b3a3:54:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:2988:1)
    at Watcher.run (vue.runtime.esm.js?2b0e:3495:1)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4077:1)
    at Array.eval (vue.runtime.esm.js?2b0e:3114:1)
    at flushCallbacks (vue.runtime.esm.js?2b0e:3036:1)

Version "@toast-ui/vue-image-editor": "^3.15.2"

[lja1018]

@RoboVij Do you want to change the default of the detailed menu of the initial menu? That feature is not yet supported in image-editor...

[RoboVij]

Something similar. Whenever a new image is loaded, no matter what menu is previously selected or even if none is selected, the crop menu should be selected by default on the new loaded image.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[Purum]

Working example for everyone who got lost there ;)

this.imageEditor.loadImageFromFile(this.image)
    .then(r => {
      this.imageEditor.startDrawingMode('CROPPER');
      this.imageEditor.setCropzoneRect(2 / 3);
    });

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!