feat: add dynamic constant management to the calculator core

samples/calc-02/index.js

@@ -383,6 +383,7 @@ modeButton.addEventListener('click', (event) => {
 window.addEventListener('resize', () => {
 	closeModeMenu();
 	closeConstMenu();
+	render();
 });
 window.addEventListener('scroll', () => {
 	closeModeMenu();
@@ -422,13 +423,14 @@ hiddenInput.addEventListener('paste', (event) => {
 
 upButton.addEventListener('click', () => {});
 
-const constants = [
-	{ label: 'π', value: Math.PI },
-	{ label: 'e', value: Math.E },
-	{ label: 'φ', value: (1 + Math.sqrt(5)) / 2 },
-	{ label: 'g', value: 9.80665 },
-	{ label: 'c', value: 299792458 },
-];
+const constantLabels = {
+	pi: 'π',
+	e: 'e',
+	phi: 'φ',
+	g: 'g',
+	c: 'c',
+};
+const constantOrder = ['pi', 'e', 'phi', 'g', 'c'];
 
 let constMenuEl = null;
 
@@ -449,14 +451,19 @@ function toggleConstMenu() {
 	constMenuEl = document.createElement('div');
 	constMenuEl.className = 'mode-menu';
 	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	constants.forEach((constant) => {
+	const availableConstants = calc.listConstants();
+	const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))];
+	keys.forEach((name) => {
 		const button = document.createElement('button');
 		button.type = 'button';
 		button.className = 'mode-menu-item';
-		button.textContent = constant.label;
+		if (!Object.prototype.hasOwnProperty.call(availableConstants, name)) {
+			return;
+		}
+		button.textContent = constantLabels[name] ?? name;
 		button.addEventListener('click', () => {
 			pushEditingValueIfNeeded();
-			calc.push(constant.value);
+			calc.push(availableConstants[name]);
 			render();
 			clearStatus();
 			closeConstMenu();