Commit 08a3de2d authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

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

parent cb07afb7
@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;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dialog_canvas.css">
</head>
<body>
<div class="container noselect">
<form>
<fieldset>
<legend data-i18n="canvas.prop.heading.gop"></legend>
<table class="pairs">
<tr class="display-flags prop hidden" data-i18n="[title]canvas.prop.gop_tt">
<td>
<input type="checkbox" name="gop" value="on">
</td>
<td>
<span id="gop_label" data-i18n="canvas.prop.gop"></span>
</td>
</tr>
<tr class="x-pix prop hidden">
<td>
</td>
<td>
<table>
<tr>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.x_pix_tt">
<span data-i18n="canvas.prop.x_pix"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.x_pix_tt">
<input class="gop_opt" type="text" name="x-pix">
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.y_pix_tt">
<span data-i18n="canvas.prop.y_pix"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.y_pix_tt">
<input class="gop_opt" type="text" name="y-pix">
</td>
</tr>
<tr class="x-margin prop hidden">
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.x_margin_tt">
<span data-i18n="canvas.prop.x_margin"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.x_margin_tt">
<input class="gop_opt" type="text" name="x-margin">
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.y_margin_tt">
<span data-i18n="canvas.prop.y_margin"></span>
</label>
</td>
<td data-i18n="[title]canvas.prop.y_margin_tt">
<input class="gop_opt" type="text" name="y-margin">
</td>
</tr>
</table>
</td>
</tr>
<tr class="display-flags prop">
<td>
</td>
<td>
<label class="gop_opt" data-i18n="[title]canvas.prop.hide_name_tt">
<input class="gop_opt" type="checkbox" name="hide-name" value="on">
<span data-i18n="canvas.prop.hide_name"></span>
</label>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend data-i18n="canvas.prop.heading.data_scaling"></legend>
<div class="x-scale prop hidden">
<label class="no_gop_opt" data-i18n="[title]canvas.prop.x_scale_tt">
<span data-i18n="canvas.prop.x_scale"></span>
<input class="no_gop_opt" type="text" name="x-scale">
</label>
<label class="no_gop_opt" data-i18n="[title]canvas.prop.y_scale_tt">
<span data-i18n="canvas.prop.y_scale"></span>
<input class="no_gop_opt" type="text" name="y-scale">
</label>
</div>
<div class="gop-range">
<div class="y1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.y1_tt">
<span data-i18n="canvas.prop.y1"></span>
<br>
<input class="gop_opt" type="text" name="y1">
</label>
<br>
</div>
<div class="x1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.x1_tt">
<span data-i18n="canvas.prop.x1"></span>
<input class="gop_opt" type="text" name="x1">
</label>
<label class="gop_opt" data-i18n="[title]canvas.prop.x2_tt">
<input class="gop_opt" type="text" name="x2">
<span data-i18n="canvas.prop.x2"></span>
</label>
<br>
</div>
<div class="y2">
<label class="gop_opt" data-i18n="[title]canvas.prop.y2_tt">
<input class="gop_opt" type="text" name="y2">
<br>
<span data-i18n="canvas.prop.y2"></span>
</label>
</div>
</div>
</fieldset>
<fieldset id="arrays" class="hidden">
<legend data-i18n="canvas.prop.heading.arrays"></legend>
<label class="arrays" data-i18n="[title]canvas.prop.array_name">
<select id="arrays_select" class="hidden"></select>
</label>
<div class="array-name prop">
<label class="array-name" data-i18n="[title]canvas.prop.array_name_tt">
<span data-i18n="canvas.prop.array_name"></span>
<input onchange="attr_change(this);" class="array-name" type="text" name="array_name">
</label>
<label class="array-size" data-i18n="[title]canvas.prop.array_size_tt">
<span data-i18n="canvas.prop.array_size"></span>
<input onchange="attr_change(this);" class="array-size" type="text" name="array_size">
</label>
<label class="array-save" data-i18n="[title]canvas.prop.array_save_tt">
<span data-i18n="canvas.prop.array_save"></span>
<input onchange="flag_change(this);" type="checkbox" name="array_save" value="on">
</label>
<label class="array-jump" data-i18n="[title]canvas.prop.array_jump_tt">
<span data-i18n="canvas.prop.array_jump"></span>
<input onchange="flag_change(this);" type="checkbox" name="array_jump" value="on">
</label>
<span data-i18n="canvas.prop.array_style"></span>
<label class="polygon" data-i18n="[title]canvas.prop.array_polygon_tt">
<span data-i18n="canvas.prop.array_polygon"></span>
<input class="array-style"
type="radio"
id="polygon"
value="0"
name="array_style"
onchange="flag_change(this);">
</label>
<label class="points" data-i18n="[title]canvas.prop.array_points_tt">
<span data-i18n="canvas.prop.array_points"></span>
<input class="array-style"
type="radio"
id="points"
value="1"
name="array_style"
onchange="flag_change(this);">
</label>
<label class="bezier-curve" data-i18n="[title]canvas.prop.array_bezier_tt">
<span data-i18n="canvas.prop.array_bezier"></span>
<input class="array-style"
type="radio"
id="bezier"
value="2"
name="array_style"
onchange="flag_change(this);">
</label>
<label class="bar-graph" data-i18n="[title]canvas.prop.array_bars_tt">
<span data-i18n="canvas.prop.array_bars"></span>
<input class="array-style"
type="radio"
id="bar-graph"
value="3"
name="array_style"
onchange="flag_change(this);">
</label>
</div>
<div class="array-fill">
<label data-i18n="[title]canvas.prop.array_fill_tt">
<input onchange="attr_change(this);" type="color" name="array_fill">
<span data-i18n="canvas.prop.array_fill"></span>
</label>
<br>
</div>
<div class="array-outline">
<label data-i18n="[title]canvas.prop.array_outline_tt">
<input onchange="attr_change(this);" type="color" name="array_outline">
<span data-i18n="canvas.prop.array_outline"></span>
</label>
<br>
</div>
<div class="gop-range">
<div class="y1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.y1_tt">
<span data-i18n="canvas.prop.y1"></span>
<br>
<input class="gop_opt" type="text" name="y1">
</label>
<br>
</div>
<div class="x1 prop hidden">
<label class="gop_opt" data-i18n="[title]canvas.prop.x1_tt">
<span data-i18n="canvas.prop.x1"></span>
<input class="gop_opt" type="text" name="x1">
</label>
<label class="gop_opt" data-i18n="[title]canvas.prop.x2_tt">
<input class="gop_opt" type="text" name="x2">
<span data-i18n="canvas.prop.x2"></span>
</label>
<br>
</div>
<div class="y2">
<label class="gop_opt" data-i18n="[title]canvas.prop.y2_tt">
<input class="gop_opt" type="text" name="y2">
<br>
<span data-i18n="canvas.prop.y2"></span>
</label>
</div>
</div>
</fieldset>
<div class="submit_buttons">
<button type="button" onClick="ok()" data-i18n="[title]iem.prop.ok_tt">
<span data-i18n="iem.prop.ok"></span>
</button>
<button type="button" onClick="apply()" data-i18n="[title]iem.prop.apply_tt">
<span data-i18n="iem.prop.apply"></span>
</button>
<button type="button" onClick="cancel()" data-i18n="[title]iem.prop.cancel_tt">
<span data-i18n="iem.prop.cancel"></span>
</button>
</div>
</form>
</div>
<script>
'use strict';
var nw = require('nw.gui');
var pdgui = require('./pdgui.js');
// For translations
var l = pdgui.get_local_string;
console.log("my working dire is " + pdgui.get_pwd());
var pd_object_callback;
// nested arrays of attributes for each garray
// in this canvas
var pd_garray_attrs;
function ok() {
apply();
cancel();
}
// function toggler(evt) {
// evt.value = evt.checked ? 1 : 0;
// }
function flag_change(elem) {
var attr, arrays_select, name, value, flag;
arrays_select = document.getElementById('arrays_select');
attr = pd_garray_attrs[arrays_select.value];
name = elem.name;
// pdgui.gui_post("name is " + name);
// get value from radio group, checked from checkboxes
if (name === 'array_style') {
value = document.querySelector('input[name="array_style"]:checked').value;
pdgui.gui_post("array style found: " + value);
} else {
// '+' for casting boolean to number
value = +elem.checked;
}
// pdgui.gui_post("value is " + value);
flag = attr[attr.indexOf('array_flags') + 1];
pdgui.gui_post("flag before is " + flag);
switch (name) {
case "array_save":
flag &= ~1; // clear the save bit
flag |= value; // set it
break;
case "array_style":
flag &= ~(1 << 2); // clear style bit 2...
flag &= ~(1 << 1); // ... and 1 ...
flag += (2 * value); // set them
break;
case "array_jump":
flag &= ~(1 << 3);
flag += (16 * value);
break;
}
attr[attr.indexOf('array_flags') + 1] = flag;
pdgui.gui_post("array is " + attr);
}
function attr_change(elem) {
var array_index, attr, arrays_select, name;
arrays_select = document.getElementById('arrays_select');
attr = pd_garray_attrs[arrays_select.value];
name = elem.name;
attr[attr.indexOf(name) + 1] = elem.value;
pdgui.gui_post("name is " + elem.name);
pdgui.gui_post("value is " + elem.value);
}
function array_choose(array_index) {
var i, name, value, elem, style_index, style_opts,
array_attr = pd_garray_attrs[array_index];
for (i = 0; i < array_attr.length; i+=2) {
name = array_attr[i];
value = array_attr[i+1];
switch (name) {
case "array_gfxstub": break;
case "array_flags":
// save contents
elem = document.getElementsByName('array_save')[0];
elem.checked = (value & 1) != 0;
// jump on click
elem = document.getElementsByName('array_jump')[0];
elem.checked = (value & 16) != 0;
// draw style
style_opts = document.getElementsByName('array_style');
style_index = (value & 6) >> 1;
elem = style_opts[style_index];
elem.checked = true;
break;
default:
// name, size, fill, and outline
pdgui.gui_post("name is " + name);
elem = document.getElementsByName(name)[0];
elem.value = value;
break;
}
}
}
var arrays_select = document.getElementById('arrays_select');
arrays_select.addEventListener('change', function() {
pdgui.gui_post('changed the thing is ' + this.value);
array_choose(this.value);
});
var gop_label = document.getElementById('gop_label');
gop_label.addEventListener('click', function() {
document.getElementsByName('gop')[0].click();
});
var gop_button = document.getElementsByName('gop')[0];
gop_button.addEventListener('click', function(evt) {
set_gop(this.checked);
});
function update_gop_form(opts, state) {
var elem, i;
for(i = 0; i < opts.length; i++) {
elem = opts[i];
if (elem.type === 'checkbox' ||
elem.type === 'text') {
elem.disabled = state ? false : true;
}
if (state) {
elem.classList.remove('disabled');
} else {
elem.classList.add('disabled');
}
}
}
var gop_click_count = 0;
function show_sane_defaults() {
var w, h, xoff, yoff;
w = document.getElementsByName('x-pix')[0];
h = document.getElementsByName('y-pix')[0];
xoff = document.getElementsByName('x-margin')[0];
yoff = document.getElementsByName('y-margin')[0];
if (w.value === '0' && h.value === '0') {
w.value = 85;
h.value = 60;
xoff.value = 100;
yoff.value = 100;
}
gop_click_count++;
}
function set_gop(state) {
var gop_opts, no_gop_opts;
if (state === true && gop_click_count === 0) {
show_sane_defaults();
}
gop_opts = document.getElementsByClassName('gop_opt');
no_gop_opts = document.getElementsByClassName('no_gop_opt');
update_gop_form(gop_opts, state);
update_gop_form(no_gop_opts, state === false);
}
function substitute_space(arg) {
var fake_space = String.fromCharCode(11);
return arg.split(' ').join(fake_space);
}
function strip_problem_chars(arg) {
var problem_chars = [';', ',', '{', '}', '\\'];
var ret = arg;
for(var i = 0; i < problem_chars.length; i++) {
ret = ret.split(';').join('');
}
return ret;
}
function get_input(name) {
var val = document.getElementsByName(name)[0].value;
return val === 0 ? '0' : val;
}
// get a value from the garray attr array
function get_array_value(name, attrs) {
return attrs[attrs.indexOf(name) + 1];
}
function apply() {
var i, attrs;
pdgui.gui_post("we're applying shits!");
// Note: the "+" casts Boolean to Number
var gop = +document.getElementsByName('gop')[0].checked;
var hide_name = +document.getElementsByName('hide-name')[0].checked;
pdgui.pdsend([pd_object_callback, 'donecanvasdialog',
get_input('x-scale'),
get_input('y-scale'),
(gop + 2 * hide_name),
get_input('x1'),
get_input('y1'),
get_input('x2'),
get_input('y2'),
get_input('x-pix'),
get_input('y-pix'),
get_input('x-margin'),
get_input('y-margin'),
].join(' '));