fabric-pure-browser
Version:
Fabric.js package with no node-specific dependencies (node-canvas, jsdom). The project is published once a day (in case if a new version appears) from 'master' branch of https://github.com/fabricjs/fabric.js repository. You can keep original imports in
341 lines (300 loc) • 9.18 kB
JavaScript
(function(global) {
'use strict';
var fabric = global.fabric || (global.fabric = { }),
extend = fabric.util.object.extend,
clone = fabric.util.object.clone,
coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 },
supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
if (fabric.Line) {
fabric.warn('fabric.Line is already defined');
return;
}
/**
* Line class
* @class fabric.Line
* @extends fabric.Object
* @see {@link fabric.Line#initialize} for constructor definition
*/
fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ {
/**
* Type of an object
* @type String
* @default
*/
type: 'line',
/**
* x value or first line edge
* @type Number
* @default
*/
x1: 0,
/**
* y value or first line edge
* @type Number
* @default
*/
y1: 0,
/**
* x value or second line edge
* @type Number
* @default
*/
x2: 0,
/**
* y value or second line edge
* @type Number
* @default
*/
y2: 0,
cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'),
/**
* Constructor
* @param {Array} [points] Array of points
* @param {Object} [options] Options object
* @return {fabric.Line} thisArg
*/
initialize: function(points, options) {
if (!points) {
points = [0, 0, 0, 0];
}
this.callSuper('initialize', options);
this.set('x1', points[0]);
this.set('y1', points[1]);
this.set('x2', points[2]);
this.set('y2', points[3]);
this._setWidthHeight(options);
},
/**
* @private
* @param {Object} [options] Options
*/
_setWidthHeight: function(options) {
options || (options = { });
this.width = Math.abs(this.x2 - this.x1);
this.height = Math.abs(this.y2 - this.y1);
this.left = 'left' in options
? options.left
: this._getLeftToOriginX();
this.top = 'top' in options
? options.top
: this._getTopToOriginY();
},
/**
* @private
* @param {String} key
* @param {*} value
*/
_set: function(key, value) {
this.callSuper('_set', key, value);
if (typeof coordProps[key] !== 'undefined') {
this._setWidthHeight();
}
return this;
},
/**
* @private
* @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
*/
_getLeftToOriginX: makeEdgeToOriginGetter(
{ // property names
origin: 'originX',
axis1: 'x1',
axis2: 'x2',
dimension: 'width'
},
{ // possible values of origin
nearest: 'left',
center: 'center',
farthest: 'right'
}
),
/**
* @private
* @return {Number} topToOriginY Distance from top edge of canvas to originY of Line.
*/
_getTopToOriginY: makeEdgeToOriginGetter(
{ // property names
origin: 'originY',
axis1: 'y1',
axis2: 'y2',
dimension: 'height'
},
{ // possible values of origin
nearest: 'top',
center: 'center',
farthest: 'bottom'
}
),
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_render: function(ctx) {
ctx.beginPath();
if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
// move from center (of virtual box) to its left/top corner
// we can't assume x1, y1 is top left and x2, y2 is bottom right
var p = this.calcLinePoints();
ctx.moveTo(p.x1, p.y1);
ctx.lineTo(p.x2, p.y2);
}
ctx.lineWidth = this.strokeWidth;
// TODO: test this
// make sure setting "fill" changes color of a line
// (by copying fillStyle to strokeStyle, since line is stroked, not filled)
var origStrokeStyle = ctx.strokeStyle;
ctx.strokeStyle = this.stroke || ctx.fillStyle;
this.stroke && this._renderStroke(ctx);
ctx.strokeStyle = origStrokeStyle;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderDashedStroke: function(ctx) {
var p = this.calcLinePoints();
ctx.beginPath();
fabric.util.drawDashedLine(ctx, p.x1, p.y1, p.x2, p.y2, this.strokeDashArray);
ctx.closePath();
},
/**
* This function is an helper for svg import. it returns the center of the object in the svg
* untransformed coordinates
* @private
* @return {Object} center point from element coordinates
*/
_findCenterFromElement: function() {
return {
x: (this.x1 + this.x2) / 2,
y: (this.y1 + this.y2) / 2,
};
},
/**
* Returns object representation of an instance
* @methd toObject
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} object representation of an instance
*/
toObject: function(propertiesToInclude) {
return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints());
},
/*
* Calculate object dimensions from its properties
* @private
*/
_getNonTransformedDimensions: function() {
var dim = this.callSuper('_getNonTransformedDimensions');
if (this.strokeLineCap === 'butt') {
if (this.width === 0) {
dim.y -= this.strokeWidth;
}
if (this.height === 0) {
dim.x -= this.strokeWidth;
}
}
return dim;
},
/**
* Recalculates line points given width and height
* @private
*/
calcLinePoints: function() {
var xMult = this.x1 <= this.x2 ? -1 : 1,
yMult = this.y1 <= this.y2 ? -1 : 1,
x1 = (xMult * this.width * 0.5),
y1 = (yMult * this.height * 0.5),
x2 = (xMult * this.width * -0.5),
y2 = (yMult * this.height * -0.5);
return {
x1: x1,
x2: x2,
y1: y1,
y2: y2
};
},
/* _TO_SVG_START_ */
/**
* Returns svg representation of an instance
* @return {Array} an array of strings with the specific svg representation
* of the instance
*/
_toSVG: function() {
var p = this.calcLinePoints();
return [
'<line ', 'COMMON_PARTS',
'x1="', p.x1,
'" y1="', p.y1,
'" x2="', p.x2,
'" y2="', p.y2,
'" />\n'
];
},
/* _TO_SVG_END_ */
});
/* _FROM_SVG_START_ */
/**
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement})
* @static
* @memberOf fabric.Line
* @see http://www.w3.org/TR/SVG/shapes.html#LineElement
*/
fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' '));
/**
* Returns fabric.Line instance from an SVG element
* @static
* @memberOf fabric.Line
* @param {SVGElement} element Element to parse
* @param {Object} [options] Options object
* @param {Function} [callback] callback function invoked after parsing
*/
fabric.Line.fromElement = function(element, callback, options) {
options = options || { };
var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES),
points = [
parsedAttributes.x1 || 0,
parsedAttributes.y1 || 0,
parsedAttributes.x2 || 0,
parsedAttributes.y2 || 0
];
callback(new fabric.Line(points, extend(parsedAttributes, options)));
};
/* _FROM_SVG_END_ */
/**
* Returns fabric.Line instance from an object representation
* @static
* @memberOf fabric.Line
* @param {Object} object Object to create an instance from
* @param {function} [callback] invoked with new instance as first argument
*/
fabric.Line.fromObject = function(object, callback) {
function _callback(instance) {
delete instance.points;
callback && callback(instance);
};
var options = clone(object, true);
options.points = [object.x1, object.y1, object.x2, object.y2];
fabric.Object._fromObject('Line', options, _callback, 'points');
};
/**
* Produces a function that calculates distance from canvas edge to Line origin.
*/
function makeEdgeToOriginGetter(propertyNames, originValues) {
var origin = propertyNames.origin,
axis1 = propertyNames.axis1,
axis2 = propertyNames.axis2,
dimension = propertyNames.dimension,
nearest = originValues.nearest,
center = originValues.center,
farthest = originValues.farthest;
return function() {
switch (this.get(origin)) {
case nearest:
return Math.min(this.get(axis1), this.get(axis2));
case center:
return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension));
case farthest:
return Math.max(this.get(axis1), this.get(axis2));
}
};
}
})(typeof exports !== 'undefined' ? exports : this);