Update Files

This commit is contained in:
2025-01-22 16:18:30 +01:00
parent ed4603cf95
commit a36294b518
16718 changed files with 2960346 additions and 0 deletions

View File

@ -0,0 +1,520 @@
package leenkx.ui;
import zui.Zui;
using zui.GraphicsExtension;
@:access(zui.Zui)
class Canvas {
public static inline var defaultFontName = "font_default.ttf";
public static var assetMap = new Map<Int, Dynamic>(); // kha.Image | kha.Font
public static var themes = new Array<zui.Themes.TTheme>();
static var events:Array<String> = [];
public static var screenW = -1;
public static var screenH = -1;
public static var locale = "en";
public static var imageScaleQuality = kha.graphics2.ImageScaleQuality.Low;
static var _ui: Zui;
static var h = new zui.Zui.Handle(); // TODO: needs one handle per canvas
public static function draw(ui: Zui, canvas: TCanvas, g: kha.graphics2.Graphics): Array<String> {
events.resize(0);
if (!canvas.visible) return events;
screenW = kha.System.windowWidth();
screenH = kha.System.windowHeight();
_ui = ui;
g.end();
g.imageScaleQuality = Canvas.imageScaleQuality;
ui.begin(g); // Bake elements
g.begin(false);
ui.g = g;
for (elem in canvas.elements) {
if (elem.parent == null) drawElement(ui, canvas, elem);
}
g.end();
ui.end(); // Finish drawing
g.begin(false);
return events;
}
static function drawElement(ui: Zui, canvas: TCanvas, element: TElement, px = 0.0, py = 0.0) {
if (element == null || element.visible == false) return;
var anchorOffset = getAnchorOffset(canvas, element);
px += anchorOffset[0];
py += anchorOffset[1];
ui._x = canvas.x + scaled(element.x) + px;
ui._y = canvas.y + scaled(element.y) + py;
ui._w = scaled(element.width);
var rotated = element.rotation != null && element.rotation != 0;
if (rotated) ui.g.pushRotation(element.rotation, ui._x + scaled(element.width) / 2, ui._y + scaled(element.height) / 2);
var font = ui.ops.font;
var fontAsset = isFontAsset(element.asset);
if (fontAsset) ui.ops.font = getAsset(canvas, element.asset);
switch (element.type) {
case Text:
var prevFontSize = ui.fontSize;
var prevTEXT_COL = ui.t.TEXT_COL;
ui.fontSize = scaled(element.height);
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.text(getText(canvas, element), element.alignment);
ui.fontSize = prevFontSize;
ui.t.TEXT_COL = prevTEXT_COL;
case Button:
var prevELEMENT_H = ui.t.ELEMENT_H;
var prevBUTTON_H = ui.t.BUTTON_H;
var prevBUTTON_COL = ui.t.BUTTON_COL;
var prevBUTTON_TEXT_COL = ui.t.BUTTON_TEXT_COL;
var prevBUTTON_HOVER_COL = ui.t.BUTTON_HOVER_COL;
var prevBUTTON_PRESSED_COL = ui.t.BUTTON_PRESSED_COL;
ui.t.ELEMENT_H = element.height;
ui.t.BUTTON_H = element.height;
ui.t.BUTTON_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.BUTTON_TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).BUTTON_TEXT_COL);
ui.t.BUTTON_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
ui.t.BUTTON_PRESSED_COL = getColor(element.color_press, getTheme(canvas.theme).BUTTON_PRESSED_COL);
if (ui.button(getText(canvas, element), element.alignment)) {
var e = element.event;
if (e != null && e != "") events.push(e);
}
ui.t.ELEMENT_H = prevELEMENT_H;
ui.t.BUTTON_H = prevBUTTON_H;
ui.t.BUTTON_COL = prevBUTTON_COL;
ui.t.BUTTON_TEXT_COL = prevBUTTON_TEXT_COL;
ui.t.BUTTON_HOVER_COL = prevBUTTON_HOVER_COL;
ui.t.BUTTON_PRESSED_COL = prevBUTTON_PRESSED_COL;
case Image:
var image = getAsset(canvas, element.asset);
if (image != null && !fontAsset) {
ui.imageScrollAlign = false;
var tint = element.color != null ? element.color : 0xffffffff;
if (ui.image(image, tint, scaled(element.height)) == zui.Zui.State.Released) {
var e = element.event;
if (e != null && e != "") events.push(e);
}
ui.imageScrollAlign = true;
}
case FRectangle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.fillRect(ui._x, ui._y, ui._w, scaled(element.height));
ui.g.color = col;
case FCircle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.fillCircle(ui._x + (scaled(element.width) / 2), ui._y + (scaled(element.height) / 2), ui._w / 2);
ui.g.color = col;
case Rectangle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.drawRect(ui._x, ui._y, ui._w, scaled(element.height), element.strength);
ui.g.color = col;
case Circle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.drawCircle(ui._x+(scaled(element.width) / 2), ui._y + (scaled(element.height) / 2), ui._w / 2, element.strength);
ui.g.color = col;
case FTriangle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.fillTriangle(ui._x + (ui._w / 2), ui._y, ui._x, ui._y + scaled(element.height), ui._x + ui._w, ui._y + scaled(element.height));
ui.g.color = col;
case Triangle:
var col = ui.g.color;
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.drawLine(ui._x + (ui._w / 2), ui._y, ui._x, ui._y + scaled(element.height), element.strength);
ui.g.drawLine(ui._x, ui._y + scaled(element.height), ui._x + ui._w, ui._y + scaled(element.height), element.strength);
ui.g.drawLine(ui._x + ui._w, ui._y + scaled(element.height), ui._x + (ui._w / 2), ui._y, element.strength);
ui.g.color = col;
case Check:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
ui.check(h.nest(element.id), getText(canvas, element));
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case Radio:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
zui.Ext.inlineRadio(ui, h.nest(element.id), getText(canvas, element).split(";"));
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case Combo:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevLABEL_COL = ui.t.LABEL_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevSEPARATOR_COL = ui.t.SEPARATOR_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.LABEL_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.SEPARATOR_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
ui.combo(h.nest(element.id), getText(canvas, element).split(";"));
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.LABEL_COL = prevLABEL_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.SEPARATOR_COL = prevSEPARATOR_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case Slider:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevLABEL_COL = ui.t.LABEL_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.LABEL_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
ui.slider(h.nest(element.id), getText(canvas, element), 0.0, 1.0, true, 100, true, element.alignment);
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.LABEL_COL = prevLABEL_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case TextInput:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevLABEL_COL = ui.t.LABEL_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.LABEL_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
ui.textInput(h.nest(element.id), getText(canvas, element), element.alignment);
if (h.nest(element.id).changed) {
var e = element.event;
if (e != null && e != "") events.push(e);
}
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.LABEL_COL = prevLABEL_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case TextArea:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevLABEL_COL = ui.t.LABEL_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.LABEL_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
if (element.editable == null) element.editable = true;
zui.Ext.textArea(ui, h.nest(element.id), element.alignment, element.editable, getText(canvas, element), true);
//handle does not change
if (h.nest(element.id).changed) {
var e = element.event;
if (e != null && e != "") events.push(e);
}
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.LABEL_COL = prevLABEL_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case KeyInput:
var prevTEXT_COL = ui.t.TEXT_COL;
var prevLABEL_COL = ui.t.LABEL_COL;
var prevACCENT_COL = ui.t.ACCENT_COL;
var prevACCENT_HOVER_COL = ui.t.ACCENT_HOVER_COL;
ui.t.TEXT_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.LABEL_COL = getColor(element.color_text, getTheme(canvas.theme).TEXT_COL);
ui.t.ACCENT_COL = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.t.ACCENT_HOVER_COL = getColor(element.color_hover, getTheme(canvas.theme).BUTTON_HOVER_COL);
Ext.keyInput(ui, h.nest(element.id), getText(canvas, element));
ui.t.TEXT_COL = prevTEXT_COL;
ui.t.LABEL_COL = prevLABEL_COL;
ui.t.ACCENT_COL = prevACCENT_COL;
ui.t.ACCENT_HOVER_COL = prevACCENT_HOVER_COL;
case ProgressBar:
var col = ui.g.color;
var progress = element.progress_at;
var totalprogress = element.progress_total;
ui.g.color = getColor(element.color_progress, getTheme(canvas.theme).TEXT_COL);
ui.g.fillRect(ui._x, ui._y, ui._w / totalprogress * Math.min(progress, totalprogress), scaled(element.height));
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.drawRect(ui._x, ui._y, ui._w, scaled(element.height), element.strength);
ui.g.color = col;
case CProgressBar:
var col = ui.g.color;
var progress = element.progress_at;
var totalprogress = element.progress_total;
ui.g.color = getColor(element.color_progress, getTheme(canvas.theme).TEXT_COL);
ui.g.drawArc(ui._x + (scaled(element.width) / 2), ui._y + (scaled(element.height) / 2), ui._w / 2, -Math.PI / 2, ((Math.PI * 2) / totalprogress * progress) - Math.PI / 2, element.strength);
ui.g.color = getColor(element.color, getTheme(canvas.theme).BUTTON_COL);
ui.g.fillCircle(ui._x + (scaled(element.width) / 2), ui._y + (scaled(element.height) / 2), (ui._w / 2) - 10);
ui.g.color = col;
case Empty:
}
ui.ops.font = font;
if (element.children != null) {
for (id in element.children) {
drawElement(ui, canvas, elemById(canvas, id), scaled(element.x) + px, scaled(element.y) + py);
}
}
if (rotated) ui.g.popTransformation();
}
/**
Parse the content of the given blob object and return a `TCanvas` object
from it.
**/
public static function parseCanvasFromBlob(blob: kha.Blob): TCanvas {
final raw: haxe.DynamicAccess<Dynamic> = haxe.Json.parse(blob.toString());
// Ensure TCanvas has all attributes even for older files
if (!raw.exists("visible")) {
raw.set("visible", true);
}
return (raw: Dynamic);
}
static inline function getText(canvas: TCanvas, e: TElement): String {
return e.text;
}
public static function getAsset(canvas: TCanvas, asset: String): Dynamic { // kha.Image | kha.Font {
for (a in canvas.assets) if (a.name == asset) return assetMap.get(a.id);
return null;
}
static var elemId = -1;
public static function getElementId(canvas: TCanvas): Int {
if (elemId == -1) for (e in canvas.elements) if (elemId < e.id) elemId = e.id;
return ++elemId;
}
static var assetId = -1;
public static function getAssetId(canvas: TCanvas): Int {
if (assetId == -1) for (a in canvas.assets) if (assetId < a.id) assetId = a.id;
return ++assetId;
}
static function elemById(canvas: TCanvas, id: Int): TElement {
for (e in canvas.elements) if (e.id == id) return e;
return null;
}
static inline function scaled(f: Float): Int {
return Std.int(f * _ui.SCALE());
}
public static inline function isFontAsset(assetName: Null<String>): Bool {
return assetName != null && StringTools.endsWith(assetName.toLowerCase(), ".ttf");
}
public static inline function getColor(color: Null<Int>, defaultColor: Int): Int {
return color != null ? color : defaultColor;
}
public static function getTheme(theme: String): zui.Themes.TTheme {
for (t in Canvas.themes) {
if (t.NAME == theme) return t;
}
return null;
}
/**
Returns the positional scaled offset of the given element based on its anchor setting.
@param canvas The canvas object
@param element The element
@return `Array<Float> [xOffset, yOffset]`
**/
public static function getAnchorOffset(canvas: TCanvas, element: TElement): Array<Float> {
var boxWidth, boxHeight: Float;
var offsetX = 0.0;
var offsetY = 0.0;
if (element.parent == null) {
boxWidth = canvas.width;
boxHeight = canvas.height;
}
else {
var parent = elemById(canvas, element.parent);
boxWidth = scaled(parent.width);
boxHeight = scaled(parent.height);
}
switch (element.anchor) {
case Top:
offsetX += boxWidth / 2 - scaled(element.width) / 2;
case TopRight:
offsetX += boxWidth - scaled(element.width);
case CenterLeft:
offsetY += boxHeight / 2 - scaled(element.height) / 2;
case Center:
offsetX += boxWidth / 2 - scaled(element.width) / 2;
offsetY += boxHeight / 2 - scaled(element.height) / 2;
case CenterRight:
offsetX += boxWidth - scaled(element.width);
offsetY += boxHeight / 2 - scaled(element.height) / 2;
case BottomLeft:
offsetY += boxHeight - scaled(element.height);
case Bottom:
offsetX += boxWidth / 2 - scaled(element.width) / 2;
offsetY += boxHeight - scaled(element.height);
case BottomRight:
offsetX += boxWidth - scaled(element.width);
offsetY += boxHeight - scaled(element.height);
}
return [offsetX, offsetY];
}
}
typedef TCanvas = {
var name: String;
var x: Float;
var y: Float;
var width: Int;
var height: Int;
var elements: Array<TElement>;
var theme: String;
var visible: Bool;
@:optional var assets: Array<TAsset>;
@:optional var locales: Array<TLocale>;
}
typedef TElement = {
var id: Int;
var type: ElementType;
var name: String;
var x: Float;
var y: Float;
var width: Int;
var height: Int;
@:optional var rotation: Null<kha.FastFloat>;
@:optional var text: String;
@:optional var event: String;
// null = follow theme settings
@:optional var color: Null<Int>;
@:optional var color_text: Null<Int>;
@:optional var color_hover: Null<Int>;
@:optional var color_press: Null<Int>;
@:optional var color_progress: Null<Int>;
@:optional var progress_at: Null<Int>;
@:optional var progress_total: Null<Int>;
@:optional var strength: Null<Int>;
@:optional var alignment: Null<Int>;
@:optional var anchor: Null<Int>;
@:optional var parent: Null<Int>; // id
@:optional var children: Array<Int>; // ids
@:optional var asset: String;
@:optional var visible: Null<Bool>;
@:optional var editable: Null<Bool>;
}
typedef TAsset = {
var id: Int;
var name: String;
var file: String;
}
typedef TLocale = {
var name: String; // "en"
var texts: Array<TTranslatedText>;
}
typedef TTranslatedText = {
var id: Int; // element id
var text: String;
}
@:enum abstract ElementType(Int) from Int to Int {
var Text = 0;
var Image = 1;
var Button = 2;
var Empty = 3;
// var HLayout = 4;
// var VLayout = 5;
var Check = 6;
var Radio = 7;
var Combo = 8;
var Slider = 9;
var TextInput = 10;
var KeyInput = 11;
var FRectangle = 12;
var Rectangle = 13;
var FCircle = 14;
var Circle = 15;
var FTriangle = 16;
var Triangle = 17;
var ProgressBar = 18;
var CProgressBar = 19;
var TextArea = 20;
}
@:enum abstract Anchor(Int) from Int to Int {
var TopLeft = 0;
var Top = 1;
var TopRight = 2;
var CenterLeft = 3;
var Center = 4;
var CenterRight = 5;
var BottomLeft = 6;
var Bottom = 7;
var BottomRight = 8;
}

