DOM UI Components
Relevant source files
The following files were used as context for generating this wiki page:
HoloPrint utilizes a suite of custom Web Components to provide a structured and interactive interface for generating Minecraft Bedrock resource packs. These components extend standard HTML elements to handle complex data types such as 3D vectors, item matching criteria, and multi-file uploads, ensuring technical accuracy and consistent user experience across the application.
The components are registered and initialized within the main application logic, leveraging Shadow DOM for style encapsulation and the ElementInternals API for seamless integration with standard HTML forms.
Sources: src/index.js:189-201, src/index.html:104-184
Component Architecture and Lifecycle
Most UI components in the project are built as standard Web Components, extending HTMLElement. They utilize the connectedCallback for initialization, including template rendering and event listener attachment. The project also employs ElementInternals to allow custom components to participate in form submission and validation.
The diagram shows the standard lifecycle and integration pattern for HoloPrint's custom UI elements.
Sources: src/components/ItemCriteriaInput.js:25-103, globalPatches.d.ts:40-48
Key UI Components
ItemCriteriaInput
The ItemCriteriaInput component allows users to define matching rules for Minecraft items based on names or tags. It dynamically generates input fields and provides autocomplete suggestions by fetching vanilla Minecraft metadata.
- Architecture: Uses
ElementInternalsto associate with forms. - Data Flow: Values are stored as stringified JSON representing an
ItemCriteriaobject containingnamesandtagsarrays. - Validation: Implements pattern matching for Minecraft identifiers (e.g.,
namespace:item_name).
| Feature | Description |
|---|---|
| Autocomplete | Fetches mojang-items.json and item_tags.json to populate <datalist> elements. |
| Dynamic Inputs | Users can add multiple item names or tags joined by "or" logic. |
| Form Integration | Sets form value using internals.setFormValue on every input change. |
Sources: src/components/ItemCriteriaInput.js:6-23, src/components/ItemCriteriaInput.js:106-125, src/HoloPrint.js:774-778
Vec3Input and ResizingInput
The Vec3Input component provides a grouped interface for entering X, Y, and Z coordinates. It often works in tandem with ResizingInput, a customized <input> that adjusts its width based on the content length.
- Logic:
Vec3Inputexposes anxyzgetter/setter that returns or accepts an array of three numbers. - Implementation: It utilizes slots (x, y, z) to allow the main application to provide specific input configurations while managing the layout.
Sources: src/index.html:150-154, src/index.js:239-244, globalPatches.d.ts:44-46
FileInputTable
This component manages the list of uploaded .mcstructure files. It provides a tabular view of selected files with options to remove individual entries or clear the entire list.
- Input Proxying: It wraps a standard
<input type="file" multiple>and mirrors its state. - Features: Includes a "Remove all" button and dynamic file count labels.
Sources: src/index.html:104-106, src/index.js:195, globalPatches.d.ts:43
Form Integration and Event Handling
The generatePackForm acts as the central coordinator for these components. It listens for input events to trigger UI updates, such as the real-time texture preview.
This sequence illustrates how custom components communicate state changes to the main application form and logging system.
Sources: src/index.js:213-220, src/index.js:290-302, src/index.js:467-480
Component Registration
Components are defined using the customElements.define API within src/index.js.
// src/index.js:189-201
customElements.define("item-criteria-input", class extends ItemCriteriaInput {
constructor() {
super(translateCurrentLanguage);
}
});
customElements.define("file-input-table", FileInputTable);
customElements.define("resizing-input", ResizingInput, {
extends: "input"
});
customElements.define("vec-3-input", Vec3Input);
customElements.define("simple-logger", SimpleLogger);
Sources: src/index.js:189-201
Conclusion
The DOM UI components in HoloPrint provide a specialized toolkit for handling Minecraft-specific data structures. By encapsulating logic for coordinate input, item criteria, and file management into Web Components, the project maintains a modular architecture that separates interface concerns from the complex resource pack generation logic.