dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved Type

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-03-28 13:56:00 -07:00
parent a8a23736bf
commit cc37e3ff98
27 changed files with 154 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
scripts/modules/brush.js
View File

@@ -35,14 +35,14 @@ function Brush(rune)
this.size_up = function()
{
this.settings["size"].float -= this.settings["size"].float > 1 ? 1 : 0;
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size));
}
this.size_down = function()
{
this.settings["size"].float += 1;
ronin.surface.update_widget();
ronin.frame.update_widget();
ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size));
}
@@ -62,15 +62,15 @@ function Brush(rune)
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.settings["size"].float * 5;
ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
ronin.frame.context().beginPath();
ronin.frame.context().globalCompositeOperation="destination-out";
ronin.frame.context().moveTo(this.position_prev.x,this.position_prev.y);
ronin.frame.context().lineTo(position.x,position.y);
ronin.frame.context().lineCap="round";
ronin.frame.context().lineWidth = this.settings["size"].float * 5;
ronin.frame.context().strokeStyle = new Color("#ff0000").rgba();
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev = position;
}

20
scripts/modules/brush.pointer.js
View File

@@ -29,10 +29,10 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.distance += position.distance_to(position_prev);
ronin.surface.context().beginPath();
ronin.frame.context().beginPath();
ronin.surface.context().globalCompositeOperation="source-over";
ronin.surface.context().moveTo(position_prev.x,position_prev.y);
ronin.frame.context().globalCompositeOperation="source-over";
ronin.frame.context().moveTo(position_prev.x,position_prev.y);
//Choose direct line or curve line based on how many samples available
if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){
@@ -49,17 +49,17 @@ function Pointer(offset = new Position(), color = new Color('000000'))
var tx = px + (ppx - px) * 0.2 * d;
var ty = py + (ppy - py) * 0.2 * d;
ronin.surface.context().quadraticCurveTo(tx,ty,position.x,position.y);
ronin.frame.context().quadraticCurveTo(tx,ty,position.x,position.y);
}
else {
ronin.surface.context().lineTo(position.x,position.y);
ronin.frame.context().lineTo(position.x,position.y);
}
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = this.thickness();
ronin.surface.context().strokeStyle = ronin.brush.settings["color"].rgba();
ronin.surface.context().stroke();
ronin.surface.context().closePath();
ronin.frame.context().lineCap="round";
ronin.frame.context().lineWidth = this.thickness();
ronin.frame.context().strokeStyle = ronin.brush.settings["color"].rgba();
ronin.frame.context().stroke();
ronin.frame.context().closePath();
this.position_prev.unshift(position);
}

2
scripts/modules/cursor.js
View File

@@ -134,7 +134,7 @@ function Cursor(rune)
// this.set_mode(ronin.module);
// }
// else if(event.altKey == true && event.shiftKey == true){
// this.set_mode(ronin.surface.active_layer);
// this.set_mode(ronin.frame.active_layer);
// }
// else if(event.altKey == true){
// this.set_mode(ronin.default);

4
scripts/modules/default.js
View File

@@ -65,8 +65,8 @@ function Default(rune)
this.drag_offset_x -= offset_x;
this.drag_offset_y -= offset_y;
ronin.surface.element.style.marginLeft = -(ronin.surface.settings["size"].width/2) + this.drag_offset_x;
ronin.surface.element.style.marginTop = -(ronin.surface.settings["size"].height/2) + this.drag_offset_y;
ronin.frame.element.style.marginLeft = -(ronin.frame.settings["size"].width/2) + this.drag_offset_x;
ronin.frame.element.style.marginTop = -(ronin.frame.settings["size"].height/2) + this.drag_offset_y;
ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";

2
scripts/modules/eye.js
View File

@@ -15,7 +15,7 @@ function Eye(rune)
// TODO: If a rect is given, return the average color
this.color_picker = function(position,rect = null)
{
var imgData = ronin.surface.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var imgData = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data;
var c = new Color();
ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData));
ronin.terminal.update_hint();

46
scripts/modules/surface.js → scripts/modules/frame.js
View File

