contactjs
contactjs copied to clipboard
haxe version in progress
Started working on Haxe version still very early stages, setup documentation to test structures and started to create some typed structures. Very ugly still subject to extensive changes and many methods yet to be populated, but a start atleast.
https://github.com/nanjizal/contacthx
I think later it maybe possible to autogenerate TS externs ( or easier ) but not a priority, more interested in fitting it to haxe toolkits that also do js and c++. Be aware stil learning about your library so details maybe far from ideal in this code at moment.
It's not clear completely on how best to type some of the Objects. So first question in PointerListener was thinking to type eventHandlers...
import js.html.Event;
typedef EventHandler = ( Event ) -> Void;
class PointListener {
var eventHandlers = new Map<EventType,Array<EventHandler>>;
where EventType might be abstract enum that can be described from a string event.. trying to unpick the library. Can update my repo but some aspects can be much cleaner in haxe in removing events etc.. but its trying to find what some of the dynamic objects are really holding.
This sounds like a great project. I will add a typescript folder in the future and maybe will run into the same questions. I have no experience with haxe.
The purpose of PointerListener
is to listen to the native PointerEvents
and to spawn/destroy instances of Contact
and Gesture
subclasses. The Contact
object refers to one physical contact phenomenon (interaction of the user with the digital surface) and collects/holds data about this phenomenon, mainly by calculating vectors. Gesture
subclasses interpret the data collected by Contact
and determine if their definition is within the given parameters. If so, Gesture
subclasses emit events accordingly.
This somehow describes the larger architecture of the library. Of course there are some details which I did not mention, like the multi-pointer (multi-touch) stuff, which requires to keep track of pointers being added and removed during one contact phenomenon.
( In relation to TS bindings - https://github.com/elsassph/hxtsdgen )
What I was really asking about were the types, in JS you don't really think about the types that V8 or similar may try to optimise JS when running it. But for TS and Haxe types are important and while you can write in both dynamically that's normally avoided as V8 or similar engine for running JS can't optimise as well.
So instead of just using an Anonymous Object for eventHandler I was looking to use a Hash. https://code.haxe.org/category/beginner/maps.html
You seem to store the listener function in the eventHandler https://haxe.org/manual/types-function.html So in Haxe we can define a function's by it's type so for a simple black box function with input output
( input_type0 ) -> ( output_type )
So my guess is that you are storing an array of Functions with no return type
( js.html.Event ) -> Void
It may well be that js..html.Event is too general ( js.html.MouseEvent maybe an option ? ), but haxe JS api is rather verbose due to retro fitting types to untyped language, so sometimes some casting is needed between various js types that are similar. So we can type that
Array< ( js.html.Event ) -> Void >
but since will need to refer to the type in many places it makes sense to use a typedef
typedef EventHandler = ( Event ) -> Void;
For the hash/dictionary ( Map ) key you seem to use a String that describes the event like Tap. Commonly we use an enum. https://haxe.org/manual/types-enum-instance.html A trick one that is lighter is an abstact one, very similar but acts like enum when compiler is checking types and just uses a string at run time. So EventType the key type for the eventListeners might be something like https://github.com/nanjizal/contacthx/blob/main/src/contacthx/gesture/Gesture.hx
so in your PointerListener you have
eventListeners = {};
in haxe I may need fully defined type something along the lines of using a Map of gestures or event types holding arrays of listener functions
var eventListeners = new Map< contacthx.gesture.Gesture, Array< ( js.html.Event ) -> Void >();
with imports and typedef that is simpler
import contacthx.gesture.Gesture;
import js.html.Event;
typedef EventHandler = ( Event ) -> Void;
class PointerListener{
var eventListeners = new Map<Gesture,Array<EventHandler>();
public function new(){
}
// so we may want to get the eventListeners for Tip gesture
public function getTip(): Array<EventHandler>{
return eventListeners.get( Tip );
}
}
So what I am wanting to ask about is what some of the types might be, it' not always clear what type something is in JS but the author may know that the eventListeners variable is just a map holding the arrays of listeners, with a gesture key. Or maybe not.
Anyway you may have just had a crash course in Haxe typing! :)
What might be really useful for a Haxe port is if you had some Test examples as pure Javascript with no html or css ( unless created in the js ). I find it much simpler to translate to typed code and check my port, it's just awkward with css/html stuff when doing initial port, so if you do have time for some pure js demos.