add node background instead of outline

improve responsiveness & loading time of param editor
CynToolkit · Aug 16, 2024 · 0463eb5 · 0463eb5
1 parent 6460a6c
commit 0463eb5
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/.mise.toml b/.mise.toml
@@ -1,5 +1,5 @@
 [tools]
-node = "22.5.1"
+node = "latest"
 
 [env]
 _.file = '.env.local'
diff --git a/TODO b/TODO
@@ -51,13 +51,13 @@ Tests:
 - Disable step
 - View logs in realtime
 - editor full width (no sidebar)
-- done indicators
-- only one trigger
+✔ done indicators @done(24-08-01 07:45)
+✔ only one trigger @done(24-08-01 07:45)
 - ask feedback on the editor (pause, confirm, etc.)
 - env
 
 
-- finir l'implementation des triggers
+✔ finir l'implementation des triggers @done(24-08-01 07:45)
 ✔ overwrite d'un fichier fonctionne pas bien @done(24-07-30 17:40)
-- fermer trop vite la fenêtre de modifiation n'enregistre pas le changement
+✔ fermer trop vite la fenêtre de modification n'enregistre pas le changement @done(24-08-01 07:43)
 - export Electron ne fonctionne pas
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -51,7 +51,10 @@
                 </div>
               </div>
               <div class="main">
-                <router-view></router-view>
+                <router-view v-if="!isLoading"></router-view>
+                <div v-else>
+                  <Skeleton width="100%" height="100%"></Skeleton>
+                </div>
               </div>
             </div>
           </div>
@@ -284,15 +287,18 @@ function onInvalidSubmit({ values, errors, results }: any) {
 const onSubmit = handleSubmit(onSuccess, onInvalidSubmit)
 
 const type = ref<'login' | 'register'>('login')
+const isLoading = ref(false)
 
 onMounted(async () => {
+  isLoading.value = true
   await auth.init()
 
   await filesStore.load()
   console.log('files loaded', filesStore)
   await init()
   console.log('init done')
   // const result = await api.execute('')
+  isLoading.value = false
 })
 </script>
 

diff --git a/src/renderer/components/nodes/EditorNodeAction.vue b/src/renderer/components/nodes/EditorNodeAction.vue
@@ -176,6 +176,7 @@ const showSidebar = ref(false)
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: white;
 }
 
 .node-action {
@@ -196,8 +197,7 @@ const showSidebar = ref(false)
   }
 
   &.error {
-    outline: 1px solid red;
-    outline-offset: 3px;
+    background-color: rgba(255, 0, 0, 0.1);
   }
 }
 

diff --git a/src/renderer/components/nodes/ParamEditor.vue b/src/renderer/components/nodes/ParamEditor.vue
@@ -3,6 +3,7 @@
     <div class="editor">
       <div class="flex flex-column gap-1 editor-content">
         <div class="label">
+          <!-- Label -->
           <label :for="`data-${paramKey}`"
             >{{ paramDefinition.label }}
             <span
@@ -14,6 +15,7 @@
           </label>
 
           <div class="infos">
+            <!-- Is valid button -->
             <Button
               text
               size="small"
@@ -27,11 +29,15 @@
             </Button>
           </div>
         </div>
+
+        <!-- Code editor -->
         <div class="code-editor" ref="$codeEditorText"></div>
 
+        <!-- Hint text -->
         <Skeleton height="20px" v-if="hintText === undefined"></Skeleton>
         <div v-else class="hint" :class="{ error: isError }" v-dompurify-html="hintText"></div>
 
+        <!-- Floating indicator -->
         <div
           v-if="isModalDisplayed"
           ref="$floating"
@@ -57,12 +63,15 @@
           </svg>
 
           <div class="helpers">
+            <!-- Value -->
             <Panel header="Value" toggleable>
               <div class="editor">
                 <div class="boolean" v-if="paramDefinition.control.type === 'boolean'">
                   <SelectButton
                     :model-value="param"
                     @change="insertEditorEnd($event.value.value)"
+                    optionLabel="text"
+                    optionValue="value"
                     :options="[
                       { text: 'True', value: 'true' },
                       { text: 'False', value: 'false' }
@@ -91,6 +100,7 @@
                 </div>
               </div>
             </Panel>
+            <!-- Outputs -->
             <Panel header="Outputs" toggleable>
               <div class="steps-list">
                 <template v-for="(step, stepUid) in steps" :key="stepUid">
@@ -296,6 +306,9 @@ const resolveHintTextResult = (result: unknown) => {
   return (result as string).toString()
 }
 
+// @ts-expect-error
+const vm = await createQuickJs()
+
 watchDebounced(
   editorTextValue,
   async () => {
@@ -307,8 +320,6 @@ watchDebounced(
 
 
     try {
-      const vm = await createQuickJs()
-
       const result = await vm.run(displayString, {
         params: {},
         // params: resolvedParams.value,
@@ -353,13 +364,13 @@ const onClickOutside = () => {
   isModalDisplayed.value = false
 }
 
-const onValueChanged = debounce((newValue: string, paramKey: string) => {
+const onValueChanged = (newValue: string, paramKey: string) => {
   console.log('param.value', param.value)
   console.log('newValue', newValue)
   console.log('paramKey', paramKey)
 
   emit('update:modelValue', newValue)
-}, 1000)
+}
 
 onCodeEditorTextUpdate((value) => {
   onValueChanged(value, paramKey.toString())