@fps-games/editor 0.1.5-beta.5 → 0.1.6-beta.1

package/node_modules/@fps-games/editor-babylon/dist/projection.js

@@ -3,6 +3,7 @@ import { applyBabylonDefaultOutline } from '@fps-games/babylon-renderer';
 import { applyArtistMaterialProfileToRuntimeMaterial } from './material-property-adapter.js';
 import { pickBabylonProjectionNodeIdAt, resolveBabylonPickSelectionNodeId, resolveBabylonProjectionNodeId, } from './projection-pick-resolver.js';
 import { normalizeProjectionOwnerNodePath, readProjectionSourceNodeSegment, } from './projection-source-owner-path.js';
+import { createMaterialSlotOwnerPathMatchKey, isMaterialSlotOwnerPathMatch, } from './material-slot-source-resolver.js';
 const LARGE_SELECTION_EDGE_LIMIT = 200;
 const PROJECTION_LOCAL_MATRIX_METADATA_KEY = 'editorLocalTransformMatrix';
 const ASSET_MESH_SELECTION_SEPARATOR = '::assetMesh::';
@@ -124,6 +125,7 @@ export function createBabylonEditorProjection(options) {
     const disposeProjectedNode = (projection) => {
         projection.selectionEdgesPrewarmCancel?.();
         projection.selectionEdgesPrewarmCancel = null;
+        projection.importStructure = null;
         for (const animationGroup of projection.animationGroups) {
             animationGroup.dispose?.();
         }
@@ -262,6 +264,9 @@ export function createBabylonEditorProjection(options) {
             }
             return transforms;
         },
+        readNodeImportStructure(nodeId) {
+            return cloneProjectionImportStructureSnapshot(projections.get(nodeId)?.importStructure ?? null);
+        },
         setNodeTransformPreview(nodeId, transform) {
             const projection = projections.get(nodeId);
             if (!projection?.root)
@@ -581,12 +586,215 @@ function attachImportedProjectionResult(options, node, asset, projection, result
         }
         projection.animationGroups = result.animationGroups ?? [];
         projection.outlineMeshes = (result.meshes ?? []).filter((mesh) => mesh.getTotalVertices?.() > 0);
+        projection.importStructure = createProjectionImportStructureSnapshot(node, asset, modelRoot, result);
     }
     catch (error) {
         disposeImportedProjectionResult(result);
         throw error;
     }
 }
