diff --git a/src/ol/render/webgl.js b/src/ol/render/webgl.js index b02b092533..dcfbb1c019 100644 --- a/src/ol/render/webgl.js +++ b/src/ol/render/webgl.js @@ -1,83 +1,88 @@ /** * @module ol/render/webgl */ -const _ol_render_webgl_ = {}; /** * @const * @type {string} */ -_ol_render_webgl_.defaultFont = '10px sans-serif'; +export const DEFAULT_FONT = '10px sans-serif'; /** * @const * @type {ol.Color} */ -_ol_render_webgl_.defaultFillStyle = [0.0, 0.0, 0.0, 1.0]; +export const DEFAULT_FILLSTYLE = [0.0, 0.0, 0.0, 1.0]; /** * @const * @type {string} */ -_ol_render_webgl_.defaultLineCap = 'round'; +export const DEFAULT_LINECAP = 'round'; /** * @const * @type {Array.} */ -_ol_render_webgl_.defaultLineDash = []; +export const DEFAULT_LINEDASH = []; /** * @const * @type {number} */ -_ol_render_webgl_.defaultLineDashOffset = 0; +export const DEFAULT_LINEDASHOFFSET = 0; /** * @const * @type {string} */ -_ol_render_webgl_.defaultLineJoin = 'round'; +export const DEFAULT_LINEJOIN = 'round'; /** * @const * @type {number} */ -_ol_render_webgl_.defaultMiterLimit = 10; +export const DEFAULT_MITERLIMIT = 10; /** * @const * @type {ol.Color} */ -_ol_render_webgl_.defaultStrokeStyle = [0.0, 0.0, 0.0, 1.0]; +export const DEFAULT_STROKESTYLE = [0.0, 0.0, 0.0, 1.0]; /** * @const * @type {number} */ -_ol_render_webgl_.defaultTextAlign = 0.5; +export const DEFAULT_TEXTALIGN = 0.5; /** * @const * @type {number} */ -_ol_render_webgl_.defaultTextBaseline = 0.5; +export const DEFAULT_TEXTBASELINE = 0.5; /** * @const * @type {number} */ -_ol_render_webgl_.defaultLineWidth = 1; +export const DEFAULT_LINEWIDTH = 1; + +/** + * @const + * @type {number} + */ +export const EPSILON = Number.EPSILON || 2.220446049250313e-16; /** * Calculates the orientation of a triangle based on the determinant method. @@ -89,15 +94,9 @@ _ol_render_webgl_.defaultLineWidth = 1; * @param {number} y3 Third Y coordinate. * @return {boolean|undefined} Triangle is clockwise. */ -_ol_render_webgl_.triangleIsCounterClockwise = function(x1, y1, x2, y2, x3, y3) { +export const triangleIsCounterClockwise = function(x1, y1, x2, y2, x3, y3) { const area = (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1); - return (area <= _ol_render_webgl_.EPSILON && area >= -_ol_render_webgl_.EPSILON) ? + return (area <= EPSILON && area >= -EPSILON) ? undefined : area > 0; }; -/** - * @const - * @type {number} - */ -_ol_render_webgl_.EPSILON = Number.EPSILON || 2.220446049250313e-16; -export default _ol_render_webgl_; diff --git a/src/ol/render/webgl/CircleReplay.js b/src/ol/render/webgl/CircleReplay.js index f2a599b046..e6005b622b 100644 --- a/src/ol/render/webgl/CircleReplay.js +++ b/src/ol/render/webgl/CircleReplay.js @@ -10,7 +10,8 @@ import {translate} from '../../geom/flat/transform.js'; import {fragment, vertex} from '../webgl/circlereplay/defaultshader.js'; import Locations from '../webgl/circlereplay/defaultshader/Locations.js'; import WebGLReplay from '../webgl/Replay.js'; -import _ol_render_webgl_ from '../webgl.js'; +import {DEFAULT_LINEDASH, DEFAULT_LINEDASHOFFSET, DEFAULT_STROKESTYLE, + DEFAULT_FILLSTYLE, DEFAULT_LINEWIDTH} from '../webgl.js'; import {FLOAT} from '../../webgl.js'; import WebGLBuffer from '../../webgl/Buffer.js'; @@ -377,22 +378,22 @@ WebGLCircleReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle if (strokeStyle) { const strokeStyleLineDash = strokeStyle.getLineDash(); this.state_.lineDash = strokeStyleLineDash ? - strokeStyleLineDash : _ol_render_webgl_.defaultLineDash; + strokeStyleLineDash : DEFAULT_LINEDASH; const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset(); this.state_.lineDashOffset = strokeStyleLineDashOffset ? - strokeStyleLineDashOffset : _ol_render_webgl_.defaultLineDashOffset; + strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET; strokeStyleColor = strokeStyle.getColor(); if (!(strokeStyleColor instanceof CanvasGradient) && !(strokeStyleColor instanceof CanvasPattern)) { strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) { return i != 3 ? c / 255 : c; - }) || _ol_render_webgl_.defaultStrokeStyle; + }) || DEFAULT_STROKESTYLE; } else { - strokeStyleColor = _ol_render_webgl_.defaultStrokeStyle; + strokeStyleColor = DEFAULT_STROKESTYLE; } strokeStyleWidth = strokeStyle.getWidth(); strokeStyleWidth = strokeStyleWidth !== undefined ? - strokeStyleWidth : _ol_render_webgl_.defaultLineWidth; + strokeStyleWidth : DEFAULT_LINEWIDTH; } else { strokeStyleColor = [0, 0, 0, 0]; strokeStyleWidth = 0; @@ -402,9 +403,9 @@ WebGLCircleReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle !(fillStyleColor instanceof CanvasPattern)) { fillStyleColor = asArray(fillStyleColor).map(function(c, i) { return i != 3 ? c / 255 : c; - }) || _ol_render_webgl_.defaultFillStyle; + }) || DEFAULT_FILLSTYLE; } else { - fillStyleColor = _ol_render_webgl_.defaultFillStyle; + fillStyleColor = DEFAULT_FILLSTYLE; } if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) || !this.state_.fillColor || !equals(this.state_.fillColor, fillStyleColor) || diff --git a/src/ol/render/webgl/LineStringReplay.js b/src/ol/render/webgl/LineStringReplay.js index 77ecb8fae7..fd45af9c49 100644 --- a/src/ol/render/webgl/LineStringReplay.js +++ b/src/ol/render/webgl/LineStringReplay.js @@ -9,7 +9,9 @@ import {linearRingIsClockwise} from '../../geom/flat/orient.js'; import {translate} from '../../geom/flat/transform.js'; import {lineStringIsClosed} from '../../geom/flat/topology.js'; import {isEmpty} from '../../obj.js'; -import _ol_render_webgl_ from '../webgl.js'; +import {DEFAULT_LINECAP, DEFAULT_LINEDASH, DEFAULT_LINEDASHOFFSET, + DEFAULT_LINEJOIN, DEFAULT_LINEWIDTH, DEFAULT_MITERLIMIT, DEFAULT_STROKESTYLE, + triangleIsCounterClockwise} from '../webgl.js'; import WebGLReplay from '../webgl/Replay.js'; import {fragment, vertex} from '../webgl/linestringreplay/defaultshader.js'; import Locations from '../webgl/linestringreplay/defaultshader/Locations.js'; @@ -210,7 +212,7 @@ WebGLLineStringReplay.prototype.drawCoordinates_ = function(flatCoordinates, off } // We group CW and straight lines, thus the not so inituitive CCW checking function. - sign = _ol_render_webgl_.triangleIsCounterClockwise(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1]) + sign = triangleIsCounterClockwise(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1]) ? -1 : 1; numVertices = this.addVertices_(p0, p1, p2, @@ -646,31 +648,31 @@ WebGLLineStringReplay.prototype.setStrokeStyle_ = function(gl, color, lineWidth, WebGLLineStringReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { const strokeStyleLineCap = strokeStyle.getLineCap(); this.state_.lineCap = strokeStyleLineCap !== undefined ? - strokeStyleLineCap : _ol_render_webgl_.defaultLineCap; + strokeStyleLineCap : DEFAULT_LINECAP; const strokeStyleLineDash = strokeStyle.getLineDash(); this.state_.lineDash = strokeStyleLineDash ? - strokeStyleLineDash : _ol_render_webgl_.defaultLineDash; + strokeStyleLineDash : DEFAULT_LINEDASH; const strokeStyleLineDashOffset = strokeStyle.getLineDashOffset(); this.state_.lineDashOffset = strokeStyleLineDashOffset ? - strokeStyleLineDashOffset : _ol_render_webgl_.defaultLineDashOffset; + strokeStyleLineDashOffset : DEFAULT_LINEDASHOFFSET; const strokeStyleLineJoin = strokeStyle.getLineJoin(); this.state_.lineJoin = strokeStyleLineJoin !== undefined ? - strokeStyleLineJoin : _ol_render_webgl_.defaultLineJoin; + strokeStyleLineJoin : DEFAULT_LINEJOIN; let strokeStyleColor = strokeStyle.getColor(); if (!(strokeStyleColor instanceof CanvasGradient) && !(strokeStyleColor instanceof CanvasPattern)) { strokeStyleColor = asArray(strokeStyleColor).map(function(c, i) { return i != 3 ? c / 255 : c; - }) || _ol_render_webgl_.defaultStrokeStyle; + }) || DEFAULT_STROKESTYLE; } else { - strokeStyleColor = _ol_render_webgl_.defaultStrokeStyle; + strokeStyleColor = DEFAULT_STROKESTYLE; } let strokeStyleWidth = strokeStyle.getWidth(); strokeStyleWidth = strokeStyleWidth !== undefined ? - strokeStyleWidth : _ol_render_webgl_.defaultLineWidth; + strokeStyleWidth : DEFAULT_LINEWIDTH; let strokeStyleMiterLimit = strokeStyle.getMiterLimit(); strokeStyleMiterLimit = strokeStyleMiterLimit !== undefined ? - strokeStyleMiterLimit : _ol_render_webgl_.defaultMiterLimit; + strokeStyleMiterLimit : DEFAULT_MITERLIMIT; if (!this.state_.strokeColor || !equals(this.state_.strokeColor, strokeStyleColor) || this.state_.lineWidth !== strokeStyleWidth || this.state_.miterLimit !== strokeStyleMiterLimit) { this.state_.changed = true; diff --git a/src/ol/render/webgl/PolygonReplay.js b/src/ol/render/webgl/PolygonReplay.js index a4bd2cd8da..1e0a7c9088 100644 --- a/src/ol/render/webgl/PolygonReplay.js +++ b/src/ol/render/webgl/PolygonReplay.js @@ -13,7 +13,7 @@ import {fragment, vertex} from '../webgl/polygonreplay/defaultshader.js'; import Locations from '../webgl/polygonreplay/defaultshader/Locations.js'; import WebGLLineStringReplay from '../webgl/LineStringReplay.js'; import WebGLReplay from '../webgl/Replay.js'; -import _ol_render_webgl_ from '../webgl.js'; +import {triangleIsCounterClockwise, EPSILON, DEFAULT_FILLSTYLE} from '../webgl.js'; import Stroke from '../../style/Stroke.js'; import LinkedList from '../../structs/LinkedList.js'; import RBush from '../../structs/RBush.js'; @@ -220,9 +220,9 @@ WebGLPolygonReplay.prototype.classifyPoints_ = function(list, rtree, ccw) { let s1 = list.nextItem(); let pointsReclassified = false; do { - const reflex = ccw ? _ol_render_webgl_.triangleIsCounterClockwise(s1.p1.x, + const reflex = ccw ? triangleIsCounterClockwise(s1.p1.x, s1.p1.y, s0.p1.x, s0.p1.y, s0.p0.x, s0.p0.y) : - _ol_render_webgl_.triangleIsCounterClockwise(s0.p0.x, s0.p0.y, s0.p1.x, + triangleIsCounterClockwise(s0.p0.x, s0.p0.y, s0.p1.x, s0.p1.y, s1.p1.x, s1.p1.y); if (reflex === undefined) { this.removeItem_(s0, s1, list, rtree); @@ -273,7 +273,7 @@ WebGLPolygonReplay.prototype.bridgeHole_ = function(hole, holeMaxX, const intersection = this.calculateIntersection_(p1, p2, currSeg.p0, currSeg.p1, true); const dist = Math.abs(p1.x - intersection[0]); - if (dist < minDist && _ol_render_webgl_.triangleIsCounterClockwise(p1.x, p1.y, + if (dist < minDist && triangleIsCounterClockwise(p1.x, p1.y, currSeg.p0.x, currSeg.p0.y, currSeg.p1.x, currSeg.p1.y) !== undefined) { minDist = dist; p5 = {x: intersection[0], y: intersection[1], i: -1}; @@ -714,8 +714,8 @@ WebGLPolygonReplay.prototype.calculateIntersection_ = function(p0, p1, p2, p3, o if (denom !== 0) { const ua = ((p3.x - p2.x) * (p0.y - p2.y) - (p3.y - p2.y) * (p0.x - p2.x)) / denom; const ub = ((p1.x - p0.x) * (p0.y - p2.y) - (p1.y - p0.y) * (p0.x - p2.x)) / denom; - if ((!opt_touch && ua > _ol_render_webgl_.EPSILON && ua < 1 - _ol_render_webgl_.EPSILON && - ub > _ol_render_webgl_.EPSILON && ub < 1 - _ol_render_webgl_.EPSILON) || (opt_touch && + if ((!opt_touch && ua > EPSILON && ua < 1 - EPSILON && + ub > EPSILON && ub < 1 - EPSILON) || (opt_touch && ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1)) { return [p0.x + ua * (p1.x - p0.x), p0.y + ua * (p1.y - p0.y)]; } @@ -1042,9 +1042,9 @@ WebGLPolygonReplay.prototype.setFillStrokeStyle = function(fillStyle, strokeStyl !(fillStyleColor instanceof CanvasPattern)) { fillStyleColor = asArray(fillStyleColor).map(function(c, i) { return i != 3 ? c / 255 : c; - }) || _ol_render_webgl_.defaultFillStyle; + }) || DEFAULT_FILLSTYLE; } else { - fillStyleColor = _ol_render_webgl_.defaultFillStyle; + fillStyleColor = DEFAULT_FILLSTYLE; } if (!this.state_.fillColor || !equals(fillStyleColor, this.state_.fillColor)) { this.state_.fillColor = fillStyleColor; diff --git a/src/ol/render/webgl/TextReplay.js b/src/ol/render/webgl/TextReplay.js index 0029df007d..298e54891e 100644 --- a/src/ol/render/webgl/TextReplay.js +++ b/src/ol/render/webgl/TextReplay.js @@ -7,7 +7,9 @@ import {createCanvasContext2D} from '../../dom.js'; import GeometryType from '../../geom/GeometryType.js'; import {CANVAS_LINE_DASH} from '../../has.js'; import _ol_render_replay_ from '../replay.js'; -import _ol_render_webgl_ from '../webgl.js'; +import {DEFAULT_FILLSTYLE, DEFAULT_FONT, DEFAULT_LINECAP, DEFAULT_LINEDASH, + DEFAULT_LINEDASHOFFSET, DEFAULT_LINEJOIN, DEFAULT_LINEWIDTH, DEFAULT_MITERLIMIT, + DEFAULT_STROKESTYLE, DEFAULT_TEXTALIGN, DEFAULT_TEXTBASELINE} from '../webgl.js'; import WebGLTextureReplay from '../webgl/TextureReplay.js'; import AtlasManager from '../../style/AtlasManager.js'; import WebGLBuffer from '../../webgl/Buffer.js'; @@ -356,7 +358,7 @@ WebGLTextReplay.prototype.setTextStyle = function(textStyle) { } else { const textFillStyleColor = textFillStyle.getColor(); state.fillColor = asColorLike(textFillStyleColor ? - textFillStyleColor : _ol_render_webgl_.defaultFillStyle); + textFillStyleColor : DEFAULT_FILLSTYLE); } if (!textStrokeStyle) { state.strokeColor = null; @@ -364,24 +366,24 @@ WebGLTextReplay.prototype.setTextStyle = function(textStyle) { } else { const textStrokeStyleColor = textStrokeStyle.getColor(); state.strokeColor = asColorLike(textStrokeStyleColor ? - textStrokeStyleColor : _ol_render_webgl_.defaultStrokeStyle); - state.lineWidth = textStrokeStyle.getWidth() || _ol_render_webgl_.defaultLineWidth; - state.lineCap = textStrokeStyle.getLineCap() || _ol_render_webgl_.defaultLineCap; - state.lineDashOffset = textStrokeStyle.getLineDashOffset() || _ol_render_webgl_.defaultLineDashOffset; - state.lineJoin = textStrokeStyle.getLineJoin() || _ol_render_webgl_.defaultLineJoin; - state.miterLimit = textStrokeStyle.getMiterLimit() || _ol_render_webgl_.defaultMiterLimit; + textStrokeStyleColor : DEFAULT_STROKESTYLE); + state.lineWidth = textStrokeStyle.getWidth() || DEFAULT_LINEWIDTH; + state.lineCap = textStrokeStyle.getLineCap() || DEFAULT_LINECAP; + state.lineDashOffset = textStrokeStyle.getLineDashOffset() || DEFAULT_LINEDASHOFFSET; + state.lineJoin = textStrokeStyle.getLineJoin() || DEFAULT_LINEJOIN; + state.miterLimit = textStrokeStyle.getMiterLimit() || DEFAULT_MITERLIMIT; const lineDash = textStrokeStyle.getLineDash(); - state.lineDash = lineDash ? lineDash.slice() : _ol_render_webgl_.defaultLineDash; + state.lineDash = lineDash ? lineDash.slice() : DEFAULT_LINEDASH; } - state.font = textStyle.getFont() || _ol_render_webgl_.defaultFont; + state.font = textStyle.getFont() || DEFAULT_FONT; state.scale = textStyle.getScale() || 1; this.text_ = /** @type {string} */ (textStyle.getText()); const textAlign = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextAlign()]; const textBaseline = _ol_render_replay_.TEXT_ALIGN[textStyle.getTextBaseline()]; this.textAlign_ = textAlign === undefined ? - _ol_render_webgl_.defaultTextAlign : textAlign; + DEFAULT_TEXTALIGN : textAlign; this.textBaseline_ = textBaseline === undefined ? - _ol_render_webgl_.defaultTextBaseline : textBaseline; + DEFAULT_TEXTBASELINE : textBaseline; this.offsetX_ = textStyle.getOffsetX() || 0; this.offsetY_ = textStyle.getOffsetY() || 0; this.rotateWithView = !!textStyle.getRotateWithView();