Skip to content

Commit 63d8776

Browse files
author
nadavl
committed
Duplicated static cy-Pan-Zoom HTML as TSX
1 parent 6c08784 commit 63d8776

File tree

5 files changed

+279
-32
lines changed

5 files changed

+279
-32
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
.idea/
12
node_modules/
2-
static/bundle.js
3+
static/bundle.js

‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<html>
22
<head>
3-
<title>MobX Boilerplate</title>
3+
<link href="src/assets/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css"/>
4+
<link href="node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
5+
<title>PanZoom Tester</title>
46
</head>
57
<body>
68
<div id="root"></div>

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mobx-react-typescript-boilerplate",
33
"version": "1.0.0",
4-
"description": "Boilerplate for MobX + React project with Typescript, ES6 compilation and hot code reloading",
4+
"description": "Boilerplate for MobX + React project with Typescript",
55
"scripts": {
66
"start": "node server.js"
77
},
@@ -29,6 +29,7 @@
2929
"webpack-dev-server": "^1.8.2"
3030
},
3131
"dependencies": {
32+
"font-awesome": "^4.5.0",
3233
"mobx": "^2.0.2",
3334
"mobx-react": "^3.0.1",
3435
"mobx-react-devtools": "^4.0.2",

‎src/assets/cytoscape.js-panzoom.css

+220
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
.cy-panzoom {
2+
position: absolute;
3+
font-size: 12px;
4+
color: #fff;
5+
font-family: arial, helvetica, sans-serif;
6+
line-height: 1;
7+
color: #666;
8+
font-size: 11px;
9+
z-index: 99999;
10+
box-sizing: content-box;
11+
}
12+
13+
.cy-panzoom-zoom-button {
14+
cursor: pointer;
15+
padding: 3px;
16+
text-align: center;
17+
position: absolute;
18+
border-radius: 3px;
19+
width: 10px;
20+
height: 10px;
21+
left: 16px;
22+
background: #fff;
23+
border: 1px solid #999;
24+
margin-left: -1px;
25+
margin-top: -1px;
26+
z-index: 1;
27+
box-sizing: content-box;
28+
}
29+
30+
.cy-panzoom-zoom-button:active,
31+
.cy-panzoom-slider-handle:active,
32+
.cy-panzoom-slider-handle.active {
33+
background: #ddd;
34+
box-sizing: content-box;
35+
}
36+
37+
.cy-panzoom-pan-button {
38+
position: absolute;
39+
z-index: 1;
40+
height: 16px;
41+
width: 16px;
42+
box-sizing: content-box;
43+
}
44+
45+
.cy-panzoom-reset {
46+
top: 55px;
47+
box-sizing: content-box;
48+
}
49+
50+
.cy-panzoom-zoom-in {
51+
top: 80px;
52+
box-sizing: content-box;
53+
}
54+
55+
.cy-panzoom-zoom-out {
56+
top: 197px;
57+
box-sizing: content-box;
58+
}
59+
60+
.cy-panzoom-pan-up {
61+
top: 0;
62+
left: 50%;
63+
margin-left: -5px;
64+
width: 0;
65+
height: 0;
66+
border-left: 5px solid transparent;
67+
border-right: 5px solid transparent;
68+
border-bottom: 5px solid #666;
69+
box-sizing: content-box;
70+
}
71+
72+
.cy-panzoom-pan-down {
73+
bottom: 0;
74+
left: 50%;
75+
margin-left: -5px;
76+
width: 0;
77+
height: 0;
78+
border-left: 5px solid transparent;
79+
border-right: 5px solid transparent;
80+
border-top: 5px solid #666;
81+
box-sizing: content-box;
82+
}
83+
84+
.cy-panzoom-pan-left {
85+
top: 50%;
86+
left: 0;
87+
margin-top: -5px;
88+
width: 0;
89+
height: 0;
90+
border-top: 5px solid transparent;
91+
border-bottom: 5px solid transparent;
92+
border-right: 5px solid #666;
93+
box-sizing: content-box;
94+
}
95+
96+
.cy-panzoom-pan-right {
97+
top: 50%;
98+
right: 0;
99+
margin-top: -5px;
100+
width: 0;
101+
height: 0;
102+
border-top: 5px solid transparent;
103+
border-bottom: 5px solid transparent;
104+
border-left: 5px solid #666;
105+
box-sizing: content-box;
106+
}
107+
108+
.cy-panzoom-pan-indicator {
109+
position: absolute;
110+
left: 0;
111+
top: 0;
112+
width: 8px;
113+
height: 8px;
114+
border-radius: 8px;
115+
background: #000;
116+
border-radius: 8px;
117+
margin-left: -5px;
118+
margin-top: -5px;
119+
display: none;
120+
z-index: 999;
121+
opacity: 0.6;
122+
box-sizing: content-box;
123+
}
124+
125+
.cy-panzoom-slider {
126+
position: absolute;
127+
top: 97px;
128+
left: 17px;
129+
height: 100px;
130+
width: 15px;
131+
box-sizing: content-box;
132+
}
133+
134+
.cy-panzoom-slider-background {
135+
position: absolute;
136+
top: 0;
137+
width: 2px;
138+
height: 100px;
139+
left: 5px;
140+
background: #fff;
141+
border-left: 1px solid #999;
142+
border-right: 1px solid #999;
143+
box-sizing: content-box;
144+
}
145+
146+
.cy-panzoom-slider-handle {
147+
position: absolute;
148+
width: 16px;
149+
height: 8px;
150+
background: #fff;
151+
border: 1px solid #999;
152+
border-radius: 2px;
153+
margin-left: -2px;
154+
z-index: 999;
155+
line-height: 8px;
156+
cursor: default;
157+
box-sizing: content-box;
158+
}
159+
160+
.cy-panzoom-slider-handle .icon {
161+
margin: 0 4px;
162+
line-height: 10px;
163+
box-sizing: content-box;
164+
}
165+
166+
.cy-panzoom-no-zoom-tick {
167+
position: absolute;
168+
background: #666;
169+
border: 1px solid #fff;
170+
border-radius: 2px;
171+
margin-left: -1px;
172+
width: 8px;
173+
height: 2px;
174+
left: 3px;
175+
z-index: 1;
176+
margin-top: 3px;
177+
box-sizing: content-box;
178+
}
179+
180+
.cy-panzoom-panner {
181+
position: absolute;
182+
left: 5px;
183+
top: 5px;
184+
height: 40px;
185+
width: 40px;
186+
background: #fff;
187+
border: 1px solid #999;
188+
border-radius: 40px;
189+
margin-left: -1px;
190+
box-sizing: content-box;
191+
}
192+
193+
.cy-panzoom-panner-handle {
194+
position: absolute;
195+
left: 0;
196+
top: 0;
197+
outline: none;
198+
height: 40px;
199+
width: 40px;
200+
position: absolute;
201+
z-index: 999;
202+
box-sizing: content-box;
203+
}
204+
205+
.cy-panzoom-zoom-only .cy-panzoom-slider,
206+
.cy-panzoom-zoom-only .cy-panzoom-panner {
207+
display: none;
208+
}
209+
210+
.cy-panzoom-zoom-only .cy-panzoom-reset {
211+
top: 20px;
212+
}
213+
214+
.cy-panzoom-zoom-only .cy-panzoom-zoom-in {
215+
top: 45px;
216+
}
217+
218+
.cy-panzoom-zoom-only .cy-panzoom-zoom-out {
219+
top: 70px;
220+
}

‎src/index.tsx

+52-29
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,59 @@ import {observer} from 'mobx-react';
55
import DevTools from 'mobx-react-devtools';
66

77
class AppState {
8-
@observable timer = 0;
9-
10-
constructor() {
11-
setInterval(() => {
12-
this.timer += 1;
13-
}, 1000);
14-
}
15-
16-
resetTimer() {
17-
this.timer = 0;
18-
}
8+
@observable timer = 0;
9+
10+
constructor () {
11+
setInterval(() => {
12+
this.timer += 1;
13+
}, 1000);
14+
}
15+
16+
resetTimer () {
17+
this.timer = 0;
18+
}
1919
}
2020

2121
@observer
2222
class TimerView extends React.Component<{appState: AppState}, {}> {
23-
render() {
24-
return (
25-
<div>
26-
<button onClick={this.onReset}>
27-
Seconds passed: {this.props.appState.timer}
28-
</button>
29-
<DevTools />
30-
</div>
31-
);
32-
}
33-
34-
onReset = () => {
35-
this.props.appState.resetTimer();
36-
}
37-
};
38-
39-
const appState = new AppState();
40-
ReactDOM.render(<TimerView appState={appState} />, document.getElementById('root'));
23+
render () {
24+
return null;
25+
}
26+
27+
onReset = () => {
28+
this.props.appState.resetTimer();
29+
}
30+
}
31+
;
32+
33+
var PanZoom = React.createClass({
34+
render: function () {
35+
return (
36+
37+
<div className="cy-panzoom" style={{position: 'absolute'}}>
38+
<div className="cy-panzoom-zoom-in cy-panzoom-zoom-button"><span className="icon fa fa-plus"/></div>
39+
<div className="cy-panzoom-zoom-out cy-panzoom-zoom-button"><span className="icon fa fa-minus"/></div>
40+
<div className="cy-panzoom-reset cy-panzoom-zoom-button"><span className="icon fa fa-expand"/></div>
41+
<div className="cy-panzoom-slider">
42+
<div className="cy-panzoom-slider-background"/>
43+
<div className="cy-panzoom-slider-handle" style={{top: '32.2203px'}}><span className="icon fa fa-minus"/>
44+
</div>
45+
<div className="cy-panzoom-no-zoom-tick" style={{top: 43}}/>
46+
</div>
47+
<div className="cy-panzoom-panner">
48+
<div className="cy-panzoom-panner-handle"/>
49+
<div className="cy-panzoom-pan-up cy-panzoom-pan-button"/>
50+
<div className="cy-panzoom-pan-down cy-panzoom-pan-button"/>
51+
<div className="cy-panzoom-pan-left cy-panzoom-pan-button"/>
52+
<div className="cy-panzoom-pan-right cy-panzoom-pan-button"/>
53+
<div className="cy-panzoom-pan-indicator" style={{display: 'none'}}/>
54+
</div>
55+
</div>
56+
);
57+
}
58+
});
59+
60+
ReactDOM.render(<PanZoom />, document.getElementById('root'));
61+
62+
// const appState = new AppState();
63+
// ReactDOM.render(<TimerView appState={appState}/>, document.getElementById('root'));

0 commit comments

Comments
 (0)