@carto/kepler.gl 0.0.65-alpha.labels → 0.0.65-alpha.labels.2

package/src/deckgl-layers/point-label-layer/point-label-layer.js

@@ -0,0 +1,174 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
+
+// TODO remove prior to release
+const SHOW_TEXT_BORDER = false;
+
+const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
+class EnhancedTextLayer extends TextLayer {
+  filterSubLayer({layer, renderPass}) {
+    const background = layer.id.includes('primary-background');
+    if (renderPass === 'collision') {
+      return background; // Only draw primary background layer in collision pass
+    } else {
+      return !background || (SHOW_TEXT_BORDER && this.props.getBorderWidth); // Do not draw background layer in other passes
+    }
+  }
+}
+
+// TODO fix in deck.gl
+TextLayer.defaultProps.fontSettings = {type: 'object', value: {}, optional: true, compare: 2};
+
+const defaultProps = {
+  ...TextLayer.defaultProps,
+  getRadius: {type: 'accessor', value: 1},
+  radiusScale: {type: 'number', min: 0, value: 1}
+};
+
+export class PointLabelLayer extends CompositeLayer {
+  static defaultProps = defaultProps;
+
+  calculatePixelOffset(secondary) {
+    const {
+      getTextAnchor: anchor,
+      getAlignmentBaseline: alignment,
+      getRadius,
+      radiusScale,
+      sizeScale
+    } = this.props;
+    const xMult = anchor === 'middle' ? 0 : anchor === 'start' ? 1 : -1;
+    const yMult = alignment === 'center' ? 0 : alignment === 'bottom' ? 1 : -1;
+
+    // Place secondary label under main label (spacing 1 / 3 main label font size)
+    const yOffset = secondary ? (1 + 1 / 3) * sizeScale : 0;
+    const xPadding = sizeScale / 4; // Padding based on font size (font size / 4)
+    const yPadding = sizeScale;
+    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
+
+    return typeof getRadius === 'function'
+      ? d => {
+          const r = (d ? getRadius(d) : 1) * radiusScale * radiusPadding;
+          return [xMult * (r + xPadding), yMult * (r + yPadding) + yOffset];
+        }
+      : [
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding) + yOffset
+        ];
+  }
+
+  calculateBackgroundPadding(getPixelOffset) {
+    // Alignment based only on first label
+    const {alignment, anchor, sizeScale} = this.props;
+
+    // Heuristics to avoid label overlap (should we base this on the text length?)
+    const paddingX = 12 * sizeScale;
+    const paddingY = 3 * sizeScale;
+    const backgroundPadding = [0, 0, 0, 0];
+    if (alignment === 'top') {
+      backgroundPadding[TOP] = paddingY;
+    } else if (alignment === 'bottom') {
+      backgroundPadding[BOTTOM] = paddingY;
+    } else {
+      backgroundPadding[TOP] = 0.5 * paddingY;
+      backgroundPadding[BOTTOM] = 0.5 * paddingY;
+    }
+    if (anchor === 'start') {
+      backgroundPadding[LEFT] = paddingX;
+    } else if (anchor === 'end') {
+      backgroundPadding[RIGHT] = paddingX;
+    } else {
+      backgroundPadding[LEFT] = 0.5 * paddingX;
+      backgroundPadding[RIGHT] = 0.5 * paddingX;
+    }
+
+    // For getRadius function, invoke without data, as there is no backgroundPadding accessor
+    const pixelOffset = Array.isArray(getPixelOffset) ? getPixelOffset : getPixelOffset();
+    backgroundPadding[LEFT] += pixelOffset[0];
+    backgroundPadding[RIGHT] -= pixelOffset[0];
+    backgroundPadding[TOP] += pixelOffset[1];
+    backgroundPadding[BOTTOM] -= pixelOffset[1];
+
+    return backgroundPadding;
+  }
+
+  renderTextLayer(id, props) {
+    const {
+      data,
+
+      fontFamily,
+      fontSettings,
+      fontWeight,
+      outlineColor,
+      outlineWidth,
+      sizeScale,
+
+      getAlignmentBaseline,
+      getColor,
+      getPosition,
+      getTextAnchor,
+
+      updateTriggers
+    } = this.props;
+
+    return new EnhancedTextLayer(
+      this.getSubLayerProps({
+        id,
+        data: data,
+
+        fontFamily,
+        fontSettings,
+        fontWeight,
+        outlineColor,
+        outlineWidth,
+        sizeScale,
+
+        getAlignmentBaseline,
+        getColor,
+        getPosition,
+        getTextAnchor,
+
+        updateTriggers
+      }),
+      {
+        getSize: 1
+      },
+      // DEBUG
+      SHOW_TEXT_BORDER
+        ? {getBackgroundColor: [0, 0, 0, 0], getBorderColor: [255, 0, 0, 80], getBorderWidth: 1}
+        : {},
+      props
+    );
+  }
+
+  renderLayers() {
+    const {
+      getText,
+      getSecondaryColor,
+      getSecondaryText,
+      secondaryOutlineColor,
+      secondarySizeScale
+    } = this.props;
+    const getPixelOffset = this.calculatePixelOffset();
+    const backgroundPadding = this.calculateBackgroundPadding(getPixelOffset);
+    const out = [
+      this.renderTextLayer('primary', {
+        backgroundPadding,
+        getText,
+        getPixelOffset,
+        background: true // Only use background for primary label for faster collisions
+      }),
+      getSecondaryText &&
+        this.renderTextLayer('secondary', {
+          getText: getSecondaryText,
+          getPixelOffset: this.calculatePixelOffset(true),
+
+          // Optional overrides
+          ...(getSecondaryColor && {getColor: getSecondaryColor}),
+          ...(secondarySizeScale && {sizeScale: secondarySizeScale}),
+          ...(secondaryOutlineColor && {outlineColor: secondaryOutlineColor})
+        })
+    ];
+
+    return out;
+  }
+}

