jellies-draw 0.1.8 → 0.1.9

package/package.json

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

package/src/components/DrawingCanvas.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     ref="container"
-    class="container"
+    :class="[
+      'container',
+      {
+        'container-penetrable': isCanvasPenetrable
+      }
+    ]"
   >
     <div
       ref="whiteboard"
@@ -26,7 +31,7 @@ export default {
   props: {
     backgroundColor: {
       type: String,
-      default: 'transparent'
+      default: 'penetrable'
     }
   },
   computed: {
@@ -38,6 +43,14 @@ export default {
     },
     isCrosshairCursorActive() {
       return (Properties.isUsingDrawingTool && !Properties.isUsingText)
+    },
+    isCanvasPenetrable() {
+      return Properties.isCanvasPenetrable
+    }
+  },
+  watch: {
+    isCanvasPenetrable() {
+      this.$emit('penetrable-updated', this.isCanvasPenetrable)
     }
   },
   mounted() {
@@ -65,6 +78,11 @@ export default {
 .container {
   width: 100%;
   height: 100%;
+  position: relative;
+  z-index: 9999; /* 确保画板在最上层 */
+}
+.container-penetrable {
+  pointer-events: none;
 }
 .cursor-crosshair {
   cursor: crosshair;

package/src/components/ToolButton.vue

@@ -2,7 +2,10 @@
   <div 
   :class="[
     'wrapper',
-    { active: isActive }
+    { 
+      active: isActive,
+      locked: isLocked
+    }
   ]">
     <button
       :class="[
@@ -24,11 +27,15 @@ export default {
     },
     shortCut: {
       type: Number,
-      default: 1
+      default: null
     },
     isActive: {
       type: Boolean,
       default: false
+    },
+    isLocked: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -93,6 +100,17 @@ button {
 .wrapper.active > span {
   color: #399af4;
 }
+.wrapper.locked {
+  background-color: #399af4;
+  color: #fff;
+}
+.wrapper.locked:hover {
+  margin-top: 3px;
+  box-shadow: none;
+}
+.wrapper.locked > span {
+  color: #fff;
+}
 .tool-ellipse:before {
   content: "\e654";
 }

package/src/components/ToolButtons.vue

@@ -4,8 +4,9 @@
       v-for="tool, index in tools"
       :key="tool"
       :action="tool"
-      :short-cut="(index + 1) % 10"
+      :short-cut="toolShortCut(index)"
       :is-active="currentTool === tool"
+      :is-locked="isCurrentToolLocked && currentTool === tool"
       @action-applied="applyAction"
     />
     <input
@@ -51,6 +52,18 @@ export default {
         'image',
         'eraser',
         'clear'
+      ],
+      toolsCanBeLocked: [
+        'selector',
+        'rectangle',
+        'ellipse',
+        'arrow',
+        'line'
+      ],
+      toolsCanBeUsedContinuously: [
+        'pen',
+        'text',
+        'eraser'
       ]
     }
   },
@@ -62,17 +75,41 @@ export default {
       set(newTool) {
         Properties.tool = newTool;
       }
+    },
+    isCurrentToolLocked: {
+      get() {
+        return Properties.isToolLocked;
+      },
+      set(isLocked) {
+        Properties.isToolLocked = isLocked;
+      }
+    },
+    latestTool: {
+      get() {
+        return Properties.latestTool;
+      },
+      set(newTool) {
+        Properties.latestTool = newTool;
+      }
+    },
+    isCanvasPenetrable: {
+      get() {
+        return Properties.isCanvasPenetrable;
+      },
+      set(isCanvasPenetrable) {
+        Properties.isCanvasPenetrable = isCanvasPenetrable;
+      }
     }
   },
   watch: {
-    currentTool(newTool) {
-      this.currentTool = newTool;
-    },
     hasShortCuts(hasShortCuts) {
       Canvas.hasShortCuts = hasShortCuts
     }
   },
   methods: {
+    toolShortCut(index) {
+      return Properties.isUsingText || Properties.isCanvasPenetrable ? null : (index + 1) % 10
+    },
     applyAction(action) {
       if (action === 'image') {
         this.$refs.fileSelector.click()
@@ -80,13 +117,27 @@ export default {
       if (action === 'clear') {
         Tools.clear.clear()
       }
+      if (this.currentTool !== action && 
+        (
+          (this.toolsCanBeLocked.includes(this.currentTool) && this.isCurrentToolLocked) ||
+          this.toolsCanBeUsedContinuously.includes(this.currentTool)
+        )
+      ) {
+        this.latestTool = {
+          'tool': this.currentTool,
+          'isToolLocked': this.isCurrentToolLocked
+        }
+      }
+      this.isCurrentToolLocked = this.toolsCanBeLocked.includes(action) && this.currentTool === action
       this.currentTool = action
+      this.isCanvasPenetrable = this.currentTool === 'selector' && this.isCurrentToolLocked
       this.releaseInstantTool()
     },
     releaseInstantTool() {
       if (this.currentTool === 'image' || this.currentTool === 'clear') {
         setTimeout(() => {
-          this.currentTool = 'selector'
+          Properties.tool = Properties.latestTool.tool
+          Properties.isToolLocked = Properties.latestTool.isToolLocked
         }, 300)
       }
     },
@@ -96,7 +147,7 @@ export default {
       event.target.value = ''
     },
     handleShortCutKey(event) {
-      if (this.hasShortCuts && this.currentTool !== 'text') {
+      if (this.hasShortCuts && this.currentTool !== 'text' && !this.isCanvasPenetrable) {
         const key = event.key
         const index = parseInt(key, 10)
         if (index >= 0 && index < this.tools.length) {

package/src/components/functions/canvas.js

@@ -10,6 +10,7 @@ export default {
   container: null,
   resizeHandler: null,
   keydownHandler: null,
+  keyupHandler: null,
   pointerDownHandler: null,
   pointerMoveHandler: null,
   pointerUpHandler: null,
@@ -29,6 +30,7 @@ export default {
     this.layer = new Konva.Layer();
     this.stage.add(this.layer);
     document.addEventListener('keydown', this.keydownHandler);
+    document.addEventListener('keyup', this.keyupHandler);
     Transformer.initialize();
     Histories.record();
     this.stage.on('pointerdown', this.pointerDownHandler);
@@ -39,6 +41,7 @@ export default {
   generateEventHandlers() {
     this.resizeHandler = this._handleResize.bind(this);
     this.keydownHandler = this._handleKeydown.bind(this);
+    this.keyupHandler = this._handleKeyup.bind(this);
     this.pointerDownHandler = this.handlePointerDown.bind(this);
     this.pointerMoveHandler = this.handlePointerMove.bind(this);
     this.pointerUpHandler = this.handlePointerUp.bind(this);
@@ -54,6 +57,7 @@ export default {
     this.stage.off('pointerup', this.pointerUpHandler);
     this.stage.off('click tap', this.clickHandler);
     document.removeEventListener('keydown', this.keydownHandler);
+    document.removeEventListener('keyup', this.keyupHandler);
     this.stage.clear()
     this.stage = null;
     window.removeEventListener('resize', this.resizeHandler);
@@ -66,7 +70,7 @@ export default {
     }
   },
   _handleKeydown(event) {
-    if (!this.hasShortCuts) {
+    if (!this.hasShortCuts || Properties.isCanvasPenetrable) {
       return
     }
     if (event.key === 'Escape') {
@@ -77,6 +81,20 @@ export default {
       if (!this.isEditingText) {
         this._handleKeyShortCuts(event);
       }
+    } else if (event.altKey) {
+      Properties.isCanvasPenetrable = true;
+    }
+  },
+  _handleKeyup(event) {
+    if (event.key === 'Alt') {
+      Properties.isCanvasPenetrable = false;
+      if (Properties.tool === 'selector') {
+        Properties.isToolLocked = false;
+        Properties.latestTool = {
+          'tool': 'selector',
+          'isToolLocked': false
+        }
+      }
     }
   },
   _handleKeyShortCuts(event) {

package/src/components/functions/properties.js

@@ -10,8 +10,14 @@ export default new Vue({
       fontSizeSelected: 20,
       strokeWidthSelected: 4,
       toolSelected: 'pen',
+      toolLatestSelected: {
+        'tool': 'pen',
+        'isToolLocked': false
+      },
       isTextNodesSelected: false,
-      isMassivelyAssigningProperties: false
+      isMassivelyAssigningProperties: false,
+      isToolLocked: false,
+      isCanvasPenetrable: false
     }
   },
   computed: {
@@ -75,6 +81,14 @@ export default new Vue({
         this.toolSelected = newTool;
       }
     },
+    latestTool: {
+      get() {
+        return this.toolLatestSelected;
+      },
+      set(newTool) {
+        this.toolLatestSelected = newTool;
+      }
+    },
     isUsingText() {
       return this.tool === 'text' || this.isTextNodesSelected;
     },
@@ -85,6 +99,9 @@ export default new Vue({
   watch: {
     toolSelected() {
       this.refreshNodesStatus()
+      if (this.tool === 'selector' && this.isToolLocked) {
+        this.isCanvasPenetrable = true;
+      }
     }
   },
   methods: {

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

@@ -30,7 +30,10 @@ export default {
     }
   },
   finish() {
-    Properties.tool = 'selector'
+    if (!Properties.isToolLocked) {
+      Properties.tool = Properties.latestTool.tool
+      Properties.isToolLocked = Properties.latestTool.isToolLocked
+    }
     this.temporalShape = null
   },
   bindEvents(newArrow) {

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

@@ -35,7 +35,10 @@ export default {
     }
   },
   finish() {
-    Properties.tool = 'selector'
+    if (!Properties.isToolLocked) {
+      Properties.tool = Properties.latestTool.tool
+      Properties.isToolLocked = Properties.latestTool.isToolLocked
+    }
     this.temporalShape = null
   },
   _checkEllipseAndChangeToVertex(newEllipse) {

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

@@ -26,7 +26,10 @@ export default {
     }
   },
   finish() {
-    Properties.tool = 'selector'
+    if (!Properties.isToolLocked) {
+      Properties.tool = Properties.latestTool.tool
+      Properties.isToolLocked = Properties.latestTool.isToolLocked
+    }
     this.temporalShape = null
   },
   generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth }) {

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

@@ -33,7 +33,10 @@ export default {
     }
   },
   finish() {
-    Properties.tool = 'selector'
+    if (!Properties.isToolLocked) {
+      Properties.tool = Properties.latestTool.tool
+      Properties.isToolLocked = Properties.latestTool.isToolLocked
+    }
     this.temporalShape = null
   },
   _checkRectangleAndChangeToCell(newRectangle) {