Skip to content

Commit

Permalink
Merge branch 'master' into fix-transformer
Browse files Browse the repository at this point in the history
  • Loading branch information
ShaMan123 committed Oct 31, 2022
2 parents 459e72f + 2c0817b commit 9345400
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 154 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

## [next]

- chore(TS): migrate Ellipse [#8408](https://github.com/fabricjs/fabric.js/pull/8408)
- chore(TS): migrate Triangle to TS [#8410](https://github.com/fabricjs/fabric.js/pull/8410)
- chore(TS): migrate Circle to TS [#8406](https://github.com/fabricjs/fabric.js/pull/8406)
- chore(TS): convert Object interactivity mixin to its own class [#8401](https://github.com/fabricjs/fabric.js/pull/8401)
Expand Down
293 changes: 139 additions & 154 deletions src/shapes/ellipse.class.ts
Original file line number Diff line number Diff line change
@@ -1,180 +1,165 @@
//@ts-nocheck
import { fabric } from '../../HEADER';
import { twoMathPi } from '../constants';
import { SHARED_ATTRIBUTES } from '../parser/attributes';
import { parseAttributes } from '../parser/parseAttributes';
import { TClassProperties } from '../typedefs';
import { FabricObject } from './fabricObject.class';
import { fabricObjectDefaultValues } from './object.class';

(function (global) {
var fabric = global.fabric || (global.fabric = {}),
piBy2 = Math.PI * 2;
export class Ellipse extends FabricObject {
/**
* Ellipse class
* @class fabric.Ellipse
* @extends fabric.Object
* @return {fabric.Ellipse} thisArg
* @see {@link fabric.Ellipse#initialize} for constructor definition
* Horizontal radius
* @type Number
* @default
*/
fabric.Ellipse = fabric.util.createClass(
fabric.Object,
/** @lends fabric.Ellipse.prototype */ {
/**
* Type of an object
* @type String
* @default
*/
type: 'ellipse',

/**
* Horizontal radius
* @type Number
* @default
*/
rx: 0,

/**
* Vertical radius
* @type Number
* @default
*/
ry: 0,

cacheProperties: FabricObject.prototype.cacheProperties.concat(
'rx',
'ry'
),

/**
* Constructor
* @param {Object} [options] Options object
* @return {fabric.Ellipse} thisArg
*/
initialize: function (options) {
this.callSuper('initialize', options);
this.set('rx', (options && options.rx) || 0);
this.set('ry', (options && options.ry) || 0);
},

/**
* @private
* @param {String} key
* @param {*} value
* @return {fabric.Ellipse} thisArg
*/
_set: function (key, value) {
this.callSuper('_set', key, value);
switch (key) {
case 'rx':
this.rx = value;
this.set('width', value * 2);
break;

case 'ry':
this.ry = value;
this.set('height', value * 2);
break;
}
return this;
},

/**
* Returns horizontal radius of an object (according to how an object is scaled)
* @return {Number}
*/
getRx: function () {
return this.get('rx') * this.get('scaleX');
},

/**
* Returns Vertical radius of an object (according to how an object is scaled)
* @return {Number}
*/
getRy: function () {
return this.get('ry') * this.get('scaleY');
},

/**
* Returns object representation of an instance
* @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 this.callSuper(
'toObject',
['rx', 'ry'].concat(propertiesToInclude)
);
},

/* _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 () {
return [
'<ellipse ',
'COMMON_PARTS',
'cx="0" cy="0" ',
'rx="',
this.rx,
'" ry="',
this.ry,
'" />\n',
];
},
/* _TO_SVG_END_ */

/**
* @private
* @param {CanvasRenderingContext2D} ctx context to render on
*/
_render: function (ctx) {
ctx.beginPath();
ctx.save();
ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0);
ctx.arc(0, 0, this.rx, 0, piBy2, false);
ctx.restore();
this._renderPaintInOrder(ctx);
},
rx: number;

/**
* Vertical radius
* @type Number
* @default
*/
ry: number;

/**
* Constructor
* @param {Object} [options] Options object
* @return {Ellipse} thisArg
*/
constructor(options: Record<string, unknown>) {
super(options);
this.set('rx', (options && options.rx) || 0);
this.set('ry', (options && options.ry) || 0);
}

/**
* @private
* @param {String} key
* @param {*} value
* @return {Ellipse} thisArg
*/
_set(key: string, value: any) {
super._set(key, value);
switch (key) {
case 'rx':
this.rx = value;
this.set('width', value * 2);
break;

case 'ry':
this.ry = value;
this.set('height', value * 2);
break;
}
);
return this;
}

/**
* Returns horizontal radius of an object (according to how an object is scaled)
* @return {Number}
*/
getRx() {
return this.get('rx') * this.get('scaleX');
}

/**
* Returns Vertical radius of an object (according to how an object is scaled)
* @return {Number}
*/
getRy() {
return this.get('ry') * this.get('scaleY');
}

/**
* Returns object representation of an instance
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} object representation of an instance
*/
toObject(propertiesToInclude: (keyof this)[] = []) {
return super.toObject(['rx', 'ry', ...propertiesToInclude]);
}

/**
* Returns svg representation of an instance
* @return {Array} an array of strings with the specific svg representation
* of the instance
*/
_toSVG() {
return [
'<ellipse ',
'COMMON_PARTS',
'cx="0" cy="0" ',
'rx="',
this.rx,
'" ry="',
this.ry,
'" />\n',
];
}

/**
* @private
* @param {CanvasRenderingContext2D} ctx context to render on
*/
_render(ctx: CanvasRenderingContext2D) {
ctx.beginPath();
ctx.save();
ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0);
ctx.arc(0, 0, this.rx, 0, twoMathPi, false);
ctx.restore();
this._renderPaintInOrder(ctx);
}

/* _FROM_SVG_START_ */

/**
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})
* List of attribute names to account for when parsing SVG element (used by {@link Ellipse.fromElement})
* @static
* @memberOf fabric.Ellipse
* @memberOf Ellipse
* @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement
*/
fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(
'cx cy rx ry'.split(' ')
);
static ATTRIBUTE_NAMES = [...SHARED_ATTRIBUTES, 'cx', 'cy', 'rx', 'ry'];

/**
* Returns {@link fabric.Ellipse} instance from an SVG element
* Returns {@link Ellipse} instance from an SVG element
* @static
* @memberOf fabric.Ellipse
* @memberOf Ellipse
* @param {SVGElement} element Element to parse
* @param {Function} [callback] Options callback invoked after parsing is finished
* @return {fabric.Ellipse}
* @return {Ellipse}
*/
fabric.Ellipse.fromElement = function (element, callback) {
var parsedAttributes = fabric.parseAttributes(
element,
fabric.Ellipse.ATTRIBUTE_NAMES
);
static fromElement(
element: SVGElement,
callback: (ellipse: Ellipse) => void
) {
const parsedAttributes = parseAttributes(element, Ellipse.ATTRIBUTE_NAMES);

parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx;
parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry;
callback(new fabric.Ellipse(parsedAttributes));
};
callback(new Ellipse(parsedAttributes));
}

/* _FROM_SVG_END_ */

/**
* Returns {@link fabric.Ellipse} instance from an object representation
* Returns {@link Ellipse} instance from an object representation
* @static
* @memberOf fabric.Ellipse
* @memberOf Ellipse
* @param {Object} object Object to create an instance from
* @returns {Promise<fabric.Ellipse>}
* @returns {Promise<Ellipse>}
*/
fabric.Ellipse.fromObject = function (object) {
return FabricObject._fromObject(fabric.Ellipse, object);
};
})(typeof exports !== 'undefined' ? exports : window);
static fromObject(object: any) {
return FabricObject._fromObject(Ellipse, object);
}
}

export const ellipseDefaultValues: Partial<TClassProperties<Ellipse>> = {
type: 'ellipse',
rx: 0,
ry: 0,
cacheProperties: [...fabricObjectDefaultValues.cacheProperties, 'rx', 'ry'],
};

Object.assign(Ellipse.prototype, ellipseDefaultValues);

fabric.Ellipse = Ellipse;

0 comments on commit 9345400

Please sign in to comment.