abstract-3d 3.1.2 → 4.0.0-beta.2

package/lib/renderers/react/react.d.ts

@@ -1,47 +1,21 @@
-import { type OrbitControlsProps } from "@react-three/drei";
-import { type CanvasProps, type ThreeEvent } from "@react-three/fiber";
 import React from "react";
-import type { Scene, View, Group, Relation } from "../../abstract-3d.js";
-import type { ControlsHelper, Camera, BufferZones } from "./react-camera.js";
-import type { MaterialState } from "./react-material.js";
-import type { ReactPopover } from "./react-types.js";
-type ReactProps = {
+import type { Scene } from "../../abstract-3d.js";
+import type { ControlsHelper, Popover, ViewerOptions } from "../three/index.js";
+/**
+ * The three.js viewer as a React component: it creates and disposes the viewer, passes each group of props when they change, and portals popovers,
+ * tooltips and the fallback. The viewer's overlays carry ids, and their content is looked up in this render's props, so new content doesn't loop back
+ * through the viewer
+ */
+export type ReactPopover = Popover<React.ReactNode>;
+export type ViewerProps = Omit<ViewerOptions<React.ReactNode>, "hoveredIds" | "onOverlays" | "onLoad" | "gizmo"> & {
     readonly scene: Scene | undefined;
-    readonly selectedIds: Record<string, boolean> | undefined;
-    /**
-     * The ids of the relations whose shape is drawn to be clicked, e.g. where a component can be inserted. While defined, even when empty, only the
-     * groups whose material state is Accept can be clicked
-     */
-    readonly activeRelations?: ReadonlyArray<string> | undefined;
-    readonly activeComponents?: Record<string, MaterialState> | undefined;
-    readonly hoveredIdsExternal?: ReadonlyArray<string> | undefined;
-    readonly showDimensions?: boolean;
-    readonly popovers?: ReadonlyArray<ReactPopover>;
-    readonly useAnimations?: boolean;
-    readonly camera?: Camera;
-    readonly view?: View;
-    readonly useAlphaTest?: boolean;
+    readonly hoveredIdsExternal?: ReadonlyArray<string>;
+    /** A viewcube or axes gizmo */
     readonly controlsHelper?: ControlsHelper;
-    readonly canvasProps?: Omit<CanvasProps & React.RefAttributes<HTMLCanvasElement>, "children">;
-    readonly orbitContolsProps?: OrbitControlsProps & React.RefAttributes<unknown>;
-    readonly materialStateImages?: Record<string, string>;
-    readonly sceneFallback?: React.JSX.Element;
-    /**
-     * The scene's lights, rendered in the canvas instead of the default ambient and directional lights, e.g. an environment map for reflections and a
-     * key light. A constant element, as a new one each render re-renders the whole scene
-     */
-    readonly lights?: React.JSX.Element;
-    readonly useOldMode?: boolean;
-    readonly bufferZones?: BufferZones;
-    readonly fitPadding?: number;
-    readonly onClickGroup?: (id: string | undefined, rootData: Record<string, string> | undefined, data: Record<string, string> | undefined, e: ThreeEvent<MouseEvent>) => void;
-    readonly onHoverGroup?: (id: string | undefined, rootData: Record<string, string> | undefined, data: Record<string, string> | undefined, e: ThreeEvent<MouseEvent>) => void;
-    readonly onContextMenuGroup?: (id: string, rootData: Record<string, string> | undefined, data: Record<string, string> | undefined, left: number, top: number, e: ThreeEvent<MouseEvent>) => void;
-    readonly getTooltips?: (id: string) => ReadonlyArray<ReactPopover>;
-    readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
-    readonly createGroupKey?: (g: Group, idx: number, rootData: Record<string, string> | undefined, id: string) => string;
-    readonly createGroupId?: (g: Group) => string;
+    /** Shown while loading, and while there's no scene */
+    readonly sceneFallback?: React.ReactNode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
 };
-export declare const render: React.MemoExoticComponent<({ scene, selectedIds, useOldMode, activeRelations, activeComponents, hoveredIdsExternal, popovers: reactPopovers, showDimensions, useAnimations, camera, view, controlsHelper, canvasProps, orbitContolsProps, materialStateImages, sceneFallback, lights, useAlphaTest, onClickGroup, onHoverGroup, onContextMenuGroup, getTooltips, onClickRelation, createGroupKey, createGroupId, bufferZones, fitPadding, }: ReactProps) => React.JSX.Element>;
-export {};
+export declare function Viewer(props: ViewerProps): React.JSX.Element;
 //# sourceMappingURL=react.d.ts.map

package/lib/renderers/react/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/renderers/react/react.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/renderers/react/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAkB,OAAO,EAAyB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvH;;;;GAIG;AAEH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACjH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpD,+BAA+B;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,sDAAsD;IACtD,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmE5D"}

package/lib/renderers/react/react.js

@@ -1,33 +1,51 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Html } from "@react-three/drei";
-import { Canvas } from "@react-three/fiber";
-import { EffectComposer, N8AO } from "@react-three/postprocessing";
-import React, { memo, useMemo } from "react";
-import { ReactCamera } from "./react-camera.js";
-import { ReactScene } from "./react-scene.js";
-export const render = memo(({ scene, selectedIds, useOldMode, activeRelations, activeComponents, hoveredIdsExternal, popovers: reactPopovers, showDimensions = true, useAnimations = false, camera = { type: "Perspective" }, view = "front", controlsHelper, canvasProps, orbitContolsProps, materialStateImages, sceneFallback, lights, useAlphaTest = true, onClickGroup, onHoverGroup, onContextMenuGroup, getTooltips, onClickRelation, createGroupKey, createGroupId, bufferZones, fitPadding, }) => {
-    const intensity = useOldMode ? 2 : 0.4;
-    const suspenseFallback = useMemo(() => _jsx(Html, { center: true, children: sceneFallback ?? _jsx(_Fragment, {}) }), [sceneFallback]);
-    return scene ? (_jsx(Canvas, { dpr: [1, window.devicePixelRatio], frameloop: "demand", ...canvasProps, children: _jsxs(React.Suspense, { fallback: suspenseFallback, children: [_jsx(ReactCamera, { bufferZones: bufferZones, fitPadding: fitPadding, scene: scene, useAnimations: useAnimations, camera: camera, view: view, controlsHelper: controlsHelper, orbitContolsProps: orbitContolsProps }), lights ?? (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 3.5 }), _jsx("directionalLight", { position: [
-                                -(scene.center_deprecated?.x ?? 0) - 1.5 * scene.size_deprecated.x,
-                                -(scene.center_deprecated?.y ?? 0) + 1.5 * scene.size_deprecated.y,
-                                -(scene.center_deprecated?.z ?? 0),
-                            ], intensity: intensity }), _jsx("directionalLight", { position: [
-                                -(scene.center_deprecated?.x ?? 0),
-                                -(scene.center_deprecated?.y ?? 0) + 1 * scene.size_deprecated.y,
-                                -(scene.center_deprecated?.z ?? 0) + 1.5 * scene.size_deprecated.z,
-                            ], intensity: intensity }), _jsx("directionalLight", { position: [
-                                -(scene.center_deprecated?.x ?? 0) + 2 * scene.size_deprecated.x,
-                                -(scene.center_deprecated?.y ?? 0),
-                                -(scene.center_deprecated?.z ?? 0) + 1.5 * scene.size_deprecated.z,
-                            ], intensity: intensity }), _jsx("directionalLight", { position: [
-                                -(scene.center_deprecated?.x ?? 0) - 1.5 * scene.size_deprecated.x,
-                                -(scene.center_deprecated?.y ?? 0),
-                                -(scene.center_deprecated?.z ?? 0),
-                            ], intensity: 0.4 }), _jsx("directionalLight", { position: [
-                                -(scene.center_deprecated?.x ?? 0) + 1.5 * scene.size_deprecated.x,
-                                -(scene.center_deprecated?.y ?? 0),
-                                -(scene.center_deprecated?.z ?? 0),
-                            ], intensity: 0.4 })] })), _jsx(ReactScene, { scene: scene, selectedIds: selectedIds, activeRelations: activeRelations, activeComponents: activeComponents, showDimensions: showDimensions, hoveredIdsExternal: hoveredIdsExternal, reactPopovers: reactPopovers, materialStateImages: materialStateImages, onClickGroup: onClickGroup, onHoverGroup: onHoverGroup, onContextMenuGroup: onContextMenuGroup, getTooltips: getTooltips, onClickRelation: onClickRelation, createGroupKey: createGroupKey, createGroupId: createGroupId, useAlphaTest: useAlphaTest }), !useOldMode && (_jsx(EffectComposer, { multisampling: 8, children: _jsx(N8AO, { aoRadius: 40, denoiseSamples: 4, distanceFalloff: 0.2, intensity: 2, screenSpaceRadius: true, halfRes: true }) }))] }) })) : ((sceneFallback ?? _jsx(_Fragment, {})));
-});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { createViewer, disposeViewer, updateViewer } from "../three/index.js";
+export function Viewer(props) {
+    const { scene, createGroupId, useAlphaTest, selectedIds, hoveredIdsExternal, onClickGroup, view, bufferZones, fitPadding, controls } = props;
+    const { lights, environment, environmentIntensity, groundShadow, quality, showDimensions, popovers, getTooltips } = props;
+    const { onHoverGroup, onContextMenuGroup, onClickRelation, onPointerMissed, sceneFallback, className, style } = props;
+    // Equal by value, so inline objects don't refit the camera, recreate the gizmo or rebuild the scene
+    const camera = useStableValue(props.camera);
+    const gizmo = useStableValue(props.controlsHelper);
+    const activeComponents = useStableValue(props.activeComponents);
+    const activeRelations = useStableValue(props.activeRelations);
+    const materialStateImages = useStableValue(props.materialStateImages);
+    const container = useRef(null);
+    const viewer = useRef(undefined);
+    const [overlays, setOverlays] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+    useLayoutEffect(() => {
+        viewer.current = createViewer(container.current, { onOverlays: setOverlays, onLoad: () => setLoaded(true) });
+        return () => disposeViewer(viewer.current);
+    }, []);
+    useEffect(() => updateViewer(viewer.current, { scene, createGroupId }), [scene, createGroupId]);
+    useEffect(() => updateViewer(viewer.current, { activeComponents, activeRelations, useAlphaTest, materialStateImages }), [activeComponents, activeRelations, useAlphaTest, materialStateImages]);
+    useEffect(() => updateViewer(viewer.current, { selectedIds, hoveredIds: hoveredIdsExternal, onClickGroup }), [selectedIds, hoveredIdsExternal, onClickGroup]);
+    useEffect(() => updateViewer(viewer.current, { view, bufferZones, fitPadding, camera }), [view, bufferZones, fitPadding, camera]);
+    useEffect(() => updateViewer(viewer.current, { controls }), [controls]);
+    useEffect(() => updateViewer(viewer.current, { gizmo }), [gizmo]);
+    useEffect(() => updateViewer(viewer.current, { lights, environment, environmentIntensity }), [lights, environment, environmentIntensity]);
+    useEffect(() => updateViewer(viewer.current, { quality }), [quality]);
+    useEffect(() => updateViewer(viewer.current, { showDimensions }), [showDimensions]);
+    useEffect(() => updateViewer(viewer.current, { groundShadow }), [groundShadow]);
+    useEffect(() => updateViewer(viewer.current, {
+        popovers: popovers?.map((p) => ({ ...p, content: p.id })),
+        getTooltips: getTooltips && ((id) => getTooltips(id).map((t) => ({ ...t, content: id }))),
+    }), [popovers, getTooltips]);
+    useEffect(() => updateViewer(viewer.current, { onHoverGroup, onContextMenuGroup, onClickRelation, onPointerMissed }), [onHoverGroup, onContextMenuGroup, onClickRelation, onPointerMissed]);
+    return (_jsxs("div", { ref: container, className: className, style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style }, children: [overlays.map((o) => createPortal(o.key.startsWith("popover:")
+                ? popovers?.find((p) => p.id === o.content)?.content
+                : getTooltips?.(o.content).find((t) => `tooltip:${t.id}` === o.key)?.content, o.element, o.key)), (!scene || !loaded) && sceneFallback !== undefined && (_jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }, children: sceneFallback }))] }));
+}
+/** The previous value while the new one is equal by value */
+function useStableValue(value) {
+    const [stable, setStable] = useState(value);
+    const changed = JSON.stringify(value) !== JSON.stringify(stable);
+    if (changed) {
+        setStable(value);
+    }
+    return changed ? value : stable;
+}
 //# sourceMappingURL=react.js.map