@@ -1,4 +1,4 @@
function Surface(rune)
function Frame(rune)
{
Module.call(this,rune);
@@ -28,16 +28,16 @@ function Surface(rune)
this.settings["size"] = params.rect();
for(layer_name in ronin.surface.layers){
ronin.surface.layers[layer_name].resize(this.settings["size"]);
for(layer_name in ronin.frame.layers){
ronin.frame.layers[layer_name].resize(this.settings["size"]);
}
ronin.surface.element.width = this.settings["size"].width * 2;
ronin.surface.element.height = this.settings["size"].height * 2;
ronin.surface.element.style.width = this.settings["size"].width+"px";
ronin.surface.element.style.height = this.settings["size"].height+"px";
ronin.surface.element.style.marginLeft = -(this.settings["size"].width/2);
ronin.surface.element.style.marginTop = -(this.settings["size"].height/2);
ronin.frame.element.width = this.settings["size"].width * 2;
ronin.frame.element.height = this.settings["size"].height * 2;
ronin.frame.element.style.width = this.settings["size"].width+"px";
ronin.frame.element.style.height = this.settings["size"].height+"px";
ronin.frame.element.style.marginLeft = -(this.settings["size"].width/2);
ronin.frame.element.style.marginTop = -(this.settings["size"].height/2);
ronin.on_resize();
ronin.terminal.log(new Log(this,"Resized Surface to "+this.settings["size"].render()));
@@ -56,7 +56,7 @@ function Surface(rune)
this.select = function(params)
{
var layer_name = params.content;
if(!ronin.surface.layers[layer_name]){
if(!ronin.frame.layers[layer_name]){
this.add_layer(new Layer(layer_name));
}
this.select_layer(this.layers[layer_name]);
@@ -68,10 +68,10 @@ function Surface(rune)
this.blink = function()
{
Object.keys(ronin.surface.layers).forEach(function (key) {
ronin.surface.layers[key].blink();
Object.keys(ronin.frame.layers).forEach(function (key) {
ronin.frame.layers[key].blink();
});
setTimeout(function(){ ronin.surface.blink(); }, 30);
setTimeout(function(){ ronin.frame.blink(); }, 30);
}
this.select_layer = function(layer)
@@ -81,8 +81,8 @@ function Surface(rune)
this.select_any_layer = function()
{
var layer_name = Object.keys(ronin.surface.layers)[0];
this.select_layer(ronin.surface.layers[layer_name]);
var layer_name = Object.keys(ronin.frame.layers)[0];
this.select_layer(ronin.frame.layers[layer_name]);
}
this.add_layer = function(layer)
@@ -117,14 +117,14 @@ function Surface(rune)
s += "<span class='cursor'>"+ronin.cursor.mode.mouse_mode()+"</span>";
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys.length > 1){
s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")</span>";
}
else{
s += "<span class='layer'>"+ronin.surface.active_layer.widget()+"</span>";
s += "<span class='layer'>"+ronin.frame.active_layer.widget()+"</span>";
}
this.widget_element.innerHTML = s;
@@ -134,20 +134,20 @@ function Surface(rune)
this.layer_up = function()
{
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(loc >= keys.length-1){ console.log("Reached end"); return false; }
if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);}
if(keys[loc+1] != null){this.select_layer(ronin.frame.layers[keys[loc+1]]);}
}
this.layer_down = function()
{
var keys = Object.keys(ronin.surface.layers);
var keys = Object.keys(ronin.frame.layers);
var loc = keys.indexOf(this.active_layer.name);
if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
if(keys[loc-1] != null){this.select_layer(ronin.frame.layers[keys[loc-1]]);}
}
// this.passive = function(cmd)
@@ -180,7 +180,7 @@ function Surface(rune)
this.mouse_move = function(position,rect)
{
ronin.terminal.input_element.value = "surface."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" ";
ronin.terminal.input_element.value = "frame."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" ";
ronin.terminal.passive();
}

27
scripts/modules/surface.layer.js → scripts/modules/layer.js
View File

@@ -3,6 +3,7 @@ function Layer(name,manager = null)
Module.call(this,"#");
this.add_method(new Method("fill",["color","position","rect"],"Add position"));
this.add_method(new Method("rename",["text"]));
this.name = name;
this.rune = "#";
@@ -16,14 +17,24 @@ function Layer(name,manager = null)
if(preview){ return; }
if(!params.color()){ return; }
var rect = params.rect() ? params.rect() : new Rect(this.element.width+"x"+this.element.height);
var position = params.position() ? params.position() : new Position("0,0");
this.context().beginPath();
this.context().rect(0, 0, this.element.width, this.element.height);
this.context().rect(position.x, position.y, rect.width, rect.height);
this.context().fillStyle = params.color().hex;
this.context().fill();
ronin.terminal.log(new Log(this,"Filled layer: "+params.color().hex));
this.element.style.border = "1px solid "+params.color().hex;
this.element.setAttribute("class",params.color().style());
ronin.terminal.log(new Log(this,"Filled layer "+this.name+": "+params.color().hex));
}
this.rename = function(params, preview = false)
{
if(preview){ return; }
// TODO
// ronin.frame.layers[params.text()] = this;
// ronin.frame.layers[this.name] = null;
ronin.terminal.log(new Log(this,"Renamed layer "+this.name+" to "+params.text()));
}
this.resize = function(rect)
@@ -49,8 +60,8 @@ function Layer(name,manager = null)
{
ronin.terminal.log(new Log(this,"Removing layer "+this.name));
manager.layer = null;
ronin.surface.layers[this.name].element.outerHTML = "";
delete ronin.surface.layers[this.name];
ronin.frame.layers[this.name].element.outerHTML = "";
delete ronin.frame.layers[this.name];
}
this.context = function()
@@ -70,7 +81,7 @@ function Layer(name,manager = null)
var e_name = this.name;
var e_class = "";
if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
if(ronin.frame.active_layer.name == this.name){ e_class += "highlight "; }
if(this.manager != null){ e_class += "managed "; }
return "<span class='"+e_class+"'>"+e_name+"</span>";
@@ -102,7 +113,7 @@ function Layer(name,manager = null)
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.surface.settings["size"].width * 2, ronin.surface.settings["size"].height * 2);
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);

