Compare commits
26 Commits
@antv/x6@2
...
@antv/x6-s
| Author | SHA1 | Date | |
|---|---|---|---|
| 45218c36f6 | |||
| 17b36e21c7 | |||
| 1682a1d953 | |||
| bcf3380d2b | |||
| 24368d4f86 | |||
| 3265fe5b98 | |||
| 5599286473 | |||
| d64150bfad | |||
| cae8625feb | |||
| d8f1729f09 | |||
| 20c170b44a | |||
| 0e8769642a | |||
| bd30f7f61d | |||
| e3e7cfc66f | |||
| c86ed1a031 | |||
| ae179eb2cd | |||
| 2a3e523b1b | |||
| b5af7844af | |||
| 9c48ad8dfc | |||
| 1a5f1655df | |||
| 90dad14d7e | |||
| 323e01559d | |||
| bfc8d7f17a | |||
| df24392728 | |||
| fc940fa53c | |||
| 604c848c2a |
CONTRIBUTORSCONTRIBUTORS.svg
examples/x6-example-features
packages
x6-common
x6-plugin-clipboard/src
x6-plugin-dnd
x6-plugin-scroller/src
x6-react-components
x6
sites/x6-sites
30
CONTRIBUTORS
30
CONTRIBUTORS
@ -1,7 +1,7 @@
|
||||
BARM <284942955@qq.com>
|
||||
Candy <563378816@qq.com>
|
||||
Chaoqi <HAN>
|
||||
Clifford <ajard>
|
||||
Chaoqi ZHANG <prncoprs@163.com>
|
||||
Clifford Fajardo <cliffordfajardo@users.noreply.github.com>
|
||||
DaiGang <42136433+daigang666@users.noreply.github.com>
|
||||
Dong <48054715+halodong@users.noreply.github.com>
|
||||
Draco <Draco.coder@gmail.com>
|
||||
@ -10,13 +10,13 @@ Eve-Sama <948832626@qq.com>
|
||||
Gossypol <31892817+gossypol@users.noreply.github.com>
|
||||
ImgBotApp <ImgBotHelp@gmail.com>
|
||||
Indomi <indomi126@gmail.com>
|
||||
James <san>
|
||||
Jógvan <lse>
|
||||
Ken <ei>
|
||||
Kent <oo>
|
||||
James Tsang <wtzeng1@gmail.com>
|
||||
Jógvan Olsen <jogvanolsen@hotmail.com>
|
||||
Ken Geis <geis.ken@gmail.com>
|
||||
Kent Wood <minzojian@hotmail.com>
|
||||
Limbo <49612796+JUST-Limbo@users.noreply.github.com>
|
||||
Lixu <37231473+wflixu@users.noreply.github.com>
|
||||
Lloyd <ho>
|
||||
Lloyd Zhou <lloydzhou@users.noreply.github.com>
|
||||
Lyn <47809781+lyn-boyu@users.noreply.github.com>
|
||||
MOMO <329053928@qq.com>
|
||||
Mingfei <az8641683@163.com>
|
||||
@ -26,17 +26,18 @@ NewByVector <NewByVector@users.noreply.github.com>
|
||||
Olive.Wang <olivewind.wang@gmail.com>
|
||||
Opportunity <opportunity@live.in>
|
||||
Questions <chip@twostewards.com>
|
||||
RuiLin <on>
|
||||
RuiLin Dong <48054715+halodong@users.noreply.github.com>
|
||||
SSC <273702440@qq.com>
|
||||
Simon <>
|
||||
Simon He <57086651+Simon-He95@users.noreply.github.com>
|
||||
Sindori <441933726@qq.com>
|
||||
Struggle Roue <47975400+struggleRoue@users.noreply.github.com>
|
||||
Susan <527971893@qq.com>
|
||||
Thomas <eugne>
|
||||
Tony <>
|
||||
Thomas Zeugner <tomsoftware@gmx.de>
|
||||
Tony Wu <93302820+tonywu6@users.noreply.github.com>
|
||||
Utopia <greatauk11@gmail.com>
|
||||
XLZY <1017866168@qq.com>
|
||||
Xingjian <han>
|
||||
Zhenyu <o>
|
||||
Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
|
||||
Zhenyu Hou <skyking_H@hotmail.com>
|
||||
_XiaoTian <istianlei@qq.com>
|
||||
arthur657834 <kingkom7834@126.com>
|
||||
boyu.zlj <boyu.zlj@antgroup.com>
|
||||
@ -68,10 +69,11 @@ qingchi <qinky94@163.com>
|
||||
qu <33251372+Qujh97@users.noreply.github.com>
|
||||
sallen450 <qinghua10199@gmail.com>
|
||||
semantic-release-bot <semantic-release-bot@martynus.net>
|
||||
siaikin <abc1310054026@outlook.com>
|
||||
vector <vectorse@126.com>
|
||||
wenbei <38773084+wb-wenbei@users.noreply.github.com>
|
||||
wgf <34190465+evelope@users.noreply.github.com>
|
||||
wind <>
|
||||
wind X <35559153+XueMeijing@users.noreply.github.com>
|
||||
wjqsummer <52412389+wjqsummer@users.noreply.github.com>
|
||||
wtzeng1 <wtzeng1@gmail.com>
|
||||
x6-bot <x6-bot@users.noreply.github.com>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before 
(image error) Size: 12 MiB After 
(image error) Size: 12 MiB
|
@ -1,3 +1,10 @@
|
||||
## @antv/x6-example-features [2.0.2](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.1...@antv/x6-example-features@2.0.2) (2023-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **mindmap demo:** can not find target id when create edge ([#3144](https://github.com/antvis/X6/issues/3144)) ([bfc8d7f](https://github.com/antvis/X6/commit/bfc8d7f17ac900f70b696c1fa7a3f3f3a389103f))
|
||||
|
||||
## @antv/x6-example-features [2.0.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.0...@antv/x6-example-features@2.0.1) (2022-12-16)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/x6-example-features",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"scripts": {
|
||||
"start": "umi dev",
|
||||
"build": "umi build",
|
||||
|
||||
@ -212,12 +212,15 @@ export default class Example extends React.Component {
|
||||
return 'right'
|
||||
},
|
||||
})
|
||||
const cells: Cell[] = []
|
||||
const traverse = (hierarchyItem: HierarchyResult) => {
|
||||
if (hierarchyItem) {
|
||||
const { data, children } = hierarchyItem
|
||||
cells.push(
|
||||
graph.createNode({
|
||||
// 检查当前遍历的节点已经存在还是需要新添加？
|
||||
if (graph.hasCell(data.id)) {
|
||||
const node = graph.getCellById(data.id)
|
||||
node.prop('position', { x: hierarchyItem.x, y: hierarchyItem.y })
|
||||
} else {
|
||||
const node = graph.addNode({
|
||||
id: data.id,
|
||||
shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
|
||||
x: hierarchyItem.x,
|
||||
@ -226,13 +229,18 @@ export default class Example extends React.Component {
|
||||
height: data.height,
|
||||
label: data.label,
|
||||
type: data.type,
|
||||
}),
|
||||
)
|
||||
})
|
||||
}
|
||||
if (children) {
|
||||
children.forEach((item: HierarchyResult) => {
|
||||
const { id, data } = item
|
||||
cells.push(
|
||||
graph.createEdge({
|
||||
// 先遍历子节点（里面包含创建逻辑，如果画布没有开启async的时候，创建边会提示找不到target节点）
|
||||
traverse(item)
|
||||
const eid = `${hierarchyItem.id}-->${id}`
|
||||
// 检查当前边是否已经存在
|
||||
if (!graph.hasCell(eid)) {
|
||||
graph.addEdge({
|
||||
id: eid,
|
||||
shape: 'mindmap-edge',
|
||||
source: {
|
||||
cell: hierarchyItem.id,
|
||||
@ -257,15 +265,13 @@ export default class Example extends React.Component {
|
||||
name: 'left',
|
||||
},
|
||||
},
|
||||
}),
|
||||
)
|
||||
traverse(item)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
traverse(result)
|
||||
graph.resetCells(cells)
|
||||
graph.centerContent()
|
||||
}
|
||||
|
||||
@ -334,10 +340,16 @@ export default class Example extends React.Component {
|
||||
|
||||
const removeNode = (id: string) => {
|
||||
const res = findItem(data, id)
|
||||
const dataItem = res?.parent
|
||||
if (dataItem && dataItem.children) {
|
||||
const { children } = dataItem
|
||||
const parentItem = res?.parent
|
||||
const nodeItem = res?.node
|
||||
if (parentItem && parentItem.children) {
|
||||
const { children } = parentItem
|
||||
const index = children.findIndex((item) => item.id === id)
|
||||
// 删除的时候，先删节点以及可能存在的子节点，再调用render，对data数据进行遍历
|
||||
if (nodeItem && nodeItem.children) {
|
||||
nodeItem.children.forEach((item) => graph.removeCell(item.id))
|
||||
}
|
||||
graph.removeCell(id)
|
||||
return children.splice(index, 1)
|
||||
}
|
||||
return null
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
|
||||
|
||||
## @antv/x6-common [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.4...@antv/x6-common@2.0.5) (2023-01-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* optimize css loader ([#3156](https://github.com/antvis/x6/issues/3156)) ([9c48ad8](https://github.com/antvis/x6/commit/9c48ad8dfc99e623a57855295d07c35be5483073))
|
||||
|
||||
## @antv/x6-common [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.3...@antv/x6-common@2.0.4) (2022-12-20)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-common",
|
||||
"version": "2.0.4",
|
||||
"version": "2.0.6",
|
||||
"description": "Basic toolkit for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -45,7 +45,7 @@ export class PriorityQueue<T> {
|
||||
*/
|
||||
insert(priority: number, value: T, id?: string) {
|
||||
const item: PriorityQueue.DataItem<T> = { priority, value }
|
||||
const index = this.data.length - 1
|
||||
const index = this.data.length
|
||||
if (id) {
|
||||
item.id = id
|
||||
this.index[id] = index
|
||||
@ -96,7 +96,9 @@ export class PriorityQueue<T> {
|
||||
const data = this.data
|
||||
const peek = data[0]
|
||||
const last = data.pop()!
|
||||
delete this.index[data.length]
|
||||
if (peek.id) {
|
||||
delete this.index[peek.id]
|
||||
}
|
||||
|
||||
if (data.length > 0) {
|
||||
data[0] = last
|
||||
|
||||
@ -2,6 +2,7 @@ import { Platform } from '../platform'
|
||||
|
||||
interface CssModule {
|
||||
name: string
|
||||
loadTimes: number
|
||||
styleElement: HTMLStyleElement | null
|
||||
}
|
||||
|
||||
@ -10,7 +11,10 @@ const cssModules: CssModule[] = []
|
||||
export function ensure(name: string, content: string) {
|
||||
const cssModule = cssModules.find((m) => m.name === name)
|
||||
if (cssModule) {
|
||||
return
|
||||
cssModule.loadTimes += 1
|
||||
if (cssModule.loadTimes > 1) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (!Platform.isApplyingHMR()) {
|
||||
@ -25,6 +29,7 @@ export function ensure(name: string, content: string) {
|
||||
|
||||
cssModules.push({
|
||||
name,
|
||||
loadTimes: 1,
|
||||
styleElement,
|
||||
})
|
||||
}
|
||||
@ -34,7 +39,13 @@ export function clean(name: string) {
|
||||
const index = cssModules.findIndex((m) => m.name === name)
|
||||
|
||||
if (index > -1) {
|
||||
let styleElement = cssModules[index].styleElement
|
||||
const cssModule = cssModules[index]
|
||||
cssModule.loadTimes -= 1
|
||||
if (cssModule.loadTimes > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
let styleElement = cssModule.styleElement
|
||||
if (styleElement && styleElement.parentNode) {
|
||||
styleElement.parentNode.removeChild(styleElement)
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ declare module '@antv/x6/lib/graph/graph' {
|
||||
enableClipboard: () => Graph
|
||||
disableClipboard: () => Graph
|
||||
toggleClipboard: (enabled?: boolean) => Graph
|
||||
isClipboardEmpty: () => boolean
|
||||
isClipboardEmpty: (options?: Clipboard.Options) => boolean
|
||||
getCellsInClipboard: () => Cell[]
|
||||
cleanClipboard: () => Graph
|
||||
copy: (cells: Cell[], options?: Clipboard.CopyOptions) => Graph
|
||||
@ -55,10 +55,10 @@ Graph.prototype.toggleClipboard = function (enabled?: boolean) {
|
||||
return this
|
||||
}
|
||||
|
||||
Graph.prototype.isClipboardEmpty = function () {
|
||||
Graph.prototype.isClipboardEmpty = function (options?: Clipboard.Options) {
|
||||
const clipboard = this.getPlugin('clipboard') as Clipboard
|
||||
if (clipboard) {
|
||||
return clipboard.isEmpty()
|
||||
return clipboard.isEmpty(options)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
@ -89,7 +89,12 @@ export class ClipboardImpl {
|
||||
}
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
isEmpty(options: ClipboardImpl.Options = {}) {
|
||||
if (options.useLocalStorage) {
|
||||
// With useLocalStorage turned on, no real cells can be obtained without deserialize first
|
||||
// https://github.com/antvis/X6/issues/2573
|
||||
this.deserialize(options)
|
||||
}
|
||||
return this.cells.length <= 0
|
||||
}
|
||||
|
||||
|
||||
@ -60,8 +60,8 @@ export class Clipboard
|
||||
return this
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
return this.clipboardImpl.isEmpty()
|
||||
isEmpty(options: Clipboard.Options = {}) {
|
||||
return this.clipboardImpl.isEmpty(options)
|
||||
}
|
||||
|
||||
getCellsInClipboard() {
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
## @antv/x6-plugin-dnd [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.3...@antv/x6-plugin-dnd@2.0.4) (2023-01-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* change dragging container options ([#3139](https://github.com/antvis/x6/issues/3139)) ([7b091f3](https://github.com/antvis/x6/commit/7b091f35dee147c5e7bf97577e14e11ceb7e8e3d))
|
||||
|
||||
## @antv/x6-plugin-dnd [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.2...@antv/x6-plugin-dnd@2.0.3) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-plugin-dnd",
|
||||
"version": "2.0.3",
|
||||
"version": "2.0.4",
|
||||
"description": "dnd plugin for X6",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -35,17 +35,15 @@ export class Scroller extends Basecoat<Scroller.EventArgs> {
|
||||
return this.scrollerImpl.container
|
||||
}
|
||||
|
||||
constructor(public readonly options: Scroller.Options) {
|
||||
constructor(public options: Scroller.Options) {
|
||||
super()
|
||||
CssLoader.ensure(this.name, content)
|
||||
}
|
||||
|
||||
public init(graph: Graph) {
|
||||
this.graph = graph
|
||||
this.scrollerImpl = new ScrollerImpl({
|
||||
...this.options,
|
||||
graph,
|
||||
})
|
||||
this.options = ScrollerImpl.getOptions({ ...this.options, graph })
|
||||
this.scrollerImpl = new ScrollerImpl(this.options)
|
||||
this.setup()
|
||||
this.startListening()
|
||||
this.updateClassName()
|
||||
@ -401,7 +399,7 @@ export namespace Scroller {
|
||||
export interface EventArgs extends ScrollerImpl.EventArgs {}
|
||||
|
||||
type EventType = 'leftMouseDown' | 'rightMouseDown'
|
||||
export interface Options extends ScrollerImpl.CommonOptions {
|
||||
export interface Options extends ScrollerImpl.Options {
|
||||
pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
|
||||
modifiers?: string | ModifierKey[] | null // alt, ctrl, shift, meta
|
||||
}
|
||||
|
||||
@ -1128,7 +1128,8 @@ export namespace ScrollerImpl {
|
||||
panning: { e: Dom.MouseMoveEvent }
|
||||
'pan:stop': { e: Dom.MouseUpEvent }
|
||||
}
|
||||
export interface CommonOptions {
|
||||
export interface Options {
|
||||
graph: Graph
|
||||
enabled?: boolean
|
||||
className?: string
|
||||
width?: number
|
||||
@ -1151,10 +1152,6 @@ export namespace ScrollerImpl {
|
||||
scroller: ScrollerImpl,
|
||||
) => TransformManager.FitToContentFullOptions)
|
||||
}
|
||||
|
||||
export interface Options extends CommonOptions {
|
||||
graph: Graph
|
||||
}
|
||||
export interface CenterOptions {
|
||||
padding?: NumberExt.SideOptions
|
||||
}
|
||||
@ -1266,7 +1263,7 @@ export namespace ScrollerImpl {
|
||||
result.background == null
|
||||
) {
|
||||
result.background = graphOptions.background
|
||||
delete graphOptions.background
|
||||
options.graph.background.clear()
|
||||
}
|
||||
|
||||
return result as ScrollerImpl.Options
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
## @antv/x6-react-components [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.6...@antv/x6-react-components@2.0.7) (2023-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* don't hide when click on color picker ([#3172](https://github.com/antvis/x6/issues/3172)) ([cae8625](https://github.com/antvis/x6/commit/cae8625feb20fd93cc8002fa6ed00d345d3cf33c))
|
||||
|
||||
## @antv/x6-react-components [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.5...@antv/x6-react-components@2.0.6) (2023-01-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* stop propagation when click menu item ([#3147](https://github.com/antvis/x6/issues/3147)) ([90dad14](https://github.com/antvis/x6/commit/90dad14d7e1ad8639b80b215596c8f4bad7b00ed))
|
||||
|
||||
## @antv/x6-react-components [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.4...@antv/x6-react-components@2.0.5) (2022-11-25)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6-react-components",
|
||||
"version": "2.0.5",
|
||||
"version": "2.0.7",
|
||||
"description": "React components for building x6 editors",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -37,7 +37,9 @@ export class ColorPicker extends React.Component<
|
||||
|
||||
onDocumentClick = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLDivElement
|
||||
if (target === this.container || this.container.contains(target)) {
|
||||
const picker = this.container.querySelector('.sketch-picker')!
|
||||
|
||||
if (target === picker || picker.contains(target)) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -59,12 +61,9 @@ export class ColorPicker extends React.Component<
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value, event)
|
||||
}
|
||||
|
||||
this.setState({
|
||||
active: false,
|
||||
color: value.rgb,
|
||||
})
|
||||
this.unbindDocEvent()
|
||||
}
|
||||
|
||||
handleClick = (e: React.MouseEvent) => {
|
||||
@ -84,8 +83,10 @@ export class ColorPicker extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
refContainer = (container: HTMLDivElement) => {
|
||||
this.container = container
|
||||
refContainer = (popoverRef: { getContainer: () => HTMLDivElement }) => {
|
||||
if (popoverRef) {
|
||||
this.container = popoverRef.getContainer()
|
||||
}
|
||||
}
|
||||
|
||||
renderPicker() {
|
||||
@ -123,10 +124,12 @@ export class ColorPicker extends React.Component<
|
||||
{...popoverProps}
|
||||
content={this.renderPicker()}
|
||||
overlayClassName={`${baseCls}-overlay`}
|
||||
destroyTooltipOnHide
|
||||
ref={this.refContainer}
|
||||
trigger={[]}
|
||||
>
|
||||
<div
|
||||
style={style}
|
||||
ref={this.refContainer}
|
||||
onClick={this.handleClick}
|
||||
className={classNames(baseCls, {
|
||||
[`${baseCls}-disabled`]: disabled,
|
||||
|
||||
@ -26,6 +26,7 @@ class MenubarItemInner extends React.PureComponent<
|
||||
}
|
||||
|
||||
onClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
this.props.context.activeMenubar()
|
||||
this.removeDeactive(e.currentTarget.parentElement)
|
||||
this.active()
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
# @antv/x6 [2.2.0](https://github.com/antvis/x6/compare/@antv/x6@2.1.7...@antv/x6@2.2.0) (2023-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
|
||||
|
||||
## @antv/x6 [2.1.6](https://github.com/antvis/x6/compare/@antv/x6@2.1.5...@antv/x6@2.1.6) (2023-01-19)
|
||||
|
||||
## @antv/x6 [2.1.5](https://github.com/antvis/x6/compare/@antv/x6@2.1.4...@antv/x6@2.1.5) (2023-01-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update group even group is empty ([#3117](https://github.com/antvis/x6/issues/3117)) ([6abd068](https://github.com/antvis/x6/commit/6abd0683eab22eb0fa1a4702642ab76b91320694))
|
||||
|
||||
## @antv/x6 [2.1.4](https://github.com/antvis/x6/compare/@antv/x6@2.1.3...@antv/x6@2.1.4) (2023-01-03)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@antv/x6",
|
||||
"version": "2.1.4",
|
||||
"version": "2.2.0",
|
||||
"description": "JavaScript diagramming library that uses SVG and HTML for rendering",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -1193,15 +1193,9 @@ export class Graph extends Basecoat<EventArgs> {
|
||||
}
|
||||
|
||||
getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined {
|
||||
let result: Graph.Plugin | undefined
|
||||
|
||||
this.installedPlugins.forEach((plugin) => {
|
||||
if (plugin.name === pluginName) {
|
||||
result = plugin
|
||||
}
|
||||
})
|
||||
|
||||
return result as T
|
||||
return Array.from(this.installedPlugins).find(
|
||||
(plugin) => plugin.name === pluginName,
|
||||
) as T
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
@ -8,6 +8,7 @@ import { Graph } from '../graph'
|
||||
|
||||
export class Scheduler extends Disposable {
|
||||
public views: KeyValue<Scheduler.View> = {}
|
||||
public willRemoveViews: KeyValue<Scheduler.View> = {}
|
||||
protected zPivots: KeyValue<Comment>
|
||||
private graph: Graph
|
||||
private renderArea?: Rectangle
|
||||
@ -51,7 +52,7 @@ export class Scheduler extends Disposable {
|
||||
protected onModelReseted({ options }: Model.EventArgs['reseted']) {
|
||||
this.queue.clearJobs()
|
||||
this.removeZPivots()
|
||||
this.removeViews()
|
||||
this.resetViews()
|
||||
this.renderViews(this.model.getCells(), options)
|
||||
}
|
||||
|
||||
@ -59,12 +60,8 @@ export class Scheduler extends Disposable {
|
||||
this.renderViews([cell], options)
|
||||
}
|
||||
|
||||
protected onCellRemoved({ cell, options }: Model.EventArgs['cell:removed']) {
|
||||
const viewItem = this.views[cell.id]
|
||||
if (viewItem) {
|
||||
const view = viewItem.view
|
||||
this.requestViewUpdate(view, Scheduler.FLAG_REMOVE, options)
|
||||
}
|
||||
protected onCellRemoved({ cell }: Model.EventArgs['cell:removed']) {
|
||||
this.removeViews([cell])
|
||||
}
|
||||
|
||||
protected onCellZIndexChanged({
|
||||
@ -186,7 +183,7 @@ export class Scheduler extends Disposable {
|
||||
viewItem.view,
|
||||
flag,
|
||||
options,
|
||||
cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
|
||||
this.getRenderPriority(viewItem.view),
|
||||
false,
|
||||
)
|
||||
}
|
||||
@ -234,6 +231,28 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
}
|
||||
|
||||
protected removeViews(cells: Cell[]) {
|
||||
cells.forEach((cell) => {
|
||||
const id = cell.id
|
||||
const viewItem = this.views[id]
|
||||
|
||||
if (viewItem) {
|
||||
this.willRemoveViews[id] = viewItem
|
||||
delete this.views[id]
|
||||
|
||||
this.queue.queueJob({
|
||||
id,
|
||||
priority: this.getRenderPriority(viewItem.view),
|
||||
cb: () => {
|
||||
this.removeView(viewItem.view)
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.flush()
|
||||
}
|
||||
|
||||
protected flush() {
|
||||
this.graph.options.async
|
||||
? this.queue.queueFlush()
|
||||
@ -246,10 +265,13 @@ export class Scheduler extends Disposable {
|
||||
const viewItem = this.views[ids[i]]
|
||||
if (viewItem && viewItem.state === Scheduler.ViewState.WAITTING) {
|
||||
const { view, flag, options } = viewItem
|
||||
const priority = view.cell.isNode()
|
||||
? JOB_PRIORITY.RenderNode
|
||||
: JOB_PRIORITY.RenderEdge
|
||||
this.requestViewUpdate(view, flag, options, priority, false)
|
||||
this.requestViewUpdate(
|
||||
view,
|
||||
flag,
|
||||
options,
|
||||
this.getRenderPriority(view),
|
||||
false,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,23 +317,25 @@ export class Scheduler extends Disposable {
|
||||
}
|
||||
}
|
||||
|
||||
protected removeViews() {
|
||||
Object.keys(this.views).forEach((id) => {
|
||||
const viewItem = this.views[id]
|
||||
protected resetViews() {
|
||||
this.willRemoveViews = { ...this.views }
|
||||
Object.keys(this.willRemoveViews).forEach((id) => {
|
||||
const viewItem = this.willRemoveViews[id]
|
||||
if (viewItem) {
|
||||
this.removeView(viewItem.view.cell)
|
||||
this.removeView(viewItem.view)
|
||||
}
|
||||
})
|
||||
this.views = {}
|
||||
this.willRemoveViews = {}
|
||||
}
|
||||
|
||||
protected removeView(cell: Cell) {
|
||||
const viewItem = this.views[cell.id]
|
||||
if (viewItem) {
|
||||
protected removeView(view: CellView) {
|
||||
const cell = view.cell
|
||||
const viewItem = this.willRemoveViews[cell.id]
|
||||
if (view) {
|
||||
viewItem.view.remove()
|
||||
delete this.views[cell.id]
|
||||
delete this.willRemoveViews[cell.id]
|
||||
}
|
||||
return viewItem.view
|
||||
}
|
||||
|
||||
protected toggleVisible(cell: Cell, visible: boolean) {
|
||||
@ -455,6 +479,12 @@ export class Scheduler extends Disposable {
|
||||
)
|
||||
}
|
||||
|
||||
protected getRenderPriority(view: CellView) {
|
||||
return view.cell.isNode()
|
||||
? JOB_PRIORITY.RenderNode
|
||||
: JOB_PRIORITY.RenderEdge
|
||||
}
|
||||
|
||||
@Disposable.dispose()
|
||||
dispose() {
|
||||
this.stopListening()
|
||||
|
||||
@ -1398,6 +1398,7 @@ export class EdgeView<
|
||||
}
|
||||
|
||||
onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
|
||||
this.notifyMouseDown(e, x, y)
|
||||
this.startEdgeDragging(e, x, y)
|
||||
}
|
||||
|
||||
@ -2191,7 +2192,9 @@ export class EdgeView<
|
||||
for (let i = 0, ii = cells.length; i < ii; i += 1) {
|
||||
const view = graph.findViewByCell(cells[i])
|
||||
|
||||
if (!view) {
|
||||
// Prevent highlighting new edge
|
||||
// Close https://github.com/antvis/X6/issues/2853
|
||||
if (!view || view.cell.id === this.cell.id) {
|
||||
continue
|
||||
}
|
||||
|
||||
|
||||
@ -457,6 +457,28 @@ export class NodeView<
|
||||
return { e, x, y, view, node, cell } as NodeView.PositionEventArgs<E>
|
||||
}
|
||||
|
||||
protected getPortEventArgs<E>(
|
||||
e: E,
|
||||
port: string,
|
||||
pos?: { x: number; y: number },
|
||||
) {
|
||||
const view = this // eslint-disable-line
|
||||
const node = view.cell
|
||||
const cell = node
|
||||
if (pos) {
|
||||
return {
|
||||
e,
|
||||
x: pos.x,
|
||||
y: pos.y,
|
||||
view,
|
||||
node,
|
||||
cell,
|
||||
port,
|
||||
} as NodeView.PositionEventArgs<E>
|
||||
}
|
||||
return { e, view, node, cell, port } as NodeView.MouseEventArgs<E>
|
||||
}
|
||||
|
||||
notifyMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
|
||||
super.onMouseDown(e, x, y)
|
||||
this.notify('node:mousedown', this.getEventArgs(e, x, y))
|
||||
@ -472,19 +494,33 @@ export class NodeView<
|
||||
this.notify('node:mouseup', this.getEventArgs(e, x, y))
|
||||
}
|
||||
|
||||
notifyPortEvent(
|
||||
name: string,
|
||||
e: Dom.EventObject,
|
||||
pos?: { x: number; y: number },
|
||||
) {
|
||||
const port = this.findAttr('port', e.target)
|
||||
if (port) {
|
||||
this.notify(name, this.getPortEventArgs(e, port, pos))
|
||||
}
|
||||
}
|
||||
|
||||
onClick(e: Dom.ClickEvent, x: number, y: number) {
|
||||
super.onClick(e, x, y)
|
||||
this.notify('node:click', this.getEventArgs(e, x, y))
|
||||
this.notifyPortEvent('node:port:click', e, { x, y })
|
||||
}
|
||||
|
||||
onDblClick(e: Dom.DoubleClickEvent, x: number, y: number) {
|
||||
super.onDblClick(e, x, y)
|
||||
this.notify('node:dblclick', this.getEventArgs(e, x, y))
|
||||
this.notifyPortEvent('node:port:dblclick', e, { x, y })
|
||||
}
|
||||
|
||||
onContextMenu(e: Dom.ContextMenuEvent, x: number, y: number) {
|
||||
super.onContextMenu(e, x, y)
|
||||
this.notify('node:contextmenu', this.getEventArgs(e, x, y))
|
||||
this.notifyPortEvent('node:port:contextmenu', e, { x, y })
|
||||
}
|
||||
|
||||
onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
|
||||
@ -492,6 +528,7 @@ export class NodeView<
|
||||
return
|
||||
}
|
||||
this.notifyMouseDown(e, x, y)
|
||||
this.notifyPortEvent('node:port:mousedown', e, { x, y })
|
||||
this.startNodeDragging(e, x, y)
|
||||
}
|
||||
|
||||
@ -515,6 +552,7 @@ export class NodeView<
|
||||
})
|
||||
}
|
||||
this.notifyMouseMove(e, x, y)
|
||||
this.notifyPortEvent('node:port:mousemove', e, { x, y })
|
||||
}
|
||||
|
||||
this.setEventData<EventData.Mousemove>(e, data)
|
||||
@ -527,6 +565,7 @@ export class NodeView<
|
||||
this.stopMagnetDragging(e, x, y)
|
||||
} else {
|
||||
this.notifyMouseUp(e, x, y)
|
||||
this.notifyPortEvent('node:port:mouseup', e, { x, y })
|
||||
if (action === 'move') {
|
||||
const meta = data as EventData.Moving
|
||||
const view = meta.targetView || this
|
||||
@ -545,22 +584,26 @@ export class NodeView<
|
||||
onMouseOver(e: Dom.MouseOverEvent) {
|
||||
super.onMouseOver(e)
|
||||
this.notify('node:mouseover', this.getEventArgs(e))
|
||||
this.notifyPortEvent('node:port:mouseover', e)
|
||||
}
|
||||
|
||||
onMouseOut(e: Dom.MouseOutEvent) {
|
||||
super.onMouseOut(e)
|
||||
this.notify('node:mouseout', this.getEventArgs(e))
|
||||
this.notifyPortEvent('node:port:mouseout', e)
|
||||
}
|
||||
|
||||
onMouseEnter(e: Dom.MouseEnterEvent) {
|
||||
this.updateClassName(e)
|
||||
super.onMouseEnter(e)
|
||||
this.notify('node:mouseenter', this.getEventArgs(e))
|
||||
this.notifyPortEvent('node:port:mouseenter', e)
|
||||
}
|
||||
|
||||
onMouseLeave(e: Dom.MouseLeaveEvent) {
|
||||
super.onMouseLeave(e)
|
||||
this.notify('node:mouseleave', this.getEventArgs(e))
|
||||
this.notifyPortEvent('node:port:mouseleave', e)
|
||||
}
|
||||
|
||||
onMouseWheel(e: Dom.EventObject, x: number, y: number, delta: number) {
|
||||
@ -1092,14 +1135,13 @@ export namespace NodeView {
|
||||
interface MagnetEventArgs {
|
||||
magnet: Element
|
||||
}
|
||||
|
||||
export interface MouseEventArgs<E> {
|
||||
e: E
|
||||
node: Node
|
||||
cell: Node
|
||||
view: NodeView
|
||||
port?: string
|
||||
}
|
||||
|
||||
export interface PositionEventArgs<E>
|
||||
extends MouseEventArgs<E>,
|
||||
CellView.PositionEventArgs {}
|
||||
@ -1124,6 +1166,17 @@ export namespace NodeView {
|
||||
'node:mousewheel': PositionEventArgs<Dom.EventObject> &
|
||||
CellView.MouseDeltaEventArgs
|
||||
|
||||
'node:port:click': PositionEventArgs<Dom.ClickEvent>
|
||||
'node:port:dblclick': PositionEventArgs<Dom.DoubleClickEvent>
|
||||
'node:port:contextmenu': PositionEventArgs<Dom.ContextMenuEvent>
|
||||
'node:port:mousedown': PositionEventArgs<Dom.MouseDownEvent>
|
||||
'node:port:mousemove': PositionEventArgs<Dom.MouseMoveEvent>
|
||||
'node:port:mouseup': PositionEventArgs<Dom.MouseUpEvent>
|
||||
'node:port:mouseover': MouseEventArgs<Dom.MouseOverEvent>
|
||||
'node:port:mouseout': MouseEventArgs<Dom.MouseOutEvent>
|
||||
'node:port:mouseenter': MouseEventArgs<Dom.MouseEnterEvent>
|
||||
'node:port:mouseleave': MouseEventArgs<Dom.MouseLeaveEvent>
|
||||
|
||||
'node:customevent': PositionEventArgs<Dom.MouseDownEvent> & {
|
||||
name: string
|
||||
}
|
||||
|
||||
@ -1,23 +1,26 @@
|
||||
import { defineConfig } from 'dumi';
|
||||
import { repository, version } from './package.json';
|
||||
import { defineConfig } from 'dumi'
|
||||
import { repository, version } from './package.json'
|
||||
|
||||
export default defineConfig({
|
||||
locales: [{ id: 'zh', name: '中文' }, { id: 'en', name: 'English' }],
|
||||
locales: [
|
||||
{ id: 'zh', name: '中文' },
|
||||
{ id: 'en', name: 'English' },
|
||||
],
|
||||
themeConfig: {
|
||||
title: 'X6',
|
||||
description: 'JavaScript diagramming library',
|
||||
defaultLanguage: 'zh',
|
||||
siteUrl: 'https://x6.antv.antgroup.com',
|
||||
isAntVSite: false,
|
||||
githubUrl: repository, // GitHub 地址
|
||||
showSearch: true, // 是否显示搜索框
|
||||
showGithubCorner: true, // 是否显示头部的 GitHub icon
|
||||
showGithubStars: true, // 是否显示 GitHub star 数量
|
||||
showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
|
||||
showLanguageSwitcher: false, // 是否显示官网语言切换
|
||||
showWxQrcode: true, // 是否显示头部菜单的微信公众号
|
||||
showChartResize: true, // 是否在 demo 页展示图表视图切换
|
||||
showAPIDoc: false, // 是否在 demo 页展示API文档
|
||||
githubUrl: repository, // GitHub 地址
|
||||
showSearch: true, // 是否显示搜索框
|
||||
showGithubCorner: true, // 是否显示头部的 GitHub icon
|
||||
showGithubStars: true, // 是否显示 GitHub star 数量
|
||||
showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
|
||||
showLanguageSwitcher: false, // 是否显示官网语言切换
|
||||
showWxQrcode: true, // 是否显示头部菜单的微信公众号
|
||||
showChartResize: true, // 是否在 demo 页展示图表视图切换
|
||||
showAPIDoc: false, // 是否在 demo 页展示API文档
|
||||
versions: {
|
||||
[version]: 'https://x6.antv.antgroup.com',
|
||||
'1.x': 'https://x6.antv.vision',
|
||||
@ -73,7 +76,8 @@ export default defineConfig({
|
||||
zh: 'X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。',
|
||||
en: 'X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。',
|
||||
},
|
||||
image: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*A1g0RaZ-GJcAAAAAAAAAAAAADtOHAQ/original',
|
||||
image:
|
||||
'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*A1g0RaZ-GJcAAAAAAAAAAAAADtOHAQ/original',
|
||||
buttons: [
|
||||
{
|
||||
text: {
|
||||
@ -152,19 +156,44 @@ export default defineConfig({
|
||||
zh: '可视化编排可以用简单的方式将复杂的流程呈现出来，让用户更容易理解工作流',
|
||||
en: '可视化编排可以用简单的方式将复杂的流程呈现出来，让用户更容易理解工作流',
|
||||
},
|
||||
image: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*QsT0TpxA8-AAAAAAAAAAAAAADtOHAQ/original',
|
||||
image:
|
||||
'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*QsT0TpxA8-AAAAAAAAAAAAAADtOHAQ/original',
|
||||
isAppLogo: true,
|
||||
},
|
||||
],
|
||||
companies: [
|
||||
{ name: '阿里云', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ' },
|
||||
{ name: '支付宝', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '天猫', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '淘宝网', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '网上银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '京东', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ', },
|
||||
{ name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ', },
|
||||
{
|
||||
name: '阿里云',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '支付宝',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '天猫',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '淘宝网',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '网上银行',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '京东',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: 'yunos',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
{
|
||||
name: '菜鸟',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
|
||||
},
|
||||
],
|
||||
docs: [
|
||||
{
|
||||
@ -264,22 +293,21 @@ export default defineConfig({
|
||||
},
|
||||
playground: {
|
||||
extraLib: '',
|
||||
container: '<div id="container"></div>',
|
||||
container:
|
||||
'<div id="container" style="min-width: 400px; min-height: 600px;"></div>',
|
||||
devDependencies: {
|
||||
typescript: 'latest',
|
||||
},
|
||||
},
|
||||
announcement: {
|
||||
zh: '',
|
||||
en: ''
|
||||
}
|
||||
en: '',
|
||||
},
|
||||
},
|
||||
mfsu: false,
|
||||
alias: {
|
||||
'@': __dirname,
|
||||
},
|
||||
links: [
|
||||
],
|
||||
scripts: [
|
||||
],
|
||||
})
|
||||
links: [],
|
||||
scripts: [],
|
||||
})
|
||||
|
||||
@ -1,3 +1,24 @@
|
||||
# @antv/x6-sites [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.2...@antv/x6-sites@1.4.0) (2023-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
|
||||
* prevent highlighting new edge ([#3170](https://github.com/antvis/x6/issues/3170)) ([bd30f7f](https://github.com/antvis/x6/commit/bd30f7f61de530a9b6671aaedd4be2e026de8d44))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
|
||||
|
||||
## @antv/x6-sites [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.1...@antv/x6-sites@1.3.2) (2023-01-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* change dragging container options ([#3139](https://github.com/antvis/x6/issues/3139)) ([7b091f3](https://github.com/antvis/x6/commit/7b091f35dee147c5e7bf97577e14e11ceb7e8e3d))
|
||||
* update group even group is empty ([#3117](https://github.com/antvis/x6/issues/3117)) ([6abd068](https://github.com/antvis/x6/commit/6abd0683eab22eb0fa1a4702642ab76b91320694))
|
||||
|
||||
## @antv/x6-sites [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.0...@antv/x6-sites@1.3.1) (2023-01-03)
|
||||
|
||||
|
||||
|
||||
@ -19,17 +19,17 @@ redirect_from:
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
| 事件 | cell 节点/边 | node 节点 | edge 边 | blank 画布空白区域 |
|
||||
| -------- | ------------------ | ------------------ | ------------------ | ------------------- |
|
||||
| 单击 | `cell:click` | `node:click` | `edge:click` | `blank:click` |
|
||||
| 双击 | `cell:dblclick` | `node:dblclick` | `edge:dblclick` | `blank:dblclick` |
|
||||
| 右键 | `cell:contextmenu` | `node:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
|
||||
| 鼠标按下 | `cell:mousedown` | `node:mousedown` | `edge:mousedown` | `blank:mousedown` |
|
||||
| 移动鼠标 | `cell:mousemove` | `node:mousemove` | `edge:mousemove` | `blank:mousemove` |
|
||||
| 鼠标抬起 | `cell:mouseup` | `node:mouseup` | `edge:mouseup` | `blank:mouseup` |
|
||||
| 鼠标滚轮 | `cell:mousewheel` | `node:mousewheel` | `edge:mousewheel` | `blank:mousewheel` |
|
||||
| 鼠标进入 | `cell:mouseenter` | `node:mouseenter` | `edge:mouseenter` | `graph:mouseenter` |
|
||||
| 鼠标离开 | `cell:mouseleave` | `node:mouseleave` | `edge:mouseleave` | `graph:mouseleave` |
|
||||
| 事件 | cell 节点/边 | node 节点 | port 连接桩 | edge 边 | blank 画布空白区域 |
|
||||
|-------|---------------------|---------------------|--------------------------|---------------------|----------------------|
|
||||
| 单击 | `cell:click` | `node:click` | `node:port:click` | `edge:click` | `blank:click` |
|
||||
| 双击 | `cell:dblclick` | `node:dblclick` | `node:port:dblclick` | `edge:dblclick` | `blank:dblclick` |
|
||||
| 右键 | `cell:contextmenu` | `node:contextmenu` | `node:port:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
|
||||
| 鼠标按下 | `cell:mousedown` | `node:mousedown` | `node:port:mousedown` | `edge:mousedown` | `blank:mousedown` |
|
||||
| 移动鼠标 | `cell:mousemove` | `node:mousemove` | `node:port:mousemove` | `edge:mousemove` | `blank:mousemove` |
|
||||
| 鼠标抬起 | `cell:mouseup` | `node:mouseup` | `node:port:mouseup` | `edge:mouseup` | `blank:mouseup` |
|
||||
| 鼠标滚轮 | `cell:mousewheel` | `node:mousewheel` | - | `edge:mousewheel` | `blank:mousewheel` |
|
||||
| 鼠标进入 | `cell:mouseenter` | `node:mouseenter` | `node:port:mouseenter` | `edge:mouseenter` | `graph:mouseenter` |
|
||||
| 鼠标离开 | `cell:mouseleave` | `node:mouseleave` | `node:port:mouseleave` | `edge:mouseleave` | `graph:mouseleave` |
|
||||
|
||||
:::warning{title=注意：}
|
||||
需要注意的是，这里的 `mousemove` 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。
|
||||
|
||||
@ -55,7 +55,6 @@ graph.use(
|
||||
| width | number | - | | `Scroller` 的宽度，默认为画布容器宽度 |
|
||||
| height | number | - | | `Scroller` 的高度，默认为画布容器高度 |
|
||||
| modifiers | ModifierKey | - | | 设置修饰键后需要点击鼠标并按下修饰键才能触发画布拖拽 |
|
||||
| cursor | string | - | | 画布鼠标样式，默认为空。当 `cursor` 为空并开启拖拽时，将自动为画布设置 `grab` 鼠标样式 |
|
||||
| pageWidth | number | - | | 每一页的宽度，默认为画布容器宽度 |
|
||||
| pageHeight | number | - | | 每一页的高度，默认为画布容器高度 |
|
||||
| pageVisible | boolean | `false` | | 是否分页 |
|
||||
|
||||
@ -62,8 +62,8 @@ graph.use(
|
||||
| className | string | - | | 附加样式名，用于定制样式 |
|
||||
| multiple | boolean | `true` | | 是否启用点击多选，启用后按住 `ctrl` 或 `command` 键点击节点实现多选 |
|
||||
| multipleSelectionModifiers | ModifierKey | `['ctrl', 'meta']` | | 用于设置上面点击多选配套的修饰键 |
|
||||
| rubberband | boolean | `false` | | 是否启用多选节点功能 |
|
||||
| modifiers | ModifierKey | - | | 设置修饰键后需要点击鼠标并按下修饰键才能触发多选 |
|
||||
| rubberband | boolean | `false` | | 是否启用框选节点功能 |
|
||||
| modifiers | ModifierKey | - | | 用于设置上面框选配套的修饰键 |
|
||||
| strict | boolean | `false` | | 选框是否需要完全包围节点时才选中节点 |
|
||||
| movable | boolean | `true` | | 拖动选框时框选的节点是否一起移动 |
|
||||
| content | string | - | | 设置附加显示的内容 |
|
||||
|
||||
@ -23,12 +23,7 @@ const graph = new Graph({
|
||||
maxScale: 3,
|
||||
},
|
||||
connecting: {
|
||||
router: {
|
||||
name: 'manhattan',
|
||||
args: {
|
||||
padding: 1,
|
||||
},
|
||||
},
|
||||
router: 'manhattan',
|
||||
connector: {
|
||||
name: 'rounded',
|
||||
args: {
|
||||
@ -77,27 +72,39 @@ const graph = new Graph({
|
||||
|
||||
// #region 使用插件
|
||||
graph
|
||||
.use(new Transform({
|
||||
resizing: true,
|
||||
rotating: true,
|
||||
}))
|
||||
.use(new Selection({
|
||||
enabled: true,
|
||||
rubberband: true,
|
||||
showNodeSelectionBox: true,
|
||||
}))
|
||||
.use(new Snapline({
|
||||
enabled: true,
|
||||
}))
|
||||
.use(new Keyboard({
|
||||
enabled: true,
|
||||
}))
|
||||
.use(new Clipboard({
|
||||
enabled: true,
|
||||
}))
|
||||
.use(new History({
|
||||
enabled: true,
|
||||
}))
|
||||
.use(
|
||||
new Transform({
|
||||
resizing: true,
|
||||
rotating: true,
|
||||
}),
|
||||
)
|
||||
.use(
|
||||
new Selection({
|
||||
enabled: true,
|
||||
rubberband: true,
|
||||
showNodeSelectionBox: true,
|
||||
}),
|
||||
)
|
||||
.use(
|
||||
new Snapline({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
.use(
|
||||
new Keyboard({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
.use(
|
||||
new Clipboard({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
.use(
|
||||
new History({
|
||||
enabled: true,
|
||||
}),
|
||||
)
|
||||
// #endregion
|
||||
|
||||
// #region 初始化 stencil
|
||||
@ -154,7 +161,7 @@ graph.bindKey(['meta+v', 'ctrl+v'], () => {
|
||||
return false
|
||||
})
|
||||
|
||||
//undo redo
|
||||
// undo redo
|
||||
graph.bindKey(['meta+z', 'ctrl+z'], () => {
|
||||
if (graph.canUndo()) {
|
||||
graph.undo()
|
||||
@ -176,7 +183,7 @@ graph.bindKey(['meta+a', 'ctrl+a'], () => {
|
||||
}
|
||||
})
|
||||
|
||||
//delete
|
||||
// delete
|
||||
graph.bindKey('backspace', () => {
|
||||
const cells = graph.getSelectedCells()
|
||||
if (cells.length) {
|
||||
@ -200,7 +207,7 @@ graph.bindKey(['ctrl+2', 'meta+2'], () => {
|
||||
|
||||
// 控制连接桩显示/隐藏
|
||||
const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
|
||||
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
||||
for (let i = 0, len = ports.length; i < len; i += 1) {
|
||||
ports[i].style.visibility = show ? 'visible' : 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "@antv/x6-sites",
|
||||
"version": "2.0.0",
|
||||
"version": "1.4.0",
|
||||
"description": "X6 sites deployed on gh-pages",
|
||||
"scripts": {
|
||||
"dev": "dumi dev",
|
||||
@ -14,7 +14,7 @@
|
||||
"sites"
|
||||
],
|
||||
"dependencies": {
|
||||
"@antv/dumi-theme-antv": "^0.3.0-beta.22",
|
||||
"@antv/dumi-theme-antv": "^0.3.5",
|
||||
"@antv/hierarchy": "^0.6.6",
|
||||
"@antv/layout": "^0.3.12",
|
||||
"@antv/x6": "^2.x",
|
||||
@ -33,7 +33,7 @@
|
||||
"@antv/x6-react-shape": "^2.x",
|
||||
"antd": "^4.4.2",
|
||||
"dagre": "^0.8.5",
|
||||
"dumi": "2.0.16",
|
||||
"dumi": "^2.1.6",
|
||||
"elkjs": "^0.8.2",
|
||||
"highlight.js": "^10.1.2",
|
||||
"react": "^18.0.0",
|
||||
|
||||
Reference in New Issue
Block a user