editor: add instructions API specification

- adds specification API help box - generates API from specification - updates help box with generated API
sugarlabs · Feb 11, 2022 · f0719dd · f0719dd
1 parent 3100e64
commit f0719dd
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 123 deletions.
diff --git a/src/components/editor/core/index.ts b/src/components/editor/core/index.ts
@@ -6,13 +6,49 @@ import {
     generateSnapshot,
     registerElementSpecificationEntries,
     resetSyntaxTree,
+    getSpecificationSnapshot,
 } from '@sugarlabs/musicblocks-v4-lib';
 
+import {
+    addInstance,
+    getInstance,
+    removeInstance,
+} from '@sugarlabs/musicblocks-v4-lib/syntax/warehouse/warehouse';
+
 import { librarySpecification } from '@sugarlabs/musicblocks-v4-lib';
 registerElementSpecificationEntries(librarySpecification);
 
 // -- public functions -----------------------------------------------------------------------------
 
+/**
+ * Generates the API for the loaded specification.
+ * @returns list of valid instruction signatures
+ */
+export function generateAPI(): string {
+    const snapshot = getSpecificationSnapshot();
+    const api: string[] = [];
+
+    Object.entries(snapshot)
+        .filter(
+            ([_, specification]) =>
+                specification.type === 'Statement' &&
+                ['Graphics', 'Pen'].includes(specification.category),
+        )
+        .forEach(([elementName, _]) => {
+            const instanceID = addInstance(elementName);
+            const instance = getInstance(instanceID)!.instance;
+            const args: [string, string][] = instance.argLabels.map((arg) => [
+                arg,
+                instance.getArgType(arg).join('|'),
+            ]);
+            removeInstance(instanceID);
+
+            api.push(`${elementName} ${args.map(([name, types]) => `${name}:${types}`).join(' ')}`);
+        });
+
+    return api.join('\n');
+}
+
 /**
  * Validates code, transpiles it, and generates the Syntax Tree in the Programming Engine.
  * @param code editor's code

diff --git a/src/components/editor/index.ts b/src/components/editor/index.ts
@@ -3,8 +3,16 @@ import { IComponentMenu } from '@/@types/components/menu';
 import { getComponent } from '@/config';
 import { setToolbarExtended, unsetToolbarExtended } from '@/view';
 
-import { getElement, resetStatus, setButtonState, setup as setupView } from './view';
-import { resetProgram } from './core';
+import {
+    getElement,
+    resetStates,
+    setButtonState,
+    setCode,
+    setHelp,
+    setStatus,
+    setup as setupView,
+} from './view';
+import { generateAPI, resetProgram } from './core';
 
 // -- public functions -----------------------------------------------------------------------------
 
@@ -28,18 +36,42 @@ export function setup(): Promise<void> {
         const menu = getComponent('menu');
         if (menu) {
             (menu as IComponentMenu).mountHook('reset', () => {
-                resetStatus();
+                setStatus('');
                 resetProgram();
             });
         }
 
+        setCode(`set-thickness value:4
+set-color value:5
+repeat times:6
+  move-forward steps:100
+  turn-right angle:60
+set-color value:9
+repeat times:6
+  move-forward steps:100
+  turn-left angle:60`);
+
+        setCode(`set-thickness value:4
+set-color value:5
+move-forward steps:100
+turn-right angle:60
+move-forward steps:100
+turn-right angle:60
+move-forward steps:100
+turn-right angle:60
+move-forward steps:100
+turn-right angle:60`);
+
+        setHelp(generateAPI());
+
         const btn = getElement('button');
 
         let state: 'initial' | 'float' | 'pinned' = 'initial';
 
         const setState = (_state: 'initial' | 'float' | 'pinned') => {
             if (_state === 'initial') {
                 unsetToolbarExtended();
+                resetStates();
             } else {
                 const toolbarContent = setToolbarExtended('Editor', _state, {
                     pin: () => setState('pinned'),

diff --git a/src/components/editor/view/components/index.scss b/src/components/editor/view/components/index.scss
@@ -1,93 +1,173 @@
 @import '@/scss/colors';
 
 #editor {
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
 
-  > * {
+  .editor-wrapper {
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    margin: 0;
-  }
-
-  #editor-codebox {
-    flex-shrink: 1;
     height: 100%;
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-    border: none;
-    border-radius: 0.25rem 0.25rem;
-    font-size: 0.9rem;
-    font-family: 'Courier New', Courier, monospace;
-    font-weight: bold;
-    color: $text-dark;
-    resize: none;
-
-    &:focus {
-      outline: none;
-    }
-  }
 
-  #editor-console {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    height: 2.5rem;
-    border-radius: 0 0 0.25rem 0.25rem;
+    &.editor-wrapper-hidden {
+      display: none;
+    }
 
     > * {
-      box-sizing: border-box;
-      height: 100%;
+      width: 100%;
+      margin: 0;
     }
 
-    #editor-status-wrapper {
+    #editor-codebox {
       flex-shrink: 1;
+      height: 100%;
+      margin-bottom: 0.5rem;
+      padding: 0.5rem;
+      border: none;
+      border-radius: 0.25rem 0.25rem;
+      font-size: 0.9rem;
+      font-family: 'Courier New', Courier, monospace;
+      font-weight: bold;
+      color: $text-dark;
+      resize: none;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    #editor-console {
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
       width: 100%;
-      margin-right: 0.5rem;
+      height: 2.5rem;
+      border-radius: 0 0 0.25rem 0.25rem;
 
-      #editor-status {
-        width: 100%;
+      > * {
+        box-sizing: border-box;
         height: 100%;
-        margin: 0;
+        margin-right: 0.5rem;
+      }
+
+      #editor-btn-help {
+        flex-shrink: 0;
+        width: 2.5rem;
         padding: 0.5rem;
+        border: none;
         border-radius: 0.25rem;
-        font-size: 0.9rem;
-        font-family: 'Courier New', Courier, monospace;
-        font-weight: bold;
-        color: $text-dark;
-        background-color: $background-light;
-        overflow: auto;
+        text-transform: uppercase;
+        background-color: white;
+        cursor: pointer;
+        transition: all 0.25s ease;
+
+        svg {
+          width: 100%;
+          height: 100%;
+
+          .path-fill {
+            fill: $mb-accent;
+            transition: all 0.25s ease;
+          }
+        }
+      }
+
+      #editor-status-wrapper {
+        flex-shrink: 1;
+        width: 100%;
+
+        #editor-status {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.9rem;
+          font-family: 'Courier New', Courier, monospace;
+          font-weight: bold;
+          color: $text-dark;
+          background-color: $background-light;
+          overflow: auto;
+        }
+      }
+
+      #editor-btn-build {
+        flex-shrink: 0;
+        width: 2.5rem;
+        margin-right: 0;
+        padding: 0.5rem;
+        border: none;
+        border-radius: 0.25rem;
+        text-transform: uppercase;
+        background-color: white;
+        cursor: pointer;
+        transition: all 0.25s ease;
+
+        svg {
+          width: 100%;
+          height: 100%;
+
+          .path-fill {
+            fill: $mb-accent;
+            transition: all 0.25s ease;
+          }
+        }
+
+        &:hover {
+          svg {
+            .path-fill {
+              fill: $mb-accent-light;
+            }
+          }
+        }
+      }
+    }
+
+    #editor-help {
+      flex-shrink: 1;
+      height: 100%;
+      margin-bottom: 0.5rem;
+      padding: 0.5rem;
+      border: none;
+      border-radius: 0.25rem;
+      font-size: 0.9rem;
+      font-family: 'Courier New', Courier, monospace;
+      font-weight: bold;
+      color: $mb-accent-light;
+      background-color: $mb-accent-dark;
+      resize: none;
+
+      &:focus {
+        outline: none;
       }
     }
 
-    #editor-btn-build {
+    #editor-help-close {
       flex-shrink: 0;
       width: 2.5rem;
-      padding: 0.5rem;
+      height: 2.5rem;
       border: none;
       border-radius: 0.25rem;
-      text-transform: uppercase;
-      background-color: white;
+      background-color: unset;
       cursor: pointer;
-      transition: all 0.25s ease;
 
       svg {
-        width: 100%;
-        height: 100%;
+        width: calc(100% - 0.5rem);
+        height: calc(100% - 0.5rem);
+        margin: 0.25rem;
 
         .path-fill {
-          fill: $mb-accent;
+          fill: $mb-accent-dark;
           transition: all 0.25s ease;
         }
       }
 
       &:hover {
         svg {
           .path-fill {
-            fill: $mb-accent-light;
+            fill: $text-light;
           }
         }
       }