From c83c9962c9fa2f11178c3f7550a74b5aca22f68f Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Sun, 6 Oct 2019 21:56:24 +0200 Subject: [PATCH 1/3] make eslint catch formatting problems --- .eslintrc | 6 ++++-- package.json | 8 +++---- yarn.lock | 59 ++++++++++++++++++++++++---------------------------- 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/.eslintrc b/.eslintrc index e3856da..e4b3542 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,7 @@ "extends": [ "standard", "standard-react", - "prettier", + "plugin:prettier/recommended", "plugin:flowtype/recommended" ], "parser": "babel-eslint", @@ -28,5 +28,7 @@ "beforeEach": true, "window": true }, - "rules": {} + "rules": { + "prettier/prettier": "error" + } } diff --git a/package.json b/package.json index 55ddabb..7575164 100644 --- a/package.json +++ b/package.json @@ -51,14 +51,14 @@ "cypress-image-snapshot": "3.1.1", "enzyme": "3.7.0", "enzyme-adapter-react-16": "1.6.0", - "eslint": "6.2.1", - "eslint-config-prettier": "3.1.0", + "eslint": "6.5.1", + "eslint-config-prettier": "6.4.0", "eslint-config-standard": "12.0.0", "eslint-config-standard-react": "7.0.2", "eslint-plugin-flowtype": "3.2.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-node": "^6.0.1", - "eslint-plugin-prettier": "3.0.0", + "eslint-plugin-prettier": "3.1.1", "eslint-plugin-promise": "^3.6.0", "eslint-plugin-react": "7.7.0", "eslint-plugin-standard": "^3.0.1", @@ -66,7 +66,7 @@ "gh-pages": "2.0.1", "html-webpack-plugin": "3.2.0", "jest": "24.9.0", - "prettier": "1.10.2", + "prettier": "1.18.2", "react": "^16.6.3", "react-dom": "^16.6.3", "react-test-renderer": "^16.6.3", diff --git a/yarn.lock b/yarn.lock index 43f3092..8594483 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1233,10 +1233,10 @@ acorn-globals@^4.1.0: acorn "^6.0.1" acorn-walk "^6.0.1" -acorn-jsx@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.0.tgz#958584ddb60990c02c97c1bd9d521fce433bb101" - integrity sha512-XkB50fn0MURDyww9+UYL3c1yLbOBz0ZFvrdYlGB8l+Ije1oSC75qAqrzSPjYQbdnQUzhlUGNKuesryAv0gxZOg== +acorn-jsx@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.2.tgz#84b68ea44b373c4f8686023a551f61a21b7c4a4f" + integrity sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw== acorn-walk@^6.0.1: version "6.1.0" @@ -3266,10 +3266,10 @@ escodegen@^1.9.1: optionalDependencies: source-map "~0.6.1" -eslint-config-prettier@3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-3.1.0.tgz#2c26d2cdcfa3a05f0642cd7e6e4ef3316cdabfa2" - integrity sha512-QYGfmzuc4q4J6XIhlp8vRKdI/fI0tQfQPy1dME3UOLprE+v4ssH/3W9LM2Q7h5qBcy5m0ehCrBDU2YF8q6OY8w== +eslint-config-prettier@6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.4.0.tgz#0a04f147e31d33c6c161b2dd0971418ac52d0477" + integrity sha512-YrKucoFdc7SEko5Sxe4r6ixqXPDP1tunGw91POeZTTRKItf/AMFYt/YLEQtZMkR2LVpAVhcAcZgcWpm1oGPW7w== dependencies: get-stdin "^6.0.0" @@ -3339,10 +3339,10 @@ eslint-plugin-node@^6.0.1: resolve "^1.3.3" semver "^5.4.1" -eslint-plugin-prettier@3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.0.tgz#f6b823e065f8c36529918cdb766d7a0e975ec30c" - integrity sha512-4g11opzhqq/8+AMmo5Vc2Gn7z9alZ4JqrbZ+D4i8KlSyxeQhZHlmIrY8U9Akf514MoEhogPa87Jgkq87aZ2Ohw== +eslint-plugin-prettier@3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba" + integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA== dependencies: prettier-linter-helpers "^1.0.0" @@ -3407,10 +3407,10 @@ eslint-visitor-keys@^1.1.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2" integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A== -eslint@6.2.1: - version "6.2.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.2.1.tgz#66c2e4fe8b6356b9f01e828adc3ad04030122df1" - integrity sha512-ES7BzEzr0Q6m5TK9i+/iTpKjclXitOdDK4vT07OqbkBT2/VcN/gO9EL1C4HlK3TAOXYv2ItcmbVR9jO1MR0fJg== +eslint@6.5.1: + version "6.5.1" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.5.1.tgz#828e4c469697d43bb586144be152198b91e96ed6" + integrity sha512-32h99BoLYStT1iq1v2P9uwpyznQ4M2jRiFB6acitKz52Gqn+vPaMDUTB1bYi1WN4Nquj2w+t+bimYUG83DC55A== dependencies: "@babel/code-frame" "^7.0.0" ajv "^6.10.0" @@ -3421,7 +3421,7 @@ eslint@6.2.1: eslint-scope "^5.0.0" eslint-utils "^1.4.2" eslint-visitor-keys "^1.1.0" - espree "^6.1.0" + espree "^6.1.1" esquery "^1.0.1" esutils "^2.0.2" file-entry-cache "^5.0.1" @@ -3450,13 +3450,13 @@ eslint@6.2.1: text-table "^0.2.0" v8-compile-cache "^2.0.3" -espree@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.0.tgz#a1e8aa65bf29a331d70351ed814a80e7534e0884" - integrity sha512-boA7CHRLlVWUSg3iL5Kmlt/xT3Q+sXnKoRYYzj1YeM10A76TEJBbotV5pKbnK42hEUIr121zTv+QLRM5LsCPXQ== +espree@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.1.tgz#7f80e5f7257fc47db450022d723e356daeb1e5de" + integrity sha512-EYbr8XZUhWbYCqQRW0duU5LxzL5bETN6AjKBGy1302qqzPaCH10QbRg3Wvco79Z8x9WbiE8HYB4e75xl6qUYvQ== dependencies: acorn "^7.0.0" - acorn-jsx "^5.0.0" + acorn-jsx "^5.0.2" eslint-visitor-keys "^1.1.0" esprima@^3.1.3: @@ -6005,12 +6005,7 @@ lodash.sortby@^4.7.0: resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= -lodash@4.17.15, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.4: - version "4.17.15" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" - integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== - -lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15: +lodash@4.17.15, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -7329,10 +7324,10 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@1.10.2: - version "1.10.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93" - integrity sha512-TcdNoQIWFoHblurqqU6d1ysopjq7UX0oRcT/hJ8qvBAELiYWn+Ugf0AXdnzISEJ7vuhNnQ98N8jR8Sh53x4IZg== +prettier@1.18.2: + version "1.18.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" + integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== pretty-error@^2.0.2: version "2.1.1" From 69d7e60f72305e831e13aa8618cad9cdfd16a292 Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Sun, 6 Oct 2019 21:57:25 +0200 Subject: [PATCH 2/3] reformat library sources --- .prettierrc | 1 + src/ArcherContainer.js | 66 ++++++++++++++++--------------------- src/ArcherContainer.test.js | 14 ++------ src/ArcherElement.js | 29 ++++++++-------- src/ArcherElement.test.js | 38 ++++++++++----------- src/SvgArrow.js | 29 +++++++--------- src/SvgArrow.test.js | 40 ++++------------------ 7 files changed, 82 insertions(+), 135 deletions(-) diff --git a/.prettierrc b/.prettierrc index 3d031d2..7469da7 100644 --- a/.prettierrc +++ b/.prettierrc @@ -2,5 +2,6 @@ "trailingComma": "all", "singleQuote": true, "semi": true, + "printWidth": 100, "bracketSpacing": true, } diff --git a/src/ArcherContainer.js b/src/ArcherContainer.js index 2a92355..bed84ce 100644 --- a/src/ArcherContainer.js +++ b/src/ArcherContainer.js @@ -27,7 +27,7 @@ type State = { [string]: HTMLElement, }, sourceToTargetsMap: { - [string]: SourceToTargetsArrayType + [string]: SourceToTargetsArrayType, }, observer: ResizeObserver, parent: ?HTMLElement, @@ -70,9 +70,7 @@ export type ArcherContainerContextType = { unregisterTransitions?: string => void, }; -const ArcherContainerContext = React.createContext( - {}, -); +const ArcherContainerContext = React.createContext({}); export const ArcherContainerContextProvider = ArcherContainerContext.Provider; export const ArcherContainerContextConsumer = ArcherContainerContext.Consumer; @@ -158,28 +156,28 @@ export class ArcherContainer extends React.Component { if (!rect) { return new Point(0, 0); } - const absolutePosition = computeCoordinatesFromAnchorPosition( - position, - rect, - ); + const absolutePosition = computeCoordinatesFromAnchorPosition(position, rect); return absolutePosition.substract(parentCoordinates); }; - registerTransitions = (elementId: string, newSourceToTargets: Array): void => { + registerTransitions = ( + elementId: string, + newSourceToTargets: Array, + ): void => { this.setState((prevState: State) => ({ sourceToTargetsMap: { ...prevState.sourceToTargetsMap, - [elementId]: newSourceToTargets + [elementId]: newSourceToTargets, }, })); }; unregisterTransitions = (elementId: string): void => { - this.setState((currentState) => { - const sourceToTargetsMapCopy = { ...(currentState.sourceToTargetsMap) }; + this.setState(currentState => { + const sourceToTargetsMapCopy = { ...currentState.sourceToTargetsMap }; delete sourceToTargetsMapCopy[elementId]; - return { sourceToTargetsMap: sourceToTargetsMapCopy } + return { sourceToTargetsMap: sourceToTargetsMapCopy }; }); }; @@ -196,9 +194,9 @@ export class ArcherContainer extends React.Component { unregisterChild = (id: string): void => { this.setState((currentState: State) => { currentState.observer.unobserve(currentState.refs[id]); - const newRefs = { ...(currentState.refs) }; + const newRefs = { ...currentState.refs }; delete newRefs[id]; - return { refs: newRefs } + return { refs: newRefs }; }); }; @@ -206,7 +204,9 @@ export class ArcherContainer extends React.Component { const { sourceToTargetsMap } = this.state; // Object.values is unavailable in IE11 - const jaggedSourceToTargets: JaggedSourceToTargetsArrayType = Object.keys(sourceToTargetsMap).map((key: string) => sourceToTargetsMap[key]); + const jaggedSourceToTargets: JaggedSourceToTargetsArrayType = Object.keys( + sourceToTargetsMap, + ).map((key: string) => sourceToTargetsMap[key]); // Flatten return [].concat.apply([], jaggedSourceToTargets); @@ -216,17 +216,13 @@ export class ArcherContainer extends React.Component { const parentCoordinates = this.getParentCoordinates(); return this.getSourceToTargets().map(({ source, target, label, style }: SourceToTargetType) => { - const strokeColor = - (style && style.strokeColor) || this.props.strokeColor; + const strokeColor = (style && style.strokeColor) || this.props.strokeColor; - const arrowLength = - (style && style.arrowLength) || this.props.arrowLength; + const arrowLength = (style && style.arrowLength) || this.props.arrowLength; - const strokeWidth = - (style && style.strokeWidth) || this.props.strokeWidth; + const strokeWidth = (style && style.strokeWidth) || this.props.strokeWidth; - const arrowThickness = - (style && style.arrowThickness) || this.props.arrowThickness; + const arrowThickness = (style && style.arrowThickness) || this.props.arrowThickness; const startingAnchor = source.anchor; const startingPoint = this.getPointCoordinatesFromAnchorPosition( @@ -274,18 +270,13 @@ export class ArcherContainer extends React.Component { * */ generateAllArrowMarkers = (): React$Node => { return this.getSourceToTargets().map(({ source, target, label, style }: SourceToTargetType) => { + const strokeColor = (style && style.strokeColor) || this.props.strokeColor; - const strokeColor = - (style && style.strokeColor) || this.props.strokeColor; - - const arrowLength = - (style && style.arrowLength) || this.props.arrowLength; + const arrowLength = (style && style.arrowLength) || this.props.arrowLength; - const arrowThickness = - (style && style.arrowThickness) || this.props.arrowThickness; + const arrowThickness = (style && style.arrowThickness) || this.props.arrowThickness; - const arrowPath = `M0,0 L0,${arrowThickness} L${arrowLength - - 1},${arrowThickness / 2} z`; + const arrowPath = `M0,0 L0,${arrowThickness} L${arrowLength - 1},${arrowThickness / 2} z`; return ( { unregisterChild: this.unregisterChild, }} > -
+
{this.generateAllArrowMarkers()} {SvgArrows} -
{this.props.children}
+
+ {this.props.children} +
); diff --git a/src/ArcherContainer.test.js b/src/ArcherContainer.test.js index 9f0162f..65abadc 100644 --- a/src/ArcherContainer.test.js +++ b/src/ArcherContainer.test.js @@ -70,9 +70,7 @@ describe('ArcherContainer', () => { const markerProps = marker.props(); const expectedProps = { - id: `${ - wrapper.instance().arrowMarkerUniquePrefix - }first-elementsecond-element`, + id: `${wrapper.instance().arrowMarkerUniquePrefix}first-elementsecond-element`, markerWidth: 10, markerHeight: 30, refX: '0', @@ -149,17 +147,11 @@ describe('ArcherContainer', () => { const wrapper: ShallowWrapper = shallowRenderAndSetState(); - expect(global.window.addEventListener).toBeCalledWith( - 'resize', - expect.anything(), - ); + expect(global.window.addEventListener).toBeCalledWith('resize', expect.anything()); wrapper.unmount(); - expect(global.window.removeEventListener).toBeCalledWith( - 'resize', - expect.anything(), - ); + expect(global.window.removeEventListener).toBeCalledWith('resize', expect.anything()); }); }); }); diff --git a/src/ArcherElement.js b/src/ArcherElement.js index 383830c..ebd2bc6 100644 --- a/src/ArcherElement.js +++ b/src/ArcherElement.js @@ -3,10 +3,7 @@ import React from 'react'; import isEqual from 'react-fast-compare'; -import { - type ArcherContainerContextType, - ArcherContainerContextConsumer, -} from './ArcherContainer'; +import { type ArcherContainerContextType, ArcherContainerContextConsumer } from './ArcherContainer'; type OuterProps = { id: string, @@ -50,29 +47,31 @@ export class ArcherElementNoContext extends React.Component { if (!this.props.context.registerTransitions) { throw new Error( `Could not find "registerTransition" in the context of ` + - `. Wrap the component in a .` + `. Wrap the component in a .`, ); } this.props.context.registerTransitions(this.props.id, newSourceToTarget); - } + }; generateSourceToTarget = (relations: Array): Array => { const { id } = this.props; - return relations.map(({ targetId, sourceAnchor, targetAnchor, label, style }: RelationType) => ({ - source: { id, anchor: sourceAnchor }, - target: { id: targetId, anchor: targetAnchor }, - label, - style, - })); + return relations.map( + ({ targetId, sourceAnchor, targetAnchor, label, style }: RelationType) => ({ + source: { id, anchor: sourceAnchor }, + target: { id: targetId, anchor: targetAnchor }, + label, + style, + }), + ); }; unregisterTransitions = () => { if (!this.props.context.unregisterTransitions) { throw new Error( `Could not find "unregisterTransitions" in the context of ` + - `. Wrap the component in a .` + `. Wrap the component in a .`, ); } @@ -84,7 +83,7 @@ export class ArcherElementNoContext extends React.Component { if (!this.props.context.registerChild) { throw new Error( `Could not find "registerChild" in the context of ` + - `. Wrap the component in a .` + `. Wrap the component in a .`, ); } @@ -95,7 +94,7 @@ export class ArcherElementNoContext extends React.Component { if (!this.props.context.unregisterChild) { throw new Error( `Could not find "unregisterChild" in the context of ` + - `. Wrap the component in a .` + `. Wrap the component in a .`, ); } diff --git a/src/ArcherElement.test.js b/src/ArcherElement.test.js index d4567b2..9a4b408 100644 --- a/src/ArcherElement.test.js +++ b/src/ArcherElement.test.js @@ -23,14 +23,14 @@ describe('ArcherElement', () => { registerChild: Function, unregisterChild: Function, children: React.Node, - } + }; const MockArcherContainer = ({ registerTransitions, unregisterTransitions, registerChild, unregisterChild, - children + children, }: MockArcherContainerType) => ( { const mountContainer = ( relations: Array, - newRelations: Array + newRelations: Array, ): ReactWrapper => { const props = { ...defaultProps, id: 'foo' }; @@ -78,7 +78,7 @@ describe('ArcherElement', () => { unregisterTransitions={unregisterTransitionsMock} > - + , ); }; @@ -111,9 +111,7 @@ describe('ArcherElement', () => { describe('lifecycle', () => { it('should call registerTransitions with sourceToTargets on update', () => { const relations = []; - const newRelations = [ - { targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }, - ]; + const newRelations = [{ targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }]; const sourceToTargets = [ { @@ -121,13 +119,16 @@ describe('ArcherElement', () => { target: { id: 'toto', anchor: 'top' }, label: undefined, style: undefined, - } + }, ]; const wrapper: ReactWrapper = mountContainer(relations, newRelations); // Trigger update in ArcherElement - wrapper.find(PassThrough).find('div.foo').simulate('click'); + wrapper + .find(PassThrough) + .find('div.foo') + .simulate('click'); wrapper.update(); @@ -135,12 +136,8 @@ describe('ArcherElement', () => { }); it('should not call registerTransitions on update if relation exists', () => { - const relations = [ - { targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }, - ]; - const newRelations = [ - { targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }, - ]; + const relations = [{ targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }]; + const newRelations = [{ targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }]; const wrapper: ReactWrapper = mountContainer(relations, newRelations); @@ -148,7 +145,10 @@ describe('ArcherElement', () => { registerTransitionsMock.mockReset(); // Trigger update in ArcherElement - wrapper.find(PassThrough).find('div.foo').simulate('click'); + wrapper + .find(PassThrough) + .find('div.foo') + .simulate('click'); wrapper.update(); @@ -156,9 +156,7 @@ describe('ArcherElement', () => { }); it('should call registerTransitions with sourceToTargets on mount if relations', () => { - const relations = [ - { targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }, - ]; + const relations = [{ targetId: 'toto', targetAnchor: 'top', sourceAnchor: 'left' }]; const sourceToTargets = [ { @@ -166,7 +164,7 @@ describe('ArcherElement', () => { target: { id: 'toto', anchor: 'top' }, label: undefined, style: undefined, - } + }, ]; const wrapper: ReactWrapper = mountContainer(relations, []); diff --git a/src/SvgArrow.js b/src/SvgArrow.js index fb9ca23..d350e29 100644 --- a/src/SvgArrow.js +++ b/src/SvgArrow.js @@ -138,26 +138,13 @@ const SvgArrow = ({ ); const { xe, ye } = endingPointWithArrow; - const startingPosition = computeStartingAnchorPosition( - xs, - ys, - xe, - ye, - startingAnchor, - ); + const startingPosition = computeStartingAnchorPosition(xs, ys, xe, ye, startingAnchor); const { xa1, ya1 } = startingPosition; - const endingPosition = computeEndingAnchorPosition( - xs, - ys, - xe, - ye, - endingAnchor, - ); + const endingPosition = computeEndingAnchorPosition(xs, ys, xe, ye, endingAnchor); const { xa2, ya2 } = endingPosition; - const pathString = - `M${xs},${ys} ` + `C${xa1},${ya1} ${xa2},${ya2} ` + `${xe},${ye}`; + const pathString = `M${xs},${ys} ` + `C${xa1},${ya1} ${xa2},${ya2} ` + `${xe},${ye}`; const { xl, yl, wl, hl } = computeLabelDimensions(xs, ys, xe, ye); @@ -169,14 +156,20 @@ const SvgArrow = ({ markerEnd={`url(${location.href}#${arrowMarkerId})`} /> {arrowLabel && ( - +
{arrowLabel}
diff --git a/src/SvgArrow.test.js b/src/SvgArrow.test.js index 06fcd09..6054788 100644 --- a/src/SvgArrow.test.js +++ b/src/SvgArrow.test.js @@ -59,16 +59,8 @@ describe('SvgArrow', () => { ]; dataSet.forEach(data => { - it(`should compute coordinates of destination point excluding the arrow [data ${ - data.message - }]`, () => { - const { - xEnd, - yEnd, - arrowLength, - strokeWidth, - endingAnchor, - } = data.input; + it(`should compute coordinates of destination point excluding the arrow [data ${data.message}]`, () => { + const { xEnd, yEnd, arrowLength, strokeWidth, endingAnchor } = data.input; const result = computeEndingPointAccordingToArrow( xEnd, yEnd, @@ -108,17 +100,9 @@ describe('SvgArrow', () => { ]; dataSet.forEach(data => { - it(`should compute coordinates of source element's anchor [data ${ - data.message - }]`, () => { + it(`should compute coordinates of source element's anchor [data ${data.message}]`, () => { const { xStart, yStart, xEnd, yEnd, endingAnchor } = data.input; - const result = computeStartingAnchorPosition( - xStart, - yStart, - xEnd, - yEnd, - endingAnchor, - ); + const result = computeStartingAnchorPosition(xStart, yStart, xEnd, yEnd, endingAnchor); expect(result).toEqual(data.expected); }); }); @@ -151,17 +135,9 @@ describe('SvgArrow', () => { ]; dataSet.forEach(data => { - it(`should compute coordinates of destination element's anchor [data ${ - data.message - }]`, () => { + it(`should compute coordinates of destination element's anchor [data ${data.message}]`, () => { const { xStart, yStart, xEnd, yEnd, endingAnchor } = data.input; - const result = computeEndingAnchorPosition( - xStart, - yStart, - xEnd, - yEnd, - endingAnchor, - ); + const result = computeEndingAnchorPosition(xStart, yStart, xEnd, yEnd, endingAnchor); expect(result).toEqual(data.expected); }); }); @@ -204,9 +180,7 @@ describe('SvgArrow', () => { ]; dataSet.forEach(data => { - it(`should compute coordinates of label foreignObject [data ${ - data.message - }]`, () => { + it(`should compute coordinates of label foreignObject [data ${data.message}]`, () => { const { xStart, yStart, xEnd, yEnd } = data.input; const result = computeLabelDimensions(xStart, yStart, xEnd, yEnd); expect(result).toEqual(data.expected); From 94c0bbcfab709ce7a760daa912f5cae8e1186f1e Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Sun, 6 Oct 2019 21:58:28 +0200 Subject: [PATCH 3/3] reformat example sources --- example/FirstExample.js | 42 +++++++++++++++++++++++----------------- example/SecondExample.js | 7 ++----- example/index.js | 4 +--- package.json | 2 +- 4 files changed, 28 insertions(+), 27 deletions(-) diff --git a/example/FirstExample.js b/example/FirstExample.js index c7bf065..1a4e44f 100644 --- a/example/FirstExample.js +++ b/example/FirstExample.js @@ -17,11 +17,13 @@ const FirstExample = () => {
Root
 @@ -30,13 +32,15 @@ const FirstExample = () => {
Arrow 2
, - }]} + relations={[ + { + targetId: 'element3', + targetAnchor: 'left', + sourceAnchor: 'right', + style: { strokeColor: 'blue', strokeWidth: 1 }, + label:
Arrow 2
, + }, + ]} >
Element 2
@@ -47,12 +51,14 @@ const FirstExample = () => {
Element 4
 diff --git a/example/SecondExample.js b/example/SecondExample.js index a55a87f..34ae477 100644 --- a/example/SecondExample.js +++ b/example/SecondExample.js @@ -30,17 +30,14 @@ class SecondExample extends React.Component {
Add elements