From ce3d04f12cfcd0f8e3d4c6621a28190fd499fc62 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sat, 25 Sep 2021 08:24:12 +1000 Subject: [PATCH 1/3] Only send customizer params when it's open --- .../src/components/Customizer/Customizer.tsx | 20 +++++++++++++------ app/web/src/helpers/hooks/useIdeState.ts | 19 +++++++++++++----- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index 733a444..6273cf2 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/app/web/src/components/Customizer/Customizer.tsx @@ -14,12 +14,20 @@ import { } from './customizerConverter' const Customizer = () => { - const [open, setOpen] = React.useState(false) const [shouldLiveUpdate, setShouldLiveUpdate] = React.useState(false) const { state, thunkDispatch } = useIdeContext() + const isOpen = state.isCustomizerOpen const customizerParams = state?.customizerParams const currentParameters = state?.currentParameters || {} const handleRender = useRender() + const toggleOpen = () => { + const newOpenState = !isOpen + thunkDispatch({type: 'setCustomizerOpenState', payload: newOpenState}) + if(!newOpenState) { + // render on close + setTimeout(() => handleRender()) + } + } const updateCustomizerParam = (paramName: string, paramValue: any) => { const payload = { @@ -33,20 +41,20 @@ const Customizer = () => { return (
-
Parameters
- {open && ( + {isOpen && ( <>
Auto Update
@@ -79,7 +87,7 @@ const Customizer = () => { )}
-
+
{customizerParams.map((param, index) => { const otherProps = { diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index f378e49..ee6d337 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -45,6 +45,7 @@ export interface State { } customizerParams: CadhubParams[] currentParameters?: RawCustomizerParams + isCustomizerOpen: boolean layout: any camera: { dist?: number @@ -83,6 +84,7 @@ export const initialState: State = { quality: 'low', }, customizerParams: [], + isCustomizerOpen: false, layout: initialLayout, camera: {}, viewerSize: { width: 0, height: 0 }, @@ -107,13 +109,15 @@ const reducer = (state: State, { type, payload }): State => { case 'updateCode': return { ...state, code: payload } case 'healthyRender': - const customizerParams: CadhubParams[] = payload.customizerParams || [] const currentParameters = {} + + const customizerParams: CadhubParams[] = payload.customizerParams || [] customizerParams.forEach((param) => { + currentParameters[param.name] = - typeof state?.currentParameters?.[param.name] !== 'undefined' - ? state?.currentParameters?.[param.name] - : param.initial + typeof state?.currentParameters?.[param.name] === 'undefined' || !state.isCustomizerOpen + ? param.initial + : state?.currentParameters?.[param.name] }) return { ...state, @@ -143,6 +147,11 @@ const reducer = (state: State, { type, payload }): State => { ...state, currentParameters: payload, } + case 'setCustomizerOpenState': + return { + ...state, + isCustomizerOpen: payload + } case 'setLayout': return { ...state, @@ -290,7 +299,7 @@ export const requestRender = ({ return renderFn({ code, settings: { - parameters, + parameters: state.isCustomizerOpen ? parameters : {}, camera, viewerSize, quality, -- 2.39.5 From fc88a6e87aa1308ba8bee0d10a905bd83acaa473 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Sun, 26 Sep 2021 08:20:18 +1000 Subject: [PATCH 2/3] Add customizer reset button and have two modes of customizer vs not depending of if the customizer is open. --- .../src/components/Customizer/Customizer.tsx | 23 +++++++++++++------ .../src/components/IdeWrapper/useRender.ts | 4 ++-- app/web/src/helpers/hooks/useIdeState.ts | 18 +++++++++++---- 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index 6273cf2..e9c771a 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/app/web/src/components/Customizer/Customizer.tsx @@ -22,11 +22,12 @@ const Customizer = () => { const handleRender = useRender() const toggleOpen = () => { const newOpenState = !isOpen - thunkDispatch({type: 'setCustomizerOpenState', payload: newOpenState}) - if(!newOpenState) { - // render on close - setTimeout(() => handleRender()) - } + thunkDispatch({ type: 'setCustomizerOpenState', payload: newOpenState }) + setTimeout(() => handleRender()) + } + const handleReset = () => { + thunkDispatch({ type: 'resetCustomizer' }) + setTimeout(() => handleRender(true)) } const updateCustomizerParam = (paramName: string, paramValue: any) => { @@ -74,11 +75,17 @@ const Customizer = () => { } inline-block w-4 h-4 transform bg-white rounded-full`} /> +
-
+
{customizerParams.map((param, index) => { const otherProps = { diff --git a/app/web/src/components/IdeWrapper/useRender.ts b/app/web/src/components/IdeWrapper/useRender.ts index 4ac6312..cec3da8 100644 --- a/app/web/src/components/IdeWrapper/useRender.ts +++ b/app/web/src/components/IdeWrapper/useRender.ts @@ -3,7 +3,7 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext' export const useRender = () => { const { state, thunkDispatch } = useIdeContext() - return () => { + return (disableParams = false) => { thunkDispatch((dispatch, getState) => { const state = getState() dispatch({ type: 'setLoading' }) @@ -13,7 +13,7 @@ export const useRender = () => { code: state.code, viewerSize: state.viewerSize, camera: state.camera, - parameters: state.currentParameters, + parameters: disableParams ? {} : state.currentParameters, }) }) localStorage.setItem(makeCodeStoreKey(state.ideType), state.code) diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index ee6d337..8746b3f 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -108,16 +108,24 @@ const reducer = (state: State, { type, payload }): State => { } case 'updateCode': return { ...state, code: payload } + case 'resetCustomizer': + const resetParameters = {} + state.customizerParams.forEach(({ name, initial }) => { + resetParameters[name] = initial + }) + return { + ...state, + currentParameters: resetParameters, + } case 'healthyRender': const currentParameters = {} const customizerParams: CadhubParams[] = payload.customizerParams || [] customizerParams.forEach((param) => { - currentParameters[param.name] = - typeof state?.currentParameters?.[param.name] === 'undefined' || !state.isCustomizerOpen - ? param.initial - : state?.currentParameters?.[param.name] + typeof state?.currentParameters?.[param.name] === 'undefined' + ? param.initial + : state?.currentParameters?.[param.name] }) return { ...state, @@ -150,7 +158,7 @@ const reducer = (state: State, { type, payload }): State => { case 'setCustomizerOpenState': return { ...state, - isCustomizerOpen: payload + isCustomizerOpen: payload, } case 'setLayout': return { -- 2.39.5 From d01e0fc3424ee8e916c2c6ba138e192583822e8e Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Tue, 28 Sep 2021 06:03:20 +1000 Subject: [PATCH 3/3] Remove re-render on customizer open/close in project profile --- app/web/src/components/Customizer/Customizer.tsx | 8 +++++--- app/web/src/components/EncodedUrl/helpers.ts | 9 +++++++-- app/web/src/components/ProjectProfile/ProjectProfile.tsx | 5 ++--- app/web/src/helpers/hooks/useIdeState.ts | 3 +++ 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index e9c771a..8ff5654 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/app/web/src/components/Customizer/Customizer.tsx @@ -21,9 +21,11 @@ const Customizer = () => { const currentParameters = state?.currentParameters || {} const handleRender = useRender() const toggleOpen = () => { - const newOpenState = !isOpen - thunkDispatch({ type: 'setCustomizerOpenState', payload: newOpenState }) - setTimeout(() => handleRender()) + thunkDispatch({ type: 'setCustomizerOpenState', payload: !isOpen }) + if (state.viewerContext === 'ide') { + // don't re-render on open/close in the project profile + setTimeout(() => handleRender()) + } } const handleReset = () => { thunkDispatch({ type: 'resetCustomizer' }) diff --git a/app/web/src/components/EncodedUrl/helpers.ts b/app/web/src/components/EncodedUrl/helpers.ts index e02eae8..88a6c93 100644 --- a/app/web/src/components/EncodedUrl/helpers.ts +++ b/app/web/src/components/EncodedUrl/helpers.ts @@ -5,6 +5,7 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext' import { useRender } from 'src/components/IdeWrapper/useRender' import { encode, decode } from 'src/helpers/compress' import { isBrowser } from '@redwoodjs/prerender/browserUtils' +import type { State } from 'src/helpers/hooks/useIdeState' const scriptKey = 'encoded_script' const scriptKeyV2 = 'encoded_script_v2' @@ -32,13 +33,17 @@ export function makeExternalUrl(resourceUrl: string): string { }#${fetchText}=${prepareDecodedUrl(resourceUrl)}` } -export function useIdeInit(cadPackage: string, code = '') { +export function useIdeInit( + cadPackage: State['ideType'], + code = '', + viewerContext: State['viewerContext'] = 'ide' +) { const { thunkDispatch } = useIdeContext() const handleRender = useRender() useEffect(() => { thunkDispatch({ type: 'initIde', - payload: { cadPackage, code }, + payload: { cadPackage, code, viewerContext }, }) if (code) { return diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx index 90e454b..75ad9d4 100644 --- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx +++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef, lazy, Suspense } from 'react' +import { useState, useEffect, useRef } from 'react' import { useAuth } from '@redwoodjs/auth' import { Link, navigate, routes } from '@redwoodjs/router' import Editor from 'rich-markdown-editor' @@ -15,7 +15,6 @@ import CadPackage from 'src/components/CadPackage/CadPackage' import Gravatar from 'src/components/Gravatar/Gravatar' import { useIdeInit } from 'src/components/EncodedUrl/helpers' import ProfileViewer from '../ProfileViewer/ProfileViewer' -import Svg from 'src/components/Svg/Svg' import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage' import KeyValue from 'src/components/KeyValue/KeyValue' @@ -51,7 +50,7 @@ const ProjectProfile = ({ }) ) }, [currentUser]) - useIdeInit(project?.cadPackage, project?.code) + useIdeInit(project?.cadPackage, project?.code, 'viewer') const [newDescription, setNewDescription] = useState(project?.description) const onDescriptionChange = (description) => setNewDescription(description()) const onEditSaveClick = () => { diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index 8746b3f..f08455e 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -33,6 +33,7 @@ interface EditorModel { export interface State { ideType: 'INIT' | CadPackageType + viewerContext: 'ide' | 'viewer' ideGuide?: string consoleMessages: { type: 'message' | 'error'; message: string; time: Date }[] code: string @@ -72,6 +73,7 @@ const initialLayout = { export const initialState: State = { ideType: 'INIT', + viewerContext: 'ide', consoleMessages: [ { type: 'message', message: 'Initialising', time: new Date() }, ], @@ -105,6 +107,7 @@ const reducer = (state: State, { type, payload }): State => { '', ideType: payload.cadPackage, ideGuide: initGuideMap[payload.cadPackage], + viewerContext: payload.viewerContext, } case 'updateCode': return { ...state, code: payload } -- 2.39.5