13030

Committed 26 Aug 2019 - 19:27 coverage decreased (-2.6%) to 80.38%

Build # 13030

Build Type

Pull #3490

travis-ci-com

Committed by

web-flow

Commit Message

integrate mapbox's near plane fix

Pull Request Pull Request #3490: [MapboxLayer] integrate mapbox-gl's near plane fix

Run Details

3369 of 4577 branches covered (73.61%)

Branch coverage included in aggregate %.

6877 of 8170 relevant lines covered (84.17%)

4644.76 hits per line

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

75.36

/modules/layers/src/text-layer/multi-icon-layer/multi-icon-layer.js

// 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 {createIterable} from '@deck.gl/core';
import IconLayer from '../../icon-layer/icon-layer';

import vs from './multi-icon-layer-vertex.glsl';
import fs from './multi-icon-layer-fragment.glsl';

// TODO expose as layer properties
const DEFAULT_GAMMA = 0.2;
const DEFAULT_BUFFER = 192.0 / 256;

const defaultProps = {
  // each paragraph can have one or multiple row(s)
  // each row can have one or multiple character(s)
  getRowSize: {type: 'accessor', value: x => x.rowSize || [0, 0]},
  // offset from the left, top position of the paragraph
  getOffsets: {type: 'accessor', value: x => x.offsets || [0, 0]},
  // [width, height] of the paragraph
  getParagraphSize: {type: 'accessor', value: x => x.size || [1, 1]},
  // 1: left, 0: middle, -1: right
  getAnchorX: {type: 'accessor', value: x => x.anchorX || 0},
  // 1: top, 0: center, -1: bottom
  getAnchorY: {type: 'accessor', value: x => x.anchorY || 0},
  getPixelOffset: {type: 'accessor', value: [0, 0]},

  // object with the same pickingIndex will be picked when any one of them is being picked
  getPickingIndex: {type: 'accessor', value: x => x.objectIndex}
};

export default class MultiIconLayer extends IconLayer {
  getShaders() {
    return Object.assign({}, super.getShaders(), {
      vs,
      fs
    });
  }

  initializeState() {
    super.initializeState();

    const attributeManager = this.getAttributeManager();
    attributeManager.addInstanced({
      instanceOffsets: {
        size: 2,
        accessor: 'getIcon',
        update: this.calculateInstanceOffsets
      },
      instancePixelOffset: {
        size: 2,
        transition: true,
        accessor: 'getPixelOffset'
      }
    });
  }

  updateState(updateParams) {
    super.updateState(updateParams);
    const {changeFlags} = updateParams;

    if (
      changeFlags.updateTriggersChanged &&
      (changeFlags.updateTriggersChanged.getAnchorX || changeFlags.updateTriggersChanged.getAnchorY)
    ) {
      this.getAttributeManager().invalidate('instanceOffsets');
    }
  }

  draw({uniforms}) {
    const {sdf} = this.props;
    super.draw({
      uniforms: Object.assign({}, uniforms, {
        // Refer the following doc about gamma and buffer
        // https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817
        buffer: DEFAULT_BUFFER,
        gamma: DEFAULT_GAMMA,
        sdf: Boolean(sdf)
      })
    });
  }

  calculateInstanceOffsets(attribute, {startRow, endRow}) {
    const {
      data,
      iconMapping,
      getIcon,
      getAnchorX,
      getAnchorY,
      getParagraphSize,
      getRowSize,
      getOffsets
    } = this.props;
    const {value, size} = attribute;
    let i = startRow * size;
    const {iterable} = createIterable(data, startRow, endRow);

    for (const object of iterable) {
      const icon = getIcon(object);
      const rect = iconMapping[icon] || {};
      const [width, height] = getParagraphSize(object);
      const [rowWidth] = getRowSize(object);
      const [offsetX, offsetY] = getOffsets(object);
      const anchorX = getAnchorX(object);
      const anchorY = getAnchorY(object);

      // For a multi-line object, offset in x-direction needs consider
      // the row offset in the paragraph and the object offset in the row
      const rowOffset = ((1 - anchorX) * (width - rowWidth)) / 2;
      value[i++] = ((anchorX - 1) * width) / 2 + rowOffset + rect.width / 2 + offsetX || 0;
      value[i++] = ((anchorY - 1) * height) / 2 + rect.height / 2 + offsetY || 0;
    }
  }

  calculateInstancePickingColors(attribute, {startRow, endRow}) {
    const {data, getPickingIndex} = this.props;
    const {value, size} = attribute;
    let i = startRow * size;
    const pickingColor = [];
    const {iterable} = createIterable(data, startRow, endRow);

    for (const point of iterable) {
      const index = getPickingIndex(point);
      this.encodePickingColor(index, pickingColor);

      value[i++] = pickingColor[0];
      value[i++] = pickingColor[1];
      value[i++] = pickingColor[2];
    }
  }
}

MultiIconLayer.layerName = 'MultiIconLayer';
MultiIconLayer.defaultProps = defaultProps;