package/lib/renderers/react/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/renderers/react/react.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/renderers/react/react.tsx"],"names":[],"mappings":"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"}

package/lib/renderers/three/appearance/appearance.d.ts

@@ -0,0 +1,41 @@
+import { type Vector4 } from "three";
+import type { Item, Target } from "../compile/compile.js";
+/** Material classes and per-instance colors of items, by the viewer's state, as the r3f renderer's materials */
+export type MaterialState = "Accept" | "Error" | "Warning";
+export declare const ERROR_IMG_KEY = "error";
+/** The state that decides material classes, so changing it rebuilds the scene */
+export type StructureState = {
+    readonly activeComponents?: Record<string, MaterialState>;
+    /** Relations are active, e.g. to pick one to insert a component on, so only the groups whose material state is Accept can be clicked */
+    readonly relationsActive: boolean;
+};
+/** A target's material state, and whether it's disabled: faded and not clickable while relations are active */
+export type TargetState = {
+    readonly materialState?: MaterialState;
+    readonly disabled: boolean;
+};
+/** The state that only changes colors */
+export type PaintState = StructureState & {
+    readonly selectedIds?: Record<string, boolean>;
+    readonly hoveredIds?: ReadonlySet<string>;
+    /** The target under the pointer */
+    readonly hoveredTarget?: number;
+    readonly dimensionsClickable: boolean;
+};
+/** Items of one material class share a material, and are drawn in one batch */
+export type MaterialClass = {
+    readonly lit: boolean;
+    readonly metalness: number;
+    readonly roughness: number;
+    readonly side: "front" | "back" | "double";
+    readonly transparent: boolean;
+};
+/** Bit flags of how a target is highlighted, so only targets whose highlight changed need a repaint */
+export declare const HOVERED = 1;
+export declare const SELECTED = 2;
+export declare function getTargetStates(targets: ReadonlyArray<Target>, structure: StructureState): ReadonlyArray<TargetState>;
+export declare function getMaterialClass(item: Item, { materialState, disabled }: TargetState): MaterialClass;
+export declare function getHighlight(target: Target, targetIndex: number, state: PaintState): number;
+/** The item's linear color and opacity by its target's highlight, written to `out`; hovered colors are darkened */
+export declare function getItemColor(item: Item, { materialState, disabled }: TargetState, highlight: number, out: Vector4): Vector4;
+//# sourceMappingURL=appearance.d.ts.map

