Skip to content

Commit d200322

Browse files
coderespawncoderespawn
committed
Added a tree visualizer for the dock tree to help with debugging
1 parent e1de93c commit d200322

File tree

11 files changed

+17551
-13
lines changed

11 files changed

+17551
-13
lines changed

‎js/lib/combine.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(function()
22
{
3-
dockspawn = {version: "0.0.1"};
3+
dockspawn = {version: "0.0.2"};
44

55
import "tab/";
66
import "dialog/";

‎js/lib/dock/DockLayoutEngine.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ dockspawn.DockLayoutEngine.prototype.undock = function(node)
8383
}
8484
}
8585
this.dockManager.invalidate();
86+
this.dockManager.notifyOnUnDock(node);
8687
};
8788

8889
dockspawn.DockLayoutEngine.prototype._performDock = function(referenceNode, newNode, direction, insertBeforeReference)
@@ -117,7 +118,7 @@ dockspawn.DockLayoutEngine.prototype._performDock = function(referenceNode, newN
117118
}
118119

119120
// Attach the root node to the dock manager's DOM
120-
this.dockManager.setRootNode(compositeNode);
121+
this.dockManager.setRootNode(compositeNode);
121122
this.dockManager.rebuildLayout(this.dockManager.context.model.rootNode);
122123
compositeNode.container.setActiveChild(newNode.container);
123124
return;
@@ -176,6 +177,8 @@ dockspawn.DockLayoutEngine.prototype._performDock = function(referenceNode, newN
176177
var containerWidth = newNode.container.containerElement.clientWidth;
177178
var containerHeight = newNode.container.containerElement.clientHeight;
178179
newNode.container.resize(containerWidth, containerHeight);
180+
181+
this.dockManager.notifyOnDock(newNode);
179182
};
180183

181184
dockspawn.DockLayoutEngine.prototype._forceResizeCompositeContainer = function(container)

‎js/lib/dock/DockManager.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,13 +310,37 @@ dockspawn.DockManager.prototype.removeLayoutListener = function(listener)
310310
dockspawn.DockManager.prototype.suspendLayout = function()
311311
{
312312
var self = this;
313-
this.layoutEventListeners.forEach(function(listener) { listener.onSuspendLayout(self); });
313+
this.layoutEventListeners.forEach(function(listener) {
314+
if (listener.onSuspendLayout) listener.onSuspendLayout(self);
315+
});
314316
};
315317

316318
dockspawn.DockManager.prototype.resumeLayout = function()
317319
{
318320
var self = this;
319-
this.layoutEventListeners.forEach(function(listener) { listener.onResumeLayout(self); });
321+
this.layoutEventListeners.forEach(function(listener) {
322+
if (listener.onResumeLayout) listener.onResumeLayout(self);
323+
});
324+
};
325+
326+
dockspawn.DockManager.prototype.notifyOnDock = function(dockNode)
327+
{
328+
var self = this;
329+
this.layoutEventListeners.forEach(function(listener) {
330+
if (listener.onDock) {
331+
listener.onDock(self, dockNode);
332+
}
333+
});
334+
};
335+
336+
dockspawn.DockManager.prototype.notifyOnUnDock = function(dockNode)
337+
{
338+
var self = this;
339+
this.layoutEventListeners.forEach(function(listener) {
340+
if (listener.onUndock) {
341+
listener.onUndock(self, dockNode);
342+
}
343+
});
320344
};
321345

322346
dockspawn.DockManager.prototype.saveState = function()

‎js/out/demo.css‎ renamed to ‎js/out/demos/ide/demo.css‎

File renamed without changes.

