Skip to content

Commit f894872

Browse files
mezm94mezm94
authored
Add export function and add arrows in subgoals
1 parent b82fe41 commit f894872

File tree

1 file changed

+53
-25
lines changed

1 file changed

+53
-25
lines changed

‎src/pages/PageFour/index.js‎

Lines changed: 53 additions & 25 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)
@@ -348,7 +375,7 @@ class PageFour extends React.Component {
348375
<div className={styles.sub_title}> Steps </div>
349376
<div className={styles.left_upper}>
350377
{
351-
steps && steps.map((step, i) => {
378+
steps.map((step, i) => {
352379
return <div className={styles.stage_item}
353380
style={{backgroundColor: i === this.state.stepInfoIndex ? '#eef': 'white'}}
354381
onClick={()=>{this.handleSwitchStage(i);}}
@@ -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,8 +425,8 @@ class PageFour extends React.Component {
400425
return (
401426
<>
402427
<Sprite
403-
//texture = {texture}
404-
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
428+
// the image texture of the sprite
429+
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
405430
name = {sprite.name}
406431
anchor = {anchor}
407432
rotation = {rotation}
@@ -427,8 +452,7 @@ class PageFour extends React.Component {
427452
return (
428453
<>
429454
<Sprite
430-
//texture = {texture}
431-
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
455+
image = {"data:image/png;base64,"+vfg.imageTable.m_values[vfg.imageTable.m_keys.indexOf(textureName)]}
432456
name = {sprite.name}
433457
anchor={anchor}
434458
rotation = {rotation}
@@ -481,6 +505,10 @@ class PageFour extends React.Component {
481505
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleShowGoalClick()}}>
482506
Show the Goal
483507
</Button>
508+
&nbsp;&nbsp;
509+
<Button variant="contained" color="primary" size="small" onClick={()=> {this.handleExportClick()}}>
510+
Export
511+
</Button>
484512
</div>
485513
<div className={styles.sub_title}>
486514
<div className={styles.sub_title_key}>Subgoal</div>
@@ -489,19 +517,19 @@ class PageFour extends React.Component {
489517
<div className={styles.sub_list}>
490518
{
491519
[...subGoal.keys()].map(key => {
492-
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 : ' ')}
493521
key={key} onClick={()=> {this.handleSubItemClick(key)}}>
494-
{key}
495-
<div className={styles.sub_item_menu}
496-
style={{display: this.state.showKey === key ? 'block': 'none'}}>
497-
{subGoal.get(key).map(value => {
498-
return <div className={styles.sub_item_menu_item}
499-
onClick={()=>this.handleStepClick(value)}
500-
key={key + value}
501-
>Step {value}</div>
502-
})}
503-
</div>
504-
</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>;
505533
})
506534
}
507535
</div>

0 commit comments

Comments
 (0)