616 lines
21 KiB
Haxe
616 lines
21 KiB
Haxe
|
package lnx2d.ui;
|
||
|
|
|
||
|
|
// Kha
|
||
|
|
import kha.input.KeyCode;
|
||
|
|
|
||
|
|
// Zui
|
||
|
|
import zui.Id;
|
||
|
|
import zui.Zui;
|
||
|
|
import leenkx.ui.Popup;
|
||
|
|
import leenkx.ui.Canvas;
|
||
|
|
using zui.Ext;
|
||
|
|
using leenkx.ui.Ext;
|
||
|
|
|
||
|
|
// Editor
|
||
|
|
import lnx2d.tools.Math;
|
||
|
|
import lnx2d.tools.CanvasTools;
|
||
|
|
|
||
|
|
@:access(zui.Zui)
|
||
|
|
class UIProperties {
|
||
|
|
|
||
|
|
public static var hwin = Id.handle();
|
||
|
|
|
||
|
|
public static function renderProperties(ui:Zui, width:Int, canvas:TCanvas) {
|
||
|
|
|
||
|
|
if (ui.window(hwin, kha.System.windowWidth() - width, 0, width, kha.System.windowHeight())) {
|
||
|
|
|
||
|
|
var htab = Id.handle();
|
||
|
|
if (ui.tab(htab, "Project")) {
|
||
|
|
|
||
|
|
var hpath = Id.handle({text:""});
|
||
|
|
ui.textInput(hpath,"Current file");
|
||
|
|
if(hpath.changed){
|
||
|
|
Main.prefs.path = hpath.text;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.button("Save")) {
|
||
|
|
Assets.save(canvas);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(ui.button("Load")){
|
||
|
|
Assets.load(function(c:TCanvas){
|
||
|
|
Main.inst.canvas = c;
|
||
|
|
hwin.redraws = 2;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Canvas")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
if (ui.button("New")) {
|
||
|
|
canvas.elements = [];
|
||
|
|
Editor.selectedElem = null;
|
||
|
|
}
|
||
|
|
if (ui.isHovered) ui.tooltip("Create new canvas");
|
||
|
|
|
||
|
|
var handleName = Id.handle({text: canvas.name});
|
||
|
|
handleName.text = canvas.name;
|
||
|
|
ui.textInput(handleName, "Name", Right);
|
||
|
|
if (handleName.changed) {
|
||
|
|
// Themes file is called _themes.json, so canvases should not be named like that
|
||
|
|
if (handleName.text == "_themes") {
|
||
|
|
Popup.showMessage(new Zui(ui.ops), "Sorry!", "\"_themes\" is not a valid canvas name as it is reserved!");
|
||
|
|
handleName.text = canvas.name;
|
||
|
|
} else {
|
||
|
|
canvas.name = handleName.text;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
var handlecw = Id.handle({text: canvas.width + ""});
|
||
|
|
var handlech = Id.handle({text: canvas.height + ""});
|
||
|
|
handlecw.text = canvas.width + "";
|
||
|
|
handlech.text = canvas.height + "";
|
||
|
|
var strw = ui.textInput(handlecw, "Width", Right);
|
||
|
|
var strh = ui.textInput(handlech, "Height", Right);
|
||
|
|
canvas.width = Std.parseInt(strw);
|
||
|
|
canvas.height = Std.parseInt(strh);
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Outliner")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
function drawList(h:zui.Zui.Handle, elem:TElement) {
|
||
|
|
var b = false;
|
||
|
|
// Highlight
|
||
|
|
if (Editor.selectedElem == elem) {
|
||
|
|
ui.g.color = 0xff205d9c;
|
||
|
|
ui.g.fillRect(ui._x, ui._y, ui._w, ui.t.ELEMENT_H * ui.SCALE());
|
||
|
|
ui.g.color = 0xffffffff;
|
||
|
|
}
|
||
|
|
var started = ui.getStarted();
|
||
|
|
// Select
|
||
|
|
if (started && !ui.inputDownR) Editor.selectedElem = elem;
|
||
|
|
// Parenting
|
||
|
|
if (started && ui.inputDownR) {
|
||
|
|
if (elem == Editor.selectedElem) CanvasTools.unparent(canvas, elem);
|
||
|
|
else CanvasTools.setParent(canvas, Editor.selectedElem, elem);
|
||
|
|
}
|
||
|
|
// Draw
|
||
|
|
if (elem.children != null && elem.children.length > 0) {
|
||
|
|
ui.row([1/13, 12/13]);
|
||
|
|
b = ui.panel(h.nest(elem.id, {selected: true}), "", true, false, false);
|
||
|
|
ui.text(elem.name);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
ui._x += 18; // Sign offset
|
||
|
|
ui.text(elem.name);
|
||
|
|
ui._x -= 18;
|
||
|
|
}
|
||
|
|
// Draw children
|
||
|
|
if (b) {
|
||
|
|
var i = elem.children.length;
|
||
|
|
while(i > 0) {
|
||
|
|
i--; //Iterate backwards to avoid reparenting issues.
|
||
|
|
var id = elem.children[elem.children.length - 1 - i];
|
||
|
|
ui.indent();
|
||
|
|
drawList(h, CanvasTools.elemById(canvas, id));
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (canvas.elements.length > 0) {
|
||
|
|
for (i in 0...canvas.elements.length) {
|
||
|
|
var elem = canvas.elements[canvas.elements.length - 1 - i];
|
||
|
|
if (elem.parent == null) drawList(Id.handle(), elem);
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.row([1/4, 1/4, 1/4, 1/4]);
|
||
|
|
if (ui.button("Up") && Editor.selectedElem != null) {
|
||
|
|
CanvasTools.moveElem(canvas, Editor.selectedElem, 1);
|
||
|
|
}
|
||
|
|
if (ui.isHovered) ui.tooltip("Move element up");
|
||
|
|
|
||
|
|
if (ui.button("Down") && Editor.selectedElem != null) {
|
||
|
|
CanvasTools.moveElem(canvas, Editor.selectedElem,-1);
|
||
|
|
}
|
||
|
|
if (ui.isHovered) ui.tooltip("Move element down");
|
||
|
|
|
||
|
|
if (ui.button("Remove") && Editor.selectedElem != null) {
|
||
|
|
CanvasTools.removeElem(canvas, Editor.selectedElem);
|
||
|
|
Editor.selectedElem = null;
|
||
|
|
}
|
||
|
|
if (ui.isHovered) ui.tooltip("Delete element");
|
||
|
|
|
||
|
|
if (ui.button("Duplicate") && Editor.selectedElem != null) {
|
||
|
|
Editor.selectedElem = CanvasTools.duplicateElem(canvas, Editor.selectedElem);
|
||
|
|
}
|
||
|
|
if (ui.isHovered) ui.tooltip("Create duplicate of element");
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (Editor.selectedElem != null) {
|
||
|
|
var elem = Editor.selectedElem;
|
||
|
|
var id = elem.id;
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Properties")) {
|
||
|
|
ui.indent();
|
||
|
|
elem.visible = ui.check(Id.handle().nest(id, {selected: elem.visible == null ? true : elem.visible}), "Visible");
|
||
|
|
elem.name = ui.textInput(Id.handle().nest(id, {text: elem.name}), "Name", Right);
|
||
|
|
elem.text = ui.textInput(Id.handle().nest(id, {text: elem.text}), "Text", Right);
|
||
|
|
ui.row([1/4, 1/4, 1/4, 1/4]);
|
||
|
|
var handlex = Id.handle().nest(id, {text: elem.x + ""});
|
||
|
|
var handley = Id.handle().nest(id, {text: elem.y + ""});
|
||
|
|
// if (drag) {
|
||
|
|
handlex.text = elem.x + "";
|
||
|
|
handley.text = elem.y + "";
|
||
|
|
// }
|
||
|
|
var strx = ui.textInput(handlex, "X", Right);
|
||
|
|
var stry = ui.textInput(handley, "Y", Right);
|
||
|
|
elem.x = Std.parseFloat(strx);
|
||
|
|
elem.y = Std.parseFloat(stry);
|
||
|
|
// ui.row([1/2, 1/2]);
|
||
|
|
var handlew = Id.handle().nest(id, {text: elem.width + ""});
|
||
|
|
var handleh = Id.handle().nest(id, {text: elem.height + ""});
|
||
|
|
// if (drag) {
|
||
|
|
handlew.text = elem.width + "";
|
||
|
|
handleh.text = elem.height + "";
|
||
|
|
// }
|
||
|
|
var strw = ui.textInput(handlew, "W", Right);
|
||
|
|
var strh = ui.textInput(handleh, "H", Right);
|
||
|
|
elem.width = Std.int(Std.parseFloat(strw));
|
||
|
|
elem.height = Std.int(Std.parseFloat(strh));
|
||
|
|
if (elem.type == ElementType.Rectangle || elem.type == ElementType.Circle || elem.type == ElementType.Triangle || elem.type == ElementType.ProgressBar || elem.type == ElementType.CProgressBar){
|
||
|
|
var handles = Id.handle().nest(id, {text: elem.strength+""});
|
||
|
|
var strs = ui.textInput(handles, "Line Strength", Right);
|
||
|
|
elem.strength = Std.int(Std.parseFloat(strs));
|
||
|
|
}
|
||
|
|
if (elem.type == ElementType.ProgressBar || elem.type == ElementType.CProgressBar){
|
||
|
|
var handlep = Id.handle().nest(id, {value: elem.progress_at});
|
||
|
|
var slp = ui.slider(handlep, "Progress", 0.0, elem.progress_total, true, 1);
|
||
|
|
var handlespt = Id.handle().nest(id, {text: elem.progress_total+""});
|
||
|
|
var strpt = ui.textInput(handlespt, "Total Progress", Right);
|
||
|
|
elem.progress_total = Std.int(Std.parseFloat(strpt));
|
||
|
|
elem.progress_at = Std.int(slp);
|
||
|
|
}
|
||
|
|
var handlerot = Id.handle().nest(id, {value: Math.roundPrecision(Math.toDegrees(elem.rotation == null ? 0 : elem.rotation), 2)});
|
||
|
|
handlerot.value = Math.roundPrecision(Math.toDegrees(elem.rotation), 2);
|
||
|
|
// Small fix for radian/degree precision errors
|
||
|
|
if (handlerot.value >= 360) handlerot.value = 0;
|
||
|
|
elem.rotation = Math.toRadians(ui.slider(handlerot, "Rotation", 0.0, 360.0, true));
|
||
|
|
var assetPos = ui.combo(Id.handle().nest(id, {position: Assets.getAssetIndex(canvas, elem.asset)}), Assets.getEnumTexts(), "Asset", true, Right);
|
||
|
|
elem.asset = Assets.getEnumTexts()[assetPos];
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Color")){
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
function drawColorSelection(idMult: Int, color:Null<Int>, defaultColor:Int) {
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
|
||
|
|
var handleCol = Id.handle().nest(id).nest(idMult, {color: Canvas.getColor(color, defaultColor)});
|
||
|
|
ui.colorField(handleCol, true);
|
||
|
|
|
||
|
|
if (handleCol.changed) {
|
||
|
|
color = handleCol.color;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Follow theme color
|
||
|
|
if (ui.button("Reset") || color == null) {
|
||
|
|
color = null;
|
||
|
|
handleCol.color = defaultColor;
|
||
|
|
handleCol.changed = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return color;
|
||
|
|
}
|
||
|
|
|
||
|
|
var canvasTheme = Canvas.getTheme(canvas.theme);
|
||
|
|
|
||
|
|
switch(elem.type) {
|
||
|
|
case Text:
|
||
|
|
ui.text("Text:");
|
||
|
|
elem.color_text = drawColorSelection(1, elem.color_text, canvasTheme.TEXT_COL);
|
||
|
|
|
||
|
|
case Button:
|
||
|
|
ui.text("Text:");
|
||
|
|
elem.color_text = drawColorSelection(1, elem.color_text, canvasTheme.BUTTON_TEXT_COL);
|
||
|
|
ui.text("Background:");
|
||
|
|
elem.color = drawColorSelection(2, elem.color, canvasTheme.BUTTON_COL);
|
||
|
|
ui.text("On Hover:");
|
||
|
|
elem.color_hover = drawColorSelection(3, elem.color_hover, canvasTheme.BUTTON_HOVER_COL);
|
||
|
|
ui.text("On Pressed:");
|
||
|
|
elem.color_press = drawColorSelection(4, elem.color_press, canvasTheme.BUTTON_PRESSED_COL);
|
||
|
|
|
||
|
|
case Rectangle, FRectangle, Circle, FCircle, Triangle, FTriangle:
|
||
|
|
ui.text("Color:");
|
||
|
|
elem.color = drawColorSelection(1, elem.color, canvasTheme.BUTTON_COL);
|
||
|
|
|
||
|
|
case ProgressBar, CProgressBar:
|
||
|
|
ui.text("Progress:");
|
||
|
|
elem.color_progress = drawColorSelection(1, elem.color_progress, canvasTheme.TEXT_COL);
|
||
|
|
ui.text("Background:");
|
||
|
|
elem.color = drawColorSelection(2, elem.color, canvasTheme.BUTTON_COL);
|
||
|
|
|
||
|
|
case Check, TextInput, KeyInput, Combo, Slider:
|
||
|
|
ui.text("Text:");
|
||
|
|
elem.color_text = drawColorSelection(1, elem.color_text, canvasTheme.TEXT_COL);
|
||
|
|
ui.text("Background:");
|
||
|
|
elem.color = drawColorSelection(2, elem.color, canvasTheme.BUTTON_COL);
|
||
|
|
ui.text("On Hover:");
|
||
|
|
elem.color_hover = drawColorSelection(3, elem.color_hover, canvasTheme.BUTTON_HOVER_COL);
|
||
|
|
|
||
|
|
default:
|
||
|
|
ui.text("This element type has no color settings!");
|
||
|
|
|
||
|
|
}
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Align")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
var alignmentHandle = Id.handle().nest(id, {position: elem.alignment});
|
||
|
|
ui.row([1/3, 1/3, 1/3]);
|
||
|
|
ui.radio(alignmentHandle, 0, "Left");
|
||
|
|
ui.radio(alignmentHandle, 1, "Center");
|
||
|
|
ui.radio(alignmentHandle, 2, "Right");
|
||
|
|
Editor.selectedElem.alignment = alignmentHandle.position;
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Anchor")) {
|
||
|
|
ui.indent();
|
||
|
|
var hanch = Id.handle().nest(id, {position: elem.anchor});
|
||
|
|
ui.row([4/11,3/11,4/11]);
|
||
|
|
ui.radio(hanch, 0, "Top-Left");
|
||
|
|
ui.radio(hanch, 1, "Top");
|
||
|
|
ui.radio(hanch, 2, "Top-Right");
|
||
|
|
ui.row([4/11,3/11,4/11]);
|
||
|
|
ui.radio(hanch, 3, "Left");
|
||
|
|
ui.radio(hanch, 4, "Center");
|
||
|
|
ui.radio(hanch, 5, "Right");
|
||
|
|
ui.row([4/11,3/11,4/11]);
|
||
|
|
ui.radio(hanch, 6, "Bot-Left");
|
||
|
|
ui.radio(hanch, 7, "Bottom");
|
||
|
|
ui.radio(hanch, 8, "Bot-Right");
|
||
|
|
elem.anchor = hanch.position;
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Script")) {
|
||
|
|
ui.indent();
|
||
|
|
elem.event = ui.textInput(Id.handle().nest(id, {text: elem.event}), "Event", Right);
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Timeline")) {
|
||
|
|
// ui.indent();
|
||
|
|
// ui.row([1/2,1/2]);
|
||
|
|
// ui.button("Insert");
|
||
|
|
// ui.button("Remove");
|
||
|
|
// ui.unindent();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.tab(htab, "Themes")) {
|
||
|
|
// Must be accesible all over this place because when deleting themes,
|
||
|
|
// the color handle's child handle at that theme index must be reset.
|
||
|
|
var handleThemeColor = Id.handle();
|
||
|
|
var handleThemeName = Id.handle();
|
||
|
|
var iconSize = 16;
|
||
|
|
|
||
|
|
function drawList(h:zui.Zui.Handle, theme:zui.Themes.TTheme) {
|
||
|
|
// Highlight
|
||
|
|
if (Editor.selectedTheme == theme) {
|
||
|
|
ui.g.color = 0xff205d9c;
|
||
|
|
ui.g.fillRect(0, ui._y, ui._windowW, ui.t.ELEMENT_H * ui.SCALE());
|
||
|
|
ui.g.color = 0xffffffff;
|
||
|
|
}
|
||
|
|
// Highlight default theme
|
||
|
|
if (theme == Canvas.getTheme(canvas.theme)) {
|
||
|
|
var iconMargin = (ui.t.BUTTON_H - iconSize) / 2;
|
||
|
|
ui.g.drawSubImage(kha.Assets.images.icons, ui._x + iconMargin, ui._y + iconMargin, 0, 0, 16, 16);
|
||
|
|
}
|
||
|
|
|
||
|
|
var started = ui.getStarted();
|
||
|
|
// Select
|
||
|
|
if (started && !ui.inputDownR) Editor.selectedTheme = theme;
|
||
|
|
|
||
|
|
// Draw
|
||
|
|
ui._x += iconSize; // Icon offset
|
||
|
|
ui.text(theme.NAME);
|
||
|
|
ui._x -= iconSize;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (theme in Canvas.themes) drawList(Id.handle(), theme);
|
||
|
|
|
||
|
|
ui.row([1/4, 1/4, 1/4, 1/4]);
|
||
|
|
if (ui.button("Add")) {
|
||
|
|
var newTheme = Reflect.copy(leenkx.ui.Themes.light);
|
||
|
|
newTheme.NAME = CanvasTools.unique("New Theme", Canvas.themes, "NAME");
|
||
|
|
|
||
|
|
Canvas.themes.push(newTheme);
|
||
|
|
Editor.selectedTheme = newTheme;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (Editor.selectedTheme == null) ui.enabled = false;
|
||
|
|
if (ui.button("Copy")) {
|
||
|
|
var newTheme = Reflect.copy(Editor.selectedTheme);
|
||
|
|
newTheme.NAME = CanvasTools.unique(newTheme.NAME, Canvas.themes, "NAME");
|
||
|
|
|
||
|
|
Canvas.themes.push(newTheme);
|
||
|
|
Editor.selectedTheme = newTheme;
|
||
|
|
}
|
||
|
|
ui.enabled = true;
|
||
|
|
|
||
|
|
if (Editor.selectedTheme == null) ui.enabled = false;
|
||
|
|
var hName = handleThemeName.nest(Canvas.themes.indexOf(Editor.selectedTheme));
|
||
|
|
if (ui.button("Rename")) {
|
||
|
|
hName.text = Editor.selectedTheme.NAME;
|
||
|
|
Popup.showCustom(
|
||
|
|
new Zui(ui.ops),
|
||
|
|
function(ui:Zui) {
|
||
|
|
ui.textInput(hName);
|
||
|
|
if (ui.button("OK")) {
|
||
|
|
Popup.show = false;
|
||
|
|
hwin.redraws = 2;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
Std.int(ui.inputX), Std.int(ui.inputY), 200, 60);
|
||
|
|
}
|
||
|
|
if (Editor.selectedTheme != null) {
|
||
|
|
var name = Editor.selectedTheme.NAME;
|
||
|
|
if (hName.changed && Editor.selectedTheme.NAME != hName.text) {
|
||
|
|
name = CanvasTools.unique(hName.text, Canvas.themes, "NAME");
|
||
|
|
if (canvas.theme == Editor.selectedTheme.NAME) {
|
||
|
|
canvas.theme = name;
|
||
|
|
}
|
||
|
|
Editor.selectedTheme.NAME = name;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ui.enabled = true;
|
||
|
|
|
||
|
|
if (Canvas.themes.length == 1 || Editor.selectedTheme == null) ui.enabled = false;
|
||
|
|
if (ui.button("Delete")) {
|
||
|
|
handleThemeColor.unnest(Canvas.themes.indexOf(Editor.selectedTheme));
|
||
|
|
handleThemeName.unnest(Canvas.themes.indexOf(Editor.selectedTheme));
|
||
|
|
|
||
|
|
Canvas.themes.remove(Editor.selectedTheme);
|
||
|
|
|
||
|
|
// Canvas default theme was deleted
|
||
|
|
if (Canvas.getTheme(canvas.theme) == null) {
|
||
|
|
canvas.theme = Canvas.themes[0].NAME;
|
||
|
|
}
|
||
|
|
Editor.selectedTheme = null;
|
||
|
|
}
|
||
|
|
ui.enabled = true;
|
||
|
|
|
||
|
|
if (Editor.selectedTheme == null) ui.enabled = false;
|
||
|
|
if (ui.button("Apply to Canvas")) canvas.theme = Editor.selectedTheme.NAME;
|
||
|
|
|
||
|
|
ui.enabled = true;
|
||
|
|
|
||
|
|
if (Editor.selectedTheme == null) {
|
||
|
|
ui.text("Please select a Theme!");
|
||
|
|
} else {
|
||
|
|
// A Map would be way better, but its order is not guaranteed.
|
||
|
|
var themeColorOptions:Array<Array<String>> = [
|
||
|
|
["Text", "TEXT_COL"],
|
||
|
|
["Elements", "BUTTON_COL", "BUTTON_TEXT_COL", "BUTTON_HOVER_COL", "BUTTON_PRESSED_COL", "ACCENT_COL", "ACCENT_HOVER_COL", "ACCENT_SELECT_COL"],
|
||
|
|
["Other", "PANEL_BG_COL"],
|
||
|
|
];
|
||
|
|
|
||
|
|
for (idxCategory in 0...themeColorOptions.length) {
|
||
|
|
if (ui.panel(Id.handle().nest(idxCategory, {selected: true}), themeColorOptions[idxCategory][0])) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
var attributes = themeColorOptions[idxCategory].slice(1);
|
||
|
|
|
||
|
|
for (idxElemAttribs in 0...attributes.length) {
|
||
|
|
var themeColorOption = attributes[idxElemAttribs];
|
||
|
|
// is getField() better?
|
||
|
|
ui.row([2/3, 1/3]);
|
||
|
|
ui.text(themeColorOption);
|
||
|
|
|
||
|
|
var themeColor = Reflect.getProperty(Editor.selectedTheme, themeColorOption);
|
||
|
|
|
||
|
|
var handleCol = handleThemeColor.nest(Canvas.themes.indexOf(Editor.selectedTheme)).nest(idxCategory).nest(idxElemAttribs, {color: themeColor});
|
||
|
|
var col = ui.colorField(handleCol, true);
|
||
|
|
Reflect.setProperty(Editor.selectedTheme, themeColorOption, col);
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.tab(htab, "Assets")) {
|
||
|
|
if (ui.button("Import Asset")) {
|
||
|
|
Editor.showFiles = true;
|
||
|
|
Editor.foldersOnly = false;
|
||
|
|
Editor.filesDone = function(path:String) {
|
||
|
|
path = StringTools.rtrim(path);
|
||
|
|
path = Path.toRelative(path, Main.cwd);
|
||
|
|
Assets.importAsset(canvas, path);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (canvas.assets.length > 0) {
|
||
|
|
ui.text("(Drag and drop assets to canvas)", zui.Zui.Align.Center);
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Imported Assets")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
var i = canvas.assets.length - 1;
|
||
|
|
while (i >= 0) {
|
||
|
|
var asset = canvas.assets[i];
|
||
|
|
if (!Assets.isPathFont(asset.name) && ui.image(Assets.getImage(asset)) == State.Started) {
|
||
|
|
Editor.dragAsset = asset;
|
||
|
|
} else if (Assets.isPathFont(asset.name)) {
|
||
|
|
var oldFont = ui.ops.font;
|
||
|
|
var oldFontSize = ui.fontSize;
|
||
|
|
ui.ops.font = Assets.getFont(asset);
|
||
|
|
ui.fontSize = Std.int(32 * ui.SCALE());
|
||
|
|
ui.text(asset.name);
|
||
|
|
ui.ops.font = oldFont;
|
||
|
|
ui.fontSize = oldFontSize;
|
||
|
|
}
|
||
|
|
ui.row([7/8, 1/8]);
|
||
|
|
asset.name = ui.textInput(Id.handle().nest(asset.id, {text: asset.name}), "", Right);
|
||
|
|
Editor.assetNames[i + 1] = asset.name; // assetNames[0] == ""
|
||
|
|
if (ui.button("X")) {
|
||
|
|
Assets.getImage(asset).unload();
|
||
|
|
canvas.assets.splice(i, 1);
|
||
|
|
Editor.assetNames.splice(i + 1, 1);
|
||
|
|
}
|
||
|
|
i--;
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else ui.text("(Drag and drop images and fonts here)", zui.Zui.Align.Center);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.tab(htab, "Preferences")) {
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Application")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
var hscale = Id.handle({value: 1.0});
|
||
|
|
ui.slider(hscale, "UI Scale", 0.5, 4.0, true);
|
||
|
|
if (hscale.changed && !ui.inputDown) {
|
||
|
|
ui.setScale(hscale.value);
|
||
|
|
Editor.windowW = Std.int(Editor.defaultWindowW * hscale.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
Main.prefs.window_vsync = ui.check(Id.handle({selected: true}), "VSync");
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Grid")) {
|
||
|
|
ui.indent();
|
||
|
|
var gsize = Id.handle({value: 20});
|
||
|
|
ui.slider(gsize, "Grid Size", 1, 128, true, 1);
|
||
|
|
if (gsize.changed) {
|
||
|
|
Editor.gridSize = Std.int(gsize.value);
|
||
|
|
Editor.redrawGrid = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
Editor.gridSnapPos = ui.check(Id.handle({selected: true}), "Grid Snap Position");
|
||
|
|
if (ui.isHovered) ui.tooltip("Snap the element's position to the grid");
|
||
|
|
Editor.gridSnapBounds = ui.check(Id.handle({selected: false}), "Grid Snap Bounds");
|
||
|
|
if (ui.isHovered) ui.tooltip("Snap the element's bounds to the grid");
|
||
|
|
Editor.gridUseRelative = ui.check(Id.handle({selected: true}), "Use Relative Grid");
|
||
|
|
if (ui.isHovered) ui.tooltip("Use a grid that's relative to the selected element");
|
||
|
|
|
||
|
|
Editor.useRotationSteps = ui.check(Id.handle({selected: false}), "Use Fixed Rotation Steps");
|
||
|
|
if (ui.isHovered) ui.tooltip("Rotate elements by a fixed step size");
|
||
|
|
var rotStepHandle = Id.handle({value: 15});
|
||
|
|
if (Editor.useRotationSteps) {
|
||
|
|
ui.slider(rotStepHandle, "Rotation Step Size", 1, 180, true, 1);
|
||
|
|
if (rotStepHandle.changed) {
|
||
|
|
Editor.rotationSteps = Math.toRadians(rotStepHandle.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
// if (ui.button("Save")) {
|
||
|
|
// #if kha_krom
|
||
|
|
// Krom.fileSaveBytes("config.lnx", haxe.io.Bytes.ofString(haxe.Json.stringify(leenkx.data.Config.raw)).getData());
|
||
|
|
// #end
|
||
|
|
// }
|
||
|
|
// ui.text("leenkx2d");
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: true}), "Shortcuts")){
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Select");
|
||
|
|
var selectMouseHandle = Id.handle({position: 0});
|
||
|
|
ui.combo(selectMouseHandle, ["Left Click", "Right Click"], "");
|
||
|
|
if (ui.isHovered) ui.tooltip("Mouse button used for element selection.");
|
||
|
|
if (selectMouseHandle.changed) {
|
||
|
|
Main.prefs.keyMap.selectMouseButton = ["Left", "Right"][selectMouseHandle.position];
|
||
|
|
}
|
||
|
|
|
||
|
|
ui.separator(8, false);
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Grab");
|
||
|
|
Main.prefs.keyMap.grabKey = ui.keyInput(Id.handle({value: KeyCode.G}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("Key used for grabbing elements");
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Rotate");
|
||
|
|
Main.prefs.keyMap.rotateKey = ui.keyInput(Id.handle({value: KeyCode.R}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("Key used for rotating elements");
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Size");
|
||
|
|
Main.prefs.keyMap.sizeKey = ui.keyInput(Id.handle({value: KeyCode.S}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("Key used for resizing elements");
|
||
|
|
|
||
|
|
ui.separator(8, false);
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Precision Transform");
|
||
|
|
Main.prefs.keyMap.slowMovement = ui.keyInput(Id.handle({value: KeyCode.Shift}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("More precise transformations");
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Invert Grid");
|
||
|
|
Main.prefs.keyMap.gridInvert = ui.keyInput(Id.handle({value: KeyCode.Control}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("Invert the grid setting");
|
||
|
|
|
||
|
|
ui.row([1/2, 1/2]);
|
||
|
|
ui.text("Invert Rel. Grid");
|
||
|
|
Main.prefs.keyMap.gridInvertRelative = ui.keyInput(Id.handle({value: KeyCode.Alt}), "Key");
|
||
|
|
if (ui.isHovered) ui.tooltip("Invert the relative grid setting");
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ui.panel(Id.handle({selected: false}), "Console")) {
|
||
|
|
ui.indent();
|
||
|
|
|
||
|
|
//ui.text(lastTrace);
|
||
|
|
ui.text("Mouse X: "+ ui.inputX);
|
||
|
|
ui.text("Mouse Y: "+ ui.inputY);
|
||
|
|
|
||
|
|
ui.unindent();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|