325 lines
9.6 KiB
JavaScript
325 lines
9.6 KiB
JavaScript
/**
|
||
* @file 点编辑模式
|
||
* @author mengke01(kekee000@gmail.com)
|
||
*/
|
||
|
||
|
||
define(
|
||
function (require) {
|
||
|
||
var lang = require('common/lang');
|
||
|
||
// 移动步频
|
||
var stepMap = {
|
||
left: [-1, 0],
|
||
right: [1, 0],
|
||
up: [0, -1],
|
||
down: [0, 1]
|
||
};
|
||
|
||
|
||
function onContextMenu(e) {
|
||
|
||
if (!this.curPoint) {
|
||
return;
|
||
}
|
||
|
||
if (e.returnValue === false) {
|
||
return;
|
||
}
|
||
|
||
this.contextMenu.hide();
|
||
|
||
var command = e.command;
|
||
var shape = this.curShape;
|
||
var points = shape.points;
|
||
var pointId = +this.curPoint.pointId;
|
||
|
||
if (command === 'add') {
|
||
var cur = points[pointId];
|
||
var next = points[pointId === points.length - 1 ? 0 : pointId + 1];
|
||
var p = {
|
||
x: (cur.x + next.x) / 2,
|
||
y: (cur.y + next.y) / 2,
|
||
onCurve: true
|
||
};
|
||
|
||
points.splice(pointId + 1, 0, p);
|
||
}
|
||
else if (command === 'remove') {
|
||
points.splice(pointId, 1);
|
||
}
|
||
else if (command === 'onCurve') {
|
||
points[pointId].onCurve = true;
|
||
}
|
||
else if (command === 'offCurve') {
|
||
delete points[pointId].onCurve;
|
||
}
|
||
else if (command === 'asStart') {
|
||
shape.points = points.slice(pointId).concat(points.slice(0, pointId));
|
||
}
|
||
else if (this.supportCommand(command)) {
|
||
this.execCommand(command);
|
||
return;
|
||
}
|
||
|
||
refreshControlPoints.call(this, shape);
|
||
|
||
delete this.curPoint;
|
||
this.fontLayer.refresh();
|
||
this.fire('change');
|
||
}
|
||
|
||
|
||
function refreshControlPoints(shape) {
|
||
var controls = [];
|
||
var last = shape.points.length - 1;
|
||
var clonedShape = lang.clone(shape);
|
||
|
||
var style = this.options.coverLayer;
|
||
|
||
clonedShape.id = 'cover-' + shape.id;
|
||
clonedShape.selectable = false;
|
||
clonedShape.style = {
|
||
strokeColor: style.outlineColor
|
||
};
|
||
clonedShape.points.forEach(function (p, index) {
|
||
var cpoint = {
|
||
type: p.onCurve ? 'point' : 'cpoint',
|
||
x: p.x,
|
||
y: p.y,
|
||
point: p,
|
||
pointId: index,
|
||
style: {
|
||
fill: true,
|
||
stroke: true,
|
||
strokeColor: style.strokeColor,
|
||
fillColor: style.fillColor
|
||
}
|
||
};
|
||
|
||
if (index === 0) {
|
||
cpoint.style.strokeColor = 'blue';
|
||
cpoint.style.fillColor = 'blue';
|
||
cpoint.style.strokeWidth = 2;
|
||
}
|
||
else if (index === last) {
|
||
cpoint.style.strokeColor = 'red';
|
||
cpoint.style.fillColor = 'red';
|
||
cpoint.style.strokeWidth = 2;
|
||
}
|
||
|
||
controls.push(cpoint);
|
||
});
|
||
|
||
var coverLayer = this.coverLayer;
|
||
|
||
coverLayer.clearShapes();
|
||
|
||
// 添加轮廓
|
||
coverLayer.addShape(clonedShape);
|
||
// 添加控制点
|
||
controls.forEach(function (shape) {
|
||
coverLayer.addShape(shape);
|
||
});
|
||
|
||
this.curShape = shape;
|
||
coverLayer.refresh();
|
||
}
|
||
|
||
|
||
var mode = {
|
||
|
||
|
||
down: function (e) {
|
||
|
||
// 恢复原来样式
|
||
if (this.curPoint) {
|
||
if (this.curPoint._style) {
|
||
this.curPoint.style = lang.clone(this.curPoint._style);
|
||
}
|
||
}
|
||
|
||
delete this.curPoint;
|
||
|
||
var result = this.coverLayer.getShapeIn(e);
|
||
|
||
if (result) {
|
||
this.curPoint = result[0];
|
||
this.curPoint._style = lang.clone(this.curPoint.style);
|
||
this.curPoint.style.fillColor = this.options.coverLayer.outlineColor;
|
||
|
||
// 设置吸附选项
|
||
if (this.sorption.isEnable()) {
|
||
|
||
if (this.sorption.enableShape) {
|
||
|
||
var xAxisArray = [];
|
||
var yAxisArray = [];
|
||
|
||
// 过滤需要吸附的对象
|
||
this.curShape.points.forEach(function (p) {
|
||
xAxisArray.push(p.x);
|
||
yAxisArray.push(p.y);
|
||
});
|
||
|
||
// 添加参考线
|
||
var referenceLines = this.referenceLineLayer.shapes;
|
||
referenceLines.forEach(function (shape) {
|
||
if (undefined !== shape.p0.x) {
|
||
xAxisArray.push(shape.p0.x);
|
||
}
|
||
if (undefined !== shape.p0.y) {
|
||
yAxisArray.push(shape.p0.y);
|
||
}
|
||
});
|
||
|
||
this.sorption.clear();
|
||
xAxisArray.length && this.sorption.addXAxis(xAxisArray);
|
||
yAxisArray.length && this.sorption.addYAxis(yAxisArray);
|
||
}
|
||
}
|
||
|
||
this.coverLayer.refresh();
|
||
}
|
||
},
|
||
|
||
|
||
drag: function (e) {
|
||
|
||
var camera = this.render.camera;
|
||
if (this.curPoint) {
|
||
var current = this.curPoint;
|
||
var reserved = this.curShape.points[current.pointId];
|
||
|
||
if (camera.event.altKey) {
|
||
current.x = reserved.x;
|
||
}
|
||
else {
|
||
current.x = reserved.x + camera.event.deltaX;
|
||
}
|
||
|
||
if (camera.event.shiftKey) {
|
||
current.y = reserved.y;
|
||
}
|
||
else {
|
||
current.y = reserved.y + camera.event.deltaY;
|
||
}
|
||
|
||
if (this.sorption.isEnable()) {
|
||
var result;
|
||
|
||
if (result = this.sorption.detectX(current.x)) {
|
||
current.x = result.axis;
|
||
}
|
||
|
||
if (result = this.sorption.detectY(current.y)) {
|
||
current.y = result.axis;
|
||
}
|
||
}
|
||
|
||
current.point.x = current.x;
|
||
current.point.y = current.y;
|
||
|
||
this.coverLayer.refresh();
|
||
}
|
||
},
|
||
|
||
dragend: function () {
|
||
if (this.curPoint) {
|
||
var reserved = this.curShape.points[this.curPoint.pointId];
|
||
reserved.x = this.curPoint.x;
|
||
reserved.y = this.curPoint.y;
|
||
|
||
if (this.sorption.isEnable()) {
|
||
this.sorption.clear();
|
||
}
|
||
|
||
this.fontLayer.refresh();
|
||
}
|
||
this.fire('change');
|
||
},
|
||
|
||
|
||
move: function (e) {
|
||
var shape = this.coverLayer.getShapeIn(e);
|
||
if (shape) {
|
||
this.render.setCursor('pointer');
|
||
}
|
||
else {
|
||
this.render.setCursor('default');
|
||
}
|
||
},
|
||
|
||
|
||
rightdown: function (e) {
|
||
if (this.curPoint) {
|
||
this.contextMenu.onClick = lang.bind(onContextMenu, this);
|
||
this.contextMenu.show(e, require('../menu/commandList').point);
|
||
}
|
||
},
|
||
|
||
|
||
keyup: function (e) {
|
||
|
||
// esc键，重置model
|
||
if (e.key === 'delete' && this.curPoint) {
|
||
onContextMenu.call(this, {
|
||
command: 'remove'
|
||
});
|
||
}
|
||
// 移动
|
||
else if (stepMap[e.key] && this.curPoint) {
|
||
this.fire('change');
|
||
}
|
||
else if (e.key === 'esc') {
|
||
this.setMode();
|
||
}
|
||
},
|
||
|
||
|
||
keydown: function (e) {
|
||
// 移动
|
||
if (stepMap[e.key] && this.curPoint) {
|
||
var step = stepMap[e.key];
|
||
var current = this.curPoint;
|
||
|
||
if (step[0]) {
|
||
current.x += step[0];
|
||
}
|
||
|
||
if (step[1]) {
|
||
current.y += step[1];
|
||
}
|
||
|
||
var reserved = this.curShape.points[current.pointId];
|
||
reserved.x = current.point.x = current.x;
|
||
reserved.y = current.point.y = current.y;
|
||
|
||
this.coverLayer.refresh();
|
||
this.fontLayer.refresh();
|
||
}
|
||
},
|
||
|
||
|
||
begin: function (shape) {
|
||
var me = this;
|
||
refreshControlPoints.call(me, shape);
|
||
},
|
||
|
||
|
||
end: function () {
|
||
|
||
delete this.curPoint;
|
||
delete this.curShape;
|
||
|
||
this.coverLayer.clearShapes();
|
||
this.coverLayer.refresh();
|
||
this.render.setCursor('default');
|
||
}
|
||
};
|
||
|
||
return mode;
|
||
}
|
||
);
|