@deck.gl-community/editable-layers 9.0.0-alpha.1 → 9.0.2

package/src/editable-layers/path-marker-layer/path-marker-layer.ts

@@ -1,179 +0,0 @@
-import {CompositeLayer, COORDINATE_SYSTEM, DefaultProps} from '@deck.gl/core';
-import {ScatterplotLayer} from '@deck.gl/layers';
-import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
-import PathOutlineLayer, {PathOutlineLayerProps} from '../path-outline-layer/path-outline-layer';
-import Arrow2DGeometry from './arrow-2d-geometry';
-
-import createPathMarkers from './create-path-markers';
-import {getClosestPointOnPolyline} from './polyline';
-import {Vector3} from '@math.gl/core';
-
-const DISTANCE_FOR_MULTI_ARROWS = 0.1;
-const ARROW_HEAD_SIZE = 0.2;
-const ARROW_TAIL_WIDTH = 0.05;
-// const ARROW_CENTER_ADJUST = -0.8;
-
-const DEFAULT_MARKER_LAYER = SimpleMeshLayer;
-
-export type PathMarkerLayerProps<DataT> = PathOutlineLayerProps<DataT> & {
-  getDirection?: (x) => any;
-  getMarkerColor?: (x) => number[];
-  getMarkerPercentages?: (x: any, info: any) => number[];
-  highlightPoint?: any;
-  highlightIndex?: number;
-  MarkerLayer?: any;
-  markerLayerProps?: any;
-  sizeScale?: number;
-  fp64?: boolean;
-  nebulaLayer?: any;
-};
-
-const DEFAULT_MARKER_LAYER_PROPS = {
-  mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH})
-};
-
-const defaultProps: DefaultProps<PathMarkerLayerProps<any>> = Object.assign(
-  {},
-  PathOutlineLayer.defaultProps,
-  {
-    MarkerLayer: DEFAULT_MARKER_LAYER,
-    markerLayerProps: DEFAULT_MARKER_LAYER_PROPS,
-
-    sizeScale: 100,
-    fp64: false,
-
-    highlightIndex: -1,
-    highlightPoint: null,
-
-    getPath: (x) => x.path,
-    getColor: (x) => x.color,
-    getMarkerColor: (x) => [0, 0, 0, 255],
-    getDirection: (x) => x.direction,
-    getMarkerPercentages: (object, {lineLength}) =>
-      lineLength > DISTANCE_FOR_MULTI_ARROWS ? [0.25, 0.5, 0.75] : [0.5]
-  }
-);
-
-export default class PathMarkerLayer<
-  DataT = any,
-  ExtraPropsT = Record<string, unknown>
-> extends CompositeLayer<ExtraPropsT & Required<PathMarkerLayerProps<DataT>>> {
-  static layerName = 'PathMarkerLayer';
-  static defaultProps = defaultProps;
-
-  state: {
-    closestPoint: Vector3 | null;
-    closestPoints?: {position: Vector3}[];
-    markers: any[];
-    mesh: Arrow2DGeometry;
-  } = undefined!;
-
-  initializeState() {
-    this.state = {
-      markers: [],
-      mesh: new Arrow2DGeometry({headSize: ARROW_HEAD_SIZE, tailWidth: ARROW_TAIL_WIDTH}),
-      closestPoint: null,
-      closestPoints: []
-    };
-  }
-
-  projectFlat(xyz, viewport, coordinateSystem, coordinateOrigin) {
-    if (coordinateSystem === COORDINATE_SYSTEM.METER_OFFSETS) {
-      const [dx, dy] = viewport.metersToLngLatDelta(xyz);
-      const [x, y] = coordinateOrigin;
-      return viewport.projectFlat([x + dx, dy + y]);
-    } else if (coordinateSystem === COORDINATE_SYSTEM.LNGLAT_OFFSETS) {
-      const [dx, dy] = xyz;
-      const [x, y] = coordinateOrigin;
-      return viewport.projectFlat([x + dx, dy + y]);
-    }
-
-    return viewport.projectFlat(xyz);
-  }
-
-  updateState({props, oldProps, changeFlags}) {
-    if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {
-      const {
-        data,
-        getPath,
-        getDirection,
-        getMarkerColor,
-        getMarkerPercentages,
-        coordinateSystem,
-        coordinateOrigin
-      } = this.props;
-
-      const {viewport} = this.context;
-      const projectFlat = (o) => this.projectFlat(o, viewport, coordinateSystem, coordinateOrigin);
-      this.state.markers = createPathMarkers({
-        data,
-        getPath,
-        getDirection,
-        getColor: getMarkerColor,
-        getMarkerPercentages,
-        projectFlat
-      });
-      this._recalculateClosestPoint();
-    }
-    if (changeFlags.propsChanged) {
-      if (props.point !== oldProps.point) {
-        this._recalculateClosestPoint();
-      }
-    }
-  }
-
-  _recalculateClosestPoint() {
-    const {highlightPoint, highlightIndex} = this.props;
-    if (highlightPoint && highlightIndex >= 0) {
-      const object = this.props.data![highlightIndex];
-      const points = this.props.getPath(object, null as any);
-      const {point} = getClosestPointOnPolyline({points, p: highlightPoint});
-      this.state.closestPoints = [{position: point}];
-    } else {
-      this.state.closestPoints = [];
-    }
-  }
-
-  getPickingInfo({info}) {
-    return Object.assign(info, {
-      // override object with picked feature
-      object: (info.object && info.object.path) || info.object
-    });
-  }
-
-  renderLayers() {
-    return [
-      new PathOutlineLayer(
-        this.props,
-        this.getSubLayerProps({
-          id: 'paths',
-          // Note: data has to be passed explicitly like this to avoid being empty
-          data: this.props.data
-        })
-      ),
-      new this.props.MarkerLayer(
-        this.getSubLayerProps(
-          Object.assign({}, this.props.markerLayerProps, {
-            id: 'markers',
-            data: this.state.markers,
-            getOrientation: (x) => [0, -x.angle, 0],
-            getColor: (x) => x.color,
-            sizeScale: this.props.sizeScale,
-            fp64: this.props.fp64,
-            pickable: false,
-            parameters: {
-              blend: false,
-              depthTest: false
-            }
-          })
-        )
-      ),
-      this.state.closestPoints &&
-        new ScatterplotLayer({
-          id: `${this.props.id}-highlight`,
-          data: this.state.closestPoints,
-          fp64: this.props.fp64
-        })
-    ];
-  }
-}

