dave/eveship.fit.react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: preload module/charge from listing, to always show drag/drop image (#126)

Browse Source 
Drag&drop need the image the be preloaded in order to render it. Browsers
cannot fetch the image while dragging.
This commit is contained in:
Patric Stout
2024-05-17 21:01:22 +02:00
committed by GitHub
parent c07ba95c6f
commit 6627e68fa4
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/HardwareListing/HardwareListing.tsx
View File

@@ -59,6 +59,16 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
[],
);
const preloadImage = React.useCallback(
(typeId: number): ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) => {
return () => {
const img = new Image();
img.src = `https://images.evetech.net/types/${typeId}/icon?size=64`;
};
},
[],
);
const getChildren = React.useCallback(() => {
return (
<>
@@ -73,6 +83,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
content={item.name}
onDoubleClick={() => shipSnapShot.addCharge(item.typeId)}
onDragStart={onItemDragStart(item.typeId, "charge")}
onMouseEnter={preloadImage(item.typeId)}
/>
);
} else {
@@ -84,6 +95,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
content={item.name}
onDoubleClick={() => shipSnapShot.addModule(item.typeId, slotType)}
onDragStart={onItemDragStart(item.typeId, slotType)}
onMouseEnter={preloadImage(item.typeId)}
/>
);
}
@@ -99,7 +111,7 @@ const ModuleGroup = (props: { level: number; group: ListingGroup; hideGroup?: bo
})}
</>
);
}, [props, shipSnapShot, onItemDragStart]);
}, [props, shipSnapShot, onItemDragStart, preloadImage]);
if (props.hideGroup) {
return <TreeListing level={props.level} getChildren={getChildren} />;

2
src/components/TreeListing/TreeListing.tsx
View File

@@ -55,6 +55,7 @@ export const TreeLeaf = (props: {
onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onDoubleClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}) => {
const stylesHeader = styles[`header${props.level}`];
@@ -74,6 +75,7 @@ export const TreeLeaf = (props: {
onDoubleClick={props.onDoubleClick}
draggable={!!props.onDragStart}
onDragStart={props.onDragStart}
onMouseEnter={props.onMouseEnter}
>
{props.icon !== undefined && (
<span className={styles.leafIcon}>