@arcgis/core/views/3d/analysis/DirectLineMeasurement/DirectLineMeasurementVisualization.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{onLocaleChange as t,fetchMessageBundle as i}from"../../../../intl.js";import s from"../../../../core/Accessor.js";import{multiplyOpacityToUnitRGBA as n,getContrast as l,multiplyOpacity as o}from"../../../../core/colorUtils.js";import"../../../../core/has.js";import{nextHighestPowerOfTen as a,deg2rad as r}from"../../../../core/mathUtils.js";import{destroyMaybe as c}from"../../../../core/maybe.js";import{toUnit as h}from"../../../../core/quantity.js";import{formatDecimal as u,formatImperialVerticalLength as d,formatImperialLength as m,formatMetricVerticalLength as g,formatMetricLength as _}from"../../../../core/quantityFormatUtils.js";import{watch as p,syncAndInitial as v,initial as b}from"../../../../core/reactiveUtils.js";import{createRenderScreenPointArray3 as L,createRenderScreenPointArray as w}from"../../../../core/screenUtils.js";import{adaptiveImperialLengthUnit as y,convertUnit as S}from"../../../../core/units.js";import{property as f,subclass as E}from"../../../../core/accessorSupport/decorators.js";import{dot as V}from"../../../../core/libs/gl-matrix-2/math/vec2.js";import{scale as z,add as A}from"../../../../core/libs/gl-matrix-2/math/vec3.js";import{create as P}from"../../../../core/libs/gl-matrix-2/factories/vec3f64.js";import{renderScreenSpaceTangent as M}from"../../interactive/support/viewUtils.js";import{LabelVisualElement as C,mirrorPosition as j}from"../../interactive/visualElements/LabelVisualElement.js";import{LineVisualElement as O}from"../../interactive/visualElements/LineVisualElement.js";import{MeasurementArrowVisualElement as x}from"../../interactive/visualElements/MeasurementArrowVisualElement.js";import{RightAngleQuadVisualElement as D}from"../../interactive/visualElements/RightAngleQuadVisualElement.js";import{GeodesicSegment as G,EuclideanSegment as H}from"../../interactive/visualElements/support/Segment.js";import{createStipplePatternSimple as k}from"../../webgl-engine/materials/lineStippleUtils.js";import{geodesicDistanceThreshold as T}from"../../../support/geodesicMeasurementUtils.js";let R=class extends s{get _parameters(){const e=this.view.effectiveTheme,{accentColor:t,textColor:i}=e,s=t.toUnitRGBA(),a=n(t,.75),r=l(t).toUnitRGBA(),c=l(i,160);return{accentColor:s,contrastColor:r,translucentAccentColor:a,triangleLineWidth:3,geodesicProjectionLineWidth:2,guideLineWidth:2,guideStippleLengthPixels:3,directLabelFontSize:16,horizontalLabelFontSize:12,verticalLabelFontSize:12,textColor:i,textBackgroundColor:o(c,.6),textCalloutColor:o(c,.5)}}get visible(){return this.analysisView.visible}get viewMode(){const{elevationAlignedStartPoint:e,elevationAlignedEndPoint:t}=this.analysisView;if(null==e||null==t||e.equals(t))return 0;const i=this.analysisView.result;if(null==i)return 1;if("geodesic"===this.actualVisualizedMeasurement)return this._requiresGeodesicGuideAt(this._startPosition)||this._requiresGeodesicGuideAt(this._endPosition)?3:1;const{verticalDistance:s,horizontalDistance:n}=i,l=h(s,"meters").value,o=h(n,"meters").value;return Math.min(l/o,o/l)<this.triangleCollapseRatioThreshold?1:2}get actualVisualizedMeasurement(){const{measurementMode:e,result:t}=this.analysisView;switch(e){case 0:return null!=t&&h(t.horizontalDistance,"meters").value>T?"geodesic":"euclidean";case 1:return"euclidean";case 2:return"geodesic"}}get allowVisualElementsOrientationChange(){return null==this._triangleOrientationOverride}set allowVisualElementsOrientationChange(e){null==this._triangleOrientationOverride!==e&&(null==this._triangleOrientationOverride?this._triangleOrientationOverride=this._actualVisualElementsOrientation:this._triangleOrientationOverride=null)}get labels(){return"geodesic"===this.actualVisualizedMeasurement?{direct:null,horizontal:this._segmentLabel,vertical:this._verticalLabel}:{direct:this._segmentLabel,horizontal:this._horizontalLabel,vertical:this._verticalLabel}}constructor(e){super(e),this._segmentVisualElement=null,this._triangleVisualElement=null,this._rightAngleQuad=null,this._projectedGeodesicLine=null,this._geodesicStartHint=null,this._geodesicEndHint=null,this._segmentLabel=null,this._verticalLabel=null,this._horizontalLabel=null,this._startPosition=P(),this._endPosition=P(),this._cornerPosition=P(),this._startPositionAtSeaLevel=P(),this._endPositionAtSeaLevel=P(),this._triangleOrientationOverride=null,this.messages=null,this.loadingMessages=!0,this.visualElementOrientation=0,this.triangleCollapseRatioThreshold=.03}initialize(){const e={attached:!0,view:this.view,isDecoration:!0},{guideLineWidth:i,guideStippleLengthPixels:s,triangleLineWidth:n,geodesicProjectionLineWidth:l,directLabelFontSize:o,verticalLabelFontSize:a,horizontalLabelFontSize:r}=this._parameters;this._segmentVisualElement=new x({...e,geometry:null,renderOccluded:4}),this._triangleVisualElement=new O({...e,width:n,renderOccluded:4}),this._rightAngleQuad=new D({...e,renderOccluded:4});const c={...e,polygonOffset:!0,renderOccluded:4};this._projectedGeodesicLine=new O({...c,width:l,stipplePattern:k(s)}),this._geodesicStartHint=new O({...c,width:i,stipplePattern:k(s)}),this._geodesicEndHint=new O({...c,width:i,stipplePattern:k(s)}),this._segmentLabel=new C({...e,fontSize:o}),this._verticalLabel=new C({...e,fontSize:a}),this._horizontalLabel=new C({...e,fontSize:r}),this.addHandles([p(()=>{const{elevationAlignedStartPoint:e,elevationAlignedEndPoint:t}=this.analysisView,i=this.view;return{view:i,camera:i.state.camera,viewMode:this.viewMode,elevationAlignedStartPoint:e,elevationAlignedEndPoint:t,orientation:this._actualVisualElementsOrientation,visualizedMeasurement:this.actualVisualizedMeasurement,stripeLength:this._measurementArrowStripeLength}},e=>this._updateGeometryAndViewMode(e),v),p(()=>({visible:this.visible,viewMode:this.viewMode}),e=>this._updateVisualElementVisibility(e),v),p(()=>({text:this._labelsText,visualizedMeasurement:this.actualVisualizedMeasurement}),e=>this._updateLabelText(e),v),p(()=>({visible:this.visible,viewMode:this.viewMode}),e=>this._updateLabelVisibility(e),v),p(()=>this._measurementArrowStripeLength,e=>this._updateSegmentStripeLength(e),v),t(()=>this._updateMessageBundle()),p(()=>this._parameters,({textBackgroundColor:e,textCalloutColor:t,textColor:i,translucentAccentColor:s,accentColor:n,contrastColor:l})=>{const{_segmentLabel:o,_verticalLabel:a,_horizontalLabel:r,_triangleVisualElement:c,_rightAngleQuad:h,_projectedGeodesicLine:u,_geodesicStartHint:d,_geodesicEndHint:m,_segmentVisualElement:g}=this;o.backgroundColor=e,o.calloutColor=t,o.textColor=i,a.backgroundColor=e,a.calloutColor=t,a.textColor=i,r.backgroundColor=e,r.calloutColor=t,r.textColor=i,c.color=s,h.color=s,u.color=s,d.color=s,m.color=s,g.color=n,g.contrastColor=l},b)]),this._updateMessageBundle()}destroy(){this._segmentVisualElement=c(this._segmentVisualElement),this._triangleVisualElement=c(this._triangleVisualElement),this._rightAngleQuad=c(this._rightAngleQuad),this._projectedGeodesicLine=c(this._projectedGeodesicLine),this._geodesicStartHint=c(this._geodesicStartHint),this._geodesicEndHint=c(this._geodesicEndHint),this._segmentLabel=c(this._segmentLabel),this._verticalLabel=c(this._verticalLabel),this._horizontalLabel=c(this._horizontalLabel),this.set("view",null)}_updateVisualElementVisibility({visible:e,viewMode:t}){if(this._segmentVisualElement.visible=!1,this._triangleVisualElement.visible=!1,this._rightAngleQuad.visible=!1,this._projectedGeodesicLine.visible=!1,this._geodesicStartHint.visible=!1,this._geodesicEndHint.visible=!1,e)switch(t){case 0:break;case 1:this._segmentVisualElement.visible=!0;break;case 2:this._segmentVisualElement.visible=!0,this._triangleVisualElement.visible=!0,this._rightAngleQuad.visible=!0;break;case 3:this._segmentVisualElement.visible=!0,this._projectedGeodesicLine.visible=!0,this._geodesicStartHint.visible=!0,this._geodesicEndHint.visible=!0}}_updateGeometryAndViewMode({view:e,camera:t,viewMode:i,elevationAlignedStartPoint:s,elevationAlignedEndPoint:n,orientation:l,visualizedMeasurement:o,stripeLength:a}){const r=e.renderCoordsHelper;if(null==r||null==s||null==n||s.equals(n))return;let c=this._startPosition,h=this._endPosition;r.toRenderCoords(s,c),r.toRenderCoords(n,h);const u=1===l?1:-1,d=u*(r.getAltitude(h)-r.getAltitude(c));d<0&&(c=this._endPosition,h=this._startPosition);const m="geodesic"===o?new G(this._startPosition,this._endPosition,r.spatialReference):new H(this._startPosition,this._endPosition);switch(this._segmentVisualElement.geometry=m,this._updateSegmentStripeLength(a),i){case 1:this._updateSegment(m,l);break;case 2:this._updateSegmentAndTriangle({view:e,camera:t,segment:m,orientation:l,startPosition:c,endPosition:h,deltaSign:u,altitudeDelta:d});break;case 3:this._updateSegmentAndProjection({view:e,orientation:l,startPosition:c,endPosition:h})}}_updateSegment(e,t){this._segmentLabel.anchor=1===t?"top":"bottom",this._segmentLabel.geometry={type:"segment",segment:e,sampleLocation:"center"}}_updateSegmentAndTriangle({view:{renderCoordsHelper:e},camera:t,segment:i,orientation:s,startPosition:n,endPosition:l,deltaSign:o,altitudeDelta:a}){const r=this._cornerPosition;e.worldUpAtPosition(n,r),z(r,r,o*Math.abs(a)),A(r,r,n),this._triangleVisualElement.geometry=[[[n[0],n[1],n[2]],[r[0],r[1],r[2]],[l[0],l[1],l[2]]]],this._rightAngleQuad.geometry={previous:n,center:r,next:l};const c=new H(n,r),h=new H(r,l),u=U(n,l,r,s,t);u&&(this._segmentLabel.anchor=u.segment,this._segmentLabel.geometry={type:"segment",segment:i,sampleLocation:"center"},this._verticalLabel.geometry={type:"segment",segment:c,sampleLocation:"center"},this._verticalLabel.anchor=u.vertical,this._horizontalLabel.geometry={type:"segment",segment:h,sampleLocation:"center"},this._horizontalLabel.anchor=u.horizontal)}_updateSegmentAndProjection({view:{renderCoordsHelper:e},orientation:t,startPosition:i,endPosition:s}){e.setAltitude(this._startPositionAtSeaLevel,0,i),e.setAltitude(this._endPositionAtSeaLevel,0,s);const n=new G(this._startPositionAtSeaLevel,this._endPositionAtSeaLevel,e.spatialReference);this._projectedGeodesicLine.setGeometryFromSegment(n),this._geodesicStartHint.setGeometryFromSegment(new H(this._startPositionAtSeaLevel,i)),this._geodesicEndHint.setGeometryFromSegment(new H(this._endPositionAtSeaLevel,s)),this._segmentLabel.geometry={type:"segment",segment:n,sampleLocation:"center"},this._segmentLabel.anchor=1===t?"top":"bottom"}_updateLabelText({text:e,visualizedMeasurement:t}){null!=e?(this._segmentLabel.text="euclidean"===t?e.directDistance:e.horizontalDistance,this._horizontalLabel.text=e.horizontalDistance,this._verticalLabel.text=e.verticalDistance):(this._segmentLabel.text=null,this._horizontalLabel.text=null,this._verticalLabel.text=null),this.notifyChange("labels")}_updateLabelVisibility({visible:e,viewMode:t}){const i=this._segmentLabel,s=this._horizontalLabel,n=this._verticalLabel;if(i.visible=!1,s.visible=!1,n.visible=!1,e)switch(t){case 1:case 3:i.visible=!0;break;case 2:i.visible=!0,s.visible=!0,n.visible=!0}}get _labelsText(){if(this.destroyed)return null;const e=this.messages,t=this.analysisView.result;if(null==t||null==e)return null;const{directDistance:i,horizontalDistance:s,verticalDistance:n}=t,l=this.analysisView.unit,o=e=>({directDistance:"",horizontalDistance:"",verticalDistance:"",...e});switch(l){case"metric":return o({directDistance:i&&_(e,i),horizontalDistance:s&&_(e,s),verticalDistance:n&&g(e,n)});case"imperial":return o({directDistance:i&&m(e,i),horizontalDistance:s&&m(e,s),verticalDistance:n&&d(e,n)});default:return o({directDistance:i&&u(e,i,l),horizontalDistance:s&&u(e,s,l),verticalDistance:n&&u(e,n,l)})}}_updateSegmentStripeLength(e){const t=this._segmentVisualElement;null!=e?(t.stripeLength=e,t.stripesEnabled=!0):t.stripesEnabled=!1}get _actualVisualElementsOrientation(){if(null!=this._triangleOrientationOverride)return this._triangleOrientationOverride;const e=this.visualElementOrientation;return 0===e?this.view.state.camera.aboveGround?1:2:e}_requiresGeodesicGuideAt(e){const t=this.view;if(!t?.state)return!1;const i=t.state.camera,s=t.renderCoordsHelper;if(!s)return!1;const n=i.computeScreenPixelSizeAt(e);return s.getAltitude(e)/n>=10}get _measurementArrowStripeLength(){const{result:e,unit:t}=this.analysisView;if(null==e)return null;let i=null;const s=e.directDistance;switch(t){case"metric":i=s&&h(s,"meters");break;case"imperial":i=s&&h(s,y(s.value,s.unit));break;default:i=s&&h(s,t)}if(null==i)return null;return a(i.value/30)*S(1,i.unit,"meters")}_updateMessageBundle(){this.loadingMessages=!0,i("esri/core/t9n/Units").then(e=>{this.messages=e}).finally(()=>{this.loadingMessages=!1})}get testData(){}};function U(e,t,i,s,n){const l=M(e,i,n,B),o=M(e,t,n,W);if(null==l||null==o)return null;const a=n.projectToRenderScreen(i,Q),r=n.projectToRenderScreen(t,q),c={segment:"bottom",horizontal:"top",vertical:null==a||null==r||a[0]<r[0]?"left":"right"};if(V(l,o)>=F){const e=Math.sign(l[1])===Math.sign(o[1]);c.segment=e?j(c.vertical):c.vertical}else{const e=I;M(i,t,n,e),V(e,o)>=F&&(c.segment=Math.sign(e[0])===Math.sign(o[0])?j(c.horizontal):c.horizontal)}if(2===s){const e=e=>"top"===e?"bottom":"top";c.segment=e(c.segment),c.horizontal=e(c.horizontal),c.vertical=e(c.vertical)}return c}e([f()],R.prototype,"_parameters",null),e([f()],R.prototype,"_triangleOrientationOverride",void 0),e([f()],R.prototype,"messages",void 0),e([f()],R.prototype,"view",void 0),e([f()],R.prototype,"analysis",void 0),e([f()],R.prototype,"analysisView",void 0),e([f()],R.prototype,"loadingMessages",void 0),e([f()],R.prototype,"visible",null),e([f()],R.prototype,"viewMode",null),e([f()],R.prototype,"actualVisualizedMeasurement",null),e([f()],R.prototype,"visualElementOrientation",void 0),e([f()],R.prototype,"triangleCollapseRatioThreshold",void 0),e([f()],R.prototype,"allowVisualElementsOrientationChange",null),e([f()],R.prototype,"labels",null),e([f()],R.prototype,"_labelsText",null),e([f()],R.prototype,"_actualVisualElementsOrientation",null),e([f()],R.prototype,"_measurementArrowStripeLength",null),R=e([E("esri.views.3d.analysis.DirectLineMeasurement.DirectLineMeasurementVisualization")],R);const F=Math.cos(r(12)),Q=L(),q=L(),B=w(),W=w(),I=w();export{R as DirectLineMeasurementVisualization};