Make the size of Door Control icons consistent

CHANGELOG.md

@@ -2,6 +2,7 @@
 ### New features
 - Tint secret doors grey for the GM to differentiate them from regular doors
 - Toggle doors between secret and normal with ctrl+click
+- Makes the size of door controls independent of the scene's grid size
 
 ## v1.0.1
 - When adding a door to a synchronization group adjust it's state to bring it in sync with the other doors

README.md

@@ -3,6 +3,11 @@ Makes doors smarter. Allows doors to synchronize across multiple scenes and send
 
 ## Feature overview
 
+### Consistent Door Control Size
+![Consistent Door Control Size demonstration](https://raw.githubusercontent.com/manuelVo/foundryvtt-smart-doors/e5b5c336d64f2b379914648f57aa07b6a69aadf1/media/door_control_size.webp)
+
+Door Control icons will be rendered the same size in every scene, regardless of the configured grid size. The size of the icons is configurable.
+
 ### Tint Secret Doors
 ![Tint Secret Doors demonstration](https://raw.githubusercontent.com/manuelVo/foundryvtt-smart-doors/dc5d328cd9bc4a0e2aacc5c86ab59e15739cc6d1/media/tint_secret_doors.webp)
 
@@ -34,7 +39,7 @@ To set up door synchronization, assign all doors that should be synchronized to
 
 Once a Synchronization Group is set up for multiple doors, simply open/close/lock/unlock one of the doors to achieve the same effect on other doors as well.
 
-## Planned features
+## Planned Features
 - Attach macros to doors that are being executed when the door is being opened/closed
 - Give out keys to players, that allow them to lock/unlock associated doors
 - Doors that can only be seen from one side when closed

lang/en.json

@@ -1,6 +1,10 @@
 {
     "smart-doors": {
 		"settings": {
+			"doorControlSizeFactor": {
+				"name": "Door Control Size Factor",
+				"hint": "Defines by which factor the size of the door control icons should be scaled up"
+			},
 			"highlightSecretDoors": {
 				"name": "Tint Secret Doors",
 				"hint": "Shade secret doors in a different color on the gm screen to differentiate them from normal doors"

main.js

@@ -7,6 +7,7 @@ Hooks.once("init", () => {
 	registerSettings()
 	hookDoorEvents()
 	hookWallConfigUpdate()
+	hookDoorControlDraw()
 })
 
 Hooks.once("ready", () => {
@@ -37,6 +38,48 @@ Hooks.on("renderChatMessage", (message, html, data) => {
 	html.on("mouseleave", mouseLeave);
 })
 
+// Adjust the repositioning formula for the door controls
+DoorControl.prototype.reposition = function () {
+	let gridSize = this.wall.scene.data.grid
+	gridSize *= game.settings.get(settingsKey, "doorControlSizeFactor")
+	const pos = this.wall.midpoint.map(p => p - gridSize * 0.2)
+	this.position.set(...pos)
+}
+
+function hookDoorControlDraw() {
+	const originalHandler = DoorControl.prototype.draw
+	DoorControl.prototype.draw = async function () {
+		const result = await originalHandler.call(this)
+		onDoorControlPostDraw.call(this)
+		return result
+	}
+}
+
+// Set the size of the door control in relation to the grid size so it'll have a constant percieved size
+function onDoorControlPostDraw() {
+	// If the canvas isn't ready we'll do this after the "canvasReady" event is fired instead
+	if (!canvas.ready)
+		return
+
+	fixDoorControlSize(this)
+}
+
+// Set the size of all door controls in relation to the grid size so it'll have a constant percieved size
+Hooks.on("canvasReady", (currentCanvas, wall, update) => {
+	const doors = currentCanvas.controls.doors.children
+	doors.forEach(control => fixDoorControlSize(control))
+})
+
+// Resizes the door control according to the grid size
+function fixDoorControlSize(control) {
+	let gridSize = control.wall.scene.data.grid
+	gridSize *= game.settings.get(settingsKey, "doorControlSizeFactor")
+	control.icon.width = control.icon.height = gridSize * 0.4
+	control.hitArea = new PIXI.Rectangle(gridSize * -0.02, gridSize * -0.02, gridSize * 0.44, gridSize * 0.44);
+    control.border.clear().lineStyle(1, 0xFF5500, 0.8).drawRoundedRect(gridSize * -0.02, gridSize * -0.02, gridSize * 0.44, gridSize * 0.44, gridSize * 0.05).endFill();
+	control.bg.clear().beginFill(0x000000, 1.0).drawRoundedRect(gridSize * -0.02, gridSize * -0.02, gridSize * 0.44, gridSize * 0.44, gridSize * 0.05).endFill();
+}
+
 const SECRET_DOOR_TINT = 0x222222
 
 // Tint all secret doors dark grey
@@ -326,6 +369,15 @@ function registerSettings() {
 		type: String,
 		default: "fresh install"
 	})
+	game.settings.register(settingsKey, "doorControlSizeFactor", {
+		name: "smart-doors.settings.doorControlSizeFactor.name",
+		hint: "smart-doors.settings.doorControlSizeFactor.hint",
+		scope: "client",
+		config: true,
+		type: Number,
+		default: 1.5,
+		onChange: () => location.reload()
+	})
 	game.settings.register(settingsKey, "highlightSecretDoors", {
 		name: "smart-doors.settings.highlightSecretDoors.name",
 		hint: "smart-doors.settings.highlightSecretDoors.hint",