Skip to content

Commit

Permalink
Added [email protected] Fixed #16
Browse files Browse the repository at this point in the history
Now you can paste any language’s text from the clipboard.
  • Loading branch information
muaz-khan committed May 10, 2016
1 parent 4c21fc0 commit 70a4a85
Show file tree
Hide file tree
Showing 8 changed files with 68 additions and 25 deletions.
29 changes: 22 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ The correct name for `dragMultiple` should be: `drag-move all-shapes`.
**Upcoming** tools & features:

1. `arrow` --- to draw arrows
2. Set font-size for texts
3. Set font-family for texts
4. Resize all shapes at once (currently you can resize last selected shape only)
2. Resize all shapes at once (currently you can resize last selected shape only)

# Features

Expand All @@ -63,6 +61,23 @@ The correct name for `dragMultiple` should be: `drag-move all-shapes`.

More importantly, you can use unlimited designers on a single page. Each will have its own surface and its own tools.

# Chinese, Arabic, other languages

You can install following chrome extension for multi-language input tools:

* https://chrome.google.com/webstore/detail/google-input-tools/mclkkofklkfljcocdinagocijmpgbhab?hl=en

Now type your own language text in any `<input>` box or anywhere, and simply copy that text.

Now click `T` tool icon from the tool-box and press `ctrl+v` to paste your own language's text.

To repeat it:

1. Write your own language texts anywhere and make sure to copy to clipboard using `ctrl+v`
2. Then click `T` icon, and try press `ctrl+v` to paste your copied text

You can paste any text: English, Arabic, Chinese or whatever!

# How to Use

1. Download/link `canvas-designer-widget.js` from [this github repository](https://github.com/muaz-khan/Canvas-Designer).
Expand All @@ -73,20 +88,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.5` with latest version)
E.g. (Please don't forget replacing `1.0.6` with latest version)

```html
<!-- 1st step -->
<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/canvas-designer-widget.js"></script>
<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/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.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
designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/widget.html'; // you can place this file anywhere
designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/widget.js'; // you can place this file anywhere
</script>

<!-- 3rd i.e. last step -->
Expand Down
2 changes: 1 addition & 1 deletion bower.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.6",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down
2 changes: 0 additions & 2 deletions canvas-designer-widget.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// Last time updated: 2016-04-17 6:42:16 AM UTC

// _______________
// Canvas-Designer

Expand Down
10 changes: 5 additions & 5 deletions dev/common.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ var common = {
}

if (p[0] === 'text') {
tempArray[i] = ['context.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');\n' + this.strokeOrFill(p[2])];
tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');'];
}

if (p[0] === 'arc') {
Expand Down Expand Up @@ -297,7 +297,7 @@ var common = {
}

if (p[0] === 'text') {
output += 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');';
}

if (p[0] === 'rect') {
Expand Down Expand Up @@ -380,18 +380,18 @@ var common = {
if (!this.prevProps || this.prevProps !== p.join(',')) {
this.prevProps = p.join(',');

return 'strokeOrFill("' + p.join('", "') + '");';
return 'strokeOrFill(\'' + p.join('\', \'') + '\');';
}

return 'strokeOrFill();';
},
prevProps: null,
shortenHelper: function(name, p1, p2) {
var result = '["' + name + '", [' + p1.join(', ') + ']';
var result = '[\'' + name + '\', [' + p1.join(', ') + ']';

if (!this.prevProps || this.prevProps !== p2.join(',')) {
this.prevProps = p2.join(',');
result += ', ["' + p2.join('", "') + '"]';
result += ', [\'' + p2.join('\', \'') + '\']';
}

return result + '], ';
Expand Down
15 changes: 15 additions & 0 deletions dev/events-handler.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,3 +195,18 @@ function onkeypress(e) {
}

addEvent(document, 'keypress', onkeypress);

function onTextFromClipboard(e) {
if (!is.isText) return;
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
if (pastedText && pastedText.length) {
textHandler.writeText(pastedText);
}
}

addEvent(document, 'paste', onTextFromClipboard);
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.5",
"version": "1.0.6",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down
27 changes: 21 additions & 6 deletions widget.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Last time updated: 2016-05-06 3:46:17 AM UTC
// Last time updated: 2016-05-10 6:26:39 AM UTC

// _______________
// Canvas-Designer
Expand Down Expand Up @@ -132,7 +132,7 @@
}

if (p[0] === 'text') {
tempArray[i] = ['context.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');\n' + this.strokeOrFill(p[2])];
tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');'];
}

if (p[0] === 'arc') {
Expand Down Expand Up @@ -308,7 +308,7 @@
}

if (p[0] === 'text') {
output += 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');';
}

if (p[0] === 'rect') {
Expand Down Expand Up @@ -391,18 +391,18 @@
if (!this.prevProps || this.prevProps !== p.join(',')) {
this.prevProps = p.join(',');

return 'strokeOrFill("' + p.join('", "') + '");';
return 'strokeOrFill(\'' + p.join('\', \'') + '\');';
}

return 'strokeOrFill();';
},
prevProps: null,
shortenHelper: function(name, p1, p2) {
var result = '["' + name + '", [' + p1.join(', ') + ']';
var result = '[\'' + name + '\', [' + p1.join(', ') + ']';

if (!this.prevProps || this.prevProps !== p2.join(',')) {
this.prevProps = p2.join(',');
result += ', ["' + p2.join('", "') + '"]';
result += ', [\'' + p2.join('\', \'') + '\']';
}

return result + '], ';
Expand Down Expand Up @@ -2782,6 +2782,21 @@

addEvent(document, 'keypress', onkeypress);

function onTextFromClipboard(e) {
if (!is.isText) return;
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
if (pastedText && pastedText.length) {
textHandler.writeText(pastedText);
}
}

addEvent(document, 'paste', onTextFromClipboard);

// scripts on this page directly touches DOM-elements
// removing or altering anything may cause failures in the UI event handlers
// it is used only to bring collaboration for canvas-surface
Expand Down
6 changes: 3 additions & 3 deletions widget.min.js

Large diffs are not rendered by default.

0 comments on commit 70a4a85

Please sign in to comment.