Skip to content

Commit 398348b

Browse files
author
Zhou
committed
merge conflicts fixed
2 parents d570df0 + a47d723 commit 398348b

File tree

7 files changed

+119
-69
lines changed

7 files changed

+119
-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: 52 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 = 800
18-
const canvasHeight = 470
17+
// const canvasWidth = 800
18+
// const canvasHeight = 470
1919

2020
function valuetext(value) {
2121
return `${value}`;
@@ -31,6 +31,7 @@ class PageFour extends React.Component {
3131
this.stepItem[i] = React.createRef();
3232
})
3333

34+
3435
this.state = {
3536
// data that will be used/changed in render function
3637
stageIndex: 0,
@@ -41,14 +42,27 @@ class PageFour extends React.Component {
4142
drawSprites: allStages[0],
4243
playSpeed: 3,
4344
playButtonColor: 'primary',
44-
pauseButtonColor: 'default'
45+
pauseButtonColor: 'default',
46+
canvasWidth: 720,
47+
canvasHeight: 470,
4548
}
4649

4750
// Every function that interfaces with UI and data used
4851
// in this class needs to bind like this:
4952
this.handleOnClick = this.handleOnClick.bind(this);
53+
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
5054
}
5155

56+
updateWindowDimensions() {
57+
if(this.refDom){
58+
const {clientWidth, clientHeight} = this.refDom;
59+
const tmp_width = Math.max(clientWidth - 550, 720)
60+
this.setState({ canvasWidth: tmp_width, canvasHeight: Math.min(tmp_width / 2, clientHeight - 120) },(val)=>{
61+
console.log('client.inner',clientWidth, clientHeight);
62+
});
63+
}
64+
}
65+
5266
handleOnClick() {
5367
this.props.history.push('/')
5468
}
@@ -66,6 +80,10 @@ class PageFour extends React.Component {
6680
}
6781
}
6882

83+
componentDidMount() {
84+
this.updateWindowDimensions();
85+
window.addEventListener('resize', this.updateWindowDimensions);
86+
}
6987

