admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260319-042720

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-19 04:27:21 +00:00
parent ffb3a3819c
commit d4821b6a5d
5 changed files with 443 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

671
backend/yarn.lock
View File

File diff suppressed because it is too large Load Diff

153
frontend/src/pages/constructor.tsx
View File

@ -71,6 +71,11 @@ type CanvasElementType =
| 'video_player'
| 'audio_player';
type NavigationElementType = Extract<
CanvasElementType,
'navigation_next' | 'navigation_prev'
>;
type CanvasElement = {
id: string;
type: CanvasElementType;
@ -136,12 +141,20 @@ type EditorMenuItem =
| 'background_audio'
| 'create_transition';
const parseJsonObject = <T,>(value?: string, fallback?: T): T => {
const parseJsonObject = <T,>(value?: unknown, fallback?: T): T => {
if (!value) return (fallback || ({} as T)) as T;
try {
const parsed = JSON.parse(value);
return (parsed || fallback || {}) as T;
if (typeof value === 'string') {
const parsed = JSON.parse(value);
return (parsed || fallback || {}) as T;
}
if (typeof value === 'object') {
return value as T;
}
return (fallback || ({} as T)) as T;
} catch (error) {
console.error('Failed to parse constructor JSON:', error);
return (fallback || ({} as T)) as T;
@ -285,6 +298,14 @@ const labelByType: Record<CanvasElementType, string> = {
audio_player: 'Audio Player',
};
const isNavigationElementType = (
type: CanvasElementType,
): type is NavigationElementType =>
type === 'navigation_next' || type === 'navigation_prev';
const getNavigationButtonLabel = (type: NavigationElementType) =>
type === 'navigation_next' ? 'Forward' : 'Back';
const createDefaultElement = (
type: CanvasElementType,
index: number,
@ -338,7 +359,7 @@ const createDefaultElement = (
if (type === 'navigation_next' || type === 'navigation_prev') {
return {
...base,
navLabel: type === 'navigation_next' ? 'Forward' : 'Back',
navLabel: getNavigationButtonLabel(type),
iconUrl: '',
transitionReverseMode: 'auto_reverse',
transitionDurationSec: 0.7,
@ -454,6 +475,16 @@ const ConstructorPage = () => {
() => pages.find((item) => item.id === activePageId) || null,
[activePageId, pages],
);
const activePageIndex = useMemo(
() => pages.findIndex((item) => item.id === activePageId),
[activePageId, pages],
);
const allowedNavigationTypes = useMemo<NavigationElementType[]>(() => {
if (pages.length <= 1) return ['navigation_next'];
if (activePageIndex <= 0) return ['navigation_next'];
if (activePageIndex >= pages.length - 1) return ['navigation_prev'];
return ['navigation_next', 'navigation_prev'];
}, [activePageIndex, pages.length]);
const pageNameById = useMemo(() => {
const acc: Record<string, string> = {};
pages.forEach((page, index) => {
@ -465,6 +496,28 @@ const ConstructorPage = () => {
() => elements.find((element) => element.id === selectedElementId) || null,
[elements, selectedElementId],
);
const normalizeNavigationElementType = useCallback(
(element: CanvasElement, nextType: NavigationElementType): CanvasElement => {
if (!isNavigationElementType(element.type)) return element;
const nextButtonLabel = getNavigationButtonLabel(nextType);
const hasDefaultLabel =
element.label === labelByType.navigation_next ||
element.label === labelByType.navigation_prev;
const hasDefaultNavLabel =
!element.navLabel ||
element.navLabel === getNavigationButtonLabel('navigation_next') ||
element.navLabel === getNavigationButtonLabel('navigation_prev');
return {
...element,
type: nextType,
label: hasDefaultLabel ? labelByType[nextType] : element.label,
navLabel: hasDefaultNavLabel ? nextButtonLabel : element.navLabel,
};
},
[],
);
const imageAssetOptions = useMemo(
() =>
assets
@ -790,6 +843,22 @@ const ConstructorPage = () => {
setBackgroundAudioUrl(activePage.background_audio_url || '');
}, [activePage]);
useEffect(() => {
if (allowedNavigationTypes.length !== 1) return;
const forcedType = allowedNavigationTypes[0];
setElements((prev) => {
let hasChanges = false;
const nextElements = prev.map((element) => {
if (!isNavigationElementType(element.type) || element.type === forcedType)
return element;
hasChanges = true;
return normalizeNavigationElementType(element, forcedType);
});
return hasChanges ? nextElements : prev;
});
}, [allowedNavigationTypes, normalizeNavigationElementType]);
useEffect(() => {
const onPointerMove = (event: MouseEvent) => {
if (menuDragRef.current) {
@ -892,7 +961,12 @@ const ConstructorPage = () => {
};
const addElement = (type: CanvasElementType) => {
const nextElement = createDefaultElement(type, elements.length);
const nextElementType: CanvasElementType = isNavigationElementType(type)
? allowedNavigationTypes.includes(type)
? type
: allowedNavigationTypes[0]
: type;
const nextElement = createDefaultElement(nextElementType, elements.length);
setElements((prev) => [...prev, nextElement]);
selectElementForEdit(nextElement.id);
setSuccessMessage('Element added. Drag it to set position.');
@ -1037,7 +1111,13 @@ const ConstructorPage = () => {
await axios.put(`/tour_pages/${activePageId}`, {
id: activePageId,
data: {
ui_schema_json: JSON.stringify(schemaToSave),
environment: activePage?.environment,
source_key: activePage?.source_key,
name: activePage?.name,
slug: activePage?.slug,
sort_order: activePage?.sort_order,
requires_auth: activePage?.requires_auth,
ui_schema_json: schemaToSave,
background_image_url: backgroundImageUrl,
background_video_url: backgroundVideoUrl,
background_audio_url: backgroundAudioUrl,
@ -1060,6 +1140,12 @@ const ConstructorPage = () => {
setIsSaving(false);
}
}, [
activePage?.environment,
activePage?.name,
activePage?.requires_auth,
activePage?.slug,
activePage?.sort_order,
activePage?.source_key,
activePage?.ui_schema_json,
activePageId,
backgroundAudioUrl,
@ -1884,6 +1970,42 @@ const ConstructorPage = () => {
(selectedElement.type === 'navigation_next' ||
selectedElement.type === 'navigation_prev') && (
<div className='space-y-2'>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Direction
</label>
<select
className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
value={selectedElement.type}
onChange={(event) => {
const rawValue = event.target.value;
const requestedType: NavigationElementType =
rawValue === 'navigation_prev'
? 'navigation_prev'
: 'navigation_next';
const nextType = allowedNavigationTypes.includes(
requestedType,
)
? requestedType
: allowedNavigationTypes[0];
updateSelectedElement(
normalizeNavigationElementType(
selectedElement,
nextType,
),
);
}}
disabled={allowedNavigationTypes.length === 1}
>
{allowedNavigationTypes.map((type) => (
<option key={type} value={type}>
{type === 'navigation_next'
? 'Forward'
: 'Back'}
</option>
))}
</select>
</div>
<div>
<label className='mb-1 block text-[11px] font-semibold text-gray-600'>
Button text
@ -2493,25 +2615,10 @@ const ConstructorPage = () => {
<button
type='button'
className='menu-action-btn'
onClick={() => {
const prevElement = createDefaultElement(
'navigation_prev',
elements.length,
);
const nextElement = createDefaultElement(
'navigation_next',
elements.length + 1,
);
setElements((prev) => [...prev, prevElement, nextElement]);
selectElementForEdit(nextElement.id);
setSuccessMessage(
'Navigation buttons added. Configure transition in editor.',
);
setErrorMessage('');
}}
onClick={() => addElement(allowedNavigationTypes[0])}
>
<BaseIcon path={mdiSwapHorizontal} size={16} />
<span>Add Navigation</span>
<span>Add Navigation Button</span>
</button>
<button
type='button'

13
frontend/src/pages/index.tsx
View File

@ -28,12 +28,23 @@ export default function Starter() {
async function loadRuntimeMode() {
try {
const response = await axios.get('/runtime-context');
const response = await axios.get('/runtime-context', {
validateStatus: (status) =>
(status >= 200 && status < 300) || status === 503,
});
if (response.status === 503) {
return;
}
const mode = response?.data?.mode;
if (!isCancelled && (mode === 'stage' || mode === 'production')) {
await router.replace('/runtime');
}
} catch (error) {
if (axios.isAxiosError(error) && error.response?.status === 503) {
return;
}
console.error('Failed to detect runtime mode:', error);
}
}

19
frontend/src/pages/projects/[projectsId].tsx
View File

@ -64,9 +64,24 @@ const ProjectWorkspacePage = () => {
setProject(response?.data || null);
try {
const runtimeContextResponse = await axios.get('/runtime-context');
setRuntimeContext(runtimeContextResponse?.data || null);
const runtimeContextResponse = await axios.get('/runtime-context', {
validateStatus: (status) =>
(status >= 200 && status < 300) || status === 503,
});
if (runtimeContextResponse.status === 503) {
setRuntimeContext(null);
} else {
setRuntimeContext(runtimeContextResponse?.data || null);
}
} catch (runtimeContextError) {
if (
axios.isAxiosError(runtimeContextError) &&
runtimeContextError.response?.status === 503
) {
setRuntimeContext(null);
return;
}
console.error('Failed to load runtime context:', runtimeContextError);
setRuntimeContext(null);
}

18
frontend/src/pages/runtime.tsx
View File

@ -171,8 +171,17 @@ const RuntimePageView = () => {
setIsLoading(true);
setError('');
const contextResponse = await axios.get('/runtime-context');
const contextResponse = await axios.get('/runtime-context', {
validateStatus: (status) =>
(status >= 200 && status < 300) || status === 503,
});
if (isCancelled) return;
if (contextResponse.status === 503) {
setContext({ mode: 'unknown', projectSlug: null });
return;
}
setContext(
contextResponse.data || { mode: 'unknown', projectSlug: null },
);
@ -200,6 +209,13 @@ const RuntimePageView = () => {
setTransitions(getRows(transitionsResponse));
} catch (runtimeError: any) {
if (isCancelled) return;
if (
axios.isAxiosError(runtimeError) &&
runtimeError.response?.status === 503
) {
setContext({ mode: 'unknown', projectSlug: null });
return;
}
const message =
runtimeError?.response?.data?.message ||
runtimeError?.message ||