tiptap: add center method in mind

2022-04-26 19:13:37 +08:00 · 2022-04-26 19:13:37 +08:00 · 2e6a013203
parent 08860dffee
commit 2e6a013203
11 changed files with 750 additions and 3818 deletions
--- a/packages/client/global.d.ts
+++ b/packages/client/global.d.ts
@ -0,0 +1,3 @@
+interface Window {
+  kityminder: any;
+}
--- a/packages/client/src/components/resizeable/resizeable.tsx
+++ b/packages/client/src/components/resizeable/resizeable.tsx
@ -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 });
+        },
      },
    });
  }, []);
--- a/packages/client/src/tiptap/extensions/mind.ts
+++ b/packages/client/src/tiptap/extensions/mind.ts
@ -51,6 +51,10 @@ export const Mind = Node.create({
        default: 100,
        parseHTML: getDatasetAttribute('zoom'),
      },
+      callCenterCount: {
+        default: 0,
+        parseHTML: (element) => Number(getDatasetAttribute('callcentercount')(element)),
+      },
    };
  },

--- a/packages/client/src/tiptap/menus/mind/bubble.tsx
+++ b/packages/client/src/tiptap/menus/mind/bubble.tsx
@ -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)}
--- a/packages/client/src/tiptap/wrappers/mind/index.tsx
+++ b/packages/client/src/tiptap/wrappers/mind/index.tsx
@ -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 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,6 +187,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {

      {!isEditable && (
        <div className={styles.mindHandlerWrap}>
+          <Tooltip content="缩小">
            <Button
              size="small"
              theme="borderless"
@ -148,6 +195,8 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
              icon={<IconMinus style={{ fontSize: 14 }} />}
              onClick={setZoom('minus')}
            />
+          </Tooltip>
+          <Tooltip content="放大">
            <Button
              size="small"
              theme="borderless"
@ -155,6 +204,16 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
              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>
--- a/packages/client/src/tiptap/wrappers/mind/jsmind.jsx
+++ b/packages/client/src/tiptap/wrappers/mind/jsmind.jsx
--- a/packages/client/src/tiptap/wrappers/mind/kityminder/index.ts
+++ b/packages/client/src/tiptap/wrappers/mind/kityminder/index.ts
@ -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;
 };
--- a/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/module.js
+++ b/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/module.js
@ -1,4 +1,4 @@
-define(function(require, exports, module) {
+define(function (require, exports, module) {
  var kity = require('./kity');
  var utils = require('./utils');
  var Minder = require('./minder');
@ -6,18 +6,18 @@ define(function(require, exports, module) {
  /* 已注册的模块 */
  var _modules = {};

-    exports.register = function(name, module) {
+  exports.register = function (name, module) {
    _modules[name] = module;
  };

  /* 模块初始化 */
-    Minder.registerInitHook(function() {
+  Minder.registerInitHook(function () {
    this._initModules();
  });

  // 模块声明周期维护
  kity.extendClass(Minder, {
-        _initModules: function() {
+    _initModules: function () {
      var modulesPool = _modules;
      var modulesToLoad = this._options.modules || utils.keys(modulesPool);

@ -26,8 +26,7 @@ define(function(require, exports, module) {
      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++) {
@ -37,7 +36,7 @@ define(function(require, exports, module) {

        // 执行模块初始化，抛出后续处理对象

-                if (typeof(modulesPool[name]) == 'function') {
+        if (typeof modulesPool[name] == 'function') {
          moduleDeals = modulesPool[name].call(me);
        } else {
          moduleDeals = modulesPool[name];
@ -98,7 +97,6 @@ define(function(require, exports, module) {
        dealRenderers = moduleDeals.renderers;

        if (dealRenderers) {
-
          for (type in dealRenderers) {
            this._rendererClasses[type] = this._rendererClasses[type] || [];

@ -117,15 +115,15 @@ define(function(require, exports, module) {
      }
    },

-        _garbage: function() {
-            this.clearSelect();
+    _garbage: function () {
+      // this.clearSelect();

      while (this._root.getChildren().length) {
        this._root.removeChild(0);
      }
    },

-        destroy: function() {
+    destroy: function () {
      var modules = this._modules;

      this._resetEvents();
@ -137,7 +135,7 @@ define(function(require, exports, module) {
      }
    },

-        reset: function() {
+    reset: function () {
      var modules = this._modules;

      this._garbage();
@ -146,6 +144,6 @@ define(function(require, exports, module) {
        if (!modules[key].reset) continue;
        modules[key].reset.call(this);
      }
-        }
+    },
  });
 });
--- a/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/template.js
+++ b/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/core/template.js
@ -1,4 +1,4 @@
-define(function(require, exports, module) {
+define(function (require, exports, module) {
  var kity = require('./kity');
  var utils = require('./utils');
  var Minder = require('./minder');
@ -14,55 +14,61 @@ define(function(require, exports, module) {
  exports.register = register;

  utils.extend(Minder, {
-        getTemplateList: function() {
+    getTemplateList: function () {
      return _templates;
-        }
+    },
  });

-    kity.extendClass(Minder, (function() {
+  kity.extendClass(
+    Minder,
+    (function () {
      var originGetTheme = Minder.prototype.getTheme;
      return {
-            useTemplate: function(name, duration) {
+        useTemplate: function (name, duration) {
          this.setTemplate(name);
-                this.refresh(duration || 800);
+          this.refresh(duration || 500);
        },

-            getTemplate: function() {
+        getTemplate: function () {
          return this._template || 'default';
        },

-            setTemplate: function(name) {
+        setTemplate: function (name) {
          this._template = name || null;
        },

-            getTemplateSupport: function(method) {
+        getTemplateSupport: function (method) {
          var supports = _templates[this.getTemplate()];
          return supports && supports[method];
        },

-            getTheme: function(node) {
+        getTheme: function (node) {
          var support = this.getTemplateSupport('getTheme') || originGetTheme;
          return support.call(this, node);
-            }
+        },
      };
-    })());
+    })()
+  );

-
-    kity.extendClass(MinderNode, (function() {
+  kity.extendClass(
+    MinderNode,
+    (function () {
      var originGetLayout = MinderNode.prototype.getLayout;
      var originGetConnect = MinderNode.prototype.getConnect;
      return {
-            getLayout: function() {
+        getLayout: function () {
          var support = this.getMinder().getTemplateSupport('getLayout') || originGetLayout;
          return support.call(this, this);
        },

-            getConnect: function() {
+        getConnect: function () {
          var support = this.getMinder().getTemplateSupport('getConnect') || originGetConnect;
          return support.call(this, this);
-            }
+        },
      };
-    })());
+    })()
+  );
+  let timer = null;

  Module.register('TemplateModule', {
    /**
@ -75,18 +81,21 @@ define(function(require, exports, module) {
     * @return 返回当前的模板名称
     */
    commands: {
-            'template': kity.createClass('TemplateCommand', {
+      template: kity.createClass('TemplateCommand', {
        base: Command,

-                execute: function(minder, name) {
+        execute: function (minder, name) {
          minder.useTemplate(name);
+          clearTimeout(timer);
+          timer = setTimeout(() => {
            minder.execCommand('camera');
+          }, 550);
        },

-                queryValue: function(minder) {
+        queryValue: function (minder) {
          return minder.getTemplate() || 'default';
-                }
-            })
-        }
+        },
+      }),
+    },
  });
 });
--- a/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/module/view.js
+++ b/packages/client/src/tiptap/wrappers/mind/kityminder/kity-core/module/view.js
@ -1,4 +1,4 @@
-define(function(require, exports, module) {
+define(function (require, exports, module) {
  var kity = require('../core/kity');
  var utils = require('../core/utils');

@ -9,32 +9,32 @@ define(function(require, exports, module) {
  var Renderer = require('../core/render');

  var ViewDragger = kity.createClass('ViewDragger', {
-        constructor: function(minder) {
+    constructor: function (minder) {
      this._minder = minder;
      this._enabled = false;
      this._bind();
      var me = this;
-            this._minder.getViewDragger = function() {
+      this._minder.getViewDragger = function () {
        return me;
      };
      this.setEnabled(false);
    },

-        isEnabled: function() {
+    isEnabled: function () {
      return this._enabled;
    },

-        setEnabled: function(value) {
+    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() {
+    timeline: function () {
      return this._moveTimeline;
    },

-        move: function(offset, duration) {
+    move: function (offset, duration) {
      var minder = this._minder;

      var targetPosition = this.getMovement().offset(offset);
@ -42,22 +42,24 @@ define(function(require, exports, module) {
      this.moveTo(targetPosition, duration);
    },

-        moveTo: function(position, duration) {
-
+    moveTo: function (position, duration) {
      if (duration) {
        var dragger = this;

        if (this._moveTimeline) this._moveTimeline.stop();

-                this._moveTimeline = this._minder.getRenderContainer().animate(new kity.Animator(
-                    this.getMovement(),
-                    position,
-                    function(target, value) {
+        this._moveTimeline = this._minder
+          .getRenderContainer()
+          .animate(
+            new kity.Animator(this.getMovement(), position, function (target, value) {
              dragger.moveTo(value);
-                    }
-                ), duration, 'easeOutCubic').timeline();
+            }),
+            duration,
+            'easeOutCubic'
+          )
+          .timeline();

-                this._moveTimeline.on('finish', function() {
+        this._moveTimeline.on('finish', function () {
          dragger._moveTimeline = null;
        });

@ -68,16 +70,16 @@ define(function(require, exports, module) {
      this._minder.fire('viewchange');
    },

-        getMovement: function() {
+    getMovement: function () {
      var translate = this._minder.getRenderContainer().transform.translate;
      return translate ? translate[0] : new kity.Point();
    },

-        getView: function() {
+    getView: function () {
      var minder = this._minder;
      var c = minder._lastClientSize || {
        width: minder.getRenderTarget().clientWidth,
-                height: minder.getRenderTarget().clientHeight
+        height: minder.getRenderTarget().clientHeight,
      };
      var m = this.getMovement();
      var box = new kity.Box(0, 0, c.width, c.height);
@ -85,7 +87,7 @@ define(function(require, exports, module) {
      return viewMatrix.inverse().translate(-m.x, -m.y).transformBox(box);
    },

-        _bind: function() {
+    _bind: function () {
      var dragger = this,
        isTempDrag = false,
        lastPosition = null,
@ -94,7 +96,6 @@ define(function(require, exports, module) {
      function dragEnd(e) {
        if (!lastPosition) return;

-
        lastPosition = null;

        e.stopPropagation();
@ -103,8 +104,7 @@ define(function(require, exports, module) {
        if (isTempDrag) {
          dragger.setEnabled(false);
          isTempDrag = false;
-                    if (dragger._minder.getStatus() == 'hand')
-                        dragger._minder.rollbackStatus();
+          if (dragger._minder.getStatus() == 'hand') dragger._minder.rollbackStatus();
        }
        var paper = dragger._minder.getPaper();
        paper.setStyle('cursor', dragger._minder.getStatus() == 'hand' ? '-webkit-grab' : 'default');
@ -112,10 +112,12 @@ define(function(require, exports, module) {
        dragger._minder.fire('viewchanged');
      }

-            this._minder.on('normal.mousedown normal.touchstart ' +
+      this._minder
+        .on(
+          'normal.mousedown normal.touchstart ' +
            'inputready.mousedown inputready.touchstart ' +
            'readonly.mousedown readonly.touchstart',
-                function(e) {
+          function (e) {
            if (e.originEvent.button == 2) {
              e.originEvent.preventDefault(); // 阻止中键拉动
            }
@ -124,12 +126,14 @@ define(function(require, exports, module) {
              lastPosition = e.getPosition('view');
              isTempDrag = true;
            }
-                })
+          }
+        )

-            .on('normal.mousemove normal.touchmove ' +
+        .on(
+          'normal.mousemove normal.touchmove ' +
            'readonly.mousemove readonly.touchmove ' +
            'inputready.mousemove inputready.touchmove',
-                function(e) {
+          function (e) {
            if (e.type == 'touchmove') {
              e.preventDefault(); // 阻止浏览器的后退事件
            }
@ -140,9 +144,10 @@ define(function(require, exports, module) {
              var paper = dragger._minder.getPaper();
              paper.setStyle('cursor', '-webkit-grabbing');
            }
-                })
+          }
+        )

-            .on('hand.beforemousedown hand.beforetouchstart', function(e) {
+        .on('hand.beforemousedown hand.beforetouchstart', function (e) {
          // 已经被用户打开拖放模式
          if (dragger.isEnabled()) {
            lastPosition = e.getPosition('view');
@ -152,7 +157,7 @@ define(function(require, exports, module) {
          }
        })

-            .on('hand.beforemousemove hand.beforetouchmove', function(e) {
+        .on('hand.beforemousemove hand.beforetouchmove', function (e) {
          if (lastPosition) {
            currentPosition = e.getPosition('view');

@ -169,14 +174,13 @@ define(function(require, exports, module) {
        .on('mouseup touchend', dragEnd);

      window.addEventListener('mouseup', dragEnd);
-            this._minder.on('contextmenu', function(e) {
+      this._minder.on('contextmenu', function (e) {
        e.preventDefault();
      });
-        }
+    },
  });

-    Module.register('View', function() {
-
+  Module.register('View', function () {
    var km = this;

    /**
@ -188,20 +192,18 @@ define(function(require, exports, module) {
     */
    var ToggleHandCommand = kity.createClass('ToggleHandCommand', {
      base: Command,
-            execute: function(minder) {
-
+      execute: function (minder) {
        if (minder.getStatus() != 'hand') {
          minder.setStatus('hand', true);
        } else {
          minder.rollbackStatus();
        }
        this.setContentChanged(false);
-
      },
-            queryState: function(minder) {
+      queryState: function (minder) {
        return minder.getStatus() == 'hand' ? 1 : 0;
      },
-            enableReadOnly: true
+      enableReadOnly: true,
    });

    /**
@ -214,20 +216,32 @@ define(function(require, exports, module) {
     */
    var CameraCommand = kity.createClass('CameraCommand', {
      base: Command,
-            execute: function(km, focusNode) {
+      execute: function (km, focusNode) {
+        const dragger = km._viewDragger;
+        const duration = km.getOption('viewAnimationDuration');
+        let dx = 0;
+        let dy = 0;

-                focusNode = focusNode || km.getRoot();
+        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');
-                var dx = viewport.center.x - offset.x - offset.width / 2,
+          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
+      enableReadOnly: true,
    });

    /**
@ -245,7 +259,7 @@ define(function(require, exports, module) {
    var MoveCommand = kity.createClass('MoveCommand', {
      base: Command,

-            execute: function(km, dir) {
+      execute: function (km, dir) {
        var dragger = km._viewDragger;
        var size = km._lastClientSize;
        var duration = km.getOption('viewAnimationDuration');
@ -265,77 +279,72 @@ define(function(require, exports, module) {
        }
      },

-            enableReadOnly: true
+      enableReadOnly: true,
    });

    return {
-            init: function() {
+      init: function () {
        this._viewDragger = new ViewDragger(this);
      },
      commands: {
-                'hand': ToggleHandCommand,
-                'camera': CameraCommand,
-                'move': MoveCommand
+        hand: ToggleHandCommand,
+        camera: CameraCommand,
+        move: MoveCommand,
      },
      events: {
-                statuschange: function(e) {
+        'statuschange': function (e) {
          this._viewDragger.setEnabled(e.currentStatus == 'hand');
        },
-                mousewheel: function(e) {
+        '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
+            y: dy / 2.5,
          });

          var me = this;
          clearTimeout(this._mousewheeltimer);
-                    this._mousewheeltimer = setTimeout(function() {
+          this._mousewheeltimer = setTimeout(function () {
            me.fire('viewchanged');
          }, 100);

          e.preventDefault();
        },
-                'normal.dblclick readonly.dblclick': function(e) {
+        'normal.dblclick readonly.dblclick': function (e) {
          if (e.kityEvent.targetShape instanceof kity.Paper) {
            this.execCommand('camera', this.getRoot(), 800);
          }
        },
-                'paperrender finishInitHook': function() {
+        'paperrender finishInitHook': function () {
          if (!this.getRenderTarget()) {
            return;
          }
          this.execCommand('camera', null, 0);
          this._lastClientSize = {
            width: this.getRenderTarget().clientWidth,
-                        height: this.getRenderTarget().clientHeight
+            height: this.getRenderTarget().clientHeight,
          };
        },
-                resize: function(e) {
+        'resize': function (e) {
          var a = {
              width: this.getRenderTarget().clientWidth,
-                            height: this.getRenderTarget().clientHeight
+              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._viewDragger.move(new kity.Point(((a.width - b.width) / 2) | 0, ((a.height - b.height) / 2) | 0));
          this._lastClientSize = a;
        },
-                'selectionchange layoutallfinish': function(e) {
+        'selectionchange layoutallfinish': function (e) {
          var selected = this.getSelectedNode();
          var minder = this;

@ -359,24 +368,23 @@ define(function(require, exports, module) {
           *
           * fixed bug : 初始化的时候中心节点位置不固定（有的时候在左上角，有的时候在中心）
           * */
-                    if (timeline){
-                        timeline.on('finish', function() {
+          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;
+          var dx = 0,
+            dy = 0;

          if (focus.right > view.right) {
            dx += view.right - focus.right - space;
-                    }
-                    else if (focus.left < view.left) {
+          } else if (focus.left < view.left) {
            dx += view.left - focus.left + space;
          }

@ -388,10 +396,8 @@ define(function(require, exports, module) {
          }

          if (dx || dy) dragger.move(new kity.Point(dx, dy), 100);
-
-
-                }
-            }
+        },
+      },
    };
  });
 });
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@ -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"]
 }