‎js/out/demo.html‎ renamed to ‎js/out/demos/ide/demo.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@
22
<html>
33
<head>
44
<title></title>
5-
<link rel="stylesheet" href="css/font-awesome.css">
6-
<link rel="stylesheet" href="css/dock-manager.css">
5+
<link rel="stylesheet" href="../../css/font-awesome.css">
6+
<link rel="stylesheet" href="../../css/dock-manager.css">
77
<link rel="stylesheet" href="demo.css">
8-
<script src="js/dockspawn.js" type="text/javascript"></script>
8+
<script src="../../js/dockspawn.js" type="text/javascript"></script>
9+
10+
<!-- Info Vis graphing lib. Used for dock tree visualization -->
11+
<link type="text/css" rel="stylesheet" href="infovis/jit-base.css" />
12+
<link type="text/css" rel="stylesheet" href="infovis/Spacetree.css" />
13+
<script language="javascript" type="text/javascript" src="infovis/jit.js"></script>
14+
<script language="javascript" type="text/javascript" src="infovis/dock_tree_vis.js"></script>
915
</head>
16+
1017
<body>
1118
<div class="demo-header" id="header" style="width:100%">
1219
<div class="demo-header-title">Dock Spawn IDE Demo [Javascript]</div>
1320
<div class="demo-header-description">Pull a panel out from it's title bar and dock it elsewhere</div>
1421
</div>
15-
1622
<div id="my_dock_manager" class="my-dock-manager"></div>
1723
<div id="solution_window" caption="Solution Explorer" icon="icon-circle-arrow-right" class="solution-window">
1824
<ul>
@@ -32,6 +38,7 @@
3238
<div id="problems_window" caption="Problems" class="problems-window"></div>
3339
<div id="editor1_window" caption="Steering.h" class="editor1-window editor-host"></div>
3440
<div id="editor2_window" caption="Steering.cpp" class="editor2-window editor-host"></div>
41+
<div id="infovis" caption="Dock Tree Visualizer" class="editor2-window editor-host"></div>
3542
<div id="output_window" caption="Output" class="output-window editor-host"></div>
3643
<div id="toolbox_window" caption="Toolbox" class="toolbox-window">
3744
<ul>
@@ -51,7 +58,6 @@
5158
var divDockManager = document.getElementById("my_dock_manager");
5259
var dockManager = new dockspawn.DockManager(divDockManager);
5360
dockManager.initialize();
54-
5561
// Let the dock manager element fill in the entire screen
5662
var onResized = function(e)
5763
{
@@ -72,6 +78,7 @@
7278
var output = new dockspawn.PanelContainer(document.getElementById("output_window"), dockManager);
7379
var editor1 = new dockspawn.PanelContainer(document.getElementById("editor1_window"), dockManager);
7480
var editor2 = new dockspawn.PanelContainer(document.getElementById("editor2_window"), dockManager);
81+
var infovis = new dockspawn.PanelContainer(document.getElementById("infovis"), dockManager);
7582

7683
// Dock the panels on the dock manager
7784
var documentNode = dockManager.context.model.documentManagerNode;
@@ -83,6 +90,10 @@
8390
var toolboxNode = dockManager.dockRight(documentNode, toolbox, 0.20);
8491
var editor1Node = dockManager.dockFill(documentNode, editor1);
8592
var editor2Node = dockManager.dockFill(documentNode, editor2);
93+
var infovisNode = dockManager.dockFill(documentNode, infovis);
94+
95+
// Initialize infovis (for dock tree visualization)
96+
InitDebugTreeVis(dockManager);
8697
}
8798
</script>
8899

‎js/out/demos/ide/infovis/Spacetree.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.jit-autoadjust-label {
2+
padding: 15px;
3+
}
4+
5+
#update, #restore {
6+
text-align: center;
7+
width: 200px;
8+
margin:0px 35px 10px 35px;
9+
color: #f00;
10+
}
11+
12+
.button {
13+
display: inline-block;
14+
outline: none;
15+
cursor: pointer;
16+
text-align: center;
17+
text-decoration: none;
18+
font: 14px / 100% Arial, Helvetica, sans-serif;
19+
padding: 0.5em 1em 0.55em;
20+
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
21+
-webkit-border-radius: 0.5em;
22+
-moz-border-radius: 0.5em;
23+
border-radius: 0.5em;
24+
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
25+
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
26+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
27+
}
28+
29+
.button:hover {
30+
text-decoration: none;
31+
}
32+
33+
.button:active {
34+
position: relative;
35+
top: 1px;
36+
}
37+
38+
/* white */
39+
.white {
40+
color: #606060;
41+
border: solid 1px #b7b7b7;
42+
background: #fff;
43+
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
44+
background: -moz-linear-gradient(top, #fff, #ededed);
45+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
46+
}
47+
48+
.white:hover {
49+
background: #ededed;
50+
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
51+
background: -moz-linear-gradient(top, #fff, #dcdcdc);
52+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
53+
}
54+
55+
.white:active {
56+
color: #999;
57+
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
58+
background: -moz-linear-gradient(top, #ededed, #fff);
59+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
60+
}

‎js/out/demos/ide/infovis/dock_tree_vis.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5+
<title>Spacetree - Tree Animation</title>
6+
7+
<!-- CSS Files -->
8+
<link type="text/css" href="jit-base.css" rel="stylesheet" />
9+
10+
<!-- JIT Library File -->
11+
<script language="javascript" type="text/javascript" src="jit.js"></script>
12+
<script language="javascript" type="text/javascript" src="dock_tree_vis.js"></script>
13+
</head>
14+
15+
<body onload="init();">
16+
<div id="infovis"></div>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)