1	// Copyright (c) 2015 - 2017 Uber Technologies, Inc.	10×
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	import {createIterable} from '@deck.gl/core';
22	import IconLayer from '../../icon-layer/icon-layer';
23
24	import vs from './multi-icon-layer-vertex.glsl';
25	import fs from './multi-icon-layer-fragment.glsl';
26
27	// TODO expose as layer properties
28	const DEFAULT_GAMMA = 0.2;	1×
29	const DEFAULT_BUFFER = 192.0 / 256;	1×
30
31	const defaultProps = {	1×
32	// each paragraph can have one or multiple row(s)
33	// each row can have one or multiple character(s)
UNCOV 34	getRowSize: {type: 'accessor', value: x => x.rowSize \|\| [0, 0]},	Branches [[0, 0], [0, 1]] missed. !
35	// offset from the left, top position of the paragraph
UNCOV 36	getOffsets: {type: 'accessor', value: x => x.offsets \|\| [0, 0]},	Branches [[1, 0], [1, 1]] missed. !
37	// [width, height] of the paragraph
UNCOV 38	getParagraphSize: {type: 'accessor', value: x => x.size \|\| [1, 1]},	Branches [[2, 0], [2, 1]] missed. !
39	// 1: left, 0: middle, -1: right
UNCOV 40	getAnchorX: {type: 'accessor', value: x => x.anchorX \|\| 0},	Branches [[3, 0], [3, 1]] missed. !
41	// 1: top, 0: center, -1: bottom
UNCOV 42	getAnchorY: {type: 'accessor', value: x => x.anchorY \|\| 0},	Branches [[4, 0], [4, 1]] missed. !
43	getPixelOffset: {type: 'accessor', value: [0, 0]},
44
45	// object with the same pickingIndex will be picked when any one of them is being picked
UNCOV 46	getPickingIndex: {type: 'accessor', value: x => x.objectIndex}	!
47	};
48
49	export default class MultiIconLayer extends IconLayer {
50	getShaders() {
51	return Object.assign({}, super.getShaders(), {	4×
52	vs,
53	fs
54	});
55	}
56
57	initializeState() {
58	super.initializeState();	4×
59
60	const attributeManager = this.getAttributeManager();	4×
61	attributeManager.addInstanced({	4×
62	instanceOffsets: {
63	size: 2,
64	accessor: 'getIcon',
65	update: this.calculateInstanceOffsets
66	},
67	instancePixelOffset: {
68	size: 2,
69	transition: true,
70	accessor: 'getPixelOffset'
71	}
72	});
73	}
74
75	updateState(updateParams) {
76	super.updateState(updateParams);	20×
77	const {changeFlags} = updateParams;	20×
78
79	if (	20×
80	changeFlags.updateTriggersChanged &&
81	(changeFlags.updateTriggersChanged.getAnchorX \|\| changeFlags.updateTriggersChanged.getAnchorY)
82	) {
83	this.getAttributeManager().invalidate('instanceOffsets');	3×
84	}
85	}
86
87	draw({uniforms}) {
88	const {sdf} = this.props;	19×
89	super.draw({	19×
90	uniforms: Object.assign({}, uniforms, {
91	// Refer the following doc about gamma and buffer
92	// https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817
93	buffer: DEFAULT_BUFFER,
94	gamma: DEFAULT_GAMMA,
95	sdf: Boolean(sdf)
96	})
97	});
98	}
99
100	calculateInstanceOffsets(attribute, {startRow, endRow}) {
101	const {
102	data,
103	iconMapping,
104	getIcon,
105	getAnchorX,
106	getAnchorY,
107	getParagraphSize,
108	getRowSize,
109	getOffsets
110	} = this.props;	13×
111	const {value, size} = attribute;	13×
112	let i = startRow * size;	13×
113	const {iterable} = createIterable(data, startRow, endRow);	13×
114
115	for (const object of iterable) {	13×
116	const icon = getIcon(object);	278,307×
117	const rect = iconMapping[icon] \|\| {};	Branches [[7, 1]] missed. 278,307×
118	const [width, height] = getParagraphSize(object);	278,307×
119	const [rowWidth] = getRowSize(object);	278,307×
120	const [offsetX, offsetY] = getOffsets(object);	278,307×
121	const anchorX = getAnchorX(object);	278,307×
122	const anchorY = getAnchorY(object);	278,307×
123
124	// For a multi-line object, offset in x-direction needs consider
125	// the row offset in the paragraph and the object offset in the row
126	const rowOffset = ((1 - anchorX) * (width - rowWidth)) / 2;	278,307×
127	value[i++] = ((anchorX - 1) * width) / 2 + rowOffset + rect.width / 2 + offsetX \|\| 0;	278,307×
128	value[i++] = ((anchorY - 1) * height) / 2 + rect.height / 2 + offsetY \|\| 0;	278,307×
129	}
130	}
131
132	calculateInstancePickingColors(attribute, {startRow, endRow}) {
133	const {data, getPickingIndex} = this.props;	10×
134	const {value, size} = attribute;	10×
135	let i = startRow * size;	10×
136	const pickingColor = [];	10×
137	const {iterable} = createIterable(data, startRow, endRow);	10×
138
139	for (const point of iterable) {	10×
140	const index = getPickingIndex(point);	139,185×
141	this.encodePickingColor(index, pickingColor);	139,185×
142
143	value[i++] = pickingColor[0];	139,185×
144	value[i++] = pickingColor[1];	139,185×
145	value[i++] = pickingColor[2];	139,185×
146	}
147	}
148	}
149
150	MultiIconLayer.layerName = 'MultiIconLayer';	1×
151	MultiIconLayer.defaultProps = defaultProps;	1×

uber / deck.gl / 13030

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