View File

@ -0,0 +1,331 @@
package leenkx.ui;
import zui.Zui;
import kha.input.Keyboard;
import kha.input.KeyCode;
typedef ListOpts = {
?addCb: String->Void,
?removeCb: Int->Void,
?getNameCb: Int->String,
?setNameCb: Int->String->Void,
?getLabelCb: Int->String,
?itemDrawCb: Handle->Int->Void,
?showRadio: Bool, // false
?editable: Bool, // true
?showAdd: Bool, // true
?addLabel: String // 'Add'
}
@:access(zui.Zui)
class Ext {
public static function keyInput(ui: Zui, handle: Handle, label = "", align: Align = Left): Int {
if (!ui.isVisible(ui.ELEMENT_H())) {
ui.endElement();
return Std.int(handle.value);
}
var hover = ui.getHover();
if (hover && Zui.onTextHover != null) Zui.onTextHover();
ui.g.color = hover ? ui.t.ACCENT_HOVER_COL : ui.t.ACCENT_COL; // Text bg
ui.drawRect(ui.g, ui.t.FILL_ACCENT_BG, ui._x + ui.buttonOffsetY, ui._y + ui.buttonOffsetY, ui._w - ui.buttonOffsetY * 2, ui.BUTTON_H());
var startEdit = ui.getReleased() || ui.tabPressed;
if (ui.textSelectedHandle != handle && startEdit) ui.startTextEdit(handle);
if (ui.textSelectedHandle == handle) Ext.listenToKey(ui, handle);
else handle.changed = false;
if (label != "") {
ui.g.color = ui.t.LABEL_COL; // Label
var labelAlign = align == Align.Right ? Align.Left : Align.Right;
var xOffset = labelAlign == Align.Left ? 7 : 0;
ui.drawString(ui.g, label, xOffset, 0, labelAlign);
}
handle.text = Ext.keycodeToString(Std.int(handle.value));
ui.g.color = ui.t.TEXT_COL; // Text
ui.textSelectedHandle != handle ? ui.drawString(ui.g, handle.text, null, 0, align) : ui.drawString(ui.g, ui.textSelected, null, 0, align);
ui.endElement();
return Std.int(handle.value);
}
static function listenToKey(ui: Zui, handle: Handle) {
if (ui.isKeyDown) {
handle.value = ui.key;
handle.changed = ui.changed = true;
ui.textSelectedHandle = null;
ui.isTyping = false;
if (Keyboard.get() != null) Keyboard.get().hide();
}
else {
ui.textSelected = "Press a key...";
}
}
public static function list(ui: Zui, handle: Handle, ar: Array<Dynamic>, ?opts: ListOpts ): Int {
var selected = 0;
if (opts == null) opts = {};
var addCb = opts.addCb != null ? opts.addCb : function(name: String) ar.push(name);
var removeCb = opts.removeCb != null ? opts.removeCb : function(i: Int) ar.splice(i, 1);
var getNameCb = opts.getNameCb != null ? opts.getNameCb : function(i: Int) return ar[i];
var setNameCb = opts.setNameCb != null ? opts.setNameCb : function(i: Int, name: String) ar[i] = name;
var getLabelCb = opts.getLabelCb != null ? opts.getLabelCb : function(i: Int) return "";
var itemDrawCb = opts.itemDrawCb;
var showRadio = opts.showRadio != null ? opts.showRadio : false;
var editable = opts.editable != null ? opts.editable : true;
var showAdd = opts.showAdd != null ? opts.showAdd : true;
var addLabel = opts.addLabel != null ? opts.addLabel : "Add";
var i = 0;
while (i < ar.length) {
if (showRadio) { // Prepend ratio button
ui.row([0.12, 0.68, 0.2]);
if (ui.radio(handle.nest(0), i, "")) {
selected = i;
}
}
else ui.row([0.8, 0.2]);
var itemHandle = handle.nest(i);
itemHandle.text = getNameCb(i);
editable ? setNameCb(i, ui.textInput(itemHandle, getLabelCb(i))) : ui.text(getNameCb(i));
if (ui.button("X")) removeCb(i);
else i++;
if (itemDrawCb != null) itemDrawCb(itemHandle.nest(i), i - 1);
}
if (showAdd && ui.button(addLabel)) addCb("untitled");
return selected;
}
public static function panelList(ui: Zui, handle: Handle, ar: Array<Dynamic>,
addCb: String->Void = null,
removeCb: Int->Void = null,
getNameCb: Int->String = null,
setNameCb: Int->String->Void = null,
itemDrawCb: Handle->Int->Void = null,
editable = true,
showAdd = true,
addLabel: String = "Add") {
if (addCb == null) addCb = function(name: String) { ar.push(name); };
if (removeCb == null) removeCb = function(i: Int) { ar.splice(i, 1); };
if (getNameCb == null) getNameCb = function(i: Int) { return ar[i]; };
if (setNameCb == null) setNameCb = function(i: Int, name: String) { ar[i] = name; };
var i = 0;
while (i < ar.length) {
ui.row([0.12, 0.68, 0.2]);
var expanded = ui.panel(handle.nest(i), "");
var itemHandle = handle.nest(i);
editable ? setNameCb(i, ui.textInput(itemHandle, getNameCb(i))) : ui.text(getNameCb(i));
if (ui.button("X")) removeCb(i);
else i++;
if (itemDrawCb != null && expanded) itemDrawCb(itemHandle.nest(i), i - 1);
}
if (showAdd && ui.button(addLabel)) {
addCb("untitled");
}
}
public static function colorField(ui: Zui, handle:Handle, alpha = false): Int {
ui.g.color = handle.color;
ui.drawRect(ui.g, true, ui._x + 2, ui._y + ui.buttonOffsetY, ui._w - 4, ui.BUTTON_H());
ui.g.color = ui.getHover() ? ui.t.ACCENT_HOVER_COL : ui.t.ACCENT_COL;
ui.drawRect(ui.g, false, ui._x + 2, ui._y + ui.buttonOffsetY, ui._w - 4, ui.BUTTON_H(), 1.0);
if (ui.getStarted()) {
Popup.showCustom(
new Zui(ui.ops),
function(ui:Zui) {
zui.Ext.colorWheel(ui, handle, alpha);
},
Std.int(ui.inputX), Std.int(ui.inputY), 200, 500);
}
ui.endElement();
return handle.color;
}
public static function colorPicker(ui: Zui, handle: Handle, alpha = false): Int {
var r = ui.slider(handle.nest(0, {value: handle.color.R}), "R", 0, 1, true);
var g = ui.slider(handle.nest(1, {value: handle.color.G}), "G", 0, 1, true);
var b = ui.slider(handle.nest(2, {value: handle.color.B}), "B", 0, 1, true);
var a = handle.color.A;
if (alpha) a = ui.slider(handle.nest(3, {value: a}), "A", 0, 1, true);
var col = kha.Color.fromFloats(r, g, b, a);
ui.text("", Right, col);
return col;
}
/**
Keycodes can be found here: http://api.kha.tech/kha/input/KeyCode.html
**/
static function keycodeToString(keycode: Int): String {
return switch (keycode) {
default: String.fromCharCode(keycode);
case -1: "None";
case KeyCode.Unknown: "Unknown";
case KeyCode.Back: "Back";
case KeyCode.Cancel: "Cancel";
case KeyCode.Help: "Help";
case KeyCode.Backspace: "Backspace";
case KeyCode.Tab: "Tab";
case KeyCode.Clear: "Clear";
case KeyCode.Return: "Return";
case KeyCode.Shift: "Shift";
case KeyCode.Control: "Ctrl";
case KeyCode.Alt: "Alt";
case KeyCode.Pause: "Pause";
case KeyCode.CapsLock: "CapsLock";
case KeyCode.Kana: "Kana";
// case KeyCode.Hangul: "Hangul"; // Hangul == Kana
case KeyCode.Eisu: "Eisu";
case KeyCode.Junja: "Junja";
case KeyCode.Final: "Final";
case KeyCode.Hanja: "Hanja";
// case KeyCode.Kanji: "Kanji"; // Kanji == Hanja
case KeyCode.Escape: "Esc";
case KeyCode.Convert: "Convert";
case KeyCode.NonConvert: "NonConvert";
case KeyCode.Accept: "Accept";
case KeyCode.ModeChange: "ModeChange";
case KeyCode.Space: "Space";
case KeyCode.PageUp: "PageUp";
case KeyCode.PageDown: "PageDown";
case KeyCode.End: "End";
case KeyCode.Home: "Home";
case KeyCode.Left: "Left";
case KeyCode.Up: "Up";
case KeyCode.Right: "Right";
case KeyCode.Down: "Down";
case KeyCode.Select: "Select";
case KeyCode.Print: "Print";
case KeyCode.Execute: "Execute";
case KeyCode.PrintScreen: "PrintScreen";
case KeyCode.Insert: "Insert";
case KeyCode.Delete: "Delete";
case KeyCode.Colon: "Colon";
case KeyCode.Semicolon: "Semicolon";
case KeyCode.LessThan: "LessThan";
case KeyCode.Equals: "Equals";
case KeyCode.GreaterThan: "GreaterThan";
case KeyCode.QuestionMark: "QuestionMark";
case KeyCode.At: "At";
case KeyCode.Win: "Win";
case KeyCode.ContextMenu: "ContextMenu";
case KeyCode.Sleep: "Sleep";
case KeyCode.Numpad0: "Numpad0";
case KeyCode.Numpad1: "Numpad1";
case KeyCode.Numpad2: "Numpad2";
case KeyCode.Numpad3: "Numpad3";
case KeyCode.Numpad4: "Numpad4";
case KeyCode.Numpad5: "Numpad5";
case KeyCode.Numpad6: "Numpad6";
case KeyCode.Numpad7: "Numpad7";
case KeyCode.Numpad8: "Numpad8";
case KeyCode.Numpad9: "Numpad9";
case KeyCode.Multiply: "Multiply";
case KeyCode.Add: "Add";
case KeyCode.Separator: "Separator";
case KeyCode.Subtract: "Subtract";
case KeyCode.Decimal: "Decimal";
case KeyCode.Divide: "Divide";
case KeyCode.F1: "F1";
case KeyCode.F2: "F2";
case KeyCode.F3: "F3";
case KeyCode.F4: "F4";
case KeyCode.F5: "F5";
case KeyCode.F6: "F6";
case KeyCode.F7: "F7";
case KeyCode.F8: "F8";
case KeyCode.F9: "F9";
case KeyCode.F10: "F10";
case KeyCode.F11: "F11";
case KeyCode.F12: "F12";
case KeyCode.F13: "F13";
case KeyCode.F14: "F14";
case KeyCode.F15: "F15";
case KeyCode.F16: "F16";
case KeyCode.F17: "F17";
case KeyCode.F18: "F18";
case KeyCode.F19: "F19";
case KeyCode.F20: "F20";
case KeyCode.F21: "F21";
case KeyCode.F22: "F22";
case KeyCode.F23: "F23";
case KeyCode.F24: "F24";
case KeyCode.NumLock: "NumLock";
case KeyCode.ScrollLock: "ScrollLock";
case KeyCode.WinOemFjJisho: "WinOemFjJisho";
case KeyCode.WinOemFjMasshou: "WinOemFjMasshou";
case KeyCode.WinOemFjTouroku: "WinOemFjTouroku";
case KeyCode.WinOemFjLoya: "WinOemFjLoya";
case KeyCode.WinOemFjRoya: "WinOemFjRoya";
case KeyCode.Circumflex: "Circumflex";
case KeyCode.Exclamation: "Exclamation";
case KeyCode.DoubleQuote: "DoubleQuote";
case KeyCode.Hash: "Hash";
case KeyCode.Dollar: "Dollar";
case KeyCode.Percent: "Percent";
case KeyCode.Ampersand: "Ampersand";
case KeyCode.Underscore: "Underscore";
case KeyCode.OpenParen: "OpenParen";
case KeyCode.CloseParen: "CloseParen";
case KeyCode.Asterisk: "Asterisk";
case KeyCode.Plus: "Plus";
case KeyCode.Pipe: "Pipe";
case KeyCode.HyphenMinus: "HyphenMinus";
case KeyCode.OpenCurlyBracket: "OpenCurlyBracket";
case KeyCode.CloseCurlyBracket: "CloseCurlyBracket";
case KeyCode.Tilde: "Tilde";
case KeyCode.VolumeMute: "VolumeMute";
case KeyCode.VolumeDown: "VolumeDown";
case KeyCode.VolumeUp: "VolumeUp";
case KeyCode.Comma: "Comma";
case KeyCode.Period: "Period";
case KeyCode.Slash: "Slash";
case KeyCode.BackQuote: "BackQuote";
case KeyCode.OpenBracket: "OpenBracket";
case KeyCode.BackSlash: "BackSlash";
case KeyCode.CloseBracket: "CloseBracket";
case KeyCode.Quote: "Quote";
case KeyCode.Meta: "Meta";
case KeyCode.AltGr: "AltGr";
case KeyCode.WinIcoHelp: "WinIcoHelp";
case KeyCode.WinIco00: "WinIco00";
case KeyCode.WinIcoClear: "WinIcoClear";
case KeyCode.WinOemReset: "WinOemReset";
case KeyCode.WinOemJump: "WinOemJump";
case KeyCode.WinOemPA1: "WinOemPA1";
case KeyCode.WinOemPA2: "WinOemPA2";
case KeyCode.WinOemPA3: "WinOemPA3";
case KeyCode.WinOemWSCTRL: "WinOemWSCTRL";
case KeyCode.WinOemCUSEL: "WinOemCUSEL";
case KeyCode.WinOemATTN: "WinOemATTN";
case KeyCode.WinOemFinish: "WinOemFinish";
case KeyCode.WinOemCopy: "WinOemCopy";
case KeyCode.WinOemAuto: "WinOemAuto";
case KeyCode.WinOemENLW: "WinOemENLW";
case KeyCode.WinOemBackTab: "WinOemBackTab";
case KeyCode.ATTN: "ATTN";
case KeyCode.CRSEL: "CRSEL";
case KeyCode.EXSEL: "EXSEL";
case KeyCode.EREOF: "EREOF";
case KeyCode.Play: "Play";
case KeyCode.Zoom: "Zoom";
case KeyCode.PA1: "PA1";
case KeyCode.WinOemClear: "WinOemClear";
}
}
}

