draw-freehand.umd.js.map

{"version":3,"file":"draw-freehand.umd.js","sources":["../src/Freehand.js"],"sourcesContent":["\nexport default class Freehand {\n\n  #canvas = null\n\n  #isDrawing = false\n\n  #penSize = null\n\n  #penColor = null\n\n  #penType = null\n\n  #penOpacity = null\n\n  #penFlow = null\n\n  #penHardness = null\n\n  #backgroundColor = null\n\n  #imageFormat = null\n\n  #snapShot = null\n\n  // self uses variables\n  #prevMouseX = null\n  #prevMouseY = null\n\n  #ctx = null\n\n  toolType = null\n\n  ratio = null\n\n  #imageFormats = {\n    'image/png': 'png',\n    'image/jpeg': 'jpg'\n  }\n\n  #pathArr = []\n\n  #countIndex\n\n  constructor(canvas, options = {}) {\n    try {\n\n      if (typeof canvas === 'string') {\n        this.#canvas = this.#select(canvas)\n      } else {\n        this.#canvas = canvas\n      }\n\n    } catch (error) {\n      console.error('Please provide canvas selector or canvas element')\n    }\n    this.#canvas.style.cursor = \"url('./img/pen.ico'), crosshair\"\n\n    this.#setDefaults(options)\n\n    this.init()\n  }\n\n  #setDefaults(options) {\n    this.#penSize = options?.penSize || 3\n    this.#penColor = options?.penColor || '#000000'\n    this.#penType = options?.penType || 'round'\n    this.#penOpacity = options?.penOpacity || 1\n    this.#penFlow = options?.penFlow || 1\n    this.#penHardness = options?.penHardness || 1\n    this.#backgroundColor = options?.backgroundColor || '#ffffff'\n    this.toolType = options?.toolType || 'brush' // brush, eraser\n    this.#imageFormat = options?.imageFormat || 'image/png'\n  }\n\n  init() {\n    this.#prevMouseX = 0\n    this.#prevMouseY = 0\n    this.#countIndex = -1\n    this.#isDrawing = false\n\n    // call resizeCanvas() on window resize\n    window.addEventListener('resize', this.resizeCanvas.bind(this))\n    window.addEventListener('load', this.resizeCanvas.bind(this))\n\n    this.#ctx = this.#canvas.getContext('2d', { willReadFrequently: true })\n    this.#ctx.scale(this.ratio, this.ratio)\n\n    this.#setCanvasBackground()\n\n    this.#ctx.fillStyle = this.#penColor\n\n\n    this.#canvas.addEventListener('mousedown', this.#startDrawing.bind(this))\n    this.#canvas.addEventListener('touchstart', this.#startDrawing.bind(this))\n\n    this.#canvas.addEventListener('mousemove', this.#draw.bind(this))\n    this.#canvas.addEventListener('touchmove', this.#draw.bind(this))\n\n    this.#canvas.addEventListener('mouseup', this.#stopDrawing.bind(this))\n    this.#canvas.addEventListener('touchend', this.#stopDrawing.bind(this))\n\n    this.#select('#clear')?.addEventListener('click', this.clear)\n\n    window.addEventListener('keydown', (e) => {\n      // for undo with ctrl+z\n      if (e.ctrlKey && e.key === 'z') {\n        this.undo()\n      }\n\n      // for redo with ctrl+y\n      if (e.ctrlKey && e.key === 'y') {\n        this.redo()\n      }\n\n      // for download with ctrl+s\n      if (e.ctrlKey && e.key === 's') {\n        e.preventDefault()\n        this.download()\n      }\n\n      // for clear with ctrl+d\n      if (e.ctrlKey && e.key === 'd') {\n        e.preventDefault()\n        this.clear()\n      }\n\n    })\n  }\n\n  #select = selector => document.querySelector(selector)\n\n  resizeCanvas() {\n    const ratio = Math.max(window.devicePixelRatio || 1, 1);\n    this.#canvas.width = this.#canvas.offsetWidth * ratio;\n    this.#canvas.height = this.#canvas.offsetHeight * ratio;\n    this.ratio = ratio\n  }\n\n  #setCanvasBackground() {\n    // setting whole canvas background to white, so the downloaded img background will be white\n    this.#ctx.fillStyle = \"#fff\";\n    this.#ctx.fillRect(0, 0, this.#canvas.width, this.#canvas.height);\n    this.#ctx.fillStyle = this.#backgroundColor; // setting fillstyle back to the selectedColor, it'll be the brush color\n  }\n\n  #draw(e) {\n    if (!this.#isDrawing) return\n    this.#ctx.putImageData(this.#snapShot, 0, 0)\n    const { offsetX, offsetY } = e\n\n    this.#ctx.strokeStyle = this.toolType === 'brush' ? this.#penColor : this.#backgroundColor\n    this.#ctx.lineTo(offsetX, offsetY)\n    this.#ctx.stroke()\n    this.#ctx.moveTo(offsetX, offsetY)\n\n    // for straight line\n    if (this.toolType === 'line') {\n      this.#ctx.beginPath()\n      this.#ctx.moveTo(this.#prevMouseX, this.#prevMouseY)\n      this.#ctx.lineTo(offsetX, offsetY)\n      this.#ctx.stroke()\n    }\n\n  }\n\n  #stopDrawing() {\n    this.#isDrawing = false\n    this.#ctx.beginPath()\n    this.#storePaths()\n  }\n\n  #startDrawing(e) {\n    this.#isDrawing = true\n    // set line color\n    this.#ctx.strokeStyle = this.#penColor\n    // set line cap\n    this.#ctx.lineCap = this.#penType\n    // line join\n    this.#ctx.lineJoin = 'round'\n    // set line opacity\n    this.#ctx.globalAlpha = this.#penOpacity\n    // set line flow\n    this.#ctx.globalCompositeOperation = this.#penFlow\n    // set line hardness\n    this.#ctx.miterLimit = this.#penHardness\n\n    // set previous mouse position\n    this.#prevMouseX = e.offsetX\n    this.#prevMouseY = e.offsetY\n\n    // set line width\n    this.#ctx.lineWidth = this.#penSize\n\n    // set line color\n    this.#ctx.strokeStyle = this.#penColor\n    this.#ctx.fillStyle = this.#backgroundColor\n\n    // set line cap\n    this.#snapShot = this.#ctx.getImageData(0, 0, this.#canvas.width, this.#canvas.height)\n    // create new path\n    this.#ctx.beginPath()\n\n    this.#draw(e)\n  }\n\n  #storePaths() {\n    this.#pathArr.push(this.#ctx.getImageData(0, 0, this.#canvas.width, this.#canvas.height))\n    this.#countIndex += 1\n  }\n\n  clear() {\n    if (this.#pathArr.length === 0) return\n    this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height)\n    this.#setCanvasBackground()\n    this.#pathArr = []\n    this.#countIndex = -1\n  }\n\n  undo() {\n    if (this.#countIndex <= 0) {\n      this.clear()\n      return\n    }\n    this.#countIndex -= 1\n    // this.#pathArr.pop()\n    this.#ctx.putImageData(this.#pathArr[this.#countIndex], 0, 0)\n  }\n\n  redo() {\n    if (this.#countIndex >= this.#pathArr.length - 1) {\n      return\n    }\n    this.#countIndex += 1\n    this.#ctx.putImageData(this.#pathArr[this.#countIndex], 0, 0)\n  }\n\n  setToolType(toolType) {\n    this.toolType = toolType\n  }\n\n  setPenSize(size) {\n    this.#penSize = size\n  }\n\n  setPenColor(color) {\n    this.#penColor = color\n  }\n\n  setPenType(type) {\n    this.#penType = type\n  }\n\n  setPenOpacity(opacity) {\n    this.#penOpacity = opacity\n  }\n\n  setPenFlow(flow) {\n    this.#penFlow = flow\n  }\n\n  setPenHardness(hardness) {\n    this.#penHardness = hardness\n  }\n\n  setBackgroundColor(color) {\n    this.#backgroundColor = color\n  }\n\n  setImageFormat(imageFormat) {\n    this.#imageFormat = imageFormat\n  }\n\n  getImageString() {\n    return this.#canvas.toDataURL(this.#imageFormat)\n  }\n\n  download(filename) {\n    const data = this.getImageString()\n    const blob = this.#dataURLToBlob(data)\n    const url = window.URL.createObjectURL(blob)\n\n    const a = document.createElement(\"a\");\n    a.style = \"display: none\";\n    a.download = Date.now() + '.' + this.#imageFormats[this.#imageFormat]; // passing current date as link download value\n    a.href = url\n    document.body.appendChild(a);\n    a.click();\n    window.URL.revokeObjectURL(url);\n  }\n\n  #dataURLToBlob(dataURL) {\n    const parts = dataURL.split(';base64,');\n    const contentType = parts[0].split(\":\")[1];\n    const raw = window.atob(parts[1]);\n    const rawLength = raw.length;\n    const uInt8Array = new Uint8Array(rawLength);\n\n    for (let i = 0; i < rawLength; ++i) {\n      uInt8Array[i] = raw.charCodeAt(i);\n    }\n\n    return new Blob([uInt8Array], { type: contentType });\n  }\n\n  #download(dataURL, filename) {\n    const blob = dataURLToBlob(dataURL);\n    const url = window.URL.createObjectURL(blob);\n\n    imageUrl.href = url\n    imageUrl.innerText = filename\n\n    const a = document.createElement(\"a\");\n    a.style = \"display: none\";\n    a.href = url;\n    a.download = filename;\n    document.body.appendChild(a);\n    a.click();\n    window.URL.revokeObjectURL(url);\n  }\n\n  destroy() {\n    this.#canvas = null\n    this.#isDrawing = null\n    this.#ctx = null\n  }\n\n  // events\n  addEventListener(event, callback) {\n    this.#canvas.addEventListener(event, callback)\n  }\n\n  getCanvasData() {\n    return this.#canvas.toDataURL(this.#imageFormat)\n  }\n}\n"],"names":["canvas","isDrawing","penSize","penColor","penType","penOpacity","penFlow","penHardness","backgroundColor","imageFormat","snapShot","prevMouseX","prevMouseY","ctx","toolType","ratio","imageFormats","pathArr","countIndex","constructor","options","this","select","error","style","cursor","setDefaults","init","window","addEventListener","resizeCanvas","bind","getContext","willReadFrequently","scale","setCanvasBackground","fillStyle","startDrawing","draw","stopDrawing","clear","e","ctrlKey","key","undo","redo","preventDefault","download","selector","document","querySelector","Math","max","devicePixelRatio","width","offsetWidth","height","offsetHeight","fillRect","putImageData","offsetX","offsetY","strokeStyle","lineTo","stroke","moveTo","beginPath","storePaths","lineCap","lineJoin","globalAlpha","globalCompositeOperation","miterLimit","lineWidth","getImageData","push","length","clearRect","setToolType","setPenSize","size","setPenColor","color","setPenType","type","setPenOpacity","opacity","setPenFlow","flow","setPenHardness","hardness","setBackgroundColor","setImageFormat","getImageString","toDataURL","filename","data","blob","dataURLToBlob","url","URL","createObjectURL","a","createElement","Date","now","href","body","appendChild","click","revokeObjectURL","dataURL","parts","split","contentType","raw","atob","rawLength","uInt8Array","Uint8Array","i","charCodeAt","Blob","imageUrl","innerText","destroy","event","callback","getCanvasData"],"mappings":"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"}