From 25ffb2f736d565a977efeef9a003714e727ed1fa Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 24 Dec 2016 16:15:26 -0700 Subject: [PATCH] Basic layer support with # --- index.html | 4 +- links/main.css | 6 +- scripts/core/init.js | 10 +-- scripts/core/ronin.js | 4 +- scripts/modules/Find Results | 120 +++++++++++++++++++++++++++ scripts/modules/brush.js | 2 +- scripts/modules/brush.pointer.js | 18 ++-- scripts/modules/canvas.js | 72 ---------------- scripts/modules/eraser.js | 18 ++-- scripts/modules/eye.js | 2 +- scripts/modules/file.load.js | 2 +- scripts/modules/filter.balance.js | 2 +- scripts/modules/filter.chromatic.js | 2 +- scripts/modules/filter.eval.js | 2 +- scripts/modules/filter.js | 2 +- scripts/modules/filter.offset.js | 2 +- scripts/modules/filter.saturation.js | 2 +- scripts/modules/history.js | 2 +- scripts/modules/stroke.js | 18 ++-- scripts/modules/surface.js | 75 ++++++++++++++++- scripts/modules/surface.layer.js | 38 +++++++++ scripts/modules/vector.js | 8 +- 22 files changed, 283 insertions(+), 128 deletions(-) create mode 100644 scripts/modules/Find Results create mode 100644 scripts/modules/surface.layer.js diff --git a/index.html b/index.html index c6479f4..3a42f0b 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@ + @@ -51,9 +52,8 @@
- -
Loading..
+
Loading..
diff --git a/links/main.css b/links/main.css index bdc41d6..183d003 100644 --- a/links/main.css +++ b/links/main.css @@ -4,9 +4,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" canvas:hover { cursor: crosshair;} #ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);} -#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;} +#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;} +#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} #overlay { position:absolute; z-index:1000;} -#workspace { position:absolute; background:#efefef; border-radius:3px;} #widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;} #widget .cursor { float:right;} @@ -16,7 +16,7 @@ canvas:hover { cursor: crosshair;} #commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:12px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block;} #commander input:before { content:"input"; color:red;} -#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 12px;width: 100vw;color: #999;} +#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 10px;width: 100vw;color: #999;} #commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;} #commander_hint .param { font-style: italic;} #commander_hint .param:after { content:", "; } diff --git a/scripts/core/init.js b/scripts/core/init.js index c5228a7..65e8418 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -12,7 +12,7 @@ commander.hint.element = document.getElementById('commander_hint'); 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); +// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false); // Keyboard var keyboard = new Keyboard(); @@ -25,8 +25,6 @@ starting_canvas.width = window.innerWidth - 200; starting_canvas.height = window.innerHeight - 200; commander.query("~ "+ronin.timestamp()); -commander.query("@ "+starting_canvas.render()); -commander.query("> 1 0,0 #000000"); -commander.query("> banking=true"); -commander.query("> natural=true"); -commander.query("> -5,0"); \ No newline at end of file +commander.query("# "+starting_canvas.render()); +commander.query("# layer=main"); +commander.query("> 1 0,0 #000000"); \ No newline at end of file diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index ea4c785..b697d64 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -38,8 +38,8 @@ function Ronin() this.position_in_canvas = function(e) { - var x = e.clientX - parseFloat(ronin.surface.element.style.left) - parseFloat(ronin.canvas.element.style.left); - var y = e.clientY- parseFloat(ronin.surface.element.style.top) - parseFloat(ronin.canvas.element.style.top); + var x = e.clientX - parseFloat(ronin.surface.element.style.left); + var y = e.clientY- parseFloat(ronin.surface.element.style.top); return new Position(x+","+y); } diff --git a/scripts/modules/Find Results b/scripts/modules/Find Results new file mode 100644 index 0000000..3290219 --- /dev/null +++ b/scripts/modules/Find Results @@ -0,0 +1,120 @@ +Searching 62 files for "canvas.con" + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/brush.pointer.js: + 26 this.distance += position.distance_to(this.position_prev); + 27 + 28: ronin.canvas.context().beginPath(); + 29 + 30: ronin.canvas.context().globalCompositeOperation="source-over"; + 31: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y); + 32: ronin.canvas.context().lineTo(position.x,position.y); + 33: ronin.canvas.context().lineCap="round"; + 34: ronin.canvas.context().lineWidth = this.thickness(); + 35: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba(); + 36: ronin.canvas.context().stroke(); + 37: ronin.canvas.context().closePath(); + 38 + 39 this.position_prev = position; + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eraser.js: + 19 this.distance += position.distance_to(this.position_prev); + 20 + 21: ronin.canvas.context().beginPath(); + 22: ronin.canvas.context().globalCompositeOperation="destination-out"; + 23: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y); + 24: ronin.canvas.context().lineTo(position.x,position.y); + 25: ronin.canvas.context().lineCap="round"; + 26: ronin.canvas.context().lineWidth = 10; + 27: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba(); + 28: ronin.canvas.context().stroke(); + 29: ronin.canvas.context().closePath(); + 30 + 31 this.position_prev = position; + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eye.js: + 20 this.color_picker = function(position) + 21 { + 22: var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data; + 23 var c = new Color(); + 24 commander.show(); + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/file.load.js: + 30 height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height; + 31 + 32: ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height); + 33 } + 34 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.balance.js: + 43 + 44 ronin.canvas.clear(); + 45: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + 46 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.chromatic.js: + 35 } + 36 ronin.canvas.clear(); + 37: ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height); + 38 } + 39 + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.eval.js: + 23 + 24 ronin.canvas.clear(); + 25: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + 26 console.log("done."); + 27 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.js: + 69 this.pixels = function() + 70 { + 71: return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height); + 72 } + 73 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.offset.js: + 16 } + 17 ronin.canvas.clear(); + 18: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + 19 } + 20 + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.saturation.js: + 12 } + 13 ronin.canvas.clear(); + 14: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + 15 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/stroke.js: + 49 this.draw = function(pos1,pos2) + 50 { + 51: ronin.canvas.context().beginPath(); + 52: ronin.canvas.context().moveTo(pos1.x,pos1.y); + 53: ronin.canvas.context().lineTo(pos2.x,pos2.y); + 54: ronin.canvas.context().lineCap="round"; + 55: ronin.canvas.context().lineWidth = 1; + 56: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba(); + 57: ronin.canvas.context().stroke(); + 58: ronin.canvas.context().closePath(); + 59 } + 60 + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/surface.layer.js: + 23 + 24 if(!position){ position = new Position("0,0");} + 25: ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height); + 26: ronin.canvas.context().scale(2,2); + 27 } + 28 } + +/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/vector.js: + 19 { + 20 ronin.overlay.clear(); + 21: ronin.canvas.context().lineCap="round"; + 22: ronin.canvas.context().lineWidth = ronin.brush.size; + 23: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba(); + 24: ronin.canvas.context().stroke(new Path2D(cmd.content.join(" "))); + 25 } + 26 + +40 matches across 13 files diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index e4a06ce..9d83514 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -64,7 +64,7 @@ function Brush(rune) this.widget_cursor = function() { - return "Brush "+this.size+", "+this.pointers.length+" pointers"; + return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers"; } // Cursor diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index a45a932..9f030a4 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -25,16 +25,16 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.distance += position.distance_to(this.position_prev); - ronin.canvas.context().beginPath(); + ronin.surface.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"; - ronin.canvas.context().lineWidth = this.thickness(); - ronin.canvas.context().strokeStyle = ronin.brush.color.rgba(); - ronin.canvas.context().stroke(); - ronin.canvas.context().closePath(); + ronin.surface.context().globalCompositeOperation="source-over"; + 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.thickness(); + ronin.surface.context().strokeStyle = ronin.brush.color.rgba(); + ronin.surface.context().stroke(); + ronin.surface.context().closePath(); this.position_prev = position; } diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js index ecafa2e..4f59b55 100644 --- a/scripts/modules/canvas.js +++ b/scripts/modules/canvas.js @@ -4,78 +4,6 @@ function Canvas(rune) this.parameters = [Rect,Position,Color,Bang]; - this.active = function(cmd) - { - if(cmd.bang()){ this.clear(); } - - if(cmd.rect()){ - this.resize(cmd.rect(),cmd.position()); - ronin.overlay.resize(cmd.rect()); - } - - if(cmd.color()){ - this.context().beginPath(); - this.context().rect(0, 0, this.element.width, this.element.height); - this.context().fillStyle = cmd.color().hex; - this.context().fill(); - } - } - - this.passive = function(cmd) - { - if(cmd.rect()){ - ronin.overlay.draw(cmd.position(),cmd.rect()); - } - } - - // - - this.resize = function(rect, position = null) - { - var canvas_pixels = ronin.canvas.element.toDataURL("image/png"); - var pixels_rect = new Rect(this.element.width+"x"+this.element.height); - - this.element.width = rect.width * 2; - this.element.height = rect.height * 2; - this.element.style.left = (window.innerWidth/2)-(rect.width/2); - this.element.style.top = (window.innerHeight/2)-(rect.height/2); - this.element.style.width = rect.width+"px"; - this.element.style.height = rect.height+"px"; - - ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2); - ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2); - ronin.widget.element.style.width = rect.width+"px"; - - ronin.widget.update(); - - base_image = new Image(); - base_image.src = canvas_pixels; - - if(!position){ position = new Position("0,0");} - ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height); - ronin.canvas.context().scale(2,2); - } - - this.context = function() - { - return this.element.getContext('2d'); - } - - this.clear = function() - { - this.context().clearRect(0, 0, this.element.width, this.element.height); - } - - this.widget = function() - { - return "@ "+this.element.width+"x"+this.element.height+" "; - } - - this.widget_cursor = function() - { - return "Move"; - } - // Cursor this.move_from = null; diff --git a/scripts/modules/eraser.js b/scripts/modules/eraser.js index a884120..647aa20 100644 --- a/scripts/modules/eraser.js +++ b/scripts/modules/eraser.js @@ -18,15 +18,15 @@ function Eraser(rune) 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(); + 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 = 10; + ronin.surface.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.surface.context().stroke(); + ronin.surface.context().closePath(); this.position_prev = position; } diff --git a/scripts/modules/eye.js b/scripts/modules/eye.js index 443945e..61c3045 100644 --- a/scripts/modules/eye.js +++ b/scripts/modules/eye.js @@ -19,7 +19,7 @@ function Eye(rune) this.color_picker = function(position) { - var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data; + var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data; var c = new Color(); commander.show(); commander.element_input.focus(); diff --git a/scripts/modules/file.load.js b/scripts/modules/file.load.js index 6b5e1bc..089dcd8 100644 --- a/scripts/modules/file.load.js +++ b/scripts/modules/file.load.js @@ -29,7 +29,7 @@ function FileLoad(rune) width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width; height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height; - ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height); + ronin.surface.context().drawImage(base_image, position.x, position.y, width, height); } } diff --git a/scripts/modules/filter.balance.js b/scripts/modules/filter.balance.js index fd6e5e2..6bfc559 100644 --- a/scripts/modules/filter.balance.js +++ b/scripts/modules/filter.balance.js @@ -42,5 +42,5 @@ Filter.prototype.filter_balance = function(pixels = this.pixels(),p = null) } ronin.canvas.clear(); - ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); } \ No newline at end of file diff --git a/scripts/modules/filter.chromatic.js b/scripts/modules/filter.chromatic.js index e162c3e..5da1cd6 100644 --- a/scripts/modules/filter.chromatic.js +++ b/scripts/modules/filter.chromatic.js @@ -34,5 +34,5 @@ Filter.prototype.filter_chromatic = function(pixels = this.pixels(),p = null) } } ronin.canvas.clear(); - ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height); + ronin.surface.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height); } diff --git a/scripts/modules/filter.eval.js b/scripts/modules/filter.eval.js index bbff93c..3a9a412 100644 --- a/scripts/modules/filter.eval.js +++ b/scripts/modules/filter.eval.js @@ -22,6 +22,6 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null) } ronin.canvas.clear(); - ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); console.log("done."); } \ No newline at end of file diff --git a/scripts/modules/filter.js b/scripts/modules/filter.js index 8aedcab..3a9c563 100644 --- a/scripts/modules/filter.js +++ b/scripts/modules/filter.js @@ -68,6 +68,6 @@ function Filter(rune) this.pixels = function() { - return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height); + return ronin.surface.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height); } } diff --git a/scripts/modules/filter.offset.js b/scripts/modules/filter.offset.js index 73f21a5..72b0d07 100644 --- a/scripts/modules/filter.offset.js +++ b/scripts/modules/filter.offset.js @@ -15,5 +15,5 @@ Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null) } } ronin.canvas.clear(); - ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); } diff --git a/scripts/modules/filter.saturation.js b/scripts/modules/filter.saturation.js index cda01bf..63bcf11 100644 --- a/scripts/modules/filter.saturation.js +++ b/scripts/modules/filter.saturation.js @@ -11,5 +11,5 @@ Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null) d[i] = d[i+1] = d[i+2] = v } ronin.canvas.clear(); - ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); + ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height); } \ No newline at end of file diff --git a/scripts/modules/history.js b/scripts/modules/history.js index 719692f..7962bf7 100644 --- a/scripts/modules/history.js +++ b/scripts/modules/history.js @@ -11,7 +11,7 @@ function History(rune) for (i = 0; i < this.cmds.length; i++) { if(this.cmds[i][0] == this.rune){ continue; } - html += this.cmds[i]+"
"; + html += this.cmds[i]+";
"; } w.document.write("Source"+html+""); } diff --git a/scripts/modules/stroke.js b/scripts/modules/stroke.js index b8f2bf7..edf95ae 100644 --- a/scripts/modules/stroke.js +++ b/scripts/modules/stroke.js @@ -20,7 +20,7 @@ function Stroke(rune) this.save_stroke = function(mode) { - s = "_ mode:"+mode+" "; + s = "_ module="+mode+" "; for (i = 0; i < this.positions.length; i++) { s += this.positions[i].render()+" "; } @@ -48,14 +48,14 @@ function Stroke(rune) 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(); + ronin.surface.context().beginPath(); + ronin.surface.context().moveTo(pos1.x,pos1.y); + ronin.surface.context().lineTo(pos2.x,pos2.y); + ronin.surface.context().lineCap="round"; + ronin.surface.context().lineWidth = 1; + ronin.surface.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.surface.context().stroke(); + ronin.surface.context().closePath(); } } \ No newline at end of file diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js index d01bb23..7b28a29 100644 --- a/scripts/modules/surface.js +++ b/scripts/modules/surface.js @@ -3,19 +3,90 @@ function Surface(rune) Module.call(this,rune); this.element = null; - this.parameters = [Any]; + this.parameters = [Rect,Color,Any]; + + this.layers = {}; + this.active_layer = null; + + this.size = null; this.active = function(cmd) { + if(cmd.rect()){ + this.resize(cmd.rect(),cmd.position()); + ronin.overlay.resize(cmd.rect()); + } + if(cmd.color()){ + this.context().beginPath(); + this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height); + this.context().fillStyle = cmd.color().hex; + this.context().fill(); + } + + // + + if(cmd.variable("layer")){ + var layer_name = cmd.variable("layer").value; + if(this.layers[layer_name]){ + console.log("Selecting layer:"+layer_name); + this.active_layer = this.layers[layer_name]; + } + else{ + console.log("Creating layer:"+layer_name); + this.layers[layer_name] = new Layer(layer_name,this.size); + this.active_layer = this.layers[layer_name]; + this.element.appendChild(this.active_layer.element); + this.active_layer.resize(this.size); + } + } + + } this.passive = function(cmd) { + if(cmd.rect()){ + ronin.overlay.draw(cmd.position(),cmd.rect()); + } + } + + this.resize = function(rect, position = null) + { + this.size = rect; + + Object.keys(ronin.surface.layers).forEach(function (key) { + ronin.surface.layers[key].resize(rect); + }); + + ronin.surface.element.width = rect.width * 2; + ronin.surface.element.height = rect.height * 2; + ronin.surface.element.style.left = (window.innerWidth/2)-(rect.width/2); + ronin.surface.element.style.top = (window.innerHeight/2)-(rect.height/2); + ronin.surface.element.style.width = rect.width+"px"; + ronin.surface.element.style.height = rect.height+"px"; + ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2); + ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2); + ronin.widget.element.style.width = rect.width+"px"; + + ronin.widget.update(); + } + + this.widget = function() + { + if(!this.active_layer){ return ""; } + return "# "+this.active_layer.name; } this.widget_cursor = function() { - return "Drag"; + return "Move"; + } + + // Layers + + this.context = function() + { + return this.active_layer.context(); } // Cursor diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js new file mode 100644 index 0000000..63661f3 --- /dev/null +++ b/scripts/modules/surface.layer.js @@ -0,0 +1,38 @@ +function Layer(name) +{ + this.name = name; + this.element = document.createElement("canvas"); + this.element.setAttribute("id","_"+name); + this.element.setAttribute("class","layer"); + + this.resize = function(rect) + { + console.log("Resize "+this.name+" to "+rect.render()); + + var canvas_pixels = this.element.toDataURL("image/png"); + var pixels_rect = new Rect(this.element.width+"x"+this.element.height); + + this.element.width = rect.width * 2; + this.element.height = rect.height * 2; + this.element.style.width = rect.width+"px"; + this.element.style.height = rect.height+"px"; + + this.context().scale(2,2); + + // base_image = new Image(); + // base_image.src = canvas_pixels; + + // ronin.surface.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height); + // ronin.surface.context().scale(2,2); + } + + this.clear = function() + { + this.context().clearRect(0, 0, this.element.width, this.element.height); + } + + this.context = function() + { + return this.element.getContext('2d'); + } +} \ No newline at end of file diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js index 04f866f..3fa5cba 100644 --- a/scripts/modules/vector.js +++ b/scripts/modules/vector.js @@ -18,10 +18,10 @@ function Vector(rune) this.active = function(cmd) { ronin.overlay.clear(); - ronin.canvas.context().lineCap="round"; - ronin.canvas.context().lineWidth = ronin.brush.size; - ronin.canvas.context().strokeStyle = ronin.brush.color.rgba(); - ronin.canvas.context().stroke(new Path2D(cmd.content.join(" "))); + ronin.surface.context().lineCap="round"; + ronin.surface.context().lineWidth = ronin.brush.size; + ronin.surface.context().strokeStyle = ronin.brush.color.rgba(); + ronin.surface.context().stroke(new Path2D(cmd.content.join(" "))); } // + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle