Improved guides

This commit is contained in:
Devine Lu Linvega 2017-01-17 09:06:20 -07:00
parent a5a9fb3e6f
commit 348943c505
8 changed files with 34 additions and 36 deletions

View File

@ -50,9 +50,7 @@
</head>
<body>
<div id='ronin'>
<div id='surface'>
<canvas id='overlay' width="1480" height="800"></canvas>
</div>
<div id='surface'></div>
<div id='widget'>Loading..</div>
<div id ='commander'>
<div id='commander_hint'></div>

View File

@ -30,7 +30,7 @@ function Hint(element)
var s = "<span class='module'>Modules</span>";
for (var key in ronin.modules){
s += "<span> <span class='value'>"+key+"</span> <span class='param'>"+ronin.modules[key].constructor.name.substr(0,2)+" ";
s += "<span> <span class='value'>"+key+"</span> <span class='param'>"+ronin.modules[key].constructor.name+" ";
}
return s;

View File

@ -1,6 +1,5 @@
var ronin = new Ronin();
ronin.element = document.getElementById('ronin');
ronin.overlay.element = document.getElementById('overlay');
ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.mode = ronin.brush;
@ -22,6 +21,8 @@ var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
ronin.install();
// Canvas
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 200;

View File

@ -34,13 +34,14 @@ function Ronin()
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
// Install
for(var key in this.modules){
this.modules[key].install();
}
//
this.install = function()
{
for(var key in this.modules){
this.modules[key].install();
}
}
this.cursors = [];

View File

@ -14,7 +14,7 @@ function FileLoad(rune)
base_image = new Image();
base_image.src = cmd.filepath().path;
base_image.src += '?' + new Date().getTime();
base_image.src += '?'+new Date().getTime();
base_image.crossOrigin = "Anonymous";
base_image.onload = function(){

View File

@ -2,10 +2,17 @@ function Overlay(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect];
// Module
this.parameters = [Position,Rect,Color];
this.color = new Color("#ff00ff");
this.layer = null;
this.install = function()
{
this.layer = new Layer("Test",this);
ronin.surface.add_layer(this.layer);
}
this.passive = function(cmd)
{
this.draw(cmd.position(),cmd.rect());
@ -14,6 +21,7 @@ function Overlay(rune)
this.active = function(cmd)
{
if(cmd.bang()){ this.guides = []; }
if(cmd.color()){ this.color = cmd.color(); }
}
// draw
@ -52,7 +60,7 @@ function Overlay(rune)
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
@ -68,7 +76,7 @@ function Overlay(rune)
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
@ -82,7 +90,7 @@ function Overlay(rune)
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
@ -96,23 +104,14 @@ function Overlay(rune)
this.context().lineCap="round";
this.context().lineWidth = 1;
this.context().strokeStyle = "#ff0000";
this.context().strokeStyle = this.color.hex;
this.context().stroke();
this.context().closePath();
}
this.resize = function(rect)
{
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);
}
this.context = function()
{
return this.element.getContext('2d');
return this.layer.context();
}
this.clear = function()

View File

@ -10,13 +10,12 @@ function Surface(rune)
this.active_layer = null;
this.render_layer = null;
this.size = null;
this.size = new Rect("200x200");
this.active = function(cmd)
{
if(cmd.rect()){
this.resize(cmd.rect(),cmd.position());
ronin.overlay.resize(cmd.rect());
}
if(cmd.color()){
@ -27,7 +26,7 @@ function Surface(rune)
}
if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
// Remove element from DOM
this.layers[this.active_layer.name].element.outerHTML = "";
delete this.layers[this.active_layer.name];
this.select_any_layer();
ronin.widget.update();
@ -36,7 +35,7 @@ function Surface(rune)
if(cmd.variable("layer")){
var name = cmd.variable("layer").value;
if(!this.layers[name]){
this.add_layer(new Layer(name,this.size));
this.add_layer(new Layer(name));
}
this.select_layer(this.layers[name]);
}

View File

@ -1,7 +1,7 @@
function Layer(name,host = "user")
function Layer(name,manager = null)
{
this.name = name;
this.host = host;
this.manager = manager;
this.element = document.createElement("canvas");
this.element.setAttribute("id","_"+name);
this.element.setAttribute("class","layer");
@ -44,7 +44,7 @@ function Layer(name,host = "user")
this.widget = function()
{
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- "+this.name+"</span><br />" : "- "+this.name+"<br />";
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- "+(this.manager != null ? this.manager.constructor.name+"." : '')+this.name+"</span><br />" : "- "+(this.manager != null ? this.manager.constructor.name+"." : '')+this.name+"<br />";
}
this.move_from = null;