Skip to content

Commit 4f0923b

Browse files
Meet1103Meet1103
authored
Merge pull request #93 from Dhaval1403/dev
Dev
2 parents 2bbb61c + 8451401 commit 4f0923b

8 files changed

Lines changed: 157 additions & 95 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "master-the-event-loop",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"private": true,
55
"dependencies": {
66
"@testing-library/jest-dom": "^4.2.4",

‎src/components/Callstack/Callstack.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { Component } from 'react'
22
import { connect } from 'react-redux'
33

4-
import { removeFunctionFromCallstack } from './../../redux/callstack/callstack.actions'
5-
import { pushToConsole } from './../../redux/Console/Console.actions'
6-
import { addToWebApi } from './../../redux/WebApiRedux/wepApi.actions'
7-
84
import {
95
ConsoleContainer,
106
ConsoleData,
@@ -53,13 +49,6 @@ class Callstack extends Component {
5349

5450
const mapStateToProps = (state) => ({
5551
callstack: state.callstack.stack,
56-
isOccupied: state.callstack.isOccupied,
57-
})
58-
59-
const mapDispatchToProps = (dispatch) => ({
60-
removeFunctionFromCallstack: () => dispatch(removeFunctionFromCallstack()),
61-
consoleApi: (message) => dispatch(pushToConsole(message)),
62-
addToWebApi: (funcData) => dispatch(addToWebApi(funcData)),
6352
})
6453

65-
export default connect(mapStateToProps, mapDispatchToProps)(Callstack)
54+
export default connect(mapStateToProps, null)(Callstack)

‎src/components/Controls/Controls.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class Controls extends React.Component {
4343
padding="8px 8px"
4444
margin="2px"
4545
onClick={this.startInterval}
46-
disabled={this.state.timerId ? true : false}
46+
disabled={this.props.controls.isRunning ? true : false}
4747
>
4848
Play
4949
</ButtonStyled>
@@ -62,6 +62,7 @@ const mapStateToProps = (state) => ({
6262
callstack: state.callstack.stack,
6363
callbackQueue: state.callbackQueue.stack,
6464
editor: state.editor,
65+
controls: state.controls,
6566
})
6667

6768
const mapDispatchToProps = (dispatch) => ({

‎src/components/Editor/Editor.js‎

Lines changed: 102 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import * as actions from '../../redux/editor/editor.actions'
44
import { Controlled as CodeMirror } from 'react-codemirror2'
55
import Classes from './editor.module.css'
66
import { ConsoleContainer, ConsoleData, ConsoleHeader, ConsoleTitle } from '../../styles/console'
7+
78
import { Box } from '../../styles/flex'
89
import Controls from '../Controls/Controls'
910

1011
import {
1112
addFunctionToCallstack,
1213
changeCallstackState,
14+
removeFunctionFromCallstack,
1315
} from './../../redux/callstack/callstack.actions'
1416
import {
1517
playAnimation,
@@ -402,19 +404,60 @@ class Editor extends Component {
402404
},
403405
}) => ({ start: firstOpenIndex.lineNo, end: lastCloseIndex.lineNo })
404406

405-
iterateThroughLines = function* it(editor) {
406-
let currentLine = 0
407-
let preservedLine = null
407+
//!-------------------------------------------------------------------------------------------
408+
409+
highLightAndUnhighLightLine = (editor, start, end, scrollTo) => {
410+
this.higlightCharacters(editor, start, end)
411+
editor.scrollIntoView({ line: scrollTo, ch: 0 })
412+
//this.props.editor.scrollIntoView({ left: 0, top: scrollTo, right: 0, bottom: 0 }, 10)
413+
setTimeout(() => {
414+
this.removeHiglightFromCharacters(editor, start, end)
415+
}, 500)
416+
}
417+
418+
handleThreats = (start, end) => {
419+
const functionBodyGenerator = this.iterateThroughLines(end, start + 1)
408420

409-
this.props.changeCallstackState(true)
410-
this.props.playAnimation()
421+
this.threadStates[this.threadStates.length - 1] = false
422+
this.threadStates.push(true)
423+
this.currentThreadStateId = this.threadStates.length - 1
424+
console.warn('INIT NEW THREAD:', this.threadStates, this.currentThreadStateId)
425+
const subLevel = setInterval(() => {
426+
const generatorValues = functionBodyGenerator.next()
427+
428+
console.error('Generatorvalues: ', generatorValues)
429+
if (!generatorValues.done) {
430+
this.threadStates[this.currentThreadStateId] = true
431+
} else {
432+
clearInterval(subLevel)
433+
this.threadStates.pop()
434+
this.currentThreadStateId--
435+
this.threadStates[this.currentThreadStateId] = true
436+
this.props.removeFunctionFromCallstack()
437+
console.warn('NEW THREAD DESTROYED:', this.threadStates, this.currentThreadStateId)
438+
}
439+
}, this.props.animationDuration)
440+
}
441+
442+
threadStates = [true]
443+
currentThreadStateId = 0
444+
445+
iterateThroughLines = function* it(editorLineCount, startLine = 0) {
446+
let currentLine = startLine
447+
const editor = this.props.editor
448+
console.error('STARTED THE GENERATOR WITH, ', editorLineCount, startLine)
449+
450+
if (this.threadStates[0]) {
451+
this.props.changeCallstackState(true)
452+
this.props.playAnimation()
453+
}
411454

412-
while (currentLine < editor.lineCount()) {
455+
while (currentLine < editorLineCount) {
413456
let startHighlight = currentLine
414457
let endHighlight = currentLine
415-
editor.scrollIntoView({ line: currentLine, ch: 0 })
416458
const isFunctionCall =
417459
editor.getLine(currentLine) !== undefined ? editor.getLine(currentLine).split('(') : ['']
460+
isFunctionCall[0] = isFunctionCall[0].trim()
418461
console.warn(isFunctionCall)
419462
const isWebApi =
420463
isFunctionCall[0] !== '' && (window[isFunctionCall[0]] || isFunctionCall[0].includes('.then'))
@@ -433,11 +476,10 @@ class Editor extends Component {
433476
if (!isFunctionCall[0].includes('function')) {
434477
// if we found a function name within the named function hash table
435478
if (checkIfNamedFunction.length > 0) {
436-
const { start, end } = this.returnOpeningAndClosingLine(checkIfNamedFunction[0])
479+
const { start, end } = this.returnOpeningAndClosingLine(checkIfNamedFunction[0].trim())
437480

438481
startHighlight = start
439482
endHighlight = end
440-
preservedLine = currentLine
441483
currentLine = end
442484
} else {
443485
// if we found a anonymouse function within the anonymouse function hash table
@@ -451,7 +493,7 @@ class Editor extends Component {
451493
currentLine = end
452494

453495
this.props.addFunctionToCallstack({
454-
name: mainMethod[0],
496+
name: mainMethod[0].trim(),
455497
delay: 1000,
456498
webApi: isWebApi,
457499
message: undefined,
@@ -477,30 +519,23 @@ class Editor extends Component {
477519
} else {
478520
if (callFunction) {
479521
const { start, end } = this.returnOpeningAndClosingLine(callFunction)
480-
startHighlight = start
481-
endHighlight = end
482-
this.higlightCharacters(editor, currentLine)
522+
523+
this.highLightAndUnhighLightLine(editor, currentLine, currentLine, currentLine)
483524

484525
this.props.addFunctionToCallstack({
485-
name: isFunctionCall[0],
526+
name: isFunctionCall[0].trim(),
486527
delay: 1000,
487528
webApi: isWebApi,
488529
message: undefined,
489-
block: false,
530+
block: true,
490531
})
491-
setTimeout(() => {
492-
this.removeHiglightFromCharacters(editor, currentLine, currentLine)
493-
}, 500)
532+
533+
this.handleThreats(start, end)
534+
this.highLightAndUnhighLightLine(editor, start, end, start)
494535
}
495536
}
496537
}
497538
}
498-
this.higlightCharacters(editor, startHighlight, endHighlight)
499-
500-
setTimeout(() => {
501-
this.removeHiglightFromCharacters(editor, startHighlight, endHighlight)
502-
}, 500)
503-
yield console.error('EDITOR LINE: ', currentLine)
504539
} else {
505540
if (checkIfNamedFunction.length > 0) {
506541
const { start, end } = this.returnOpeningAndClosingLine(checkIfNamedFunction[0])
@@ -516,24 +551,32 @@ class Editor extends Component {
516551
endHighlight = end
517552
currentLine = end
518553
}
519-
this.higlightCharacters(editor, startHighlight, endHighlight)
520-
521-
setTimeout(() => {
522-
this.removeHiglightFromCharacters(editor, startHighlight, endHighlight)
523-
}, 500)
524554
}
555+
this.highLightAndUnhighLightLine(editor, startHighlight, endHighlight, endHighlight)
525556
currentLine++
557+
yield 'go on'
526558
}
559+
yield 'outside of the gernator loop'
560+
561+
if (this.threadStates[0]) {
562+
//!this.threadStates.length === 1 &&
563+
while (this.props.callbackQueue.stack.length > 0) {
564+
console.error('CALLBACKQUEUE LENGTH ', this.props.callbackQueue.stack.length)
565+
if (this.props.callbackQueue.stack.length > 0) {
566+
this.props.changeCallstackState(false)
567+
}
568+
yield 'playing'
569+
}
527570

528-
while (this.props.callbackQueue.stack.length > 0) {
529-
console.error('CALLBACKQUEUE LENGTH ', this.props.callbackQueue.stack.length)
530-
if (this.props.callbackQueue.stack.length > 0) {
531-
this.props.changeCallstackState(false)
571+
yield this.props.stopAnimation()
572+
} else {
573+
let yieldThroughThreads = 0
574+
while (yieldThroughThreads <= this.threadStates.length) {
575+
yield yieldThroughThreads
576+
yieldThroughThreads++
532577
}
533-
yield 'playing'
534578
}
535-
536-
yield this.props.stopAnimation()
579+
return
537580
}
538581

539582
editorDidMount = () => {
@@ -542,40 +585,48 @@ class Editor extends Component {
542585
this.unHiglightLine(editor, highlightedLine)
543586
this.loadStateWithCollapsable(editor, 0)
544587
this.loadStateWithFunctions(editor, 0)
545-
const generator = this.iterateThroughLines(editor)
588+
const generator = this.iterateThroughLines(editor.lineCount())
546589
//console.log(generator)
547-
setInterval(() => generator.next(), 1500)
590+
const interv = setInterval(() => {
591+
if (this.threadStates[0]) {
592+
if (generator.next().done) {
593+
clearInterval(interv)
594+
}
595+
}
596+
}, this.props.animationDuration)
548597
}
549598

550599
render() {
551600
return (
552601
<>
553602
<ConsoleContainer style={{ padding: '5px' }}>
554603
<ConsoleHeader>
555-
<Box display="flex" justifyContent="space-around" alignItems="center">
556-
<ConsoleTitle p="10px">Code Editor</ConsoleTitle>
557-
</Box>
558-
<Box display="flex" justifyContent="flex-end" alignItems="center">
559-
<Controls loadFunctions={this.editorDidMount} />
560-
</Box>
604+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
605+
<Box display="flex" justifyContent="space-around" alignItems="center" />
606+
<Box display="flex" justifyContent="space-around" alignItems="center">
607+
<ConsoleTitle p="10px">Code Editor</ConsoleTitle>
608+
</Box>
609+
<Box display="flex" justifyContent="flex-end" alignItems="center">
610+
<Controls loadFunctions={this.editorDidMount} />
611+
</Box>
612+
</div>
561613
</ConsoleHeader>
562-
<ConsoleData>
614+
<ConsoleData style={{ height: '400px' }}>
563615
<Box>
564616
<div className={Classes.container}>
565617
<CodeMirror
566618
className={Classes.codeMirror}
567619
value={this.props.data}
568620
editorDidMount={(editor) => {
621+
editor.setSize('100%', '350px')
569622
this.props.setEditor(editor)
570-
//this.editorDidMount
571-
//editor.setSize('100%', '100%')
572623
}}
573624
options={{
574625
mode: 'javascript',
575626
theme: 'material',
576627
tabSize: 2,
577628
lineNumbers: true,
578-
scrollbarStyle: null,
629+
//scrollbarStyle: null,
579630
lineWrapping: true,
580631
}}
581632
onCursor={this.handleCursor}
@@ -599,6 +650,7 @@ const mapStateToProps = (state) => {
599650
editor: { editor, highlightedLines, collapsableLines, data, functions },
600651
callstack: { isOccupied },
601652
callbackQueue,
653+
controls: { animationDuration },
602654
} = state
603655

604656
return {
@@ -609,6 +661,7 @@ const mapStateToProps = (state) => {
609661
functions,
610662
isOccupied,
611663
callbackQueue,
664+
animationDuration,
612665
}
613666
}
614667

@@ -626,6 +679,7 @@ const mapDispatchToProps = (dispatch) => {
626679
playAnimation: () => dispatch(playAnimation()),
627680
pauseAnimation: () => dispatch(pauseAnimation()),
628681
stopAnimation: () => dispatch(stopAnimation()),
682+
removeFunctionFromCallstack: () => dispatch(removeFunctionFromCallstack()),
629683
}
630684
// editorMount
631685
}

‎src/redux/callstack/callstack.reducer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@ export const callstackReducer = (state = initalState, action) => {
7070
return { ...state, stack, isOccupied: action.payload }
7171
case ADD_TO_CALLSTACK:
7272
// return { ...state, stack: [...state.stack, action.payload], isOccupied: true }
73-
return { ...state, stack: [action.payload, ...state.stack] }
73+
return { ...state, stack: [...state.stack, action.payload] }
7474
case REMOVE_FROM_CALLSTACK:
7575
const changeStack = [...state.stack]
76-
changeStack.shift()
76+
changeStack.pop()
7777
return { ...state, stack: [...changeStack] }
7878
default:
7979
return state

‎src/redux/callstack/callstack.sagas.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { put, delay, call, take, fork, select } from 'redux-saga/effects'
1+
import { put, delay, call, take, fork, select, cancel } from 'redux-saga/effects'
22
import { ADD_TO_CALLSTACK, REMOVE_FROM_CALLSTACK } from './callstack.types'
33
import { webApiTypes } from './../WebApiRedux/webApi.types'
44
import { consoleTypes } from './..//Console/Console.types'
@@ -13,9 +13,9 @@ const consoleVariations = [
1313
'console.warn',
1414
]
1515

16-
function* pushOrRemove(payload) {
17-
yield call(removeFromStack, payload)
18-
16+
function* pushOrRemove(payload, task) {
17+
const state = yield select((state) => state.controls.animationDuration)
18+
yield delay(state - 50)
1919
if (consoleVariations.includes(payload.name)) {
2020
yield put({
2121
type: consoleTypes.PUSH_TO_CONSOLE,
@@ -26,20 +26,17 @@ function* pushOrRemove(payload) {
2626
if (payload.webApi) {
2727
yield fork(addToWebApi, payload)
2828
}
29+
yield call(removeFromStack, payload, task)
2930
}
3031

31-
function* removeFromStack(payload) {
32-
//payload.block = true
33-
yield delay(800)
34-
const state = yield select()
32+
export function* removeFromStack(payload, task) {
33+
const state = yield select((state) => state.callstack.stack)
34+
console.error('STACK STATE: ', state)
3535
if (payload.block) {
36-
console.warn('LET IT BE')
36+
console.warn('LET IT BE ', payload)
37+
yield cancel(task)
3738
} else {
38-
if (state.callstack.stack.length > 1) {
39-
while (state.callstack.stack.length > 0) {
40-
yield put({ type: REMOVE_FROM_CALLSTACK })
41-
}
42-
}
39+
console.warn('REMOVE FROM CALLSTACK SAGA')
4340
yield put({ type: REMOVE_FROM_CALLSTACK })
4441
}
4542
}
@@ -54,6 +51,9 @@ function* addToWebApi(payload) {
5451
export function* watchAddToCallStackAsync() {
5552
while (true) {
5653
const { payload } = yield take(ADD_TO_CALLSTACK)
57-
yield call(pushOrRemove, payload)
54+
const workerTask = yield fork(take, REMOVE_FROM_CALLSTACK)
55+
yield cancel(workerTask)
56+
57+
yield call(pushOrRemove, payload, workerTask)
5858
}
5959
}

0 commit comments

Comments
 (0)