From d1051dbb7bb0d88dd879c80f09974c51209957d9 Mon Sep 17 00:00:00 2001 From: hourglasshoro Date: Tue, 23 Mar 2021 13:18:55 +0900 Subject: [PATCH] =?UTF-8?q?Update=20=E3=83=88=E3=83=AA=E3=83=9F=E3=83=B3?= =?UTF-8?q?=E3=82=B0=E3=82=92=E8=A1=8C=E3=81=84=E8=B2=BC=E3=82=8A=E4=BB=98?= =?UTF-8?q?=E3=81=91=E3=81=BE=E3=81=A7=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atom/sticker.ts | 5 +++ src/components/modal/trimModal.tsx | 19 ++++---- src/pages/settlement/index.tsx | 2 +- src/pages/sticker-edit/index.tsx | 58 +++++++++++++++---------- src/pages/sticker-select/index.tsx | 58 ++++++++++++++----------- src/pages/supporters/index.tsx | 11 +++-- yarn.lock | 69 +++++++++++++++++++++++++++++- 7 files changed, 160 insertions(+), 62 deletions(-) diff --git a/src/atom/sticker.ts b/src/atom/sticker.ts index 17a7ac2..6be1c81 100644 --- a/src/atom/sticker.ts +++ b/src/atom/sticker.ts @@ -4,3 +4,8 @@ export const stickerState = atom({ key: "stickerState", default: "" }) + +export const stickerIsCircleState = atom({ + key: "stickerIsCircleState", + default: false +}) diff --git a/src/components/modal/trimModal.tsx b/src/components/modal/trimModal.tsx index aeafb75..e5d2d59 100644 --- a/src/components/modal/trimModal.tsx +++ b/src/components/modal/trimModal.tsx @@ -2,6 +2,9 @@ import React, { useCallback, useEffect, useState } from "react" import { RoundedButton, RoundedDivSize } from "../Button/RoundButton" import Cropper from "react-easy-crop" import Modal from "react-modal" +import { stickerIsCircleState } from "../../atom/sticker" +import { useSetRecoilState } from "recoil" +import { Sticker } from "../../pages/sticker-select" type props = { isOpen: boolean @@ -38,9 +41,7 @@ export const TrimModal: React.FC = ({ const [crop, setCrop] = useState({ x: 0, y: 0 }) const aspect = 1 const [isCircle, setIsCircle] = useState(false) - const [croppedImageIsCircle, setCroppedImageIsCircle] = useState(false) const [croppedAreaPixels, setCroppedAreaPixels] = useState(null) - const [croppedImage, setCroppedImage] = useState(null) // Cropperに渡す関数 const onZoomChange = (zoom) => { @@ -149,17 +150,17 @@ export const TrimModal: React.FC = ({ const cropImage = useCallback(async () => { try { const croppedImage = await getCroppedImg(image, croppedAreaPixels, rotation) - setCroppedImage(croppedImage) - imageSetter(croppedImage) + const croppedImageSticker: Sticker = { + src: croppedImage as string, + isCircle: isCircle + } + imageSetter(croppedImageSticker) isOpenSetter(false) + setIsCircle(false) } catch (e) { console.error(e) } - }, [croppedAreaPixels, rotation]) - - useEffect(() => { - setCroppedImageIsCircle(isCircle) - }, [croppedImage]) + }, [croppedAreaPixels, rotation, isCircle]) return ( diff --git a/src/pages/settlement/index.tsx b/src/pages/settlement/index.tsx index 60a785f..fb8a5b7 100644 --- a/src/pages/settlement/index.tsx +++ b/src/pages/settlement/index.tsx @@ -194,7 +194,7 @@ const CardForm: React.VFC<{}> = () => { setLoading(false) return } else { - router.replace({ pathname: "/sticker-edit", query: { settlement: true } }) + router.push({ pathname: "/sticker-edit", query: { settlement: true } }) console.log("決済完了") } diff --git a/src/pages/sticker-edit/index.tsx b/src/pages/sticker-edit/index.tsx index 8a6dcbd..8016cde 100644 --- a/src/pages/sticker-edit/index.tsx +++ b/src/pages/sticker-edit/index.tsx @@ -3,39 +3,23 @@ import { useInteractJS } from "../../hooks" import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton" import NextImage from "next/image" import { Toast, ToastType } from "../../components/toast" -import { auth } from "../../utils/firebase" import Header from "../../components/header" import { Footer } from "../../components/Footer" -import { useRecoilState, useRecoilValue } from "recoil" -import { stickerState } from "../../atom/sticker" +import { useRecoilValue } from "recoil" +import { stickerIsCircleState, stickerState } from "../../atom/sticker" import { useRouter } from "next/router" const Index: React.VFC<{}> = () => { //TODO: FIXME const sticker = useRecoilValue(stickerState) + const stickerIsCircle = useRecoilValue(stickerIsCircleState) const router = useRouter() const [toastMessage, setToastMessage] = useState("") const [toastType, setToastType] = useState(ToastType.Notification) const [toastState, setToastState] = useState(false) - - useEffect(() => { - if (router.query.settlement) { - setToastType(ToastType.Notification) - setToastMessage("決済が完了しました") - setToastState(true) - } - }, []) - - useEffect(() => { - console.log(auth.currentUser) - }) - const interact = useInteractJS() - const [preview, setPreview] = useState("/logo/logo.svg") - const handleChangeFile = (e) => { - const { files } = e.target - setPreview(window.URL.createObjectURL(files[0])) - } + const [preview, setPreview] = useState(sticker) + // contextを状態として持つ const [context, setContext] = useState(null) // コンポーネントの初期化完了後コンポーネント状態にコンテキストを登録 @@ -49,6 +33,14 @@ const Index: React.VFC<{}> = () => { console.log(sticker) }, []) + useEffect(() => { + if (router.query.settlement) { + setToastType(ToastType.Notification) + setToastMessage("決済が完了しました") + setToastState(true) + } + }, []) + const createImage = (url) => new Promise((resolve, reject) => { const image = new Image() @@ -78,10 +70,23 @@ const Index: React.VFC<{}> = () => { const img = new Image() img.src = preview img.onload = () => { + context.save() let e = document.getElementById("scope") const scopeWidth = parseFloat(window.getComputedStyle(e).width) const diff = (interact.width - scopeWidth) / 2 + + if (stickerIsCircle) { + context.strokeStyle = "rgba(100, 100, 100, 0)" + const radius = interact.width / 2 + const x = (interact.position.x * 816) / canvasWidth - diff + radius + const y = (interact.position.y * 571) / canvasHeight - diff + radius + context.beginPath() + context.arc(x, y, radius, 0, 2 * Math.PI) + context.stroke() + context.clip() + } + context.drawImage( img, (interact.position.x * 816) / canvasWidth - diff, @@ -89,6 +94,9 @@ const Index: React.VFC<{}> = () => { interact.width, interact.height ) + + context.restore() + console.log("restore") } } @@ -159,7 +167,13 @@ const Index: React.VFC<{}> = () => {
- + ステッカー
diff --git a/src/pages/sticker-select/index.tsx b/src/pages/sticker-select/index.tsx index 75be286..39ddbd9 100644 --- a/src/pages/sticker-select/index.tsx +++ b/src/pages/sticker-select/index.tsx @@ -1,25 +1,27 @@ import React, { ChangeEvent, useEffect, useState } from "react" import Image from "next/image" -import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton" +import { RoundedButton, RoundedDiv, RoundedDivSize } from "../../components/Button/RoundButton" import Header from "../../components/header" import { Footer } from "../../components/Footer" import { TrimModal } from "../../components/modal/trimModal" -import { stickerState } from "../../atom/sticker" -import { useRecoilValue, useSetRecoilState } from "recoil" -import { useRouter } from "next/router" +import { stickerIsCircleState, stickerState } from "../../atom/sticker" +import { useSetRecoilState } from "recoil" +import Link from "next/link" -const Index: React.VFC<{}> = () => { - const router = useRouter() - const inputOnChange = () => {} +export type Sticker = { + src: string + isCircle: boolean +} +const Index: React.VFC<{}> = () => { const [image, setImage] = useState() const [index, setIndex] = useState(0) const [croppedImage, setCroppedImage] = useState() - const [imageList, setImageList] = useState>([]) + const [imageList, setImageList] = useState>([]) const [isOpen, setIsOpen] = useState(false) const setSticker = useSetRecoilState(stickerState) - const sticker = useRecoilValue(stickerState) + const setStickerIsCircle = useSetRecoilState(stickerIsCircleState) useEffect(() => { if (croppedImage != undefined) { @@ -45,11 +47,12 @@ const Index: React.VFC<{}> = () => { } } - const settlementOnClick = () => { - // TODO: FIXME - setSticker(imageList[index]) - router.push("/settlement") - } + useEffect(() => { + if (imageList.length > 0) { + setSticker(imageList[index].src) + setStickerIsCircle(imageList[index].isCircle) + } + }, [imageList, index]) return ( <> @@ -76,7 +79,12 @@ const Index: React.VFC<{}> = () => { }} >
- +
@@ -91,7 +99,12 @@ const Index: React.VFC<{}> = () => { }} >
- +
) @@ -125,14 +138,11 @@ const Index: React.VFC<{}> = () => { {/*end upload button*/} - -
- settlementOnClick()} - text={"決済へ進む"} - /> -
+ +
+ +
+ { return ( @@ -19,9 +20,11 @@ const Index: React.VFC = () => { 好きなデザインを作って応援できます

-
- {}} text="応援する" /> -
+ +
+ +
+
diff --git a/yarn.lock b/yarn.lock index 19d8eb4..c357f0e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -519,6 +519,14 @@ resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.8.tgz#098da479de9c5ac9c8ba97d113746b7dcd9c2204" integrity sha512-qU2QfnN7r8AU4mSd2W3XmRtR0d35R1PReIT9b5YzpNLX9S0OQgNBLrEEFyXpa9alq/9h6wYNIwPCVAsknF5uZw== +"@mrmlnc/readdir-enhanced@^2.2.1": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" + integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g== + dependencies: + call-me-maybe "^1.0.1" + glob-to-regexp "^0.3.0" + "@next/env@10.0.9": version "10.0.9" resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.9.tgz#455fd364c8a5ee012b2cd4406d5294164990706d" @@ -1810,6 +1818,11 @@ detective@^5.2.0: defined "^1.0.0" minimist "^1.1.1" +dialog-polyfill@^0.4.7: + version "0.4.10" + resolved "https://registry.yarnpkg.com/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz#c4ea68a0deed4abb59a6a2a025c548b278cd532e" + integrity sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw== + didyoumean@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" @@ -2254,6 +2267,11 @@ execa@^4.0.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + expand-brackets@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" @@ -2472,6 +2490,14 @@ firebase@^8.3.0: "@firebase/storage" "0.4.4" "@firebase/util" "0.4.0" +firebaseui@^4.1.0: + version "4.8.0" + resolved "https://registry.yarnpkg.com/firebaseui/-/firebaseui-4.8.0.tgz#74c10a30db17f2cbfe020c91b97d5e3c6e8efbbc" + integrity sha512-DG8CD+969JHMailhOm8nKo+eJlumIHex0TH18eJeTo0Q2KEt5m/b61S1ky4bavK/nGmLJBRECJytq09/pwhZ0A== + dependencies: + dialog-polyfill "^0.4.7" + material-design-lite "^1.2.0" + flat-cache@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11" @@ -3426,7 +3452,7 @@ long@^4.0.0: resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28" integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -3466,6 +3492,11 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +material-design-lite@^1.2.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/material-design-lite/-/material-design-lite-1.3.0.tgz#d004ce3fee99a1eeb74a78b8a325134a5f1171d3" + integrity sha1-0ATOP+6Zoe63Sni4oyUTSl8RcdM= + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" @@ -4300,7 +4331,7 @@ promise-polyfill@8.1.3: resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116" integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g== -prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4455,6 +4486,13 @@ react-fast-compare@^3.1.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-firebaseui@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/react-firebaseui/-/react-firebaseui-4.1.0.tgz#fbd8381432b53b58ce56ee86df81e2a6e40af7b6" + integrity sha512-Y5pAom+W6/R5xZeF4xdvYiP7tObo7GDGWra1Pf2td+FxhtXtGQXQTKdW5Rs4js5zIuN0A3fApZzO+3sa1MHl9Q== + dependencies: + firebaseui "^4.1.0" + react-helmet@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" @@ -4470,6 +4508,21 @@ react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.12.1: + version "3.12.1" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.12.1.tgz#38c33f70d81c33d02ff1ed115530443a3dc2afd3" + integrity sha512-WGuXn7Fq31PbFJwtWmOk+jFtGC7E9tJVbFX0lts8ZoS5EPi9+WWylUJWLKKVm3H4GlQ7ZxY7R6tLlbSIBQ5oZA== + dependencies: + exenv "^1.2.0" + prop-types "^15.5.10" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -4567,6 +4620,11 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +recoil@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.1.3.tgz#3926b29ece8748967a0ff6c10516aca436cf4ae8" + integrity sha512-/Rm7wN7jqCjhtFK1TgtK0V115SUXNu6d4QYvwxWNLydib0QChSmpB6U8CaHoRPS0MFWtAIsD/IFjpbfk/OYm7Q== + reduce-css-calc@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" @@ -5470,6 +5528,13 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7"