antvis / x6 Goto Github PK

View Code? Open in Web Editor NEW

5.4K 60.0 1.6K 2.18 GB

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.

Home Page: https://x6.antv.antgroup.com

License: MIT License

JavaScript 1.19% TypeScript 95.05% Shell 0.04% Less 3.32% HTML 0.22% Vue 0.16%

diagramming graph svg antv graph-editor dag flowchart uml-diagram erdiagram diagram

x6's Introduction

简体中文 | English

X6 是 AntV 旗下的图编辑引擎

提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用

特性

🌱 　极易定制：支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
🚀 　开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
🧲 　数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
💯 　事件驱动：完备的事件系统，可以监听图表内发生的任何事件

兼容环境

现代浏览器
支持服务端渲染。

Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions

安装

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

示例

<div id="container" style="width: 600px; height: 400px"></div>

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
})

const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
})

graph.addEdge({
  source,
  target,
})

链接

本地开发

# 安装项目依赖和初始化构建
$ pnpm install

# 进入到指定项目开发和调试
cd packages/x6
pnpm run build:watch

# 启动 example 查看效果
cd examples/x6-example-features
pnpm run start

参与共建

如果希望参与到 X6 的开发中，请遵从我们的贡献指南。如果你贡献度足够活跃，你可以申请成为社区协作者。

开源协议

该项目的代码和文档基于 MIT License 开源协议。

x6's People

Contributors

Stargazers

Watchers

Forkers

totogo loongmxbt gujinyue1010 weishaoyu elecsim guozhaolong sujunming furthergazer 52flutter wittech handong890 david-message fengweijp sringly m1911star luwuqiang xml2008 suanmei chenxian01 moon989 lyn-boyu mambaproject jtsang4 nuspect-alan xqshu mtwebui qnanii carterli devinshi2019 chunwei lilydujinyan miaoxight azcdazw dreammy23 18cm xrkffgg caopanwei xinggangling 13616144387 orage714 xuhande 246369 yalong9528 yunzhan-hub 15129535208 edward6463 jebiao utopia1985 tianlunge jason-gyj ironpillar-sheng heibowang daigang666 renxiang0628 buggmaker business-creator chmodawk dengxiaofeng lisongwang sxsas zychefu kunerrick xuwendong731 liu-xiaodou yaoxyz dragonxu ian-grey wh12345 threelambs qimengjz ariesate lihuigang123 sskyy ycy747576 h18335339669 70207 rolyattsui lrc528 qianjujie mrluo2019 liuestc clarissahu jackgit yannicklerestif alamhubb picktarget cannli spacegithub czrzeishuai hackerwust yushukk klilalacloud chorin959 lhttq lanmushan sunshilou beyondjsc myxiaofu iamxue linmurrays

x6's Issues

refactor: panning-accessor and panning-manager

这两个类有雷同的部分。

支持通过选项禁用node热点连线功能

Expected Behavior

Possible Solution

Additional Context

支持通过选项禁用edge控制点渲染和交互

Expected Behavior

Possible Solution

Additional Context

minimap

Expected Behavior

目前功能缺失。

Possible Solution

可能需要注意的几个点：

支持配置 minimap 的细节程度，如只渲染节点、节点不渲染 label 等
支持配置 minimap 的节点/边的样式，如节点背景颜色等

Additional Context

minimap 通常用于一些重编辑场景，是图编辑框架的基础设施之一。

collapse-mamager 中名词统一

Expected Behavior

Current Behavior

Possible Solution

统一使用 collapse、collapsable 这类名词。

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

无限大画布

Expected Behavior

提供一种无限大的画布方案，与现在的固定画布大小方案一起，构成两种画布大小方案。通过选项指定使用哪种画布方案。

Possible Solution

暂时没有思考实现细节。

Additional Context

所谓“无限大画布”，其实不是真正的无限大，只是当添加节点到画布边缘时，根据视口大小自动扩大画布，相反情况时自动缩小画布。

Weekly Digest (29 December, 2019 - 5 January, 2020)

Here's the Weekly Digest for antvis/x6:

ISSUES

Last week 2 issues were created.
Of these, 0 issues have been closed and 2 issues are still open.

OPEN ISSUES

💚 #63 split main x6 module, by bubkoo
💚 #62 x6-example-drawio中的连线无法绘制, by loongmxbt

