search

nhn / tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
http://ui.toast.com/tui-image-editor
MIT License
6.98k stars 1.29k forks source link

I got error when i call `addText` method #714

Open eomttt opened 2 years ago

eomttt commented 2 years ago

Summary I got error when i call addText method but first time

Screenshots error

TypeError: Cannot read properties of undefined (reading 'modeChange')
    at Text.changeStartMode (tui-image-editor.js?5475:44180:1)
    at Ui._changeMenu (tui-image-editor.js?5475:47000:1)
    at Ui.changeMenu (tui-image-editor.js?5475:46962:1)
    at objectActivated (tui-image-editor.js?5475:49261:1)
    at ImageEditor.CustomEvents.invoke (tui-code-snippet.js?b7cb:3230:1)
    at ImageEditor.CustomEvents.fire (tui-code-snippet.js?b7cb:3185:1)
    at ImageEditor._onObjectActivated (tui-image-editor.js?5475:58488:1)
    at Graphics.CustomEvents.invoke (tui-code-snippet.js?b7cb:3230:1)
    at Graphics.CustomEvents.fire (tui-code-snippet.js?b7cb:3185:1)
    at Graphics._onSelectionCreated (tui-image-editor.js?5475:57650:1)
    at klass.fire (tui-image-editor.js?5475:354:1)
    at klass._fireSelectionEvents (tui-image-editor.js?5475:12360:1)
    at klass.setActiveObject (tui-image-editor.js?5475:12384:1)
    at eval (tui-image-editor.js?5475:51928:1)
    at new Promise (<anonymous>)
    at new Wrapper (tui-image-editor.js?5475:32737:1)
    at Text.add (tui-image-editor.js?5475:51892:1)
    at Command.execute (tui-image-editor.js?5475:60173:1)
    at Invoker._invokeExecution (tui-image-editor.js?5475:40963:1)
    at Invoker.execute (tui-image-editor.js?5475:41101:1)
    at ImageEditor.execute (tui-image-editor.js?5475:58665:1)
    at ImageEditor.addText (tui-image-editor.js?5475:59277:1)
    at _callee2$ (DirittoImageEditor.ts?35cc:54:5)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at Generator.prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (asyncToGenerator.js?8274:3:1)
    at _next (asyncToGenerator.js?8274:25:1)
    at eval (asyncToGenerator.js?8274:32:1)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?8274:21:1)
    at eval (DirittoImageEditor.ts?35cc:54:5)
    at addText (VM68261 useCoverImageEditor.ts:144:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?ac89:4070:1)
    at executeDispatch (react-dom.development.js?ac89:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js?ac89:8275:1)
    at processDispatchQueue (react-dom.development.js?ac89:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js?ac89:8299:1)
    at eval (react-dom.development.js?ac89:8508:1)
    at batchedEventUpdates$1 (react-dom.development.js?ac89:22396:1)
    at batchedEventUpdates (react-dom.development.js?ac89:3745:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js?ac89:8507:1)
    at attemptToDispatchEvent (react-dom.development.js?ac89:6005:1)
    at dispatchEvent (react-dom.development.js?ac89:5924:1)
    at unstable_runWithPriority (scheduler.development.js?bcd2:468:1)
    at runWithPriority$1 (react-dom.development.js?ac89:11276:1)
    at discreteUpdates$1 (react-dom.development.js?ac89:22413:1)

Version Write the version of the imageEditor you are currently using.

Additional context Add any other context about the problem here.

eomttt commented 2 years ago

I think loadImageFromURL call and after addText call this error fired

lja1018 commented 2 years ago

@eomttt Thank you for the information. Can you tell me how to reproduce it in detail?

eomttt commented 2 years ago

Hmm

  1. Make const imageEditor = new ImageEditor({}) without loadImage params in includeUI
  2. Call imageEditor.loadImageFromURL(image url)
  3. Call imageEditor.addText('test')

i got error

i think, in ui.js -> initCanvas method not call activeMenuEvent method when loadImageInfo.path has not so when i call addText() and changeMenu called but in _changeMenu has this logic

      this[this.submenu].changeStartMode();

but activeMenuEvent not called because loadImageInfo.path is null so this[this.submenu] is undefined so fire error

lja1018 commented 2 years ago

@eomttt I succeeded in reproducing it. Thank you for the information. Do you want to post a PR to fix the bug?