"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); }