tgui part of tgstation/tgstation#67691 and tgstation/tgstation#66971

code/modules/tgui/tgui.dm

@@ -37,6 +37,8 @@
 	var/datum/ui_state/state = null
 	/// Rate limit client refreshes to prevent DoS.
 	COOLDOWN_DECLARE(refresh_cooldown)
+	/// Are byond mouse events beyond the window passed in to the ui
+	var/mouse_hooked = FALSE
 
 /**
  * public
@@ -94,6 +96,7 @@
 	window.acquire_lock(src)
 	if(!window.is_ready())
 		window.initialize(
+			strict_mode = TRUE,
 			fancy = user.client.prefs.tgui_fancy,
 			assets = list(
 				get_asset_datum(/datum/asset/simple/tgui),
@@ -111,6 +114,8 @@
 	window.send_message("update", get_payload(
 		with_data = TRUE,
 		with_static_data = TRUE))
+	if(mouse_hooked)
+		window.set_mouse_macro()
 	SStgui.on_open(src)
 
 	return TRUE
@@ -149,6 +154,19 @@
 /datum/tgui/proc/set_autoupdate(autoupdate)
 	src.autoupdate = autoupdate
 
+/**
+ * public
+ *
+ * Enable/disable passing through byond mouse events to the window
+ *
+ * required value bool Enable/disable hooking.
+ */
+/datum/tgui/proc/set_mouse_hook(value)
+	src.mouse_hooked = value
+	//Handle unhooking/hooking on already open windows ?
+
+
+
 /**
  * public
  *

code/modules/tgui/tgui_window.dm

@@ -18,11 +18,13 @@
 	var/message_queue
 	var/sent_assets = list()
 	// Vars passed to initialize proc (and saved for later)
+	var/initial_strict_mode
 	var/initial_fancy
 	var/initial_assets
 	var/initial_inline_html
 	var/initial_inline_js
 	var/initial_inline_css
+	var/mouse_event_macro_set = FALSE
 
 /**
  * public
@@ -47,11 +49,15 @@
  * state. You can begin sending messages right after initializing. Messages
  * will be put into the queue until the window finishes loading.
  *
- * optional assets list List of assets to inline into the html.
- * optional inline_html string Custom HTML to inject.
- * optional fancy bool If TRUE, will hide the window titlebar.
+ * optional strict_mode bool - Enables strict error handling and BSOD.
+ * optional fancy bool - If TRUE and if this is NOT a panel, will hide the window titlebar.
+ * optional assets list - List of assets to load during initialization.
+ * optional inline_html string - Custom HTML to inject.
+ * optional inline_js string - Custom JS to inject.
+ * optional inline_css string - Custom CSS to inject.
  */
 /datum/tgui_window/proc/initialize(
+		strict_mode = FALSE,
 		fancy = FALSE,
 		assets = list(),
 		inline_html = "",
@@ -79,6 +85,7 @@
 	// Generate page html
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
+	html = replacetextEx(html, "\[tgui:strictMode]", strict_mode)
 	// Inject assets
 	var/inline_assets_str = ""
 	for(var/datum/asset/asset in assets)
@@ -99,7 +106,7 @@
 		html = replacetextEx(html, "<!-- tgui:inline-html -->", inline_html)
 	// Inject inline JS
 	if (inline_js)
-		inline_js = "<script>\n[inline_js]\n</script>"
+		inline_js = "<script>\n'use strict';\n[inline_js]\n</script>"
 		html = replacetextEx(html, "<!-- tgui:inline-js -->", inline_js)
 	// Inject inline CSS
 	if (inline_css)
@@ -113,6 +120,20 @@
 	if(!is_browser)
 		winset(client, id, "on-close=\"uiclose [id]\"")
 
+/**
+ * public
+ *
+ * Reinitializes the panel with previous data used for initialization.
+ */
+/datum/tgui_window/proc/reinitialize()
+	initialize(
+		strict_mode = initial_strict_mode,
+		fancy = initial_fancy,
+		assets = initial_assets,
+		inline_html = initial_inline_html,
+		inline_js = initial_inline_js,
+		inline_css = initial_inline_css)
+
 /**
  * public
  *
@@ -196,6 +217,8 @@
 /datum/tgui_window/proc/close(can_be_suspended = TRUE)
 	if(!client)
 		return
+	if(mouse_event_macro_set)
+		remove_mouse_macro()
 	if(can_be_suspended && can_be_suspended())
 		log_tgui(client,
 			context = "[id]/close (suspending)",
@@ -346,15 +369,49 @@
 			client << link(href_list["url"])
 		if("cacheReloaded")
 			// Reinitialize
-			initialize(
-				fancy = initial_fancy,
-				assets = initial_assets,
-				inline_html = initial_inline_html,
-				inline_js = initial_inline_js,
-				inline_css = initial_inline_css)
+			reinitialize()
 			// Resend the assets
 			for(var/asset in sent_assets)
 				send_asset(asset)
 
 /datum/tgui_window/vv_edit_var(var_name, var_value)
 	return var_name != NAMEOF(src, id) && ..()
+
+
+
+/datum/tgui_window/proc/set_mouse_macro()
+	if(mouse_event_macro_set)
+		return
+
+	var/list/byondToTguiEventMap = list(
+		"MouseDown" = "byond/mousedown",
+		"MouseUp" = "byond/mouseup"
+	)
+
+	for(var/mouseMacro in byondToTguiEventMap)
+		var/command_template = ".output CONTROL PAYLOAD"
+		var/event_message = TGUI_CREATE_MESSAGE(byondToTguiEventMap[mouseMacro], null)
+		var target_control = is_browser \
+			? "[id]:update" \
+			: "[id].browser:update"
+		var/with_id = replacetext(command_template, "CONTROL", target_control)
+		var/full_command = replacetext(with_id, "PAYLOAD", event_message)
+
+		var/list/params = list()
+		params["parent"] = "default" //Technically this is external to tgui but whatever
+		params["name"] = mouseMacro
+		params["command"] = full_command
+
+		winset(client, "[mouseMacro]Window[id]Macro", params)
+	mouse_event_macro_set = TRUE
+
+/datum/tgui_window/proc/remove_mouse_macro()
+	if(!mouse_event_macro_set)
+		stack_trace("Unsetting mouse macro on tgui window that has none")
+	var/list/byondToTguiEventMap = list(
+		"MouseDown" = "byond/mousedown",
+		"MouseUp" = "byond/mouseup"
+	)
+	for(var/mouseMacro in byondToTguiEventMap)
+		winset(client, null, "[mouseMacro]Window[id]Macro.parent=null")
+	mouse_event_macro_set = FALSE

code/modules/tgui_panel/tgui_panel.dm

@@ -13,9 +13,9 @@
 	var/broken = FALSE
 	var/initialized_at
 
-/datum/tgui_panel/New(client/client)
+/datum/tgui_panel/New(client/client, id)
 	src.client = client
-	window = new(client, "browseroutput")
+	window = new(client, id)
 	window.subscribe(src, .proc/on_message)
 
 /datum/tgui_panel/Del()
@@ -42,9 +42,11 @@
 	sleep(1)
 	initialized_at = world.time
 	// Perform a clean initialization
-	window.initialize(assets = list(
-		get_asset_datum(/datum/asset/simple/tgui_panel),
-	))
+	window.initialize(
+		strict_mode = TRUE,
+		assets = list(
+			get_asset_datum(/datum/asset/simple/tgui_panel),
+		))
 	window.send_asset(get_asset_datum(/datum/asset/simple/namespaced/fontawesome))
 	window.send_asset(get_asset_datum(/datum/asset/simple/namespaced/tgfont))
 	window.send_asset(get_asset_datum(/datum/asset/spritesheet/chat))

tgui/global.d.ts

@@ -71,6 +71,18 @@ type ByondType = {
    */
   IS_LTE_IE11: boolean;
 
+  /**
+   * If `true`, unhandled errors and common mistakes result in a blue screen
+   * of death, which stops this window from handling incoming messages and
+   * closes the active instance of tgui datum if there was one.
+   *
+   * It can be defined in window.initialize() in DM, or changed in runtime
+   * here via this property to `true` or `false`.
+   *
+   * It is recommended that you keep this ON to detect hard to find bugs.
+   */
+  strictMode: boolean;
+
   /**
    * Makes a BYOND call.
    *

tgui/packages/common/random.ts

@@ -0,0 +1,33 @@
+import { clamp } from "./math";
+
+/**
+ * Returns random number between lowerBound exclusive and upperBound inclusive
+ */
+export const randomNumber = (lowerBound: number, upperBound: number) => {
+  return Math.random() * (upperBound - lowerBound) + lowerBound;
+};
+
+/**
+ * Returns random integer between lowerBound exclusive and upperBound inclusive
+ */
+export const randomInteger = (lowerBound: number, upperBound: number) => {
+  lowerBound = Math.ceil(lowerBound);
+  upperBound = Math.floor(upperBound);
+  return Math.floor(Math.random() * (upperBound - lowerBound) + lowerBound);
+};
+
+/**
+ * Returns random array element
+ */
+export const randomPick = <T>(array: T[]) => {
+  return array[Math.floor(Math.random() * array.length)];
+};
+
+/**
+ * Return 1 with probability P percent; otherwise 0
+ */
+export const randomProb = (probability: number) => {
+  const normalized = clamp(probability, 0, 100)/100;
+  return Math.random() <= normalized;
+};
+

tgui/packages/tgui/backend.ts

@@ -14,6 +14,7 @@
 import { perf } from 'common/perf';
 import { createAction } from 'common/redux';
 import { setupDrag } from './drag';
+import { globalEvents } from './events';
 import { focusMap } from './focus';
 import { createLogger } from './logging';
 import { resumeRenderer, suspendRenderer } from './renderer';
@@ -138,6 +139,14 @@ export const backendMiddleware = store => {
       return;
     }
 
+    if (type === "byond/mousedown") {
+      globalEvents.emit("byond/mousedown");
+    }
+
+    if (type === "byond/mouseup") {
+      globalEvents.emit("byond/mouseup");
+    }
+
     if (type === 'backend/suspendStart' && !suspendInterval) {
       logger.log(`suspending (${Byond.windowId})`);
       // Keep sending suspend messages until it succeeds.