matterviz 0.4.0 → 0.4.2

package/dist/convex-hull/canvas-interactions.svelte.js

@@ -0,0 +1,279 @@
+// Shared canvas-interaction scaffold (runes-in-closure factory) for ConvexHull3D/4D.
+import { set_fullscreen_bg, setup_fullscreen_effect } from '../layout';
+import * as helpers from './helpers';
+export function create_canvas_interactions(inputs) {
+    const [zoom_min, zoom_max] = inputs.wheel_clamp;
+    // Performance optimization: coalesce renders into one rAF
+    let frame_id = 0;
+    // Interaction state
+    let is_dragging = $state(false);
+    let drag_started = $state(false);
+    let last_mouse = $state({ x: 0, y: 0 });
+    let hover_data = $state.raw(null);
+    let copy_feedback = $state({ visible: false, position: { x: 0, y: 0 } });
+    // Drag and drop state
+    let drag_over = $state(false);
+    // Structure popup state
+    let modal_open = $state(false);
+    let selected_structure = $state(null);
+    let modal_place_right = $state(true);
+    // Keep selection, hover, and popup pointing at current plot entry objects
+    $effect(() => {
+        const current_selection = helpers.current_entry(inputs.selected_entry(), inputs.plot_entries());
+        if (inputs.selected_entry() && !current_selection)
+            inputs.set_selected_entry(null);
+        else if (current_selection &&
+            !helpers.same_entry(current_selection, inputs.selected_entry()))
+            inputs.set_selected_entry(current_selection);
+        const current_hover = helpers.current_entry(hover_data?.entry, inputs.plot_entries());
+        if (hover_data?.entry && !current_hover) {
+            hover_data = null;
+            inputs.on_point_hover()?.(null);
+        }
+        else if (hover_data && current_hover && current_hover !== hover_data.entry) {
+            hover_data = { ...hover_data, entry: current_hover };
+        }
+        if (modal_open) {
+            const structure = current_selection && inputs.extract_structure(current_selection);
+            if (structure)
+                selected_structure = structure;
+            else {
+                modal_open = false;
+                selected_structure = null;
+            }
+        }
+    });
+    // Shared selection logic for click and Enter key
+    function select_entry(entry) {
+        inputs.on_point_click()?.(entry);
+        if (inputs.enable_click_selection()) {
+            inputs.set_selected_entry(entry);
+            if (inputs.enable_structure_preview()) {
+                const structure = inputs.extract_structure(entry);
+                if (structure) {
+                    selected_structure = structure;
+                    modal_place_right = helpers.calculate_modal_side(inputs.wrapper());
+                    modal_open = true;
+                }
+            }
+        }
+    }
+    const handle_keydown = (event) => {
+        const target = event.target;
+        if (target instanceof HTMLElement && /INPUT|TEXTAREA/.test(target.tagName))
+            return;
+        // Stop canvas-originated keydown re-running on wrapper (both have onkeydown)
+        if (target === inputs.canvas())
+            event.stopPropagation();
+        if (event.key === `Escape` && modal_open) {
+            close_structure_popup();
+            return;
+        }
+        // Handle Enter for keyboard accessibility - select hovered entry
+        if (event.key === `Enter`) {
+            const entry = hover_data?.entry;
+            if (entry)
+                select_entry(entry);
+            else if (modal_open)
+                close_structure_popup();
+            return;
+        }
+        inputs.actions()[event.key.toLowerCase()]?.();
+    };
+    async function handle_file_drop(event) {
+        drag_over = false;
+        const data = await helpers.parse_hull_entries_from_drop(event);
+        if (data)
+            inputs.on_file_drop()?.(data);
+    }
+    const set_drag_over = (over) => (event) => {
+        event.preventDefault();
+        drag_over = over;
+    };
+    const handle_drag_over = set_drag_over(true);
+    const handle_drag_leave = set_drag_over(false);
+    async function copy_entry_data(entry, position) {
+        await helpers.copy_entry_to_clipboard(entry, position, (visible, pos) => {
+            copy_feedback.visible = visible;
+            copy_feedback.position = pos;
+        }, inputs.entry_category());
+    }
+    function handle_mouse_down(event) {
+        is_dragging = true;
+        drag_started = false;
+        hover_data = null;
+        inputs.on_point_hover()?.(null);
+        last_mouse = { x: event.clientX, y: event.clientY };
+    }
+    const handle_mouse_move = (event) => {
+        if (!is_dragging)
+            return;
+        const [dx, dy] = [event.clientX - last_mouse.x, event.clientY - last_mouse.y];
+        // Mark as drag if any movement occurred
+        if (dx !== 0 || dy !== 0)
+            drag_started = true;
+        // With Cmd/Ctrl held: pan the view instead of rotating
+        inputs.on_drag(dx, dy, event.metaKey || event.ctrlKey);
+        last_mouse = { x: event.clientX, y: event.clientY };
+    };
+    const handle_mouse_up = () => {
+        // leave drag_started set so the trailing click can detect a concluded drag;
+        // handle_click reads then clears it, and handle_mouse_down resets it next interaction
+        is_dragging = false;
+    };
+    const handle_wheel = (event) => {
+        event.preventDefault();
+        const zoomed = inputs.zoom() * (event.deltaY > 0 ? 0.98 : 1.02);
+        inputs.set_zoom(Math.max(zoom_min, Math.min(zoom_max, zoomed)));
+    };
+    const handle_hover = (event) => {
+        if (is_dragging)
+            return;
+        const entry = find_entry_at_mouse(event);
+        hover_data = entry ? { entry, position: { x: event.clientX, y: event.clientY } } : null;
+        inputs.on_point_hover()?.(hover_data);
+    };
+    const find_entry_at_mouse = (event) => helpers.find_hull_entry_at_mouse(inputs.canvas(), event, inputs.visible_entries(), inputs.project_point);
+    const handle_click = (event) => {
+        event.stopPropagation();
+        const was_drag = drag_started; // Check if this was a drag operation (any mouse movement during drag)
+        drag_started = false; // Reset for next interaction
+        if (was_drag)
+            return; // Don't trigger click if this was a drag
+        const entry = find_entry_at_mouse(event);
+        if (!entry) {
+            if (modal_open)
+                close_structure_popup();
+            return;
+        }
+        select_entry(entry);
+    };
+    function close_structure_popup() {
+        modal_open = false;
+        selected_structure = null;
+        inputs.set_selected_entry(null);
+    }
+    const handle_double_click = (event) => {
+        const entry = find_entry_at_mouse(event);
+        if (entry)
+            void copy_entry_data(entry, { x: event.clientX, y: event.clientY });
+    };
+    function render_once() {
+        if (frame_id)
+            return;
+        frame_id = requestAnimationFrame(() => {
+            inputs.render_frame();
+            frame_id = 0;
+        });
+    }
+    function update_canvas_size() {
+        const canvas = inputs.canvas();
+        if (!canvas)
+            return;
+        const dpr = globalThis.devicePixelRatio || 1;
+        const container = canvas.parentElement;
+        const rect = container?.getBoundingClientRect();
+        const [width, height] = rect ? [rect.width, rect.height] : [400, 400];
+        // Only update canvas dimensions if they actually changed
+        // (assigning canvas.width/height clears the canvas even if values are the same)
+        const new_width = Math.max(0, Math.round(width * dpr));
+        const new_height = Math.max(0, Math.round(height * dpr));
+        if (!inputs.ctx() || canvas.width !== new_width || canvas.height !== new_height) {
+            canvas.width = new_width;
+            canvas.height = new_height;
+            const ctx = canvas.getContext(`2d`);
+            inputs.set_ctx(ctx);
+            if (ctx) {
+                ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = `high`;
+            }
+        }
+        inputs.set_canvas_dims({ width, height, scale: Math.min(width, height) / 600 });
+        render_once();
+    }
+    $effect(() => {
+        const canvas = inputs.canvas();
+        if (!canvas)
+            return undefined;
+        update_canvas_size(); // Initial setup
+        // Watch for resize events - only update canvas, don't reset camera
+        const resize_observer = new ResizeObserver(update_canvas_size);
+        const container = canvas.parentElement;
+        if (container)
+            resize_observer.observe(container);
+        return () => {
+            if (frame_id)
+                cancelAnimationFrame(frame_id);
+            resize_observer.disconnect(); // Cleanup on unmount
+        };
+    });
+    // Fullscreen handling with camera reset
+    let was_fullscreen = $state(inputs.fullscreen());
+    $effect(() => {
+        setup_fullscreen_effect(inputs.fullscreen(), inputs.wrapper(), (entering) => {
+            if (entering !== was_fullscreen) {
+                inputs.on_fullscreen_change();
+                was_fullscreen = entering;
+            }
+        });
+        set_fullscreen_bg(inputs.wrapper(), inputs.fullscreen(), inputs.fullscreen_bg_var);
+    });
+    // Performance: Pre-compute and cache all point projections + depth sorting
+    const sorted_points_cache = $derived.by(() => {
+        if (!inputs.canvas() || inputs.visible_entries().length === 0)
+            return [];
+        return inputs
+            .visible_entries()
+            .map((entry) => ({
+            entry,
+            projected: inputs.project_point(entry.x, entry.y, entry.z),
+        }))
+            .sort((left, right) => left.projected.depth - right.projected.depth);
+    });
+    return {
+        get is_dragging() {
+            return is_dragging;
+        },
+        get hover_data() {
+            return hover_data;
+        },
+        get drag_over() {
+            return drag_over;
+        },
+        get modal_open() {
+            return modal_open;
+        },
+        get selected_structure() {
+            return selected_structure;
+        },
+        get modal_place_right() {
+            return modal_place_right;
+        },
+        get sorted_points_cache() {
+            return sorted_points_cache;
+        },
+        copy_feedback, // stable $state proxy; mutated in place for ClickFeedback binding
+        // Event handler groups, spread onto their target elements by ConvexHull3D/4D
+        canvas_handlers: {
+            onmousedown: handle_mouse_down,
+            onmousemove: handle_hover,
+            onclick: handle_click,
+            onkeydown: handle_keydown,
+            ondblclick: handle_double_click,
+            onwheel: handle_wheel,
+        },
+        wrapper_handlers: {
+            onkeydown: handle_keydown,
+            ondrop: handle_file_drop,
+            ondragover: handle_drag_over,
+            ondragleave: handle_drag_leave,
+        },
+        // document-level so drags continue outside the canvas; attached individually
+        // since <svelte:document> rejects spread attributes
+        handle_mouse_move,
+        handle_mouse_up,
+        close_structure_popup,
+        render_once,
+    };
+}

