Merge pull request #73 from neo-garaix/add-qgis-logo

Updated structure, Logo for projects and fix bugs

Author: Gustry

mapBuilder/www/css/main.css

@@ -442,11 +442,19 @@ ul .layer-store-layer:last-child {
 .info-layer-selected {
     display: flex;
     flex-direction: column;
+    max-width: 140px;
+    overflow: hidden;
 }
 
 .repository-layer-selected {
     font-size: 11px;
     color: #464646;
+    white-space: nowrap;
+}
+
+.layer-store-folder.project {
+    content: url("./svg/project.svg");
+    width: 30px;
 }
 
 custom-slider .slider {

mapBuilder/www/css/svg/project.svg

@@ -20,8 +20,10 @@ export class LayerSelected extends HTMLElement {
         super();
         this._element = element;
         this.setAttribute("class", "container-layer-selected");
-        this.setAttribute("id", element.getUid());
+        this.setAttribute("id", "layer_" + element.getUid());
         this.setAttribute("draggable", "true");
+        this.setAttribute("data-ol-uid", element.getUid());
+        this.isCSSProjectNameSet = false;
         this.render()
     }
 
@@ -87,7 +89,7 @@ export class LayerSelected extends HTMLElement {
             <div class="upper-line">
                 <div class="info-layer-selected">
                     <span class="title-layer-selected">${this._element.getLayer().getProperties().title}</span>
-                    <span class="repository-layer-selected">${this._element.getLayer().getProperties().repositoryId}</span>
+                    <span class="repository-layer-selected">${this._element.getLayer().getProperties().projectName}</span>
                 </div>
                 <div class="layer-buttons-div">
                     ${attributeTableShow}
@@ -108,12 +110,23 @@ export class LayerSelected extends HTMLElement {
         render(tpl, this);
     }
 
+    connectedCallback() {
+        if (!this.isCSSProjectNameSet) {
+            const infoElementSelector = `#${this.id} .info-layer-selected`;
+            const infoElement = document.querySelector(infoElementSelector);
+
+            infoElement.addEventListener("mouseenter", () => {
+                this.handleProjectNameCSS();
+            });
+        }
+    }
+
     /**
      * Delete the component and the layer associated to it.
      * @param {PointerEvent} event Event occurring.
      */
     actionDeleteLayerButton(event) {
-        getLayerSelectionArray().removeElement(event.target.closest(".container-layer-selected").id);
+        getLayerSelectionArray().removeElement(event.target.closest(".container-layer-selected").dataset.olUid);
         document.getElementById("layer-selected-holder").removeChild(this);
     }
 
@@ -412,6 +425,33 @@ export class LayerSelected extends HTMLElement {
             document.getElementById("bottom-dock").style.display = 'block';
         });
     }
+
+    handleProjectNameCSS() {
+        if (this.isCSSProjectNameSet) return;
+
+        this.isCSSProjectNameSet = true;
+
+        const projectNameElement = document.querySelector(`#${this.id} .info-layer-selected .repository-layer-selected`);
+        const diffWidth = projectNameElement.scrollWidth - projectNameElement.clientWidth;
+
+        if (diffWidth > 0) {
+            const transitionTime = Math.round((diffWidth / 80) * 10) / 10;
+            const css = `
+            #${this.id} .info-layer-selected:hover .repository-layer-selected {
+                transform: translateX(calc(0px - ${diffWidth}px));
+                transition: ${transitionTime}s ease-in-out;
+            }
+        `;
+            this.addDynamicStyle(css);
+        }
+    }
+
+    addDynamicStyle(css) {
+        const style = document.createElement('style');
+        style.appendChild(document.createTextNode(css));
+        document.head.appendChild(style);
+    }
+
 }
 
 customElements.define('lizmap-layer-selected', LayerSelected);

mapBuilder/www/js/components/LayerSelected.js

