- 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'
This commit is contained in:
Mark Friedrich
2020-04-24 21:56:05 +02:00
parent 2ffb9ffc76
commit 7cc66f1591
35 changed files with 3004 additions and 1498 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -34,7 +34,7 @@ requirejs.config({
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
slidebars: 'lib/slidebars', // v2.0.2 Slidebars - side menu plugin https://www.adchsm.com/slidebars/
jsPlumb: 'lib/jsplumb', // v2.9.3 jsPlumb main map draw plugin http://jsplumb.github.io/jsplumb/home.html
jsPlumb: 'lib/jsplumb', // v2.13.1 jsPlumb main map draw plugin http://jsplumb.github.io/jsplumb/home.html
farahey: 'lib/farahey', // v1.1.2 jsPlumb "magnetizing" plugin extension - https://github.com/ThomasChan/farahey
easyTimer: 'lib/easytimer.min', // v4.0.2 EasyTimer - Timer/Chronometer/Countdown library - http://albert-gonzalez.github.io/easytimer.js
customScrollbar: 'lib/jquery.mCustomScrollbar.min', // v3.1.5 Custom scroll bars - http://manos.malihu.gr

View File

@@ -47,7 +47,6 @@ define([], () => {
getStatisticsData: '/api/Statistic/getData', // ajax URL - get statistics data (activity log)
// universe API
searchUniverseData: '/api/Universe/search', // ajax URL - search universe data by category Ids
searchUniverseSystemData: '/api/Universe/systems', // ajax URL - search universe system data by name
getConstellationData: '/api/Universe/constellationData', // ajax URL - get system constellation data
// GitHub API
gitHubReleases: '/api/GitHub/releases' // ajax URL - get release info from GitHub
@@ -367,22 +366,13 @@ define([], () => {
// map connection types
connectionTypes: {
abyssal: {
cssClass: 'pf-map-connection-abyssal',
paintStyle: {
dashstyle: '0.5 2' // dotted line
}
cssClass: 'pf-map-connection-abyssal'
},
jumpbridge: {
cssClass: 'pf-map-connection-jumpbridge',
paintStyle: {
dashstyle: '4 2 1 2'
}
cssClass: 'pf-map-connection-jumpbridge'
},
stargate: {
cssClass: 'pf-map-connection-stargate',
paintStyle: {
dashstyle: '0' // solid line
}
cssClass: 'pf-map-connection-stargate'
},
wh_eol: {
cssClass: 'pf-map-connection-wh-eol'
@@ -398,10 +388,6 @@ define([], () => {
},
wh_jump_mass_s: {
cssClass: 'pf-map-connection-wh-size-s',
paintStyle: {
dashstyle: '0.5 1',
strokeWidth: 3
},
overlays: [
['Label',
{
@@ -414,9 +400,6 @@ define([], () => {
},
wh_jump_mass_m: {
cssClass: 'pf-map-connection-wh-size-m',
paintStyle: {
dashstyle: '3 1'
},
overlays: [
['Label',
{
@@ -441,9 +424,6 @@ define([], () => {
},
wh_jump_mass_xl: {
cssClass: 'pf-map-connection-wh-size-xl',
paintStyle: {
strokeWidth: 6
},
overlays: [
['Label',
{
@@ -471,11 +451,11 @@ define([], () => {
{
id: 'pf-map-connection-arrow-overlay',
cssClass: 'pf-map-connection-arrow-overlay',
location: 0.5,
length: '${arrowlength}',
width: 12,
length: 15,
direction: 1,
foldback: 0.8,
location: 0.5
direction: '${arrowdirection}',
foldback: '${arrowfoldback}'
}]
]
},

View File

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

View File

@@ -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
};
});

View File

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

View File

@@ -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
});

View File

@@ -335,15 +335,6 @@ define([
let executor = resolve => {
$(pageMenuRightEl).append(getMenu([
{
type: 'button',
label: 'Information',
icon: 'fa-street-view',
action: 'ShowMapInfo',
data: {tab: 'information'}
},{
type: 'heading',
label: 'Configuration'
},{
type: 'button',
class: 'loading',
label: 'Settings',
@@ -351,6 +342,15 @@ define([
group: 'mapOptions',
action: 'ShowMapSettings',
data: {tab: 'settings'}
},{
type: 'button',
label: 'Information',
icon: 'fa-street-view',
action: 'ShowMapInfo',
data: {tab: 'information'}
},{
type: 'heading',
label: 'Map'
},{
type: 'button',
id: Util.config.menuButtonGridId,
@@ -371,26 +371,42 @@ define([
action: 'MapOption',
target: 'map',
data: {option: 'mapMagnetizer', toggle: true}
},{
type: 'heading',
label: 'System'
},{
type: 'button',
id: Util.config.menuButtonRegionId,
class: 'loading',
label: 'Region label',
icon: 'fa-map-marked-alt',
group: 'mapOptions',
action: 'MapOption',
target: 'map',
data: {option: 'systemRegion', toggle: true}
},{
type: 'button',
id: Util.config.menuButtonCompactId,
class: 'loading',
label: 'Compact view',
icon: 'fa-compress',
group: 'mapOptions',
action: 'MapOption',
target: 'map',
data: {option: 'systemCompact', toggle: true}
},{
type: 'heading',
label: 'Connection'
},{
type: 'button',
id: Util.config.menuButtonEndpointId,
class: 'loading',
label: 'Signatures',
label: 'Signature overlay',
icon: 'fa-link',
group: 'mapOptions',
action: 'MapOption',
target: 'map',
data: {option: 'mapSignatureOverlays', toggle: true}
},{
type: 'button',
id: Util.config.menuButtonCompactId,
class: 'loading',
label: 'Compact',
icon: 'fa-compress',
group: 'mapOptions',
action: 'MapOption',
target: 'map',
data: {option: 'mapCompact', toggle: true}
},{
type: 'heading',
label: 'Help'

View File

@@ -370,19 +370,14 @@ define([
$.when(
selectElement.select2({
ajax: {
url: function(params){
// add params to URL
return Init.path.searchUniverseSystemData + '/' + params.term.trim();
},
url: params => `${Init.path.api}/SystemSearch/${params.term.trim()}`,
dataType: 'json',
delay: 250,
timeout: 5000,
cache: true,
data: function(params){
return {
page: params.page || 1
};
},
data: params => ({
page: params.page || 1
}),
processResults: function(data, params){
// parse the results into the format expected by Select2.
return {

View File

@@ -59,8 +59,9 @@ define([
menuButtonFullScreenId: 'pf-menu-button-fullscreen', // id for menu button "fullScreen"
menuButtonMagnetizerId: 'pf-menu-button-magnetizer', // id for menu button "magnetizer"
menuButtonGridId: 'pf-menu-button-grid', // id for menu button "grid snap"
menuButtonEndpointId: 'pf-menu-button-endpoint', // id for menu button "endpoint" overlays
menuButtonRegionId: 'pf-menu-button-region', // id for menu button "region" info on systems
menuButtonCompactId: 'pf-menu-button-compact', // id for menu button "compact" UI map view
menuButtonEndpointId: 'pf-menu-button-endpoint', // id for menu button "endpoint" overlays
menuButtonMapDeleteId: 'pf-menu-button-map-delete', // id for menu button "delete map"
// footer
@@ -2543,20 +2544,19 @@ define([
};
/**
* get a HTML table with universe region information
* get a HTML table with universe sovereignty data
* e.g. for popover
* @param regionName
* @param sovereignty
* @returns {string}
*/
let getSystemRegionTable = (regionName, sovereignty) => {
let data = [{label: 'Region', value: regionName}];
let getSystemSovereigntyTable = sovereignty => {
let data = [];
if(sovereignty){
if(sovereignty.faction){
data.push({label: 'Sov. Faction', value: sovereignty.faction.name});
data.push({label: 'Faction', value: sovereignty.faction.name});
}
if(sovereignty.alliance){
data.push({label: 'Sov. Ally', value: sovereignty.alliance.name});
data.push({label: 'Alliance', value: sovereignty.alliance.name});
}
}
@@ -3717,7 +3717,7 @@ define([
getSystemEffectData: getSystemEffectData,
getSystemEffectTable: getSystemEffectTable,
getSystemPlanetsTable: getSystemPlanetsTable,
getSystemRegionTable: getSystemRegionTable,
getSystemSovereigntyTable: getSystemSovereigntyTable,
getSystemPilotsTable: getSystemPilotsTable,
getSystemsInfoTable: getSystemsInfoTable,
getStatusInfoForCharacter: getStatusInfoForCharacter,

File diff suppressed because it is too large Load Diff