Search code examples
angularjsaviaryimage-editoradobecreativesdkcreative-cloud

Closing Adobe's Creative Cloud Web SDK Properly

We have created a single page application using the Creative Cloud Web SDK in conjunction with AngularJS. Right now we're having an issue where references to the editor's elements seem to persist in the page even after the editor has been removed, and the state/view (we are using UI-Router) has been changed. If the application then relaunches the editor it creates new DOM objects, and event listeners. The .close() function built into the editor just seems to hide the editor, and doesn't actually remove it.

Is there a way to properly close the editor so that it can be safely relaunched on the same page, without causing memory leaks due to increasing amounts of DOM objects?

Perhaps keeping the editor's elements on the page but hidden regardless of everything else that is going on? That way it shouldn't be creating a new editor each time it needs to be launched.

Thank you for your time.

Solution

  • The Image Editor shouldn't be creating new DOM elements on each launch, so we may need to see some code in order to figure out what's going on in this case.

    Example repo

    I have a simple demo repo using Angular, UI Router, and the Creative SDK Image Editor.

    In addition to the steps in the readme, you'll need to go to server/index.html and uncomment the <navbar> directive.

    UI

    When you run the app, you'll see this (explanation below the image):

    enter image description here

    Note: The navbar itself, in this case, is irrelevant to the intended demo, but will demonstrate UI Router and the Image Editor coexisting.

    The links in the navbar are UI Router states (ui-sref=home and ui-sref=modules).

    The "Edit Image" button launches the Creative SDK's Image Editor. You can find the code for this in /client/pre-build/home/.

    The DOM

    The Image Editor is contained in the div with an id of avpw_holder.

    Below is what you will see in Chrome Devtools for the home state of this repo:

    <html lang="en">
<head></head>

<body ng-app="Meaniscule" class="ng-scope">
    <navbar>...</navbar> 
    <!-- uiView:  -->
    <div ui-view="" class="container ng-scope">...</div>
    <div id="avpw_holder">...</div>
</body>
</html>

    Launching and closing the Image Editor will toggle some classes that handle the visibility of the Image Editor, but no new instance of the Image Editor is created in the DOM.

    This is true even if you switch states:

    enter image description here