From aa861859dac64971cb6957e640cb822a8f977c04 Mon Sep 17 00:00:00 2001 From: Conor Date: Mon, 15 Aug 2022 12:35:04 +0100 Subject: [PATCH 1/3] change default tab to visual --- src/components/Editor/Runners/PythonRunner/PythonRunner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.js index a2f433f55..f3154850d 100644 --- a/src/components/Editor/Runners/PythonRunner/PythonRunner.js +++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.js @@ -292,7 +292,7 @@ const PythonRunner = () => { return (
- + Visual Output Text Output From 7efae7bf07c400290fafd553067bd0c4bac50d84 Mon Sep 17 00:00:00 2001 From: Conor Date: Mon, 15 Aug 2022 16:42:54 +0100 Subject: [PATCH 2/3] add visual output option --- docs/WebComponent.md | 7 +++++-- src/components/Editor/Runners/PythonRunner/PythonRunner.js | 3 ++- .../WebComponent/WebComponentLoader/WebComponentLoader.js | 4 ++-- src/web-component.html | 2 +- src/web-component.js | 2 +- 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/docs/WebComponent.md b/docs/WebComponent.md index 6f12eb251..6186ff612 100644 --- a/docs/WebComponent.md +++ b/docs/WebComponent.md @@ -20,9 +20,12 @@ The `set menuItems(newValue)` method shows how data could be set dynamically fro The `mountReactApp()` method creates a dom element attaches a shadow dom to it and then mounts the React application in it. -The `static get observedAttributes()` method returns an array of attributes that are allowed to be set on the web component. At present it returns `['code']` meaning you can add the code attribute: +The `static get observedAttributes()` method returns an array of attributes that are allowed to be set on the web component. At present it returns `['code', 'visualOutput]` meaning you can add these attributes: -`` +`` + +* `code` is the prepopulated code +* `visualOutput` if truthy will show the visual output tab, else it'll show the text output tab Any other attributes set will not be available in the component and would need to be added to the observedAttributes to make them so. diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.js index f3154850d..5aad600a5 100644 --- a/src/components/Editor/Runners/PythonRunner/PythonRunner.js +++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.js @@ -12,6 +12,7 @@ import AstroPiModel from '../../../AstroPiModel/AstroPiModel'; const PythonRunner = () => { const projectCode = useSelector((state) => state.editor.project.components); + const visualOutput = useSelector((state) => state.editor.project.components[0].visualoutput ? 0 : 1); const projectImages = useSelector((state) => state.editor.project.image_list); const codeRunTriggered = useSelector((state) => state.editor.codeRunTriggered); const codeRunStopped = useSelector((state) => state.editor.codeRunStopped); @@ -292,7 +293,7 @@ const PythonRunner = () => { return (
- + Visual Output Text Output diff --git a/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js b/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js index ea0dc3039..6d5f3d7e5 100644 --- a/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js +++ b/src/components/WebComponent/WebComponentLoader/WebComponentLoader.js @@ -5,13 +5,13 @@ import WebComponentProject from '../Project/WebComponentProject'; const ProjectComponentLoader = (props) => { const projectLoaded = useSelector((state) => state.editor.projectLoaded); - const { code } = props; + const { code, visualoutput } = props; const dispatch = useDispatch() useEffect(() => { const proj = { type: 'python', - components: [{ name: 'main', extension: 'py', content: code }] + components: [{ name: 'main', extension: 'py', content: code, visualoutput: visualoutput}] } dispatch(setProject(proj)) dispatch(setProjectLoaded(true)) diff --git a/src/web-component.html b/src/web-component.html index 84a41f024..050f36dff 100644 --- a/src/web-component.html +++ b/src/web-component.html @@ -6,7 +6,7 @@ Editor Web component - +

diff --git a/src/web-component.js b/src/web-component.js index 3fa91a49d..281d9a03c 100644 --- a/src/web-component.js +++ b/src/web-component.js @@ -20,7 +20,7 @@ class WebComponent extends HTMLElement { } static get observedAttributes() { - return ['code']; + return ['code', 'visualoutput']; } attributeChangedCallback(name, _oldVal, newVal) { From 6ba578b18c285f754da7187c59adb8ad0fe2db17 Mon Sep 17 00:00:00 2001 From: Conor Date: Mon, 15 Aug 2022 16:54:58 +0100 Subject: [PATCH 3/3] move to variable --- src/components/Editor/Runners/PythonRunner/PythonRunner.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.js index 5aad600a5..c86159e7f 100644 --- a/src/components/Editor/Runners/PythonRunner/PythonRunner.js +++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.js @@ -12,7 +12,6 @@ import AstroPiModel from '../../../AstroPiModel/AstroPiModel'; const PythonRunner = () => { const projectCode = useSelector((state) => state.editor.project.components); - const visualOutput = useSelector((state) => state.editor.project.components[0].visualoutput ? 0 : 1); const projectImages = useSelector((state) => state.editor.project.image_list); const codeRunTriggered = useSelector((state) => state.editor.codeRunTriggered); const codeRunStopped = useSelector((state) => state.editor.codeRunStopped); @@ -291,9 +290,11 @@ const PythonRunner = () => { } } + let tabIndex = projectCode[0] && projectCode[0].visualoutput ? 0 : 1; + return (
- + Visual Output Text Output