Fix/text object position bug (#405) (fix #401)

* fix: rotated text object position bug * fix: added test for text position bug * apply codereview for adjust text origin position Co-authored-by: jwc <[email protected]>
nhn · Jun 10, 2020 · 20601cf · 20601cf
1 parent 2ce8814
commit 20601cf
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/src/js/component/text.js b/src/js/component/text.js
@@ -142,12 +142,7 @@ class Text extends Component {
  if (this.useItext) {
  canvas.forEachObject(obj => {
  if (obj.type === 'i-text') {
- obj.set({
- left: obj.left - (obj.width / 2),
- top: obj.top - (obj.height / 2),
- originX: 'left',
- originY: 'top'
- });
+ this.adjustOriginPosition(obj, 'start');
  }
  });
  } else {
@@ -172,12 +167,7 @@ class Text extends Component {
  if (obj.text === '') {
  canvas.remove(obj);
  } else {
- obj.set({
- left: obj.left + (obj.width / 2),
- top: obj.top + (obj.height / 2),
- originX: 'center',
- originY: 'center'
- });
+ this.adjustOriginPosition(obj, 'end');
  }
  }
  });
@@ -195,6 +185,27 @@ class Text extends Component {
  });
  }
 
+ /**
+ * Adjust the origin position
+ * @param {fabric.Object} text - text object
+ * @param {string} editStatus - 'start' or 'end'
+ */
+ adjustOriginPosition(text, editStatus) {
+ let [originX, originY] = ['center', 'center'];
+ if (editStatus === 'start') {
+ [originX, originY] = ['left', 'top'];
+ }
+
+ const {x: left, y: top} = text.getPointByOrigin(originX, originY);
+ text.set({
+ left,
+ top,
+ originX,
+ originY
+ });
+ text.setCoords();
+ }
+
  /**
  * Add new text on canvas image
  * @param {string} text - Initial input text

diff --git a/test/text.spec.js b/test/text.spec.js
@@ -56,6 +56,28 @@ describe('Text', () => {
  });
  });
 
+ it('Rotated text elements must also maintain consistent left and top positions after entering and exiting drawing mode.', () => {
+ const left = 10;
+ const top = 20;
+ const newText = new fabric.IText('testString', {
+ left,
+ top,
+ width: 30,
+ height: 50,
+ angle: 40,
+ originX: 'center',
+ originY: 'center'
+ });
+ text.useItext = true;
+ canvas.add(newText);
+
+ text.start();
+ text.end();
+
+ expect(newText.left).toEqual(left);
+ expect(newText.top).toEqual(top);
+ });
+
  it('change() should change contents in the text object as input.', () => {
  text.add('text123', {});