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

multiple map instances support added

Browse Source
This commit is contained in:
exodus4d
2014-11-02 23:24:11 +01:00
parent d286a8b0f2
commit 8700a03cb6
14 changed files with 337 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
.idea/jsLinters/jshint.xml generated Normal file
View File

@@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JSHintConfiguration" version="2.3.0" use-config-file="false">
<option bitwise="true" />
<option camelcase="false" />
<option curly="true" />
<option eqeqeq="true" />
<option es3="false" />
<option forin="true" />
<option freeze="false" />
<option immed="false" />
<option newcap="false" />
<option noarg="true" />
<option noempty="true" />
<option nonew="true" />
<option plusplus="false" />
<option undef="true" />
<option strict="true" />
<option trailing="false" />
<option latedef="false" />
<option unused="false" />
<option quotmark="false" />
<option asi="false" />
<option boss="false" />
<option debug="false" />
<option eqnull="false" />
<option esnext="false" />
<option evil="false" />
<option expr="false" />
<option funcscope="false" />
<option globalstrict="false" />
<option iterator="false" />
<option lastsemic="false" />
<option laxbreak="false" />
<option laxcomma="false" />
<option loopfunc="false" />
<option moz="false" />
<option multistr="false" />
<option notypeof="false" />
<option proto="false" />
<option scripturl="false" />
<option smarttabs="false" />
<option shadow="false" />
<option sub="false" />
<option supernew="false" />
<option validthis="false" />
<option browser="true" />
<option couch="false" />
<option devel="false" />
<option dojo="false" />
<option jquery="false" />
<option mootools="false" />
<option node="false" />
<option nonstandard="false" />
<option phantom="false" />
<option prototypejs="false" />
<option rhino="false" />
<option worker="false" />
<option wsh="false" />
<option yui="false" />
<option nomen="false" />
<option onevar="false" />
<option passfail="false" />
<option white="false" />
<option maxerr="50" />
</component>
</project>

5
index.htm
View File

@@ -15,12 +15,13 @@
</head>
<body class="pf-body">
<div id="pf-map-wrapper">
<div id="pf-map-module">
</div>
<div id="pf-dialog-wrapper">
</div>
<div id="test-container"></div>
</body>
</html>

83
js/app/main.js
View File

