Skip to content

Commit b05ee19

Browse files
rreusserrreusser
committed
Add dat gui interface to example
1 parent f971977 commit b05ee19

File tree

10 files changed

+209
-27
lines changed

10 files changed

+209
-27
lines changed

‎example/src/assets/react-dat-gui.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
.react-dat-gui {
2+
position: fixed;
3+
right: 16px;
4+
bottom: 0;
5+
width: 280px;
6+
font-size: 12px;
7+
font-family: 'Lucida Grande', sans-serif;
8+
box-sizing: border-box;
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
11+
-webkit-tap-highlight-color: transparent; }
12+
.react-dat-gui *, .react-dat-gui *:before, .react-dat-gui *:after {
13+
box-sizing: inherit; }
14+
.react-dat-gui .dg {
15+
margin: 0;
16+
padding: 0;
17+
color: #eee;
18+
overflow: auto; }
19+
.react-dat-gui .dg.main {
20+
background: #1a1a1a; }
21+
.react-dat-gui .dg.main::-webkit-scrollbar {
22+
width: 5px;
23+
background: #1a1a1a; }
24+
.react-dat-gui .dg.main::-webkit-scrollbar-corner {
25+
height: 0;
26+
display: none; }
27+
.react-dat-gui .dg.main::-webkit-scrollbar-thumb {
28+
border-radius: 5px;
29+
background: #676767; }
30+
.react-dat-gui .cr {
31+
display: flex;
32+
border-bottom: 1px solid #272727;
33+
user-select: none; }
34+
.react-dat-gui .cr.number {
35+
border-left: 5px solid #2FA1D6; }
36+
.react-dat-gui .cr.number .slider {
37+
display: none;
38+
position: relative;
39+
width: 40%;
40+
border: 3px solid #1a1a1a;
41+
border-right-width: 1px;
42+
background-color: #303030;
43+
user-select: none;
44+
cursor: ew-resize; }
45+
.react-dat-gui .cr.number .slider:hover, .react-dat-gui .cr.number .slider.is-active {
46+
background-color: #3c3c3c; }
47+
.react-dat-gui .cr.number .slider .slider-bar {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
width: 100%;
52+
height: 100%;
53+
background-color: #2FA1D6; }
54+
.react-dat-gui .cr.number input[type=text] {
55+
width: 60%;
56+
color: #2FA1D6; }
57+
.react-dat-gui .cr.number.has-slider .slider {
58+
display: block; }
59+
.react-dat-gui .cr.number.has-slider input[type=text] {
60+
width: 20%; }
61+
.react-dat-gui .cr.string {
62+
border-left: 5px solid #1ed36f; }
63+
.react-dat-gui .cr.string input[type=text] {
64+
width: 60%;
65+
color: #1ed36f; }
66+
.react-dat-gui .cr.boolean {
67+
border-left: 5px solid #806787; }
68+
.react-dat-gui .cr.boolean label {
69+
width: calc(100% - 1.2em - 10px); }
70+
.react-dat-gui .cr.boolean .checkbox-wrapper {
71+
position: relative;
72+
width: calc(1.2em + 10px); }
73+
.react-dat-gui .cr.boolean .checkbox-wrapper .checkbox,
74+
.react-dat-gui .cr.boolean .checkbox-wrapper input[type=checkbox] {
75+
position: absolute;
76+
top: 0;
77+
left: 0;
78+
width: 100%;
79+
height: 100%; }
80+
.react-dat-gui .cr.boolean .checkbox-wrapper .checkbox {
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
border: 3px solid #1a1a1a;
85+
background: #303030;
86+
z-index: 0;
87+
left: auto;
88+
right: 0; }
89+
.react-dat-gui .cr.boolean .checkbox-wrapper .checkbox > .checkmark {
90+
display: none;
91+
width: 0.7em;
92+
height: 0.7em;
93+
stroke-width: 10px;
94+
stroke: #99829f; }
95+
.react-dat-gui .cr.boolean .checkbox-wrapper input[type=checkbox] {
96+
margin: 0;
97+
opacity: 0;
98+
z-index: 1; }
99+
.react-dat-gui .cr.boolean .checkbox-wrapper input[type=checkbox]:checked ~ .checkbox > .checkmark {
100+
display: block; }
101+
.react-dat-gui .cr.boolean .checkbox-wrapper input[type=checkbox]:hover ~ .checkbox {
102+
background-color: #3c3c3c; }
103+
.react-dat-gui .cr.button {
104+
border-left: 5px solid #c5bdad; }
105+
.react-dat-gui .cr.button:hover {
106+
background: #111; }
107+
.react-dat-gui .cr.button span {
108+
width: 100%;
109+
cursor: pointer; }
110+
.react-dat-gui .cr label, .react-dat-gui .cr span {
111+
display: inline-block;
112+
align-items: center;
113+
min-width: 0;
114+
width: 40%;
115+
padding: 5px;
116+
white-space: nowrap;
117+
overflow: hidden;
118+
text-overflow: ellipsis;
119+
user-select: none; }
120+
.react-dat-gui .cr input[type=text] {
121+
background: #303030;
122+
border: 3px solid #1a1a1a;
123+
border-radius: 0;
124+
padding: 2px 5px;
125+
outline: none;
126+
font-size: inherit; }
127+
.react-dat-gui .cr input[type=text]:hover {
128+
background: #3c3c3c; }
129+
.react-dat-gui .cr input[type=text]:focus {
130+
background: #494949;
131+
color: #fff; }

‎example/src/assets/react-dat-gui.min.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/assets/styles.css

+9-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ body {
33
margin: 0;
44
overflow: hidden
55
}
6+
7+
._example_src_index__container {
8+
position: absolute;
9+
top: 50%;
10+
left: 0;
11+
right: 0;
12+
bottom: 0;
13+
}
614
._example_src_components_plot__container {
715
position: absolute;
816
left: 0;
@@ -15,7 +23,7 @@ body {
1523
left: 0;
1624
right: 0;
1725
bottom: 0;
18-
height: 50%;
26+
top: 0;
1927

2028
padding: 2px;
2129
}

‎example/src/components/code.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
left: 0;
44
right: 0;
55
bottom: 0;
6-
height: 50%;
6+
top: 0;
77

88
padding: 2px;
99
}

‎example/src/components/plot.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import styles from './plot.css'
33

4-
import createPlotly from '../../../'
4+
import createPlotly from '../../../src/plotlyjs-react.jsx'
55
const PlotlyComponent = createPlotly(Plotly)
66

77

@@ -18,10 +18,12 @@ export default class Plot extends React.Component {
1818
layout={this.props.data.layout}
1919
config={this.props.data.config}
2020
frames={this.props.data.frames}
21+
width={this.props.width}
22+
height={this.props.height}
23+
fit={this.props.fit}
2124
onClick={e => console.log('plotly_click:', e)}
2225
onHover={e => console.log('plotly_hover:', e)}
2326
onUnhover={e => console.log('plotly_unhover:', e)}
24-
fit
2527
/>
2628
</div>
2729
);

‎example/src/index.css

+8
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,11 @@ body {
33
margin: 0;
44
overflow: hidden
55
}
6+
7+
.container {
8+
position: absolute;
9+
top: 50%;
10+
left: 0;
11+
right: 0;
12+
bottom: 0;
13+
}

‎example/src/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<title>plotlyjs-react</title>
55
<link rel="stylesheet" type="text/css" href="assets/styles.css">
66
<link rel="stylesheet" type="text/css" href="assets/codemirror.css">
7+
<link rel="stylesheet" type="text/css" href="assets/react-dat-gui.min.css">
78
<meta http-equiv="content-type" content="text/html; charset=UTF8">
89
<script src="assets/plotly-basic.min.js"></script>
910
</head>

‎example/src/index.js

+33-6
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,19 @@ import Code from './components/code'
55
var fs = require('fs');
66
import path from 'path'
77
import styles from './index.css'
8+
import Dat, { DatNumber, DatBoolean } from 'react-dat-gui'
9+
810

911
const initialData = fs.readFileSync(__dirname + '/example.json', 'utf8');
1012

1113
class App extends React.Component {
1214
state = {
1315
value: initialData,
1416
data: JSON.parse(initialData),
15-
valid: true
17+
valid: true,
18+
config: {
19+
fit: true
20+
},
1621
}
1722

1823
handleChangeData = str => {
@@ -27,18 +32,40 @@ class App extends React.Component {
2732
}
2833
}
2934

35+
handleConfig = (data) => {
36+
this.setState(Object.assign(this.state.config, {
37+
width: !!data.width ? data.width : undefined,
38+
height: !!data.height ? data.height : undefined,
39+
fit: data.fit,
40+
}));
41+
}
42+
3043
render () {
3144
return (
3245
<div>
3346
<Plot
3447
data={this.state.data}
3548
valid={this.state.valid}
49+
width={this.state.config.width}
50+
height={this.state.config.height}
51+
fit={this.state.config.fit}
3652
/>
37-
<Code
38-
value={this.state.value}
39-
valid={this.state.valid}
40-
onChange={this.handleChangeData}
41-
/>
53+
<div className={styles.container}>
54+
<Code
55+
value={this.state.value}
56+
valid={this.state.valid}
57+
onChange={this.handleChangeData}
58+
/>
59+
<Dat
60+
data={this.state.config}
61+
onUpdate={this.handleConfig}
62+
style={{zIndex: 100, marginTop: '1px'}}
63+
>
64+
<DatBoolean path="fit" label="Fit"/>
65+
<DatNumber path="width" min={0} max={1024} step={1} label="Width" />
66+
<DatNumber path="height" min={0} max={1024} step={1} label="Height" />
67+
</Dat>
68+
</div>
4269
</div>
4370
);
4471
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"prop-types": "^15.5.10",
5959
"react": "^15.6.1",
6060
"react-codemirror": "^1.0.0",
61+
"react-dat-gui": "0.0.13",
6162
"react-dom": "^15.6.1",
6263
"uglify-js": "^3.0.26",
6364
"uglifyify": "^4.0.3"

‎src/plotlyjs-react.jsx

+19-17
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ export default function createPlotlyComponent (Plotly) {
4949
this.resizeHandler = null;
5050
this.handlers = {};
5151

52-
this.attachWindowResize = this.attachWindowResize.bind(this);
53-
this.detachWindowResize = this.detachWindowResize.bind(this);
52+
this.syncWindowResize = this.syncWindowResize.bind(this);
5453
this.syncEventHandlers = this.syncEventHandlers.bind(this);
5554
this.getRef = this.getRef.bind(this);
5655
}
@@ -65,7 +64,7 @@ export default function createPlotlyComponent (Plotly) {
6564
frames: this.props.frames,
6665
});
6766
})
68-
.then(this.attachWindowResize)
67+
.then(this.syncWindowResize)
6968
.then(this.syncEventHandlers);
7069
}
7170

@@ -78,6 +77,7 @@ export default function createPlotlyComponent (Plotly) {
7877
frames: nextProps.frames,
7978
}).then(() => {
8079
this.syncEventHandlers(nextProps)
80+
this.syncWindowResize(nextProps)
8181
});
8282
});
8383
}
@@ -91,21 +91,23 @@ export default function createPlotlyComponent (Plotly) {
9191
Plotly.purge(this.el);
9292
}
9393

94-
attachWindowResize() {
95-
if (this.props.fit && isBrowser && !this.resizeHandler) {
96-
this.resizeHandler = () => {
97-
this.p = this.p.then(() => {
98-
return Plotly.relayout(this.el, this.getSize());
99-
});
100-
};
101-
window.addEventListener("resize", this.resizeHandler);
102-
}
103-
}
104-
105-
detachWindowResize() {
106-
if (this.resizeHandler && isBrowser) {
107-
window.removeEventListener("resize", this.resizeHandler);
94+
syncWindowResize (props) {
95+
props = props || this.props;
96+
if (!isBrowser) return;
97+
98+
if (props.fit && !this.resizeHandler) {
99+
if (!this.resizeHandler) {
100+
this.resizeHandler = () => {
101+
this.p = this.p.then(() => {
102+
return Plotly.relayout(this.el, this.getSize());
103+
});
104+
};
105+
window.addEventListener("resize", this.resizeHandler);
106+
}
107+
} else if (!props.fit && this.resizeHandler) {
108+
window.removeEventListener('resize', this.resizeHandler);
108109
this.resizeHandler = null;
110+
109111
}
110112
}
111113

0 commit comments

Comments
 (0)