Skip to content

Commit

Permalink
feat:改变子节点位置和大小时改变父节点
Browse files Browse the repository at this point in the history
  • Loading branch information
@jack12312846
jack12312846 committed Sep 22, 2021
1 parent cd65120 commit 2939aa8
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 165 deletions.
2 changes: 1 addition & 1 deletion learn-x6/src/assets/styles/reset.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.x6-widget-transform {
margin: -1px 0 0 -1px;
padding: 0px;
border: 1px solid #239edd;
border: 1px dashed #239edd;
> div {
border: 1px solid #239edd;
}
Expand Down
155 changes: 0 additions & 155 deletions learn-x6/src/components/Content/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,158 +197,3 @@ export default {
height: 100%;
}
</style>

<!--

import { Graph } from '@antv/x6'

const graph = new Graph({
container: document.getElementById('container'),
grid: true,
embedding: {
enabled: true,
},
highlighting: {
embedding: {
name: 'stroke',
args: {
padding: -1,
attrs: {
stroke: '#73d13d',
},
},
},
},
})

const source = graph.addNode({
x: 80,
y: 100,
width: 80,
height: 40,
label: 'Child',
zIndex: 10,
attrs: {
body: {
stroke: 'none',
fill: '#3199FF',
},
label: {
fill: '#fff',
fontSize: 12,
},
},
})

const target = graph.addNode({
x: 280,
y: 80,
width: 80,
height: 40,
label: 'Child',
zIndex: 10,
attrs: {
body: {
stroke: 'none',
fill: '#47C769',
},
label: {
fill: '#fff',
fontSize: 12,
},
},
})

const parent = graph.addNode({
x: 40,
y: 40,
width: 360,
height: 160,
zIndex: 1,
label: 'Parent',
attrs: {
body: {
fill: '#fffbe6',
stroke: '#ffe7ba',
},
label: {
fontSize: 12,
},
},
})

parent.addChild(source)
parent.addChild(target)

let ctrlPressed = false
const embedPadding = 20



graph.on('node:change:position', ({ node, options }) => {

const children = node.getChildren()
if (children && children.length) {
node.prop('originPosition', node.getPosition())
}

const parent = node.getParent()
if (parent && parent.isNode()) {
let originSize = parent.prop('originSize')
if (originSize == null) {
originSize = parent.getSize()
parent.prop('originSize', originSize)
}

let originPosition = parent.prop('originPosition')
if (originPosition == null) {
originPosition = parent.getPosition()
parent.prop('originPosition', originPosition)
}

let x = originPosition.x
let y = originPosition.y
let cornerX = originPosition.x + originSize.width
let cornerY = originPosition.y + originSize.height
let hasChange = false

const children = parent.getChildren()
if (children) {
children.forEach((child) => {
const bbox = child.getBBox().inflate(embedPadding)
const corner = bbox.getCorner()

if (bbox.x < x) {
x = bbox.x
hasChange = true
}

if (bbox.y < y) {
y = bbox.y
hasChange = true
}

if (corner.x > cornerX) {
cornerX = corner.x
hasChange = true
}

if (corner.y > cornerY) {
cornerY = corner.y
hasChange = true
}
})
}

if (hasChange) {
parent.prop(
{
position: { x, y },
size: { width: cornerX - x, height: cornerY - y },
},
)
}
}
})

-->
121 changes: 112 additions & 9 deletions learn-x6/src/components/Contextmenu/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
置底
</a-card-grid>
<a-card-grid
:class="{'contextmenu-disable': contextmenuNode.prop('name') && !contextmenuNode.prop('name').includes('chart')}"
:hoverable="contextmenuNode.prop('name').includes('chart')"
:class="{'contextmenu-disable': !isChartNode(contextmenuNode)}"
:hoverable="isChartNode(contextmenuNode)"
class="grid"
@click="setData"
>
Expand All @@ -31,6 +31,8 @@
<script>
import { mapState } from "vuex";
const PADDING = 10;
export default {
name: "index",
props: {
Expand Down Expand Up @@ -82,24 +84,125 @@ export default {
return this;
}
// 获取节点包围框的大小，动态创建一个与之相同的 node
debugger
const { width, height, x, y } = document.querySelector('.x6-widget-selection-inner').getBoundingClientRect();
// 转成页面本地坐标
const rect = this.graph.pageToLocal(x, y, width, height);
const rect = this.graph.pageToLocal(x - PADDING, y - PADDING, width + 2 * PADDING, height + 2 * PADDING);
const parentNode = this.graph.addNode({
...rect,
...rect,
attrs: {
body: {
stroke: 'none',
fill: 'transparent',
}
body: {
stroke: 'none',
strokeWidth: 1,
fill: 'transparent',
}
}
});
// 把选中的子节点添加到其中
cells.forEach(cell => {
parentNode.addChild(cell);
cell.toFront();
});
this.$emit('setContextMenuStyle', null); // 隐藏右键菜单
this.onChildSizeAndPos();
this.highlightParent();
},
onChildSizeAndPos() {
// 监听子节点位置的改变
graph.on('node:change:position', ({ node }) => {
this.handleParentSizeAndPos(node);
});
// 监听子节点大小的改变
graph.on('node:change:size', ({ node }) => {
this.handleParentSizeAndPos(node);
});
},
/**
* 设置父节点
* @param node 子节点
*/
handleParentSizeAndPos(node) {
//
const parent = node.getParent();
if (parent && parent.isNode()) {
let hasChange = false;
let x = 0;
let y = 0;
let cornerX = 0;
let cornerY = 0;
const children = parent.getChildren();
if (children) {
for (let i = 0; i < children.length; i++) {
const child = children[ i ];
const bbox = child.getBBox();
const corner = bbox.getCorner();
if (i === 0) {
x = bbox.x;
y = bbox.y;
cornerX = corner.x;
cornerY = corner.y;
continue;
}
if (bbox.x < x) {
x = bbox.x;
hasChange = true;
}
if (bbox.y < y) {
y = bbox.y;
hasChange = true;
}
if (corner.x > cornerX) {
cornerX = corner.x;
hasChange = true;
}
if (corner.y > cornerY) {
cornerY = corner.y;
hasChange = true;
}
}
}
// 设置父节点的位置和大小
if (hasChange) {
parent.prop(
{
position: { x: x - PADDING, y: y - PADDING },
size: { width: cornerX - x + 2 * PADDING, height: cornerY - y + 2 * PADDING },
}
);
}
}
},
highlightParent() {
const { graph } = this;
// 鼠标按下子节点 高亮显示父节点
graph.on('node:mousedown', ({ node }) => {
const parent = node.getParent();
if (parent && parent.isNode()) {
parent.attr('body/stroke', '#239edd')
}
})
// 鼠标抬起子节点 取消高亮显示父节点
graph.on('node:mouseup', ({ node }) => {
const parent = node.getParent();
if (parent && parent.isNode()) {
parent.attr('body/stroke', 'node')
}
})
},
// 是否是图表节点
isChartNode(node) {
if (node.prop('name')) {
return node.prop('name').includes('chart');
}
return false;
}
}
};
Expand Down

0 comments on commit 2939aa8

Please sign in to comment.