sapdon 2.0.2 → 3.0.0

package/dist/core/ui/elements/scrollingPanel.d.ts

@@ -0,0 +1,14 @@
+export class ScrollingPanel extends UIElement {
+    constructor(id: any, template: any);
+    input: Input;
+    scrollView: ScrollView;
+    layout: Layout;
+    dataBinding: DataBinding;
+    factory: Factory;
+}
+import { UIElement } from "./uiElement.js";
+import { Input } from "../properties/input.js";
+import { ScrollView } from "../properties/scrollView.js";
+import { Layout } from "../properties/layout.js";
+import { DataBinding } from "../properties/dataBinding.js";
+import { Factory } from "../properties/factory.js";

package/dist/core/ui/elements/scrollingPanel.js

@@ -0,0 +1,59 @@
+import { Control } from "../properties/control.js";
+import { DataBinding } from "../properties/dataBinding.js";
+import { Factory } from "../properties/factory.js";
+import { Input } from "../properties/input.js";
+import { Layout } from "../properties/layout.js";
+import { ScrollView } from "../properties/scrollView.js";
+import { UIElement } from "./uiElement.js";
+export class ScrollingPanel extends UIElement {
+    constructor(id, template) {
+        super(id, "scroll_view", template);
+        this.input = new Input();
+        this.scrollView = new ScrollView();
+        this.control = new Control();
+        this.layout = new Layout();
+        this.dataBinding = new DataBinding();
+        this.factory = new Factory();
+    }
+    serialize() {
+        //合并属性
+        // 复制Input的属性
+        for (const key in this.input) {
+            if (this.input.hasOwnProperty(key)) {
+                this.properties.set(key, this.input[key]);
+            }
+        }
+        // 复制scrollView的属性
+        for (const key in this.scrollView) {
+            if (this.scrollView.hasOwnProperty(key)) {
+                this.properties.set(key, this.scrollView[key]);
+            }
+        }
+        // 复制Layout的属性
+        for (const key in this.layout) {
+            if (this.layout.hasOwnProperty(key)) {
+                this.properties.set(key, this.layout[key]);
+            }
+        }
+        // 复制DataBinding的属性
+        for (const key in this.dataBinding) {
+            if (this.dataBinding.hasOwnProperty(key)) {
+                this.properties.set(key, this.dataBinding[key]);
+            }
+        }
+        // 复制Factory的属性
+        for (const key in this.factory) {
+            if (this.factory.hasOwnProperty(key)) {
+                this.properties.set(key, this.factory[key]);
+            }
+        }
+        // 复制Control的属性
+        for (const key in this.control) {
+            if (this.control.hasOwnProperty(key)) {
+                this.properties.set(key, this.control[key]);
+            }
+        }
+        // 调用父类的serialize方法
+        return super.serialize();
+    }
+}

package/dist/core/ui/elements/stackPanel.d.ts

@@ -0,0 +1,14 @@
+export class StackPanel extends Panel {
+    type: string;
+    orientation: string;
+    stackNum: number;
+    addStack(size: any, content: any, debug?: boolean): this;
+    /**
+     * Possible values:
+        vertical
+        horizontal
+     * @param {*} orientation
+     */
+    setOrientation(orientation: any): this;
+}
+import { Panel } from "./panel.js";

package/dist/core/ui/elements/stackPanel.js

@@ -0,0 +1,37 @@
+import { Layout } from "../properties/layout.js";
+import { Panel } from "./panel.js";
+export class StackPanel extends Panel {
+    constructor(id, template) {
+        super(id, template);
+        this.type = "stack_panel";
+        this.orientation = "vertical";
+        this.stackNum = 0;
+        //init
+        this.setLayout(new Layout().setSize(["100%", "100%"]));
+    }
+    addStack(size, content, debug = false) {
+        const stack = new Panel(`stack${this.stackNum}`)
+            .setLayout(new Layout().setSize(size))
+            .addControl(content);
+        if (debug)
+            stack.enableDebug();
+        this.addControl(stack);
+        this.stackNum++;
+        return this;
+    }
+    /**
+     * Possible values:
+        vertical
+        horizontal
+     * @param {*} orientation
+     */
+    setOrientation(orientation) {
+        this.orientation = orientation;
+        return this;
+    }
+    serialize() {
+        this.properties.set("type", "stack_panel");
+        this.properties.set("orientation", this.orientation);
+        return super.serialize();
+    }
+}