+function createProjectionImportStructureSnapshot(node, asset, modelRoot, result) {
+    const runtimeNodes = collectProjectionImportRuntimeNodes(modelRoot, result);
+    const nodeIdByRuntimeNode = new Map();
+    const materialIdByRuntimeMaterial = new Map();
+    const textureIdByRuntimeTexture = new Map();
+    const materialNodeIds = new Map();
+    const materialTextureIds = new Map();
+    const rootSnapshotId = 'root';
+    const snapshots = [{
+            id: rootSnapshotId,
+            parentId: null,
+            name: readProjectionRuntimeName(modelRoot, node.name ?? node.id),
+            kind: 'root',
+        }];
+    for (const runtimeNode of runtimeNodes) {
+        const snapshotId = createProjectionImportRuntimeNodeId(runtimeNode, nodeIdByRuntimeNode.size);
+        nodeIdByRuntimeNode.set(runtimeNode, snapshotId);
+    }
+    for (const runtimeNode of runtimeNodes) {
+        const snapshotId = nodeIdByRuntimeNode.get(runtimeNode);
+        if (!snapshotId)
+            continue;
+        const materialIds = readProjectionRuntimeNodeMaterials(runtimeNode)
+            .map(runtimeMaterial => getProjectionImportMaterialSnapshotId(runtimeMaterial, materialIdByRuntimeMaterial))
+            .filter((materialId) => !!materialId);
+        for (const materialId of materialIds) {
+            const nodeIds = materialNodeIds.get(materialId) ?? new Set();
+            nodeIds.add(snapshotId);
+            materialNodeIds.set(materialId, nodeIds);
+            const textureIds = readProjectionRuntimeMaterialTextures(readProjectionRuntimeNodeMaterialById(runtimeNode, runtimeNode, materialId, materialIdByRuntimeMaterial))
+                .map(runtimeTexture => getProjectionImportTextureSnapshotId(runtimeTexture, textureIdByRuntimeTexture))
+                .filter((textureId) => !!textureId);
+            const materialTextures = materialTextureIds.get(materialId) ?? new Set();
+            for (const textureId of textureIds)
+                materialTextures.add(textureId);
+            materialTextureIds.set(materialId, materialTextures);
+        }
+        snapshots.push({
+            id: snapshotId,
+            parentId: resolveProjectionImportRuntimeParentId(runtimeNode, modelRoot, nodeIdByRuntimeNode, rootSnapshotId),
+            name: readProjectionRuntimeName(runtimeNode, snapshotId),
+            kind: isProjectionRuntimeMeshLike(runtimeNode) ? 'mesh' : 'transform',
+            ...readProjectionRuntimeSourceName(runtimeNode),
+            ...readProjectionRuntimeOwnerNodePath(runtimeNode),
+            ...(materialIds.length > 0 ? { materialIds } : {}),
+        });
+    }
+    const materials = [...materialIdByRuntimeMaterial.entries()].map(([runtimeMaterial, id]) => ({
+        id,
+        name: readProjectionRuntimeName(runtimeMaterial, id),
+        ...readProjectionRuntimeKind(runtimeMaterial),
+        nodeIds: [...(materialNodeIds.get(id) ?? [])],
+        textureIds: [...(materialTextureIds.get(id) ?? [])],
+    }));
+    const textures = [...textureIdByRuntimeTexture.entries()].map(([runtimeTexture, id]) => ({
+        id,
+        name: readProjectionRuntimeName(runtimeTexture, id),
+        ...readProjectionRuntimeKind(runtimeTexture),
+        ...readProjectionRuntimeTextureUrl(runtimeTexture),
+    }));
+    const animations = createProjectionImportAnimationSnapshots(result.animationGroups ?? []);
+    return {
+        projectionNodeId: node.id,
+        ...(asset.id ? { assetId: asset.id } : {}),
+        ...(asset.sourceId ? { sourceId: asset.sourceId } : {}),
+        nodes: snapshots,
+        materials,
+        textures,
+        animations,
+    };
+}
+function collectProjectionImportRuntimeNodes(modelRoot, result) {
+    const known = new Set([
+        ...(result.transformNodes ?? []),
+        ...(result.meshes ?? []),
+    ].filter(Boolean));
+    const ordered = [];
+    const visit = (runtimeNode) => {
+        for (const child of readProjectionRuntimeChildren(runtimeNode)) {
+            if (!known.has(child) || ordered.includes(child))
+                continue;
+            ordered.push(child);
+            visit(child);
+        }
+    };
+    visit(modelRoot);
+    for (const runtimeNode of known) {
+        if (!ordered.includes(runtimeNode))
+            ordered.push(runtimeNode);
+    }
+    return ordered;
+}
+function readProjectionRuntimeChildren(runtimeNode) {
+    const children = runtimeNode?.getChildren?.();
+    return Array.isArray(children) ? children : [];
+}
+function createProjectionImportRuntimeNodeId(runtimeNode, index) {
+    const sourceName = readProjectionSourceNodeSegment(runtimeNode);
+    const rawName = sourceName || runtimeNode?.name || runtimeNode?.id || `node-${index + 1}`;
+    return `${isProjectionRuntimeMeshLike(runtimeNode) ? 'mesh' : 'node'}:${sanitizeProjectionImportSnapshotId(rawName)}:${index + 1}`;
+}
+function resolveProjectionImportRuntimeParentId(runtimeNode, modelRoot, nodeIdByRuntimeNode, rootSnapshotId) {
+    const parent = runtimeNode?.parent ?? null;
+    if (!parent || parent === modelRoot)
+        return rootSnapshotId;
+    return nodeIdByRuntimeNode.get(parent) ?? rootSnapshotId;
+}
+function isProjectionRuntimeMeshLike(runtimeNode) {
+    return typeof runtimeNode?.getTotalVertices === 'function';
+}
+function readProjectionRuntimeNodeMaterials(runtimeNode) {
+    const material = runtimeNode?.material;
+    if (!material)
+        return [];
+    const subMaterials = material.subMaterials;
+    if (Array.isArray(subMaterials) && subMaterials.length > 0) {
+        return subMaterials.filter(Boolean);
+    }
+    return [material];
+}
+function readProjectionRuntimeNodeMaterialById(runtimeNode, _fallbackNode, materialId, materialIdByRuntimeMaterial) {
+    for (const material of readProjectionRuntimeNodeMaterials(runtimeNode)) {
+        if (materialIdByRuntimeMaterial.get(material) === materialId)
+            return material;
+    }
+    return null;
+}
+function getProjectionImportMaterialSnapshotId(runtimeMaterial, materialIdByRuntimeMaterial) {
+    if (!runtimeMaterial)
+        return null;
+    const existing = materialIdByRuntimeMaterial.get(runtimeMaterial);
+    if (existing)
+        return existing;
+    const id = `material:${sanitizeProjectionImportSnapshotId(readProjectionRuntimeName(runtimeMaterial, 'material'))}:${materialIdByRuntimeMaterial.size + 1}`;
+    materialIdByRuntimeMaterial.set(runtimeMaterial, id);
+    return id;
+}
+function readProjectionRuntimeMaterialTextures(runtimeMaterial) {
+    if (!runtimeMaterial)
+        return [];
+    const textures = runtimeMaterial.getActiveTextures?.();
+    return Array.isArray(textures) ? textures.filter(Boolean) : [];
+}
+function getProjectionImportTextureSnapshotId(runtimeTexture, textureIdByRuntimeTexture) {
+    if (!runtimeTexture)
+        return null;
+    const existing = textureIdByRuntimeTexture.get(runtimeTexture);
+    if (existing)
+        return existing;
+    const name = readProjectionRuntimeTextureUrl(runtimeTexture).url
+        ?? readProjectionRuntimeName(runtimeTexture, 'texture');
+    const id = `texture:${sanitizeProjectionImportSnapshotId(name)}:${textureIdByRuntimeTexture.size + 1}`;
+    textureIdByRuntimeTexture.set(runtimeTexture, id);
+    return id;
+}
+function createProjectionImportAnimationSnapshots(animationGroups) {
+    return animationGroups.filter(Boolean).map((animationGroup, index) => ({
+        id: `animation:${sanitizeProjectionImportSnapshotId(readProjectionRuntimeName(animationGroup, 'animation'))}:${index + 1}`,
+        name: readProjectionRuntimeName(animationGroup, `Animation ${index + 1}`),
+    }));
+}
+function readProjectionRuntimeName(runtimeObject, fallback) {
+    const name = runtimeObject?.name ?? runtimeObject?.id;
+    return typeof name === 'string' && name.trim() ? name.trim() : fallback;
+}
+function readProjectionRuntimeKind(runtimeObject) {
+    const kind = runtimeObject?.getClassName?.();
+    return typeof kind === 'string' && kind.trim() ? { kind: kind.trim() } : {};
+}
+function readProjectionRuntimeTextureUrl(runtimeTexture) {
+    const url = runtimeTexture?.url ?? runtimeTexture?.name;
+    return typeof url === 'string' && url.trim() ? { url: url.trim() } : {};
+}
+function readProjectionRuntimeSourceName(runtimeNode) {
+    const sourceName = readProjectionSourceNodeSegment(runtimeNode);
+    return sourceName ? { sourceName } : {};
+}
+function readProjectionRuntimeOwnerNodePath(runtimeNode) {
+    const ownerNodePath = runtimeNode?.metadata?.editorProjection?.ownerNodePath;
+    return typeof ownerNodePath === 'string' && ownerNodePath.trim() ? { ownerNodePath: ownerNodePath.trim() } : {};
+}
+function sanitizeProjectionImportSnapshotId(value) {
+    return value.trim().toLowerCase().replace(/[^a-z0-9_.:-]+/gi, '-').replace(/^-+|-+$/g, '') || 'item';
+}
+function cloneProjectionImportStructureSnapshot(snapshot) {
+    if (!snapshot)
+        return null;
+    return {
+        ...snapshot,
+        nodes: snapshot.nodes.map(item => ({
+            ...item,
+            ...(item.materialIds ? { materialIds: [...item.materialIds] } : {}),
+        })),
+        materials: snapshot.materials.map(item => ({
+            ...item,
+            nodeIds: [...item.nodeIds],
+            textureIds: [...item.textureIds],
+        })),
+        textures: snapshot.textures.map(item => ({ ...item })),
+        animations: snapshot.animations.map(item => ({ ...item })),
+    };
+}
 function disposeImportedProjectionResult(result) {
     for (const animationGroup of result.animationGroups ?? []) {
         animationGroup.dispose?.();
@@ -655,6 +863,8 @@ function attachDirectionalLightProjection(babylon, scene, node, projection) {
         light.setEnabled?.(node.active !== false);
         projection.runtimeObjects.push(light);
     }
+    if (!settings.helperVisible)
+        return;
     const helper = MeshBuilder.CreateBox(`${node.id}.lightHelper`, {
         size: 0.28,
     }, scene);
@@ -760,9 +970,9 @@ function createPrimitiveProjectionMesh(babylon, scene, node, options) {
     return mesh;
 }
 function applyProjectionArtistMaterialProfilesToMeshes(options, node, modelRoot, meshes) {
-    const slotProfiles = node.artistMaterialSlotProfiles ?? {};
+    const slotBindings = createProjectionMaterialSlotBindings(node);
     const hasRootProfile = !!node.artistMaterialProfile;
-    const hasSlotProfiles = Object.keys(slotProfiles).length > 0;
+    const hasSlotProfiles = slotBindings.length > 0;
     if (!hasRootProfile && !hasSlotProfiles)
         return [];
     const clonedMaterials = [];
@@ -785,15 +995,15 @@ function applyProjectionArtistMaterialProfilesToMeshes(options, node, modelRoot,
         if (!material)
             continue;
         const ownerNodePath = buildProjectionOwnerNodePath(mesh, modelRoot, node.id);
-        const slotProfile = resolveProjectionSlotProfile(slotProfiles, ownerNodePath, node.id);
-        if (!slotProfile)
+        const slotBinding = resolveProjectionSlotBinding(slotBindings, ownerNodePath, node.id);
+        if (!slotBinding)
             continue;
         const slotMaterial = detachProjectionSlotMaterial(mesh, materialCounts, ownerNodePath);
         if (!slotMaterial)
             continue;
         if (slotMaterial !== material)
             clonedMaterials.push(slotMaterial);
-        applyProjectionArtistMaterialProfile(options, slotMaterial, slotProfile);
+        applyProjectionArtistMaterialProfile(options, slotMaterial, slotBinding.profile);
     }
     return clonedMaterials;
 }
@@ -805,27 +1015,85 @@ function applyProjectionArtistMaterialProfile(options, material, profile) {
         resolveTextureUrl: options.resolveTextureUrl,
     });
 }
