Improve rendering values

electrikmilk · Nov 25, 2023 · 68c8915 · 68c8915
1 parent 1d7e1b9
commit 68c8915
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/src/style.css b/src/style.css
@@ -75,7 +75,8 @@
         color: #007bff !important;
     }
 
-    .sp-container .sp-variable-value {
+    .sp-container .sp-variable-value,
+    .sp-container .sp-variable-icon.layers_fill {
         background: #1d222b !important;
         color: #007aff !important;
     }
@@ -265,12 +266,6 @@
     color: #067aff;
 }
 
-.sp-container .sp-value {
-    background: #f4f7ff;
-    font-weight: bold;
-    font-size: 0.9rem;
-}
-
 .sp-container .sp-variable-value {
     background: #e2f0ff;
     padding: 0 5px;
@@ -281,6 +276,12 @@
     place-content: center;
 }
 
+.sp-container .sp-value {
+    background: #f4f7ff;
+    font-weight: bold;
+    font-size: 0.9rem;
+}
+
 .sp-container .sp-variable-icon {
     width: 15px;
     height: 15px;
@@ -293,6 +294,15 @@
     font-size: 0.7rem;
 }
 
+.sp-container .sp-variable-icon.wand_stars {
+    background: #8e8e93
+}
+
+.sp-container .sp-variable-icon.layers_fill {
+    background: #e2f0ff;
+    color: #067aff;
+}
+
 .sp-container .sp-scrollable-action-content {
     display: block;
     border: 1px solid #f1f1f1;

diff --git a/src/value.ts b/src/value.ts
@@ -42,32 +42,34 @@ export function renderValue(value?: any, placeholder: string = 'Value'): HTMLEle
 }
 
 function renderObjectValue(container: HTMLElement, value?: any) {
-    if (!value || !value.Value) {
+    if (!value) {
         container.innerText = '[Empty Value]';
         return;
     }
 
     let varName;
     let varType;
-    if (value.Value.attachmentsByRange) {
-        let str = String(value.Value.string);
-        for (let v in value.Value.attachmentsByRange) {
-            let variable = value.Value.attachmentsByRange[v];
-            let varTypeName = variable.OutputName ?? variable.VariableName ?? variable.PropertyName;
-            if (variable.Aggrandizements) {
-                const aggrandizements = variable.Aggrandizements[0];
-                switch (aggrandizements.Type) {
-                    case 'WFCoercionVariableAggrandizement':
-                        varTypeName += `as ${aggrandizements.CoercionItemClass}`;
-                        break;
+    if (value.Value) {
+        if (value.Value.attachmentsByRange) {
+            let str = String(value.Value.string);
+            for (let v in value.Value.attachmentsByRange) {
+                let variable = value.Value.attachmentsByRange[v];
+                let varTypeName = variable.OutputName ?? variable.VariableName ?? variable.PropertyName;
+                if (variable.Aggrandizements) {
+                    const aggrandizements = variable.Aggrandizements[0];
+                    switch (aggrandizements.Type) {
+                        case 'WFCoercionVariableAggrandizement':
+                            varTypeName += `as ${aggrandizements.CoercionItemClass}`;
+                            break;
+                    }
                 }
+                const inlineVar = renderInlineVariable(varTypeName, variable.Type);
+                str = str.replace('\uFFFC', inlineVar.outerHTML);
             }
-            const inlineVar = renderInlineVariable(varTypeName, variable.Type);
-            str = str.replace('\uFFFC', inlineVar.outerHTML);
+            container.innerHTML = str;
+            return;
         }
-        container.innerHTML = str;
-        return;
-    } else if (value.Value) {
+
         varName = value.Value.VariableName ?? value.Value.OutputName;
         varType = value.Value.Type;
     } else if (value.Variable) {
@@ -100,7 +102,12 @@ function variableIcon(valueType: string) {
     }
 }
 
-function renderInlineVariable(v: string, char?: string) {
+function renderInlineVariable(varName: string, char?: string) {
+    switch (varName) {
+        case 'ShortcutInput':
+            varName = 'Shortcut Input';
+    }
+
     const variable = document.createElement('div');
     variable.className = 'sp-variable-value';
 
@@ -114,13 +121,13 @@ function renderInlineVariable(v: string, char?: string) {
     i.innerText = char ?? 'f_cursive';
     icon.appendChild(i);
 
-    if (char && char === 'wand_stars') {
-        icon.style.backgroundColor = '#8e8e93';
+    if (char) {
+        icon.classList.add(char);
     }
 
     variable.appendChild(icon);
     const name = document.createElement('div');
-    name.innerText = v;
+    name.innerText = varName;
     variable.appendChild(name);
 
     return variable;