jellies-draw 0.1.9 → 0.1.11

package/package.json

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

package/src/components/DrawingCanvas.vue

@@ -78,8 +78,6 @@ export default {
 .container {
   width: 100%;
   height: 100%;
-  position: relative;
-  z-index: 9999; /* 确保画板在最上层 */
 }
 .container-penetrable {
   pointer-events: none;
@@ -87,4 +85,8 @@ export default {
 .cursor-crosshair {
   cursor: crosshair;
 }
+.whiteboard {
+  position: relative;
+  z-index: 9999; /* 确保画板在最上层 */
+}
 </style>

package/src/components/PropertyPickers.vue

@@ -59,23 +59,13 @@
 import Properties from './functions/properties';
 export default {
   name: 'PropertiesPicker',
-  data() {
-    return {
-      fontSizeOptions: {
-        15: 'S',
-        20: 'M',
-        35: 'L',
-        50: 'XL'
-      },
-      strokeWidthOptions: {
-        3: 'H',
-        4: 'HB',
-        5: 'B',
-        6: '2B'
-      }
-    }
-  },
   computed: {
+    fontSizeOptions() {
+      return Properties.fontSizeOptions
+    },
+    strokeWidthOptions() {
+      return Properties.strokeWidthOptions
+    },
     fillColor: {
       get() {
         return Properties.fillColor

package/src/components/functions/canvas.js

@@ -63,7 +63,7 @@ export default {
     window.removeEventListener('resize', this.resizeHandler);
   },
   _handleResize() {
-    if (this.stage) {
+    if (this.stage && this.container.offsetWidth > 0 && this.container.offsetHeight > 0) {
       this.stage.width(this.container.offsetWidth);
       this.stage.height(this.container.offsetHeight);
       this.stage.batchDraw();
@@ -79,7 +79,11 @@ export default {
       Transformer.removeSelectedNodes();
     } else if (event.ctrlKey || event.metaKey) {
       if (!this.isEditingText) {
-        this._handleKeyShortCuts(event);
+        this._handleNodesShortCuts(event);
+      }
+    } else if (event.shiftKey) {
+      if (!this.isEditingText) {
+        this._handlePropertiesShortCuts(event);
       }
     } else if (event.altKey) {
       Properties.isCanvasPenetrable = true;
@@ -93,11 +97,32 @@ export default {
         Properties.latestTool = {
           'tool': 'selector',
           'isToolLocked': false
-        }
+        };
       }
     }
   },
-  _handleKeyShortCuts(event) {
+  _handlePropertiesShortCuts(event) {
+    event.preventDefault();
+    const colorsKeyMap = {
+      'Digit1': '#f33b29',
+      'Digit2': '#4ec53d',
+      'Digit3': '#ffb020',
+      'Digit4': '#399af4',
+      'Digit5': '#ffcaff',
+      'Digit6': '#ffde00',
+      'Digit7': '#ce82ff',
+      'Digit8': '#eeeeee',
+      'Digit9': '#333333'
+    };
+    if (event.code in colorsKeyMap) {
+      Properties.strokeColor = colorsKeyMap[event.code];
+    } else if (event.code === 'Equal') {
+      Properties.scalePropertyUp();
+    } else if (event.code === 'Minus') {
+      Properties.scalePropertyDown();
+    }
+  },
+  _handleNodesShortCuts(event) {
     event.preventDefault();
     if (event.key === 'c') {
       Clipboard.copy();
@@ -109,9 +134,9 @@ export default {
       Transformer.selectAllNodes();
     } else if (event.key === 'z' || event.key === 'Z') {
       if (event.shiftKey) {
-        Histories.redo()
+        Histories.redo();
       } else {
-        Histories.undo()
+        Histories.undo();
       }
     }
   },
@@ -121,20 +146,20 @@ export default {
         return;
       }
     }
-    Tools[Properties.tool].show(event.evt)
+    Tools[Properties.tool].show(event.evt);
   },
   handlePointerMove(event) {
     if (Properties.tool !== 'clear') {
-      Tools[Properties.tool].change(event.evt)
+      Tools[Properties.tool].change(event.evt);
     }
   },
   handlePointerUp(event) {
-    Tools[Properties.tool].finish()
+    Tools[Properties.tool].finish();
     if (this.isDrawing || this.isEditingText) {
-      Histories.record()
+      Histories.record();
     }
-    this.isDrawing = false
-    this.isEditingText = false
+    this.isDrawing = false;
+    this.isEditingText = false;
   },
   handleClick(event) {
     const metaPressed = event.evt.shiftKey || event.evt.ctrlKey || event.evt.metaKey;

package/src/components/functions/properties.js

@@ -6,9 +6,9 @@ export default new Vue({
   data() {
     return {
       fillColorPicked: 'transparent',
-      strokeColorPicked: '#000000',
+      strokeColorPicked: '#f33b29',
       fontSizeSelected: 20,
-      strokeWidthSelected: 4,
+      strokeWidthSelected: 3,
       toolSelected: 'pen',
       toolLatestSelected: {
         'tool': 'pen',
@@ -17,7 +17,19 @@ export default new Vue({
       isTextNodesSelected: false,
       isMassivelyAssigningProperties: false,
       isToolLocked: false,
-      isCanvasPenetrable: false
+      isCanvasPenetrable: false,
+      fontSizeOptions: {
+        15: 'S',
+        20: 'M',
+        35: 'L',
+        50: 'XL'
+      },
+      strokeWidthOptions: {
+        3: 'H',
+        4: 'HB',
+        5: 'B',
+        6: '2B'
+      }
     }
   },
   computed: {
@@ -120,6 +132,29 @@ export default new Vue({
     handleClearMoveCursor(){
       Canvas.stage.container().style.cursor = null;
     },
+    scaleProperty(direction) {
+      if (this.isUsingText) {
+        this.fontSize = this.setPropertyToScale(this.fontSize, this.fontSizeOptions, direction);
+      } else {
+        this.strokeWidth = this.setPropertyToScale(this.strokeWidth, this.strokeWidthOptions, direction);
+      }
+    },
+    setPropertyToScale(currentValue, options, direction) {
+      const optionsKeys = Object.keys(options);
+      const currentIndex = optionsKeys.indexOf(currentValue.toString());
+      if (direction === 'down' && currentIndex > 0) {
+        return parseInt(optionsKeys[currentIndex - 1]);
+      } else if (direction === 'up' && currentIndex < optionsKeys.length - 1) {
+        return parseInt(optionsKeys[currentIndex + 1]);
+      }
+      return currentValue;
+    },
+    scalePropertyUp() {
+      this.scaleProperty('up');
+    },
+    scalePropertyDown() {
+      this.scaleProperty('down');
+    },
     setProperties(properties) {
       this.isMassivelyAssigningProperties = true;
       Object.keys(properties).forEach(property => {