Skip to content

Commit e1d8882

Browse files
CarstenWicknerCarstenWickner
authored
Merge pull request #5 from CarstenWickner/fix-chrome-styling
2 parents c4fabc7 + 4435ba1 commit e1d8882

8 files changed

Lines changed: 58 additions & 42 deletions

File tree

‎.storybook/addons.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
import "@storybook/addon-actions/register";
22
import "@storybook/addon-docs/register";
3-
import "@storybook/addon-options/register";

‎.storybook/config.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ addParameters({
55
options: {
66
name: "Flow Modeler",
77
url: "https://github.com/CarstenWickner/react-flow-modeler",
8-
showAddonPanel: false,
9-
showSearchBox: false,
108
// sort sub-folders to the bottom alphabetically – but leave the individual stories in their order of declaration
119
storySort: (a, b) => a[1].id.substring(0, a[1].id.indexOf("--")).localeCompare(b[1].id.substring(0, b[1].id.indexOf("--")))
1210
},

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
"@mdx-js/loader": "~1.5.1",
3636
"@storybook/addon-actions": "~5.3.1",
3737
"@storybook/addon-docs": "~5.3.1",
38-
"@storybook/addon-options": "~5.3.1",
3938
"@storybook/react": "~5.3.1",
4039
"@types/enzyme": "~3.10.3",
4140
"@types/enzyme-adapter-react-16": "~1.0.5",

‎src/component/FlowModeler.scss‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$strokeColor: #01579b;
1111
$strokeStrength: 0.25em;
1212
$arrowSize: 1.5 * $strokeStrength;
13-
$strokeLength: 2em - $arrowSize;
13+
$strokeLength: 1.5em - $arrowSize;
1414
$standardElementSize: 2.5em;
1515
$gatewayElementSizeFactor: 2;
1616
$gatewayElementMargin: (sqrt($gatewayElementSizeFactor * $gatewayElementSizeFactor * 2) - $gatewayElementSizeFactor) * 1em / 2;
@@ -67,7 +67,8 @@
6767
}
6868
& .arrow,
6969
& .stroke-horizontal,
70-
& .stroke-vertical {
70+
& .stroke-vertical > *,
71+
& .centered-line-wrapper::before {
7172
background-color: $strokeColor;
7273
}
7374
& .arrow {
@@ -92,7 +93,7 @@
9293
& .stroke-horizontal {
9394
height: $strokeStrength;
9495
min-width: $strokeLength;
95-
flex-grow: 1;
96+
flex: 1 0 auto;
9697

9798
&.converging-gateway {
9899
min-width: $gatewayElementMargin;
@@ -102,42 +103,50 @@
102103
}
103104
}
104105
& .stroke-vertical {
106+
display: flex;
107+
flex-direction: column;
108+
align-self: stretch;
105109
width: $strokeStrength;
106-
&.full-height {
107-
height: 100%;
110+
& .center {
111+
height: $strokeStrength;
112+
width: $strokeStrength;
108113
}
109-
&.bottom-half,
110-
&.top-half {
111-
height: calc(50% + #{$strokeStrength / 2});
112-
}
113-
&.bottom-half {
114-
margin-top: auto;
114+
& .top,
115+
& .bottom {
116+
flex-grow: 1;
117+
width: $strokeStrength;
115118
}
116-
&.top-half {
117-
margin-bottom: auto;
119+
&.bottom-half .top,
120+
&.top-half .bottom {
121+
background-color: transparent;
118122
}
119123
& + .arrow {
120124
margin-left: -$strokeStrength;
121125
}
122126
}
123127
& .centered-line-wrapper {
128+
position: relative;
124129
display: flex;
125130
flex-direction: column;
126131
flex-grow: 1;
127-
128-
& .wrapper-top-label,
129-
& .wrapper-bottom-spacing {
130-
flex-grow: 1;
131-
}
132+
132133
& .wrapper-top-label {
133134
display: flex;
134135
flex-direction: column;
135136
justify-content: flex-end;
136137
align-content: center;
137138
padding: 0 0.25em;
139+
margin-bottom: $strokeStrength / 2;
138140
}
139-
& .stroke-horizontal {
140-
flex-grow: 0;
141+
&::before {
142+
position: absolute;
143+
content: "";
144+
height: $strokeStrength;
145+
width: 100%;
146+
top: calc(50% - #{$strokeStrength / 2});
147+
}
148+
& .wrapper-bottom-spacing {
149+
margin-top: $strokeStrength / 2;
141150
}
142151
}
143152
}

‎src/component/FlowModeler.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class FlowModeler extends React.Component<FlowModelerProps> {
5454
case ElementType.ConnectElementToGateway:
5555
return <HorizontalStroke outgoingConnection={cellData.connectionType} />;
5656
case ElementType.StrokeExtension:
57-
return <div className="stroke-horizontal" />;
57+
return <div className="stroke-horizontal optional" />;
5858
case ElementType.End:
5959
return (
6060
<>

‎src/component/HorizontalStroke.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,26 +36,38 @@ export class HorizontalStroke extends React.Component<
3636
}
3737
}
3838

39+
renderVerticalStroke(connectionType: ConnectionType, classNameSuffix: string): React.ReactNode {
40+
if (connectionType) {
41+
return (
42+
<div className={`stroke-vertical ${getConnectionClassName(connectionType)}${classNameSuffix}`}>
43+
<div className="top" />
44+
<div className="center" />
45+
<div className="bottom" />
46+
</div>
47+
);
48+
}
49+
return null;
50+
}
51+
3952
render(): React.ReactNode {
4053
const { className, incomingConnection, outgoingConnection, children } = this.props;
4154
const classNameSuffix = className ? ` ${className}` : "";
4255
return (
4356
<>
44-
{incomingConnection && <div className={`stroke-vertical ${getConnectionClassName(incomingConnection)}${classNameSuffix}`} />}
57+
{this.renderVerticalStroke(incomingConnection, classNameSuffix)}
4558
{!children && <div className={`stroke-horizontal${classNameSuffix}`} />}
4659
{children && (
4760
<div className={`centered-line-wrapper${classNameSuffix}`}>
48-
<div className="wrapper-top-label" ref={this.topLabelRef}>
49-
{children}
61+
<div className="wrapper-top-label">
62+
<div ref={this.topLabelRef}>{children}</div>
5063
</div>
51-
<div className={`stroke-horizontal${classNameSuffix}`} />
5264
<div
5365
className="wrapper-bottom-spacing"
54-
style={(this.topLabelRef.current && { height: `${this.state.wrapperTopHeight}px` }) || undefined}
66+
style={(this.topLabelRef.current && { minHeight: `${this.state.wrapperTopHeight}px` }) || undefined}
5567
/>
5668
</div>
5769
)}
58-
{outgoingConnection && <div className={`stroke-vertical ${getConnectionClassName(outgoingConnection)}${classNameSuffix}`} />}
70+
{this.renderVerticalStroke(outgoingConnection, classNameSuffix)}
5971
</>
6072
);
6173
}

‎test/component/HorizontalStroke.test.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,17 @@ describe("applies given className", () => {
5555
);
5656
expect(component.find(".stroke-vertical.bottom-half.test-class").exists()).toBe(true);
5757
expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(true);
58-
expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
59-
expect(component.find(".centered-line-wrapper.test-class .stroke-horizontal.test-class").exists()).toBe(true);
58+
expect(component.find(".stroke-horizontal.test-class").exists()).toBe(false);
6059
});
6160
it("for outgoing connection", () => {
6261
const component = shallow(<HorizontalStroke className="test-class" outgoingConnection={ConnectionType.Last} />);
62+
expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(false);
6363
expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
6464
expect(component.find(".stroke-vertical.top-half.test-class").exists()).toBe(true);
6565
});
6666
it("when there is no connection", () => {
6767
const component = shallow(<HorizontalStroke className="test-class" outgoingConnection={ConnectionType.Last} />);
68+
expect(component.find(".centered-line-wrapper.test-class").exists()).toBe(false);
6869
expect(component.find(".stroke-horizontal.test-class").exists()).toBe(true);
6970
});
7071
});

‎test/component/__snapshots__/HorizontalStroke.test.tsx.snap‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@ exports[`renders correctly for incomingConnection = single 1`] = `
88
<div
99
className="wrapper-top-label"
1010
>
11-
text
11+
<div>
12+
text
13+
</div>
1214
</div>
13-
<div
14-
className="stroke-horizontal"
15-
/>
1615
<div
1716
className="wrapper-bottom-spacing"
1817
style={
1918
Object {
20-
"height": "30px",
19+
"minHeight": "30px",
2120
}
2221
}
2322
/>
@@ -33,11 +32,10 @@ exports[`renders correctly with minimal/default props 1`] = `
3332
<div
3433
className="wrapper-top-label"
3534
>
36-
label
35+
<div>
36+
label
37+
</div>
3738
</div>
38-
<div
39-
className="stroke-horizontal"
40-
/>
4139
<div
4240
className="wrapper-bottom-spacing"
4341
/>

0 commit comments

Comments
 (0)