chore: version inicial del codigo fuente del LMS Estafeta
This commit is contained in:
@@ -0,0 +1,369 @@
|
||||
/* *
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import ControlPoint from '../ControlPoint.js';
|
||||
import MockPoint from '../MockPoint.js';
|
||||
import Tooltip from '../../../Core/Tooltip.js';
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var isObject = U.isObject, isString = U.isString, merge = U.merge, splat = U.splat;
|
||||
/**
|
||||
* An object which denots a controllable's anchor positions - relative and
|
||||
* absolute.
|
||||
*
|
||||
* @private
|
||||
* @interface Highcharts.AnnotationAnchorObject
|
||||
*/ /**
|
||||
* Relative to the plot area position
|
||||
* @name Highcharts.AnnotationAnchorObject#relativePosition
|
||||
* @type {Highcharts.BBoxObject}
|
||||
*/ /**
|
||||
* Absolute position
|
||||
* @name Highcharts.AnnotationAnchorObject#absolutePosition
|
||||
* @type {Highcharts.BBoxObject}
|
||||
*/
|
||||
/**
|
||||
* @interface Highcharts.AnnotationControllable
|
||||
*/ /**
|
||||
* @name Highcharts.AnnotationControllable#annotation
|
||||
* @type {Highcharts.Annotation}
|
||||
*/ /**
|
||||
* @name Highcharts.AnnotationControllable#chart
|
||||
* @type {Highcharts.Chart}
|
||||
*/ /**
|
||||
* @name Highcharts.AnnotationControllable#collection
|
||||
* @type {string}
|
||||
*/ /**
|
||||
* @private
|
||||
* @name Highcharts.AnnotationControllable#controlPoints
|
||||
* @type {Array<Highcharts.AnnotationControlPoint>}
|
||||
*/ /**
|
||||
* @name Highcharts.AnnotationControllable#points
|
||||
* @type {Array<Highcharts.Point>}
|
||||
*/
|
||||
/* eslint-disable no-invalid-this, valid-jsdoc */
|
||||
/**
|
||||
* It provides methods for handling points, control points
|
||||
* and points transformations.
|
||||
*
|
||||
* @private
|
||||
* @mixin
|
||||
* @name Highcharts.AnnotationControllableMixin
|
||||
*/
|
||||
var controllableMixin = {
|
||||
/**
|
||||
* Init the controllable
|
||||
*/
|
||||
init: function (annotation, options, index) {
|
||||
this.annotation = annotation;
|
||||
this.chart = annotation.chart;
|
||||
this.options = options;
|
||||
this.points = [];
|
||||
this.controlPoints = [];
|
||||
this.index = index;
|
||||
this.linkPoints();
|
||||
this.addControlPoints();
|
||||
},
|
||||
/**
|
||||
* Redirect attr usage on the controllable graphic element.
|
||||
*/
|
||||
attr: function () {
|
||||
this.graphic.attr.apply(this.graphic, arguments);
|
||||
},
|
||||
/**
|
||||
* Get the controllable's points options.
|
||||
*
|
||||
* @return {Array<Highcharts.PointOptionsObject>}
|
||||
* An array of points' options.
|
||||
*/
|
||||
getPointsOptions: function () {
|
||||
var options = this.options;
|
||||
return (options.points || (options.point && splat(options.point)));
|
||||
},
|
||||
/**
|
||||
* Utility function for mapping item's options
|
||||
* to element's attribute
|
||||
*
|
||||
* @param {Highcharts.AnnotationsLabelsOptions|Highcharts.AnnotationsShapesOptions} options
|
||||
*
|
||||
* @return {Highcharts.SVGAttributes}
|
||||
* Mapped options.
|
||||
*/
|
||||
attrsFromOptions: function (options) {
|
||||
var map = this.constructor.attrsMap, attrs = {}, key, mappedKey, styledMode = this.chart.styledMode;
|
||||
for (key in options) { // eslint-disable-line guard-for-in
|
||||
mappedKey = map[key];
|
||||
if (mappedKey &&
|
||||
(!styledMode ||
|
||||
['fill', 'stroke', 'stroke-width']
|
||||
.indexOf(mappedKey) === -1)) {
|
||||
attrs[mappedKey] = options[key];
|
||||
}
|
||||
}
|
||||
return attrs;
|
||||
},
|
||||
/**
|
||||
* Returns object which denotes anchor position - relative and absolute.
|
||||
*
|
||||
* @param {Highcharts.AnnotationPointType} point
|
||||
* A point like object.
|
||||
*
|
||||
* @return {Highcharts.AnnotationAnchorObject} a controllable anchor
|
||||
*/
|
||||
anchor: function (point) {
|
||||
var plotBox = point.series.getPlotBox(), box = point.mock ?
|
||||
point.toAnchor() :
|
||||
Tooltip.prototype.getAnchor.call({
|
||||
chart: point.series.chart
|
||||
}, point), anchor = {
|
||||
x: box[0] + (this.options.x || 0),
|
||||
y: box[1] + (this.options.y || 0),
|
||||
height: box[2] || 0,
|
||||
width: box[3] || 0
|
||||
};
|
||||
return {
|
||||
relativePosition: anchor,
|
||||
absolutePosition: merge(anchor, {
|
||||
x: anchor.x + plotBox.translateX,
|
||||
y: anchor.y + plotBox.translateY
|
||||
})
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Map point's options to a point-like object.
|
||||
*
|
||||
* @param {string|Function|Highcharts.AnnotationMockPointOptionsObject|Highcharts.AnnotationPointType} pointOptions
|
||||
* Point's options.
|
||||
*
|
||||
* @param {Highcharts.AnnotationPointType} point
|
||||
* A point-like instance.
|
||||
*
|
||||
* @return {Highcharts.AnnotationPointType|null}
|
||||
* if the point is found/set returns this point, otherwise null
|
||||
*/
|
||||
point: function (pointOptions, point) {
|
||||
if (pointOptions && pointOptions.series) {
|
||||
return pointOptions;
|
||||
}
|
||||
if (!point || point.series === null) {
|
||||
if (isObject(pointOptions)) {
|
||||
point = new MockPoint(this.chart, this, pointOptions);
|
||||
}
|
||||
else if (isString(pointOptions)) {
|
||||
point = this.chart.get(pointOptions) || null;
|
||||
}
|
||||
else if (typeof pointOptions === 'function') {
|
||||
var pointConfig = pointOptions.call(point, this);
|
||||
point = pointConfig.series ?
|
||||
pointConfig :
|
||||
new MockPoint(this.chart, this, pointOptions);
|
||||
}
|
||||
}
|
||||
return point;
|
||||
},
|
||||
/**
|
||||
* Find point-like objects based on points options.
|
||||
*
|
||||
* @return {Array<Annotation.PointLike>} an array of point-like objects
|
||||
*/
|
||||
linkPoints: function () {
|
||||
var pointsOptions = this.getPointsOptions(), points = this.points, len = (pointsOptions && pointsOptions.length) || 0, i, point;
|
||||
for (i = 0; i < len; i++) {
|
||||
point = this.point(pointsOptions[i], points[i]);
|
||||
if (!point) {
|
||||
points.length = 0;
|
||||
return;
|
||||
}
|
||||
if (point.mock) {
|
||||
point.refresh();
|
||||
}
|
||||
points[i] = point;
|
||||
}
|
||||
return points;
|
||||
},
|
||||
/**
|
||||
* Add control points to a controllable.
|
||||
*/
|
||||
addControlPoints: function () {
|
||||
var controlPointsOptions = this.options.controlPoints;
|
||||
(controlPointsOptions || []).forEach(function (controlPointOptions, i) {
|
||||
var options = merge(this.options.controlPointOptions, controlPointOptions);
|
||||
if (!options.index) {
|
||||
options.index = i;
|
||||
}
|
||||
controlPointsOptions[i] = options;
|
||||
this.controlPoints.push(new ControlPoint(this.chart, this, options));
|
||||
}, this);
|
||||
},
|
||||
/**
|
||||
* Check if a controllable should be rendered/redrawn.
|
||||
*
|
||||
* @return {boolean}
|
||||
* Whether a controllable should be drawn.
|
||||
*/
|
||||
shouldBeDrawn: function () {
|
||||
return Boolean(this.points.length);
|
||||
},
|
||||
/**
|
||||
* Render a controllable.
|
||||
*/
|
||||
render: function (_parentGroup) {
|
||||
this.controlPoints.forEach(function (controlPoint) {
|
||||
controlPoint.render();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Redraw a controllable.
|
||||
*
|
||||
* @param {boolean} [animation]
|
||||
*/
|
||||
redraw: function (animation) {
|
||||
this.controlPoints.forEach(function (controlPoint) {
|
||||
controlPoint.redraw(animation);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Transform a controllable with a specific transformation.
|
||||
*
|
||||
* @param {string} transformation a transformation name
|
||||
* @param {number|null} cx origin x transformation
|
||||
* @param {number|null} cy origin y transformation
|
||||
* @param {number} p1 param for the transformation
|
||||
* @param {number} [p2] param for the transformation
|
||||
*/
|
||||
transform: function (transformation, cx, cy, p1, p2) {
|
||||
if (this.chart.inverted) {
|
||||
var temp = cx;
|
||||
cx = cy;
|
||||
cy = temp;
|
||||
}
|
||||
this.points.forEach(function (point, i) {
|
||||
this.transformPoint(transformation, cx, cy, p1, p2, i);
|
||||
}, this);
|
||||
},
|
||||
/**
|
||||
* Transform a point with a specific transformation
|
||||
* If a transformed point is a real point it is replaced with
|
||||
* the mock point.
|
||||
*
|
||||
* @param {string} transformation a transformation name
|
||||
* @param {number|null} cx origin x transformation
|
||||
* @param {number|null} cy origin y transformation
|
||||
* @param {number} p1 param for the transformation
|
||||
* @param {number|undefined} p2 param for the transformation
|
||||
* @param {number} i index of the point
|
||||
*/
|
||||
transformPoint: function (transformation, cx, cy, p1, p2, i) {
|
||||
var point = this.points[i];
|
||||
if (!point.mock) {
|
||||
point = this.points[i] = MockPoint.fromPoint(point);
|
||||
}
|
||||
point[transformation](cx, cy, p1, p2);
|
||||
},
|
||||
/**
|
||||
* Translate a controllable.
|
||||
*
|
||||
* @param {number} dx translation for x coordinate
|
||||
* @param {number} dy translation for y coordinate
|
||||
**/
|
||||
translate: function (dx, dy) {
|
||||
this.transform('translate', null, null, dx, dy);
|
||||
},
|
||||
/**
|
||||
* Translate a specific point within a controllable.
|
||||
*
|
||||
* @param {number} dx translation for x coordinate
|
||||
* @param {number} dy translation for y coordinate
|
||||
* @param {number} i index of the point
|
||||
**/
|
||||
translatePoint: function (dx, dy, i) {
|
||||
this.transformPoint('translate', null, null, dx, dy, i);
|
||||
},
|
||||
/**
|
||||
* Translate shape within controllable item.
|
||||
* Replaces `controllable.translate` method.
|
||||
*
|
||||
* @param {number} dx translation for x coordinate
|
||||
* @param {number} dy translation for y coordinate
|
||||
*/
|
||||
translateShape: function (dx, dy) {
|
||||
var chart = this.annotation.chart,
|
||||
// Annotation.options
|
||||
shapeOptions = this.annotation.userOptions,
|
||||
// Chart.options.annotations
|
||||
annotationIndex = chart.annotations.indexOf(this.annotation), chartOptions = chart.options.annotations[annotationIndex];
|
||||
this.translatePoint(dx, dy, 0);
|
||||
// Options stored in:
|
||||
// - chart (for exporting)
|
||||
// - current config (for redraws)
|
||||
chartOptions[this.collection][this.index].point = this.options.point;
|
||||
shapeOptions[this.collection][this.index].point = this.options.point;
|
||||
},
|
||||
/**
|
||||
* Rotate a controllable.
|
||||
*
|
||||
* @param {number} cx origin x rotation
|
||||
* @param {number} cy origin y rotation
|
||||
* @param {number} radians
|
||||
**/
|
||||
rotate: function (cx, cy, radians) {
|
||||
this.transform('rotate', cx, cy, radians);
|
||||
},
|
||||
/**
|
||||
* Scale a controllable.
|
||||
*
|
||||
* @param {number} cx origin x rotation
|
||||
* @param {number} cy origin y rotation
|
||||
* @param {number} sx scale factor x
|
||||
* @param {number} sy scale factor y
|
||||
*/
|
||||
scale: function (cx, cy, sx, sy) {
|
||||
this.transform('scale', cx, cy, sx, sy);
|
||||
},
|
||||
/**
|
||||
* Set control points' visibility.
|
||||
*
|
||||
* @param {boolean} visible
|
||||
*/
|
||||
setControlPointsVisibility: function (visible) {
|
||||
this.controlPoints.forEach(function (controlPoint) {
|
||||
controlPoint.setVisibility(visible);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Destroy a controllable.
|
||||
*/
|
||||
destroy: function () {
|
||||
if (this.graphic) {
|
||||
this.graphic = this.graphic.destroy();
|
||||
}
|
||||
if (this.tracker) {
|
||||
this.tracker = this.tracker.destroy();
|
||||
}
|
||||
this.controlPoints.forEach(function (controlPoint) {
|
||||
controlPoint.destroy();
|
||||
});
|
||||
this.chart = null;
|
||||
this.points = null;
|
||||
this.controlPoints = null;
|
||||
this.options = null;
|
||||
if (this.annotation) {
|
||||
this.annotation = null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Update a controllable.
|
||||
*
|
||||
* @param {Object} newOptions
|
||||
*/
|
||||
update: function (newOptions) {
|
||||
var annotation = this.annotation, options = merge(true, this.options, newOptions), parentGroup = this.graphic.parentGroup;
|
||||
this.destroy();
|
||||
this.constructor(annotation, options);
|
||||
this.render(parentGroup);
|
||||
this.redraw();
|
||||
}
|
||||
};
|
||||
export default controllableMixin;
|
||||
@@ -0,0 +1,212 @@
|
||||
/* *
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
import H from '../../../Core/Globals.js';
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, fireEvent = U.fireEvent, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent;
|
||||
/* eslint-disable valid-jsdoc */
|
||||
/**
|
||||
* It provides methods for:
|
||||
* - adding and handling DOM events and a drag event,
|
||||
* - mapping a mouse move event to the distance between two following events.
|
||||
* The units of the distance are specific to a transformation,
|
||||
* e.g. for rotation they are radians, for scaling they are scale factors.
|
||||
*
|
||||
* @private
|
||||
* @mixin
|
||||
* @memberOf Annotation
|
||||
*/
|
||||
var eventEmitterMixin = {
|
||||
/**
|
||||
* Add emitter events.
|
||||
*/
|
||||
addEvents: function () {
|
||||
var emitter = this, addMouseDownEvent = function (element) {
|
||||
addEvent(element, H.isTouchDevice ? 'touchstart' : 'mousedown', function (e) {
|
||||
emitter.onMouseDown(e);
|
||||
});
|
||||
};
|
||||
addMouseDownEvent(this.graphic.element);
|
||||
(emitter.labels || []).forEach(function (label) {
|
||||
if (label.options.useHTML && label.graphic.text) {
|
||||
// Mousedown event bound to HTML element (#13070).
|
||||
addMouseDownEvent(label.graphic.text.element);
|
||||
}
|
||||
});
|
||||
objectEach(emitter.options.events, function (event, type) {
|
||||
var eventHandler = function (e) {
|
||||
if (type !== 'click' || !emitter.cancelClick) {
|
||||
event.call(emitter, emitter.chart.pointer.normalize(e), emitter.target);
|
||||
}
|
||||
};
|
||||
if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
|
||||
emitter.graphic.on(type, eventHandler);
|
||||
}
|
||||
else {
|
||||
addEvent(emitter, type, eventHandler);
|
||||
}
|
||||
});
|
||||
if (emitter.options.draggable) {
|
||||
addEvent(emitter, 'drag', emitter.onDrag);
|
||||
if (!emitter.graphic.renderer.styledMode) {
|
||||
var cssPointer_1 = {
|
||||
cursor: {
|
||||
x: 'ew-resize',
|
||||
y: 'ns-resize',
|
||||
xy: 'move'
|
||||
}[emitter.options.draggable]
|
||||
};
|
||||
emitter.graphic.css(cssPointer_1);
|
||||
(emitter.labels || []).forEach(function (label) {
|
||||
if (label.options.useHTML && label.graphic.text) {
|
||||
label.graphic.text.css(cssPointer_1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!emitter.isUpdating) {
|
||||
fireEvent(emitter, 'add');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Remove emitter document events.
|
||||
*/
|
||||
removeDocEvents: function () {
|
||||
if (this.removeDrag) {
|
||||
this.removeDrag = this.removeDrag();
|
||||
}
|
||||
if (this.removeMouseUp) {
|
||||
this.removeMouseUp = this.removeMouseUp();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Mouse down handler.
|
||||
*/
|
||||
onMouseDown: function (e) {
|
||||
var emitter = this, pointer = emitter.chart.pointer, prevChartX, prevChartY;
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
// On right click, do nothing:
|
||||
if (e.button === 2) {
|
||||
return;
|
||||
}
|
||||
e = pointer.normalize(e);
|
||||
prevChartX = e.chartX;
|
||||
prevChartY = e.chartY;
|
||||
emitter.cancelClick = false;
|
||||
emitter.chart.hasDraggedAnnotation = true;
|
||||
emitter.removeDrag = addEvent(H.doc, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
|
||||
emitter.hasDragged = true;
|
||||
e = pointer.normalize(e);
|
||||
e.prevChartX = prevChartX;
|
||||
e.prevChartY = prevChartY;
|
||||
fireEvent(emitter, 'drag', e);
|
||||
prevChartX = e.chartX;
|
||||
prevChartY = e.chartY;
|
||||
});
|
||||
emitter.removeMouseUp = addEvent(H.doc, H.isTouchDevice ? 'touchend' : 'mouseup', function (e) {
|
||||
emitter.cancelClick = emitter.hasDragged;
|
||||
emitter.hasDragged = false;
|
||||
emitter.chart.hasDraggedAnnotation = false;
|
||||
// ControlPoints vs Annotation:
|
||||
fireEvent(pick(emitter.target, emitter), 'afterUpdate');
|
||||
emitter.onMouseUp(e);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Mouse up handler.
|
||||
*/
|
||||
onMouseUp: function (_e) {
|
||||
var chart = this.chart, annotation = this.target || this, annotationsOptions = chart.options.annotations, index = chart.annotations.indexOf(annotation);
|
||||
this.removeDocEvents();
|
||||
annotationsOptions[index] = annotation.options;
|
||||
},
|
||||
/**
|
||||
* Drag and drop event. All basic annotations should share this
|
||||
* capability as well as the extended ones.
|
||||
*/
|
||||
onDrag: function (e) {
|
||||
if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
|
||||
var translation = this.mouseMoveToTranslation(e);
|
||||
if (this.options.draggable === 'x') {
|
||||
translation.y = 0;
|
||||
}
|
||||
if (this.options.draggable === 'y') {
|
||||
translation.x = 0;
|
||||
}
|
||||
if (this.points.length) {
|
||||
this.translate(translation.x, translation.y);
|
||||
}
|
||||
else {
|
||||
this.shapes.forEach(function (shape) {
|
||||
shape.translate(translation.x, translation.y);
|
||||
});
|
||||
this.labels.forEach(function (label) {
|
||||
label.translate(translation.x, translation.y);
|
||||
});
|
||||
}
|
||||
this.redraw(false);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Map mouse move event to the radians.
|
||||
*/
|
||||
mouseMoveToRadians: function (e, cx, cy) {
|
||||
var prevDy = e.prevChartY - cy, prevDx = e.prevChartX - cx, dy = e.chartY - cy, dx = e.chartX - cx, temp;
|
||||
if (this.chart.inverted) {
|
||||
temp = prevDx;
|
||||
prevDx = prevDy;
|
||||
prevDy = temp;
|
||||
temp = dx;
|
||||
dx = dy;
|
||||
dy = temp;
|
||||
}
|
||||
return Math.atan2(dy, dx) - Math.atan2(prevDy, prevDx);
|
||||
},
|
||||
/**
|
||||
* Map mouse move event to the distance between two following events.
|
||||
*/
|
||||
mouseMoveToTranslation: function (e) {
|
||||
var dx = e.chartX - e.prevChartX, dy = e.chartY - e.prevChartY, temp;
|
||||
if (this.chart.inverted) {
|
||||
temp = dy;
|
||||
dy = dx;
|
||||
dx = temp;
|
||||
}
|
||||
return {
|
||||
x: dx,
|
||||
y: dy
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Map mouse move to the scale factors.
|
||||
*
|
||||
* @param {Object} e event
|
||||
* @param {number} cx center x
|
||||
* @param {number} cy center y
|
||||
**/
|
||||
mouseMoveToScale: function (e, cx, cy) {
|
||||
var prevDx = e.prevChartX - cx, prevDy = e.prevChartY - cy, dx = e.chartX - cx, dy = e.chartY - cy, sx = (dx || 1) / (prevDx || 1), sy = (dy || 1) / (prevDy || 1), temp;
|
||||
if (this.chart.inverted) {
|
||||
temp = sy;
|
||||
sy = sx;
|
||||
sx = temp;
|
||||
}
|
||||
return {
|
||||
x: sx,
|
||||
y: sy
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Destroy the event emitter.
|
||||
*/
|
||||
destroy: function () {
|
||||
this.removeDocEvents();
|
||||
removeEvent(this);
|
||||
this.hcEvents = null;
|
||||
}
|
||||
};
|
||||
export default eventEmitterMixin;
|
||||
@@ -0,0 +1,159 @@
|
||||
/* *
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import Chart from '../../../Core/Chart/Chart.js';
|
||||
import SVGRenderer from '../../../Core/Renderer/SVG/SVGRenderer.js';
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, defined = U.defined, merge = U.merge, objectEach = U.objectEach, uniqueKey = U.uniqueKey;
|
||||
/**
|
||||
* Options for configuring markers for annotations.
|
||||
*
|
||||
* An example of the arrow marker:
|
||||
* <pre>
|
||||
* {
|
||||
* arrow: {
|
||||
* id: 'arrow',
|
||||
* tagName: 'marker',
|
||||
* refY: 5,
|
||||
* refX: 5,
|
||||
* markerWidth: 10,
|
||||
* markerHeight: 10,
|
||||
* children: [{
|
||||
* tagName: 'path',
|
||||
* attrs: {
|
||||
* d: 'M 0 0 L 10 5 L 0 10 Z',
|
||||
* strokeWidth: 0
|
||||
* }
|
||||
* }]
|
||||
* }
|
||||
* }
|
||||
* </pre>
|
||||
*
|
||||
* @sample highcharts/annotations/custom-markers/
|
||||
* Define a custom marker for annotations
|
||||
*
|
||||
* @sample highcharts/css/annotations-markers/
|
||||
* Define markers in a styled mode
|
||||
*
|
||||
* @type {Highcharts.Dictionary<Highcharts.SVGDefinitionObject>}
|
||||
* @since 6.0.0
|
||||
* @optionparent defs
|
||||
*/
|
||||
var defaultMarkers = {
|
||||
/**
|
||||
* @type {Highcharts.SVGDefinitionObject}
|
||||
*/
|
||||
arrow: {
|
||||
tagName: 'marker',
|
||||
render: false,
|
||||
id: 'arrow',
|
||||
refY: 5,
|
||||
refX: 9,
|
||||
markerWidth: 10,
|
||||
markerHeight: 10,
|
||||
/**
|
||||
* @type {Array<Highcharts.DefsOptions>}
|
||||
*/
|
||||
children: [{
|
||||
tagName: 'path',
|
||||
d: 'M 0 0 L 10 5 L 0 10 Z',
|
||||
strokeWidth: 0
|
||||
}]
|
||||
},
|
||||
/**
|
||||
* @type {Highcharts.SVGDefinitionObject}
|
||||
*/
|
||||
'reverse-arrow': {
|
||||
tagName: 'marker',
|
||||
render: false,
|
||||
id: 'reverse-arrow',
|
||||
refY: 5,
|
||||
refX: 1,
|
||||
markerWidth: 10,
|
||||
markerHeight: 10,
|
||||
children: [{
|
||||
tagName: 'path',
|
||||
// reverse triangle (used as an arrow)
|
||||
d: 'M 0 5 L 10 0 L 10 10 Z',
|
||||
strokeWidth: 0
|
||||
}]
|
||||
}
|
||||
};
|
||||
SVGRenderer.prototype.addMarker = function (id, markerOptions) {
|
||||
var options = { id: id };
|
||||
var attrs = {
|
||||
stroke: markerOptions.color || 'none',
|
||||
fill: markerOptions.color || 'rgba(0, 0, 0, 0.75)'
|
||||
};
|
||||
options.children = markerOptions.children.map(function (child) {
|
||||
return merge(attrs, child);
|
||||
});
|
||||
var marker = this.definition(merge(true, {
|
||||
markerWidth: 20,
|
||||
markerHeight: 20,
|
||||
refX: 0,
|
||||
refY: 0,
|
||||
orient: 'auto'
|
||||
}, markerOptions, options));
|
||||
marker.id = id;
|
||||
return marker;
|
||||
};
|
||||
/* eslint-disable no-invalid-this, valid-jsdoc */
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function createMarkerSetter(markerType) {
|
||||
return function (value) {
|
||||
this.attr(markerType, 'url(#' + value + ')');
|
||||
};
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @mixin
|
||||
* @name Highcharts.AnnotaitonMarkerMixin
|
||||
*/
|
||||
var markerMixin = {
|
||||
markerEndSetter: createMarkerSetter('marker-end'),
|
||||
markerStartSetter: createMarkerSetter('marker-start'),
|
||||
/**
|
||||
* Set markers.
|
||||
* @private
|
||||
* @param {Highcharts.AnnotationControllablePath} item
|
||||
*/
|
||||
setItemMarkers: function (item) {
|
||||
var itemOptions = item.options, chart = item.chart, defs = chart.options.defs, fill = itemOptions.fill, color = defined(fill) && fill !== 'none' ?
|
||||
fill :
|
||||
itemOptions.stroke, setMarker = function (markerType) {
|
||||
var markerId = itemOptions[markerType], def, predefinedMarker, key, marker;
|
||||
if (markerId) {
|
||||
for (key in defs) { // eslint-disable-line guard-for-in
|
||||
def = defs[key];
|
||||
if (markerId === def.id &&
|
||||
def.tagName === 'marker') {
|
||||
predefinedMarker = def;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (predefinedMarker) {
|
||||
marker = item[markerType] = chart.renderer
|
||||
.addMarker((itemOptions.id || uniqueKey()) + '-' +
|
||||
predefinedMarker.id, merge(predefinedMarker, { color: color }));
|
||||
item.attr(markerType, marker.attr('id'));
|
||||
}
|
||||
}
|
||||
};
|
||||
['markerStart', 'markerEnd'].forEach(setMarker);
|
||||
}
|
||||
};
|
||||
addEvent(Chart, 'afterGetContainer', function () {
|
||||
this.options.defs = merge(defaultMarkers, this.options.defs || {});
|
||||
objectEach(this.options.defs, function (def) {
|
||||
if (def.tagName === 'marker' && def.render !== false) {
|
||||
this.renderer.addMarker(def.id, def);
|
||||
}
|
||||
}, this);
|
||||
});
|
||||
export default markerMixin;
|
||||
Reference in New Issue
Block a user