package/lib/renderers/three/appearance/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../../src/renderers/three/appearance/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE1D,gHAAgH;AAEhH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC3D,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,iFAAiF;AACjF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1D,wIAAwI;IACxI,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,+GAA+G;AAC/G,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjG,yCAAyC;AACzC,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C,mCAAmC;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,uGAAuG;AACvG,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,QAAQ,IAAI,CAAC;AAc1B,wBAAgB,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,cAAc,GAAG,aAAa,CAAC,WAAW,CAAC,CAKrH;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,aAAa,CAoBpG;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAc3F;AAED,mHAAmH;AACnH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAyB3H"}

package/lib/renderers/three/appearance/appearance.js

@@ -0,0 +1,92 @@
+import { Color } from "three";
+import { shade } from "../../../utils.js";
+export const ERROR_IMG_KEY = "error";
+/** Bit flags of how a target is highlighted, so only targets whose highlight changed need a repaint */
+export const HOVERED = 1;
+export const SELECTED = 2;
+const disabledOpacity = 0.125;
+const selectColor = "rgb(14,82,184)";
+const textSelectColor = "rgb(0, 26, 65)";
+/** Of the inverted hull around a relation's boxes */
+const outlineColor = "rgb(0, 0, 0)";
+const stateMaterials = {
+    Accept: { normal: "rgb(0,148,91)", metalness: 0.5, roughness: 0.5 },
+    Error: { normal: "#b82f3a", metalness: 0.5, roughness: 0.5 },
+    Warning: { normal: "rgb(240, 197, 48)", metalness: 0.5, roughness: 0.5 },
+};
+const unlit = { lit: false, metalness: 0, roughness: 1, transparent: false };
+export function getTargetStates(targets, structure) {
+    return targets.map((target) => {
+        const materialState = target.kind === "group" ? structure.activeComponents?.[target.id] : undefined;
+        return { materialState, disabled: target.kind === "group" && structure.relationsActive && materialState !== "Accept" };
+    });
+}
+export function getMaterialClass(item, { materialState, disabled }) {
+    const { material } = item.mesh;
+    switch (item.style) {
+        case "relation":
+            return { ...unlit, side: "double" };
+        case "outline":
+            return { ...unlit, side: "back" };
+        case "dimension":
+            return { ...unlit, side: "front", transparent: (material.opacity ?? 1) < 1 };
+        default: {
+            const mat = materialState ? stateMaterials[materialState] : material;
+            return {
+                lit: item.role === "solid",
+                metalness: mat.metalness ?? 0,
+                roughness: mat.roughness ?? 1,
+                side: item.role === "text" || material.backfaceCulling ? "front" : "double",
+                transparent: (material.opacity ?? 1) < 1 || disabled,
+            };
+        }
+    }
+}
+export function getHighlight(target, targetIndex, state) {
+    const hoveredByPointer = state.hoveredTarget === targetIndex;
+    switch (target.kind) {
+        case "relation":
+            return hoveredByPointer ? HOVERED : 0;
+        case "dimension":
+            return state.dimensionsClickable && !state.relationsActive && target.id !== undefined && (hoveredByPointer || !!state.selectedIds?.[target.id])
+                ? SELECTED
+                : 0;
+        default:
+            return ((hoveredByPointer || (target.id !== "" && !!state.hoveredIds?.has(target.id)) ? HOVERED : 0) + (state.selectedIds?.[target.id] ? SELECTED : 0));
+    }
+}
+/** The item's linear color and opacity by its target's highlight, written to `out`; hovered colors are darkened */
+export function getItemColor(item, { materialState, disabled }, highlight, out) {
+    const { material } = item.mesh;
+    const hovered = highlight % SELECTED === HOVERED;
+    const selected = highlight >= SELECTED;
+    const opacity = material.opacity ?? 1;
+    switch (item.style) {
+        case "relation":
+            return setColor(out, material.normal, hovered, 1);
+        case "outline":
+            return setColor(out, outlineColor, false, 1);
+        case "dimension":
+            return setColor(out, selected ? selectColor : material.normal, false, opacity);
+        default: {
+            const style = selected
+                ? item.role === "text"
+                    ? textSelectColor
+                    : selectColor
+                : materialState && item.role !== "image"
+                    ? stateMaterials[materialState].normal
+                    : material.normal;
+            return item.role === "line"
+                ? setColor(out, material.normal, false, 1)
+                : setColor(out, style, hovered, item.role === "solid" && disabled ? opacity * disabledOpacity : opacity);
+        }
+    }
+}
+const colors = new Map();
+function setColor(out, style, hovered, opacity) {
+    const key = hovered ? `hovered ${style}` : style;
+    const color = colors.get(key) ?? new Color(hovered ? (shade(-0.4, style) ?? style) : style);
+    colors.set(key, color);
+    return out.set(color.r, color.g, color.b, opacity);
+}
+//# sourceMappingURL=appearance.js.map