NOISY ISSUE

🔈 #63 split main x6 module, by bubkoo
It received 1 comments.

PULL REQUESTS

Last week, 2 pull requests were created, updated or merged.

UPDATED PULL REQUEST

Last week, 1 pull request was updated.
💛 #63 split main x6 module, by bubkoo

MERGED PULL REQUEST

Last week, 1 pull request was merged.
💜 #60 feat: react label, by bubkoo

COMMITS

Last week there were 4 commits.
🛠️ fix: update demo for minimap by bubkoo
🛠️ feat(minimap): custom cell style by cell itself by bubkoo
🛠️ docs: update usage by bubkoo
🛠️ feat(x6): add some convenient methods on namespace "x6" by bubkoo

CONTRIBUTORS

Last week there was 1 contributor.
👤 bubkoo

STARGAZERS

Last week there was 1 stargazer.
⭐ budlion
You are the star! 🌟

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository antvis/x6 to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

model, view 中的事件暴露在 graph 中，屏蔽内部概念

Expected Behavior

Possible Solution

Additional Context

feat: change the util export

Expected Behavior

import { util } from './util'

Possible Solution

Additional Context

可以大幅简化内部代码的编写冗余度。

简化 getAnchors 的返回值

  new Graph(container, { 
      getAnchors(cell) {
        if (cell != null && this.model.isNode(cell)) {
          return [
            new Anchor({ point: new Point(0.5, 0) }),
            new Anchor({ point: new Point(0, 0.5) }),
            new Anchor({ point: new Point(1, 0.5) }),
            new Anchor({ point: new Point(0.5, 1) }),
          ]
        }
        return null
      },
  })

每次都需要 new Point 和 new Anchor，有点繁琐。

Expected Behavior

  new Graph(container, { 
      getAnchors(cell) {
        if (cell != null && this.model.isNode(cell)) {
          return [
            [0.5, 0],
            [0, 0.5],
            [1, 0.5],
            [0.5, 1],
          ]
        }
        return null
      },
  })

Possible Solution

Additional Context

node and edge handler knob can be image shapes

Expected Behavior

支持图形把手。

Possible Solution

Additional Context

支持 Graph 方法链式调用

Expected Behavior

Possible Solution

Additional Context

Graph 类作为用户交互的核心类，其中包含大量方法，提供链式调用语法糖。

支持 toolbar 右对齐

Expected Behavior

Possible Solution

flex 默认支持右侧对齐
增加 align 选项

Additional Context

某些放在画布右上角的 toolbar 需要右侧对齐样式。

minimap addon

提供小地图导航扩展

增强从侧边栏拖入画布的交互

Expected Behavior

拖动进入画布时，触发画布上的一系列交互响应，就像在拖动画布内的节点一样。应该触发以下一些交互：

guide-line
在节点上放置拖拽结果时的响应
在边上放置拖拽结果时的响应

Possible Solution

根源上解决：拖拽进入画布后就创建真实的节点并跟着鼠标移动。

Additional Context

对 cell 提供 render 方法，提供更加灵活的自定义渲染能力

graph.addNode({
  x: 32,
  y: 32,
  width: 80,
  height: 40,
  render(this: Graph, container: HTMLElement | SVGElement, cell: Cell) { },
})

x6-example-drawio中的连线无法绘制

Expected Behavior

Current Behavior

General中的第6行3、4、5元素，第7行连线元素，拖动到画布后均为透明方框或方框，移动后有时会直接报错。

Possible Solution

Steps To Reproduce

运行drawio example
拖动 General中的第6行3、4、5元素，第7行连线元素
显示为白框或方框
再次拖动元素
报错
其余元素均正常

Error Message & Stack Trace

FlexArrowShape.drawEdgeShape
../../packages/x6/es/shape/arrow-connector.js:66
  63 |     pts[i0].y === pts[0].y) {
  64 |     i0 += 1;
  65 | }
> 66 | const dx = pts[i0].x - pts[0].x;
     | ^  67 | const dy = pts[i0].y - pts[0].y;
  68 | const dist = Math.sqrt(dx * dx + dy * dy);
  69 | if (dist === 0) {
View compiled
FlexArrowShape.draw
http://localhost:8000/umi.js:251327:22
  251324 |             pts.push(new _struct__WEBPACK_IMPORTED_MODULE_5__["Point"](p.x / s, p.y / s));
  251325 |         }
  251326 |     });
