Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

源码阅读 #4392

Draft
wants to merge 26 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
f52d2e4
feat:windows下编译修改
yelikang Aug 19, 2024
e4ed2d4
bug:x6小地图定位不准
yelikang Aug 19, 2024
df812a7
feat:部分源码备注
yelikang Aug 19, 2024
494716f
feat:x6-plugin-history,撤销回退插件原理
yelikang Aug 19, 2024
ff4bf71
feat: Dom公共方法封装(可借鉴)
yelikang Aug 19, 2024
db42367
feat:对象属性mixins
yelikang Aug 19, 2024
70702af
feat:Dom事件注册与Graph本身的事件注册区分开
yelikang Aug 19, 2024
65ddd45
feat: Renderer渲染器渲染原理
yelikang Aug 19, 2024
5ebb94a
feat:调试
yelikang Aug 19, 2024
1f88d3d
feat:鼠标交互,及元素捕捉+事件触发
yelikang Aug 19, 2024
c3b844e
feat:调试
yelikang Aug 20, 2024
624da97
feat:事件处理,构建自定义event
yelikang Aug 20, 2024
48f6c0d
feat: render及queueJob 任务队列
yelikang Aug 20, 2024
17bef50
feat:model中创建Node、Edge模型
yelikang Aug 20, 2024
86376ba
feat:元素捕捉逻辑(当前元素向上递归拥有data-cell-id的父元素的id值)
yelikang Aug 20, 2024
ea2b31b
feat: view层,事件handler,触发对应的CellView(NodeView/EdgeView)的事件监听
yelikang Aug 20, 2024
8b9675e
feat:事件触发,通过store存储之前event中的data数据,下次操作同类型事件能取到相应数据
yelikang Aug 20, 2024
6308950
feat:关于自定义事件event,存储自定义data的部分场景
yelikang Aug 20, 2024
0e97ca4
feat: CellView(NodeView/EdgeView)中包含Cell(Node/Edge)
yelikang Aug 20, 2024
7478b0b
feat: Model中的Collection添加Cell,通过事件告知Scheduler调度器,进行相应的CellView的创建,并通过…
yelikang Aug 20, 2024
b85ca7f
feat:调试
yelikang Aug 20, 2024
dc6ca1a
feat:事件委托,触发流程备注
yelikang Aug 20, 2024
a14c3c5
feat: coord 坐标转换
yelikang Aug 21, 2024
f2c8d74
feat: dnd(drag and drop) 拖拽进入插件
yelikang Aug 22, 2024
bc11c59
feat: coord坐标系统
yelikang Aug 22, 2024
cab6e2c
x6-vue-shape渲染自定义vue组件
yelikang Jan 24, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat:部分源码备注
  • Loading branch information
yelikang committed Aug 19, 2024
commit df812a72527645cddab6ef4b26c2d13e9766d453
4 changes: 4 additions & 0 deletions examples/x6-example-features/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,10 @@ const dataSource = [
example: 'history',
description: '时光回溯',
},
{
example: 'minimap',
description: '小地图',
},
].map((item, index) => ({ key: index, ...item }))

