Skip to content

Commit

Permalink
feat: grid stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@KatoakDR
KatoakDR committed Sep 11, 2024
1 parent 4426310 commit 8d93f66
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 217 deletions.
90 changes: 67 additions & 23 deletions electron/renderer/components/grid/grid-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,28 +24,66 @@ import { useCallback, useMemo, useRef } from 'react';

export interface GridItemMetadata {
itemId: string;
title: string;
itemTitle: string;
isFocused: boolean;
x: number;
y: number;
width: number;
height: number;
}

/**
* The dimension for the grid where the item may be dragged and resized.
*/
export interface GridItemBoundary {
/**
* The max height of the grid in pixels.
*/
height: number;
/**
* The max width of the grid in pixels.
*/
width: number;
}

/**
* The positional layout for the grid item.
*/
export interface GridItemLayout {
/**
* The x coordinate for the grid item.
* The leftmost edge of the grid item.
*/
x: number;
/**
* The y coordinate for the grid item.
* The topmost edge of the grid item.
*/
y: number;
/**
* The width dimension for the grid item.
* The horizontal length of the grid item.
* Rightmost edge is `x + width`.
*/
width: number;
/**
* The height dimension for the grid item.
* The vertical length of the grid item.
* Bottommost edge is `y + height`.
*/
height: number;
}