@@ -2,6 +2,7 @@ import {html, render, nothing} from 'lit-html';
 import {LayerTreeFolder} from "../modules/LayerTree/LayerTreeFolder";
 import {WMSCapabilities} from "ol/format";
 import {LayerTreeLayer} from "../modules/LayerTree/LayerTreeLayer";
+import {LayerTreeProject} from "../modules/LayerTree/LayerTreeProject";
 
 /**
  * Class representing the layer store.
@@ -44,22 +45,23 @@ export class LayerStore extends HTMLElement {
      */
     folderTemplate(element) {
     //Check if the folder will have to load children from a project.
-        let tagLazy = element.isLazy() ? "lazy" : "";
-
-        let icoSpan;
-
-        //Check if the folder is loading, opened or closed.
-        if (element.isLoading()) {
-            icoSpan = "fa-spinner fa-pulse";
-        } else {
-            icoSpan = element.isOpened() ? "fa-folder-open" : "fa-folder";
-        }
-
-        //Check if the folder is failed to load children.
-        //It occurs when the project can't be loaded.
-        if (element.isFailed()) {
-            icoSpan = "fa-window-close";
-            tagLazy = "failed";
+        let icoSpan = element.isOpened() ? "fa-folder-open" : "fa-folder";
+        let tagLazy = "";
+
+        if (element instanceof LayerTreeProject) {
+            tagLazy = element.isLazy() ? "lazy" : "";
+
+            //Check if the folder is loading, opened or closed.
+            if (element.isLoading()) {
+                icoSpan = "fa-spinner fa-pulse";
+            } else if (element.isFailed()) {
+                //Check if the folder is failed to load children.
+                //It occurs when the project can't be loaded.
+                icoSpan = "fa-window-close";
+                tagLazy = "failed";
+            } else {
+                icoSpan = "project";
+            }
         }
 
         //Template of a folder.
@@ -162,35 +164,49 @@ export class LayerStore extends HTMLElement {
      * Action when a folder is clicked.
      * It can open or close the folder.
      * It can decide to load the project and put children in the folder.
-     * @param {LayerTreeFolder} element The folder clicked.
+     * @param {LayerTreeFolder|LayerTreeProject} element The folder clicked.
      * @param {Event} e Event occurring.
      */
     async action(element, e) {
-        if (element.isLazy()) {
+        const handleLazyLoading = async () => {
             element.setLoading(true);
             this.render();
-            //Prevent from multiple request
+
+            // Prevent multiple requests
             element.setLazy(false);
             e.target.closest('.lazy').children[0].className = "layer-store-folder fas fa-spinner fa-pulse";
-            //After loaded
-            let child = await this.loadTree(element);
-            element.setLazy(false);
+
+            // Load folder content
+            let children = await this.loadTree(element);
             element.setLoading(false);
-            if (child.length > 0) {
-                child.forEach((el) => {
-                    el.repository = element.getRepository();
-                    el.project = element.getProject();
-                });
-                element.createChildren(child);
+
+            if (children.length > 0) {
+                updateChildrenAttributes(children, element);
+                element.createChildren(children);
                 element.changeStatusFolder();
             } else {
                 element.setFailed();
             }
+        };
+
+        const updateChildrenAttributes = (children, element) => {
+            children.forEach((child) => {
+                child.repository = element.getRepository();
+                child.project = element.getProject();
+            });
+        };
+
+        if (element instanceof LayerTreeProject) {
+            if (element.isLazy()) {
+                await handleLazyLoading();
+            } else {
+                element.changeStatusFolder();
+            }
         } else {
             element.changeStatusFolder();
         }
-        this.render();
 
+        this.render();
     };
 
     /**

mapBuilder/www/js/components/LayerStore.js

@@ -464,6 +464,7 @@ $(function() {
                     serverType: 'qgis'
                 })
             });
+            newLayer.setProperties({"projectName": node.getProjectName()});
 
             // Set min/max resolution if min/max scale are defined in getCapabilities
             if (node.getMinScale()) {
@@ -542,6 +543,10 @@ $(function() {
         document.getElementById('legend-content').innerHTML = legendsDiv;
     }
 
+    document.addEventListener('layerSelectedChanges', function () {
+        loadLegend();
+    });
+    
     // Open/Close dock behaviour
     $('#dock-close > button').on("click", function(){
         $('#mapmenu .dock').removeClass('active');

mapBuilder/www/js/main.js

@@ -43,15 +43,16 @@ export function addElementToLayerArray(value, color) {
         e.preventDefault();
         const data = e.dataTransfer.getData('text/plain');
         const draggedElement = document.getElementById(data);
+        const draggedElementId = draggedElement.dataset.olUid;
 
         let index = getIndexOfDrop(dropZone, e.clientY);
 
-        while (layerArray.getIndexOf(draggedElement.id) !== index) {
-            let currentIndex = layerArray.getIndexOf(draggedElement.id);
+        while (layerArray.getIndexOf(draggedElementId) !== index) {
+            let currentIndex = layerArray.getIndexOf(draggedElementId);
             if (currentIndex > index) {
-                changeList(draggedElement.id, "up");
+                changeList(draggedElementId, "up");
             } else {
-                changeList(draggedElement.id, "down");
+                changeList(draggedElementId, "down");
             }
         }
     });
@@ -90,20 +91,22 @@ export function getLayerSelectionArray() {
  * @param {string} direction Which direction to go : 'up' or 'down'.
  */
 export function changeList(uid, direction) {
+    let element = document.getElementById(`layer_${uid}`);
     if (direction === "up") {
-        changeOrderUp(uid);
+        changeOrderUp(uid, element);
     } else {
-        changeOrderDown(uid);
+        changeOrderDown(uid, element);
     }
+    document.dispatchEvent(new CustomEvent('layerSelectedChanges'));
 }
 
 /**
  * Change the order of the layer with the one above.
  * @param {string} uid layer's uid
+ * @param {HTMLElement} element layer to switch
  */
-function changeOrderUp(uid) {
+function changeOrderUp(uid, element) {
     layerArray.changeOrder(uid, "up");
-    let element = document.getElementById(`${uid}`);
     switchVisualLayers(
         element,
         element.previousElementSibling
@@ -113,10 +116,10 @@ function changeOrderUp(uid) {
 /**
  * Change the order of the layer with the one below.
  * @param {string} uid layer's uid
+ * @param {HTMLElement} element layer to switch
  */
-function changeOrderDown(uid) {
+function changeOrderDown(uid, element) {
     layerArray.changeOrder(uid, "down");
-    let element = document.getElementById(`${uid}`);
     switchVisualLayers(
         element,
         element.nextElementSibling

mapBuilder/www/js/modules/LayerSelection/LayerSelection.js

@@ -4,6 +4,7 @@
  * @property {Array} _bbox Bbox.
  * @property {boolean} _popup Popup.
  * @property {string} _project Project id.
+ * @property {string} _projectName Project name.
  * @property {string} _repository Repository id.
  * @property {string} _color Color of the layer in the CSS sheet.
  */
@@ -21,6 +22,8 @@ export class LayerTreeElement {
 
         this._project = options.project !== undefined ? options.project : undefined;
 
+        this._projectName = options.projectName !== undefined ? options.projectName : undefined;
+
         this._repository = options.repository !== undefined ? options.repository : undefined;
 
         this._color = options.color !== undefined ? options.color : undefined;
@@ -111,6 +114,14 @@ export class LayerTreeElement {
         return this._project;
     }
 
+    /**
+     * Get the project name.
+     * @returns {string} Project name.
+     */
+    getProjectName() {
+        return this._projectName;
+    }
+
     /**
      * Get the repository id.
      * @returns {string} Repository id.