mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00
Code Issues Releases Wiki Activity

Add rotate-left button to bitmap editor toolbar

Browse Source
This commit is contained in:
Jermolene 2018-03-12 12:45:56 +00:00
parent 22a15bed67
commit c0569849d2
6 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/images/rotate-left.tid Normal file
View File

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

2
core/language/en-GB/Buttons.multids
View File

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

24
core/modules/editor/operations/bitmap/rotate-left.js Normal file
View File

@ -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();
};
})();

27
core/modules/widgets/edit-bitmap.js
View File

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

11
core/ui/EditorToolbar/rotate-left.tid Normal file
View File

@ -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"
/>

2
core/wiki/tags/EditorToolbar.tid
View File

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