├── .eslintignore
├── .github
    └── workflows
    │   └── tests.yml
├── .gitignore
├── .nowignore
├── .npmignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── demo.png
├── dist
    ├── paintable.common.js
    ├── paintable.umd.js
    └── paintable.umd.min.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── src
    ├── App.vue
    ├── Paintable.vue
    ├── components
    │   └── Navigation.vue
    ├── main.js
    └── plugin.js
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── example.spec.js
├── vercel.json
└── vue.config.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/


--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
 1 | name: Tests
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     strategy:
11 |       matrix:
12 |         node-version: [10.x, 12.x]
13 | 
14 |     steps:
15 |     - uses: actions/checkout@v1
16 |     - name: Use Node.js ${{ matrix.node-version }}
17 |       uses: actions/setup-node@v1
18 |       with:
19 |         node-version: ${{ matrix.node-version }}
20 |     - name: npm install, lint, build and test
21 |       run: |
22 |         npm install
23 |         npm test
24 |         npm run lint
25 |         npm run now-build
26 |       env:
27 |         CI: true
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | # local env files
 5 | .env.local
 6 | .env.*.local
 7 | 
 8 | # Log files
 9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
12 | 
13 | # Editor directories and files
14 | .idea
15 | .vscode
16 | *.suo
17 | *.ntvs*
18 | *.njsproj
19 | *.sln
20 | *.sw?
21 | 
22 | demo


--------------------------------------------------------------------------------
/.nowignore:
--------------------------------------------------------------------------------
1 | demo.png
2 | .vscode
3 | tests
4 | public
5 | dist
6 | demo
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | src/
 2 | webpack.config.js
 3 | travis.yml
 4 | .vscode
 5 | .prettierrc
 6 | demo/
 7 | coverage/
 8 | .git/
 9 | scripts/
