add chromaticTextTest

docs/examples/index.md

@@ -9,6 +9,9 @@ layout: page
 ### cube-layer
 * [cubeTest](../tests/umd/cubeTest.html) using UMD/CDN
 
+### chromatic-text-layer
+* [chromaticTextTest](../tests/umd/chromaticTextTest.html) using UMD/CDN
+
 ### vega-deck.gl
 * [simple vega spec](../tests/umd/vega-deck.gl.test.html) using UMD/CDN
 * [transition between vega specs](../tests/umd/transition.html) using UMD/CDN

docs/tests/umd/js/chromaticTextTest.js

@@ -5,6 +5,7 @@ var chromaticTextTest;
         red: [255, 0, 0],
         green: [0, 255, 0],
         blue: [0, 0, 255],
+        orange: [255, 165, 0],
         black: [0, 0, 0]
     };
     chromaticTextTest.presenter = new SandDance.VegaDeckGl.Presenter(document.querySelector('#vis'));
@@ -16,25 +17,32 @@ var chromaticTextTest;
         gridLines: [],
         textData: [
             {
-                color: colors.black,
+                color: colors.red,
                 text: "red",
                 position: [-100, 0, 0],
                 size: 500,
                 textAnchor: "middle"
             },
             {
-                color: colors.black,
+                color: colors.green,
                 text: "green",
                 position: [0, 0, 0],
                 size: 500,
                 textAnchor: "middle"
             },
             {
-                color: colors.black,
+                color: colors.blue,
                 text: "blue",
                 position: [100, 0, 0],
                 size: 500,
                 textAnchor: "middle"
+            },
+            {
+                color: colors.black,
+                text: "black",
+                position: [0, 0, -20],
+                size: 500,
+                textAnchor: "middle"
             }
         ]
     };
@@ -42,13 +50,16 @@ var chromaticTextTest;
         getTextHighlightColor: function (t) {
             switch (t.text) {
                 case 'red':
-                    return colors.red;
-                case 'green':
                     return colors.green;
+                case 'green':
+                    return colors.red;
                 case 'blue':
-                    return colors.blue;
+                    return colors.orange;
             }
             return colors.black;
+        },
+        onTextClick: function (e, t) {
+            alert(t.text + ' clicked');
         }
     });
     var orbitViewState = {

packages/sanddance-test-umd/package.json

@@ -3,7 +3,8 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "build": "tsc -p ."
+    "build": "tsc -p .",
+    "watch-typescript": "tsc -p . -w"
   },
   "dependencies": {
     "@msrvida/sanddance": "*"

packages/sanddance-test-umd/src/chromaticTextTest.ts

@@ -14,6 +14,7 @@ namespace chromaticTextTest {
         red: [255, 0, 0],
         green: [0, 255, 0],
         blue: [0, 0, 255],
+        orange: [255, 165, 0],
         black: [0, 0, 0]
     };
 
@@ -26,25 +27,32 @@ namespace chromaticTextTest {
         gridLines: [],
         textData: [
             {
-                color: colors.black,
+                color: colors.red,
                 text: "red",
                 position: [-100, 0, 0],
                 size: 500,
                 textAnchor: "middle"
             },
             {
-                color: colors.black,
+                color: colors.green,
                 text: "green",
                 position: [0, 0, 0],
                 size: 500,
                 textAnchor: "middle"
             },
             {
-                color: colors.black,
+                color: colors.blue,
                 text: "blue",
                 position: [100, 0, 0],
                 size: 500,
                 textAnchor: "middle"
+            },
+            {
+                color: colors.black,
+                text: "black",
+                position: [0, 0, -20],
+                size: 500,
+                textAnchor: "middle"
             }
         ]
     };
@@ -53,13 +61,16 @@ namespace chromaticTextTest {
         getTextHighlightColor: t => {
             switch (t.text) {
                 case 'red':
-                    return colors.red;
-                case 'green':
                     return colors.green;
+                case 'green':
+                    return colors.red;
                 case 'blue':
-                    return colors.blue;
+                    return colors.orange;
             }
             return colors.black;
+        },
+        onTextClick: (e, t) => {
+            alert(t.text + ' clicked');
         }
     });