@deck.gl/extensions 8.8.0-alpha.4 → 8.8.0-beta.1

package/{src → typed}/mask/shader-module.js

@@ -1,5 +1,4 @@
-import {project} from '@deck.gl/core';
-
+import { project } from '@deck.gl/core';
 const vs = `
 uniform vec4 mask_bounds;
 uniform bool mask_maskByInstance;
@@ -7,7 +6,6 @@ vec2 mask_getCoords(vec4 position) {
   return (position.xy - mask_bounds.xy) / (mask_bounds.zw - mask_bounds.xy);
 }
 `;
-
 const fs = `
 uniform sampler2D mask_texture;
 uniform int mask_channel;
@@ -30,12 +28,11 @@ bool mask_isInBounds(vec2 texCoords) {
   return maskValue < 0.5;
 }
 `;
-
 const inject = {
-  'vs:#decl': `
+    'vs:#decl': `
 varying vec2 mask_texCoords;
 `,
-  'vs:#main-end': `
+    'vs:#main-end': `
    vec4 mask_common_position;
    if (mask_maskByInstance) {
      mask_common_position = project_position(vec4(geometry.worldPosition, 1.0));
@@ -44,10 +41,10 @@ varying vec2 mask_texCoords;
    }
    mask_texCoords = mask_getCoords(mask_common_position);
 `,
-  'fs:#decl': `
+    'fs:#decl': `
 varying vec2 mask_texCoords;
 `,
-  'fs:#main-start': `
+    'fs:#main-start': `
   if (mask_enabled) {
     bool mask = mask_isInBounds(mask_texCoords);
 
@@ -59,20 +56,18 @@ varying vec2 mask_texCoords;
   }
 `
 };
-
 const getMaskUniforms = (opts = {}) => {
-  const uniforms = {};
-  if (opts.maskMap) {
-    uniforms.mask_texture = opts.maskMap;
-  }
-  return uniforms;
+    const uniforms = {};
+    if (opts.maskMap) {
+        uniforms.mask_texture = opts.maskMap;
+    }
+    return uniforms;
 };
-
 export default {
-  name: 'mask',
-  dependencies: [project],
-  vs,
-  fs,
-  inject,
-  getUniforms: getMaskUniforms
+    name: 'mask',
+    dependencies: [project],
+    vs,
+    fs,
+    inject,
+    getUniforms: getMaskUniforms
 };

package/typed/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../dist/es5/index.js",
+  "module": "../dist/esm/index.js",
+  "types": "index.d.ts"
+}

package/typed/path-style/path-style.d.ts

@@ -0,0 +1,66 @@
+import { LayerExtension } from '@deck.gl/core/typed';
+import type { Layer, LayerContext, Accessor, UpdateParameters } from '@deck.gl/core/typed';
+export declare type PathStyleExtensionProps<DataT = any> = {
+    /**
+     * Accessor for the dash array to draw each path with: `[dashSize, gapSize]` relative to the width of the path.
+     * Requires the `dash` option to be on.
+     */
+    getDashArray?: Accessor<DataT, [number, number]>;
+    /**
+     * Accessor for the offset to draw each path with, relative to the width of the path.
+     * Negative offset is to the left hand side, and positive offset is to the right hand side.
+     * @default 0
+     */
+    getOffset?: Accessor<DataT, number>;
+    /**
+     * If `true`, adjust gaps for the dashes to align at both ends.
+     * @default false
+     */
+    dashJustified?: boolean;
+    /**
+     * If `true`, gaps between solid strokes are pickable. If `false`, only the solid strokes are pickable.
+     * @default false
+     */
+    dashGapPickable?: boolean;
+};
+declare type PathStyleExtensionOptions = {
+    /**
+     * Add capability to render dashed lines.
+     * @default false
+     */
+    dash: boolean;
+    /**
+     * Add capability to offset lines.
+     * @default false
+     */
+    offset: boolean;
+    /**
+     * Improve dash rendering quality in certain circumstances. Note that this option introduces additional performance overhead.
+     * @default false
+     */
+    highPrecisionDash: boolean;
+};
+/** Adds selected features to the `PathLayer` and composite layers that render the `PathLayer`. */
+export default class PathStyleExtension extends LayerExtension<PathStyleExtensionOptions> {
+    static defaultProps: {
+        getDashArray: {
+            type: string;
+            value: number[];
+        };
+        getOffset: {
+            type: string;
+            value: number;
+        };
+        dashJustified: boolean;
+        dashGapPickable: boolean;
+    };
+    static extensionName: string;
+    constructor({ dash, offset, highPrecisionDash }?: Partial<PathStyleExtensionOptions>);
+    isEnabled(layer: Layer<PathStyleExtensionProps>): boolean;
+    getShaders(this: Layer<PathStyleExtensionProps>, extension: this): any;
+    initializeState(this: Layer<PathStyleExtensionProps>, context: LayerContext, extension: this): void;
+    updateState(this: Layer<PathStyleExtensionProps>, params: UpdateParameters<Layer<PathStyleExtensionProps>>, extension: this): void;
+    getDashOffsets(this: Layer<PathStyleExtensionProps>, path: number[] | number[][]): number[];
+}
+export {};
+//# sourceMappingURL=path-style.d.ts.map

