Change MenuList checkbox to be an icon from a widget

editor/src/layout/widgets.rs

@@ -341,8 +341,6 @@ pub struct OptionalInput {
 pub struct CheckboxInput {
 	pub checked: bool,
 	pub icon: String,
-	#[serde(rename = "outlineStyle")]
-	pub outline_style: bool,
 	#[serde(rename = "title")]
 	pub tooltip: String,
 	#[serde(skip)]
@@ -378,7 +376,6 @@ pub struct DropdownEntryData {
 	pub value: String,
 	pub label: String,
 	pub icon: String,
-	pub checkbox: bool,
 	pub shortcut: Vec<String>,
 	#[serde(rename = "shortcutRequiresLock")]
 	pub shortcut_requires_lock: bool,

frontend/assets/icon-16px-solid/checkbox-checked.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="7.19,13.83 2.18,9.44 3.82,7.56 6.81,10.17 12,3.25 14,4.75" />
+	<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
+</svg>

frontend/assets/icon-16px-solid/checkbox-unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
+</svg>

frontend/src/components/floating-menus/MenuList.vue

@@ -26,8 +26,7 @@
 					@pointerenter="() => onEntryPointerEnter(entry)"
 					@pointerleave="() => onEntryPointerLeave(entry)"
 				>
-					<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :disableTabIndex="true" class="entry-checkbox" />
+					<IconLabel v-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
-					<IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
 					<div v-else-if="drawIcon" class="no-icon"></div>
 
 					<link v-if="entry.font" rel="stylesheet" :href="entry.font?.toString()" />
@@ -93,7 +92,6 @@
 				margin-left: 8px;
 			}
 
-			.entry-checkbox,
 			.entry-icon,
 			.no-icon {
 				margin: 0 4px;
@@ -143,14 +141,6 @@
 					color: var(--color-f-white);
 				}
 			}
-
-			&:hover .entry-checkbox label .checkbox-box {
-				border: 1px solid var(--color-f-white);
-
-				svg {
-					fill: var(--color-f-white);
-				}
-			}
 		}
 	}
 }
@@ -164,7 +154,6 @@ import { IconName } from "@/utility-functions/icons";
 import FloatingMenu, { MenuDirection } from "@/components/floating-menus/FloatingMenu.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
-import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import Separator from "@/components/widgets/labels/Separator.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
@@ -177,14 +166,13 @@ interface MenuListEntryData<Value = string> {
 	label?: string;
 	icon?: IconName;
 	font?: URL;
-	checkbox?: boolean;
 	shortcut?: string[];
 	shortcutRequiresLock?: boolean;
 	action?: () => void;
 	children?: SectionsOfMenuListEntries;
 }
 
-export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { ref?: typeof FloatingMenu | typeof MenuList; checked?: boolean };
+export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { ref?: typeof FloatingMenu | typeof MenuList };
 
 const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
 const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
