silicon-hex-table.html

<link rel="import" href="../polymer/polymer.html">

<!--
An efficient hex table for all your online hexadecimal needs.

Specify an `offset` into `bytes`, and the table will automatically populate
the offset, hexadecimal, and ASCII tables with what it finds
 (or '--' if it goes beyond the length of `bytes`).

Example:


    <silicon-hex-table offset="0x0" bytes="[[uint8array]]"></silicon-hex-table>


Please **NOTE** the `bytes` must be a `Uint8Array` for now;
in the future, a base64 encoded string will also be accepted.

If you data-bind to `offset` and modify it, the table automatically adjusts itself,
and displays the values (if any) after that offset.
Negative offsets are accepted, but that's crazy and means nothing,
so don't rely on that behavior.

If you want a smaller or larger table, change the `rows` property to the
desired value, and the table will automatically adjust itself.
More rows means more updates, so be careful.

Unless you specify `no-select` or set `noSelect = true`,
dragging/selecting across the hex table will select that portion of bytes.

To programmatically initiate this, call `selectRange(start, count)`,
where start is the `offset` to start selecting at, and `count`
is the amount.

### Styling

The table is themeable via the following CSS custom properties.

Custom property | Description | Default
:---------------|:------------|:-------|
`--highlight-color`| Mouse highlight color | `#f0f3a9`
`--selected-color`| Selected bytes highlight color | `#f0f0a0`
`--ascii-color` | Color of the ASCII table characters | `blue`
`--hex-color` | Color of the hexadecimal bytes |`#333`
`--header-color` | Color of the table header | `#ccc`
`--background-color` | Background color of the table | `#fafafa`
`--offset-color` | Offset column color | `#bd8d00`
`--font-size` | Font size | `16px`