package/src/editable-layers/path-marker-layer/polyline.ts

@@ -1,40 +0,0 @@
-import { Vector3, clamp } from '@math.gl/core';
-
-// Return the closest point on a line segment
-export function getClosestPointOnLine({ p, p1, p2, clampToLine = true }) {
-  const lineVector = new Vector3(p2).subtract(p1);
-  const pointVector = new Vector3(p).subtract(p1);
-  let dotProduct = lineVector.dot(pointVector);
-  if (clampToLine) {
-    dotProduct = clamp(dotProduct, 0, 1);
-  }
-
-  return lineVector.lerp(p1, p2, dotProduct);
-}
-
-// Return the closest point on a line segment
-export function getClosestPointOnPolyline({ p, points }) {
-  p = new Vector3(p);
-  let pClosest: Vector3 | null = null;
-  let distanceSquared = Infinity;
-  let index = -1;
-  for (let i = 0; i < points.length - 1; ++i) {
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const pClosestOnLine = getClosestPointOnLine({ p, p1, p2 });
-    const distanceToLineSquared = p.distanceSquared(pClosestOnLine);
-    if (distanceToLineSquared < distanceSquared) {
-      distanceSquared = distanceToLineSquared;
-      pClosest = pClosestOnLine;
-      index = i;
-    }
-  }
-  return {
-    point: pClosest as Vector3,
-    index,
-    p1: points[index],
-    p2: points[index + 1],
-    distanceSquared,
-    distance: Math.sqrt(distanceSquared),
-  };
-}

package/src/editable-layers/path-outline-layer/path-outline-layer.ts

