Fix plot example labels (#4014)

visgl · Dec 13, 2019 · 416027d · 416027d
1 parent fa886a5
commit 416027d
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 49 deletions.
diff --git a/examples/website/plot/plot-layer/axes-layer.js b/examples/website/plot/plot-layer/axes-layer.js
@@ -10,13 +10,13 @@ import labelVertex from './label-vertex.glsl';
 import labelFragment from './label-fragment.glsl';
 
 /* Constants */
-const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_SIZE = 48;
 const DEFAULT_TICK_COUNT = 6;
 const DEFAULT_TICK_FORMAT = x => x.toFixed(2);
 
 const defaultProps = {
   data: [],
-  fontSize: DEFAULT_FONT_SIZE,
+  fontSize: 12,
   xScale: null,
   yScale: null,
   zScale: null,
@@ -375,13 +375,13 @@ export default class AxesLayer extends Layer {
     }
 
     // attach a 2d texture of all the label texts
-    const textureInfo = textMatrixToTexture(this.context.gl, ticks, DEFAULT_FONT_SIZE * 4);
+    const textureInfo = textMatrixToTexture(this.context.gl, ticks, DEFAULT_FONT_SIZE);
     if (textureInfo) {
       // success
       const {columnWidths, texture} = textureInfo;
 
       return {
-        labelHeight: DEFAULT_FONT_SIZE * 4,
+        labelHeight: DEFAULT_FONT_SIZE,
         labelWidths: columnWidths,
         labelTextureDim: [texture.width, texture.height],
         labelTexture: texture

diff --git a/examples/website/plot/plot-layer/label-vertex.glsl.js b/examples/website/plot/plot-layer/label-vertex.glsl.js
@@ -95,7 +95,6 @@ void main(void) {
   vec2 textureSize = vec2(sum3(labelWidths * instanceNormals), labelHeight);
 
   vTexCoords = (textureOrigin + textureSize * texCoords) / labelTextureDim;
-  vTexCoords.y = 1.0 - vTexCoords.y;
 
   vec3 position_modelspace = vec3(instancePositions.x) *
     instanceNormals + gridVertexOffset * gridDims / 2.0 + gridCenter * abs(gridVertexOffset);

diff --git a/examples/website/plot/plot-layer/plot-layer.js b/examples/website/plot/plot-layer/plot-layer.js
@@ -4,30 +4,36 @@ import {scaleLinear} from 'd3-scale';
 import AxesLayer from './axes-layer';
 import SurfaceLayer from './surface-layer';
 
-const DEFAULT_GET_SCALE = () => scaleLinear();
+const DEFAULT_GET_SCALE = {type: 'function', value: () => scaleLinear()};
+const DEFAULT_TICK_FORMAT = {type: 'function', value: x => x.toFixed(2)};
+const DEFAULT_TICK_COUNT = 6;
+const DEFAULT_COLOR = [0, 0, 0, 255];
 
 const defaultProps = {
-  getPosition: SurfaceLayer.defaultProps.getPosition,
-  getColor: SurfaceLayer.defaultProps.getColor,
+  // SurfaceLayer props
+  getPosition: {type: 'accessor', value: (u, v) => [0, 0, 0]},
+  getColor: {type: 'accessor', value: (x, y, z) => DEFAULT_COLOR},
   getXScale: DEFAULT_GET_SCALE,
   getYScale: DEFAULT_GET_SCALE,
   getZScale: DEFAULT_GET_SCALE,
-  uCount: SurfaceLayer.defaultProps.uCount,
-  vCount: SurfaceLayer.defaultProps.vCount,
-  lightStrength: SurfaceLayer.defaultProps.lightStrength,
+  uCount: 100,
+  vCount: 100,
+  lightStrength: 0.1,
+
+  // AxesLayer props
   drawAxes: true,
-  fontSize: AxesLayer.defaultProps.fontSize,
-  xTicks: AxesLayer.defaultProps.xTicks,
-  yTicks: AxesLayer.defaultProps.yTicks,
-  zTicks: AxesLayer.defaultProps.zTicks,
-  xTickFormat: AxesLayer.defaultProps.xTickFormat,
-  yTickFormat: AxesLayer.defaultProps.yTickFormat,
-  zTickFormat: AxesLayer.defaultProps.zTickFormat,
-  xTitle: AxesLayer.defaultProps.xTitle,
-  yTitle: AxesLayer.defaultProps.yTitle,
-  zTitle: AxesLayer.defaultProps.zTitle,
-  axesPadding: AxesLayer.defaultProps.padding,
-  axesColor: AxesLayer.defaultProps.color,
+  fontSize: 12,
+  xTicks: DEFAULT_TICK_COUNT,
+  yTicks: DEFAULT_TICK_COUNT,
+  zTicks: DEFAULT_TICK_COUNT,
+  xTickFormat: DEFAULT_TICK_FORMAT,
+  yTickFormat: DEFAULT_TICK_FORMAT,
+  zTickFormat: DEFAULT_TICK_FORMAT,
+  xTitle: 'x',
+  yTitle: 'y',
+  zTitle: 'z',
+  axesPadding: 0,
+  axesColor: [0, 0, 0, 255],
   coordinateSystem: COORDINATE_SYSTEM.CARTESIAN
 };
 
@@ -105,45 +111,70 @@ export default class PlotLayer extends CompositeLayer {
 
   renderLayers() {
     const {xScale, yScale, zScale} = this.state;
+    const {
+      getPosition,
+      getColor,
+      uCount,
+      vCount,
+      lightStrength,
+      fontSize,
+      xTicks,
+      yTicks,
+      zTicks,
+      xTickFormat,
+      yTickFormat,
+      zTickFormat,
+      xTitle,
+      yTitle,
+      zTitle,
+      axesPadding,
+      axesColor,
+      drawAxes,
+      updateTriggers
+    } = this.props;
 
     return [
       new SurfaceLayer(
-        this.getSubLayerProps({
-          id: 'surface',
-          getPosition: this.props.getPosition,
-          getColor: this.props.getColor,
-          uCount: this.props.uCount,
-          vCount: this.props.vCount,
+        {
+          getPosition,
+          getColor,
+          uCount,
+          vCount,
           xScale,
           yScale,
           zScale,
-          lightStrength: this.props.lightStrength,
-          onHover: this.props.onHover,
-          onClick: this.props.onClick,
-          updateTriggers: this.props.updateTriggers
+          lightStrength
+        },
+        this.getSubLayerProps({
+          id: 'surface',
+          updateTriggers
         })
       ),
       new AxesLayer(
-        this.getSubLayerProps({
-          id: 'axes',
+        {
           xScale,
           yScale,
           zScale,
-          fontSize: this.props.fontSize,
-          xTicks: this.props.xTicks,
-          yTicks: this.props.yTicks,
-          zTicks: this.props.zTicks,
-          xTickFormat: this.props.xTickFormat,
-          yTickFormat: this.props.yTickFormat,
-          zTickFormat: this.props.zTickFormat,
-          xTitle: this.props.xTitle,
-          yTitle: this.props.yTitle,
-          zTitle: this.props.zTitle,
-          padding: this.props.axesPadding,
-          color: this.props.axesColor,
-          visible: this.props.drawAxes,
+          fontSize,
+          xTicks,
+          yTicks,
+          zTicks,
+          xTickFormat,
+          yTickFormat,
+          zTickFormat,
+          xTitle,
+          yTitle,
+          zTitle,
+          padding: axesPadding,
+          color: axesColor
+        },
+        this.getSubLayerProps({
+          id: 'axes'
+        }),
+        {
+          visible: drawAxes,
           pickable: false
-        })
+        }
       )
     ];
   }