10 | demo.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "travis.repository": "vue-paintable",
3 |     "travis.username": "ph1p"
4 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 appcom interactive GmbH
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-paintable [![npm](https://badge.fury.io/js/vue-paintable.svg)](https://www.npmjs.com/package/vue-paintable) [![](https://img.shields.io/badge/vercel-demo-black.svg)](https://vue-paintable.vercel.app/)
  2 | 
  3 | With this vue plugin and component you can add a paintable canvas through your page.
  4 | All paintings are saved by default into localStorage.
  5 | 
  6 | 
  7 | <p align="center">
  8 |   <a target="_blank" href="https://vue-paintable.vercel.app">
  9 |     <img src="./demo.png">
 10 |   </a>
 11 | </p>
 12 | 
 13 | ### How to use?
 14 | 
 15 | ```bash
 16 | npm install vue-paintable
 17 | ```
 18 | 
 19 | or
 20 | 
 21 | ```bash
 22 | yarn add vue-paintable
 23 | ```
 24 | 
 25 | Inside your main (typically main.js)
 26 | 
 27 | ```javascript
 28 | import Vue from 'vue';
 29 | import Paintable from 'vue-paintable';
 30 | 
 31 | Vue.use(Paintable, {
 32 |   // optional methods
 33 |   setItem(key, image) {
 34 |     localStorage.setItem(key, image);
 35 |   },
 36 |   // you also can use async
 37 |   getItem(key) {
 38 |     return localStorage.getItem(key);
 39 |   },
 40 |   removeItem(key) {
 41 |     localStorage.removeItem(key);
 42 |   }
 43 | });
 44 | //...
 45 | ```
 46 | 
 47 | #### Inside your components
 48 | 
 49 | ```html
 50 | <template>
 51 |   <paintable
 52 |     alwaysOnTop
 53 |     :active="isActive"
 54 |     :width="800"
 55 |     :height="800"
 56 |     :disableNavigation="disableNavigation"
 57 |     :hide="hidePaintable"
 58 |     :horizontalNavigation="true"
 59 |     :navigation="navigation"
 60 |     :name="isFirstPaintable ? 'my-screen' : 'my-second-screen'"
 61 |     :factor="1"
 62 |     :lineWidth="dynamicLineWidth"
 63 |     :lineWidthEraser="20"
 64 |     :useEraser="useEraser"
 65 |     :color="color"
 66 |     class="paint"
 67 |     ref="paintable"
 68 |     @toggle-paintable="toggledPaintable"
 69 |   >
 70 |     Your content
 71 |     <router-view></router-view>
 72 |   </paintable>
 73 | </template>
 74 | ```
 75 | 
 76 | ### Navigation
 77 | 
 78 | Set your own navigation content by adding an object to your `<paintable>` component.
 79 | 
 80 | ```javascript
 81 | {
 82 |   'draw-save': {
 83 |     body: 'draw',
 84 |     activeBody: '<strong>save</strong>'
 85 |   },
 86 |   color: {
 87 |     body: 'CP'
 88 |   }
 89 | }
 90 | ```
 91 | 
 92 | **Display navigation horizontal**
 93 | 
 94 | To display the navigation horizontally add `horizontalNavigation` to prop list.
 95 | 
 96 | **Available navigation items:**
 97 | 
 98 | - color
 99 | - line-width
100 | - undo
101 | - redo
102 | - delete
103 | - cancel
104 | 
105 | **has active state (activeBody):**
106 | 
107 | - draw-save
108 | - eraser-pencil
109 | 
110 | ### Custom Navigation
111 | 
112 | To use a custom navigation disable the default navigation with `disableNavigation`.
113 | 
114 | #### use \$refs to call paintable methods
115 | 
116 | ```html
117 | <paintable ref="paintable">content</paintable>
118 | 
119 | <button @click="$refs.paintable.undoDrawingStep">undo</button>
120 | <button @click="$refs.paintable.redoDrawingStep">redo</button>
121 | <button @click="$refs.paintable.clearCanvas">clear</button>
122 | <button @click="$refs.paintable.saveCurrentCanvasToStorage">
123 |   save
124 | </button>
125 | <button @click="$refs.paintable.cancelDrawing">cancel</button>
126 | ```
127 | 
128 | Take a look at the [demo](https://vue-paintable.vercel.app/) (`/src/App.vue`)
129 | 
130 | 
131 | ### Props
132 | 
133 | | name                 | type                            | required | default                                                                  | description                                                    |
134 | | -------------------- | ------------------------------- | -------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------|
135 | | name                 | string - required               | true     | -                                                                        | unique identifier                                              |
136 | | showUndoRedo         | boolean                         | false    | true                                                                     | show undo and redo button                                      |
137 | | hide                 | boolean                         | false    | false                                                                    | hide the complete paintable                                    |
138 | | colors               | Array of colors (rgb, hex etc.) | false    | ['black', '#f00', '#4481c7', 'rgba(255, 235, 59, 0.4)', '#999', 'green'] | array of choosable colors                                      |
139 | | width                | number                          | false    | window.innerWidth                                                        | canvas width                                                   |
140 | | height               | number                          | false    | window.innerHeight                                                       | canvas height                                                  |
141 | | showLineWidth        | boolean                         | false    | true                                                                     | show button to set line width                                  |
142 | | lineWidth            | number                          | false    | 5                                                                        | line width                                                     |
143 | | alwaysOnTop          | boolean                         | false    | true                                                                     | set canvas always as top layer                                 |
144 | | factor               | number                          | false    | 1                                                                        | set a scale factor if needed                                   |
145 | | lineWidthEraser      | number                          | false    | 20                                                                       | set eraser line width                                          |
146 | | horizontalNavigation | boolean                         | false    | true                                                                     | display the navigation horizontally or vertically              |
147 | | disableNavigation    | boolean                         | false    | false                                                                    | hide navigation                                                |
148 | | active               | boolean                         | false    | false                                                                    | set paintable active/inactive                                  |
149 | | color                | string                          | false    | #000                                                                     | current color                                                  |
150 | | useEraser            | boolean                         | false    | false                                                                    | set to true, to use the eraser                                 |
151 | | threshold            | number                          | false    | 0                                                                        | set the threshold on which an event gets triggered (see events)|
152 | 
153 | ### Events
154 | 
155 | | name             | type    | description                                          |
156 | | ---------------- | ------- | ---------------------------------------------------- |
157 | | toggle-paintable | boolean | Is emitted, when changing paintable state            |
158 | | thresholdReached | boolean | Is emitted, when the speciefied threshold is reached |
159 | 
160 | ```html
161 | <paintable @toggle-paintable="toggledPaintable"></paintable>
162 | 
163 | <paintable :threshold="10" @thresholdReached="thresholdReached"></paintable>
164 | ```
165 | 
166 | ### development
167 | 
168 | If you want to develop with this plugin, follow these steps:
169 | 
170 | - clone repo
171 | - run `yarn install` or `npm install`
172 | - run `yarn serve` or `npm run serve`
173 | 
174 | ### build
175 | 
176 | You can find all built files inside the `dist` folder.
177 | 
178 | - run `yarn build` or `npm run build`
179 | 


--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph1p/vue-paintable/15514940151106055fee5325ac5936f1d9222d7a/demo.png


--------------------------------------------------------------------------------
/dist/paintable.common.js:
--------------------------------------------------------------------------------
   1 | module.exports =
   2 | /******/ (function(modules) { // webpackBootstrap
   3 | /******/ 	// The module cache
   4 | /******/ 	var installedModules = {};
   5 | /******/
   6 | /******/ 	// The require function
   7 | /******/ 	function __webpack_require__(moduleId) {
   8 | /******/
   9 | /******/ 		// Check if module is in cache
  10 | /******/ 		if(installedModules[moduleId]) {
  11 | /******/ 			return installedModules[moduleId].exports;
  12 | /******/ 		}
  13 | /******/ 		// Create a new module (and put it into the cache)
  14 | /******/ 		var module = installedModules[moduleId] = {
  15 | /******/ 			i: moduleId,
  16 | /******/ 			l: false,
  17 | /******/ 			exports: {}
  18 | /******/ 		};
  19 | /******/
  20 | /******/ 		// Execute the module function
  21 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22 | /******/
  23 | /******/ 		// Flag the module as loaded
  24 | /******/ 		module.l = true;
  25 | /******/
  26 | /******/ 		// Return the exports of the module
  27 | /******/ 		return module.exports;
  28 | /******/ 	}
  29 | /******/
  30 | /******/
  31 | /******/ 	// expose the modules object (__webpack_modules__)
  32 | /******/ 	__webpack_require__.m = modules;
  33 | /******/
  34 | /******/ 	// expose the module cache
  35 | /******/ 	__webpack_require__.c = installedModules;
  36 | /******/
  37 | /******/ 	// define getter function for harmony exports
  38 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
  39 | /******/ 		if(!__webpack_require__.o(exports, name)) {
  40 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
  41 | /******/ 		}
  42 | /******/ 	};
  43 | /******/
  44 | /******/ 	// define __esModule on exports
  45 | /******/ 	__webpack_require__.r = function(exports) {
  46 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48 | /******/ 		}
  49 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
  50 | /******/ 	};
  51 | /******/
  52 | /******/ 	// create a fake namespace object
  53 | /******/ 	// mode & 1: value is a module id, require it
  54 | /******/ 	// mode & 2: merge all properties of value into the ns
  55 | /******/ 	// mode & 4: return value when already ns object
  56 | /******/ 	// mode & 8|1: behave like require
  57 | /******/ 	__webpack_require__.t = function(value, mode) {
  58 | /******/ 		if(mode & 1) value = __webpack_require__(value);
  59 | /******/ 		if(mode & 8) return value;
  60 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61 | /******/ 		var ns = Object.create(null);
  62 | /******/ 		__webpack_require__.r(ns);
  63 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65 | /******/ 		return ns;
  66 | /******/ 	};
  67 | /******/
  68 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
  69 | /******/ 	__webpack_require__.n = function(module) {
  70 | /******/ 		var getter = module && module.__esModule ?
  71 | /******/ 			function getDefault() { return module['default']; } :
  72 | /******/ 			function getModuleExports() { return module; };
  73 | /******/ 		__webpack_require__.d(getter, 'a', getter);
  74 | /******/ 		return getter;
  75 | /******/ 	};
  76 | /******/
  77 | /******/ 	// Object.prototype.hasOwnProperty.call
  78 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79 | /******/
  80 | /******/ 	// __webpack_public_path__
  81 | /******/ 	__webpack_require__.p = "";
  82 | /******/
  83 | /******/
  84 | /******/ 	// Load entry module and return exports
  85 | /******/ 	return __webpack_require__(__webpack_require__.s = "fb15");
  86 | /******/ })
  87 | /************************************************************************/
  88 | /******/ ({
  89 | 
  90 | /***/ "2443":
  91 | /***/ (function(module, exports, __webpack_require__) {
  92 | 
  93 | // style-loader: Adds some css to the DOM by adding a <style> tag
  94 | 
  95 | // load the styles
  96 | var content = __webpack_require__("9043");
  97 | if(typeof content === 'string') content = [[module.i, content, '']];
  98 | if(content.locals) module.exports = content.locals;
  99 | // add the styles to the DOM
 100 | var add = __webpack_require__("499e").default
 101 | var update = add("9ee9b9f6", content, true, {"sourceMap":false,"shadowMode":false});
 102 | 
 103 | /***/ }),
 104 | 
 105 | /***/ "24fb":
 106 | /***/ (function(module, exports, __webpack_require__) {
 107 | 
 108 | "use strict";
 109 | 
 110 | 
 111 | /*
 112 |   MIT License http://www.opensource.org/licenses/mit-license.php
 113 |   Author Tobias Koppers @sokra
 114 | */
 115 | // css base code, injected by the css-loader
 116 | // eslint-disable-next-line func-names
 117 | module.exports = function (useSourceMap) {
 118 |   var list = []; // return the list of modules as css string
 119 | 
 120 |   list.toString = function toString() {
 121 |     return this.map(function (item) {
 122 |       var content = cssWithMappingToString(item, useSourceMap);
 123 | 
 124 |       if (item[2]) {
 125 |         return "@media ".concat(item[2], " {").concat(content, "}");
 126 |       }
 127 | 
 128 |       return content;
 129 |     }).join('');
 130 |   }; // import a list of modules into the list
 131 |   // eslint-disable-next-line func-names
 132 | 
 133 | 
 134 |   list.i = function (modules, mediaQuery, dedupe) {
 135 |     if (typeof modules === 'string') {
 136 |       // eslint-disable-next-line no-param-reassign
 137 |       modules = [[null, modules, '']];
 138 |     }
 139 | 
 140 |     var alreadyImportedModules = {};
 141 | 
 142 |     if (dedupe) {
 143 |       for (var i = 0; i < this.length; i++) {
 144 |         // eslint-disable-next-line prefer-destructuring
 145 |         var id = this[i][0];
 146 | 
 147 |         if (id != null) {
 148 |           alreadyImportedModules[id] = true;
 149 |         }
 150 |       }
 151 |     }
 152 | 
 153 |     for (var _i = 0; _i < modules.length; _i++) {
 154 |       var item = [].concat(modules[_i]);
 155 | 
 156 |       if (dedupe && alreadyImportedModules[item[0]]) {
 157 |         // eslint-disable-next-line no-continue
 158 |         continue;
 159 |       }
 160 | 
 161 |       if (mediaQuery) {
 162 |         if (!item[2]) {
 163 |           item[2] = mediaQuery;
 164 |         } else {
 165 |           item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
 166 |         }
 167 |       }
 168 | 
 169 |       list.push(item);
 170 |     }
 171 |   };
 172 | 
 173 |   return list;
 174 | };
 175 | 
 176 | function cssWithMappingToString(item, useSourceMap) {
 177 |   var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
 178 | 
 179 |   var cssMapping = item[3];
 180 | 
 181 |   if (!cssMapping) {
 182 |     return content;
 183 |   }
 184 | 
 185 |   if (useSourceMap && typeof btoa === 'function') {
 186 |     var sourceMapping = toComment(cssMapping);
 187 |     var sourceURLs = cssMapping.sources.map(function (source) {
 188 |       return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
 189 |     });
 190 |     return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
 191 |   }
 192 | 
 193 |   return [content].join('\n');
 194 | } // Adapted from convert-source-map (MIT)
 195 | 
 196 | 
 197 | function toComment(sourceMap) {
 198 |   // eslint-disable-next-line no-undef
 199 |   var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
 200 |   var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
 201 |   return "/*# ".concat(data, " */");
 202 | }
 203 | 
 204 | /***/ }),
 205 | 
 206 | /***/ "4226":
 207 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 208 | 
 209 | "use strict";
 210 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("4839");
 211 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
 212 | /* unused harmony reexport * */
 213 | 
 214 | 
 215 | /***/ }),
 216 | 
 217 | /***/ "4839":
 218 | /***/ (function(module, exports, __webpack_require__) {
 219 | 
 220 | // style-loader: Adds some css to the DOM by adding a <style> tag
 221 | 
 222 | // load the styles
 223 | var content = __webpack_require__("4979");
 224 | if(typeof content === 'string') content = [[module.i, content, '']];
 225 | if(content.locals) module.exports = content.locals;
 226 | // add the styles to the DOM
 227 | var add = __webpack_require__("499e").default
 228 | var update = add("3368f113", content, true, {"sourceMap":false,"shadowMode":false});
 229 | 
 230 | /***/ }),
 231 | 
 232 | /***/ "4979":
 233 | /***/ (function(module, exports, __webpack_require__) {
 234 | 
 235 | // Imports
 236 | var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
 237 | exports = ___CSS_LOADER_API_IMPORT___(false);
 238 | // Module
 239 | exports.push([module.i, ".paintable,body{position:fixed}.paintable{overflow:hidden;height:100%;width:100%;-webkit-transform:scale(1);transform:scale(1)}.paintable.active{z-index:0}.paintable .canvas{position:relative;background-color:transparent;z-index:-1;position:absolute;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none}.paintable .canvas.active{z-index:1000}.paintable .canvas.active.back{z-index:999}", ""]);
 240 | // Exports
 241 | module.exports = exports;
 242 | 
 243 | 
 244 | /***/ }),
 245 | 
 246 | /***/ "499e":
 247 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 248 | 
 249 | "use strict";
 250 | // ESM COMPAT FLAG
 251 | __webpack_require__.r(__webpack_exports__);
 252 | 
 253 | // EXPORTS
 254 | __webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ addStylesClient; });
 255 | 
 256 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
 257 | /**
 258 |  * Translates the list format produced by css-loader into something
 259 |  * easier to manipulate.
 260 |  */
 261 | function listToStyles (parentId, list) {
 262 |   var styles = []
 263 |   var newStyles = {}
 264 |   for (var i = 0; i < list.length; i++) {
 265 |     var item = list[i]
 266 |     var id = item[0]
 267 |     var css = item[1]
 268 |     var media = item[2]
 269 |     var sourceMap = item[3]
 270 |     var part = {
 271 |       id: parentId + ':' + i,
 272 |       css: css,
 273 |       media: media,
 274 |       sourceMap: sourceMap
 275 |     }
 276 |     if (!newStyles[id]) {
 277 |       styles.push(newStyles[id] = { id: id, parts: [part] })
 278 |     } else {
 279 |       newStyles[id].parts.push(part)
 280 |     }
 281 |   }
 282 |   return styles
 283 | }
 284 | 
 285 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
 286 | /*
 287 |   MIT License http://www.opensource.org/licenses/mit-license.php
 288 |   Author Tobias Koppers @sokra
 289 |   Modified by Evan You @yyx990803
 290 | */
 291 | 
 292 | 
 293 | 
 294 | var hasDocument = typeof document !== 'undefined'
 295 | 
 296 | if (typeof DEBUG !== 'undefined' && DEBUG) {
 297 |   if (!hasDocument) {
 298 |     throw new Error(
 299 |     'vue-style-loader cannot be used in a non-browser environment. ' +
 300 |     "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
 301 |   ) }
 302 | }
 303 | 
 304 | /*
 305 | type StyleObject = {
 306 |   id: number;
 307 |   parts: Array<StyleObjectPart>
 308 | }
 309 | 
 310 | type StyleObjectPart = {
 311 |   css: string;
 312 |   media: string;
 313 |   sourceMap: ?string
 314 | }
 315 | */
 316 | 
 317 | var stylesInDom = {/*
 318 |   [id: number]: {
 319 |     id: number,
 320 |     refs: number,
 321 |     parts: Array<(obj?: StyleObjectPart) => void>
 322 |   }
 323 | */}
 324 | 
 325 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
 326 | var singletonElement = null
 327 | var singletonCounter = 0
 328 | var isProduction = false
 329 | var noop = function () {}
 330 | var options = null
 331 | var ssrIdKey = 'data-vue-ssr-id'
 332 | 
 333 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 334 | // tags it will allow on a page
 335 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 336 | 
 337 | function addStylesClient (parentId, list, _isProduction, _options) {
 338 |   isProduction = _isProduction
 339 | 
 340 |   options = _options || {}
 341 | 
 342 |   var styles = listToStyles(parentId, list)
 343 |   addStylesToDom(styles)
 344 | 
 345 |   return function update (newList) {
 346 |     var mayRemove = []
 347 |     for (var i = 0; i < styles.length; i++) {
 348 |       var item = styles[i]
 349 |       var domStyle = stylesInDom[item.id]
 350 |       domStyle.refs--
 351 |       mayRemove.push(domStyle)
 352 |     }
 353 |     if (newList) {
 354 |       styles = listToStyles(parentId, newList)
 355 |       addStylesToDom(styles)
 356 |     } else {
 357 |       styles = []
 358 |     }
 359 |     for (var i = 0; i < mayRemove.length; i++) {
 360 |       var domStyle = mayRemove[i]
 361 |       if (domStyle.refs === 0) {
 362 |         for (var j = 0; j < domStyle.parts.length; j++) {
 363 |           domStyle.parts[j]()
 364 |         }
 365 |         delete stylesInDom[domStyle.id]
 366 |       }
 367 |     }
 368 |   }
 369 | }
 370 | 
 371 | function addStylesToDom (styles /* Array<StyleObject> */) {
 372 |   for (var i = 0; i < styles.length; i++) {
 373 |     var item = styles[i]
 374 |     var domStyle = stylesInDom[item.id]
 375 |     if (domStyle) {
 376 |       domStyle.refs++
 377 |       for (var j = 0; j < domStyle.parts.length; j++) {
 378 |         domStyle.parts[j](item.parts[j])
 379 |       }
 380 |       for (; j < item.parts.length; j++) {
 381 |         domStyle.parts.push(addStyle(item.parts[j]))
 382 |       }
 383 |       if (domStyle.parts.length > item.parts.length) {
 384 |         domStyle.parts.length = item.parts.length
 385 |       }
 386 |     } else {
 387 |       var parts = []
 388 |       for (var j = 0; j < item.parts.length; j++) {
 389 |         parts.push(addStyle(item.parts[j]))
 390 |       }
 391 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
 392 |     }
 393 |   }
 394 | }
 395 | 
 396 | function createStyleElement () {
 397 |   var styleElement = document.createElement('style')
 398 |   styleElement.type = 'text/css'
 399 |   head.appendChild(styleElement)
 400 |   return styleElement
 401 | }
 402 | 
 403 | function addStyle (obj /* StyleObjectPart */) {
 404 |   var update, remove
 405 |   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 406 | 
 407 |   if (styleElement) {
 408 |     if (isProduction) {
 409 |       // has SSR styles and in production mode.
 410 |       // simply do nothing.
 411 |       return noop
 412 |     } else {
 413 |       // has SSR styles but in dev mode.
 414 |       // for some reason Chrome can't handle source map in server-rendered
 415 |       // style tags - source maps in <style> only works if the style tag is
 416 |       // created and inserted dynamically. So we remove the server rendered
 417 |       // styles and inject new ones.
 418 |       styleElement.parentNode.removeChild(styleElement)
 419 |     }
 420 |   }
 421 | 
 422 |   if (isOldIE) {
 423 |     // use singleton mode for IE9.
 424 |     var styleIndex = singletonCounter++
 425 |     styleElement = singletonElement || (singletonElement = createStyleElement())
 426 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
 427 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
 428 |   } else {
 429 |     // use multi-style-tag mode in all other cases
 430 |     styleElement = createStyleElement()
 431 |     update = applyToTag.bind(null, styleElement)
 432 |     remove = function () {
 433 |       styleElement.parentNode.removeChild(styleElement)
 434 |     }
 435 |   }
 436 | 
 437 |   update(obj)
 438 | 
 439 |   return function updateStyle (newObj /* StyleObjectPart */) {
 440 |     if (newObj) {
 441 |       if (newObj.css === obj.css &&
 442 |           newObj.media === obj.media &&
 443 |           newObj.sourceMap === obj.sourceMap) {
 444 |         return
 445 |       }
 446 |       update(obj = newObj)
 447 |     } else {
 448 |       remove()
 449 |     }
 450 |   }
 451 | }
 452 | 
 453 | var replaceText = (function () {
 454 |   var textStore = []
 455 | 
 456 |   return function (index, replacement) {
 457 |     textStore[index] = replacement
 458 |     return textStore.filter(Boolean).join('\n')
 459 |   }
 460 | })()
 461 | 
 462 | function applyToSingletonTag (styleElement, index, remove, obj) {
 463 |   var css = remove ? '' : obj.css
 464 | 
 465 |   if (styleElement.styleSheet) {
 466 |     styleElement.styleSheet.cssText = replaceText(index, css)
 467 |   } else {
 468 |     var cssNode = document.createTextNode(css)
 469 |     var childNodes = styleElement.childNodes
 470 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
 471 |     if (childNodes.length) {
 472 |       styleElement.insertBefore(cssNode, childNodes[index])
 473 |     } else {
 474 |       styleElement.appendChild(cssNode)
 475 |     }
 476 |   }
 477 | }
 478 | 
 479 | function applyToTag (styleElement, obj) {
 480 |   var css = obj.css
 481 |   var media = obj.media
 482 |   var sourceMap = obj.sourceMap
 483 | 
 484 |   if (media) {
 485 |     styleElement.setAttribute('media', media)
 486 |   }
 487 |   if (options.ssrId) {
 488 |     styleElement.setAttribute(ssrIdKey, obj.id)
 489 |   }
 490 | 
 491 |   if (sourceMap) {
 492 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
 493 |     // this makes source maps inside style tags work properly in Chrome
 494 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
 495 |     // http://stackoverflow.com/a/26603875
 496 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
 497 |   }
 498 | 
 499 |   if (styleElement.styleSheet) {
 500 |     styleElement.styleSheet.cssText = css
 501 |   } else {
 502 |     while (styleElement.firstChild) {
 503 |       styleElement.removeChild(styleElement.firstChild)
 504 |     }
 505 |     styleElement.appendChild(document.createTextNode(css))
 506 |   }
 507 | }
 508 | 
 509 | 
 510 | /***/ }),
 511 | 
 512 | /***/ "57b0":
 513 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 514 | 
 515 | "use strict";
 516 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("2443");
 517 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
 518 | /* unused harmony reexport * */
 519 | 
 520 | 
 521 | /***/ }),
 522 | 
 523 | /***/ "8875":
 524 | /***/ (function(module, exports, __webpack_require__) {
 525 | 
 526 | var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
 527 | // MIT license
 528 | // source: https://github.com/amiller-gh/currentScript-polyfill
 529 | 
 530 | // added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
 531 | 
 532 | (function (root, factory) {
 533 |   if (true) {
 534 |     !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 535 | 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 536 | 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 537 | 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
 538 |   } else {}
 539 | }(typeof self !== 'undefined' ? self : this, function () {
 540 |   function getCurrentScript () {
 541 |     var descriptor = Object.getOwnPropertyDescriptor(document, 'currentScript')
 542 |     // for chrome
 543 |     if (!descriptor && 'currentScript' in document && document.currentScript) {
 544 |       return document.currentScript
 545 |     }
 546 | 
 547 |     // for other browsers with native support for currentScript
 548 |     if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
 549 |       return document.currentScript
 550 |     }
 551 |   
 552 |     // IE 8-10 support script readyState
 553 |     // IE 11+ & Firefox support stack trace
 554 |     try {
 555 |       throw new Error();
 556 |     }
 557 |     catch (err) {
 558 |       // Find the second match for the "at" string to get file src url from stack.
 559 |       var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
 560 |         ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
 561 |         stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
 562 |         scriptLocation = (stackDetails && stackDetails[1]) || false,
 563 |         line = (stackDetails && stackDetails[2]) || false,
 564 |         currentLocation = document.location.href.replace(document.location.hash, ''),
 565 |         pageSource,
 566 |         inlineScriptSourceRegExp,
 567 |         inlineScriptSource,
 568 |         scripts = document.getElementsByTagName('script'); // Live NodeList collection
 569 |   
 570 |       if (scriptLocation === currentLocation) {
 571 |         pageSource = document.documentElement.outerHTML;
 572 |         inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
 573 |         inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
 574 |       }
 575 |   
 576 |       for (var i = 0; i < scripts.length; i++) {
 577 |         // If ready state is interactive, return the script tag
 578 |         if (scripts[i].readyState === 'interactive') {
 579 |           return scripts[i];
 580 |         }
 581 |   
 582 |         // If src matches, return the script tag
 583 |         if (scripts[i].src === scriptLocation) {
 584 |           return scripts[i];
 585 |         }
 586 |   
 587 |         // If inline source matches, return the script tag
 588 |         if (
 589 |           scriptLocation === currentLocation &&
 590 |           scripts[i].innerHTML &&
 591 |           scripts[i].innerHTML.trim() === inlineScriptSource
 592 |         ) {
 593 |           return scripts[i];
 594 |         }
 595 |       }
 596 |   
 597 |       // If no match, return null
 598 |       return null;
 599 |     }
 600 |   };
 601 | 
 602 |   return getCurrentScript
 603 | }));
 604 | 
 605 | 
 606 | /***/ }),
 607 | 
 608 | /***/ "9043":
 609 | /***/ (function(module, exports, __webpack_require__) {
 610 | 
 611 | // Imports
 612 | var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
 613 | exports = ___CSS_LOADER_API_IMPORT___(false);
 614 | // Module
 615 | exports.push([module.i, ".navigation[data-v-67b314bc]{position:fixed;right:20px;top:20px;z-index:1005;background-color:#333;border-radius:5px;color:#fff}.navigation .navigationMenu[data-v-67b314bc],.navigation .navigationMenu ul[data-v-67b314bc]{list-style:none;padding:0;margin:0}.navigation .navigationMenu li>div[data-v-67b314bc]{cursor:pointer;padding:12px}.navigation .navigationMenu li.disabled[data-v-67b314bc]{opacity:.5}.navigation__lineWidthPicker[data-v-67b314bc]{background:#333;position:absolute;left:-225px;top:0;padding:12px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.navigation__lineWidthPickerDot[data-v-67b314bc]{margin-top:10px;border-radius:100%}.navigation__lineWidthPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__lineWidthPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__lineWidthPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__colorPicker[data-v-67b314bc]{background:#333;position:absolute;left:-60px;top:0;padding:12px;border-radius:5px}.navigation__colorPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__colorPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__colorPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__horizontalNavigation .navigationMenu li[data-v-67b314bc],.navigation__horizontalNavigation .navigationMenu ul[data-v-67b314bc]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}", ""]);
 616 | // Exports
 617 | module.exports = exports;
 618 | 
 619 | 
 620 | /***/ }),
 621 | 
 622 | /***/ "fb15":
 623 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 624 | 
 625 | "use strict";
 626 | // ESM COMPAT FLAG
 627 | __webpack_require__.r(__webpack_exports__);
 628 | 
 629 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 630 | // This file is imported into lib/wc client bundles.
 631 | 
 632 | if (typeof window !== 'undefined') {
 633 |   var currentScript = window.document.currentScript
 634 |   if (true) {
 635 |     var getCurrentScript = __webpack_require__("8875")
 636 |     currentScript = getCurrentScript()
 637 | 
 638 |     // for backward compatibility, because previously we directly included the polyfill
 639 |     if (!('currentScript' in document)) {
 640 |       Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
 641 |     }
 642 |   }
 643 | 
 644 |   var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
 645 |   if (src) {
 646 |     __webpack_require__.p = src[1] // eslint-disable-line
 647 |   }
 648 | }
 649 | 
 650 | // Indicate to webpack that this file can be concatenated
 651 | /* harmony default export */ var setPublicPath = (null);
 652 | 
 653 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1ca830e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Paintable.vue?vue&type=template&id=1d81ce36&
 654 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hide)?_c('div',{staticClass:"paintable"},[(!_vm.disableNavigation)?_c('Navigation',{attrs:{"horizontalNavigation":_vm.horizontalNavigation}},[_c('div',{attrs:{"slot":"paintable-navigation-draw"},slot:"paintable-navigation-draw"})]):_vm._e(),_c('canvas',{ref:'canvas-' + _vm.canvasId,staticClass:"canvas back",class:{ active: _vm.isActive || _vm.alwaysOnTop },style:({
 655 |       pointerEvents: !_vm.isActive ? 'none' : 'all',
 656 |       display: !_vm.canvasIsEmpty || _vm.isActive ? 'block' : 'none'
 657 |     }),attrs:{"width":_vm.width,"height":_vm.height}}),_c('canvas',{ref:'temp-canvas-' + _vm.canvasId,staticClass:"canvas",class:{ active: _vm.isActive || _vm.alwaysOnTop },style:({
 658 |       pointerEvents: !_vm.isActive ? 'none' : 'all',
 659 |       display: !_vm.canvasIsEmpty || _vm.isActive ? 'block' : 'none'
 660 |     }),attrs:{"width":_vm.width,"height":_vm.height},on:_vm._d({},[_vm.drawMoveEvent,_vm.drawMove,_vm.drawStartEvent,_vm.drawStart,_vm.drawEndEvent,_vm.drawEnd])}),_c('div',{staticClass:"content"},[_vm._t("default")],2)],1):_c('div',{staticClass:"content"},[_vm._t("default")],2)}
 661 | var staticRenderFns = []
 662 | 
 663 | 
 664 | // CONCATENATED MODULE: ./src/Paintable.vue?vue&type=template&id=1d81ce36&
 665 | 
 666 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1ca830e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Navigation.vue?vue&type=template&id=67b314bc&scoped=true&
 667 | var Navigationvue_type_template_id_67b314bc_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.paintableView.hidePaintableNavigation)?_c('div',{staticClass:"navigation",class:{ navigation__horizontalNavigation: _vm.horizontalNavigation }},[(_vm.isColorPickerOpen)?_c('div',{staticClass:"navigation__colorPicker"},_vm._l((_vm.paintableView.colors),function(color){return _c('span',{key:color,class:[
 668 |         'navigation__colorPickerColor',
 669 |         { selected: _vm.paintableView.currentColor === color }
 670 |       ],style:({ backgroundColor: color }),on:{"click":function($event){return _vm.changeColor(color)}}})}),0):_vm._e(),(_vm.isLineWidthPickerOpen)?_c('div',{staticClass:"navigation__lineWidthPicker"},[_c('label',{attrs:{"for":"navigation__lineWidthPickerRange"}},[_vm._v("("+_vm._s(_vm.paintableView.currentLineWidth)+"px):")]),_c('br'),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.paintableView.currentLineWidth),expression:"paintableView.currentLineWidth"}],attrs:{"id":"navigation__lineWidthPickerRange","type":"range","min":"1","max":"100"},domProps:{"value":(_vm.paintableView.currentLineWidth)},on:{"change":function($event){_vm.isLineWidthPickerOpen = false},"__r":function($event){return _vm.$set(_vm.paintableView, "currentLineWidth", $event.target.value)}}}),_c('div',{staticClass:"navigation__lineWidthPickerDot",style:(_vm.lineWidthStyle)})]):_vm._e(),_c('ul',{staticClass:"navigationMenu",class:{ active: _vm.paintableView.isActive }},_vm._l((_vm.horizontalNavigation ? _vm.navigation.reverse() : _vm.navigation),function(item){return _c('li',{key:item.name,class:'navigationMenu__' + item.name},[(!_vm.horizontalNavigation)?_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}}):_vm._e(),(_vm.paintableView.isActive)?_c('ul',_vm._l((item.subNavigation),function(item){return _c('li',{key:item.name,class:[
 671 |             'navigationMenu__' + item.name,
 672 |             { disabled: item.disabled }
 673 |           ]},[_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}})])}),0):_vm._e(),(_vm.horizontalNavigation)?_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}}):_vm._e()])}),0)]):_vm._e()}
 674 | var Navigationvue_type_template_id_67b314bc_scoped_true_staticRenderFns = []
 675 | 
 676 | 
 677 | // CONCATENATED MODULE: ./src/components/Navigation.vue?vue&type=template&id=67b314bc&scoped=true&
 678 | 
 679 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Navigation.vue?vue&type=script&lang=js&
 680 | //
 681 | //
 682 | //
 683 | //
 684 | //
 685 | //
 686 | //
 687 | //
 688 | //
 689 | //
 690 | //
 691 | //
 692 | //
 693 | //
 694 | //
 695 | //
 696 | //
 697 | //
 698 | //
 699 | //
 700 | //
 701 | //
 702 | //
 703 | //
 704 | //
 705 | //
 706 | //
 707 | //
 708 | //
 709 | //
 710 | //
 711 | //
 712 | //
 713 | //
 714 | //
 715 | //
 716 | //
 717 | //
 718 | //
 719 | //
 720 | //
 721 | //
 722 | //
 723 | //
 724 | //
 725 | //
 726 | //
 727 | //
 728 | //
 729 | //
 730 | //
 731 | //
 732 | //
 733 | //
 734 | //
 735 | //
 736 | //
 737 | //
 738 | //
 739 | //
 740 | //
 741 | //
 742 | //
 743 | //
 744 | //
 745 | //
 746 | //
 747 | //
 748 | //
 749 | //
 750 | /* harmony default export */ var Navigationvue_type_script_lang_js_ = ({
 751 |   name: 'paintable-navigation',
 752 |   props: ['horizontalNavigation'],
 753 | 
 754 |   data() {
 755 |     return {
 756 |       isColorPickerOpen: false,
 757 |       isLineWidthPickerOpen: false,
 758 |       paintableView: this.$parent
 759 |     };
 760 |   },
 761 | 
 762 |   computed: {
 763 |     navigation() {
 764 |       return this.filteredNavigation.map(navigationItem => {
 765 |         if (navigationItem.subNavigation && navigationItem.subNavigation.length > 0) {
 766 |           const navigationItemSubNavigation = this.horizontalNavigation ? navigationItem.subNavigation.reverse() : navigationItem.subNavigation;
 767 |           navigationItem.subNavigation = navigationItemSubNavigation.map(subNavigationItem => {
 768 |             if (this.paintableView.navigation && this.paintableView.navigation[subNavigationItem.name]) {
 769 |               return Object.assign({}, subNavigationItem, this.paintableView.navigation[subNavigationItem.name]);
 770 |             }
 771 | 
 772 |             return subNavigationItem;
 773 |           });
 774 |         }
 775 | 
 776 |         if (this.paintableView.navigation && this.paintableView.navigation[navigationItem.name]) {
 777 |           return Object.assign({}, navigationItem, this.paintableView.navigation[navigationItem.name]);
 778 |         }
 779 | 
 780 |         return navigationItem;
 781 |       });
 782 |     },
 783 | 
 784 |     filteredNavigation() {
 785 |       return [{
 786 |         name: 'draw-save',
 787 |         body: 'draw',
 788 |         activeBody: 'save',
 789 |         isActive: this.paintableView.isActive,
 790 |         click: this.togglePainting,
 791 |         subNavigation: [{
 792 |           name: 'color',
 793 |           body: 'color',
 794 |           disabled: false,
 795 |           show: this.paintableView.colors.length > 0,
 796 |           click: this.openColorPicker
 797 |         }, {
 798 |           name: 'line-width',
 799 |           body: 'line-width',
 800 |           disabled: false,
 801 |           show: this.paintableView.showLineWidth,
 802 |           click: this.openLineWidthPicker
 803 |         }, {
 804 |           name: 'undo',
 805 |           body: 'undo',
 806 |           disabled: !this.paintableView.undoList.length,
 807 |           show: this.paintableView.showUndoRedo,
 808 |           click: this.paintableView.undoDrawingStep
 809 |         }, {
 810 |           name: 'redo',
 811 |           body: 'redo',
 812 |           disabled: !this.paintableView.redoList.length,
 813 |           show: this.paintableView.showUndoRedo,
 814 |           click: this.paintableView.redoDrawingStep
 815 |         }, {
 816 |           name: 'delete',
 817 |           body: 'delete',
 818 |           disabled: false,
 819 |           show: true,
 820 |           click: this.paintableView.clearCanvas
 821 |         }, {
 822 |           name: 'eraser-pencil',
 823 |           body: 'eraser',
 824 |           activeBody: 'pencil',
 825 |           isActive: this.paintableView.isEraserActive,
 826 |           disabled: false,
 827 |           show: true,
 828 |           click: this.toggleEraserAndPencil
 829 |         }, {
 830 |           name: 'cancel',
 831 |           body: 'cancel',
 832 |           disabled: false,
 833 |           show: true,
 834 |           click: this.paintableView.cancelDrawing
 835 |         }].filter(item => item.show)
 836 |       }];
 837 |     },
 838 | 
 839 |     lineWidthStyle() {
 840 |       return {
 841 |         height: this.paintableView.currentLineWidth + 'px',
 842 |         width: this.paintableView.currentLineWidth + 'px',
 843 |         backgroundColor: this.paintableView.currentColor
 844 |       };
 845 |     }
 846 | 
 847 |   },
 848 |   methods: {
 849 |     toggleEraserAndPencil() {
 850 |       this.paintableView.isEraserActive = !this.paintableView.isEraserActive;
 851 |     },
 852 | 
 853 |     openColorPicker() {
 854 |       this.isColorPickerOpen = !this.isColorPickerOpen;
 855 |       this.isLineWidthPickerOpen = false;
 856 |     },
 857 | 
 858 |     openLineWidthPicker() {
 859 |       this.isLineWidthPickerOpen = !this.isLineWidthPickerOpen;
 860 |       this.isColorPickerOpen = false;
 861 |     },
 862 | 
 863 |     /**
 864 |      * Change current drawing color
 865 |      */
 866 |     changeColor(color) {
 867 |       this.paintableView.currentColor = color;
 868 |       this.paintableView.tempCtx.strokeStyle = this.paintableView.currentColor;
 869 |       this.paintableView.ctx.strokeStyle = this.paintableView.currentColor;
 870 |       this.isColorPickerOpen = false;
 871 |     },
 872 | 
 873 |     /**
 874 |      * Toggle painting
 875 |      */
 876 |     togglePainting() {
 877 |       if (this.paintableView.isActive) {
 878 |         this.paintableView.saveCurrentCanvasToStorage();
 879 |       }
 880 | 
 881 |       this.paintableView.isActive = !this.paintableView.isActive;
 882 |       this.isColorPickerOpen = false;
 883 |       this.isLineWidthPickerOpen = false;
 884 |       this.$parent.$emit('toggle-paintable', this.paintableView.isActive);
 885 |     }
 886 | 
 887 |   }
 888 | });
 889 | // CONCATENATED MODULE: ./src/components/Navigation.vue?vue&type=script&lang=js&
 890 |  /* harmony default export */ var components_Navigationvue_type_script_lang_js_ = (Navigationvue_type_script_lang_js_); 
 891 | // EXTERNAL MODULE: ./src/components/Navigation.vue?vue&type=style&index=0&id=67b314bc&scoped=true&lang=css&
 892 | var Navigationvue_type_style_index_0_id_67b314bc_scoped_true_lang_css_ = __webpack_require__("57b0");
 893 | 
 894 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 895 | /* globals __VUE_SSR_CONTEXT__ */
 896 | 
 897 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
 898 | // This module is a runtime utility for cleaner component module output and will
 899 | // be included in the final webpack user bundle.
 900 | 
 901 | function normalizeComponent (
 902 |   scriptExports,
 903 |   render,
 904 |   staticRenderFns,
 905 |   functionalTemplate,
 906 |   injectStyles,
 907 |   scopeId,
 908 |   moduleIdentifier, /* server only */
 909 |   shadowMode /* vue-cli only */
 910 | ) {
 911 |   // Vue.extend constructor export interop
 912 |   var options = typeof scriptExports === 'function'
 913 |     ? scriptExports.options
 914 |     : scriptExports
 915 | 
 916 |   // render functions
 917 |   if (render) {
 918 |     options.render = render
 919 |     options.staticRenderFns = staticRenderFns
 920 |     options._compiled = true
 921 |   }
 922 | 
 923 |   // functional template
 924 |   if (functionalTemplate) {
 925 |     options.functional = true
 926 |   }
 927 | 
 928 |   // scopedId
 929 |   if (scopeId) {
 930 |     options._scopeId = 'data-v-' + scopeId
 931 |   }
 932 | 
 933 |   var hook
 934 |   if (moduleIdentifier) { // server build
 935 |     hook = function (context) {
 936 |       // 2.3 injection
 937 |       context =
 938 |         context || // cached call
 939 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
 940 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
 941 |       // 2.2 with runInNewContext: true
 942 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 943 |         context = __VUE_SSR_CONTEXT__
 944 |       }
 945 |       // inject component styles
 946 |       if (injectStyles) {
 947 |         injectStyles.call(this, context)
 948 |       }
 949 |       // register component module identifier for async chunk inferrence
 950 |       if (context && context._registeredComponents) {
 951 |         context._registeredComponents.add(moduleIdentifier)
 952 |       }
 953 |     }
 954 |     // used by ssr in case component is cached and beforeCreate
 955 |     // never gets called
 956 |     options._ssrRegister = hook
 957 |   } else if (injectStyles) {
 958 |     hook = shadowMode
 959 |       ? function () {
 960 |         injectStyles.call(
 961 |           this,
 962 |           (options.functional ? this.parent : this).$root.$options.shadowRoot
 963 |         )
 964 |       }
 965 |       : injectStyles
 966 |   }
 967 | 
 968 |   if (hook) {
 969 |     if (options.functional) {
 970 |       // for template-only hot-reload because in that case the render fn doesn't
 971 |       // go through the normalizer
 972 |       options._injectStyles = hook
 973 |       // register for functional component in vue file
 974 |       var originalRender = options.render
 975 |       options.render = function renderWithStyleInjection (h, context) {
 976 |         hook.call(context)
 977 |         return originalRender(h, context)
 978 |       }
 979 |     } else {
 980 |       // inject component registration as beforeCreate hook
 981 |       var existing = options.beforeCreate
 982 |       options.beforeCreate = existing
 983 |         ? [].concat(existing, hook)
 984 |         : [hook]
 985 |     }
 986 |   }
 987 | 
 988 |   return {
 989 |     exports: scriptExports,
 990 |     options: options
 991 |   }
 992 | }
 993 | 
 994 | // CONCATENATED MODULE: ./src/components/Navigation.vue
 995 | 
 996 | 
 997 | 
 998 | 
 999 | 
