Add canvas panning tool to palette

js/ChickenPaint.js

@@ -442,6 +442,7 @@ export default function ChickenPaint(options) {
             CPRectSelection: new ModeChangeAction(ChickenPaint.M_RECT_SELECTION),
             CPMoveTool:      new ModeChangeAction(ChickenPaint.M_MOVE_TOOL),
             CPRotateCanvas:  new ModeChangeAction(ChickenPaint.M_ROTATE_CANVAS),
+            CPPanCanvas:     new ModeChangeAction(ChickenPaint.M_PAN_CANVAS),
             CPColorPicker:   new ModeChangeAction(ChickenPaint.M_COLOR_PICKER),
 
             // Layer transform
@@ -1401,6 +1402,7 @@ ChickenPaint.M_ROTATE_CANVAS = 4;
 ChickenPaint.M_COLOR_PICKER = 5;
 ChickenPaint.M_GRADIENTFILL = 6;
 ChickenPaint.M_TRANSFORM = 7;
+ChickenPaint.M_PAN_CANVAS = 8;
 
 //
 // Definition of all the standard tools available

js/gui/CPCanvas.js

@@ -879,7 +879,7 @@ export default function CPCanvas(controller) {
     CPColorPickerMode.prototype = Object.create(CPMode.prototype);
     CPColorPickerMode.prototype.constructor = CPColorPickerMode;
 
-    function CPPanMode() {
+    function CPPanCanvasMode() {
         var
             panningX, panningY,
             panningOffset,
@@ -909,7 +909,8 @@ export default function CPCanvas(controller) {
         this.mouseDown = function(e, button, pressure) {
             if (this.capture) {
                 return true;
-            } else if (button == BUTTON_WHEEL || key.isPressed("space") && button == BUTTON_PRIMARY) {
+            } else if (button == BUTTON_WHEEL || key.isPressed("space") && button == BUTTON_PRIMARY
+                    || !this.transient && button == BUTTON_PRIMARY) {
                 this.capture = true;
                 panningButton = button;
                 panningX = e.pageX;
@@ -952,8 +953,8 @@ export default function CPCanvas(controller) {
         };
     }
 
-    CPPanMode.prototype = Object.create(CPMode.prototype);
-    CPPanMode.prototype.constructor = CPFloodFillMode;
+    CPPanCanvasMode.prototype = Object.create(CPMode.prototype);
+    CPPanCanvasMode.prototype.constructor = CPPanCanvasMode;
 
     function CPFloodFillMode() {
     }
@@ -2493,7 +2494,11 @@ export default function CPCanvas(controller) {
             case ChickenPaint.M_ROTATE_CANVAS:
                 newMode = rotateCanvasMode;
                 break;
-
+
+            case ChickenPaint.M_PAN_CANVAS:
+                newMode = panMode;
+                break;
+
             case ChickenPaint.M_COLOR_PICKER:
                 newMode = colorPickerMode;
                 break;
@@ -2530,7 +2535,7 @@ export default function CPCanvas(controller) {
 
     defaultMode = new CPDefaultMode();
     colorPickerMode = new CPColorPickerMode();
-    panMode = new CPPanMode();
+    panMode = new CPPanCanvasMode();
     rotateCanvasMode = new CPRotateCanvasMode();
     floodFillMode = new CPFloodFillMode();
     gradientFillMode = new CPGradientFillMode();

js/gui/CPToolPalette.js

@@ -71,11 +71,11 @@ export default function CPToolPalette(cpController) {
                 mode: ChickenPaint.M_COLOR_PICKER
             },
             {
-                className: "chickenpaint-tool-rotate-canvas",
-                command: "CPRotateCanvas",
-                commandDoubleClick: "CPResetCanvasRotation",
-                toolTip: "Rotate canvas",
-                mode: ChickenPaint.M_ROTATE_CANVAS
+                className: "chickenpaint-tool-blur",
+                command: "CPBlur",
+                toolTip: "Blur",
+                mode: ChickenPaint.M_DRAW,
+                tool: ChickenPaint.T_BLUR
             },
             {
                 className: "chickenpaint-tool-pencil",
@@ -152,12 +152,18 @@ export default function CPToolPalette(cpController) {
                 tool: ChickenPaint.T_BURN
             },
             {
-                className: "chickenpaint-tool-blur",
-                command: "CPBlur",
-                toolTip: "Blur",
-                mode: ChickenPaint.M_DRAW,
-                tool: ChickenPaint.T_BLUR
-            }
+                className: "chickenpaint-tool-rotate-canvas",
+                command: "CPRotateCanvas",
+                commandDoubleClick: "CPResetCanvasRotation",
+                toolTip: "Rotate canvas",
+                mode: ChickenPaint.M_ROTATE_CANVAS
+            },
+            {
+                className: "chickenpaint-tool-pan-canvas",
+                command: "CPPanCanvas",
+                toolTip: "Grab canvas",
+                mode: ChickenPaint.M_PAN_CANVAS
+            },
         ],
         listElem = document.createElement("ul");
 

js/languages/ja.json

@@ -136,6 +136,7 @@
     "Gradient fill": "グラデーション",
     "Color picker": "スポイト",
     "Rotate canvas":  "キャンバスの回転",
+    "Grab canvas": "キャンバスの位置",
     "Pencil": "鉛筆",
     "Pen": "ペン",
     "Airbrush": "エアブラシ",

resources/css/chickenpaint.scss

@@ -370,6 +370,9 @@
 .chickenpaint-tool-rotate-canvas .chickenpaint-toolbar-button-icon {
     background-position:0 -928px;
 }
+.chickenpaint-tool-pan-canvas .chickenpaint-toolbar-button-icon {
+    background-position:0 -672px;
+}
 .chickenpaint-tool-pencil .chickenpaint-toolbar-button-icon {
     background-position:0 -160px;
 }