From 28235ea137a75097c011f11fee92bec8a97b4afa Mon Sep 17 00:00:00 2001 From: Mikael Sand Date: Mon, 19 Mar 2018 04:07:47 +0200 Subject: [PATCH] Run Prettier, configure ESLint. --- .eslintrc | 2 +- index.js | 40 +++++------ lib/Matrix2D.js | 112 +++++++++++++++++++++++++------ lib/PATTERN_UNITS.js | 1 - lib/SvgTouchableMixin.js | 42 +++++++----- lib/attributes.js | 34 +++++----- lib/extract/extractBrush.js | 15 +++-- lib/extract/extractClipPath.js | 12 ++-- lib/extract/extractFill.js | 10 +-- lib/extract/extractGradient.js | 38 ++++++----- lib/extract/extractLengthList.js | 13 ++-- lib/extract/extractOpacity.js | 4 +- lib/extract/extractPolyPoints.js | 8 ++- lib/extract/extractProps.js | 12 ++-- lib/extract/extractResponder.js | 14 ++-- lib/extract/extractStroke.js | 26 +++---- lib/extract/extractText.js | 85 ++++++++++++----------- lib/extract/extractTransform.js | 60 ++++++++++------- lib/extract/extractViewBox.js | 33 +++++---- lib/percentToFloat.js | 6 +- lib/props.js | 108 ++++++++++++++++++++++------- 21 files changed, 422 insertions(+), 253 deletions(-) diff --git a/.eslintrc b/.eslintrc index 9bb4e3b9..137104e1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -179,7 +179,7 @@ "no-underscore-dangle": 0, // disallow dangling underscores in identifiers //"no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation - "quotes": [1, "single", "avoid-escape"], // specify whether double or single quotes should be used + "quotes": [1, "double", "avoid-escape"], // specify whether double or single quotes should be used "quote-props": 0, // require quotes around object literal property names (off by default) "semi": 1, // require or disallow use of semicolons instead of ASI "sort-vars": 0, // sort variables within the same declaration block (off by default) diff --git a/index.js b/index.js index 57625482..ba0e6837 100644 --- a/index.js +++ b/index.js @@ -1,23 +1,23 @@ -import Rect from './elements/Rect'; -import Circle from './elements/Circle'; -import Ellipse from './elements/Ellipse'; -import Polygon from './elements/Polygon'; -import Polyline from './elements/Polyline'; -import Line from './elements/Line'; -import Svg from './elements/Svg'; -import Path from './elements/Path'; -import G from './elements/G'; -import Text from './elements/Text'; -import TSpan from './elements/TSpan'; -import TextPath from './elements/TextPath'; -import Use from './elements/Use'; -import Image from './elements/Image'; -import Symbol from './elements/Symbol'; -import Defs from './elements/Defs'; -import LinearGradient from './elements/LinearGradient'; -import RadialGradient from './elements/RadialGradient'; -import Stop from './elements/Stop'; -import ClipPath from './elements/ClipPath'; +import Rect from "./elements/Rect"; +import Circle from "./elements/Circle"; +import Ellipse from "./elements/Ellipse"; +import Polygon from "./elements/Polygon"; +import Polyline from "./elements/Polyline"; +import Line from "./elements/Line"; +import Svg from "./elements/Svg"; +import Path from "./elements/Path"; +import G from "./elements/G"; +import Text from "./elements/Text"; +import TSpan from "./elements/TSpan"; +import TextPath from "./elements/TextPath"; +import Use from "./elements/Use"; +import Image from "./elements/Image"; +import Symbol from "./elements/Symbol"; +import Defs from "./elements/Defs"; +import LinearGradient from "./elements/LinearGradient"; +import RadialGradient from "./elements/RadialGradient"; +import Stop from "./elements/Stop"; +import ClipPath from "./elements/ClipPath"; export { Svg, diff --git a/lib/Matrix2D.js b/lib/Matrix2D.js index 3a880017..d1c43231 100644 --- a/lib/Matrix2D.js +++ b/lib/Matrix2D.js @@ -119,7 +119,14 @@ export default class Matrix2D { */ copy = function(matrix) { //noinspection JSUnresolvedVariable - return this.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty); + return this.setTransform( + matrix.a, + matrix.b, + matrix.c, + matrix.d, + matrix.tx, + matrix.ty + ); }; //noinspection JSUnusedGlobalSymbols @@ -150,10 +157,10 @@ export default class Matrix2D { const c1 = this.c; const tx1 = this.tx; - this.a = a * a1 + c * this.b; - this.b = b * a1 + d * this.b; - this.c = a * c1 + c * this.d; - this.d = b * c1 + d * this.d; + this.a = a * a1 + c * this.b; + this.b = b * a1 + d * this.b; + this.c = a * c1 + c * this.d; + this.d = b * c1 + d * this.d; this.tx = a * tx1 + c * this.ty + tx; this.ty = b * tx1 + d * this.ty + ty; //noinspection JSValidateTypes @@ -178,10 +185,10 @@ export default class Matrix2D { const c1 = this.c; const d1 = this.d; if (a !== 1 || b !== 0 || c !== 0 || d !== 1) { - this.a = a1 * a + c1 * b; - this.b = b1 * a + d1 * b; - this.c = a1 * c + c1 * d; - this.d = b1 * c + d1 * d; + this.a = a1 * a + c1 * b; + this.b = b1 * a + d1 * b; + this.c = a1 * c + c1 * d; + this.d = b1 * c + d1 * d; } this.tx = a1 * tx + c1 * ty + this.tx; this.ty = b1 * tx + d1 * ty + this.ty; @@ -207,7 +214,17 @@ export default class Matrix2D { * @param {Number} regY Optional. * @return {Matrix2D} This matrix. Useful for chaining method calls. **/ - appendTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) { + appendTransform = function( + x, + y, + scaleX, + scaleY, + rotation, + skewX, + skewY, + regX, + regY + ) { let cos, sin; if (rotation % 360) { const r = rotation * DEG_TO_RAD; @@ -222,10 +239,31 @@ export default class Matrix2D { // TODO: can this be combined into a single append operation? skewX *= DEG_TO_RAD; skewY *= DEG_TO_RAD; - this.append(Math.cos(skewY), Math.sin(skewY), Math.sin(skewX), Math.cos(skewX), x, y); - this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); + this.append( + Math.cos(skewY), + Math.sin(skewY), + Math.sin(skewX), + Math.cos(skewX), + x, + y + ); + this.append( + cos * scaleX, + sin * scaleX, + -sin * scaleY, + cos * scaleY, + 0, + 0 + ); } else { - this.append(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y); + this.append( + cos * scaleX, + sin * scaleX, + -sin * scaleY, + cos * scaleY, + x, + y + ); } if (regX || regY) { @@ -245,9 +283,9 @@ export default class Matrix2D { * var o = myDisplayObject; * var mtx = new createjs.Matrix2D(); * do { - * // prepend each parent's transformation in turn: - * mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY); - * } while (o = o.parent); + * // prepend each parent's transformation in turn: + * mtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY); + * } while (o = o.parent); * * Note that the above example would not account for {{#crossLink "DisplayObject/transformMatrix:property"}}{{/crossLink}} * values. See {{#crossLink "Matrix2D/prependMatrix"}}{{/crossLink}} for an example that does. @@ -263,7 +301,17 @@ export default class Matrix2D { * @param {Number} regY Optional. * @return {Matrix2D} This matrix. Useful for chaining method calls. **/ - prependTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) { + prependTransform = function( + x, + y, + scaleX, + scaleY, + rotation, + skewX, + skewY, + regX, + regY + ) { let cos, sin; if (rotation % 360) { const r = rotation * DEG_TO_RAD; @@ -276,16 +324,38 @@ export default class Matrix2D { if (regX || regY) { // prepend the registration offset: - this.tx -= regX; this.ty -= regY; + this.tx -= regX; + this.ty -= regY; } if (skewX || skewY) { // TODO: can this be combined into a single prepend operation? skewX *= DEG_TO_RAD; skewY *= DEG_TO_RAD; - this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, 0, 0); - this.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y); + this.prepend( + cos * scaleX, + sin * scaleX, + -sin * scaleY, + cos * scaleY, + 0, + 0 + ); + this.prepend( + Math.cos(skewY), + Math.sin(skewY), + -Math.sin(skewX), + Math.cos(skewX), + x, + y + ); } else { - this.prepend(cos * scaleX, sin * scaleX, -sin * scaleY, cos * scaleY, x, y); + this.prepend( + cos * scaleX, + sin * scaleX, + -sin * scaleY, + cos * scaleY, + x, + y + ); } //noinspection JSValidateTypes return this; diff --git a/lib/PATTERN_UNITS.js b/lib/PATTERN_UNITS.js index 3b9c2e41..7222f319 100644 --- a/lib/PATTERN_UNITS.js +++ b/lib/PATTERN_UNITS.js @@ -1,4 +1,3 @@ - export default { objectBoundingBox: 0, userSpaceOnUse: 1 diff --git a/lib/SvgTouchableMixin.js b/lib/SvgTouchableMixin.js index 5976ee2d..760872be 100644 --- a/lib/SvgTouchableMixin.js +++ b/lib/SvgTouchableMixin.js @@ -1,28 +1,33 @@ -import { Touchable } from 'react-native'; -const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +import { Touchable } from "react-native"; +const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 }; //noinspection JSUnusedGlobalSymbols export default { ...Touchable.Mixin, - touchableHandleStartShouldSetResponder: function (e) { - + touchableHandleStartShouldSetResponder: function(e) { if (this.props.onStartShouldSetResponder) { return this.props.onStartShouldSetResponder(e); } else { - return Touchable.Mixin.touchableHandleStartShouldSetResponder.call(this, e); + return Touchable.Mixin.touchableHandleStartShouldSetResponder.call( + this, + e + ); } }, - touchableHandleResponderTerminationRequest: function (e) { + touchableHandleResponderTerminationRequest: function(e) { if (this.props.onResponderTerminationRequest) { return this.props.onResponderTerminationRequest(e); } else { - return Touchable.Mixin.touchableHandleResponderTerminationRequest.call(this, e); + return Touchable.Mixin.touchableHandleResponderTerminationRequest.call( + this, + e + ); } }, - touchableHandleResponderGrant: function (e) { + touchableHandleResponderGrant: function(e) { if (this.props.onResponderGrant) { return this.props.onResponderGrant(e); } else { @@ -30,7 +35,7 @@ export default { } }, - touchableHandleResponderMove: function (e) { + touchableHandleResponderMove: function(e) { if (this.props.onResponderMove) { return this.props.onResponderMove(e); } else { @@ -38,19 +43,25 @@ export default { } }, - touchableHandleResponderRelease: function (e) { + touchableHandleResponderRelease: function(e) { if (this.props.onResponderRelease) { return this.props.onResponderRelease(e); } else { - return Touchable.Mixin.touchableHandleResponderRelease.call(this, e); + return Touchable.Mixin.touchableHandleResponderRelease.call( + this, + e + ); } }, - touchableHandleResponderTerminate: function (e) { + touchableHandleResponderTerminate: function(e) { if (this.props.onResponderTerminate) { return this.props.onResponderTerminate(e); } else { - return Touchable.Mixin.touchableHandleResponderTerminate.call(this, e); + return Touchable.Mixin.touchableHandleResponderTerminate.call( + this, + e + ); } }, @@ -83,8 +94,9 @@ export default { }, touchableGetLongPressDelayMS: function() { - return this.props.delayLongPress === 0 ? 0 : - this.props.delayLongPress || 500; + return this.props.delayLongPress === 0 + ? 0 + : this.props.delayLongPress || 500; }, touchableGetPressOutDelayMS: function() { diff --git a/lib/attributes.js b/lib/attributes.js index 2164ab51..024f0045 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -1,4 +1,3 @@ - function arrayDiffer(a, b) { if (!a || !b) { return true; @@ -91,24 +90,24 @@ const GroupAttributes = { ...RenderableAttributes, font: { diff: fontDiffer - }, + } }; const UseAttributes = { ...RenderableAttributes, href: true, width: true, - height: true, + height: true }; const SymbolAttributes = { ...ViewBoxAttributes, - name: true, + name: true }; const PathAttributes = { ...RenderableAttributes, - d: true, + d: true }; const TextSpecificAttributes = { @@ -117,7 +116,7 @@ const TextSpecificAttributes = { baselineShift: true, verticalAlign: true, lengthAdjust: true, - textLength: true, + textLength: true }; const TextAttributes = { @@ -129,7 +128,7 @@ const TextAttributes = { deltaY: arrayDiffer, rotate: arrayDiffer, positionX: arrayDiffer, - positionY: arrayDiffer, + positionY: arrayDiffer }; const TextPathAttributes = { @@ -139,12 +138,12 @@ const TextPathAttributes = { method: true, spacing: true, side: true, - midLine: true, + midLine: true }; const TSpanAttibutes = { ...TextAttributes, - content: true, + content: true }; const ClipPathAttributes = { @@ -159,7 +158,7 @@ const GradientAttributes = { gradientUnits: true, gradientTransform: { diff: arrayDiffer - }, + } }; const LinearGradientAttributes = { @@ -167,7 +166,7 @@ const LinearGradientAttributes = { x1: true, y1: true, x2: true, - y2: true, + y2: true }; const RadialGradientAttributes = { @@ -178,15 +177,14 @@ const RadialGradientAttributes = { ry: true, cx: true, cy: true, - r: true, + r: true }; - const CircleAttributes = { ...RenderableAttributes, cx: true, cy: true, - r: true, + r: true }; const EllipseAttributes = { @@ -194,7 +192,7 @@ const EllipseAttributes = { cx: true, cy: true, rx: true, - ry: true, + ry: true }; const ImageAttributes = { @@ -205,7 +203,7 @@ const ImageAttributes = { height: true, src: true, align: true, - meetOrSlice: true, + meetOrSlice: true }; const LineAttributes = { @@ -213,7 +211,7 @@ const LineAttributes = { x1: true, y1: true, x2: true, - y2: true, + y2: true }; const RectAttributes = { @@ -223,7 +221,7 @@ const RectAttributes = { width: true, height: true, rx: true, - ry: true, + ry: true }; export { diff --git a/lib/extract/extractBrush.js b/lib/extract/extractBrush.js index 9800809d..b06d3b11 100644 --- a/lib/extract/extractBrush.js +++ b/lib/extract/extractBrush.js @@ -1,8 +1,8 @@ -import Color from 'color'; -import patternReg from './patternReg'; +import Color from "color"; +import patternReg from "./patternReg"; -export default function (colorOrBrush) { - if (colorOrBrush === 'none' || !colorOrBrush) { +export default function(colorOrBrush) { + if (colorOrBrush === "none" || !colorOrBrush) { return null; } @@ -12,8 +12,11 @@ export default function (colorOrBrush) { if (matched) { return [1, matched[1]]; //todo: - } else { // solid color - let [r, g, b, a = 1] = Color(colorOrBrush).rgb().array(); + } else { + // solid color + let [r, g, b, a = 1] = Color(colorOrBrush) + .rgb() + .array(); return [0, r / 255, g / 255, b / 255, a]; } } catch (err) { diff --git a/lib/extract/extractClipPath.js b/lib/extract/extractClipPath.js index 05e8f286..949d75d9 100644 --- a/lib/extract/extractClipPath.js +++ b/lib/extract/extractClipPath.js @@ -1,12 +1,12 @@ -import clipReg from './patternReg'; +import clipReg from "./patternReg"; const clipRules = { evenodd: 0, nonzero: 1 }; -export default function (props) { - let {clipPath, clipRule} = props; +export default function(props) { + let { clipPath, clipRule } = props; let clipPathProps = {}; if (clipPath) { @@ -17,7 +17,11 @@ export default function (props) { if (matched) { clipPathProps.clipPath = matched[1]; } else { - console.warn('Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + clipPath + '"'); + console.warn( + 'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' + + clipPath + + '"' + ); } } diff --git a/lib/extract/extractFill.js b/lib/extract/extractFill.js index b2fd7c22..61c7187b 100644 --- a/lib/extract/extractFill.js +++ b/lib/extract/extractFill.js @@ -1,6 +1,6 @@ -import extractBrush from './extractBrush'; -import extractOpacity from './extractOpacity'; -import {fillProps} from '../props'; +import extractBrush from "./extractBrush"; +import extractOpacity from "./extractOpacity"; +import { fillProps } from "../props"; const fillRules = { evenodd: 0, @@ -10,7 +10,7 @@ const fillRules = { const fillKeys = Object.keys(fillProps); export default function(props, styleProperties) { - fillKeys.forEach((name) => { + fillKeys.forEach(name => { if (props.hasOwnProperty(name)) { styleProperties.push(name); } @@ -18,7 +18,7 @@ export default function(props, styleProperties) { return { // default fill is black - fill: extractBrush(props.fill || '#000'), + fill: extractBrush(props.fill || "#000"), fillOpacity: extractOpacity(props.fillOpacity), fillRule: fillRules[props.fillRule] === 0 ? 0 : 1 }; diff --git a/lib/extract/extractGradient.js b/lib/extract/extractGradient.js index 9d333796..141d4ff8 100644 --- a/lib/extract/extractGradient.js +++ b/lib/extract/extractGradient.js @@ -1,12 +1,12 @@ -import {Children} from 'react'; -import _ from 'lodash'; -import Color from 'color'; +import { Children } from "react"; +import _ from "lodash"; +import Color from "color"; -import extractOpacity from './extractOpacity'; -import extractTransform from './extractTransform'; -import PATTERN_UNITS from '../PATTERN_UNITS'; -import percentToFloat from '../percentToFloat'; -import Stop from '../../elements/Stop'; +import extractOpacity from "./extractOpacity"; +import extractTransform from "./extractTransform"; +import PATTERN_UNITS from "../PATTERN_UNITS"; +import percentToFloat from "../percentToFloat"; +import Stop from "../../elements/Stop"; export default function(props) { if (!props.id) { @@ -22,20 +22,27 @@ export default function(props) { // add stop //noinspection JSUnresolvedFunction - stops[offset] = Color(child.props.stopColor).alpha(extractOpacity(child.props.stopOpacity)); + stops[offset] = Color(child.props.stopColor).alpha( + extractOpacity(child.props.stopOpacity) + ); } } else { - console.warn('`Gradient` elements only accept `Stop` elements as children'); + console.warn( + "`Gradient` elements only accept `Stop` elements as children" + ); } }); - const sorted = _.sortBy(_.map(stops, (stop, offset) => { - return {stop, offset}; - }), 'offset'); + const sorted = _.sortBy( + _.map(stops, (stop, offset) => { + return { stop, offset }; + }), + "offset" + ); const gradient = []; - sorted.forEach(({stop}) => { + sorted.forEach(({ stop }) => { let [r, g, b, a = 1] = stop.rgb().array(); gradient.push(r / 255); gradient.push(g / 255); @@ -43,8 +50,7 @@ export default function(props) { gradient.push(a); }); - gradient.push(...sorted.map(({offset}) => +offset)); - + gradient.push(...sorted.map(({ offset }) => +offset)); let gradientTransform; if (props.gradientTransform) { diff --git a/lib/extract/extractLengthList.js b/lib/extract/extractLengthList.js index 610a9fc8..40dc9f95 100644 --- a/lib/extract/extractLengthList.js +++ b/lib/extract/extractLengthList.js @@ -1,12 +1,15 @@ const spaceReg = /\s+/; const commaReg = /,/g; -export default function (lengthList) { - if (typeof lengthList === 'string') { - return lengthList.trim().replace(commaReg, ' ').split(spaceReg); - } else if (typeof lengthList === 'number') { +export default function(lengthList) { + if (typeof lengthList === "string") { + return lengthList + .trim() + .replace(commaReg, " ") + .split(spaceReg); + } else if (typeof lengthList === "number") { return [`${lengthList}`]; - } else if (lengthList && typeof lengthList.map === 'function') { + } else if (lengthList && typeof lengthList.map === "function") { return lengthList.map(d => `${d}`); } else { return []; diff --git a/lib/extract/extractOpacity.js b/lib/extract/extractOpacity.js index 864fc840..07c8f22e 100644 --- a/lib/extract/extractOpacity.js +++ b/lib/extract/extractOpacity.js @@ -1,4 +1,4 @@ -export default function (opacity) { +export default function(opacity) { const value = +opacity; - return (typeof value !== 'number' || isNaN(value)) ? 1 : value; + return typeof value !== "number" || isNaN(value) ? 1 : value; } diff --git a/lib/extract/extractPolyPoints.js b/lib/extract/extractPolyPoints.js index d3f1d503..7ff87fe4 100644 --- a/lib/extract/extractPolyPoints.js +++ b/lib/extract/extractPolyPoints.js @@ -1,4 +1,6 @@ - -export default function (polyPoints) { - return polyPoints.replace(/[^e]-/, ' -').split(/(?:\s+|\s*,\s*)/g).join(' '); +export default function(polyPoints) { + return polyPoints + .replace(/[^e]-/, " -") + .split(/(?:\s+|\s*,\s*)/g) + .join(" "); } diff --git a/lib/extract/extractProps.js b/lib/extract/extractProps.js index edd1ad33..aa138cd5 100644 --- a/lib/extract/extractProps.js +++ b/lib/extract/extractProps.js @@ -1,9 +1,9 @@ -import extractFill from './extractFill'; -import extractStroke from './extractStroke'; -import extractTransform, {props2transform} from './extractTransform'; -import extractClipPath from './extractClipPath'; -import extractResponder from './extractResponder'; -import extractOpacity from './extractOpacity'; +import extractFill from "./extractFill"; +import extractStroke from "./extractStroke"; +import extractTransform, { props2transform } from "./extractTransform"; +import extractClipPath from "./extractClipPath"; +import extractResponder from "./extractResponder"; +import extractOpacity from "./extractOpacity"; export default function(props, ref) { const styleProperties = []; diff --git a/lib/extract/extractResponder.js b/lib/extract/extractResponder.js index c15ced6e..a80822cb 100644 --- a/lib/extract/extractResponder.js +++ b/lib/extract/extractResponder.js @@ -1,13 +1,13 @@ -import {responderProps, touchableProps} from '../props'; -import _ from 'lodash'; +import { responderProps, touchableProps } from "../props"; +import _ from "lodash"; -export default function (props, ref) { +export default function(props, ref) { const extractedProps = {}; _.forEach(responderProps, (v, key) => { const value = props[key]; if (props[key]) { - if (!extractedProps.responsible && key !== 'pointerEvents') { + if (!extractedProps.responsible && key !== "pointerEvents") { extractedProps.responsible = true; } @@ -22,8 +22,10 @@ export default function (props, ref) { extractedProps.responsible = true; Object.assign(extractedProps, { - onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder, - onResponderTerminationRequest: ref.touchableHandleResponderTerminationRequest, + onStartShouldSetResponder: + ref.touchableHandleStartShouldSetResponder, + onResponderTerminationRequest: + ref.touchableHandleResponderTerminationRequest, onResponderGrant: ref.touchableHandleResponderGrant, onResponderMove: ref.touchableHandleResponderMove, onResponderRelease: ref.touchableHandleResponderRelease, diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js index 56b6426f..257df3b3 100644 --- a/lib/extract/extractStroke.js +++ b/lib/extract/extractStroke.js @@ -1,6 +1,6 @@ -import extractBrush from './extractBrush'; -import extractOpacity from './extractOpacity'; -import {strokeProps} from '../props'; +import extractBrush from "./extractBrush"; +import extractOpacity from "./extractOpacity"; +import { strokeProps } from "../props"; import extractLengthList from "./extractLengthList"; const caps = { @@ -18,19 +18,16 @@ const joins = { const strokeKeys = Object.keys(strokeProps); export default function(props, styleProperties) { - strokeKeys.forEach((name) => { + strokeKeys.forEach(name => { if (props.hasOwnProperty(name)) { styleProperties.push(name); } }); - const {stroke} = props; - let { - strokeWidth, - strokeDasharray - } = props; + const { stroke } = props; + let { strokeWidth, strokeDasharray } = props; - if (!strokeDasharray || strokeDasharray === 'none') { + if (!strokeDasharray || strokeDasharray === "none") { strokeDasharray = null; } else { // It's a list of comma and/or white space separated s @@ -38,12 +35,12 @@ export default function(props, styleProperties) { // If an odd number of values is provided, then the list of values is repeated // to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2. strokeDasharray = extractLengthList(strokeDasharray); - if (strokeDasharray && (strokeDasharray.length % 2) === 1) { + if (strokeDasharray && strokeDasharray.length % 2 === 1) { strokeDasharray = strokeDasharray.concat(strokeDasharray); } } - if (!strokeWidth || typeof strokeWidth !== 'string') { + if (!strokeWidth || typeof strokeWidth !== "string") { strokeWidth = `${strokeWidth || 1}`; } @@ -54,8 +51,7 @@ export default function(props, styleProperties) { strokeLinejoin: joins[props.strokeLinejoin] || 0, strokeDasharray: strokeDasharray, strokeWidth: strokeWidth, - strokeDashoffset: strokeDasharray ? (+props.strokeDashoffset || 0) : null, - strokeMiterlimit: props.strokeMiterlimit || 4, + strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null, + strokeMiterlimit: props.strokeMiterlimit || 4 }; - } diff --git a/lib/extract/extractText.js b/lib/extract/extractText.js index 1df21b13..ac3fe8c5 100644 --- a/lib/extract/extractText.js +++ b/lib/extract/extractText.js @@ -1,8 +1,8 @@ -import _ from 'lodash'; +import _ from "lodash"; //noinspection JSUnresolvedVariable -import React, {Children} from 'react'; -import TSpan from '../../elements/TSpan'; -import extractLengthList from './extractLengthList'; +import React, { Children } from "react"; +import TSpan from "../../elements/TSpan"; +import extractLengthList from "./extractLengthList"; const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?[ptexm%])*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i; const fontFamilyPrefix = /^[\s"']*/; @@ -15,9 +15,12 @@ function extractSingleFontFamily(fontFamilyString) { // SVG on the web allows for multiple font-families to be specified. // For compatibility, we extract the first font-family, hoping // we'll get a match. - return fontFamilyString ? fontFamilyString.split(commaReg)[0] - .replace(fontFamilyPrefix, '') - .replace(fontFamilySuffix, '') : null; + return fontFamilyString + ? fontFamilyString + .split(commaReg)[0] + .replace(fontFamilyPrefix, "") + .replace(fontFamilySuffix, "") + : null; } function parseFontString(font) { @@ -29,16 +32,16 @@ function parseFontString(font) { return null; } const fontFamily = extractSingleFontFamily(match[3]); - const fontSize = match[2] || '12'; + const fontSize = match[2] || "12"; const isBold = /bold/.exec(match[1]); const isItalic = /italic/.exec(match[1]); - const fontWeight = isBold ? 'bold' : 'normal'; - const fontStyle = isItalic ? 'italic' : 'normal'; + const fontWeight = isBold ? "bold" : "normal"; + const fontStyle = isItalic ? "italic" : "normal"; cachedFontObjectsFromString[font] = { fontSize, fontFamily, fontWeight, - fontStyle, + fontStyle }; return cachedFontObjectsFromString[font]; } @@ -56,35 +59,34 @@ export function extractFont(props) { wordSpacing, kerning, fontVariantLigatures, - fontFeatureSettings, - } = props; - let { - fontSize, - fontFamily, - font, + fontFeatureSettings } = props; + let { fontSize, fontFamily, font } = props; fontFamily = extractSingleFontFamily(fontFamily); - fontSize = fontSize ? '' + fontSize : null; + fontSize = fontSize ? "" + fontSize : null; - const ownedFont = _.pickBy({ - fontData, - fontStyle, - fontVariant, - fontWeight, - fontStretch, - fontSize, - fontFamily, - textAnchor, - textDecoration, - letterSpacing, - wordSpacing, - kerning, - fontVariantLigatures, - fontFeatureSettings, - }, prop => !_.isNil(prop)); + const ownedFont = _.pickBy( + { + fontData, + fontStyle, + fontVariant, + fontWeight, + fontStretch, + fontSize, + fontFamily, + textAnchor, + textDecoration, + letterSpacing, + wordSpacing, + kerning, + fontVariantLigatures, + fontFeatureSettings + }, + prop => !_.isNil(prop) + ); - if (typeof font === 'string') { + if (typeof font === "string") { font = parseFontString(font); } @@ -99,12 +101,9 @@ export default function(props, container) { dy, alignmentBaseline, baselineShift, - verticalAlign, - } = props; - let { - rotate, - children + verticalAlign } = props; + let { rotate, children } = props; const positionX = extractLengthList(x); const positionY = extractLengthList(y); @@ -113,7 +112,7 @@ export default function(props, container) { rotate = extractLengthList(rotate); let content = null; - if (typeof children === 'string' || typeof children === 'number') { + if (typeof children === "string" || typeof children === "number") { const childrenString = children.toString(); if (container) { children = {childrenString}; @@ -123,7 +122,7 @@ export default function(props, container) { } } else if (Children.count(children) > 1 || Array.isArray(children)) { children = Children.map(children, child => { - if (typeof child === 'string' || typeof child === 'number') { + if (typeof child === "string" || typeof child === "number") { return {child.toString()}; } else { return child; @@ -144,6 +143,6 @@ export default function(props, container) { deltaY, alignmentBaseline, baselineShift, - verticalAlign, + verticalAlign }; } diff --git a/lib/extract/extractTransform.js b/lib/extract/extractTransform.js index 01167332..0d68265f 100644 --- a/lib/extract/extractTransform.js +++ b/lib/extract/extractTransform.js @@ -1,7 +1,7 @@ -import Matrix2D from '../Matrix2D'; -import _ from 'lodash'; +import Matrix2D from "../Matrix2D"; +import _ from "lodash"; let pooledMatrix = new Matrix2D(); -import peg from 'pegjs'; +import peg from "pegjs"; function transformToMatrix(props, transform) { pooledMatrix.reset(); @@ -172,7 +172,7 @@ wsp function appendTransform(transform) { if (transform) { - if (typeof transform === 'string') { + if (typeof transform === "string") { try { const [a, c, e, b, d, f] = transformParser.parse(transform); pooledMatrix.append(...[a, b, c, d, e, f]); @@ -180,17 +180,17 @@ function appendTransform(transform) { console.error(e); } } else { - pooledMatrix - .appendTransform( - transform.x + transform.originX, - transform.y + transform.originY, - transform.scaleX, transform.scaleY, - transform.rotation, - transform.skewX, - transform.skewY, - transform.originX, - transform.originY - ); + pooledMatrix.appendTransform( + transform.x + transform.originX, + transform.y + transform.originY, + transform.scaleX, + transform.scaleY, + transform.rotation, + transform.skewX, + transform.skewY, + transform.originX, + transform.originY + ); } } } @@ -204,7 +204,7 @@ function universal2axis(universal, axisX, axisY, defaultValue) { if (coords.length === 2) { x = +coords[0]; y = +coords[1]; - } else if　(coords.length === 1)　{ + } else if (coords.length === 1) { x = y = +coords[0]; } } else if (_.isNumber(universal)) { @@ -225,16 +225,25 @@ function universal2axis(universal, axisX, axisY, defaultValue) { } export function props2transform(props) { - if (props && (typeof props === 'string')) { - return props; + if (props && typeof props === "string") { + return props; } - let [originX, originY] = universal2axis(props.origin, props.originX, props.originY); - let [scaleX, scaleY] = universal2axis(props.scale, props.scaleX, props.scaleY, 1); + let [originX, originY] = universal2axis( + props.origin, + props.originX, + props.originY + ); + let [scaleX, scaleY] = universal2axis( + props.scale, + props.scaleX, + props.scaleY, + 1 + ); let [skewX, skewY] = universal2axis(props.skew, props.skewX, props.skewY); let [translateX, translateY] = universal2axis( props.translate, - _.isNil(props.translateX) ? (props.x || 0) : props.translateX, - _.isNil(props.translateY) ? (props.y || 0) : props.translateY + _.isNil(props.translateX) ? props.x || 0 : props.translateX, + _.isNil(props.translateY) ? props.y || 0 : props.translateY ); return { @@ -250,6 +259,9 @@ export function props2transform(props) { }; } -export default function (props) { - return transformToMatrix(props2transform(props), props.transform ? props2transform(props.transform) : null); +export default function(props) { + return transformToMatrix( + props2transform(props), + props.transform ? props2transform(props.transform) : null + ); } diff --git a/lib/extract/extractViewBox.js b/lib/extract/extractViewBox.js index af2dbaab..d5e5e300 100644 --- a/lib/extract/extractViewBox.js +++ b/lib/extract/extractViewBox.js @@ -5,10 +5,16 @@ const meetOrSliceTypes = { }; const alignEnum = [ - 'xMinYMin', 'xMidYMin', 'xMaxYMin', - 'xMinYMid', 'xMidYMid', 'xMaxYMid', - 'xMinYMax', 'xMidYMax', 'xMaxYMax', - 'none' + "xMinYMin", + "xMidYMin", + "xMaxYMin", + "xMinYMid", + "xMidYMid", + "xMaxYMid", + "xMinYMax", + "xMidYMax", + "xMaxYMax", + "none" ].reduce((prev, name) => { prev[name] = name; return prev; @@ -16,8 +22,8 @@ const alignEnum = [ const spacesRegExp = /\s+/; -export default function (props) { - const {viewBox, preserveAspectRatio} = props; +export default function(props) { + const { viewBox, preserveAspectRatio } = props; if (!viewBox) { return null; @@ -25,15 +31,17 @@ export default function (props) { let params = viewBox.trim().split(spacesRegExp); - if (params.length === 4 && params.every(param => !isNaN(+params))) { - console.warn('Invalid `viewBox` prop:' + viewBox); + if (params.length === 4 && params.every(param => !isNaN(+params))) { + console.warn("Invalid `viewBox` prop:" + viewBox); return null; } - let modes = preserveAspectRatio ? preserveAspectRatio.trim().split(spacesRegExp) : []; + let modes = preserveAspectRatio + ? preserveAspectRatio.trim().split(spacesRegExp) + : []; let meetOrSlice = meetOrSliceTypes[modes[1]] || 0; - let align = alignEnum[modes[0]] || 'xMidYMid'; + let align = alignEnum[modes[0]] || "xMidYMid"; return { minX: +params[0], @@ -45,7 +53,4 @@ export default function (props) { }; } -export { - meetOrSliceTypes, - alignEnum -}; +export { meetOrSliceTypes, alignEnum }; diff --git a/lib/percentToFloat.js b/lib/percentToFloat.js index 14bb5afd..3886fad6 100644 --- a/lib/percentToFloat.js +++ b/lib/percentToFloat.js @@ -1,8 +1,10 @@ let percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/; -export default function (percent) { +export default function(percent) { let matched = percent.match(percentReg); if (!matched) { - console.warn(`\`${percent}\` is not a valid number or percentage string.`); + console.warn( + `\`${percent}\` is not a valid number or percentage string.` + ); return 0; } diff --git a/lib/props.js b/lib/props.js index 251424ce..a39e071e 100644 --- a/lib/props.js +++ b/lib/props.js @@ -1,8 +1,11 @@ -import PropTypes from 'prop-types'; -import {PanResponder} from 'react-native'; +import PropTypes from "prop-types"; +import { PanResponder } from "react-native"; const numberProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); -const numberArrayProp = PropTypes.oneOfType([PropTypes.arrayOf(numberProp), numberProp]); +const numberArrayProp = PropTypes.oneOfType([ + PropTypes.arrayOf(numberProp), + numberProp +]); const touchableProps = { disabled: PropTypes.bool, @@ -15,9 +18,9 @@ const touchableProps = { delayLongPress: PropTypes.number }; -const responderProps = [ +const responderProps = [ ...Object.keys(PanResponder.create({}).panHandlers), - 'pointerEvents' + "pointerEvents" ].reduce((props, name) => { props[name] = PropTypes.func; return props; @@ -26,11 +29,11 @@ const responderProps = [ const fillProps = { fill: PropTypes.string, fillOpacity: numberProp, - fillRule: PropTypes.oneOf(['evenodd', 'nonzero']) + fillRule: PropTypes.oneOf(["evenodd", "nonzero"]) }; const clipProps = { - clipRule: PropTypes.oneOf(['evenodd', 'nonzero']), + clipRule: PropTypes.oneOf(["evenodd", "nonzero"]), clipPath: PropTypes.string }; @@ -44,8 +47,8 @@ const strokeProps = { strokeOpacity: numberProp, strokeDasharray: numberArrayProp, strokeDashoffset: numberProp, - strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']), - strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']), + strokeLinecap: PropTypes.oneOf(["butt", "square", "round"]), + strokeLinejoin: PropTypes.oneOf(["miter", "bevel", "round"]), strokeMiterlimit: numberProp }; @@ -81,19 +84,45 @@ const pathProps = { // normal | italic | oblique | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style -const fontStyle = PropTypes.oneOf(['normal', 'italic', 'oblique']); +const fontStyle = PropTypes.oneOf(["normal", "italic", "oblique"]); // normal | small-caps | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-variant -const fontVariant = PropTypes.oneOf(['normal', 'small-caps']); +const fontVariant = PropTypes.oneOf(["normal", "small-caps"]); // normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight -const fontWeight = PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900']); +const fontWeight = PropTypes.oneOf([ + "normal", + "bold", + "bolder", + "lighter", + "100", + "200", + "300", + "400", + "500", + "600", + "700", + "800", + "900" +]); // normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-stretch -const fontStretch = PropTypes.oneOf(['normal', 'wider', 'narrower', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded']); +const fontStretch = PropTypes.oneOf([ + "normal", + "wider", + "narrower", + "ultra-condensed", + "extra-condensed", + "condensed", + "semi-condensed", + "semi-expanded", + "expanded", + "extra-expanded", + "ultra-expanded" +]); // | | | | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size @@ -125,11 +154,17 @@ const font = PropTypes.object; // start | middle | end | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor -const textAnchor = PropTypes.oneOf(['start', 'middle', 'end']); +const textAnchor = PropTypes.oneOf(["start", "middle", "end"]); // none | underline | overline | line-through | blink | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration -const textDecoration = PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'blink']); +const textDecoration = PropTypes.oneOf([ + "none", + "underline", + "overline", + "line-through", + "blink" +]); // normal | | inherit // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing @@ -164,7 +199,7 @@ Value: normal | none | [ || ||