1000 | 
1001 | /* normalize component */
1002 | 
1003 | var component = normalizeComponent(
1004 |   components_Navigationvue_type_script_lang_js_,
1005 |   Navigationvue_type_template_id_67b314bc_scoped_true_render,
1006 |   Navigationvue_type_template_id_67b314bc_scoped_true_staticRenderFns,
1007 |   false,
1008 |   null,
1009 |   "67b314bc",
1010 |   null
1011 |   
1012 | )
1013 | 
1014 | /* harmony default export */ var Navigation = (component.exports);
1015 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Paintable.vue?vue&type=script&lang=js&
1016 | //
1017 | //
1018 | //
1019 | //
1020 | //
1021 | //
1022 | //
1023 | //
1024 | //
1025 | //
1026 | //
1027 | //
1028 | //
1029 | //
1030 | //
1031 | //
1032 | //
1033 | //
1034 | //
1035 | //
1036 | //
1037 | //
1038 | //
1039 | //
1040 | //
1041 | //
1042 | //
1043 | //
1044 | //
1045 | //
1046 | //
1047 | //
1048 | //
1049 | //
1050 | //
1051 | //
1052 | //
1053 | //
1054 | //
1055 | //
1056 | //
1057 | //
1058 | //
1059 | //
1060 | //
1061 | let currentX = 0;
1062 | let currentY = 0;
1063 | 
1064 | /* harmony default export */ var Paintablevue_type_script_lang_js_ = ({
1065 |   name: 'paintable',
1066 |   components: {
1067 |     Navigation: Navigation
1068 |   },
1069 |   props: {
1070 |     factor: {
1071 |       type: Number,
1072 |       default: 1
1073 |     },
1074 |     navigation: {
1075 |       type: Object,
1076 |       default: null
1077 |     },
1078 |     alwaysOnTop: {
1079 |       type: Boolean,
1080 |       default: true
1081 |     },
1082 |     name: {
1083 |       type: String,
1084 |       required: true
1085 |     },
1086 |     width: {
1087 |       type: Number,
1088 |       default: window.innerWidth
1089 |     },
1090 |     height: {
1091 |       type: Number,
1092 |       default: window.innerHeight
1093 |     },
1094 |     hide: {
1095 |       type: Boolean,
1096 |       default: false
1097 |     },
1098 |     threshold: {
1099 |       type: Number,
1100 |       default: 0
1101 |     },
1102 |     showUndoRedo: {
1103 |       type: Boolean,
1104 |       default: true
1105 |     },
1106 |     showLineWidth: {
1107 |       type: Boolean,
1108 |       default: true
1109 |     },
1110 |     lineWidth: {
1111 |       type: Number,
1112 |       default: 5
1113 |     },
1114 |     lineWidthEraser: {
1115 |       type: Number,
1116 |       default: 20
1117 |     },
1118 |     colors: {
1119 |       type: Array,
1120 |       default: () => ['black', '#f00', '#4481c7', 'rgba(255, 235, 59, 0.4)', '#999', 'green']
1121 |     },
1122 |     horizontalNavigation: {
1123 |       type: Boolean,
1124 |       default: false
1125 |     },
1126 |     disableNavigation: {
1127 |       type: Boolean,
1128 |       default: false
1129 |     },
1130 |     active: {
1131 |       type: Boolean,
1132 |       default: false
1133 |     },
1134 |     color: {
1135 |       type: String,
1136 |       default: '#000'
1137 |     },
1138 |     useEraser: {
1139 |       type: Boolean,
1140 |       default: false
1141 |     }
1142 |   },
1143 | 
1144 |   data() {
1145 |     return {
1146 |       currentColor: this.color,
1147 |       canvasIsEmpty: false,
1148 |       canvasId: 0,
1149 |       isEraserActive: this.useEraser,
1150 |       isActive: this.active,
1151 |       pointCoords: [],
1152 |       redoList: [],
1153 |       undoList: [],
1154 |       currentLineWidth: this.isEraserActive ? this.lineWidthEraser : this.lineWidth,
1155 |       tempCanvas: null,
1156 |       tempCtx: null,
1157 |       canvas: null,
1158 |       ctx: null,
1159 |       startedDrawing: false,
1160 |       drawMoveEvent: 'mousemove',
1161 |       drawStartEvent: 'mousedown',
1162 |       drawEndEvent: 'mouseup',
1163 |       isMouse: true,
1164 |       thresholdReached: false
1165 |     };
1166 |   },
1167 | 
1168 |   watch: {
1169 |     isActive: 'init',
1170 |     name: 'init',
1171 | 
1172 |     hide() {
1173 |       this.$nextTick(() => {
1174 |         this.init();
1175 |       });
1176 |     },
1177 | 
1178 |     lineWidth(lineWidth) {
1179 |       this.currentLineWidth = lineWidth;
1180 |     },
1181 | 
1182 |     lineWidthEraser(lineWidth) {
1183 |       this.currentLineWidth = lineWidth;
1184 |     },
1185 | 
1186 |     useEraser(useEraser) {
1187 |       this.isEraserActive = useEraser;
1188 |     },
1189 | 
1190 |     active(isActive) {
1191 |       this.isActive = isActive;
1192 |     },
1193 | 
1194 |     color(color) {
1195 |       this.currentColor = color;
1196 |       this.tempCtx.strokeStyle = this.currentColor;
1197 |       this.ctx.strokeStyle = this.currentColor;
1198 |     },
1199 | 
1200 |     isEraserActive(isActive) {
1201 |       this.currentLineWidth = isActive ? this.lineWidthEraser : this.lineWidth;
1202 |     },
1203 | 
1204 |     currentLineWidth(lineWidth) {
1205 |       this.ctx.lineWidth = lineWidth;
1206 |       this.tempCtx.lineWidth = lineWidth;
1207 |     }
1208 | 
1209 |   },
1210 | 
1211 |   beforeMount() {
1212 |     this.canvasId = Math.round(Math.random() * 1000);
1213 |   },
1214 | 
1215 |   created() {
1216 |     if (this.isTouch) {
1217 |       this.drawMoveEvent = 'touchmove';
1218 |       this.drawStartEvent = 'touchstart';
1219 |       this.drawEndEvent = 'touchend';
1220 |       this.isMouse = false;
1221 |     }
1222 |   },
1223 | 
1224 |   mounted() {
1225 |     this.init();
1226 |   },
1227 | 
1228 |   computed: {
1229 |     /**
1230 |      * Get scaling factor of current device
1231 |      */
1232 |     scalingFactor() {
1233 |       return window.devicePixelRatio || 1;
1234 |     },
1235 | 
1236 |     /**
1237 |      * Check if it is a touch device
1238 |      * thanks to: https://ctrlq.org/code/19616-detect-touch-screen-javascript
1239 |      */
1240 |     isTouch() {
1241 |       return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
1242 |     }
1243 | 
1244 |   },
1245 |   methods: {
1246 |     /**
1247 |      * Cancel current drawing and remove lines
1248 |      */
1249 |     cancelDrawing() {
1250 |       this.loadImageFromStorage();
1251 |       this.isActive = false;
1252 |       this.isColorPickerOpen = false;
1253 |       this.isLineWidthPickerOpen = false;
1254 |     },
1255 | 
1256 |     /**
1257 |      * Set storage item
1258 |      * @param {string} key
1259 |      * @param {string} value
1260 |      */
1261 |     setItem(key, value) {
1262 |       localStorage.setItem(key, value);
1263 |     },
1264 | 
1265 |     /**
1266 |      * Get storage item
1267 |      * @param {string} key
1268 |      */
1269 |     async getItem(key) {
1270 |       return localStorage.getItem(key);
1271 |     },
1272 | 
1273 |     /**
1274 |      * Remove item from storage
1275 |      * @param {string} key
1276 |      */
1277 |     removeItem(key) {
1278 |       localStorage.removeItem(key);
1279 |     },
1280 | 
1281 |     /**
1282 |      * Init paintable component and set all variables
1283 |      */
1284 |     init() {
1285 |       try {
1286 |         this.pointCoords = []; // temporary canvas
1287 | 
1288 |         this.tempCanvas = this.$refs['temp-canvas-' + this.canvasId];
1289 |         this.tempCtx = this.tempCanvas.getContext('2d'); // canvas with drawing
1290 | 
1291 |         this.canvas = this.$refs['canvas-' + this.canvasId];
1292 |         this.ctx = this.canvas.getContext('2d');
1293 |         this.tempCtx.lineCap = 'round';
1294 |         this.ctx.lineCap = 'round';
1295 |         this.tempCtx.lineWidth = this.lineWidth;
1296 |         this.ctx.lineWidth = this.lineWidth;
1297 |         this.tempCtx.strokeStyle = this.currentColor;
1298 |         this.ctx.strokeStyle = this.currentColor;
1299 |         this.setItem(this.name + '-settings', JSON.stringify({
1300 |           width: this.canvas.width,
1301 |           height: this.canvas.height
1302 |         })); // set canvas width and height
1303 | 
1304 |         this.setCanvasSize(); // load image from storage
1305 | 
1306 |         this.loadImageFromStorage();
1307 |         this.$emit('toggle-paintable', this.isActive);
1308 |       } catch (err) {// this.hide = true;
1309 |         // this.hidePaintableNavigation = true;
1310 |       }
1311 |     },
1312 | 
1313 |     //--------------------------------------------------
1314 | 
1315 |     /**
1316 |      * Undo drawed line
1317 |      */
1318 |     undoDrawingStep() {
1319 |       this.restoreCanvasState(this.undoList, this.redoList);
1320 |     },
1321 | 
1322 |     /**
1323 |      * Redo drawed line
1324 |      */
1325 |     redoDrawingStep() {
1326 |       this.restoreCanvasState(this.redoList, this.undoList);
1327 |     },
1328 | 
1329 |     /**
1330 |      * Restore previous image
1331 |      */
1332 |     restoreCanvasState(pop, push) {
1333 |       this.ctx.globalCompositeOperation = 'source-over';
1334 | 
1335 |       if (pop.length) {
1336 |         const restore_state = pop.pop();
1337 |         this.saveCurrentCanvasState(this.canvas, push, true);
1338 |         this.loadImageFromStorage(restore_state);
1339 |       }
1340 |     },
1341 | 
1342 |     /**
1343 |      * Save the current canvas state an push it to undo- or redolist
1344 |      */
1345 |     saveCurrentCanvasState(canvas, list, keepRedo) {
1346 |       keepRedo = keepRedo || false;
1347 | 
1348 |       if (!keepRedo) {
1349 |         this.redoList = [];
1350 |       }
1351 | 
1352 |       (list || this.undoList).push(canvas.toDataURL('image/png'));
1353 |     },
1354 | 
1355 |     //-------------------------------------------------------------------------
1356 | 
1357 |     /**
1358 |      * Get base64 from local storage and load it into canvas
1359 |      */
1360 |     async loadImageFromStorage(image) {
1361 |       this.clearCanvas();
1362 |       const base64Image = image || (await this.getItem(this.name));
1363 | 
1364 |       if (base64Image) {
1365 |         let image = new Image();
1366 | 
1367 |         image.onload = () => {
1368 |           this.ctx.drawImage(image, 0, 0);
1369 |           this.canvasIsEmpty = this.isCanvasBlank();
1370 |         };
1371 | 
1372 |         image.src = base64Image; // eslint-disable-line
1373 |       } else {
1374 |         this.canvasIsEmpty = this.isCanvasBlank();
1375 |       }
1376 |     },
1377 | 
1378 |     /**
1379 |      * Set current canvas size
1380 |      */
1381 |     setCanvasSize() {
1382 |       // this.width = window.innerWidth;
1383 |       // this.height = window.innerHeight;
1384 |       currentX = 0;
1385 |       currentY = 0;
1386 |     },
1387 | 
1388 |     /**
1389 |      * Clear complete canvas
1390 |      */
1391 |     clearCanvas() {
1392 |       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1393 |     },
1394 | 
1395 |     isCanvasBlank() {
1396 |       this.ctx.globalCompositeOperation = 'source-over';
1397 |       const blank = document.createElement('canvas');
1398 |       const blankCtx = blank.getContext('2d');
1399 |       blankCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1400 |       blank.width = this.canvas.width;
1401 |       blank.height = this.canvas.height;
1402 |       return blank.toDataURL() === this.canvas.toDataURL();
1403 |     },
1404 | 
1405 |     /**
1406 |      * Check first, if canvas is empty.
1407 |      * If its not empty save it to the storage.
1408 |      */
1409 |     saveCurrentCanvasToStorage() {
1410 |       // reset to pencil
1411 |       this.isEraserActive = false;
1412 | 
1413 |       if (this.isCanvasBlank()) {
1414 |         this.removeItem(this.name);
1415 |         this.removeItem(this.name + '-settings');
1416 |       } else {
1417 |         this.setItem(this.name, this.canvas.toDataURL('image/png'));
1418 |         this.setItem(this.name + '-settings', JSON.stringify({
1419 |           width: this.canvas.width,
1420 |           height: this.canvas.height
1421 |         }));
1422 |       }
1423 | 
1424 |       this.undoList = [];
1425 |       this.redoList = [];
1426 |       this.canvasIsEmpty = this.isCanvasBlank();
1427 |     },
1428 | 
1429 |     //-------------------------------------------------------------------------
1430 | 
1431 |     /**
1432 |      * Start drawing lines
1433 |      */
1434 |     drawStart(e) {
1435 |       e.preventDefault();
1436 |       this.thresholdReached = false;
1437 | 
1438 |       if (this.isActive) {
1439 |         this.isLineWidthPickerOpen = false;
1440 |         this.isColorPickerOpen = false;
1441 |         this.startedDrawing = true;
1442 |         this.saveCurrentCanvasState(this.canvas);
1443 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
1444 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
1445 | 
1446 |         if (x && y) {
1447 |           currentX = (x - this.tempCanvas.getBoundingClientRect().left) * this.factor;
1448 |           currentY = (y - this.tempCanvas.getBoundingClientRect().top) * this.factor;
1449 |           this.pointCoords.push({
1450 |             x: currentX,
1451 |             y: currentY
1452 |           });
1453 |         }
1454 | 
1455 |         this.tempCtx.globalCompositeOperation = 'source-over';
1456 |         this.ctx.globalCompositeOperation = this.isEraserActive ? 'destination-out' : 'source-over';
1457 |       }
1458 |     },
1459 | 
1460 |     /**
1461 |      * End of drawing a line
1462 |      */
1463 |     drawEnd() {
1464 |       if (this.isActive) {
1465 |         this.drawLine(this.ctx);
1466 |         this.startedDrawing = false;
1467 |         this.pointCoords = [];
1468 |         this.thresholdReached = false;
1469 |       }
1470 |     },
1471 | 
1472 |     /**
1473 |      * Generate line from points array
1474 |      */
1475 |     drawLine(context) {
1476 |       this.tempCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1477 |       let p1 = this.pointCoords[0];
1478 |       let p2 = this.pointCoords[1];
1479 | 
1480 |       if (p1 && p2 && p1.x && p1.y) {
1481 |         context.beginPath();
1482 |         context.moveTo(p1.x, p1.y);
1483 | 
1484 |         for (let i = 1, len = this.pointCoords.length; i < len; i++) {
1485 |           let midPoint = {
1486 |             x: p1.x + (p2.x - p1.x) / 2,
1487 |             y: p1.y + (p2.y - p1.y) / 2
1488 |           };
1489 |           context.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
1490 |           p1 = this.pointCoords[i];
1491 |           p2 = this.pointCoords[i + 1];
1492 |         }
1493 | 
1494 |         context.lineTo(p1.x, p1.y);
1495 |         context.stroke();
1496 |         context.closePath();
1497 |       }
1498 |     },
1499 | 
1500 |     /**
1501 |      * Draw line on move and add current position to an array
1502 |      */
1503 |     drawMove(e) {
1504 |       e.preventDefault();
1505 | 
1506 |       if (this.isActive && this.startedDrawing) {
1507 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
1508 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
1509 | 
1510 |         if (x && y) {
1511 |           currentX = x * this.factor - this.tempCanvas.getBoundingClientRect().left;
1512 |           currentY = y * this.factor - this.tempCanvas.getBoundingClientRect().top;
1513 |           this.pointCoords.push({
1514 |             x: currentX,
1515 |             y: currentY
1516 |           });
1517 | 
1518 |           if (this.threshold) {
1519 |             const distanceFirstAndLastPoint = Math.sqrt(Math.pow(this.pointCoords[this.pointCoords.length - 1].y - this.pointCoords[0].y, 2) + Math.pow(this.pointCoords[this.pointCoords.length - 1].x - this.pointCoords[0].x, 2));
1520 | 
1521 |             if (distanceFirstAndLastPoint > this.threshold) {
1522 |               if (!this.thresholdReached) {
1523 |                 this.thresholdReached = true;
1524 |                 this.$emit('thresholdReached');
1525 |               }
1526 |             }
1527 |           }
1528 | 
1529 |           this.drawLine(!this.isEraserActive ? this.tempCtx : this.ctx);
1530 |         }
1531 |       }
1532 |     }
1533 | 
1534 |   }
1535 | });
1536 | // CONCATENATED MODULE: ./src/Paintable.vue?vue&type=script&lang=js&
1537 |  /* harmony default export */ var src_Paintablevue_type_script_lang_js_ = (Paintablevue_type_script_lang_js_); 
1538 | // EXTERNAL MODULE: ./src/Paintable.vue?vue&type=style&index=0&lang=css&
1539 | var Paintablevue_type_style_index_0_lang_css_ = __webpack_require__("4226");
1540 | 
1541 | // CONCATENATED MODULE: ./src/Paintable.vue
1542 | 
1543 | 
1544 | 
1545 | 
1546 | 
1547 | 
1548 | /* normalize component */
1549 | 
1550 | var Paintable_component = normalizeComponent(
1551 |   src_Paintablevue_type_script_lang_js_,
1552 |   render,
1553 |   staticRenderFns,
1554 |   false,
1555 |   null,
1556 |   null,
1557 |   null
1558 |   
1559 | )
1560 | 
1561 | /* harmony default export */ var Paintable = (Paintable_component.exports);
1562 | // CONCATENATED MODULE: ./src/plugin.js
1563 | 
1564 | const PaintablePlugin = {
1565 |   install(Vue, options) {
1566 |     if (options && options.setItem) {
1567 |       Paintable.methods.setItem = options.setItem;
1568 |     }
1569 | 
1570 |     if (options && options.getItem) {
1571 |       Paintable.methods.getItem = options.getItem;
1572 |     }
1573 | 
1574 |     if (options && options.removeItem) {
1575 |       Paintable.methods.removeItem = options.removeItem;
1576 |     }
1577 | 
1578 |     Vue.component('paintable', Paintable);
1579 |   }
1580 | 
1581 | };
1582 | /* harmony default export */ var src_plugin = (PaintablePlugin);
1583 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
1584 | 
1585 | 
1586 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_plugin);
1587 | 
1588 | 
1589 | 
1590 | /***/ })
1591 | 
1592 | /******/ });