package/src/index.js

@@ -39,6 +39,9 @@ export * from './components';
 // Layers
 export * from './layers';
 
+// label layer (move to deck.gl/carto?)
+export {PointLabelLayer} from './deckgl-layers/point-label-layer/point-label-layer';
+
 // Styles
 export * from './styles';
 

package/src/layers/base-layer.js

@@ -22,22 +22,7 @@ import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
 import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
-import {TextLayer} from '@deck.gl/layers';
-
-// TODO remove prior to release
-const SHOW_TEXT_BORDER = false;
-
-const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
-class EnhancedTextLayer extends TextLayer {
-  filterSubLayer({layer, renderPass}) {
-    const background = layer.id.includes('background');
-    if (renderPass === 'collision') {
-      return background; // Only draw background layer in collision pass
-    } else {
-      return !background || (SHOW_TEXT_BORDER && this.props.getBorderWidth); // Do not draw background layer in other passes
-    }
-  }
-}
+import {PointLabelLayer} from '../deckgl-layers/point-label-layer/point-label-layer';
 
 // Workaround until https://github.com/visgl/deck.gl/pull/7513 is released
 DeckLayer.defaultProps.getFilterValue = {type: 'accessor', value: 0};
@@ -1357,110 +1342,87 @@ class Layer {
     };
   }
 
