Merge pull request #1756 from processing/bug/interactive-console

Interactive console

Author: catarak

Diff for: client/components/useAsModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useModalBehavior } from '../utils/custom-hooks';
+import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
 
 const BackgroundOverlay = styled.div`
   position: fixed;

Diff for: client/images/console-command-contrast.svg

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -25,33 +25,51 @@ 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';
 
 import * as IDEActions from '../../IDE/actions/ide';
 import * as ConsoleActions from '../../IDE/actions/console';
-import { useDidUpdate } from '../../../utils/custom-hooks';
+import { useDidUpdate } from '../hooks/custom-hooks';
+import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
+import { listen } from '../../../utils/dispatcher';
 
 const getConsoleFeedStyle = (theme, times, fontSize) => {
-  const style = {};
+  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_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_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_INFO_ICON: `url(${infoContrastUrl})`,
+    LOG_COMMAND_ICON: `url(${commandContrastUrl})`,
+    LOG_RESULT_ICON: `url(${resultContrastUrl})`
   };
   const CONSOLE_FEED_SIZES = {
     TREENODE_LINE_HEIGHT: 1.2,
@@ -94,6 +112,7 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
 const Console = ({ t }) => {
   const consoleEvents = useSelector((state) => state.console);
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
+  const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
 
   const {
@@ -103,17 +122,20 @@ const Console = ({ t }) => {
     dispatchConsoleEvent
   } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
-  useDidUpdate(() => {
-    clearConsole();
-    dispatchConsoleEvent(consoleEvents);
-  }, [theme, fontSize]);
-
   const cm = useRef({});
 
   useDidUpdate(() => {
     cm.current.scrollTop = cm.current.scrollHeight;
   });
 
+  const handleMessageEvent = useHandleMessageEvent();
+  useEffect(() => {
+    const unsubscribe = listen(handleMessageEvent);
+    return function cleanup() {
+      unsubscribe();
+    };
+  });
+
   const consoleClass = classNames({
     'preview-console': true,
     'preview-console--collapsed': !isExpanded
@@ -147,29 +169,39 @@ const Console = ({ t }) => {
           </button>
         </div>
       </header>
-      <div ref={cm} className="preview-console__messages">
-        {consoleEvents.map((consoleEvent) => {
-          const { method, times } = consoleEvent;
-          return (
-            <div
-              key={consoleEvent.id}
-              className={`preview-console__message preview-console__message--${method}`}
-            >
-              {times > 1 && (
-                <div
-                  className="preview-console__logged-times"
-                  style={{ fontSize, borderRadius: fontSize / 2 }}
-                >
-                  {times}
-                </div>
-              )}
-              <ConsoleFeed
-                styles={getConsoleFeedStyle(theme, times, fontSize)}
-                logs={[consoleEvent]}
-              />
-            </div>
-          );
-        })}
+      <div className="preview-console__body">
+        <div ref={cm} className="preview-console__messages">
+          {consoleEvents.map((consoleEvent) => {
+            const { method, times } = consoleEvent;
+            return (
+              <div
+                key={consoleEvent.id}
+                className={`preview-console__message preview-console__message--${method}`}
+              >
+                {times > 1 && (
+                  <div
+                    className="preview-console__logged-times"
+                    style={{ fontSize, borderRadius: fontSize / 2 }}
+                  >
+                    {times}
+                  </div>
+                )}
+                <ConsoleFeed
+                  styles={getConsoleFeedStyle(theme, times, fontSize)}
+                  logs={[consoleEvent]}
+                  key={`${consoleEvent.id}-${theme}-${fontSize}`}
+                />
+              </div>
+            );
+          })}
+        </div>
+        {isExpanded && isPlaying && (
+          <ConsoleInput
+            theme={theme}
+            dispatchConsoleEvent={dispatchConsoleEvent}
+            fontSize={fontSize}
+          />
+        )}
       </div>
     </section>
   );