Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(TS): Move more utils to TS #8164

Merged
merged 8 commits into from
Aug 21, 2022
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/parser/applyViewboxTransform.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
//@ts-nocheck
import { svgNS } from './constants';
import { parsePreserveAspectRatioAttribute, parseUnit } from '../util';
import { parsePreserveAspectRatioAttribute, parseUnit } from '../util/misc/svgParsing';
import { svgViewBoxElementsRegEx, reViewBoxAttrValue } from './constants';

/**
Expand Down
3 changes: 2 additions & 1 deletion src/parser/normalizeValue.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
//@ts-nocheck
import { multiplyTransformMatrices, parseUnit } from '../util';
import { multiplyTransformMatrices } from '../util/misc/matrix';
import { parseUnit } from '../util/misc/svgParsing';
import { parseTransformAttribute } from "./parseTransformAttribute";


Expand Down
2 changes: 1 addition & 1 deletion src/parser/parseAttributes.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
//@ts-nocheck
import { DEFAULT_SVG_FONT_SIZE } from '../constants';
import { parseUnit } from '../util';
import { parseUnit } from '../util/misc/svgParsing';
import { cPath, fSize, svgValidParentsRegEx } from './constants';
import { getGlobalStylesForElement } from "./getGlobalStylesForElement";
import { normalizeAttr } from './normalizeAttr';
Expand Down
2 changes: 1 addition & 1 deletion src/parser/parseFontDeclaration.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//@ts-nocheck
import { parseUnit } from '../util';
import { parseUnit } from '../util/misc/svgParsing';
import { reFontDeclaration } from './constants';

/**
Expand Down
5 changes: 2 additions & 3 deletions src/parser/parseSVGDocument.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
//@ts-nocheck

import { fabric } from '../../HEADER';
import { toArray } from '../util';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not import directly from the file lang_array and not from the index?
That will solve the circular dep

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is what i was doing i removed for now all imports from the main index in util, and where possible i m linking to direct files.
Is probably better to leave the util/index.ts just to create the external facing export for who will use fabric.util

import { applyViewboxTransform } from "./applyViewboxTransform";
import { clipPaths, cssRules, gradientDefs, svgInvalidAncestorsRegEx, svgValidTagNamesRegEx } from "./constants";
import { getCSSRules } from './getCSSRules';
Expand Down Expand Up @@ -32,7 +31,7 @@ export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
}
parseUseDirectives(doc);

let svgUid = fabric.Object.__uid++, i, len, options = applyViewboxTransform(doc), descendants = toArray(doc.getElementsByTagName('*'));
let svgUid = fabric.Object.__uid++, i, len, options = applyViewboxTransform(doc), descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
options.svgUid = svgUid;
options.signal = parsingOptions && parsingOptions.signal;
Expand Down Expand Up @@ -62,7 +61,7 @@ export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
return el.nodeName.replace('svg:', '') === 'clipPath';
}).forEach(function (el) {
const id = el.getAttribute('id');
localClipPaths[id] = toArray(el.getElementsByTagName('*')).filter(function (el) {
localClipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function (el) {
return svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));
});
});
Expand Down
3 changes: 2 additions & 1 deletion src/parser/parseTransformAttribute.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
//@ts-nocheck
import { iMatrix } from '../constants';
import { commaWsp,reNum } from './constants';
import { degreesToRadians, multiplyTransformMatrices } from '../util';
import { multiplyTransformMatrices } from '../util/misc/matrix';
import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
import { rotateMatrix } from './rotateMatrix';
import { scaleMatrix } from './scaleMatrix';
import { skewMatrix } from './skewMatrix';
Expand Down
7 changes: 4 additions & 3 deletions src/parser/rotateMatrix.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
//@ts-nocheck
import { cos, sin } from '../util';

import { cos } from '../util/misc/cos';
import { sin } from '../util/misc/sin';

export function rotateMatrix(matrix, args) {
let cosValue = cos(args[0]), sinValue = sin(args[0]), x = 0, y = 0;
const cosValue = cos(args[0]), sinValue = sin(args[0]);
let x = 0, y = 0;
if (args.length === 3) {
x = args[1];
y = args[2];
Expand Down
2 changes: 1 addition & 1 deletion src/parser/setStrokeFillOpacity.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//@ts-nocheck
import { fabric } from '../../HEADER';
import { Color } from '../color';
import { toFixed } from '../util';
import { toFixed } from '../util/misc/toFixed';
import { colorAttributes } from './constants';

/**
Expand Down
2 changes: 1 addition & 1 deletion src/parser/skewMatrix.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
//@ts-nocheck
import { degreesToRadians } from '../util';
import { degreesToRadians } from '../util/misc/radiansDegreesConversion';


export function skewMatrix(matrix, args, pos) {
Expand Down
8 changes: 8 additions & 0 deletions src/point.class.ts
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,14 @@ export class Point {
return fabric.util.rotateVector(this.subtract(origin), radians).add(origin);
}

/**
* Apply transform t to point p
* @static
* @memberOf fabric.util
* @param {TMat2D} t The transform
* @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied
* @return {Point} The transformed point
*/
transform(t: TMat2D, ignoreOffset: boolean): Point {
return new Point(
t[0] * this.x + t[2] * this.y + (ignoreOffset ? 0 : t[4]),
Expand Down
2 changes: 1 addition & 1 deletion src/shapes/object.class.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
//@ts-nocheck
import { Point } from '../point.class';
import { capValue } from '../util/misc/capValue';

(function(global) {
var fabric = global.fabric || (global.fabric = { }),
Expand Down Expand Up @@ -692,7 +693,6 @@ import { Point } from '../point.class';
return dims;
}
var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal),
capValue = fabric.util.capValue,
x = capValue(min, limitedDims.x, max),
y = capValue(min, limitedDims.y, max);
if (width > x) {
Expand Down
21 changes: 21 additions & 0 deletions src/typedefs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,25 @@ export const enum StrokeLineJoin {
round = 'round',
}

export const enum ImageFormat {
jpeg = 'jpeg',
jpg = 'jpeg',
png = 'png',
}

export const enum SVGElementName {
linearGradient = 'linearGradient',
radialGradient = 'radialGradient',
stop = 'stop',
}

export const enum SupportedSVGUnit {
mm = 'mm',
cm = 'cm',
in = 'in',
pt = 'pt',
pc = 'pc',
em = 'em',
}

export type TMat2D = [number, number, number, number, number, number];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

export type TMat2DBasic = [number,number,number,number];
export type TMat2DAffine = [number,number,number,number,number,number];

export type TMat2D<T> = TMat2DAffine |TMat2DBasic;

export type...

Playground Link

1 change: 1 addition & 0 deletions src/util/misc/capValue.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const capValue = (min: number, value: number, max: number) => Math.max(min, Math.min(value, max));
44 changes: 44 additions & 0 deletions src/util/misc/dom.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { fabric } from '../../../HEADER';
import { ImageFormat } from '../../typedefs';
/**
* Creates canvas element
* @static
* @memberOf fabric.util
* @return {CanvasElement} initialized canvas element
*/
export const createCanvasElement = (): HTMLCanvasElement => fabric.document.createElement('canvas');

/**
* Creates image element (works on client and node)
* @static
* @memberOf fabric.util
* @return {HTMLImageElement} HTML image element
*/
export const createImage = () =>fabric.document.createElement('img');

/**
* Creates a canvas element that is a copy of another and is also painted
* @param {CanvasElement} canvas to copy size and content of
* @static
* @memberOf fabric.util
* @return {CanvasElement} initialized canvas element
*/
export const copyCanvasElement = (canvas: HTMLCanvasElement): HTMLCanvasElement => {
const newCanvas = createCanvasElement();
newCanvas.width = canvas.width;
newCanvas.height = canvas.height;
newCanvas.getContext('2d')?.drawImage(canvas, 0, 0);
return newCanvas;
};

/**
* since 2.6.0 moved from canvas instance to utility.
* possibly useless
* @param {CanvasElement} canvasEl to copy size and content of
* @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too
* @param {Number} quality <= 1 and > 0
* @static
* @memberOf fabric.util
* @return {String} data url
*/
export const toDataURL = (canvasEl: HTMLCanvasElement, format: ImageFormat, quality: number) => canvasEl.toDataURL(`image/${format}`, quality);
36 changes: 36 additions & 0 deletions src/util/misc/findScaleTo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
interface IWithDimensions {
width: number;
height: number;
}

/**
* Finds the scale for the object source to fit inside the object destination,
* keeping aspect ratio intact.
* respect the total allowed area for the cache.
* @memberOf fabric.util
* @param {Object | fabric.Object} source
* @param {Number} source.height natural unscaled height of the object
* @param {Number} source.width natural unscaled width of the object
* @param {Object | fabric.Object} destination
* @param {Number} destination.height natural unscaled height of the object
* @param {Number} destination.width natural unscaled width of the object
* @return {Number} scale factor to apply to source to fit into destination
*/
export const findScaleToFit = (source: IWithDimensions, destination: IWithDimensions) =>
Math.min(destination.width / source.width, destination.height / source.height);

/**
* Finds the scale for the object source to cover entirely the object destination,
* keeping aspect ratio intact.
* respect the total allowed area for the cache.
* @memberOf fabric.util
* @param {Object | fabric.Object} source
* @param {Number} source.height natural unscaled height of the object
* @param {Number} source.width natural unscaled width of the object
* @param {Object | fabric.Object} destination
* @param {Number} destination.height natural unscaled height of the object
* @param {Number} destination.width natural unscaled width of the object
* @return {Number} scale factor to apply to source to cover destination
*/
export const findScaleToCover = (source: IWithDimensions, destination: IWithDimensions) =>
Math.max(destination.width / source.width, destination.height / source.height);
Loading