tiptap: add title

This commit is contained in:
fantasticit 2022-06-05 19:33:22 +08:00
parent fbc6673118
commit f24b00a6ec
4 changed files with 68 additions and 47 deletions

View File

@ -20,10 +20,28 @@
} }
} }
.title {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
.icon {
display: flex;
width: 18px;
height: 18px;
color: #fff;
background-color: #f80;
border-radius: 2px;
justify-content: center;
align-items: center;
}
}
.toolbarWrap { .toolbarWrap {
position: absolute; position: absolute;
right: 20px; right: 10px;
bottom: 20px; bottom: 10px;
z-index: 2; z-index: 2;
display: flex; display: flex;
padding: 2px 4px; padding: 2px 4px;

View File

@ -1,7 +1,7 @@
import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui'; import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react'; import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons'; import { IconFlow, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
@ -13,7 +13,6 @@ import styles from './index.module.scss';
const { Text } = Typography; const { Text } = Typography;
const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' }; const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
const ICON_STYLE = { fontSize: '0.85em' };
export const FlowWrapper = ({ editor, node, updateAttributes }) => { export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable; const isEditable = editor.isEditable;
@ -22,7 +21,7 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
const { data, width, height } = node.attrs; const { data, width, height } = node.attrs;
const $graph = useRef(null); const $graph = useRef(null);
const $container = useRef<HTMLElement>(); const $container = useRef<HTMLElement>();
const [bgColor, setBgColor] = useState('var(--semi-color-fill-0)'); const [bgColor, setBgColor] = useState('var(--semi-color-bg-3)');
const [loading, toggleLoading] = useToggle(true); const [loading, toggleLoading] = useToggle(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@ -103,31 +102,20 @@ export const FlowWrapper = ({ editor, node, updateAttributes }) => {
{!loading && !error && <div style={{ maxHeight: '100%' }} ref={setMxgraph}></div>} {!loading && !error && <div style={{ maxHeight: '100%' }} ref={setMxgraph}></div>}
</div> </div>
<div className={styles.title}>
<Space>
<span className={styles.icon}>
<IconFlow />
</span>
</Space>
</div>
<div className={styles.toolbarWrap}> <div className={styles.toolbarWrap}>
<Space spacing={2}> <Space spacing={2}>
<Button <Button type="tertiary" theme="borderless" size="small" onClick={center} icon={<IconMindCenter />} />
type="tertiary" <Button type="tertiary" theme="borderless" size="small" onClick={zoomOut} icon={<IconZoomOut />} />
theme="borderless" <Button type="tertiary" theme="borderless" size="small" onClick={zoomIn} icon={<IconZoomIn />} />
size="small"
onClick={center}
icon={<IconMindCenter style={ICON_STYLE} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={zoomOut}
icon={<IconZoomOut style={ICON_STYLE} />}
/>
<Button
type="tertiary"
theme="borderless"
size="small"
onClick={zoomIn}
icon={<IconZoomIn style={ICON_STYLE} />}
/>
</Space> </Space>
</div> </div>
</Resizeable> </Resizeable>

View File

@ -13,10 +13,28 @@
} }
} }
.title {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
.icon {
display: flex;
width: 18px;
height: 18px;
color: #fff;
background-color: #f80;
border-radius: 2px;
justify-content: center;
align-items: center;
}
}
.mindHandlerWrap { .mindHandlerWrap {
position: absolute; position: absolute;
right: 20px; right: 10px;
bottom: 20px; bottom: 10px;
z-index: 2; z-index: 2;
padding: 2px 4px; padding: 2px 4px;
background-color: var(--semi-color-bg-2); background-color: var(--semi-color-bg-2);

View File

@ -1,7 +1,7 @@
import { Button, Spin, Typography } from '@douyinfe/semi-ui'; import { Button, Space, Spin, Typography } from '@douyinfe/semi-ui';
import { NodeViewWrapper } from '@tiptap/react'; import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames'; import cls from 'classnames';
import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons'; import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable'; import { Resizeable } from 'components/resizeable';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import deepEqual from 'deep-equal'; import deepEqual from 'deep-equal';
@ -110,33 +110,30 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
<div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div> <div style={{ height: '100%', maxHeight: '100%', overflow: 'hidden' }} ref={setMind}></div>
)} )}
<div className={styles.title}>
<Space>
<span className={styles.icon}>
<IconMind />
</span>
</Space>
</div>
<div className={styles.mindHandlerWrap}> <div className={styles.mindHandlerWrap}>
<Tooltip content="居中"> <Tooltip content="居中">
<Button <Button size="small" theme="borderless" type="tertiary" icon={<IconMindCenter />} onClick={setCenter} />
size="small"
theme="borderless"
type="tertiary"
icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
onClick={setCenter}
/>
</Tooltip> </Tooltip>
<Tooltip content="缩小"> <Tooltip content="缩小">
<Button <Button
size="small" size="small"
theme="borderless" theme="borderless"
type="tertiary" type="tertiary"
icon={<IconZoomOut style={{ fontSize: '0.85em' }} />} icon={<IconZoomOut />}
onClick={setZoom('minus')} onClick={setZoom('minus')}
/> />
</Tooltip> </Tooltip>
<Tooltip content="放大"> <Tooltip content="放大">
<Button <Button size="small" theme="borderless" type="tertiary" icon={<IconZoomIn />} onClick={setZoom('plus')} />
size="small"
theme="borderless"
type="tertiary"
icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
onClick={setZoom('plus')}
/>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>