Skip to content

Commit

Permalink
Merge pull request #49 from dls-controls/fix-line-widget
Browse files Browse the repository at this point in the history 
Fix Line widget Issue #47
  • Loading branch information
@abigailalexander
abigailalexander authored Feb 1, 2024
2 parents f6baa32 + 95cb6a4 commit 71a6d0b
Show file tree
Hide file tree
Showing 6 changed files with 391 additions and 57 deletions.
70 changes: 61 additions & 9 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"plotly.js-basic-dist": "^2.20.0",
"react-plotly.js": "^2.6.0",
"redux": "^4.1.2",
"utf-8-validate": "^5.0.10"
"utf-8-validate": "^5.0.10",
"uuid": "^9.0.1"
},
"devDependencies": {
"@apollo/client": "^3.6.0",
Expand All @@ -39,6 +40,7 @@
"@types/node": "^17.0.18",
"@types/react-plotly.js": "^2.5.2",
"@types/react-test-renderer": "^17.0.1",
"@types/uuid": "^9.0.8",
"base64-js": "^1.3.1",
"clipboard-copy": "^4.0.1",
"eslint-config-prettier": "^8.3.0",
Expand Down
5 changes: 4 additions & 1 deletion src/ui/widgets/EmbeddedDisplay/opiParser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,10 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
effect3d: ["effect_3d", opiParseBoolean],
showLed: ["show_led", opiParseBoolean],
cornerWidth: ["corner_width", opiParseString],
cornerHeight: ["corner_height", opiParseString]
cornerHeight: ["corner_height", opiParseString],
arrows: ["arrows", opiParseNumber],
arrowLength: ["arrow_length", opiParseNumber],
fillArrow: ["fill_arrow", opiParseBoolean]
};

