canvas-comment - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

es/index.js

@@ -0,1 +1,2 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -43,2 +44,4 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
     _this.labelMaxLen = 40;
+    _this.labelMinWidth = 120;
+    _this.labelLineHeight = 20;
     _this.labelFont = '14px serif';
@@ -50,2 +53,4 @@ _this.labelFillStyle = 'red';
     _this.createRectStrokeStyle = void 0;
+    _this.currentShape = void 0;
+    _this.minDrawSize = 5;
     var el = options.container,
@@ -115,10 +120,8 @@ imgSrc = options.image;
                   }
-                });
-                this.canvas.addEventListener('mousewheel', function (e) {
-                  e.preventDefault();
+                }); // this.canvas.addEventListener('mousewheel', (e: WheelEvent) => {
+                //   e.preventDefault();
+                //   this.setScale(e.deltaY < 0);
+                //   this.update();
+                // });
 
-                  _this2.setScale(e.deltaY < 0);
-
-                  _this2.update();
-                });
                 this.canvas.addEventListener('mousedown', function (e) {
@@ -136,8 +139,9 @@ if (_this2.readonly) return;
                       var ny = Math.round(offsetY - _this2.originPoint[1] / _this2.scale);
-                      var curPoint = [nx, ny];
+                      var curPoint = [nx, ny]; // fix: 录入完成，鼠标移出，mousedown先于onBlur执行
 
-                      _this2.dataset.forEach(function (sp) {
-                        sp.active = false;
+                      setTimeout(function () {
+                        _this2.dataset.forEach(function (sp) {
+                          sp.active = false;
+                        });
                       });
-
                       var newShape = {
@@ -158,5 +162,3 @@ type: 'rect',
 
-                      _this2.dataset.push(newShape);
-
-                      _this2.update();
+                      _this2.currentShape = newShape;
                     }
@@ -175,4 +177,8 @@ }
                     _this2.update();
-                  } else if (e.buttons === 1 && _this2.activeShape) {
-                    if (_this2.activeShape.type === 'rect' && _this2.isInBackground(e)) {
+                  } else if (e.buttons === 1 && _this2.currentShape) {
+                    var _this2$currentShape;
+
+                    if (((_this2$currentShape = _this2.currentShape) === null || _this2$currentShape === void 0 ? void 0 : _this2$currentShape.type) === 'rect' && _this2.isInBackground(e)) {
+                      var _this2$currentShape2;
+
                       // -- 画矩形 --
@@ -183,7 +189,6 @@ var offsetX = Math.round(e.offsetX / _this2.scale);
                       var y = Math.round(offsetY - _this2.originPoint[1] / _this2.scale);
+                      (_this2$currentShape2 = _this2.currentShape) === null || _this2$currentShape2 === void 0 ? void 0 : _this2$currentShape2.coor.splice(1, 1, [x, y]);
 
-                      _this2.activeShape.coor.splice(1, 1, [x, y]);
+                      _this2.emit('updated', _this2.currentShape);
 
-                      _this2.emit('updated', _this2.activeShape);
-
                       _this2.update();
@@ -196,4 +201,6 @@ }
 
-                  if (_this2.activeShape && _this2.activeShape.creating) {
-                    var coor = _this2.activeShape.coor;
+                  if (_this2.currentShape && _this2.currentShape.creating) {
+                    var moveX = Math.abs(Math.round(e.offsetX / _this2.scale) - _this2.movePoint[0]);
+                    var moveY = Math.abs(Math.round(e.offsetY / _this2.scale) - _this2.movePoint[1]);
+                    var coor = _this2.currentShape.coor;
 
@@ -209,8 +216,15 @@ var _coor = _slicedToArray(coor, 2),
                     if (Math.abs(x0 - x1) < _this2.rectMinWidth || Math.abs(y0 - y1) < _this2.rectMinHeight) {
-                      _this2.dataset.pop();
-
                       _this2.emit('error', "\u5BBD\u4E0D\u80FD\u5C0F\u4E8E".concat(_this2.rectMinWidth, ",\u9AD8\u4E0D\u80FD\u5C0F\u4E8E").concat(_this2.rectMinHeight));
+                    } else if ([moveX, moveY].every(function (dis) {
+                      return dis < _this2.minDrawSize;
+                    })) {
+                      // 发生点击
+                      _this2.emit('error', '发生点击');
                     } else {
-                      _this2.activeShape.coor = [[Math.min(x0, x1), Math.min(y0, y1)], [Math.max(x0, x1), Math.max(y0, y1)]];
+                      _this2.currentShape.coor = [[Math.min(x0, x1), Math.min(y0, y1)], [Math.max(x0, x1), Math.max(y0, y1)]];
 
+                      _this2.dataset.push(_this2.currentShape);
+
+                      _this2.currentShape = undefined;
+
                       _this2.emit('add', e);
@@ -221,3 +235,3 @@ }
 
-              case 8:
+              case 7:
               case "end":
@@ -245,3 +259,10 @@ return _context.stop();
       this.paintImage();
-      this.dataset.forEach(function (item) {
+
+      var datasets = _toConsumableArray(this.dataset);
+
+      if (this.currentShape) {
+        datasets.push(this.currentShape);
+      }
+
+      datasets.forEach(function (item) {
         switch (item.type) {
@@ -392,7 +413,12 @@ case 'rect':
           _shape$label = shape.label,
-          label = _shape$label === void 0 ? '' : _shape$label;
+          label = _shape$label === void 0 ? '' : _shape$label,
+          _shape$coor = _slicedToArray(shape.coor, 2),
+          _shape$coor$ = _slicedToArray(_shape$coor[0], 1),
+          x0 = _shape$coor$[0],
+          _shape$coor$2 = _slicedToArray(_shape$coor[1], 1),
+          x1 = _shape$coor$2[0];
 
       if (label.length > 0) {
-        var newStr = label.length < this.labelMaxLen + 1 ? label : "".concat(label.substr(0, this.labelMaxLen), "...");
-        var text = this.ctx.measureText(newStr);
+        var newStr = label;
+        var textWidth = Math.max(Math.abs(x0 - x1) * this.scale, this.labelMinWidth);
 
@@ -406,3 +432,3 @@ var _point$map = point.map(function (a) {
 
-        var toleft = this.image.width - point[0] < (text.width + 4) / this.scale;
+        var toleft = this.image.width - point[0] < (textWidth + 4) / this.scale;
         var toTop = this.image.height - point[1] < 16 / this.scale;
@@ -412,3 +438,33 @@ this.ctx.save();
         this.ctx.font = this.labelFont;
-        this.ctx.fillText(newStr, toleft ? x - text.width - 2 : x + 2, toTop ? y - 4 : y + 14);
+        var posY = toTop ? y - 4 : y + 14;
+        var posX = toleft ? x - Math.min(Math.abs(x0 - x1) * this.scale, this.labelMinWidth) - 2 : x + 2; // 绘制多行文本
+
+        var drawTexts = []; // 1.先通过换行符分割
+
+        newStr.split('\n').forEach(function (lineText) {
+          // 每次开始截取的字符串的索引
+          var lastSubStrIndex = 0;
+
+          if (textWidth >= _this5.ctx.measureText(lineText).width) {
+            // 单行文本
+            drawTexts.push(lineText);
+          } else {
+            // 文字超出
+            for (var i = 0; i < lineText.length; i++) {
+              var str = lineText.substring(lastSubStrIndex, i);
+
+              if (_this5.ctx.measureText(str).width >= textWidth) {
+                drawTexts.push(str);
+                lastSubStrIndex = i;
+              }
+
+              if (i === lineText.length - 1) {
+                drawTexts.push(str);
+              }
+            }
+          }
+        });
+        drawTexts.forEach(function (text, i) {
+          _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
+        });
         this.ctx.restore();
@@ -458,3 +514,20 @@ }
     }
+  }, {
+    key: "undo",
+    value: function undo() {
+      this.dataset.pop();
+      this.update();
+    }
     /**
+     * 获取绘制的图片
+     */
+
+  }, {
+    key: "getDrawImage",
+    value: function getDrawImage() {
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image/jpeg';
+      var imgData = this.canvas.toDataURL(type);
+      return imgData;
+    }
+    /**
      * 删除指定矩形
@@ -461,0 +534,0 @@ * @param index number

examples/index.js

@@ -34,2 +34,16 @@ import CanvasComment from 'canvas-comment';
 
+const canvasInput = document.getElementById('canvas-comment-input');
+
+canvasInput.onblur = () => {
+  if (!canvas.activeShape) return;
+
+  // 设置canvas文字
+  canvas.activeShape.label = canvasInput.value.trim();
+  canvas.activeShape.creating = false;
+  canvas.update();
+  // 重置input状态
+  canvasInput.style.display = 'none';
+  canvasInput.value = '';
+};
+
 canvas.on('add', (e) => {
@@ -43,20 +57,9 @@ const { coor } = canvas.activeShape;
 
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.style.position = 'fixed';
-  input.style.left = `${point[0]}px`;
-  input.style.top = `${point[1]}px`;
-
-  input.onkeydown = (e) => {
-    if (e.code === 'Enter') {
-      canvas.activeShape.label = input.value || '';
-      canvas.activeShape.creating = false;
-      canvas.update();
-      document.body.removeChild(input);
-      updateList();
-    }
-  }
-
-  document.body.appendChild(input);
-  input.focus();
+  // 录入框宽度
+  const inputWidth = Math.max(Math.abs(x1 - x0) * canvas.scale, 120);
+  canvasInput.style.width = `${inputWidth}px`;
+  canvasInput.style.left = `${point[0]}px`;
+  canvasInput.style.top = `${point[1]}px`;
+  canvasInput.style.display = 'block';
+  canvasInput.focus();
 });
@@ -102,2 +105,2 @@
   console.log(canvas.dataset);
-};
+};

lib/index.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -59,2 +61,4 @@
     _this.labelMaxLen = 40;
+    _this.labelMinWidth = 120;
+    _this.labelLineHeight = 20;
     _this.labelFont = '14px serif';
@@ -66,2 +70,4 @@ _this.labelFillStyle = 'red';
     _this.createRectStrokeStyle = void 0;
+    _this.currentShape = void 0;
+    _this.minDrawSize = 5;
     var el = options.container,
@@ -131,10 +137,8 @@ imgSrc = options.image;
                   }
-                });
-                this.canvas.addEventListener('mousewheel', function (e) {
-                  e.preventDefault();
+                }); // this.canvas.addEventListener('mousewheel', (e: WheelEvent) => {
+                //   e.preventDefault();
+                //   this.setScale(e.deltaY < 0);
+                //   this.update();
+                // });
 
-                  _this2.setScale(e.deltaY < 0);
-
-                  _this2.update();
-                });
                 this.canvas.addEventListener('mousedown', function (e) {
@@ -152,8 +156,9 @@ if (_this2.readonly) return;
                       var ny = Math.round(offsetY - _this2.originPoint[1] / _this2.scale);
-                      var curPoint = [nx, ny];
+                      var curPoint = [nx, ny]; // fix: 录入完成，鼠标移出，mousedown先于onBlur执行
 
-                      _this2.dataset.forEach(function (sp) {
-                        sp.active = false;
+                      setTimeout(function () {
+                        _this2.dataset.forEach(function (sp) {
+                          sp.active = false;
+                        });
                       });
-
                       var newShape = {
@@ -174,5 +179,3 @@ type: 'rect',
 
-                      _this2.dataset.push(newShape);
-
-                      _this2.update();
+                      _this2.currentShape = newShape;
                     }
@@ -191,4 +194,8 @@ }
                     _this2.update();
-                  } else if (e.buttons === 1 && _this2.activeShape) {
-                    if (_this2.activeShape.type === 'rect' && _this2.isInBackground(e)) {
+                  } else if (e.buttons === 1 && _this2.currentShape) {
+                    var _this2$currentShape;
+
+                    if (((_this2$currentShape = _this2.currentShape) === null || _this2$currentShape === void 0 ? void 0 : _this2$currentShape.type) === 'rect' && _this2.isInBackground(e)) {
+                      var _this2$currentShape2;
+
                       // -- 画矩形 --
@@ -199,7 +206,6 @@ var offsetX = Math.round(e.offsetX / _this2.scale);
                       var y = Math.round(offsetY - _this2.originPoint[1] / _this2.scale);
+                      (_this2$currentShape2 = _this2.currentShape) === null || _this2$currentShape2 === void 0 ? void 0 : _this2$currentShape2.coor.splice(1, 1, [x, y]);
 
-                      _this2.activeShape.coor.splice(1, 1, [x, y]);
+                      _this2.emit('updated', _this2.currentShape);
 
-                      _this2.emit('updated', _this2.activeShape);
-
                       _this2.update();
@@ -212,4 +218,6 @@ }
 
-                  if (_this2.activeShape && _this2.activeShape.creating) {
-                    var coor = _this2.activeShape.coor;
+                  if (_this2.currentShape && _this2.currentShape.creating) {
+                    var moveX = Math.abs(Math.round(e.offsetX / _this2.scale) - _this2.movePoint[0]);
+                    var moveY = Math.abs(Math.round(e.offsetY / _this2.scale) - _this2.movePoint[1]);
+                    var coor = _this2.currentShape.coor;
 
@@ -225,8 +233,15 @@ var _coor = (0, _slicedToArray2["default"])(coor, 2),
                     if (Math.abs(x0 - x1) < _this2.rectMinWidth || Math.abs(y0 - y1) < _this2.rectMinHeight) {
-                      _this2.dataset.pop();
-
                       _this2.emit('error', "\u5BBD\u4E0D\u80FD\u5C0F\u4E8E".concat(_this2.rectMinWidth, ",\u9AD8\u4E0D\u80FD\u5C0F\u4E8E").concat(_this2.rectMinHeight));
+                    } else if ([moveX, moveY].every(function (dis) {
+                      return dis < _this2.minDrawSize;
+                    })) {
+                      // 发生点击
+                      _this2.emit('error', '发生点击');
                     } else {
-                      _this2.activeShape.coor = [[Math.min(x0, x1), Math.min(y0, y1)], [Math.max(x0, x1), Math.max(y0, y1)]];
+                      _this2.currentShape.coor = [[Math.min(x0, x1), Math.min(y0, y1)], [Math.max(x0, x1), Math.max(y0, y1)]];
 
+                      _this2.dataset.push(_this2.currentShape);
+
+                      _this2.currentShape = undefined;
+
                       _this2.emit('add', e);
@@ -237,3 +252,3 @@ }
 
-              case 8:
+              case 7:
               case "end":
@@ -261,3 +276,9 @@ return _context.stop();
       this.paintImage();
-      this.dataset.forEach(function (item) {
+      var datasets = (0, _toConsumableArray2["default"])(this.dataset);
+
+      if (this.currentShape) {
+        datasets.push(this.currentShape);
+      }
+
+      datasets.forEach(function (item) {
         switch (item.type) {
@@ -408,7 +429,12 @@ case 'rect':
           _shape$label = shape.label,
-          label = _shape$label === void 0 ? '' : _shape$label;
+          label = _shape$label === void 0 ? '' : _shape$label,
+          _shape$coor = (0, _slicedToArray2["default"])(shape.coor, 2),
+          _shape$coor$ = (0, _slicedToArray2["default"])(_shape$coor[0], 1),
+          x0 = _shape$coor$[0],
+          _shape$coor$2 = (0, _slicedToArray2["default"])(_shape$coor[1], 1),
+          x1 = _shape$coor$2[0];
 
       if (label.length > 0) {
-        var newStr = label.length < this.labelMaxLen + 1 ? label : "".concat(label.substr(0, this.labelMaxLen), "...");
-        var text = this.ctx.measureText(newStr);
+        var newStr = label;
+        var textWidth = Math.max(Math.abs(x0 - x1) * this.scale, this.labelMinWidth);
 
@@ -422,3 +448,3 @@ var _point$map = point.map(function (a) {
 
-        var toleft = this.image.width - point[0] < (text.width + 4) / this.scale;
+        var toleft = this.image.width - point[0] < (textWidth + 4) / this.scale;
         var toTop = this.image.height - point[1] < 16 / this.scale;
@@ -428,3 +454,33 @@ this.ctx.save();
         this.ctx.font = this.labelFont;
-        this.ctx.fillText(newStr, toleft ? x - text.width - 2 : x + 2, toTop ? y - 4 : y + 14);
+        var posY = toTop ? y - 4 : y + 14;
+        var posX = toleft ? x - Math.min(Math.abs(x0 - x1) * this.scale, this.labelMinWidth) - 2 : x + 2; // 绘制多行文本
+
+        var drawTexts = []; // 1.先通过换行符分割
+
+        newStr.split('\n').forEach(function (lineText) {
+          // 每次开始截取的字符串的索引
+          var lastSubStrIndex = 0;
+
+          if (textWidth >= _this5.ctx.measureText(lineText).width) {
+            // 单行文本
+            drawTexts.push(lineText);
+          } else {
+            // 文字超出
+            for (var i = 0; i < lineText.length; i++) {
+              var str = lineText.substring(lastSubStrIndex, i);
+
+              if (_this5.ctx.measureText(str).width >= textWidth) {
+                drawTexts.push(str);
+                lastSubStrIndex = i;
+              }
+
+              if (i === lineText.length - 1) {
+                drawTexts.push(str);
+              }
+            }
+          }
+        });
+        drawTexts.forEach(function (text, i) {
+          _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
+        });
         this.ctx.restore();
@@ -474,3 +530,20 @@ }
     }
+  }, {
+    key: "undo",
+    value: function undo() {
+      this.dataset.pop();
+      this.update();
+    }
     /**
+     * 获取绘制的图片
+     */
+
+  }, {
+    key: "getDrawImage",
+    value: function getDrawImage() {
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image/jpeg';
+      var imgData = this.canvas.toDataURL(type);
+      return imgData;
+    }
+    /**
      * 删除指定矩形
@@ -477,0 +550,0 @@ * @param index number

package.json

 {
   "name": "canvas-comment",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

types/index.d.ts

@@ -36,2 +36,4 @@ import EventBus from './event-bus';
     labelMaxLen: number;
+    labelMinWidth: number;
+    labelLineHeight: number;
     labelFont: string;
@@ -43,2 +45,4 @@ labelFillStyle: string;
     createRectStrokeStyle: string;
+    currentShape: Shape | undefined;
+    minDrawSize: number;
     constructor(options: CanvasCommentOptions);
@@ -82,3 +86,8 @@ get scale(): number;
     clean(): void;
+    undo(): void;
     /**
+     * 获取绘制的图片
+     */
+    getDrawImage(type?: string): string;
+    /**
      * 删除指定矩形
@@ -85,0 +94,0 @@ * @param index number

No alert changes

Improved metrics

Total package byte prevSize

52752

increased by14.06%

Lines of code

1264

increased by12.66%

No dependency changes