From 4618cb643a0913d53c32ca2a23eca5e0174ff39c Mon Sep 17 00:00:00 2001 From: Vince Date: Wed, 19 Jun 2013 19:01:12 +0200 Subject: [PATCH 1/3] 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 From 07ced5a3b2cbfc9f83dfc734a6db4f290bb35401 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 20 Jun 2013 00:05:23 +0200 Subject: [PATCH 2/3] Exclude add-frame-button from sortable items in preview-film --- js/controller/PreviewFilmController.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index a80f3db9..e317497c 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -94,10 +94,11 @@ * @private */ ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () { - + $("#preview-list").sortable({ placeholder: "preview-tile-drop-proxy", - update: $.proxy(this.onUpdate_, this) + update: $.proxy(this.onUpdate_, this), + items: "li:not(#add-frame-action)" }); $("#preview-list").disableSelection(); }; From a01afe2cfddfd4ecd4a4c40b6f74971b69792851 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Thu, 20 Jun 2013 00:32:53 +0200 Subject: [PATCH 3/3] Changed sortable items selector to a more robust one --- js/controller/PreviewFilmController.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index e317497c..456f6c9b 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -94,11 +94,11 @@ * @private */ ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () { - + $("#preview-list").sortable({ placeholder: "preview-tile-drop-proxy", update: $.proxy(this.onUpdate_, this), - items: "li:not(#add-frame-action)" + items: ".preview-tile" }); $("#preview-list").disableSelection(); };