require drag as default

OrionReed · Apr 1, 2024 · 40aacc5 · 40aacc5
1 parent 4c77973
commit 40aacc5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/src/background.js b/src/background.js
@@ -2,16 +2,24 @@ import { getBrowser } from "./browserApi.js";
 import { dom3d } from "./dom3d.js";
 
 // browser extension state
-let showSides = false;
 let colorSurfaces = true;
+let showSides = false;
 let colorRandom = false;
 let zoomEnabled = true;
-let requireDragEnabled = false;
-let selectors = [];
+let requireDrag = true;
+let requireAlt = false;
+let CssSelectors = [];
 const browser = getBrowser();
 
 // Create context menu items for user preferences
 const options = [
+	{
+		id: "toggle-color-surfaces",
+		title: "Show Surfaces",
+		type: "checkbox",
+		checked: colorSurfaces,
+		contexts: ["action"],
+	},
 	{
 		id: "toggle-show-sides",
 		title: "Show Sides",
@@ -20,36 +28,36 @@ const options = [
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-color-surfaces",
-		title: "Show Surfaces",
+		id: "toggle-zoom",
+		title: "Scale with Scroll",
 		type: "checkbox",
-		checked: colorSurfaces,
+		checked: zoomEnabled,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-color-random",
-		title: "Randomize Color",
+		id: "toggle-require-drag",
+		title: "Require Drag",
 		type: "checkbox",
-		checked: colorRandom,
+		checked: requireDrag,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-zoom",
-		title: "Enable Zoom",
+		id: "toggle-require-alt",
+		title: "Require Alt Key",
 		type: "checkbox",
-		checked: zoomEnabled,
+		checked: requireAlt,
 		contexts: ["action"],
 	},
 	{
-		id: "toggle-require-drag",
-		title: "Rotate with Alt+Drag",
+		id: "toggle-color-random",
+		title: "Randomize Color",
 		type: "checkbox",
-		checked: requireDragEnabled,
+		checked: colorRandom,
 		contexts: ["action"],
 	},
 	{
 		id: "selectors",
-		title: "Choose Selectors",
+		title: "CSS Selectors",
 		type: "normal",
 		contexts: ["action"],
 	},
@@ -74,7 +82,10 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
 			zoomEnabled = !zoomEnabled;
 		},
 		"toggle-require-drag": () => {
-			requireDragEnabled = !requireDragEnabled;
+			requireDrag = !requireDrag;
+		},
+		"toggle-require-alt": () => {
+			requireAlt = !requireAlt;
 		},
 		selectors: () => {
 			// Inject a script to open a prompt for the user
@@ -115,7 +126,7 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
 						}
 					}
 				},
-				args: [selectors],
+				args: [CssSelectors],
 			});
 		},
 	};
@@ -139,8 +150,9 @@ browser.action.onClicked.addListener(async (tab) => {
 				colorSurfaces,
 				colorRandom,
 				zoomEnabled,
-				requireDragEnabled,
-				selectors,
+				requireDrag,
+				requireAlt,
+				CssSelectors,
 			],
 		});
 	} catch (err) {
@@ -150,6 +162,6 @@ browser.action.onClicked.addListener(async (tab) => {
 
 browser.runtime.onMessage.addListener((message, _, __) => {
 	if (message.updatedSelectors) {
-		selectors = message.updatedSelectors;
+		CssSelectors = message.updatedSelectors;
 	}
 });
diff --git a/src/dom3d.js b/src/dom3d.js
@@ -5,6 +5,7 @@ export function dom3d(
 	COLOR_RANDOM,
 	ZOOM_ENABLED,
 	REQUIRE_DRAG,
+	REQUIRE_ALT,
 	SELECTORS,
 ) {
 	const body = document.body;
@@ -197,7 +198,7 @@ export function dom3d(
 	// EVENT LISTENERS ——————————————————————————————————————————
 
 	function handlePointerDown(event) {
-		if (!REQUIRE_DRAG || !event.altKey) return;
+		if (REQUIRE_ALT && !event.altKey) return;
 		state.isDragging = true;
 		state.startX = event.clientX;
 		state.startY = event.clientY;
@@ -218,8 +219,9 @@ export function dom3d(
 
 	function handlePointerMove(event) {
 		if (REQUIRE_DRAG && !state.isDragging) return;
+		if (REQUIRE_ALT && !event.altKey) return;
 
-		if (REQUIRE_DRAG && state.isDragging) {
+		if (REQUIRE_DRAG) {
 			// Drag-based rotation/orbiting
 			const deltaX = event.clientX - state.startX;
 			const deltaY = event.clientY - state.startY;
@@ -229,7 +231,6 @@ export function dom3d(
 			state.rotationY =
 				state.startRotationY - (MAX_ROTATION * deltaY) / window.innerHeight;
 		} else {
-			// Mouse-position-based rotation/orbiting
 			state.rotationY =
 				MAX_ROTATION * (1 - event.clientY / window.innerHeight) -
 				MAX_ROTATION / 2;