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

Shortcut to move canvas content.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-12-21 08:48:21 -07:00
parent bfaa5310f6
commit c6b6d6a080
7 changed files with 87 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -14,6 +14,7 @@
<script type="text/javascript" src="scripts/modules/module.js"></script>
<script type="text/javascript" src="scripts/modules/canvas.js"></script>
<script type="text/javascript" src="scripts/modules/planner.js"></script>
<script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
<script type="text/javascript" src="scripts/modules/overlay.js"></script>
@ -24,6 +25,7 @@
<script type="text/javascript" src="scripts/modules/help.js"></script>
<script type="text/javascript" src="scripts/modules/history.js"></script>
<script type="text/javascript" src="scripts/modules/eraser.js"></script>
<script type="text/javascript" src="scripts/modules/surface.js"></script>
<script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>
@ -48,6 +50,7 @@
<div id='surface' style='left:0px;top:0px'>
<canvas id='overlay' width="1480" height="800"></canvas>
<canvas id="workspace" width="1480" height="800"></canvas>
<canvas id="planner" width="1480" height="800"></canvas>
<div id='widget'>Loading..</div>
</div>
<div id ='commander'>

8
scripts/core/cursor.js
View File

@ -5,8 +5,12 @@ function Cursor()
this.update = function(event)
{
if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
else if(event.altKey === true){ this.set_mode(ronin.canvas); }
if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */ }
else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.planner); }
else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.canvas); }
else if(event.ctrltKey === true && event.altKey === true){ /* */ }
else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
else if(event.altKey === true){ this.set_mode(ronin.surface); }
else if(event.shiftKey === true){ this.set_mode(ronin.eraser); }
else{ this.set_mode(ronin.brush); }
}

2
scripts/core/init.js
View File

@ -1,7 +1,7 @@
var ronin = new Ronin();
ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay');
ronin.surface = document.getElementById('surface');
ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.mode = ronin.brush;

11
scripts/core/ronin.js
View File

@ -3,7 +3,6 @@ function Ronin()
this.modules = {};
this.widget = new Widget();
this.surface = null;
this.canvas = new Canvas("@");
this.overlay = new Overlay("|");
@ -16,6 +15,8 @@ function Ronin()
this.help = new Help("?");
this.history = new History("^");
this.eraser = new Eraser(".");
this.planner = new Planner("*");
this.surface = new Surface("#");
this.cursor = new Cursor();
@ -30,19 +31,21 @@ function Ronin()
this.modules[this.help.rune] = this.help;
this.modules[this.history.rune] = this.history;
this.modules[this.eraser.rune] = this.eraser;
this.modules[this.planner.rune] = this.planner;
this.modules[this.surface.rune] = this.surface;
this.cursors = [];
this.position_in_canvas = function(e)
{
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);
var x = e.clientX - parseFloat(ronin.surface.element.style.left) - parseFloat(ronin.canvas.element.style.left);
var y = e.clientY- parseFloat(ronin.surface.element.style.top) - parseFloat(ronin.canvas.element.style.top);
return new Position(x+","+y);
}
this.position_in_window = function(p)
{
return new Position(p.x + parseFloat(ronin.surface.style.left) + parseFloat(ronin.canvas.element.style.left),p.y + parseFloat(ronin.surface.style.top) + parseFloat(ronin.canvas.element.style.top));
return new Position(p.x + parseFloat(ronin.surface.element.style.left) + parseFloat(ronin.canvas.element.style.left),p.y + parseFloat(ronin.surface.element.style.top) + parseFloat(ronin.canvas.element.style.top));
}
this.timestamp = function()

21
scripts/modules/canvas.js
View File

@ -70,35 +70,36 @@ function Canvas(rune)
this.widget_cursor = function()
{
return "Drag";
return "Move";
}
// Cursor
this.drag_from = null;
this.move_from = null;
this.mouse_down = function(position)
{
this.drag_from = ronin.position_in_window(position);
this.move_from = ronin.position_in_window(position);
}
this.mouse_move = function(position)
{
if(this.drag_from === null){ return; }
if(this.move_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;
var offset_x = this.move_from.x - position.x;
var offset_y = this.move_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.context().globalCompositeOperation = "copy";
this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
this.context().globalCompositeOperation = "source-over"
this.drag_from = new Position(position.x,position.y);
this.move_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
this.move_from = null;
}
}

9
scripts/modules/planner.js Normal file
View File

@ -0,0 +1,9 @@
function Planner(rune)
{
Module.call(this,rune);
this.widget_cursor = function()
{
return "Planner";
}
}

49
scripts/modules/surface.js Normal file
View File

@ -0,0 +1,49 @@
function Surface(rune)
{
Module.call(this,rune);
this.element = null;
this.parameters = [Any];
this.active = function(cmd)
{
}
this.passive = function(cmd)
{
}
this.widget_cursor = function()
{
return "Drag";
}
// 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.element.style.left = ronin.surface.element.style.left ? parseInt(ronin.surface.element.style.left) - offset_x : offset_x;
ronin.surface.element.style.top = ronin.surface.element.style.top ? parseInt(ronin.surface.element.style.top) - offset_y : offset_y;
this.drag_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.drag_from = null;
}
}