Giter VIP home page Giter VIP logo

g6-editor's Introduction

G6-Editor

不再对外提供支持。 原先文档:https://github.com/antvis/g6-editor/files/3101934/G6-Editor.pdf

说明

G6-Editor 这个项目发布上线已经有 1 年多,最初我们的目的是为了给大家呈现 G6 能够做出什么,能够最终给大家提供开箱即用的解决方案,在业务上走通后进行开源。我们在 Demo 上增加了 4 个模板的支持,有很多用户直接在项目中使用,但是在整个过程中我们发现了一些难以解决的问题:

  • 图编辑器的场景过于复杂,每个业务的需求都有明确的差异,很难用一个模板覆盖一个领域
  • 开箱即用降低了用户接入的成本,但是屏蔽了底层 G6 的知识,将开发的坡度变成了巨大的台阶
  • 交互的细节在业务上有非常大的差异,一些交互同业务场景密切相关,必须要进行扩展或者修改
  • 答疑成本巨大,editor 的开发者无法坚持下去

我们的解决方案是对 G6 进行重构,对每个用户需要的功能通过机制来保证:

  • 自定义交互
  • 自定义节点
  • 自定义布局
  • 命令模式
  • 面板间的通信

都会在 G6 底层支持,我们也会提供简单编辑器的思路和流程。 谢谢大家的使用和反馈,恳请大家理解和支持。

g6-editor's People

Contributors

dxq613 avatar tomhuangcn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

g6-editor's Issues

锚点输入输出项的配置失效

环境

    "@antv/g2": "^3.2.6",
    "@antv/g6": "^2.1.0",
    "@antv/g6-editor": "^1.0.8",

用法

Flow.registerNode(
      'test',
      {
        anchor: [
          [
            1,
            0.5,
            {
              type: 'input', // 这里只允许输入
            },
          ],
 [
            1,
            1,
            {
              type: 'output', // 只允许输出
            },
          ],
        ],
      },
      'flow-node',
    );

关于锚点的这种写法是参考的官网上的例子,但是不起作用,仍然可以随意连接。
这种写法有问题吗

没有数据模型拓展接口

目前 只有node 和edge两种数据模型,希望提供注册自定义数据模型的接口,拖入不同的节点类型的时候 生成的节点对应相应的数据模型,而不是所有的节点 都是node的数据模型。

卡片与节点删除的回调没有作用

用了itemremove的监听,但没有作用。
代码如下:
this.page = new G6Editor.Flow({
graph: {
container: 'page',
}
});
this.page.on('itemremove', function(ev){
console.log(ev);
})

Cannot read property 'minX' of undefined

官方的 demo,启动后,打开 base 或者 modelFlow,在没有添加任何元素的情况下,鼠标滚轮或者拖拽都会报上述错误,添加过元素之后就没有报错了
ps,在线版的 demo 没有这个报错,不知道是不是版本的问题

在dva 或react项目中如何引用使用 ???

我npm i tnpm -g 无效,然后cpm istall的 组件中引入 import G6Editor from '@antv/g6-editor' 然后根据文档的第一步和第二步就会报错: TypeError: Cannot read property 'appendChild' of null
e.t.initContainer
D:/JointJS/jointJs/node_modules/
@[email protected]@@antv/g6-editor/build/g6Editor.js:1

Adding anchor to a group

I'd like to add anchor input/outputs to a group. Its necessary for a project I'm working on.

Happy to contribute.

FLow的配置项Grid中的line是一个什么对象

不是很清楚grid的用途,按我的理解应该是能够把背景替换为网格形式的。那么line应该是网格线的样式。可是没看到文档中给出这个对象的属性名。请问这个如何解决?

flow.read 异步读取数据

实例化 Flow 对象后,如果异步读取流程数据,会造成画布上的内容和 minimap 上面的内容不同。

image

image

Is there any plan to open source this project?

G6 edit is a pioneering library of schematic components, i have already seen G6 edit design, beautiful views and good Interactive for use, i am very want to see how to compute nodes location, move and connect Nodes, so, i want ask is there any plan to open source this project?

graph.read 传入空对象导致事件报错

现象
graph.read({}),会导致画布事件监听出错,比如 onMousemove 时,报错

场景
在 g6-editor 中,undo 代码调用的是 page.read(),若此时数据为空,则会导致报错

如何禁止已经连接节点的线段不被拖动?

目前没有找到方法,本人的解决办法是:
graph.on('dragstart', (ev)=>{
if(ev.shape && ev.shape.eventPreFix == 'edgeControlPoint') {
// 下段代码为报错代码,人为让该方法报错,可以阻止线段移动
xDom = domX, yDom = domY;
}
});

商业使用的授权协议

请问:

  • 在经过一些本地适配后感觉g6 editor能作为实际产品中的一部分后改如何获得授权,授权协议是怎样的(我们老大已经发邮件了但是没有回复)?
  • 是否受@antv/g6-plugins的GPL协议约束?(minimap貌似是g6 plugins里面的东西)

minimap的背景样式设置无效

我看API里minimap有viewportBackStyle、viewportWindowStyle来设置样式。

 new G6Editor.Minimap({
        container: 'minimap',
        height: 120,
        width: 200,
        viewportBackStyle: {
          fill: '#336699'
        }
      });

但实际上,渲染的dom元素里把背景色写死成白色了。设置的样式未生效。

<div class="g6-editor-minimap-container" style="background: rgb(255, 255, 255); position: absolute; overflow: hidden;">
...
</div>

如何在 g6-editor中使用 svg 渲染模式

项目中要使用自定DOM节点。文档上说要用svg渲染模式。但是并不能成功配置svg渲染模式

const page = new G6Editor.Flow({
      graph: {
        renderer: 'svg',
        container: 'page',
        height
      },
      align: {
        grid: true
      },
      noEndEdge: false,
      edgeResizeable: false
    });

请问下g6-editor中的选中节点激活这个怎么实现?

尝试用g6实现,不过这个地方block了

  G6.registerNode('NodeECS', {
    draw(item){
      const group = item.getGraphicGroup();
      group.addShape('text', {
        attrs: {
          x: 30,
          y: 0,
          fill: '#333',
          text: 'ECS'
        }
      });
      // group.addShape('rect', {
      //   attrs: {
      //     x: -5,
      //     y: -20,
      //     width:90,
      //     height:100,
      //     stroke: '#13c2c2'
      //   }
      // });
      group.addShape('image', {
        attrs: {
          x: 0,
          y: 0,
          width: 80,
          height: 80,
          img: require('../assets/ecs.svg')
        }
      });
      return group;
    },
    anchor: [
      [0.5, 1],
      [0,5, 0]
    ],
  });


  graph.on('node:mouseenter', function(ev) {
    console.log(ev.item);
    graph.update(ev.item, {
       //此处不清楚如何变更,文档针对model没有准确说明  
    });
  });

授权

您好:

得到授权后,代码中modelFlow.js 这些会提供源码吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.