7088
highlight(index) {
7189
const highlightSubGoals = stepSubgoalMap.get(index) || [];
@@ -361,17 +379,18 @@ class PageFour extends React.Component {
361379
if(this.handlerPlay) {
362380
clearInterval(this.handlerPlay);
363381
}
382+
this.refDom.removeEventListener('resize', this.updateWindowDimensions);
364383
}
365384

366385
render() {
367386
// Get all sprites
368387
// var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
369388
var sprites = this.state.drawSprites;
370389
// Sort sprites by their depth
371-
sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
390+
sprites && sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
372391

373392
return (
374-
<div className={styles.container}>
393+
<div className={styles.container} ref={(ref)=>this.refDom=ref}>
375394
<div className={styles.left}>
376395
<div className={styles.sub_title}> Steps </div>
377396
<div className={styles.left_upper}>
@@ -387,21 +406,27 @@ class PageFour extends React.Component {
387406
})
388407
}
389408
</div>
390-
<div>
409+
<div className={styles.sub_title}> Step Info </div>
410+
<div className={styles.step_info}>
411+
{
412+
stepInfo[this.state.stepInfoIndex]
413+
}
414+
</div>
415+
{/* <div>
391416
<div className={styles.sub_title}> Step Info </div>
392417
<div className={styles.step_info}>
393418
{
394419
stepInfo[this.state.stepInfoIndex]
395420
}
396421
</div>
397-
</div>
422+
</div> */}
398423
</div>
399424
<div className={styles.middle}>
400-
<Stage width={canvasWidth} height={canvasHeight}
425+
<Stage width={this.state.canvasWidth} height={this.state.canvasHeight}
401426
options={{backgroundColor: 0xffffff}} key={'main-graph'}>
402427
{
403428

404-
sprites.map((sprite, i) => {
429+
sprites && sprites.map((sprite, i) => {
405430
// Get the texture name
406431
var textureName = sprite.prefabimage
407432
// Get the color of the sprite
@@ -412,17 +437,17 @@ class PageFour extends React.Component {
412437
// Initialize the rotation of the sprite
413438
var rotation = 0
414439
// Initialize the x-axis coordinate position of the sprite
415-
var x = sprite.minX * canvasHeight
440+
var x = sprite.minX * this.state.canvasHeight
416441
// Initialize the y-axis coordinate position of the sprite
417-
var y = canvasHeight - sprite.maxY * canvasHeight
442+
var y = this.state.canvasHeight - sprite.maxY * this.state.canvasHeight
418443
// Initialize the anchor (i.e. the origin point) of the sprite
419444
var anchor = (0, 0)
420445
// Update the anchor, rotation, (x,y) location if the sprite need to be rotated
421446
if ('rotate' in sprite){
422447
anchor = (0.5, 0.5)
423448
rotation = sprite.rotate * Math.PI / 180;
424-
x = sprite.minX * canvasHeight + (sprite.maxX - sprite.minX) * canvasHeight/2
425-
y = canvasHeight - sprite.minY * canvasHeight
449+
x = sprite.minX * this.state.canvasHeight + (sprite.maxX - sprite.minX) * this.state.canvasHeight/2
450+
y = this.state.canvasHeight - sprite.minY * this.state.canvasHeight
426451
}
427452
// Draw the sprite with a text
428453
if (sprite.showname) {
@@ -436,17 +461,17 @@ class PageFour extends React.Component {
436461
rotation = {rotation}
437462
x = {x}
438463
y = {y}
439-
width = {(sprite.maxX - sprite.minX) * canvasHeight}
440-
height = {(sprite.maxY - sprite.minY) * canvasHeight}
464+
width = {(sprite.maxX - sprite.minX) * this.state.canvasHeight}
465+
height = {(sprite.maxY - sprite.minY) * this.state.canvasHeight}
441466
tint = {color}
442467
/>
443468
<Text
444469
// text on the sprite
445470
text = {sprite.name}
446471
style = {{fontFamily: 'Arial', fontSize: 16, fill: 0x000000}}
447472
anchor = {(0.5, 0.5)}
448-
x = {x + (sprite.maxX - sprite.minX) * canvasHeight / 2}
449-
y = {y + (sprite.maxY - sprite.minY) * canvasHeight / 2}
473+
x = {x + (sprite.maxX - sprite.minX) * this.state.canvasHeight / 2}
474+
y = {y + (sprite.maxY - sprite.minY) * this.state.canvasHeight / 2}
450475
/>
451476
</>
452477
)
@@ -462,8 +487,8 @@ class PageFour extends React.Component {
462487
rotation = {rotation}
463488
x = {x}
464489
y = {y}
465-
width = {(sprite.maxX - sprite.minX) * canvasHeight}
466-
height = {(sprite.maxY - sprite.minY) * canvasHeight}
490+
width = {(sprite.maxX - sprite.minX) * this.state.canvasHeight}
491+
height = {(sprite.maxY - sprite.minY) * this.state.canvasHeight}
467492
tint = {color}
468493
/>
469494
</>
@@ -472,7 +497,8 @@ class PageFour extends React.Component {
472497
})
473498
}
474499
</Stage>
475-
<div style={{height:'50px'}}>
500+
<div className={styles.btn_box}>
501+
<div>
476502
<IconButton color="primary" style={{float:'left', marginLeft:'6%', marginRight:'5%'}} onClick={()=>{this.handlePreviousClick(this.state.stepInfoIndex);}}>
477503
<SkipPreviousIcon fontSize="large" />
478504
</IconButton>
@@ -502,10 +528,11 @@ class PageFour extends React.Component {
502528
// onChangeCommitted={this.handleSpeedControllor()}
503529
/>
504530
</div>
531+
</div>
505532
</div>
506533

507534
<div className={styles.right}>
508-
<div style={{marginTop:'5px', marginBottom:'5px'}}>
535+
<div style={{marginTop:'5px', marginBottom:'5px', width: '220px'}}>
509536
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleShowFinalGoalClick()}}>
510537
Show the Goal
511538
</Button>
@@ -514,12 +541,12 @@ class PageFour extends React.Component {
514541
Export
515542
</Button>
516543
</div>
517-
<div className={styles.sub_title}>
518-
<div className={styles.sub_title_key}>Subgoal</div>
519-
<div className={styles.sub_title_selected}>{Object.keys(this.state.selectedSubGoals || {}).length}/{subGoal.size}</div>
544+
<div className={styles.sub_title} style={{position: 'relative'}}>
545+
<span className={styles.sub_title_key}>Subgoal</span>
546+
<span className={styles.sub_title_selected}>{Object.keys(this.state.selectedSubGoals || {}).length}/{subGoal.size}</span>
520547
</div>
521548
<div className={styles.sub_list}>
522-
{
549+
{ sprites &&
523550
[...subGoal.keys()].map(key => {
524551
return <div className={styles.sub_item + ' ' + (this.state.selectedSubGoals[key] ? styles.highlight_item : ' ')}
525552
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)