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

fixed z-index issue

Browse Source
This commit is contained in:
Dmitri 2026-06-25 12:59:04 +02:00
parent 7a72aa7fa7
commit 130c11bfa1
3 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/Constructor/CanvasElement.tsx
View File

@ -21,6 +21,7 @@ import type { CanvasElement as CanvasElementType } from '../../types/constructor
import type { ResolvedTransitionSettings } from '../../types/transition';
import type { PreloadCacheProvider } from '../../hooks/video';
import { isInfoPanelElementType } from '../../lib/elementDefaults';
import { normalizeZIndexValue } from '../../lib/elementStyles';
interface CanvasElementProps {
element: CanvasElementType;
@ -136,6 +137,10 @@ const CanvasElement: React.FC<CanvasElementProps> = ({
top: `${yClamped}%`,
transform: 'translate(-50%, -50%)',
};
const zIndex = normalizeZIndexValue(element.zIndex);
if (zIndex !== undefined) {
positionStyle.zIndex = zIndex;
}
// Add appear animation to outer div (ALWAYS - for WYSIWYG)
// Animation is applied to outer div to keep positioning hack working

5
frontend/src/components/RuntimeElement.tsx
View File

@ -20,6 +20,7 @@ import type { CanvasElement } from '../types/constructor';
import type { ResolvedTransitionSettings } from '../types/transition';
import type { PreloadCacheProvider } from '../hooks/video';
import { isInfoPanelElementType } from '../lib/elementDefaults';
import { normalizeZIndexValue } from '../lib/elementStyles';
interface RuntimeElementProps {
element: CanvasElement;
@ -115,6 +116,10 @@ const RuntimeElement: React.FC<RuntimeElementProps> = ({
transform: `translate(-50%, -50%)${rotation ? ` rotate(${rotation}deg)` : ''}`,
pointerEvents: 'auto',
};
const zIndex = normalizeZIndexValue(element.zIndex);
if (zIndex !== undefined) {
positionStyle.zIndex = zIndex;
}
// Add appear animation to outer div
// Animation stays on outer div to keep positioning hack working

19
frontend/src/lib/elementStyles.ts
View File

@ -267,6 +267,16 @@ const getTrimmedValue = (value: unknown): string => {
return String(value).trim();
};
export const normalizeZIndexValue = (
value: unknown,
): CSSProperties['zIndex'] | undefined => {
const zIndexValue = getTrimmedValue(value);
if (!zIndexValue) return undefined;
const parsed = Number(zIndexValue);
return Number.isFinite(parsed) ? parsed : undefined;
};
/**
* Build React CSSProperties from element style properties.
* Handles type coercion for special properties like opacity and zIndex.
@ -326,13 +336,8 @@ export function buildElementStyle(
}
// Handle zIndex (needs numeric conversion, already in style from loop but override with number)
const zIndexValue = getTrimmedValue(source.zIndex);
if (zIndexValue) {
const parsed = Number(zIndexValue);
if (Number.isFinite(parsed)) {
style.zIndex = parsed;
}
}
const zIndex = normalizeZIndexValue(source.zIndex);
if (zIndex !== undefined) style.zIndex = zIndex;
return style;
}