sapdon 2.0.2 → 2.1.0

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

@@ -0,0 +1,61 @@
+import { Control } from "../Properties/Control.js";
+import { DataBinding } from "../Properties/DataBinding.js";
+import { Factory } from "../Properties/Factory.js";
+
+import { Layout } from "../Properties/Layout.js";
+import { UIElement } from "./UIElement.js";
+
+export class CollectionPanel extends UIElement{
+    constructor(id,template){
+        super(id,"collection_panel",template);
+        this.control = new Control();
+        this.layout = new Layout();
+        this.dataBinding = new DataBinding();
+        this.factory = new Factory();
+    }
+    setCollectionName(collection_name){
+        this.addProp("collection_name",collection_name);
+        return this;
+    }
+
+    setLayout(layout){
+        if(!(layout instanceof Layout)) new Error("参数需要Layout类")
+        this.layout = layout;
+        return this;
+    }
+
+    serialize(){
+        //序列化
+
+        // 复制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/src/core/ui/elements/Grid.js

@@ -0,0 +1,24 @@
+import { GridProp } from "../Properties/gridProp.js";
+import { CollectionPanel } from "./CollectionPanel.js";
+
+export class Grid extends CollectionPanel{
+    constructor(id, template){
+        super(id,template);
+        this.grid = GridProp();
+    }
+    setGridProp(grid_prop){
+        this.grid = grid_prop;
+        return this;
+    }
+    serialize(){
+        
+        // 复制grid的属性
+        for (const key in this.grid) {
+            if (this.grid.hasOwnProperty(key)) {
+                this.properties.set(key, this.grid[key]);
+            }
+        }
+
+        return super.serialize();
+    }
+}

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

@@ -16,6 +16,10 @@ export class Image extends UIElement{
         this.dataBinding = new DataBinding();
         this.factory = new Factory();
     }
+    setSprite(sprite){
+        this.sprite = sprite;
+        return this;
+    }
     serialize(){
         //合并属性
 

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

@@ -16,6 +16,16 @@ export class Label extends UIElement{
         this.dataBinding = new DataBinding();
         this.factory = new Factory();
     }
+    setLayout(layout){
+        if(!(layout instanceof Layout)) new Error("参数需要Layout类")
+        this.layout = layout;
+        return this;
+    }
+    
+    setText(text){
+        this.text = text;
+        return this;
+    }
     serialize(){
         //合并属性
 
@@ -26,8 +36,6 @@ export class Label extends UIElement{
             }
         }
 
-        
-
         // 复制Layout的属性
         for (const key in this.layout) {
             if (this.layout.hasOwnProperty(key)) {

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

@@ -13,6 +13,13 @@ export class Panel extends UIElement{
         this.dataBinding = new DataBinding();
         this.factory = new Factory();
     }
+
+    setLayout(layout){
+        if(!(layout instanceof Layout)) new Error("参数需要Layout类")
+        this.layout = layout;
+        return this;
+    }
+
     serialize(){
         //序列化
 

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

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

@@ -0,0 +1,40 @@
+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

@@ -27,16 +27,57 @@
     screen - elements that are called by the game directly, usually root panel elements
  */
 
+import { Control } from "../Properties/Control.js";
+
+
+
 // 基础元素类
 export class UIElement {
-    constructor(id, type, template) {
+    constructor(name, type, template) {
         this.type = type;
-        this.id = template ? `${id}@${template}` : id;
+        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;

package/src/core/ui/registry/UISystemRegistry.js

@@ -0,0 +1,35 @@
+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,13 +1,17 @@
+import { UISystemRegistry } from "../registry/UISystemRegistry.js";
+
 // UI 文件核心类
 export class UISystem {
 
-    constructor(identity, path) {
-      this.identity = identity;
-      this.namespace = identity.split(':')[0];
-      this.name = identity.split(':')[1];
+    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) {
@@ -32,7 +36,7 @@ export class UISystem {
         const ui = {namespace:this.namespace};
         //序列化
         this.elements.forEach((value,key)=>{
-            console.log("elements key:",key)
+            //console.log("elements key:",key)
             console.log("elements value:",value);
             ui[key] = value.serialize()[value.id]
         })

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

@@ -0,0 +1,299 @@
+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)
+    }
+
+}
+
+