4
scripts/modules/magnet.js
View File

@@ -39,8 +39,8 @@ function Magnet(rune)
if(rect.width < 5 || rect.height < 5){ return; }
var horizontal = ronin.surface.settings["size"].width/rect.width;
var vertical = ronin.surface.settings["size"].height/rect.height;
var horizontal = ronin.frame.settings["size"].width/rect.width;
var vertical = ronin.frame.settings["size"].height/rect.height;
for (var x = 1; x < horizontal; x++) {
for (var y = 1; y < vertical; y++) {

6
scripts/modules/module.js
View File

@@ -22,7 +22,7 @@ function Module(rune)
{
this.layer = new Layer(this.constructor.name+".Preview",this);
this.layer.element.setAttribute("style","z-index:7000");
ronin.surface.add_layer(this.layer);
ronin.frame.add_layer(this.layer);
}
this.get_layer = function(is_blinking = false)
@@ -150,12 +150,12 @@ function Module(rune)
this.key_arrow_up = function()
{
ronin.surface.layer_up();
ronin.frame.layer_up();
}
this.key_arrow_down = function()
{
ronin.surface.layer_down();
ronin.frame.layer_down();
}
this.key_arrow_left = function()

2
scripts/modules/path.js
View File

@@ -49,7 +49,7 @@ function Path(rune)
{
var s = "";
s += "<svg width='"+ronin.surface.settings["size"].width+"' height='"+ronin.surface.settings["size"].height+"' xmlns='http://www.w3.org/2000/svg' baseProfile='full' version='1.1' style='fill:none;stroke:red;stroke-width:2px;stroke-linecap:square;'>";
s += "<svg width='"+ronin.frame.settings["size"].width+"' height='"+ronin.frame.settings["size"].height+"' xmlns='http://www.w3.org/2000/svg' baseProfile='full' version='1.1' style='fill:none;stroke:red;stroke-width:2px;stroke-linecap:square;'>";
for (var i = 0; i < this.paths.length; i++) {
s += "<path d='"+this.paths[i]+"' />";

14
scripts/modules/source.js
View File

@@ -35,7 +35,7 @@ function Source(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.surface.context().drawImage(base_image, position.x, position.y, width, height);
ronin.frame.context().drawImage(base_image, position.x, position.y, width, height);
}
}
@@ -52,7 +52,7 @@ function Source(rune)
w.document.write("<title>Untitled</title><body>"+ronin.path.create_svg()+"</body>");
}
else if(params.setting("format") && params.setting("format").value == "jpg"){
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.surface.settings["size"].width+"px' height='"+ronin.surface.settings["size"].height+"px'/></body>");
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
}
else if(params.setting("format") && params.setting("format").value == "rin"){
var w = window.open('about:blank','source');
@@ -62,7 +62,7 @@ function Source(rune)
}
else{
console.log("!!")
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.surface.settings["size"].width+"px' height='"+ronin.surface.settings["size"].height+"px'/></body>");
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
}
this.layer.remove(this);
@@ -71,12 +71,12 @@ function Source(rune)
this.merge = function()
{
var a = [];
for(layer_name in ronin.surface.layers){
if(ronin.surface.layers[layer_name].manager){ continue; }
a.push(ronin.surface.layers[layer_name]);
for(layer_name in ronin.frame.layers){
if(ronin.frame.layers[layer_name].manager){ continue; }
a.push(ronin.frame.layers[layer_name]);
}
for (i = 0; i < a.length; i++) {
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.settings["size"].width,ronin.surface.settings["size"].height);
this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.settings["size"].width,ronin.frame.settings["size"].height);
}
return this.layer;
}

9
scripts/modules/type.js
View File

@@ -12,15 +12,16 @@ function Type(rune)
this.layer.clear();
var text = "Hello.".replace("_"," ");
var text = params.text() ? params.text() : "Placeholder";
var position = params.position() ? params.position() : new Position(40,80);
var color = params.color() ? params.color() :new Color("#ffffff");
var size = 40;
var font = "Georgia";
this.layer.context().font = size+"px "+font;
this.layer.context().fillStyle = color.hex;
this.layer.context().fillText(text,position.x,position.y);
var target_layer = preview ? this.layer : ronin.frame.active_layer;
target_layer.context().font = size+"px "+font;
target_layer.context().fillStyle = color.hex;
target_layer.context().fillText(text,position.x,position.y);
}
// Mouse