diff --git a/packages/editor/src/components/action-widget/pane/map-title/index.tsx b/packages/editor/src/components/action-widget/pane/map-title/index.tsx new file mode 100644 index 00000000..6a02a6b6 --- /dev/null +++ b/packages/editor/src/components/action-widget/pane/map-title/index.tsx @@ -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('disabled'); + const [title, setTitle] = useState(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 ( + + + {state === 'disabled' ? ( + + {title} + + ) : ( + setTitle(event.target.value)} + id="title-input" + /> + )} + + + ); +}; + +export default MapTitle; diff --git a/packages/editor/src/components/action-widget/pane/map-title/styled.ts b/packages/editor/src/components/action-widget/pane/map-title/styled.ts new file mode 100644 index 00000000..f31ed14c --- /dev/null +++ b/packages/editor/src/components/action-widget/pane/map-title/styled.ts @@ -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; + } +`; diff --git a/packages/editor/test/playground/index.html b/packages/editor/test/playground/index.html index 944a660d..b87eeed9 100644 --- a/packages/editor/test/playground/index.html +++ b/packages/editor/test/playground/index.html @@ -41,6 +41,7 @@
  • Complex
  • Huge
  • Icon Sample
    • +
  • UTF-8 Emoji

    • Editor Mode:Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.