gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/client/src/tiptap/core/wrappers/flow/index.module.scss
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 {
position: absolute;
right: 20px;
bottom: 20px;
right: 10px;
bottom: 10px;
z-index: 2;
display: flex;
padding: 2px 4px;

40
packages/client/src/tiptap/core/wrappers/flow/index.tsx
View File

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

22
packages/client/src/tiptap/core/wrappers/mind/index.module.scss
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 {
position: absolute;
right: 20px;
bottom: 20px;
right: 10px;
bottom: 10px;
z-index: 2;
padding: 2px 4px;
background-color: var(--semi-color-bg-2);

31
packages/client/src/tiptap/core/wrappers/mind/index.tsx
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 cls from 'classnames';
import { IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { IconMind, IconMindCenter, IconZoomIn, IconZoomOut } from 'components/icons';
import { Resizeable } from 'components/resizeable';
import { Tooltip } from 'components/tooltip';
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 className={styles.title}>
<Space>
<span className={styles.icon}>
<IconMind />
</span>
思维导图
</Space>
</div>
<div className={styles.mindHandlerWrap}>
<Tooltip content="居中">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconMindCenter style={{ fontSize: '0.85em' }} />}
onClick={setCenter}
/>
<Button size="small" theme="borderless" type="tertiary" icon={<IconMindCenter />} onClick={setCenter} />
</Tooltip>
<Tooltip content="缩小">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconZoomOut style={{ fontSize: '0.85em' }} />}
icon={<IconZoomOut />}
onClick={setZoom('minus')}
/>
</Tooltip>
<Tooltip content="放大">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconZoomIn style={{ fontSize: '0.85em' }} />}
onClick={setZoom('plus')}
/>
<Button size="small" theme="borderless" type="tertiary" icon={<IconZoomIn />} onClick={setZoom('plus')} />
</Tooltip>
</div>
</div>