diff --git a/index.html b/index.html index f06661d..c3bc8d9 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ + @@ -35,13 +36,13 @@ - - - - - - - + + + + + + + Ronin @@ -58,6 +59,6 @@ - + diff --git a/scripts/command.js b/scripts/core/command.js similarity index 100% rename from scripts/command.js rename to scripts/core/command.js diff --git a/scripts/commander.js b/scripts/core/commander.js similarity index 97% rename from scripts/commander.js rename to scripts/core/commander.js index 1da747c..d9f4e71 100644 --- a/scripts/commander.js +++ b/scripts/core/commander.js @@ -61,6 +61,8 @@ function Commander(element,element_input) break; } this.hide(); + + ronin.history.add(content.join(" ")); } this.passive = function(content) diff --git a/scripts/core/cursor.js b/scripts/core/cursor.js new file mode 100644 index 0000000..7a259ab --- /dev/null +++ b/scripts/core/cursor.js @@ -0,0 +1,39 @@ +function Cursor() +{ + this.mode = new Mode_Paint(); + this.position = new Position(); + + this.update = function(event) + { + // if(event.ctrlKey === true){ this.set_mode(new Mode_Guide()); } + // else if(event.altKey === true){ this.set_mode(new Mode_Drag()); } + // else if(event.shiftKey === true){ this.set_mode(new Mode_Paint()); } + // else{ this.set_mode(new Mode_Paint()); } + } + + this.set_mode = function(mode) + { + if(this.mode.name == mode.name){ return; } + this.mode = mode; + document.body.setAttribute("class",this.mode.name); + ronin.widget.update(); + } + + this.mouse_down = function(position) + { + this.position = position; + this.mode.mouse_down(position); + } + + this.mouse_move = function(position) + { + this.position = position; + this.mode.mouse_move(position); + } + + this.mouse_up = function(position) + { + this.position = position; + this.mode.mouse_up(position); + } +} \ No newline at end of file diff --git a/scripts/hint.js b/scripts/core/hint.js similarity index 100% rename from scripts/hint.js rename to scripts/core/hint.js diff --git a/scripts/init.js b/scripts/core/init.js similarity index 88% rename from scripts/init.js rename to scripts/core/init.js index 3195eb6..a2122ec 100644 --- a/scripts/init.js +++ b/scripts/core/init.js @@ -8,9 +8,9 @@ ronin.widget.element = document.getElementById('widget'); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); // Cursor -document.addEventListener('mousedown', function(e){ ronin.cursor.mode.mouse_down(e);}, false); -document.addEventListener('mousemove', function(e){ ronin.cursor.mode.mouse_move(e);}, false); -document.addEventListener('mouseup', function(e){ ronin.cursor.mode.mouse_up(e);}, false); +document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false); +document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false); +document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false); document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false); // Keyboard diff --git a/scripts/keyboard.js b/scripts/core/keyboard.js similarity index 98% rename from scripts/keyboard.js rename to scripts/core/keyboard.js index 4fac81d..5e0fdd2 100644 --- a/scripts/keyboard.js +++ b/scripts/core/keyboard.js @@ -56,6 +56,7 @@ function Keyboard() ronin.hint.update(); ronin.cursor.set_mode(new Mode_Paint()); + ronin.widget.update(); }; this.listen_onkeydown = function(event) diff --git a/scripts/ronin.js b/scripts/core/ronin.js similarity index 91% rename from scripts/ronin.js rename to scripts/core/ronin.js index bca2114..5a8a892 100644 --- a/scripts/ronin.js +++ b/scripts/core/ronin.js @@ -15,6 +15,7 @@ function Ronin() this.stroke = new Stroke("_"); this.vector = new Vector("+"); this.help = new Help("?"); + this.history = new History(";"); this.cursor = new Cursor(); @@ -27,6 +28,9 @@ function Ronin() this.modules[this.stroke.rune] = this.stroke; this.modules[this.vector.rune] = this.vector; this.modules[this.help.rune] = this.help; + this.modules[this.history.rune] = this.history; + + this.cursors = []; this.position_in_canvas = function(e) { diff --git a/scripts/widget.js b/scripts/core/widget.js similarity index 100% rename from scripts/widget.js rename to scripts/core/widget.js diff --git a/scripts/cursor.js b/scripts/cursor.js deleted file mode 100644 index 6c58d32..0000000 --- a/scripts/cursor.js +++ /dev/null @@ -1,35 +0,0 @@ -function Cursor() -{ - this.mode = new Mode_Paint(); - - this.update = function(event) - { - if(event.ctrlKey === true){ this.set_mode(new Mode_Guide()); } - else if(event.altKey === true){ this.set_mode(new Mode_Drag()); } - else if(event.shiftKey === true){ this.set_mode(new Mode_Paint()); } - else{ this.set_mode(new Mode_Paint()); } - } - - this.set_mode = function(mode) - { - if(this.mode.name == mode.name){ return; } - this.mode = mode; - document.body.setAttribute("class",this.mode.name); - ronin.widget.update(); - } - - this.mouse_down = function(event) - { - - } - - this.mouse_move = function(event) - { - - } - - this.mouse_up = function(event) - { - - } -} \ No newline at end of file diff --git a/scripts/modes/mode.guide.js b/scripts/modes/mode.guide.js index 98d9868..0b5a183 100644 --- a/scripts/modes/mode.guide.js +++ b/scripts/modes/mode.guide.js @@ -32,6 +32,7 @@ function Mode_Guide() this.mouse_up = function(event) { + this.live_draw_from = null; commander.element_input.focus(); } } \ No newline at end of file diff --git a/scripts/modes/mode.js b/scripts/modes/mode.js index 079e867..a42b88d 100644 --- a/scripts/modes/mode.js +++ b/scripts/modes/mode.js @@ -9,7 +9,7 @@ function Mode() this.mouse_down = function(event) { - + console.log("??"); } this.mouse_move = function(event) diff --git a/scripts/modes/mode.paint.js b/scripts/modes/mode.paint.js index f32b16a..387a7e0 100644 --- a/scripts/modes/mode.paint.js +++ b/scripts/modes/mode.paint.js @@ -3,36 +3,38 @@ function Mode_Paint() Mode.call(this); this.name = "Paint"; - this.is_drawing = false; - this.mouse_down = function(event) + this.mouse_down = function(position) { this.is_drawing = true; for (i = 0; i < ronin.brush.pointers.length; i++) { ronin.brush.pointers[i].start(); } + + ronin.stroke.new_stroke(); } - this.mouse_move = function(event) + this.mouse_move = function(position) { - if(this.is_drawing === false){return;} - - // this.position = new Position(event.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),event.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top)); - ronin.brush.position = ronin.position_in_canvas(event); - + if(this.is_drawing === false){ return; } + for (i = 0; i < ronin.brush.pointers.length; i++) { ronin.brush.pointers[i].draw(); } + + ronin.stroke.append_stroke(position); } - this.mouse_up = function(event) + this.mouse_up = function(position) { this.is_drawing = false; for (i = 0; i < ronin.brush.pointers.length; i++) { ronin.brush.pointers[i].stop(); } + + ronin.stroke.save_stroke(); } } \ No newline at end of file diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index bb1302b..5a91e14 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -5,10 +5,7 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.position_prev = null; this.angle = null; this.distance = 0; - - this.osc_scale = null; - this.osc_rate = null; - + this.draw = function() { if(!this.position_prev){this.position_prev = this.position(); } @@ -18,12 +15,6 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.distance += position.distance_to(this.position_prev); - // Osc experiment - if(this.osc_rate && this.osc_scale){ - // position.x += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2); - position.y += (Math.sin(this.distance/(25 * this.osc_rate)) * this.osc_scale) - (this.osc_scale/2); - } - ronin.canvas.context().beginPath(); ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y); ronin.canvas.context().lineTo(position.x,position.y); @@ -50,6 +41,8 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.position = function() { + return ronin.cursor.position; + if(this.angle){ var angle_radian = this.angle.degrees * Math.PI / 180; var deltaX = ronin.brush.position.x - this.offset.x; @@ -66,6 +59,10 @@ function Pointer(offset = new Position(), color = new Color('000000')) else if(this.mirror && this.mirror.height > 0){ return new Position((ronin.brush.position.x + this.offset.x), (2 * this.mirror.height) - (ronin.brush.position.y + this.offset.y)); } + + console.log(ronin.brush.position); + console.log(this.offset); + return; return new Position(ronin.brush.position.x + this.offset.x, ronin.brush.position.y + this.offset.y); } diff --git a/scripts/modules/help.js b/scripts/modules/help.js index de96395..68ba397 100644 --- a/scripts/modules/help.js +++ b/scripts/modules/help.js @@ -5,8 +5,11 @@ function Help(rune) this.active = function(cmd) { var w = window.open('about:blank','image from canvas'); - var html = this.view_modules(); - w.document.write("Help
"+html+"
"); + var html = ""; + html += this.view_modules(); + html += this.view_cursors(); + html += "
" + w.document.write("Help"+html+""); } // @@ -31,7 +34,30 @@ function Help(rune) html += "\n" }); - return html; + return "
"+html+"
"; + } + + this.view_cursors = function() + { + html = " Cursors\n\n"; + // Object.keys(ronin.modules).forEach(function (key) { + // html += key+" "+ronin.modules[key].constructor.name+"\n"; + // html += "" + // for (i = 0; i < ronin.modules[key].parameters.length; i++) { + // html += " "+pad(ronin.modules[key].parameters[i].name,14); + // html += pad(new ronin.modules[key].parameters[i]().example,14)+" \n"; + // } + // for (i = 0; i < ronin.modules[key].variables.length; i++) { + // html += " "+pad(ronin.modules[key].variables[i].key,14)+"= "; + // for (c = 0; c < ronin.modules[key].variables[i].candidates.length; c++) { + // html += ronin.modules[key].variables[i].candidates[c]+" "; + // } + // html += "\n"; + // } + // html += "\n" + // }); + + return "
"+html+"
"; } function pad(s,length) diff --git a/scripts/modules/history.js b/scripts/modules/history.js new file mode 100644 index 0000000..fa0723b --- /dev/null +++ b/scripts/modules/history.js @@ -0,0 +1,22 @@ +function History(rune) +{ + Module.call(this,rune); + + this.lines = []; + + this.active = function(cmd) + { + console.log(this.lines); + } + + this.add = function(content) + { + this.lines.push(content); + } + + this.widget = function() + { + if(this.lines.length === 0){ return "";} + return "; "+this.lines.length+" "; + } +} \ No newline at end of file diff --git a/scripts/modules/stroke.js b/scripts/modules/stroke.js index 10d9cb7..556c7fd 100644 --- a/scripts/modules/stroke.js +++ b/scripts/modules/stroke.js @@ -4,6 +4,30 @@ function Stroke(rune) this.parameters = [Any]; + // Create a stroke + + this.positions = null; + + this.new_stroke = function() + { + this.positions = []; + } + + this.append_stroke = function(p) + { + this.positions.push(p); + } + + this.save_stroke = function() + { + s = "_ "; + for (i = 0; i < this.positions.length; i++) { + s += this.positions[i].render()+" "; + } + this.positions = null; + ronin.history.add(s); + } + // Module this.passive = function(cmd) @@ -12,23 +36,26 @@ function Stroke(rune) this.active = function(cmd) { - // TODO - - var origin = new Position(cmd.content[0]); - var destination = new Position(cmd.content[1]); - - var e = {}; - e.clientX = origin.x; - e.clientY = origin.y; - - ronin.brush.is_drawing = true; - ronin.brush.draw(e); - - e.clientX = destination.x; - e.clientY = destination.y; - - ronin.brush.draw(e); - ronin.brush.is_drawing = false; + var prev = null + for (i = 1; i < cmd.content.length; i++) { + var p = new Position(cmd.content[i]); + if(prev){ + this.draw(prev,p); + } + prev = p; + } + } + + this.draw = function(pos1,pos2) + { + ronin.canvas.context().beginPath(); + ronin.canvas.context().moveTo(pos1.x,pos1.y); + ronin.canvas.context().lineTo(pos2.x,pos2.y); + ronin.canvas.context().lineCap="round"; + ronin.canvas.context().lineWidth = 1; + ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.canvas.context().stroke(); + ronin.canvas.context().closePath(); } } \ No newline at end of file