From 914a81bca31219719c8bd28cdb0dacf5bde7f226 Mon Sep 17 00:00:00 2001 From: Krishav Date: Sat, 23 Dec 2023 22:54:25 +0530 Subject: [PATCH 1/4] added preview for sketches --- client/modules/IDE/components/SketchList.jsx | 30 ++++++- .../User/components/ExamplePreview.jsx | 83 +++++++++++++++++++ 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 client/modules/User/components/ExamplePreview.jsx diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 85d3030d61..621063ba65 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -24,6 +24,7 @@ import getConfig from '../../../utils/getConfig'; import ArrowUpIcon from '../../../images/sort-arrow-up.svg'; import ArrowDownIcon from '../../../images/sort-arrow-down.svg'; +import ExamplePreview from '../../User/components/ExamplePreview'; const ROOT_URL = getConfig('API_URL'); @@ -35,7 +36,8 @@ class SketchListRowBase extends React.Component { super(props); this.state = { renameOpen: false, - renameValue: props.sketch.name + renameValue: props.sketch.name, + preview: false }; this.renameInput = React.createRef(); } @@ -144,6 +146,22 @@ class SketchListRowBase extends React.Component { > {this.props.t('SketchList.DropdownAddToCollection')} + { + this.setState({ + preview: !this.state.preview + }); + console.log( + `/${this.props.username}/sketches/${slugify( + this.props.sketch.name, + '_' + )}` + ); + }} + > + Preview + {/* @@ -194,6 +212,16 @@ class SketchListRowBase extends React.Component { {formatDateCell(sketch.updatedAt, mobile)} {this.renderDropdown()} + {this.state.preview ? ( + + ) : ( +
loading
+ )} ); } diff --git a/client/modules/User/components/ExamplePreview.jsx b/client/modules/User/components/ExamplePreview.jsx new file mode 100644 index 0000000000..e4cbfbbfec --- /dev/null +++ b/client/modules/User/components/ExamplePreview.jsx @@ -0,0 +1,83 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { PropTypes } from 'prop-types'; +import axios from 'axios'; +import { createGlobalStyle } from 'styled-components'; +import getConfig from '../../../utils/getConfig'; +import EmbedFrame from '../../Preview/EmbedFrame'; +import { registerFrame } from '../../../utils/dispatcher'; + +const GlobalStyle = createGlobalStyle` + body { + margin: 0; + } +`; + +function ExamplePreview({ url }) { + const [sketch, setSketch] = useState(null); + registerFrame(window.parent, getConfig('EDITOR_URL')); + + useEffect(() => { + async function getRandomProject() { + // Find example projects + const response = await axios.get(url); + const projects = response.data; + if (!projects) return null; + setSketch(projects); + console.log('sketch', sketch); + return projects; + } + getRandomProject(); + }, [url]); + + const files = useMemo(() => { + const instanceMode = (sketch?.files || []) + .find((file) => file.name === 'sketch.js') + ?.content?.includes('Instance Mode'); + + return (sketch?.files || []).map((file) => ({ + ...file, + content: file.content + // Fix links to assets + .replace( + /'assets/g, + "'https://github.com/processing/p5.js-website/raw/main/src/data/examples/assets" + ) + .replace( + /"assets/g, + '"https://github.com/processing/p5.js-website/raw/main/src/data/examples/assets' + ) + // Change canvas size + .replace( + /createCanvas\(\d+, ?\d+/g, + instanceMode + ? 'createCanvas(p.windowWidth, p.windowHeight' + : 'createCanvas(windowWidth, windowHeight' + ) + })); + }, [sketch]); + console.log(files, 'files'); + return ( + + {files.length > 0 ? ( +
+ + +
+ ) : ( +
loading
+ )} + + ); +} + +ExamplePreview.propTypes = { + url: PropTypes.string.isRequired +}; + +export default ExamplePreview; From 595540cf249f2cfadd7f08d4328625291538628f Mon Sep 17 00:00:00 2001 From: Linda Paiste Date: Thu, 28 Dec 2023 14:56:36 -0600 Subject: [PATCH 2/4] Fixed some issues re: asset and file loading. --- client/modules/IDE/components/SketchList.jsx | 22 ++--- .../User/components/ExamplePreview.jsx | 84 ++++++------------- 2 files changed, 32 insertions(+), 74 deletions(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 621063ba65..8f1a919d92 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -147,17 +147,10 @@ class SketchListRowBase extends React.Component { {this.props.t('SketchList.DropdownAddToCollection')} { this.setState({ preview: !this.state.preview }); - console.log( - `/${this.props.username}/sketches/${slugify( - this.props.sketch.name, - '_' - )}` - ); }} > Preview @@ -212,15 +205,12 @@ class SketchListRowBase extends React.Component { {formatDateCell(sketch.updatedAt, mobile)} {this.renderDropdown()} - {this.state.preview ? ( - - ) : ( -
loading
+ {this.state.preview && ( + + + + + )} ); diff --git a/client/modules/User/components/ExamplePreview.jsx b/client/modules/User/components/ExamplePreview.jsx index e4cbfbbfec..1551f5937e 100644 --- a/client/modules/User/components/ExamplePreview.jsx +++ b/client/modules/User/components/ExamplePreview.jsx @@ -1,69 +1,30 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { PropTypes } from 'prop-types'; -import axios from 'axios'; -import { createGlobalStyle } from 'styled-components'; -import getConfig from '../../../utils/getConfig'; +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; import EmbedFrame from '../../Preview/EmbedFrame'; -import { registerFrame } from '../../../utils/dispatcher'; -const GlobalStyle = createGlobalStyle` - body { - margin: 0; - } -`; - -function ExamplePreview({ url }) { - const [sketch, setSketch] = useState(null); - registerFrame(window.parent, getConfig('EDITOR_URL')); - - useEffect(() => { - async function getRandomProject() { - // Find example projects - const response = await axios.get(url); - const projects = response.data; - if (!projects) return null; - setSketch(projects); - console.log('sketch', sketch); - return projects; - } - getRandomProject(); - }, [url]); +function ExamplePreview({ sketch }) { + const sketchHeight = useMemo(() => { + const jsFile = (sketch?.files || []).find( + (file) => file.name === 'sketch.js' + ); + return jsFile?.content?.match(/createCanvas\(\d+, ?(\d+)/)[1]; + }, [sketch]); - const files = useMemo(() => { - const instanceMode = (sketch?.files || []) - .find((file) => file.name === 'sketch.js') - ?.content?.includes('Instance Mode'); + const { files = [] } = sketch; - return (sketch?.files || []).map((file) => ({ - ...file, - content: file.content - // Fix links to assets - .replace( - /'assets/g, - "'https://github.com/processing/p5.js-website/raw/main/src/data/examples/assets" - ) - .replace( - /"assets/g, - '"https://github.com/processing/p5.js-website/raw/main/src/data/examples/assets' - ) - // Change canvas size - .replace( - /createCanvas\(\d+, ?\d+/g, - instanceMode - ? 'createCanvas(p.windowWidth, p.windowHeight' - : 'createCanvas(windowWidth, windowHeight' - ) - })); - }, [sketch]); - console.log(files, 'files'); return ( {files.length > 0 ? ( -
- +
Date: Thu, 11 Jan 2024 18:24:26 +0530 Subject: [PATCH 3/4] addedd X icon --- client/modules/IDE/components/SketchList.jsx | 20 +------ .../User/components/ExamplePreview.jsx | 59 +++++++++++++------ 2 files changed, 42 insertions(+), 37 deletions(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 9019837c9c..2237227766 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -24,7 +24,6 @@ import getConfig from '../../../utils/getConfig'; import ArrowUpIcon from '../../../images/sort-arrow-up.svg'; import ArrowDownIcon from '../../../images/sort-arrow-down.svg'; -import ExamplePreview from '../../User/components/ExamplePreview'; const ROOT_URL = getConfig('API_URL'); @@ -36,8 +35,7 @@ class SketchListRowBase extends React.Component { super(props); this.state = { renameOpen: false, - renameValue: props.sketch.name, - preview: false + renameValue: props.sketch.name }; this.renameInput = React.createRef(); } @@ -146,15 +144,6 @@ class SketchListRowBase extends React.Component { > {this.props.t('SketchList.DropdownAddToCollection')} - { - this.setState({ - preview: !this.state.preview - }); - }} - > - Preview - {/* @@ -205,13 +194,6 @@ class SketchListRowBase extends React.Component { {formatDateCell(sketch.updatedAt, mobile)} {this.renderDropdown()} - {this.state.preview && ( - - - - - - )} ); } diff --git a/client/modules/User/components/ExamplePreview.jsx b/client/modules/User/components/ExamplePreview.jsx index 1551f5937e..9bb6da3231 100644 --- a/client/modules/User/components/ExamplePreview.jsx +++ b/client/modules/User/components/ExamplePreview.jsx @@ -1,8 +1,9 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import PropTypes from 'prop-types'; import EmbedFrame from '../../Preview/EmbedFrame'; -function ExamplePreview({ sketch }) { +function ExamplePreview({ sketch, setSketch }) { + const [hover, setHover] = useState(false); const sketchHeight = useMemo(() => { const jsFile = (sketch?.files || []).find( (file) => file.name === 'sketch.js' @@ -15,21 +16,42 @@ function ExamplePreview({ sketch }) { return ( {files.length > 0 ? ( -
- -
+ <> + +
+ +
+ ) : (
loading
)} @@ -45,7 +67,8 @@ ExamplePreview.propTypes = { content: PropTypes.string }) ) - }).isRequired + }).isRequired, + setSketch: PropTypes.func.isRequired }; export default ExamplePreview; From ecc8733d7e1ec8f81928e468bf104c36db5cc0a4 Mon Sep 17 00:00:00 2001 From: Krishav Date: Thu, 11 Jan 2024 19:30:27 +0530 Subject: [PATCH 4/4] re-changed Sketchlist --- client/modules/IDE/components/SketchList.jsx | 25 +++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 2237227766..e9666fae4a 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -24,6 +24,7 @@ import getConfig from '../../../utils/getConfig'; import ArrowUpIcon from '../../../images/sort-arrow-up.svg'; import ArrowDownIcon from '../../../images/sort-arrow-down.svg'; +import ExamplePreview from '../../User/components/ExamplePreview'; const ROOT_URL = getConfig('API_URL'); @@ -35,7 +36,8 @@ class SketchListRowBase extends React.Component { super(props); this.state = { renameOpen: false, - renameValue: props.sketch.name + renameValue: props.sketch.name, + preview: false }; this.renameInput = React.createRef(); } @@ -144,6 +146,15 @@ class SketchListRowBase extends React.Component { > {this.props.t('SketchList.DropdownAddToCollection')} + { + this.setState({ + preview: !this.state.preview + }); + }} + > + Preview + {/* @@ -194,6 +205,18 @@ class SketchListRowBase extends React.Component { {formatDateCell(sketch.updatedAt, mobile)} {this.renderDropdown()} + {this.state.preview && ( + + + + this.setState({ preview: !this.state.preview }) + } + sketch={this.props.sketch} + /> + + + )} ); }