Skip to content

Commit 51c6367

Browse files
mezm94mezm94
authored
Add export function and add arrows in subgoals
Add export function and add arrows in subgoals
2 parents 053b2fa + 38ddbdd commit 51c6367

File tree

3 files changed

+88
-27
lines changed

3 files changed

+88
-27
lines changed

‎src/pages/PageFour/dataUtils.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,6 @@ export const stepInfo = getStepInfo();
7777
export const subGoal = getSubGoal();
7878
export const stepSubgoalMap = getStepSubgoalMap();
7979
export const vfg = contentObject;
80+
export const textContent = content
8081
//export const initialPos = getInitialBlocksPos();
8182
//export default null;

‎src/pages/PageFour/index.js‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import {Stage, Text, Sprite} from '@inlet/react-pixi';
33
import {utils} from 'pixi.js';
4-
import {subGoal, stepInfo, allStages, steps, stepSubgoalMap, vfg} from './dataUtils';
4+
import {subGoal, stepInfo, allStages, steps, stepSubgoalMap, vfg, textContent} from './dataUtils';
55
import Button from '@material-ui/core/Button';
66
import IconButton from '@material-ui/core/IconButton';
77
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
@@ -15,7 +15,7 @@ import styles from './index.less';
1515
import * as PIXI from 'pixi.js'
1616

1717
const canvasWidth_Middle = 800
18-
const canvasHeight_Middle = 480
18+
const canvasHeight_Middle = 470
1919

2020
const useStyles = makeStyles({
2121
root: {
@@ -268,15 +268,19 @@ class PageFour extends React.Component {
268268
if(this.handlerPlay) {
269269
clearTimeout(this.handlerPlay);
270270
}
271+
this.setState({
272+
playButtonColor: 'primary',
273+
pauseButtonColor: 'default'}
274+
)
271275
} else {
272276
// setInterval effect
273277
// detect change of playSpeed
274-
const handlerPlay = setTimeout(run, 3000/this.state.playSpeed);
278+
const handlerPlay = setTimeout(run, 1000/this.state.playSpeed);
275279
this.handlerPlay = handlerPlay;
276280
}
277281
};
278282

279-
const handlerPlay = setTimeout(run, 3000/this.state.playSpeed);
283+
const handlerPlay = setTimeout(run, 1000/this.state.playSpeed);
280284
this.handlerPlay = handlerPlay;
281285
}
282286
}
@@ -327,6 +331,30 @@ class PageFour extends React.Component {
327331
this.stepItem[index].current.scrollIntoView();
328332
}
329333