@@ -1,147 +0,0 @@
-import { PathLayer, PathLayerProps } from '@deck.gl/layers';
-import type { DefaultProps, LayerContext } from '@deck.gl/core';
-import {GL} from '@luma.gl/constants';
-import { Framebuffer, Texture } from '@luma.gl/core';
-import outline from '../../shaderlib/outline/outline';
-import { UNIT } from '../../constants';
-
-// TODO - this should be built into assembleShaders
-function injectShaderCode({ source, code = '' }) {
-  const INJECT_CODE = /}[^{}]*$/;
-  return source.replace(INJECT_CODE, code.concat('\n}\n'));
-}
-
-const VS_CODE = `\
-  outline_setUV(gl_Position);
-  outline_setZLevel(instanceZLevel);
-`;
-
-const FS_CODE = `\
-  fragColor = outline_filterColor(fragColor);
-`;
-
-export type PathOutlineLayerProps<DataT> = PathLayerProps<DataT> & {
-  dashJustified?: boolean;
-  getDashArray?: [number, number] | ((d: DataT) => [number, number] | null);
-  getZLevel?: (d: DataT, index: number) => number;
-};
-
-const defaultProps: DefaultProps<PathOutlineLayerProps<any>> = {
-  getZLevel: () => 0,
-};
-
-export default class PathOutlineLayer<
-  DataT = any,
-  ExtraPropsT = Record<string, unknown>
-> extends PathLayer<DataT, ExtraPropsT & Required<PathOutlineLayerProps<DataT>>> {
-  static layerName = 'PathOutlineLayer';
-  static defaultProps = defaultProps;
-
-  state: {
-    model?: any;
-    pathTesselator: any;
-    outlineFramebuffer: Framebuffer;
-    dummyTexture: Texture;
-  } = undefined!;
-
-  // Override getShaders to inject the outline module
-  getShaders() {
-    const shaders = super.getShaders();
-    return Object.assign({}, shaders, {
-      modules: shaders.modules.concat([outline]),
-      vs: injectShaderCode({ source: shaders.vs, code: VS_CODE }),
-      fs: injectShaderCode({ source: shaders.fs, code: FS_CODE }),
-    });
-  }
-
-  // @ts-expect-error PathLayer is missing LayerContext arg
-  initializeState(context: LayerContext) {
-    super.initializeState();
-
-    // Create an outline "shadow" map
-    // TODO - we should create a single outlineMap for all layers
-    this.setState({
-      outlineFramebuffer: context.device.createFramebuffer({}),
-      dummyTexture: context.device.createTexture({}),
-    });
-
-    // Create an attribute manager
-    // @ts-expect-error check whether this.getAttributeManager works here
-    this.state.attributeManager.addInstanced({
-      instanceZLevel: {
-        size: 1,
-        type: GL.UNSIGNED_BYTE,
-        accessor: 'getZLevel',
-      },
-    });
-  }
-
-  // Override draw to add render module
-  draw({ moduleParameters = {}, parameters, uniforms, context }) {
-    // Need to calculate same uniforms as base layer
-    const {
-      jointRounded,
-      capRounded,
-      billboard,
-      miterLimit,
-      widthUnits,
-      widthScale,
-      widthMinPixels,
-      widthMaxPixels,
-    } = this.props;
-
-    uniforms = Object.assign({}, uniforms, {
-      jointType: Number(jointRounded),
-      capType: Number(capRounded),
-      billboard,
-      widthUnits: UNIT[widthUnits],
-      widthScale,
-      miterLimit,
-      widthMinPixels,
-      widthMaxPixels,
-    });
-
-    // Render the outline shadowmap (based on segment z orders)
-    const { outlineFramebuffer, dummyTexture } = this.state;
-    // TODO(v9): resize, see 'sf' example.
-    // outlineFramebuffer.resize();
-    // TODO(v9) clear FBO
-    // outlineFramebuffer.clear({ color: true, depth: true, stencil: true });
-
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: true,
-      outlineShadowmap: dummyTexture,
-    });
-
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: 0,
-        widthScale: this.props.widthScale * 1.3,
-      }),
-      parameters: {
-        depthTest: false,
-        // Biggest value needs to go into buffer
-        blendEquation: GL.MAX,
-      },
-      framebuffer: outlineFramebuffer,
-    });
-
-    // Now use the outline shadowmap to render the lines (with outlines)
-    this.state.model.updateModuleSettings({
-      outlineEnabled: true,
-      outlineRenderShadowmap: false,
-      outlineShadowmap: outlineFramebuffer,
-    });
-    this.state.model.draw({
-      uniforms: Object.assign({}, uniforms, {
-        jointType: Number(jointRounded),
-        capType: Number(capRounded),
-        widthScale: this.props.widthScale,
-      }),
-      parameters: {
-        depthTest: false,
-      },
-    });
-  }
-}

