new syntax elements: Inky integration

[solarnoon]

Hi! I'm working on adding new syntax to the parser/compiler in ink, specifically for use in inky, that will indicate inky should insert some sort of alternative user input element, such as a text box, multiple select, and so on. (this is for a specific project where I know who'll be using this feature and how it'll be used, not for general use just yet, so it doesn't need to be airtight at the moment) Working on the compiler and parser is coming along, and getting easier as I get more familiar with the code base.

My issue is when I get to working on having Inky handle the new elements. Javascript is not my forte and I can't make heads or tails of Inky's code flow, much less where I'd even start. I've got the project building, but that's the limit of my understanding. Could someone please give me a 10,000 ft overview of how the inky project is organized, or even just where the starting point is for the project? Or the code that actually decides what is displayed to the screen. Any of those would be immensely helpful. I just need some sort of foothold in the code base and I can learn my way around from there.

Thanks in advance!

[joethephish]

How about from 15,000 ft? :)

Inky is built using Electron, which generally have 2 sides (processes) to each app. The "renderer" process, which is like a web browser window, and the "main" process, which is more like a system process. The main process is used to communicate with the compiler (inklecate), and the majority of the rest of the code is run on the renderer side. Sometimes there are a bunch of hoops that need to be jumped through in order to communicate between the main and renderer process.

The top level file in the renderer is controller.js, which you can think of as a traditional model-view-controller controller. That's where everything is set up and passed down to each functional part of the app. The top level model part in this MVC model is the inkProject(.js) which in turn has a bunch of inkFile(.js).

On the view side, there's the editorView(.js) for the left hand pane, which is backed by the open source Ace text editor system, and the playerView(.js) for the right hand pane.

A good starting point for seeing how everything fits together would be to look in renderer/controller.js, since that's the top level point where everything is glued together.

I'm not sure what you mean by inserting text boxes / multiple select etc. Do you mean text syntax within ink, and you then want to preview them in the right hand player pane? (this is definitely doable, you'd want to modify addTextSection within playerView.js) If you mean some kind of UI in the left hand editor pane, that would be a lot more complicated, since it would involve interfacing with the Ace editor, which is quite complicated!

[solarnoon]

Thank you, this is exactly what I needed! :)

As for what I'm implementing, I'm adding text syntax within ink, and the changes shows up in the righthand player pane. Good to know it's doable, and thanks for giving me a starting point to work on it! I really appreciate it! 🙏🏼