From 74f116bfac04eeedd605e47133fce3a6e2b9f2be Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 27 Jun 2024 18:11:51 +0000
Subject: [PATCH] Altered the positioning for the pickers.

---
 src/mami.js/colpick/picker.jsx | 19 +++++++++++--------
 src/mami.js/emotes/picker.jsx  | 21 ++++++++++++++-------
 src/mami.js/ui/markup.js       | 16 ++++++++++------
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/mami.js/colpick/picker.jsx b/src/mami.js/colpick/picker.jsx
index cd9a686..4deb4d3 100644
--- a/src/mami.js/colpick/picker.jsx
+++ b/src/mami.js/colpick/picker.jsx
@@ -79,8 +79,8 @@ const MamiColourPicker = function(options) {
         if(typeof pos !== 'object')
             throw 'pos must be an object';
 
-        html.style.bottom = 'y' in pos && pos.y >= 0 ? `${pos.y}px` : null;
-        html.style.left = 'x' in pos && pos.x >= 0 ? `${pos.x}px` : null;
+        for(const attr of ['top', 'left', 'right', 'bottom'])
+            html.style[attr] = typeof pos[attr] === 'number' ? `${pos[attr]}px` : null;
     };
 
     const tabs = new MamiTabsControl({
@@ -166,20 +166,23 @@ const MamiColourPicker = function(options) {
         get colour() { return colour; },
         set colour(value) { setColour(value); },
         setPosition: setPosition,
-        close: close,
+        close: runReject,
         dialog: pos => {
             html.classList.remove('hidden');
 
             if(pos instanceof MouseEvent) {
+                const ev = pos;
+                pos = {};
+
                 const mbb = html.getBoundingClientRect();
+                const bbb = ev.target.getBoundingClientRect();
                 const pbb = html.parentNode.getBoundingClientRect();
-                let x = pos.clientX;
-                let y = pbb.height - pos.clientY;
 
-                if(x > (pbb.width - mbb.width))
-                    x = 10;
+                pos.left = bbb.left;
+                pos.bottom = pbb.height - bbb.top;
 
-                pos = { x: x, y: y };
+                if(pos.left + mbb.width >= pbb.width)
+                    pos.left = 0;
             }
 
             if(pos !== undefined)
diff --git a/src/mami.js/emotes/picker.jsx b/src/mami.js/emotes/picker.jsx
index 282a1b5..aaf1858 100644
--- a/src/mami.js/emotes/picker.jsx
+++ b/src/mami.js/emotes/picker.jsx
@@ -100,8 +100,8 @@ const MamiEmotePicker = function(args) {
         if(typeof pos !== 'object')
             throw 'pos must be an object';
 
-        html.style.bottom = 'y' in pos && pos.y >= 0 ? `${pos.y}px` : null;
-        html.style.right = 'x' in pos && pos.x >= 0 ? `${pos.x}px` : null;
+        for(const attr of ['top', 'left', 'right', 'bottom'])
+            html.style[attr] = typeof pos[attr] === 'number' ? `${pos[attr]}px` : null;
     };
 
     return {
@@ -117,15 +117,22 @@ const MamiEmotePicker = function(args) {
             html.classList.remove('hidden');
 
             if(pos instanceof MouseEvent) {
+                const ev = pos;
+                pos = {};
+
                 const mbb = html.getBoundingClientRect();
+                const bbb = ev.target.getBoundingClientRect();
                 const pbb = html.parentNode.getBoundingClientRect();
-                let x = pbb.width - pos.clientX;
-                let y = pbb.height - pos.clientY;
 
-                if(x > mbb.width)
-                    x -= mbb.width;
+                pos.right = pbb.width - bbb.left;
+                pos.bottom = pbb.height - bbb.top;
 
-                pos = { x: x, y: y };
+                if(pos.right + mbb.width > pbb.width)
+                    pos.right = 0;
+                else if(pos.right > mbb.width)
+                    pos.right -= mbb.width;
+                else
+                    pos.right -= bbb.width;
             }
 
             if(pos !== undefined)
diff --git a/src/mami.js/ui/markup.js b/src/mami.js/ui/markup.js
index c5231c7..e2ec9b5 100644
--- a/src/mami.js/ui/markup.js
+++ b/src/mami.js/ui/markup.js
@@ -21,17 +21,21 @@ Umi.UI.Markup = (function() {
     let picker, pickerVisible = false;
 
     const insert = function(ev) {
-        if(this.dataset.umiTagName === 'color' && !pickerVisible) {
-            pickerVisible = true;
-
+        if(this.dataset.umiTagName === 'color') {
             if(picker === undefined) {
                 picker = new MamiColourPicker({ presets: futami.get('colours') });
                 pickerTarget.appendChild(picker.element);
             }
 
-            picker.dialog(ev)
-                .then(colour => insertRaw(`[color=${MamiColour.hex(colour)}]`, '[/color]'))
-                .finally(() => pickerVisible = false);
+            if(pickerVisible) {
+                picker.close();
+            } else {
+                pickerVisible = true;
+                picker.dialog(ev)
+                    .then(colour => insertRaw(`[color=${MamiColour.hex(colour)}]`, '[/color]'))
+                    .catch(() => {}) // noop so the console stops screaming
+                    .finally(() => pickerVisible = false);
+            }
         } else
             insertRaw(
                 this.dataset.umiBeforeCursor,