@@ -1,19 +1,31 @@
define(["jquery", "app/ccp", "app/map"], function($, CCP, Map) {
define(["jquery", "app/render", "app/ccp", "app/map"], function($, Render, CCP, Map) {
"use strict";
var config = {
mapModuleId: 'pf-map-module',
mapTabBarId: 'pf-map-tabs',
mapTabIdPrefix: 'pf-map-tab-'
};
$(function() {
//$('body').alpha().beta();
CCP.requestTrust();
// Map init options
var mapOptions = {
var mapData =[{
map: {},
config: {
name: 'WH Test',
id: 'pf-map-1',
scope: 'wormhole'
id: 1,
scope: 'wormhole',
icon: 'fa-desktop'
},
data: {
systems: [
@@ -69,16 +81,13 @@ define(["jquery", "app/ccp", "app/map"], function($, CCP, Map) {
}
}
Map.render(mapOptions);
var mapOptions = {
},{
map: {},
config: {
name: 'K-Space Test',
id: 'pf-map-2',
scope: 'wormhole'
id: 2,
scope: 'wormhole',
icon: 'fa-bookmark'
},
data: {
systems: [
@@ -107,12 +116,58 @@ define(["jquery", "app/ccp", "app/map"], function($, CCP, Map) {
connections: [{
source: 50,
target: 51,
type: 'wormhole'
type: 'wh'
}]
}
}
}];
// Map.render(mapOptions);
// load map navigation Bar and init map ==========================================
var moduleConfig = {
name: 'modules/tabs',
position: $('#' + config.mapModuleId),
link: 'prepend',
functions: {
after: function(){
// load first map i in first tab content container
var firstTabContentElement = $("div[data-map-tabs='" + config.mapTabBarId + "'] div:first-child");
firstTabContentElement.loadMap(mapData[0]);
// load new map right after tab-change
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var mapIndex = $(e.target).attr('data-map-index');
var mapId = mapData[mapIndex].config.id;
$('#' + config.mapTabIdPrefix + mapId).loadMap(mapData[mapIndex]);
});
}
}
};
var moduleData = {
id: config.mapTabBarId,
tabs: []
};
// add new tab data for each map
$.each(mapData, function(i, data){
var active = false;
if(i === 0){
active = true;
}
moduleData.tabs.push({
id: data.config.id,
index: i,
name: data.config.name,
icon: data.config.icon,
active: active
});
});
Render.showModule(moduleConfig, moduleData);
});

235
js/app/map.js
View File

@@ -11,8 +11,8 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
y: 0
},
containerMapWrapperId: 'pf-map-wrapper', // wrapper for maps
mapClass: 'pf-map', // class for a map
mapClass: 'pf-map', // class for all maps
mapIdPrefix: 'pf-map-',
systemIdPrefix: 'pf-system-', // id prefix for a system
systemClass: 'pf-system',
systemActiveClass: 'pf-system-active',
@@ -20,6 +20,10 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
systemBody: 'pf-system-body',
dynamicElementWrapperId: 'pf-dialog-wrapper', // wrapper div for dynamic content (dialoges, context-menus,...)
// endpoint classes
endpointSourceClass: 'pf-map-endpoint-source',
endpointTargetClass: 'pf-map-endpoint-target',
// context menus
connectionContextMenuId: 'pf-map-connection-contextmenu',
systemContextMenuId: 'pf-map-system-contextmenu',
@@ -72,23 +76,48 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
}
};
// active jsPlumb instances currently running
var activeInstances = {};
// jsPlumb config
var globalMapConfig = {
source: {
filter: '.' + config.systemHeadClass,
anchor: "Continuous",
anchor: 'Continuous',
connector: [ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
maxConnections: 5,
allowLoopback:false,
cssClass: config.endpointSourceClass,
onMaxConnections:function(info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
}/*,
overlays:[
[ "Label", {
location:[0.5, 1.5],
label:"Drag",
cssClass:"endpointSourceLabel"
} ]
] */
},
target: {
filter: '.' + config.systemHeadClass,
anchor: "Continuous",
dropOptions:{ hoverClass: config.systemActiveClass },
anchor: 'Continuous',
allowLoopback:false,
cssClass: config.endpointTargetClass,
dropOptions: {
tolerance: 'touch',
hoverClass: config.systemActiveClass,
activeClass: 'dragActive'
},
/*overlays:[
[ "Label", {
location:[0.5, 1.5],
label:"Drag",
cssClass:"endpointSourceLabel"
} ]
],*/
beforeDrop: function(info){
// check function for new connection
@@ -121,13 +150,13 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
}
};
var modulData = {
var moduleData = {
id: config.errorConnectDialogId,
titel: 'error: Loopback',
content: 'Connection already exists.'
};
Render.showModule(moduleConfig, modulData);
Render.showModule(moduleConfig, moduleData);
return false;
@@ -280,7 +309,7 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
* draw a new map with all systems and connections
* @param mapConfig
*/
var drawMap = function(mapConfig){
var drawMap = function(parentElement, mapConfig){
// create map body
var mapWrapper = $('<div>', {
@@ -288,13 +317,17 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
});
var mapContainer = $('<div>', {
id: mapConfig.config.id,
id: config.mapIdPrefix + mapConfig.config.id,
class: config.mapClass
});
mapWrapper.append(mapContainer);
$('#' + config.containerMapWrapperId).append(mapWrapper);
// append mapWrapper to parent element
$(parentElement).append(mapWrapper);
// set main Container for current map -> the container exists now in DOM
mapConfig.map.setContainer($('#' + config.mapIdPrefix + mapConfig.config.id));
$.each(mapConfig.data.systems, function(i, data){
// draw a system to a map
@@ -339,7 +372,7 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
*/
var drawSystem = function(map, systemData, connectedSystems){
var mapContainer = map.Defaults.Container;
var mapContainer = $(map.getContainer());
// TODO request missing system data
if(!systemData.hasOwnProperty('id')){
@@ -355,9 +388,8 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
// get System Element by data
var newSystem = getSystem(systemData);
var mapElement = $('#' + mapContainer);
mapElement.append(newSystem);
mapContainer.append(newSystem);
// make new System dragable
makeDraggable(map, newSystem);
@@ -394,8 +426,10 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
*/
var makeDraggable = function(map, systems){
var mapContainer = $(map.getContainer());
map.draggable(systems, {
containment: 'parent',
containment: mapContainer,// 'parent',
zIndex: 2000,
start: function(){
// drag start
@@ -489,7 +523,7 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
setConnectionObserver(map, connection);
return connection;
}
};
/**
* load contextmenu template for connections
@@ -551,10 +585,10 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
*/
var setSystemObserver = function(map, systems){
var mapContainer = map.Defaults.Container;
var mapContainer = $(map.getContainer());
// trigger context menu
$('#' + mapContainer).find(systems).on('contextmenu', function(e){
$(mapContainer).find(systems).on('contextmenu', function(e){
$(e.target).trigger('pf:openContextMenu', [e, this]);
e.preventDefault();
return false;
@@ -628,14 +662,14 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
systemStatus.push(statusData);
})
var modulData = {
var moduleData = {
id: config.systemDialogId,
titel: 'Add new system',
status: systemStatus,
content: 'system dialog :)'
};
Render.showModule(moduleConfig, modulData);
Render.showModule(moduleConfig, moduleData);
break;
case 'info': console.log('info')
break;
@@ -672,6 +706,7 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
menuSelected: function (params){
var action = params.selectedMenu.attr('data-action');
var activeConnection = params.component;
switch(action){
case 'delete':
@@ -701,37 +736,37 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
}
};
var modulData = {
var moduleData = {
id: config.confirmDialogId,
titel: 'Delete Connection',
content: 'Is this connection really gone?'
};
Render.showModule(moduleConfig, modulData);
Render.showModule(moduleConfig, moduleData);
break;
case 'eol':
// toggle eol-status of a connection
connection.toggleType('wh_eol');
activeConnection.toggleType('wh_eol');
// for some reason a new observer is needed ?!
setConnectionObserver(map, connection);
setConnectionObserver(map, activeConnection);
break;
case 'status_fresh':
connection.removeType('wh_reduced');
connection.removeType('wh_critical');
setConnectionObserver(map, connection);
activeConnection.removeType('wh_reduced');
activeConnection.removeType('wh_critical');
setConnectionObserver(map, activeConnection);
break;
case 'status_reduced':
connection.removeType('wh_critical');
connection.addType('wh_reduced');
setConnectionObserver(map, connection);
activeConnection.removeType('wh_critical');
activeConnection.addType('wh_reduced');
setConnectionObserver(map, activeConnection);
break;
case 'status_critical':
connection.removeType('wh_reduced');
connection.addType('wh_critical');
setConnectionObserver(map, connection);
activeConnection.removeType('wh_reduced');
activeConnection.addType('wh_critical');
setConnectionObserver(map, activeConnection);
break;
case 'info':
console.log('info');
@@ -747,96 +782,84 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
});
}
};
var render = function(mapConfig){
var getMapInstance = function(mapId){
// add context menues to dom
if(typeof activeInstances[mapId] !== 'object'){
// create new instance
activeInstances[mapId] = jsPlumb.getInstance({
Container: null, // will be set as soon as container is connected to DOM
PaintStyle:{
lineWidth: 4, // width of a Connector's line. An integer.
strokeStyle: 'red', // color for a Connector
outlineColor: 'red', // color of the outline for an Endpoint or Connector. see fillStyle examples.
outlineWidth: 2 // width of the outline for an Endpoint or Connector. An integer.
},
Connector:[ 'Bezier', { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
Endpoint : ['Dot', {radius: 6}]
// Endpoint: 'Blank', // does not work... :(
// Scope: mapConfig.config.scope
});
console.log('new jsPlumbInstance: ' + mapId);
}
return activeInstances[mapId];
};
/**
* load system map into element
* @param mapConfig
*/
$.fn.loadMap = function(mapConfig){
// parent element where the map will be loaded
var parentElement = $(this);
// add context menus to dom
initConnectionContextMenu();
initSystemContextMenu();
// init jsPlumb
jsPlumb.ready(function() {
// get new map instance add to mapConfig
mapConfig.map = jsPlumb.getInstance({
Container: mapConfig.config.id,
PaintStyle:{
lineWidth: 5, // width of a Connector's line. An integer.
//fillStyle: "blue", // color for an Endpoint, eg. "blue",
strokeStyle: 'red', // color for a Connector
outlineColor: 'red', // color of the outline for an Endpoint or Connector. see fillStyle examples.
outlineWidth: 2 // width of the outline for an Endpoint or Connector. An integer.
//joinstyle:"round",
//dashstyle:"2 2",
},
Connector:[ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-wh' } ],
Anchor: "Continuous",
Endpoint: 'Blank',
Scope: mapConfig.config.scope
});
// draw initial map
drawMap(mapConfig);
// get new map instance or load existing
mapConfig.map = getMapInstance(mapConfig.config.id);
//var systemElements = mapConfig.map.getSelector('.' + config.systemClass);
// check for map Container (
if(mapConfig.map.getContainer() === undefined){
// new map instance
var systemElements = $('#' + mapConfig.config.id).find('.' + config.systemClass);
// draw initial map and set container
drawMap(parentElement, mapConfig);
var dropOptions = {
tolerance:"touch",
hoverClass:"dropHover",
activeClass:"dragActive"
};
// mapConfig.map.doWhileSuspended(function() {
// register all available connection types =============================
mapConfig.map.registerConnectionTypes(globalMapConfig.connectionTypes);
// endpoint (system) config
var endpointConfig = {
endpoint: 'Blank',
//paintStyle:{ fillStyle: "blue", opacity: 0.5 },
//Connector:[ "Bezier", { curviness: 40, cssClass: 'pf-map-connection-default' } ],
isSource: true,
scope: mapConfig.config.scope,
isTarget: true,
dropOptions : dropOptions
};
// set up default connections
$.each(mapConfig.data.connections, function(i, connectionData){
drawConnection(mapConfig.map, connectionData);
});
// mapConfig.map.doWhileSuspended(function() {
mapConfig.map.fire("pf-map-loaded", mapConfig.map);
// register all available connection types =============================
mapConfig.map.registerConnectionTypes(globalMapConfig.connectionTypes);
// });
// ========================================================
var endpoints = mapConfig.map.addEndpoint(systemElements, {
}, endpointConfig);
// set up default connections
$.each(mapConfig.data.connections, function(i, connectionData){
drawConnection(mapConfig.map, connectionData);
// global map observer for manual connections (drag & drop)
mapConfig.map.bind('connection', function(info, e) {
setConnectionObserver(mapConfig.map, info.connection);
});
// mapConfig.map.fire("pf-map-loaded", mapConfig.map);
// });
// global map observer for manual connections (drag & drop)
mapConfig.map.bind('connection', function(info, e) {
console.log('test')
setConnectionObserver(mapConfig.map, info.connection);
});
// mapConfig.map.bind("beforeDrop", function(info) {
// manually connect
// });
// mapConfig.map.bind("beforeDrop", function(info) {
// manually connect
// });
}
});
@@ -844,8 +867,4 @@ define(["jquery", "app/render", "jsPlumb", "app/contextmenu"], function($, Rende
};
return {
render: render
};
});

3
js/app/render.js
View File

@@ -41,6 +41,9 @@ define(["jquery", "lib/mustache", "jqueryUI"], function($, Mustache) {
// display module
switch(config.link){
case 'prepend':
config.position.prepend(content);
break;
case 'after':
config.position.after(content);
break;

4
sass/_colors.scss
View File

@@ -8,7 +8,7 @@ $gray-light: #63676a;
$gray: #3c3f41;
$gray-dark: #313335;
$gray-darker: #2b2b2b;
$gray-daskest: #1d1d1d;
$gray-darkest: #1d1d1d;
$gray-mid-light: lighten($black, 75%);
@@ -45,7 +45,7 @@ $wh-color-redgiant: $red;
$wh-color-pulsar: $blue;
$wh-color-wolfryet: $orange;
$wh-color-cataclysmic: $yellow-lighter;
$wh-color-blackhole: $gray-daskest;
$wh-color-blackhole: $gray-darkest;
$brand-primary: #428bca !default;
$brand-success: #5cb85c !default;

14
sass/_variables.scss
View File

@@ -15,7 +15,7 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")
// ## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff;
$body-bg: $gray-light;
//** Global text color on `<body>`.
$text-color: $gray-dark;
@@ -365,8 +365,8 @@ $navbar-inverse-toggle-border-color: #333;
//##
//=== Shared nav styles
$nav-link-padding: 9px 10px 10px;
$nav-link-hover-bg: $gray-lighter;
$nav-link-padding: 5px 6px 5px;
$nav-link-hover-bg: $gray-light;
$nav-disabled-link-color: $gray-light;
$nav-disabled-link-hover-color: $gray-light;
@@ -374,13 +374,13 @@ $nav-disabled-link-hover-color: $gray-light;
$nav-open-link-hover-color: #fff;
//== Tabs
$nav-tabs-border-color: #ddd;
$nav-tabs-border-color: $gray-lighter;
$nav-tabs-link-hover-border-color: $gray-lighter;
$nav-tabs-active-link-hover-bg: $body-bg;
$nav-tabs-active-link-hover-color: $gray;
$nav-tabs-active-link-hover-border-color: #ddd;
$nav-tabs-active-link-hover-bg: $gray-lighter;
$nav-tabs-active-link-hover-color: $gray-dark; //$gray-lighter;
$nav-tabs-active-link-hover-border-color: $gray-lighter;
$nav-tabs-justified-link-border-color: #ddd;
$nav-tabs-justified-active-link-border-color: $body-bg;

1
sass/bootstrap/_navs.scss
View File

@@ -97,7 +97,6 @@
&:hover,
&:focus {
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border: 1px solid $nav-tabs-active-link-hover-border-color;
border-bottom-color: transparent;
cursor: default;

5
sass/layout/_main.scss
View File

@@ -2,5 +2,8 @@
body{
font-family: 'Oxygen Bold';
color: $gray-lighter;
}
#pf-map-module{
margin: 10px;
}

30
sass/layout/_map.scss
View File

@@ -2,10 +2,10 @@
background-color: $gray-darker;
width: 1200px;
height: 500px;
margin: 10px;
position: relative;
overflow: hidden;
@include border-radius(5px);
@include border-bottom-radius(5px);
border: {
width: 1px;
style: solid;
@@ -30,6 +30,7 @@
.pf-system-head{
padding: 0px 3px 2px 3px;
cursor: pointer;
color: $gray-lighter;
}
// System security =============================================
@@ -106,13 +107,11 @@
style: dashed;
color: $gray-light;
}
}
}
}
.pf-system-active{
.pf-system-active:not(.pf-map-endpoint-source):not(.pf-map-endpoint-target){
@include box-shadow($yellow-lighter 0px 0px 8px 1px);
@include transition-duration(0.2s);
}
@@ -139,6 +138,27 @@
border-color: $teal;
}
// Endpoints ====================================================
.pf-map-endpoint-source, .pf-map-endpoint-target{
z-index: 50;
svg {
width: 10;
height: 10;
*{
stroke: $gray-light;
stroke-width: 2; // border width
fill: $gray;
cursor: pointer;
&:hover{
stroke: $gray-lightest; // hover style
}
}
}
}
// Connections ==================================================
// default hover effect for all connections

1
sass/production.scss
View File

@@ -1,3 +1,4 @@
@import "compass/css3/border-radius";
// Core variables and mixins
@import "colors";

2
sass/smartadmin/_component-jqueryui.scss
View File

@@ -440,7 +440,7 @@
margin-top: 13px;
padding: 10px 10px 10px;
text-align: right;
border-top: 1px solid $gray-daskest;
border-top: 1px solid $gray-darkest;
background-color: $gray-light;
}

27
sass/smartadmin/_main.scss
View File

@@ -1836,6 +1836,10 @@ input[type="text"]:focus + .input-group-addon {
/*
* TABS
*/
.nav-tabs{
border-bottom: none;
}
.nav-tabs>li > a .badge {
font-size: 11px;
padding: 3px 5px 3px 5px;
@@ -1844,9 +1848,7 @@ input[type="text"]:focus + .input-group-addon {
min-width: 17px;
font-weight: normal;
}
.nav-tabs>li > a > .fa {
opacity: .5;
}
.tabs-left .nav-tabs>li > a .badge {
margin-right:5px;
margin-left:0px;
@@ -1857,17 +1859,20 @@ input[type="text"]:focus + .input-group-addon {
margin-left:5px;
opacity: .5;
}
.nav-tabs>li.active > a .badge, .nav-tabs>li.active > a .label, .nav-tabs>li.active > a > .fa{
opacity: 1;
}
.nav-tabs>li>a {
border-radius:0px;
color:$gray-dark;
@include border-top-radius(5px);
color: $gray-lighter;
&:hover{
color: $gray-darkest;
}
}
.nav-tabs > li.active > a {
-webkit-box-shadow: 0 -2px 0 $blue;
-moz-box-shadow: 0 -2px 0 $blue;
box-shadow: 0 -2px 0 $blue;
@include box-shadow($orange 0 -2px 0);
background-color: $gray-lighter;
color: $gray-darker;
border-top-width: 0px !important;
margin-top: 1px !important;
font-weight:bold;

11
templates/modules/tabs.html Normal file
View File

@@ -0,0 +1,11 @@
<ul class="nav nav-tabs" role="tablist" id="{{id}}">
{{#tabs}}
<li role="presentation" class="{{#active}}active{{/active}}"><a href="#pf-map-tab-{{id}}" data-map-index="{{index}}" role="tab" data-toggle="tab"><i class="fa fa-fw {{icon}}"></i> {{name}}</a></li>
{{/tabs}}
</ul>
<div class="tab-content" data-map-tabs="{{id}}">
{{#tabs}}
<div role="tabpanel" class="tab-pane {{#active}}active{{/active}}" id="pf-map-tab-{{id}}"></div>
{{/tabs}}
</div>