{"version":3,"sources":["jsdelivr-header.js","/npm/screen-snip@1.0.0/dist/ScreenSnip.js"],"names":[],"mappings":"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","file":"/npm/screen-snip@1.0.0/dist/ScreenSnip.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/screen-snip@1.0.0/dist/ScreenSnip.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","import React, { useEffect, useState } from 'react';\nimport html2canvas from 'html2canvas';\nimport './App.css';\n\nfunction ScreenSnip(props) {\n  const [screen, setScreen] = useState({\n    on: false,\n    startX: 0,\n    startY: 0,\n    endX: 0,\n    endY: 0,\n    crossHairsTop: 0,\n    crossHairsLeft: 0,\n    isMouseDown: false,\n    windowWidth: 0,\n    windowHeight: 0,\n    borderWidth: 0,\n    cropPositionTop: 0,\n    cropPositionLeft: 0,\n    cropWidth: 0,\n    cropHeigth: 0,\n    imageURL: ''\n  });\n\n  const handleWindowResize = () => {\n    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;\n    setScreen({ ...screen,\n      windowWidth,\n      windowHeight\n    });\n    return windowWidth, windowHeight;\n  };\n\n  useEffect(() => {\n    handleWindowResize();\n    window.removeEventListener('resize', handleWindowResize);\n    return () => {\n      window.removeEventListener('resize', handleWindowResize);\n    };\n  }, []);\n\n  const handStartCapture = () => setScreen({ ...screen,\n    on: true\n  });\n\n  const handleMouseMove = e => {\n    console.log(e);\n    const {\n      isMouseDown,\n      windowWidth,\n      windowHeight,\n      startX,\n      startY,\n      borderWidth\n    } = screen;\n    let cropPositionTop = startY;\n    let cropPositionLeft = startX;\n    const endX = e.clientX;\n    const endY = e.clientY;\n    const isStartTop = endY >= startY;\n    const isStartBottom = endY <= startY;\n    const isStartLeft = endX >= startX;\n    const isStartRight = endX <= startX;\n    const isStartTopLeft = isStartTop && isStartLeft;\n    const isStartTopRight = isStartTop && isStartRight;\n    const isStartBottomLeft = isStartBottom && isStartLeft;\n    const isStartBottomRight = isStartBottom && isStartRight;\n    let newBorderWidth = borderWidth;\n    let cropWidth = 0;\n    let cropHeigth = 0;\n\n    if (isMouseDown) {\n      if (isStartTopLeft) {\n        newBorderWidth = `${startY}px ${windowWidth - endX}px ${windowHeight - endY}px ${startX}px`;\n        cropWidth = endX - startX;\n        cropHeigth = endY - startY;\n      }\n\n      if (isStartTopRight) {\n        newBorderWidth = `${startY}px ${windowWidth - startX}px ${windowHeight - endY}px ${endX}px`;\n        cropWidth = startX - endX;\n        cropHeigth = endY - startY;\n        cropPositionLeft = endX;\n      }\n\n      if (isStartBottomLeft) {\n        newBorderWidth = `${endY}px ${windowWidth - endX}px ${windowHeight - startY}px ${startX}px`;\n        cropWidth = endX - startX;\n        cropHeigth = startY - endY;\n        cropPositionTop = endY;\n      }\n\n      if (isStartBottomRight) {\n        newBorderWidth = `${endY}px ${windowWidth - startX}px ${windowHeight - startY}px ${endX}px`;\n        cropWidth = startX - endX;\n        cropHeigth = startY - endY;\n        cropPositionLeft = endX;\n        cropPositionTop = endY;\n      }\n    }\n\n    cropWidth *= window.devicePixelRatio;\n    cropHeigth *= window.devicePixelRatio;\n    setScreen({ ...screen,\n      crossHairsTop: e.clientY,\n      crossHairsLeft: e.clientX,\n      borderWidth: newBorderWidth,\n      cropWidth,\n      cropHeigth,\n      cropPositionTop: cropPositionTop,\n      cropPositionLeft: cropPositionLeft\n    });\n  };\n\n  let handleMouseDown = e => {\n    const startX = e.clientX;\n    const startY = e.clientY;\n    setScreen(prevState => ({ ...screen,\n      startX,\n      startY,\n      cropPositionTop: startY,\n      cropPositionLeft: startX,\n      isMouseDown: true,\n      borderWidth: `${prevState.windowWidth}px ${prevState.windowHeight}px`\n    }));\n  };\n\n  let handleMouseUp = () => {\n    handleClickTakeScreenShot();\n    setScreen({ ...screen,\n      on: false,\n      isMouseDown: false,\n      borderWidth: 0\n    });\n  };\n\n  const handleClickTakeScreenShot = () => {\n    const {\n      cropPositionTop,\n      cropPositionLeft,\n      cropWidth,\n      cropHeigth\n    } = screen;\n    const body = document.querySelector('body');\n\n    if (body) {\n      html2canvas(body).then(canvas => {\n        const croppedCanvas = document.createElement('canvas');\n        const croppedCanvasContext = croppedCanvas.getContext('2d');\n        croppedCanvas.width = cropWidth;\n        croppedCanvas.height = cropHeigth;\n\n        if (croppedCanvasContext) {\n          croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop, cropWidth, cropHeigth, 0, 0, cropWidth, cropHeigth);\n        }\n\n        if (croppedCanvas) {\n          props.endCapture(croppedCanvas.toDataURL());\n        }\n      });\n    }\n\n    setScreen({ ...screen,\n      crossHairsTop: 0,\n      crossHairsLeft: 0\n    });\n  };\n\n  const renderChild = () => {\n    const {\n      children\n    } = props; // console.log(typeof(children))\n\n    const prop = {\n      capture: handStartCapture\n    };\n\n    if (typeof children === 'function') {\n      return children(prop);\n    }\n\n    return children; // return \"\"\n  };\n\n  const {\n    on,\n    crossHairsTop,\n    crossHairsLeft,\n    borderWidth,\n    isMouseDown\n  } = screen;\n\n  if (!on) {\n    return renderChild();\n  }\n\n  return /*#__PURE__*/React.createElement(\"div\", {\n    onMouseMove: handleMouseMove,\n    onMouseDown: handleMouseDown,\n    onMouseUp: handleMouseUp\n  }, renderChild(), /*#__PURE__*/React.createElement(\"div\", {\n    className: `overlay ${isMouseDown && 'highlighting'}`,\n    style: {\n      borderWidth: `${borderWidth}`\n    }\n  }), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"crosshairs\",\n    style: {\n      left: crossHairsLeft + 'px',\n      top: crossHairsTop + 'px'\n    }\n  }));\n}\n\nexport { ScreenSnip };"]}