From ba5500b4b0c86b8765e56a915f583ec95f99b4d3 Mon Sep 17 00:00:00 2001 From: Vince Date: Sat, 8 Sep 2012 16:32:28 +0200 Subject: [PATCH] Dynamic DPIs ! --- css/style.css | 5 +--- js/controller/DrawingController.js | 10 ++++--- js/piskel.js | 47 +++++++++++++++++++++--------- js/rendering/FrameRenderer.js | 29 ++++++++++++------ 4 files changed, 60 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index 63e082c9..fb44b886 100644 --- a/css/style.css +++ b/css/style.css @@ -73,10 +73,7 @@ } .drawing-canvas { - position: absolute; - top: 0; - left: 0; - z-index: 1; + float: left; } .canvas-overlay { diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index d0741280..f6043669 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -16,15 +16,17 @@ this.container = container; this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas"); this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay"); - //this.mainCanvas = this.createMainCanvas(); - //this.overlayCanvas = this.createOverlayCanvas(); + this.renderer.init(this.frame); this.overlayRenderer.init(this.frame); }; ns.DrawingController.prototype.updateDPI = function (newDPI) { - //this.renderer.updateDPI(newDPI); - //this.overlayRenderer.updateDPI(newDPI); + this.renderer.updateDPI(newDPI); + this.overlayRenderer.updateDPI(newDPI); + + this.renderer.render(this.frame); + this.overlayRenderer.render(this.frame); }; ns.DrawingController.prototype.renderFrame = function () { diff --git a/js/piskel.js b/js/piskel.js index e195c05d..af4f7a79 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -11,23 +11,18 @@ $.namespace("pskl"); */ var frameSheet, - // Temporary zoom implementation to easily get bigger canvases to - // see how good perform critical algorithms on big canvas. - zoom = 1, - // Configuration: // Canvas size in pixel size (not dpi related) - framePixelWidth = 32 * zoom, - framePixelHeight = 32 * zoom, - + framePixelWidth = 32, + framePixelHeight = 32, // Scaling factors for a given frameSheet rendering: // Main drawing area: - drawingCanvasDpi = Math.ceil(20/ zoom), - // Canvas previous in the slideshow: - previewTileCanvasDpi = Math.ceil(4 / zoom), - // Ainmated canvas preview: - previewAnimationCanvasDpi = Math.ceil(8 / zoom), + drawingCanvasDpi = 20, + // Canvas preview film canvases: + previewTileCanvasDpi = 4, + // Animated canvas preview: + previewAnimationCanvasDpi = 8, // DOM references: drawingAreaContainer, @@ -53,6 +48,9 @@ $.namespace("pskl"); var piskel = { init : function () { + + piskel.initDPIs_(); + frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight); frameSheet.addEmptyFrame(); @@ -95,6 +93,29 @@ $.namespace("pskl"); } }, + /** + * Override default DPIs. + * @private + */ + initDPIs_ : function() { + + drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_(); + // TODO(vincz): Add throttling on window.resize event. + $(window).resize($.proxy(function() { + drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_(); + this.drawingController.updateDPI(drawingCanvasDpi); + }, this)); + // TODO(vincz): Check for user settings eventually from localstorage. + }, + + /** + * @private + */ + calculateDPIsForDrawingCanvas_ : function() { + var availableViewportHeight = $('.main-panel').height(); + return Math.floor(availableViewportHeight / framePixelHeight); + }, + finishInit : function () { $.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) { @@ -186,8 +207,6 @@ $.namespace("pskl"); document.body.addEventListener('mouseup', this.onMouseup.bind(this)); drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this)); drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this)); - drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px"; - drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px"; document.body.addEventListener('contextmenu', this.onCanvasContextMenu); }, diff --git a/js/rendering/FrameRenderer.js b/js/rendering/FrameRenderer.js index 56089285..63b96533 100644 --- a/js/rendering/FrameRenderer.js +++ b/js/rendering/FrameRenderer.js @@ -17,24 +17,30 @@ this.displayGrid = !!renderingOptions.displayGrid; this.dpi = renderingOptions.dpi; this.className = className; + + // Flag to know if the config was altered + this.canvasConfigDirty = true; }; ns.FrameRenderer.prototype.init = function (frame) { - - this.createCanvas_(frame); this.render(frame); }; + ns.FrameRenderer.prototype.updateDPI = function (newDPI) { + this.dpi = newDPI; + this.canvasConfigDirty = true; + }; + ns.FrameRenderer.prototype.render = function (frame) { for(var col = 0, width = frame.getWidth(); col < width; col++) { for(var row = 0, height = frame.getHeight(); row < height; row++) { - this.drawPixel(col, row, frame, this.canvas, this.dpi); + this.drawPixel(col, row, frame, this.getCanvas_(frame), this.dpi); } } }; ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) { - var context = this.canvas.getContext('2d'); + var context = this.getCanvas_(frame).getContext('2d'); var color = frame.getPixel(col, row); if(color == Constants.TRANSPARENT_COLOR) { context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi); @@ -50,17 +56,19 @@ }; ns.FrameRenderer.prototype.clear = function (col, row, frame) { - this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height); + var canvas = this.getCanvas_(frame) + canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height); }; /** * @private */ - ns.FrameRenderer.prototype.createCanvas_ = function (frame) { - if(this.canvas == undefined) { + ns.FrameRenderer.prototype.getCanvas_ = function (frame) { + if(this.canvasConfigDirty) { + $(this.canvas).remove(); var width = frame.getWidth(), height = frame.getHeight(); - + var canvas = document.createElement("canvas"); canvas.setAttribute("width", width * this.dpi); canvas.setAttribute("height", height * this.dpi); @@ -72,7 +80,10 @@ canvas.setAttribute("class", canvasClassname); this.canvas = canvas; + this.container.appendChild(this.canvas); + + this.canvasConfigDirty = false; } - this.container.appendChild(this.canvas); + return this.canvas; }; })(); \ No newline at end of file