light9 Changeset - 9060602f7b3c

Changeset - 9060602f7b3c

Parent rev.

Child rev.

[Not reviewed]

default

0 1 1

drewp@bigasterisk.com - 7 years ago 2018-05-31 08:16:20
drewp@bigasterisk.com

try to fix canvas issue, but it seems like just a bug in chrome 61
Ignore-this: 79447f827c6d630841dcea30152ab7d

2 files changed with 57 insertions and 7 deletions:

light9/web/light9-color-picker.html

light9/web/light9-color-picker_test.html

0 comments (0 inline, 0 general)

light9/web/light9-color-picker.html

➞

Show inline comments

@@ @@ -124,12 +124,11 @@ @@
   <script src="/lib/color/one-color.js"></script>
   <script>
    class RainbowCanvas {
-     constructor(url, size, onReady) {
      constructor(url, size) {
        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
@@ @@ -160,13 +159,18 @@ @@
        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();
            let px = [data[base + 0],
                      data[base + 1],
                      data[base + 2], 255];
            if (px[0] == 0 && px[1] == 0 && px[2] == 0) {
              // (there's no black on the rainbow images)
              throw new Error(`color picker canvas (${this.size[0]}) returns 0,0,0`);
+           }
            var c = one.color(px).hex();
            this.colorPos[c] = [x, y];
+         }
+       }
+     }
+     }
      colorAt(pos) {
        var data = this.ctx.getImageData(pos[0], pos[1], 1, 1).data;
        return one.color([data[0], data[1], data[2], 255]).hex();
@@ @@ -285,7 +289,12 @@ @@
      showLarge(x, y) {
        this.$.large.style.display = 'block';
        try {
          const pos = this.large.posFor(this.color);
          let pos;
          try {
            pos = this.large.posFor(this.color);
          } catch(e) {
            pos = [-999, -999];
+         }
          this.moveLargeCrosshair(pos);
          this.$.large.style.left = (x - Math.max(20, Math.min(380, pos[0]))) + 'px';
          this.$.large.style.top = (y - Math.max(20, Math.min(180, pos[1]))) + 'px';

light9/web/light9-color-picker_test.html

➞

Show inline comments

@@ new file 100644 @@
 <!doctype html>
 <html>
   <head>
     <title>light9-color-picker test</title>
     <meta charset="utf-8">
     <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
     <script src="/node_modules/mocha/mocha.js"></script>
     <script src="/node_modules/chai/chai.js"></script>
     <link rel="stylesheet" media="all" href="/node_modules/mocha/mocha.css">
     <link rel="import" href="/lib/polymer/lib/elements/dom-bind.html">
     <link rel="import" href="light9-color-picker.html">
   </head>
   <body>
     <div id="mocha"><p><a href=".">Index</a></p></div>
     <div id="messages"></div>
     <div id="fixtures">
       <dom-bind>
         <template>
           <light9-color-picker id="pick" color="{{color}}"></light9-color-picker>
         </template>
       </dom-bind>
     </div>
     <script>
      mocha.setup('bdd');
      const assert = chai.assert;
      describe("RainbowCanvas", () => {
        it("loads rainbow", (done) => {
          const rc = new RainbowCanvas('/colorpick_rainbow_large.png', [400, 200]);
          rc.onLoad(() => {
            assert.equal(rc.colorAt(200, 100), '#ff33ff');
            done();
          });
        });
      });
      mocha.run();
     </script>
   </body>
 </html>

0 comments (0 inline, 0 general)