UNPKG

@arcgis/core

Version:

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

js.arcgis.com

6 lines (5 loc) • 9.53 kB
1
2
3
4
5
6
/* All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.32/esri/copyright.txt for details. */ import{_ as t}from"../../chunks/tslib.es6.js";import e from"../../Color.js";import{watch as i}from"../../core/reactiveUtils.js";import{property as o}from"../../core/accessorSupport/decorators/property.js";import{cast as n}from"../../core/accessorSupport/decorators/cast.js";import"../../core/has.js";import"../../core/RandomLCG.js";import{subclass as s}from"../../core/accessorSupport/decorators/subclass.js";import a from"../Histogram.js";import r from"../Slider.js";import l from"../Widget.js";import{getDeviationValues as m}from"./support/utils.js";import"../support/widgetUtils.js";import{tsx as p}from"../support/jsxFactory.js";const d="zoom-cap",c={zoomCap:d,maxZoomCap:`${d}--max`,minZoomCap:`${d}--min`,zoomCapLine:`${d}--line`,zoomCapMask:`${d}--mask`,zoomCapUnderline:`${d}--underline`},h={interactiveTrack:!1};let u=class extends l{constructor(t,e){super(t,e),this.histogram=new a({layout:"vertical"}),this.histogramConfig=null,this.slider=new r({syncedSegmentsEnabled:!0,thumbsConstrained:!1,layout:"vertical",visibleElements:{labels:!0,rangeLabels:!0},labelInputsEnabled:!0,rangeLabelInputsEnabled:!0}),this.viewModel=null,this.visibleElements={...h};const o=this.slider;!t?.hasTimeData||t?.inputParseFunction||t?.inputFormatFunction||o.set({labelInputsEnabled:!1,rangeLabelInputsEnabled:!1}),o.draggableSegmentsEnabled=!!t?.visibleElements?.interactiveTrack,this.addHandles([o.on("max-change",(t=>this.emit("max-change",t))),o.on("max-click",(t=>this.emit("max-click",t))),o.on("min-change",(t=>this.emit("min-change",t))),o.on("min-click",(t=>this.emit("min-click",t))),o.on("segment-click",(t=>this.emit("segment-click",t))),o.on("segment-drag",(t=>this.emit("segment-drag",t))),o.on("thumb-change",(t=>this.emit("thumb-change",t))),o.on("thumb-click",(t=>this.emit("thumb-click",t))),o.on("thumb-drag",(t=>this.emit("thumb-drag",t))),o.on("track-click",(t=>this.emit("track-click",t))),i((()=>[this.histogramConfig,this.max,this.min,this.zoomOptions]),(()=>{const{histogram:t,histogramConfig:e,viewModel:{max:i,min:o}}=this,n=this.getParamsFromHistogramConfig(e);t.set({...n,max:i,min:o})})),i((()=>this.labelFormatFunction),(()=>{const{histogram:t,labelFormatFunction:e}=this;t.set({labelFormatFunction:e})})),i((()=>this.hasTimeData),(t=>{const{labelInputsEnabled:e,rangeLabelInputsEnabled:i}=this.slider,n=!t||this.inputFormatFunction&&this.inputParseFunction;o.set({labelInputsEnabled:e&&n,rangeLabelInputsEnabled:i&&n})})),i((()=>this.visibleElements?.interactiveTrack),(t=>{o.draggableSegmentsEnabled=!!t}))]),this._onMaxZoomCapPointerDown=this._onMaxZoomCapPointerDown.bind(this),this._onMinZoomCapPointerDown=this._onMinZoomCapPointerDown.bind(this)}initialize(){const{histogramConfig:t={},viewModel:e}=this,{labelFormatFunction:i,max:o,min:n}=e,s=this.getParamsFromHistogramConfig(t);this.histogram.set({labelFormatFunction:i,...s,max:o,min:n}),this.slider.set({viewModel:e})}get hasTimeData(){return this.viewModel?.hasTimeData??!1}set hasTimeData(t){this.viewModel&&(this.viewModel.hasTimeData=t)}get inputFormatFunction(){return this.viewModel?.inputFormatFunction}set inputFormatFunction(t){this.viewModel&&(this.viewModel.inputFormatFunction=t)}get inputParseFunction(){return this.viewModel?.inputParseFunction}set inputParseFunction(t){this.viewModel&&(this.viewModel.inputParseFunction=t)}get labelFormatFunction(){return this.viewModel?.labelFormatFunction}set labelFormatFunction(t){this.viewModel&&(this.viewModel.labelFormatFunction=t)}get max(){return this.viewModel?.getUnzoomedMax()??this._get("max")??null}set max(t){this.viewModel?this.viewModel.max=t:this._set("max",t)}get min(){return this.viewModel?.getUnzoomedMin()??this._get("min")??null}set min(t){this.viewModel?this.viewModel.min=t:this._set("min",t)}get precision(){return this.viewModel?.precision??4}set precision(t){this.viewModel&&(this.viewModel.precision=t)}get state(){return this.viewModel?.state??"disabled"}get syncedSegmentsEnabled(){return this.slider?.syncedSegmentsEnabled}set syncedSegmentsEnabled(t){this.slider&&(this.slider.syncedSegmentsEnabled=t)}get values(){return this.viewModel?.values??[]}castVisibleElements(t){return{...h,...t}}get zoomOptions(){return this.viewModel?.zoomOptions}set zoomOptions(t){this.viewModel&&(this.viewModel.zoomOptions=t)}renderContent(t,e,i){return this.slider.extraNodes=[t,this.renderHistogram(i)],p("div",{class:e},this.slider.render())}renderHistogram(t){return this.histogramConfig?p("div",{class:t??void 0,key:"histogram"},this.histogram.render()):null}renderBackgroundFillDefinition(t){return p("pattern",{height:"15",id:t,patternUnits:"userSpaceOnUse",width:"15",x:"0",y:"0"},p("image",{height:"15",href:"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNiIgd2lkdGg9IjE2Ij48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNjY2MiIC8+PHBhdGggZD0iTTAgMCBMOCAwIEw4IDggTDAgOCBaIiBmaWxsPSIjZmZmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDgpIiAvPjxwYXRoIGQ9Ik0wIDAgTDggMCBMOCA4IEwwIDggWiIgZmlsbD0iI2NjYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOCw4KSIgLz48cGF0aCBkPSJNMCAwIEw4IDAgTDggOCBMMCA4IFoiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsMCkiIC8+PC9zdmc+",width:"15",x:"0",y:"0"}))}renderRampFillDefinition(t,e){return p("linearGradient",{id:t,x1:"0",x2:"0",y1:"0",y2:"1"},this.renderRampFillStops(e))}renderRampFillStops(t){return t.reverse().map(((t,e)=>this.renderStop(t,e)))}renderStop(t,e){const{color:i,offset:o,opacity:n}=this.getPropsForStop(t);return p("stop",{key:`${e}-stop`,offset:o,"stop-color":i,"stop-opacity":n})}renderZoomCaps(){return[this.renderMaxZoomCap(),this.renderMinZoomCap()]}renderMinZoomCap(){if(null!=this.zoomOptions?.min)return p("svg",{class:this.classes(c.zoomCap,c.minZoomCap),key:"bottom",onpointerdown:this._onMinZoomCapPointerDown,viewBox:"0 0 30 11",xmlns:"http://www.w3.org/2000/svg"},p("polygon",{class:c.zoomCapMask,fill:"#1b8617",key:"mask",points:"0 11.3846154 30 11.3846154 30 1 25 5.38461538 20 1 15 5.38461538 10 1 5 5.38461538 0 1"}),p("polygon",{class:c.zoomCapUnderline,fill:"#69dcff",key:"underline",points:"0 0 5 4.38461538 10 0 15 4.38461538 20 0 25 4.38461538 30 0 30 4.61538462 25 9 20 4.61538462 15 9 10 4.61538462 5 9 0 4.61538462"}),p("polygon",{class:c.zoomCapLine,fill:"#da5656",key:"line",points:"0 1 5 5.38461538 10 1 15 5.38461538 20 1 25 5.38461538 30 1 30 5.61538462 25 10 20 5.61538462 15 10 10 5.61538462 5 10 0 5.61538462"}))}renderMaxZoomCap(){if(null!=this.zoomOptions?.max)return p("svg",{class:this.classes(c.zoomCap,c.maxZoomCap),key:"top",onpointerdown:this._onMaxZoomCapPointerDown,viewBox:"0 0 30 11",xmlns:"http://www.w3.org/2000/svg"},p("polygon",{class:c.zoomCapMask,key:"mask",points:"0 -1.81994377e-12 30 -1.81994377e-12 30 8.23076923 25 3.61538462 20 8.23076923 15 3.61538462 10 8.23076923 5 3.61538462 0 8.23076923"}),p("polygon",{class:c.zoomCapUnderline,key:"underline",points:"0 5.61538462 5 1 10 5.61538462 15 1 20 5.61538462 25 1 30 5.61538462 30 10.2307692 25 5.61538462 20 10.2307692 15 5.61538462 10 10.2307692 5 5.61538462 0 10.2307692"}),p("polygon",{class:c.zoomCapLine,key:"line",points:"0 4.61538462 5 -1.87329639e-12 10 4.61538462 15 -1.87329639e-12 20 4.61538462 25 -1.87329639e-12 30 4.61538462 30 9.23076923 25 4.61538462 20 9.23076923 15 4.61538462 10 9.23076923 5 4.61538462 0 9.23076923"}))}getPropsForStop(t){const{color:i,offset:o}=t;return{color:i instanceof e?i.toCss(!0):e.fromString(i).toCss(!0),offset:(100*o).toFixed(2)+"%",opacity:i instanceof e?i.toRgba()[3]:null}}getParamsFromHistogramConfig(t){if(!t)return null;const{average:e,barCreatedFunction:i,bins:o,dataLineCreatedFunction:n,dataLineUpdatedFunction:s}=t;return{average:e,barCreatedFunction:i,bins:o,dataLineCreatedFunction:n,dataLineUpdatedFunction:s,dataLines:this._getDataLines(t)}}_onMaxZoomCapPointerDown(){const{zoomOptions:t}=this;if(null!=t?.max){const{min:e}=t;this.zoomOptions=null!=e?{min:e}:null}}_onMinZoomCapPointerDown(){const{zoomOptions:t}=this;if(null!=t?.min){const{max:e}=t;this.zoomOptions=null!=e?{max:e}:null}}_getDataLines(t){const{average:e,standardDeviation:i,standardDeviationCount:o}=t,{max:n,min:s}=this.viewModel.getBounds();return[...this._getStandardDeviationDataLines(i,e,o||1),...t.dataLines||[]].filter((({value:t})=>t<=n&&t>=s))}_getStandardDeviationDataLines(t,e,i){const{max:o,min:n}=this.viewModel,s=.06*(o-n);return m(t,e,i).filter((t=>Math.abs(e-t)>s)).map(((t,i,o)=>{const n=this.labelFormatFunction?this.labelFormatFunction(t):t,s=o.length/2,a=i>=s?i-s+1:s-i;return{value:t,label:`${t>e?"+":"-"}${1===a?"":a}σ ${n}`}}))}};t([o()],u.prototype,"hasTimeData",null),t([o()],u.prototype,"histogram",void 0),t([o()],u.prototype,"histogramConfig",void 0),t([o()],u.prototype,"inputFormatFunction",null),t([o()],u.prototype,"inputParseFunction",null),t([o()],u.prototype,"labelFormatFunction",null),t([o()],u.prototype,"max",null),t([o()],u.prototype,"min",null),t([o()],u.prototype,"precision",null),t([o()],u.prototype,"slider",void 0),t([o({readOnly:!0})],u.prototype,"state",null),t([o()],u.prototype,"syncedSegmentsEnabled",null),t([o({readOnly:!0})],u.prototype,"values",null),t([o()],u.prototype,"viewModel",void 0),t([o()],u.prototype,"visibleElements",void 0),t([n("visibleElements")],u.prototype,"castVisibleElements",null),t([o()],u.prototype,"zoomOptions",null),u=t([s("esri.widgets.smartMapping.SmartMappingSliderBase")],u);const g=u;export{g as default};