package/dist/convex-hull/helpers.d.ts

@@ -1,25 +1,39 @@
 import { type D3InterpolateName } from '../colors';
 import type { EnergyModeInfo } from './';
 import type { ElementSymbol } from '../element';
-import type { ConvexHullConfig, GasAnalysis, GasThermodynamicsConfig, HighlightStyle, MarkerSymbol, PhaseData } from './types';
-import { DEFAULT_GAS_TEMP } from './types';
-export { DEFAULT_GAS_TEMP };
+import type { AnyStructure } from '../structure';
+import type { ConvexHullConfig, EntryCategoryConfig, GasAnalysis, GasThermodynamicsConfig, HighlightStyle, MarkerSymbol, PhaseData } from './types';
+export { DEFAULT_GAS_TEMP } from './types';
 export declare const HULL_STABILITY_TOL = 0.000001;
-export declare function compute_hull_stability(raw_distance: number, exclude_from_hull?: boolean, tol?: number): {
-    e_above_hull: number;
-    is_stable: boolean;
+export declare function compute_hull_stability(raw_distance: number | null | undefined, exclude_from_hull?: boolean, tol?: number): {
+    e_above_hull: number | undefined;
+    is_stable: boolean | undefined;
 };
 type StabilityEntry = {
     is_stable?: boolean;
     e_above_hull?: number;
 };
+export declare const extract_structure_from_entry: (entries: PhaseData[], entry: {
+    entry_id?: string;
+}) => AnyStructure | null;
+export declare const array_min: (values: readonly number[]) => number;
+export declare const array_max: (values: readonly number[]) => number;
+export declare const hull_distance_range: (entries: PhaseData[]) => [number, number];
 export declare const entry_is_stable: (entry: StabilityEntry, tol?: number) => boolean;
+export declare const entry_within_hull_dist: (entry: StabilityEntry, max_dist: number) => boolean;
 export declare const is_on_hull: (entry: PhaseData, tol?: number) => boolean;
 export declare const get_arity: (entry: PhaseData) => number;
 export declare const is_unary_entry: (entry: PhaseData) => boolean;
 export declare const entry_is_unstable: (entry: StabilityEntry) => boolean;
-export declare const entry_is_visible: (entry: StabilityEntry, show_stable: boolean, show_unstable: boolean) => boolean;
-export declare const visible_entries: <Entry extends StabilityEntry>(entries: readonly Entry[], show_stable: boolean, show_unstable: boolean) => Entry[];
+type CategorySource = Pick<PhaseData, `data` | `attributes`>;
+export declare function get_entry_category(entry: CategorySource, config: EntryCategoryConfig | null | undefined): string | null;
+export declare function apply_category_markers(entries: (PhaseData & {
+    marker?: MarkerSymbol;
+})[], config: EntryCategoryConfig | null | undefined): (PhaseData & {
+    marker?: MarkerSymbol;
+})[];
+export declare const entry_is_visible: (entry: StabilityEntry & CategorySource, show_stable: boolean, show_unstable: boolean, category?: EntryCategoryConfig | null, hidden_categories?: readonly string[]) => boolean;
+export declare const visible_entries: <Entry extends StabilityEntry & CategorySource>(entries: readonly Entry[], show_stable: boolean, show_unstable: boolean, category?: EntryCategoryConfig | null, hidden_categories?: readonly string[]) => Entry[];
 export declare function get_energy_color_scale(color_mode: `stability` | `energy`, color_scale: D3InterpolateName, plot_entries: {
     e_above_hull?: number;
 }[]): ((value: number) => string) | null;
@@ -37,7 +51,7 @@ export declare function current_entry<Entry extends {
 export declare function same_entry<Entry extends {
     entry_id?: string;
 }>(a: Entry | null | undefined, b: Entry | null | undefined): boolean;
-export declare function build_entry_tooltip_text(entry: PhaseData): string;
+export declare function build_entry_tooltip_text(entry: PhaseData, category?: EntryCategoryConfig | null): string;
 export declare function find_hull_entry_at_mouse<T extends {
     x: number;
     y: number;
@@ -49,6 +63,7 @@ export declare function find_hull_entry_at_mouse<T extends {
     x: number;
     y: number;
 }): T | null;
+export declare const hull_style_css: (colors: ConvexHullConfig[`colors`] | undefined) => string;
 export declare function calculate_modal_side(wrapper: HTMLDivElement | undefined): boolean;
 export declare function compute_energy_mode_info(entries: PhaseData[], // Array of phase entries to analyze
 find_lowest_energy_unary_refs_fn: (entries: PhaseData[]) => Record<string, PhaseData>, // Function to find unary references
@@ -63,7 +78,7 @@ export declare function copy_entry_to_clipboard(entry: PhaseData, position: {
 }, on_feedback: (visible: boolean, pos: {
     x: number;
     y: number;
-}) => void): Promise<void>;
+}) => void, category?: EntryCategoryConfig | null): Promise<void>;
 export declare const DEFAULT_HIGHLIGHT_STYLE: Required<HighlightStyle>;
 export declare const merge_highlight_style: (custom_style: HighlightStyle | undefined) => Required<HighlightStyle>;
 export declare function is_entry_highlighted<T extends {
@@ -88,6 +103,27 @@ export declare function draw_selection_highlight(ctx: CanvasRenderingContext2D,
     y: number;
 }, base_size: number, container_scale: number, pulse_time: number, pulse_opacity: number): void;
 export declare function get_canvas_text_color(dark_mode: boolean, element?: HTMLElement | null): string;
