Merge branch 'develop'

spring-raining · Apr 30, 2016 · 1ea2cb5 · 1ea2cb5
2 parents 4a23115 + d1dccda
commit 1ea2cb5
Show file tree

Hide file tree

Showing 9 changed files with 500 additions and 79 deletions.
diff --git a/css/_defs.scss b/css/_defs.scss
@@ -72,6 +72,8 @@ $color-modal-body:                   $color-black;
 $color-modal-wall-bg:               rgba(127, 127, 127, 0.5);
 $color-render-gif-modal-download-body:          $color-white;
 $color-render-gif-modal-download-bg:            rgba(0, 0, 0, 0.6);
+$color-scroll-bar-bg:               rgba(0, 0, 0, 0.1);
+$color-scroll-bar-slider-bg:        rgba(255, 255, 255, 0.2);
 
 /*
  *  Lists of z-index order.
@@ -82,7 +84,7 @@ $z-order: (
         anyway:                     base,
         menu:                       base,
         modal:                      wall body,
-        timeline:                   base timetable left header summary
+        timeline:                   base timetable left header summary scale-scroller
                                     timetable-entity-handle timetable-layer-handle,
         base:                       base,
 );
@@ -107,6 +109,9 @@ $timeline-layer-height:             48px;
 $timeline-layer-handle-width:       20px;
 $timeline-layer-header-font-size:   12px;
 $timeline-layer-header-button-size: 22px;
+$timeline-timetable-padding-bottom: 20px;
+$timeline-scale-scrollbar-height:   22px;
+$timeline-scale-scrollbar-button-width: 25px;
 
 $modal-title-height:                60px;
 $modal-footer-height:               60px;

diff --git a/css/elements/_scroll.scss b/css/elements/_scroll.scss
@@ -1,18 +1,5 @@
 @import "../defs";
 
-.scroll-box {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .scroll {
-    width: 100%;
-    height: 100%;
-    box-sizing: content-box;
-    padding: 0 30px 30px 0;
-  }
-}
-
 .scroll__box {
   position: relative;
   width: 100%;
@@ -26,8 +13,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  // TODO: hide default scroll bar and make custom scroll bar
-  //overflow: hidden;
+  overflow: hidden;
 
   &.scroll-x {
     bottom: $scroll-bar-width;
@@ -38,18 +24,43 @@
   }
 }
 
-.scroll__bar-x {
+.scroll__bar {
   position: absolute;
+  overflow: hidden;
+  background-color: $color-scroll-bar-bg;
+
+  .scroll__bar__slider {
+    position: absolute;
+    @include giraf-card(2);
+    margin: 0;
+    padding: 0;
+    background-color: $color-scroll-bar-slider-bg;
+  }
+
+  .scroll__bar__before,
+  .scroll__bar__after {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.scroll__bar-x {
   bottom: 0;
-  width: 100%;
+  @include calc(width, "100% - #{$scroll-bar-width}");
   height: $scroll-bar-width;
-  pointer-events: none;
+
+  .scroll__bar__slider {
+    height: 100%;
+  }
 }
 
 .scroll__bar-y {
-  position: absolute;
   right: 0;
   width: $scroll-bar-width;
-  height: 100%;
-  pointer-events: none;
+  @include calc(height, "100% - #{$scroll-bar-width}");
+
+  .scroll__bar__slider {
+    width: 100%;
+  }
 }
diff --git a/css/elements/_timeline.scss b/css/elements/_timeline.scss
@@ -130,10 +130,52 @@
   overflow: hidden;
 }
 
+.timeline__scale-scroller {
+  @include giraf-shadow(1);
+  @include calculate-z-index(timeline, scale-scroller);
+  @include font-smoothing();
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: $timeline-summary-width;
+  height: $timeline-scale-scrollbar-height;
+  overflow: hidden;
+  background-color: $color-timeline-bg;
+
+  button {
+    @include giraf-flat-button($color-white);
+    padding: 0;
+    width: $timeline-scale-scrollbar-button-width;
+    height: 100%;
+    font-size: 8px;
+  }
+
+  .timeline__scale-scroller__zoom-out {
+    position: absolute;
+    left: 0;
+  }
+
+  .timeline__scale-scroller__zoom-in {
+    position: absolute;
+    right: 0;
+  }
+
+  .form-range {
+    position: absolute;
+    top: 0;
+    left: $timeline-scale-scrollbar-button-width;
+    width: $timeline-summary-width - $timeline-scale-scrollbar-button-width * 2;
+    height: 100%;
+
+    input {
+      height: 100%;
+    }
+  }
+}
+
 .timeline__header {
   background-color: $color-timeline-header-bg;
   height: $timeline-summary-height;
-  min-width: 100%;
 }
 
 .timeline__time-controller {
@@ -166,13 +208,14 @@
 .timeline__left {
   width: $timeline-summary-width;
   padding-top: $timeline-summary-height;
+  padding-bottom: $timeline-timetable-padding-bottom;
 }
 
 .timeline__timetable {
   position: relative;
   min-height: 100%;
-  min-width: 100%;
   padding-top: $timeline-summary-height;
+  padding-bottom: $timeline-timetable-padding-bottom;
 }
 
 .timeline__timetable-overlay {
@@ -204,7 +247,8 @@
 }
 
 .timeline__left-container,
-.timeline__summary {
+.timeline__summary,
+.timeline__scale-scroller {
   border-right: 2px solid $color-timeline-grid;
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "giraf",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Powerful & Free GIF Creator",
   "main": "main.js",
   "scripts": {

diff --git a/src/utils/readGIF.js b/src/utils/readGIF.js
@@ -35,6 +35,7 @@ export default (objectURL) => {
     let frames = [];
     let frameInfo = null;
     let header = null;
+    let cachedContext = null;
 
     const hdrCallback = (hdr) => {
       header = hdr;
@@ -52,27 +53,69 @@ export default (objectURL) => {
 
     const imgCallback = (img) => {
       let colorTable = img.lctFlag ? img.lct : header.gct;
-      let delayTime = frameInfo ? frameInfo.delayTime : null;
+      let delayTime = (frameInfo && frameInfo.delayTime)
+        ? frameInfo.delayTime * 10 // (1 delayTime = 10 msec)
+        : null;
       let transparencyIndex = frameInfo ? frameInfo.transparencyIndex : null;
 
-      let imageData = context.getImageData(img.leftPos, img.topPos, img.width, img.height);
-      for (let i = 0; i < img.pixels.length; i++) {
-        let pixel = img.pixels[i];
-        if (transparencyIndex === pixel) {
-          // This code don't support the disposal method yet.
-          imageData.data[i * 4 + 3] = 0;
+      const restore = () => {
+        if (cachedContext === null) {
+          let cachedCanvas = document.createElement("canvas");
+          cachedCanvas.width = header.width;
+          cachedCanvas.height = header.height;
+          cachedContext = cachedCanvas.getContext("2d");
+
+          let imageData = context.getImageData(0, 0, header.width, header.height);
+          cachedContext.putImageData(imageData, 0, 0);
         }
         else {
-          imageData.data[i * 4]     = colorTable[pixel][0];
-          imageData.data[i * 4 + 1] = colorTable[pixel][1];
-          imageData.data[i * 4 + 2] = colorTable[pixel][2];
-          imageData.data[i * 4 + 3] = 255;
+          let cachedImageData = cachedContext.getImageData(0, 0, header.width, header.height);
+          context.putImageData(cachedImageData, 0, 0);
         }
+      };
+
+      const draw = (fillBackground = false) => {
+        let imageData = context.getImageData(img.leftPos, img.topPos, img.width, img.height);
+        let cachedImageData = (fillBackground && cachedContext !== null)
+          ? cachedContext.getImageData(0, 0, header.width, header.height)
+          : null;
+
+        for (let i = 0; i < img.pixels.length; i++) {
+          let pixel = img.pixels[i];
+          if (transparencyIndex !== pixel) {
+            imageData.data[i * 4]     = colorTable[pixel][0];
+            imageData.data[i * 4 + 1] = colorTable[pixel][1];
+            imageData.data[i * 4 + 2] = colorTable[pixel][2];
+            imageData.data[i * 4 + 3] = 255;
+          }
+          if (fillBackground) {
+            cachedImageData.data[i * 4 + 3] = 0;
+          }
+        }
+        context.putImageData(imageData, img.leftPos, img.topPos);
+      };
+
+      switch (frameInfo.disposalMethod) {
+        case 0:     // No disposal specified
+          draw();
+          cachedContext = null;
+          break;
+        case 1:     // Do not dispose
+          draw();
+          cachedContext = null;
+          break;
+        case 2:     // Restore to background color
+          restore();
+          draw(true);
+          break;
+        case 3:     // Restore to previous
+          restore();
+          draw();
+          break;
       }
-      context.putImageData(imageData, img.leftPos, img.topPos);
       frames.push({
         imageData: context.getImageData(0, 0, header.width, header.height),
-        delayTime: delayTime * 10, // (1 delayTime = 10 msec)
+        delayTime: delayTime,
       });
       frameInfo = null;
     };

diff --git a/src/views/forms.jsx b/src/views/forms.jsx
@@ -396,6 +396,37 @@ export const Progress = React.createClass({
   },
 });
 
+export const Range = React.createClass({
+  propTypes() {
+    return {
+      value:        React.PropTypes.number.isRequired,
+      name:         React.PropTypes.string,
+      min:          React.PropTypes.number,
+      max:          React.PropTypes.number,
+      step:         React.PropTypes.number,
+    };
+  },
+
+  render() {
+    return (
+      <div className="form form-range">
+        <NativeRange value={this.props.value}
+                     name={this.props.name}
+                     min={this.props.min}
+                     max={this.props.max}
+                     step={this.props.step}
+                     onChange={this._onChange} />
+      </div>
+    );
+  },
+
+  _onChange(e) {
+    if (this.props.onChange) {
+      this.props.onChange(e.target.value);
+    }
+  },
+});
+
 export const Select = React.createClass({
   propTypes() {
     return {
@@ -612,6 +643,7 @@ export default {
   Checkbox: Checkbox,
   Number: Number,
   Progress: Progress,
+  Range: Range,
   Select: Select,
   ScriptArea: ScriptArea,
   Text: Text,

diff --git a/src/views/preview/player.jsx b/src/views/preview/player.jsx
@@ -244,17 +244,17 @@ var Player = React.createClass({
 
         return new Promise((resolve, reject) => {
           new Promise((resolve_, reject_) => {
+            this_.setState({
+              currentGIFFrame: time,
+            });
             setTimeout(() => {
               resolve_();
-            }, (frame.delayTime !== 0) ? frame.delayTime : 100);
+            }, (frame.delayTime > 0) ? frame.delayTime : 100);
           }).then(
             (result) => {
               if (!this_.state.isPlaying) {
                 reject();
               }
-              this_.setState({
-                currentGIFFrame: time,
-              });
               const t = (time + 1 < this_.props.item.gifFrames.length) ? time + 1 : 0;
               resolve(t);
             },