package/dist/core/ui/elements/uiElement.d.ts

@@ -0,0 +1,53 @@
+export class UIElement {
+    constructor(name: any, type: any, template: any);
+    type: any;
+    id: any;
+    name: any;
+    control: Control;
+    properties: Map<any, any>;
+    variables: Map<any, any>;
+    modifications: any[];
+    enableDebug(): this;
+    setControl(control: any): this;
+    addControl(control: any): this;
+    addControls(controls: any): this;
+    addVariable(name: any, value: any): this;
+    addProp(name: any, value: any): this;
+    addModification(modification: any): this;
+    serialize(): {
+        [x: number]: any;
+    };
+}
+/**
+ * Modifications ​
+    To modify JSON UI in a non-intrusive way, you can use the modifications property to modify previously existing JSON UI elements from other packs (usually vanilla JSON UI files). Doing this makes sure only necessary parts are modified unless otherwise intended, to improve compatibility with other packs that modify the JSON UI.
+
+    Modification	Description
+    insert_back	insert at end of array
+    insert_front	insert at start of array
+    insert_after	insert after target in array
+    insert_before	insert before target in array
+    move_back	move target to end of array
+    move_front	move target to start of array
+    move_after	move target after second target
+    move_before	move target before second target
+    swap	swap first target with second target
+    replace	replace first target with second target
+    remove	remove target
+ */
+export class Modifications {
+    static OPERATION: Readonly<{
+        INSERT_BACK: "insert_back";
+        INSERT_FRONT: "insert_front";
+        INSERT_AFTER: "insert_after";
+        INSERT_BEFORE: "insert_before";
+        MOVE_BACK: "move_back";
+        MOVE_FRONT: "move_front";
+        MOVE_AFTER: "move_after";
+        MOVE_BEFORE: "move_before";
+        SWAP: "swap";
+        REPLACE: "replace";
+        REMOVE: "remove";
+    }>;
+}
+import { Control } from "../properties/control.js";

package/dist/core/ui/elements/uiElement.js

