hugvey/www/js/hugvey_console.js
2019-11-28 18:17:52 +01:00

2705 lines
94 KiB
JavaScript

var panopticon;
class Panopticon {
constructor() {
console.log( "Init panopticon" );
this.hasGraph = document.body.classList.contains('editor');
this.languages = []
// this.selectedHugvey = null;
this.hugveys = new Vue( {
el: "#interface",
data: {
uptime: 0,
loop_timer: 0,
languages: [],
hugveys: [],
selectedId: null,
logbook: "",
logbookId: null,
selectedLang: null,
blockedHugveys: 0,
availableHugveys: 0,
starts_since_lang_change: 0,
},
methods: {
time_passed: function( hugvey, property ) {
return moment( Date( hugvey[property] * 1000 ) ).fromNow();
},
timer: function(hugvey, property) {
return panopticon.stringToHHMMSS( hugvey[property] );
},
formatted: function(time) {
return moment(time).utc().format("hh:mm:ss");
},
loadNarrative: function( code, file ) {
panopticon.selectHugvey(null);
if(panopticon.hasGraph) {
return panopticon.loadNarrative( code, file );
}
},
changeLanguageForAvailable: function(code){
let el = document.getElementById("change-lang-"+code);
el.classList.add('loading');
console.log(el);
panopticon.send( { action: 'change_language_for_available', lang_code: code } );
// TODO: loop with a timer
let i = 0;
for(let hv of panopticon.hugveys.hugveys) {
setTimeout(function(){
console.log(hv['available']);
if(hv.hasOwnProperty('available') && hv['available']) {
panopticon.change_language(hv.id, code);
}
}, i * 1000);
i++;
}
setTimeout(function(){el.classList.remove('loading');}, i*1000);
},
block: function(hv) {
hv.status = "loading";
return panopticon.block(hv.id);
},
unblock: function(hv) {
hv.status = "loading";
return panopticon.unblock(hv.id);
},
pause: function(hv) {
hv.status = "loading";
return panopticon.pause(hv.id);
},
resume: function(hv) {
hv.status = "loading";
return panopticon.resume(hv.id);
},
restart: function(hv) {
hv.status = "loading";
return panopticon.restart(hv.id);
},
finish: function(hv) {
hv.status = "loading";
return panopticon.finish(hv.id);
},
change_lang: function(hv, lang_code) {
hv.status = "loading";
return panopticon.change_language(hv.id, lang_code);
},
change_light: function(e) {
let hv_id = parseInt(e.target.dataset.hvid);
let light_id = parseInt(e.target.value);
console.log(hv_id, light_id, this);
return panopticon.change_light_id(hv_id, light_id);
},
change_light_status: function(e) {
let hv_id = parseInt(e.target.dataset.hvid);
let checked = e.target.checked;
panopticon.send( { action: 'change_light_status', hugvey: hv_id, light_status: checked } );
},
showHugvey: function(hv) {
panopticon.selectHugvey(hv.language ? hv.id : null);
panopticon.hugveys.logbook = [];
panopticon.hugveys.logbookId = null;
panopticon.updateSelectedHugvey();
},
unblockAll: function(){
let el = document.getElementById('unblock-all');
el.classList.add('loading');
let i = 0;
for(let hv of panopticon.hugveys.hugveys) {
setTimeout(function(){
if(hv.status == 'blocked') {
hv.status = "loading";
panopticon.unblock(hv.id)
}
}, i * 1000);
i++;
}
setTimeout(() => el.classList.remove('loading'), i * 1000);
},
startAll: function(){
let el = document.getElementById('start-all');
el.classList.add('loading');
let i = 0;
for(let hv of panopticon.hugveys.hugveys) {
setTimeout(function(){
if(hv.status == 'available') {
hv.status = "loading";
panopticon.restart(hv.id)
}
}, i * 1000);
i++;
}
setTimeout(() => el.classList.remove('loading'), i * 1000);
},
}
} );
// this.socket = new ReconnectingWebSocket( "ws://localhost:8888/ws", null, { debug: false, reconnectInterval: 3000 } );
this.socket = new ReconnectingWebSocket( window.location.origin.replace('http', 'ws') +'/ws', null, { debug: false, reconnectInterval: 3000 } );
if(this.hasGraph) {
this.graph = new Graph();
}
this.socket.addEventListener( 'open', ( e ) => {
this.send( { action: 'init' } );
} );
// request close before unloading
window.addEventListener('beforeunload', function(){
panopticon.socket.close();
});
this.socket.addEventListener( 'close', function( e ) {
console.log( 'Closed connection' );
} );
this.socket.addEventListener( 'message', ( e ) => {
if(e.data == 'hello!') {
console.log("Websocket connected")
return;
}
let msg = JSON.parse( e.data );
if ( typeof msg['alert'] !== 'undefined' ) {
alert( msg['alert'] );
}
if ( typeof msg['action'] === 'undefined' ) {
console.error( "not a valid message: " + e.data );
return;
}
console.debug(msg);
switch ( msg['action'] ) {
case 'status':
this.hugveys.uptime = this.stringToHHMMSS( msg['uptime'] );
this.hugveys.loop_timer = this.stringToHHMMSS( msg['loop_timer'] );
this.hugveys.languages = msg['languages'];
this.languages = msg['languages'];
this.hugveys.hugveys = msg['hugveys'];
this.hugveys.logbook = msg['logbook'];
this.hugveys.logbookId = msg['logbookId'];
this.hugveys.starts_since_lang_change = msg['starts_since_lang_change'];
if(this.hugveys.selectedId) {
this.updateSelectedHugvey();
}
let avail = 0;
let blocked = 0;
for(let hv of this.hugveys.hugveys) {
if(hv.status =='available') avail ++;
if(hv.status =='blocked') blocked ++;
}
this.hugveys.blockedHugveys = blocked;
this.hugveys.availableHugveys = avail;
break;
case 'log':
break;
}
} );
}
selectHugvey(hv_id) {
this.hugveys.selectedId = hv_id;
this.send({ action: 'selection', selected_id: hv_id });
}
change_loop_time(newTime) {
console.log('update', newTime);
this.send({ action: 'loop_time', time: newTime });
}
updateSelectedHugvey() {
let hv = null;
if(this.hugveys.selectedId) {
hv = this.getHugvey(this.hugveys.selectedId);
if(this.hasGraph) {
if(hv.language && this.graph.language_code != hv.language) {
this.loadNarrative(hv.language);
}
}
// let varEl = document.getElementById("variables");
// varEl.innerHTML = "";
}
if(this.hasGraph) {
this.graph.updateHugveyStatus(hv);
}
}
getHugvey(id) {
for(let hv of this.hugveys.hugveys) {
if(hv.id == id) {
return hv;
}
}
return null;
}
send( msg ) {
if ( this.socket.readyState == WebSocket.OPEN ) {
this.socket.send( JSON.stringify( msg ) );
} else {
console.error( "Socket not open: ", this.socket.readyState );
}
}
// getStatus() {
// // console.log('get status', this, panopticon);
// panopticon.send( { action: 'get_status', selected_id: panopticon.hugveys.selectedId } );
// }
init() {
// setInterval( this.getStatus, 3000 );
}
stringToHHMMSS( string ) {
var sec_num = parseInt( string, 10 ); // don't forget the second param
var hours = Math.floor( sec_num / 3600 );
var minutes = Math.floor(( sec_num - ( hours * 3600 ) ) / 60 );
var seconds = sec_num - ( hours * 3600 ) - ( minutes * 60 );
if ( hours < 10 ) { hours = "0" + hours; }
if ( minutes < 10 ) { minutes = "0" + minutes; }
if ( seconds < 10 ) { seconds = "0" + seconds; }
return hours + ':' + minutes + ':' + seconds;
}
loadNarrative( code, file ) {
if(typeof file == 'undefined') {
for (let lang of this.languages) {
if (lang['code'] == code) {
file = lang['file'];
}
}
}
this.hugveys.selectedLang = code;
let req = new XMLHttpRequest();
let graph = this.graph;
req.addEventListener( "load", function( e ) {
graph.loadData( JSON.parse( this.response ), code );
// console.log(, e);
} );
req.open( "GET", "/local/" + file );
req.send();
}
block( hv_id ) {
this.send( { action: 'block', hugvey: hv_id } )
}
unblock( hv_id ) {
this.send( { action: 'unblock', hugvey: hv_id } )
}
resume( hv_id ) {
this.send( { action: 'resume', hugvey: hv_id } )
}
pause( hv_id ) {
this.send( { action: 'pause', hugvey: hv_id } )
}
restart( hv_id ) {
this.send( { action: 'restart', hugvey: hv_id } );
}
finish( hv_id ) {
this.send( { action: 'finish', hugvey: hv_id } );
}
change_language( hv_id, lang_code ) {
this.send( { action: 'change_language', hugvey: hv_id, lang_code: lang_code } );
}
change_light_id( hv_id, light_id ) {
console.log("Light", hv_id, light_id);
this.send( { action: 'change_light', hugvey: hv_id, light_id: light_id } );
}
playFromSelected(msg_id, reloadStory) {
if(!this.hugveys.selectedId) {
alert('No hugvey selected');
} else {
this.send({ action: 'play_msg', hugvey: this.hugveys.selectedId, msg_id: msg_id, reloadStory: reloadStory })
}
}
}
window.addEventListener( 'load', function() {
panopticon = new Panopticon();
panopticon.init();
} );
class Graph {
constructor() {
this.width = 1280;
this.height = 1024;
this.nodeSize = 80;
this.maxChars = 16;
this.svg = d3.select( '#graph' );
this.container = d3.select( '#container' );
this.selectedMsg = null;
this.language_code = null;
this.messages = []; // initialise empty array. For the simulation, make sure we keep the same array object
this.directions = []; // initialise empty array. For the simulation, make sure we keep the same array object
this.conditions = []; // initialise empty array. For the simulation, make sure we keep the same array object
this.diversions = []; // initialise empty array. For the simulation, make sure we keep the same array object
let graph = this;
this.controlDown = false;
document.addEventListener( 'keydown', function( e ) {
if ( e.which == "16" ) { // shift
graph.controlDown = true;
document.body.classList.add( 'controlDown' );
}
} );
document.addEventListener( 'keyup', function( e ) {
if ( e.which == "16" ) { // shift
graph.controlDown = false;
document.body.classList.remove( 'controlDown' );
}
} );
let c = this.container;
let zoomed = function() {
c.attr( "transform", d3.event.transform );
}
this.svg.call( d3.zoom()
.scaleExtent( [1 / 16, 8] )
.on( "zoom", zoomed ) );
this.nodesG = this.container.append( "g" )
.attr( "id", "nodes" )
this.linkG = this.container.append( "g" )
.attr( "id", "links" );
document.getElementById( 'btn-save' ).addEventListener( 'click', function( e ) {
let el = e.target;
el.classList.add('loading');
// give the ui a fraction to actually apply the 'loading' class
setTimeout(function(){
graph.saveJson();
el.classList.remove('loading');
}, 100);
} );
document.getElementById( 'btn-addMsg' ).addEventListener( 'click', function( e ) { graph.createMsg(); } );
document.getElementById( 'btn-diversions' ).addEventListener( 'click', function( e ) { graph.showDiversions(); } );
document.getElementById( 'btn-audio' ).addEventListener( 'click', function( e ) { graph.showAudioFiles(); } );
document.getElementById( 'btn-config' ).addEventListener( 'click', function( e ) { graph.showConfiguration(); } );
}
clickMsg( msg ) {
// event when a message is clicked.
if ( this.controlDown ) {
this.secondarySelectMsg( msg );
} else {
this.selectMsg( msg );
}
}
secondarySelectMsg( msg ) {
if ( this.selectedMsg !== null ) {
this.addDirection( this.selectedMsg, msg );
} else {
console.error( 'No message selected as Source' );
}
}
selectMsg( msg ) {
let selectedEls = document.getElementsByClassName( 'selectedMsg' );
while ( selectedEls.length > 0 ) {
selectedEls[0].classList.remove( 'selectedMsg' );
}
document.getElementById( msg['@id'] ).classList.add( 'selectedMsg' );
this.selectedMsg = msg;
this.showMsg( msg );
}
updateMsg() {
// used eg. after a condition creation.
this.showMsg( this.selectedMsg );
}
getAudioUrlForMsg(msg) {
let isVariable = msg['text'].includes('$') ? '1' : '0';
let lang = panopticon.graph.language_code;
return `${window.location.origin}/voice?text=${encodeURIComponent(msg['text'])}&variable=${isVariable}&lang=${lang}&filename=0`;
}
getConfig() {
}
getNumericId(prefix) {
let id, i = 0;
let hasId= function(a, id) {
for(let i of a){
if(i['@id'] == id) {
return true;
}
}
return false;
}
do {
id = prefix + i;
i++;
} while(hasId(this.data, id))
return id;
}
createDiversion(type) {
let div = {
"@id": this.getNumericId(this.language_code.substring( 0, 2 ) + `-div-${type}#`),
'@type': 'Diversion',
'type': type,
'params': {}
}
if(type == 'no_response') {
div['params']['consecutiveSilences'] = 3;
div['params']['timesOccured'] = 0;
div['params']['returnAfterStrand'] = true;
div['params']['msgId'] = "";
}
else if(type == 'reply_contains') {
div['params']['regex'] = "";
div['params']['returnAfterStrand'] = true;
div['params']['nextChapterOnReturn'] = false;
div['params']['msgId'] = "";
div['params']['notForColor'] = "";
div['params']['waitTime'] = 1.8;
}
else if(type == 'interrupt') {
div['params']['msgId'] = "";
}
else if(type == 'timeout') {
div['params']['interval'] = 20;
div['params']['timesOccured'] = 0;
div['params']['minTimeAfterMessage'] = 2.;
div['params']['fromLastMessage'] = false;
div['params']['returnAfterStrand'] = true;
div['params']['msgId'] = "";
}
else if(type == 'repeat') {
div['params']['regex'] = "can you repeat that\\?";
}
else if(type == 'collective_moment') {
div['params']['start_second'] = 20 * 60; // second to start
div['params']['window'] = 60; // how long to wait, in seconds
}
else {
console.log("invalid type", type);
alert('invalid type for diversion');
}
if(type != 'repeat' && type != 'interrupt') {
div['params']['notAfterMsgId'] = "";
}
this.data.push( div );
this.updateFromData();
this.build();
this.showDiversions();
return msg;
}
deleteDiversion(div) {
this._rmNode( div );
this.showDiversions( );
}
showDiversions( ) {
let msgEl = document.getElementById( 'msg' );
msgEl.innerHTML = "";
let divsNoResponse =[], divsRepeat = [], divsReplyContains = [], divsTimeouts = [], divsInterrupts = [], divsCollectiveMoment = [];
for(let div of this.diversions) {
let notAfterMsgIdEl = "";
if(div['type'] != 'repeat') {
let notMsgOptions = [crel('option',"")];
let chapterMsgs = this.messages.filter( m => m.hasOwnProperty('chapterStart') && m['chapterStart'] == true);
for(let startMsg of chapterMsgs) {
let optionParams = {
'value': startMsg['@id']
};
if(div['params']['notAfterMsgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
notMsgOptions.push(crel('option', optionParams , `${startMsg['text']} (${startMsg['@id']})`));
}
notAfterMsgIdEl = crel('label', 'Not when chapter has hit:',
crel('select', {'on': {
'change': (e) => div['params']['notAfterMsgId'] = e.target.value
}}, ...notMsgOptions)
);
}
if(div['type'] == 'no_response') {
let returnAttrs = {
'type': 'checkbox',
'on': {
'change': (e) => div['params']['returnAfterStrand'] = e.target.checked
}
}
if(div['params']['returnAfterStrand']) {
returnAttrs['checked'] = 'checked';
}
let msgOptions = [crel('option',"")];
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
for(let startMsg of starts) {
let optionParams = {};
if(div['params']['msgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
msgOptions.push(crel('option', optionParams , startMsg['@id']));
}
divsNoResponse.push(crel(
'div', {
'class': 'diversion',
'on': {
'mouseover': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.add('selectedMsg');
},
'mouseout': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.remove('selectedMsg');
}
}
},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'Consecutive Silences',
crel('input', {
'type': 'number',
'value': div['params']['consecutiveSilences'],
'on': {
'change': (e) => div['params']['consecutiveSilences'] = parseInt(e.target.value)
}
})
),
crel('label', 'On n-th instance',
crel('input', {
'type': 'number',
'value': div['params']['timesOccured'],
'on': {
'change': (e) => div['params']['timesOccured'] = parseInt(e.target.value)
}
})
),
crel('label', 'Return to point of departure afterwards',
crel('input', returnAttrs)
),
crel('label', 'Go to (start message)',
crel('select', {'on': {
'change': (e) => div['params']['msgId'] = e.target.value
}}, ...msgOptions)
),
notAfterMsgIdEl
));
}
if(div['type'] == 'reply_contains') {
let returnAttrs = {
'type': 'checkbox',
'on': {
'change': (e) => div['params']['returnAfterStrand'] = e.target.checked
}
}
if(div['params']['returnAfterStrand']) {
returnAttrs['checked'] = 'checked';
}
let returnChapterAttrs = {
'type': 'checkbox',
'on': {
'change': (e) => div['params']['nextChapterOnReturn'] = e.target.checked
}
}
if(div['params']['nextChapterOnReturn']) {
returnChapterAttrs['checked'] = 'checked';
}
let msgOptions = [crel('option',"")];
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
for(let startMsg of starts) {
let optionParams = {};
if(div['params']['msgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
msgOptions.push(crel('option', optionParams , startMsg['@id']));
}
divsReplyContains.push(crel(
'div', {
'class': 'diversion',
'on': {
'mouseover': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.add('selectedMsg');
},
'mouseout': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.remove('selectedMsg');
}
}
},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'Regex',
crel('input', {
'type': 'text',
'value': div['params']['regex'],
'placeholder': 'regex',
'on': {
'change': (e) => div['params']['regex'] = e.target.value
}
})
),
crel('label', 'Ignore for color',
crel('input', {
'type': 'text', // use text instead of color, as color doesn't allow for empty values
'value': typeof div['params']['notForColor'] !== 'undefined' ? div['params']['notForColor'] : "",
'on': {
'change': function(e) {
if(e.target.value.length > 0 && e.target.value.substr(0,1) !== '#') {
alert("Don't forget to have a valid hex including the #-character, eg: #00ff00");
}
div['params']['notForColor'] = e.target.value;
}
}
})
),
crel('label', 'Return to point of departure afterwards',
crel('input', returnAttrs)
),
crel('label', 'On return, skip to next chapter',
crel('input', returnChapterAttrs)
),
crel('label', 'Go to (start message)',
crel('select', {'on': {
'change': (e) => div['params']['msgId'] = e.target.value
}}, ...msgOptions)
),
crel('label', 'Wait time',
crel('input', {
'type': 'number',
'step': 0.1,
'value': div['params']['waitTime'],
'on': {
'change': (e) => div['params']['waitTime'] = parseFloat(e.target.value)
}
})
),
notAfterMsgIdEl
));
}
if(div['type'] == 'collective_moment') {
let msgOptions = [crel('option',"")];
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
for(let startMsg of starts) {
let optionParams = {};
if(div['params']['msgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
msgOptions.push(crel('option', optionParams , startMsg['@id']));
}
divsCollectiveMoment.push(crel(
'div', {
'class': 'diversion',
'on': {
'mouseover': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.add('selectedMsg');
},
'mouseout': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.remove('selectedMsg');
}
}
},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'Start time (seconds)',
crel('input', {
'type': 'number',
// 'max': 59,
'min': 0,
'value': div['params']['start_second'],
'placeholder': 'time in loop (seconds)',
'on': {
'change': (e) => div['params']['start_second'] = e.target.value
}
})
),
crel('label', 'Duration (seconds)',
crel('input', {
'type': 'number',
'max': 60*15,
'min': 0,
'value': div['params']['window'],
'placeholder': 'seconds',
'on': {
'change': (e) => div['params']['window'] = e.target.value
}
})
),
crel('label', 'Go to (start message)',
crel('select', {'on': {
'change': (e) => div['params']['msgId'] = e.target.value
}}, ...msgOptions)
)
));
}
if(div['type'] == 'timeout') {
let returnAttrs = {
'type': 'checkbox',
'on': {
'change': (e) => div['params']['returnAfterStrand'] = e.target.checked
}
}
if(div['params']['returnAfterStrand']) {
returnAttrs['checked'] = 'checked';
}
let totalOrLocalAttrs = {
'type': 'checkbox',
'on': {
'change': (e) => div['params']['fromLastMessage'] = e.target.checked
}
}
if(div['params']['fromLastMessage']) {
totalOrLocalAttrs['checked'] = 'checked';
}
let msgOptions = [crel('option',"")];
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
for(let startMsg of starts) {
let optionParams = {};
if(div['params']['msgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
msgOptions.push(crel('option', optionParams , startMsg['@id']));
}
divsTimeouts.push(crel(
'div', {
'class': 'diversion',
'on': {
'mouseover': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.add('selectedMsg');
},
'mouseout': function(e) {
if(div['params']['msgId'])
document.getElementById(div['params']['msgId']).classList.remove('selectedMsg');
}
}
},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'For last message only',
crel('input', totalOrLocalAttrs)
),
crel('label', 'Seconds of silence',
crel('input', {
'type': 'number',
'value': div['params']['interval'],
'precision': .1,
'on': {
'change': (e) => div['params']['interval'] = parseFloat(e.target.value)
}
})
),
crel('label', 'On n-th instance',
crel('input', {
'type': 'number',
'value': div['params']['timesOccured'],
'on': {
'change': (e) => div['params']['timesOccured'] = parseInt(e.target.value)
}
})
),
crel('label', 'Minimum time after message',
crel('input', {
'type': 'number',
'value': div['params']['minTimeAfterMessage'],
'on': {
'change': (e) => div['params']['minTimeAfterMessage'] = parseFloat(e.target.value)
}
})
),
crel('label', 'Return to point of departure afterwards',
crel('input', returnAttrs)
),
crel('label', 'Go to (start message)',
crel('select', {'on': {
'change': (e) => div['params']['msgId'] = e.target.value
}}, ...msgOptions)
),
notAfterMsgIdEl
));
}
if(div['type'] == 'repeat'){
divsRepeat.push(crel(
'div', {'class': 'diversion'},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'Regex',
crel('input', {
'type': 'text',
'value': div['params']['regex'],
'on': {
'change': (e) => div['params']['regex'] = e.target.value
}
})
)
));
}
if(div['type'] == 'interrupt'){
let msgOptions = [crel('option',"")];
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
for(let startMsg of starts) {
let optionParams = {};
if(div['params']['msgId'] == startMsg['@id']) {
optionParams['selected'] = 'selected';
}
msgOptions.push(crel('option', optionParams , startMsg['@id']));
}
divsInterrupts.push(crel(
'div', {'class': 'diversion'},
crel('h3', div['@id']),
crel(
'div', {
'class':'btn btn--delete',
'on': {
'click': (e) => this.deleteDiversion(div)
}
}, 'Delete diversion'),
crel('label', 'Go to (start message)',
crel('select', {'on': {
'change': (e) => div['params']['msgId'] = e.target.value
}}, ...msgOptions)
)
));
}
}
console.log(divsReplyContains, divsNoResponse, divsRepeat, divsTimeouts, divsInterrupts, divsCollectiveMoment);
let divEl = crel(
'div',
{
'id': 'diversions'
},
crel('h1', 'Configure Diversions'),
crel('div',
crel('h2', 'In case of No Response'),
...divsNoResponse,
crel('div',
{
'class': 'btn',
'on': {
'click': (e) => this.createDiversion('no_response')
}
},
'New case for no_response'
)
),
crel('div',
crel('h2', 'Reply Contains'),
...divsReplyContains,
crel('div',
{
'class': 'btn',
'on': {
'click': (e) => this.createDiversion('reply_contains')
}
},
'New case for reply contains'
)
),
crel('div',
crel('h2', 'Request repeat'),
...divsRepeat,
crel('div',
{
'class': 'btn',
'on': {
'click': (e) => this.createDiversion('repeat')
}
},
'New case for repeat'
)
),
crel('div',
crel('h2', 'Timeouts'),
...divsTimeouts,
crel('div',
{
'class': 'btn',
'on': {
'click': (e) => this.createDiversion('timeout')
}
},
'New case for timeout'
)
),
crel('div',
crel('h2', 'Collective moments'),
...divsCollectiveMoment,
crel('div',
{
'class': 'btn',
'on': {
'click': (e) => this.createDiversion('collective_moment')
}
},
'New collective moment'
)
)
// ,
// crel('div',
// crel('h2', 'Interruptions (random pick)'),
// ...divsInterrupts,
// crel('div',
// {
// 'class': 'btn',
// 'on': {
// 'click': (e) => this.createDiversion('interrupt')
// }
// },
// 'New case for Interrupt'
// )
// )
);
msgEl.appendChild(divEl);
}
showAudioFiles( ) {
let audioFilesEl = crel('div',{
'id':'audioFiles'
},
crel(
'div',
{
'class':'btn btn-close',
'on': {
'click': function() {
audioFilesEl.parentNode.removeChild(audioFilesEl)
}
}
},
'close'
));
for(let msg of panopticon.graph.messages) {
audioFilesEl.appendChild(crel(
'audio',
{'controls':'controls'},
crel('source', {'src': msg['audio'] ? msg['audio']['file'] : panopticon.graph.getAudioUrlForMsg(msg)})
))
}
document.getElementById("interface").appendChild(audioFilesEl);
}
showConfiguration( ) {
let configEl = crel('div',{
'id':'configuration'
},
crel(
'div',
{
'class':'btn btn-close',
'on': {
'click': function() {
configEl.parentNode.removeChild(configEl)
}
}
},
'close'
),
crel('h2', `Language based settings for ${this.language_code}`),
crel(
'label',
'volume',
crel('input', {
'type': 'number',
'step': 0.05,
'on': {
'change': function(e){
panopticon.graph.configuration['volume'] = parseFloat(e.target.value)
}
},
'value': this.configuration.hasOwnProperty('volume') ? this.configuration.volume : 1
})
),
crel(
'label',
"Text replacement when no variable is set: ",
crel('input', {
'type': 'text',
'on': {
'change': function(e){
panopticon.graph.configuration['nothing_text'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('nothing_text') ? this.configuration.nothing_text : "nothing"
})
),
crel(
'label',
"Timing factor: (< 1 is faster, >1 is slower)",
crel('input', {
'type': 'number',
'on': {
'change': function(e){
panopticon.graph.configuration['time_factor'] = parseFloat(e.target.value)
}
},
'value': this.configuration.hasOwnProperty('time_factor') ? this.configuration.time_factor : 1,
'step': 0.01
})
),
crel('hr'),
crel('h2', 'Light fade setting #0'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light0_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light0_intensity') ? this.configuration.light0_intensity : ""
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 92,
'step': 1,
'on': {
'change': function(e){
panopticon.graph.configuration['light0_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light0_fade') ? this.configuration.light0_fade: ""
})
),
crel(
'label',
"Is Sophie: ",
crel('input', {
'type': 'checkbox',
'checked_value': this.configuration.hasOwnProperty('light0_isSophie') ? this.configuration.light0_isSophie: false,
'on': {
'change': function(e){
panopticon.graph.configuration['light0_isSophie'] = e.target.checked
}
}
})
),
crel('h2', 'Light fade setting #1'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light1_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light1_intensity') ? this.configuration.light1_intensity : ""
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
// 'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light1_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light1_fade') ? this.configuration.light1_fade: ""
})
),
crel(
'label',
"Is Sophie: ",
crel('input', {
'type': 'checkbox',
'checked_value': this.configuration.hasOwnProperty('light1_isSophie') ? this.configuration.light1_isSophie: false,
'on': {
'change': function(e){
panopticon.graph.configuration['light1_isSophie'] = e.target.checked
}
}
})
),
crel('h2', 'Light fade setting #2'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light2_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light2_intensity') ? this.configuration.light2_intensity : ""
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
// 'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light2_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light2_fade') ? this.configuration.light2_fade: ""
})
),
crel(
'label',
"Is Sophie: ",
crel('input', {
'type': 'checkbox',
'checked_value': this.configuration.hasOwnProperty('light2_isSophie') ? this.configuration.light2_isSophie: false,
'on': {
'change': function(e){
panopticon.graph.configuration['light2_isSophie'] = e.target.checked
}
}
})
),
crel('h2', 'Light fade setting #3'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light3_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light3_intensity') ? this.configuration.light3_intensity : ""
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
// 'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light3_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light3_fade') ? this.configuration.light3_fade: ""
})
),
crel(
'label',
"Is Sophie: ",
crel('input', {
'type': 'checkbox',
'checked_value': this.configuration.hasOwnProperty('light3_isSophie') ? this.configuration.light3_isSophie: false,
'on': {
'change': function(e){
panopticon.graph.configuration['light3_isSophie'] = e.target.checked
}
}
})
),
crel('h2', 'Light fade setting #4'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light4_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light4_intensity') ? this.configuration.light4_intensity : ""
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
// 'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light4_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light4_fade') ? this.configuration.light4_fade: ""
})
),
crel(
'label',
"Is Sophie: ",
crel('input', {
'type': 'checkbox',
'checked_value': this.configuration.hasOwnProperty('light4_isSophie') ? this.configuration.light4_isSophie: false,
'on': {
'change': function(e){
panopticon.graph.configuration['light4_isSophie'] = e.target.checked
}
}
})
)
);
document.getElementById("interface").appendChild(configEl);
}
showMsg( msg ) {
let msgEl = document.getElementById( 'msg' );
msgEl.innerHTML = "";
if(msg == null){
return;
}
let startAttributes = {
'name': msg['@id'] + '-start',
// 'readonly': 'readonly',
'type': 'checkbox',
'on': {
'change': this.getEditEventListener()
}
}
if ( msg['start'] == true ) {
startAttributes['checked'] = 'checked';
}
let beginningAttributes = {
'name': msg['@id'] + '-beginning',
// 'readonly': 'readonly',
'type': 'checkbox',
'on': {
'change': this.getEditEventListener()
}
}
if ( msg['beginning'] == true ) {
beginningAttributes['checked'] = 'checked';
}
// chapter marker:
let chapterAttributes = {
'name': msg['@id'] + '-chapterStart',
// 'readonly': 'readonly',
'type': 'checkbox',
'on': {
'change': this.getEditEventListener()
}
}
if ( typeof msg['chapterStart'] !== 'undefined' && msg['chapterStart'] == true ) {
chapterAttributes['checked'] = 'checked';
}
let generatedDirectionsJumpToChapterAttributes = {
'name': msg['@id'] + '-generatedDirectionsJumpToChapter',
// 'readonly': 'readonly',
'type': 'checkbox',
'on': {
'change': this.getEditEventListener()
}
}
if ( msg.hasOwnProperty('generatedDirectionsJumpToChapter') && msg['generatedDirectionsJumpToChapter'] == true ) {
generatedDirectionsJumpToChapterAttributes['checked'] = 'checked';
}
let params = {};
if(msg.hasOwnProperty('params')) {
params = msg['params'];
} else {
msg['params'] = {};
}
let audioSrcEl = crel('source', {'src': msg['audio'] ? msg['audio']['file'] : this.getAudioUrlForMsg(msg)});
let audioSpan = crel(
'span',
{
'title': msg['audio'] ? msg['audio']['file'] : "",
'class': "label-value",
},
crel(
'audio', {'controls': 'controls'},
audioSrcEl
),
crel('div', msg['audio'] ? crel(
'div',
crel('div', {
'class':'btn btn--delete',
'on': {
'click': function(e) {
e.stopPropagation();
e.preventDefault();
panopticon.graph.getNodeById(msg['@id'])['audio'] = null;
panopticon.graph.showMsg(msg);
}
}
}, 'del'),
"uploaded"
) : 'Auto-generated')
);
let lightOptions = [
crel("option", {'value': null}, "Do nothing")
];
for(let i = 0; i < 5; i++) {
let l = {'value': i};
if(msg.hasOwnProperty('light') && msg['light'] == i) {
l['selected'] = 'selected';
}
let intensity = "?";
if(this.configuration.hasOwnProperty(`light${i}_intensity`)) {
intensity = this.configuration[`light${i}_intensity`];
}
let duration = "?";
if(this.configuration.hasOwnProperty(`light${i}_fade`)) {
duration = this.configuration[`light${i}_fade`];
}
lightOptions.push(crel("option", l, `Fade preset #${i} (${intensity} in ${duration}s)`));
}
// let lightOptionNone = {'value': null}
//
// let lightOptionOn = {'value': 1}
// let lightOptionOff = {'value': 0}
//
// if(msg.hasOwnProperty('light')) {
// if(msg['light'] === 1) lightOptionOn['selected'] = 'selected';
// if(msg['light'] === 0) lightOptionOff['selected'] = 'selected';
// if(msg['light'] === null) lightOptionNone['selected'] = 'selected';
// }
let msgInfoEl = crel( 'div', { 'class': 'msg__info' },
crel('div', {
'class':'btn btn--delete btn--delete-msg',
'on': {
'click': function(e) {
if(confirm(`Are you sure you want to remove message ${msg['@id']}`)) {
panopticon.graph.rmMsg(msg);
panopticon.graph.showMsg(null);
}
}
}
}, 'delete'),
crel( 'h1', { 'class': 'msg__id' }, msg['@id'] + ` (${panopticon.graph.distances[msg['@id']]})` ),
crel( 'label',
crel( 'span', 'Text' ),
crel( 'input', {
'name': msg['@id'] + '-text',
'value': msg['text'],
'on': {
'change': this.getEditEventListener(function(){
audioSrcEl.src = panopticon.graph.getAudioUrlForMsg(msg);
audioSrcEl.parentElement.load();
})
}
} )
),
crel( 'label',
crel( 'span', 'Start' ),
crel( 'input', startAttributes )
),
crel( 'label',
crel( 'span', 'Beginning' ),
crel( 'input', beginningAttributes )
),
crel( 'label',
crel( 'span', 'Chapter start' ),
crel( 'input', chapterAttributes )
),
crel( 'label',
crel( 'span', 'Audio' ),
audioSpan,
crel( 'input', {
'type': 'file',
'name': 'audio',
'accept': '.wav,.ogg,.mp3',
'on': {
'change': function(e) {
audioSpan.innerHTML = "...";
panopticon.graph.saveJson(msg['@id'], e.target, function(e2){
// console.log(e, e2);
audioSpan.innerHTML = e.target.files[0].name + "<sup>*</sup>";
// reload graph:
// console.log('reload', panopticon.graph.language_code);
panopticon.loadNarrative(panopticon.graph.language_code);
});
// console.log(this,e);
}
}
} )
),
crel( 'label',
crel( 'span', {
"title": "The time after the reply in which one can still interrupt to continue speaking"
}, 'Afterrun time' ),
crel( 'input', {
'name': msg['@id'] + '-afterrunTime',
'step': "0.1",
'value': msg['afterrunTime'],
'type': 'number',
'on': {
'change': this.getEditEventListener()
}
} )
),
crel( 'label',
crel( 'span', {
"title": "Playback volume factor"
}, 'Volume factor' ),
crel( 'input', {
'name': msg['@id'] + '-params.vol',
'value': params.hasOwnProperty('vol') ? params['vol'] : .8,
'step': "0.1",
'type': 'number',
'on': {
'change': this.getEditEventListener()
}
} )
),
crel( 'label',
crel( 'span', {
"title": "Playback tempo factor"
}, 'Tempo factor' ),
crel( 'input', {
'name': msg['@id'] + '-params.tempo',
'value': params.hasOwnProperty('tempo') ? params['tempo'] : 1,
'step': "0.1",
'min': "0.1",
'type': 'number',
'on': {
'change': this.getEditEventListener()
}
} )
),
crel( 'label',
crel( 'span', {
"title": "Playback pitch factor"
}, 'Pitch factor' ),
crel( 'input', {
'name': msg['@id'] + '-params.pitch',
'value': params.hasOwnProperty('pitch') ? params['pitch'] : 0,
'step': "0.1",
'type': 'number',
'on': {
'change': this.getEditEventListener()
}
} )
),
// color for beter overview
crel( 'label',
crel( 'span', {
"title": "Color - for your eyes only"
}, 'Color' ),
crel( 'input', {
'name': msg['@id'] + '-color',
'value': msg.hasOwnProperty('color') ? msg['color'] : '#77618e',
'type': 'color',
'on': {
'change': this.getEditEventListener()
}
} )
),
crel( 'label',
crel( 'span', {
"title": "What to do with the light when this message is triggered?"
}, 'Light change' ),
crel( 'select', {
'name': msg['@id'] + '-light',
'on': {
'change': function(e) {
msg['light'] = e.target.value === "null" ? null : parseInt(e.target.value);
panopticon.graph.build();
}
}
},
lightOptions
)
),
crel( 'label',
crel( 'span', {
'title': "Only for diversions: when this message is the final message of a diversion, it jumps back to the next chapter instead of the given message (overrules settings of diversion on a per message basis)"
},'Generated directions jump to next chapter' ),
crel( 'input', generatedDirectionsJumpToChapterAttributes )
),
);
msgEl.appendChild( msgInfoEl );
if(panopticon.hugveys.selectedId) {
msgEl.appendChild(crel(
'div',
{'class': 'play'},
crel(
'div', {
'class': 'btn btn--play',
'on': {
'click': function (e) {
console.log('go save');
panopticon.graph.saveJson(null, null, function(){
console.log('saved, now play');
panopticon.playFromSelected(msg['@id'], true);
});
}
}
},
"Save & play on #" + panopticon.hugveys.selectedId
)
));
msgEl.appendChild(crel(
'div',
{'class': 'play'},
crel(
'div', {
'class': 'btn btn--play',
'on': {
'click': function (e) {
panopticon.playFromSelected(msg['@id'], false);
}
}
},
"Continue on #" + panopticon.hugveys.selectedId
)
));
}
// let directionHEl = document.createElement('h2');
// directionHEl.innerHTML = "Directions";
let fromDirections = [], toDirections = [];
for ( let direction of this.getDirectionsTo( msg ) ) {
toDirections.push( this.getDirectionEl( direction, msg ) );
}
for ( let direction of this.getDirectionsFrom( msg ) ) {
fromDirections.push( this.getDirectionEl( direction, msg ) );
}
let directionsEl = crel( 'div', { 'class': 'directions' },
crel( 'h2', 'Directions' ),
...toDirections,
crel('div',{
'class': 'btn btn--create',
'on': {
'click': function(e) {
panopticon.graph.createConnectedMsg(msg);
}
}
}, 'Create new message'),
...fromDirections
);
msgEl.appendChild( directionsEl );
}
getDirectionEl( direction, msg ) {
let g = this;
let directionEl = crel('div',
{
'class': 'direction ' + (direction['source'] == msg ? 'dir-to' : 'dir-from'),
'on': {
'mouseover': function(e) {
directionEl.classList.add('dir-highlight');
document.getElementById(direction['@id']).classList.add('dir-highlight');
},
'mouseout': function(e) {
directionEl.classList.remove('dir-highlight');
document.getElementById(direction['@id']).classList.remove('dir-highlight');
}
}
},
crel(
'h3',
{'title': direction['@id']},
direction['source'] == msg ? `To ${direction['target']['text']}`: `From ${direction['source']['text']}`
),
crel('div', {
'class':'btn btn--delete',
'on': {
'click': ( e ) => {
if(confirm("Do you want to remove this direction and its conditions?")) {
g.rmDirection( direction );
}
}
}
}, 'disconnect')
);
for ( let conditionId of direction['conditions'] ) {
let condition = this.getNodeById( conditionId );
directionEl.appendChild( this.getEditConditionFormEl( condition, direction ) );
}
directionEl.appendChild( this.getAddConditionFormEl( direction ) );
return directionEl;
}
getEditConditionFormEl( condition, direction ) {
let conditionEl = crel( 'div', { 'class': 'condition condition--edit' },
crel( 'h4', { 'title': condition['@id'] }, condition['type'] ),
crel('div', {
'class':'btn btn--delete',
'on': {
'click': ( e ) => {
if(confirm("Do you want to remove this condition?")) {
// console.log('remove condition for direction', condition, direction);
panopticon.graph.rmCondition( condition, direction );
}
}
}
}, 'delete'),
...this.getConditionInputsForType(condition['type'], condition['@id'], condition['vars'])
)
let labelLabel = document.createElement( 'label' );
labelLabel.innerHTML = "Description";
let labelInput = crel( 'input', {
'name': `${condition['@id']}-label`,
'value': typeof condition['label'] == 'undefined' ? "" : condition['label'],
'on': {
'change': this.getEditEventListener()
}
} );
labelLabel.appendChild( labelInput );
conditionEl.appendChild( labelLabel );
// for ( let v in condition['vars'] ) {
// let varLabel = document.createElement( 'label' );
// varLabel.innerHTML = v;
// let varInput = document.createElement( 'input' );
// if ( v == 'seconds' ) {
// varInput.type = 'number';
// }
// varInput.name = `${condition['@id']}-vars.${v}`;
// varInput.value = condition['vars'][v];
// varInput.addEventListener( 'change', this.getEditEventListener() );
// varLabel.appendChild( varInput );
// conditionEl.appendChild( varLabel );
// }
return conditionEl;
}
getConditionTypes() {
return {
'timeout': {
'seconds': { 'type': 'number', 'value': 10, 'min': 0, 'step': 0.1, 'unit': "s" },
'onlyIfNoReply': { 'type': 'checkbox', label: "Only if no reply", "title": "This timeout is only used if the participant doesn't say a word. If the participant starts speaking within the time of this timeout condition, only other conditions are applicable." },
'needsReply': { 'type': 'checkbox', label: "Reply needed", "title": "If checked, the timeout is counted if met. Used by consecutive-timeouts diversions." },
},
'variable_storage': {
// when matched, variable will be accessible as {store_name_1}
'var_name': { 'label': "Variable name", 'type': 'text', 'description': "When matched, variable will be accessible as $stored_VARNAME_1, $stored_VARNAME_2.. etc (use the name given here instead of VARNAME)" },
'number': { 'label': "Nr. of items to get", 'type': 'number', 'value': 5, 'min': 0, 'step': 1 },
'unique': { 'label': "Unique items", 'type': 'checkbox', 'title': "If checked, every word is returned only once, eg. love, dream, love, returns love, dream"},
},
'replyContains': {
'delays.0.minReplyDuration': { 'type': 'number', 'value': 0, 'min': 0, 'step': 0.1, 'label': 'Delay 1 - reply duration', 'unit': "s", 'readonly': 'readonly' },
'delays.0.waitTime': { 'type': 'number', 'value': 3, 'min': 0, 'step': 0.1 , 'label': 'Delay 1 - wait time', 'unit': "s" },
'delays.1.minReplyDuration': { 'type': 'number', 'value': 5, 'min': 0, 'step': 0.1, 'label': 'Delay 2 - reply duration', 'unit': "s" },
'delays.1.waitTime': { 'type': 'number', 'value': 1, 'min': 0, 'step': 0.1, 'label': 'Delay 2 - time', 'unit': "s" },
'delays.2.minReplyDuration': { 'type': 'number', 'value': 10, 'min': 0, 'step': 0.1, 'label': 'Delay 3 - reply duration', 'unit': "s" },
'delays.2.waitTime': { 'type': 'number', 'value': 0, 'min': 0, 'step': 0.1, 'label': 'Delay 3 - time', 'unit': "s" },
'regex': { 'value': '','placeholder': "match any input" },
'instantMatch': { 'value': '', 'title': "When matched, don't wait for reply to finish. Instantly take this direction.", 'type':'checkbox' },
},
'loop_time': {
// can be used in two ways
'less_than': {'type':'number', 'value': 0, 'min':0, 'step': 1, 'label': "Time in seconds, the loop should be before, 0 is ignored"},
'more_than': {'type':'number', 'value': 0, 'min':0, 'step': 1, 'label': "Time the loop should be after, 0 is ignored"},
'inverseMatch': { 'title': "Inverse the matching.", 'type':'checkbox' },
},
'variable': {
'variable': { 'value': '','placeholder': "Variable name (without $)" },
'notSet': { "label": "Not set", 'value': '', 'title': "Match if the variable is _not_ set.", 'type':'checkbox' },
},
'variableEquals': {
'variable1': { 'value': '','placeholder': "Variable name (without $)" },
'variable2': { 'value': '','placeholder': "Variable name (without $)" },
'notEq': { "label": "Not equal", 'value': '', 'title': "Match if the variables are _not_ equal.", 'type':'checkbox' },
},
'diversion': {
'diversionId': { 'tag': 'select', 'value': '', 'options': this.diversions.map((d) => d['@id']) },
'inverseMatch': { "label": "Match if not done", 'value': '', 'title': "Match if the diversion has _not_ been done.", 'type':'checkbox' },
},
'messagePlayed': {
'msgId': { 'value': '', 'label':'Message ID', 'placeholder': "(eg. en-njsm9b0ni)" },
'inverseMatch': { "label": "Match if not played", 'value': '', 'title': "Match if the message has _not_ been played.", 'type':'checkbox' },
},
// audioError has no parameters. Just checks if there was an error fetching the audio file
'audioError': {}
};
}
getConditionInputsForType( type, conditionId, values ) {
let inputs = [];
let vars = this.getConditionTypes()[type];
for ( let v in vars ) {
let attr = vars[v];
let inputType = attr.hasOwnProperty('tag') ? attr['tag'] : 'input';
attr['name'] = typeof conditionId == 'undefined' ? v : `${conditionId}-vars.${v}`;
if(typeof values != 'undefined') {
let value = this._getValueForPath(v, values);
if(attr['type'] == 'checkbox' ) {
if(value)
attr['checked'] = 'checked';
}
attr['value'] = typeof value == 'undefined' ? "": value;
attr['on'] = {
'change': this.getEditEventListener()
} ;
} else {
// console.log(attr);
}
inputs.push(
crel( 'label',
crel( 'span', {
'title': attr.hasOwnProperty('title') ? attr['title'] : ""
}, attr.hasOwnProperty('label') ? attr['label'] : v ),
crel( inputType, attr )
// crel('span', {'class': 'label-unit'}, attr.hasOwnProperty('unit') ? attr['unit'] : "" )
)
);
if(attr.hasOwnProperty('description')) {
inputs.push(crel('div', {'class':'description'}, attr['description']));
}
}
return inputs;
}
fillConditionFormForType( conditionForm, type, values ) {
conditionForm.innerHTML = "";
let inputs = this.getConditionInputsForType(type);
for(let i of inputs) {
conditionForm.appendChild(i);
}
}
_getValueForPath(path, vars) {
path = path.split( '.' ); // use vars.test to set ['vars']['test'] = value
let v = vars;
let result = null;
for ( let i = 0; i < path.length; i++ ) {
if(!isNaN(parseInt(path[i])) && isFinite(path[i])) {
// is int, use array, instead of obj
path[i] = parseInt(path[i]);
}
v = v[path[i]];
if(i == path.length - 1) {
result = v;
}
if(typeof v == 'undefined') {
break;
}
}
return result;
}
/**
* Save an array path (string) with a value to an object. Used to turn
* strings into nested arrays
* @param string path
* @param {any} value
* @param array|object vars
*/
_formPathToVars(path, value, vars) {
path = path.split( '.' ); // use vars.test to set ['vars']['test'] = value
let res = vars;
for ( let i = 0; i < path.length; i++ ) {
if ( i == ( path.length - 1 ) ) {
res[path[i]] = value;
} else {
if(!isNaN(parseInt(path[i+1])) && isFinite(path[i+1])) {
// is int, use array, instead of obj
path[i+1] = parseInt(path[i+1]);
}
if(typeof res[path[i]] == 'undefined') {
res[path[i]] = typeof path[i+1] == 'number' ? [] : {}
}
res = res[path[i]];
}
}
return vars;
}
getAddConditionFormEl( direction ) {
let optionEls = [];
let types = this.getConditionTypes();
for ( let type in types ) {
optionEls.push( crel( 'option', type ) );
}
let conditionForm = crel( 'div', { 'class': 'condition--vars' } );
let g = this;
let addConditionEl = crel( 'div', { 'class': 'condition condition--add' },
crel( 'form', {
'on': {
'submit': function( e ) {
e.preventDefault();
let form = new FormData( e.target );
console.log( 'submit', form );
let type = form.get( 'type' );
form.delete( 'type' );
let label = form.get( 'label' );
form.delete( 'label' );
// checkboxes to true/false
let defs = g.getConditionTypes()[type];
// console.log(defs);
for(let field in defs) {
// console.log(field);
if(defs[field]['type'] == 'checkbox') {
console.info('configure checkbox', field);
form.set(field, form.has(field));
}
}
let vars = {};
for ( var pair of form.entries() ) {
// FormData only has strings & blobs, we want booleans:
if(pair[1] === 'true') pair[1] = true;
if(pair[1] === 'false') pair[1] = false;
vars = g._formPathToVars(pair[0], pair[1], vars);
}
// TODO: checkboxes
// console.log("Createded", vars);
g.addConditionForDirection( type, label, vars, direction );
}
}
},
crel( "h4", {
'class': "divToggle",
'on': {
'click': function(e) { this.classList.toggle('opened'); }
}
}, "Create New Condition" ),
crel('div', {'class': 'divToggle-target'},
crel( "label",
crel( 'span', "Type" ),
crel( 'select', {
'name': 'type',
'on': {
'change': function( e ) {
g.fillConditionFormForType( conditionForm, e.target.value );
}
}
}, optionEls ),
),
crel( "label",
crel( 'span', "Description" ),
crel( 'input', { 'name': 'label' } )
),
conditionForm,
crel( 'input', {
'type': 'submit',
'value': 'create'
} )
)
)
);
this.fillConditionFormForType( conditionForm, optionEls[0].value );
return addConditionEl;
}
/**
* remove condition from the graph or merely from the given direction
* @param {any} condition The condition to remove
* @param {any} direction if given, only remove from this direction
*/
rmCondition( condition, direction ) {
let id = condition['@id'];
// TODO
if ( typeof direction != 'undefined' ) {
let pos = direction['conditions'].indexOf(id);
console.log('delete', id, 'on direction');
if(pos > -1) {
direction['conditions'].splice(pos, 1);
}
for(let dir of this.directions) {
// console.log('check if condition exists for dir', dir)
if(dir['conditions'].indexOf(id) > -1) {
console.log("Condition still in use");
this.updateFromData();
this.build();
this.updateMsg();
return;
}
}
console.log('No use, remove', condition)
this._rmNode( condition );
} else {
for(let dir of this.directions) {
let pos = dir['conditions'].indexOf(id);
if(pos > -1) {
dir['conditions'].splice(pos, 1);
}
}
console.log('remove condition?', id)
this._rmNode( condition );
}
this.updateMsg();
}
getConditionEl( condition ) {
let conditionEl = document.createElement( 'div' );
return conditionEl;
}
getDirectionsFrom( msg ) {
return this.directions.filter( d => d['source'] == msg );
}
getDirectionsTo( msg ) {
return this.directions.filter( d => d['target'] == msg );
}
addMsg(skipRebuild) {
let msg = {
"@id": this.language_code.substring( 0, 2 ) + "-n" + Date.now().toString( 36 ),
"@type": "Msg",
"text": "New",
"start": false,
"afterrunTime": 0.5,
"light": null,
}
this.data.push( msg );
console.log("skip or not to skip?", skipRebuild);
if(typeof skipRebuild == 'undefined' || !skipRebuild) {
this.updateFromData();
this.build();
this.selectMsg(msg);
}
return msg;
}
rmMsg( msg ) {
let invalidatedDirections = this.directions.filter( d => d['source'] == msg || d['target'] == msg );
console.log( 'invalidated', invalidatedDirections );
for ( let dir of invalidatedDirections ) {
let i = this.data.indexOf( dir );
this.data.splice( i, 1 );
}
this._rmNode( msg );
}
_rmNode( node ) {
// remove msg/direction/condition/etc
let i = this.data.indexOf( node );
this.data.splice( i, 1 );
this.updateFromData();
this.build();
return this.data;
}
addConditionForDirection( type, label, vars, direction ) {
let con = this.addCondition( type, label, vars, true );
direction['conditions'].push( con['@id'] );
this.updateFromData();
this.build();
this.updateMsg();
}
addCondition( type, label, vars, skip ) {
let con = {
"@id": this.language_code.substring( 0, 2 ) + "-c" + Date.now().toString( 36 ),
"@type": "Condition",
"type": type,
"label": label,
"vars": vars
}
this.data.push( con );
if ( skip !== true ) {
this.updateFromData();
this.build();
}
return con;
}
addDirection( source, target ) {
let dir = {
"@id": this.language_code.substring( 0, 2 ) + "-d" + Date.now().toString( 36 ),
"@type": "Direction",
"source": source,
"target": target,
"conditions": []
}
this.data.push( dir );
let skipDistances;
// orphaned target and source has no other destinations. We can copy the vertical position:
if(this.getDirectionsFrom( source ).length < 1 && this.getDirectionsFrom( target ).length < 1 && this.getDirectionsTo( target ).length < 1) {
skipDistances = true;
let distance = this.distances[source['@id']];
if(distance == null) {
skipDistances = false;
} else {
let d = [distance[0] + 1, distance[1]];
// create a distance based on source's position
// this saves us from running the slow calculateDistancesFromStart
this.distances[target['@id']] = d;
}
} else {
skipDistances = false;
}
this.updateFromData(skipDistances);
this.build();
return dir;
}
rmDirection( dir ) {
this._rmNode( dir );
// todo, remove orphaned conditions
}
createMsg() {
this.addMsg();
// this.build(); // already happens in addMsg()
}
createConnectedMsg(sourceMsg) {
console.time('createConnected');
console.time("Add");
let newMsg = this.addMsg(true); // skipRebuild = true, as addDirection() already rebuilds the graph
this.getNodeById(newMsg['@id']).y = this.getNodeById(sourceMsg['@id']).y;
if(this.getNodeById(sourceMsg['@id']).hasOwnProperty('color')){
this.getNodeById(newMsg['@id']).color = this.getNodeById(sourceMsg['@id']).color
}
console.timeEnd("Add");
console.time("direction");
this.addDirection(sourceMsg, newMsg);
console.timeEnd("direction");
console.time("build");
// this.build(); // build is already done in addDirection()
console.timeEnd("build");
// reselect so that overview is updated
console.time("Select");
this.selectMsg(newMsg);
console.timeEnd("Select");
console.timeEnd('createConnected');
}
getNodeById( id ) {
return this.data.filter( node => node['@id'] == id )[0];
}
/**
* Use wrapper method, because for event handlers 'this' will refer to
* the input object
*/
getEditEventListener(callback) {
let graph = this;
let el = function( e ) {
console.info("Changed", e);
let parts = e.target.name.split( '-' );
let field = parts.pop();
let id = parts.join('-');
let node = graph.getNodeById( id );
let path = field.split( '.' ); // use vars.test to set ['vars']['test'] = value
var res = node;
let value = e.target.value
if(e.target.type == 'checkbox') {
value = e.target.checked;
}
for ( var i = 0; i < path.length; i++ ) {
if ( i == ( path.length - 1 ) ) {
res[path[i]] = value;
} else {
res = res[path[i]];
}
}
// node[field] = e.srcElement.value;
graph.build();
if(typeof callback !== 'undefined'){
callback();
}
}
return el;
}
getJsonString() {
// recreate array to have the right order of items.
this.data = [this.configuration, ...this.messages, ...this.conditions,
...this.directions, ...this.diversions]
let d = [];
// let toRemove = ['sourceX', 'sourceY', 'targetX', 'targetY', 'x', 'y', 'vx', 'vy']
let toRemove = ['sourceX', 'sourceY', 'targetX', 'targetY', 'x', 'y', 'vx', 'vy']
for ( let node of this.data ) {
let n = {};
// console.log( node['source'] );
for ( let e in node ) {
if ( node.hasOwnProperty( e ) && toRemove.indexOf( e ) == -1 ) {
if ( this.data.indexOf( node[e] ) != -1 ) {
n[e] = node[e]['@id'];
} else {
n[e] = node[e];
}
}
}
d.push( n );
}
console.info("Jsonified graph:",d);
return JSON.stringify( d );
}
downloadJson() {
if ( !this.language_code ) {
alert( "Make sure to load a language first" )
}
var blob = new Blob( [this.getJsonString()], { type: 'application/json' } );
if ( window.navigator.msSaveOrOpenBlob ) {
window.navigator.msSaveBlob( blob, "pillow_talk.json" );
}
else {
var elem = window.document.createElement( 'a' );
elem.href = window.URL.createObjectURL( blob );
elem.download = "pillow_talk.json";
document.body.appendChild( elem );
elem.click();
document.body.removeChild( elem );
}
}
saveJson( msg_id, fileInputElement, callback ) {
if ( !this.language_code ) {
alert( "Make sure to load a language first" )
}
let formData = new FormData();
formData.append( "language", this.language_code );
if ( msg_id ) {
formData.append( "message_id", msg_id );
formData.append( "audio", fileInputElement.files[0] );
}
let blob = new Blob( [this.getJsonString()], { type: "application/json" } );
formData.append( "json", blob );
console.info("Save json", formData );
var request = new XMLHttpRequest();
request.open( "POST", window.location.origin + "/upload" );
if(callback) {
request.addEventListener( "load", callback);
}
request.send( formData );
}
loadData( data, language_code ) {
console.time('load');
this.language_code = language_code;
this.data = data;
console.time('load:update');
this.updateFromData();
console.timeEnd('load:update');
console.time('load:build');
this.build( true );
console.timeEnd('load:build');
console.timeEnd('load');
}
updateFromData(skipDistances) {
this.messages = this.data.filter(( node ) => node['@type'] == 'Msg' );
this.directions = this.data.filter(( node ) => node['@type'] == 'Direction' );
this.conditions = this.data.filter(( node ) => node['@type'] == 'Condition' );
this.diversions = this.data.filter(( node ) => node['@type'] == 'Diversion' );
let configurations = this.data.filter(( node ) => node['@type'] == 'Configuration' );
this.configuration = configurations.length > 0 ? configurations[0] : {
"@id": "config",
"@type": "Configuration"
};
document.getElementById('current_lang').innerHTML = "";
document.getElementById('current_lang').appendChild(crel('span', {
'class': 'flag-icon ' + this.language_code
}));
let storyEl = document.getElementById('story');
storyEl.classList.remove(... panopticon.languages.map((l) => l['code']))
storyEl.classList.add(this.language_code);
if(typeof skipDistances == 'undefined' || !skipDistances) {
this.distances = this.calculateDistancesFromStart();
}
// save state;
// console.time('update:save')
// this.saveState();
// console.timeEnd('update:save')
}
updateHugveyStatus(hv) {
let els = document.getElementsByClassName('beenHit');
while(els.length > 0) {
els[0].classList.remove('beenHit');
}
if(!hv || typeof hv['history'] == 'undefined') {
return;
}
if(hv['history'].hasOwnProperty('messages')){
for(let msg of hv['history']['messages']) {
document.getElementById(msg[0]['id']).classList.add('beenHit');
}
}
if(hv['history'].hasOwnProperty('directions')){
for(let msg of hv['history']['directions']) {
document.getElementById(msg[0]['id']).classList.add('beenHit');
}
}
}
// saveState() {
// window.localStorage.setItem( "lastState", this.getJsonString() );
// }
//
// hasSavedState() {
// return window.localStorage.getItem( "lastState" ) !== null;
// }
//
// loadFromState() {
// this.loadData( JSON.parse( window.localStorage.getItem( "lastState" ) ) );
// }
build( isInit ) {
console.trace();
this.simulation = d3.forceSimulation( this.messages )
.force( "link", d3.forceLink( this.directions ).id( d => d['@id'] ).strength(0) )
// .force( "charge", d3.forceManyBody().strength( 100 ) )
// .force( "center", d3.forceCenter( this.width / 2, this.height / 2 ) )
.force( "collide", d3.forceCollide( this.nodeSize * 1.5 ).strength(3) )
.force( "forceX", d3.forceX(function(m){
let fx = panopticon.graph.distances[m['@id']] !== null ? panopticon.graph.distances[m['@id']][0] * panopticon.graph.nodeSize * 4 : 0
// console.log('fx', m['@id'], panopticon.graph.distances[m['@id']], fx);
return fx;
}).strength(50))
.force( "forceY", d3.forceY(function(m){
// if(panopticon.graph.distances[m['@id']] !== null )
// console.log(panopticon.graph.distances[m['@id']][1]);
let fy = panopticon.graph.distances[m['@id']] !== null ? panopticon.graph.distances[m['@id']][1] * panopticon.graph.nodeSize * 3: 0
// console.log('fx', m['@id'], panopticon.graph.distances[m['@id']], fx);
return fy;
}).strength(50))
// .force( "forceY", d3.forceY(m => panopticon.graph.distances[m['@id']] !== null ? 0 : panopticon.graph.nodeSize * 3 ).strength(30))
;
this.simulation.velocityDecay(.99);
// Update existing nodes
let node = this.nodesG
.selectAll( "g" )
.data( this.messages, n => n['@id'] )
;
// Update existing nodes
let newNode = node.enter();
let newNodeG = newNode.append( "g" )
.attr( 'id', d => d['@id'] )
.on( 'click', function( d ) {
this.clickMsg( d );
}.bind( this ) )
;
let circle = newNodeG.append( "circle" )
.attr( 'r', this.nodeSize )
// .text(d => d.id)
;
let textId = newNodeG.append( "text" ).attr( 'class', 'msg_id' );
let textContent = newNodeG.append( "text" ).attr( 'class', 'msg_txt' );
let statusIcon = newNodeG.append( "image" )
.attr( 'class', 'status_icon' )
.attr( 'x', '-10' )
.attr( 'y', '10' )
.attr( 'width', '20' )
.attr( 'height', '20' )
;
// remove
node.exit().remove();
node = node.merge( newNodeG );
// for all existing nodes:
node.attr( 'class', msg => {
let classes = [];
if ( this.selectedMsg == msg ) classes.push( 'selectedMsg' );
if ( msg['start'] == true ) classes.push( 'startMsg' );
if ( msg.hasOwnProperty('chapterStart') && msg['chapterStart'] == true ) classes.push( 'chapterStartMsg' );
if ( this.getDirectionsFrom( msg ).length < 1 ) {
classes.push( 'endMsg' );
if ( this.getDirectionsTo( msg ).length < 1 ) classes.push( 'orphanedMsg' );
}
return classes.join( ' ' );
} )
.on(".drag", null)
.call(
d3.drag( this.simulation )
.on("start", function(d){
if (!d3.event.active) panopticon.graph.simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
})
.on('drag', function(d){
d.fx = d3.event.x;
d.fy = d3.event.y;
})
.on("end", function(d){
if (!d3.event.active) panopticon.graph.simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
})
// .container(document.getElementById('container'))
);
node.select('circle').attr('style', (d) => 'fill: ' + (d.hasOwnProperty('color') ? d['color'] : '#77618e'));
let link = this.linkG
.selectAll( "line" )
.data( this.directions )
;
let newLink = link.enter()
.append( "line" )
;
//remove
link.exit().remove();
link = link.merge( newLink );
link.attr( 'class', l => { return `link ` + ( l['conditions'].length == 0 ? "link--noconditions" : "link--withconditions" ); } );
link.attr('id', (l) => l['@id']);
let formatText = ( t ) => {
if ( t.length > this.maxChars ) {
return t.substr( 0, this.maxChars - 3 ) + '...';
} else {
return t;
}
};
node.selectAll( "text.msg_id" ).text( d => d['@id'] );
node.selectAll( "text.msg_txt" ).text( d => formatText( `${d['text']}` ) );
node.selectAll( "image.status_icon" ).attr('xlink:href', d => d['audio'] ? '' : '/images/music-broken.svg');
// console.log('q');
// // TODO: update text
// let text = newNodeG.append("text")
// // .attr('stroke', "black")
// .text(d => formatText(`(${d['@id']}) ${d['text']}`))
// // .attr('title', d => d.label)
// ;
let n = this.nodesG;
this.simulation.on( "tick", () => {
link
.each( function( d ) {
let sourceX, targetX, midX, dx, dy, angle;
// This mess makes the arrows exactly perfect.
// thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
if ( d.source.x < d.target.x ) {
sourceX = d.source.x;
targetX = d.target.x;
} else if ( d.target.x < d.source.x ) {
targetX = d.target.x;
sourceX = d.source.x;
} else if ( d.target.isCircle ) {
targetX = sourceX = d.target.x;
} else if ( d.source.isCircle ) {
targetX = sourceX = d.source.x;
} else {
midX = ( d.source.x + d.target.x ) / 2;
if ( midX > d.target.x ) {
midX = d.target.x;
} else if ( midX > d.source.x ) {
midX = d.source.x;
} else if ( midX < d.target.x ) {
midX = d.target.x;
} else if ( midX < d.source.x ) {
midX = d.source.x;
}
targetX = sourceX = midX;
}
dx = targetX - sourceX;
dy = d.target.y - d.source.y;
angle = Math.atan2( dx, dy );
// Compute the line endpoint such that the arrow
// is touching the edge of the node rectangle perfectly.
d.sourceX = sourceX + Math.sin( angle ) * this.nodeSize;
d.targetX = targetX - Math.sin( angle ) * this.nodeSize;
d.sourceY = d.source.y + Math.cos( angle ) * this.nodeSize;
d.targetY = d.target.y - Math.cos( angle ) * this.nodeSize;
}.bind( this ) )
.attr( "x1", function( d ) { return d.sourceX; } )
.attr( "y1", function( d ) { return d.sourceY; } )
.attr( "x2", function( d ) { return d.targetX; } )
.attr( "y2", function( d ) { return d.targetY; } );
node.attr( "transform", d => `translate(${d.x},${d.y})` );
// .attr("cy", d => d.y);
} );
// this.simulation.alpha(1);
// this.simulation.restart();
console.time('build:simulate')
for ( let i = 0, n = Math.ceil( Math.log( this.simulation.alphaMin() ) / Math.log( 1 - this.simulation.alphaDecay() ) ); i < n; ++i ) {
this.simulation.tick();
}
console.timeEnd('build:simulate')
return this.svg.node();
}
calculateDistancesFromStart() {
console.time('calculateDistancesFromStart');
let starts = this.messages.filter( m => m.hasOwnProperty('start') && m['start'] == true);
if (starts.length < 1) {
console.error("No start set");
return;
}
//initiate distances
let distances = {};
for(let msg of this.messages) {
// distances[msg['@id']] = msg === startMsg ? 0 : null;
distances[msg['@id']] = null;
}
let targetsPerMsg = {};
let sourcesPerMsg = {};
// console.log("dir", this.directions);
for(let direction of this.directions) {
let from = typeof direction['source'] == "string" ? direction['source'] : direction['source']['@id'];
let to = typeof direction['target'] == "string" ? direction['target'] : direction['target']['@id'];
if(!targetsPerMsg.hasOwnProperty(from)) {
targetsPerMsg[from] = [];
}
targetsPerMsg[from].push(to);
if(!sourcesPerMsg.hasOwnProperty(to)) {
sourcesPerMsg[to] = [];
}
sourcesPerMsg[to].push(from);
}
let traverseMsg = function(msgId, depth, goingDown, yPos) {
let msgsPerMsg = goingDown ? targetsPerMsg : sourcesPerMsg;
// console.log(goingDown, msgId, depth);
if(!msgsPerMsg.hasOwnProperty(msgId)) {
// end of trail
return yPos;
}
let i = 0, y =0;
for(let childMsgId of msgsPerMsg[msgId]) {
if(distances[childMsgId] !== null){
continue;
}
if(distances[childMsgId] === null || (goingDown && distances[childMsgId][0] > depth)) {
if(distances[childMsgId] === null) {
if(i > 0){
yPos++;
}
i++;
// console.log('set for id', childMsgId, goingDown, depth, yPos);
distances[childMsgId] = [depth, yPos];
}
else{
y++;
}
// console.log(goingDown, childMsgId, depth);
yPos = traverseMsg(childMsgId, goingDown ? (depth+1) : (depth - 1), goingDown, yPos);
}
else if(!goingDown && distances[childMsgId][0] < depth) {
if(childMsgId == 'en-njsgkr4az') {
console.log('set for id', childMsgId, goingDown);
}
if(distances[childMsgId] === null) {
distances[childMsgId] = [depth, yPos];
}
// console.log('a', depth);
yPos = traverseMsg(childMsgId, depth - 1, goingDown, yPos);
} else {
// apparently, there is a loop. Don't traverse it.
}
}
// if( i == 0 && y == 1) {
// // we reached an item that branches back into the tree
// return yPos -1;
// }
// console.log('yPos',msgId,yPos);
return yPos;
}
let yPos = 0;
console.time('step1');
for(let startMsg of starts) {
// console.time('start: '+startMsg['@id']);
if(distances[startMsg['@id']] === null) {
distances[startMsg['@id']] = [0, yPos];
}
yPos = traverseMsg(startMsg['@id'], 1 , true, yPos);
yPos += 1;
// console.timeEnd('start: '+startMsg['@id']);
}
console.timeEnd('step1');
console.time('step2');
// now we have the formal tree, lets try to polish the rest:
for(let msgId in distances) {
// console.time('polish: '+ msgId);
if(distances[msgId] === null) {
continue;
}
// let's see if there are parent nodes that are not in the distances array
// traverse up and see whether we encounter anything new
traverseMsg(msgId, distances[msgId][0] -1, false, distances[msgId][1])
// console.timeEnd('polish: '+ msgId);
}
console.timeEnd('step2');
// let additionalsDepth = 0;
//// now the secondary strands:
// for(let msgId in distances) {
// if(distances[msgId] !== null || sourcesPerMsg.hasOwnProperty(msgId)) {
// // it is already calculated, or it has a parent node (which we should traverse instead)
// continue;
// }
// distances[msgId] = additionalsDepth;
// traverseMsg(msgId, additionalsDepth+1, true);
//
// }
console.timeEnd("calculateDistancesFromStart");
return distances;
}
}
//
//