Implement saving for script files

Author: SanderMertens

etc/index.html

@@ -152,5 +152,13 @@
     <script src="js/common.js"></script>
     <script src="js/module_loader.js"></script>
     <script src="js/app.js"></script>
+
+    <script>
+      window.addEventListener("keydown", function(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+          e.preventDefault();
+        }
+      });
+    </script>    
   </body>
 </html>

etc/js/app.js

@@ -137,6 +137,7 @@ let components = [
   loadModule('js/components/pages/entities/pane-tree.vue', options),
   loadModule('js/components/pages/entities/pane-inspector.vue', options),
   loadModule('js/components/pages/entities/pane-scripts.vue', options),
+  loadModule('js/components/pages/entities/pane-scripts-close-button.vue', options),
   loadModule('js/components/pages/entities/flecs-script.vue', options),
 
   // Tree widget

etc/js/components/pages/entities/flecs-script.vue

@@ -15,6 +15,7 @@ const props = defineProps({
   script: {type: Object, required: true},
 });
 
+const changed = defineModel("changed");
 const error = defineModel("error");
 
 // Editor object
@@ -36,6 +37,9 @@ function loadScript() {
     editorObj.focus();
     isLoading = false;
     error.value = reply.error;
+
+    // So we get an updated changed value
+    scriptUpdate(reply.code);
   });
 }
 
@@ -44,14 +48,21 @@ function onScriptChange(editorObj) {
     return;
   }
 
-  props.conn.scriptUpdate(props.script.path, editorObj.getValue(), {
-    try: true
+  scriptUpdate(editorObj.getValue());
+}
+
+function scriptUpdate(code, save = false) {
+  props.conn.scriptUpdate(props.script.path, code, {
+    try: true,
+    check_file: true,
+    save_file: save
   }, (msg) => {
     if (msg.error) {
       error.value = msg.error;
     } else {
       error.value = undefined;
     }
+    changed.value = msg.changed;
   });
 }
 
@@ -67,6 +78,15 @@ onMounted(() => {
     onScriptChange(editorObj);
   });
   
+  editorObj.commands.addCommand({
+    name: "save",
+    bindKey: { win: "Ctrl-S", mac: "Command-S" },
+    exec: function(editorObj) {
+      scriptUpdate(editorObj.getValue(), true);
+    },
+    readOnly: false // false if this command should not be available in read-only mode
+  });
+
   loadScript();
 });
 

etc/js/components/pages/entities/pane-scripts-close-button.vue

@@ -0,0 +1,49 @@
+<template>
+    <icon-button 
+      :src="iconImage"
+      @mouseover="onEnter" @mouseleave="onLeave"
+      @click.stop="onClose">
+    </icon-button>
+</template>
+
+<script>
+export default { name: "pane-scripts-close-button" }
+</script>
+
+<script setup>
+
+import { defineProps, defineEmits, computed, ref } from 'vue';
+
+const props = defineProps({
+  changed: {type: Boolean, required: false, default: false}
+});
+
+const emit = defineEmits(["onClose"]);
+const hover = ref(false);
+
+const iconImage = computed(() => {
+  if (hover.value) {
+    return "close";
+  }
+  if (props.changed) {
+    return "circle-filled";
+  }
+  return "close";
+});
+
+function onEnter() {
+  hover.value = true;
+}
+
+function onLeave() {
+  hover.value = false;
+}
+
+function onClose() {
+  emit("onClose");
+}
+
+</script>
+
+<style scoped>
+</style>

etc/js/components/pages/entities/pane-scripts.vue

@@ -10,11 +10,11 @@
               v-for="script in scriptLabels">
             {{ script.label }}
             <div class="script-close-button">
-              <icon-button 
-                src="close"
+              <pane-scripts-close-button
+                :changed="scriptChanged"
                 v-if="activeScript && script.label == activeScript.label"
-                @click.stop="onClose(script)">
-              </icon-button>
+                @onClose="onClose(script)">
+              </pane-scripts-close-button>
             </div>
           </div>
         </div>
@@ -24,6 +24,7 @@
             :conn="conn"
             :script="activeScript"
             v-model:error="scriptError"
+            v-model:changed="scriptChanged"
             v-if="activeScript">
           </flecs-script>
         </div>
@@ -53,6 +54,7 @@ const activeScriptPath = defineModel("script");
 const scripts = defineModel("scripts");
 const activeScript = ref();
 const scriptError = ref();
+const scriptChanged = ref();
 
 watch(() => [activeScript.value], () => {
   if (activeScript.value) {
@@ -256,6 +258,7 @@ div.flecs-script-button-active {
   background-color: var(--bg-pane);
   border-bottom-color: rgba(0, 0, 0, 0);
   border-top-color: var(--dark-green);
+  color: var(--primary-text);
 }
 
 div.flecs-script-button:hover {

etc/js/components/widgets/inspector/entity-inspector-component.vue

@@ -169,8 +169,6 @@ function toggle() {
 }
 
 const singleTarget = computed(() => {
-  console.log(props.name + ":");
-  console.log(props.targets);
   return props.targets && !Array.isArray(props.targets);
 });