Improved guides
This commit is contained in:
parent
a5a9fb3e6f
commit
348943c505
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 = [];
|
||||
|
||||
|
@ -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(){
|
||||
|
@ -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()
|
||||
|
@ -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]);
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user