| @@ -1,36 +1,88 @@ | |||
| import Utils from "/app/js/common/Utils.js"; | |||
| import GlobalEvents from "/app/js/common/EventCaller.js"; | |||
| import Input from "/app/js/ui/Input.js"; | |||
| import NESTile from "/app/js/models/NESTile.js"; | |||
| import NESBank from "/app/js/models/NESBank.js"; | |||
| const EL_CANVAS_ID = "painter"; | |||
| /* -------------------------------------------------------------------- | |||
| * Univeral data and functions. | |||
| ------------------------------------------------------------------- */ | |||
| var canvas = null; | |||
| var context = null; | |||
| // Handling window resize events... | |||
| var HANDLE_Resize = Utils.debounce(function(e){ | |||
| if (canvas !== null){ | |||
| var w = canvas.clientWidth; | |||
| var h = canvas.clientHeight; | |||
| canvas.width = w; | |||
| canvas.height = h; | |||
| } | |||
| }, 250); | |||
| window.addEventListener("resize", HANDLE_Resize); | |||
| // Setting-up Input controls. | |||
| var input = new Input(); | |||
| input.preventDefaults = true; | |||
| // Mouse handling... | |||
| /*input.listen("mousemove", handle_mouseevent); | |||
| input.listen("mousedown", handle_mouseevent); | |||
| input.listen("mouseup", handle_mouseevent); | |||
| input.listen("mouseclick", handle_mouseclickevent); | |||
| */ | |||
| /* -------------------------------------------------------------------- | |||
| * CTRLPainter | |||
| * Actual controlling class. | |||
| ------------------------------------------------------------------- */ | |||
| // For reference... | |||
| // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke | |||
| class CTRLPainter { | |||
| constructor(){ | |||
| this.__canvas = null; | |||
| this.__context = null; | |||
| this.__scale = 1.0; // This is the scale the painter will display source information. | |||
| this.__offset = [0.0, 0.0]; // This is the X,Y offset from origin to display source information. | |||
| this.__onePaletteMode = true; // If true, ALL tiles will be drawing using the same palette. | |||
| this.__brushSize = 1; | |||
| this.__brushColor = 0; | |||
| this.__brushPalette = 0; | |||
| this.__surface = null; | |||
| var self = this; | |||
| this.__canvas = document.getElementById(EL_CANVAS_ID); | |||
| if (!this.__canvas) | |||
| throw new Error("Failed to obtain the canvas element."); | |||
| this.__context = this.__canvas.getContext("2d"); | |||
| if (!this.__context) | |||
| throw new Error("Failed to obtain canvas context."); | |||
| //var imgdata = this.__context.getImageData(); | |||
| var handle_resize = Utils.debounce((function(e){ | |||
| console.log("DEBOUNCED"); | |||
| console.log(e); | |||
| var w = this.__canvas.clientWidth; | |||
| var h = this.__canvas.clientHeight; | |||
| this.__canvas.width = w; | |||
| this.__canvas.height = h; | |||
| console.log(this.__canvas.width + ", " + this.__canvas.height); | |||
| console.log(this.__canvas.clientWidth + ", " + this.__canvas.clientHeight); | |||
| }).bind(this), 250); | |||
| window.addEventListener("resize", handle_resize); | |||
| var handle_change_surface = (function(surf){ | |||
| if (!(surf instanceof ISurface)){ | |||
| console.log("WARNING: Attempted to set painter to non-surface instance."); | |||
| return; | |||
| } | |||
| this.__surface = surf; | |||
| // TODO: Call a rerender | |||
| }).bind(this); | |||
| GlobalEvents.listen("change_surface", handle_change_surface); | |||
| var handle_color_change = (function(pi, ci){ | |||
| this.__brushPalette = pi; | |||
| this.__brushColor = ci; | |||
| }).bind(this); | |||
| GlobalEvents.listen("active_palette_color", handle_color_change); | |||
| } | |||
| get onePaletteMode(){return this.__onePaletteMode;} | |||
| set onePaletteMode(e){ | |||
| this.__onePaletteMode = (e === true); | |||
| // TODO: Call a rerender. | |||
| } | |||
| get scale(){ | |||
| @@ -43,6 +95,18 @@ class CTRLPainter { | |||
| this.__scale = Math.max(0.1, Math.min(100.0, s)); | |||
| } | |||
| initialize(){ | |||
| if (canvas === null){ | |||
| canvas = document.getElementById(EL_CANVAS_ID); | |||
| if (!canvas) | |||
| throw new Error("Failed to obtain the canvas element."); | |||
| context = canvas.getContext("2d"); | |||
| if (!context) | |||
| throw new Error("Failed to obtain canvas context."); | |||
| input.mouseTargetElement = canvas; | |||
| } | |||
| } | |||
| scale_up(amount=1){ | |||
| this.scale = this.scale + (amount*0.1); | |||
| } | |||