fix: clear models expand keys

This commit is contained in:
jialin
2025-01-17 14:35:36 +08:00
parent 0690612477
commit 58fcc90417
6 changed files with 81 additions and 24 deletions
+26 -7
View File
@@ -104,6 +104,10 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}; };
const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => { const handleMouseEnter = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (disabled) {
overlayCanvasRef.current!.style.cursor = 'default';
return;
}
overlayCanvasRef.current!.style.cursor = 'none'; overlayCanvasRef.current!.style.cursor = 'none';
cursorRef.current!.style.display = 'block'; cursorRef.current!.style.display = 'block';
cursorRef.current!.style.top = `${e.clientY}px`; cursorRef.current!.style.top = `${e.clientY}px`;
@@ -111,6 +115,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}; };
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => { const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (disabled) {
return;
}
overlayCanvasRef.current!.style.cursor = 'none'; overlayCanvasRef.current!.style.cursor = 'none';
cursorRef.current!.style.display = 'block'; cursorRef.current!.style.display = 'block';
cursorRef.current!.style.top = `${e.clientY}px`; cursorRef.current!.style.top = `${e.clientY}px`;
@@ -118,6 +125,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}; };
const handleMouseLeave = () => { const handleMouseLeave = () => {
if (disabled) {
return;
}
overlayCanvasRef.current!.style.cursor = 'default'; overlayCanvasRef.current!.style.cursor = 'default';
cursorRef.current!.style.display = 'none'; cursorRef.current!.style.display = 'none';
}; };
@@ -284,6 +294,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}, []); }, []);
const draw = (e: React.MouseEvent<HTMLCanvasElement>) => { const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (disabled) {
return;
}
if (!isDrawing.current) return; if (!isDrawing.current) return;
const { offsetX, offsetY } = e.nativeEvent; const { offsetX, offsetY } = e.nativeEvent;
@@ -315,6 +328,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}; };
const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => { const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (disabled) {
return;
}
isDrawing.current = true; isDrawing.current = true;
currentStroke.current = []; currentStroke.current = [];
@@ -340,6 +356,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => { const endDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
console.log('End Drawing:', e); console.log('End Drawing:', e);
if (disabled) {
return;
}
if (!isDrawing.current) { if (!isDrawing.current) {
return; return;
} }
@@ -610,13 +629,13 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}; };
}, []); }, []);
useEffect(() => { // useEffect(() => {
if (disabled) { // if (disabled) {
overlayCanvasRef.current!.style.pointerEvents = 'none'; // overlayCanvasRef.current!.style.pointerEvents = 'none';
} else { // } else {
overlayCanvasRef.current!.style.pointerEvents = 'auto'; // overlayCanvasRef.current!.style.pointerEvents = 'auto';
} // }
}, [disabled]); // }, [disabled]);
return ( return (
<div className="editor-wrapper"> <div className="editor-wrapper">
@@ -183,6 +183,20 @@ const TableRow: React.FC<
} }
}, [expanded]); }, [expanded]);
useEffect(() => {
const handleVisibilityChange = async () => {
if (document.visibilityState === 'hidden') {
cacheDataListRef.current = [];
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => {
document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, []);
useEffect(() => { useEffect(() => {
if (!firstLoad && expanded) { if (!firstLoad && expanded) {
cacheDataListRef.current = childrenData; cacheDataListRef.current = childrenData;
+13
View File
@@ -18,3 +18,16 @@
display: flex; display: flex;
} }
} }
.tags-wrapper-dropdown {
.ant-dropdown-menu {
.ant-dropdown-menu-item {
background-color: transparent;
cursor: default;
&:hover {
background-color: transparent;
}
}
}
}
+7 -1
View File
@@ -72,6 +72,10 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
} }
}; };
const handleClick = (data: any) => {
data.domEvent?.stopPropagation();
};
useEffect(() => { useEffect(() => {
if (tagsContentRef.current) { if (tagsContentRef.current) {
calculateHiddenIndices(); calculateHiddenIndices();
@@ -98,13 +102,15 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
{hiddenIndices.end < dataList.length && ( {hiddenIndices.end < dataList.length && (
<Dropdown <Dropdown
trigger={['hover']} trigger={['hover']}
overlayClassName="tags-wrapper-dropdown"
menu={{ menu={{
items: _.map( items: _.map(
_.slice(dataList, hiddenIndices.end), _.slice(dataList, hiddenIndices.end),
(item: any, index: number) => { (item: any, index: number) => {
return { return {
label: renderTag?.(item), label: renderTag?.(item),
key: index key: index,
onClick: handleClick
}; };
} }
) )
+7 -1
View File
@@ -127,7 +127,7 @@ const Models: React.FC<ModelsProps> = ({
loading, loading,
total total
}) => { }) => {
const [expandAtom] = useAtom(modelsExpandKeysAtom); const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
const access = useAccess(); const access = useAccess();
const intl = useIntl(); const intl = useIntl();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -227,6 +227,12 @@ const Models: React.FC<ModelsProps> = ({
} }
}, [deleteIds]); }, [deleteIds]);
useEffect(() => {
return () => {
setExpandAtom([]);
};
}, []);
const sourceOptions = [ const sourceOptions = [
{ {
label: intl.formatMessage({ id: 'menu.models.modelCatalog' }), label: intl.formatMessage({ id: 'menu.models.modelCatalog' }),
+14 -15
View File
@@ -43,21 +43,20 @@ const Models: React.FC = () => {
categories: [] categories: []
}); });
const { updateChunkedList, cacheDataListRef, deletedIdsRef } = const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
useUpdateChunkedList({ events: ['UPDATE'],
events: ['UPDATE'], dataList: dataSource.dataList,
dataList: dataSource.dataList, setDataList(list, opts?: any) {
setDataList(list, opts?: any) { setDataSource((pre) => {
setDataSource((pre) => { return {
return { total: pre.total,
total: pre.total, loading: false,
loading: false, dataList: list,
dataList: list, deletedIds: opts?.deletedIds || []
deletedIds: opts?.deletedIds || [] };
}; });
}); }
} });
});
const getWorkerList = async () => { const getWorkerList = async () => {
try { try {