aboutsummaryrefslogtreecommitdiff
path: root/static/js/wpaint/plugins/text
diff options
context:
space:
mode:
authorLibravatar bai 2019-03-29 02:14:43 +0000
committerLibravatar bai 2019-03-29 02:14:43 +0000
commit95dfe14528663923ca2a88ec928f1d8d9df2402b (patch)
tree5bc88d1466957f1aa39043b056bde5c439648022 /static/js/wpaint/plugins/text
downloadweabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.tar.gz
weabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.tar.xz
weabot-95dfe14528663923ca2a88ec928f1d8d9df2402b.zip
Init
Diffstat (limited to 'static/js/wpaint/plugins/text')
-rw-r--r--static/js/wpaint/plugins/text/img/icons-menu-text.pngbin0 -> 802 bytes
-rw-r--r--static/js/wpaint/plugins/text/src/wPaint.menu.text.js227
-rw-r--r--static/js/wpaint/plugins/text/wPaint.menu.text.min.js1
3 files changed, 228 insertions, 0 deletions
diff --git a/static/js/wpaint/plugins/text/img/icons-menu-text.png b/static/js/wpaint/plugins/text/img/icons-menu-text.png
new file mode 100644
index 0000000..d7bed8c
--- /dev/null
+++ b/static/js/wpaint/plugins/text/img/icons-menu-text.png
Binary files differ
diff --git a/static/js/wpaint/plugins/text/src/wPaint.menu.text.js b/static/js/wpaint/plugins/text/src/wPaint.menu.text.js
new file mode 100644
index 0000000..5a15ac0
--- /dev/null
+++ b/static/js/wpaint/plugins/text/src/wPaint.menu.text.js
@@ -0,0 +1,227 @@
+(function ($) {
+
+ // setup menu
+ $.fn.wPaint.menus.text = {
+ img: 'plugins/text/img/icons-menu-text.png',
+ items: {
+ bold: {
+ icon: 'toggle',
+ title: 'Bold',
+ index: 0,
+ callback: function (toggle) { this.setFontBold(toggle); }
+ },
+ italic: {
+ icon: 'toggle',
+ title: 'Italic',
+ index: 1,
+ callback: function (toggle) { this.setFontItalic(toggle); }
+ },
+ /*underline: {
+ icon: 'toggle',
+ title: 'Undelrine',
+ index: 2,
+ callback: function (toggle) { this.setFontUnderline(toggle); }
+ },*/
+ fontSize: {
+ title: 'Font Size',
+ icon: 'select',
+ range: [8, 9, 10, 12, 14, 16, 20, 24, 30],
+ value: 12,
+ callback: function (size) { this.setFontSize(size); }
+ },
+ fontFamily: {
+ icon: 'select',
+ title: 'Font Family',
+ range: ['Arial', 'Courier', 'Times', 'Verdana'],
+ useRange: true,
+ value: 'Arial',
+ callback: function (family) { this.setFontFamily(family); }
+ }
+ }
+ };
+
+ // add icon to main menu
+ $.fn.wPaint.menus.main.items.text = {
+ icon: 'menu',
+ after: 'pencil',
+ title: 'Text',
+ index: 7,
+ callback: function () { this.setMode('text'); }
+ };
+
+ // extend defaults
+ $.extend($.fn.wPaint.defaults, {
+ fontSize : '12', // current font size for text input
+ fontFamily : 'Arial', // active font family for text input
+ fontBold : false, // text input bold enable/disable
+ fontItalic : false, // text input italic enable/disable
+ fontUnderline : false // text input italic enable/disable
+ });
+
+ // extend functions
+ $.fn.wPaint.extend({
+ generate: function () {
+ this.$textCalc = $('<div></div>').hide();
+
+ // make sure clicking on the text-tnput doesn't trigger another textInput
+ this.$textInput = $('<textarea class="wPaint-text-input" spellcheck="false"></textarea>')
+ .on('mousedown', this._stopPropagation)
+ .css({position: 'absolute'})
+ .hide();
+
+ $('body').append(this.$textCalc);
+ this.$el.append(this.$textInput);
+
+ this.menus.all.text = this._createMenu('text');
+ },
+
+ _init: function () {
+ var _this = this;
+
+ function inputClick() {
+ _this._drawTextIfNotEmpty();
+ _this.$textInput.hide();
+ _this.$canvasTemp.hide();
+ }
+
+ // in case we click on another element while typing - just auto set the text
+ for (var i in this.menus.all) {
+ this.menus.all[i].$menu
+ .on('click', inputClick)
+ .on('mousedown', this._stopPropagation);
+ }
+
+ // same idea here for clicking outside of the canvas area
+ $(document).on('mousedown', inputClick);
+ },
+
+ /****************************************
+ * setters
+ ****************************************/
+ setFillStyle: function (fillStyle) {
+ this.$textInput.css('color', fillStyle);
+ },
+
+ setFontSize: function (size) {
+ this.options.fontSize = parseInt(size, 10);
+ this._setFont({fontSize: size + 'px', lineHeight: size + 'px'});
+ this.menus.all.text._setSelectValue('fontSize', size);
+ },
+
+ setFontFamily: function (family) {
+ this.options.fontFamily = family;
+ this._setFont({fontFamily: family});
+ this.menus.all.text._setSelectValue('fontFamily', family);
+ },
+
+ setFontBold: function (bold) {
+ this.options.fontBold = bold;
+ this._setFont({fontWeight: (bold ? 'bold' : '')});
+ },
+
+ setFontItalic: function (italic) {
+ this.options.fontItalic = italic;
+ this._setFont({fontStyle: (italic ? 'italic' : '')});
+ },
+
+ setFontUnderline: function (underline) {
+ this.options.fontUnderline = underline;
+ this._setFont({fontWeight: (underline ? 'underline' : '')});
+ },
+
+ _setFont: function (css) {
+ this.$textInput.css(css);
+ this.$textCalc.css(css);
+ },
+
+ /****************************************
+ * Text
+ ****************************************/
+ _drawTextDown: function (e) {
+ this._drawTextIfNotEmpty();
+ this._drawShapeDown(e, 1);
+
+ this.$textInput
+ .css({left: e.pageX - 1, top: e.pageY - 1, width: 0, height: 0})
+ .show().focus();
+ },
+
+ _drawTextMove: function (e) {
+ this._drawShapeMove(e, 1);
+
+ this.$textInput.css({left: e.left - 1, top: e.top - 1, width: e.width, height: e.height});
+ },
+
+ _drawTextIfNotEmpty: function () {
+ if (this.$textInput.val() !== '') { this._drawText(); }
+ },
+
+ // just draw text - don't want to trigger up here since we are just copying text from input box here
+ _drawText: function () {
+ var fontString = '',
+ lines = this.$textInput.val().split('\n'),
+ linesNew = [],
+ textInputWidth = this.$textInput.width() - 2,
+ width = 0,
+ lastj = 0,
+ offset = this.$textInput.position(),
+ left = offset.left + 1,
+ top = offset.top + 1,
+ //underlineOffset = 0,
+ i, ii, j, jj;
+
+ if (this.options.fontItalic) { fontString += 'italic '; }
+ //if(this.settings.fontUnderline) { fontString += 'underline '; }
+ if (this.options.fontBold) { fontString += 'bold '; }
+
+ fontString += this.options.fontSize + 'px ' + this.options.fontFamily;
+
+ for (i = 0, ii = lines.length; i < ii; i++) {
+ this.$textCalc.html('');
+ lastj = 0;
+
+ for (j = 0, jj = lines[0].length; j < jj; j++) {
+ width = this.$textCalc.append(lines[i][j]).width();
+
+ if (width > textInputWidth) {
+ linesNew.push(lines[i].substring(lastj, j));
+ lastj = j;
+ this.$textCalc.html(lines[i][j]);
+ }
+ }
+
+ if (lastj !== j) { linesNew.push(lines[i].substring(lastj, j)); }
+ }
+
+ lines = this.$textInput.val(linesNew.join('\n')).val().split('\n');
+
+ for (i = 0, ii = lines.length; i < ii; i++) {
+ this.ctx.fillStyle = this.options.fillStyle;
+ this.ctx.textBaseline = 'top';
+ this.ctx.font = fontString;
+ this.ctx.fillText(lines[i], left, top);
+
+ top += this.options.fontSize;
+
+ /*if(lines[i] !== '' && this.options.fontTypeUnderline) {
+ width = this.$textCalc.html(lines[i]).width();
+
+ //manually set pixels for underline since to avoid antialiasing 1px issue, and lack of support for underline in canvas
+ var imgData = this.ctx.getImageData(0, top+underlineOffset, width, 1);
+
+ for (j=0; j<imgData.width*imgData.height*4; j+=4) {
+ imgData.data[j] = parseInt(this.options.fillStyle.substring(1,3), 16);
+ imgData.data[j+1] = parseInt(this.options.fillStyle.substring(3,5), 16);
+ imgData.data[j+2] = parseInt(this.options.fillStyle.substring(5,7), 16);
+ imgData.data[j+3] = 255;
+ }
+
+ this.ctx.putImageData(imgData, left, top+underlineOffset);
+ }*/
+ }
+
+ this.$textInput.val('');
+ this._addUndo();
+ }
+ });
+})(jQuery);
diff --git a/static/js/wpaint/plugins/text/wPaint.menu.text.min.js b/static/js/wpaint/plugins/text/wPaint.menu.text.min.js
new file mode 100644
index 0000000..6cd1f3d
--- /dev/null
+++ b/static/js/wpaint/plugins/text/wPaint.menu.text.min.js
@@ -0,0 +1 @@
+/*! wPaint - v2.5.0 - 2014-03-01 */!function(a){a.fn.wPaint.menus.text={img:"plugins/text/img/icons-menu-text.png",items:{bold:{icon:"toggle",title:"Bold",index:0,callback:function(a){this.setFontBold(a)}},italic:{icon:"toggle",title:"Italic",index:1,callback:function(a){this.setFontItalic(a)}},fontSize:{title:"Font Size",icon:"select",range:[8,9,10,12,14,16,20,24,30],value:12,callback:function(a){this.setFontSize(a)}},fontFamily:{icon:"select",title:"Font Family",range:["Arial","Courier","Times","Verdana"],useRange:!0,value:"Arial",callback:function(a){this.setFontFamily(a)}}}},a.fn.wPaint.menus.main.items.text={icon:"menu",after:"pencil",title:"Text",index:7,callback:function(){this.setMode("text")}},a.extend(a.fn.wPaint.defaults,{fontSize:"12",fontFamily:"Arial",fontBold:!1,fontItalic:!1,fontUnderline:!1}),a.fn.wPaint.extend({generate:function(){this.$textCalc=a("<div></div>").hide(),this.$textInput=a('<textarea class="wPaint-text-input" spellcheck="false"></textarea>').on("mousedown",this._stopPropagation).css({position:"absolute"}).hide(),a("body").append(this.$textCalc),this.$el.append(this.$textInput),this.menus.all.text=this._createMenu("text")},_init:function(){function b(){c._drawTextIfNotEmpty(),c.$textInput.hide(),c.$canvasTemp.hide()}var c=this;for(var d in this.menus.all)this.menus.all[d].$menu.on("click",b).on("mousedown",this._stopPropagation);a(document).on("mousedown",b)},setFillStyle:function(a){this.$textInput.css("color",a)},setFontSize:function(a){this.options.fontSize=parseInt(a,10),this._setFont({fontSize:a+"px",lineHeight:a+"px"}),this.menus.all.text._setSelectValue("fontSize",a)},setFontFamily:function(a){this.options.fontFamily=a,this._setFont({fontFamily:a}),this.menus.all.text._setSelectValue("fontFamily",a)},setFontBold:function(a){this.options.fontBold=a,this._setFont({fontWeight:a?"bold":""})},setFontItalic:function(a){this.options.fontItalic=a,this._setFont({fontStyle:a?"italic":""})},setFontUnderline:function(a){this.options.fontUnderline=a,this._setFont({fontWeight:a?"underline":""})},_setFont:function(a){this.$textInput.css(a),this.$textCalc.css(a)},_drawTextDown:function(a){this._drawTextIfNotEmpty(),this._drawShapeDown(a,1),this.$textInput.css({left:a.pageX-1,top:a.pageY-1,width:0,height:0}).show().focus()},_drawTextMove:function(a){this._drawShapeMove(a,1),this.$textInput.css({left:a.left-1,top:a.top-1,width:a.width,height:a.height})},_drawTextIfNotEmpty:function(){""!==this.$textInput.val()&&this._drawText()},_drawText:function(){var a,b,c,d,e="",f=this.$textInput.val().split("\n"),g=[],h=this.$textInput.width()-2,i=0,j=0,k=this.$textInput.position(),l=k.left+1,m=k.top+1;for(this.options.fontItalic&&(e+="italic "),this.options.fontBold&&(e+="bold "),e+=this.options.fontSize+"px "+this.options.fontFamily,a=0,b=f.length;b>a;a++){for(this.$textCalc.html(""),j=0,c=0,d=f[0].length;d>c;c++)i=this.$textCalc.append(f[a][c]).width(),i>h&&(g.push(f[a].substring(j,c)),j=c,this.$textCalc.html(f[a][c]));j!==c&&g.push(f[a].substring(j,c))}for(f=this.$textInput.val(g.join("\n")).val().split("\n"),a=0,b=f.length;b>a;a++)this.ctx.fillStyle=this.options.fillStyle,this.ctx.textBaseline="top",this.ctx.font=e,this.ctx.fillText(f[a],l,m),m+=this.options.fontSize;this.$textInput.val(""),this._addUndo()}})}(jQuery); \ No newline at end of file