Skip to content

Commit a47d723

Browse files
author
Zhou
committed
fix bugs; fix styles; responsive view
1 parent 6574056 commit a47d723

File tree

7 files changed

+118
-69
lines changed

7 files changed

+118
-69
lines changed

‎src/App.module.less‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
.root{
2-
position: absolute;
3-
top: 0;
4-
left: 0;
5-
right: 0;
6-
bottom: 0;
7-
background-color: #ffffff;
8-
9-
}
101
.App {
112
text-align: center;
123
display: flex;
134
flex-direction: column;
145
align-items: center;
15-
justify-content: center;
16-
6+
position: absolute;
7+
top: 0;
8+
left: 0;
9+
right: 0;
10+
bottom: 0;
11+
background-color: #fafafa;
1712
}
18-

‎src/pages/PageFour/index.js‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import Slider from '@material-ui/core/Slider';
1414
import styles from './index.less';
1515
import * as PIXI from 'pixi.js'
1616

17-
const canvasWidth_Middle = 800
18-
const canvasHeight_Middle = 470
17+
// const canvasWidth_Middle = 800
18+
// const canvasHeight_Middle = 470
1919

2020
const useStyles = makeStyles({
2121
root: {
@@ -37,6 +37,8 @@ class PageFour extends React.Component {
3737
this.stepItem[i] = React.createRef();
3838
})
3939

40+
// this.saveRef = ref => {this.refDom = ref};
41+
4042
this.state = {
4143
// data that will be used/changed in render function
4244
blockIndex: 0,
@@ -47,14 +49,27 @@ class PageFour extends React.Component {
4749
drawBlocks: allStages[0],
4850
playSpeed: 3,
4951
playButtonColor: 'primary',
50-
pauseButtonColor: 'default'
52+
pauseButtonColor: 'default',
53+
canvasWidth_Middle: 800,
54+
canvasHeight_Middle: 470,
5155
}
5256

5357
// Every function that interfaces with UI and data used
5458
// in this class needs to bind like this:
5559
this.handleOnClick = this.handleOnClick.bind(this);
60+
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
5661
}
5762

63+
updateWindowDimensions() {
64+
if(this.refDom){
65+
const {clientWidth, clientHeight} = this.refDom;
66+
const tmp_width = Math.max(clientWidth - 550, 720)
67+
this.setState({ canvasWidth_Middle: tmp_width, canvasHeight_Middle: Math.min(tmp_width / 2, clientHeight - 120) },(val)=>{
68+
console.log('client.inner',clientWidth, clientHeight);
69+
});
70+
}
71+
}
72+
5873
handleOnClick() {
5974
this.props.history.push('/')
6075
}
@@ -74,6 +89,8 @@ class PageFour extends React.Component {
7489
}
7590

7691
componentDidMount() {
92+
this.updateWindowDimensions();
93+
window.addEventListener('resize', this.updateWindowDimensions);
7794
}
7895

7996
highlight(index) {
@@ -381,17 +398,18 @@ class PageFour extends React.Component {
381398
if(this.handlerPlay) {
382399
clearInterval(this.handlerPlay);
383400
}
401+
this.refDom.removeEventListener('resize', this.updateWindowDimensions);
384402
}
385403

386404
render() {
387405
// Get all sprites
388406
// var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
389407
var sprites = this.state.drawBlocks;
390408
// Sort sprites by their depth
391-
sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
409+
sprites && sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
392410

393411
return (
394-
<div className={styles.container}>
412+
<div className={styles.container} ref={(ref)=>this.refDom=ref}>
395413
<div className={styles.left}>
396414
<div className={styles.sub_title}> Steps </div>
397415
<div className={styles.left_upper}>
@@ -407,21 +425,27 @@ class PageFour extends React.Component {
407425
})
408426
}
409427
</div>
410-
<div>
428+
<div className={styles.sub_title}> Step Info </div>
429+
<div className={styles.step_info}>
430+
{
431+
stepInfo[this.state.stepInfoIndex]
432+
}
433+
</div>
434+
{/* <div>
411435
<div className={styles.sub_title}> Step Info </div>
412436
<div className={styles.step_info}>
413437
{
414438
stepInfo[this.state.stepInfoIndex]
415439
}
416440
</div>
417-
</div>
441+
</div> */}
418442
</div>
419443
<div className={styles.middle}>
420-
<Stage width={canvasWidth_Middle} height={canvasHeight_Middle}
444+
<Stage width={this.state.canvasWidth_Middle} height={this.state.canvasHeight_Middle}
421445
options={{backgroundColor: 0xffffff}} key={'main-graph'}>
422446
{
423447

424-
sprites.map((sprite, i) => {
448+
sprites && sprites.map((sprite, i) => {
425449
// Get the texture name
426450
var textureName = sprite.prefabimage
427451
// Get the color of the sprite
@@ -432,17 +456,17 @@ class PageFour extends React.Component {
432456
// Initialize the rotation of the sprite
433457
var rotation = 0
434458
// Initialize the x-axis coordinate position of the sprite
435-
var x = sprite.minX * canvasHeight_Middle
459+
var x = sprite.minX * this.state.canvasHeight_Middle
436460
// Initialize the y-axis coordinate position of the sprite
437-
var y = canvasHeight_Middle - sprite.maxY * canvasHeight_Middle
461+
var y = this.state.canvasHeight_Middle - sprite.maxY * this.state.canvasHeight_Middle
438462
// Initialize the anchor (i.e. the origin point) of the sprite
439463
var anchor = (0, 0)
440464
// Update the anchor, rotation, (x,y) location if the sprite need to be rotated
441465
if ('rotate' in sprite){
442466
anchor = (0.5, 0.5)
443467
rotation = sprite.rotate * Math.PI / 180;
444-
x = sprite.minX * canvasHeight_Middle + (sprite.maxX - sprite.minX) * canvasHeight_Middle/2
445-
y = canvasHeight_Middle - sprite.minY * canvasHeight_Middle
468+
x = sprite.minX * this.state.canvasHeight_Middle + (sprite.maxX - sprite.minX) * this.state.canvasHeight_Middle/2
469+
y = this.state.canvasHeight_Middle - sprite.minY * this.state.canvasHeight_Middle
446470
}
447471
// Draw the sprite with a text
448472
if (sprite.showname) {
@@ -456,17 +480,17 @@ class PageFour extends React.Component {
456480
rotation = {rotation}
457481
x = {x}
458482
y = {y}
459-
width = {(sprite.maxX - sprite.minX) * canvasHeight_Middle}
460-
height = {(sprite.maxY - sprite.minY) * canvasHeight_Middle}
483+
width = {(sprite.maxX - sprite.minX) * this.state.canvasHeight_Middle}
484+
height = {(sprite.maxY - sprite.minY) * this.state.canvasHeight_Middle}
461485
tint = {color}
462486
/>
463487
<Text
464488
// text on the sprite
465489
text = {sprite.name}
466490
style = {{fontFamily: 'Arial', fontSize: 16, fill: 0x000000}}
467491
anchor = {(0.5, 0.5)}
468-
x = {x + (sprite.maxX - sprite.minX) * canvasHeight_Middle / 2}
469-
y = {y + (sprite.maxY - sprite.minY) * canvasHeight_Middle / 2}
492+
x = {x + (sprite.maxX - sprite.minX) * this.state.canvasHeight_Middle / 2}
493+
y = {y + (sprite.maxY - sprite.minY) * this.state.canvasHeight_Middle / 2}
470494
/>
471495
</>
472496
)
@@ -482,8 +506,8 @@ class PageFour extends React.Component {
482506
rotation = {rotation}
483507
x = {x}
484508
y = {y}
485-
width = {(sprite.maxX - sprite.minX) * canvasHeight_Middle}
486-
height = {(sprite.maxY - sprite.minY) * canvasHeight_Middle}
509+
width = {(sprite.maxX - sprite.minX) * this.state.canvasHeight_Middle}
510+
height = {(sprite.maxY - sprite.minY) * this.state.canvasHeight_Middle}
487511
tint = {color}
488512
/>
489513
</>
@@ -492,7 +516,8 @@ class PageFour extends React.Component {
492516
})
493517
}
494518
</Stage>
495-
<div style={{height:'50px'}}>
519+
<div className={styles.btn_box}>
520+
<div>
496521
<IconButton color="primary" style={{float:'left', marginLeft:'6%', marginRight:'5%'}} onClick={()=>{this.handlePreviousClick(this.state.stepInfoIndex);}}>
497522
<SkipPreviousIcon fontSize="large" />
498523
</IconButton>
@@ -522,10 +547,11 @@ class PageFour extends React.Component {
522547
// onChangeCommitted={this.handleSpeedScroll()}
523548
/>
524549
</div>
550+
</div>
525551
</div>
526552

527553
<div className={styles.right}>
528-
<div style={{marginTop:'5px', marginBottom:'5px'}}>
554+
<div style={{marginTop:'5px', marginBottom:'5px', width: 220}}>
529555
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleShowGoalClick()}}>
530556
Show the Goal
531557
</Button>
@@ -534,12 +560,12 @@ class PageFour extends React.Component {
534560
Export
535561
</Button>
536562
</div>
537-
<div className={styles.sub_title}>
538-
<div className={styles.sub_title_key}>Subgoal</div>
539-
<div className={styles.sub_title_selected}>{Object.keys(this.state.selectedSubGoals || {}).length}/{subGoal.size}</div>
563+
<div className={styles.sub_title} style={{position: 'relative'}}>
564+
<span className={styles.sub_title_key}>Subgoal</span>
565+
<span className={styles.sub_title_selected}>{Object.keys(this.state.selectedSubGoals || {}).length}/{subGoal.size}</span>
540566
</div>
541567
<div className={styles.sub_list}>
542-
{
568+
{ sprites &&
543569
[...subGoal.keys()].map(key => {
544570
return <div className={styles.sub_item + ' ' + (this.state.selectedSubGoals[key] ? styles.highlight_item : ' ')}
545571
key={key} onClick={()=> {this.handleSubItemClick(key)}}>

‎src/pages/PageFour/index.less‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
11
.container {
22
display: flex;
3+
justify-content: space-around;
4+
padding: 20px;
5+
margin: 0 10px;
6+
height: calc(100% - 115px);
7+
border-radius: 4px;
8+
background: #ffffff;
39
}
410

511
.left {
6-
flex-grow: 1;
7-
width: 250px;
12+
// flex-grow: 1;
13+
max-width: 300px;
814
}
915

1016
.left_upper {
11-
height: 250px;
12-
overflow-y: scroll;
17+
height: calc(50% - 32px);
18+
overflow-y: auto;
1319

1420
}
1521

1622
.middle {
17-
flex-grow: 2;
23+
// flex-grow: 2;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: space-between;
27+
padding: 15px;
1828
}
1929

2030
.right {
21-
flex-grow: 1;
22-
width: 220px;
31+
// flex-grow: 1;
32+
width: 250px;
2333
}
2434

2535
.stage_item {
@@ -49,29 +59,31 @@ ul {
4959
text-align: center;
5060
padding: 5px;
5161
font-weight: bold;
62+
height: 22px;
5263
//border: 1px solid red;
53-
display: flex;
64+
// display: flex;
5465
}
5566

5667
.sub_title_key {
5768
flex-grow: 1;
5869
}
5970

6071
.sub_title_selected {
61-
text-align: right;
72+
position: absolute;
73+
right: 8px;
6274
}
6375

6476
.step_info {
6577
white-space: pre;
6678
text-align: left;
67-
height: 220px;
79+
height: calc(50% - 32px);
6880
width: 100%;
69-
overflow-y: scroll;
81+
overflow-y: auto;
7082
}
7183

7284
.sub_list {
7385
height: 460px;
74-
overflow-y: scroll;
86+
overflow-y: auto;
7587
}
7688

7789
.sub_list::-webkit-scrollbar {
@@ -136,3 +148,7 @@ ul {
136148
.sub_item_menu_item:hover {
137149
background-color: #bbb;
138150
}
151+
152+
.btn_box {
153+
height: 50px;
154+
}

‎src/pages/PageOne/dropAndFetch.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
8686

8787
return (
8888
<React.Fragment>
89-
<div>
90-
<Container component="main" className={css.dropareaBox}>
89+
<div className={css.dropareaBox}>
90+
<div>
9191
{dragsAndDrops.map((drag) => (
9292
<DropZone
9393
key={drag.name}
@@ -98,8 +98,8 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
9898
/>
9999
))}
100100
{loading && <div className={css.loadingBox}/>}
101-
</Container>
102-
<Container maxWidth="sm" component="main">
101+
</div>
102+
<div>
103103
<div className={css.buttonBox}>
104104
<Button
105105
variant="contained"
@@ -121,7 +121,7 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
121121
{loading && <CircularProgress size={24} className={css.loading}/>}
122122
</div>
123123
</div>
124-
</Container>
124+
</div>
125125
</div>
126126
</React.Fragment>
127127
);

‎src/pages/PageOne/dropZone.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,17 @@ export default function DropZone({ name, desc, fileType, onFileLoad }) {
4141

4242
return (
4343
<div className={css.dropzoneBox}>
44-
<Typography variant="h6" align="center" color="textPrimary" component="p">
45-
<b>{name} File </b>
46-
<br />
47-
{desc}
48-
</Typography>
44+
<div>
45+
<div className={css.fileTitle}><b>{name} File </b></div>
46+
<div className={css.fileDesc}>{desc}</div>
47+
</div>
4948
<DropzoneArea
5049
acceptedFiles={[".pddl"]}
5150
filesLimit={1}
5251
onDrop={(file) => onDrop(file)}
5352
dropzoneText={dropText}
53+
className={css.dropzoneAreaBox}
54+
// maxWidth={'320px'}
5455
/>
5556
</div>
5657
);

0 commit comments

Comments
 (0)