package/src/shaderlib/outline/outline.ts

@@ -1,101 +0,0 @@
-/* eslint-disable camelcase */
-const INITIAL_STATE: Record<string, any> = {
-  outlineEnabled: false,
-  outlineRenderShadowmap: false,
-  outlineShadowmap: null,
-};
-
-function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
-  const uniforms: Record<string, any> = {};
-  if (outlineEnabled !== undefined) {
-    // ? 1.0 : 0.0;
-    uniforms.outline_uEnabled = outlineEnabled;
-  }
-  if (outlineRenderShadowmap !== undefined) {
-    // ? 1.0 : 0.0;
-    uniforms.outline_uRenderOutlines = outlineRenderShadowmap;
-  }
-  if (outlineShadowmap !== undefined) {
-    uniforms.outline_uShadowmap = outlineShadowmap;
-  }
-  return uniforms;
-}
-
-const vs = `\
-#version 300 es
-in float instanceZLevel;
-out float outline_vzLevel;
-out vec4 outline_vPosition;
-
-// Set the z level for the outline shadowmap rendering
-void outline_setZLevel(float zLevel) {
-  outline_vzLevel = zLevel;
-}
-
-// Store an adjusted position for texture2DProj
-void outline_setUV(vec4 position) {
-  // mat4(
-  //   0.5, 0.0, 0.0, 0.0,
-  //   0.0, 0.5, 0.0, 0.0,
-  //   0.0, 0.0, 0.5, 0.0,
-  //   0.5, 0.5, 0.5, 1.0
-  // ) * position;
-  outline_vPosition = vec4(position.xyz * 0.5 + position.w * 0.5, position.w);
-}
-`;
-
-const fs = `\
-uniform bool outline_uEnabled;
-uniform bool outline_uRenderOutlines;
-uniform sampler2D outline_uShadowmap;
-
-in float outline_vzLevel;
-// in vec2 outline_vUV;
-in vec4 outline_vPosition;
-
-out vec4 fragColor;
-
-const float OUTLINE_Z_LEVEL_ERROR = 0.01;
-
-// Return a darker color in shadowmap
-vec4 outline_filterShadowColor(vec4 color) {
-  return vec4(outline_vzLevel / 255., outline_vzLevel / 255., outline_vzLevel / 255., 1.);
-}
-
-// Return a darker color if in shadowmap
-vec4 outline_filterDarkenColor(vec4 color) {
-  if (outline_uEnabled) {
-    float maxZLevel;
-    if (outline_vPosition.q > 0.0) {
-      maxZLevel = texture2DProj(outline_uShadowmap, outline_vPosition).r * 255.;
-    } else {
-      discard;
-    }
-    if (maxZLevel < outline_vzLevel + OUTLINE_Z_LEVEL_ERROR) {
-      vec4(color.rgb * 0.5, color.a);
-    } else {
-      discard;
-    }
-  }
-  return color;
-}
-
-// if enabled and rendering outlines - Render depth to shadowmap
-// if enabled and rendering colors - Return a darker color if in shadowmap
-// if disabled, just return color
-vec4 outline_filterColor(vec4 color) {
-  if (outline_uEnabled) {
-    return outline_uRenderOutlines ?
-      outline_filterShadowColor(color) :
-      outline_filterDarkenColor(color);
-  }
-  return color;
-}
-`;
-
-export default {
-  name: 'outline',
-  vs,
-  fs,
-  getUniforms,
-};