> 251327 |     this.drawEdgeShape(c, pts);
         |          ^  251328 | }
  251329 | else {
  251330 |     this.drawNodeShape(c, x, y, w, h);
View source
FlexArrowShape.redrawSvgShape
../../packages/x6/es/shape/shape-base.js:273
  270 | redrawSvgShape() {
  271 |     const canvas = this.createCanvas();
  272 |     if (canvas != null) {
> 273 |         this.draw(canvas);
      | ^  274 |         if (this.elem != null && this.elem !== canvas.root) {
  275 |             this.elem.insertAdjacentHTML('beforeend', canvas.root.outerHTML);
  276 |         }

Additional Context

Your Environment

yarn
x6: latest
OS: macOS Sierra
Browser: chrome and safari

Weekly Digest (8 December, 2019 - 15 December, 2019)

Here's the Weekly Digest for antvis/x6:

ISSUES

Last week 24 issues were created.
Of these, 12 issues have been closed and 12 issues are still open.

OPEN ISSUES

💚 #41 梳理 handler 中的 className, by bubkoo
💚 #40 提供 anchor 可连接性接口, by bubkoo
💚 #38 examples 无法启动, by BinWu1989
💚 #36 label spacing is inoperative, by bubkoo
💚 #33 add stylesheet for named shapes, by bubkoo
💚 #31 取消从data中取label, by bubkoo
💚 #30 支持通过选项禁用node热点连线功能, by bubkoo
💚 #29 支持通过选项禁用edge控制点渲染和交互, by bubkoo
💚 #27 增强从侧边栏拖入画布的交互, by bubkoo
💚 #26 连线过程中提示可连接的 anchor 或 port, by bubkoo
💚 #23 提供河流图DEMO, by bubkoo
💚 #21 refactor: panning-accessor and panning-manager, by bubkoo

CLOSED ISSUES

❤️ #39 支持用 Shape 创建 Anchor, by bubkoo
❤️ #37 Win下无法用delete键删除元素，只能使用Backspace键删除元素, by loongmxbt
❤️ #35 node and edge handler knob can be image shapes, by bubkoo
❤️ #34 add static method Image.fromSVG , by bubkoo
❤️ #32 feat: flowchart connection, by bubkoo
❤️ #28 简化 getAnchors 的返回值, by bubkoo
❤️ #25 支持 toolbar 右对齐, by bubkoo
❤️ #24 feat: flowchart editor, by bubkoo
❤️ #22 对无限大画布提供重新计算滚动区域特性, by bubkoo
❤️ #20 collapse-mamager 中名词统一, by bubkoo
❤️ #19 feat: change the util export, by bubkoo
❤️ #18 feat: infinity canvas, by bubkoo

NOISY ISSUE

🔈 #18 feat: infinity canvas, by bubkoo
It received 8 comments.

PULL REQUESTS

Last week, 3 pull requests were created, updated or merged.

MERGED PULL REQUEST

Last week, 3 pull requests were merged.
💜 #32 feat: flowchart connection, by bubkoo
💜 #24 feat: flowchart editor, by bubkoo
💜 #18 feat: infinity canvas, by bubkoo

COMMITS

CONTRIBUTORS

Last week there was 1 contributor.
👤 bubkoo

STARGAZERS

Last week there were 9 stagazers.
⭐ loongmxbt
⭐ tizzybec
⭐ dengfuping
⭐ zhanba
⭐ zxc0328
⭐ tkitesy
⭐ DorothyGuan
⭐ gigi1121
⭐ BinWu1989
You all are the stars! 🌟

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository antvis/x6 to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

add static method Image.fromSVG

Expected Behavior

Possible Solution

Additional Context

dispose => destroy

Expected Behavior

Possible Solution

Additional Context

redraw on changing the props of cell

Expected Behavior

Possible Solution

Additional Context

按模块拆分 Graph 类，提升可维护性。

Expected Behavior

按功能模块拆分 Graph 类到独立的文件中

Possible Solution

使用 TS 官方提供的 applyMixins 方案：

https://www.typescriptlang.org/docs/handbook/mixins.html

Additional Context

提升源码的可维护性。

feat: data driven

Expected Behavior

类似 D3 的数据驱动（x6 节点属性配置支持，如 x: (data: T) => number），完整的数据进 => 完整的数据出。

Possible Solution

graph.addNode({
    x: () => 240,
    y: () => 240,
    width: (data) => data.width,
    height: (data) => data.height,
    label: (data) => data.label,
})

Additional Context

Command 扩展

interface Command {
  name: string,
  shortcut?: string,
  handler: (graph: Graph, ...args[]) => any,
  enable: () => void,
  disable: () => void,
}

根据不同的业务提供语义性更强的 Command 系统
UI 组件监听 Command 状态变化并更新 UI 的可用性

提供 anchor 可连接性接口

Expected Behavior

Possible Solution

不可连接时就不渲染，进而保证改 anchor 不可交互。

Additional Context

列举几个可能的应用场景：

一个 anchor 只能连接一条边
anchor 有业务含义，只能连接某些类型的边

与 react 集成方案

Expected Behavior

支持使用 react 组件方式定义画布。

Possible Solution

暂时没有方案细节，可作为长远计划。当项目文档和接口稳定的时候，考虑对应的方案。

Additional Context

对无限大画布提供重新计算滚动区域特性

Expected Behavior

当窗口 resize 等操作导致 container resize 时，需要重新计算可滚动范围。

Possible Solution

在选项中提供开关，监听 window 或 container 的 resize 事件，调用 sizeDidChange 实现重新计算。

Additional Context

梳理 handler options，与 graph 的接口联动

Expected Behavior

Possible Solution

Additional Context

对 handler 的设置选项，除了初始化 Graph 时提供选项之外，还需要在 Graph 中提供相应的行为控制和样式控制接口，并保证 graph.options 中数据的一致性。

examples 无法启动

根据项目中的源代码,运行examples-drawio项目时，无法编译项目,启动时也无法启动
(1)npm install时出错,提示可能是权限问题,yarn install无该错误
(2)启动项目时出错,无法正常启动

基于新版 events 类，梳理自定义事件

Expected Behavior

xxx.on 进行事件监听时自动提示支持的事件名和可用的回调参数。

Possible Solution

Additional Context

梳理支持的自定义事件。
借助 TS 的能力给用户更好的开发体验。

Weekly Digest (22 December, 2019 - 29 December, 2019)

Here's the Weekly Digest for antvis/x6:

ISSUES

Last week 8 issues were created.
Of these, 6 issues have been closed and 2 issues are still open.

OPEN ISSUES

💚 #60 feat: react label, by bubkoo
💚 #57 请问如何导出或加载Graph的JSON数据？, by loongmxbt

CLOSED ISSUES

❤️ #59 label 交互问题, by bubkoo
❤️ #58 feat/react shape, by bubkoo
❤️ #56 feat(events): more readable event names, by bubkoo
❤️ #55 dispose => destroy, by bubkoo
❤️ #54 model, view 中的事件暴露在 graph 中，屏蔽内部概念, by bubkoo
❤️ #53 自动监测 container size 变化导致死循环，chrome 内存暴增, by bubkoo

NOISY ISSUE

🔈 #57 请问如何导出或加载Graph的JSON数据？, by loongmxbt
It received 1 comments.

PULL REQUESTS

Last week, 5 pull requests were created, updated or merged.

UPDATED PULL REQUEST

Last week, 1 pull request was updated.
💛 #60 feat: react label, by bubkoo

MERGED PULL REQUEST

Last week, 4 pull requests were merged.
💜 #59 label 交互问题, by bubkoo
💜 #58 feat/react shape, by bubkoo
💜 #56 feat(events): more readable event names, by bubkoo
💜 #51 feat: minimap, by bubkoo

COMMITS

CONTRIBUTORS

Last week there was 1 contributor.
👤 bubkoo

STARGAZERS

Last week there were 3 stagazers.
⭐ scaletimes
⭐ Z-torres
⭐ tarobjtu
You all are the stars! 🌟

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository antvis/x6 to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

梳理 handler 中的 className

Expected Behavior

Possible Solution

Additional Context

重构完成之后删除

https://github.com/antvis/x6/blob/300cc7d5701cc8689898d7ff03960f9312a88873/packages/x6/src/option/graph.ts#L858-L863

This issue was generated by todo based on a `TODO` comment in `300cc7d`. It's been assigned to @bubkoo because they committed the code.

label spacing is inoperative

Expected Behavior

Current Behavior

Possible Solution

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

基于数据直接渲染出整个图

Expected Behavior

Possible Solution

graph.render({
  node: [
    {id:1, x:10, y:10, width:100, height: 32}
    {id:2, x:80, y:80, width:100, height: 32}
  ],
  edges: [{ source: 1, target: 1 }]
})

Additional Context

"cell:connected" event triggered twice

Expected Behavior

Current Behavior

用一条边链接两个节点，触发两次 cell:connected 事件，分别对应边的起点和终点。

{edge: Cell, isSource: true, terminal: Cell, previous: undefined, anchor: undefined}
{edge: Cell, isSource: false, terminal: Cell, previous: undefined, anchor: undefined}

Possible Solution

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

打平 addNode 和 addEdge 选项

Expected Behavior

重构前

      const n1 = graph.addNode({
        data: 'Triangle',
        x: 20,
        y: 20,
        width: 80,
        height: 60,
        style: {
          shape: 'triangle',
          perimeter: 'triangle',
        },
      })

      const n2 = graph.addNode({
        data: 'Rectangle',
        x: 200,
        y: 20,
        width: 80,
        height: 30,
      })

      const n3 = graph.addNode({
        data: 'Ellipse',
        x: 200,
        y: 150,
        width: 80,
        height: 60,
        style: {
          shape: 'ellipse',
          perimeter: 'ellipse',
        },
      })

      graph.addEdge({
        source: n1,
        target: n3,
        data: 'label',
        style: {
          edge: 'elbow',
          elbow: 'horizontal',
          exitX: 0.5,
          exitY: 1,
          entryX: 0,
          entryY: 0,
          exitPerimeter: true,
          entryPerimeter: true,
        },
      })

重构之后

      const n1 = graph.addNode({
        data: 'Triangle',
        x: 20,
        y: 20,
        width: 80,
        height: 60,
        shape: 'triangle',
        perimeter: 'triangle',
      })

      const n2 = graph.addNode({
        data: 'Rectangle',
        x: 200,
        y: 20,
        width: 80,
        height: 30,
      })

      const n3 = graph.addNode({
        data: 'Ellipse',
        x: 200,
        y: 150,
        width: 80,
        height: 60,
        shape: 'ellipse',
        perimeter: 'ellipse',
      })

      graph.addEdge({
        source: n1,
        target: n3,
        data: 'label',
        edge: 'elbow',
        elbow: 'horizontal',
        exitX: 0.5,
        exitY: 1,
        entryX: 0,
        entryY: 0,
        exitPerimeter: true,
        entryPerimeter: true,
      })

Possible Solution

Additional Context

简化用户对内部概念的理解。

请问如何导出或加载Graph的JSON数据？

Expected Behavior

原先gg-editor或G6项目中通过data定义nodes和edges的json数据，可以方便找到Data或导出json。

import GGEditor, { Flow } from 'gg-editor';

const data = {
  nodes: [{
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '起止节点',
    x: 55,
    y: 55,
    id: 'ea1184e8',
    index: 0,
  }, {
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '结束节点',
    x: 55,
    y: 255,
    id: '481fbb1a',
    index: 2,
  }],
  edges: [{
    source: 'ea1184e8',
    sourceAnchor: 2,
    target: '481fbb1a',
    targetAnchor: 0,
    id: '7989ac70',
    index: 1,
  }],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

Current Behavior

目前通过 addNode 或 addEdge 添加元素后渲染，或是通过 graph.render(data)进行渲染。
如果绘图后这个data数据需要导出，请问在graph的哪个属性或函数里可以获取？

listeners: {selectionChanged: Array(2), root: Array(2), escape: Array(4), startEditing: Array(2), pan: Array(4), …}
isDisposed: false
disabled: false
options: {trackable: true, trackInfo: {…}, defaultShadowColor: "#808080", defaultShadowOffsetX: 2, defaultShadowOffsetY: 3, …}
container: div.graph
model: Model {listeners: {…}, maintainEdgeParent: true, cellIdPrefix: "cell-", cellIdPostfix: "", autoCreateCellId: true, …}
view: View {listeners: {…}, isDisposed: false, captureDocumentGesture: true, updateStyle: false, rendering: true, …}
renderer: Renderer {antialiased: true, minSvgStrokeWidth: 1, defaultTextShape: ƒ, defaultNodeShape: ƒ, defaultEdgeShape: ƒ, …}
selection: Selection {isDisposed: false, graph: ContextMenuAccessor, cells: Array(0)}
panX: 0
panY: 0
changeManager: ChangeManager {isDisposed: false, graph: ContextMenuAccessor}
eventloopManager: EventLoopManager {isDisposed: false, graph: ContextMenuAccessor, mouseListeners: Array(11), lastTouchX: 0, lastTouchY: 0, …}
viewportManager: ViewportManager {isDisposed: false, graph: ContextMenuAccessor}
pageBreakManager: PageBreakManager {isDisposed: false, graph: ContextMenuAccessor, horizontalPageBreaks: Array(0), verticalPageBreaks: Array(0)}
zoomManager: ZoomManager {isDisposed: false, graph: ContextMenuAccessor}
selectionManager: SelectionManager {isDisposed: false, graph: ContextMenuAccessor}
creationManager: CreationManager {isDisposed: false, graph: ContextMenuAccessor}
connectionManager: ConnectionManager {isDisposed: false, graph: ContextMenuAccessor}
retrievalManager: RetrievalManager {isDisposed: false, graph: ContextMenuAccessor}
styleManager: StyleManager {isDisposed: false, graph: ContextMenuAccessor}
validationManager: ValidationManager {isDisposed: false, graph: ContextMenuAccessor}
collapseManager: CollapseManager {isDisposed: false, graph: ContextMenuAccessor, collapseToPreferredSize: true}
overlayManager: OverlayManager {isDisposed: false, graph: ContextMenuAccessor}
groupManager: GroupManager {isDisposed: false, graph: ContextMenuAccessor}
sizeManager: SizeManager {isDisposed: false, graph: ContextMenuAccessor}
editingManager: EditingManager {isDisposed: false, graph: ContextMenuAccessor}
movingManager: MovingManager {isDisposed: false, graph: ContextMenuAccessor}
panningManager: PanningManager {isDisposed: false, graph: ContextMenuAccessor, damper: 0.16666666666666666, delay: 10, handleMouseOut: true, …}
cellEditor: CellEditor {isDisposed: false, textarea: null, editingCell: null, modified: false, autoSize: true, …}
tooltipHandler: TooltipHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, ignoreTouchEvents: true, …}
cursorHandler: CursorHandler {listeners: {…}, isDisposed: false, disabled: false, graph: ContextMenuAccessor}
selectionHandler: SelectionHandler {listeners: {…}, isDisposed: false, disabled: false, graph: ContextMenuAccessor, handlers: Dictionary, …}
connectionHandler: ConnectionHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, autoSelect: true, …}
guideHandler: GuideHandler {listeners: {…}, isDisposed: false, disabled: false, graph: ContextMenuAccessor, guide: null, …}
selectHandler: SelectCellHandler {listeners: {…}, isDisposed: false, disabled: false, graph: ContextMenuAccessor}
movingHandler: MovingHandler {listeners: {…}, isDisposed: false, disabled: false, graph: ContextMenuAccessor, preview: Preview, …}
panningHandler: PanningHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, useLeftButtonForPanning: false, …}
contextMenuHandler: ContextMenuHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, showing: false, …}
rubberbandHandler: RubberbandHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, fadeOut: false, …}
keyboardHandler: KeyboardHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, target: div.graph, …}
mouseWheelHandler: MouseWheelHandler {listeners: {…}, isDisposed: false, disabled: true, graph: ContextMenuAccessor, wheelZoomDelay: 10, …}

