From 6c3ed550d33c6b8506bcda80cdf80f50e7e018e1 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 20 Dec 2016 10:07:29 -0700 Subject: [PATCH] Added eraser. --- README.md | 2 +- index.html | 1 + scripts/core/cursor.js | 2 +- scripts/core/ronin.js | 2 + scripts/core/widget.js | 2 +- scripts/modules/brush.js | 5 ++ scripts/modules/brush.pointer.js | 2 + scripts/modules/canvas.js | 5 ++ scripts/modules/eraser.js | 79 ++++++++++++++++++++++++++++++++ scripts/modules/module.js | 4 ++ scripts/modules/overlay.js | 7 +++ 11 files changed, 108 insertions(+), 3 deletions(-) create mode 100644 scripts/modules/eraser.js diff --git a/README.md b/README.md index eced36f..ec4724a 100644 --- a/README.md +++ b/README.md @@ -120,4 +120,4 @@ rate=10 ; variable: rate = 10 > 2,2;> 4,4;> 6,6;> 8,8 # Symmetric Light > 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x -``` +``` \ No newline at end of file diff --git a/index.html b/index.html index 9b1b5d3..366009b 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ + diff --git a/scripts/core/cursor.js b/scripts/core/cursor.js index 4c97952..40220bb 100644 --- a/scripts/core/cursor.js +++ b/scripts/core/cursor.js @@ -7,7 +7,7 @@ function Cursor() { if(event.ctrlKey === true){ this.set_mode(ronin.overlay); } else if(event.altKey === true){ this.set_mode(ronin.canvas); } - else if(event.shiftKey === true){ this.set_mode(ronin.brush); } + else if(event.shiftKey === true){ this.set_mode(ronin.eraser); } else{ this.set_mode(ronin.brush); } } diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 13d0e04..8ba79c7 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -15,6 +15,7 @@ function Ronin() this.vector = new Vector("+"); this.help = new Help("?"); this.history = new History("^"); + this.eraser = new Eraser("."); this.cursor = new Cursor(); @@ -28,6 +29,7 @@ function Ronin() this.modules[this.vector.rune] = this.vector; this.modules[this.help.rune] = this.help; this.modules[this.history.rune] = this.history; + this.modules[this.eraser.rune] = this.eraser; this.cursors = []; diff --git a/scripts/core/widget.js b/scripts/core/widget.js index 825be64..3749010 100644 --- a/scripts/core/widget.js +++ b/scripts/core/widget.js @@ -10,7 +10,7 @@ function Widget() s += ronin.modules[key].widget(); } - s += ""+ronin.cursor.mode.constructor.name+""; + s += ""+ronin.cursor.mode.widget_cursor()+""; this.element.innerHTML = s; } diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index bae79d3..22d84a8 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -65,6 +65,11 @@ function Brush(rune) return "> "+this.size+" "+this.color.render()+" "; } + this.widget_cursor = function() + { + return "Brush "+this.size; + } + // Cursor this.is_drawing = false; diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index 5a91e14..2bde913 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -16,6 +16,8 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.distance += position.distance_to(this.position_prev); ronin.canvas.context().beginPath(); + + ronin.canvas.context().globalCompositeOperation="source-over"; ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y); ronin.canvas.context().lineTo(position.x,position.y); ronin.canvas.context().lineCap="round"; diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js index 6072066..e3f0777 100644 --- a/scripts/modules/canvas.js +++ b/scripts/modules/canvas.js @@ -68,6 +68,11 @@ function Canvas(rune) return "@ "+this.element.width+"x"+this.element.height+" "; } + this.widget_cursor = function() + { + return "Drag"; + } + // Cursor this.drag_from = null; diff --git a/scripts/modules/eraser.js b/scripts/modules/eraser.js new file mode 100644 index 0000000..4710849 --- /dev/null +++ b/scripts/modules/eraser.js @@ -0,0 +1,79 @@ +function Eraser(rune) +{ + Module.call(this,rune); + + this.parameters = [Value]; + this.size = 5; + + // Module + + this.position_prev = null; + + this.draw = function() + { + if(!this.position_prev){this.position_prev = ronin.cursor.position; } + if(ronin.brush.size < 0){ this.erase(); return; } + + var position = ronin.cursor.position; + + this.distance += position.distance_to(this.position_prev); + + ronin.canvas.context().beginPath(); + ronin.canvas.context().globalCompositeOperation="destination-out"; + ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y); + ronin.canvas.context().lineTo(position.x,position.y); + ronin.canvas.context().lineCap="round"; + ronin.canvas.context().lineWidth = 10; + ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.canvas.context().stroke(); + ronin.canvas.context().closePath(); + + this.position_prev = position; + } + + this.active = function(cmd) + { + if(cmd.value()){ + this.size = cmd.value().float; + } + } + + this.passive = function(cmd) + { + + } + + this.widget_cursor = function() + { + return "Eraser "+this.size; + } + + // Cursor + + this.is_drawing = false; + + this.mouse_down = function(position) + { + this.is_drawing = true; + this.position_prev = null; + + ronin.stroke.new_stroke(); + } + + this.mouse_move = function(position) + { + if(this.is_drawing === false){ return; } + + this.draw(); + + ronin.stroke.append_stroke(position); + } + + this.mouse_up = function(position) + { + this.is_drawing = false; + this.position_prev = null; + + ronin.stroke.save_stroke(); + } +} \ No newline at end of file diff --git a/scripts/modules/module.js b/scripts/modules/module.js index dbeeb33..2402f1d 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -25,6 +25,10 @@ function Module(rune) return ""; } + this.widget_cursor = function() + { + return "Missing"; + } this.mouse_down = function(position) { diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index db2e7af..6982342 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -152,4 +152,11 @@ function Overlay(rune) this.live_draw_from = null; commander.element_input.focus(); } + + // Widget + + this.widget_cursor = function() + { + return "Guide"; + } } \ No newline at end of file