Shortcut to move canvas content.

index.html

@@ -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'>

scripts/core/cursor.js

@@ -5,9 +5,13 @@ function Cursor()
   
   this.update = function(event)
   {
-    if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
+    if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */  }
-    else if(event.altKey === true){ this.set_mode(ronin.canvas); }
+    else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.planner);  }
-    else if(event.shiftKey === true){ this.set_mode(ronin.eraser);  }
+    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); }
   }
   

scripts/core/init.js

@@ -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;
 

scripts/core/ronin.js

@@ -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 x = e.clientX - parseFloat(ronin.surface.element.style.left) - parseFloat(ronin.canvas.element.style.left);
-    var y = e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top);
+    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()

scripts/modules/canvas.js

@@ -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_x = this.move_from.x - position.x;
-    var offset_y = this.drag_from.y - position.y;
+    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;
+    this.context().globalCompositeOperation = "copy";
-    ronin.surface.style.top = ronin.surface.style.top ? parseInt(ronin.surface.style.top) - offset_y : offset_y;
+    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;
   }
 }

scripts/modules/planner.js

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

scripts/modules/surface.js

@@ -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;
+  }
+}