Mercurial > code > home > repos > light9

changeset 1763:9060602f7b3c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
try to fix canvas issue, but it seems like just a bug in chrome 61 Ignore-this: 79447f827c6d630841dcea30152ab7d
author drewp@bigasterisk.com
date Thu, 31 May 2018 08:16:20 +0000
parents a67d1a95ebf9
children aec09f94c030
files light9/web/light9-color-picker.html light9/web/light9-color-picker_test.html
diffstat 2 files changed, 57 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/light9/web/light9-color-picker.html	Thu May 31 08:14:37 2018 +0000
+++ b/light9/web/light9-color-picker.html	Thu May 31 08:16:20 2018 +0000
@@ -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';
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/light9-color-picker_test.html	Thu May 31 08:16:20 2018 +0000
@@ -0,0 +1,41 @@
+<!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>