From 89bf91e68f1fac2d88eb97c7fe324753a5ef76cf Mon Sep 17 00:00:00 2001
From: timb <opuscule@gmail.com>
Date: Fri, 24 Jan 2014 07:58:46 -0800
Subject: a try at error highlighting

---
 js/error.highlight.js | 160 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 js/error.highlight.js

(limited to 'js/error.highlight.js')

diff --git a/js/error.highlight.js b/js/error.highlight.js
new file mode 100644
index 0000000..b7c583e
--- /dev/null
+++ b/js/error.highlight.js
@@ -0,0 +1,160 @@
+(function(){
+
+var html
+var textarea
+var dom = {}
+var style = {}
+var pos = {}
+// i use this because a plain <br> collapses vertically sometimes...
+var zero_width_space = '&#xfeff;'
+
+var off = function(){
+  dom.highlight.style.display = 'none'
+}
+
+var height_until_error = 0;
+var height_with_error = 0;
+
+var on = function(line_num){
+  pos = textarea.getBoundingClientRect()
+  var text = textarea.value;
+
+  var lines = text.split('\n')
+  var lines_until_error = lines.slice(0, line_num)
+  var line_with_error = lines[line_num]
+
+  if (lines_until_error.length === 1)
+    dom.textmeasure.innerHTML = lines_until_error + zero_width_space
+  else
+    dom.textmeasure.innerHTML = lines_until_error.join('<br>' + zero_width_space)
+
+  height_until_error = dom.textmeasure.offsetHeight
+
+  dom.textmeasure.innerHTML = line_with_error + zero_width_space
+
+  height_with_error = dom.textmeasure.offsetHeight
+
+  reposition_highlight()
+
+};
+
+var reposition_highlight = function(){
+  dom.highlight.style.display = 'block'
+
+  var bounds_bottom = pos.top + pos.height
+
+  if (textarea.scrollHeight > textarea.clientHeight) // scrollbar exists
+    dom.highlight.style.width = pos.width - scrollbar_width + "px"
+  else
+    dom.highlight.style.width = pos.width + "px"
+
+  dom.highlight.style.left = pos.left + "px"
+
+  var y_pos = pos.top + height_until_error - textarea.scrollTop
+
+  dom.highlight.style.top = y_pos + html.scrollTop + "px"
+
+  var height_of_highlight = height_with_error;
+
+  // nice clip on bottom
+  if (y_pos + height_of_highlight > bounds_bottom)
+    height_of_highlight = Math.max(0, bounds_bottom - y_pos)
+  // crap clip on top
+  if (y_pos < pos.top)
+    height_of_highlight = 0
+
+  dom.highlight.style.height = height_of_highlight + "px"
+}
+
+var calc_textarea_style = function(){
+  var $textarea = $("#shader")
+  textarea = $textarea[0]
+  // GG = textarea
+  
+  var props = ['lineHeight', 'fontFamily', 'fontSize', 'padding', 'margin', 'borderWidth', 'width']
+
+  for (var i=0, p; p=props[i]; i++){
+    style[p] = $textarea.css(p)
+  }
+  console.log(style)
+
+}
+
+
+var calc_scrollbar_width = function() {
+    var outer = document.createElement("div");
+    outer.style.visibility = "hidden";
+    outer.style.width = "100px";
+    document.body.appendChild(outer);
+    
+    var width_no_scroll = outer.offsetWidth;
+    // force scrollbars
+    outer.style.overflow = "scroll";
+    
+    // add innerdiv
+    var inner = document.createElement("div");
+    inner.style.width = "100%";
+    outer.appendChild(inner);        
+    
+    var width_with_scroll = inner.offsetWidth;
+    // remove divs
+    outer.parentNode.removeChild(outer);
+    
+    return width_no_scroll - width_with_scroll;
+}
+
+var create_el_textmeasure = function(){
+  var el = dom.textmeasure = document.createElement('div')
+  el.id = 'textmeasure'
+  var s = el.style
+  for (var key in style)
+    s[key] = style[key]
+
+  s.wordWrap = 'break-word'
+  s.wordBreak = 'break-all' 
+  s.border = '1px solid red'
+  s.padding = '0'
+  s.display = 'block'
+  s.position = 'absolute'
+  s.left = "-5000px"
+  document.body.appendChild(el)
+}
+
+var create_el_highlight = function(){
+  var el = dom.highlight = document.createElement('div')
+  var s = el.style
+  for (var key in style)
+    s[key] = style[key]
+  
+  s.pointerEvents = 'none'
+  s.opacity = '0.2'
+  s.backgroundColor = '#f00'
+  s.position = 'absolute'
+  s.lineHeight = '0'
+  s.fontSize = '0'
+  s.padding = '0'
+  s.borderWidth = '0'
+  s.display = 'block'
+  document.body.appendChild(el)
+}
+
+var scrollbar_width = 0;
+var init = function(){
+  calc_textarea_style()
+  create_el_highlight()
+  create_el_textmeasure()
+  scrollbar_width = calc_scrollbar_width()
+  textarea.addEventListener('scroll', reposition_highlight)
+  html = document.querySelector('html')
+}
+
+error_highlight = {
+  init: init,
+  on: on,
+  off: off
+}
+
+
+})();
+
+error_highlight.init()
-- 
cgit v1.2.3-70-g09d2


