From 05717c7ae316799435c128280fcc52a4f4124e03 Mon Sep 17 00:00:00 2001
From: SandPoot <enric_gabirel@hotmail.com>
Date: Mon, 1 Nov 2021 01:24:47 -0300
Subject: [PATCH 1/3] Upload files

---
 code/game/objects/items/crayons.dm      | 28 +++++++++++++-
 tgui/packages/tgui/interfaces/Crayon.js | 50 ++++++++++++++++++++++++-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/code/game/objects/items/crayons.dm b/code/game/objects/items/crayons.dm
index aa48930d6c..fab9e4b865 100644
--- a/code/game/objects/items/crayons.dm
+++ b/code/game/objects/items/crayons.dm
@@ -72,6 +72,10 @@
 	var/datum/team/gang/gang //For marking territory.
 	var/gang_tag_delay = 30 //this is the delay for gang mode tag applications on anything that gang = true on.
 
+	var/precision_mode = FALSE
+	var/precision_x = 0
+	var/precision_y = 0
+
 /obj/item/toy/crayon/proc/isValidSurface(surface)
 	return istype(surface, /turf/open/floor)
 
@@ -228,6 +232,12 @@
 	.["can_change_colour"] = can_change_colour
 	.["current_colour"] = paint_color
 
+	.["precision_mode"] = precision_mode
+	.["x"] = precision_x
+	.["y"] = precision_y
+	.["min_offset"] = -world.icon_size/2
+	.["max_offset"] = world.icon_size/2
+
 /obj/item/toy/crayon/ui_act(action, list/params)
 	if(..())
 		return
@@ -256,6 +266,16 @@
 			. = TRUE
 			paint_mode = PAINT_NORMAL
 			drawtype = "a"
+		if("toggle_precision")
+			precision_mode = !precision_mode
+			. = TRUE
+		if("set_precision_x")
+			var/x = text2num(params["x"])
+			precision_x = x
+		if("set_precision_y")
+			var/y = text2num(params["y"])
+			precision_y = y
+			. = TRUE
 	update_icon()
 
 /obj/item/toy/crayon/proc/select_colour(mob/user)
@@ -400,8 +420,12 @@
 				if(PAINT_NORMAL)
 					var/obj/effect/decal/cleanable/crayon/C = new(target, paint_color, drawing, temp, graf_rot)
 					C.add_hiddenprint(user)
-					C.pixel_x = clickx
-					C.pixel_y = clicky
+					if(precision_mode)
+						C.pixel_x = clamp(precision_x, -(world.icon_size/2), world.icon_size/2)
+						C.pixel_y = clamp(precision_y, -(world.icon_size/2), world.icon_size/2)
+					else
+						C.pixel_x = clickx
+						C.pixel_y = clicky
 					affected_turfs += target
 				if(PAINT_LARGE_HORIZONTAL)
 					var/turf/left = locate(target.x-1,target.y,target.z)
diff --git a/tgui/packages/tgui/interfaces/Crayon.js b/tgui/packages/tgui/interfaces/Crayon.js
index 05191f8c66..08492c797a 100644
--- a/tgui/packages/tgui/interfaces/Crayon.js
+++ b/tgui/packages/tgui/interfaces/Crayon.js
@@ -1,11 +1,18 @@
 import { useBackend } from '../backend';
-import { Button, LabeledList, Section } from '../components';
+import { Button, LabeledList, Section, Slider } from '../components';
 import { Window } from '../layouts';
 
 export const Crayon = (props, context) => {
   const { act, data } = useBackend(context);
   const capOrChanges = data.has_cap || data.can_change_colour;
   const drawables = data.drawables || [];
+  const {
+    precision_mode,
+    x,
+    y,
+    min_offset,
+    max_offset,
+  } = data;
   return (
     <Window
       width={600}
@@ -28,6 +35,47 @@ export const Crayon = (props, context) => {
               onClick={() => act('select_colour')} />
           </Section>
         )}
+        <Section title="Precision">
+          <LabeledList>
+            <LabeledList.Item label="Active">
+              <Button
+                icon={precision_mode ? 'power-off' : 'times'}
+                content={precision_mode ? 'On' : 'Off'}
+                selected={precision_mode}
+                onClick={() => act('toggle_precision')} />
+            </LabeledList.Item>
+            {!!precision_mode && (
+              <>
+                <LabeledList.Item label="X">
+                  <Slider
+                    animated
+                    value={x}
+                    unit="px"
+                    minValue={min_offset}
+                    maxValue={max_offset}
+                    step={1}
+                    stepPixelSize={10}
+                    onChange={(e, value) => act('set_precision_x', {
+                      x: value,
+                    })} />
+                </LabeledList.Item>
+                <LabeledList.Item label="Y">
+                  <Slider
+                    animated
+                    value={y}
+                    unit="px"
+                    minValue={min_offset}
+                    maxValue={max_offset}
+                    step={1}
+                    stepPixelSize={10}
+                    onChange={(e, value) => act('set_precision_y', {
+                      y: value,
+                    })} />
+                </LabeledList.Item>
+              </>
+            )}
+          </LabeledList>
+        </Section>
         <Section title="Stencil">
           <LabeledList>
             {drawables.map(drawable => {

From d92a29096095adafc117a279bd7d03ac096553a6 Mon Sep 17 00:00:00 2001
From: SandPoot <43283559+SandPoot@users.noreply.github.com>
Date: Mon, 1 Nov 2021 01:50:30 -0300
Subject: [PATCH 2/3] Update crayons.dm

---
 code/game/objects/items/crayons.dm | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/game/objects/items/crayons.dm b/code/game/objects/items/crayons.dm
index fab9e4b865..5058060f54 100644
--- a/code/game/objects/items/crayons.dm
+++ b/code/game/objects/items/crayons.dm
@@ -272,6 +272,7 @@
 		if("set_precision_x")
 			var/x = text2num(params["x"])
 			precision_x = x
+			. = TRUE
 		if("set_precision_y")
 			var/y = text2num(params["y"])
 			precision_y = y

From c0eb6e324330c389049550c34bddf7135c90f78a Mon Sep 17 00:00:00 2001
From: SandPoot <43283559+SandPoot@users.noreply.github.com>
Date: Mon, 1 Nov 2021 01:52:32 -0300
Subject: [PATCH 3/3] Update Crayon.js

Might be making the slider less responsive
---
 tgui/packages/tgui/interfaces/Crayon.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/Crayon.js b/tgui/packages/tgui/interfaces/Crayon.js
index 08492c797a..568e02667b 100644
--- a/tgui/packages/tgui/interfaces/Crayon.js
+++ b/tgui/packages/tgui/interfaces/Crayon.js
@@ -48,7 +48,6 @@ export const Crayon = (props, context) => {
               <>
                 <LabeledList.Item label="X">
                   <Slider
-                    animated
                     value={x}
                     unit="px"
                     minValue={min_offset}
@@ -61,7 +60,6 @@ export const Crayon = (props, context) => {
                 </LabeledList.Item>
                 <LabeledList.Item label="Y">
                   <Slider
-                    animated
                     value={y}
                     unit="px"
                     minValue={min_offset}