Skip to content

Commit 04878a3

Browse files
author
Pippo Ramos
authored
Merge pull request #20 from visual-heuristics/feat_visualization
fix the lack of animation between steps
2 parents b411cdd + fc166c4 commit 04878a3

File tree

1 file changed

+45
-27
lines changed

1 file changed

+45
-27
lines changed

‎src/pages/PageFour/index.js‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -90,34 +90,36 @@ class PageFour extends React.Component {
9090
const previousStageIndex = this.state.blockIndex;
9191
const previousStage = allStages[previousStageIndex];
9292
const newStage = allStages[index];
93+
const times = 20
94+
// this.setState({
95+
// drawBlocks: [...newStage]
96+
// });
97+
//
98+
// requestAnimationFrame(() => {
99+
//
100+
// })
93101

94-
// Differ 2 sets of blocks
95-
// - find out, different blocks;
96-
// - blockId | blockIndex
97-
// - blockId => src, x1, y1, dest, x2, y2
98-
// - blockId => xn, yn: x1 + (x2-x1)/10 * n, ...
99-
// - blockId => xn, yn
100-
// - [{blockId1: [xn, yn], blockId2: [xn, yn]},
101-
// {},
102-
// {}
103-
// ]
104-
// => movedBlocks
105102
const movedBlocks = {};
106103
previousStage.map((eachBlock, i) => {
104+
if(eachBlock.name !== newStage[i].name) return
107105
if(eachBlock.x !== newStage[i].x || eachBlock.y !== newStage[i].y) {
108106
// 10
109107
// { blockId => [{x:x1,y:y1}, {x: x2, y: y2}, , x3, .... x10] }
110108
const changingPos = [];
111-
for (let j = 0; j < 50; j++) {
109+
for (let j = 0; j < times; j++) {
112110
const specificPos = {}
113-
specificPos.x = eachBlock.x + (newStage[i].x - eachBlock.x)/50 * (j + 1)
114-
specificPos.y = eachBlock.y + (newStage[i].y - eachBlock.y)/50 * (j + 1)
111+
// specificPos.x = eachBlock.x + (newStage[i].x - eachBlock.x)/50 * (j + 1)
112+
// specificPos.y = eachBlock.y + (newStage[i].y - eachBlock.y)/50 * (j + 1)
113+
specificPos.minX = eachBlock.minX + (newStage[i].minX - eachBlock.minX)/times * (j + 1);
114+
specificPos.maxX = eachBlock.maxX + (newStage[i].maxX - eachBlock.maxX)/times * (j + 1);
115+
specificPos.minY = eachBlock.minY + (newStage[i].minY - eachBlock.minY)/times * (j + 1);
116+
specificPos.maxY = eachBlock.maxY + (newStage[i].maxY - eachBlock.maxY)/times * (j + 1);
115117
changingPos.push(specificPos)
116118
}
117119
movedBlocks[eachBlock.name] = changingPos
118120
}
119121
})
120-
//console.log(movedBlocks)
122+
121123
// draw 100 times, during 2 seconds, slash: 20ms
122124
let i = 0;
123125
if(this.handler) {
@@ -130,25 +132,33 @@ class PageFour extends React.Component {
130132
const move = movedBlocks[block.name];
131133
// I need to move
132134
// Replace old x, y, with computed x, y (which will change per 20ms)
135+
// return block;
136+
133137
return {
134138
...block,
135-
x: move[i].x,
136-
y: move[i].y
137-
}
139+
minX: move[i].minX,
140+
maxX: move[i].maxX,
141+
maxY: move[i].maxY,
142+
minY: move[i].minY
143+
};
138144
} else {
139145
// Keep at original position
140146
return block;
141147
}
142148
})
149+
143150
this.setState({
144151
drawBlocks: [...newDrawBlocks]
145152
});
146153
i++;
147-
//console.info(i, newDrawBlocks);
154+
// console.info(i, newDrawBlocks);
148155