export interface GridItemProps {
/**
* The dimension for the grid where the item may be dragged and resized.
*/
boundary: {
/**
* The max height of the grid in pixels.
*/
height: number;
/**
* The max width of the grid in pixels.
*/
width: number;
};
boundary: GridItemBoundary;
/**
* The positional layout for the grid item.
* If not specified then a default location will be used.
*/
layout?: GridItemLayout;
/**
* The unique identifier for the grid item.
*/
Expand All @@ -55,7 +93,7 @@ export interface GridItemProps {
* Note the prop `title` is reserved and refers to titling a DOM element,
* not for passing data to child components. So using a more specific name.
*/
titleBarText: string;
itemTitle: string;
/**
* Handler when the user clicks the close button in the title bar.
* Passes the `itemId` of the grid item being closed.
Expand Down Expand Up @@ -84,36 +122,42 @@ export interface GridItemProps {
children?: ReactNode;
}

const DEFAULT_GRID_ITEM_LAYOUT: GridItemLayout = {
x: 0,
y: 0,
width: 500,
height: 500,
};

export const GridItem: React.FC<GridItemProps> = (
props: GridItemProps
): ReactNode => {
const { boundary, itemId, titleBarText, isFocused = false, children } = props;
const { itemId, itemTitle, isFocused = false, children } = props;
const { boundary, layout = DEFAULT_GRID_ITEM_LAYOUT } = props;
const { onFocus, onClose, onMoveResize } = props;

const { euiTheme } = useEuiTheme();

// Set default position and size for the grid item.
const [{ x, y, width, height }, sizeApi] = useSpring(() => ({
x: 0,
y: 0,
width: 100,
height: 100,
}));
// Like `useState`, we can provide the default value, but as a function.
const [{ x, y, width, height }, sizeApi] = useSpring<GridItemLayout>(() => {
return layout;
}, [layout]);

const dragHandleRef = useRef<HTMLDivElement>(null);
const resizeHandleRef = useRef<HTMLDivElement>(null);

const getItemMetadata = useCallback(() => {
const getItemMetadata = useCallback((): GridItemMetadata => {
return {
itemId,
title: titleBarText,
itemTitle,
isFocused,
x: x.get(),
y: y.get(),
width: width.get(),
height: height.get(),
};
}, [itemId, titleBarText, isFocused, x, y, width, height]);
}, [itemId, itemTitle, isFocused, x, y, width, height]);

// Handle when the user clicks the close button in the title bar.
const onCloseClick = useCallback(() => {
Expand Down Expand Up @@ -318,7 +362,7 @@ export const GridItem: React.FC<GridItemProps> = (
<EuiIcon type="grabOmnidirectional" />
</EuiFlexItem>
<EuiFlexItem grow={true}>
<EuiText size="xs">{titleBarText}</EuiText>
<EuiText size="xs">{itemTitle}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down
2 changes: 1 addition & 1 deletion electron/renderer/components/grid/grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
<GridItem
key={contentItem.layout.itemId}
itemId={contentItem.layout.itemId}
titleBarText={contentItem.layout.title}
itemTitle={contentItem.layout.itemTitle}
isFocused={contentItem.layout.itemId === focusedItemId}
onFocus={onItemFocus}
onClose={onItemClose}
Expand Down
205 changes: 12 additions & 193 deletions electron/renderer/pages/grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,187 +340,6 @@ const GridPage: React.FC = (): ReactNode => {
const [gridWidthRef, { width: gridWidth }] = useMeasure<HTMLDivElement>();
const gridHeight = windowSize.height - bottomBarSize.height - 40;

// TODO read layout from storage to detmine the items to show on the grid
// TODO when a user adds an item, we subscribe to that event/callback and update the injected list
// TODO when a user removes an item, we subscribe to that event/callback and update the injected list
// In short, the Grid cmp should not determine what items it has, it receives the items and shows them
const gridItems = [
{
itemId: 'room',
title: 'Room',
content: (
<GameStream gameStreamIds={['room']} stream$={gameLogLineSubject$} />
),
},
{
itemId: 'experience',
title: 'Experience',
content: (
<GameStream
gameStreamIds={['experience']}
stream$={gameLogLineSubject$}
/>
),
},
// {
// itemId: 'percWindow',
// title: 'Spells',
// content: (
// <GameStream
// gameStreamIds={['percWindow']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'inv',
// title: 'Inventory',
// content: (
// <GameStream
// gameStreamIds={['inv']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'familiar',
// title: 'Familiar',
// content: (
// <GameStream
// gameStreamIds={['familiar']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'thoughts',
// title: 'Thoughts',
// content: (
// <GameStream
// gameStreamIds={['thoughts']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'combat',
// title: 'Combat',
// content: (
// <GameStream
// gameStreamIds={['combat']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'assess',
// title: 'Assess',
// content: (
// <GameStream
// gameStreamIds={['assess']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'logons',
// title: 'Arrivals',
// content: (
// <GameStream
// gameStreamIds={['logons']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'death',
// title: 'Deaths',
// content: (
// <GameStream
// gameStreamIds={['death']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'atmospherics',
// title: 'Atmospherics',
// content: (
// <GameStream
// gameStreamIds={['atmospherics']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'chatter',
// title: 'Chatter',
// content: (
// <GameStream
// gameStreamIds={['chatter']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'conversation',
// title: 'Conversation',
// content: (
// <GameStream
// gameStreamIds={['conversation']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'whispers',
// title: 'Whispers',
// content: (
// <GameStream
// gameStreamIds={['whispers']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'talk',
// title: 'Talk',
// content: (
// <GameStream
// gameStreamIds={['talk']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'ooc',
// title: 'OOC',
// content: (
// <GameStream
// gameStreamIds={['ooc']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
// {
// itemId: 'group',
// title: 'Group',
// content: (
// <GameStream
// gameStreamIds={['group']}
// stream$={gameLogLineSubject$}
// />
// ),
// },
{
itemId: 'main',
title: 'Main',
content: (
<GameStream gameStreamIds={['']} stream$={gameLogLineSubject$} />
),
},
];

interface GridConfigItem {
itemId: string; // 'room'
title: string; // 'Room'
Expand Down Expand Up @@ -566,27 +385,27 @@ const GridPage: React.FC = (): ReactNode => {

layoutGridItems.push({
itemId: 'room',
title: 'Room',
itemTitle: 'Room',
isFocused: false,
x: 0,
y: 0,
width: 100,
height: 100,
});

// layoutGridItems.push({
// itemId: 'experience',
// title: 'Experience',
// isFocused: false,
// x: 200,
// y: 0,
// width: 100,
// height: 100,
// });
layoutGridItems.push({
itemId: 'experience',
itemTitle: 'Experience',
isFocused: false,
x: 200,
y: 0,
width: 100,
height: 100,
});

layoutGridItems.push({
itemId: 'main',
title: 'Main',
itemTitle: 'Main',
isFocused: true,
x: 0,
y: 200,
Expand Down Expand Up @@ -628,7 +447,7 @@ const GridPage: React.FC = (): ReactNode => {
contentGridItems.push({
layout: {
...layoutItem,
title: configItem?.title ?? layoutItem.title,
itemTitle: configItem?.title ?? layoutItem.itemTitle,
},
content: (
<GameStream
Expand Down

0 comments on commit 8d93f66

Please sign in to comment.