https://ssseee.love/assets/TmlGradientEditor.e7a9f38c.js

1import{as as e,_ as S,ag as x,aE as C,ar as G,al as M,aq as y}from"./index.b39fe1b1.js";import{f as E}from"./faPlus.b7ccafa3.js";import{f as F}from"./faMinus.5dd9ea58.js";import b from"./TmlToggle.df71affc.js";import I from"./TmlColorInput.578ba9bd.js";import T from"./TmlNewSelect.8a3926cc.js";import{N as d,D as p,E as h,S as s,f as r,F as A,a2 as L,H as k,R as P}from"./vue.00f7c436.js";import"./sentry.09480738.js";import"./TmlInput.c5c24787.js";import"./faCheck.dd6ba410.js";import"./faTimes.9e2515d7.js";import"./faArrowRight.97fd3c4b.js";import"./faUndo.a98f3c90.js";import"./TmlColorPicker.f6de1915.js";import"./tinycolor.b47c1398.js";import"./debounce.41ca9a8b.js";import"./faTimes.9da037f7.js";import"./faSearch.e965d023.js";import"./form-field.da56e5af.js";import"./scrollToElement.a6113a43.js";import"./isEqual.7a4a4211.js";const B=new e({stops:[{color:"#ff0018",position:0},{color:"#ffa52c",position:.167},{color:"#ffff41",position:.333},{color:"#008018",position:.5},{color:"#0000f9",position:.667},{color:"#86007d",position:.833}]}),D=new e({stops:[{color:"#FF9800",position:0},{color:"#FF5722",position:1}]}),X=new e({stops:[{color:"#3F51B5",position:0},{color:"#FAFAFA",position:.333},{color:"#f44336",position:.667}]}),R=new e({stops:[{color:"#F06292",position:0},{color:"#FAFAFA",position:.333},{color:"#795548",position:.667}]}),U=new e({stops:[{color:"#405de6",position:0},{color:"#5851db",position:.11},{color:"#833ab4",position:.22},{color:"#c13584",position:.33},{color:"#e1306c",position:.44},{color:"#fd1d1d",position:.55},{color:"#f56040",position:.66},{color:"#f77737",position:.77},{color:"#fcaf45",position:.88},{color:"#ffdc80",position:1}]}),N=new e({stops:[{color:"#00DDFF",position:0},{color:"#d364e0",position:.25},{color:"#ecae2a",position:1}]}),V=new e({stops:[{color:"#ffc161",position:0},{color:"#FF8E6F",position:.2},{color:"#E36883",position:.4},{color:"#A85490",position:.6},{color:"#5E498A",position:.8}]});const O={name:"TmlGradientEditor",components:{TmlButton:x,TmlToggle:b,TmlColorInput:I,TmlNewSelect:T},props:{interpolate:{type:Boolean,default:!1},value:{type:Object}},data(){return{faPlus:E.faPlus,faMinus:F.faMinus,faCaretDown:C.faCaretDown,gradient:null,cnv:!1,ctx:!1,activeStopIndex:0,movingStop:!1,gradients:[],interpolateGradient:!1,direction:"X",activeGradient:null}},computed:{activeStop(){return this.gradient.stops[this.activeStopIndex]},activeStopColour(){if(!this.activeStop)return"#fff";const{color:t}=this.activeStop;return typeof t=="string"?t:G(t)},canvasScaleRatio(){return this.cnv.scrollWidth/this.cnv.width}},watch:{interpolate(){this.interpolateGradient=this.interpolate},interpolateGradient(){this.$emit("interpolate-changed",this.interpolateGradient),this.renderCanvas()},direction(){this.$emit("direction-changed",this.direction),this.renderCanvas()},value(){this.value&&(this.gradient.stops=[],this.value.stops.forEach(({position:t,color:o})=>this.gradient.addStop(t,o)))}},created(){this.gradient=new e(this.value||{stops:[{position:0,color:"#F3A872"},{position:1,color:"#FF2600"}]}),this.createGradients()},mounted(){this.cnv=this.$refs.preview,this.ctx=this.cnv.getContext("2d"),this.ctx&&(this.renderCanvas(),window.document.body.addEventListener("mouseup",this.onMouseUp),window.document.body.addEventListener("mousemove",this.onMouseMove),window.document.body.addEventListener("touchend",this.onMouseUp),window.document.body.addEventListener("touchmove",this.onMouseMove))},beforeUnmount(){window.document.body.removeEventListener("mouseup",this.onMouseUp),window.document.body.removeEventListener("mousemove",this.onMouseMove),window.document.body.removeEventListener("touchend",this.onMouseUp),window.document.body.removeEventListener("touchmove",this.onMouseMove)},methods:{renderCanvas(){if(this.ctx){const t=new e;this.gradient.stops.forEach(a=>{t.addStop(a.position,a.color)});const o=this.ctx.createLinearGradient(0,0,this.cnv.width,0);this.ctx.fillStyle=t.toCanvasGradient(o,this.interpolateGradient),this.ctx.fillRect(0,0,this.cnv.width,this.cnv.height),this.$emit("input",t)}},getCaretOffset(t){return{left:`${Math.round(this.cnv.width*t.position*this.canvasScaleRatio)}

1px`}},onCaretMousedown(t,o){this.activeStopIndex=o,this.movingStop=!0},orderStops(){this.gradient.stops.sort((t,o)=>t.position>o.position)},addStop(){this.gradient.addStop(.8,"#000"),this.renderCanvas()},removeStop(){this.gradient.removeStop(this.activeStopIndex),this.renderCanvas()},changeActiveStopColour(t){this.activeStop&&(this.activeStop.color=typeof t=="string"?M(t):t,this.renderCanvas())},createGradients(){this.gradients.push({text:"Pride rainbow",value:{gradient:B,interpolate:!1,direction:"Y"}}),this.gradients.push({text:"Summer",value:{gradient:D,interpolate:!0,direction:"X"}}),this.gradients.push({text:"Tricolore",value:{gradient:X,interpolate:!1,direction:"X"}}),this.gradients.push({text:"Neopolitan",value:{gradient:R,interpolate:!1,direction:"X"}}),this.gradients.push({text:"Photographer",value:{gradient:U,interpolate:!0,direction:"X"}}),this.gradients.push({text:"Candy",value:{gradient:N,interpolate:!0,direction:"X"}}),this.gradients.push({text:"Dusk",value:{gradient:V,interpolate:!1,direction:"X"}})},loadPremadeGradient(t){t&&(this.interpolateGradient=t.value.interpolate,this.gradient=new e(t.value.gradient),this.activeStopIndex=0,this.direction=t.value.direction,this.renderCanvas())},onMouseUp(){this.movingStop!==!1&&(this.movingStop=!1,this.orderStops(),this.$emit("gradientChanged",this.gradient.stops))},onMouseMove(t){var o;if((o=t.touches)!=null&&o.length&&(t=t.touches[0]),this.movingStop!==!1&&typeof this.gradient.stops[this.activeStopIndex]<"u"){const a=this.cnv.getBoundingClientRect(),u=y((t.pageX-a.x)/(this.cnv.width*this.canvasScaleRatio),0,1);this.gradient.stops[this.activeStopIndex].position=u,this.renderCanvas()}}}},z={class:"row"},H={class:"col"},j={class:"row"},q={class:"col"},W={class:"col text-right"},Y={class:"gradient-editor-container"},J=["onMousedown","onTouchstart"],K={ref:"preview",width:"140",height:"30",style:{width:"95%",height:"30px"}},Q={class:"col-12 mt-4"};function Z(t,o,a,u,i,n){const m=d("tml-button"),v=d("tml-toggle"),f=d("font-awesome-icon"),g=d("tml-color-input"),_=d("tml-new-select");return p(),h("div",z,[s("div",H,[s("div",j,[s("div",q,[r(m,{href:"#",icon:i.faPlus,small:"",onClick:n.addStop},null,8,["icon","onClick"]),r(m,{href:"#",icon:i.faMinus,small:"",onClick:n.removeStop},null,8,["icon","onClick"])]),s("div",W,[r(v,{modelValue:i.interpolateGradient,"onUpdate:modelValue":o[0]||(o[0]=c=>i.interpolateGradient=c),"field-name":"interpolate-gradient",label:"Smooth","label-off":"Stripes"},null,8,["modelValue"])])]),s("div",Y,[(p(!0),h(A,null,L(i.gradient.stops,(c,l)=>(p(),h("a",{key:l,class:k(["gradient-editor-caret",{active:i.activeStopIndex===l}]),style:P(n.getCaretOffset(c)),onMousedown:w=>n.onCaretMousedown(c,l),onTouchstart:w=>n.onCaretMousedown(c,l)},[r(f,{icon:i.faCaretDown},null,8,["icon"])],46,J))),128)),s("canvas",K,null,512)]),r(g,{value:n.activeStopColour,placeholder:"Stop colour",name:"stop-colour",onInput:n.changeActiveStopColour},null,8,["value","onInput"])]),s("div",Q,[r(_,{label:"Premade gradients",name:"gradient",value:i.activeGradient,"identifier-field":"text",options:i.gradients,onInput:n.loadPremadeGradient},null,8,["value","options","onInput"])])])}const St=S(O,[["render",Z],["__scopeId","data-v-5837d77c"]]);export{St as default};
2//# sourceMappingURL=TmlGradientEditor.e7a9f38c.js.map