diff --git a/package-lock.json b/package-lock.json
index dae607ca..f34dbc80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ulms/components",
- "version": "1.3.0",
+ "version": "1.3.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 6c3e16af..28d05e21 100644
--- a/package.json
+++ b/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": {
diff --git a/packages/drawing/index.js b/packages/drawing/index.js
index 33fc7f1c..e821dbc3 100644
--- a/packages/drawing/index.js
+++ b/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'
diff --git a/packages/drawing/package-lock.json b/packages/drawing/package-lock.json
index f87a5055..1432ff08 100644
--- a/packages/drawing/package-lock.json
+++ b/packages/drawing/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ulms/ui-drawing",
- "version": "1.1.1",
+ "version": "1.1.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/packages/drawing/package.json b/packages/drawing/package.json
index b8443442..bf240289 100644
--- a/packages/drawing/package.json
+++ b/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"
}
}
diff --git a/packages/drawing/src/constants.js b/packages/drawing/src/constants.js
new file mode 100644
index 00000000..a7869d0e
--- /dev/null
+++ b/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',
+]
diff --git a/packages/drawing/src/drawing.jsx b/packages/drawing/src/drawing.jsx
index 0ade6f0e..b9790731 100644
--- a/packages/drawing/src/drawing.jsx
+++ b/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) => {
diff --git a/packages/drawing/src/select-tool.test.js b/packages/drawing/src/select-tool.test.js
index ad4c69e8..95d92531 100644
--- a/packages/drawing/src/select-tool.test.js
+++ b/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((
+
+ ))
+
+ 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',
+ })
+ })
})
diff --git a/packages/drawing/src/textbox-tool.test.js b/packages/drawing/src/textbox-tool.test.js
new file mode 100644
index 00000000..7ef79a7b
--- /dev/null
+++ b/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((
+
+ ))
+
+ 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',
+ })
+ })
+})
diff --git a/packages/drawing/src/tools/lock.js b/packages/drawing/src/tools/lock.js
index bf12ba8b..b80ce3aa 100644
--- a/packages/drawing/src/tools/lock.js
+++ b/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 = {}) {
diff --git a/packages/drawing/src/tools/select.js b/packages/drawing/src/tools/select.js
index 41e8475e..e7cbb083 100644
--- a/packages/drawing/src/tools/select.js
+++ b/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()
}
diff --git a/packages/drawing/src/tools/textbox.js b/packages/drawing/src/tools/textbox.js
index fd52b456..29b41a60 100644
--- a/packages/drawing/src/tools/textbox.js
+++ b/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'
+ }
+ }
}