- New map option for inline system region names, closed #947

- Upgraded "[_jsPlumb_](http://jsplumb.github.io/jsplumb/home.html)" js lib `v2.9.3` → `v2.13.1` - Moved endpoint `/api/universe/systems` into new REST structure 'GET /api/rest/SystemSearch'
2020-04-24 21:56:05 +02:00
parent 2ffb9ffc76
commit 7cc66f1591
35 changed files with 3004 additions and 1498 deletions
--- a/js/app/map/map.js
+++ b/js/app/map/map.js
@@ -60,27 +60,34 @@ define([

    // map menu options
    let mapOptions = {
+        mapSnapToGrid : {
+            buttonId: Util.config.menuButtonGridId,
+            description: 'Grid snapping',
+            class: 'mapGridClass'
+        },
        mapMagnetizer: {
            buttonId: Util.config.menuButtonMagnetizerId,
            description: 'Magnetizer',
            onEnable: Magnetizer.initMagnetizer,
            onDisable: Magnetizer.destroyMagnetizer
        },
-        mapSnapToGrid : {
-            buttonId: Util.config.menuButtonGridId,
-            description: 'Grid snapping',
-            class: 'mapGridClass'
+        systemRegion : {
+            buttonId: Util.config.menuButtonRegionId,
+            description: 'Region names',
+            class: 'systemRegionClass',
+            onEnable: MapOverlay.toggleInfoSystemRegion,
+            onDisable: MapOverlay.toggleInfoSystemRegion,
+        },
+        systemCompact : {
+            buttonId: Util.config.menuButtonCompactId,
+            description: 'Compact system layout',
+            class: 'systemCompactClass'
        },
        mapSignatureOverlays : {
            buttonId: Util.config.menuButtonEndpointId,
            description: 'Endpoint overlay',
            onEnable: MapOverlay.showInfoSignatureOverlays,
            onDisable: MapOverlay.hideInfoSignatureOverlays,
-        },
-        mapCompact : {
-            buttonId: Util.config.menuButtonCompactId,
-            description: 'Compact system layout',
-            class: 'mapCompactClass'
        }
    };

@@ -930,7 +937,7 @@ define([
                    connection.setConnector(newConnector);

                    // we need to "reapply" the types after "Connector" was changed
-                    connection.reapplyTypes();
+                    // connection.reapplyTypes();
                }

                // add endpoint types ---------------------------------------------------------------------------------
@@ -1203,7 +1210,7 @@ define([

                // show static overlay actions
                let mapOverlay = MapOverlayUtil.getMapOverlay(mapContainer, 'info');
-                mapOverlay.updateOverlayIcon('systemRegion', 'show');
+                mapOverlay.updateOverlayIcon('systemPopover', 'show');
                mapOverlay.updateOverlayIcon('connection', 'show');
                mapOverlay.updateOverlayIcon('connectionEol', 'show');

@@ -2889,7 +2896,7 @@ define([
                }

                // compact/small system layout or not
-                let compactView = mapElement.hasClass(MapUtil.config.mapCompactClass);
+                let compactView = mapElement.hasClass(MapUtil.config.systemCompactClass);

                // get current character log data
                let characterLogSystemId = Util.getObjVal(Util.getCurrentCharacterData('log'), 'system.id') || 0;
--- a/js/app/map/overlay/overlay.js
+++ b/js/app/map/overlay/overlay.js
@@ -80,21 +80,22 @@ define([
     * get overlay parameters for connection overlay (type 'diamond' or 'arrow')
     * @param overlayType
     * @param direction
+     * @param prefix        for obj keys -> for parameterized Overlays
     * @returns {{length: number, foldback: number, direction: number}}
     */
-    let getConnectionArrowOverlayParams = (overlayType, direction = 1) => {
+    let getConnectionArrowOverlayParams = (overlayType, direction = 1, prefix = 'arrow') => {
        switch(overlayType){
            case 'arrow':
                return {
-                    length: 15,
-                    direction: direction,
-                    foldback: 0.8
+                    [`${prefix}length`]: 15,
+                    [`${prefix}direction`]: direction,
+                    [`${prefix}foldback`]: 0.8
                };
            default:    // diamond
                return {
-                    length: 10,
-                    direction: 1,
-                    foldback: 2
+                    [`${prefix}length`]: 10,
+                    [`${prefix}direction`]: 1,
+                    [`${prefix}foldback`]: 2
                };
        }
    };
@@ -109,6 +110,8 @@ define([
        connectionsData = Util.arrayToObject(connectionsData);

        map.setSuspendDrawing(true);
+        // ... redraw should be suspended (no repaint until function ends)
+        let doNotRepaint = map.isSuspendDrawing();

        map.getAllConnections().forEach(connection => {
            let connectionId    = connection.getParameter('connectionId');
@@ -121,6 +124,7 @@ define([
            let sizeLockedBySignature = false;

            if(connection.scope === 'wh'){
+                /* TODO check if we still need this, commented out after jsPlumb `v2.9.3` → `v2.13.1` upgrade
                if(!connection.hasType(type)){
                    connection.addType(type);
                }
@@ -128,10 +132,11 @@ define([
                let overlayArrow = connection.getOverlay(MapOverlayUtil.config.connectionOverlayArrowId);

                // Arrow overlay needs to be cleared() (removed) if 'info_signature' gets removed!
-                // jsPlumb does not handle overlay updates for Arrow overlays... so we need to re-apply the the overlay manually
+                // jsPlumb does not handle overlay updates for Arrow overlays... so we need to re-apply the overlay manually
                if(overlayArrow.path && !overlayArrow.path.isConnected){
                    connection.canvas.appendChild(overlayArrow.path);
                }
+                */

                // since there "could" be multiple sig labels on each endpoint,
                // there can only one "primary label picked up for wormhole jump mass detection!
@@ -187,7 +192,13 @@ define([
                    );
                }

-                overlayArrow.updateFrom(getConnectionArrowOverlayParams(overlayType, arrowDirection));
+                let arrowParams = getConnectionArrowOverlayParams(overlayType, arrowDirection);
+
+                if(!connection.hasType(type)){
+                    connection.addType(type, arrowParams, doNotRepaint);
+                }else{
+                    connection.reapplyTypes(arrowParams, doNotRepaint);
+                }

                // update/add endpoint overlays -------------------------------------------------------------------
                updateEndpointOverlaySignatureLabel(sourceEndpoint, signatureTypeData.source);
@@ -213,7 +224,7 @@ define([
            }else{
                // connection is not 'wh' scope
                if(connection.hasType(type)){
-                    connection.removeType(type);
+                    connection.removeType(type, undefined, doNotRepaint);
                }
            }

@@ -312,6 +323,17 @@ define([
        map.setSuspendDrawing(false, true);
    };

+    /**
+     * callback after applying map option "systemRegion"
+     * -> system dimension changed -> redraw connections
+     * @param mapElement
+     */
+    let toggleInfoSystemRegion = mapElement => {
+        let mapId = mapElement.data('id');
+        let map = MapUtil.getMapInstance(mapId);
+        map.repaintEverything();
+    };
+
    /**
     * Overlay options (all available map options shown in overlay)
     * "active":    (active || hover) indicated whether an icon/option
@@ -325,7 +347,7 @@ define([
            trigger: 'active',
            class: 'pf-map-overlay-filter',
            iconClass: ['fas', 'fa-fw', 'fa-filter'],
-        onClick: function(e){
+            onClick: function(e){
                // clear all filter
                let mapElement = MapOverlayUtil.getMapElementFromOverlay(this);
                let map = getMapObjectFromOverlayIcon(this);
@@ -335,22 +357,34 @@ define([
            }
        },
        mapSnapToGrid: {
-            title: 'active grid',
+            title: 'grid',
            trigger: 'active',
            class: 'pf-map-overlay-grid',
            iconClass: ['fas', 'fa-fw', 'fa-th']
        },
        mapMagnetizer: {
-            title: 'active magnetizer',
+            title: 'magnetizer',
            trigger: 'active',
            class: 'pf-map-overlay-magnetizer',
            iconClass: ['fas', 'fa-fw', 'fa-magnet']
        },
        systemRegion: {
-            title: 'show regions',
-            trigger: 'hover',
+            title: 'regions',
+            trigger: 'active',
            class: 'pf-map-overlay-region',
-            iconClass: ['fas', 'fa-fw', 'fa-tags'],
+            iconClass: ['fas', 'fa-fw', 'fa-map-marked-alt']
+        },
+        systemCompact: {
+            title: 'compact layout',
+            trigger: 'active',
+            class: 'pf-map-overlay-compact',
+            iconClass: ['fas', 'fa-fw', 'fa-compress']
+        },
+        systemPopover: {
+            title: 'sovereignty',
+            trigger: 'hover',
+            class: 'pf-map-overlay-popover',
+            iconClass: ['fas', 'fa-fw', 'fa-landmark'],
            hoverIntent: {
                over: function(e){
                    let mapElement = MapOverlayUtil.getMapElementFromOverlay(this);
@@ -360,17 +394,17 @@ define([
                        if(!systemHead.data('bs.popover')){
                            let system = systemHead.parent();
                            let systemData = system.data();
-                            systemHead.popover({
-                                placement: 'bottom',
-                                html: true,
-                                trigger: 'manual',
-                                container: mapElement,
-                                title: false,
-                                content: Util.getSystemRegionTable(
-                                    Util.getObjVal(systemData, 'region'),
-                                    Util.getObjVal(systemData, 'sovereignty')
-                                )
-                            });
+                            let sovereignty = Util.getObjVal(systemData, 'sovereignty');
+                            if(sovereignty){
+                                systemHead.popover({
+                                    placement: 'bottom',
+                                    html: true,
+                                    trigger: 'manual',
+                                    container: mapElement,
+                                    title: false,
+                                    content: Util.getSystemSovereigntyTable(sovereignty)
+                                });
+                            }
                        }
                        systemHead.setPopoverSmall();
                        systemHead.popover('show');
@@ -383,17 +417,11 @@ define([
            }
        },
        mapSignatureOverlays: {
-            title: 'active signature overlays',
+            title: 'signature overlays',
            trigger: 'active',
            class: 'pf-map-overlay-endpoint',
            iconClass: ['fas', 'fa-fw', 'fa-link']
        },
-        mapCompact: {
-            title: 'compact layout',
-            trigger: 'active',
-            class: 'pf-map-overlay-compact',
-            iconClass: ['fas', 'fa-fw', 'fa-compress']
-        },
        connection: {
            title: 'WH data',
            trigger: 'hover',
@@ -445,7 +473,7 @@ define([
            }
        },
        connectionEol: {
-            title: 'EOL timer',
+            title: 'EOL',
            trigger: 'hover',
            class: 'pf-map-overlay-connection-eol',
            iconClass: ['fas', 'fa-fw', 'fa-hourglass-end'],
@@ -861,9 +889,10 @@ define([
    };

    return {
-        showInfoSignatureOverlays: showInfoSignatureOverlays,
-        hideInfoSignatureOverlays: hideInfoSignatureOverlays,
-        updateZoomOverlay: updateZoomOverlay,
-        initMapDebugOverlays: initMapDebugOverlays
+        showInfoSignatureOverlays,
+        hideInfoSignatureOverlays,
+        toggleInfoSystemRegion,
+        updateZoomOverlay,
+        initMapDebugOverlays
    };
 });
--- a/js/app/map/system.js
+++ b/js/app/map/system.js
@@ -22,6 +22,7 @@ define([
        systemHeadInfoClass: 'pf-system-head-info',                                     // class for system info
        systemHeadInfoLeftClass: 'pf-system-head-info-left',                            // class for left system info
        systemHeadInfoRightClass: 'pf-system-head-info-right',                          // class for right system info
+        systemHeadRegionClass: 'pf-system-head-region',                                 // class for "region" in system info

        systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-',                         // id prefix for system tooltip content
        systemTooltipInnerClass: 'pf-system-tooltip-inner',                             // class for system tooltip content
@@ -765,19 +766,32 @@ define([
     * get new dom element for systemData that shows "info" data (additional data)
     * -> this is show below the system base data on map
     * @param data
-     * @returns {*}
+     * @returns {HTMLDivElement|undefined}
     */
    let getHeadInfoElement = data => {
-        let headInfo = null;
+        let infoEl;
        let headInfoLeft = [];
        let headInfoRight = [];

        if(data.drifter){
-            headInfoLeft.push('<i class="fas fa-fw fa-wave-square ' + Util.getSecurityClassForSystem(data.security) + '" title="drifter"></i>');
+            headInfoLeft.push(Object.assign(document.createElement('i'), {
+                className: `fas fa-fw fa-wave-square ${Util.getSecurityClassForSystem(data.security)}`,
+                title: 'drifter'
+            }));
        }

        if(data.shattered){
-            headInfoLeft.push('<i class="fas fa-fw fa-chart-pie ' + Util.getSecurityClassForSystem('SH') + '" title="shattered"></i>');
+            headInfoLeft.push(Object.assign(document.createElement('i'), {
+                className: `fas fa-fw fa-chart-pie ${Util.getSecurityClassForSystem('SH')}`,
+                title: 'shattered'
+            }));
+        }
+
+        if(data.type.id === 2){
+            headInfoLeft.push(Object.assign(document.createElement('span'), {
+                className: config.systemHeadRegionClass,
+                textContent: data.region.name
+            }));
        }

        // check systemData if headInfo element is needed
@@ -785,31 +799,36 @@ define([
            // format wh statics
            for(let wormholeName of data.statics){
                let staticData = Object.assign({}, Init.wormholes[wormholeName]);
-                headInfoRight.push(
-                    '<span class="' +
-                    Util.getSecurityClassForSystem(staticData.security) + ' ' +
-                    Util.config.popoverTriggerClass + '" data-name="' + staticData.name +
-                    '">' + staticData.security + '</span>'
-                );
+                let staticEl = Object.assign(document.createElement('span'), {
+                    className: [
+                        Util.getSecurityClassForSystem(staticData.security),
+                        Util.config.popoverTriggerClass
+                    ].join(' '),
+                    textContent: staticData.security
+                });
+                staticEl.dataset.name = staticData.name;
+                headInfoRight.push(staticEl);
            }
        }

        if(headInfoLeft.length || headInfoRight.length){
-            headInfo = $('<div>', {
-                class: config.systemHeadInfoClass
-            }).append(
-                $('<div>', {
-                    class: config.systemHeadInfoLeftClass,
-                    html: headInfoLeft.join('&nbsp;&nbsp;')
-                }),
-                $('<div>', {
-                    class: config.systemHeadInfoRightClass,
-                    html: headInfoRight.join('&nbsp;&nbsp;')
-                })
-            );
+            let leftEl = Object.assign(document.createElement('div'), {
+                className: config.systemHeadInfoLeftClass
+            });
+            leftEl.append(...headInfoLeft);
+
+            let rightEl = Object.assign(document.createElement('div'), {
+                className: config.systemHeadInfoRightClass
+            });
+            rightEl.append(...headInfoRight);
+
+            infoEl = Object.assign(document.createElement('div'), {
+                className: config.systemHeadInfoClass
+            });
+            infoEl.append(leftEl, rightEl);
        }

-        return headInfo;
+        return infoEl;
    };

    return {
--- a/js/app/map/util.js
+++ b/js/app/map/util.js
@@ -19,7 +19,8 @@ define([
        zoomMin: 0.5,

        mapGridClass: 'pf-grid-small',                                  // class for map grid snapping
-        mapCompactClass: 'pf-compact',                                  // class for map compact system UI
+        systemRegionClass: 'pf-map-region',                             // class for systems regions on map
+        systemCompactClass: 'pf-map-compact',                           // class for compact systems on map

        systemIdPrefix: 'pf-system-',                                   // id prefix for a system
        systemClass: 'pf-system',                                       // class for all systems
@@ -1293,8 +1294,10 @@ define([

        connection._jsPlumb.instance.setSuspendDrawing(true);

-        removeConnectionTypes(connection, types.diff(type));
-        addConnectionTypes(connection, type);
+        // ... redraw should be suspended (no repaint until function ends)
+        let doNotRepaint = connection._jsPlumb.instance.isSuspendDrawing();
+        removeConnectionTypes(connection, types.diff(type), [], doNotRepaint);
+        addConnectionTypes(connection, type, [], doNotRepaint);

        connection._jsPlumb.instance.setSuspendDrawing(false, true);
    };
@@ -1443,9 +1446,9 @@ define([
                payload: mapConfig
            });

-            // init compact system layout ---------------------------------------------------------------------
+            // init grid snap ---------------------------------------------------------------------------------
            Util.triggerMenuAction(mapElement, 'MapOption', {
-                option: 'mapCompact',
+                option: 'mapSnapToGrid',
                toggle: false
            });

@@ -1455,9 +1458,15 @@ define([
                toggle: false
            });

-            // init grid snap ---------------------------------------------------------------------------------
+            // init compact system layout ---------------------------------------------------------------------
            Util.triggerMenuAction(mapElement, 'MapOption', {
-                option: 'mapSnapToGrid',
+                option: 'systemRegion',
+                toggle: false
+            });
+
+            // init compact system layout ---------------------------------------------------------------------
+            Util.triggerMenuAction(mapElement, 'MapOption', {
+                option: 'systemCompact',
                toggle: false
            });