Added text and bitmap editors

core/modules/widgets/edit/edit.js

@@ -0,0 +1,78 @@
+/*\
+title: $:/core/modules/widgets/edit/edit.js
+type: application/javascript
+module-type: widget
+
+The edit widget uses editor plugins to edit tiddlers of different types.
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var EditWidget = function(renderer) {
+	// Save state
+	this.renderer = renderer;
+	// Initialise the editors if they've not been done already
+	if(!this.editors) {
+		EditWidget.prototype.editors = {};
+		$tw.modules.applyMethods("editor",this.editors);
+	}
+	// Generate child nodes
+	this.generate();
+};
+
+EditWidget.prototype.generate = function() {
+	// Get parameters from our attributes
+	this.tiddlerTitle = this.renderer.getAttribute("tiddler",this.renderer.getContextTiddlerTitle());
+	this.fieldName = this.renderer.getAttribute("field","text");
+	// Choose the editor to use
+	// TODO: Tiddler field modules should be able to specify a field type from which the editor is derived
+	var tiddler = this.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
+		Editor;
+	if(this.fieldName === "text" && tiddler && tiddler.fields.type) {
+		Editor = this.editors[tiddler.fields.type];
+	}
+	if(!Editor) {
+		Editor = this.editors["text/vnd.tiddlywiki"];
+	}
+	// Instantiate the editor
+	this.editor = new Editor(this,this.tiddlerTitle,this.fieldName);
+	// Ask the editor to create the widget element
+	this.editor.render();
+};
+
+EditWidget.prototype.postRenderInDom = function() {
+	if(this.editor && this.editor.postRenderInDom) {
+		this.editor.postRenderInDom();
+	}
+};
+
+EditWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
+	// We'll completely regenerate ourselves if any of our attributes have changed
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.format) {
+		// Regenerate and rerender the widget and replace the existing DOM node
+		this.generate();
+		var oldDomNode = this.renderer.domNode,
+			newDomNode = this.renderer.renderInDom();
+		oldDomNode.parentNode.replaceChild(newDomNode,oldDomNode);
+	} else if(this.tiddlerTitle && changedTiddlers[this.tiddlerTitle]) {
+		// Refresh the editor if our tiddler has changed
+		if(this.editor && this.editor.refreshInDom) {
+			this.editor.refreshInDom(changedTiddlers);
+		}
+	} else {
+		// Otherwise, just refresh any child nodes
+		$tw.utils.each(this.children,function(node) {
+			if(node.refreshInDom) {
+				node.refreshInDom(changedTiddlers);
+			}
+		});
+	}
+};
+
+exports.edit = EditWidget;
+
+})();

core/modules/widgets/edit/editors/bitmapeditor.js

@@ -0,0 +1,185 @@
+/*\
+title: $:/core/modules/widgets/edit/editors/bitmapeditor.js
+type: application/javascript
+module-type: editor
+
+A bitmap editor
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var BitmapEditor = function(editWidget,tiddlerTitle,fieldName) {
+	this.editWidget = editWidget;
+	this.tiddlerTitle = tiddlerTitle;
+	this.fieldName = fieldName;
+};
+
+BitmapEditor.prototype.render = function() {
+	// Set the element details
+	this.editWidget.tag = "canvas";
+	this.editWidget.attributes = {
+		"class": "tw-edit-bitmapeditor"
+	};
+	this.editWidget.events = [
+		{name: "touchstart", handlerObject: this, handlerMethod: "handleTouchStartEvent"},
+		{name: "touchmove", handlerObject: this, handlerMethod: "handleTouchMoveEvent"},
+		{name: "touchend", handlerObject: this, handlerMethod: "handleTouchEndEvent"},
+		{name: "mousedown", handlerObject: this, handlerMethod: "handleMouseDownEvent"},
+		{name: "mousemove", handlerObject: this, handlerMethod: "handleMouseMoveEvent"},
+		{name: "mouseup", handlerObject: this, handlerMethod: "handleMouseUpEvent"}
+	];
+};
+
+BitmapEditor.prototype.postRenderInDom = function() {
+	var tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
+		canvas = this.editWidget.renderer.domNode,
+		currImage = new Image();
+	// Get the current bitmap into an image object
+	currImage.src = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
+	// Wait until the image is loaded
+	var self = this;
+	currImage.onload = function() {
+		// Copy the image to the on-screen canvas
+		canvas.width = currImage.width;
+		canvas.height = currImage.height;
+		var ctx = canvas.getContext("2d");
+		ctx.drawImage(currImage,0,0);
+		// And also copy the current bitmap to the off-screen canvas
+		self.currCanvas = document.createElement("canvas");
+		self.currCanvas.width = currImage.width;
+		self.currCanvas.height = currImage.height;
+		ctx = self.currCanvas.getContext("2d");
+		ctx.drawImage(currImage,0,0);
+	};
+};
+
+BitmapEditor.prototype.handleTouchStartEvent = function(event) {
+	this.brushDown = true;
+	this.strokeStart(event.touches[0].clientX,event.touches[0].clientY);
+	event.preventDefault();
+	event.stopPropagation();
+	return false;
+};
+
+BitmapEditor.prototype.handleTouchMoveEvent = function(event) {
+	if(this.brushDown) {
+		this.strokeMove(event.touches[0].clientX,event.touches[0].clientY);
+	}
+	event.preventDefault();
+	event.stopPropagation();
+	return false;
+};
+
+BitmapEditor.prototype.handleTouchEndEvent = function(event) {
+	if(this.brushDown) {
+		this.brushDown = false;
+		this.strokeEnd();
+	}
+	event.preventDefault();
+	event.stopPropagation();
+	return false;
+};
+
+BitmapEditor.prototype.handleMouseDownEvent = function(event) {
+	this.strokeStart(event.clientX,event.clientY);
+	this.brushDown = true;
+	event.preventDefault();
+	event.stopPropagation();
+	return false;
+};
+
+BitmapEditor.prototype.handleMouseMoveEvent = function(event) {
+	if(this.brushDown) {
+		this.strokeMove(event.clientX,event.clientY);
+		event.preventDefault();
+		event.stopPropagation();
+		return false;
+	}
+	return true;
+};
+
+BitmapEditor.prototype.handleMouseUpEvent = function(event) {
+	if(this.brushDown) {
+		this.brushDown = false;
+		this.strokeEnd();
+		event.preventDefault();
+		event.stopPropagation();
+		return false;
+	}
+	return true;
+};
+
+BitmapEditor.prototype.adjustCoordinates = function(x,y) {
+	var canvas = this.editWidget.renderer.domNode,
+		canvasRect = canvas.getBoundingClientRect(),
+		scale = canvas.width/canvasRect.width;
+	return {x: (x - canvasRect.left) * scale, y: (y - canvasRect.top) * scale};
+};
+
+BitmapEditor.prototype.strokeStart = function(x,y) {
+	// Start off a new stroke
+	this.stroke = [this.adjustCoordinates(x,y)];
+};
+
+BitmapEditor.prototype.strokeMove = function(x,y) {
+	var canvas = this.editWidget.renderer.domNode,
+		ctx = canvas.getContext("2d"),
+		t;
+	// Add the new position to the end of the stroke
+	this.stroke.push(this.adjustCoordinates(x,y));
+	// Redraw the previous image
+	ctx.drawImage(this.currCanvas,0,0);
+	// Render the stroke
+	ctx.lineWidth = 3;
+	ctx.lineCap = "round";
+	ctx.lineJoin = "round";
+	ctx.beginPath();
+	ctx.moveTo(this.stroke[0].x,this.stroke[0].y);
+	for(t=1; t<this.stroke.length-1; t++) {
+		var s1 = this.stroke[t],
+			s2 = this.stroke[t-1],
+			tx = (s1.x + s2.x)/2,
+			ty = (s1.y + s2.y)/2;
+		ctx.quadraticCurveTo(s2.x,s2.y,tx,ty);
+	}
+	ctx.stroke();
+};
+
+BitmapEditor.prototype.strokeEnd = function() {
+	// Copy the bitmap to the off-screen canvas
+	var canvas = this.editWidget.renderer.domNode,
+		ctx = this.currCanvas.getContext("2d");
+	ctx.drawImage(canvas,0,0);
+	// Save the image into the tiddler
+	this.saveChanges();
+};
+
+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.toDataURL(tiddler.fields.type,1.0),
+			posColon = dataURL.indexOf(":"),
+			posSemiColon = dataURL.indexOf(";"),
+			posComma = dataURL.indexOf(","),
+			type = dataURL.substring(posColon+1,posSemiColon),
+			text = dataURL.substring(posComma+1);
+		var update = {type: type, text: text};
+		this.editWidget.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,update));
+	}
+};
+
+/*
+Note that the bitmap editor intentionally doesn't have a refreshInDom method to avoid the situation where a bitmap being editted is modified externally
+*/
+
+exports["image/jpg"] = BitmapEditor;
+exports["image/jpeg"] = BitmapEditor;
+exports["image/png"] = BitmapEditor;
+exports["image/gif"] = BitmapEditor;
+
+})();

