@deck.gl/arcgis 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/commons.d.ts

@@ -0,0 +1,26 @@
+import { Model } from '@luma.gl/engine';
+import { Deck } from '@deck.gl/core';
+import type { Texture, Framebuffer } from '@luma.gl/core';
+interface Renderer {
+    redraw: () => void;
+}
+export type RenderResources = {
+    deck: Deck;
+    texture: Texture;
+    model: Model;
+    fbo: Framebuffer;
+};
+export declare function initializeResources(this: Renderer, gl: WebGL2RenderingContext): Promise<RenderResources>;
+export declare function render(resources: RenderResources, viewport: {
+    width: number;
+    height: number;
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    altitude?: number;
+    pitch: number;
+    bearing: number;
+}): void;
+export declare function finalizeResources(resources: RenderResources): void;
+export {};
+//# sourceMappingURL=commons.d.ts.map

package/dist/commons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commons.d.ts","sourceRoot":"","sources":["../src/commons.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAW,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,KAAK,EAAS,OAAO,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAEhE,UAAU,QAAQ;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,WAAW,CAAC;CAClB,CAAC;AA8BF,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,sBAAsB,GACzB,OAAO,CAAC,eAAe,CAAC,CAkF1B;AAED,wBAAgB,MAAM,CACpB,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE;IACR,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,QAgCF;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,eAAe,QAK3D"}

package/dist/commons.js

@@ -0,0 +1,136 @@
+/* eslint-disable no-invalid-this */
+import { GL } from '@luma.gl/constants';
+import { Model, Geometry } from '@luma.gl/engine';
+import { Deck } from '@deck.gl/core';
+async function createDeckInstance(gl) {
+    return new Promise(resolve => {
+        const deckInstance = new Deck({
+            // Input is handled by the ArcGIS API for JavaScript.
+            controller: false,
+            // We use the same WebGL context as the ArcGIS API for JavaScript.
+            gl,
+            // We need depth testing in general; we don't know what layers might be added to the deck.
+            parameters: {
+                depthCompare: 'less-equal'
+            },
+            // To disable canvas resizing, since the FBO is owned by the ArcGIS API for JavaScript.
+            width: null,
+            height: null,
+            onDeviceInitialized: (device) => {
+                resolve({ deckInstance, device });
+            }
+        });
+    });
+}
+export async function initializeResources(gl) {
+    const { deckInstance, device } = await createDeckInstance(gl);
+    const texture = device.createTexture({
+        format: 'rgba8unorm',
+        width: 1,
+        height: 1,
+        sampler: {
+            minFilter: 'linear',
+            magFilter: 'linear',
+            addressModeU: 'clamp-to-edge',
+            addressModeV: 'clamp-to-edge'
+        }
+    });
+    const model = new Model(device, {
+        vs: `\
+#version 300 es
+in vec2 pos;
+out vec2 v_texcoord;
+void main(void) {
+    gl_Position = vec4(pos, 0.0, 1.0);
+    v_texcoord = (pos + 1.0) / 2.0;
+}
+    `,
+        fs: `\
+#version 300 es
+precision mediump float;
+uniform sampler2D deckglTexture;
+in vec2 v_texcoord;
+out vec4 fragColor;
+
+void main(void) {
+    vec4 imageColor = texture(deckglTexture, v_texcoord);
+    imageColor.rgb *= imageColor.a;
+    fragColor = imageColor;
+}
+    `,
+        bindings: {
+            deckglTexture: texture
+        },
+        parameters: {
+            depthWriteEnabled: true,
+            depthCompare: 'less-equal',
+            blendColorSrcFactor: 'one',
+            blendColorDstFactor: 'one-minus-src-alpha',
+            blendAlphaSrcFactor: 'one',
+            blendAlphaDstFactor: 'one-minus-src-alpha',
+            blendColorOperation: 'add',
+            blendAlphaOperation: 'add'
+        },
+        geometry: new Geometry({
+            topology: 'triangle-strip',
+            attributes: {
+                pos: { size: 2, value: new Int8Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, 1, 1, -1]) }
+            }
+        }),
+        vertexCount: 6
+    });
+    const fbo = device.createFramebuffer({
+        id: 'deckfbo',
+        width: 1,
+        height: 1,
+        colorAttachments: [texture],
+        depthStencilAttachment: 'depth16unorm'
+    });
+    deckInstance.setProps({
+        // This deck renders into an auxiliary framebuffer.
+        _framebuffer: fbo,
+        _customRender: redrawReason => {
+            if (redrawReason === 'arcgis') {
+                deckInstance._drawLayers(redrawReason);
+            }
+            else {
+                this.redraw();
+            }
+        }
+    });
+    return { deck: deckInstance, texture, fbo, model };
+}
+export function render(resources, viewport) {
+    const { model, deck, fbo } = resources;
+    const device = model.device;
+    // @ts-ignore device.getParametersWebGL should return `any` not `void`?
+    const screenFbo = device.getParametersWebGL(36006);
+    const { width, height, ...viewState } = viewport;
+    /* global window */
+    const dpr = window.devicePixelRatio;
+    const pixelWidth = Math.round(width * dpr);
+    const pixelHeight = Math.round(height * dpr);
+    fbo.resize({ width: pixelWidth, height: pixelHeight });
+    deck.setProps({ viewState });
+    // redraw deck immediately into deckFbo
+    deck.redraw('arcgis');
+    // We overlay the texture on top of the map using the full-screen quad.
+    const textureToScreenPass = device.beginRenderPass({
+        framebuffer: screenFbo,
+        parameters: { viewport: [0, 0, pixelWidth, pixelHeight] },
+        clearColor: false,
+        clearDepth: false
+    });
+    try {
+        model.draw(textureToScreenPass);
+    }
+    finally {
+        textureToScreenPass.end();
+    }
+}
+export function finalizeResources(resources) {
+    resources.deck.finalize();
+    resources.model.destroy();
+    resources.fbo.destroy();
+    resources.texture.destroy();
+}