@demo
-->
<dom-module id="silicon-hex-table">
  <template>
    <style>
      :host {
        display: block;
        --highlight-color: #f0f3a9;
        --selected-color: #f0f0a0;
        --ascii-color: blue;
        --hex-color: #333;
        --column-padding: 0px;
        --inner-column-padding: 0px;
        --header-color: #ccc;
        --background-color: #fafafa;
        --offset-color: #bd8d00;
        --font-size: 16px;
        font-size: var(--font-size);
        font-family: 'Inconsolata', monospace;
      }

      div {
        display: inline-block;
        background: var(--header-color);
      }

      table {
        display: inline-block;
        background: var(--background-color);
        color: var(--hex-color);
        border: 0px;
        border-collapse: collapse;
        border-spacing: 0px 0px;
        padding: 0px;
      }

      td,
      th {
        border: 0px;
        margin: 0px;
        padding-right: var(--column-padding);
        font-weight: normal;
      }

      .header {
        background: var(--header-color);
      }

      .asciiheader span {
        color: var(--ascii-color);
      }

      .selected {
        background: var(--selected-color);
      }

      .highlighted {
        background-color: var(--highlight-color);
      }

      .offsets {
        color: var(--offset-color);
      }

      ::selection {
        background: #fff;
        color: var(--text-color);
        opacity: .25;
      }

      ::-moz-selection {
        background: #fff;
        color: var(--text-color);
        opacity: .25;
      }
    </style>

    <div>

      <table id="offsetTable">
        <tr class="header">
          <th>
            <span>87654321</span>
          </th>
        </tr>
        <template is="dom-repeat" items="[[_table]]" as="row">
          <tr>
            <td class="offsets">
              <span>[[_getOffset(offset, index)]]</span>
            </td>
          </tr>
        </template>
      </table>

      <table id="hexTable">
        <tr class="header">
          <th>
            <template is="dom-repeat" items="[[_header]]">
              <span class="hexheader">[[item]]</span>
            </template>
          </th>
        </tr>
        <template is="dom-repeat" items="[[_table]]" as="row">
          <tr>
            <td class="bytes">
              <template is="dom-repeat" items="[[_get(row)]]" as="col">
                <span id$="[[col.id]]" class$="[[_computeSelected(_selectedSet, col.id)]]">[[_getHex(_bytes, offset, col)]]</span>
              </template>
            </td>
          </tr>
        </template>
      </table>

      <table id="asciiTable">
        <tr class="header">
          <th>
            <!-- because http://stackoverflow.com/questions/31846667/dom-repeat-with-span-whitespace-solution -->
            <template is="dom-repeat" items="[[_asciiheader]]"><span>[[item]]</span></template>
          </th>
        </tr>

        <template is="dom-repeat" items="[[_table]]" as="row">
          <tr>
            <td class="asciiheader">
              <template is="dom-repeat" items="[[_get(row)]]" as="col"><span id$="[[col.hid]]" class$="[[_computeSelected(_selectedSet, col.id)]]">[[_getAscii(_bytes, offset, col)]]</span></template>
            </td>
          </tr>
        </template>
      </table>

    </div>

  </template>
  <script>
    (function() {
      Polymer({
        is: 'silicon-hex-table',

        properties: {
          /**
           * The bytes to display in the table.
           * **NOTE**: must be a `Uint8Array`.
           */
          bytes: {
            type: Array
          },
          /**
           * The currently highlighted row and column in the table.
           * If you want to track the highlighted byte, listen to this event.
           */
          highlight: {
            type: Object,
            notify: true,
            value: function() {
              return {
                row: 0,
                col: 0,
                offset: 0,
                count: 0 // TODO: add count feature
              }
            }
          },
          /**
           * The offset into `bytes`.
           * If you modify this value, the hex table recomputes the various tables accordingly.
           */
          offset: {
            type: Number,
            value: 0x0
          },
          /**
           * The number of columns to display.
           * This is `readOnly` for now.
           */
          columns: {
            type: Number,
            readOnly: true,
            value: 16
          },
          /**
           * The number of rows to display, zero-indexed.
           * If you modify this value, the table is recalculated (this is relatively expensive, don't do this so much).
           */
          rows: {
            type: Number,
            value: 19
          },
          /**
           * The selected offsets.  Bind to this to watch changes.
           * @type {{begin: Number, end: Number, count: Number}}
           */
          selected: {
            type: Array,
            notify: true,
            value: function() {
              return {};
            }
          },
          /**
           * Do not perform selection via tracking drag gestures
           * (you can still manually select with `selectRange`).
           */
          noSelect: {
            type: Boolean,
            value: false
          },
          /**
           * The set of selected nodes.
           * @type {Set}
           */
          _selectedSet: {
            type: Object,
            value: function() {
              return new Set();
            }
          },
          /**
           * The computed property for the bytes to display.
           * Used instead of `bytes` in case we allow base64 encoded strings in addition to Uint8Array in a future release.
           */
          _bytes: {
            computed: '_computeBytes(bytes)'
          },
          /**
           * Emacs `hexl-mode` style ascii row header display.  In the future we'll let this be customizable.
           *
           */
          _asciiheader: {
            type: Array,
            value: function() {
              return ['0', '1', '2', '3', '4', '5', '6', '7',
                '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'
              ];
            }
          },
          /**
           * Emacs `hexl-mode` style hex row header display.  In the future we'll let this be customizable.
           *
           */
          _header: {
            type: Array,
            value: function() {
              return ['00', '11', '22', '33', '44', '55', '66', '77', '88',
                '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'
              ];
            }
          },
          /**
           * The table we compute when the rows change.
           *
           */
          _table: {
            type: Array,
            computed: '_computeTable(rows)',
            observer: '_tableChanged'
          }
        },

        listeners: {
          'hexTable.track': '_trackSoHard',
          'hexTable.tap': '_tap'
        },

        /**
         * Selects a range of bytes (and thereby highlights them).
         * Wipes the current selection, and sets `selected` to the new range.
         *
         * @param {Number} begin The offset to begin the selection
         * @param {Number} count The number of bytes to select
         */
        selectRange: function(begin, count) {
          var set = new Set();
          for (var i = 0; i < count; i++) {
            var id = this._offset2id(begin + i);
            set.add(id);
          }
          this._selectedSet = set;
          this.selected = {
            begin: begin,
            end: begin + count,
            count: count
          };
        },

        /**
         * Deselects the selected bytes (removes highlighting).
         */
        deselect: function() {
          this._selectedSet = new Set();
          this.selected = {}; // or null?
          this._selectStart = undefined;
          this._selectCount = undefined;
        },

        /**
         * Toggles the offset table's display state.
         */
        toggleOffsetTable: function() {
          var hidden = this.$.offsetTable.style.display === 'none';
          this.$.offsetTable.style.display = hidden ? 'inline-block' : 'none';
        },

        /**
         * Toggles the hex table's display state.
         */
        toggleHexTable: function() {
          var hidden = this.$.hexTable.style.display === 'none';
          this.$.hexTable.style.display = hidden ? 'inline-block' : 'none';
        },

        /**
         * Toggles the ascii table's display state.
         */
        toggleAsciiTable: function() {
          var hidden = this.$.asciiTable.style.display === 'none';
          this.$.asciiTable.style.display = hidden ? 'inline-block' : 'none';
        },

        /**
         * Computed property for setting the selected class state of the hexadecimal
         * and ascii bytes.
         * @param {Set} selectedSet The set of selected ids
         * @param {String} id The id to check if it's in the selected ids set
         */
        _computeSelected: function(selectedSet, id) {
          return selectedSet.has(id) ? 'selected' : '';
        },

        /**
         * Selects the target node if it's a valid node, has an id, and sets the appropriate
         * internal values `_selectStart` and `_selectCount` for use in `selectRange()`.
         * **TODO**: implement backwards dragging.
         *
         * @param {Node} target The target node to add or not.
         */
        _selectTarget: function(target) {
          if (target && target.id) {
            if (this._selectStart === undefined) {
              this._selectStart = this._id2offset(target.id);
            } else {
              var end = this._id2offset(target.id);
              if (this._selectStart > end) { // TODO: if backwards
                  var tmp = this._selectStart;
                  this._selectStart = end;
                  end = tmp;
                  this._backwards = true;
              }
              this._selectCount = end - this._selectStart + 1; // because need to include last byte
            }
          }
        },

        _tap: function(e) {
          if (!this.noSelect) {
            this.deselect();
          }
        },

        /**
         * The gesture tracker for Polymer `track` events.  Tracks _real_ hard.
         */
        _trackSoHard: function(e) {
          if (!this.noSelect) {
            switch (e.detail.state) {
              case 'start':
                this.deselect();
                var target = e.detail.hover();
                this._selectTarget(target);
                break;
              case 'end':
                var target = e.detail.hover();
                this._selectTarget(target);
                this.selectRange(this._selectStart, this._selectCount);
                break;
              case 'track':
                var target = e.detail.hover();
                this._selectTarget(target);
                break;
              default:
                break;
            }
          }
        },

        // Element Behavior

        /**
         * The `highlight-changed` event is fired whenever `highlighted` is changed.
         *
         * {{row: Number, col: Number, offset: Number}}
         * @event highlight-changed
         */

        /**
         * The `selected-changed` event is fired whenever `selected` is
         * changed via dragging or through `selectRange()`, etc..
         *
         * {{begin: Number, end: Number, count: Number}}
         * @event selected-changed
         */

        /**
         * Computed function for `_bytes`; currently just checks if `bytes` attribute is a Uint8Array, and if not, educates the user and returns an empty `Uint8Array`.
         * @param {Uint8Array} bytes The bytes to view
         * @return {Uint8Array} The actual internal representation we use
         */
        _computeBytes: function(bytes) {

          if (bytes instanceof Uint8Array) {
            return bytes;
          } else {
            console.log('Error: <silicon-hex-table> requires Uint8Array of bytes');
            return new Uint8Array(0);
          }
          // phuture:
          // return StringView.base64ToBytes(bytes);
        },

        /**
         * A computed function for displaying the offset column values.  Pads the bytes with zeros.  Recomputes on `offset` change.
         * @param {Uint8Array} offset The current offset that's been set
         * @param {Uint8Array} index The offset row we're displaying
         * @return {string} The pretty-printed hexadecimal offset for the row of the bytes we're viewing
         */
        _getOffset: function(offset, index) {
          // if (offset < 0) return ' ';
          var offsetstr = (offset + (index * this.columns)).toString(16);
          var len = offsetstr.length;
          var pad = '';
          for (var i = 0; i < (8 - len); i++) {
            pad += '0';
          }
          return pad + offsetstr;
        },

        _id2raster: function(id) {
          var split = id.slice(1).split('c');
          var r = parseInt(split[0]);
          var c = parseInt(split[1]);
          return {
            r: r,
            c: c
          };
        },

        /**
         * Takes a target's id in the byte table and returns its hex value.
         * @param {String} id The id of the target
         * @return {Number} The offset of the byte
         */
        _id2offset: function(id) {
          var raster = this._id2raster(id);
          return this._raster2index(this.offset, raster.r, raster.c);
        },

        _offset2id: function(offset) {
          var base = offset - this.offset;
          var r = Math.floor(base / this.columns);
          var c = base % this.columns;
          return 'r' + r + 'c' + c;
        },

        /*
         * Takes a rasterized x (column) and y (row) coordinate for a byte in the hex table, and the current offset, and converts it into an index into the byte array.
         * @param {number} offset The current offset into the byte array
         * @param {number} r The row of the byte in question
         * @param {number} c The column of the byte in question
         * @return {number} The offset into the byte array
         */
        _raster2index: function(offset, r, c) {
          var i = c + (r * this.columns);
          return i + offset;
        },

        /*
         * Takes a raster object stored in `_table` which has an x (column) and y (row) coordinate for a byte in the hex table, and the current offset, and returns its ASCII code.
         * @param {Uint8Array} bytes The `_bytes` we're looking at
         * @param {number} offset The current offset into the byte array
         * @param {object} raster The raster object from the `_table` computed property with row and column index
         * @return {string} The ascii value of the byte in the table
         */
        _getAscii: function(bytes, offset, raster) {
          var i = this._raster2index(offset, raster.r, raster.c);
          var code = bytes[i];
          return code >= 0x20 && code <= 0x7e ? String.fromCharCode(code) : '.';
        },

        /*
         * Takes a raster object stored in `_table` which has an x (column) and y (row) coordinate for a byte in the hex table, and the current offset, and returns its hexadecimal string representation for display.
         * @param {Uint8Array} bytes The `_bytes` we're looking at
         * @param {number} offset The current offset into the byte array
         * @param {object} raster The raster object from the `_table` computed property with row and column index
         * @return {string} The hexadecimal string value of the byte in the table, padded with a 0 if necessary
         */
        _getHex: function(bytes, offset, raster) {
          var i = this._raster2index(offset, raster.r, raster.c);
          if (i >= bytes.length || i < 0) {
            // if our index is bad, we return the distinguished '--'
            return '--';
          }
          var code = bytes[i];
          return code < 16 ? '0' + code.toString(16) : code.toString(16);
        },

        // Haxors
        _get: function(row) {
          return row;
        },

        /**
         * Computes the hex table, given a row size.  Updates on `rows` change.
         * @params {number} size The size of the table (number of rows).
         * @return {array} An 2-D array of objects containing row, column, id, and ids for use in computing various components of the table efficiently.
         */
        _computeTable: function(size) {
          //console.log('computing table with size: ', size);
          var rows = [];
          for (var r = 0; r < size; r++) {
            var cols = []
            for (var c = 0; c < 16; c++) {
              cols.push({
                id: ('r' + r + 'c' + c),
                hid: ('asciir' + r + 'c' + c),
                r: r,
                c: c
              })
            }
            rows.push(cols);
          }
          return rows;
        },

        /**
         * Highlights the corresponding ASCII character in the ascii table when the mouse hovers over its sister byte in the hexadecimal table.
         * @params {number} highlight The coordinates to highlight
         * @params {e} e The `mouseenter`/`mouseleave` event.
         */
        _highlightAscii: function(highlight, e) {
          var id = e.target.id;
          var split = id.slice(1).split('c');
          var r = parseInt(split[0]);
          var c = parseInt(split[1]);
          var ascii = '#asciir';
          var hex = '#r';
          var selector = ascii + r + 'c' + c;
          var ascii = this.$$(selector);
          if (highlight) {
            Polymer.dom(ascii).classList.add('highlighted');
            e.target.classList.add('highlighted');
            this.set('highlight', {
              row: r,
              col: c,
              offset: this.offset + (c + (r * this.rows))
            });
          } else {
            Polymer.dom(ascii).classList.remove('highlighted');
            e.target.classList.remove('highlighted');
          }
        },

        _initHighlighting: function() {
          // some timing issue here
          this.async(function() {
            var bytes = Polymer.dom(this.$.hexTable).querySelectorAll('.bytes span');
            bytes.forEach(function(byte) {
              byte.addEventListener('mouseenter', (function(e) {
                this._highlightAscii(true, e)
              }).bind(this));
              byte.addEventListener('mouseleave', (function(e) {
                this._highlightAscii(false, e)
              }).bind(this));
            }, this);
          }, 100);

        },

        _tableChanged: function(table) {
          if (table) {
            this._initHighlighting();
          }
        },

        attached: function() {}

      });
    })();
  </script>
</dom-module>