TyphonJS•2y ago

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)•2y ago

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•2y 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)•2y ago

const { top, left, width, height, rotateX, rotateY, rotateZ, scale, zIndex } = application.position.stores;

geoidesic•2y 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)•2y ago

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•2y ago

Ok cool. I'll have a play with that, tx.

TyphonJS (Michael)•2y ago

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•2y 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)•2y ago

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;

Gaming

Programming

How does essential-esm-svelte App Position work?