-
-
-
{}}
projectOwner={user?.userName}
diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts
index 8945841..0e64da2 100644
--- a/app/web/src/helpers/hooks/useIdeState.ts
+++ b/app/web/src/helpers/hooks/useIdeState.ts
@@ -115,6 +115,7 @@ export interface State {
viewerSize: { width: number; height: number }
isLoading: boolean
threeInstance: RootState
+ sideTray: string[] // could probably be an array of a union type
}
const code = ''
@@ -146,103 +147,133 @@ export const initialState: State = {
viewerSize: { width: 0, height: 0 },
isLoading: false,
threeInstance: null,
+ sideTray: [],
}
-export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
- const reducer = (state: State, { type, payload }): State => {
- switch (type) {
- case 'initIde':
- return {
- ...state,
- code:
- payload.code ||
- // localStorage.getItem(makeCodeStoreKey(payload.cadPackage)) ||
- initCodeMap[payload.cadPackage] ||
- '',
- ideType: payload.cadPackage,
- }
- case 'updateCode':
- return { ...state, code: payload }
- case 'healthyRender':
- const customizerParams: CadhubParams[] = payload?.customizerParams
- ?.length
- ? payload.customizerParams
- : state.customizerParams
- const currentParameters = {}
- customizerParams.forEach((param) => {
- currentParameters[param.name] =
- typeof state?.currentParameters?.[param.name] !== 'undefined'
- ? state?.currentParameters?.[param.name]
- : param.initial
- })
- return {
- ...state,
- objectData: {
- ...state.objectData,
- type: payload.objectData?.type,
- data: payload.objectData?.data,
- },
- customizerParams,
- currentParameters,
- consoleMessages: payload.message
- ? [...state.consoleMessages, payload.message]
- : payload.message,
- isLoading: false,
- }
- case 'errorRender':
- return {
- ...state,
- consoleMessages: payload.message
- ? [...state.consoleMessages, payload.message]
- : payload.message,
- isLoading: false,
- }
- case 'setCurrentCustomizerParams':
- if (!Object.keys(payload || {}).length) return state
- return {
- ...state,
- currentParameters: payload,
- }
- case 'setLayout':
- return {
- ...state,
- layout: payload.message,
- }
- case 'updateCamera':
- return {
- ...state,
- camera: payload.camera,
- }
- case 'updateViewerSize':
- return {
- ...state,
- viewerSize: payload.viewerSize,
- }
- case 'setLoading':
- return {
- ...state,
- isLoading: true,
- }
- case 'resetLoading':
- return {
- ...state,
- isLoading: false,
- }
- case 'resetLayout':
- return {
- ...state,
- layout: initialLayout,
- }
- case 'setThreeInstance':
- return {
- ...state,
- threeInstance: payload,
- }
- default:
- return state
- }
- }
+const reducer = (state: State, { type, payload }): State => {
+ switch (type) {
+ case 'initIde':
+ return {
+ ...state,
+ code:
+ payload.code ||
+ // localStorage.getItem(makeCodeStoreKey(payload.cadPackage)) ||
+ initCodeMap[payload.cadPackage] ||
+ '',
+ ideType: payload.cadPackage,
+ }
+ case 'updateCode':
+ return { ...state, code: payload }
+ case 'healthyRender':
+ const customizerParams: CadhubParams[] = payload?.customizerParams?.length
+ ? payload.customizerParams
+ : state.customizerParams
+ const currentParameters = {}
+ customizerParams.forEach((param) => {
+ currentParameters[param.name] =
+ typeof state?.currentParameters?.[param.name] !== 'undefined'
+ ? state?.currentParameters?.[param.name]
+ : param.initial
+ })
+ return {
+ ...state,
+ objectData: {
+ ...state.objectData,
+ type: payload.objectData?.type,
+ data: payload.objectData?.data,
+ },
+ customizerParams,
+ currentParameters,
+ consoleMessages: payload.message
+ ? [...state.consoleMessages, payload.message]
+ : payload.message,
+ isLoading: false,
+ }
+ case 'errorRender':
+ return {
+ ...state,
+ consoleMessages: payload.message
+ ? [...state.consoleMessages, payload.message]
+ : payload.message,
+ isLoading: false,
+ }
+ case 'setCurrentCustomizerParams':
+ if (!Object.keys(payload || {}).length) return state
+ return {
+ ...state,
+ currentParameters: payload,
+ }
+ case 'setLayout':
+ return {
+ ...state,
+ layout: payload.message,
+ }
+ case 'updateCamera':
+ return {
+ ...state,
+ camera: payload.camera,
+ }
+ case 'updateViewerSize':
+ return {
+ ...state,
+ viewerSize: payload.viewerSize,
+ }
+ case 'setLoading':
+ return {
+ ...state,
+ isLoading: true,
+ }
+ case 'resetLoading':
+ return {
+ ...state,
+ isLoading: false,
+ }
+ case 'resetLayout':
+ return {
+ ...state,
+ layout: initialLayout,
+ }
+ case 'setThreeInstance':
+ return {
+ ...state,
+ threeInstance: payload,
+ }
+ case 'settingsButtonClicked':
+ const isReClick =
+ state.sideTray.length &&
+ state.sideTray.length === payload.length &&
+ state.sideTray.every((original, index) => original === payload[index])
+ const payloadInOriginal =
+ payload.length && state.sideTray.indexOf(payload[0])
+ const isAncestorClick =
+ state.sideTray.length &&
+ state.sideTray.length > payload.length &&
+ payloadInOriginal >= 0 &&
+ payload.every(
+ (incoming, i) => incoming === state.sideTray[i + payloadInOriginal]
+ )
+
+ if (isReClick) {
+ return {
+ ...state,
+ sideTray: state.sideTray.slice(0, -1),
+ }
+ } else if (isAncestorClick) {
+ return {
+ ...state,
+ sideTray: state.sideTray.slice(0, payload.length * -1 - 1),
+ }
+ }
+ return {
+ ...state,
+ sideTray: payload,
+ }
+ default:
+ return state
+ }
+}
+export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
const [state, dispatch] = useReducer(reducer, initialState)
mutableState = state
const getState = (): State => mutableState
diff --git a/app/web/src/index.css b/app/web/src/index.css
index e130ac7..b3ce904 100644
--- a/app/web/src/index.css
+++ b/app/web/src/index.css
@@ -18,17 +18,30 @@
font-family: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
- /* custom scrollbar */
.ch-scrollbar::-webkit-scrollbar {
- @apply w-3;
+ @apply w-3;
}
-
+
.ch-scrollbar::-webkit-scrollbar-track {
@apply bg-ch-gray-700;
}
-
+
.ch-scrollbar::-webkit-scrollbar-thumb {
- @apply bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-60;
+ @apply bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-60;
+ }
+
+}
+
+@layer components {
+ .tabToggle {
+ @apply text-ch-gray-300 p-3 mb-1 flex justify-center;
+ }
+ .tabToggle.active {
+ @apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
+ }
+ .tabToggle.disabled {
+ @apply text-ch-gray-550 cursor-not-allowed;
+
}
}
diff --git a/app/yarn.lock b/app/yarn.lock
index 2d29d4f..20e5d23 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2007,10 +2007,10 @@
resolved "https://registry.npmjs.org/@hapi/bourne/-/bourne-2.0.0.tgz"
integrity sha512-WEezM1FWztfbzqIUbsDzFRVMxSoLy3HugVcux6KDDtTqzPsLE8NDRHfXvev66aH1i2oOKKar3/XDjbvh/OUBdg==
-"@headlessui/react@^1.0.0":
- version "1.2.0"
- resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.2.0.tgz"
- integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==
+"@headlessui/react@^1.4.1":
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.1.tgz#0a8dbb20e1d63dcea55bfc3ab1b87637aaac7777"
+ integrity sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==
"@heroicons/react@^1.0.4":
version "1.0.4"