3.1.1 目前不支持 minmap 功能吗

zibu15 commented 4 years ago

这个功能解决了什么问题

记得2.x 版本支持小图预览整个大图的功能，后面考虑添加吗

你所期望的 API 是怎样的

Ynewtime commented 4 years ago

minimap 可以通过 G6 直接注册呀。参考：

    import { G6 } from 'gg-editor'

    graph.addPlugin(
      new G6.Minimap({
        container: document.getElementById('minimapContainer'),
        size: [196, 200], // 需设置宽高
        className: 'minimapClass', // 自定义的样式类
      }),
    )
    /** 手动调用 paint 方法用于刷新页面，解决添加插件后 viewport 的边框未正确渲染的 bug */
    graph.paint()

eugeneblog commented 4 years ago

minimap 可以通过 G6 直接注册呀。参考：

    import { G6 } from 'gg-editor'

    graph.addPlugin(
      new G6.Minimap({
        container: document.getElementById('minimapContainer'),
        size: [196, 200], // 需设置宽高
        className: 'minimapClass', // 自定义的样式类
      }),
    )
    /** 手动调用 paint 方法用于刷新页面，解决添加插件后 viewport 的边框未正确渲染的 bug */
    graph.paint()

g6如何结合起来使用呢？

eugeneblog commented 4 years ago

/** 手动调用 paint 方法用于刷新页面，解决添加插件后 viewport 的边框未正确渲染的 bug */
    graph.paint()

import React from 'react';
import { withEditorContext, G6 } from 'gg-editor';
import { EditorContextProps } from 'gg-editor/lib/components/EditorContext';

interface WrappedClassComponentProps extends EditorContextProps {
  className?: string;
}

class MiniMap extends React.Component<WrappedClassComponentProps> {
  componentDidMount() {
    const { graph } = this.props;
    if (graph) {
      graph.addPlugin(
        new G6.Minimap({
          container: document.getElementById('minimapContainer') as HTMLDivElement,
          size: [196, 200], // 需设置宽高
        }),
      );
      /** 手动调用 paint 方法用于刷新页面，解决添加插件后 viewport 的边框未正确渲染的 bug */
      graph.paint();
    }
  }

  render() {
    return <div id="minimapContainer" className={this.props.className} />;
  }
}

/* 使用高阶组件连接上下文 */
export default withEditorContext<WrappedClassComponentProps, MiniMap>(MiniMap);

这样用正确吗？

Ynewtime commented 4 years ago

咦不需要把 Minimap 封装到一个组件呀，本身 minimap 只是一个插件，graph 配置时通过配置 plugin 字段或者实例化后调用 graph.addPlugin() 方法即可呢。

我之所以用的是实例化后调用 addPlugin 方法而不是全局配置，是因为我没有在应用渲染时就加载 minimap 到页面上去，而是隐藏在了一个 Popover 里面，需要用户手动触发。

推荐通过 Flow 的 graphConfig 配置:

<Flow graphConfig={
    // 一些初始化配置
    plugin: [minimap实例]
} />

具体请参考 GGEditor 源码和 G6 的插件章节说明。

SagittariusZhu commented 4 years ago

可以参考下面这个文档 https://www.showdoc.cc/antdprodemo?page_id=4588779673551127

zzjd commented 4 years ago

可以参考下面这个文档 https://www.showdoc.cc/antdprodemo?page_id=4588779673551127

链接失效了

ustbtaotao commented 3 years ago

这个功能解决了什么问题

记得2.x 版本支持小图预览整个大图的功能，后面考虑添加吗

你所期望的 API 是怎样的

v2.0.4 minimap = new G6.Plugins["tool.minimap"]({ container: "mini-map-container", size: [140, 240], className: "mini-map-container", }); <Mind graph={{ fitView: "cc", mode: "default", fitViewPadding: [10], plugins: [this.minimap], }}

/>

alibaba / GGEditor