/**
Expand Down
17 changes: 14 additions & 3 deletions src/ui/widgets/Line/__snapshots__/line.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,19 @@

exports[`<LineComponent /> matches snapshot 1`] = `
<DocumentFragment>
<div
style="background-color: rgb(0, 255, 255); width: 50px; height: 4px; border-radius: 0; transform: rotate(45deg);"
/>
<svg
overflow="visible"
viewBox="0 0 20 15"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
fill="none"
overflow="visible"
points="2,20 6,30 15,4 "
stroke="rgba(0,255,255,255)"
stroke-width="4"
transform="rotation(45,0,0)"
/>
</svg>
</DocumentFragment>
`;
161 changes: 138 additions & 23 deletions src/ui/widgets/Line/line.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from "react";
import renderer, { ReactTestRenderer } from "react-test-renderer";
import renderer, { ReactTestRendererJSON } from "react-test-renderer";
import { render } from "@testing-library/react";
import { LineComponent } from "./line";
import { ShapeComponent } from "../Shape/shape";
import { Color } from "../../../types/color";

const LineRenderer = (lineProps: any): ReactTestRenderer => {
return renderer.create(<LineComponent {...lineProps} readonly={true} />);
const LineRenderer = (lineProps: any): ReactTestRendererJSON => {
return renderer
.create(<LineComponent {...lineProps} />)
.toJSON() as ReactTestRendererJSON;
};

describe("<LineComponent />", (): void => {
Expand All @@ -15,9 +16,17 @@ describe("<LineComponent />", (): void => {
<LineComponent
{...({
backgroundColor: Color.fromRgba(0, 255, 255),
width: 50,
width: 20,
height: 15,
lineWidth: 4,
rotationAngle: 45
rotationAngle: 45,
points: {
values: [
{ x: 2, y: 20 },
{ x: 6, y: 30 },
{ x: 15, y: 4 }
]
}
} as any)}
/>
);
Expand All @@ -28,36 +37,142 @@ describe("<LineComponent />", (): void => {
test("default properties are added to line component", (): void => {
const lineProps = {
width: 20,
lineWidth: 4,
backgroundColor: Color.fromRgba(0, 255, 255)
height: 25,
backgroundColor: Color.fromRgba(0, 255, 255),
points: {
values: [
{ x: 1, y: 10 },
{ x: 15, y: 20 },
{ x: 4, y: 15 }
]
}
};

const testRenderer = LineRenderer(lineProps);
const svg = LineRenderer(lineProps);
expect(svg.props.viewBox).toEqual("0 0 20 25");

const shapeProps = testRenderer.root.findByType(ShapeComponent).props;
const lines = svg.children as Array<ReactTestRendererJSON>;

expect(shapeProps.shapeWidth).toBe("20px");
expect(shapeProps.shapeHeight).toBe("4px");
expect(shapeProps.backgroundColor.text).toEqual("rgba(0,255,255,255)");
expect(shapeProps.visible).toBe(true);
expect(lines[0].props.stroke).toEqual("rgba(0,255,255,255)");
expect(lines[0].props.strokeWidth).toEqual(1);
expect(lines[0].props.transform).toEqual("rotation(0,0,0)");
expect(lines[0].props.points).toEqual("1,10 15,20 4,15 ");
});

test("props override default properties", (): void => {
test("props override default properties, no arrows", (): void => {
const lineProps = {
width: 15,
width: 30,
height: 20,
lineWidth: 15,
backgroundColor: Color.fromRgba(0, 255, 255),
backgroundColor: Color.fromRgba(0, 254, 250),
transparent: true,
rotationAngle: 45,
visible: true,
points: {
values: [
{ x: 16, y: 4 },
{ x: 25, y: 10 },
{ x: 4, y: 15 }
]
},
arrows: 0
};

const svg = LineRenderer(lineProps);
expect(svg.props.viewBox).toEqual("0 0 30 20");

const lines = svg.children as Array<ReactTestRendererJSON>;

expect(lines[0].props.stroke).toEqual("rgba(0,0,0,0)");
expect(lines[0].props.strokeWidth).toEqual(15);
expect(lines[0].props.transform).toEqual("rotation(45,0,0)");
expect(lines[0].props.points).toEqual("16,4 25,10 4,15 ");
});

test("line with filled arrowhead", (): void => {
const lineProps = {
width: 30,
height: 20,
lineWidth: 15,
backgroundColor: Color.fromRgba(0, 254, 250),
transparent: true,
rotationAngle: 45,
visible: false
visible: true,
points: {
values: [
{ x: 16, y: 5 },
{ x: 26, y: 10 },
{ x: 6, y: 15 }
]
},
arrows: 3,
arrowLength: 2,
fillArrow: true
};

const testRenderer = LineRenderer(lineProps);
const svg = LineRenderer(lineProps);
expect(svg.props.viewBox).toEqual("0 0 30 20");

const lines = svg.children as Array<ReactTestRendererJSON>;
const marker = lines[0].children as Array<ReactTestRendererJSON>;

const shapeProps = testRenderer.root.findByType(ShapeComponent).props;
// Check arrowhead definitions were created
expect(marker[0].props.markerWidth).toEqual("2");
expect(marker[0].props.markerHeight).toEqual("2");
expect(marker[0].props.orient).toEqual("auto-start-reverse");
expect(marker[0].props.markerUnits).toEqual("userSpaceOnUse");

expect(lines[1].props).toHaveProperty("markerStart");
expect(lines[1].props).toHaveProperty("markerEnd");
expect(lines[1].props.points).toEqual("18,6 26,10 8,15 ");
});

test("line with unfilled arrowhead", (): void => {
const lineProps = {
width: 30,
height: 20,
lineWidth: 2,
backgroundColor: Color.fromRgba(0, 254, 250),
transparent: true,
rotationAngle: 45,
visible: true,
points: {
values: [
{ x: 40, y: 10 },
{ x: 40, y: 20 },
{ x: 20, y: 20 }
]
},
arrows: 1,
arrowLength: 2,
fillArrow: false
};

const svg = LineRenderer(lineProps);
expect(svg.props.viewBox).toEqual("0 0 30 20");

const lines = svg.children as Array<ReactTestRendererJSON>;
const marker = lines[0].children as Array<ReactTestRendererJSON>;

// Check arrowhead definitions were created
expect(marker[0].props.markerWidth).toEqual("1");
expect(marker[0].props.markerHeight).toEqual("1");
expect(marker[0].props.orient).toEqual("auto-start-reverse");
expect(marker[0].props.markerUnits).toEqual("strokeWidth");

expect(lines[1].props).toHaveProperty("markerStart");
expect(lines[1].props.stroke).toEqual("rgba(0,0,0,0)");
expect(lines[1].props.points).toEqual("40,10 40,20 20,20 ");
});

test("line component not created if no points to plot", (): void => {
const lineProps = {
width: 20,
height: 25,
backgroundColor: Color.fromRgba(0, 255, 255)
};

expect(shapeProps.backgroundColor.text).toBe(Color.TRANSPARENT.toString());
expect(shapeProps.shapeTransform).toBe("rotate(45deg)");
expect(shapeProps.visible).toBe(false);
const svg = LineRenderer(lineProps);
expect(svg).toBeNull();
});
});
Loading

0 comments on commit 71a6d0b

Please sign in to comment.