diff --git a/index.html b/index.html index ba822ce..2c03651 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ - +
+ +
\ No newline at end of file diff --git a/src/bittmappeditor.ts b/src/bittmappeditor.ts index dc9e635..7918f1d 100644 --- a/src/bittmappeditor.ts +++ b/src/bittmappeditor.ts @@ -18,8 +18,8 @@ class BittMappEditor { public canvasWidth: number; public canvasHeight: number; + public canvas: HTMLCanvasElement; - private _canvas: HTMLCanvasElement; private _context: CanvasRenderingContext2D; private _width: number; @@ -41,7 +41,7 @@ class BittMappEditor { options = options || {}; if (options.canvas) { - this._canvas = options.canvas; + this.canvas = options.canvas; } else { throw new Error("BittMappEditor must be initialized with a canvas."); } @@ -70,7 +70,7 @@ class BittMappEditor { throw new Error("BittMappEditor must be constructed with a height."); } - this._context = this._canvas.getContext("2d") as CanvasRenderingContext2D; + this._context = this.canvas.getContext("2d") as CanvasRenderingContext2D; const deviceRatio: number = window.devicePixelRatio; const backingStoreRatio: number = (this._context as any).backingStorePixelRatio as number || 1; @@ -78,32 +78,32 @@ class BittMappEditor { this._scale = deviceRatio / backingStoreRatio; this._deviceRatio = deviceRatio; - this._canvas.width = this.canvasWidth * this._scale; - this._canvas.height = this.canvasHeight * this._scale; - this._canvas.style.width = `${this.canvasWidth}px`; - this._canvas.style.height = `${this.canvasHeight}px`; + this.canvas.width = this.canvasWidth * this._scale; + this.canvas.height = this.canvasHeight * this._scale; + this.canvas.style.width = `${this.canvasWidth}px`; + this.canvas.style.height = `${this.canvasHeight}px`; - this._context.setTransform(this._scale, 0, 0, this._scale, 0, 0); + this._context.scale(this._scale, this._scale); this.resize(); - this._canvas.addEventListener("contextmenu", (event) => { + this.canvas.addEventListener("contextmenu", (event) => { event.preventDefault(); }); - this._canvas.addEventListener("mousedown", (event) => { + this.canvas.addEventListener("mousedown", (event) => { this._mouseDown = true; this._mouseButton = event.button as MouseButton; this._handleMouseEvent(event, this._mouseButton); }); - this._canvas.addEventListener("mousemove", (event) => { + this.canvas.addEventListener("mousemove", (event) => { if (this._mouseDown) { this._handleMouseEvent(event, this._mouseButton); } }); - this._canvas.addEventListener("mouseup", (event) => { + this.canvas.addEventListener("mouseup", (event) => { this._mouseDown = false; }); diff --git a/static/css/styles.css b/static/css/styles.css index f07174c..688bc45 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,3 +1,25 @@ +html, body { + height: 100%; +} + body { - background-color: #666666; + background-color: #1E1E1E; +} + +section#main { + position: relative; + width: 100%; + height: 100%; + line-height: 100%; + border: 1px solid #FF0000; + text-align: center; +} + +canvas#editor { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + max-width: 100%; + max-height: 100%; } \ No newline at end of file