Browse Source

use ace editor

Kyle 1 month ago
parent
commit
1148af6c18
2 changed files with 17 additions and 10 deletions
  1. 7 4
      index.html
  2. 10 6
      main.js

+ 7 - 4
index.html

@@ -1,11 +1,14 @@
1 1
 <html>
2 2
     <head>
3
+        <title>Calc Note</title>
4
+        <meta name="viewport" content="width=device-width, initial-scale=1">
5
+        <script src="https://pagecdn.io/lib/ace/1.4.5/ace.js" integrity="sha256-5Xkhn3k/1rbXB+Q/DX/2RuAtaB4dRRyQvMs83prFjpM=" crossorigin="anonymous"></script>
3 6
         <script src="main.js"></script>
4 7
     </head>
5
-    <body style="margin: 0; height: 100%; width: 100%; display: flex; align-items: center;">
6
-        <div style="margin: auto; width: 400px; display: flex; height: 250px;">
7
-            <textarea class="input" style="flex-grow: 1; box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; border: none; background-color: #eee; padding: 5px;"></textarea>
8
-            <div class="results" style="box-sizing: border-box; flex-grow: 1; background-color: #eef; white-space: pre; font-family: monospace;">
8
+    <body style="background-color: #eeeef6; margin: 0; height: 100%; width: 100%; display: flex; align-items: center;">
9
+        <div style="margin: auto; display: flex; height: 500px; box-shadow: 0 0 10px #ddd;">
10
+            <div id="editor" autofocus class="input" style="resize: none; min-width: 300px; box-sizing: border-box; -moz-box-sizing: border-box; margin: 0;"></div>
11
+            <div class="results" style="overflow-y: auto; min-width: 300px; box-sizing: border-box; background-color: #f4f4f4; padding: 0 5px; white-space: pre; font-family: monospace;">
9 12
             </div>
10 13
         </div>
11 14
     </body>

+ 10 - 6
main.js

@@ -165,9 +165,14 @@ window.onload = function () {
165 165
   const input = document.querySelector('.input');
166 166
   const results = document.querySelector('.results');
167 167
 
168
+  var editor = ace.edit("editor");
169
+  editor.container.style.lineHeight = 13.5 / 12;
170
+  editor.renderer.updateFontSize();
171
+  editor.getSession().setUseWrapMode(false);
172
+
168 173
   function onchange(e) {
169
-    var lines = input.value.split('\n').map(split)
170
-    var state = compile(lines)
174
+    var lines = editor.getValue().split('\n').map(split);
175
+    var state = compile(lines);
171 176
     var debug = state.map(s => [s.name, doesSolve(s.name, state) ? expressionFor(s.name, state) : null]).map(
172 177
       x => x[1] ? `${x[0]} = ${calcExpression(x[1])} = ${render(x[1])}` : ''
173 178
     )
@@ -175,13 +180,12 @@ window.onload = function () {
175 180
       l => l[0] === '?'
176 181
         ? l.slice(1).map(
177 182
           x => [x, expressionFor(x, state)]
178
-        ).map(x => [x[0], render(x[1])].concat(doesSolve(x[0], state) ? [calcExpression(x[1])] : []).join(' = ')).join('; ')
179
-        : ''
183
+        ).map(x => [x[0], doesSolve(x[0], state) ? calcExpression(x[1]) : render(x[1])].join(' = ')).join('; ')
184
+        : ' '
180 185
     )
181 186
     results.textContent = result.join('\n');
182 187
   }
183 188
 
184
-  input.onchange = onchange;
185
-  input.onkeyup = onchange;
189
+  editor.on('change', onchange);
186 190
   onchange();
187 191
 };