jellies-draw 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A drawer for jellies",
   "private": false,
   "main": "./src/index.js",

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

@@ -46,7 +46,7 @@ export default {
       }
     }, 200)
   },
-  generate({ x, y, radiusX, radiusY, scaleX, scaleY, fill, stroke, strokeWidth }) {    
+  generate({ x, y, radiusX, radiusY, scaleX, scaleY, skewX, rotation, fill, stroke, strokeWidth }) {    
     const newEllipse = new Konva.Ellipse({
       x,
       y,
@@ -54,6 +54,8 @@ export default {
       radiusY,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       fill,
       stroke,
       strokeWidth,

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

@@ -34,12 +34,14 @@ export default {
   finish() {
     this.temporalShape = null
   },
-  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth }) {
+  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth }) {
     const newLine = new Konva.Line({
       x,
       y,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       points,
       stroke,
       strokeWidth,

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

@@ -44,7 +44,7 @@ export default {
       }
     }, 200)
   },
-  generate({ x, y, scaleX, scaleY, width, height, fill, stroke, strokeWidth }) {
+  generate({ x, y, scaleX, scaleY, width, height, skewX, rotation, fill, stroke, strokeWidth }) {
     const newRectangle = new Konva.Rect({
       x,
       y,
@@ -52,6 +52,8 @@ export default {
       scaleY,
       width,
       height,
+      skewX,
+      rotation,
       fill,
       stroke,
       strokeWidth,

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

@@ -10,7 +10,14 @@ export default {
   disableTextareaHandler: null,
   handleTextareaTimer: null,
   show({ offsetX, offsetY }) {
-    if (!Canvas.isEditingText) {
+    if (Canvas.isEditingText) {
+      return
+    }
+    clearTimeout(this.handleTextareaTimer)
+    this.handleTextareaTimer = setTimeout(() => {
+      if (Canvas.isEditingText) {
+        return
+      }
       const newText = this.generate({
         text: '',
         x: offsetX,
@@ -19,13 +26,10 @@ export default {
         width: 200,
         fill: Properties.strokeColor
       })
-      this.temporalText = newText
-      Canvas.layer.add(this.temporalText)
-      clearTimeout(this.handleTextareaTimer)
-      this.handleTextareaTimer = setTimeout(() => {
-        this._handleEnableTextarea(newText)
-      }, 200)
-    }
+      this.temporalText = newText;
+      Canvas.layer.add(this.temporalText);
+      this._handleEnableTextarea(newText)
+    }, 200)
   },
   bindEvents(newText) {
     newText.off('dblclick dbltap')
@@ -123,11 +127,16 @@ export default {
   },
   _handleDisableTextarea(event) {
     if (event.target !== this.textarea) {
-      this.temporalText.text(this.textarea.value)
-      this.textarea.remove()
-      window.removeEventListener('mousedown', this.disableTextareaHandler)
-      this.temporalText.show()
+      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'
+      window.removeEventListener('mousedown', this.disableTextareaHandler)
     }
   },
   _handleTextareaEditing() {
@@ -157,7 +166,7 @@ export default {
     }
     this.textarea.style.width = `${ newWidth }px`;
   },
-  generate({ text, x, y, fill, fontSize, width, height, scaleX, scaleY }) {
+  generate({ text, x, y, fill, fontSize, width, height, scaleX, scaleY, skewX, rotation }) {
     const newText = new Konva.Text({
       text,
       x,
@@ -168,6 +177,8 @@ export default {
       height,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       name: 'node',
       nodeType: 'text',
       strokeEnabled: false