Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.assets.rjzjh.echarts.src.chart.graph.GraphView.js Maven / Gradle / Ivy
define(function (require) {
var SymbolDraw = require('../helper/SymbolDraw');
var LineDraw = require('../helper/LineDraw');
var RoamController = require('../../component/helper/RoamController');
var graphic = require('../../util/graphic');
var adjustEdge = require('./adjustEdge');
var zrUtil = require('zrender/core/util');
var nodeOpacityPath = ['itemStyle', 'normal', 'opacity'];
var lineOpacityPath = ['lineStyle', 'normal', 'opacity'];
function getItemOpacity(item, opacityPath) {
return item.getVisual('opacity') || item.getModel().get(opacityPath);
}
require('../../echarts').extendChartView({
type: 'graph',
init: function (ecModel, api) {
var symbolDraw = new SymbolDraw();
var lineDraw = new LineDraw();
var group = this.group;
var controller = new RoamController(api.getZr(), group);
group.add(symbolDraw.group);
group.add(lineDraw.group);
this._symbolDraw = symbolDraw;
this._lineDraw = lineDraw;
this._controller = controller;
this._firstRender = true;
},
render: function (seriesModel, ecModel, api) {
var coordSys = seriesModel.coordinateSystem;
this._model = seriesModel;
this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
var symbolDraw = this._symbolDraw;
var lineDraw = this._lineDraw;
var group = this.group;
if (coordSys.type === 'view') {
var groupNewProp = {
position: coordSys.position,
scale: coordSys.scale
};
if (this._firstRender) {
group.attr(groupNewProp);
}
else {
graphic.updateProps(group, groupNewProp, seriesModel);
}
}
// Fix edge contact point with node
adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
var data = seriesModel.getData();
symbolDraw.updateData(data);
var edgeData = seriesModel.getEdgeData();
lineDraw.updateData(edgeData);
this._updateNodeAndLinkScale();
this._updateController(seriesModel, api);
clearTimeout(this._layoutTimeout);
var forceLayout = seriesModel.forceLayout;
var layoutAnimation = seriesModel.get('force.layoutAnimation');
if (forceLayout) {
this._startForceLayoutIteration(forceLayout, layoutAnimation);
}
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
// Update draggable
el.off('drag').off('dragend');
var draggable = data.getItemModel(idx).get('draggable');
if (draggable) {
el.on('drag', function () {
if (forceLayout) {
forceLayout.warmUp();
!this._layouting
&& this._startForceLayoutIteration(forceLayout, layoutAnimation);
forceLayout.setFixed(idx);
// Write position back to layout
data.setItemLayout(idx, el.position);
}
}, this).on('dragend', function () {
if (forceLayout) {
forceLayout.setUnfixed(idx);
}
}, this);
}
el.setDraggable(draggable && forceLayout);
el.off('mouseover', this._focusNodeAdjacency);
el.off('mouseout', this._unfocusAll);
if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', this._focusNodeAdjacency, this);
el.on('mouseout', this._unfocusAll, this);
}
}, this);
this._firstRender = false;
},
_focusNodeAdjacency: function (e) {
var data = this._model.getData();
var graph = data.graph;
var el = e.target;
var dataIndex = el.dataIndex;
var dataType = el.dataType;
function fadeOutItem(item, opacityPath) {
var opacity = getItemOpacity(item, opacityPath);
var el = item.getGraphicEl();
if (opacity == null) {
opacity = 1;
}
el.traverse(function (child) {
child.trigger('normal');
if (child.type !== 'group') {
child.setStyle('opacity', opacity * 0.1);
}
});
}
function fadeInItem(item, opacityPath) {
var opacity = getItemOpacity(item, opacityPath);
var el = item.getGraphicEl();
el.traverse(function (child) {
child.trigger('emphasis');
if (child.type !== 'group') {
child.setStyle('opacity', opacity);
}
});
}
if (dataIndex !== null && dataType !== 'edge') {
graph.eachNode(function (node) {
fadeOutItem(node, nodeOpacityPath);
});
graph.eachEdge(function (edge) {
fadeOutItem(edge, lineOpacityPath);
});
var node = graph.getNodeByIndex(dataIndex);
zrUtil.each(node.edges, function (edge) {
if (edge.dataIndex < 0) {
return;
}
fadeInItem(edge, lineOpacityPath);
fadeInItem(edge.node1, nodeOpacityPath);
fadeInItem(edge.node2, nodeOpacityPath);
});
}
},
_unfocusAll: function () {
var data = this._model.getData();
var graph = data.graph;
graph.eachNode(function (node) {
var opacity = getItemOpacity(node, nodeOpacityPath);
node.getGraphicEl().traverse(function (child) {
child.trigger('normal');
if (child.type !== 'group') {
child.setStyle('opacity', opacity);
}
});
});
graph.eachEdge(function (edge) {
var opacity = getItemOpacity(edge, lineOpacityPath);
edge.getGraphicEl().traverse(function (child) {
child.trigger('normal');
if (child.type !== 'group') {
child.setStyle('opacity', opacity);
}
});
});
},
_startForceLayoutIteration: function (forceLayout, layoutAnimation) {
var self = this;
(function step() {
forceLayout.step(function (stopped) {
self.updateLayout(self._model);
(self._layouting = !stopped) && (
layoutAnimation
? (self._layoutTimeout = setTimeout(step, 16))
: step()
);
});
})();
},
_updateController: function (seriesModel, api) {
var controller = this._controller;
var group = this.group;
controller.rectProvider = function () {
var rect = group.getBoundingRect();
rect.applyTransform(group.transform);
return rect;
};
if (seriesModel.coordinateSystem.type !== 'view') {
controller.disable();
return;
}
controller.enable(seriesModel.get('roam'));
controller.zoomLimit = seriesModel.get('scaleLimit');
// Update zoom from model
controller.zoom = seriesModel.coordinateSystem.getZoom();
controller
.off('pan')
.off('zoom')
.on('pan', function (dx, dy) {
api.dispatchAction({
seriesId: seriesModel.id,
type: 'graphRoam',
dx: dx,
dy: dy
});
})
.on('zoom', function (zoom, mouseX, mouseY) {
api.dispatchAction({
seriesId: seriesModel.id,
type: 'graphRoam',
zoom: zoom,
originX: mouseX,
originY: mouseY
});
this._updateNodeAndLinkScale();
adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
this._lineDraw.updateLayout();
}, this);
},
_updateNodeAndLinkScale: function () {
var seriesModel = this._model;
var data = seriesModel.getData();
var nodeScale = this._getNodeGlobalScale(seriesModel);
var invScale = [nodeScale, nodeScale];
data.eachItemGraphicEl(function (el, idx) {
el.attr('scale', invScale);
});
},
_getNodeGlobalScale: function (seriesModel) {
var coordSys = seriesModel.coordinateSystem;
if (coordSys.type !== 'view') {
return 1;
}
var nodeScaleRatio = this._nodeScaleRatio;
var groupScale = coordSys.scale;
var groupZoom = (groupScale && groupScale[0]) || 1;
// Scale node when zoom changes
var roamZoom = coordSys.getZoom();
var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
return nodeScale / groupZoom;
},
updateLayout: function (seriesModel) {
adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
this._symbolDraw.updateLayout();
this._lineDraw.updateLayout();
},
remove: function (ecModel, api) {
this._symbolDraw && this._symbolDraw.remove();
this._lineDraw && this._lineDraw.remove();
}
});
});
