Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix applicationStateModel serialization

Browse source
This commit is contained in:
Eric NGUYEN 2022-10-12 16:03:03 +02:00
parent d1881ae8fa
commit aa15425dbc
5 changed files with 17 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

16
public/workers/message_worker.js
View file

@ -9,7 +9,7 @@ onmessage = async(e) => {
const request = {
ApplicationState: state
};
const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
const dataParsed = JSON.stringify(request, GetCircularReplacer());
fetch(url, {
method: 'POST',
headers: new Headers({
@ -26,13 +26,25 @@ onmessage = async(e) => {
});
};
function GetCircularReplacerKeepDataStructure()
function GetCircularReplacer()
{
return (key, value) => {
if (key === 'parent') {
return;
}
if (key === 'containers') {
return Array.from(value.entries());
}
if (key === 'symbols') {
return Array.from(value.entries());
}
if (key === 'linkedContainers') {
return Array.from(value);
}
return value;
};
}

2
src/Components/Messages/Messages.tsx
View file

@ -4,8 +4,6 @@ import { FixedSizeList as List } from 'react-window';
import { MessageType } from '../../Enums/MessageType';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
interface IMessagesProps {

131
src/Components/MessagesSidebar/Messages.tsx
View file

@ -1,131 +0,0 @@
import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { API_GET_FEEDBACK_URL } from '../../../public/svgld-settings';
import { MessageType } from '../../Enums/MessageType';
import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
interface IMessagesSidebarProps {
historyState: IHistoryState
}
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
const myWorker = window.Worker && new Worker('workers/message_worker.js');
function UseWorker(
state: IHistoryState,
setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
): void {
React.useEffect(() => {
// use webworker for the stringify to avoid freezing
myWorker.postMessage({
state,
url: API_GET_FEEDBACK_URL
});
return () => {
};
}, [state]);
React.useEffect(() => {
myWorker.onmessage = (event) => {
setMessages(event.data as IMessage[]);
};
}, [setMessages]);
}
function UseAsync(
state: IHistoryState,
setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
): void {
React.useEffect(() => {
const request: IGetFeedbackRequest = {
// eslint-disable-next-line @typescript-eslint/naming-convention
ApplicationState: state
};
const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
fetch(API_GET_FEEDBACK_URL, {
method: 'POST',
headers: new Headers({
// eslint-disable-next-line @typescript-eslint/naming-convention
'Content-Type': 'application/json'
}),
body: dataParsed
})
.then(async(response) =>
await response.json()
)
.then(async(json: IGetFeedbackResponse) => {
setMessages(json.messages);
});
}, [state]);
}
export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
const [messages, setMessages] = React.useState<IMessage[]>([]);
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.Worker && !DISABLE_API) {
UseWorker(
props.historyState,
setMessages
);
} else if (!DISABLE_API) {
UseAsync(
props.historyState,
setMessages
);
}
function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
const reversedIndex = (messages.length - 1) - index;
const message = messages[reversedIndex];
let classType = '';
switch (message.type) {
case MessageType.Success:
classType = 'bg-green-400 hover:bg-green-400/60';
break;
case MessageType.Warning:
classType = 'bg-yellow-400 hover:bg-yellow-400/60';
break;
case MessageType.Error:
classType = 'bg-red-400 hover:bg-red-400/60';
break;
}
return (<p
key={`m-${reversedIndex}`}
className={`p-2 ${classType}`}
style={style}
>
{message.text}
</p>);
}
return (
// <button
// onClick={() => { setMessages([]); }}
// className='h-6'
// aria-label='Clear all messages'
// title='Clear all messages'
// >
// <TrashIcon className='heroicon'></TrashIcon>
// </button>
// </div>
<List
className='List md:text-xs font-bold'
itemCount={messages.length}
itemSize={65}
height={window.innerHeight - TITLE_BAR_HEIGHT}
width={'100%'}
>
{Row}
</List>
);
};

4
src/Components/UI/UseWorker.tsx
View file

@ -3,7 +3,7 @@ import { IHistoryState } from '../../Interfaces/IHistoryState';
import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
import { IMessage } from '../../Interfaces/IMessage';
import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
import { GetCircularReplacer } from '../../utils/saveload';
import { API_GET_FEEDBACK_URL } from '../../../public/svgld-settings';
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@ -37,7 +37,7 @@ export function UseAsync(
// eslint-disable-next-line @typescript-eslint/naming-convention
ApplicationState: state
};
const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
const dataParsed = JSON.stringify(request, GetCircularReplacer());
fetch(API_GET_FEEDBACK_URL, {
method: 'POST',
headers: new Headers({

2
src/utils/saveload.ts
View file

@ -60,7 +60,7 @@ export function GetCircularReplacer(): (key: any, value: object | Map<string, an
if (key === 'parent') {
return;
}
if (key === 'containers') {
return Array.from((value as Map<string, any>).entries());
}