Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
RoboVij opened this issue Aug 15, 2022 · 5 comments
Open

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

RoboVij opened this issue Aug 15, 2022 · 5 comments

Comments

@RoboVij
Copy link

RoboVij commented Aug 15, 2022

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
Copy link
Contributor

lja1018 commented Sep 14, 2022

@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
Copy link
Author

RoboVij commented Sep 14, 2022

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
Copy link

stale bot commented Nov 2, 2022

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!

@stale stale bot added the inactive label Nov 2, 2022
@Purum
Copy link

Purum commented Dec 29, 2022

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 stale bot removed the inactive label Dec 29, 2022
@stale
Copy link

stale bot commented Jun 18, 2023

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!

@stale stale bot added the inactive label Jun 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants