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

package/dist/editable-layers/path-outline-layer/path-outline-layer.js

@@ -1,106 +0,0 @@
-import { PathLayer } from '@deck.gl/layers';
-import { GL } from '@luma.gl/constants';
-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);
-`;
-const defaultProps = {
-    getZLevel: () => 0,
-};
-export default class PathOutlineLayer extends PathLayer {
-    static layerName = 'PathOutlineLayer';
-    static defaultProps = defaultProps;
-    state = 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) {
-        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/dist/geojson-types.js

@@ -1,2 +0,0 @@
-// Geometry types
-export {};

package/dist/shaderlib/outline/outline.d.ts

@@ -1,8 +0,0 @@
-declare function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap }?: Record<string, any>): Record<string, any>;
-declare const _default: {
-    name: string;
-    vs: string;
-    fs: string;
-    getUniforms: typeof getUniforms;
-};
-export default _default;

package/dist/shaderlib/outline/outline.js

@@ -1,97 +0,0 @@
-/* eslint-disable camelcase */
-const INITIAL_STATE = {
-    outlineEnabled: false,
-    outlineRenderShadowmap: false,
-    outlineShadowmap: null,
-};
-function getUniforms({ outlineEnabled, outlineRenderShadowmap, outlineShadowmap } = INITIAL_STATE) {
-    const uniforms = {};
-    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,
-};

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/src/editable-layers/path-marker-layer/arrow-2d-geometry.ts

@@ -1,61 +0,0 @@
-import { Geometry } from '@luma.gl/engine';
-
-export default class Arrow2DGeometry extends Geometry {
-  constructor(opts = {}) {
-    super(
-      Object.assign({}, opts, {
-        attributes: getArrowAttributes(opts),
-        topology: 'triangle-list' as const
-      })
-    );
-  }
-}
-
-function getArrowAttributes({ length = 1, headSize = 0.2, tailWidth = 0.05, tailStart = 0.05 }) {
-  const texCoords = [
-    // HEAD
-    0.5,
-    1.0,
-    0,
-    0.5 - headSize / 2,
-    1.0 - headSize,
-    0,
-    0.5 + headSize / 2,
-    1.0 - headSize,
-    0,
-    0.5 - tailWidth / 2,
-    tailStart,
-    0,
-    0.5 + tailWidth / 2,
-    1.0 - headSize,
-    0,
-    0.5 + tailWidth / 2,
-    tailStart,
-    0,
-    0.5 - tailWidth / 2,
-    tailStart,
-    0,
-    0.5 - tailWidth / 2,
-    1.0 - headSize,
-    0,
-    0.5 + tailWidth / 2,
-    1.0 - headSize,
-    0,
-  ];
-
-  const normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];
-
-  // Center and scale
-  const positions = new Array(texCoords.length);
-  for (let i = 0; i < texCoords.length / 3; i++) {
-    const i3 = i * 3;
-    positions[i3 + 0] = (texCoords[i3 + 0] - 0.5) * length;
-    positions[i3 + 1] = (texCoords[i3 + 1] - 0.5) * length;
-    positions[i3 + 2] = 0;
-  }
-  return {
-    positions: {size: 3, value: new Float32Array(positions)},
-    normals: {size: 3, value: new Float32Array(normals)},
-    texCoords: {size: 2, value: new Float32Array(texCoords)},
-  };
-}

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

@@ -1,107 +0,0 @@
-import { Vector2 } from '@math.gl/core';
-import { Position } from '../../geojson-types';
-import { Color } from '../../types';
-
-export interface PathMarker {
-  position: Position,
-  angle: number,
-  color: Color,
-  object: unknown
-}
-
-function getLineLength(vPoints) {
-  // calculate total length
-  let lineLength = 0;
-  for (let i = 0; i < vPoints.length - 1; i++) {
-    lineLength += vPoints[i].distance(vPoints[i + 1]);
-  }
-  return lineLength;
-}
-
-const DEFAULT_COLOR = [0, 0, 0, 255];
-const DEFAULT_DIRECTION = { forward: true, backward: false };
-
-export default function createPathMarkers({
-  data,
-  getPath = (x, context) => x.path,
-  getDirection = (x) => x.direction,
-  getColor = (x) => DEFAULT_COLOR,
-  getMarkerPercentages = (x, info) => [0.5],
-  projectFlat,
-}): PathMarker[] {
-  const markers: PathMarker[] = [];
-
-  for (const object of data) {
-    const path = getPath(object, null);
-    const direction = getDirection(object) || DEFAULT_DIRECTION;
-    const color = getColor(object);
-
-    const vPoints = path.map((p) => new Vector2(p));
-    const vPointsReverse = vPoints.slice(0).reverse();
-
-    // calculate total length
-    const lineLength = getLineLength(vPoints);
-
-    // Ask for where to put markers
-    const percentages = getMarkerPercentages(object, { lineLength });
-
-    // Create the markers
-    for (const percentage of percentages) {
-      if (direction.forward) {
-        const marker = createMarkerAlongPath({
-          path: vPoints,
-          percentage,
-          lineLength,
-          color,
-          object,
-          projectFlat,
-        });
-        markers.push(marker);
-      }
-
-      if (direction.backward) {
-        const marker = createMarkerAlongPath({
-          path: vPointsReverse,
-          percentage,
-          lineLength,
-          color,
-          object,
-          projectFlat,
-        });
-        markers.push(marker);
-      }
-    }
-  }
-
-  return markers;
-}
-
-function createMarkerAlongPath({ path, percentage, lineLength, color, object, projectFlat }): PathMarker {
-  const distanceAlong = lineLength * percentage;
-  let currentDistance = 0;
-  let previousDistance = 0;
-  let i = 0;
-  for (i = 0; i < path.length - 1; i++) {
-    currentDistance += path[i].distance(path[i + 1]);
-    if (currentDistance > distanceAlong) {
-      break;
-    }
-    previousDistance = currentDistance;
-  }
-
-  // If reached the end of the loop without exiting early,
-  // undo the final increment to avoid a null-pointer exception
-  if (i === path.length - 1) {
-    i -= 1;
-  }
-
-  const vDirection = path[i + 1].clone().subtract(path[i]).normalize();
-  const along = distanceAlong - previousDistance;
-  const vCenter = vDirection.clone().multiply(new Vector2(along, along)).add(path[i]);
-
-  const vDirection2 = new Vector2(projectFlat(path[i + 1])).subtract(projectFlat(path[i]));
-
-  const angle = (vDirection2.verticalAngle() * 180) / Math.PI;
-
-  return { position: [vCenter.x, vCenter.y, 0], angle, color, object };
-}

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),
-  };
-}