mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Fix title encodding.
This commit is contained in:
parent
624cb6ce0e
commit
0d2da200d6
@ -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;
|
@ -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;
|
||||||
|
}
|
||||||
|
`;
|
@ -41,6 +41,7 @@
|
|||||||
<li><a href="/viewmode.html?id=complex">Complex</a></li>
|
<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=huge">Huge</a></li>
|
||||||
<li><a href="/viewmode.html?id=icon-sample">Icon Sample</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>
|
</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>
|
<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>
|
<ul>
|
||||||
|
@ -0,0 +1,3 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
|
||||||
|
<map version="tango"><topic central="true" text="😀😀😀😀😀😀😀😀"/></map>
|
@ -227,9 +227,9 @@ export default class RestClient implements Client {
|
|||||||
const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
|
const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
|
||||||
this.axios
|
this.axios
|
||||||
.post(
|
.post(
|
||||||
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(model.title)}&description=${
|
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
|
||||||
model.description ? model.description : ''
|
model.title,
|
||||||
}`,
|
)}&description=${encodeURIComponent(model.description ? model.description : '')}`,
|
||||||
model.content,
|
model.content,
|
||||||
{ headers: { 'Content-Type': 'application/xml' } },
|
{ 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) => {
|
const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
|
||||||
this.axios
|
this.axios
|
||||||
.post(
|
.post(
|
||||||
`${this.baseUrl}/c/restful/maps?title=${model.title}&description=${
|
`${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
|
||||||
model.description ? model.description : ''
|
model.title,
|
||||||
}`,
|
)}&description=${encodeURIComponent(model.description ? model.description : '')}`,
|
||||||
null,
|
null,
|
||||||
{ headers: { 'Content-Type': 'application/json' } },
|
{ headers: { 'Content-Type': 'application/json' } },
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user