diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx index f4f8f3239..12d5c4988 100644 --- a/client/modules/IDE/components/Console.jsx +++ b/client/modules/IDE/components/Console.jsx @@ -1,32 +1,11 @@ -import React, { useRef, useEffect } from 'react'; +import React, { useRef, useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { bindActionCreators } from 'redux'; - import { useSelector, useDispatch } from 'react-redux'; import classNames from 'classnames'; import { Console as ConsoleFeed } from 'console-feed'; -import warnLightUrl from '../../../images/console-warn-light.svg?byUrl'; -import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl'; -import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl'; -import errorLightUrl from '../../../images/console-error-light.svg?byUrl'; -import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl'; -import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl'; -import debugLightUrl from '../../../images/console-debug-light.svg?byUrl'; -import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl'; -import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl'; -import infoLightUrl from '../../../images/console-info-light.svg?byUrl'; -import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl'; -import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl'; import ConsoleInput from './ConsoleInput'; -import commandLightUrl from '../../../images/console-command-light.svg?byUrl'; -import resultLightUrl from '../../../images/console-result-light.svg?byUrl'; -import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl'; -import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl'; -import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl'; -import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl'; - import UpArrowIcon from '../../../images/up-arrow.svg'; import DownArrowIcon from '../../../images/down-arrow.svg'; @@ -35,170 +14,7 @@ import * as ConsoleActions from '../../IDE/actions/console'; import { useDidUpdate } from '../hooks/custom-hooks'; import useHandleMessageEvent from '../hooks/useHandleMessageEvent'; import { listen } from '../../../utils/dispatcher'; - -const CONSOLE_FEED_LIGHT_STYLES = { - BASE_BACKGROUND_COLOR: '', - LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 97%)', - LOG_ERROR_COLOR: '#D11518', - LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)', - LOG_WARN_COLOR: '#996B00', - LOG_WARN_BORDER: 'hsl(50, 100%, 88%)', - LOG_INFO_COLOR: '#4D4D4D', - LOG_DEBUG_COLOR: '#0071AD', - LOG_DEBUG_BACKGROUND: '#D6F1FF', - LOG_DEBUG_BORDER: '#C2EBFF', - LOG_COLOR: '#4D4D4D', - ARROW_COLOR: '#666', - OBJECT_NAME_COLOR: '#333', - OBJECT_VALUE_NULL_COLOR: '#747474', - OBJECT_VALUE_UNDEFINED_COLOR: '#747474', - OBJECT_VALUE_STRING_COLOR: '#47820A', - OBJECT_VALUE_REGEXP_COLOR: '#A06801', - OBJECT_VALUE_NUMBER_COLOR: '#333', - OBJECT_VALUE_BOOLEAN_COLOR: '#D52889', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#FFF', - LOG_WARN_AMOUNT_BACKGROUND: '#996B00', - LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', - LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' -}; - -const CONSOLE_FEED_DARK_STYLES = { - BASE_BACKGROUND_COLOR: '', - BASE_COLOR: 'white', - OBJECT_NAME_COLOR: 'white', - OBJECT_VALUE_NULL_COLOR: '#DE4A9B', - OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B', - OBJECT_VALUE_REGEXP_COLOR: '#EE9900', - OBJECT_VALUE_STRING_COLOR: '#58a10b', - OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)', - OBJECT_VALUE_NUMBER_COLOR: 'white', - OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318', - LOG_ERROR_BACKGROUND: '#1F0000', - LOG_ERROR_COLOR: '#DF3A3D', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', - LOG_WARN_COLOR: '#F5BC38', - LOG_INFO_COLOR: '#D9D9D9', - LOG_INFO_BORDER: '#4D4D4D', - LOG_COLOR: '#D9D9D9', - LOG_DEBUG_COLOR: '#0C99E2', - LOG_DEBUG_BACKGROUND: '#05232E', - LOG_DEBUG_BORDER: '#0C546E', - TABLE_BORDER_COLOR: 'grey', - TABLE_TH_BACKGROUND_COLOR: 'transparent', - TABLE_TH_HOVER_COLOR: 'grey', - TABLE_SORT_ICON_COLOR: 'grey', - TABLE_DATA_BACKGROUND_IMAGE: 'grey', - TABLE_DATA_BACKGROUND_SIZE: 'grey', - ARROW_COLOR: '#D9D9D9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#333', - LOG_WARN_AMOUNT_BACKGROUND: '#996B00', - LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', - LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' -}; - -const CONSOLE_FEED_CONTRAST_STYLES = { - BASE_BACKGROUND_COLOR: '', - BASE_COLOR: 'white', - OBJECT_NAME_COLOR: 'white', - OBJECT_VALUE_NULL_COLOR: '#FFA9D9', - OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9', - OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6', - OBJECT_VALUE_STRING_COLOR: '#2DE9B6', - OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF', - OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9', - OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9', - OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23', - LOG_ERROR_BACKGROUND: '#1F0000', - LOG_ERROR_COLOR: '#EA7B7D', - LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', - LOG_WARN_COLOR: '#F5BC38', - LOG_INFO_COLOR: '#D9D9D9', - LOG_INFO_BORDER: '#4D4D4D', - LOG_COLOR: '#D9D9D9', - LOG_DEBUG_COLOR: '#38B6F5', - LOG_DEBUG_BACKGROUND: '#05232E', - LOG_DEBUG_BORDER: '#0C546E', - TABLE_BORDER_COLOR: 'grey', - TABLE_TH_BACKGROUND_COLOR: 'transparent', - TABLE_TH_HOVER_COLOR: 'grey', - TABLE_SORT_ICON_COLOR: 'grey', - TABLE_DATA_BACKGROUND_IMAGE: 'grey', - TABLE_DATA_BACKGROUND_SIZE: 'grey', - ARROW_COLOR: '#D9D9D9', - LOG_AMOUNT_BACKGROUND: '#5276B7', - LOG_AMOUNT_COLOR: '#333', - LOG_WARN_AMOUNT_BACKGROUND: '#966C08', - LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134', - LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3' -}; - -const getConsoleFeedStyle = (theme, fontSize) => { - const style = { - BASE_FONT_FAMILY: 'Inconsolata, monospace' - }; - const CONSOLE_FEED_LIGHT_ICONS = { - LOG_WARN_ICON: `url(${warnLightUrl})`, - LOG_ERROR_ICON: `url(${errorLightUrl})`, - LOG_DEBUG_ICON: `url(${debugLightUrl})`, - LOG_INFO_ICON: `url(${infoLightUrl})`, - LOG_COMMAND_ICON: `url(${commandLightUrl})`, - LOG_RESULT_ICON: `url(${resultLightUrl})` - }; - const CONSOLE_FEED_DARK_ICONS = { - LOG_WARN_ICON: `url(${warnDarkUrl})`, - LOG_ERROR_ICON: `url(${errorDarkUrl})`, - LOG_DEBUG_ICON: `url(${debugDarkUrl})`, - LOG_INFO_ICON: `url(${infoDarkUrl})`, - LOG_COMMAND_ICON: `url(${commandDarkUrl})`, - LOG_RESULT_ICON: `url(${resultDarkUrl})` - }; - const CONSOLE_FEED_CONTRAST_ICONS = { - LOG_WARN_ICON: `url(${warnContrastUrl})`, - LOG_ERROR_ICON: `url(${errorContrastUrl})`, - LOG_DEBUG_ICON: `url(${debugContrastUrl})`, - LOG_INFO_ICON: `url(${infoContrastUrl})`, - LOG_COMMAND_ICON: `url(${commandContrastUrl})`, - LOG_RESULT_ICON: `url(${resultContrastUrl})` - }; - const CONSOLE_FEED_SIZES = { - TREENODE_LINE_HEIGHT: 1.2, - BASE_FONT_SIZE: `${fontSize}px`, - ARROW_FONT_SIZE: `${fontSize}px`, - LOG_ICON_WIDTH: `${fontSize}px`, - LOG_ICON_HEIGHT: `${1.45 * fontSize}px` - }; - - switch (theme) { - case 'light': - return Object.assign( - CONSOLE_FEED_LIGHT_STYLES || {}, - CONSOLE_FEED_LIGHT_ICONS, - CONSOLE_FEED_SIZES, - style - ); - case 'dark': - return Object.assign( - CONSOLE_FEED_DARK_STYLES || {}, - CONSOLE_FEED_DARK_ICONS, - CONSOLE_FEED_SIZES, - style - ); - case 'contrast': - return Object.assign( - CONSOLE_FEED_CONTRAST_STYLES || {}, - CONSOLE_FEED_CONTRAST_ICONS, - CONSOLE_FEED_SIZES, - style - ); - default: - return ''; - } -}; +import getConsoleFeedStyle from '../utils/consoleStyles'; const Console = () => { const { t } = useTranslation(); @@ -206,12 +22,7 @@ const Console = () => { const isExpanded = useSelector((state) => state.ide.consoleIsExpanded); const isPlaying = useSelector((state) => state.ide.isPlaying); const { theme, fontSize } = useSelector((state) => state.preferences); - const { - collapseConsole, - expandConsole, - clearConsole, - dispatchConsoleEvent - } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch()); + const dispatch = useDispatch(); const cm = useRef({}); @@ -219,7 +30,13 @@ const Console = () => { cm.current.scrollTop = cm.current.scrollHeight; }); + const consoleFeedStyle = useMemo(() => getConsoleFeedStyle(theme, fontSize), [ + theme, + fontSize + ]); + const handleMessageEvent = useHandleMessageEvent(); + useEffect(() => { const unsubscribe = listen(handleMessageEvent); return function cleanup() { @@ -227,6 +44,10 @@ const Console = () => { }; }); + const handleClearConsole = () => dispatch(ConsoleActions.clearConsole()); + const handleCollapseConsole = () => dispatch(IDEActions.collapseConsole()); + const handleExpandConsole = () => dispatch(IDEActions.expandConsole()); + const consoleClass = classNames({ 'preview-console': true, 'preview-console--collapsed': !isExpanded @@ -239,21 +60,21 @@ const Console = () => {
{isExpanded && isPlaying && ( - + )} diff --git a/client/modules/IDE/components/ConsoleInput.jsx b/client/modules/IDE/components/ConsoleInput.jsx index 660f8ec2b..c026d29d4 100644 --- a/client/modules/IDE/components/ConsoleInput.jsx +++ b/client/modules/IDE/components/ConsoleInput.jsx @@ -4,12 +4,13 @@ import CodeMirror from 'codemirror'; import { Encode } from 'console-feed'; import RightArrowIcon from '../../../images/right-arrow.svg'; +import { dispatchConsoleEvent } from '../../IDE/actions/console'; import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher'; // heavily inspired by // https://github.com/codesandbox/codesandbox-client/blob/92a1131f4ded6f7d9c16945dc7c18aa97c8ada27/packages/app/src/app/components/Preview/DevTools/Console/Input/index.tsx -function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { +function ConsoleInput({ theme, fontSize }) { const [commandHistory, setCommandHistory] = useState([]); const [commandCursor, setCommandCursor] = useState(-1); const codemirrorContainer = useRef(null); @@ -23,76 +24,99 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { mode: 'javascript', inputStyle: 'contenteditable' }); + }, []); - cmInstance.current.on('keydown', (cm, e) => { + useEffect(() => { + const handleEnterKey = (cm, e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); e.stopPropagation(); - const value = cm.getValue(); - if (value.trim(' ') === '') { - return false; - } + + const value = cm.getValue().trim(); + if (value === '') return; + const messages = [ { log: Encode({ method: 'command', data: [value] }) } ]; const consoleEvent = [{ method: 'command', data: [value] }]; + dispatchMessage({ type: MessageTypes.EXECUTE, - payload: { - source: 'console', - messages - } + payload: { source: 'console', messages } }); + dispatchConsoleEvent(consoleEvent); cm.setValue(''); setCommandHistory([value, ...commandHistory]); setCommandCursor(-1); - } else if (e.key === 'ArrowUp') { - const lineNumber = cmInstance.current.getDoc().getCursor().line; - if (lineNumber !== 0) { - return false; - } + } + }; + + if (cmInstance.current) { + cmInstance.current.on('keydown', handleEnterKey); + } + + return () => { + if (cmInstance.current) { + cmInstance.current.off('keydown', handleEnterKey); + } + }; + }, [commandHistory]); + + useEffect(() => { + const handleUpArrowKey = (cm, e) => { + if (e.key === 'ArrowUp') { + const lineNumber = cm.getDoc().getCursor().line; + if (lineNumber !== 0) return; const newCursor = Math.min( commandCursor + 1, commandHistory.length - 1 ); - cmInstance.current.getDoc().setValue(commandHistory[newCursor] || ''); - const cursorPos = cmInstance.current.getDoc().getLine(0).length - 1; - cmInstance.current.getDoc().setCursor({ line: 0, ch: cursorPos }); + cm.setValue(commandHistory[newCursor] || ''); + const cursorPos = cm.getDoc().getLine(0).length - 1; + cm.getDoc().setCursor({ line: 0, ch: cursorPos }); setCommandCursor(newCursor); - } else if (e.key === 'ArrowDown') { - const lineNumber = cmInstance.current.getDoc().getCursor().line; - const lineCount = cmInstance.current.getValue().split('\n').length; - if (lineNumber + 1 !== lineCount) { - return false; - } + } + }; + + if (cmInstance.current) { + cmInstance.current.on('keydown', handleUpArrowKey); + } + + return () => { + if (cmInstance.current) { + cmInstance.current.off('keydown', handleUpArrowKey); + } + }; + }, [commandCursor, commandHistory]); + + useEffect(() => { + const handleArrowDownKey = (cm, e) => { + if (e.key === 'ArrowDown') { + const lineNumber = cm.getDoc().getCursor().line; + const lineCount = cm.lineCount(); + if (lineNumber + 1 !== lineCount) return; const newCursor = Math.max(commandCursor - 1, -1); - cmInstance.current.getDoc().setValue(commandHistory[newCursor] || ''); - const newLineCount = cmInstance.current.getValue().split('\n').length; - const newLine = cmInstance.current.getDoc().getLine(newLineCount); + cm.setValue(commandHistory[newCursor] || ''); + const newLine = cm.getDoc().getLine(lineCount - 1); const cursorPos = newLine ? newLine.length - 1 : 1; - cmInstance.current - .getDoc() - .setCursor({ line: lineCount, ch: cursorPos }); + cm.getDoc().setCursor({ line: lineCount - 1, ch: cursorPos }); setCommandCursor(newCursor); } - return true; - }); + }; - cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`; + if (cmInstance.current) { + cmInstance.current.on('keydown', handleArrowDownKey); + } return () => { - cmInstance.current = null; + if (cmInstance.current) { + cmInstance.current.off('keydown', handleArrowDownKey); + } }; - }, []); - - useEffect(() => { - cmInstance.current.setOption('theme', `p5-${theme}`); - cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`; - cmInstance.current.refresh(); - }, [theme, fontSize]); + }, [commandCursor, commandHistory]); return (
@@ -110,14 +134,17 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) { }} />
-
+
); } ConsoleInput.propTypes = { theme: PropTypes.string.isRequired, - dispatchConsoleEvent: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired }; diff --git a/client/modules/IDE/utils/consoleStyles.js b/client/modules/IDE/utils/consoleStyles.js new file mode 100644 index 000000000..62bba0c6f --- /dev/null +++ b/client/modules/IDE/utils/consoleStyles.js @@ -0,0 +1,188 @@ +import warnLightUrl from '../../../images/console-warn-light.svg?byUrl'; +import warnDarkUrl from '../../../images/console-warn-dark.svg?byUrl'; +import warnContrastUrl from '../../../images/console-warn-contrast.svg?byUrl'; +import errorLightUrl from '../../../images/console-error-light.svg?byUrl'; +import errorDarkUrl from '../../../images/console-error-dark.svg?byUrl'; +import errorContrastUrl from '../../../images/console-error-contrast.svg?byUrl'; +import debugLightUrl from '../../../images/console-debug-light.svg?byUrl'; +import debugDarkUrl from '../../../images/console-debug-dark.svg?byUrl'; +import debugContrastUrl from '../../../images/console-debug-contrast.svg?byUrl'; +import infoLightUrl from '../../../images/console-info-light.svg?byUrl'; +import infoDarkUrl from '../../../images/console-info-dark.svg?byUrl'; +import infoContrastUrl from '../../../images/console-info-contrast.svg?byUrl'; + +import commandLightUrl from '../../../images/console-command-light.svg?byUrl'; +import resultLightUrl from '../../../images/console-result-light.svg?byUrl'; +import commandDarkUrl from '../../../images/console-command-dark.svg?byUrl'; +import resultDarkUrl from '../../../images/console-result-dark.svg?byUrl'; +import commandContrastUrl from '../../../images/console-command-contrast.svg?byUrl'; +import resultContrastUrl from '../../../images/console-result-contrast.svg?byUrl'; + +const CONSOLE_FEED_LIGHT_STYLES = { + BASE_BACKGROUND_COLOR: '', + LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 97%)', + LOG_ERROR_COLOR: '#D11518', + LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)', + LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)', + LOG_WARN_COLOR: '#996B00', + LOG_WARN_BORDER: 'hsl(50, 100%, 88%)', + LOG_INFO_COLOR: '#4D4D4D', + LOG_DEBUG_COLOR: '#0071AD', + LOG_DEBUG_BACKGROUND: '#D6F1FF', + LOG_DEBUG_BORDER: '#C2EBFF', + LOG_COLOR: '#4D4D4D', + ARROW_COLOR: '#666', + OBJECT_NAME_COLOR: '#333', + OBJECT_VALUE_NULL_COLOR: '#747474', + OBJECT_VALUE_UNDEFINED_COLOR: '#747474', + OBJECT_VALUE_STRING_COLOR: '#47820A', + OBJECT_VALUE_REGEXP_COLOR: '#A06801', + OBJECT_VALUE_NUMBER_COLOR: '#333', + OBJECT_VALUE_BOOLEAN_COLOR: '#D52889', + OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9', + LOG_AMOUNT_BACKGROUND: '#5276B7', + LOG_AMOUNT_COLOR: '#FFF', + LOG_WARN_AMOUNT_BACKGROUND: '#996B00', + LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', + LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' +}; + +const CONSOLE_FEED_DARK_STYLES = { + BASE_BACKGROUND_COLOR: '', + BASE_COLOR: 'white', + OBJECT_NAME_COLOR: 'white', + OBJECT_VALUE_NULL_COLOR: '#DE4A9B', + OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B', + OBJECT_VALUE_REGEXP_COLOR: '#EE9900', + OBJECT_VALUE_STRING_COLOR: '#58a10b', + OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)', + OBJECT_VALUE_NUMBER_COLOR: 'white', + OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B', + OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318', + LOG_ERROR_BACKGROUND: '#1F0000', + LOG_ERROR_COLOR: '#DF3A3D', + LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', + LOG_WARN_COLOR: '#F5BC38', + LOG_INFO_COLOR: '#D9D9D9', + LOG_INFO_BORDER: '#4D4D4D', + LOG_COLOR: '#D9D9D9', + LOG_DEBUG_COLOR: '#0C99E2', + LOG_DEBUG_BACKGROUND: '#05232E', + LOG_DEBUG_BORDER: '#0C546E', + TABLE_BORDER_COLOR: 'grey', + TABLE_TH_BACKGROUND_COLOR: 'transparent', + TABLE_TH_HOVER_COLOR: 'grey', + TABLE_SORT_ICON_COLOR: 'grey', + TABLE_DATA_BACKGROUND_IMAGE: 'grey', + TABLE_DATA_BACKGROUND_SIZE: 'grey', + ARROW_COLOR: '#D9D9D9', + LOG_AMOUNT_BACKGROUND: '#5276B7', + LOG_AMOUNT_COLOR: '#333', + LOG_WARN_AMOUNT_BACKGROUND: '#996B00', + LOG_ERROR_AMOUNT_BACKGROUND: '#D11518', + LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD' +}; + +const CONSOLE_FEED_CONTRAST_STYLES = { + BASE_BACKGROUND_COLOR: '', + BASE_COLOR: 'white', + OBJECT_NAME_COLOR: 'white', + OBJECT_VALUE_NULL_COLOR: '#FFA9D9', + OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9', + OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6', + OBJECT_VALUE_STRING_COLOR: '#2DE9B6', + OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF', + OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9', + OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9', + OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23', + LOG_ERROR_BACKGROUND: '#1F0000', + LOG_ERROR_COLOR: '#EA7B7D', + LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', + LOG_WARN_COLOR: '#F5BC38', + LOG_INFO_COLOR: '#D9D9D9', + LOG_INFO_BORDER: '#4D4D4D', + LOG_COLOR: '#D9D9D9', + LOG_DEBUG_COLOR: '#38B6F5', + LOG_DEBUG_BACKGROUND: '#05232E', + LOG_DEBUG_BORDER: '#0C546E', + TABLE_BORDER_COLOR: 'grey', + TABLE_TH_BACKGROUND_COLOR: 'transparent', + TABLE_TH_HOVER_COLOR: 'grey', + TABLE_SORT_ICON_COLOR: 'grey', + TABLE_DATA_BACKGROUND_IMAGE: 'grey', + TABLE_DATA_BACKGROUND_SIZE: 'grey', + ARROW_COLOR: '#D9D9D9', + LOG_AMOUNT_BACKGROUND: '#5276B7', + LOG_AMOUNT_COLOR: '#333', + LOG_WARN_AMOUNT_BACKGROUND: '#966C08', + LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134', + LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3' +}; + +const style = { + BASE_FONT_FAMILY: 'Inconsolata, monospace' +}; + +const CONSOLE_FEED_LIGHT_ICONS = { + LOG_WARN_ICON: `url(${warnLightUrl})`, + LOG_ERROR_ICON: `url(${errorLightUrl})`, + LOG_DEBUG_ICON: `url(${debugLightUrl})`, + LOG_INFO_ICON: `url(${infoLightUrl})`, + LOG_COMMAND_ICON: `url(${commandLightUrl})`, + LOG_RESULT_ICON: `url(${resultLightUrl})` +}; + +const CONSOLE_FEED_DARK_ICONS = { + LOG_WARN_ICON: `url(${warnDarkUrl})`, + LOG_ERROR_ICON: `url(${errorDarkUrl})`, + LOG_DEBUG_ICON: `url(${debugDarkUrl})`, + LOG_INFO_ICON: `url(${infoDarkUrl})`, + LOG_COMMAND_ICON: `url(${commandDarkUrl})`, + LOG_RESULT_ICON: `url(${resultDarkUrl})` +}; + +const CONSOLE_FEED_CONTRAST_ICONS = { + LOG_WARN_ICON: `url(${warnContrastUrl})`, + LOG_ERROR_ICON: `url(${errorContrastUrl})`, + LOG_DEBUG_ICON: `url(${debugContrastUrl})`, + LOG_INFO_ICON: `url(${infoContrastUrl})`, + LOG_COMMAND_ICON: `url(${commandContrastUrl})`, + LOG_RESULT_ICON: `url(${resultContrastUrl})` +}; + +const getConsoleFeedStyle = (theme, fontSize) => { + const CONSOLE_FEED_SIZES = { + TREENODE_LINE_HEIGHT: 1.2, + BASE_FONT_SIZE: `${fontSize}px`, + ARROW_FONT_SIZE: `${fontSize}px`, + LOG_ICON_WIDTH: `${fontSize}px`, + LOG_ICON_HEIGHT: `${1.45 * fontSize}px` + }; + + switch (theme) { + case 'light': + default: + return Object.assign( + CONSOLE_FEED_LIGHT_STYLES || {}, + CONSOLE_FEED_LIGHT_ICONS, + CONSOLE_FEED_SIZES, + style + ); + case 'dark': + return Object.assign( + CONSOLE_FEED_DARK_STYLES || {}, + CONSOLE_FEED_DARK_ICONS, + CONSOLE_FEED_SIZES, + style + ); + case 'contrast': + return Object.assign( + CONSOLE_FEED_CONTRAST_STYLES || {}, + CONSOLE_FEED_CONTRAST_ICONS, + CONSOLE_FEED_SIZES, + style + ); + } +}; + +export default getConsoleFeedStyle; diff --git a/client/utils/previewEntry.js b/client/utils/previewEntry.js index 2dfa2a239..a361c0047 100644 --- a/client/utils/previewEntry.js +++ b/client/utils/previewEntry.js @@ -148,7 +148,8 @@ window.onunhandledrejection = async function onUnhandledRejection(event) { }; // Monkeypatch p5._friendlyError -const { _report } = window.p5; +const _report = window.p5?._report; + if (_report) { window.p5._report = function resolvedReport(message, method, color) { const urls = Object.keys(window.objectUrls);