--------------------------------------------------------------------------------
/dist/paintable.umd.js:
--------------------------------------------------------------------------------
   1 | (function webpackUniversalModuleDefinition(root, factory) {
   2 | 	if(typeof exports === 'object' && typeof module === 'object')
   3 | 		module.exports = factory();
   4 | 	else if(typeof define === 'function' && define.amd)
   5 | 		define([], factory);
   6 | 	else if(typeof exports === 'object')
   7 | 		exports["paintable"] = factory();
   8 | 	else
   9 | 		root["paintable"] = factory();
  10 | })((typeof self !== 'undefined' ? self : this), function() {
  11 | return /******/ (function(modules) { // webpackBootstrap
  12 | /******/ 	// The module cache
  13 | /******/ 	var installedModules = {};
  14 | /******/
  15 | /******/ 	// The require function
  16 | /******/ 	function __webpack_require__(moduleId) {
  17 | /******/
  18 | /******/ 		// Check if module is in cache
  19 | /******/ 		if(installedModules[moduleId]) {
  20 | /******/ 			return installedModules[moduleId].exports;
  21 | /******/ 		}
  22 | /******/ 		// Create a new module (and put it into the cache)
  23 | /******/ 		var module = installedModules[moduleId] = {
  24 | /******/ 			i: moduleId,
  25 | /******/ 			l: false,
  26 | /******/ 			exports: {}
  27 | /******/ 		};
  28 | /******/
  29 | /******/ 		// Execute the module function
  30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31 | /******/
  32 | /******/ 		// Flag the module as loaded
  33 | /******/ 		module.l = true;
  34 | /******/
  35 | /******/ 		// Return the exports of the module
  36 | /******/ 		return module.exports;
  37 | /******/ 	}
  38 | /******/
  39 | /******/
  40 | /******/ 	// expose the modules object (__webpack_modules__)
  41 | /******/ 	__webpack_require__.m = modules;
  42 | /******/
  43 | /******/ 	// expose the module cache
  44 | /******/ 	__webpack_require__.c = installedModules;
  45 | /******/
  46 | /******/ 	// define getter function for harmony exports
  47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
  48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
  49 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
  50 | /******/ 		}
  51 | /******/ 	};
  52 | /******/
  53 | /******/ 	// define __esModule on exports
  54 | /******/ 	__webpack_require__.r = function(exports) {
  55 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  56 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  57 | /******/ 		}
  58 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
  59 | /******/ 	};
  60 | /******/
  61 | /******/ 	// create a fake namespace object
  62 | /******/ 	// mode & 1: value is a module id, require it
  63 | /******/ 	// mode & 2: merge all properties of value into the ns
  64 | /******/ 	// mode & 4: return value when already ns object
  65 | /******/ 	// mode & 8|1: behave like require
  66 | /******/ 	__webpack_require__.t = function(value, mode) {
  67 | /******/ 		if(mode & 1) value = __webpack_require__(value);
  68 | /******/ 		if(mode & 8) return value;
  69 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  70 | /******/ 		var ns = Object.create(null);
  71 | /******/ 		__webpack_require__.r(ns);
  72 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  73 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  74 | /******/ 		return ns;
  75 | /******/ 	};
  76 | /******/
  77 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
  78 | /******/ 	__webpack_require__.n = function(module) {
  79 | /******/ 		var getter = module && module.__esModule ?
  80 | /******/ 			function getDefault() { return module['default']; } :
  81 | /******/ 			function getModuleExports() { return module; };
  82 | /******/ 		__webpack_require__.d(getter, 'a', getter);
  83 | /******/ 		return getter;
  84 | /******/ 	};
  85 | /******/
  86 | /******/ 	// Object.prototype.hasOwnProperty.call
  87 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  88 | /******/
  89 | /******/ 	// __webpack_public_path__
  90 | /******/ 	__webpack_require__.p = "";
  91 | /******/
  92 | /******/
  93 | /******/ 	// Load entry module and return exports
  94 | /******/ 	return __webpack_require__(__webpack_require__.s = "fb15");
  95 | /******/ })
  96 | /************************************************************************/
  97 | /******/ ({
  98 | 
  99 | /***/ "2443":
 100 | /***/ (function(module, exports, __webpack_require__) {
 101 | 
 102 | // style-loader: Adds some css to the DOM by adding a <style> tag
 103 | 
 104 | // load the styles
 105 | var content = __webpack_require__("9043");
 106 | if(typeof content === 'string') content = [[module.i, content, '']];
 107 | if(content.locals) module.exports = content.locals;
 108 | // add the styles to the DOM
 109 | var add = __webpack_require__("499e").default
 110 | var update = add("9ee9b9f6", content, true, {"sourceMap":false,"shadowMode":false});
 111 | 
 112 | /***/ }),
 113 | 
 114 | /***/ "24fb":
 115 | /***/ (function(module, exports, __webpack_require__) {
 116 | 
 117 | "use strict";
 118 | 
 119 | 
 120 | /*
 121 |   MIT License http://www.opensource.org/licenses/mit-license.php
 122 |   Author Tobias Koppers @sokra
 123 | */
 124 | // css base code, injected by the css-loader
 125 | // eslint-disable-next-line func-names
 126 | module.exports = function (useSourceMap) {
 127 |   var list = []; // return the list of modules as css string
 128 | 
 129 |   list.toString = function toString() {
 130 |     return this.map(function (item) {
 131 |       var content = cssWithMappingToString(item, useSourceMap);
 132 | 
 133 |       if (item[2]) {
 134 |         return "@media ".concat(item[2], " {").concat(content, "}");
 135 |       }
 136 | 
 137 |       return content;
 138 |     }).join('');
 139 |   }; // import a list of modules into the list
 140 |   // eslint-disable-next-line func-names
 141 | 
 142 | 
 143 |   list.i = function (modules, mediaQuery, dedupe) {
 144 |     if (typeof modules === 'string') {
 145 |       // eslint-disable-next-line no-param-reassign
 146 |       modules = [[null, modules, '']];
 147 |     }
 148 | 
 149 |     var alreadyImportedModules = {};
 150 | 
 151 |     if (dedupe) {
 152 |       for (var i = 0; i < this.length; i++) {
 153 |         // eslint-disable-next-line prefer-destructuring
 154 |         var id = this[i][0];
 155 | 
 156 |         if (id != null) {
 157 |           alreadyImportedModules[id] = true;
 158 |         }
 159 |       }
 160 |     }
 161 | 
 162 |     for (var _i = 0; _i < modules.length; _i++) {
 163 |       var item = [].concat(modules[_i]);
 164 | 
 165 |       if (dedupe && alreadyImportedModules[item[0]]) {
 166 |         // eslint-disable-next-line no-continue
 167 |         continue;
 168 |       }
 169 | 
 170 |       if (mediaQuery) {
 171 |         if (!item[2]) {
 172 |           item[2] = mediaQuery;
 173 |         } else {
 174 |           item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
 175 |         }
 176 |       }
 177 | 
 178 |       list.push(item);
 179 |     }
 180 |   };
 181 | 
 182 |   return list;
 183 | };
 184 | 
 185 | function cssWithMappingToString(item, useSourceMap) {
 186 |   var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
 187 | 
 188 |   var cssMapping = item[3];
 189 | 
 190 |   if (!cssMapping) {
 191 |     return content;
 192 |   }
 193 | 
 194 |   if (useSourceMap && typeof btoa === 'function') {
 195 |     var sourceMapping = toComment(cssMapping);
 196 |     var sourceURLs = cssMapping.sources.map(function (source) {
 197 |       return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
 198 |     });
 199 |     return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
 200 |   }
 201 | 
 202 |   return [content].join('\n');
 203 | } // Adapted from convert-source-map (MIT)
 204 | 
 205 | 
 206 | function toComment(sourceMap) {
 207 |   // eslint-disable-next-line no-undef
 208 |   var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
 209 |   var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
 210 |   return "/*# ".concat(data, " */");
 211 | }
 212 | 
 213 | /***/ }),
 214 | 
 215 | /***/ "4226":
 216 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 217 | 
 218 | "use strict";
 219 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("4839");
 220 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Paintable_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
 221 | /* unused harmony reexport * */
 222 | 
 223 | 
 224 | /***/ }),
 225 | 
 226 | /***/ "4839":
 227 | /***/ (function(module, exports, __webpack_require__) {
 228 | 
 229 | // style-loader: Adds some css to the DOM by adding a <style> tag
 230 | 
 231 | // load the styles
 232 | var content = __webpack_require__("4979");
 233 | if(typeof content === 'string') content = [[module.i, content, '']];
 234 | if(content.locals) module.exports = content.locals;
 235 | // add the styles to the DOM
 236 | var add = __webpack_require__("499e").default
 237 | var update = add("3368f113", content, true, {"sourceMap":false,"shadowMode":false});
 238 | 
 239 | /***/ }),
 240 | 
 241 | /***/ "4979":
 242 | /***/ (function(module, exports, __webpack_require__) {
 243 | 
 244 | // Imports
 245 | var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
 246 | exports = ___CSS_LOADER_API_IMPORT___(false);
 247 | // Module
 248 | exports.push([module.i, ".paintable,body{position:fixed}.paintable{overflow:hidden;height:100%;width:100%;-webkit-transform:scale(1);transform:scale(1)}.paintable.active{z-index:0}.paintable .canvas{position:relative;background-color:transparent;z-index:-1;position:absolute;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none}.paintable .canvas.active{z-index:1000}.paintable .canvas.active.back{z-index:999}", ""]);
 249 | // Exports
 250 | module.exports = exports;
 251 | 
 252 | 
 253 | /***/ }),
 254 | 
 255 | /***/ "499e":
 256 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 257 | 
 258 | "use strict";
 259 | // ESM COMPAT FLAG
 260 | __webpack_require__.r(__webpack_exports__);
 261 | 
 262 | // EXPORTS
 263 | __webpack_require__.d(__webpack_exports__, "default", function() { return /* binding */ addStylesClient; });
 264 | 
 265 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
 266 | /**
 267 |  * Translates the list format produced by css-loader into something
 268 |  * easier to manipulate.
 269 |  */
 270 | function listToStyles (parentId, list) {
 271 |   var styles = []
 272 |   var newStyles = {}
 273 |   for (var i = 0; i < list.length; i++) {
 274 |     var item = list[i]
 275 |     var id = item[0]
 276 |     var css = item[1]
 277 |     var media = item[2]
 278 |     var sourceMap = item[3]
 279 |     var part = {
 280 |       id: parentId + ':' + i,
 281 |       css: css,
 282 |       media: media,
 283 |       sourceMap: sourceMap
 284 |     }
 285 |     if (!newStyles[id]) {
 286 |       styles.push(newStyles[id] = { id: id, parts: [part] })
 287 |     } else {
 288 |       newStyles[id].parts.push(part)
 289 |     }
 290 |   }
 291 |   return styles
 292 | }
 293 | 
 294 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
 295 | /*
 296 |   MIT License http://www.opensource.org/licenses/mit-license.php
 297 |   Author Tobias Koppers @sokra
 298 |   Modified by Evan You @yyx990803
 299 | */
 300 | 
 301 | 
 302 | 
 303 | var hasDocument = typeof document !== 'undefined'
 304 | 
 305 | if (typeof DEBUG !== 'undefined' && DEBUG) {
 306 |   if (!hasDocument) {
 307 |     throw new Error(
 308 |     'vue-style-loader cannot be used in a non-browser environment. ' +
 309 |     "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
 310 |   ) }
 311 | }
 312 | 
 313 | /*
 314 | type StyleObject = {
 315 |   id: number;
 316 |   parts: Array<StyleObjectPart>
 317 | }
 318 | 
 319 | type StyleObjectPart = {
 320 |   css: string;
 321 |   media: string;
 322 |   sourceMap: ?string
 323 | }
 324 | */
 325 | 
 326 | var stylesInDom = {/*
 327 |   [id: number]: {
 328 |     id: number,
 329 |     refs: number,
 330 |     parts: Array<(obj?: StyleObjectPart) => void>
 331 |   }
 332 | */}
 333 | 
 334 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
 335 | var singletonElement = null
 336 | var singletonCounter = 0
 337 | var isProduction = false
 338 | var noop = function () {}
 339 | var options = null
 340 | var ssrIdKey = 'data-vue-ssr-id'
 341 | 
 342 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 343 | // tags it will allow on a page
 344 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 345 | 
 346 | function addStylesClient (parentId, list, _isProduction, _options) {
 347 |   isProduction = _isProduction
 348 | 
 349 |   options = _options || {}
 350 | 
 351 |   var styles = listToStyles(parentId, list)
 352 |   addStylesToDom(styles)
 353 | 
 354 |   return function update (newList) {
 355 |     var mayRemove = []
 356 |     for (var i = 0; i < styles.length; i++) {
 357 |       var item = styles[i]
 358 |       var domStyle = stylesInDom[item.id]
 359 |       domStyle.refs--
 360 |       mayRemove.push(domStyle)
 361 |     }
 362 |     if (newList) {
 363 |       styles = listToStyles(parentId, newList)
 364 |       addStylesToDom(styles)
 365 |     } else {
 366 |       styles = []
 367 |     }
 368 |     for (var i = 0; i < mayRemove.length; i++) {
 369 |       var domStyle = mayRemove[i]
 370 |       if (domStyle.refs === 0) {
 371 |         for (var j = 0; j < domStyle.parts.length; j++) {
 372 |           domStyle.parts[j]()
 373 |         }
 374 |         delete stylesInDom[domStyle.id]
 375 |       }
 376 |     }
 377 |   }
 378 | }
 379 | 
 380 | function addStylesToDom (styles /* Array<StyleObject> */) {
 381 |   for (var i = 0; i < styles.length; i++) {
 382 |     var item = styles[i]
 383 |     var domStyle = stylesInDom[item.id]
 384 |     if (domStyle) {
 385 |       domStyle.refs++
 386 |       for (var j = 0; j < domStyle.parts.length; j++) {
 387 |         domStyle.parts[j](item.parts[j])
 388 |       }
 389 |       for (; j < item.parts.length; j++) {
 390 |         domStyle.parts.push(addStyle(item.parts[j]))
 391 |       }
 392 |       if (domStyle.parts.length > item.parts.length) {
 393 |         domStyle.parts.length = item.parts.length
 394 |       }
 395 |     } else {
 396 |       var parts = []
 397 |       for (var j = 0; j < item.parts.length; j++) {
 398 |         parts.push(addStyle(item.parts[j]))
 399 |       }
 400 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
 401 |     }
 402 |   }
 403 | }
 404 | 
 405 | function createStyleElement () {
 406 |   var styleElement = document.createElement('style')
 407 |   styleElement.type = 'text/css'
 408 |   head.appendChild(styleElement)
 409 |   return styleElement
 410 | }
 411 | 
 412 | function addStyle (obj /* StyleObjectPart */) {
 413 |   var update, remove
 414 |   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 415 | 
 416 |   if (styleElement) {
 417 |     if (isProduction) {
 418 |       // has SSR styles and in production mode.
 419 |       // simply do nothing.
 420 |       return noop
 421 |     } else {
 422 |       // has SSR styles but in dev mode.
 423 |       // for some reason Chrome can't handle source map in server-rendered
 424 |       // style tags - source maps in <style> only works if the style tag is
 425 |       // created and inserted dynamically. So we remove the server rendered
 426 |       // styles and inject new ones.
 427 |       styleElement.parentNode.removeChild(styleElement)
 428 |     }
 429 |   }
 430 | 
 431 |   if (isOldIE) {
 432 |     // use singleton mode for IE9.
 433 |     var styleIndex = singletonCounter++
 434 |     styleElement = singletonElement || (singletonElement = createStyleElement())
 435 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
 436 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
 437 |   } else {
 438 |     // use multi-style-tag mode in all other cases
 439 |     styleElement = createStyleElement()
 440 |     update = applyToTag.bind(null, styleElement)
 441 |     remove = function () {
 442 |       styleElement.parentNode.removeChild(styleElement)
 443 |     }
 444 |   }
 445 | 
 446 |   update(obj)
 447 | 
 448 |   return function updateStyle (newObj /* StyleObjectPart */) {
 449 |     if (newObj) {
 450 |       if (newObj.css === obj.css &&
 451 |           newObj.media === obj.media &&
 452 |           newObj.sourceMap === obj.sourceMap) {
 453 |         return
 454 |       }
 455 |       update(obj = newObj)
 456 |     } else {
 457 |       remove()
 458 |     }
 459 |   }
 460 | }
 461 | 
 462 | var replaceText = (function () {
 463 |   var textStore = []
 464 | 
 465 |   return function (index, replacement) {
 466 |     textStore[index] = replacement
 467 |     return textStore.filter(Boolean).join('\n')
 468 |   }
 469 | })()
 470 | 
 471 | function applyToSingletonTag (styleElement, index, remove, obj) {
 472 |   var css = remove ? '' : obj.css
 473 | 
 474 |   if (styleElement.styleSheet) {
 475 |     styleElement.styleSheet.cssText = replaceText(index, css)
 476 |   } else {
 477 |     var cssNode = document.createTextNode(css)
 478 |     var childNodes = styleElement.childNodes
 479 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
 480 |     if (childNodes.length) {
 481 |       styleElement.insertBefore(cssNode, childNodes[index])
 482 |     } else {
 483 |       styleElement.appendChild(cssNode)
 484 |     }
 485 |   }
 486 | }
 487 | 
 488 | function applyToTag (styleElement, obj) {
 489 |   var css = obj.css
 490 |   var media = obj.media
 491 |   var sourceMap = obj.sourceMap
 492 | 
 493 |   if (media) {
 494 |     styleElement.setAttribute('media', media)
 495 |   }
 496 |   if (options.ssrId) {
 497 |     styleElement.setAttribute(ssrIdKey, obj.id)
 498 |   }
 499 | 
 500 |   if (sourceMap) {
 501 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
 502 |     // this makes source maps inside style tags work properly in Chrome
 503 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
 504 |     // http://stackoverflow.com/a/26603875
 505 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
 506 |   }
 507 | 
 508 |   if (styleElement.styleSheet) {
 509 |     styleElement.styleSheet.cssText = css
 510 |   } else {
 511 |     while (styleElement.firstChild) {
 512 |       styleElement.removeChild(styleElement.firstChild)
 513 |     }
 514 |     styleElement.appendChild(document.createTextNode(css))
 515 |   }
 516 | }
 517 | 
 518 | 
 519 | /***/ }),
 520 | 
 521 | /***/ "57b0":
 522 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 523 | 
 524 | "use strict";
 525 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("2443");
 526 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Navigation_vue_vue_type_style_index_0_id_67b314bc_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
 527 | /* unused harmony reexport * */
 528 | 
 529 | 
 530 | /***/ }),
 531 | 
 532 | /***/ "8875":
 533 | /***/ (function(module, exports, __webpack_require__) {
 534 | 
 535 | var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// addapted from the document.currentScript polyfill by Adam Miller
 536 | // MIT license
 537 | // source: https://github.com/amiller-gh/currentScript-polyfill
 538 | 
 539 | // added support for Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1620505
 540 | 
 541 | (function (root, factory) {
 542 |   if (true) {
 543 |     !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 544 | 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 545 | 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 546 | 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
 547 |   } else {}
 548 | }(typeof self !== 'undefined' ? self : this, function () {
 549 |   function getCurrentScript () {
 550 |     var descriptor = Object.getOwnPropertyDescriptor(document, 'currentScript')
 551 |     // for chrome
 552 |     if (!descriptor && 'currentScript' in document && document.currentScript) {
 553 |       return document.currentScript
 554 |     }
 555 | 
 556 |     // for other browsers with native support for currentScript
 557 |     if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
 558 |       return document.currentScript
 559 |     }
 560 |   
 561 |     // IE 8-10 support script readyState
 562 |     // IE 11+ & Firefox support stack trace
 563 |     try {
 564 |       throw new Error();
 565 |     }
 566 |     catch (err) {
 567 |       // Find the second match for the "at" string to get file src url from stack.
 568 |       var ieStackRegExp = /.*at [^(]*\((.*):(.+):(.+)\)$/ig,
 569 |         ffStackRegExp = /@([^@]*):(\d+):(\d+)\s*$/ig,
 570 |         stackDetails = ieStackRegExp.exec(err.stack) || ffStackRegExp.exec(err.stack),
 571 |         scriptLocation = (stackDetails && stackDetails[1]) || false,
 572 |         line = (stackDetails && stackDetails[2]) || false,
 573 |         currentLocation = document.location.href.replace(document.location.hash, ''),
 574 |         pageSource,
 575 |         inlineScriptSourceRegExp,
 576 |         inlineScriptSource,
 577 |         scripts = document.getElementsByTagName('script'); // Live NodeList collection
 578 |   
 579 |       if (scriptLocation === currentLocation) {
 580 |         pageSource = document.documentElement.outerHTML;
 581 |         inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
 582 |         inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
 583 |       }
 584 |   
 585 |       for (var i = 0; i < scripts.length; i++) {
 586 |         // If ready state is interactive, return the script tag
 587 |         if (scripts[i].readyState === 'interactive') {
 588 |           return scripts[i];
 589 |         }
 590 |   
 591 |         // If src matches, return the script tag
 592 |         if (scripts[i].src === scriptLocation) {
 593 |           return scripts[i];
 594 |         }
 595 |   
 596 |         // If inline source matches, return the script tag
 597 |         if (
 598 |           scriptLocation === currentLocation &&
 599 |           scripts[i].innerHTML &&
 600 |           scripts[i].innerHTML.trim() === inlineScriptSource
 601 |         ) {
 602 |           return scripts[i];
 603 |         }
 604 |       }
 605 |   
 606 |       // If no match, return null
 607 |       return null;
 608 |     }
 609 |   };
 610 | 
 611 |   return getCurrentScript
 612 | }));
 613 | 
 614 | 
 615 | /***/ }),
 616 | 
 617 | /***/ "9043":
 618 | /***/ (function(module, exports, __webpack_require__) {
 619 | 
 620 | // Imports
 621 | var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
 622 | exports = ___CSS_LOADER_API_IMPORT___(false);
 623 | // Module
 624 | exports.push([module.i, ".navigation[data-v-67b314bc]{position:fixed;right:20px;top:20px;z-index:1005;background-color:#333;border-radius:5px;color:#fff}.navigation .navigationMenu[data-v-67b314bc],.navigation .navigationMenu ul[data-v-67b314bc]{list-style:none;padding:0;margin:0}.navigation .navigationMenu li>div[data-v-67b314bc]{cursor:pointer;padding:12px}.navigation .navigationMenu li.disabled[data-v-67b314bc]{opacity:.5}.navigation__lineWidthPicker[data-v-67b314bc]{background:#333;position:absolute;left:-225px;top:0;padding:12px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.navigation__lineWidthPickerDot[data-v-67b314bc]{margin-top:10px;border-radius:100%}.navigation__lineWidthPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__lineWidthPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__lineWidthPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__colorPicker[data-v-67b314bc]{background:#333;position:absolute;left:-60px;top:0;padding:12px;border-radius:5px}.navigation__colorPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__colorPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__colorPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__horizontalNavigation .navigationMenu li[data-v-67b314bc],.navigation__horizontalNavigation .navigationMenu ul[data-v-67b314bc]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}", ""]);
 625 | // Exports
 626 | module.exports = exports;
 627 | 
 628 | 
 629 | /***/ }),
 630 | 
 631 | /***/ "fb15":
 632 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 633 | 
 634 | "use strict";
 635 | // ESM COMPAT FLAG
 636 | __webpack_require__.r(__webpack_exports__);
 637 | 
 638 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 639 | // This file is imported into lib/wc client bundles.
 640 | 
 641 | if (typeof window !== 'undefined') {
 642 |   var currentScript = window.document.currentScript
 643 |   if (true) {
 644 |     var getCurrentScript = __webpack_require__("8875")
 645 |     currentScript = getCurrentScript()
 646 | 
 647 |     // for backward compatibility, because previously we directly included the polyfill
 648 |     if (!('currentScript' in document)) {
 649 |       Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
 650 |     }
 651 |   }
 652 | 
 653 |   var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
 654 |   if (src) {
 655 |     __webpack_require__.p = src[1] // eslint-disable-line
 656 |   }
 657 | }
 658 | 
 659 | // Indicate to webpack that this file can be concatenated
 660 | /* harmony default export */ var setPublicPath = (null);
 661 | 
 662 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1ca830e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Paintable.vue?vue&type=template&id=1d81ce36&
 663 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hide)?_c('div',{staticClass:"paintable"},[(!_vm.disableNavigation)?_c('Navigation',{attrs:{"horizontalNavigation":_vm.horizontalNavigation}},[_c('div',{attrs:{"slot":"paintable-navigation-draw"},slot:"paintable-navigation-draw"})]):_vm._e(),_c('canvas',{ref:'canvas-' + _vm.canvasId,staticClass:"canvas back",class:{ active: _vm.isActive || _vm.alwaysOnTop },style:({
 664 |       pointerEvents: !_vm.isActive ? 'none' : 'all',
 665 |       display: !_vm.canvasIsEmpty || _vm.isActive ? 'block' : 'none'
 666 |     }),attrs:{"width":_vm.width,"height":_vm.height}}),_c('canvas',{ref:'temp-canvas-' + _vm.canvasId,staticClass:"canvas",class:{ active: _vm.isActive || _vm.alwaysOnTop },style:({
 667 |       pointerEvents: !_vm.isActive ? 'none' : 'all',
 668 |       display: !_vm.canvasIsEmpty || _vm.isActive ? 'block' : 'none'
 669 |     }),attrs:{"width":_vm.width,"height":_vm.height},on:_vm._d({},[_vm.drawMoveEvent,_vm.drawMove,_vm.drawStartEvent,_vm.drawStart,_vm.drawEndEvent,_vm.drawEnd])}),_c('div',{staticClass:"content"},[_vm._t("default")],2)],1):_c('div',{staticClass:"content"},[_vm._t("default")],2)}
 670 | var staticRenderFns = []
 671 | 
 672 | 
 673 | // CONCATENATED MODULE: ./src/Paintable.vue?vue&type=template&id=1d81ce36&
 674 | 
 675 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1ca830e2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Navigation.vue?vue&type=template&id=67b314bc&scoped=true&
 676 | var Navigationvue_type_template_id_67b314bc_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.paintableView.hidePaintableNavigation)?_c('div',{staticClass:"navigation",class:{ navigation__horizontalNavigation: _vm.horizontalNavigation }},[(_vm.isColorPickerOpen)?_c('div',{staticClass:"navigation__colorPicker"},_vm._l((_vm.paintableView.colors),function(color){return _c('span',{key:color,class:[
 677 |         'navigation__colorPickerColor',
 678 |         { selected: _vm.paintableView.currentColor === color }
 679 |       ],style:({ backgroundColor: color }),on:{"click":function($event){return _vm.changeColor(color)}}})}),0):_vm._e(),(_vm.isLineWidthPickerOpen)?_c('div',{staticClass:"navigation__lineWidthPicker"},[_c('label',{attrs:{"for":"navigation__lineWidthPickerRange"}},[_vm._v("("+_vm._s(_vm.paintableView.currentLineWidth)+"px):")]),_c('br'),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.paintableView.currentLineWidth),expression:"paintableView.currentLineWidth"}],attrs:{"id":"navigation__lineWidthPickerRange","type":"range","min":"1","max":"100"},domProps:{"value":(_vm.paintableView.currentLineWidth)},on:{"change":function($event){_vm.isLineWidthPickerOpen = false},"__r":function($event){return _vm.$set(_vm.paintableView, "currentLineWidth", $event.target.value)}}}),_c('div',{staticClass:"navigation__lineWidthPickerDot",style:(_vm.lineWidthStyle)})]):_vm._e(),_c('ul',{staticClass:"navigationMenu",class:{ active: _vm.paintableView.isActive }},_vm._l((_vm.horizontalNavigation ? _vm.navigation.reverse() : _vm.navigation),function(item){return _c('li',{key:item.name,class:'navigationMenu__' + item.name},[(!_vm.horizontalNavigation)?_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}}):_vm._e(),(_vm.paintableView.isActive)?_c('ul',_vm._l((item.subNavigation),function(item){return _c('li',{key:item.name,class:[
 680 |             'navigationMenu__' + item.name,
 681 |             { disabled: item.disabled }
 682 |           ]},[_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}})])}),0):_vm._e(),(_vm.horizontalNavigation)?_c('div',{domProps:{"innerHTML":_vm._s(item.isActive ? item.activeBody : item.body)},on:{"click":item.click}}):_vm._e()])}),0)]):_vm._e()}
 683 | var Navigationvue_type_template_id_67b314bc_scoped_true_staticRenderFns = []
 684 | 
 685 | 
 686 | // CONCATENATED MODULE: ./src/components/Navigation.vue?vue&type=template&id=67b314bc&scoped=true&
 687 | 
 688 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Navigation.vue?vue&type=script&lang=js&
 689 | //
 690 | //
 691 | //
 692 | //
 693 | //
 694 | //
 695 | //
 696 | //
 697 | //
 698 | //
 699 | //
 700 | //
 701 | //
 702 | //
 703 | //
 704 | //
 705 | //
 706 | //
 707 | //
 708 | //
 709 | //
 710 | //
 711 | //
 712 | //
 713 | //
 714 | //
 715 | //
 716 | //
 717 | //
 718 | //
 719 | //
 720 | //
 721 | //
 722 | //
 723 | //
 724 | //
 725 | //
 726 | //
 727 | //
 728 | //
 729 | //
 730 | //
 731 | //
 732 | //
 733 | //
 734 | //
 735 | //
 736 | //
 737 | //
 738 | //
 739 | //
 740 | //
 741 | //
 742 | //
 743 | //
 744 | //
 745 | //
 746 | //
 747 | //
 748 | //
 749 | //
 750 | //
 751 | //
 752 | //
 753 | //
 754 | //
 755 | //
 756 | //
 757 | //
 758 | //
 759 | /* harmony default export */ var Navigationvue_type_script_lang_js_ = ({
 760 |   name: 'paintable-navigation',
 761 |   props: ['horizontalNavigation'],
 762 | 
 763 |   data() {
 764 |     return {
 765 |       isColorPickerOpen: false,
 766 |       isLineWidthPickerOpen: false,
 767 |       paintableView: this.$parent
 768 |     };
 769 |   },
 770 | 
 771 |   computed: {
 772 |     navigation() {
 773 |       return this.filteredNavigation.map(navigationItem => {
 774 |         if (navigationItem.subNavigation && navigationItem.subNavigation.length > 0) {
 775 |           const navigationItemSubNavigation = this.horizontalNavigation ? navigationItem.subNavigation.reverse() : navigationItem.subNavigation;
 776 |           navigationItem.subNavigation = navigationItemSubNavigation.map(subNavigationItem => {
 777 |             if (this.paintableView.navigation && this.paintableView.navigation[subNavigationItem.name]) {
 778 |               return Object.assign({}, subNavigationItem, this.paintableView.navigation[subNavigationItem.name]);
 779 |             }
 780 | 
 781 |             return subNavigationItem;
 782 |           });
 783 |         }
 784 | 
 785 |         if (this.paintableView.navigation && this.paintableView.navigation[navigationItem.name]) {
 786 |           return Object.assign({}, navigationItem, this.paintableView.navigation[navigationItem.name]);
 787 |         }
 788 | 
 789 |         return navigationItem;
 790 |       });
 791 |     },
 792 | 
 793 |     filteredNavigation() {
 794 |       return [{
 795 |         name: 'draw-save',
 796 |         body: 'draw',
 797 |         activeBody: 'save',
 798 |         isActive: this.paintableView.isActive,
 799 |         click: this.togglePainting,
 800 |         subNavigation: [{
 801 |           name: 'color',
 802 |           body: 'color',
 803 |           disabled: false,
 804 |           show: this.paintableView.colors.length > 0,
 805 |           click: this.openColorPicker
 806 |         }, {
 807 |           name: 'line-width',
 808 |           body: 'line-width',
 809 |           disabled: false,
 810 |           show: this.paintableView.showLineWidth,
 811 |           click: this.openLineWidthPicker
 812 |         }, {
 813 |           name: 'undo',
 814 |           body: 'undo',
 815 |           disabled: !this.paintableView.undoList.length,
 816 |           show: this.paintableView.showUndoRedo,
 817 |           click: this.paintableView.undoDrawingStep
 818 |         }, {
 819 |           name: 'redo',
 820 |           body: 'redo',
 821 |           disabled: !this.paintableView.redoList.length,
 822 |           show: this.paintableView.showUndoRedo,
 823 |           click: this.paintableView.redoDrawingStep
 824 |         }, {
 825 |           name: 'delete',
 826 |           body: 'delete',
 827 |           disabled: false,
 828 |           show: true,
 829 |           click: this.paintableView.clearCanvas
 830 |         }, {
 831 |           name: 'eraser-pencil',
 832 |           body: 'eraser',
 833 |           activeBody: 'pencil',
 834 |           isActive: this.paintableView.isEraserActive,
 835 |           disabled: false,
 836 |           show: true,
 837 |           click: this.toggleEraserAndPencil
 838 |         }, {
 839 |           name: 'cancel',
 840 |           body: 'cancel',
 841 |           disabled: false,
 842 |           show: true,
 843 |           click: this.paintableView.cancelDrawing
 844 |         }].filter(item => item.show)
 845 |       }];
 846 |     },
 847 | 
 848 |     lineWidthStyle() {
 849 |       return {
 850 |         height: this.paintableView.currentLineWidth + 'px',
 851 |         width: this.paintableView.currentLineWidth + 'px',
 852 |         backgroundColor: this.paintableView.currentColor
 853 |       };
 854 |     }
 855 | 
 856 |   },
 857 |   methods: {
 858 |     toggleEraserAndPencil() {
 859 |       this.paintableView.isEraserActive = !this.paintableView.isEraserActive;
 860 |     },
 861 | 
 862 |     openColorPicker() {
 863 |       this.isColorPickerOpen = !this.isColorPickerOpen;
 864 |       this.isLineWidthPickerOpen = false;
 865 |     },
 866 | 
 867 |     openLineWidthPicker() {
 868 |       this.isLineWidthPickerOpen = !this.isLineWidthPickerOpen;
 869 |       this.isColorPickerOpen = false;
 870 |     },
 871 | 
 872 |     /**
 873 |      * Change current drawing color
 874 |      */
 875 |     changeColor(color) {
 876 |       this.paintableView.currentColor = color;
 877 |       this.paintableView.tempCtx.strokeStyle = this.paintableView.currentColor;
 878 |       this.paintableView.ctx.strokeStyle = this.paintableView.currentColor;
 879 |       this.isColorPickerOpen = false;
 880 |     },
 881 | 
 882 |     /**
 883 |      * Toggle painting
 884 |      */
 885 |     togglePainting() {
 886 |       if (this.paintableView.isActive) {
 887 |         this.paintableView.saveCurrentCanvasToStorage();
 888 |       }
 889 | 
 890 |       this.paintableView.isActive = !this.paintableView.isActive;
 891 |       this.isColorPickerOpen = false;
 892 |       this.isLineWidthPickerOpen = false;
 893 |       this.$parent.$emit('toggle-paintable', this.paintableView.isActive);
 894 |     }
 895 | 
 896 |   }
 897 | });
 898 | // CONCATENATED MODULE: ./src/components/Navigation.vue?vue&type=script&lang=js&
 899 |  /* harmony default export */ var components_Navigationvue_type_script_lang_js_ = (Navigationvue_type_script_lang_js_); 
 900 | // EXTERNAL MODULE: ./src/components/Navigation.vue?vue&type=style&index=0&id=67b314bc&scoped=true&lang=css&
 901 | var Navigationvue_type_style_index_0_id_67b314bc_scoped_true_lang_css_ = __webpack_require__("57b0");
 902 | 
 903 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 904 | /* globals __VUE_SSR_CONTEXT__ */
 905 | 
 906 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
 907 | // This module is a runtime utility for cleaner component module output and will
 908 | // be included in the final webpack user bundle.
 909 | 
 910 | function normalizeComponent (
 911 |   scriptExports,
 912 |   render,
 913 |   staticRenderFns,
 914 |   functionalTemplate,
 915 |   injectStyles,
 916 |   scopeId,
 917 |   moduleIdentifier, /* server only */
 918 |   shadowMode /* vue-cli only */
 919 | ) {
 920 |   // Vue.extend constructor export interop
 921 |   var options = typeof scriptExports === 'function'
 922 |     ? scriptExports.options
 923 |     : scriptExports
 924 | 
 925 |   // render functions
 926 |   if (render) {
 927 |     options.render = render
 928 |     options.staticRenderFns = staticRenderFns
 929 |     options._compiled = true
 930 |   }
 931 | 
 932 |   // functional template
 933 |   if (functionalTemplate) {
 934 |     options.functional = true
 935 |   }
 936 | 
 937 |   // scopedId
 938 |   if (scopeId) {
 939 |     options._scopeId = 'data-v-' + scopeId
 940 |   }
 941 | 
 942 |   var hook
 943 |   if (moduleIdentifier) { // server build
 944 |     hook = function (context) {
 945 |       // 2.3 injection
 946 |       context =
 947 |         context || // cached call
 948 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
 949 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
 950 |       // 2.2 with runInNewContext: true
 951 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 952 |         context = __VUE_SSR_CONTEXT__
 953 |       }
 954 |       // inject component styles
 955 |       if (injectStyles) {
 956 |         injectStyles.call(this, context)
 957 |       }
 958 |       // register component module identifier for async chunk inferrence
 959 |       if (context && context._registeredComponents) {
 960 |         context._registeredComponents.add(moduleIdentifier)
 961 |       }
 962 |     }
 963 |     // used by ssr in case component is cached and beforeCreate
 964 |     // never gets called
 965 |     options._ssrRegister = hook
 966 |   } else if (injectStyles) {
 967 |     hook = shadowMode
 968 |       ? function () {
 969 |         injectStyles.call(
 970 |           this,
 971 |           (options.functional ? this.parent : this).$root.$options.shadowRoot
 972 |         )
 973 |       }
 974 |       : injectStyles
 975 |   }
 976 | 
 977 |   if (hook) {
 978 |     if (options.functional) {
 979 |       // for template-only hot-reload because in that case the render fn doesn't
 980 |       // go through the normalizer
 981 |       options._injectStyles = hook
 982 |       // register for functional component in vue file
 983 |       var originalRender = options.render
 984 |       options.render = function renderWithStyleInjection (h, context) {
 985 |         hook.call(context)
 986 |         return originalRender(h, context)
 987 |       }
 988 |     } else {
 989 |       // inject component registration as beforeCreate hook
 990 |       var existing = options.beforeCreate
 991 |       options.beforeCreate = existing
 992 |         ? [].concat(existing, hook)
 993 |         : [hook]
 994 |     }
 995 |   }
 996 | 
 997 |   return {
 998 |     exports: scriptExports,
 999 |     options: options
1000 |   }
1001 | }
1002 | 
1003 | // CONCATENATED MODULE: ./src/components/Navigation.vue
1004 | 
1005 | 
1006 | 
1007 | 
1008 | 
1009 | 
1010 | /* normalize component */
1011 | 
1012 | var component = normalizeComponent(
1013 |   components_Navigationvue_type_script_lang_js_,
1014 |   Navigationvue_type_template_id_67b314bc_scoped_true_render,
1015 |   Navigationvue_type_template_id_67b314bc_scoped_true_staticRenderFns,
1016 |   false,
1017 |   null,
1018 |   "67b314bc",
1019 |   null
1020 |   
1021 | )
1022 | 
1023 | /* harmony default export */ var Navigation = (component.exports);
1024 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Paintable.vue?vue&type=script&lang=js&
1025 | //
1026 | //
1027 | //
1028 | //
1029 | //
1030 | //
1031 | //
1032 | //
1033 | //
1034 | //
1035 | //
1036 | //
1037 | //
1038 | //
1039 | //
1040 | //
1041 | //
1042 | //
1043 | //
1044 | //
1045 | //
1046 | //
1047 | //
1048 | //
1049 | //
1050 | //
1051 | //
1052 | //
1053 | //
1054 | //
1055 | //
1056 | //
1057 | //
1058 | //
1059 | //
1060 | //
1061 | //
1062 | //
1063 | //
1064 | //
1065 | //
1066 | //
1067 | //
1068 | //
1069 | //
1070 | let currentX = 0;
1071 | let currentY = 0;
1072 | 
1073 | /* harmony default export */ var Paintablevue_type_script_lang_js_ = ({
1074 |   name: 'paintable',
1075 |   components: {
1076 |     Navigation: Navigation
1077 |   },
1078 |   props: {
1079 |     factor: {
1080 |       type: Number,
1081 |       default: 1
1082 |     },
1083 |     navigation: {
1084 |       type: Object,
1085 |       default: null
1086 |     },
1087 |     alwaysOnTop: {
1088 |       type: Boolean,
1089 |       default: true
1090 |     },
1091 |     name: {
1092 |       type: String,
1093 |       required: true
1094 |     },
1095 |     width: {
1096 |       type: Number,
1097 |       default: window.innerWidth
1098 |     },
1099 |     height: {
1100 |       type: Number,
1101 |       default: window.innerHeight
1102 |     },
1103 |     hide: {
1104 |       type: Boolean,
1105 |       default: false
1106 |     },
1107 |     threshold: {
1108 |       type: Number,
1109 |       default: 0
1110 |     },
1111 |     showUndoRedo: {
1112 |       type: Boolean,
1113 |       default: true
1114 |     },
1115 |     showLineWidth: {
1116 |       type: Boolean,
1117 |       default: true
1118 |     },
1119 |     lineWidth: {
1120 |       type: Number,
1121 |       default: 5
1122 |     },
1123 |     lineWidthEraser: {
1124 |       type: Number,
1125 |       default: 20
1126 |     },
1127 |     colors: {
1128 |       type: Array,
1129 |       default: () => ['black', '#f00', '#4481c7', 'rgba(255, 235, 59, 0.4)', '#999', 'green']
1130 |     },
1131 |     horizontalNavigation: {
1132 |       type: Boolean,
1133 |       default: false
1134 |     },
1135 |     disableNavigation: {
1136 |       type: Boolean,
1137 |       default: false
1138 |     },
1139 |     active: {
1140 |       type: Boolean,
1141 |       default: false
1142 |     },
1143 |     color: {
1144 |       type: String,
1145 |       default: '#000'
1146 |     },
1147 |     useEraser: {
1148 |       type: Boolean,
1149 |       default: false
1150 |     }
1151 |   },
1152 | 
1153 |   data() {
1154 |     return {
1155 |       currentColor: this.color,
1156 |       canvasIsEmpty: false,
1157 |       canvasId: 0,
1158 |       isEraserActive: this.useEraser,
1159 |       isActive: this.active,
1160 |       pointCoords: [],
1161 |       redoList: [],
1162 |       undoList: [],
1163 |       currentLineWidth: this.isEraserActive ? this.lineWidthEraser : this.lineWidth,
1164 |       tempCanvas: null,
1165 |       tempCtx: null,
1166 |       canvas: null,
1167 |       ctx: null,
1168 |       startedDrawing: false,
1169 |       drawMoveEvent: 'mousemove',
1170 |       drawStartEvent: 'mousedown',
1171 |       drawEndEvent: 'mouseup',
1172 |       isMouse: true,
1173 |       thresholdReached: false
1174 |     };
1175 |   },
1176 | 
1177 |   watch: {
1178 |     isActive: 'init',
1179 |     name: 'init',
1180 | 
1181 |     hide() {
1182 |       this.$nextTick(() => {
1183 |         this.init();
1184 |       });
1185 |     },
1186 | 
1187 |     lineWidth(lineWidth) {
1188 |       this.currentLineWidth = lineWidth;
1189 |     },
1190 | 
1191 |     lineWidthEraser(lineWidth) {
1192 |       this.currentLineWidth = lineWidth;
1193 |     },
1194 | 
1195 |     useEraser(useEraser) {
1196 |       this.isEraserActive = useEraser;
1197 |     },
1198 | 
1199 |     active(isActive) {
1200 |       this.isActive = isActive;
1201 |     },
1202 | 
1203 |     color(color) {
1204 |       this.currentColor = color;
1205 |       this.tempCtx.strokeStyle = this.currentColor;
1206 |       this.ctx.strokeStyle = this.currentColor;
1207 |     },
1208 | 
1209 |     isEraserActive(isActive) {
1210 |       this.currentLineWidth = isActive ? this.lineWidthEraser : this.lineWidth;
1211 |     },
1212 | 
1213 |     currentLineWidth(lineWidth) {
1214 |       this.ctx.lineWidth = lineWidth;
1215 |       this.tempCtx.lineWidth = lineWidth;
1216 |     }
1217 | 
1218 |   },
1219 | 
1220 |   beforeMount() {
1221 |     this.canvasId = Math.round(Math.random() * 1000);
1222 |   },
1223 | 
1224 |   created() {
1225 |     if (this.isTouch) {
1226 |       this.drawMoveEvent = 'touchmove';
1227 |       this.drawStartEvent = 'touchstart';
1228 |       this.drawEndEvent = 'touchend';
1229 |       this.isMouse = false;
1230 |     }
1231 |   },
1232 | 
1233 |   mounted() {
1234 |     this.init();
1235 |   },
1236 | 
1237 |   computed: {
1238 |     /**
1239 |      * Get scaling factor of current device
1240 |      */
1241 |     scalingFactor() {
1242 |       return window.devicePixelRatio || 1;
1243 |     },
1244 | 
1245 |     /**
1246 |      * Check if it is a touch device
1247 |      * thanks to: https://ctrlq.org/code/19616-detect-touch-screen-javascript
1248 |      */
1249 |     isTouch() {
1250 |       return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
1251 |     }
1252 | 
1253 |   },
1254 |   methods: {
1255 |     /**
1256 |      * Cancel current drawing and remove lines
1257 |      */
1258 |     cancelDrawing() {
1259 |       this.loadImageFromStorage();
1260 |       this.isActive = false;
1261 |       this.isColorPickerOpen = false;
1262 |       this.isLineWidthPickerOpen = false;
1263 |     },
1264 | 
1265 |     /**
1266 |      * Set storage item
1267 |      * @param {string} key
1268 |      * @param {string} value
1269 |      */
1270 |     setItem(key, value) {
1271 |       localStorage.setItem(key, value);
1272 |     },
1273 | 
1274 |     /**
1275 |      * Get storage item
1276 |      * @param {string} key
1277 |      */
1278 |     async getItem(key) {
1279 |       return localStorage.getItem(key);
1280 |     },
1281 | 
1282 |     /**
1283 |      * Remove item from storage
1284 |      * @param {string} key
1285 |      */
1286 |     removeItem(key) {
1287 |       localStorage.removeItem(key);
1288 |     },
1289 | 
1290 |     /**
1291 |      * Init paintable component and set all variables
1292 |      */
1293 |     init() {
1294 |       try {
1295 |         this.pointCoords = []; // temporary canvas
1296 | 
1297 |         this.tempCanvas = this.$refs['temp-canvas-' + this.canvasId];
1298 |         this.tempCtx = this.tempCanvas.getContext('2d'); // canvas with drawing
1299 | 
1300 |         this.canvas = this.$refs['canvas-' + this.canvasId];
1301 |         this.ctx = this.canvas.getContext('2d');
1302 |         this.tempCtx.lineCap = 'round';
1303 |         this.ctx.lineCap = 'round';
1304 |         this.tempCtx.lineWidth = this.lineWidth;
1305 |         this.ctx.lineWidth = this.lineWidth;
1306 |         this.tempCtx.strokeStyle = this.currentColor;
1307 |         this.ctx.strokeStyle = this.currentColor;
1308 |         this.setItem(this.name + '-settings', JSON.stringify({
1309 |           width: this.canvas.width,
1310 |           height: this.canvas.height
1311 |         })); // set canvas width and height
1312 | 
1313 |         this.setCanvasSize(); // load image from storage
1314 | 
1315 |         this.loadImageFromStorage();
1316 |         this.$emit('toggle-paintable', this.isActive);
1317 |       } catch (err) {// this.hide = true;
1318 |         // this.hidePaintableNavigation = true;
1319 |       }
1320 |     },
1321 | 
1322 |     //--------------------------------------------------
1323 | 
1324 |     /**
1325 |      * Undo drawed line
1326 |      */
1327 |     undoDrawingStep() {
1328 |       this.restoreCanvasState(this.undoList, this.redoList);
1329 |     },
1330 | 
1331 |     /**
1332 |      * Redo drawed line
1333 |      */
1334 |     redoDrawingStep() {
1335 |       this.restoreCanvasState(this.redoList, this.undoList);
1336 |     },
1337 | 
1338 |     /**
1339 |      * Restore previous image
1340 |      */
1341 |     restoreCanvasState(pop, push) {
1342 |       this.ctx.globalCompositeOperation = 'source-over';
1343 | 
1344 |       if (pop.length) {
1345 |         const restore_state = pop.pop();
1346 |         this.saveCurrentCanvasState(this.canvas, push, true);
1347 |         this.loadImageFromStorage(restore_state);
1348 |       }
1349 |     },
1350 | 
1351 |     /**
1352 |      * Save the current canvas state an push it to undo- or redolist
1353 |      */
1354 |     saveCurrentCanvasState(canvas, list, keepRedo) {
1355 |       keepRedo = keepRedo || false;
1356 | 
1357 |       if (!keepRedo) {
1358 |         this.redoList = [];
1359 |       }
1360 | 
1361 |       (list || this.undoList).push(canvas.toDataURL('image/png'));
1362 |     },
1363 | 
1364 |     //-------------------------------------------------------------------------
1365 | 
1366 |     /**
1367 |      * Get base64 from local storage and load it into canvas
1368 |      */
1369 |     async loadImageFromStorage(image) {
1370 |       this.clearCanvas();
1371 |       const base64Image = image || (await this.getItem(this.name));
1372 | 
1373 |       if (base64Image) {
1374 |         let image = new Image();
1375 | 
1376 |         image.onload = () => {
1377 |           this.ctx.drawImage(image, 0, 0);
1378 |           this.canvasIsEmpty = this.isCanvasBlank();
1379 |         };
1380 | 
1381 |         image.src = base64Image; // eslint-disable-line
1382 |       } else {
1383 |         this.canvasIsEmpty = this.isCanvasBlank();
1384 |       }
1385 |     },
1386 | 
1387 |     /**
1388 |      * Set current canvas size
1389 |      */
1390 |     setCanvasSize() {
1391 |       // this.width = window.innerWidth;
1392 |       // this.height = window.innerHeight;
1393 |       currentX = 0;
1394 |       currentY = 0;
1395 |     },
1396 | 
1397 |     /**
1398 |      * Clear complete canvas
1399 |      */
1400 |     clearCanvas() {
1401 |       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1402 |     },
1403 | 
1404 |     isCanvasBlank() {
1405 |       this.ctx.globalCompositeOperation = 'source-over';
1406 |       const blank = document.createElement('canvas');
1407 |       const blankCtx = blank.getContext('2d');
1408 |       blankCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1409 |       blank.width = this.canvas.width;
1410 |       blank.height = this.canvas.height;
1411 |       return blank.toDataURL() === this.canvas.toDataURL();
1412 |     },
1413 | 
1414 |     /**
1415 |      * Check first, if canvas is empty.
1416 |      * If its not empty save it to the storage.
1417 |      */
1418 |     saveCurrentCanvasToStorage() {
1419 |       // reset to pencil
1420 |       this.isEraserActive = false;
1421 | 
1422 |       if (this.isCanvasBlank()) {
1423 |         this.removeItem(this.name);
1424 |         this.removeItem(this.name + '-settings');
1425 |       } else {
1426 |         this.setItem(this.name, this.canvas.toDataURL('image/png'));
1427 |         this.setItem(this.name + '-settings', JSON.stringify({
1428 |           width: this.canvas.width,
1429 |           height: this.canvas.height
1430 |         }));
1431 |       }
1432 | 
1433 |       this.undoList = [];
1434 |       this.redoList = [];
1435 |       this.canvasIsEmpty = this.isCanvasBlank();
1436 |     },
1437 | 
1438 |     //-------------------------------------------------------------------------
1439 | 
1440 |     /**
1441 |      * Start drawing lines
1442 |      */
1443 |     drawStart(e) {
1444 |       e.preventDefault();
1445 |       this.thresholdReached = false;
1446 | 
1447 |       if (this.isActive) {
1448 |         this.isLineWidthPickerOpen = false;
1449 |         this.isColorPickerOpen = false;
1450 |         this.startedDrawing = true;
1451 |         this.saveCurrentCanvasState(this.canvas);
1452 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
1453 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
1454 | 
1455 |         if (x && y) {
1456 |           currentX = (x - this.tempCanvas.getBoundingClientRect().left) * this.factor;
1457 |           currentY = (y - this.tempCanvas.getBoundingClientRect().top) * this.factor;
1458 |           this.pointCoords.push({
1459 |             x: currentX,
1460 |             y: currentY
1461 |           });
1462 |         }
1463 | 
1464 |         this.tempCtx.globalCompositeOperation = 'source-over';
1465 |         this.ctx.globalCompositeOperation = this.isEraserActive ? 'destination-out' : 'source-over';
1466 |       }
1467 |     },
1468 | 
1469 |     /**
1470 |      * End of drawing a line
1471 |      */
1472 |     drawEnd() {
1473 |       if (this.isActive) {
1474 |         this.drawLine(this.ctx);
1475 |         this.startedDrawing = false;
1476 |         this.pointCoords = [];
1477 |         this.thresholdReached = false;
1478 |       }
1479 |     },
1480 | 
1481 |     /**
1482 |      * Generate line from points array
1483 |      */
1484 |     drawLine(context) {
1485 |       this.tempCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
1486 |       let p1 = this.pointCoords[0];
1487 |       let p2 = this.pointCoords[1];
1488 | 
1489 |       if (p1 && p2 && p1.x && p1.y) {
1490 |         context.beginPath();
1491 |         context.moveTo(p1.x, p1.y);
1492 | 
1493 |         for (let i = 1, len = this.pointCoords.length; i < len; i++) {
1494 |           let midPoint = {
1495 |             x: p1.x + (p2.x - p1.x) / 2,
1496 |             y: p1.y + (p2.y - p1.y) / 2
1497 |           };
1498 |           context.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
1499 |           p1 = this.pointCoords[i];
1500 |           p2 = this.pointCoords[i + 1];
1501 |         }
1502 | 
1503 |         context.lineTo(p1.x, p1.y);
1504 |         context.stroke();
1505 |         context.closePath();
1506 |       }
1507 |     },
1508 | 
1509 |     /**
1510 |      * Draw line on move and add current position to an array
1511 |      */
1512 |     drawMove(e) {
1513 |       e.preventDefault();
1514 | 
1515 |       if (this.isActive && this.startedDrawing) {
1516 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
1517 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
1518 | 
1519 |         if (x && y) {
1520 |           currentX = x * this.factor - this.tempCanvas.getBoundingClientRect().left;
1521 |           currentY = y * this.factor - this.tempCanvas.getBoundingClientRect().top;
1522 |           this.pointCoords.push({
1523 |             x: currentX,
1524 |             y: currentY
1525 |           });
1526 | 
1527 |           if (this.threshold) {
1528 |             const distanceFirstAndLastPoint = Math.sqrt(Math.pow(this.pointCoords[this.pointCoords.length - 1].y - this.pointCoords[0].y, 2) + Math.pow(this.pointCoords[this.pointCoords.length - 1].x - this.pointCoords[0].x, 2));
1529 | 
1530 |             if (distanceFirstAndLastPoint > this.threshold) {
1531 |               if (!this.thresholdReached) {
1532 |                 this.thresholdReached = true;
1533 |                 this.$emit('thresholdReached');
1534 |               }
1535 |             }
1536 |           }
1537 | 
1538 |           this.drawLine(!this.isEraserActive ? this.tempCtx : this.ctx);
1539 |         }
1540 |       }
1541 |     }
1542 | 
1543 |   }
1544 | });
1545 | // CONCATENATED MODULE: ./src/Paintable.vue?vue&type=script&lang=js&
1546 |  /* harmony default export */ var src_Paintablevue_type_script_lang_js_ = (Paintablevue_type_script_lang_js_); 
1547 | // EXTERNAL MODULE: ./src/Paintable.vue?vue&type=style&index=0&lang=css&
1548 | var Paintablevue_type_style_index_0_lang_css_ = __webpack_require__("4226");
1549 | 
1550 | // CONCATENATED MODULE: ./src/Paintable.vue
1551 | 
1552 | 
1553 | 
1554 | 
1555 | 
1556 | 
1557 | /* normalize component */
1558 | 
1559 | var Paintable_component = normalizeComponent(
1560 |   src_Paintablevue_type_script_lang_js_,
1561 |   render,
1562 |   staticRenderFns,
1563 |   false,
1564 |   null,
1565 |   null,
1566 |   null
1567 |   
1568 | )
1569 | 
1570 | /* harmony default export */ var Paintable = (Paintable_component.exports);
1571 | // CONCATENATED MODULE: ./src/plugin.js
1572 | 
1573 | const PaintablePlugin = {
1574 |   install(Vue, options) {
1575 |     if (options && options.setItem) {
1576 |       Paintable.methods.setItem = options.setItem;
1577 |     }
1578 | 
1579 |     if (options && options.getItem) {
1580 |       Paintable.methods.getItem = options.getItem;
1581 |     }
1582 | 
1583 |     if (options && options.removeItem) {
1584 |       Paintable.methods.removeItem = options.removeItem;
1585 |     }
1586 | 
1587 |     Vue.component('paintable', Paintable);
1588 |   }
1589 | 
1590 | };
1591 | /* harmony default export */ var src_plugin = (PaintablePlugin);
1592 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
1593 | 
1594 | 
1595 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_plugin);
1596 | 
1597 | 
1598 | 
1599 | /***/ })
1600 | 
1601 | /******/ });
1602 | });


