diff --git a/package-lock.json b/package-lock.json index bd2247f..c92c2ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "postcss-preset-env": "^7.3.2", "prisma": "^3.11.1", "query-string": "^7.1.1", + "re-resizable": "^6.9.9", "react": "^17.0.2", "react-component-export-image": "^1.0.6", "react-compound-slider": "^3.3.1", @@ -37219,6 +37220,15 @@ "rc": "cli.js" } }, + "node_modules/re-resizable": { + "version": "6.9.9", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz", + "integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==", + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -67696,6 +67706,12 @@ "strip-json-comments": "~2.0.1" } }, + "re-resizable": { + "version": "6.9.9", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.9.tgz", + "integrity": "sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==", + "requires": {} + }, "react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", diff --git a/package.json b/package.json index 80e9ced..adb6c02 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "postcss-preset-env": "^7.3.2", "prisma": "^3.11.1", "query-string": "^7.1.1", + "re-resizable": "^6.9.9", "react": "^17.0.2", "react-component-export-image": "^1.0.6", "react-compound-slider": "^3.3.1", diff --git a/src/web/questions/components/CaptureQuestion.tsx b/src/web/questions/components/CaptureQuestion.tsx index c33cfe6..8167322 100644 --- a/src/web/questions/components/CaptureQuestion.tsx +++ b/src/web/questions/components/CaptureQuestion.tsx @@ -1,4 +1,5 @@ import domtoimage from "dom-to-image"; // https://github.com/tsayen/dom-to-image +import { Resizable } from "re-resizable"; import { useEffect, useRef, useState } from "react"; import { Button } from "../../common/Button"; @@ -118,35 +119,44 @@ export const CaptureQuestion: React.FC = ({ question }) => { await exportAsPictureAndCode(); }; - return ( -
-
- + if (imgSrc) { + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+ ); + } + + return ( +
+ +
+ +
+
- {imgSrc ? ( - <> -
- -
-
- -
-
- -
-
- -
- - ) : null}
); }; diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx index 25b5efd..6b08379 100644 --- a/src/web/questions/pages/QuestionPage.tsx +++ b/src/web/questions/pages/QuestionPage.tsx @@ -83,6 +83,7 @@ const LargeQuestionCard: React.FC<{ ); }; + const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({ question, }) => ( @@ -93,6 +94,8 @@ const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({

Capture

+
+

Embed