package/typed/path-style/path-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-style.d.ts","sourceRoot":"","sources":["../../src/path-style/path-style.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,cAAc,EAAgC,MAAM,eAAe,CAAC;AAI5E,OAAO,KAAK,EAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAC,MAAM,eAAe,CAAC;AASnF,oBAAY,uBAAuB,CAAC,KAAK,GAAG,GAAG,IAAI;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,aAAK,yBAAyB,GAAG;IAC/B;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,iBAAiB,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,kGAAkG;AAClG,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,cAAc,CAAC,yBAAyB,CAAC;IACvF,MAAM,CAAC,YAAY;;;;;;;;;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAwB;gBAEhC,EACV,IAAY,EACZ,MAAc,EACd,iBAAyB,EAC1B,GAAE,OAAO,CAAC,yBAAyB,CAAM;IAI1C,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,GAAG,OAAO;IAIzD,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG;IAiBtE,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI;IA4B5F,WAAW,CACT,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EACpC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,EACxD,SAAS,EAAE,IAAI;IAgBjB,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,uBAAuB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,EAAE,GAAG,MAAM,EAAE;CAoB5F"}

package/typed/path-style/path-style.js

@@ -0,0 +1,107 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { LayerExtension, _mergeShaders as mergeShaders } from '@deck.gl/core';
+import { dashShaders, offsetShaders } from './shaders.glsl';
+import { dist } from 'gl-matrix/vec3';
+const defaultProps = {
+    getDashArray: { type: 'accessor', value: [0, 0] },
+    getOffset: { type: 'accessor', value: 0 },
+    dashJustified: false,
+    dashGapPickable: false
+};
+export default class PathStyleExtension extends LayerExtension {
+    constructor({ dash = false, offset = false, highPrecisionDash = false } = {}) {
+        super({ dash: dash || highPrecisionDash, offset, highPrecisionDash });
+    }
+    isEnabled(layer) {
+        return layer.state.pathTesselator;
+    }
+    getShaders(extension) {
+        if (!extension.isEnabled(this)) {
+            return null;
+        }
+        // Merge shader injection
+        let result = {};
+        if (extension.opts.dash) {
+            result = mergeShaders(result, dashShaders);
+        }
+        if (extension.opts.offset) {
+            result = mergeShaders(result, offsetShaders);
+        }
+        return result;
+    }
+    initializeState(context, extension) {
+        const attributeManager = this.getAttributeManager();
+        if (!attributeManager || !extension.isEnabled(this)) {
+            // This extension only works with the PathLayer
+            return;
+        }
+        extension.enabled = true;
+        if (extension.opts.dash) {
+            attributeManager.addInstanced({
+                instanceDashArrays: { size: 2, accessor: 'getDashArray' }
+            });
+        }
+        if (extension.opts.highPrecisionDash) {
+            attributeManager.addInstanced({
+                instanceDashOffsets: {
+                    size: 1,
+                    accessor: 'getPath',
+                    transform: extension.getDashOffsets.bind(this)
+                }
+            });
+        }
+        if (extension.opts.offset) {
+            attributeManager.addInstanced({
+                instanceOffsets: { size: 1, accessor: 'getOffset' }
+            });
+        }
+    }
+    updateState(params, extension) {
+        if (!extension.isEnabled(this)) {
+            return;
+        }
+        const uniforms = {};
+        if (extension.opts.dash) {
+            uniforms.dashAlignMode = this.props.dashJustified ? 1 : 0;
+            uniforms.dashGapPickable = Boolean(this.props.dashGapPickable);
+        }
+        this.state.model.setUniforms(uniforms);
+    }
+    getDashOffsets(path) {
+        const result = [0];
+        const positionSize = this.props.positionFormat === 'XY' ? 2 : 3;
+        const isNested = Array.isArray(path[0]);
+        const geometrySize = isNested ? path.length : path.length / positionSize;
+        let p;
+        let prevP;
+        for (let i = 0; i < geometrySize - 1; i++) {
+            p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
+            p = this.projectPosition(p);
+            if (i > 0) {
+                result[i] = result[i - 1] + dist(prevP, p);
+            }
+            prevP = p;
+        }
+        return result;
+    }
+}
+PathStyleExtension.extensionName = 'PathStyleExtension';
+PathStyleExtension.defaultProps = defaultProps;

