![](\"/images/eraser-color.svg\"/)
' + (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") + \"\";\n modal.appendChild(eraser);\n\n function closeModal() {\n modal.classList.add(\"closing\");\n setTimeout(function () {\n return document.body.removeChild(modal);\n }, 300);\n }\n}\n\nfunction setCursor(node, size, color) {\n var s = size < 4 ? 4 : size;\n var c = document.createElement(\"canvas\");\n c.width = c.height = s;\n var ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);else drawColorCircle(ctx, s, color);\n var cursor = c.toDataURL(\"image/png\");\n node.style.cursor = \"url(\" + cursor + \") \" + s / 2 + \" \" + s / 2 + \",auto\";\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.colorToRGB = colorToRGB;\nexports.luminance = luminance;\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [].concat(_toConsumableArray(ctx.getImageData(0, 0, 1, 1).data)).slice(0, 3);\n}\n\nfunction luminance(color) {\n return colorToRGB(color).reduce(function (a, b) {\n return a + b;\n }, 0) / 3;\n}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar paletteColors = exports.paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\",\");\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (_ref) {\n var onImageCreated = _ref.onImageCreated,\n fileinput = _ref.fileinput,\n _ref$startTask = _ref.startTask,\n startTask = _ref$startTask === undefined ? function () {\n return null;\n } : _ref$startTask,\n _ref$endTask = _ref.endTask,\n endTask = _ref$endTask === undefined ? function () {\n return null;\n } : _ref$endTask;\n\n // Callbacks onImageCreated with img tag and filename\n var originalFileName = \"pasted-image\";\n var askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n var fileReader = new FileReader();\n fileReader.onload = function () {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n var img = new Image();\n img.onload = function () {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName = fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function (ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n var imageFile = Array.prototype.find.call(items, function (e) {\n return e.kind == \"file\" && e.type.match(\"image\");\n });\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n var url = Array.prototype.find.call(items, function (e) {\n return e.kind == \"string\";\n });\n if (url) {\n url.getAsString(function (s) {\n return createImageWithFileContent(s);\n });\n }\n }\n};\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (background, _ref) {\n var onChange = _ref.onChange;\n\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n var switchCount = 0;\n function applyBackground() {\n var options = [\"#DDD\", \"#333\"];\n var current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n var meta = document.getElementById(\"theme-color\");\n meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n var bclass = document.body.classList;\n options.forEach(function (color, index) {\n return bclass.remove(\"background_n_\" + index);\n });\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\");\n }\n }\n var currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n};\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var onMouseDown = _ref.onMouseDown,\n onMouseUp = _ref.onMouseUp,\n OrginalImage = _ref.OrginalImage;\n\n // We cache some zoom related data to avoid getting them all the time\n var scale = void 0,\n rect = void 0,\n lastUsedPXsize = void 0;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n var ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n var mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\"mousedown\", function (e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n }, false);\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", function (ev) {\n ev.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n ev.clipboardData.setData(\"text/html\", '' +\n (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") +\n \"\";\n modal.appendChild(eraser);\n\n function closeModal() {\n modal.classList.add(\"closing\");\n setTimeout(() => document.body.removeChild(modal), 300);\n }\n}\n\nfunction setCursor(node, size, color) {\n let s = size < 4 ? 4 : size;\n let c = document.createElement(\"canvas\");\n c.width = c.height = s;\n let ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);\n else drawColorCircle(ctx, s, color);\n let cursor = c.toDataURL(\"image/png\");\n node.style.cursor = `url(${cursor}) ${s / 2} ${s / 2},auto`;\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorPicker.js","export function colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [...ctx.getImageData(0, 0, 1, 1).data].slice(0, 3);\n}\n\nexport function luminance(color) {\n return colorToRGB(color).reduce((a, b) => a + b, 0) / 3;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorToRGB.js","export const paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\n \",\"\n);\n\n\n\n// WEBPACK FOOTER //\n// ./src/palette.js","export default function({\n onImageCreated,\n fileinput,\n startTask = () => null,\n endTask = () => null\n}) {\n // Callbacks onImageCreated with img tag and filename\n let originalFileName = \"pasted-image\";\n let askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n let fileReader = new FileReader();\n fileReader.onload = () => {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n let img = new Image();\n img.onload = () => {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName =\n fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function(ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n let imageFile = Array.prototype.find.call(\n items,\n e => e.kind == \"file\" && e.type.match(\"image\")\n );\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n let url = Array.prototype.find.call(items, e => e.kind == \"string\");\n if (url) {\n url.getAsString(s => createImageWithFileContent(s));\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/getAnImage.js","export default function(background, { onChange }) {\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n let switchCount = 0;\n function applyBackground() {\n let options = [\"#DDD\", \"#333\"];\n let current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n let meta = document.getElementById(\"theme-color\");\n meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n let bclass = document.body.classList;\n options.forEach((color, index) => bclass.remove(\"background_n_\" + index));\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\n \"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\"\n );\n }\n }\n let currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/toggleAbleBackground.js","import { mergeCanvasAndImage } from \"./canvasMergerAndDonwloaderLink.js\";\n\nexport default function(canvas, { onMouseDown, onMouseUp, OrginalImage }) {\n // We cache some zoom related data to avoid getting them all the time\n let scale, rect, lastUsedPXsize;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n let ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n let mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\n \"mousedown\",\n function(e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n mergeCanvasAndImage(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n },\n false\n );\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", ev => {\n ev.preventDefault();\n mergeCanvasAndImage(canvas, OrginalImage);\n ev.clipboardData.setData(\n \"text/html\",\n '' + (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") + \"\";\n modal.appendChild(eraser);\n\n function closeModal() {\n modal.classList.add(\"closing\");\n setTimeout(function () {\n return document.body.removeChild(modal);\n }, 300);\n }\n}\n\nfunction setCursor(node, size, color) {\n var s = size < 4 ? 4 : size;\n var c = document.createElement(\"canvas\");\n c.width = c.height = s;\n var ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);else drawColorCircle(ctx, s, color);\n var cursor = c.toDataURL(\"image/png\");\n node.style.cursor = \"url(\" + cursor + \") \" + s / 2 + \" \" + s / 2 + \",auto\";\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.colorToRGB = colorToRGB;\nexports.luminance = luminance;\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [].concat(_toConsumableArray(ctx.getImageData(0, 0, 1, 1).data)).slice(0, 3);\n}\n\nfunction luminance(color) {\n return colorToRGB(color).reduce(function (a, b) {\n return a + b;\n }, 0) / 3;\n}\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar paletteColors = exports.paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\",\");\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (_ref) {\n var onImageCreated = _ref.onImageCreated,\n fileinput = _ref.fileinput,\n _ref$startTask = _ref.startTask,\n startTask = _ref$startTask === undefined ? function () {\n return null;\n } : _ref$startTask,\n _ref$endTask = _ref.endTask,\n endTask = _ref$endTask === undefined ? function () {\n return null;\n } : _ref$endTask;\n\n // Callbacks onImageCreated with img tag and filename\n var originalFileName = \"pasted-image\";\n var askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n var fileReader = new FileReader();\n fileReader.onload = function () {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n var img = new Image();\n img.onload = function () {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName = fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function (ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n var imageFile = Array.prototype.find.call(items, function (e) {\n return e.kind == \"file\" && e.type.match(\"image\");\n });\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n var url = Array.prototype.find.call(items, function (e) {\n return e.kind == \"string\";\n });\n if (url) {\n url.getAsString(function (s) {\n return createImageWithFileContent(s);\n });\n }\n }\n};\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (background, _ref) {\n var onChange = _ref.onChange;\n\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n var switchCount = 0;\n function applyBackground() {\n var options = [\"#DDD\", \"#333\"];\n var current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n var meta = document.getElementById(\"theme-color\");\n meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n var bclass = document.body.classList;\n options.forEach(function (color, index) {\n return bclass.remove(\"background_n_\" + index);\n });\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\");\n }\n }\n var currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n};\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = function (canvas, _ref) {\n var onMouseDown = _ref.onMouseDown,\n onMouseUp = _ref.onMouseUp,\n OrginalImage = _ref.OrginalImage;\n\n // We cache some zoom related data to avoid getting them all the time\n var scale = void 0,\n rect = void 0,\n lastUsedPXsize = void 0;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n var ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n var mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\"mousedown\", function (e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n }, false);\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", function (ev) {\n ev.preventDefault();\n (0, _canvasMergerAndDonwloaderLink.mergeCanvasAndImage)(canvas, OrginalImage);\n ev.clipboardData.setData(\"text/html\", '' +\n (\"eraser\" === currentColor ? \"Eraser selected\" : \"Eraser\") +\n \"\";\n modal.appendChild(eraser);\n\n function closeModal() {\n modal.classList.add(\"closing\");\n setTimeout(() => document.body.removeChild(modal), 300);\n }\n}\n\nfunction setCursor(node, size, color) {\n let s = size < 4 ? 4 : size;\n let c = document.createElement(\"canvas\");\n c.width = c.height = s;\n let ctx = c.getContext(\"2d\");\n\n if (color == \"eraser\") drawEraser(ctx, s);\n else drawColorCircle(ctx, s, color);\n let cursor = c.toDataURL(\"image/png\");\n node.style.cursor = `url(${cursor}) ${s / 2} ${s / 2},auto`;\n}\n\nfunction drawColorCircle(ctx, s, color) {\n ctx.beginPath();\n ctx.arc(s / 2, s / 2, s / 2, 0, 2 * Math.PI, false);\n ctx.fillStyle = color;\n ctx.fill();\n}\n\nfunction drawEraser(ctx, s) {\n ctx.fillStyle = \"#da502d\";\n ctx.fillRect(0, 0, s * 2 / 3, s);\n ctx.fillStyle = \"#6584a5\";\n ctx.fillRect(s * 2 / 3 - 1, 0, s, s);\n ctx.globalCompositeOperation = \"destination-in\";\n drawColorCircle(ctx, s, \"white\");\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorPicker.js","export function colorToRGB(color) {\n var canvas = document.createElement(\"canvas\");\n canvas.width = canvas.height = 1;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, 1, 1);\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, 1, 1);\n return [...ctx.getImageData(0, 0, 1, 1).data].slice(0, 3);\n}\n\nexport function luminance(color) {\n return colorToRGB(color).reduce((a, b) => a + b, 0) / 3;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/colorToRGB.js","export const paletteColors = \"#000000,#FFFFFF,#F44336,#E91E63,#9C27B0,#673AB7,#3F51B5,#2196F3,#03A9F4,#00BCD4,#009688,#4CAF50,#8BC34A,#CDDC39,#FFEB3B,#FFC107,#FF9800,#FF5722,#795548,#9E9E9E,#607D8B\".split(\n \",\"\n);\n\n\n\n// WEBPACK FOOTER //\n// ./src/palette.js","export default function({\n onImageCreated,\n fileinput,\n startTask = () => null,\n endTask = () => null\n}) {\n // Callbacks onImageCreated with img tag and filename\n let originalFileName = \"pasted-image\";\n let askingForImage = true;\n\n // Transforms the file input content to a real image\n function loadFile(fileToLoad) {\n startTask();\n let fileReader = new FileReader();\n fileReader.onload = () => {\n createImageWithFileContent(fileReader.result);\n endTask();\n };\n fileReader.onerror = endTask;\n fileReader.readAsDataURL(fileToLoad);\n }\n\n function createImageWithFileContent(result) {\n startTask();\n if (!askingForImage) return;\n let img = new Image();\n img.onload = () => {\n askingForImage = false;\n onImageCreated(img, originalFileName);\n endTask();\n };\n img.onerror = endTask;\n img.src = result;\n }\n\n // Setup of the welcome UI\n function askForImage() {\n fileinput && fileinput.addEventListener(\"change\", fileChanged);\n function fileChanged(changeEvent) {\n fileinput.removeEventListener(\"change\", fileChanged);\n originalFileName =\n fileinput.value.split(\"\\\\\").pop().split(\".\")[0] || \"image\";\n loadFile(changeEvent.target.files[0]);\n }\n }\n\n askForImage();\n\n window.addEventListener(\"paste\", function(ev) {\n handleDataTransferItems(ev.clipboardData.items);\n });\n\n document.body.addEventListener(\"dragover\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n });\n document.body.addEventListener(\"drop\", function(ev) {\n ev.preventDefault();\n ev.stopPropagation();\n handleDataTransferItems(ev.dataTransfer.items);\n });\n\n function handleDataTransferItems(items) {\n // Tries to paste an image\n let imageFile = Array.prototype.find.call(\n items,\n e => e.kind == \"file\" && e.type.match(\"image\")\n );\n originalFileName = \"pasted-image\";\n if (imageFile) {\n loadFile(imageFile.getAsFile());\n return;\n }\n // Tries to load a remote image given its adress\n let url = Array.prototype.find.call(items, e => e.kind == \"string\");\n if (url) {\n url.getAsString(s => createImageWithFileContent(s));\n }\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/getAnImage.js","export default function(background, { onChange }) {\n function switchBackground() {\n currentMode++;\n localStorage.setItem(\"background\", currentMode);\n applyBackground();\n }\n let switchCount = 0;\n function applyBackground() {\n let options = [\"#DDD\", \"#333\"];\n let current = currentMode % options.length;\n background.style.backgroundColor = options[current];\n let meta = document.getElementById(\"theme-color\");\n meta && meta.setAttribute(\"content\", \"#fff\");\n onChange(current);\n\n let bclass = document.body.classList;\n options.forEach((color, index) => bclass.remove(\"background_n_\" + index));\n bclass.add(\"background_n_\" + current);\n // https://www.youtube.com/watch?v=Pr8ETbGz35Q\n if (switchCount < 8) {\n console.log(current == 0 ? \"jour !\" : \"nuit !\");\n switchCount++;\n } else {\n console.log(\n \"Monsieur Jacquouille, je vous en prie, à la longue, ça devient casse-pied !\"\n );\n }\n }\n let currentMode = localStorage.getItem(\"background\") || 0;\n applyBackground();\n background.addEventListener(\"click\", switchBackground);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/toggleAbleBackground.js","import { mergeCanvasAndImage } from \"./canvasMergerAndDonwloaderLink.js\";\n\nexport default function(canvas, { onMouseDown, onMouseUp, OrginalImage }) {\n // We cache some zoom related data to avoid getting them all the time\n let scale, rect, lastUsedPXsize;\n\n function measureScale() {\n rect = canvas.getBoundingClientRect();\n scale = rect.width / canvas.width;\n if (lastUsedPXsize && ctx) {\n ctx.lineWidth = lastUsedPXsize / scale;\n }\n }\n measureScale();\n\n window.addEventListener(\"resize\", measureScale);\n\n let ctx = canvas.getContext(\"2d\");\n\n // To make the lines look slightly nicer\n ctx.lineCap = \"round\";\n\n // We cache the mouse position and previous mouse position.\n // Theay are defined by touch events, and used by the draw loop\n let mousePos = {\n x: 0,\n y: 0\n },\n lastPos = mousePos;\n\n canvas.addEventListener(\n \"mousedown\",\n function(e) {\n if (e.which == 3) {\n // We detected a right click on canvas, probably to save it.\n // We merge the content of the background image with the canvas\n mergeCanvasAndImage(canvas, OrginalImage);\n return;\n }\n mousePos = lastPos = getMousePos(e);\n startDrawLoop();\n onMouseDown();\n },\n false\n );\n\n // Allow ctrl-c > pasting to word & co\n document.addEventListener(\"copy\", ev => {\n ev.preventDefault();\n mergeCanvasAndImage(canvas, OrginalImage);\n ev.clipboardData.setData(\n \"text/html\",\n '