const columns = [
Expand Down
8 changes: 4 additions & 4 deletions examples/x6-example-features/src/pages/minimap/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@

.app-minimap {
position: absolute;
bottom: 0;
left: 620px;
width: 200px;
height: 150px;
bottom: 16px;
right: 167px;
width: 400px;
height: 400px;
}

.x6-widget-minimap-viewport {
Expand Down
59 changes: 39 additions & 20 deletions examples/x6-example-features/src/pages/minimap/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react'
import { Graph } from '@antv/x6'
import { MiniMap } from '@antv/x6-plugin-minimap'
import { MiniMap } from '../../../../../packages/x6-plugin-minimap/src/index'
import { Scroller } from '@antv/x6-plugin-scroller'
import { Radio } from 'antd'
import { SimpleNodeView } from './simple-view'
Expand All @@ -18,29 +18,28 @@ export default class Example extends React.Component {

componentDidMount() {
this.graph = new Graph({
panning: {
enabled: true,
modifiers: [],
eventTypes: ['leftMouseDown'],
},
mousewheel: {
enabled: true,
},
container: this.container,
width: 600,
height: 320,
width: 1600,
height: 800,
background: {
color: '#F2F7FA',
},
})

this.graph.use(
new Scroller({
pageVisible: true,
pageBreak: false,
pannable: true,
}),
)
this.graph.use(
new MiniMap({
container: this.minimapContainer,
width: 200,
height: 160,
padding: 10,
}),
)
// this.graph.use(
// new Scroller({
// pannable: false,
// }),
// )


this.graph.addNode({
x: 200,
Expand Down Expand Up @@ -78,8 +77,8 @@ export default class Example extends React.Component {

const target = this.graph.addNode({
shape: 'circle',
x: 160,
y: 180,
x: 1160,
y: 2180,
width: 60,
height: 60,
label: 'World',
Expand All @@ -102,6 +101,22 @@ export default class Example extends React.Component {
},
},
})


this.graph.use(
new MiniMap({
container: this.minimapContainer,
width: 400,
height: 400,
padding: 1,
preserveAspectRatio:false,
graphOptions:{
width:400,
height:400
}
}),
)

}

onMinimapViewChange = (val: string) => {
Expand Down Expand Up @@ -148,6 +163,9 @@ export default class Example extends React.Component {
refMiniMapContainer = (container: HTMLDivElement) => {
this.minimapContainer = container
}
changeSize = () => {
this.graph.resize(1800, 800)
}

render() {
return (
Expand All @@ -159,6 +177,7 @@ export default class Example extends React.Component {
defaultValue={'detailed'}
optionType="button"
/>
<button onClick={this.changeSize}>Change Size</button>
</div>
<div className="app-content" ref={this.refContainer} />
<div className="app-minimap" ref={this.refMiniMapContainer} />
Expand Down
1 change: 1 addition & 0 deletions packages/x6-common/src/dom/event/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ export namespace Core {
event.data = handleObj.data

const hookHandle = EventHook.get(handleObj.originType).handle
console.log('dispatch 事件触发', handleObj.originType, hookHandle, handleObj.handler)

const result = hookHandle
? hookHandle(matched.elem as Store.EventTarget, event, ...args)
Expand Down
1 change: 1 addition & 0 deletions packages/x6-geometry/src/rectangle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -624,6 +624,7 @@ export class Rectangle extends Geometry implements Rectangle.RectangleLike {

/**
* Returns a rectangle that is a union of this rectangle and rectangle `rect`.
* 返回一个矩形区域,该矩形是两个矩形区域的并集(最大区域)。
*/
union(rect: Rectangle.RectangleLike | Rectangle.RectangleData) {
const ref = Rectangle.clone(rect)
Expand Down
2 changes: 1 addition & 1 deletion packages/x6/src/graph/graph.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Basecoat, NumberExt, Dom, KeyValue } from '@antv/x6-common'
import { Point, Rectangle } from '@antv/x6-geometry'
import { Point, Rectangle } from '../../../x6-geometry/src/index'
import { Model, Collection, Cell, Node, Edge } from '../model'
import { CellView } from '../view'
import * as Registry from '../registry'
Expand Down
12 changes: 9 additions & 3 deletions packages/x6/src/graph/transform.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Dom, NumberExt } from '@antv/x6-common'
import { Point, Rectangle } from '@antv/x6-geometry'
import { Dom, NumberExt } from '../../../x6-common/src/index'
import { Point, Rectangle } from '../../../x6-geometry/src/index'
import { Base } from './base'
import { Util } from '../util'
import { Cell } from '../model'
Expand Down Expand Up @@ -322,6 +322,7 @@ export class TransformManager extends Base {
options: TransformManager.ScaleContentToFitOptions = {},
translate = true,
) {
console.log('scaleContentToFitImpl', options)
let contentBBox
let contentLocalOrigin
if (options.contentArea) {
Expand Down Expand Up @@ -367,8 +368,10 @@ export class TransformManager extends Base {
})

const currentScale = this.getScale()

// 新的X轴缩放比(scaleX) = (视口宽 / 内容区域宽) * 当前X轴缩放比
// 保证区域内容都在视口中展示
let newSX = (fittingBox.width / contentBBox.width) * currentScale.sx
// 新的y轴缩放比(scaleY) = (视口高 / 内容区域高) * 当前Y轴缩放比
let newSY = (fittingBox.height / contentBBox.height) * currentScale.sy

if (options.preserveAspectRatio !== false) {
Expand Down Expand Up @@ -421,8 +424,10 @@ export class TransformManager extends Base {
const area = Rectangle.create(rect)
const graph = this.graph

// 内容区域位置信息
options.contentArea = area
if (options.viewportArea == null) {
// 视口位置信息(视口一般会小于内容区域位置,移动视口可以看内容区域不同位置)
options.viewportArea = {
x: graph.options.x,
y: graph.options.y,
Expand Down Expand Up @@ -459,6 +464,7 @@ export class TransformManager extends Base {
y = cy - y * scale.sy // eslint-disable-line

if (ts.tx !== x || ts.ty !== y) {
console.log('centerPoint', x, y)
this.translate(x, y)
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/x6/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export * from './graph'
export * from './config'
export * from './util'

export * from '@antv/x6-common'
export * from '../../x6-common/src/index'
export * from '@antv/x6-geometry'

export { Shape, Registry }
4 changes: 2 additions & 2 deletions packages/x6/src/model/cell.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {
KeyValue,
Size,
Basecoat,
} from '@antv/x6-common'
import { Rectangle, Point } from '@antv/x6-geometry'
} from '../../../x6-common/src/index'
import { Rectangle, Point } from '../../../x6-geometry/src/index'
import { NonUndefined } from 'utility-types'
import { Attr } from '../registry'
import { Model } from './model'
Expand Down
Loading