Enhancement : Shortcuts for onion kin + layer prev

Added 2 new icons : - Animated Preview Panel : toggle onion skin - Layers Toolbox : toggle layer preview Added an icon font generated with icomoon. SVGs for both icons have been made under Inkscape and are kept under misc/svg. All reference SVGs have been moved to misc/svg. Added 2 keyboard shortcuts for toggling onion skin / layer preview : - alt L : toggle layer preview - alt O : toggle onion skin
2023-08-10 21:12:52 +03:00 · 2014-07-05 11:27:11 +02:00
parent 24186d5aec
commit a77168986a
19 changed files with 380 additions and 69 deletions
--- a/src/css/font-icon.css
+++ b/src/css/font-icon.css
@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'piskel';
+  src:url('fonts/piskel.eot?-3olv93');
+  src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
+    url('fonts/piskel.woff?-3olv93') format('woff'),
+    url('fonts/piskel.ttf?-3olv93') format('truetype'),
+    url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="piskel-icon-"], [class*=" piskel-icon-"] {
+  font-family: 'piskel';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.piskel-icon-eye:before {
+  content: "\e600";
+}
+
+.piskel-icon-onion:before {
+  content: "\e601";
+}
+
--- a/src/css/fonts/piskel.eot
+++ b/src/css/fonts/piskel.eot
--- a/src/css/fonts/piskel.svg
+++ b/src/css/fonts/piskel.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#xe600;" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
+<glyph unicode="&#xe601;" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
+</font></defs></svg>
--- a/src/css/fonts/piskel.ttf
+++ b/src/css/fonts/piskel.ttf
--- a/src/css/fonts/piskel.woff
+++ b/src/css/fonts/piskel.woff
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -162,58 +162,7 @@ body {
 .canvas.onion-skin-canvas    {z-index: 10;}
 .canvas.canvas-overlay       {z-index: 11;}

-/**
- * Animated preview styles.
- */

-.preview-container {
-  border : 0px Solid black;
-  border-radius:5px 0px 0px 5px;
-  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
-  font-size: 0;
-}
-
-.preview-container .canvas-container {
-  overflow : hidden;
-}
-
-.preview-container canvas {
-  border : 0px Solid transparent;
-}
-
-#animated-preview-container {
-  background: #333;
-  border-radius : 0 0 2px 2px;
-  overflow : hidden;
-}
-
-#animated-preview-canvas-container {
-  height :200px;
-  width : 200px;
-}
-
-.tiled-frame-container {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-repeat : repeat;
-}
-
-.display-fps {
-  float: left;
-  color: #aaa;
-  font-size: 12px;
-  min-width: 55px;
-  vertical-align: bottom;
-  line-height: 24px;
-}
-
-.range-fps {
-  overflow: hidden;
-  width: 120px;
-  height : 24px;
-  margin : 0;
-}

 /**
 * User messages
--- a/src/css/toolbox-animated-preview.css
+++ b/src/css/toolbox-animated-preview.css
@@ -0,0 +1,74 @@
+/**
+ * Animated preview styles.
+ */
+
+.preview-container {
+  border : 0px Solid black;
+  border-radius:5px 0px 0px 5px;
+  box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
+  font-size: 0;
+}
+
+.preview-container .canvas-container {
+  overflow : hidden;
+}
+
+.preview-container canvas {
+  border : 0px Solid transparent;
+}
+
+#animated-preview-container {
+  background: #333;
+  border-radius : 0 0 2px 2px;
+  overflow : hidden;
+}
+
+#animated-preview-canvas-container {
+  height :200px;
+  width : 200px;
+}
+
+.tiled-frame-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-repeat : repeat;
+}
+
+.display-fps {
+  float: left;
+  color: #aaa;
+  font-size: 12px;
+  min-width: 55px;
+  vertical-align: bottom;
+  line-height: 24px;
+}
+
+.range-fps {
+  overflow: hidden;
+  width: 100px;
+  height : 24px;
+  margin : 0;
+}
+
+.preview-toggle-onion-skin {
+  font-size: 1.6rem;
+  color: #aaa;
+  float: left;
+  line-height: 24px;
+  height: 100%;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-right: 1px solid #222;
+  transition: 0.2s linear;
+  cursor:pointer;
+}
+
+.preview-toggle-onion-skin:hover {
+  color : white;
+}
+
+.preview-toggle-onion-skin-enabled,
+.preview-toggle-onion-skin-enabled:hover {
+  color : gold;
+}
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -10,6 +10,28 @@
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: 97%;
+  position: relative;
+}
+
+.layers-toggle-preview {
+  position: absolute;
+  top : 0.9em;
+  right: 3.3em;
+
+  color: #999;
+  font-size: 0.8em;
+  cursor: pointer;
+
+  transition: 0.2s linear;
+}
+
+.layers-toggle-preview:hover {
+  color: white;
+}
+
+.layers-toggle-preview-enabled,
+.layers-toggle-preview-enabled:hover {
+  color : gold;
 }

 .layers-list {
--- a/src/js/controller/AnimatedPreviewController.js
+++ b/src/js/controller/AnimatedPreviewController.js
@@ -16,16 +16,43 @@
    var frame = this.piskelController.getCurrentFrame();

    this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
-    this.updateZoom_();
+  };
+
+  ns.AnimatedPreviewController.prototype.init = function () {
+    // the oninput event won't work on IE10 unfortunately, but at least will provide a
+    // consistent behavior across all other browsers that support the input type range
+    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
+
+    this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
+    this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
+
+    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+
    $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));

-    pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
+    this.updateZoom_();
+    this.updateOnionSkinPreview_();
  };

-  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
-    this.updateZoom_();
-    this.updateContainerDimensions_();
+  ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.ONION_SKIN) {
+      this.updateOnionSkinPreview_();
+    } else {
+      this.updateZoom_();
+      this.updateContainerDimensions_();
+    }
+  };
+
+  ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
+    var enabledClassname = 'preview-toggle-onion-skin-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
+      this.toggleOnionSkinEl.classList.add(enabledClassname);
+    } else {
+      this.toggleOnionSkinEl.classList.remove(enabledClassname);
+    }
  };

  ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
@@ -49,14 +76,6 @@
    };
  };

-  ns.AnimatedPreviewController.prototype.init = function () {
-    // the oninput event won't work on IE10 unfortunately, but at least will provide a
-    // consistent behavior across all other browsers that support the input type range
-    // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
-    $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
-    document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
-  };
-
  ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
    this.setFPS(parseInt($("#preview-fps")[0].value, 10));
  };
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -7,16 +7,21 @@

  ns.LayersListController.prototype.init = function () {
    this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
-    this.rootEl = document.querySelectorAll('.layers-list-container')[0];
-    this.layersListEl = document.querySelectorAll('.layers-list')[0];
+    this.rootEl = document.querySelector('.layers-list-container');
+    this.layersListEl = document.querySelector('.layers-list');
+    this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');

    this.rootEl.addEventListener('click', this.onClick_.bind(this));
+    this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));

    $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));

    pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));

    this.renderLayerList_();
+    this.updateToggleLayerPreview_();
+
+    $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
  };

  ns.LayersListController.prototype.renderLayerList_ = function () {
@@ -25,6 +30,21 @@
    layers.forEach(this.addLayerItem.bind(this));
  };

+  ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
+    var enabledClassname = 'layers-toggle-preview-enabled';
+    if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
+      this.toggleLayerPreviewEl.classList.add(enabledClassname);
+    } else {
+      this.toggleLayerPreviewEl.classList.remove(enabledClassname);
+    }
+  };
+
+  ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
+    if (name == pskl.UserSettings.LAYER_PREVIEW) {
+      this.updateToggleLayerPreview_();
+    }
+  };
+
  ns.LayersListController.prototype.addLayerItem = function (layer, index) {
    var isSelected = this.piskelController.getCurrentLayer() === layer;
    var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -30,8 +30,12 @@
    get : function (key) {
      this.checkKeyValidity_(key);
      if (!(key in this.cache_)) {
-        this.cache_[key] =
-          this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+        var storedValue = this.readFromLocalStorage_(key);
+        if (typeof storedValue !== 'undefined' && storedValue !== null) {
+          this.cache_[key] = storedValue;
+        } else {
+          this.cache_[key] = this.readFromDefaults_(key);
+        }
      }
      return this.cache_[key];
    },
--- a/src/piskel-style-list.js
+++ b/src/piskel-style-list.js
@@ -3,6 +3,7 @@
 (typeof exports != "undefined" ? exports : pskl_exports).styles = [
  "css/reset.css",
  "css/style.css",
+  "css/font-icon.css",
  "css/forms.css",
  "css/settings.css",
  "css/tools.css",
@@ -13,6 +14,7 @@
  "css/toolbox.css",
  "css/toolbox-layers-list.css",
  "css/toolbox-palettes-list.css",
+  "css/toolbox-animated-preview.css",
  "css/spectrum/spectrum.css",
  "css/spectrum/spectrum-overrides.css",
  "css/bootstrap/bootstrap.css",
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -1,5 +1,10 @@
 <div class="toolbox-container layers-list-container">
-  <h3 class="toolbox-title layers-title">Layers</h3>
+  <h3 class="toolbox-title layers-title">Layers
+    <div title="Toggle layer preview (alt+L)"
+         rel="tooltip"
+         data-placement="top"
+         class="layers-toggle-preview piskel-icon-eye"></div>
+  </h3>
  <div class="toolbox-button-container layers-button-container">
    <button class="button toolbox-button" data-action="add"  >Add</button>
    <button class="button toolbox-button" data-action="delete"  >Delete</button>
--- a/src/templates/preview.html
+++ b/src/templates/preview.html
@@ -3,6 +3,10 @@
    <div class="canvas-background"></div>
  </div>
  <div>
+    <div title="Toggle onion skin (alt+O)"
+         rel="tooltip"
+         data-placement="bottom"
+         class="piskel-icon-onion preview-toggle-onion-skin"></div>
    <span id="display-fps" class="display-fps"></span>
    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
  </div>