Adds support for dirs and config changing in GAGS debug menu (#58794)

Previously, the menu wouldn't show you the generation steps for icons other than the south dir icons. You can now specify which you want to see. In addition the config type itself can be changed so as to allow previewing of icons that normally are not displayed directly on the map.

Co-authored-by: Aleksej Komarov <stylemistake@gmail.com>

code/datums/greyscale/_greyscale_config.dm

@@ -158,7 +158,7 @@
 
 		// These are so we can see the result of every step of the process in the preview ui
 		if(render_steps)
-			render_steps[image(layer_icon)] = image(new_icon)
+			render_steps[icon(layer_icon)] = icon(new_icon)
 	return new_icon
 
 /datum/greyscale_config/proc/GenerateDebug(colors)

code/modules/admin/greyscale_modify_menu.dm

@@ -2,14 +2,17 @@
 	var/atom/target
 	var/client/user
 
+	var/datum/greyscale_config/config
 	var/list/split_colors
 
 	var/list/sprite_data
+	var/sprite_dir = SOUTH
 
 /datum/greyscale_modify_menu/New(atom/target, client/user)
 	src.target = target
 	src.user = user
 
+	config = SSgreyscale.configurations["[target.greyscale_config]"]
 	ReadColorsFromString(target.greyscale_colors)
 
 	refresh_preview()
@@ -35,14 +38,17 @@
 
 /datum/greyscale_modify_menu/ui_data(mob/user)
 	var/list/data = list()
+	data["greyscale_config"] = "[config.type]"
+
 	var/list/color_data = list()
 	data["colors"] = color_data
-	for(var/i in 1 to length(split_colors))
+	for(var/i in 1 to config.expected_colors)
 		color_data += list(list(
 			"index" = i,
 			"value" = split_colors[i]
 		))
 
+	data["sprites_dir"] = dir2text(sprite_dir)
 	data["sprites"] = sprite_data
 	return data
 
@@ -51,13 +57,33 @@
 	if(.)
 		return
 	switch(action)
+		if("select_config")
+			var/datum/greyscale_config/new_config = input(
+				usr,
+				"Choose a new greyscale configuration to use",
+				"Greyscale Modification Menu",
+				"[config.type]"
+			) as anything in SSgreyscale.configurations
+			new_config = SSgreyscale.configurations[new_config]
+			if(!isnull(new_config) && config != new_config)
+				config = new_config
+				refresh_preview()
+
+		if("load_config_from_string")
+			var/datum/greyscale_config/new_config = SSgreyscale.configurations[params["config_string"]]
+			if(!isnull(new_config) && config != new_config)
+				config = new_config
+				refresh_preview()
+
 		if("recolor")
 			var/index = text2num(params["color_index"])
 			split_colors[index] = lowertext(params["new_color"])
 			refresh_preview()
+
 		if("recolor_from_string")
 			ReadColorsFromString(lowertext(params["color_string"]))
 			refresh_preview()
+
 		if("pick_color")
 			var/group = params["color_index"]
 			var/new_color = input(
@@ -69,13 +95,20 @@
 			if(new_color)
 				split_colors[group] = new_color
 				refresh_preview()
+
 		if("apply")
+			target.set_greyscale_config(config.type, update=FALSE)
 			target.greyscale_colors = "" // We do this to force an update, in some cases it will think nothing changed when it should be refreshing
 			target.set_greyscale_colors(split_colors)
+
 		if("refresh_file")
 			SSgreyscale.RefreshConfigsFromFile()
 			refresh_preview()
 
+		if("change_dir")
+			sprite_dir = text2dir(params["new_sprite_dir"])
+			refresh_preview()
+
 /datum/greyscale_modify_menu/proc/ReadColorsFromString(colorString)
 	var/list/raw_colors = splittext(colorString, "#")
 	split_colors = list()
@@ -83,11 +116,21 @@
 		split_colors += "#[raw_colors[i]]"
 
 /datum/greyscale_modify_menu/proc/refresh_preview()
-	var/list/data = SSgreyscale.configurations["[target.greyscale_config]"].GenerateDebug(split_colors.Join())
+	for(var/i in length(split_colors) + 1 to config.expected_colors)
+		split_colors += rgb(100, 100, 100)
+	var/list/used_colors = split_colors.Copy(1, config.expected_colors+1)
+	var/list/data = config.GenerateDebug(used_colors.Join())
 
 	sprite_data = list()
 	var/list/steps = list()
 	sprite_data["steps"] = steps
 	for(var/step in data["steps"])
 		CHECK_TICK
-		steps += list(list("layer"=icon2html(data["steps"][step], user, sourceonly=TRUE), "result"=icon2html(step, user, sourceonly=TRUE)))
+		var/image/layer = image(data["steps"][step])
+		var/image/result = image(step)
+		steps += list(
+			list(
+				"layer"=icon2html(layer, user, dir=sprite_dir, sourceonly=TRUE),
+				"result"=icon2html(result, user, dir=sprite_dir, sourceonly=TRUE)
+			)
+		)

tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Box, Button, ColorBox, Flex, Icon, Input, LabeledList, Section, Stack, Table } from '../components';
+import { Box, Button, ColorBox, Flex, Icon, Input, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';
 
 type ColorEntry = {
@@ -18,10 +18,54 @@ type SpriteEntry = {
 }
 
 type GreyscaleMenuData = {
+  greyscale_config: string;
   colors: Array<ColorEntry>;
   sprites: SpriteData;
+  sprites_dir: string;
 }
 
+enum Direction {
+  North = "north",
+  NorthEast = "northeast",
+  East = "east",
+  SouthEast = "southeast",
+  South = "south",
+  SouthWest = "southwest",
+  West = "west",
+  NorthWest = "northwest"
+}
+
+const DirectionAbbreviation : Record<Direction, string> = {
+  [Direction.North]: "N",
+  [Direction.NorthEast]: "NE",
+  [Direction.East]: "E",
+  [Direction.SouthEast]: "SE",
+  [Direction.South]: "S",
+  [Direction.SouthWest]: "SW",
+  [Direction.West]: "W",
+  [Direction.NorthWest]: "NW",
+};
+
+const ConfigDisplay = (props, context) => {
+  const { act, data } = useBackend<GreyscaleMenuData>(context);
+  return (
+    <Section title="Config">
+      <LabeledList>
+        <LabeledList.Item label="Config Type">
+          <Button
+            icon="cogs"
+            onClick={() => act("select_config")}
+          />
+          <Input
+            value={data.greyscale_config}
+            onChange={(_, value) => act("load_config_from_string", { config_string: value })}
+          />
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};
+
 const ColorDisplay = (props, context) => {
   const { act, data } = useBackend<GreyscaleMenuData>(context);
   const colors = (data.colors || []);
@@ -46,7 +90,7 @@ const ColorDisplay = (props, context) => {
             />
             {" "}
             <Button
-              content={<Icon name="palette" />}
+              icon="palette"
               onClick={() => act("pick_color", { color_index: item.index })}
             />
             <Input
@@ -60,10 +104,56 @@ const ColorDisplay = (props, context) => {
   );
 };
 
+const PreviewCompassSelect = (props, context) => {
+  const { act, data } = useBackend<GreyscaleMenuData>(context);
+  return (
+    <Section>
+      <Flex mx="25%" fluid>
+        <SingleDirection dir={Direction.NorthWest} />
+        <SingleDirection dir={Direction.North} />
+        <SingleDirection dir={Direction.NorthEast} />
+      </Flex>
+      <Flex mx="25%">
+        <SingleDirection dir={Direction.West} />
+        <Flex.Item grow={1} basis={0}>
+          <Button lineHeight={3} m={-0.2} fluid>
+            <Icon name="arrows-alt" size={1.5} m="20%" />
+          </Button>
+        </Flex.Item>
+        <SingleDirection dir={Direction.East} />
+      </Flex>
+      <Flex mx="25%">
+        <SingleDirection dir={Direction.SouthWest} />
+        <SingleDirection dir={Direction.South} />
+        <SingleDirection dir={Direction.SouthEast} />
+      </Flex>
+    </Section>
+  );
+};
+
+const SingleDirection = (props, context) => {
+  const { dir } = props;
+  const { data, act } = useBackend<GreyscaleMenuData>(context);
+  return (
+    <Flex.Item grow={1} basis={0}>
+      <Button
+        content={DirectionAbbreviation[dir]}
+        disabled={`${dir}` === data.sprites_dir ? true : false}
+        textAlign="center"
+        onClick={() => act("change_dir", { new_sprite_dir: dir })}
+        lineHeight={3}
+        m={-0.2}
+        fluid
+      />
+    </Flex.Item>
+  );
+};
+
 const PreviewDisplay = (props, context) => {
   const { data } = useBackend<GreyscaleMenuData>(context);
   return (
-    <Section title="Preview">
+    <Section title={`Preview (${data.sprites_dir})`}>
+      <PreviewCompassSelect />
       <Table>
         <Table.Row header>
           <Table.Cell textAlign="center">Step Layer</Table.Cell>
@@ -101,6 +191,7 @@ export const GreyscaleModifyMenu = (props, context) => {
       width={325}
       height={800}>
       <Window.Content scrollable>
+        <ConfigDisplay />
         <ColorDisplay />
         <Button
           content="Refresh Icon File"