From 8765044fd5e00032b399dfc517f74aa1ef9c36f4 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 24 May 2017 08:01:11 -1000 Subject: [PATCH] Brought back the layer.move --- links/main.css | 2 +- presets/default.rin | 13 ++--- scripts/modules/brush.js | 4 +- scripts/modules/brush.pointer.js | 6 +-- scripts/modules/cursor.js | 42 ++++++++++++++-- scripts/modules/default.js | 5 +- scripts/modules/layer.js | 82 +++++++------------------------- 7 files changed, 71 insertions(+), 83 deletions(-) diff --git a/links/main.css b/links/main.css index 3dbf5c8..1dfe734 100644 --- a/links/main.css +++ b/links/main.css @@ -1,7 +1,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;} *:focus {outline: none; } -#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px; } +#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px;} #frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background-image:url(../media/graphics/void.svg); background-position:0px 0px; } #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} #overlay { position:absolute; z-index:1000;} diff --git a/presets/default.rin b/presets/default.rin index 8c5eddd..0217d8e 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -1,16 +1,17 @@ frame.resize 300x300 frame.select main -layer.fill #ff0000 -render.stencil 45' #000000 +layer.fill #ffffff +render.stencil 45' #dddddd path:line_width 43 -path:line_color #EEEEEE +path:line_color #000000 path:line_cap square path.stroke M105,240 a-45,-45 0 0,0 -45,-45 M150,240 a-90,-90 0 0,0 -90,-90 M150,60 a90,90 0 0,0 90,90 M195,60 a45,45 0 0,0 45,45 M60,105 a45,-45 0 0,0 45,-45 M240,195 a-45,45 0 0,0 -45,45 type:size 10 -type:color white +type:color #000000 type.write 38,262 "RONIN" -type.write 38,252 "B08" -brush:color #000000 +type:font "DIN Medium" +type.write 38,252 "B09" +brush:color #ff0000 brush:size 2 path:line_width 20 path:line_color #999999 \ No newline at end of file diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 1bea088..4c82c1a 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -64,10 +64,10 @@ function Brush(rune) this.mouse_mode = function() { if(keyboard.shift_held == true){ - return "Eraser "+this.settings.size; + return "Erase "+this.settings.size; } else{ - return "Brush ● "+this.settings.size; + return "Paint ● "+this.settings.size; } } diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index ca37c6c..30a9cf1 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -1,4 +1,4 @@ -function Pointer(offset = new Position(), color = new Color().hex, scale = 1) +function Pointer(offset = new Position(), color = null, scale = 1) { this.offset = offset; this.color = color; @@ -68,7 +68,7 @@ function Pointer(offset = new Position(), color = new Color().hex, scale = 1) ronin.frame.context().lineCap="round"; ronin.frame.context().lineWidth = this.thickness(); - ronin.frame.context().strokeStyle = this.color; + ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.color; ronin.frame.context().stroke(); ronin.frame.context().closePath(); @@ -125,7 +125,7 @@ function Pointer(offset = new Position(), color = new Color().hex, scale = 1) ronin.frame.context().beginPath(); ronin.frame.context().arc(this.position().x, this.position().y, radius/2, 0, 2 * Math.PI, false); ronin.frame.context().lineWidth = 0; - ronin.frame.context().fillStyle = this.color; + ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.color; ronin.frame.context().fill(); ronin.frame.context().closePath(); } diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index 0d8dcba..6ea5680 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -14,7 +14,10 @@ function Cursor(rune) this.update = function(event = null) { - if(ronin.terminal.cmd().module()){ + if(this.is_inside){ + this.set_mode(ronin.default) + } + else if(ronin.terminal.cmd().module()){ this.set_mode(ronin.terminal.cmd().module()); } else if(event && event.altKey == true && event.shiftKey == true){ @@ -51,15 +54,24 @@ function Cursor(rune) if(!position.is_outside()){ this.mode.mouse_down(this.position); } + else{ + ronin.cursor.set_mode(ronin.default); + ronin.default.mouse_down(this.position); + } } } this.mouse_move = function(position,e) { if(!this.layer){ this.create_layer(); } + + // On/Out + if(position.is_outside()){ this.mouse_outside(); } + else{ this.mouse_inside(); } this.layer.clear(); + // Magnet this.position = ronin.magnet.update_mouse(position); this.position_in_window = new Position(e.clientX,e.clientY); @@ -98,6 +110,29 @@ function Cursor(rune) this.mode.mouse_from = null; } + // over/out + + this.is_inside = false; + + this.mouse_outside = function() + { + if(this.is_inside){ return; } + + this.is_inside = true; + this.update(); + + console.log("over") + } + + this.mouse_inside = function() + { + if(!this.is_inside){ return; } + + this.is_inside = false; + this.update(); + console.log("off") + } + this.draw_pointer_arrow = function(position,size = 1) { if(!this.layer){ this.create_layer(); } @@ -135,7 +170,7 @@ function Cursor(rune) this.layer.context().beginPath(); this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false); this.layer.context().lineWidth = 1; - this.layer.context().strokeStyle = this.settings.color; + this.layer.context().strokeStyle = ronin.brush.color; this.layer.context().stroke(); this.layer.context().closePath(); @@ -197,6 +232,7 @@ function Cursor(rune) this.draw_pointer = function(position,size = 1) { + if(!this.is_inside){ return; } if(!this.layer){ this.create_layer(); } this.pointer_last = this.pointer_last ? this.pointer_last : position; @@ -246,7 +282,7 @@ function Cursor(rune) this.widget = function() { - return ""+this.mode.mouse_mode()+""; + return ""+this.mode.name+"."+this.mode.mouse_mode()+""; } this.key_escape = function() diff --git a/scripts/modules/default.js b/scripts/modules/default.js index 179d8a6..984f6fc 100644 --- a/scripts/modules/default.js +++ b/scripts/modules/default.js @@ -15,16 +15,16 @@ function Default(rune) } this.drag_from = null; - this.drag_offset_x = 0; - this.drag_offset_y = 0; this.mouse_down = function(position) { + console.log("down") this.drag_from = ronin.cursor.position_in_window; } this.mouse_move = function(position) { + console.log("move") if(this.drag_from === null){ return; } var offset = ronin.cursor.position_in_window.offset(this.drag_from); @@ -39,6 +39,7 @@ function Default(rune) this.mouse_up = function(event) { + console.log("up") this.drag_from = null; } } \ No newline at end of file diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index 634c728..435da7b 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -153,80 +153,30 @@ function Layer(name,manager = null) return "Move"; } + this.drag_from = null; + + this.mouse_down = function(position) + { + this.drag_from = ronin.cursor.position_in_window; + } + this.mouse_move = function(position) { - var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y)); + if(this.drag_from === null){ return; } - ronin.overlay.get_layer(true).clear(); - ronin.overlay.draw_cross(this.mouse_from); - ronin.overlay.draw_cross(position); - ronin.overlay.draw_line(this.mouse_from,position); + var offset = ronin.cursor.position_in_window.offset(this.drag_from); + + var data = this.data(); + this.clear(); + this.context().putImageData(data, offset.x * 2, offset.y * 2); + + this.drag_from = ronin.cursor.position_in_window; } this.mouse_up = function(position) { - var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y)); - - ronin.overlay.get_layer(true).clear(); - ronin.overlay.draw_circle(position); - ronin.overlay.draw_circle(this.mouse_from); - ronin.overlay.draw_line(this.mouse_from,position); - - // ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render(); - - // if(this.coordinates.length == 0){ - // this.coordinates.push("M"+position.render()); - // } - // else{ - // var offset = this.last_pos ? position.offset(this.last_pos) : position; - - // if(keyboard.shift_held == true && keyboard.alt_held == true){ - // this.coordinates.push("M"+position.render()); - // } - // else if(keyboard.shift_held == true){ - // this.coordinates.push("a"+offset.render()+" 0 0,1 "+offset.render()); - // } - // else if(keyboard.alt_held == true){ - // this.coordinates.push("a"+offset.render()+" 0 0,0 "+offset.render()); - // } - // else{ - // this.coordinates.push("l"+offset.render()); - // } - // } - - // ronin.terminal.input_element.value = "path."+ronin.terminal.method_name+" "+this.create_path(); - // this.last_pos = position; - // ronin.terminal.passive(); + this.drag_from = null; } - - // this.move_from = null; - - // this.mouse_down = function(position) - // { - // this.move_from = ronin.position_in_window(position); - // } - - // this.mouse_move = function(position) - // { - // if(this.move_from === null){ return; } - - // position = ronin.position_in_window(position); - - // var offset_x = this.move_from.x - position.x; - // var offset_y = this.move_from.y - position.y; - - // var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2); - // this.clear(); - // this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2); - - // this.move_from = new Position(position.x,position.y); - - // } - - // this.mouse_up = function(event) - // { - // this.move_from = null; - // } // Blink