-  renderTextLabelLayer({getPosition, getPixelOffset, updateTriggers, sharedProps}, renderOpts) {
+  renderTextLabelLayer(
+    {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
+    renderOpts
+  ) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
     // const extensions = [...sharedProps.extensions];
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
-    return data.textLabels.reduce((accu, d, i) => {
-      if (d.getText) {
-        // Alignment based only on first label
-        const mainLabel = textLabel[0];
-        const {alignment, anchor, size} = mainLabel;
-        // Heuristics to avoid label overlap (should we base this on the text length?)
-        const paddingX = 12 * size;
-        const paddingY = 3 * size;
-        const backgroundPadding = [0, 0, 0, 0];
-        if (alignment === 'top') {
-          backgroundPadding[TOP] = paddingY;
-        } else if (alignment === 'bottom') {
-          backgroundPadding[BOTTOM] = paddingY;
-        } else {
-          backgroundPadding[TOP] = 0.5 * paddingY;
-          backgroundPadding[BOTTOM] = 0.5 * paddingY;
-        }
-        if (anchor === 'start') {
-          backgroundPadding[LEFT] = paddingX;
-        } else if (anchor === 'end') {
-          backgroundPadding[RIGHT] = paddingX;
-        } else {
-          backgroundPadding[LEFT] = 0.5 * paddingX;
-          backgroundPadding[RIGHT] = 0.5 * paddingX;
-        }
+    if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
+      return null;
+    }
 
-        const pixelOffset = getPixelOffset(mainLabel);
-        if (i !== 0) {
-          // Place secondary label under main label (spacing 1 / 3 main label font size)
-          pixelOffset[1] += (1 + 1 / 3) * size;
-        }
+    // TODO other labels
+    const i = 0;
+
+    const [mainLabel, secondaryLabel] = textLabel;
+    const {alignment, anchor, color: getColor, outlineColor, size: sizeScale} = mainLabel;
+    const {
+      color: getSecondaryColor,
+      outlineColor: secondaryOutlineColor,
+      size: secondarySizeScale
+    } = secondaryLabel || {};
+
+    return [
+      new PointLabelLayer({
+        ...sharedProps,
+        id: `${this.id}-label`,
+        data: data.data,
+        visibilityByZoom,
+        characterSet: 'auto',
+
+        extensions,
+        collisionEnabled: true,
+        collisionGroup: `${this.id}-labels`,
+
+        getText: data.textLabels[0].getText,
+        getColor,
+        sizeScale,
+        outlineColor,
+
+        ...(secondaryLabel && {
+          getSecondaryText: data.textLabels[1].getText,
+          getSecondaryColor,
+          secondarySizeScale,
+          secondaryOutlineColor
+        }),
 
-        // TODO handle function case
-        backgroundPadding[LEFT] += pixelOffset[0];
-        backgroundPadding[RIGHT] -= pixelOffset[0];
-        backgroundPadding[TOP] += pixelOffset[1];
-        backgroundPadding[BOTTOM] -= pixelOffset[1];
-
-        const {size: sizeScale} = textLabel[i];
-
-        accu.push(
-          new EnhancedTextLayer({
-            ...sharedProps,
-            extensions,
-            collisionEnabled: true,
-            collisionGroup: 'labels',
-            id: `${this.id}-label-${textLabel[i].field?.name}`,
-            data: data.data,
-            visibilityByZoom,
-            getText: d.getText,
-            getPosition,
-            characterSet: d.characterSet,
-            getPixelOffset: pixelOffset,
-            getSize: 1,
-            sizeScale,
-            getTextAnchor: anchor,
-            getAlignmentBaseline: alignment,
-
-            background: true,
-            backgroundPadding,
-
-            // DEBUG
-            ...(SHOW_TEXT_BORDER && {
-              getBorderColor: [255, 0, 0, 80],
-              getBackgroundColor: [0, 0, 0, 0],
-              getBorderWidth: 1
-            }),
-
-            getColor: textLabel[i].color,
-            fontFamily: 'Inter, sans',
-            fontSettings: {sdf: true},
-            fontWeight: 500,
-            outlineColor: textLabel[i].outlineColor,
-            outlineWidth: 4, // 1 seems to be thinner than 1px in CSS
-            parameters: {
-              // text will always show on top of all layers
-              depthTest: false
-            },
-
-            getFilterValue: data.getFilterValue,
-            updateTriggers: {
-              ...updateTriggers,
-              getText: textLabel[i].field?.name,
-              getPixelOffset: {
-                ...updateTriggers.getPixelOffset,
-                ...updateTriggers.getRadius,
-                anchor: mainLabel.anchor,
-                alignment: mainLabel.alignment
-              },
-              getTextAnchor: mainLabel.anchor,
-              getAlignmentBaseline: mainLabel.alignment,
-              getColor: textLabel[i].color
-            }
-          })
-        );
-      }
-      return accu;
-    }, []);
+        // Position
+        getPosition,
+        getRadius,
+        radiusScale,
+        getTextAnchor: anchor,
+        getAlignmentBaseline: alignment,
+
+        // Style
+        fontFamily: 'Inter, sans',
+        fontSettings: {sdf: true},
+        fontWeight: 500,
+        outlineWidth: 4,
+        parameters: {
+          // text will always show on top of all layers
+          depthTest: false
+        },
+
+        getFilterValue: data.getFilterValue,
+        updateTriggers: {
+          ...updateTriggers,
+          getText: textLabel[i].field?.name,
+          getPixelOffset: {
+            ...updateTriggers.getPixelOffset,
+            ...updateTriggers.getRadius,
+            anchor: mainLabel.anchor,
+            alignment: mainLabel.alignment
+          },
+          getTextAnchor: mainLabel.anchor,
+          getAlignmentBaseline: mainLabel.alignment,
+          getColor: textLabel[i].color
+        }
+      })
+    ];
   }
 
   /**

package/src/layers/layer-factory.js

@@ -45,7 +45,7 @@ export {DEFAULT_COLOR_RANGE};
 export const DEFAULT_TEXT_LABEL = {
   field: null,
   color: [44, 48, 50],
-  outlineColor: [0, 0, 0],
+  outlineColor: [255, 255, 255],
   size: 12,
   offset: [0, 0],
   anchor: 'start',

package/src/layers/layer-text-label.js

@@ -21,31 +21,25 @@
 import {notNullorUndefined} from 'utils/data-utils';
 import uniq from 'lodash.uniq';
 
-export const defaultPadding = 20;
-
 export function getTextOffsetByRadius(radiusScale, getRadius) {
   return textLabel => {
     const xMult = textLabel.anchor === 'middle' ? 0 : textLabel.anchor === 'start' ? 1 : -1;
     const yMult = textLabel.alignment === 'center' ? 0 : textLabel.alignment === 'bottom' ? 1 : -1;
 
-    const sizeOffset =
-      textLabel.alignment === 'center'
-        ? 0
-        : textLabel.alignment === 'bottom'
-        ? textLabel.size
-        : textLabel.size;
+    const sizeOffset = Math.abs(yMult * textLabel.size);
 
-    const padding = textLabel.size / 4; // Padding based on font size (font size / 4)
-    const pointPadding = 1 + 1 / 4; // Padding based on point size (point size / 4)
+    const xPadding = textLabel.size / 4; // Padding based on font size (font size / 4)
+    const yPadding = textLabel.size;
+    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
 
     return typeof getRadius === 'function'
       ? d => [
-          xMult * (getRadius(d) * radiusScale * pointPadding + padding),
-          yMult * (getRadius(d) * radiusScale * pointPadding + sizeOffset)
+          xMult * (getRadius(d) * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius(d) * radiusScale * radiusPadding + yPadding)
         ]
       : [
-          xMult * (getRadius * radiusScale * pointPadding + padding),
-          yMult * (getRadius * radiusScale * pointPadding + sizeOffset)
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding)
         ];
   };
 }
@@ -55,40 +49,9 @@ export const textLabelAccessor = textLabel => dc => d => {
   return notNullorUndefined(val) ? String(val) : '';
 };
 
-export const formatTextLabelData = ({
-  textLabel,
-  triggerChanged,
-  oldLayerData,
-  data,
-  dataContainer
-}) => {
+export const formatTextLabelData = ({textLabel, dataContainer}) => {
   return textLabel.map((tl, i) => {
-    if (!tl.field) {
-      // if no field selected,
-      return {
-        getText: null,
-        characterSet: []
-      };
-    }
-
-    const getText = textLabelAccessor(tl)(dataContainer);
-    let characterSet;
-
-    if (
-      !triggerChanged[`getLabelCharacterSet-${i}`] &&
-      oldLayerData &&
-      oldLayerData.textLabels &&
-      oldLayerData.textLabels[i]
-    ) {
-      characterSet = oldLayerData.textLabels[i].characterSet;
-    } else {
-      const allLabels = tl.field ? data.map(getText) : [];
-      characterSet = uniq(allLabels.join(''));
-    }
-
-    return {
-      characterSet,
-      getText
-    };
+    const getText = tl.field ? textLabelAccessor(tl)(dataContainer) : null;
+    return {getText};
   });
 };

package/src/layers/point-layer/point-layer.js

@@ -29,7 +29,7 @@ import {findDefaultColorField} from 'utils/dataset-utils';
 import PointLayerIcon from './point-layer-icon';
 import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES, UNKNOWN_COLOR} from 'constants/default-settings';
 
-import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
+import {formatTextLabelData} from '../layer-text-label';
 
 export const pointPosAccessor = ({lat, lng, altitude}) => dc => d => [
   dc.valueAt(d.index, lng.fieldIdx),
@@ -243,13 +243,7 @@ export default class PointLayer extends Layer {
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels
-    const textLabels = formatTextLabelData({
-      textLabel,
-      triggerChanged,
-      oldLayerData,
-      data,
-      dataContainer
-    });
+    const textLabels = formatTextLabelData({textLabel, dataContainer});
 
     const accessors = this.getAttributeAccessors({dataContainer});
 
@@ -285,11 +279,6 @@ export default class PointLayer extends Layer {
 
     const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
     const brushingProps = this.getBrushingExtensionProps(interactionConfig);
-    const getPixelOffset = getTextOffsetByRadius(
-      // TODO remove this scaling by half here and elsewhere
-      customMarkers ? radiusScale / 2 : radiusScale,
-      data.getRadius
-    );
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     const updateTriggers = {
@@ -311,7 +300,9 @@ export default class PointLayer extends Layer {
       {
         getPosition: data.getPosition,
         sharedProps,
-        getPixelOffset,
+        // TODO remove this scaling by half here and elsewhere
+        radiusScale: customMarkers ? radiusScale / 2 : radiusScale,
+        getRadius: data.getRadius,
         updateTriggers
       },
       opts