seismic-color-chart 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ /*! seismic-color-chart v1.0.0 | MIT License */
2
+ var e=(e,t=0,n=1)=>s(l(t,e),n),t=t=>{t._clipped=!1,t._unclipped=t.slice(0);for(let n=0;n<=3;n++)n<3?((t[n]<0||t[n]>255)&&(t._clipped=!0),t[n]=e(t[n],0,255)):3===n&&(t[n]=e(t[n],0,1));return t};const n={};for(let e of["Boolean","Number","String","Function","Array","Date","RegExp","Undefined","Null"])n[`[object ${e}]`]=e.toLowerCase();function r(e){return n[Object.prototype.toString.call(e)]||"object"}var o=(e,t=null)=>e.length>=3?Array.prototype.slice.call(e):"object"==r(e[0])&&t?t.split("").filter(t=>void 0!==e[0][t]).map(t=>e[0][t]):e[0],a=e=>{if(e.length<2)return null;const t=e.length-1;return"string"==r(e[t])?e[t].toLowerCase():null};const{PI:i,min:s,max:l}=Math,c=2*i,d=i/3,h=i/180,p=180/i;var u={format:{},autodetect:[]};class f{constructor(...e){const n=this;if("object"===r(e[0])&&e[0].constructor&&e[0].constructor===this.constructor)return e[0];let o=a(e),i=!1;if(!o){i=!0,u.sorted||(u.autodetect=u.autodetect.sort((e,t)=>t.p-e.p),u.sorted=!0);for(let t of u.autodetect)if(o=t.test(...e),o)break}if(!u.format[o])throw new Error("unknown format: "+e);{const r=u.format[o].apply(null,i?e:e.slice(0,-1));n._rgb=t(r)}3===n._rgb.length&&n._rgb.push(1)}toString(){return"function"==r(this.hex)?this.hex():`[${this._rgb.join(",")}]`}}const b=(...e)=>new b.Color(...e);b.Color=f,b.version="2.6.0";const{max:g}=Math;f.prototype.cmyk=function(){return((...e)=>{let[t,n,r]=o(e,"rgb");t/=255,n/=255,r/=255;const a=1-g(t,g(n,r)),i=a<1?1/(1-a):0;return[(1-t-a)*i,(1-n-a)*i,(1-r-a)*i,a]})(this._rgb)},b.cmyk=(...e)=>new f(...e,"cmyk"),u.format.cmyk=(...e)=>{e=o(e,"cmyk");const[t,n,r,a]=e,i=e.length>4?e[4]:1;return 1===a?[0,0,0,i]:[t>=1?0:255*(1-t)*(1-a),n>=1?0:255*(1-n)*(1-a),r>=1?0:255*(1-r)*(1-a),i]},u.autodetect.push({p:2,test:(...e)=>{if("array"===r(e=o(e,"cmyk"))&&4===e.length)return"cmyk"}});const m=e=>Math.round(100*e)/100,v=(...e)=>{e=o(e,"rgba");let[t,n,r]=e;t/=255,n/=255,r/=255;const a=s(t,n,r),i=l(t,n,r),c=(i+a)/2;let d,h;return i===a?(d=0,h=Number.NaN):d=c<.5?(i-a)/(i+a):(i-a)/(2-i-a),t==i?h=(n-r)/(i-a):n==i?h=2+(r-t)/(i-a):r==i&&(h=4+(t-n)/(i-a)),h*=60,h<0&&(h+=360),e.length>3&&void 0!==e[3]?[h,d,c,e[3]]:[h,d,c]},{round:x}=Math,y=(...e)=>{const t=o(e,"rgba");let n=a(e)||"rgb";return"hsl"==n.substr(0,3)?((...e)=>{const t=o(e,"hsla");let n=a(e)||"lsa";return t[0]=m(t[0]||0),t[1]=m(100*t[1])+"%",t[2]=m(100*t[2])+"%","hsla"===n||t.length>3&&t[3]<1?(t[3]=t.length>3?t[3]:1,n="hsla"):t.length=3,`${n}(${t.join(",")})`})(v(t),n):(t[0]=x(t[0]),t[1]=x(t[1]),t[2]=x(t[2]),("rgba"===n||t.length>3&&t[3]<1)&&(t[3]=t.length>3?t[3]:1,n="rgba"),`${n}(${t.slice(0,"rgb"===n?3:4).join(",")})`)},{round:w}=Math,k=(...e)=>{e=o(e,"hsl");const[t,n,r]=e;let a,i,s;if(0===n)a=i=s=255*r;else{const e=[0,0,0],o=[0,0,0],l=r<.5?r*(1+n):r+n-r*n,c=2*r-l,d=t/360;e[0]=d+1/3,e[1]=d,e[2]=d-1/3;for(let t=0;t<3;t++)e[t]<0&&(e[t]+=1),e[t]>1&&(e[t]-=1),6*e[t]<1?o[t]=c+6*(l-c)*e[t]:2*e[t]<1?o[t]=l:3*e[t]<2?o[t]=c+(l-c)*(2/3-e[t])*6:o[t]=c;[a,i,s]=[w(255*o[0]),w(255*o[1]),w(255*o[2])]}return e.length>3?[a,i,s,e[3]]:[a,i,s,1]},C=/^rgb\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*\)$/,S=/^rgba\(\s*(-?\d+),\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*([01]|[01]?\.\d+)\)$/,F=/^rgb\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/,E=/^rgba\(\s*(-?\d+(?:\.\d+)?)%,\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/,B=/^hsl\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*\)$/,M=/^hsla\(\s*(-?\d+(?:\.\d+)?),\s*(-?\d+(?:\.\d+)?)%\s*,\s*(-?\d+(?:\.\d+)?)%\s*,\s*([01]|[01]?\.\d+)\)$/,{round:L}=Math,P=e=>{let t;if(e=e.toLowerCase().trim(),u.format.named)try{return u.format.named(e)}catch(e){}if(t=e.match(C)){const e=t.slice(1,4);for(let t=0;t<3;t++)e[t]=+e[t];return e[3]=1,e}if(t=e.match(S)){const e=t.slice(1,5);for(let t=0;t<4;t++)e[t]=+e[t];return e}if(t=e.match(F)){const e=t.slice(1,4);for(let t=0;t<3;t++)e[t]=L(2.55*e[t]);return e[3]=1,e}if(t=e.match(E)){const e=t.slice(1,5);for(let t=0;t<3;t++)e[t]=L(2.55*e[t]);return e[3]=+e[3],e}if(t=e.match(B)){const e=t.slice(1,4);e[1]*=.01,e[2]*=.01;const n=k(e);return n[3]=1,n}if(t=e.match(M)){const e=t.slice(1,4);e[1]*=.01,e[2]*=.01;const n=k(e);return n[3]=+t[4],n}};P.test=e=>C.test(e)||S.test(e)||F.test(e)||E.test(e)||B.test(e)||M.test(e),f.prototype.css=function(e){return y(this._rgb,e)},b.css=(...e)=>new f(...e,"css"),u.format.css=P,u.autodetect.push({p:5,test:(e,...t)=>{if(!t.length&&"string"===r(e)&&P.test(e))return"css"}}),u.format.gl=(...e)=>{const t=o(e,"rgba");return t[0]*=255,t[1]*=255,t[2]*=255,t},b.gl=(...e)=>new f(...e,"gl"),f.prototype.gl=function(){const e=this._rgb;return[e[0]/255,e[1]/255,e[2]/255,e[3]]};const{floor:N}=Math;f.prototype.hcg=function(){return((...e)=>{const[t,n,r]=o(e,"rgb"),a=s(t,n,r),i=l(t,n,r),c=i-a,d=100*c/255,h=a/(255-c)*100;let p;return 0===c?p=Number.NaN:(t===i&&(p=(n-r)/c),n===i&&(p=2+(r-t)/c),r===i&&(p=4+(t-n)/c),p*=60,p<0&&(p+=360)),[p,d,h]})(this._rgb)},b.hcg=(...e)=>new f(...e,"hcg"),u.format.hcg=(...e)=>{e=o(e,"hcg");let t,n,r,[a,i,s]=e;s*=255;const l=255*i;if(0===i)t=n=r=s;else{360===a&&(a=0),a>360&&(a-=360),a<0&&(a+=360),a/=60;const e=N(a),o=a-e,c=s*(1-i),d=c+l*(1-o),h=c+l*o,p=c+l;switch(e){case 0:[t,n,r]=[p,h,c];break;case 1:[t,n,r]=[d,p,c];break;case 2:[t,n,r]=[c,p,h];break;case 3:[t,n,r]=[c,d,p];break;case 4:[t,n,r]=[h,c,p];break;case 5:[t,n,r]=[p,c,d]}}return[t,n,r,e.length>3?e[3]:1]},u.autodetect.push({p:1,test:(...e)=>{if("array"===r(e=o(e,"hcg"))&&3===e.length)return"hcg"}});const I=/^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,R=/^#?([A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/,O=e=>{if(e.match(I)){4!==e.length&&7!==e.length||(e=e.substr(1)),3===e.length&&(e=(e=e.split(""))[0]+e[0]+e[1]+e[1]+e[2]+e[2]);const t=parseInt(e,16);return[t>>16,t>>8&255,255&t,1]}if(e.match(R)){5!==e.length&&9!==e.length||(e=e.substr(1)),4===e.length&&(e=(e=e.split(""))[0]+e[0]+e[1]+e[1]+e[2]+e[2]+e[3]+e[3]);const t=parseInt(e,16);return[t>>24&255,t>>16&255,t>>8&255,Math.round((255&t)/255*100)/100]}throw new Error(`unknown hex color: ${e}`)},{round:$}=Math,_=(...e)=>{let[t,n,r,i]=o(e,"rgba"),s=a(e)||"auto";void 0===i&&(i=1),"auto"===s&&(s=i<1?"rgba":"rgb"),t=$(t),n=$(n),r=$(r);let l="000000"+(t<<16|n<<8|r).toString(16);l=l.substr(l.length-6);let c="0"+$(255*i).toString(16);switch(c=c.substr(c.length-2),s.toLowerCase()){case"rgba":return`#${l}${c}`;case"argb":return`#${c}${l}`;default:return`#${l}`}};f.prototype.hex=function(e){return _(this._rgb,e)},b.hex=(...e)=>new f(...e,"hex"),u.format.hex=O,u.autodetect.push({p:4,test:(e,...t)=>{if(!t.length&&"string"===r(e)&&[3,4,5,6,7,8,9].indexOf(e.length)>=0)return"hex"}});const{cos:A}=Math,{min:T,sqrt:Y,acos:z}=Math;f.prototype.hsi=function(){return((...e)=>{let t,[n,r,a]=o(e,"rgb");n/=255,r/=255,a/=255;const i=T(n,r,a),s=(n+r+a)/3,l=s>0?1-i/s:0;return 0===l?t=NaN:(t=(n-r+(n-a))/2,t/=Y((n-r)*(n-r)+(n-a)*(r-a)),t=z(t),a>r&&(t=c-t),t/=c),[360*t,l,s]})(this._rgb)},b.hsi=(...e)=>new f(...e,"hsi"),u.format.hsi=(...t)=>{t=o(t,"hsi");let n,r,a,[i,s,l]=t;return isNaN(i)&&(i=0),isNaN(s)&&(s=0),i>360&&(i-=360),i<0&&(i+=360),i/=360,i<1/3?(a=(1-s)/3,n=(1+s*A(c*i)/A(d-c*i))/3,r=1-(a+n)):i<2/3?(i-=1/3,n=(1-s)/3,r=(1+s*A(c*i)/A(d-c*i))/3,a=1-(n+r)):(i-=2/3,r=(1-s)/3,a=(1+s*A(c*i)/A(d-c*i))/3,n=1-(r+a)),n=e(l*n*3),r=e(l*r*3),a=e(l*a*3),[255*n,255*r,255*a,t.length>3?t[3]:1]},u.autodetect.push({p:2,test:(...e)=>{if("array"===r(e=o(e,"hsi"))&&3===e.length)return"hsi"}}),f.prototype.hsl=function(){return v(this._rgb)},b.hsl=(...e)=>new f(...e,"hsl"),u.format.hsl=k,u.autodetect.push({p:2,test:(...e)=>{if("array"===r(e=o(e,"hsl"))&&3===e.length)return"hsl"}});const{floor:D}=Math,{min:W,max:q}=Math;f.prototype.hsv=function(){return((...e)=>{e=o(e,"rgb");let[t,n,r]=e;const a=W(t,n,r),i=q(t,n,r),s=i-a;let l,c,d;return d=i/255,0===i?(l=Number.NaN,c=0):(c=s/i,t===i&&(l=(n-r)/s),n===i&&(l=2+(r-t)/s),r===i&&(l=4+(t-n)/s),l*=60,l<0&&(l+=360)),[l,c,d]})(this._rgb)},b.hsv=(...e)=>new f(...e,"hsv"),u.format.hsv=(...e)=>{e=o(e,"hsv");let t,n,r,[a,i,s]=e;if(s*=255,0===i)t=n=r=s;else{360===a&&(a=0),a>360&&(a-=360),a<0&&(a+=360),a/=60;const e=D(a),o=a-e,l=s*(1-i),c=s*(1-i*o),d=s*(1-i*(1-o));switch(e){case 0:[t,n,r]=[s,d,l];break;case 1:[t,n,r]=[c,s,l];break;case 2:[t,n,r]=[l,s,d];break;case 3:[t,n,r]=[l,c,s];break;case 4:[t,n,r]=[d,l,s];break;case 5:[t,n,r]=[s,l,c]}}return[t,n,r,e.length>3?e[3]:1]},u.autodetect.push({p:2,test:(...e)=>{if("array"===r(e=o(e,"hsv"))&&3===e.length)return"hsv"}});var H=18,j=.95047,V=1,G=1.08883,X=.137931034,J=.206896552,U=.12841855,K=.008856452;const{pow:Q}=Math,Z=(...e)=>{e=o(e,"lab");const[t,n,r]=e;let a,i,s,l,c,d;return i=(t+16)/116,a=isNaN(n)?i:i+n/500,s=isNaN(r)?i:i-r/200,i=V*te(i),a=j*te(a),s=G*te(s),l=ee(3.2404542*a-1.5371385*i-.4985314*s),c=ee(-.969266*a+1.8760108*i+.041556*s),d=ee(.0556434*a-.2040259*i+1.0572252*s),[l,c,d,e.length>3?e[3]:1]},ee=e=>255*(e<=.00304?12.92*e:1.055*Q(e,1/2.4)-.055),te=e=>e>J?e*e*e:U*(e-X),{pow:ne}=Math,re=(...e)=>{const[t,n,r]=o(e,"rgb"),[a,i,s]=ie(t,n,r),l=116*i-16;return[l<0?0:l,500*(a-i),200*(i-s)]},oe=e=>(e/=255)<=.04045?e/12.92:ne((e+.055)/1.055,2.4),ae=e=>e>K?ne(e,1/3):e/U+X,ie=(e,t,n)=>{e=oe(e),t=oe(t),n=oe(n);return[ae((.4124564*e+.3575761*t+.1804375*n)/j),ae((.2126729*e+.7151522*t+.072175*n)/V),ae((.0193339*e+.119192*t+.9503041*n)/G)]};f.prototype.lab=function(){return re(this._rgb)},b.lab=(...e)=>new f(...e,"lab"),u.format.lab=Z,u.autodetect.push({p:2,test:(...e)=>{if("array"===r(e=o(e,"lab"))&&3===e.length)return"lab"}});const{sin:se,cos:le}=Math,ce=(...e)=>{let[t,n,r]=o(e,"lch");return isNaN(r)&&(r=0),r*=h,[t,le(r)*n,se(r)*n]},de=(...e)=>{e=o(e,"lch");const[t,n,r]=e,[a,i,s]=ce(t,n,r),[l,c,d]=Z(a,i,s);return[l,c,d,e.length>3?e[3]:1]},{sqrt:he,atan2:pe,round:ue}=Math,fe=(...e)=>{const[t,n,r]=o(e,"lab"),a=he(n*n+r*r);let i=(pe(r,n)*p+360)%360;return 0===ue(1e4*a)&&(i=Number.NaN),[t,a,i]},be=(...e)=>{const[t,n,r]=o(e,"rgb"),[a,i,s]=re(t,n,r);return fe(a,i,s)};f.prototype.lch=function(){return be(this._rgb)},f.prototype.hcl=function(){return be(this._rgb).reverse()},b.lch=(...e)=>new f(...e,"lch"),b.hcl=(...e)=>new f(...e,"hcl"),u.format.lch=de,u.format.hcl=(...e)=>{const t=o(e,"hcl").reverse();return de(...t)},["lch","hcl"].forEach(e=>u.autodetect.push({p:2,test:(...t)=>{if("array"===r(t=o(t,e))&&3===t.length)return e}}));const ge={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",laserlemon:"#ffff54",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrod:"#fafad2",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",maroon2:"#7f0000",maroon3:"#b03060",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",purple2:"#7f007f",purple3:"#a020f0",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};f.prototype.name=function(){const e=_(this._rgb,"rgb");for(let t of Object.keys(ge))if(ge[t]===e)return t.toLowerCase();return e},u.format.named=e=>{if(e=e.toLowerCase(),ge[e])return O(ge[e]);throw new Error("unknown color name: "+e)},u.autodetect.push({p:5,test:(e,...t)=>{if(!t.length&&"string"===r(e)&&ge[e.toLowerCase()])return"named"}});f.prototype.num=function(){return((...e)=>{const[t,n,r]=o(e,"rgb");return(t<<16)+(n<<8)+r})(this._rgb)},b.num=(...e)=>new f(...e,"num"),u.format.num=e=>{if("number"==r(e)&&e>=0&&e<=16777215){return[e>>16,e>>8&255,255&e,1]}throw new Error("unknown num color: "+e)},u.autodetect.push({p:5,test:(...e)=>{if(1===e.length&&"number"===r(e[0])&&e[0]>=0&&e[0]<=16777215)return"num"}});const{round:me}=Math;f.prototype.rgb=function(e=!0){return!1===e?this._rgb.slice(0,3):this._rgb.slice(0,3).map(me)},f.prototype.rgba=function(e=!0){return this._rgb.slice(0,4).map((t,n)=>n<3?!1===e?t:me(t):t)},b.rgb=(...e)=>new f(...e,"rgb"),u.format.rgb=(...e)=>{const t=o(e,"rgba");return void 0===t[3]&&(t[3]=1),t},u.autodetect.push({p:3,test:(...e)=>{if("array"===r(e=o(e,"rgba"))&&(3===e.length||4===e.length&&"number"==r(e[3])&&e[3]>=0&&e[3]<=1))return"rgb"}});const{log:ve}=Math,xe=e=>{const t=e/100;let n,r,o;return t<66?(n=255,r=t<6?0:-155.25485562709179-.44596950469579133*(r=t-2)+104.49216199393888*ve(r),o=t<20?0:.8274096064007395*(o=t-10)-254.76935184120902+115.67994401066147*ve(o)):(n=351.97690566805693+.114206453784165*(n=t-55)-40.25366309332127*ve(n),r=325.4494125711974+.07943456536662342*(r=t-50)-28.0852963507957*ve(r),o=255),[n,r,o,1]},{round:ye}=Math;f.prototype.temp=f.prototype.kelvin=f.prototype.temperature=function(){return((...e)=>{const t=o(e,"rgb"),n=t[0],r=t[2];let a,i=1e3,s=4e4;for(;s-i>.4;){a=.5*(s+i);const e=xe(a);e[2]/e[0]>=r/n?s=a:i=a}return ye(a)})(this._rgb)},b.temp=b.kelvin=b.temperature=(...e)=>new f(...e,"temp"),u.format.temp=u.format.kelvin=u.format.temperature=xe;const{pow:we,sign:ke}=Math,Ce=(...e)=>{e=o(e,"lab");const[t,n,r]=e,a=we(t+.3963377774*n+.2158037573*r,3),i=we(t-.1055613458*n-.0638541728*r,3),s=we(t-.0894841775*n-1.291485548*r,3);return[255*Se(4.0767416621*a-3.3077115913*i+.2309699292*s),255*Se(-1.2684380046*a+2.6097574011*i-.3413193965*s),255*Se(-.0041960863*a-.7034186147*i+1.707614701*s),e.length>3?e[3]:1]};function Se(e){const t=Math.abs(e);return t>.0031308?(ke(e)||1)*(1.055*we(t,1/2.4)-.055):12.92*e}const{cbrt:Fe,pow:Ee,sign:Be}=Math,Me=(...e)=>{const[t,n,r]=o(e,"rgb"),[a,i,s]=[Le(t/255),Le(n/255),Le(r/255)],l=Fe(.4122214708*a+.5363325363*i+.0514459929*s),c=Fe(.2119034982*a+.6806995451*i+.1073969566*s),d=Fe(.0883024619*a+.2817188376*i+.6299787005*s);return[.2104542553*l+.793617785*c-.0040720468*d,1.9779984951*l-2.428592205*c+.4505937099*d,.0259040371*l+.7827717662*c-.808675766*d]};function Le(e){const t=Math.abs(e);return t<.04045?e/12.92:(Be(e)||1)*Ee((t+.055)/1.055,2.4)}f.prototype.oklab=function(){return Me(this._rgb)},b.oklab=(...e)=>new f(...e,"oklab"),u.format.oklab=Ce,u.autodetect.push({p:3,test:(...e)=>{if("array"===r(e=o(e,"oklab"))&&3===e.length)return"oklab"}});f.prototype.oklch=function(){return((...e)=>{const[t,n,r]=o(e,"rgb"),[a,i,s]=Me(t,n,r);return fe(a,i,s)})(this._rgb)},b.oklch=(...e)=>new f(...e,"oklch"),u.format.oklch=(...e)=>{e=o(e,"lch");const[t,n,r]=e,[a,i,s]=ce(t,n,r),[l,c,d]=Ce(a,i,s);return[l,c,d,e.length>3?e[3]:1]},u.autodetect.push({p:3,test:(...e)=>{if("array"===r(e=o(e,"oklch"))&&3===e.length)return"oklch"}}),f.prototype.alpha=function(e,t=!1){return void 0!==e&&"number"===r(e)?t?(this._rgb[3]=e,this):new f([this._rgb[0],this._rgb[1],this._rgb[2],e],"rgb"):this._rgb[3]},f.prototype.clipped=function(){return this._rgb._clipped||!1},f.prototype.darken=function(e=1){const t=this.lab();return t[0]-=H*e,new f(t,"lab").alpha(this.alpha(),!0)},f.prototype.brighten=function(e=1){return this.darken(-e)},f.prototype.darker=f.prototype.darken,f.prototype.brighter=f.prototype.brighten,f.prototype.get=function(e){const[t,n]=e.split("."),r=this[t]();if(n){const e=t.indexOf(n)-("ok"===t.substr(0,2)?2:0);if(e>-1)return r[e];throw new Error(`unknown channel ${n} in mode ${t}`)}return r};const{pow:Pe}=Math;f.prototype.luminance=function(e,t="rgb"){if(void 0!==e&&"number"===r(e)){if(0===e)return new f([0,0,0,this._rgb[3]],"rgb");if(1===e)return new f([255,255,255,this._rgb[3]],"rgb");let n=this.luminance(),r=20;const o=(n,a)=>{const i=n.interpolate(a,.5,t),s=i.luminance();return Math.abs(e-s)<1e-7||!r--?i:s>e?o(n,i):o(i,a)},a=(n>e?o(new f([0,0,0]),this):o(this,new f([255,255,255]))).rgb();return new f([...a,this._rgb[3]])}return Ne(...this._rgb.slice(0,3))};const Ne=(e,t,n)=>.2126*(e=Ie(e))+.7152*(t=Ie(t))+.0722*(n=Ie(n)),Ie=e=>(e/=255)<=.03928?e/12.92:Pe((e+.055)/1.055,2.4);var Re={},Oe=(e,t,n=.5,...o)=>{let a=o[0]||"lrgb";if(Re[a]||o.length||(a=Object.keys(Re)[0]),!Re[a])throw new Error(`interpolation mode ${a} is not defined`);return"object"!==r(e)&&(e=new f(e)),"object"!==r(t)&&(t=new f(t)),Re[a](e,t,n).alpha(e.alpha()+n*(t.alpha()-e.alpha()))};f.prototype.mix=f.prototype.interpolate=function(e,t=.5,...n){return Oe(this,e,t,...n)},f.prototype.premultiply=function(e=!1){const t=this._rgb,n=t[3];return e?(this._rgb=[t[0]*n,t[1]*n,t[2]*n,n],this):new f([t[0]*n,t[1]*n,t[2]*n,n],"rgb")},f.prototype.saturate=function(e=1){const t=this.lch();return t[1]+=H*e,t[1]<0&&(t[1]=0),new f(t,"lch").alpha(this.alpha(),!0)},f.prototype.desaturate=function(e=1){return this.saturate(-e)},f.prototype.set=function(e,t,n=!1){const[o,a]=e.split("."),i=this[o]();if(a){const e=o.indexOf(a)-("ok"===o.substr(0,2)?2:0);if(e>-1){if("string"==r(t))switch(t.charAt(0)){case"+":case"-":i[e]+=+t;break;case"*":i[e]*=+t.substr(1);break;case"/":i[e]/=+t.substr(1);break;default:i[e]=+t}else{if("number"!==r(t))throw new Error("unsupported value for Color.set");i[e]=t}const a=new f(i,o);return n?(this._rgb=a._rgb,this):a}throw new Error(`unknown channel ${a} in mode ${o}`)}return i},f.prototype.tint=function(e=.5,...t){return Oe(this,"white",e,...t)},f.prototype.shade=function(e=.5,...t){return Oe(this,"black",e,...t)};Re.rgb=(e,t,n)=>{const r=e._rgb,o=t._rgb;return new f(r[0]+n*(o[0]-r[0]),r[1]+n*(o[1]-r[1]),r[2]+n*(o[2]-r[2]),"rgb")};const{sqrt:$e,pow:_e}=Math;Re.lrgb=(e,t,n)=>{const[r,o,a]=e._rgb,[i,s,l]=t._rgb;return new f($e(_e(r,2)*(1-n)+_e(i,2)*n),$e(_e(o,2)*(1-n)+_e(s,2)*n),$e(_e(a,2)*(1-n)+_e(l,2)*n),"rgb")};Re.lab=(e,t,n)=>{const r=e.lab(),o=t.lab();return new f(r[0]+n*(o[0]-r[0]),r[1]+n*(o[1]-r[1]),r[2]+n*(o[2]-r[2]),"lab")};var Ae=(e,t,n,r)=>{let o,a,i,s,l,c,d,h,p,u,b,g;return"hsl"===r?(o=e.hsl(),a=t.hsl()):"hsv"===r?(o=e.hsv(),a=t.hsv()):"hcg"===r?(o=e.hcg(),a=t.hcg()):"hsi"===r?(o=e.hsi(),a=t.hsi()):"lch"===r||"hcl"===r?(r="hcl",o=e.hcl(),a=t.hcl()):"oklch"===r&&(o=e.oklch().reverse(),a=t.oklch().reverse()),"h"!==r.substr(0,1)&&"oklch"!==r||([i,l,d]=o,[s,c,h]=a),isNaN(i)||isNaN(s)?isNaN(i)?isNaN(s)?u=Number.NaN:(u=s,1!=d&&0!=d||"hsv"==r||(p=c)):(u=i,1!=h&&0!=h||"hsv"==r||(p=l)):(g=s>i&&s-i>180?s-(i+360):s<i&&i-s>180?s+360-i:s-i,u=i+n*g),void 0===p&&(p=l+n*(c-l)),b=d+n*(h-d),new f("oklch"===r?[b,p,u]:[u,p,b],r)};const Te=(e,t,n)=>Ae(e,t,n,"lch");Re.lch=Te,Re.hcl=Te;Re.num=(e,t,n)=>{const r=e.num(),o=t.num();return new f(r+n*(o-r),"num")};Re.hcg=(e,t,n)=>Ae(e,t,n,"hcg");Re.hsi=(e,t,n)=>Ae(e,t,n,"hsi");Re.hsl=(e,t,n)=>Ae(e,t,n,"hsl");Re.hsv=(e,t,n)=>Ae(e,t,n,"hsv");Re.oklab=(e,t,n)=>{const r=e.oklab(),o=t.oklab();return new f(r[0]+n*(o[0]-r[0]),r[1]+n*(o[1]-r[1]),r[2]+n*(o[2]-r[2]),"oklab")};Re.oklch=(e,t,n)=>Ae(e,t,n,"oklch");const{pow:Ye,sqrt:ze,PI:De,cos:We,sin:qe,atan2:He}=Math;const je=(e,n)=>{const r=e.length,o=[0,0,0,0];for(let t=0;t<e.length;t++){const a=e[t],i=n[t]/r,s=a._rgb;o[0]+=Ye(s[0],2)*i,o[1]+=Ye(s[1],2)*i,o[2]+=Ye(s[2],2)*i,o[3]+=s[3]*i}return o[0]=ze(o[0]),o[1]=ze(o[1]),o[2]=ze(o[2]),o[3]>.9999999&&(o[3]=1),new f(t(o))},{pow:Ve}=Math;function Ge(t){let n="rgb",o=b("#ccc"),a=0,i=[0,1],s=[],l=[0,0],c=!1,d=[],h=!1,p=0,u=1,f=!1,g={},m=!0,v=1;const x=function(e){if((e=e||["#fff","#000"])&&"string"===r(e)&&b.brewer&&b.brewer[e.toLowerCase()]&&(e=b.brewer[e.toLowerCase()]),"array"===r(e)){1===e.length&&(e=[e[0],e[0]]),e=e.slice(0);for(let t=0;t<e.length;t++)e[t]=b(e[t]);s.length=0;for(let t=0;t<e.length;t++)s.push(t/(e.length-1))}return C(),d=e};let y=e=>e,w=e=>e;const k=function(t,a){let i,h;if(null==a&&(a=!1),isNaN(t)||null===t)return o;if(a)h=t;else if(c&&c.length>2){h=function(e){if(null!=c){const t=c.length-1;let n=0;for(;n<t&&e>=c[n];)n++;return n-1}return 0}(t)/(c.length-2)}else h=u!==p?(t-p)/(u-p):1;h=w(h),a||(h=y(h)),1!==v&&(h=Ve(h,v)),h=l[0]+h*(1-l[0]-l[1]),h=e(h,0,1);const f=Math.floor(1e4*h);if(m&&g[f])i=g[f];else{if("array"===r(d))for(let e=0;e<s.length;e++){const t=s[e];if(h<=t){i=d[e];break}if(h>=t&&e===s.length-1){i=d[e];break}if(h>t&&h<s[e+1]){h=(h-t)/(s[e+1]-t),i=b.interpolate(d[e],d[e+1],h,n);break}}else"function"===r(d)&&(i=d(h));m&&(g[f]=i)}return i};var C=()=>g={};x(t);const S=function(e){const t=b(k(e));return h&&t[h]?t[h]():t};return S.classes=function(e){if(null!=e){if("array"===r(e))c=e,i=[e[0],e[e.length-1]];else{const t=b.analyze(i);c=0===e?[t.min,t.max]:b.limits(t,"e",e)}return S}return c},S.domain=function(e){if(!arguments.length)return i;p=e[0],u=e[e.length-1],s=[];const t=d.length;if(e.length===t&&p!==u)for(let t of Array.from(e))s.push((t-p)/(u-p));else{for(let e=0;e<t;e++)s.push(e/(t-1));if(e.length>2){const t=e.map((t,n)=>n/(e.length-1)),n=e.map(e=>(e-p)/(u-p));n.every((e,n)=>t[n]===e)||(w=e=>{if(e<=0||e>=1)return e;let r=0;for(;e>=n[r+1];)r++;const o=(e-n[r])/(n[r+1]-n[r]);return t[r]+o*(t[r+1]-t[r])})}}return i=[p,u],S},S.mode=function(e){return arguments.length?(n=e,C(),S):n},S.range=function(e,t){return x(e),S},S.out=function(e){return h=e,S},S.spread=function(e){return arguments.length?(a=e,S):a},S.correctLightness=function(e){return null==e&&(e=!0),f=e,C(),y=f?function(e){const t=k(0,!0).lab()[0],n=k(1,!0).lab()[0],r=t>n;let o=k(e,!0).lab()[0];const a=t+(n-t)*e;let i=o-a,s=0,l=1,c=20;for(;Math.abs(i)>.01&&c-- >0;)(function(){r&&(i*=-1),i<0?(s=e,e+=.5*(l-e)):(l=e,e+=.5*(s-e)),o=k(e,!0).lab()[0],i=o-a})();return e}:e=>e,S},S.padding=function(e){return null!=e?("number"===r(e)&&(e=[e,e]),l=e,S):l},S.colors=function(e,n){arguments.length<2&&(n="hex");let r=[];if(0===arguments.length)r=d.slice(0);else if(1===e)r=[S(.5)];else if(e>1){const t=i[0],n=i[1]-t;r=function(e,t,n){let r=[],o=e<t,a=n?o?t+1:t-1:t;for(let t=e;o?t<a:t>a;o?t++:t--)r.push(t);return r}(0,e,!1).map(r=>S(t+r/(e-1)*n))}else{t=[];let e=[];if(c&&c.length>2)for(let t=1,n=c.length,r=1<=n;r?t<n:t>n;r?t++:t--)e.push(.5*(c[t-1]+c[t]));else e=i;r=e.map(e=>S(e))}return b[n]&&(r=r.map(e=>e[n]())),r},S.cache=function(e){return null!=e?(m=e,S):m},S.gamma=function(e){return null!=e?(v=e,S):v},S.nodata=function(e){return null!=e?(o=b(e),S):o},S}const Xe=(e,t,n)=>{if(!Xe[n])throw new Error("unknown blend mode "+n);return Xe[n](e,t)},Je=e=>(t,n)=>{const r=b(n).rgb(),o=b(t).rgb();return b.rgb(e(r,o))},Ue=e=>(t,n)=>{const r=[];return r[0]=e(t[0],n[0]),r[1]=e(t[1],n[1]),r[2]=e(t[2],n[2]),r};Xe.normal=Je(Ue(e=>e)),Xe.multiply=Je(Ue((e,t)=>e*t/255)),Xe.screen=Je(Ue((e,t)=>255*(1-(1-e/255)*(1-t/255)))),Xe.overlay=Je(Ue((e,t)=>t<128?2*e*t/255:255*(1-2*(1-e/255)*(1-t/255)))),Xe.darken=Je(Ue((e,t)=>e>t?t:e)),Xe.lighten=Je(Ue((e,t)=>e>t?e:t)),Xe.dodge=Je(Ue((e,t)=>255===e||(e=t/255*255/(1-e/255))>255?255:e)),Xe.burn=Je(Ue((e,t)=>255*(1-(1-t/255)/(e/255))));const{pow:Ke,sin:Qe,cos:Ze}=Math;const{floor:et,random:tt}=Math;const{log:nt,pow:rt,floor:ot,abs:at}=Math;function it(e,t=null){const n={min:Number.MAX_VALUE,max:-1*Number.MAX_VALUE,sum:0,values:[],count:0};return"object"===r(e)&&(e=Object.values(e)),e.forEach(e=>{t&&"object"===r(e)&&(e=e[t]),null==e||isNaN(e)||(n.values.push(e),n.sum+=e,e<n.min&&(n.min=e),e>n.max&&(n.max=e),n.count+=1)}),n.domain=[n.min,n.max],n.limits=(e,t)=>st(n,e,t),n}function st(e,t="equal",n=7){"array"==r(e)&&(e=it(e));const{min:o,max:a}=e,i=e.values.sort((e,t)=>e-t);if(1===n)return[o,a];const s=[];if("c"===t.substr(0,1)&&(s.push(o),s.push(a)),"e"===t.substr(0,1)){s.push(o);for(let e=1;e<n;e++)s.push(o+e/n*(a-o));s.push(a)}else if("l"===t.substr(0,1)){if(o<=0)throw new Error("Logarithmic scales are only possible for values > 0");const e=Math.LOG10E*nt(o),t=Math.LOG10E*nt(a);s.push(o);for(let r=1;r<n;r++)s.push(rt(10,e+r/n*(t-e)));s.push(a)}else if("q"===t.substr(0,1)){s.push(o);for(let e=1;e<n;e++){const t=(i.length-1)*e/n,r=ot(t);if(r===t)s.push(i[r]);else{const e=t-r;s.push(i[r]*(1-e)+i[r+1]*e)}}s.push(a)}else if("k"===t.substr(0,1)){let e;const t=i.length,r=new Array(t),l=new Array(n);let c=!0,d=0,h=null;h=[],h.push(o);for(let e=1;e<n;e++)h.push(o+e/n*(a-o));for(h.push(a);c;){for(let e=0;e<n;e++)l[e]=0;for(let e=0;e<t;e++){const t=i[e];let o,a=Number.MAX_VALUE;for(let i=0;i<n;i++){const n=at(h[i]-t);n<a&&(a=n,o=i),l[o]++,r[e]=o}}const o=new Array(n);for(let e=0;e<n;e++)o[e]=null;for(let n=0;n<t;n++)e=r[n],null===o[e]?o[e]=i[n]:o[e]+=i[n];for(let e=0;e<n;e++)o[e]*=1/l[e];c=!1;for(let e=0;e<n;e++)if(o[e]!==h[e]){c=!0;break}h=o,d++,d>200&&(c=!1)}const p={};for(let e=0;e<n;e++)p[e]=[];for(let n=0;n<t;n++)e=r[n],p[e].push(i[n]);let u=[];for(let e=0;e<n;e++)u.push(p[e][0]),u.push(p[e][p[e].length-1]);u=u.sort((e,t)=>e-t),s.push(u[0]);for(let e=1;e<u.length;e+=2){const t=u[e];isNaN(t)||-1!==s.indexOf(t)||s.push(t)}}return s}const{sqrt:lt,pow:ct,min:dt,max:ht,atan2:pt,abs:ut,cos:ft,sin:bt,exp:gt,PI:mt}=Math;var vt={cool:()=>Ge([b.hsl(180,1,.9),b.hsl(250,.7,.4)]),hot:()=>Ge(["#000","#f00","#ff0","#fff"]).mode("rgb")};const xt={OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],Viridis:["#440154","#482777","#3f4a8a","#31678e","#26838f","#1f9d8a","#6cce5a","#b6de2b","#fee825"],Spectral:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],RdYlGn:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],RdBu:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],PiYG:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],PRGn:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],RdYlBu:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],BrBG:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],RdGy:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],Set2:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],Accent:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],Set1:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],Set3:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],Dark2:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],Paired:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],Pastel2:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],Pastel1:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]};for(let e of Object.keys(xt))xt[e.toLowerCase()]=xt[e];Object.assign(b,{average:(e,t="lrgb",n=null)=>{const r=e.length;n||(n=Array.from(new Array(r)).map(()=>1));const o=r/n.reduce(function(e,t){return e+t});if(n.forEach((e,t)=>{n[t]*=o}),e=e.map(e=>new f(e)),"lrgb"===t)return je(e,n);const a=e.shift(),i=a.get(t),s=[];let l=0,c=0;for(let e=0;e<i.length;e++)if(i[e]=(i[e]||0)*n[0],s.push(isNaN(i[e])?0:n[0]),"h"===t.charAt(e)&&!isNaN(i[e])){const t=i[e]/180*De;l+=We(t)*n[0],c+=qe(t)*n[0]}let d=a.alpha()*n[0];e.forEach((e,r)=>{const o=e.get(t);d+=e.alpha()*n[r+1];for(let e=0;e<i.length;e++)if(!isNaN(o[e]))if(s[e]+=n[r+1],"h"===t.charAt(e)){const t=o[e]/180*De;l+=We(t)*n[r+1],c+=qe(t)*n[r+1]}else i[e]+=o[e]*n[r+1]});for(let e=0;e<i.length;e++)if("h"===t.charAt(e)){let t=He(c/s[e],l/s[e])/De*180;for(;t<0;)t+=360;for(;t>=360;)t-=360;i[e]=t}else i[e]=i[e]/s[e];return d/=r,new f(i,t).alpha(d>.99999?1:d,!0)},bezier:e=>{const t=function(e){let t,n,r,o;if(2===(e=e.map(e=>new f(e))).length)[n,r]=e.map(e=>e.lab()),t=function(e){const t=[0,1,2].map(t=>n[t]+e*(r[t]-n[t]));return new f(t,"lab")};else if(3===e.length)[n,r,o]=e.map(e=>e.lab()),t=function(e){const t=[0,1,2].map(t=>(1-e)*(1-e)*n[t]+2*(1-e)*e*r[t]+e*e*o[t]);return new f(t,"lab")};else if(4===e.length){let a;[n,r,o,a]=e.map(e=>e.lab()),t=function(e){const t=[0,1,2].map(t=>(1-e)*(1-e)*(1-e)*n[t]+3*(1-e)*(1-e)*e*r[t]+3*(1-e)*e*e*o[t]+e*e*e*a[t]);return new f(t,"lab")}}else{if(!(e.length>=5))throw new RangeError("No point in running bezier with only one color.");{let n,r,o;n=e.map(e=>e.lab()),o=e.length-1,r=function(e){let t=[1,1];for(let n=1;n<e;n++){let e=[1];for(let n=1;n<=t.length;n++)e[n]=(t[n]||0)+t[n-1];t=e}return t}(o),t=function(e){const t=1-e,a=[0,1,2].map(a=>n.reduce((n,i,s)=>n+r[s]*t**(o-s)*e**s*i[a],0));return new f(a,"lab")}}}return t}(e);return t.scale=()=>Ge(t),t},blend:Xe,cubehelix:function(e=300,n=-1.5,o=1,a=1,i=[0,1]){let s,l=0;"array"===r(i)?s=i[1]-i[0]:(s=0,i=[i,i]);const d=function(r){const d=c*((e+120)/360+n*r),h=Ke(i[0]+s*r,a),p=(0!==l?o[0]+r*l:o)*h*(1-h)/2,u=Ze(d),f=Qe(d);return b(t([255*(h+p*(-.14861*u+1.78277*f)),255*(h+p*(-.29227*u-.90649*f)),255*(h+p*(1.97294*u)),1]))};return d.start=function(t){return null==t?e:(e=t,d)},d.rotations=function(e){return null==e?n:(n=e,d)},d.gamma=function(e){return null==e?a:(a=e,d)},d.hue=function(e){return null==e?o:("array"===r(o=e)?(l=o[1]-o[0],0===l&&(o=o[1])):l=0,d)},d.lightness=function(e){return null==e?i:("array"===r(e)?(i=e,s=e[1]-e[0]):(i=[e,e],s=0),d)},d.scale=()=>b.scale(d),d.hue(o),d},mix:Oe,interpolate:Oe,random:()=>{let e="#";for(let t=0;t<6;t++)e+="0123456789abcdef".charAt(et(16*tt()));return new f(e,"hex")},scale:Ge,analyze:it,contrast:(e,t)=>{e=new f(e),t=new f(t);const n=e.luminance(),r=t.luminance();return n>r?(n+.05)/(r+.05):(r+.05)/(n+.05)},deltaE:function(e,t,n=1,r=1,o=1){var a=function(e){return 360*e/(2*mt)},i=function(e){return 2*mt*e/360};e=new f(e),t=new f(t);const[s,l,c]=Array.from(e.lab()),[d,h,p]=Array.from(t.lab()),u=(s+d)/2,b=(lt(ct(l,2)+ct(c,2))+lt(ct(h,2)+ct(p,2)))/2,g=.5*(1-lt(ct(b,7)/(ct(b,7)+ct(25,7)))),m=l*(1+g),v=h*(1+g),x=lt(ct(m,2)+ct(c,2)),y=lt(ct(v,2)+ct(p,2)),w=(x+y)/2,k=a(pt(c,m)),C=a(pt(p,v)),S=k>=0?k:k+360,F=C>=0?C:C+360,E=ut(S-F)>180?(S+F+360)/2:(S+F)/2,B=1-.17*ft(i(E-30))+.24*ft(i(2*E))+.32*ft(i(3*E+6))-.2*ft(i(4*E-63));let M=F-S;M=ut(M)<=180?M:F<=S?M+360:M-360,M=2*lt(x*y)*bt(i(M)/2);const L=d-s,P=y-x,N=1+.015*ct(u-50,2)/lt(20+ct(u-50,2)),I=1+.045*w,R=1+.015*w*B,O=30*gt(-ct((E-275)/25,2)),$=-(2*lt(ct(w,7)/(ct(w,7)+ct(25,7))))*bt(2*i(O)),_=lt(ct(L/(n*N),2)+ct(P/(r*I),2)+ct(M/(o*R),2)+$*(P/(r*I))*(M/(o*R)));return ht(0,dt(100,_))},distance:function(e,t,n="lab"){e=new f(e),t=new f(t);const r=e.get(n),o=t.get(n);let a=0;for(let e in r){const t=(r[e]||0)-(o[e]||0);a+=t*t}return Math.sqrt(a)},limits:st,valid:(...e)=>{try{return new f(...e),!0}catch(e){return!1}},scales:vt,input:u,colors:ge,brewer:xt});class yt extends HTMLElement{static get observedAttributes(){return["min","max"]}attributeChangedCallback(e,t,n){if(t===n)return;let r=Number(n);if(!isNaN(r)){switch(e){case"min":if(r>=this.state.max)return void this.showErrorMessage("最小值必须小于最大值");this.state.min=r,this.minInput.value=r;break;case"max":if(r<=this.state.min)return void this.showErrorMessage("最大值必须大于最小值");this.state.max=r,this.maxInput.value=r}this.state.step=this.calculateOptimalStep(this.state.min,this.state.max),this.renderColorBarPreview(),this.renderPanelColorbar()}}constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n <style>\n /* 仿Ant Design的消息提示样式 */\n .message-container {\n position: fixed;\n top: 24px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 999999;\n pointer-events: none;\n }\n .message-item {\n padding: 8px 16px;\n margin-bottom: 8px;\n border-radius: 4px;\n background: #fff;\n box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n display: flex;\n align-items: center;\n min-width: 300px;\n max-width: 500px;\n animation: messageFadeIn 0.3s ease-in-out;\n }\n .message-error {\n border-left: 4px solid #ff4d4f;\n }\n .message-success {\n border-left: 4px solid #52c41a;\n }\n .message-success .message-icon {\n color: #52c41a;\n }\n .message-icon {\n margin-right: 8px;\n color: #ff4d4f;\n font-size: 16px;\n }\n .message-content {\n color: #444;\n font-size: 14px;\n line-height: 1.5;\n }\n @keyframes messageFadeIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes messageFadeOut {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(-10px);\n }\n }\n /* 新增:Antd风格ColorPicker样式 */\n .color-picker-modal {\n position: fixed;\n z-index: 99999;\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n padding: 16px;\n width: 280px;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n }\n .color-picker-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n .color-picker-title {\n font-size: 14px;\n color: #1f2937;\n font-weight: 500;\n }\n .color-picker-close {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: #6b7280;\n transition: all 0.2s;\n }\n .color-picker-close:hover {\n background: #f3f4f6;\n color: #1f2937;\n }\n .color-picker-body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n .color-picker-spectrum {\n width: 100%;\n height: 160px;\n position: relative;\n border-radius: 4px;\n overflow: hidden;\n cursor: crosshair;\n }\n .color-picker-spectrum-gradient {\n width: 100%;\n height: 100%;\n background: linear-gradient(to right, #fff, rgba(255,255,255,0)),\n linear-gradient(to top, #000, rgba(0,0,0,0));\n position: absolute;\n top: 0;\n left: 0;\n }\n .color-picker-spectrum-handle {\n position: absolute;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #fff;\n box-shadow: 0 0 0 1px rgba(0,0,0,0.2);\n transform: translate(-8px, -8px);\n z-index: 10;\n }\n .color-picker-hue {\n width: 100%;\n height: 12px;\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n cursor: pointer;\n background: linear-gradient(to right, \n #f00 0%, #ff0 17%, #0f0 33%, \n #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n }\n .color-picker-hue-handle {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 4px;\n background: #fff;\n box-shadow: 0 0 0 1px rgba(0,0,0,0.2);\n transform: translateX(-2px);\n z-index: 10;\n }\n .color-picker-input {\n display: flex;\n gap: 8px;\n align-items: center;\n }\n .color-picker-input input {\n flex: 1;\n padding: 6px 8px;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n font-size: 13px;\n color: #1f2937;\n outline: none;\n transition: border-color 0.2s;\n }\n .color-picker-input input:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n }\n .color-picker-preview {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n border: 1px solid #d1d5db;\n }\n .color-picker-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n }\n .color-picker-btn {\n padding: 6px 12px;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n }\n .color-picker-btn-cancel {\n border: 1px solid #d1d5db;\n background: #fff;\n color: #374151;\n }\n .color-picker-btn-cancel:hover {\n background: #f9fafb;\n border-color: #b3b9c6;\n }\n .color-picker-btn-confirm {\n border: 1px solid #3b82f6;\n background: #3b82f6;\n color: #fff;\n }\n .color-picker-btn-confirm:hover {\n background: #2563eb;\n border-color: #2563eb;\n }\n </style>\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n overflow: visible !important;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;\n }\n :host { \n display: block; \n position: fixed; \n top: 0;\n right: 0;\n bottom: 0;\n left: auto;\n width: 150px; /* 适度加宽主面板 */\n height: 100vh !important; \n margin: 0; \n padding: 0; \n overflow: hidden !important; \n box-sizing: border-box;\n z-index: 999; \n }\n .main-container { \n position: absolute; \n top: 0; \n right: 0; \n height: 100vh; \n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow: hidden;\n padding: 0px 0; /* 适度增加内边距 */\n }\n .text-sm { \n font-size: 12px; /* 调整为适中大小 */\n color: #444; \n line-height: 1.4; /* 适度增加行高 */\n }\n .btn { \n padding: 6px 12px; /* 适度增加按钮内边距 */\n border: 1px solid #ddd; \n border-radius: 6px; \n cursor: pointer; \n background: #f8f9fa; \n font-size: 12px; /* 调整为适中大小 */\n color: #333;\n transition: all 0.2s ease;\n font-weight: 500;\n }\n .btn:hover { \n background: #e9ecef; \n border-color: #ccc;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n .btn:active {\n background: #dee2e6;\n box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);\n }\n .input-sm { \n width: 55px; /* 适度加宽 */\n padding: 6px 8px; /* 适度增加内边距 */\n border: 1px solid #ddd; \n border-radius: 6px; \n font-size: 12px; /* 调整为适中大小 */\n color: #333;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n .input-md { \n width: 75px; /* 适度加宽 */\n padding: 6px 8px; /* 适度增加内边距 */\n border: 1px solid #ddd; \n border-radius: 6px; \n font-size: 12px; /* 调整为适中大小 */\n color: #333;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n .input-sm:focus, .input-md:focus {\n outline: none;\n border-color: #4d90fe;\n box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.1);\n }\n .select-sm { \n padding: 6px 8px; /* 适度增加内边距 */\n border: 1px solid #ddd; \n border-radius: 6px; \n font-size: 12px; /* 调整为适中大小 */\n color: #333;\n transition: border-color 0.2s ease;\n }\n .select-sm:focus {\n outline: none;\n border-color: #4d90fe;\n }\n .checkbox { \n vertical-align: middle; \n margin: 0 5px; /* 适度增加间距 */\n width: 15px; /* 适度加大 */\n height: 15px; /* 适度加大 */\n border-radius: 4px;\n cursor: pointer;\n }\n .radio { \n vertical-align: middle; \n margin: 0 5px; /* 适度增加间距 */\n width: 15px; /* 适度加大 */\n height: 15px; /* 适度加大 */\n cursor: pointer;\n }\n .color-picker { \n width: 38px; /* 适度加宽 */\n height: 28px; /* 适度加高 */\n padding: 0; \n border: 1px solid #ddd; \n cursor: pointer; \n border-radius: 6px;\n }\n\n /* 色条预览区 - 核心调整 */\n .preview-container { \n display: flex; \n align-items: flex-start; \n height: 100%; \n box-sizing: border-box; \n overflow: hidden;\n padding: 0 10px; /* 适度增加内边距 */\n }\n .color-bar { \n width: 65px; /* 适度加宽 */\n height: 100%; \n border: 1px solid #ddd; \n border-radius: 8px;\n box-sizing: border-box; \n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n .value-labels { \n margin-left: 10px; /* 适度增加间距 */\n height: calc(100% - 20px); \n position: relative; \n width: 65px; /* 适度加宽标签容器 */\n }\n .label-item { \n position: absolute; \n font-size: 12px; /* 调整为适中大小 */\n color: #333; \n white-space: nowrap; \n transform: translateY(-50%);\n left: 0;\n right: 0;\n text-align: left;\n max-height: 22px;\n overflow: visible !important;\n line-height: 1.4; /* 适度增加行高 */\n font-weight: 500;\n }\n\n /* 设置面板 */\n .setting-panel {\n display: none;\n position: fixed; \n top: 20px;\n right: 160px; /* 适配主面板宽度调整 */\n background: white;\n border: 1px solid #ddd;\n border-radius: 12px;\n width: 540px; /* 适度加宽面板 */\n box-shadow: 0 4px 20px rgba(0,0,0,0.15);\n z-index: 10000; \n overflow: hidden;\n }\n .setting-panel.active { display: block; }\n\n .panel-header {\n padding: 10px 15px; /* 适度增加内边距 */\n background: #f8f9fa;\n border-bottom: 1px solid #eee;\n cursor: move;\n user-select: none;\n font-size: 14px; /* 调整为适中大小 */\n font-weight: 600;\n color: #333;\n border-radius: 12px 12px 0 0;\n }\n .panel-header:hover {\n background: #e9ecef;\n }\n\n .panel-content { display: flex; }\n\n .left-settings {\n flex: 1;\n padding: 15px; /* 适度增加内边距 */\n border-right: 1px solid #eee;\n }\n\n .right-colorbar {\n width: 215px; /* 适度加宽 */\n padding: 15px; /* 适度增加内边距 */\n }\n\n .section-title {\n font-size: 13px; /* 调整为适中大小 */\n font-weight: 600;\n margin: 15px 0 8px; /* 适度增加间距 */\n color: #222;\n padding-bottom: 4px; /* 适度增加下划线间距 */\n border-bottom: 1px solid #eee;\n }\n .section-title:first-child { \n margin-top: 0; \n margin-bottom: 12px;\n }\n\n .display-options { margin-bottom: 15px; font-size: 14px; }\n .display-option { margin: 8px 0; /* 适度增加间距 */ display: flex; align-items: center; gap: 8px; /* 适度增加间隙 */ }\n .display-option input[type="radio"] { margin-left: 0; }\n\n .range-settings { margin: 15px 0; font-size: 14px; }\n .range-row { margin: 8px 0; /* 适度增加间距 */ display: flex; align-items: center; gap: 8px; /* 适度增加间隙 */ }\n .range-row label { text-align: right; font-weight: 500; color: #444; font-size: 14px; /* 调整为适中大小 */ }\n /* 新增:个数/增量选项样式 */\n .range-mode-option { margin: 8px 0; /* 适度增加间距 */ display: flex; align-items: center; gap: 8px; /* 适度增加间隙 */ }\n .range-mode-option input[type="radio"] { margin-left: 0; }\n .input-disabled { \n background-color: #f8f9fa; \n cursor: not-allowed; \n border-color: #ddd; \n color: #888;\n }\n\n .label-settings { margin-bottom: 15px; font-size: 14px; }\n .label-option { margin: 8px 0; /* 适度增加间距 */ display: flex; align-items: center; gap: 8px; /* 适度增加间隙 */ }\n .precision-control { display: inline-flex; align-items: center; gap: 6px; /* 适度增加间隙 */ }\n\n .color-library { margin-bottom: 15px; font-size: 14px; }\n /* 自定义选择器样式 - 仅显示色条 */\n .custom-select-display {\n width: 100%;\n height: 32px; /* 适度加高 */\n border: 1px solid #ddd; \n border-radius: 8px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n background: white;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n .custom-select-display:hover {\n border-color: #ccc;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n /* 选中色条预览 - 占满整个显示容器 */\n .selected-color-bar {\n width: 100%;\n height: 100%;\n }\n /* 下拉箭头样式 */\n .select-arrow {\n position: absolute;\n right: 12px; /* 适度调整位置 */\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 6px solid transparent; /* 适度加大箭头 */\n border-right: 6px solid transparent; /* 适度加大箭头 */\n border-top: 6px solid #666; /* 适度加大箭头 */\n pointer-events: none;\n }\n /* 隐藏原生select */\n #colorLibrary {\n display: none !important;\n }\n /* 色库下拉框核心样式 */\n #libraryOptions {\n width: 100% !important;\n min-width: 250px; /* 适度加宽 */\n box-sizing: border-box;\n border-radius: 0 0 8px 8px;\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n }\n .library-option {\n display: flex;\n align-items: center;\n padding: 8px 12px; /* 适度增加内边距 */\n gap: 10px; /* 适度增加间隙 */\n width: 100%;\n box-sizing: border-box;\n transition: background-color 0.2s ease;\n border-bottom: 1px solid #f0f0f0;\n }\n .library-option:last-child {\n border-bottom: none;\n }\n .option-color-bar {\n width: 190px; /* 适度加宽 */\n height: 22px; /* 适度加高 */\n border: 1px solid #ddd; \n border-radius: 4px;\n flex-shrink: 0;\n }\n .option-text {\n font-size: 12px; /* 保持原有大小 */\n color: #333;\n flex: 1;\n font-weight: 500;\n /* 新增省略显示样式 - 关键修改:增加 !important 强制生效 */\n white-space: nowrap !important; /* 强制不换行 */\n overflow: hidden !important; /* 隐藏超出内容 */\n text-overflow: ellipsis !important; /* 超出部分显示... */\n max-width: 80px !important; /* 限制最大宽度,可根据需要调整 */\n /* 悬浮提示相关 */\n position: relative;\n }\n\n .library-actions { display: flex; gap: 8px; /* 适度增加间隙 */ margin: 10px 0; }\n\n .bottom-buttons {\n display: flex;\n justify-content: space-between;\n padding: 10px 15px; /* 适度增加内边距 */\n border-top: 1px solid #eee;\n background: #f8f9fa;\n border-radius: 0 0 12px 12px;\n }\n .left-buttons { display: flex; gap: 8px; /* 适度增加间隙 */ }\n .right-buttons { display: flex; gap: 8px; /* 适度增加间隙 */ }\n\n /* 面板内色条样式 */\n .colorbar-preview {\n width: 85px; /* 适度加宽 */\n height: 490px; \n margin: 0 auto;\n }\n .colorbar-labels {\n margin-left: 10px; /* 适度增加间距 */\n height: 490px; \n position: relative; \n width: 65px; /* 适度加宽 */\n }\n .colorbar-label {\n position: absolute;\n font-size: 12px; /* 调整为适中大小 */\n color: #333;\n transform: translateY(-50%);\n white-space: nowrap; \n line-height: 1.4; /* 适度增加行高 */\n font-weight: 500;\n }\n /* 隐藏数字左侧正方形 */\n .color-marker {\n display: none; \n width: 16px; \n height: 16px; \n border: 1px solid #666;\n left: -24px; \n transform: translateY(-50%);\n box-sizing: border-box;\n border-radius: 0;\n cursor: ns-resize;\n z-index: 10;\n }\n .color-marker.dragging {\n border-width: 2px;\n border-color: #0066cc;\n box-shadow: 0 0 5px rgba(0, 102, 204, 0.8);\n }\n .colorbar-container { \n display: flex; \n justify-content: flex-start; \n margin: 10px 0 10px 12px; /* 适度调整间距 */\n }\n\n /* 移除了colorbar-actions相关样式 */\n </style>\n\n <div class="main-container">\n <div class="preview-container" id="colorBarPreview">\n <canvas class="color-bar" id="previewCanvas"></canvas>\n <div class="value-labels" id="valueLabels"></div>\n </div>\n\n <div class="setting-panel" id="settingPanel">\n <div class="panel-header" id="panelHandle">色标设置</div>\n <div class="panel-content">\n <div class="left-settings">\n <div class="section-title">色块</div>\n <div class="display-options">\n <div class="display-option">\n <input type="radio" id="continuous" name="displayMode" class="radio" checked>\n <label for="continuous">连续显示</label>\n </div>\n <div class="display-option">\n <input type="radio" id="discrete" name="displayMode" class="radio">\n <label for="discrete">离散显示</label>\n <span class="text-sm">数量由范围设置决定</span>\n </div>\n </div>\n\n <div class="section-title">范围</div>\n <div class="range-settings">\n <div class="range-row">\n <label>最小值:</label>\n <input type="number" id="minVal" value="0" class="input-md">\n </div>\n <div class="range-row">\n <label>最大值:</label>\n <input type="number" id="maxVal" value="60000" class="input-md">\n <input type="button" value="设置" class="btn" id="setRange">\n </div>\n <div class="range-mode-option">\n <input type="radio" id="countMode" name="rangeMode" class="radio" checked>\n <label for="countMode">个数:</label>\n <input type="number" id="rangeCount" value="16" class="input-md" min="2">\n </div>\n <div class="range-mode-option">\n <input type="radio" id="stepMode" name="rangeMode" class="radio">\n <label for="stepMode">增量:</label>\n <input type="number" id="rangeStep" value="3750" class="input-md" min="1" disabled>\n </div>\n </div>\n\n <div class="section-title">标注</div>\n <div class="label-settings">\n <div class="label-option">\n <input type="radio" id="integer" name="labelType" class="radio" checked>\n <label for="integer">整数</label>\n </div>\n <div class="label-option">\n <input type="radio" id="float" name="labelType" class="radio">\n <label for="float">浮点数</label>\n <div class="precision-control">\n <label>精度</label>\n <input type="number" id="precision" class="input-sm" value="1" min="1" max="10">\n </div>\n <label>\n <input type="checkbox" class="checkbox" id="scientific"> 科学计数\n </label>\n </div>\n </div>\n\n <div class="section-title">色库</div>\n <div class="color-library">\n <div id="librarySelectContainer" style="position: relative; width: 100%;">\n <div class="custom-select-display" id="customSelectDisplay">\n <div class="selected-color-bar" id="selectedColorBar"></div>\n <div class="select-arrow"></div>\n </div>\n <select id="colorLibrary">\n <option value="default">Default</option>\n <option value="BlkWhiClt">BlkWhiClt</option>\n <option value="BlkWhiYlw">BlkWhiYlw</option>\n <option value="BluWhiClt">BluWhiClt</option>\n </select>\n <div id="libraryOptions" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 3px 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 10001; display: none;">\n <div class="library-option" data-value="default">\n <div class="option-color-bar" id="defaultColorBar"></div>\n <span class="option-text" title="Default">Default</span>\n </div>\n <div class="library-option" data-value="BlkWhiClt">\n <div class="option-color-bar" id="BlkWhiCltColorBar"></div>\n <span class="option-text" title="BlkWhiClt">BlkWhiClt</span>\n </div>\n <div class="library-option" data-value="BlkWhiYlw">\n <div class="option-color-bar" id="BlkWhiYlwColorBar"></div>\n <span class="option-text" title="BlkWhiYlw">BlkWhiYlw</span>\n </div>\n <div class="library-option" data-value="BluWhiClt">\n <div class="option-color-bar" id="BluWhiCltColorBar"></div>\n <span class="option-text" title="BluWhiClt">BluWhiClt</span>\n </div>\n </div>\n </div>\n <div class="library-actions">\n <input type="button" value="导入" class="btn" id="importLib">\n <input type="button" value="保存" class="btn" id="saveLib">\n </div>\n \x3c!-- 移除了添加到色库的复选框 --\x3e\n </div>\n </div>\n\n <div class="right-colorbar">\n <div class="colorbar-container">\n <div class="colorbar-labels" id="colorbarLabels"></div>\n <canvas class="colorbar-preview" id="panelColorbar"></canvas>\n </div>\n \n \x3c!-- 移除了colorbar-actions按钮组 --\x3e\n \n </div>\n </div>\n\n <div class="bottom-buttons">\n <div class="left-buttons">\n <input type="button" value="缺省" class="btn" id="resetDefault">\n </div>\n <div class="right-buttons">\n <input type="button" value="确定" class="btn" id="confirm">\n <input type="button" value="取消" class="btn" id="cancel">\n <input type="button" value="应用" class="btn" id="apply">\n </div>\n </div>\n </div>\n </div>\n \x3c!-- 消息提示容器 --\x3e\n <div class="message-container" id="messageContainer"></div>\n ',this.colorBarPreview=e.getElementById("colorBarPreview"),this.previewCanvas=e.getElementById("previewCanvas"),this.valueLabels=e.getElementById("valueLabels"),this.settingPanel=e.getElementById("settingPanel"),this.panelHandle=e.getElementById("panelHandle"),this.minInput=e.getElementById("minVal"),this.maxInput=e.getElementById("maxVal"),this.setRangeBtn=e.getElementById("setRange"),this.displayModeRadios=e.querySelectorAll('input[name="displayMode"]'),this.labelTypeRadios=e.querySelectorAll('input[name="labelType"]'),this.precisionInput=e.getElementById("precision"),this.scientificCheckbox=e.getElementById("scientific"),this.colorLibrarySelect=e.getElementById("colorLibrary"),this.colorbarLabels=e.getElementById("colorbarLabels"),this.panelColorbar=e.getElementById("panelColorbar"),this.resetBtn=e.getElementById("resetDefault"),this.confirmBtn=e.getElementById("confirm"),this.cancelBtn=e.getElementById("cancel"),this.applyBtn=e.getElementById("apply"),this.rangeModeRadios=e.querySelectorAll('input[name="rangeMode"]'),this.rangeCountInput=e.getElementById("rangeCount"),this.rangeStepInput=e.getElementById("rangeStep"),this.librarySelectContainer=e.getElementById("librarySelectContainer"),this.libraryOptions=e.getElementById("libraryOptions"),this.libraryOptionItems=e.querySelectorAll(".library-option"),this.customSelectDisplay=e.getElementById("customSelectDisplay"),this.selectedColorBar=e.getElementById("selectedColorBar"),this.defaultColorBar=e.getElementById("defaultColorBar"),this.BlkWhiCltColorBar=e.getElementById("BlkWhiCltColorBar"),this.BlkWhiYlwColorBar=e.getElementById("BlkWhiYlwColorBar"),this.BluWhiCltColorBar=e.getElementById("BluWhiCltColorBar"),this.messageContainer=e.getElementById("messageContainer");const t=this.hasAttribute("min")?Number(this.getAttribute("min")):0,n=this.hasAttribute("max")?Number(this.getAttribute("max")):6e4;this.initialMin=isNaN(t)||t<0?0:t,this.initialMax=isNaN(n)||n<=this.initialMin?6e4:n;const r=(n-t)/16;this.state={min:this.initialMin,max:this.initialMax,start:0,step:4e3,displayMode:"continuous",labelType:"integer",precision:1,scientific:!1,colorLibrary:"default",rangeMode:"count",rangeCount:16,rangeStep:r,originalStopRatios:[0,.2,.4,.6,.8,1],stops:[{value:t+0*(n-t),color:"#0000FF"},{value:t+.2*(n-t),color:"#0080FF"},{value:t+.4*(n-t),color:"#00FFFF"},{value:t+.6*(n-t),color:"#00FF00"},{value:t+.8*(n-t),color:"#FFFF00"},{value:t+1*(n-t),color:"#FF0000"}],panelVisible:!1,originalState:null,panelPosition:{top:20,right:160}},this.dragState={isDragging:!1,draggingStopIndex:-1,dragStartY:0,dragStartValue:0,canvasRect:null},this.colorPickerState={isOpen:!1,targetStop:null,hue:0,saturation:1,lightness:.5,pickerElement:null,isDraggingHue:!1,isDraggingSpectrum:!1},this.initLibraryColorBars(),this.renderSelectedColorBar("default"),this.loadCustomLibsFromStorage(),this.bindEvents(),this.saveOriginalState(),this.rangeStepInput.value=this.state.rangeStep,this.renderColorBarPreview(),this.renderPanelColorbar()}showErrorMessage(e){const t=document.createElement("div");t.className="message-item message-error",t.innerHTML=`\n <span class="message-icon">❌</span>\n <span class="message-content">${e}</span>\n `,this.messageContainer.appendChild(t),setTimeout(()=>{t.style.animation="messageFadeOut 0.3s ease-in-out",setTimeout(()=>{this.messageContainer.removeChild(t)},300)},3e3)}showSuccessMessage(e){const t=document.createElement("div");t.className="message-item message-success",t.innerHTML=`\n <span class="message-icon">✓</span>\n <span class="message-content">${e}</span>\n `,this.messageContainer.appendChild(t),setTimeout(()=>{t.style.animation="messageFadeOut 0.3s ease-in-out",setTimeout(()=>{this.messageContainer.removeChild(t)},300)},3e3)}renderSelectedColorBar(e){const t=document.createElement("canvas");t.width=320,t.height=32,t.style.width="100%",t.style.height="100%",this.selectedColorBar.innerHTML="",this.selectedColorBar.appendChild(t);const n=t.getContext("2d"),r=n.createLinearGradient(0,0,t.width,0);if(this.customColorLibs&&this.customColorLibs[e]){const t=this.customColorLibs[e];t.ratios.forEach((e,n)=>{r.addColorStop(e,t.stops[n].color)})}else switch(e){case"default":r.addColorStop(0,"#0000FF"),r.addColorStop(.2,"#0080FF"),r.addColorStop(.4,"#00FFFF"),r.addColorStop(.6,"#00FF00"),r.addColorStop(.8,"#FFFF00"),r.addColorStop(1,"#FF0000");break;case"BlkWhiClt":r.addColorStop(0,"#000000"),r.addColorStop(.25,"#666666"),r.addColorStop(.5,"#999999"),r.addColorStop(.75,"#CCCCCC"),r.addColorStop(1,"#FFFFFF");break;case"BlkWhiYlw":r.addColorStop(0,"#000000"),r.addColorStop(.33,"#888800"),r.addColorStop(.66,"#FFFF00"),r.addColorStop(1,"#FFFFFF");break;case"BluWhiClt":r.addColorStop(0,"#00008B"),r.addColorStop(.25,"#1E90FF"),r.addColorStop(.5,"#87CEFA"),r.addColorStop(.75,"#E0FFFF"),r.addColorStop(1,"#FFFFFF")}n.fillStyle=r,n.fillRect(0,0,t.width,t.height),n.strokeStyle="#ccc",n.lineWidth=1,n.strokeRect(0,0,t.width,t.height)}initLibraryColorBars(){this.renderLibraryColorBar(this.defaultColorBar,[{color:"#0000FF",pos:0},{color:"#0080FF",pos:.2},{color:"#00FFFF",pos:.4},{color:"#00FF00",pos:.6},{color:"#FFFF00",pos:.8},{color:"#FF0000",pos:1}]),this.renderLibraryColorBar(this.BlkWhiCltColorBar,[{color:"#000000",pos:0},{color:"#666666",pos:.25},{color:"#999999",pos:.5},{color:"#CCCCCC",pos:.75},{color:"#FFFFFF",pos:1}]),this.renderLibraryColorBar(this.BlkWhiYlwColorBar,[{color:"#000000",pos:0},{color:"#888800",pos:.33},{color:"#FFFF00",pos:.66},{color:"#FFFFFF",pos:1}]),this.renderLibraryColorBar(this.BluWhiCltColorBar,[{color:"#00008B",pos:0},{color:"#1E90FF",pos:.25},{color:"#87CEFA",pos:.5},{color:"#E0FFFF",pos:.75},{color:"#FFFFFF",pos:1}])}renderLibraryColorBar(e,t){const n=document.createElement("canvas");n.width=190,n.height=22,n.style.width="100%",n.style.height="100%",e.innerHTML="",e.appendChild(n);const r=n.getContext("2d"),o=r.createLinearGradient(0,0,n.width,0);t.forEach(e=>{o.addColorStop(e.pos,e.color)}),r.fillStyle=o,r.fillRect(0,0,n.width,n.height),r.strokeStyle="#ccc",r.lineWidth=1,r.strokeRect(0,0,n.width,n.height)}calculateDefaultStep(e,t,n){return Math.max(1,(t-e)/Math.max(2,n))}generateRandomColor(){let e="#";for(let t=0;t<6;t++)e+="0123456789ABCDEF"[Math.floor(16*Math.random())];return e}calculateStepByRangeMode(e,t){const{rangeMode:n,rangeCount:r,rangeStep:o}=this.state;return"count"===n?(t-e)/(Math.max(2,r)-1):Math.max(1,o)}calculateDiscreteBlockCount(e,t){const{rangeMode:n,rangeCount:r,rangeStep:o}=this.state;return"count"===n?Math.max(2,r):Math.max(2,Math.ceil((t-e)/Math.max(1,o)))}calculateOptimalStep(e,t){if(this.state.rangeMode)return this.calculateStepByRangeMode(e,t);const n=t-e;let r=Math.pow(10,Math.floor(Math.log10(n/16)));const o=[r,2*r,5*r,10*r];let a=r;for(const e of o)if(n/e<=18){a=e;break}return a}openColorPicker(e,t){this.colorPickerState.isOpen&&this.closeColorPicker();const n=document.createElement("div");n.className="color-picker-modal";const r=window.innerWidth,o=window.innerHeight;let a=e+10,i=t+10;a+280>r&&(a=e-280-10,a=Math.max(10,a)),i+320>o&&(i=t-320-10,i=Math.max(10,i)),a=Math.min(a,r-280-10),i=Math.min(i,o-320-10),n.style.left=`${a}px`,n.style.top=`${i}px`;const s=b.hsl(this.colorPickerState.hue,this.colorPickerState.saturation,this.colorPickerState.lightness).hex();n.innerHTML=`\n <div class="color-picker-header">\n <div class="color-picker-title">选择颜色</div>\n <div class="color-picker-close" id="cp-close">✕</div>\n </div>\n <div class="color-picker-body">\n <div class="color-picker-spectrum" id="cp-spectrum">\n <div class="color-picker-spectrum-gradient"></div>\n <div class="color-picker-spectrum-handle" id="cp-spectrum-handle" \n style="left: ${100*this.colorPickerState.saturation}%; top: ${100*(1-this.colorPickerState.lightness)}%; background: ${s}"></div>\n </div>\n <div class="color-picker-hue" id="cp-hue">\n <div class="color-picker-hue-handle" id="cp-hue-handle" \n style="left: ${this.colorPickerState.hue/360*100}%"></div>\n </div>\n <div class="color-picker-input">\n <input type="text" id="cp-input" value="${s}" maxlength="7">\n <div class="color-picker-preview" id="cp-preview" style="background: ${s}"></div>\n </div>\n </div>\n <div class="color-picker-footer">\n <button class="color-picker-btn color-picker-btn-cancel" id="cp-cancel">取消</button>\n <button class="color-picker-btn color-picker-btn-confirm" id="cp-confirm">确认</button>\n </div>\n `,this.shadowRoot.appendChild(n),this.colorPickerState.pickerElement=n,this.colorPickerState.isOpen=!0;const l=n.querySelector("#cp-spectrum"),c=n.querySelector("#cp-spectrum-handle"),d=n.querySelector("#cp-hue"),h=n.querySelector("#cp-hue-handle"),p=n.querySelector("#cp-input"),u=n.querySelector("#cp-preview"),f=n.querySelector("#cp-close"),g=n.querySelector("#cp-cancel"),m=n.querySelector("#cp-confirm"),v=this,x=()=>{const e=b.hsl(v.colorPickerState.hue,1,.5).hex();l.style.background=e};x();const y=()=>{const e=b.hsl(v.colorPickerState.hue,v.colorPickerState.saturation,v.colorPickerState.lightness).hex();p.value=e,u.style.background=e,c.style.background=e};l.addEventListener("mousedown",e=>{v.colorPickerState.isDraggingSpectrum=!0;const t=l.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top;v.colorPickerState.saturation=Math.max(0,Math.min(1,n/t.width)),v.colorPickerState.lightness=Math.max(0,Math.min(1,1-r/t.height)),c.style.left=100*v.colorPickerState.saturation+"%",c.style.top=100*(1-v.colorPickerState.lightness)+"%",y()}),d.addEventListener("mousedown",e=>{v.colorPickerState.isDraggingHue=!0;const t=d.getBoundingClientRect(),n=e.clientX-t.left;v.colorPickerState.hue=Math.max(0,Math.min(360,n/t.width*360)),h.style.left=n/t.width*100+"%",x(),y()}),document.addEventListener("mousemove",e=>{if(v.colorPickerState.isDraggingSpectrum){const t=l.getBoundingClientRect(),n=Math.max(0,Math.min(t.width,e.clientX-t.left)),r=Math.max(0,Math.min(t.height,e.clientY-t.top));v.colorPickerState.saturation=n/t.width,v.colorPickerState.lightness=1-r/t.height,c.style.left=100*v.colorPickerState.saturation+"%",c.style.top=100*(1-v.colorPickerState.lightness)+"%",y()}if(v.colorPickerState.isDraggingHue){const t=d.getBoundingClientRect(),n=Math.max(0,Math.min(t.width,e.clientX-t.left));v.colorPickerState.hue=n/t.width*360,h.style.left=n/t.width*100+"%",x(),y()}}),document.addEventListener("mouseup",()=>{v.colorPickerState.isDraggingSpectrum=!1,v.colorPickerState.isDraggingHue=!1}),p.addEventListener("input",e=>{const t=e.target.value.trim();if(/^#([0-9A-Fa-f]{6})$/.test(t))try{const e=b(t).hsl();v.colorPickerState.hue=e[0],v.colorPickerState.saturation=e[1],v.colorPickerState.lightness=e[2],c.style.left=100*v.colorPickerState.saturation+"%",c.style.top=100*(1-v.colorPickerState.lightness)+"%",h.style.left=v.colorPickerState.hue/360*100+"%",x(),u.style.background=t}catch(e){v.showErrorMessage("无效的颜色值")}}),f.addEventListener("click",()=>{v.closeColorPicker()}),g.addEventListener("click",()=>{v.closeColorPicker()}),m.addEventListener("click",()=>{const e=p.value.trim();/^#([0-9A-Fa-f]{6})$/.test(e)?(v.colorPickerState.targetStop.color=e,v.renderPanelColorbar(),v.renderColorBarPreview(),v.closeColorPicker()):v.showErrorMessage("请输入有效的HEX颜色值(如#FF0000)")}),this.clickOutsideHandler=w;const w=function(e){v.colorPickerState.pickerElement&&!v.colorPickerState.pickerElement.contains(e.target)&&(v.closeColorPicker(),document.removeEventListener("click",w))};document.addEventListener("click",w)}closeColorPicker(){document.removeEventListener("click",this.clickOutsideHandler),this.colorPickerState.pickerElement&&this.shadowRoot.removeChild(this.colorPickerState.pickerElement),this.colorPickerState={...this.colorPickerState,isOpen:!1,pickerElement:null,isDraggingHue:!1,isDraggingSpectrum:!1}}bindEvents(){this.importLibBtn=this.shadowRoot.getElementById("importLib"),this.saveLibBtn=this.shadowRoot.getElementById("saveLib"),this.saveLibBtn.addEventListener("click",()=>{this.exportColorScaleToTxt()}),this.importLibBtn.addEventListener("click",()=>{const e=document.createElement("input");e.type="file",e.accept=".txt",e.addEventListener("change",e=>{const t=e.target.files[0];t&&this.importColorScaleFromTxt(t)}),e.click()});const e=this;this.colorBarPreview.addEventListener("dblclick",e=>{e.stopPropagation(),this.state.panelVisible=!0,this.saveOriginalState(),this.settingPanel.classList.add("active"),this.updatePanelPosition()});let t,n,r,o,a=!1;this.panelHandle.addEventListener("mousedown",e=>{a=!0,t=e.clientX,n=e.clientY,r=this.state.panelPosition.top,o=this.state.panelPosition.right,this.panelHandle.style.background="#e0e0e0",document.body.style.cursor="move"}),document.addEventListener("mousemove",e=>{if(!a)return;const i=e.clientX-t,s=e.clientY-n;this.state.panelPosition={top:r+s,right:o-i},this.updatePanelPosition()}),document.addEventListener("mouseup",()=>{a&&(a=!1,this.panelHandle.style.background="#f0f0f0",document.body.style.cursor="")}),this.setRangeBtn.addEventListener("click",()=>{const e=Number(this.minInput.value),t=Number(this.maxInput.value);if(isNaN(e)||isNaN(t)||e>=t)this.showErrorMessage("请输入有效范围(最小值 < 最大值)");else{if("count"===this.state.rangeMode){const n=Number(this.rangeCountInput.value);if(isNaN(n)||n<2)return this.showErrorMessage("个数必须是大于等于2的数字"),void(this.rangeCountInput.value=this.state.rangeCount);this.state.rangeCount=n;const r=this.calculateDefaultStep(e,t,n);this.state.rangeStep=r,this.rangeStepInput.value=r}else{const e=Number(this.rangeStepInput.value);if(isNaN(e)||e<1)return this.showErrorMessage("增量必须是大于等于1的数字"),void(this.rangeStepInput.value=this.state.rangeStep);this.state.rangeStep=e}this.state.min=e,this.state.max=t,this.state.step=this.calculateOptimalStep(e,t),this.state.stops=this.state.originalStopRatios.map((n,r)=>({value:e+(t-e)*n,color:this.state.stops[r]?.color||this.state.stops[0].color})),this.renderColorBarPreview(),this.renderPanelColorbar()}}),this.rangeModeRadios.forEach(e=>{e.addEventListener("change",e=>{const t="countMode"===e.target.id?"count":"step";this.state.rangeMode=t,"count"===t?(this.rangeCountInput.disabled=!1,this.rangeCountInput.classList.remove("input-disabled"),this.rangeStepInput.disabled=!0,this.rangeStepInput.classList.add("input-disabled")):(this.rangeCountInput.disabled=!0,this.rangeCountInput.classList.add("input-disabled"),this.rangeStepInput.disabled=!1,this.rangeStepInput.classList.remove("input-disabled")),this.state.min<this.state.max&&(this.state.step=this.calculateStepByRangeMode(this.state.min,this.state.max),this.renderColorBarPreview(),this.renderPanelColorbar())})}),this.rangeCountInput.addEventListener("change",e=>{const t=Number(e.target.value);if(!isNaN(t)&&t>=2){if(this.state.rangeCount=t,this.state.min<this.state.max){const e=this.calculateDefaultStep(this.state.min,this.state.max,t);this.state.rangeStep=e,this.rangeStepInput.value=e}}else this.showErrorMessage("个数必须是大于等于2的数字"),e.target.value=this.state.rangeCount;this.state.min<this.state.max&&(this.renderColorBarPreview(),this.renderPanelColorbar())}),this.rangeStepInput.addEventListener("change",e=>{const t=Number(e.target.value);!isNaN(t)&&t>=1?this.state.rangeStep=t:(this.showErrorMessage("增量必须是大于等于1的数字"),e.target.value=this.state.rangeStep),this.state.min<this.state.max&&(this.renderColorBarPreview(),this.renderPanelColorbar())}),this.displayModeRadios.forEach(e=>{e.addEventListener("change",e=>{this.state.displayMode=e.target.id,this.renderColorBarPreview(),this.renderPanelColorbar()})}),this.labelTypeRadios.forEach(e=>{e.addEventListener("change",e=>{this.state.labelType=e.target.id,this.renderColorBarPreview(),this.renderPanelColorbar()})}),this.precisionInput.addEventListener("change",e=>{let t=Number(e.target.value);isNaN(t)||t<1?(t=1,e.target.value=1):t>10&&(t=10,e.target.value=10),this.state.precision=t,this.renderColorBarPreview(),this.renderPanelColorbar()}),this.scientificCheckbox.addEventListener("change",e=>{this.state.scientific=e.target.checked,this.renderColorBarPreview(),this.renderPanelColorbar()}),this.librarySelectContainer.addEventListener("click",e=>{e.stopPropagation(),this.libraryOptions.style.display="block"===this.libraryOptions.style.display?"none":"block"}),document.addEventListener("click",()=>{this.libraryOptions.style.display="none"}),this.libraryOptionItems.forEach(e=>{e.addEventListener("click",t=>{t.stopPropagation();const n=e.dataset.value;this.colorLibrarySelect.value=n,this.state.colorLibrary=n,this.renderSelectedColorBar(n),this.updateLibraryStops(n),this.libraryOptions.style.display="none",this.renderColorBarPreview(),this.renderPanelColorbar()}),e.addEventListener("mouseenter",()=>{e.style.background="#f5f5f5"}),e.addEventListener("mouseleave",()=>{e.style.background="white"})}),this.colorLibrarySelect.addEventListener("change",e=>{const t=e.target.value;this.state.colorLibrary=t,this.renderSelectedColorBar(t),this.updateLibraryStops(t),this.renderColorBarPreview(),this.renderPanelColorbar()}),this.resetBtn.addEventListener("click",()=>{const e=this.initialMin,t=this.initialMax,n=this.calculateDefaultStep(e,t,16);this.state={...this.state,min:e,max:t,start:0,step:4e3,displayMode:"continuous",labelType:"integer",precision:1,scientific:!1,colorLibrary:"default",rangeMode:"count",rangeCount:16,rangeStep:n,originalStopRatios:[0,.2,.4,.6,.8,1],stops:[{value:e+0*(t-e),color:"#0000FF"},{value:e+.2*(t-e),color:"#0080FF"},{value:e+.4*(t-e),color:"#00FFFF"},{value:e+.6*(t-e),color:"#00FF00"},{value:e+.8*(t-e),color:"#FFFF00"},{value:e+1*(t-e),color:"#FF0000"}]},this.minInput.value=e,this.maxInput.value=t,this.displayModeRadios[0].checked=!0,this.labelTypeRadios[0].checked=!0,this.precisionInput.value=1,this.scientificCheckbox.checked=!1,this.colorLibrarySelect.value="default",this.rangeModeRadios[0].checked=!0,this.rangeCountInput.value=16,this.rangeStepInput.value=n,this.rangeCountInput.disabled=!1,this.rangeCountInput.classList.remove("input-disabled"),this.rangeStepInput.disabled=!0,this.rangeStepInput.classList.add("input-disabled"),this.renderColorBarPreview(),this.renderPanelColorbar()}),this.confirmBtn.addEventListener("click",()=>{this.saveOriginalState(),this.state.panelVisible=!1,this.settingPanel.classList.remove("active"),this.dispatchEvent(new CustomEvent("scaleConfirm",{detail:JSON.parse(JSON.stringify(this.state)),bubbles:!0,composed:!0}))}),this.cancelBtn.addEventListener("click",()=>{this.state.originalState&&(this.state=JSON.parse(JSON.stringify(this.state.originalState)),this.minInput.value=this.state.min,this.maxInput.value=this.state.max,this.displayModeRadios.forEach(e=>{e.checked=e.id===this.state.displayMode}),this.labelTypeRadios.forEach(e=>{e.checked=e.id===this.state.labelType}),this.precisionInput.value=this.state.precision,this.scientificCheckbox.checked=this.state.scientific,this.colorLibrarySelect.value=this.state.colorLibrary,this.rangeModeRadios.forEach(e=>{e.checked="countMode"===e.id&&"count"===this.state.rangeMode||"stepMode"===e.id&&"step"===this.state.rangeMode}),this.rangeCountInput.value=this.state.rangeCount,this.rangeStepInput.value=this.state.rangeStep,this.rangeCountInput.disabled="count"!==this.state.rangeMode,this.rangeStepInput.disabled="step"!==this.state.rangeMode,"count"===this.state.rangeMode?(this.rangeCountInput.classList.remove("input-disabled"),this.rangeStepInput.classList.add("input-disabled")):(this.rangeCountInput.classList.add("input-disabled"),this.rangeStepInput.classList.remove("input-disabled")),this.updatePanelPosition(),this.renderColorBarPreview(),this.renderPanelColorbar()),this.state.panelVisible=!1,this.settingPanel.classList.remove("active")}),this.applyBtn.addEventListener("click",()=>{this.renderColorBarPreview(),this.renderPanelColorbar(),this.dispatchEvent(new CustomEvent("scaleApply",{detail:JSON.parse(JSON.stringify(this.state)),bubbles:!0,composed:!0}))}),this.panelColorbar.addEventListener("dblclick",function(t){if("continuous"!==e.state.displayMode)return;t.stopPropagation();const n=this.getBoundingClientRect(),r=t.clientY-n.top,o=e.getValueFromY(r),a=.03*(e.state.max-e.state.min),i=e.state.stops.findIndex(e=>Math.abs(e.value-o)<a);if(-1!==i)e.state.stops.length>2?(e.state.stops.splice(i,1),e.state.originalStopRatios=e.state.stops.map(t=>(t.value-e.state.min)/(e.state.max-e.state.min)),e.renderPanelColorbar(),e.renderColorBarPreview()):e.showErrorMessage("至少需要保留2个色块以保证渐变效果,请不要删除最后2个色块!");else{const t=e.generateRandomColor();e.state.stops.push({value:o,color:t}),e.state.stops.sort((e,t)=>e.value-t.value),e.state.originalStopRatios=e.state.stops.map(t=>(t.value-e.state.min)/(e.state.max-e.state.min)),e.renderPanelColorbar(),e.renderColorBarPreview()}}),this.panelColorbar.addEventListener("contextmenu",function(t){t.preventDefault(),t.stopPropagation();const n=this.getBoundingClientRect(),r=t.clientY-n.top,o=e.getValueFromY(r),a=.03*(e.state.max-e.state.min),i=e.state.stops.find(e=>Math.abs(e.value-o)<a);if(i){e.colorPickerState.targetStop=i;const n=b(i.color).hsl();e.colorPickerState.hue=n[0],e.colorPickerState.saturation=n[1],e.colorPickerState.lightness=n[2],e.openColorPicker(t.clientX,t.clientY)}}),this.panelColorbar.addEventListener("mousedown",e=>{if("continuous"!==this.state.displayMode)return;const t=this.panelColorbar.getBoundingClientRect(),n=e.clientY-t.top;this.dragState.draggingStopIndex=this.findClosestStop(n),-1!==this.dragState.draggingStopIndex&&(this.dragState.isDragging=!0,this.dragState.dragStartY=e.clientY,this.dragState.dragStartValue=this.state.stops[this.dragState.draggingStopIndex].value,this.dragState.canvasRect=this.panelColorbar.getBoundingClientRect(),document.body.style.cursor="ns-resize",e.preventDefault())}),document.addEventListener("mousemove",e=>{if(!this.dragState.isDragging||-1===this.dragState.draggingStopIndex)return;const t=e.clientY-this.dragState.canvasRect.top,n=this.getValueFromY(t),{min:r,max:o,stops:a}=this.state,i=a[this.dragState.draggingStopIndex],s=[...a].sort((e,t)=>e.value-t.value),l=s.findIndex(e=>Math.abs(e.value-i.value)<1);let c=n;c=l>0?Math.max(s[l-1].value+1,c):Math.max(r,c),c=l<s.length-1?Math.min(s[l+1].value-1,c):Math.min(o,c),a[this.dragState.draggingStopIndex].value=c,this.state.originalStopRatios=this.state.stops.map(e=>(e.value-r)/(o-r)),this.renderPanelColorbar(),this.renderColorBarPreview()}),document.addEventListener("mouseup",()=>{this.dragState.isDragging&&(this.dragState={isDragging:!1,draggingStopIndex:-1,dragStartY:0,dragStartValue:0,canvasRect:null},document.body.style.cursor="")}),document.addEventListener("mouseleave",()=>{this.dragState.isDragging&&document.dispatchEvent(new MouseEvent("mouseup"))})}updateLibraryStops(e){const{min:t,max:n}=this.state;if(this.customColorLibs&&this.customColorLibs[e]){const r=this.customColorLibs[e];return this.state.originalStopRatios=r.ratios,void(this.state.stops=r.stops.map((e,o)=>({value:t+(n-t)*r.ratios[o],color:e.color})))}switch(e){case"default":this.state.originalStopRatios=[0,.2,.4,.6,.8,1],this.state.stops=[{value:t,color:"#0000FF"},{value:t+.2*(n-t),color:"#0080FF"},{value:t+.4*(n-t),color:"#00FFFF"},{value:t+.6*(n-t),color:"#00FF00"},{value:t+.8*(n-t),color:"#FFFF00"},{value:n,color:"#FF0000"}];break;case"BlkWhiClt":this.state.originalStopRatios=[0,.25,.5,.75,1],this.state.stops=[{value:t,color:"#000000"},{value:t+.25*(n-t),color:"#666666"},{value:t+.5*(n-t),color:"#999999"},{value:t+.75*(n-t),color:"#CCCCCC"},{value:n,color:"#FFFFFF"}];break;case"BlkWhiYlw":this.state.originalStopRatios=[0,.33,.66,1],this.state.stops=[{value:t,color:"#000000"},{value:t+.33*(n-t),color:"#888800"},{value:t+.66*(n-t),color:"#FFFF00"},{value:n,color:"#FFFFFF"}];break;case"BluWhiClt":this.state.originalStopRatios=[0,.25,.5,.75,1],this.state.stops=[{value:t,color:"#00008B"},{value:t+.25*(n-t),color:"#1E90FF"},{value:t+.5*(n-t),color:"#87CEFA"},{value:t+.75*(n-t),color:"#E0FFFF"},{value:n,color:"#FFFFFF"}]}}getValueFromY(e){const{min:t,max:n}=this.state;return t+(n-t)*(1-(Math.max(10,Math.min(480,e))-10)/470)}findClosestStop(e){const{stops:t,min:n,max:r}=this.state;if(0===t.length)return-1;const o=this.getValueFromY(e),a=.03*(r-n);let i=-1,s=1/0;return t.forEach((e,t)=>{const n=Math.abs(e.value-o);n<s&&n<a&&(s=n,i=t)}),i}updatePanelPosition(){this.settingPanel.style.top=`${this.state.panelPosition.top}px`,this.settingPanel.style.right=`${this.state.panelPosition.right}px`}saveOriginalState(){this.state.originalState=JSON.parse(JSON.stringify(this.state))}formatNumber(e){const{labelType:t,precision:n,scientific:r}=this.state;return r?e.toExponential(n):"float"===t?e.toFixed(n):Math.round(e).toString()}renderColorBarPreview(){const e=this.previewCanvas,t=this.valueLabels,{min:n,max:r,step:o,stops:a,displayMode:i}=this.state,s=this.colorBarPreview.clientHeight;e.width=65,e.height=s;const l=e.getContext("2d");if(l.clearRect(0,0,e.width,e.height),"continuous"===i){const i=[...a].sort((e,t)=>e.value-t.value),c=l.createLinearGradient(0,0,0,e.height);i.forEach(e=>{const t=1-(e.value-n)/(r-n);c.addColorStop(t,e.color)}),l.fillStyle=c,l.fillRect(0,0,e.width,e.height),t.innerHTML="";const d=s-20;let h=n;for(;h<=r;){const e=document.createElement("div");e.className="label-item",e.dataset.value=this.formatNumber(h),e.textContent=this.formatNumber(h);const a=10+d*(1-(h-n)/(r-n));e.style.position="absolute",e.style.top=`${a}px`,e.style.transform="translateY(-50%)",t.appendChild(e),h+=o}}else if("discrete"===i){const o=this.calculateDiscreteBlockCount(n,r),i=s/o,c=(r-n)/o,d=b.scale(a.sort((e,t)=>e.value-t.value).map(e=>e.color)).domain([n,r]);for(let t=0;t<o;t++){const a=n+(o-1-t)*c,h=(a+Math.min(a+c,r))/2,p=t*i,u=Math.min(i,s-p),f=d(h).hex();l.fillStyle=f,l.fillRect(0,p,e.width,u),l.strokeStyle="#ffffff",l.lineWidth=1,l.strokeRect(0,p,e.width,u)}t.innerHTML="";for(let e=0;e<o;e++){const a=n+(o-1-e)*c,s=Math.min(a+c,r),l=`${this.formatNumber(a)}-${this.formatNumber(s)}`,d=document.createElement("div");d.className="label-item",d.textContent=l;const h=e*i+i/2;d.style.position="absolute",d.style.top=`${h}px`,d.style.transform="translateY(-50%)",t.appendChild(d)}}}renderPanelColorbar(){const e=this.panelColorbar,t=this.colorbarLabels,{min:n,max:r,step:o,stops:a,displayMode:i}=this.state;e.width=100,e.height=490;const s=e.getContext("2d");if(s.clearRect(0,0,e.width,e.height),s.imageSmoothingEnabled=!1,"continuous"===i){const i=[...a].sort((e,t)=>e.value-t.value),l=s.createLinearGradient(0,10,0,e.height-10);i.forEach(e=>{const t=1-(e.value-n)/(r-n);l.addColorStop(t,e.color)}),s.fillStyle=l,s.fillRect(0,10,65,470),i.forEach(e=>{const t=e.color&&/^#([0-9A-Fa-f]{6})$/.test(e.color)?e.color:"#0000FF",o=10+470*(1-(e.value-n)/(r-n));s.save(),s.beginPath(),s.moveTo(65,o),s.lineTo(73,o-6),s.lineTo(89,o-6),s.lineTo(89,o+6),s.lineTo(73,o+6),s.closePath(),s.fillStyle=t,s.fill(),s.strokeStyle="#000000",s.lineWidth=2,s.lineJoin="round",s.stroke(),s.restore()}),t.innerHTML="";let c=n;for(;c<=r;){const e=10+470*(1-(c-n)/(r-n)),a=document.createElement("div");a.style.position="absolute",a.style.top=`${e}px`,a.style.transform="translateY(-50%)",a.style.left="0";const i=document.createElement("div");i.className="colorbar-label",i.textContent=this.formatNumber(c),a.appendChild(i),t.appendChild(a),c+=o}}else if("discrete"===i){const e=this.calculateDiscreteBlockCount(n,r),o=(r-n)/e,i=470/e,l=b.scale(a.sort((e,t)=>e.value-t.value).map(e=>e.color)).domain([n,r]);for(let t=0;t<e;t++){const a=n+(e-1-t)*o,c=(a+Math.min(a+o,r))/2,d=10+t*i,h=Math.min(i,470-t*i),p=l(c).hex();s.fillStyle=p,s.fillRect(0,d,60,h),s.strokeStyle="#ffffff",s.lineWidth=1,s.strokeRect(0,d,60,h)}t.innerHTML="";for(let a=0;a<e;a++){const s=n+(e-1-a)*o,l=Math.min(s+o,r),c=`${this.formatNumber(s)}-${this.formatNumber(l)}`,d=document.createElement("div"),h=10+a*i+i/2;d.style.position="absolute",d.style.top=`${h}px`,d.style.transform="translateY(-50%)",d.style.left="0";const p=document.createElement("div");p.className="colorbar-label",p.textContent=c,d.appendChild(p),t.appendChild(d)}}}getColor(e){return Array.isArray(e)?e.map(e=>this.getSingleColor(e)):this.getSingleColor(e)}exportColorScaleToTxt(){const{min:e,max:t,stops:n,colorLibrary:r}=this.state,o={name:`${r}_${(new Date).getTime()}`,min:e,max:t,stops:n.map(n=>({value:n.value,color:n.color,ratio:(n.value-e)/(t-e)}))},a=JSON.stringify(o,null,2),i=new Blob([a],{type:"text/plain"}),s=URL.createObjectURL(i),l=document.createElement("a");l.href=s,l.download=`color_scale_${o.name}.txt`,document.body.appendChild(l),l.click(),setTimeout(()=>{document.body.removeChild(l),URL.revokeObjectURL(s)},100),this.showSuccessMessage("色条数据已保存为TXT文件")}importColorScaleFromTxt(e){return new Promise((t,n)=>{if(!e)return void n("未选择文件");if("text/plain"!==e.type&&!e.name.endsWith(".txt"))return this.showErrorMessage("请选择TXT格式的文件"),void n("文件类型错误");const r=new FileReader;r.onload=e=>{try{const r=JSON.parse(e.target.result);if(!r.name||!Array.isArray(r.stops))return this.showErrorMessage("TXT文件格式错误:缺少必要字段"),void n("数据格式错误");const{min:o,max:a}=this.state,i=r.stops.map(e=>({value:o+(a-o)*e.ratio,color:e.color})),s=`custom_${Date.now()}`,l=r.name||`自定义色条_${(new Date).toLocaleString()}`,c=document.createElement("option");c.value=s,c.textContent=l,this.colorLibrarySelect.appendChild(c);const d=document.createElement("div");d.className="library-option",d.dataset.value=s,d.innerHTML=`\n <div class="option-color-bar" id="${s}ColorBar"></div>\n <span class="option-text" title="${l}">${l}</span>\n `,this.libraryOptions.appendChild(d);const h=this.shadowRoot.getElementById(`${s}ColorBar`);this.renderLibraryColorBar(h,i.map(e=>({color:e.color,pos:(e.value-o)/(a-o)}))),d.addEventListener("click",e=>{e.stopPropagation();const t=d.dataset.value;this.colorLibrarySelect.value=t,this.state.colorLibrary=t,this.renderSelectedColorBar(t),this.updateLibraryStops(t),this.libraryOptions.style.display="none",this.renderColorBarPreview(),this.renderPanelColorbar()}),d.addEventListener("mouseenter",()=>{d.style.background="#f5f5f5"}),d.addEventListener("mouseleave",()=>{d.style.background="white"}),this.customColorLibs=this.customColorLibs||{},this.customColorLibs[s]={name:l,stops:i,ratios:i.map(e=>(e.value-o)/(a-o))};try{localStorage.setItem("chromaColorCustomLibs",JSON.stringify(this.customColorLibs))}catch(e){console.error("保存自定义色库到缓存失败:",e),this.showErrorMessage("色库导入成功,但缓存保存失败(可能存储空间不足)")}this.showSuccessMessage(`成功导入色条:${l}`),t(s)}catch(e){this.showErrorMessage("解析TXT文件失败:"+e.message),n(e)}},r.onerror=()=>{this.showErrorMessage("读取文件失败"),n("文件读取错误")},r.readAsText(e)})}loadCustomLibsFromStorage(){try{const e=localStorage.getItem("chromaColorCustomLibs");if(!e)return;this.customColorLibs=JSON.parse(e);const{min:t,max:n}=this.state;Object.keys(this.customColorLibs).forEach(e=>{const t=this.customColorLibs[e],n=document.createElement("option");n.value=e,n.textContent=t.name,this.colorLibrarySelect.appendChild(n);const r=document.createElement("div");r.className="library-option",r.dataset.value=e,r.innerHTML=`\n <div class="option-color-bar" id="${e}ColorBar"></div>\n <span class="option-text" title="${t.name}">${t.name}</span>\n `,this.libraryOptions.appendChild(r);const o=this.shadowRoot.getElementById(`${e}ColorBar`);this.renderLibraryColorBar(o,t.stops.map((e,n)=>({color:e.color,pos:t.ratios[n]})));const a=this;r.addEventListener("click",e=>{e.stopPropagation();const t=r.dataset.value;a.colorLibrarySelect.value=t,a.state.colorLibrary=t,a.updateLibraryStops(t),a.renderSelectedColorBar(t),a.libraryOptions.style.display="none",a.renderColorBarPreview(),a.renderPanelColorbar()}),r.addEventListener("mouseenter",()=>{r.style.background="#f5f5f5"}),r.addEventListener("mouseleave",()=>{r.style.background="white"})})}catch(e){console.error("加载保存的自定义色库失败:",e),this.showErrorMessage("加载保存的色库失败,将使用默认配置")}}getSingleColor(e){const{min:t,max:n,stops:r,displayMode:o}=this.state;if(e<t||e>n)return null;const a=[...r].sort((e,t)=>e.value-t.value);return b.scale(a.map(e=>e.color)).domain(a.map(e=>e.value))(e).hex()}}customElements.get("chroma-color-scale")||customElements.define("chroma-color-scale",yt);export{yt as ChromaColorScale};
3
+ //# sourceMappingURL=chroma-color-scale.min.js.map