Правильное закрытие Adobe Creative Cloud Web SDK

Мы создали одностраничное приложение с помощью Creative Cloud Web SDK в сочетании с AngularJS. Прямо сейчас у нас возникла проблема, из-за которой ссылки на элементы редактора, кажется, сохраняются на странице даже после того, как редактор был удален, а состояние/представление (мы используем UI-Router) были изменены. Если приложение затем перезапускает редактор, оно создает новые объекты DOM и прослушиватели событий. Функция .close(), встроенная в редактор, просто скрывает редактор, а не удаляет его.

Есть ли способ правильно закрыть редактор, чтобы его можно было безопасно перезапустить на той же странице, не вызывая утечек памяти из-за увеличения количества объектов DOM?

Возможно, оставить элементы редактора на странице, но скрыть их независимо от всего остального, что происходит? Таким образом, он не должен создавать новый редактор каждый раз, когда его нужно запустить.

Спасибо за ваше время.


angularjs image-editor aviary adobecreativesdk creative-cloud
person Keith    schedule 23.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Редактор изображений не должен создавать новые элементы DOM при каждом запуске, поэтому нам может понадобиться увидеть некоторый код, чтобы понять, что происходит в этом случае.

Пример репозитория

У меня есть простой демонстрационный репозиторий с использованием Angular, UI Router и Creative SDK Image Editor.

В дополнение к шагам, описанным в файле readme, вам нужно перейти к server/index.html и раскомментировать директиву <navbar>.

UI

Когда вы запустите приложение, вы увидите это (пояснение под изображением):

введите здесь описание изображения

Примечание. Сама панель навигации в этом случае не имеет отношения к предполагаемой демонстрации, но продемонстрирует сосуществование UI Router и редактора изображений.

Ссылки на панели навигации — это состояния маршрутизатора пользовательского интерфейса (ui-sref=home и ui-sref=modules).

Кнопка «Редактировать изображение» запускает редактор изображений Creative SDK. Вы можете найти код для этого в /client/pre-build/home/.

Дом

Редактор изображений содержится в div с идентификатором avpw_holder.

Ниже показано, что вы увидите в Chrome Devtools для домашнего состояния этого репозитория:

<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>

Запуск и закрытие редактора изображений будут переключать некоторые классы, которые управляют видимостью редактора изображений, но новый экземпляр редактора изображений не создается в DOM.

Это верно, даже если вы переключаете состояния:

введите здесь описание изображения

person Ash Ryan Arnwine    schedule 04.01.2016
comment
Странно, когда мы использовали UI-router, он полностью удалял все элементы представления, поэтому нам приходилось каждый раз перезапускать что-то. Мы фактически удалили Angular и внедрили собственный облегченный элемент управления состоянием/страницей, и, похоже, это устранило проблемы, а также уменьшило время загрузки. Спасибо за ответ! - person Keith; 08.01.2016
comment
Рад слышать, что вы нашли решение! - person Ash Ryan Arnwine; 08.01.2016