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.

Sign up for GitHub

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

getShapeFromStyle should read shape properties before taking 'arrow' … #202

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

getShapeFromStyle should read shape properties before taking 'arrow' … #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 20 additions & 12 deletions src/ArcherContainer/ArcherContainer.helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
import {
ValidShapeTypes,
EntityRelationType,
LineType,
SourceToTargetType,
ShapeType,
EntityRelationType,
SourceToTargetType,
ValidShapeTypes,
} from '../types';
import { SourceToTargetsArrayType } from './ArcherContainer.types';

const possibleShapes: Array<ValidShapeTypes> = ['arrow', 'circle'];

export const getEndShapeFromStyle = (shapeObj: LineType) => {
if (!shapeObj.endShape) {
return possibleShapes[0];
export const getEndShapeFromStyle = (shapeObj: LineType, shape: ShapeType) => {
if (shapeObj.endShape) {
const validShape = (Object.keys(shapeObj.endShape) as ValidShapeTypes[]).find((key) => {
return possibleShapes.includes(key);
});

if (validShape) {
return validShape;
}
}

return (
(Object.keys(shapeObj.endShape) as ValidShapeTypes[]).filter((key) =>
possibleShapes.includes(key),
)[0] || possibleShapes[0]
);
if (shape.arrow) {
return 'arrow';
} else if (shape.circle) {
return 'circle';
}

return possibleShapes[0];
};

export const getSourceToTargets = (
Expand All @@ -35,7 +43,7 @@ export const getSourceToTargets = (
};

export const createShapeObj = (style: LineType, endShape: ShapeType) => {
const chosenEndShape = getEndShapeFromStyle(style);
const chosenEndShape = getEndShapeFromStyle(style, endShape);
const shapeObjMap = {
arrow: () => ({
arrow: {
Expand Down
33 changes: 30 additions & 3 deletions src/ArcherContainer/__tests__/ArcherContainer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { render } from '@testing-library/react';
import ArcherContainer from '../ArcherContainer';
import ArcherElement from '../../ArcherElement/ArcherElement';
import React from 'react';
import { act } from 'react-dom/test-utils';
import ArcherElement from '../../ArcherElement/ArcherElement';
import ArcherContainer from '../ArcherContainer';

const originalConsoleWarn = console.warn;

Expand Down Expand Up @@ -89,6 +89,33 @@ describe('ArcherContainer', () => {
expect(screen.baseElement).toMatchSnapshot();
});

it('should render the arrow with a circle end when provided in the container', () => {
const screen = render(
<ArcherContainer
endShape={{
circle: { radius: 11, strokeWidth: 2, strokeColor: 'tomato', fillColor: '#c0ffee' },
}}
>
<ArcherElement
id="elem-left"
relations={[
{
sourceAnchor: 'left',
targetAnchor: 'right',
targetId: 'elem-right',
},
]}
>
<div>element 1</div>
</ArcherElement>
<ArcherElement id="elem-right">
<div>element 2</div>
</ArcherElement>
</ArcherContainer>,
);
expect(screen.baseElement).toMatchSnapshot();
});

it('should render the arrow on both ends', () => {
const screen = render(
<ArcherContainer startMarker>
Expand Down
53 changes: 53 additions & 0 deletions src/ArcherContainer/__tests__/__snapshots__/ArcherContainer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,59 @@ exports[`ArcherContainer rendering an svg with the marker element used to draw a
</body>
`;


exports[`ArcherContainer rendering an svg with the marker element used to draw an svg arrow should render the arrow with a circle end when provided in the container 1`] = `
<body>
<div>
<div
style="position: relative;"
>
<svg
style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; pointer-events: none;"
>
<defs>
<marker
id="arrow00001elem-leftelem-right"
markerHeight="44"
markerUnits="strokeWidth"
markerWidth="44"
orient="auto-start-reverse"
refX="24"
refY="22"
>
<circle
cx="22"
cy="22"
fill="#c0ffee"
r="11"
stroke="tomato"
stroke-width="2"
/>
</marker>
</defs>
<g>
<path
d="M0,0 C11,0 11,0 22,0"
marker-end="url(#arrow00001elem-leftelem-right)"
style="fill: none; stroke: #f00; stroke-width: 2;"
/>
</g>
</svg>
<div
style="height: 100%;"
>
<div>
element 1
</div>
<div>
element 2
</div>
</div>
</div>
</div>
</body>
`;

exports[`ArcherContainer rendering an svg with the marker element used to draw an svg arrow should render the arrow with an arrow end by default 1`] = `
<body>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/ArcherContainer/components/Markers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { LineType, ShapeType, SourceToTargetType } from '../../types';
import { endShapeDefaultProp } from '../ArcherContainer.constants';
import { getEndShapeFromStyle, getSourceToTargets, getMarkerId } from '../ArcherContainer.helpers';
import { getEndShapeFromStyle, getMarkerId, getSourceToTargets } from '../ArcherContainer.helpers';
import { SourceToTargetsArrayType } from '../ArcherContainer.types';

const circleMarker = (style: LineType, endShape: ShapeType) => () => {
Expand Down Expand Up @@ -79,7 +79,7 @@ const buildShape = ({
refX: number;
refY: number;
} => {
const chosenEndShape = getEndShapeFromStyle(style);
const chosenEndShape = getEndShapeFromStyle(style, endShape);

const shapeMap = {
circle: circleMarker(style, endShape),
Expand Down