View File

@ -0,0 +1,127 @@
package leenkx.ui;
import zui.Zui;
import kha.System;
@:access(zui.Zui)
class Popup {
public static var show = false;
static var ui: Zui = null;
static var hwnd = new Handle();
static var boxTitle = "";
static var boxText = "";
static var boxCommands: Zui->Void = null;
static var modalX = 0;
static var modalY = 0;
static var modalW = 400;
static var modalH = 160;
public static function render(g: kha.graphics2.Graphics) {
if (boxCommands == null) {
ui.begin(g);
if (ui.window(hwnd, modalX, modalY, modalW, modalH)) {
drawTitle(g);
for (line in boxText.split("\n")) {
ui.text(line);
}
ui._y = ui._h - ui.t.BUTTON_H - 10;
ui.row([1/3, 1/3, 1/3]);
ui.endElement();
if (ui.button("OK")) {
show = false;
}
}
ui.end();
}
else {
ui.begin(g);
if (ui.window(hwnd, modalX, modalY, modalW, modalH)) {
drawTitle(g);
ui._y += 10;
boxCommands(ui);
}
ui.end();
}
}
public static function drawTitle(g: kha.graphics2.Graphics) {
if (boxTitle != "") {
g.color = ui.t.SEPARATOR_COL;
ui.drawRect(g, true, ui._x, ui._y, ui._w, ui.t.BUTTON_H);
g.color = ui.t.TEXT_COL;
ui.text(boxTitle);
}
}
public static function update() {
var inUse = ui.comboSelectedHandle != null;
// Close popup
if (ui.inputStarted && !inUse) {
if (ui.inputX < modalX || ui.inputX > modalX + modalW || ui.inputY < modalY || ui.inputY > modalY + modalH) {
show = false;
}
}
}
/**
Displays a message box with a title, a text body and a centered "OK" button.
@param ui the Zui instance for the popup
@param title the title to display
@param text the text to display
**/
public static function showMessage(ui: Zui, title: String, text: String) {
Popup.ui = ui;
init();
boxTitle = title;
boxText = text;
boxCommands = null;
}
/**
Displays a popup box with custom drawing code.
@param ui the Zui instance for the popup
@param commands the function for drawing the popup's content
@param mx the x position of the popup. -1 = screen center (defaults to -1)
@param my the y position of the popup. -1 = screen center (defaults to -1)
@param mw the width of the popup (defaults to 400)
@param mh the height of the popup (defaults to 160)
**/
public static function showCustom(ui: Zui, commands: Zui->Void = null, mx = -1, my = -1, mw = 400, mh = 160) {
Popup.ui = ui;
init(mx, my, mw, mh);
boxTitle = "";
boxText = "";
boxCommands = commands;
}
static function init(mx = -1, my = -1, mw = 400, mh = 160) {
var appW = System.windowWidth();
var appH = System.windowHeight();
modalX = mx;
modalY = my;
modalW = Std.int(mw * ui.SCALE());
modalH = Std.int(mh * ui.SCALE());
// Center popup window if no value is given
if (mx == -1) modalX = Std.int(appW / 2 - modalW / 2);
if (my == -1) modalY = Std.int(appH / 2 - modalH / 2);
// Limit popup position to screen
modalX = Std.int(Math.max(0, Math.min(modalX, appW - modalW)));
modalY = Std.int(Math.max(0, Math.min(modalY, appH - modalH)));
hwnd.dragX = 0;
hwnd.dragY = 0;
hwnd.scrollOffset = 0.0;
show = true;
}
}