149-
if( i >= 50){
156+
if( i >= times){
150157
clearInterval(handler);
151158
this.handler = false;
159+
this.setState({
160+
drawBlocks: [...newStage]
161+
});
152162
}
153163
}, 60/this.state.playSpeed);
154164
this.handler = handler;
@@ -170,6 +180,7 @@ class PageFour extends React.Component {
170180
playButtonColor: 'primary',
171181
pauseButtonColor: 'default'
172182
});
183+
this.diff(index)
173184
}
174185

175186
handleStepClick(value) {
@@ -189,6 +200,7 @@ class PageFour extends React.Component {
189200
playButtonColor: 'primary',
190201
pauseButtonColor: 'default'
191202
});
203+
this.diff(index)
192204
//console.info('DOM:', this.stepItem[index]);
193205
this.stepItem[index].current.scrollIntoView();
194206
}
@@ -207,6 +219,7 @@ class PageFour extends React.Component {
207219
stepInfoIndex: previousIndex,
208220
selectedSubGoals: map
209221
});
222+
this.diff(previousIndex)
210223
//console.info('DOM:', this.stepItem[index]);
211224
this.stepItem[previousIndex].current.scrollIntoView();
212225
}
@@ -226,6 +239,7 @@ class PageFour extends React.Component {
226239
stepInfoIndex: nextIndex,
227240
selectedSubGoals: map
228241
});
242+
this.diff(nextIndex)
229243
// console.info('DOM:', this.stepItem[index]);
230244
this.stepItem[nextIndex].current.scrollIntoView();
231245
}
@@ -236,7 +250,6 @@ class PageFour extends React.Component {
236250
if(nextIndex === steps.length) {
237251
alert("It's already the final state!")
238252
} else {
239-
this.diff(nextIndex)
240253
const map = this.highlight(nextIndex)
241254
this.setState({
242255
blockIndex: nextIndex,
@@ -245,6 +258,7 @@ class PageFour extends React.Component {
245258
playButtonColor: 'default',
246259
pauseButtonColor: 'primary'}
247260
)
261+
this.diff(nextIndex)
248262
this.stepItem[nextIndex].current.scrollIntoView();
249263

250264
nextIndex++;
@@ -253,8 +267,8 @@ class PageFour extends React.Component {
253267
}
254268
if(steps.length > nextIndex) {
255269
const run = () => {
256-
this.diff(nextIndex)
257270
const map = this.highlight(nextIndex)
271+
this.diff(nextIndex)
258272
this.setState({
259273
blockIndex: nextIndex,
260274
stepInfoIndex: nextIndex,
@@ -275,12 +289,12 @@ class PageFour extends React.Component {
275289
} else {
276290
// setInterval effect
277291
// detect change of playSpeed
278-
const handlerPlay = setTimeout(run, 1000/this.state.playSpeed);
292+
const handlerPlay = setTimeout(run, 3000/this.state.playSpeed);
279293
this.handlerPlay = handlerPlay;
280294
}
281295
};
282296

283-
const handlerPlay = setTimeout(run, 1000/this.state.playSpeed);
297+
const handlerPlay = setTimeout(run, 3000/this.state.playSpeed);
284298
this.handlerPlay = handlerPlay;
285299
}
286300
}
@@ -365,9 +379,10 @@ class PageFour extends React.Component {
365379

366380
render() {
367381
// Get all sprites
368-
var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
382+
// var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
383+
var sprites = this.state.drawBlocks;
369384
// Sort sprites by their depth
370-
sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
385+
sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
371386

372387
return (
373388
<div className={styles.container}>
@@ -404,7 +419,10 @@ class PageFour extends React.Component {
404419
// Get the texture name
405420
var textureName = sprite.prefabimage
406421
// Get the color of the sprite
407-
var color = utils.rgb2hex([sprite.color.r, sprite.color.g, sprite.color.b])
422+
var color = null
423+
if(sprite.color) {
424+
color = utils.rgb2hex([sprite.color.r, sprite.color.g, sprite.color.b])
425+
}
408426
// Initialize the rotation of the sprite
409427
var rotation = 0
410428
// Initialize the x-axis coordinate position of the sprite

0 commit comments

Comments
 (0)