jellies-draw 0.1.2 → 0.1.4

package/package.json

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

package/src/components/DrawingCanvas.vue

@@ -11,6 +11,9 @@
           'cursor-crosshair': isCrosshairCursorActive
         }
       ]"
+      :style="{
+        backgroundColor: backgroundColor
+      }"
     />
   </div>
 </template>
@@ -20,6 +23,12 @@ import Canvas from './functions/canvas';
 import Properties from './functions/properties';
 export default {
   name: 'DrawingCanvas',
+  props: {
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   computed: {
     canvas() {
       return this.$refs.whiteboard
@@ -57,9 +66,6 @@ export default {
   width: 100%;
   height: 100%;
 }
-.whiteboard {
-  background-color: yellow;
-}
 .cursor-crosshair {
   cursor: crosshair;
 }

package/src/components/ToolButtons.vue

@@ -20,6 +20,7 @@
 import ToolButton from './ToolButton.vue'
 import Properties from './functions/properties'
 import Tools from './functions/tools'
+import Canvas from './functions/canvas'
 export default {
   name: 'ToolButtons',
   components: {
@@ -66,6 +67,9 @@ export default {
   watch: {
     currentTool(newTool) {
       this.currentTool = newTool;
+    },
+    hasShortCuts(hasShortCuts) {
+      Canvas.hasShortCuts = hasShortCuts
     }
   },
   methods: {

package/src/components/functions/canvas.js

@@ -16,7 +16,7 @@ export default {
   clickHandler: null,
   isEditingText: false,
   isDrawing: false,
-  isRecording: false,
+  hasShortCuts: false,
   initialize(canvas, container) {
     this.container = container
     this.generateEventHandlers()
@@ -66,6 +66,9 @@ export default {
     }
   },
   _handleKeydown(event) {
+    if (!this.hasShortCuts) {
+      return
+    }
     if (event.key === 'Escape') {
       Transformer.deselectAllNodes();
     } else if (event.key === 'Backspace') {

package/src/components/functions/histories.js

@@ -7,22 +7,19 @@ import Properties from './properties'
 export default new Vue({
   data() {
     return {
+      recordTimer: null,
       histories: [],
       historyIndex: -1
     }
   },
   methods: {
     record() {
-      if (Canvas.isRecording) {
-        return
-      }
-      Canvas.isRecording = true
-      this.histories.splice(this.historyIndex + 1)
-      this.histories.push(Canvas.layer.toJSON())
-      this.historyIndex++
-      this.$nextTick(() => {
-        Canvas.isRecording = false
-      })
+      clearTimeout(this.recordTimer)
+      this.recordTimer = setTimeout(() => {
+        this.histories.splice(this.historyIndex + 1)
+        this.histories.push(Canvas.layer.toJSON())
+        this.historyIndex++
+      }, 50)
     },
     undo() {
       if (this.historyIndex > 0) {

package/src/components/functions/transformer.js

@@ -35,6 +35,7 @@ export default {
           node.setAttr(key, properties[key]);
         }
       });
+      Histories.record()
     });
   },
   selectNode(targetNode, isAppending = false) {