\r\n
\r\n
\r\n \r\n
\r\n
ChickenPaint on GitHub\r\n \r\n
\r\n ChickenPaint is a translation of ChibiPaint\r\n from Java to JavaScript by Nicholas Sherlock / Chicken Smoothie\r\n
\r\n
\r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer. All Rights Reserved\r\n
\r\n
\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n
\r\n \r\n
\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n
\r\n \r\n
Toolbar icons designed by Miglena Lapavicheva (Anteira)\r\n These icons are dual-licensed under GPL-3.0-or-later and CC-BY-3.0\r\n\r\nIncludes icons from the Tango Icon Theme for LibreOffice:\r\n All artwork is licensed under the Creative Commons Attribution-Share Alike 3.0\r\n United States License. To view a copy of this licence, visit\r\n https://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative\r\n Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.\r\n \r\n Credit for icons imported from git://git.gnome.org/gnome-icon-theme or derivatives\r\n of these goes to the GNOME project (https://www.gnome.org)\r\n Derivatives and new icons were created by Alexander Wilms <f.alexander.wilms@gmail.com> \r\n and Miroslav Mazel <mazelm@gmail.com>\r\n \r\nIncludes these MIT-licensed libraries:\r\n\r\n Includes the FileSaver.js library\r\n FileSaver.js Copyright © 2015 Eli Grey\r\n\r\n Includes the Pako zlib compression library\r\n Copyright (C) 2014-2015 by Vitaly Puzrin\r\n \r\n Includes the keymaster.js keyboard library\r\n Copyright (c) 2011-2013 Thomas Fuchs\r\n\r\n Includes the es6-promise library\r\n Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors\r\n\r\n Includes the jQuery throttle-debounce library\r\n Copyright (c) 2010 \"Cowboy\" Ben Alman\r\n\r\n Permission is hereby granted, free of charge, to any person\r\n obtaining a copy of this software and associated documentation\r\n files (the \"Software\"), to deal in the Software without\r\n restriction, including without limitation the rights to use,\r\n copy, modify, merge, publish, distribute, sublicense, and/or\r\n sell copies of the Software, and to permit persons to whom the\r\n Software is furnished to do so, subject to the following\r\n conditions:\r\n\r\n The above copyright notice and this permission notice shall be\r\n included in all copies or substantial portions of the Software.\r\n\r\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\r\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\r\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT \r\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\r\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\r\n OTHER DEALINGS IN THE SOFTWARE.\r\n\r\nIncludes the jQuery library \r\nCopyright jQuery Foundation and other contributors\r\n \r\n This software consists of voluntary contributions made by many\r\n individuals. For exact contribution history, see the revision \r\n history available at https://github.com/jquery/jquery\r\n \r\n The following license applies to all parts of this software \r\n except as documented below:\r\n \r\n Permission is hereby granted, free of charge, to any person \r\n obtaining a copy of this software and associated documentation\r\n files (the \"Software\"), to deal in the Software without\r\n restriction, including without limitation the rights to use, \r\n copy, modify, merge, publish, distribute, sublicense, and/or\r\n sell copies of the Software, and to permit persons to whom the\r\n Software is furnished to do so, subject to the following\r\n conditions:\r\n \r\n The above copyright notice and this permission notice shall be\r\n included in all copies or substantial portions of the Software.\r\n \r\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\r\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\r\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\r\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\r\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\r\n OTHER DEALINGS IN THE SOFTWARE.\r\n\r\nIncludes the jQuery PEP library\r\nCopyright jQuery Foundation and other contributors, https://jquery.org/\r\n \r\n This software consists of voluntary contributions made by many\r\n individuals. For exact contribution history, see the revision \r\n history available at https://github.com/jquery/PEP\r\n \r\n The following license applies to all parts of this software \r\n except as documented below:\r\n \r\n Permission is hereby granted, free of charge, to any person \r\n obtaining a copy of this software and associated documentation \r\n files (the \"Software\"), to deal in the Software without \r\n restriction, including without limitation the rights to use, \r\n copy, modify, merge, publish, distribute, sublicense, and/or \r\n sell copies of the Software, and to permit persons to whom the\r\n Software is furnished to do so, subject to the following \r\n conditions:\r\n\r\n The above copyright notice and this permission notice shall be\r\n included in all copies or substantial portions of the Software.\r\n \r\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\r\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\r\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND \r\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT \r\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, \r\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING \r\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR \r\n OTHER DEALINGS IN THE SOFTWARE.\r\n\r\nIncludes Font Awesome by Dave Gandy - https://fontawesome.io\r\n
\r\n
\r\n
\r\n
\r\n `);\r\n \r\n // Destroy the modal upon close\r\n dialog.on(\"hidden.bs.modal\", function(e) {\r\n dialog.remove();\r\n });\r\n \r\n dialog.modal({\r\n show: false\r\n });\r\n \r\n // Fix the backdrop location in the DOM by reparenting it to the chickenpaint container\r\n dialog.data(\"bs.modal\").$body = $(parent);\r\n \r\n parent.appendChild(dialog[0]);\r\n\r\n this.show = function() {\r\n dialog.modal(\"show\");\r\n };\r\n}",
"/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport $ from \"jquery\";\r\nimport {_} from \"../languages/lang.js\";\r\n\r\nexport default function CPBoxBlurDialog(parent, controller) {\r\n let\r\n dialog = \r\n $(`
\r\n `),\r\n \r\n blurAmountElem = $(\".chickenpaint-blur-amount\", dialog),\r\n blurIterationsElem = $(\".chickenpaint-blur-iterations\", dialog),\r\n applyButton = $(\".chickenpaint-apply-box-blur\", dialog);\r\n\r\n this.show = function() {\r\n dialog.modal(\"show\");\r\n };\r\n \r\n applyButton.on('click',function(e) {\r\n let\r\n blur = Math.max(parseInt(blurAmountElem.val(), 10), 1),\r\n iterations = Math.min(Math.max(parseInt(blurIterationsElem.val(), 10), 1), 8);\r\n \r\n controller.getArtwork().boxBlur(blur, blur, iterations);\r\n });\r\n \r\n dialog\r\n .modal({\r\n show: false\r\n })\r\n .on('shown.bs.modal', function() {\r\n blurAmountElem.trigger('focus');\r\n })\r\n .on('keypress', function(e) {\r\n if (e.key === \"Enter\") {\r\n applyButton.trigger('click');\r\n }\r\n });\r\n \r\n // Fix the backdrop location in the DOM by reparenting it to the chickenpaint container\r\n dialog.data(\"bs.modal\").$body = $(parent);\r\n \r\n parent.appendChild(dialog[0]);\r\n}",
"/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport ChickenPaint from \"../ChickenPaint.js\";\r\n\r\nimport CPPalette from \"./CPPalette.js\";\r\nimport CPCheckbox from \"./CPCheckbox.js\";\r\nimport CPColorSwatch from \"./CPColorSwatch.js\";\r\nimport CPSlider from \"./CPSlider.js\";\r\nimport {createCheckerboardPattern} from \"./CPGUIUtils.js\";\r\n\r\nimport CPColorBmp from \"../engine/CPColorBmp.js\";\r\n\r\nimport CPColor from \"../util/CPColor.js\";\r\nimport {isCanvasInterpolationSupported} from \"../util/CPPolyfill.js\";\r\n\r\nimport $ from \"jquery\";\r\nimport key from \"../../lib/keymaster.js\";\r\n\r\nimport {_} from \"../languages/lang\";\r\n\r\nfunction sliderCheckboxGroup(checkbox, slider) {\r\n let\r\n group = document.createElement(\"div\");\r\n\r\n group.className = \"chickenpaint-checkbox-slider-group\";\r\n\r\n group.appendChild(checkbox.getElement());\r\n group.appendChild(slider.getElement());\r\n\r\n return group;\r\n}\r\n\r\nfunction fillCombobox(combo, optionNames) {\r\n for (let key in optionNames) {\r\n if (optionNames.hasOwnProperty(key)) {\r\n let\r\n option = document.createElement(\"option\");\r\n\r\n option.appendChild(document.createTextNode(_(optionNames[key])));\r\n option.value = key;\r\n\r\n combo.appendChild(option);\r\n }\r\n }\r\n}\r\n\r\nfunction CPGradientPreview(controller) {\r\n let\r\n w = 150, h = 32,\r\n\r\n canvas = document.createElement(\"canvas\"),\r\n canvasContext = canvas.getContext(\"2d\"),\r\n\r\n checkerboard = createCheckerboardPattern(canvasContext),\r\n\r\n image = new CPColorBmp(w, h),\r\n imageCanvas = document.createElement(\"canvas\"),\r\n imageCanvasContext = imageCanvas.getContext(\"2d\"),\r\n\r\n gradient = controller.getCurGradient();\r\n\r\n function paint() {\r\n image.gradient(image.getBounds(), 0, 0, image.width, 0, gradient, true);\r\n imageCanvasContext.putImageData(image.imageData, 0, 0, 0, 0, w, h);\r\n\r\n canvasContext.fillRect(0, 0, canvas.width, canvas.height);\r\n canvasContext.drawImage(imageCanvas, 0, 0);\r\n }\r\n\r\n this.getElement = function() {\r\n return canvas;\r\n };\r\n\r\n controller.on(\"gradientChange\", function(_gradient) {\r\n gradient = _gradient;\r\n\r\n paint();\r\n });\r\n\r\n canvas.width = imageCanvas.width = w;\r\n canvas.height = imageCanvas.height = h;\r\n\r\n canvas.className = 'chickenpaint-gradient-preview';\r\n\r\n canvasContext.fillStyle = checkerboard;\r\n\r\n paint();\r\n}\r\n\r\nexport default function CPBrushPalette(controller) {\r\n CPPalette.call(this, controller, \"brush\", \"Tool options\");\r\n\r\n let\r\n brushPanel = new CPBrushPanel(controller),\r\n gradientPanel = new CPGradientPanel(controller),\r\n transformPanel = new CPTransformPanel(controller),\r\n\r\n body = this.getBodyElement();\r\n\r\n body.appendChild(brushPanel.getElement());\r\n body.appendChild(gradientPanel.getElement());\r\n body.appendChild(transformPanel.getElement());\r\n\r\n controller.on('modeChange', function(mode) {\r\n brushPanel.getElement().style.display = \"none\";\r\n gradientPanel.getElement().style.display = \"none\";\r\n transformPanel.getElement().style.display = \"none\";\r\n\r\n switch (mode) {\r\n case ChickenPaint.M_GRADIENTFILL:\r\n gradientPanel.getElement().style.display = \"block\";\r\n break;\r\n case ChickenPaint.M_TRANSFORM:\r\n transformPanel.getElement().style.display = \"block\";\r\n break;\r\n default:\r\n brushPanel.getElement().style.display = \"block\";\r\n break;\r\n }\r\n });\r\n}\r\n\r\nCPBrushPalette.prototype = Object.create(CPPalette.prototype);\r\nCPBrushPalette.prototype.constructor = CPBrushPalette;\r\n\r\nfunction CPBrushPanel(controller) {\r\n const\r\n TIP_NAMES = [\"Round Pixelated\", \"Round Hard Edge\", \"Round Soft\", \"Square Pixelated\", \"Square Hard Edge\"],\r\n BRUSH_SIZES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200];\r\n\r\n let\r\n panel = document.createElement(\"div\"),\r\n\r\n tipCombo = document.createElement(\"select\"),\r\n\r\n alphaCB = new CPCheckbox(false, _(\"Control brush opacity with pen pressure\")),\r\n alphaSlider = new CPSlider(1, 255),\r\n\r\n sizeCB = new CPCheckbox(true, _(\"Control brush size with pen pressure\")),\r\n sizeSlider = new CPSlider(1, 200, false, true),\r\n\r\n scatteringCB = new CPCheckbox(false, _(\"Control brush scattering with pen pressure\")),\r\n scatteringSlider = new CPSlider(0, 1000, false, true),\r\n\r\n resatSlider = new CPSlider(0, 100, false, true),\r\n bleedSlider = new CPSlider(0, 100, false, true),\r\n spacingSlider = new CPSlider(0, 100, false, true),\r\n smoothingSlider = new CPSlider(0, 100, false, true),\r\n\r\n brushPreview = new CPBrushPalette.CPBrushPreview(controller);\r\n\r\n function fillWithInitialValues() {\r\n alphaCB.setValue(controller.getBrushInfo().pressureAlpha);\r\n alphaSlider.setValue(controller.getAlpha());\r\n\r\n sizeCB.setValue(controller.getBrushInfo().pressureSize);\r\n sizeSlider.setValue(controller.getBrushSize());\r\n\r\n scatteringCB.setValue(controller.getBrushInfo().pressureScattering);\r\n scatteringSlider.setValue(~~(controller.getBrushInfo().scattering * 100));\r\n\r\n tipCombo.value = controller.getBrushInfo().tip;\r\n\r\n resatSlider.setValue(~~(controller.getBrushInfo().resat * 100));\r\n bleedSlider.setValue(~~(controller.getBrushInfo().bleed * 100));\r\n spacingSlider.setValue(~~(controller.getBrushInfo().spacing * 100));\r\n smoothingSlider.setValue(~~(controller.getBrushInfo().smoothing * 100));\r\n }\r\n\r\n this.getElement = function() {\r\n return panel;\r\n };\r\n\r\n alphaSlider.title = function (value) {\r\n return _(\"Opacity\") + \": \" + value;\r\n };\r\n\r\n alphaSlider.on('valueChange', function (value) {\r\n controller.setAlpha(value);\r\n });\r\n\r\n sizeSlider.title = function (value) {\r\n return _(\"Brush size\") + \": \" + value;\r\n };\r\n\r\n sizeSlider.on('valueChange', function (value) {\r\n controller.setBrushSize(value);\r\n });\r\n\r\n resatSlider.title = function (value) {\r\n return _(\"Color\") + \": \" + value + \"%\";\r\n };\r\n\r\n resatSlider.on('valueChange', function (value) {\r\n controller.getBrushInfo().resat = value / 100.0;\r\n controller.callToolListeners();\r\n });\r\n\r\n bleedSlider.title = function (value) {\r\n return _(\"Blend\") + \": \" + value + \"%\";\r\n };\r\n\r\n bleedSlider.on('valueChange', function (value) {\r\n controller.getBrushInfo().bleed = value / 100.0;\r\n controller.callToolListeners();\r\n });\r\n\r\n spacingSlider.title = function (value) {\r\n return _(\"Spacing\") + \": \" + value + \"%\";\r\n };\r\n\r\n spacingSlider.on('valueChange', function (value) {\r\n controller.getBrushInfo().spacing = value / 100.0;\r\n controller.callToolListeners();\r\n });\r\n\r\n scatteringSlider.title = function (value) {\r\n return _(\"Scattering\") + \": \" + value + \"%\";\r\n };\r\n\r\n scatteringSlider.on('valueChange', function (value) {\r\n controller.getBrushInfo().scattering = value / 100.0;\r\n controller.callToolListeners();\r\n });\r\n\r\n smoothingSlider.title = function (value) {\r\n return _(\"Smoothing\") + \": \" + value + \"%\";\r\n };\r\n\r\n smoothingSlider.on('valueChange', function (value) {\r\n controller.getBrushInfo().smoothing = value / 100.0;\r\n controller.callToolListeners();\r\n });\r\n\r\n scatteringCB.on('valueChange', function (state) {\r\n controller.getBrushInfo().pressureScattering = state;\r\n controller.callToolListeners();\r\n });\r\n\r\n alphaCB.on('valueChange', function (state) {\r\n controller.getBrushInfo().pressureAlpha = state;\r\n controller.callToolListeners();\r\n });\r\n\r\n sizeCB.on('valueChange', function (state) {\r\n controller.getBrushInfo().pressureSize = state;\r\n controller.callToolListeners();\r\n });\r\n\r\n tipCombo.addEventListener(\"change\", function(e) {\r\n controller.getBrushInfo().tip = parseInt(tipCombo.value, 10);\r\n });\r\n\r\n tipCombo.className = \"form-control form-control-sm\";\r\n fillCombobox(tipCombo, TIP_NAMES);\r\n\r\n panel.appendChild(tipCombo);\r\n\r\n panel.appendChild(brushPreview.getElement());\r\n\r\n panel.appendChild(sliderCheckboxGroup(sizeCB, sizeSlider));\r\n panel.appendChild(sliderCheckboxGroup(alphaCB, alphaSlider));\r\n panel.appendChild(resatSlider.getElement());\r\n panel.appendChild(bleedSlider.getElement());\r\n panel.appendChild(spacingSlider.getElement());\r\n panel.appendChild(sliderCheckboxGroup(scatteringCB, scatteringSlider));\r\n panel.appendChild(smoothingSlider.getElement());\r\n\r\n fillWithInitialValues();\r\n\r\n controller.on('toolChange', function(tool, toolInfo) {\r\n alphaSlider.setValue(toolInfo.alpha);\r\n sizeSlider.setValue(toolInfo.size);\r\n sizeCB.setValue(toolInfo.pressureSize);\r\n alphaCB.setValue(toolInfo.pressureAlpha);\r\n tipCombo.value = toolInfo.tip;\r\n scatteringCB.setValue(toolInfo.pressureScattering);\r\n\r\n if (~~(toolInfo.resat * 100.0) != resatSlider.value) {\r\n resatSlider.setValue(~~(toolInfo.resat * 100.0));\r\n }\r\n\r\n if (~~(toolInfo.bleed * 100.0) != bleedSlider.value) {\r\n bleedSlider.setValue(~~(toolInfo.bleed * 100.0));\r\n }\r\n\r\n if (~~(toolInfo.spacing * 100.0) != spacingSlider.value) {\r\n spacingSlider.setValue(~~(toolInfo.spacing * 100.0));\r\n }\r\n\r\n if (~~(toolInfo.scattering * 100.0) != scatteringSlider.value) {\r\n scatteringSlider.setValue(~~(toolInfo.scattering * 100.0));\r\n }\r\n\r\n if (~~(toolInfo.smoothing * 100.0) != smoothingSlider.value) {\r\n smoothingSlider.setValue(~~(toolInfo.smoothing * 100.0));\r\n }\r\n });\r\n\r\n key(\"1,2,3,4,5,6,7,8,9,0\", function(event, handler) {\r\n let\r\n shortcut = parseInt(handler.shortcut, 10);\r\n\r\n if (shortcut == 0) {\r\n shortcut = 10;\r\n }\r\n\r\n controller.setAlpha(Math.round(shortcut / 10 * 255));\r\n });\r\n\r\n key(\"{,[\", function() {\r\n let\r\n size = controller.getBrushSize();\r\n\r\n for (let i = BRUSH_SIZES.length - 1; i >= 0; i--) {\r\n if (size > BRUSH_SIZES[i]) {\r\n controller.setBrushSize(BRUSH_SIZES[i]);\r\n break;\r\n }\r\n }\r\n });\r\n\r\n key(\"},]\", function() {\r\n let\r\n size = controller.getBrushSize();\r\n\r\n for (let i = 0; i < BRUSH_SIZES.length; i++) {\r\n if (size < BRUSH_SIZES[i]) {\r\n controller.setBrushSize(BRUSH_SIZES[i]);\r\n break;\r\n }\r\n }\r\n });\r\n}\r\n\r\nCPBrushPalette.CPBrushPreview = function(controller) {\r\n let\r\n size = 16,\r\n \r\n canvas = document.createElement(\"canvas\"),\r\n canvasContext = canvas.getContext(\"2d\"),\r\n \r\n mouseCaptured = false;\r\n \r\n function paint() {\r\n canvasContext.clearRect(0, 0, canvas.width, canvas.height);\r\n \r\n canvasContext.beginPath();\r\n canvasContext.arc(canvas.width / 2, canvas.height / 2, size / 2 * window.devicePixelRatio, 0, Math.PI * 2);\r\n canvasContext.stroke();\r\n }\r\n \r\n function handleMouseDrag(e) {\r\n let\r\n offset = $(canvas).offset(),\r\n \r\n pt = {x: e.pageX - offset.left, y: e.pageY - offset.top},\r\n \r\n x = pt.x - $(canvas).width() / 2,\r\n y = pt.y - $(canvas).height() / 2,\r\n\r\n newSize = Math.round(Math.sqrt(x * x + y * y) * 2);\r\n \r\n size = Math.max(1, Math.min(200, newSize));\r\n\r\n paint();\r\n controller.setBrushSize(size);\r\n }\r\n \r\n function handleMouseUp(e) {\r\n if (mouseCaptured) {\r\n mouseCaptured = false;\r\n window.removeEventListener('mouseup', handleMouseUp);\r\n window.removeEventListener('mousemove', handleMouseDrag);\r\n }\r\n }\r\n \r\n this.getElement = function() {\r\n return canvas;\r\n };\r\n \r\n canvas.addEventListener('mousedown', function(e) {\r\n if (!mouseCaptured) {\r\n mouseCaptured = true;\r\n \r\n window.addEventListener('mouseup', handleMouseUp);\r\n window.addEventListener('mousemove', handleMouseDrag);\r\n \r\n handleMouseDrag(e);\r\n }\r\n });\r\n \r\n controller.on(\"toolChange\", function(tool, toolInfo) {\r\n if (toolInfo.size != size) {\r\n size = toolInfo.size;\r\n paint();\r\n }\r\n });\r\n \r\n canvas.width = 64; \r\n canvas.height = 64;\r\n \r\n if (window.devicePixelRatio > 1) {\r\n canvas.style.width = canvas.width + 'px';\r\n canvas.style.height = canvas.height + 'px';\r\n \r\n canvas.width = canvas.width * window.devicePixelRatio;\r\n canvas.height = canvas.height * window.devicePixelRatio;\r\n }\r\n \r\n canvas.className = 'chickenpaint-brush-preview';\r\n\r\n canvasContext.strokeStyle = 'black';\r\n canvasContext.lineWidth = 1.0 * window.devicePixelRatio;\r\n \r\n paint();\r\n};\r\n\r\nfunction CPGradientPanel(controller) {\r\n const\r\n gradientPanel = document.createElement(\"div\"),\r\n\r\n gradientPreview = new CPGradientPreview(controller),\r\n\r\n gradientStartSwatch = new CPColorSwatch(new CPColor(controller.getCurGradient()[0] & 0xFFFFFF), controller.getCurGradient()[0] >>> 24, gradientPanel),\r\n gradientEndSwatch = new CPColorSwatch(new CPColor(controller.getCurGradient()[1] & 0xFFFFFF), controller.getCurGradient()[1] >>> 24, gradientPanel);\r\n\r\n function updateGradient() {\r\n const\r\n gradient = [\r\n (gradientStartSwatch.getAlpha() << 24) | gradientStartSwatch.getColorRgb(),\r\n (gradientEndSwatch.getAlpha() << 24) | gradientEndSwatch.getColorRgb()\r\n ];\r\n\r\n controller.setCurGradient(gradient);\r\n }\r\n\r\n this.getElement = function() {\r\n return gradientPanel;\r\n };\r\n\r\n gradientPanel.className = \"chickenpaint-gradient-panel\";\r\n gradientPanel.style.display = \"none\";\r\n\r\n gradientStartSwatch.on(\"colorChange\", updateGradient);\r\n gradientStartSwatch.on(\"alphaChange\", updateGradient);\r\n gradientEndSwatch.on(\"colorChange\", updateGradient);\r\n gradientEndSwatch.on(\"alphaChange\", updateGradient);\r\n\r\n let\r\n title, colorsGroup, colorGroup;\r\n\r\n title = document.createElement(\"p\");\r\n title.innerHTML = \"Gradient\";\r\n\r\n gradientPanel.appendChild(title);\r\n gradientPanel.appendChild(gradientPreview.getElement());\r\n\r\n colorsGroup = document.createElement(\"div\");\r\n colorsGroup.className = \"chickenpaint-gradient-colors\";\r\n\r\n colorGroup = document.createElement(\"div\");\r\n colorGroup.className = \"chickenpaint-gradient-start-color\";\r\n\r\n colorGroup.appendChild(gradientStartSwatch.getElement());\r\n\r\n colorsGroup.appendChild(colorGroup);\r\n\r\n colorGroup = document.createElement(\"div\");\r\n colorGroup.className = \"chickenpaint-gradient-end-color\";\r\n\r\n colorGroup.appendChild(gradientEndSwatch.getElement());\r\n\r\n colorsGroup.appendChild(colorGroup);\r\n\r\n gradientPanel.appendChild(colorsGroup);\r\n}\r\n\r\nfunction CPTransformPanel(controller) {\r\n const\r\n TRANSFORM_INTERPOLATION = {smooth: \"Smooth\", sharp: \"Sharp\"};\r\n\r\n let\r\n panel = document.createElement(\"div\"),\r\n\r\n acceptButton = document.createElement(\"button\"),\r\n rejectButton = document.createElement(\"button\"),\r\n interpCombo = document.createElement(\"select\");\r\n\r\n this.getElement = function() {\r\n return panel;\r\n };\r\n\r\n panel.className = \"chickenpaint-transform-panel\";\r\n panel.style.display = \"none\";\r\n\r\n acceptButton.type = \"button\";\r\n rejectButton.type = \"button\";\r\n\r\n acceptButton.className = \"btn btn-primary btn-block\";\r\n rejectButton.className = \"btn btn-light btn-block\";\r\n\r\n acceptButton.innerHTML = \"Apply transform\";\r\n rejectButton.innerHTML = \"Cancel\";\r\n\r\n interpCombo.addEventListener(\"change\", function(e) {\r\n controller.setTransformInterpolation(this.value);\r\n });\r\n\r\n interpCombo.className = 'form-control chickenpaint-transform-interpolation';\r\n fillCombobox(interpCombo, TRANSFORM_INTERPOLATION);\r\n\r\n if (isCanvasInterpolationSupported()) {\r\n let\r\n interpGroup = document.createElement(\"div\"),\r\n interpLabel = document.createElement(\"label\");\r\n\r\n interpLabel.innerHTML = \"Transform style\";\r\n\r\n interpGroup.className = \"form-group\";\r\n interpGroup.appendChild(interpLabel);\r\n interpGroup.appendChild(interpCombo);\r\n\r\n panel.appendChild(interpGroup);\r\n }\r\n\r\n let\r\n buttonGroup = document.createElement(\"div\");\r\n\r\n buttonGroup.appendChild(acceptButton);\r\n buttonGroup.appendChild(rejectButton);\r\n\r\n buttonGroup.className = \"form-group\";\r\n\r\n panel.appendChild(buttonGroup);\r\n\r\n acceptButton.addEventListener(\"click\", function(e) {\r\n controller.actionPerformed({action: \"CPTransformAccept\"});\r\n e.preventDefault();\r\n });\r\n\r\n rejectButton.addEventListener(\"click\", function(e) {\r\n controller.actionPerformed({action: \"CPTransformReject\"});\r\n e.preventDefault();\r\n });\r\n}\r\n",
- "/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport EventEmitter from \"wolfy87-eventemitter\";\r\nimport $ from \"jquery\";\r\nimport key from \"../../lib/keymaster.js\";\r\n\r\nimport CPRect from \"../util/CPRect.js\";\r\nimport CPTransform from \"../util/CPTransform.js\";\r\nimport CPWacomTablet from \"../util/CPWacomTablet.js\";\r\nimport CPBezier from \"../util/CPBezier.js\";\r\nimport {throttle} from \"../util/throttle-debounce\";\r\nimport CPPolygon from \"../util/CPPolygon.js\";\r\nimport {setCanvasInterpolation} from \"../util/CPPolyfill.js\";\r\nimport CPVector from \"../util/CPVector.js\";\r\n\r\nimport ChickenPaint from \"../ChickenPaint.js\";\r\n\r\nimport CPBrushInfo from \"../engine/CPBrushInfo.js\";\r\nimport CPLayerGroup from \"../engine/CPLayerGroup.js\";\r\nimport CPMaskView from \"../engine/CPMaskView.js\";\r\n\r\nimport {createCheckerboardPattern} from \"./CPGUIUtils.js\";\r\nimport CPScrollbar from \"./CPScrollbar.js\";\r\nimport CPColor from \"../util/CPColor.js\";\r\nimport {setContrastingDrawStyle} from \"./CPGUIUtils.js\";\r\n\r\nfunction CPModeStack() {\r\n this.modes = [];\r\n}\r\n\r\n/* We have two distinguished mode indexes which correspond to the CPDefaultMode and the mode that the user has selected\r\n * in the tool palette (the global drawing mode). On top of that are other transient modes.\r\n */\r\nCPModeStack.MODE_INDEX_DEFAULT = 0;\r\nCPModeStack.MODE_INDEX_USER = 1;\r\n\r\nCPModeStack.prototype.setMode = function(index, newMode) {\r\n var\r\n oldMode = this.modes[index];\r\n\r\n if (oldMode == newMode) {\r\n return;\r\n }\r\n\r\n if (oldMode) {\r\n oldMode.leave();\r\n }\r\n\r\n this.modes[index] = newMode;\r\n newMode.enter();\r\n};\r\n\r\nCPModeStack.prototype.setDefaultMode = function(newMode) {\r\n newMode.transient = false;\r\n newMode.capture = false;\r\n\r\n this.setMode(CPModeStack.MODE_INDEX_DEFAULT, newMode);\r\n};\r\n\r\nCPModeStack.prototype.setUserMode = function(newMode) {\r\n // Leave any transient modes that were on top of the user mode\r\n for (var i = this.modes.length - 1; i > CPModeStack.MODE_INDEX_USER; i--) {\r\n this.modes[i].leave();\r\n this.modes.splice(i, 1);\r\n }\r\n\r\n newMode.transient = false;\r\n newMode.capture = false;\r\n\r\n this.setMode(CPModeStack.MODE_INDEX_USER, newMode);\r\n};\r\n\r\n/**\r\n * Deliver the event with the given name and array of parameters to the mode stack.\r\n *\r\n * @param event\r\n * @param params\r\n * @returns {boolean} True if any mode captured the event\r\n */\r\nCPModeStack.prototype.deliverEvent = function(event, params) {\r\n for (var i = this.modes.length - 1; i >= 0; i--) {\r\n var\r\n mode = this.modes[i];\r\n\r\n if (mode[event].apply(mode, params) || mode.capture && event != \"paint\") {\r\n /* If the event was handled, don't try to deliver it to anything further up the stack */\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n};\r\n\r\n// We can call these routines to deliver events that bubble up the mode stack\r\nfor (let eventName of [\"mouseDown\", \"mouseUp\"]) {\r\n CPModeStack.prototype[eventName] = function (e, button, pressure) {\r\n this.deliverEvent(eventName, [e, button, pressure]);\r\n };\r\n}\r\n\r\nfor (let eventName of [\"mouseDrag\", \"mouseMove\"]) {\r\n CPModeStack.prototype[eventName] = function (e, pressure) {\r\n this.deliverEvent(eventName, [e, pressure]);\r\n };\r\n}\r\n\r\nfor (let eventName of [\"keyDown\", \"keyUp\"]) {\r\n CPModeStack.prototype[eventName] = function (e) {\r\n if (this.deliverEvent(eventName, [e])) {\r\n // Swallow handled keypresses\r\n e.preventDefault();\r\n }\r\n };\r\n}\r\n\r\nCPModeStack.prototype.paint = function(context) {\r\n this.deliverEvent(\"paint\", [context]);\r\n};\r\n\r\n/**\r\n * Add a mode to the top of the mode stack.\r\n *\r\n * @param mode {CPMode}\r\n * @param transient {boolean} Set to true if the mode is expected to remove itself from stack upon completion.\r\n */\r\nCPModeStack.prototype.push = function(mode, transient) {\r\n var\r\n previousTop = this.peek();\r\n\r\n if (previousTop) {\r\n previousTop.suspend();\r\n }\r\n\r\n mode.transient = transient;\r\n mode.capture = false;\r\n\r\n mode.enter();\r\n\r\n this.modes.push(mode);\r\n};\r\n\r\nCPModeStack.prototype.peek = function() {\r\n if (this.modes.length > 0) {\r\n return this.modes[this.modes.length - 1];\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\n/**\r\n * Remove the node at the top of the stack and return the new top of the stack.\r\n *\r\n * @returns {*}\r\n */\r\nCPModeStack.prototype.pop = function() {\r\n var\r\n outgoingMode = this.modes.pop(),\r\n newTop = this.peek();\r\n\r\n if (outgoingMode) {\r\n outgoingMode.leave();\r\n }\r\n\r\n if (newTop) {\r\n newTop.resume();\r\n }\r\n\r\n return newTop;\r\n};\r\n\r\nexport default function CPCanvas(controller) {\r\n const\r\n BUTTON_PRIMARY = 0,\r\n BUTTON_WHEEL = 1,\r\n BUTTON_SECONDARY = 2,\r\n\r\n MIN_ZOOM = 0.10,\r\n MAX_ZOOM = 16.0,\r\n\r\n CURSOR_DEFAULT = \"default\", CURSOR_PANNABLE = \"grab\", CURSOR_PANNING = \"grabbing\", CURSOR_CROSSHAIR = \"crosshair\",\r\n CURSOR_MOVE = \"move\", CURSOR_NESW_RESIZE = \"nesw-resize\", CURSOR_NWSE_RESIZE = \"nwse-resize\",\r\n CURSOR_NS_RESIZE = \"ns-resize\", CURSOR_EW_RESIZE = \"ew-resize\";\r\n\r\n let\r\n that = this,\r\n \r\n canvasContainer = document.createElement(\"div\"),\r\n canvasContainerTop = document.createElement(\"div\"),\r\n canvasContainerBottom = document.createElement(\"div\"),\r\n \r\n // Our canvas that fills the entire screen\r\n canvas = document.createElement(\"canvas\"),\r\n canvasContext = canvas.getContext(\"2d\"),\r\n \r\n // Our cache of the artwork's fusion to be drawn onto our main canvas using our current transform\r\n artworkCanvas = document.createElement(\"canvas\"),\r\n artworkCanvasContext = artworkCanvas.getContext(\"2d\"),\r\n \r\n checkerboardPattern = createCheckerboardPattern(canvasContext),\r\n \r\n artwork = controller.getArtwork(),\r\n\r\n // Canvas transformations\r\n zoom = 1,\r\n offsetX = 0, offsetY = 0,\r\n canvasRotation = 0.0,\r\n transform = new CPTransform(),\r\n interpolation = false,\r\n\r\n // Grid options\r\n showGrid = false,\r\n gridSize = 32,\r\n \r\n mouseX = 0, mouseY = 0,\r\n mouseIn = false, mouseDown = [false, false, false] /* Track each button independently */, wacomPenDown = false,\r\n\r\n sawPen = false,\r\n sawTouchWithPressure = false,\r\n\r\n /* The area of the document that should have its layers fused and repainted to the screen\r\n * (i.e. an area modified by drawing tools). \r\n * \r\n * Initially set to the size of the artwork so we can repaint the whole thing.\r\n */\r\n artworkUpdateRegion = artwork.getBounds(),\r\n \r\n /**\r\n * The area of the canvas that should be repainted to the screen during the next repaint internal (in canvas\r\n * coordinates).\r\n */\r\n repaintRegion = new CPRect(0, 0, 0, 0),\r\n scheduledRepaint = false,\r\n\r\n\t /**\r\n * If we're viewing a single mask on its own instead of the document fusion, we store that view here.\r\n *\r\n * @type {CPMaskView}\r\n */\r\n maskView,\r\n \r\n //\r\n // Modes system: modes control the way the GUI is reacting to the user input\r\n // All the tools are implemented through modes\r\n //\r\n \r\n defaultMode,\r\n colorPickerMode,\r\n panMode,\r\n rotateCanvasMode,\r\n floodFillMode,\r\n gradientFillMode,\r\n rectSelectionMode,\r\n moveToolMode,\r\n transformMode,\r\n\r\n // this must correspond to the stroke modes defined in CPToolInfo\r\n drawingModes = [],\r\n\r\n modeStack = new CPModeStack(),\r\n\r\n curDrawMode,\r\n \r\n horzScroll = new CPScrollbar(false), \r\n vertScroll = new CPScrollbar(true),\r\n \r\n tablet = CPWacomTablet.getRef();\r\n\r\n Math.sign = Math.sign || function(x) {\r\n x = +x; // convert to a number\r\n if (x === 0 || isNaN(x)) {\r\n return x;\r\n }\r\n return x > 0 ? 1 : -1;\r\n };\r\n\r\n // Parent class with empty event handlers for those drawing modes that don't need every event\r\n function CPMode() {\r\n }\r\n\r\n\t/**\r\n * True if this mode will be exiting the mode stack as soon as the current interation is complete.\r\n *\r\n * @type {boolean}\r\n */\r\n CPMode.prototype.transient = false;\r\n\r\n\t/**\r\n * If true, no input events will be sent to any modes underneath this one (event stream is captured).\r\n *\r\n * Painting events will continue to bubble.\r\n *\r\n * @type {boolean}\r\n */\r\n CPMode.prototype.capture = false;\r\n \r\n CPMode.prototype.enter = function() {\r\n setCursor(CURSOR_DEFAULT);\r\n };\r\n\r\n CPMode.prototype.leave = function() {\r\n this.capture = false;\r\n };\r\n\r\n CPMode.prototype.mouseMove = CPMode.prototype.paint = CPMode.prototype.mouseDown\r\n = CPMode.prototype.mouseDrag = CPMode.prototype.mouseUp = CPMode.prototype.keyDown\r\n = CPMode.prototype.suspend = CPMode.prototype.resume = CPMode.prototype.keyUp = function() {};\r\n\r\n //\r\n // Default UI Mode when not doing anything: used to start the other modes\r\n //\r\n\r\n function CPDefaultMode() {\r\n }\r\n \r\n CPDefaultMode.prototype = Object.create(CPMode.prototype);\r\n CPDefaultMode.prototype.constructor = CPDefaultMode;\r\n \r\n CPDefaultMode.prototype.mouseDown = function(e, button, pressure) {\r\n var\r\n spacePressed = key.isPressed(\"space\");\r\n \r\n if (!spacePressed\r\n && (button == BUTTON_SECONDARY || button == BUTTON_PRIMARY && e.altKey)) {\r\n modeStack.push(colorPickerMode, true);\r\n // Avoid infinite recursion by only delivering the event to the new mode (don't let it bubble back to us!)\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n } else if (!spacePressed && button == BUTTON_PRIMARY && !e.altKey && key.isPressed(\"r\")) {\r\n modeStack.push(rotateCanvasMode, true);\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n } else if (button == BUTTON_WHEEL || !e.altKey && spacePressed && button == BUTTON_PRIMARY){\r\n modeStack.push(panMode, true);\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n }\r\n };\r\n \r\n CPDefaultMode.prototype.keyDown = function(e) {\r\n\t\t\tif (e.key.toLowerCase()===\"r\" && e.key !== \" \") {\r\n modeStack.push(rotateCanvasMode, true);\r\n modeStack.peek().keyDown(e);\r\n\t\t\t} else if (e.key.toLowerCase() !== \"r\" && e.key === \" \" && !e.altKey){\r\n // We can start the pan mode before the mouse button is even pressed, so that the \"grabbable\" cursor appears\r\n modeStack.push(panMode, true);\r\n modeStack.peek().keyDown(e);\r\n\t\t\t\treturn true;\r\n }\r\n };\r\n\r\n\t/**\r\n * A base for the three drawing modes, so they can all share the same brush-preview-circle drawing behaviour.\r\n *\r\n * @constructor\r\n */\r\n function CPDrawingMode() {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n /* The last rectangle we dirtied with a brush preview circle, or null if one hasn't been drawn yet */\r\n this.oldPreviewRect = null;\r\n }\r\n\r\n CPDrawingMode.prototype = Object.create(CPMode.prototype);\r\n CPDrawingMode.prototype.constructor = CPDrawingMode;\r\n\r\n /**\r\n * Get a rectangle that encloses the preview brush, in screen coordinates.\r\n */\r\n CPDrawingMode.prototype.getBrushPreviewOval = function() {\r\n var\r\n brushSize = controller.getBrushSize() * zoom;\r\n\r\n return new CPRect(\r\n mouseX - brushSize / 2,\r\n mouseY - brushSize / 2,\r\n mouseX + brushSize / 2,\r\n mouseY + brushSize / 2\r\n );\r\n };\r\n\r\n /**\r\n * Queues up the brush preview oval to be drawn.\r\n */\r\n CPDrawingMode.prototype.queueBrushPreview = function() {\r\n /* If we're not the top-most mode, it's unlikely that left clicking will drawing for us, so don't consider\r\n * painting the brush preview\r\n */\r\n if (modeStack.peek() != this) {\r\n return;\r\n }\r\n\r\n this.shouldPaintBrushPreview = true;\r\n\r\n var\r\n rect = this.getBrushPreviewOval();\r\n\r\n rect.grow(2, 2);\r\n\r\n // If a brush preview was drawn previously, stretch the repaint region to remove that old copy\r\n if (this.oldPreviewRect != null) {\r\n rect.union(this.oldPreviewRect);\r\n this.oldPreviewRect = null;\r\n }\r\n\r\n repaintRect(rect);\r\n };\r\n\r\n\t/**\r\n * Erase the brush preview if one had been drawn\r\n */\r\n CPDrawingMode.prototype.eraseBrushPreview = function() {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n if (this.oldPreviewRect != null) {\r\n repaintRect(this.oldPreviewRect);\r\n this.oldPreviewRect = null;\r\n }\r\n };\r\n\r\n CPDrawingMode.prototype.mouseMove = function(e, pressure) {\r\n this.queueBrushPreview();\r\n };\r\n\r\n CPDrawingMode.prototype.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n\r\n if (mouseIn) {\r\n this.queueBrushPreview();\r\n }\r\n };\r\n\r\n CPDrawingMode.prototype.leave = function() {\r\n CPMode.prototype.leave.call(this);\r\n this.eraseBrushPreview();\r\n };\r\n\r\n CPDrawingMode.prototype.suspend = CPDrawingMode.prototype.leave;\r\n CPDrawingMode.prototype.resume = CPDrawingMode.prototype.enter;\r\n\r\n CPDrawingMode.prototype.paint = function() {\r\n if (this.shouldPaintBrushPreview) {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n var\r\n r = this.getBrushPreviewOval();\r\n\r\n canvasContext.beginPath();\r\n\r\n canvasContext.arc(\r\n (r.left + r.right) / 2,\r\n (r.top + r.bottom) / 2,\r\n r.getWidth() / 2,\r\n 0,\r\n Math.PI * 2\r\n );\r\n\r\n canvasContext.stroke();\r\n\r\n r.grow(2, 2);\r\n\r\n if (this.oldPreviewRect == null) {\r\n this.oldPreviewRect = r;\r\n } else {\r\n this.oldPreviewRect.union(r);\r\n }\r\n }\r\n };\r\n\r\n function CPFreehandMode() {\r\n CPDrawingMode.call(this);\r\n\r\n this.smoothMouse = {x:0.0, y:0.0};\r\n }\r\n \r\n CPFreehandMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPFreehandMode.prototype.constructor = CPFreehandMode;\r\n \r\n CPFreehandMode.prototype.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n var\r\n pf = coordToDocument({x: mouseX, y:mouseY});\r\n\r\n this.eraseBrushPreview();\r\n\t\r\n\t if (artwork.beginStroke(pf.x, pf.y, pressure)) {\r\n\t\t this.capture = true;\r\n\t\t\r\n\t\t this.smoothMouse = pf;\r\n\t\t\r\n\t\t return true;\r\n\t }\r\n }\r\n };\r\n\r\n CPFreehandMode.prototype.mouseDrag = function(e, pressure) {\r\n if (this.capture) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY}),\r\n smoothing = Math.min(0.999, Math.pow(controller.getBrushInfo().smoothing, 0.3));\r\n\r\n this.smoothMouse.x = (1.0 - smoothing) * pf.x + smoothing * this.smoothMouse.x;\r\n this.smoothMouse.y = (1.0 - smoothing) * pf.y + smoothing * this.smoothMouse.y;\r\n\r\n artwork.continueStroke(this.smoothMouse.x, this.smoothMouse.y, pressure);\r\n\r\n return true;\r\n } else {\r\n this.mouseMove(e);\r\n }\r\n };\r\n\r\n CPFreehandMode.prototype.mouseUp = function(e, button, pressure) {\r\n if (this.capture) {\r\n if (button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n artwork.endStroke();\r\n }\r\n return true;\r\n }\r\n };\r\n \r\n function CPLineMode() {\r\n var\r\n dragLineFrom, dragLineTo,\r\n LINE_PREVIEW_WIDTH = 1;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n this.capture = true;\r\n dragLineFrom = dragLineTo = {x: mouseX + 0.5, y: mouseY + 0.5};\r\n\r\n this.eraseBrushPreview();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n // The old line position that we'll invalidate for redraw\r\n invalidateRect = new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n );\r\n\r\n dragLineTo = {x: mouseX + 0.5, y: mouseY + 0.5}; // Target centre of pixel\r\n\r\n if (e.shiftKey) {\r\n // Snap to nearest 45 degrees\r\n var\r\n snap = Math.PI / 4,\r\n angle = Math.round(Math.atan2(dragLineTo.y - dragLineFrom.y, dragLineTo.x - dragLineFrom.x) / snap);\r\n\r\n switch (angle) {\r\n case 0:\r\n case 4:\r\n dragLineTo.y = dragLineFrom.y;\r\n break;\r\n\r\n case 2:\r\n case 6:\r\n dragLineTo.x = dragLineFrom.x;\r\n break;\r\n\r\n default:\r\n angle *= snap;\r\n\r\n var\r\n length = Math.sqrt((dragLineTo.y - dragLineFrom.y) * (dragLineTo.y - dragLineFrom.y) + (dragLineTo.x - dragLineFrom.x) * (dragLineTo.x - dragLineFrom.x));\r\n\r\n dragLineTo.x = dragLineFrom.x + length * Math.cos(angle);\r\n dragLineTo.y = dragLineFrom.y + length * Math.sin(angle);\r\n }\r\n }\r\n\r\n // The new line position\r\n invalidateRect.union(new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n ));\r\n\r\n repaintRect(invalidateRect);\r\n\r\n return true;\r\n } else {\r\n this.mouseMove.call(this, e);\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n var\r\n from = coordToDocument(dragLineFrom),\r\n to = coordToDocument(dragLineTo);\r\n\r\n this.capture = false;\r\n\r\n this.drawLine(from, to);\r\n\r\n var\r\n invalidateRect = new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n );\r\n \r\n repaintRect(invalidateRect);\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (this.capture) {\r\n canvasContext.lineWidth = LINE_PREVIEW_WIDTH;\r\n canvasContext.beginPath();\r\n canvasContext.moveTo(dragLineFrom.x, dragLineFrom.y);\r\n canvasContext.lineTo(dragLineTo.x, dragLineTo.y);\r\n canvasContext.stroke();\r\n } else {\r\n // Draw the regular brush preview circle\r\n CPDrawingMode.prototype.paint.call(this);\r\n }\r\n };\r\n\r\n CPDrawingMode.call(this);\r\n }\r\n \r\n CPLineMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPLineMode.prototype.constructor = CPLineMode;\r\n\r\n CPLineMode.prototype.drawLine = function(from, to) {\r\n artwork.beginStroke(from.x, from.y, 1);\r\n artwork.continueStroke(to.x, to.y, 1);\r\n artwork.endStroke();\r\n };\r\n\r\n function CPBezierMode() {\r\n const\r\n BEZIER_POINTS = 500,\r\n BEZIER_POINTS_PREVIEW = 100,\r\n\r\n BEZIER_STATE_INITIAL = 0,\r\n BEZIER_STATE_POINT_1 = 1,\r\n BEZIER_STATE_POINT_2 = 2;\r\n\r\n let\r\n dragBezierMode = BEZIER_STATE_INITIAL,\r\n dragBezierP0, dragBezierP1, dragBezierP2, dragBezierP3;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n dragBezierMode = BEZIER_STATE_INITIAL;\r\n dragBezierP0 = dragBezierP1 = dragBezierP2 = dragBezierP3 = p;\r\n this.capture = true;\r\n\r\n this.eraseBrushPreview();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n // Handles the first part of the Bezier where the user drags out a straight line\r\n this.mouseDrag = function(e) {\r\n if (this.capture && dragBezierMode === BEZIER_STATE_INITIAL) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n dragBezierP2 = dragBezierP3 = p;\r\n\r\n that.repaintAll();\r\n\r\n return true;\r\n } else {\r\n this.mouseMove.call(this, e);\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n switch (dragBezierMode) {\r\n case BEZIER_STATE_INITIAL:\r\n dragBezierMode = BEZIER_STATE_POINT_1;\r\n break;\r\n case BEZIER_STATE_POINT_1:\r\n dragBezierMode = BEZIER_STATE_POINT_2;\r\n break;\r\n case BEZIER_STATE_POINT_2:\r\n this.capture = false;\r\n\r\n let\r\n p0 = dragBezierP0,\r\n p1 = dragBezierP1,\r\n p2 = dragBezierP2,\r\n p3 = dragBezierP3,\r\n\r\n bezier = new CPBezier();\r\n\r\n bezier.x0 = p0.x;\r\n bezier.y0 = p0.y;\r\n bezier.x1 = p1.x;\r\n bezier.y1 = p1.y;\r\n bezier.x2 = p2.x;\r\n bezier.y2 = p2.y;\r\n bezier.x3 = p3.x;\r\n bezier.y3 = p3.y;\r\n\r\n let\r\n x = new Array(BEZIER_POINTS),\r\n y = new Array(BEZIER_POINTS);\r\n\r\n bezier.compute(x, y, BEZIER_POINTS);\r\n\r\n artwork.beginStroke(x[0], y[0], 1);\r\n for (let i = 1; i < BEZIER_POINTS; i++) {\r\n artwork.continueStroke(x[i], y[i], 1);\r\n }\r\n artwork.endStroke();\r\n that.repaintAll();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseMove = function(e, pressure) {\r\n if (this.capture) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (dragBezierMode == BEZIER_STATE_POINT_1) {\r\n dragBezierP1 = p;\r\n } else if (dragBezierMode == BEZIER_STATE_POINT_2) {\r\n dragBezierP2 = p;\r\n }\r\n that.repaintAll(); // FIXME: repaint only the bezier region\r\n\r\n return true;\r\n } else {\r\n // Draw the normal brush preview while not in the middle of a bezier operation\r\n CPDrawingMode.prototype.mouseMove.call(this, e, pressure);\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (this.capture) {\r\n let\r\n bezier = new CPBezier(),\r\n\r\n p0 = coordToDisplay(dragBezierP0),\r\n p1 = coordToDisplay(dragBezierP1),\r\n p2 = coordToDisplay(dragBezierP2),\r\n p3 = coordToDisplay(dragBezierP3);\r\n\r\n bezier.x0 = p0.x;\r\n bezier.y0 = p0.y;\r\n bezier.x1 = p1.x;\r\n bezier.y1 = p1.y;\r\n bezier.x2 = p2.x;\r\n bezier.y2 = p2.y;\r\n bezier.x3 = p3.x;\r\n bezier.y3 = p3.y;\r\n\r\n let\r\n x = new Array(BEZIER_POINTS_PREVIEW),\r\n y = new Array(BEZIER_POINTS_PREVIEW);\r\n \r\n bezier.compute(x, y, BEZIER_POINTS_PREVIEW);\r\n\r\n canvasContext.beginPath();\r\n \r\n canvasContext.moveTo(x[0], y[0]);\r\n for (let i = 1; i < BEZIER_POINTS_PREVIEW; i++) {\r\n canvasContext.lineTo(x[i], y[i]);\r\n }\r\n \r\n canvasContext.moveTo(~~p0.x, ~~p0.y);\r\n canvasContext.lineTo(~~p1.x, ~~p1.y);\r\n \r\n canvasContext.moveTo(~~p2.x, ~~p2.y);\r\n canvasContext.lineTo(~~p3.x, ~~p3.y);\r\n \r\n canvasContext.stroke();\r\n } else {\r\n // Paint the regular brush preview\r\n CPDrawingMode.prototype.paint.call(this);\r\n }\r\n };\r\n\r\n CPDrawingMode.call(this);\r\n }\r\n \r\n CPBezierMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPBezierMode.prototype.constructor = CPBezierMode;\r\n\r\n function CPColorPickerMode() {\r\n var \r\n mouseButton;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n } else if (!key.isPressed(\"space\") && (button == BUTTON_PRIMARY && (!this.transient || e.altKey) || button == BUTTON_SECONDARY)) {\r\n mouseButton = button;\r\n this.capture = true;\r\n\r\n setCursor(CURSOR_CROSSHAIR);\r\n\r\n this.mouseDrag(e);\r\n\r\n return true;\r\n } else if (this.transient) {\r\n // If we're not sampling and we get a button not intended for us, we probably shouldn't be on the stack\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (artwork.isPointWithin(pf.x, pf.y)) {\r\n controller.setCurColor(new CPColor(artwork.colorPicker(pf.x, pf.y)));\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == mouseButton) {\r\n mouseButton = -1;\r\n this.capture = false;\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n if (this.transient) {\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n mouseButton = -1;\r\n };\r\n }\r\n \r\n CPColorPickerMode.prototype = Object.create(CPMode.prototype);\r\n CPColorPickerMode.prototype.constructor = CPColorPickerMode;\r\n\r\n function CPPanCanvasMode() {\r\n var\r\n panningX, panningY,\r\n panningOffset,\r\n panningButton;\r\n\r\n this.keyDown = function(e) {\r\n if (e.key === \" \") {\r\n // If we're not already panning, then advertise that a left-click would pan\r\n if (!this.capture) {\r\n setCursor(CURSOR_PANNABLE);\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyUp = function(e) {\r\n if (this.transient && panningButton != BUTTON_WHEEL && e.key === \" \") {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop(); // yield control to the default mode\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n } else if (button == BUTTON_WHEEL || key.isPressed(\"space\") && button == BUTTON_PRIMARY\r\n || !this.transient && button == BUTTON_PRIMARY) {\r\n this.capture = true;\r\n panningButton = button;\r\n panningX = e.pageX;\r\n panningY = e.pageY;\r\n panningOffset = that.getOffset();\r\n setCursor(CURSOR_PANNING);\r\n\r\n return true;\r\n } else if (this.transient) {\r\n // If we're not panning and we get a button not intended for us, we probably shouldn't be on the stack\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n that.setOffset(panningOffset.x + e.pageX - panningX, panningOffset.y + e.pageY - panningY);\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == panningButton) {\r\n panningButton = -1;\r\n this.capture = false;\r\n\r\n if (this.transient && !key.isPressed(\"space\")) {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n setCursor(CURSOR_PANNABLE);\r\n };\r\n }\r\n \r\n CPPanCanvasMode.prototype = Object.create(CPMode.prototype);\r\n CPPanCanvasMode.prototype.constructor = CPPanCanvasMode;\r\n\r\n function CPFloodFillMode() {\r\n }\r\n \r\n CPFloodFillMode.prototype = Object.create(CPMode.prototype);\r\n CPFloodFillMode.prototype.constructor = CPFloodFillMode;\r\n\r\n CPFloodFillMode.prototype.mouseDown = function(e, button, pressure) {\r\n if (button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (artwork.isPointWithin(pf.x, pf.y)) {\r\n artwork.floodFill(pf.x, pf.y);\r\n that.repaintAll();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n function CPRectSelectionMode() {\r\n var\r\n firstClick,\r\n curRect = new CPRect(0, 0, 0, 0),\r\n selectingButton = -1;\r\n\r\n this.mouseDown = function (e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")) {\r\n var\r\n p = coordToDocumentInt({x: mouseX, y: mouseY});\r\n\r\n selectingButton = button;\r\n\r\n curRect.makeEmpty();\r\n firstClick = p;\r\n\r\n that.repaintAll();\r\n\r\n this.capture = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (!this.capture)\r\n return false;\r\n\r\n var\r\n p = coordToDocumentInt({x: mouseX, y: mouseY}),\r\n square = e.shiftKey,\r\n \r\n squareDist = ~~Math.max(Math.abs(p.x - firstClick.x), Math.abs(p.y - firstClick.y));\r\n\r\n if (p.x >= firstClick.x) {\r\n curRect.left = firstClick.x;\r\n curRect.right = (square ? firstClick.x + squareDist : p.x) + 1;\r\n } else {\r\n curRect.left = square ? firstClick.x - squareDist : p.x;\r\n curRect.right = firstClick.x + 1;\r\n }\r\n\r\n if (p.y >= firstClick.y) {\r\n curRect.top = firstClick.y;\r\n curRect.bottom = (square ? firstClick.y + squareDist : p.y) + 1;\r\n } else {\r\n curRect.top = square ? firstClick.y - squareDist : p.y;\r\n curRect.bottom = firstClick.y + 1;\r\n }\r\n\r\n that.repaintAll();\r\n\r\n return true;\r\n };\r\n\r\n this.mouseUp = function (e, button, pressure) {\r\n if (this.capture && button == selectingButton) {\r\n artwork.rectangleSelection(curRect);\r\n curRect.makeEmpty();\r\n\r\n that.repaintAll();\r\n\r\n this.capture = false;\r\n selectingButton = -1;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (!curRect.isEmpty()) {\r\n canvasContext.lineWidth = 1;\r\n plotSelectionRect(canvasContext, curRect);\r\n }\r\n };\r\n }\r\n\r\n CPRectSelectionMode.prototype = Object.create(CPMode.prototype);\r\n CPRectSelectionMode.prototype.constructor = CPRectSelectionMode;\r\n\r\n function CPMoveToolMode() {\r\n var \r\n lastPoint,\r\n copyMode,\r\n firstMove = false;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !key.isPressed(\"space\") && checkCurrentLayerIsVisible()) {\r\n lastPoint = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n copyMode = e.altKey;\r\n firstMove = true;\r\n this.capture = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = throttle(25, function(e) {\r\n if (this.capture) {\r\n var\r\n p = coordToDocument({x: mouseX, y: mouseY}),\r\n\r\n moveFloat = {x: p.x - lastPoint.x, y: p.y - lastPoint.y},\r\n moveInt = {x: ~~moveFloat.x, y: ~~moveFloat.y}; // Round towards zero\r\n\r\n if (moveInt.x != 0 || moveInt.y != 0) {\r\n artwork.move(moveInt.x, moveInt.y, copyMode && firstMove);\r\n firstMove = false;\r\n }\r\n\r\n /*\r\n * Nudge the last point by the remainder we weren't able to move this iteration (due to move() only\r\n * accepting integer offsets). This'll carry that fractional part of the move over for next iteration.\r\n */\r\n lastPoint.x = p.x - (moveFloat.x - moveInt.x);\r\n lastPoint.y = p.y - (moveFloat.y - moveInt.y);\r\n\r\n return true;\r\n }\r\n });\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n if (this.transient) {\r\n modeStack.pop();\r\n }\r\n return true;\r\n }\r\n };\r\n }\r\n\r\n CPMoveToolMode.prototype = Object.create(CPMode.prototype);\r\n CPMoveToolMode.prototype.constructor = CPMoveToolMode;\r\n\r\n CPMoveToolMode.prototype.mouseMove = function(e) {\r\n if (!key.isPressed(\"space\") && !e.altKey) {\r\n setCursor(CURSOR_MOVE);\r\n return true;\r\n }\r\n };\r\n\r\n CPMoveToolMode.prototype.enter = function() {\r\n setCursor(CURSOR_MOVE);\r\n };\r\n\r\n function CPTransformMode() {\r\n const\r\n HANDLE_RADIUS = 3,\r\n\r\n DRAG_NONE = -1,\r\n DRAG_ROTATE = -2,\r\n DRAG_MOVE = -3,\r\n DRAG_NW_CORNER = 0,\r\n DRAG_N_EDGE = 1,\r\n DRAG_NE_CORNER = 2,\r\n DRAG_E_EDGE = 3,\r\n DRAG_SE_CORNER = 4,\r\n DRAG_S_EDGE = 5,\r\n DRAG_SW_CORNER = 6,\r\n DRAG_W_EDGE = 7;\r\n\r\n var\r\n /** @type {CPTransform} The current transformation */\r\n affine,\r\n /** @type {CPRect} The initial document rectangle to transform */\r\n srcRect,\r\n /** @type {CPPolygon} The initial transform rect */\r\n origCornerPoints,\r\n /** @type {CPPolygon} The current corners of the transform rect in document space */\r\n cornerPoints,\r\n\r\n draggingMode = DRAG_NONE,\r\n\r\n lastDragPointDisplay,\r\n lastDragPointDoc,\r\n\r\n // Keep track of how many degrees we've rotated so far during this transformation\r\n rotationAccumulator;\r\n\r\n\t\t/**\r\n * Get the polygon that represents the current transform result area in display coordinates.\r\n *\r\n * @returns {CPPolygon}\r\n */\r\n function cornersToDisplayPolygon() {\r\n return cornerPoints.getTransformed(transform);\r\n }\r\n\r\n function averagePoints(p1, p2) {\r\n return {x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2};\r\n }\r\n\r\n function roundPoint(p) {\r\n return {x : Math.round(p.x), y: Math.round(p.y)};\r\n }\r\n\r\n\t\t/**\r\n * Decide which drag action should be taken if our mouse was pressed in the given position.\r\n *\r\n * @param {CPPolygon} corners - The corners of the current transform area\r\n * @param mouse - The mouse point\r\n * @returns {number} A DRAG_* constant\r\n */\r\n function classifyDragAction(corners, mouse) {\r\n const\r\n HANDLE_CAPTURE_RADIUS = 7,\r\n HANDLE_CAPTURE_RADIUS_SQR = HANDLE_CAPTURE_RADIUS * HANDLE_CAPTURE_RADIUS,\r\n EDGE_CAPTURE_RADIUS = HANDLE_CAPTURE_RADIUS,\r\n EDGE_CAPTURE_RADIUS_SQR = EDGE_CAPTURE_RADIUS * EDGE_CAPTURE_RADIUS;\r\n\r\n // Are we dragging a corner?\r\n for (let i = 0; i < corners.points.length; i++) {\r\n if ((mouse.x - corners.points[i].x) * (mouse.x - corners.points[i].x) + (mouse.y - corners.points[i].y) * (mouse.y - corners.points[i].y) <= HANDLE_CAPTURE_RADIUS_SQR) {\r\n return i * 2;\r\n }\r\n }\r\n\r\n // Are we dragging an edge?\r\n for (let i = 0; i < corners.points.length; i++) {\r\n var\r\n edgeP1 = corners.points[i],\r\n edgeP2 = corners.points[(i + 1) % corners.points.length],\r\n\r\n vEdge = new CPVector(edgeP2.x - edgeP1.x, edgeP2.y - edgeP1.y),\r\n vMouse = new CPVector(mouse.x - edgeP1.x, mouse.y - edgeP1.y),\r\n \r\n vEdgeLen = vEdge.getLength(),\r\n\r\n vEdgeScaled = vEdge.getScaled(1 / vEdgeLen),\r\n vMouseScaled = vMouse.getScaled(1 / vEdgeLen),\r\n\r\n mousePropOnLine = vEdgeScaled.getDotProduct(vMouseScaled);\r\n\r\n // If we're within the ends of the line (perpendicularly speaking)\r\n if (mousePropOnLine >= 0.0 && mousePropOnLine <= 1.0) {\r\n // This gives us the point on the line closest to the mouse\r\n vEdge.scale(mousePropOnLine);\r\n \r\n if ((vEdge.x - vMouse.x) * (vEdge.x - vMouse.x) + (vEdge.y - vMouse.y) * (vEdge.y - vMouse.y) <= EDGE_CAPTURE_RADIUS_SQR) {\r\n return i * 2 + 1;\r\n }\r\n }\r\n }\r\n\r\n if (corners.containsPoint(mouse)) {\r\n return DRAG_MOVE;\r\n }\r\n\r\n return DRAG_ROTATE;\r\n }\r\n\r\n function setCursorForHandles() {\r\n var\r\n corners = cornersToDisplayPolygon(),\r\n mouse = {x: mouseX, y: mouseY},\r\n dragAction = classifyDragAction(corners, mouse);\r\n\r\n switch (dragAction) {\r\n case DRAG_NW_CORNER:\r\n case DRAG_NE_CORNER:\r\n case DRAG_SE_CORNER:\r\n case DRAG_SW_CORNER:\r\n // Choose a cursor for a 45-degree resize from this corner\r\n let\r\n cornerIndex = ~~(dragAction / 2),\r\n cornerBefore = corners.points[(cornerIndex + 3) % 4],\r\n corner = corners.points[cornerIndex],\r\n cornerAfter = corners.points[(cornerIndex + 1) % 4],\r\n\r\n // Get a vector which points 45 degrees toward the center of the box, this'll do for cursor direction\r\n v45 = CPVector.subtractPoints(cornerBefore, corner).normalize().add(CPVector.subtractPoints(cornerAfter, corner).normalize());\r\n\r\n setResizeCursorForVector(v45);\r\n break;\r\n case DRAG_N_EDGE:\r\n case DRAG_E_EDGE:\r\n case DRAG_S_EDGE:\r\n case DRAG_W_EDGE:\r\n // Resizing from here will move edge perpendicularly\r\n let\r\n corner1 = corners.points[~~(dragAction / 2)],\r\n corner2 = corners.points[(~~(dragAction / 2) + 1) % 4],\r\n vPerp = CPVector.subtractPoints(corner2, corner1).getPerpendicular();\r\n\r\n setResizeCursorForVector(vPerp);\r\n break;\r\n case DRAG_MOVE:\r\n setCursor(CURSOR_MOVE);\r\n break;\r\n case DRAG_ROTATE:\r\n setCursor(CURSOR_DEFAULT); // TODO add a custom rotation cursor\r\n break;\r\n default:\r\n setCursor(CURSOR_DEFAULT);\r\n }\r\n }\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")) {\r\n var\r\n corners = cornersToDisplayPolygon();\r\n\r\n draggingMode = classifyDragAction(corners, {x: mouseX, y: mouseY});\r\n\r\n lastDragPointDisplay = {x: mouseX, y: mouseY};\r\n lastDragPointDoc = coordToDocument(lastDragPointDisplay);\r\n\r\n this.capture = true;\r\n\r\n setCursorForHandles();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = throttle(40, function(e) {\r\n const\r\n MIN_SCALE = 0.001;\r\n\r\n if (this.capture) {\r\n var\r\n dragPointDisplay = {x: mouseX, y: mouseY};\r\n\r\n switch (draggingMode) {\r\n case DRAG_MOVE:\r\n let\r\n dragPointDoc = roundPoint(coordToDocument(dragPointDisplay)),\r\n\r\n translation = CPVector.subtractPoints(dragPointDoc, lastDragPointDoc),\r\n\r\n // Only translate in whole-pixel increments (in document space not canvas space)\r\n translationRounded = translation.getTruncated(),\r\n\r\n translationRemainder = translation.subtract(translationRounded),\r\n\r\n translateInstance = new CPTransform();\r\n\r\n /*\r\n * Apply the translate *after* the current affine is applied.\r\n */\r\n translateInstance.translate(translationRounded.x, translationRounded.y);\r\n\r\n affine.preMultiply(translateInstance);\r\n\r\n // Accumulate the fractional move that we didn't apply for next time\r\n lastDragPointDoc = CPVector.subtractPoints(dragPointDoc, translationRemainder);\r\n break;\r\n case DRAG_ROTATE:\r\n const\r\n DRAG_ROTATE_SNAP_ANGLE = Math.PI / 4;\r\n\r\n let\r\n centerDoc = cornerPoints.getCenter(),\r\n centerDisplay = coordToDisplay(centerDoc),\r\n\r\n oldMouseAngle = Math.atan2(lastDragPointDisplay.y - centerDisplay.y, lastDragPointDisplay.x - centerDisplay.x),\r\n newMouseAngle = Math.atan2(dragPointDisplay.y - centerDisplay.y, dragPointDisplay.x - centerDisplay.x),\r\n deltaMouseAngle = newMouseAngle - oldMouseAngle,\r\n\r\n rotateAngle,\r\n rotateInstance = new CPTransform();\r\n\r\n rotationAccumulator += deltaMouseAngle;\r\n\r\n if (e.shiftKey) {\r\n /*\r\n * The rotation in the decomposition was made about the origin. We want to rotate about the\r\n * center of the selection, so first rotate the selection to square it up with the axes,\r\n * then we'll pivot the selection about its center to the new angle.\r\n */\r\n rotateAngle = -affine.decompose().rotate + Math.round(rotationAccumulator / DRAG_ROTATE_SNAP_ANGLE) * DRAG_ROTATE_SNAP_ANGLE;\r\n } else {\r\n rotateAngle = deltaMouseAngle;\r\n }\r\n\r\n /* Apply the rotation *after* the current affine instead of before it, so that we don't\r\n * end up scaling on top of the rotated selection later (which would cause an unwanted shear)\r\n */\r\n rotateInstance.rotateAroundPoint(rotateAngle, centerDoc.x, centerDoc.y);\r\n\r\n affine.preMultiply(rotateInstance);\r\n\r\n lastDragPointDisplay = dragPointDisplay;\r\n break;\r\n case DRAG_NW_CORNER:\r\n case DRAG_NE_CORNER:\r\n case DRAG_SE_CORNER:\r\n case DRAG_SW_CORNER:\r\n {\r\n let\r\n draggingCorner = ~~(draggingMode / 2),\r\n\r\n oldCorner = origCornerPoints.points[draggingCorner],\r\n // The corner we dragged will move into its new position\r\n newCorner = affine.getInverted().getTransformedPoint(roundPoint(coordToDocument(dragPointDisplay))),\r\n\r\n // The opposite corner to the one we dragged must not move\r\n fixCorner = origCornerPoints.points[(draggingCorner + 2) % 4],\r\n\r\n /* Now we can see how much we'd need to scale the original rectangle about the fixed corner\r\n * for the other corner to reach the new position.\r\n */\r\n scaleX = (newCorner.x - fixCorner.x) / (oldCorner.x - fixCorner.x),\r\n scaleY = (newCorner.y - fixCorner.y) / (oldCorner.y - fixCorner.y);\r\n\r\n /*\r\n * If the user resized it until it was zero-sized, just ignore that position and assume they'll move\r\n * past it in a msec.\r\n */\r\n if (Math.abs(scaleX) < MIN_SCALE || Math.abs(scaleY) < MIN_SCALE || isNaN(scaleX) || isNaN(scaleY)) {\r\n return true;\r\n }\r\n\r\n // Does user want proportional resize?\r\n if (e.shiftKey) {\r\n var\r\n largestScale = Math.max(scaleX, scaleY);\r\n\r\n scaleX = largestScale;\r\n scaleY = largestScale;\r\n }\r\n\r\n // The transform we do here will be performed first before any of the other transforms (scale, rotate, etc)\r\n affine.scaleAroundPoint(scaleX, scaleY, fixCorner.x, fixCorner.y);\r\n }\r\n break;\r\n case DRAG_N_EDGE:\r\n case DRAG_S_EDGE:\r\n case DRAG_E_EDGE:\r\n case DRAG_W_EDGE:\r\n {\r\n let\r\n cornerIndex = ~~(draggingMode / 2),\r\n\r\n oldHandle = averagePoints(origCornerPoints.points[cornerIndex], origCornerPoints.points[(cornerIndex + 1) % 4]),\r\n\r\n // The handle we dragged will move into its new position\r\n newHandle = affine.getInverted().getTransformedPoint(roundPoint(coordToDocument(dragPointDisplay))),\r\n\r\n // The opposite handle to the one we dragged must not move\r\n fixHandle = averagePoints(origCornerPoints.points[(cornerIndex + 2) % 4], origCornerPoints.points[(cornerIndex + 3) % 4]),\r\n\r\n scaleX, scaleY,\r\n\r\n oldVector = CPVector.subtractPoints(oldHandle, fixHandle),\r\n newVector = CPVector.subtractPoints(newHandle, fixHandle),\r\n\r\n oldLength = oldVector.getLength(),\r\n // We only take the length in the perpendicular direction to the transform edge:\r\n newLength = oldVector.getDotProduct(newVector) / oldLength,\r\n\r\n newScale = newLength / oldLength;\r\n\r\n /*\r\n * If the user resized it until it was zero-sized, just ignore that position and assume they'll move\r\n * past it in a msec.\r\n */\r\n if (Math.abs(newScale) < MIN_SCALE || isNaN(newScale)) {\r\n return true;\r\n }\r\n\r\n if (draggingMode == DRAG_N_EDGE || draggingMode == DRAG_S_EDGE) {\r\n scaleX = 1.0;\r\n scaleY = newScale;\r\n } else {\r\n scaleX = newScale;\r\n scaleY = 1.0;\r\n }\r\n\r\n affine.scaleAroundPoint(scaleX, scaleY, fixHandle.x, fixHandle.y);\r\n }\r\n break;\r\n }\r\n\r\n cornerPoints = origCornerPoints.getTransformed(affine);\r\n\r\n artwork.transformAffineAmend(affine);\r\n\r\n // TODO make me more specific\r\n that.repaintAll();\r\n\r\n return true;\r\n }\r\n });\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n draggingMode = DRAG_NONE;\r\n return true;\r\n }\r\n };\r\n\r\n /*\r\n * Set an appropriate resize cursor for the specified vector from the center to the handle.\r\n */\r\n function setResizeCursorForVector(v) {\r\n let\r\n angle = Math.atan2(-v.y, v.x),\r\n /*\r\n * Slice up into 45 degrees slices so that there are +-22.5 degrees centered around each corner,\r\n * and a 45 degree segment for each edge\r\n */\r\n slice = Math.floor(angle / (Math.PI / 4) + 0.5),\r\n cursor;\r\n\r\n // Wrap angles below the x-axis wrap to positive ones...\r\n if (slice < 0) {\r\n slice += 4;\r\n }\r\n\r\n switch (slice) {\r\n case 0:\r\n default:\r\n cursor = CURSOR_EW_RESIZE;\r\n break;\r\n case 1:\r\n cursor = CURSOR_NESW_RESIZE;\r\n break;\r\n case 2:\r\n cursor = CURSOR_NS_RESIZE;\r\n break;\r\n case 3:\r\n cursor = CURSOR_NWSE_RESIZE;\r\n break;\r\n }\r\n\r\n setCursor(cursor);\r\n }\r\n\r\n this.mouseMove = function() {\r\n // We want to stick with our choice of cursor throughout the drag operation\r\n if (!this.capture) {\r\n setCursorForHandles();\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n var\r\n corners = cornersToDisplayPolygon().points,\r\n handles = new Array(corners.length * 2);\r\n\r\n // Collect the positions of the edge and corner handles...\r\n for (let i = 0; i < corners.length; i++) {\r\n handles[i] = corners[i];\r\n }\r\n\r\n for (let i = 0; i < corners.length; i++) {\r\n var\r\n edgeP1 = corners[i],\r\n edgeP2 = corners[(i + 1) % corners.length],\r\n\r\n midWay = {x: (edgeP1.x + edgeP2.x) / 2, y: (edgeP1.y + edgeP2.y) / 2};\r\n\r\n handles[i + corners.length] = midWay;\r\n }\r\n\r\n setContrastingDrawStyle(canvasContext, \"fill\");\r\n for (let i = 0; i < handles.length; i++) {\r\n canvasContext.fillRect(handles[i].x - HANDLE_RADIUS, handles[i].y - HANDLE_RADIUS, HANDLE_RADIUS * 2 + 1, HANDLE_RADIUS * 2 + 1);\r\n }\r\n\r\n strokePolygon(canvasContext, corners);\r\n };\r\n\r\n this.keyDown = function(e) {\r\n if (e.key === \"Enter\") {\r\n controller.actionPerformed({action: \"CPTransformAccept\"});\r\n\r\n return true;\r\n } else if (e.key === \"Escape\") {\r\n controller.actionPerformed({action: \"CPTransformReject\"});\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n\r\n // Start off with the identity transform\r\n var\r\n initial = artwork.transformAffineBegin(),\r\n initialSelection;\r\n\r\n affine = initial.transform;\r\n srcRect = initial.rect;\r\n\r\n // Decide on the rectangle we'll show as the boundary of the transform area\r\n initialSelection = initial.selection;\r\n\r\n /* If the user didn't have anything selected, we'll use the actual shrink-wrapped transform area instead. */\r\n if (initialSelection.isEmpty()) {\r\n initialSelection = initial.rect.clone();\r\n }\r\n\r\n origCornerPoints = new CPPolygon(initialSelection.toPoints());\r\n cornerPoints = origCornerPoints.getTransformed(affine);\r\n\r\n draggingMode = -1;\r\n rotationAccumulator = 0;\r\n\r\n that.repaintAll();\r\n };\r\n\r\n this.leave = function() {\r\n CPMode.prototype.leave.call(this);\r\n that.repaintAll();\r\n };\r\n }\r\n\r\n CPTransformMode.prototype = Object.create(CPMode.prototype);\r\n CPTransformMode.prototype.constructor = CPTransformMode;\r\n\r\n function CPRotateCanvasMode() {\r\n var \r\n firstClick,\r\n initAngle = 0.0,\r\n initTransform,\r\n dragged = false,\r\n\r\n rotateButton = -1;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n\r\n\t\t\t\t} else if (!this.transient && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")\r\n\t\t\t\t\t|| (button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && key.isPressed(\"r\"))) {\r\n\r\n\t\t\t\tfirstClick = {x: mouseX, y: mouseY};\r\n\r\n initAngle = that.getRotation();\r\n initTransform = transform.clone();\r\n\r\n dragged = false;\r\n\r\n this.capture = true;\r\n rotateButton = button;\r\n\r\n return true;\r\n } else if (this.transient) {\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n p = {x: mouseX, y: mouseY},\r\n\r\n displayCenter = {x: $(canvas).width() / 2, y: $(canvas).height() / 2},\r\n canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n deltaAngle = Math.atan2(p.y - displayCenter.y, p.x - displayCenter.x) - Math.atan2(firstClick.y - displayCenter.y, firstClick.x - displayCenter.x),\r\n\r\n rotTrans = new CPTransform();\r\n\r\n rotTrans.rotateAroundPoint(deltaAngle, canvasCenter.x, canvasCenter.y);\r\n\r\n rotTrans.multiply(initTransform);\r\n\r\n that.setRotation(initAngle + deltaAngle);\r\n that.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n\r\n dragged = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n /**\r\n * When the mouse is released after rotation, we might want to snap our angle to the nearest 90 degree mark.\r\n */\r\n function finishRotation() {\r\n const\r\n ROTATE_SNAP_DEGREES = 5;\r\n \r\n let\r\n nearest90 = Math.round(canvasRotation / (Math.PI / 2)) * Math.PI / 2;\r\n \r\n if (Math.abs(canvasRotation - nearest90) < ROTATE_SNAP_DEGREES / 180 * Math.PI) {\r\n let\r\n deltaAngle = nearest90 - initAngle,\r\n\r\n center = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n rotTrans = new CPTransform();\r\n\r\n rotTrans.rotateAroundPoint(deltaAngle, center.x, center.y);\r\n\r\n rotTrans.multiply(initTransform);\r\n\r\n that.setRotation(initAngle + deltaAngle);\r\n that.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n \r\n that.repaintAll();\r\n }\r\n\r\n that.emitEvent(\"canvasRotated90\", [that.getRotation90()]);\r\n }\r\n \r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == rotateButton) {\r\n if (dragged) {\r\n finishRotation();\r\n } else {\r\n that.resetRotation();\r\n }\r\n\r\n this.capture = false;\r\n\r\n if (this.transient && !(key.isPressed(\"r\"))) {\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyUp = function(e) {\r\n if (this.transient && rotateButton != BUTTON_WHEEL && e.key === \" \") {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop(); // yield control to the default mode\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyDown = function(e) {\r\n if (e.key.toLowerCase() === \"r\") {\r\n // That's our hotkey, so stay in this mode (don't forward to CPDefaultMode)\r\n return true;\r\n }\r\n };\r\n }\r\n \r\n CPRotateCanvasMode.prototype = Object.create(CPMode.prototype);\r\n CPRotateCanvasMode.prototype.constructor = CPRotateCanvasMode;\r\n\r\n function CPGradientFillMode() {\r\n // Super constructor\r\n CPLineMode.call(this);\r\n }\r\n \r\n CPGradientFillMode.prototype = Object.create(CPLineMode.prototype);\r\n CPGradientFillMode.prototype.constructor = CPGradientFillMode;\r\n\r\n CPGradientFillMode.prototype.drawLine = function(from, to) {\r\n artwork.gradientFill(Math.round(from.x), Math.round(from.y), Math.round(to.x), Math.round(to.y), controller.getCurGradient());\r\n };\r\n\r\n CPGradientFillMode.prototype.queueBrushPreview = function() {\r\n //Suppress the drawing of the brush preview (inherited from CPDrawingMode)\r\n };\r\n\r\n function setCursor(cursor) {\r\n if (canvas.getAttribute(\"data-cursor\") != cursor) {\r\n canvas.setAttribute(\"data-cursor\", cursor);\r\n }\r\n }\r\n\r\n function checkCurrentLayerIsVisible() {\r\n var\r\n activeLayer = artwork.getActiveLayer();\r\n\r\n if (!(activeLayer.visible && activeLayer.ancestorsAreVisible())) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! This layer is currently hidden\", \"layer\");\r\n\r\n return false;\r\n } else if (activeLayer.alpha == 0) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! This layer's opacity is currently 0%\", \"opacity\");\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n\t/**\r\n * Check that we should be drawing to the current layer, and let the user know if they are being blocked by the\r\n * layer settings.\r\n *\r\n * @returns {boolean} True if we should draw to the current layer\r\n */\r\n function shouldDrawToThisLayer() {\r\n var\r\n activeLayer = artwork.getActiveLayer();\r\n\r\n if (activeLayer instanceof CPLayerGroup && !artwork.isEditingMask()) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! You can't draw on a group\", \"layer\");\r\n\r\n return false;\r\n }\r\n\r\n return checkCurrentLayerIsVisible();\r\n }\r\n\r\n /**\r\n * Update the scrollbar's range/position to match the current view settings for the document.\r\n *\r\n * @param scrollbar {CPScrollbar}\r\n * @param visMin The smallest coordinate in this axis in which the drawing appears\r\n * @param visWidth The extent of the drawing in this axis\r\n * @param viewSize The extent of the screen canvas in this axis\r\n * @param offset The present pixel offset of the drawing in this axis\r\n */\r\n function updateScrollBar(scrollbar, visMin, visWidth, viewSize, offset) {\r\n var\r\n xMin = visMin - viewSize - offset + visWidth / 4,\r\n xMax = visMin + visWidth - offset - visWidth / 4;\r\n \r\n scrollbar.setValues(-offset, viewSize, xMin, xMax);\r\n \r\n scrollbar.setBlockIncrement(Math.max(1, ~~(viewSize * .66)));\r\n scrollbar.setUnitIncrement(Math.max(1, ~~(viewSize * .05)));\r\n }\r\n \r\n function updateScrollBars() {\r\n if (horzScroll == null || vertScroll == null\r\n || horzScroll.getValueIsAdjusting() || vertScroll.getValueIsAdjusting() ) {\r\n return;\r\n }\r\n\r\n var\r\n visibleRect = getRefreshArea(new CPRect(0, 0, artworkCanvas.width, artworkCanvas.height));\r\n\r\n updateScrollBar(horzScroll, visibleRect.left, visibleRect.getWidth(), $(canvas).width(), that.getOffset().x);\r\n updateScrollBar(vertScroll, visibleRect.top, visibleRect.getHeight(), $(canvas).height(), that.getOffset().y);\r\n }\r\n\r\n function updateTransform() {\r\n transform.setToIdentity();\r\n transform.translate(offsetX, offsetY);\r\n transform.scale(zoom, zoom);\r\n transform.rotate(canvasRotation);\r\n\r\n updateScrollBars();\r\n that.repaintAll();\r\n }\r\n \r\n /**\r\n * Convert a canvas-relative coordinate into document coordinates and return the new coordinate.\r\n */\r\n function coordToDocument(coord) {\r\n // TODO cache inverted transform\r\n return transform.getInverted().getTransformedPoint(coord);\r\n }\r\n \r\n /**\r\n * Convert a canvas-relative coordinate into document coordinates.\r\n */\r\n function coordToDocumentInt(coord) {\r\n var\r\n result = coordToDocument(coord);\r\n \r\n result.x = Math.floor(result.x);\r\n result.y = Math.floor(result.y);\r\n \r\n return result;\r\n }\r\n \r\n /**\r\n * Convert a {x: pageX, y: pageY} co-ordinate pair from a mouse event to canvas-relative coordinates.\r\n */\r\n function mouseCoordToCanvas(coord) {\r\n var\r\n rect = canvas.getBoundingClientRect();\r\n\r\n return {x: coord.x - rect.left - window.pageXOffset, y: coord.y - rect.top - window.pageYOffset};\r\n }\r\n \r\n function coordToDisplay(p) {\r\n return transform.getTransformedPoint(p);\r\n }\r\n\r\n function coordToDisplayInt(p) {\r\n var\r\n result = coordToDisplay(p);\r\n \r\n result.x = Math.round(result.x);\r\n result.y = Math.round(result.y);\r\n \r\n return result;\r\n }\r\n \r\n\t/**\r\n * Convert a rectangle that encloses the given document pixels into a rectangle in display coordinates.\r\n *\r\n * @param rect {CPRect}\r\n * @returns {*[]}\r\n */\r\n function rectToDisplay(rect) {\r\n var\r\n center = coordToDisplay({x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2}),\r\n coords = rect.toPoints();\r\n\r\n for (var i = 0; i < coords.length; i++) {\r\n coords[i] = coordToDisplayInt(coords[i]);\r\n\r\n // Need to inset the co-ordinates by 0.5 display pixels for the line to pass through the middle of the display pixel\r\n coords[i].x += Math.sign(center.x - coords[i].x) * 0.5;\r\n coords[i].y += Math.sign(center.y - coords[i].y) * 0.5;\r\n }\r\n\r\n return coords;\r\n }\r\n\r\n function strokePolygon(context, coords) {\r\n context.beginPath();\r\n\r\n context.moveTo(coords[0].x, coords[0].y);\r\n for (var i = 1; i < coords.length; i++) {\r\n context.lineTo(coords[i].x, coords[i].y);\r\n }\r\n context.lineTo(coords[0].x, coords[0].y);\r\n\r\n context.stroke();\r\n }\r\n\r\n /**\r\n * Stroke a selection rectangle that encloses the pixels in the given rectangle (in document co-ordinates).\r\n */\r\n function plotSelectionRect(context, rect) {\r\n strokePolygon(context, rectToDisplay(rect));\r\n }\r\n\r\n /**\r\n * Take a CPRect of document coordinates and return a CPRect of canvas coordinates to repaint for that region.\r\n */\r\n function getRefreshArea(r) {\r\n var\r\n p1 = coordToDisplayInt({x: r.left - 1, y: r.top - 1}),\r\n p2 = coordToDisplayInt({x: r.left - 1, y: r.bottom}),\r\n p3 = coordToDisplayInt({x: r.right, y: r.top - 1}),\r\n p4 = coordToDisplayInt({x: r.right, y: r.bottom}),\r\n\r\n r2 = new CPRect(\r\n Math.min(Math.min(p1.x, p2.x), Math.min(p3.x, p4.x)),\r\n Math.min(Math.min(p1.y, p2.y), Math.min(p3.y, p4.y)),\r\n Math.max(Math.max(p1.x, p2.x), Math.max(p3.x, p4.x)) + 1,\r\n Math.max(Math.max(p1.y, p2.y), Math.max(p3.y, p4.y)) + 1\r\n );\r\n\r\n r2.grow(2, 2); // to be sure to include everything\r\n\r\n return r2;\r\n }\r\n\r\n /**\r\n * Adjust the current offset to bring the center of the artwork to the center of the canvas\r\n */\r\n function centerCanvas() {\r\n var\r\n width = canvas.width,\r\n height = canvas.height,\r\n \r\n artworkCenter = coordToDisplay({x: artwork.width / 2, y: artwork.height / 2});\r\n \r\n that.setOffset(\r\n Math.round(offsetX + width / 2.0 - artworkCenter.x),\r\n Math.round(offsetY + height / 2.0 - artworkCenter.y)\r\n );\r\n }\r\n \r\n this.setZoom = function(_zoom) {\r\n zoom = _zoom;\r\n updateTransform();\r\n };\r\n\r\n this.getZoom = function() {\r\n return zoom;\r\n };\r\n \r\n this.setGridSize = function(_gridSize) {\r\n gridSize = Math.max(Math.round(_gridSize), 1);\r\n this.repaintAll();\r\n };\r\n\r\n this.getGridSize = function() {\r\n return gridSize;\r\n };\r\n\r\n this.setOffset = function(x, y) {\r\n if (isNaN(x) || isNaN(y)) {\r\n console.log(\"Bad offset\");\r\n } else {\r\n offsetX = x;\r\n offsetY = y;\r\n updateTransform();\r\n }\r\n };\r\n\r\n this.getOffset = function() {\r\n return {x: offsetX, y: offsetY};\r\n };\r\n \r\n this.setInterpolation = function(enabled) {\r\n interpolation = enabled;\r\n\r\n setCanvasInterpolation(canvasContext, enabled);\r\n\r\n this.repaintAll();\r\n };\r\n\r\n this.setRotation = function(angle) {\r\n canvasRotation = angle % (2 * Math.PI);\r\n updateTransform();\r\n };\r\n\r\n /**\r\n * Get canvas rotation in radians.\r\n * \r\n * @return {number}\r\n */\r\n this.getRotation = function() {\r\n return canvasRotation;\r\n };\r\n \r\n /**\r\n * Get the rotation as the nearest number of whole 90 degree clockwise rotations ([0..3])\r\n */\r\n this.getRotation90 = function() {\r\n var\r\n rotation = Math.round(this.getRotation() / Math.PI * 2);\r\n \r\n // Just in case:\r\n rotation %= 4;\r\n \r\n // We want [0..3] as output\r\n if (rotation < 0) {\r\n rotation += 4;\r\n }\r\n \r\n return rotation;\r\n };\r\n\r\n /**\r\n *\r\n * @param zoom float\r\n * @param centerX float X co-ordinate in the canvas space\r\n * @param centerY float Y co-ordinate in the canvas space\r\n */\r\n function zoomOnPoint(zoom, centerX, centerY) {\r\n zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));\r\n \r\n if (that.getZoom() != zoom) {\r\n var \r\n offset = that.getOffset();\r\n \r\n that.setOffset(\r\n offset.x + ~~((centerX - offset.x) * (1 - zoom / that.getZoom())), \r\n offset.y + ~~((centerY - offset.y) * (1 - zoom / that.getZoom()))\r\n );\r\n \r\n that.setZoom(zoom);\r\n\r\n /*CPController.CPViewInfo viewInfo = new CPController.CPViewInfo();\r\n viewInfo.zoom = zoom;\r\n viewInfo.offsetX = offsetX;\r\n viewInfo.offsetY = offsetY;\r\n controller.callViewListeners(viewInfo); TODO */\r\n\r\n that.repaintAll();\r\n }\r\n }\r\n \r\n // More advanced zoom methods\r\n function zoomOnCenter(zoom) {\r\n var \r\n width = $(canvas).width(),\r\n height = $(canvas).height();\r\n \r\n zoomOnPoint(zoom, width / 2, height / 2);\r\n }\r\n\r\n this.zoomIn = function() {\r\n zoomOnCenter(this.getZoom() * 2);\r\n };\r\n\r\n this.zoomOut = function() {\r\n zoomOnCenter(this.getZoom() * 0.5);\r\n };\r\n\r\n this.zoom100 = function() {\r\n zoomOnCenter(1);\r\n centerCanvas();\r\n };\r\n\r\n this.resetRotation = function() {\r\n var\r\n center = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n rotTrans = new CPTransform();\r\n \r\n rotTrans.rotateAroundPoint(-this.getRotation(), center.x, center.y);\r\n rotTrans.multiply(transform);\r\n\r\n this.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n this.setRotation(0);\r\n that.emitEvent(\"canvasRotated90\", [0]);\r\n };\r\n \r\n /**\r\n * Get the current pen pressure, given a pointer event.\r\n * \r\n * @param {PointerEvent} e\r\n * \r\n * @return {Number}\r\n */\r\n function getPointerPressure(e) {\r\n // Use Wacom pressure in preference to pointer event pressure (if present)\r\n if (wacomPenDown) {\r\n return tablet.getPressure();\r\n }\r\n \r\n // Safari fails to set pressure = 0.5 for mouse button down like it is supposed to\r\n if (e.pointerType === \"mouse\" && e.buttons !== 0 && e.pressure === 0) {\r\n return 1;\r\n }\r\n \r\n if (e.pointerType === \"touch\") {\r\n /* Some devices like iOS set pressure = 0 for all touch events, so detect that absence of pressure\r\n * and override to use a pressure of 1.0.\r\n * \r\n * Android provides useful pressure based on the finger's contact area with the screen (Pixel 4A).\r\n */\r\n if (e.pressure !== 0) {\r\n sawTouchWithPressure = true;\r\n }\r\n\r\n if (sawTouchWithPressure) {\r\n return e.pressure * 2;\r\n }\r\n \r\n return 1.0;\r\n }\r\n \r\n /* In the Pointer Events API, mice have a default pressure of 0.5, but we want 1.0. Since we can't \r\n * reliably distinguish between mice and pens, we don't have any better options:\r\n */\r\n return e.pressure * 2;\r\n }\r\n\r\n let\r\n mouseWheelDebounce = false;\r\n\r\n function handleMouseWheel(e) {\r\n if (e.deltaY != 0) {\r\n if (!mouseWheelDebounce || Math.abs(e.deltaY) > 20) {\r\n let\r\n factor;\r\n\r\n if (e.deltaY > 0) {\r\n factor = 1 / 1.15;\r\n } else {\r\n factor = 1.15;\r\n }\r\n\r\n let\r\n canvasPoint = mouseCoordToCanvas({x: e.pageX, y: e.pageY}),\r\n docPoint = coordToDocument(canvasPoint);\r\n\r\n if (artwork.isPointWithin(docPoint.x, docPoint.y)) {\r\n zoomOnPoint(\r\n that.getZoom() * factor,\r\n canvasPoint.x,\r\n canvasPoint.y\r\n );\r\n } else {\r\n zoomOnPoint(\r\n that.getZoom() * factor,\r\n offsetX + ~~(artwork.width * zoom / 2),\r\n offsetY + ~~(artwork.height * zoom / 2)\r\n );\r\n }\r\n\r\n mouseWheelDebounce = mouseWheelDebounce || setTimeout(function() {\r\n mouseWheelDebounce = false;\r\n }, 50);\r\n }\r\n\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n let\r\n canvasClientRect;\r\n\r\n function handlePointerMove(e) {\r\n // Use the cached position of the canvas on the page if possible\r\n if (!canvasClientRect) {\r\n canvasClientRect = canvas.getBoundingClientRect();\r\n }\r\n \r\n if (sawPen && e.pointerType === \"touch\") {\r\n // Palm rejection for devices that support pens\r\n return;\r\n }\r\n\r\n /* Store these globally for the event handlers to refer to (we'd write to the event itself but some browsers\r\n * don't enjoy that)\r\n */\r\n mouseX = e.clientX - canvasClientRect.left;\r\n mouseY = e.clientY - canvasClientRect.top;\r\n\r\n const\r\n // Flags used by e.buttons:\r\n FLAG_PRIMARY = 1,\r\n FLAG_SECONDARY = 2,\r\n FLAG_WHEEL = 4,\r\n \r\n isDragging = e.buttons !== 0,\r\n pressure = isDragging ? getPointerPressure(e) : 0;\r\n \r\n\t\t// Did any of our buttons change state?\r\n if (((e.buttons & FLAG_PRIMARY) !== 0) != mouseDown[BUTTON_PRIMARY]) {\r\n if (e.mozPressure === 0.5) {\r\n /* We received a Mozilla \"click\" level of pressure (0.5) as a pointer-move\r\n * before we received the actual mouseDown event (which carries the correct pressure).\r\n *\r\n * Observed on Firefox 56 on macOS High Sierra\r\n */\r\n return; // Ignore!\r\n }\r\n\r\n mouseDown[BUTTON_PRIMARY] = !mouseDown[BUTTON_PRIMARY];\r\n\r\n if (mouseDown[BUTTON_PRIMARY]) {\r\n modeStack.mouseDown(e, BUTTON_PRIMARY, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_PRIMARY, pressure);\r\n }\r\n }\r\n\r\n if (((e.buttons & FLAG_SECONDARY) !== 0) != mouseDown[BUTTON_SECONDARY]) {\r\n mouseDown[BUTTON_SECONDARY] = !mouseDown[BUTTON_SECONDARY];\r\n\r\n if (mouseDown[BUTTON_SECONDARY]) {\r\n modeStack.mouseDown(e, BUTTON_SECONDARY, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_SECONDARY, pressure);\r\n }\r\n }\r\n\r\n if (((e.buttons & FLAG_WHEEL) !== 0) != mouseDown[BUTTON_WHEEL]) {\r\n mouseDown[BUTTON_WHEEL] = !mouseDown[BUTTON_WHEEL];\r\n\r\n if (mouseDown[BUTTON_WHEEL]) {\r\n modeStack.mouseDown(e, BUTTON_WHEEL, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_WHEEL, pressure);\r\n }\r\n }\r\n\r\n if (isDragging) {\r\n modeStack.mouseDrag(e, pressure);\r\n } else {\r\n modeStack.mouseMove(e, pressure);\r\n }\r\n \r\n if (!sawPen && e.pointerType === \"pen\") {\r\n sawPen = true;\r\n }\r\n }\r\n\r\n // Called when all mouse/pointer buttons are released\r\n function handlePointerUp(e) {\r\n mouseDown[BUTTON_PRIMARY] = false;\r\n mouseDown[BUTTON_SECONDARY] = false;\r\n mouseDown[BUTTON_WHEEL] = false;\r\n\r\n wacomPenDown = false;\r\n modeStack.mouseUp(e, e.button, 0.0);\r\n canvas.releasePointerCapture(e.pointerId);\r\n }\r\n\r\n // Called when the first button on the pointer is depressed / pen touches the surface\r\n function handlePointerDown(e) {\r\n if (sawPen && e.pointerType === \"touch\") {\r\n // Palm rejection for devices that support pens\r\n return;\r\n }\r\n\r\n canvas.setPointerCapture(e.pointerId);\r\n\r\n canvasClientRect = canvas.getBoundingClientRect();\r\n\r\n // Store these globally for the event handlers to refer to\r\n mouseX = e.clientX - canvasClientRect.left;\r\n mouseY = e.clientY - canvasClientRect.top;\r\n\r\n wacomPenDown = tablet.isPen();\r\n\r\n mouseDown[BUTTON_PRIMARY] = false;\r\n mouseDown[BUTTON_SECONDARY] = false;\r\n mouseDown[BUTTON_WHEEL] = false;\r\n\r\n mouseDown[e.button] = true;\r\n\r\n modeStack.mouseDown(e, e.button, getPointerPressure(e));\r\n }\r\n \r\n function handleKeyDown(e) {\r\n modeStack.keyDown(e);\r\n }\r\n \r\n function handleKeyUp(e) {\r\n modeStack.keyUp(e);\r\n }\r\n \r\n // Get the DOM element for the canvas area\r\n this.getElement = function() {\r\n return canvasContainer;\r\n };\r\n \r\n /**\r\n * Schedule a repaint for the current repaint region.\r\n */\r\n function repaint() {\r\n if (!scheduledRepaint) {\r\n scheduledRepaint = true;\r\n window.requestAnimationFrame(function() {\r\n that.paint();\r\n });\r\n }\r\n }\r\n \r\n /**\r\n * Schedule a repaint for the entire screen.\r\n */\r\n this.repaintAll = function() {\r\n repaintRegion.left = 0;\r\n repaintRegion.top = 0;\r\n repaintRegion.right = canvas.width;\r\n repaintRegion.bottom = canvas.height;\r\n \r\n repaint();\r\n };\r\n \r\n /**\r\n * Schedule a repaint for an area of the screen for later.\r\n * \r\n * @param rect CPRect Region that should be repainted using display coordinates\r\n */\r\n function repaintRect(rect) {\r\n repaintRegion.union(rect);\r\n \r\n repaint();\r\n }\r\n \r\n this.paint = function() {\r\n var\r\n drawingWasClipped = false;\r\n \r\n scheduledRepaint = false;\r\n \r\n /* Clip drawing to the area of the screen we want to repaint */\r\n if (!repaintRegion.isEmpty()) {\r\n canvasContext.save();\r\n \r\n if (canvasContext.clipTo) {\r\n canvasContext.beginPath();\r\n\r\n repaintRegion.left = repaintRegion.left | 0; \r\n repaintRegion.top = repaintRegion.top | 0;\r\n \r\n canvasContext.rect(\r\n repaintRegion.left,\r\n repaintRegion.top,\r\n Math.ceil(repaintRegion.getWidth()),\r\n Math.ceil(repaintRegion.getHeight())\r\n );\r\n\r\n canvasContext.clip();\r\n }\r\n \r\n drawingWasClipped = true;\r\n }\r\n \r\n /* Copy pixels that changed in the document into our local fused image cache */\r\n if (!artworkUpdateRegion.isEmpty()) {\r\n let\r\n imageData;\r\n\r\n if (maskView && maskView.isOpen()) {\r\n imageData = maskView.getImageData();\r\n } else {\r\n imageData = artwork.fusionLayers().getImageData();\r\n }\r\n\r\n artworkCanvasContext.putImageData(\r\n imageData, 0, 0, artworkUpdateRegion.left, artworkUpdateRegion.top, artworkUpdateRegion.getWidth(), artworkUpdateRegion.getHeight()\r\n );\r\n\r\n artworkUpdateRegion.makeEmpty();\r\n }\r\n\r\n canvasContext.fillStyle = '#606060';\r\n canvasContext.fillRect(0, 0, canvas.width, canvas.height);\r\n \r\n // Transform the coordinate system to bring the document into the right position on the screen (translate/zoom/etc)\r\n canvasContext.save();\r\n {\r\n canvasContext.setTransform(transform.m[0], transform.m[1], transform.m[2], transform.m[3], transform.m[4], transform.m[5]);\r\n \r\n canvasContext.fillStyle = checkerboardPattern;\r\n canvasContext.fillRect(0, 0, artwork.width, artwork.height);\r\n \r\n canvasContext.drawImage(\r\n artworkCanvas, 0, 0, artworkCanvas.width, artworkCanvas.height\r\n );\r\n }\r\n canvasContext.restore();\r\n \r\n // The rest of the drawing happens using the original screen coordinate system\r\n setContrastingDrawStyle(canvasContext, \"stroke\");\r\n\r\n canvasContext.lineWidth = 1.0;\r\n \r\n // Draw the artwork selection so long as we're not in the middle of selecting a new rectangle\r\n if (!artwork.getSelection().isEmpty() && !(modeStack.peek() instanceof CPRectSelectionMode && modeStack.peek().capture)) {\r\n canvasContext.setLineDash([3, 2]);\r\n \r\n plotSelectionRect(canvasContext, artwork.getSelection());\r\n \r\n canvasContext.setLineDash([]);\r\n }\r\n \r\n // Draw grid\r\n if (showGrid) {\r\n var\r\n bounds = artwork.getBounds(),\r\n \r\n gridVisualPitch = zoom * gridSize;\r\n \r\n /* If the grid is going to be miniscule on the screen (basically just covering/inverting the entire artwork,\r\n * do not paint it.\r\n */\r\n if (gridVisualPitch > 2) {\r\n canvasContext.beginPath();\r\n \r\n // Vertical lines\r\n for (let i = gridSize - 1; i < bounds.right; i += gridSize) {\r\n let\r\n p1 = coordToDisplay({x: i, y: bounds.top}),\r\n p2 = coordToDisplay({x: i, y: bounds.bottom});\r\n \r\n canvasContext.moveTo(p1.x + 0.5, p1.y + 0.5);\r\n canvasContext.lineTo(p2.x + 0.5, p2.y + 0.5);\r\n }\r\n \r\n // Horizontal lines\r\n for (let i = gridSize - 1; i < bounds.bottom; i += gridSize) {\r\n let\r\n p1 = coordToDisplay({x: 0, y: i}),\r\n p2 = coordToDisplay({x: bounds.right, y: i});\r\n \r\n canvasContext.moveTo(p1.x + 0.5, p1.y + 0.5);\r\n canvasContext.lineTo(p2.x + 0.5, p2.y + 0.5);\r\n }\r\n \r\n canvasContext.stroke();\r\n }\r\n }\r\n \r\n // Additional drawing by the current mode\r\n modeStack.paint(canvasContext);\r\n \r\n canvasContext.globalCompositeOperation = 'source-over';\r\n \r\n if (drawingWasClipped) {\r\n repaintRegion.makeEmpty();\r\n \r\n canvasContext.restore();\r\n }\r\n };\r\n \r\n this.showGrid = function(show) {\r\n showGrid = show;\r\n this.repaintAll();\r\n };\r\n\r\n /**\r\n * Resize the canvas area to the given height (in pixels)\r\n *\r\n * @param {int} height New canvas area height in CSS pixels\r\n * @param {boolean} skipCenter True if the canvas should not be re-centered\r\n */\r\n this.resize = function(height, skipCenter) {\r\n // Leave room for the bottom scrollbar\r\n height -= $(canvasContainerBottom).outerHeight();\r\n\r\n $(canvas).css('height', height + \"px\");\r\n\r\n canvas.width = $(canvas).width();\r\n canvas.height = height;\r\n\r\n canvasClientRect = null;\r\n\r\n if (!skipCenter) {\r\n centerCanvas();\r\n }\r\n\r\n // Interpolation property gets reset when canvas resizes\r\n this.setInterpolation(interpolation);\r\n\r\n this.repaintAll();\r\n };\r\n\r\n controller.on(\"toolChange\", function(tool, toolInfo) {\r\n var\r\n newMode = drawingModes[toolInfo.strokeMode];\r\n\r\n // If we currently have any drawing modes active, switch them to the drawing mode of the new tool\r\n for (var i = 0; i < modeStack.modes.length; i++) {\r\n if (modeStack.modes[i] instanceof CPDrawingMode) {\r\n modeStack.modes[i].leave();\r\n modeStack.modes[i] = newMode;\r\n modeStack.modes[i].enter();\r\n\r\n break;\r\n }\r\n }\r\n\r\n curDrawMode = newMode;\r\n });\r\n \r\n controller.on(\"modeChange\", function(mode) {\r\n var\r\n newMode;\r\n\r\n switch (mode) {\r\n case ChickenPaint.M_DRAW:\r\n newMode = curDrawMode;\r\n break;\r\n \r\n case ChickenPaint.M_FLOODFILL:\r\n newMode = floodFillMode;\r\n break;\r\n\r\n case ChickenPaint.M_GRADIENTFILL:\r\n newMode = gradientFillMode;\r\n break;\r\n\r\n case ChickenPaint.M_RECT_SELECTION:\r\n newMode = rectSelectionMode;\r\n break;\r\n \r\n case ChickenPaint.M_MOVE_TOOL:\r\n newMode = moveToolMode;\r\n break;\r\n \r\n case ChickenPaint.M_ROTATE_CANVAS:\r\n newMode = rotateCanvasMode;\r\n break;\r\n\r\n case ChickenPaint.M_PAN_CANVAS:\r\n newMode = panMode;\r\n break;\r\n\r\n case ChickenPaint.M_COLOR_PICKER:\r\n newMode = colorPickerMode;\r\n break;\r\n\r\n case ChickenPaint.M_TRANSFORM:\r\n newMode = transformMode;\r\n break;\r\n }\r\n\r\n modeStack.setUserMode(newMode);\r\n });\r\n\r\n function onMaskViewChangeLayer() {\r\n artworkUpdateRegion = artwork.getBounds();\r\n that.repaintAll();\r\n }\r\n\r\n controller.on(\"maskViewOpened\", function(newMaskView) {\r\n if (maskView) {\r\n maskView.off(\"changeLayer\", onMaskViewChangeLayer);\r\n }\r\n\r\n maskView = newMaskView;\r\n\r\n maskView.on(\"changeLayer\", onMaskViewChangeLayer);\r\n\r\n onMaskViewChangeLayer();\r\n });\r\n \r\n //\r\n // Modes system: modes control the way the GUI is reacting to the user input\r\n // All the tools are implemented through modes\r\n //\r\n \r\n defaultMode = new CPDefaultMode();\r\n colorPickerMode = new CPColorPickerMode();\r\n panMode = new CPPanCanvasMode();\r\n rotateCanvasMode = new CPRotateCanvasMode();\r\n floodFillMode = new CPFloodFillMode();\r\n gradientFillMode = new CPGradientFillMode();\r\n rectSelectionMode = new CPRectSelectionMode();\r\n moveToolMode = new CPMoveToolMode();\r\n transformMode = new CPTransformMode();\r\n\r\n // this must correspond to the stroke modes defined in CPToolInfo\r\n drawingModes = [new CPFreehandMode(), new CPLineMode(), new CPBezierMode()];\r\n\r\n curDrawMode = drawingModes[CPBrushInfo.STROKE_MODE_FREEHAND];\r\n\r\n // The default mode will handle the events that no other modes are interested in\r\n modeStack.setDefaultMode(defaultMode);\r\n modeStack.setUserMode(curDrawMode);\r\n\r\n artworkCanvas.width = artwork.width;\r\n artworkCanvas.height = artwork.height;\r\n \r\n canvas.width = 800;\r\n canvas.height = 900;\r\n canvas.className = \"chickenpaint-canvas\";\r\n canvas.setAttribute(\"touch-action\", \"none\");\r\n \r\n if (!canvasContext.setLineDash) { \r\n canvasContext.setLineDash = function () {}; // For IE 10 and older\r\n }\r\n \r\n canvas.addEventListener(\"contextmenu\", function(e) {\r\n e.preventDefault();\r\n });\r\n \r\n canvas.addEventListener(\"mouseenter\", function() {\r\n mouseIn = true;\r\n });\r\n \r\n canvas.addEventListener(\"mouseleave\", function() {\r\n mouseIn = false;\r\n \r\n if (!mouseDown[BUTTON_PRIMARY] && !mouseDown[BUTTON_SECONDARY] && !mouseDown[BUTTON_WHEEL]) {\r\n that.repaintAll();\r\n }\r\n });\r\n \r\n canvas.addEventListener(\"pointerdown\", handlePointerDown);\r\n canvas.addEventListener(\"pointermove\", handlePointerMove);\r\n canvas.addEventListener(\"pointerup\", handlePointerUp);\r\n canvas.addEventListener(\"wheel\", handleMouseWheel);\r\n \r\n document.addEventListener(\"keydown\", handleKeyDown);\r\n document.addEventListener(\"keyup\", handleKeyUp);\r\n\r\n /* Workaround for Chrome Mac bug that causes canvas to be disposed and never recreated when tab is switched into the \r\n * background https://bugs.chromium.org/p/chromium/issues/detail?id=588434\r\n */\r\n document.addEventListener(\"visibilitychange\", function() {\r\n var\r\n oldHeight = canvas.height + $(canvasContainerBottom).outerHeight();\r\n\r\n canvas.width = 1;\r\n canvas.height = 1;\r\n\r\n that.resize(oldHeight, true);\r\n }, false);\r\n \r\n window.addEventListener(\"scroll\", function() {\r\n canvasClientRect = null;\r\n });\r\n \r\n canvas.addEventListener(\"mousedown\", function(e) {\r\n if (e.button == BUTTON_WHEEL) {\r\n // Prevent middle-mouse scrolling in Firefox\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n artwork.on(\"changeSelection\", function() {\r\n // We could keep track of our last-painted selection rect and only invalidate that here\r\n that.repaintAll();\r\n });\r\n \r\n artwork.on(\"updateRegion\", function(region) {\r\n artworkUpdateRegion.union(region);\r\n \r\n repaintRect(getRefreshArea(artworkUpdateRegion));\r\n });\r\n \r\n horzScroll.on(\"valueChanged\", function(value) {\r\n var \r\n p = that.getOffset();\r\n \r\n that.setOffset(-value, p.y);\r\n });\r\n \r\n vertScroll.on(\"valueChanged\", function(value) {\r\n var \r\n p = that.getOffset();\r\n \r\n that.setOffset(p.x, -value);\r\n });\r\n \r\n this.setInterpolation(false);\r\n\r\n var\r\n canvasSpacingWrapper = document.createElement(\"div\");\r\n \r\n canvasSpacingWrapper.className = 'chickenpaint-canvas-container-wrapper';\r\n canvasSpacingWrapper.appendChild(canvas);\r\n \r\n canvasContainerTop.className = 'chickenpaint-canvas-container-top';\r\n canvasContainerTop.appendChild(canvasSpacingWrapper);\r\n canvasContainerTop.appendChild(vertScroll.getElement());\r\n \r\n canvasContainerBottom.className = 'chickenpaint-canvas-container-bottom';\r\n canvasContainerBottom.appendChild(horzScroll.getElement());\r\n \r\n canvasContainer.appendChild(canvasContainerTop);\r\n canvasContainer.appendChild(canvasContainerBottom);\r\n \r\n controller.setCanvas(this);\r\n}\r\n\r\nCPCanvas.prototype = Object.create(EventEmitter.prototype);\r\nCPCanvas.prototype.constructor = CPCanvas;\r\n",
+ "/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport EventEmitter from \"wolfy87-eventemitter\";\r\nimport $ from \"jquery\";\r\nimport key from \"../../lib/keymaster.js\";\r\n\r\nimport CPRect from \"../util/CPRect.js\";\r\nimport CPTransform from \"../util/CPTransform.js\";\r\nimport CPWacomTablet from \"../util/CPWacomTablet.js\";\r\nimport CPBezier from \"../util/CPBezier.js\";\r\nimport {throttle} from \"../util/throttle-debounce\";\r\nimport CPPolygon from \"../util/CPPolygon.js\";\r\nimport {setCanvasInterpolation} from \"../util/CPPolyfill.js\";\r\nimport CPVector from \"../util/CPVector.js\";\r\n\r\nimport ChickenPaint from \"../ChickenPaint.js\";\r\n\r\nimport CPBrushInfo from \"../engine/CPBrushInfo.js\";\r\nimport CPLayerGroup from \"../engine/CPLayerGroup.js\";\r\nimport CPMaskView from \"../engine/CPMaskView.js\";\r\n\r\nimport {createCheckerboardPattern} from \"./CPGUIUtils.js\";\r\nimport CPScrollbar from \"./CPScrollbar.js\";\r\nimport CPColor from \"../util/CPColor.js\";\r\nimport {setContrastingDrawStyle} from \"./CPGUIUtils.js\";\r\n\r\nfunction CPModeStack() {\r\n this.modes = [];\r\n}\r\n\r\n/* We have two distinguished mode indexes which correspond to the CPDefaultMode and the mode that the user has selected\r\n * in the tool palette (the global drawing mode). On top of that are other transient modes.\r\n */\r\nCPModeStack.MODE_INDEX_DEFAULT = 0;\r\nCPModeStack.MODE_INDEX_USER = 1;\r\n\r\nCPModeStack.prototype.setMode = function(index, newMode) {\r\n var\r\n oldMode = this.modes[index];\r\n\r\n if (oldMode == newMode) {\r\n return;\r\n }\r\n\r\n if (oldMode) {\r\n oldMode.leave();\r\n }\r\n\r\n this.modes[index] = newMode;\r\n newMode.enter();\r\n};\r\n\r\nCPModeStack.prototype.setDefaultMode = function(newMode) {\r\n newMode.transient = false;\r\n newMode.capture = false;\r\n\r\n this.setMode(CPModeStack.MODE_INDEX_DEFAULT, newMode);\r\n};\r\n\r\nCPModeStack.prototype.setUserMode = function(newMode) {\r\n // Leave any transient modes that were on top of the user mode\r\n for (var i = this.modes.length - 1; i > CPModeStack.MODE_INDEX_USER; i--) {\r\n this.modes[i].leave();\r\n this.modes.splice(i, 1);\r\n }\r\n\r\n newMode.transient = false;\r\n newMode.capture = false;\r\n\r\n this.setMode(CPModeStack.MODE_INDEX_USER, newMode);\r\n};\r\n\r\n/**\r\n * Deliver the event with the given name and array of parameters to the mode stack.\r\n *\r\n * @param event\r\n * @param params\r\n * @returns {boolean} True if any mode captured the event\r\n */\r\nCPModeStack.prototype.deliverEvent = function(event, params) {\r\n for (var i = this.modes.length - 1; i >= 0; i--) {\r\n var\r\n mode = this.modes[i];\r\n\r\n if (mode[event].apply(mode, params) || mode.capture && event != \"paint\") {\r\n /* If the event was handled, don't try to deliver it to anything further up the stack */\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n};\r\n\r\n// We can call these routines to deliver events that bubble up the mode stack\r\nfor (let eventName of [\"mouseDown\", \"mouseUp\"]) {\r\n CPModeStack.prototype[eventName] = function (e, button, pressure) {\r\n this.deliverEvent(eventName, [e, button, pressure]);\r\n };\r\n}\r\n\r\nfor (let eventName of [\"mouseDrag\", \"mouseMove\"]) {\r\n CPModeStack.prototype[eventName] = function (e, pressure) {\r\n this.deliverEvent(eventName, [e, pressure]);\r\n };\r\n}\r\n\r\nfor (let eventName of [\"keyDown\", \"keyUp\"]) {\r\n CPModeStack.prototype[eventName] = function (e) {\r\n if (this.deliverEvent(eventName, [e])) {\r\n // Swallow handled keypresses\r\n e.preventDefault();\r\n }\r\n };\r\n}\r\n\r\nCPModeStack.prototype.paint = function(context) {\r\n this.deliverEvent(\"paint\", [context]);\r\n};\r\n\r\n/**\r\n * Add a mode to the top of the mode stack.\r\n *\r\n * @param mode {CPMode}\r\n * @param transient {boolean} Set to true if the mode is expected to remove itself from stack upon completion.\r\n */\r\nCPModeStack.prototype.push = function(mode, transient) {\r\n var\r\n previousTop = this.peek();\r\n\r\n if (previousTop) {\r\n previousTop.suspend();\r\n }\r\n\r\n mode.transient = transient;\r\n mode.capture = false;\r\n\r\n mode.enter();\r\n\r\n this.modes.push(mode);\r\n};\r\n\r\nCPModeStack.prototype.peek = function() {\r\n if (this.modes.length > 0) {\r\n return this.modes[this.modes.length - 1];\r\n } else {\r\n return null;\r\n }\r\n};\r\n\r\n/**\r\n * Remove the node at the top of the stack and return the new top of the stack.\r\n *\r\n * @returns {*}\r\n */\r\nCPModeStack.prototype.pop = function() {\r\n var\r\n outgoingMode = this.modes.pop(),\r\n newTop = this.peek();\r\n\r\n if (outgoingMode) {\r\n outgoingMode.leave();\r\n }\r\n\r\n if (newTop) {\r\n newTop.resume();\r\n }\r\n\r\n return newTop;\r\n};\r\n\r\nexport default function CPCanvas(controller) {\r\n const\r\n BUTTON_PRIMARY = 0,\r\n BUTTON_WHEEL = 1,\r\n BUTTON_SECONDARY = 2,\r\n\r\n MIN_ZOOM = 0.10,\r\n MAX_ZOOM = 16.0,\r\n\r\n CURSOR_DEFAULT = \"default\", CURSOR_PANNABLE = \"grab\", CURSOR_PANNING = \"grabbing\", CURSOR_CROSSHAIR = \"crosshair\",\r\n CURSOR_MOVE = \"move\", CURSOR_NESW_RESIZE = \"nesw-resize\", CURSOR_NWSE_RESIZE = \"nwse-resize\",\r\n CURSOR_NS_RESIZE = \"ns-resize\", CURSOR_EW_RESIZE = \"ew-resize\";\r\n\r\n let\r\n that = this,\r\n \r\n canvasContainer = document.createElement(\"div\"),\r\n canvasContainerTop = document.createElement(\"div\"),\r\n canvasContainerBottom = document.createElement(\"div\"),\r\n \r\n // Our canvas that fills the entire screen\r\n canvas = document.createElement(\"canvas\"),\r\n canvasContext = canvas.getContext(\"2d\"),\r\n \r\n // Our cache of the artwork's fusion to be drawn onto our main canvas using our current transform\r\n artworkCanvas = document.createElement(\"canvas\"),\r\n artworkCanvasContext = artworkCanvas.getContext(\"2d\"),\r\n \r\n checkerboardPattern = createCheckerboardPattern(canvasContext),\r\n \r\n artwork = controller.getArtwork(),\r\n\r\n // Canvas transformations\r\n zoom = 1,\r\n offsetX = 0, offsetY = 0,\r\n canvasRotation = 0.0,\r\n transform = new CPTransform(),\r\n interpolation = false,\r\n\r\n // Grid options\r\n showGrid = false,\r\n gridSize = 32,\r\n \r\n mouseX = 0, mouseY = 0,\r\n mouseIn = false, mouseDown = [false, false, false] /* Track each button independently */, wacomPenDown = false,\r\n\r\n sawPen = false,\r\n sawTouchWithPressure = false,\r\n\r\n /* The area of the document that should have its layers fused and repainted to the screen\r\n * (i.e. an area modified by drawing tools). \r\n * \r\n * Initially set to the size of the artwork so we can repaint the whole thing.\r\n */\r\n artworkUpdateRegion = artwork.getBounds(),\r\n \r\n /**\r\n * The area of the canvas that should be repainted to the screen during the next repaint internal (in canvas\r\n * coordinates).\r\n */\r\n repaintRegion = new CPRect(0, 0, 0, 0),\r\n scheduledRepaint = false,\r\n\r\n\t /**\r\n * If we're viewing a single mask on its own instead of the document fusion, we store that view here.\r\n *\r\n * @type {CPMaskView}\r\n */\r\n maskView,\r\n \r\n //\r\n // Modes system: modes control the way the GUI is reacting to the user input\r\n // All the tools are implemented through modes\r\n //\r\n \r\n defaultMode,\r\n colorPickerMode,\r\n panMode,\r\n rotateCanvasMode,\r\n floodFillMode,\r\n gradientFillMode,\r\n rectSelectionMode,\r\n moveToolMode,\r\n transformMode,\r\n\r\n // this must correspond to the stroke modes defined in CPToolInfo\r\n drawingModes = [],\r\n\r\n modeStack = new CPModeStack(),\r\n\r\n curDrawMode,\r\n \r\n horzScroll = new CPScrollbar(false), \r\n vertScroll = new CPScrollbar(true),\r\n \r\n tablet = CPWacomTablet.getRef();\r\n\r\n Math.sign = Math.sign || function(x) {\r\n x = +x; // convert to a number\r\n if (x === 0 || isNaN(x)) {\r\n return x;\r\n }\r\n return x > 0 ? 1 : -1;\r\n };\r\n\r\n // Parent class with empty event handlers for those drawing modes that don't need every event\r\n function CPMode() {\r\n }\r\n\r\n\t/**\r\n * True if this mode will be exiting the mode stack as soon as the current interation is complete.\r\n *\r\n * @type {boolean}\r\n */\r\n CPMode.prototype.transient = false;\r\n\r\n\t/**\r\n * If true, no input events will be sent to any modes underneath this one (event stream is captured).\r\n *\r\n * Painting events will continue to bubble.\r\n *\r\n * @type {boolean}\r\n */\r\n CPMode.prototype.capture = false;\r\n \r\n CPMode.prototype.enter = function() {\r\n setCursor(CURSOR_DEFAULT);\r\n };\r\n\r\n CPMode.prototype.leave = function() {\r\n this.capture = false;\r\n };\r\n\r\n CPMode.prototype.mouseMove = CPMode.prototype.paint = CPMode.prototype.mouseDown\r\n = CPMode.prototype.mouseDrag = CPMode.prototype.mouseUp = CPMode.prototype.keyDown\r\n = CPMode.prototype.suspend = CPMode.prototype.resume = CPMode.prototype.keyUp = function() {};\r\n\r\n //\r\n // Default UI Mode when not doing anything: used to start the other modes\r\n //\r\n\r\n function CPDefaultMode() {\r\n }\r\n \r\n CPDefaultMode.prototype = Object.create(CPMode.prototype);\r\n CPDefaultMode.prototype.constructor = CPDefaultMode;\r\n \r\n CPDefaultMode.prototype.mouseDown = function(e, button, pressure) {\r\n var\r\n spacePressed = key.isPressed(\"space\");\r\n \r\n if (!spacePressed\r\n && (button == BUTTON_SECONDARY || button == BUTTON_PRIMARY && e.altKey)) {\r\n modeStack.push(colorPickerMode, true);\r\n // Avoid infinite recursion by only delivering the event to the new mode (don't let it bubble back to us!)\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n } else if (!spacePressed && button == BUTTON_PRIMARY && !e.altKey && key.isPressed(\"r\")) {\r\n modeStack.push(rotateCanvasMode, true);\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n } else if (button == BUTTON_WHEEL || !e.altKey && spacePressed && button == BUTTON_PRIMARY){\r\n modeStack.push(panMode, true);\r\n modeStack.peek().mouseDown(e, button, pressure);\r\n }\r\n };\r\n \r\n CPDefaultMode.prototype.keyDown = function(e) {\r\n\t\t\tif (e.key.toLowerCase()===\"r\" && e.key !== \" \") {\r\n modeStack.push(rotateCanvasMode, true);\r\n modeStack.peek().keyDown(e);\r\n\t\t\t} else if (e.key.toLowerCase() !== \"r\" && e.key === \" \" && !e.altKey){\r\n // We can start the pan mode before the mouse button is even pressed, so that the \"grabbable\" cursor appears\r\n modeStack.push(panMode, true);\r\n modeStack.peek().keyDown(e);\r\n\t\t\t\treturn true;\r\n }\r\n };\r\n\r\n\t/**\r\n * A base for the three drawing modes, so they can all share the same brush-preview-circle drawing behaviour.\r\n *\r\n * @constructor\r\n */\r\n function CPDrawingMode() {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n /* The last rectangle we dirtied with a brush preview circle, or null if one hasn't been drawn yet */\r\n this.oldPreviewRect = null;\r\n }\r\n\r\n CPDrawingMode.prototype = Object.create(CPMode.prototype);\r\n CPDrawingMode.prototype.constructor = CPDrawingMode;\r\n\r\n /**\r\n * Get a rectangle that encloses the preview brush, in screen coordinates.\r\n */\r\n CPDrawingMode.prototype.getBrushPreviewOval = function() {\r\n var\r\n brushSize = controller.getBrushSize() * zoom;\r\n\r\n return new CPRect(\r\n mouseX - brushSize / 2,\r\n mouseY - brushSize / 2,\r\n mouseX + brushSize / 2,\r\n mouseY + brushSize / 2\r\n );\r\n };\r\n\r\n /**\r\n * Queues up the brush preview oval to be drawn.\r\n */\r\n CPDrawingMode.prototype.queueBrushPreview = function() {\r\n /* If we're not the top-most mode, it's unlikely that left clicking will drawing for us, so don't consider\r\n * painting the brush preview\r\n */\r\n if (modeStack.peek() != this) {\r\n return;\r\n }\r\n\r\n this.shouldPaintBrushPreview = true;\r\n\r\n var\r\n rect = this.getBrushPreviewOval();\r\n\r\n rect.grow(2, 2);\r\n\r\n // If a brush preview was drawn previously, stretch the repaint region to remove that old copy\r\n if (this.oldPreviewRect != null) {\r\n rect.union(this.oldPreviewRect);\r\n this.oldPreviewRect = null;\r\n }\r\n\r\n repaintRect(rect);\r\n };\r\n\r\n\t/**\r\n * Erase the brush preview if one had been drawn\r\n */\r\n CPDrawingMode.prototype.eraseBrushPreview = function() {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n if (this.oldPreviewRect != null) {\r\n repaintRect(this.oldPreviewRect);\r\n this.oldPreviewRect = null;\r\n }\r\n };\r\n\r\n CPDrawingMode.prototype.mouseMove = function(e, pressure) {\r\n this.queueBrushPreview();\r\n };\r\n\r\n CPDrawingMode.prototype.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n\r\n if (mouseIn) {\r\n this.queueBrushPreview();\r\n }\r\n };\r\n\r\n CPDrawingMode.prototype.leave = function() {\r\n CPMode.prototype.leave.call(this);\r\n this.eraseBrushPreview();\r\n };\r\n\r\n CPDrawingMode.prototype.suspend = CPDrawingMode.prototype.leave;\r\n CPDrawingMode.prototype.resume = CPDrawingMode.prototype.enter;\r\n\r\n CPDrawingMode.prototype.paint = function() {\r\n if (this.shouldPaintBrushPreview) {\r\n this.shouldPaintBrushPreview = false;\r\n\r\n var\r\n r = this.getBrushPreviewOval();\r\n\r\n canvasContext.beginPath();\r\n\r\n canvasContext.arc(\r\n (r.left + r.right) / 2,\r\n (r.top + r.bottom) / 2,\r\n r.getWidth() / 2,\r\n 0,\r\n Math.PI * 2\r\n );\r\n\r\n canvasContext.stroke();\r\n\r\n r.grow(2, 2);\r\n\r\n if (this.oldPreviewRect == null) {\r\n this.oldPreviewRect = r;\r\n } else {\r\n this.oldPreviewRect.union(r);\r\n }\r\n }\r\n };\r\n\r\n function CPFreehandMode() {\r\n CPDrawingMode.call(this);\r\n\r\n this.smoothMouse = {x:0.0, y:0.0};\r\n }\r\n \r\n CPFreehandMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPFreehandMode.prototype.constructor = CPFreehandMode;\r\n \r\n CPFreehandMode.prototype.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n var\r\n pf = coordToDocument({x: mouseX, y:mouseY});\r\n\r\n this.eraseBrushPreview();\r\n\t\r\n\t if (artwork.beginStroke(pf.x, pf.y, pressure)) {\r\n\t\t this.capture = true;\r\n\t\t\r\n\t\t this.smoothMouse = pf;\r\n\t\t\r\n\t\t return true;\r\n\t }\r\n }\r\n };\r\n\r\n CPFreehandMode.prototype.mouseDrag = function(e, pressure) {\r\n if (this.capture) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY}),\r\n smoothing = Math.min(0.999, Math.pow(controller.getBrushInfo().smoothing, 0.3));\r\n\r\n this.smoothMouse.x = (1.0 - smoothing) * pf.x + smoothing * this.smoothMouse.x;\r\n this.smoothMouse.y = (1.0 - smoothing) * pf.y + smoothing * this.smoothMouse.y;\r\n\r\n artwork.continueStroke(this.smoothMouse.x, this.smoothMouse.y, pressure);\r\n\r\n return true;\r\n } else {\r\n this.mouseMove(e);\r\n }\r\n };\r\n\r\n CPFreehandMode.prototype.mouseUp = function(e, button, pressure) {\r\n if (this.capture) {\r\n if (button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n artwork.endStroke();\r\n }\r\n return true;\r\n }\r\n };\r\n \r\n function CPLineMode() {\r\n var\r\n dragLineFrom, dragLineTo,\r\n LINE_PREVIEW_WIDTH = 1;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n this.capture = true;\r\n dragLineFrom = dragLineTo = {x: mouseX + 0.5, y: mouseY + 0.5};\r\n\r\n this.eraseBrushPreview();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n // The old line position that we'll invalidate for redraw\r\n invalidateRect = new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n );\r\n\r\n dragLineTo = {x: mouseX + 0.5, y: mouseY + 0.5}; // Target centre of pixel\r\n\r\n if (e.shiftKey) {\r\n // Snap to nearest 45 degrees\r\n var\r\n snap = Math.PI / 4,\r\n angle = Math.round(Math.atan2(dragLineTo.y - dragLineFrom.y, dragLineTo.x - dragLineFrom.x) / snap);\r\n\r\n switch (angle) {\r\n case 0:\r\n case 4:\r\n dragLineTo.y = dragLineFrom.y;\r\n break;\r\n\r\n case 2:\r\n case 6:\r\n dragLineTo.x = dragLineFrom.x;\r\n break;\r\n\r\n default:\r\n angle *= snap;\r\n\r\n var\r\n length = Math.sqrt((dragLineTo.y - dragLineFrom.y) * (dragLineTo.y - dragLineFrom.y) + (dragLineTo.x - dragLineFrom.x) * (dragLineTo.x - dragLineFrom.x));\r\n\r\n dragLineTo.x = dragLineFrom.x + length * Math.cos(angle);\r\n dragLineTo.y = dragLineFrom.y + length * Math.sin(angle);\r\n }\r\n }\r\n\r\n // The new line position\r\n invalidateRect.union(new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n ));\r\n\r\n repaintRect(invalidateRect);\r\n\r\n return true;\r\n } else {\r\n this.mouseMove.call(this, e);\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n var\r\n from = coordToDocument(dragLineFrom),\r\n to = coordToDocument(dragLineTo);\r\n\r\n this.capture = false;\r\n\r\n this.drawLine(from, to);\r\n\r\n var\r\n invalidateRect = new CPRect(\r\n Math.min(dragLineFrom.x, dragLineTo.x) - LINE_PREVIEW_WIDTH - 1,\r\n Math.min(dragLineFrom.y, dragLineTo.y) - LINE_PREVIEW_WIDTH - 1,\r\n Math.max(dragLineFrom.x, dragLineTo.x) + LINE_PREVIEW_WIDTH + 1 + 1,\r\n Math.max(dragLineFrom.y, dragLineTo.y) + LINE_PREVIEW_WIDTH + 1 + 1\r\n );\r\n \r\n repaintRect(invalidateRect);\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (this.capture) {\r\n canvasContext.lineWidth = LINE_PREVIEW_WIDTH;\r\n canvasContext.beginPath();\r\n canvasContext.moveTo(dragLineFrom.x, dragLineFrom.y);\r\n canvasContext.lineTo(dragLineTo.x, dragLineTo.y);\r\n canvasContext.stroke();\r\n } else {\r\n // Draw the regular brush preview circle\r\n CPDrawingMode.prototype.paint.call(this);\r\n }\r\n };\r\n\r\n CPDrawingMode.call(this);\r\n }\r\n \r\n CPLineMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPLineMode.prototype.constructor = CPLineMode;\r\n\r\n CPLineMode.prototype.drawLine = function(from, to) {\r\n artwork.beginStroke(from.x, from.y, 1);\r\n artwork.continueStroke(to.x, to.y, 1);\r\n artwork.endStroke();\r\n };\r\n\r\n function CPBezierMode() {\r\n const\r\n BEZIER_POINTS = 500,\r\n BEZIER_POINTS_PREVIEW = 100,\r\n\r\n BEZIER_STATE_INITIAL = 0,\r\n BEZIER_STATE_POINT_1 = 1,\r\n BEZIER_STATE_POINT_2 = 2;\r\n\r\n let\r\n dragBezierMode = BEZIER_STATE_INITIAL,\r\n dragBezierP0, dragBezierP1, dragBezierP2, dragBezierP3;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n dragBezierMode = BEZIER_STATE_INITIAL;\r\n dragBezierP0 = dragBezierP1 = dragBezierP2 = dragBezierP3 = p;\r\n this.capture = true;\r\n\r\n this.eraseBrushPreview();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n // Handles the first part of the Bezier where the user drags out a straight line\r\n this.mouseDrag = function(e) {\r\n if (this.capture && dragBezierMode === BEZIER_STATE_INITIAL) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n dragBezierP2 = dragBezierP3 = p;\r\n\r\n that.repaintAll();\r\n\r\n return true;\r\n } else {\r\n this.mouseMove.call(this, e);\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n switch (dragBezierMode) {\r\n case BEZIER_STATE_INITIAL:\r\n dragBezierMode = BEZIER_STATE_POINT_1;\r\n break;\r\n case BEZIER_STATE_POINT_1:\r\n dragBezierMode = BEZIER_STATE_POINT_2;\r\n break;\r\n case BEZIER_STATE_POINT_2:\r\n this.capture = false;\r\n\r\n let\r\n p0 = dragBezierP0,\r\n p1 = dragBezierP1,\r\n p2 = dragBezierP2,\r\n p3 = dragBezierP3,\r\n\r\n bezier = new CPBezier();\r\n\r\n bezier.x0 = p0.x;\r\n bezier.y0 = p0.y;\r\n bezier.x1 = p1.x;\r\n bezier.y1 = p1.y;\r\n bezier.x2 = p2.x;\r\n bezier.y2 = p2.y;\r\n bezier.x3 = p3.x;\r\n bezier.y3 = p3.y;\r\n\r\n let\r\n x = new Array(BEZIER_POINTS),\r\n y = new Array(BEZIER_POINTS);\r\n\r\n bezier.compute(x, y, BEZIER_POINTS);\r\n\r\n artwork.beginStroke(x[0], y[0], 1);\r\n for (let i = 1; i < BEZIER_POINTS; i++) {\r\n artwork.continueStroke(x[i], y[i], 1);\r\n }\r\n artwork.endStroke();\r\n that.repaintAll();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseMove = function(e, pressure) {\r\n if (this.capture) {\r\n let\r\n p = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (dragBezierMode == BEZIER_STATE_POINT_1) {\r\n dragBezierP1 = p;\r\n } else if (dragBezierMode == BEZIER_STATE_POINT_2) {\r\n dragBezierP2 = p;\r\n }\r\n that.repaintAll(); // FIXME: repaint only the bezier region\r\n\r\n return true;\r\n } else {\r\n // Draw the normal brush preview while not in the middle of a bezier operation\r\n CPDrawingMode.prototype.mouseMove.call(this, e, pressure);\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (this.capture) {\r\n let\r\n bezier = new CPBezier(),\r\n\r\n p0 = coordToDisplay(dragBezierP0),\r\n p1 = coordToDisplay(dragBezierP1),\r\n p2 = coordToDisplay(dragBezierP2),\r\n p3 = coordToDisplay(dragBezierP3);\r\n\r\n bezier.x0 = p0.x;\r\n bezier.y0 = p0.y;\r\n bezier.x1 = p1.x;\r\n bezier.y1 = p1.y;\r\n bezier.x2 = p2.x;\r\n bezier.y2 = p2.y;\r\n bezier.x3 = p3.x;\r\n bezier.y3 = p3.y;\r\n\r\n let\r\n x = new Array(BEZIER_POINTS_PREVIEW),\r\n y = new Array(BEZIER_POINTS_PREVIEW);\r\n \r\n bezier.compute(x, y, BEZIER_POINTS_PREVIEW);\r\n\r\n canvasContext.beginPath();\r\n \r\n canvasContext.moveTo(x[0], y[0]);\r\n for (let i = 1; i < BEZIER_POINTS_PREVIEW; i++) {\r\n canvasContext.lineTo(x[i], y[i]);\r\n }\r\n \r\n canvasContext.moveTo(~~p0.x, ~~p0.y);\r\n canvasContext.lineTo(~~p1.x, ~~p1.y);\r\n \r\n canvasContext.moveTo(~~p2.x, ~~p2.y);\r\n canvasContext.lineTo(~~p3.x, ~~p3.y);\r\n \r\n canvasContext.stroke();\r\n } else {\r\n // Paint the regular brush preview\r\n CPDrawingMode.prototype.paint.call(this);\r\n }\r\n };\r\n\r\n CPDrawingMode.call(this);\r\n }\r\n \r\n CPBezierMode.prototype = Object.create(CPDrawingMode.prototype);\r\n CPBezierMode.prototype.constructor = CPBezierMode;\r\n\r\n function CPColorPickerMode() {\r\n var \r\n mouseButton;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n } else if (!key.isPressed(\"space\") && (button == BUTTON_PRIMARY && (!this.transient || e.altKey) || button == BUTTON_SECONDARY)) {\r\n mouseButton = button;\r\n this.capture = true;\r\n\r\n setCursor(CURSOR_CROSSHAIR);\r\n\r\n this.mouseDrag(e);\r\n\r\n return true;\r\n } else if (this.transient) {\r\n // If we're not sampling and we get a button not intended for us, we probably shouldn't be on the stack\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (artwork.isPointWithin(pf.x, pf.y)) {\r\n controller.setCurColor(new CPColor(artwork.colorPicker(pf.x, pf.y)));\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == mouseButton) {\r\n mouseButton = -1;\r\n this.capture = false;\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n if (this.transient) {\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n mouseButton = -1;\r\n };\r\n }\r\n \r\n CPColorPickerMode.prototype = Object.create(CPMode.prototype);\r\n CPColorPickerMode.prototype.constructor = CPColorPickerMode;\r\n\r\n function CPPanCanvasMode() {\r\n var\r\n panningX, panningY,\r\n panningOffset,\r\n panningButton;\r\n\r\n this.keyDown = function(e) {\r\n if (e.key === \" \") {\r\n // If we're not already panning, then advertise that a left-click would pan\r\n if (!this.capture) {\r\n setCursor(CURSOR_PANNABLE);\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyUp = function(e) {\r\n if (this.transient && panningButton != BUTTON_WHEEL && e.key === \" \") {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop(); // yield control to the default mode\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n } else if (button == BUTTON_WHEEL || key.isPressed(\"space\") && button == BUTTON_PRIMARY\r\n || !this.transient && button == BUTTON_PRIMARY) {\r\n this.capture = true;\r\n panningButton = button;\r\n panningX = e.pageX;\r\n panningY = e.pageY;\r\n panningOffset = that.getOffset();\r\n setCursor(CURSOR_PANNING);\r\n\r\n return true;\r\n } else if (this.transient) {\r\n // If we're not panning and we get a button not intended for us, we probably shouldn't be on the stack\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n that.setOffset(panningOffset.x + e.pageX - panningX, panningOffset.y + e.pageY - panningY);\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == panningButton) {\r\n panningButton = -1;\r\n this.capture = false;\r\n\r\n if (this.transient && !key.isPressed(\"space\")) {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n setCursor(CURSOR_PANNABLE);\r\n };\r\n }\r\n \r\n CPPanCanvasMode.prototype = Object.create(CPMode.prototype);\r\n CPPanCanvasMode.prototype.constructor = CPPanCanvasMode;\r\n\r\n function CPFloodFillMode() {\r\n }\r\n \r\n CPFloodFillMode.prototype = Object.create(CPMode.prototype);\r\n CPFloodFillMode.prototype.constructor = CPFloodFillMode;\r\n\r\n CPFloodFillMode.prototype.mouseDown = function(e, button, pressure) {\r\n if (button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && shouldDrawToThisLayer()) {\r\n var\r\n pf = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n if (artwork.isPointWithin(pf.x, pf.y)) {\r\n artwork.floodFill(pf.x, pf.y);\r\n that.repaintAll();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n function CPRectSelectionMode() {\r\n var\r\n firstClick,\r\n curRect = new CPRect(0, 0, 0, 0),\r\n selectingButton = -1;\r\n\r\n this.mouseDown = function (e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")) {\r\n var\r\n p = coordToDocumentInt({x: mouseX, y: mouseY});\r\n\r\n selectingButton = button;\r\n\r\n curRect.makeEmpty();\r\n firstClick = p;\r\n\r\n that.repaintAll();\r\n\r\n this.capture = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (!this.capture)\r\n return false;\r\n\r\n var\r\n p = coordToDocumentInt({x: mouseX, y: mouseY}),\r\n square = e.shiftKey,\r\n \r\n squareDist = ~~Math.max(Math.abs(p.x - firstClick.x), Math.abs(p.y - firstClick.y));\r\n\r\n if (p.x >= firstClick.x) {\r\n curRect.left = firstClick.x;\r\n curRect.right = (square ? firstClick.x + squareDist : p.x) + 1;\r\n } else {\r\n curRect.left = square ? firstClick.x - squareDist : p.x;\r\n curRect.right = firstClick.x + 1;\r\n }\r\n\r\n if (p.y >= firstClick.y) {\r\n curRect.top = firstClick.y;\r\n curRect.bottom = (square ? firstClick.y + squareDist : p.y) + 1;\r\n } else {\r\n curRect.top = square ? firstClick.y - squareDist : p.y;\r\n curRect.bottom = firstClick.y + 1;\r\n }\r\n\r\n that.repaintAll();\r\n\r\n return true;\r\n };\r\n\r\n this.mouseUp = function (e, button, pressure) {\r\n if (this.capture && button == selectingButton) {\r\n artwork.rectangleSelection(curRect);\r\n curRect.makeEmpty();\r\n\r\n that.repaintAll();\r\n\r\n this.capture = false;\r\n selectingButton = -1;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n if (!curRect.isEmpty()) {\r\n canvasContext.lineWidth = 1;\r\n plotSelectionRect(canvasContext, curRect);\r\n }\r\n };\r\n }\r\n\r\n CPRectSelectionMode.prototype = Object.create(CPMode.prototype);\r\n CPRectSelectionMode.prototype.constructor = CPRectSelectionMode;\r\n\r\n function CPMoveToolMode() {\r\n var \r\n lastPoint,\r\n copyMode,\r\n firstMove = false;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !key.isPressed(\"space\") && checkCurrentLayerIsVisible()) {\r\n lastPoint = coordToDocument({x: mouseX, y: mouseY});\r\n\r\n copyMode = e.altKey;\r\n firstMove = true;\r\n this.capture = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = throttle(25, function(e) {\r\n if (this.capture) {\r\n var\r\n p = coordToDocument({x: mouseX, y: mouseY}),\r\n\r\n moveFloat = {x: p.x - lastPoint.x, y: p.y - lastPoint.y},\r\n moveInt = {x: ~~moveFloat.x, y: ~~moveFloat.y}; // Round towards zero\r\n\r\n if (moveInt.x != 0 || moveInt.y != 0) {\r\n artwork.move(moveInt.x, moveInt.y, copyMode && firstMove);\r\n firstMove = false;\r\n }\r\n\r\n /*\r\n * Nudge the last point by the remainder we weren't able to move this iteration (due to move() only\r\n * accepting integer offsets). This'll carry that fractional part of the move over for next iteration.\r\n */\r\n lastPoint.x = p.x - (moveFloat.x - moveInt.x);\r\n lastPoint.y = p.y - (moveFloat.y - moveInt.y);\r\n\r\n return true;\r\n }\r\n });\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n if (this.transient) {\r\n modeStack.pop();\r\n }\r\n return true;\r\n }\r\n };\r\n }\r\n\r\n CPMoveToolMode.prototype = Object.create(CPMode.prototype);\r\n CPMoveToolMode.prototype.constructor = CPMoveToolMode;\r\n\r\n CPMoveToolMode.prototype.mouseMove = function(e) {\r\n if (!key.isPressed(\"r\")) {\r\n setCursor(CURSOR_MOVE);\r\n return true;\r\n }\r\n };\r\n\r\n CPMoveToolMode.prototype.enter = function() {\r\n setCursor(CURSOR_MOVE);\r\n };\r\n\r\n function CPTransformMode() {\r\n const\r\n HANDLE_RADIUS = 3,\r\n\r\n DRAG_NONE = -1,\r\n DRAG_ROTATE = -2,\r\n DRAG_MOVE = -3,\r\n DRAG_NW_CORNER = 0,\r\n DRAG_N_EDGE = 1,\r\n DRAG_NE_CORNER = 2,\r\n DRAG_E_EDGE = 3,\r\n DRAG_SE_CORNER = 4,\r\n DRAG_S_EDGE = 5,\r\n DRAG_SW_CORNER = 6,\r\n DRAG_W_EDGE = 7;\r\n\r\n var\r\n /** @type {CPTransform} The current transformation */\r\n affine,\r\n /** @type {CPRect} The initial document rectangle to transform */\r\n srcRect,\r\n /** @type {CPPolygon} The initial transform rect */\r\n origCornerPoints,\r\n /** @type {CPPolygon} The current corners of the transform rect in document space */\r\n cornerPoints,\r\n\r\n draggingMode = DRAG_NONE,\r\n\r\n lastDragPointDisplay,\r\n lastDragPointDoc,\r\n\r\n // Keep track of how many degrees we've rotated so far during this transformation\r\n rotationAccumulator;\r\n\r\n\t\t/**\r\n * Get the polygon that represents the current transform result area in display coordinates.\r\n *\r\n * @returns {CPPolygon}\r\n */\r\n function cornersToDisplayPolygon() {\r\n return cornerPoints.getTransformed(transform);\r\n }\r\n\r\n function averagePoints(p1, p2) {\r\n return {x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2};\r\n }\r\n\r\n function roundPoint(p) {\r\n return {x : Math.round(p.x), y: Math.round(p.y)};\r\n }\r\n\r\n\t\t/**\r\n * Decide which drag action should be taken if our mouse was pressed in the given position.\r\n *\r\n * @param {CPPolygon} corners - The corners of the current transform area\r\n * @param mouse - The mouse point\r\n * @returns {number} A DRAG_* constant\r\n */\r\n function classifyDragAction(corners, mouse) {\r\n const\r\n HANDLE_CAPTURE_RADIUS = 7,\r\n HANDLE_CAPTURE_RADIUS_SQR = HANDLE_CAPTURE_RADIUS * HANDLE_CAPTURE_RADIUS,\r\n EDGE_CAPTURE_RADIUS = HANDLE_CAPTURE_RADIUS,\r\n EDGE_CAPTURE_RADIUS_SQR = EDGE_CAPTURE_RADIUS * EDGE_CAPTURE_RADIUS;\r\n\r\n // Are we dragging a corner?\r\n for (let i = 0; i < corners.points.length; i++) {\r\n if ((mouse.x - corners.points[i].x) * (mouse.x - corners.points[i].x) + (mouse.y - corners.points[i].y) * (mouse.y - corners.points[i].y) <= HANDLE_CAPTURE_RADIUS_SQR) {\r\n return i * 2;\r\n }\r\n }\r\n\r\n // Are we dragging an edge?\r\n for (let i = 0; i < corners.points.length; i++) {\r\n var\r\n edgeP1 = corners.points[i],\r\n edgeP2 = corners.points[(i + 1) % corners.points.length],\r\n\r\n vEdge = new CPVector(edgeP2.x - edgeP1.x, edgeP2.y - edgeP1.y),\r\n vMouse = new CPVector(mouse.x - edgeP1.x, mouse.y - edgeP1.y),\r\n \r\n vEdgeLen = vEdge.getLength(),\r\n\r\n vEdgeScaled = vEdge.getScaled(1 / vEdgeLen),\r\n vMouseScaled = vMouse.getScaled(1 / vEdgeLen),\r\n\r\n mousePropOnLine = vEdgeScaled.getDotProduct(vMouseScaled);\r\n\r\n // If we're within the ends of the line (perpendicularly speaking)\r\n if (mousePropOnLine >= 0.0 && mousePropOnLine <= 1.0) {\r\n // This gives us the point on the line closest to the mouse\r\n vEdge.scale(mousePropOnLine);\r\n \r\n if ((vEdge.x - vMouse.x) * (vEdge.x - vMouse.x) + (vEdge.y - vMouse.y) * (vEdge.y - vMouse.y) <= EDGE_CAPTURE_RADIUS_SQR) {\r\n return i * 2 + 1;\r\n }\r\n }\r\n }\r\n\r\n if (corners.containsPoint(mouse)) {\r\n return DRAG_MOVE;\r\n }\r\n\r\n return DRAG_ROTATE;\r\n }\r\n\r\n function setCursorForHandles() {\r\n var\r\n corners = cornersToDisplayPolygon(),\r\n mouse = {x: mouseX, y: mouseY},\r\n dragAction = classifyDragAction(corners, mouse);\r\n\r\n switch (dragAction) {\r\n case DRAG_NW_CORNER:\r\n case DRAG_NE_CORNER:\r\n case DRAG_SE_CORNER:\r\n case DRAG_SW_CORNER:\r\n // Choose a cursor for a 45-degree resize from this corner\r\n let\r\n cornerIndex = ~~(dragAction / 2),\r\n cornerBefore = corners.points[(cornerIndex + 3) % 4],\r\n corner = corners.points[cornerIndex],\r\n cornerAfter = corners.points[(cornerIndex + 1) % 4],\r\n\r\n // Get a vector which points 45 degrees toward the center of the box, this'll do for cursor direction\r\n v45 = CPVector.subtractPoints(cornerBefore, corner).normalize().add(CPVector.subtractPoints(cornerAfter, corner).normalize());\r\n\r\n setResizeCursorForVector(v45);\r\n break;\r\n case DRAG_N_EDGE:\r\n case DRAG_E_EDGE:\r\n case DRAG_S_EDGE:\r\n case DRAG_W_EDGE:\r\n // Resizing from here will move edge perpendicularly\r\n let\r\n corner1 = corners.points[~~(dragAction / 2)],\r\n corner2 = corners.points[(~~(dragAction / 2) + 1) % 4],\r\n vPerp = CPVector.subtractPoints(corner2, corner1).getPerpendicular();\r\n\r\n setResizeCursorForVector(vPerp);\r\n break;\r\n case DRAG_MOVE:\r\n setCursor(CURSOR_MOVE);\r\n break;\r\n case DRAG_ROTATE:\r\n setCursor(CURSOR_DEFAULT); // TODO add a custom rotation cursor\r\n break;\r\n default:\r\n setCursor(CURSOR_DEFAULT);\r\n }\r\n }\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (!this.capture && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")) {\r\n var\r\n corners = cornersToDisplayPolygon();\r\n\r\n draggingMode = classifyDragAction(corners, {x: mouseX, y: mouseY});\r\n\r\n lastDragPointDisplay = {x: mouseX, y: mouseY};\r\n lastDragPointDoc = coordToDocument(lastDragPointDisplay);\r\n\r\n this.capture = true;\r\n\r\n setCursorForHandles();\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.mouseDrag = throttle(40, function(e) {\r\n const\r\n MIN_SCALE = 0.001;\r\n\r\n if (this.capture) {\r\n var\r\n dragPointDisplay = {x: mouseX, y: mouseY};\r\n\r\n switch (draggingMode) {\r\n case DRAG_MOVE:\r\n let\r\n dragPointDoc = roundPoint(coordToDocument(dragPointDisplay)),\r\n\r\n translation = CPVector.subtractPoints(dragPointDoc, lastDragPointDoc),\r\n\r\n // Only translate in whole-pixel increments (in document space not canvas space)\r\n translationRounded = translation.getTruncated(),\r\n\r\n translationRemainder = translation.subtract(translationRounded),\r\n\r\n translateInstance = new CPTransform();\r\n\r\n /*\r\n * Apply the translate *after* the current affine is applied.\r\n */\r\n translateInstance.translate(translationRounded.x, translationRounded.y);\r\n\r\n affine.preMultiply(translateInstance);\r\n\r\n // Accumulate the fractional move that we didn't apply for next time\r\n lastDragPointDoc = CPVector.subtractPoints(dragPointDoc, translationRemainder);\r\n break;\r\n case DRAG_ROTATE:\r\n const\r\n DRAG_ROTATE_SNAP_ANGLE = Math.PI / 4;\r\n\r\n let\r\n centerDoc = cornerPoints.getCenter(),\r\n centerDisplay = coordToDisplay(centerDoc),\r\n\r\n oldMouseAngle = Math.atan2(lastDragPointDisplay.y - centerDisplay.y, lastDragPointDisplay.x - centerDisplay.x),\r\n newMouseAngle = Math.atan2(dragPointDisplay.y - centerDisplay.y, dragPointDisplay.x - centerDisplay.x),\r\n deltaMouseAngle = newMouseAngle - oldMouseAngle,\r\n\r\n rotateAngle,\r\n rotateInstance = new CPTransform();\r\n\r\n rotationAccumulator += deltaMouseAngle;\r\n\r\n if (e.shiftKey) {\r\n /*\r\n * The rotation in the decomposition was made about the origin. We want to rotate about the\r\n * center of the selection, so first rotate the selection to square it up with the axes,\r\n * then we'll pivot the selection about its center to the new angle.\r\n */\r\n rotateAngle = -affine.decompose().rotate + Math.round(rotationAccumulator / DRAG_ROTATE_SNAP_ANGLE) * DRAG_ROTATE_SNAP_ANGLE;\r\n } else {\r\n rotateAngle = deltaMouseAngle;\r\n }\r\n\r\n /* Apply the rotation *after* the current affine instead of before it, so that we don't\r\n * end up scaling on top of the rotated selection later (which would cause an unwanted shear)\r\n */\r\n rotateInstance.rotateAroundPoint(rotateAngle, centerDoc.x, centerDoc.y);\r\n\r\n affine.preMultiply(rotateInstance);\r\n\r\n lastDragPointDisplay = dragPointDisplay;\r\n break;\r\n case DRAG_NW_CORNER:\r\n case DRAG_NE_CORNER:\r\n case DRAG_SE_CORNER:\r\n case DRAG_SW_CORNER:\r\n {\r\n let\r\n draggingCorner = ~~(draggingMode / 2),\r\n\r\n oldCorner = origCornerPoints.points[draggingCorner],\r\n // The corner we dragged will move into its new position\r\n newCorner = affine.getInverted().getTransformedPoint(roundPoint(coordToDocument(dragPointDisplay))),\r\n\r\n // The opposite corner to the one we dragged must not move\r\n fixCorner = origCornerPoints.points[(draggingCorner + 2) % 4],\r\n\r\n /* Now we can see how much we'd need to scale the original rectangle about the fixed corner\r\n * for the other corner to reach the new position.\r\n */\r\n scaleX = (newCorner.x - fixCorner.x) / (oldCorner.x - fixCorner.x),\r\n scaleY = (newCorner.y - fixCorner.y) / (oldCorner.y - fixCorner.y);\r\n\r\n /*\r\n * If the user resized it until it was zero-sized, just ignore that position and assume they'll move\r\n * past it in a msec.\r\n */\r\n if (Math.abs(scaleX) < MIN_SCALE || Math.abs(scaleY) < MIN_SCALE || isNaN(scaleX) || isNaN(scaleY)) {\r\n return true;\r\n }\r\n\r\n // Does user want proportional resize?\r\n if (e.shiftKey) {\r\n var\r\n largestScale = Math.max(scaleX, scaleY);\r\n\r\n scaleX = largestScale;\r\n scaleY = largestScale;\r\n }\r\n\r\n // The transform we do here will be performed first before any of the other transforms (scale, rotate, etc)\r\n affine.scaleAroundPoint(scaleX, scaleY, fixCorner.x, fixCorner.y);\r\n }\r\n break;\r\n case DRAG_N_EDGE:\r\n case DRAG_S_EDGE:\r\n case DRAG_E_EDGE:\r\n case DRAG_W_EDGE:\r\n {\r\n let\r\n cornerIndex = ~~(draggingMode / 2),\r\n\r\n oldHandle = averagePoints(origCornerPoints.points[cornerIndex], origCornerPoints.points[(cornerIndex + 1) % 4]),\r\n\r\n // The handle we dragged will move into its new position\r\n newHandle = affine.getInverted().getTransformedPoint(roundPoint(coordToDocument(dragPointDisplay))),\r\n\r\n // The opposite handle to the one we dragged must not move\r\n fixHandle = averagePoints(origCornerPoints.points[(cornerIndex + 2) % 4], origCornerPoints.points[(cornerIndex + 3) % 4]),\r\n\r\n scaleX, scaleY,\r\n\r\n oldVector = CPVector.subtractPoints(oldHandle, fixHandle),\r\n newVector = CPVector.subtractPoints(newHandle, fixHandle),\r\n\r\n oldLength = oldVector.getLength(),\r\n // We only take the length in the perpendicular direction to the transform edge:\r\n newLength = oldVector.getDotProduct(newVector) / oldLength,\r\n\r\n newScale = newLength / oldLength;\r\n\r\n /*\r\n * If the user resized it until it was zero-sized, just ignore that position and assume they'll move\r\n * past it in a msec.\r\n */\r\n if (Math.abs(newScale) < MIN_SCALE || isNaN(newScale)) {\r\n return true;\r\n }\r\n\r\n if (draggingMode == DRAG_N_EDGE || draggingMode == DRAG_S_EDGE) {\r\n scaleX = 1.0;\r\n scaleY = newScale;\r\n } else {\r\n scaleX = newScale;\r\n scaleY = 1.0;\r\n }\r\n\r\n affine.scaleAroundPoint(scaleX, scaleY, fixHandle.x, fixHandle.y);\r\n }\r\n break;\r\n }\r\n\r\n cornerPoints = origCornerPoints.getTransformed(affine);\r\n\r\n artwork.transformAffineAmend(affine);\r\n\r\n // TODO make me more specific\r\n that.repaintAll();\r\n\r\n return true;\r\n }\r\n });\r\n\r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == BUTTON_PRIMARY) {\r\n this.capture = false;\r\n draggingMode = DRAG_NONE;\r\n return true;\r\n }\r\n };\r\n\r\n /*\r\n * Set an appropriate resize cursor for the specified vector from the center to the handle.\r\n */\r\n function setResizeCursorForVector(v) {\r\n let\r\n angle = Math.atan2(-v.y, v.x),\r\n /*\r\n * Slice up into 45 degrees slices so that there are +-22.5 degrees centered around each corner,\r\n * and a 45 degree segment for each edge\r\n */\r\n slice = Math.floor(angle / (Math.PI / 4) + 0.5),\r\n cursor;\r\n\r\n // Wrap angles below the x-axis wrap to positive ones...\r\n if (slice < 0) {\r\n slice += 4;\r\n }\r\n\r\n switch (slice) {\r\n case 0:\r\n default:\r\n cursor = CURSOR_EW_RESIZE;\r\n break;\r\n case 1:\r\n cursor = CURSOR_NESW_RESIZE;\r\n break;\r\n case 2:\r\n cursor = CURSOR_NS_RESIZE;\r\n break;\r\n case 3:\r\n cursor = CURSOR_NWSE_RESIZE;\r\n break;\r\n }\r\n\r\n setCursor(cursor);\r\n }\r\n\r\n this.mouseMove = function() {\r\n // We want to stick with our choice of cursor throughout the drag operation\r\n if (!this.capture) {\r\n setCursorForHandles();\r\n }\r\n };\r\n\r\n this.paint = function() {\r\n var\r\n corners = cornersToDisplayPolygon().points,\r\n handles = new Array(corners.length * 2);\r\n\r\n // Collect the positions of the edge and corner handles...\r\n for (let i = 0; i < corners.length; i++) {\r\n handles[i] = corners[i];\r\n }\r\n\r\n for (let i = 0; i < corners.length; i++) {\r\n var\r\n edgeP1 = corners[i],\r\n edgeP2 = corners[(i + 1) % corners.length],\r\n\r\n midWay = {x: (edgeP1.x + edgeP2.x) / 2, y: (edgeP1.y + edgeP2.y) / 2};\r\n\r\n handles[i + corners.length] = midWay;\r\n }\r\n\r\n setContrastingDrawStyle(canvasContext, \"fill\");\r\n for (let i = 0; i < handles.length; i++) {\r\n canvasContext.fillRect(handles[i].x - HANDLE_RADIUS, handles[i].y - HANDLE_RADIUS, HANDLE_RADIUS * 2 + 1, HANDLE_RADIUS * 2 + 1);\r\n }\r\n\r\n strokePolygon(canvasContext, corners);\r\n };\r\n\r\n this.keyDown = function(e) {\r\n if (e.key === \"Enter\") {\r\n controller.actionPerformed({action: \"CPTransformAccept\"});\r\n\r\n return true;\r\n } else if (e.key === \"Escape\") {\r\n controller.actionPerformed({action: \"CPTransformReject\"});\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.enter = function() {\r\n CPMode.prototype.enter.call(this);\r\n\r\n // Start off with the identity transform\r\n var\r\n initial = artwork.transformAffineBegin(),\r\n initialSelection;\r\n\r\n affine = initial.transform;\r\n srcRect = initial.rect;\r\n\r\n // Decide on the rectangle we'll show as the boundary of the transform area\r\n initialSelection = initial.selection;\r\n\r\n /* If the user didn't have anything selected, we'll use the actual shrink-wrapped transform area instead. */\r\n if (initialSelection.isEmpty()) {\r\n initialSelection = initial.rect.clone();\r\n }\r\n\r\n origCornerPoints = new CPPolygon(initialSelection.toPoints());\r\n cornerPoints = origCornerPoints.getTransformed(affine);\r\n\r\n draggingMode = -1;\r\n rotationAccumulator = 0;\r\n\r\n that.repaintAll();\r\n };\r\n\r\n this.leave = function() {\r\n CPMode.prototype.leave.call(this);\r\n that.repaintAll();\r\n };\r\n }\r\n\r\n CPTransformMode.prototype = Object.create(CPMode.prototype);\r\n CPTransformMode.prototype.constructor = CPTransformMode;\r\n\r\n function CPRotateCanvasMode() {\r\n var \r\n firstClick,\r\n initAngle = 0.0,\r\n initTransform,\r\n dragged = false,\r\n\r\n rotateButton = -1;\r\n\r\n this.mouseDown = function(e, button, pressure) {\r\n if (this.capture) {\r\n return true;\r\n\t\t\t\t} else if (!this.transient && button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\")\r\n\t\t\t\t\t|| (button == BUTTON_PRIMARY && !e.altKey && !key.isPressed(\"space\") && key.isPressed(\"r\"))) {\r\n\r\n\t\t\t\tfirstClick = {x: mouseX, y: mouseY};\r\n\r\n initAngle = that.getRotation();\r\n initTransform = transform.clone();\r\n\r\n dragged = false;\r\n\r\n this.capture = true;\r\n rotateButton = button;\r\n\r\n return true;\r\n } else if (this.transient) {\r\n modeStack.pop();\r\n }\r\n };\r\n\r\n this.mouseDrag = function(e) {\r\n if (this.capture) {\r\n var\r\n p = {x: mouseX, y: mouseY},\r\n\r\n displayCenter = {x: $(canvas).width() / 2, y: $(canvas).height() / 2},\r\n canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n deltaAngle = Math.atan2(p.y - displayCenter.y, p.x - displayCenter.x) - Math.atan2(firstClick.y - displayCenter.y, firstClick.x - displayCenter.x),\r\n\r\n rotTrans = new CPTransform();\r\n\r\n rotTrans.rotateAroundPoint(deltaAngle, canvasCenter.x, canvasCenter.y);\r\n\r\n rotTrans.multiply(initTransform);\r\n\r\n that.setRotation(initAngle + deltaAngle);\r\n that.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n\r\n dragged = true;\r\n\r\n return true;\r\n }\r\n };\r\n\r\n /**\r\n * When the mouse is released after rotation, we might want to snap our angle to the nearest 90 degree mark.\r\n */\r\n function finishRotation() {\r\n const\r\n ROTATE_SNAP_DEGREES = 5;\r\n \r\n let\r\n nearest90 = Math.round(canvasRotation / (Math.PI / 2)) * Math.PI / 2;\r\n \r\n if (Math.abs(canvasRotation - nearest90) < ROTATE_SNAP_DEGREES / 180 * Math.PI) {\r\n let\r\n deltaAngle = nearest90 - initAngle,\r\n\r\n center = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n rotTrans = new CPTransform();\r\n\r\n rotTrans.rotateAroundPoint(deltaAngle, center.x, center.y);\r\n\r\n rotTrans.multiply(initTransform);\r\n\r\n that.setRotation(initAngle + deltaAngle);\r\n that.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n \r\n that.repaintAll();\r\n }\r\n\r\n that.emitEvent(\"canvasRotated90\", [that.getRotation90()]);\r\n }\r\n \r\n this.mouseUp = function(e, button, pressure) {\r\n if (this.capture && button == rotateButton) {\r\n if (dragged) {\r\n finishRotation();\r\n } else {\r\n that.resetRotation();\r\n }\r\n\r\n this.capture = false;\r\n\r\n if (this.transient && !key.isPressed(\"r\")) {\r\n modeStack.pop();\r\n }\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyUp = function(e) {\r\n if (this.transient && rotateButton != BUTTON_WHEEL && e.key === \" \") {\r\n setCursor(CURSOR_DEFAULT);\r\n\r\n modeStack.pop(); // yield control to the default mode\r\n\r\n return true;\r\n }\r\n };\r\n\r\n this.keyDown = function(e) {\r\n if (e.key.toLowerCase() === \"r\") {\r\n // That's our hotkey, so stay in this mode (don't forward to CPDefaultMode)\r\n return true;\r\n }\r\n };\r\n }\r\n \r\n CPRotateCanvasMode.prototype = Object.create(CPMode.prototype);\r\n CPRotateCanvasMode.prototype.constructor = CPRotateCanvasMode;\r\n\r\n function CPGradientFillMode() {\r\n // Super constructor\r\n CPLineMode.call(this);\r\n }\r\n \r\n CPGradientFillMode.prototype = Object.create(CPLineMode.prototype);\r\n CPGradientFillMode.prototype.constructor = CPGradientFillMode;\r\n\r\n CPGradientFillMode.prototype.drawLine = function(from, to) {\r\n artwork.gradientFill(Math.round(from.x), Math.round(from.y), Math.round(to.x), Math.round(to.y), controller.getCurGradient());\r\n };\r\n\r\n CPGradientFillMode.prototype.queueBrushPreview = function() {\r\n //Suppress the drawing of the brush preview (inherited from CPDrawingMode)\r\n };\r\n\r\n function setCursor(cursor) {\r\n if (canvas.getAttribute(\"data-cursor\") != cursor) {\r\n canvas.setAttribute(\"data-cursor\", cursor);\r\n }\r\n }\r\n\r\n function checkCurrentLayerIsVisible() {\r\n var\r\n activeLayer = artwork.getActiveLayer();\r\n\r\n if (!(activeLayer.visible && activeLayer.ancestorsAreVisible())) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! This layer is currently hidden\", \"layer\");\r\n\r\n return false;\r\n } else if (activeLayer.alpha == 0) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! This layer's opacity is currently 0%\", \"opacity\");\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n\t/**\r\n * Check that we should be drawing to the current layer, and let the user know if they are being blocked by the\r\n * layer settings.\r\n *\r\n * @returns {boolean} True if we should draw to the current layer\r\n */\r\n function shouldDrawToThisLayer() {\r\n var\r\n activeLayer = artwork.getActiveLayer();\r\n\r\n if (activeLayer instanceof CPLayerGroup && !artwork.isEditingMask()) {\r\n controller.showLayerNotification(activeLayer, \"Whoops! You can't draw on a group\", \"layer\");\r\n\r\n return false;\r\n }\r\n\r\n return checkCurrentLayerIsVisible();\r\n }\r\n\r\n /**\r\n * Update the scrollbar's range/position to match the current view settings for the document.\r\n *\r\n * @param scrollbar {CPScrollbar}\r\n * @param visMin The smallest coordinate in this axis in which the drawing appears\r\n * @param visWidth The extent of the drawing in this axis\r\n * @param viewSize The extent of the screen canvas in this axis\r\n * @param offset The present pixel offset of the drawing in this axis\r\n */\r\n function updateScrollBar(scrollbar, visMin, visWidth, viewSize, offset) {\r\n var\r\n xMin = visMin - viewSize - offset + visWidth / 4,\r\n xMax = visMin + visWidth - offset - visWidth / 4;\r\n \r\n scrollbar.setValues(-offset, viewSize, xMin, xMax);\r\n \r\n scrollbar.setBlockIncrement(Math.max(1, ~~(viewSize * .66)));\r\n scrollbar.setUnitIncrement(Math.max(1, ~~(viewSize * .05)));\r\n }\r\n \r\n function updateScrollBars() {\r\n if (horzScroll == null || vertScroll == null\r\n || horzScroll.getValueIsAdjusting() || vertScroll.getValueIsAdjusting() ) {\r\n return;\r\n }\r\n\r\n var\r\n visibleRect = getRefreshArea(new CPRect(0, 0, artworkCanvas.width, artworkCanvas.height));\r\n\r\n updateScrollBar(horzScroll, visibleRect.left, visibleRect.getWidth(), $(canvas).width(), that.getOffset().x);\r\n updateScrollBar(vertScroll, visibleRect.top, visibleRect.getHeight(), $(canvas).height(), that.getOffset().y);\r\n }\r\n\r\n function updateTransform() {\r\n transform.setToIdentity();\r\n transform.translate(offsetX, offsetY);\r\n transform.scale(zoom, zoom);\r\n transform.rotate(canvasRotation);\r\n\r\n updateScrollBars();\r\n that.repaintAll();\r\n }\r\n \r\n /**\r\n * Convert a canvas-relative coordinate into document coordinates and return the new coordinate.\r\n */\r\n function coordToDocument(coord) {\r\n // TODO cache inverted transform\r\n return transform.getInverted().getTransformedPoint(coord);\r\n }\r\n \r\n /**\r\n * Convert a canvas-relative coordinate into document coordinates.\r\n */\r\n function coordToDocumentInt(coord) {\r\n var\r\n result = coordToDocument(coord);\r\n \r\n result.x = Math.floor(result.x);\r\n result.y = Math.floor(result.y);\r\n \r\n return result;\r\n }\r\n \r\n /**\r\n * Convert a {x: pageX, y: pageY} co-ordinate pair from a mouse event to canvas-relative coordinates.\r\n */\r\n function mouseCoordToCanvas(coord) {\r\n var\r\n rect = canvas.getBoundingClientRect();\r\n\r\n return {x: coord.x - rect.left - window.pageXOffset, y: coord.y - rect.top - window.pageYOffset};\r\n }\r\n \r\n function coordToDisplay(p) {\r\n return transform.getTransformedPoint(p);\r\n }\r\n\r\n function coordToDisplayInt(p) {\r\n var\r\n result = coordToDisplay(p);\r\n \r\n result.x = Math.round(result.x);\r\n result.y = Math.round(result.y);\r\n \r\n return result;\r\n }\r\n \r\n\t/**\r\n * Convert a rectangle that encloses the given document pixels into a rectangle in display coordinates.\r\n *\r\n * @param rect {CPRect}\r\n * @returns {*[]}\r\n */\r\n function rectToDisplay(rect) {\r\n var\r\n center = coordToDisplay({x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2}),\r\n coords = rect.toPoints();\r\n\r\n for (var i = 0; i < coords.length; i++) {\r\n coords[i] = coordToDisplayInt(coords[i]);\r\n\r\n // Need to inset the co-ordinates by 0.5 display pixels for the line to pass through the middle of the display pixel\r\n coords[i].x += Math.sign(center.x - coords[i].x) * 0.5;\r\n coords[i].y += Math.sign(center.y - coords[i].y) * 0.5;\r\n }\r\n\r\n return coords;\r\n }\r\n\r\n function strokePolygon(context, coords) {\r\n context.beginPath();\r\n\r\n context.moveTo(coords[0].x, coords[0].y);\r\n for (var i = 1; i < coords.length; i++) {\r\n context.lineTo(coords[i].x, coords[i].y);\r\n }\r\n context.lineTo(coords[0].x, coords[0].y);\r\n\r\n context.stroke();\r\n }\r\n\r\n /**\r\n * Stroke a selection rectangle that encloses the pixels in the given rectangle (in document co-ordinates).\r\n */\r\n function plotSelectionRect(context, rect) {\r\n strokePolygon(context, rectToDisplay(rect));\r\n }\r\n\r\n /**\r\n * Take a CPRect of document coordinates and return a CPRect of canvas coordinates to repaint for that region.\r\n */\r\n function getRefreshArea(r) {\r\n var\r\n p1 = coordToDisplayInt({x: r.left - 1, y: r.top - 1}),\r\n p2 = coordToDisplayInt({x: r.left - 1, y: r.bottom}),\r\n p3 = coordToDisplayInt({x: r.right, y: r.top - 1}),\r\n p4 = coordToDisplayInt({x: r.right, y: r.bottom}),\r\n\r\n r2 = new CPRect(\r\n Math.min(Math.min(p1.x, p2.x), Math.min(p3.x, p4.x)),\r\n Math.min(Math.min(p1.y, p2.y), Math.min(p3.y, p4.y)),\r\n Math.max(Math.max(p1.x, p2.x), Math.max(p3.x, p4.x)) + 1,\r\n Math.max(Math.max(p1.y, p2.y), Math.max(p3.y, p4.y)) + 1\r\n );\r\n\r\n r2.grow(2, 2); // to be sure to include everything\r\n\r\n return r2;\r\n }\r\n\r\n /**\r\n * Adjust the current offset to bring the center of the artwork to the center of the canvas\r\n */\r\n function centerCanvas() {\r\n var\r\n width = canvas.width,\r\n height = canvas.height,\r\n \r\n artworkCenter = coordToDisplay({x: artwork.width / 2, y: artwork.height / 2});\r\n \r\n that.setOffset(\r\n Math.round(offsetX + width / 2.0 - artworkCenter.x),\r\n Math.round(offsetY + height / 2.0 - artworkCenter.y)\r\n );\r\n }\r\n \r\n this.setZoom = function(_zoom) {\r\n zoom = _zoom;\r\n updateTransform();\r\n };\r\n\r\n this.getZoom = function() {\r\n return zoom;\r\n };\r\n \r\n this.setGridSize = function(_gridSize) {\r\n gridSize = Math.max(Math.round(_gridSize), 1);\r\n this.repaintAll();\r\n };\r\n\r\n this.getGridSize = function() {\r\n return gridSize;\r\n };\r\n\r\n this.setOffset = function(x, y) {\r\n if (isNaN(x) || isNaN(y)) {\r\n console.log(\"Bad offset\");\r\n } else {\r\n offsetX = x;\r\n offsetY = y;\r\n updateTransform();\r\n }\r\n };\r\n\r\n this.getOffset = function() {\r\n return {x: offsetX, y: offsetY};\r\n };\r\n \r\n this.setInterpolation = function(enabled) {\r\n interpolation = enabled;\r\n\r\n setCanvasInterpolation(canvasContext, enabled);\r\n\r\n this.repaintAll();\r\n };\r\n\r\n this.setRotation = function(angle) {\r\n canvasRotation = angle % (2 * Math.PI);\r\n updateTransform();\r\n };\r\n\r\n /**\r\n * Get canvas rotation in radians.\r\n * \r\n * @return {number}\r\n */\r\n this.getRotation = function() {\r\n return canvasRotation;\r\n };\r\n \r\n /**\r\n * Get the rotation as the nearest number of whole 90 degree clockwise rotations ([0..3])\r\n */\r\n this.getRotation90 = function() {\r\n var\r\n rotation = Math.round(this.getRotation() / Math.PI * 2);\r\n \r\n // Just in case:\r\n rotation %= 4;\r\n \r\n // We want [0..3] as output\r\n if (rotation < 0) {\r\n rotation += 4;\r\n }\r\n \r\n return rotation;\r\n };\r\n\r\n /**\r\n *\r\n * @param zoom float\r\n * @param centerX float X co-ordinate in the canvas space\r\n * @param centerY float Y co-ordinate in the canvas space\r\n */\r\n function zoomOnPoint(zoom, centerX, centerY) {\r\n zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));\r\n \r\n if (that.getZoom() != zoom) {\r\n var \r\n offset = that.getOffset();\r\n \r\n that.setOffset(\r\n offset.x + ~~((centerX - offset.x) * (1 - zoom / that.getZoom())), \r\n offset.y + ~~((centerY - offset.y) * (1 - zoom / that.getZoom()))\r\n );\r\n \r\n that.setZoom(zoom);\r\n\r\n /*CPController.CPViewInfo viewInfo = new CPController.CPViewInfo();\r\n viewInfo.zoom = zoom;\r\n viewInfo.offsetX = offsetX;\r\n viewInfo.offsetY = offsetY;\r\n controller.callViewListeners(viewInfo); TODO */\r\n\r\n that.repaintAll();\r\n }\r\n }\r\n \r\n // More advanced zoom methods\r\n function zoomOnCenter(zoom) {\r\n var \r\n width = $(canvas).width(),\r\n height = $(canvas).height();\r\n \r\n zoomOnPoint(zoom, width / 2, height / 2);\r\n }\r\n\r\n this.zoomIn = function() {\r\n zoomOnCenter(this.getZoom() * 2);\r\n };\r\n\r\n this.zoomOut = function() {\r\n zoomOnCenter(this.getZoom() * 0.5);\r\n };\r\n\r\n this.zoom100 = function() {\r\n zoomOnCenter(1);\r\n centerCanvas();\r\n };\r\n\r\n this.resetRotation = function() {\r\n var\r\n center = {x: canvas.width / 2, y: canvas.height / 2},\r\n\r\n rotTrans = new CPTransform();\r\n \r\n rotTrans.rotateAroundPoint(-this.getRotation(), center.x, center.y);\r\n rotTrans.multiply(transform);\r\n\r\n this.setOffset(~~rotTrans.getTranslateX(), ~~rotTrans.getTranslateY());\r\n this.setRotation(0);\r\n that.emitEvent(\"canvasRotated90\", [0]);\r\n };\r\n \r\n /**\r\n * Get the current pen pressure, given a pointer event.\r\n * \r\n * @param {PointerEvent} e\r\n * \r\n * @return {Number}\r\n */\r\n function getPointerPressure(e) {\r\n // Use Wacom pressure in preference to pointer event pressure (if present)\r\n if (wacomPenDown) {\r\n return tablet.getPressure();\r\n }\r\n \r\n // Safari fails to set pressure = 0.5 for mouse button down like it is supposed to\r\n if (e.pointerType === \"mouse\" && e.buttons !== 0 && e.pressure === 0) {\r\n return 1;\r\n }\r\n \r\n if (e.pointerType === \"touch\") {\r\n /* Some devices like iOS set pressure = 0 for all touch events, so detect that absence of pressure\r\n * and override to use a pressure of 1.0.\r\n * \r\n * Android provides useful pressure based on the finger's contact area with the screen (Pixel 4A).\r\n */\r\n if (e.pressure !== 0) {\r\n sawTouchWithPressure = true;\r\n }\r\n\r\n if (sawTouchWithPressure) {\r\n return e.pressure * 2;\r\n }\r\n \r\n return 1.0;\r\n }\r\n \r\n /* In the Pointer Events API, mice have a default pressure of 0.5, but we want 1.0. Since we can't \r\n * reliably distinguish between mice and pens, we don't have any better options:\r\n */\r\n return e.pressure * 2;\r\n }\r\n\r\n let\r\n mouseWheelDebounce = false;\r\n\r\n function handleMouseWheel(e) {\r\n if (e.deltaY != 0) {\r\n if (!mouseWheelDebounce || Math.abs(e.deltaY) > 20) {\r\n let\r\n factor;\r\n\r\n if (e.deltaY > 0) {\r\n factor = 1 / 1.15;\r\n } else {\r\n factor = 1.15;\r\n }\r\n\r\n let\r\n canvasPoint = mouseCoordToCanvas({x: e.pageX, y: e.pageY}),\r\n docPoint = coordToDocument(canvasPoint);\r\n\r\n if (artwork.isPointWithin(docPoint.x, docPoint.y)) {\r\n zoomOnPoint(\r\n that.getZoom() * factor,\r\n canvasPoint.x,\r\n canvasPoint.y\r\n );\r\n } else {\r\n zoomOnPoint(\r\n that.getZoom() * factor,\r\n offsetX + ~~(artwork.width * zoom / 2),\r\n offsetY + ~~(artwork.height * zoom / 2)\r\n );\r\n }\r\n\r\n mouseWheelDebounce = mouseWheelDebounce || setTimeout(function() {\r\n mouseWheelDebounce = false;\r\n }, 50);\r\n }\r\n\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n let\r\n canvasClientRect;\r\n\r\n function handlePointerMove(e) {\r\n // Use the cached position of the canvas on the page if possible\r\n if (!canvasClientRect) {\r\n canvasClientRect = canvas.getBoundingClientRect();\r\n }\r\n \r\n if (sawPen && e.pointerType === \"touch\") {\r\n // Palm rejection for devices that support pens\r\n return;\r\n }\r\n\r\n /* Store these globally for the event handlers to refer to (we'd write to the event itself but some browsers\r\n * don't enjoy that)\r\n */\r\n mouseX = e.clientX - canvasClientRect.left;\r\n mouseY = e.clientY - canvasClientRect.top;\r\n\r\n const\r\n // Flags used by e.buttons:\r\n FLAG_PRIMARY = 1,\r\n FLAG_SECONDARY = 2,\r\n FLAG_WHEEL = 4,\r\n \r\n isDragging = e.buttons !== 0,\r\n pressure = isDragging ? getPointerPressure(e) : 0;\r\n \r\n\t\t// Did any of our buttons change state?\r\n if (((e.buttons & FLAG_PRIMARY) !== 0) != mouseDown[BUTTON_PRIMARY]) {\r\n if (e.mozPressure === 0.5) {\r\n /* We received a Mozilla \"click\" level of pressure (0.5) as a pointer-move\r\n * before we received the actual mouseDown event (which carries the correct pressure).\r\n *\r\n * Observed on Firefox 56 on macOS High Sierra\r\n */\r\n return; // Ignore!\r\n }\r\n\r\n mouseDown[BUTTON_PRIMARY] = !mouseDown[BUTTON_PRIMARY];\r\n\r\n if (mouseDown[BUTTON_PRIMARY]) {\r\n modeStack.mouseDown(e, BUTTON_PRIMARY, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_PRIMARY, pressure);\r\n }\r\n }\r\n\r\n if (((e.buttons & FLAG_SECONDARY) !== 0) != mouseDown[BUTTON_SECONDARY]) {\r\n mouseDown[BUTTON_SECONDARY] = !mouseDown[BUTTON_SECONDARY];\r\n\r\n if (mouseDown[BUTTON_SECONDARY]) {\r\n modeStack.mouseDown(e, BUTTON_SECONDARY, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_SECONDARY, pressure);\r\n }\r\n }\r\n\r\n if (((e.buttons & FLAG_WHEEL) !== 0) != mouseDown[BUTTON_WHEEL]) {\r\n mouseDown[BUTTON_WHEEL] = !mouseDown[BUTTON_WHEEL];\r\n\r\n if (mouseDown[BUTTON_WHEEL]) {\r\n modeStack.mouseDown(e, BUTTON_WHEEL, pressure);\r\n } else {\r\n modeStack.mouseUp(e, BUTTON_WHEEL, pressure);\r\n }\r\n }\r\n\r\n if (isDragging) {\r\n modeStack.mouseDrag(e, pressure);\r\n } else {\r\n modeStack.mouseMove(e, pressure);\r\n }\r\n \r\n if (!sawPen && e.pointerType === \"pen\") {\r\n sawPen = true;\r\n }\r\n }\r\n\r\n // Called when all mouse/pointer buttons are released\r\n function handlePointerUp(e) {\r\n mouseDown[BUTTON_PRIMARY] = false;\r\n mouseDown[BUTTON_SECONDARY] = false;\r\n mouseDown[BUTTON_WHEEL] = false;\r\n\r\n wacomPenDown = false;\r\n modeStack.mouseUp(e, e.button, 0.0);\r\n canvas.releasePointerCapture(e.pointerId);\r\n }\r\n\r\n // Called when the first button on the pointer is depressed / pen touches the surface\r\n function handlePointerDown(e) {\r\n if (sawPen && e.pointerType === \"touch\") {\r\n // Palm rejection for devices that support pens\r\n return;\r\n }\r\n\r\n canvas.setPointerCapture(e.pointerId);\r\n\r\n canvasClientRect = canvas.getBoundingClientRect();\r\n\r\n // Store these globally for the event handlers to refer to\r\n mouseX = e.clientX - canvasClientRect.left;\r\n mouseY = e.clientY - canvasClientRect.top;\r\n\r\n wacomPenDown = tablet.isPen();\r\n\r\n mouseDown[BUTTON_PRIMARY] = false;\r\n mouseDown[BUTTON_SECONDARY] = false;\r\n mouseDown[BUTTON_WHEEL] = false;\r\n\r\n mouseDown[e.button] = true;\r\n\r\n modeStack.mouseDown(e, e.button, getPointerPressure(e));\r\n }\r\n \r\n function handleKeyDown(e) {\r\n modeStack.keyDown(e);\r\n }\r\n \r\n function handleKeyUp(e) {\r\n modeStack.keyUp(e);\r\n }\r\n \r\n // Get the DOM element for the canvas area\r\n this.getElement = function() {\r\n return canvasContainer;\r\n };\r\n \r\n /**\r\n * Schedule a repaint for the current repaint region.\r\n */\r\n function repaint() {\r\n if (!scheduledRepaint) {\r\n scheduledRepaint = true;\r\n window.requestAnimationFrame(function() {\r\n that.paint();\r\n });\r\n }\r\n }\r\n \r\n /**\r\n * Schedule a repaint for the entire screen.\r\n */\r\n this.repaintAll = function() {\r\n repaintRegion.left = 0;\r\n repaintRegion.top = 0;\r\n repaintRegion.right = canvas.width;\r\n repaintRegion.bottom = canvas.height;\r\n \r\n repaint();\r\n };\r\n \r\n /**\r\n * Schedule a repaint for an area of the screen for later.\r\n * \r\n * @param rect CPRect Region that should be repainted using display coordinates\r\n */\r\n function repaintRect(rect) {\r\n repaintRegion.union(rect);\r\n \r\n repaint();\r\n }\r\n \r\n this.paint = function() {\r\n var\r\n drawingWasClipped = false;\r\n \r\n scheduledRepaint = false;\r\n \r\n /* Clip drawing to the area of the screen we want to repaint */\r\n if (!repaintRegion.isEmpty()) {\r\n canvasContext.save();\r\n \r\n if (canvasContext.clipTo) {\r\n canvasContext.beginPath();\r\n\r\n repaintRegion.left = repaintRegion.left | 0; \r\n repaintRegion.top = repaintRegion.top | 0;\r\n \r\n canvasContext.rect(\r\n repaintRegion.left,\r\n repaintRegion.top,\r\n Math.ceil(repaintRegion.getWidth()),\r\n Math.ceil(repaintRegion.getHeight())\r\n );\r\n\r\n canvasContext.clip();\r\n }\r\n \r\n drawingWasClipped = true;\r\n }\r\n \r\n /* Copy pixels that changed in the document into our local fused image cache */\r\n if (!artworkUpdateRegion.isEmpty()) {\r\n let\r\n imageData;\r\n\r\n if (maskView && maskView.isOpen()) {\r\n imageData = maskView.getImageData();\r\n } else {\r\n imageData = artwork.fusionLayers().getImageData();\r\n }\r\n\r\n artworkCanvasContext.putImageData(\r\n imageData, 0, 0, artworkUpdateRegion.left, artworkUpdateRegion.top, artworkUpdateRegion.getWidth(), artworkUpdateRegion.getHeight()\r\n );\r\n\r\n artworkUpdateRegion.makeEmpty();\r\n }\r\n\r\n canvasContext.fillStyle = '#606060';\r\n canvasContext.fillRect(0, 0, canvas.width, canvas.height);\r\n \r\n // Transform the coordinate system to bring the document into the right position on the screen (translate/zoom/etc)\r\n canvasContext.save();\r\n {\r\n canvasContext.setTransform(transform.m[0], transform.m[1], transform.m[2], transform.m[3], transform.m[4], transform.m[5]);\r\n \r\n canvasContext.fillStyle = checkerboardPattern;\r\n canvasContext.fillRect(0, 0, artwork.width, artwork.height);\r\n \r\n canvasContext.drawImage(\r\n artworkCanvas, 0, 0, artworkCanvas.width, artworkCanvas.height\r\n );\r\n }\r\n canvasContext.restore();\r\n \r\n // The rest of the drawing happens using the original screen coordinate system\r\n setContrastingDrawStyle(canvasContext, \"stroke\");\r\n\r\n canvasContext.lineWidth = 1.0;\r\n \r\n // Draw the artwork selection so long as we're not in the middle of selecting a new rectangle\r\n if (!artwork.getSelection().isEmpty() && !(modeStack.peek() instanceof CPRectSelectionMode && modeStack.peek().capture)) {\r\n canvasContext.setLineDash([3, 2]);\r\n \r\n plotSelectionRect(canvasContext, artwork.getSelection());\r\n \r\n canvasContext.setLineDash([]);\r\n }\r\n \r\n // Draw grid\r\n if (showGrid) {\r\n var\r\n bounds = artwork.getBounds(),\r\n \r\n gridVisualPitch = zoom * gridSize;\r\n \r\n /* If the grid is going to be miniscule on the screen (basically just covering/inverting the entire artwork,\r\n * do not paint it.\r\n */\r\n if (gridVisualPitch > 2) {\r\n canvasContext.beginPath();\r\n \r\n // Vertical lines\r\n for (let i = gridSize - 1; i < bounds.right; i += gridSize) {\r\n let\r\n p1 = coordToDisplay({x: i, y: bounds.top}),\r\n p2 = coordToDisplay({x: i, y: bounds.bottom});\r\n \r\n canvasContext.moveTo(p1.x + 0.5, p1.y + 0.5);\r\n canvasContext.lineTo(p2.x + 0.5, p2.y + 0.5);\r\n }\r\n \r\n // Horizontal lines\r\n for (let i = gridSize - 1; i < bounds.bottom; i += gridSize) {\r\n let\r\n p1 = coordToDisplay({x: 0, y: i}),\r\n p2 = coordToDisplay({x: bounds.right, y: i});\r\n \r\n canvasContext.moveTo(p1.x + 0.5, p1.y + 0.5);\r\n canvasContext.lineTo(p2.x + 0.5, p2.y + 0.5);\r\n }\r\n \r\n canvasContext.stroke();\r\n }\r\n }\r\n \r\n // Additional drawing by the current mode\r\n modeStack.paint(canvasContext);\r\n \r\n canvasContext.globalCompositeOperation = 'source-over';\r\n \r\n if (drawingWasClipped) {\r\n repaintRegion.makeEmpty();\r\n \r\n canvasContext.restore();\r\n }\r\n };\r\n \r\n this.showGrid = function(show) {\r\n showGrid = show;\r\n this.repaintAll();\r\n };\r\n\r\n /**\r\n * Resize the canvas area to the given height (in pixels)\r\n *\r\n * @param {int} height New canvas area height in CSS pixels\r\n * @param {boolean} skipCenter True if the canvas should not be re-centered\r\n */\r\n this.resize = function(height, skipCenter) {\r\n // Leave room for the bottom scrollbar\r\n height -= $(canvasContainerBottom).outerHeight();\r\n\r\n $(canvas).css('height', height + \"px\");\r\n\r\n canvas.width = $(canvas).width();\r\n canvas.height = height;\r\n\r\n canvasClientRect = null;\r\n\r\n if (!skipCenter) {\r\n centerCanvas();\r\n }\r\n\r\n // Interpolation property gets reset when canvas resizes\r\n this.setInterpolation(interpolation);\r\n\r\n this.repaintAll();\r\n };\r\n\r\n controller.on(\"toolChange\", function(tool, toolInfo) {\r\n var\r\n newMode = drawingModes[toolInfo.strokeMode];\r\n\r\n // If we currently have any drawing modes active, switch them to the drawing mode of the new tool\r\n for (var i = 0; i < modeStack.modes.length; i++) {\r\n if (modeStack.modes[i] instanceof CPDrawingMode) {\r\n modeStack.modes[i].leave();\r\n modeStack.modes[i] = newMode;\r\n modeStack.modes[i].enter();\r\n\r\n break;\r\n }\r\n }\r\n\r\n curDrawMode = newMode;\r\n });\r\n \r\n controller.on(\"modeChange\", function(mode) {\r\n var\r\n newMode;\r\n\r\n switch (mode) {\r\n case ChickenPaint.M_DRAW:\r\n newMode = curDrawMode;\r\n break;\r\n \r\n case ChickenPaint.M_FLOODFILL:\r\n newMode = floodFillMode;\r\n break;\r\n\r\n case ChickenPaint.M_GRADIENTFILL:\r\n newMode = gradientFillMode;\r\n break;\r\n\r\n case ChickenPaint.M_RECT_SELECTION:\r\n newMode = rectSelectionMode;\r\n break;\r\n \r\n case ChickenPaint.M_MOVE_TOOL:\r\n newMode = moveToolMode;\r\n break;\r\n \r\n case ChickenPaint.M_ROTATE_CANVAS:\r\n newMode = rotateCanvasMode;\r\n break;\r\n\r\n case ChickenPaint.M_PAN_CANVAS:\r\n newMode = panMode;\r\n break;\r\n\r\n case ChickenPaint.M_COLOR_PICKER:\r\n newMode = colorPickerMode;\r\n break;\r\n\r\n case ChickenPaint.M_TRANSFORM:\r\n newMode = transformMode;\r\n break;\r\n }\r\n\r\n modeStack.setUserMode(newMode);\r\n });\r\n\r\n function onMaskViewChangeLayer() {\r\n artworkUpdateRegion = artwork.getBounds();\r\n that.repaintAll();\r\n }\r\n\r\n controller.on(\"maskViewOpened\", function(newMaskView) {\r\n if (maskView) {\r\n maskView.off(\"changeLayer\", onMaskViewChangeLayer);\r\n }\r\n\r\n maskView = newMaskView;\r\n\r\n maskView.on(\"changeLayer\", onMaskViewChangeLayer);\r\n\r\n onMaskViewChangeLayer();\r\n });\r\n \r\n //\r\n // Modes system: modes control the way the GUI is reacting to the user input\r\n // All the tools are implemented through modes\r\n //\r\n \r\n defaultMode = new CPDefaultMode();\r\n colorPickerMode = new CPColorPickerMode();\r\n panMode = new CPPanCanvasMode();\r\n rotateCanvasMode = new CPRotateCanvasMode();\r\n floodFillMode = new CPFloodFillMode();\r\n gradientFillMode = new CPGradientFillMode();\r\n rectSelectionMode = new CPRectSelectionMode();\r\n moveToolMode = new CPMoveToolMode();\r\n transformMode = new CPTransformMode();\r\n\r\n // this must correspond to the stroke modes defined in CPToolInfo\r\n drawingModes = [new CPFreehandMode(), new CPLineMode(), new CPBezierMode()];\r\n\r\n curDrawMode = drawingModes[CPBrushInfo.STROKE_MODE_FREEHAND];\r\n\r\n // The default mode will handle the events that no other modes are interested in\r\n modeStack.setDefaultMode(defaultMode);\r\n modeStack.setUserMode(curDrawMode);\r\n\r\n artworkCanvas.width = artwork.width;\r\n artworkCanvas.height = artwork.height;\r\n \r\n canvas.width = 800;\r\n canvas.height = 900;\r\n canvas.className = \"chickenpaint-canvas\";\r\n canvas.setAttribute(\"touch-action\", \"none\");\r\n \r\n if (!canvasContext.setLineDash) { \r\n canvasContext.setLineDash = function () {}; // For IE 10 and older\r\n }\r\n \r\n canvas.addEventListener(\"contextmenu\", function(e) {\r\n e.preventDefault();\r\n });\r\n \r\n canvas.addEventListener(\"mouseenter\", function() {\r\n mouseIn = true;\r\n });\r\n \r\n canvas.addEventListener(\"mouseleave\", function() {\r\n mouseIn = false;\r\n \r\n if (!mouseDown[BUTTON_PRIMARY] && !mouseDown[BUTTON_SECONDARY] && !mouseDown[BUTTON_WHEEL]) {\r\n that.repaintAll();\r\n }\r\n });\r\n \r\n canvas.addEventListener(\"pointerdown\", handlePointerDown);\r\n canvas.addEventListener(\"pointermove\", handlePointerMove);\r\n canvas.addEventListener(\"pointerup\", handlePointerUp);\r\n canvas.addEventListener(\"wheel\", handleMouseWheel);\r\n \r\n document.addEventListener(\"keydown\", handleKeyDown);\r\n document.addEventListener(\"keyup\", handleKeyUp);\r\n\r\n /* Workaround for Chrome Mac bug that causes canvas to be disposed and never recreated when tab is switched into the \r\n * background https://bugs.chromium.org/p/chromium/issues/detail?id=588434\r\n */\r\n document.addEventListener(\"visibilitychange\", function() {\r\n var\r\n oldHeight = canvas.height + $(canvasContainerBottom).outerHeight();\r\n\r\n canvas.width = 1;\r\n canvas.height = 1;\r\n\r\n that.resize(oldHeight, true);\r\n }, false);\r\n \r\n window.addEventListener(\"scroll\", function() {\r\n canvasClientRect = null;\r\n });\r\n \r\n canvas.addEventListener(\"mousedown\", function(e) {\r\n if (e.button == BUTTON_WHEEL) {\r\n // Prevent middle-mouse scrolling in Firefox\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n artwork.on(\"changeSelection\", function() {\r\n // We could keep track of our last-painted selection rect and only invalidate that here\r\n that.repaintAll();\r\n });\r\n \r\n artwork.on(\"updateRegion\", function(region) {\r\n artworkUpdateRegion.union(region);\r\n \r\n repaintRect(getRefreshArea(artworkUpdateRegion));\r\n });\r\n \r\n horzScroll.on(\"valueChanged\", function(value) {\r\n var \r\n p = that.getOffset();\r\n \r\n that.setOffset(-value, p.y);\r\n });\r\n \r\n vertScroll.on(\"valueChanged\", function(value) {\r\n var \r\n p = that.getOffset();\r\n \r\n that.setOffset(p.x, -value);\r\n });\r\n \r\n this.setInterpolation(false);\r\n\r\n var\r\n canvasSpacingWrapper = document.createElement(\"div\");\r\n \r\n canvasSpacingWrapper.className = 'chickenpaint-canvas-container-wrapper';\r\n canvasSpacingWrapper.appendChild(canvas);\r\n \r\n canvasContainerTop.className = 'chickenpaint-canvas-container-top';\r\n canvasContainerTop.appendChild(canvasSpacingWrapper);\r\n canvasContainerTop.appendChild(vertScroll.getElement());\r\n \r\n canvasContainerBottom.className = 'chickenpaint-canvas-container-bottom';\r\n canvasContainerBottom.appendChild(horzScroll.getElement());\r\n \r\n canvasContainer.appendChild(canvasContainerTop);\r\n canvasContainer.appendChild(canvasContainerBottom);\r\n \r\n controller.setCanvas(this);\r\n}\r\n\r\nCPCanvas.prototype = Object.create(EventEmitter.prototype);\r\nCPCanvas.prototype.constructor = CPCanvas;\r\n",
"/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport EventEmitter from \"wolfy87-eventemitter\";\r\n\r\nexport default function CPCheckbox(state, title) {\r\n var\r\n canvas = document.createElement('canvas'),\r\n canvasContext = canvas.getContext('2d'),\r\n \r\n that = this;\r\n \r\n this.state = state || false;\r\n \r\n function paint() {\r\n var \r\n width = canvas.width,\r\n height = canvas.height;\r\n\r\n canvasContext.clearRect(0, 0, width, height);\r\n \r\n canvasContext.beginPath();\r\n canvasContext.arc(width / 2 + 1, width / 2 + 1, Math.max(width / 2, 1) - 2, 0, Math.PI * 2);\r\n \r\n if (that.state) {\r\n canvasContext.fill();\r\n } else {\r\n canvasContext.stroke();\r\n }\r\n }\r\n\r\n this.setValue = function(b) {\r\n if (this.state != b) {\r\n this.state = b;\r\n \r\n this.emitEvent('valueChange', [b]);\r\n \r\n paint();\r\n }\r\n };\r\n \r\n this.getElement = function() {\r\n return canvas;\r\n };\r\n \r\n canvas.addEventListener(\"mousedown\", function(e) {\r\n that.setValue(!that.state);\r\n });\r\n \r\n canvas.title = title || \"\";\r\n canvas.className = 'chickenpaint-checkbox';\r\n \r\n canvas.width = 20;\r\n canvas.height = 20;\r\n \r\n canvas.fillStyle = 'black';\r\n canvas.strokeStyle = 'black';\r\n \r\n paint();\r\n};\r\n\r\nCPCheckbox.prototype = Object.create(EventEmitter.prototype);\r\nCPCheckbox.prototype.constructor = CPCheckbox;",
"/*\r\n ChickenPaint\r\n \r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n \r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport CPPalette from './CPPalette.js';\r\nimport CPColorSelect from './CPColorSelect.js';\r\nimport CPColorSlider from './CPColorSlider.js';\r\nimport CPColor from \"../util/CPColor.js\";\r\nimport {_} from \"../languages/lang\";\r\n\r\nexport default function CPColorPalette(cpController) {\r\n CPPalette.call(this, cpController, \"color\", \"Color (picker)\");\r\n \r\n let\r\n colorSelect = new CPColorSelect(cpController),\r\n colorSlider = new CPColorSlider(cpController, colorSelect),\r\n colorShow = new CPColorShow(cpController),\r\n \r\n body = this.getBodyElement(),\r\n topSection = document.createElement(\"div\");\r\n \r\n topSection.className = 'chickenpaint-colorpicker-top';\r\n \r\n topSection.appendChild(colorSelect.getElement());\r\n topSection.appendChild(colorSlider.getElement());\r\n \r\n body.appendChild(topSection);\r\n body.appendChild(colorShow.getElement());\r\n}\r\n\r\nfunction CPColorShow(controller) {\r\n let\r\n color = 0,\r\n \r\n element = document.createElement(\"div\");\r\n\r\n function padLeft(string, padding, len) {\r\n while (string.length < len) {\r\n string = padding + string;\r\n }\r\n return string;\r\n }\r\n \r\n function paint() {\r\n element.style.backgroundColor = '#' + padLeft(Number(color).toString(16), \"0\", 6);\r\n }\r\n \r\n function mouseClick(e) {\r\n e.preventDefault();\r\n \r\n let\r\n colHex = \"#\" + padLeft(Number(color).toString(16), \"0\", 6);\r\n\r\n colHex = window.prompt(_(\"Please enter a color in hex format\"), colHex);\r\n \r\n if (colHex != null) {\r\n try {\r\n if (colHex.match(/^#/) || colHex.match(/^$/)) {\r\n colHex = colHex.substring(1);\r\n }\r\n\r\n let\r\n newColor = parseInt(colHex, 16);\r\n\r\n controller.setCurColor(new CPColor(newColor));\r\n } catch (e) {\r\n }\r\n }\r\n }\r\n \r\n this.getElement = function() {\r\n return element;\r\n };\r\n \r\n controller.on(\"colorChange\", function(_color) {\r\n color = _color.getRgb();\r\n paint();\r\n });\r\n \r\n element.className = 'chickenpaint-colorpicker-show';\r\n \r\n element.addEventListener(\"click\", mouseClick);\r\n\r\n paint();\r\n}\r\n\r\nCPColorPalette.prototype = Object.create(CPPalette.prototype);\r\nCPColorPalette.prototype.constructor = CPColorPalette;\r\n",
"/*\r\n ChickenPaint\r\n\r\n ChickenPaint is a translation of ChibiPaint from Java to JavaScript\r\n by Nicholas Sherlock / Chicken Smoothie.\r\n\r\n ChibiPaint is Copyright (c) 2006-2008 Marc Schefer\r\n\r\n ChickenPaint is free software: you can redistribute it and/or modify\r\n it under the terms of the GNU General Public License as published by\r\n the Free Software Foundation, either version 3 of the License, or\r\n (at your option) any later version.\r\n\r\n ChickenPaint is distributed in the hope that it will be useful,\r\n but WITHOUT ANY WARRANTY; without even the implied warranty of\r\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\r\n GNU General Public License for more details.\r\n\r\n You should have received a copy of the GNU General Public License\r\n along with ChickenPaint. If not, see
.\r\n*/\r\n\r\nimport $ from \"jquery\";\r\n\r\nimport CPColor from \"../util/CPColor.js\";\r\nimport CPColorBmp from \"../engine/CPColorBmp.js\";\r\nimport {setContrastingDrawStyle} from \"./CPGUIUtils.js\";\r\n\r\nconst\r\n CONTROL_WIDTH = 128,\r\n CONTROL_HEIGHT = 128,\r\n\r\n PIXEL_SCALE = (window.devicePixelRatio || 1),\r\n\r\n CANVAS_WIDTH = Math.round(CONTROL_WIDTH * PIXEL_SCALE),\r\n CANVAS_HEIGHT = Math.round(CONTROL_HEIGHT * PIXEL_SCALE);\r\n\r\n/**\r\n *\r\n * @param controller\r\n * @param {CPColor} initialColor\r\n * @constructor\r\n */\r\nexport default class CPColorSelect {\r\n\r\n _controller;\r\n\r\n _canvas;\r\n _canvasContext;\r\n _imageData;\r\n\r\n _bitmapInvalid = true;\r\n _capturedMouse = false;\r\n _greyscale = false;\r\n\r\n color = new CPColor(0);\r\n\r\n constructor(controller, initialColor) {\r\n this._controller = controller;\r\n\r\n let\r\n canvas = document.createElement(\"canvas\");\r\n\r\n this._canvas = canvas;\r\n\r\n canvas.className = 'chickenpaint-colorpicker-select';\r\n canvas.setAttribute(\"touch-action\", \"none\");\r\n\r\n canvas.width = CANVAS_WIDTH;\r\n canvas.height = CANVAS_HEIGHT;\r\n\r\n canvas.style.width = CONTROL_WIDTH + \"px\";\r\n canvas.style.height = CONTROL_HEIGHT + \"px\";\r\n\r\n this._canvasContext = canvas.getContext(\"2d\");\r\n this._imageData = this._canvasContext.createImageData(CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\r\n // Workaround for Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=1350157:\r\n this._canvasContext.getImageData(0, 0, 1, 1);\r\n\r\n this._handleEndDrag = this._endDrag.bind(this);\r\n this._handleMousePickColor = this._mousePickColor.bind(this);\r\n\r\n canvas.addEventListener(\"pointerdown\", e => this._startDrag(e));\r\n\r\n if (initialColor) {\r\n this.color.copyFrom(initialColor);\r\n }\r\n\r\n controller.on(\"colorChange\", c => {\r\n this.color.copyFrom(c);\r\n\r\n this._bitmapInvalid = true;\r\n this.paint();\r\n });\r\n\r\n controller.on(\"colorModeChange\", newMode => {\r\n this._greyscale = (newMode == \"greyscale\");\r\n\r\n this._bitmapInvalid = true;\r\n this.paint();\r\n });\r\n\r\n this.paint();\r\n }\r\n\r\n _makeBitmap() {\r\n if (!this._bitmapInvalid) {\r\n return;\r\n }\r\n\r\n let\r\n pixIndex = 0,\r\n data = this._imageData.data;\r\n\r\n if (this._greyscale) {\r\n for (let y = 0; y < CANVAS_HEIGHT; y++) {\r\n let\r\n col = 255 - Math.round(y / (CANVAS_HEIGHT - 1) * 255);\r\n\r\n for (let x = 0; x < CANVAS_WIDTH; x++) {\r\n data[pixIndex + CPColorBmp.RED_BYTE_OFFSET] = col;\r\n data[pixIndex + CPColorBmp.GREEN_BYTE_OFFSET] = col;\r\n data[pixIndex + CPColorBmp.BLUE_BYTE_OFFSET] = col;\r\n data[pixIndex + CPColorBmp.ALPHA_BYTE_OFFSET] = 0xFF;\r\n\r\n pixIndex += CPColorBmp.BYTES_PER_PIXEL;\r\n }\r\n }\r\n } else {\r\n let\r\n col = this.color.clone();\r\n\r\n for (let y = 0; y < CANVAS_HEIGHT; y++) {\r\n col.setValue(255 - ~~(y / (CANVAS_HEIGHT - 1) * 255));\r\n\r\n for (let x = 0; x < CANVAS_WIDTH; x++) {\r\n col.setSaturation(Math.round(x / (CANVAS_WIDTH - 1) * 255));\r\n\r\n data[pixIndex + CPColorBmp.RED_BYTE_OFFSET] = (col.rgb >> 16) & 0xFF;\r\n data[pixIndex + CPColorBmp.GREEN_BYTE_OFFSET] = (col.rgb >> 8) & 0xFF;\r\n data[pixIndex + CPColorBmp.BLUE_BYTE_OFFSET] = col.rgb & 0xFF;\r\n data[pixIndex + CPColorBmp.ALPHA_BYTE_OFFSET] = 0xFF;\r\n\r\n pixIndex += CPColorBmp.BYTES_PER_PIXEL;\r\n }\r\n }\r\n }\r\n\r\n this._bitmapInvalid = false;\r\n }\r\n\r\n paint() {\r\n this._makeBitmap();\r\n\r\n this._canvasContext.putImageData(this._imageData, 0, 0);\r\n\r\n let\r\n cursorX = this.color.getSaturation() / 255 * (CANVAS_WIDTH - 1),\r\n cursorY = (255 - this.color.getValue()) / 255 * (CANVAS_HEIGHT - 1);\r\n\r\n setContrastingDrawStyle(this._canvasContext, \"stroke\");\r\n\r\n this._canvasContext.lineWidth = 1.5 * PIXEL_SCALE;\r\n\r\n this._canvasContext.beginPath();\r\n\r\n if (this._greyscale) {\r\n this._canvasContext.moveTo(0, cursorY);\r\n this._canvasContext.lineTo(CANVAS_WIDTH, cursorY);\r\n } else {\r\n this._canvasContext.arc(cursorX, cursorY, 5 * PIXEL_SCALE, 0, Math.PI * 2);\r\n }\r\n\r\n this._canvasContext.stroke();\r\n\r\n this._canvasContext.globalCompositeOperation = 'source-over';\r\n }\r\n\r\n _mousePickColor(e) {\r\n let\r\n x = e.pageX - $(this._canvas).offset().left,\r\n y = e.pageY - $(this._canvas).offset().top,\r\n\r\n value = Math.max(Math.min(255 - ~~(y * 255 / (CONTROL_HEIGHT - 1)), 255), 0);\r\n\r\n if (this._greyscale) {\r\n this.color.setGreyscale(value);\r\n } else {\r\n let\r\n sat = Math.max(Math.min(~~(x * 255 / (CONTROL_WIDTH - 1)), 255), 0);\r\n\r\n this.color.setHsv(this.color.getHue(), sat, value);\r\n }\r\n\r\n this.paint();\r\n this._controller.setCurColor(this.color);\r\n }\r\n\r\n _endDrag(e) {\r\n this._canvas.releasePointerCapture(e.pointerId);\r\n this._capturedMouse = false;\r\n this._canvas.removeEventListener(\"pointerup\", this._handleEndDrag);\r\n this._canvas.removeEventListener(\"pointermove\", this._handleMousePickColor);\r\n }\r\n\r\n _startDrag(e) {\r\n if (!this._capturedMouse) {\r\n this._capturedMouse = true;\r\n this._canvas.setPointerCapture(e.pointerId);\r\n this._canvas.addEventListener(\"pointerup\", this._handleEndDrag);\r\n this._canvas.addEventListener(\"pointermove\", this._handleMousePickColor);\r\n }\r\n\r\n this._handleMousePickColor(e);\r\n }\r\n\r\n setHue(hue) {\r\n if (this.color.getHue() != hue) {\r\n this.color.setHue(hue);\r\n this._controller.setCurColor(this.color);\r\n }\r\n }\r\n\r\n getElement() {\r\n return this._canvas;\r\n }\r\n}",
diff --git a/potiboard5/chickenpaint/js/chickenpaint.min.js b/potiboard5/chickenpaint/js/chickenpaint.min.js
index 904b1e3c..4aed4cee 100644
--- a/potiboard5/chickenpaint/js/chickenpaint.min.js
+++ b/potiboard5/chickenpaint/js/chickenpaint.min.js
@@ -570,7 +570,7 @@ this.oldPreviewRect=null);ua(fa)}};ha.prototype.eraseBrushPreview=function(){thi
ha.prototype.paint=function(){if(this.shouldPaintBrushPreview){this.shouldPaintBrushPreview=!1;var fa=this.getBrushPreviewOval();J.beginPath();J.arc((fa.left+fa.right)/2,(fa.top+fa.bottom)/2,fa.getWidth()/2,0,2*Math.PI);J.stroke();fa.grow(2,2);null==this.oldPreviewRect?this.oldPreviewRect=fa:this.oldPreviewRect.union(fa)}};ca.prototype=Object.create(ha.prototype);ca.prototype.constructor=ca;ca.prototype.mouseDown=function(fa,Ka,Ra){if(!this.capture&&0==Ka&&!fa.altKey&&!e.default.isPressed("space")&&
S()&&(fa=Ha({x:Sa,y:ob}),this.eraseBrushPreview(),Ua.beginStroke(fa.x,fa.y,Ra)))return this.capture=!0,this.smoothMouse=fa,!0};ca.prototype.mouseDrag=function(fa,Ka){if(this.capture){fa=Ha({x:Sa,y:ob});var Ra=Math.min(.999,Math.pow(I.getBrushInfo().smoothing,.3));this.smoothMouse.x=(1-Ra)*fa.x+Ra*this.smoothMouse.x;this.smoothMouse.y=(1-Ra)*fa.y+Ra*this.smoothMouse.y;Ua.continueStroke(this.smoothMouse.x,this.smoothMouse.y,Ka);return!0}this.mouseMove(fa)};ca.prototype.mouseUp=function(fa,Ka,Ra){if(this.capture)return 0==
Ka&&(this.capture=!1,Ua.endStroke()),!0};sa.prototype=Object.create(ha.prototype);sa.prototype.constructor=sa;sa.prototype.drawLine=function(fa,Ka){Ua.beginStroke(fa.x,fa.y,1);Ua.continueStroke(Ka.x,Ka.y,1);Ua.endStroke()};na.prototype=Object.create(ha.prototype);na.prototype.constructor=na;Q.prototype=Object.create(M.prototype);Q.prototype.constructor=Q;oa.prototype=Object.create(M.prototype);oa.prototype.constructor=oa;ia.prototype=Object.create(M.prototype);ia.prototype.constructor=ia;ia.prototype.mouseDown=
-function(fa,Ka,Ra){if(0==Ka&&!fa.altKey&&!e.default.isPressed("space")&&S())return fa=Ha({x:Sa,y:ob}),Ua.isPointWithin(fa.x,fa.y)&&(Ua.floodFill(fa.x,fa.y),Fa.repaintAll()),!0};ya.prototype=Object.create(M.prototype);ya.prototype.constructor=ya;ta.prototype=Object.create(M.prototype);ta.prototype.constructor=ta;ta.prototype.mouseMove=function(fa){if(!e.default.isPressed("space")&&!fa.altKey)return $a("move"),!0};ta.prototype.enter=function(){$a("move")};Ga.prototype=Object.create(M.prototype);Ga.prototype.constructor=
+function(fa,Ka,Ra){if(0==Ka&&!fa.altKey&&!e.default.isPressed("space")&&S())return fa=Ha({x:Sa,y:ob}),Ua.isPointWithin(fa.x,fa.y)&&(Ua.floodFill(fa.x,fa.y),Fa.repaintAll()),!0};ya.prototype=Object.create(M.prototype);ya.prototype.constructor=ya;ta.prototype=Object.create(M.prototype);ta.prototype.constructor=ta;ta.prototype.mouseMove=function(fa){if(!e.default.isPressed("r"))return $a("move"),!0};ta.prototype.enter=function(){$a("move")};Ga.prototype=Object.create(M.prototype);Ga.prototype.constructor=
Ga;qa.prototype=Object.create(M.prototype);qa.prototype.constructor=qa;Pa.prototype=Object.create(sa.prototype);Pa.prototype.constructor=Pa;Pa.prototype.drawLine=function(fa,Ka){Ua.gradientFill(Math.round(fa.x),Math.round(fa.y),Math.round(Ka.x),Math.round(Ka.y),I.getCurGradient())};Pa.prototype.queueBrushPreview=function(){};this.setZoom=function(fa){Db=fa;xa()};this.getZoom=function(){return Db};this.setGridSize=function(fa){Ib=Math.max(Math.round(fa),1);this.repaintAll()};this.getGridSize=function(){return Ib};
this.setOffset=function(fa,Ka){isNaN(fa)||isNaN(Ka)?console.log("Bad offset"):(O=fa,Hb=Ka,xa())};this.getOffset=function(){return{x:O,y:Hb}};this.setInterpolation=function(fa){rc=fa;(0,d.setCanvasInterpolation)(J,fa);this.repaintAll()};this.setRotation=function(fa){bc=fa%(2*Math.PI);xa()};this.getRotation=function(){return bc};this.getRotation90=function(){var fa=Math.round(this.getRotation()/Math.PI*2);fa%=4;0>fa&&(fa+=4);return fa};this.zoomIn=function(){ba(2*this.getZoom())};this.zoomOut=function(){ba(.5*
this.getZoom())};this.zoom100=function(){ba(1);ab()};this.resetRotation=function(){var fa=D.width/2,Ka=D.height/2,Ra=new a.default;Ra.rotateAroundPoint(-this.getRotation(),fa,Ka);Ra.multiply(Lb);this.setOffset(~~Ra.getTranslateX(),~~Ra.getTranslateY());this.setRotation(0);Fa.emitEvent("canvasRotated90",[0])};var Nb=!1,dc;this.getElement=function(){return ma};this.repaintAll=function(){xb.left=0;xb.top=0;xb.right=D.width;xb.bottom=D.height;aa()};this.paint=function(){var fa=!1;jc=!1;xb.isEmpty()||
@@ -908,52 +908,52 @@ this._hideModal()}};Z.dispose=function(){[window,this._element,this._dialog].for
D,oa);return D};Z._triggerBackdropTransition=function(){var D=this,J=b["default"].Event("hidePrevented.bs.modal");b["default"](this._element).trigger(J);if(!J.isDefaultPrevented()){var Y=this._element.scrollHeight>document.documentElement.clientHeight;Y||(this._element.style.overflowY="hidden");this._element.classList.add("modal-static");var za=g.getTransitionDurationFromElement(this._dialog);b["default"](this._element).off(g.TRANSITION_END);b["default"](this._element).one(g.TRANSITION_END,function(){D._element.classList.remove("modal-static");
Y||b["default"](D._element).one(g.TRANSITION_END,function(){D._element.style.overflowY=""}).emulateTransitionEnd(D._element,za)}).emulateTransitionEnd(za);this._element.focus()}};Z._showElement=function(D){var J=this,Y=b["default"](this._element).hasClass("fade"),za=this._dialog?this._dialog.querySelector(".modal-body"):null;this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE||document.body.appendChild(this._element);this._element.style.display="block";this._element.removeAttribute("aria-hidden");
this._element.setAttribute("aria-modal",!0);this._element.setAttribute("role","dialog");b["default"](this._dialog).hasClass("modal-dialog-scrollable")&&za?za.scrollTop=0:this._element.scrollTop=0;Y&&g.reflow(this._element);b["default"](this._element).addClass("show");this._config.focus&&this._enforceFocus();var Qa=b["default"].Event("shown.bs.modal",{relatedTarget:D});D=function(){J._config.focus&&J._element.focus();J._isTransitioning=!1;b["default"](J._element).trigger(Qa)};Y?(Y=g.getTransitionDurationFromElement(this._dialog),
-b["default"](this._dialog).one(g.TRANSITION_END,D).emulateTransitionEnd(Y)):D()};Z._enforceFocus=function(){var D=this;b["default"](document).off("focusin.bs.modal").on("focusin.bs.modal",function(J){document!==J.target&&D._element!==J.target&&0===b["default"](D._element).has(J.target).length&&D._element.focus()})};Z._setEscapeEvent=function(){var D=this;if(this._isShown)b["default"](this._element).on("keydown.dismiss.bs.modal",function(J){D._config.keyboard&&27===J.key?(J.preventDefault(),D.hide()):
-D._config.keyboard||27!==J.key||D._triggerBackdropTransition()});else this._isShown||b["default"](this._element).off("keydown.dismiss.bs.modal")};Z._setResizeEvent=function(){var D=this;if(this._isShown)b["default"](window).on("resize.bs.modal",function(J){return D.handleUpdate(J)});else b["default"](window).off("resize.bs.modal")};Z._hideModal=function(){var D=this;this._element.style.display="none";this._element.setAttribute("aria-hidden",!0);this._element.removeAttribute("aria-modal");this._element.removeAttribute("role");
-this._isTransitioning=!1;this._showBackdrop(function(){b["default"](document.body).removeClass("modal-open");D._resetAdjustments();D._resetScrollbar();b["default"](D._element).trigger("hidden.bs.modal")})};Z._removeBackdrop=function(){this._backdrop&&(b["default"](this._backdrop).remove(),this._backdrop=null)};Z._showBackdrop=function(D){var J=this,Y=b["default"](this._element).hasClass("fade")?"fade":"";if(this._isShown&&this._config.backdrop)this._backdrop=document.createElement("div"),this._backdrop.className=
-"modal-backdrop",Y&&this._backdrop.classList.add(Y),b["default"](this._backdrop).appendTo(document.body),b["default"](this._element).on("click.dismiss.bs.modal",function(Qa){J._ignoreBackdropClick?J._ignoreBackdropClick=!1:Qa.target===Qa.currentTarget&&("static"===J._config.backdrop?J._triggerBackdropTransition():J.hide())}),Y&&g.reflow(this._backdrop),b["default"](this._backdrop).addClass("show"),D&&(Y?(Y=g.getTransitionDurationFromElement(this._backdrop),b["default"](this._backdrop).one(g.TRANSITION_END,
-D).emulateTransitionEnd(Y)):D());else if(!this._isShown&&this._backdrop)if(b["default"](this._backdrop).removeClass("show"),Y=function(){J._removeBackdrop();D&&D()},b["default"](this._element).hasClass("fade")){var za=g.getTransitionDurationFromElement(this._backdrop);b["default"](this._backdrop).one(g.TRANSITION_END,Y).emulateTransitionEnd(za)}else Y();else D&&D()};Z._adjustDialog=function(){var D=this._element.scrollHeight>document.documentElement.clientHeight;!this._isBodyOverflowing&&D&&(this._element.style.paddingLeft=
-this._scrollbarWidth+"px");this._isBodyOverflowing&&!D&&(this._element.style.paddingRight=this._scrollbarWidth+"px")};Z._resetAdjustments=function(){this._element.style.paddingLeft="";this._element.style.paddingRight=""};Z._checkScrollbar=function(){var D=document.body.getBoundingClientRect();this._isBodyOverflowing=Math.round(D.left+D.right)