package/typed/path-style/shaders.glsl.d.ts

@@ -0,0 +1,17 @@
+export declare const dashShaders: {
+    inject: {
+        'vs:#decl': string;
+        'vs:#main-end': string;
+        'fs:#decl': string;
+        'fs:#main-start': string;
+    };
+};
+export declare const offsetShaders: {
+    inject: {
+        'vs:#decl': string;
+        'vs:DECKGL_FILTER_SIZE': string;
+        'vCornerOffset = offsetVec;': string;
+        'fs:#main-start': string;
+    };
+};
+//# sourceMappingURL=shaders.glsl.d.ts.map

package/typed/path-style/shaders.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shaders.glsl.d.ts","sourceRoot":"","sources":["../../src/path-style/shaders.glsl.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;;CAwEvB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAsBzB,CAAC"}

package/typed/path-style/shaders.glsl.js

@@ -0,0 +1,93 @@
+export const dashShaders = {
+    inject: {
+        'vs:#decl': `
+attribute vec2 instanceDashArrays;
+attribute float instanceDashOffsets;
+varying vec2 vDashArray;
+varying float vDashOffset;
+`,
+        'vs:#main-end': `
+vDashArray = instanceDashArrays;
+vDashOffset = instanceDashOffsets / width.x;
+`,
+        'fs:#decl': `
+uniform float dashAlignMode;
+uniform float capType;
+uniform bool dashGapPickable;
+varying vec2 vDashArray;
+varying float vDashOffset;
+
+float round(float x) {
+  return floor(x + 0.5);
+}
+`,
+        // if given position is in the gap part of the dashed line
+        // dashArray.x: solid stroke length, relative to width
+        // dashArray.y: gap length, relative to width
+        // alignMode:
+        // 0 - no adjustment
+        // o----     ----     ----     ---- o----     -o----     ----     o
+        // 1 - stretch to fit, draw half dash at each end for nicer joints
+        // o--    ----    ----    ----    --o--      --o--     ----     --o
+        'fs:#main-start': `
+  float solidLength = vDashArray.x;
+  float gapLength = vDashArray.y;
+  float unitLength = solidLength + gapLength;
+
+  float offset;
+
+  if (unitLength > 0.0) {
+    if (dashAlignMode == 0.0) {
+      offset = vDashOffset;
+    } else {
+      unitLength = vPathLength / round(vPathLength / unitLength);
+      offset = solidLength / 2.0;
+    }
+
+    float unitOffset = mod(clamp(vPathPosition.y, 0.0, vPathLength) + offset, unitLength);
+
+    if (gapLength > 0.0 && unitOffset > solidLength) {
+      if (capType <= 0.5) {
+        if (!(dashGapPickable && picking_uActive)) {
+          discard;
+        }
+      } else {
+        // caps are rounded, test the distance to solid ends
+        float distToEnd = length(vec2(
+          min(unitOffset - solidLength, unitLength - unitOffset),
+          vPathPosition.x
+        ));
+        if (distToEnd > 1.0) {
+          if (!(dashGapPickable && picking_uActive)) {
+            discard;
+          }
+        }
+      }
+    }
+  }
+`
+    }
+};
+export const offsetShaders = {
+    inject: {
+        'vs:#decl': `
+attribute float instanceOffsets;
+`,
+        'vs:DECKGL_FILTER_SIZE': `
+  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;
+  size *= offsetWidth;
+`,
+        'vCornerOffset = offsetVec;': `
+  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;
+  vec2 offsetCenter = -instanceOffsets * (isCap ? perp : miterVec * miterSize) * 2.0;
+  vCornerOffset = vCornerOffset * offsetWidth - offsetCenter;
+`,
+        'fs:#main-start': `
+  float isInside;
+  isInside = step(-1.0, vPathPosition.x) * step(vPathPosition.x, 1.0);
+  if (isInside == 0.0) {
+    discard;
+  }
+`
+    }
+};