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

tiptap: add center method in mind

This commit is contained in:
fantasticit 2022-04-26 19:13:37 +08:00
parent 08860dffee
commit 2e6a013203
11 changed files with 750 additions and 3818 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/global.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
interface Window {
kityminder: any;
}

9
packages/client/src/components/resizeable/resizeable.tsx
View File

@ -7,14 +7,15 @@ import styles from './style.module.scss';
interface IProps {
width: number;
height: number;
onChange: (arg: { width: number; height: number }) => void;
onChange?: (arg: { width: number; height: number }) => void;
onChangeEnd?: (arg: { width: number; height: number }) => void;
className?: string;
}
const MIN_WIDTH = 50;
const MIN_HEIGHT = 50;
export const Resizeable: React.FC<IProps> = ({ width, height, className, onChange, children }) => {
export const Resizeable: React.FC<IProps> = ({ width, height, className, onChange, onChangeEnd, children }) => {
const $container = useRef<HTMLDivElement>(null);
const $topLeft = useRef<HTMLDivElement>(null);
const $topRight = useRef<HTMLDivElement>(null);
@ -52,6 +53,10 @@ export const Resizeable: React.FC<IProps> = ({ width, height, className, onChang
Object.assign(event.target.dataset, { x, y });
onChange && onChange({ width, height });
},
end: function (event) {
let { width, height } = event.rect;
onChangeEnd && onChangeEnd({ width, height });
},
},
});
}, []);

4
packages/client/src/tiptap/extensions/mind.ts
View File

@ -51,6 +51,10 @@ export const Mind = Node.create({
default: 100,
parseHTML: getDatasetAttribute('zoom'),
},
callCenterCount: {
default: 0,
parseHTML: (element) => Number(getDatasetAttribute('callcentercount')(element)),
},
};
},

26
packages/client/src/tiptap/menus/mind/bubble.tsx
View File

