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

- minor UI and "map overlays" improvements

Browse Source
This commit is contained in:
Mark Friedrich
2019-05-01 23:00:48 +02:00
parent af71142e85
commit a068d49f6a
17 changed files with 184 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
js/app/datatables.loader.js
View File

@@ -36,7 +36,10 @@ define([
let table = $(this);
let tableApi = new $.fn.dataTable.Api(settings);
// end all active processes (e.g. table lock)
tableApi.endProcesses();
// -> this custom extension is only available if "StatusTable" feature is enabled with it
if(typeof tableApi.endProcesses === 'function'){
tableApi.endProcesses();
}
// remove all active counters in table
table.destroyTimestampCounter(true);

17
js/app/init.js
View File

@@ -375,7 +375,7 @@ define(['jquery'], ($) => {
['Label',
{
label: 'frig',
cssClass: ['pf-map-connection-overlay', 'frig'].join(' '),
cssClass: ['pf-map-component-overlay', 'frig'].join(' '),
location: 0.6
}]
]
@@ -386,13 +386,24 @@ define(['jquery'], ($) => {
['Label',
{
label: '<i class="fas fa-fw fa-exclamation-triangle"></i>&nbsp;save mass',
cssClass: ['pf-map-connection-overlay', 'mass'].join(' '),
cssClass: ['pf-map-component-overlay', 'mass'].join(' '),
location: 0.6
}]
]
},
active: {
state_active: {
cssClass: 'pf-map-connection-active'
},
state_process: {
cssClass: 'pf-map-connection-process',
overlays:[
['Label',
{
label: '<i class="fas fa-fw fa-sync fa-spin"></i>',
cssClass: ['pf-map-connection-state-overlay'].join(' '),
location: 0.6
}]
]
}
},
// signature groups

14
js/app/map/map.js
View File

@@ -678,6 +678,11 @@ define([
* @param connection
*/
let connectionActions = (action, connection) => {
if(!connection._jsPlumb){
Util.showNotify({title: 'Connection not found', type: 'error'});
return;
}
let map = connection._jsPlumb.instance;
let mapElement = $(map.getContainer());
@@ -762,9 +767,9 @@ define([
if(e.which === 1){
let map = connection._jsPlumb.instance;
if(e.ctrlKey === true){
// an "active" connection is required before adding more "selected" connections
let activeConnections = MapUtil.getConnectionsByType(map, 'active');
if(activeConnections.length >= config.maxActiveConnections && !connection.hasType('active')){
// an "state_active" connection is required before adding more "selected" connections
let activeConnections = MapUtil.getConnectionsByType(map, 'state_active');
if(activeConnections.length >= config.maxActiveConnections && !connection.hasType('state_active')){
Util.showNotify({title: 'Connection select limit', text: 'You can´t select more connections', type: 'warning'});
}else{
if(activeConnections.length > 0){
@@ -1541,6 +1546,7 @@ define([
*/
let saveConnection = connection => {
if(connection instanceof jsPlumb.Connection){
connection.addType('state_process');
let map = connection._jsPlumb.instance;
let mapContainer = $(map.getContainer());
@@ -1559,6 +1565,8 @@ define([
let newConnectionData = payload.data;
if( !$.isEmptyObject(newConnectionData) ){
payload.context.connection.removeType('state_process');
let updateCon = false;
if(payload.context.oldConnectionData.id > 0){

31
js/app/map/overlay.js
View File

@@ -26,16 +26,17 @@ define([
systemHeadClass: 'pf-system-head', // class for system head
// overlay IDs
connectionOverlayId: 'pf-map-connection-overlay', // connection "normal size" ID (jsPlumb)
connectionOverlayWhId: 'pf-map-connection-wh-overlay', // connection WH overlay ID (jsPlumb)
connectionOverlayEolId: 'pf-map-connection-eol-overlay', // connection EOL overlay ID (jsPlumb)
connectionOverlayArrowId: 'pf-map-connection-arrow-overlay', // connection Arrows overlay ID (jsPlumb)
connectionOverlaySmallId: 'pf-map-connection-small-overlay', // connection "smaller" overlay ID (jsPlumb)
endpointOverlayId: 'pf-map-endpoint-overlay', // endpoint overlay ID (jsPlumb)
// overlay classes
connectionOverlayClass: 'pf-map-connection-overlay', // class for "normal size" overlay
componentOverlayClass: 'pf-map-component-overlay', // class for "normal size" overlay
connectionArrowOverlayClass: 'pf-map-connection-arrow-overlay', // class for "connection arrow" overlay
connectionDiamondOverlayClass: 'pf-map-connection-diamond-overlay', // class for "connection diamond" overlay
connectionOverlaySmallClass: 'pf-map-connection-small-overlay' // class for "smaller" overlays
connectionDiamondOverlayClass: 'pf-map-connection-diamond-overlay' // class for "connection diamond" overlay
};
/**
@@ -77,8 +78,8 @@ define([
'Label',
{
label: MapUtil.getEndpointOverlayContent(label),
id: config.connectionOverlaySmallId,
cssClass: config.connectionOverlaySmallClass,
id: config.endpointOverlayId,
cssClass: [config.componentOverlayClass, label.length ? 'small' : 'icon'].join(' '),
location: [ 0.9, 0.9 ]
}
]);
@@ -89,10 +90,6 @@ define([
let connectionId = connection.getParameter('connectionId');
let sourceEndpoint = connection.endpoints[0];
let targetEndpoint = connection.endpoints[1];
let sourceSystem = $(sourceEndpoint.element);
let targetSystem = $(targetEndpoint.element);
let sourceId = sourceSystem.data('id');
let targetId = targetSystem.data('id');
let signatureTypeNames = {
sourceLabels: [],
@@ -165,7 +162,7 @@ define([
* @param i
*/
let removeEndpointOverlay = (endpoint, i) => {
endpoint.removeOverlays(config.connectionOverlaySmallId);
endpoint.removeOverlays(config.endpointOverlayId);
};
/**
@@ -374,7 +371,7 @@ define([
connection: {
title: 'WH data',
trigger: 'hover',
class: 'pf-map-overlay-connection',
class: 'pf-map-overlay-connection-wh',
iconClass: ['fas', 'fa-fw', 'fa-fighter-jet'],
hoverIntent: {
over: function(e){
@@ -405,8 +402,8 @@ define([
'Label',
{
label: labels.join('<br>'),
id: config.connectionOverlayId,
cssClass: config.connectionOverlaySmallClass,
id: config.connectionOverlayWhId,
cssClass: [config.componentOverlayClass, 'small'].join(' '),
location: 0.35
}
]);
@@ -418,7 +415,7 @@ define([
let connections = MapUtil.searchConnectionsByScopeAndType(map, 'wh');
for(let connection of connections){
connection.removeOverlays(config.connectionOverlayId);
connection.removeOverlays(config.connectionOverlayWhId);
}
}
}
@@ -445,7 +442,7 @@ define([
{
label: '<i class="far fa-fw fa-clock"></i>&nbsp;' + formatTimeParts(diff),
id: config.connectionOverlayEolId,
cssClass: [config.connectionOverlayClass, 'eol'].join(' '),
cssClass: [config.componentOverlayClass, 'eol'].join(' '),
location: 0.25
}
]);

26
js/app/map/util.js
View File

@@ -286,7 +286,8 @@ define([
* @returns {*}
*/
let filterDefaultTypes = types => {
return types.filter(type => type.length > 0 && type !== 'default' && type !== 'active');
let defaultTypes = ['', 'default', 'state_active', 'state_process'];
return types.diff(defaultTypes);
};
/**
@@ -402,6 +403,8 @@ define([
// connectionIds for delete request
let connectionIds = [];
for(let connection of connections){
connection.addType('state_process');
let connectionId = connection.getParameter('connectionId');
// drag&drop a new connection does not have an id yet, if connection is not established correct
if(connectionId !== undefined){
@@ -416,6 +419,13 @@ define([
connections: connections
}).then(
payload => {
for(let connection of payload.context.connections){
// connection might be removed rom global map update before this requests ends
if(connection._jsPlumb){
connection.removeType('state_process');
}
}
// check if all connections were deleted that should get deleted
let deletedConnections = payload.context.connections.filter(
function(connection){
@@ -545,7 +555,7 @@ define([
* @returns {boolean}
*/
let hasActiveConnection = map => {
let activeConnections = getConnectionsByType(map, 'active');
let activeConnections = getConnectionsByType(map, 'state_active');
return activeConnections.length > 0;
};
@@ -676,12 +686,12 @@ define([
*/
let setConnectionsActive = (map, connections) => {
// set all inactive
for(let connection of getConnectionsByType(map, 'active')){
connection.removeType('active');
for(let connection of getConnectionsByType(map, 'state_active')){
connection.removeType('state_active');
}
for(let connection of connections){
connection.addType('active');
connection.addType('state_active');
}
};
@@ -723,11 +733,11 @@ define([
let selectedConnections = [];
let deselectedConnections = [];
for(let connection of connections){
if(connection.hasType('active')){
connection.removeType('active');
if(connection.hasType('state_active')){
connection.removeType('state_active');
deselectedConnections.push(connection);
}else{
connection.addType('active');
connection.addType('state_active');
selectedConnections.push(connection);
}
}

2
js/app/ui/dialog/map_info.js
View File

@@ -525,8 +525,6 @@ define([
});
// connections table ------------------------------------------------------------------------------------------
console.log(mapData.data.connections);
let connectionDataTable = connectionTable.dataTable({
pageLength: 20,
paging: true,

7
js/lib/dom.jsPlumb-1.7.6.js
View File

@@ -10388,8 +10388,11 @@
// in IE the top left corner is what it placed at the desired location. This will not
// be fixed. IE8 is not going to be supported for much longer.
//var ts = "translate(-50%, -50%)";
var ts = "translate3d(-8px, 5px, 0)";
//var ts = "translate(calc(-50% + 3px), calc(-50% + 3px))";
//var ts = "translate3d(-50%, -50, 0)";
//var ts = "translate3d(0, 0, 0)";
var ts = "translate3d(50%, 50, 0)";
//var ts = "translate3d(-8px, 5px, 0)";
div.style.webkitTransform = ts;
div.style.mozTransform = ts;
div.style.msTransform = ts;

2
public/css/v1.5.1/pathfinder.css
View File

File diff suppressed because one or more lines are too long

2
public/css/v1.5.1/pathfinder.css.map
View File

File diff suppressed because one or more lines are too long

5
public/js/v1.5.1/app/datatables.loader.js
View File

@@ -36,7 +36,10 @@ define([
let table = $(this);
let tableApi = new $.fn.dataTable.Api(settings);
// end all active processes (e.g. table lock)
tableApi.endProcesses();
// -> this custom extension is only available if "StatusTable" feature is enabled with it
if(typeof tableApi.endProcesses === 'function'){
tableApi.endProcesses();
}
// remove all active counters in table
table.destroyTimestampCounter(true);

17
public/js/v1.5.1/app/init.js
View File

@@ -375,7 +375,7 @@ define(['jquery'], ($) => {
['Label',
{
label: 'frig',
cssClass: ['pf-map-connection-overlay', 'frig'].join(' '),
cssClass: ['pf-map-component-overlay', 'frig'].join(' '),
location: 0.6
}]
]
@@ -386,13 +386,24 @@ define(['jquery'], ($) => {
['Label',
{
label: '<i class="fas fa-fw fa-exclamation-triangle"></i>&nbsp;save mass',
cssClass: ['pf-map-connection-overlay', 'mass'].join(' '),
cssClass: ['pf-map-component-overlay', 'mass'].join(' '),
location: 0.6
}]
]
},
active: {
state_active: {
cssClass: 'pf-map-connection-active'
},
state_process: {
cssClass: 'pf-map-connection-process',
overlays:[
['Label',
{
label: '<i class="fas fa-fw fa-sync fa-spin"></i>',
cssClass: ['pf-map-connection-state-overlay'].join(' '),
location: 0.6
}]
]
}
},
// signature groups

14
public/js/v1.5.1/app/map/map.js
View File

@@ -678,6 +678,11 @@ define([
* @param connection
*/
let connectionActions = (action, connection) => {
if(!connection._jsPlumb){
Util.showNotify({title: 'Connection not found', type: 'error'});
return;
}
let map = connection._jsPlumb.instance;
let mapElement = $(map.getContainer());
@@ -762,9 +767,9 @@ define([
if(e.which === 1){
let map = connection._jsPlumb.instance;
if(e.ctrlKey === true){
// an "active" connection is required before adding more "selected" connections
let activeConnections = MapUtil.getConnectionsByType(map, 'active');
if(activeConnections.length >= config.maxActiveConnections && !connection.hasType('active')){
// an "state_active" connection is required before adding more "selected" connections
let activeConnections = MapUtil.getConnectionsByType(map, 'state_active');
if(activeConnections.length >= config.maxActiveConnections && !connection.hasType('state_active')){
Util.showNotify({title: 'Connection select limit', text: 'You can´t select more connections', type: 'warning'});
}else{
if(activeConnections.length > 0){
@@ -1541,6 +1546,7 @@ define([
*/
let saveConnection = connection => {
if(connection instanceof jsPlumb.Connection){
connection.addType('state_process');
let map = connection._jsPlumb.instance;
let mapContainer = $(map.getContainer());
@@ -1559,6 +1565,8 @@ define([
let newConnectionData = payload.data;
if( !$.isEmptyObject(newConnectionData) ){
payload.context.connection.removeType('state_process');
let updateCon = false;
if(payload.context.oldConnectionData.id > 0){

31
public/js/v1.5.1/app/map/overlay.js
View File

@@ -26,16 +26,17 @@ define([
systemHeadClass: 'pf-system-head', // class for system head
// overlay IDs
connectionOverlayId: 'pf-map-connection-overlay', // connection "normal size" ID (jsPlumb)
connectionOverlayWhId: 'pf-map-connection-wh-overlay', // connection WH overlay ID (jsPlumb)
connectionOverlayEolId: 'pf-map-connection-eol-overlay', // connection EOL overlay ID (jsPlumb)
connectionOverlayArrowId: 'pf-map-connection-arrow-overlay', // connection Arrows overlay ID (jsPlumb)
connectionOverlaySmallId: 'pf-map-connection-small-overlay', // connection "smaller" overlay ID (jsPlumb)
endpointOverlayId: 'pf-map-endpoint-overlay', // endpoint overlay ID (jsPlumb)
// overlay classes
connectionOverlayClass: 'pf-map-connection-overlay', // class for "normal size" overlay
componentOverlayClass: 'pf-map-component-overlay', // class for "normal size" overlay
connectionArrowOverlayClass: 'pf-map-connection-arrow-overlay', // class for "connection arrow" overlay
connectionDiamondOverlayClass: 'pf-map-connection-diamond-overlay', // class for "connection diamond" overlay
connectionOverlaySmallClass: 'pf-map-connection-small-overlay' // class for "smaller" overlays
connectionDiamondOverlayClass: 'pf-map-connection-diamond-overlay' // class for "connection diamond" overlay
};
/**
@@ -77,8 +78,8 @@ define([
'Label',
{
label: MapUtil.getEndpointOverlayContent(label),
id: config.connectionOverlaySmallId,
cssClass: config.connectionOverlaySmallClass,
id: config.endpointOverlayId,
cssClass: [config.componentOverlayClass, label.length ? 'small' : 'icon'].join(' '),
location: [ 0.9, 0.9 ]
}
]);
@@ -89,10 +90,6 @@ define([
let connectionId = connection.getParameter('connectionId');
let sourceEndpoint = connection.endpoints[0];
let targetEndpoint = connection.endpoints[1];
let sourceSystem = $(sourceEndpoint.element);
let targetSystem = $(targetEndpoint.element);
let sourceId = sourceSystem.data('id');
let targetId = targetSystem.data('id');
let signatureTypeNames = {
sourceLabels: [],
@@ -165,7 +162,7 @@ define([
* @param i
*/
let removeEndpointOverlay = (endpoint, i) => {
endpoint.removeOverlays(config.connectionOverlaySmallId);
endpoint.removeOverlays(config.endpointOverlayId);
};
/**
@@ -374,7 +371,7 @@ define([
connection: {
title: 'WH data',
trigger: 'hover',
class: 'pf-map-overlay-connection',
class: 'pf-map-overlay-connection-wh',
iconClass: ['fas', 'fa-fw', 'fa-fighter-jet'],
hoverIntent: {
over: function(e){
@@ -405,8 +402,8 @@ define([
'Label',
{
label: labels.join('<br>'),
id: config.connectionOverlayId,
cssClass: config.connectionOverlaySmallClass,
id: config.connectionOverlayWhId,
cssClass: [config.componentOverlayClass, 'small'].join(' '),
location: 0.35
}
]);
@@ -418,7 +415,7 @@ define([
let connections = MapUtil.searchConnectionsByScopeAndType(map, 'wh');
for(let connection of connections){
connection.removeOverlays(config.connectionOverlayId);
connection.removeOverlays(config.connectionOverlayWhId);
}
}
}
@@ -445,7 +442,7 @@ define([
{
label: '<i class="far fa-fw fa-clock"></i>&nbsp;' + formatTimeParts(diff),
id: config.connectionOverlayEolId,
cssClass: [config.connectionOverlayClass, 'eol'].join(' '),
cssClass: [config.componentOverlayClass, 'eol'].join(' '),
location: 0.25
}
]);

26
public/js/v1.5.1/app/map/util.js
View File

@@ -286,7 +286,8 @@ define([
* @returns {*}
*/
let filterDefaultTypes = types => {
return types.filter(type => type.length > 0 && type !== 'default' && type !== 'active');
let defaultTypes = ['', 'default', 'state_active', 'state_process'];
return types.diff(defaultTypes);
};
/**
@@ -402,6 +403,8 @@ define([
// connectionIds for delete request
let connectionIds = [];
for(let connection of connections){
connection.addType('state_process');
let connectionId = connection.getParameter('connectionId');
// drag&drop a new connection does not have an id yet, if connection is not established correct
if(connectionId !== undefined){
@@ -416,6 +419,13 @@ define([
connections: connections
}).then(
payload => {
for(let connection of payload.context.connections){
// connection might be removed rom global map update before this requests ends
if(connection._jsPlumb){
connection.removeType('state_process');
}
}
// check if all connections were deleted that should get deleted
let deletedConnections = payload.context.connections.filter(
function(connection){
@@ -545,7 +555,7 @@ define([
* @returns {boolean}
*/
let hasActiveConnection = map => {
let activeConnections = getConnectionsByType(map, 'active');
let activeConnections = getConnectionsByType(map, 'state_active');
return activeConnections.length > 0;
};
@@ -676,12 +686,12 @@ define([
*/
let setConnectionsActive = (map, connections) => {
// set all inactive
for(let connection of getConnectionsByType(map, 'active')){
connection.removeType('active');
for(let connection of getConnectionsByType(map, 'state_active')){
connection.removeType('state_active');
}
for(let connection of connections){
connection.addType('active');
connection.addType('state_active');
}
};
@@ -723,11 +733,11 @@ define([
let selectedConnections = [];
let deselectedConnections = [];
for(let connection of connections){
if(connection.hasType('active')){
connection.removeType('active');
if(connection.hasType('state_active')){
connection.removeType('state_active');
deselectedConnections.push(connection);
}else{
connection.addType('active');
connection.addType('state_active');
selectedConnections.push(connection);
}
}

2
public/js/v1.5.1/app/ui/dialog/map_info.js
View File

@@ -525,8 +525,6 @@ define([
});
// connections table ------------------------------------------------------------------------------------------
console.log(mapData.data.connections);
let connectionDataTable = connectionTable.dataTable({
pageLength: 20,
paging: true,

7
public/js/v1.5.1/lib/dom.jsPlumb-1.7.6.js
View File

@@ -10388,8 +10388,11 @@
// in IE the top left corner is what it placed at the desired location. This will not
// be fixed. IE8 is not going to be supported for much longer.
//var ts = "translate(-50%, -50%)";
var ts = "translate3d(-8px, 5px, 0)";
//var ts = "translate(calc(-50% + 3px), calc(-50% + 3px))";
//var ts = "translate3d(-50%, -50, 0)";
//var ts = "translate3d(0, 0, 0)";
var ts = "translate3d(50%, 50, 0)";
//var ts = "translate3d(-8px, 5px, 0)";
div.style.webkitTransform = ts;
div.style.mozTransform = ts;
div.style.msTransform = ts;

70
sass/layout/_map.scss
View File

@@ -525,7 +525,6 @@ $mapBubbleWidth: 30px;
filter: drop-shadow( -3px 3px 4px rgba(0,0,0, 0.3));
animation-iteration-count: infinite;
animation-delay: 0.5s;
animation-fill-mode: both;
}
}
}
@@ -580,6 +579,7 @@ $mapBubbleWidth: 30px;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: both;
}
}
@@ -587,12 +587,13 @@ $mapBubbleWidth: 30px;
svg.jsplumb-connector{
cursor: pointer;
opacity: 1; // for animation
stroke-linecap: round; // line endings
@include transition( stroke 0.18s ease-out);
@include transition(stroke 0.18s ease-out, opacity 0.18s ease-out);
will-change: all;
path{
@include transition( stroke 0.18s ease-out) ;
@include transition( stroke 0.18s ease-out);
}
path:nth-child(2){
@@ -727,15 +728,58 @@ $mapBubbleWidth: 30px;
filter: drop-shadow( 0px 0px 3px $yellow-lighter);
}
// Connection overlays ==============================================================================================
.pf-map-connection-overlay{
padding: 1px 4px;
svg.pf-map-connection-process{
opacity: 0.4 !important;
path{
pointer-events: none;
}
}
// Overlays =========================================================================================================
%map-overlay{
font-size: 10px;
z-index: 1020;
background-color: $gray;
color: $gray-lighter;
}
.pf-map-component-overlay{
@extend %map-overlay;
padding: 1px 4px;
@include border-radius(6px);
@include box-shadow(0 6px 12px rgba(0,0,0,.4));
&.small{
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif; // fix for element width on custom font family
padding: 2px;
line-height: 12px;
@include border-radius(3px);
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
}
&.icon{
line-height: 10px;
padding: 0;
@include border-radius(5px);
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
}
}
// Connection overlays ==============================================================================================
.pf-map-connection-state-overlay{
@extend %map-overlay;
background-color: transparent;
//margin-top: -14px;
font-size: 12px;
margin-left: -7px;
margin-top: -7px;
width: 15px;
height: 15px;
opacity: 0.4 !important;
z-index: 1030;
}
.frig{
@@ -767,20 +811,6 @@ $mapBubbleWidth: 30px;
animation-duration: 4s;
animation-iteration-count: infinite;
}
// Endpoint overlays ================================================================================================
.pf-map-connection-small-overlay{
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif; // fix for element width on custom font family
padding: 2px;
font-size: 10px;
line-height: 100%;
z-index: 1020;
background-color: $gray;
color: $gray-lighter;
@include border-radius(5px);
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
}
}
// dialogs ============================================================================================================