diff --git a/README.md b/README.md
index 8da903f..6f4a55b 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ You can use [`designer.setSelected`](https://github.com/muaz-khan/Canvas-Designe
7. `arc` --- to draw circles
8. `bezier` --- to draw bezier curves
9. `quadratic` --- to draw quadratic curves
-10. `text` --- to write texts
+10. `text` --- to write texts on single or multiple lines, select font families/sizes and more
11. `image` --- add external images
The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`.
@@ -73,11 +73,11 @@ More importantly, you can use unlimited designers on a single page. Each will ha
`designer.appendTo(document.body);`
-E.g. (Please don't forget replacing `1.0.4` with latest version)
+E.g. (Please don't forget replacing `1.0.5` with latest version)
```html
-
+
@@ -351,6 +351,16 @@ It is not too much complex to add new tools :) Its easy.
* https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute
+# Shortcut Keys
+
+```
+ctrl+t (to display text-fonts box)
+ctrl+z (to undo last-single shape)
+ctrl+a (to select all shapes)
+ctrl+c (copy last-selected shape)
+ctrl+v (paste last-copied shape)
+```
+
# Demos
* http://muaz-khan.github.io/Everything/Canvas/ (A-to-zee all shapes, and animations on this page is created using canvas-designer)
diff --git a/dev/common.js b/dev/common.js
index d76010b..f7594db 100644
--- a/dev/common.js
+++ b/dev/common.js
@@ -406,6 +406,12 @@ function endLastPath() {
else if (cache.isBezierCurve) bezierHandler.end();
drawHelper.redraw();
+
+ if (textHandler.text && textHandler.text.length) {
+ textHandler.appendPoints();
+ textHandler.onShapeUnSelected();
+ }
+ textHandler.showOrHideTextTools('hide');
}
var copiedStuff = [],
diff --git a/dev/decorator.js b/dev/decorator.js
index 2487a0c..c20ab5d 100644
--- a/dev/decorator.js
+++ b/dev/decorator.js
@@ -79,16 +79,9 @@ window.addEventListener('load', function() {
}
if (shape === 'Text') {
- tempContext.canvas.style.cursor = 'text';
- textHandler.x = textHandler.y = 0;
- textHandler.text = '';
+ textHandler.onShapeSelected();
} else {
- textHandler.text = '';
- textHandler.showOrHideTextTools('hide');
- tempContext.canvas.style.cursor = 'default';
- if (typeof textHandler.blinkCursorInterval !== 'undefined') {
- clearInterval(textHandler.blinkCursorInterval);
- }
+ textHandler.onShapeUnSelected();
}
if (shape === 'Pencil') {
diff --git a/dev/events-handler.js b/dev/events-handler.js
index 9ab3ec6..309fae6 100644
--- a/dev/events-handler.js
+++ b/dev/events-handler.js
@@ -121,6 +121,11 @@ function onkeyup(e) {
keyCode = e.which || e.keyCode || 0;
+ if (keyCode === 13 && is.isText) {
+ textHandler.onReturnKeyPressed();
+ return;
+ }
+
if (keyCode == 8 || keyCode == 46) {
if (isBackKey(e, keyCode)) {
textHandler.writeText(textHandler.lastKeyPress, true);
@@ -128,7 +133,13 @@ function onkeyup(e) {
return;
}
- // Ctrl + Z
+ // Ctrl + t
+ if (isControlKeyPressed && keyCode === 84 && is.isText) {
+ textHandler.showTextTools();
+ return;
+ }
+
+ // Ctrl + z
if (isControlKeyPressed && keyCode === 90) {
if (points.length) {
points.length = points.length - 1;
@@ -138,7 +149,7 @@ function onkeyup(e) {
}
}
- // Ctrl + A
+ // Ctrl + a
if (isControlKeyPressed && keyCode === 65) {
dragHelper.global.startingIndex = 0;
@@ -147,12 +158,12 @@ function onkeyup(e) {
setSelection(find('drag-all-paths'), 'DragAllPaths');
}
- // Ctrl + C
+ // Ctrl + c
if (isControlKeyPressed && keyCode === 67 && points.length) {
copy();
}
- // Ctrl + V
+ // Ctrl + v
if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) {
paste();
}
diff --git a/dev/text-handler.js b/dev/text-handler.js
index 67274f5..d23cfa9 100644
--- a/dev/text-handler.js
+++ b/dev/text-handler.js
@@ -2,6 +2,20 @@ var textHandler = {
text: '',
selectedFontFamily: 'Arial',
selectedFontSize: '15',
+ onShapeSelected: function() {
+ tempContext.canvas.style.cursor = 'text';
+ this.x = this.y = this.pageX = this.pageY = 0;
+ this.text = '';
+ },
+ onShapeUnSelected: function() {
+ this.text = '';
+ this.showOrHideTextTools('hide');
+ tempContext.canvas.style.cursor = 'default';
+
+ if (typeof this.blinkCursorInterval !== 'undefined') {
+ clearInterval(this.blinkCursorInterval);
+ }
+ },
getFillColor: function(color) {
color = (color || fillStyle).toLowerCase();
@@ -160,6 +174,16 @@ var textHandler = {
}
});
},
+ onReturnKeyPressed: function() {
+ if (!textHandler.text || !textHandler.text.length) return;
+ var fontSize = parseInt(textHandler.selectedFontSize) || 15;
+ this.mousedown({
+ pageX: this.pageX,
+ // pageY: parseInt(tempContext.measureText(textHandler.text).height * 2) + 10
+ pageY: this.pageY + fontSize + 5
+ });
+ drawHelper.redraw();
+ },
fontFamilyBox: document.querySelector('.fontSelectUl'),
fontSizeBox: document.querySelector('.fontSizeUl')
};
diff --git a/index.html b/index.html
index b52c5c8..59edc6e 100644
--- a/index.html
+++ b/index.html
@@ -206,6 +206,14 @@ Select Tools
+
+
+ Shortcut Keys
+ ctrl+t (to display text-fonts box)
+ ctrl+z (to undo last-single shape)
+ ctrl+a (to select all shapes)
+ ctrl+c (copy last-selected shape)
+ ctrl+v (paste last-copied shape)
+
+
+ Shortcut Keys
+ ctrl+t (to display text-fonts box)
+ ctrl+z (to undo last-single shape)
+ ctrl+a (to select all shapes)
+ ctrl+c (copy last-selected shape)
+ ctrl+v (paste last-copied shape)