From 4618cb643a0913d53c32ca2a23eca5e0174ff39c Mon Sep 17 00:00:00 2001 From: Vince Date: Wed, 19 Jun 2013 19:01:12 +0200 Subject: [PATCH] Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before) --- css/style.css | 27 +++-- index.html | 156 +++++++++++++++-------------- js/controller/DrawingController.js | 36 +++++-- 3 files changed, 126 insertions(+), 93 deletions(-) diff --git a/css/style.css b/css/style.css index 4e4984b5..494dee52 100644 --- a/css/style.css +++ b/css/style.css @@ -12,39 +12,48 @@ body { * Application layout */ +.main-wrapper { + position: absolute; + top: 5px; + right: 0; + bottom: 5px; + left: 0; +} + .column-wrapper { text-align: center; font-size: 0; position: absolute; left: 100px; /* Reserve room for tools on the left edge of the screen. */ - top: 10px; + top: 0; right: 50px; /* Reserve room for actions on the right edge of the screen. */ - bottom: 10px; + bottom: 0; +} + +.column { + display: inline-block; } .left-column { - display: inline-block; vertical-align: top; height: 100%; margin-right: 7px; } .main-column { - display: inline-block; height: 100%; position: relative; } -.drawing-canvas-container { - font-size: 0; -} - .right-column { - display: inline-block; vertical-align: top; margin-left: 10px; } +.drawing-canvas-container { + font-size: 0; +} + .sticky-section { display: table; height: 100%; diff --git a/index.html b/index.html index 77de32b0..3f9f93b8 100644 --- a/index.html +++ b/index.html @@ -16,96 +16,98 @@ -
-
-
    -
    -
    - - -
    -
    -
    - +
    +
    +
    +
      +
      +
      + +
      -
      -
      -
      -
      - -
      -
      -
      - -
      -
      - GIF -
      -
      - PNG -
      -
      -
      -
      -
      -
      - Canvas settings: -
      -
      - -
      -
      -
      -
      -
      -
      -
      -
      -
      +
      +
      +
      -
      - +
      +
      +
      + +
      +
      +
      + +
      +
      + GIF +
      +
      + PNG +
      +
      +
      +
      +
      +
      + Canvas settings: +
      +
      + +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      -
      -
      -
      - - -
      -
      -
        +
        +
        + + +
        +
        +
          +
          +
          +
          -
          -
          -
          -
          - -
          -
          -
          -
          - -
          - -
          -
          +
          + +
          -
          - 12 FPS - -
          +
          + +
          + +
          +
          +
          +
          +
          + 12 FPS + +
          +
          diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index c6ee9844..76201a11 100644 --- a/js/controller/DrawingController.js +++ b/js/controller/DrawingController.js @@ -60,8 +60,10 @@ $(window).resize($.proxy(this.startDPIUpdateTimer_, this)); + $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this)); - $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); + + this.updateDPI_(); }; ns.DrawingController.prototype.initMouseBehavior = function() { @@ -88,7 +90,7 @@ */ ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) { if(settingsName == pskl.UserSettings.SHOW_GRID) { - this.forceRendering_(); + this.updateDPI_(); } }, @@ -268,13 +270,20 @@ * @private */ ns.DrawingController.prototype.calculateDPI_ = function() { - var availableViewportHeight = $('.main-column').height(), - leftSectionWidth = $('.left-column').width(), - rightSectionWidth = $('.right-column').width(), - availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth, + var availableViewportHeight = $('#main-wrapper').height(), + leftSectionWidth = $('.left-column').outerWidth(true), + rightSectionWidth = $('.right-column').outerWidth(true), + availableViewportWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth, framePixelHeight = this.framesheet.getCurrentFrame().getHeight(), framePixelWidth = this.framesheet.getCurrentFrame().getWidth(); - var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth); + + if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) { + availableViewportWidth = availableViewportWidth - (framePixelWidth * Constants.GRID_STROKE_WIDTH); + availableViewportHeight = availableViewportHeight - (framePixelHeight * Constants.GRID_STROKE_WIDTH); + } + + var dpi = pskl.PixelUtils.calculateDPI( + availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth); return dpi; }; @@ -286,6 +295,19 @@ var dpi = this.calculateDPI_(); this.renderer.updateDPI(dpi); this.overlayRenderer.updateDPI(dpi); + + var currentFrameHeight = this.framesheet.getCurrentFrame().getHeight(); + var canvasHeight = currentFrameHeight * dpi; + if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) { + canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight; + } + + var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2); + $('#column-wrapper').css({ + 'top': verticalGapInPixel + 'px', + 'height': canvasHeight + 'px' + }); + this.forceRendering_(); }; })(); \ No newline at end of file