Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-17 02:01:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use clientWidth and clientHeight of upperCanvas to size hiddenTextarea (#4768)

Browse source 
* Use clientWidth and clientHeight of upperCanvas to size hiddenTextarea to work with dynamic sized canvas.
This commit is contained in:
Nate Evans 2018-03-15 22:46:01 -04:00 committed by Andrea Bogazzi
parent 1fa3fdae31
commit 5155da9fce
2 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/mixins/itext_behavior.mixin.js
View file

@ -525,8 +525,10 @@
y: boundaries.top + boundaries.topOffset + charHeight
},
upperCanvas = this.canvas.upperCanvasEl,
maxWidth = upperCanvas.width - charHeight,
maxHeight = upperCanvas.height - charHeight;
upperCanvasWidth = upperCanvas.clientWidth || upperCanvas.width,
upperCanvasHeight = upperCanvas.clientHeight || upperCanvas.height,
maxWidth = upperCanvasWidth - charHeight,
maxHeight = upperCanvasHeight - charHeight;
p = fabric.util.transformPoint(p, m);
p = fabric.util.transformPoint(p, this.canvas.viewportTransform);

43
test/unit/itext.js
View file

@ -791,6 +791,49 @@
iText.abortCursorAnimation();
});
QUnit.test('hiddenTextarea does not move DOM', function(assert) {
if (fabric.isLikelyNode) {
assert.ok(true);
return;
}
var el = fabric.document.createElement('div');
el.id = 'itext-test-wrapper';
el.style.width = '100px';
el.style.height = '65px';
el.innerHTML = '<canvas id="itext-test-canvas" style="width: 100%; height: 100%;"></canvas>';
fabric.document.body.appendChild(el);
var iText = new fabric.IText('Double-click to edit', { fill: '#ffffff', fontSize: 50 });
var canvas2 = new fabric.Canvas('itext-test-canvas', { width: 2800, height: 1600, renderOnAddRemove: true });
canvas2.setDimensions({'max-height': '100%', 'max-width': '100%'}, { cssOnly: true });
canvas2.renderAll();
iText.set({
top: canvas2.height - iText.height,
left: canvas2.width - iText.width
});
canvas2.add(iText);
var widthBeforeEdit = fabric.document.documentElement.scrollWidth,
heightBeforeEdit = fabric.document.documentElement.scrollHeight;
iText.enterEditing();
var widthAfterEdit = fabric.document.documentElement.scrollWidth,
heightAfterEdit = fabric.document.documentElement.scrollHeight;
iText.exitEditing();
assert.equal(widthAfterEdit, widthBeforeEdit, 'Adding hiddenTextarea modified DOM width');
assert.equal(heightAfterEdit, heightBeforeEdit, 'Adding hiddenTextarea modified DOM height');
canvas2.dispose();
el.parentNode.removeChild(el);
});
// QUnit.test('measuring width of words', function (assert) {
// var ctx = canvas.getContext('2d');
// var text = 'test foo bar';