@myrmidon/gve-snapshot-rendition 0.0.1

package/dist/hint-designer/gve-hint-designer.d.ts

@@ -0,0 +1,298 @@
+import { HintDesignerData, HintDesignerSettings, StringPair } from "./hint-designer-models";
+/**
+ * GVE Hint Designer Web Component.
+ * A minimalist editing environment to design hints and test their animations.
+ */
+export declare class GveHintDesigner extends HTMLElement {
+    private _data;
+    private _settings;
+    private _hintId?;
+    private _hintVariables;
+    private _logger;
+    private _shadow;
+    private _svgDisplay?;
+    private _messagePanel?;
+    private _zoomLevel;
+    private _panX;
+    private _panY;
+    private _isPanning;
+    private _lastPanX;
+    private _lastPanY;
+    private _svgTextarea?;
+    private _jsTextarea?;
+    private _svgHighlightContainer?;
+    private _jsHighlightContainer?;
+    private _hintsDropdown?;
+    private _animationsDropdown?;
+    private _embeddedJsCheckbox?;
+    private _newAnimationCheckbox?;
+    private _positionSelect?;
+    private _offsetXInput?;
+    private _offsetYInput?;
+    private _scaleXInput?;
+    private _scaleYInput?;
+    private _rotationInput?;
+    private _solidCheckbox?;
+    private _displacedRefSpanInput?;
+    private _variablesTable?;
+    private _playButton?;
+    private _pauseButton?;
+    private _restartButton?;
+    private _progressBar?;
+    private _currentTimeline?;
+    private _isPlaying;
+    private _progressUpdateInterval?;
+    constructor();
+    /**
+     * Called when component is added to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Called when component is removed from the DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Data property (bindable).
+     */
+    get data(): HintDesignerData;
+    set data(value: HintDesignerData);
+    /**
+     * Settings property (bindable).
+     */
+    get settings(): HintDesignerSettings;
+    set settings(value: HintDesignerSettings);
+    /**
+     * Hint ID property (bindable).
+     */
+    get hintId(): string | undefined;
+    set hintId(value: string | undefined);
+    /**
+     * Hint variables property (bindable).
+     */
+    get hintVariables(): StringPair[];
+    set hintVariables(value: StringPair[]);
+    /**
+     * Render the component UI.
+     */
+    private render;
+    /**
+     * Create the toolbar.
+     */
+    private createToolbar;
+    /**
+     * Create the SVG display panel.
+     */
+    private createSvgDisplay;
+    /**
+     * Add grid and rulers to the SVG display as background.
+     */
+    private addGridAndRulers;
+    /**
+     * Create the timeline player.
+     */
+    private createTimelinePlayer;
+    /**
+     * Create the message panel.
+     */
+    private createMessagePanel;
+    /**
+     * Create the hint properties editor.
+     */
+    private createHintPropertiesEditor;
+    /**
+     * Create the hint variables list.
+     */
+    private createHintVariablesList;
+    /**
+     * Create a button element with a Feather icon.
+     */
+    private createButton;
+    /**
+     * Create an input element.
+     */
+    private createInput;
+    /**
+     * Create a form row with label and control.
+     */
+    private createFormRow;
+    /**
+     * Create position select dropdown.
+     */
+    private createPositionSelect;
+    /**
+     * Make a panel resizable.
+     */
+    private makeResizable;
+    /**
+     * Initialize event listeners.
+     */
+    private initializeEventListeners;
+    /**
+     * Initialize panning with mouse drag.
+     */
+    private initializePanning;
+    /**
+     * Initialize zooming with mouse wheel.
+     */
+    private initializeWheelZoom;
+    /**
+     * Add click listener to a button by ID.
+     */
+    private addClickListener;
+    /**
+     * Cleanup resources.
+     */
+    private cleanup;
+    /**
+     * Refresh the entire UI.
+     */
+    private refreshUI;
+    /**
+     * Refresh the hints dropdown.
+     */
+    private refreshHintsDropdown;
+    /**
+     * Refresh the animations dropdown.
+     */
+    private refreshAnimationsDropdown;
+    /**
+     * Load a hint for editing.
+     */
+    private loadHint;
+    /**
+     * Clear the hint form.
+     */
+    private clearHintForm;
+    /**
+     * Add a new hint.
+     */
+    private addHint;
+    /**
+     * Save the current hint.
+     */
+    private saveHint;
+    /**
+     * Delete the current hint.
+     */
+    private deleteHint;
+    /**
+     * Parse offset value (number or string with suffix).
+     */
+    private parseOffset;
+    /**
+     * Refresh the SVG display.
+     */
+    private refreshSvgDisplay;
+    /**
+     * Resolve variables in SVG code.
+     */
+    private resolveVariables;
+    /**
+     * Play animation.
+     */
+    private playAnimation;
+    /**
+     * Create the GSAP timeline for the current hint.
+     */
+    private createTimeline;
+    /**
+     * Pause animation.
+     */
+    private pauseAnimation;
+    /**
+     * Restart animation.
+     */
+    private restartAnimation;
+    /**
+     * Seek animation (timeline scrubbing).
+     */
+    private seekAnimation;
+    /**
+     * Start updating progress bar.
+     */
+    private startProgressUpdate;
+    /**
+     * Stop updating progress bar.
+     */
+    private stopProgressUpdate;
+    /**
+     * Zoom in.
+     */
+    private zoomIn;
+    /**
+     * Zoom out.
+     */
+    private zoomOut;
+    /**
+     * Reset zoom.
+     */
+    private resetZoom;
+    /**
+     * Update SVG transform based on zoom and pan.
+     */
+    private updateSvgTransform;
+    /**
+     * Save data to file.
+     */
+    private saveData;
+    /**
+     * Load data from file.
+     */
+    private loadData;
+    /**
+     * Clear all data.
+     */
+    private clearData;
+    /**
+     * Load animation code from catalog.
+     */
+    private loadAnimationCode;
+    /**
+     * Add a new variable.
+     */
+    private addVariable;
+    /**
+     * Delete a variable.
+     */
+    private deleteVariable;
+    /**
+     * Edit a variable.
+     */
+    private editVariable;
+    /**
+     * Delete all variables.
+     */
+    private deleteAllVariables;
+    /**
+     * Refresh the variables table.
+     */
+    private refreshVariablesTable;
+    /**
+     * Show a message in the message panel.
+     */
+    private showMessage;
+    /**
+     * Apply syntax highlighting to SVG textarea.
+     */
+    private highlightSvg;
+    /**
+     * Apply syntax highlighting to JS textarea.
+     */
+    private highlightJs;
+    /**
+     * Sync scroll position for SVG textarea and highlight container.
+     */
+    private syncSvgScroll;
+    /**
+     * Sync scroll position for JS textarea and highlight container.
+     */
+    private syncJsScroll;
+    /**
+     * Fire a custom event.
+     */
+    private fireEvent;
+    /**
+     * Get component styles.
+     */
+    private getStyles;
+}

package/dist/hint-designer/hint-designer-models.d.ts

@@ -0,0 +1,32 @@
+import { OperationHint } from "../settings/hint-models";
+/**
+ * String name-value pair used for hint variables.
+ */
+export interface StringPair {
+    name: string;
+    value: string;
+}
+/**
+ * Data model for the hint designer component.
+ */
+export interface HintDesignerData {
+    /** Dictionary of hints, keyed by hint ID */
+    hints: Record<string, OperationHint>;
+    /** Catalog of animation JS code fragments, keyed by ID */
+    animations: Record<string, string>;
+}
+/**
+ * Settings for the hint designer component.
+ */
+export interface HintDesignerSettings {
+    /** Width of the hint's SVG design area in the editor */
+    hintDesignWidth: number;
+    /** Height of the hint's SVG design area in the editor */
+    hintDesignHeight: number;
+    /** Debug mode for verbose logging */
+    debug: boolean;
+}
+/**
+ * Default settings for the hint designer component.
+ */
+export declare const DEFAULT_HINT_DESIGNER_SETTINGS: HintDesignerSettings;