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

<dom-module id="light9-color-picker">

  <template>

    <style>

     :host {

         position: relative;

         display: flex;

         align-items: center;

     }

     #smallRainbowComp, #largeRainbowComp {

         display: inline-block;

         overflow: hidden;

                  immediate-value="{{value}}"></paper-slider>

    <div id="largeRainbowComp">

      <div id="largeRainbow"

           on-mousemove="onCanvasMove"

           on-mouseup="hideLarge"

           on-mouseleave="hideLarge"></div>

      <div id="largeCrosshair"></div>

    </div>

  </template>

  <script src="/lib/color/one-color.js"></script>

  <script>

   class RainbowCanvas {

           this.size = size;

           var elem = document.createElement('canvas');

           elem.width = size[0];

           elem.height = size[1];

           this.ctx = elem.getContext('2d');

           this.colorPos = {} // color: pos

           var img = new Image();

           img.onload = function() {

               this.ctx.drawImage(img, 0, 0);

               this._readImage();

           }.bind(this);

           img.src = url;

       }

       _readImage() {

           var data = this.ctx.getImageData(

               0, 0, this.size[0], this.size[1]).data;

           for (var y = 0; y < this.size[1]; y+=1) {

               for (var x = 0; x < this.size[0]; x+=1) {

                   var base = (y * this.size[0] + x) * 4;

                   var c = one.color([data[base + 0],

                                      data[base + 1],

                                      data[base + 2], 255]).hex();

       },

       observers: [

           'readColor(color)',

           'onValue(value)',

           'writeColor(hueSatColor, value)'

       ],

       attached: function() {

           if (!window.pickerCanvases) {

               window.pickerCanvases = {

                   large: new RainbowCanvas(

                       '/colorpick_rainbow_large.png', [400, 200]),

                   small: new RainbowCanvas(

               };

           }

           this.large = window.pickerCanvases.large;

           this.small = window.pickerCanvases.small;

       },

       onValue: function(value) {

           let neverBlack = .1 + .9 * value / 255;

           this.$.smallRainbow.style.filter = `brightness(${neverBlack})`;

       },

       writeColor: function(hueSatColor, value) {

           this.color = one.color(hueSatColor).value(value / 255).hex();

       },

       readColor: function(color) {

           if (this.$.largeRainbowComp.style.display == 'block') {

               // for performance, don't do color searches on covered widget

               return;

           }

           // setting immediate-value doesn't work

           try {

               var pos = this.small.posFor(color);

           } catch(e) {

               this.moveSmallCrosshair([-999, -999]);

               return;

           }

           this.moveSmallCrosshair(pos);

       },

       _floatLarge: function() {

           // Large might span multiple columns, and chrome won't

           // send events for those parts. Workaround: take it out of

           // the columns.

           let large = this.$.largeRainbowComp;

           let rect = this.$.smallRainbowComp.getBoundingClientRect();

           document.body.append(large);

           large.style.position = 'fixed';

           large.style.left = (rect.left) + 'px';

           large.style.top = (rect.top - 50) + 'px';

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

<link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">

<link rel="import" href="/lib/iron-ajax/iron-ajax.html">

<link rel="import" href="light9-timeline-audio.html">

<link rel="import" href="../rdfdb-synced-graph.html">

<link rel="import" href="../light9-music.html">

<link rel="import" href="../edit-choice.html">

<!-- Whole editor- include this on your page.

     Most coordinates are relative to this element.

   -->

<dom-module id="light9-timeline-editor">

  <template>

    <style>

     :host {

         background: #444;

         display: flex;

         background: rgba(123, 123, 123, 0.71);

         border-radius: 6px;

         border: 1px solid #313131;

         padding: 3px;

         z-index: 2;

     }

    </style>

    <div id="top" style$="left: [[rect.left]]px; top: [[rect.top]]px; width: [[rect.width]]px; height: [[rect.height]]px; display: [[rect.display]]">

      <div>note [[noteLabel]] <button on-click="onDel">del</button></div>

      <table>

        <tr><th>effect:</th><td><edit-choice uri="{{effect}}" label="{{effectLabel}}"></edit-choice></td></tr>

        <tr><th>colorScale:</th><td>

        </td></tr>

      </table>

    </div>

  </template>

</dom-module>

<script src="/lib/sylvester/sylvester.js"></script>

<script src="/lib/d3/build/d3.min.js"></script>

<!-- version with https://github.com/RubenVerborgh/N3.js/pull/61 -->

<script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>

<!-- master version -->

    curveWidth = =>

      tMin = @graph.floatValue(@worldPts[0].uri, U(':time'))

      tMax = @graph.floatValue(@worldPts[3].uri, U(':time'))

      tMax - tMin            

    screenPts = ($V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight]) for pt in @worldPts)

    @dia.setNote(@uri, screenPts, effect)

    leftX = Math.max(2, screenPts[Math.min(1, screenPts.length - 1)].e(1) + 5)

    rightX = screenPts[Math.min(2, screenPts.length - 1)].e(1) - 5

    if screenPts.length < 3

      rightX = leftX + 120

    h = 80

    @inlineRect = {

      left: leftX,

      top: @offsetTop + @offsetHeight - h - 5,

      width: w,

      height: h,

      display: if rightX - leftX > w then 'block' else 'none'

      }

    if screenPts[screenPts.length - 1].e(1) - screenPts[0].e(1) < 100

      @clearAdjusters()

      # also kill their connectors