Fix alignment of HUD for non-square tokens; Adds 1x1 sizing option; f…

…ixes #35

module/lang/en.json

@@ -14,6 +14,9 @@
   "illandril-token-hud-scale.setting.enableStaticSizedHUD.label": "Static Sized HUD",
   "illandril-token-hud-scale.setting.enableStaticSizedHUD.hint": "Keep the size of the HUD consistent when you zoom in and out of the scene (as opposed to getting smaller as you zoom out from the scene, and larger as you zoom in). Note: You most likely will want to reduce Token HUD Buttons Scale to something below 1.5 if you enable this setting.",
 
+  "illandril-token-hud-scale.setting.enableOneXOneHUD.label": "1x1 Sized HUD",
+  "illandril-token-hud-scale.setting.enableOneXOneHUD.hint": "Size the HUD as if the token was a 1x1 token, regardless of the size of the token (gives more space for HUD elements for tiny tokens, and keeps the HUD closer to the token for large tokens).",
+
   "illandril-token-hud-scale.upgradeNotification.v2": "Illandril's Token HUD Scale has been updated. There have been significant changes to how Token HUD scaling works, so check your settings. Most will either want a Static Sized HUD with a lower (0.5-1.5) scale, or non-Static Sized HUD with a higher (1.5+) scale.",
 
   "illandril-token-hud-scale.setting.enableStatusSelectorScale.label": "Scale Status Effect Assignment Icons",

module/scripts/hud-button-scaler.js

@@ -2,19 +2,31 @@ import Settings, { SETTINGS_UPDATED } from './settings.js';
 
 const baselineSetPosition = TokenHUD.prototype.setPosition;
 const rescaleSetPosition = function () {
+  const hudButtonScale = Settings.HUDButtonScale.get()
+  const staticSizedHUD = Settings.EnableStaticSizedHUD.get();
+  const oneByOneHUD = Settings.EnableOneXOneHUD.get();
+
   const td = this.object.document;
   const ratio = canvas.dimensions.size / 100;
-  let scale = Settings.HUDButtonScale.get();
-  if (Settings.EnableStaticSizedHUD.get()) {
+  let scale = hudButtonScale;
+  if (staticSizedHUD) {
     scale /= canvas.stage.scale.x;
   }
   scale *= ratio;
-  const offset = td.width * (scale - ratio) * -50;
+
+  const tokenCenterX = this.object.x + td.width * ratio * 50;
+  const tokenCenterY = this.object.y + td.height * ratio * 50;
+  const widthInTiles = oneByOneHUD ? hudButtonScale : td.width;
+  const heightInTiles = oneByOneHUD ? hudButtonScale : td.height;
+  const width = widthInTiles * 100;
+  const height = heightInTiles * 100;
+  const left = tokenCenterX - widthInTiles * scale * 50;
+  const top = tokenCenterY - heightInTiles * scale * 50;
   const position = {
-    width: td.width * 100,
-    height: td.height * 100,
-    left: this.object.x + offset,
-    top: this.object.y + offset,
+    width,
+    height,
+    left,
+    top,
   };
   if (scale !== 1) position.transform = `scale(${scale})`;
   this.element.css(position);
@@ -27,7 +39,7 @@ const refresh = debounce(() => {
 }, 100);
 
 const updateSetPosition = () => {
-  if (Settings.EnableStaticSizedHUD.get() || Settings.HUDButtonScale.get() !== 1) {
+  if (Settings.EnableStaticSizedHUD.get() || Settings.EnableOneXOneHUD.get() || Settings.HUDButtonScale.get() !== 1) {
     TokenHUD.prototype.setPosition = rescaleSetPosition;
   } else {
     TokenHUD.prototype.setPosition = baselineSetPosition;

module/scripts/settings.js

@@ -101,6 +101,7 @@ const Settings = {
   EffectIconsLayout: new ChoiceSetting('effectIconsLayout', 'horizontal', EffectIconLayouts, { hasHint: true }),
   HUDButtonScale: new RangeSetting('hudButtonScale', 1.0, 0.25, 5, 0.25, { hasHint: true }),
   EnableStaticSizedHUD: new BooleanSetting('enableStaticSizedHUD', true, { hasHint: true }),
+  EnableOneXOneHUD: new BooleanSetting('enableOneXOneHUD', true, { hasHint: true }),
   EnableStatusSelectorScale: new BooleanSetting('enableStatusSelectorScale', true, {
     hasHint: true,
   }),