Switch to Canvas Rendering

This switches the rendering of the layout from using HTML and CSS to
using a canvas (technically it's two). This not only should improve the
performance but also brings the rendering in line with our native
renderers, enabling new features such as vertical resizing and
horizontal layouts. This also removes a lot of code specific to the HTML
rendering and thus greatly simplifies the codebase. There is one slight
regression in that the layout editor doesn't allow clicking and dragging
the individual components directly on the layout anymore. This is
however something we can explore directly in `livesplit-core` in the
future, so other frontends can benefit from it as well.

buildCore.js

@@ -42,7 +42,8 @@ if (process.argv.some((v) => v === "--nightly")) {
         // but it forgets to pass the LTO flag that we specified in the
         // Cargo.toml, so the virtual-function-elimination complains that it's
         // only compatible with LTO, so we have to specify lto here too.
-        rustFlags += " -Z virtual-function-elimination -C lto";
+        // FIXME: Seems to be broken at the moment.
+        // rustFlags += " -Z virtual-function-elimination -C lto";
     }
 }
 
@@ -55,7 +56,7 @@ execSync(
 );
 
 execSync(
-    `cargo ${toolchain} rustc -p livesplit-core-capi --crate-type cdylib --features wasm-web --target wasm32-unknown-unknown ${cargoFlags}`,
+    `cargo ${toolchain} rustc -p livesplit-core-capi --crate-type cdylib --features wasm-web,web-rendering --target wasm32-unknown-unknown ${cargoFlags}`,
     {
         cwd: "livesplit-core",
         stdio: "inherit",

src/css/Layout.scss

@@ -1,27 +1,42 @@
-@import 'variables';
 @import 'Font';
 
 .layout {
-  font-family: "fira", sans-serif;
-  font-size: $default-font-size;
-  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-  position: relative;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-
   .resizable-layout {
     position: absolute;
-    z-index: 2;
-    height: 100% !important;
+    top: 0;
+    width: inherit;
+    height: inherit;
+
+    .react-resizable {
+      width: 0 !important;
+      height: 0 !important;
+    }
 
-    .resizable-handle {
+    .resizable-handle-east {
       cursor: e-resize;
-      bottom: -4px;
-      right: -4px;
+      right: -10px;
+      bottom: 10px;
+      top: 0;
+      position: absolute;
+      width: 20px;
+    }
+
+    .resizable-handle-south {
+      cursor: s-resize;
+      bottom: -10px;
+      left: 0;
+      right: 10px;
+      position: absolute;
+      height: 20px;
+    }
+
+    .resizable-handle-south-east {
+      cursor: se-resize;
+      bottom: -10px;
+      right: -10px;
       position: absolute;
       width: 20px;
-      height: 100%;
+      height: 20px;
     }
   }
 }