Fix title encodding.

This commit is contained in:
Paulo Gustavo Veiga 2022-10-24 19:04:30 -07:00
parent 624cb6ce0e
commit 0d2da200d6
5 changed files with 136 additions and 6 deletions

View File

@ -0,0 +1,92 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useEffect, useState } from 'react';
import Tooltip from '@mui/material/Tooltip';
import { Typography } from '@mui/material';
import MapInfo from '../../../../classes/model/map-info';
import { TitleInput } from './styled';
import DesignerKeyboard from '@wisemapping/mindplot/src/components/DesignerKeyboard';
type MapTitleProp = {
mapInfo: MapInfo;
};
type Status = 'disabled' | 'enabled' | 'active-edition';
const MapTitle = ({ mapInfo }: MapTitleProp) => {
const [state, setState] = useState<Status>('disabled');
const [title, setTitle] = useState<string>(mapInfo.getTitle());
useEffect(() => {
if (state === 'active-edition') {
DesignerKeyboard.pause();
} else {
DesignerKeyboard.resume();
}
}, [state]);
const handleOnMouseEnter = (): void => {
if (state === 'disabled') {
setState('enabled');
}
};
const handleOnMouseLeave = (): void => {
if (state === 'enabled') {
setState('disabled');
}
};
const handleOnClick = (): void => {
setState('active-edition');
};
const handleSubmit = (e: React.KeyboardEvent): void => {
console.log(e.key);
if (e.key === 'Enter') {
setState('disabled');
}
};
return (
<Tooltip title={title}>
<span onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
{state === 'disabled' ? (
<Typography
className="truncated"
variant="body1"
component="div"
sx={{ marginX: '1.5rem' }}
>
{title}
</Typography>
) : (
<TitleInput
style={{ width: title.length + 'ch' }}
onClick={handleOnClick}
value={title}
onKeyDown={handleSubmit}
onChange={(event) => setTitle(event.target.value)}
id="title-input"
/>
)}
</span>
</Tooltip>
);
};
export default MapTitle;

View File

@ -0,0 +1,34 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import styled from 'styled-components';
export const TitleInput = styled.input`
margin: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.00938em;
margin-left: 1.3rem;
margin-right: 1.3rem;
background-color: #f5f5f5;
border: 1px gray dashed;
&:focus {
border: 1px black solid;
}
`;

View File

@ -41,6 +41,7 @@
<li><a href="/viewmode.html?id=complex">Complex</a></li>
<li><a href="/viewmode.html?id=huge">Huge</a></li>
<li><a href="/viewmode.html?id=icon-sample">Icon Sample</a></li>
<li><a href="/viewmode.html?id=emoji">UTF-8 Emoji</a></li>
</ul>
<p><span class="section">Editor Mode:</span>Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</p>
<ul>

View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<map version="tango"><topic central="true" text="😀😀😀😀😀😀😀😀"/></map>

View File

@ -227,9 +227,9 @@ export default class RestClient implements Client {
const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
this.axios
.post(
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(model.title)}&description=${
model.description ? model.description : ''
}`,
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
model.title,
)}&description=${encodeURIComponent(model.description ? model.description : '')}`,
model.content,
{ headers: { 'Content-Type': 'application/xml' } },
)
@ -382,9 +382,9 @@ export default class RestClient implements Client {
const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
this.axios
.post(
`${this.baseUrl}/c/restful/maps?title=${model.title}&description=${
model.description ? model.description : ''
}`,
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
model.title,
)}&description=${encodeURIComponent(model.description ? model.description : '')}`,
null,
{ headers: { 'Content-Type': 'application/json' } },
)