vue-piano-roll/dist/vue-piano-roll.umd.js

A DAW-like Piano Roll Vue Component.

(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x["vue-piano-roll"]={},x.Vue))})(this,(function(x,e){"use strict";const R=["C","C#","Db","D","D#","Eb","E","F","F#","Gb","G","G#","Ab","A","A#","Bb","B"],k=["C-1","C#-1","Db-1","D-1","D#-1","Eb-1","E-1","F-1","F#-1","Gb-1","G-1","G#-1","Ab-1","A-1","A#-1","Bb-1","B-1","C0","C#0","Db0","D0","D#0","Eb0","E0","F0","F#0","Gb0","G0","G#0","Ab0","A0","A#0","Bb0","B0","C1","C#1","Db1","D1","D#1","Eb1","E1","F1","F#1","Gb1","G1","G#1","Ab1","A1","A#1","Bb1","B1","C2","C#2","Db2","D2","D#2","Eb2","E2","F2","F#2","Gb2","G2","G#2","Ab2","A2","A#2","Bb2","B2","C3","C#3","Db3","D3","D#3","Eb3","E3","F3","F#3","Gb3","G3","G#3","Ab3","A3","A#3","Bb3","B3","C4","C#4","Db4","D4","D#4","Eb4","E4","F4","F#4","Gb4","G4","G#4","Ab4","A4","A#4","Bb4","B4","C5","C#5","Db5","D5","D#5","Eb5","E5","F5","F#5","Gb5","G5","G#5","Ab5","A5","A#5","Bb5","B5","C6","C#6","Db6","D6","D#6","Eb6","E6","F6","F#6","Gb6","G6","G#6","Ab6","A6","A#6","Bb6","B6","C7","C#7","Db7","D7","D#7","Eb7","E7","F7","F#7","Gb7","G7","G#7","Ab7","A7","A#7","Bb7","B7","C8","C#8","Db8","D8","D#8","Eb8","E8","F8","F#8","Gb8","G8","G#8","Ab8","A8","A#8","Bb8","B8","C9","C#9","Db9","D9","D#9","Eb9","E9","F9","F#9","Gb9","G9"],O=r=>{const l=k.includes(r)?r.replace(/-?\d/,""):r,d=r.replace(l,"");if(r.includes("b")){const p=R.indexOf(l);return R[p-1]+d}return l+d};function z(r,l,d){return Math.min(Math.max(r,d),l)}class K extends Error{constructor(l){super(`Failed to parse color: "${l}"`)}}var B=K;function q(r){if(typeof r!="string")throw new B(r);if(r.trim().toLowerCase()==="transparent")return[0,0,0,0];let l=r.trim();l=oe.test(r)?J(r):r;const d=Q.exec(l);if(d){const u=Array.from(d).slice(1);return[...u.slice(0,3).map(f=>parseInt(E(f,2),16)),parseInt(E(u[3]||"f",2),16)/255]}const p=ee.exec(l);if(p){const u=Array.from(p).slice(1);return[...u.slice(0,3).map(f=>parseInt(f,16)),parseInt(u[3]||"ff",16)/255]}const c=te.exec(l);if(c){const u=Array.from(c).slice(1);return[...u.slice(0,3).map(f=>parseInt(f,10)),parseFloat(u[3]||"1")]}const s=ne.exec(l);if(s){const[u,f,g,m]=Array.from(s).slice(1).map(parseFloat);if(z(0,100,f)!==f)throw new B(r);if(z(0,100,g)!==g)throw new B(r);return[...re(u,f,g),Number.isNaN(m)?1:m]}throw new B(r)}function U(r){let l=5381,d=r.length;for(;d;)l=l*33^r.charCodeAt(--d);return(l>>>0)%2341}const I=r=>parseInt(r.replace(/_/g,""),36),Z="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce((r,l)=>{const d=I(l.substring(0,3)),p=I(l.substring(3)).toString(16);let c="";for(let s=0;s<6-p.length;s++)c+="0";return r[d]=`${c}${p}`,r},{});function J(r){const l=r.toLowerCase().trim(),d=Z[U(l)];if(!d)throw new B(r);return`#${d}`}const E=(r,l)=>Array.from(Array(l)).map(()=>r).join(""),Q=new RegExp(`^#${E("([a-f0-9])",3)}([a-f0-9])?$`,"i"),ee=new RegExp(`^#${E("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i"),te=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${E(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i"),ne=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i,oe=/^[a-z]+$/i,L=r=>Math.round(r*255),re=(r,l,d)=>{let p=d/100;if(l===0)return[p,p,p].map(L);const c=(r%360+360)%360/60,s=(1-Math.abs(2*p-1))*(l/100),u=s*(1-Math.abs(c%2-1));let f=0,g=0,m=0;c>=0&&c<1?(f=s,g=u):c>=1&&c<2?(f=u,g=s):c>=2&&c<3?(g=s,m=u):c>=3&&c<4?(g=u,m=s):c>=4&&c<5?(f=u,m=s):c>=5&&c<6&&(f=s,m=u);const a=p-s/2,h=f+a,$=g+a,j=m+a;return[h,$,j].map(L)};function le(r){const[l,d,p,c]=q(r).map((h,$)=>$===3?h:h/255),s=Math.max(l,d,p),u=Math.min(l,d,p),f=(s+u)/2;if(s===u)return[0,0,f,c];const g=s-u,m=f>.5?g/(2-s-u):g/(s+u);return[60*(l===s?(d-p)/g+(d<p?6:0):d===s?(p-l)/g+2:(l-d)/g+4),m,f,c]}function ae(r,l,d,p){return`hsla(${(r%360).toFixed()}, ${z(0,100,l*100).toFixed()}%, ${z(0,100,d*100).toFixed()}%, ${parseFloat(z(0,1,p).toFixed(3))})`}function V(r,l){const[d,p,c,s]=le(r);return ae(d,p,c-l,s)}function se(r){if(r==="transparent")return 0;function l(s){const u=s/255;return u<=.04045?u/12.92:Math.pow((u+.055)/1.055,2.4)}const[d,p,c]=q(r);return .2126*l(d)+.7152*l(p)+.0722*l(c)}function D(r,l){return V(r,-l)}const ce={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},ie={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},de=e.defineComponent({__name:"FullScreen",props:{open:{type:Boolean},color:{}},setup(r){e.useCssVars(c=>({v8862eefa:p.value}));const l=r,d=e.computed(()=>`pr-fullscreen-icon ${l.open?"pr-open":""}`),p=e.computed(()=>l.color||"#fff");return(c,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[r.open?(e.openBlock(),e.createElementBlock("svg",ce,[...s[0]||(s[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",ie,[...s[1]||(s[1]=[e.createElementVNode("path",{fill:"currentColor",d:"M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"},null,-1)])]))],2))}}),P=(r,l)=>{const d=r.__vccOpts||r;for(const[p,c]of l)d[p]=c;return d},ue=P(de,[["__scopeId","data-v-a5fbc04f"]]),pe={class:"pr-container"},fe={class:"pr-label"},he={class:"pr-note-grid"},ge=["note-start","note-length","onContextmenu"],me=["onMousedown"],be=["onMousedown"],_e=["onMousedown"],ve=P(e.defineComponent({__name:"PianoRoll",props:{zoomX:{default:.5},zoomY:{default:1},rangeBottom:{default:"C1"},rangeTop:{default:"G5"},currentBeat:{default:-1},currentTick:{},ticksPerBeat:{default:2},defaultNoteLength:{default:1},noteHeight:{default:2},modelValue:{},length:{default:80},loop:{type:Boolean,default:!0},noteColor:{default:"#f43f5f"},backgroundColor:{default:"rgb(76, 85, 99)"},incidentalColor:{default:"rgb(55, 65, 81)"},gridColor:{default:"rgb(107, 114, 128)"},labelColor:{default:"rgb(255, 255, 255)"},labelIncidentalColor:{default:"rgb(107, 114, 128)"},labelBackgroundColor:{default:"rgb(107, 114, 128)"},labelBorderColor:{default:"rgb(75, 85, 99)"},borderWidth:{default:1},shadowColor:{default:"rgba(255, 255, 255, 0.3)"},shadowMap:{default:()=>[]},onNoteEvent:{type:Function,default:()=>{}}},emits:["update:modelValue"],setup(r,{emit:l}){const d=l,p=e.ref({x:0,y:0}),c=e.ref(null),s=e.ref(null),u=e.ref(16),f=e.ref(!1),g=e.ref(0),m=e.ref([]),a=r,h=e.computed(()=>{if(a.length==="infinite")return{x:a.zoomX,y:a.zoomY};const t=(g.value-u.value*4)/(u.value*a.length);return{x:Math.max(t,a.zoomX),y:a.zoomY}}),$=e.computed(()=>a.shadowMap?a.shadowMap.flatMap(t=>{if(t={...t,note:O(t.note)},/[0-9]/.test(t.note))return typeof A.value[t.note]>"u"?[]:t;const o=[],n=t.start||0,i=t.length||y.value-n,_=Object.keys(A.value).filter(b=>new RegExp(`${t.note}-?[0-9]`).test(b));for(const b of _)o.push({note:b,start:n,length:i});return o}):[]),j=e.computed(()=>C.value.map(t=>({id:t.id,note:t.note}))),v=t=>Math.round(t*a.ticksPerBeat),w=(t,o=!1)=>o?Math.ceil(t/a.ticksPerBeat):t/a.ticksPerBeat,S=e.computed(()=>{const t=a.currentTick??v(a.currentBeat);return a.length==="infinite"||!a.loop?t:t%y.value}),C=e.computed({get:()=>a.modelValue||[],set:t=>d("update:modelValue",t)}),y=e.computed(()=>{if(a.length!=="infinite")return v(a.length);const t=Math.ceil((c.value?.getBoundingClientRect().width||0)/(u.value*h.value.x));if(C.value.length===0)return t;const o=C.value.sort((n,i)=>i.start+i.length-(n.start+n.length))[0];return Math.max(o.start+o.length+20,t)}),M=e.computed(()=>{const t=k.findIndex(n=>n===a.rangeTop),o=k.findIndex(n=>n===a.rangeBottom);return k.slice(o,t+1).filter(n=>!/[A-G]b-?[0-9]/.test(n)).reverse()}),A=e.computed(()=>{const t={};return M.value.forEach((o,n)=>{t[o]=n}),t}),Ce=t=>C.value.filter(o=>v(o.start)===t).map(o=>o.note),we=t=>C.value.filter(o=>(t===0&&(t=y.value),v(o.start+o.length)===t)).map(o=>o.note);e.watch(S,t=>{a.onNoteEvent({notesStarting:Ce(t),notesEnding:we(t)})}),e.watch(j,(t,o)=>{if(t.filter(i=>{const _=o.find(b=>b.id===i.id);return!_||_.note!==i.note}).some(i=>s.value?.note.id===i.id)){const i=s.value.note;Be(),X([i.note],i.length*1e3*60/120)}});const H=t=>{const o=Math.floor(t/(u.value*2*h.value.y));return M.value[o]},ye=(t,o=!1)=>{const n=u.value*h.value.x;return(o?w(t):t)*n},T=t=>{const o=u.value*h.value.x;return w(Math.floor(v(t/o)))};function xe(t){return t*parseFloat(getComputedStyle(document.documentElement).fontSize)}const G=(t,{e:o,dragType:n},i=!1)=>{o.button===0&&(t.selected=!0,s.value={note:t,offset:o.offsetX,dragType:n,placement:{start:t.start,length:t.length,end:t.start+t.length}},X([t.note],t.length*1e3*60/120),setTimeout(()=>{!t.selected&&!i&&(o.shiftKey||C.value.forEach(_=>{_.selected=!1}),t.selected=!0)},100))},F=()=>{if(!s.value)return;const t=s.value.note;t.selected=!1,s.value=null},ke=()=>{if(!s.value)return;const{x:t,y:o}=p.value,n=s.value.note,i=s.value.dragType,_=T(t)-w(a.ticksPerBeat-1),b=Math.max(T(t-s.value.offset),0),N=H(o);if(i==="drag"){n.start=Math.min(w(y.value-v(n.length)),b),n.note=N;return}if(i==="left"){n.start=Math.min(b,s.value.placement.end-w(1)),n.length=s.value.placement.end-b||w(1);return}if(i==="right"||i==="drag-right"){const Y=_-n.start+1;n.length=Y<=0?1/a.ticksPerBeat:Y}i==="drag-right"&&n.length===1&&(n.start=b<0?0:b)},W=t=>{if(!c.value)return;const o=c.value.getBoundingClientRect(),i=document.querySelector(".pr-label")?.getBoundingClientRect().width,_=t.clientX-o.left-(i||0),b=t.clientY-o.top;p.value={x:_,y:b},ke()},ze=()=>C.value.length===0?0:C.value.sort((t,o)=>o.id-t.id)[0].id,X=(t,o)=>{a.onNoteEvent({notesStarting:t,notesEnding:[]}),m.value.push(...t),setTimeout(()=>{a.onNoteEvent({notesStarting:[],notesEnding:t}),m.value=m.value.filter(n=>!t.includes(n))},o)},Be=()=>{a.onNoteEvent({notesStarting:[],notesEnding:m.value}),m.value=[]},Ee=t=>{if(t.button!==0||!c.value)return;const o=p.value.x,n=p.value.y,i=T(o);let _=a.defaultNoteLength;if(v(i+_)>y.value&&(_=w(y.value-v(i))),i<0)return;const b=H(n),N={id:ze()+1,start:i,length:_,note:b,velocity:100,color:a.noteColor,selected:!1};C.value.push(N),G(N,{e:t,dragType:"right"})},$e=t=>{C.value=C.value.filter(o=>o.id!==t.id)};function Me(){g.value=c.value?.offsetWidth||0}e.onMounted(()=>{u.value=xe(1),c.value&&(c.value.addEventListener("mousemove",W),new ResizeObserver(Me).observe(c.value))}),e.onUnmounted(()=>{c.value&&c.value.removeEventListener("mousemove",W)});const Ae=e.computed(()=>`calc(1rem * ${h.value.x})`),Ge=e.computed(()=>`calc(var(--pr-tone-grid-cell-width) * ${a.length})`),Fe=e.computed(()=>{const t=`calc(1rem * ${h.value.x})`,o=`calc(${t} - 1px)`,n="var(--pr-background-color)",i="var(--pr-grid-color)";return`repeating-linear-gradient( to right, ${n} 0, ${n} ${o}, ${i} ${o}, ${i} ${t} )`}),Ne=e.computed(()=>{const t=`calc(1rem * ${h.value.x})`,o=`calc(${t} - 1px)`,n="var(--pr-incidental-color)",i="var(--pr-grid-color)";return`repeating-linear-gradient( to right, ${n} 0, ${n} ${o}, ${i} ${o}, ${i} ${t} )`}),De=e.computed(()=>`repeat(${y.value}, calc(1rem * ${w(h.value.x)}))`),je=e.computed(()=>`repeat(${y.value}, ${2*h.value.y}rem)`),Se=e.computed(()=>`${2*h.value.y}rem`),Te=e.computed(()=>h.value.y<1?`${h.value.y}rem`:"1rem"),Re=e.computed(()=>`${ye(S.value,!0)}px`),qe=e.computed(()=>`${2*h.value.y*M.value.length}rem`),Ie=e.computed(()=>`${w(h.value.x)}rem`),Le=e.computed(()=>S.value<0),Ve=e.computed(()=>a.backgroundColor),Pe=e.computed(()=>a.gridColor),He=e.computed(()=>a.incidentalColor),We=e.computed(()=>a.labelColor),Xe=e.computed(()=>a.labelBackgroundColor),Ye=e.computed(()=>a.labelIncidentalColor),Oe=e.computed(()=>a.labelBorderColor),Ke=e.computed(()=>a.borderWidth+"px"),Ue=e.computed(()=>`-${Math.ceil(a.borderWidth/2)}px`),Ze=e.computed(()=>"var(--pr-title-width)"),Je=e.computed(()=>a.shadowColor),Qe=e.computed(()=>se(a.backgroundColor)>.5?"#000":"#fff"),et=t=>t.selected?D(t.color,.1):t.color,tt=t=>t.selected?t.color:V(t.color,.1),nt=t=>t.selected?D(t.color,.2):D(t.color,.1),ot=e.computed(()=>`${a.noteHeight}px`),rt=t=>{const o=tt(t),n=nt(t);return{backgroundColor:et(t),borderTopColor:n,borderLeftColor:n,borderRightColor:o,borderBottomColor:o}},lt=e.computed(()=>({"--pr-background-color":Ve.value,"--pr-grid-color":Pe.value,"--pr-incidental-color":He.value,"--pr-label-color":We.value,"--pr-label-background-color":Xe.value,"--pr-label-incidental-color":Ye.value,"--pr-label-border-color":Oe.value,"--pr-border-width":Ke.value,"--pr-shadow-color":Je.value,"--pr-tone-grid-height":Se.value,"--pr-tone-grid-cell-width":Ae.value,"--pr-tone-grid-width":Ge.value,"--pr-tone-grid-bg":Fe.value,"--pr-tone-grid-incidental-bg":Ne.value,"--pr-note-grid-template":De.value,"--pr-note-grid-template-rows":je.value,"--pr-note-grid-top":Ue.value,"--pr-note-grid-left":Ze.value,"--pr-label-font-size":Te.value,"--pr-playhead-left":Re.value,"--pr-playhead-height":qe.value,"--pr-playhead-width":Ie.value,"--pr-note-height":ot.value}));return(t,o)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(lt.value),class:e.normalizeClass(["pr-shrink-wrap",{"pr-fullscreen":f.value}])},[e.createVNode(ue,{color:Qe.value,onClick:o[0]||(o[0]=n=>f.value=!f.value),open:f.value},null,8,["color","open"]),e.createElementVNode("div",pe,[e.createElementVNode("div",{ref_key:"pianoRoll",ref:c,class:"pr-piano-roll"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value,n=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`pr-tone ${/#/.test(n)?"pr-sharp":""}`),key:n},[e.createElementVNode("div",fe,e.toDisplayString(n),1),e.createElementVNode("div",{class:"pr-tone-inner",onMousedown:e.withModifiers(Ee,["prevent"]),onMouseup:e.withModifiers(F,["prevent"])},null,32)],2))),128)),e.createElementVNode("div",he,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,n=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`pr-ghost ${n.note}`),style:e.normalizeStyle({gridColumn:`${v(n.start||0)+1} / span ${v(n.length||y.value)}`,gridRow:`${A.value[n.note]+1} / span 1`,height:r.zoomY*2+"rem"})},null,6))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,n=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`pr-note ${n.id===s.value?.note?.id?"pr-dragging":""}`),"note-start":n.start,"note-length":n.length,style:e.normalizeStyle({gridColumn:`${v(n.start)+1} / span ${v(n.length)}`,gridRow:`${A.value[n.note]+1} / span 1`,height:r.zoomY*2+"rem"}),key:n.id,onContextmenu:e.withModifiers(i=>$e(n),["right","prevent"])},[e.createElementVNode("div",{class:"pr-note-inner",style:e.normalizeStyle(rt(n))},[e.createElementVNode("span",{onMousedown:e.withModifiers(i=>G(n,{e:i,dragType:"left"}),["prevent"]),onMouseup:e.withModifiers(F,["prevent"]),class:"pr-edge pr-right"},null,40,me),e.createElementVNode("span",{onMousedown:e.withModifiers(i=>G(n,{e:i,dragType:"drag"}),["prevent"]),onMouseup:e.withModifiers(F,["prevent"]),class:"pr-middle"},null,40,be),e.createElementVNode("span",{onMousedown:e.withModifiers(i=>G(n,{e:i,dragType:"right"}),["prevent"]),onMouseup:e.withModifiers(F,["prevent"]),class:"pr-edge pr-left"},null,40,_e)],4)],46,ge))),128))]),e.createElementVNode("div",{class:e.normalizeClass(`pr-playhead ${Le.value?"pr-hidden":""}`)},null,2)],512)])],6))}}),[["__scopeId","data-v-7856d859"]]);x.PianoRoll=ve,x.notesBetweenC1AndG9=k,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));