/*
|
* 活动对象基类
|
*/
|
HH.Libra.Activity = Class.create(HH.Libra.Unit, {
|
position: { x: 0, y: 0 },
|
initialize: function ($super, options) {
|
$super(options);
|
var _this = this;
|
_this.position = options.position;
|
_this.contextMenuItems = [];
|
|
},
|
// 获取角点位置（从左上角开始0-7共8个点位）
|
getAnglePosition: function (angleIndex) { },
|
// 创建图形配置项
|
createShapeOptions: function ($super) {
|
var _this = this,
|
shapeOptions = $super();
|
return Object.extend(shapeOptions, {
|
style: {
|
x: _this.position.x,
|
y: _this.position.y,
|
brushType: 'both',
|
color: 'white',
|
|
text: _this.title,
|
textPosition: 'inside',
|
textStrokeWidth: 0,
|
strokeColor: 'white',
|
lineWidth: 0,
|
textColor: 'white'
|
|
},
|
//style: {
|
// x: _this.position.x,
|
// y: _this.position.y,
|
// brushType: 'both',
|
// color: '#ffffff',
|
// strokeColor: '#999999',
|
// lineWidth: 0,
|
// text: _this.title,
|
// textPosition: 'inside',
|
// textStrokeWidth: 1,
|
// textFont: '18px Microsoft Yahei',
|
// textColor: 'red'
|
//},
|
hoverable: false,
|
draggable: true,
|
clickable: true,
|
ondragstart: function (params) {
|
_this.graph.onActivityDragStart(_this);
|
|
},
|
ondragend: function (params) {
|
_this.graph.onActivityDragEnd(_this);
|
|
var position = _this.shape.position;
|
var style = _this.shape.style;
|
var eventx = style.x + position[0];
|
var eventy = style.y + position[1];
|
_this.graph.modShape(_this, eventx, eventy);
|
|
|
},
|
onclick: function (params) {
|
|
var selecthot = params.target.style.text;
|
|
var tagActivities = graph.getAllActivity();
|
var tagArray = [];
|
for (var key in tagActivities) {
|
if (tagActivities[key].object != null) {
|
var hotname = tagActivities[key].object.shape.style.text;
|
if (selecthot == hotname) {
|
var hotcolor = tagActivities[key].object.shape.style.color;
|
if (hotcolor == "#66CDAA") {
|
tagActivities[key].object.shape.style.color = FontFrameTC;
|
//jQuery('#dg').datagrid('unselectAll');
|
ChangeSelectHot(hotname, 0);
|
} else {
|
tagActivities[key].object.shape.style.color = "#66CDAA";
|
ChangeSelectHot(hotname, 1);
|
}
|
tagActivities[key].object.graph.refreshActivity(tagActivities[key].object.shape);
|
} else {
|
tagActivities[key].object.shape.style.color = FontFrameTC;
|
jQuery('#dg').datagrid('unselectAll');
|
tagActivities[key].object.graph.refreshActivity(tagActivities[key].object.shape);
|
}
|
}
|
}
|
|
var position = _this.shape.position;
|
var style = _this.shape.style;
|
var eventx = style.x + position[0];
|
var eventy = style.y + position[1];
|
_this.graph.modShape(_this, eventx, eventy);
|
},
|
ondblclick: function (params) {
|
var textbefore = escape(params.target.style.text);//修改前热点号
|
parent.parent.$("#divLoading").show();
|
parent.parent.$('#openFrameDiv').dialog({
|
title: '热点文本维护',
|
width: 600,
|
height: 250,
|
closed: false,
|
cache: false,
|
modal: true,
|
maximizable: true,
|
resizable: false,
|
onClose: function () {
|
parent.parent.$('#openIframe')[0].src = "none.html";
|
},
|
buttons: [
|
{
|
text: '确定',
|
iconcls: 'l-btn-left2',
|
handler: function () {
|
var SelectItemArray = parent.parent.$('#openIframe')[0].contentWindow.getSelectItemArray();
|
|
if (SelectItemArray[0].CN_S_SIGN_NOTE == "" || SelectItemArray[0].CN_S_SIGN_NOTE == undefined) {
|
parent.parent.ShowMsg('注释必填！');
|
return false;
|
}
|
|
var notestr = SelectItemArray[0].CN_S_SIGN_NOTE;
|
params.target.style.text = notestr;
|
_this.title = SelectItemArray[0].CN_S_SIGN_DESC;
|
|
//此处代码主要用于动态计算文本背景
|
var bytecount = notestr.replace(/[^x00-xFF]/g, '**').length;
|
params.target.style.width = (bytecount * sizeFont) / 2;
|
|
|
//自动刷新修改后的文本
|
_this.graph.refreshActivity(_this.shape);
|
parent.parent.$('#openFrameDiv').dialog('close');
|
|
var textafter = notestr;//修改后热点号
|
|
var has = false;
|
var tagActivities = graph.getAllActivity();
|
for (var key in tagActivities) {
|
if (tagActivities[key].object != null) {
|
var hotname = tagActivities[key].object.shape.style.text;
|
if (hotname == textbefore)
|
has = true;
|
}
|
}
|
//左侧有重复热点情况下，删除其中一个热点时，需要保持右侧列表剩余热点的行“已存在”颜色
|
if (!has)
|
ChangeCheckHot(textbefore, 0);
|
ChangeCheckHot(textafter, 1);
|
}
|
},
|
{
|
text: '取消',
|
handler: function () {
|
parent.parent.$('#openFrameDiv').dialog('close');
|
}
|
}
|
]
|
});
|
|
parent.parent.$('#openIframe')[0].src = "/PictureMgr/HotPicture/TextEdit?name=" + escape(params.target.style.text) + "&remark=" + escape(_this.title) + "&id=" + _this.id;
|
parent.parent.$('#openFrameDiv').dialog('open');
|
}
|
});
|
}
|
});
|
|
/*
|
* 开始活动（圆形）
|
*/
|
HH.Libra.StartActivity = Class.create(HH.Libra.Activity, {
|
shape: null,
|
getAnglePosition: function (angleIndex) {
|
//var position = this.shape.position,
|
// style = this.shape.style;
|
//var r = 2;
|
//var radian = 2 * Math.PI / 360 * ((angleIndex + r) % 8) * 45;
|
//return {
|
// x: Math.round(style.x + position[0] + Math.sin(radian) * r),
|
// y: Math.round(style.y + position[1] + Math.cos(radian) * r)
|
//};
|
var activity = this,
|
position = this.shape.position, //获取图层坐标
|
style = this.shape.style, //获取图层样式
|
x = style.x + position[0],
|
y = style.y + position[1];
|
|
return {
|
x: x,
|
y: y
|
};
|
},
|
createCircleOptions: function (selected) {
|
var _this = this;
|
var shapeOptions = _this.createShapeOptions();
|
shapeOptions.style.r = 4;
|
shapeOptions.style.lineWidth = 0;
|
shapeOptions.style.opacity = 0;//设置透明度
|
if (selected) shapeOptions.style.color = '#FFFFFF';
|
return shapeOptions;
|
},
|
addTo: function (graph) {
|
var _this = this, shapeOptions = _this.createCircleOptions(true);
|
var shape = new graph.type.Shape.Circle(shapeOptions);
|
graph.addShape(shape);
|
_this.shape = shape;
|
},
|
refresh: function (graph) {
|
var _this = this, shapeOptions = _this.createCircleOptions(_this.selected);
|
_this.shape.style = shapeOptions.style;
|
return [_this.shape];
|
}
|
|
});
|
|
/*
|
* 文本
|
*/
|
HH.Libra.Text = Class.create(HH.Libra.Activity, {
|
zlevel: 1,
|
width: 0,
|
height: 0,
|
shape: null,
|
initialize: function ($super, options) {
|
$super(options);
|
var _this = this;
|
_this.position = options.position;
|
_this.contextMenuItems = [];
|
_this.contextMenuItems.push(new HH.Libra.ContextMenuExecuteItem({ text: '删除', url: this }));
|
},
|
getAnglePosition: function (angleIndex) //把角位置
|
{
|
var activity = this,
|
position = this.shape.position, //获取图层坐标
|
style = this.shape.style, //获取图层样式
|
x = style.x + position[0],
|
y = style.y + position[1];
|
|
return {
|
x: x,
|
y: y
|
};
|
},
|
createRectangleOptions: function (selected) //创建文本选择样式
|
{
|
var activity = this,
|
position = activity.position;
|
shapeOptions = activity.createShapeOptions(),
|
style = shapeOptions.style;
|
style.x = position.x - activity.width / 2;
|
style.y = position.y - activity.height / 2;
|
var ttext = JSON.stringify(shapeOptions.style.text).replace(/"/g, "");
|
var bytecount = ttext.replace(/[^x00-xFF]/g, '**').length;
|
var acttitle = JSON.stringify(activity.title);
|
if (acttitle.indexOf("$") > 0) {
|
acttitle = acttitle.replace(/"/g, "");
|
var noteName = acttitle.split('$')[0];//名称
|
var desCription = acttitle.split('$')[1];//备注
|
this.title = desCription;//activity.title.split('$')[0]
|
shapeOptions.style.text = noteName;
|
|
bytecount = noteName.replace(/[^x00-xFF]/g, '**').length;
|
|
|
//style.width =
|
//style.height =
|
}
|
//动态生成背景
|
style.width = (bytecount * sizeFont) / 2;
|
style.height = (sizeFont / 2) * 2;
|
|
if (selected) {
|
shapeOptions.style.brushType = "both";
|
shapeOptions.style.textPosition = "inside";
|
shapeOptions.style.lineWidth = 1;
|
shapeOptions.style.textColor = colorFont;
|
shapeOptions.style.textFont = sizeFont + "px" + " " + nameFont + " ";// '12px Microsoft Yahei';
|
|
//以下是字体边框设置
|
var isHaveFrame = 0;
|
if (FontFrame == "1") {
|
isHaveFrame == 1;
|
} else {
|
FontFrameSelColor = FontFrameTC;
|
FontFrameWidth = 0;
|
}
|
shapeOptions.style.textStrokeWidth = isHaveFrame;
|
shapeOptions.style.strokeColor = FontFrameSelColor;
|
shapeOptions.style.lineWidth = FontFrameWidth;
|
shapeOptions.style.color = FontFrameTC;
|
}
|
return shapeOptions;
|
},
|
addTo: function (graph) //增加绘图类
|
{
|
var activity = this, shapeOptions = activity.createRectangleOptions(true);
|
|
var shape = new graph.type.Shape.Rectangle(shapeOptions);
|
|
graph.addShape(shape);
|
activity.shape = shape;
|
},
|
refresh: function (graph) {
|
var _this = this, shapeOptions = _this.createRectangleOptions(_this.selected);
|
_this.shape.style = shapeOptions.style;
|
return [_this.shape];
|
}
|
});
|
|
|
|
|
/*
|
* 人工活动（圆角矩形）
|
*/
|
HH.Libra.ManualActivity = Class.create(HH.Libra.Activity, {
|
|
width: 80,
|
height: 25,
|
shape: null,
|
|
getAnglePosition: function (angleIndex) {
|
var activity = this,
|
position = this.shape.position,
|
style = this.shape.style,
|
x = style.x + position[0],
|
y = style.y + position[1],
|
halfWidth = activity.width / 2,
|
halfHeight = activity.height / 2;
|
var offsets = [[0, 0], [1, 0], [2, 0], [2, 1], [2, 2], [1, 2], [0, 2], [0, 1]];
|
return {
|
x: x + offsets[angleIndex][0] * halfWidth,
|
y: y + offsets[angleIndex][1] * halfHeight
|
};
|
},
|
|
createRectangleOptions: function (selected) {
|
var activity = this,
|
position = activity.position;
|
shapeOptions = activity.createShapeOptions(),
|
style = shapeOptions.style;
|
style.x = position.x - activity.width / 2;
|
style.y = position.y - activity.height / 2;
|
style.width = activity.width;
|
style.height = activity.height;
|
style.radius = [3];
|
shapeOptions.style.textColor = "#FF4500";
|
shapeOptions.style.color = '#FFFFFF';
|
if (selected) {
|
alert(1);
|
shapeOptions.style.textColor = '#9ACD32';
|
}
|
return shapeOptions;
|
},
|
|
addTo: function (graph) {
|
var activity = this, shapeOptions = activity.createRectangleOptions(false);
|
var shape = new graph.type.Shape.Rectangle(shapeOptions);
|
graph.addShape(shape);
|
activity.shape = shape;
|
},
|
|
refresh: function (graph) {
|
var _this = this, shapeOptions = _this.createRectangleOptions(_this.selected);
|
_this.shape.style = shapeOptions.style;
|
return [_this.shape];
|
}
|
});
|
|
|
/*
|
* 连接线基类
|
*/
|
HH.Libra.Transition = Class.create(HH.Libra.Unit, {
|
from: null,
|
// 起始活动角度（共八个角度）
|
fromAngle: null,
|
// 运行时，用于动态计算
|
fromAngleRun: null,
|
|
to: null,
|
// 结束活动角度（共八个角度）
|
toAngle: null,
|
toAngleRun: null,
|
|
polyline: null,
|
arrow: null,
|
circle: null,
|
|
initialize: function ($super, options) {
|
$super(options);
|
var transition = this;
|
transition.id = options.id;
|
transition.from = options.from;
|
transition.fromAngle = options.fromAngle;
|
transition.to = options.to;
|
transition.toAngle = options.toAngle;
|
transition.title = options.title;
|
},
|
|
// 创建箭头配置项
|
createPolylineOptions: function (graph, selected) {
|
|
var oddAngleDelta = 15;
|
// 找出目标活动中离参照点最近的角点
|
function findShortestAngle(referencePosition, targetActivity) {
|
var minAngleIndex = -1, minDistance = 0, minPosition = null;
|
for (var angleIndex = 0; angleIndex < 8; angleIndex++) {
|
var targetPosition = targetActivity.getAnglePosition(angleIndex);
|
distance = Math.sqrt(Math.pow(referencePosition.x - targetPosition.x, 2) + Math.pow(referencePosition.y - targetPosition.y, 2));
|
if (minAngleIndex === -1 || distance < minDistance || (Math.abs(distance - minDistance) < oddAngleDelta && (angleIndex % 2 === 1))) {
|
// 差距不大时，基数角点优先
|
minAngleIndex = angleIndex;
|
minDistance = distance;
|
minPosition = targetPosition;
|
}
|
}
|
return { angleIndex: minAngleIndex, distance: minDistance, position: minPosition };
|
}
|
|
// 找出两个活动中距离最近的两个角点
|
function findShortestAngle2(activity1, activity2) {
|
var minAngleIndex = -1, minDistance = 0, minPosition = null, angle2 = null;
|
for (var angleIndex1 = 0; angleIndex1 < 8; angleIndex1++) {
|
var activity1Position = activity1.getAnglePosition(angleIndex1);
|
var shortest = findShortestAngle(activity1Position, activity2);
|
if (minAngleIndex === -1 || shortest.distance < minDistance || (Math.abs(shortest.distance - minDistance) < oddAngleDelta && (angleIndex1 % 2 === 1))) {
|
minAngleIndex = angleIndex1;
|
minDistance = shortest.distance;
|
minPosition = activity1Position;
|
angle2 = shortest;
|
}
|
}
|
return [{ angleIndex: minAngleIndex, position: minPosition, distance: minDistance }, angle2];
|
}
|
|
var transition = this,
|
fromActivity = graph.getActivity(transition.from),
|
toActivity = graph.getActivity(transition.to),
|
fromPosition, toPosition;
|
if (transition.fromAngle < 0 || transition.fromAngle > 7) {
|
if (transition.toAngle < 0 || transition.toAngle > 7) {
|
var results = findShortestAngle2(fromActivity, toActivity);
|
fromPosition = results[0].position;
|
transition.fromAngleRun = results[0].angleIndex;
|
toPosition = results[1].position;
|
transition.toAngleRun = results[1].angleIndex;
|
} else {
|
toPosition = toActivity.getAnglePosition(transition.toAngle);
|
var result = findShortestAngle(toPosition, fromActivity);
|
fromPosition = result.position;
|
transition.fromAngleRun = result.angleIndex;
|
}
|
} else {
|
if (transition.toAngle < 0 || transition.toAngle > 7) {
|
fromPosition = fromActivity.getAnglePosition(transition.fromAngle);
|
var result = findShortestAngle(fromPosition, toActivity);
|
toPosition = result.position;
|
transition.toAngleRun = result.angleIndex;
|
} else {
|
fromPosition = fromActivity.getAnglePosition(transition.fromAngle),
|
toPosition = toActivity.getAnglePosition(transition.toAngle);
|
}
|
}
|
|
return Object.extend(this.createShapeOptions(), {
|
style: {
|
pointList: [[fromPosition.x, fromPosition.y], [toPosition.x, toPosition.y]],
|
strokeColor: selected ? '#9ACD32' : '#FFA500',
|
lineWidth: 3,
|
text: '',
|
color: '#228B22'
|
}
|
});
|
},
|
|
// 创建箭头配置项（三角形）
|
createArrowOptions: function (graph, selected) {
|
var transition = this,
|
fromPosition = graph.getActivity(transition.from).getAnglePosition(((transition.fromAngle < 0 || transition.fromAngle > 7) ? transition.fromAngleRun : transition.fromAngle)),
|
toPosition = graph.getActivity(transition.to).getAnglePosition(((transition.toAngle < 0 || transition.toAngle > 7) ? transition.toAngleRun : transition.toAngle));
|
|
// 箭头长度20，单边角度10度
|
// 线段角度（从第四象限开始，顺时针旋转）
|
var lineAngle = Math.atan2(fromPosition.x - toPosition.x, fromPosition.y - toPosition.y) / Math.PI * 180;
|
var end1 = {
|
x: toPosition.x + Math.sin(2 * Math.PI / 360 * (lineAngle - 10)) * 20,
|
y: toPosition.y + Math.cos(2 * Math.PI / 360 * (lineAngle - 10)) * 20,
|
};
|
var end2 = {
|
x: toPosition.x + Math.sin(2 * Math.PI / 360 * (lineAngle + 10)) * 20,
|
y: toPosition.y + Math.cos(2 * Math.PI / 360 * (lineAngle + 10)) * 20,
|
};
|
|
return Object.extend(this.createShapeOptions(), {
|
style: {
|
pointList: [[toPosition.x, toPosition.y], [end1.x, end1.y], [end2.x, end2.y]],
|
color: selected ? '#f63' : '#555',
|
lineWidth: 0,
|
text: ''
|
}
|
});
|
},
|
|
createCircleOptions: function (graph, selected) {
|
var transition = this,
|
fromPosition = graph.getActivity(transition.from).getAnglePosition(((transition.fromAngle < 0 || transition.fromAngle > 7) ? transition.fromAngleRun : transition.fromAngle));
|
return Object.extend(this.createShapeOptions(), {
|
style: {
|
color: selected ? '#f63' : '#555',
|
lineWidth: 0,
|
x: fromPosition.x,
|
y: fromPosition.y,
|
r: 4
|
}
|
});
|
},
|
|
addTo: function (graph) {
|
var transition = this;
|
|
// 线段
|
var polylineOptions = transition.createPolylineOptions(graph);
|
var polyline = new graph.type.Shape.Polyline(polylineOptions);
|
graph.addShape(polyline);
|
transition.polyline = polyline;
|
|
// 箭头
|
var arrowOptions = transition.createArrowOptions(graph);
|
var arrow = new graph.type.Shape.Polygon(arrowOptions);
|
graph.addShape(arrow);
|
transition.arrow = arrow;
|
|
// 起始圆点
|
var circleOptions = transition.createCircleOptions(graph);
|
var circle = new graph.type.Shape.Circle(circleOptions);
|
graph.addShape(circle);
|
transition.circle = circle;
|
},
|
|
refresh: function (graph) {
|
var transition = this;
|
|
var polylineOptions = transition.createPolylineOptions(graph, transition.selected);
|
var polyline = transition.polyline;
|
polyline.style = polylineOptions.style;
|
|
//
|
var arrowOptions = transition.createArrowOptions(graph, transition.selected);
|
var arrow = transition.arrow;
|
arrow.style = arrowOptions.style;
|
|
//
|
var circleOptions = transition.createCircleOptions(graph, transition.selected);
|
var circle = transition.circle;
|
circle.style = circleOptions.style;
|
|
return [polyline, arrow, circle];
|
}
|
});
|
