starting context menu

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geode-studio",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "tauri": "tauri"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "geode-studio"
-version = "0.0.1"
+version = "0.0.2"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "geode-studio",
-    "version": "0.0.1"
+    "version": "0.0.2"
   },
   "tauri": {
     "allowlist": {
@@ -64,4 +64,4 @@
       }
     ]
   }
-}
+}

src/css/content.css

@@ -4,4 +4,10 @@
   left: 0px;
   right: 0px;
   bottom: 0px;
+  overflow: hidden;
+}
+#content canvas {
+  position: absolute;
+  width: 1200px;
+  height: 1200px;
 }/*# sourceMappingURL=content.css.map */

src/css/content.scss

@@ -4,4 +4,11 @@
     left: 0px;
     right: 0px;
     bottom: 0px;
+    overflow: hidden;
+
+    canvas {
+        position: absolute;
+        width: 1200px;
+        height: 1200px;
+    }
 }

src/css/main.css

@@ -5,4 +5,15 @@ body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 400;
   font-size: 12px;
+}
+
+#context {
+  position: absolute;
+  display: flex;
+  z-index: 100;
+  background: #222;
+  border-radius: 8px;
+  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.4);
+  min-width: 50px;
+  min-height: 50px;
 }/*# sourceMappingURL=main.css.map */

src/css/main.scss

@@ -5,4 +5,15 @@ body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 400;
     font-size: 12px;
+}
+
+#context {
+    position: absolute;
+    display: flex;
+    z-index: 100;
+    background: #222;
+    border-radius: 8px;
+    box-shadow: 4px 4px 14px #0006;
+    min-width: 50px;
+    min-height: 50px;
 }

src/index.html

@@ -6,6 +6,7 @@
     <title>Geode Studio</title>
 
     <script type="module" type="text/javascript" src="/js/title.js" defer></script>
+    <script type="module" type="text/javascript" src="/js/main.js" defer></script>
 
     <link rel="stylesheet" href="/css/main.css" />
     <link rel="stylesheet" href="/css/title.css" />
@@ -33,6 +34,10 @@
       </span>
     </div>
 
-    <div id="content"></div>
+    <div style="display: none; pointer-events: none;" id="context"></div>
+
+    <div id="content">
+      <canvas data-context></canvas>
+    </div>
   </body>
 </html>

src/js/main.js

@@ -0,0 +1,28 @@
+let context = document.querySelector('#context')
+
+function hideContext() {
+    context.style.display = 'none'
+    context.style.pointerEvent = 'none'
+}
+
+document.addEventListener('contextmenu', e => {
+    e.preventDefault()
+
+    if (e.target.dataset.context == undefined) return hideContext()
+
+    context.style.display = ''
+    context.style.pointerEvent = ''
+
+    context.style.top = e.clientY + 10 + 'px'
+    context.style.left = e.clientX + 10 + 'px'
+
+    let bounding = context.getBoundingClientRect()
+
+    if (bounding.bottom >= (window.innerHeight - 5 || document.documentElement.clientHeight - 5))
+        context.style.top = e.clientY - bounding.height + 'px'
+
+    if (bounding.right >= (window.innerWidth - 5 || document.documentElement.clientWidth - 5))
+        context.style.left = e.clientX - bounding.width + 'px'
+})
+
+document.addEventListener('click', hideContext)