refactor code

src/base.js

@@ -65,8 +65,8 @@ const store = new Store({
       store.set("about.insiderPreview", false);
     },
     "1.0.10": (store) => {
-      store.set("advance.capture.switch", false);
-      store.set("advance.capture.filePath", "");
+      store.set("fileops.capture.switch", false);
+      store.set("fileops.capture.filePath", "");
     },
   },
 });
@@ -213,11 +213,11 @@ window.onload = () => {
   document.getElementById("sign-name").value = config.advance.sign.name;
 
   document.getElementById("capture-file-switch").checked =
-    config.advance.capture.switch;
+    config.fileops.capture.switch;
   document.getElementById("capture-file-path").value =
-    config.advance.capture.filePath;
-  if (true === config.advance.capture.switch) {
-    captureFileStream = fs.createWriteStream(config.advance.capture.filePath, {
+    config.fileops.capture.filePath;
+  if (true === config.fileops.capture.switch) {
+    captureFileStream = fs.createWriteStream(config.fileops.capture.filePath, {
       flags: "a",
     });
   }

src/editor.js

@@ -791,17 +791,17 @@ document.getElementById("capture-file-switch").onclick = (e) => {
         if (result.canceled === false) {
           let path = result.filePath;
           pathEle.value = path;
-          captureFileStream = fs.createWriteStream(path, { flags: "a" });
+          captureFileStream = fs.createWriteStream(path, { flags: "w" });
 
-          configUpdate("advance.capture.switch", true);
-          configUpdate("advance.capture.filePath", path);
+          configUpdate("fileops.capture.switch", true);
+          configUpdate("fileops.capture.filePath", path);
         } else {
           if (undefined !== captureFileStream) captureFileStream.end();
           captureFileStream = undefined;
           pathEle.value = "";
 
-          configUpdate("advance.capture.switch", false);
-          configUpdate("advance.capture.filePath", "");
+          configUpdate("fileops.capture.switch", false);
+          configUpdate("fileops.capture.filePath", "");
 
           // restore check status
           e.target.checked = false;
@@ -811,12 +811,14 @@ document.getElementById("capture-file-switch").onclick = (e) => {
     if (undefined !== captureFileStream) captureFileStream.end();
     captureFileStream = undefined;
 
-    configUpdate("advance.capture.switch", false);
+    configUpdate("fileops.capture.switch", false);
   }
 };
 
 document.getElementById("capture-file-path").ondblclick = (e) => {
-  console.log(e.target.value);
+  const file = e.target.value;
+  const text = fs.readFileSync(file).toString();
+  editor.getModel().setValue(text);
 };
 
 document.getElementById("editor-area").ondragover = () => {

src/index.css

@@ -59,7 +59,7 @@ nav {
 }
 
 blockquote {
-  margin-top: 14px;
+  margin-top: 10px;
   margin-bottom: 6px;
   font-size: 12px;
   font-weight: bold;

src/index.html

@@ -46,6 +46,7 @@
             </li>
             <li class="tab col s3"><a href="#transmit-tab">transmit</a></li>
             <li class="tab col s3"><a href="#advance-tab">advance</a></li>
+            <li class="tab col s3"><a href="#fileops-tab">file ops</a></li>
             <li class="tab col s3"><a href="#about-tab">about</a></li>
           </ul>
         </div>
@@ -259,7 +260,7 @@
           </div>
         </div>
         <div id="advance-tab" class="col s12">
-          <div class="col s3">
+          <div class="col s4">
             <blockquote>Sign</blockquote>
             <div class="divider"></div>
             <div class="row config-row">
@@ -282,7 +283,7 @@
             </div>
           </div>
 
-          <div class="col s3">
+          <div class="col s4">
             <blockquote>Breakpoint</blockquote>
             <div class="divider"></div>
             <div class="row config-row">
@@ -316,7 +317,7 @@
             </div>
           </div>
 
-          <div class="col s6">
+          <div class="col s4">
             <blockquote>Bar Color</blockquote>
             <div class="divider"></div>
             <div class="center" id="color-panel">
@@ -324,11 +325,14 @@
               <input value="#ff8a80" id="bar-color-middle" type="color" />
               <input value="#80d8ff" id="bar-color-tail" type="color" />
             </div>
-
+          </div>
+        </div>
+        <div id="fileops-tab" class="col s12">
+          <div class="col s12">
             <blockquote>Capture to File</blockquote>
             <div class="divider"></div>
             <div class="row config-row">
-              <div class="col s5 config-item">
+              <div class="col s3 config-item">
                 <div class="switch">
                   <label>
                     Off
@@ -338,11 +342,23 @@
                   </label>
                 </div>
               </div>
-              <div class="input-field col s7">
-                <input readonly value="" placeholder="Capture File Path" id="capture-file-path" type="text" />
+              <div class="input-field col s9">
+                <input
+                  readonly
+                  value=""
+                  placeholder="Capture File Path"
+                  id="capture-file-path"
+                  type="text"
+                />
               </div>
             </div>
           </div>
+          <div class="col s12">
+            <blockquote>File Operations</blockquote>
+            <div class="divider"></div>
+            <p>&#149 <b>Open File</b>: CmdOrCtrl + O &#149 <b>Open Hex File</b>: CmdOrCtrl + Shift + O &#149 <b>Save File</b>: CmdOrCtrl + S </p>
+            
+          </div>
         </div>
         <div id="about-tab" class="col s12">
           <div class="row label-row">