mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-27 14:48:19 +00:00
Add rotate-left button to bitmap editor toolbar
This commit is contained in:
parent
22a15bed67
commit
c0569849d2
4
core/images/rotate-left.tid
Normal file
4
core/images/rotate-left.tid
Normal 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>
|
@ -163,6 +163,8 @@ PreviewType/Caption: preview type
|
|||||||
PreviewType/Hint: Choose preview type
|
PreviewType/Hint: Choose preview type
|
||||||
Quote/Caption: quote
|
Quote/Caption: quote
|
||||||
Quote/Hint: Apply quoted text formatting to lines containing selection
|
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: image size
|
||||||
Size/Caption/Height: Height:
|
Size/Caption/Height: Height:
|
||||||
Size/Caption/Resize: Resize image
|
Size/Caption/Resize: Resize image
|
||||||
|
24
core/modules/editor/operations/bitmap/rotate-left.js
Normal file
24
core/modules/editor/operations/bitmap/rotate-left.js
Normal 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();
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
@ -189,6 +189,33 @@ EditBitmapWidget.prototype.changeCanvasSize = function(newWidth,newHeight) {
|
|||||||
ctx.drawImage(this.currCanvas,0,0);
|
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) {
|
EditBitmapWidget.prototype.handleTouchStartEvent = function(event) {
|
||||||
this.brushDown = true;
|
this.brushDown = true;
|
||||||
this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);
|
this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);
|
||||||
|
11
core/ui/EditorToolbar/rotate-left.tid
Normal file
11
core/ui/EditorToolbar/rotate-left.tid
Normal 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"
|
||||||
|
/>
|
@ -1,2 +1,2 @@
|
|||||||
title: $:/tags/EditorToolbar
|
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
|
||||||
|
Loading…
Reference in New Issue
Block a user