import { FairyGUI, FairyEditor, UnityEngine, System } from 'csharp'; const puerts_1 = require("puerts"); const App = FairyEditor.App; App.pluginManager.LoadUIPackage(App.pluginManager.basePath + "/" + eval("__dirname") + '/CustomInspector') enum GradientDir { up = "up", down = "down", left = "left", right = "right", } class GradientColorInspector extends FairyEditor.View.PluginInspector { private check_vertical: FairyGUI.GButton; private check_horizontal: FairyGUI.GButton; private ctrl_vertical: FairyGUI.Controller; private ctrl_horizontal: FairyGUI.Controller; private inputs: { [key: string]: FairyEditor.Component.ColorInput } = {}; private colors: { [key: string]: UnityEngine.Color } = {}; private last_obj: FairyEditor.FObject; private readonly dirs = [GradientDir.up, GradientDir.left, GradientDir.right, GradientDir.down] private gradient_text: string; private readonly allowObjectTypes = ["text", "richtext", "inputtext", "Button", "Label"]; private color32List: System.Collections.Generic.List$1; public constructor() { super(); let List = puerts_1.$generic(System.Collections.Generic.List$1, UnityEngine.Color32); this.color32List = new List(); this.panel = FairyGUI.UIPackage.CreateObject("CustomInspector", "GradientColor").asCom; this.ctrl_vertical = this.panel.GetController("vertical"); this.ctrl_horizontal = this.panel.GetController("horizontal"); for (const key in this.dirs) { let dir = this.dirs[key] let n = this.panel.GetChild(dir) as FairyGUI.GComponent let input = n.GetChild("color") as FairyEditor.Component.ColorInput this.inputs[dir] = input; input.AddEventListener(FairyEditor.FEvents.SUBMIT, (context: FairyGUI.EventContext) => { console.log(dir, input.colorValue); this.set_color(dir, input.colorValue); }) } this.check_vertical = this.panel.GetChild("check_vertical").asButton; this.check_vertical.selected = false this.check_vertical.onChanged.Add(() => { let obj = App.activeDoc.inspectingTarget let color = this.get_object_color(obj); if (!this.colors[GradientDir.up]) { this.init_dir_color(GradientDir.up, color); } if (!this.colors[GradientDir.down]) { this.init_dir_color(GradientDir.down, color); } this.update_colors() }); this.check_horizontal = this.panel.GetChild("check_horizontal").asButton; this.check_horizontal.selected = false this.check_horizontal.onChanged.Add(() => { if (this.check_horizontal.selected) { let obj = App.activeDoc.inspectingTarget let color = this.get_object_color(obj); if (!this.colors[GradientDir.left]) { this.init_dir_color(GradientDir.left, color); } if (!this.colors[GradientDir.right]) { this.init_dir_color(GradientDir.right, color); } } this.update_colors() }); this.updateAction = () => { return this.update_colors(); }; } private get_text_field(gObject: FairyEditor.FObject): FairyEditor.FTextField { if (gObject.objectType != "component") { return gObject as FairyEditor.FTextField; } let gComponent = gObject as FairyEditor.FComponent; let gButton = gComponent.extention as FairyEditor.FButton; if (gButton != null) { console.log("gButton"); return gButton.GetTextField(); } let gLabel = gComponent.extention as FairyEditor.FLabel; if (gLabel != null) { console.log("gLabel"); return gLabel.GetTextField(); } return null; } private get_object_color(gObject: FairyEditor.FObject): UnityEngine.Color { let inputField = this.get_text_field(gObject); return inputField != null ? inputField.color : new UnityEngine.Color(1.0, 1.0, 1.0, 1.0); } private init_dir_color(dir: GradientDir, color: UnityEngine.Color) { this.colors[dir] = color; this.inputs[dir].colorValue = color } private update_colors(): boolean { let obj = App.activeDoc.inspectingTarget as FairyEditor.FObject; if (!obj) { return false; } let objTypeName = this.getObjectTypeName(obj); if (this.allowObjectTypes.indexOf(objTypeName) < 0) { return false; } if (obj != this.last_obj) { this.init_data(obj); this.last_obj = obj; this.update_color(obj, true); } else { this.update_color(obj, false); } return true; //if everything is ok, return false to hide the inspector } private set_color(dir: GradientDir, color: UnityEngine.Color) { if (this.colors[dir] == color) return; this.colors[dir] = color; this.update_colors() } private update_color(obj: FairyEditor.FObject, force: boolean) { let color = this.get_color_text() if (this.gradient_text == color) { if (!force) { return; } } else { this.gradient_text = color; let customData = obj.GetProperty("customData"); let customDataObj = null; if (customData != null && customData != "") { try { customDataObj = JSON.parse(obj.customData) } catch (error) { console.log("json error:", error) customDataObj = {}; } } else { customDataObj = {}; } if (color.length > 0) { customDataObj["gradient"] = color } else { delete customDataObj["gradient"] } let json = ""; if (Object.keys(customDataObj).length > 0) { json = JSON.stringify(customDataObj); } obj.docElement.SetProperty("customData", json); } let textField = this.get_text_field(obj); if (textField == null) { return; } let tf = textField.textFormat; tf.gradientColor = this.get_color32_array(); // textField.textFormat = tf; // 这里无法直接设置textFormat 用这种方式间接触发其更新 let text = textField.text; textField.text = ""; textField.text = text; } // 获取对象类型 private getObjectTypeName(gObject: FairyEditor.FObject): string { let gComponent = gObject as FairyEditor.FComponent; if (gComponent != null && gComponent.extention != null) { return gComponent.extention._type; } return gObject.objectType; } private get_color32_array(): System.Array$1 { if (!this.check_vertical.selected && !this.check_horizontal.selected) { return null; } this.color32List.Clear(); if (this.check_vertical.selected) { if (this.check_horizontal.selected) { this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.up))); // 左上角 this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.left))); // 左下角 this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.right))); // 右上角 this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.down))); // 右下角 } else { this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.up))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.down))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.up))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.down))); } } else if (this.check_horizontal.selected) { this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.left))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.left))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.right))); this.color32List.Add(this.get_color_32(this.get_dir_color(GradientDir.right))); } return this.color32List.ToArray(); } private get_color_text(): string { if (!this.check_vertical.selected && !this.check_horizontal.selected) return ""; let s = "" if (this.check_vertical.selected) { if (this.check_horizontal.selected) { s += FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.up)) // 左上角 s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.left)) // 左下角 s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.right)) // 右上角 s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.down)) // 右下角 } else { s += FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.up)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.down)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.up)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.down)) } } else if (this.check_horizontal.selected) { s += FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.left)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.left)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.right)) s += "," + FairyEditor.ColorUtil.ToHexString(this.get_dir_color(GradientDir.right)) } return s; } private get_color_32(c: UnityEngine.Color): UnityEngine.Color32 { let color32 = new UnityEngine.Color32(); color32.r = UnityEngine.Mathf.Round(UnityEngine.Mathf.Clamp01(c.r) * 255.0); color32.g = UnityEngine.Mathf.Round(UnityEngine.Mathf.Clamp01(c.g) * 255.0); color32.b = UnityEngine.Mathf.Round(UnityEngine.Mathf.Clamp01(c.b) * 255.0); color32.a = UnityEngine.Mathf.Round(UnityEngine.Mathf.Clamp01(c.a) * 255.0); return color32; } private get_dir_color(dir: GradientDir): UnityEngine.Color { if (this.colors[dir]) { return this.colors[dir] } let obj = App.activeDoc.inspectingTarget as FairyEditor.FTextField; return obj.color } private init_data(obj: FairyEditor.FObject) { // 使用customData // 使用ubb数据 // 使用文本颜色 // this.check_vertical.selected = false // this.check_horizontal.selected = false this.colors = {} this.gradient_text = "" let customData = obj.GetProperty("customData"); let customDataObj = null; if (customData != null && customData != "") { try { customDataObj = JSON.parse(obj.customData) } catch (error) { console.log("json error:", error) } } if (!customDataObj || !customDataObj.gradient) { this.check_vertical.selected = false; this.check_horizontal.selected = false; return; } this.gradient_text = customDataObj.gradient; let reg = /(#\w+)/g let r: RegExpExecArray | null; let i = 0 while (r = reg.exec(this.gradient_text)) { let color_hex = r[1]; let dir = this.dirs[i] this.colors[dir] = FairyEditor.ColorUtil.FromHexString(color_hex) this.inputs[dir].colorValue = this.colors[dir] i++ } // 顺序为 左上角、左下角、右上角、右下角 let color_left_up = FairyEditor.ColorUtil.ToHexString(this.colors[GradientDir.up]); let color_left_down = FairyEditor.ColorUtil.ToHexString(this.colors[GradientDir.left]); let color_right_up = FairyEditor.ColorUtil.ToHexString(this.colors[GradientDir.right]); let color_right_down = FairyEditor.ColorUtil.ToHexString(this.colors[GradientDir.down]); if (color_left_up == color_right_up && color_left_down == color_right_down) { this.check_horizontal.selected = false; } else { this.check_horizontal.selected = true; } if (color_left_up == color_left_down && color_right_up == color_right_down) { this.check_vertical.selected = false; } else { this.check_vertical.selected = true; } } } //Register a inspector App.inspectorView.AddInspector(() => new GradientColorInspector(), "GradientColorJS", "渐变"); //Condition to show it App.docFactory.ConnectInspector("GradientColorJS", "mixed", false, false);