Permalink
Browse files

Added new contol buttons and new functionality

  • Loading branch information...
rob8861 committed Apr 4, 2012
1 parent ea7c648 commit 642bf1d011a483a098a4917f1dfa8e5cb47f083a
Showing with 313 additions and 206 deletions.
  1. +127 −107 src/css/style.css
  2. +16 −0 src/index.html
  3. +32 −13 src/js/znode/nodegraph.js
  4. +138 −86 src/js/znode/ui.js
View
@@ -1,113 +1,133 @@
-body, html{
- margin : 0;
- padding : 0;
- overflow : hidden;
-}
-#canvas{
- background-color : white;
-}
-#overlay{
- position: absolute;
- background : url("../images/trans.gif");
- z-index : 1000;
- cursor: pointer;
-}
-
-#controls{
- width : 100%;
- height : 40px;
- background-color : #dcdcdc;
- border-top : none;
- border-left : none;
- border-right : none;
- border-bottom : 1px solid #999;
-}
-
-.btn{
- padding: 17px 8px 13px 8px;
- height : 10px;
- margin: 0px 0px 0px 2px;
- float : left;
- cursor : pointer;
- font-family: Georgia, serif;
- font-size : 12px;
- background-color : #efefef;
-}
-
-#logo{
- position : relative;
- float : left;
- font-family : Georgia, serif;
- font-size : 20px;
- color : black;
- padding-left : 5px;
- margin : 10px;
-}
-
-#openWin{
- position : absolute;
- top : 60px;
- left : 20px;
- width : 250px;
- height : 510px;
- background-color : #dcdcdc;
- z-index : 6000;
- display : none;
-}
-
-#files{
- position : relative;
- margin : 10px;
-
- background-color : white;
- width : 230px;
- height : 450px;
- overflow : auto;
-}
-
-#fileTitle{
- font-family : Georgia, serif;
- font-style : italic;
- margin-left : 10px;
- margin-top : 10px;
-}
-form{
- padding :0;
- margin : 0;
-}
-input{
- border : 1px solid gray;
- color : gray;
- padding : 4px;
-}
-#saveForm{
- position : relative;
- float : left;
- font-family : Georgia, serif;
- font-size : 12px;
- padding : 10px 0px 0px 18px;
+body, html {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+#canvas {
+ background-color: white;
+}
+#overlay {
+ position: absolute;
+ background: url("../images/trans.gif");
+ z-index: 1000;
+ cursor: pointer;
+}
+#controls {
+ width: 100%;
+ height: 40px;
+ background-color: #dcdcdc;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: 1px solid #999;
+}
+.btn {
+ padding: 17px 8px 13px 8px;
+ height: 10px;
+ margin: 0px 0px 0px 2px;
+ float: left;
+ cursor: pointer;
+ font-family: Georgia, serif;
+ font-size: 12px;
+ background-color: #efefef;
+}
+#logo {
+ position: relative;
+ float: left;
+ font-family: Georgia, serif;
+ font-size: 20px;
+ color: black;
+ padding-left: 5px;
+ margin: 10px;
+}
+#openWin {
+ position: absolute;
+ top: 60px;
+ left: 20px;
+ width: 250px;
+ height: 510px;
+ background-color: #dcdcdc;
+ z-index: 6000;
+ display: none;
+}
+#openComp {
+ position: absolute;
+ top: 60px;
+ left: 20px;
+ width: 250px;
+ height: 510px;
+ background-color: #dcdcdc;
+ z-index: 6000;
+ display: none;
+}
+#files {
+ position: relative;
+ margin: 10px;
+ background-color: white;
+ width: 230px;
+ height: 450px;
+ overflow: auto;
+}
+#classNames {
+ position: relative;
+ margin: 10px;
+ background-color: white;
+ width: 230px;
+ height: 450px;
+ overflow: auto;
+}
+#fileTitle {
+ font-family: Georgia, serif;
+ font-style: italic;
+ margin-left: 10px;
+ margin-top: 10px;
+}
+form {
+ padding: 0;
+ margin: 0;
+}
+input {
+ border: 1px solid gray;
+ color: gray;
+ padding: 4px;
+}
+#saveForm {
+ position: relative;
+ float: left;
+ font-family: Georgia, serif;
+ font-size: 12px;
+ padding: 10px 0px 0px 18px;
}
/* related to NodeGraph & li/ul */
-ul{
- padding : 0;
- margin : 0;
- background-color : white;
+ul {
+ padding: 0;
+ margin: 0;
+ background-color: white;
}
-
-li{
- list-style : none;
+li {
+ list-style: none;
}
-
li, .file {
- font-size : 12px;
- margin: 0;
- cursor : pointer;
- background-color : white;
- font-family : Georgia, serif;
- border-bottom : 1px solid #cccccc;
- padding : 5px 10px 5px 10px;
-}
-
-textarea, input{
- outline:none;
+ font-size: 12px;
+ margin: 0;
+ cursor: pointer;
+ background-color: white;
+ font-family: Georgia, serif;
+ border-bottom: 1px solid #cccccc;
+ padding: 5px 10px 5px 10px;
+}
+.className {
+ font-size: 12px;
+ margin: 0;
+ cursor: pointer;
+ background-color: white;
+ font-family: Georgia, serif;
+ border-bottom: 1px solid #cccccc;
+ padding: 5px 10px 5px 10px;
+}
+textarea, input {
+ outline: none;
+}
+.highlight {
+ background-color: #FFFF88;
}
View
@@ -11,6 +11,7 @@
<script type="text/javascript" src="js/libs/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/znode/nodegraph.js"></script>
<script type="text/javascript" src="js/znode/ui.js"></script>
+ <script type="text/javascript" src="js/libs/jquery.highlight.js"></script>
</head>
<body>
<div id="openWin">
@@ -19,6 +20,12 @@
</div>
<div id="files"></div>
</div>
+ <div id="openComp">
+ <div id="fileTitle">
+ Please select a class name:
+ </div>
+ <div id="classNames"></div>
+ </div>
<div id="overlay"></div>
<div id="controls">
<div id="logo" >
@@ -33,6 +40,15 @@
<div id="clear" class="btn">
Clear All
</div>
+ <div id="inheritance" class="btn">
+ Inheritance
+ </div>
+ <div id="composition" class="btn">
+ Composition
+ </div>
+ <div id="resources" class="btn">
+ Resources
+ </div>
<div id="help" class="btn">
Help
</div>
View
@@ -24,7 +24,6 @@ function NodeGraph() {
paper.setSize(win.width(), win.height() - topHeight);
}
-
win.resize(resizePaper);
resizePaper();
@@ -40,7 +39,7 @@ function NodeGraph() {
});
menu.hide();
- canvas.append("<ul id='vsmenu'><li>Inheritance<\/li><li>Composition<\/li><li>Global<\/li><li>Functions<\/li><li>Resources<\/li><li>Exit<\/li><\/ul>");
+ canvas.append("<ul id='vsmenu'><li>Global<\/li><li>Functions<\/li><li>Exit<\/li><\/ul>");
var vsmenu = $("#vsmenu");
vsmenu.css({
"position" : "absolute",
@@ -98,7 +97,7 @@ function NodeGraph() {
// jQuery code goes here.
viewName = viewName.toLowerCase();
if (viewName == 'inheritance'){
- // add parsed data
+ // add parsed data buildInher...
$('#inher').dialog({
autoOpen: true,
show: "blind",
@@ -113,10 +112,23 @@ function NodeGraph() {
});
}
if (viewName == 'global'){
+ var textArea = $('textarea');
+ var content = "";
+ textArea.each(function(){
+ content = $(this).val();
+ //$('#global').append("<p>" + content + "</p>");
+ $.each(content.split(/[\r\n]+/), function(i, line) {
+ $('<p>').text(line).appendTo('#global') })
+ });
+ //$('#global').text(content); // copy textarea context to dialog
+ $('#global').highlight(g_selText); // highlight the selected text.
$('#global').dialog({
autoOpen: true,
show: "blind",
- hide: "explode"
+ hide: "explode",
+ close: function (event, ui) {
+ $('#global').text("");
+ }
});
}
if (viewName == 'functions'){
@@ -399,14 +411,16 @@ function NodeGraph() {
"top" : yp,
"width" : w,
"height" : h,
- "border" : "1px solid gray",
- "background-color" : "white"
+ "border" : "1px solid black",
+ //"background-color" : "white"
+ "background" : "-webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036))",
+ "-webkit-border-radius" : "10px"
});
n.css("z-index", zindex++);
n.mouseup(function(){
- var selText = GetSelectedText();
- if (selText.length != 0){
+ g_selText = GetSelectedText();
+ if (g_selText.length != 0){
vsmenu.css({"left":mouseX - 10, "top":mouseY});
vsmenu.show();
}
@@ -437,7 +451,8 @@ function NodeGraph() {
"padding" : "0",
"margin" : "0",
"font-size" : "9px",
- "cursor" : "pointer"
+ "cursor" : "pointer",
+ "-webkit-border-radius" : "10px"
});
if(!noDelete) {
@@ -455,6 +470,7 @@ function NodeGraph() {
"cursor" : "pointer",
"font-size" : "7px",
"background-color" : "gray",
+ "-webkit-border-radius" : "10px",
"z-index" : 100
});
ex.hover(function() {
@@ -476,11 +492,13 @@ function NodeGraph() {
txt.css({
"width" : nodeWidth - 5,
"height" : nodeHeight - bar.height() - 5,
- "resize" : "none",
- "overflow" : "hidden",
+ "resize" : "auto",
+ "overflow" : "auto",
"font-size" : "12px",
"font-family" : "sans-serif",
"border" : "none",
+ "background" : "-webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036))",
+ "-webkit-border-radius" : "10px",
"z-index" : 4
});
@@ -496,10 +514,11 @@ function NodeGraph() {
"height" : "10px",
"left" : nodeWidth - 11,
"top" : nodeHeight - 11,
- "background-color" : "white",
+ "background-color" : "#F2F291",
"font-size" : "1px",
"border" : "1px solid gray",
- "cursor" : "pointer"
+ "cursor" : "pointer",
+ "-webkit-border-radius" : "3px"
});
n.append("<div class='left'>");
Oops, something went wrong.

0 comments on commit 642bf1d

Please sign in to comment.