Possible Solution

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

Weekly Digest (15 December, 2019 - 22 December, 2019)

Here's the Weekly Digest for antvis/x6:

ISSUES

Last week 9 issues were created.
Of these, 8 issues have been closed and 1 issues are still open.

OPEN ISSUES

💚 #51 feat: minimap, by bubkoo

CLOSED ISSUES

❤️ #50 feat: data driven, by bubkoo
❤️ #49 基于数据直接渲染出整个图, by bubkoo
❤️ #48 feat: data driven, by bubkoo
❤️ #47 基于新版 events 类，梳理自定义事件, by bubkoo
❤️ #46 feat: tip connectable anchor when connecting, by bubkoo
❤️ #45 Feature/flowchart conn, by bubkoo
❤️ #44 feat: should trigger guide and highlight when dragging from side to graph, by bubkoo
❤️ #43 feat: tip connectable anchor when connecting, by bubkoo

NOISY ISSUE

🔈 #46 feat: tip connectable anchor when connecting, by bubkoo
It received 15 comments.

PULL REQUESTS

Last week, 6 pull requests were created, updated or merged.

UPDATED PULL REQUEST

Last week, 1 pull request was updated.
💛 #51 feat: minimap, by bubkoo

MERGED PULL REQUEST

Last week, 5 pull requests were merged.
💜 #50 feat: data driven, by bubkoo
💜 #46 feat: tip connectable anchor when connecting, by bubkoo
💜 #45 Feature/flowchart conn, by bubkoo
💜 #44 feat: should trigger guide and highlight when dragging from side to graph, by bubkoo
💜 #43 feat: tip connectable anchor when connecting, by bubkoo

