File size: 5,255 Bytes
fe66731
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
module.exports = function ( graph ){
  var debugMenu = {},
    checkboxes = [];
  
  
  var hoverFlag = false;
  var specialCbx;
  debugMenu.setup = function (){
    var menuEntry = d3.select("#debugMenuHref");
    
    menuEntry.on("mouseover", function (){
      if ( hoverFlag === false ) {
        var searchMenu = graph.options().searchMenu();
        searchMenu.hideSearchEntries();
        specialCbx.on("click")(true);
        if ( graph.editorMode() === false ) {
          d3.select("#useAccuracyHelper").style("color", "#979797");
          d3.select("#useAccuracyHelper").style("pointer-events", "none");
          
          // regardless the state on which useAccuracyHelper is , we are not in editing mode -> disable it
          d3.select("#showDraggerObject").style("color", "#979797");
          d3.select("#showDraggerObject").style("pointer-events", "none");
        } else {
          d3.select("#useAccuracyHelper").style("color", "#2980b9");
          d3.select("#useAccuracyHelper").style("pointer-events", "auto");
        }
        hoverFlag = true;
      }
    });
    menuEntry.on("mouseout", function (){
      hoverFlag = false;
    });
    
    
    specialCbx = addCheckBox("useAccuracyHelper", "Use accuracy helper", "#useAccuracyHelper", graph.options().useAccuracyHelper,
      function ( enabled, silent ){
        if ( !enabled ) {
          d3.select("#showDraggerObject").style("color", "#979797");
          d3.select("#showDraggerObject").style("pointer-events", "none");
          d3.select("#showDraggerObjectConfigCheckbox").node().checked = false;
        } else {
          d3.select("#showDraggerObject").style("color", "#2980b9");
          d3.select("#showDraggerObject").style("pointer-events", "auto");
        }
        
        if ( silent === true ) return;
        graph.lazyRefresh();
        graph.updateDraggerElements();
      }
    );
    addCheckBox("showDraggerObject", "Show accuracy helper", "#showDraggerObject", graph.options().showDraggerObject,
      function ( enabled, silent ){
        if ( silent === true ) return;
        graph.lazyRefresh();
        graph.updateDraggerElements();
      });
    addCheckBox("showFPS_Statistics", "Show rendering statistics", "#showFPS_Statistics", graph.options().showRenderingStatistic,
      function ( enabled, silent ){
        
        if ( graph.options().getHideDebugFeatures() === false ) {
          d3.select("#FPS_Statistics").classed("hidden", !enabled);
        } else {
          d3.select("#FPS_Statistics").classed("hidden", true);
        }
        
        
      });
    addCheckBox("showModeOfOperation", "Show input modality", "#showModeOfOperation", graph.options().showInputModality,
      function ( enabled ){
        if ( graph.options().getHideDebugFeatures() === false ) {
          d3.select("#modeOfOperationString").classed("hidden", !enabled);
        } else {
          d3.select("#modeOfOperationString").classed("hidden", true);
        }
      });
    
    
  };
  
  
  function addCheckBox( identifier, modeName, selector, onChangeFunc, _callbackFunction ){
    var configOptionContainer = d3.select(selector)
      .append("div")
      .classed("checkboxContainer", true);
    var configCheckbox = configOptionContainer.append("input")
      .classed("moduleCheckbox", true)
      .attr("id", identifier + "ConfigCheckbox")
      .attr("type", "checkbox")
      .property("checked", onChangeFunc());
    
    
    configCheckbox.on("click", function ( silent ){
      var isEnabled = configCheckbox.property("checked");
      onChangeFunc(isEnabled);
      _callbackFunction(isEnabled, silent);
      
    });
    checkboxes.push(configCheckbox);
    configOptionContainer.append("label")
      .attr("for", identifier + "ConfigCheckbox")
      .text(modeName);
    
    return configCheckbox;
  }
  
  debugMenu.setCheckBoxValue = function ( identifier, value ){
    for ( var i = 0; i < checkboxes.length; i++ ) {
      var cbdId = checkboxes[i].attr("id");
      if ( cbdId === identifier ) {
        checkboxes[i].property("checked", value);
        break;
      }
    }
  };
  
  debugMenu.getCheckBoxValue = function ( id ){
    for ( var i = 0; i < checkboxes.length; i++ ) {
      var cbdId = checkboxes[i].attr("id");
      if ( cbdId === id ) {
        return checkboxes[i].property("checked");
      }
    }
  };
  
  debugMenu.updateSettings = function (){
    d3.selectAll(".debugOption").classed("hidden", graph.options().getHideDebugFeatures());
    
    var silent = true;
    checkboxes.forEach(function ( checkbox ){
      checkbox.on("click")(silent);
    });
    if ( graph.editorMode() === false ) {
      
      d3.select("#useAccuracyHelper").style("color", "#979797");
      d3.select("#useAccuracyHelper").style("pointer-events", "none");
      
      // regardless the state on which useAccuracyHelper is , we are not in editing mode -> disable it
      d3.select("#showDraggerObject").style("color", "#979797");
      d3.select("#showDraggerObject").style("pointer-events", "none");
    } else {
      
      d3.select("#useAccuracyHelper").style("color", "#2980b9");
      d3.select("#useAccuracyHelper").style("pointer-events", "auto");
    }
    
  };
  
  return debugMenu;
};