@@ -232,10 +220,6 @@ const MenuList = defineComponent({
 	},
 	methods: {
 		onEntryClick(menuEntry: MenuListEntry): void {
-			// Toggle checkbox
-			// TODO: This is broken at the moment, fix it when we get rid of using `ref`
-			if (menuEntry.checkbox) menuEntry.checked = !menuEntry.checked;
-
 			// Call the action, or a default, if either are provided
 			if (menuEntry.action) menuEntry.action();
 			else if (this.defaultAction) this.defaultAction();
@@ -375,7 +359,6 @@ const MenuList = defineComponent({
 		FloatingMenu,
 		Separator,
 		IconLabel,
-		CheckboxInput,
 		UserInputLabel,
 		LayoutRow,
 		LayoutCol,

frontend/src/components/panels/NodeGraph.vue

@@ -200,6 +200,7 @@
 			background-position: calc(var(--grid-offset-x) - var(--dot-radius)) calc(var(--grid-offset-y) - var(--dot-radius));
 			background-image: radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-3-darkgray) var(--dot-radius), transparent 0);
 			image-rendering: pixelated;
+			mix-blend-mode: screen;
 		}
 	}
 
@@ -235,8 +236,8 @@
 				min-width: 120px;
 				border-radius: 4px;
 				background: var(--color-4-dimgray);
-				left: calc(var(--offset-left) * 24px);
+				left: calc((var(--offset-left) + 0.5) * 24px);
-				top: calc(var(--offset-top) * 24px);
+				top: calc((var(--offset-top) + 0.5) * 24px);
 
 				.primary {
 					display: flex;
@@ -245,7 +246,7 @@
 					gap: 4px;
 					width: 100%;
 					height: 24px;
-					background: var(--color-6-lowergray);
+					background: var(--color-5-dullgray);
 					border-radius: 4px;
 
 					.icon-label {
@@ -277,7 +278,7 @@
 					&::after {
 						content: "";
 						position: absolute;
-						background: var(--color-6-lowergray);
+						background: var(--color-5-dullgray);
 						width: 4px;
 						height: 4px;
 						top: -4px;
@@ -369,7 +370,7 @@ export default defineComponent({
 			return sparse;
 		},
 		dotRadius(): number {
-			return 1 + Math.floor(this.transform.scale + 0.001) / 2;
+			return 1 + Math.floor(this.transform.scale - 0.5 + 0.001) / 2;
 		},
 	},
 	methods: {

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
+	<LayoutRow class="checkbox-input">
 		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
 		<label :for="`checkbox-input-${id}`" :tabindex="disableTabIndex ? -1 : 0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()">
 			<LayoutRow class="checkbox-box">
@@ -53,33 +53,6 @@
 			background: var(--color-accent-hover);
 		}
 	}
-
-	&.outline-style label {
-		.checkbox-box {
-			border: 1px solid var(--color-e-nearwhite);
-			padding: 1px;
-			background: none;
-
-			svg {
-				display: none;
-			}
-		}
-
-		&:hover .checkbox-box {
-			border: 1px solid var(--color-f-white);
-		}
-	}
-
-	&.outline-style input:checked + label {
-		.checkbox-box {
-			background: none;
-
-			svg {
-				display: block;
-				fill: var(--color-e-nearwhite);
-			}
-		}
-	}
 }
 </style>
 
@@ -106,7 +79,6 @@ export default defineComponent({
 	props: {
 		checked: { type: Boolean as PropType<boolean>, default: false },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
-		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
 		disableTabIndex: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: {

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -110,7 +110,7 @@ function makeEntries(editor: Editor): MenuListEntries {
 					{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
 					{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
 					{ label: "Save All", shortcut: ["KeyControl", "KeyAlt", "KeyS"] },
-					{ label: "Auto-Save", checkbox: true, checked: true },
+					{ label: "Auto-Save", icon: "CheckboxChecked" },
 				],
 				[
 					{ label: "Import…", shortcut: ["KeyControl", "KeyI"] },

frontend/src/utility-functions/icons.ts

@@ -75,6 +75,8 @@ import BooleanIntersect from "@/../assets/icon-16px-solid/boolean-intersect.svg"
 import BooleanSubtractBack from "@/../assets/icon-16px-solid/boolean-subtract-back.svg";
 import BooleanSubtractFront from "@/../assets/icon-16px-solid/boolean-subtract-front.svg";
 import BooleanUnion from "@/../assets/icon-16px-solid/boolean-union.svg";
+import CheckboxChecked from "@/../assets/icon-16px-solid/checkbox-checked.svg";
+import CheckboxUnchecked from "@/../assets/icon-16px-solid/checkbox-unchecked.svg";
 import Copy from "@/../assets/icon-16px-solid/copy.svg";
 import EyeHidden from "@/../assets/icon-16px-solid/eye-hidden.svg";
 import EyeVisible from "@/../assets/icon-16px-solid/eye-visible.svg";
@@ -120,6 +122,8 @@ const SOLID_16PX = {
 	BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
 	BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
 	BooleanUnion: { component: BooleanUnion, size: 16 },
+	CheckboxChecked: { component: CheckboxChecked, size: 16 },
+	CheckboxUnchecked: { component: CheckboxUnchecked, size: 16 },
 	Copy: { component: Copy, size: 16 },
 	EyeHidden: { component: EyeHidden, size: 16 },
 	EyeVisible: { component: EyeVisible, size: 16 },