fix: fixed Text object -> ITextObject (fix #262 #109)

src/js/component/text.js

@@ -20,24 +20,7 @@ const resetStyles = {
  textAlign: 'left',
  underline: false
 };
-const {browser} = snippet;
-
-const TEXTAREA_CLASSNAME = 'tui-image-eidtor-textarea';
-const TEXTAREA_STYLES = makeStyleText({
- position: 'absolute',
- padding: 0,
- display: 'none',
- border: '1px dotted red',
- overflow: 'hidden',
- resize: 'none',
- outline: 'none',
- 'border-radius': 0,
- 'background-color': 'transparent',
- '-webkit-appearance': 'none',
- 'z-index': 9999,
- 'white-space': 'pre'
-});
-const EXTRA_PIXEL_LINEHEIGHT = 0.1;
+
 const DBCLICK_TIME = 500;
 
 /**
@@ -115,12 +98,6 @@ class Text extends Component {
  * @type {boolean}
  */
  this.isPrevEditing = false;
-
- /**
- * use itext
- * @type {boolean}
- */
- this.useItext = graphics.useItext;
  }
 
  /**
@@ -139,20 +116,16 @@ class Text extends Component {
  'text:editing': this._listeners.modify
  });
 
- 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'
- });
- }
- });
- } else {
- this._createTextarea();
- }
+ 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.setCanvasRatio();
  }
@@ -166,25 +139,20 @@ class Text extends Component {
  canvas.selection = true;
  canvas.defaultCursor = 'default';
 
- if (this.useItext) {
- canvas.forEachObject(obj => {
- if (obj.type === 'i-text') {
- 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'
- });
- }
+ canvas.forEachObject(obj => {
+ if (obj.type === 'i-text') {
+ 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'
+ });
  }
- });
- } else {
- canvas.discardActiveObject();
- this._removeTextarea();
- }
+ }
+ });
 
  canvas.off({
  'mouse:down': this._listeners.mousedown,
@@ -223,15 +191,11 @@ class Text extends Component {
  styles = snippet.extend(styles, options.styles);
  }
 
- if (this.useItext) {
- newText = new fabric.IText(text, styles);
- selectionStyle = snippet.extend({}, selectionStyle, {
- originX: 'left',
- originY: 'top'
- });
- } else {
- newText = new fabric.Text(text, styles);
- }
+ newText = new fabric.IText(text, styles);
+ selectionStyle = snippet.extend({}, selectionStyle, {
+ originX: 'left',
+ originY: 'top'
+ });
 
  newText.set(selectionStyle);
  newText.on({
@@ -376,59 +340,6 @@ class Text extends Component {
  this._defaultStyles.top = position.y;
  }
 
- /**
- * Create textarea element on canvas container
- * @private
- */
- _createTextarea() {
- const container = this.getCanvasElement().parentNode;
- const textarea = document.createElement('textarea');
-
- textarea.className = TEXTAREA_CLASSNAME;
- textarea.setAttribute('style', TEXTAREA_STYLES);
- textarea.setAttribute('wrap', 'off');
-
- container.appendChild(textarea);
-
- this._textarea = textarea;
-
- this._listeners = snippet.extend(this._listeners, {
- input: this._onInput.bind(this),
- keydown: this._onKeyDown.bind(this),
- blur: this._onBlur.bind(this),
- scroll: this._onScroll.bind(this)
- });
-
- if (browser.msie && browser.version === 9) {
- fabric.util.addListener(textarea, 'keydown', this._listeners.keydown);
- } else {
- fabric.util.addListener(textarea, 'input', this._listeners.input);
- }
- fabric.util.addListener(textarea, 'blur', this._listeners.blur);
- fabric.util.addListener(textarea, 'scroll', this._listeners.scroll);
- }
-
- /**
- * Remove textarea element on canvas container
- * @private
- */
- _removeTextarea() {
- const container = this.getCanvasElement().parentNode;
- const textarea = container.querySelector('textarea');
-
- container.removeChild(textarea);
-
- this._textarea = null;
-
- if (browser.msie && browser.version < 10) {
- fabric.util.removeListener(textarea, 'keydown', this._listeners.keydown);
- } else {
- fabric.util.removeListener(textarea, 'input', this._listeners.input);
- }
- fabric.util.removeListener(textarea, 'blur', this._listeners.blur);
- fabric.util.removeListener(textarea, 'scroll', this._listeners.scroll);
- }
-
  /**
  * Input event handler
  * @private
@@ -605,8 +516,8 @@ class Text extends Component {
  const newClickTime = (new Date()).getTime();
 
  if (target.isEditing || this._isDoubleClick(newClickTime)) {
- if (!this.useItext) {
- this._changeToEditingMode(target);
+ if (!target.isEditing) {
+ target.enterEditing();
  }
  this.fire(events.TEXT_EDITING); // fire editing text event
  }
@@ -623,50 +534,6 @@ class Text extends Component {
  _isDoubleClick(newClickTime) {
  return (newClickTime - this._lastClickTime < DBCLICK_TIME);
  }
-
- /**
- * Change state of text object for editing
- * @param {fabric.Text} obj - Text object fired event
- * @private
- */
- _changeToEditingMode(obj) {
- const ratio = this.getCanvasRatio();
- const textareaStyle = this._textarea.style;
- const canvas = this.getCanvas();
-
- this.isPrevEditing = true;
-
- canvas.remove(obj);
- canvas.discardActiveObject();
-
- this._editingObj = obj;
- this._textarea.value = obj.text;
-
- this._editingObjInfos = {
- left: obj.left,
- top: obj.top,
- width: obj.width,
- height: obj.height
- };
-
- textareaStyle.display = 'block';
- textareaStyle.left = `${obj.oCoords.tl.x / ratio}px`;
- textareaStyle.top = `${obj.oCoords.tl.y / ratio}px`;
- textareaStyle.width = `${Math.ceil(obj.width / ratio)}px`;
- textareaStyle.height = `${Math.ceil(obj.height / ratio)}px`;
- textareaStyle.transform = `rotate(${obj.angle}deg)`;
- textareaStyle.color = obj.fill;
-
- textareaStyle['font-size'] = `${obj.fontSize / ratio}px`;
- textareaStyle['font-family'] = obj.fontFamily;
- textareaStyle['font-style'] = obj.fontStyle;
- textareaStyle['font-weight'] = obj.fontWeight;
- textareaStyle['text-align'] = obj.textAlign;
- textareaStyle['line-height'] = obj.lineHeight + EXTRA_PIXEL_LINEHEIGHT;
- textareaStyle['transform-origin'] = 'left top';
-
- this._textarea.focus();
- }
 }
 
 export default Text;

