dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

2
js/app.js
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

34
js/app/init.js
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}'
}]
]
},

31
js/app/map/map.js
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;

107
js/app/map/overlay/overlay.js
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
};
});

65
js/app/map/system.js
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 {

23
js/app/map/util.js
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
});

56
js/app/page.js
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'

13
js/app/ui/form_element.js
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 {

16
js/app/util.js
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,

1744
js/lib/jsplumb.js
View File

File diff suppressed because it is too large Load Diff