View File

@ -0,0 +1,42 @@
package leenkx.ui;
import zui.Themes;
class Themes {
// 2x scaled, for games
public static var light: TTheme = {
NAME: "Default Light",
WINDOW_BG_COL: 0xffefefef,
WINDOW_TINT_COL: 0xff222222,
ACCENT_COL: 0xffeeeeee,
ACCENT_HOVER_COL: 0xffbbbbbb,
ACCENT_SELECT_COL: 0xffaaaaaa,
BUTTON_COL: 0xffcccccc,
BUTTON_TEXT_COL: 0xff222222,
BUTTON_HOVER_COL: 0xffb3b3b3,
BUTTON_PRESSED_COL: 0xffb1b1b1,
TEXT_COL: 0xff999999,
LABEL_COL: 0xffaaaaaa,
SEPARATOR_COL: 0xff999999,
HIGHLIGHT_COL: 0xff205d9c,
CONTEXT_COL: 0xffaaaaaa,
PANEL_BG_COL: 0xffaaaaaa,
FONT_SIZE: 13 * 2,
ELEMENT_W: 100 * 2,
ELEMENT_H: 24 * 2,
ELEMENT_OFFSET: 4 * 2,
ARROW_SIZE: 5 * 2,
BUTTON_H: 22 * 2,
CHECK_SIZE: 15 * 2,
CHECK_SELECT_SIZE: 8 * 2,
SCROLL_W: 6 * 2,
TEXT_OFFSET: 8 * 2,
TAB_W: 12 * 2,
FILL_WINDOW_BG: false,
FILL_BUTTON_BG: true,
FILL_ACCENT_BG: false,
LINK_STYLE: Line,
FULL_TABS: false
};
}