394 lines
9.8 KiB
JavaScript
394 lines
9.8 KiB
JavaScript
"use strict";
|
|
|
|
var netgis = netgis || {};
|
|
|
|
//TODO: refactor common panel class
|
|
//TODO: refactor common tree view class
|
|
|
|
netgis.LayerTree = function()
|
|
{
|
|
this.client = null;
|
|
this.root = null;
|
|
this.list = null;
|
|
this.folderImport = null;
|
|
this.folderDraw = null;
|
|
};
|
|
|
|
netgis.LayerTree.prototype.load = function()
|
|
{
|
|
this.root = document.createElement( "section" );
|
|
this.root.className = "netgis-layer-list netgis-dialog netgis-shadow netgis-hide";
|
|
//this.root.className = "netgis-layer-list netgis-dialog netgis-shadow";
|
|
|
|
this.list = document.createElement( "ul" );
|
|
this.list.className = "root";
|
|
this.root.appendChild( this.list );
|
|
|
|
this.client.root.appendChild( this.root );
|
|
|
|
this.client.on( netgis.Events.CONTEXT_UPDATE, this.onContextUpdate.bind( this ) );
|
|
this.client.on( netgis.Events.LAYER_LIST_TOGGLE, this.onLayerListToggle.bind( this ) );
|
|
this.client.on( netgis.Events.LAYER_CREATED, this.onLayerCreated.bind( this ) );
|
|
this.client.on( netgis.Events.EDIT_FEATURES_CHANGE, this.onEditFeaturesChange.bind( this ) );
|
|
|
|
//TODO: kind of hack to hide if parcel search open
|
|
this.client.on( netgis.Events.SET_MODE, this.onSetMode.bind( this ) );
|
|
};
|
|
|
|
netgis.LayerTree.prototype.clearAll = function()
|
|
{
|
|
this.list.innerHTML = "";
|
|
};
|
|
|
|
netgis.LayerTree.prototype.createFolder = function( title )
|
|
{
|
|
var item = document.createElement( "li" );
|
|
item.className = "netgis-folder netgis-hover-light";
|
|
item.setAttribute( "title", title );
|
|
//item.innerHTML = "<span class='caret'>" + title + "</span>";
|
|
|
|
var label = document.createElement( "label" );
|
|
label.className = "netgis-icon";
|
|
item.appendChild( label );
|
|
|
|
var checkbox = document.createElement( "input" );
|
|
checkbox.setAttribute( "type", "checkbox" );
|
|
//checkbox.checked = checked;
|
|
checkbox.addEventListener( "change", this.onFolderChange.bind( this ) );
|
|
label.appendChild( checkbox );
|
|
|
|
var button = document.createElement( "button" );
|
|
button.setAttribute( "type", "button" );
|
|
button.className = "netgis-clip-text netgis-hover-text-primary";
|
|
button.innerHTML = '<i class="fas fa-folder-open"></i>' + title;
|
|
button.addEventListener( "click", this.onFolderClick.bind( this ) );
|
|
item.appendChild( button );
|
|
|
|
var folder = document.createElement( "ul" );
|
|
item.appendChild( folder );
|
|
|
|
return item;
|
|
};
|
|
|
|
netgis.LayerTree.prototype.createLayer = function( id, title, checked )
|
|
{
|
|
var item = document.createElement( "li" );
|
|
//item.dataset.id = id;
|
|
item.setAttribute( "title", title );
|
|
item.className = "netgis-folder-item netgis-hover-text-primary";
|
|
|
|
var label = document.createElement( "label" );
|
|
label.className = "netgis-label netgis-clip-text";
|
|
item.appendChild( label );
|
|
|
|
var span = document.createElement( "span" );
|
|
span.className = "netgis-icon";
|
|
label.appendChild( span );
|
|
|
|
var checkbox = document.createElement( "input" );
|
|
checkbox.setAttribute( "type", "checkbox" );
|
|
checkbox.dataset.id = id;
|
|
checkbox.checked = checked;
|
|
checkbox.addEventListener( "change", this.onItemChange.bind( this ) );
|
|
span.appendChild( checkbox );
|
|
|
|
var icon = document.createElement( "i" );
|
|
//icon.className = "fas fa-file";
|
|
//icon.className = "fas fa-sticky-note";
|
|
//icon.className = "far fa-map";
|
|
icon.className = "fas fa-th-large";
|
|
label.appendChild( icon );
|
|
|
|
var text = document.createTextNode( title );
|
|
label.appendChild( text );
|
|
|
|
return item;
|
|
};
|
|
|
|
netgis.LayerTree.prototype.addToFolder = function( folder, item, prepend )
|
|
{
|
|
var list;
|
|
|
|
if ( folder )
|
|
{
|
|
list = folder.getElementsByTagName( "ul" )[ 0 ]; //TODO: folder.children[ 0 ] ?
|
|
list.appendChild( item );
|
|
}
|
|
else
|
|
{
|
|
list = this.list;
|
|
}
|
|
|
|
if ( ! prepend )
|
|
{
|
|
list.appendChild( item );
|
|
}
|
|
else
|
|
{
|
|
list.insertBefore( item, list.firstChild );
|
|
}
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onFolderClick = function( e )
|
|
{
|
|
/*
|
|
var folder = e.currentTarget.parentElement.parentElement;
|
|
folder.classList.toggle( "netgis-active" );
|
|
*/
|
|
|
|
//e.currentTarget.parentElement.querySelector(".nested").classList.toggle("active");
|
|
|
|
var folder = e.currentTarget.parentElement;
|
|
folder.classList.toggle( "netgis-active" );
|
|
};
|
|
|
|
/*netgis.LayerTree.prototype.updateFolderCheck = function( folder )
|
|
{
|
|
var items = folder.getElementsByTagName( "input" );
|
|
|
|
|
|
};*/
|
|
|
|
netgis.LayerTree.prototype.onFolderChange = function( e )
|
|
{
|
|
var checkbox = e.currentTarget;
|
|
var checked = checkbox.checked;
|
|
var folder = checkbox.parentElement.parentElement;
|
|
var items = folder.getElementsByTagName( "input" );
|
|
//var items = folder.getElementsByClassName( "netgis-folder-item" );
|
|
|
|
//console.info( "Folder Change:", checked, folder, items );
|
|
|
|
// Check Child Items
|
|
for ( var i = 1; i < items.length; i++ )
|
|
{
|
|
var item = items[ i ];
|
|
var childcheck = item;
|
|
//var childcheck = item.getElementsByTagName( "input" )[ 0 ];
|
|
|
|
childcheck.checked = checked;
|
|
|
|
//console.info( "Folder Child:", item, childcheck, id, items );
|
|
|
|
//var id = parseInt( childcheck.dataset.id );
|
|
var id = childcheck.dataset.id;
|
|
|
|
if ( netgis.util.isDefined( id ) )
|
|
{
|
|
id = parseInt( id );
|
|
this.client.invoke( checked ? netgis.Events.LAYER_SHOW : netgis.Events.LAYER_HIDE, { id: id } );
|
|
}
|
|
}
|
|
|
|
this.updateFolderChecks( folder );
|
|
|
|
// Check Parent Folder
|
|
var parentFolder = folder.parentElement.parentElement;
|
|
if ( parentFolder.className.search( "netgis-folder" ) !== -1 )
|
|
this.updateFolderChecks( parentFolder );
|
|
};
|
|
|
|
netgis.LayerTree.prototype.updateFolderChecks = function( folder )
|
|
{
|
|
if ( ! netgis.util.isDefined( folder ) ) folder = this.list;
|
|
|
|
// Count Child Checks
|
|
var items = folder.getElementsByClassName( "netgis-folder-item" );
|
|
|
|
var checks = 0;
|
|
|
|
for ( var i = 0; i < items.length; i++ )
|
|
{
|
|
var checkbox = items[ i ].getElementsByTagName( "input" )[ 0 ];
|
|
if ( checkbox.checked ) checks++;
|
|
}
|
|
|
|
// Set Checkbox State
|
|
var checkbox = folder.getElementsByTagName( "input" )[ 0 ];
|
|
|
|
var state = 0;
|
|
if ( checks > 0 ) state = 1;
|
|
if ( checks === items.length ) state = 2;
|
|
|
|
switch ( state )
|
|
{
|
|
case 0:
|
|
{
|
|
// Unchecked
|
|
checkbox.checked = false;
|
|
checkbox.classList.remove( "netgis-partial" );
|
|
break;
|
|
}
|
|
|
|
case 1:
|
|
{
|
|
// Partially Checked
|
|
checkbox.checked = true;
|
|
checkbox.classList.add( "netgis-partial" );
|
|
break;
|
|
}
|
|
|
|
case 2:
|
|
{
|
|
// Fully Checked
|
|
checkbox.checked = true;
|
|
checkbox.classList.remove( "netgis-partial" );
|
|
break;
|
|
}
|
|
}
|
|
|
|
//TODO: use nearest ancestor selector
|
|
var parentList = folder.parentElement;
|
|
|
|
if ( parentList && parentList !== this.list )
|
|
{
|
|
// Recursion
|
|
var parentFolder = parentList.parentElement;
|
|
if ( parentFolder && parentFolder.className.search( "netgis-folder" ) !== -1 )
|
|
this.updateFolderChecks( parentFolder );
|
|
}
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onItemChange = function( e )
|
|
{
|
|
var checkbox = e.currentTarget;
|
|
var checked = checkbox.checked;
|
|
var listitem = checkbox.parentElement.parentElement.parentElement;
|
|
var id = parseInt( checkbox.dataset.id );
|
|
var folder = listitem.parentElement.parentElement;
|
|
var items = folder.getElementsByTagName( "input" );
|
|
|
|
// Check Parent Folder
|
|
var checks = 0;
|
|
|
|
for ( var i = 1; i < items.length; i++ )
|
|
{
|
|
var item = items[ i ];
|
|
if ( item.checked ) checks++;
|
|
}
|
|
|
|
if ( folder.className.search( "netgis-folder" ) !== -1 )
|
|
this.updateFolderChecks( folder );
|
|
|
|
this.client.invoke( checked ? netgis.Events.LAYER_SHOW : netgis.Events.LAYER_HIDE, { id: id } );
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onLayerListToggle = function( e )
|
|
{
|
|
this.root.classList.toggle( "netgis-hide" );
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onContextUpdate = function( e )
|
|
{
|
|
this.clearAll();
|
|
|
|
var folders = e.folders;
|
|
var layers = e.layers;
|
|
|
|
// Create Folders
|
|
var folderItems = [];
|
|
|
|
for ( var f = 0; f < folders.length; f++ )
|
|
{
|
|
var folder = folders[ f ];
|
|
|
|
var item = this.createFolder( folder.title );
|
|
folderItems.push( item );
|
|
}
|
|
|
|
// Create Layers
|
|
for ( var l = 0; l < layers.length; l++ )
|
|
{
|
|
var layer = layers[ l ];
|
|
|
|
var item = this.createLayer( l, layer.title, layer.active );
|
|
this.addToFolder( folderItems[ layer.folder ], item );
|
|
}
|
|
|
|
// Append Folders
|
|
for ( var f = 0; f < folders.length; f++ )
|
|
{
|
|
var folder = folders[ f ];
|
|
var item = folderItems[ f ];
|
|
|
|
if ( folder.parent === -1 )
|
|
{
|
|
this.list.appendChild( item );
|
|
}
|
|
else
|
|
{
|
|
this.addToFolder( folderItems[ folder.parent ], item );
|
|
}
|
|
}
|
|
|
|
// Active State
|
|
for ( var l = 0; l < layers.length; l++ )
|
|
{
|
|
var layer = layers[ l ];
|
|
if ( layer.active ) this.client.invoke( netgis.Events.LAYER_SHOW, { id: l } );
|
|
}
|
|
for ( var f = 0; f < folderItems.length; f++ )
|
|
{
|
|
this.updateFolderChecks( folderItems[ f ] );
|
|
}
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onLayerCreated = function( e )
|
|
{
|
|
var item = this.createLayer( e.id, e.title, e.checked );
|
|
|
|
var folder;
|
|
|
|
//TODO: this is a hack to get special folders working
|
|
if ( e.folder === "import" )
|
|
{
|
|
if ( ! this.folderImport )
|
|
{
|
|
this.folderImport = this.createFolder( "Importierte Ebenen" );
|
|
this.list.insertBefore( this.folderImport, this.folderDraw ? this.folderDraw.nextSibling : this.list.firstChild );
|
|
}
|
|
|
|
folder = this.folderImport;
|
|
}
|
|
else if ( e.folder === "draw" )
|
|
{
|
|
if ( ! this.folderDraw )
|
|
{
|
|
this.folderDraw = this.createFolder( "Zeichnung" );
|
|
this.list.insertBefore( this.folderDraw, this.list.firstChild );
|
|
}
|
|
|
|
folder = this.folderDraw;
|
|
}
|
|
|
|
this.addToFolder( folder, item, true );
|
|
this.updateFolderChecks( folder );
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onEditFeaturesChange = function( e )
|
|
{
|
|
// Enable draw layer if not already
|
|
if ( this.folderDraw )
|
|
{
|
|
var list = this.folderDraw.getElementsByTagName( "ul" )[ 0 ];
|
|
var checks = list.getElementsByTagName( "input" );
|
|
var checkbox = checks[ 0 ];
|
|
var id = parseInt( checkbox.dataset.id );
|
|
|
|
if ( ! checkbox.checked )
|
|
{
|
|
checkbox.checked = true;
|
|
|
|
this.updateFolderChecks( this.folderDraw );
|
|
this.client.invoke( netgis.Events.LAYER_SHOW, { id: id } );
|
|
}
|
|
};
|
|
};
|
|
|
|
netgis.LayerTree.prototype.onSetMode = function( e )
|
|
{
|
|
if ( e === netgis.Modes.SEARCH_PARCEL )
|
|
{
|
|
this.root.classList.add( "netgis-hide" );
|
|
}
|
|
}; |