github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-01 18:35:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): divider layout

Browse Source
This commit is contained in:
psychedelicious
2025-02-05 20:02:11 +11:00
parent 09879f4e19
commit b46dbcc76d
2 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElementComponent.tsx
View File

@@ -11,11 +11,11 @@ import { memo } from 'react';
const sx: SystemStyleObject = {
bg: 'base.700',
flexShrink: 0,
'&[data-orientation="horizontal"]': {
'&[data-layout="column"]': {
width: '100%',
height: '1px',
},
'&[data-orientation="vertical"]': {
'&[data-layout="row"]': {
height: '100%',
width: '1px',
},
@@ -43,14 +43,7 @@ export const DividerElementComponentViewMode = memo(({ el }: { el: DividerElemen
const container = useContainerContext();
const { id } = el;
return (
<Flex
id={id}
className={DIVIDER_CLASS_NAME}
sx={sx}
data-orientation={container?.layout === 'column' ? 'horizontal' : 'vertical'}
/>
);
return <Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} data-layout={container?.layout} />;
});
DividerElementComponentViewMode.displayName = 'DividerElementComponentViewMode';
@@ -61,12 +54,7 @@ export const DividerElementComponentEditMode = memo(({ el }: { el: DividerElemen
return (
<FormElementEditModeWrapper element={el}>
<Flex
id={id}
className={DIVIDER_CLASS_NAME}
sx={sx}
data-orientation={container?.layout === 'column' ? 'horizontal' : 'vertical'}
/>
<Flex id={id} className={DIVIDER_CLASS_NAME} sx={sx} data-layout={container?.layout} />
</FormElementEditModeWrapper>
);
});

33
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeWrapper.tsx
View File

@@ -1,5 +1,6 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library';
import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
import { DndListDropIndicator } from 'features/nodes/components/sidePanel/builder/DndListDropIndicator';
import { FormElementEditModeHeader } from 'features/nodes/components/sidePanel/builder/FormElementEditModeHeader';
import { EDIT_MODE_WRAPPER_CLASS_NAME, getEditModeWrapperId } from 'features/nodes/components/sidePanel/builder/shared';
@@ -8,7 +9,15 @@ import type { FormElement } from 'features/nodes/types/workflow';
import type { PropsWithChildren } from 'react';
import { memo, useRef } from 'react';
const sx: SystemStyleObject = {
const wrapperSx: SystemStyleObject = {
position: 'relative',
flex: '1 1 0',
'&[data-element-type="divider"]&[data-layout="row"]': {
flex: '0 1 0',
},
};
const innerSx: SystemStyleObject = {
position: 'relative',
flexDir: 'column',
boxShadow: '0 0 0 1px var(--invoke-colors-base-750)',
@@ -24,24 +33,38 @@ const sx: SystemStyleObject = {
opacity: 1,
bg: 'base.700',
},
'&[data-element-type="divider"]&[data-layout="row"]': {
w: 'min-content',
},
'&[data-element-type="divider"]&[data-layout="column"]': {
h: 'min-content',
},
};
export const FormElementEditModeWrapper = memo(({ element, children }: PropsWithChildren<{ element: FormElement }>) => {
const draggableRef = useRef<HTMLDivElement>(null);
const dragHandleRef = useRef<HTMLDivElement>(null);
const [activeDropRegion, isDragging] = useDraggableFormElement(element.id, draggableRef, dragHandleRef);
const containerCtx = useContainerContext();
return (
<Flex
id={getEditModeWrapperId(element.id)}
ref={draggableRef}
className={EDIT_MODE_WRAPPER_CLASS_NAME}
position="relative"
flex={1}
sx={wrapperSx}
data-element-type={element.type}
data-layout={containerCtx?.layout}
>
<Flex sx={sx} data-is-dragging={isDragging} data-active-drop-region={activeDropRegion}>
<Flex
sx={innerSx}
data-is-dragging={isDragging}
data-active-drop-region={activeDropRegion}
data-element-type={element.type}
data-layout={containerCtx?.layout}
>
<FormElementEditModeHeader ref={dragHandleRef} element={element} />
<Flex w="full" p={4} alignItems="center" gap={4}>
<Flex w="full" h="full" p={4} alignItems="center" gap={4}>
{children}
</Flex>
</Flex>