COMMITS

CONTRIBUTORS

Last week there was 1 contributor.
👤 bubkoo

STARGAZERS

Last week there were 2 stagazers.
⭐ 12301079-Qianwenshu
⭐ caolinjian
You all are the stars! 🌟

RELEASES

Last week there were no releases.

That's all for last week, please 👀 Watch and ⭐ Star the repository antvis/x6 to receive next weekly updates. 😃

You can also view all Weekly Digests by clicking here.

Your Weekly Digest bot. 📆

pageBreak 相关的 set 方法应该触发 UI 自动更新

Expected Behavior

Current Behavior

Possible Solution

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

连线过程中提示可连接的 anchor 或 port

Expected Behavior

鼠标按下开始连线时和连线过程中，高亮提示可以连接的锚点或连接桩。

增加 graph 开关选项来启用该特性
内置几种高亮效果，并支持用户自定义

Additional Context

泳道图 DEMO

Expected Behavior

提供河流图demo和交互。

Possible Solution

Additional Context

取消从data中取label

Expected Behavior

增加显式的 label 选项，使 data 更加纯粹，同时可以通过指定 label=false 来不渲染label，这样可以删掉 noLabel 选项。

Possible Solution

Additional Context

内置 grid 背景

Expected Behavior

支持两种 grid 背景

