Improved guides
This commit is contained in:
		| @@ -50,9 +50,7 @@ | |||||||
|   </head> |   </head> | ||||||
|   <body> |   <body> | ||||||
|     <div id='ronin'> |     <div id='ronin'> | ||||||
|       <div id='surface'> |       <div id='surface'></div> | ||||||
|         <canvas id='overlay' width="1480" height="800"></canvas> |  | ||||||
|       </div> |  | ||||||
|       <div id='widget'>Loading..</div> |       <div id='widget'>Loading..</div> | ||||||
|       <div id ='commander'> |       <div id ='commander'> | ||||||
|         <div id='commander_hint'></div> |         <div id='commander_hint'></div> | ||||||
|   | |||||||
| @@ -30,7 +30,7 @@ function Hint(element) | |||||||
|     var s = "<span class='module'>Modules</span>"; |     var s = "<span class='module'>Modules</span>"; | ||||||
|      |      | ||||||
|     for (var key in ronin.modules){ |     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; |     return s; | ||||||
|   | |||||||
| @@ -1,6 +1,5 @@ | |||||||
| var ronin = new Ronin(); | var ronin = new Ronin(); | ||||||
| ronin.element = document.getElementById('ronin'); | ronin.element = document.getElementById('ronin'); | ||||||
| ronin.overlay.element = document.getElementById('overlay'); |  | ||||||
| ronin.surface.element = document.getElementById('surface'); | ronin.surface.element = document.getElementById('surface'); | ||||||
| ronin.widget.element = document.getElementById('widget'); | ronin.widget.element = document.getElementById('widget'); | ||||||
| ronin.cursor.mode = ronin.brush; | ronin.cursor.mode = ronin.brush; | ||||||
| @@ -22,6 +21,8 @@ var keyboard = new Keyboard(); | |||||||
| document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; | document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; | ||||||
| document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); }; | document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); }; | ||||||
|  |  | ||||||
|  | ronin.install(); | ||||||
|  |  | ||||||
| // Canvas | // Canvas | ||||||
| var starting_canvas = new Rect(); | var starting_canvas = new Rect(); | ||||||
| starting_canvas.width = window.innerWidth - 200; | starting_canvas.width = window.innerWidth - 200; | ||||||
|   | |||||||
| @@ -34,13 +34,14 @@ function Ronin() | |||||||
|   this.modules[this.vector.rune]   = this.vector; |   this.modules[this.vector.rune]   = this.vector; | ||||||
|   this.modules[this.help.rune]     = this.help; |   this.modules[this.help.rune]     = this.help; | ||||||
|  |  | ||||||
|   // Install |   //  | ||||||
|  |  | ||||||
|  |   this.install = function() | ||||||
|  |   { | ||||||
|     for(var key in this.modules){ |     for(var key in this.modules){ | ||||||
|       this.modules[key].install(); |       this.modules[key].install(); | ||||||
|     } |     } | ||||||
|  |   } | ||||||
|   //  |  | ||||||
|    |    | ||||||
|   this.cursors = []; |   this.cursors = []; | ||||||
|    |    | ||||||
|   | |||||||
| @@ -2,9 +2,16 @@ function Overlay(rune) | |||||||
| { | { | ||||||
|   Module.call(this,rune); |   Module.call(this,rune); | ||||||
|    |    | ||||||
|   this.parameters = [Position,Rect]; |   this.parameters = [Position,Rect,Color]; | ||||||
|    |    | ||||||
|   // Module |   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.passive = function(cmd) | ||||||
|   { |   { | ||||||
| @@ -14,6 +21,7 @@ function Overlay(rune) | |||||||
|   this.active = function(cmd) |   this.active = function(cmd) | ||||||
|   { |   { | ||||||
|     if(cmd.bang()){ this.guides = []; } |     if(cmd.bang()){ this.guides = []; } | ||||||
|  |     if(cmd.color()){ this.color = cmd.color(); } | ||||||
|   } |   } | ||||||
|    |    | ||||||
|   // draw |   // draw | ||||||
| @@ -52,7 +60,7 @@ function Overlay(rune) | |||||||
|      |      | ||||||
|     this.context().lineCap="round"; |     this.context().lineCap="round"; | ||||||
|     this.context().lineWidth = 1; |     this.context().lineWidth = 1; | ||||||
|     this.context().strokeStyle = "#ff0000"; |     this.context().strokeStyle = this.color.hex; | ||||||
|     this.context().stroke(); |     this.context().stroke(); | ||||||
|     this.context().closePath(); |     this.context().closePath(); | ||||||
|   } |   } | ||||||
| @@ -68,7 +76,7 @@ function Overlay(rune) | |||||||
|      |      | ||||||
|     this.context().lineCap="round"; |     this.context().lineCap="round"; | ||||||
|     this.context().lineWidth = 1; |     this.context().lineWidth = 1; | ||||||
|     this.context().strokeStyle = "#ff0000"; |     this.context().strokeStyle = this.color.hex; | ||||||
|     this.context().stroke(); |     this.context().stroke(); | ||||||
|     this.context().closePath(); |     this.context().closePath(); | ||||||
|   } |   } | ||||||
| @@ -82,7 +90,7 @@ function Overlay(rune) | |||||||
|      |      | ||||||
|     this.context().lineCap="round"; |     this.context().lineCap="round"; | ||||||
|     this.context().lineWidth = 1; |     this.context().lineWidth = 1; | ||||||
|     this.context().strokeStyle = "#ff0000"; |     this.context().strokeStyle = this.color.hex; | ||||||
|     this.context().stroke(); |     this.context().stroke(); | ||||||
|     this.context().closePath(); |     this.context().closePath(); | ||||||
|   } |   } | ||||||
| @@ -96,23 +104,14 @@ function Overlay(rune) | |||||||
|      |      | ||||||
|     this.context().lineCap="round"; |     this.context().lineCap="round"; | ||||||
|     this.context().lineWidth = 1; |     this.context().lineWidth = 1; | ||||||
|     this.context().strokeStyle = "#ff0000"; |     this.context().strokeStyle = this.color.hex; | ||||||
|     this.context().stroke(); |     this.context().stroke(); | ||||||
|     this.context().closePath(); |     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() |   this.context = function() | ||||||
|   { |   { | ||||||
|     return this.element.getContext('2d'); |     return this.layer.context(); | ||||||
|   } |   } | ||||||
|    |    | ||||||
|   this.clear = function() |   this.clear = function() | ||||||
|   | |||||||
| @@ -10,13 +10,12 @@ function Surface(rune) | |||||||
|   this.active_layer = null; |   this.active_layer = null; | ||||||
|   this.render_layer = null; |   this.render_layer = null; | ||||||
|  |  | ||||||
|   this.size = null; |   this.size = new Rect("200x200"); | ||||||
|    |    | ||||||
|   this.active = function(cmd) |   this.active = function(cmd) | ||||||
|   { |   { | ||||||
|     if(cmd.rect()){ |     if(cmd.rect()){ | ||||||
|       this.resize(cmd.rect(),cmd.position()); |       this.resize(cmd.rect(),cmd.position()); | ||||||
|       ronin.overlay.resize(cmd.rect()); |  | ||||||
|     } |     } | ||||||
|      |      | ||||||
|     if(cmd.color()){ |     if(cmd.color()){ | ||||||
| @@ -27,7 +26,7 @@ function Surface(rune) | |||||||
|     } |     } | ||||||
|  |  | ||||||
|     if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){ |     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]; |       delete this.layers[this.active_layer.name]; | ||||||
|       this.select_any_layer(); |       this.select_any_layer(); | ||||||
|       ronin.widget.update(); |       ronin.widget.update(); | ||||||
| @@ -36,7 +35,7 @@ function Surface(rune) | |||||||
|     if(cmd.variable("layer")){ |     if(cmd.variable("layer")){ | ||||||
|       var name = cmd.variable("layer").value; |       var name = cmd.variable("layer").value; | ||||||
|       if(!this.layers[name]){ |       if(!this.layers[name]){ | ||||||
|         this.add_layer(new Layer(name,this.size)); |         this.add_layer(new Layer(name)); | ||||||
|       } |       } | ||||||
|       this.select_layer(this.layers[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.name = name; | ||||||
|   this.host = host; |   this.manager = manager; | ||||||
|   this.element = document.createElement("canvas"); |   this.element = document.createElement("canvas"); | ||||||
|   this.element.setAttribute("id","_"+name); |   this.element.setAttribute("id","_"+name); | ||||||
|   this.element.setAttribute("class","layer"); |   this.element.setAttribute("class","layer"); | ||||||
| @@ -44,7 +44,7 @@ function Layer(name,host = "user") | |||||||
|  |  | ||||||
|   this.widget = function() |   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; |   this.move_from = null; | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user