334+
handleExportClick(){
335+
const data = textContent
336+
let blob = new Blob([data]);
337+
let filename = "download.vfg";
338+
339+
if (typeof window.navigator.msSaveBlob !== "undefined") {
340+
window.navigator.msSaveBlob(blob, filename);
341+
} else {
342+
var blobURL = window.URL.createObjectURL(blob);
343+
// create a hidden <a> tag for download
344+
var tempLink = document.createElement("a");
345+
tempLink.style.display = "none";
346+
tempLink.href = blobURL;
347+
tempLink.setAttribute("download", filename);
348+
if (typeof tempLink.download === "undefined") {
349+
tempLink.setAttribute("target", "_blank");
350+
}
351+
document.body.appendChild(tempLink);
352+
tempLink.click();
353+
document.body.removeChild(tempLink);
354+
window.URL.revokeObjectURL(blobURL);
355+
}
356+
}
357+
330358
handleSpeedScroll(value){
331359
// console.info(value);
332360
this.setState({
@@ -337,7 +365,6 @@ class PageFour extends React.Component {
337365

338366
render() {
339367
// Get all sprites
340-
if(!vfg.visualStages) return null;
341368
var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
342369
// Sort sprites by their depth
343370
sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
@@ -374,10 +401,8 @@ class PageFour extends React.Component {
374401
{
375402

376403
sprites.map((sprite, i) => {
377-
// Get the texture from base64 image storing in the vfg file
404+
// Get the texture name
378405
var textureName = sprite.prefabimage
379-
var base = new PIXI.BaseTexture("data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]);
380-
var texture = new PIXI.Texture(base);
381406
// Get the color of the sprite
382407
var color = utils.rgb2hex([sprite.color.r, sprite.color.g, sprite.color.b])
383408
// Initialize the rotation of the sprite
@@ -400,7 +425,8 @@ class PageFour extends React.Component {
400425
return (
401426
<>
402427
<Sprite
403-
texture = {texture}
428+
// the image texture of the sprite
429+
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
404430
name = {sprite.name}
405431
anchor = {anchor}
406432
rotation = {rotation}
@@ -426,7 +452,7 @@ class PageFour extends React.Component {
426452
return (
427453
<>
428454
<Sprite
429-
texture = {texture}
455+
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
430456
name = {sprite.name}
431457
anchor={anchor}
432458
rotation = {rotation}
@@ -479,6 +505,10 @@ class PageFour extends React.Component {
479505
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleShowGoalClick()}}>
480506
Show the Goal
481507
</Button>
508+
&nbsp;&nbsp;
509+
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleExportClick()}}>
510+
Export
511+
</Button>
482512
</div>
483513
<div className={styles.sub_title}>
484514
<div className={styles.sub_title_key}>Subgoal</div>
@@ -487,19 +517,19 @@ class PageFour extends React.Component {
487517
<div className={styles.sub_list}>
488518
{
489519
[...subGoal.keys()].map(key => {
490-
return <div className={styles.sub_item + ' ' + (this.state.selectedSubGoals[key] ? styles.highlight_item : '')}
520+
return <div className={styles.sub_item + ' ' + (this.state.selectedSubGoals[key] ? styles.highlight_item : ' ')}
491521
key={key} onClick={()=> {this.handleSubItemClick(key)}}>
492-
{key}
493-
<div className={styles.sub_item_menu}
494-
style={{display: this.state.showKey === key ? 'block': 'none'}}>
495-
{subGoal.get(key).map(value => {
496-
return <div className={styles.sub_item_menu_item}
497-
onClick={()=>this.handleStepClick(value)}
498-
key={key + value}
499-
>Step {value}</div>
500-
})}
501-
</div>
502-
</div>;
522+
{key}
523+
<div className={styles.sub_item_menu}
524+
style={{display: this.state.showKey === key ? 'block': 'none'}}>
525+
{subGoal.get(key).map(value => {
526+
return <div className={styles.sub_item_menu_item}
527+
onClick={()=>this.handleStepClick(value)}
528+
key={key + value}
529+
>Step {value}</div>
530+
})}
531+
</div>
532+
</div>;
503533
})
504534
}
505535
</div>

‎src/pages/PageFour/index.less‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919

2020
.right {
21-
//flex-grow: 1;
21+
flex-grow: 1;
2222
width: 220px;
2323
}
2424

@@ -47,7 +47,7 @@ ul {
4747
.sub_title {
4848
background-color: rgb(235,235,235);
4949
text-align: center;
50-
padding: 6px;
50+
padding: 5px;
5151
font-weight: bold;
5252
//border: 1px solid red;
5353
display: flex;
@@ -70,7 +70,12 @@ ul {
7070
}
7171

7272
.sub_list {
73+
height: 460px;
74+
overflow-y: scroll;
75+
}
7376

77+
.sub_list::-webkit-scrollbar {
78+
display: none
7479
}
7580

7681
.sub_item {
@@ -81,17 +86,42 @@ ul {
8186
background-color: rgb(255, 255, 255);
8287
}
8388

89+
.sub_item:hover {
90+
background-color: #add8e6;
91+
}
92+
93+
// Add the arrow
94+
.sub_item::after{
95+
display: inline-block;
96+
padding-right: 0%;
97+
position: absolute;
98+
top: 20%;
99+
right: 5%;
100+
content: "";
101+
height: 7px;
102+
width: 7px;
103+
border: solid #bbb;
104+
border-width: 2px 2px 0 0;
105+
}
106+
107+
//Rotate the arrow
108+
.sub_item::after {
109+
-webkit-transform: rotate(135deg);
110+
transform: rotate(135deg);
111+
}
112+
84113
.highlight_item {
85-
background-color: darkgreen;
114+
background-color: rgb(2, 173, 2);
86115
}
87116

88117
.sub_item_menu {
89118
top: 22px;
90119
left: 0;
120+
text-align: center;
91121
position: absolute;
92122
background-color: rgb(246, 248, 246);
93123
z-index: 100;
94-
width: 220px;
124+
width: 99%;
95125
overflow-y: scroll;
96126
max-height: 180px;
97127
border-style: solid;
@@ -104,5 +134,5 @@ ul {
104134
}
105135

106136
.sub_item_menu_item:hover {
107-
background-color: #eee;
137+
background-color: #bbb;
108138
}

0 commit comments

Comments
 (0)