Excalidraw/svg-to-excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/svg-to-excalidraw.git synced 2026-05-17 13:30:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(deps): Update Dependencies. Fix issues related to using with CRA (#88)

Browse Source
This commit is contained in:
Broch Stilley
2021-09-09 05:24:41 -07:00
committed by GitHub
parent 62646f933e
commit 6f6e4b7269
9 changed files with 1259 additions and 1043 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.husky/.gitignore
-1
View File
@@ -1 +0,0 @@
_
.husky/pre-commit
-8
View File
@@ -1,8 +0,0 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# NOTE: If you are using a program to manage git, such as Sourcetree, but you are receiving an "npx is not a valid command." error,
# it probably means that your PATH is not being picked up when the commit flags are running. See this link for help:
# https://community.atlassian.com/t5/Bitbucket-questions/SourceTree-Hook-failing-because-paths-don-t-seem-to-be-set/qaq-p/274792
npx --no-install lint-staged
package.json
+24 -22
View File
@@ -1,12 +1,13 @@
{
"name": "svg-to-excalidraw",
"version": "0.0.1",
"version": "0.0.2",
"description": "Convert SVG to Excalidraw’s file format",
"main": "dist/bundle.js",
"files": [
"dist/bundle.js",
"svg-to-excalidraw.d.ts"
],
"types": "svg-to-excalidraw.d.ts",
"scripts": {
"build": "yarn clean && webpack --config webpack.config.js",
"build:watch": "yarn clean && webpack --config webpack.config.js --watch",
@@ -16,7 +17,6 @@
"fix:other": "yarn prettier -- --write",
"lint:check": "eslint .",
"lint:write": "eslint . --fix",
"postinstall": "husky install",
"prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
"test": "yarn test:typecheck && yarn test:code && yarn test:other",
"test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
@@ -24,42 +24,44 @@
"test:typecheck": "tsc"
},
"prettier": "@excalidraw/prettier-config",
"author": "Nicolas Goudry <goudry.nicolas@gmail.com>",
"contributors": [
"Nicolas Goudry <goudry.nicolas@gmail.com>",
"Broch Stilley <brochington@gmail.com>"
],
"license": "MIT",
"devDependencies": {
"@babel/core": "7.13.10",
"@babel/plugin-proposal-class-properties": "7.13.0",
"@babel/plugin-proposal-object-rest-spread": "7.13.8",
"@babel/core": "7.15.5",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/plugin-proposal-object-rest-spread": "7.14.7",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/preset-env": "7.13.15",
"@babel/preset-typescript": "7.13.0",
"@babel/preset-env": "7.15.4",
"@babel/preset-typescript": "7.15.0",
"@excalidraw/eslint-config": "1.0.1",
"@excalidraw/prettier-config": "1.0.2",
"@types/chroma-js": "^2.1.3",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.18.0",
"@typescript-eslint/eslint-plugin": "4.31.0",
"@typescript-eslint/parser": "4.31.0",
"babel-loader": "^8.2.2",
"eslint": "7.24.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-prettier": "3.3.1",
"husky": "5.1.3",
"lint-staged": "10.5.4",
"prettier": "2.2.1",
"typescript": "4.2.3",
"webpack": "5.27.1",
"webpack-cli": "4.6.0"
"eslint": "7.32.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-prettier": "4.0.0",
"lint-staged": "11.1.2",
"prettier": "2.3.2",
"typescript": "4.4.2",
"webpack": "5.52.0",
"webpack-cli": "4.8.0"
},
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.{js,css,md}": "prettier --write"
},
"dependencies": {
"chroma-js": "^2.1.1",
"chroma-js": "^2.1.2",
"gl-matrix": "^3.3.0",
"nanoid": "^3.1.22",
"nanoid": "^3.1.25",
"path-data-parser": "^0.1.0",
"points-on-curve": "^0.2.0",
"points-on-path": "^0.2.1",
"roughjs": "^4.3.1"
"roughjs": "^4.4.1"
}
}
src/elements/path/utils/ellipse.ts
+1 -1
View File
@@ -73,7 +73,7 @@ export const getEllipsePoints = (
radiusX: number,
radiusY: number,
): number[][] => {
const points = [];
const points: number[][] = [];
for (let i = 0; i < 360; i += 1) {
const pointAtDegree = getPointAtDegree(
src/elements/path/utils/path-to-points.ts
+2 -1
View File
@@ -3,7 +3,8 @@ import { safeNumber } from "../../../utils";
import { curveToPoints } from "./bezier";
import { findArc, getEllipsePoints, getEllipsesCenter } from "./ellipse";
const PATH_COMMANDS_REGEX = /(?:([HhVv] *-?\d*(?:\.\d+)?)|([MmLlTt](?: *-?\d*(?:\.\d+)?(?:,| *)?){2})|([Cc](?: *-?\d*(?:\.\d+)?(?:,| *)?){6})|([QqSs](?: *-?\d*(?:\.\d+)?(?:,| *)?){4})|([Aa](?: *-?\d*(?:\.\d+)?(?:,| *)?){7})|(z|Z))/g;
const PATH_COMMANDS_REGEX =
/(?:([HhVv] *-?\d*(?:\.\d+)?)|([MmLlTt](?: *-?\d*(?:\.\d+)?(?:,| *)?){2})|([Cc](?: *-?\d*(?:\.\d+)?(?:,| *)?){6})|([QqSs](?: *-?\d*(?:\.\d+)?(?:,| *)?){4})|([Aa](?: *-?\d*(?:\.\d+)?(?:,| *)?){7})|(z|Z))/g;
const COMMAND_REGEX = /(?:[MmLlHhVvCcSsQqTtAaZz]|(-?\d+(?:\.\d+)?))/g;
const handleMoveToAndLineTo = (
src/transform.ts
+30 -34
View File
@@ -79,45 +79,41 @@ const svgTransformToCSSTransform = (svgTransformStr: string): string => {
return "";
}
const tFuncValues: TransformFunc[] = tFuncs.map(
(tFuncStr): TransformFunc => {
const type = tFuncStr.split("(")[0] as keyof typeof transformFunctions;
if (!type) {
throw new Error("Unable to find transform name");
}
if (!transformFunctionsArr.includes(type)) {
throw new Error(`transform function name "${type}" is not valid`);
}
const tFuncValues: TransformFunc[] = tFuncs.map((tFuncStr): TransformFunc => {
const type = tFuncStr.split("(")[0] as keyof typeof transformFunctions;
if (!type) {
throw new Error("Unable to find transform name");
}
if (!transformFunctionsArr.includes(type)) {
throw new Error(`transform function name "${type}" is not valid`);
}
// get the arg/props of the transform function, e.g "90deg".
const tFuncParts = tFuncStr.match(/([-+]?[0-9]*\.?[0-9]+)([a-z])*/g);
if (!tFuncParts) {
return { type, values: [] };
}
// get the arg/props of the transform function, e.g "90deg".
const tFuncParts = tFuncStr.match(/([-+]?[0-9]*\.?[0-9]+)([a-z])*/g);
if (!tFuncParts) {
return { type, values: [] };
}
let values = tFuncParts.map(
(a): TransformFuncValue => {
// Separate the arg value and unit. e.g ["90", "deg"]
const [value, unit] = a.matchAll(/([-+]?[0-9]*\.?[0-9]+)|([a-z])*/g);
return {
unit: unit[0] || defaultUnits[type],
value: value[0],
};
},
);
// Not supporting x, y args of svg rotate transform yet...
if (values && type === "rotate" && values?.length > 1) {
values = [values[0]];
}
let values = tFuncParts.map((a): TransformFuncValue => {
// Separate the arg value and unit. e.g ["90", "deg"]
const [value, unit] = a.matchAll(/([-+]?[0-9]*\.?[0-9]+)|([a-z])*/g);
return {
type,
values,
unit: unit[0] || defaultUnits[type],
value: value[0],
};
},
);
});
// Not supporting x, y args of svg rotate transform yet...
if (values && type === "rotate" && values?.length > 1) {
values = [values[0]];
}
return {
type,
values,
};
});
// Generate a string of transform functions that can be set as a CSS Transform.
const csstransformStr = tFuncValues
src/walker.ts
+52 -56
View File
@@ -377,73 +377,69 @@ const walkers = {
case "nonzero":
let initialWindingOrder = "clockwise";
elements = points.map(
(pointArr, idx): ExcalidrawDraw => {
const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
const x = tPoints[0][0];
const y = tPoints[0][1];
elements = points.map((pointArr, idx): ExcalidrawDraw => {
const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
const x = tPoints[0][0];
const y = tPoints[0][1];
const [width, height] = dimensionsFromPoints(tPoints);
const [width, height] = dimensionsFromPoints(tPoints);
const relativePoints = tPoints.map(
([_x, _y]): Point => [_x - x, _y - y],
);
const relativePoints = tPoints.map(
([_x, _y]): Point => [_x - x, _y - y],
);
const windingOrder = getWindingOrder(relativePoints);
if (idx === 0) {
initialWindingOrder = windingOrder;
localGroup = randomId();
}
const windingOrder = getWindingOrder(relativePoints);
if (idx === 0) {
initialWindingOrder = windingOrder;
localGroup = randomId();
}
let backgroundColor = fillColor;
if (initialWindingOrder !== windingOrder) {
backgroundColor = "#FFFFFF";
}
let backgroundColor = fillColor;
if (initialWindingOrder !== windingOrder) {
backgroundColor = "#FFFFFF";
}
return {
...createExDraw(),
strokeWidth: 0,
strokeColor: "#00000000",
...presAttrs(el, groups),
points: relativePoints,
backgroundColor,
width,
height,
x: x + getNum(el, "x", 0),
y: y + getNum(el, "y", 0),
groupIds: [localGroup],
};
},
);
return {
...createExDraw(),
strokeWidth: 0,
strokeColor: "#00000000",
...presAttrs(el, groups),
points: relativePoints,
backgroundColor,
width,
height,
x: x + getNum(el, "x", 0),
y: y + getNum(el, "y", 0),
groupIds: [localGroup],
};
});
break;
case "evenodd":
elements = points.map(
(pointArr, idx): ExcalidrawDraw => {
const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
const x = tPoints[0][0];
const y = tPoints[0][1];
elements = points.map((pointArr, idx): ExcalidrawDraw => {
const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
const x = tPoints[0][0];
const y = tPoints[0][1];
const [width, height] = dimensionsFromPoints(tPoints);
const [width, height] = dimensionsFromPoints(tPoints);
const relativePoints = tPoints.map(
([_x, _y]): Point => [_x - x, _y - y],
);
const relativePoints = tPoints.map(
([_x, _y]): Point => [_x - x, _y - y],
);
if (idx === 0) {
localGroup = randomId();
}
if (idx === 0) {
localGroup = randomId();
}
return {
...createExDraw(),
...presAttrs(el, groups),
points: relativePoints,
width,
height,
x: x + getNum(el, "x", 0),
y: y + getNum(el, "y", 0),
};
},
);
return {
...createExDraw(),
...presAttrs(el, groups),
points: relativePoints,
width,
height,
x: x + getNum(el, "x", 0),
y: y + getNum(el, "y", 0),
};
});
break;
default:
}
webpack.config.js
+1 -1
View File
@@ -10,7 +10,7 @@ const babelLoaderConfig = {
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
],
presets: ["@babel/typescript"],
presets: ["@babel/preset-env", "@babel/typescript"],
},
};
yarn.lock
+1149 -919
View File
File diff suppressed because it is too large Load Diff