线网格式
点网格式

通过选项开启

Possible Solution

提供对应的 grid 选项

interface GridOptions {
  enabled: boolean
  size: number
  scaled: boolean
  // 以下为新增选项
  /**
   * 网格类型
   * `line`: 线网
   * `dot`: 点网
   * `null`: 不绘制网格背景
   * 默认为 `line`
   */
  type: 'line' | 'dot' | null
  /**
   * 网格颜色
   */
  color: string
  /**
   * 最小网格大小，动态调整网格大小时的最小网格大小
   */ 
  minSize: number
  /**
   * 只对 type 为 `line` 类型的网格有效，表示网格明暗间距
   */
  step: number
}

在 View 的 validateBackgroundPage 生命周期中完成网格绘制

Additional Context

在图编辑场景，网格系统是基础设施之一，但不是高配配置需求，所以默认提供一种常用的配置即可，但用户可以根据自身业务场景，通过 GridOptions 实现定制。

add stylesheet for named shapes

Expected Behavior

通过 shape 名指定 stylesheet，以便支持复杂的个性样式定制。

业务场景比较局限，低优先级。

Possible Solution

Additional Context

支持用 Shape 创建 Anchor

Expected Behavior

Possible Solution

Additional Context

全局常量和配置项移到 `option/preset` 中

自动监测 container size 变化导致死循环，chrome 内存暴增

Expected Behavior

Current Behavior

Possible Solution

默认给 container 设置 width="100%" 和 height="100%"，大小控制交给其父节点。

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

x6: [e.g. 1.0.0]
OS: [e.g. macOS Sierra 10.12.3]
Browser: [e.g. chrome 78.0.3904.108]

Win下无法用delete键删除元素，只能使用Backspace键删除元素

Expected Behavior

Win下可以使用Delete按键删除元素

Current Behavior

Win下无法用delete键删除元素

Possible Solution

删除元素也绑定Delete键

Steps To Reproduce

Error Message & Stack Trace

<!-- Provide a log message if relevant -->