From cc3df53059e92bac0ed491546e9c30f6adf0a4c6 Mon Sep 17 00:00:00 2001
From: Kaio Valdemar <kaio@e-htl.com.br>
Date: Thu, 17 Oct 2019 11:23:01 -0300
Subject: [PATCH] SetPattern

---
 README.md               |  1 +
 dist/patternlock.js     | 78 +++++++++++++++++++++++++--------------
 dist/patternlock.min.js |  2 +-
 docs/patternlock.js     | 78 +++++++++++++++++++++++++--------------
 patternlock.js          | 81 ++++++++++++++++++++++++++---------------
 5 files changed, 154 insertions(+), 86 deletions(-)

diff --git a/README.md b/README.md
index d6de609..cb71c09 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,7 @@ The returned object from `new PatternLock(...)` has the following utility functi
 * **`success()`** Validates the pattern as correct
 * **`error()`** Validates the pattern as incorrect
 * **`getPattern()`** Returnes the currently active pattern or `NaN`
+* **`setPattern(array)`** Set a pattern based on a array
 
 The pattern lock constructor accepts a second argument - an object literal with the following properties:
 
diff --git a/dist/patternlock.js b/dist/patternlock.js
index a42e238..58d75ba 100644
--- a/dist/patternlock.js
+++ b/dist/patternlock.js
@@ -21,12 +21,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         global.PatternLock = factory(global.jQuery, global);
     }
 })(function ($, window) {
-    var _scrollKeys;
-
-    var svgns = 'http://www.w3.org/2000/svg';
-    var moveEvent = 'touchmove mousemove';
-
-    var scrollKeys = (_scrollKeys = {
+    var _scrollKeys,
+    svgns = 'http://www.w3.org/2000/svg',
+    moveEvent = 'touchmove mousemove',
+    scrollKeys = (_scrollKeys = {
         37: true, // left
         38: true, // up
         39: true, // right
@@ -41,16 +39,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     }
 
     function PatternLock(element, options) {
-        var svg = $(element);
-        var self = this;
-        var root = svg[0];
-        var dots = svg.find('.lock-dots circle');
-        var lines = svg.find('.lock-lines');
-        var actives = svg.find('.lock-actives');
-        var pt = root.createSVGPoint();
-        var code = [];
-        var currentline = void 0;
-        var currenthandler = void 0;
+        var svg = $(element),
+         self = this,
+         root = svg[0],
+         dots = svg.find('.lock-dots circle'),
+         lines = svg.find('.lock-lines'),
+         actives = svg.find('.lock-actives'),
+         pt = root.createSVGPoint(),
+         code = [],
+         dotsMap = [],
+         currentline = void 0,
+         currenthandler = void 0,
+         i = 0;
+
+        for(i=0; i<dots.length; i++){
+            dotsMap[i+1] = {x: dots[i].cx.baseVal.value, y: dots[i].cy.baseVal.value};
+        }
 
         options = Object.assign(PatternLock.defaults, options || {});
 
@@ -70,7 +74,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             clear: clear,
             success: success,
             error: error,
-            getPattern: getPattern
+            getPattern: getPattern,
+            setPattern: setPattern
         });
 
         function success() {
@@ -88,6 +93,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
                 return dots.index(i) + 1;
             }).join(''));
         }
+        function setPattern(arr){
+            clear();
+            if (arr === undefined) return;
+            var marker,line, dotActual, dotBefore = null;
+            for(i = 0; i < arr.length ; i++ ){
+                if(dotsMap[arr[i]] !== undefined){
+                    dotActual = dotsMap[arr[i]];
+                    marker = createNewMarker(dotActual.x,dotActual.y);
+                    actives.append(marker);
+                    if(dotBefore != null){
+                        line = createNewLine(dotBefore.x, dotBefore.y, dotActual.x, dotActual.y);
+                        lines.append(line);
+                    }
+                    if (options.vibrate) vibrate();
+                    dotBefore = dotActual;
+                }
+            }
+        }
 
         function end() {
             enableScroll();
@@ -142,7 +165,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         }
 
         function isUsed(target) {
-            for (var i = 0; i < code.length; i++) {
+            for (i = 0; i < code.length; i++) {
                 if (code[i] === target) {
                     return true;
                 }
@@ -151,7 +174,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         }
 
         function isAvailable(target) {
-            for (var i = 0; i < dots.length; i++) {
+            for (i = 0; i < dots.length; i++) {
                 if (dots[i] === target) {
                     return true;
                 }
@@ -178,8 +201,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
                 target = document.elementFromPoint(x, y);
             }
-            var cx = target.getAttribute('cx');
-            var cy = target.getAttribute('cy');
+            var cx = target.getAttribute('cx'),
+             cy = target.getAttribute('cy');
             if (isAvailable(target) && !isUsed(target)) {
                 stopTrack(currentline, target);
                 currentline = beginTrack(target);
@@ -192,18 +215,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
                 svg.off('touchmove mousemove', currenthandler);
             }
             if (target === undefined) return;
-            var x = target.getAttribute('cx');
-            var y = target.getAttribute('cy');
+            var x = target.getAttribute('cx'),
+            y = target.getAttribute('cy');
             line.setAttribute('x2', x);
             line.setAttribute('y2', y);
         }
 
         function beginTrack(target) {
             code.push(target);
-            var x = target.getAttribute('cx');
-            var y = target.getAttribute('cy');
-            var line = createNewLine(x, y);
-            var marker = createNewMarker(x, y);
+            var x = target.getAttribute('cx'),
+            y = target.getAttribute('cy'),
+            line = createNewLine(x, y),
+            marker = createNewMarker(x, y);
             actives.append(marker);
             currenthandler = updateLine(line);
             svg.on('touchmove mousemove', currenthandler);
@@ -245,7 +268,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             var _getMousePos2 = getMousePos(e),
                 x = _getMousePos2.x,
                 y = _getMousePos2.y;
-
             pt.x = x;pt.y = y;
             return pt.matrixTransform(element.getScreenCTM().inverse());
         }
diff --git a/dist/patternlock.min.js b/dist/patternlock.min.js
index 94811cd..ccbf5c8 100644
--- a/dist/patternlock.min.js
+++ b/dist/patternlock.min.js
@@ -1 +1 @@
-"use strict";function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e){var t=Function("return this")()||(0,eval)("this");"function"==typeof define&&define.amd?define(["jquery"],function(n){return e(n,t)}):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=e(require("jquery"),t):t.PatternLock=e(t.jQuery,t)}(function(e,t){function n(){navigator.vibrate=navigator.vibrate||navigator.webkitVibrate||navigator.mozVibrate||navigator.msVibrate,navigator.vibrate&&t.navigator.vibrate(25)}function r(o,a){function s(){C.removeClass("error"),C.addClass("success")}function f(){C.removeClass("success"),C.addClass("error")}function v(){return parseInt(q.map(function(e){return L.index(e)+1}).join(""))}function l(){p(),w(F),F&&F.remove(),C.off(u,A);var e=a.onPattern.call(_,v());!0===e?s():!1===e&&f()}function d(){q=[],F=void 0,N=void 0,C.removeClass("success error"),M.empty(),O.empty()}function m(e){(e=e||t.event).preventDefault&&e.preventDefault(),e.returnValue=!1}function y(e){if(c[e.keyCode])return m(e),!1}function b(){t.addEventListener&&t.addEventListener("DOMMouseScroll",m,!1),t.onwheel=m,t.onmousewheel=document.onmousewheel=m,t.ontouchmove=m,document.onkeydown=y}function p(){t.removeEventListener&&t.removeEventListener("DOMMouseScroll",m,!1),t.onmousewheel=document.onmousewheel=null,t.onwheel=null,t.ontouchmove=null,document.onkeydown=null}function g(e){for(var t=0;t<q.length;t++)if(q[t]===e)return!0;return!1}function h(e){for(var t=0;t<L.length;t++)if(L[t]===e)return!0;return!1}function x(e){return function(t){if(t.preventDefault(),F===e){var n=E(t.target,t);return e.setAttribute("x2",n.x),e.setAttribute("y2",n.y),!1}}}function A(e,t){if(!t){var n=k(e),r=n.x,o=n.y;t=document.elementFromPoint(r,o)}t.getAttribute("cx"),t.getAttribute("cy");h(t)&&!g(t)&&(w(F,t),F=P(t))}function w(e,t){if(void 0!==e&&(N&&C.off("touchmove mousemove",N),void 0!==t)){var n=t.getAttribute("cx"),r=t.getAttribute("cy");e.setAttribute("x2",n),e.setAttribute("y2",r)}}function P(e){q.push(e);var t=e.getAttribute("cx"),r=e.getAttribute("cy"),o=j(t,r),i=S(t,r);return O.append(i),N=x(o),C.on("touchmove mousemove",N),M.append(o),a.vibrate&&n(),o}function S(e,t){var n=document.createElementNS(i,"circle");return n.setAttribute("cx",e),n.setAttribute("cy",t),n.setAttribute("r",6),n}function j(e,t,n,r){var o=document.createElementNS(i,"line");return o.setAttribute("x1",e),o.setAttribute("y1",t),void 0===n||void 0==r?(o.setAttribute("x2",e),o.setAttribute("y2",t)):(o.setAttribute("x2",n),o.setAttribute("y2",r)),o}function k(e){return{x:e.clientX||e.originalEvent.touches[0].clientX,y:e.clientY||e.originalEvent.touches[0].clientY}}function E(e,t){var n=k(t),r=n.x,o=n.y;return V.x=r,V.y=o,V.matrixTransform(e.getScreenCTM().inverse())}var C=e(o),_=this,D=C[0],L=C.find(".lock-dots circle"),M=C.find(".lock-lines"),O=C.find(".lock-actives"),V=D.createSVGPoint(),q=[],F=void 0,N=void 0;a=Object.assign(r.defaults,a||{}),C.on("touchstart mousedown",function(t){d(),t.preventDefault(),b(),C.on(u,A);var n="touchstart"==t.type?"touchend":"mouseup";e(document).one(n,function(e){l()})}),Object.assign(this,{clear:d,success:s,error:f,getPattern:v})}var o,i="http://www.w3.org/2000/svg",u="touchmove mousemove",c=(o={37:!0,38:!0,39:!0,40:!0,32:!0},_defineProperty(o,"38",!0),_defineProperty(o,34,!0),_defineProperty(o,35,!0),_defineProperty(o,36,!0),o);return r.defaults={onPattern:function(){},vibrate:!0},r});
\ No newline at end of file
+"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=Function("return this")()||(0,eval)("this");"function"==typeof define&&define.amd?define(["jquery"],function(n){return e(n,t)}):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=e(require("jquery"),t):t.PatternLock=e(t.jQuery,t)}(function(e,t){var n,r="http://www.w3.org/2000/svg",o="touchmove mousemove",u=(_defineProperty(n={37:!0,38:!0,39:!0,40:!0,32:!0},"38",!0),_defineProperty(n,34,!0),_defineProperty(n,35,!0),_defineProperty(n,36,!0),n);function i(){navigator.vibrate=navigator.vibrate||navigator.webkitVibrate||navigator.mozVibrate||navigator.msVibrate,navigator.vibrate&&t.navigator.vibrate(25)}function c(n,a){var s=e(n),f=this,l=s[0],v=s.find(".lock-dots circle"),d=s.find(".lock-lines"),m=s.find(".lock-actives"),y=l.createSVGPoint(),b=[],p=[],g=void 0,h=void 0,x=0;for(x=0;x<v.length;x++)p[x+1]={x:v[x].cx.baseVal.value,y:v[x].cy.baseVal.value};function A(){s.removeClass("error"),s.addClass("success")}function w(){s.removeClass("success"),s.addClass("error")}function P(){return parseInt(b.map(function(e){return v.index(e)+1}).join(""))}function S(){b=[],g=void 0,h=void 0,s.removeClass("success error"),d.empty(),m.empty()}function j(e){(e=e||t.event).preventDefault&&e.preventDefault(),e.returnValue=!1}function k(e){if(u[e.keyCode])return j(e),!1}function E(e){return function(t){if(t.preventDefault(),g===e){var n=function(e,t){var n=L(t),r=n.x,o=n.y;return y.x=r,y.y=o,y.matrixTransform(e.getScreenCTM().inverse())}(t.target,t);return e.setAttribute("x2",n.x),e.setAttribute("y2",n.y),!1}}}function C(e,t){if(!t){var n=L(e),r=n.x,o=n.y;t=document.elementFromPoint(r,o)}t.getAttribute("cx"),t.getAttribute("cy");(function(e){for(x=0;x<v.length;x++)if(v[x]===e)return!0;return!1})(t)&&!function(e){for(x=0;x<b.length;x++)if(b[x]===e)return!0;return!1}(t)&&(V(g,t),g=function(e){b.push(e);var t=e.getAttribute("cx"),n=e.getAttribute("cy"),r=D(t,n),o=_(t,n);m.append(o),h=E(r),s.on("touchmove mousemove",h),d.append(r),a.vibrate&&i();return r}(t))}function V(e,t){if(void 0!==e&&(h&&s.off("touchmove mousemove",h),void 0!==t)){var n=t.getAttribute("cx"),r=t.getAttribute("cy");e.setAttribute("x2",n),e.setAttribute("y2",r)}}function _(e,t){var n=document.createElementNS(r,"circle");return n.setAttribute("cx",e),n.setAttribute("cy",t),n.setAttribute("r",6),n}function D(e,t,n,o){var u=document.createElementNS(r,"line");return u.setAttribute("x1",e),u.setAttribute("y1",t),void 0===n||null==o?(u.setAttribute("x2",e),u.setAttribute("y2",t)):(u.setAttribute("x2",n),u.setAttribute("y2",o)),u}function L(e){return{x:e.clientX||e.originalEvent.touches[0].clientX,y:e.clientY||e.originalEvent.touches[0].clientY}}a=Object.assign(c.defaults,a||{}),s.on("touchstart mousedown",function(n){S(),n.preventDefault(),function(){t.addEventListener&&t.addEventListener("DOMMouseScroll",j,!1);t.onwheel=j,t.onmousewheel=document.onmousewheel=j,t.ontouchmove=j,document.onkeydown=k}(),s.on(o,C);var r="touchstart"==n.type?"touchend":"mouseup";e(document).one(r,function(e){!function(){(function(){t.removeEventListener&&t.removeEventListener("DOMMouseScroll",j,!1);t.onmousewheel=document.onmousewheel=null,t.onwheel=null,t.ontouchmove=null,document.onkeydown=null})(),V(g),g&&g.remove(),s.off(o,C);var e=a.onPattern.call(f,P());!0===e?A():!1===e&&w()}()})}),Object.assign(this,{clear:S,success:A,error:w,getPattern:P,setPattern:function(e){if(S(),void 0===e)return;var t,n,r,o=null;for(x=0;x<e.length;x++)void 0!==p[e[x]]&&(r=p[e[x]],t=_(r.x,r.y),m.append(t),null!=o&&(n=D(o.x,o.y,r.x,r.y),d.append(n)),a.vibrate&&i(),o=r)}})}return c.defaults={onPattern:function(){},vibrate:!0},c});
\ No newline at end of file
diff --git a/docs/patternlock.js b/docs/patternlock.js
index a42e238..58d75ba 100644
--- a/docs/patternlock.js
+++ b/docs/patternlock.js
@@ -21,12 +21,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         global.PatternLock = factory(global.jQuery, global);
     }
 })(function ($, window) {
-    var _scrollKeys;
-
-    var svgns = 'http://www.w3.org/2000/svg';
-    var moveEvent = 'touchmove mousemove';
-
-    var scrollKeys = (_scrollKeys = {
+    var _scrollKeys,
+    svgns = 'http://www.w3.org/2000/svg',
+    moveEvent = 'touchmove mousemove',
+    scrollKeys = (_scrollKeys = {
         37: true, // left
         38: true, // up
         39: true, // right
@@ -41,16 +39,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     }
 
     function PatternLock(element, options) {
-        var svg = $(element);
-        var self = this;
-        var root = svg[0];
-        var dots = svg.find('.lock-dots circle');
-        var lines = svg.find('.lock-lines');
-        var actives = svg.find('.lock-actives');
-        var pt = root.createSVGPoint();
-        var code = [];
-        var currentline = void 0;
-        var currenthandler = void 0;
+        var svg = $(element),
+         self = this,
+         root = svg[0],
+         dots = svg.find('.lock-dots circle'),
+         lines = svg.find('.lock-lines'),
+         actives = svg.find('.lock-actives'),
+         pt = root.createSVGPoint(),
+         code = [],
+         dotsMap = [],
+         currentline = void 0,
+         currenthandler = void 0,
+         i = 0;
+
+        for(i=0; i<dots.length; i++){
+            dotsMap[i+1] = {x: dots[i].cx.baseVal.value, y: dots[i].cy.baseVal.value};
+        }
 
         options = Object.assign(PatternLock.defaults, options || {});
 
@@ -70,7 +74,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             clear: clear,
             success: success,
             error: error,
-            getPattern: getPattern
+            getPattern: getPattern,
+            setPattern: setPattern
         });
 
         function success() {
@@ -88,6 +93,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
                 return dots.index(i) + 1;
             }).join(''));
         }
+        function setPattern(arr){
+            clear();
+            if (arr === undefined) return;
+            var marker,line, dotActual, dotBefore = null;
+            for(i = 0; i < arr.length ; i++ ){
+                if(dotsMap[arr[i]] !== undefined){
+                    dotActual = dotsMap[arr[i]];
+                    marker = createNewMarker(dotActual.x,dotActual.y);
+                    actives.append(marker);
+                    if(dotBefore != null){
+                        line = createNewLine(dotBefore.x, dotBefore.y, dotActual.x, dotActual.y);
+                        lines.append(line);
+                    }
+                    if (options.vibrate) vibrate();
+                    dotBefore = dotActual;
+                }
+            }
+        }
 
         function end() {
             enableScroll();
@@ -142,7 +165,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         }
 
         function isUsed(target) {
-            for (var i = 0; i < code.length; i++) {
+            for (i = 0; i < code.length; i++) {
                 if (code[i] === target) {
                     return true;
                 }
@@ -151,7 +174,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         }
 
         function isAvailable(target) {
-            for (var i = 0; i < dots.length; i++) {
+            for (i = 0; i < dots.length; i++) {
                 if (dots[i] === target) {
                     return true;
                 }
@@ -178,8 +201,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
                 target = document.elementFromPoint(x, y);
             }
-            var cx = target.getAttribute('cx');
-            var cy = target.getAttribute('cy');
+            var cx = target.getAttribute('cx'),
+             cy = target.getAttribute('cy');
             if (isAvailable(target) && !isUsed(target)) {
                 stopTrack(currentline, target);
                 currentline = beginTrack(target);
@@ -192,18 +215,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
                 svg.off('touchmove mousemove', currenthandler);
             }
             if (target === undefined) return;
-            var x = target.getAttribute('cx');
-            var y = target.getAttribute('cy');
+            var x = target.getAttribute('cx'),
+            y = target.getAttribute('cy');
             line.setAttribute('x2', x);
             line.setAttribute('y2', y);
         }
 
         function beginTrack(target) {
             code.push(target);
-            var x = target.getAttribute('cx');
-            var y = target.getAttribute('cy');
-            var line = createNewLine(x, y);
-            var marker = createNewMarker(x, y);
+            var x = target.getAttribute('cx'),
+            y = target.getAttribute('cy'),
+            line = createNewLine(x, y),
+            marker = createNewMarker(x, y);
             actives.append(marker);
             currenthandler = updateLine(line);
             svg.on('touchmove mousemove', currenthandler);
@@ -245,7 +268,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
             var _getMousePos2 = getMousePos(e),
                 x = _getMousePos2.x,
                 y = _getMousePos2.y;
-
             pt.x = x;pt.y = y;
             return pt.matrixTransform(element.getScreenCTM().inverse());
         }
diff --git a/patternlock.js b/patternlock.js
index 854b72d..b05a16f 100644
--- a/patternlock.js
+++ b/patternlock.js
@@ -1,5 +1,5 @@
 (function (factory) {
-    var global = Function('return this')() || (0, eval)('this');
+    let global = Function('return this')() || (0, eval)('this');
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
         define(['jquery'], function($) {
@@ -15,10 +15,9 @@
         global.PatternLock = factory(global.jQuery, global);
     }
 }(function ($, window) {
-    var svgns = 'http://www.w3.org/2000/svg'
-    var moveEvent = 'touchmove mousemove'
-
-    var scrollKeys = {
+    let svgns = 'http://www.w3.org/2000/svg',
+    moveEvent = 'touchmove mousemove',
+    scrollKeys = {
         37: true, // left
         38: true, // up
         39: true, // right
@@ -38,16 +37,22 @@
     }
 
     function PatternLock(element, options) {
-        let svg = $(element)
-        let self = this
-        let root = svg[0]
-        let dots = svg.find('.lock-dots circle')
-        let lines = svg.find('.lock-lines')
-        let actives = svg.find('.lock-actives')
-        var pt = root.createSVGPoint();
-        let code = []
-        let currentline
-        let currenthandler
+        let svg = $(element),
+        self = this,
+        root = svg[0],
+        dots = svg.find('.lock-dots circle'),
+        lines = svg.find('.lock-lines'),
+        actives = svg.find('.lock-actives'),
+        pt = root.createSVGPoint(),
+        code = [],
+        currentline,
+        currenthandler,
+        i,
+        dotsMap = []
+
+        for(i=0; i<dots.length; i++){
+            dotsMap[i+1] = {x: dots[i].cx.baseVal.value, y: dots[i].cy.baseVal.value};
+        }
 
         options = Object.assign(PatternLock.defaults, options || {})
 
@@ -68,6 +73,7 @@
             success,
             error,
             getPattern,
+            setPattern,
         })
 
         function success() {
@@ -84,6 +90,25 @@
             return parseInt(code.map((i) => dots.index(i)+1).join(''))
         }
 
+        function setPattern(arr){
+            clear()
+            if (arr === undefined) return
+            let marker,line, dotActual, dotBefore = null
+            for(i = 0; i < arr.length ; i++ ){
+                if(dotsMap[arr[i]] !== undefined){
+                    dotActual = dotsMap[arr[i]]
+                    marker = createNewMarker(dotActual.x,dotActual.y)
+                    actives.append(marker)
+                    if(dotBefore != null){
+                        line = createNewLine(dotBefore.x, dotBefore.y, dotActual.x, dotActual.y)
+                        lines.append(line)
+                    }
+                    if (options.vibrate) vibrate()
+                    dotBefore = dotActual
+                }
+            }
+        }
+
         function end() {
             enableScroll()
             stopTrack(currentline)
@@ -139,7 +164,7 @@
         }
 
         function isUsed(target) {
-            for (let i = 0; i < code.length; i++) {
+            for (i = 0; i < code.length; i++) {
                 if (code[i] === target) {
                     return true
                 }
@@ -148,7 +173,7 @@
         }
 
         function isAvailable(target) {
-            for (let i = 0; i < dots.length; i++) {
+            for (i = 0; i < dots.length; i++) {
                 if (dots[i] === target) {
                     return true
                 }
@@ -172,8 +197,8 @@
                 let {x, y} = getMousePos(e)
                 target = document.elementFromPoint(x, y);
             }
-            let cx = target.getAttribute('cx')
-            let cy = target.getAttribute('cy')
+            let cx = target.getAttribute('cx'),
+            cy = target.getAttribute('cy')
             if (isAvailable(target) && !isUsed(target)) {
                 stopTrack(currentline, target)
                 currentline = beginTrack(target)
@@ -186,18 +211,18 @@
                 svg.off('touchmove mousemove', currenthandler)
             }
             if (target === undefined) return
-            let x = target.getAttribute('cx')
-            let y = target.getAttribute('cy')
+            let x = target.getAttribute('cx'),
+            y = target.getAttribute('cy')
             line.setAttribute('x2', x)
             line.setAttribute('y2', y)
         }
 
         function beginTrack(target) {
             code.push(target)
-            let x = target.getAttribute('cx')
-            let y = target.getAttribute('cy')
-            var line = createNewLine(x, y)
-            var marker = createNewMarker(x, y)
+            let x = target.getAttribute('cx'),
+            y = target.getAttribute('cy'),
+            line = createNewLine(x, y),
+            marker = createNewMarker(x, y)
             actives.append(marker)
             currenthandler = updateLine(line)
             svg.on('touchmove mousemove', currenthandler)
@@ -207,7 +232,7 @@
         }
 
         function createNewMarker(x, y) {
-            var marker = document.createElementNS(svgns, "circle")
+            let marker = document.createElementNS(svgns, "circle")
             marker.setAttribute('cx', x)
             marker.setAttribute('cy', y)
             marker.setAttribute('r', 6)
@@ -215,7 +240,7 @@
         }
 
         function createNewLine(x1, y1, x2, y2) {
-            var line = document.createElementNS(svgns, "line")
+            let line = document.createElementNS(svgns, "line")
             line.setAttribute('x1', x1)
             line.setAttribute('y1', y1)
             if (x2 === undefined || y2 == undefined) {
@@ -242,12 +267,10 @@
         }
     }
 
-
     PatternLock.defaults = {
         onPattern: () => {},
         vibrate: true,
     }
 
-
     return PatternLock
 }));
\ No newline at end of file