Removed modes, merged with modules.

This commit is contained in:
Devine Lu Linvega 2016-12-19 16:24:39 -07:00
parent 6b7704c14a
commit 8d4e5a0d4a
17 changed files with 136 additions and 163 deletions

View File

@ -31,11 +31,6 @@
<script type="text/javascript" src="scripts/modules/filter.eval.js"></script> <script type="text/javascript" src="scripts/modules/filter.eval.js"></script>
<script type="text/javascript" src="scripts/modules/filter.balance.js"></script> <script type="text/javascript" src="scripts/modules/filter.balance.js"></script>
<script type="text/javascript" src="scripts/modes/mode.js"></script>
<script type="text/javascript" src="scripts/modes/mode.paint.js"></script>
<script type="text/javascript" src="scripts/modes/mode.drag.js"></script>
<script type="text/javascript" src="scripts/modes/mode.guide.js"></script>
<script type="text/javascript" src="scripts/core/keyboard.js"></script> <script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/cursor.js"></script> <script type="text/javascript" src="scripts/core/cursor.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script> <script type="text/javascript" src="scripts/core/command.js"></script>
@ -52,7 +47,7 @@
<div id='surface' style='left:0px;top:0px'> <div id='surface' style='left:0px;top:0px'>
<canvas id='overlay' width="1480" height="800"></canvas> <canvas id='overlay' width="1480" height="800"></canvas>
<canvas id="workspace" width="1480" height="800"></canvas> <canvas id="workspace" width="1480" height="800"></canvas>
<div id='widget'>This is a test</div> <div id='widget'>Loading..</div>
</div> </div>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'></div> <div id='commander_hint'></div>

View File

@ -2,6 +2,7 @@ function Commander(element,element_input)
{ {
this.element = element; this.element = element;
this.element_input = element_input; this.element_input = element_input;
this.hint = new Hint();
this.storage = []; this.storage = [];
this.storage_index = 0; this.storage_index = 0;
this.always_show = false; this.always_show = false;
@ -44,6 +45,7 @@ function Commander(element,element_input)
ronin.modules[key].passive(cmd); ronin.modules[key].passive(cmd);
ronin.module = ronin.modules[key]; ronin.module = ronin.modules[key];
} }
this.hint.update(ronin.module,cmd);
} }
// //

View File

@ -1,22 +1,22 @@
function Cursor() function Cursor()
{ {
this.mode = new Mode_Paint(); this.mode = null;
this.position = new Position(); this.position = new Position();
this.update = function(event) this.update = function(event)
{ {
if(event.ctrlKey === true){ this.set_mode(new Mode_Guide()); } if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
else if(event.altKey === true){ this.set_mode(new Mode_Drag()); } else if(event.altKey === true){ this.set_mode(ronin.canvas); }
else if(event.shiftKey === true){ this.set_mode(new Mode_Paint()); } else if(event.shiftKey === true){ this.set_mode(ronin.brush); }
else{ this.set_mode(new Mode_Paint()); } else{ this.set_mode(ronin.brush); }
} }
this.set_mode = function(mode) this.set_mode = function(mode)
{ {
if(this.mode.name == mode.name){ return; } // if(this.mode.constructor.name == mode.constructor.name){ return; }
this.mode = mode; this.mode = mode;
document.body.setAttribute("class",this.mode.name); document.body.setAttribute("class",this.mode.constructor.name);
ronin.widget.update(); // ronin.widget.update();
} }
this.mouse_down = function(position) this.mouse_down = function(position)

View File

@ -4,12 +4,10 @@ function Hint(element)
this.element = element; this.element = element;
this.update = function() this.update = function(module,cmd)
{ {
return; // TODO if(module){
this.element.innerHTML = this.message(module,cmd);
if(ronin.module){
this.element.innerHTML = this.message(ronin.module,commander.cmd);
this.element.style.display = "block"; this.element.style.display = "block";
} }
else{ else{

View File

@ -1,11 +1,12 @@
var ronin = new Ronin(); var ronin = new Ronin();
ronin.canvas.element = document.getElementById('workspace'); ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay'); ronin.overlay.element = document.getElementById('overlay');
ronin.hint.element = document.getElementById('commander_hint');
ronin.surface = document.getElementById('surface'); ronin.surface = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget'); ronin.widget.element = document.getElementById('widget');
ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
commander.hint.element = document.getElementById('commander_hint');
// Cursor // Cursor
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false); document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);

View File

@ -34,9 +34,8 @@ function Keyboard()
// Passive // Passive
commander.passive(commander.element_input.value); commander.passive(commander.element_input.value);
ronin.hint.update();
ronin.cursor.set_mode(new Mode_Paint()); ronin.cursor.set_mode(ronin.brush);
ronin.widget.update(); ronin.widget.update();
}; };

View File

@ -2,7 +2,6 @@ function Ronin()
{ {
this.modules = {}; this.modules = {};
this.hint = new Hint();
this.widget = new Widget(); this.widget = new Widget();
this.surface = null; this.surface = null;
@ -34,7 +33,9 @@ function Ronin()
this.position_in_canvas = function(e) this.position_in_canvas = function(e)
{ {
return new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top)); var x = e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left);
var y = e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top);
return new Position(x+","+y);
} }
this.position_in_window = function(p) this.position_in_window = function(p)

View File

@ -10,7 +10,7 @@ function Widget()
s += ronin.modules[key].widget(); s += ronin.modules[key].widget();
} }
s += "<span class='cursor'>"+ronin.cursor.mode.widget()+"</span>"; // s += "<span class='cursor'>"+ronin.cursor.mode.widget()+"</span>";
this.element.innerHTML = s; this.element.innerHTML = s;
} }

