Add rotate-left button to bitmap editor toolbar

core/images/rotate-left.tid

@@ -0,0 +1,4 @@
+title: $:/core/images/rotate-left
+tags: $:/tags/Image
+
+<svg class="tc-image-rotate-left tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128"><g fill-rule="evenodd"><rect width="32" height="80" rx="8"/><rect x="48" y="96" width="80" height="32" rx="8"/><path d="M61.32 36.65c19.743 2.45 35.023 19.287 35.023 39.693a4 4 0 0 1-8 0c0-15.663-11.254-28.698-26.117-31.46l3.916 3.916a4 4 0 1 1-5.657 5.657L49.172 43.142a4 4 0 0 1 0-5.657l11.313-11.313a4 4 0 1 1 5.657 5.656l-4.821 4.822z"/></g></svg>

core/language/en-GB/Buttons.multids

@@ -163,6 +163,8 @@ PreviewType/Caption: preview type
 PreviewType/Hint: Choose preview type
 Quote/Caption: quote
 Quote/Hint: Apply quoted text formatting to lines containing selection
+RotateLeft/Caption: rotate left
+RotateLeft/Hint: Rotate image left by 90 degrees
 Size/Caption: image size
 Size/Caption/Height: Height:
 Size/Caption/Resize: Resize image

core/modules/editor/operations/bitmap/rotate-left.js

@@ -0,0 +1,24 @@
+/*\
+title: $:/core/modules/editor/operations/bitmap/rotate-left.js
+type: application/javascript
+module-type: bitmapeditoroperation
+
+Bitmap editor operation to rotate the image left by 90 degrees
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports["rotate-left"] = function(event) {
+	// Rotate the canvas left by 90 degrees
+	this.rotateCanvasLeft();
+	// Update the input controls
+	this.refreshToolbar();
+	// Save the image into the tiddler
+	this.saveChanges();
+};
+
+})();

core/modules/widgets/edit-bitmap.js

@@ -189,6 +189,33 @@ EditBitmapWidget.prototype.changeCanvasSize = function(newWidth,newHeight) {
 	ctx.drawImage(this.currCanvas,0,0);
 };
 
+/*
+** Rotate the canvas left by 90 degrees
+*/
+EditBitmapWidget.prototype.rotateCanvasLeft = function() {
+	// Get the current size of the image
+	var origWidth = this.canvasDomNode.width,
+		origHeight = this.canvasDomNode.height;
+	// Create and size a new canvas
+	var newCanvas = this.document.createElement("canvas"),
+		newWidth = origHeight,
+		newHeight = origWidth;
+	this.initCanvas(newCanvas,newWidth,newHeight);
+	// Copy the old image
+	var ctx = newCanvas.getContext("2d");
+	ctx.translate(newWidth / 2,newHeight / 2);
+	ctx.rotate(-Math.PI / 2);
+	ctx.drawImage(this.currCanvas,-origWidth / 2,-origHeight / 2);
+	// Set the new canvas as the current one
+	this.currCanvas = newCanvas;
+	// Set the size of the onscreen canvas
+	this.canvasDomNode.width = newWidth;
+	this.canvasDomNode.height = newHeight;
+	// Paint the onscreen canvas with the offscreen canvas
+	ctx = this.canvasDomNode.getContext("2d");
+	ctx.drawImage(this.currCanvas,0,0);
+};
+
 EditBitmapWidget.prototype.handleTouchStartEvent = function(event) {
 	this.brushDown = true;
 	this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);

core/ui/EditorToolbar/rotate-left.tid

@@ -0,0 +1,11 @@
+title: $:/core/ui/EditorToolbar/rotate-left
+tags: $:/tags/EditorToolbar
+icon: $:/core/images/rotate-left
+caption: {{$:/language/Buttons/RotateLeft/Caption}}
+description: {{$:/language/Buttons/RotateLeft/Hint}}
+condition: [<targetTiddler>is[image]]
+
+<$action-sendmessage
+	$message="tm-edit-bitmap-operation"
+	$param="rotate-left"
+/>

core/wiki/tags/EditorToolbar.tid

@@ -1,2 +1,2 @@
 title: $:/tags/EditorToolbar
-list: $:/core/ui/EditorToolbar/paint $:/core/ui/EditorToolbar/opacity $:/core/ui/EditorToolbar/line-width $:/core/ui/EditorToolbar/clear $:/core/ui/EditorToolbar/bold $:/core/ui/EditorToolbar/italic $:/core/ui/EditorToolbar/strikethrough $:/core/ui/EditorToolbar/underline $:/core/ui/EditorToolbar/superscript $:/core/ui/EditorToolbar/subscript $:/core/ui/EditorToolbar/mono-line $:/core/ui/EditorToolbar/mono-block $:/core/ui/EditorToolbar/quote $:/core/ui/EditorToolbar/list-bullet $:/core/ui/EditorToolbar/list-number $:/core/ui/EditorToolbar/heading-1 $:/core/ui/EditorToolbar/heading-2 $:/core/ui/EditorToolbar/heading-3 $:/core/ui/EditorToolbar/heading-4 $:/core/ui/EditorToolbar/heading-5 $:/core/ui/EditorToolbar/heading-6 $:/core/ui/EditorToolbar/link $:/core/ui/EditorToolbar/excise $:/core/ui/EditorToolbar/picture $:/core/ui/EditorToolbar/stamp $:/core/ui/EditorToolbar/size $:/core/ui/EditorToolbar/editor-height $:/core/ui/EditorToolbar/more $:/core/ui/EditorToolbar/preview $:/core/ui/EditorToolbar/preview-type
+list: $:/core/ui/EditorToolbar/paint $:/core/ui/EditorToolbar/opacity $:/core/ui/EditorToolbar/line-width $:/core/ui/EditorToolbar/rotate-left $:/core/ui/EditorToolbar/clear $:/core/ui/EditorToolbar/bold $:/core/ui/EditorToolbar/italic $:/core/ui/EditorToolbar/strikethrough $:/core/ui/EditorToolbar/underline $:/core/ui/EditorToolbar/superscript $:/core/ui/EditorToolbar/subscript $:/core/ui/EditorToolbar/mono-line $:/core/ui/EditorToolbar/mono-block $:/core/ui/EditorToolbar/quote $:/core/ui/EditorToolbar/list-bullet $:/core/ui/EditorToolbar/list-number $:/core/ui/EditorToolbar/heading-1 $:/core/ui/EditorToolbar/heading-2 $:/core/ui/EditorToolbar/heading-3 $:/core/ui/EditorToolbar/heading-4 $:/core/ui/EditorToolbar/heading-5 $:/core/ui/EditorToolbar/heading-6 $:/core/ui/EditorToolbar/link $:/core/ui/EditorToolbar/excise $:/core/ui/EditorToolbar/picture $:/core/ui/EditorToolbar/stamp $:/core/ui/EditorToolbar/size $:/core/ui/EditorToolbar/editor-height $:/core/ui/EditorToolbar/more $:/core/ui/EditorToolbar/preview $:/core/ui/EditorToolbar/preview-type