You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
901 lines
24 KiB
JavaScript
901 lines
24 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.extendNewGraph = extendNewGraph;
|
|
exports["default"] = exports.text = exports.bezierCurve = exports.smoothline = exports.polyline = exports.regPolygon = exports.sector = exports.arc = exports.ring = exports.rect = exports.ellipse = exports.circle = void 0;
|
|
|
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
|
|
var _bezierCurve2 = _interopRequireDefault(require("@jiaminghi/bezier-curve"));
|
|
|
|
var _util = require("../plugin/util");
|
|
|
|
var _canvas = require("../plugin/canvas");
|
|
|
|
var polylineToBezierCurve = _bezierCurve2["default"].polylineToBezierCurve,
|
|
bezierCurveToPolyline = _bezierCurve2["default"].bezierCurveToPolyline;
|
|
var circle = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
r: 0
|
|
},
|
|
validator: function validator(_ref) {
|
|
var shape = _ref.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
|
|
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
|
|
console.error('Circle shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref2, _ref3) {
|
|
var ctx = _ref2.ctx;
|
|
var shape = _ref3.shape;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref4) {
|
|
var shape = _ref4.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
return (0, _util.checkPointIsInCircle)(position, rx, ry, r);
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref5) {
|
|
var shape = _ref5.shape,
|
|
style = _ref5.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref6, _ref7) {
|
|
var movementX = _ref6.movementX,
|
|
movementY = _ref6.movementY;
|
|
var shape = _ref7.shape;
|
|
this.attr('shape', {
|
|
rx: shape.rx + movementX,
|
|
ry: shape.ry + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.circle = circle;
|
|
var ellipse = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
hr: 0,
|
|
vr: 0
|
|
},
|
|
validator: function validator(_ref8) {
|
|
var shape = _ref8.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
hr = shape.hr,
|
|
vr = shape.vr;
|
|
|
|
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof hr !== 'number' || typeof vr !== 'number') {
|
|
console.error('Ellipse shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref9, _ref10) {
|
|
var ctx = _ref9.ctx;
|
|
var shape = _ref10.shape;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
hr = shape.hr,
|
|
vr = shape.vr;
|
|
ctx.ellipse(rx, ry, hr > 0 ? hr : 0.01, vr > 0 ? vr : 0.01, 0, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref11) {
|
|
var shape = _ref11.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
hr = shape.hr,
|
|
vr = shape.vr;
|
|
var a = Math.max(hr, vr);
|
|
var b = Math.min(hr, vr);
|
|
var c = Math.sqrt(a * a - b * b);
|
|
var leftFocusPoint = [rx - c, ry];
|
|
var rightFocusPoint = [rx + c, ry];
|
|
var distance = (0, _util.getTwoPointDistance)(position, leftFocusPoint) + (0, _util.getTwoPointDistance)(position, rightFocusPoint);
|
|
return distance <= 2 * a;
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref12) {
|
|
var shape = _ref12.shape,
|
|
style = _ref12.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref13, _ref14) {
|
|
var movementX = _ref13.movementX,
|
|
movementY = _ref13.movementY;
|
|
var shape = _ref14.shape;
|
|
this.attr('shape', {
|
|
rx: shape.rx + movementX,
|
|
ry: shape.ry + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.ellipse = ellipse;
|
|
var rect = {
|
|
shape: {
|
|
x: 0,
|
|
y: 0,
|
|
w: 0,
|
|
h: 0
|
|
},
|
|
validator: function validator(_ref15) {
|
|
var shape = _ref15.shape;
|
|
var x = shape.x,
|
|
y = shape.y,
|
|
w = shape.w,
|
|
h = shape.h;
|
|
|
|
if (typeof x !== 'number' || typeof y !== 'number' || typeof w !== 'number' || typeof h !== 'number') {
|
|
console.error('Rect shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref16, _ref17) {
|
|
var ctx = _ref16.ctx;
|
|
var shape = _ref17.shape;
|
|
ctx.beginPath();
|
|
var x = shape.x,
|
|
y = shape.y,
|
|
w = shape.w,
|
|
h = shape.h;
|
|
ctx.rect(x, y, w, h);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref18) {
|
|
var shape = _ref18.shape;
|
|
var x = shape.x,
|
|
y = shape.y,
|
|
w = shape.w,
|
|
h = shape.h;
|
|
return (0, _util.checkPointIsInRect)(position, x, y, w, h);
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref19) {
|
|
var shape = _ref19.shape,
|
|
style = _ref19.style;
|
|
var x = shape.x,
|
|
y = shape.y,
|
|
w = shape.w,
|
|
h = shape.h;
|
|
style.graphCenter = [x + w / 2, y + h / 2];
|
|
},
|
|
move: function move(_ref20, _ref21) {
|
|
var movementX = _ref20.movementX,
|
|
movementY = _ref20.movementY;
|
|
var shape = _ref21.shape;
|
|
this.attr('shape', {
|
|
x: shape.x + movementX,
|
|
y: shape.y + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.rect = rect;
|
|
var ring = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
r: 0
|
|
},
|
|
validator: function validator(_ref22) {
|
|
var shape = _ref22.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
|
|
if (typeof rx !== 'number' || typeof ry !== 'number' || typeof r !== 'number') {
|
|
console.error('Ring shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref23, _ref24) {
|
|
var ctx = _ref23.ctx;
|
|
var shape = _ref24.shape;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref25) {
|
|
var shape = _ref25.shape,
|
|
style = _ref25.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r;
|
|
var lineWidth = style.lineWidth;
|
|
var halfLineWidth = lineWidth / 2;
|
|
var minDistance = r - halfLineWidth;
|
|
var maxDistance = r + halfLineWidth;
|
|
var distance = (0, _util.getTwoPointDistance)(position, [rx, ry]);
|
|
return distance >= minDistance && distance <= maxDistance;
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref26) {
|
|
var shape = _ref26.shape,
|
|
style = _ref26.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref27, _ref28) {
|
|
var movementX = _ref27.movementX,
|
|
movementY = _ref27.movementY;
|
|
var shape = _ref28.shape;
|
|
this.attr('shape', {
|
|
rx: shape.rx + movementX,
|
|
ry: shape.ry + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.ring = ring;
|
|
var arc = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
r: 0,
|
|
startAngle: 0,
|
|
endAngle: 0,
|
|
clockWise: true
|
|
},
|
|
validator: function validator(_ref29) {
|
|
var shape = _ref29.shape;
|
|
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
|
|
|
|
if (keys.find(function (key) {
|
|
return typeof shape[key] !== 'number';
|
|
})) {
|
|
console.error('Arc shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref30, _ref31) {
|
|
var ctx = _ref30.ctx;
|
|
var shape = _ref31.shape;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r,
|
|
startAngle = shape.startAngle,
|
|
endAngle = shape.endAngle,
|
|
clockWise = shape.clockWise;
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.001, startAngle, endAngle, !clockWise);
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref32) {
|
|
var shape = _ref32.shape,
|
|
style = _ref32.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r,
|
|
startAngle = shape.startAngle,
|
|
endAngle = shape.endAngle,
|
|
clockWise = shape.clockWise;
|
|
var lineWidth = style.lineWidth;
|
|
var halfLineWidth = lineWidth / 2;
|
|
var insideRadius = r - halfLineWidth;
|
|
var outsideRadius = r + halfLineWidth;
|
|
return !(0, _util.checkPointIsInSector)(position, rx, ry, insideRadius, startAngle, endAngle, clockWise) && (0, _util.checkPointIsInSector)(position, rx, ry, outsideRadius, startAngle, endAngle, clockWise);
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref33) {
|
|
var shape = _ref33.shape,
|
|
style = _ref33.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref34, _ref35) {
|
|
var movementX = _ref34.movementX,
|
|
movementY = _ref34.movementY;
|
|
var shape = _ref35.shape;
|
|
this.attr('shape', {
|
|
rx: shape.rx + movementX,
|
|
ry: shape.ry + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.arc = arc;
|
|
var sector = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
r: 0,
|
|
startAngle: 0,
|
|
endAngle: 0,
|
|
clockWise: true
|
|
},
|
|
validator: function validator(_ref36) {
|
|
var shape = _ref36.shape;
|
|
var keys = ['rx', 'ry', 'r', 'startAngle', 'endAngle'];
|
|
|
|
if (keys.find(function (key) {
|
|
return typeof shape[key] !== 'number';
|
|
})) {
|
|
console.error('Sector shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref37, _ref38) {
|
|
var ctx = _ref37.ctx;
|
|
var shape = _ref38.shape;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r,
|
|
startAngle = shape.startAngle,
|
|
endAngle = shape.endAngle,
|
|
clockWise = shape.clockWise;
|
|
ctx.arc(rx, ry, r > 0 ? r : 0.01, startAngle, endAngle, !clockWise);
|
|
ctx.lineTo(rx, ry);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref39) {
|
|
var shape = _ref39.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r,
|
|
startAngle = shape.startAngle,
|
|
endAngle = shape.endAngle,
|
|
clockWise = shape.clockWise;
|
|
return (0, _util.checkPointIsInSector)(position, rx, ry, r, startAngle, endAngle, clockWise);
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref40) {
|
|
var shape = _ref40.shape,
|
|
style = _ref40.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref41, _ref42) {
|
|
var movementX = _ref41.movementX,
|
|
movementY = _ref41.movementY;
|
|
var shape = _ref42.shape;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
this.attr('shape', {
|
|
rx: rx + movementX,
|
|
ry: ry + movementY
|
|
});
|
|
}
|
|
};
|
|
exports.sector = sector;
|
|
var regPolygon = {
|
|
shape: {
|
|
rx: 0,
|
|
ry: 0,
|
|
r: 0,
|
|
side: 0
|
|
},
|
|
validator: function validator(_ref43) {
|
|
var shape = _ref43.shape;
|
|
var side = shape.side;
|
|
var keys = ['rx', 'ry', 'r', 'side'];
|
|
|
|
if (keys.find(function (key) {
|
|
return typeof shape[key] !== 'number';
|
|
})) {
|
|
console.error('RegPolygon shape configuration is abnormal!');
|
|
return false;
|
|
}
|
|
|
|
if (side < 3) {
|
|
console.error('RegPolygon at least trigon!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref44, _ref45) {
|
|
var ctx = _ref44.ctx;
|
|
var shape = _ref45.shape,
|
|
cache = _ref45.cache;
|
|
ctx.beginPath();
|
|
var rx = shape.rx,
|
|
ry = shape.ry,
|
|
r = shape.r,
|
|
side = shape.side;
|
|
|
|
if (!cache.points || cache.rx !== rx || cache.ry !== ry || cache.r !== r || cache.side !== side) {
|
|
var _points = (0, _util.getRegularPolygonPoints)(rx, ry, r, side);
|
|
|
|
Object.assign(cache, {
|
|
points: _points,
|
|
rx: rx,
|
|
ry: ry,
|
|
r: r,
|
|
side: side
|
|
});
|
|
}
|
|
|
|
var points = cache.points;
|
|
(0, _canvas.drawPolylinePath)(ctx, points);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref46) {
|
|
var cache = _ref46.cache;
|
|
var points = cache.points;
|
|
return (0, _util.checkPointIsInPolygon)(position, points);
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref47) {
|
|
var shape = _ref47.shape,
|
|
style = _ref47.style;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
style.graphCenter = [rx, ry];
|
|
},
|
|
move: function move(_ref48, _ref49) {
|
|
var movementX = _ref48.movementX,
|
|
movementY = _ref48.movementY;
|
|
var shape = _ref49.shape,
|
|
cache = _ref49.cache;
|
|
var rx = shape.rx,
|
|
ry = shape.ry;
|
|
cache.rx += movementX;
|
|
cache.ry += movementY;
|
|
this.attr('shape', {
|
|
rx: rx + movementX,
|
|
ry: ry + movementY
|
|
});
|
|
cache.points = cache.points.map(function (_ref50) {
|
|
var _ref51 = (0, _slicedToArray2["default"])(_ref50, 2),
|
|
x = _ref51[0],
|
|
y = _ref51[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
}
|
|
};
|
|
exports.regPolygon = regPolygon;
|
|
var polyline = {
|
|
shape: {
|
|
points: [],
|
|
close: false
|
|
},
|
|
validator: function validator(_ref52) {
|
|
var shape = _ref52.shape;
|
|
var points = shape.points;
|
|
|
|
if (!(points instanceof Array)) {
|
|
console.error('Polyline points should be an array!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref53, _ref54) {
|
|
var ctx = _ref53.ctx;
|
|
var shape = _ref54.shape,
|
|
lineWidth = _ref54.style.lineWidth;
|
|
ctx.beginPath();
|
|
var points = shape.points,
|
|
close = shape.close;
|
|
if (lineWidth === 1) points = (0, _util.eliminateBlur)(points);
|
|
(0, _canvas.drawPolylinePath)(ctx, points);
|
|
|
|
if (close) {
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref55) {
|
|
var shape = _ref55.shape,
|
|
style = _ref55.style;
|
|
var points = shape.points,
|
|
close = shape.close;
|
|
var lineWidth = style.lineWidth;
|
|
|
|
if (close) {
|
|
return (0, _util.checkPointIsInPolygon)(position, points);
|
|
} else {
|
|
return (0, _util.checkPointIsNearPolyline)(position, points, lineWidth);
|
|
}
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref56) {
|
|
var shape = _ref56.shape,
|
|
style = _ref56.style;
|
|
var points = shape.points;
|
|
style.graphCenter = points[0];
|
|
},
|
|
move: function move(_ref57, _ref58) {
|
|
var movementX = _ref57.movementX,
|
|
movementY = _ref57.movementY;
|
|
var shape = _ref58.shape;
|
|
var points = shape.points;
|
|
var moveAfterPoints = points.map(function (_ref59) {
|
|
var _ref60 = (0, _slicedToArray2["default"])(_ref59, 2),
|
|
x = _ref60[0],
|
|
y = _ref60[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
this.attr('shape', {
|
|
points: moveAfterPoints
|
|
});
|
|
}
|
|
};
|
|
exports.polyline = polyline;
|
|
var smoothline = {
|
|
shape: {
|
|
points: [],
|
|
close: false
|
|
},
|
|
validator: function validator(_ref61) {
|
|
var shape = _ref61.shape;
|
|
var points = shape.points;
|
|
|
|
if (!(points instanceof Array)) {
|
|
console.error('Smoothline points should be an array!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref62, _ref63) {
|
|
var ctx = _ref62.ctx;
|
|
var shape = _ref63.shape,
|
|
cache = _ref63.cache;
|
|
var points = shape.points,
|
|
close = shape.close;
|
|
|
|
if (!cache.points || cache.points.toString() !== points.toString()) {
|
|
var _bezierCurve = polylineToBezierCurve(points, close);
|
|
|
|
var hoverPoints = bezierCurveToPolyline(_bezierCurve);
|
|
Object.assign(cache, {
|
|
points: (0, _util.deepClone)(points, true),
|
|
bezierCurve: _bezierCurve,
|
|
hoverPoints: hoverPoints
|
|
});
|
|
}
|
|
|
|
var bezierCurve = cache.bezierCurve;
|
|
ctx.beginPath();
|
|
(0, _canvas.drawBezierCurvePath)(ctx, bezierCurve.slice(1), bezierCurve[0]);
|
|
|
|
if (close) {
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref64) {
|
|
var cache = _ref64.cache,
|
|
shape = _ref64.shape,
|
|
style = _ref64.style;
|
|
var hoverPoints = cache.hoverPoints;
|
|
var close = shape.close;
|
|
var lineWidth = style.lineWidth;
|
|
|
|
if (close) {
|
|
return (0, _util.checkPointIsInPolygon)(position, hoverPoints);
|
|
} else {
|
|
return (0, _util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
|
|
}
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref65) {
|
|
var shape = _ref65.shape,
|
|
style = _ref65.style;
|
|
var points = shape.points;
|
|
style.graphCenter = points[0];
|
|
},
|
|
move: function move(_ref66, _ref67) {
|
|
var movementX = _ref66.movementX,
|
|
movementY = _ref66.movementY;
|
|
var shape = _ref67.shape,
|
|
cache = _ref67.cache;
|
|
var points = shape.points;
|
|
var moveAfterPoints = points.map(function (_ref68) {
|
|
var _ref69 = (0, _slicedToArray2["default"])(_ref68, 2),
|
|
x = _ref69[0],
|
|
y = _ref69[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
cache.points = moveAfterPoints;
|
|
|
|
var _cache$bezierCurve$ = (0, _slicedToArray2["default"])(cache.bezierCurve[0], 2),
|
|
fx = _cache$bezierCurve$[0],
|
|
fy = _cache$bezierCurve$[1];
|
|
|
|
var curves = cache.bezierCurve.slice(1);
|
|
cache.bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
|
|
return curve.map(function (_ref70) {
|
|
var _ref71 = (0, _slicedToArray2["default"])(_ref70, 2),
|
|
x = _ref71[0],
|
|
y = _ref71[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
})));
|
|
cache.hoverPoints = cache.hoverPoints.map(function (_ref72) {
|
|
var _ref73 = (0, _slicedToArray2["default"])(_ref72, 2),
|
|
x = _ref73[0],
|
|
y = _ref73[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
this.attr('shape', {
|
|
points: moveAfterPoints
|
|
});
|
|
}
|
|
};
|
|
exports.smoothline = smoothline;
|
|
var bezierCurve = {
|
|
shape: {
|
|
points: [],
|
|
close: false
|
|
},
|
|
validator: function validator(_ref74) {
|
|
var shape = _ref74.shape;
|
|
var points = shape.points;
|
|
|
|
if (!(points instanceof Array)) {
|
|
console.error('BezierCurve points should be an array!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref75, _ref76) {
|
|
var ctx = _ref75.ctx;
|
|
var shape = _ref76.shape,
|
|
cache = _ref76.cache;
|
|
var points = shape.points,
|
|
close = shape.close;
|
|
|
|
if (!cache.points || cache.points.toString() !== points.toString()) {
|
|
var hoverPoints = bezierCurveToPolyline(points, 20);
|
|
Object.assign(cache, {
|
|
points: (0, _util.deepClone)(points, true),
|
|
hoverPoints: hoverPoints
|
|
});
|
|
}
|
|
|
|
ctx.beginPath();
|
|
(0, _canvas.drawBezierCurvePath)(ctx, points.slice(1), points[0]);
|
|
|
|
if (close) {
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
} else {
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref77) {
|
|
var cache = _ref77.cache,
|
|
shape = _ref77.shape,
|
|
style = _ref77.style;
|
|
var hoverPoints = cache.hoverPoints;
|
|
var close = shape.close;
|
|
var lineWidth = style.lineWidth;
|
|
|
|
if (close) {
|
|
return (0, _util.checkPointIsInPolygon)(position, hoverPoints);
|
|
} else {
|
|
return (0, _util.checkPointIsNearPolyline)(position, hoverPoints, lineWidth);
|
|
}
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref78) {
|
|
var shape = _ref78.shape,
|
|
style = _ref78.style;
|
|
var points = shape.points;
|
|
style.graphCenter = points[0];
|
|
},
|
|
move: function move(_ref79, _ref80) {
|
|
var movementX = _ref79.movementX,
|
|
movementY = _ref79.movementY;
|
|
var shape = _ref80.shape,
|
|
cache = _ref80.cache;
|
|
var points = shape.points;
|
|
|
|
var _points$ = (0, _slicedToArray2["default"])(points[0], 2),
|
|
fx = _points$[0],
|
|
fy = _points$[1];
|
|
|
|
var curves = points.slice(1);
|
|
var bezierCurve = [[fx + movementX, fy + movementY]].concat((0, _toConsumableArray2["default"])(curves.map(function (curve) {
|
|
return curve.map(function (_ref81) {
|
|
var _ref82 = (0, _slicedToArray2["default"])(_ref81, 2),
|
|
x = _ref82[0],
|
|
y = _ref82[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
})));
|
|
cache.points = bezierCurve;
|
|
cache.hoverPoints = cache.hoverPoints.map(function (_ref83) {
|
|
var _ref84 = (0, _slicedToArray2["default"])(_ref83, 2),
|
|
x = _ref84[0],
|
|
y = _ref84[1];
|
|
|
|
return [x + movementX, y + movementY];
|
|
});
|
|
this.attr('shape', {
|
|
points: bezierCurve
|
|
});
|
|
}
|
|
};
|
|
exports.bezierCurve = bezierCurve;
|
|
var text = {
|
|
shape: {
|
|
content: '',
|
|
position: [],
|
|
maxWidth: undefined,
|
|
rowGap: 0
|
|
},
|
|
validator: function validator(_ref85) {
|
|
var shape = _ref85.shape;
|
|
var content = shape.content,
|
|
position = shape.position,
|
|
rowGap = shape.rowGap;
|
|
|
|
if (typeof content !== 'string') {
|
|
console.error('Text content should be a string!');
|
|
return false;
|
|
}
|
|
|
|
if (!(position instanceof Array)) {
|
|
console.error('Text position should be an array!');
|
|
return false;
|
|
}
|
|
|
|
if (typeof rowGap !== 'number') {
|
|
console.error('Text rowGap should be a number!');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
draw: function draw(_ref86, _ref87) {
|
|
var ctx = _ref86.ctx;
|
|
var shape = _ref87.shape;
|
|
var content = shape.content,
|
|
position = shape.position,
|
|
maxWidth = shape.maxWidth,
|
|
rowGap = shape.rowGap;
|
|
var textBaseline = ctx.textBaseline,
|
|
font = ctx.font;
|
|
var fontSize = parseInt(font.replace(/\D/g, ''));
|
|
|
|
var _position = position,
|
|
_position2 = (0, _slicedToArray2["default"])(_position, 2),
|
|
x = _position2[0],
|
|
y = _position2[1];
|
|
|
|
content = content.split('\n');
|
|
var rowNum = content.length;
|
|
var lineHeight = fontSize + rowGap;
|
|
var allHeight = rowNum * lineHeight - rowGap;
|
|
var offset = 0;
|
|
|
|
if (textBaseline === 'middle') {
|
|
offset = allHeight / 2;
|
|
y += fontSize / 2;
|
|
}
|
|
|
|
if (textBaseline === 'bottom') {
|
|
offset = allHeight;
|
|
y += fontSize;
|
|
}
|
|
|
|
position = new Array(rowNum).fill(0).map(function (foo, i) {
|
|
return [x, y + i * lineHeight - offset];
|
|
});
|
|
ctx.beginPath();
|
|
content.forEach(function (text, i) {
|
|
ctx.fillText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
|
|
ctx.strokeText.apply(ctx, [text].concat((0, _toConsumableArray2["default"])(position[i]), [maxWidth]));
|
|
});
|
|
ctx.closePath();
|
|
},
|
|
hoverCheck: function hoverCheck(position, _ref88) {
|
|
var shape = _ref88.shape,
|
|
style = _ref88.style;
|
|
return false;
|
|
},
|
|
setGraphCenter: function setGraphCenter(e, _ref89) {
|
|
var shape = _ref89.shape,
|
|
style = _ref89.style;
|
|
var position = shape.position;
|
|
style.graphCenter = (0, _toConsumableArray2["default"])(position);
|
|
},
|
|
move: function move(_ref90, _ref91) {
|
|
var movementX = _ref90.movementX,
|
|
movementY = _ref90.movementY;
|
|
var shape = _ref91.shape;
|
|
|
|
var _shape$position = (0, _slicedToArray2["default"])(shape.position, 2),
|
|
x = _shape$position[0],
|
|
y = _shape$position[1];
|
|
|
|
this.attr('shape', {
|
|
position: [x + movementX, y + movementY]
|
|
});
|
|
}
|
|
};
|
|
exports.text = text;
|
|
var graphs = new Map([['circle', circle], ['ellipse', ellipse], ['rect', rect], ['ring', ring], ['arc', arc], ['sector', sector], ['regPolygon', regPolygon], ['polyline', polyline], ['smoothline', smoothline], ['bezierCurve', bezierCurve], ['text', text]]);
|
|
var _default = graphs;
|
|
/**
|
|
* @description Extend new graph
|
|
* @param {String} name Name of Graph
|
|
* @param {Object} config Configuration of Graph
|
|
* @return {Undefined} Void
|
|
*/
|
|
|
|
exports["default"] = _default;
|
|
|
|
function extendNewGraph(name, config) {
|
|
if (!name || !config) {
|
|
console.error('ExtendNewGraph Missing Parameters!');
|
|
return;
|
|
}
|
|
|
|
if (!config.shape) {
|
|
console.error('Required attribute of shape to extendNewGraph!');
|
|
return;
|
|
}
|
|
|
|
if (!config.validator) {
|
|
console.error('Required function of validator to extendNewGraph!');
|
|
return;
|
|
}
|
|
|
|
if (!config.draw) {
|
|
console.error('Required function of draw to extendNewGraph!');
|
|
return;
|
|
}
|
|
|
|
graphs.set(name, config);
|
|
} |