jellies-draw 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A drawer for jellies",
   "private": false,
   "main": "./src/index.js",
@@ -59,5 +59,8 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "resolutions": {
+    "vue-loader": "^15.11.1"
+  }
 }

package/src/components/ToolButtons.vue

@@ -117,10 +117,11 @@ export default {
       if (action === 'clear') {
         Tools.clear.clear()
       }
-      if (this.currentTool !== action && 
+      if (this.currentTool !== action &&
         (
           (this.toolsCanBeLocked.includes(this.currentTool) && this.isCurrentToolLocked) ||
-          this.toolsCanBeUsedContinuously.includes(this.currentTool)
+          this.toolsCanBeUsedContinuously.includes(this.currentTool) ||
+          this.currentTool === 'selector'
         )
       ) {
         this.latestTool = {

package/src/components/functions/canvas.js

@@ -4,6 +4,7 @@ import Clipboard from './clipboard';
 import Properties from './properties';
 import Tools from './tools';
 import Histories from './histories';
+import AttachedText from './tools/helper/attachedText';
 export default {
   layer: null,
   stage: null,
@@ -29,6 +30,7 @@ export default {
     });
     this.layer = new Konva.Layer();
     this.stage.add(this.layer);
+    AttachedText.attachLayerListeners(this.layer);
     document.addEventListener('keydown', this.keydownHandler);
     document.addEventListener('keyup', this.keyupHandler);
     Transformer.initialize();
@@ -38,9 +40,7 @@ export default {
     this.stage.on('pointerup', this.handleCanvasPointerUp);
     this.stage.on('click tap', this.clickHandler);
     this.stage.on('pointerdown', () => {
-      if (Properties.isUsingDrawingTool) {
-        window.addEventListener('pointerup', this.handleGlobalPointerUp, { once: true });
-      }
+      window.addEventListener('pointerup', this.handleGlobalPointerUp, { once: true });
     });
     this.stage.on('mousemove', this._handleMouseMove.bind(this));
   },

package/src/components/functions/clipboard.js

@@ -1,6 +1,7 @@
 import Canvas from './canvas';
 import Transformer from './transformer';
 import Tools from './tools';
+import Histories from './histories';
 export default {
   copiedNodes: [],
   copy() {
@@ -11,7 +12,7 @@ export default {
     Transformer.removeSelectedNodes();
   },
   paste() {
-    if (this.copiedNodes) {
+    if (this.copiedNodes && this.copiedNodes.length > 0) {
       this.copiedNodes.forEach((node) => {
         node.x(node.x() + 10);
         node.y(node.y() + 10);
@@ -20,13 +21,23 @@ export default {
       });
       Transformer.selectNodes(this.copiedNodes);
       this.copiedNodes = Transformer.copySelectedNodes();
+      Histories.record();
     }
   },
   _addEventsToCopiedNode(node) {
-    if (node.getClassName() === 'Text') {
+    const className = node.getClassName();
+    if (className === 'Text') {
       Tools.text.bindEvents(node);
-    } else if (node.getClassName() === 'Arrow') {
+    } else if (className === 'Arrow') {
       Tools.arrow.bindEvents(node);
+    } else if (className === 'Rect') {
+      Tools.rectangle.bindEvents(node);
+    } else if (className === 'Ellipse') {
+      Tools.ellipse.bindEvents(node);
+    } else if (className === 'Line') {
+      Tools.line.bindEvents(node);
+    } else if (className === 'Shape' && node.attrs.nodeType === 'pen') {
+      Tools.pen.bindEvents(node);
     }
   }
 }

package/src/components/functions/histories.js

@@ -23,12 +23,14 @@ export default new Vue({
     },
     undo() {
       if (this.historyIndex > 0) {
+        clearTimeout(this.recordTimer)
         this.historyIndex--
         this.refreshNodes()
       }
     },
     redo() {
       if (this.historyIndex < this.histories.length - 1) {
+        clearTimeout(this.recordTimer)
         this.historyIndex++
         this.refreshNodes()
       }

package/src/components/functions/tools/arrow.js

@@ -3,6 +3,7 @@ import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
 import AngleSnap from './helper/angleSnap'
+import AttachedText from './helper/attachedText'
 
 export default {
   temporalShape: null,
@@ -58,18 +59,24 @@ export default {
     })
     newArrow.on('transformend', Histories.record)
     newArrow.on('dragend', Histories.record)
+    AttachedText.bindShapeEvents(newArrow)
   },
-  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth, pointerWidth, pointerLength }) {
+  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth, pointerWidth, pointerLength, attachedText, attachedFontSize, attachedFill }) {
     const newArrow = new Konva.Arrow({
       x,
       y,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       points,
       stroke,
       strokeWidth,
       pointerWidth,
       pointerLength,
+      attachedText,
+      attachedFontSize,
+      attachedFill,
       name: 'node',
       nodeType: 'arrow',
       lineCap: 'round',

package/src/components/functions/tools/ellipse.js

@@ -3,6 +3,7 @@ import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
 import ShapeConstraint from './helper/shapeConstraint'
+import AttachedText from './helper/attachedText'
 
 export default {
   temporalShape: null,
@@ -55,10 +56,11 @@ export default {
       if (!this.temporalShape && newEllipse.radiusX() < 5 && newEllipse.radiusY() < 5) {
         newEllipse.radiusX(15)
         newEllipse.radiusY(15)
+        Histories.record()
       }
     }, 200)
   },
-  generate({ x, y, radiusX, radiusY, scaleX, scaleY, skewX, rotation, fill, stroke, strokeWidth }) {    
+  generate({ x, y, radiusX, radiusY, scaleX, scaleY, skewX, rotation, fill, stroke, strokeWidth, attachedText, attachedFontSize, attachedFill }) {
     const newEllipse = new Konva.Ellipse({
       x,
       y,
@@ -71,6 +73,9 @@ export default {
       fill,
       stroke,
       strokeWidth,
+      attachedText,
+      attachedFontSize,
+      attachedFill,
       name: 'node',
       nodeType: 'ellipse',
       strokeScaleEnabled: false
@@ -83,5 +88,6 @@ export default {
     newEllipse.off('dragend')
     newEllipse.on('transformend', Histories.record)
     newEllipse.on('dragend', Histories.record)
+    AttachedText.bindShapeEvents(newEllipse)
   }
 }

package/src/components/functions/tools/eraser.js

@@ -1,6 +1,7 @@
 import Konva from 'konva'
 import Properties from '../properties'
 import Canvas from '../canvas'
+import AttachedText from './helper/attachedText'
 
 export default {
   temporalShape: null,
@@ -87,7 +88,10 @@ export default {
   },
 
   _destroyErasedNodes() {
-    this.erasedNodes.forEach(node => node.destroy())
+    this.erasedNodes.forEach(node => {
+      AttachedText.deleteVisibleNode(node)
+      node.destroy()
+    })
     this.erasedNodes.clear()
   },
 

package/src/components/functions/tools/helper/attachedText.js

@@ -0,0 +1,386 @@
+import Konva from 'konva'
+import Canvas from '../../canvas'
+import Properties from '../../properties'
+import Histories from '../../histories'
+
+const SHAPE_CLASS_NAMES = ['Rect', 'Ellipse', 'Line', 'Arrow']
+const CHANGE_EVENTS_BY_CLASS = {
+  Rect: ['xChange', 'yChange', 'scaleXChange', 'scaleYChange', 'skewXChange', 'rotationChange', 'widthChange', 'heightChange', 'strokeChange'],
+  Ellipse: ['xChange', 'yChange', 'scaleXChange', 'scaleYChange', 'skewXChange', 'rotationChange', 'radiusXChange', 'radiusYChange', 'strokeChange'],
+  Line: ['xChange', 'yChange', 'scaleXChange', 'scaleYChange', 'skewXChange', 'rotationChange', 'pointsChange', 'strokeChange'],
+  Arrow: ['xChange', 'yChange', 'scaleXChange', 'scaleYChange', 'skewXChange', 'rotationChange', 'pointsChange', 'strokeChange']
+}
+
+let activeEditor = null
+
+function isPathShape(shape) {
+  return shape.className === 'Line' || shape.className === 'Arrow'
+}
+
+function supportsAttachedText(node) {
+  return SHAPE_CLASS_NAMES.includes(node.className)
+}
+
+function getCenterMetrics(shape) {
+  if (shape.className === 'Rect') {
+    return {
+      cx: shape.width() / 2,
+      cy: shape.height() / 2,
+      width: shape.width(),
+      height: shape.height()
+    }
+  }
+  if (shape.className === 'Ellipse') {
+    return {
+      cx: 0,
+      cy: 0,
+      width: shape.radiusX() * 2,
+      height: shape.radiusY() * 2
+    }
+  }
+  return null
+}
+
+function freshShapeTransform(shape) {
+  const m = new Konva.Transform()
+  const a = shape.attrs
+  const x = a.x || 0
+  const y = a.y || 0
+  if (x !== 0 || y !== 0) m.translate(x, y)
+  const rotation = Konva.getAngle(a.rotation || 0)
+  if (rotation !== 0) m.rotate(rotation)
+  const skewX = a.skewX || 0
+  const skewY = a.skewY || 0
+  if (skewX !== 0 || skewY !== 0) m.skew(skewX, skewY)
+  const sx = a.scaleX === undefined ? 1 : a.scaleX
+  const sy = a.scaleY === undefined ? 1 : a.scaleY
+  if (sx !== 1 || sy !== 1) m.scale(sx, sy)
+  const ox = a.offsetX || 0
+  const oy = a.offsetY || 0
+  if (ox !== 0 || oy !== 0) m.translate(-ox, -oy)
+  return m
+}
+
+function getPathMidpoint(shape) {
+  const points = shape.getPoints()
+  if (!points || points.length < 4) return null
+  const midX = (points[0] + points[points.length - 2]) / 2
+  const midY = (points[1] + points[points.length - 1]) / 2
+  return freshShapeTransform(shape).point({ x: midX, y: midY })
+}
+
+function findVisibleNode(shape) {
+  if (shape._attachedVisibleNode && shape._attachedVisibleNode.getStage()) {
+    return shape._attachedVisibleNode
+  }
+  shape._attachedVisibleNode = null
+  return null
+}
+
+function syncCenterText(shape, textNode) {
+  const metrics = getCenterMetrics(shape)
+  if (!metrics) return
+  const padding = 4
+  const innerWidth = Math.max(20, metrics.width - padding * 2)
+  textNode.fill(shape.stroke() || Properties.strokeColor)
+  textNode.width(innerWidth)
+  textNode.align('center')
+  textNode.verticalAlign('middle')
+  textNode.scaleX(shape.scaleX() || 1)
+  textNode.scaleY(shape.scaleY() || 1)
+  textNode.skewX(shape.skewX() || 0)
+  textNode.rotation(shape.rotation() || 0)
+  textNode.offsetX(innerWidth / 2)
+  textNode.offsetY(textNode.height() / 2)
+  const worldCenter = freshShapeTransform(shape).point({ x: metrics.cx, y: metrics.cy })
+  textNode.absolutePosition(worldCenter)
+}
+
+function syncPathText(shape, textNode) {
+  const midpoint = getPathMidpoint(shape)
+  if (!midpoint) return
+  textNode.fill(shape.stroke() || Properties.strokeColor)
+  textNode.setAttr('width', undefined)
+  textNode.align('left')
+  textNode.verticalAlign('top')
+  textNode.scaleX(1)
+  textNode.scaleY(1)
+  textNode.skewX(0)
+  textNode.rotation(0)
+  textNode.offsetX(textNode.width() / 2)
+  textNode.offsetY(textNode.height() / 2)
+  textNode.absolutePosition(midpoint)
+  applyLineGap(shape, textNode)
+}
+
+function applyLineGap(shape, textNode) {
+  const text = textNode.text()
+  const points = shape.getPoints()
+  if (!text || !points || points.length < 4) {
+    shape.dashEnabled(false)
+    return
+  }
+  const transform = freshShapeTransform(shape)
+  const start = transform.point({ x: points[0], y: points[1] })
+  const end = transform.point({ x: points[points.length - 2], y: points[points.length - 1] })
+  const screenLength = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))
+  const padding = 6
+  const screenGap = textNode.width() + padding * 2
+  if (screenLength > screenGap + 4) {
+    const halfRemaining = (screenLength - screenGap) / 2
+    shape.dash([halfRemaining, screenGap, halfRemaining])
+    shape.dashEnabled(true)
+  } else {
+    shape.dashEnabled(false)
+  }
+}
+
+function syncVisibleNode(shape) {
+  const visible = findVisibleNode(shape)
+  if (!visible) return
+  if (isPathShape(shape)) {
+    syncPathText(shape, visible)
+  } else {
+    syncCenterText(shape, visible)
+  }
+}
+
+function createVisibleText(shape, options = {}) {
+  const text = shape.attrs.attachedText
+  if (!options.allowEmpty && (text === undefined || text === null || text === '')) {
+    return null
+  }
+  if (!shape.getStage()) return null
+  const existing = findVisibleNode(shape)
+  if (existing) {
+    existing.text(text || '')
+    syncVisibleNode(shape)
+    return existing
+  }
+  const fontSize = shape.attrs.attachedFontSize || Properties.fontSize
+  const fill = shape.stroke() || Properties.strokeColor
+  const visible = new Konva.Text({
+    text: text || '',
+    fontSize,
+    fill,
+    align: isPathShape(shape) ? 'left' : 'center',
+    verticalAlign: isPathShape(shape) ? 'top' : 'middle',
+    name: 'attached',
+    listening: false,
+    strokeEnabled: false
+  })
+  shape._attachedVisibleNode = visible
+  Canvas.layer.add(visible)
+  syncVisibleNode(shape)
+  raiseTransformerControls()
+  return visible
+}
+
+function raiseTransformerControls() {
+  if (!Canvas.layer) return
+  const dragArea = Canvas.layer.findOne('.dragArea')
+  if (dragArea) dragArea.moveToTop()
+  const transformer = Canvas.layer.findOne('Transformer')
+  if (transformer) transformer.moveToTop()
+}
+
+function deleteVisibleNode(shape) {
+  const visible = findVisibleNode(shape)
+  if (visible) {
+    visible.destroy()
+  }
+  shape._attachedVisibleNode = null
+  if (isPathShape(shape)) {
+    shape.dashEnabled(false)
+  }
+}
+
+function bindShapeEvents(shape) {
+  if (!supportsAttachedText(shape)) return
+  const events = CHANGE_EVENTS_BY_CLASS[shape.className] || []
+  const eventStr = events.map(e => `${e}.attached`).join(' ')
+  shape.off('.attached')
+  if (eventStr) {
+    shape.on(eventStr, () => syncVisibleNode(shape))
+  }
+  shape.on('dblclick.attached dbltap.attached', () => startEdit(shape))
+}
+
+function startEdit(shape) {
+  if (Canvas.isEditingText) return
+  if (!supportsAttachedText(shape)) return
+  Canvas.isEditingText = true
+  Properties.tool = 'text'
+  let visible = findVisibleNode(shape)
+  if (!visible) {
+    visible = createVisibleText(shape, { allowEmpty: true })
+  }
+  if (!visible) {
+    Canvas.isEditingText = false
+    Properties.tool = 'selector'
+    return
+  }
+  Canvas.layer.batchDraw()
+  openEditor(shape, visible)
+}
+
+function openEditor(shape, visible) {
+  if (!visible) {
+    Canvas.isEditingText = false
+    Properties.tool = 'selector'
+    return
+  }
+  if (activeEditor) {
+    activeEditor.cleanup(false)
+    activeEditor = null
+  }
+  const stage = Canvas.stage
+  const originalText = shape.attrs.attachedText || ''
+  const fontSize = shape.attrs.attachedFontSize || Properties.fontSize
+  const fill = shape.stroke() || Properties.strokeColor
+  const containerOffset = {
+    x: stage.container().offsetLeft,
+    y: stage.container().offsetTop
+  }
+  const textarea = document.createElement('textarea')
+  document.body.appendChild(textarea)
+  textarea.value = originalText
+  textarea.style.position = 'absolute'
+  textarea.style.fontSize = `${fontSize}px`
+  textarea.style.lineHeight = '1'
+  textarea.style.color = 'transparent'
+  textarea.style.caretColor = fill
+  textarea.style.fontFamily = visible.fontFamily()
+  textarea.style.border = 'none'
+  textarea.style.padding = '0'
+  textarea.style.margin = '0'
+  textarea.style.background = 'transparent'
+  textarea.style.outline = 'none'
+  textarea.style.resize = 'none'
+  textarea.style.textAlign = 'center'
+  textarea.style.overflow = 'hidden'
+  textarea.style.zIndex = '10000'
+  textarea.style.transformOrigin = 'center center'
+  textarea.setAttribute('wrap', isPathShape(shape) ? 'off' : 'soft')
+
+  const state = { closed: false }
+
+  function applyLiveValue() {
+    if (!visible) return
+    visible.text(textarea.value)
+    syncVisibleNode(shape)
+    const w = visible.width() || fontSize
+    const h = visible.height() || fontSize
+    const cx = visible.x()
+    const cy = visible.y()
+    textarea.style.width = `${w}px`
+    textarea.style.height = `${h}px`
+    textarea.style.left = `${containerOffset.x + cx - w / 2}px`
+    textarea.style.top = `${containerOffset.y + cy - h / 2}px`
+    const rotation = visible.rotation()
+    textarea.style.transform = rotation ? `rotate(${rotation}deg)` : ''
+    Canvas.layer.batchDraw()
+  }
+
+  applyLiveValue()
+  textarea.focus()
+  textarea.setSelectionRange(textarea.value.length, textarea.value.length)
+
+  function keyHandler(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      cleanup(true)
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      cleanup(false)
+    }
+  }
+
+  function inputHandler() {
+    applyLiveValue()
+  }
+
+  function mouseHandler(event) {
+    if (event.target !== textarea) {
+      cleanup(true)
+    }
+  }
+
+  function cleanup(commit) {
+    if (state.closed) return
+    state.closed = true
+    textarea.removeEventListener('keydown', keyHandler)
+    textarea.removeEventListener('input', inputHandler)
+    window.removeEventListener('mousedown', mouseHandler, true)
+    if (textarea.parentNode) textarea.parentNode.removeChild(textarea)
+    activeEditor = null
+    if (commit) {
+      const value = textarea.value
+      if (value) {
+        shape.setAttr('attachedText', value)
+        shape.setAttr('attachedFontSize', fontSize)
+        const node = findVisibleNode(shape)
+        if (node) {
+          node.text(value)
+          syncVisibleNode(shape)
+        } else {
+          createVisibleText(shape)
+        }
+      } else {
+        shape.setAttr('attachedText', '')
+        deleteVisibleNode(shape)
+      }
+    } else {
+      shape.setAttr('attachedText', originalText)
+      const node = findVisibleNode(shape)
+      if (originalText) {
+        if (node) {
+          node.text(originalText)
+          syncVisibleNode(shape)
+        } else {
+          createVisibleText(shape)
+        }
+      } else if (node) {
+        deleteVisibleNode(shape)
+      }
+    }
+    Canvas.isEditingText = false
+    Properties.tool = 'selector'
+    Canvas.layer.batchDraw()
+    if (commit) Histories.record()
+  }
+
+  textarea.addEventListener('keydown', keyHandler)
+  textarea.addEventListener('input', inputHandler)
+  setTimeout(() => {
+    if (!state.closed) {
+      window.addEventListener('mousedown', mouseHandler, true)
+    }
+  })
+
+  activeEditor = { cleanup }
+}
+
+function handleNodeAdded(event) {
+  const node = event.child
+  if (!node || !node.attrs) return
+  if (!supportsAttachedText(node)) return
+  if (node.attrs.attachedText && node.getStage()) {
+    createVisibleText(node)
+  }
+}
+
+function attachLayerListeners(layer) {
+  if (!layer || layer._attachedLayerHooked) return
+  layer._attachedLayerHooked = true
+  layer.on('add', handleNodeAdded)
+}
+
+export default {
+  bindShapeEvents,
+  syncVisibleNode,
+  createVisibleText,
+  deleteVisibleNode,
+  startEdit,
+  attachLayerListeners
+}

package/src/components/functions/tools/line.js

@@ -3,6 +3,7 @@ import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
 import AngleSnap from './helper/angleSnap'
+import AttachedText from './helper/attachedText'
 
 export default {
   temporalShape: null,
@@ -41,15 +42,20 @@ export default {
     }
     this.temporalShape = null
   },
-  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth }) {
+  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth, attachedText, attachedFontSize, attachedFill }) {
     const newLine = new Konva.Line({
       x,
       y,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       points,
       stroke,
       strokeWidth,
+      attachedText,
+      attachedFontSize,
+      attachedFill,
       name: 'node',
       nodeType: 'line',
       lineCap: 'round',
@@ -64,5 +70,6 @@ export default {
     newLine.off('dragend')
     newLine.on('transformend', Histories.record)
     newLine.on('dragend', Histories.record)
+    AttachedText.bindShapeEvents(newLine)
   }
 }

package/src/components/functions/tools/pen.js

@@ -77,7 +77,7 @@ export default {
     this.temporalShape = null
   },
 
-  generate({ points, widths, stroke, x, y, width, height }) {
+  generate({ points, widths, stroke, x, y, width, height, scaleX, scaleY, skewX, rotation }) {
     const tool = this
 
     const shape = new Konva.Shape({
@@ -85,6 +85,10 @@ export default {
       y: y || 0,
       width: width || 0,
       height: height || 0,
+      scaleX,
+      scaleY,
+      skewX,
+      rotation,
       stroke,
       points,
       widths,

package/src/components/functions/tools/rectangle.js

@@ -3,6 +3,7 @@ import Properties from '../properties'
 import Canvas from '../canvas'
 import Histories from '../histories'
 import ShapeConstraint from './helper/shapeConstraint'
+import AttachedText from './helper/attachedText'
 
 export default {
   temporalShape: null,
@@ -53,14 +54,15 @@ export default {
       if (!this.temporalShape && newRectangle.width() < 5 && newRectangle.height() < 5) {
         newRectangle.width(30)
         newRectangle.height(30)
+        Histories.record()
       }
     }, 200)
   },
-  generate({ x, y, scaleX, scaleY, width, height, skewX, rotation, fill, stroke, strokeWidth }) {
+  generate({ x, y, scaleX, scaleY, width, height, skewX, rotation, fill, stroke, strokeWidth, attachedText, attachedFontSize, attachedFill }) {
     const newRectangle = new Konva.Rect({
       x,
       y,
-      scaleX, 
+      scaleX,
       scaleY,
       width,
       height,
@@ -69,6 +71,9 @@ export default {
       fill,
       stroke,
       strokeWidth,
+      attachedText,
+      attachedFontSize,
+      attachedFill,
       name: 'node',
       nodeType: 'rectangle',
       strokeScaleEnabled: false
@@ -81,5 +86,6 @@ export default {
     newRectangle.off('dragend')
     newRectangle.on('transformend', Histories.record)
     newRectangle.on('dragend', Histories.record)
+    AttachedText.bindShapeEvents(newRectangle)
   }
 }

package/src/components/functions/tools/text.js

@@ -60,111 +60,79 @@ export default {
     Canvas.isEditingText = true;
     Properties.tool = 'text'
     this.temporalText = newText;
-    newText.hide();
     Transformer.deselectAllNodes();
 
-    const textPosition = newText.absolutePosition();
-    const areaPosition = {
-      x: Canvas.stage.container().offsetLeft + textPosition.x,
-      y: Canvas.stage.container().offsetTop + textPosition.y
-    };
-
     if (this.textarea) {
       this.textarea.removeEventListener('keydown', this.textareaEditingHandler);
+      if (this.textarea.parentNode) {
+        this.textarea.parentNode.removeChild(this.textarea);
+      }
     }
 
     this.textarea = document.createElement('textarea');
     document.body.appendChild(this.textarea);
-    
+
     this.textarea.value = newText.text();
     this.textarea.style.position = 'absolute';
-    this.textarea.style.top = `${areaPosition.y}px`;
-    this.textarea.style.left = `${areaPosition.x}px`;
-    this.textarea.style.width = `${newText.width() - newText.padding() * 2}px`;
-    this.textarea.style.height =
-      `${ newText.height() - newText.padding() * 2 + 5 }px`;
     this.textarea.style.fontSize = `${ newText.fontSize() }px`;
     this.textarea.style.border = 'none';
     this.textarea.style.padding = '0';
     this.textarea.style.margin = '0';
     this.textarea.style.overflow = 'hidden';
-    this.textarea.style.background = 'none';
+    this.textarea.style.background = 'transparent';
     this.textarea.style.outline = 'none';
     this.textarea.style.resize = 'none';
     this.textarea.style.lineHeight = newText.lineHeight();
     this.textarea.style.fontFamily = newText.fontFamily();
-    this.textarea.style.transformOrigin = 'left top';
     this.textarea.style.textAlign = newText.align();
-    this.textarea.style.color = newText.fill();
-    const rotation = newText.rotation();
-    let transform = '';
-    if (rotation) {
-      transform += `rotateZ(${  rotation  }deg)`;
-    }
-
-    let px = 0;
-    
-    const isFirefox =
-      navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-    if (isFirefox) {
-      px += 2 + Math.round(newText.fontSize() / 20);
-    }
-    transform += `translateY(-${  px  }px)`;
-
-    this.textarea.style.transform = transform;
-
-    this.textarea.style.height = 'auto';
-    this.textarea.style.height = `${this.textarea.scrollHeight + 3}px`;
+    this.textarea.style.color = 'transparent';
+    this.textarea.style.caretColor = newText.fill();
+    this.textarea.style.transformOrigin = 'left top';
+    this.textarea.style.zIndex = '10000';
 
+    this._syncTextareaToText(newText);
     this.textarea.focus();
+    this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
 
     this.textareaEditingHandler = this._handleTextareaEditing.bind(this);
     this.disableTextareaHandler = this._handleDisableTextarea.bind(this);
     this.textarea.addEventListener('keydown', this.textareaEditingHandler);
+    this.textarea.addEventListener('input', this.textareaEditingHandler);
     setTimeout(() => {
       window.addEventListener('mousedown', this.disableTextareaHandler);
     });
   },
+  _syncTextareaToText(newText) {
+    const textPosition = newText.absolutePosition();
+    const areaPosition = {
+      x: Canvas.stage.container().offsetLeft + textPosition.x,
+      y: Canvas.stage.container().offsetTop + textPosition.y
+    };
+    this.textarea.style.top = `${areaPosition.y}px`;
+    this.textarea.style.left = `${areaPosition.x}px`;
+    this.textarea.style.width = `${newText.width() - newText.padding() * 2}px`;
+    this.textarea.style.height = `${newText.height() - newText.padding() * 2}px`;
+    const rotation = newText.rotation();
+    this.textarea.style.transform = rotation ? `rotateZ(${rotation}deg)` : '';
+  },
   _handleDisableTextarea(event) {
     if (event.target !== this.textarea) {
       if (this.textarea.value) {
         this.temporalText.text(this.textarea.value)
-        this.temporalText.show()
         this.textarea.remove()
       } else {
         this.textarea.remove()
         this.temporalText.remove()
       }
       Properties.tool = 'selector'
+      Canvas.isEditingText = false
       window.removeEventListener('mousedown', this.disableTextareaHandler)
     }
   },
   _handleTextareaEditing() {
-    const scale = this.temporalText.getAbsoluteScale().x;
-    this._setTextareaWidth(this.temporalText.width() * scale);
-    this.textarea.style.height = 'auto';
-    this.textarea.style.height =
-    `${this.textarea.scrollHeight + this.temporalText.fontSize()  }px`;
-  },
-  _setTextareaWidth(newWidth) {
-    if (!newWidth) {
-      newWidth = this.textNode.placeholder.length * this.temporalText.fontSize();
-    }
-    const isSafari = /^((?!chrome|android).)*safari/i.test(
-      navigator.userAgent
-    );
-    const isFirefox =
-      navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-    if (isSafari || isFirefox) {
-      newWidth = Math.ceil(newWidth);
-    }
-
-    const isEdge =
-      document.documentMode || /Edge/.test(navigator.userAgent);
-    if (isEdge) {
-      newWidth += 1;
-    }
-    this.textarea.style.width = `${ newWidth }px`;
+    this.temporalText.text(this.textarea.value);
+    this._syncTextareaToText(this.temporalText);
+    Canvas.layer.batchDraw();
   },
   generate({ text, x, y, fill, fontSize, width, height, scaleX, scaleY, skewX, rotation }) {
     const newText = new Konva.Text({

package/src/components/functions/transformer.js

@@ -2,6 +2,7 @@ import Konva from 'konva'
 import Canvas from './canvas'
 import Properties from './properties'
 import Histories from './histories'
+import AttachedText from './tools/helper/attachedText'
 export default {
   transformer: null,
   linearTransformer: {
@@ -11,14 +12,21 @@ export default {
   },
   initialize() {
     this.transformer = new Konva.Transformer();
-    
+
     // 创建一个透明的拖动区域
     this.dragArea = new Konva.Rect({
+      name: 'dragArea',
       fill: 'transparent',
       draggable: true,
       listening: true
     });
-    
+    this.dragArea.on('dblclick dbltap', (event) => {
+      const nodes = this._nodes();
+      if (nodes.length === 1) {
+        nodes[0]._fire('dblclick', { evt: event.evt, target: nodes[0] });
+      }
+    });
+
     Canvas.layer.add(this.dragArea);
     Canvas.layer.add(this.transformer);
   },
@@ -27,8 +35,16 @@ export default {
     return selectedNodes;
   },
   removeSelectedNodes() {
-    this._nodes().forEach((node) => node.destroy());
+    const nodes = this._nodes();
+    if (nodes.length === 0) {
+      return;
+    }
+    nodes.forEach((node) => {
+      AttachedText.deleteVisibleNode(node);
+      node.destroy();
+    });
     this.deselectAllNodes();
+    Histories.record();
   },
   setPropertiesOfSelectedNodes(properties) {
     const selectedNodes = this._nodes().slice();
@@ -279,6 +295,7 @@ export default {
     });
 
     this.dragArea.off('dragmove');
+    this.dragArea.off('dragend');
     this.dragArea.on('dragmove', () => {
       const dx = this.dragArea.x() - box.x;
       const dy = this.dragArea.y() - box.y;
@@ -289,6 +306,7 @@ export default {
       box.x = this.dragArea.x();
       box.y = this.dragArea.y();
     });
+    this.dragArea.on('dragend', () => Histories.record());
   },
   _updateTransformerAnchors(targetNodes) {
     if (targetNodes.length === 1) {