View File

@ -1,33 +0,0 @@
function Mode_Drag()
{
Mode.call(this);
this.name = "Drag";
this.drag_from = null;
this.mouse_down = function(position)
{
this.drag_from = ronin.position_in_window(position);
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
position = ronin.position_in_window(position);
var offset_x = this.drag_from.x - position.x;
var offset_y = this.drag_from.y - position.y;
ronin.surface.style.left = ronin.surface.style.left ? parseInt(ronin.surface.style.left) - offset_x : offset_x;
ronin.surface.style.top = ronin.surface.style.top ? parseInt(ronin.surface.style.top) - offset_y : offset_y;
this.drag_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
}

View File

@ -1,38 +0,0 @@
function Mode_Guide()
{
Mode.call(this);
this.name = "Guide";
this.live_draw_from = null;
this.mouse_down = function(position)
{
ronin.overlay.clear();
ronin.overlay.draw_pointer(position);
this.live_draw_from = position;
commander.show();
commander.element_input.focus();
commander.element_input.value = "| "+this.live_draw_from.render();
}
this.mouse_move = function(position)
{
if(this.live_draw_from === null){ return; }
ronin.overlay.clear();
var rect = new Rect();
rect.width = position.x - this.live_draw_from.x;
rect.height = position.y - this.live_draw_from.y;
ronin.overlay.draw_rect(this.live_draw_from,rect);
commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
}
this.mouse_up = function(position)
{
this.live_draw_from = null;
commander.element_input.focus();
}
}

View File

@ -1,24 +0,0 @@
function Mode()
{
this.name = "Unknown";
this.widget = function()
{
return this.name;
}
this.mouse_down = function(event)
{
console.log("??");
}
this.mouse_move = function(event)
{
}
this.mouse_up = function(event)
{
}
}

View File

@ -1,40 +0,0 @@
function Mode_Paint()
{
Mode.call(this);
this.name = "Paint";
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].start();
}
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].draw();
}
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].stop();
}
ronin.stroke.save_stroke();
}
}

View File

@ -5,7 +5,6 @@ function Brush(rune)
this.parameters = [Position,Rect,Angle,Color,Value,Bang]; this.parameters = [Position,Rect,Angle,Color,Value,Bang];
this.pointers = [new Pointer(new Position())]; this.pointers = [new Pointer(new Position())];
this.position = new Position();
this.size = 1; this.size = 1;
this.opacity = 1; this.opacity = 1;
this.color = new Color(); this.color = new Color();
@ -63,6 +62,43 @@ function Brush(rune)
this.widget = function() this.widget = function()
{ {
return "> "+this.size+" <span style='color:"+this.color.render()+"'>"+this.color.render()+"</span> "; return "> "+this.size+" <span>"+this.color.render()+"</span> ";
}
// Cursor
this.is_drawing = false;
this.mouse_down = function(position)
{
this.is_drawing = true;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].start();
}
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.is_drawing === false){ return; }
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].draw();
}
ronin.stroke.append_stroke(position);
}
this.mouse_up = function(position)
{
this.is_drawing = false;
for (i = 0; i < ronin.brush.pointers.length; i++) {
ronin.brush.pointers[i].stop();
}
ronin.stroke.save_stroke();
} }
} }

View File

@ -67,4 +67,33 @@ function Canvas(rune)
{ {
return "@ "+this.element.width+"x"+this.element.height+" "; return "@ "+this.element.width+"x"+this.element.height+" ";
} }
// Cursor
this.drag_from = null;
this.mouse_down = function(position)
{
this.drag_from = ronin.position_in_window(position);
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
position = ronin.position_in_window(position);
var offset_x = this.drag_from.x - position.x;
var offset_y = this.drag_from.y - position.y;
ronin.surface.style.left = ronin.surface.style.left ? parseInt(ronin.surface.style.left) - offset_x : offset_x;
ronin.surface.style.top = ronin.surface.style.top ? parseInt(ronin.surface.style.top) - offset_y : offset_y;
this.drag_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
} }

View File

@ -24,4 +24,17 @@ function Module(rune)
{ {
return ""; return "";
} }
this.mouse_down = function(position)
{
}
this.mouse_move = function(position)
{
}
this.mouse_up = function(position)
{
}
} }

View File

@ -118,4 +118,38 @@ function Overlay(rune)
{ {
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height); this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
} }
// Cursor
this.live_draw_from = null;
this.mouse_down = function(position)
{
ronin.overlay.clear();
ronin.overlay.draw_pointer(position);
this.live_draw_from = position;
commander.show();
commander.element_input.focus();
commander.element_input.value = "| "+this.live_draw_from.render();
}
this.mouse_move = function(position)
{
if(this.live_draw_from === null){ return; }
ronin.overlay.clear();
var rect = new Rect();
rect.width = position.x - this.live_draw_from.x;
rect.height = position.y - this.live_draw_from.y;
ronin.overlay.draw_rect(this.live_draw_from,rect);
commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
}
this.mouse_up = function(position)
{
this.live_draw_from = null;
commander.element_input.focus();
}
} }

View File

@ -24,8 +24,8 @@ function Stroke(rune)
for (i = 0; i < this.positions.length; i++) { for (i = 0; i < this.positions.length; i++) {
s += this.positions[i].render()+" "; s += this.positions[i].render()+" ";
} }
if(this.positions.length > 0){ ronin.history.add(s); }
this.positions = null; this.positions = null;
ronin.history.add(s);
} }
// Module // Module