X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=roojs-ui-debug.js;h=c9b83ff0a14da9c3e3ae976c6282b2f130c22309;hp=ce9e707d1fd8a815ae9fdb6d0baface1857e2445;hb=refs%2Fheads%2Fwip_leon_T7094_logo_image_upload_in_boilerplate;hpb=bb1d8521a9869c2309487cc00bf49b48ee7ba39a diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js index ce9e707d1f..c9b83ff0a1 100644 --- a/roojs-ui-debug.js +++ b/roojs-ui-debug.js @@ -21160,6 +21160,8 @@ Roo.htmleditor.Filter.prototype = { return; case this.tag === true: // everything + case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1: + case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":": case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches. case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches. if (this.replaceTag && false === this.replaceTag(e)) { @@ -21178,6 +21180,21 @@ Roo.htmleditor.Filter.prototype = { }, this); + }, + + + removeNodeKeepChildren : function( node) + { + + ar = Array.from(node.childNodes); + for (var i = 0; i < ar.length; i++) { + + node.removeChild(ar[i]); + // what if we need to walk these??? + node.parentNode.insertBefore(ar[i], node); + + } + node.parentNode.removeChild(node); } }; @@ -21390,25 +21407,36 @@ Roo.htmleditor.FilterKeepChildren = function(cfg) if (this.tag === false) { return; // dont walk.. (you can use this to use this just to do a child removal on a single tag ) } + // hacky? + if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) { + this.cleanNamespace = true; + } + this.walk(cfg.node); } Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack, { - + cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag. replaceTag : function(node) { // walk children... - //Roo.log(node); + //Roo.log(node.tagName); var ar = Array.from(node.childNodes); //remove first.. + for (var i = 0; i < ar.length; i++) { - if (ar[i].nodeType == 1) { + var e = ar[i]; + if (e.nodeType == 1) { if ( - (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1) + (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1) || // array and it matches - (typeof(this.tag) == 'string' && this.tag == ar[i].tagName) + (typeof(this.tag) == 'string' && this.tag == e.tagName) + || + (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1) + || + (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":") ) { this.replaceTag(ar[i]); // child is blacklisted as well... continue; @@ -21426,6 +21454,7 @@ Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack, } } + //Roo.log("REMOVE:" + node.tagName); node.parentNode.removeChild(node); return false; // don't walk children @@ -21587,6 +21616,8 @@ Roo.htmleditor.FilterWord = function(cfg) // no need to apply config. this.replaceDocBullets(cfg.node); + this.replaceAname(cfg.node); + // this is disabled as the removal is done by other filters; // this.walk(cfg.node); @@ -21713,21 +21744,67 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, }, + replaceAname : function (doc) + { + // replace all the a/name without.. + var aa = Array.from(doc.getElementsByTagName('a')); + for (var i = 0; i < aa.length; i++) { + var a = aa[i]; + if (a.hasAttribute("name")) { + a.removeAttribute("name"); + } + if (a.hasAttribute("href")) { + continue; + } + // reparent children. + this.removeNodeKeepChildren(a); + + } + + + + }, + + + replaceDocBullets : function(doc) { // this is a bit odd - but it appears some indents use ql-indent-1 + //Roo.log(doc.innerHTML); - var listpara = doc.getElementsByClassName('ql-indent-1'); + var listpara = doc.getElementsByClassName('MsoListParagraphCxSpFirst'); + for( var i = 0; i < listpara.length; i ++) { + listpara.item(i).className = "MsoListParagraph"; + } + // this is a bit hacky - we had one word document where h2 had a miso-list attribute. + var htwo = doc.getElementsByTagName('h2'); + for( var i = 0; i < htwo.length; i ++) { + if (htwo.item(i).hasAttribute('style') && htwo.item(i).getAttribute('style').match(/mso-list:/)) { + htwo.item(i).className = "MsoListParagraph"; + } + } + listpara = doc.getElementsByClassName('MsoNormal'); + while(listpara.length) { + if (listpara.item(0).hasAttribute('style') && listpara.item(0).getAttribute('style').match(/mso-list:/)) { + listpara.item(0).className = "MsoListParagraph"; + } else { + listpara.item(0).className = "MsoNormalx"; + } + } + listpara = doc.getElementsByClassName('ql-indent-1'); while(listpara.length) { this.replaceDocBullet(listpara.item(0)); } - - var listpara = doc.getElementsByClassName('MsoListParagraph'); + listpara = doc.getElementsByClassName('MsoListParagraph'); while(listpara.length) { + this.replaceDocBullet(listpara.item(0)); } + }, + + replaceDocBullet : function(p) { // gather all the siblings. @@ -21745,10 +21822,35 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) { break; } + if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) { + items.push(ns); + ns = ns.nextSibling; + has_list = true; + continue; + } + var spans = ns.getElementsByTagName('span'); + if (!spans.length) { + break; + } + var has_list = false; + for(var i = 0; i < spans.length; i++) { + if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) { + has_list = true; + break; + } + } + if (!has_list) { + break; + } items.push(ns); ns = ns.nextSibling; + + + } + if (!items.length) { + ns.className = ""; + return; } - var ul = parent.ownerDocument.createElement('ul'); // what about number lists... parent.insertBefore(ul, p); @@ -21756,14 +21858,19 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, var stack = [ ul ]; var last_li = false; + var margin_to_depth = {}; + max_margins = -1; + items.forEach(function(n, ipos) { //Roo.log("got innertHMLT=" + n.innerHTML); var spans = n.getElementsByTagName('span'); if (!spans.length) { //Roo.log("No spans found"); - + parent.removeChild(n); + + return; // skip it... } @@ -21784,17 +21891,26 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, style = this.styleToObject(n); // mo-list is from the parent node. if (typeof(style['mso-list']) == 'undefined') { //Roo.log("parent is missing level"); + parent.removeChild(n); + return; } - var nlvl = (style['mso-list'].split(' ')[1].replace(/level/,'') *1) - 1 ; - - - + var margin = style['margin-left']; + if (typeof(margin_to_depth[margin]) == 'undefined') { + max_margins++; + margin_to_depth[margin] = max_margins; + } + nlvl = margin_to_depth[margin] ; + if (nlvl > lvl) { //new indent var nul = doc.createElement('ul'); // what about number lists... + if (!last_li) { + last_li = doc.createElement('li'); + stack[lvl].appendChild(last_li); + } last_li.appendChild(nul); stack[nlvl] = nul; @@ -21807,12 +21923,7 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, //Roo.log("innerHTML = " + n.innerHTML); parent.removeChild(n); - // copy children of p into nli - /*while(n.firstChild) { - var fc = n.firstChild; - n.removeChild(fc); - nli.appendChild(fc); - }*/ + },this); @@ -23316,7 +23427,17 @@ Roo.htmleditor.KeyEnter.prototype = { var pc = range.closest([ 'ol', 'ul']); var pli = range.closest('li'); if (!pc || e.ctrlKey) { - sel.insertNode('br', 'after'); + // on it list, or ctrl pressed. + if (!e.ctrlKey) { + sel.insertNode('br', 'after'); + } else { + // only do this if we have ctrl key.. + var br = doc.createElement('br'); + br.className = 'clear'; + br.setAttribute('style', 'clear: both'); + sel.insertNode(br, 'after'); + } + this.core.undoManager.addEvent(); this.core.fireEditorEvent(e); @@ -23680,9 +23801,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { store : { xtype : 'SimpleStore', data : [ - ['50%'], + ['100%'], ['80%'], - ['100%'] + ['50%'], + ['20%'], + ['10%'] ], fields : [ 'val'], xns : Roo.data @@ -24752,7 +24875,6 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { */ toObject : function() { - var ret = { tag : 'td', contenteditable : 'true', // this stops cell selection from picking the table. @@ -24793,6 +24915,9 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { this.colspan = Math.max(1,1*node.getAttribute('colspan')); this.rowspan = Math.max(1,1*node.getAttribute('rowspan')); this.html = node.innerHTML; + if (node.style.textAlign != '') { + this.textAlign = node.style.textAlign; + } }, @@ -24850,7 +24975,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { c.col = cn; } - if (typeof(this.colWidths[cn]) == 'undefined') { + if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) { this.colWidths[cn] = ce.style.width; if (this.colWidths[cn] != '') { all_auto = false; @@ -24919,6 +25044,9 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { this.colspan += rc.colspan; this.node.setAttribute('colspan', this.colspan); + var table = this.toTableArray(); + this.normalizeWidths(table); + this.updateWidths(table); }, @@ -24953,19 +25081,17 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { this.colspan = 1; for(var r = cd.row; r < cd.row + cd.rowspan; r++) { - - + for(var c = cd.col; c < cd.col + cd.colspan; c++) { if (r == cd.row && c == cd.col) { this.node.removeAttribute('rowspan'); this.node.removeAttribute('colspan'); - continue; } var ntd = this.node.cloneNode(); // which col/row should be 0.. - ntd.removeAttribute('id'); // - //ntd.style.width = ''; + ntd.removeAttribute('id'); + ntd.style.width = this.colWidths[c]; ntd.innerHTML = ''; table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 }; } @@ -24973,8 +25099,6 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { } this.redrawAllCells(table); - - }, @@ -25023,13 +25147,21 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, { el.width = Math.floor(this.colWidths[c]) +'%'; el.updateElement(el.node); } + if (this.colWidths[0] != false && table[r][c].colspan > 1) { + var el = Roo.htmleditor.Block.factory(table[r][c].cell); + var width = 0; + for(var i = 0; i < table[r][c].colspan; i ++) { + width += Math.floor(this.colWidths[c + i]); + } + el.width = width +'%'; + el.updateElement(el.node); + } table[r][c].cell = false; // done } } }, normalizeWidths : function(table) { - if (this.colWidths[0] === false) { var nw = 100.0 / this.colWidths.length; this.colWidths.forEach(function(w,i) { @@ -25757,7 +25889,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { .map(function(g) { return g.toDataURL(); }) .filter(function(g) { return g != 'about:blank'; }); - + //Roo.log(html); html = this.cleanWordChars(html); var d = (new DOMParser().parseFromString(html, 'text/html')).body; @@ -25775,7 +25907,17 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { return false; } + + if (images.length > 0) { + // replace all v:imagedata - with img. + var ar = Array.from(d.getElementsByTagName('v:imagedata')); + Roo.each(ar, function(node) { + node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node ); + node.parentNode.removeChild(node); + }); + + Roo.each(d.getElementsByTagName('img'), function(img, i) { img.setAttribute('src', images[i]); }); @@ -25791,7 +25933,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { }); new Roo.htmleditor.FilterBlack({ node : d, tag : this.black}); // should be fonts.. - new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', 'O:P' ]} ); + new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} ); new Roo.htmleditor.FilterParagraph({ node : d }); new Roo.htmleditor.FilterSpan({ node : d }); new Roo.htmleditor.FilterLongBr({ node : d }); @@ -26481,6 +26623,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { cleanWord : function(node) { new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body }); + new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} ); }, @@ -35922,7 +36065,6 @@ Roo.LayoutStateManager.prototype = { */ Roo.ContentPanel = function(el, config, content){ - console.log("ContentPanel Constructor"); /* if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory config = el; @@ -43580,6 +43722,8 @@ Roo.XTemplate.from = function(el){ * @cfg {Number} errorTimeout default 3000 * @cfg {Number} minWidth default 300 * @cfg {Number} minHeight default 300 + * @cfg {Number} outputMaxWidth default 1200 + * @cfg {Number} windowSize default 300 * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight'] * @cfg {Boolean} isDocument (true|false) default false * @cfg {String} url action url @@ -43594,7 +43738,6 @@ Roo.XTemplate.from = function(el){ */ Roo.dialog.UploadCropbox = function(config){ - console.log("Dialog UploadCropbox Constructor"); Roo.dialog.UploadCropbox.superclass.constructor.call(this, config); this.addEvents({ @@ -43690,7 +43833,14 @@ Roo.XTemplate.from = function(el){ * @param {Roo.dialog.UploadCropbox} this * @param {Object} formData */ - "arrange" : true + "arrange" : true, + /** + * @event loadcanvas + * Fire after load the canvas + * @param {Roo.dialog.UploadCropbox} + * @param {Object} imgEl + */ + "loadcanvas" : true }); this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD; @@ -43711,6 +43861,8 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { cropData : false, minWidth : 300, minHeight : 300, + outputMaxWidth : 1200, + windowSize : 300, file : false, exif : {}, baseRotate : 1, @@ -43777,8 +43929,6 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { onRender : function(ct, position) { - console.log("On Render"); - console.log(this); Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position); if(this.el){ @@ -43788,51 +43938,25 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { this.initEvents(); } - - return; } + else { + var cfg = Roo.apply({}, this.getAutoCreate()); - - - var cfg = Roo.apply({}, this.getAutoCreate()); - - cfg.id = this.id || Roo.id(); - - // fill in the extra attributes - if (this.xattr && typeof(this.xattr) =='object') { - for (var i in this.xattr) { - cfg[i] = this.xattr[i]; + cfg.id = this.id || Roo.id(); + + if (this.cls) { + cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls; } + + if (this.style) { // fixme needs to support more complex style data. + cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style; + } + + this.el = ct.createChild(cfg, position); + + this.initEvents(); } - if(this.dataId){ - cfg.dataId = this.dataId; - } - - if (this.cls) { - cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls; - } - - if (this.style) { // fixme needs to support more complex style data. - cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style; - } - - if(this.name){ - cfg.name = this.name; - } - - this.el = ct.createChild(cfg, position); - - if (this.tooltip) { - this.tooltipEl().attr('tooltip', this.tooltip); - } - - if(this.tabIndex !== undefined){ - this.el.dom.setAttribute('tabIndex', this.tabIndex); - } - - this.initEvents(); - if (this.buttons.length) { Roo.each(this.buttons, function(bb) { @@ -43926,7 +44050,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { this.cropData = false; this.notifyEl.dom.innerHTML = this.emptyText; - this.selectorEl.dom.value = ''; + // this.selectorEl.dom.value = ''; }, @@ -44021,29 +44145,33 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { { this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width; this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height; + + if(this.fireEvent('loadcanvas', this, this.imageEl) != false){ - this.bodyEl.un('click', this.beforeSelectFile, this); - - this.notifyEl.hide(); - this.thumbEl.show(); - this.footerEl.show(); - - this.baseRotateLevel(); + this.bodyEl.un('click', this.beforeSelectFile, this); + + this.notifyEl.hide(); + this.thumbEl.show(); + this.footerEl.show(); + + this.baseRotateLevel(); + + if(this.isDocument){ + this.setThumbBoxSize(); + } + + this.setThumbBoxPosition(); + + this.baseScaleLevel(); + + this.draw(); + + this.resize(); + + this.canvasLoaded = true; - if(this.isDocument){ - this.setThumbBoxSize(); } - this.setThumbBoxPosition(); - - this.baseScaleLevel(); - - this.draw(); - - this.resize(); - - this.canvasLoaded = true; - if(this.loadMask){ this.maskEl.unmask(); } @@ -44098,18 +44226,30 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width); var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height); - + + if(minX > maxX) { + var tempX = minX; + minX = maxX; + maxX = tempX; + } + + if(minY > maxY) { + var tempY = minY; + minY = maxY; + maxY = tempY; + } + var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX(); var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY(); x = x - this.mouseX; y = y - this.mouseY; - + var bgX = Math.ceil(x + this.previewEl.getLeft(true)); var bgY = Math.ceil(y + this.previewEl.getTop(true)); - bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX); - bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY); + bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX); + bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY); this.previewEl.setLeft(bgX); this.previewEl.setTop(bgY); @@ -44130,13 +44270,13 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { e.stopEvent(); this.startScale = this.scale; - - this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1); + this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1); if(!this.zoomable()){ this.scale = this.startScale; return; } + this.draw(); @@ -44153,6 +44293,9 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale); var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale); + + var maxWidth = this.imageEl.OriginWidth; + var maxHeight = this.imageEl.OriginHeight; if( this.isDocument && @@ -44182,10 +44325,10 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { !this.isDocument && (this.rotate == 0 || this.rotate == 180) && ( - width < this.minWidth || - width > this.imageEl.OriginWidth || - height < this.minHeight || - height > this.imageEl.OriginHeight + (this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight) && width < this.minWidth || + (this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight) && height < this.minHeight || + width > maxWidth || + height > maxHeight ) ){ return false; @@ -44434,9 +44577,10 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); - - canvas.width = this.minWidth; - canvas.height = this.minHeight; + + canvas.width = this.thumbEl.getWidth() / this.getScaleLevel(); + + canvas.height = this.thumbEl.getHeight() / this.getScaleLevel(); switch (this.rotate) { case 0 : @@ -44447,35 +44591,23 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel()); var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel()); - var targetWidth = this.minWidth - 2 * x; - var targetHeight = this.minHeight - 2 * y; - - var scale = 1; - - if((x == 0 && y == 0) || (x == 0 && y > 0)){ - scale = targetWidth / width; - } - - if(x > 0 && y == 0){ - scale = targetHeight / height; - } - - if(x > 0 && y > 0){ - scale = targetWidth / width; - - if(width < height){ - scale = targetHeight / height; - } - } - - context.scale(scale, scale); - - var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true)); - var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true)); + var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true); + var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true); sx = sx < 0 ? 0 : (sx / this.getScaleLevel()); sy = sy < 0 ? 0 : (sy / this.getScaleLevel()); + if(canvas.width > this.outputMaxWidth) { + var scale = this.outputMaxWidth / canvas.width; + canvas.width = canvas.width * scale; + canvas.height = canvas.height * scale; + context.scale(scale, scale); + } + + context.fillStyle = 'white'; + context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel()); + + context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height); break; @@ -44594,7 +44726,6 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } context.scale(scale, scale); - var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true)); var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true)); @@ -44637,11 +44768,11 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } } - height = 300; + height = this.windowSize; width = Math.ceil(this.minWidth * height / this.minHeight); if(this.minWidth > this.minHeight){ - width = 300; + width = this.windowSize; height = Math.ceil(this.minHeight * width / this.minWidth); } @@ -44752,13 +44883,17 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } } - + + if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) { + this.baseScale = width / this.minWidth; + } + return; }, getScaleLevel : function() { - return this.baseScale * Math.pow(1.1, this.scale); + return this.baseScale * Math.pow(1.02, this.scale); }, onTouchStart : function(e) @@ -44887,13 +45022,16 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { var formData = new FormData(); formData.append('returnHTML', 'NO'); - + if(crop){ formData.append('crop', crop); - } - - if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){ - formData.append(this.paramName, file, file.name); + var blobBin = atob(crop.split(',')[1]); + var array = []; + for(var i = 0; i < blobBin.length; i++) { + array.push(blobBin.charCodeAt(i)); + } + var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType}); + formData.append(this.paramName, croppedFile, file.name); } if(typeof(file.filename) != 'undefined'){ @@ -44903,7 +45041,7 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { if(typeof(file.mimetype) != 'undefined'){ formData.append('mimetype', file.mimetype); } - + if(this.fireEvent('arrange', this, formData) != false){ this.xhr.send(formData); }; @@ -44966,7 +45104,9 @@ Roo.extend(Roo.dialog.UploadCropbox, Roo.Component, { } this.file = file; - this.cropType = file.type; + if(typeof(file.type) != 'undefined' && file.type.length != 0) { + this.cropType = file.type; + } var _this = this;