From c8dbe1d461dae1fec53e759900ba3977421c8c82 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 23 Oct 2020 17:59:58 +0100 Subject: [PATCH] Detect scroll up and scroll down --- libs/remix-ui/debugger-ui/.eslintrc | 1 + .../src/lib/step-manager/step-manager.tsx | 2 +- .../src/lib/vm-debugger/assembly-items.tsx | 63 ++++++++++--------- .../src/lib/vm-debugger/code-list-view.tsx | 10 +-- .../src/lib/vm-debugger/vm-debugger-head.tsx | 4 +- .../src/reducers/assembly-items.ts | 54 ++++++++++++++++ .../debugger-ui/src/reducers/calldata.ts | 39 ++++++++++++ 7 files changed, 131 insertions(+), 42 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts create mode 100644 libs/remix-ui/debugger-ui/src/reducers/calldata.ts diff --git a/libs/remix-ui/debugger-ui/.eslintrc b/libs/remix-ui/debugger-ui/.eslintrc index 977f139a09..c218757666 100644 --- a/libs/remix-ui/debugger-ui/.eslintrc +++ b/libs/remix-ui/debugger-ui/.eslintrc @@ -1,5 +1,6 @@ { "rules": { + "no-case-declarations": "off", "array-callback-return": "warn", "dot-location": ["warn", "property"], "eqeqeq": ["warn", "smart"], diff --git a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx index 65a97467ac..75259c179c 100644 --- a/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/step-manager/step-manager.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' import Slider from '../slider/slider' import ButtonNavigator from '../button-navigator/button-navigator' -export const StepManager = ({ stepManager, stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => { +export const StepManager = ({ stepManager: { jumpTo, traceLength, stepIntoBack, stepIntoForward, stepOverBack, stepOverForward, jumpOut, jumpNextBreakpoint, jumpPreviousBreakpoint, jumpToException, registerEvent } }) => { const [state, setState] = useState({ sliderValue: 0, revertWarning: '', diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx index ba90e77cce..66f8425ffc 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx @@ -1,27 +1,36 @@ -import React, { useState, useRef, useEffect } from 'react' +import React, { useState, useRef, useEffect, useReducer } from 'react' +import { initialState, reducer } from '../../reducers/assembly-items' import './styles/assembly-items.css' -export const AssemblyItems = ({ codeView, index }) => { - const [state, setState] = useState({ - selectedItem: 0, - opCode: [] - }) +export const AssemblyItems = ({ registerEvent }) => { + const [assemblyItems, dispatch] = useReducer(reducer, initialState) + const [selectedItem, setSelectedItem] = useState(0) + const [scrollHeight, setScrollHeight] = useState(null) const refs = useRef({}) const asmItemsRef = useRef(null) + useEffect(()=>{ + registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { + dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) + }) + }, []) + useEffect(() => { - indexChanged(index) - }, [index]) + indexChanged(assemblyItems.index) + }, [assemblyItems.index]) useEffect(() => { - opCodeChanged(codeView) - }, [codeView]) + if (asmItemsRef.current.scrollTop > scrollHeight) { + console.log('scrolling up') + } else if (asmItemsRef.current.scrollTop < scrollHeight) { + console.log('scrolling down') + } + }, [asmItemsRef.current.scrollTop]) - const indexChanged = (index) => { + const indexChanged = (index: number) => { if (index < 0) return - const { selectedItem } = state let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null - + if (currentItem) { currentItem.removeAttribute('selected') currentItem.removeAttribute('style') @@ -29,39 +38,31 @@ export const AssemblyItems = ({ codeView, index }) => { currentItem.firstChild.removeAttribute('style') } const codeView = asmItemsRef.current - + currentItem = codeView.children[index] currentItem.style.setProperty('border-color', 'var(--primary)') currentItem.style.setProperty('border-style', 'solid') currentItem.setAttribute('selected', 'selected') codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) - setState(prevState => { - return { - ...prevState, - selectedItem: index - } - }) + setSelectedItem(index) } } - const opCodeChanged = (codeView) => { - setState(prevState => { - return { - ...prevState, - opCode: codeView - } - }) + const onScroll = () => { + } + + return (
-
+
setScrollHeight(asmItemsRef.current.scrollTop)}> { - // state.opCode.map((item, i) => { - // return
refs.current[i] = ref}>{item}
- // }) + assemblyItems.display.map((item, i) => { + return
refs.current[i] = ref}>{item}
+ }) }
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx index 63ef70fbdb..0869755cb1 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/code-list-view.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react' import AssemblyItems from './assembly-items' -export const CodeListView = ({ asm }) => { +export const CodeListView = ({ registerEvent }) => { const [state, setState] = useState({ code: [], address: '', @@ -9,12 +9,6 @@ export const CodeListView = ({ asm }) => { index: null }) - useEffect(() => { - const { code, address, index } = asm - - changed(code, address, index) - }, [asm]) - const indexChanged = (index) => { if(index < 0) return setState(prevState => { @@ -41,7 +35,7 @@ export const CodeListView = ({ asm }) => { return (
- +
) } diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx index 031f3f69e9..149d27a485 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx +++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx @@ -119,8 +119,8 @@ export const VmDebuggerHead = ({ vmDebuggerHead: { registerEvent } }) => { {/* */}
- {/*
-
*/} +
+ {/*
*/}
) diff --git a/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts b/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts new file mode 100644 index 0000000000..b647f092cc --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts @@ -0,0 +1,54 @@ +import { default as deepEqual } from 'deep-equal' + +interface Action { + type: string; + payload: { [key: string]: any }; +} + +export const initialState = { + opCodes: { + code: [], + index: 0, + address: '' + }, + display: [], + index: 0, + isRequesting: false, + isSuccessful: false, + hasError: null +} + +export const reducer = (state = initialState, action: Action) => { + switch (action.type) { + case 'FETCH_OPCODES_REQUEST': + return { + ...state, + isRequesting: true, + isSuccessful: false, + hasError: null + }; + case 'FETCH_OPCODES_SUCCESS': + const opCodes = action.payload.address === state.opCodes.address ? { + ...state.opCodes, index: action.payload.index + } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload + const display = opCodes.index > 0 ? opCodes.code.slice(opCodes.index - 1, opCodes.index + 10) : opCodes.code.slice(opCodes.index, opCodes.index + 10) + + return { + opCodes, + display, + index: display.findIndex(code => code === opCodes.code[opCodes.index]), + isRequesting: false, + isSuccessful: true, + hasError: null + }; + case 'FETCH_OPCODES_ERROR': + return { + ...state, + isRequesting: false, + isSuccessful: false, + hasError: action.payload + }; + default: + throw new Error(); + } +} \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/reducers/calldata.ts b/libs/remix-ui/debugger-ui/src/reducers/calldata.ts new file mode 100644 index 0000000000..dc23c4ea5d --- /dev/null +++ b/libs/remix-ui/debugger-ui/src/reducers/calldata.ts @@ -0,0 +1,39 @@ +interface Action { + type: string; + payload: { [key: string]: any }; +} + +export const initialState = { + calldata: {}, + isRequesting: false, + isSuccessful: false, + hasError: null +} + +export const reducer = (state = initialState, action: Action) => { + switch (action.type) { + case 'FETCH_CALLDATA_REQUEST': + return { + ...state, + isRequesting: true, + isSuccessful: false, + hasError: null + }; + case 'FETCH_CALLDATA_SUCCESS': + return { + opCodes: action.payload, + isRequesting: false, + isSuccessful: true, + hasError: null + }; + case 'FETCH_CALLDATA_ERROR': + return { + ...state, + isRequesting: false, + isSuccessful: false, + hasError: action.payload + }; + default: + throw new Error(); + } +} \ No newline at end of file