@ -1,8 +1,7 @@
import { useCallback } from 'react';
import { useRouter } from 'next/router';
import cls from 'classnames';
import { Space, Button, List, Popover, Typography, RadioGroup, Radio } from '@douyinfe/semi-ui';
import { IconEdit, IconDelete } from '@douyinfe/semi-icons';
import { Space, Button, Popover, Typography } from '@douyinfe/semi-ui';
import { IconAlignCenter, IconDelete } from '@douyinfe/semi-icons';
import { Tooltip } from 'components/tooltip';
import { IconStructure, IconDrawBoard, IconZoomIn, IconZoomOut } from 'components/icons';
import { BubbleMenu } from '../../views/bubble-menu';
@ -15,7 +14,7 @@ import styles from './bubble.module.scss';
const { Text } = Typography;
export const MindBubbleMenu = ({ editor }) => {
const { template, theme, zoom } = editor.getAttributes(Mind.name);
const { template, theme, zoom, callCenterCount } = editor.getAttributes(Mind.name);
const setZoom = useCallback(
(type: 'minus' | 'plus') => {
@ -32,6 +31,18 @@ export const MindBubbleMenu = ({ editor }) => {
[editor, zoom]
);
const setCenter = useCallback(() => {
const nextValue = Number.isNaN(callCenterCount) ? 1 : Number(callCenterCount) + 1;
editor
.chain()
.updateAttributes(Mind.name, {
callCenterCount: nextValue,
})
.focus()
.run();
}, [editor, callCenterCount]);
const setTemplate = useCallback(
(template) => {
editor
@ -91,6 +102,11 @@ export const MindBubbleMenu = ({ editor }) => {
/>
</Tooltip>
<Tooltip content="居中">
<Button size="small" type="tertiary" theme="borderless" icon={<IconAlignCenter />} onClick={setCenter} />
</Tooltip>
<Divider />
<Popover
zIndex={10000}
spacing={10}
@ -103,6 +119,7 @@ export const MindBubbleMenu = ({ editor }) => {
{TEMPLATES.map((item) => {
return (
<li
key={item.label}
className={cls(template === item.value && styles.active)}
onClick={() => setTemplate(item.value)}
>
@ -130,6 +147,7 @@ export const MindBubbleMenu = ({ editor }) => {
{THEMES.map((item) => {
return (
<li
key={item.label}
className={cls(theme === item.value && styles.active)}
style={item.style || {}}
onClick={() => setTheme(item.value)}

147
packages/client/src/tiptap/wrappers/mind/index.tsx
View File

@ -1,10 +1,11 @@
import { NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { useCallback, useEffect, useRef } from 'react';
import { Spin, Button } from '@douyinfe/semi-ui';
import { IconMinus, IconPlus } from '@douyinfe/semi-icons';
import { Resizeable } from 'components/resizeable';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Spin, Button, Typography } from '@douyinfe/semi-ui';
import { IconMinus, IconPlus, IconAlignCenter } from '@douyinfe/semi-icons';
import deepEqual from 'deep-equal';
import { Resizeable } from 'components/resizeable';
import { Tooltip } from 'components/tooltip';
import { useToggle } from 'hooks/use-toggle';
import { MIN_ZOOM, MAX_ZOOM, ZOOM_STEP } from '../../menus/mind/constant';
import { clamp } from '../../utils/clamp';
@ -12,21 +13,54 @@ import { Mind } from '../../extensions/mind';
import { loadKityMinder } from './kityminder';
import styles from './index.module.scss';
const { Text } = Typography;
export const MindWrapper = ({ editor, node, updateAttributes }) => {
const $container = useRef();
const $mind = useRef<any>();
const isMindActive = editor.isActive(Mind.name);
const isEditable = editor.isEditable;
const { data, template, theme, zoom, width, height = 100 } = node.attrs;
const { data, template, theme, zoom, callCenterCount, width, height } = node.attrs;
const [loading, toggleLoading] = useToggle(true);
const [error, setError] = useState<Error | null>(null);
const content = useMemo(() => {
if (error) {
return (
<div style={{ width: '100%', height: '100%' }}>
<Text>{error.message || error}</Text>
</div>
);
}
if (loading) {
return <Spin spinning={loading} style={{ width: '100%', height: '100%' }}></Spin>;
}
return (
<div
ref={$container}
className={cls(styles.renderWrap, 'render-wrapper')}
tabIndex={0}
style={{ width: '100%', height: '100%' }}
></div>
);
}, [loading, error]);
const onResize = useCallback(
(size) => {
updateAttributes({ width: size.width, height: size.height });
setCenter();
},
[updateAttributes]
);
const setCenter = useCallback(() => {
const minder = $mind.current;
if (!minder) return;
minder.execCommand('camera');
}, []);
const setZoom = useCallback(
(type: 'minus' | 'plus') => {
return () => {
@ -50,30 +84,46 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
updateAttributes({ data: minder.exportJson() });
}, [updateAttributes]);
// 初始化
// 加载依赖
useEffect(() => {
loadKityMinder()
.then(() => {
toggleLoading(false);
})
.catch((e) => {
setError(e);
});
}, []);
// 初始化渲染
useEffect(() => {
if (loading || !$container.current) return;
const onChange = () => {
saveData();
};
loadKityMinder().then((Editor) => {
toggleLoading(false);
try {
const minder = new Editor($container.current).minder;
minder.importJson(data);
$mind.current = minder;
minder.on('contentChange', onChange);
} catch (e) {
//
}
});
try {
const Editor = window.kityminder.Editor;
const minder = new Editor($container.current).minder;
minder.importJson(data);
minder.execCommand('template', template);
minder.execCommand('theme', theme);
minder.execCommand('zoom', parseInt(zoom));
$mind.current = minder;
minder.on('contentChange', onChange);
toggleLoading(false);
} catch (e) {
setError(e);
}
return () => {
if ($mind.current) {
$mind.current.off('contentChange', onChange);
}
};
}, [toggleLoading]);
}, [loading]);
// 数据同步渲染
useEffect(() => {
@ -82,7 +132,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
const currentData = minder.exportJson();
const isEqual = deepEqual(currentData, data);
if (isEqual) return;
minder.importData(data);
// TODO: 也许刷新更好些
minder.importJson(data);
}, [data]);
// 布局
@ -118,21 +170,15 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
}
}, [isEditable]);
const content = loading ? (
<Spin spinning={loading} style={{ width: '100%', height: '100%' }}></Spin>
) : (
<div
ref={$container}
className={cls(styles.renderWrap, 'render-wrapper')}
tabIndex={0}
style={{ width: '100%', height: '100%' }}
></div>
);
// 居中
useEffect(() => {
setCenter();
}, [callCenterCount]);
return (
<NodeViewWrapper className={cls(styles.wrap, isMindActive && styles.isActive)}>
{isEditable ? (
<Resizeable width={width} height={height} onChange={onResize}>
<Resizeable width={width} height={height} onChangeEnd={onResize}>
{content}
</Resizeable>
) : (
@ -141,20 +187,33 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
{!isEditable && (
<div className={styles.mindHandlerWrap}>
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconMinus style={{ fontSize: 14 }} />}
onClick={setZoom('minus')}
/>
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconPlus style={{ fontSize: 14 }} />}
onClick={setZoom('plus')}
/>
<Tooltip content="缩小">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconMinus style={{ fontSize: 14 }} />}
onClick={setZoom('minus')}
/>
</Tooltip>
<Tooltip content="放大">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconPlus style={{ fontSize: 14 }} />}
onClick={setZoom('plus')}
/>
</Tooltip>
<Tooltip content="居中">
<Button
size="small"
theme="borderless"
type="tertiary"
icon={<IconAlignCenter style={{ fontSize: 14 }} />}
onClick={setCenter}
/>
</Tooltip>
</div>
)}
</NodeViewWrapper>

3172
packages/client/src/tiptap/wrappers/mind/jsmind.jsx
View File

File diff suppressed because it is too large Load Diff

10
packages/client/src/tiptap/wrappers/mind/kityminder/index.ts
View File

@ -1,9 +1,11 @@
export const loadKityMinder = async (): Promise<any> => {
if (typeof window !== 'undefined') {
if (window.kityminder) {
if (window.kityminder.Editor) return;
}
}
await import('kity');
await import('./kity-core/kityminder');
await import('./kity-editor/expose-editor');
const Editor = (window as any).kityminder.Editor;
return Editor;
};

278
packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/module.js
View File

@ -1,151 +1,149 @@
define(function(require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
define(function (require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
/* 已注册的模块 */
var _modules = {};
/* 已注册的模块 */
var _modules = {};
exports.register = function(name, module) {
_modules[name] = module;
};
exports.register = function (name, module) {
_modules[name] = module;
};
/* 模块初始化 */
Minder.registerInitHook(function() {
this._initModules();
});
/* 模块初始化 */
Minder.registerInitHook(function () {
this._initModules();
});
// 模块声明周期维护
kity.extendClass(Minder, {
_initModules: function() {
var modulesPool = _modules;
var modulesToLoad = this._options.modules || utils.keys(modulesPool);
// 模块声明周期维护
kity.extendClass(Minder, {
_initModules: function () {
var modulesPool = _modules;
var modulesToLoad = this._options.modules || utils.keys(modulesPool);
this._commands = {};
this._query = {};
this._modules = {};
this._rendererClasses = {};
this._commands = {};
this._query = {};
this._modules = {};
this._rendererClasses = {};
var i, name, type, module, moduleDeals,
dealCommands, dealEvents, dealRenderers;
var i, name, type, module, moduleDeals, dealCommands, dealEvents, dealRenderers;
var me = this;
for (i = 0; i < modulesToLoad.length; i++) {
name = modulesToLoad[i];
var me = this;
for (i = 0; i < modulesToLoad.length; i++) {
name = modulesToLoad[i];
if (!modulesPool[name]) continue;
if (!modulesPool[name]) continue;
// 执行模块初始化，抛出后续处理对象
// 执行模块初始化，抛出后续处理对象
if (typeof(modulesPool[name]) == 'function') {
moduleDeals = modulesPool[name].call(me);
} else {
moduleDeals = modulesPool[name];
}
this._modules[name] = moduleDeals;
if (!moduleDeals) continue;
if (moduleDeals.defaultOptions) {
me.setDefaultOptions(moduleDeals.defaultOptions);
}
if (moduleDeals.init) {
moduleDeals.init.call(me, this._options);
}
/**
* @Desc: 判断是否支持原生clipboard事件，如果支持，则对pager添加其监听
* @Editor: Naixor
* @Date: 2015.9.20
*/
/**
* 由于当前脑图解构问题，clipboard暂时全权交由玩不托管
* @Editor: Naixor
* @Date: 2015.9.24
*/
// if (name === 'ClipboardModule' && this.supportClipboardEvent && !kity.Browser.gecko) {
// var on = function () {
// var clipBoardReceiver = this.clipBoardReceiver || document;
// if (document.addEventListener) {
// clipBoardReceiver.addEventListener.apply(this, arguments);
// } else {
// arguments[0] = 'on' + arguments[0];
// clipBoardReceiver.attachEvent.apply(this, arguments);
// }
// }
// for (var command in moduleDeals.clipBoardEvents) {
// on(command, moduleDeals.clipBoardEvents[command]);
// }
// };
// command加入命令池子
dealCommands = moduleDeals.commands;
for (name in dealCommands) {
this._commands[name.toLowerCase()] = new dealCommands[name]();
}
// 绑定事件
dealEvents = moduleDeals.events;
if (dealEvents) {
for (type in dealEvents) {
me.on(type, dealEvents[type]);
}
}
// 渲染器
dealRenderers = moduleDeals.renderers;
if (dealRenderers) {
for (type in dealRenderers) {
this._rendererClasses[type] = this._rendererClasses[type] || [];
if (utils.isArray(dealRenderers[type])) {
this._rendererClasses[type] = this._rendererClasses[type].concat(dealRenderers[type]);
} else {
this._rendererClasses[type].push(dealRenderers[type]);
}
}
}
//添加模块的快捷键
if (moduleDeals.commandShortcutKeys) {
this.addCommandShortcutKeys(moduleDeals.commandShortcutKeys);
}
}
},
_garbage: function() {
this.clearSelect();
while (this._root.getChildren().length) {
this._root.removeChild(0);
}
},
destroy: function() {
var modules = this._modules;
this._resetEvents();
this._garbage();
for (var key in modules) {
if (!modules[key].destroy) continue;
modules[key].destroy.call(this);
}
},
reset: function() {
var modules = this._modules;
this._garbage();
for (var key in modules) {
if (!modules[key].reset) continue;
modules[key].reset.call(this);
}
if (typeof modulesPool[name] == 'function') {
moduleDeals = modulesPool[name].call(me);
} else {
moduleDeals = modulesPool[name];
}
});
});
this._modules[name] = moduleDeals;
if (!moduleDeals) continue;
if (moduleDeals.defaultOptions) {
me.setDefaultOptions(moduleDeals.defaultOptions);
}
if (moduleDeals.init) {
moduleDeals.init.call(me, this._options);
}
/**
* @Desc: 判断是否支持原生clipboard事件，如果支持，则对pager添加其监听
* @Editor: Naixor
* @Date: 2015.9.20
*/
/**
* 由于当前脑图解构问题，clipboard暂时全权交由玩不托管
* @Editor: Naixor
* @Date: 2015.9.24
*/
// if (name === 'ClipboardModule' && this.supportClipboardEvent && !kity.Browser.gecko) {
// var on = function () {
// var clipBoardReceiver = this.clipBoardReceiver || document;
// if (document.addEventListener) {
// clipBoardReceiver.addEventListener.apply(this, arguments);
// } else {
// arguments[0] = 'on' + arguments[0];
// clipBoardReceiver.attachEvent.apply(this, arguments);
// }
// }
// for (var command in moduleDeals.clipBoardEvents) {
// on(command, moduleDeals.clipBoardEvents[command]);
// }
// };
// command加入命令池子
dealCommands = moduleDeals.commands;
for (name in dealCommands) {
this._commands[name.toLowerCase()] = new dealCommands[name]();
}
// 绑定事件
dealEvents = moduleDeals.events;
if (dealEvents) {
for (type in dealEvents) {
me.on(type, dealEvents[type]);
}
}
// 渲染器
dealRenderers = moduleDeals.renderers;
if (dealRenderers) {
for (type in dealRenderers) {
this._rendererClasses[type] = this._rendererClasses[type] || [];
if (utils.isArray(dealRenderers[type])) {
this._rendererClasses[type] = this._rendererClasses[type].concat(dealRenderers[type]);
} else {
this._rendererClasses[type].push(dealRenderers[type]);
}
}
}
//添加模块的快捷键
if (moduleDeals.commandShortcutKeys) {
this.addCommandShortcutKeys(moduleDeals.commandShortcutKeys);
}
}
},
_garbage: function () {
// this.clearSelect();
while (this._root.getChildren().length) {
this._root.removeChild(0);
}
},
destroy: function () {
var modules = this._modules;
this._resetEvents();
this._garbage();
for (var key in modules) {
if (!modules[key].destroy) continue;
modules[key].destroy.call(this);
}
},
reset: function () {
var modules = this._modules;
this._garbage();
for (var key in modules) {
if (!modules[key].reset) continue;
modules[key].reset.call(this);
}
},
});
});

167
packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/template.js
View File

@ -1,92 +1,101 @@
define(function(require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
var Command = require('./command');
var MinderNode = require('./node');
var Module = require('./module');
define(function (require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
var Command = require('./command');
var MinderNode = require('./node');
var Module = require('./module');
var _templates = {};
var _templates = {};
function register(name, supports) {
_templates[name] = supports;
}
exports.register = register;
function register(name, supports) {
_templates[name] = supports;
}
exports.register = register;
utils.extend(Minder, {
getTemplateList: function() {
return _templates;
}
});
utils.extend(Minder, {
getTemplateList: function () {
return _templates;
},
});
kity.extendClass(Minder, (function() {
var originGetTheme = Minder.prototype.getTheme;
return {
useTemplate: function(name, duration) {
this.setTemplate(name);
this.refresh(duration || 800);
},
kity.extendClass(
Minder,
(function () {
var originGetTheme = Minder.prototype.getTheme;
return {
useTemplate: function (name, duration) {
this.setTemplate(name);
this.refresh(duration || 500);
},
getTemplate: function() {
return this._template || 'default';
},
getTemplate: function () {
return this._template || 'default';
},
setTemplate: function(name) {
this._template = name || null;
},
setTemplate: function (name) {
this._template = name || null;
},
getTemplateSupport: function(method) {
var supports = _templates[this.getTemplate()];
return supports && supports[method];
},
getTemplateSupport: function (method) {
var supports = _templates[this.getTemplate()];
return supports && supports[method];
},
getTheme: function(node) {
var support = this.getTemplateSupport('getTheme') || originGetTheme;
return support.call(this, node);
}
};
})());
getTheme: function (node) {
var support = this.getTemplateSupport('getTheme') || originGetTheme;
return support.call(this, node);
},
};
})()
);
kity.extendClass(
MinderNode,
(function () {
var originGetLayout = MinderNode.prototype.getLayout;
var originGetConnect = MinderNode.prototype.getConnect;
return {
getLayout: function () {
var support = this.getMinder().getTemplateSupport('getLayout') || originGetLayout;
return support.call(this, this);
},
kity.extendClass(MinderNode, (function() {
var originGetLayout = MinderNode.prototype.getLayout;
var originGetConnect = MinderNode.prototype.getConnect;
return {
getLayout: function() {
var support = this.getMinder().getTemplateSupport('getLayout') || originGetLayout;
return support.call(this, this);
},
getConnect: function () {
var support = this.getMinder().getTemplateSupport('getConnect') || originGetConnect;
return support.call(this, this);
},
};
})()
);
let timer = null;
getConnect: function() {
var support = this.getMinder().getTemplateSupport('getConnect') || originGetConnect;
return support.call(this, this);
}
};
})());
Module.register('TemplateModule', {
/**
* @command Template
* @description 设置当前脑图的模板
* @param {string} name 模板名称
* 允许使用的模板可以使用 `kityminder.Minder.getTemplateList()` 查询
* @state
* 0: 始终可用
* @return 返回当前的模板名称
*/
commands: {
template: kity.createClass('TemplateCommand', {
base: Command,
Module.register('TemplateModule', {
/**
* @command Template
* @description 设置当前脑图的模板
* @param {string} name 模板名称
* 允许使用的模板可以使用 `kityminder.Minder.getTemplateList()` 查询
* @state
* 0: 始终可用
* @return 返回当前的模板名称
*/
commands: {
'template': kity.createClass('TemplateCommand', {
base: Command,
execute: function (minder, name) {
minder.useTemplate(name);
clearTimeout(timer);
timer = setTimeout(() => {
minder.execCommand('camera');
}, 550);
},
execute: function(minder, name) {
minder.useTemplate(name);
minder.execCommand('camera');
},
queryValue: function(minder) {
return minder.getTemplate() || 'default';
}
})
}
});
});
queryValue: function (minder) {
return minder.getTemplate() || 'default';
},
}),
},
});
});

750
packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/module/view.js
View File

@ -1,397 +1,403 @@
define(function(require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
define(function (require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
var Minder = require('../core/minder');
var MinderNode = require('../core/node');
var Command = require('../core/command');
var Module = require('../core/module');
var Renderer = require('../core/render');
var Minder = require('../core/minder');
var MinderNode = require('../core/node');
var Command = require('../core/command');
var Module = require('../core/module');
var Renderer = require('../core/render');
var ViewDragger = kity.createClass('ViewDragger', {
constructor: function(minder) {
this._minder = minder;
this._enabled = false;
this._bind();
var me = this;
this._minder.getViewDragger = function() {
return me;
};
this.setEnabled(false);
},
var ViewDragger = kity.createClass('ViewDragger', {
constructor: function (minder) {
this._minder = minder;
this._enabled = false;
this._bind();
var me = this;
this._minder.getViewDragger = function () {
return me;
};
this.setEnabled(false);
},
isEnabled: function() {
return this._enabled;
},
isEnabled: function () {
return this._enabled;
},
setEnabled: function(value) {
var paper = this._minder.getPaper();
paper.setStyle('cursor', value ? 'pointer' : 'default');
paper.setStyle('cursor', value ? '-webkit-grab' : 'default');
this._enabled = value;
},
timeline: function() {
return this._moveTimeline;
},
setEnabled: function (value) {
var paper = this._minder.getPaper();
paper.setStyle('cursor', value ? 'pointer' : 'default');
paper.setStyle('cursor', value ? '-webkit-grab' : 'default');
this._enabled = value;
},
timeline: function () {
return this._moveTimeline;
},
move: function(offset, duration) {
var minder = this._minder;
move: function (offset, duration) {
var minder = this._minder;
var targetPosition = this.getMovement().offset(offset);
var targetPosition = this.getMovement().offset(offset);
this.moveTo(targetPosition, duration);
},
this.moveTo(targetPosition, duration);
},
moveTo: function(position, duration) {
moveTo: function (position, duration) {
if (duration) {
var dragger = this;
if (duration) {
var dragger = this;
if (this._moveTimeline) this._moveTimeline.stop();
if (this._moveTimeline) this._moveTimeline.stop();
this._moveTimeline = this._minder
.getRenderContainer()
.animate(
new kity.Animator(this.getMovement(), position, function (target, value) {
dragger.moveTo(value);
}),
duration,
'easeOutCubic'
)
.timeline();
this._moveTimeline = this._minder.getRenderContainer().animate(new kity.Animator(
this.getMovement(),
position,
function(target, value) {
dragger.moveTo(value);
}
), duration, 'easeOutCubic').timeline();
this._moveTimeline.on('finish', function () {
dragger._moveTimeline = null;
});
this._moveTimeline.on('finish', function() {
dragger._moveTimeline = null;
});
return this;
}
return this;
}
this._minder.getRenderContainer().setTranslate(position.round());
this._minder.fire('viewchange');
},
this._minder.getRenderContainer().setTranslate(position.round());
this._minder.fire('viewchange');
},
getMovement: function () {
var translate = this._minder.getRenderContainer().transform.translate;
return translate ? translate[0] : new kity.Point();
},
getMovement: function() {
var translate = this._minder.getRenderContainer().transform.translate;
return translate ? translate[0] : new kity.Point();
},
getView: function () {
var minder = this._minder;
var c = minder._lastClientSize || {
width: minder.getRenderTarget().clientWidth,
height: minder.getRenderTarget().clientHeight,
};
var m = this.getMovement();
var box = new kity.Box(0, 0, c.width, c.height);
var viewMatrix = minder.getPaper().getViewPortMatrix();
return viewMatrix.inverse().translate(-m.x, -m.y).transformBox(box);
},
getView: function() {
var minder = this._minder;
var c = minder._lastClientSize || {
width: minder.getRenderTarget().clientWidth,
height: minder.getRenderTarget().clientHeight
};
var m = this.getMovement();
var box = new kity.Box(0, 0, c.width, c.height);
var viewMatrix = minder.getPaper().getViewPortMatrix();
return viewMatrix.inverse().translate(-m.x, -m.y).transformBox(box);
},
_bind: function () {
var dragger = this,
isTempDrag = false,
lastPosition = null,
currentPosition = null;
_bind: function() {
var dragger = this,
isTempDrag = false,
lastPosition = null,
currentPosition = null;
function dragEnd(e) {
if (!lastPosition) return;
function dragEnd(e) {
if (!lastPosition) return;
lastPosition = null;
e.stopPropagation();
lastPosition = null;
e.stopPropagation();
// 临时拖动需要还原状态
if (isTempDrag) {
dragger.setEnabled(false);
isTempDrag = false;
if (dragger._minder.getStatus() == 'hand')
dragger._minder.rollbackStatus();
}
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', dragger._minder.getStatus() == 'hand' ? '-webkit-grab' : 'default');
dragger._minder.fire('viewchanged');
}
this._minder.on('normal.mousedown normal.touchstart ' +
'inputready.mousedown inputready.touchstart ' +
'readonly.mousedown readonly.touchstart',
function(e) {
if (e.originEvent.button == 2) {
e.originEvent.preventDefault(); // 阻止中键拉动
}
// 点击未选中的根节点临时开启
if (e.getTargetNode() == this.getRoot() || e.originEvent.button == 2 || e.originEvent.altKey) {
lastPosition = e.getPosition('view');
isTempDrag = true;
}
})
.on('normal.mousemove normal.touchmove ' +
'readonly.mousemove readonly.touchmove ' +
'inputready.mousemove inputready.touchmove',
function(e) {
if (e.type == 'touchmove') {
e.preventDefault(); // 阻止浏览器的后退事件
}
if (!isTempDrag) return;
var offset = kity.Vector.fromPoints(lastPosition, e.getPosition('view'));
if (offset.length() > 10) {
this.setStatus('hand', true);
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', '-webkit-grabbing');
}
})
.on('hand.beforemousedown hand.beforetouchstart', function(e) {
// 已经被用户打开拖放模式
if (dragger.isEnabled()) {
lastPosition = e.getPosition('view');
e.stopPropagation();
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', '-webkit-grabbing');
}
})
.on('hand.beforemousemove hand.beforetouchmove', function(e) {
if (lastPosition) {
currentPosition = e.getPosition('view');
// 当前偏移加上历史偏移
var offset = kity.Vector.fromPoints(lastPosition, currentPosition);
dragger.move(offset);
e.stopPropagation();
e.preventDefault();
e.originEvent.preventDefault();
lastPosition = currentPosition;
}
})
.on('mouseup touchend', dragEnd);
window.addEventListener('mouseup', dragEnd);
this._minder.on('contextmenu', function(e) {
e.preventDefault();
});
// 临时拖动需要还原状态
if (isTempDrag) {
dragger.setEnabled(false);
isTempDrag = false;
if (dragger._minder.getStatus() == 'hand') dragger._minder.rollbackStatus();
}
});
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', dragger._minder.getStatus() == 'hand' ? '-webkit-grab' : 'default');
Module.register('View', function() {
dragger._minder.fire('viewchanged');
}
var km = this;
/**
* @command Hand
* @description 切换抓手状态，抓手状态下，鼠标拖动将拖动视野，而不是创建选区
* @state
* 0: 当前不是抓手状态
* 1: 当前是抓手状态
*/
var ToggleHandCommand = kity.createClass('ToggleHandCommand', {
base: Command,
execute: function(minder) {
if (minder.getStatus() != 'hand') {
minder.setStatus('hand', true);
} else {
minder.rollbackStatus();
}
this.setContentChanged(false);
},
queryState: function(minder) {
return minder.getStatus() == 'hand' ? 1 : 0;
},
enableReadOnly: true
});
/**
* @command Camera
* @description 设置当前视野的中心位置到某个节点上
* @param {kityminder.MinderNode} focusNode 要定位的节点
* @param {number} duration 设置视野移动的动画时长（单位 ms），设置为 0 不使用动画
* @state
* 0: 始终可用
*/
var CameraCommand = kity.createClass('CameraCommand', {
base: Command,
execute: function(km, focusNode) {
focusNode = focusNode || km.getRoot();
var viewport = km.getPaper().getViewPort();
var offset = focusNode.getRenderContainer().getRenderBox('view');
var dx = viewport.center.x - offset.x - offset.width / 2,
dy = viewport.center.y - offset.y;
var dragger = km._viewDragger;
var duration = km.getOption('viewAnimationDuration');
dragger.move(new kity.Point(dx, dy), duration);
this.setContentChanged(false);
},
enableReadOnly: true
});
/**
* @command Move
* @description 指定方向移动当前视野
* @param {string} dir 移动方向
* 取值为 'left'，视野向左移动一半
* 取值为 'right'，视野向右移动一半
* 取值为 'up'，视野向上移动一半
* 取值为 'down'，视野向下移动一半
* @param {number} duration 视野移动的动画时长（单位 ms），设置为 0 不使用动画
* @state
* 0: 始终可用
*/
var MoveCommand = kity.createClass('MoveCommand', {
base: Command,
execute: function(km, dir) {
var dragger = km._viewDragger;
var size = km._lastClientSize;
var duration = km.getOption('viewAnimationDuration');
switch (dir) {
case 'up':
dragger.move(new kity.Point(0, size.height / 2), duration);
break;
case 'down':
dragger.move(new kity.Point(0, -size.height / 2), duration);
break;
case 'left':
dragger.move(new kity.Point(size.width / 2, 0), duration);
break;
case 'right':
dragger.move(new kity.Point(-size.width / 2, 0), duration);
break;
}
},
enableReadOnly: true
});
return {
init: function() {
this._viewDragger = new ViewDragger(this);
},
commands: {
'hand': ToggleHandCommand,
'camera': CameraCommand,
'move': MoveCommand
},
events: {
statuschange: function(e) {
this._viewDragger.setEnabled(e.currentStatus == 'hand');
},
mousewheel: function(e) {
var dx, dy;
e = e.originEvent;
if (e.ctrlKey || e.shiftKey) return;
if ('wheelDeltaX' in e) {
dx = e.wheelDeltaX || 0;
dy = e.wheelDeltaY || 0;
} else {
dx = 0;
dy = e.wheelDelta;
}
this._viewDragger.move({
x: dx / 2.5,
y: dy / 2.5
});
var me = this;
clearTimeout(this._mousewheeltimer);
this._mousewheeltimer = setTimeout(function() {
me.fire('viewchanged');
}, 100);
e.preventDefault();
},
'normal.dblclick readonly.dblclick': function(e) {
if (e.kityEvent.targetShape instanceof kity.Paper) {
this.execCommand('camera', this.getRoot(), 800);
}
},
'paperrender finishInitHook': function() {
if (!this.getRenderTarget()) {
return;
}
this.execCommand('camera', null, 0);
this._lastClientSize = {
width: this.getRenderTarget().clientWidth,
height: this.getRenderTarget().clientHeight
};
},
resize: function(e) {
var a = {
width: this.getRenderTarget().clientWidth,
height: this.getRenderTarget().clientHeight
},
b = this._lastClientSize;
this._viewDragger.move(
new kity.Point((a.width - b.width) / 2 | 0, (a.height - b.height) / 2 | 0));
this._lastClientSize = a;
},
'selectionchange layoutallfinish': function(e) {
var selected = this.getSelectedNode();
var minder = this;
/*
* Added by zhangbobell 2015.9.9
* windows 10 的 edge 浏览器在全部动画停止后，优先级图标不显示 text，
* 因此再次触发一次 render 事件，让浏览器重绘
* */
if (kity.Browser.edge) {
this.fire('paperrender');
}
if (!selected) return;
var dragger = this._viewDragger;
var timeline = dragger.timeline();
/*
* Added by zhangbobell 2015.09.25
* 如果之前有动画，那么就先暂时返回，等之前动画结束之后再次执行本函数
* 以防止 view 动画变动了位置，导致本函数执行的时候位置计算不对
*
* fixed bug : 初始化的时候中心节点位置不固定（有的时候在左上角，有的时候在中心）
* */
if (timeline){
timeline.on('finish', function() {
minder.fire('selectionchange');
});
return;
}
var view = dragger.getView();
var focus = selected.getLayoutBox();
var space = 50;
var dx = 0, dy = 0;
if (focus.right > view.right) {
dx += view.right - focus.right - space;
}
else if (focus.left < view.left) {
dx += view.left - focus.left + space;
}
if (focus.bottom > view.bottom) {
dy += view.bottom - focus.bottom - space;
}
if (focus.top < view.top) {
dy += view.top - focus.top + space;
}
if (dx || dy) dragger.move(new kity.Point(dx, dy), 100);
}
this._minder
.on(
'normal.mousedown normal.touchstart ' +
'inputready.mousedown inputready.touchstart ' +
'readonly.mousedown readonly.touchstart',
function (e) {
if (e.originEvent.button == 2) {
e.originEvent.preventDefault(); // 阻止中键拉动
}
};
// 点击未选中的根节点临时开启
if (e.getTargetNode() == this.getRoot() || e.originEvent.button == 2 || e.originEvent.altKey) {
lastPosition = e.getPosition('view');
isTempDrag = true;
}
}
)
.on(
'normal.mousemove normal.touchmove ' +
'readonly.mousemove readonly.touchmove ' +
'inputready.mousemove inputready.touchmove',
function (e) {
if (e.type == 'touchmove') {
e.preventDefault(); // 阻止浏览器的后退事件
}
if (!isTempDrag) return;
var offset = kity.Vector.fromPoints(lastPosition, e.getPosition('view'));
if (offset.length() > 10) {
this.setStatus('hand', true);
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', '-webkit-grabbing');
}
}
)
.on('hand.beforemousedown hand.beforetouchstart', function (e) {
// 已经被用户打开拖放模式
if (dragger.isEnabled()) {
lastPosition = e.getPosition('view');
e.stopPropagation();
var paper = dragger._minder.getPaper();
paper.setStyle('cursor', '-webkit-grabbing');
}
})
.on('hand.beforemousemove hand.beforetouchmove', function (e) {
if (lastPosition) {
currentPosition = e.getPosition('view');
// 当前偏移加上历史偏移
var offset = kity.Vector.fromPoints(lastPosition, currentPosition);
dragger.move(offset);
e.stopPropagation();
e.preventDefault();
e.originEvent.preventDefault();
lastPosition = currentPosition;
}
})
.on('mouseup touchend', dragEnd);
window.addEventListener('mouseup', dragEnd);
this._minder.on('contextmenu', function (e) {
e.preventDefault();
});
},
});
Module.register('View', function () {
var km = this;
/**
* @command Hand
* @description 切换抓手状态，抓手状态下，鼠标拖动将拖动视野，而不是创建选区
* @state
* 0: 当前不是抓手状态
* 1: 当前是抓手状态
*/
var ToggleHandCommand = kity.createClass('ToggleHandCommand', {
base: Command,
execute: function (minder) {
if (minder.getStatus() != 'hand') {
minder.setStatus('hand', true);
} else {
minder.rollbackStatus();
}
this.setContentChanged(false);
},
queryState: function (minder) {
return minder.getStatus() == 'hand' ? 1 : 0;
},
enableReadOnly: true,
});
});
/**
* @command Camera
* @description 设置当前视野的中心位置到某个节点上
* @param {kityminder.MinderNode} focusNode 要定位的节点
* @param {number} duration 设置视野移动的动画时长（单位 ms），设置为 0 不使用动画
* @state
* 0: 始终可用
*/
var CameraCommand = kity.createClass('CameraCommand', {
base: Command,
execute: function (km, focusNode) {
const dragger = km._viewDragger;
const duration = km.getOption('viewAnimationDuration');
let dx = 0;
let dy = 0;
if (!focusNode || focusNode.type === 'root') {
// 默认居中
const parentNode = km.getPaper().node;
const shapeNode = km.getRoot().rc.container.node;
const { width: pw, height: ph, x: px, y: py } = parentNode.getBoundingClientRect();
const { width: sw, height: sh, x, y } = shapeNode.getBBox();
dx = pw / 2 - x - sw / 2;
dy = ph / 2 - y - sh / 2;
dragger.moveTo(new kity.Point(dx, dy), duration);
} else {
var viewport = km.getPaper().getViewPort();
var offset = focusNode.getRenderContainer().getRenderBox('view');
dx = viewport.center.x - offset.x - offset.width / 2;
dy = viewport.center.y - offset.y;
dragger.move(new kity.Point(dx, dy), duration);
}
this.setContentChanged(false);
},
enableReadOnly: true,
});
/**
* @command Move
* @description 指定方向移动当前视野
* @param {string} dir 移动方向
* 取值为 'left'，视野向左移动一半
* 取值为 'right'，视野向右移动一半
* 取值为 'up'，视野向上移动一半
* 取值为 'down'，视野向下移动一半
* @param {number} duration 视野移动的动画时长（单位 ms），设置为 0 不使用动画
* @state
* 0: 始终可用
*/
var MoveCommand = kity.createClass('MoveCommand', {
base: Command,
execute: function (km, dir) {
var dragger = km._viewDragger;
var size = km._lastClientSize;
var duration = km.getOption('viewAnimationDuration');
switch (dir) {
case 'up':
dragger.move(new kity.Point(0, size.height / 2), duration);
break;
case 'down':
dragger.move(new kity.Point(0, -size.height / 2), duration);
break;
case 'left':
dragger.move(new kity.Point(size.width / 2, 0), duration);
break;
case 'right':
dragger.move(new kity.Point(-size.width / 2, 0), duration);
break;
}
},
enableReadOnly: true,
});
return {
init: function () {
this._viewDragger = new ViewDragger(this);
},
commands: {
hand: ToggleHandCommand,
camera: CameraCommand,
move: MoveCommand,
},
events: {
'statuschange': function (e) {
this._viewDragger.setEnabled(e.currentStatus == 'hand');
},
'mousewheel': function (e) {
var dx, dy;
e = e.originEvent;
if (e.ctrlKey || e.shiftKey) return;
if ('wheelDeltaX' in e) {
dx = e.wheelDeltaX || 0;
dy = e.wheelDeltaY || 0;
} else {
dx = 0;
dy = e.wheelDelta;
}
this._viewDragger.move({
x: dx / 2.5,
y: dy / 2.5,
});
var me = this;
clearTimeout(this._mousewheeltimer);
this._mousewheeltimer = setTimeout(function () {
me.fire('viewchanged');
}, 100);
e.preventDefault();
},
'normal.dblclick readonly.dblclick': function (e) {
if (e.kityEvent.targetShape instanceof kity.Paper) {
this.execCommand('camera', this.getRoot(), 800);
}
},
'paperrender finishInitHook': function () {
if (!this.getRenderTarget()) {
return;
}
this.execCommand('camera', null, 0);
this._lastClientSize = {
width: this.getRenderTarget().clientWidth,
height: this.getRenderTarget().clientHeight,
};
},
'resize': function (e) {
var a = {
width: this.getRenderTarget().clientWidth,
height: this.getRenderTarget().clientHeight,
},
b = this._lastClientSize;
this._viewDragger.move(new kity.Point(((a.width - b.width) / 2) | 0, ((a.height - b.height) / 2) | 0));
this._lastClientSize = a;
},
'selectionchange layoutallfinish': function (e) {
var selected = this.getSelectedNode();
var minder = this;
/*
* Added by zhangbobell 2015.9.9
* windows 10 的 edge 浏览器在全部动画停止后，优先级图标不显示 text，
* 因此再次触发一次 render 事件，让浏览器重绘
* */
if (kity.Browser.edge) {
this.fire('paperrender');
}
if (!selected) return;
var dragger = this._viewDragger;
var timeline = dragger.timeline();
/*
* Added by zhangbobell 2015.09.25
* 如果之前有动画，那么就先暂时返回，等之前动画结束之后再次执行本函数
* 以防止 view 动画变动了位置，导致本函数执行的时候位置计算不对
*
* fixed bug : 初始化的时候中心节点位置不固定（有的时候在左上角，有的时候在中心）
* */
if (timeline) {
timeline.on('finish', function () {
minder.fire('selectionchange');
});
return;
}
var view = dragger.getView();
var focus = selected.getLayoutBox();
var space = 50;
var dx = 0,
dy = 0;
if (focus.right > view.right) {
dx += view.right - focus.right - space;
} else if (focus.left < view.left) {
dx += view.left - focus.left + space;
}
if (focus.bottom > view.bottom) {
dy += view.bottom - focus.bottom - space;
}
if (focus.top < view.top) {
dy += view.top - focus.top + space;
}
if (dx || dy) dragger.move(new kity.Point(dx, dy), 100);
},
},
};
});
});

2
packages/client/tsconfig.json
View File

@ -30,6 +30,6 @@
"event/*": ["event/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["next-env.d.ts", "global.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}