\n {\n frames.map(frame => {\n const frame_src_path = frame.src\n const isChoosen = choosenFrameSRC === frame_src_path\n return handleImageChoosing(frame)}\n >\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\n const isChoosen = choosenFrameSRC === frame_src_path\n return handleImageChoosing(frame)}\n >\n {frame.name === '' ? getString('button_no_hashtag') : frame.name}\n \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 \n 
\n
\n\n
\n
\n
\n
\n {/*\n
\n )\n}\nexport default withLocalization(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, { useEffect, useState } from 'react'\n\n// https://projectfluent.org/play/\n\n// import {LocalizationProvider,Localized} from '@fluent/react' // '@fluent/react/compat'\nimport { ReactLocalization, LocalizationProvider } from '@fluent/react'\nimport { FluentBundle, FluentResource } from '@fluent/bundle'\nimport { negotiateLanguages } from '@fluent/langneg'\n\n\nexport const locales = {\n de: 'Deutsch',\n en: 'English',\n es: 'Español',\n pt: 'Português',\n fr: 'Français',\n it: 'Italiano',\n nl: 'Dutch',\n pl: 'Polska',\n ru: 'Pусский',\n}\n\nconst _supportedLocales_ = Object.keys(locales)\nconst _defaultLocale_ = 'en'\n\n\nasync function fetchMessages(locale) {\n const path = await import('./locales/' + locale + '.ftl')\n\n const response = await fetch(path.default)\n const messages = await response.text()\n\n return { [locale]: new FluentResource(messages) }\n}\n\nfunction getDefaultBundles() {\n const bundle = new FluentBundle('')\n bundle.addResource(new FluentResource(''))\n return new ReactLocalization([bundle])\n}\n\nasync function createMessagesGenerator(currentLocales) {\n const fetched = await Promise.all(\n currentLocales.map(fetchMessages)\n )\n const messages = fetched.reduce(\n (obj, cur) => Object.assign(obj, cur)\n )\n\n return function* generateBundles() {\n for (const locale of currentLocales) {\n const bundle = new FluentBundle(locale)\n bundle.addResource(messages[locale])\n yield bundle\n }\n }\n}\n\nexport function AppLocalizationProvider({ userLocales, children, onLocaleChange }){\n const [bundles, setBundles] = useState(getDefaultBundles())\n\n useEffect(() => {\n async function loadBundles() {\n const currentLocales = negotiateLanguages(\n userLocales,\n _supportedLocales_,\n { defaultLocale: _defaultLocale_ }\n )\n\n if (!!onLocaleChange) {\n onLocaleChange(currentLocales)\n }\n\n const generateBundles = await createMessagesGenerator(currentLocales)\n setBundles( new ReactLocalization(generateBundles()) )\n }\n loadBundles()\n }, [userLocales, onLocaleChange])\n\n if (!bundles) {\n // Show a loader.\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 : null\n }\n Loading texts…
\n }\n\n return \n {\n frames.map(frame => {\n const frame_src_path = frame.src\n const isChoosen = choosenFrameSRC === frame_src_path\n return handleImageChoosing(frame)}\n >\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\n const isChoosen = choosenFrameSRC === frame_src_path\n return handleImageChoosing(frame)}\n >\n {frame.name === '' ? getString('button_no_hashtag') : frame.name}\n \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 \n \n
\n\n
\n
\n
\n
\n {/*\n
\n )\n}\nexport default withLocalization(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, { useEffect, useState } from 'react'\n\n// https://projectfluent.org/play/\n\n// import {LocalizationProvider,Localized} from '@fluent/react' // '@fluent/react/compat'\nimport { ReactLocalization, LocalizationProvider } from '@fluent/react'\nimport { FluentBundle, FluentResource } from '@fluent/bundle'\nimport { negotiateLanguages } from '@fluent/langneg'\n\n\nexport const locales = {\n de: 'Deutsch',\n en: 'English',\n es: 'Español',\n pt: 'Português',\n fr: 'Français',\n it: 'Italiano',\n nl: 'Nederlands',\n pl: 'Polska',\n ru: 'Pусский',\n}\n\nconst _supportedLocales_ = Object.keys(locales)\nconst _defaultLocale_ = 'en'\n\n\nasync function fetchMessages(locale) {\n const path = await import('./locales/' + locale + '.ftl')\n\n const response = await fetch(path.default)\n const messages = await response.text()\n\n return { [locale]: new FluentResource(messages) }\n}\n\nfunction getDefaultBundles() {\n const bundle = new FluentBundle('')\n bundle.addResource(new FluentResource(''))\n return new ReactLocalization([bundle])\n}\n\nasync function createMessagesGenerator(currentLocales) {\n const fetched = await Promise.all(\n currentLocales.map(fetchMessages)\n )\n const messages = fetched.reduce(\n (obj, cur) => Object.assign(obj, cur)\n )\n\n return function* generateBundles() {\n for (const locale of currentLocales) {\n const bundle = new FluentBundle(locale)\n bundle.addResource(messages[locale])\n yield bundle\n }\n }\n}\n\nexport function AppLocalizationProvider({ userLocales, children, onLocaleChange }){\n const [bundles, setBundles] = useState(getDefaultBundles())\n\n useEffect(() => {\n async function loadBundles() {\n const currentLocales = negotiateLanguages(\n userLocales,\n _supportedLocales_,\n { defaultLocale: _defaultLocale_ }\n )\n\n if (!!onLocaleChange) {\n onLocaleChange(currentLocales)\n }\n\n const generateBundles = await createMessagesGenerator(currentLocales)\n setBundles( new ReactLocalization(generateBundles()) )\n }\n loadBundles()\n }, [userLocales, onLocaleChange])\n\n if (!bundles) {\n // Show a loader.\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 : null\n }\n Loading texts…
\n }\n\n return