optimize

css/main.css

@@ -290,6 +290,7 @@ body.at_desktop {
   position: absolute;
   border-radius: 0px;
   background: var(--tick-background);
+  border-radius: 3px;
 }
 
 .tickDisplayer.left .oneTick, .tickDisplayer.right .oneTick{

package.json

@@ -1,6 +1,6 @@
 {
     "name": "Keyboard_Overlay",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "main": "main.js",
     "dependencies": {
         "app": "^0.1.0",

scripts/main.js

@@ -23,6 +23,7 @@
   let useKps = false;
   let majorFontSize = 14;
   let tickSpeed = 10;
+  let isReady = false;
 
   let directoryLocation = undefined;
 
@@ -242,6 +243,9 @@
         p = 2 * len + p;
         p = Math.max(p, 0.05 * (moveTime * majorFontSize));
         ele.css("width", Math.ceil(p));
+        setTimeout(() => {
+          ele.css("width", Math.ceil(p));
+        }, 20);
         setTimeout(() => {
           ele.remove();
           delete animationEnd[tkIdx];
@@ -269,6 +273,9 @@
         p = len - p;
         p = Math.max(p, 0.05 * (moveTime * majorFontSize));
         ele.css("width", Math.ceil(p));
+        setTimeout(() => {
+          ele.css("width", Math.ceil(p));
+        }, 20);
         setTimeout(() => {
           ele.remove();
           delete animationEnd[tkIdx];
@@ -296,6 +303,9 @@
         p = 2 * len + p;
         p = Math.max(p, 0.05 * (moveTime * majorFontSize));
         ele.css("height", Math.ceil(p));
+        setTimeout(() => {
+          ele.css("height", Math.ceil(p));
+        }, 20);
         setTimeout(() => {
           ele.remove();
           delete animationEnd[tkIdx];
@@ -323,6 +333,9 @@
         p = len - p;
         p = Math.max(p, 0.05 * (moveTime * majorFontSize));
         ele.css("height", Math.ceil(p));
+        setTimeout(() => {
+          ele.css("height", Math.ceil(p));
+        }, 20);
         setTimeout(() => {
           ele.remove();
           delete animationEnd[tkIdx];
@@ -336,6 +349,8 @@
   let cpsCount = 0;
   let keyboardLocked = false;
   const keydownEvent = (e, wheel) => {
+    if(! isReady)
+      return;
     const ck = (typeof e === "string" ? e : (runInElectron ? e.keycode : e.code));
     if(keyboardLocked){
       if(codeToKey[ck] === undefined)
@@ -487,6 +502,8 @@
     }
   };
   const keyupEvent = (e, wheel) => {
+    if(! isReady)
+      return;
     if(keyboardLocked)
       return;
     const ck = (typeof e === "string" ? e : (runInElectron ? e.keycode : e.code));
@@ -1080,7 +1097,8 @@
         if(displayShortcut)
           $(".shortcutKeyContainer").css("display", "block");
         if(runInElectron)
-          win.setSize(Math.ceil($(".innerContent").outerWidth()), Math.ceil($(".innerContent").outerHeight()));
+          win.setSize(Math.floor($(".innerContent").outerWidth()), Math.floor($(".innerContent").outerHeight()));
+        isReady = true;
       },
       error: function(){
         setErrorMessage("Cannot load map file.");