ULMS-1203 Fixed bug with textbox on page zooming

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulms/components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "UI components library",
   "homepage": "https://github.com/netology-group/ulms-media-ui",
   "bugs": {

packages/drawing/index.js

@@ -1,4 +1,6 @@
-export { Drawing, penToolModeEnum, shapeToolModeEnum, toolEnum } from './src/drawing'
+export { penToolModeEnum, shapeToolModeEnum, toolEnum } from './src/constants'
+
+export { Drawing } from './src/drawing'
 
 export { LockProvider } from './src/lock-provider'
 

packages/drawing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-drawing",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "keywords": [
     "lerna"
@@ -32,6 +32,7 @@
     "react": "^16.12.0"
   },
   "peerDependencies": {
+    "fabric": "netology-group/fabric.js#feature/ULMS-509",
     "react": "^15.6 || ^16.x || ^17.x"
   }
 }

packages/drawing/src/constants.js

@@ -0,0 +1,31 @@
+export const toolEnum = {
+  ERASER: 'eraser',
+  PAN: 'pan',
+  PEN: 'pen',
+  SELECT: 'select',
+  SHAPE: 'shape',
+  TEXT: 'textbox',
+}
+
+export const penToolModeEnum = {
+  PENCIL: 'pencil',
+  MARKER: 'marker',
+  LINE: 'line',
+}
+
+export const shapeToolModeEnum = {
+  CIRCLE: 'circle',
+  CIRCLE_SOLID: 'circle-solid',
+  RECT: 'rect',
+  RECT_SOLID: 'rect-solid',
+  TRIANGLE: 'triangle',
+  TRIANGLE_SOLID: 'triangle-solid',
+}
+
+export const enhancedFields = [
+  '_id',
+  '_lockedbyuser',
+  '_lockedselection',
+  'noScaleCache',
+  'strokeUniform',
+]

packages/drawing/src/drawing.jsx

@@ -4,6 +4,7 @@ import { fabric } from 'fabric'
 import { queue as Queue } from 'd3-queue'
 import Hammer from 'hammerjs'
 
+import { enhancedFields, penToolModeEnum, shapeToolModeEnum, toolEnum } from './constants'
 import { toCSSColor } from './util/to-css-color'
 import { LockProvider } from './lock-provider'
 
@@ -30,38 +31,6 @@ import {
   triangleSolid,
 } from './tools/_shapes'
 
-export const toolEnum = {
-  ERASER: 'eraser',
-  PAN: 'pan',
-  PEN: 'pen',
-  SELECT: 'select',
-  SHAPE: 'shape',
-  TEXT: 'textbox',
-}
-
-export const penToolModeEnum = {
-  PENCIL: 'pencil',
-  MARKER: 'marker',
-  LINE: 'line',
-}
-
-export const shapeToolModeEnum = {
-  CIRCLE: 'circle',
-  CIRCLE_SOLID: 'circle-solid',
-  RECT: 'rect',
-  RECT_SOLID: 'rect-solid',
-  TRIANGLE: 'triangle',
-  TRIANGLE_SOLID: 'triangle-solid',
-}
-
-export const enhancedFields = [
-  '_id',
-  '_lockedbyuser',
-  '_lockedselection',
-  'noScaleCache',
-  'strokeUniform',
-]
-
 export const normalizeFields = (object, fields) => Object.assign(
   object,
   fields.reduce((a, field) => {

packages/drawing/src/select-tool.test.js

@@ -5,6 +5,8 @@ import Adapter from 'enzyme-adapter-react-16' // eslint-disable-line import/no-e
 
 import { Drawing, LockProvider, toolEnum } from '../index'
 
+import SelectTool from './tools/select'
+
 Enzyme.configure({ adapter: new Adapter() })
 
 const { shallow } = Enzyme
@@ -114,4 +116,30 @@ describe('`updateAllSelection` on onlineIds change is ok', () => {
       },
     ])
   })
+
+  it('`handleTextEditStartEvent` sets style for hiddenTextarea', () => {
+    const wrap = shallow((
+      <Drawing
+        tokenProvider={tokenProvider}
+        objects={[]}
+        tool={toolEnum.SELECT}
+      />
+    ))
+
+    const instance = wrap.instance()
+    const st = new SelectTool(instance.canvas, {})
+    const opts = {
+      target: {
+        hiddenTextarea: {
+          style: {},
+        },
+      },
+    }
+
+    st.handleTextEditStartEvent(opts)
+
+    expect(opts.target.hiddenTextarea.style).toEqual({
+      width: '10px', height: '10px', fontSize: '10px',
+    })
+  })
 })

packages/drawing/src/textbox-tool.test.js

@@ -0,0 +1,47 @@
+/* globals expect, describe, it, beforeEach, afterEach, jest */
+import React from 'react'
+import Enzyme from 'enzyme' // eslint-disable-line import/no-extraneous-dependencies
+import Adapter from 'enzyme-adapter-react-16' // eslint-disable-line import/no-extraneous-dependencies
+
+import { Drawing, toolEnum } from '../index'
+
+import { TextboxTool } from './tools/textbox'
+
+Enzyme.configure({ adapter: new Adapter() })
+
+const { shallow } = Enzyme
+
+const tokenProvider = () => Promise.resolve('access_token')
+
+describe('TextboxTool tool', () => {
+  beforeEach(() => {
+    jest
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementationOnce(cb => cb())
+  })
+
+  afterEach(() => {})
+
+  it('`handleTextEditStartEvent` sets style for hiddenTextarea', () => {
+    const wrap = shallow((
+      <Drawing
+        tokenProvider={tokenProvider}
+        objects={[]}
+        tool={toolEnum.TEXT}
+      />
+    ))
+
+    const instance = wrap.instance()
+    const tt = new TextboxTool(instance.canvas, undefined, {})
+
+    tt.__object = tt.__objectFn()
+
+    tt.__object.hiddenTextarea = { style: {} }
+
+    tt.handleTextEditStartEvent()
+
+    expect(tt.__object.hiddenTextarea.style).toEqual({
+      width: '10px', height: '10px', fontSize: '10px',
+    })
+  })
+})

packages/drawing/src/tools/lock.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import { Base } from './base'
-import { enhancedFields } from '../drawing'
+import { enhancedFields } from '../constants'
 
 export class LockTool extends Base {
   static lockObject (object, options = {}) {

packages/drawing/src/tools/select.js

@@ -154,6 +154,14 @@ export default class SelectTool extends Base {
     }
   }
 
+  handleTextEditStartEvent (opts) {
+    if (opts.target && opts.target.hiddenTextarea) {
+      opts.target.hiddenTextarea.style.width = '10px'
+      opts.target.hiddenTextarea.style.height = '10px'
+      opts.target.hiddenTextarea.style.fontSize = '10px'
+    }
+  }
+
   handleTextEditEndEvent (opts) {
     this._unsetObject()
   }

packages/drawing/src/tools/textbox.js

@@ -65,4 +65,12 @@ export class TextboxTool extends PositionableObject {
     this._canvas.setActiveObject(this.__object)
     this.__object.enterEditing()
   }
+
+  handleTextEditStartEvent () {
+    if (this.__object && this.__object.hiddenTextarea) {
+      this.__object.hiddenTextarea.style.width = '10px'
+      this.__object.hiddenTextarea.style.height = '10px'
+      this.__object.hiddenTextarea.style.fontSize = '10px'
+    }
+  }
 }