Fix palette issue; Add test

bundle.js

@@ -477,9 +477,11 @@ Scatter.prototype.update = function () {
       range: 'range dataBox databox',
       viewport: 'viewport viewPort viewBox viewbox',
       opacity: 'opacity alpha transparency',
-      bounds: 'bound bounds boundaries limits'
+      bounds: 'bound bounds boundaries limits',
+      tooManyColors: 'tooManyColors palette paletteMode optimizePalette enablePalette'
     });
     if (options.positions === null) options.positions = [];
+    if (options.tooManyColors != null) _this3.tooManyColors = options.tooManyColors;
 
     if (!group) {
       groups[i] = group = {
@@ -887,7 +889,7 @@ Scatter.prototype.updateColor = function (colors) {
   } // detect if too many colors in palette
 
 
-  if (!this.tooManyColors && palette.length > maxColors * maxColors * 4) this.tooManyColors = true; // limit max color
+  if (!this.tooManyColors && palette.length > maxColors * 4) this.tooManyColors = true; // limit max color
 
   this.updatePalette(palette); // keep static index for single-color property
 

package.json

@@ -29,7 +29,8 @@
     "array-rearrange": "^2.2.2",
     "clamp": "^1.0.1",
     "color-id": "^1.1.0",
-    "color-normalize": "^1.0.3",
+    "color-normalize": "^1.3.0",
+    "color-rgba": "^2.1.0",
     "flatten-vertex-data": "^1.0.0",
     "glslify": "^7.0.0",
     "image-palette": "^2.1.0",
@@ -48,14 +49,16 @@
     "fps-indicator": "^1.1.2",
     "gl": "^4.1.1",
     "image-equal": "^4.1.2",
-    "image-output": "^2.2.3",
+    "image-output": "^2.4.0",
     "image-pixels": "^2.2.0",
     "next-pow-2": "^1.0.0",
+    "pxls": "^2.3.1",
     "regl": "^1.3.0",
     "rollup": "^0.67.1",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-browserify-transform": "^1.0.1",
     "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
     "seed-random": "^2.2.0",
     "tape": "^4.9.1"
   }

readme.md

@@ -1,4 +1,4 @@
-# regl-scatter2d [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)   [![Build Status](https://img.shields.io/travis/gl-vis/regl-scatter2d.svg)](https://travis-ci.org/gl-vis/regl-scatter2d)
+# regl-scatter2d [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)  [![Build Status](https://img.shields.io/travis/gl-vis/regl-scatter2d.svg)](https://travis-ci.org/gl-vis/regl-scatter2d)
 
 Fast and precise 2d scatter plot for lots of points.
 

rollup.config.js

@@ -3,6 +3,7 @@ import commonjs from 'rollup-plugin-commonjs'
 import babel from 'rollup-plugin-babel'
 import tr from 'rollup-plugin-browserify-transform'
 import glslify from 'glslify'
+import resolve from 'rollup-plugin-node-resolve'
 
 export default {
   input: 'index.js',
@@ -11,6 +12,8 @@ export default {
     format: 'cjs'
   },
   plugins: [
+    tr(glslify),
+    resolve(),
     commonjs({
       sourceMap: false,
       include: ['index.js', 'scatter.js'],
@@ -30,7 +33,6 @@ export default {
         'parse-rect'
       ]
     }),
-    tr(glslify),
     babel({
       'presets': ['@babel/preset-env']
     })

scatter.js

@@ -382,11 +382,14 @@ Scatter.prototype.update = function (...args) {
 			range: 'range dataBox databox',
 			viewport: 'viewport viewPort viewBox viewbox',
 			opacity: 'opacity alpha transparency',
-			bounds: 'bound bounds boundaries limits'
+			bounds: 'bound bounds boundaries limits',
+			tooManyColors: 'tooManyColors palette paletteMode optimizePalette enablePalette'
 		})
 
 		if (options.positions === null) options.positions = []
 
+		if (options.tooManyColors != null) this.tooManyColors = options.tooManyColors
+
 		if (!group) {
 			groups[i] = group = {
 				id: i,
@@ -467,6 +470,7 @@ Scatter.prototype.update = function (...args) {
 				hasColor++
 				return c
 			},
+
 			borderColor: (c, group) => {
 				if (c == null) c = Scatter.defaults.borderColor
 				c = this.updateColor(c)
@@ -817,7 +821,7 @@ Scatter.prototype.updateColor = function (colors) {
 	}
 
 	// detect if too many colors in palette
-	if (!this.tooManyColors && palette.length > maxColors * maxColors * 4) this.tooManyColors = true
+	if (!this.tooManyColors && palette.length > maxColors * 4) this.tooManyColors = true
 
 	// limit max color
 	this.updatePalette(palette)

test.js → test/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const createScatter = require('./')
+const createScatter = require('../index')
 const t = require('tape')
 const load = require('image-pixels')
 const eq = require('image-equal')
@@ -49,7 +49,7 @@ t('colors/shapes', async t => {
 	})
 	scatter.draw()
 
-	t.ok(eq(await load('./baseline/mixed-markers-colors.png'), scatter.gl, .05))
+	t.ok(eq(await load('./test/img/mixed-markers-colors.png'), scatter.gl, .05))
 
 	regl.clear({color: [0,0,0,0]})
 
@@ -74,7 +74,26 @@ t('1e6 points', async t => {
 	})
 	scatter.draw()
 
-	t.ok(eq(scatter.gl, await load('./baseline/1e6.png'), .1))
+	t.ok(eq(scatter.gl, await load('./test/img/1e6.png'), .1))
+	regl.clear({color: [0,0,0,0]})
+
+	t.end()
+})
+
+t('Color palette interference (#3232)', async t => {
+	var passes = require('./3232.json')
+	passes[1].color.length = 4
+	passes[1].color = new Uint8Array(Array.from(passes[1].color))
+	passes[1].borderColor.length = 4
+	passes[1].borderColor = new Uint8Array(Array.from(passes[1].borderColor))
+
+	var scatter = createScatter(regl)
+
+	passes[1].range = [0,0,300,300]
+
+	scatter.update(passes)
+	scatter.render()
+	t.ok(eq(scatter.gl, await load('./test/img/3232.png'), {threshold: .1}))
 
 	t.end()
 })