package/dist/deck-layer-view-2d.d.ts

@@ -0,0 +1,2 @@
+export default function createDeckLayerView2D(BaseLayerViewGL2D: any): any;
+//# sourceMappingURL=deck-layer-view-2d.d.ts.map

package/dist/deck-layer-view-2d.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-layer-view-2d.d.ts","sourceRoot":"","sources":["../src/deck-layer-view-2d.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,iBAAiB,KAAA,OAgE9D"}

package/dist/deck-layer-view-2d.js

@@ -0,0 +1,57 @@
+import { initializeResources, render, finalizeResources } from "./commons.js";
+export default function createDeckLayerView2D(BaseLayerViewGL2D) {
+    return BaseLayerViewGL2D.createSubclass({
+        properties: {
+            cancelInitialization: null,
+            resources: null
+        },
+        // Attach is called as soon as the layer view is ready to start rendering.
+        async attach() {
+            // We use a full-screen quad and shaders to composite the frame rendered
+            // with deck.gl on top of the MapView. Composition uses the MapView context.
+            const gl = this.context;
+            let cancelled = false;
+            this.cancelInitialization = () => (cancelled = true);
+            const resources = await initializeResources.call(this, gl);
+            // If the layer got detached while awaiting, do not proceed
+            if (cancelled) {
+                finalizeResources(resources);
+                return;
+            }
+            this.resources = resources;
+            // Update deck props
+            this.layer.deck.on('change', props => resources.deck.setProps(props));
+            // We need to start drawing the deck.gl layer immediately.
+            resources.deck.setProps(this.layer.deck.toJSON());
+        },
+        redraw() {
+            this.requestRender();
+        },
+        // Called when the layer must be destroyed.
+        detach() {
+            this.cancelInitialization?.();
+            if (this.resources) {
+                finalizeResources(this.resources);
+                this.resources = null;
+            }
+        },
+        // Called every time that the layer view must be rendered.
+        render(renderParameters) {
+            if (!this.resources) {
+                return;
+            }
+            const [width, height] = this.view.state.size;
+            // The view state must be kept in-sync with the MapView of the ArcGIS API.
+            const state = renderParameters.state;
+            render(this.resources, {
+                width,
+                height,
+                latitude: this.view.center.latitude,
+                longitude: this.view.center.longitude,
+                zoom: this.view.featuresTilingScheme.scaleToLevel(state.scale),
+                bearing: -state.rotation,
+                pitch: 0
+            });
+        }
+    });
+}

package/dist/deck-layer.d.ts

@@ -0,0 +1,2 @@
+export default function createDeckLayer(DeckProps: any, Layer: any, DeckLayerView2D: any): any;
+//# sourceMappingURL=deck-layer.d.ts.map

package/dist/deck-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-layer.d.ts","sourceRoot":"","sources":["../src/deck-layer.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,SAAS,KAAA,EAAE,KAAK,KAAA,EAAE,eAAe,KAAA,OAgCxE"}

package/dist/deck-layer.js

@@ -0,0 +1,27 @@
+export default function createDeckLayer(DeckProps, Layer, DeckLayerView2D) {
+    // A layer that displays inside a MapView using an instance
+    // of the layer view defined above.
+    return Layer.createSubclass({
+        properties: {
+            deck: {},
+            blendMode: {},
+            effect: {}
+        },
+        constructor() {
+            this.deck = new DeckProps();
+        },
+        // Called by the MapView whenever a layer view
+        // needs to be created for a given layer.
+        createLayerView(view) {
+            if (view.type === '2d') {
+                return new DeckLayerView2D({
+                    view,
+                    layer: this
+                });
+            }
+            // eslint-disable-next-line
+            console.error('DeckLayer does not support SceneView at the moment. Use DeckRenderer instead.');
+            return null;
+        }
+    });
+}

package/dist/deck-props.d.ts

