Added mouse event simulation

js/ColorModule.js

@@ -19,7 +19,7 @@ const ColorModule = (() => {
         filter: ".noshrink",
         draggable: ".draggable-colour",
         // REFACTOR: Don't touch dragging, simulate a mouseup event instead
-        onEnd: function() {dragging = false}
+        onEnd: function() {Events.simulateMouseEvent(window, "mouseup");}
     });
 
     /** Changes all of one color to another after being changed from the color picker

js/Events.js

@@ -26,6 +26,69 @@ class Events {
         document.dispatchEvent(keyboardEvent);
     }
 
+    /** Simulates a mouse event (https://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript)
+     * 
+     * @param {*} element The element that triggered the event
+     * @param {*} eventName The name of the event
+     * @returns 
+     */
+    static simulateMouseEvent (element, eventName)
+    {
+        function extend(destination, source) {
+            for (let property in source)
+            destination[property] = source[property];
+            return destination;
+        }
+    
+        let eventMatchers = {
+            'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
+            'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
+        }
+        let defaultOptions = {
+            pointerX: 0,
+            pointerY: 0,
+            button: 0,
+            ctrlKey: false,
+            altKey: false,
+            shiftKey: false,
+            metaKey: false,
+            bubbles: true,
+            cancelable: true
+        }
+
+        let options = extend(defaultOptions, arguments[2] || {});
+        let oEvent, eventType = null;
+
+        for (let name in eventMatchers)
+            if (eventMatchers[name].test(eventName)) { eventType = name; break; }
+
+        if (!eventType)
+            throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
+
+        if (document.createEvent) {
+            oEvent = document.createEvent(eventType);
+            if (eventType == 'HTMLEvents')
+            {
+                oEvent.initEvent(eventName, options.bubbles, options.cancelable);
+            }
+            else
+            {
+                oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
+                options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
+                options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
+            }
+            element.dispatchEvent(oEvent);
+        }
+        else {
+            options.clientX = options.pointerX;
+            options.clientY = options.pointerY;
+            var evt = document.createEventObject();
+            oEvent = extend(evt, options);
+            element.fireEvent('on' + eventName, oEvent);
+        }
+        return element;
+    }
+    
     static on(event, elementId, functionCallback, ...args) {
         //if element provided is string, get the actual element
         const element = Util.getElement(elementId);

js/_layer.js

@@ -591,8 +591,7 @@ function layerDragDrop(event) {
     }
 
     getLayerByID(layerList.children[oldIndex].id).canvas.style.zIndex = movedZIndex;
-
+    Events.simulateMouseEvent(window, "mouseup");
-    dragging = false;
 }