|
|
import{d as F,o as h,f as C,q as g,h as R,g as x,c as M,K as fe,y as K,a5 as be,s as L,x as me,F as A,r as O,I as B,M as Ve,a6 as je,D as q,B as j,v as ve,t as V,Q as Ne,a as N,A as ze,p as Ce,z as _e,b as k,e as S,k as ce,n as D,J as Ge,u as ue,a7 as W,w as We,a2 as Xe}from"./index-bVOhw2NF.js";import{_ as Ye}from"./Slider-C2GzLvgH.js";import{_ as Ke}from"./Tooltip-C_3SXSAr.js";/*! * vue-color-kit v1.0.6 * (c) 2023 * @license MIT */function E(e){let t={r:0,g:0,b:0,a:1};/#/.test(e)?t=qe(e):/rgb/.test(e)?t=de(e):typeof e=="string"?t=de(`rgba(${e})`):Object.prototype.toString.call(e)==="[object Object]"&&(t=e);const{r:o,g:n,b:s,a}=t,{h:l,s:r,v:i}=Je(t);return{r:o,g:n,b:s,a:a===void 0?1:a,h:l,s:r,v:i}}function J(e){const t=document.createElement("canvas"),o=t.getContext("2d"),n=e*2;return t.width=n,t.height=n,o.fillStyle="#ffffff",o.fillRect(0,0,n,n),o.fillStyle="#ccd5db",o.fillRect(0,0,e,e),o.fillRect(e,e,e,e),t}function U(e,t,o,n,s,a){const l=e==="l",r=t.createLinearGradient(0,0,l?o:0,l?0:n);r.addColorStop(.01,s),r.addColorStop(.99,a),t.fillStyle=r,t.fillRect(0,0,o,n)}function Ue({r:e,g:t,b:o},n){const s=l=>("0"+Number(l).toString(16)).slice(-2),a=`#${s(e)}${s(t)}${s(o)}`;return n?a.toUpperCase():a}function qe(e){e=e.slice(1);const t=o=>parseInt(o,16)||0;return{r:t(e.slice(0,2)),g:t(e.slice(2,4)),b:t(e.slice(4,6))}}function de(e){return typeof e=="string"?(e=(/rgba?\((.*?)\)/.exec(e)||["","0,0,0,1"])[1].split(","),{r:Number(e[0])||0,g:Number(e[1])||0,b:Number(e[2])||0,a:Number(e[3]?e[3]:1)}):e}function Je({r:e,g:t,b:o}){e=e/255,t=t/255,o=o/255;const n=Math.max(e,t,o),s=Math.min(e,t,o),a=n-s;let l=0;n===s?l=0:n===e?t>=o?l=60*(t-o)/a:l=60*(t-o)/a+360:n===t?l=60*(o-e)/a+120:n===o&&(l=60*(e-t)/a+240),l=Math.floor(l);let r=parseFloat((n===0?0:1-s/n).toFixed(2)),i=parseFloat(n.toFixed(2));return{h:l,s:r,v:i}}var Q=F({props:{color:{type:String,default:"#000000"},hsv:{type:Object,default:null},size:{type:Number,default:152}},emits:["selectSaturation"],data(){return{slideSaturationStyle:{}}},mounted(){this.renderColor(),this.renderSlide()},methods:{renderColor(){const e=this.$refs.canvasSaturation,t=this.size,o=e.getContext("2d");e.width=t,e.height=t,o.fillStyle=this.color,o.fillRect(0,0,t,t),U("l",o,t,t,"#FFFFFF","rgba(255,255,255,0)"),U("p",o,t,t,"rgba(0,0,0,0)","#000000")},renderSlide(){this.slideSaturationStyle={left:this.hsv.s*this.size-5+"px",top:(1-this.hsv.v)*this.size-5+"px"}},selectSaturation(e){const{top:t,left:o}=this.$el.getBoundingClientRect(),n=e.target.getContext("2d"),s=l=>{let r=l.clientX-o,i=l.clientY-t;r<0&&(r=0),i<0&&(i=0),r>this.size&&(r=this.size),i>this.size&&(i=this.size),this.slideSaturationStyle={left:r-5+"px",top:i-5+"px"};const p=n.getImageData(Math.min(r,this.size-1),Math.min(i,this.size-1),1,1),[u,b,m]=p.data;this.$emit("selectSaturation",{r:u,g:b,b:m})};s(e);const a=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",a)};document.addEventListener("mousemove",s),document.addEventListener("mouseup",a)}}});const Qe={ref:"canvasSaturation"};function Ze(e,t,o,n,s,a){return h(),C("div",{class:"saturation",onMousedown:t[1]||(t[1]=R((...l)=>e.selectSaturation&&e.selectSaturation(...l),["prevent","stop"]))},[g("canvas",Qe,null,512),g("div",{style:e.slideSaturationStyle,class:"slide"},null,4)],32)}Q.render=Ze;Q.__file="src/color/Saturation.vue";var Z=F({props:{hsv:{type:Object,default:null},width:{type:Number,default:15},height:{type:Number,default:152}},emits:["selectHue"],data(){return{slideHueStyle:{}}},mounted(){this.renderColor(),this.renderSlide()},methods:{renderColor(){const e=this.$refs.canvasHue,t=this.width,o=this.height,n=e.getContext("2d");e.width=t,e.height=o;const s=n.createLinearGradient(0,0,0,o);s.addColorStop(0,"#FF0000"),s.addColorStop(.17*1,"#FF00FF"),s.addColorStop(.17*2,"#0000FF"),s.addColorStop(.17*3,"#00FFFF"),s.addColorStop(.17*4,"#00FF00"),s.addColorStop(.17*5,"#FFFF00"),s.addColorStop(1,"#FF0000"),n.fillStyle=s,n.fillRect(0,0,t,o)},renderSlide(){this.slideHueStyle={top:(1-this.hsv.h/360)*this.height-2+"px"}},selectHue(e){const{top:t}=this.$el.getBoundingClientRect(),o=e.target.getContext("2d"),n=a=>{let l=a.clientY-t;l<0&&(l=0),l>this.height&&(l=this.height),this.slideHueStyle={top:l-2+"px"};const r=o.getImageData(0,Math.min(l,this.height-1),1,1),[i,p,u]=r.data;this.$emit("selectHue",{r:i,g:p,b:u})};n(e);const s=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",s)};document.addEventListener("mousemove",n),document.addEventListener("m
|