package/lib/renderers/three/appearance/appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/renderers/three/appearance/appearance.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/appearance/appearance.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=appearance.test.d.ts.map

package/lib/renderers/three/appearance/appearance.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.test.d.ts","sourceRoot":"","sources":["../../../../src/renderers/three/appearance/appearance.test.ts"],"names":[],"mappings":""}

package/lib/renderers/three/appearance/appearance.test.js

@@ -0,0 +1,97 @@
+import { Color, Vector4 } from "three";
+import { describe, expect, it } from "vitest";
+import { box, line, text, vec3, vec3Zero } from "../../../abstract-3d.js";
+import { shade } from "../../../utils.js";
+import { getHighlight, getItemColor, getMaterialClass, getTargetStates, HOVERED, SELECTED } from "./appearance.js";
+const red = "rgb(255, 0, 0)";
+const select = "rgb(14,82,184)";
+const item = (mesh, style = "group", role = "solid") => ({
+    mesh,
+    role,
+    style,
+    matrix: undefined,
+    target: 0,
+    data: undefined,
+    animation: undefined,
+});
+const solid = (material, style = "group") => item(box(vec3(1, 1, 1), material), style);
+const group = { kind: "group", id: "fan", root: 0, rootData: undefined };
+const relation = { kind: "relation", relation: { id: "r", pos: vec3Zero } };
+const idle = { relationsActive: false, dimensionsClickable: true };
+const round = (v) => Math.round(v * 1e4) / 1e4;
+const rgba = (color, alpha = 1) => [...new Color(color).toArray(), alpha].map(round);
+const classify = (i, target, state = {}) => getMaterialClass(i, getTargetStates([target], { ...idle, ...state })[0]);
+const paint = (i, target, partial = {}) => {
+    const state = { ...idle, ...partial };
+    return getItemColor(i, getTargetStates([target], state)[0], getHighlight(target, 0, state), new Vector4())
+        .toArray()
+        .map(round);
+};
+describe("getMaterialClass", () => {
+    it("lights solids, with the material's metalness, roughness and side", () => {
+        expect(classify(solid({ normal: red, metalness: 0.3, roughness: 0.7 }), group)).toEqual({
+            lit: true,
+            metalness: 0.3,
+            roughness: 0.7,
+            side: "double",
+            transparent: false,
+        });
+        expect(classify(solid({ normal: red, backfaceCulling: true }), group)).toMatchObject({ side: "front", metalness: 0, roughness: 1 });
+    });
+    it("makes translucent materials and disabled groups transparent", () => {
+        expect(classify(solid({ normal: red, opacity: 0.5 }), group).transparent).toBe(true);
+        expect(classify(solid({ normal: red }), group, { relationsActive: true }).transparent).toBe(true);
+        expect(classify(solid({ normal: red }), group, { relationsActive: true, activeComponents: { fan: "Accept" } }).transparent).toBe(false);
+    });
+    it("uses the material state's metalness and roughness", () => {
+        expect(classify(solid({ normal: red }), group, { activeComponents: { fan: "Error" } })).toMatchObject({ metalness: 0.5, roughness: 0.5 });
+    });
+    it("draws relations unlit on both sides, and their outlines on the back", () => {
+        expect(classify(solid({ normal: red }, "relation"), relation)).toMatchObject({ lit: false, side: "double", transparent: false });
+        expect(classify(solid({ normal: red }, "outline"), relation)).toMatchObject({ lit: false, side: "back" });
+    });
+});
+describe("getHighlight", () => {
+    it("combines hover by the pointer or by id with selection", () => {
+        expect(getHighlight(group, 0, idle)).toBe(0);
+        expect(getHighlight(group, 0, { ...idle, hoveredTarget: 1 })).toBe(0);
+        expect(getHighlight(group, 0, { ...idle, hoveredTarget: 0, selectedIds: { fan: true } })).toBe(HOVERED + SELECTED);
+        expect(getHighlight(group, 0, { ...idle, hoveredIds: new Set(["fan"]) })).toBe(HOVERED);
+    });
+});
+describe("getItemColor", () => {
+    it("is the material's color and opacity", () => {
+        expect(paint(solid({ normal: red, opacity: 0.5 }), group)).toEqual(rgba(red, 0.5));
+    });
+    it("darkens hovered groups, by the pointer or by id, and colors selected ones", () => {
+        expect(paint(solid({ normal: red }), group, { hoveredTarget: 0 })).toEqual(rgba(shade(-0.4, red)));
+        expect(paint(solid({ normal: red }), group, { hoveredIds: new Set(["fan"]) })).toEqual(rgba(shade(-0.4, red)));
+        expect(paint(solid({ normal: red }), group, { selectedIds: { fan: true } })).toEqual(rgba(select));
+        expect(paint(solid({ normal: red }), group, { selectedIds: { fan: true }, hoveredTarget: 0 })).toEqual(rgba(shade(-0.4, select)));
+    });
+    it("ignores hover by id for groups without an id", () => {
+        expect(paint(solid({ normal: red }), { ...group, id: "" }, { hoveredIds: new Set([""]) })).toEqual(rgba(red));
+    });
+    it("colors groups by their material state and fades disabled ones", () => {
+        expect(paint(solid({ normal: red }), group, { activeComponents: { fan: "Accept" } })).toEqual(rgba("rgb(0,148,91)"));
+        expect(paint(solid({ normal: red, opacity: 0.8 }), group, { relationsActive: true })).toEqual(rgba(red, 0.1));
+    });
+    it("selects text in a dark blue", () => {
+        expect(paint(item(text(vec3Zero, "A", 1, { normal: red }), "group", "text"), group, { selectedIds: { fan: true } })).toEqual(rgba("rgb(0, 26, 65)"));
+    });
+    it("keeps lines in their material's color", () => {
+        expect(paint(item(line(vec3Zero, vec3(1, 0, 0), 1, { normal: red }), "group", "line"), group, { selectedIds: { fan: true } })).toEqual(rgba(red));
+    });
+    it("highlights clickable dimensions when hovered or selected", () => {
+        const dimension = { kind: "dimension", id: "fan" };
+        const d = solid({ normal: red }, "dimension");
+        expect(paint(d, dimension, { hoveredTarget: 0 })).toEqual(rgba(select));
+        expect(paint(d, dimension, { selectedIds: { fan: true } })).toEqual(rgba(select));
+        expect(paint(d, dimension, { selectedIds: { fan: true }, dimensionsClickable: false })).toEqual(rgba(red));
+        expect(paint(d, dimension, { selectedIds: { fan: true }, relationsActive: true })).toEqual(rgba(red));
+    });
+    it("darkens hovered relations", () => {
+        expect(paint(solid({ normal: red }, "relation"), relation, { hoveredTarget: 0 })).toEqual(rgba(shade(-0.4, red)));
+    });
+});
+//# sourceMappingURL=appearance.test.js.map