+export declare function draw_hull_points<Entry extends PhaseData & {
+    z: number;
+    size?: number;
+    marker?: MarkerSymbol;
+}>(ctx: CanvasRenderingContext2D, sorted_points: {
+    entry: Entry;
+    projected: {
+        x: number;
+        y: number;
+    };
+}[], opts: {
+    scale: number;
+    shadow_factor: number;
+    selected_entry: Entry | null;
+    is_highlighted: (entry: Entry) => boolean;
+    get_point_color: (entry: Entry) => string;
+    highlight_style: Required<HighlightStyle>;
+    pulse_time: number;
+    pulse_opacity: number;
+}): void;
+export declare function marker_path_data(radius: number, marker: MarkerSymbol): string | null;
 export declare function create_marker_path(size: number, marker?: MarkerSymbol): Path2D;
 export interface TemperatureAnalysis {
     has_temp_data: boolean;
@@ -103,15 +139,9 @@ export interface TemperatureFilterOptions {
     max_interpolation_gap?: number;
 }
 export declare function filter_entries_at_temperature(entries: PhaseData[], T: number, options?: TemperatureFilterOptions): PhaseData[];
-export declare function safe_analyze_gas_data(entries: PhaseData[], config?: GasThermodynamicsConfig): GasAnalysis;
-export declare function safe_apply_gas_corrections(entries: PhaseData[], config: GasThermodynamicsConfig | undefined, T: number): PhaseData[];
 export declare function get_gas_corrected_entries(entries: PhaseData[], gas_config: GasThermodynamicsConfig | undefined, gas_pressures: Partial<Record<string, number>>, temperature: number): {
     entries: PhaseData[];
     analysis: GasAnalysis;
     merged_config: GasThermodynamicsConfig | undefined;
 };
-export declare function get_entry_label(entry: {
-    reduced_formula?: string;
-    name?: string;
-    composition: Record<string, number>;
-}, elements?: ElementSymbol[]): string;
+export declare function get_entry_label(entry: Pick<PhaseData, `reduced_formula` | `name` | `composition`>, elements?: ElementSymbol[]): string;