-function resolveProjectionSlotProfile(slotProfiles, ownerNodePath, projectionNodeId) {
+function createProjectionMaterialSlotBindings(node) {
+    const bindings = [];
+    const occupiedOwnerPaths = new Set();
+    for (const binding of node.artistMaterialSlotBindings ?? []) {
+        const profile = binding?.profile;
+        const slot = createProjectionMaterialSlotDescriptor(binding?.slot, node.id);
+        if (!profile || !slot)
+            continue;
+        bindings.push({ slot, profile });
+        occupiedOwnerPaths.add(slot.matchKey);
+    }
+    for (const [ownerNodePath, profile] of Object.entries(node.artistMaterialSlotProfiles ?? {})) {
+        const slot = createProjectionMaterialSlotDescriptor({ ownerNodePath }, node.id);
+        if (!profile || !slot || occupiedOwnerPaths.has(slot.matchKey))
+            continue;
+        bindings.push({ slot, profile });
+        occupiedOwnerPaths.add(slot.matchKey);
+    }
+    return bindings;
+}
+function createProjectionMaterialSlotDescriptor(value, projectionNodeId) {
+    if (!value || typeof value !== 'object')
+        return null;
+    const ownerNodePath = typeof value.ownerNodePath === 'string'
+        ? normalizeProjectionOwnerNodePath(value.ownerNodePath, { projectionNodeId })
+        : '';
+    if (!ownerNodePath)
+        return null;
+    const slotId = typeof value.slotId === 'string' && value.slotId.trim() ? value.slotId.trim() : '';
+    const label = typeof value.label === 'string' && value.label.trim() ? value.label.trim() : '';
+    const nodeIndex = Number.isInteger(value.nodeIndex) ? value.nodeIndex : undefined;
+    const nodeIndexPath = Array.isArray(value.nodeIndexPath)
+        ? value.nodeIndexPath.filter((item) => Number.isInteger(item))
+        : undefined;
+    const meshIndex = Number.isInteger(value.meshIndex) ? value.meshIndex : undefined;
+    const primitiveIndex = Number.isInteger(value.primitiveIndex) ? value.primitiveIndex : undefined;
+    const sourceMaterialIndex = Number.isInteger(value.sourceMaterialIndex) ? value.sourceMaterialIndex : undefined;
+    const sourceMaterialIndices = Array.isArray(value.sourceMaterialIndices)
+        ? value.sourceMaterialIndices.filter((item) => Number.isInteger(item))
+        : undefined;
+    const materialName = typeof value.materialName === 'string' && value.materialName.trim() ? value.materialName.trim() : '';
+    const materialNames = Array.isArray(value.materialNames)
+        ? value.materialNames.filter((item) => typeof item === 'string' && !!item.trim()).map(item => item.trim())
+        : undefined;
+    return {
+        ...(slotId ? { slotId } : {}),
+        ownerNodePath,
+        ...(label ? { label } : {}),
+        ...(nodeIndex != null ? { nodeIndex } : {}),
+        ...(nodeIndexPath && nodeIndexPath.length > 0 ? { nodeIndexPath } : {}),
+        ...(meshIndex != null ? { meshIndex } : {}),
+        ...(primitiveIndex != null ? { primitiveIndex } : {}),
+        ...(sourceMaterialIndex != null ? { sourceMaterialIndex } : {}),
+        ...(sourceMaterialIndices && sourceMaterialIndices.length > 0
+            ? { sourceMaterialIndices }
+            : {}),
+        ...(materialName ? { materialName } : {}),
+        ...(materialNames && materialNames.length > 0 ? { materialNames } : {}),
+        key: slotId || ownerNodePath,
+        normalizedOwnerNodePath: ownerNodePath,
+        matchKey: createMaterialSlotOwnerPathMatchKey(ownerNodePath, { projectionNodeId }),
+    };
+}
+function resolveProjectionSlotBinding(slotBindings, ownerNodePath, projectionNodeId) {
     if (ownerNodePath == null)
         return null;
-    const direct = slotProfiles[ownerNodePath];
-    if (direct)
-        return direct;
     const normalized = normalizeProjectionOwnerNodePath(ownerNodePath, { projectionNodeId });
-    if (normalized !== ownerNodePath && slotProfiles[normalized])
-        return slotProfiles[normalized];
+    const normalizedMatchKey = createMaterialSlotOwnerPathMatchKey(normalized, { projectionNodeId });
     let descendantMatch = null;
-    for (const [candidatePath, profile] of Object.entries(slotProfiles)) {
-        const normalizedCandidate = normalizeProjectionOwnerNodePath(candidatePath, { projectionNodeId });
-        if (normalizedCandidate === normalized)
-            return profile;
-        if (isProjectionOwnerPathDescendant(normalized, normalizedCandidate)) {
-            if (!descendantMatch || normalizedCandidate.length > descendantMatch.path.length) {
-                descendantMatch = { path: normalizedCandidate, profile };
+    for (const binding of slotBindings) {
+        if (binding.slot.matchKey === normalizedMatchKey)
+            return binding;
+        if (isMaterialSlotOwnerPathMatch(normalized, binding.slot.normalizedOwnerNodePath, { projectionNodeId })) {
+            if (!descendantMatch || binding.slot.matchKey.length > descendantMatch.slot.matchKey.length) {
+                descendantMatch = binding;
             }
         }
     }
-    return descendantMatch?.profile ?? null;
+    return descendantMatch;
 }
 function buildProjectionOwnerNodePath(node, rootNode, projectionNodeId) {
     if (!node || !rootNode || node === rootNode)
@@ -857,11 +1125,6 @@ function stableProjectionNodeSegment(node) {
     }
     return null;
 }
-function isProjectionOwnerPathDescendant(ownerNodePath, candidateAncestorPath) {
-    if (!ownerNodePath || !candidateAncestorPath)
-        return false;
-    return ownerNodePath.startsWith(`${candidateAncestorPath}/`);
-}
 function createAssetMeshProjectionNodeId(rootNodeId, ownerNodePath) {
     return `${rootNodeId}${ASSET_MESH_SELECTION_SEPARATOR}${encodeURIComponent(ownerNodePath)}`;
 }
@@ -869,9 +1132,9 @@ function resolveProjectionAssetMeshSelectionKey(asset, ownerNodePath, projection
     const normalizedOwnerPath = normalizeProjectionOwnerNodePath(ownerNodePath, { projectionNodeId });
     let bestSlot = null;
     for (const slot of readProjectionAssetMaterialSlots(asset, projectionNodeId)) {
-        if (!isProjectionOwnerPathSlotMatch(normalizedOwnerPath, slot.path))
+        if (!isMaterialSlotOwnerPathMatch(normalizedOwnerPath, slot.normalizedOwnerNodePath, { projectionNodeId }))
             continue;
-        if (!bestSlot || slot.path.length > bestSlot.path.length) {
+        if (!bestSlot || slot.matchKey.length > bestSlot.matchKey.length) {
             bestSlot = slot;
         }
     }
@@ -891,8 +1154,7 @@ function readProjectionAssetMaterialSlots(asset, projectionNodeId) {
 }
 function readProjectionAssetMaterialSlot(value, projectionNodeId) {
     if (typeof value === 'string') {
-        const path = normalizeProjectionOwnerNodePath(value, { projectionNodeId });
-        return path ? { key: path, path } : null;
+        return createProjectionMaterialSlotDescriptor({ ownerNodePath: value }, projectionNodeId);
     }
     if (!value || typeof value !== 'object' || Array.isArray(value))
         return null;
@@ -900,23 +1162,11 @@ function readProjectionAssetMaterialSlot(value, projectionNodeId) {
     const rawOwnerPath = readProjectionAssetMaterialSlotString(record.ownerNodePath)
         || readProjectionAssetMaterialSlotString(record.path)
         || readProjectionAssetMaterialSlotString(record.name);
-    const path = normalizeProjectionOwnerNodePath(rawOwnerPath, { projectionNodeId });
-    if (!path)
-        return null;
-    const slotId = readProjectionAssetMaterialSlotString(record.slotId);
-    return {
-        key: slotId || path,
-        path,
-    };
+    return createProjectionMaterialSlotDescriptor({ ...record, ownerNodePath: rawOwnerPath }, projectionNodeId);
 }
 function readProjectionAssetMaterialSlotString(value) {
     return typeof value === 'string' ? value.trim() : '';
 }
-function isProjectionOwnerPathSlotMatch(ownerNodePath, slotOwnerPath) {
-    if (!ownerNodePath || !slotOwnerPath)
-        return false;
-    return ownerNodePath === slotOwnerPath || isProjectionOwnerPathDescendant(ownerNodePath, slotOwnerPath);
-}
 function countProjectionMeshMaterials(meshes) {
     const counts = new Map();
     for (const mesh of meshes) {
@@ -1112,6 +1362,8 @@ function attachHemisphericLightProjection(babylon, scene, node, projection) {
         light.setEnabled?.(node.active !== false);
         projection.runtimeObjects.push(light);
     }
+    if (!settings.helperVisible)
+        return;
     const helper = MeshBuilder.CreateSphere?.(`${node.id}.hemisphericLightHelper`, {
         diameter: 0.32,
         segments: 18,
@@ -1258,6 +1510,7 @@ function readProjectionDirectionalLightSettings(settings) {
         intensity: Math.max(0, readFiniteNumber(settings?.intensity, 2)),
         direction: readVector3(settings?.direction, { x: -0.3, y: -1, z: -0.2 }),
         diffuseColor: readProjectionColor(settings?.diffuseColor, { r: 1, g: 1, b: 1 }),
+        helperVisible: settings?.helperVisible !== false,
     };
 }
 function readProjectionHemisphericLightSettings(settings) {
@@ -1266,6 +1519,7 @@ function readProjectionHemisphericLightSettings(settings) {
         intensity: Math.max(0, readFiniteNumber(settings?.intensity, 0.8)),
         diffuseColor: readProjectionColor(settings?.diffuseColor, { r: 1, g: 1, b: 1 }),
         groundColor: readProjectionColor(settings?.groundColor, { r: 0.48, g: 0.52, b: 0.62 }),
+        helperVisible: settings?.helperVisible !== false,
     };
 }
 function readProjectionColor(value, fallback) {