build: update buiild

lib/SvgDrawing.d.ts

@@ -18,12 +18,14 @@ export declare class SvgDrawing extends Two {
     toSvgXml(): string | null;
     toSvgBase64(): string | null;
     clearListner(): void;
+    private init;
     private drawingStart;
-    private move;
+    private drawingMove;
+    private drawingEnd;
+    private mouseDown;
     private mouseMove;
     private mouseUp;
-    private mouseDown;
+    private touchStart;
     private touchMove;
     private touchEnd;
-    private touchStart;
 }

lib/SvgDrawing.js

@@ -13,21 +13,24 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import Two from 'two.js';
 import { svgFormatting } from './utils/svgFormatting';
+import { getPassiveOptions } from './utils/getPassiveOptions';
 var SvgDrawing = (function (_super) {
     __extends(SvgDrawing, _super);
     function SvgDrawing(params) {
         var _this = _super.call(this, params) || this;
-        _this.drawingStart = _this.drawingStart.bind(_this);
         _this.clearListner = _this.clearListner.bind(_this);
         _this.toSvgXml = _this.toSvgXml.bind(_this);
         _this.toSvgBase64 = _this.toSvgBase64.bind(_this);
-        _this.move = _this.move.bind(_this);
+        _this.drawingStart = _this.drawingStart.bind(_this);
+        _this.drawingMove = _this.drawingMove.bind(_this);
+        _this.drawingEnd = _this.drawingEnd.bind(_this);
         _this.mouseUp = _this.mouseUp.bind(_this);
         _this.mouseMove = _this.mouseMove.bind(_this);
         _this.mouseDown = _this.mouseDown.bind(_this);
         _this.touchStart = _this.touchStart.bind(_this);
         _this.touchMove = _this.touchMove.bind(_this);
         _this.touchEnd = _this.touchEnd.bind(_this);
+        _this.init.bind(_this);
         _this.line = null;
         _this.current = new Two.Vector(0, 0);
         _this.penColor = params.penColor || '#333';
@@ -38,7 +41,7 @@ var SvgDrawing = (function (_super) {
         _this.el = params.el;
         _this.width = params.width || _this.el.clientWidth;
         _this.height = params.height || _this.el.clientHeight;
-        _this.drawingStart();
+        _this.init();
         return _this;
     }
     SvgDrawing.prototype.toSvgXml = function () {
@@ -58,27 +61,36 @@ var SvgDrawing = (function (_super) {
         this.el.removeEventListener('mousedown', this.mouseDown);
         this.el.removeEventListener('touchstart', this.touchStart);
     };
-    SvgDrawing.prototype.drawingStart = function () {
+    SvgDrawing.prototype.init = function () {
         this.appendTo(this.el);
-        this.el.addEventListener('mousedown', this.mouseDown);
-        this.el.addEventListener('touchstart', this.touchStart);
+        this.el.addEventListener('mousedown', this.mouseDown, getPassiveOptions(false));
+        this.el.addEventListener('touchstart', this.touchStart, getPassiveOptions(false));
         return this;
     };
-    SvgDrawing.prototype.move = function (_a) {
+    SvgDrawing.prototype.drawingStart = function (_a) {
+        var x = _a.x, y = _a.y;
+        this.current.set(x, y);
+    };
+    SvgDrawing.prototype.drawingMove = function (_a) {
         var _this = this;
         var x = _a.x, y = _a.y;
         var rect = this.el.getBoundingClientRect();
         var makePoint = function (mx, my) {
             return new Two.Vector(mx - rect.left, my - rect.top);
         };
-        this.current.set(x, y);
         if (this.line) {
+            if (this.line.linewidth !== this.penWidth ||
+                this.line.stroke !== this.penColor) {
+                this.drawingEnd();
+                return;
+            }
             var v = makePoint(x, y);
             this.line.vertices.push(v);
             return;
         }
         var vprev = makePoint(this.current.x, this.current.y);
         var vnext = makePoint(x, y);
+        this.current.set(x, y);
         this.line = this.makeCurve([vprev, vnext], true);
         this.line.noFill().stroke = this.penColor;
         this.line.linewidth = this.penWidth;
@@ -91,42 +103,45 @@ var SvgDrawing = (function (_super) {
         });
         this.line.translation.clear();
     };
+    SvgDrawing.prototype.drawingEnd = function () {
+        this.line = null;
+    };
+    SvgDrawing.prototype.mouseDown = function (e) {
+        e.preventDefault();
+        this.drawingStart({ x: e.clientX, y: e.clientY });
+        this.el.addEventListener('mousemove', this.mouseMove, getPassiveOptions(false));
+        this.el.addEventListener('mouseup', this.mouseUp, getPassiveOptions(false));
+    };
     SvgDrawing.prototype.mouseMove = function (e) {
-        this.move({ x: e.clientX, y: e.clientY });
+        e.preventDefault();
+        this.drawingMove({ x: e.clientX, y: e.clientY });
     };
     SvgDrawing.prototype.mouseUp = function (e) {
+        e.preventDefault();
         this.el.removeEventListener('mousemove', this.mouseMove);
         this.el.removeEventListener('mouseup', this.mouseUp);
+        this.drawingEnd();
     };
-    SvgDrawing.prototype.mouseDown = function (e) {
-        this.current.set(e.clientX, e.clientY);
-        this.line = null;
-        this.el.addEventListener('mousemove', this.mouseMove);
-        this.el.addEventListener('mouseup', this.mouseUp);
+    SvgDrawing.prototype.touchStart = function (e) {
+        e.preventDefault();
+        var touch = e.touches[0];
+        this.drawingStart({ x: touch.pageX, y: touch.pageY });
+        this.el.addEventListener('touchmove', this.touchMove, getPassiveOptions(false));
+        this.el.addEventListener('touchend', this.touchEnd, getPassiveOptions(false));
     };
     SvgDrawing.prototype.touchMove = function (e) {
         e.preventDefault();
         var touch = e.touches[0];
-        this.move({
+        this.drawingMove({
             x: touch.pageX,
             y: touch.pageY
         });
-        return false;
     };
     SvgDrawing.prototype.touchEnd = function (e) {
         e.preventDefault();
         this.el.removeEventListener('touchmove', this.touchMove);
         this.el.removeEventListener('touchend', this.touchEnd);
-        return false;
-    };
-    SvgDrawing.prototype.touchStart = function (e) {
-        e.preventDefault();
-        var touch = e.touches[0];
-        this.current.set(touch.pageX, touch.pageY);
-        this.line = null;
-        this.el.addEventListener('touchmove', this.touchMove);
-        this.el.addEventListener('touchend', this.touchEnd);
-        return false;
+        this.drawingEnd();
     };
     return SvgDrawing;
 }(Two));