src/js/graphics.js

@@ -41,15 +41,13 @@ const backstoreOnly = {
  * @param {Object} [option] - Canvas max width & height of css
  * @param {number} option.cssMaxWidth - Canvas css-max-width
  * @param {number} option.cssMaxHeight - Canvas css-max-height
- * @param {boolean} option.useItext - Use IText in text mode
  * @param {boolean} option.useDragAddIcon - Use dragable add in icon mode
  * @ignore
  */
 class Graphics {
  constructor(element, {
  cssMaxWidth,
  cssMaxHeight,
- useItext = false,
  useDragAddIcon = false
  } = {}) {
  /**
@@ -70,12 +68,6 @@ class Graphics {
  */
  this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT;
 
- /**
- * Use Itext mode for text component
- * @type {boolean}
- */
- this.useItext = useItext;
-
  /**
  * Use add drag icon mode for icon component
  * @type {boolean}

src/js/imageEditor.js

@@ -175,7 +175,6 @@ class ImageEditor {
  this.ui ? this.ui.getEditorArea() : wrapper, {
  cssMaxWidth: options.cssMaxWidth,
  cssMaxHeight: options.cssMaxHeight,
- useItext: !!this.ui,
  useDragAddIcon: !!this.ui
  }
  );

test/text.spec.js

@@ -100,59 +100,6 @@ describe('Text', () => {
  });
  });
 
- describe('_createTextarea()', () => {
- let $textarea;
-
- beforeEach(() => {
- text._createTextarea();
-
- $textarea = $(text.getCanvasElement().parentNode).find('textarea');
- });
-
- afterEach(() => {
- text._removeTextarea();
- });
-
- it('should attach the created "textarea" element on canvas container.', () => {
- expect($textarea.length).toEqual(1);
- });
-
- it('should have class name.', () => {
- const expected = 'tui-image-eidtor-textarea';
-
- expect($textarea.attr('class')).toEqual(expected);
- });
-
- it('should add inline style on "textarea" element.', () => {
- expect($textarea.attr('style')).not.toEqual(null);
- });
- });
-
- it('_removeTextarea() should remove "textarea" element on canvas container.', () => {
- text._createTextarea();
- text._removeTextarea();
-
- const $textarea = $(text.getCanvasElement().parentNode).find('textarea');
-
- expect($textarea.length).toEqual(0);
- });
-
- it('_onBlur() should hide the "textarea" element.', () => {
- const obj = new fabric.Text('test');
-
- text._createTextarea();
-
- const $textarea = $(text.getCanvasElement().parentNode).find('textarea');
-
- text._editingObj = obj;
-
- canvas.add(obj);
-
- text._onBlur();
-
- expect($textarea.css('display')).toEqual('none');
- });
-
  it('_onFabricScaling() should change size of selected text object.', () => {
  const obj = new fabric.Text('test');
  const mock = {
@@ -170,48 +117,4 @@ describe('Text', () => {
 
  expect(obj.fontSize).toEqual(originSize * scale);
  });
-
- describe('_changeToEditingMode()', () => {
- let textarea;
- const ratio = 10;
- const expected = {
- fontSize: 12,
- fontFamily: 'Comic Sans',
- fontStyle: 'italic',
- fontWeight: '700',
- textAlign: 'right',
- lineHeight: '3'
- };
- const obj = new fabric.Text('test', expected);
-
- beforeEach(() => {
- text._createTextarea();
-
- textarea = text._textarea;
-
- canvas.add(obj);
-
- spyOn(text, 'getCanvasRatio').and.returnValue(ratio);
-
- text._changeToEditingMode(obj);
- });
-
- afterEach(() => {
- text._removeTextarea();
- });
-
- it('should change selected text object into textarea.', () => {
- expect(textarea.style.display).not.toEqual('none');
- });
-
- it('should set style of textarea by selected text object.', () => {
- const textareaStyles = textarea.style;
-
- expect(textareaStyles['font-size']).toEqual(`${expected.fontSize / ratio}px`);
- expect(textareaStyles['font-family'].replace(/'|"|\\/g, '')).toEqual(expected.fontFamily);
- expect(textareaStyles['font-weight']).toEqual(expected.fontWeight);
- expect(textareaStyles['font-align']).toEqual(expected.fontAlign);
- expect(textareaStyles['line-height']).toEqual(obj.lineHeight + 0.1);
- });
- });
 });