package/lib/renderers/three/appearance/appearance.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.test.js","sourceRoot":"","sources":["../../../../src/renderers/three/appearance/appearance.test.ts"],"names":[],"mappings":"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"}

package/lib/renderers/three/appearance.d.ts

@@ -0,0 +1,41 @@
+import { type Vector4 } from "three";
+import type { Material } from "../../abstract-3d.js";
+import type { Item, Target } from "./compile.js";
+/** Material classes and per-instance colors of items, by the viewer's state */
+export type MaterialState = "Accept" | "Error" | "Warning";
+export declare const ERROR_IMG_KEY = "error";
+/** The state that decides material classes, so changing it rebuilds the scene */
+export type StructureState = {
+    readonly activeComponents?: Record<string, MaterialState>;
+    /** Relations are active, e.g. to pick one to insert a component on, so only the groups whose material state is Accept can be clicked */
+    readonly relationsActive: boolean;
+};
+/** The state that only changes colors */
+export type PaintState = StructureState & {
+    readonly selectedIds?: Record<string, boolean>;
+    readonly hoveredIds?: ReadonlySet<string>;
+    /** The target under the pointer */
+    readonly hoveredTarget?: number;
+    readonly dimensionsClickable: boolean;
+};
+export type Side = "front" | "back" | "double";
+/** Items of one material class share a material, and are drawn in one batch */
+export type MaterialClass = {
+    readonly lit: boolean;
+    readonly metalness: number;
+    readonly roughness: number;
+    readonly side: Side;
+    readonly transparent: boolean;
+};
+export declare const selectMat: Material;
+export declare const getMaterialState: (target: Target, state: StructureState) => MaterialState | undefined;
+export declare const isDisabled: (target: Target, state: StructureState) => boolean;
+export declare function getMaterialClass(item: Item, target: Target, state: StructureState): MaterialClass;
+export declare const materialClassKey: (c: MaterialClass) => string;
+/** Bit flags of how a target is highlighted, so only targets whose highlight changed need a repaint */
+export declare const HOVERED = 1;
+export declare const SELECTED = 2;
+export declare function getHighlight(target: Target, targetIndex: number, state: PaintState): number;
+/** The item's linear color and opacity by its target's highlight, written to `out` */
+export declare function getItemColor(item: Item, target: Target, highlight: number, state: StructureState, out: Vector4): Vector4;
+//# sourceMappingURL=appearance.d.ts.map

package/lib/renderers/three/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../src/renderers/three/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjD,+EAA+E;AAE/E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC3D,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,iFAAiF;AACjF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1D,wIAAwI;IACxI,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;CACnC,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/C,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C,mCAAmC;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/C,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B,CAAC;AAMF,eAAO,MAAM,SAAS,EAAE,QAAqF,CAAC;AAI9G,eAAO,MAAM,gBAAgB,WAAY,MAAM,SAAS,cAAc,KAAG,aAAa,GAAG,SACd,CAAC;AAE5E,eAAO,MAAM,UAAU,WAAY,MAAM,SAAS,cAAc,KAAG,OAC+B,CAAC;AAEnG,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,GAAG,aAAa,CAqBjG;AAED,eAAO,MAAM,gBAAgB,MAAO,aAAa,KAAG,MAA6E,CAAC;AAElI,uGAAuG;AACvG,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAc3F;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAoBxH"}