@@ -0,0 +1,129 @@
+/**
+ * Elements ​
+    A JSON UI element is the basic form of data within JSON UI. Elements must have a unique name for each namespace so as to not have a conflict with other elements of the same name yet may have different functions.
+
+    Here the element type is label so it will render a text of Hello World when called:
+
+    vanilla/ui/example_file.json
+
+    {
+        "test_element": {
+            "type": "label",
+            "text": "Hello World"
+        }
+    }
+    Types ​
+    The following are some of the element types, which are possible values for the type property:
+
+    label - for creating text objects
+    image - for rendering images from a filepath provided
+    button - for creating interactive and clickable elements
+    panel - an empty container where you can store all other elements that may overlap to each other
+    stack_panel - an empty container where you can store all other elements in a stack that doesn't overlap to each other
+    grid - uses another element as a template, and then renders it repeatedly in multiple rows and columns
+    factory - renders an element based off of another element, is capable of calling hardcoded values and variables
+    custom - is paired with another property renderer which renders hardcoded JSON UI elements
+    screen - elements that are called by the game directly, usually root panel elements
+ */
+import { Control } from "../properties/control.js";
+// 基础元素类
+export class UIElement {
+    constructor(name, type, template) {
+        this.type = type;
+        this.id = template ? `${name}@${template}` : name;
+        this.name = name;
+        this.control = new Control();
+        this.properties = new Map().set("type", type);
+        this.variables = new Map();
+        this.modifications = [];
+    }
+    enableDebug() {
+        this.control.addControl({
+            "debug_board": {
+                "type": "image",
+                "texture": "textures/ui/focus_border_white",
+                "nineslice_size": 1,
+                "size": ["100%", "100%"]
+            }
+        });
+        return this;
+    }
+    setControl(control) {
+        this.control = control;
+        return this;
+    }
+    addControl(control) {
+        //console.log("control:  ", control)
+        if (control instanceof UIElement) {
+            this.control.addControl(control.serialize());
+        }
+        else {
+            this.control.addControl(control);
+        }
+        return this;
+    }
+    addControls(controls) {
+        for (let i in controls) {
+            this.addControl(controls[i]);
+        }
+        return this;
+    }
+    addVariable(name, value) {
+        this.variables.set(`$${name}`, value);
+        return this;
+    }
+    addProp(name, value) {
+        this.properties.set(name, value);
+        return this;
+    }
+    addModification(modification) {
+        this.modifications.push({
+            array_name: modification.array_name,
+            operation: modification.operation,
+            value: modification.value
+        });
+        this.addProp("modifications", this.modifications);
+        return this;
+    }
+    serialize() {
+        const json = Object.fromEntries(this.properties);
+        Object.assign(json, Object.fromEntries(this.variables));
+        return {
+            [this.id]: json
+        };
+    }
+}
+//Modifications ​方法
+/**
+ * Modifications ​
+    To modify JSON UI in a non-intrusive way, you can use the modifications property to modify previously existing JSON UI elements from other packs (usually vanilla JSON UI files). Doing this makes sure only necessary parts are modified unless otherwise intended, to improve compatibility with other packs that modify the JSON UI.
+
+    Modification	Description
+    insert_back	insert at end of array
+    insert_front	insert at start of array
+    insert_after	insert after target in array
+    insert_before	insert before target in array
+    move_back	move target to end of array
+    move_front	move target to start of array
+    move_after	move target after second target
+    move_before	move target before second target
+    swap	swap first target with second target
+    replace	replace first target with second target
+    remove	remove target
+ */
+// Modifications操作类型常量类
+export class Modifications {
+    static OPERATION = Object.freeze({
+        INSERT_BACK: "insert_back",
+        INSERT_FRONT: "insert_front",
+        INSERT_AFTER: "insert_after",
+        INSERT_BEFORE: "insert_before",
+        MOVE_BACK: "move_back",
+        MOVE_FRONT: "move_front",
+        MOVE_AFTER: "move_after",
+        MOVE_BEFORE: "move_before",
+        SWAP: "swap",
+        REPLACE: "replace",
+        REMOVE: "remove"
+    });
+}

package/dist/core/ui/properties/control.d.ts

