Currently, I am harnessing the power of Angular2 to incorporate drag and drop functionalities. Specifically, my goal is to enable the movement of "windows" within different "sessions", with each window containing a set of bookmarks.
Upon testing, I have observed that in scenarios where the structure becomes slightly more intricate – for instance, having 4 sessions, each consisting of 2 windows with 5-10 bookmarks per window – the process of moving windows between sessions experiences significant lag, sometimes resulting in up to a minute of waiting time!
Interestingly, the performance vastly improves when the bookmarks are excluded from the template.
To address this issue, my initial approach involved rendering the bookmarks in a separate container located outside the sessions—the area governed by drag-and-drop directives. Then, upon demand, I devised a mechanism using JavaScript (specifically Typescript) to relocate the bookmarks from the external container back into the session windows.
It's worth noting that the bookmarks hold no direct connection to the sessions; they remain isolated entities. And yet, even their presence in the template seems to disrupt the entire functionality. Conversely, removing them results in a noticeable enhancement of responsiveness.
This raises the questions: Why does the inclusion of bookmarks have such a pronounced impact? How can this issue be effectively resolved?
EDIT: For a quick demonstration, you can access the following Plunkers: Plunker with bookmarks - note the delay while moving the "title" sections Plunker without bookmarks - observe the improved performance
One portion of the template responsible for the issue:
<section id="current_bookmarks">
<div *ngFor="let session_window_name of session_keys;"
[bookmark_draggable_target]="{event_type:'moving_sessions',zone:session_window_name}"
(drop_here)="onDrop($event)">
<div class="session_window_name">
<div class="session_window_name_title"><input class="input_session_names title" [id]="sessions[session_window_name].name+'_input'" type="text" value="{{sessions[session_window_name].title}}"></div>
</div>
<div *ngFor="let window_name of sessions[session_window_name].windows_keys; let i = index;"
[bookmark_draggable]="{event_type:'moving_sessions',id:session_window_name+'_'+sessions[session_window_name].windows[window_name].id}">
<session [index]="i" [from]="'stored'" [session]="session_window_name" [window]="sessions[session_window_name].windows[window_name]"></session>
</div>
</div>
</section>
If the below segment is omitted from the same template, the issue appears to be resolved. However, it's crucial to note that this section contains no 'bookmark_draggable' or 'bookmark_draggable_target' directives.
<section id="bookmarks_pool">
<ng-container *ngFor="let session_window_name of session_keys;">
<div *ngFor="let window_name of sessions[session_window_name].windows_keys; let i = index;">
<div *ngFor="let bookmark of sessions[session_window_name].windows[window_name].bookmarks; let i = index;" >
<div>
<span class="material-icons list_shown" (click)="bookmark_delete(session_window_name+'_'+sessions[session_window_name].windows[window_name].id+'_'+i+'_bookmark')">label</span>
<span class="material-icons clear_hidden" (click)="bookmark_delete(session_window_name+'_'+sessions[session_window_name].windows[window_name].id+'_'+i+'_bookmark')">clear</span>
<a target="_blank" [href]="sanitize(bookmark.url)">{{bookmark.url}}</a>
</div>
</div>
</div>
</ng-container>
</section>
The implemented directives:
import { Output, EventEmitter, Input, HostListener, Directive, HostBinding } from '@angular/core';
.
.
.
EDIT: adjustments made in tab.config.js, package.json dependencies, etc.
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
. . .
});
})(this);
System.import('app').catch(function(err){ console.error(err); });
{"dependencies": {...},
"devDependencies": {...}
}