Added back tool shortctus

Made Events an IIFE instead of a class, fixed a bug in the selection tool.

js/Events.js

@@ -1,5 +1,5 @@
-class Events {
+const Events = (() => {
-    customCallback = {};
+    let customCallback = {};
 
     /** Used to programmatically create an input event
      * 
@@ -8,7 +8,7 @@ class Events {
      * @param {*} alt Is alt pressed?
      * @param {*} shift Is shift pressed?
      */
-    static simulateInput(keyCode, ctrl, alt, shift) {
+    function simulateInput(keyCode, ctrl, alt, shift) {
         // I just copy pasted this from stack overflow lol please have mercy
         let keyboardEvent = document.createEvent("KeyboardEvent");
         let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
@@ -34,7 +34,7 @@ class Events {
      * @param {*} eventName The name of the event
      * @returns 
      */
-    static simulateMouseEvent (element, eventName)
+    function simulateMouseEvent (element, eventName)
     {
         function extend(destination, source) {
             for (let property in source)
@@ -98,7 +98,7 @@ class Events {
      * @param {*} functionCallback The function to callback when the event is shoot 
      * @param  {...any} args Arguments for the callback
      */
-    static on(event, elementId, functionCallback, ...args) {
+     function on(event, elementId, functionCallback, ...args) {
         //if element provided is string, get the actual element
         const element = Util.getElement(elementId);
 
@@ -116,7 +116,7 @@ class Events {
      * @param {*} functionCallback The function to callback when the event is shoot 
      * @param  {...any} args Arguments for the callback
      */
-    static onChildren(event, parentElement, functionCallback, ...args) {
+    function onChildren(event, parentElement, functionCallback, ...args) {
         parentElement = Util.getElement(parentElement);
         const children = parentElement.children;
         
@@ -131,9 +131,9 @@ class Events {
      * @param {*} event The event to register to
      * @param {*} functionCallback The function to call
      */
-    static onCustom(event, functionCallback) {
+    function onCustom(event, functionCallback) {
         if (customCallback[event] === undefined)
-            customCallback[event] = [];
+        customCallback[event] = [];
         
         customCallback[event].push(functionCallback);
     }
@@ -143,9 +143,18 @@ class Events {
      * @param {*} event The event to emit
      * @param  {...any} args The arguments for that event
      */
-    static emit(event, ...args) {
+    function emit(event, ...args) {
         if (customCallback[event] != undefined) 
             for (let i=0; i<customCallback[event].length; i++)
                 customCallback[event][i](args);
     }
-}
+
+    return {
+        simulateInput, 
+        simulateMouseEvent,
+        on,
+        onChildren,
+        onCustom,
+        emit
+    }
+})();

js/History.js

@@ -50,10 +50,12 @@ const History = (() => {
     }
 
     function undo () {
+        console.log("undoing");
         undoOrRedo('undo');
     }
 
     function redo () {
+        console.log("redoing");
         undoOrRedo('redo');
     }
 

js/Input.js

@@ -1,12 +1,11 @@
 const Input = (() => {
-    let spaceKeyPressed = false;
     let dragging = false;
     let currentMouseEvent = undefined;
 
     // Hotkeys when pressing a key
     Events.on("keydown", document, KeyPress);
     // Update held keys when releasing a key
-    Events.on("keyup", window, function (e) {if (e.keyCode == 32) spaceKeyPressed = false;});
+    Events.on("keyup", window, function (e) {if (e.keyCode == 32) Events.emit("space-released");;});
 
     // Update variables on mouse clicks
     Events.on("mousedown", window, onMouseDown);
@@ -15,11 +14,19 @@ const Input = (() => {
     function onMouseDown(event) {
         currentMouseEvent = event;
         dragging = true;
+
+        if (!Util.isChildOfByClass(event.target, "editor-top-menu")) {
+            TopMenuModule.closeMenu();
+        }
     }
 
     function onMouseUp(event) {
         currentMouseEvent = event;
         dragging = false;
+        
+        if (currentLayer != null && !Util.isChildOfByClass(event.target, "layers-menu-entry")) {
+            LayerList.closeOptionsMenu();	
+        }
     }
 
     function getCursorPosition(e) {
@@ -47,20 +54,16 @@ const Input = (() => {
      */
     function KeyPress(e) {
         var keyboardEvent = window.event? event : e;
-        console.log("pressed key");
 
         //if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key
-        if (document.activeElement.tagName == 'INPUT' || LayerList.isRenamingLayer) {
+        if (document.activeElement.tagName == 'INPUT' || LayerList.isRenamingLayer()) {
             if (e.keyCode == 13) {
-                console.log("here");
                 LayerList.closeOptionsMenu();
             }
             return;
         }
 
-        //if no document has been created yet,
+        //if no document has been created yet or there is a dialog box open ignore hotkeys
-        //orthere is a dialog box open
-        //ignore hotkeys
         if (!Startup.documentCreated() || Dialogue.isOpen()) return;
 
         //
@@ -73,81 +76,68 @@ const Input = (() => {
             switch (keyboardEvent.keyCode) {
                 //pencil tool - 1, b
                 case 49: case 66:
-                    tool.pencil.switchTo();
+                    Events.emit("tool-shortcut", "brush");
                     break;
                 // copy tool c
                 case 67: case 99:
-                    if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+                    if (keyboardEvent.ctrlKey) {
-                        copySelection();
+                        Events.emit("ctrl+c");
                     }
                     break;
                 //fill tool - 2, f
                 case 50: case 70:
-                    tool.fill.switchTo();
+                    Events.emit("tool-shortcut", "fill");
                     break;
                 //eyedropper - 3, e
                 case 51: case 69:
-                    tool.eyedropper.switchTo();
+                    Events.emit("tool-shortcut", "eyedropper");
                     break;
                 //pan - 4, p,
                 case 52: case 80:
-                    tool.pan.switchTo();
+                    Events.emit("tool-shortcut", "pan");
                     break;
+                // line - l
                 case 76:
-                    tool.line.switchTo();
+                    Events.emit("tool-shortcut", "line");
                     break;
-                //zoom - 5
-                case 53:
-                tool.zoom.switchTo();
-                break;
                 // eraser -6, r
                 case 54: case 82:
-                    tool.eraser.switchTo()
+                    Events.emit("tool-shortcut", "eraser");
                     break;
-                // Rectangular selection
+                // Rectangular selection m
                 case 77: case 109:
-                    tool.rectselect.switchTo()
+                    Events.emit("tool-shortcut", "rectselect");
                     break;
                 // TODO: [ELLIPSE] Decide on a shortcut to use. "s" was chosen without any in-team consultation.
                 // ellipse tool, s
                 case 83:
-                    tool.ellipse.switchTo()
+                    //Events.emit("tool-shortcut", "ellipse");
                     break;
                 // rectangle tool, u
                 case 85:
-                    tool.rectangle.switchTo()
+                    Events.emit("tool-shortcut", "rectangle");
                     break;
                 // Paste tool
                 case 86: case 118:
-                    if (keyboardEvent.ctrlKey && !dragging) {
+                    if (keyboardEvent.ctrlKey) {
-                        pasteSelection();
+                        Events.emit("ctrl+v");
                     }
                     break;
                 case 88: case 120:
-                    if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+                    if (keyboardEvent.ctrlKey) {
-                        cutSelectionTool();
+                        Events.emit("ctrl+x");
-                        tool.pencil.switchTo();
                     }
                     break;
                 //Z
-                case 90:
+                case 90: case 122:
                     //CTRL+ALT+Z redo
                     if (keyboardEvent.altKey && keyboardEvent.ctrlKey) {
                         History.redo();
-                        if (!selectionCanceled) {
-                            tool.pencil.switchTo()
-                        }
                     }
                     //CTRL+Z undo
                     else if (keyboardEvent.ctrlKey) {
                         History.undo();
-                        if (!selectionCanceled) {
-                            tool.pencil.switchTo()
-                        }
                     }
-                    //Z switch to zoom tool
-                    else
-                        tool.zoom.switchTo()
                     break;
                 //redo - ctrl y
                 case 89:
@@ -155,16 +145,12 @@ const Input = (() => {
                         History.redo();
                     break;
                 case 32:
-                    spaceKeyPressed=true;
+                    Events.emit("space-pressed");
                     break;
             }
         }
     }
-
+    
-    function spacePressed() {
-        return spaceKeyPressed;
-    }
-
     function isDragging() {
         return dragging;
     }
@@ -174,7 +160,6 @@ const Input = (() => {
     }
 
     return {
-        spacePressed,
         isDragging,
         getCurrMouseEvent,
         getCursorPosition

js/Tool.js

@@ -85,6 +85,7 @@ class Tool {
 		if (this.mainButton != undefined)
 			this.mainButton.parentElement.classList.remove("selected");
 		this.isSelected = false;
+		brushPreview.style.visibility = 'hidden';
 	}
 
 	onStart(mousePos) {

js/ToolManager.js

@@ -1,20 +1,22 @@
 const ToolManager = (() => {
-    brushTool = new BrushTool("brush", {type: 'html'}, switchTool);
+    tools = {};
-    eraserTool = new EraserTool("eraser", {type: 'html'}, switchTool);
-    rectangleTool = new RectangleTool("rectangle", {type: 'html'}, switchTool);
-    lineTool = new LineTool("line", {type: 'html'}, switchTool);
-    fillTool = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
-    
-    eyedropperTool = new EyedropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
-    panTool = new PanTool("pan", {type: 'custom'}, switchTool);
-    zoomTool = new ZoomTool("zoom", {type:'custom'});
 
-    moveSelectionTool = new MoveSelectionTool("moveselection", 
+    tools["brush"] = new BrushTool("brush", {type: 'html'}, switchTool);
-        {type:'cursor', style:'crosshair'}, switchTool, brushTool);
+    tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool);
-    rectSelectTool = new RectangularSelectionTool("rectselect", 
+    tools["rectangle"] = new RectangleTool("rectangle", {type: 'html'}, switchTool);
-        {type: 'cursor', style:'crosshair'}, switchTool, moveSelectionTool);
+    tools["line"] = new LineTool("line", {type: 'html'}, switchTool);
+    tools["fill"] = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
     
-    currTool = brushTool;
+    tools["eyedropper"] = new EyedropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
+    tools["pan"] = new PanTool("pan", {type: 'custom'}, switchTool);
+    tools["zoom"] = new ZoomTool("zoom", {type:'custom'});
+
+    tools["moveselection"] = new MoveSelectionTool("moveselection", 
+        {type:'cursor', style:'crosshair'}, switchTool, tools["brush"]);
+    tools["rectselect"] = new RectangularSelectionTool("rectselect", 
+        {type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
+    
+    currTool = tools["brush"];
     currTool.onSelect();
     canvasView.style.cursor = 'default';
 
@@ -23,9 +25,15 @@ const ToolManager = (() => {
     Events.on("mousedown", window, onMouseDown);
     Events.on("mousewheel", window, onMouseWheel);
 
+    Events.onCustom("tool-shortcut", onShortcut);
+
+    function onShortcut(tool) {
+        switchTool(tools[tool]);
+    }
+
     function onMouseWheel(mouseEvent) {
         let mousePos = Input.getCursorPosition(mouseEvent);
-        zoomTool.onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
+        tools["zoom"].onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
     }
 
     function onMouseDown(mouseEvent) {
@@ -40,7 +48,7 @@ const ToolManager = (() => {
                     currTool.onStart(mousePos, mouseEvent.target);
                     break;
                 case 2:
-                    panTool.onStart(mousePos, mouseEvent.target);
+                    tools["pan"].onStart(mousePos, mouseEvent.target);
                     break;
                 case 3:
                     currTool.onRightStart(mousePos, mouseEvent.target);
@@ -64,7 +72,7 @@ const ToolManager = (() => {
                     currTool.onDrag(mousePos, mouseEvent.target);
                     break;
                 case 2:
-                    panTool.onDrag(mousePos, mouseEvent.target);
+                    tools["pan"].onDrag(mousePos, mouseEvent.target);
                     break;
                 case 3:
                     currTool.onRightDrag(mousePos, mouseEvent.target);
@@ -87,7 +95,7 @@ const ToolManager = (() => {
                     currTool.onEnd(mousePos);
                     break;
                 case 2:
-                    panTool.onEnd(mousePos);
+                    tools["pan"].onEnd(mousePos);
                     break;
                 case 3:
                     currTool.onRightEnd(mousePos, mouseEvent.target);

js/TopMenuModule.js

@@ -14,6 +14,8 @@ const TopMenuModule = (() => {
 
             //when you click a main menu items button
             Events.on('click', menuButton, function (e) {
+                // Close the already open menus
+                closeMenu();
                 // Select the item
                 Util.select(e.target.parentElement);
             });
@@ -80,6 +82,8 @@ const TopMenuModule = (() => {
                         Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'changelog');
                         break;
                 }
+
+                Events.on('click', currSubmenuButton, function() {TopMenuModule.closeMenu();});
             }
         }
     }

js/pixel-editor.js

@@ -28,8 +28,6 @@
 //=include tools/RectangularSelectionTool.js
 //=include tools/MoveSelectionTool.js
 
-//=include ToolManager.js
-
 /**init**/
 //=include _consts.js
 //=include Settings.js
@@ -38,6 +36,7 @@
 //=include Startup.js
 //=include _pixelGrid.js
 //=include EditorState.js
+//=include ToolManager.js
 
 /**dropdown formatting**/
 //=include PresetModule.js

js/tools/BrushTool.js

@@ -9,6 +9,7 @@ class BrushTool extends ResizableTool {
 
     onStart(mousePos) {
         super.onStart(mousePos);
+        new HistoryState().EditCanvas();
 	}
 
 	onDrag(mousePos, cursorTarget) {

js/tools/EraserTool.js

@@ -9,6 +9,7 @@ class EraserTool extends ResizableTool {
 
     onStart(mousePos) {
         super.onStart(mousePos);
+        new HistoryState().EditCanvas();
 	}
 
 	onDrag(mousePos, cursorTarget) {

js/tools/FillTool.js

@@ -12,6 +12,8 @@ class FillTool extends Tool {
             return;
         this.fill(mousePos);
         currentLayer.updateLayerPreview();
+        
+        new HistoryState().EditCanvas();
 	}
 
     
@@ -37,9 +39,6 @@ class FillTool extends Tool {
             return (r == color[0] && g == color[1] && b == color[2] && a == color[3]);
         }
 
-        //save history state
-        new HistoryState().EditCanvas();
-
         //temporary image holds the data while we change it
         let tempImage = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 

js/tools/LineTool.js

@@ -15,6 +15,8 @@ class LineTool extends ResizableTool {
 
         this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5;
         this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5;
+
+        new HistoryState().EditCanvas();
 	}
 
 	onDrag(mousePos, cursorTarget) {

js/tools/MoveSelectionTool.js

@@ -88,13 +88,13 @@ class MoveSelectionTool extends Tool {
         // don't override the coloured pixels in the canvas
         let underlyingImageData = currentLayer.context.getImageData(
             this.currSelection.left, this.currSelection.top, 
-            this.currSelection.width, this.currSelection.height
+            this.currSelection.width+1, this.currSelection.height+1
         );
+        let pasteData = this.currSelection.data.data;
         
         for (let i=0; i<underlyingImageData.data.length; i+=4) {
             let currentMovePixel = [
-                this.currSelection.data.data[i], this.currSelection.data.data[i+1], 
+                pasteData[i], pasteData[i+1], pasteData[i+2], pasteData[i+3]
-                this.currSelection.data.data[i+2], this.currSelection.data.data[i+3]
             ];
 
             let currentUnderlyingPixel = [
@@ -104,26 +104,25 @@ class MoveSelectionTool extends Tool {
 
             // If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
             if (Util.isPixelEmpty(currentMovePixel)) {
-                if (!Util.isPixelEmpty(underlyingImageData)) {
+                if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
-                    this.currSelection.data.data[i] = currentUnderlyingPixel[0];
+                    pasteData[i] = currentUnderlyingPixel[0];
-                    this.currSelection.data.data[i+1] = currentUnderlyingPixel[1];
+                    pasteData[i+1] = currentUnderlyingPixel[1];
-                    this.currSelection.data.data[i+2] = currentUnderlyingPixel[2];
+                    pasteData[i+2] = currentUnderlyingPixel[2];
-                    this.currSelection.data.data[i+3] = currentUnderlyingPixel[3];
+                    pasteData[i+3] = currentUnderlyingPixel[3];
                 }
             }
         }
 
-        currentLayer.context.putImageData(
+        console.log("Paste: " + pasteData.length + ", underlying: " + underlyingImageData.data.length);
-            this.currSelection.data, 
+
-            this.currSelection.left, 
+        currentLayer.context.putImageData(new ImageData(pasteData, this.currSelection.width+1),
-            this.currSelection.top);
+            this.currSelection.left, this.currSelection.top
+        );
 
         this.currSelection = undefined;
         currentLayer.updateLayerPreview();
         VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;
-
+        
-        // Saving history
-        new HistoryState().EditCanvas();
         // Switch to brush
         this.switchFunc(this.endTool);
     }

js/tools/RectangleTool.js

@@ -1,3 +1,5 @@
+// TODO: FIX SELECTION
+
 class RectangleTool extends ResizableTool {
     // Saving the empty rect svg
     emptyRectangleSVG = document.getElementById("rectangle-empty-button-svg");
@@ -41,6 +43,8 @@ class RectangleTool extends ResizableTool {
 
         this.startMousePos[0] = Math.floor(mousePos[0] / zoom) + 0.5;
         this.startMousePos[1] = Math.floor(mousePos[1] / zoom) + 0.5;
+
+        new HistoryState().EditCanvas();
 	}
 
 	onDrag(mousePos, cursorTarget) {

js/tools/RectangularSelectionTool.js

@@ -14,8 +14,6 @@ class RectangularSelectionTool extends SelectionTool {
     onStart(mousePos) {
         super.onStart(mousePos);
 
-        // Saving the canvas
-        new HistoryState().EditCanvas();
         // Putting the vfx layer on top of everything
         VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
 
@@ -51,6 +49,7 @@ class RectangularSelectionTool extends SelectionTool {
 
     onEnd(mousePos) {
         super.onEnd(mousePos);
+        new HistoryState().EditCanvas();
 
         // Getting the end position
         this.endMousePos[0] = Math.round(this.endMousePos[0] / zoom) + 0.5;

views/main-menu.hbs

@@ -1,4 +1,4 @@
-<ul id="main-menu">
+<ul id="main-menu" class="editor-top-menu">
 	<li class="logo">Lospec Pixel Editor</li>
 	<li>
 		<button>File</button>