core/modules/widgets/edit/editors/texteditor.js

@@ -0,0 +1,150 @@
+/*\
+title: $:/core/modules/widgets/edit/editors/texteditor.js
+type: application/javascript
+module-type: editor
+
+A plain text editor
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var MIN_TEXT_AREA_HEIGHT = 100;
+
+var TextEditor = function(editWidget,tiddlerTitle,fieldName) {
+	this.editWidget = editWidget;
+	this.tiddlerTitle = tiddlerTitle;
+	this.fieldName = fieldName;
+};
+
+/*
+Get the tiddler being edited and current value
+*/
+TextEditor.prototype.getEditInfo = function() {
+	// Get the current tiddler and the field name
+	var tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle),
+		value;
+	// If we've got a tiddler, the value to display is the field string value
+	if(tiddler) {
+		value = tiddler.getFieldString(this.fieldName);
+	} else {
+		// Otherwise, we need to construct a default value for the editor
+		switch(this.fieldName) {
+			case "text":
+				value = "Type the text for the tiddler '" + this.tiddlerTitle + "'";
+				break;
+			case "title":
+				value = this.tiddlerTitle;
+				break;
+			default:
+				value = "";
+				break;
+		}
+		value = this.editWidget.renderer.getAttribute("default",value);
+	}
+	return {tiddler: tiddler, value: value};
+};
+
+TextEditor.prototype.render = function() {
+	// Get the initial value of the editor
+	var editInfo = this.getEditInfo();
+	// Create the editor nodes
+	var node = {
+		type: "element",
+		attributes: {}
+	};
+	var type = this.editWidget.renderer.getAttribute("type",this.fieldName === "text" ? "textarea" : "input");
+	switch(type) {
+		case "textarea":
+			node.tag = "textarea";
+			node.children = [{
+				type: "text",
+				text: editInfo.value
+			}];
+			break;
+		case "search":
+			node.tag = "input";
+			node.attributes.type = {type: "string", value: "search"};
+			node.attributes.value = {type: "string", value: editInfo.value};
+			break;
+		default: // "input"
+			node.tag = "input";
+			node.attributes.type = {type: "string", value: "text"};
+			node.attributes.value = {type: "string", value: editInfo.value};
+			break;
+	}
+	// Set the element details
+	this.editWidget.tag = this.editWidget.renderer.parseTreeNode.isBlock ? "div" : "span";
+	this.editWidget.attributes = {
+		"class": "tw-edit-texteditor"
+	};
+	this.editWidget.children = this.editWidget.renderer.renderTree.createRenderers(this.editWidget.renderer.renderContext,[node]);
+	this.editWidget.events = [
+		{name: "focus", handlerObject: this},
+		{name: "blur", handlerObject: this},
+		{name: "keyup", handlerObject: this}
+	];
+};
+
+TextEditor.prototype.handleEvent = function(event) {
+	// Get the value of the field if it might have changed
+	if(["keyup","focus","blur"].indexOf(event.type) !== -1) {
+		this.saveChanges();
+	}
+	// Fix the height of the textarea if required
+	if(["keyup","focus"].indexOf(event.type) !== -1) {
+		this.fixHeight();
+	}
+	return true;
+};
+
+TextEditor.prototype.saveChanges = function() {
+	var text = this.editWidget.children[0].domNode.value,
+		tiddler = this.editWidget.renderer.renderTree.wiki.getTiddler(this.tiddlerTitle);
+	if(!tiddler) {
+		tiddler = new $tw.Tiddler({title: this.tiddlerTitle});
+	}
+	if(text !== tiddler.fields[this.fieldName]) {
+		var update = {};
+		update[this.fieldName] = text;
+		this.editWidget.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,update));
+	}
+};
+
+TextEditor.prototype.fixHeight = function() {
+	var self = this;
+	if(this.editWidget.children[0].domNode && this.editWidget.children[0].domNode.type === "textarea") {
+		$tw.utils.nextTick(function() {
+			var wrapper = self.editWidget.renderer.domNode,
+				textarea = self.editWidget.children[0].domNode;
+			// Set the text area height to 1px temporarily, which allows us to read the true scrollHeight
+			var prevWrapperHeight = wrapper.style.height;
+			wrapper.style.height = textarea.style.height + "px";
+			textarea.style.overflow = "hidden";
+			textarea.style.height = "1px";
+			textarea.style.height = Math.max(textarea.scrollHeight,MIN_TEXT_AREA_HEIGHT) + "px";
+			wrapper.style.height = prevWrapperHeight;
+		});
+	}
+};
+
+TextEditor.prototype.postRenderInDom = function() {
+	this.fixHeight();
+};
+
+TextEditor.prototype.refreshInDom = function() {
+	if(document.activeElement !== this.editWidget.children[0].domNode) {
+		var editInfo = this.getEditInfo();
+		this.editWidget.children[0].domNode.value = editInfo.value;
+	}
+	// Fix the height if needed
+	this.fixHeight();
+};
+
+exports["text/vnd.tiddlywiki"] = TextEditor;
+exports["text/plain"] = TextEditor;
+
+})();