@@ -0,0 +1,2 @@
+export default function createDeckProps(Accessor: any): any;
+//# sourceMappingURL=deck-props.d.ts.map

package/dist/deck-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-props.d.ts","sourceRoot":"","sources":["../src/deck-props.ts"],"names":[],"mappings":"AAqBA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,QAAQ,KAAA,OAsC/C"}

package/dist/deck-props.js

@@ -0,0 +1,53 @@
+const properties = {
+    layers: {},
+    layerFilter: {},
+    parameters: {},
+    effects: {},
+    pickingRadius: {},
+    onBeforeRender: {},
+    onAfterRender: {},
+    onClick: {},
+    onHover: {},
+    onDragStart: {},
+    onDrag: {},
+    onDragEnd: {},
+    onError: {},
+    debug: {},
+    drawPickingColors: {},
+    getCursor: {},
+    getTooltip: {}
+};
+/* eslint-disable callback-return */
+export default function createDeckProps(Accessor) {
+    const DeckProps = Accessor.createSubclass({
+        properties,
+        constructor() {
+            this._callbacks = {};
+            this.watch(Object.keys(properties), (newValue, oldValue, propName) => {
+                this.emit('change', { [propName]: newValue });
+            });
+        },
+        on(eventName, cb) {
+            this._callbacks[eventName] = this._callbacks[eventName] || [];
+            this._callbacks[eventName].push(cb);
+        },
+        emit(eventName, details) {
+            const callbacks = this._callbacks[eventName];
+            if (callbacks) {
+                for (const cb of callbacks) {
+                    cb(details);
+                }
+            }
+        },
+        toJSON() {
+            const result = {};
+            for (const key of this.keys()) {
+                if (this[key] !== undefined) {
+                    result[key] = this[key];
+                }
+            }
+            return result;
+        }
+    });
+    return DeckProps;
+}

package/dist/deck-renderer.d.ts

@@ -0,0 +1,15 @@
+import { RenderResources } from "./commons.js";
+import SceneView from '@arcgis/core/views/SceneView';
+export default function createDeckRenderer(DeckProps: any, externalRenderers: any): {
+    new (view: SceneView, props: DeckProps): {
+        view: SceneView;
+        deck: any;
+        resources: RenderResources | null;
+        cancelInitialization: (() => void) | null;
+        setup(context: any): Promise<void>;
+        dispose(): void;
+        redraw(): void;
+        render(): void;
+    };
+};
+//# sourceMappingURL=deck-renderer.d.ts.map

package/dist/deck-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-renderer.d.ts","sourceRoot":"","sources":["../src/deck-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiD,eAAe,EAAC,qBAAkB;AAE1F,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAWrD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,SAAS,KAAA,EAAE,iBAAiB,KAAA;eAOjD,SAAS,SAAS,SAAS;cALvC,SAAS;cACT,GAAG;mBACE,eAAe,GAAG,IAAI;8BACX,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;;;;;;EAqD5C"}

package/dist/deck-renderer.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-invalid-this */
+import { initializeResources, render, finalizeResources } from "./commons.js";
+/** Convert ArcGIS FOV to WebMercatorViewport altitude */
+function arcgisFOVToDeckAltitude(fov, aspectRatio) {
+    // ArcGIS fov is corner-to-corner
+    const D = Math.sqrt(1 + aspectRatio ** 2);
+    const halfFOV = (fov / 2 / 180) * Math.PI;
+    return D / 2 / Math.tan(halfFOV);
+}
+export default function createDeckRenderer(DeckProps, externalRenderers) {
+    class DeckRenderer {
+        constructor(view, props) {
+            this.resources = null;
+            this.cancelInitialization = null;
+            this.view = view;
+            this.deck = new DeckProps(props);
+        }
+        async setup(context) {
+            const gl = context.gl;
+            let cancelled = false;
+            this.cancelInitialization = () => (cancelled = true);
+            const resources = await initializeResources.call(this, gl);
+            // If the renderer got disposed while awaiting, do not proceed
+            if (cancelled) {
+                finalizeResources(resources);
+                return;
+            }
+            this.deck.on('change', props => resources.deck.setProps(props));
+            resources.deck.setProps(this.deck.toJSON());
+            this.resources = resources;
+        }
+        dispose() {
+            this.cancelInitialization?.();
+            if (this.resources) {
+                finalizeResources(this.resources);
+            }
+        }
+        redraw() {
+            externalRenderers.requestRender(this.view);
+        }
+        render() {
+            const [width, height] = this.view.size;
+            render(this.resources, {
+                width,
+                height,
+                latitude: this.view.center.latitude,
+                longitude: this.view.center.longitude,
+                altitude: arcgisFOVToDeckAltitude(this.view.camera.fov, width / height),
+                zoom: this.view.zoom,
+                bearing: this.view.camera.heading,
+                pitch: this.view.camera.tilt
+            });
+        }
+    }
+    return DeckRenderer;
+}