some code cleanup, and first attempt at array settings inside canvas dialog

pd/nw/dialog_canvas.css

+@font-face {
+    font-family: "DejaVu Sans Mono";
+    src: url("DejaVuSansMono.ttf");
+}
+
+body {
+    font-family:Verdana;
+    margin: 0px;
+}
+
+fieldset {
+    font-family:Georgia;
+    background-color:#eeeeee;
+    border-radius:3px;
+    border:2px solid black;
+    margin-left:auto;
+    margin-right:auto;
+    padding: 10px;
+}
+
+input[type="text"]{
+    width:3em;
+}
+
+input[type="number"]{
+    width:3em;
+}
+
+div.x-scale {
+    padding: 3px;
+    text-align: center;
+}
+
+div.gop-range {
+}
+
+div.y1 {
+    text-align: center;
+    padding: 3px;
+}
+
+div.x1 {
+    text-align: center;
+    padding: 3px;
+}
+
+div.y2 {
+    text-align: center;
+    padding: 3px;
+}
+
+
+.disabled {
+    color: #aaa;
+}
+
+.prop{
+}
+
+.hidden {
+    display: none;
+}
+
+.container{
+    display: none;
+}
+
+body {
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+text {
+    // fill: red;
+    cursor: default;
+}
+
+.selected_border {
+    stroke: blue;
+    stroke-dasharray: none;
+    stroke-width: 1;
+}
+
+label {
+    text-align: right;
+//    margin-right: auto;
+//    margin-left: auto;
+}
+
+.pair {
+    width: 75%;
+    text-align: left;
+    align: left;
+}
+
+.item1 {
+    width: 50%;
+}
+
+.item2 {
+    width: 50%;
+}
+
+input[name="x-offset"] {
+    width: 2em;
+}
+
+input[name="y-offset"] {
+    width: 2em;
+}
+
+input[name="send-symbol"] {
+    width: 8em;
+}
+
+input[name="receive-symbol"] {
+    width: 8em;
+}
+
+input[name="label"] {
+    width: 8em;
+}
+
+input[name="font-size"] {
+    width: 3em;
+}
+
+.submit_buttons {
+    text-align: center;
+    padding: 8px;
+}

pd/nw/dialog_iemgui.css

+@font-face {
+    font-family: "DejaVu Sans Mono";
+    src: url("DejaVuSansMono.ttf");
+}
+
+body {
+    font-family:Verdana;
+    margin: 0px;
+}
+
+fieldset {
+    font-family:Georgia;
+    background-color:#eeeeee;
+    border-radius:3px;
+    border:2px solid black;
+    margin-left:auto;
+    margin-right:auto;
+    padding: 10px;
+}
+
+input[type="text"]{
+    width:3em;
+}
+
+input[type="number"]{
+    width:3em;
+}
+
+
+.prop{
+}
+
+.hidden {
+    display: none;
+}
+
+.container{
+    display: none;
+}
+
+
+
+body {
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+text {
+    // fill: red;
+    cursor: default;
+}
+
+.selected_border {
+    stroke: blue;
+    stroke-dasharray: none;
+    stroke-width: 1;
+}
+
+label {
+    text-align: right;
+//    margin-right: auto;
+//    margin-left: auto;
+}
+
+.pair {
+    width: 75%;
+    text-align: left;
+    align: left;
+}
+
+.item1 {
+    width: 50%;
+}
+
+.item2 {
+    width: 50%;
+}
+
+input[name="x-offset"] {
+    width: 2em;
+}
+
+input[name="y-offset"] {
+    width: 2em;
+}
+
+input[name="send-symbol"] {
+    width: 8em;
+}
+
+input[name="receive-symbol"] {
+    width: 8em;
+}
+
+input[name="label"] {
+    width: 8em;
+}
+
+input[name="font-size"] {
+    width: 3em;
+}
+
+.submit_buttons {
+    text-align: center;
+    padding: 8px;
+}

pd/nw/index.html

@@ -494,7 +494,8 @@ function nw_create_window(cid, type, width, height, xpos, ypos, menu_flag, resiz
     canvas_string, dir, dirty_flag, cargs, attr_array) {
         // todo: make a separate way to format the title for OSX
     var my_title =  pdgui.format_window_title(canvas_string, dirty_flag, cargs, dir);
-    var my_file = (type === 'pd-canvas' ? 'pdcanvas.html' : 'pdproperties.html');
+    var my_file =
+        type === 'pd_canvas' ? 'pd_canvas.html' : 'dialog_' + type + '.html';
 
     var new_win = nw.Window.open(my_file, {
         title: my_title,
@@ -506,7 +507,8 @@ function nw_create_window(cid, type, width, height, xpos, ypos, menu_flag, resiz
         x: xpos,
         y: ypos
     });
-    var eval_string = "register_canvas_id('" + cid + "', [" + attr_array + "]);";
+    pdgui.gui_post("attr_array is " + attr_array);
+    var eval_string = "register_canvas_id(" + JSON.stringify(cid) + ", " + JSON.stringify(attr_array) + ");";
     pdgui.gui_post("eval string is " + eval_string);
     if (attr_array !== null) {
         pdgui.gui_post("attr_array is " + attr_array.toString());

pd/nw/locales/en/translation.json

@@ -210,5 +210,64 @@
     "forums_tt": "Open a link in a browser for the Pd Forum",
     "irc": "IRC Chat",
     "irc_tt": "Open a link in a browser for IRC Chat"
+  },
+  "canvas": {
+    "prop": {
+      "heading": {
+        "gop": "appearance on parent",
+        "data_scaling": "data scaling",
+        "size": "size",
+        "viewbox_offsets": "viewbox offsets",
+        "arrays": "array options"
+      },
+      "gop": "graph on parent",
+      "gop_tt": "show the inner contents of this canvas in a rectangle on the containing canvas",
+      "hide_name": "hide object name and arguments",
+      "hide_name_tt": "blah blah blah",
+      "gop_0": "Object",
+      "gop_1": "Window",
+      "gop_2": "Window (no text)",
+      "x_pix": "width",
+      "x_pix_tt": "width of the object",
+      "y_pix": "height",
+      "y_pix_tt": "height of the object",
+      "x_scale": "x scale",
+      "x_scale_tt": "horizontal scaling factor",
+      "y_scale": "y scale",
+      "y_scale_tt": "vertical scaling factor",
+      "x_margin": "x offset",
+      "x_margin_tt": "horizontal offset into the subpatch for the view area",
+      "y_margin": "y offset",
+      "y_margin_tt": "vertical offset into the subpatch for the view area",
+      "x1": "left",
+      "x1_tt": "lowest x value (left edge)",
+      "x2": "right",
+      "x2_tt": "highest x value (right edge)",
+      "y1": "top",
+      "y1_tt": "highest y value (top)",
+      "y2": "bottom",
+
+      "array_name": "name",
+      "array_name_tt": "receiver name for the array",
+      "array_size": "size",
+      "array_size_tt": "number of elements in the array",
+      "array_polygon": "polygon",
+      "array_polygon_tt": "the array trace is drawn as a polygon",
+      "array_points": "points",
+      "array_points_tt": "the array trace is drawn as horizontal line segments",
+      "array_bezier": "Bezier curve",
+      "array_bezier_tt": "the array trace is drawn as a Bezier curve",
+      "array_bars": "bar graph",
+      "array_bars_tt": "each element of the array is drawn as a bar in a bar graph",
+      "array_save": "save contents",
+      "array_save_tt": "save array contents with this patch",
+      "array_jump": "jump on click",
+      "array_jump_tt": "update the element to the position of the click",
+      "array_style": "draw as:",
+      "array_outline": "outline color",
+      "array_outline_tt": "color for outline around the bars",
+      "array_fill": "fill color",
+      "array_fill_tt": "inner color of the bars"
+    }
   }
 }

pd/nw/pd_canvas.css

+@font-face {
+    font-family: "DejaVu Sans Mono";
+    src: url("DejaVuSansMono.ttf");
+}
+
+body {
+    margin: 0px;
+    font-family: "DejaVu Sans Mono";
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+text {
+    // fill: red;
+    cursor: default;
+}
+
+.selected_border {
+    stroke: blue;
+    stroke-dasharray: none;
+    stroke-width: 1;
+}
+
+/* a message when it flashes on a mouse-click */
+.msg.flashed .border {
+    stroke-width: 4;
+}
+
+/* Border color for selected objects
+   In plain English:
+       Any element with a class 'border' that is contained inside
+       a parent element that is not in class 'gop' but is
+       in class 'selected' (whew!)
+*/
+:not(.gop).selected .border {
+    stroke: blue;
+}
+
+.selected_line {
+    stroke: blue;
+}
+
+.broken_border {
+    fill: #f7f7f7;
+    stroke: red;
+    stroke-dasharray: 3 2;
+}
+
+.xlet_control {
+    stroke: red;
+    fill: gray;
+//    stroke-width: 1;
+}
+
+.xlet_signal {
+    stroke: green;
+    fill: green;
+    stroke-width: 1;
+}
+
+.xlet_iemgui {
+    stroke: black;
+    fill: black;
+    stroke-width: 1;
+}
+
+.iemgui_label_selected {
+    fill: blue;
+}
+
+@-webkit-keyframes fizzle {
+    0% {
+        stroke-width: 1;
+        stroke-opacity: 1;
+        x: 0;
+        rx: 1;
+        ry: 1;
+    }
+    100% {
+        stroke-width: 20;
+        stroke-opacity: 0.2;
+        x: 100;
+        rx: 50;
+        ry: 50;
+    }
+}
+
+.xlet_selected {
+    stroke: purple !important;
+    -webkit-animation: fizzle 0.5s linear 1;
+}
+
+//.xlet:hover {
+//    stroke: red;
+//}

pd/nw/pdgui.js

@@ -993,7 +993,7 @@ function gui_canvas_new(cid, width, height, geometry, editable, name, dir, dirty
     }
     last_loaded = cid;
     // Not sure why resize and topmost are here-- but we'll pass them on for the time being...
-    patchwin[cid] = nw_create_window(cid, 'pd-canvas', width, height, xpos, ypos, menu_flag,
+    patchwin[cid] = nw_create_window(cid, 'pd_canvas', width, height, xpos, ypos, menu_flag,
         resize[cid], topmost[cid], my_canvas_color, name, dir, dirty_flag, cargs, null);
      
     // initialize variable to reflect that this window has been opened
@@ -1006,6 +1006,14 @@ function canvas_map(name) {
     pdsend(name + " map 1");
 }
 
+function gui_canvas_erase_all_gobjs(cid) {
+    var top = get_item(cid, 'patchsvg');
+    var elem;
+    while (elem = top.firstChild) {
+        top.removeChild(elem);
+    }
+}
+
 exports.canvas_map = canvas_map;
 
 /*    
@@ -1709,16 +1717,29 @@ exports.connect = connect;
 
 // can be removed.
 
+var plums = require('string_decoder').StringDecoder;
+var rufus = new plums('utf8');
+
 var nextCmd = ""; // Build up a command across lines (or buffers)
+var cmdHeader = 0;
 
 function init_socket_events () {
 	client.on('data', function(data) {
 	//    console.log('DATA: ' + data);
 	      var dataStr = data.toString('utf-8');
+
+              var mumps = rufus.write(data);
+              if (rufus.end() !== "") {
+                  console.log("fuckkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk, we got hitchikers... " + rufus.end());
+              }
+
+
 //	      console.log("The whole buffer is " + dataStr);
+//              if (nextCmd !== "") {
+//                  console.log("fuckkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk nextCmd is " + nextCmd);
+//              }
 	      var arr = dataStr.split("\n");
 	      var arrLen = arr.length;
-	      var cmdHeader = 0;
 	      for (var i = 0; i < arrLen; i++) {
 		  var prefix = arr[i].substring(0, 2);
 		  if (prefix == 'nw' || prefix == 'nn') {
@@ -1733,12 +1754,12 @@ function init_socket_events () {
 		  }
 		  // check if we end with a semicolon followed by a newline
 		  if (nextCmd.slice(-1) === ";" && nextCmd.slice(-2) !== '\\') {
-// console.log("raw cmd is: " + nextCmd);
-		      nextCmd = nextCmd.replace(/\n/g, "\\n");
+//console.log("raw cmd is: " + nextCmd);
+//		      nextCmd = nextCmd.replace(/\n/g, "\\n");
 //		      nextCmd = nextCmd.replace(/'/g, "\\\'");
 		      var selector = nextCmd.slice(0, nextCmd.indexOf(" "));
 		      var args = nextCmd.slice(selector.length + 1, -1);
-//                      console.log(selector + '(' + args + ');');
+//                      console.log("About to eval: " + selector + '(' + args + ');');
                       eval(selector + '(' + args + ');');
 		      nextCmd = "";
 		      cmdHeader = 0;
@@ -1837,22 +1858,25 @@ function gui_configure_item(cid, tag, attributes) {
 }
 
 // Most of these map either to pd.tk procs, or in some cases Tk canvas subcommands
-function gui_text_create_gobj(cid, tag, xpos, ypos) {
+function gui_text_create_gobj(cid, tag, type, xpos, ypos, is_toplevel) {
     var svg = get_item(cid, "patchsvg"); // "patchsvg" is id for the svg in the DOM
     // Put objects on half-pixels to make them crisp (look in to the difference between
     // this and the object-rendering 'crispEdges' attribute)
     xpos += 0.5;
     ypos += 0.5;
-    var transform_string = 'translate(' + xpos + ',' + ypos + ')';
+    var transform_string = 'matrix(1,0,0,1,' + xpos + ',' + ypos + ')';
     var g = create_item(cid, 'g', {
             id: tag + 'gobj',
-            transform: transform_string
+            transform: transform_string,
+            class: type + (is_toplevel !== 0 ? '' : ' gop')
     });
     svg.appendChild(g);
+// hm... why returning g and not the return value of appendChild?
+//    console.log("create gobj tag is " + tag + " and ret is " + g);
     return g;
 }
 
-function gui_text_drawborder(cid, tag, isbroken, x1, y1, x2, y2) {
+function gui_text_drawborder(cid, tag, bgcolor, isbroken, x1, y1, x2, y2) {
     var g = get_gobj(cid, tag);
     // isbroken means either
     //     a) the object couldn't create or
@@ -1863,9 +1887,11 @@ function gui_text_drawborder(cid, tag, isbroken, x1, y1, x2, y2) {
         stroke: 'black',
         fill: 'none',
         'shape-rendering': 'optimizeSpeed',
-        id: tag + 'border',
-        class: (isbroken ? 'broken_border' : '')
+        class: 'border'
     });
+    if (isbroken === 1) {
+        rect.classList.add('broken_border');
+    }
     g.appendChild(rect);
 }
 
@@ -1898,6 +1924,11 @@ function gui_canvas_drawio(cid, parenttag, tag, x1, y1, x2, y2, basex, basey, ty
     gui_post("the tag for this XLET is " + tag);
 }
 
+function gui_canvas_redraw_io(cid, parenttag, tag, x, type, i, basex) {
+    var xlet = get_item(cid, tag + type + i); 
+    configure_item(xlet, { x: x - basex});
+}
+
 function gui_eraseio(cid, tag) {
     gui_post("the tag for this bout-to-ba-leted XLET is " + tag);
     var xlet = get_item(cid, tag);
@@ -1943,21 +1974,29 @@ function gui_message_drawborder(cid,tag,width,height) {
         points: p_array.join(),
         fill: 'none',
         stroke: 'black',
-        'stroke-width': 1,
-        id: tag + 'border'
+//        'stroke-width': 1,
+        class: 'border'
+//        id: tag + 'border'
     });
     g.appendChild(polygon);
 }
 
 function gui_message_flash(cid, tag, state) {
-    var b = get_item(cid, tag + 'border');
-    var w;
-    if (state != 0) { w = 4; } else { w = 1; }
-    configure_item(b, { 'stroke-width': w });
+    var g = get_gobj(cid, tag);
+    if (state !== 0) {
+        g.classList.add('flashed');
+    } else {
+        g.classList.remove('flashed');
+    }
+//    var b = get_item(cid, tag + 'border');
+//    var w;
+//    if (state != 0) { w = 4; } else { w = 1; }
+//    configure_item(b, { 'stroke-width': w });
 }
 
 function gui_message_redraw_border(cid,tag,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14) {
-    var b = get_item(cid, tag + 'border');
+    var g = get_gobj(cid, tag);
+    var b = g.querySelector('.border');
     var p_array = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14];
     configure_item(b, {
         points: p_array.join(" "),
@@ -2035,7 +2074,8 @@ function gui_canvas_updateline(cid,tag,x1,y1,x2,y2,yoff) {
     configure_item(cord, { d: d_array.join(" ") });
 }
 
-function gui_text_new(canvasname, myname, type, isselected, x, y, text, font) {
+function gui_text_new(canvasname, myname, type, isselected, left_margin, top_margin,
+    bottom_margin, pix_high, text, font) {
 //    gui_post("font is " + font);
 
     var g = get_gobj(canvasname, myname);
@@ -2044,8 +2084,8 @@ function gui_text_new(canvasname, myname, type, isselected, x, y, text, font) {
         // at the top-right corner of the text's bbox.  SVG uses the baseline.
         // There's probably a programmatic way to do this, but for now-- fudge factors