Drawing is jumping when starting a new Line or when saving the Image

[karatektus]

Version

3.5.0

Development Environment

Windows

Current Behavior

When starting a second line (or saving the image) the last one jumps to the upper left

Expected Behavior

Drawings should stay where they are

Its basically the same issue as in #96 but I am not implementing my own UI but using the built in one

[jinwoo-kim-nhn]

@karatektus hello
The problem may appear if the canvas area is damaged.

However, the information you provide is so poor that it is difficult to give clear help.

You will not have any problems if you use the includeUi option by setting the initial image as shown below, or using the load button at the top.

   ...
   options.includeUI: {
       loadImage: {
           path: 'img/sampleImage2.png',
           name: 'SampleImage'
       },
       ...
   };
   ...

Perhaps you have changed the image through the API of the imageEditor instance other than the one provided by ui.

if so, api of below may be helpful.
After uploading a new image, you can resize the image. Good luck.

imageEditorInstance.ui.resizeEditor()

[pritamgudekar]

I am also getting same issue for drawing free line where as its working fine for straight line and all other features. Following is the code that I am trying as per the suggestions:

if (!this.imageEditor) {
      this.imageEditor = new ImageEditor(document.querySelector('#tui-image-editor'),
      {
        includeUI: {
          loadImage: {
            path: this.editImage.fileUrl,
            name: this.editImage.fileName
          },
          theme: this.imageTheme.blackTheme,
          menu: ['shape', 'text', 'draw', 'rotate', 'flip', 'crop'],
          initMenu: 'draw',
          menuBarPosition: 'bottom'
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      });
    }
    this.imageEditor.loadImageFromURL( this.editImage.fileUrl, this.editImage.fileName).then(result => {
      // --- check result
      this.imageEditor['ui'].resizeEditor();
     // --- Using this.imageEditor.ui.resizeEditor() gives "Property 'ui' does not exist on type 'ImageEditor'." that's why used as above.
    });

Any input on what things need to be done further to fix this issue?

[junghwan-park]

@karatektus
I found bug what your said. Thanks.

@pritamgudekar
Are you using typescript? ui property type definition is missing. I'll add all instance's property type definitions. Thanks!

[pritamgudekar]

@karatektus
I found bug what your said. Thanks.

@pritamgudekar
Are you using typescript? ui property type definition is missing. I'll add all instance's property type definitions. Thanks!

Yes. Using typescript.
Also I checked the tui-image-editor.js library but where to refresh the editor for free line drawing?

Also as I mentioned in my earlier comment, this issue is only happening with free drawing ling and not for any other type of drawing or shape or text. That means doing resizeEditor(), will it work for it?

[junghwan-park]

@pritamgudekar
No. This bug is nothing to do with this.imageEditor.ui.resizeEditor(). Type missing issue is different issue.
I'll resolve free drawing line jumping issue at #167. So, closing this issue.

[pritamgudekar]

Thank you @junghwan-park. It would be great when you will notify on its fix.
Thanks.

[pritamgudekar]

@pritamgudekar
No. This bug is nothing to do with this.imageEditor.ui.resizeEditor(). Type missing issue is different issue.
I'll resolve free drawing line jumping issue at #167. So, closing this issue.

Hi @junghwan-park
Any fixes for this issue? If yes then from where we will get the reference of this fix?

[dimakovalevskyi]

Try to use fabric.js 1.6.7. It helps me.

[pritamgudekar]

Thanks @dimakovalevskyi for the suggestion, will try it out.

Thanks again.

[pritamgudekar]

Hi @junghwan-park
Any update on this issue?

[pritamgudekar]

@dimakovalevskyi - I checked and I am already using fabric.js 1.6.7. but the issue is still reproducing.

Hi @junghwan-park - Is the free line jumping issue resolved? If yes could you please provide the version, if any, for the fixed changes.

Appreciated your help towards the same.

Thanks,
Pritam