--------------------------------------------------------------------------------
/dist/paintable.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["paintable"]=e():t["paintable"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var a=e[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,i),a.l=!0,a.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)i.d(n,a,function(e){return t[e]}.bind(null,a));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s="fb15")}({2443:function(t,e,i){var n=i("9043");"string"===typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);var a=i("499e").default;a("9ee9b9f6",n,!0,{sourceMap:!1,shadowMode:!1})},"24fb":function(t,e,i){"use strict";function n(t,e){var i=t[1]||"",n=t[3];if(!n)return i;if(e&&"function"===typeof btoa){var o=a(n),s=n.sources.map((function(t){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(t," */")}));return[i].concat(s).concat([o]).join("\n")}return[i].join("\n")}function a(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),i="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e);return"/*# ".concat(i," */")}t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=n(e,t);return e[2]?"@media ".concat(e[2]," {").concat(i,"}"):i})).join("")},e.i=function(t,i,n){"string"===typeof t&&(t=[[null,t,""]]);var a={};if(n)for(var o=0;o<this.length;o++){var s=this[o][0];null!=s&&(a[s]=!0)}for(var r=0;r<t.length;r++){var c=[].concat(t[r]);n&&a[c[0]]||(i&&(c[2]?c[2]="".concat(i," and ").concat(c[2]):c[2]=i),e.push(c))}},e}},4226:function(t,e,i){"use strict";i("4839")},4839:function(t,e,i){var n=i("4979");"string"===typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);var a=i("499e").default;a("3368f113",n,!0,{sourceMap:!1,shadowMode:!1})},4979:function(t,e,i){var n=i("24fb");e=n(!1),e.push([t.i,".paintable,body{position:fixed}.paintable{overflow:hidden;height:100%;width:100%;-webkit-transform:scale(1);transform:scale(1)}.paintable.active{z-index:0}.paintable .canvas{position:relative;background-color:transparent;z-index:-1;position:absolute;left:0;top:0;overflow:hidden;-ms-touch-action:none;touch-action:none}.paintable .canvas.active{z-index:1000}.paintable .canvas.active.back{z-index:999}",""]),t.exports=e},"499e":function(t,e,i){"use strict";function n(t,e){for(var i=[],n={},a=0;a<e.length;a++){var o=e[a],s=o[0],r=o[1],c=o[2],l=o[3],d={id:t+":"+a,css:r,media:c,sourceMap:l};n[s]?n[s].parts.push(d):i.push(n[s]={id:s,parts:[d]})}return i}i.r(e),i.d(e,"default",(function(){return v}));var a="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},s=a&&(document.head||document.getElementsByTagName("head")[0]),r=null,c=0,l=!1,d=function(){},h=null,u="data-vue-ssr-id",p="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(t,e,i,a){l=i,h=a||{};var s=n(t,e);return g(s),function(e){for(var i=[],a=0;a<s.length;a++){var r=s[a],c=o[r.id];c.refs--,i.push(c)}e?(s=n(t,e),g(s)):s=[];for(a=0;a<i.length;a++){c=i[a];if(0===c.refs){for(var l=0;l<c.parts.length;l++)c.parts[l]();delete o[c.id]}}}}function g(t){for(var e=0;e<t.length;e++){var i=t[e],n=o[i.id];if(n){n.refs++;for(var a=0;a<n.parts.length;a++)n.parts[a](i.parts[a]);for(;a<i.parts.length;a++)n.parts.push(b(i.parts[a]));n.parts.length>i.parts.length&&(n.parts.length=i.parts.length)}else{var s=[];for(a=0;a<i.parts.length;a++)s.push(b(i.parts[a]));o[i.id]={id:i.id,refs:1,parts:s}}}}function f(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function b(t){var e,i,n=document.querySelector("style["+u+'~="'+t.id+'"]');if(n){if(l)return d;n.parentNode.removeChild(n)}if(p){var a=c++;n=r||(r=f()),e=w.bind(null,n,a,!1),i=w.bind(null,n,a,!0)}else n=f(),e=y.bind(null,n),i=function(){n.parentNode.removeChild(n)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else i()}}var m=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}();function w(t,e,i,n){var a=i?"":n.css;if(t.styleSheet)t.styleSheet.cssText=m(e,a);else{var o=document.createTextNode(a),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(o,s[e]):t.appendChild(o)}}function y(t,e){var i=e.css,n=e.media,a=e.sourceMap;if(n&&t.setAttribute("media",n),h.ssrId&&t.setAttribute(u,e.id),a&&(i+="\n/*# sourceURL="+a.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}},"57b0":function(t,e,i){"use strict";i("2443")},8875:function(t,e,i){var n,a,o;(function(i,s){a=[],n=s,o="function"===typeof n?n.apply(e,a):n,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var i,n,a,o=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,s=/@([^@]*):(\d+):(\d+)\s*$/gi,r=o.exec(p.stack)||s.exec(p.stack),c=r&&r[1]||!1,l=r&&r[2]||!1,d=document.location.href.replace(document.location.hash,""),h=document.getElementsByTagName("script");c===d&&(i=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(l-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),a=i.replace(n,"$1").trim());for(var u=0;u<h.length;u++){if("interactive"===h[u].readyState)return h[u];if(h[u].src===c)return h[u];if(c===d&&h[u].innerHTML&&h[u].innerHTML.trim()===a)return h[u]}return null}}return t}))},9043:function(t,e,i){var n=i("24fb");e=n(!1),e.push([t.i,".navigation[data-v-67b314bc]{position:fixed;right:20px;top:20px;z-index:1005;background-color:#333;border-radius:5px;color:#fff}.navigation .navigationMenu[data-v-67b314bc],.navigation .navigationMenu ul[data-v-67b314bc]{list-style:none;padding:0;margin:0}.navigation .navigationMenu li>div[data-v-67b314bc]{cursor:pointer;padding:12px}.navigation .navigationMenu li.disabled[data-v-67b314bc]{opacity:.5}.navigation__lineWidthPicker[data-v-67b314bc]{background:#333;position:absolute;left:-225px;top:0;padding:12px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.navigation__lineWidthPickerDot[data-v-67b314bc]{margin-top:10px;border-radius:100%}.navigation__lineWidthPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__lineWidthPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__lineWidthPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__colorPicker[data-v-67b314bc]{background:#333;position:absolute;left:-60px;top:0;padding:12px;border-radius:5px}.navigation__colorPickerColor[data-v-67b314bc]{border-radius:100%;height:15px;width:15px;display:block;margin:0 0 10px;border:2px solid transparent}.navigation__colorPickerColor[data-v-67b314bc]:last-child{margin:0}.navigation__colorPickerColor.selected[data-v-67b314bc]{border:2px solid #fff}.navigation__horizontalNavigation .navigationMenu li[data-v-67b314bc],.navigation__horizontalNavigation .navigationMenu ul[data-v-67b314bc]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}",""]),t.exports=e},fb15:function(t,e,i){"use strict";if(i.r(e),"undefined"!==typeof window){var n=window.document.currentScript,a=i("8875");n=a(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:a});var o=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(i.p=o[1])}var s=function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.hide?i("div",{staticClass:"content"},[t._t("default")],2):i("div",{staticClass:"paintable"},[t.disableNavigation?t._e():i("Navigation",{attrs:{horizontalNavigation:t.horizontalNavigation}},[i("div",{attrs:{slot:"paintable-navigation-draw"},slot:"paintable-navigation-draw"})]),i("canvas",{ref:"canvas-"+t.canvasId,staticClass:"canvas back",class:{active:t.isActive||t.alwaysOnTop},style:{pointerEvents:t.isActive?"all":"none",display:!t.canvasIsEmpty||t.isActive?"block":"none"},attrs:{width:t.width,height:t.height}}),i("canvas",{ref:"temp-canvas-"+t.canvasId,staticClass:"canvas",class:{active:t.isActive||t.alwaysOnTop},style:{pointerEvents:t.isActive?"all":"none",display:!t.canvasIsEmpty||t.isActive?"block":"none"},attrs:{width:t.width,height:t.height},on:t._d({},[t.drawMoveEvent,t.drawMove,t.drawStartEvent,t.drawStart,t.drawEndEvent,t.drawEnd])}),i("div",{staticClass:"content"},[t._t("default")],2)],1)},r=[],c=function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.paintableView.hidePaintableNavigation?t._e():i("div",{staticClass:"navigation",class:{navigation__horizontalNavigation:t.horizontalNavigation}},[t.isColorPickerOpen?i("div",{staticClass:"navigation__colorPicker"},t._l(t.paintableView.colors,(function(e){return i("span",{key:e,class:["navigation__colorPickerColor",{selected:t.paintableView.currentColor===e}],style:{backgroundColor:e},on:{click:function(i){return t.changeColor(e)}}})})),0):t._e(),t.isLineWidthPickerOpen?i("div",{staticClass:"navigation__lineWidthPicker"},[i("label",{attrs:{for:"navigation__lineWidthPickerRange"}},[t._v("("+t._s(t.paintableView.currentLineWidth)+"px):")]),i("br"),i("input",{directives:[{name:"model",rawName:"v-model",value:t.paintableView.currentLineWidth,expression:"paintableView.currentLineWidth"}],attrs:{id:"navigation__lineWidthPickerRange",type:"range",min:"1",max:"100"},domProps:{value:t.paintableView.currentLineWidth},on:{change:function(e){t.isLineWidthPickerOpen=!1},__r:function(e){return t.$set(t.paintableView,"currentLineWidth",e.target.value)}}}),i("div",{staticClass:"navigation__lineWidthPickerDot",style:t.lineWidthStyle})]):t._e(),i("ul",{staticClass:"navigationMenu",class:{active:t.paintableView.isActive}},t._l(t.horizontalNavigation?t.navigation.reverse():t.navigation,(function(e){return i("li",{key:e.name,class:"navigationMenu__"+e.name},[t.horizontalNavigation?t._e():i("div",{domProps:{innerHTML:t._s(e.isActive?e.activeBody:e.body)},on:{click:e.click}}),t.paintableView.isActive?i("ul",t._l(e.subNavigation,(function(e){return i("li",{key:e.name,class:["navigationMenu__"+e.name,{disabled:e.disabled}]},[i("div",{domProps:{innerHTML:t._s(e.isActive?e.activeBody:e.body)},on:{click:e.click}})])})),0):t._e(),t.horizontalNavigation?i("div",{domProps:{innerHTML:t._s(e.isActive?e.activeBody:e.body)},on:{click:e.click}}):t._e()])})),0)])},l=[],d={name:"paintable-navigation",props:["horizontalNavigation"],data(){return{isColorPickerOpen:!1,isLineWidthPickerOpen:!1,paintableView:this.$parent}},computed:{navigation(){return this.filteredNavigation.map(t=>{if(t.subNavigation&&t.subNavigation.length>0){const e=this.horizontalNavigation?t.subNavigation.reverse():t.subNavigation;t.subNavigation=e.map(t=>this.paintableView.navigation&&this.paintableView.navigation[t.name]?Object.assign({},t,this.paintableView.navigation[t.name]):t)}return this.paintableView.navigation&&this.paintableView.navigation[t.name]?Object.assign({},t,this.paintableView.navigation[t.name]):t})},filteredNavigation(){return[{name:"draw-save",body:"draw",activeBody:"save",isActive:this.paintableView.isActive,click:this.togglePainting,subNavigation:[{name:"color",body:"color",disabled:!1,show:this.paintableView.colors.length>0,click:this.openColorPicker},{name:"line-width",body:"line-width",disabled:!1,show:this.paintableView.showLineWidth,click:this.openLineWidthPicker},{name:"undo",body:"undo",disabled:!this.paintableView.undoList.length,show:this.paintableView.showUndoRedo,click:this.paintableView.undoDrawingStep},{name:"redo",body:"redo",disabled:!this.paintableView.redoList.length,show:this.paintableView.showUndoRedo,click:this.paintableView.redoDrawingStep},{name:"delete",body:"delete",disabled:!1,show:!0,click:this.paintableView.clearCanvas},{name:"eraser-pencil",body:"eraser",activeBody:"pencil",isActive:this.paintableView.isEraserActive,disabled:!1,show:!0,click:this.toggleEraserAndPencil},{name:"cancel",body:"cancel",disabled:!1,show:!0,click:this.paintableView.cancelDrawing}].filter(t=>t.show)}]},lineWidthStyle(){return{height:this.paintableView.currentLineWidth+"px",width:this.paintableView.currentLineWidth+"px",backgroundColor:this.paintableView.currentColor}}},methods:{toggleEraserAndPencil(){this.paintableView.isEraserActive=!this.paintableView.isEraserActive},openColorPicker(){this.isColorPickerOpen=!this.isColorPickerOpen,this.isLineWidthPickerOpen=!1},openLineWidthPicker(){this.isLineWidthPickerOpen=!this.isLineWidthPickerOpen,this.isColorPickerOpen=!1},changeColor(t){this.paintableView.currentColor=t,this.paintableView.tempCtx.strokeStyle=this.paintableView.currentColor,this.paintableView.ctx.strokeStyle=this.paintableView.currentColor,this.isColorPickerOpen=!1},togglePainting(){this.paintableView.isActive&&this.paintableView.saveCurrentCanvasToStorage(),this.paintableView.isActive=!this.paintableView.isActive,this.isColorPickerOpen=!1,this.isLineWidthPickerOpen=!1,this.$parent.$emit("toggle-paintable",this.paintableView.isActive)}}},h=d;i("57b0");function u(t,e,i,n,a,o,s,r){var c,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),n&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),s?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),a&&a.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):a&&(c=r?function(){a.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:a),c)if(l.functional){l._injectStyles=c;var d=l.render;l.render=function(t,e){return c.call(e),d(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,c):[c]}return{exports:t,options:l}}var p=u(h,c,l,!1,null,"67b314bc",null),v=p.exports;let g=0,f=0;var b={name:"paintable",components:{Navigation:v},props:{factor:{type:Number,default:1},navigation:{type:Object,default:null},alwaysOnTop:{type:Boolean,default:!0},name:{type:String,required:!0},width:{type:Number,default:window.innerWidth},height:{type:Number,default:window.innerHeight},hide:{type:Boolean,default:!1},threshold:{type:Number,default:0},showUndoRedo:{type:Boolean,default:!0},showLineWidth:{type:Boolean,default:!0},lineWidth:{type:Number,default:5},lineWidthEraser:{type:Number,default:20},colors:{type:Array,default:()=>["black","#f00","#4481c7","rgba(255, 235, 59, 0.4)","#999","green"]},horizontalNavigation:{type:Boolean,default:!1},disableNavigation:{type:Boolean,default:!1},active:{type:Boolean,default:!1},color:{type:String,default:"#000"},useEraser:{type:Boolean,default:!1}},data(){return{currentColor:this.color,canvasIsEmpty:!1,canvasId:0,isEraserActive:this.useEraser,isActive:this.active,pointCoords:[],redoList:[],undoList:[],currentLineWidth:this.isEraserActive?this.lineWidthEraser:this.lineWidth,tempCanvas:null,tempCtx:null,canvas:null,ctx:null,startedDrawing:!1,drawMoveEvent:"mousemove",drawStartEvent:"mousedown",drawEndEvent:"mouseup",isMouse:!0,thresholdReached:!1}},watch:{isActive:"init",name:"init",hide(){this.$nextTick(()=>{this.init()})},lineWidth(t){this.currentLineWidth=t},lineWidthEraser(t){this.currentLineWidth=t},useEraser(t){this.isEraserActive=t},active(t){this.isActive=t},color(t){this.currentColor=t,this.tempCtx.strokeStyle=this.currentColor,this.ctx.strokeStyle=this.currentColor},isEraserActive(t){this.currentLineWidth=t?this.lineWidthEraser:this.lineWidth},currentLineWidth(t){this.ctx.lineWidth=t,this.tempCtx.lineWidth=t}},beforeMount(){this.canvasId=Math.round(1e3*Math.random())},created(){this.isTouch&&(this.drawMoveEvent="touchmove",this.drawStartEvent="touchstart",this.drawEndEvent="touchend",this.isMouse=!1)},mounted(){this.init()},computed:{scalingFactor(){return window.devicePixelRatio||1},isTouch(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}},methods:{cancelDrawing(){this.loadImageFromStorage(),this.isActive=!1,this.isColorPickerOpen=!1,this.isLineWidthPickerOpen=!1},setItem(t,e){localStorage.setItem(t,e)},async getItem(t){return localStorage.getItem(t)},removeItem(t){localStorage.removeItem(t)},init(){try{this.pointCoords=[],this.tempCanvas=this.$refs["temp-canvas-"+this.canvasId],this.tempCtx=this.tempCanvas.getContext("2d"),this.canvas=this.$refs["canvas-"+this.canvasId],this.ctx=this.canvas.getContext("2d"),this.tempCtx.lineCap="round",this.ctx.lineCap="round",this.tempCtx.lineWidth=this.lineWidth,this.ctx.lineWidth=this.lineWidth,this.tempCtx.strokeStyle=this.currentColor,this.ctx.strokeStyle=this.currentColor,this.setItem(this.name+"-settings",JSON.stringify({width:this.canvas.width,height:this.canvas.height})),this.setCanvasSize(),this.loadImageFromStorage(),this.$emit("toggle-paintable",this.isActive)}catch(t){}},undoDrawingStep(){this.restoreCanvasState(this.undoList,this.redoList)},redoDrawingStep(){this.restoreCanvasState(this.redoList,this.undoList)},restoreCanvasState(t,e){if(this.ctx.globalCompositeOperation="source-over",t.length){const i=t.pop();this.saveCurrentCanvasState(this.canvas,e,!0),this.loadImageFromStorage(i)}},saveCurrentCanvasState(t,e,i){i=i||!1,i||(this.redoList=[]),(e||this.undoList).push(t.toDataURL("image/png"))},async loadImageFromStorage(t){this.clearCanvas();const e=t||await this.getItem(this.name);if(e){let t=new Image;t.onload=()=>{this.ctx.drawImage(t,0,0),this.canvasIsEmpty=this.isCanvasBlank()},t.src=e}else this.canvasIsEmpty=this.isCanvasBlank()},setCanvasSize(){g=0,f=0},clearCanvas(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)},isCanvasBlank(){this.ctx.globalCompositeOperation="source-over";const t=document.createElement("canvas"),e=t.getContext("2d");return e.clearRect(0,0,this.canvas.width,this.canvas.height),t.width=this.canvas.width,t.height=this.canvas.height,t.toDataURL()===this.canvas.toDataURL()},saveCurrentCanvasToStorage(){this.isEraserActive=!1,this.isCanvasBlank()?(this.removeItem(this.name),this.removeItem(this.name+"-settings")):(this.setItem(this.name,this.canvas.toDataURL("image/png")),this.setItem(this.name+"-settings",JSON.stringify({width:this.canvas.width,height:this.canvas.height}))),this.undoList=[],this.redoList=[],this.canvasIsEmpty=this.isCanvasBlank()},drawStart(t){if(t.preventDefault(),this.thresholdReached=!1,this.isActive){this.isLineWidthPickerOpen=!1,this.isColorPickerOpen=!1,this.startedDrawing=!0,this.saveCurrentCanvasState(this.canvas);const e=this.isMouse?t.clientX:t.targetTouches[0].clientX,i=this.isMouse?t.clientY:t.targetTouches[0].clientY;e&&i&&(g=(e-this.tempCanvas.getBoundingClientRect().left)*this.factor,f=(i-this.tempCanvas.getBoundingClientRect().top)*this.factor,this.pointCoords.push({x:g,y:f})),this.tempCtx.globalCompositeOperation="source-over",this.ctx.globalCompositeOperation=this.isEraserActive?"destination-out":"source-over"}},drawEnd(){this.isActive&&(this.drawLine(this.ctx),this.startedDrawing=!1,this.pointCoords=[],this.thresholdReached=!1)},drawLine(t){this.tempCtx.clearRect(0,0,this.canvas.width,this.canvas.height);let e=this.pointCoords[0],i=this.pointCoords[1];if(e&&i&&e.x&&e.y){t.beginPath(),t.moveTo(e.x,e.y);for(let n=1,a=this.pointCoords.length;n<a;n++){let a={x:e.x+(i.x-e.x)/2,y:e.y+(i.y-e.y)/2};t.quadraticCurveTo(e.x,e.y,a.x,a.y),e=this.pointCoords[n],i=this.pointCoords[n+1]}t.lineTo(e.x,e.y),t.stroke(),t.closePath()}},drawMove(t){if(t.preventDefault(),this.isActive&&this.startedDrawing){const e=this.isMouse?t.clientX:t.targetTouches[0].clientX,i=this.isMouse?t.clientY:t.targetTouches[0].clientY;if(e&&i){if(g=e*this.factor-this.tempCanvas.getBoundingClientRect().left,f=i*this.factor-this.tempCanvas.getBoundingClientRect().top,this.pointCoords.push({x:g,y:f}),this.threshold){const t=Math.sqrt(Math.pow(this.pointCoords[this.pointCoords.length-1].y-this.pointCoords[0].y,2)+Math.pow(this.pointCoords[this.pointCoords.length-1].x-this.pointCoords[0].x,2));t>this.threshold&&(this.thresholdReached||(this.thresholdReached=!0,this.$emit("thresholdReached")))}this.drawLine(this.isEraserActive?this.ctx:this.tempCtx)}}}}},m=b,w=(i("4226"),u(m,s,r,!1,null,null,null)),y=w.exports;const C={install(t,e){e&&e.setItem&&(y.methods.setItem=e.setItem),e&&e.getItem&&(y.methods.getItem=e.getItem),e&&e.removeItem&&(y.methods.removeItem=e.removeItem),t.component("paintable",y)}};var x=C;e["default"]=x}})}));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "vue-paintable",
  3 |   "version": "2.1.4",
  4 |   "description": "Draw on any screen",
  5 |   "author": "Ph1p <phil@capshake.com>",
  6 |   "keywords": [
  7 |     "canvas",
  8 |     "vue",
  9 |     "paintable",
 10 |     "touch",
 11 |     "mouse"
 12 |   ],
 13 |   "repository": {
 14 |     "type": "git",
 15 |     "url": "https://github.com/ph1p/vue-paintable"
 16 |   },
 17 |   "scripts": {
 18 |     "serve": "yarn build && vue-cli-service serve",
 19 |     "build": "vue-cli-service build --mode production --target lib --name paintable ./src/plugin.js && rm ./dist/demo.html",
 20 |     "now-build": "yarn build && vue-cli-service build ./src/main.js --dest ./demo",
 21 |     "lint": "vue-cli-service lint",
 22 |     "test": "vue-cli-service test:unit"
 23 |   },
 24 |   "browser": "dist/paintable.common.js",
 25 |   "unpkg": "dist/paintable.umd.min.js",
 26 |   "files": [
 27 |     "dist/paintable.common.js",
 28 |     "dist/paintable.umd.min.js",
 29 |     "dist/paintable.umd.js"
 30 |   ],
 31 |   "devDependencies": {
 32 |     "@vue/cli-plugin-babel": "^4.5.10",
 33 |     "@vue/cli-plugin-eslint": "^4.5.10",
 34 |     "@vue/cli-plugin-pwa": "^4.5.10",
 35 |     "@vue/cli-plugin-unit-jest": "^4.5.10",
 36 |     "@vue/cli-service": "^4.5.10",
 37 |     "@vue/eslint-config-prettier": "^6.0.0",
 38 |     "@vue/test-utils": "1.1.2",
 39 |     "babel-eslint": "^10.1.0",
 40 |     "eslint": "^7.18.0",
 41 |     "eslint-plugin-prettier": "^3.3.1",
 42 |     "eslint-plugin-vue": "^7.4.1",
 43 |     "lint-staged": "^10.5.3",
 44 |     "vue": "^2.6.12",
 45 |     "vue-template-compiler": "^2.6.12"
 46 |   },
 47 |   "prettier": {
 48 |     "singleQuote": true
 49 |   },
 50 |   "eslintConfig": {
 51 |     "root": true,
 52 |     "env": {
 53 |       "node": true
 54 |     },
 55 |     "extends": [
 56 |       "plugin:vue/essential",
 57 |       "@vue/prettier"
 58 |     ],
 59 |     "rules": {
 60 |       "no-console": 0
 61 |     }
 62 |   },
 63 |   "postcss": {
 64 |     "plugins": {
 65 |       "autoprefixer": {}
 66 |     }
 67 |   },
 68 |   "browserslist": [
 69 |     "> 1%",
 70 |     "last 2 versions",
 71 |     "not ie <= 8"
 72 |   ],
 73 |   "jest": {
 74 |     "moduleFileExtensions": [
 75 |       "js",
 76 |       "jsx",
 77 |       "json",
 78 |       "vue"
 79 |     ],
 80 |     "transform": {
 81 |       "^.+\\.vue$": "vue-jest",
 82 |       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
 83 |       "^.+\\.jsx?$": "babel-jest"
 84 |     },
 85 |     "transformIgnorePatterns": [
 86 |       "/node_modules/"
 87 |     ],
 88 |     "moduleNameMapper": {
 89 |       "^@/(.*)$": "<rootDir>/src/$1"
 90 |     },
 91 |     "snapshotSerializers": [
 92 |       "jest-serializer-vue"
 93 |     ],
 94 |     "testMatch": [
 95 |       "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
 96 |     ],
 97 |     "testURL": "http://localhost/",
 98 |     "watchPlugins": [
 99 |       "jest-watch-typeahead/filename",
100 |       "jest-watch-typeahead/testname"
101 |     ]
102 |   },
103 |   "gitHooks": {
104 |     "pre-commit": "yarn build && git add dist && lint-staged"
105 |   },
106 |   "lint-staged": {
107 |     "./src/*.{js,vue}": [
108 |       "vue-cli-service lint",
109 |       "git add"
110 |     ]
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph1p/vue-paintable/15514940151106055fee5325ac5936f1d9222d7a/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="manifest" href="<%= BASE_URL %>manifest.json" />
 9 |     <title>vue-paintable</title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but vue-paintable doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "short_name": "Vue - Paintable",
 4 |   "name": "Vue - Paintable",
 5 |   "icons": [
 6 |     {
 7 |       "src": "favicon.ico",
 8 |       "sizes": "64x64 32x32 24x24 16x16",
 9 |       "type": "image/x-icon"
10 |     }
11 |   ],
12 |   "start_url": ".",
13 |   "display": "standalone",
14 |   "theme_color": "#000000",
15 |   "background_color": "#ffffff"
16 | }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="custom-navigation">
  4 |       <button @click="isActive = !isActive">toggle custom navigation</button>
  5 |       <div class="controls" v-if="isActive">
  6 |         {{ dynamicLineWidth }}px<br />
  7 |         <input
  8 |           type="range"
  9 |           @input="dynamicLineWidth = +$event.target.value"
 10 |           min="1"
 11 |           max="100"
 12 |         />
 13 |         <input type="color" v-model="color" /><br /><br />
 14 |         <button @click="$refs.paintable.undoDrawingStep">undo</button>
 15 |         <button @click="$refs.paintable.redoDrawingStep">redo</button>
 16 |         <button @click="$refs.paintable.clearCanvas">clear</button><br /><br />
 17 |         <button @click="$refs.paintable.saveCurrentCanvasToStorage">
 18 |           save
 19 |         </button>
 20 |         <button @click="$refs.paintable.cancelDrawing">cancel</button>
 21 |         <button @click="useEraser = !useEraser">
 22 |           {{ !useEraser ? 'eraser' : 'pencil' }}
 23 |         </button>
 24 |       </div>
 25 |     </div>
 26 | 
 27 |     <paintable
 28 |       :active="isActive"
 29 |       :width="800"
 30 |       :height="800"
 31 |       :disableNavigation="disableNavigation"
 32 |       :hide="hidePaintable"
 33 |       :horizontalNavigation="true"
 34 |       :navigation="navigation"
 35 |       :name="isFirstPaintable ? 'my-screen' : 'my-second-screen'"
 36 |       :factor="1"
 37 |       :lineWidth="dynamicLineWidth"
 38 |       :lineWidthEraser="20"
 39 |       :useEraser="useEraser"
 40 |       :color="color"
 41 |       class="paint"
 42 |       ref="paintable"
 43 |       @toggle-paintable="toggledPaintable"
 44 |     >
 45 |       <div class="control">
 46 |         <h3>
 47 |           Paintable <strong>{{ isFirstPaintable ? '1' : '2' }}</strong>
 48 |         </h3>
 49 |         <button @click="hidePaintable = !hidePaintable">show/hide</button>
 50 |         <button @click="disableNavigation = !disableNavigation">
 51 |           toggle navigation
 52 |         </button>
 53 |         <button @click="navigate">switch to another paintable</button>
 54 |       </div>
 55 | 
 56 |       <img
 57 |         :src="
 58 |           `https://source.unsplash.com/collection/195845/800x80${
 59 |             isFirstPaintable ? 0 : 1
 60 |           }`
 61 |         "
 62 |       />
 63 |     </paintable>
 64 |     <footer>
 65 |       <a
 66 |         class="github-link"
 67 |         _target="blank"
 68 |         href="https://github.com/ph1p/vue-paintable"
 69 |         >on github</a
 70 |       >
 71 |     </footer>
 72 |   </div>
 73 | </template>
 74 | 
 75 | <script>
 76 | export default {
 77 |   data() {
 78 |     return {
 79 |       isFirstPaintable: true,
 80 |       hidePaintable: false,
 81 |       disableNavigation: false,
 82 |       dynamicLineWidth: 5,
 83 |       isActive: false,
 84 |       useEraser: false,
 85 |       color: '#000'
 86 |     };
 87 |   },
 88 |   computed: {
 89 |     navigation() {
 90 |       return {
 91 |         'draw-save': {
 92 |           body: 'click here!',
 93 |           activeBody: '<strong>save</strong>'
 94 |         },
 95 |         color: {
 96 |           body: 'color'
 97 |         }
 98 |       };
 99 |     }
100 |   },
101 |   methods: {
102 |     navigate() {
103 |       this.isFirstPaintable = !this.isFirstPaintable;
104 |     },
105 |     hide() {
106 |       this.$hidePaintableNavigation();
107 |     },
108 |     show() {
109 |       this.$showPaintableNavigation();
110 |     },
111 |     toggledPaintable(isActive) {
112 |       this.isActive = isActive;
113 |     }
114 |   }
115 | };
116 | </script>
117 | 
118 | <style>
119 | body {
120 |   font-family: Helvetica, Arial, sans-serif;
121 |   position: initial !important;
122 | }
123 | #app {
124 |   -webkit-font-smoothing: antialiased;
125 |   -moz-osx-font-smoothing: grayscale;
126 |   text-align: center;
127 |   color: #2c3e50;
128 |   margin-top: 60px;
129 | }
130 | h3 {
131 |   font-weight: normal;
132 | }
133 | .control {
134 |   margin: 20px;
135 | }
136 | .paint {
137 |   border: 5px solid #000;
138 |   border-radius: 5px;
139 |   margin: 40px auto;
140 |   box-sizing: border-box;
141 |   display: block;
142 |   width: 810px !important;
143 |   height: 810px !important;
144 |   position: relative !important;
145 |   overflow: hidden;
146 | }
147 | footer {
148 |   text-align: center;
149 | }
150 | footer a {
151 |   color: #777;
152 |   text-transform: uppercase;
153 |   text-decoration: none;
154 | }
155 | button {
156 |   border: 0;
157 |   margin: 0 10px 0 0;
158 |   font-size: 14px;
159 |   padding: 10px 15px;
160 |   opacity: 0.8;
161 |   background-color: rgb(19, 102, 141);
162 |   border-radius: 3px;
163 |   color: #fff;
164 |   cursor: pointer;
165 | }
166 | button:hover {
167 |   opacity: 1;
168 | }
169 | .custom-navigation {
170 |   position: fixed;
171 |   top: 40px;
172 |   left: 40px;
173 |   z-index: 1001;
174 |   background-color: #fff;
175 | }
176 | .custom-navigation .controls {
177 |   margin: 10px 0 0 0;
178 |   border: 1px solid #ddd;
179 |   padding: 20px;
180 |   border-radius: 5px;
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/src/Paintable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="paintable" v-if="!hide">
  3 |     <Navigation
  4 |       v-if="!disableNavigation"
  5 |       :horizontalNavigation="horizontalNavigation"
  6 |     >
  7 |       <div slot="paintable-navigation-draw"></div>
  8 |     </Navigation>
  9 | 
 10 |     <canvas
 11 |       :ref="'canvas-' + canvasId"
 12 |       :class="{ active: isActive || alwaysOnTop }"
 13 |       :style="{
 14 |         pointerEvents: !isActive ? 'none' : 'all',
 15 |         display: !canvasIsEmpty || isActive ? 'block' : 'none'
 16 |       }"
 17 |       class="canvas back"
 18 |       :width="width"
 19 |       :height="height"
 20 |     />
 21 | 
 22 |     <canvas
 23 |       :ref="'temp-canvas-' + canvasId"
 24 |       :class="{ active: isActive || alwaysOnTop }"
 25 |       :style="{
 26 |         pointerEvents: !isActive ? 'none' : 'all',
 27 |         display: !canvasIsEmpty || isActive ? 'block' : 'none'
 28 |       }"
 29 |       class="canvas"
 30 |       :width="width"
 31 |       :height="height"
 32 |       @[drawMoveEvent]="drawMove"
 33 |       @[drawStartEvent]="drawStart"
 34 |       @[drawEndEvent]="drawEnd"
 35 |     />
 36 | 
 37 |     <div class="content">
 38 |       <slot></slot>
 39 |     </div>
 40 |   </div>
 41 |   <div v-else class="content">
 42 |     <slot></slot>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | let currentX = 0;
 48 | let currentY = 0;
 49 | 
 50 | import Navigation from './components/Navigation';
 51 | 
 52 | export default {
 53 |   name: 'paintable',
 54 |   components: {
 55 |     Navigation
 56 |   },
 57 |   props: {
 58 |     factor: {
 59 |       type: Number,
 60 |       default: 1
 61 |     },
 62 |     navigation: {
 63 |       type: Object,
 64 |       default: null
 65 |     },
 66 |     alwaysOnTop: {
 67 |       type: Boolean,
 68 |       default: true
 69 |     },
 70 |     name: {
 71 |       type: String,
 72 |       required: true
 73 |     },
 74 |     width: {
 75 |       type: Number,
 76 |       default: window.innerWidth
 77 |     },
 78 |     height: {
 79 |       type: Number,
 80 |       default: window.innerHeight
 81 |     },
 82 |     hide: {
 83 |       type: Boolean,
 84 |       default: false
 85 |     },
 86 |     threshold: {
 87 |       type: Number,
 88 |       default: 0
 89 |     },
 90 |     showUndoRedo: {
 91 |       type: Boolean,
 92 |       default: true
 93 |     },
 94 |     showLineWidth: {
 95 |       type: Boolean,
 96 |       default: true
 97 |     },
 98 |     lineWidth: {
 99 |       type: Number,
100 |       default: 5
101 |     },
102 |     lineWidthEraser: {
103 |       type: Number,
104 |       default: 20
105 |     },
106 |     colors: {
107 |       type: Array,
108 |       default: () => [
109 |         'black',
110 |         '#f00',
111 |         '#4481c7',
112 |         'rgba(255, 235, 59, 0.4)',
113 |         '#999',
114 |         'green'
115 |       ]
116 |     },
117 |     horizontalNavigation: {
118 |       type: Boolean,
119 |       default: false
120 |     },
121 |     disableNavigation: {
122 |       type: Boolean,
123 |       default: false
124 |     },
125 |     active: {
126 |       type: Boolean,
127 |       default: false
128 |     },
129 |     color: {
130 |       type: String,
131 |       default: '#000'
132 |     },
133 |     useEraser: {
134 |       type: Boolean,
135 |       default: false
136 |     }
137 |   },
138 |   data() {
139 |     return {
140 |       currentColor: this.color,
141 |       canvasIsEmpty: false,
142 |       canvasId: 0,
143 |       isEraserActive: this.useEraser,
144 |       isActive: this.active,
145 |       pointCoords: [],
146 |       redoList: [],
147 |       undoList: [],
148 |       currentLineWidth: this.isEraserActive
149 |         ? this.lineWidthEraser
150 |         : this.lineWidth,
151 |       tempCanvas: null,
152 |       tempCtx: null,
153 |       canvas: null,
154 |       ctx: null,
155 |       startedDrawing: false,
156 |       drawMoveEvent: 'mousemove',
157 |       drawStartEvent: 'mousedown',
158 |       drawEndEvent: 'mouseup',
159 |       isMouse: true,
160 |       thresholdReached: false
161 |     };
162 |   },
163 |   watch: {
164 |     isActive: 'init',
165 |     name: 'init',
166 |     hide() {
167 |       this.$nextTick(() => {
168 |         this.init();
169 |       });
170 |     },
171 |     lineWidth(lineWidth) {
172 |       this.currentLineWidth = lineWidth;
173 |     },
174 |     lineWidthEraser(lineWidth) {
175 |       this.currentLineWidth = lineWidth;
176 |     },
177 |     useEraser(useEraser) {
178 |       this.isEraserActive = useEraser;
179 |     },
180 |     active(isActive) {
181 |       this.isActive = isActive;
182 |     },
183 |     color(color) {
184 |       this.currentColor = color;
185 |       this.tempCtx.strokeStyle = this.currentColor;
186 |       this.ctx.strokeStyle = this.currentColor;
187 |     },
188 |     isEraserActive(isActive) {
189 |       this.currentLineWidth = isActive ? this.lineWidthEraser : this.lineWidth;
190 |     },
191 |     currentLineWidth(lineWidth) {
192 |       this.ctx.lineWidth = lineWidth;
193 |       this.tempCtx.lineWidth = lineWidth;
194 |     }
195 |   },
196 |   beforeMount() {
197 |     this.canvasId = Math.round(Math.random() * 1000);
198 |   },
199 |   created() {
200 |     if (this.isTouch) {
201 |       this.drawMoveEvent = 'touchmove';
202 |       this.drawStartEvent = 'touchstart';
203 |       this.drawEndEvent = 'touchend';
204 |       this.isMouse = false;
205 |     }
206 |   },
207 |   mounted() {
208 |     this.init();
209 |   },
210 |   computed: {
211 |     /**
212 |      * Get scaling factor of current device
213 |      */
214 |     scalingFactor() {
215 |       return window.devicePixelRatio || 1;
216 |     },
217 |     /**
218 |      * Check if it is a touch device
219 |      * thanks to: https://ctrlq.org/code/19616-detect-touch-screen-javascript
220 |      */
221 |     isTouch() {
222 |       return (
223 |         'ontouchstart' in window ||
224 |         navigator.MaxTouchPoints > 0 ||
225 |         navigator.maxTouchPoints > 0 ||
226 |         navigator.msMaxTouchPoints > 0
227 |       );
228 |     }
229 |   },
230 |   methods: {
231 |     /**
232 |      * Cancel current drawing and remove lines
233 |      */
234 |     cancelDrawing() {
235 |       this.loadImageFromStorage();
236 |       this.isActive = false;
237 |       this.isColorPickerOpen = false;
238 |       this.isLineWidthPickerOpen = false;
239 |     },
240 |     /**
241 |      * Set storage item
242 |      * @param {string} key
243 |      * @param {string} value
244 |      */
245 |     setItem(key, value) {
246 |       localStorage.setItem(key, value);
247 |     },
248 |     /**
249 |      * Get storage item
250 |      * @param {string} key
251 |      */
252 |     async getItem(key) {
253 |       return localStorage.getItem(key);
254 |     },
255 |     /**
256 |      * Remove item from storage
257 |      * @param {string} key
258 |      */
259 |     removeItem(key) {
260 |       localStorage.removeItem(key);
261 |     },
262 |     /**
263 |      * Init paintable component and set all variables
264 |      */
265 |     init() {
266 |       try {
267 |         this.pointCoords = [];
268 | 
269 |         // temporary canvas
270 |         this.tempCanvas = this.$refs['temp-canvas-' + this.canvasId];
271 |         this.tempCtx = this.tempCanvas.getContext('2d');
272 | 
273 |         // canvas with drawing
274 |         this.canvas = this.$refs['canvas-' + this.canvasId];
275 |         this.ctx = this.canvas.getContext('2d');
276 | 
277 |         this.tempCtx.lineCap = 'round';
278 |         this.ctx.lineCap = 'round';
279 | 
280 |         this.tempCtx.lineWidth = this.lineWidth;
281 |         this.ctx.lineWidth = this.lineWidth;
282 | 
283 |         this.tempCtx.strokeStyle = this.currentColor;
284 |         this.ctx.strokeStyle = this.currentColor;
285 | 
286 |         this.setItem(
287 |           this.name + '-settings',
288 |           JSON.stringify({
289 |             width: this.canvas.width,
290 |             height: this.canvas.height
291 |           })
292 |         );
293 | 
294 |         // set canvas width and height
295 |         this.setCanvasSize();
296 | 
297 |         // load image from storage
298 |         this.loadImageFromStorage();
299 | 
300 |         this.$emit('toggle-paintable', this.isActive);
301 |       } catch (err) {
302 |         // this.hide = true;
303 |         // this.hidePaintableNavigation = true;
304 |       }
305 |     },
306 |     //--------------------------------------------------
307 |     /**
308 |      * Undo drawed line
309 |      */
310 |     undoDrawingStep() {
311 |       this.restoreCanvasState(this.undoList, this.redoList);
312 |     },
313 |     /**
314 |      * Redo drawed line
315 |      */
316 |     redoDrawingStep() {
317 |       this.restoreCanvasState(this.redoList, this.undoList);
318 |     },
319 |     /**
320 |      * Restore previous image
321 |      */
322 |     restoreCanvasState(pop, push) {
323 |       this.ctx.globalCompositeOperation = 'source-over';
324 |       if (pop.length) {
325 |         const restore_state = pop.pop();
326 |         this.saveCurrentCanvasState(this.canvas, push, true);
327 |         this.loadImageFromStorage(restore_state);
328 |       }
329 |     },
330 |     /**
331 |      * Save the current canvas state an push it to undo- or redolist
332 |      */
333 |     saveCurrentCanvasState(canvas, list, keepRedo) {
334 |       keepRedo = keepRedo || false;
335 |       if (!keepRedo) {
336 |         this.redoList = [];
337 |       }
338 | 
339 |       (list || this.undoList).push(canvas.toDataURL('image/png'));
340 |     },
341 |     //-------------------------------------------------------------------------
342 |     /**
343 |      * Get base64 from local storage and load it into canvas
344 |      */
345 |     async loadImageFromStorage(image) {
346 |       this.clearCanvas();
347 | 
348 |       const base64Image = image || (await this.getItem(this.name));
349 |       if (base64Image) {
350 |         let image = new Image();
351 |         image.onload = () => {
352 |           this.ctx.drawImage(image, 0, 0);
353 |           this.canvasIsEmpty = this.isCanvasBlank();
354 |         };
355 |         image.src = base64Image; // eslint-disable-line
356 |       } else {
357 |         this.canvasIsEmpty = this.isCanvasBlank();
358 |       }
359 |     },
360 |     /**
361 |      * Set current canvas size
362 |      */
363 |     setCanvasSize() {
364 |       // this.width = window.innerWidth;
365 |       // this.height = window.innerHeight;
366 |       currentX = 0;
367 |       currentY = 0;
368 |     },
369 |     /**
370 |      * Clear complete canvas
371 |      */
372 |     clearCanvas() {
373 |       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
374 |     },
375 |     isCanvasBlank() {
376 |       this.ctx.globalCompositeOperation = 'source-over';
377 | 
378 |       const blank = document.createElement('canvas');
379 |       const blankCtx = blank.getContext('2d');
380 | 
381 |       blankCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
382 | 
383 |       blank.width = this.canvas.width;
384 |       blank.height = this.canvas.height;
385 | 
386 |       return blank.toDataURL() === this.canvas.toDataURL();
387 |     },
388 |     /**
389 |      * Check first, if canvas is empty.
390 |      * If its not empty save it to the storage.
391 |      */
392 |     saveCurrentCanvasToStorage() {
393 |       // reset to pencil
394 |       this.isEraserActive = false;
395 | 
396 |       if (this.isCanvasBlank()) {
397 |         this.removeItem(this.name);
398 |         this.removeItem(this.name + '-settings');
399 |       } else {
400 |         this.setItem(this.name, this.canvas.toDataURL('image/png'));
401 |         this.setItem(
402 |           this.name + '-settings',
403 |           JSON.stringify({
404 |             width: this.canvas.width,
405 |             height: this.canvas.height
406 |           })
407 |         );
408 |       }
409 |       this.undoList = [];
410 |       this.redoList = [];
411 | 
412 |       this.canvasIsEmpty = this.isCanvasBlank();
413 |     },
414 |     //-------------------------------------------------------------------------
415 |     /**
416 |      * Start drawing lines
417 |      */
418 |     drawStart(e) {
419 |       e.preventDefault();
420 |       this.thresholdReached = false;
421 |       if (this.isActive) {
422 |         this.isLineWidthPickerOpen = false;
423 |         this.isColorPickerOpen = false;
424 |         this.startedDrawing = true;
425 |         this.saveCurrentCanvasState(this.canvas);
426 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
427 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
428 |         if (x && y) {
429 |           currentX =
430 |             (x - this.tempCanvas.getBoundingClientRect().left) * this.factor;
431 |           currentY =
432 |             (y - this.tempCanvas.getBoundingClientRect().top) * this.factor;
433 |           this.pointCoords.push({
434 |             x: currentX,
435 |             y: currentY
436 |           });
437 |         }
438 |         this.tempCtx.globalCompositeOperation = 'source-over';
439 |         this.ctx.globalCompositeOperation = this.isEraserActive
440 |           ? 'destination-out'
441 |           : 'source-over';
442 |       }
443 |     },
444 |     /**
445 |      * End of drawing a line
446 |      */
447 |     drawEnd() {
448 |       if (this.isActive) {
449 |         this.drawLine(this.ctx);
450 |         this.startedDrawing = false;
451 | 
452 |         this.pointCoords = [];
453 |         this.thresholdReached = false;
454 |       }
455 |     },
456 |     /**
457 |      * Generate line from points array
458 |      */
459 |     drawLine(context) {
460 |       this.tempCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
461 | 
462 |       let p1 = this.pointCoords[0];
463 |       let p2 = this.pointCoords[1];
464 | 
465 |       if (p1 && p2 && p1.x && p1.y) {
466 |         context.beginPath();
467 |         context.moveTo(p1.x, p1.y);
468 | 
469 |         for (let i = 1, len = this.pointCoords.length; i < len; i++) {
470 |           let midPoint = {
471 |             x: p1.x + (p2.x - p1.x) / 2,
472 |             y: p1.y + (p2.y - p1.y) / 2
473 |           };
474 |           context.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
475 |           p1 = this.pointCoords[i];
476 |           p2 = this.pointCoords[i + 1];
477 |         }
478 | 
479 |         context.lineTo(p1.x, p1.y);
480 |         context.stroke();
481 |         context.closePath();
482 |       }
483 |     },
484 |     /**
485 |      * Draw line on move and add current position to an array
486 |      */
487 |     drawMove(e) {
488 |       e.preventDefault();
489 | 
490 |       if (this.isActive && this.startedDrawing) {
491 |         const x = !this.isMouse ? e.targetTouches[0].clientX : e.clientX;
492 |         const y = !this.isMouse ? e.targetTouches[0].clientY : e.clientY;
493 | 
494 |         if (x && y) {
495 |           currentX =
496 |             x * this.factor - this.tempCanvas.getBoundingClientRect().left;
497 |           currentY =
498 |             y * this.factor - this.tempCanvas.getBoundingClientRect().top;
499 | 
500 |           this.pointCoords.push({
501 |             x: currentX,
502 |             y: currentY
503 |           });
504 | 
505 |           if (this.threshold) {
506 |             const distanceFirstAndLastPoint = Math.sqrt(
507 |               Math.pow(
508 |                 this.pointCoords[this.pointCoords.length - 1].y -
509 |                   this.pointCoords[0].y,
510 |                 2
511 |               ) +
512 |                 Math.pow(
513 |                   this.pointCoords[this.pointCoords.length - 1].x -
514 |                     this.pointCoords[0].x,
515 |                   2
516 |                 )
517 |             );
518 | 
519 |             if (distanceFirstAndLastPoint > this.threshold) {
520 |               if (!this.thresholdReached) {
521 |                 this.thresholdReached = true;
522 |                 this.$emit('thresholdReached');
523 |               }
524 |             }
525 |           }
526 | 
527 |           this.drawLine(!this.isEraserActive ? this.tempCtx : this.ctx);
528 |         }
529 |       }
530 |     }
531 |   }
532 | };
533 | </script>
534 | 
535 | <style>
536 | body {
537 |   position: fixed;
538 | }
539 | .paintable {
540 |   overflow: hidden;
541 |   position: fixed;
542 |   height: 100%;
543 |   width: 100%;
544 |   transform: scale(1);
545 | }
546 | .paintable.active {
547 |   z-index: 0;
548 | }
549 | .paintable .canvas {
550 |   position: relative;
551 |   background-color: transparent;
552 |   z-index: -1;
553 |   position: absolute;
554 |   left: 0;
555 |   top: 0;
556 |   overflow: hidden;
557 |   touch-action: none;
558 | }
559 | .paintable .canvas.active {
560 |   z-index: 1000;
561 | }
562 | .paintable .canvas.active.back {
563 |   z-index: 999;
564 | }
565 | </style>
566 | 


