alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(minimap): show partial nodes

Browse Source
This commit is contained in:
moklick
2019-08-06 11:36:53 +02:00
parent cac51acc26
commit fbbd0a93ba
7 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dist/ReactGraph.js vendored
View File

@@ -29889,6 +29889,7 @@
};
var getNodesInside = function getNodesInside(nodes, bbox) {
var transform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 1];
var partially = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
return nodes.filter(function (n) {
var bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
@@ -29900,7 +29901,11 @@
position = _n$__rg.position,
width = _n$__rg.width,
height = _n$__rg.height;
return position.x > bboxPos.x && position.x + width < bboxPos.x + bboxWidth && position.y > bboxPos.y && position.y + height < bboxPos.y + bboxHeight;
var nodeWidth = partially ? -width : width;
var nodeHeight = partially ? 0 : height;
var offsetX = partially ? width : 0;
var offsetY = partially ? height : 0;
return position.x + offsetX > bboxPos.x && position.x + nodeWidth < bboxPos.x + bboxWidth && position.y + offsetY > bboxPos.y && position.y + nodeHeight < bboxPos.y + bboxHeight;
});
};
var getConnectedEdges = function getConnectedEdges(nodes, edges) {
@@ -33681,7 +33686,7 @@
React.useEffect(function () {
if (canvasNode) {
var ctx = canvasNode.current.getContext('2d');
var nodesInside = getNodesInside(state.nodes, bbox, state.transform);
var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
nodesInside.forEach(function (n) {

10
example/SimpleGraph.js
View File

@@ -77,7 +77,7 @@ class App extends PureComponent {
{ source: '2', target: '3' },
{ source: '3', target: '4', type: 'step' },
{ source: '3', target: '5' },
{ source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } },
{ source: '5', target: '6', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
{ source: '6', target: '7', style: { stroke: '#FFCC00' }},
]
};
@@ -166,9 +166,11 @@ class App extends PureComponent {
<MiniMap
style={{ position: 'absolute', right: 10, bottom: 10 }}
nodeColor={n => {
if (n.type === 'input') return 'blue'
if (n.type === 'output') return 'green'
return 'red';
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
if (n.type === 'default') return 'red';
return '#FFCC00';
}}
/>
<button

16
example/build/example.e31bb0bc.js
View File

@@ -37723,6 +37723,7 @@ exports.graphPosToZoomedPos = graphPosToZoomedPos;
var getNodesInside = function getNodesInside(nodes, bbox) {
var transform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 1];
var partially = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
return nodes.filter(function (n) {
var bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
@@ -37734,7 +37735,11 @@ var getNodesInside = function getNodesInside(nodes, bbox) {
position = _n$__rg.position,
width = _n$__rg.width,
height = _n$__rg.height;
return position.x > bboxPos.x && position.x + width < bboxPos.x + bboxWidth && position.y > bboxPos.y && position.y + height < bboxPos.y + bboxHeight;
var nodeWidth = partially ? -width : width;
var nodeHeight = partially ? 0 : height;
var offsetX = partially ? width : 0;
var offsetY = partially ? height : 0;
return position.x + offsetX > bboxPos.x && position.x + nodeWidth < bboxPos.x + bboxWidth && position.y + offsetY > bboxPos.y && position.y + nodeHeight < bboxPos.y + bboxHeight;
});
};
@@ -42344,7 +42349,7 @@ var _default = function _default(_ref) {
(0, _react.useEffect)(function () {
if (canvasNode) {
var ctx = canvasNode.current.getContext('2d');
var nodesInside = (0, _graphUtils.getNodesInside)(state.nodes, bbox, state.transform);
var nodesInside = (0, _graphUtils.getNodesInside)(state.nodes, bbox, state.transform, true);
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
nodesInside.forEach(function (n) {
@@ -42693,7 +42698,7 @@ function (_PureComponent) {
}, {
source: '5',
target: '6',
type: 'straight',
type: 'step',
animated: true,
style: {
stroke: '#FFCC00'
@@ -42831,7 +42836,8 @@ function (_PureComponent) {
nodeColor: function nodeColor(n) {
if (n.type === 'input') return 'blue';
if (n.type === 'output') return 'green';
return 'red';
if (n.type === 'default') return 'red';
return '#FFCC00';
}
}), _react.default.createElement("button", {
type: "button",
@@ -42910,7 +42916,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60610" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "61389" + '/');
ws.onmessage = function (event) {
checkedAssets = {};

2
example/build/example.e31bb0bc.js.map
View File

File diff suppressed because one or more lines are too long

2
example/build/index.js
View File

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60610" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "61389" + '/');
ws.onmessage = function (event) {
checkedAssets = {};

2
src/Plugins/MiniMap/index.js
View File

@@ -27,7 +27,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
useEffect(() => {
if (canvasNode) {
const ctx = canvasNode.current.getContext('2d');
const nodesInside = getNodesInside(state.nodes, bbox, state.transform);
const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);

12
src/graph-utils.js
View File

@@ -102,7 +102,7 @@ export const graphPosToZoomedPos = (pos, transform) => {
};
}
export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = false) => {
return nodes.
filter(n => {
const bboxPos = {
@@ -112,10 +112,14 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
const bboxWidth = bbox.width * (1 / transform[2]);
const bboxHeight = bbox.height * (1 / transform[2]);
const { position, width, height } = n.__rg;
const nodeWidth = partially ? -width : width;
const nodeHeight = partially ? 0 : height;
const offsetX = partially ? width : 0;
const offsetY = partially ? height : 0;
return (
(position.x > bboxPos.x && (position.x + width) < (bboxPos.x + bboxWidth)) &&
(position.y > bboxPos.y && (position.y + height) < (bboxPos.y + bboxHeight))
(position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
(position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight))
);
});
};
@@ -123,7 +127,7 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
export const getConnectedEdges = (nodes, edges) => {
const nodeIds = nodes.map(n => n.id);
return edges.filter(e => nodeIds.includes(e.source) || nodeIds.includes(e.target))
}
};
export default {
isEdge,