Fix mouse coordinate system

tfukaza · Jul 14, 2024 · 2c5659a · 2c5659a
1 parent d1b0de5
commit 2c5659a
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 213 deletions.
diff --git a/demo/vanilla/demo.css b/demo/vanilla/demo.css
@@ -1,146 +1,141 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
-
+@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
 
 /* Prevent text highlighting. Otherwise, texts in nodes will be highlighted when dragging. */
 * {
-    -webkit-touch-callout: none;
-    -webkit-tap-highlight-color: transparent;
-    -moz-user-select: -moz-none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
-
 body {
-    margin: 0;
-    padding: 0;
-    touch-action: none;
+  margin: 0;
+  padding: 0;
+  touch-action: none;
 
-    font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #f8f8f8;
+}
 
 #sl-canvas-container {
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
+  width: 80%;
+  height: 60vh;
+  border: 2px solid #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
 .navbar {
-    top: 81vh;
-    position: absolute;
-    z-index: 10;
-    width: auto;
-    display: inline-flex;
-    left: 50%;
-    transform: translate3d(-50%, 0, 0);
-    column-gap: 10px;
-
-    border: #e0e0e0 1px solid;
-    border-radius: 10px;
-    background-color: rgba(255, 255, 255, 0.639);
-    backdrop-filter: blur(4px);
-    box-shadow: 0px 6px 10px 0px rgba(71, 76, 79, 0.184);
-    padding: 10px 10px;
-
-
-    .sl-dropdown {
-        position: relative;
-        display: inline-block;
-        height: auto;
+  top: 81vh;
+  position: absolute;
+  z-index: 10;
+  width: auto;
+  display: inline-flex;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  column-gap: 10px;
+
+  padding: 10px 10px;
+
+  .sl-dropdown {
+    position: relative;
+    display: inline-block;
+    height: auto;
+  }
+
+  .menu-button {
+    cursor: pointer;
+    border: none;
+    text-align: center;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: #c63629;
+    height: 40px;
+    padding: 0px 12px;
+    border-radius: 8px;
+    color: rgb(255, 255, 255);
+    transition: all 0.1s;
+
+    font-size: 14px;
+    font-family: "Inter", sans-serif;
+
+    &:hover {
+      background-color: #d36445;
     }
+  }
 
-    .menu-button {
-        cursor: pointer;
-        border: none;
-        text-align: center;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-
-        background-color: #f8f8f8;
-        height: 40px;
-        padding: 0px 12px;
-        border-radius: 8px;
-        color: rgb(56, 56, 56);
-        transition: all 0.1s;
-
-        font-size: 14px;
-        font-family: 'Inter', sans-serif;
-
-        &:hover {
-            background-color: #dcdcdc;
-        }
-
-    }
-
-    .show-menu {
-        background-color: #dcdcdc;
-
-        ul {
-            opacity: 1;
-            pointer-events: all;
-        }
-
-
-
-
-    }
+  .show-menu {
+    background-color: #dcdcdc;
 
     ul {
-        list-style: none;
-
-        transition: all 0.1s;
-        padding: 10px;
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
 
-        border: #e0e0e0 1px solid;
-        border-radius: 10px;
-        background-color: rgba(255, 255, 255, 0.83);
-        backdrop-filter: blur(4px);
-        box-shadow: 0px 6px 10px 0px rgba(71, 76, 79, 0.184);
+  ul {
+    list-style: none;
 
-        min-width: 100px;
+    transition: all 0.1s;
+    padding: 10px;
 
-        position: absolute;
-        left: 50%;
-        top: 0px;
+    border: #e0e0e0 1px solid;
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.83);
+    backdrop-filter: blur(4px);
+    box-shadow: 0px 6px 10px 0px rgba(71, 76, 79, 0.184);
 
-        transform: translate(-50%, calc(-100% - 30px));
+    min-width: 100px;
 
-        opacity: 0;
-        pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 0px;
 
+    transform: translate(-50%, calc(-100% - 30px));
 
+    opacity: 0;
+    pointer-events: none;
 
-        li {
-            button {
-                cursor: pointer;
-                width: 100%;
-                border: none;
-                background-color: transparent;
-                text-align: left;
-                padding: 4px;
-                border-radius: 4px;
-            }
+    li {
+      button {
+        cursor: pointer;
+        width: 100%;
+        border: none;
+        background-color: transparent;
+        text-align: left;
+        padding: 4px;
+        border-radius: 4px;
+      }
 
-            &:hover {
-                background-color: #f8f8f8;
-            }
-        }
+      &:hover {
+        background-color: #f8f8f8;
+      }
     }
+  }
 }
 
 #standardButton {
-    font-family: 'inter', sans-serif;
+  font-family: "inter", sans-serif;
 }
 
 #retroButton {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 #themeButton {
-    display: none;
-}
+  display: none;
+}
diff --git a/demo/vanilla/index.html b/demo/vanilla/index.html
@@ -88,7 +88,7 @@
     <script type="module" src="demo.mjs" defer></script>
 
     <main>
-      <div id="sl-canvas-container" style="width: 100%; height: 100vh">
+      <div id="sl-canvas-container">
         <div id="sl-canvas">
           <div id="sl-background"></div>
         </div>

diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     }
   },
   "scripts": {
-    "dev:vanilla": "FRAMEWORK=vanilla npx vite build --mode development --watch  & FRAMEWORK=vanilla npx vite serve demo/vanilla --config demo/vanilla/vite.config.mjs",
-    "dev:react": "FRAMEWORK=react npx vite build --mode development --watch    & FRAMEWORK=react npx vite serve demo/react --config demo/react/vite.config.mjs",
+    "dev:vanilla": "FRAMEWORK=vanilla npx vite build --mode development --watch  & FRAMEWORK=vanilla npx vite serve demo/vanilla --config demo/vanilla/vite.config.mjs --host",
+    "dev:react": "FRAMEWORK=react npx vite build --mode development --watch    & FRAMEWORK=react npx vite serve demo/react --config demo/react/vite.config.mjs --host",
     "dev:all": "concurrently --kill-others \"npm run dev:vanilla\" \"npm run dev:react\"",
     "test": "start-server-and-test dev:all \"localhost:3001|localhost:3002\" jest",
     "format": "prettier --write src",