|
2 | 2 | * @file getImagePath.js |
3 | 3 | * @description |
4 | 4 | * Resolves image path for circuit element icons based on type and UI variant. |
5 | | - * Compatible with browser (using import.meta.url), Node test environments (via `mock` flag), |
6 | | - * and Jupyter Widget environments (using conditional imports). |
| 5 | + * |
| 6 | + * In **bundled** mode the images are resolved from a static asset map that |
| 7 | + * esbuild inlines as Base64 data-URLs — no external `/assets/` folder needed. |
| 8 | + * |
| 9 | + * In **test / Node** mode (when `mock: true`) a plain path string is returned |
| 10 | + * so unit tests keep working without a bundler. |
7 | 11 | * |
8 | 12 | * @example |
9 | | - * getImagePath("resistor") // → file:///.../R.png (browser) or imported asset (jupyter) |
10 | | - * getImagePath("resistor", "hover") // → file:///.../R_hover.png or imported asset |
11 | | - * getImagePath("resistor", "hover", { mock: true }) // → /assets/R_hover.png (tests) |
| 13 | + * getImagePath("resistor") // → data:image/png;base64,… |
| 14 | + * getImagePath("resistor", "hover") // → data:image/png;base64,… |
| 15 | + * getImagePath("resistor", "hover", { mock: true }) // → /assets/R_hover.png |
12 | 16 | */ |
13 | 17 |
|
14 | 18 | import { ElementRegistry } from '../domain/factories/ElementRegistry.js'; |
| 19 | +import { ASSET_MAP } from './assetMap.js'; |
15 | 20 |
|
16 | 21 | /** |
17 | | - * Detects if we're running in Node.js environment |
| 22 | + * Map a registered element type to its single-letter image prefix. |
| 23 | + * @param {string} type |
| 24 | + * @returns {string} |
18 | 25 | */ |
19 | | -function isNode() { |
20 | | - return typeof process !== 'undefined' && process.versions && process.versions.node; |
| 26 | +function prefixForType(type) { |
| 27 | + const registeredTypes = ElementRegistry.getTypes(); |
| 28 | + const typeMap = {}; |
| 29 | + |
| 30 | + registeredTypes.forEach(registeredType => { |
| 31 | + let prefix; |
| 32 | + switch (registeredType.toLowerCase()) { |
| 33 | + case 'inductor': |
| 34 | + prefix = 'L'; |
| 35 | + break; |
| 36 | + default: |
| 37 | + prefix = registeredType.charAt(0).toUpperCase(); |
| 38 | + } |
| 39 | + typeMap[registeredType.toLowerCase()] = prefix; |
| 40 | + }); |
| 41 | + |
| 42 | + return typeMap[type.toLowerCase()] || type.charAt(0).toUpperCase(); |
21 | 43 | } |
22 | 44 |
|
23 | 45 | /** |
24 | 46 | * Resolves image path based on circuit element type and optional UI variant. |
25 | | - * Automatically detects environment and uses appropriate loading strategy. |
26 | | - * Gets the image prefix from ElementRegistry to avoid hardcoded mappings. |
27 | 47 | * |
28 | 48 | * @param {string} type - Element type (e.g., "resistor", "capacitor"). |
29 | | - * @param {string} [variant="default"] - UI variant (e.g., "hover", "selected"). |
| 49 | + * @param {string} [variant="default"] - UI variant: "default", "hover", "selected", "hover_selected". |
30 | 50 | * @param {Object} [options] |
31 | | - * @param {boolean} [options.mock=false] - If true, returns a simplified mock path for test environments. |
32 | | - * @returns {string|Promise<string>} Path to the asset. |
| 51 | + * @param {boolean} [options.mock=false] - If true, returns a simplified mock path (for tests). |
| 52 | + * @returns {string|Promise<string>} Resolved data-URL or path string. |
33 | 53 | */ |
34 | 54 | export async function getImagePath(type, variant = "default", { mock = false } = {}) { |
35 | | - if (!type || typeof type !== "string") { |
36 | | - throw new Error("Invalid or unknown type"); |
37 | | - } |
38 | | - |
39 | | - // Build mapping from ElementRegistry types to image prefixes |
40 | | - const registeredTypes = ElementRegistry.getTypes(); |
41 | | - const typeMap = {}; |
42 | | - |
43 | | - // Create mapping based on registered types |
44 | | - registeredTypes.forEach(registeredType => { |
45 | | - // Use a simple convention: first character uppercase for most types |
46 | | - // Special cases can be handled as needed |
47 | | - let prefix; |
48 | | - switch (registeredType.toLowerCase()) { |
49 | | - case 'inductor': |
50 | | - prefix = 'L'; // Inductor uses L, not I |
51 | | - break; |
52 | | - default: |
53 | | - prefix = registeredType.charAt(0).toUpperCase(); |
| 55 | + if (!type || typeof type !== "string") { |
| 56 | + throw new Error("Invalid or unknown type"); |
54 | 57 | } |
55 | | - typeMap[registeredType.toLowerCase()] = prefix; |
56 | | - }); |
57 | | - |
58 | | - const base = typeMap[type.toLowerCase()] || type.charAt(0).toUpperCase(); |
59 | | - const suffix = variant === "default" ? "" : `_${variant}`; |
60 | | - const filename = `${base}${suffix}.png`; |
61 | 58 |
|
62 | | - // Mock path for test environments |
63 | | - if (mock) { |
64 | | - return `/assets/${filename}`; |
65 | | - } |
| 59 | + const base = prefixForType(type); |
| 60 | + const suffix = variant === "default" ? "" : `_${variant}`; |
| 61 | + const filename = `${base}${suffix}.png`; |
66 | 62 |
|
67 | | - // Node.js environment - use URL-based approach |
68 | | - if (isNode()) { |
69 | | - const path = `/assets/${filename}`; |
70 | | - return new URL(path, import.meta.url).href; |
71 | | - } |
| 63 | + // Mock path for test environments |
| 64 | + if (mock) { |
| 65 | + return `/assets/${filename}`; |
| 66 | + } |
72 | 67 |
|
73 | | - // Browser environment - try dynamic import first (for bundlers like webpack/vite) |
74 | | - // If that fails, fallback to URL-based approach |
75 | | - try { |
76 | | - const importedAsset = await import(`../../assets/${filename}`); |
77 | | - return importedAsset.default || importedAsset; |
78 | | - } catch (error) { |
79 | | - // Fallback to URL-based approach if dynamic import fails |
80 | | - const path = `/assets/${filename}`; |
81 | | - return new URL(path, import.meta.url).href; |
82 | | - } |
| 68 | + // ── Bundled asset lookup ────────────────────────────────────── |
| 69 | + const entry = ASSET_MAP[base]; |
| 70 | + if (entry) { |
| 71 | + const dataUrl = entry[variant]; |
| 72 | + if (dataUrl) { |
| 73 | + return dataUrl; |
| 74 | + } |
| 75 | + } |
| 76 | + |
| 77 | + // ── Fallback: runtime URL (dev-server / unbundled) ────────── |
| 78 | + return `/assets/${filename}`; |
83 | 79 | } |
0 commit comments