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

Filter panel (instance #1) change an image of instance #2 #274

Closed
sergeizhukov opened this issue Nov 18, 2019 · 3 comments
Closed

Filter panel (instance #1) change an image of instance #2 #274

sergeizhukov opened this issue Nov 18, 2019 · 3 comments
Labels

Comments

@sergeizhukov
Copy link

Hello!
With one editor everything works perfect but with two instances exists some weird behaviour with filter panel.
So I bind editor on random ID #tui-image-editor-container-hashHere


        var imageEditor = initTuiEditor('<?=$widgetId?>', '<?=$fileUrl?>', '<?=$val?>');

        window.onresize = function() {
            imageEditor.ui.resizeEditor();
        };


Configuration


function initTuiEditor(widgetId, filePath, fileName) {

  var blackTheme = {
    'menu.normalIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-d.svg',
    'menu.activeIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-b.svg',
    'menu.disabledIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-a.svg',
    'menu.hoverIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-c.svg',
    'submenu.normalIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-d.svg',
    'submenu.activeIcon.path': '/js/plugins/tui.image-editor/dist/svg/icon-b.svg',
  };

  var tuiEditor = new tui.ImageEditor('#tui-image-editor-container-' + widgetId, {
    includeUI: {
      loadImage: {
        path: filePath,
        name: fileName
      },
      theme: blackTheme, // or whiteTheme
      initMenu: 'filter',
      menuBarPosition: 'bottom'
    },
    cssMaxWidth: 1920-(1920 * 0.3),
    cssMaxHeight: 1080-(1080 * 0.3),
    usageStatistics: false
  });

  tuiEditor.loadImageFromURL = (function() {
    var cached_function = tuiEditor.loadImageFromURL;
    function waitUntilImageEditorIsUnlocked(imageEditor) {
      return new Promise((resolve,reject)=>{
        const interval = setInterval(()=>{
          if (!imageEditor._invoker._isLocked) {
            clearInterval(interval);
            resolve();
          }
        }, 100);
      })
    }
    return function() {
      return waitUntilImageEditorIsUnlocked(tuiEditor).then(()=>cached_function.apply(this, arguments));
    };
  })();

  return tuiEditor;
}

Html:

<div class="tui-image-editor-container" id="tui-image-editor-container-<?=$widgetId?>">
                    </div>

When I open the second editor:
image

Nothing happen. I thought before! But it change the first editor:

image

This is bug only with filter panel. Other tool are work.
Any ideas?

@sergeizhukov
Copy link
Author

How to get all intances of tui?

@jinwoo-kim-nhn
Copy link
Contributor

jinwoo-kim-nhn commented Nov 22, 2019

This looks like a bug. I'll fix it soon. Thank you.
#281

@jinwoo-kim-nhn
Copy link
Contributor

resolved at 3.7.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants