sapdon 2.1.0 → 3.0.1

package/src/core/ui/elements/StackPanel.js

@@ -1,40 +0,0 @@
-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/src/core/ui/elements/UIElement.js

@@ -1,148 +0,0 @@
-
-/**
- * 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/src/core/ui/registry/UISystemRegistry.js

@@ -1,35 +0,0 @@
-import { UISystem } from "../systems/UISystem.js";
-
-export class UISystemRegistry {
-  // 私有静态字段
-  static #ui_system_map = new Map();
-  static #ui_def_list = [];
-
-  // 注册 UISystem
-  static registerUISystem(ui_system) {
-    if (!(ui_system instanceof UISystem)) {
-      throw new Error("参数必须是 UISystem 类的实例");
-    }
-    const ui_system_path = ui_system.path + ui_system.name + ".json";
-    this.#ui_system_map.set(ui_system_path, ui_system);
-  }
-
-  // 获取所有注册的 UISystem
-  static getUISystemList() {
-    return Array.from(this.#ui_system_map.values());
-  }
-
-  // 添加外部 UI 定义
-  static addOuterUIdefs(ui_defs) {
-    if (!Array.isArray(ui_defs)) {
-      throw new Error("参数必须是一个数组");
-    }
-    this.#ui_def_list = this.#ui_def_list.concat(ui_defs);
-  }
-
-  // 获取 UI 定义列表（剔除 "ui/server_form"）
-  static getUIdefList() {
-    const combinedList = this.#ui_def_list.concat(Array.from(this.#ui_system_map.keys()));
-    return combinedList.filter(item => item !== "ui/server_form");
-  }
-}

package/src/core/ui/systems/UISystem.js

@@ -1,46 +0,0 @@
-import { UISystemRegistry } from "../registry/UISystemRegistry.js";
-
-// UI 文件核心类
-export class UISystem {
-
-    constructor(identifier, path) {
-      this.identifier = identifier;
-      this.namespace = identifier.replace(":", "_");
-      this.name = identifier.split(':')[1];
-      this.path = path;
-      this.elements = new Map();
-      this.animations = new Map();
-
-      UISystemRegistry.registerUISystem(this);
-    }
-  
-    addElement(element) {
-        this.elements.set(element.id, element);
-        return this;
-    }
-
-    getElement(element_name){
-        return this.elements.get(element_name);
-    }
-
-
-    addAnimation(name,value){
-        this.animations.set(name,value);
-    }
-
-    getAnimation(animation_name){
-        return this.animations.get(animation_name);
-    }
-  
-    toJson() {
-        const ui = {namespace:this.namespace};
-        //序列化
-        this.elements.forEach((value,key)=>{
-            //console.log("elements key:",key)
-            console.log("elements value:",value);
-            ui[key] = value.serialize()[value.id]
-        })
-        console.log("ui:",ui)
-        return ui;
-    }
-}

package/src/core/ui/systems/guidebook.js

@@ -1,299 +0,0 @@
-import { ButtonMapping } from "../ButtonMapping.js";
-import { DataBindingObject } from "../DataBindingObject.js";
-import { Button } from "../elements/Button.js";
-import { Image } from "../elements/Image.js";
-import { Label } from "../elements/Label.js";
-import { Panel } from "../elements/Panel.js";
-import { StackPanel } from "../elements/StackPanel.js";
-import { UIElement } from "../elements/UIElement.js";
-import { Control } from "../Properties/Control.js";
-import { Input } from "../Properties/Input.js";
-import { Layout } from "../Properties/Layout.js";
-import { Sprite } from "../Properties/Sprite.js";
-import { Text } from "../Properties/Text.js";
-import { ServerUISystem } from "./server_form.js";
-import { UISystem } from "./UISystem.js";
-
-
-
-//表单按钮模板
-const form_button_template = new Button("form_button_template","common.button");
-      form_button_template.addVariable("default_texture|default","")
-      form_button_template.addVariable("hover_texture|default","")
-      form_button_template.addVariable("pressed_texture|default","")
-      form_button_template.addVariable("binding_button_text|default","")
-      form_button_template.dataBinding.addDataBinding(
-        new DataBindingObject().setBindingType("collection_details")
-        .setBindingCollectionName("form_buttons")
-      )
-      form_button_template.dataBinding.addDataBinding(
-        new DataBindingObject().setBindingType("collection")
-        .setBindingCollectionName("form_buttons")
-        .setBindingName("#form_button_text")
-      )
-      form_button_template.dataBinding.addDataBinding(
-        new DataBindingObject().setBindingType("view")
-        .setSourcePropertyName("($binding_button_text = #form_button_text)")
-        .setTargetPropertyName("#visible")
-      )
-      
-      form_button_template.addControls([
-        new Image("default").setSprite(
-            new Sprite().setTexture("$default_texture")
-        ),
-        new Image("hover").setSprite(
-            new Sprite().setTexture("$hover_texture")
-        ),
-        new Image("pressed").setSprite(
-            new Sprite().setTexture("$pressed_texture")
-        )
-      ])
-
-//f
-const form_button_panel = new Panel("form_button_factory").enableDebug()
-      form_button_panel.addProp("type","collection_panel")
-      form_button_panel.factory.setName("buttons").setControlName("$button_control");
-      form_button_panel.addProp("collection_name","form_buttons")
-      form_button_panel.dataBinding.addDataBinding(
-        new DataBindingObject().setBindingName("#form_button_length")
-        .setBindingNameOverride("#collection_length")
-      )
-
-const page_template = new StackPanel("page_template").setOrientation("horizontal")
-      .addVariable("page_left_content | default","")
-      .addVariable("page_right_content | default","")
-        .setLayout(
-            new Layout().setSize(["90%","90%"])
-        )
-        .addStack(["50%","100%"],
-            new UIElement("page_left",undefined,"$page_left_content").serialize()
-        )
-        .addStack(["50%","100%"],
-            new UIElement("page_right",undefined,"$page_right_content").serialize()
-        )
-        page_template.dataBinding.addDataBinding(
-            new DataBindingObject().setBindingType("view")
-            .setSourcePropertyName("($binding_text = #form_text)")
-            .setTargetPropertyName("#visible")
-        );
-
-
-
-
-export class Guidebook {
-    #bindingList = [];
-
-    constructor(identifier, path ){
-        this.system = new UISystem(identifier, path);
-
-        //init
-        this.#binding()
-        this.#addTemplate();
-        this.#updateSystem()
-    }
-
-    addPageBinding(page_name, left_control_name, right_control_name){
-        this.#bindingList.push({
-            page_name:page_name,
-            left_control_name:left_control_name,
-            right_control_name:right_control_name
-        })
-        //更新系统
-        this.#updateSystem();
-
-        return this;
-    }
-
-    addPage(page_name, left_control, right_control){
-        this.addPageBinding(
-            page_name,
-            left_control.name,
-            right_control.name
-        );
-        //添加元素
-        this.addElement(left_control)
-        this.addElement(right_control)
-
-        //更新系统
-        this.#updateSystem();
-
-        return this;
-    }
-
-    addElement(element){
-        this.system.addElement(element);
-        return this;
-    }
-
-    #binding(){
-        ServerUISystem.bindingTitlewithContent(
-            this.system.name,
-            `${this.system.namespace}.guidebook_root_panel`
-        )
-    }
-
-    #addTemplate(){
-        this.addElement(form_button_template);
-        this.addElement(form_button_panel)
-        this.addElement(page_template)
-
-        //
-        this.#updateSystem()
-    }
-    #updateSystem(){
-        const guidebook_root_panel = new Panel("guidebook_root_panel");
-
-        //开启调试框
-        //guidebook_root_panel.enableDebug()
-        //设置布局属性
-        guidebook_root_panel.setLayout(
-          new Layout().setSize([320,207])
-        )
-        //添加子元素
-        guidebook_root_panel.addControls([
-          //添加背景
-          new UIElement("book_background",undefined, "book.book_background"),
-          //添加书页
-          new StackPanel("book_page_stack_panel").setOrientation("horizontal")
-          .setLayout(
-              new Layout().setSize([320,207])
-          )
-          .addVariable("page_size",[160,207])
-          .addStack("$page_size",
-              new Panel("book_left_panel").addControls([
-                  {
-                      "page_crease_image@book.page_crease_left_image": {
-                        "size": [ "100% - 40px", "100% - 14px" ],
-                        "offset": [ 0, -2 ]
-                      }
-                  },
-                  {
-                      "page_edge_image@book.page_edge_left_image": {
-                        "size": [ "100% - 7px", "100% - 16px" ],
-                        "offset": [7,-1]
-                      }
-                  }
-              ]).serialize()
-          )
-          .addStack("$page_size",
-             new Panel("book_right_panel").addControls([
-                  {
-                      "page_crease_image@book.page_crease_right_image": {
-                        "size": [ "100% - 40px", "100% - 14px" ],
-                        "offset": [ 0, -2 ]
-                      }
-                  },
-                  {
-                      "page_edge_image@book.page_edge_right_image": {
-                        "size": [ "100% - 7px", "100% - 16px" ],
-                        "offset": [-7,-1]
-                      }
-                  }
-              ]).serialize()
-          ),
-          //添加书页内容
-          new Panel("page_content_root")
-          .setControl(
-              new Control().setLayer(5)
-          )
-          .setLayout(
-              new Layout().setSize(["90%","90%"])
-          )
-          .addControls([
-              new Panel("label_text_panel").setLayout(
-                new Layout().setSize([32,8]).setAnchorFrom("bottom_middle")
-                .setAnchorTo("bottom_middle")
-              ).addControl(
-                new Label("page_content").setText(
-                    new Text().setText("#form_text").setColor([0,0,0])
-                )
-              )
-             ,
-              ...this.#bindingList.map(({page_name,left_control_name,right_control_name},index)=>{
-                return new UIElement(`page_index_${index}`,undefined,"page_template")
-                .addVariable("binding_text",page_name)
-                .addVariable("page_left_content",left_control_name)
-                .addVariable("page_right_content",right_control_name)
-              })
-              /*
-              new UIElement("page_1",undefined,"page_template")
-              .addVariable("binding_text","page_index1")
-              .addVariable("page_left_content","page_left_content")
-              .addVariable("page_right_content","page_right_content"),
-              new UIElement("page_2",undefined,"page_template")
-              .addVariable("binding_text","page_index2")
-              .addVariable("page_left_content","page_left_content")
-              .addVariable("page_right_content","page_right_content"),
-              new UIElement("page_3",undefined,"page_template")
-              .addVariable("binding_text","page_index3")
-              .addVariable("page_left_content","page_left_content")
-              .addVariable("page_right_content","page_right_content")*/
-  
-          ])
-          ,
-          //添加关闭按钮
-          new Button("close_button").setLayout(
-              new Layout().setSize([14,14])
-              .setAnchorFrom("top_right")
-              .setAnchorTo("top_right")
-          )
-          .setInput(
-              new Input().setButtonMappings([
-                  new ButtonMapping().setMappingType("pressed")
-                  .setFromButtonId("button.menu_select")
-                  .setToButtonId("button.menu_exit")
-              ])
-          )
-          .addControls([
-              new UIElement("default",undefined,"book.close_button_default"),
-              new UIElement("hover",undefined,"book.close_button_hover"),
-              new UIElement("pressed",undefined,"book.close_button_pressed"),
-          ]),
-          //添加下一页按钮
-          new Panel("prev_button_panel").enableDebug()
-          .setControl(
-              new Control().setLayer(5)
-          )
-          .setLayout(
-              new Layout().setSize([24,24])
-              .setOffset([7,-9])
-              .setAnchorFrom("bottom_left")
-              .setAnchorTo("bottom_left")
-          )
-          .addControl(
-              new UIElement("prev_button",undefined,"form_button_factory")
-              .addVariable("binding_button_text","test1")
-              .addVariable("button_control",`${this.system.namespace}.form_button_template`)
-              .addVariable("pressed_button_name", "button.form_button_click")
-              .addVariable("default_texture","textures/ui/book_pageleft_default")
-              .addVariable("hover_texture","textures/ui/book_pageleft_hover")
-              .addVariable("pressed_texture","textures/ui/book_pageleft_pressed")
-          )
-          ,
-          new Panel("next_button_panel").enableDebug()
-          .setControl(
-              new Control().setLayer(5)
-          )
-          .setLayout(
-              new Layout().setSize([24,24])
-              .setOffset([-7,-9])
-              .setAnchorFrom("bottom_right")
-              .setAnchorTo("bottom_right")
-          )
-          .addControl(
-              new UIElement("next_button",undefined,"form_button_factory")
-              .addVariable("binding_button_text","test2")
-              .addVariable("button_control","sapdon_guidebook.form_button_template")
-              .addVariable("pressed_button_name", "button.form_button_click")
-              .addVariable("default_texture","textures/ui/book_pageright_default")
-              .addVariable("hover_texture","textures/ui/book_pageright_hover")
-              .addVariable("pressed_texture","textures/ui/book_pageright_pressed")
-          )
-        ])
-
-        this.addElement(guidebook_root_panel)
-    }
-
-}
-
-

package/src/core/ui/systems/server_form.js

@@ -1,111 +0,0 @@
-import { Modifications, UIElement } from "../elements/UIElement.js";
-import { DataBindingObject } from "../DataBindingObject.js";
-import { UISystem } from "./UISystem.js";
-import { Panel } from "../elements/Panel.js";
-
-export const ServerFormSystem = new UISystem("server_form:server_form","ui/");
-
-export class ServerUISystem  {
-  static #binding_map = new Map();
-
-  static #binding_title_list = [];
-
-  static addBindingTitle(title_name){
-    this.#binding_title_list.push(title_name);
-  }
-
-  static getBindingTitleList(){
-    //console.log("arrr:",Array.from(this.#binding_map.keys()))
-    return  this.#binding_title_list.concat(Array.from(this.#binding_map.keys()));
-
-  }
-
-  static getBindingContentList(){
-    return  Array.from(this.#binding_map.values());
-  }
-
-  static bindingTitlewithContent(title_name, content){
-    //添加绑定
-    this.#binding_map.set(title_name,content);
-    this.#updateServerFormSystem();
-  }
-
-  static #updateServerFormSystem(){
-     //文本化处理
-    //console.log("ttttt:",this.getBindingTitleList())
-    const user_custom_ui_text = this.getBindingTitleList().map((title_name)=>{
-      console.log("title_name",title_name)
-      return `'${title_name}'`;
-    }).join('-');
-
-    const long_form = new UIElement("long_form")
-      .addModification({
-          array_name: "bindings",
-          operation:Modifications.OPERATION.INSERT_BACK,
-          value:[
-              new DataBindingObject().setBindingName("#title_text"),
-              new DataBindingObject().setBindingType("view")
-              .setSourcePropertyName(`((#title_text - ${user_custom_ui_text}) = #title_text)`)
-              .setTargetPropertyName("#visible")
-          ]
-      });
-
-    const custom_server_form_factory =  new Panel("custom_server_form_factory");
-        custom_server_form_factory.factory.setName("server_form_factory") //工程名被绑定至表单，不可改动
-        .setControlIds({"long_form": "@server_form.custom_root_panel"});
-
-    //加入自定义表单内容
-    const main_screen_content = new UIElement("main_screen_content")
-      .addModification({
-        array_name: "controls",
-        operation:Modifications.OPERATION.INSERT_BACK,
-        value:[
-          custom_server_form_factory.serialize()
-        ]
-    });
-
-    //自定义ui模板
-    const custom_ui_template = new Panel("custom_ui_template")
-        custom_ui_template.dataBinding.addDataBinding(
-          new DataBindingObject().setBindingName("#title_text")
-        ).addDataBinding(
-          new DataBindingObject().setBindingType("view")
-          .setSourcePropertyName("(#title_text = $binding_text)")
-          .setTargetPropertyName("#visible")
-        )
-        custom_ui_template.control.addControl(
-          new UIElement("main",undefined,"$main_content").serialize()
-        )
-
-    //类似于 root ，决定什么时候加载自定义界面 ，不可改动
-    const custom_form_root = new Panel("custom_form_root")
-        //custom_form_root.addVariable("title_needs_to_contain",user_custom_ui_text)
-        custom_form_root.dataBinding.addDataBinding(
-          new DataBindingObject().setBindingType("view")
-          .setSourceControlName("custom_root_panel")
-          .setSourcePropertyName(`(not ((#title_text - ${user_custom_ui_text}) = #title_text))`)
-          .setTargetPropertyName("#visible")
-        );
-
-    //用户自定义ui内容绑定
-    this.#binding_map.forEach((content,key)=>{
-      //加入 root
-      custom_form_root.control.addControl(
-        new UIElement("custom_ui_"+key,undefined,"custom_ui_template")
-        .addVariable("main_content",content)
-        .addVariable("binding_text",key).serialize()
-      )
-    })
-
-    //类似于 sreen，必要，不可改动
-    const custom_root_panel = new Panel("custom_root_panel");
-        custom_root_panel.dataBinding.addDataBinding(new DataBindingObject().setBindingName("#title_text"))
-        custom_root_panel.control.addControl(custom_form_root.serialize())
-    
-    ServerFormSystem
-    .addElement(custom_ui_template)   
-    .addElement(long_form)
-    .addElement(custom_root_panel)
-    .addElement(main_screen_content)
-  }
-}