diff --git a/core/images/rotate-left.tid b/core/images/rotate-left.tid new file mode 100644 index 000000000..7530aedde --- /dev/null +++ b/core/images/rotate-left.tid @@ -0,0 +1,4 @@ +title: $:/core/images/rotate-left +tags: $:/tags/Image + + \ No newline at end of file diff --git a/core/language/en-GB/Buttons.multids b/core/language/en-GB/Buttons.multids index a93da4ed4..a76768dd9 100644 --- a/core/language/en-GB/Buttons.multids +++ b/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 diff --git a/core/modules/editor/operations/bitmap/rotate-left.js b/core/modules/editor/operations/bitmap/rotate-left.js new file mode 100644 index 000000000..6e1b15d3e --- /dev/null +++ b/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(); +}; + +})(); diff --git a/core/modules/widgets/edit-bitmap.js b/core/modules/widgets/edit-bitmap.js index f094d9464..c78c9d25a 100644 --- a/core/modules/widgets/edit-bitmap.js +++ b/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); diff --git a/core/ui/EditorToolbar/rotate-left.tid b/core/ui/EditorToolbar/rotate-left.tid new file mode 100644 index 000000000..04f70f9a4 --- /dev/null +++ b/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: [is[image]] + +<$action-sendmessage + $message="tm-edit-bitmap-operation" + $param="rotate-left" +/> diff --git a/core/wiki/tags/EditorToolbar.tid b/core/wiki/tags/EditorToolbar.tid index 4611721ea..cf94edea0 100644 --- a/core/wiki/tags/EditorToolbar.tid +++ b/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