{"version":3,"sources":["frames lazy /^/.//.*/.png$/ groupOptions: {} namespace object","hashtags lazy /^/.//.*/.png$/ groupOptions: {} namespace object","FrameChooser.js","HashtagChooser.js","Editor.js","HeaderImage.svg","purpleBG.png","empty_1x1.png","App.js","reportWebVitals.js","index.js"],"names":["map","webpackAsyncContext","req","__webpack_require__","o","Promise","resolve","then","e","Error","code","ids","id","keys","Object","module","exports","FrameChooser","onChange","useState","frames","setFrames","choosenFrame","setChoosenFrame","useEffect","a","all","frame_filename","name","src","new_frames","default","loadFrames","handleImageChoosing","useCallback","event","target","dataset","className","frame","frame_src_path","isChoosen","alt","data-src","onClick","HashtagChooser","clamp","value","min","max","Math","Editor","backgroundURL","backgroundRatio","frameURL","hashtagURL","editorRef","useRef","backgroundImageRef","hammer_got_init","set_hammer_got_init","hammertime","set_hammertime","hamster","set_hamster","x","set_x","y","set_y","add_x","set_add_x","add_y","set_add_y","scale","set_scale","photoWidth","setPhotoWidth","photoHeight","setPhotoHeight","editorWidth","setEditorWidth","editorHeight","setEditorHeight","rangeMinX","set_rangeMinX","rangeMinY","set_rangeMinY","rangeMaxX","set_rangeMaxX","rangeMaxY","set_rangeMaxY","current","new_editorWidth","offsetWidth","new_editorHeight","offsetHeight","new_photoWidth","new_photoHeight","imageWidth","imageHeight","imageScale","containerWidth","containerHeight","updateRange","handleMove","prev_x","prev_y","new_x","deltaX","new_y","deltaY","isFinal","handleScale","delta","preventDefault","new_scale","element","addEventListener","Hammer","direction","Hamster","on","wheel","off","unwheel","ref","data-x","data-y","data-scale","style","width","height","transform","frameSize","App","setFrameURL","setHashtagURL","originalPhoto","setOriginalPhoto","originalPhotoRation","setOriginalPhotoRation","orientation","set_orientation","set_width","set_height","cords","setCords","handleFrameURL","newFrameURL","handleHashtagURL","newHashtagURL","handleCordsChange","handleReadFile","file","reader","FileReader","onload","reader_event","img","Image","callback","view","DataView","result","getUint16","length","byteLength","offset","marker","getUint32","little","tags","i","readAsArrayBuffer","slice","getOrientation","new_orientation","original_ration","readAsDataURL","handleImage","files_event","files","onDrop","acceptedFiles","handleDownload","canvas","document","createElement","ctx","getContext","alpha","translate","rotate","PI","width_scaled","height_scaled","drawImage","pngUrl","toDataURL","mergeImages","purpleBG","b64","data","body","appendChild","download","href","click","remove","trigger_download","useDropzone","accept","maxFiles","noKeyboard","isDragActive","getRootProps","HeaderImage","tabIndex","outline","type","display","empty_1x1","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.72b276c0.chunk.js","sourcesContent":["var map = {\n\t\"./ProfileFrame Blue Bars.png\": [\n\t\t29,\n\t\t4\n\t],\n\t\"./ProfileFrame Green Bars.png\": [\n\t\t30,\n\t\t5\n\t],\n\t\"./ProfileFrame Mixed Bars.png\": [\n\t\t31,\n\t\t6\n\t],\n\t\"./ProfileFrame Purple.png\": [\n\t\t32,\n\t\t7\n\t],\n\t\"./ProfileFrame Red Bars.png\": [\n\t\t33,\n\t\t8\n\t],\n\t\"./ProfileFrame White Bars.png\": [\n\t\t34,\n\t\t9\n\t],\n\t\"./ProfileFrame Yellow Bars.png\": [\n\t\t35,\n\t\t10\n\t],\n\t\"./white-round-bottom-logo.png\": [\n\t\t36,\n\t\t11\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 26;\nmodule.exports = webpackAsyncContext;","var map = {\n\t\"./DeineWahl.png\": [\n\t\t37,\n\t\t12\n\t],\n\t\"./Europa.png\": [\n\t\t38,\n\t\t13\n\t],\n\t\"./JetztBistDuDran.png\": [\n\t\t39,\n\t\t14\n\t],\n\t\"./Volt.png\": [\n\t\t40,\n\t\t15\n\t],\n\t\"./Volt21.png\": [\n\t\t41,\n\t\t16\n\t],\n\t\"./VoltEuropa.png\": [\n\t\t42,\n\t\t17\n\t],\n\t\"./VoltRLP.png\": [\n\t\t43,\n\t\t18\n\t],\n\t\"./VoteVolt.png\": [\n\t\t44,\n\t\t19\n\t],\n\t\"./paneuropäisch.png\": [\n\t\t45,\n\t\t20\n\t],\n\t\"./pragmatisch.png\": [\n\t\t46,\n\t\t21\n\t],\n\t\"./progressiv.png\": [\n\t\t47,\n\t\t22\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 27;\nmodule.exports = webpackAsyncContext;","import { useState, useEffect, useCallback } from 'react'\n\nfunction FrameChooser({onChange}) {\n    const [frames, setFrames] = useState([])\n    const [choosenFrame, setChoosenFrame] = useState(null)\n\n    useEffect(() => {\n        async function loadFrames(){\n            Promise.all(\n                [\n                    'ProfileFrame Purple',\n                    'ProfileFrame Mixed Bars',\n                    'ProfileFrame Yellow Bars',\n                    'ProfileFrame Red Bars',\n                    'ProfileFrame Blue Bars',\n                    'ProfileFrame Green Bars',\n                    'ProfileFrame White Bars',\n                    'white-round-bottom-logo',\n                ]\n                .map(async frame_filename => {\n                    return {\n                        name: frame_filename,\n                        src: await import(`./frames/${frame_filename}.png`),\n                    }\n                })\n            )\n            .then(new_frames => {\n                setFrames(new_frames)\n                setChoosenFrame(new_frames[0].src.default)\n            })\n        }\n        loadFrames()\n    }, [])\n\n    const handleImageChoosing = useCallback(event => {\n        setChoosenFrame(event.target.dataset.src)\n    }, [setChoosenFrame])\n\n    useEffect(() => {\n        onChange(choosenFrame)\n    }, [onChange, choosenFrame])\n\n    return (\n        <div className=\"FrameChooser\">\n            <h2>Choose a frame:</h2>\n            {\n                frames.map(frame => {\n                    const frame_src_path = frame.src.default\n                    const isChoosen = choosenFrame === frame_src_path\n                    return <img alt={frame.name} key={frame_src_path} data-src={frame_src_path} src={frame_src_path} className={isChoosen ? 'frame choosen' : 'frame'} onClick={handleImageChoosing}/>\n                })\n            }             \n        </div>\n    )\n}\n\nexport default FrameChooser\n","import { useState, useEffect, useCallback } from 'react'\n\nfunction HashtagChooser({ onChange }) {\n    const [frames, setFrames] = useState([])\n    const [choosenFrame, setChoosenFrame] = useState(null)\n\n    useEffect(() => {\n        async function loadFrames() {\n            Promise.all(\n                [\n                    '',\n                    'DeineWahl',\n                    'Europa',\n                    'JetztBistDuDran',\n                    'paneuropäisch',\n                    'pragmatisch',\n                    'progressiv',\n                    'Volt',\n                    'Volt21',\n                    'VoltEuropa',\n                    'VoltRLP',\n                    'VoteVolt',\n                ]\n                    .map(async frame_filename => {\n                        return {\n                            name: frame_filename,\n                            src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`),\n                        }\n                    })\n            )\n                .then(new_frames => {\n                    setFrames(new_frames)\n                    setChoosenFrame(new_frames[0].src.default)\n                })\n        }\n        loadFrames()\n    }, [])\n\n    const handleImageChoosing = useCallback(event => {\n        setChoosenFrame(event.target.dataset.src)\n    }, [setChoosenFrame])\n\n    useEffect(() => {\n        onChange(choosenFrame)\n    }, [onChange, choosenFrame])\n\n    return (\n        <div className=\"HashtagChooser\">\n            <h2>Choose a Hashtag:</h2>\n            {\n                frames.map(frame => {\n                    const frame_src_path = frame.src.default\n                    const isChoosen = choosenFrame === frame_src_path\n                    return <button key={frame_src_path} data-src={frame_src_path} className={isChoosen ? 'hashtag_button choosen' : 'hashtag_button'} onClick={handleImageChoosing}>\n                        {frame.name === '' ? 'No Hashtag' : '#'+frame.name}\n                    </button>\n                })\n            }\n        </div>\n    )\n}\n\nexport default HashtagChooser\n","import { useEffect, useRef, useState, useCallback } from 'react'\n\nimport Hammer from 'hammerjs'\nimport Hamster from 'hamsterjs'\n\nfunction updateRange(imageWidth, imageHeight, imageScale, containerWidth, containerHeight) {\n\n    const rangeX = Math.max(0, (imageWidth * imageScale) - containerWidth)\n    const rangeY = Math.max(0, (imageHeight * imageScale) - containerHeight)\n\n    const rangeMaxX = (rangeX / 2)\n    const rangeMinX = 0 - rangeMaxX\n\n    const rangeMaxY = (rangeY / 2)\n    const rangeMinY = 0 - rangeMaxY\n\n    return {\n        rangeMaxX,\n        rangeMinX,\n        rangeMaxY,\n        rangeMinY,\n    }\n}\n\nfunction clamp(value, min, max) {\n    return Math.min(Math.max(min, value), max)\n}\n\n\n\nlet minScale = 1;\nlet maxScale = 8;\n\n\n\nfunction Editor({ onChange, backgroundURL, backgroundRatio, frameURL, hashtagURL }) {\n    const editorRef = useRef(null)\n    const backgroundImageRef = useRef(null)\n\n    const [hammer_got_init, set_hammer_got_init] = useState(false)\n\n    const [hammertime, set_hammertime] = useState(null)\n    const [hamster, set_hamster] = useState(null)\n\n    const [x, set_x] = useState(0)\n    const [y, set_y] = useState(0)\n    const [add_x, set_add_x] = useState(0)\n    const [add_y, set_add_y] = useState(0)\n    const [scale, set_scale] = useState(1)\n    // const [add_scale, set_add_scale] = useState(0)\n\n    const [photoWidth, setPhotoWidth] = useState(300)\n    const [photoHeight, setPhotoHeight] = useState(300)\n    const [editorWidth, setEditorWidth] = useState(300)\n    const [editorHeight, setEditorHeight] = useState(300)\n\n    const [rangeMinX, set_rangeMinX] = useState(0)\n    const [rangeMinY, set_rangeMinY] = useState(0)\n    const [rangeMaxX, set_rangeMaxX] = useState(0)\n    const [rangeMaxY, set_rangeMaxY] = useState(0)\n\n    useEffect(() => {\n        if (!!onChange) {\n            onChange({ x, y, scale})\n        }\n    }, [onChange, x, y, scale])\n\n    useEffect(() => {\n        if (!!editorRef && !!editorRef.current) {\n            const new_editorWidth = editorRef.current.offsetWidth\n            const new_editorHeight = editorRef.current.offsetHeight\n            setEditorHeight(new_editorHeight)\n            setEditorWidth(new_editorWidth)\n\n            let new_photoWidth = 1\n            let new_photoHeight = 1\n            if (backgroundRatio < 1) {\n                new_photoWidth = 1 / backgroundRatio\n            } else if (backgroundRatio > 1) {\n                new_photoHeight = 1 * backgroundRatio\n            }\n\n            setPhotoWidth(new_photoWidth)\n            setPhotoHeight(new_photoHeight)\n        }\n    }, [backgroundRatio])\n\n    useEffect(() => {\n        const {\n            rangeMinX,\n            rangeMinY,\n            rangeMaxX,\n            rangeMaxY,\n        } = updateRange(photoWidth * editorWidth, photoHeight * editorHeight, scale, editorWidth, editorHeight)\n\n        set_rangeMinX(rangeMinX)\n        set_rangeMinY(rangeMinY)\n        set_rangeMaxX(rangeMaxX)\n        set_rangeMaxY(rangeMaxY)\n    }, [\n        photoWidth,\n        photoHeight,\n        editorWidth,\n        editorHeight,\n        scale,\n    ])\n\n    useEffect(() => {\n        set_x(0)\n        set_y(0)\n        set_add_x(0)\n        set_add_y(0)\n        set_scale(1)\n    }, [backgroundURL])\n\n    const handleMove = useCallback(event => {\n        const prev_x = event.target.dataset.x * 1\n        const prev_y = event.target.dataset.y * 1\n\n        const new_x = clamp(prev_x + event.deltaX, rangeMinX, rangeMaxX)\n        const new_y = clamp(prev_y + event.deltaY, rangeMinY, rangeMaxY)\n\n        if (event.isFinal) {\n            set_x(new_x || 0)\n            set_y(new_y || 0)\n            set_add_x(0)\n            set_add_y(0)\n        }else{\n            set_add_x(new_x - prev_x || 0)\n            set_add_y(new_y - prev_y || 0)\n        }\n    }, [\n        rangeMinX,\n        rangeMinY,\n        rangeMaxX,\n        rangeMaxY,\n    ])\n\n    const handleScale = useCallback((event, delta, deltaX, deltaY) => {\n        event.preventDefault()\n\n        const prev_scale = event.target.dataset.scale * 1\n        const new_scale = clamp(prev_scale + delta / 200, minScale, maxScale)\n        set_scale(new_scale || 1)\n\n        const prev_x = event.target.dataset.x * 1\n        const prev_y = event.target.dataset.y * 1\n        set_x(clamp(prev_x, rangeMinX, rangeMaxX) || 0)\n        set_y(clamp(prev_y, rangeMinY, rangeMaxY) || 0)\n    }, [\n        rangeMinX,\n        rangeMinY,\n        rangeMaxX,\n        rangeMaxY,\n    ])\n\n    useEffect(() => {\n        if (!hammer_got_init && !!editorRef && !!editorRef.current) {\n            const element = editorRef.current\n\n            element.addEventListener('mousedown', event => {\n                event.preventDefault()\n                // event.stopPropagation()\n            }, false)\n            element.addEventListener(\"touchstart\", event => {\n                event.preventDefault()\n                // event.stopPropagation()\n            }, false)\n            element.addEventListener(\"touchend\", event => {\n                event.preventDefault()\n                // event.stopPropagation()\n            }, false)\n            element.addEventListener(\"touchmove\", event => {\n                event.preventDefault()\n                // event.stopPropagation()\n            }, false)\n\n            set_hammertime(new Hammer(element, {\n                direction: 'DIRECTION_ALL',\n            }))\n\n            set_hamster(Hamster(element))\n\n            set_hammer_got_init(true)\n        }\n    }, [editorRef, hammer_got_init])\n\n    useEffect(() => {\n        if (!!hammertime && !!hamster && hammer_got_init && !!editorRef && !!editorRef.current) {\n            hammertime.on('pan', handleMove)\n            hamster.wheel(handleScale)\n\n            return function () {\n                hammertime.off('pan', handleMove)\n                hamster.unwheel()\n            }\n        }\n    }, [editorRef, handleMove, handleScale, hammer_got_init, hammertime, hamster])\n\n    return (\n        <div\n            className=\"Editor\"\n            ref={editorRef}\n            data-x={x}\n            data-y={y}\n            data-scale={scale}\n        >\n            <img\n                src={backgroundURL}\n                ref={backgroundImageRef}\n                alt=\"\"\n                className=\"background\"\n                style={{\n                    width: (photoWidth*100)+'%',\n                    height: (photoHeight*100)+'%',\n                    transform: `translate3d(calc(-50% + ${x + add_x}px), calc(-50% + ${y + add_y}px), 0)  scale(${scale},${scale})`,\n                }}\n            />\n            <img\n                src={frameURL}\n                alt=\"\"\n                className=\"foreground\"\n            />\n            <img\n                src={hashtagURL}\n                alt=\"\"\n                className=\"hashtag\"\n            />\n        </div>\n    )\n}\n\nexport default Editor\n","export default __webpack_public_path__ + \"static/media/HeaderImage.1f39a672.svg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==\"","import { useState, useCallback } from 'react'\nimport './App.css'\nimport { useDropzone } from 'react-dropzone'\nimport FrameChooser from './FrameChooser.js'\nimport HashtagChooser from './HashtagChooser.js'\nimport Editor from './Editor.js'\nimport HeaderImage from './HeaderImage.svg'\nimport purpleBG from './purpleBG.png'\nimport empty_1x1 from './empty_1x1.png'\n\nimport mergeImages from 'merge-images'\n\nconst frameSize = 1080\n\nfunction getOrientation(file, callback) {\n    // Source: http://stackoverflow.com/a/32490603\n    // (With some modifications: I just made the code fit the style-guide.)\n    const reader = new FileReader()\n\n    reader.onload = function (event) {\n        const view = new DataView(event.target.result)\n\n        if (view.getUint16(0, false) !== 0xFFD8) {\n            return callback(-2)\n        }\n\n        const length = view.byteLength\n        let offset = 2\n\n        while (offset < length) {\n            const marker = view.getUint16(offset, false)\n            offset += 2\n\n            if (marker === 0xFFE1) {\n                if (view.getUint32(offset += 2, false) !== 0x45786966) {\n                    return callback(-1)\n                }\n                const little = view.getUint16(offset += 6, false) === 0x4949\n                offset += view.getUint32(offset + 4, little)\n                const tags = view.getUint16(offset, little)\n                offset += 2\n\n                for (var i = 0; i < tags; i++) {\n                    if (view.getUint16(offset + (i * 12), little) === 0x0112) {\n                        return callback(view.getUint16(offset + (i * 12) + 8, little))\n                    }\n                }\n            } else if ((marker & 0xFF00) !== 0xFF00) {\n                break\n            } else {\n                offset += view.getUint16(offset, false)\n            }\n        }\n        return callback(-1)\n    }\n\n    reader.readAsArrayBuffer(file.slice(0, 64 * 1024))\n}\n\nfunction trigger_download(name, data){\n    const a = document.createElement('a')\n    document.body.appendChild(a)\n    // a.target = '_blank'\n    a.download = name\n    a.href = data\n    a.click()\n    a.remove()\n}\n\nfunction App() {\n    const [frameURL, setFrameURL] = useState(null)\n    const [hashtagURL, setHashtagURL] = useState(null)\n    const [originalPhoto, setOriginalPhoto] = useState(null)\n    const [originalPhotoRation, setOriginalPhotoRation] = useState(1)\n    const [orientation, set_orientation] = useState(null)\n\n\n    // const [combinedImage, set_combinedImage] = useState(null)\n\n    const [width, set_width] = useState(0)\n    const [height, set_height] = useState(0)\n\n    const [cords, setCords] = useState({x:0, y:0, scale:1})\n\n    const handleFrameURL = useCallback(newFrameURL => {\n        setFrameURL(newFrameURL)\n    }, [setFrameURL])\n\n    const handleHashtagURL = useCallback(newHashtagURL => {\n        setHashtagURL(newHashtagURL)\n    }, [setHashtagURL])\n\n    const handleCordsChange = useCallback(({x, y, scale}) => {\n        setCords({ x, y, scale })\n    }, [])\n\n    const handleReadFile = useCallback(file => {\n        if (!(!!file)) {\n            return;\n        }\n\n        const reader = new FileReader()\n        reader.onload = reader_event => {\n            const img = new Image()\n            img.onload = function () {\n                let width, height;\n                if (img.width < img.height) {\n                    height = (img.height / img.width) * frameSize\n                    width = frameSize\n                } else {\n                    height = frameSize\n                    width = (img.width / img.height) * frameSize\n                }\n\n                getOrientation(file, new_orientation => {\n                    let original_ration = 1\n                    // use the correct image orientation\n                    switch (new_orientation) {\n                        // Source: https://stackoverflow.com/a/30242954/2387277\n                        // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n                        case 2:\n                            // horizontal flip\n                            original_ration = height / width\n                            break\n                        case 3:\n                            // 180° rotate left\n                            original_ration = height / width\n                            break\n                        case 4:\n                            // vertical flip\n                            original_ration = height / width\n                            break\n                        case 5:\n                            // vertical flip + 90 rotate right\n                            original_ration = width / height\n                            break\n                        case 6:\n                            // 90° rotate right\n                            original_ration = width / height\n                            break\n                        case 7:\n                            // horizontal flip + 90 rotate right\n                            original_ration = width / height\n                            break\n                        case 8:\n                            // 90° rotate left\n                            original_ration = width / height\n                            break\n                        default:\n                            original_ration = height / width\n                            break\n                    }\n\n                    set_width(width)\n                    set_height(height)\n                    setOriginalPhoto(reader_event.target.result)\n                    set_orientation(new_orientation)\n                    setOriginalPhotoRation(original_ration)\n                })\n            }\n            img.src = reader_event.target.result\n        }\n        reader.readAsDataURL(file)\n    }, [])\n\n    const handleImage = useCallback(files_event => {\n        handleReadFile(files_event.target.files[0])\n    }, [handleReadFile])\n\n    const onDrop = useCallback(acceptedFiles => {\n        handleReadFile(acceptedFiles[0])\n    }, [handleReadFile])\n\n    const handleDownload = useCallback(() => {\n        const img = new Image()\n        img.onload = function () {\n            const canvas = document.createElement('canvas')\n            canvas.width = frameSize\n            canvas.height = frameSize\n\n            const ctx = canvas.getContext('2d', { alpha: true })\n\n            // use the correct image orientation\n            switch (orientation) {\n                // Source: https://stackoverflow.com/a/30242954/2387277\n                // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n                case 2:\n                    // horizontal flip\n                    ctx.translate(canvas.width, 0)\n                    ctx.scale(-1, 1)\n                    break\n                case 3:\n                    // 180° rotate left\n                    ctx.translate(canvas.width, canvas.height)\n                    ctx.rotate(Math.PI)\n                    break\n                case 4:\n                    // vertical flip\n                    ctx.translate(0, canvas.height)\n                    ctx.scale(1, -1)\n                    break\n                case 5:\n                    // vertical flip + 90 rotate right\n                    ctx.rotate(0.5 * Math.PI)\n                    ctx.scale(1, -1)\n                    break\n                case 6:\n                    // 90° rotate right\n                    ctx.rotate(0.5 * Math.PI)\n                    ctx.translate(0, -canvas.height)\n                    break\n                case 7:\n                    // horizontal flip + 90 rotate right\n                    ctx.rotate(0.5 * Math.PI)\n                    ctx.translate(canvas.width, -canvas.height)\n                    ctx.scale(-1, 1)\n                    break\n                case 8:\n                    // 90° rotate left\n                    ctx.rotate(-0.5 * Math.PI)\n                    ctx.translate(-canvas.width, 0)\n                    break\n                default:\n                    break\n            }\n\n\n            const width_scaled = width * cords.scale\n            const height_scaled = height * cords.scale\n\n            ctx.drawImage(\n                img,\n                cords.x * 3.5 + (frameSize - width_scaled) * 0.5,\n                cords.y * 3.5 + (frameSize - height_scaled) * 0.5,\n                width_scaled,\n                height_scaled,\n            )\n            // ctx.drawImage(\n            //     img,\n            //     ((frameSize - width_scaled) * 0.5),\n            //     ((frameSize - height_scaled) * 0.5),\n            //     width_scaled,\n            //     height_scaled,\n            // )\n\n            const pngUrl = canvas.toDataURL()\n\n            mergeImages([\n                purpleBG,\n                ...(pngUrl ? [pngUrl] : []),\n                ...(frameURL ? [frameURL] : []),\n                ...(hashtagURL ? [hashtagURL] : []),\n            ])\n            .then(b64 => {\n                // set_combinedImage(b64)\n                trigger_download('volt-profile-picture.png', b64)\n            })\n\n        }\n        img.src = originalPhoto\n    }, [\n        originalPhoto,\n        cords.x,\n        cords.y,\n        cords.scale,\n        orientation,\n        frameURL,\n        hashtagURL,\n        height,\n        width,\n    ])\n\n    const { isDragActive, getRootProps } = useDropzone({\n        onDrop,\n        accept: 'image/*',\n        maxFiles: 1,\n        noKeyboard: true,\n    })\n\n\n    return (\n        <div className=\"App\" {...getRootProps()}>\n            <img src={HeaderImage} className=\"HeaderImage\" alt=\"Volt Logo\" />\n\n            <div className={isDragActive ? 'droparea active' : 'droparea'}>\n                Drop your photo here ...\n            </div>\n\n            <h2>Choose your Photo:</h2>\n            <p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>\n\n            <label className=\"labelButton\" tabIndex=\"0\" style={{outline:'none'}}>\n                {!!originalPhoto ? <img src={originalPhoto} alt=\"Preview\" /> : null}\n                <span>{!!originalPhoto ? 'Change Photo' : 'Load Photo'}</span>\n                <input onChange={handleImage} type=\"file\" accept=\"image/*\" style={{display: 'none'}} />\n            </label>\n\n            {!!originalPhoto ? (<>\n                <FrameChooser onChange={handleFrameURL} />\n                <HashtagChooser onChange={handleHashtagURL} />\n            </>) : null}\n\n            {!!originalPhoto && !!frameURL ? (<>\n                <h2>Reposition your Photo:</h2>\n                {/*\n                <h2>Edit your Photo:</h2>\n                <p>Your can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.</p>\n                */}\n\n                <Editor\n                    backgroundURL={originalPhoto || empty_1x1}\n                    backgroundRatio={originalPhotoRation}\n                    frameURL={frameURL}\n                    hashtagURL={hashtagURL || empty_1x1}\n                    onChange={handleCordsChange}\n                />\n\n                <button onClick={handleDownload}>Download Profile Picture</button>\n            </>) : null}\n\n            <footer>\n                <a href=\"https://www.voltdeutschland.org/impressum\">Imprint</a>\n                &nbsp; • &nbsp;\n                <a href=\"https://www.voltdeutschland.org/datenschutz\">Privacy Policy</a>\n                &nbsp; • &nbsp;\n                <a href=\"https://github.com/voltbonn/profile-picture-generator\">Source Code</a>\n            </footer>\n        </div>\n    )\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry)\n      getFID(onPerfEntry)\n      getFCP(onPerfEntry)\n      getLCP(onPerfEntry)\n      getTTFB(onPerfEntry)\n    })\n  }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""}