mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-29 19:40:28 +00:00
Improve the bitmap editor to allow the bitmap to be resized
A bit rough and ready, too
This commit is contained in:
Jeremy Ruston
parent
6ae73e0fc7
commit
694ca76e7f
@ -12,8 +12,14 @@ A bitmap editor
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
// Default images sizes
|
||||
var DEFAULT_IMAGE_WIDTH = 300,
|
||||
DEFAULT_IMAGE_HEIGHT = 182;
|
||||
DEFAULT_IMAGE_HEIGHT = 185;
|
||||
|
||||
// The elements of the editor UI
|
||||
var DOM_CANVAS = 0,
|
||||
DOM_WIDTH = 1,
|
||||
DOM_HEIGHT = 2;
|
||||
|
||||
var BitmapEditor = function(editWidget,tiddlerTitle,fieldName) {
|
||||
this.editWidget = editWidget;
|
||||
@ -58,13 +64,39 @@ BitmapEditor.prototype.render = function() {
|
||||
handlerObject: this,
|
||||
handlerMethod: "handleMouseUpEvent"
|
||||
}]
|
||||
},{
|
||||
type: "element",
|
||||
tag: "input",
|
||||
attributes: {
|
||||
"class": {type: "string", value: "tw-edit-bitmapeditor-width"},
|
||||
"type": {type: "string", value: "number"},
|
||||
"value": {type: "string", value: ""}
|
||||
},
|
||||
events: [{
|
||||
name: "change",
|
||||
handlerObject: this,
|
||||
handlerMethod: "handleWidthChangeEvent"
|
||||
}]
|
||||
},{
|
||||
type: "element",
|
||||
tag: "input",
|
||||
attributes: {
|
||||
"class": {type: "string", value: "tw-edit-bitmapeditor-height"},
|
||||
"type": {type: "string", value: "number"},
|
||||
"value": {type: "string", value: ""}
|
||||
},
|
||||
events: [{
|
||||
name: "change",
|
||||
handlerObject: this,
|
||||
handlerMethod: "handleHeightChangeEvent"
|
||||
}]
|
||||
}];
|
||||
this.editWidget.children = this.editWidget.renderer.renderTree.createRenderers(this.editWidget.renderer,children);
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.postRenderInDom = function() {
|
||||
var tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
|
||||
canvas = this.editWidget.renderer.domNode.firstChild,
|
||||
canvas = this.getDomNode(DOM_CANVAS),
|
||||
currImage = new Image();
|
||||
// Set up event handlers for loading the image
|
||||
var self = this;
|
||||
@ -74,6 +106,8 @@ BitmapEditor.prototype.postRenderInDom = function() {
|
||||
// And also copy the current bitmap to the off-screen canvas
|
||||
self.currCanvas = self.editWidget.renderer.renderTree.document.createElement("canvas");
|
||||
self.initCanvas(self.currCanvas,currImage.width,currImage.height,currImage);
|
||||
// Set the width and height input boxes
|
||||
self.updateSize();
|
||||
};
|
||||
currImage.onerror = function() {
|
||||
// Set the on-screen canvas size and clear it
|
||||
@ -81,6 +115,8 @@ BitmapEditor.prototype.postRenderInDom = function() {
|
||||
// Set the off-screen canvas size and clear it
|
||||
self.currCanvas = self.editWidget.renderer.renderTree.document.createElement("canvas");
|
||||
self.initCanvas(self.currCanvas,DEFAULT_IMAGE_WIDTH,DEFAULT_IMAGE_HEIGHT);
|
||||
// Set the width and height input boxes
|
||||
self.updateSize();
|
||||
}
|
||||
// Get the current bitmap into an image object
|
||||
currImage.src = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
|
||||
@ -98,6 +134,61 @@ BitmapEditor.prototype.initCanvas = function(canvas,width,height,image) {
|
||||
}
|
||||
}
|
||||
|
||||
BitmapEditor.prototype.getDomNode = function(index) {
|
||||
return this.editWidget.renderer.domNode.childNodes[index];
|
||||
};
|
||||
|
||||
/*
|
||||
** Update the input boxes with the actual size of the canvas
|
||||
*/
|
||||
BitmapEditor.prototype.updateSize = function() {
|
||||
this.getDomNode(DOM_WIDTH).value = this.currCanvas.width;
|
||||
this.getDomNode(DOM_HEIGHT).value = this.currCanvas.height;
|
||||
};
|
||||
|
||||
/*
|
||||
** Change the size of the canvas, preserving the current image
|
||||
*/
|
||||
BitmapEditor.prototype.changeCanvasSize = function(newWidth,newHeight) {
|
||||
// Create and size a new canvas
|
||||
var newCanvas = this.editWidget.renderer.renderTree.document.createElement("canvas");
|
||||
this.initCanvas(newCanvas,newWidth,newHeight);
|
||||
// Copy the old image
|
||||
var ctx = newCanvas.getContext("2d");
|
||||
ctx.drawImage(this.currCanvas,0,0);
|
||||
// Set the new canvas as the current one
|
||||
this.currCanvas = newCanvas;
|
||||
// Set the size of the onscreen canvas
|
||||
var canvas = this.getDomNode(DOM_CANVAS);
|
||||
canvas.width = newWidth;
|
||||
canvas.height = newHeight;
|
||||
// Paint the onscreen canvas with the offscreen canvas
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(this.currCanvas,0,0);
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.handleWidthChangeEvent = function(event) {
|
||||
// Get the new width
|
||||
var newWidth = parseInt(this.getDomNode(DOM_WIDTH).value,10);
|
||||
// Update if necessary
|
||||
if(newWidth > 0 && newWidth !== this.currCanvas.width) {
|
||||
this.changeCanvasSize(newWidth,this.currCanvas.height);
|
||||
}
|
||||
// Update the input controls
|
||||
this.updateSize();
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.handleHeightChangeEvent = function(event) {
|
||||
// Get the new width
|
||||
var newHeight = parseInt(this.getDomNode(DOM_HEIGHT).value,10);
|
||||
// Update if necessary
|
||||
if(newHeight > 0 && newHeight !== this.currCanvas.height) {
|
||||
this.changeCanvasSize(this.currCanvas.width,newHeight);
|
||||
}
|
||||
// Update the input controls
|
||||
this.updateSize();
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.handleTouchStartEvent = function(event) {
|
||||
this.brushDown = true;
|
||||
this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);
|
||||
@ -155,7 +246,7 @@ BitmapEditor.prototype.handleMouseUpEvent = function(event) {
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.adjustCoordinates = function(x,y) {
|
||||
var canvas = this.editWidget.renderer.domNode.firstChild,
|
||||
var canvas = this.getDomNode(DOM_CANVAS),
|
||||
canvasRect = canvas.getBoundingClientRect(),
|
||||
scale = canvas.width/canvasRect.width;
|
||||
return {x: (x - canvasRect.left) * scale, y: (y - canvasRect.top) * scale};
|
||||
@ -167,7 +258,7 @@ BitmapEditor.prototype.strokeStart = function(x,y) {
|
||||
};
|
||||
|
||||
BitmapEditor.prototype.strokeMove = function(x,y) {
|
||||
var canvas = this.editWidget.renderer.domNode.firstChild,
|
||||
var canvas = this.getDomNode(DOM_CANVAS),
|
||||
ctx = canvas.getContext("2d"),
|
||||
t;
|
||||
// Add the new position to the end of the stroke
|
||||
@ -193,7 +284,7 @@ BitmapEditor.prototype.strokeMove = function(x,y) {
|
||||
|
||||
BitmapEditor.prototype.strokeEnd = function() {
|
||||
// Copy the bitmap to the off-screen canvas
|
||||
var canvas = this.editWidget.renderer.domNode.firstChild,
|
||||
var canvas = this.getDomNode(DOM_CANVAS),
|
||||
ctx = this.currCanvas.getContext("2d");
|
||||
ctx.drawImage(canvas,0,0);
|
||||
// Save the image into the tiddler
|
||||
@ -204,7 +295,7 @@ BitmapEditor.prototype.saveChanges = function() {
|
||||
var tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle);
|
||||
if(tiddler) {
|
||||
// data URIs look like "data:<type>;base64,<text>"
|
||||
var dataURL = this.editWidget.renderer.domNode.firstChild.toDataURL(tiddler.fields.type,1.0),
|
||||
var dataURL = this.getDomNode(DOM_CANVAS).toDataURL(tiddler.fields.type,1.0),
|
||||
posColon = dataURL.indexOf(":"),
|
||||
posSemiColon = dataURL.indexOf(";"),
|
||||
posComma = dataURL.indexOf(","),
|
||||
|
||||
@ -453,6 +453,14 @@ canvas.tw-edit-bitmapeditor {
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.tw-edit-bitmapeditor-width {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tw-edit-bitmapeditor-height {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
** Tiddler edit mode
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user