Skip to content

Commit

Permalink
Added [email protected] Text tool now supports text-return
Browse files Browse the repository at this point in the history
  • Loading branch information
muaz-khan committed May 6, 2016
1 parent 7180113 commit 4c21fc0
Show file tree
Hide file tree
Showing 10 changed files with 130 additions and 36 deletions.
20 changes: 15 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down Expand Up @@ -73,20 +73,20 @@ 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
<!-- 1st step -->
<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/canvas-designer-widget.js"></script>
<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/canvas-designer-widget.js"></script>

<!-- 2nd step -->
<script>
var designer = new CanvasDesigner();
// both links are mandatory
// widget.html will internally use widget.js
designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/widget.html'; // you can place this file anywhere
designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/widget.js'; // you can place this file anywhere
designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/widget.html'; // you can place this file anywhere
designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/widget.js'; // you can place this file anywhere
</script>

<!-- 3rd i.e. last step -->
Expand Down Expand Up @@ -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)
Expand Down
6 changes: 6 additions & 0 deletions dev/common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [],
Expand Down
11 changes: 2 additions & 9 deletions dev/decorator.js
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
19 changes: 15 additions & 4 deletions dev/events-handler.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,25 @@ 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);
}
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;
Expand All @@ -138,7 +149,7 @@ function onkeyup(e) {
}
}

// Ctrl + A
// Ctrl + a
if (isControlKeyPressed && keyCode === 65) {
dragHelper.global.startingIndex = 0;

Expand All @@ -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();
}
Expand Down
24 changes: 24 additions & 0 deletions dev/text-handler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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')
};
8 changes: 8 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,14 @@ <h2>Select Tools</h2>
<button id="open-room">Open</button>
</div>
</div>

<hr>
<h2>Shortcut Keys</h2>
ctrl+t (to display text-fonts box)<br>
ctrl+z (to undo last-single shape)<br>
ctrl+a (to select all shapes)<br>
ctrl+c (copy last-selected shape)<br>
ctrl+v (paste last-copied shape)
</div>

<div class="extra-controls">
Expand Down
8 changes: 8 additions & 0 deletions multiple.html
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,14 @@ <h2>Select Tools</h2>
<button id="open-room">Open</button>
</div>
</div>

<hr>
<h2>Shortcut Keys</h2>
ctrl+t (to display text-fonts box)<br>
ctrl+z (to undo last-single shape)<br>
ctrl+a (to select all shapes)<br>
ctrl+c (copy last-selected shape)<br>
ctrl+v (paste last-copied shape)
</div>

<div class="extra-controls">
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "canvas-designer",
"preferGlobal": false,
"version": "1.0.4",
"version": "1.0.5",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down
62 changes: 48 additions & 14 deletions widget.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Last time updated: 2016-05-05 3:40:52 PM UTC
// Last time updated: 2016-05-06 3:46:17 AM UTC

// _______________
// Canvas-Designer
Expand Down Expand Up @@ -417,6 +417,12 @@
else if (cache.isBezierCurve) bezierHandler.end();

drawHelper.redraw();

if (textHandler.text && textHandler.text.length) {
textHandler.appendPoints();
textHandler.onShapeUnSelected();
}
textHandler.showOrHideTextTools('hide');
}

var copiedStuff = [],
Expand Down Expand Up @@ -541,16 +547,9 @@
}

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') {
Expand Down Expand Up @@ -1882,6 +1881,20 @@
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();

Expand Down Expand Up @@ -2040,6 +2053,16 @@
}
});
},
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')
};
Expand Down Expand Up @@ -2684,14 +2707,25 @@

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);
}
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;
Expand All @@ -2701,7 +2735,7 @@
}
}

// Ctrl + A
// Ctrl + a
if (isControlKeyPressed && keyCode === 65) {
dragHelper.global.startingIndex = 0;

Expand All @@ -2710,12 +2744,12 @@
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();
}
Expand Down
6 changes: 3 additions & 3 deletions widget.min.js

Large diffs are not rendered by default.

0 comments on commit 4c21fc0

Please sign in to comment.