forked from LeenkxTeam/LNXSDK
		
	
		
			
				
	
	
		
			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();
 | |
| 				}
 | |
| 			}
 | |
| 		}
 | |
| 	}
 | |
| }
 |