13127

Committed 29 Aug 2019 - 17:33 coverage increased (+2.5%) to 83.552%

Build # 13127

Build Type

Pull #3507

travis-ci-com

Committed by

web-flow

Commit Message

update the component-wrapping-rfc.md

Pull Request Pull Request #3507: update the component-wrapping-rfc.md

Run Details

3393 of 4570 branches covered (74.25%)

Branch coverage included in aggregate %.

7066 of 7948 relevant lines covered (88.9%)

3403.06 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

73.83

/modules/layers/src/bitmap-layer/bitmap-layer.js

// Copyright (c) 2015 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.

/* global HTMLVideoElement */
import GL from '@luma.gl/constants';
import {Layer} from '@deck.gl/core';
import {Model, Geometry, Texture2D} from '@luma.gl/core';

import vs from './bitmap-layer-vertex';
import fs from './bitmap-layer-fragment';

const DEFAULT_TEXTURE_PARAMETERS = {
  [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
  [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
  [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
};

const defaultProps = {
  image: {type: 'object', value: null, async: true},
  bounds: {type: 'array', value: [1, 0, 0, 1], compare: true},

  desaturate: {type: 'number', min: 0, max: 1, value: 0},
  // More context: because of the blending mode we're using for ground imagery,
  // alpha is not effective when blending the bitmap layers with the base map.
  // Instead we need to manually dim/blend rgb values with a background color.
  transparentColor: {type: 'color', value: [0, 0, 0, 0]},
  tintColor: {type: 'color', value: [255, 255, 255]}
};

/*
 * @class
 * @param {object} props
 * @param {number} props.transparentColor - color to interpret transparency to
 * @param {number} props.tintColor - color bias
 */
export default class BitmapLayer extends Layer {
  getShaders() {
    return super.getShaders({vs, fs, modules: ['project32', 'picking']});
  }

  initializeState() {
    const attributeManager = this.getAttributeManager();

    attributeManager.add({
      positions: {
        size: 3,
        type: this.use64bitPositions() ? GL.DOUBLE : GL.FLOAT,
        update: this.calculatePositions,
        noAlloc: true
      }
    });

    this.setState({
      numInstances: 1,
      positions: new Float64Array(12)
    });
  }

  updateState({props, oldProps, changeFlags}) {
    // setup model first
    if (changeFlags.extensionsChanged) {
      const {gl} = this.context;
      if (this.state.model) {
        this.state.model.delete();
      }
      this.setState({model: this._getModel(gl)});
      this.getAttributeManager().invalidateAll();
    }

    if (props.image !== oldProps.image) {
      this.loadTexture(props.image);
    }

    const attributeManager = this.getAttributeManager();

    if (props.bounds !== oldProps.bounds) {
      attributeManager.invalidate('positions');
    }
  }

  finalizeState() {
    super.finalizeState();

    if (this.state.bitmapTexture) {
      this.state.bitmapTexture.delete();
    }
  }

  calculatePositions(attributes) {
    const {positions} = this.state;
    const {bounds} = this.props;
    // bounds as [minX, minY, maxX, maxY]
    if (Number.isFinite(bounds[0])) {
      /*
        (minX0, maxY3) ---- (maxX2, maxY3)
               |                  |
               |                  |
               |                  |
        (minX0, minY1) ---- (maxX2, minY1)
     */
      positions[0] = bounds[0];
      positions[1] = bounds[1];
      positions[2] = 0;

      positions[3] = bounds[0];
      positions[4] = bounds[3];
      positions[5] = 0;

      positions[6] = bounds[2];
      positions[7] = bounds[3];
      positions[8] = 0;

      positions[9] = bounds[2];
      positions[10] = bounds[1];
      positions[11] = 0;
    } else {
      // [[minX, minY], [minX, maxY], [maxX, maxY], [maxX, minY]]
      for (let i = 0; i < bounds.length; i++) {
        positions[i * 3 + 0] = bounds[i][0];
        positions[i * 3 + 1] = bounds[i][1];
        positions[i * 3 + 2] = bounds[i][2] || 0;
      }
    }

    attributes.value = positions;
  }

  _getModel(gl) {
    if (!gl) {
      return null;
    }

    /*
      0,1 --- 1,1
       |       |
      0,0 --- 1,0
    */
    return new Model(
      gl,
      Object.assign({}, this.getShaders(), {
        id: this.props.id,
        shaderCache: this.context.shaderCache,
        geometry: new Geometry({
          drawMode: GL.TRIANGLE_FAN,
          vertexCount: 4,
          attributes: {
            texCoords: new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])
          }
        }),
        isInstanced: false
      })
    );
  }

  draw(opts) {
    const {uniforms} = opts;
    const {bitmapTexture, model} = this.state;
    const {image, desaturate, transparentColor, tintColor} = this.props;

    // Update video frame
    if (
      bitmapTexture &&
      image instanceof HTMLVideoElement &&
      image.readyState > HTMLVideoElement.HAVE_METADATA
    ) {
      const sizeChanged =
        bitmapTexture.width !== image.videoWidth || bitmapTexture.height !== image.videoHeight;
      if (sizeChanged) {
        // note clears image and mipmaps when resizing
        bitmapTexture.resize({width: image.videoWidth, height: image.videoHeight, mipmaps: true});
        bitmapTexture.setSubImageData({
          data: image,
          paramters: DEFAULT_TEXTURE_PARAMETERS
        });
      } else {
        bitmapTexture.setSubImageData({
          data: image
        });
      }

      bitmapTexture.generateMipmap();
    }

    // // TODO fix zFighting
    // Render the image
    if (bitmapTexture && model) {
      model
        .setUniforms(
          Object.assign({}, uniforms, {
            bitmapTexture,
            desaturate,
            transparentColor: transparentColor.map(x => x / 255),
            tintColor: tintColor.slice(0, 3).map(x => x / 255)
          })
        )
        .draw();
    }
  }

  loadTexture(image) {
    const {gl} = this.context;

    if (this.state.bitmapTexture) {
      this.state.bitmapTexture.delete();
    }

    if (image instanceof Texture2D) {
      this.setState({bitmapTexture: image});
    } else if (image instanceof HTMLVideoElement) {
      // Initialize an empty texture while we wait for the video to load
      this.setState({
        bitmapTexture: new Texture2D(gl, {
          width: 1,
          height: 1,
          parameters: DEFAULT_TEXTURE_PARAMETERS,
          mipmaps: false
        })
      });
    } else if (image) {
      // Browser object: Image, ImageData, HTMLCanvasElement, ImageBitmap
      this.setState({
        bitmapTexture: new Texture2D(gl, {
          data: image,
          parameters: DEFAULT_TEXTURE_PARAMETERS
        })
      });
    }
  }
}

BitmapLayer.layerName = 'BitmapLayer';
BitmapLayer.defaultProps = defaultProps;

1	// Copyright (c) 2015 Uber Technologies, Inc.
2	//
3	// Permission is hereby granted, free of charge, to any person obtaining a copy
4	// of this software and associated documentation files (the "Software"), to deal
5	// in the Software without restriction, including without limitation the rights
6	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7	// copies of the Software, and to permit persons to whom the Software is
8	// furnished to do so, subject to the following conditions:
9	//
10	// The above copyright notice and this permission notice shall be included in
11	// all copies or substantial portions of the Software.
12	//
13	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19	// THE SOFTWARE.
20
21	/* global HTMLVideoElement */
22	import GL from '@luma.gl/constants';
23	import {Layer} from '@deck.gl/core';
24	import {Model, Geometry, Texture2D} from '@luma.gl/core';
25
26	import vs from './bitmap-layer-vertex';
27	import fs from './bitmap-layer-fragment';
28
29	const DEFAULT_TEXTURE_PARAMETERS = {	1×
30	[GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
31	[GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
32	[GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
33	[GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
34	};
35
36	const defaultProps = {	9×
37	image: {type: 'object', value: null, async: true},
38	bounds: {type: 'array', value: [1, 0, 0, 1], compare: true},
39
40	desaturate: {type: 'number', min: 0, max: 1, value: 0},
41	// More context: because of the blending mode we're using for ground imagery,
42	// alpha is not effective when blending the bitmap layers with the base map.
43	// Instead we need to manually dim/blend rgb values with a background color.
44	transparentColor: {type: 'color', value: [0, 0, 0, 0]},
45	tintColor: {type: 'color', value: [255, 255, 255]}
46	};
47
48	/*
49	* @class
50	* @param {object} props
51	* @param {number} props.transparentColor - color to interpret transparency to
52	* @param {number} props.tintColor - color bias
53	*/
54	export default class BitmapLayer extends Layer {
55	getShaders() {
56	return super.getShaders({vs, fs, modules: ['project32', 'picking']});	1×
57	}
58
59	initializeState() {
60	const attributeManager = this.getAttributeManager();	1×
61
62	attributeManager.add({	1×
63	positions: {
64	size: 3,
65	type: this.use64bitPositions() ? GL.DOUBLE : GL.FLOAT,	Branches [[0, 1]] missed.
66	update: this.calculatePositions,
67	noAlloc: true
68	}
69	});
70
71	this.setState({	1×
72	numInstances: 1,
73	positions: new Float64Array(12)
74	});
75	}
76
77	updateState({props, oldProps, changeFlags}) {
78	// setup model first
79	if (changeFlags.extensionsChanged) {	1×
80	const {gl} = this.context;	1×
81	if (this.state.model) {	Branches [[2, 0]] missed. 1×
82	this.state.model.delete();	1×
83	}
84	this.setState({model: this._getModel(gl)});	1×
85	this.getAttributeManager().invalidateAll();	2×
86	}
87
88	if (props.image !== oldProps.image) {	1×
89	this.loadTexture(props.image);	2×
90	}
91
92	const attributeManager = this.getAttributeManager();	1×
93
94	if (props.bounds !== oldProps.bounds) {	Branches [[4, 1]] missed. 1×
95	attributeManager.invalidate('positions');	2×
96	}
97	}
98
99	finalizeState() {
100	super.finalizeState();	2×
101
102	if (this.state.bitmapTexture) {	Branches [[5, 0]] missed. 2×
103	this.state.bitmapTexture.delete();	2×
104	}
105	}
106
107	calculatePositions(attributes) {
108	const {positions} = this.state;	4×
109	const {bounds} = this.props;	2×
110	// bounds as [minX, minY, maxX, maxY]
111	if (Number.isFinite(bounds[0])) {	2×
112	/*
113	(minX0, maxY3) ---- (maxX2, maxY3)
114	\| \|
115	\| \|
116	\| \|
117	(minX0, minY1) ---- (maxX2, minY1)
118	*/
UNCOV 119	positions[0] = bounds[0];	!
120	positions[1] = bounds[1];	2×
121	positions[2] = 0;	2×
122
123	positions[3] = bounds[0];	4×
124	positions[4] = bounds[3];	2×
125	positions[5] = 0;	4×
126
127	positions[6] = bounds[2];	4×
128	positions[7] = bounds[3];	4×
129	positions[8] = 0;	2×
130
131	positions[9] = bounds[2];	2×
UNCOV 132	positions[10] = bounds[1];	!
133	positions[11] = 0;	4×
134	} else {
135	// [[minX, minY], [minX, maxY], [maxX, maxY], [maxX, minY]]
136	for (let i = 0; i < bounds.length; i++) {	4×
137	positions[i * 3 + 0] = bounds[i][0];	3×
138	positions[i * 3 + 1] = bounds[i][1];	3×
139	positions[i * 3 + 2] = bounds[i][2] \|\| 0;	Branches [[7, 1]] missed. 3×
140	}
141	}
142
143	attributes.value = positions;	3×
144	}
145
146	_getModel(gl) {
147	if (!gl) {	Branches [[8, 0]] missed. 3×
148	return null;	3×
149	}
150
151	/*
152	0,1 --- 1,1
153	\| \|
154	0,0 --- 1,0
155	*/
156	return new Model(	3×
157	gl,
158	Object.assign({}, this.getShaders(), {
159	id: this.props.id,
160	shaderCache: this.context.shaderCache,
161	geometry: new Geometry({
162	drawMode: GL.TRIANGLE_FAN,
163	vertexCount: 4,
164	attributes: {
165	texCoords: new Float32Array([0, 0, 0, 1, 1, 1, 1, 0])
166	}
167	}),
168	isInstanced: false
169	})
170	);
171	}
172
173	draw(opts) {
174	const {uniforms} = opts;	3×
175	const {bitmapTexture, model} = this.state;	3×
176	const {image, desaturate, transparentColor, tintColor} = this.props;	3×
177
178	// Update video frame
179	if (	Branches [[9, 0]] missed. 3×
180	bitmapTexture &&	Branches [[10, 1], [10, 2]] missed.
181	image instanceof HTMLVideoElement &&
182	image.readyState > HTMLVideoElement.HAVE_METADATA
183	) {
184	const sizeChanged =
185	bitmapTexture.width !== image.videoWidth \|\| bitmapTexture.height !== image.videoHeight;	Branches [[11, 0], [11, 1]] missed. 3×
186	if (sizeChanged) {	Branches [[12, 0], [12, 1]] missed. 1×
187	// note clears image and mipmaps when resizing
188	bitmapTexture.resize({width: image.videoWidth, height: image.videoHeight, mipmaps: true});	1×
189	bitmapTexture.setSubImageData({	4×
190	data: image,
191	paramters: DEFAULT_TEXTURE_PARAMETERS
192	});
193	} else {
194	bitmapTexture.setSubImageData({	4×
195	data: image
196	});
197	}
198
199	bitmapTexture.generateMipmap();	4×
200	}
201
202	// // TODO fix zFighting
203	// Render the image
204	if (bitmapTexture && model) {	Branches [[13, 0], [14, 1]] missed. 4×
205	model	2×
206	.setUniforms(
207	Object.assign({}, uniforms, {
208	bitmapTexture,
209	desaturate,
210	transparentColor: transparentColor.map(x => x / 255),	!
211	tintColor: tintColor.slice(0, 3).map(x => x / 255)	2×
212	})
213	)
214	.draw();
215	}
216	}
217
218	loadTexture(image) {
219	const {gl} = this.context;	4×
220
221	if (this.state.bitmapTexture) {	Branches [[15, 0]] missed. 4×
222	this.state.bitmapTexture.delete();	4×
223	}
224
225	if (image instanceof Texture2D) {	Branches [[16, 0]] missed. 4×
226	this.setState({bitmapTexture: image});	!
UNCOV 227	} else if (image instanceof HTMLVideoElement) {	Branches [[17, 0]] missed. !
228	// Initialize an empty texture while we wait for the video to load
229	this.setState({	!
230	bitmapTexture: new Texture2D(gl, {
231	width: 1,
232	height: 1,
233	parameters: DEFAULT_TEXTURE_PARAMETERS,
234	mipmaps: false
235	})
236	});
UNCOV 237	} else if (image) {	Branches [[18, 0]] missed. !
238	// Browser object: Image, ImageData, HTMLCanvasElement, ImageBitmap
239	this.setState({	!
240	bitmapTexture: new Texture2D(gl, {
241	data: image,
242	parameters: DEFAULT_TEXTURE_PARAMETERS
243	})
244	});
245	}
246	}
247	}
248
UNCOV 249	BitmapLayer.layerName = 'BitmapLayer';	!
250	BitmapLayer.defaultProps = defaultProps;	4×

uber / deck.gl / 13127

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous