happo 2.7.7 → 2.8.0

data/lib/happo/public/HappoDiffs.jsx

@@ -1,391 +0,0 @@
-/* global React */
-/* eslint-disable react/no-multi-comp */
-const PropTypes = React.PropTypes;
-
-const VIEWS = {
-  SIDE_BY_SIDE: 'Side-by-side',
-  SWIPE: 'Swipe',
-  DIFF: 'Diff',
-};
-
-const imageShape = {
-  description: PropTypes.string.isRequired,
-  viewport: PropTypes.string.isRequired,
-  diff: PropTypes.string,
-  previous: PropTypes.string,
-  current: PropTypes.string.isRequired,
-};
-
-function imageSlug(image) {
-  return btoa(image.description + image.viewport);
-}
-
-function InlineLink({ children, to }) {
-  return (
-    <a className='InlineLink' href={`#${to}`}>
-      {children}
-    </a>
-  );
-}
-InlineLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  to: PropTypes.string.isRequired,
-};
-
-function ImageHeading({ image }) {
-  return (
-    <h3 id={imageSlug(image)}>
-      <InlineLink to={imageSlug(image)}>
-        {image.description}
-        {' @ '}
-        {image.viewport}
-      </InlineLink>
-    </h3>
-  );
-}
-ImageHeading.propTypes = {
-  image: PropTypes.shape(imageShape).isRequired,
-};
-
-function NewImage({ image }) {
-  return (
-    <div>
-      <ImageHeading
-        image={image}
-      />
-      <img
-        role='presentation'
-        src={image.current}
-      />
-    </div>
-  );
-}
-NewImage.propTypes = {
-  image: PropTypes.shape(imageShape).isRequired,
-};
-
-function DiffImages({ images }) {
-  if (!images.length) {
-    return null;
-  }
-
-  return (
-    <div>
-      <h2 id='diffs'>
-        <InlineLink to='diffs'>
-          Diffs ({ images.length })
-        </InlineLink>
-      </h2>
-
-      {images.map((image) => (
-        <DiffController
-          key={image.current}
-          image={image}
-        />
-      ))}
-    </div>
-  );
-}
-DiffImages.propTypes = {
-  images: PropTypes.arrayOf(PropTypes.shape(imageShape)).isRequired,
-};
-
-function NewImages({ images }) {
-  if (!images.length) {
-    return null;
-  }
-
-  return (
-    <div>
-      <h2 id='new'>
-        <InlineLink to='new'>
-          New examples ({ images.length })
-        </InlineLink>
-      </h2>
-
-      {images.map((image) => (
-        <NewImage
-          key={image.current}
-          image={image}
-        />
-      ))}
-    </div>
-  );
-}
-NewImages.propTypes = {
-  images: PropTypes.arrayOf(PropTypes.shape(imageShape)).isRequired,
-};
-
-function maxImageSize(...imageUrls) {
-  const dimensions = {};
-
-  return new Promise((resolve, reject) => {
-    imageUrls.forEach((url, i) => {
-      const image = new Image();
-
-      image.onerrer = function handleImageError(e) {
-        reject(e);
-      };
-
-      image.onload = function handleImageLoad() {
-        const { width, height } = this;
-
-        // Use the index in case the URL is somehow duplicated.
-        dimensions[i] = { width, height };
-
-        if (Object.keys(dimensions).length >= imageUrls.length) {
-          // We are done, so compute the max width and height and resolve.
-          const values = Object.keys(dimensions).map(key => dimensions[key]);
-          const maxWidth = Math.max(...values.map(value => value.width));
-          const maxHeight = Math.max(...values.map(value => value.height));
-          resolve({ width: maxWidth, height: maxHeight });
-        }
-      };
-
-      image.src = url;
-    });
-  });
-}
-
-class Swiper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      cursorLeft: 0,
-      height: 'auto',
-      width: 'auto',
-    };
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-  }
-
-  componentWillMount() {
-    this.updateSize(this.props)
-      .then(({ width }) => {
-        // Start in the center
-        this.setState({ cursorLeft: width / 2 });
-      });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.updateSize(nextProps);
-  }
-
-  updateSize({ current, previous }) {
-    const sizes = maxImageSize(current, previous)
-      .then(({ width, height }) => {
-        this.setState({ width, height });
-        return { width, height };
-      });
-
-    return Promise.resolve(sizes);
-  }
-
-  handleMouseMove(event) {
-    this.setState({
-      cursorLeft: event.pageX - event.target.offsetLeft,
-    });
-  }
-
-  render() {
-    const { previous, current } = this.props;
-    const { cursorLeft, height, width } = this.state;
-
-    return (
-      <div
-        className='Swiper'
-        style={{ height, width }}
-        onMouseMove={this.handleMouseMove}
-      >
-        <div
-          className='Swiper__image'
-          style={{ width: cursorLeft }}
-        >
-          <img
-            src={previous}
-            role='presentation'
-          />
-        </div>
-
-        <div
-          className='Swiper__image'
-          style={{
-            transform: `translateX(${cursorLeft}px)`,
-            width: width - cursorLeft,
-          }}
-        >
-          <img
-            src={current}
-            style={{
-              transform: `translateX(-${cursorLeft}px)`,
-            }}
-            role='presentation'
-          />
-        </div>
-
-        <div
-          className='Swiper__cursor'
-          style={{
-            transform: `translateX(${cursorLeft}px)`,
-          }}
-        />
-      </div>
-    );
-  }
-}
-Swiper.propTypes = {
-  previous: PropTypes.string.isRequired,
-  current: PropTypes.string.isRequired,
-};
-
-function SideBySide({ previous, current }) {
-  return (
-    <div className='SideBySide'>
-      <img
-        className='SideBySide__image'
-        role='presentation'
-        src={previous}
-        title='Before'
-      />
-      {' '}
-      <img
-        className='SideBySide__image'
-        role='presentation'
-        src={current}
-        title='After'
-      />
-    </div>
-  );
-}
-SideBySide.propTypes = {
-  previous: PropTypes.string.isRequired,
-  current: PropTypes.string.isRequired,
-};
-
-function SelectedView({ image, selectedView }) {
-  if (selectedView === VIEWS.SIDE_BY_SIDE) {
-    return (
-      <SideBySide
-        previous={image.previous}
-        current={image.current}
-      />
-    );
-  }
-
-  if (selectedView === VIEWS.DIFF) {
-    return (
-      <img role='presentation' src={image.diff} />
-    );
-  }
-
-  if (selectedView === VIEWS.SWIPE) {
-    return (
-      <Swiper
-        previous={image.previous}
-        current={image.current}
-      />
-    );
-  }
-}
-SelectedView.propTypes = {
-  image: PropTypes.shape(imageShape).isRequired,
-  selectedView: PropTypes.oneOf(Object.keys(VIEWS).map(key => VIEWS[key])).isRequired,
-};
-
-class DiffController extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedView: VIEWS.SIDE_BY_SIDE,
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(view) {
-    this.setState({ selectedView: view });
-  }
-
-  render() {
-    return (
-      <Diff
-        image={this.props.image}
-        selectedView={this.state.selectedView}
-        onClick={this.handleClick}
-      />
-    );
-  }
-}
-DiffController.propTypes = {
-  image: PropTypes.shape(imageShape).isRequired,
-};
-
-function Diff({ image, selectedView, onClick }) {
-  return (
-    <div>
-      <ImageHeading
-        image={image}
-      />
-      <div className='Diff__buttons'>
-        {Object.keys(VIEWS).map(key => VIEWS[key]).map((view, i) => {
-          const classes = ['Diff__button'];
-          if (i === 0) {
-            classes.push('Diff__button--first');
-          } else if (i === Object.keys(VIEWS).length - 1) {
-            classes.push('Diff__button--last');
-          }
-
-          return (
-            <button
-              key={view}
-              className={classes.join(' ')}
-              aria-pressed={view === selectedView}
-              onClick={() => { onClick(view); }}
-            >
-              {view}
-            </button>
-          );
-        })}
-      </div>
-      <div className='Diff__images'>
-        <SelectedView image={image} selectedView={selectedView} />
-      </div>
-    </div>
-  );
-}
-Diff.propTypes = {
-  image: PropTypes.shape(imageShape).isRequired,
-  onClick: PropTypes.func.isRequired,
-  selectedView: PropTypes.oneOf(Object.keys(VIEWS).map(key => VIEWS[key])).isRequired,
-};
-
-function HappoDiffs({ pageTitle, generatedAt, diffImages, newImages }) {
-  return (
-    <div>
-      <header className='HappoDiffs__header'>
-        <h1 className='HappoDiffs__headerTitle'>
-          {pageTitle}
-        </h1>
-        <div className='HappoDiffs__headerTime'>
-          Generated: {generatedAt}
-        </div>
-      </header>
-
-      <main className='HappoDiffs__main'>
-        <DiffImages
-          images={diffImages}
-        />
-        <NewImages
-          images={newImages}
-        />
-      </main>
-    </div>
-  );
-}
-HappoDiffs.propTypes = {
-  pageTitle: PropTypes.string.isRequired,
-  diffImages: PropTypes.arrayOf(imageShape).isRequired,
-  newImages: PropTypes.arrayOf(imageShape).isRequired,
-  generatedAt: PropTypes.string.isRequired,
-};
-
-window.HappoDiffs = HappoDiffs;

data/lib/happo/snapshot_comparer.rb

@@ -1,81 +0,0 @@
-require 'oily_png'
-require 'diff-lcs'
-require_relative 'snapshot_comparison_image/base'
-require_relative 'snapshot_comparison_image/gutter'
-require_relative 'snapshot_comparison_image/overlayed'
-
-module Happo
-  # This class is responsible for comparing two Snapshots and generating a diff.
-  class SnapshotComparer
-    # @param png_before [ChunkyPNG::Image]
-    # @param png_after  [ChunkyPNG::Image]
-    def initialize(png_before, png_after)
-      @png_after  = png_after
-      @png_before = png_before
-    end
-
-    # @return [Hash]
-    def compare!
-      no_diff = {
-        diff_in_percent: 0,
-        diff_image: nil,
-      }
-
-      # If these images are totally identical, we don't need to do any more
-      # work.
-      return no_diff if @png_before == @png_after
-
-      array_before = to_array_of_arrays(@png_before)
-      array_after = to_array_of_arrays(@png_after)
-
-      # If the arrays of arrays of colors are identical, we don't need to do any
-      # more work. This might happen if some of the headers are different.
-      return no_diff if array_before == array_after
-
-      sdiff = Diff::LCS.sdiff(array_before, array_after)
-      number_of_different_rows = 0
-
-      sprite, all_comparisons = initialize_comparison_images(
-        [@png_after.width, @png_before.width].max, sdiff.size
-      )
-
-      sdiff.each_with_index do |row, y|
-        # each row is a Diff::LCS::ContextChange instance
-        all_comparisons.each { |image| image.render_row(y, row) }
-        number_of_different_rows += 1 unless row.unchanged?
-      end
-
-      percent_changed = number_of_different_rows.to_f / sdiff.size * 100
-      {
-        diff_in_percent: percent_changed,
-        diff_image:      (sprite if percent_changed > 0.0),
-      }
-    end
-
-    private
-
-    # @param [ChunkyPNG::Image]
-    # @return [Array<Array<Integer>>]
-    def to_array_of_arrays(chunky_png)
-      array_of_arrays = []
-      chunky_png.height.times do |y|
-        array_of_arrays << chunky_png.row(y)
-      end
-      array_of_arrays
-    end
-
-    # @param canvas [ChunkyPNG::Image] The output image to draw pixels on
-    # @return [Array<SnapshotComparisonImage>]
-    def initialize_comparison_images(width, height)
-      gutter_width = Happo::SnapshotComparisonImage::Gutter::WIDTH
-      total_width = gutter_width + width
-
-      sprite = ChunkyPNG::Image.new(total_width, height)
-      offset, comparison_images = 0, []
-      comparison_images << Happo::SnapshotComparisonImage::Gutter.new(offset, sprite)
-      offset += gutter_width
-      comparison_images << Happo::SnapshotComparisonImage::Overlayed.new(offset, sprite)
-      [sprite, comparison_images]
-    end
-  end
-end

data/lib/happo/snapshot_comparison_image/base.rb

@@ -1,108 +0,0 @@
-require 'chunky_png'
-
-module Happo
-  module SnapshotComparisonImage
-    # This model represents a "comparison image". Basically it's just a wrapper
-    # around a ChunkyPNG image with some nice methods to make life easier in the
-    # world of diffs.
-    #
-    # This model is never persisted.
-    class Base
-      include ChunkyPNG::Color
-
-      BASE_OPACITY    = 0.1
-      BASE_ALPHA      = (255 * BASE_OPACITY).round
-      BASE_DIFF_ALPHA = BASE_ALPHA * 2
-
-      MAGENTA = ChunkyPNG::Color.from_hex '#b33682'
-      RED     = ChunkyPNG::Color.from_hex '#dc322f'
-      GREEN   = ChunkyPNG::Color.from_hex '#859900'
-
-      # @param offset [Integer] the x-offset that this comparison image should
-      #   use when rendering on the canvas image.
-      # @param canvas [ChunkyPNG::Image] The canvas image to render pixels on.
-      def initialize(offset, canvas)
-        @offset = offset
-        @canvas = canvas
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_row(y, row)
-        if row.unchanged?
-          render_unchanged_row(y, row)
-        elsif row.deleting?
-          render_deleted_row(y, row)
-        elsif row.adding?
-          render_added_row(y, row)
-        else # changing?
-          render_changed_row(y, row)
-        end
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_unchanged_row(y, row)
-        row.new_element.each_with_index do |pixel, x|
-          # Render the unchanged pixel as-is
-          render_pixel(x, y, pixel)
-        end
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_changed_row(y, row)
-        # no default implementation
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_added_row(y, row)
-        # no default implementation
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_deleted_row(y, row)
-        # no default implementation
-      end
-
-      # Compute a score that represents the difference between 2 pixels
-      #
-      # This method simply takes the Euclidean distance between the RGBA channels
-      # of 2 colors over the maximum possible Euclidean distance. This gives us a
-      # percentage of how different the two colors are.
-      #
-      # Although it would be more perceptually accurate to calculate a proper
-      # Delta E in Lab colorspace, we probably don't need perceptual accuracy for
-      # this application, and it is nice to avoid the overhead of converting RGBA
-      # to Lab.
-      #
-      # @param pixel_after [Integer]
-      # @param pixel_before [Integer]
-      # @return [Float] number between 0 and 1 where 1 is completely different
-      #   and 0 is no difference
-      def pixel_diff_score(pixel_after, pixel_before)
-        ChunkyPNG::Color::euclidean_distance_rgba(pixel_after, pixel_before) /
-          ChunkyPNG::Color::MAX_EUCLIDEAN_DISTANCE_RGBA
-      end
-
-      # @param diff_score [Float]
-      # @return [Integer] a number between 0 and 255 that represents the alpha
-      #   channel of of the difference
-      def diff_alpha(diff_score)
-        (BASE_DIFF_ALPHA + ((255 - BASE_DIFF_ALPHA) * diff_score)).round
-      end
-
-      # Renders a pixel on the specified x and y position. Uses the offset that
-      # the comparison image has been configured with.
-      #
-      # @param x [Integer]
-      # @param y [Integer]
-      # @param pixel [Integer]
-      def render_pixel(x, y, pixel)
-        @canvas.set_pixel(x + @offset, y, pixel)
-      end
-    end
-  end
-end

data/lib/happo/snapshot_comparison_image/gutter.rb

@@ -1,34 +0,0 @@
-module Happo
-  module SnapshotComparisonImage
-    # This class renders a gutter-column with a color representing the type of
-    # change that has happened.
-    class Gutter < SnapshotComparisonImage::Base
-      WIDTH = 10
-      GRAY  = ChunkyPNG::Color.from_hex '#cccccc'
-
-      def render_row(y, row)
-        WIDTH.times do |x|
-          render_pixel(x, y, gutter_color(row))
-        end
-        # render a two-pixel empty column
-        2.times do |x|
-          render_pixel(WIDTH - 1 - x, y, WHITE)
-        end
-      end
-
-      private
-
-      def gutter_color(row)
-        if row.unchanged?
-          WHITE
-        elsif row.deleting?
-          RED
-        elsif row.adding?
-          GREEN
-        else # changed?
-          GRAY
-        end
-      end
-    end
-  end
-end

data/lib/happo/snapshot_comparison_image/overlayed.rb

@@ -1,88 +0,0 @@
-module Happo
-  module SnapshotComparisonImage
-    # This subclass of `SnapshotComparisonImage` knows how to overlay the
-    # after-image on top of the before-image, and render the difference in a
-    # scaled magenta color.
-    class Overlayed < SnapshotComparisonImage::Base
-      WHITE_OVERLAY = ChunkyPNG::Color.fade(WHITE, 1 - BASE_ALPHA)
-
-      # @param offset [Integer]
-      # @param canvas [ChunkyPNG::Image]
-      # @see SnapshotComparisonImage::Base
-      def initialize(offset, canvas)
-        @diff_pixels  = {}
-        @faded_pixels = {}
-        super
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_unchanged_row(y, row)
-        # Render translucent original pixels
-        row.new_element.each_with_index do |pixel, x|
-          render_faded_pixel(x, y, pixel)
-        end
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_deleted_row(y, row)
-        row.old_element.each_with_index do |pixel_before, x|
-          render_faded_magenta_pixel(TRANSPARENT, pixel_before, x, y)
-        end
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_added_row(y, row)
-        row.new_element.each_with_index do |pixel_after, x|
-          render_faded_magenta_pixel(pixel_after, TRANSPARENT, x, y)
-        end
-      end
-
-      # @param y [Integer]
-      # @param row [Diff::LCS:ContextChange]
-      def render_changed_row(y, row)
-        row.old_element.zip(row.new_element).each_with_index do |pixels, x|
-          pixel_before, pixel_after = pixels
-          render_faded_magenta_pixel(
-            pixel_after  || TRANSPARENT,
-            pixel_before || TRANSPARENT,
-            x, y)
-        end
-      end
-
-      private
-
-      # @param pixel_after [Integer]
-      # @param pixel_before [Integer]
-      # @param x [Integer]
-      # @param y [Integer]
-      def render_faded_magenta_pixel(pixel_after, pixel_before, x, y)
-        score = pixel_diff_score(pixel_after, pixel_before)
-        if score > 0
-          render_diff_pixel(x, y, score)
-        else
-          render_faded_pixel(x, y, pixel_after)
-        end
-      end
-
-      # @param x [Integer]
-      # @param y [Integer]
-      # @param score [Float]
-      def render_diff_pixel(x, y, score)
-        @diff_pixels[score] ||= compose_quick(fade(MAGENTA, diff_alpha(score)),
-                                              WHITE)
-        render_pixel(x, y, @diff_pixels[score])
-      end
-
-      # @param x [Integer]
-      # @param y [Integer]
-      # @param pixel [Integer]
-      def render_faded_pixel(x, y, pixel)
-        @faded_pixels[pixel] ||= compose_quick(WHITE_OVERLAY, pixel)
-        render_pixel(x, y, @faded_pixels[pixel])
-      end
-    end
-  end
-end