--------------------------------------------------------------------------------
/src/components/Navigation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="navigation"
  4 |     :class="{ navigation__horizontalNavigation: horizontalNavigation }"
  5 |     v-if="!paintableView.hidePaintableNavigation"
  6 |   >
  7 |     <div class="navigation__colorPicker" v-if="isColorPickerOpen">
  8 |       <span
  9 |         :class="[
 10 |           'navigation__colorPickerColor',
 11 |           { selected: paintableView.currentColor === color }
 12 |         ]"
 13 |         v-for="color in paintableView.colors"
 14 |         :key="color"
 15 |         :style="{ backgroundColor: color }"
 16 |         @click="changeColor(color)"
 17 |       ></span>
 18 |     </div>
 19 | 
 20 |     <div class="navigation__lineWidthPicker" v-if="isLineWidthPickerOpen">
 21 |       <label for="navigation__lineWidthPickerRange"
 22 |         >({{ paintableView.currentLineWidth }}px):</label
 23 |       ><br />
 24 |       <input
 25 |         id="navigation__lineWidthPickerRange"
 26 |         type="range"
 27 |         min="1"
 28 |         max="100"
 29 |         v-model="paintableView.currentLineWidth"
 30 |         @change="isLineWidthPickerOpen = false"
 31 |       />
 32 |       <div class="navigation__lineWidthPickerDot" :style="lineWidthStyle"></div>
 33 |     </div>
 34 | 
 35 |     <ul class="navigationMenu" :class="{ active: paintableView.isActive }">
 36 |       <li
 37 |         :class="'navigationMenu__' + item.name"
 38 |         v-for="item in horizontalNavigation ? navigation.reverse() : navigation"
 39 |         :key="item.name"
 40 |       >
 41 |         <div
 42 |           v-if="!horizontalNavigation"
 43 |           @click="item.click"
 44 |           v-html="item.isActive ? item.activeBody : item.body"
 45 |         ></div>
 46 |         <ul v-if="paintableView.isActive">
 47 |           <li
 48 |             v-for="item in item.subNavigation"
 49 |             :key="item.name"
 50 |             :class="[
 51 |               'navigationMenu__' + item.name,
 52 |               { disabled: item.disabled }
 53 |             ]"
 54 |           >
 55 |             <div
 56 |               @click="item.click"
 57 |               v-html="item.isActive ? item.activeBody : item.body"
 58 |             ></div>
 59 |           </li>
 60 |         </ul>
 61 |         <div
 62 |           v-if="horizontalNavigation"
 63 |           @click="item.click"
 64 |           v-html="item.isActive ? item.activeBody : item.body"
 65 |         ></div>
 66 |       </li>
 67 |     </ul>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | export default {
 73 |   name: 'paintable-navigation',
 74 |   props: ['horizontalNavigation'],
 75 |   data() {
 76 |     return {
 77 |       isColorPickerOpen: false,
 78 |       isLineWidthPickerOpen: false,
 79 |       paintableView: this.$parent
 80 |     };
 81 |   },
 82 |   computed: {
 83 |     navigation() {
 84 |       return this.filteredNavigation.map(navigationItem => {
 85 |         if (
 86 |           navigationItem.subNavigation &&
 87 |           navigationItem.subNavigation.length > 0
 88 |         ) {
 89 |           const navigationItemSubNavigation = this.horizontalNavigation
 90 |             ? navigationItem.subNavigation.reverse()
 91 |             : navigationItem.subNavigation;
 92 |           navigationItem.subNavigation = navigationItemSubNavigation.map(
 93 |             subNavigationItem => {
 94 |               if (
 95 |                 this.paintableView.navigation &&
 96 |                 this.paintableView.navigation[subNavigationItem.name]
 97 |               ) {
 98 |                 return Object.assign(
 99 |                   {},
100 |                   subNavigationItem,
101 |                   this.paintableView.navigation[subNavigationItem.name]
102 |                 );
103 |               }
104 |               return subNavigationItem;
105 |             }
106 |           );
107 |         }
108 | 
109 |         if (
110 |           this.paintableView.navigation &&
111 |           this.paintableView.navigation[navigationItem.name]
112 |         ) {
113 |           return Object.assign(
114 |             {},
115 |             navigationItem,
116 |             this.paintableView.navigation[navigationItem.name]
117 |           );
118 |         }
119 | 
120 |         return navigationItem;
121 |       });
122 |     },
123 |     filteredNavigation() {
124 |       return [
125 |         {
126 |           name: 'draw-save',
127 |           body: 'draw',
128 |           activeBody: 'save',
129 |           isActive: this.paintableView.isActive,
130 |           click: this.togglePainting,
131 |           subNavigation: [
132 |             {
133 |               name: 'color',
134 |               body: 'color',
135 |               disabled: false,
136 |               show: this.paintableView.colors.length > 0,
137 |               click: this.openColorPicker
138 |             },
139 |             {
140 |               name: 'line-width',
141 |               body: 'line-width',
142 |               disabled: false,
143 |               show: this.paintableView.showLineWidth,
144 |               click: this.openLineWidthPicker
145 |             },
146 |             {
147 |               name: 'undo',
148 |               body: 'undo',
149 |               disabled: !this.paintableView.undoList.length,
150 |               show: this.paintableView.showUndoRedo,
151 |               click: this.paintableView.undoDrawingStep
152 |             },
153 |             {
154 |               name: 'redo',
155 |               body: 'redo',
156 |               disabled: !this.paintableView.redoList.length,
157 |               show: this.paintableView.showUndoRedo,
158 |               click: this.paintableView.redoDrawingStep
159 |             },
160 |             {
161 |               name: 'delete',
162 |               body: 'delete',
163 |               disabled: false,
164 |               show: true,
165 |               click: this.paintableView.clearCanvas
166 |             },
167 |             {
168 |               name: 'eraser-pencil',
169 |               body: 'eraser',
170 |               activeBody: 'pencil',
171 |               isActive: this.paintableView.isEraserActive,
172 |               disabled: false,
173 |               show: true,
174 |               click: this.toggleEraserAndPencil
175 |             },
176 |             {
177 |               name: 'cancel',
178 |               body: 'cancel',
179 |               disabled: false,
180 |               show: true,
181 |               click: this.paintableView.cancelDrawing
182 |             }
183 |           ].filter(item => item.show)
184 |         }
185 |       ];
186 |     },
187 |     lineWidthStyle() {
188 |       return {
189 |         height: this.paintableView.currentLineWidth + 'px',
190 |         width: this.paintableView.currentLineWidth + 'px',
191 |         backgroundColor: this.paintableView.currentColor
192 |       };
193 |     }
194 |   },
195 |   methods: {
196 |     toggleEraserAndPencil() {
197 |       this.paintableView.isEraserActive = !this.paintableView.isEraserActive;
198 |     },
199 |     openColorPicker() {
200 |       this.isColorPickerOpen = !this.isColorPickerOpen;
201 |       this.isLineWidthPickerOpen = false;
202 |     },
203 |     openLineWidthPicker() {
204 |       this.isLineWidthPickerOpen = !this.isLineWidthPickerOpen;
205 |       this.isColorPickerOpen = false;
206 |     },
207 |     /**
208 |      * Change current drawing color
209 |      */
210 |     changeColor(color) {
211 |       this.paintableView.currentColor = color;
212 |       this.paintableView.tempCtx.strokeStyle = this.paintableView.currentColor;
213 |       this.paintableView.ctx.strokeStyle = this.paintableView.currentColor;
214 | 
215 |       this.isColorPickerOpen = false;
216 |     },
217 |     /**
218 |      * Toggle painting
219 |      */
220 |     togglePainting() {
221 |       if (this.paintableView.isActive) {
222 |         this.paintableView.saveCurrentCanvasToStorage();
223 |       }
224 | 
225 |       this.paintableView.isActive = !this.paintableView.isActive;
226 |       this.isColorPickerOpen = false;
227 |       this.isLineWidthPickerOpen = false;
228 | 
229 |       this.$parent.$emit('toggle-paintable', this.paintableView.isActive);
230 |     }
231 |   }
232 | };
233 | </script>
234 | 
235 | <style scoped>
236 | .navigation {
237 |   position: fixed;
238 |   right: 20px;
239 |   top: 20px;
240 |   z-index: 1005;
241 |   background-color: #333;
242 |   border-radius: 5px;
243 |   color: #fff;
244 | }
245 | .navigation .navigationMenu {
246 |   list-style: none;
247 |   padding: 0;
248 |   margin: 0;
249 | }
250 | .navigation .navigationMenu ul {
251 |   list-style: none;
252 |   padding: 0;
253 |   margin: 0;
254 | }
255 | .navigation .navigationMenu li > div {
256 |   cursor: pointer;
257 |   padding: 12px;
258 | }
259 | .navigation .navigationMenu li.disabled {
260 |   opacity: 0.5;
261 | }
262 | .navigation__lineWidthPicker {
263 |   background: #333;
264 |   position: absolute;
265 |   left: -225px;
266 |   top: 0;
267 |   padding: 12px;
268 |   border-radius: 5px;
269 |   box-sizing: border-box;
270 | }
271 | .navigation__lineWidthPickerDot {
272 |   margin-top: 10px;
273 |   border-radius: 100%;
274 | }
275 | .navigation__lineWidthPickerColor {
276 |   border-radius: 100%;
277 |   height: 15px;
278 |   width: 15px;
279 |   display: block;
280 |   margin: 0 0 10px;
281 |   border: 2px solid transparent;
282 | }
283 | .navigation__lineWidthPickerColor:last-child {
284 |   margin: 0;
285 | }
286 | .navigation__lineWidthPickerColor.selected {
287 |   border: 2px solid #fff;
288 | }
289 | .navigation__colorPicker {
290 |   background: #333;
291 |   position: absolute;
292 |   left: -60px;
293 |   top: 0;
294 |   padding: 12px;
295 |   border-radius: 5px;
296 | }
297 | .navigation__colorPickerColor {
298 |   border-radius: 100%;
299 |   height: 15px;
300 |   width: 15px;
301 |   display: block;
302 |   margin: 0 0 10px;
303 |   border: 2px solid transparent;
304 | }
305 | .navigation__colorPickerColor:last-child {
306 |   margin: 0;
307 | }
308 | .navigation__colorPickerColor.selected {
309 |   border: 2px solid #fff;
310 | }
311 | .navigation__horizontalNavigation .navigationMenu ul {
312 |   display: inline-flex;
313 | }
314 | .navigation__horizontalNavigation .navigationMenu li {
315 |   display: inline-flex;
316 | }
317 | </style>
318 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import Paintable from './plugin';
 4 | 
 5 | Vue.use(Paintable);
 6 | 
 7 | new Vue({
 8 |   render: h => h(App)
 9 | }).$mount('#app');
10 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
 1 | import Paintable from './Paintable.vue';
 2 | 
 3 | const PaintablePlugin = {
 4 |   install(Vue, options) {
 5 |     if (options && options.setItem) {
 6 |       Paintable.methods.setItem = options.setItem;
 7 |     }
 8 | 
 9 |     if (options && options.getItem) {
10 |       Paintable.methods.getItem = options.getItem;
11 |     }
12 | 
13 |     if (options && options.removeItem) {
14 |       Paintable.methods.removeItem = options.removeItem;
15 |     }
16 | 
17 |     Vue.component('paintable', Paintable);
18 |   }
19 | };
20 | 
21 | export default PaintablePlugin;
22 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
1 | describe('', () => {
2 |   it('', () => {});
3 | });
4 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "name": "vue-paintable",
 4 |   "alias": ["vue-paintable.vercel.app"],
 5 |   "builds": [
 6 |     {
 7 |       "src": "./package.json",
 8 |       "use": "@vercel/static-build",
 9 |       "config": {
10 |         "distDir": "demo"
11 |       }
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   productionSourceMap: false,
3 |   css: {
4 |     extract: false
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------