core/templates/EditTemplate.tid

@@ -2,12 +2,17 @@ title: $:/templates/EditTemplate
 modifier: JeremyRuston
 
 <div class="tw-tiddler-frame">
-<<view title>> <<button SaveTiddler class:"btn btn-mini btn-success"><done>>
-{{title{
-<<edit draft.title>>
-}}}
-<<edit tags>>
-{{body{
-<<edit text>>
-}}}
+
+<$view field="title"/> <$button message="tw-SaveTiddler" class="btn btn-mini btn-success">done</$button>
+
+@@.title
+<$edit field="draft.title"/>
+@@
+
+<$edit field="tags"/>
+
+@@.body
+<$edit field="text"/>
+@@
+
 </div>

core/templates/PageTemplate.tid

@@ -18,7 +18,7 @@ title: $:/templates/PageTemplate
 <div style="position:fixed;">
 <!-- The navigation menu -->
 
-<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" editTemplate="$:/templates/EditTemplate" listview=classic itemClass="tw-menu-list-item"/>
+<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" listview=classic itemClass="tw-menu-list-item"/>
 </div>
 </div>
 <div class="span10">

core/templates/ViewTemplate.tid

@@ -1,7 +1,11 @@
 title: $:/templates/ViewTemplate
 modifier: JeremyRuston
 
-<span class="title"><$button message="tw-close" class="btn-invisible pull-right">{{$:/core/images/close-button.svg}}</$button><$view field="title"/></span>
+<span class="title">
+<$button message="tw-close" class="btn-invisible pull-right">{{$:/core/images/close-button.svg}}</$button>
+<$button message="tw-EditTiddler" class="btn-invisible pull-right">{{$:/core/images/edit-button.svg}}</$button>
+<$view field="title"/>
+</span>
 
 <div class="small"><$view field="modifier" format="link"/> <$view field="modified" format="date"/></div>