jellies-draw 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellies-draw",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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/functions/canvas.js

@@ -38,9 +38,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,6 +21,7 @@ export default {
       });
       Transformer.selectNodes(this.copiedNodes);
       this.copiedNodes = Transformer.copySelectedNodes();
+      Histories.record();
     }
   },
   _addEventsToCopiedNode(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/properties.js

@@ -25,9 +25,9 @@ export default new Vue({
         50: 'XL'
       },
       strokeWidthOptions: {
-        3: 'H',
-        4: 'HB',
-        5: 'B',
+        2: 'H',
+        3: 'HB',
+        4: 'B',
         6: '2B'
       }
     }

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

@@ -59,12 +59,14 @@ export default {
     newArrow.on('transformend', Histories.record)
     newArrow.on('dragend', Histories.record)
   },
-  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth, pointerWidth, pointerLength }) {
+  generate({ x, y, scaleX, scaleY, skewX, rotation, points, stroke, strokeWidth, pointerWidth, pointerLength }) {
     const newArrow = new Konva.Arrow({
       x,
       y,
       scaleX,
       scaleY,
+      skewX,
+      rotation,
       points,
       stroke,
       strokeWidth,

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

@@ -55,6 +55,7 @@ export default {
       if (!this.temporalShape && newEllipse.radiusX() < 5 && newEllipse.radiusY() < 5) {
         newEllipse.radiusX(15)
         newEllipse.radiusY(15)
+        Histories.record()
       }
     }, 200)
   },

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

@@ -41,12 +41,14 @@ export default {
     }
     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/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

@@ -53,6 +53,7 @@ export default {
       if (!this.temporalShape && newRectangle.width() < 5 && newRectangle.height() < 5) {
         newRectangle.width(30)
         newRectangle.height(30)
+        Histories.record()
       }
     }, 200)
   },

package/src/components/functions/transformer.js

@@ -27,8 +27,13 @@ export default {
     return selectedNodes;
   },
   removeSelectedNodes() {
-    this._nodes().forEach((node) => node.destroy());
+    const nodes = this._nodes();
+    if (nodes.length === 0) {
+      return;
+    }
+    nodes.forEach((node) => node.destroy());
     this.deselectAllNodes();
+    Histories.record();
   },
   setPropertiesOfSelectedNodes(properties) {
     const selectedNodes = this._nodes().slice();
@@ -279,6 +284,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 +295,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) {