From decbb6fdf43d4cebe8381fd3d19cf0a7ce27a659 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 23 Jan 2017 14:52:41 -0700 Subject: [PATCH] Started implementing magnetism to custor --- scripts/core/cursor.js | 87 ++++++++++++++++++++++++++++++++-------- scripts/core/keyboard.js | 18 ++++++--- scripts/core/ronin.js | 6 +-- scripts/modules/brush.js | 58 +++++++++++++++++++-------- 4 files changed, 129 insertions(+), 40 deletions(-) diff --git a/scripts/core/cursor.js b/scripts/core/cursor.js index 6730e86..42dcd39 100644 --- a/scripts/core/cursor.js +++ b/scripts/core/cursor.js @@ -1,19 +1,70 @@ -function Cursor() +function Cursor(rune) { + Module.call(this,rune); + + this.parameters = [Rect]; + this.variables = {}; + this.mode = null; this.position = new Position(); - + + this.layer = null; + + this.install = function() + { + this.layer = new Layer("Cursor.Magnet",this); + this.layer.element.setAttribute("style","z-index:9000"); + ronin.surface.add_layer(this.layer); + } + + this.passive = function(cmd) + { + if(!cmd.rect()){ return; } + + this.layer.clear(); + this.draw(cmd.rect(),cmd.position()); + } + + this.active = function(cmd) + { + if(!cmd.rect()){ return; } + this.draw(cmd.rect(),cmd.position()); + } + + this.draw = function(rect,grid) + { + if(rect.width < 5 || rect.height < 5){ return; } + + var horizontal = ronin.surface.size.width/rect.width; + var vertical = ronin.surface.size.height/rect.height; + + for (var x = 1; x < horizontal; x++) { + for (var y = 1; y < vertical; y++) { + var dot_position = new Position(x * rect.width, y * rect.height); + var size = 0.5; + if(grid && x % grid.x == 0 && y % grid.y == 0){ size = 1; } + this.draw_marker(dot_position,size); + } + } + } + + this.draw_marker = function(position,size = 0.5) + { + var context = this.layer.context(); + context.beginPath(); + context.arc(position.x, position.y, size, 0, 2 * Math.PI, false); + context.fillStyle = 'white'; + context.fill(); + } + this.update = function(event) { - if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */ } - else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.eye); } - else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.surface.active_layer); } - else if(event.ctrltKey === true && event.altKey === true){ this.set_mode(ronin.overlay.compositor); } - else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); } - else if(event.altKey === true){ this.set_mode(ronin.surface); } - else if(event.shiftKey === true){ this.set_mode(ronin.eraser); } - else if(ronin.module){ this.set_mode(ronin.module); } - else{ this.set_mode(ronin.brush); } + if(event.altKey == true){ + this.set_mode(ronin.surface); + } + else{ + this.set_mode(ronin.brush); + } } this.set_mode = function(mode) @@ -21,27 +72,31 @@ function Cursor() if(this.mode == mode){ return; } this.mode = mode; document.body.setAttribute("class",this.mode.constructor.name); - ronin.widget.update(); } this.mouse_down = function(position) { this.position = position; - this.mode.mouse_down(position); + if(this.mode.constructor.name != Cursor.name){ + this.mode.mouse_down(position); + } ronin.widget.update(); - // console.log(this.mode); } this.mouse_move = function(position) { this.position = position; - this.mode.mouse_move(position); + if(this.mode.constructor.name != Cursor.name){ + this.mode.mouse_move(position); + } } this.mouse_up = function(position) { this.position = position; - this.mode.mouse_up(position); + if(this.mode.constructor.name != Cursor.name){ + this.mode.mouse_up(position); + } ronin.widget.update(); commander.element_input.focus(); } diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js index e32d193..3f92e94 100644 --- a/scripts/core/keyboard.js +++ b/scripts/core/keyboard.js @@ -1,7 +1,20 @@ function Keyboard() { + this.shift_held = false; + + this.listen_onkeydown = function(event) + { + if(event.shiftKey == true){ + this.shift_held = true; + } + ronin.cursor.update(event); + ronin.widget.update(); + } + this.listen_onkeyup = function(event) { + this.shift_held = false; + switch (event.key) { case "Enter": this.key_enter(); break; case "ArrowUp": this.key_arrow_up(); break; @@ -29,11 +42,6 @@ function Keyboard() // ronin.cursor.set_mode(ronin.brush); ronin.widget.update(); }; - - this.listen_onkeydown = function(event) - { - ronin.cursor.update(event); - } this.key_tab = function() { diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 44fae53..34108bf 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -10,7 +10,6 @@ function Ronin() this.history = new History("^"); this.overlay = new Overlay("|"); this.brush = new Brush(">"); - this.eraser = new Eraser("."); this.eye = new Eye("*"); this.render = new Render("%"); this.stroke = new Stroke("_"); @@ -18,7 +17,7 @@ function Ronin() this.help = new Help("?"); this.typo = new Typographe("&"); - this.cursor = new Cursor(); + this.cursor = new Cursor("."); this.modules[this.surface.rune] = this.surface; this.modules[this.fileload.rune] = this.fileload; @@ -27,13 +26,14 @@ function Ronin() this.modules[this.overlay.rune] = this.overlay; this.modules[this.render.rune] = this.render; this.modules[this.brush.rune] = this.brush; - this.modules[this.eraser.rune] = this.eraser; this.modules[this.eye.rune] = this.eye; this.modules[this.typo.rune] = this.typo; this.modules[this.stroke.rune] = this.stroke; this.modules[this.vector.rune] = this.vector; this.modules[this.help.rune] = this.help; + this.modules[this.cursor.rune] = this.cursor; + // this.install = function() diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index c39dd41..2713f19 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -76,14 +76,33 @@ function Brush(rune) this.widget_cursor = function() { - var s = "> "+this.size+" "+this.color.hex+"
"; - - for (i = 0; i < ronin.brush.pointers.length; i++) { - s += ronin.brush.pointers[i].widget(); + if(keyboard.shift_held == true){ + return "Eraser "+this.size; } - return s; + else{ + return "Brush("+ronin.brush.pointers.length+") "+this.size+" "+this.color.hex+"
"; + } + } - return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers"; + // Eraser + + this.erase = function() + { + if(!this.position_prev){this.position_prev = ronin.cursor.position; } + + var position = ronin.cursor.position; + + ronin.surface.context().beginPath(); + ronin.surface.context().globalCompositeOperation="destination-out"; + ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y); + ronin.surface.context().lineTo(position.x,position.y); + ronin.surface.context().lineCap="round"; + ronin.surface.context().lineWidth = this.size * 5; + ronin.surface.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.surface.context().stroke(); + ronin.surface.context().closePath(); + + this.position_prev = position; } // Cursor @@ -93,33 +112,40 @@ function Brush(rune) this.mouse_down = function(position) { this.is_drawing = true; + this.position_prev = null; - for (i = 0; i < ronin.brush.pointers.length; i++) { - ronin.brush.pointers[i].start(); + if(keyboard.shift_held == true){ + this.erase(); + } + else{ + for (i = 0; i < ronin.brush.pointers.length; i++) { + ronin.brush.pointers[i].start(); + } } - ronin.stroke.new_stroke(); } this.mouse_move = function(position) { 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); + if(keyboard.shift_held == true){ + this.erase(); + } + else{ + for (i = 0; i < ronin.brush.pointers.length; i++) { + ronin.brush.pointers[i].draw(); + } + } } this.mouse_up = function(position) { this.is_drawing = false; + this.position_prev = null; for (i = 0; i < ronin.brush.pointers.length; i++) { ronin.brush.pointers[i].stop(); } - - ronin.stroke.save_stroke("brush"); } } \ No newline at end of file