From e35a55d8dbc8696b0c5ab2f26cc4801957324394 Mon Sep 17 00:00:00 2001
From: timb <opuscule@gmail.com>
Date: Fri, 24 Jan 2014 23:44:35 -0800
Subject: cleanup, error highlight less jumpy

---
 js/error.highlight.js | 37 ++++++++++++++-----------------------
 js/shader.js          |  6 ++----
 2 files changed, 16 insertions(+), 27 deletions(-)

(limited to 'js/error.highlight.js')

diff --git a/js/error.highlight.js b/js/error.highlight.js
index b7c583e..0b478e2 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -1,23 +1,21 @@
 (function(){
 
-var html
-var textarea
 var dom = {}
 var style = {}
 var pos = {}
 // i use this because a plain <br> collapses vertically sometimes...
 var zero_width_space = '&#xfeff;'
+var height_until_error = 0;
+var height_with_error = 0;
+var scrollbar_width = 0;
 
 var off = function(){
   dom.highlight.style.display = 'none'
 }
 
-var height_until_error = 0;
-var height_with_error = 0;
-
 var on = function(line_num){
-  pos = textarea.getBoundingClientRect()
-  var text = textarea.value;
+  pos = dom.textarea.getBoundingClientRect()
+  var text = dom.textarea.value;
 
   var lines = text.split('\n')
   var lines_until_error = lines.slice(0, line_num)
@@ -35,24 +33,21 @@ var on = function(line_num){
   height_with_error = dom.textmeasure.offsetHeight
 
   reposition_highlight()
-
-};
+}
 
 var reposition_highlight = function(){
-  dom.highlight.style.display = 'block'
 
   var bounds_bottom = pos.top + pos.height
 
-  if (textarea.scrollHeight > textarea.clientHeight) // scrollbar exists
+  if (dom.textarea.scrollHeight > dom.textarea.clientHeight) // scrollbar exists
     dom.highlight.style.width = pos.width - scrollbar_width + "px"
   else
     dom.highlight.style.width = pos.width + "px"
 
   dom.highlight.style.left = pos.left + "px"
 
-  var y_pos = pos.top + height_until_error - textarea.scrollTop
-
-  dom.highlight.style.top = y_pos + html.scrollTop + "px"
+  var y_pos = pos.top + height_until_error - dom.textarea.scrollTop
+  dom.highlight.style.top = y_pos + dom.html.scrollTop + "px"
 
   var height_of_highlight = height_with_error;
 
@@ -64,20 +59,19 @@ var reposition_highlight = function(){
     height_of_highlight = 0
 
   dom.highlight.style.height = height_of_highlight + "px"
+
+  dom.highlight.style.display = 'block'
 }
 
 var calc_textarea_style = function(){
   var $textarea = $("#shader")
-  textarea = $textarea[0]
-  // GG = textarea
+  dom.textarea = $textarea[0]
   
   var props = ['lineHeight', 'fontFamily', 'fontSize', 'padding', 'margin', 'borderWidth', 'width']
 
   for (var i=0, p; p=props[i]; i++){
     style[p] = $textarea.css(p)
   }
-  console.log(style)
-
 }
 
 
@@ -91,13 +85,11 @@ var calc_scrollbar_width = function() {
     // force scrollbars
     outer.style.overflow = "scroll";
     
-    // add innerdiv
     var inner = document.createElement("div");
     inner.style.width = "100%";
     outer.appendChild(inner);        
     
     var width_with_scroll = inner.offsetWidth;
-    // remove divs
     outer.parentNode.removeChild(outer);
     
     return width_no_scroll - width_with_scroll;
@@ -138,23 +130,22 @@ var create_el_highlight = function(){
   document.body.appendChild(el)
 }
 
-var scrollbar_width = 0;
 var init = function(){
+  dom.html = document.querySelector('html')
   calc_textarea_style()
   create_el_highlight()
   create_el_textmeasure()
   scrollbar_width = calc_scrollbar_width()
   textarea.addEventListener('scroll', reposition_highlight)
-  html = document.querySelector('html')
 }
 
+// exports
 error_highlight = {
   init: init,
   on: on,
   off: off
 }
 
-
 })();
 
 error_highlight.init()
diff --git a/js/shader.js b/js/shader.js
index 1d2e3e5..4a6e950 100644
--- a/js/shader.js
+++ b/js/shader.js
@@ -4,14 +4,11 @@ var shader_build = function(){
   try {
     var fn = new Function('x','y','t','d', fn_str)
     shader = fn
-    error_highlight.off()
     shade = shade_error_handling
   } catch (e) {
     try {
       acorn.parse(fn_str)
-    } catch(e){
-        /* loc: {column: 0, line: 1} */
-        /* line is 1-based for some goddamn reason*/
+    } catch(e){ //e.loc = {column: 0, line: 1} line is 1-based
       error_highlight.on(e.loc.line-1)
     }
     throw Error ("Shader compilation error")
@@ -89,6 +86,7 @@ function shade_error_handling(frame, t){
   }
   cc.putImageData(imgData,0,0)
   shade = shade_no_error_handling
+  error_highlight.off()
 }
 
 shade = shade_error_handling
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From e873e6c1b0d2f4e06b94138a22d0d4292c52a037 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 25 Jan 2014 23:42:19 -0500
Subject: logging, error fix, css

---
 js/api/set.js         |  4 ++++
 js/error.highlight.js |  2 +-
 shader-api.html       | 10 +++++++++-
 shader-picker.html    | 10 ++++++----
 4 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'js/error.highlight.js')

diff --git a/js/api/set.js b/js/api/set.js
index 92cc071..8732c87 100644
--- a/js/api/set.js
+++ b/js/api/set.js
@@ -10,14 +10,17 @@ function save_shader(){
 	}
 	var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
 
+	status('saving..')
 	console.log(params)
 	$.post("http://asdf.us/cgi-bin/im/shader/save", params, function(resp){
 		console.log(resp);
 		data = JSON.parse(resp)
 		if (data.ERROR){
+			status('error saving shader')
 			alert(data.ERROR)
 			return false
 		}
+		status('uploading thumbnail')
 		if (! shader_id_root) {
 			shader_id_root = data.id;
 		}
@@ -40,6 +43,7 @@ function save_shader(){
 			contentType: false,
 		}).done(function(resp){
 			console.log(resp);
+			status('')
 			var data = JSON.parse(resp)
 			if (data.success) {
 				$shader.find("img").attr("src", data.url)
diff --git a/js/error.highlight.js b/js/error.highlight.js
index 0b478e2..f46d0ec 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -136,7 +136,7 @@ var init = function(){
   create_el_highlight()
   create_el_textmeasure()
   scrollbar_width = calc_scrollbar_width()
-  textarea.addEventListener('scroll', reposition_highlight)
+  dom.textarea.addEventListener('scroll', reposition_highlight)
 }
 
 // exports
diff --git a/shader-api.html b/shader-api.html
index 416f21a..b860093 100644
--- a/shader-api.html
+++ b/shader-api.html
@@ -16,6 +16,13 @@ form { display: inline-block; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 a { color: #00f; }
+#help { float: right; }
+.dragging { cursor: -webkit-grabbing !important; }
+#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#instructions.dragging iframe { pointer-events: none; }
+#instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+
 </style>
 </head>
 <body>
@@ -35,6 +42,7 @@ a { color: #00f; }
 -->
 
 <div id="shader-api">
+	<button id="help">help</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
 	<button id="fetch-history" disabled>history</button>
@@ -74,6 +82,7 @@ a { color: #00f; }
 </body>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
 <script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
@@ -122,4 +131,3 @@ function init(){
 
 </script>
 </html>
--
\ No newline at end of file
diff --git a/shader-picker.html b/shader-picker.html
index 0896609..7efe39f 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -130,6 +130,12 @@ a { color: #00f; }
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
 <script type="text/javascript">
 
 var cc = cq(0,0).appendTo("#workspace")
@@ -174,10 +180,6 @@ function init(){
 	requestAnimationFrame(animate)
 }
 
-</script>
-<script type="text/html" id="frame-template">
-<button class="remove">x</button>
-<span class="frame"></span>
 </script>
 </html>
 
-- 
cgit v1.2.3-70-g09d2


From 50749723960eee4b15e3610e16931f5f579de29b Mon Sep 17 00:00:00 2001
From: timb <opuscule@gmail.com>
Date: Tue, 28 Jan 2014 10:31:51 -0800
Subject: fix error position when scrolling shader-combo

---
 js/error.highlight.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'js/error.highlight.js')

diff --git a/js/error.highlight.js b/js/error.highlight.js
index f46d0ec..c2d3947 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -47,7 +47,7 @@ var reposition_highlight = function(){
   dom.highlight.style.left = pos.left + "px"
 
   var y_pos = pos.top + height_until_error - dom.textarea.scrollTop
-  dom.highlight.style.top = y_pos + dom.html.scrollTop + "px"
+  dom.highlight.style.top = y_pos + dom.html.scrollTop + dom.body.scrollTop + "px"
 
   var height_of_highlight = height_with_error;
 
@@ -132,6 +132,7 @@ var create_el_highlight = function(){
 
 var init = function(){
   dom.html = document.querySelector('html')
+  dom.body = document.querySelector('body')
   calc_textarea_style()
   create_el_highlight()
   create_el_textmeasure()
-- 
cgit v1.2.3-70-g09d2