Is it impossible to include the Canvas via Direct API instead of includeUI parameter ? (React)

[LotharieSlayer]

Summary
Hi,

I'm currently redoing your entire API in React components, but I have a problem.

I'm looking how to integrate the canvas of the image I want to edit via the Direct API in React. (As example 2 of the documentation : https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect)
loadImageFromUrl() doesn't seem to work without the includeUI parameter, and even though I've setup the max canvas size.

How can I natively integrate your API into my website?

Additional context
For the moment my only solution has been to hide the CSS of the UI but certain usability bugs come up frequently with Crop (where cropzone is null), Shape (which I cannot validate with mouseUp), or Text. (like the codesandbox link from #627)

Result with includeUI with hidden css :

What I would like to do :


😭 😭 😭 Result :
First render when mounted

Re-render (no more canvas if I try to re-loadImageFromURL())

Version
TUI Image Editor : v3.15.2
React : v16.13.1

[LotharieSlayer]

It looks like issue #624.

[LotharieSlayer]

Update:
You can bypass functions that doesn't work (shape and text) by remove the empty menu parameter array of includeUI in my first screenshot, (so it's displaying all the submenus) and then hide the css again with a simple display:"none". By adding and hide all the submenus, there is no more errors and the instance believe that he has open the menu.
(update about crop function : it is only working if your last action was adding a text object, I still don't know the reason...)

If you want to try :

UI to set

// fileLink = URL of your Image
// fileName = The name of the image imported
const props = (fileLink, fileName) => ({
    // INCLUDE UI
    includeUI: {
        loadImage: {
            path: fileLink,
            name: fileName
        },
        initMenu: "",
        uiSize: {
            width: "1908px",
            height: "1000px"
        }
    },
    cssMaxWidth: 1908,
    cssMaxHeight: 1000,

});

CSS trick

const classes = {
    editor: {
        "& .tui-image-editor-container": {
            overflow: "hidden"
        },
        // Enlever l'help menu pour accéder à "l'historique"
        "& .tui-image-editor-header, .tui-image-editor-help-menu, .tui-image-editor-controls, .tui-image-editor-submenu": {
            display: "none"
        },
        "& .tui-image-editor-main-container": {
            backgroundColor: "transparent !important"
        }
    }
};

Component return

<div css={classes.editor}>
 <ImageEditor ref={editorRef} {...props(fileLink, fileName)} />
 {/* blablabla */}
</div>

Result

[lja1018]

@LotharieSlayer
It seems to be a problem when using loadImageFromURL directly in React. Let me check.

[stale]

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]

This issue will be closed due to inactivity. Thanks for your contribution!