diff --git a/app/web/src/components/EditorMenu/EditorMenu.tsx b/app/web/src/components/EditorMenu/EditorMenu.tsx index 44a6240..cfcb1e6 100644 --- a/app/web/src/components/EditorMenu/EditorMenu.tsx +++ b/app/web/src/components/EditorMenu/EditorMenu.tsx @@ -3,7 +3,7 @@ import { Menu } from '@headlessui/react' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' import Svg from 'src/components/Svg/Svg' import { useRender } from 'src/components/IdeWrapper/useRender' -import {makeStlDownloadHandler, PullTitleFromFirstLine} from './helpers' +import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers' const EditorMenu = () => { const handleRender = useRender() @@ -17,16 +17,16 @@ const EditorMenu = () => { return (
- +
-
+
{ export default EditorMenu -function FileDropdown({handleRender, handleStlDownload}) { +function FileDropdown({ handleRender, handleStlDownload }) { return ( File @@ -56,11 +56,20 @@ function FileDropdown({handleRender, handleStlDownload}) { className={`${active && 'bg-gray-600'} px-2 py-1`} onClick={handleRender} > - Save & Render { - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? - <>S : - 'Ctrl S' - } + Save & Render{' '} + + {/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? ( + <> + + S + + ) : ( + 'Ctrl S' + )} + )} diff --git a/app/web/src/components/EditorMenu/helpers.ts b/app/web/src/components/EditorMenu/helpers.ts index 2ea84e8..41bc93c 100644 --- a/app/web/src/components/EditorMenu/helpers.ts +++ b/app/web/src/components/EditorMenu/helpers.ts @@ -4,7 +4,7 @@ import { MeshBasicMaterial, Mesh, Scene } from 'three' import { STLExporter } from 'three/examples/jsm/exporters/STLExporter' import { requestRender } from 'src/helpers/hooks/useIdeState' -export const PullTitleFromFirstLine = (code: string = '') => { +export const PullTitleFromFirstLine = (code = '') => { const firstLine = code.split('\n').filter(identity)[0] || '' if (!(firstLine.startsWith('//') || firstLine.startsWith('#'))) { return 'object.stl' @@ -16,44 +16,46 @@ export const PullTitleFromFirstLine = (code: string = '') => { ) } -export const makeStlDownloadHandler = (({ geometry, fileName, type, thunkDispatch}) => () => { - const makeStlBlobFromGeo = flow( - (geo) => new Mesh(geo, new MeshBasicMaterial()), - (mesh) => new Scene().add(mesh), - (scene) => new STLExporter().parse(scene), - (stl) => - new Blob([stl], { - type: 'text/plain', - }) - ) - const saveFile = (geometry) => { - const blob = makeStlBlobFromGeo(geometry) - fileSave(blob, { - fileName, - extensions: ['.stl'], - }) - } - if (geometry) { - if (type === 'geometry') { - saveFile(geometry) - } else { - thunkDispatch((dispatch, getState) => { - const state = getState() - if (state.ideType === 'openScad') { - thunkDispatch((dispatch, getState) => { - const state = getState() - dispatch({ type: 'setLoading' }) - requestRender({ - state, - dispatch, - code: state.code, - viewerSize: state.viewerSize, - camera: state.camera, - specialCadProcess: 'stl', - }).then((result) => result && saveFile(result.data)) - }) - } +export const makeStlDownloadHandler = + ({ geometry, fileName, type, thunkDispatch }) => + () => { + const makeStlBlobFromGeo = flow( + (geo) => new Mesh(geo, new MeshBasicMaterial()), + (mesh) => new Scene().add(mesh), + (scene) => new STLExporter().parse(scene), + (stl) => + new Blob([stl], { + type: 'text/plain', + }) + ) + const saveFile = (geometry) => { + const blob = makeStlBlobFromGeo(geometry) + fileSave(blob, { + fileName, + extensions: ['.stl'], }) } + if (geometry) { + if (type === 'geometry') { + saveFile(geometry) + } else { + thunkDispatch((dispatch, getState) => { + const state = getState() + if (state.ideType === 'openScad') { + thunkDispatch((dispatch, getState) => { + const state = getState() + dispatch({ type: 'setLoading' }) + requestRender({ + state, + dispatch, + code: state.code, + viewerSize: state.viewerSize, + camera: state.camera, + specialCadProcess: 'stl', + }).then((result) => result && saveFile(result.data)) + }) + } + }) + } + } } -}) diff --git a/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx b/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx index 687f20b..e4c7eda 100644 --- a/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx +++ b/app/web/src/components/EncodedUrl/FullScriptEncoding.tsx @@ -2,15 +2,25 @@ import { makeEncodedLink } from './helpers' import { copyTextToClipboard } from 'src/helpers/clipboard' import { useIdeContext } from 'src/helpers/hooks/useIdeContext' - const FullScriptEncoding = () => { const { state } = useIdeContext() const encodedLink = makeEncodedLink(state.code) return ( <> -

Encodes your CodeCad script into a URL so that you can share your work

- - +

+ Encodes your CodeCad script into a URL so that you can share your work +

+ + ) } diff --git a/app/web/src/components/EncodedUrl/helpers.ts b/app/web/src/components/EncodedUrl/helpers.ts index 4bdbb7e..e94fd4c 100644 --- a/app/web/src/components/EncodedUrl/helpers.ts +++ b/app/web/src/components/EncodedUrl/helpers.ts @@ -1,9 +1,9 @@ import { useEffect } from 'react' import { flow } from 'lodash/fp' -import {useIdeContext} from 'src/helpers/hooks/useIdeContext' +import { useIdeContext } from 'src/helpers/hooks/useIdeContext' import { useRender } from 'src/components/IdeWrapper/useRender' -import {encode, decode} from 'src/helpers/compress' +import { encode, decode } from 'src/helpers/compress' import { isBrowser } from '@redwoodjs/prerender/browserUtils' const scriptKey = 'encoded_script' @@ -25,7 +25,7 @@ export const githubSafe = (url: string): string => const prepareEncodedUrl = flow(decodeURIComponent, githubSafe) export function useIdeInit(cadPackage: string) { - const {thunkDispatch} = useIdeContext() + const { thunkDispatch } = useIdeContext() const handleRender = useRender() useEffect(() => { thunkDispatch({ diff --git a/app/web/src/components/IdeConsole/IdeConsole.js b/app/web/src/components/IdeConsole/IdeConsole.js index 2ae335e..fb3b205 100644 --- a/app/web/src/components/IdeConsole/IdeConsole.js +++ b/app/web/src/components/IdeConsole/IdeConsole.js @@ -13,28 +13,31 @@ const IdeConsole = () => { }, [state.consoleMessages]) return ( -
- -
- {state.consoleMessages?.map(({ type, message, time }, index) => ( - 
+      
+      

+        {state.consoleMessages?.map(({ type, message, time }, index) => (
+          
+            

-              

-                {time?.toLocaleString()}
-              

-              

-                {message}
-              

-            

-          ))}
-        

+              {time?.toLocaleString()}
+
+
+ {message} +
+ + ))}
+
) } diff --git a/app/web/src/components/IdeContainer/IdeContainer.js b/app/web/src/components/IdeContainer/IdeContainer.js index 6e90ef6..4eafe2d 100644 --- a/app/web/src/components/IdeContainer/IdeContainer.js +++ b/app/web/src/components/IdeContainer/IdeContainer.js @@ -65,7 +65,15 @@ const IdeContainer = () => { return ( id === 'Editor' ?
:
} // needs an empty element, otherwise it adds it's own toolbar + renderToolbar={() => + id === 'Editor' ? ( +
+ +
+ ) : ( +
// needs an empty element, otherwise it adds it's own toolbar + ) + } className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`} > {id === 'Viewer' ? ( diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx index 1f224db..68fee3c 100644 --- a/app/web/src/components/IdeHeader/IdeHeader.tsx +++ b/app/web/src/components/IdeHeader/IdeHeader.tsx @@ -1,62 +1,70 @@ import { Popover } from '@headlessui/react' -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs' import FullScriptEncoding from 'src/components/EncodedUrl/FullScriptEncoding' const TopButton = ({ - onClick, - children, - className, - iconColor, - }: { - onClick?: () => void - children: React.ReactNode - className?: string - iconColor: string - }) => ( - ) -const IdeHeader = ({handleRender}: {handleRender: () => void}) => { +const IdeHeader = ({ handleRender }: { handleRender: () => void }) => { return (
-
-
+
Render + > + Render + - {({open}) => { + {({ open }) => { return ( <> - Share + + Share + - {open && - - - - - -

blah

- console.log(e)} /> - + {open && ( + + + + + + +

blah

+ console.log(e)} /> + - - encoded script - external script - - - } + + encoded script + external script + + + + )} ) }} diff --git a/app/web/src/components/IdeSideBar/IdeSideBar.tsx b/app/web/src/components/IdeSideBar/IdeSideBar.tsx index 4f6621d..f887a68 100644 --- a/app/web/src/components/IdeSideBar/IdeSideBar.tsx +++ b/app/web/src/components/IdeSideBar/IdeSideBar.tsx @@ -5,11 +5,15 @@ const IdeSideBar = () => { return (
- - - -
-
+
diff --git a/app/web/src/components/IdeWrapper/IdeWrapper.tsx b/app/web/src/components/IdeWrapper/IdeWrapper.tsx index 33d0d97..f81763c 100644 --- a/app/web/src/components/IdeWrapper/IdeWrapper.tsx +++ b/app/web/src/components/IdeWrapper/IdeWrapper.tsx @@ -8,7 +8,8 @@ import Svg from 'src/components/Svg/Svg' import { useIdeInit } from 'src/components/EncodedUrl/helpers' const IdeToolbarNew = ({ cadPackage }) => { - const [shouldShowConstructionMessage, setShouldShowConstructionMessage] = useState(true) + const [shouldShowConstructionMessage, setShouldShowConstructionMessage] = + useState(true) const handleRender = useRender() useIdeInit(cadPackage) @@ -21,21 +22,29 @@ const IdeToolbarNew = ({ cadPackage }) => { - {shouldShowConstructionMessage &&
-
- We're still working on this. Since you're here, have a look what{' '} - +
+ We're still working on this. Since you're here, have a look what{' '} + + we've got planned + + . +
+
- -
} + )}
diff --git a/app/web/src/components/IdeWrapper/useRender.ts b/app/web/src/components/IdeWrapper/useRender.ts index 9096cf9..86ae5a4 100644 --- a/app/web/src/components/IdeWrapper/useRender.ts +++ b/app/web/src/components/IdeWrapper/useRender.ts @@ -19,4 +19,3 @@ export const useRender = () => { localStorage.setItem(makeCodeStoreKey(state.ideType), state.code) } } - diff --git a/app/web/src/components/PanelToolbar/PanelToolbar.tsx b/app/web/src/components/PanelToolbar/PanelToolbar.tsx index 446e53e..62d1d22 100644 --- a/app/web/src/components/PanelToolbar/PanelToolbar.tsx +++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx @@ -2,17 +2,21 @@ import { useContext } from 'react' import { MosaicWindowContext } from 'react-mosaic-component' import Svg from 'src/components/Svg/Svg' -const PanelToolbar = ({ panelName }: { panelName : string }) => { - const {mosaicWindowActions} = useContext(MosaicWindowContext) +const PanelToolbar = ({ panelName }: { panelName: string }) => { + const { mosaicWindowActions } = useContext(MosaicWindowContext) return (
{mosaicWindowActions.connectDragSource(
- +
)} -
) diff --git a/app/web/src/components/Svg/Svg.tsx b/app/web/src/components/Svg/Svg.tsx index 8a8de7b..c45838a 100644 --- a/app/web/src/components/Svg/Svg.tsx +++ b/app/web/src/components/Svg/Svg.tsx @@ -1,35 +1,40 @@ -type SvgNames = 'arrow-down' | - 'arrow' | - 'arrow-left' | - 'big-gear' | - 'camera' | - 'checkmark' | - 'chevron-down' | - 'dots-vertical' | - 'drag-grid' | - 'exclamation-circle' | - 'favicon' | - 'flag' | - 'fork' | - 'gear' | - 'lightbulb' | - 'logout' | - 'mac-cmd-key' | - 'pencil' | - 'plus' | - 'plus-circle' | - 'refresh' | - 'save' | - 'terminal' | - 'trash' | - 'x' +type SvgNames = + | 'arrow-down' + | 'arrow' + | 'arrow-left' + | 'big-gear' + | 'camera' + | 'checkmark' + | 'chevron-down' + | 'dots-vertical' + | 'drag-grid' + | 'exclamation-circle' + | 'favicon' + | 'flag' + | 'fork' + | 'gear' + | 'lightbulb' + | 'logout' + | 'mac-cmd-key' + | 'pencil' + | 'plus' + | 'plus-circle' + | 'refresh' + | 'save' + | 'terminal' + | 'trash' + | 'x' -const Svg = ({ name, className: className2 = '', strokeWidth = 2 }: { +const Svg = ({ + name, + className: className2 = '', + strokeWidth = 2, +}: { name: SvgNames className?: string strokeWidth?: number }) => { - const svgs: {[name in SvgNames]: React.ReactElement} = { + const svgs: { [name in SvgNames]: React.ReactElement } = { 'arrow-down': ( ), - 'camera': ( - + camera: ( + - + strokeLinecap="round" + /> + + strokeLinecap="round" + /> + + ), + checkmark: ( + + ), - 'checkmark': ( - - - ), 'chevron-down': ( ), 'mac-cmd-key': ( - - < - path + + @@ -382,15 +376,13 @@ const Svg = ({ name, className: className2 = '', strokeWidth = 2 }: { ), refresh: ( - + + strokeLinecap="round" + /> ), save: ( diff --git a/app/web/src/helpers/clipboard.tsx b/app/web/src/helpers/clipboard.tsx index 5b2fc42..7a8d174 100644 --- a/app/web/src/helpers/clipboard.tsx +++ b/app/web/src/helpers/clipboard.tsx @@ -1,7 +1,7 @@ import { toast } from '@redwoodjs/web/toast' function fallbackCopyTextToClipboard(text: string) { - var textArea = document.createElement('textarea') + const textArea = document.createElement('textarea') textArea.value = text // Avoid scrolling to bottom @@ -14,8 +14,8 @@ function fallbackCopyTextToClipboard(text: string) { textArea.select() try { - var successful = document.execCommand('copy') - var msg = successful ? 'successful' : 'unsuccessful' + const successful = document.execCommand('copy') + const msg = successful ? 'successful' : 'unsuccessful' console.log('Fallback: Copying text command was ' + msg) } catch (err) { console.error('Fallback: Oops, unable to copy', err) @@ -24,11 +24,12 @@ function fallbackCopyTextToClipboard(text: string) { document.body.removeChild(textArea) } -const clipboardSuccessToast = (text: string) => toast.success(() => ( -
-

link added to clipboard.

-
-)) +const clipboardSuccessToast = (text: string) => + toast.success(() => ( +
+

link added to clipboard.

+
+ )) const makeClipboardCopier = (success: Function) => (text: string) => { if (!navigator.clipboard) {