How does essential-esm-svelte App Position work?

I've had a look at the code but I can't for the life of me figure out how the height of the application is being adjusted. I can see how the height value is being generated and stored, but I don't see how that transform gets applied to change the height of the app?
9 Replies
TyphonJS (Michael)
Ah, now you are getting into deeper waters. It definitely is great that you are taking a look under the hood so to speak. The TRL Position / Application.position system is 100% divergent and highly tuned for performance yet still compatible w/ Foundry core within the Application v1 API. The TRL implementation for Postion is a custom Svelte store and replaces the plain object Application.position from Foundry core. The TRL Position implementation can be applied to any element. It is not just an essential-svelte-esm construct. There are several demos in essential-svelte-esm that show off the TRL Position system from a SvelteApplication -> Application (Foundry App v1) angle and other demos such as the box and carousel demos that highlight the Position system applied to adhoc elements / Svelte components. The TRL Position system is extremely optimized and provides a rendering pipeline for elements that includes validation of movement. It includes native tweening animation support that is more optimized than GSAP along w/ GSAP compatibility seen in the box / carousel demos. As far as height is concerned this is controlled through inline styles on the target element (a SvelteApplication or otherwise). All of the Position system code: https://github.com/typhonjs-fvtt-lib/svelte/tree/main/src/application/position Particularly where inline styles are set on a target element: https://github.com/typhonjs-fvtt-lib/svelte/blob/main/src/application/position/update/UpdateElementManager.js The Foundry core implementation is, uh, way behind in this department on many levels...
geoidesic
geoidesic17mo ago
Ok... but I'm specifically looking at this: https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/src/view/position/app-control/PositionAppShell.svelte ... and I'm not seeing how that links to what you described above?
TyphonJS (Michael)
const { top, left, width, height, rotateX, rotateY, rotateZ, scale, zIndex } = application.position.stores;
geoidesic
geoidesic17mo ago
But that's a store, which tracks the values. How is the store glued to the window's style? Or is that managed by Foundry? You said this As far as height is concerned this is controlled through inline styles on the target element (a SvelteApplication or otherwise). but I'm not seeing any inline styles in PositionAppShell
TyphonJS (Michael)
No Foundry involved at all. The TRL Position system replaces anything from Foundry core, but is backward compatible. The TRL Position implementation is 100% independent. The inline style modification of the target element / in this case the SvelteApplication / ApplicationShell -> elementRoot is connected to the individual stores being modified from application.position.stores. application.position is a TRL Position instance and there is a lot of code involved under the hood that gets triggered from changes of the exposed store state. If you directly set application.position.height = 500; that will do the same thing as if you had the height store and in a Svelte component set $height = 500. Or in the case of the demo the height store is bound to a slider / number input.
geoidesic
geoidesic17mo ago
Ok cool. I'll have a play with that, tx.
TyphonJS (Michael)
It's definitely fun to play around w/ the app-control demo in essential-svelte-esm. You'll notice that when scaling or rotating the app that the validation engine keeps the app within the bounds of the browser window regardless of transforms applied. This is something that stock Foundry has no capability to perform. All of this applies to any SvelteApplication using an ApplicationShell component in the primary template.
geoidesic
geoidesic17mo ago
I notice that dnd5e system changes the Application height for items on the Item Sheet when you move between the Details and Description tabs. Do you know if are they using this system to do that or is it some auto CSS thing? (I guess I'm wondering if I can mimic what they are doing or whether I need to model it according to essential-svelte-esm.)
TyphonJS (Michael)
It's a bit of hacky code in the 5e item sheet using the App v1 API. It looks like it doesn't do what is intended either in terms of potentially resetting height when the Description tab is selected again. IE once you select Details tab the app forever will remain at the expanded size unless manually manipulated. IMHO this is inaccurate UX. You can see the dnd5e item sheet here: https://github.com/foundryvtt/dnd5e/blob/master/module/applications/item/item-sheet.mjs Look at the setPosition method. It should also be noted that a hacky solution in the App v1 is that setPosition is called on tab changes. The tab handling built into the App v1 API in the base Application class:
/**
* Handle changes to the active tab in a configured Tabs controller
* @param {MouseEvent|null} event A left click event
* @param {Tabs} tabs The Tabs controller
* @param {string} active The new active tab name
* @protected
*/
_onChangeTab(event, tabs, active) {
this.setPosition();
}
/**
* Handle changes to the active tab in a configured Tabs controller
* @param {MouseEvent|null} event A left click event
* @param {Tabs} tabs The Tabs controller
* @param {string} active The new active tab name
* @protected
*/
_onChangeTab(event, tabs, active) {
this.setPosition();
}
This is just all super hacky... IMHO. ------- For TRL you can just set this.position.height = 'auto'; when a tab is selected assuming you are using some sort of tab component for Svelte. Eventually I'll be adding a tab component to svelte-standard. When selecting another tab that you want to explicitly set the height then: this.position.height = 400;
Want results from more Discord servers?
Add your server
More Posts
Can I mix and match standard foundry views with Svelte components?And if so, how so? E.g. on my items sheet I want to render the default ActiveEffects view on one of Is there a multi-select component?My system may require the assignment of one or more options, rather than just a single option for soHow to reset filter for Embedded collection?I'm trying to allow the items list to be filtered by tabs / buttons for the `type` of item, rather tCan't seem to write item values to the item database?I have this: ``` import ItemInput from "~/components/item/ItemInput.svelte"; <script> function uFor my next trick, I would like to create an inventory list of items from the characterI have access to the Actor documentStore but I'm really not too sure what to do with it to make a liRelease: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)Greets @FVTT ▹ Developer. I'm very happy to announce the availability of the latest TRL release. ThiHow to integrate TyphonJS Actor sheet with 3rd party modules?E.g. `Tokenizer` https://github.com/MrPrimate/tokenizer. I'm not sure if this is a TyphonJS / SvelteHow to include static assets?I tried adding an `/assets` folder to the project root, and referring to it like this: ``` <img How to get dev env Hot Module Reload working?What's the normal process for HMR? I tried `yarn dev` but it opens in a browser window and I therefIs there a way to get Pug templates working?According to the Vite github issues, it should just require `pug` to be installed. I've done that bu