snowkit / mint Goto Github PK
View Code? Open in Web Editor NEWA framework/renderer agnostic Minimal UI interface library for Haxe.
Home Page: http://snowkit.github.io/mint/
License: MIT License
A framework/renderer agnostic Minimal UI interface library for Haxe.
Home Page: http://snowkit.github.io/mint/
License: MIT License
Especially relates to basic text edit controls
Issue: Currently, the contents of the TextEdit control cannot be properly altered from code. Altering the TextEdit's label will only work until you start typing, where it will be replaced by the contents of the private 'edit' variable.
Desired Solution: Adding a .text property or set_text( text:String ) method so that the contents can be easily changed from code.
It seems the Mint Luxe renderer has no way to specify a custom font (and many other font properties like outline):
mint/mint/render/luxe/Label.hx
Lines 40 to 53 in 913b62b
@mrcdk seems to have a workaround that involves going to the Luxe scene and getting the entity to change the font but that's obviously not ideal:
https://github.com/mrcdk/ld33/blob/18dfcdec2a325dc7b4b4aa02991a6bab94115913/src/GameState.hx#L153-L155
relates to #10
When min - max range is more than 0 - 1, the value seems to only go up when dragging to left and right, not down to the left and up to the right as it should.
Would be handy if MINumber used min and max value from _options. As it is now only value is set from _options but not min and max for the number.
For flexibility the priority should be:
-> control.renderer
-> canvas.renderer
When picking which renderer handles the specific instance of the control.
This would be useful if you don't have the parent you want for a control available at the time you are creating the control.
Currently, if the parent specified at creation doesn't lead to the canvas, the constructor throws an error.
Trying to change state ( by pressing 0 or 9 ) in the new test gives an error.
Tested on Windows 10 , Edge and Chrome browsers.
Here is the output from Chrome console:
Uncaught Error: assertion(destroyed == false ( scroll1.container was already destroyed but is being interacted with ))
O @ minttest.min.js:3
get_children_bounds @ minttest.min.js:1
update_container @ minttest.min.js:10
refresh_scroll @ minttest.min.js:10
remove @ minttest.min.js:10
destroy @ minttest.min.js:1
destroy_children @ minttest.min.js:1
destroy @ minttest.min.js:1
destroy @ minttest.min.js:10
destroy_children @ minttest.min.js:1
change @ minttest.min.js:2
onkeyup @ minttest.min.js:2
onkeyup @ minttest.min.js:5
onkeyup @ minttest.min.js:4
dispatch_key_up_event @ minttest.min.js:20
on_keyup @ minttest.min.js:18
i @ minttest.min.js:1
Uncaught TypeError: Cannot read property 'listeners' of null
set_progress @ minttest.min.js:10
update @ minttest.min.js:21
update @ minttest.min.js:6
i @ minttest.min.js:1
emit @ minttest.min.js:3
update @ minttest.min.js:4
internal_tick_default @ minttest.min.js:4
internal_tick @ minttest.min.js:4
onevent @ minttest.min.js:17
dispatch_event @ minttest.min.js:17
loop @ minttest.min.js:18
i @ minttest.min.js:1
mint.Canvas doesnt react on mouseenter/leave due to the fact that it only checks its children for focus. While this makes sense for fullscreen GUIs, this fails when your canvas is only a small part of the screen or in my case a object in 3D space.
Given the assumption that all controls behave the same a canvas should be able to emit signals on mouseenter/leave and focus itself when no topmost child is found.
What do you think?
I think lime isn't forwarding them the same manner as nme does.
Currently mint.Window.close_button
is a Label. It should be an empty control like mint.Window.collapse_handle
in order to properly deal with its style in the renderer.
package;
import luxe.AppConfig;
import luxe.Input;
import luxe.Vector;
import mint.Button;
import mint.Canvas;
import mint.Dropdown;
import mint.render.luxe.Convert;
import mint.render.luxe.LuxeMintRender;
class Main extends luxe.Game
{
var canvas:Canvas;
public static inline var GAME_WIDTH:Int = 750;
public static var GAME_HEIGHT:Int;
override function ready()
{
// uncomment to see the error
/*var ss = Luxe.screen.size;
GAME_HEIGHT = Std.int(GAME_WIDTH / ss.x * ss.y);
Luxe.camera.size = new Vector(GAME_WIDTH, GAME_HEIGHT);
Luxe.camera.size_mode = fit;*/
var rendering = new LuxeMintRender();
canvas = new Canvas( {
name: 'canvas',
rendering: rendering,
x:0, y:0, w:500, h:500,
});
var dropdown = new mint.List({
parent: canvas,
name: 'dropdown',
x:0, y:200, w:200, h:150,
});
for(i in 0...8)
dropdown.add_item(new mint.Button({
parent: canvas,
name: 'dropdown button $i',
text: 'dropdown button $i',
x:0, y:0, w:100, h:32,
onclick: function(_,_) trace('clicked dropdownbutton! $i')
}));
}
override public function config(_config:AppConfig):AppConfig
{
_config.window.width = 530;
_config.window.height = 750;
_config.render.antialiasing = 4;
return _config;
}
override function onkeyup(e:KeyEvent)
{
if(e.keycode == Key.escape)
Luxe.shutdown();
}
override public function onmousedown(e:MouseEvent)
{
canvas.mousedown(Convert.mouse_event(e, Luxe.camera.view));
}
override public function onmouseup(e:MouseEvent)
{
canvas.mouseup(Convert.mouse_event(e, Luxe.camera.view));
}
override public function onmousewheel(e:MouseEvent)
{
canvas.mousewheel(Convert.mouse_event(e, Luxe.camera.view));
}
override public function onmousemove(e:MouseEvent)
{
canvas.mousemove(Convert.mouse_event(e, Luxe.camera.view));
}
override function update(dt:Float)
{
canvas.update(dt);
}
}
Currently there is no way of storing userdata in a control. There is ConfigOptions.options but that only allows to store rendering related data(the mint.render.Renderer
class can access this through @:allow
).
Thoughts?
If a control is capturing the focus/events via the canvas, and another control becomes captured, the original loses capture.
This should be straight forward to resolve, but creates some situations that appear buggy. For instance: dragging the scroll handle inside a dropdown, steals the capture from the dropdown, and it no longer gets the events it's expecting to be exclusive.
Getting:
Error: nanovg.c
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(275) : error C2275: 'NVGcompositeOperationState' : illegal use of this type as an expression
c:\haxetoolkit\haxe\lib\linc_nanovg\git\lib\nanovg\src\nanovg.h(120) : see declaration of 'NVGcompositeOperationState'
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(275) : error C2146: syntax error : missing ';' before identifier 'state'
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(275) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(276) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(276) : error C2224: left of '.srcRGB' must have struct/union type
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(277) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(277) : error C2224: left of '.dstRGB' must have struct/union type
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(278) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(278) : error C2224: left of '.srcAlpha' must have struct/union type
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(279) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(279) : error C2224: left of '.dstAlpha' must have struct/union type
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(280) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(280) : error C2440: 'return' : cannot convert from 'int' to 'NVGcompositeOperationState'
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(1040) : error C2275: 'NVGstate' : illegal use of this type as an expression
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(89) : see declaration of 'NVGstate'
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(1040) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(1041) : error C2065: 'state' : undeclared identifier
C:/HaxeToolkit/haxe/lib/linc_nanovg/git/lib/nanovg/src/nanovg.c(1041) : error C2223: left of '->compositeOperation' must point to struct/union
This is after adding Glew to the project.
Is there a prefered compiler for this ?
EditorRendering.hx:54: characters 19-111 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : luxe.Color } should be luxe.Rectangle
EditorRendering.hx:54: characters 19-111 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : luxe.Color } should be phoenix.Rectangle
EditorRendering.hx:54: characters 19-111 : For function argument '_rect'
EditorRendering.hx:55: characters 20-125 : { y : Float, x : Float, w : Int, visible : Bool, h : Int, color : luxe.Color } should be luxe.Rectangle
EditorRendering.hx:55: characters 20-125 : { y : Float, x : Float, w : Int, visible : Bool, h : Int, color : luxe.Color } should be phoenix.Rectangle
EditorRendering.hx:55: characters 20-125 : For function argument '_rect'
Main.hx:77: characters 8-27 : mint.Canvas has no field modal
Main.hx:90: characters 11-30 : mint.Canvas has no field modal
Main.hx:109: characters 8-27 : mint.Canvas has no field modal
Main.hx:266: characters 16-41 : mint.Canvas has no field reset_focus
When I scroll my mouse wheel 1 rev, the view move by 1 px.
and allow controls to opt in, defaulting to the canvas does_render flag
C:\HaxeToolkit\haxe\lib\mint/git/mint/render/luxe/Convert.hx:91: characters 17-25 : Only inline or read-only (default, never) fields can be used as a pattern
C:\HaxeToolkit\haxe\lib\mint/git/mint/render/luxe/Convert.hx:87: lines 87-104 : Missing return: mint.types.KeyCode
It tries to convert luxe's codes into mint's.
Need to delay till texture arrives, using texture.onload, but geometry is not created at that exact moment, maybe, so a possible geometry.oncreated might be required (and useful for other things, too).
It's weird
It's be cool if we have a Control.get("name") function that return a child with this name.
it's possible implementation
public function get( _name:String) {
return Lambda.find(children, function(child) {return child.name == _name;});
}
If you have:
The mouse propagation model would look for the highest control, and along the way would check for mouse input before continuing. This created #49 , #44 , #37 , and other issues, where the top control won't get the events it's meant to.
The correct approach is to get the highest control without caring for mouse input, the walking back up the parents looking for the first one that does have mouse input.
Currently, if a Mint control is added into a Luxe scene with a duplicate name, the scene will throw a warning.
It'd be great if Mint control options had the 'name_unique' parameter like Luxe objects have, so this is handled in the constructor.
Hi!
I've set the empty_luxe
project and called canvas.destroy_children()
here. When I click the button, the app crashes.
It seems that onmouseup
is set to null in the middle of the emit function. Maybe it is set to null in some of the listeners?
This is how I've traced the function and this is the result:
macro public function emit( ethis : Expr, args:Array<Expr> ) {
return macro {
var _idx = 0;
trace( 'out.ethis: '+$ethis );
var _count = $ethis.listeners.length;
trace( '_count: ' + _count );
while(_idx < _count) {
trace( 'while.0.in.ethis: '+$ethis );
var fn = $ethis.listeners[_idx];
if(fn != null) {
fn($a{args});
}
_idx++;
}
while(_count > 0) {
trace( 'while.1.in.ethis: '+$ethis );
var fn = $ethis.listeners[_count-1];
if(fn == null) $ethis.listeners.splice(_count-1, 1);
_count--;
}
}
} //emit
Signal.hx::51 out.ethis: { listeners : [<function>,<function>] } mint_luxe_empty.js:5140:2
Signal.hx::53 _count: 2 mint_luxe_empty.js:5140:2
Signal.hx::55 while.0.in.ethis: { listeners : [<function>,<function>] } mint_luxe_empty.js:5140:2
Signal.hx::64 while.1.in.ethis: { listeners : [null,null] } mint_luxe_empty.js:5140:2
Signal.hx::64 while.1.in.ethis: { listeners : [null]} mint_luxe_empty.js:5140:2
Signal.hx::64 while.1.in.ethis: null mint_luxe_empty.js:5140:2
TypeError: this.onmouseup is null[Learn More] mint_luxe_empty.js:527:8
mint_Control.prototype.mouseup http://localhost:40404/mint_luxe_empty.js:527:8
mint_focus_Focus.prototype.mouseup http://localhost:40404/mint_luxe_empty.js:15201:27
$bind/f http://localhost:40404/mint_luxe_empty.js:28157:233
mint_Canvas.prototype<.mouseup http://localhost:40404/mint_luxe_empty.js:1162:19
AutoCanvas.prototype<.conv_mouseup http://localhost:40404/mint_luxe_empty.js:1450:3
$bind/f http://localhost:40404/mint_luxe_empty.js:28157:233
luxe_Emitter.prototype.emit http://localhost:40404/mint_luxe_empty.js:3887:5
luxe_Input.prototype.onmouseup http://localhost:40404/mint_luxe_empty.js:6363:3
luxe_Engine.prototype<.onmouseup http://localhost:40404/mint_luxe_empty.js:5957:3
snow_systems_input_Input.prototype.dispatch_mouse_up_event http://localhost:40404/mint_luxe_empty.js:26892:3
snow_core_web_Runtime.prototype.setup_events/<
If add_item
is used on a mint.List
after its clip_with
is set, the child added does not have its own clip_with
set properly.
It's not as simple as it doesn't work when something's underneath it (like a panel or label), sometimes it works, sometimes it doesn't.
It appears to be random but there must be some criteria I'm not recongizing.
(EDIT - it appears if i hover over the control underneath first, then the scrollbar hover/click is never detected, if I avoid touching any of them then the scrollbar is functional)
I've also experienced a similar issue which is when the the scrollbar is in the bottom right, the handle for the window is clicked instead of the scrollbar.
The list's scroll should have higher click priority over all its contents, and a window's drag handle should have the least click priority over all its contents.
I work on my game, on I found some miss feature on TextEdit.
For the first, i've make some thing on mint.TextEdit.
I've add an another label, placeholder, and I only show it if text of TextEdit is empty.
Is it in the philosophy of mint ?
MITextAlign does nothing to MINumbers even though it is applied to _options in MINumber source code. The options or alignments do not seem to be passed on to the child label of the MINumber.
Such that modules can be used!
I have this piece of code and it keeps counting down after destroy()
is called
var w = new mint.Window({
parent: canvas,
name: 'window',
title: 'title',
options: {
color:new Color().rgb(0x121212),
color_titlebar:new Color().rgb(0x191919),
label: { color:new Color().rgb(0x06b4fb) },
close_button: { color:new Color().rgb(0x06b4fb) },
},
x:Luxe.screen.w*.25, y:Luxe.screen.h*.25, w:Luxe.screen.w*.5, h: Luxe.screen.h*.5,
w_min: 256, h_min:256,
collapsible:false, closable:true
});
var sec = 3;
var t = Luxe.timer.schedule(1, function(){
sec--;
trace('sec: $sec');
if (sec == 0) {
w.destroy();
}
}, true);
w.ondestroy.listen(function(){trace('destroyed'); t.stop();});
am I missing something?
The size and positioning of the window handle is hardcoded, which becomes problematic when using larger text sizes than the default, as the window title text can go out of the window handle.
Just updated (a few minutes ago) to latest snow/luxe and updated the ndlls also.
Getting this error in both web and native builds:
flow / build - running haxe ...
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Dropdown.hx:83: characters 19-118 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : phoenix.Color } should be luxe.Rectangle
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Dropdown.hx:83: characters 19-118 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : phoenix.Color } should be phoenix.Rectangle
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Dropdown.hx:83: characters 19-118 : For function argument '_rect'
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Window.hx:133: characters 19-116 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : phoenix.Color } should be luxe.Rectangle
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Window.hx:133: characters 19-116 : { y : Float, x : Float, w : Float, visible : Bool, h : Float, color : phoenix.Color } should be phoenix.Rectangle
C:/HaxeToolkit/haxe/lib/mint/git/mint/render/luxe/Window.hx:133: characters 19-116 : For function argument '_rect'
When I set the size of my ui batcher with device_pixel_ratio the label in scroll control not appear.
My snippet
import luxe.Input;
import luxe.Color;
import luxe.Vector;
import mint.Control;
import mint.types.Types;
import mint.render.luxe.*;
import mint.layout.margins.Margins;
import mint.focus.Focus;
import AutoCanvas;
class Main extends luxe.Game {
var canvas: AutoCanvas;
var rendering: LuxeMintRender;
override function config(config:luxe.AppConfig) {
return config;
} //config
override function ready() {
var ui_batch = Luxe.renderer.create_batcher({ name:'ui' ,camera:new phoenix.Camera(), layer:2});
rendering = new LuxeMintRender({ batcher:ui_batch });
ui_batch.view.viewport.set(0,0,Luxe.screen.w,Luxe.screen.h);
ui_batch.view.center.set_xy(Luxe.screen.w/(Luxe.screen.device_pixel_ratio*2),Luxe.screen.h/(Luxe.screen.device_pixel_ratio*2));
ui_batch.view.zoom = Luxe.screen.device_pixel_ratio;
canvas = new AutoCanvas({
name:'canvas',
rendering: rendering,
options: { color:new Color(1,1,1,0) },
x: 0, y:0, w: Luxe.screen.w/Luxe.screen.device_pixel_ratio, h: Luxe.screen.h/Luxe.screen.device_pixel_ratio
});
var chatWindow = new mint.Scroll({
parent: canvas,
name: 'chat_window',
x: 0, y:canvas.h-234, w: 344, h: 200,
options: {
color: new Color().set(0,0,0,0.5),
color_handles:new Color().rgb(0xcc0000)
},
});
var chatText = new mint.Label({
parent:canvas, name:'chat_text', text: "pwet", align: left, text_size:12,
w: chatWindow.w, h: chatWindow.h, //x:chatWindow.x, y:chatWindow.y,
align_vertical: TextAlign.top
});
chatText.set_pos(chatWindow.x, chatWindow.y);
} //ready
override function onkeyup( e:luxe.KeyEvent ) {
if(e.keycode == Key.escape) {
Luxe.shutdown();
}
} //onkeyup
} //Main
Hi,
I am not sure if this is a bug or not. But if I add a button inside a panel then the button don't react to mouse input.
However, if I place it inside a window then it act correctly.
Is it the intended behavior ?
and atm ctrl + scroll will scroll horizontally but that breaks in html5 because it zooms the page.
When you create a mint.Image you set the path to the texture in its ImageOptions.
mint.Image
itself defines the following @:isVar public var path (default, set) : String = '';
. This path is never set. I think the options should be parsed into the attribute in the constructor or accessed when reading/writing the attribute.
Edit: Upon closer review, the onchange
-Signal for the path is not created and wired up, too. So setting the Image.path
will result in a Null Object Reference
-Error.
Looks like the Image-class is not finished.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.