@@ -0,0 +1,214 @@
+/**
+ * Control Class
+ *
+ * This class represents a UI control element with various properties and methods to manipulate its state.
+ *
+ * Properties:
+ * - visible: boolean - If the UI element should be visible (default: true)
+ * - enabled: boolean - If true and if the UI element or any of its children have the locked state then they will be in the locked (default: true)
+ * - layer: int - Z-Index/Layer (like zindex in CSS) relative to parent element. Higher layers will render above (default: 0)
+ * - alpha: float - Alpha/transparency of the element. It will only affect the UI element. Its children will be unaffected. (default: 1.0)
+ * - propagate_alpha: boolean - If alpha should not only apply to the parent if possible but also all its children (default: false)
+ * - clips_children: boolean - Cuts off visually and interactively everything beyond the boundaries of the UI element (default: false)
+ * - allow_clipping: boolean - If clips_children works in the UI element. Otherwise, it won't have any effect (default: true)
+ * - clip_offset: Vector [x, y] - Offset from the start of the clipping (default: [0, 0])
+ * - clip_state_change_event: string - Event triggered when the clip state changes
+ * - enable_scissor_test: boolean - Enables scissor test for clipping (default: false)
+ * - property_bag: object - Property bag contains properties/variables that are more related with the data than the actual structure and look of the UI element
+ * - selected: boolean - If the text box is selected by default
+ * - use_child_anchors: boolean - Use the anchor_from and anchor_to of the child of the UI element (default: false)
+ * - controls: array - For adding children to the element
+ * - anims: string[] - Array of the animation names
+ * - disable_anim_fast_forward: boolean - Disables fast-forwarding animations
+ * - animation_reset_name: string - Name of the animation to reset to
+ * - ignored: boolean - If the UI element should be ignored (default: false)
+ * - variables: array or object - A bunch of conditions that change the variables values
+ * - modifications: array - Allows to modify the UI files of resource packs below (vanilla being the most bottom one)
+ * - grid_position: Vector [row, column] - Position that the control will take inside the grid. This also allows to modify specific grid items of a hardcoded grid
+ * - collection_index: int - Index that the control takes in the collection
+ */
+/**
+ * Control 类
+ *
+ * 该类表示一个具有各种属性和方法的 UI 控件元素，用于操作其状态。
+ *
+ * 属性：
+ * - visible: boolean - 控制 UI 元素是否可见（默认值：true）
+ * - enabled: boolean - 如果为 true，且 UI 元素或其任何子元素处于锁定状态，则它们将被锁定（默认值：true）
+ * - layer: int - 相对于父元素的 Z-Index/层级（类似于 CSS 中的 zindex）。较高的层级将渲染在上方（默认值：0）
+ * - alpha: float - 元素的透明度。仅影响 UI 元素本身，其子元素不受影响。如果希望透明度同时应用于父元素和子元素，请使用 propagate_alpha（默认值：1.0）
+ * - propagate_alpha: boolean - 透明度是否应同时应用于父元素及其所有子元素（默认值：false）
+ * - clips_children: boolean - 是否在视觉上和交互上裁剪超出 UI 元素边界的内容（默认值：false）
+ * - allow_clipping: boolean - 是否允许在 UI 元素中启用裁剪。否则，clips_children 将无效（默认值：true）
+ * - clip_offset: Vector [x, y] - 裁剪起始点的偏移量（默认值：[0, 0]）
+ * - clip_state_change_event: string - 裁剪状态更改时触发的事件
+ * - enable_scissor_test: boolean - 是否启用裁剪测试（默认值：false）
+ * - property_bag: object - 属性包，包含与数据相关的属性/变量，而不是 UI 元素的实际结构和外观
+ * - selected: boolean - 文本框是否默认被选中
+ * - use_child_anchors: boolean - 是否使用 UI 元素子元素的 anchor_from 和 anchor_to（默认值：false）
+ * - controls: array - 用于向元素添加子元素
+ * - anims: string[] - 动画名称数组
+ * - disable_anim_fast_forward: boolean - 是否禁用动画快进
+ * - animation_reset_name: string - 重置动画的名称
+ * - ignored: boolean - 是否忽略该 UI 元素（默认值：false）
+ * - variables: array 或 object - 一组条件，用于更改变量的值
+ * - modifications: array - 允许修改资源包中的 UI 文件（最底层为原版资源包）
+ * - grid_position: Vector [row, column] - 控件在网格中的位置。此属性还允许修改硬编码网格中的特定网格项
+ * - collection_index: int - 控件在集合中的索引
+ */
+export class Control {
+    /**
+     * 设置控件的可见性。
+     * @param {boolean} visible - 控件是否可见（默认值：true）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setVisible(visible?: boolean): Control;
+    visible: boolean;
+    /**
+     * 设置控件的启用状态。
+     * @param {boolean} enabled - 控件是否启用（默认值：true）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setEnabled(enabled?: boolean): Control;
+    enabled: boolean;
+    /**
+     * 设置控件的层级（z-index）。
+     * @param {number} layer - 要设置的层级（默认值：0）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setLayer(layer?: number): Control;
+    layer: number;
+    /**
+     * 设置控件的透明度。
+     * @param {number} alpha - 要设置的透明度值（默认值：1.0）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setAlpha(alpha?: number): Control;
+    alpha: number;
+    /**
+     * 设置透明度是否应传播到子元素。
+     * @param {boolean} propagate - 透明度是否应传播（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setPropagateAlpha(propagate?: boolean): Control;
+    propagate_alpha: boolean;
+    /**
+     * 设置控件是否应裁剪其子元素。
+     * @param {boolean} clips - 控件是否应裁剪其子元素（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setClipsChildren(clips?: boolean): Control;
+    clips_children: boolean;
+    /**
+     * 设置控件是否允许裁剪。
+     * @param {boolean} allow - 是否允许裁剪（默认值：true）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setAllowClipping(allow?: boolean): Control;
+    allow_clipping: boolean;
+    /**
+     * 设置控件的裁剪偏移量。
+     * @param {number[]} offset - 裁剪偏移量，格式为 [x, y]（默认值：[0, 0]）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setClipOffset(offset?: number[]): Control;
+    clip_offset: number[];
+    /**
+     * 设置裁剪状态更改事件。
+     * @param {string} event - 裁剪状态更改时触发的事件名称
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setClipStateChangeEvent(event: string): Control;
+    clip_state_change_event: string;
+    /**
+     * 设置是否启用裁剪测试。
+     * @param {boolean} enable - 是否启用裁剪测试（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setEnableScissorTest(enable?: boolean): Control;
+    enable_scissor_test: boolean;
+    /**
+     * 设置控件的属性包。
+     * @param {object} bag - 要设置的属性包
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setPropertyBag(bag: object): Control;
+    property_bag: any;
+    /**
+     * 设置控件是否被选中。
+     * @param {boolean} selected - 控件是否被选中（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setSelected(selected?: boolean): Control;
+    selected: boolean;
+    /**
+     * 设置控件是否使用子元素的锚点。
+     * @param {boolean} use - 是否使用子元素的锚点（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setUseChildAnchors(use?: boolean): Control;
+    use_child_anchors: boolean;
+    /**
+     * 向控件添加子控件。
+     * @param {Control} control - 要添加的子控件
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    addControl(control: Control): Control;
+    controls: any[];
+    /**
+     * 设置控件的动画。
+     * @param {string[]} anims - 动画名称数组
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setAnimations(anims: string[]): Control;
+    anims: string[];
+    /**
+     * 设置是否禁用动画快进。
+     * @param {boolean} disable - 是否禁用动画快进（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setDisableAnimFastForward(disable?: boolean): Control;
+    disable_anim_fast_forward: boolean;
+    /**
+     * 设置动画重置名称。
+     * @param {string} name - 要重置的动画名称
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setAnimationResetName(name: string): Control;
+    animation_reset_name: string;
+    /**
+     * 设置是否忽略该控件。
+     * @param {boolean} ignored - 是否忽略该控件（默认值：false）
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setIgnored(ignored?: boolean): Control;
+    ignored: boolean;
+    /**
+     * 设置控件的变量。
+     * @param {object} variables - 要设置的变量
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setVariables(variables: object): Control;
+    variables: any;
+    /**
+     * 设置控件的修改项。
+     * @param {array} modifications - 要设置的修改项
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setModifications(modifications: any[]): Control;
+    modifications: any[];
+    /**
+     * 设置控件在网格中的位置。
+     * @param {number[]} position - 网格位置，格式为 [行, 列]
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setGridPosition(position: number[]): Control;
+    grid_position: number[];
+    /**
+     * 设置控件在集合中的索引。
+     * @param {number} index - 要设置的索引
+     * @returns {Control} 返回当前实例以支持链式调用
+     */
+    setCollectionIndex(index: number): Control;
+    collection_index: number;
+}