Merge pull request #1956 from googlefonts/contextmenu-subtools-issue-…

…1953 Show subtools with right-click or control-click
googlefonts · Jan 16, 2025 · 5c55b60 · 5c55b60
2 parents 1a570f9 + 435f4dc
commit 5c55b60
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -1002,31 +1002,45 @@ export class EditorController extends ViewController {
           this.setSelectedTool(tool.identifier);
           this.canvasController.canvas.focus();
         };
+        toolButton.oncontextmenu = (event) => event.preventDefault();
       } else {
         const globalListener = {
           handleEvent: (event) => {
             if (event.type != "keydown" || event.key == "Escape") {
-              collapseSubTools(editToolsElement);
+              collapseSubtoolsAndCleanUp(editToolsElement);
             }
           },
         };
 
-        toolButton.onmousedown = () => {
+        const collapseSubtoolsAndCleanUp = (editToolsElement) => {
+          window.removeEventListener("mousedown", globalListener);
+          window.removeEventListener("keydown", globalListener);
+          collapseSubTools(editToolsElement);
+        };
+
+        const showSubTools = (event, withTimeOut) => {
           clearTimeout(this._multiToolMouseDownTimer);
-          this._multiToolMouseDownTimer = setTimeout(function () {
-            // Show sub tools
-            for (const child of editToolsElement.children) {
-              child.style.visibility = "visible";
-            }
-            window.addEventListener("mousedown", globalListener, false);
-            window.addEventListener("keydown", globalListener, false);
-          }, 650);
-          if (toolButton !== editToolsElement.children[0]) {
+          this._multiToolMouseDownTimer = setTimeout(
+            () => {
+              // Show sub tools
+              for (const child of editToolsElement.children) {
+                child.style.visibility = "visible";
+              }
+              window.addEventListener("mousedown", globalListener);
+              window.addEventListener("keydown", globalListener);
+            },
+            withTimeOut ? 500 : 0
+          );
+          if (!withTimeOut || toolButton !== editToolsElement.children[0]) {
             // ensure the multi-tool mousedown timer only affects the first child
+            event.preventDefault();
             event.stopImmediatePropagation();
           }
         };
 
+        toolButton.oncontextmenu = (event) => showSubTools(event, false);
+        toolButton.onmousedown = (event) => showSubTools(event, true);
+
         toolButton.onmouseup = () => {
           event.stopImmediatePropagation();
           event.preventDefault();
@@ -1041,9 +1055,7 @@ export class EditorController extends ViewController {
           }
 
           editToolsElement.prepend(toolButton);
-          collapseSubTools(editToolsElement);
-          window.removeEventListener("mousedown", globalListener, false);
-          window.removeEventListener("keydown", globalListener, false);
+          collapseSubtoolsAndCleanUp(editToolsElement);
         };
       }
       editToolsElement.appendChild(toolButton);