\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n 
\n
\n })\n } \n \n )\n}\n\nexport default FrameChooser\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n \n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default withLocalization(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 Loading texts…
\n }\n\n return \n 
\n
\n\n
\n
\n
\n
\n {/*\n
\n )\n}\nconst AppLocalized = withLocalization(App)\n\n\nfunction AppWrapper() {\n const [userLocales, setUserLocales] = useState(navigator.languages)\n const [currentLocale, setCurrentLocale] = useState(null)\n\n const handleLanguageChange = useCallback(event => {\n setUserLocales([event.target.dataset.locale])\n }, [setUserLocales])\n\n const handleCurrentLocalesChange = useCallback(currentLocales => {\n setCurrentLocale(currentLocales.length > 0 ? currentLocales[0] : '')\n }, [setCurrentLocale])\n\n return \n
\n\n Edit your Photo:
\nYour can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.
\n */}\n\n\n {\n Object.entries(locales)\n .map(([locale, name]) => {\n return \n {name}\n \n })\n }\n
\n \n \n}\nexport default withLocalization(AppWrapper)\n\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 \n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n \n
\n })\n } \n \n )\n}\n\nexport default FrameChooser\n","import React from 'react'\nimport {\n Localized as LocalizedOriginal,\n // withLocalization,\n} from '@fluent/react'\n\nimport { FluentContext } from '../node_modules/@fluent/react/esm/context.js'\n\nconst Localized = props => (\n \n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return \n })\n }\n
\n )\n}\n\nexport default withLocalization(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 Loading texts…
\n }\n\n return \n \n
\n\n
\n
\n
\n
\n {/*\n
\n )\n}\nconst AppLocalized = withLocalization(App)\n\n\nfunction AppWrapper() {\n const [userLocales, setUserLocales] = useState(navigator.languages)\n const [currentLocale, setCurrentLocale] = useState(null)\n\n const handleLanguageChange = useCallback(event => {\n setUserLocales([event.target.dataset.locale])\n }, [setUserLocales])\n\n const handleCurrentLocalesChange = useCallback(currentLocales => {\n setCurrentLocale(currentLocales.length > 0 ? currentLocales[0] : '')\n }, [setCurrentLocale])\n\n return \n
\n\n Edit your Photo:
\nYour can reposition the image and scale it. Use pinch-to-zoom or scroll to scale.
\n */}\n\n\n {\n Object.entries(locales)\n .map(([locale, name]) => {\n return \n {name}\n \n })\n }\n
\n \n \n}\nexport default withLocalization(AppWrapper)\n\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